@ithinkdt/ui 4.0.17 → 4.0.19

package/esm/DataTable-2vtI02wP.js

@@ -0,0 +1,261 @@
+import e, { c as t, cB as n, cE as r, cM as i, useClsPrefix as a } from "./use-style.js";
+import { i as o } from "./directives-Chz4DK1u.js";
+import { C as s } from "./components-DLa9-kdK.js";
+import { t as c } from "./use-table-range-select-Da6t9Vlf.js";
+import { computed as l, createVNode as u, defineComponent as d, inject as f, isVNode as p, ref as m, shallowRef as h, toValue as g, useTemplateRef as _, watch as v, withDirectives as y } from "vue";
+import { toReactive as b, until as x } from "@vueuse/core";
+import { NButton as S, NDataTable as C, NFlex as w, NIcon as T, NTooltip as E, dataTableProps as D } from "ithinkdt-ui";
+import { PAGE_INJECTION as O } from "@ithinkdt/page";
+//#region src/components/DataTable.jsx
+function k(e) {
+	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !p(e);
+}
+function A(e, t) {
+	return (e ?? []).map((e) => {
+		let n = {
+			csvTitle: e.exportTitle,
+			...e,
+			title: () => {
+				let t = g(e.title), n = t && y(u("div", null, [t]), [[
+					o,
+					() => g(e.title),
+					void 0,
+					{ auto: !0 }
+				]]);
+				return e.tooltip ? u(w, {
+					size: 3,
+					wrap: !1,
+					inline: !0,
+					style: "max-width: 100%"
+				}, { default: () => [n, u(E, null, {
+					default: g(e.tooltip),
+					trigger: () => u(S, {
+						text: !0,
+						style: "font-size: 1.25em; opacity: 0.8"
+					}, { default: () => [u(T, null, { default: () => [u(s, null, null)] })] })
+				})] }) : n;
+			}
+		};
+		if (e.children?.length) n.children = A(e.children, t);
+		else {
+			e.hidden !== !0 && (n.width ??= 100, t.value += Number(n.width));
+			let r = e.render ?? ((e) => e);
+			e.ellipsis !== !1 && (n.ellipsis = !1, n.render = (...t) => {
+				let n = r(...t);
+				return n && (p(n) || ((function() {
+					return n;
+				})(), n = u("span", null, [n])), y(n, [[
+					o,
+					() => e.ellipsisTooltip ? e.ellipsisTooltip(...t) : n,
+					void 0,
+					{
+						auto: !0,
+						expandable: e.ellipsisExpandable,
+						[`ell${e.ellipsis}`]: !0
+					}
+				]]));
+			}, e.ellipsisTooltip === !0 && (n.ellipsisTooltip = r)), Object.assign(n, {
+				resizable: e.resizable !== !1,
+				sorter: e.sortable,
+				type: ["selection", "expand"].includes(e.type) ? e.type : void 0,
+				disabled: e.selectable ? (t) => e.selectable(t) === !1 : void 0
+			});
+		}
+		return n.key === "$actions" && (n.cellProps ??= () => ({ style: { padding: "0 2px" } })), n;
+	}).filter((e) => e?.hidden !== !0);
+}
+var j = /* @__PURE__ */ d({
+	name: "DataTable",
+	props: {
+		data: {
+			type: Array,
+			default: () => []
+		},
+		columns: {
+			type: Array,
+			default: () => []
+		},
+		keyField: { type: String },
+		sorter: {
+			type: Object,
+			default: () => ({})
+		},
+		selectedKeys: { type: Array },
+		rangeSelect: {
+			type: Boolean,
+			default: void 0
+		},
+		highlight: {
+			type: [
+				Boolean,
+				String,
+				Number,
+				Object
+			],
+			default: !0
+		},
+		highlightColor: String,
+		appear: {
+			type: String,
+			default: "normal"
+		},
+		rowClassName: D.rowClassName,
+		rowProps: D.rowProps,
+		maxHeight: [String, Number]
+	},
+	emits: [
+		"sort",
+		"select",
+		"custom",
+		"highlight"
+	],
+	setup(t, { slots: n, emit: r, expose: i }) {
+		let { keyField: o } = f(O), s = a(), d = `${s.value}-datatable`;
+		e("-datatable", M, s);
+		let p = _("table-ref"), g = ({ sortField: e, sortOrder: t } = {}, n) => {
+			e == n?.sortField && t == n?.sortOrder || p.value?.sort(e, t ? t + "end" : !1);
+		};
+		v(() => ({ ...t.sorter }), g, { deep: !0 });
+		let y = l(() => {
+			let e = t.keyField || o || "key";
+			return (t) => t[e];
+		}), S = h({
+			cache: [],
+			scrollToView(...e) {
+				S.value.cache.push(e);
+			}
+		});
+		x(p).changed().then(() => {
+			g(t.sorter);
+			let e = S.value.cache;
+			S.value = p.value, S.value.scrollToView = (e) => {
+				let n = t.data.findIndex((t) => y.value(t) === e);
+				if (n === -1) return;
+				let r = p.value.$el.querySelector(`.${d}__row-marker:nth-child(${n + 1})`);
+				p.value.scrollTo({
+					top: r.offsetTop,
+					behavior: "smooth"
+				});
+			};
+			for (let t of e) S.value.scrollToView(...t);
+		}), i(b(S));
+		let w = m(0), T = h([]);
+		v(() => t.columns, () => {
+			w.value = 0, T.value = A(t.columns, w);
+		}, {
+			immediate: !0,
+			deep: 2
+		});
+		let E = m();
+		v(() => t.highlight, (e) => {
+			E.value = typeof e == "boolean" ? null : e ?? null;
+		}, { immediate: !0 });
+		let D = l(() => (e, n) => [
+			t.rowClassName?.(e, n) || "",
+			`${d}__row-marker`,
+			E.value != null && y.value(e) === E.value ? `${d}__row-highlight` : ""
+		].join(" ")), j = l(() => (e, n) => {
+			let i = t.rowProps?.(e, n);
+			return {
+				...i,
+				"data-row-key": y.value(e),
+				onClick: (n) => {
+					let a = y.value(e);
+					t.highlight === !0 && (E.value = a), r("highlight", a), i?.onClick?.(n);
+				}
+			};
+		}), N = (e) => {
+			if (t.sorter) {
+				let { sortField: n, sortOrder: r } = t.sorter;
+				if (e?.columnKey == n && (e?.order ? e.order === r + "end" : !r)) return;
+			}
+			r("sort", {
+				sortField: e?.order ? e?.columnKey : void 0,
+				sortOrder: e?.order ? e.order.replace("end", "") : void 0
+			});
+		}, P = (e) => {
+			r("select", e);
+		}, F = (e, t, n) => {
+			r("custom", {
+				key: n.key,
+				width: e
+			});
+		}, { range: I, pause: L, resume: R } = c(p, {
+			immediate: t.rangeSelect,
+			clsPrefix: l(() => `${s.value}-`)
+		});
+		return v(() => t.rangeSelect, (e) => {
+			e ? R() : L();
+		}), () => u(C, {
+			ref: "table-ref",
+			class: [
+				d,
+				t.appear === "sticky" ? `${d}--sticky` : "",
+				I.value?.ing ? `${d}--cell-selecting` : ""
+			],
+			data: t.data,
+			columns: T.value,
+			rowKey: y.value,
+			tableLayout: "fixed",
+			scrollX: w.value,
+			rowClassName: D.value,
+			rowProps: j.value,
+			checkedRowKeys: t.selectedKeys,
+			style: { "--n-tr-highlight-color": t.highlightColor },
+			maxHeight: t.maxHeight ?? (t.appear === "sticky" ? "auto" : void 0),
+			onUpdateSorter: N,
+			onUpdateCheckedRowKeys: P,
+			onUnstableColumnResize: F
+		}, k(n) ? n : { default: () => [n] });
+	}
+}), M = /* @__PURE__ */ n("datatable", [
+	r("row-highlight", [t("& > td", { backgroundColor: "var(--n-tr-highlight-color, var(--n-merged-border-color)) !important" })]),
+	i("cell-selecting", { userSelect: "none" }),
+	n("cell-selected", { position: "relative" }, [
+		t("&:not(.n-data-table-td--fixed-right)::before, &:is(.n-data-table-td--fixed-right)::after", {
+			content: "' '",
+			position: "absolute",
+			zIndex: 2,
+			top: 0,
+			left: 0,
+			width: "100%",
+			height: "100%",
+			background: "color-mix(in srgb, var(--color-primary) 30%, transparent)",
+			borderStyle: "solid",
+			borderWidth: "1px",
+			borderTopColor: "var(--n-cell-selected-border-top-color, transparent)",
+			borderBottomColor: "var(--n-cell-selected-border-bottom-color, transparent)",
+			borderLeftColor: "var(--n-cell-selected-border-left-color, transparent)",
+			borderRightColor: "var(--n-cell-selected-border-right-color, transparent)"
+		}),
+		i("first-row", { "--n-cell-selected-border-top-color": "var(--color-primary)" }),
+		i("first-col", { "--n-cell-selected-border-left-color": "var(--color-primary)" }),
+		i("last-row", { "--n-cell-selected-border-bottom-color": "var(--color-primary)" }),
+		i("last-col", { "--n-cell-selected-border-right-color": "var(--color-primary)" })
+	]),
+	i("sticky", [
+		t(".n-data-table-base-table-header", {
+			position: "sticky",
+			top: "-1px",
+			zIndex: 10,
+			overflowY: "hidden"
+		}),
+		t(".n-data-table-base-table-body", { overflow: "initial" }, [t("& > .n-scrollbar-container", {
+			overflow: "initial",
+			overflowX: "scroll"
+		}), t("& > .n-scrollbar-rail--horizontal", {
+			position: "sticky",
+			bottom: "0"
+		})]),
+		t(".n-data-table-base-table:has(.n-data-table-empty) .n-data-table-base-table-header", {
+			scrollbarWidth: "thin",
+			overflowX: "auto"
+		}),
+		t(".n-data-table-td > *", {
+			verticalAlign: "middle",
+			contentVisibility: "auto"
+		})
+	])
+]);
+//#endregion
+export { j as DataTable };

package/esm/{components-DfV9ybsT.js → components-DLa9-kdK.js}

@@ -2162,6 +2162,6 @@ var Mt = /* @__PURE__ */ d({
 			});
 		};
 	}
-}), It = u(() => import("./DataTable-BvLINmq3.js").then((e) => e.DataTable));
+}), It = u(() => import("./DataTable-2vtI02wP.js").then((e) => e.DataTable));
 //#endregion
 export { Re as C, ot as S, gt as _, jt as a, pt as b, At as c, Tt as d, Ct as f, _t as g, yt as h, Mt as i, Ot as l, bt as m, Ft as n, Nt as o, X as p, Pt as r, $ as s, It as t, Et as u, Y as v, Le as w, ct as x, J as y };

package/esm/components.d.ts

@@ -227,6 +227,7 @@ export interface DataTableProps<Data extends {}, KeyField extends keyof Data>
     data?: ArrayLike<Data> | undefined
     keyField?: KeyField | undefined
     selectedKeys?: ArrayLike<Data[KeyField]> | undefined
+    rangeSelect?: boolean | undefined
     highlight?: boolean | Data[KeyField] | undefined
     highlightColor?: string | undefined
     appear?: 'normal' | 'sticky' | undefined

package/esm/components.js

@@ -1,2 +1,2 @@
-import { S as e, _ as t, a as n, b as r, c as i, d as a, f as o, g as s, h as c, i as l, l as u, m as d, n as f, o as p, p as m, r as h, s as g, t as _, u as v, v as y, w as b, x, y as S } from "./components-DfV9ybsT.js";
+import { S as e, _ as t, a as n, b as r, c as i, d as a, f as o, g as s, h as c, i as l, l as u, m as d, n as f, o as p, p as m, r as h, s as g, t as _, u as v, v as y, w as b, x, y as S } from "./components-DLa9-kdK.js";
 export { e as DataActions, x as DataCustom, r as DataDescriptions, s as DataFilter, t as DataForm, y as DataFormActions, d as DataLocaleInput, m as DataPagination, a as DataSelection, _ as DataTable, l as DtDeptRender, n as DtUserDept, p as DtUserRender, v as FullscreenButton, u as FullscreenWrapper, b as NCheckboxes, i as NRadios, f as NStateButton, h as StateButtonProps, o as ViewProfile, S as dataFormActionsProps, g as renderUsers, c as useLocaleEdit };

package/esm/composables.d.ts

@@ -1,10 +1,150 @@
+import { MaybeComputedElementRef, Pausable } from '@vueuse/core'
 import Sortable from 'sortablejs'
-import { MaybeRef, TemplateRef } from 'vue'
+import { InjectionKey, MaybeRef, ShallowRef, TemplateRef } from 'vue'
 
 export declare function useDataTableDrag<T>(
     tableRef: TemplateRef<HTMLElement>,
-    { data, onSort, ...options }: {
+    options: {
         data: MaybeRef<T[]>
         onSort: (info: { from: number, to: number }) => void
     } & Omit<Sortable.Options, 'onSort'>,
 ): void
+
+/**
+ * options for {@link useTableRangeSelect}
+ */
+export interface UseTableRangeSelectOptions {
+    /**
+     * 是否立即启用，默认值从 vue 依赖注入获取
+     */
+    immediate?: boolean
+    /**
+     * 是否复制到剪贴板，默认值从 vue 依赖注入获取
+     */
+    toClipboard?: MaybeRef<boolean | 'onCopy' | undefined>
+
+    /**
+     * 获取单元格内容，默认值从 vue 依赖注入获取
+     *
+     * @param cell - 单元格
+     * @returns 单元格内容
+     */
+    getCellContent?: (cell: HTMLTableCellElement) => string
+
+    /**
+     * 类名前缀
+     * @defaultValue ''
+     */
+    clsPrefix?: MaybeRef<string | undefined>
+
+    /**
+     * 鼠标按下回调
+     * @param event - 鼠标事件
+     * @returns false 阻止选择
+     */
+    onMousedown?: (event: MouseEvent, data: { tr: HTMLTableRowElement, td: HTMLTableCellElement, tbody: HTMLTableSectionElement }) => void | false
+
+    /**
+     * 选中回调
+     * @param data - 选中范围数据
+     * @returns 是否继续复制到剪贴板（toClipboard 为 'auto'）
+     */
+    onSelect?: (data: {
+        /**
+         * 选中范围的起始行
+         */
+        fromRow: number
+        /**
+         * 选中范围的起始列
+         */
+        fromCol: number
+        /**
+         * 选中范围的结束行
+         */
+        toRow: number
+        /**
+         * 选中范围的结束列
+         */
+        toCol: number
+        /**
+         * 获取选中范围的单元格内容
+         */
+        getContent: () => string[][]
+        /**
+         * tbody 元素
+         */
+        tbody: HTMLTableSectionElement
+    }) => void | false
+}
+
+export interface UseTableRangeSelectDefaultOptions {
+    /**
+     * 是否立即启用
+     * @defaultValue true
+     */
+    immediate?: MaybeRef<boolean>
+
+    /**
+     * 是否复制到剪贴板
+     * @defaultValue 'onCopy'
+     */
+    toClipboard?: MaybeRef<'auto' | 'onCopy' | false>
+
+    /**
+     * 获取单元格内容
+     * @defaultValue cell =&gt; cell.textContent
+     *
+     * @param cell - 单元格
+     * @returns 单元格内容
+     */
+    getCellContent?: (cell: HTMLTableCellElement) => string
+
+    /**
+     * 默认类名前缀
+     * @defaultValue ''
+     */
+    clsPrefix?: MaybeRef<string>
+}
+
+type UseTableRangeSelectFn = ((target: MaybeComputedElementRef, options?: UseTableRangeSelectOptions) => Pausable & {
+    range: Readonly<ShallowRef<{
+        /**
+         * 是否正在选择中
+         */
+        ing: boolean
+        /**
+         * 是否按下鼠标
+         */
+        mousedown: boolean
+        /**
+         * 选中范围的起始列
+         */
+        x0: number
+        /**
+         * 选中范围的起始行
+         */
+        y0: number
+        /**
+         * 选中范围的结束列
+         */
+        x1: number
+        /**
+         * 选中范围的结束行
+         */
+        y1: number
+    }>>
+}) & {
+    /**
+     * 默认选项从 vue 注入 Key
+     */
+    DEFAULT_OPTIONS: InjectionKey<UseTableRangeSelectDefaultOptions>
+}
+
+/**
+ * 使用表格范围选择
+ * - vue-composable
+ *
+ * @param target - 目标元素
+ * @param options - 配置
+ */
+export declare const useTableRangeSelect: UseTableRangeSelectFn & {}

package/esm/composables.js

@@ -1,14 +1,15 @@
-import { nextTick as e, ref as t, watch as n } from "vue";
-import { unrefElement as r } from "@vueuse/core";
-import { Sortable as i } from "sortablejs";
+import { t as e } from "./use-table-range-select-Da6t9Vlf.js";
+import { nextTick as t, ref as n, watch as r } from "vue";
+import { unrefElement as i } from "@vueuse/core";
+import { Sortable as a } from "sortablejs";
 //#region src/composables/use-data-table-drag.js
-function a(a, { data: o, onSort: s, ...c }) {
-	n([t(o), a], async ([t, n]) => {
-		if (t.length === 0) return;
-		await e();
-		let a = r(n)?.querySelector(".n-data-table-base-table-body .n-data-table-tbody");
-		if (!a) return;
-		let o = i.create(a, {
+function o(e, { data: o, onSort: s, ...c }) {
+	r([n(o), e], async ([e, n]) => {
+		if (e.length === 0) return;
+		await t();
+		let r = i(n)?.querySelector(".n-data-table-base-table-body .n-data-table-tbody");
+		if (!r) return;
+		let o = a.create(r, {
 			animation: 150,
 			...c,
 			onSort(e) {
@@ -24,4 +25,4 @@ function a(a, { data: o, onSort: s, ...c }) {
 	}, { immediate: !0 });
 }
 //#endregion
-export { a as useDataTableDrag };
+export { o as useDataTableDrag, e as useTableRangeSelect };

package/esm/page.js

@@ -1,5 +1,5 @@
 import { n as e } from "./use-i18n-BUP_StIp.js";
-import { _ as t, a as n, c as r, i, o as a, w as o } from "./components-DfV9ybsT.js";
+import { _ as t, a as n, c as r, i, o as a, w as o } from "./components-DLa9-kdK.js";
 import { computed as s, createVNode as c, defineAsyncComponent as l, defineComponent as u, h as d, isVNode as f, mergeProps as p, nextTick as m, ref as h, renderSlot as g, shallowRef as _, toValue as v, unref as y } from "vue";
 import { until as b, useClipboard as x } from "@vueuse/core";
 import { NButton as S, NCheckbox as C, NColorPicker as w, NDrawer as T, NDrawerContent as E, NFlex as D, NIcon as O, NInput as k, NInputNumber as A, NModal as j, NScrollbar as M, NSelect as N, NText as P, NUpload as F, useMessage as I } from "ithinkdt-ui";

package/esm/use-table-range-select-Da6t9Vlf.js

@@ -0,0 +1,111 @@
+import { computed as e, inject as t, readonly as n, ref as r, shallowRef as i, unref as a, watch as o } from "vue";
+import { onClickOutside as s, unrefElement as c, useClipboard as l, useEventListener as u } from "@vueuse/core";
+import { isNullish as d } from "@ithinkdt/common/object";
+//#region src/composables/use-table-range-select.js
+var f = Symbol();
+function p(p, m = {}) {
+	let h = i(), g = e(() => c(p)), _ = t(f, {}), v = e(() => a(m.clsPrefix) ?? a(_.clsPrefix) ?? ""), y = e(() => a(m.toClipboard) ?? a(_.toClipboard) ?? "onCopy"), b = m.getCellContent ?? _.getCellContent ?? ((e) => e.textContent), x = r(a(m.immediate) ?? a(_.immediate) ?? !0);
+	u(g, "mousedown", (e) => {
+		if (h.value &&= void 0, !x.value) return;
+		let t = e.target.closest("td"), n = t?.closest("tr"), r = n?.closest("tbody");
+		!t || !n || !r || m?.onMousedown?.(e, {
+			tr: n,
+			td: t,
+			tbody: r
+		}) === !1 || (h.value = {
+			ing: !1,
+			mousedown: !0,
+			x0: t.cellIndex,
+			y0: n.rowIndex
+		});
+	}, {
+		passive: !0,
+		capture: !0
+	}), u(g, "mousemove", (e) => {
+		if (!x.value || !h.value?.mousedown) return;
+		let t = e.target.closest("td"), n = t?.closest("tr"), r = n?.closest("tbody");
+		!t || !n || !r || !h.value.x1 && t.cellIndex === h.value.x0 && n.rowIndex === h.value.y0 || (h.value = {
+			...h.value,
+			ing: !0,
+			x1: t.cellIndex,
+			y1: n.rowIndex
+		}, globalThis.getSelection ? globalThis.getSelection().removeAllRanges() : document.selection && document.selection.empty());
+	}, {
+		passive: !0,
+		capture: !0
+	});
+	let { copy: S } = l({ legacy: !0 });
+	u("mouseup", () => {
+		if (!x.value || !h.value) return;
+		h.value = {
+			...h.value,
+			ing: !1,
+			mousedown: !1
+		};
+		let e = g.value?.querySelector("tbody"), { x0: t, x1: n, y0: r, y1: i } = h.value ?? {};
+		if (!m?.onSelect && y.value !== "auto" || !e || d(n)) return;
+		let [a, o] = [t, n].toSorted((e, t) => e - t), [s, c] = [r, i].toSorted((e, t) => e - t);
+		m?.onSelect?.({
+			fromRow: s,
+			fromCol: a,
+			toRow: c,
+			toCol: o,
+			getContent: C,
+			tbody: e
+		}) !== !1 && y.value === "auto" && S(C().map((e) => e.join("	")).join("\n")).catch(() => {
+			console.warn("[useTableRangeSelect] 复制到剪贴板失败");
+		});
+	}, {
+		passive: !0,
+		capture: !0
+	}), s(g, () => {
+		h.value &&= void 0;
+	});
+	let C = () => {
+		let e = g.value?.querySelector("tbody"), { x0: t, x1: n, y0: r, y1: i } = h.value ?? {};
+		if (!x.value || !e || d(n)) return [];
+		let [a, o] = [t, n].toSorted((e, t) => e - t), [s, c] = [r, i].toSorted((e, t) => e - t), l = [];
+		for (let t = s; t <= c; t++) {
+			let n = e.rows[t];
+			if (!n) continue;
+			let r = [];
+			for (let e = a; e <= o; e++) {
+				let i = n.cells[e];
+				if (i && t >= s && t <= c && e >= a && e <= o) {
+					let e = b(i) || "";
+					e = e.replace(/\t/g, " ").replace(/\r/g, "").replace(/\n/g, ""), r.push(e);
+				}
+			}
+			r.length > 0 && l.push(r);
+		}
+		return l;
+	};
+	return o([g, h], ([e, { x0: t, x1: n, y0: r, y1: i } = {}]) => {
+		let a = e?.querySelector("tbody");
+		if (!a) return;
+		let [o, s] = [t, n].toSorted((e, t) => e - t), [c, l] = [r, i].toSorted((e, t) => e - t);
+		for (let e = 0; e < a.rows.length; e++) {
+			let t = a.rows[e];
+			for (let n = 0; n < t.cells.length; n++) {
+				let r = t.cells[n];
+				r.classList.toggle(`${v.value}cell-selected`, e >= c && e <= l && n >= o && n <= s), r.classList.toggle(`${v.value}cell-selected--first-row`, e === c), r.classList.toggle(`${v.value}cell-selected--first-col`, n === o), r.classList.toggle(`${v.value}cell-selected--last-row`, e === l), r.classList.toggle(`${v.value}cell-selected--last-col`, n === s);
+			}
+		}
+	}), u(document, "copy", (e) => {
+		if (y.value !== "onCopy") return;
+		let t = C();
+		!x.value || t.length === 0 || (e.clipboardData.setData("text/plain", t.map((e) => e.join("	")).join("\n")), e.preventDefault());
+	}, { passive: !1 }), {
+		range: n(h),
+		isActive: n(x),
+		pause: () => {
+			x.value = !1, h.value = void 0;
+		},
+		resume: () => {
+			x.value = !0;
+		}
+	};
+}
+p.DEFAULT_OPTIONS = f;
+//#endregion
+export { p as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ithinkdt/ui",
-  "version": "4.0.17",
+  "version": "4.0.19",
   "type": "module",
   "license": "MIT",
   "description": "iThinkDT UI",
@@ -62,12 +62,12 @@
   "sideEffects": false,
   "dependencies": {
     "@vueuse/core": "^14.3.0",
-    "date-fns": "^4.3.0",
+    "date-fns": "^4.4.0",
     "vueuc": ">=0.4.65",
     "sortablejs": "^1.15.7",
     "@types/sortablejs": "^1.15.9",
     "nanoid": "^5.1.11",
-    "@ithinkdt/common": "^4.0.9"
+    "@ithinkdt/common": "^4.0.12"
   },
   "peerDependencies": {
     "@ithinkdt/page": ">=4.0",
@@ -89,11 +89,11 @@
     "ithinkdt-ui": "^1.9.4",
     "typescript": "~6.0.3",
     "unocss": "^66.7.0",
-    "vite": "^8.0.14",
-    "vue": "^3.5.34",
-    "vue-router": "^5.0.7",
-    "@vue/test-utils": "^2.4.10",
-    "@ithinkdt/page": "^4.0.20"
+    "vite": "^8.0.16",
+    "vue": "^3.5.35",
+    "vue-router": "^5.1.0",
+    "@vue/test-utils": "^2.4.11",
+    "@ithinkdt/page": "^4.0.22"
   },
   "scripts": {
     "dev": "vite build --watch",

package/esm/DataTable-BvLINmq3.js

@@ -1,221 +0,0 @@
-import e, { c as t, cB as n, cE as r, cM as i, useClsPrefix as a } from "./use-style.js";
-import { i as o } from "./directives-Chz4DK1u.js";
-import { C as s } from "./components-DfV9ybsT.js";
-import { computed as c, createVNode as l, defineComponent as u, inject as d, isVNode as f, ref as p, shallowRef as m, toValue as h, useTemplateRef as g, watch as _, withDirectives as v } from "vue";
-import { toReactive as y, until as b } from "@vueuse/core";
-import { NButton as x, NDataTable as S, NFlex as C, NIcon as w, NTooltip as T, dataTableProps as E } from "ithinkdt-ui";
-import { PAGE_INJECTION as D } from "@ithinkdt/page";
-//#region src/components/DataTable.jsx
-function O(e) {
-	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !f(e);
-}
-function k(e, t) {
-	return (e ?? []).map((e) => {
-		let n = {
-			csvTitle: e.exportTitle,
-			...e,
-			title: () => {
-				let t = h(e.title), n = t && v(l("div", null, [t]), [[
-					o,
-					() => h(e.title),
-					void 0,
-					{ auto: !0 }
-				]]);
-				return e.tooltip ? l(C, {
-					size: 3,
-					wrap: !1,
-					inline: !0,
-					style: "max-width: 100%"
-				}, { default: () => [n, l(T, null, {
-					default: h(e.tooltip),
-					trigger: () => l(x, {
-						text: !0,
-						style: "font-size: 1.25em; opacity: 0.8"
-					}, { default: () => [l(w, null, { default: () => [l(s, null, null)] })] })
-				})] }) : n;
-			}
-		};
-		if (e.children?.length) n.children = k(e.children, t);
-		else {
-			e.hidden !== !0 && (n.width ??= 100, t.value += Number(n.width));
-			let r = e.render ?? ((e) => e);
-			e.ellipsis !== !1 && (n.ellipsis = !1, n.render = (...t) => {
-				let n = r(...t);
-				return n && (f(n) || ((function() {
-					return n;
-				})(), n = l("span", null, [n])), v(n, [[
-					o,
-					() => e.ellipsisTooltip ? e.ellipsisTooltip(...t) : n,
-					void 0,
-					{
-						auto: !0,
-						expandable: e.ellipsisExpandable,
-						[`ell${e.ellipsis}`]: !0
-					}
-				]]));
-			}, e.ellipsisTooltip === !0 && (n.ellipsisTooltip = r)), Object.assign(n, {
-				resizable: e.resizable !== !1,
-				sorter: e.sortable,
-				type: ["selection", "expand"].includes(e.type) ? e.type : void 0,
-				disabled: e.selectable ? (t) => e.selectable(t) === !1 : void 0
-			});
-		}
-		return n.key === "$actions" && (n.cellProps ??= () => ({ style: { padding: "0 2px" } })), n;
-	}).filter((e) => e?.hidden !== !0);
-}
-var A = /* @__PURE__ */ u({
-	name: "DataTable",
-	props: {
-		data: {
-			type: Array,
-			default: () => []
-		},
-		columns: {
-			type: Array,
-			default: () => []
-		},
-		keyField: { type: String },
-		sorter: {
-			type: Object,
-			default: () => ({})
-		},
-		selectedKeys: { type: Array },
-		highlight: {
-			type: [
-				Boolean,
-				String,
-				Number,
-				Object
-			],
-			default: !0
-		},
-		highlightColor: String,
-		appear: {
-			type: String,
-			default: "normal"
-		},
-		rowClassName: E.rowClassName,
-		rowProps: E.rowProps,
-		maxHeight: [String, Number]
-	},
-	emits: [
-		"sort",
-		"select",
-		"custom",
-		"highlight"
-	],
-	setup(t, { slots: n, emit: r, expose: i }) {
-		let { keyField: o } = d(D), s = a(), u = `${s.value}-datatable`;
-		e("-datatable", j, s);
-		let f = g("table-ref"), h = ({ sortField: e, sortOrder: t } = {}, n) => {
-			e == n?.sortField && t == n?.sortOrder || f.value?.sort(e, t ? t + "end" : !1);
-		};
-		_(() => ({ ...t.sorter }), h, { deep: !0 });
-		let v = c(() => {
-			let e = t.keyField || o || "key";
-			return (t) => t[e];
-		}), x = m({
-			cache: [],
-			scrollToView(...e) {
-				this.cache.push(e);
-			}
-		});
-		b(f).changed().then(() => {
-			h(t.sorter);
-			let e = x.value.cache;
-			x.value = f.value, x.value.scrollToView = (e) => {
-				let n = t.data.findIndex((t) => v.value(t) === e);
-				if (n === -1) return;
-				let r = f.value.$el.querySelector(`.${u}__row-marker:nth-child(${n + 1})`);
-				f.value.scrollTo({
-					top: r.offsetTop,
-					behavior: "smooth"
-				});
-			};
-			for (let t of e) x.value.scrollToView(...t);
-		}), i(y(x));
-		let C = p(0), w = m([]);
-		_(() => t.columns, () => {
-			C.value = 0, w.value = k(t.columns, C);
-		}, {
-			immediate: !0,
-			deep: 2
-		});
-		let T = p();
-		_(() => t.highlight, (e) => {
-			T.value = typeof e == "boolean" ? null : e ?? null;
-		}, { immediate: !0 });
-		let E = c(() => (e, n) => [
-			t.rowClassName?.(e, n) || "",
-			`${u}__row-marker`,
-			T.value != null && v.value(e) === T.value ? `${u}__row-highlight` : ""
-		].join(" ")), A = c(() => (e, n) => {
-			let i = t.rowProps?.(e, n);
-			return {
-				...i,
-				"data-row-key": v.value(e),
-				onClick: (n) => {
-					let a = v.value(e);
-					t.highlight === !0 && (T.value = a), r("highlight", a), i?.onClick?.(n);
-				}
-			};
-		}), M = (e) => {
-			if (t.sorter) {
-				let { sortField: n, sortOrder: r } = t.sorter;
-				if (e?.columnKey == n && (e?.order ? e.order === r + "end" : !r)) return;
-			}
-			r("sort", {
-				sortField: e?.order ? e?.columnKey : void 0,
-				sortOrder: e?.order ? e.order.replace("end", "") : void 0
-			});
-		}, N = (e) => {
-			r("select", e);
-		}, P = (e, t, n) => {
-			r("custom", {
-				key: n.key,
-				width: e
-			});
-		};
-		return () => l(S, {
-			class: [u, t.appear === "sticky" ? `${u}--sticky` : ""],
-			data: t.data,
-			columns: w.value,
-			rowKey: v.value,
-			tableLayout: "fixed",
-			ref: "table-ref",
-			scrollX: C.value,
-			rowClassName: E.value,
-			rowProps: A.value,
-			checkedRowKeys: t.selectedKeys,
-			style: { "--n-tr-highlight-color": t.highlightColor },
-			maxHeight: t.maxHeight ?? (t.appear === "sticky" ? "auto" : void 0),
-			onUpdateSorter: M,
-			onUpdateCheckedRowKeys: N,
-			onUnstableColumnResize: P
-		}, O(n) ? n : { default: () => [n] });
-	}
-}), j = /* @__PURE__ */ n("datatable", [r("row-highlight", [t("& > td", { backgroundColor: "var(--n-tr-highlight-color, var(--n-merged-border-color)) !important" })]), i("sticky", [
-	t(".n-data-table-base-table-header", {
-		position: "sticky",
-		top: "-1px",
-		zIndex: 10,
-		overflowY: "hidden"
-	}),
-	t(".n-data-table-base-table-body", { overflow: "initial" }, [t("& > .n-scrollbar-container", {
-		overflow: "initial",
-		overflowX: "scroll"
-	}), t("& > .n-scrollbar-rail--horizontal", {
-		position: "sticky",
-		bottom: "0"
-	})]),
-	t(".n-data-table-base-table:has(.n-data-table-empty) .n-data-table-base-table-header", {
-		scrollbarWidth: "thin",
-		overflowX: "auto"
-	}),
-	t(".n-data-table-td > *", {
-		verticalAlign: "middle",
-		contentVisibility: "auto"
-	})
-])]);
-//#endregion
-export { A as DataTable };