@ithinkdt/ui 4.0.0-38 → 4.0.0-400

package/dist/components.js

@@ -0,0 +1,5 @@
+import "./use-i18n-Dx7V4KrY.js";
+import "./directives-qqYcWl1I.js";
+import "./use-style-DcT-1dj4.js";
+import { _ as DataActions, a as NRadios, c as DataSelection, d as useLocaleEdit, f as DataFilter, g as DataCustom, h as dataFormActionsProps, i as renderUsers, l as DataPagination, m as DataFormActions, n as DtUserDept, o as DataTable, p as DataForm, r as DtUserRender, s as useDataTableDrag, t as DtDeptRender, u as DataLocaleInput, v as NCheckboxes } from "./components-B_qzc9ro.js";
+export { DataActions, DataCustom, DataFilter, DataForm, DataFormActions, DataLocaleInput, DataPagination, DataSelection, DataTable, DtDeptRender, DtUserDept, DtUserRender, NCheckboxes, NRadios, dataFormActionsProps, renderUsers, useDataTableDrag, useLocaleEdit };

package/dist/directives-qqYcWl1I.js

@@ -0,0 +1,194 @@
+import { g as useStyle, i as cM, n as cB, r as cE, t as c } from "./use-style-DcT-1dj4.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 Tooltip = /* @__PURE__ */ Symbol("tooltip-dir"), current = /* @__PURE__ */ shallowRef(), _update, _current;
+const TooltipDirectiveProvider = /* @__PURE__ */ defineComponent({
+	name: "TooltipDirectiveProvider",
+	props: { delay: {
+		type: Number,
+		default: 180
+	} },
+	setup(d) {
+		let M = shallowRef(), N = reactive({
+			show: !1,
+			tip: void 0,
+			placement: "top",
+			x: 0,
+			y: 0
+		});
+		_update = async () => {
+			if (!current.value) return;
+			d.delay > 0 && await promiseTimeout(d.delay);
+			let P = current.value, F = P?.[Tooltip];
+			if (!F) return;
+			let I = F.tip;
+			M.value = typeof I == "function" ? I : () => I || P.attributes.getNamedItem("title") || P.textContent;
+			let { auto: L } = F.binding.modifiers;
+			if (!L || P.firstChild.offsetWidth > P.clientWidth || P.firstChild.offsetHeight > P.clientHeight) {
+				N.show = !0;
+				let d = P.getBoundingClientRect();
+				switch (N.placement = Object.keys(F.binding.modifiers).find((d) => [
+					"top",
+					"right",
+					"left",
+					"bottom"
+				].find((M) => d.startsWith(M))) ?? "top", N.placement.split("-")[0]) {
+					case "top":
+						N.x = d.left + d.width / 2, N.y = d.top;
+						break;
+					case "right":
+						N.x = d.left + d.width, N.y = d.top + d.height / 2;
+						break;
+					case "left":
+						N.x = d.left, N.y = d.top + d.height / 2;
+						break;
+					case "bottom":
+						N.x = d.left + d.width / 2, N.y = d.bottom;
+						break;
+				}
+			} else N.show &&= !1;
+		};
+		let P = `ithinkdt-tooltip-${nanoid()}`, F = throttle((d) => {
+			!_current || _current.contains(d) || d.closest(`.${P}`) || (N.show = !1, current.value = void 0);
+		}, 100, { leading: !1 });
+		return useEventListener("mouseover", (d) => {
+			_current = current.value, F(d.target);
+		}, { capture: !0 }), () => createVNode(NTooltip, {
+			trigger: "manual",
+			show: !!current.value && N.show,
+			x: N.x,
+			y: N.y,
+			placement: N.placement,
+			internalInheritedEventHandlers: [{
+				onMouseenter: () => {
+					console.log("111");
+				},
+				onMouseleave: () => {
+					console.log("222");
+				}
+			}]
+		}, { default: () => [createVNode("div", { class: P }, [M.value?.()])] });
+	}
+});
+var _listener = (d) => {
+	_current = void 0, current.value = d.target, _update?.();
+};
+const vTooltip = {
+	mounted(d, M) {
+		d[Tooltip] = {
+			binding: M,
+			tip: M.value
+		}, d.addEventListener("mouseenter", _listener);
+	},
+	updated(d, M) {
+		d[Tooltip].binding = M, d[Tooltip].tip = M.value, _update();
+	},
+	beforeUnmount(d) {
+		d[Tooltip] && d.removeEventListener("mouseenter", _listener), current.value === d && (current.value = void 0), delete d[Tooltip];
+	}
+};
+var clsPrefix, isDark, style = /* @__PURE__ */ c([c(({ props: d }) => `:where(${d.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(M) {
+		return clsPrefix = useStyle("-spin-directive", style), isDark = toRef(M, "dark"), () => h(Fragment);
+	}
+});
+var Spin = /* @__PURE__ */ Symbol("spin-dir"), updateLoading = (d, { value: M, modifiers: N }) => {
+	if (d[Spin].loading.value = !!M, !d[Spin].loading.value) return;
+	let P = N.dark || !N.light && isDark.value;
+	d[Spin].spinEl.style.setProperty("--host-bg", P ? "0 0 0" : "255 255 255");
+};
+const vSpin = {
+	beforeMount(d) {
+		if (d.classList.add(`${clsPrefix.value}-spin-host`), d[Spin]) return;
+		let M = ref(!1), N = 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()), P, { stop: F, update: I } = useElementIntersectionRect(d, (d) => {
+			P = d, Object.assign(N.style, {
+				left: 0,
+				top: 0,
+				width: P.width + "px",
+				height: P.height + "px"
+			});
+		}, { interval: 1e3 / 30 }), L, R = watch(M, debounce(() => {
+			if (M.value) L === void 0 && (clearTimeout(L), L = void 0), I(), d.append(N), requestAnimationFrame(() => {
+				M.value && N.classList.add(`${clsPrefix.value}-spin-directive--spining`);
+			});
+			else {
+				N.classList.remove(`${clsPrefix.value}-spin-directive--spining`);
+				let d = () => {
+					N.remove(), M && clearTimeout(M), M = null, N.removeEventListener("transitioncancel", d), N.removeEventListener("transitionend", d);
+				};
+				N.addEventListener("transitioncancel", d), N.addEventListener("transitionend", d);
+				let M = setTimeout(d, 300);
+			}
+		}, 30));
+		d[Spin] = {
+			loading: M,
+			spinEl: N,
+			updateTip: () => {
+				let M = N.querySelector(`.${clsPrefix.value}-spin-directive__tip`);
+				M.textContent = d.dataset.spinTip;
+			},
+			stop: () => {
+				F(), R();
+			}
+		};
+	},
+	mounted(d, M) {
+		updateLoading(d, M), d[Spin].updateTip(), !d[Spin].observer && nextTick().then(() => {
+			(d[Spin].observer = new MutationObserver((M) => {
+				for (let N of M) if (N.type === "attributes" && N.attributeName === "data-spin-tip") {
+					d[Spin].updateTip();
+					return;
+				}
+			})).observe(d, {
+				attributes: !0,
+				attributeFilter: ["data-spin-tip"]
+			});
+		});
+	},
+	updated: updateLoading,
+	beforeUnmount(d) {
+		d[Spin].loading.value = !1, d[Spin].stop(), d[Spin].observer?.disconnect(), delete d[Spin];
+	}
+};
+export { vTooltip as i, vSpin as n, TooltipDirectiveProvider as r, SpinDirectiveProvider as t };

package/dist/directives.js

@@ -0,0 +1,3 @@
+import { i as vTooltip, n as vSpin, r as TooltipDirectiveProvider, t as SpinDirectiveProvider } from "./directives-qqYcWl1I.js";
+import "./use-style-DcT-1dj4.js";
+export { SpinDirectiveProvider, TooltipDirectiveProvider, vSpin, vTooltip };