@tmagic/table 1.3.0-alpha.2 → 1.3.0-alpha.21

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.2",
+  "version": "1.3.0-alpha.21",
   "name": "@tmagic/table",
   "type": "module",
   "sideEffects": [
@@ -33,28 +33,27 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/design": "1.3.0-alpha.2",
-    "@tmagic/form": "1.3.0-alpha.2",
-    "@tmagic/utils": "1.3.0-alpha.2",
+    "@tmagic/design": "1.3.0-alpha.21",
+    "@tmagic/form": "1.3.0-alpha.21",
+    "@tmagic/utils": "1.3.0-alpha.21",
     "lodash-es": "^4.17.21",
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "@tmagic/form": "1.3.0-alpha.2",
-    "vue": "^3.2.37"
+    "@tmagic/form": "1.3.0-alpha.21",
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@types/color": "^3.0.1",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.4",
-    "@vitejs/plugin-vue": "^4.1.0",
-    "@vue/compiler-sfc": "^3.2.37",
-    "@vue/test-utils": "^2.0.0",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/test-utils": "^2.3.2",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "typescript": "^5.0.4",
-    "vite": "^4.2.1",
-    "vite-plugin-vue-setup-extend": "^0.4.0",
-    "vue-tsc": "^1.2.0"
+    "vite": "^4.4.4",
+    "vue-tsc": "^1.6.5"
   }
 }

package/src/ActionsColumn.vue

@@ -1,18 +1,24 @@
 <template>
   <TMagicTableColumn :label="config.label" :width="config.width" :fixed="config.fixed">
     <template v-slot="scope">
-      <TMagicButton
+      <TMagicTooltip
         v-for="(action, actionIndex) in config.actions"
-        v-show="display(action.display, scope.row) && !editState[scope.$index]"
-        class="action-btn"
-        text
-        :type="action.buttonType || 'primary'"
-        size="small"
-        :icon="action.icon"
+        :placement="action.tooltipPlacement || 'top'"
         :key="actionIndex"
-        @click="actionHandler(action, scope.row, scope.$index)"
-        ><span v-html="formatter(action.text, scope.row)"></span
-      ></TMagicButton>
+        :disabled="!Boolean(action.tooltip)"
+        :content="action.tooltip"
+      >
+        <TMagicButton
+          v-show="display(action.display, scope.row) && !editState[scope.$index]"
+          class="action-btn"
+          text
+          size="small"
+          :type="action.buttonType || 'primary'"
+          :icon="action.icon"
+          @click="actionHandler(action, scope.row, scope.$index)"
+          ><span v-html="formatter(action.text, scope.row)"></span
+        ></TMagicButton>
+      </TMagicTooltip>
       <TMagicButton
         class="action-btn"
         v-show="editState[scope.$index]"
@@ -35,11 +41,15 @@
   </TMagicTableColumn>
 </template>
 
-<script lang="ts" setup name="MTableActionsColumn">
-import { TMagicButton, tMagicMessage, TMagicTableColumn } from '@tmagic/design';
+<script lang="ts" setup>
+import { TMagicButton, tMagicMessage, TMagicTableColumn, TMagicTooltip } from '@tmagic/design';
 
 import { ColumnActionConfig, ColumnConfig } from './schema';
 
+defineOptions({
+  name: 'MTableActionsColumn',
+});
+
 const props = withDefaults(
   defineProps<{
     columns: any[];

package/src/ComponentColumn.vue

@@ -0,0 +1,40 @@
+<template>
+  <TMagicTableColumn
+    show-overflow-tooltip
+    :label="config.label"
+    :width="config.width"
+    :fixed="config.fixed"
+    :sortable="config.sortable"
+    :prop="config.prop"
+  >
+    <template v-slot="scope">
+      <component :is="config.component" v-bind="componentProps(scope.row)"></component>
+    </template>
+  </TMagicTableColumn>
+</template>
+
+<script lang="ts" setup>
+import { TMagicTableColumn } from '@tmagic/design';
+
+import { ColumnConfig } from './schema';
+
+defineOptions({
+  name: 'MTableColumn',
+});
+
+const props = withDefaults(
+  defineProps<{
+    config: ColumnConfig;
+  }>(),
+  {
+    config: () => ({}),
+  },
+);
+
+const componentProps = (row: any) => {
+  if (typeof props.config.props === 'function') {
+    return props.config.props(row) || {};
+  }
+  return props.config.props || {};
+};
+</script>

package/src/ExpandColumn.vue

@@ -18,13 +18,17 @@
   </TMagicTableColumn>
 </template>
 
-<script lang="ts" setup name="MTableExpandColumn">
+<script lang="ts" setup>
 import { TMagicTableColumn } from '@tmagic/design';
 import { MForm } from '@tmagic/form';
 
 import { ColumnConfig } from './schema';
 import MTable from './Table.vue';
 
+defineOptions({
+  name: 'MTableExpandColumn',
+});
+
 const props = withDefaults(
   defineProps<{
     config: ColumnConfig;

package/src/PopoverColumn.vue

@@ -21,13 +21,17 @@
   </TMagicTableColumn>
 </template>
 
-<script lang="ts" setup name="MTablePopoverColumn">
+<script lang="ts" setup>
 import { TMagicButton, TMagicPopover, TMagicTableColumn } from '@tmagic/design';
 
 import { ColumnConfig } from './schema';
 import MTable from './Table.vue';
 import { formatter } from './utils';
 
+defineOptions({
+  name: 'MTablePopoverColumn',
+});
+
 withDefaults(
   defineProps<{
     config: ColumnConfig;

package/src/Table.vue

@@ -25,11 +25,15 @@
         <ExpandColumn :config="item" :key="columnIndex"></ExpandColumn>
       </template>
 
+      <template v-else-if="item.type === 'component'">
+        <ComponentColumn :config="item" :key="columnIndex"></ComponentColumn>
+      </template>
+
       <template v-else-if="item.selection">
         <component
           width="40"
           type="selection"
-          :is="tableColumnComponent.component"
+          :is="tableColumnComponent?.component || 'el-table-column'"
           :key="columnIndex"
           :selectable="item.selectable"
         ></component>
@@ -57,17 +61,22 @@
   </TMagicTable>
 </template>
 
-<script lang="ts" setup name="MTable">
+<script lang="ts" setup>
 import { computed, ref } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import { getConfig, TMagicTable } from '@tmagic/design';
 
 import ActionsColumn from './ActionsColumn.vue';
+import ComponentColumn from './ComponentColumn.vue';
 import ExpandColumn from './ExpandColumn.vue';
 import PopoverColumn from './PopoverColumn.vue';
 import TextColumn from './TextColumn.vue';
 
+defineOptions({
+  name: 'MTable',
+});
+
 const props = withDefaults(
   defineProps<{
     data: any[];
@@ -110,7 +119,7 @@ const tMagicTable = ref<InstanceType<typeof TMagicTable>>();
 
 const editState = ref([]);
 
-const tableColumnComponent = getConfig('components').tableColumn;
+const tableColumnComponent = getConfig('components')?.tableColumn;
 const selectionColumn = computed(() => {
   const column = props.columns.filter((item) => item.selection);
   return column.length ? column[0] : null;

package/src/TextColumn.vue

@@ -43,7 +43,7 @@
         <template #content>
           <div>{{ formatter(config, scope.row) }}</div>
         </template>
-        <TMagicButton text type="primary">扩展配置</TMagicButton>
+        <TMagicButton text type="primary">{{ config.buttonText || '扩展配置' }}</TMagicButton>
       </el-tooltip>
 
       <TMagicTag
@@ -57,12 +57,16 @@
   </TMagicTableColumn>
 </template>
 
-<script lang="ts" setup name="MTableColumn">
+<script lang="ts" setup>
 import { TMagicButton, TMagicForm, TMagicTableColumn, TMagicTag } from '@tmagic/design';
 
 import { ColumnConfig } from './schema';
 import { formatter } from './utils';
 
+defineOptions({
+  name: 'MTableColumn',
+});
+
 withDefaults(
   defineProps<{
     config: ColumnConfig;

package/src/schema.ts

@@ -24,6 +24,8 @@ export interface ColumnActionConfig {
   display?: (row: any) => boolean;
   text: string | ((row: any) => string);
   name: string;
+  tooltip?: string;
+  tooltipPlacement?: string;
   icon?: any;
   handler?: (row: any, index: number) => Promise<any> | any;
   before?: (row: any, index: number) => void;
@@ -41,7 +43,7 @@ export type ColumnConfig = {
   fixed?: 'left' | 'right' | boolean;
   width?: number | string;
   actions?: ColumnActionConfig[];
-  type?: 'popover' | 'expand' | string | ((value: any, row: any) => string);
+  type?: 'popover' | 'expand' | 'component' | string | ((value: any, row: any) => string);
   text?: string;
   prop?: string;
   showHeader?: boolean;
@@ -58,8 +60,10 @@ export type ColumnConfig = {
   handler?: (row: any) => void;
   /** 当type为expand时有效，展开为html */
   expandContent?: (row: any, prop?: string) => string;
-  /** 当type为expand时有效，展开为vue组件 */
+  /** 当type为expand时，展开为vue组件；当type为component时显示的组件 */
   component?: any;
   /** 当type为expand时有效，展开的vue组件props */
   props?: any;
+  /** 当type为tip时有效，显示文案 */
+  buttonText?: string;
 };

package/types/ActionsColumn.vue.d.ts

@@ -26,7 +26,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     config: ColumnConfig;
     rowkeyName: string;
     editState: any;
-}>;
+}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
@@ -38,7 +38,10 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
         default: D[K];
-    } : P[K];
+    }> : P[K];
 };
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/types/ComponentColumn.vue.d.ts

@@ -0,0 +1,30 @@
+import { ColumnConfig } from './schema';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    config: ColumnConfig;
+}>, {
+    config: () => {};
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    config: ColumnConfig;
+}>, {
+    config: () => {};
+}>>>, {
+    config: ColumnConfig;
+}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+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;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/types/ExpandColumn.vue.d.ts

@@ -3,13 +3,13 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     config: ColumnConfig;
 }>, {
     config: () => {};
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     config: ColumnConfig;
 }>, {
     config: () => {};
 }>>>, {
     config: ColumnConfig;
-}>;
+}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
@@ -21,7 +21,10 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
         default: D[K];
-    } : P[K];
+    }> : P[K];
 };
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/types/PopoverColumn.vue.d.ts

@@ -3,13 +3,13 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     config: ColumnConfig;
 }>, {
     config: () => {};
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     config: ColumnConfig;
 }>, {
     config: () => {};
 }>>>, {
     config: ColumnConfig;
-}>;
+}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
@@ -21,7 +21,10 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
         default: D[K];
-    } : P[K];
+    }> : P[K];
 };
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/types/Table.vue.d.ts

@@ -72,7 +72,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     showHeader: boolean;
     defaultExpandAll: boolean;
     border: boolean;
-}>;
+}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
@@ -84,7 +84,10 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
         default: D[K];
-    } : P[K];
+    }> : P[K];
 };
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/types/TextColumn.vue.d.ts

@@ -5,7 +5,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }>, {
     config: () => {};
     editState: () => {};
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     config: ColumnConfig;
     editState?: any;
 }>, {
@@ -14,7 +14,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }>>>, {
     config: ColumnConfig;
     editState: any;
-}>;
+}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
@@ -26,7 +26,10 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
         default: D[K];
-    } : P[K];
+    }> : P[K];
 };
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/types/schema.d.ts

@@ -5,6 +5,8 @@ export interface ColumnActionConfig {
     display?: (row: any) => boolean;
     text: string | ((row: any) => string);
     name: string;
+    tooltip?: string;
+    tooltipPlacement?: string;
     icon?: any;
     handler?: (row: any, index: number) => Promise<any> | any;
     before?: (row: any, index: number) => void;
@@ -23,7 +25,7 @@ export type ColumnConfig = {
     fixed?: 'left' | 'right' | boolean;
     width?: number | string;
     actions?: ColumnActionConfig[];
-    type?: 'popover' | 'expand' | string | ((value: any, row: any) => string);
+    type?: 'popover' | 'expand' | 'component' | string | ((value: any, row: any) => string);
     text?: string;
     prop?: string;
     showHeader?: boolean;
@@ -40,8 +42,10 @@ export type ColumnConfig = {
     handler?: (row: any) => void;
     /** 当type为expand时有效，展开为html */
     expandContent?: (row: any, prop?: string) => string;
-    /** 当type为expand时有效，展开为vue组件 */
+    /** 当type为expand时，展开为vue组件；当type为component时显示的组件 */
     component?: any;
     /** 当type为expand时有效，展开的vue组件props */
     props?: any;
+    /** 当type为tip时有效，显示文案 */
+    buttonText?: string;
 };