bitboss-ui 3.0.0-beta.24 → 3.0.0-beta.26

package/dist/components/FlatListBox/FlatListBox.vue_vue_type_script_setup_true_lang.js

@@ -1,174 +1,237 @@
-import { transitions as e } from "../../utilities/misc/transitions.js";
-import { useTouchRowLadder as t } from "../../composables/useSheetSurface.js";
-import { useLocale as n } from "../../composables/useLocale.js";
-import r from "../BbIcon/BbIcon.vue.js";
-import { isNil as i } from "../../utilities/functions/isNil.js";
-import a from "../../assets/svgs/check_stroke.svg_raw.js";
-import { hash as o } from "../../utilities/functions/hash.js";
-import { listboxOptionFontSize as s, listboxOptionHeight as c } from "../../utilities/misc/listboxMetrics.js";
-import { isNotNil as ee } from "../../utilities/functions/isNotNil.js";
-import { useListboxFocus as te } from "../../composables/useListboxFocus.js";
-import { Fragment as ne, computed as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, normalizeClass as h, normalizeStyle as g, openBlock as _, ref as v, renderList as re, renderSlot as y, toDisplayString as b, unref as x, useId as S, useTemplateRef as C, watch as w, withModifiers as T } from "vue";
-import { useVirtualizer as E } from "@tanstack/vue-virtual";
+import { isNil as e } from "../../utilities/functions/isNil.js";
+import { transitions as t } from "../../utilities/misc/transitions.js";
+import { useTouchRowLadder as n } from "../../composables/useSheetSurface.js";
+import { useLocale as r } from "../../composables/useLocale.js";
+import i from "../BbIcon/BbIcon.vue.js";
+import ee from "../../assets/svgs/check_stroke.svg_raw.js";
+import { hash as a } from "../../utilities/functions/hash.js";
+import { listboxOptionFontSize as te, listboxOptionHeight as o } from "../../utilities/misc/listboxMetrics.js";
+import { isNotNil as s } from "../../utilities/functions/isNotNil.js";
+import { useListboxFocus as c } from "../../composables/useListboxFocus.js";
+import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, mergeProps as v, normalizeClass as ne, normalizeStyle as y, openBlock as b, ref as x, renderList as S, renderSlot as C, toDisplayString as w, unref as T, useId as E, useSlots as re, useTemplateRef as D, watch as O, withModifiers as k } from "vue";
+import { useVirtualizer as ie } from "@tanstack/vue-virtual";
 //#region src/components/FlatListBox/FlatListBox.vue?vue&type=script&setup=true&lang.ts
-var D = { class: "bb-listbox__outer-container scrollbar-border" }, O = {
+var ae = { class: "bb-listbox__outer-container scrollbar-border" }, oe = {
 	ref: "inner",
 	class: "bb-listbox__inner-container",
 	tabindex: "-1"
-}, k = {
+}, se = {
 	key: 0,
 	class: "bb-listbox__loading"
-}, A = {
+}, ce = {
 	key: 1,
 	class: "bb-listbox__no-data"
-}, ie = [
+}, le = [
 	"id",
 	"aria-activedescendant",
 	"aria-multiselectable"
-], ae = [
+], ue = [
 	"id",
+	"aria-describedby",
 	"aria-disabled",
+	"aria-labelledby",
 	"aria-posinset",
 	"aria-selected",
 	"aria-setsize",
 	"data-index",
 	"onMouseenter"
-], j = { class: "bb-listbox__option-label" }, M = /*@__PURE__*/ m({
+], de = {
+	key: 0,
+	class: "bb-listbox__option-content"
+}, fe = ["id"], A = ["id"], j = /*@__PURE__*/ _({
 	__name: "FlatListBox",
 	props: {
+		passthrough: {},
 		id: {},
 		compact: { type: Boolean },
 		options: {},
 		open: { type: Boolean },
 		loading: { type: Boolean },
 		multiple: { type: Boolean },
-		transitionDuration: { default: e.medium },
+		transitionDuration: { default: t.medium },
 		loadingText: {},
 		noDataText: {},
-		optionHeight: {}
+		optionHeight: {},
+		described: { type: Boolean }
 	},
 	emits: [
 		"option:selected",
 		"option:unselected",
 		"focused:change"
 	],
-	setup(e, { expose: m, emit: M }) {
-		let N = e, P = M, { t: F } = n(), I = C("inner"), L = C("listbox"), { touch: R } = t(), z = l(() => N.optionHeight ? N.optionHeight : c(R.value, !!N.compact)), B = l(() => s(R.value)), V = E({
+	setup(t, { expose: _, emit: j }) {
+		let M = t, N = j, P = re(), { t: F } = r(), I = D("inner"), L = D("listbox"), { touch: R } = n(), z = u(() => M.optionHeight ? M.optionHeight : o(R.value, !!M.compact, !!M.described)), B = u(() => te(R.value)), V = ie({
 			get count() {
-				return N.options.length;
+				return M.options.length;
 			},
 			getScrollElement: () => I.value ?? null,
 			estimateSize: () => z.value,
 			overscan: 5
-		}), H = l(() => V.value.getVirtualItems()), U = l(() => V.value.getTotalSize()), W = l(() => N.options.map((e, t) => ({
+		}), pe = u(() => V.value.getVirtualItems()), me = u(() => V.value.getTotalSize()), H = u(() => M.options.map((e, t) => ({
 			index: t,
 			text: e.text,
+			description: e.description,
+			"prepend:icon": e["prepend:icon"],
+			"append:icon": e["append:icon"],
 			value: e.value,
 			valueHash: e.valueHash,
 			item: e.item,
 			selected: !!e.selected,
 			disabled: !!e.disabled
-		}))), G = S(), K = (e) => `${G}-listbox-option-${e}`, q = l(() => {
-			if (i(Y.value)) return;
-			let e = W.value[Y.value];
-			if (e) return K(e.valueHash);
-		}), J = l(() => W.value.length > 0), { focusedIndex: Y, focusNext: oe, focusPrevious: se, focusFirst: ce, focusLast: le, focusFirstSelected: X, focusLastSelected: ue, focusByHash: de, focusByPointer: fe, blurPointerFocus: pe, blur: Z, getHighlighted: me } = te(() => N.options, { disabled: () => !N.open }), Q = v(!1);
-		w(Y, (e) => {
-			I.value && ee(e) && !Q.value && V.value.scrollToIndex(e, { align: "center" }), Q.value = !1, P("focused:change", q.value);
+		}))), he = E(), U = (e) => `${he}-listbox-option-${e}`, W = (e) => `${U(e)}__label`, G = (e) => `${U(e)}__description`, K = (e) => !!e && !P.option, q = u(() => {
+			if (e(Y.value)) return;
+			let t = H.value[Y.value];
+			if (t) return U(t.valueHash);
+		}), J = u(() => H.value.length > 0), { focusedIndex: Y, focusNext: ge, focusPrevious: _e, focusFirst: ve, focusLast: ye, focusFirstSelected: be, focusLastSelected: xe, focusByHash: Se, focusByPointer: Ce, blurPointerFocus: X, blur: Z, getHighlighted: we } = c(() => M.options, { disabled: () => !M.open }), Q = x(!1);
+		O(Y, (e) => {
+			I.value && s(e) && !Q.value && V.value.scrollToIndex(e, { align: "center" }), Q.value = !1, N("focused:change", q.value);
 		});
-		let he = (e) => {
-			N.open && (Q.value = !0, fe(e));
-		}, ge = () => {
-			pe();
+		let Te = (e) => {
+			M.open && (Q.value = !0, Ce(e));
+		}, Ee = () => {
+			X();
 		}, $ = () => {
-			if (i(Y.value) || !N.open) return;
-			let e = W.value[Y.value];
-			e.disabled || (e.selected ? P("option:unselected", e) : P("option:selected", e));
-		}, _e = (e) => {
-			if (e.preventDefault(), I.value && e.target instanceof HTMLElement && L.value) {
-				let t = e.target, n = t.dataset.index;
-				for (; i(n) && t.parentElement;) t = t.parentElement, n = t.dataset.index;
-				if (n) {
-					let e = W.value[+n];
-					e && !e.disabled && (Y.value = +n, $());
+			if (e(Y.value) || !M.open) return;
+			let t = H.value[Y.value];
+			t.disabled || (t.selected ? N("option:unselected", t) : N("option:selected", t));
+		}, De = (t) => {
+			if (t.preventDefault(), I.value && t.target instanceof HTMLElement && L.value) {
+				let n = t.target, r = n.dataset.index;
+				for (; e(r) && n.parentElement;) n = n.parentElement, r = n.dataset.index;
+				if (r) {
+					let e = H.value[+r];
+					e && !e.disabled && (Y.value = +r, $());
 				}
 			}
 		};
-		return w(() => N.options, (e, t) => {
-			o(e.map((e) => e.valueHash)) !== o(t.map((e) => e.valueHash)) && (V.value.measure(), Z());
-		}, { flush: "post" }), w(z, () => {
+		return O(() => M.options, (e, t) => {
+			a(e.map((e) => e.valueHash)) !== a(t.map((e) => e.valueHash)) && (V.value.measure(), Z());
+		}, { flush: "post" }), O(z, () => {
 			V.value.measure();
-		}, { flush: "post" }), m({
-			focusNext: oe,
-			focusPrevious: se,
-			focusFirst: ce,
-			focusFirstSelected: X,
-			focusLast: le,
-			focusLastSelected: ue,
+		}, { flush: "post" }), _({
+			focusNext: ge,
+			focusPrevious: _e,
+			focusFirst: ve,
+			focusFirstSelected: be,
+			focusLast: ye,
+			focusLastSelected: xe,
 			blur: Z,
 			confirmOption: $,
-			focusByHash: de,
-			getHighlighted: me,
+			focusByHash: Se,
+			getHighlighted: we,
 			getActiveDescendantId: () => q.value
-		}), (e, t) => (_(), u("span", {
-			class: h(["bb-listbox", {
+		}), (e, t) => (b(), p("span", {
+			class: ne(["bb-listbox", {
 				"bb-listbox--compact": e.compact,
+				"bb-listbox--described": e.described,
 				"bb-listbox--loading": e.loading,
 				"bb-listbox--multiple": e.multiple,
 				"bb-listbox--no-data": !J.value,
 				"bb-listbox--open": e.open
 			}]),
-			style: g({
+			style: y({
 				"--transition-duration": `${e.transitionDuration}ms`,
 				"--option-height": `${z.value}px`,
 				"--option-font-size": B.value
 			}),
-			onClick: T(_e, ["stop"]),
-			onMousedown: t[0] ||= T(() => {}, ["prevent"])
-		}, [d("span", D, [d("span", O, [
-			y(e.$slots, "options:prepend"),
-			e.loading && !J.value ? (_(), u("span", k, [y(e.$slots, "loading", {}, () => [f(b(e.loadingText || x(F)("common.loadingText").value), 1)])])) : J.value ? (_(), u("span", {
+			onClickCapture: De,
+			onClick: t[0] ||= k(() => {}, ["stop"]),
+			onMousedown: t[1] ||= k(() => {}, ["prevent"])
+		}, [m("span", ae, [m("span", oe, [
+			C(e.$slots, "options:prepend"),
+			e.loading && !J.value ? (b(), p("span", se, [C(e.$slots, "loading", {}, () => [h(w(e.loadingText || T(F)("common.loadingText").value), 1)])])) : J.value ? (b(), p("span", {
 				key: 2,
 				id: e.id,
 				ref: "listbox",
 				"aria-activedescendant": q.value,
 				"aria-multiselectable": e.multiple ? !0 : void 0,
 				role: "listbox",
-				style: g({ height: `${U.value}px` }),
+				style: y({ height: `${me.value}px` }),
 				tabindex: "-1",
-				onMouseleave: ge
-			}, [(_(!0), u(ne, null, re(H.value, (t) => (_(), u("span", {
-				id: K(W.value[t.index].valueHash),
-				key: W.value[t.index].valueHash,
-				"aria-disabled": W.value[t.index].disabled ? !0 : void 0,
+				onMouseleave: Ee
+			}, [(b(!0), p(l, null, S(pe.value, (t) => (b(), p("span", v({
+				id: U(H.value[t.index].valueHash),
+				key: H.value[t.index].valueHash,
+				"aria-describedby": K(H.value[t.index].description) ? G(H.value[t.index].valueHash) : void 0,
+				"aria-disabled": H.value[t.index].disabled ? !0 : void 0,
+				"aria-labelledby": K(H.value[t.index].description) ? W(H.value[t.index].valueHash) : void 0,
 				"aria-posinset": t.index + 1,
-				"aria-selected": W.value[t.index].selected,
-				"aria-setsize": N.options.length,
-				class: h(["bb-listbox__option", {
-					"bb-listbox__option--focused": x(Y) === t.index,
-					"bb-listbox__option--selected": W.value[t.index].selected,
-					"bb-listbox__option--disabled": W.value[t.index].disabled
-				}]),
+				"aria-selected": H.value[t.index].selected,
+				"aria-setsize": M.options.length,
+				class: ["bb-listbox__option", {
+					"bb-listbox__option--focused": T(Y) === t.index,
+					"bb-listbox__option--selected": H.value[t.index].selected,
+					"bb-listbox__option--disabled": H.value[t.index].disabled
+				}],
 				"data-index": t.index,
 				role: "option",
-				style: g({ transform: `translateY(${t.start}px)` }),
-				onMouseenter: T((e) => he(t.index), ["stop"])
-			}, [y(e.$slots, "option", {
-				disabled: W.value[t.index].disabled,
-				focused: x(Y) === t.index,
-				index: t.index,
-				item: W.value[t.index].item,
-				selected: W.value[t.index].selected,
-				text: W.value[t.index].text,
-				value: W.value[t.index].value
-			}, () => [d("span", j, b(W.value[t.index].text), 1)]), p(r, {
-				"aria-hidden": "true",
-				class: "bb-listbox__option-check",
-				icon: x(a)
-			}, null, 8, ["icon"])], 46, ae))), 128))], 44, ie)) : (_(), u("span", A, [y(e.$slots, "no-data", {}, () => [f(b(e.noDataText || x(F)("common.noDataText").value), 1)])])),
-			y(e.$slots, "options:append")
+				style: { transform: `translateY(${t.start}px)` },
+				onMouseenter: k((e) => Te(t.index), ["stop"]),
+				ref_for: !0
+			}, e.passthrough?.part?.("option", {
+				selected: H.value[t.index].selected,
+				disabled: H.value[t.index].disabled || void 0
+			})), [
+				H.value[t.index]["prepend:icon"] ? (b(), d(i, v({
+					key: 0,
+					"aria-hidden": "true",
+					class: "bb-listbox__option-prepend-icon",
+					icon: H.value[t.index]["prepend:icon"],
+					ref_for: !0
+				}, e.passthrough?.part?.("item-icon", {
+					selected: H.value[t.index].selected,
+					disabled: H.value[t.index].disabled || void 0
+				})), null, 16, ["icon"])) : f("", !0),
+				C(e.$slots, "option", {
+					description: H.value[t.index].description,
+					disabled: H.value[t.index].disabled,
+					focused: T(Y) === t.index,
+					index: t.index,
+					item: H.value[t.index].item,
+					selected: H.value[t.index].selected,
+					text: H.value[t.index].text,
+					value: H.value[t.index].value
+				}, () => [H.value[t.index].description ? (b(), p("span", de, [m("span", v({
+					id: W(H.value[t.index].valueHash),
+					class: "bb-listbox__option-label",
+					ref_for: !0
+				}, e.passthrough?.part?.("item-text", {
+					selected: H.value[t.index].selected,
+					disabled: H.value[t.index].disabled || void 0
+				})), w(H.value[t.index].text), 17, fe), m("span", v({
+					id: G(H.value[t.index].valueHash),
+					class: "bb-listbox__option-description",
+					ref_for: !0
+				}, e.passthrough?.part?.("item-description", {
+					selected: H.value[t.index].selected,
+					disabled: H.value[t.index].disabled || void 0
+				})), w(H.value[t.index].description), 17, A)])) : (b(), p("span", v({
+					key: 1,
+					class: "bb-listbox__option-label",
+					ref_for: !0
+				}, e.passthrough?.part?.("item-text", {
+					selected: H.value[t.index].selected,
+					disabled: H.value[t.index].disabled || void 0
+				})), w(H.value[t.index].text), 17))]),
+				H.value[t.index]["append:icon"] && !H.value[t.index].selected ? (b(), d(i, v({
+					key: 1,
+					"aria-hidden": "true",
+					class: "bb-listbox__option-append-icon",
+					icon: H.value[t.index]["append:icon"],
+					ref_for: !0
+				}, e.passthrough?.part?.("item-icon", {
+					selected: H.value[t.index].selected,
+					disabled: H.value[t.index].disabled || void 0
+				})), null, 16, ["icon"])) : f("", !0),
+				g(i, {
+					"aria-hidden": "true",
+					class: "bb-listbox__option-check",
+					icon: T(ee)
+				}, null, 8, ["icon"])
+			], 16, ue))), 128))], 44, le)) : (b(), p("span", ce, [C(e.$slots, "no-data", {}, () => [h(w(e.noDataText || T(F)("common.noDataText").value), 1)])])),
+			C(e.$slots, "options:append")
 		], 512)])], 38));
 	}
 });
 //#endregion
-export { M as default };
+export { j as default };

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

@@ -1,5 +1,11 @@
 import { Option } from '../../types/Option';
+import { PtBindings } from '../../types/passthrough';
 export type FlatListBoxProps<Item = any> = {
+    /**
+     * Passthrough resolver handed down by the select popover: `option` is one
+     * option, resolved per node with its own `selected` / `disabled`. Internal.
+     */
+    passthrough?: PtBindings<'option' | 'item-text' | 'item-icon' | 'item-description', 'selected' | 'disabled'>;
     /**
      * Id applied to the `role="listbox"` element itself (not the wrapper), so
      * a combobox's `aria-controls` reference resolves to the listbox role.
@@ -44,6 +50,12 @@ export type FlatListBoxProps<Item = any> = {
      * 44px / 36px on mobile viewports). An explicit value wins on every viewport.
      */
     optionHeight?: number;
+    /**
+     * Every row carries a one-line description under its label (the owner's
+     * `itemProps` declares a `description`). Rows get a fixed two-line height and the
+     * description ellipsizes; an explicit `optionHeight` still wins.
+     */
+    described?: boolean;
 };
 export type FlatListBoxEvents = {
     /**
@@ -78,6 +90,8 @@ export type FlatListBoxOptionSlotProps<Item = any> = {
     text: string;
     /** The resolved value for this option. */
     value: any;
+    /** The resolved `itemProps.description` for this option, when it has one. */
+    description: string | undefined;
 };
 export type FlatListBoxSlots<Item = any> = {
     /**