BaseTable/PrimaryTable/Enhanced Composition API (#365)

* feat: composition api base table * feat(table): column fixed to left or right * fix(table): ellipsis zIndex is too hight * feat(table): vertical-align and tableContentWidth * feat(table): cell event; row events; expandable * fix(table): vertical-align * feat(table): fixed footer * feat(table): custom footer * feat(table): fixed rows * feat(table): lastFullRow and fistFullRow * feat: add useDefault * feat(table): pagination * feat(table): hide empty last full row * feat(table): rename disableDataSort to disablePageData * feat(table): disableDataPage and rowClassName * feat(table): loading and empty * feat(table): multiple header * feat(table): merge cell * feat(table): styles * refactor(table): refact * feat(table): code improvement * feat(table): update merge * fix(table): style error * feat(table): highlight filter icon * fix(table): recover custom col * fix(table): table body rowspan border is multiple * feat: update common * feat(tabl): add rowAttributes and footData * feat(table): rowAttributes * feat(tnode): renderTNodeJSX and useTNodeJSX * feat: useTNodeJSX * feat(primary-table): column config controller * feat(primary-table): expandedRow * feat(primary-table): sort * feat(table): virtual scroll base files * feat(primary-table): selected row * feat(primary-table): remove select box * feat(table): filter * feat(table): listeners * feat(table): sort/filter/column-config in multiple header * feat(table): async loading * feat(table): tree data * feat(table): move tr to tr.tsx from userTableBody.tsx * feat(table): add lazy-load and virtual-scroll feature * feat(table): tree select * feat(table): multiple header and fixed columns * feat(table): virtual scroll * test: snapshots * feat(table): demo code * feat(table): multi header fixed * feat(table): multiple header fixed style * feat(table): optimize lazy and virtual scroll * refactor(table): code optimization * feat(table): vertical-align * feat(table): global config * feat(table): sortIcon and filterIcon * feat(table): add scroll event * feat(table): headerAffixToTop * feat(table): 吸顶表头隐藏 * fix(table): 虚拟滚动，固定列时，恢复表头点击事件 * fix(table): fixed slow scrolling and fast scrolling bugs fixed repeated rendering issues when scrolling slowly, and blank table after fast scrolling to the end * fix(table): fixed sort causing virtual scrolling blank * docs(table): 恢复虚拟滚动示例代码 * chore: version * refactor(table): 使用类名控制旋转而非样式 * fix: style import error * fix(table): 虚拟滚动,固定列宽度 * fix(table): 去除多余的边框;新增threshold 控制达到一定量级的才启用 virtual * fix(table): border line for scrollbar * fix(table): ellipsis can not show when it's hidden * style: lint error * fix(table): trigger change on pagination * feat(table): add align * fix(table): 右侧阴影不消失 * style: lint error * fix(table): some bugs * fix(table): lastFullRow and firstFullRow * refactor(table): use tbody * test(table): add more demo test * fix(table): fix bugs by unit tests * feat(tnode): 优化 TNode 渲染逻辑 * test(table): add some unit tests * fix(table): some bugs * refactor(table): remove useless code * fix(table): 列固定状态和非固定状态切换 * fix(table): add onRowMouseover and onRowDblclick; add row events unit tests * fix(table): rowAttributes * test(table): add column unit tests * fix(table): affixed header scroll * test(table): remove mockdate to top of import * chore(table): remove useless code * fix(table): 通栏行、空数据、展开行不随内容横向滚动而滚动 * fix(table): 固定任意列，不一定连续 * chore: remove emit * refactor: remove context.emit from useDefaultvalue * feat(table): virtual scroll table optimize * fix(table): right fixed colums * fix(table): 表头省略 * fix(table): remove useless params context * feat: update common * fix(table): optimize isVirtual param * fix(table): rowspan and colspan * fix(table): fixed column id Dialog * refactor(table): fixedRows * feat(table): 点击不同的排序图标进行不同的排序 * fix(table): remove useless code * test(table): update snapshots * fix(table): loading zIndex and something else * fix(table): tree-col ellipsis * feat(table): fullHeight * feat(table): table supplied in display: none * feat: update common * refactor(table): improve code * docs: config provider * refactor(table): typo error * refactor(table): spell, rename, test * refactor(table): pagination * chore(table): typo error & update base demo * fix(table): custom footer Co-authored-by: sheepluo <sheepluo@tencent.com> Co-authored-by: louiszhai <louiszhai@tencent.com> Co-authored-by: xiaosansiji <xiaosansiji@gmail.com> Co-authored-by: Uyarn <uyarnchen@gmail.com>
Tencent · Mar 28, 2022 · d2d2f8c · d2d2f8c
1 parent eb23596
commit d2d2f8c
Show file tree

Hide file tree

Showing 128 changed files with 30,447 additions and 11,289 deletions.
diff --git a/examples/config-provider/config-provider.md b/examples/config-provider/config-provider.md
diff --git a/examples/config-provider/demos/calendar.vue b/examples/config-provider/demos/calendar.vue
@@ -5,6 +5,9 @@
 </template>
 
 <script>
+import merge from 'lodash/merge';
+import enConfig from 'tdesign-vue/config-provider/en_US_config';
+
 const MONTHS = [
   'January',
   'February',
@@ -20,7 +23,8 @@ const MONTHS = [
   'December',
 ];
 
-const GLOBAL_CONFIG = {
+// 全局特性配置，可以引入英文默认配置 enConfig，还可以在默认配置的基础上进行自定义配置
+const GLOBAL_CONFIG = merge(enConfig, {
   calendar: {
     yearSelection: '{year}',
     // 1 表示周一；7 表示周日
@@ -32,19 +36,19 @@ const GLOBAL_CONFIG = {
     showWeekend: 'Show Weekend',
     today: 'Today',
     thisMonth: 'This Month',
-    week: ['Monday', 'Tuesday', 'Wedsday', 'Thuresday', 'Friday', 'Staturday', 'Sunday'].join(),
+    week: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'].join(),
     cellMonth: MONTHS.join(),
     fillWithZero: false,
     controllerConfig: {
       year: {
         visible: true,
-        selecteProps: {
+        selectProps: {
           size: 'small',
         },
       },
       month: {
         visible: true,
-        selecteProps: {
+        selectProps: {
           size: 'small',
         },
       },
@@ -76,7 +80,7 @@ const GLOBAL_CONFIG = {
       },
     },
   },
-};
+});
 
 export default {
   data() {

diff --git a/examples/config-provider/demos/date-picker.vue b/examples/config-provider/demos/date-picker.vue
@@ -16,9 +16,12 @@
 </template>
 
 <script>
+import merge from 'lodash/merge';
+import enConfig from 'tdesign-vue/config-provider/en_US_config';
 // import dayjs from 'dayjs';
 
-const DATE_PICK_CONFIGS = {
+// 全局特性配置，可以引入英文默认配置 enConfig，还可以在默认配置的基础上进行自定义配置
+const DATE_PICK_CONFIGS = merge(enConfig, {
   placeholder: {
     date: 'select date',
     month: 'select month',
@@ -42,7 +45,7 @@ const DATE_PICK_CONFIGS = {
   //   'Next 30 Days': [dayjs().subtract(30, 'day'), dayjs()],
   //   'Month to date': [dayjs().subtract(1, 'month'), dayjs()],
   // },
-};
+});
 
 export default {
   data() {

diff --git a/examples/config-provider/demos/others.vue b/examples/config-provider/demos/others.vue
@@ -57,10 +57,10 @@
     <br /><br /><br />
 
     <!-- 自定义关闭按钮示例 -->
-    <t-tag theme="primary" closable>Fearure Tag</t-tag>
-    <t-tag theme="success" closable>Fearure Tag</t-tag>
-    <t-tag theme="warning" closable>Fearure Tag</t-tag>
-    <t-tag theme="danger" closable>Fearure Tag</t-tag>
+    <t-tag theme="primary" closable>Feature Tag</t-tag>
+    <t-tag theme="success" closable>Feature Tag</t-tag>
+    <t-tag theme="warning" closable>Feature Tag</t-tag>
+    <t-tag theme="danger" closable>Feature Tag</t-tag>
     <br /><br />
 
     <!-- 数组件空数据 -->
@@ -71,7 +71,7 @@
     <br /><br />
     <br />
     <t-steps :current="2" layout="vertical">
-      <t-step-item title="Fisrt Step" content="You need to click the blue button"></t-step-item>
+      <t-step-item title="First Step" content="You need to click the blue button"></t-step-item>
       <t-step-item title="Second Step" content="Fill your base information into the form"></t-step-item>
       <t-step-item title="Error Step" status="error" content="Something Wrong! Custom Error Icon!"></t-step-item>
       <t-step-item title="Last Step" content="You haven't finish this step."></t-step-item>
@@ -84,6 +84,8 @@
 import {
   ErrorIcon, ChevronRightIcon, CloseIcon, CloseCircleIcon,
 } from 'tdesign-icons-vue';
+import merge from 'lodash/merge';
+import enConfig from 'tdesign-vue/config-provider/en_US_config';
 
 const transferList = [];
 for (let i = 0; i < 20; i++) {
@@ -94,7 +96,7 @@ for (let i = 0; i < 20; i++) {
   });
 }
 
-const SELECET_OPTIONS = [
+const SELECT_OPTIONS = [
   { label: 'Shanghai', value: 'shanghai' },
   { label: 'Beijing', value: 'beijing' },
   { label: 'Shenzhen', value: 'shenzhen' },
@@ -134,8 +136,8 @@ const TREE_DATA = [
 export default {
   data() {
     return {
-      // 全局特性配置
-      globalConfig: {
+      // 全局特性配置，可以引入英文默认配置 enConfig，还可以在默认配置的基础上进行自定义配置
+      globalConfig: merge(enConfig, {
         form: {
           requiredMark: false,
         },
@@ -175,11 +177,11 @@ export default {
         steps: {
           errorIcon: (h) => h && <ErrorIcon />,
         },
-      },
+      }),
       transferList,
       transferChecked: [],
       transferTargetValue: [],
-      options1: SELECET_OPTIONS.concat(),
+      options1: SELECT_OPTIONS.concat(),
       treeValue: '',
       treeOptions: TREE_OPTIONS,
       treeData: TREE_DATA,

diff --git a/examples/config-provider/demos/pagination.vue b/examples/config-provider/demos/pagination.vue
@@ -5,18 +5,22 @@
 </template>
 
 <script>
+import merge from 'lodash/merge';
+import enConfig from 'tdesign-vue/config-provider/en_US_config';
+
 export default {
   data() {
     return {
       current: 1,
-      globalConfig: {
+      // 全局特性配置，可以引入英文默认配置 enConfig，还可以在默认配置的基础上进行自定义配置
+      globalConfig: merge(enConfig, {
         pagination: {
           itemsPerPage: '{size} / page',
           jumpTo: 'jump to',
           page: '',
           total: 'Total {total} items',
         },
-      },
+      }),
     };
   },
 };

diff --git a/examples/config-provider/demos/table.vue b/examples/config-provider/demos/table.vue
@@ -1,28 +1,19 @@
 <template>
   <t-config-provider :globalConfig="globalConfig" style="padding: 16px">
     <!-- 全局配置：空数据呈现，演示 -->
-    <t-table
-      :data="[]"
-      :columns="columns"
-      bordered
-      rowKey="property"
-    ></t-table>
-    <br><br>
+    <t-table :data="[]" :columns="columns" bordered rowKey="property"></t-table>
+    <br /><br />
 
     <!-- 全局配置：自定义展开图标和排序图标，演示 -->
-    <t-table
-      :data="data"
-      :columns="columns"
-      :expandedRow="expandedRow"
-      expandOnRowClick
-      rowKey="property"
-    ></t-table>
-    <br><br>
+    <t-table :data="data" :columns="columns" :expandedRow="expandedRow" expandOnRowClick rowKey="property"></t-table>
+    <br /><br />
   </t-config-provider>
 </template>
 
 <script lang="jsx">
 import { ChevronRightIcon, CaretDownSmallIcon } from 'tdesign-icons-vue';
+import merge from 'lodash/merge';
+import enConfig from 'tdesign-vue/config-provider/en_US_config';
 
 const columns = [
   {
@@ -33,10 +24,17 @@ const columns = [
   {
     colKey: 'platform',
     title: 'Platform',
+    filter: {
+      type: 'single',
+    },
   },
   {
     colKey: 'property',
     title: 'Property',
+    sorter: true,
+    filter: {
+      type: 'single',
+    },
   },
 ];
 
@@ -49,14 +47,26 @@ const data = [
 export default {
   data() {
     return {
-      // 全局特性配置
-      globalConfig: {
+      // 全局特性配置，可以引入英文默认配置 enConfig，还可以在默认配置的基础上进行自定义配置
+      globalConfig: merge(enConfig, {
         table: {
+          // 支持 String 和 Function 两种数据类型
           empty: 'Empty Data',
+          // empty can also be a function
+          // empty: (h) => h && <div class='custom-empty-content'>Empty Data</div>,
           expandIcon: (h) => h && <ChevronRightIcon />,
-          sortIcon: (h) => h && <CaretDownSmallIcon size='18px' />,
+          sortIcon: (h) => h && <CaretDownSmallIcon size="18px" />,
+
+          // More config
+          // filterIcon: () => <span>Filter</span>,
+          // filterInputPlaceholder: 'Enter Keyword',
+          // loadingMoreText: 'Load More',
+          // loadingText: 'Loading',
+          // sortAscendingOperationText: 'ascending sort',
+          // sortCancelOperationText: 'cancel sort',
+          // sortDescendingOperationText: 'descending sort',
         },
-      },
+      }),
       columns,
       data,
     };

diff --git a/examples/table/demos/async-loading.vue b/examples/table/demos/async-loading.vue
@@ -80,12 +80,14 @@ export default {
     };
   },
   computed: {
-    loadingNode() {
+    // eslint-disable-next-line
+    loadingNode(h) {
       return this.asyncLoading === 'loading-custom' ? this.customLoadingNode : this.asyncLoading;
     },
   },
   methods: {
-    customLoadingNode() {
+    // eslint-disable-next-line
+    customLoadingNode(h) {
       return <div class="t-table__async-loading">这是自定义加载状态和内容</div>;
     },
     onAsyncLoadingClick({ status }) {

diff --git a/examples/table/demos/base.vue b/examples/table/demos/base.vue
@@ -2,9 +2,16 @@
   <div class="tdesign-demo-block-column-large">
     <!-- 按钮操作区域 -->
     <div>
+      <t-radio-group v-model="size" variant="default-filled">
+        <t-radio-button value="small">小尺寸</t-radio-button>
+        <t-radio-button value="medium">中尺寸</t-radio-button>
+        <t-radio-button value="large">大尺寸</t-radio-button>
+      </t-radio-group>
+      <br /><br />
       <t-checkbox v-model="stripe">显示斑马纹</t-checkbox>
       <t-checkbox v-model="bordered">显示表格边框</t-checkbox>
       <t-checkbox v-model="hover">显示悬浮效果</t-checkbox>
+      <t-checkbox v-model="tableLayout">宽度自适应</t-checkbox>
     </div>
 
     <t-table
@@ -14,19 +21,23 @@
       :stripe="stripe"
       :bordered="bordered"
       :hover="hover"
+      :size="size"
+      :table-layout="tableLayout ? 'auto' : 'fixed'"
+      :pagination="pagination"
     ></t-table>
   </div>
 </template>
 <script lang="jsx">
 const data = [];
-for (let i = 0; i < 5; i++) {
+const total = 28;
+for (let i = 0; i < total; i++) {
   data.push({
     index: i,
     platform: i % 2 === 0 ? '共有' : '私有',
     type: ['String', 'Number', 'Array', 'Object'][i % 4],
     default: ['-', '0', '[]', '{}'][i % 4],
     detail: {
-      postion: `读取 ${i} 个数据的嵌套信息值`,
+      position: `读取 ${i} 个数据的嵌套信息值`,
     },
     needed: i % 4 === 0 ? '是' : '否',
     description: '数据源',
@@ -36,16 +47,24 @@ export default {
   data() {
     return {
       data,
+      size: 'medium',
+      tableLayout: false,
       stripe: true,
       bordered: true,
       hover: false,
       columns: [
         {
-          align: 'center',
           width: '100',
-          className: 'row',
           colKey: 'index',
           title: '序号',
+          // 对齐方式
+          align: 'center',
+          // 设置列类名
+          className: 'custom-column-class-name',
+          // 设置列属性
+          attrs: {
+            'data-id': 'first-column',
+          },
         },
         {
           width: 100,
@@ -65,38 +84,36 @@ export default {
           title: '是否必传',
         },
         {
-          colKey: 'detail.postion',
+          colKey: 'detail.position',
           title: '详情信息',
           width: 200,
+          /**
+           * 1.内容超出时，是否显示省略号。值为 true，则浮层默认显示单元格内容；
+           * 2.值类型为 Function 则自定义浮层显示内容；
+           * 3.值类型为 Object，则自动透传属性到 Popup 组件。
+           */
           ellipsis: true,
-          // 自定义 ellipsis 样式和内容，示例代码有效，勿删！！！
+
+          // 透传省略内容浮层 Popup 组件全部特性，示例代码有效，勿删！！！
+          // ellipsis: { placement: 'bottom', destroyOnClose: false },
+
+          // 完全自定义 ellipsis 浮层的样式和内容，示例代码有效，勿删！！！
           // ellipsis: (h, {
           //   row, col, rowIndex, colIndex,
           // }) => {
           //   if (rowIndex % 2) {
-          //     return <div>is even row {rowIndex + 1}, with data {row.detail.postion}</div>;
+          //     return <div>is even row {rowIndex + 1}, with data {row.detail.position}</div>;
           //   }
-          //   return <div>is odd row {rowIndex + 1}, with data {row.detail.postion}</div>;
+          //   return <div>is odd row {rowIndex + 1}, with data {row.detail.position}</div>;
           // },
         },
       ],
       /** 非受控用法：与分页组件对齐 */
       pagination: {
         defaultCurrent: 2,
-        defaultPageSize: 10,
-        total: 120,
+        defaultPageSize: 5,
+        total,
       },
-      /** 受控用法：与分页组件对齐（此处注释为受控用法示例，代码有效，勿删） */
-      // pagination: {
-      //   current: 1,
-      //   pageSize: 10,
-      //   total: 120,
-      //   // 也可以监听表格组件的 page-change 事件进行处理
-      //   onChange: (pageInfo.current) => {
-      //     this.pagination.current = pageInfo.current;
-      //     this.pagination.pageSize = pageInfo.pageSize;
-      //   },
-      // },
     };
   },
 };