@tmagic/table 1.7.6 → 1.7.8-beta.1

package/dist/tmagic-table.js

@@ -1,652 +0,0 @@
-import { defineComponent, createElementBlock, openBlock, Fragment, withDirectives, renderList, createBlock, unref, withCtx, createVNode, createElementVNode, vShow, createTextVNode, resolveDynamicComponent, mergeProps, toHandlers, createCommentVNode, normalizeProps, toDisplayString, computed, useTemplateRef, ref, resolveDirective, h } from 'vue';
-import { cloneDeep } from 'lodash-es';
-import { TMagicTooltip, TMagicButton, tMagicMessage, TMagicPopover, TMagicTag, TMagicTable } from '@tmagic/design';
-import { MForm, datetimeFormatter } from '@tmagic/form';
-import { setValueByKeyPath } from '@tmagic/utils';
-
-const _hoisted_1$2 = ["innerHTML"];
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MTableActionsColumn"
-  },
-  __name: "ActionsColumn",
-  props: {
-    columns: { default: () => [] },
-    config: { default: () => ({}) },
-    rowkeyName: { default: "c_id" },
-    editState: { default: () => [] },
-    row: {},
-    index: {}
-  },
-  emits: ["after-action", "after-action-cancel"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const display = (fuc, row) => {
-      if (typeof fuc === "function") {
-        return fuc(row);
-      }
-      if (typeof fuc === "boolean") {
-        return fuc;
-      }
-      return true;
-    };
-    const disabled = (fuc, row) => {
-      if (typeof fuc === "function") {
-        return fuc(row);
-      }
-      if (typeof fuc === "boolean") {
-        return fuc;
-      }
-      return false;
-    };
-    const formatter = (fuc, row) => {
-      if (typeof fuc === "function") {
-        return fuc(row);
-      }
-      return fuc;
-    };
-    const actionHandler = async (action, row, index) => {
-      await action.before?.(row, index);
-      if (action.type === "edit") {
-        props.editState[index] = cloneDeep(row);
-      } else {
-        await action.handler?.(row, index);
-      }
-      action.after?.(row, index);
-    };
-    const save = async (index, config) => {
-      const action = config.actions?.find((item) => item.type === "edit")?.action;
-      if (!action) return;
-      const res = await action({
-        data: props.editState[index],
-        index
-      });
-      if (res) {
-        if (res.ret === 0) {
-          tMagicMessage.success("保存成功");
-          props.editState[index] = void 0;
-          emit("after-action", { index });
-        } else {
-          tMagicMessage.error(res.msg || "保存失败");
-        }
-      } else {
-        props.editState[index] = void 0;
-        emit("after-action", { index });
-      }
-    };
-    const cancel = async (index, config) => {
-      props.editState[index] = void 0;
-      const cancel2 = config.actions?.find((item) => item.type === "edit")?.cancel;
-      if (cancel2) {
-        await cancel2({ index });
-      }
-      emit("after-action-cancel", { index });
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        Fragment,
-        null,
-        [
-          (openBlock(true), createElementBlock(
-            Fragment,
-            null,
-            renderList(__props.config.actions, (action, actionIndex) => {
-              return openBlock(), createBlock(unref(TMagicTooltip), {
-                placement: action.tooltipPlacement || "top",
-                key: actionIndex,
-                disabled: !Boolean(action.tooltip),
-                content: action.tooltip
-              }, {
-                default: withCtx(() => [
-                  withDirectives(createVNode(unref(TMagicButton), {
-                    class: "action-btn",
-                    link: "",
-                    size: "small",
-                    type: action.buttonType || "primary",
-                    icon: action.icon,
-                    disabled: disabled(action.disabled, __props.row),
-                    onClick: ($event) => actionHandler(action, __props.row, __props.index)
-                  }, {
-                    default: withCtx(() => [
-                      createElementVNode("span", {
-                        innerHTML: formatter(action.text, __props.row)
-                      }, null, 8, _hoisted_1$2)
-                    ]),
-                    _: 2
-                    /* DYNAMIC */
-                  }, 1032, ["type", "icon", "disabled", "onClick"]), [
-                    [vShow, display(action.display, __props.row) && !__props.editState[__props.index]]
-                  ])
-                ]),
-                _: 2
-                /* DYNAMIC */
-              }, 1032, ["placement", "disabled", "content"]);
-            }),
-            128
-            /* KEYED_FRAGMENT */
-          )),
-          withDirectives(createVNode(
-            unref(TMagicButton),
-            {
-              class: "action-btn",
-              link: "",
-              type: "primary",
-              size: "small",
-              onClick: _cache[0] || (_cache[0] = ($event) => save(__props.index, __props.config))
-            },
-            {
-              default: withCtx(() => [..._cache[2] || (_cache[2] = [
-                createTextVNode(
-                  "保存",
-                  -1
-                  /* CACHED */
-                )
-              ])]),
-              _: 1
-              /* STABLE */
-            },
-            512
-            /* NEED_PATCH */
-          ), [
-            [vShow, __props.editState[__props.index]]
-          ]),
-          withDirectives(createVNode(
-            unref(TMagicButton),
-            {
-              class: "action-btn",
-              link: "",
-              type: "danger",
-              size: "small",
-              onClick: _cache[1] || (_cache[1] = ($event) => cancel(__props.index, __props.config))
-            },
-            {
-              default: withCtx(() => [..._cache[3] || (_cache[3] = [
-                createTextVNode(
-                  "取消",
-                  -1
-                  /* CACHED */
-                )
-              ])]),
-              _: 1
-              /* STABLE */
-            },
-            512
-            /* NEED_PATCH */
-          ), [
-            [vShow, __props.editState[__props.index]]
-          ])
-        ],
-        64
-        /* STABLE_FRAGMENT */
-      );
-    };
-  }
-});
-
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MTableColumn"
-  },
-  __name: "ComponentColumn",
-  props: {
-    config: { default: () => ({}) },
-    row: {},
-    index: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const componentProps = (row, index) => {
-      if (typeof props.config.props === "function") {
-        return props.config.props(row, index) || {};
-      }
-      return props.config.props || {};
-    };
-    const componentListeners = (row, index) => {
-      if (typeof props.config.listeners === "function") {
-        return props.config.listeners(row, index) || {};
-      }
-      return props.config.listeners || {};
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(
-        resolveDynamicComponent(__props.config.component),
-        mergeProps(componentProps(__props.row, __props.index), toHandlers(componentListeners(__props.row, __props.index))),
-        null,
-        16
-        /* FULL_PROPS */
-      );
-    };
-  }
-});
-
-const _hoisted_1$1 = ["innerHTML"];
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MTableExpandColumn"
-  },
-  __name: "ExpandColumn",
-  props: {
-    config: { default: () => ({}) },
-    row: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const componentProps = (row) => {
-      if (typeof props.config.props === "function") {
-        return props.config.props(row) || {};
-      }
-      return props.config.props || {};
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        Fragment,
-        null,
-        [
-          __props.config.table ? (openBlock(), createBlock(_sfc_main, {
-            key: 0,
-            "show-header": false,
-            columns: __props.config.table,
-            data: __props.config.prop && __props.row[__props.config.prop] || []
-          }, null, 8, ["columns", "data"])) : createCommentVNode("v-if", true),
-          __props.config.form ? (openBlock(), createBlock(unref(MForm), {
-            key: 1,
-            config: __props.config.form,
-            "init-values": __props.config.values || __props.config.prop && __props.row[__props.config.prop] || {}
-          }, null, 8, ["config", "init-values"])) : createCommentVNode("v-if", true),
-          __props.config.expandContent ? (openBlock(), createElementBlock("div", {
-            key: 2,
-            innerHTML: __props.config.expandContent(__props.row, __props.config.prop)
-          }, null, 8, _hoisted_1$1)) : createCommentVNode("v-if", true),
-          __props.config.component ? (openBlock(), createBlock(
-            resolveDynamicComponent(__props.config.component),
-            normalizeProps(mergeProps({ key: 3 }, componentProps(__props.row))),
-            null,
-            16
-            /* FULL_PROPS */
-          )) : createCommentVNode("v-if", true)
-        ],
-        64
-        /* STABLE_FRAGMENT */
-      );
-    };
-  }
-});
-
-const formatter = (item, row, data) => {
-  if (!item.prop) return "";
-  if (item.formatter) {
-    if (item.formatter === "datetime") {
-      item.formatter = (value) => datetimeFormatter(value);
-    }
-    try {
-      return item.formatter(row[item.prop], row, data);
-    } catch (e) {
-      console.error("Formatter error:", e);
-      return row[item.prop];
-    }
-  } else {
-    return row[item.prop];
-  }
-};
-const createColumns = (columns) => columns;
-
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MTablePopoverColumn"
-  },
-  __name: "PopoverColumn",
-  props: {
-    config: { default: () => ({}) },
-    row: {},
-    index: {}
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return __props.config.popover ? (openBlock(), createBlock(unref(TMagicPopover), {
-        key: 0,
-        placement: __props.config.popover.placement,
-        width: __props.config.popover.width,
-        trigger: __props.config.popover.trigger,
-        "destroy-on-close": __props.config.popover.destroyOnClose ?? true
-      }, {
-        reference: withCtx(() => [
-          createVNode(unref(TMagicButton), {
-            link: "",
-            type: "primary"
-          }, {
-            default: withCtx(() => [
-              createTextVNode(
-                toDisplayString(__props.config.text || unref(formatter)(__props.config, __props.row, { index: __props.index })),
-                1
-                /* TEXT */
-              )
-            ]),
-            _: 1
-            /* STABLE */
-          })
-        ]),
-        default: withCtx(() => [
-          __props.config.popover.tableEmbed ? (openBlock(), createBlock(_sfc_main, {
-            key: 0,
-            "show-header": __props.config.showHeader,
-            columns: __props.config.table,
-            data: __props.config.prop && __props.row[__props.config.prop] || []
-          }, null, 8, ["show-header", "columns", "data"])) : createCommentVNode("v-if", true)
-        ]),
-        _: 1
-        /* STABLE */
-      }, 8, ["placement", "width", "trigger", "destroy-on-close"])) : createCommentVNode("v-if", true);
-    };
-  }
-});
-
-const _hoisted_1 = { key: 0 };
-const _hoisted_2 = ["innerHTML"];
-const _hoisted_3 = ["href"];
-const _hoisted_4 = ["src"];
-const _hoisted_5 = ["href"];
-const _hoisted_6 = ["innerHTML"];
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MTableColumn"
-  },
-  __name: "TextColumn",
-  props: {
-    config: { default: () => ({}) },
-    editState: { default: () => ({}) },
-    row: {},
-    index: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const formChangeHandler = (v, eventData) => {
-      if (eventData.changeRecords?.length) {
-        for (const record of eventData.changeRecords) {
-          if (record.propPath) {
-            setValueByKeyPath(record.propPath, record.value, props.editState[props.index]);
-          }
-        }
-      }
-    };
-    return (_ctx, _cache) => {
-      return __props.config.type === "index" ? (openBlock(), createElementBlock(
-        "div",
-        _hoisted_1,
-        toDisplayString(__props.config.pageIndex && __props.config.pageSize ? __props.config.pageIndex * __props.config.pageSize + __props.index + 1 : __props.index + 1),
-        1
-        /* TEXT */
-      )) : (__props.config.type || __props.config.editInlineFormConfig) && __props.editState[__props.index] ? (openBlock(), createBlock(unref(MForm), {
-        key: 1,
-        "label-width": "0",
-        config: __props.config.editInlineFormConfig ?? [__props.config],
-        "init-values": __props.editState[__props.index],
-        onChange: formChangeHandler
-      }, null, 8, ["config", "init-values"])) : __props.config.action === "actionLink" && __props.config.prop ? (openBlock(), createBlock(unref(TMagicButton), {
-        key: 2,
-        link: "",
-        type: "primary",
-        onClick: _cache[0] || (_cache[0] = ($event) => __props.config.handler?.(__props.row))
-      }, {
-        default: withCtx(() => [
-          createElementVNode("span", {
-            innerHTML: unref(formatter)(__props.config, __props.row, { index: __props.index })
-          }, null, 8, _hoisted_2)
-        ]),
-        _: 1
-        /* STABLE */
-      })) : __props.config.action === "img" && __props.config.prop ? (openBlock(), createElementBlock("a", {
-        key: 3,
-        target: "_blank",
-        href: __props.row[__props.config.prop]
-      }, [
-        createElementVNode("img", {
-          src: __props.row[__props.config.prop],
-          height: "50"
-        }, null, 8, _hoisted_4)
-      ], 8, _hoisted_3)) : __props.config.action === "link" && __props.config.prop ? (openBlock(), createElementBlock("a", {
-        key: 4,
-        target: "_blank",
-        href: __props.row[__props.config.prop],
-        class: "keep-all"
-      }, toDisplayString(__props.row[__props.config.prop]), 9, _hoisted_5)) : __props.config.action === "tip" ? (openBlock(), createBlock(unref(TMagicTooltip), {
-        key: 5,
-        placement: "left"
-      }, {
-        content: withCtx(() => [
-          createElementVNode(
-            "div",
-            null,
-            toDisplayString(unref(formatter)(__props.config, __props.row, { index: __props.index })),
-            1
-            /* TEXT */
-          )
-        ]),
-        default: withCtx(() => [
-          createVNode(unref(TMagicButton), {
-            link: "",
-            type: "primary"
-          }, {
-            default: withCtx(() => [
-              createTextVNode(
-                toDisplayString(__props.config.buttonText || "扩展配置"),
-                1
-                /* TEXT */
-              )
-            ]),
-            _: 1
-            /* STABLE */
-          })
-        ]),
-        _: 1
-        /* STABLE */
-      })) : __props.config.action === "tag" && __props.config.prop ? (openBlock(), createBlock(unref(TMagicTag), {
-        key: 6,
-        type: typeof __props.config.type === "function" ? __props.config.type(__props.row[__props.config.prop], __props.row) : __props.config.type,
-        "close-transition": ""
-      }, {
-        default: withCtx(() => [
-          createTextVNode(
-            toDisplayString(unref(formatter)(__props.config, __props.row, { index: __props.index })),
-            1
-            /* TEXT */
-          )
-        ]),
-        _: 1
-        /* STABLE */
-      }, 8, ["type"])) : (openBlock(), createElementBlock("div", {
-        key: 7,
-        innerHTML: unref(formatter)(__props.config, __props.row, { index: __props.index })
-      }, null, 8, _hoisted_6));
-    };
-  }
-});
-
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MTable"
-  },
-  __name: "Table",
-  props: {
-    data: {},
-    columns: { default: () => [] },
-    spanMethod: {},
-    loading: { type: Boolean, default: false },
-    bodyHeight: {},
-    showHeader: { type: Boolean, default: true },
-    emptyText: {},
-    defaultExpandAll: { type: Boolean, default: false },
-    rowkeyName: {},
-    border: { type: Boolean, default: false }
-  },
-  emits: [
-    "sort-change",
-    "after-action",
-    "after-action-cancel",
-    "select",
-    "select-all",
-    "selection-change",
-    "expand-change",
-    "cell-click"
-  ],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const cellRender = (config, { row = {}, $index }) => {
-      if (config.type === "expand") {
-        return h(_sfc_main$3, {
-          config,
-          row
-        });
-      }
-      if (config.type === "component") {
-        return h(_sfc_main$4, {
-          config,
-          row,
-          index: $index
-        });
-      }
-      if (config.actions) {
-        return h(_sfc_main$5, {
-          config,
-          row,
-          index: $index,
-          rowkeyName: props.rowkeyName,
-          editState: editState.value,
-          columns: props.columns,
-          onAfterAction: (payload) => emit("after-action", payload),
-          onAfterActionCancel: (payload) => emit("after-action-cancel", payload)
-        });
-      }
-      if (config.type === "popover") {
-        return h(_sfc_main$2, {
-          config,
-          row,
-          index: $index
-        });
-      }
-      return h(_sfc_main$1, {
-        config,
-        row,
-        index: $index,
-        editState: editState.value
-      });
-    };
-    const tableColumns = computed(
-      () => props.columns.map((item) => {
-        let type = "default";
-        if (item.type === "expand") {
-          type = "expand";
-        } else if (item.selection) {
-          type = "selection";
-        }
-        return {
-          props: {
-            label: item.label,
-            fixed: item.fixed,
-            width: item.width ?? (item.selection ? 40 : void 0),
-            prop: item.prop,
-            type,
-            selectable: item.selectable
-          },
-          cell: type === "selection" ? void 0 : ({ row, $index }) => cellRender(item, { row, $index })
-        };
-      })
-    );
-    const tMagicTableRef = useTemplateRef("tMagicTable");
-    const editState = ref([]);
-    const selectionColumn = computed(() => {
-      const column = props.columns.filter((item) => item.selection);
-      return column.length ? column[0] : null;
-    });
-    const tableData = computed(() => {
-      if (selectionColumn.value) {
-        return props.data || [];
-      }
-      return cloneDeep(props.data) || [];
-    });
-    const hasBorder = computed(() => typeof props.border !== "undefined" ? props.border : true);
-    const sortChange = (data) => {
-      emit("sort-change", data);
-    };
-    const selectHandler = (selection, row) => {
-      const column = selectionColumn.value;
-      if (!column) {
-        return;
-      }
-      if (column.selection === "single") ;
-      emit("select", selection, row);
-    };
-    const selectAllHandler = (selection) => {
-      emit("select-all", selection);
-    };
-    const selectionChangeHandler = (selection) => {
-      emit("selection-change", selection);
-    };
-    const cellClickHandler = (...args) => {
-      emit("cell-click", ...args);
-    };
-    const expandChange = (...args) => {
-      emit("expand-change", ...args);
-    };
-    const toggleRowSelection = (row, selected) => {
-      tMagicTableRef.value?.toggleRowSelection(row, selected);
-    };
-    const toggleRowExpansion = (row, expanded) => {
-      tMagicTableRef.value?.toggleRowExpansion(row, expanded);
-    };
-    const clearSelection = () => {
-      tMagicTableRef.value?.clearSelection();
-    };
-    const objectSpanMethod = (data) => {
-      if (typeof props.spanMethod === "function") {
-        return props.spanMethod(data);
-      }
-      return () => ({
-        rowspan: 0,
-        colspan: 0
-      });
-    };
-    __expose({
-      toggleRowSelection,
-      toggleRowExpansion,
-      clearSelection
-    });
-    return (_ctx, _cache) => {
-      const _directive_loading = resolveDirective("loading");
-      return withDirectives((openBlock(), createBlock(unref(TMagicTable), {
-        class: "m-table",
-        ref: "tMagicTable",
-        "show-overflow-tooltip": true,
-        "tooltip-effect": "dark",
-        "tooltip-options": { popperOptions: { strategy: "absolute" } },
-        data: tableData.value,
-        "show-header": __props.showHeader,
-        "max-height": __props.bodyHeight,
-        "default-expand-all": __props.defaultExpandAll,
-        border: hasBorder.value,
-        "row-key": __props.rowkeyName || "id",
-        "tree-props": { children: "children" },
-        "empty-text": __props.emptyText || "暂无数据",
-        "span-method": objectSpanMethod,
-        columns: tableColumns.value,
-        onSortChange: sortChange,
-        onSelect: selectHandler,
-        onSelectAll: selectAllHandler,
-        onSelectionChange: selectionChangeHandler,
-        onCellClick: cellClickHandler,
-        onExpandChange: expandChange
-      }, null, 8, ["data", "show-header", "max-height", "default-expand-all", "border", "row-key", "empty-text", "columns"])), [
-        [_directive_loading, __props.loading]
-      ]);
-    };
-  }
-});
-
-const index = {
-  install(app) {
-    app.component("m-table", _sfc_main);
-  }
-};
-
-export { _sfc_main as MagicTable, createColumns, index as default, formatter };