rappel-ui 1.0.13 → 1.0.14

package/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/es/directives/vResizable.d.ts

@@ -0,0 +1,14 @@
+import { DirectiveBinding } from 'vue';
+interface ResizeOptions {
+    minWidth?: number;
+    minHeight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+}
+/** main directive */
+declare const vResizable: {
+    mounted(el: HTMLElement, binding: DirectiveBinding): void;
+    beforeUnmount(el: HTMLElement): void;
+};
+declare function applyResizable(el: HTMLElement, options?: ResizeOptions): () => void;
+export { vResizable, applyResizable };

package/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/es/directives/vSvgLoading.d.ts

@@ -0,0 +1,4 @@
+export declare const vSvgLoading: {
+    mounted(el: HTMLElement, binding: any, vNode: any): void;
+    updated(el: HTMLElement, binding: any, vNode: any): void;
+};

package/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 };