@web-utils/form-ui 1.0.0-beta51 → 1.0.0-beta52

package/chunks/DhVmHzB7.mjs

@@ -0,0 +1,653 @@
+import { d as e, f as t, n, r } from "./DcTVYqeJ.mjs";
+import { getDictLabel as i } from "../helper/dictionary.mjs";
+import { cellClickHandlerContextKey as a, pageableTableContextKey as o } from "../constants/index.mjs";
+import { t as s } from "./Dt3lfDnL.mjs";
+import c from "../element-resize-observer/index.mjs";
+import { t as l } from "./XoImEoke.mjs";
+import { t as u } from "./CGDnQr1c.mjs";
+import { useVisibilityChange as ee } from "../hook/useVisibilityChange.mjs";
+import { Fragment as te, computed as d, createBlock as f, createTextVNode as p, createVNode as m, inject as h, isVNode as g, mergeModels as _, mergeProps as v, nextTick as ne, onUpdated as y, openBlock as b, provide as x, reactive as S, ref as C, toDisplayString as w, useModel as T, useTemplateRef as E, watch as D, withCtx as O } from "vue";
+import { ElMessage as re } from "element-plus";
+import { ElCheckbox as k, ElDrawer as A, ElEmpty as ie, ElPagination as ae, ElRadio as j, ElTable as M, ElTableColumn as N } from "element-plus/es";
+import { useEventBus as oe } from "@web-utils/vue/hooks/useEventBus";
+//#region src/components/table/components/TableColumnSettingPanel.vue
+var se = /* @__PURE__ */ Object.assign({ name: "TableColumnSettingPanel" }, {
+	__name: "TableColumnSettingPanel",
+	props: /* @__PURE__ */ _({ columns: {
+		type: Array,
+		default: () => []
+	} }, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e, { expose: t }) {
+		let n = T(e, "modelValue"), r = S({}), i = S({}), a = S({}), o = S({}), s = (e, t, n) => {
+			n === "hide" ? r[t.prop] = e : n === "fixed" ? i[t.prop] = e : n === "filterable" ? a[t.prop] = e : n === "sortable" && (o[t.prop] = e);
+		};
+		return t({
+			hideProps: r,
+			fixedProps: i,
+			filterableProps: a,
+			sortableProps: o
+		}), (t, r) => {
+			let i = N, a = k, o = M, c = A;
+			return b(), f(c, {
+				modelValue: n.value,
+				"onUpdate:modelValue": r[0] || (r[0] = (e) => n.value = e),
+				class: "table-column-filter",
+				title: "表格设置",
+				"append-to-body": ""
+			}, {
+				default: O(() => [m(o, {
+					data: e.columns,
+					border: ""
+				}, {
+					default: O(() => [
+						m(i, { label: "列名" }, {
+							default: O(({ row: e }) => [p(w(e.label), 1)]),
+							_: 1
+						}),
+						m(i, {
+							label: "隐藏",
+							align: "center"
+						}, {
+							default: O(({ row: e }) => [m(a, { onChange: (t) => s(t, e, "hide") }, null, 8, ["onChange"])]),
+							_: 1
+						}),
+						m(i, {
+							label: "冻结",
+							align: "center"
+						}, {
+							default: O(({ row: e }) => [m(a, { onChange: (t) => s(t, e, "fixed") }, null, 8, ["onChange"])]),
+							_: 1
+						}),
+						m(i, {
+							label: "过滤",
+							align: "center"
+						}, {
+							default: O(({ row: e }) => [m(a, { onChange: (t) => s(t, e, "filterable") }, null, 8, ["onChange"])]),
+							_: 1
+						}),
+						m(i, {
+							label: "排序",
+							align: "center"
+						}, {
+							default: O(({ row: e }) => [m(a, {
+								title: e.allowSort ? null : "该列不支持排序!",
+								disabled: !e.allowSort,
+								onChange: (t) => s(t, e, "sortable")
+							}, null, 8, [
+								"title",
+								"disabled",
+								"onChange"
+							])]),
+							_: 1
+						})
+					]),
+					_: 1
+				}, 8, ["data"])]),
+				_: 1
+			}, 8, ["modelValue"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/table/components/TableColumnFilterable.vue?vue&type=script&lang.jsx
+function P(e) {
+	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !g(e);
+}
+//#endregion
+//#region src/components/table/components/TableColumnFilterable.vue
+var F = {
+	name: "TableColumnFilterable",
+	props: { ...l },
+	setup(e, { slots: n }) {
+		let r = h(o, null), i = t(e, (e) => e !== "filterMethod" && e !== "filters"), a = d(() => {
+			if (e.filterable && r) return (e, t, n) => t[n.property] === e;
+		}), s = d(() => {
+			if (e.filterable && r) return [...new Set(r.records.value.map((t) => t[e.prop]).filter((e) => e))].map((e) => ({
+				text: e,
+				value: e
+			}));
+		});
+		return () => m(u, v(i.value, {
+			filterMethod: a.value,
+			filters: s.value
+		}), P(n) ? n : { default: () => [n] });
+	}
+}, I = {
+	data: {
+		type: Array,
+		default: () => []
+	},
+	height: [String, Number],
+	maxHeight: [String, Number],
+	stripe: {
+		type: Boolean,
+		default: !1
+	},
+	border: {
+		type: Boolean,
+		default: !0
+	},
+	size: String,
+	fit: {
+		type: Boolean,
+		default: !0
+	},
+	showHeader: {
+		type: Boolean,
+		default: !0
+	},
+	highlightCurrentRow: {
+		type: Boolean,
+		default: !1
+	},
+	currentRowKey: [String, Number],
+	rowClassName: [Function, String],
+	rowStyle: [Function, Object],
+	cellClassName: [Function, String],
+	cellStyle: [Function, Object],
+	headerRowClassName: [Function, String],
+	headerRowStyle: [Function, Object],
+	headerCellClassName: [Function, String],
+	headerCellStyle: [Function, Object],
+	rowKey: {
+		type: [Function, String],
+		default: "id"
+	},
+	emptyText: {
+		type: String,
+		default: "No Data"
+	},
+	defaultExpandAll: {
+		type: Boolean,
+		default: !1
+	},
+	expandRowKeys: {
+		type: Array,
+		default: () => []
+	},
+	defaultSort: Object,
+	tooltipEffect: {
+		type: String,
+		default: "dark"
+	},
+	tooltipOptions: {
+		type: Object,
+		default: () => ({})
+	},
+	appendFilterPanelTo: String,
+	showSummary: {
+		type: Boolean,
+		default: !1
+	},
+	sumText: {
+		type: String,
+		default: "Sum"
+	},
+	summaryMethod: Function,
+	spanMethod: Function,
+	selectOnIndeterminate: {
+		type: Boolean,
+		default: !0
+	},
+	indent: {
+		type: Number,
+		default: 16
+	},
+	lazy: {
+		type: Boolean,
+		default: !1
+	},
+	load: Function,
+	treeProps: {
+		type: Object,
+		default: () => ({})
+	},
+	tableLayout: {
+		type: String,
+		default: "fixed"
+	},
+	scrollbarAlwaysOn: {
+		type: Boolean,
+		default: !1
+	},
+	showOverflowTooltip: [Boolean, Object],
+	flexible: {
+		type: Boolean,
+		default: !1
+	},
+	scrollbarTabindex: [String, Number],
+	allowDragLastColumn: {
+		type: Boolean,
+		default: !0
+	},
+	tooltipFormatter: Function,
+	preserveExpandedContent: {
+		type: Boolean,
+		default: !1
+	},
+	nativeScrollbar: {
+		type: Boolean,
+		default: !1
+	},
+	rowExpandable: Function,
+	selectionWidth: {
+		type: String,
+		default: "45"
+	},
+	viewId: String,
+	url: String,
+	hideOnSinglePage: Boolean,
+	api: Function,
+	model: Object,
+	ascs: {
+		type: Array,
+		default: () => []
+	},
+	descs: {
+		type: Array,
+		default: () => []
+	},
+	headerBold: Boolean,
+	autoHeight: Boolean,
+	immediate: {
+		type: Boolean,
+		default: !0
+	},
+	index: {
+		type: Boolean,
+		default: !0
+	},
+	multiple: {
+		type: Boolean,
+		default: !0
+	},
+	selection: {
+		type: Boolean,
+		default: !0
+	},
+	reloadOnModelChange: {
+		type: Boolean,
+		default: !1
+	},
+	columns: Array,
+	pageSize: {
+		type: Number,
+		default: 25
+	},
+	dicOptions: {
+		type: Array,
+		default: () => []
+	},
+	paging: {
+		type: Boolean,
+		default: !0
+	},
+	clickRowSelect: Boolean,
+	payloadStyle: String,
+	disabledRowKeys: Array,
+	selectExport: Boolean,
+	useVisibilityChange: Boolean,
+	rowDbClick: Function
+}, L = {
+	data: !0,
+	rowDbClick: !0,
+	selectionWidth: !0,
+	hideOnSinglePage: !0,
+	ascs: !0,
+	descs: !0,
+	headerBold: !0,
+	autoHeight: !0,
+	immediate: !0,
+	index: !0,
+	multiple: !0,
+	selection: !0,
+	reloadOnModelChange: !0,
+	pageSize: !0,
+	dicOptions: !0,
+	paging: !0,
+	clickRowSelect: !0,
+	selectExport: !0,
+	useVisibilityChange: !0,
+	viewId: !0,
+	url: !0,
+	api: !0,
+	model: !0,
+	columns: !0,
+	payloadStyle: !0,
+	disabledRowKeys: !0
+}, ce = (e) => L[e] !== !0;
+//#endregion
+//#region src/components/table/PageableTable.vue?vue&type=script&lang.jsx
+function le(e) {
+	let t = "";
+	for (let n in e) t += `<TableColumnDef prop="${n}" label="${n}"/>\n`;
+	return t;
+}
+var R = {
+	loading: 1,
+	error: -1,
+	empty: 2,
+	success: 0
+}, z = {
+	name: "PageableTable",
+	emits: { "page-loaded": null },
+	inheritAttrs: !1,
+	props: { ...I },
+	setup(t, { emit: l, attrs: u, slots: f, expose: h }) {
+		x(a, t.rowDbClick);
+		let g = E("table"), _ = E("settingPanel"), b = C(R.empty), S = C([]), w = C(null), T = C(!1), O = C([]), k = C({
+			total: 0,
+			page: 1,
+			limit: t.pageSize,
+			ascs: t.ascs,
+			descs: t.descs
+		}), A = C(0), P = C(0), I = d(() => t.reloadOnModelChange ? {
+			asc: k.value.ascs,
+			desc: k.value.descs,
+			page: k.value.page,
+			limit: k.value.limit,
+			model: t.model
+		} : {
+			asc: k.value.ascs,
+			desc: k.value.descs,
+			page: k.value.page,
+			limit: k.value.limit
+		}), L = d(() => {
+			var e;
+			let t = `${(k.value.page - 1) * k.value.limit + (((e = S.value) == null ? void 0 : e.length) ?? 0)}`;
+			return t.length > 3 ? 60 + (t.length - 3) * 10 : 60;
+		}), z = () => {
+			V();
+		}, B = (e, n, r) => {
+			if (t.clickRowSelect && Q(e)) {
+				var i;
+				if (O.value.find((n) => n[t.rowKey] === e[t.rowKey])) {
+					var a;
+					(a = g.value) == null || a.toggleRowSelection(e, !1);
+					return;
+				}
+				(i = g.value) == null || i.toggleRowSelection(e);
+			}
+		}, V = () => {
+			var e, t;
+			let n = (e = g.value) == null || (e = e.$children) == null ? void 0 : e.find((e) => {
+				var t;
+				return ((t = e.$options) == null ? void 0 : t.name) === "ElTableBody";
+			});
+			n == null || (t = n.$refs) == null || (t = t.tooltip) == null || t.hide();
+		}, H = ({ scrollLeft: e, scrollTop: t }) => {
+			A.value = t, P.value = e;
+		}, U = () => {
+			me(A.value, P.value);
+		}, ue = (e) => n(le(e)), de = ({ prop: e, order: n }) => {
+			t.payloadStyle === "body" ? (k.value.ascs = n === "ascending" ? [e] : t.ascs, k.value.descs = n === "descending" ? [e] : t.descs) : (k.value.ascs = n === "ascending" ? e : "", k.value.descs = n === "descending" ? e : "");
+		}, fe = (e) => {
+			Q(e) && (w.value = e);
+		}, pe = (e) => {
+			O.value = e;
+		}, W = () => {
+			var e;
+			(e = g.value) == null || e.clearSelection();
+		}, G = () => {
+			let e;
+			return e = t.payloadStyle === "body" ? {
+				page: {
+					...k.value,
+					current: k.value.page,
+					size: k.value.limit
+				},
+				example: t.model || {}
+			} : {
+				...k.value,
+				current: k.value.page,
+				size: k.value.limit,
+				...t.model || {}
+			}, t.selectExport && (t.rowKey ? e.exportKeys = O.value.map((e) => e[t.rowKey]) : e.exportKeys = O.value.map((e) => S.value.indexOf(e))), e;
+		}, K = async (e = !0) => {
+			if (!t.api && t.data !== !1) {
+				var n;
+				S.value = t.data, k.value.page = 1, k.value.total = (n = S.value) == null ? void 0 : n.length, k.value.limit = k.value.total;
+				return;
+			}
+			e !== !1 && (S.value = []);
+			let r, i = G();
+			if (t.api) {
+				e !== !1 && (b.value = R.loading);
+				try {
+					t.api && (r = await t.api(i));
+				} catch {
+					b.value = R.error;
+					return;
+				}
+			} else if (t.data) r = { data: { data: {
+				total: t.data.length,
+				records: t.data
+			} } };
+			else {
+				re.warning({
+					title: "开发提示！",
+					message: "PageableTable api(Function) 属性"
+				});
+				return;
+			}
+			let { data: { data: a } = {} } = r || {}, { total: o, records: s } = a || {};
+			k.value.total = Number(o), S.value = await he(s), !s || !s.length ? b.value = R.empty : b.value = R.success, q(), l("page-loaded", a);
+		}, q = () => {
+			ne(() => {
+				var e;
+				(e = g.value) == null || e.doLayout();
+			});
+		}, J = async (e) => {
+			await K(e);
+		}, Y = () => {
+			k.value = {
+				total: 0,
+				page: 1,
+				limit: t.pageSize,
+				ascs: t.ascs,
+				descs: t.descs
+			};
+		}, me = (e, t) => {
+			g.value.setScrollTop(e), g.value.setScrollLeft(t);
+		}, X = (e, t) => {
+			var n;
+			(n = g.value) == null || n.toggleRowSelection(e, t);
+		}, he = async (e) => {
+			if (!e) return [];
+			let n = [...e];
+			for (let e of n) for (let n of t.dicOptions) if (e[`$${n.prop}`] = e[n.prop], n.dicData) {
+				var r;
+				e[n.prop] = ((r = n.dicData.find((t) => t.modelValue === e[n.prop])) == null ? void 0 : r.label) || e[n.prop];
+			} else e[n.prop] = await i(n.dicType, e[n.prop]);
+			return n;
+		}, Z = () => {
+			T.value = !T.value;
+		}, Q = (e) => {
+			var n;
+			return !(e != null && e.disabled) && !((n = t.disabledRowKeys) != null && n.includes(e == null ? void 0 : e[t.rowKey]));
+		};
+		t.useVisibilityChange && ee({ onPageVisible: () => {
+			J(!1);
+		} }), oe("reloadTableView", (e) => {
+			e === t.viewId && K();
+		}), D(() => t.url, Y), D(() => t.api, Y), D(() => t.data, K), D(() => I.value, K, {
+			deep: !0,
+			immediate: t.immediate
+		});
+		let $ = d(() => {
+			let e = [];
+			if (f.default) {
+				var n;
+				let t = r((n = f.default) == null ? void 0 : n.call(f));
+				for (let n = 0; n < t.length; n++) {
+					let { props: r, children: i } = t[n];
+					if (!r) continue;
+					let { sortable: a, prop: o, fixed: s, ...c } = r, l = {
+						...c,
+						prop: o,
+						allowSort: a !== !1
+					};
+					i && (l.headerSlot = i.header, l.defaultSlot = i.default, l.expandSlot = i.expand, l.iconSlot = i["filter-icon"]), e.push(l);
+				}
+			} else if (t.columns) for (let n = 0; n < t.columns.length; n++) {
+				let { prop: r, sortable: i, fixed: a, ...o } = t.columns[n], s = {
+					...o,
+					prop: r,
+					allowSort: i !== !1
+				};
+				_.value && (s.hide = _.value.hideProps[r], s.filterable = _.value.filterableProps[r], s.sortable = _.value.sortableProps[r] === !0, s.fixed = a || _.value.fixedProps[r]), e.push(s);
+			}
+			return e;
+		});
+		y(() => {
+			U();
+		}), h({
+			records: S,
+			getPage: K,
+			refresh: J,
+			reload: Y,
+			doLayout: q,
+			clearSelection: W,
+			toggleRowSelection: X,
+			toggleSettings: Z,
+			currentRow: w,
+			getPageQuery: G,
+			tableColumns: $
+		}), x(o, {
+			records: S,
+			getPage: K,
+			refresh: J,
+			reload: Y,
+			doLayout: q,
+			clearSelection: W,
+			toggleRowSelection: X,
+			toggleSettings: Z
+		});
+		let { autoBindProps: ge, listeners: _e } = e(t, { predicate: ce });
+		return () => {
+			var e;
+			let n = w.value && w.value[u["row-key"] || t.rowKey || "id"] === (w.value && t.rowKey ? w.value[t.rowKey] : (e = w.value) == null ? void 0 : e.id);
+			return m("div", {
+				class: [
+					"pageable-table",
+					{ "auto-height": t.autoHeight },
+					u.class
+				],
+				style: u.style
+			}, [m("div", { class: "pageable-table-wrapper" }, [
+				f.toolbar && f.toolbar({ selectedRows: O.value }),
+				m(M, v(_e.value, ge.value, {
+					ref: "table",
+					data: S.value,
+					class: ["flex-item", { "header-bold": t.headerBold }],
+					border: t.border,
+					stripe: !0,
+					size: "default",
+					height: t.autoHeight ? null : "auto",
+					onScroll: H,
+					onSortChange: de,
+					onRowDblclick: z,
+					onRowClick: B,
+					onCellClick: V,
+					onCurrentChange: fe,
+					onSelectionChange: pe
+				}), {
+					default: () => {
+						let e = [];
+						if (t.multiple && t.selection && e.push(m(N, {
+							key: "selection",
+							type: "selection",
+							selectable: Q,
+							width: t.selectionWidth,
+							align: "center"
+						}, null)), !t.multiple && t.selection && e.push(m(N, {
+							key: "single-selection",
+							type: "single-selection",
+							"class-name": "single-select-column",
+							width: t.selectionWidth,
+							align: "center"
+						}, {
+							header: () => m(j, {
+								modelValue: !!w.value,
+								label: !0
+							}, { default: () => [m("span", null, null)] }),
+							default: ({ row: e }) => m(j, {
+								label: !0,
+								disabled: !Q(e),
+								modelValue: n
+							}, { default: () => [m("span", null, null)] })
+						})), t.index && e.push(m(N, {
+							key: "index",
+							type: "index",
+							label: "序号",
+							width: L.value,
+							align: "center"
+						}, { default: ({ $index: e }) => (k.value.page - 1) * k.value.limit + e + 1 || e + 1 })), $.value.length > 0) for (let t = 0; t < $.value.length; t++) {
+							let n = $.value[t];
+							if (n.hide) continue;
+							let { prop: r, headerSlot: i, defaultSlot: a, expandSlot: o, iconSlot: s, ...c } = n;
+							e.push(m(F, v(c, { prop: r }), {
+								default: f[r] ? ({ row: e }) => f[r]({ row: e }) : a,
+								header: i,
+								expand: o,
+								"filter-icon": s
+							}));
+						}
+						else e.push(m(N, {
+							key: "default",
+							label: "点击表格行复制模板"
+						}, { default: ({ row: e }) => m("pre", {
+							class: "pointer",
+							onClick: () => ue(e)
+						}, [JSON.stringify(e, null, "	")]) }));
+						return e;
+					},
+					empty: () => f.empty ? f.empty() : m(te, null, [
+						b.value === R.loading && m("span", { class: "pageable-table-loading" }, [m("i", { class: "table-status-icon el-icon-loading" }, null), p("加载中...")]),
+						b.value === R.error && m(s, {
+							class: "pageable-table-error",
+							onClick: J
+						}, { default: () => [m("i", { class: "table-status-icon el-icon-error" }, null), p("加载失败，点击重试！")] }),
+						b.value !== R.loading && b.value !== R.error && m(ie, null, null)
+					]),
+					append: f.append
+				}),
+				t.paging && m(ae, {
+					"current-page": k.value.page,
+					"onUpdate:current-page": (e) => k.value.page = e,
+					"hide-on-single-page": t.hideOnSinglePage,
+					"page-size": k.value.limit,
+					"onUpdate:page-size": (e) => k.value.limit = e,
+					total: k.value.total,
+					"page-sizes": [
+						10,
+						25,
+						50,
+						100,
+						500,
+						1e3,
+						2e3
+					],
+					class: "flex-not-shrink",
+					background: !0,
+					layout: "total, sizes, prev, pager, next, jumper"
+				}, null),
+				m(se, {
+					ref: "settingPanel",
+					modelValue: T.value,
+					"onUpdate:modelValue": (e) => T.value = e,
+					columns: $.value
+				}, null)
+			]), m(c, { onNotify: q }, null)]);
+		};
+	}
+};
+//#endregion
+export { z as t };

package/chunks/{6yfBZFOB.mjs → DitpKWMd.mjs}

@@ -1,5 +1,5 @@
-import { i as e, n as t } from "./D_qiRmiE.mjs";
-import { n, t as r } from "./CJdkjadi.mjs";
+import { i as e, n as t } from "./D3mFJzGr.mjs";
+import { n, t as r } from "./KuAMIZnG.mjs";
 import i from "../x-input-tag/index.mjs";
 import { createVNode as a, mergeProps as o } from "vue";
 //#region src/components/form/props/input-tag.ts
@@ -41,7 +41,8 @@ var s = {
 			emit: n,
 			slots: r,
 			attrs: s,
-			predicate: l
+			predicate: l,
+			block: t.block === void 0 ? !0 : t.block
 		});
 		return () => u({ vNodes: a(i, o(p.value, m.value, {
 			style: "width: 100%",

package/chunks/{bFbPPcdq.mjs → DkXlFWjs.mjs}

@@ -1,5 +1,5 @@
-import { n as e } from "./D_qiRmiE.mjs";
-import { n as t, t as n } from "./CabldOLo.mjs";
+import { n as e } from "./D3mFJzGr.mjs";
+import { n as t, t as n } from "./v-O82KSn.mjs";
 import { createVNode as r, isVNode as i, mergeProps as a, useModel as o } from "vue";
 //#region src/components/form/FormInputPhoneNumber.vue?vue&type=script&lang.jsx
 function s(e) {

package/chunks/{DKwp6AMl.mjs → GMFHxPJq.mjs}

@@ -1,5 +1,5 @@
-import { i as e, n as t } from "./D_qiRmiE.mjs";
-import { n, t as r } from "./CJdkjadi.mjs";
+import { i as e, n as t } from "./D3mFJzGr.mjs";
+import { n, t as r } from "./KuAMIZnG.mjs";
 import { createVNode as i, mergeProps as a } from "vue";
 import { ElTimePicker as o } from "element-plus/es";
 //#region src/components/form/props/time.ts

package/chunks/{BqWvBF14.mjs → JKFepPeL.mjs}

@@ -1,6 +1,6 @@
 import { f as e } from "./DcTVYqeJ.mjs";
-import { o as t, r as n } from "./D_qiRmiE.mjs";
-import { n as r } from "./CJdkjadi.mjs";
+import { o as t, r as n } from "./D3mFJzGr.mjs";
+import { n as r } from "./KuAMIZnG.mjs";
 import { createVNode as i, isVNode as a, mergeProps as o } from "vue";
 import { ElImage as s } from "element-plus/es";
 //#region src/components/form/props/image.ts

package/chunks/{CJdkjadi.mjs → KuAMIZnG.mjs}

@@ -1,4 +1,4 @@
-import { c as e, s as t } from "./D_qiRmiE.mjs";
+import { c as e, s as t } from "./D3mFJzGr.mjs";
 //#region src/components/form/props/common.ts
 var n = {
 	...e,