rappel-ui 1.0.8 → 1.0.12

package/dist/es/components/tooltip/src/use-tooltip.mjs

@@ -0,0 +1,105 @@
+import { useDebounceFn as e } from "../../../node_modules/.pnpm/@vueuse_shared@14.0.0_vue@3.5.26_typescript@5.9.3_/node_modules/@vueuse/shared/dist/index.mjs";
+import { onClickOutside as t, useElementHover as n, useEventListener as r } from "../../../node_modules/.pnpm/@vueuse_core@14.0.0_vue@3.5.26_typescript@5.9.3_/node_modules/@vueuse/core/dist/index.mjs";
+import { effectScope as i, unref as a, watch as o } from "vue";
+//#region packages/components/tooltip/src/use-tooltip.ts
+function s({ triggerRef: s, isExternal: c, externalActiveRef: l, externalRef: u, trigger: d, floatingRef: f, open: p, showDelay: m = 0, hideDelay: h = 0, disabled: g }) {
+	let _ = [], v = e(() => {
+		p.value = !0;
+	}, c ? 0 : m), y = e((e) => {
+		p.value = !1, typeof e == "function" && e();
+	}, c ? 0 : h), b = () => {
+		if (s.value) switch (d) {
+			case "click": {
+				let e = r(s, "click", v), i = n(f, {
+					delayEnter: 0,
+					delayLeave: 0,
+					triggerOnRemoval: !0
+				}), a = t(s, () => {
+					!i.value && y();
+				});
+				_.push(e, a);
+				break;
+			}
+			case "hover": {
+				let e = {
+					delayEnter: c ? 0 : m,
+					delayLeave: c ? 0 : h,
+					triggerOnRemoval: !0
+				}, t = n(s, e);
+				c && p.value && (t.value = !0);
+				let r, { stop: i } = o(t, (e) => {
+					p.value = e || (r == null ? void 0 : r.value);
+				}), { stop: a } = o(f, (i) => {
+					if (!i) return;
+					r = n(f, e);
+					let { stop: a } = o(r, (e) => {
+						p.value = e || t.value;
+					});
+					_.push(a);
+				});
+				_.push(i, a);
+				break;
+			}
+			case "focus": {
+				let e = r(s, "focus", v), i = n(f, {
+					delayEnter: 0,
+					delayLeave: 0,
+					triggerOnRemoval: !0
+				}), a = r(s, "blur", () => !i.value && y()), o = t(s, () => !i.value && y());
+				_.push(e, a, o);
+				break;
+			}
+			case "contextmenu": {
+				let e = r(s, "contextmenu", (e) => {
+					e.preventDefault(), v();
+				}), i = n(f, {
+					delayEnter: 0,
+					delayLeave: 0,
+					triggerOnRemoval: !0
+				}), a = t(s, () => !i.value && y());
+				_.push(e, a);
+				break;
+			}
+		}
+	}, x = () => {
+		_.forEach((e) => e());
+	}, S = () => {
+		p.value = !1, x();
+	};
+	return c && o(() => u == null ? void 0 : u.value, (e) => {
+		if (!(["click", "contextmenu"].includes(d) && l.value === e)) {
+			if (!l.value || !p.value) {
+				l.value = e, v();
+				return;
+			}
+			y(() => {
+				l.value = e, v();
+			});
+		}
+	}), {
+		start: b,
+		stop: S,
+		setup: () => {
+			let e = i();
+			return e.run(() => {
+				if (p.value) {
+					x();
+					return;
+				}
+				if (a(g)) {
+					S();
+					return;
+				}
+				b(), o(() => a(g), (e) => {
+					e ? S() : b();
+				}), o(s, (e) => {
+					e && (x(), b());
+				});
+			}), { scope: e };
+		},
+		delayHide: y,
+		delayShow: v
+	};
+}
+//#endregion
+export { s as useTooltip };

package/dist/es/composables/index.d.ts

@@ -0,0 +1,8 @@
+export * from './use-draggable';
+export * from './use-date-format';
+export * from './use-once-fn';
+export * from './use-time-nodes';
+export * from './use-waterfall-layout';
+export * from './use-namespace';
+export * from './use-z-index';
+export * from './use-theme';

package/dist/es/composables/index.mjs

@@ -0,0 +1,9 @@
+import { useDraggable as e } from "./use-draggable/index.mjs";
+import { useDateFormat as t } from "./use-date-format/index.mjs";
+import { useOnceFn as n } from "./use-once-fn/index.mjs";
+import { useTimeNodes as r } from "./use-time-nodes/index.mjs";
+import { useWaterFallLayout as i } from "./use-waterfall-layout/index.mjs";
+import { useNamespace as a } from "./use-namespace/index.mjs";
+import { useZIndex as o } from "./use-z-index/index.mjs";
+import { useTheme as s } from "./use-theme/index.mjs";
+export { t as useDateFormat, e as useDraggable, a as useNamespace, n as useOnceFn, s as useTheme, r as useTimeNodes, i as useWaterFallLayout, o as useZIndex };

package/dist/es/composables/use-date-format/index.mjs

@@ -0,0 +1,20 @@
+//#region packages/composables/use-date-format/index.ts
+function e(e, t) {
+	let n = e.getFullYear(), r = e.getMonth() + 1, i = e.getDate(), a = e.getHours(), o = e.getMinutes(), s = e.getSeconds(), c = {
+		YYYY: String(n),
+		YY: String(n).substring(2),
+		MM: String(r).padStart(2, "0"),
+		M: String(r),
+		DD: String(i).padStart(2, "0"),
+		D: String(i),
+		HH: String(a).padStart(2, "0"),
+		H: String(a),
+		mm: String(o).padStart(2, "0"),
+		m: String(o),
+		ss: String(s).padStart(2, "0"),
+		s: String(s)
+	};
+	return t.replace(/(YYYY|YY|MM|M|DD|D|HH|H|mm|m|ss|s)/g, (e) => c[e]);
+}
+//#endregion
+export { e as useDateFormat };

package/dist/es/composables/use-draggable/index.mjs

@@ -0,0 +1,61 @@
+//#region packages/composables/use-draggable/index.ts
+function e(e, t) {
+	if (!e) return {
+		updatePos: () => {},
+		cleanup: () => {}
+	};
+	let n = Object.assign({}, {
+		preventDefault: !0,
+		customHandler: null,
+		autoTopHandler: !1,
+		topHandlerHeight: 20,
+		isAllHandler: !0
+	}, t || {}), r = n.customHandler ? n.customHandler : n.autoTopHandler ? (() => {
+		let t = document.createElement("div");
+		return t.style.cssText = `user-select:none;height: ${n.topHandlerHeight}px; z-index:3000;cursor: move; position: absolute; top: 0; left: 0;right:0;background-color: transparent;opacity: 1;`, t.classList.add("v-draggable-top-handler"), e.appendChild(t), t;
+	})() : e, i = !1, a = 0, o = 0, s = 0, c = 0, l = 0, u = 0, d = 0, f = 0, p = (e) => window.getComputedStyle(e).transform, m = (e) => {
+		let t = p(e);
+		if (t && t !== "none") {
+			let { e, f: n, m41: r, m42: i } = new DOMMatrix(t);
+			return {
+				x: e || r || 0,
+				y: n || i || 0
+			};
+		}
+		return {
+			x: 0,
+			y: 0
+		};
+	}, h = () => {
+		let t = e.getBoundingClientRect(), { x: n, y: r } = m(e);
+		s = n, c = r, l = -t.left + n, u = -t.top + r, d = window.innerWidth - t.right + n, f = window.innerHeight - t.bottom + r;
+	}, g = (e) => {
+		let t = e.target;
+		return !t || t.isContentEditable || t.closest("input, textarea, button, select, a,[contenteditable], [contenteditable=\"true\"]") || [
+			"TEXTAREA",
+			"INPUT",
+			"BUTTON",
+			"A",
+			"SELECT"
+		].includes(t == null ? void 0 : t.tagName) ? !1 : !!n.isAllHandler || t === r;
+	}, _ = (e) => {
+		g(e) && (i = !0, n.preventDefault && e.preventDefault(), h(), a = e.clientX - s, o = e.clientY - c, document.removeEventListener("pointermove", v), document.removeEventListener("pointerup", y), document.removeEventListener("pointercancel", y), document.addEventListener("pointermove", v), document.addEventListener("pointerup", y), document.addEventListener("pointercancel", y));
+	}, v = (t) => {
+		if (!i) return;
+		let n = t.clientX - a, r = t.clientY - o;
+		n = n < s ? Math.max(n, l) : Math.min(n, d), r = r < c ? Math.max(r, u) : Math.min(r, f), e.style.transform = `translate(${n}px, ${r}px)`, s = n, c = r;
+	}, y = () => {
+		i = !1, document.removeEventListener("pointermove", v), document.removeEventListener("pointerup", y), document.removeEventListener("pointercancel", y);
+	};
+	return h(), r.removeEventListener("pointerdown", _), r.addEventListener("pointerdown", _), window.removeEventListener("resize", h), window.addEventListener("resize", h), {
+		updatePos: h,
+		cleanup: e._cleanup = () => {
+			if (y(), r.removeEventListener("pointerdown", _), window.removeEventListener("resize", h), n.autoTopHandler && !n.customHandler) {
+				let t = e.querySelector(".v-draggable-top-handler");
+				t && t.remove();
+			}
+		}
+	};
+}
+//#endregion
+export { e as useDraggable };

package/dist/es/composables/use-namespace/index.d.ts

@@ -0,0 +1,13 @@
+export declare function useNamespace(compName: string): {
+    libName: string;
+    prefix: string;
+    statePrefix: string;
+    n: (name?: string) => string;
+    ng: (groupName: string) => string;
+    nm: (modifier: string) => string;
+    ngm: (groupName: string, modifier: string) => string;
+    ns: (subName: string) => string;
+    ngs: (groupName: string, subName: string) => string;
+    cls: (name: string, groupName?: string, modifier?: string, subName?: string) => string;
+    is: (state: string, bool?: boolean | undefined) => string;
+};

package/dist/es/composables/use-namespace/index.mjs

@@ -0,0 +1,22 @@
+//#region packages/composables/use-namespace/index.ts
+function e(e) {
+	let t = (t, n, r, i) => {
+		let a = `re-${t || e}`;
+		return n && (a += `-${n}`), r && (a += `--${r}`), i && (a += `__${i}`), a.toLowerCase();
+	};
+	return {
+		libName: "rappel-ui",
+		prefix: "re",
+		statePrefix: "is",
+		n: (e = "") => t(e),
+		ng: (e) => t("", e),
+		nm: (e) => t("", "", e),
+		ngm: (e, n) => t("", e, n),
+		ns: (e) => t("", "", "", e),
+		ngs: (e, n) => t("", e, "", n),
+		cls: t,
+		is: (e, t = void 0) => t ? `is-${e}` : ""
+	};
+}
+//#endregion
+export { e as useNamespace };

package/{es/composables/useOnceFn.d.ts → dist/es/composables/use-once-fn/index.d.ts}

@@ -21,4 +21,4 @@
  *
  * @returns {Promise<any>}
  */
-export declare function useOnceFn(funcName: Function, ...funcParams: any[]): Promise<any>;
+export declare function useOnceFn(funcName: (...args: any[]) => void, ...funcParams: any[]): Promise<any>;

package/dist/es/composables/use-once-fn/index.mjs

@@ -0,0 +1,30 @@
+import e from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/defineProperty.mjs";
+//#region packages/composables/use-once-fn/index.ts
+var t = class {
+	constructor() {
+		e(this, "res", void 0), e(this, "isFetching", void 0), e(this, "isSuccess", void 0), e(this, "queues", void 0), this.res = null, this.isFetching = !1, this.isSuccess = !1, this.queues = [];
+	}
+	useOnceFn(e, ...t) {
+		return new Promise((n) => {
+			if (this.isSuccess) {
+				n(this.res);
+				return;
+			}
+			this.queues.push(n), this.isFetching || (this.isFetching = !0, Promise.resolve(e(...t)).then((e) => {
+				this.res = e, this.loopQueues(), this.isSuccess = !0;
+			}));
+		});
+	}
+	loopQueues() {
+		for (; this.queues.length > 0;) {
+			let e = this.queues.shift();
+			e == null || e(this.res);
+		}
+	}
+}, n = {};
+function r(e, ...r) {
+	let i = e.toString().replace(/[^a-zA-Z]/g, "");
+	return n[i] || (n[i] = new t()), n[i].useOnceFn(e, ...r);
+}
+//#endregion
+export { r as useOnceFn };

package/dist/es/composables/use-theme/index.d.ts

@@ -0,0 +1,7 @@
+import { WritableComputedRef, ComputedRef } from 'vue';
+import { Theme } from '@rappel-ui/types';
+export declare function useTheme(theme?: Theme, reverseTheme?: boolean): {
+    isDark: WritableComputedRef<boolean>;
+    currentTheme: ComputedRef<Theme>;
+    toggle: () => void;
+};

package/dist/es/composables/use-theme/index.mjs

@@ -0,0 +1,23 @@
+import { useNamespace as e } from "../use-namespace/index.mjs";
+import { useToggle as t } from "../../node_modules/.pnpm/@vueuse_shared@14.0.0_vue@3.5.26_typescript@5.9.3_/node_modules/@vueuse/shared/dist/index.mjs";
+import { useDark as n } from "../../node_modules/.pnpm/@vueuse_core@14.0.0_vue@3.5.26_typescript@5.9.3_/node_modules/@vueuse/core/dist/index.mjs";
+import "../index.mjs";
+import { computed as r } from "vue";
+//#region packages/composables/use-theme/index.ts
+var { libName: i } = e(""), a = n({
+	storageKey: `${i}-color-scheme`,
+	selector: "html",
+	attribute: "class",
+	valueDark: "dark",
+	valueLight: "light"
+});
+function o(e = "light", n = !1) {
+	let i = t(a);
+	return {
+		isDark: a,
+		currentTheme: r(() => n ? e === "dark" ? "light" : "dark" : e),
+		toggle: i
+	};
+}
+//#endregion
+export { o as useTheme };

package/dist/es/composables/use-time-nodes/index.mjs

@@ -0,0 +1,25 @@
+import { useDateFormat as e } from "../use-date-format/index.mjs";
+import "../index.mjs";
+//#region packages/composables/use-time-nodes/index.ts
+function t(t = "00:00", n = "23:00", r = "02:00", i = "HH:mm") {
+	let a = (e) => {
+		let [t, n, r] = e.split(":").map(Number);
+		return [
+			t || 0,
+			n || 0,
+			r || 0
+		];
+	}, o = (e) => {
+		let [t, n, r] = a(e), i = /* @__PURE__ */ new Date();
+		return new Date(i.getFullYear(), i.getMonth() + 1, i.getDate(), t, n, r);
+	}, s = (t) => e(t, i), c = (e) => {
+		let [t, n, i] = a(r);
+		return new Date(e.getTime() + t * 36e5 + n * 6e4 + i * 1e3);
+	}, l = [], [u, d, f] = a(r);
+	if (u === 0 && d === 0 && f === 0) throw Error("时间步长不能为0");
+	let p = o(t), m = o(n);
+	for (; p <= m;) l.push(s(p)), p = c(p);
+	return { timeNodes: l };
+}
+//#endregion
+export { t as useTimeNodes };

package/dist/es/composables/use-waterfall-layout/index.mjs

@@ -0,0 +1,46 @@
+import { nextTick as e, ref as t, watch as n } from "vue";
+//#region packages/composables/use-waterfall-layout/index.ts
+function r(r, i) {
+	let a = t(3), o = t(2), s = t(2), c = t("#F5F8F8"), l = t("#FFFFFF"), u = t("top 300ms ease-in-out, left 300ms ease-in-out"), d = t(0), f = t(0), p = t(0), m = (e) => document.querySelectorAll(e || i), h = () => {
+		r.value.style.position = "relative";
+	}, g = () => {
+		h(), d.value = r.value.clientWidth;
+	}, _ = () => {
+		p.value = (d.value - s.value * (a.value - 1)) / a.value;
+	}, v = (e) => {
+		let t = e % a.value;
+		return t === 0 ? 0 : t * (p.value + s.value);
+	}, y = (e) => {
+		let { style: t, offsetHeight: n } = e;
+		return parseFloat(t.top) + n + o.value;
+	}, b = (e, t) => e >= a.value ? y(t[e - a.value]) : 0, x = (e) => {
+		let t = y(e);
+		t > f.value && (f.value = t, r.value.style.height = `${t}px`);
+	}, S = t("is-dealed"), C = (e = !1) => {
+		let t = m(), n = m(`.${S.value}`), r = 0;
+		n.length > 0 && (r = n.length), e && (r = 0, f.value = 0);
+		for (let e = r; e < t.length; e++) t[e].style.position = "absolute", t[e].style.transition = u.value, t[e].style.width = `${p.value}px`, t[e].style.backgroundColor = w(e), t[e].style.left = `${v(e)}px`, t[e].style.top = `${b(e, t)}px`, t[e].classList.add(S.value), x(t[e]);
+	}, w = (e) => {
+		let t = e + 1;
+		return a.value % 2 == 0 ? t % 2 == 0 ? l.value : c.value : t % a.value !== 0 && t % a.value % 2 == 0 ? l.value : c.value;
+	}, T = (t = !1) => {
+		g(), _(), e(() => {
+			C(t);
+		});
+	};
+	return n(() => a.value, () => {
+		e(() => {
+			T(!0);
+		});
+	}), {
+		init: T,
+		column: a,
+		rowSpacing: o,
+		columnSpacing: s,
+		oddColumnBgColor: c,
+		evenColumnBgColor: l,
+		getItems: m
+	};
+}
+//#endregion
+export { r as useWaterFallLayout };

package/dist/es/composables/use-z-index/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * global z-index increment
+ * @returns
+ */
+export declare function useZIndex(): {
+    zIndex: {
+        _i: number;
+        readonly value: number;
+    };
+    reset: (val: number) => void;
+};

package/dist/es/composables/use-z-index/index.mjs

@@ -0,0 +1,17 @@
+//#region packages/composables/use-z-index/index.ts
+var e = {
+	_i: 2e3,
+	get value() {
+		return this._i++;
+	}
+};
+function t() {
+	return {
+		zIndex: e,
+		reset: (t) => {
+			e._i = t;
+		}
+	};
+}
+//#endregion
+export { t as useZIndex };

package/dist/es/constants/svgLoading.mjs

@@ -0,0 +1,4 @@
+//#region packages/constants/svgLoading.ts
+var e = "<svg viewBox=\"0 0 800 800\" xmlns=\"http://www.w3.org/2000/svg\">\n<style>\n    @keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes spin2 {\n  0% {\n    stroke-dasharray: 1, 800;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 200, 200;\n    stroke-dashoffset: 100px;\n  }\n  100% {\n    stroke-dasharray: 800, 1;\n    stroke-dashoffset: -800px;\n  }\n}\n\n.spin2 {\n  transform-origin: center;\n  animation: spin2 1.5s ease-in-out infinite,\n    spin 2s linear infinite;\n  animation-direction: alternate;\n}\n</style>\n  <circle class=\"spin2\" cx=\"400\" cy=\"400\" fill=\"none\"\n    r=\"200\" stroke-width=\"40\" stroke=\"#E387FF\"\n    stroke-dasharray=\"800 1400\"\n    stroke-linecap=\"round\"\n  />\n</svg>";
+//#endregion
+export { e as svgLoadingContent };

package/dist/es/directives/index.mjs

@@ -0,0 +1,4 @@
+import { vDraggable as e } from "./vDraggable.mjs";
+import { applyResizable as t, vResizable as n } from "./vResizable.mjs";
+import { vSvgLoading as r } from "./vSvgLoading.mjs";
+export { t as applyResizable, e as vDraggable, n as vResizable, r as vSvgLoading };

package/dist/es/directives/vDraggable.mjs

@@ -0,0 +1,14 @@
+import { useDraggable as e } from "../composables/use-draggable/index.mjs";
+import "../composables/index.mjs";
+//#region packages/directives/vDraggable.ts
+var t = {
+	mounted(t, n) {
+		e(t, n.value || {});
+	},
+	unmounted(e) {
+		var t;
+		(t = e._cleanup) == null || t.call(e);
+	}
+};
+//#endregion
+export { t as vDraggable };

package/dist/es/directives/vResizable.mjs

@@ -0,0 +1,136 @@
+//#region packages/directives/vResizable.ts
+var e = "v-resizable-handle", t = "v-resizable-handle-style";
+function n() {
+	if (document.getElementById(t)) return;
+	let n = document.createElement("style");
+	n.id = t, n.textContent = `
+.${e} {
+  position: absolute;
+  background: transparent;
+  z-index: 9999;
+  user-select: none;
+  touch-action: none;
+  opacity: 0;
+}
+.${e}::after {
+  content: '';
+  display:block;
+  width:100%;
+  height:100%;
+  border-radius:2px;
+  background: rgba(0,0,0,0.12);
+}
+.${e}.hr { cursor: ew-resize; }
+.${e}.vr { cursor: ns-resize; }
+.${e}.corner { cursor: nwse-resize; }
+`, document.head.appendChild(n);
+}
+function r(e, t, n) {
+	let r = 0, i = 0;
+	switch (e) {
+		case "hr":
+			r = 4, i = n.height - 8;
+			break;
+		case "vr":
+			r = n.width - 8, i = 4;
+			break;
+		case "corner":
+			r = 8, i = 8;
+			break;
+	}
+	return t.style.width = `${r}px`, t.style.height = `${i}px`, t;
+}
+function i(t, n) {
+	let i = document.createElement("div"), a = n.getBoundingClientRect();
+	return i.className = `${e} ${t}`, r(t, i, a);
+}
+function a(e, t, n) {
+	switch (t) {
+		case "left":
+			e.style.left = "-2px", e.style.top = "4px", r("hr", e, n);
+			break;
+		case "right":
+			e.style.left = `${n.width - 2}px`, e.style.top = "4px", r("hr", e, n);
+			break;
+		case "top":
+			e.style.left = "4px", e.style.top = "-2px", r("vr", e, n);
+			break;
+		case "bottom":
+			e.style.left = "4px", e.style.top = `${n.height - 2}px`, r("vr", e, n);
+			break;
+		case "bottom-right":
+			e.style.left = `${n.width - 2}px`, e.style.top = `${n.height - 2}px`;
+			break;
+	}
+}
+function o(e, t) {
+	var r, o;
+	n(), getComputedStyle(e).position === "static" && (e.style.position = "relative"), e.style.boxSizing = e.style.boxSizing || "border-box";
+	let s = {
+		startX: 0,
+		startY: 0,
+		startW: 0,
+		startH: 0,
+		startL: 0,
+		startT: 0,
+		minW: (r = t == null ? void 0 : t.minWidth) == null ? 40 : r,
+		minH: (o = t == null ? void 0 : t.minHeight) == null ? 24 : o,
+		maxW: t == null ? void 0 : t.maxWidth,
+		maxH: t == null ? void 0 : t.maxHeight,
+		handlers: []
+	}, c = i("hr", e), l = i("hr", e), u = i("vr", e), d = i("vr", e), f = i("corner", e);
+	c.dataset.side = "left", l.dataset.side = "right", u.dataset.side = "top", d.dataset.side = "bottom", f.dataset.side = "bottom-right", e.appendChild(c), e.appendChild(l), e.appendChild(u), e.appendChild(d), e.appendChild(f), s.handlers.push(c, l, u, d, f);
+	let p = (t) => {
+		var n, r, i;
+		let a = t.target;
+		if (!a || !((n = a.dataset) != null && n.side)) return;
+		let o = a.dataset.side;
+		(r = (i = t.target).setPointerCapture) == null || r.call(i, t.pointerId), s.side = o, s.pointerId = t.pointerId;
+		let c = e.getBoundingClientRect();
+		s.startX = t.clientX, s.startY = t.clientY, s.startW = c.width, s.startH = c.height;
+		let l = getComputedStyle(e), u = parseFloat(l.left || "0"), d = parseFloat(l.top || "0");
+		s.startL = u, s.startT = d, s.onMove = (t) => m(t, e, s), s.onUp = (t) => h(t, e, s), window.addEventListener("pointermove", s.onMove), window.addEventListener("pointerup", s.onUp), window.addEventListener("pointercancel", s.onUp), t.preventDefault();
+	}, m = (e, t, n) => {
+		if (n.side === void 0) return;
+		let r = e.clientX - n.startX, i = e.clientY - n.startY, o = n.startW, s = n.startH, c = n.startL, l = n.startT;
+		n.side === "right" ? (o = Math.max(n.minW, n.startW + r), n.maxW && (o = Math.min(o, n.maxW))) : n.side === "left" ? (o = Math.max(n.minW, n.startW - r), n.maxW && (o = Math.min(o, n.maxW)), c = n.startL + (n.startW - o)) : n.side === "bottom" ? (s = Math.max(n.minH, n.startH + i), n.maxH && (s = Math.min(s, n.maxH))) : n.side === "top" ? (s = Math.max(n.minH, n.startH - i), n.maxH && (s = Math.min(s, n.maxH)), l = n.startT + (n.startH - s)) : n.side === "bottom-right" && (o = Math.max(n.minW, n.startW + r), s = Math.max(n.minH, n.startH + i), n.maxW && (o = Math.min(o, n.maxW)), n.maxH && (s = Math.min(s, n.maxH))), t.style.width = `${o}px`, t.style.height = `${s}px`;
+		let u = getComputedStyle(t).position;
+		(u === "absolute" || u === "relative" || u === "fixed") && (t.style.left = `${c}px`, t.style.top = `${l}px`);
+		let d = t.getBoundingClientRect();
+		n.handlers.forEach((e) => {
+			let t = e.dataset.side;
+			a(e, t, d);
+		}), e.preventDefault();
+	}, h = (e, t, n) => {
+		n.onMove && (window.removeEventListener("pointermove", n.onMove), window.removeEventListener("pointerup", n.onUp), window.removeEventListener("pointercancel", n.onUp)), n.side = void 0, n.pointerId = void 0;
+	}, g = () => {
+		let t = e.getBoundingClientRect();
+		s.handlers.forEach((e) => {
+			let n = e.dataset.side;
+			e.style.position = "absolute", e.style.boxSizing = "content-box", a(e, n, t);
+		});
+	};
+	s.handlers.forEach((e) => e.addEventListener("pointerdown", p));
+	let _ = new ResizeObserver(g);
+	return _.observe(e), s.ro = _, g(), { destroy: () => {
+		s.handlers.forEach((t) => {
+			t.removeEventListener("pointerdown", p), t.parentElement === e && e.removeChild(t);
+		}), s.onMove && (window.removeEventListener("pointermove", s.onMove), window.removeEventListener("pointerup", s.onUp), window.removeEventListener("pointercancel", s.onUp)), s.ro && s.ro.disconnect();
+	} };
+}
+var s = {
+	mounted(e, t) {
+		let n = t.value, { destroy: r } = o(e, n);
+		e.__v_resizable_cleanup = r;
+	},
+	beforeUnmount(e) {
+		let t = e.__v_resizable_cleanup;
+		t && (t(), delete e.__v_resizable_cleanup);
+	}
+};
+function c(e, t) {
+	let { destroy: n } = o(e, t);
+	return n;
+}
+//#endregion
+export { c as applyResizable, s as vResizable };

package/dist/es/directives/vSvgLoading.mjs

@@ -0,0 +1,47 @@
+import { svgLoadingContent as e } from "../constants/svgLoading.mjs";
+import { ref as t } from "vue";
+//#region packages/directives/vSvgLoading.ts
+var n = t(1e3), r = t(2e3), i = {
+	mounted(t, i, a) {
+		let o = (t, i, a) => {
+			let o = {
+				svgClass: "",
+				svgContent: e,
+				svgViewBox: "",
+				markBgColor: "rgba(255,255,255,0.8)",
+				markClass: "",
+				spinnerClass: "",
+				spinnerH: 300,
+				spinnerContent: "",
+				zIndex: r.value++
+			}, s = Object.assign({}, o, (i == null ? void 0 : i.arg) || {}), c = `background-color:${s.markBgColor};top:0;right:0;bottom:0;left:0;margin:0;position:absolute;transition:opacity 0.3s;overflow: hidden;`, l = `position:absolute;text-align:center;left:50%;top:50%;width:100%;height:${s.spinnerH}px;`, u = document.createElement("div"), d = document.createElement("div");
+			n.value++, u.className = `svg-loading ${s.markClass} uid-${n.value}`, d.className = `svg-loading-spinner ${s.spinnerClass}`, d.innerHTML = `${s.svgContent}`;
+			let f = d.getElementsByTagName("svg")[0];
+			if (s.spinnerH && (f.setAttribute("width", `${s.spinnerH}px`), f.setAttribute("height", `${s.spinnerH}px`)), s.svgClass && f.setAttribute("class", s.svgClass), s.svgViewBox && f.setAttribute("viewBox", s.svgViewBox), a.ctx.markSelector = ".svg-loading", s.spinnerContent) {
+				let e = document.createElement("div");
+				e.setAttribute("style", "text-align:center;"), e.innerHTML = s.spinnerContent, d.appendChild(e);
+			}
+			d.setAttribute("style", l), d.style.setProperty("margin-top", `${-(s.spinnerH / 2)}px`), d.style.setProperty("margin-left", `${-(s.spinnerH / 2)}px`), u.setAttribute("style", c), u.style.setProperty("z-index", s.zIndex), u.appendChild(d), t.style.setProperty("position", "relative"), t.appendChild(u);
+		}, s = (e) => 1 - (1 - e) ** 3, c = (e, t = 150) => {
+			let n = performance.now(), r = (i) => {
+				let a = i - n;
+				if (a >= t) {
+					e.style.setProperty("opacity", "0"), e == null || e.remove();
+					return;
+				}
+				let o = t ? s(a / t) : 1;
+				e.style.setProperty("opacity", String(1 - o)), requestAnimationFrame(r);
+			};
+			requestAnimationFrame(r);
+		};
+		a.ctx.fadeOut = c, a.ctx.createLoading = o, i.value && o(t, i, a);
+	},
+	updated(e, t, n) {
+		if (t.value !== t.oldValue) {
+			let r = e.querySelector(n.ctx.markSelector);
+			t.value ? !r && n.ctx.createLoading(e, t, n) : r && n.ctx.fadeOut(r);
+		}
+	}
+};
+//#endregion
+export { i as vSvgLoading };