feat(table): add radio and checkbox

packages/components/input/index.ts

@@ -0,0 +1,3 @@
+export * from './props';
+export * from './type';
+export * from './input';

packages/components/input/input.ts

@@ -1,12 +1,15 @@
 import { SuperComponent, wxComponent } from '../common/src/index';
 import config from '../common/config';
 import props from './props';
+import { TdInputProps } from './type';
 import { getCharacterLength, calcIcon } from '../common/utils';
 import { isDef } from '../common/validator';
 
 const { prefix } = config;
 const name = `${prefix}-input`;
 
+export type InputProps = TdInputProps;
+
 @wxComponent()
 export default class Input extends SuperComponent {
   options = {

packages/components/radio/index.ts

@@ -0,0 +1,3 @@
+export * from './props';
+export * from './type';
+export * from './radio';

packages/components/radio/radio.ts

@@ -1,7 +1,10 @@
 import config from '../common/config';
 import { SuperComponent, wxComponent, RelationsOptions } from '../common/src/index';
+import { TdRadioProps } from './type';
 import Props from './props';
 
+export type RadioProps = TdRadioProps;
+
 const { prefix } = config;
 const name = `${prefix}-radio`;
 

packages/components/table/__test__/demo.test.js

@@ -5,7 +5,17 @@
 import path from 'path';
 import simulate from 'miniprogram-simulate';
 
-const mapper = ['base', 'bordered', 'rowspan-colspan', 'scroll', 'stripe'];
+const mapper = [
+  'base',
+  'bordered',
+  'rowspan-colspan',
+  'scroll',
+  'stripe',
+  'sort',
+  'select',
+  'loading',
+  'custom-row-style',
+];
 
 describe('Table', () => {
   mapper.forEach((demoName) => {

packages/components/table/_example/custom-row-style/index.js

@@ -0,0 +1,55 @@
+import SkylineBehavior from '@behaviors/skyline.js';
+
+Component({
+  behaviors: [SkylineBehavior],
+  data: {
+    columns: [
+      { colKey: 'applicant', title: '申请人', width: 100, fixed: 'left' },
+      { colKey: 'status', title: '审批状态', width: 120 },
+      {
+        colKey: 'time',
+        title: '申请耗时(天)',
+        width: 120,
+        align: 'center',
+        className: ({ row }) => (row.time >= 9 ? 'custom-cell-class-name' : ''),
+      },
+      {
+        colKey: 'channel',
+        title: '签署方式',
+        width: 100,
+        align: 'right',
+        className: () => 'custom-cell-class-name',
+      },
+      { colKey: 'detail.email', title: '邮箱地址', width: 160, ellipsis: true },
+    ],
+    data: [],
+  },
+  lifetimes: {
+    attached() {
+      const data = [];
+      const total = 5;
+      for (let i = 0; i < total; i += 1) {
+        data.push({
+          id: i + 1,
+          applicant: ['贾明', '张三', '王芳'][i % 3],
+          status: ['审批通过', '审批失败', '审批过期'][i % 3],
+          channel: ['电子签署', '纸质签署', '纸质签署'][i % 3],
+          detail: {
+            email: ['w.cezkdudy@lhll.au', 'r.nmgw@peurezgn.sl', 'p.cumx@rampblpa.ru'][i % 3],
+          },
+          matters: ['宣传物料制作费用', 'algolia 服务报销', '相关周边制作费', '激励奖品快递费'][i % 4],
+          time: [2, 10, 1][i % 3],
+        });
+      }
+
+      this.setData({
+        data,
+      });
+    },
+  },
+  methods: {
+    onRowClick(e) {
+      console.log('[row-click]', e.detail);
+    },
+  },
+});

packages/components/table/_example/custom-row-style/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-table": "tdesign-miniprogram/table/table"
+  }
+}

packages/components/table/_example/custom-row-style/index.wxml

@@ -0,0 +1,8 @@
+<t-table
+  row-key="id"
+  columns="{{columns}}"
+  data="{{data}}"
+  bordered
+  show-header="{{true}}"
+  bind:row-click="onRowClick"
+/>

packages/components/table/_example/custom-row-style/index.wxss

@@ -0,0 +1,5 @@
+/* 自定义单元格类名样式 */
+.custom-cell-class-name {
+  color: orange;
+  font-weight: bold;
+}

packages/components/table/_example/loading/index.js

@@ -0,0 +1,42 @@
+import SkylineBehavior from '@behaviors/skyline.js';
+
+Component({
+  behaviors: [SkylineBehavior],
+  data: {
+    columns: [
+      { colKey: 'projName', title: '项目名称', width: 80, ellipsis: true },
+      { colKey: 'projTag', title: '标签', width: 80 },
+      { colKey: 'options', title: '操作', align: 'center', width: 120 },
+    ],
+    data: [],
+    total: 9,
+    pagination: {
+      defaultCurrent: 1,
+      defaultPageSize: 5,
+      total: 9,
+    },
+  },
+  lifetimes: {
+    attached() {
+      const data = [];
+      const total = 9;
+      for (let i = 0; i < total; i += 1) {
+        data.push({
+          index: i + 1,
+          projName: ['项目名称', '项目名称', '项目名称'][i % 3],
+          projTag: ['默认标签', '默认标签', '默认标签'][i % 3],
+          options: {
+            admin: ['管理', '管理', '管理'][i % 3],
+            delete: ['删除', '删除', '删除'][i % 3],
+          },
+        });
+      }
+      this.setData({ data });
+    },
+  },
+  methods: {
+    onPageChange(e) {
+      console.log('[page-change]', e.detail);
+    },
+  },
+});

packages/components/table/_example/loading/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-table": "tdesign-miniprogram/table/table"
+  }
+}

packages/components/table/_example/loading/index.wxml

@@ -0,0 +1,23 @@
+<view class="loading-demo">
+  <view class="loading-demo__title">上拉加载</view>
+  <t-table
+    row-key="index"
+    columns="{{columns}}"
+    data="{{data}}"
+    pagination="{{pagination}}"
+    show-header="{{true}}"
+    cell-empty-content="vvv"
+    bind:page-change="onPageChange"
+  />
+  <view class="loading-demo__title">分页加载</view>
+  <t-table
+    row-key="index"
+    columns="{{columns}}"
+    data="{{data}}"
+    loading-mode="pagination"
+    pagination="{{pagination}}"
+    show-header="{{true}}"
+    cell-empty-content="vvv"
+    bind:page-change="onPageChange"
+  />
+</view>

packages/components/table/_example/loading/index.wxss

@@ -0,0 +1,9 @@
+.loading-demo {
+  padding: 0 16rpx;
+}
+
+.loading-demo__title {
+  font-size: 28rpx;
+  margin: 24rpx 0 16rpx;
+  color: var(--td-text-color-secondary);
+}

packages/components/table/_example/select/index.js

@@ -0,0 +1,52 @@
+import SkylineBehavior from '@behaviors/skyline.js';
+
+Component({
+  behaviors: [SkylineBehavior],
+  data: {
+    selectedRowKeys1: [],
+    selectedRowKeys2: [],
+    multipleColumns: [
+      { colKey: 'row-select', type: 'multiple' },
+      { colKey: 'projName', title: '项目名称' },
+      { colKey: 'projTag', title: '项目名称' },
+      { colKey: 'options', title: '操作', align: 'center' },
+    ],
+    singleColumns: [
+      { colKey: 'row-select', type: 'single' },
+      { colKey: 'projName', title: '项目名称' },
+      { colKey: 'projTag', title: '项目名称' },
+      { colKey: 'options', title: '操作', align: 'center' },
+    ],
+    data: [],
+  },
+  lifetimes: {
+    attached() {
+      const data = [];
+      const total = 5;
+      for (let i = 0; i < total; i += 1) {
+        data.push({
+          index: i + 1,
+          projName: ['项目名称1', '项目名称2', '项目名称3'][i % 3],
+          projTag: ['默认标签', '默认标签', '默认标签'][i % 3],
+          options: {
+            admin: ['管理', '管理', '管理'][i % 3],
+            delete: ['删除', '删除', '删除'][i % 3],
+          },
+        });
+      }
+      this.setData({ data });
+    },
+  },
+  methods: {
+    onSelectChange1(e) {
+      const { selectedRowKeys } = e.detail;
+      console.log('onSelectChange1', selectedRowKeys);
+      this.setData({ selectedRowKeys1: selectedRowKeys });
+    },
+    onSelectChange2(e) {
+      const { selectedRowKeys } = e.detail;
+      console.log('onSelectChange2', selectedRowKeys);
+      this.setData({ selectedRowKeys2: selectedRowKeys });
+    },
+  },
+});

packages/components/table/_example/select/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-table": "tdesign-miniprogram/table/table"
+  }
+}

packages/components/table/_example/select/index.wxml

@@ -0,0 +1,22 @@
+<view class="select-demo">
+  <view class="select-demo__title">单选</view>
+  <t-table
+    row-key="index"
+    columns="{{singleColumns}}"
+    data="{{data}}"
+    selected-row-keys="{{selectedRowKeys1}}"
+    show-header="{{true}}"
+    cell-empty-content="vvv"
+    bind:select-change="onSelectChange1"
+  />
+  <view class="select-demo__title">多选</view>
+  <t-table
+    row-key="index"
+    columns="{{multipleColumns}}"
+    data="{{data}}"
+    selected-row-keys="{{selectedRowKeys2}}"
+    show-header="{{true}}"
+    cell-empty-content="vvv"
+    bind:select-change="onSelectChange2"
+  />
+</view>

packages/components/table/_example/select/index.wxss

@@ -0,0 +1,9 @@
+.select-demo {
+  padding: 0 16rpx;
+}
+
+.select-demo__title {
+  font-size: 28rpx;
+  margin: 24rpx 0 16rpx;
+  color: var(--td-text-color-secondary);
+}

packages/components/table/_example/sort/index.js

@@ -0,0 +1,53 @@
+import SkylineBehavior from '@behaviors/skyline.js';
+
+const statusNameListMap = {
+  0: '审批通过',
+  1: '审批失败',
+  2: '审批过期',
+};
+
+Component({
+  behaviors: [SkylineBehavior],
+  data: {
+    sort: null,
+    columns: [
+      { colKey: 'applicant', title: '申请人', align: 'center' },
+      {
+        colKey: 'status',
+        title: '申请状态',
+        width: 120,
+        align: 'center',
+        cell: ({ row }) => statusNameListMap[row.status] || '',
+      },
+      { colKey: 'channel', title: '签署方式', width: 120, align: 'center' },
+      { colKey: 'email', title: 'Email', width: 180, align: 'center' },
+      { colKey: 'createTime', title: 'Date', width: 100, align: 'center', sorter: true },
+    ],
+    data: [],
+  },
+  lifetimes: {
+    attached() {
+      const initData = [];
+      const total = 5;
+      for (let i = 0; i < total; i += 1) {
+        initData.push({
+          key: String(i + 1),
+          applicant: ['贾明', '张三', '王芳'][i % 3],
+          status: i % 3,
+          channel: ['电子签署', '纸质签署', '纸质签署'][i % 3],
+          email: ['w.cezkdudy@lhll.au', 'r.nmgw@peurezgn.sl', 'p.cumx@rampblpa.ru'][i % 3],
+          matters: ['宣传物料制作费用', 'algolia 服务报销', '相关周边制作费', '激励奖品快递费'][i % 4],
+          time: [2, 3, 1, 4][i % 4],
+          createTime: [20220101, 20220201, 20220301, 20220401, 20220501][i % 4],
+        });
+      }
+      this.setData({ data: initData });
+    },
+  },
+  methods: {
+    onSortChange(e) {
+      console.log('[sort-change]', e.detail);
+      this.setData({ sort: e.detail });
+    },
+  },
+});

packages/components/table/_example/sort/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-table": "tdesign-miniprogram/table/table"
+  }
+}

packages/components/table/_example/sort/index.wxml

@@ -0,0 +1,9 @@
+<t-table
+  row-key="key"
+  columns="{{columns}}"
+  data="{{data}}"
+  sort="{{sort}}"
+  show-header="{{true}}"
+  cell-empty-content="暂无数据"
+  bind:sort-change="onSortChange"
+/>

packages/components/table/_example/sort/index.wxss

@@ -0,0 +1 @@
+/* sort demo 无额外样式 */

packages/components/table/_example/table.json

@@ -6,6 +6,10 @@
     "bordered": "./bordered",
     "stripe": "./stripe",
     "scroll": "./scroll",
-    "rowspan-colspan": "./rowspan-colspan"
+    "rowspan-colspan": "./rowspan-colspan",
+    "sort": "./sort",
+    "select": "./select",
+    "loading": "./loading",
+    "custom-row-style": "./custom-row-style"
   }
 }