@7pmlabs/design-system 1.0.9 → 1.0.11

package/dist/design-system66.js

@@ -1,8 +1,594 @@
-import e from "./design-system64.js";
-/* empty css                */
-//#region src/components/BDescriptions/BDescriptions.vue
-var t = e;
+import { useComponentId as e } from "./design-system10.js";
+import { BColorPickerFormat as t, BColorPickerPlacement as n, BColorPickerSize as r, BColorPickerTrigger as i } from "./design-system65.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));
+	}
+});
 //#endregion
-export { t as default };
+export { Te as default };
 
 //# sourceMappingURL=design-system66.js.map