@ithinkdt/ui 4.0.1 → 4.0.3

package/dist/components.js

@@ -1,2 +1,2 @@
-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-BXPJvdEe.js";
-export { DataActions, DataCustom, DataDescriptions, DataFilter, DataForm, DataFormActions, DataLocaleInput, DataPagination, DataSelection, DataTable, DtDeptRender, DtUserDept, DtUserRender, NCheckboxes, NRadios, NStateButton, StateButtonProps, dataFormActionsProps, renderUsers, useDataTableDrag, useLocaleEdit };
+import { _ as e, a as t, b as n, c as r, d as i, f as a, g as o, h as s, i as c, l, m as u, n as d, o as f, p, r as m, s as h, t as g, u as _, v, x as y, y as b } from "./components-Blh7O5zj.js";
+export { n as DataActions, b as DataCustom, v as DataDescriptions, u as DataFilter, s as DataForm, o as DataFormActions, a as DataLocaleInput, i as DataPagination, _ as DataSelection, r as DataTable, m as DtDeptRender, c as DtUserDept, t as DtUserRender, y as NCheckboxes, h as NRadios, g as NStateButton, d as StateButtonProps, e as dataFormActionsProps, f as renderUsers, l as useDataTableDrag, p as useLocaleEdit };

package/dist/directives-DXNnV4xc.js

@@ -0,0 +1,240 @@
+import e, { c as t, cB as n, cE as r, cM as i } from "./use-style.js";
+import { Fragment as a, createVNode as o, defineComponent as s, h as c, nextTick as l, reactive as u, ref as d, shallowRef as f, toRef as p, watch as m } from "vue";
+import { promiseTimeout as h, useEventListener as g } from "@vueuse/core";
+import { NTooltip as _ } from "ithinkdt-ui";
+import { nanoid as v } from "nanoid";
+import { debounce as y, throttle as b } from "@ithinkdt/common/fn";
+import { useElementIntersectionRect as x } from "@ithinkdt/common/composables";
+import { string2dom as S } from "@ithinkdt/common/dom";
+var C = [
+	2,
+	3,
+	5
+], w = t([
+	t(({ props: e }) => `:where(span${e.bPrefix}tooltip-host)`, { display: "inline-block" }),
+	t(({ props: e }) => `:where(${e.bPrefix}tooltip-host)`, {
+		maxWidth: "100%",
+		whiteSpace: "nowrap",
+		overflow: "hidden",
+		textOverflow: "ellipsis"
+	}),
+	...C.map((e) => t(({ props: t }) => `:where(${t.bPrefix}tooltip-ell${e}:not(${t.bPrefix}tooltip-expanded))`, {
+		display: "-webkit-box",
+		WebkitLineClamp: e,
+		WebkitBoxOrient: "vertical",
+		whiteSpace: "normal"
+	})),
+	t(({ props: e }) => `:where(${e.bPrefix}tooltip-expandable)`, { cursor: "pointer" }),
+	t(({ props: e }) => `:where(${e.bPrefix}tooltip-expanded)`, {
+		cursor: "pointer",
+		whiteSpace: "normal",
+		lineHeight: "1.25"
+	})
+]), T = Symbol("tooltip-dir"), E = f();
+function D(e) {
+	let t = e.firstChild;
+	if (!t) return !1;
+	let n = t instanceof Text ? {
+		width: e.scrollWidth,
+		height: e.scrollHeight
+	} : t.getBoundingClientRect?.() ?? {
+		width: t.clientWidth,
+		height: t.clientHeight
+	};
+	return n.width >= e.clientWidth + 1 || n.height >= e.clientHeight + 2;
+}
+var O, k, A;
+const j = s({
+	name: "TooltipDirectiveProvider",
+	props: { delay: {
+		type: Number,
+		default: 180
+	} },
+	setup(t) {
+		A = e("-tooltip-directive", w);
+		let n = f(), r = u({
+			show: !1,
+			tip: void 0,
+			placement: "top",
+			x: 0,
+			y: 0
+		});
+		O = async () => {
+			if (!E.value) return;
+			t.delay > 0 && await h(t.delay);
+			let e = E.value;
+			if (e?.classList.contains(`${A.value}-tooltip-expanded`)) {
+				r.show = !1;
+				return;
+			}
+			let i = e?.[T];
+			if (!i) return;
+			i.binding.modifiers.expandable && e.classList.remove(`${A.value}-tooltip-expandable`);
+			let a = i.tip;
+			if (n.value = typeof a == "function" ? a : () => a || e.attributes.getNamedItem("title") || e.textContent, !i.binding.modifiers?.auto || D(e)) {
+				r.show = !0, i.binding.modifiers.expandable && e.classList.add(`${A.value}-tooltip-expandable`);
+				let t = e.getBoundingClientRect();
+				switch (r.placement = Object.keys(i.binding.modifiers).find((e) => [
+					"top",
+					"right",
+					"left",
+					"bottom"
+				].find((t) => e.startsWith(t))) ?? "top", r.placement.split("-")[0]) {
+					case "top":
+						r.x = t.left + t.width / 2, r.y = t.top;
+						break;
+					case "right":
+						r.x = t.left + t.width, r.y = t.top + t.height / 2;
+						break;
+					case "left":
+						r.x = t.left, r.y = t.top + t.height / 2;
+						break;
+					case "bottom":
+						r.x = t.left + t.width / 2, r.y = t.bottom;
+						break;
+				}
+			} else r.show &&= !1;
+		};
+		let i = `ithinkdt-tooltip-${v()}`, a = b((e) => {
+			!k || k.contains(e) || e.closest(`.${i}`) || (r.show = !1, E.value = void 0);
+		}, 100, { leading: !1 });
+		return g("mouseover", (e) => {
+			k = E.value, a(e.target);
+		}, { capture: !0 }), () => o(_, {
+			trigger: "manual",
+			show: !!E.value && r.show,
+			scrollable: !0,
+			flip: !1,
+			x: r.x,
+			y: r.y,
+			placement: r.placement,
+			style: "max-width: 61.8vw; max-height: 61.8vh"
+		}, { default: () => [o("div", { class: i }, [n.value?.()])] });
+	}
+});
+var M = (e) => {
+	k = void 0, E.value = e.target, O?.();
+}, N = (e) => {
+	e.target.classList.contains(`${A.value}-tooltip-expandable`) ? (e.target.classList.remove(`${A.value}-tooltip-expandable`), e.target.classList.add(`${A.value}-tooltip-expanded`), O()) : e.target.classList.contains(`${A.value}-tooltip-expanded`) && (e.target.classList.remove(`${A.value}-tooltip-expanded`), e.target.classList.add(`${A.value}-tooltip-expandable`), O());
+};
+const P = {
+	mounted(e, t) {
+		e[T] = {
+			binding: t,
+			tip: t.value
+		}, e.addEventListener("mouseenter", M), t.modifiers.auto && e.classList.add(`${A.value}-tooltip-host`), t.modifiers.expandable && (e.bindClick = !0, e.addEventListener("click", N));
+		for (let n of C) t.modifiers[`ell${n}`] && e.classList.add(`${A.value}-tooltip-ell${n}`);
+	},
+	updated(e, t) {
+		if (e[T]) {
+			e[T].binding = t, e[T].tip = t.value, e.classList.toggle(`${A.value}-tooltip-host`, t.modifiers.auto || !1);
+			for (let n of C) e.classList.toggle(`${A.value}-tooltip-ell${n}`, t.modifiers[`ell${n}`] || !1);
+			t.modifiers.expandable && !e.bindClick ? (e.bindClick = !0, e.addEventListener("click", N)) : e.bindClick && (e.bindClick = !1, e.removeEventListener("click", N)), E.value === e && O();
+		}
+	},
+	beforeUnmount(e) {
+		E.value === e && (E.value = void 0), e[T] && (e.removeEventListener("mouseenter", M), e.bindClick = !1, e.removeEventListener("click", N), e.classList.remove(`${A.value}-tooltip-host`, `${A.value}-tooltip-expandable`, `${A.value}-tooltip-expanded`, ...C.map((e) => `${A.value}-tooltip-ell${e}`)), delete e[T]);
+	}
+};
+var F, I, L = t([t(({ props: e }) => `:where(${e.bPrefix}spin-host)`, { position: "relative" }), n("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)"
+}, [
+	r("tip, icon", {
+		willChange: "opacity",
+		opacity: "0",
+		transition: "opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+	}),
+	r("tip:empty", { display: "none" }),
+	i("spining", { backgroundColor: "rgb(var(--host-bg, 255 255 255) / 0.5)" }, [r("tip, icon", { opacity: "1" })])
+])]);
+const R = s({
+	name: "SpinDirectiveProvider",
+	props: { dark: Boolean },
+	setup(t) {
+		return F = e("-spin-directive", L), I = p(t, "dark"), () => c(a);
+	}
+});
+var z = Symbol("spin-dir"), B = (e, { value: t, modifiers: n }) => {
+	if (e[z].loading.value = !!t, !e[z].loading.value) return;
+	let r = n.dark || !n.light && I.value;
+	e[z].spinEl.style.setProperty("--host-bg", r ? "0 0 0" : "255 255 255");
+};
+const V = {
+	beforeMount(e) {
+		if (e.classList.add(`${F.value}-spin-host`), e[z]) return;
+		let t = d(!1), n = S(`
+            <div class="${F.value}-spin-directive">
+                <svg class="${F.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="${F.value}-spin-directive__tip"></div>
+            </div>
+        `.trim()), r, { stop: i, update: a } = x(e, (e) => {
+			r = e, Object.assign(n.style, {
+				left: 0,
+				top: 0,
+				width: r.width + "px",
+				height: r.height + "px"
+			});
+		}, { interval: 1e3 / 30 }), o, s = m(t, y(() => {
+			if (t.value) o === void 0 && (clearTimeout(o), o = void 0), a(), e.append(n), requestAnimationFrame(() => {
+				t.value && n.classList.add(`${F.value}-spin-directive--spining`);
+			});
+			else {
+				n.classList.remove(`${F.value}-spin-directive--spining`);
+				let e = () => {
+					n.remove(), t && clearTimeout(t), t = null, n.removeEventListener("transitioncancel", e), n.removeEventListener("transitionend", e);
+				};
+				n.addEventListener("transitioncancel", e), n.addEventListener("transitionend", e);
+				let t = setTimeout(e, 300);
+			}
+		}, 30));
+		e[z] = {
+			loading: t,
+			spinEl: n,
+			updateTip: () => {
+				let t = n.querySelector(`.${F.value}-spin-directive__tip`);
+				t.textContent = e.dataset.spinTip;
+			},
+			stop: () => {
+				i(), s();
+			}
+		};
+	},
+	mounted(e, t) {
+		e[z] && (B(e, t), e[z].updateTip(), !e[z].observer && l().then(() => {
+			(e[z].observer = new MutationObserver((t) => {
+				for (let n of t) if (n.type === "attributes" && n.attributeName === "data-spin-tip") {
+					e[z].updateTip();
+					return;
+				}
+			})).observe(e, {
+				attributes: !0,
+				attributeFilter: ["data-spin-tip"]
+			});
+		}));
+	},
+	updated(e, t) {
+		e[z] && B(e, t);
+	},
+	beforeUnmount(e) {
+		e[z] && (e[z].loading.value = !1, e[z].stop(), e[z].observer?.disconnect(), delete e[z]);
+	}
+};
+export { P as i, V as n, j as r, R as t };

package/dist/directives.js

@@ -1,2 +1,2 @@
-import { i as vTooltip, n as vSpin, r as TooltipDirectiveProvider, t as SpinDirectiveProvider } from "./directives-pc2Vi93X.js";
-export { SpinDirectiveProvider, TooltipDirectiveProvider, vSpin, vTooltip };
+import { i as e, n as t, r as n, t as r } from "./directives-DXNnV4xc.js";
+export { r as SpinDirectiveProvider, n as TooltipDirectiveProvider, t as vSpin, e as vTooltip };