@tmagic/table 1.5.0-beta.4 → 1.5.0-beta.6

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({
@@ -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({
   ...{
@@ -424,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;
@@ -552,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({
@@ -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({
     ...{
@@ -424,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;
@@ -553,6 +558,7 @@
   };
 
   exports.MagicTable = _sfc_main;
+  exports.createColumns = createColumns;
   exports.default = index;
   exports.formatter = formatter;
 

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.0-beta.4",
+  "version": "1.5.0-beta.6",
   "name": "@tmagic/table",
   "type": "module",
   "main": "dist/tmagic-table.umd.cjs",
@@ -46,9 +46,8 @@
   "peerDependencies": {
     "vue": "^3.4.35",
     "typescript": "*",
-    "@tmagic/design": "1.5.0-beta.4",
-    "@tmagic/utils": "1.5.0-beta.4",
-    "@tmagic/form": "1.5.0-beta.4"
+    "@tmagic/design": "1.5.0-beta.6",
+    "@tmagic/form": "1.5.0-beta.6"
   },
   "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/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,6 +46,7 @@ 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);

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,6 +31,7 @@ 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);
@@ -159,9 +160,10 @@ type __VLS_TypePropsToOption<T> = {
 };
 
 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 };