bitboss-ui 2.1.135 → 3.0.0-alpha.4

package/dist/components/BbBaseColorPalette/BbBaseColorPalette.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,395 @@
+import { useLocale as e } from "../../composables/useLocale.js";
+import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, onMounted as l, onUnmounted as u, openBlock as d, ref as f, renderList as p, toDisplayString as ee, unref as m, watch as te } from "vue";
+//#region src/components/BbBaseColorPalette/BbBaseColorPalette.vue?vue&type=script&setup=true&lang.ts
+var ne = ["aria-label"], re = {
+	"aria-live": "polite",
+	class: "bb-base-color-palette__canvas-announcer",
+	role: "status"
+}, ie = { class: "bb-base-color-palette__controls" }, ae = { class: "bb-base-color-palette__preview-wrap" }, oe = { class: "bb-base-color-palette__sliders" }, se = ["aria-label", "aria-valuenow"], ce = ["aria-label", "aria-valuenow"], le = ["aria-label", "disabled"], ue = {
+	key: 0,
+	class: "bb-base-color-palette__swatches"
+}, de = [
+	"aria-label",
+	"aria-pressed",
+	"onClick"
+], h = /*@__PURE__*/ o({
+	__name: "BbBaseColorPalette",
+	props: {
+		modelValue: {},
+		alpha: {
+			type: Boolean,
+			default: !1
+		},
+		eyeDropper: {
+			type: Boolean,
+			default: !1
+		},
+		swatches: { type: [Boolean, Array] }
+	},
+	emits: ["update:modelValue"],
+	setup(o, { expose: h, emit: fe }) {
+		let g = o, pe = fe;
+		function _(e, t, n) {
+			let r = (r) => {
+				let i = (r + e / 60) % 6;
+				return n - n * t * Math.max(Math.min(i, 4 - i, 1), 0);
+			};
+			return [
+				Math.round(r(5) * 255),
+				Math.round(r(3) * 255),
+				Math.round(r(1) * 255)
+			];
+		}
+		function v(e, t, n) {
+			let r = e / 255, i = t / 255, a = n / 255, o = Math.max(r, i, a), s = o - Math.min(r, i, a), c = o === 0 ? 0 : s / o, l = o, u = 0;
+			return s !== 0 && (u = o === r ? ((i - a) / s + (i < a ? 6 : 0)) / 6 : o === i ? ((a - r) / s + 2) / 6 : ((r - i) / s + 4) / 6), [
+				u * 360,
+				c,
+				l
+			];
+		}
+		function y(e) {
+			let t = e.replace(/^#/, "");
+			return t.length === 3 ? [
+				parseInt(t[0] + t[0], 16),
+				parseInt(t[1] + t[1], 16),
+				parseInt(t[2] + t[2], 16),
+				1
+			] : t.length === 6 ? [
+				parseInt(t.slice(0, 2), 16),
+				parseInt(t.slice(2, 4), 16),
+				parseInt(t.slice(4, 6), 16),
+				1
+			] : t.length === 8 ? [
+				parseInt(t.slice(0, 2), 16),
+				parseInt(t.slice(2, 4), 16),
+				parseInt(t.slice(4, 6), 16),
+				parseInt(t.slice(6, 8), 16) / 255
+			] : [
+				0,
+				0,
+				0,
+				1
+			];
+		}
+		function b(e) {
+			return Math.round(Math.max(0, Math.min(255, e))).toString(16).padStart(2, "0");
+		}
+		function me(e, t, n, r, i) {
+			let a = `#${b(e)}${b(t)}${b(n)}`;
+			return i ? a + b(r * 255) : a;
+		}
+		let he = [
+			[
+				"#FFCDD2",
+				"#EF9A9A",
+				"#F44336",
+				"#D32F2F",
+				"#B71C1C"
+			],
+			[
+				"#FFE0B2",
+				"#FFCC80",
+				"#FF9800",
+				"#F57C00",
+				"#E65100"
+			],
+			[
+				"#FFF9C4",
+				"#FFF59D",
+				"#FFEB3B",
+				"#FBC02D",
+				"#F57F17"
+			],
+			[
+				"#C8E6C9",
+				"#A5D6A7",
+				"#4CAF50",
+				"#388E3C",
+				"#1B5E20"
+			],
+			[
+				"#BBDEFB",
+				"#90CAF9",
+				"#2196F3",
+				"#1976D2",
+				"#0D47A1"
+			],
+			[
+				"#E1BEE7",
+				"#CE93D8",
+				"#9C27B0",
+				"#7B1FA2",
+				"#4A148C"
+			]
+		], { t: x } = e(), S = f(0), C = f(1), w = f(1), T = f(1), E = n(() => {
+			let [e, t, n] = _(S.value, C.value, w.value);
+			return me(e, t, n, T.value, g.alpha);
+		}), ge = n(() => {
+			let [e, t, n] = _(S.value, C.value, w.value);
+			return g.alpha ? `rgba(${e},${t},${n},${T.value})` : `rgb(${e},${t},${n})`;
+		}), _e = n(() => !!g.swatches), ve = n(() => Array.isArray(g.swatches) ? g.swatches : he), D = f(null), O = f(null), k = f(null), A = f(null), j = f(null), M = f(null), N = f(null), P = () => {
+			let e = O.value;
+			if (!e || e.width === 0 || e.height === 0) return;
+			let t = e.getContext("2d");
+			if (!t) return;
+			let [n, r, i] = _(S.value, 1, 1), a = t.createLinearGradient(0, 0, e.width, 0);
+			a.addColorStop(0, "#ffffff"), a.addColorStop(1, `rgb(${n},${r},${i})`), t.fillStyle = a, t.fillRect(0, 0, e.width, e.height);
+			let o = t.createLinearGradient(0, 0, 0, e.height);
+			o.addColorStop(0, "rgba(0,0,0,0)"), o.addColorStop(1, "rgba(0,0,0,1)"), t.fillStyle = o, t.fillRect(0, 0, e.width, e.height);
+		}, ye = () => {
+			let e = k.value;
+			if (!e || e.width === 0 || e.height === 0) return;
+			let t = e.getContext("2d");
+			if (!t) return;
+			let n = t.createLinearGradient(0, 0, e.width, 0);
+			for (let e = 0; e <= 6; e++) n.addColorStop(e / 6, `hsl(${e * 60},100%,50%)`);
+			t.fillStyle = n, t.fillRect(0, 0, e.width, e.height);
+		}, F = () => {
+			let e = A.value;
+			if (!e || e.width === 0 || e.height === 0) return;
+			let t = e.getContext("2d");
+			if (!t) return;
+			t.clearRect(0, 0, e.width, e.height);
+			let [n, r, i] = _(S.value, C.value, w.value), a = t.createLinearGradient(0, 0, e.width, 0);
+			a.addColorStop(0, `rgba(${n},${r},${i},0)`), a.addColorStop(1, `rgba(${n},${r},${i},1)`), t.fillStyle = a, t.fillRect(0, 0, e.width, e.height);
+		}, be = () => {
+			P(), ye(), g.alpha && F();
+		}, I = null, L = (e) => {
+			e.width = e.offsetWidth, e.height = e.offsetHeight;
+		}, R = () => {
+			let e = O.value, t = k.value;
+			!e || !t || e.offsetWidth === 0 || (L(e), L(t), g.alpha && A.value && L(A.value), be());
+		};
+		l(() => {
+			I = new ResizeObserver(R), O.value && I.observe(O.value), z(g.modelValue), R();
+		}), u(() => {
+			I?.disconnect();
+		});
+		let z = (e) => {
+			if (e) try {
+				let [t, n, r, i] = y(e), [a, o, s] = v(t, n, r);
+				o > .01 && (S.value = a), C.value = o, w.value = s, T.value = i;
+			} catch {}
+		};
+		te(() => g.modelValue, (e) => {
+			!e || e === E.value || (z(e), P(), g.alpha && F());
+		});
+		let B = () => pe("update:modelValue", E.value), V = f(!1), H = (e) => {
+			let t = j.value;
+			if (!t) return {
+				s: C.value,
+				v: w.value
+			};
+			let n = t.getBoundingClientRect();
+			return {
+				s: Math.max(0, Math.min(1, (e.clientX - n.left) / n.width)),
+				v: Math.max(0, Math.min(1, 1 - (e.clientY - n.top) / n.height))
+			};
+		}, xe = (e) => {
+			j.value?.setPointerCapture(e.pointerId), V.value = !0;
+			let { s: t, v: n } = H(e);
+			C.value = t, w.value = n, g.alpha && F(), B();
+		}, Se = (e) => {
+			if (!V.value) return;
+			let { s: t, v: n } = H(e);
+			C.value = t, w.value = n, g.alpha && F(), B();
+		}, U = f(""), W = () => {
+			U.value = x("colorInput.mainCanvasSelectedColor", E.value).value;
+		}, G = (e) => {
+			j.value?.releasePointerCapture(e.pointerId), V.value && W(), V.value = !1;
+		}, Ce = (e) => {
+			let t = e.shiftKey ? .05 : .01;
+			switch (e.key) {
+				case "ArrowLeft":
+					C.value = Math.max(0, C.value - t);
+					break;
+				case "ArrowRight":
+					C.value = Math.min(1, C.value + t);
+					break;
+				case "ArrowUp":
+					w.value = Math.min(1, w.value + t);
+					break;
+				case "ArrowDown":
+					w.value = Math.max(0, w.value - t);
+					break;
+				default: return;
+			}
+			g.alpha && F(), B(), W(), e.preventDefault();
+		}, K = f(!1), q = (e) => {
+			let t = M.value;
+			if (!t) return S.value;
+			let n = t.getBoundingClientRect();
+			return Math.max(0, Math.min(360, (e.clientX - n.left) / n.width * 360));
+		}, we = (e) => {
+			M.value?.setPointerCapture(e.pointerId), K.value = !0, S.value = q(e), P(), g.alpha && F(), B();
+		}, Te = (e) => {
+			K.value && (S.value = q(e), P(), g.alpha && F(), B());
+		}, J = (e) => {
+			M.value?.releasePointerCapture(e.pointerId), K.value = !1;
+		}, Ee = (e) => {
+			let t = e.shiftKey ? 10 : 1;
+			switch (e.key) {
+				case "ArrowLeft":
+					S.value = Math.max(0, S.value - t);
+					break;
+				case "ArrowRight":
+					S.value = Math.min(360, S.value + t);
+					break;
+				default: return;
+			}
+			P(), g.alpha && F(), B(), e.preventDefault();
+		}, Y = f(!1), X = (e) => {
+			let t = N.value;
+			if (!t) return T.value;
+			let n = t.getBoundingClientRect();
+			return Math.max(0, Math.min(1, (e.clientX - n.left) / n.width));
+		}, De = (e) => {
+			N.value?.setPointerCapture(e.pointerId), Y.value = !0, T.value = X(e), B();
+		}, Oe = (e) => {
+			Y.value && (T.value = X(e), B());
+		}, Z = (e) => {
+			N.value?.releasePointerCapture(e.pointerId), Y.value = !1;
+		}, ke = (e) => {
+			let t = e.shiftKey ? .05 : .01;
+			switch (e.key) {
+				case "ArrowLeft":
+					T.value = Math.max(0, T.value - t);
+					break;
+				case "ArrowRight":
+					T.value = Math.min(1, T.value + t);
+					break;
+				default: return;
+			}
+			B(), e.preventDefault();
+		}, Q = typeof window < "u" && "EyeDropper" in window, $ = f(!1), Ae = async () => {
+			if (Q) try {
+				$.value = !0;
+				let e = await new window.EyeDropper().open();
+				Me(e.sRGBHex);
+			} catch {} finally {
+				$.value = !1;
+			}
+		}, je = (e) => E.value.slice(0, 7).toLowerCase() === e.slice(0, 7).toLowerCase(), Me = (e) => {
+			let [t, n, r, i] = y(e), [a, o, s] = v(t, n, r);
+			o > .01 && (S.value = a), C.value = o, w.value = s, T.value = i, P(), g.alpha && F(), B();
+		};
+		return h({ el: D }), (e, n) => (d(), i("div", {
+			ref_key: "pickerRef",
+			ref: D,
+			class: "bb-base-color-palette"
+		}, [
+			a("div", {
+				ref_key: "canvasWrapRef",
+				ref: j,
+				"aria-label": m(x)("colorInput.mainCanvasDesc").value,
+				class: "bb-base-color-palette__canvas-wrap",
+				role: "application",
+				tabindex: "0",
+				onKeydown: Ce,
+				onPointercancel: G,
+				onPointerdown: xe,
+				onPointermove: Se,
+				onPointerup: G
+			}, [a("canvas", {
+				ref_key: "mainCanvasRef",
+				ref: O,
+				"aria-hidden": "true",
+				class: "bb-base-color-palette__canvas"
+			}, null, 512), a("div", {
+				"aria-hidden": "true",
+				class: "bb-base-color-palette__canvas-thumb",
+				style: c({
+					left: `${C.value * 100}%`,
+					top: `${(1 - w.value) * 100}%`
+				})
+			}, null, 4)], 40, ne),
+			a("div", re, ee(U.value), 1),
+			a("div", ie, [
+				a("div", ae, [a("div", {
+					class: s(["bb-base-color-palette__preview", { "bb-base-color-palette__preview--alpha": e.alpha }]),
+					style: c({ "--picker-preview-color": ge.value })
+				}, null, 6)]),
+				a("div", oe, [a("div", {
+					ref_key: "hueWrapRef",
+					ref: M,
+					"aria-label": m(x)("colorInput.hueCanvasDesc").value,
+					"aria-valuemax": "360",
+					"aria-valuemin": "0",
+					"aria-valuenow": Math.round(S.value),
+					class: "bb-base-color-palette__slider-wrap",
+					role: "slider",
+					tabindex: "0",
+					onKeydown: Ee,
+					onPointercancel: J,
+					onPointerdown: we,
+					onPointermove: Te,
+					onPointerup: J
+				}, [a("canvas", {
+					ref_key: "hueCanvasRef",
+					ref: k,
+					"aria-hidden": "true",
+					class: "bb-base-color-palette__slider-track"
+				}, null, 512), a("div", {
+					"aria-hidden": "true",
+					class: "bb-base-color-palette__slider-thumb",
+					style: c({ left: `${S.value / 360 * 100}%` })
+				}, null, 4)], 40, se), e.alpha ? (d(), i("div", {
+					key: 0,
+					ref_key: "alphaWrapRef",
+					ref: N,
+					"aria-label": m(x)("colorInput.alphaSliderDesc").value,
+					"aria-valuemax": "100",
+					"aria-valuemin": "0",
+					"aria-valuenow": Math.round(T.value * 100),
+					class: "bb-base-color-palette__slider-wrap bb-base-color-palette__slider-wrap--alpha",
+					role: "slider",
+					tabindex: "0",
+					onKeydown: ke,
+					onPointercancel: Z,
+					onPointerdown: De,
+					onPointermove: Oe,
+					onPointerup: Z
+				}, [a("canvas", {
+					ref_key: "alphaCanvasRef",
+					ref: A,
+					"aria-hidden": "true",
+					class: "bb-base-color-palette__slider-track"
+				}, null, 512), a("div", {
+					"aria-hidden": "true",
+					class: "bb-base-color-palette__slider-thumb",
+					style: c({ left: `${T.value * 100}%` })
+				}, null, 4)], 40, ce)) : r("", !0)]),
+				e.eyeDropper && m(Q) ? (d(), i("button", {
+					key: 0,
+					"aria-label": m(x)("colorInput.eyeDropper").value,
+					class: "bb-base-color-palette__eyedropper",
+					disabled: $.value || void 0,
+					type: "button",
+					onClick: Ae
+				}, n[0] ||= [a("svg", {
+					"aria-hidden": "true",
+					fill: "currentColor",
+					height: "16",
+					viewBox: "0 0 24 24",
+					width: "16",
+					xmlns: "http://www.w3.org/2000/svg"
+				}, [a("path", { d: "M20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L13.71,3.71L12.29,5.12L13.41,6.24L3,16.59V21H7.41L17.76,10.59L18.88,11.71L20.29,10.29L18.88,8.88L20.71,7.04C21.1,6.65 21.1,6 20.71,5.63M6.58,19H5V17.42L13.29,9.12L14.88,10.71L6.58,19Z" })], -1)], 8, le)) : r("", !0)
+			]),
+			_e.value ? (d(), i("div", ue, [(d(!0), i(t, null, p(ve.value, (e, n) => (d(), i("div", {
+				key: n,
+				class: "bb-base-color-palette__swatch-group"
+			}, [(d(!0), i(t, null, p(e, (e) => (d(), i("button", {
+				key: e,
+				"aria-label": e,
+				"aria-pressed": je(e),
+				class: s(["bb-base-color-palette__swatch", { "bb-base-color-palette__swatch--active": je(e) }]),
+				style: c({ background: e }),
+				type: "button",
+				onClick: (t) => Me(e)
+			}, null, 14, de))), 128))]))), 128))])) : r("", !0)
+		], 512));
+	}
+});
+//#endregion
+export { h as default };

package/dist/components/BbBaseColorPalette/types.d.ts

@@ -0,0 +1,40 @@
+export type ColorPaletteProps = {
+    /**
+     * Current color value bound via `v-model`.
+     * Accepts `#RRGGBB` and `#RRGGBBAA` (alpha) formats, or `null` for no value.
+     */
+    modelValue: string | null;
+    /**
+     * Enable alpha channel support.
+     * When true, an alpha slider is shown and emitted values include alpha as hex8.
+     * @defaultValue `false`
+     */
+    alpha?: boolean;
+    /**
+     * Show an eyedropper button that lets the user sample any color on screen.
+     * Uses the native EyeDropper API — hidden automatically on unsupported browsers.
+     * @defaultValue `false`
+     */
+    eyeDropper?: boolean;
+    /**
+     * Controls swatches display:
+     * - `true`      — show the built-in Material-palette swatches
+     * - `string[][]` — show custom swatches (each inner array = a column of shades)
+     * - `false` / omitted — no swatches section
+     */
+    swatches?: boolean | string[][];
+};
+export type ColorPaletteEvents = 
+/**
+ * Emitted whenever the user changes color through:
+ * - SV canvas dragging/keyboard
+ * - hue slider dragging/keyboard
+ * - alpha slider dragging/keyboard (when enabled)
+ * - swatch selection
+ * - eyedropper pick
+ *
+ * Payload format:
+ * - `#RRGGBB` when `alpha` is disabled
+ * - `#RRGGBBAA` when `alpha` is enabled
+ */
+(e: 'update:modelValue', value: string) => void;

package/dist/components/BbBaseDatePicker/BbBaseDatePicker.vue.js

@@ -0,0 +1,6 @@
+import e from "./BbBaseDatePicker.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                         */
+//#region src/components/BbBaseDatePicker/BbBaseDatePicker.vue
+var t = e;
+//#endregion
+export { t as default };