@ithinkdt/ui 4.0.0-54 → 4.0.0-600

package/dist/directives-DUuJW647.js

@@ -1,183 +0,0 @@
-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 { useElementIntersectionRect } from "@ithinkdt/common/composables";
-import { string2dom } from "@ithinkdt/common/dom";
-import { debounce } from "@ithinkdt/common/fn";
-var Tooltip = /* @__PURE__ */ Symbol("tooltip-dir"), current = /* @__PURE__ */ shallowRef(), _update;
-const TooltipDirectiveProvider = /* @__PURE__ */ defineComponent({
-	name: "TooltipDirectiveProvider",
-	props: { delay: {
-		type: Number,
-		default: 180
-	} },
-	setup(d) {
-		let k = shallowRef(), A = reactive({
-			show: !1,
-			tip: void 0,
-			placement: "top",
-			x: 0,
-			y: 0
-		});
-		return _update = async () => {
-			if (!current.value) return;
-			d.delay > 0 && await promiseTimeout(d.delay);
-			let j = current.value, M = j?.[Tooltip];
-			if (!M) return;
-			let N = M.tip;
-			k.value = typeof N == "function" ? N : () => N || j.attributes.getNamedItem("title") || j.textContent;
-			let { auto: P } = M.binding.modifiers;
-			if (!P || j.firstChild.offsetWidth > j.clientWidth || j.firstChild.offsetHeight > j.clientHeight) {
-				A.show = !0;
-				let d = j.getBoundingClientRect();
-				switch (A.placement = Object.keys(M.binding.modifiers).find((d) => [
-					"top",
-					"right",
-					"left",
-					"bottom"
-				].find((k) => d.startsWith(k))) ?? "top", A.placement.split("-")[0]) {
-					case "top":
-						A.x = d.left + d.width / 2, A.y = d.top;
-						break;
-					case "right":
-						A.x = d.left + d.width, A.y = d.top + d.height / 2;
-						break;
-					case "left":
-						A.x = d.left, A.y = d.top + d.height / 2;
-						break;
-					case "bottom":
-						A.x = d.left + d.width / 2, A.y = d.bottom;
-						break;
-				}
-			} else A.show &&= !1;
-		}, useEventListener("mouseover", (d) => {
-			let k = d.target;
-			!current.value || current.value?.contains(k) || (A.show = !1, current.value = void 0);
-		}, { capture: !0 }), () => createVNode(NTooltip, {
-			trigger: "manual",
-			show: !!current.value && A.show,
-			x: A.x,
-			y: A.y,
-			placement: A.placement,
-			keepAliveOnHover: !0
-		}, { default: () => [k.value?.()] });
-	}
-});
-var _listener = (d) => {
-	current.value = d.target, _update?.();
-};
-const vTooltip = {
-	mounted(d, k) {
-		d[Tooltip] = {
-			binding: k,
-			tip: k.value
-		}, d.addEventListener("mouseenter", _listener);
-	},
-	updated(d, k) {
-		d[Tooltip].binding = k, d[Tooltip].tip = k.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(k) {
-		return clsPrefix = useStyle("-spin-directive", style), isDark = toRef(k, "dark"), () => h(Fragment);
-	}
-});
-var Spin = /* @__PURE__ */ Symbol("spin-dir"), updateLoading = (d, { value: k, modifiers: A }) => {
-	if (d[Spin].loading.value = !!k, !d[Spin].loading.value) return;
-	let j = A.dark || !A.light && isDark.value;
-	d[Spin].spinEl.style.setProperty("--host-bg", j ? "0 0 0" : "255 255 255");
-};
-const vSpin = {
-	beforeMount(d) {
-		if (d.classList.add(`${clsPrefix.value}-spin-host`), d[Spin]) return;
-		let k = ref(!1), A = 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()), j, { stop: M, update: N } = useElementIntersectionRect(d, (d) => {
-			j = d, Object.assign(A.style, {
-				left: 0,
-				top: 0,
-				width: j.width + "px",
-				height: j.height + "px"
-			});
-		}, { interval: 1e3 / 30 }), P, F = watch(k, debounce(() => {
-			if (k.value) P === void 0 && (clearTimeout(P), P = void 0), N(), d.append(A), requestAnimationFrame(() => {
-				k.value && A.classList.add(`${clsPrefix.value}-spin-directive--spining`);
-			});
-			else {
-				A.classList.remove(`${clsPrefix.value}-spin-directive--spining`);
-				let d = () => {
-					A.remove(), k && clearTimeout(k), k = null, A.removeEventListener("transitioncancel", d), A.removeEventListener("transitionend", d);
-				};
-				A.addEventListener("transitioncancel", d), A.addEventListener("transitionend", d);
-				let k = setTimeout(d, 300);
-			}
-		}, 30));
-		d[Spin] = {
-			loading: k,
-			spinEl: A,
-			updateTip: () => {
-				let k = A.querySelector(`.${clsPrefix.value}-spin-directive__tip`);
-				k.textContent = d.dataset.spinTip;
-			},
-			stop: () => {
-				M(), F();
-			}
-		};
-	},
-	mounted(d, k) {
-		updateLoading(d, k), d[Spin].updateTip(), !d[Spin].observer && nextTick().then(() => {
-			(d[Spin].observer = new MutationObserver((k) => {
-				for (let A of k) if (A.type === "attributes" && A.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 };