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

package/dist/components/BbDropdown/AdaptiveDropdown.vue_vue_type_script_setup_true_lang.js

@@ -1,27 +1,32 @@
-import e from "../BbIcon/BbIcon.vue.js";
+import { useLocale as e } from "../../composables/useLocale.js";
 import t from "../../assets/svgs/chevron_right.svg_raw.js";
-import { useLocale as n } from "../../composables/useLocale.js";
-import { levelHasSearch as r, normalizeGroups as i } from "./normalizeGroups.js";
-import { useDropdownContext as ee } from "./useDropdownContext.js";
-import te from "./BbDropdownList.vue.js";
+import { levelHasSearch as n, normalizeGroups as ee } from "./normalizeGroups.js";
+import { useDropdownContext as r } from "./useDropdownContext.js";
+import i from "./BbDropdownList.vue.js";
 import a from "../BbOffCanvas/BbOffCanvas.vue.js";
 import o from "../BbSmoothHeight/BbSmoothHeight.vue.js";
-import s from "../BbBadge/BbBadge.vue.js";
-import { Fragment as c, Transition as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createSlots as h, createTextVNode as g, createVNode as _, defineComponent as v, guardReactiveProps as y, mergeModels as b, mergeProps as x, nextTick as S, normalizeProps as C, openBlock as w, ref as T, renderList as E, resolveDynamicComponent as D, toDisplayString as O, unref as k, useModel as ne, useTemplateRef as re, watch as ie, withCtx as A, withModifiers as ae } from "vue";
+import s from "../BbButton/BbButton.vue.js";
+import { listboxOptionFontSize as c, listboxOptionHeight as te } from "../../utilities/misc/listboxMetrics.js";
+import { Fragment as l, Transition as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createSlots as ne, createTextVNode as g, createVNode as _, defineComponent as v, guardReactiveProps as re, mergeModels as y, mergeProps as b, nextTick as x, normalizeClass as S, normalizeProps as C, openBlock as w, ref as T, resolveDynamicComponent as E, toDisplayString as D, unref as O, useModel as ie, useTemplateRef as k, watch as A, withCtx as j } from "vue";
 //#region src/components/BbDropdown/AdaptiveDropdown.vue?vue&type=script&setup=true&lang.ts
-var j = { class: "bb-dropdown__nav" }, M = ["aria-label"], N = { class: "bb-offcanvas__title bb-dropdown__nav-title" }, P = { class: "bb-dropdown__sheet-chips" }, F = [
+var M = { class: "bb-offcanvas__title bb-dropdown__nav-title" }, N = {
+	key: 1,
+	"aria-hidden": "true",
+	class: "bb-dropdown__nav-gutter"
+}, P = [
 	"id",
 	"aria-label",
 	"aria-labelledby",
 	"role"
-], I = {
+], F = {
 	class: "sr-only",
 	role: "status"
-}, L = /*@__PURE__*/ v({
+}, I = /*@__PURE__*/ v({
 	__name: "AdaptiveDropdown",
-	props: /*@__PURE__*/ b({
+	props: /*@__PURE__*/ y({
 		rootGroups: {},
-		offCanvasProps: {}
+		offCanvasProps: {},
+		compact: { type: Boolean }
 	}, {
 		modelValue: {
 			type: Boolean,
@@ -31,116 +36,110 @@ var j = { class: "bb-dropdown__nav" }, M = ["aria-label"], N = { class: "bb-offc
 	}),
 	emits: ["update:modelValue"],
 	setup(v) {
-		let b = ne(v, "modelValue"), L = v, R = ee(), { t: z } = n(), B = z("dropdown.back"), V = T([]), H = u(() => V.value.length), U = u(() => H.value > 0), W = u(() => V.value[V.value.length - 1]?.text), G = (e) => e.map((e) => e.selectable ? {
+		let y = ie(v, "modelValue"), I = v, L = r(), { t: R } = e(), z = R("dropdown.back"), B = T([]), V = d(() => B.value.length), H = d(() => V.value > 0), U = d(() => ({
+			"--sheet-row-h": `${te(!0, I.compact)}px`,
+			"--sheet-option-fs": c(!0)
+		})), W = d(() => B.value[B.value.length - 1]?.text), G = (e) => e.map((e) => e.selectable ? {
 			...e,
-			selected: R.selectedFor(e.key ?? "")
+			selected: L.selectedFor(e.key ?? "")
 		} : e), K = (e, t) => {
 			for (let n of e) for (let e of n.items) if (e.key === t) return e;
-		}, q = u(() => {
-			let e = L.rootGroups;
-			for (let t of V.value) {
+		}, q = d(() => {
+			let e = I.rootGroups;
+			for (let t of B.value) {
 				let n = K(e, t.key)?.items;
 				if (!n) break;
-				e = G(i(n));
+				e = G(ee(n));
 			}
 			return e;
-		}), J = u(() => r(q.value)), oe = u(() => q.value.filter((e) => !!e.key && e.selectable && e.multiple && R.selectedChipsFor(e.key).length > 0)), Y = T("bb-dropdown-nav-forward"), se = (e) => {
-			e.items && (Y.value = "bb-dropdown-nav-forward", V.value = [...V.value, {
+		}), J = d(() => n(q.value)), Y = T("bb-dropdown-nav-forward"), ae = (e) => {
+			e.items && (Y.value = "bb-dropdown-nav-forward", B.value = [...B.value, {
 				key: e.key,
 				text: e.text
 			}]);
 		}, X = () => {
-			U.value && (Y.value = "bb-dropdown-nav-back", V.value = V.value.slice(0, -1));
-		}, Z = re("list"), Q = () => {
-			S(() => {
-				b.value && Z.value?.focusFirst();
+			H.value && (Y.value = "bb-dropdown-nav-back", B.value = B.value.slice(0, -1));
+		}, Z = k("list"), Q = () => {
+			x(() => {
+				y.value && Z.value?.focusFirst();
 			});
 		};
-		ie(H, () => {
-			b.value && Q();
+		A(V, () => {
+			y.value && Q();
 		});
-		let $ = u(() => ({
-			disabled: R.disabled.value,
-			open: R.open.value,
-			placement: R.placement.value
-		})), ce = () => {
-			V.value = [], R.focusActivator();
+		let $ = d(() => ({
+			disabled: L.disabled.value,
+			open: L.open.value,
+			placement: L.placement.value
+		})), oe = () => {
+			B.value = [], L.focusActivator();
 		};
-		return (n, r) => (w(), d(a, x({
-			modelValue: b.value,
-			"onUpdate:modelValue": r[1] ||= (e) => b.value = e,
-			"aria-labelledby": k(R).activatorId.value,
-			class: "bb-dropdown bb-dropdown--adaptive bb-dropdown--mobile"
-		}, n.offCanvasProps, {
-			onHidden: ce,
+		return (e, n) => (w(), f(a, b({
+			modelValue: y.value,
+			"onUpdate:modelValue": n[0] ||= (e) => y.value = e,
+			"aria-labelledby": O(L).activatorId.value,
+			class: ["bb-dropdown bb-dropdown--adaptive bb-dropdown--mobile", { "bb-dropdown--compact": e.compact }],
+			style: U.value
+		}, e.offCanvasProps, {
+			onHidden: oe,
 			onShown: Q
-		}), h({
-			default: A(() => [
-				(w(!0), p(c, null, E(oe.value, (e) => (w(), p("div", {
-					key: e.key,
-					class: "bb-dropdown__sheet-selection"
-				}, [m("div", P, [(w(!0), p(c, null, E(k(R).selectedChipsFor(e.key), (t) => (w(), d(s, {
-					key: t.key,
-					class: "bb-dropdown__sheet-chip",
-					clearable: !k(R).disabled.value,
-					size: "xl",
-					variant: "secondary",
-					"onClick:clear": (n) => k(R).deselect(e.key, t.key),
-					onMousedown: r[0] ||= ae(() => {}, ["prevent"])
-				}, {
-					default: A(() => [g(O(t.text), 1)]),
-					_: 2
-				}, 1032, ["clearable", "onClick:clear"]))), 128))])]))), 128)),
-				m("div", {
-					id: `menu_${k(R).rootId}`,
-					"aria-label": J.value ? void 0 : W.value,
-					"aria-labelledby": J.value || W.value ? void 0 : k(R).activatorId.value,
-					class: "bb-dropdown__adaptive-menu",
-					role: J.value ? "none" : "menu"
-				}, [_(o, {
-					class: "bb-dropdown__adaptive-body",
-					role: "none",
-					tag: "div"
-				}, {
-					default: A(() => [_(l, { name: Y.value }, {
-						default: A(() => [(w(), p("span", {
-							key: H.value,
-							class: "bb-dropdown__items-container scrollbar-border",
-							role: "none"
-						}, [_(te, {
-							ref_key: "list",
-							ref: Z,
-							back: U.value ? X : void 0,
-							groups: q.value,
-							navigate: se
-						}, null, 8, ["back", "groups"])]))]),
-						_: 1
-					}, 8, ["name"])]),
+		}), ne({
+			default: j(() => [h("div", {
+				id: `menu_${O(L).rootId}`,
+				"aria-label": J.value ? void 0 : W.value,
+				"aria-labelledby": J.value || W.value ? void 0 : O(L).activatorId.value,
+				class: "bb-dropdown__adaptive-menu",
+				role: J.value ? "none" : "menu"
+			}, [_(o, {
+				class: "bb-dropdown__adaptive-body",
+				role: "none",
+				tag: "div"
+			}, {
+				default: j(() => [_(u, { name: Y.value }, {
+					default: j(() => [(w(), m("span", {
+						key: V.value,
+						class: "bb-dropdown__items-container scrollbar-border",
+						role: "none"
+					}, [_(i, {
+						ref_key: "list",
+						ref: Z,
+						back: H.value ? X : void 0,
+						groups: q.value,
+						navigate: ae
+					}, null, 8, ["back", "groups"])]))]),
 					_: 1
-				})], 8, F),
-				m("span", I, O(k(R).status.value), 1)
-			]),
+				}, 8, ["name"])]),
+				_: 1
+			})], 8, P), h("span", F, D(O(L).status.value), 1)]),
 			_: 2
-		}, [U.value || k(R).slots.header ? {
+		}, [H.value || O(L).slots.header ? {
 			name: "header",
-			fn: A(() => [m("div", j, [U.value ? (w(), p("button", {
-				key: 0,
-				"aria-label": k(B),
-				class: "bb-dropdown__nav-back",
-				type: "button",
-				onClick: X
-			}, [_(e, {
-				"aria-hidden": "true",
-				class: "bb-dropdown__nav-back-icon",
-				icon: k(t)
-			}, null, 8, ["icon"])], 8, M)) : f("", !0), m("span", N, [U.value ? (w(), p(c, { key: 0 }, [g(O(W.value), 1)], 64)) : (w(), d(D(k(R).slots.header), C(x({ key: 1 }, $.value)), null, 16))])])]),
+			fn: j(() => [h("div", { class: S(["bb-dropdown__nav", { "bb-dropdown__nav--drill": H.value }]) }, [
+				H.value ? (w(), f(s, {
+					key: 0,
+					"aria-label": O(z),
+					class: "bb-dropdown__nav-back",
+					icon: O(t),
+					size: "xl",
+					type: "button",
+					variant: "ghost",
+					onClick: X
+				}, null, 8, ["aria-label", "icon"])) : p("", !0),
+				h("span", M, [H.value ? (w(), m(l, { key: 0 }, [g(D(W.value), 1)], 64)) : (w(), f(E(O(L).slots.header), C(b({ key: 1 }, $.value)), null, 16))]),
+				H.value ? (w(), m("span", N)) : p("", !0)
+			], 2)]),
 			key: "0"
-		} : void 0, k(R).slots.footer ? {
+		} : void 0, O(L).slots.footer ? {
 			name: "footer",
-			fn: A(() => [(w(), d(D(k(R).slots.footer), C(y($.value)), null, 16))]),
+			fn: j(() => [(w(), f(E(O(L).slots.footer), C(re($.value)), null, 16))]),
 			key: "1"
-		} : void 0]), 1040, ["modelValue", "aria-labelledby"]));
+		} : void 0]), 1040, [
+			"modelValue",
+			"aria-labelledby",
+			"class",
+			"style"
+		]));
 	}
 });
 //#endregion
-export { L as default };
+export { I as default };

package/dist/components/BbDropdown/BbDropdown.vue.d.ts

@@ -1,6 +1,6 @@
 import { BbDropdownProps, BbDropdownSlots, InternalItem, MappedItem, DropdownTrigger } from './types';
-export type { BbDropdownProps, BbDropdownSlots, InternalItem as Item, MappedItem, DropdownTrigger, };
 type __VLS_Slots = BbDropdownSlots;
+export type { BbDropdownProps, BbDropdownSlots, InternalItem as Item, MappedItem, DropdownTrigger, };
 declare const __VLS_base: import('vue').DefineComponent<BbDropdownProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "item:selected": (value: any) => any;
     "item:unselected": (value: any) => any;
@@ -8,12 +8,12 @@ declare const __VLS_base: import('vue').DefineComponent<BbDropdownProps, {}, {},
     "onItem:selected"?: ((value: any) => any) | undefined;
     "onItem:unselected"?: ((value: any) => any) | undefined;
 }>, {
+    adaptive: boolean;
     width: number | string;
     placement: import('../..').Placement | "cursor";
     offset: number;
     padding: number;
     transitionDuration: number;
-    adaptive: boolean;
     queryDebounceTime: number;
     trigger: DropdownTrigger | DropdownTrigger[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;