@ithinkdt/ui 4.0.17 → 4.0.18

package/esm/{DataTable-BvLINmq3.js → DataTable-CMFYAmRF.js}

@@ -1,15 +1,16 @@
 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 { 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 { PAGE_INJECTION as D } from "@ithinkdt/page";
+import { useTableRangeSelect as D } from "@ithinkdt/common/composables";
+import { PAGE_INJECTION as O } from "@ithinkdt/page";
 //#region src/components/DataTable.jsx
-function O(e) {
+function k(e) {
 	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !f(e);
 }
-function k(e, t) {
+function A(e, t) {
 	return (e ?? []).map((e) => {
 		let n = {
 			csvTitle: e.exportTitle,
@@ -35,7 +36,7 @@ function k(e, t) {
 				})] }) : n;
 			}
 		};
-		if (e.children?.length) n.children = k(e.children, t);
+		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);
@@ -63,7 +64,7 @@ function k(e, t) {
 		return n.key === "$actions" && (n.cellProps ??= () => ({ style: { padding: "0 2px" } })), n;
 	}).filter((e) => e?.hidden !== !0);
 }
-var A = /* @__PURE__ */ u({
+var j = /* @__PURE__ */ u({
 	name: "DataTable",
 	props: {
 		data: {
@@ -80,6 +81,10 @@ var A = /* @__PURE__ */ u({
 			default: () => ({})
 		},
 		selectedKeys: { type: Array },
+		rangeSelect: {
+			type: Boolean,
+			default: void 0
+		},
 		highlight: {
 			type: [
 				Boolean,
@@ -105,8 +110,8 @@ var A = /* @__PURE__ */ u({
 		"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 { keyField: o } = d(O), s = a(), u = `${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);
 		};
@@ -136,7 +141,7 @@ var A = /* @__PURE__ */ u({
 		}), i(y(x));
 		let C = p(0), w = m([]);
 		_(() => t.columns, () => {
-			C.value = 0, w.value = k(t.columns, C);
+			C.value = 0, w.value = A(t.columns, C);
 		}, {
 			immediate: !0,
 			deep: 2
@@ -149,7 +154,7 @@ var A = /* @__PURE__ */ u({
 			t.rowClassName?.(e, n) || "",
 			`${u}__row-marker`,
 			T.value != null && v.value(e) === T.value ? `${u}__row-highlight` : ""
-		].join(" ")), A = c(() => (e, n) => {
+		].join(" ")), j = c(() => (e, n) => {
 			let i = t.rowProps?.(e, n);
 			return {
 				...i,
@@ -159,7 +164,7 @@ var A = /* @__PURE__ */ u({
 					t.highlight === !0 && (T.value = a), r("highlight", a), i?.onClick?.(n);
 				}
 			};
-		}), M = (e) => {
+		}), N = (e) => {
 			if (t.sorter) {
 				let { sortField: n, sortOrder: r } = t.sorter;
 				if (e?.columnKey == n && (e?.order ? e.order === r + "end" : !r)) return;
@@ -168,54 +173,89 @@ var A = /* @__PURE__ */ u({
 				sortField: e?.order ? e?.columnKey : void 0,
 				sortOrder: e?.order ? e.order.replace("end", "") : void 0
 			});
-		}, N = (e) => {
+		}, P = (e) => {
 			r("select", e);
-		}, P = (e, t, n) => {
+		}, F = (e, t, n) => {
 			r("custom", {
 				key: n.key,
 				width: e
 			});
-		};
-		return () => l(S, {
-			class: [u, t.appear === "sticky" ? `${u}--sticky` : ""],
+		}, { range: I, pause: L, resume: R } = D(f, {
+			immediate: t.rangeSelect,
+			clsPrefix: c(() => `${s.value}-`)
+		});
+		return _(() => t.rangeSelect, (e) => {
+			e ? R() : L();
+		}), () => l(S, {
+			ref: "table-ref",
+			class: [
+				u,
+				t.appear === "sticky" ? `${u}--sticky` : "",
+				I.value?.ing ? `${u}--cell-selecting` : ""
+			],
 			data: t.data,
 			columns: w.value,
 			rowKey: v.value,
 			tableLayout: "fixed",
-			ref: "table-ref",
 			scrollX: C.value,
 			rowClassName: E.value,
-			rowProps: A.value,
+			rowProps: j.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] });
+			onUpdateSorter: N,
+			onUpdateCheckedRowKeys: P,
+			onUnstableColumnResize: F
+		}, k(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"
-	})
-])]);
+}), 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 { A as DataTable };
+export { j as DataTable };

package/esm/{components-DfV9ybsT.js → components-BHfgt7FW.js}

@@ -2162,6 +2162,6 @@ var Mt = /* @__PURE__ */ d({
 			});
 		};
 	}
-}), It = u(() => import("./DataTable-BvLINmq3.js").then((e) => e.DataTable));
+}), It = u(() => import("./DataTable-CMFYAmRF.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-BHfgt7FW.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/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-BHfgt7FW.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ithinkdt/ui",
-  "version": "4.0.17",
+  "version": "4.0.18",
   "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.10"
   },
   "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",