bitboss-ui 3.0.0-beta.21 → 3.0.0-beta.23

package/dist/components/BbPopover/BbPopover.vue_vue_type_script_setup_true_lang.js

@@ -6,24 +6,24 @@ import { warnRemovedAttrs as i } from "../../utilities/functions/warnRemovedAttr
 import { extractDomContainer as a } from "../../utilities/functions/extractDomContainer.js";
 import { transitions as o } from "../../utilities/misc/transitions.js";
 import ee from "../CommonPopover/CommonPopover.vue.js";
-import { parseWidthString as te } from "../../utilities/functions/parseWidthString.js";
-import { isTopEscapeEntry as ne, pushEscapeEntry as re, removeEscapeEntry as ie } from "../../utils/overlayEscapeStack.js";
-import { useMobile as ae } from "../../composables/useMobile.js";
-import { useClosingInert as oe } from "../../composables/useClosingInert.js";
-import se from "../BbOffCanvas/BbOffCanvas.vue.js";
-import { Fragment as ce, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as le, createSlots as ue, defineComponent as d, mergeModels as f, mergeProps as p, nextTick as de, normalizeClass as fe, normalizeProps as pe, normalizeStyle as me, onBeforeUnmount as he, onMounted as ge, openBlock as m, ref as h, renderSlot as g, unref as _, useModel as _e, useTemplateRef as ve, watch as v, withCtx as y } from "vue";
-import { useElementSize as ye, useIntersectionObserver as be } from "@vueuse/core";
+import { isTopEscapeEntry as te, pushEscapeEntry as ne, removeEscapeEntry as re } from "../../utils/overlayEscapeStack.js";
+import { useMobile as ie } from "../../composables/useMobile.js";
+import { useClosingInert as ae } from "../../composables/useClosingInert.js";
+import oe from "../BbOffCanvas/BbOffCanvas.vue.js";
+import { parseWidthString as s } from "../../utilities/functions/parseWidthString.js";
+import { Fragment as se, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as ce, createSlots as le, defineComponent as f, mergeModels as p, mergeProps as m, nextTick as ue, normalizeClass as de, normalizeProps as fe, normalizeStyle as pe, onBeforeUnmount as me, onMounted as he, openBlock as h, ref as g, renderSlot as _, unref as v, useModel as ge, useTemplateRef as _e, watch as y, withCtx as b } from "vue";
+import { useElementSize as ve, useIntersectionObserver as ye } from "@vueuse/core";
 //#region src/components/BbPopover/BbPopover.vue?vue&type=script&setup=true&lang.ts
-var xe = ["inert"], Se = {
+var be = ["inert"], xe = {
 	key: 0,
 	class: "bb-popover__header"
-}, Ce = { class: "bb-popover__content scrollbar-border" }, we = {
+}, Se = { class: "bb-popover__content scrollbar-border" }, Ce = {
 	key: 1,
 	class: "bb-popover__footer"
-}, Te = 500, Ee = 10, b = /*@__PURE__*/ d({
+}, we = 500, Te = 10, x = /*@__PURE__*/ f({
 	inheritAttrs: !1,
 	__name: "BbPopover",
-	props: /*@__PURE__*/ f({
+	props: /*@__PURE__*/ p({
 		activator: {},
 		adaptive: {
 			type: Boolean,
@@ -52,39 +52,39 @@ var xe = ["inert"], Se = {
 		},
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ f([
+	emits: /*@__PURE__*/ p([
 		"show",
 		"hide",
 		"shown",
 		"hidden"
 	], ["update:modelValue"]),
-	setup(o, { emit: d }) {
-		let f = _e(o, "modelValue"), b = o, x = d, De = e();
+	setup(o, { emit: f }) {
+		let p = ge(o, "modelValue"), x = o, S = f, Ee = e();
 		process.env.NODE_ENV !== "production" && i("BbPopover", r("BbPopover"));
-		let { id: Oe } = t(), S = b.id ?? Oe.value, C = `bbp_${S}`, w = h(), T = ve("popoverRef"), E = s(() => a(T.value)), D = n(f), O = s(() => b.activator != null), { isMobile: k } = ae(), A = () => (b.adaptive ?? De.adaptive) && k.value ? "canvas" : "popover", j = h(A()), M = s(() => j.value === "canvas");
-		v([
-			() => b.adaptive,
-			k,
-			f
+		let { id: De } = t(), C = x.id ?? De.value, w = `bbp_${C}`, T = g(), E = _e("popoverRef"), D = c(() => a(E.value)), O = n(p), k = c(() => x.activator != null), { isMobile: A } = ie(), j = () => (x.adaptive ?? Ee.adaptive) && A.value ? "canvas" : "popover", M = g(j()), N = c(() => M.value === "canvas");
+		y([
+			() => x.adaptive,
+			A,
+			p
 		], () => {
-			f.value || (j.value = A());
+			p.value || (M.value = j());
 		});
-		let ke = s(() => ({
+		let Oe = c(() => ({
 			side: "bottom",
 			size: "auto",
 			draggable: !0,
-			eager: b.eager,
-			disabled: b.disabled,
-			focusTarget: b.focusTarget,
-			transitionDuration: b.transitionDuration,
-			...b.offCanvasProps,
-			...D.value && !b.offCanvasProps?.title ? { "aria-labelledby": S } : {}
-		})), Ae = () => {
-			w.value?.focus(), x("hidden");
-		}, N = s(() => {
-			let e = b.trigger;
+			eager: x.eager,
+			disabled: x.disabled,
+			focusTarget: x.focusTarget,
+			transitionDuration: x.transitionDuration,
+			...x.offCanvasProps,
+			...O.value && !x.offCanvasProps?.title ? { "aria-labelledby": C } : {}
+		})), ke = () => {
+			T.value?.focus(), S("hidden");
+		}, P = c(() => {
+			let e = x.trigger;
 			return new Set(Array.isArray(e) ? e : [e]);
-		}), P = (e, t) => ({ getBoundingClientRect: () => ({
+		}), F = (e, t) => ({ getBoundingClientRect: () => ({
 			x: e,
 			y: t,
 			width: 0,
@@ -96,19 +96,19 @@ var xe = ["inert"], Se = {
 			toJSON() {
 				return this;
 			}
-		}) }), F = h(null), je = s(() => b.placement === "cursor" && F.value ? F.value : w.value), I, L = null, R = !1, z = () => {
-			clearTimeout(I), L = null;
-		}, B = (e) => {
-			w.value = a(e) ?? void 0;
-		}, Me = s(() => {
-			let e = N.value;
+		}) }), I = g(null), Ae = c(() => x.placement === "cursor" && I.value ? I.value : T.value), L, R = null, z = !1, B = () => {
+			clearTimeout(L), R = null;
+		}, V = (e) => {
+			T.value = a(e) ?? void 0;
+		}, je = c(() => {
+			let e = P.value;
 			return {
-				"aria-expanded": D.value ? f.value : void 0,
-				"aria-controls": D.value ? C : void 0,
+				"aria-expanded": O.value ? p.value : void 0,
+				"aria-controls": O.value ? w : void 0,
 				"aria-haspopup": "dialog",
-				id: S,
-				disabled: !!b.disabled,
-				ref: B,
+				id: C,
+				disabled: !!x.disabled,
+				ref: V,
 				...e.has("click") ? { onClick: J } : {},
 				...e.has("contextMenu") ? {
 					onContextmenu: Y,
@@ -119,146 +119,146 @@ var xe = ["inert"], Se = {
 				} : {}
 			};
 		});
-		v(() => b.activator, (e) => {
-			e && B(e);
-		}, { immediate: !0 }), v([w, N], ([e, t], n, r) => {
-			if (!e || !O.value) return;
+		y(() => x.activator, (e) => {
+			e && V(e);
+		}, { immediate: !0 }), y([T, P], ([e, t], n, r) => {
+			if (!e || !k.value) return;
 			let i = [];
 			t.has("click") && (e.addEventListener("click", J), i.push(() => e.removeEventListener("click", J))), t.has("contextMenu") && (e.addEventListener("contextmenu", Y), e.addEventListener("pointerdown", X), e.addEventListener("pointermove", Z), e.addEventListener("pointerup", Q), e.addEventListener("pointercancel", Q), i.push(() => {
-				e.removeEventListener("contextmenu", Y), e.removeEventListener("pointerdown", X), e.removeEventListener("pointermove", Z), e.removeEventListener("pointerup", Q), e.removeEventListener("pointercancel", Q), z();
+				e.removeEventListener("contextmenu", Y), e.removeEventListener("pointerdown", X), e.removeEventListener("pointermove", Z), e.removeEventListener("pointerup", Q), e.removeEventListener("pointercancel", Q), B();
 			})), e.setAttribute("aria-haspopup", "dialog"), r(() => {
 				i.forEach((e) => e()), e.removeAttribute("aria-expanded"), e.removeAttribute("aria-controls"), e.removeAttribute("aria-haspopup");
 			});
-		}, { immediate: !0 }), v([
-			w,
-			f,
-			D
+		}, { immediate: !0 }), y([
+			T,
+			p,
+			O
 		], ([e, t, n]) => {
-			!e || !O.value || !n || (e.setAttribute("id", S), e.setAttribute("aria-expanded", String(t)), e.setAttribute("aria-controls", C));
-		}, { immediate: !0 }), be(w, ([{ intersectionRatio: e }]) => {
-			e !== 1 && f.value && !M.value && $();
+			!e || !k.value || !n || (e.setAttribute("id", C), e.setAttribute("aria-expanded", String(t)), e.setAttribute("aria-controls", w));
+		}, { immediate: !0 }), ye(T, ([{ intersectionRatio: e }]) => {
+			!(e >= .99) && p.value && !N.value && $();
 		}, { threshold: [0, 1] });
-		let V = (e) => {
+		let H = (e) => {
 			let t = e.target;
 			if (!(t instanceof Node)) return;
-			let n = E.value?.contains(t), r = w.value?.contains(t);
+			let n = D.value?.contains(t), r = T.value?.contains(t);
 			!n && !r && $();
-		}, H = Symbol("bb-popover"), U = (e) => {
-			e.key === "Escape" && ne(H) && (e.preventDefault(), e.stopImmediatePropagation(), $());
-		}, Ne = () => {
-			re(H), document.addEventListener("click", V, { passive: !0 }), document.addEventListener("contextmenu", V, { passive: !0 }), document.addEventListener("keydown", U, { capture: !0 });
-		}, W = () => {
-			ie(H), document.removeEventListener("click", V), document.removeEventListener("contextmenu", V), document.removeEventListener("keydown", U, { capture: !0 });
-		}, G = !1, K = async () => {
-			if (M.value) return;
-			G = !0, x("show"), Ne(), await de();
-			let e = b.focusTarget ?? "[tabindex]:not([tabindex=\"-1\"]), button, a, input, select, textarea", t = E.value?.querySelector(e);
-			t instanceof HTMLElement && t.focus(), x("shown");
+		}, U = Symbol("bb-popover"), W = (e) => {
+			e.key === "Escape" && te(U) && (e.preventDefault(), e.stopImmediatePropagation(), $());
+		}, Me = () => {
+			ne(U), document.addEventListener("click", H, { passive: !0 }), document.addEventListener("contextmenu", H, { passive: !0 }), document.addEventListener("keydown", W, { capture: !0 });
+		}, G = () => {
+			re(U), document.removeEventListener("click", H), document.removeEventListener("contextmenu", H), document.removeEventListener("keydown", W, { capture: !0 });
+		}, K = !1, Ne = async () => {
+			if (N.value) return;
+			K = !0, S("show"), Me(), await ue();
+			let e = x.focusTarget ?? "[tabindex]:not([tabindex=\"-1\"]), button, a, input, select, textarea", t = D.value?.querySelector(e);
+			t instanceof HTMLElement && t.focus(), S("shown");
 		}, Pe = () => {
-			G && (G = !1, x("hide"), W(), w.value && w.value.focus(), x("hidden"));
-		}, Fe = oe(f, () => b.transitionDuration);
-		v(f, (e) => {
-			e ? (j.value = A(), K()) : Pe();
-		}), ge(() => {
-			f.value && K();
+			K && (K = !1, S("hide"), G(), T.value && T.value.focus(), S("hidden"));
+		}, Fe = ae(p, () => x.transitionDuration);
+		y(p, (e) => {
+			e ? (M.value = j(), Ne()) : Pe();
 		}), he(() => {
-			z(), W();
+			p.value && Ne();
+		}), me(() => {
+			B(), G();
 		});
 		let q = () => {
-			b.disabled || (f.value = !0);
+			x.disabled || (p.value = !0);
 		}, J = (e) => {
-			if (f.value) {
+			if (p.value) {
 				$();
 				return;
 			}
-			if (R) {
-				R = !1, e.preventDefault(), e.stopPropagation();
+			if (z) {
+				z = !1, e.preventDefault(), e.stopPropagation();
 				return;
 			}
-			e.stopImmediatePropagation(), b.placement === "cursor" && (F.value = P(e.clientX, e.clientY)), q();
+			e.stopImmediatePropagation(), x.placement === "cursor" && (I.value = F(e.clientX, e.clientY)), q();
 		}, Y = (e) => {
-			b.disabled || (e.preventDefault(), e.stopPropagation(), !(b.placement === "cursor" && (F.value = P(e.clientX, e.clientY), f.value)) && (f.value ? $() : q()));
+			x.disabled || (e.preventDefault(), e.stopPropagation(), !(x.placement === "cursor" && (I.value = F(e.clientX, e.clientY), p.value)) && (p.value ? $() : q()));
 		}, X = (e) => {
-			b.disabled || e.pointerType === "mouse" || (R = !1, L = {
+			x.disabled || e.pointerType === "mouse" || (z = !1, R = {
 				x: e.clientX,
 				y: e.clientY
-			}, I = setTimeout(() => {
-				R = !0, b.placement === "cursor" && L && (F.value = P(L.x, L.y)), L = null, q();
-			}, Te));
+			}, L = setTimeout(() => {
+				z = !0, x.placement === "cursor" && R && (I.value = F(R.x, R.y)), R = null, q();
+			}, we));
 		}, Z = (e) => {
-			if (!L) return;
-			let t = e.clientX - L.x, n = e.clientY - L.y;
-			Math.sqrt(t * t + n * n) > Ee && z();
+			if (!R) return;
+			let t = e.clientX - R.x, n = e.clientY - R.y;
+			Math.sqrt(t * t + n * n) > Te && B();
 		}, Q = () => {
-			z();
+			B();
 		}, $ = () => {
-			f.value = !1;
-		}, Ie = s(() => {
-			if (!b.width) return !1;
-			let { unit: e } = te(b.width);
+			p.value = !1;
+		}, Ie = c(() => {
+			if (!x.width) return !1;
+			let { unit: e } = s(x.width);
 			return e === "%";
-		}), { width: Le } = ye(s(() => Ie.value ? w.value : void 0), {
+		}), { width: Le } = ve(c(() => Ie.value ? T.value : void 0), {
 			width: 0,
 			height: 0
-		}, { box: "border-box" }), Re = s(() => {
-			if (!b.width) return;
-			let { value: e, unit: t } = te(b.width);
-			return t === "%" && w.value ? `${Le.value * (e / 100)}px` : `${e}px`;
+		}, { box: "border-box" }), Re = c(() => {
+			if (!x.width) return;
+			let { value: e, unit: t } = s(x.width);
+			return t === "%" && T.value ? `${Le.value * (e / 100)}px` : `${e}px`;
 		});
-		return (e, t) => (m(), u(ce, null, [O.value ? l("", !0) : g(e.$slots, "activator", pe(p({ key: 0 }, {
-			props: Me.value,
+		return (e, t) => (h(), d(se, null, [k.value ? u("", !0) : _(e.$slots, "activator", fe(m({ key: 0 }, {
+			props: je.value,
 			disabled: !!e.disabled,
-			isOpen: f.value,
+			isOpen: p.value,
 			placement: e.placement
-		}))), M.value ? (m(), c(se, p({
+		}))), N.value ? (h(), l(oe, m({
 			key: 1,
-			id: C,
-			modelValue: f.value,
-			"onUpdate:modelValue": t[0] ||= (e) => f.value = e,
+			id: w,
+			modelValue: p.value,
+			"onUpdate:modelValue": t[0] ||= (e) => p.value = e,
 			class: "bb-popover-offcanvas"
 		}, {
 			...e.$attrs,
-			...ke.value
+			...Oe.value
 		}, {
-			onHidden: Ae,
-			onHide: t[1] ||= (e) => x("hide"),
-			onShow: t[2] ||= (e) => x("show"),
-			onShown: t[3] ||= (e) => x("shown")
-		}), ue({
-			default: y(() => [g(e.$slots, "default", {
+			onHidden: ke,
+			onHide: t[1] ||= (e) => S("hide"),
+			onShow: t[2] ||= (e) => S("show"),
+			onShown: t[3] ||= (e) => S("shown")
+		}), le({
+			default: b(() => [_(e.$slots, "default", {
 				close: $,
 				disabled: !!e.disabled,
-				open: f.value,
+				open: p.value,
 				placement: e.placement
 			})]),
 			_: 2
 		}, [e.$slots.header ? {
 			name: "header",
-			fn: y(() => [g(e.$slots, "header", {
+			fn: b(() => [_(e.$slots, "header", {
 				close: $,
 				disabled: !!e.disabled,
-				open: f.value,
+				open: p.value,
 				placement: e.placement
 			})]),
 			key: "0"
 		} : void 0, e.$slots.footer ? {
 			name: "footer",
-			fn: y(() => [g(e.$slots, "footer", {
+			fn: b(() => [_(e.$slots, "footer", {
 				close: $,
 				disabled: !!e.disabled,
-				open: f.value,
+				open: p.value,
 				placement: e.placement
 			})]),
 			key: "1"
-		} : void 0]), 1040, ["modelValue"])) : (m(), c(ee, p({
+		} : void 0]), 1040, ["modelValue"])) : (h(), l(ee, m({
 			key: 2,
-			id: C,
+			id: w,
 			ref_key: "popoverRef",
-			ref: T,
-			modelValue: f.value,
-			"onUpdate:modelValue": t[4] ||= (e) => f.value = e,
-			anchor: je.value,
-			"aria-labelledby": _(D) ? _(S) : void 0,
+			ref: E,
+			modelValue: p.value,
+			"onUpdate:modelValue": t[4] ||= (e) => p.value = e,
+			anchor: Ae.value,
+			"aria-labelledby": v(O) ? v(C) : void 0,
 			boundary: e.boundary,
 			class: "bb-popover",
 			dialog: "",
@@ -270,30 +270,30 @@ var xe = ["inert"], Se = {
 			style: { width: Re.value },
 			"transition-duration": e.transitionDuration
 		}, e.$attrs), {
-			default: y(({ availableHeight: t }) => [le("div", {
-				class: fe(["bb-popover__panel", { "bb-popover__panel--scrollable": e.scrollable }]),
-				inert: _(Fe),
-				style: me({ "--max-h": e.scrollable && t != null ? `${t}px` : void 0 })
+			default: b(({ availableHeight: t }) => [ce("div", {
+				class: de(["bb-popover__panel", { "bb-popover__panel--scrollable": e.scrollable }]),
+				inert: v(Fe),
+				style: pe({ "--max-h": e.scrollable && t != null ? `${t}px` : void 0 })
 			}, [
-				e.$slots.header ? (m(), u("div", Se, [g(e.$slots, "header", {
+				e.$slots.header ? (h(), d("div", xe, [_(e.$slots, "header", {
 					close: $,
 					disabled: !!e.disabled,
-					open: f.value,
+					open: p.value,
 					placement: e.placement
-				})])) : l("", !0),
-				le("div", Ce, [g(e.$slots, "default", {
+				})])) : u("", !0),
+				ce("div", Se, [_(e.$slots, "default", {
 					close: $,
 					disabled: !!e.disabled,
-					open: f.value,
+					open: p.value,
 					placement: e.placement
 				})]),
-				e.$slots.footer ? (m(), u("div", we, [g(e.$slots, "footer", {
+				e.$slots.footer ? (h(), d("div", Ce, [_(e.$slots, "footer", {
 					close: $,
 					disabled: !!e.disabled,
-					open: f.value,
+					open: p.value,
 					placement: e.placement
-				})])) : l("", !0)
-			], 14, xe)]),
+				})])) : u("", !0)
+			], 14, be)]),
 			_: 3
 		}, 16, [
 			"modelValue",
@@ -310,4 +310,4 @@ var xe = ["inert"], Se = {
 	}
 });
 //#endregion
-export { b as default };
+export { x as default };

package/dist/components/BbSelect/BbSelect.vue_vue_type_script_setup_true_lang.js

@@ -23,6 +23,7 @@ var b = /*@__PURE__*/ d({
 		clearable: { type: Boolean },
 		comma: { type: Boolean },
 		compact: { type: Boolean },
+		variant: {},
 		dependencies: {},
 		depsDebounceTime: {},
 		direction: {},
@@ -179,7 +180,8 @@ var b = /*@__PURE__*/ d({
 				selectable: e.selectable,
 				"selected-labels-fn": e.selectedLabelsFn,
 				stash: e.stash,
-				"transition-duration": e.transitionDuration
+				"transition-duration": e.transitionDuration,
+				variant: e.variant
 			}, j), l({
 				"append-outer": y((t) => [_(e.$slots, "append-outer", m(f(t)))]),
 				append: y((t) => [_(e.$slots, "append", m(f(t)))]),
@@ -212,7 +214,7 @@ var b = /*@__PURE__*/ d({
 					fn: y(() => [_(e.$slots, "suffix")]),
 					key: "3"
 				} : void 0
-			]), 1040, /* @__PURE__ */ "id.adaptive.append:icon.aria-describedby.autocomplete.autofocus.clearable.comma.compact.dependencies.deps-debounce-time.disable-writing.disabled.enforce-coherence.filter-by.group-by.has-errors.has-warning.header-height.item-height.item-text.item-value.items.loading.loading-text.max.max-selected-labels.model-value.model-value-debounce-time.multiple.name.no-data-text.off-canvas-props.placeholder.prefill.prepend:icon.query-debounce-time.readonly.required.selectable.selected-labels-fn.stash.transition-duration".split("."))]),
+			]), 1040, /* @__PURE__ */ "id.adaptive.append:icon.aria-describedby.autocomplete.autofocus.clearable.comma.compact.dependencies.deps-debounce-time.disable-writing.disabled.enforce-coherence.filter-by.group-by.has-errors.has-warning.header-height.item-height.item-text.item-value.items.loading.loading-text.max.max-selected-labels.model-value.model-value-debounce-time.multiple.name.no-data-text.off-canvas-props.placeholder.prefill.prepend:icon.query-debounce-time.readonly.required.selectable.selected-labels-fn.stash.transition-duration.variant".split("."))]),
 			_: 3
 		}, 8, [
 			"id",

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

@@ -1,3 +1,4 @@
+import { InputVariantType } from '../../types/InputVariant';
 import { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import { InputDirection } from '../../types/InputDirection';
 import { ItemAccessor } from '../../types/ItemAccessor';
@@ -55,6 +56,17 @@ export type BbSelectProps<T> = {
      * Sets the component in a compact mode.
      */
     compact?: boolean;
+    /**
+     * Visual variant of the field box — the same names and tokens as the
+     * `BbButton` variants. Colours only: height, padding and border width are
+     * identical across variants, so a form never reflows when one changes.
+     * `'ghost'` has no border in any state (errors and warnings show through
+     * the icon and the messages); every variant keeps the focus ring.
+     * Register extra names with the plugin's `inputVariants` option.
+     *
+     * @defaultValue `'outline'`
+     */
+    variant?: InputVariantType;
     /**
      * Defines an array of dependencies that will trigger actions in the component upon change.
      */