新增layout布局 (#1821)

* feat(layout): add a new component

feat #1701

* fix: 修复代码

* fix: 修复PR问题

example/app.json

@@ -49,7 +49,8 @@
     "pages/image-viewer/image-viewer",
     "pages/result/result",
     "pages/result/result-page",
-    "pages/link/link"
+    "pages/link/link",
+    "pages/col/col"
   ],
   "subpackages": [
     {

example/pages/home/data/base.ts

@@ -34,10 +34,11 @@ const base = {
       name: 'Link',
       label: '链接',
     },
-    // {
-    //   name: 'Layout',
-    //   label: '布局',
-    // },
+    {
+      name: 'Layout',
+      label: '布局',
+      path: '/pages/col/col',
+    },
     // {
     //   name: 'Typography',
     //   label: '字体',

src/col/_example/col.json

@@ -0,0 +1,8 @@
+{
+  "navigationBarTitleText": "Layout",
+  "navigationBarBackgroundColor": "#f6f6f6",
+  "usingComponents": {
+    "t-col": "tdesign-miniprogram/col/col",
+    "t-row": "tdesign-miniprogram/row/row"
+  }
+}

src/col/_example/col.less

@@ -0,0 +1,17 @@
+.dark {
+  background-color: #0052d9;
+}
+
+.light {
+  background-color: #366ef4;
+}
+
+.dark,
+.light {
+  background-clip: content-box;
+  color: #fff;
+  font-size: 28rpx;
+  line-height: 96rpx;
+  margin-bottom: 32rpx;
+  text-align: center;
+}

src/col/_example/col.ts

@@ -0,0 +1 @@
+Page({});

src/col/_example/col.wxml

@@ -0,0 +1,30 @@
+<view class="demo">
+  <view class="demo-title">Layout 布局</view>
+  <view class="demo-desc">
+    以规则的网格阵列来指导和规范页面中的版面布局以及信息分布，提高界面内布局的一致性，节约成本。
+  </view>
+  <t-demo title="01 组件类型" desc="基础用法">
+    <t-row>
+      <t-col span="8" t-class="dark">col-8</t-col>
+      <t-col span="8" t-class="light">col-8</t-col>
+      <t-col span="8" t-class="dark">col-8</t-col>
+    </t-row>
+
+    <t-row>
+      <t-col span="4" t-class="dark">col-4</t-col>
+      <t-col span="16" offset="4" t-class="light">col-16 col-offset-4</t-col>
+    </t-row>
+
+    <t-row>
+      <t-col offset="12" span="12" t-class="dark">col-12 col-offset-12</t-col>
+    </t-row>
+  </t-demo>
+
+  <t-demo desc="在列元素之间增加间距">
+    <t-row gutter="16">
+      <t-col span="8" t-class="dark">col-8</t-col>
+      <t-col span="8" t-class="light">col-8</t-col>
+      <t-col span="8" t-class="dark">col-8</t-col>
+    </t-row>
+  </t-demo>
+</view>

src/col/col.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

src/col/col.less

@@ -0,0 +1,17 @@
+@import '../common/index.less';
+
+.@{prefix}-col {
+  box-sizing: border-box;
+  float: left;
+}
+
+.col-generate(@n, @i: 1) when(@i <= @n) {
+  .@{prefix}-col--@{i} {
+    width: (@i * 100% / @n);
+  }
+  .@{prefix}-col--offset-@{i} {
+    margin-left: (@i * 100% / @n);
+  }
+  .col-generate(@n, (@i + 1));
+}
+.col-generate(24);

src/col/col.ts

@@ -0,0 +1,30 @@
+import { SuperComponent, wxComponent, RelationsOptions } from '../common/src/index';
+import config from '../common/config';
+
+const { prefix } = config;
+const name = `${prefix}-col`;
+
+@wxComponent()
+export default class Col extends SuperComponent {
+  externalClasses = [`${prefix}-class`];
+
+  properties = {
+    span: {
+      type: Number,
+    },
+    offset: {
+      type: Number,
+    },
+  };
+
+  data = {
+    prefix,
+    classPrefix: name,
+  };
+
+  relations: RelationsOptions = {
+    '../row/row': {
+      type: 'parent',
+    },
+  };
+}

src/col/col.wxml

@@ -0,0 +1,9 @@
+<wxs src="../common/utils.wxs" module="_" />
+<wxs src="./col.wxs" module="utils" />
+
+<view
+  class="class {{prefix}}-class {{ _.cls(classPrefix, [_.formatNumToString(span)]) }} {{ offset ? classPrefix + '--offset-' + offset : '' }}"
+  style="{{ utils.getColStyles({ gutter }) }}"
+>
+  <slot />
+</view>

src/col/col.wxs

@@ -0,0 +1,16 @@
+var utils = require('../common/utils.wxs');
+
+function getColStyles(data) {
+  if (!data.gutter) {
+    return '';
+  }
+
+  return utils._style({
+    'padding-right': utils.addUnit(data.gutter / 2),
+    'padding-left': utils.addUnit(data.gutter / 2),
+  });
+}
+
+module.exports = {
+  getColStyles: getColStyles,
+};

src/common/utils.wxs

@@ -4,7 +4,7 @@
  * addUnit */
 // 为 css 添加单位
 function addUnit(value) {
-  var REGEXP = getRegExp('^\d+(.\d+)?$');
+  var REGEXP = getRegExp('^-?\d+(.\d+)?$');
   if (value == null) {
     return undefined;
   }
@@ -124,6 +124,14 @@ function _style(styles) {
   return styles;
 }
 
+function formatNumToString(value) {
+  var res = '';
+  if (!isNaN(value) && typeof value === 'number') {
+    res = value.toString();
+  }
+  return res;
+}
+
 module.exports = {
   addUnit: addUnit,
   isString: isString,
@@ -134,4 +142,5 @@ module.exports = {
   cls: cls,
   getBadgeAriaLabel: getBadgeAriaLabel,
   _style: _style,
+  formatNumToString: formatNumToString,
 };

src/row/row.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

src/row/row.less

@@ -0,0 +1,5 @@
+.t-row:after {
+  clear: both;
+  content: '';
+  display: table;
+}

src/row/row.ts

@@ -0,0 +1,46 @@
+import { SuperComponent, wxComponent, RelationsOptions } from '../common/src/index';
+import config from '../common/config';
+
+const { prefix } = config;
+@wxComponent()
+export default class Row extends SuperComponent {
+  externalClasses = [];
+
+  properties = {
+    gutter: {
+      type: Number,
+    },
+  };
+
+  data = {
+    prefix,
+  };
+
+  relations: RelationsOptions = {
+    '../col/col': {
+      type: 'child',
+      linked(target) {
+        const { gutter } = this.data;
+        if (gutter) {
+          target.setData({ gutter });
+        }
+      },
+    },
+  };
+
+  observers = {
+    gutter() {
+      this.setGutter();
+    },
+  };
+
+  methods = {
+    setGutter() {
+      const { gutter } = this.data;
+      const cols = this.$children;
+      cols.forEach((col) => {
+        col.setData({ gutter });
+      });
+    },
+  };
+}

src/row/row.wxml

@@ -0,0 +1,5 @@
+<wxs src="./row.wxs" module="utils" />
+
+<view class="class {{prefix}}-row" style="{{ utils.getRowStyles({ gutter }) }}">
+  <slot />
+</view>

src/row/row.wxs

@@ -0,0 +1,16 @@
+var utils = require('../common/utils.wxs');
+
+function getRowStyles(data) {
+  if (!data.gutter) {
+    return '';
+  }
+
+  return utils._style({
+    'margin-right': utils.addUnit(-data.gutter / 2),
+    'margin-left': utils.addUnit(-data.gutter / 2),
+  });
+}
+
+module.exports = {
+  getRowStyles: getRowStyles,
+};