@otwb/ui 2.0.0

package/dist/components.js

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

package/dist/directives-CRvPGywW.js

@@ -0,0 +1,183 @@
+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 "@otwb/common/composables";
+import { string2dom } from "@otwb/common/dom";
+import { debounce } from "@otwb/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 };

package/dist/directives.js

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