@tmagic/table 1.5.0-beta.0 → 1.5.0-beta.10

package/dist/tmagic-table.js

@@ -1,8 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, withCtx, createElementBlock, Fragment, renderList, withDirectives, createVNode, createElementVNode, vShow, createTextVNode, resolveDynamicComponent, mergeProps, toHandlers, createCommentVNode, normalizeProps, toDisplayString, resolveComponent, ref, computed, resolveDirective } from 'vue';
 import { cloneDeep } from 'lodash-es';
-import { TMagicTableColumn, TMagicTooltip, TMagicButton, tMagicMessage, TMagicPopover, TMagicForm, TMagicTag, getConfig, TMagicTable } from '@tmagic/design';
-import { MForm } from '@tmagic/form';
-import { datetimeFormatter } from '@tmagic/utils';
+import { TMagicTableColumn, TMagicTooltip, TMagicButton, tMagicMessage, TMagicPopover, TMagicForm, TMagicTag, getDesignConfig, TMagicTable } from '@tmagic/design';
+import { MForm, datetimeFormatter } from '@tmagic/form';
 
 const _hoisted_1$2 = ["innerHTML"];
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
@@ -108,9 +107,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             size: "small",
             onClick: ($event) => save(scope.$index, _ctx.config)
           }, {
-            default: withCtx(() => [
+            default: withCtx(() => _cache[0] || (_cache[0] = [
               createTextVNode("保存")
-            ]),
+            ])),
             _: 2
           }, 1032, ["onClick"]), [
             [vShow, _ctx.editState[scope.$index]]
@@ -122,9 +121,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             size: "small",
             onClick: ($event) => _ctx.editState[scope.$index] = void 0
           }, {
-            default: withCtx(() => [
+            default: withCtx(() => _cache[1] || (_cache[1] = [
               createTextVNode("取消")
-            ]),
+            ])),
             _: 2
           }, 1032, ["onClick"]), [
             [vShow, _ctx.editState[scope.$index]]
@@ -194,7 +193,11 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       return props.config.props || {};
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(TMagicTableColumn), { type: "expand" }, {
+      return openBlock(), createBlock(unref(TMagicTableColumn), {
+        type: "expand",
+        width: _ctx.config.width,
+        fixed: _ctx.config.fixed
+      }, {
         default: withCtx((scope) => [
           _ctx.config.table ? (openBlock(), createBlock(_sfc_main, {
             key: 0,
@@ -214,7 +217,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           _ctx.config.component ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.config.component), normalizeProps(mergeProps({ key: 3 }, componentProps(scope.row))), null, 16)) : createCommentVNode("", true)
         ]),
         _: 1
-      });
+      }, 8, ["width", "fixed"]);
     };
   }
 });
@@ -234,6 +237,7 @@ const formatter = (item, row) => {
     return row[item.prop];
   }
 };
+const createColumns = (columns) => columns;
 
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   ...{
@@ -255,7 +259,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             key: 0,
             placement: _ctx.config.popover.placement,
             width: _ctx.config.popover.width,
-            trigger: _ctx.config.popover.trigger
+            trigger: _ctx.config.popover.trigger,
+            "destroy-on-close": _ctx.config.popover.destroyOnClose ?? true
           }, {
             reference: withCtx(() => [
               createVNode(unref(TMagicButton), {
@@ -277,7 +282,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               }, null, 8, ["show-header", "columns", "data"])) : createCommentVNode("", true)
             ]),
             _: 2
-          }, 1032, ["placement", "width", "trigger"])) : createCommentVNode("", true)
+          }, 1032, ["placement", "width", "trigger", "destroy-on-close"])) : createCommentVNode("", true)
         ]),
         _: 1
       }, 8, ["label", "width", "fixed"]);
@@ -423,7 +428,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const tMagicTable = ref();
     const editState = ref([]);
-    const tableColumnComponent = getConfig("components")?.tableColumn;
+    const tableColumnComponent = getDesignConfig("components")?.tableColumn;
     const selectionColumn = computed(() => {
       const column = props.columns.filter((item) => item.selection);
       return column.length ? column[0] : null;
@@ -551,4 +556,4 @@ const index = {
   }
 };
 
-export { _sfc_main as MagicTable, index as default, formatter };
+export { _sfc_main as MagicTable, createColumns, index as default, formatter };

package/dist/tmagic-table.umd.cjs

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('lodash-es'), require('@tmagic/design'), require('@tmagic/form'), require('@tmagic/utils')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'lodash-es', '@tmagic/design', '@tmagic/form', '@tmagic/utils'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicTable = {}, global.Vue, global.lodashEs, global.design, global.form, global.utils));
-})(this, (function (exports, vue, lodashEs, design, form, utils) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('lodash-es'), require('@tmagic/design'), require('@tmagic/form')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'lodash-es', '@tmagic/design', '@tmagic/form'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicTable = {}, global.Vue, global.lodashEs, global.design, global.form));
+})(this, (function (exports, vue, lodashEs, design, form) { 'use strict';
 
   const _hoisted_1$2 = ["innerHTML"];
   const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
@@ -108,9 +108,9 @@
               size: "small",
               onClick: ($event) => save(scope.$index, _ctx.config)
             }, {
-              default: vue.withCtx(() => [
+              default: vue.withCtx(() => _cache[0] || (_cache[0] = [
                 vue.createTextVNode("保存")
-              ]),
+              ])),
               _: 2
             }, 1032, ["onClick"]), [
               [vue.vShow, _ctx.editState[scope.$index]]
@@ -122,9 +122,9 @@
               size: "small",
               onClick: ($event) => _ctx.editState[scope.$index] = void 0
             }, {
-              default: vue.withCtx(() => [
+              default: vue.withCtx(() => _cache[1] || (_cache[1] = [
                 vue.createTextVNode("取消")
-              ]),
+              ])),
               _: 2
             }, 1032, ["onClick"]), [
               [vue.vShow, _ctx.editState[scope.$index]]
@@ -194,7 +194,11 @@
         return props.config.props || {};
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), { type: "expand" }, {
+        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
+          type: "expand",
+          width: _ctx.config.width,
+          fixed: _ctx.config.fixed
+        }, {
           default: vue.withCtx((scope) => [
             _ctx.config.table ? (vue.openBlock(), vue.createBlock(_sfc_main, {
               key: 0,
@@ -214,7 +218,7 @@
             _ctx.config.component ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.component), vue.normalizeProps(vue.mergeProps({ key: 3 }, componentProps(scope.row))), null, 16)) : vue.createCommentVNode("", true)
           ]),
           _: 1
-        });
+        }, 8, ["width", "fixed"]);
       };
     }
   });
@@ -223,7 +227,7 @@
     if (!item.prop) return "";
     if (item.formatter) {
       if (item.formatter === "datetime") {
-        item.formatter = (value) => utils.datetimeFormatter(value);
+        item.formatter = (value) => form.datetimeFormatter(value);
       }
       try {
         return item.formatter(row[item.prop], row);
@@ -234,6 +238,7 @@
       return row[item.prop];
     }
   };
+  const createColumns = (columns) => columns;
 
   const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -255,7 +260,8 @@
               key: 0,
               placement: _ctx.config.popover.placement,
               width: _ctx.config.popover.width,
-              trigger: _ctx.config.popover.trigger
+              trigger: _ctx.config.popover.trigger,
+              "destroy-on-close": _ctx.config.popover.destroyOnClose ?? true
             }, {
               reference: vue.withCtx(() => [
                 vue.createVNode(vue.unref(design.TMagicButton), {
@@ -277,7 +283,7 @@
                 }, null, 8, ["show-header", "columns", "data"])) : vue.createCommentVNode("", true)
               ]),
               _: 2
-            }, 1032, ["placement", "width", "trigger"])) : vue.createCommentVNode("", true)
+            }, 1032, ["placement", "width", "trigger", "destroy-on-close"])) : vue.createCommentVNode("", true)
           ]),
           _: 1
         }, 8, ["label", "width", "fixed"]);
@@ -423,7 +429,7 @@
       const emit = __emit;
       const tMagicTable = vue.ref();
       const editState = vue.ref([]);
-      const tableColumnComponent = design.getConfig("components")?.tableColumn;
+      const tableColumnComponent = design.getDesignConfig("components")?.tableColumn;
       const selectionColumn = vue.computed(() => {
         const column = props.columns.filter((item) => item.selection);
         return column.length ? column[0] : null;
@@ -552,6 +558,7 @@
   };
 
   exports.MagicTable = _sfc_main;
+  exports.createColumns = createColumns;
   exports.default = index;
   exports.formatter = formatter;
 

package/package.json

@@ -1,7 +1,11 @@
 {
-  "version": "1.5.0-beta.0",
+  "version": "1.5.0-beta.10",
   "name": "@tmagic/table",
   "type": "module",
+  "sideEffects": [
+    "dist/style.css",
+    "src/theme/*"
+  ],
   "main": "dist/tmagic-table.umd.cjs",
   "module": "dist/tmagic-table.js",
   "types": "types/index.d.ts",
@@ -36,19 +40,18 @@
   "devDependencies": {
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^18.19.0",
-    "@vitejs/plugin-vue": "^5.1.1",
-    "@vue/compiler-sfc": "^3.4.27",
+    "@vitejs/plugin-vue": "^5.1.3",
+    "@vue/compiler-sfc": "^3.5.0",
     "@vue/test-utils": "^2.4.6",
     "rimraf": "^3.0.2",
-    "sass": "^1.77.0",
-    "vite": "^5.3.5"
+    "sass": "^1.78.0",
+    "vite": "^5.4.3"
   },
   "peerDependencies": {
-    "vue": "^3.4.35",
+    "vue": "^3.5.0",
     "typescript": "*",
-    "@tmagic/design": "1.5.0-beta.0",
-    "@tmagic/utils": "1.5.0-beta.0",
-    "@tmagic/form": "1.5.0-beta.0"
+    "@tmagic/design": "1.5.0-beta.10",
+    "@tmagic/form": "1.5.0-beta.10"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/ExpandColumn.vue

@@ -1,5 +1,5 @@
 <template>
-  <TMagicTableColumn type="expand">
+  <TMagicTableColumn type="expand" :width="config.width" :fixed="config.fixed">
     <template #default="scope">
       <MTable
         v-if="config.table"

package/src/PopoverColumn.vue

@@ -6,6 +6,7 @@
         :placement="config.popover.placement"
         :width="config.popover.width"
         :trigger="config.popover.trigger"
+        :destroy-on-close="config.popover.destroyOnClose ?? true"
       >
         <MTable
           v-if="config.popover.tableEmbed"

package/src/Table.vue

@@ -66,7 +66,7 @@
 import { computed, ref } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
-import { getConfig, TMagicTable } from '@tmagic/design';
+import { getDesignConfig, TMagicTable } from '@tmagic/design';
 
 import ActionsColumn from './ActionsColumn.vue';
 import ComponentColumn from './ComponentColumn.vue';
@@ -121,7 +121,7 @@ const tMagicTable = ref<InstanceType<typeof TMagicTable>>();
 
 const editState = ref([]);
 
-const tableColumnComponent = getConfig('components')?.tableColumn;
+const tableColumnComponent = getDesignConfig('components')?.tableColumn;
 const selectionColumn = computed(() => {
   const column = props.columns.filter((item) => item.selection);
   return column.length ? column[0] : null;
@@ -198,21 +198,3 @@ defineExpose({
   clearSelection,
 });
 </script>
-
-<style lang="scss">
-.m-table {
-  .el-button.action-btn + .el-button.action-btn {
-    margin-left: 0;
-  }
-  .keep-all {
-    word-break: keep-all;
-  }
-  .el-table .cell > div {
-    display: inline-block;
-    vertical-align: middle;
-  }
-  .el-table__row.el-table__row--level-1 {
-    color: #999;
-  }
-}
-</style>

package/src/index.ts

@@ -20,6 +20,8 @@ import { App } from 'vue';
 
 import Table from './Table.vue';
 
+import './theme/index.scss';
+
 export { default as MagicTable } from './Table.vue';
 export * from './schema';
 export * from './utils';

package/src/schema.ts

@@ -19,7 +19,7 @@
 import { FormConfig, FormValue } from '@tmagic/form';
 
 export interface ColumnActionConfig {
-  type?: 'delete' | 'copy' | 'edit';
+  type?: 'delete' | 'copy' | 'edit' | string;
   buttonType?: string;
   display?: (row: any) => boolean;
   text?: string | ((row: any) => string);
@@ -46,11 +46,12 @@ export interface ColumnConfig<T = any> {
   type?: 'popover' | 'expand' | 'component' | string | ((value: any, row: T) => string);
   text?: string;
   prop?: string;
+  name?: string;
   showHeader?: boolean;
   table?: ColumnConfig[];
   formatter?: 'datetime' | ((item: any, row: T) => any);
   popover?: {
-    placement:
+    placement?:
       | 'auto'
       | 'auto-start'
       | 'auto-end'
@@ -66,9 +67,10 @@ export interface ColumnConfig<T = any> {
       | 'right-end'
       | 'left-start'
       | 'left-end';
-    width: string | number;
-    trigger: 'hover' | 'click';
-    tableEmbed: boolean;
+    width?: string | number;
+    trigger?: 'hover' | 'click';
+    tableEmbed?: boolean;
+    destroyOnClose?: boolean;
   };
   sortable?: boolean | 'custom';
   action?: 'tip' | 'actionLink' | 'img' | 'link' | 'tag';

package/src/theme/index.scss

@@ -0,0 +1,15 @@
+.m-table {
+  .el-button.action-btn + .el-button.action-btn {
+    margin-left: 0;
+  }
+  .keep-all {
+    word-break: keep-all;
+  }
+  .el-table .cell > div {
+    display: inline-block;
+    vertical-align: middle;
+  }
+  .el-table__row.el-table__row--level-1 {
+    color: #999;
+  }
+}

package/src/utils.ts

@@ -16,9 +16,9 @@
  * limitations under the License.
  */
 
-import { datetimeFormatter } from '@tmagic/utils';
+import { datetimeFormatter } from '@tmagic/form';
 
-import { ColumnConfig } from './schema';
+import type { ColumnConfig } from './schema';
 
 export const formatter = (item: ColumnConfig, row: any) => {
   if (!item.prop) return '';
@@ -37,3 +37,5 @@ export const formatter = (item: ColumnConfig, row: any) => {
     return row[item.prop];
   }
 };
+
+export const createColumns = (columns: ColumnConfig[]) => columns;

package/types/index.d.ts

@@ -3,7 +3,7 @@ import { App } from 'vue';
 import { FormConfig, FormValue } from '@tmagic/form';
 
 interface ColumnActionConfig {
-    type?: 'delete' | 'copy' | 'edit';
+    type?: 'delete' | 'copy' | 'edit' | string;
     buttonType?: string;
     display?: (row: any) => boolean;
     text?: string | ((row: any) => string);
@@ -31,14 +31,16 @@ interface ColumnConfig<T = any> {
     type?: 'popover' | 'expand' | 'component' | string | ((value: any, row: T) => string);
     text?: string;
     prop?: string;
+    name?: string;
     showHeader?: boolean;
     table?: ColumnConfig[];
     formatter?: 'datetime' | ((item: any, row: T) => any);
     popover?: {
-        placement: 'auto' | 'auto-start' | 'auto-end' | 'left' | 'right' | 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end';
-        width: string | number;
-        trigger: 'hover' | 'click';
-        tableEmbed: boolean;
+        placement?: 'auto' | 'auto-start' | 'auto-end' | 'left' | 'right' | 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end';
+        width?: string | number;
+        trigger?: 'hover' | 'click';
+        tableEmbed?: boolean;
+        destroyOnClose?: boolean;
     };
     sortable?: boolean | 'custom';
     action?: 'tip' | 'actionLink' | 'img' | 'link' | 'tag';
@@ -55,7 +57,7 @@ interface ColumnConfig<T = any> {
     buttonText?: string;
 }
 
-declare const _default$1: vue.DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+declare const _default$1: vue.DefineComponent<{
     data: any[];
     columns?: ColumnConfig[];
     /** 合并行或列的计算方法 */
@@ -77,17 +79,11 @@ declare const _default$1: vue.DefineComponent<__VLS_WithDefaults<__VLS_TypeProps
     rowkeyName?: string;
     /** 是否带有纵向边框 */
     border?: boolean;
-}>, {
-    columns: () => never[];
-    loading: boolean;
-    showHeader: boolean;
-    defaultExpandAll: boolean;
-    border: boolean;
-}>, {
+}, {
     toggleRowSelection: (row: any, selected: boolean) => void;
     toggleRowExpansion: (row: any, expanded: boolean) => void;
     clearSelection: () => void;
-}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
     select: (...args: any[]) => void;
     "sort-change": (...args: any[]) => void;
     "expand-change": (...args: any[]) => void;
@@ -95,7 +91,7 @@ declare const _default$1: vue.DefineComponent<__VLS_WithDefaults<__VLS_TypeProps
     "after-action": (...args: any[]) => void;
     "select-all": (...args: any[]) => void;
     "selection-change": (...args: any[]) => void;
-}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+}, string, vue.PublicProps, Readonly<{
     data: any[];
     columns?: ColumnConfig[];
     /** 合并行或列的计算方法 */
@@ -117,13 +113,7 @@ declare const _default$1: vue.DefineComponent<__VLS_WithDefaults<__VLS_TypeProps
     rowkeyName?: string;
     /** 是否带有纵向边框 */
     border?: boolean;
-}>, {
-    columns: () => never[];
-    loading: boolean;
-    showHeader: boolean;
-    defaultExpandAll: boolean;
-    border: boolean;
-}>>> & {
+}> & Readonly<{
     onSelect?: ((...args: any[]) => any) | undefined;
     "onSort-change"?: ((...args: any[]) => any) | undefined;
     "onExpand-change"?: ((...args: any[]) => any) | undefined;
@@ -131,36 +121,19 @@ declare const _default$1: vue.DefineComponent<__VLS_WithDefaults<__VLS_TypeProps
     "onAfter-action"?: ((...args: any[]) => any) | undefined;
     "onSelect-all"?: ((...args: any[]) => any) | undefined;
     "onSelection-change"?: ((...args: any[]) => any) | undefined;
-}, {
+}>, {
     loading: boolean;
     border: boolean;
     defaultExpandAll: boolean;
     columns: ColumnConfig[];
     showHeader: boolean;
-}, {}>;
-
-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];
-} & {};
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: vue.PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: vue.PropType<T[K]>;
-        required: true;
-    };
-};
+}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}>;
 
 declare const formatter: (item: ColumnConfig, row: any) => any;
+declare const createColumns: (columns: ColumnConfig[]) => ColumnConfig<any>[];
 
 declare const _default: {
     install(app: App): void;
 };
 
-export { type ColumnActionConfig, type ColumnConfig, _default$1 as MagicTable, _default as default, formatter };
+export { type ColumnActionConfig, type ColumnConfig, _default$1 as MagicTable, createColumns, _default as default, formatter };