feat(Table): 修改Table组件目录结构和部分API文档规范

packages/devui-vue/devui/table/index.ts

@@ -1,11 +1,6 @@
 import type { App } from 'vue';
 import Table from './src/table';
-import Column from './src/column/column';
-
-Table.install = function (app: App): void {
-  app.component(Table.name, Table);
-  app.component(Column.name, Column);
-};
+import Column from './src/components/column/column';
 
 export { Table, Column };
 
@@ -14,6 +9,7 @@ export default {
   category: '数据展示',
   status: '10%',
   install(app: App): void {
-    app.use(Table as any);
-  }
+    app.component(Table.name, Table);
+    app.component(Column.name, Column);
+  },
 };

packages/devui-vue/devui/table/src/body/body.scss → packages/devui-vue/devui/table/src/components/body/body.scss

@@ -1,4 +1,4 @@
-@import '../../../styles-var/devui-var.scss';
+@import '../../../../styles-var/devui-var.scss';
 
 .devui-tbody {
   tr {

packages/devui-vue/devui/table/src/body/body.tsx → packages/devui-vue/devui/table/src/components/body/body.tsx

@@ -1,38 +1,38 @@
 import { defineComponent, inject, computed, PropType, toRef } from 'vue';
-import { TABLE_TOKEN } from '../table.type';
-import { Checkbox } from '../../../checkbox';
+import { TABLE_TOKEN } from '../../table-types';
+import { Checkbox } from '../../../../checkbox';
 
 import './body.scss';
-import { Column } from '../column/column.type';
-import { useFixedColumn } from '../use-table';
+import { Column } from '../column/column-types';
+import { useFixedColumn } from '../../composable/use-table';
 
 export default defineComponent({
   name: 'DTableBody',
   setup() {
     const table = inject(TABLE_TOKEN);
-    const {
-      _data: data,
-      _columns: columns,
-      _checkList: checkList,
-      isFixedLeft
-    } = table.store.states;
+    const { _data: data, _columns: columns, _checkList: checkList, isFixedLeft } = table.store.states;
 
     // 移动到行上是否高亮
     const hoverEnabled = computed(() => table.props.rowHoveredHighlight);
 
     // 行前的 checkbox
-    const tdAttrs = computed(() => isFixedLeft.value ? ({
-      class: 'devui-sticky-cell left',
-      style: 'left:0;'
-    }) : null);
-    const renderCheckbox = (index: number) => table.props.checkable ? (
-      <td {...tdAttrs.value}>
-        <Checkbox v-model={checkList.value[index]} />
-      </td>
-    ) : null;
+    const tdAttrs = computed(() =>
+      isFixedLeft.value
+        ? {
+            class: 'devui-sticky-cell left',
+            style: 'left:0;',
+          }
+        : null
+    );
+    const renderCheckbox = (index: number) =>
+      table.props.checkable ? (
+        <td {...tdAttrs.value}>
+          <Checkbox v-model={checkList.value[index]} />
+        </td>
+      ) : null;
 
     return () => (
-      <tbody class="devui-tbody">
+      <tbody class='devui-tbody'>
         {data.value.map((row, rowIndex) => {
           return (
             <tr key={rowIndex} class={{ 'hover-enabled': hoverEnabled.value }}>
@@ -45,21 +45,20 @@ export default defineComponent({
         })}
       </tbody>
     );
-  }
+  },
 });
 
-
 const TD = defineComponent({
   props: {
     column: {
-      type: Object as PropType<Column>
+      type: Object as PropType<Column>,
     },
     row: {
-      type: Object
+      type: Object,
     },
     index: {
       type: Number,
-    }
+    },
   },
   setup(props: { column: Column; row: any; index: number }) {
     const column = toRef(props, 'column');
@@ -72,5 +71,5 @@ const TD = defineComponent({
         {column.value.renderCell(props.row, props.index)}
       </td>
     );
-  }
+  },
 });

packages/devui-vue/devui/table/src/body/use-body.ts → packages/devui-vue/devui/table/src/components/body/use-body.ts

@@ -1,6 +1,6 @@
 import { computed, ComputedRef } from 'vue';
-import { Column } from '../column/column.type';
-import { TableBodyPropsTypes } from './body.type';
+import { Column } from '../column/column-types';
+import { TableBodyPropsTypes } from './body-types';
 
 interface Data {
   rowColumns: ComputedRef<(Record<string, any> & { columns: Column[] })[]>;

packages/devui-vue/devui/table/src/colgroup/colgroup.tsx → packages/devui-vue/devui/table/src/components/colgroup/colgroup.tsx

@@ -1,22 +1,20 @@
 import { inject, defineComponent } from 'vue';
-import { TABLE_TOKEN } from '../table.type';
+import { TABLE_TOKEN } from '../../table-types';
 
 export default defineComponent({
   name: 'DColGroup',
   setup() {
     const parent = inject(TABLE_TOKEN);
-    const columns = parent.store.states._columns;
-    return () => (
-      parent.props.tableLayout === 'fixed' ? (
+    const columns = parent?.store.states._columns;
+    return () =>
+      parent?.props.tableLayout === 'fixed' ? (
         <colgroup>
           {/* 如果是 checkable，那么需要指定 col */}
           {parent.props.checkable ? <col width={36} /> : null}
-          {columns.value.map((column, index) => {
+          {columns?.value.map((column, index) => {
             return <col key={index} width={column.realWidth}></col>;
           })}
         </colgroup>
-      ) : null
-
-    );
-  }
+      ) : null;
+  },
 });

packages/devui-vue/devui/table/src/column/column.type.ts → packages/devui-vue/devui/table/src/components/column/column-types.ts

@@ -1,5 +1,16 @@
 import { PropType, ExtractPropTypes, VNode, Slot } from 'vue';
 
+export type Formatter<T = any, R = any> = (row: T, cellValue: R, index: number) => VNode[];
+
+export type CompareFn<T = any> = (field: string, a: T, b: T) => boolean;
+
+export interface FilterConfig {
+  id: number | string;
+  name: string;
+  value: any;
+  checked?: boolean;
+}
+
 export const TableColumnProps = {
   header: {
     type: String,
@@ -22,27 +33,27 @@ export const TableColumnProps = {
   },
   order: {
     type: Number,
-    default: 0
+    default: 0,
   },
   sortable: {
     type: Boolean,
-    default: false
+    default: false,
   },
   compareFn: {
     type: Function as PropType<CompareFn>,
-    default: (field: string, a: any, b: any): boolean => a[field] < b[field]
+    default: (field: string, a: any, b: any): boolean => a[field] < b[field],
   },
   filterable: {
     type: Boolean,
-    default: false
+    default: false,
   },
   filterMultiple: {
     type: Boolean,
-    default: false
+    default: false,
   },
   filterList: {
     type: Array as PropType<FilterConfig[]>,
-    default: []
+    default: [],
   },
   fixedLeft: {
     type: String,
@@ -54,10 +65,6 @@ export const TableColumnProps = {
 
 export type TableColumnPropsTypes = ExtractPropTypes<typeof TableColumnProps>;
 
-export type Formatter<T = any, R = any> = (row: T, cellValue: R, index: number) => VNode[];
-
-export type CompareFn<T = any> = (field: string, a: T, b: T) => boolean;
-
 export type FilterResults = (string | number)[];
 
 export interface CustomFilterProps {
@@ -67,12 +74,6 @@ export interface CustomFilterProps {
 
 export type CustomFilterSlot = (props: CustomFilterProps) => VNode[];
 
-export interface FilterConfig {
-  id: number | string;
-  name: string;
-  value: any;
-  checked?: boolean;
-}
 export interface Column<T extends Record<string, unknown> = any> {
   field?: string;
   width?: number;

packages/devui-vue/devui/table/src/column/column.tsx → packages/devui-vue/devui/table/src/components/column/column.tsx

@@ -1,10 +1,6 @@
 import { inject, defineComponent, onBeforeUnmount, onMounted, toRefs, watch } from 'vue';
-import {
-  Column,
-  TableColumnProps,
-  TableColumnPropsTypes,
-} from './column.type';
-import { TABLE_TOKEN } from '../table.type';
+import { TableColumnProps, TableColumnPropsTypes } from './column-types';
+import { TABLE_TOKEN } from '../../table-types';
 import { createColumn } from './use-column';
 
 export default defineComponent({
@@ -21,14 +17,17 @@ export default defineComponent({
     const parent = inject(TABLE_TOKEN);
 
     onMounted(() => {
-      parent.store.insertColumn(column);
-      watch(() => column.order, () => {
-        parent.store.sortColumn();
-      });
+      parent?.store.insertColumn(column);
+      watch(
+        () => column.order,
+        () => {
+          parent?.store.sortColumn();
+        }
+      );
     });
 
     onBeforeUnmount(() => {
-      parent.store.removeColumn(column);
+      parent?.store.removeColumn(column);
     });
   },
   render() {

packages/devui-vue/devui/table/src/column/use-column.ts → packages/devui-vue/devui/table/src/components/column/use-column.ts

@@ -1,6 +1,6 @@
 import { watch, reactive, onBeforeMount, ToRefs, Slots, h } from 'vue';
-import { Column, TableColumnPropsTypes } from './column.type';
-import { formatWidth, formatMinWidth } from '../utils';
+import { Column, TableColumnPropsTypes } from './column-types';
+import { formatWidth, formatMinWidth } from '../../utils';
 
 function defaultRenderHeader(this: Column) {
   return h('span', { class: 'title' }, this.header);