@tmagic/table 1.7.6 → 1.7.8-beta.1

package/dist/es/ComponentColumn.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,27 @@
+import { createBlock, defineComponent, mergeProps, openBlock, resolveDynamicComponent, toHandlers } from "vue";
+//#region packages/table/src/ComponentColumn.vue?vue&type=script&setup=true&lang.ts
+var ComponentColumn_vue_vue_type_script_setup_true_lang_default = /* @__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);
+		};
+	}
+});
+//#endregion
+export { ComponentColumn_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/ExpandColumn.js

@@ -0,0 +1,5 @@
+import ExpandColumn_vue_vue_type_script_setup_true_lang_default from "./ExpandColumn.vue_vue_type_script_setup_true_lang.js";
+//#region packages/table/src/ExpandColumn.vue
+var ExpandColumn_default = ExpandColumn_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ExpandColumn_default as default };

package/dist/es/ExpandColumn.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,42 @@
+import Table_default from "./Table.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, defineComponent, mergeProps, normalizeProps, openBlock, resolveDynamicComponent, unref } from "vue";
+import { MForm } from "@tmagic/form";
+//#region packages/table/src/ExpandColumn.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["innerHTML"];
+var ExpandColumn_vue_vue_type_script_setup_true_lang_default = /* @__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(Table_default, {
+					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)) : createCommentVNode("v-if", true),
+				__props.config.component ? (openBlock(), createBlock(resolveDynamicComponent(__props.config.component), normalizeProps(mergeProps({ key: 3 }, componentProps(__props.row))), null, 16)) : createCommentVNode("v-if", true)
+			], 64);
+		};
+	}
+});
+//#endregion
+export { ExpandColumn_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/PopoverColumn.js

@@ -0,0 +1,5 @@
+import PopoverColumn_vue_vue_type_script_setup_true_lang_default from "./PopoverColumn.vue_vue_type_script_setup_true_lang.js";
+//#region packages/table/src/PopoverColumn.vue
+var PopoverColumn_default = PopoverColumn_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { PopoverColumn_default as default };

package/dist/es/PopoverColumn.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,51 @@
+import { formatter } from "./utils.js";
+import Table_default from "./Table.js";
+import { createBlock, createCommentVNode, createTextVNode, createVNode, defineComponent, openBlock, toDisplayString, unref, withCtx } from "vue";
+import { TMagicButton, TMagicPopover } from "@tmagic/design";
+//#region packages/table/src/PopoverColumn.vue?vue&type=script&setup=true&lang.ts
+var PopoverColumn_vue_vue_type_script_setup_true_lang_default = /* @__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)]),
+					_: 1
+				})]),
+				default: withCtx(() => [__props.config.popover.tableEmbed ? (openBlock(), createBlock(Table_default, {
+					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
+			}, 8, [
+				"placement",
+				"width",
+				"trigger",
+				"destroy-on-close"
+			])) : createCommentVNode("v-if", true);
+		};
+	}
+});
+//#endregion
+export { PopoverColumn_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/Table.js

@@ -0,0 +1,5 @@
+import Table_vue_vue_type_script_setup_true_lang_default from "./Table.vue_vue_type_script_setup_true_lang.js";
+//#region packages/table/src/Table.vue
+var Table_default = Table_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Table_default as default };

package/dist/es/Table.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,192 @@
+import ActionsColumn_default from "./ActionsColumn.js";
+import ComponentColumn_default from "./ComponentColumn.js";
+import ExpandColumn_default from "./ExpandColumn.js";
+import PopoverColumn_default from "./PopoverColumn.js";
+import TextColumn_default from "./TextColumn.js";
+import { computed, createBlock, defineComponent, h, openBlock, ref, resolveDirective, unref, useTemplateRef, withDirectives } from "vue";
+import { cloneDeep } from "lodash-es";
+import { TMagicTable } from "@tmagic/design";
+//#region packages/table/src/Table.vue?vue&type=script&setup=true&lang.ts
+var Table_vue_vue_type_script_setup_true_lang_default = /* @__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(ExpandColumn_default, {
+				config,
+				row
+			});
+			if (config.type === "component") return h(ComponentColumn_default, {
+				config,
+				row,
+				index: $index
+			});
+			if (config.actions) return h(ActionsColumn_default, {
+				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(PopoverColumn_default, {
+				config,
+				row,
+				index: $index
+			});
+			return h(TextColumn_default, {
+				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]]);
+		};
+	}
+});
+//#endregion
+export { Table_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/TextColumn.js

@@ -0,0 +1,5 @@
+import TextColumn_vue_vue_type_script_setup_true_lang_default from "./TextColumn.vue_vue_type_script_setup_true_lang.js";
+//#region packages/table/src/TextColumn.vue
+var TextColumn_default = TextColumn_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TextColumn_default as default };

package/dist/es/TextColumn.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,84 @@
+import { formatter } from "./utils.js";
+import { createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, toDisplayString, unref, withCtx } from "vue";
+import { TMagicButton, TMagicTag, TMagicTooltip } from "@tmagic/design";
+import { MForm } from "@tmagic/form";
+import { setValueByKeyPath } from "@tmagic/utils";
+//#region packages/table/src/TextColumn.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { key: 0 };
+var _hoisted_2 = ["innerHTML"];
+var _hoisted_3 = ["href"];
+var _hoisted_4 = ["src"];
+var _hoisted_5 = ["href"];
+var _hoisted_6 = ["innerHTML"];
+var TextColumn_vue_vue_type_script_setup_true_lang_default = /* @__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)) : (__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
+			})) : __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)]),
+				default: withCtx(() => [createVNode(unref(TMagicButton), {
+					link: "",
+					type: "primary"
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(__props.config.buttonText || "扩展配置"), 1)]),
+					_: 1
+				})]),
+				_: 1
+			})) : __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)]),
+				_: 1
+			}, 8, ["type"])) : (openBlock(), createElementBlock("div", {
+				key: 7,
+				innerHTML: unref(formatter)(__props.config, __props.row, { index: __props.index })
+			}, null, 8, _hoisted_6));
+		};
+	}
+});
+//#endregion
+export { TextColumn_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/index.js

@@ -0,0 +1,9 @@
+import { createColumns, formatter } from "./utils.js";
+import Table_default from "./Table.js";
+/* empty css            */
+//#region packages/table/src/index.ts
+var src_default = { install(app) {
+	app.component("m-table", Table_default);
+} };
+//#endregion
+export { Table_default as MagicTable, createColumns, src_default as default, formatter };

package/dist/es/style.css

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

package/dist/es/utils.js

@@ -0,0 +1,17 @@
+import { datetimeFormatter } from "@tmagic/form";
+//#region packages/table/src/utils.ts
+var 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];
+};
+var createColumns = (columns) => columns;
+//#endregion
+export { createColumns, formatter };

package/dist/style.css

@@ -10,4 +10,4 @@
 }
 .m-table .el-table__row.el-table__row--level-1 {
   color: #999;
-}
+}/*$vite$:1*/