@ithinkdt/ui 4.0.16 → 4.0.18

package/auto-imports.js

@@ -14,8 +14,8 @@ export const UIComponents = [
         type: 'component',
         resolve(name) {
             return [
-                'DataTable', 'DataForm', 'DataFormActions', 'DataCustom', 'DataFilter', 'DataSelection', 'DataPagination',
-                'DataDescriptions', 'NCheckboxes', 'NRadios', 'NStateButton',
+                'DataTable', 'DataForm', 'DataFormActions', 'DataCustom', 'ViewProfile', 'DataFilter', 'DataSelection', 'DataPagination',
+                'DataDescriptions', 'NCheckboxes', 'NRadios', 'NStateButton', 'FullscreenButton', 'FullscreenWrapper',
             ].includes(name)
                 ? { name, from: '@ithinkdt/ui/components' }
                 : undefined
@@ -30,7 +30,10 @@ export const UI = [
     },
     {
         from: '@ithinkdt/ui/components',
-        imports: ['DataTable', 'DataForm', 'DataCustom', 'DataFilter', 'DataSelection', 'DataPagination', 'DataDescriptions'],
+        imports: [
+            'DataTable', 'DataForm', 'DataFormActions', 'DataCustom', 'ViewProfile', 'DataFilter', 'DataSelection', 'DataPagination',
+            'DataDescriptions', 'NCheckboxes', 'NRadios', 'NStateButton', 'FullscreenButton', 'FullscreenWrapper',
+        ],
     },
 ]
 

package/esm/{DataTable-DXZ3G4ZO.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-g3YmS-dM.js";
-import { l as s } from "./assets-bJgPKDh1.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 { 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,10 +141,10 @@ 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: 1
+			deep: 2
 		});
 		let T = p();
 		_(() => t.highlight, (e) => {
@@ -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 };