@ithinkdt/ui 4.0.0-600 → 4.0.0-700

package/dist/components.js

@@ -1,5 +1,2 @@
-import "./use-i18n-D-AJ8KbA.js";
-import "./use-style-DrH-89qR.js";
-import "./directives-CB8tcZsk.js";
-import { _ as dataFormActionsProps, a as DtUserRender, b as DataActions, c as DataTable, d as DataPagination, f as DataLocaleInput, g as DataFormActions, h as DataForm, i as DtUserDept, l as useDataTableDrag, m as DataFilter, n as StateButtonProps, o as renderUsers, p as useLocaleEdit, r as DtDeptRender, s as NRadios, t as NStateButton, u as DataSelection, v as DataDescriptions, x as NCheckboxes, y as DataCustom } from "./components-BMKQsJ4d.js";
+import { _ as dataFormActionsProps, a as DtUserRender, b as DataActions, c as DataTable, d as DataPagination, f as DataLocaleInput, g as DataFormActions, h as DataForm, i as DtUserDept, l as useDataTableDrag, m as DataFilter, n as StateButtonProps, o as renderUsers, p as useLocaleEdit, r as DtDeptRender, s as NRadios, t as NStateButton, u as DataSelection, v as DataDescriptions, x as NCheckboxes, y as DataCustom } from "./components-Yo5FKzwp.js";
 export { DataActions, DataCustom, DataDescriptions, DataFilter, DataForm, DataFormActions, DataLocaleInput, DataPagination, DataSelection, DataTable, DtDeptRender, DtUserDept, DtUserRender, NCheckboxes, NRadios, NStateButton, StateButtonProps, dataFormActionsProps, renderUsers, useDataTableDrag, useLocaleEdit };

package/dist/directives-RPqFovTo.js

@@ -0,0 +1,237 @@
+import { g as useStyle, i as cM, n as cB, r as cE, t as c } from "./use-style-DrH-89qR.js";
+import { Fragment, createVNode, defineComponent, h, nextTick, reactive, ref, shallowRef, toRef, watch } from "vue";
+import { promiseTimeout, useEventListener } from "@vueuse/core";
+import { NTooltip } from "ithinkdt-ui";
+import { nanoid } from "nanoid";
+import { debounce, throttle } from "@ithinkdt/common/fn";
+import { useElementIntersectionRect } from "@ithinkdt/common/composables";
+import { string2dom } from "@ithinkdt/common/dom";
+var SUPPORT_LINE_CLAMP = [
+	2,
+	3,
+	5
+], style$1 = /* @__PURE__ */ c([
+	c(({ props: g }) => `:where(span${g.bPrefix}tooltip-host)`, { display: "inline-block" }),
+	c(({ props: g }) => `:where(${g.bPrefix}tooltip-host)`, {
+		maxWidth: "100%",
+		whiteSpace: "nowrap",
+		overflow: "hidden",
+		textOverflow: "ellipsis"
+	}),
+	...SUPPORT_LINE_CLAMP.map((g) => c(({ props: L }) => `:where(${L.bPrefix}tooltip-ell${g}:not(${L.bPrefix}tooltip-expanded))`, {
+		display: "-webkit-box",
+		WebkitLineClamp: g,
+		WebkitBoxOrient: "vertical",
+		whiteSpace: "normal"
+	})),
+	c(({ props: g }) => `:where(${g.bPrefix}tooltip-expandable)`, { cursor: "pointer" }),
+	c(({ props: g }) => `:where(${g.bPrefix}tooltip-expanded)`, {
+		cursor: "pointer",
+		whiteSpace: "normal",
+		lineHeight: "1.25"
+	})
+]), Tooltip = /* @__PURE__ */ Symbol("tooltip-dir"), current = /* @__PURE__ */ shallowRef();
+function detactOverflow(g) {
+	let L = g.firstChild;
+	if (!L) return !1;
+	let R = L instanceof Text ? {
+		width: g.scrollWidth,
+		height: g.scrollHeight
+	} : L.getBoundingClientRect?.() ?? {
+		width: L.clientWidth,
+		height: L.clientHeight
+	};
+	return R.width > g.clientWidth + 1 || R.height > g.clientHeight + 2;
+}
+var _update, _current, clsPrefix$1;
+const TooltipDirectiveProvider = /* @__PURE__ */ defineComponent({
+	name: "TooltipDirectiveProvider",
+	props: { delay: {
+		type: Number,
+		default: 180
+	} },
+	setup(L) {
+		clsPrefix$1 = useStyle("-tooltip-directive", style$1);
+		let R = shallowRef(), z = reactive({
+			show: !1,
+			tip: void 0,
+			placement: "top",
+			x: 0,
+			y: 0
+		});
+		_update = async () => {
+			if (!current.value) return;
+			L.delay > 0 && await promiseTimeout(L.delay);
+			let g = current.value;
+			if (g?.classList.contains(`${clsPrefix$1.value}-tooltip-expanded`)) {
+				z.show = !1;
+				return;
+			}
+			let B = g?.[Tooltip];
+			if (!B) return;
+			B.binding.modifiers.expandable && g.classList.remove(`${clsPrefix$1.value}-tooltip-expandable`);
+			let V = B.tip;
+			if (R.value = typeof V == "function" ? V : () => V || g.attributes.getNamedItem("title") || g.textContent, !B.binding.modifiers || detactOverflow(g)) {
+				z.show = !0, B.binding.modifiers.expandable && g.classList.add(`${clsPrefix$1.value}-tooltip-expandable`);
+				let L = g.getBoundingClientRect();
+				switch (z.placement = Object.keys(B.binding.modifiers).find((g) => [
+					"top",
+					"right",
+					"left",
+					"bottom"
+				].find((L) => g.startsWith(L))) ?? "top", z.placement.split("-")[0]) {
+					case "top":
+						z.x = L.left + L.width / 2, z.y = L.top;
+						break;
+					case "right":
+						z.x = L.left + L.width, z.y = L.top + L.height / 2;
+						break;
+					case "left":
+						z.x = L.left, z.y = L.top + L.height / 2;
+						break;
+					case "bottom":
+						z.x = L.left + L.width / 2, z.y = L.bottom;
+						break;
+				}
+			} else z.show &&= !1;
+		};
+		let B = `ithinkdt-tooltip-${nanoid()}`, V = throttle((g) => {
+			!_current || _current.contains(g) || g.closest(`.${B}`) || (z.show = !1, current.value = void 0);
+		}, 100, { leading: !1 });
+		return useEventListener("mouseover", (g) => {
+			_current = current.value, V(g.target);
+		}, { capture: !0 }), () => createVNode(NTooltip, {
+			trigger: "manual",
+			show: !!current.value && z.show,
+			x: z.x,
+			y: z.y,
+			placement: z.placement
+		}, { default: () => [createVNode("div", { class: B }, [R.value?.()])] });
+	}
+});
+var _mouseenter = (g) => {
+	_current = void 0, current.value = g.target, _update?.();
+}, _mouseclick = (g) => {
+	g.target.classList.contains(`${clsPrefix$1.value}-tooltip-expandable`) ? (g.target.classList.remove(`${clsPrefix$1.value}-tooltip-expandable`), g.target.classList.add(`${clsPrefix$1.value}-tooltip-expanded`), _update()) : g.target.classList.contains(`${clsPrefix$1.value}-tooltip-expanded`) && (g.target.classList.remove(`${clsPrefix$1.value}-tooltip-expanded`), g.target.classList.add(`${clsPrefix$1.value}-tooltip-expandable`), _update());
+};
+const vTooltip = {
+	mounted(g, L) {
+		g[Tooltip] = {
+			binding: L,
+			tip: L.value
+		}, g.addEventListener("mouseenter", _mouseenter), L.modifiers.auto && g.classList.add(`${clsPrefix$1.value}-tooltip-host`), L.modifiers.expandable && g.addEventListener("click", _mouseclick);
+		for (let R of SUPPORT_LINE_CLAMP) L.modifiers[`ell${R}`] && g.classList.add(`${clsPrefix$1.value}-tooltip-ell${R}`);
+	},
+	updated(g, L) {
+		if (g[Tooltip]) {
+			g[Tooltip].binding = L, g[Tooltip].tip = L.value, g.classList.toggle(`${clsPrefix$1.value}-tooltip-host`, L.modifiers.auto);
+			for (let R of SUPPORT_LINE_CLAMP) g.classList.toggle(`${clsPrefix$1.value}-tooltip-ell${R}`, L.modifiers[`ell${R}`]);
+			L.modifiers.expandable ? g.addEventListener("click", _mouseclick) : g.removeEventListener("click", _mouseclick), _update();
+		}
+	},
+	beforeUnmount(g) {
+		current.value === g && (current.value = void 0), g[Tooltip] && (g.removeEventListener("mouseenter", _mouseenter), g.removeEventListener("click", _mouseclick), g.classList.remove(`${clsPrefix$1.value}-tooltip-host`, `${clsPrefix$1.value}-tooltip-expandable`, `${clsPrefix$1.value}-tooltip-expanded`, ...SUPPORT_LINE_CLAMP.map((g) => `${clsPrefix$1.value}-tooltip-ell${g}`)), delete g[Tooltip]);
+	}
+};
+var clsPrefix, isDark, style = /* @__PURE__ */ c([c(({ props: g }) => `:where(${g.bPrefix}spin-host)`, { position: "relative" }), cB("spin-directive", {
+	zIndex: "999999",
+	position: "absolute",
+	color: "var(--color-primary)",
+	display: "flex",
+	flexDirection: "column",
+	justifyContent: "center",
+	alignItems: "center",
+	gap: "4px",
+	willChange: "background-color",
+	backgroundColor: "rgb(var(--host-bg, 255 255 255) / 0)",
+	transition: "background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+}, [
+	cE("tip, icon", {
+		willChange: "opacity",
+		opacity: "0",
+		transition: "opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+	}),
+	cE("tip:empty", { display: "none" }),
+	cM("spining", { backgroundColor: "rgb(var(--host-bg, 255 255 255) / 0.5)" }, [cE("tip, icon", { opacity: "1" })])
+])]);
+const SpinDirectiveProvider = /* @__PURE__ */ defineComponent({
+	name: "SpinDirectiveProvider",
+	props: { dark: Boolean },
+	setup(L) {
+		return clsPrefix = useStyle("-spin-directive", style), isDark = toRef(L, "dark"), () => h(Fragment);
+	}
+});
+var Spin = /* @__PURE__ */ Symbol("spin-dir"), updateLoading = (g, { value: L, modifiers: R }) => {
+	if (g[Spin].loading.value = !!L, !g[Spin].loading.value) return;
+	let z = R.dark || !R.light && isDark.value;
+	g[Spin].spinEl.style.setProperty("--host-bg", z ? "0 0 0" : "255 255 255");
+};
+const vSpin = {
+	beforeMount(g) {
+		if (g.classList.add(`${clsPrefix.value}-spin-host`), g[Spin]) return;
+		let L = ref(!1), R = string2dom(`
+            <div class="${clsPrefix.value}-spin-directive">
+                <svg class="${clsPrefix.value}-spin-directive__icon" width="32" height="32" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+                    <g>
+                        <animateTransform attributeName="transform" type="rotate" values="0 100 100;270 100 100" begin="0s" dur="1.6s" fill="freeze" repeatCount="indefinite"></animateTransform>
+                        <circle fill="none" stroke="currentColor" stroke-width="18" stroke-linecap="round" cx="100" cy="100" r="92" stroke-dasharray="567" stroke-dashoffset="1848">
+                            <animateTransform attributeName="transform" type="rotate" values="0 100 100;135 100 100;450 100 100" begin="0s" dur="1.6s" fill="freeze" repeatCount="indefinite"></animateTransform>
+                            <animate attributeName="stroke-dashoffset" values="567;142;567" begin="0s" dur="1.6s" fill="freeze" repeatCount="indefinite"></animate>
+                        </circle>
+                    </g>
+                </svg>
+                <div class="${clsPrefix.value}-spin-directive__tip"></div>
+            </div>
+        `.trim()), z, { stop: B, update: V } = useElementIntersectionRect(g, (g) => {
+			z = g, Object.assign(R.style, {
+				left: 0,
+				top: 0,
+				width: z.width + "px",
+				height: z.height + "px"
+			});
+		}, { interval: 1e3 / 30 }), H, U = watch(L, debounce(() => {
+			if (L.value) H === void 0 && (clearTimeout(H), H = void 0), V(), g.append(R), requestAnimationFrame(() => {
+				L.value && R.classList.add(`${clsPrefix.value}-spin-directive--spining`);
+			});
+			else {
+				R.classList.remove(`${clsPrefix.value}-spin-directive--spining`);
+				let g = () => {
+					R.remove(), L && clearTimeout(L), L = null, R.removeEventListener("transitioncancel", g), R.removeEventListener("transitionend", g);
+				};
+				R.addEventListener("transitioncancel", g), R.addEventListener("transitionend", g);
+				let L = setTimeout(g, 300);
+			}
+		}, 30));
+		g[Spin] = {
+			loading: L,
+			spinEl: R,
+			updateTip: () => {
+				let L = R.querySelector(`.${clsPrefix.value}-spin-directive__tip`);
+				L.textContent = g.dataset.spinTip;
+			},
+			stop: () => {
+				B(), U();
+			}
+		};
+	},
+	mounted(g, L) {
+		g[Spin] && (updateLoading(g, L), g[Spin].updateTip(), !g[Spin].observer && nextTick().then(() => {
+			(g[Spin].observer = new MutationObserver((L) => {
+				for (let R of L) if (R.type === "attributes" && R.attributeName === "data-spin-tip") {
+					g[Spin].updateTip();
+					return;
+				}
+			})).observe(g, {
+				attributes: !0,
+				attributeFilter: ["data-spin-tip"]
+			});
+		}));
+	},
+	updated(g, L) {
+		g[Spin] && updateLoading(g, L);
+	},
+	beforeUnmount(g) {
+		g[Spin] && (g[Spin].loading.value = !1, g[Spin].stop(), g[Spin].observer?.disconnect(), delete g[Spin]);
+	}
+};
+export { vTooltip as i, vSpin as n, TooltipDirectiveProvider as r, SpinDirectiveProvider as t };

package/dist/directives.js

@@ -1,3 +1,2 @@
-import "./use-style-DrH-89qR.js";
-import { i as vTooltip, n as vSpin, r as TooltipDirectiveProvider, t as SpinDirectiveProvider } from "./directives-CB8tcZsk.js";
+import { i as vTooltip, n as vSpin, r as TooltipDirectiveProvider, t as SpinDirectiveProvider } from "./directives-RPqFovTo.js";
 export { SpinDirectiveProvider, TooltipDirectiveProvider, vSpin, vTooltip };

package/dist/index.js

@@ -1,6 +1,6 @@
 import { n as useI18n, t as UI_I18N_INJECTION } from "./use-i18n-D-AJ8KbA.js";
 import { g as useStyle, i as cM, n as cB, r as cE, t as c } from "./use-style-DrH-89qR.js";
-import { i as vTooltip, n as vSpin, r as TooltipDirectiveProvider, t as SpinDirectiveProvider } from "./directives-CB8tcZsk.js";
+import { i as vTooltip, n as vSpin, r as TooltipDirectiveProvider, t as SpinDirectiveProvider } from "./directives-RPqFovTo.js";
 import { Fragment, computed, createVNode, defineComponent, inject, isVNode, mergeProps, provide, reactive, ref, renderSlot, shallowRef, toRef, toValue, unref, useTemplateRef, watch, withDirectives } from "vue";
 import { computedAsync, promiseTimeout, useElementHover, useElementSize, useEventListener, useFullscreen, watchDebounced } from "@vueuse/core";
 import { NAvatar, NBadge, NBreadcrumb, NBreadcrumbItem, NButton, NDrawer, NDrawerContent, NDropdown, NEmpty, NIcon, NList, NListItem, NMenu, NPagination, NPopover, NScrollbar, NText, NThing, useThemeVars } from "ithinkdt-ui";
@@ -303,8 +303,7 @@ var style = /* @__PURE__ */ c([
 		gridArea: "header",
 		overflow: "hidden",
 		zIndex: 2,
-		height: "var(--app-header-height, 44px)",
-		zIndex: "2"
+		height: "var(--app-header-height, 44px)"
 	}),
 	cB("sider", {
 		gridArea: "sider",