@tmagic/table 1.2.0-beta.2 → 1.2.0-beta.3

package/src/Table.vue

@@ -1,8 +1,8 @@
 <template>
-  <el-table
+  <TMagicTable
     tooltip-effect="dark"
     class="m-table"
-    ref="table"
+    ref="tMagicTable"
     v-loading="loading"
     :data="tableData"
     :show-header="showHeader"
@@ -20,187 +20,151 @@
   >
     <template v-for="(item, columnIndex) in columns">
       <template v-if="item.type === 'expand'">
-        <expand-column :config="item" :key="columnIndex"></expand-column>
+        <ExpandColumn :config="item" :key="columnIndex"></ExpandColumn>
       </template>
 
       <template v-else-if="item.selection">
-        <el-table-column type="selection" :key="columnIndex" width="40" :selectable="item.selectable"></el-table-column>
+        <TMagicTableColumn
+          type="selection"
+          :key="columnIndex"
+          width="40"
+          :selectable="item.selectable"
+        ></TMagicTableColumn>
       </template>
 
       <template v-else-if="item.actions">
-        <actions-column
+        <ActionsColumn
           :columns="columns"
           :config="item"
           :rowkey-name="rowkeyName"
           :edit-state="editState"
           :key="columnIndex"
           @afterAction="$emit('afterAction')"
-        ></actions-column>
+        ></ActionsColumn>
       </template>
 
       <template v-else-if="item.type === 'popover'">
-        <popover-column :key="columnIndex" :config="item"></popover-column>
+        <PopoverColumn :key="columnIndex" :config="item"></PopoverColumn>
       </template>
 
       <template v-else>
-        <text-column :key="columnIndex" :config="item" :edit-state="editState"></text-column>
+        <TextColumn :key="columnIndex" :config="item" :edit-state="editState"></TextColumn>
       </template>
     </template>
-  </el-table>
+  </TMagicTable>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import { ElTable } from 'element-plus';
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
+import { TMagicTable, TMagicTableColumn } from '@tmagic/design';
+
 import ActionsColumn from './ActionsColumn.vue';
 import ExpandColumn from './ExpandColumn.vue';
 import PopoverColumn from './PopoverColumn.vue';
 import TextColumn from './TextColumn.vue';
 
-export default defineComponent({
-  name: 'm-table',
-
-  components: { ExpandColumn, ActionsColumn, PopoverColumn, TextColumn },
-
-  props: {
-    data: {
-      type: Array,
-      require: true,
-    },
+const props = withDefaults(
+  defineProps<{
+    data: any[];
+    columns?: any[];
+    /** 合并行或列的计算方法 */
+    spanMethod?: (data: { row: any; column: any; rowIndex: number; columnIndex: number }) => [number, number];
+    loading?: boolean;
+    /** Table 的最大高度。合法的值为数字或者单位为 px 的高度 */
+    bodyHeight?: string | number;
+    /** 是否显示表头 */
+    showHeader?: boolean;
+    /** 空数据时显示的文本内容 */
+    emptyText?: string;
+    /** 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 */
+    defaultExpandAll?: boolean;
+    rowkeyName?: string;
+    /** 是否带有纵向边框 */
+    border?: boolean;
+  }>(),
+  {
+    columns: () => [],
+    loading: false,
+    showHeader: true,
+    defaultExpandAll: false,
+    border: false,
+  },
+);
 
-    columns: {
-      type: Array as PropType<any[]>,
-      require: true,
-      default: () => [],
-    },
+const emit = defineEmits(['sort-change', 'afterAction', 'select', 'select-all', 'selection-change']);
 
-    /** 合并行或列的计算方法 */
-    spanMethod: {
-      type: Function as PropType<
-        (data: { row: any; column: any; rowIndex: number; columnIndex: number }) => [number, number]
-      >,
-    },
+const tMagicTable = ref<InstanceType<typeof TMagicTable>>();
 
-    loading: {
-      type: Boolean,
-      default: false,
-    },
+const editState = ref([]);
 
-    /** Table 的最大高度。合法的值为数字或者单位为 px 的高度 */
-    bodyHeight: {
-      type: [String, Number],
-    },
+const selectionColumn = computed(() => {
+  const column = props.columns.filter((item) => item.selection);
+  return column.length ? column[0] : null;
+});
 
-    /** 是否显示表头 */
-    showHeader: {
-      type: Boolean,
-      default: true,
-    },
+const tableData = computed(() => {
+  if (selectionColumn.value) {
+    return props.data || [];
+  }
 
-    /** 空数据时显示的文本内容 */
-    emptyText: {
-      type: String,
-    },
+  return cloneDeep(props.data) || [];
+});
 
-    /** 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 */
-    defaultExpandAll: {
-      type: Boolean,
-      default: false,
-    },
+const hasBorder = computed(() => (typeof props.border !== 'undefined' ? props.border : true));
 
-    rowkeyName: {
-      type: String,
-    },
+const sortChange = (data: any) => {
+  emit('sort-change', data);
+};
 
-    /** 是否带有纵向边框 */
-    border: {
-      type: Boolean,
-      default: false,
-    },
-  },
+const selectHandler = (selection: any, row: any) => {
+  const column = selectionColumn.value;
+  if (!column) {
+    return;
+  }
 
-  emits: ['sort-change', 'afterAction', 'select', 'select-all', 'selection-change'],
+  if (column.selection === 'single') {
+    // this.clearSelection()
+    // this.toggleRowSelection(row, true)
+  }
+  emit('select', selection, row);
+};
 
-  data(): {
-    editState: any[];
-  } {
-    return {
-      editState: [],
-    };
-  },
+const selectAllHandler = (selection: any) => {
+  emit('select-all', selection);
+};
 
-  computed: {
-    tableData() {
-      if (this.selectionColumn) {
-        return this.data || [];
-      }
+const selectionChangeHandler = (selection: any) => {
+  emit('selection-change', selection);
+};
 
-      return cloneDeep(this.data) || [];
-    },
+const toggleRowSelection = (row: any, selected: boolean) => {
+  tMagicTable.value?.toggleRowSelection(row, selected);
+};
 
-    selectionColumn() {
-      const column = this.columns.filter((item) => item.selection);
-      return column.length ? column[0] : null;
-    },
+const toggleRowExpansion = (row: any, expanded: boolean) => {
+  tMagicTable.value?.toggleRowExpansion(row, expanded);
+};
 
-    hasBorder() {
-      return typeof this.border !== 'undefined' ? this.border : true;
-    },
-  },
+const clearSelection = () => {
+  tMagicTable.value?.clearSelection();
+};
 
-  methods: {
-    sortChange(data: any) {
-      this.$emit('sort-change', data);
-    },
-
-    selectHandler(selection: any, row: any) {
-      const column = this.selectionColumn;
-      if (!column) {
-        return;
-      }
-
-      if (column.selection === 'single') {
-        // this.clearSelection()
-        // this.toggleRowSelection(row, true)
-      }
-      this.$emit('select', selection, row);
-    },
-
-    selectAllHandler(selection: any) {
-      this.$emit('select-all', selection);
-    },
-
-    selectionChangeHandler(selection: any) {
-      this.$emit('selection-change', selection);
-    },
-
-    toggleRowSelection(row: any, selected: boolean) {
-      const table = this.$refs.table as InstanceType<typeof ElTable>;
-      table.toggleRowSelection.bind(table)(row, selected);
-    },
-
-    toggleRowExpansion(row: any, expanded: boolean) {
-      const table = this.$refs.table as InstanceType<typeof ElTable>;
-      table.toggleRowExpansion.bind(table)(row, expanded);
-    },
-
-    clearSelection() {
-      const table = this.$refs.table as InstanceType<typeof ElTable>;
-      table.clearSelection.bind(table)();
-    },
-
-    objectSpanMethod(data: any) {
-      if (typeof this.spanMethod === 'function') {
-        return this.spanMethod(data);
-      }
-      return () => ({
-        rowspan: 0,
-        colspan: 0,
-      });
-    },
-  },
+const objectSpanMethod = (data: any) => {
+  if (typeof props.spanMethod === 'function') {
+    return props.spanMethod(data);
+  }
+  return () => ({
+    rowspan: 0,
+    colspan: 0,
+  });
+};
+
+defineExpose({
+  toggleRowSelection,
+  toggleRowExpansion,
+  clearSelection,
 });
 </script>
 

package/src/TextColumn.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-table-column
+  <TMagicTableColumn
     show-overflow-tooltip
     :label="config.label"
     :width="config.width"
@@ -8,7 +8,7 @@
     :prop="config.prop"
   >
     <template v-slot="scope">
-      <el-form v-if="config.type && editState[scope.$index]" label-width="0" :model="editState[scope.$index]">
+      <TMagicForm v-if="config.type && editState[scope.$index]" label-width="0" :model="editState[scope.$index]">
         <m-form-container
           :prop="config.prop"
           :rules="config.rules"
@@ -16,62 +16,61 @@
           :name="config.prop"
           :model="editState[scope.$index]"
         ></m-form-container>
-      </el-form>
+      </TMagicForm>
 
-      <el-button v-else-if="config.action === 'actionLink'" text type="primary" @click="config.handler(scope.row)">
+      <TMagicButton
+        v-else-if="config.action === 'actionLink' && config.prop"
+        text
+        type="primary"
+        @click="config.handler?.(scope.row)"
+      >
         {{ formatter(config, scope.row) }}
-      </el-button>
+      </TMagicButton>
 
-      <a v-else-if="config.action === 'img'" target="_blank" :href="scope.row[config.prop]"
+      <a v-else-if="config.action === 'img' && config.prop" target="_blank" :href="scope.row[config.prop]"
         ><img :src="scope.row[config.prop]" height="50"
       /></a>
 
-      <a v-else-if="config.action === 'link'" target="_blank" :href="scope.row[config.prop]" class="keep-all">{{
-        scope.row[config.prop]
-      }}</a>
+      <a
+        v-else-if="config.action === 'link' && config.prop"
+        target="_blank"
+        :href="scope.row[config.prop]"
+        class="keep-all"
+        >{{ scope.row[config.prop] }}</a
+      >
 
       <el-tooltip v-else-if="config.action === 'tip'" placement="left">
         <template #content>
           <div>{{ formatter(config, scope.row) }}</div>
         </template>
-        <el-button text type="primary">扩展配置</el-button>
+        <TMagicButton text type="primary">扩展配置</TMagicButton>
       </el-tooltip>
 
-      <el-tag
-        v-else-if="config.action === 'tag'"
+      <TMagicTag
+        v-else-if="config.action === 'tag' && config.prop"
         :type="typeof config.type === 'function' ? config.type(scope.row[config.prop], scope.row) : config.type"
         close-transition
-        >{{ formatter(config, scope.row) }}</el-tag
+        >{{ formatter(config, scope.row) }}</TMagicTag
       >
       <div v-else v-html="formatter(config, scope.row)"></div>
     </template>
-  </el-table-column>
+  </TMagicTableColumn>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
+<script lang="ts" setup>
+import { TMagicButton, TMagicForm, TMagicTableColumn, TMagicTag } from '@tmagic/design';
 
 import { ColumnConfig } from './schema';
 import { formatter } from './utils';
 
-export default defineComponent({
-  props: {
-    config: {
-      type: Object as PropType<ColumnConfig>,
-      default: () => ({}),
-      required: true,
-    },
-
-    editState: {
-      type: Object,
-      default: () => {},
-    },
-  },
-
-  setup() {
-    return {
-      formatter,
-    };
+withDefaults(
+  defineProps<{
+    config: ColumnConfig;
+    editState?: any;
+  }>(),
+  {
+    config: () => ({}),
+    editState: () => ({}),
   },
-});
+);
 </script>

package/src/index.ts

@@ -22,12 +22,8 @@ import Table from './Table.vue';
 
 export { default as MagicTable } from './Table.vue';
 
-const components = [Table];
-
 export default {
   install(app: App) {
-    components.forEach((component) => {
-      app.component(component.name, component);
-    });
+    app.component('m-table', Table);
   },
 };

package/src/schema.ts

@@ -35,23 +35,23 @@ export type ColumnConfig = {
   values?: FormValue;
   selection?: boolean | 'single';
   selectable?: (row: any, index: number) => boolean;
-  label: string;
+  label?: string;
   fixed?: 'left' | 'right' | boolean;
   width?: number | string;
   actions?: ColumnActionConfig[];
-  type: 'popover' | 'expand' | string | ((value: any, row: any) => string);
-  text: string;
-  prop: string;
-  showHeader: boolean;
+  type?: 'popover' | 'expand' | string | ((value: any, row: any) => string);
+  text?: string;
+  prop?: string;
+  showHeader?: boolean;
   table?: ColumnConfig[];
   formatter?: 'datetime' | ((item: any, row: Record<string, any>) => any);
-  popover: {
-    placement: '';
-    width: '';
-    trigger: '';
-    tableEmbed: '';
+  popover?: {
+    placement: string;
+    width: string;
+    trigger: string;
+    tableEmbed: string;
   };
   sortable?: boolean | 'custom';
   action?: 'tip' | 'actionLink' | 'img' | 'link' | 'tag';
-  handler: (row: any) => void;
+  handler?: (row: any) => void;
 };

package/src/utils.ts

@@ -21,6 +21,8 @@ import { datetimeFormatter } from '@tmagic/utils';
 import { ColumnConfig } from './schema';
 
 export const formatter = (item: ColumnConfig, row: any) => {
+  if (!item.prop) return '';
+
   if (item.formatter) {
     if (item.formatter === 'datetime') {
       // eslint-disable-next-line no-param-reassign

package/types/ActionsColumn.vue.d.ts

@@ -1,4 +1,3 @@
-import { PropType } from 'vue';
 import { ColumnConfig } from './schema';
 declare const _default: {
     new (...args: any[]): {
@@ -8,27 +7,18 @@ declare const _default: {
             columns: any[];
             config: ColumnConfig;
             rowkeyName: string;
-            editState: Record<string, any>;
-        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
-            columns: {
-                type: PropType<any[]>;
-                require: boolean;
-                default: () => never[];
-            };
-            config: {
-                type: PropType<ColumnConfig>;
-                require: boolean;
-                default: () => void;
-            };
-            rowkeyName: {
-                type: StringConstructor;
-                default: string;
-            };
-            editState: {
-                type: ObjectConstructor;
-                default: () => void;
-            };
-        }>> & {
+            editState: any;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+            columns: any[];
+            config: ColumnConfig;
+            rowkeyName?: string | undefined;
+            editState?: any;
+        }>, {
+            columns: () => never[];
+            config: () => {};
+            rowkeyName: string;
+            editState: () => never[];
+        }>>> & {
             onAfterAction?: ((...args: any[]) => any) | undefined;
         } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "columns" | "config" | "rowkeyName" | "editState">;
         $attrs: {
@@ -44,32 +34,23 @@ declare const _default: {
         $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
         $emit: (event: "afterAction", ...args: any[]) => void;
         $el: any;
-        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-            columns: {
-                type: PropType<any[]>;
-                require: boolean;
-                default: () => never[];
-            };
-            config: {
-                type: PropType<ColumnConfig>;
-                require: boolean;
-                default: () => void;
-            };
-            rowkeyName: {
-                type: StringConstructor;
-                default: string;
-            };
-            editState: {
-                type: ObjectConstructor;
-                default: () => void;
-            };
-        }>> & {
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+            columns: any[];
+            config: ColumnConfig;
+            rowkeyName?: string | undefined;
+            editState?: any;
+        }>, {
+            columns: () => never[];
+            config: () => {};
+            rowkeyName: string;
+            editState: () => never[];
+        }>>> & {
             onAfterAction?: ((...args: any[]) => any) | undefined;
         }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "afterAction"[], string, {
             columns: any[];
             config: ColumnConfig;
             rowkeyName: string;
-            editState: Record<string, any>;
+            editState: any;
         }> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -90,58 +71,54 @@ declare const _default: {
         $forceUpdate: () => void;
         $nextTick: typeof import("vue").nextTick;
         $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
-    } & Readonly<import("vue").ExtractPropTypes<{
-        columns: {
-            type: PropType<any[]>;
-            require: boolean;
-            default: () => never[];
-        };
-        config: {
-            type: PropType<ColumnConfig>;
-            require: boolean;
-            default: () => void;
-        };
-        rowkeyName: {
-            type: StringConstructor;
-            default: string;
-        };
-        editState: {
-            type: ObjectConstructor;
-            default: () => void;
-        };
-    }>> & {
+    } & Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+        columns: any[];
+        config: ColumnConfig;
+        rowkeyName?: string | undefined;
+        editState?: any;
+    }>, {
+        columns: () => never[];
+        config: () => {};
+        rowkeyName: string;
+        editState: () => never[];
+    }>>> & {
         onAfterAction?: ((...args: any[]) => any) | undefined;
     } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
     __isFragment?: undefined;
     __isTeleport?: undefined;
     __isSuspense?: undefined;
-} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-    columns: {
-        type: PropType<any[]>;
-        require: boolean;
-        default: () => never[];
-    };
-    config: {
-        type: PropType<ColumnConfig>;
-        require: boolean;
-        default: () => void;
-    };
-    rowkeyName: {
-        type: StringConstructor;
-        default: string;
-    };
-    editState: {
-        type: ObjectConstructor;
-        default: () => void;
-    };
-}>> & {
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    columns: any[];
+    config: ColumnConfig;
+    rowkeyName?: string | undefined;
+    editState?: any;
+}>, {
+    columns: () => never[];
+    config: () => {};
+    rowkeyName: string;
+    editState: () => never[];
+}>>> & {
     onAfterAction?: ((...args: any[]) => any) | undefined;
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "afterAction"[], "afterAction", {
     columns: any[];
     config: ColumnConfig;
     rowkeyName: string;
-    editState: Record<string, any>;
+    editState: any;
 }> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {};
 });
 export default _default;
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};