@tmagic/form 1.7.7 → 1.7.8-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (103) hide show
  1. package/LICENSE +235 -164
  2. package/dist/es/Form.js +5 -0
  3. package/dist/es/Form.vue_vue_type_script_setup_true_lang.js +234 -0
  4. package/dist/es/FormBox.js +5 -0
  5. package/dist/es/FormBox.vue_vue_type_script_setup_true_lang.js +117 -0
  6. package/dist/es/FormDialog.js +5 -0
  7. package/dist/es/FormDialog.vue_vue_type_script_setup_true_lang.js +222 -0
  8. package/dist/es/FormDrawer.js +5 -0
  9. package/dist/es/FormDrawer.vue_vue_type_script_setup_true_lang.js +176 -0
  10. package/dist/es/_virtual/_rolldown/runtime.js +27 -0
  11. package/dist/es/containers/Col.js +5 -0
  12. package/dist/es/containers/Col.vue_vue_type_script_setup_true_lang.js +60 -0
  13. package/dist/es/containers/Container.js +5 -0
  14. package/dist/es/containers/Container.vue_vue_type_script_setup_true_lang.js +439 -0
  15. package/dist/es/containers/Fieldset.js +5 -0
  16. package/dist/es/containers/Fieldset.vue_vue_type_script_setup_true_lang.js +153 -0
  17. package/dist/es/containers/FlexLayout.js +5 -0
  18. package/dist/es/containers/FlexLayout.vue_vue_type_script_setup_true_lang.js +64 -0
  19. package/dist/es/containers/FormLabel.js +5 -0
  20. package/dist/es/containers/FormLabel.vue_vue_type_script_setup_true_lang.js +51 -0
  21. package/dist/es/containers/GroupList.js +5 -0
  22. package/dist/es/containers/GroupList.vue_vue_type_script_setup_true_lang.js +164 -0
  23. package/dist/es/containers/GroupListItem.js +5 -0
  24. package/dist/es/containers/GroupListItem.vue_vue_type_script_setup_true_lang.js +221 -0
  25. package/dist/es/containers/Panel.js +5 -0
  26. package/dist/es/containers/Panel.vue_vue_type_script_setup_true_lang.js +130 -0
  27. package/dist/es/containers/Row.js +5 -0
  28. package/dist/es/containers/Row.vue_vue_type_script_setup_true_lang.js +65 -0
  29. package/dist/es/containers/Step.js +5 -0
  30. package/dist/es/containers/Step.vue_vue_type_script_setup_true_lang.js +85 -0
  31. package/dist/es/containers/Tabs.js +5 -0
  32. package/dist/es/containers/Tabs.vue_vue_type_script_setup_true_lang.js +194 -0
  33. package/dist/es/fields/Cascader.js +5 -0
  34. package/dist/es/fields/Cascader.vue_vue_type_script_setup_true_lang.js +123 -0
  35. package/dist/es/fields/Checkbox.js +5 -0
  36. package/dist/es/fields/Checkbox.vue_vue_type_script_setup_true_lang.js +61 -0
  37. package/dist/es/fields/CheckboxGroup.js +5 -0
  38. package/dist/es/fields/CheckboxGroup.vue_vue_type_script_setup_true_lang.js +63 -0
  39. package/dist/es/fields/ColorPicker.js +5 -0
  40. package/dist/es/fields/ColorPicker.vue_vue_type_script_setup_true_lang.js +42 -0
  41. package/dist/es/fields/Date.js +5 -0
  42. package/dist/es/fields/Date.vue_vue_type_script_setup_true_lang.js +52 -0
  43. package/dist/es/fields/DateTime.js +5 -0
  44. package/dist/es/fields/DateTime.vue_vue_type_script_setup_true_lang.js +57 -0
  45. package/dist/es/fields/Daterange.js +5 -0
  46. package/dist/es/fields/Daterange.vue_vue_type_script_setup_true_lang.js +99 -0
  47. package/dist/es/fields/Display.js +5 -0
  48. package/dist/es/fields/Display.vue_vue_type_script_setup_true_lang.js +36 -0
  49. package/dist/es/fields/DynamicField.js +5 -0
  50. package/dist/es/fields/DynamicField.vue_vue_type_script_setup_true_lang.js +91 -0
  51. package/dist/es/fields/Hidden.js +5 -0
  52. package/dist/es/fields/Hidden.vue_vue_type_script_setup_true_lang.js +24 -0
  53. package/dist/es/fields/Link.js +5 -0
  54. package/dist/es/fields/Link.vue_vue_type_script_setup_true_lang.js +104 -0
  55. package/dist/es/fields/Number.js +5 -0
  56. package/dist/es/fields/Number.vue_vue_type_script_setup_true_lang.js +65 -0
  57. package/dist/es/fields/NumberRange.js +5 -0
  58. package/dist/es/fields/NumberRange.vue_vue_type_script_setup_true_lang.js +76 -0
  59. package/dist/es/fields/RadioGroup.js +5 -0
  60. package/dist/es/fields/RadioGroup.vue_vue_type_script_setup_true_lang.js +74 -0
  61. package/dist/es/fields/Select.js +5 -0
  62. package/dist/es/fields/Select.vue_vue_type_script_setup_true_lang.js +337 -0
  63. package/dist/es/fields/Switch.js +5 -0
  64. package/dist/es/fields/Switch.vue_vue_type_script_setup_true_lang.js +59 -0
  65. package/dist/es/fields/Text.js +5 -0
  66. package/dist/es/fields/Text.vue_vue_type_script_setup_true_lang.js +215 -0
  67. package/dist/es/fields/Textarea.js +5 -0
  68. package/dist/es/fields/Textarea.vue_vue_type_script_setup_true_lang.js +60 -0
  69. package/dist/es/fields/Time.js +5 -0
  70. package/dist/es/fields/Time.vue_vue_type_script_setup_true_lang.js +49 -0
  71. package/dist/es/fields/Timerange.js +5 -0
  72. package/dist/es/fields/Timerange.vue_vue_type_script_setup_true_lang.js +100 -0
  73. package/dist/es/index.js +41 -0
  74. package/dist/es/plugin.js +74 -0
  75. package/dist/es/schema.js +2 -0
  76. package/dist/es/style.css +325 -0
  77. package/dist/es/table/ActionsColumn.js +5 -0
  78. package/dist/es/table/ActionsColumn.vue_vue_type_script_setup_true_lang.js +107 -0
  79. package/dist/es/table/SortColumn.js +5 -0
  80. package/dist/es/table/SortColumn.vue_vue_type_script_setup_true_lang.js +88 -0
  81. package/dist/es/table/Table.js +5 -0
  82. package/dist/es/table/Table.vue_vue_type_script_setup_true_lang.js +232 -0
  83. package/dist/es/table/useAdd.js +71 -0
  84. package/dist/es/table/useFullscreen.js +15 -0
  85. package/dist/es/table/useImport.js +46 -0
  86. package/dist/es/table/usePagination.js +26 -0
  87. package/dist/es/table/useSelection.js +26 -0
  88. package/dist/es/table/useSortable.js +39 -0
  89. package/dist/es/table/useTableColumns.js +160 -0
  90. package/dist/es/utils/config.js +15 -0
  91. package/dist/es/utils/form.js +173 -0
  92. package/dist/es/utils/useAddField.js +13 -0
  93. package/dist/style.css +1 -1
  94. package/dist/tmagic-form.umd.cjs +7693 -8924
  95. package/package.json +7 -6
  96. package/src/containers/Container.vue +16 -10
  97. package/src/fields/Hidden.vue +6 -2
  98. package/src/index.ts +8 -82
  99. package/src/plugin.ts +102 -0
  100. package/src/table/useSortable.ts +8 -4
  101. package/src/utils/config.ts +16 -1
  102. package/types/index.d.ts +1264 -1226
  103. package/dist/tmagic-form.js +0 -5940
@@ -0,0 +1,232 @@
1
+ import { sortChange } from "../utils/form.js";
2
+ import { useAdd } from "./useAdd.js";
3
+ import { useFullscreen } from "./useFullscreen.js";
4
+ import { useImport } from "./useImport.js";
5
+ import { usePagination } from "./usePagination.js";
6
+ import { useSelection } from "./useSelection.js";
7
+ import { useSortable } from "./useSortable.js";
8
+ import { useTableColumns } from "./useTableColumns.js";
9
+ import { Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderSlot, toDisplayString, unref, useTemplateRef, withCtx } from "vue";
10
+ import { TMagicButton, TMagicPagination, TMagicTable, TMagicTooltip, TMagicUpload, useZIndex } from "@tmagic/design";
11
+ import { FullScreen, Grid, Plus } from "@element-plus/icons-vue";
12
+ //#region packages/form/src/table/Table.vue?vue&type=script&setup=true&lang.ts
13
+ var _hoisted_1 = ["innerHTML"];
14
+ var _hoisted_2 = { style: {
15
+ "display": "flex",
16
+ "justify-content": "space-between",
17
+ "margin": "10px 0"
18
+ } };
19
+ var _hoisted_3 = { style: { "display": "flex" } };
20
+ var _hoisted_4 = {
21
+ key: 1,
22
+ class: "bottom",
23
+ style: { "text-align": "right" }
24
+ };
25
+ var Table_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
26
+ name: "MFormTable",
27
+ __name: "Table",
28
+ props: {
29
+ model: {},
30
+ lastValues: { default: () => ({}) },
31
+ isCompare: {
32
+ type: Boolean,
33
+ default: false
34
+ },
35
+ config: {},
36
+ name: {},
37
+ prop: { default: "" },
38
+ labelWidth: {},
39
+ sort: { type: Boolean },
40
+ disabled: { type: Boolean },
41
+ sortKey: { default: "" },
42
+ text: {},
43
+ size: {},
44
+ enableToggleMode: {
45
+ type: Boolean,
46
+ default: true
47
+ },
48
+ showIndex: {
49
+ type: Boolean,
50
+ default: true
51
+ }
52
+ },
53
+ emits: [
54
+ "change",
55
+ "select",
56
+ "addDiffCount"
57
+ ],
58
+ setup(__props, { expose: __expose, emit: __emit }) {
59
+ const props = __props;
60
+ const emit = __emit;
61
+ const modelName = computed(() => props.name || props.config.name || "");
62
+ const tMagicTableRef = useTemplateRef("tMagicTable");
63
+ const { pageSize, currentPage, paginationData, handleSizeChange, handleCurrentChange } = usePagination(props, modelName);
64
+ const { nextZIndex } = useZIndex();
65
+ const updateKey = ref(1);
66
+ const { addable, newHandler } = useAdd(props, emit);
67
+ const { columns } = useTableColumns(props, emit, currentPage, pageSize, modelName);
68
+ useSortable(props, emit, tMagicTableRef, modelName, updateKey);
69
+ const { isFullscreen, toggleFullscreen } = useFullscreen();
70
+ const { importable, excelHandler, clearHandler } = useImport(props, emit, newHandler);
71
+ const { selectHandle, toggleRowSelection } = useSelection(props, emit, tMagicTableRef);
72
+ const data = computed(() => props.config.pagination ? paginationData.value : props.model[modelName.value]);
73
+ const toggleMode = () => {
74
+ const calcLabelWidth = (label) => {
75
+ if (!label) return "0px";
76
+ const zhLength = label.match(/[^\x00-\xff]/g)?.length || 0;
77
+ const chLength = label.length - zhLength;
78
+ return `${Math.max(chLength * 8 + zhLength * 20, 80)}px`;
79
+ };
80
+ props.config.type = "groupList";
81
+ props.config.enableToggleMode = true;
82
+ props.config.tableItems = props.config.items;
83
+ props.config.items = props.config.groupItems || props.config.items.map((item) => {
84
+ const text = item.text || item.label;
85
+ const labelWidth = calcLabelWidth(text);
86
+ return {
87
+ ...item,
88
+ text,
89
+ labelWidth,
90
+ span: item.span || 12
91
+ };
92
+ });
93
+ };
94
+ const sortChangeHandler = (sortOptions) => {
95
+ const modelName = props.name || props.config.name || "";
96
+ sortChange(props.model[modelName], sortOptions);
97
+ };
98
+ __expose({ toggleRowSelection });
99
+ return (_ctx, _cache) => {
100
+ return openBlock(), createBlock(Teleport, {
101
+ to: "body",
102
+ disabled: !unref(isFullscreen)
103
+ }, [createElementVNode("div", mergeProps(_ctx.$attrs, {
104
+ class: ["m-fields-table-wrap", { fixed: unref(isFullscreen) }],
105
+ style: unref(isFullscreen) ? `z-index: ${unref(nextZIndex)()}` : ""
106
+ }), [createElementVNode("div", { class: normalizeClass(["m-fields-table", { "m-fields-table-item-extra": __props.config.itemExtra }]) }, [
107
+ __props.config.extra ? (openBlock(), createElementBlock("span", {
108
+ key: 0,
109
+ style: { "color": "rgba(0, 0, 0, 0.45)" },
110
+ innerHTML: __props.config.extra
111
+ }, null, 8, _hoisted_1)) : createCommentVNode("v-if", true),
112
+ createVNode(unref(TMagicTooltip), {
113
+ content: "拖拽可排序",
114
+ placement: "left-start",
115
+ disabled: __props.config.dropSort !== true || __props.config.dropSortHandle
116
+ }, {
117
+ default: withCtx(() => [__props.model[modelName.value] ? (openBlock(), createBlock(unref(TMagicTable), {
118
+ ref: "tMagicTable",
119
+ style: { "width": "100%" },
120
+ "show-header": "",
121
+ "row-key": __props.config.rowKey || "id",
122
+ columns: unref(columns),
123
+ data: data.value,
124
+ border: __props.config.border,
125
+ "max-height": __props.config.maxHeight,
126
+ "default-expand-all": true,
127
+ key: updateKey.value,
128
+ onSelect: unref(selectHandle),
129
+ onSortChange: sortChangeHandler
130
+ }, null, 8, [
131
+ "row-key",
132
+ "columns",
133
+ "data",
134
+ "border",
135
+ "max-height",
136
+ "onSelect"
137
+ ])) : createCommentVNode("v-if", true)]),
138
+ _: 1
139
+ }, 8, ["disabled"]),
140
+ renderSlot(_ctx.$slots, "default"),
141
+ createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [
142
+ __props.enableToggleMode && __props.config.enableToggleMode !== false && !unref(isFullscreen) ? (openBlock(), createBlock(unref(TMagicButton), {
143
+ key: 0,
144
+ icon: unref(Grid),
145
+ size: "small",
146
+ onClick: toggleMode
147
+ }, {
148
+ default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode("展开配置", -1)])]),
149
+ _: 1
150
+ }, 8, ["icon"])) : createCommentVNode("v-if", true),
151
+ __props.config.enableFullscreen !== false ? (openBlock(), createBlock(unref(TMagicButton), {
152
+ key: 1,
153
+ icon: unref(FullScreen),
154
+ size: "small",
155
+ onClick: unref(toggleFullscreen)
156
+ }, {
157
+ default: withCtx(() => [createTextVNode(toDisplayString(unref(isFullscreen) ? "退出全屏" : "全屏编辑"), 1)]),
158
+ _: 1
159
+ }, 8, ["icon", "onClick"])) : createCommentVNode("v-if", true),
160
+ unref(importable) ? (openBlock(), createBlock(unref(TMagicUpload), {
161
+ key: 2,
162
+ style: { "display": "inline-block" },
163
+ ref: "excelBtn",
164
+ action: "/noop",
165
+ disabled: __props.disabled,
166
+ "on-change": unref(excelHandler),
167
+ "auto-upload": false
168
+ }, {
169
+ default: withCtx(() => [createVNode(unref(TMagicButton), {
170
+ size: "small",
171
+ type: "success",
172
+ disabled: __props.disabled,
173
+ plain: ""
174
+ }, {
175
+ default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode("导入EXCEL", -1)])]),
176
+ _: 1
177
+ }, 8, ["disabled"])]),
178
+ _: 1
179
+ }, 8, ["disabled", "on-change"])) : createCommentVNode("v-if", true),
180
+ unref(importable) ? (openBlock(), createBlock(unref(TMagicButton), {
181
+ key: 3,
182
+ size: "small",
183
+ type: "warning",
184
+ disabled: __props.disabled,
185
+ plain: "",
186
+ onClick: unref(clearHandler)
187
+ }, {
188
+ default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode("清空", -1)])]),
189
+ _: 1
190
+ }, 8, ["disabled", "onClick"])) : createCommentVNode("v-if", true)
191
+ ]), unref(addable) ? (openBlock(), createBlock(unref(TMagicButton), mergeProps({
192
+ key: 0,
193
+ class: "m-form-table-add-button",
194
+ size: "small",
195
+ plain: "",
196
+ icon: unref(Plus)
197
+ }, __props.config.addButtonConfig?.props || { type: "primary" }, {
198
+ disabled: __props.disabled,
199
+ onClick: _cache[0] || (_cache[0] = ($event) => unref(newHandler)())
200
+ }), {
201
+ default: withCtx(() => [createTextVNode(toDisplayString(__props.config.addButtonConfig?.text || "新增一行"), 1)]),
202
+ _: 1
203
+ }, 16, ["icon", "disabled"])) : createCommentVNode("v-if", true)]),
204
+ __props.config.pagination ? (openBlock(), createElementBlock("div", _hoisted_4, [createVNode(unref(TMagicPagination), {
205
+ layout: "total, sizes, prev, pager, next, jumper",
206
+ "hide-on-single-page": __props.model[modelName.value].length < unref(pageSize),
207
+ "current-page": unref(currentPage) + 1,
208
+ "page-sizes": [
209
+ unref(pageSize),
210
+ 60,
211
+ 120,
212
+ 300
213
+ ],
214
+ "page-size": unref(pageSize),
215
+ total: __props.model[modelName.value].length,
216
+ onSizeChange: unref(handleSizeChange),
217
+ onCurrentChange: unref(handleCurrentChange)
218
+ }, null, 8, [
219
+ "hide-on-single-page",
220
+ "current-page",
221
+ "page-sizes",
222
+ "page-size",
223
+ "total",
224
+ "onSizeChange",
225
+ "onCurrentChange"
226
+ ])])) : createCommentVNode("v-if", true)
227
+ ], 2)], 16)], 8, ["disabled"]);
228
+ };
229
+ }
230
+ });
231
+ //#endregion
232
+ export { Table_vue_vue_type_script_setup_true_lang_default as default };
@@ -0,0 +1,71 @@
1
+ import { initValue } from "../utils/form.js";
2
+ import { computed, inject } from "vue";
3
+ import { tMagicMessage } from "@tmagic/design";
4
+ //#region packages/form/src/table/useAdd.ts
5
+ var useAdd = (props, emit) => {
6
+ const mForm = inject("mForm");
7
+ const addable = computed(() => {
8
+ const modelName = props.name || props.config.name || "";
9
+ if (!props.model[modelName].length) return true;
10
+ if (typeof props.config.addable === "function") return props.config.addable(mForm, {
11
+ model: props.model[modelName],
12
+ formValue: mForm?.values,
13
+ prop: props.prop
14
+ });
15
+ return typeof props.config.addable === "undefined" ? true : props.config.addable;
16
+ });
17
+ const newHandler = async (row) => {
18
+ const modelName = props.name || props.config.name || "";
19
+ if (props.config.max && props.model[modelName].length >= props.config.max) {
20
+ tMagicMessage.error(`最多新增配置不能超过${props.config.max}条`);
21
+ return;
22
+ }
23
+ if (typeof props.config.beforeAddRow === "function") {
24
+ if (!props.config.beforeAddRow(mForm, {
25
+ model: props.model[modelName],
26
+ formValue: mForm?.values,
27
+ prop: props.prop
28
+ })) return;
29
+ }
30
+ const columns = props.config.items;
31
+ const enumValues = props.config.enum || [];
32
+ let enumV = [];
33
+ const { length } = props.model[modelName];
34
+ const key = props.config.key || "id";
35
+ let inputs = {};
36
+ if (enumValues.length) {
37
+ if (length >= enumValues.length) return;
38
+ enumV = enumValues.filter((item) => {
39
+ let i = 0;
40
+ for (; i < length; i++) if (item[key] === props.model[modelName][i][key]) break;
41
+ return i === length;
42
+ });
43
+ if (enumV.length > 0) inputs = enumV[0];
44
+ } else if (Array.isArray(row)) columns.forEach((column, index) => {
45
+ column.name && (inputs[column.name] = row[index]);
46
+ });
47
+ else {
48
+ if (typeof props.config.defaultAdd === "function") inputs = await props.config.defaultAdd(mForm, {
49
+ model: props.model[modelName],
50
+ prop: props.prop,
51
+ formValue: mForm?.values
52
+ });
53
+ else if (props.config.defaultAdd) inputs = props.config.defaultAdd;
54
+ inputs = await initValue(mForm, {
55
+ config: columns,
56
+ initValues: inputs
57
+ });
58
+ }
59
+ if (props.sortKey && length) inputs[props.sortKey] = props.model[modelName][length - 1][props.sortKey] - 1;
60
+ emit("change", [...props.model[modelName], inputs], { changeRecords: [{
61
+ propPath: `${props.prop}.${props.model[modelName].length}`,
62
+ value: inputs
63
+ }] });
64
+ };
65
+ return {
66
+ addable,
67
+ newHandler
68
+ };
69
+ };
70
+ //#endregion
71
+ export { useAdd };
@@ -0,0 +1,15 @@
1
+ import { ref } from "vue";
2
+ //#region packages/form/src/table/useFullscreen.ts
3
+ var useFullscreen = () => {
4
+ const isFullscreen = ref(false);
5
+ const toggleFullscreen = () => {
6
+ if (isFullscreen.value) isFullscreen.value = false;
7
+ else isFullscreen.value = true;
8
+ };
9
+ return {
10
+ isFullscreen,
11
+ toggleFullscreen
12
+ };
13
+ };
14
+ //#endregion
15
+ export { useFullscreen };
@@ -0,0 +1,46 @@
1
+ import { computed, inject, useTemplateRef } from "vue";
2
+ import { asyncLoadJs } from "@tmagic/utils";
3
+ //#region packages/form/src/table/useImport.ts
4
+ var useImport = (props, emit, newHandler) => {
5
+ const mForm = inject("mForm");
6
+ const modelName = computed(() => props.name || props.config.name || "");
7
+ const importable = computed(() => {
8
+ if (typeof props.config.importable === "function") return props.config.importable(mForm, {
9
+ formValue: mForm?.values,
10
+ model: props.model[modelName.value]
11
+ });
12
+ return typeof props.config.importable === "undefined" ? false : props.config.importable;
13
+ });
14
+ const excelBtn = useTemplateRef("excelBtn");
15
+ const excelHandler = async (file) => {
16
+ if (!file?.raw) return false;
17
+ if (!globalThis.XLSX) await asyncLoadJs("https://cdn.bootcdn.net/ajax/libs/xlsx/0.17.0/xlsx.full.min.js");
18
+ const reader = new FileReader();
19
+ reader.onload = () => {
20
+ const data = reader.result;
21
+ const pdata = globalThis.XLSX.read(data, { type: "array" });
22
+ pdata.SheetNames.forEach((sheetName) => {
23
+ const arr = globalThis.XLSX.utils.sheet_to_json(pdata.Sheets[sheetName], { header: 1 });
24
+ if (arr?.[0]) arr.forEach((row) => {
25
+ newHandler(row);
26
+ });
27
+ setTimeout(() => {
28
+ excelBtn.value?.clearFiles();
29
+ }, 300);
30
+ });
31
+ };
32
+ reader.readAsArrayBuffer(file.raw);
33
+ return false;
34
+ };
35
+ const clearHandler = () => {
36
+ emit("change", []);
37
+ mForm?.$emit("field-change", props.prop, props.model[modelName.value]);
38
+ };
39
+ return {
40
+ importable,
41
+ excelHandler,
42
+ clearHandler
43
+ };
44
+ };
45
+ //#endregion
46
+ export { useImport };
@@ -0,0 +1,26 @@
1
+ import { getDataByPage } from "../utils/form.js";
2
+ import { computed, ref } from "vue";
3
+ //#region packages/form/src/table/usePagination.ts
4
+ var usePagination = (props, modelName) => {
5
+ const pageSize = ref(10);
6
+ /**
7
+ * 当前页码
8
+ */
9
+ const currentPage = ref(0);
10
+ const paginationData = computed(() => getDataByPage(props.model[modelName.value], currentPage.value, pageSize.value));
11
+ const handleSizeChange = (val) => {
12
+ pageSize.value = val;
13
+ };
14
+ const handleCurrentChange = (val) => {
15
+ currentPage.value = val - 1;
16
+ };
17
+ return {
18
+ pageSize,
19
+ currentPage,
20
+ paginationData,
21
+ handleSizeChange,
22
+ handleCurrentChange
23
+ };
24
+ };
25
+ //#endregion
26
+ export { usePagination };
@@ -0,0 +1,26 @@
1
+ import { inject } from "vue";
2
+ //#region packages/form/src/table/useSelection.ts
3
+ var useSelection = (props, emit, tMagicTableRef) => {
4
+ const mForm = inject("mForm");
5
+ const selectHandle = (selection, row) => {
6
+ if (typeof props.config.selection === "string" && props.config.selection === "single") {
7
+ tMagicTableRef.value?.clearSelection();
8
+ tMagicTableRef.value?.toggleRowSelection(row, true);
9
+ }
10
+ emit("select", selection, row);
11
+ if (typeof props.config.onSelect === "function") props.config.onSelect(mForm, {
12
+ selection,
13
+ row,
14
+ config: props.config
15
+ });
16
+ };
17
+ const toggleRowSelection = (row, selected) => {
18
+ tMagicTableRef.value?.toggleRowSelection.call(tMagicTableRef.value?.getTableRef(), row, selected);
19
+ };
20
+ return {
21
+ selectHandle,
22
+ toggleRowSelection
23
+ };
24
+ };
25
+ //#endregion
26
+ export { useSelection };
@@ -0,0 +1,39 @@
1
+ import { sortArray } from "../utils/form.js";
2
+ import { inject, nextTick, watchEffect } from "vue";
3
+ //#region packages/form/src/table/useSortable.ts
4
+ var SortablePromise;
5
+ var loadSortable = () => SortablePromise ??= import("sortablejs").then((m) => m.default);
6
+ var useSortable = (props, emit, tMagicTableRef, modelName, updateKey) => {
7
+ const mForm = inject("mForm");
8
+ let sortable;
9
+ const rowDrop = async () => {
10
+ sortable?.destroy();
11
+ const tableEl = tMagicTableRef.value?.getEl();
12
+ const tBodyEl = tableEl?.querySelector(".el-table__body > tbody") || tableEl?.querySelector(".t-table__body");
13
+ if (!tBodyEl) return;
14
+ sortable = (await loadSortable()).create(tBodyEl, {
15
+ draggable: ".tmagic-design-table-row",
16
+ filter: "input",
17
+ preventOnFilter: false,
18
+ direction: "vertical",
19
+ handle: props.config.dropSortHandle ? ".tmagic-form-table-drag-target" : void 0,
20
+ onEnd: ({ newIndex, oldIndex }) => {
21
+ if (typeof newIndex === "undefined") return;
22
+ if (typeof oldIndex === "undefined") return;
23
+ const newData = sortArray(props.model[modelName.value], newIndex, oldIndex, props.sortKey);
24
+ emit("change", newData);
25
+ mForm?.$emit("field-change", newData);
26
+ nextTick(() => {
27
+ sortable?.destroy();
28
+ sortable = void 0;
29
+ updateKey.value += 1;
30
+ });
31
+ }
32
+ });
33
+ };
34
+ watchEffect(() => {
35
+ if (props.config.dropSort) rowDrop();
36
+ });
37
+ };
38
+ //#endregion
39
+ export { useSortable };
@@ -0,0 +1,160 @@
1
+ import { display, getDataByPage, sortArray } from "../utils/form.js";
2
+ import Container_default from "../containers/Container.js";
3
+ import ActionsColumn_default from "./ActionsColumn.js";
4
+ import SortColumn_default from "./SortColumn.js";
5
+ import { computed, h, inject } from "vue";
6
+ import { cloneDeep } from "lodash-es";
7
+ import { TMagicIcon, TMagicTooltip } from "@tmagic/design";
8
+ import { WarningFilled } from "@element-plus/icons-vue";
9
+ //#region packages/form/src/table/useTableColumns.ts
10
+ var useTableColumns = (props, emit, currentPage, pageSize, modelName) => {
11
+ const mForm = inject("mForm");
12
+ const display$1 = (fuc) => display(mForm, fuc, props);
13
+ const lastData = computed(() => props.config.pagination ? getDataByPage(props.lastValues[modelName.value], currentPage.value, pageSize.value) : props.lastValues[modelName.value] || []);
14
+ const itemExtra = (fuc, index) => {
15
+ if (typeof fuc === "function") return fuc(mForm, {
16
+ values: mForm?.initValues,
17
+ model: props.model,
18
+ formValue: mForm ? mForm.values : props.model,
19
+ prop: props.prop,
20
+ index
21
+ });
22
+ return fuc;
23
+ };
24
+ const titleTip = (fuc) => {
25
+ if (typeof fuc === "function") return fuc(mForm, {
26
+ values: mForm?.initValues,
27
+ model: props.model,
28
+ formValue: mForm ? mForm.values : props.model,
29
+ prop: props.prop
30
+ });
31
+ return fuc;
32
+ };
33
+ const selection = computed(() => {
34
+ if (typeof props.config.selection === "function") return props.config.selection(mForm, { model: props.model[modelName.value] });
35
+ return props.config.selection;
36
+ });
37
+ const getProp = (index) => {
38
+ return `${props.prop}${props.prop ? "." : ""}${index + 1 + currentPage.value * pageSize.value - 1}`;
39
+ };
40
+ const makeConfig = (config, row) => {
41
+ const newConfig = cloneDeep(config);
42
+ if (typeof config.itemsFunction === "function") newConfig.items = config.itemsFunction(row);
43
+ delete newConfig.display;
44
+ return newConfig;
45
+ };
46
+ const changeHandler = (v, eventData) => {
47
+ emit("change", props.model, eventData);
48
+ };
49
+ const onAddDiffCount = () => emit("addDiffCount");
50
+ return { columns: computed(() => {
51
+ const columns = [];
52
+ if (props.config.itemExtra && !props.config.dropSort) columns.push({
53
+ props: {
54
+ fixed: "left",
55
+ width: 30,
56
+ type: "expand"
57
+ },
58
+ cell: ({ $index }) => h("span", {
59
+ innerHTML: itemExtra(props.config.itemExtra, $index),
60
+ class: "m-form-tip"
61
+ })
62
+ });
63
+ if (selection.value) columns.push({ props: {
64
+ align: "center",
65
+ headerAlign: "center",
66
+ type: "selection",
67
+ width: 45
68
+ } });
69
+ let actionFixed = props.config.fixed === false ? void 0 : "left";
70
+ if (typeof props.config.fixed === "string" && ["left", "right"].includes(props.config.fixed)) actionFixed = props.config.fixed;
71
+ const actionColumn = {
72
+ props: {
73
+ label: "操作",
74
+ fixed: actionFixed,
75
+ width: props.config.operateColWidth ?? (props.config.dropSortHandle && props.config.dropSort ? 132 : 112),
76
+ align: "center"
77
+ },
78
+ cell: ({ row, $index }) => h(ActionsColumn_default, {
79
+ row,
80
+ index: $index,
81
+ model: props.model,
82
+ config: props.config,
83
+ prop: props.prop,
84
+ disabled: props.disabled,
85
+ sortKey: props.sortKey,
86
+ name: modelName.value,
87
+ currentPage: currentPage.value,
88
+ pageSize: pageSize.value,
89
+ onChange: (v) => {
90
+ emit("change", v);
91
+ }
92
+ })
93
+ };
94
+ if (actionFixed !== "right") columns.push(actionColumn);
95
+ if (props.sort && props.model[modelName.value] && props.model[modelName.value].length > 1) columns.push({
96
+ props: {
97
+ label: "排序",
98
+ width: 80
99
+ },
100
+ cell: ({ $index }) => h(SortColumn_default, {
101
+ index: $index,
102
+ model: props.model,
103
+ disabled: props.disabled,
104
+ name: modelName.value,
105
+ currentPage: currentPage.value,
106
+ pageSize: pageSize.value,
107
+ onSwap: (index1, index2) => {
108
+ const newData = sortArray(props.model[modelName.value], index1, index2, props.sortKey);
109
+ emit("change", newData);
110
+ mForm?.$emit("field-change", newData);
111
+ }
112
+ })
113
+ });
114
+ if (props.showIndex && props.config.showIndex) columns.push({
115
+ props: {
116
+ label: "序号",
117
+ width: 60
118
+ },
119
+ cell: ({ $index }) => h("span", $index + 1 + currentPage.value * pageSize.value)
120
+ });
121
+ for (const column of props.config.items) if (column.type !== "hidden" && display$1(column.display)) {
122
+ const titleTipValue = titleTip(column.titleTip);
123
+ columns.push({
124
+ props: {
125
+ prop: column.name,
126
+ label: column.label,
127
+ width: column.width,
128
+ sortable: column.sortable,
129
+ sortOrders: ["ascending", "descending"],
130
+ class: props.config.dropSort === true ? "el-table__column--dropable" : ""
131
+ },
132
+ cell: ({ row, $index }) => h(Container_default, {
133
+ labelWidth: "0",
134
+ disabled: props.disabled,
135
+ prop: getProp($index),
136
+ rules: column.rules,
137
+ config: makeConfig(column, row),
138
+ model: row,
139
+ lastValues: lastData.value[$index],
140
+ isCompare: props.isCompare,
141
+ size: props.size,
142
+ onChange: changeHandler,
143
+ onAddDiffCount
144
+ }),
145
+ title: titleTipValue ? () => h(TMagicTooltip, { placement: "top" }, {
146
+ default: () => h("span", { style: {
147
+ display: "inline-flex",
148
+ alignItems: "center",
149
+ gap: "5px"
150
+ } }, [h("span", column.label), h(TMagicIcon, {}, { default: () => h(WarningFilled) })]),
151
+ content: () => h("div", { innerHTML: titleTipValue })
152
+ }) : void 0
153
+ });
154
+ }
155
+ if (actionFixed === "right") columns.push(actionColumn);
156
+ return columns;
157
+ }) };
158
+ };
159
+ //#endregion
160
+ export { useTableColumns };
@@ -0,0 +1,15 @@
1
+ //#region packages/form/src/utils/config.ts
2
+ var $MAGIC_FORM = {};
3
+ var setConfig = (option) => {
4
+ $MAGIC_FORM = option;
5
+ };
6
+ var getConfig = (key) => $MAGIC_FORM[key];
7
+ var fieldRegistry = /* @__PURE__ */ new Map();
8
+ var registerField = (tagName, component) => {
9
+ if (fieldRegistry.has(tagName)) return;
10
+ fieldRegistry.set(tagName, component);
11
+ };
12
+ var getField = (tagName) => fieldRegistry.get(tagName);
13
+ var deleteField = (tagName) => fieldRegistry.delete(tagName);
14
+ //#endregion
15
+ export { deleteField, getConfig, getField, registerField, setConfig };