@7pmlabs/design-system 1.0.10 → 2.0.0

package/dist/design-system57.js

@@ -1,594 +1,7 @@
-import { useComponentId as e } from "./design-system10.js";
-import { BColorPickerFormat as t, BColorPickerPlacement as n, BColorPickerSize as r, BColorPickerTrigger as i } from "./design-system56.js";
-import { Fragment as a, computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, defineComponent as u, nextTick as d, normalizeClass as f, normalizeStyle as p, onBeforeUnmount as ee, onMounted as te, openBlock as m, ref as h, renderList as ne, renderSlot as re, toDisplayString as g, unref as _, useId as ie, watch as v } from "vue";
-//#region src/components/BColorPicker/BColorPicker.vue?vue&type=script&setup=true&lang.ts
-var ae = [
-	"tabindex",
-	"aria-expanded",
-	"aria-controls",
-	"aria-disabled",
-	"aria-label"
-], oe = { class: "b-color-picker__swatch-wrapper" }, se = {
-	key: 0,
-	class: "b-color-picker__text"
-}, ce = ["id"], le = {
-	key: 0,
-	class: "b-color-picker__arrow",
-	"aria-hidden": "true"
-}, ue = ["aria-valuetext"], de = { class: "b-color-picker__controls" }, fe = { class: "b-color-picker__preview" }, pe = { class: "b-color-picker__sliders" }, me = ["aria-valuenow"], he = ["aria-valuenow"], ge = { class: "b-color-picker__input-row" }, _e = {
-	key: 1,
-	class: "b-color-picker__format-label"
-}, ve = ["value"], ye = ["value"], be = {
-	key: 1,
-	class: "b-color-picker__presets"
-}, xe = { class: "b-color-picker__preset-label" }, Se = { class: "b-color-picker__preset-colors" }, Ce = ["aria-label", "onClick"], we = {
-	key: 2,
-	class: "b-color-picker__clear-row"
-}, Te = /* @__PURE__ */ u({
-	__name: "BColorPicker",
-	props: {
-		modelValue: { default: () => void 0 },
-		defaultValue: { default: "#1677ff" },
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		open: {
-			type: Boolean,
-			default: () => void 0
-		},
-		trigger: { default: () => i.Click },
-		size: { default: () => r.Medium },
-		placement: { default: () => n.BottomLeft },
-		format: { default: () => void 0 },
-		defaultFormat: { default: () => t.Hex },
-		disabledAlpha: {
-			type: Boolean,
-			default: !1
-		},
-		disabledFormat: {
-			type: Boolean,
-			default: !1
-		},
-		showText: {
-			type: [Boolean, Function],
-			default: !1
-		},
-		presets: { default: () => void 0 },
-		allowClear: {
-			type: Boolean,
-			default: !1
-		},
-		destroyOnHidden: {
-			type: Boolean,
-			default: !1
-		},
-		arrow: {
-			type: Boolean,
-			default: !0
-		}
-	},
-	emits: [
-		"update:modelValue",
-		"update:open",
-		"change",
-		"changeComplete",
-		"formatChange",
-		"clear",
-		"openChange"
-	],
-	setup(n, { expose: u, emit: Te }) {
-		let y = Te;
-		function Ee(e) {
-			let t = e.replace("#", ""), n = 1;
-			t.length === 4 ? t = t[0] + t[0] + t[1] + t[1] + t[2] + t[2] : t.length === 8 && (n = parseInt(t.slice(6, 8), 16) / 255, t = t.slice(0, 6));
-			let r = parseInt(t, 16);
-			return {
-				r: r >> 16 & 255,
-				g: r >> 8 & 255,
-				b: r & 255,
-				a: n
-			};
-		}
-		function b(e) {
-			let t = (e) => Math.round(Math.max(0, Math.min(255, e))).toString(16).padStart(2, "0"), n = `#${t(e.r)}${t(e.g)}${t(e.b)}`;
-			return e.a < 1 ? n + t(Math.round(e.a * 255)) : n;
-		}
-		function x(e) {
-			let t = e.r / 255, n = e.g / 255, r = e.b / 255, i = Math.max(t, n, r), a = i - Math.min(t, n, r), o = 0, s = i === 0 ? 0 : a / i, c = i;
-			if (a !== 0) switch (i) {
-				case t:
-					o = ((n - r) / a + (n < r ? 6 : 0)) / 6;
-					break;
-				case n:
-					o = ((r - t) / a + 2) / 6;
-					break;
-				case r:
-					o = ((t - n) / a + 4) / 6;
-					break;
-			}
-			return {
-				h: o * 360,
-				s: s * 100,
-				b: c * 100,
-				a: e.a
-			};
-		}
-		function S(e) {
-			let t = e.h / 360, n = e.s / 100, r = e.b / 100, i = 0, a = 0, o = 0, s = Math.floor(t * 6), c = t * 6 - s, l = r * (1 - n), u = r * (1 - c * n), d = r * (1 - (1 - c) * n);
-			switch (s % 6) {
-				case 0:
-					i = r, a = d, o = l;
-					break;
-				case 1:
-					i = u, a = r, o = l;
-					break;
-				case 2:
-					i = l, a = r, o = d;
-					break;
-				case 3:
-					i = l, a = u, o = r;
-					break;
-				case 4:
-					i = d, a = l, o = r;
-					break;
-				case 5:
-					i = r, a = l, o = u;
-					break;
-			}
-			return {
-				r: Math.round(i * 255),
-				g: Math.round(a * 255),
-				b: Math.round(o * 255),
-				a: e.a
-			};
-		}
-		function C(e) {
-			let t = e.r / 255, n = e.g / 255, r = e.b / 255, i = Math.max(t, n, r), a = Math.min(t, n, r), o = 0, s = 0, c = (i + a) / 2;
-			if (i !== a) {
-				let e = i - a;
-				switch (s = c > .5 ? e / (2 - i - a) : e / (i + a), i) {
-					case t:
-						o = ((n - r) / e + (n < r ? 6 : 0)) / 6;
-						break;
-					case n:
-						o = ((r - t) / e + 2) / 6;
-						break;
-					case r:
-						o = ((t - n) / e + 4) / 6;
-						break;
-				}
-			}
-			return {
-				h: Math.round(o * 360),
-				s: Math.round(s * 100),
-				l: Math.round(c * 100),
-				a: e.a
-			};
-		}
-		function w(e) {
-			let t = e.h / 360, n = e.s / 100, r = e.l / 100, i, a, o;
-			if (n === 0) i = a = o = r;
-			else {
-				let e = (e, t, n) => (n < 0 && (n += 1), n > 1 && --n, n < 1 / 6 ? e + (t - e) * 6 * n : n < 1 / 2 ? t : n < 2 / 3 ? e + (t - e) * (2 / 3 - n) * 6 : e), s = r < .5 ? r * (1 + n) : r + n - r * n, c = 2 * r - s;
-				i = e(c, s, t + 1 / 3), a = e(c, s, t), o = e(c, s, t - 1 / 3);
-			}
-			return {
-				r: Math.round(i * 255),
-				g: Math.round(a * 255),
-				b: Math.round(o * 255),
-				a: e.a
-			};
-		}
-		function T(e) {
-			let t = e.trim().toLowerCase(), n = t.match(/hsla?\(\s*(\d+)\s*,\s*(\d+)%?\s*,\s*(\d+)%?\s*(?:,\s*([\d.]+))?\s*\)/);
-			if (n) return x(w({
-				h: parseInt(n[1]),
-				s: parseInt(n[2]),
-				l: parseInt(n[3]),
-				a: n[4] === void 0 ? 1 : parseFloat(n[4])
-			}));
-			let r = t.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)/);
-			if (r) return x({
-				r: parseInt(r[1]),
-				g: parseInt(r[2]),
-				b: parseInt(r[3]),
-				a: r[4] === void 0 ? 1 : parseFloat(r[4])
-			});
-			let i = t.match(/hsb\(\s*(\d+)\s*,\s*(\d+)%?\s*,\s*(\d+)%?\s*(?:,\s*([\d.]+))?\s*\)/);
-			return i ? {
-				h: parseInt(i[1]),
-				s: parseInt(i[2]),
-				b: parseInt(i[3]),
-				a: i[4] === void 0 ? 1 : parseFloat(i[4])
-			} : x(Ee(t));
-		}
-		function E(e, n) {
-			let r = S(e);
-			switch (n) {
-				case t.Hex: return b(r);
-				case t.Rgb: return r.a < 1 ? `rgba(${r.r}, ${r.g}, ${r.b}, ${D(r.a, 2)})` : `rgb(${r.r}, ${r.g}, ${r.b})`;
-				case t.Hsl: {
-					let e = C(r);
-					return e.a < 1 ? `hsla(${e.h}, ${e.s}%, ${e.l}%, ${D(e.a, 2)})` : `hsl(${e.h}, ${e.s}%, ${e.l}%)`;
-				}
-				case t.Hsb: return e.a < 1 ? `hsb(${Math.round(e.h)}, ${Math.round(e.s)}%, ${Math.round(e.b)}%, ${D(e.a, 2)})` : `hsb(${Math.round(e.h)}, ${Math.round(e.s)}%, ${Math.round(e.b)}%)`;
-				default: return b(r);
-			}
-		}
-		function D(e, t) {
-			let n = 10 ** t;
-			return Math.round(e * n) / n;
-		}
-		function O(e) {
-			let t = S(e);
-			return t.a < 1 ? `rgba(${t.r}, ${t.g}, ${t.b}, ${D(t.a, 2)})` : `rgb(${t.r}, ${t.g}, ${t.b})`;
-		}
-		let { componentUID: De } = e(), k = ie(), A = h({ ...T(n.modelValue ?? n.defaultValue) }), j = h(n.format ?? n.defaultFormat), M = h(!1), N = h(!1), P = h(!1), F = o(() => n.open === void 0 ? M.value : n.open), Oe = o(() => n.destroyOnHidden ? F.value : P.value || F.value), I = o(() => n.format ?? j.value), L = o(() => E(A.value, I.value)), R = o(() => O(A.value)), ke = o(() => n.showText ? typeof n.showText == "function" ? n.showText(L.value) : L.value : "");
-		v(F, (e) => {
-			e && (P.value = !0);
-		}), v(() => n.modelValue, (e) => {
-			e !== void 0 && (A.value = T(e), N.value = !1);
-		}), v(() => n.format, (e) => {
-			e && (j.value = e);
-		});
-		let z = h(null), B = h(null), V = null;
-		function H(e) {
-			n.disabled || (n.open === void 0 ? M.value = e : y("update:open", e), y("openChange", e));
-		}
-		function Ae() {
-			H(!F.value);
-		}
-		function je() {
-			n.trigger === i.Click && Ae();
-		}
-		function Me() {
-			n.trigger === i.Hover && (V && clearTimeout(V), H(!0));
-		}
-		function Ne() {
-			n.trigger === i.Hover && (V = setTimeout(() => H(!1), 150));
-		}
-		function Pe() {
-			n.trigger === i.Hover && V && clearTimeout(V);
-		}
-		function Fe() {
-			n.trigger === i.Hover && (V = setTimeout(() => H(!1), 150));
-		}
-		function Ie(e) {
-			e.key === "Escape" && F.value && (e.preventDefault(), H(!1), z.value?.focus()), (e.key === "Enter" || e.key === " ") && !F.value && (e.preventDefault(), H(!0));
-		}
-		function Le(e) {
-			if (!F.value) return;
-			let t = e.target;
-			z.value?.contains(t) || B.value?.contains(t) || H(!1);
-		}
-		te(() => {
-			document.addEventListener("mousedown", Le);
-		}), ee(() => {
-			document.removeEventListener("mousedown", Le), V && clearTimeout(V);
-		}), v(() => n.open, (e) => {
-			e !== void 0 && (M.value = e);
-		});
-		let Re = null;
-		v(F, (e) => {
-			e ? (Re = document.activeElement, d(() => {
-				B.value?.focus();
-			})) : d(() => Re?.focus());
-		});
-		let U = h(null), W = !1;
-		function G(e) {
-			if (!U.value) return;
-			let t = U.value.getBoundingClientRect(), n = "touches" in e ? e.touches[0].clientX : e.clientX, r = "touches" in e ? e.touches[0].clientY : e.clientY, i = Math.max(0, Math.min(1, (n - t.left) / t.width)), a = Math.max(0, Math.min(1, (r - t.top) / t.height));
-			A.value = {
-				...A.value,
-				s: i * 100,
-				b: (1 - a) * 100
-			}, Z();
-		}
-		function ze(e) {
-			e.preventDefault(), W = !0, G(e), document.addEventListener("mousemove", Be), document.addEventListener("mouseup", Ve);
-		}
-		function Be(e) {
-			W && G(e);
-		}
-		function Ve() {
-			W = !1, document.removeEventListener("mousemove", Be), document.removeEventListener("mouseup", Ve), Q();
-		}
-		function He(e) {
-			e.preventDefault(), W = !0, G(e), document.addEventListener("touchmove", Ue), document.addEventListener("touchend", We);
-		}
-		function Ue(e) {
-			W && G(e);
-		}
-		function We() {
-			W = !1, document.removeEventListener("touchmove", Ue), document.removeEventListener("touchend", We), Q();
-		}
-		let K = h(null), q = !1;
-		function Ge(e) {
-			if (!K.value) return;
-			let t = K.value.getBoundingClientRect(), n = "touches" in e ? e.touches[0].clientX : e.clientX, r = Math.max(0, Math.min(1, (n - t.left) / t.width));
-			A.value = {
-				...A.value,
-				h: r * 360
-			}, Z();
-		}
-		function Ke(e) {
-			e.preventDefault(), q = !0, Ge(e), document.addEventListener("mousemove", qe), document.addEventListener("mouseup", Je);
-		}
-		function qe(e) {
-			q && Ge(e);
-		}
-		function Je() {
-			q = !1, document.removeEventListener("mousemove", qe), document.removeEventListener("mouseup", Je), Q();
-		}
-		let J = h(null), Y = !1;
-		function Ye(e) {
-			if (!J.value) return;
-			let t = J.value.getBoundingClientRect(), n = "touches" in e ? e.touches[0].clientX : e.clientX, r = Math.max(0, Math.min(1, (n - t.left) / t.width));
-			A.value = {
-				...A.value,
-				a: D(r, 2)
-			}, Z();
-		}
-		function Xe(e) {
-			e.preventDefault(), Y = !0, Ye(e), document.addEventListener("mousemove", Ze), document.addEventListener("mouseup", Qe);
-		}
-		function Ze(e) {
-			Y && Ye(e);
-		}
-		function Qe() {
-			Y = !1, document.removeEventListener("mousemove", Ze), document.removeEventListener("mouseup", Qe), Q();
-		}
-		let X = [
-			t.Hex,
-			t.Hsb,
-			t.Rgb,
-			t.Hsl
-		];
-		function $e() {
-			if (n.disabledFormat) return;
-			let e = X[(X.indexOf(I.value) + 1) % X.length];
-			n.format === void 0 && (j.value = e), y("formatChange", e);
-		}
-		let et = o(() => {
-			switch (I.value) {
-				case t.Hex: return b(S(A.value)).replace("#", "");
-				case t.Rgb: {
-					let e = S(A.value);
-					return `${e.r}, ${e.g}, ${e.b}`;
-				}
-				case t.Hsl: {
-					let e = C(S(A.value));
-					return `${e.h}, ${e.s}%, ${e.l}%`;
-				}
-				case t.Hsb: return `${Math.round(A.value.h)}, ${Math.round(A.value.s)}%, ${Math.round(A.value.b)}%`;
-				default: return "";
-			}
-		}), tt = o(() => Math.round(A.value.a * 100));
-		function nt(e) {
-			let n = e.target.value.trim();
-			try {
-				let e;
-				switch (I.value) {
-					case t.Hex:
-						e = T("#" + n);
-						break;
-					case t.Rgb: {
-						let t = n.split(",").map((e) => parseInt(e.trim()));
-						if (t.length >= 3) e = x({
-							r: t[0],
-							g: t[1],
-							b: t[2],
-							a: A.value.a
-						});
-						else return;
-						break;
-					}
-					case t.Hsl: {
-						let t = n.split(",").map((e) => parseInt(e.trim()));
-						if (t.length >= 3) e = x(w({
-							h: t[0],
-							s: t[1],
-							l: t[2],
-							a: A.value.a
-						}));
-						else return;
-						break;
-					}
-					case t.Hsb: {
-						let t = n.split(",").map((e) => parseInt(e.trim()));
-						if (t.length >= 3) e = {
-							h: t[0],
-							s: t[1],
-							b: t[2],
-							a: A.value.a
-						};
-						else return;
-						break;
-					}
-					default: return;
-				}
-				A.value = e, Z(), Q();
-			} catch {}
-		}
-		function rt(e) {
-			let t = parseInt(e.target.value);
-			isNaN(t) || (A.value = {
-				...A.value,
-				a: Math.max(0, Math.min(100, t)) / 100
-			}, Z(), Q());
-		}
-		function it(e) {
-			A.value = T(e), N.value = !1, Z(), Q();
-		}
-		function at() {
-			N.value = !0, y("clear");
-		}
-		function Z() {
-			N.value = !1;
-			let e = E(A.value, I.value), t = O(A.value);
-			y("update:modelValue", e), y("change", e, t);
-		}
-		function Q() {
-			y("changeComplete", E(A.value, I.value));
-		}
-		let $ = o(() => `--b-color-picker-anchor-${De.value}`), ot = o(() => ({ backgroundColor: `hsl(${A.value.h}, 100%, 50%)` })), st = o(() => ({
-			left: `${A.value.s}%`,
-			top: `${100 - A.value.b}%`
-		})), ct = o(() => ({ left: `${A.value.h / 360 * 100}%` })), lt = o(() => ({ left: `${A.value.a * 100}%` })), ut = o(() => {
-			let e = S({
-				...A.value,
-				a: 1
-			});
-			return `linear-gradient(to right, rgba(${e.r}, ${e.g}, ${e.b}, 0), rgb(${e.r}, ${e.g}, ${e.b}))`;
-		}), dt = o(() => {
-			switch (n.size) {
-				case r.Small: return "b-color-picker--sm";
-				case r.Large: return "b-color-picker--lg";
-				default: return "b-color-picker--md";
-			}
-		});
-		function ft(e) {
-			e.key === "Escape" && (e.preventDefault(), H(!1), z.value?.focus());
-		}
-		return u({
-			open: () => H(!0),
-			close: () => H(!1)
-		}), (e, t) => (m(), c("div", { class: f(["b-color-picker", [dt.value, { "b-color-picker--disabled": n.disabled }]]) }, [l("div", {
-			ref_key: "triggerRef",
-			ref: z,
-			class: "b-color-picker__trigger",
-			style: p({ anchorName: $.value }),
-			role: "button",
-			tabindex: n.disabled ? -1 : 0,
-			"aria-expanded": F.value,
-			"aria-controls": F.value ? _(k) : void 0,
-			"aria-disabled": n.disabled,
-			"aria-label": `Color picker: ${L.value}`,
-			"aria-haspopup": "dialog",
-			onClick: je,
-			onMouseenter: Me,
-			onMouseleave: Ne,
-			onKeydown: Ie
-		}, [re(e.$slots, "default", {}, () => [l("div", oe, [l("div", {
-			class: f(["b-color-picker__swatch", { "b-color-picker__swatch--cleared": N.value && n.allowClear }]),
-			style: p({ backgroundColor: N.value ? "transparent" : R.value })
-		}, null, 6)]), n.showText ? (m(), c("span", se, g(ke.value), 1)) : s("", !0)])], 44, ae), Oe.value ? (m(), c("div", {
-			key: 0,
-			ref_key: "panelRef",
-			ref: B,
-			id: _(k),
-			class: f(["b-color-picker__panel", [`b-color-picker__panel--${n.placement}`, {
-				"b-color-picker__panel--open": F.value,
-				"b-color-picker__panel--no-arrow": !n.arrow
-			}]]),
-			style: p({ positionAnchor: $.value }),
-			role: "dialog",
-			"aria-label": "Color picker",
-			tabindex: "-1",
-			onMouseenter: Pe,
-			onMouseleave: Fe,
-			onKeydown: ft
-		}, [
-			n.arrow ? (m(), c("div", le)) : s("", !0),
-			l("div", {
-				ref_key: "saturationRef",
-				ref: U,
-				class: "b-color-picker__saturation",
-				style: p(ot.value),
-				role: "slider",
-				"aria-label": "Color saturation and brightness",
-				"aria-valuetext": `Saturation ${Math.round(A.value.s)}%, Brightness ${Math.round(A.value.b)}%`,
-				tabindex: "0",
-				onMousedown: ze,
-				onTouchstartPassive: He
-			}, [
-				t[0] ||= l("div", { class: "b-color-picker__saturation-white" }, null, -1),
-				t[1] ||= l("div", { class: "b-color-picker__saturation-black" }, null, -1),
-				l("div", {
-					class: "b-color-picker__saturation-handle",
-					style: p(st.value)
-				}, null, 4)
-			], 44, ue),
-			l("div", de, [l("div", fe, [l("div", {
-				class: "b-color-picker__preview-color",
-				style: p({ backgroundColor: R.value })
-			}, null, 4)]), l("div", pe, [l("div", {
-				ref_key: "hueRef",
-				ref: K,
-				class: "b-color-picker__hue",
-				role: "slider",
-				"aria-label": "Hue",
-				"aria-valuenow": Math.round(A.value.h),
-				"aria-valuemin": "0",
-				"aria-valuemax": "360",
-				tabindex: "0",
-				onMousedown: Ke
-			}, [l("div", {
-				class: "b-color-picker__hue-handle",
-				style: p(ct.value)
-			}, null, 4)], 40, me), n.disabledAlpha ? s("", !0) : (m(), c("div", {
-				key: 0,
-				ref_key: "alphaRef",
-				ref: J,
-				class: "b-color-picker__alpha",
-				style: p({ "--b-color-picker-alpha-gradient": ut.value }),
-				role: "slider",
-				"aria-label": "Opacity",
-				"aria-valuenow": tt.value,
-				"aria-valuemin": "0",
-				"aria-valuemax": "100",
-				tabindex: "0",
-				onMousedown: Xe
-			}, [l("div", {
-				class: "b-color-picker__alpha-handle",
-				style: p(lt.value)
-			}, null, 4)], 44, he))])]),
-			l("div", ge, [
-				n.disabledFormat ? (m(), c("span", _e, g(I.value.toUpperCase()), 1)) : (m(), c("button", {
-					key: 0,
-					class: "b-color-picker__format-btn",
-					type: "button",
-					"aria-label": "Switch color format",
-					onClick: $e
-				}, g(I.value.toUpperCase()), 1)),
-				l("input", {
-					class: "b-color-picker__input",
-					type: "text",
-					value: et.value,
-					"aria-label": "Color value",
-					onChange: nt
-				}, null, 40, ve),
-				n.disabledAlpha ? s("", !0) : (m(), c("input", {
-					key: 2,
-					class: "b-color-picker__alpha-input",
-					type: "text",
-					value: `${tt.value}%`,
-					"aria-label": "Alpha percentage",
-					onChange: rt
-				}, null, 40, ye))
-			]),
-			n.presets && n.presets.length ? (m(), c("div", be, [(m(!0), c(a, null, ne(n.presets, (e) => (m(), c("div", {
-				key: e.label,
-				class: "b-color-picker__preset-group"
-			}, [l("div", xe, g(e.label), 1), l("div", Se, [(m(!0), c(a, null, ne(e.colors, (e) => (m(), c("button", {
-				key: e,
-				type: "button",
-				class: "b-color-picker__preset-color",
-				style: p({ backgroundColor: e }),
-				"aria-label": `Select color ${e}`,
-				onClick: (t) => it(e)
-			}, null, 12, Ce))), 128))])]))), 128))])) : s("", !0),
-			n.allowClear ? (m(), c("div", we, [l("button", {
-				type: "button",
-				class: "b-color-picker__clear-btn",
-				"aria-label": "Clear color",
-				onClick: at
-			}, " Clear ")])) : s("", !0)
-		], 46, ce)) : s("", !0)], 2));
-	}
-});
+import e from "./design-system56.js";
+//#region src/components/BCheckbox/BCheckboxGroup.vue
+var t = e;
 //#endregion
-export { Te as default };
+export { t as default };
 
 //# sourceMappingURL=design-system57.js.map