@ithinkdt/ui 4.0.18 → 4.0.19

package/esm/{DataTable-CMFYAmRF.js → DataTable-2vtI02wP.js}

@@ -1,14 +1,14 @@
 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-BHfgt7FW.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 { useTableRangeSelect as D } from "@ithinkdt/common/composables";
+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]" && !f(e);
+	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !p(e);
 }
 function A(e, t) {
 	return (e ?? []).map((e) => {
@@ -16,23 +16,23 @@ function A(e, t) {
 			csvTitle: e.exportTitle,
 			...e,
 			title: () => {
-				let t = h(e.title), n = t && v(l("div", null, [t]), [[
+				let t = g(e.title), n = t && y(u("div", null, [t]), [[
 					o,
-					() => h(e.title),
+					() => g(e.title),
 					void 0,
 					{ auto: !0 }
 				]]);
-				return e.tooltip ? l(C, {
+				return e.tooltip ? u(w, {
 					size: 3,
 					wrap: !1,
 					inline: !0,
 					style: "max-width: 100%"
-				}, { default: () => [n, l(T, null, {
-					default: h(e.tooltip),
-					trigger: () => l(x, {
+				}, { default: () => [n, u(E, null, {
+					default: g(e.tooltip),
+					trigger: () => u(S, {
 						text: !0,
 						style: "font-size: 1.25em; opacity: 0.8"
-					}, { default: () => [l(w, null, { default: () => [l(s, null, null)] })] })
+					}, { default: () => [u(T, null, { default: () => [u(s, null, null)] })] })
 				})] }) : n;
 			}
 		};
@@ -42,9 +42,9 @@ function A(e, t) {
 			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 && (p(n) || ((function() {
 					return n;
-				})(), n = l("span", null, [n])), v(n, [[
+				})(), n = u("span", null, [n])), y(n, [[
 					o,
 					() => e.ellipsisTooltip ? e.ellipsisTooltip(...t) : n,
 					void 0,
@@ -64,7 +64,7 @@ function A(e, t) {
 		return n.key === "$actions" && (n.cellProps ??= () => ({ style: { padding: "0 2px" } })), n;
 	}).filter((e) => e?.hidden !== !0);
 }
-var j = /* @__PURE__ */ u({
+var j = /* @__PURE__ */ d({
 	name: "DataTable",
 	props: {
 		data: {
@@ -99,8 +99,8 @@ var j = /* @__PURE__ */ u({
 			type: String,
 			default: "normal"
 		},
-		rowClassName: E.rowClassName,
-		rowProps: E.rowProps,
+		rowClassName: D.rowClassName,
+		rowProps: D.rowProps,
 		maxHeight: [String, Number]
 	},
 	emits: [
@@ -110,58 +110,58 @@ var j = /* @__PURE__ */ u({
 		"highlight"
 	],
 	setup(t, { slots: n, emit: r, expose: i }) {
-		let { keyField: o } = d(O), s = a(), u = `${s.value}-datatable`;
+		let { keyField: o } = f(O), s = a(), d = `${s.value}-datatable`;
 		e("-datatable", M, 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);
+		let p = _("table-ref"), g = ({ sortField: e, sortOrder: t } = {}, n) => {
+			e == n?.sortField && t == n?.sortOrder || p.value?.sort(e, t ? t + "end" : !1);
 		};
-		_(() => ({ ...t.sorter }), h, { deep: !0 });
-		let v = c(() => {
+		v(() => ({ ...t.sorter }), g, { deep: !0 });
+		let y = l(() => {
 			let e = t.keyField || o || "key";
 			return (t) => t[e];
-		}), x = m({
+		}), S = h({
 			cache: [],
 			scrollToView(...e) {
-				this.cache.push(e);
+				S.value.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);
+		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 = f.value.$el.querySelector(`.${u}__row-marker:nth-child(${n + 1})`);
-				f.value.scrollTo({
+				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) x.value.scrollToView(...t);
-		}), i(y(x));
-		let C = p(0), w = m([]);
-		_(() => t.columns, () => {
-			C.value = 0, w.value = A(t.columns, C);
+			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 T = p();
-		_(() => t.highlight, (e) => {
-			T.value = typeof e == "boolean" ? null : e ?? null;
+		let E = m();
+		v(() => t.highlight, (e) => {
+			E.value = typeof e == "boolean" ? null : e ?? null;
 		}, { immediate: !0 });
-		let E = c(() => (e, n) => [
+		let D = l(() => (e, n) => [
 			t.rowClassName?.(e, n) || "",
-			`${u}__row-marker`,
-			T.value != null && v.value(e) === T.value ? `${u}__row-highlight` : ""
-		].join(" ")), j = c(() => (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": v.value(e),
+				"data-row-key": y.value(e),
 				onClick: (n) => {
-					let a = v.value(e);
-					t.highlight === !0 && (T.value = a), r("highlight", a), i?.onClick?.(n);
+					let a = y.value(e);
+					t.highlight === !0 && (E.value = a), r("highlight", a), i?.onClick?.(n);
 				}
 			};
 		}), N = (e) => {
@@ -180,25 +180,25 @@ var j = /* @__PURE__ */ u({
 				key: n.key,
 				width: e
 			});
-		}, { range: I, pause: L, resume: R } = D(f, {
+		}, { range: I, pause: L, resume: R } = c(p, {
 			immediate: t.rangeSelect,
-			clsPrefix: c(() => `${s.value}-`)
+			clsPrefix: l(() => `${s.value}-`)
 		});
-		return _(() => t.rangeSelect, (e) => {
+		return v(() => t.rangeSelect, (e) => {
 			e ? R() : L();
-		}), () => l(S, {
+		}), () => u(C, {
 			ref: "table-ref",
 			class: [
-				u,
-				t.appear === "sticky" ? `${u}--sticky` : "",
-				I.value?.ing ? `${u}--cell-selecting` : ""
+				d,
+				t.appear === "sticky" ? `${d}--sticky` : "",
+				I.value?.ing ? `${d}--cell-selecting` : ""
 			],
 			data: t.data,
-			columns: w.value,
-			rowKey: v.value,
+			columns: T.value,
+			rowKey: y.value,
 			tableLayout: "fixed",
-			scrollX: C.value,
-			rowClassName: E.value,
+			scrollX: w.value,
+			rowClassName: D.value,
 			rowProps: j.value,
 			checkedRowKeys: t.selectedKeys,
 			style: { "--n-tr-highlight-color": t.highlightColor },

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

@@ -2162,6 +2162,6 @@ var Mt = /* @__PURE__ */ d({
 			});
 		};
 	}
-}), It = u(() => import("./DataTable-CMFYAmRF.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.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-BHfgt7FW.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-BHfgt7FW.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.18",
+  "version": "4.0.19",
   "type": "module",
   "license": "MIT",
   "description": "iThinkDT UI",
@@ -67,7 +67,7 @@
     "sortablejs": "^1.15.7",
     "@types/sortablejs": "^1.15.9",
     "nanoid": "^5.1.11",
-    "@ithinkdt/common": "^4.0.10"
+    "@ithinkdt/common": "^4.0.12"
   },
   "peerDependencies": {
     "@ithinkdt/page": ">=4.0",