@well-insight/ui 0.1.7 → 0.1.9

package/dist/split-button/style.js

@@ -0,0 +1,4 @@
+import '../theme/styles.css'
+import '../styles/base.css'
+import '../components/Button/styles.css'
+import '../components/SplitButton/styles.css'

package/dist/splitter/index.js

@@ -0,0 +1,185 @@
+import { n as e } from "../locale-CYkJyRd1.js";
+import "./style.js";
+import { Comment as t, Fragment as n, Text as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, defineComponent as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as ee, openBlock as f, ref as p, renderSlot as m, resolveDynamicComponent as h, unref as g, useSlots as _, watch as v } from "vue";
+//#region src/components/Splitter/size.ts
+function y(e, t = "percent") {
+	return e == null ? t : typeof e == "string" ? "px" : e <= 1 ? "ratio" : "percent";
+}
+function b(e, t, n) {
+	if (typeof e == "string") {
+		let t = Number.parseFloat(e);
+		return Number.isFinite(t) ? t : 0;
+	}
+	return n === "ratio" ? e * t : e / 100 * t;
+}
+function x(e, t, n) {
+	return t <= 0 ? n === "px" ? "0px" : 0 : n === "px" ? `${Math.round(e)}px` : Number(n === "ratio" ? (e / t).toFixed(4) : (e / t * 100).toFixed(1));
+}
+function S(e, t) {
+	return t === "px" || typeof e == "string" ? typeof e == "string" ? e : `${e}px` : t === "ratio" ? `${e * 100}%` : `${e}%`;
+}
+function C(e, t, n, r) {
+	let i = Math.min(n, r);
+	return Math.min(i, Math.max(Math.min(t, i), e));
+}
+//#endregion
+//#region src/components/Splitter/Splitter.vue?vue&type=script&setup=true&lang.ts
+var w = ["aria-orientation"], T = [
+	"tabindex",
+	"aria-orientation",
+	"aria-valuenow",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-disabled",
+	"aria-label"
+], E = /* @__PURE__ */ l({
+	__name: "Splitter",
+	props: {
+		layout: {},
+		direction: {},
+		size: {},
+		defaultSize: { default: 50 },
+		min: {},
+		max: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		resizeTriggerSize: { default: 6 },
+		pane1Class: {},
+		pane1Style: {},
+		pane2Class: {},
+		pane2Style: {}
+	},
+	emits: [
+		"update:size",
+		"resize",
+		"drag-start",
+		"drag-move",
+		"drag-end"
+	],
+	setup(l, { emit: E }) {
+		let D = l, O = E, k = e(), A = _(), j = p(null), M = p(!1), N = i(() => D.layout ?? D.direction ?? "horizontal"), P = i(() => N.value === "vertical"), F = i(() => D.size !== void 0), I = i(() => y(D.size ?? D.defaultSize, "percent")), L = i(() => D.min === void 0 ? I.value === "ratio" ? .1 : I.value === "px" ? "40px" : 10 : D.min), R = i(() => D.max === void 0 ? I.value === "ratio" ? .9 : I.value === "px" ? "99999px" : 90 : D.max), z = p(D.defaultSize), B = i(() => F.value ? D.size : z.value);
+		v(() => D.size, (e) => {
+			e !== void 0 && !M.value && (z.value = e);
+		}), v(() => D.defaultSize, (e) => {
+			F.value || (z.value = e);
+		});
+		let V = 0, H = 0, U = 0;
+		function W(e) {
+			let i = [];
+			for (let a of e) if (a.type !== t && !(a.type === r && !String(a.children ?? "").trim())) {
+				if (a.type === n && Array.isArray(a.children)) {
+					i.push(...W(a.children));
+					continue;
+				}
+				i.push(a);
+			}
+			return i;
+		}
+		let G = i(() => {
+			let e = W(A.default?.() ?? []);
+			return [e[0] ?? null, e[1] ?? null];
+		});
+		function K() {
+			let e = j.value;
+			if (!e) return 0;
+			let t = e.getBoundingClientRect(), n = P.value ? t.height : t.width;
+			return Math.max(0, n - D.resizeTriggerSize);
+		}
+		function q(e) {
+			return typeof e == "string" || e == null ? void 0 : e;
+		}
+		let J = i(() => ({
+			flex: `0 0 ${S(B.value, I.value)}`,
+			...q(D.pane1Style)
+		})), te = i(() => q(D.pane2Style)), ne = i(() => P.value ? {
+			height: `${D.resizeTriggerSize}px`,
+			width: "100%"
+		} : {
+			width: `${D.resizeTriggerSize}px`,
+			height: "100%"
+		});
+		function re(e) {
+			e !== B.value && (z.value = e, O("update:size", e), O("resize", e));
+		}
+		function Y(e, t) {
+			let n = I.value;
+			t <= 0 || re(x(C(e, b(L.value, t, y(L.value, n)), b(R.value, t, y(R.value, n)), t), t, n));
+		}
+		function X(e) {
+			if (!M.value || U <= 0 || D.disabled) return;
+			let t = P.value ? e.clientY : e.clientX;
+			Y(H + (t - V), U), O("drag-move", e);
+		}
+		function Z(e) {
+			M.value && (M.value = !1, window.removeEventListener("mousemove", X, !0), window.removeEventListener("mouseup", Q, !0), window.removeEventListener("pointermove", X, !0), window.removeEventListener("pointerup", Q, !0), document.body.style.removeProperty("cursor"), document.body.style.removeProperty("user-select"), e && O("drag-end", e));
+		}
+		function Q(e) {
+			Z(e);
+		}
+		function $(e) {
+			D.disabled || "button" in e && e.button > 0 || j.value && (e.preventDefault(), U = K(), !(U <= 0) && (V = P.value ? e.clientY : e.clientX, H = b(B.value, U, I.value), M.value = !0, document.body.style.cursor = P.value ? "row-resize" : "col-resize", document.body.style.userSelect = "none", O("drag-start", e), window.addEventListener("mousemove", X, !0), window.addEventListener("mouseup", Q, !0), window.addEventListener("pointermove", X, !0), window.addEventListener("pointerup", Q, !0)));
+		}
+		function ie(e) {
+			if (D.disabled) return;
+			let t = I.value, n = K();
+			n <= 0 && t !== "px" && (n = 100);
+			let r = b(B.value, n, t), i = e.shiftKey ? n * .05 : n * .01, a = (t) => {
+				e.preventDefault(), Y(r + t, n);
+			};
+			if (P.value) {
+				e.key === "ArrowUp" ? a(-i) : e.key === "ArrowDown" && a(i);
+				return;
+			}
+			e.key === "ArrowLeft" ? a(-i) : e.key === "ArrowRight" && a(i);
+		}
+		let ae = i(() => {
+			let e = I.value, t = B.value;
+			return e === "px" && typeof t == "string" ? Math.round(Number.parseFloat(t)) : e === "ratio" && typeof t == "number" ? Math.round(t * 100) : typeof t == "number" ? Math.round(t) : 0;
+		}), oe = i(() => {
+			let e = L.value;
+			return typeof e == "string" ? Math.round(Number.parseFloat(e)) : I.value === "ratio" ? Math.round(e * 100) : Math.round(e);
+		}), se = i(() => {
+			let e = R.value;
+			return typeof e == "string" ? Math.round(Number.parseFloat(e)) : I.value === "ratio" ? Math.round(e * 100) : Math.round(e);
+		});
+		return ee(() => {
+			Z();
+		}), (e, t) => (f(), s("div", {
+			ref_key: "root",
+			ref: j,
+			class: u(["wi-splitter", [`wi-splitter--${N.value}`, {
+				"wi-splitter--dragging": M.value,
+				"wi-splitter--disabled": l.disabled
+			}]]),
+			"aria-orientation": P.value ? "vertical" : "horizontal"
+		}, [
+			c("div", {
+				class: u(["wi-splitter__panel", l.pane1Class]),
+				style: d(J.value)
+			}, [g(A).panel1 ? m(e.$slots, "panel1", {}, void 0, void 0, 0) : g(A)[1] ? m(e.$slots, "1", {}, void 0, void 0, 1) : G.value[0] ? (f(), a(h(G.value[0]), { key: 2 })) : o("", !0)], 6),
+			c("div", {
+				class: "wi-splitter__gutter",
+				role: "separator",
+				tabindex: l.disabled ? -1 : 0,
+				"aria-orientation": P.value ? "horizontal" : "vertical",
+				"aria-valuenow": ae.value,
+				"aria-valuemin": oe.value,
+				"aria-valuemax": se.value,
+				"aria-disabled": l.disabled || void 0,
+				"aria-label": P.value ? g(k).resizeVertical : g(k).resizeHorizontal,
+				style: d(ne.value),
+				onPointerdown: $,
+				onMousedown: $,
+				onKeydown: ie
+			}, [m(e.$slots, "resize-trigger")], 44, T),
+			c("div", {
+				class: u(["wi-splitter__panel wi-splitter__panel--fill", l.pane2Class]),
+				style: d(te.value)
+			}, [g(A).panel2 ? m(e.$slots, "panel2", {}, void 0, void 0, 0) : g(A)[2] ? m(e.$slots, "2", {}, void 0, void 0, 1) : G.value[1] ? (f(), a(h(G.value[1]), { key: 2 })) : o("", !0)], 6)
+		], 10, w));
+	}
+});
+//#endregion
+export { E as WiSplitter };