@zboson/ui 0.0.0-stage → 0.0.2

package/dist/ref-table/RefTable.js

@@ -0,0 +1,608 @@
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { getAttrStyleAndClass } from "../_util/hooks/useMergeSemantic.js";
+import { getSlotPropsFnRun } from "../_util/tools.js";
+import useCSSVarCls from "../config-provider/hooks/useCSSVarCls.js";
+import button_default from "../button/index.js";
+import checkbox_default from "../checkbox/index.js";
+import Divider from "../divider/index.js";
+import Space from "../space/index.js";
+import Popconfirm from "../popconfirm/index.js";
+import InternalTable from "../table/index.js";
+import ClickCell_default from "./cells/ClickCell.js";
+import EditableCell_default from "./cells/EditableCell.js";
+import DateCell_default from "./cells/DateCell.js";
+import HPDictRefCell_default from "./cells/HPDictRefCell.js";
+import ListCell_default from "./cells/ListCell.js";
+import NumberCell_default from "./cells/NumberCell.js";
+import RefCell_default from "./cells/RefCell.js";
+import SelectCell_default from "./cells/SelectCell.js";
+import TextAreaCell_default from "./cells/TextAreaCell.js";
+import style_default from "./style/index.js";
+import { Fragment, computed, createVNode, defineComponent, isVNode, mergeProps, ref } from "vue";
+import { clsx } from "@v-c/util";
+import { omit } from "es-toolkit";
+//#region src/ref-table/RefTable.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const builtInCells = /* @__PURE__ */ new Set([
+	"refcell",
+	"hpdictrefcell",
+	"editablecell",
+	"numbercell",
+	"selectcell",
+	"datecell",
+	"textareacell",
+	"clickcell",
+	"checkboxcell",
+	"dictcell",
+	"listcell",
+	"operation",
+	"buttoncell"
+]);
+function deepEqual(a, b) {
+	if (a === b) return true;
+	if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) return false;
+	const keysA = Object.keys(a);
+	const keysB = Object.keys(b);
+	if (keysA.length !== keysB.length) return false;
+	return keysA.every((key) => deepEqual(a[key], b[key]));
+}
+function preciseSum(values) {
+	const factor = 10 ** values.reduce((max, value) => Math.max(max, String(value).split(".")[1]?.length ?? 0), 0);
+	return values.reduce((sum, value) => sum + Math.round(value * factor), 0) / factor;
+}
+const RefTable = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit, expose }) => {
+	const { direction, class: contextClassName, style: contextStyle, prefixCls } = useComponentBaseConfig("refTable", props, [], "ref-table");
+	const [hashId, cssVarCls] = style_default(prefixCls, useCSSVarCls(prefixCls));
+	const allEdit = ref(false);
+	const innerIndex = ref(-1);
+	let clickTimer;
+	const currentIndex = computed(() => props.selectIndex ?? -1);
+	expose({
+		getSubmitData,
+		getNewData,
+		getUpdateData,
+		getDeleteData
+	});
+	function assertPrimaryKey() {
+		if (!props.primaryKey) throw new Error("PrimaryKey未设置");
+	}
+	function getNewData() {
+		assertPrimaryKey();
+		return (props.dataSource ?? []).filter((item) => item[props.primaryKey] == null || item[props.primaryKey] === "");
+	}
+	function getUpdateData() {
+		assertPrimaryKey();
+		const origin = props.originDataSource ?? [];
+		return (props.dataSource ?? []).filter((item) => !origin.some((originItem) => deepEqual(originItem, item))).filter((item) => item[props.primaryKey] != null && item[props.primaryKey] !== "");
+	}
+	function getDeleteData() {
+		assertPrimaryKey();
+		return (props.originDataSource ?? []).filter((originItem) => !(props.dataSource ?? []).some((item) => item[props.primaryKey] === originItem[props.primaryKey]));
+	}
+	function getSubmitData() {
+		return {
+			new: getNewData(),
+			update: getUpdateData(),
+			delete: getDeleteData()
+		};
+	}
+	function getIndex(index) {
+		const pagination = props.pagination;
+		if (pagination && typeof pagination === "object" && pagination.current && pagination.pageSize) return (pagination.current - 1) * pagination.pageSize + index;
+		return index;
+	}
+	function defaultRow(record, index = 0) {
+		return {
+			onClick: () => {
+				if (currentIndex.value === -1) innerIndex.value = index;
+				else {
+					emit("update:selectIndex", index);
+					emit("update:selectRecord", record);
+				}
+				if (clickTimer) clearTimeout(clickTimer);
+				clickTimer = setTimeout(() => {
+					emit("rowClick", record, index);
+				}, 300);
+			},
+			onDblclick: () => {
+				if (clickTimer) {
+					clearTimeout(clickTimer);
+					clickTimer = void 0;
+				}
+				if (currentIndex.value === -1) innerIndex.value = index;
+				else emit("update:selectIndex", index);
+				emit("rowDblClick", record, index);
+			}
+		};
+	}
+	function defaultClassName(_record, index) {
+		if (currentIndex.value === -1) return index === innerIndex.value ? "selectRow" : "";
+		return index === currentIndex.value ? "selectRow" : "";
+	}
+	function onCellChange(record, index, column, value) {
+		record[column.dataIndex] = value;
+		emit("cellchange", record, index, column.dataIndex, value);
+	}
+	function onCheckboxChange(record, index, column, event) {
+		const checked = event.target.checked;
+		record[column.dataIndex] = column.alias ? checked ? "Y" : "N" : checked;
+		emit("cellchange", record, getIndex(index), column.dataIndex, checked);
+	}
+	function onCellClick(record, index, column, value) {
+		emit("cellclick", record, getIndex(index), column.dataIndex, value);
+	}
+	function calcWhereParam(text, record, index, refOptions) {
+		if (typeof refOptions.whereParam === "function") return refOptions.whereParam(text, record, index);
+		return refOptions.whereParam;
+	}
+	function onRefCellChange(record, index, column, value, refdata) {
+		const refOptions = column.refOptions ?? {};
+		record[column.dataIndex] = value;
+		if (refOptions.refValue) record[refOptions.refValue] = refdata ? refdata[refOptions.refKey ?? "code"] : value;
+		if (refOptions.autoFill && refdata) refOptions.autoFill.forEach((item) => {
+			record[item.dataField] = refdata[item.refField];
+		});
+		emit("cellchange", record, index, column.dataIndex, refdata ? refdata[refOptions.refKey ?? "code"] : value, refdata);
+	}
+	function onDelete(index) {
+		emit("update:dataSource", (props.dataSource ?? []).filter((_item, i) => i !== index));
+	}
+	function renderOperationCell(record, index, column, text) {
+		const options = column.operationOptions;
+		const canEdit = column.slotEnable ? !!column.slotEnable("edit", text, record, index) : true;
+		const canDelete = column.slotEnable ? !!column.slotEnable("delete", text, record, index) : true;
+		const hidden = { display: "none" };
+		return createVNode(Fragment, null, [createVNode("span", { "style": canEdit ? void 0 : hidden }, [!allEdit.value ? createVNode("a", { "onClick": () => allEdit.value = true }, [options?.editText ?? "编辑"]) : createVNode("a", { "onClick": () => allEdit.value = false }, [options?.cancelEditText ?? "结束编辑"])]), (props.dataSource?.length ?? 0) > 0 && createVNode(Popconfirm, {
+			"okText": options?.deletePopconfirmOkText ?? "删除",
+			"cancelText": options?.deletePopconfirmCancelText ?? "取消",
+			"title": options?.deletePopconfirmTitle ?? "确定删除吗？",
+			"onConfirm": () => onDelete(getIndex(index))
+		}, { default: () => [createVNode(Divider, {
+			"type": "vertical",
+			"style": canEdit && canDelete ? void 0 : hidden
+		}, null), createVNode("a", {
+			"href": "javascript:;",
+			"style": canDelete ? void 0 : hidden
+		}, [options?.deleteText ?? "删除"])] })]);
+	}
+	function renderButtonCell(record, index, column, text) {
+		const buttons = column.buttons ?? [];
+		if (!buttons.length) return null;
+		const cellEnabled = column.slotEnable ? !!column.slotEnable(text, record, index) : true;
+		const renderButton = (button, key, disabled) => createVNode(button_default, {
+			"key": key,
+			"size": button.size,
+			"type": button.type,
+			"disabled": disabled,
+			"onClick": () => button.click?.(text, record, index),
+			"style": button.show && !button.show(text, record, index) ? { display: "none" } : void 0
+		}, { default: () => [button.icon, button.text] });
+		if (buttons.length > 1) {
+			let _slot;
+			return createVNode(Space, null, _isSlot(_slot = buttons.map((button, i) => renderButton(button, i))) ? _slot : { default: () => [_slot] });
+		}
+		return renderButton(buttons[0], 0, !cellEnabled);
+	}
+	function renderCellType(type, ctx) {
+		const { column, record, index, text } = ctx;
+		const cellPrefix = prefixCls.value;
+		const enable = (t, r, i) => column.slotEnable ? !!column.slotEnable(t, r, i) : true;
+		const devNode = props.devmode ? createVNode("div", { "class": `${cellPrefix}-devmode` }, [JSON.stringify(record)]) : null;
+		switch (type) {
+			case "refcell": {
+				if (devNode) return devNode;
+				const refOptions = column.refOptions ?? {};
+				return createVNode(RefCell_default, {
+					"prefixCls": cellPrefix,
+					"text": text,
+					"refvalue": record[refOptions.refValue],
+					"refid": refOptions.refid,
+					"whereParam": calcWhereParam(text, record, index, refOptions),
+					"refkey": refOptions.refKey,
+					"refshow": refOptions.refShow ?? "name",
+					"width": refOptions.width && refOptions.width > 0 ? refOptions.width : 0,
+					"enable": enable(text, record, index),
+					"uniedit": allEdit.value,
+					"dataSource": refOptions.dataSource,
+					"fetchData": refOptions.fetchData,
+					"onChange": (value, refdata) => onRefCellChange(record, index, column, value, refdata)
+				}, null);
+			}
+			case "hpdictrefcell":
+				if (devNode) return devNode;
+				return createVNode(HPDictRefCell_default, mergeProps({
+					prefixCls: cellPrefix,
+					text,
+					dicttype: column.dicttype,
+					enable: false,
+					uniedit: allEdit.value
+				}, { "onChange": (value) => onRefCellChange(record, index, column, value, null) }), null);
+			case "dictcell": return column.dicttype ? `${text}-${props.dicts?.[column.dicttype]?.[text] ?? ""}` : column.dictData?.[text];
+			case "editablecell": return createVNode(EditableCell_default, {
+				"prefixCls": cellPrefix,
+				"text": text,
+				"enable": enable(text, record, index),
+				"uniedit": allEdit.value,
+				"onChange": (value) => onCellChange(record, index, column, value)
+			}, null);
+			case "numbercell": return createVNode(NumberCell_default, {
+				"prefixCls": cellPrefix,
+				"text": text,
+				"enable": enable(text, record, index),
+				"uniedit": allEdit.value,
+				"options": column.numberOptions,
+				"onChange": (value) => onCellChange(record, index, column, value)
+			}, null);
+			case "selectcell": return createVNode(SelectCell_default, {
+				"prefixCls": cellPrefix,
+				"text": text,
+				"enable": enable(text, record, index),
+				"uniedit": allEdit.value,
+				"options": column.selectOptions,
+				"onChange": (value) => onCellChange(record, index, column, value)
+			}, null);
+			case "datecell": return createVNode(DateCell_default, {
+				"prefixCls": cellPrefix,
+				"text": text,
+				"enable": enable(text, record, index),
+				"uniedit": allEdit.value,
+				"options": column.dateOptions,
+				"onChange": (value) => onCellChange(record, index, column, value)
+			}, null);
+			case "textareacell": return createVNode(TextAreaCell_default, {
+				"prefixCls": cellPrefix,
+				"text": text,
+				"enable": enable(text, record, index),
+				"uniedit": allEdit.value,
+				"onChange": (value) => onCellChange(record, index, column, value)
+			}, null);
+			case "clickcell": return createVNode(ClickCell_default, {
+				"prefixCls": cellPrefix,
+				"text": text,
+				"enable": enable(text, record, index),
+				"onClick": () => onCellClick(record, index, column, text)
+			}, null);
+			case "checkboxcell": {
+				const enabled = enable(text, record, index);
+				return createVNode("div", { "class": clsx(`${cellPrefix}-checkbox`, { [`${cellPrefix}-checkbox-disabled`]: !enabled }) }, [createVNode(checkbox_default, {
+					"checked": column.alias ? text === "Y" : !!text,
+					"disabled": !enabled,
+					"onChange": (event) => onCheckboxChange(record, index, column, event)
+				}, null), !enabled && createVNode("div", { "class": `${cellPrefix}-checkbox-tooltip` }, [column.disableTooltip])]);
+			}
+			case "listcell": return createVNode(ListCell_default, {
+				text,
+				title: column.listOptions?.title ?? null,
+				titleSplitter: column.listOptions?.titleSplitter,
+				itemSplitter: column.listOptions?.itemSplitter,
+				dataType: column.listOptions?.dataType
+			}, null);
+			case "operation": return renderOperationCell(record, index, column, text);
+			case "buttoncell": return renderButtonCell(record, index, column, text);
+			default: return text;
+		}
+	}
+	function renderBodyCell(ctx) {
+		const cellType = ctx.column?.scopedSlots?.customRender;
+		if (cellType && builtInCells.has(cellType)) return renderCellType(cellType, ctx);
+		const userNode = getSlotPropsFnRun(slots, props, "bodyCell", true, ctx);
+		if (userNode != null) return userNode;
+		return ctx.text;
+	}
+	const summaryData = computed(() => {
+		const summary = props.summary;
+		if (!summary?.data) return {};
+		const result = {};
+		summary.data.forEach((dataIndex) => {
+			result[dataIndex] = preciseSum((props.dataSource ?? []).map((item) => +(item[dataIndex] ?? 0) || 0));
+		});
+		return result;
+	});
+	return () => {
+		const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
+		const tableProps = omit(props, [
+			"originDataSource",
+			"primaryKey",
+			"devmode",
+			"layout",
+			"summary",
+			"selectIndex",
+			"selectRecord",
+			"dicts",
+			"rootClass",
+			"prefixCls"
+		]);
+		const vslots = {
+			...slots,
+			bodyCell: renderBodyCell
+		};
+		if (props.summary) vslots.footer = () => {
+			const columns = props.columns ?? [];
+			const summary = props.summary;
+			return createVNode("table", null, [createVNode("tr", null, [columns.map((item, index) => createVNode("td", {
+				"key": index,
+				"style": {
+					width: item.width != null ? `${item.width}px` : "",
+					textAlign: item.align
+				}
+			}, [summary.data?.includes(item.dataIndex) ? summaryData.value[item.dataIndex] : index === 0 ? "合计" : ""]))])]);
+		};
+		return createVNode(InternalTable, mergeProps(tableProps, restAttrs, {
+			"class": clsx(prefixCls.value, contextClassName.value, props.rootClass, className, hashId.value, cssVarCls.value, { [`${prefixCls.value}-rtl`]: direction.value === "rtl" }),
+			"style": {
+				...contextStyle.value,
+				...style
+			},
+			"tableLayout": props.tableLayout ?? (props.layout === "auto" ? "auto" : "fixed"),
+			"pagination": props.pagination ?? false,
+			"rowKey": props.rowKey ?? ((_record, index) => index ?? 0),
+			"onRow": props.onRow ?? defaultRow,
+			"rowClassName": props.rowClassName ?? defaultClassName
+		}), vslots);
+	};
+}, {
+	props: {
+		columns: {
+			type: Array,
+			required: false
+		},
+		originDataSource: {
+			type: Array,
+			required: false
+		},
+		primaryKey: {
+			type: String,
+			required: false
+		},
+		devmode: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		layout: {
+			type: String,
+			required: false
+		},
+		summary: {
+			type: [Object, null],
+			required: false
+		},
+		selectIndex: {
+			type: Number,
+			required: false
+		},
+		selectRecord: { required: false },
+		dicts: {
+			type: Object,
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		dropdownPrefixCls: {
+			type: String,
+			required: false
+		},
+		dataSource: {
+			type: Array,
+			required: false
+		},
+		column: {
+			type: Object,
+			required: false
+		},
+		pagination: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		loading: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		size: {
+			type: [String, null],
+			required: false
+		},
+		bordered: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		locale: {
+			type: Object,
+			required: false
+		},
+		rowSelection: {
+			type: Object,
+			required: false
+		},
+		getPopupContainer: {
+			type: Function,
+			required: false
+		},
+		scroll: {
+			type: Object,
+			required: false
+		},
+		sortDirections: {
+			type: Array,
+			required: false
+		},
+		showSorterTooltip: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		virtual: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		rowKey: {
+			type: [
+				String,
+				Number,
+				Symbol,
+				Function
+			],
+			required: false
+		},
+		tableLayout: {
+			type: String,
+			required: false
+		},
+		expandable: {
+			type: Object,
+			required: false
+		},
+		indentSize: {
+			type: Number,
+			required: false
+		},
+		rowClassName: {
+			type: [String, Function],
+			required: false
+		},
+		title: {
+			type: Function,
+			required: false
+		},
+		footer: {
+			type: Function,
+			required: false
+		},
+		headerCell: {
+			type: Function,
+			required: false
+		},
+		bodyCell: {
+			type: Function,
+			required: false
+		},
+		caption: { required: false },
+		id: {
+			type: String,
+			required: false
+		},
+		showHeader: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		components: {
+			type: Object,
+			required: false
+		},
+		onRow: {
+			type: Function,
+			required: false
+		},
+		onHeaderRow: {
+			type: Function,
+			required: false
+		},
+		direction: {
+			type: String,
+			required: false
+		},
+		sticky: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		rowHoverable: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		tailor: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		getContainerWidth: {
+			type: Function,
+			required: false
+		},
+		measureRowRender: {
+			type: Function,
+			required: false
+		},
+		expandedRowKeys: {
+			type: Array,
+			required: false
+		},
+		defaultExpandedRowKeys: {
+			type: Array,
+			required: false
+		},
+		expandedRowRender: {
+			type: Function,
+			required: false
+		},
+		expandRowByClick: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		expandIcon: {
+			type: Function,
+			required: false
+		},
+		onExpand: {
+			type: Function,
+			required: false
+		},
+		onExpandedRowsChange: {
+			type: Function,
+			required: false
+		},
+		defaultExpandAllRows: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		expandIconColumnIndex: {
+			type: Number,
+			required: false
+		},
+		expandedRowClassName: {
+			type: Function,
+			required: false
+		},
+		childrenColumnName: {
+			type: String,
+			required: false
+		}
+	},
+	emits: [
+		"update:selectIndex",
+		"update:selectRecord",
+		"update:dataSource",
+		"rowClick",
+		"rowDblClick",
+		"cellchange",
+		"cellclick"
+	],
+	name: "ARefTable",
+	inheritAttrs: false
+});
+//#endregion
+export { RefTable as default };

package/dist/ref-table/cells/ClickCell.d.ts

@@ -0,0 +1,12 @@
+//#region src/ref-table/cells/ClickCell.d.ts
+interface ClickCellProps {
+  prefixCls?: string;
+  text?: string;
+  enable?: boolean;
+}
+interface ClickCellEmits {
+  click: () => void;
+}
+declare const _default: import("vue").DefineSetupFnComponent<ClickCellProps, ClickCellEmits, {}, ClickCellProps, import("vue").PublicProps>;
+//#endregion
+export { ClickCellEmits, ClickCellProps, _default as default };

package/dist/ref-table/cells/ClickCell.js

@@ -0,0 +1,29 @@
+import { computed, createVNode, defineComponent } from "vue";
+//#region src/ref-table/cells/ClickCell.tsx
+var ClickCell_default = /* @__PURE__ */ defineComponent((props, { emit }) => {
+	const prefix = computed(() => props.prefixCls ?? "ref-table");
+	return () => createVNode("div", {
+		"class": `${prefix.value}-cell`,
+		"onClick": () => props.enable && emit("click")
+	}, [createVNode("div", { "class": `${prefix.value}-cell-text` }, [props.text || " "])]);
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		text: {
+			type: String,
+			required: false
+		},
+		enable: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		}
+	},
+	emits: ["click"],
+	name: "ARefTableClickCell"
+});
+//#endregion
+export { ClickCell_default as default };

package/dist/ref-table/cells/DateCell.d.ts

@@ -0,0 +1,19 @@
+//#region src/ref-table/cells/DateCell.d.ts
+interface RefCellDateOptions {
+  timeSuffix?: string;
+  showTime?: boolean;
+  format?: string;
+}
+interface DateCellProps {
+  prefixCls?: string;
+  text?: string | null;
+  enable?: boolean;
+  uniedit?: boolean;
+  options?: RefCellDateOptions;
+}
+interface DateCellEmits {
+  change: (value: string | null) => void;
+}
+declare const _default: import("vue").DefineSetupFnComponent<DateCellProps, DateCellEmits, {}, DateCellProps, import("vue").PublicProps>;
+//#endregion
+export { DateCellEmits, DateCellProps, RefCellDateOptions, _default as default };