@bridge-ui/vue 0.0.1 → 0.0.2

package/dist/Components/Listbox/Listbox.vue_vue_type_script_setup_true_lang.js

@@ -2,17 +2,18 @@ import { hasNamedSlot as e, resolveNamedSlot as t } from "../../Utils/slotOrProp
 import n from "../List/List.js";
 import { useListbox as r } from "./composables/useListbox.js";
 import { LISTBOX_INJECTION_KEY as i } from "./listboxInjectionKey.js";
-import a from "../ListItem/ListItem.js";
-import o from "../ListSection/ListSection.js";
-import s from "../Menu/Menu.js";
-import ee from "../Progress/Progress.js";
-import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as te, createVNode as m, defineComponent as h, guardReactiveProps as g, mergeModels as _, mergeProps as v, normalizeClass as y, normalizeProps as b, openBlock as x, provide as S, ref as C, renderList as ne, renderSlot as w, resolveDynamicComponent as T, toDisplayString as E, unref as D, useModel as O, useSlots as k, watch as A, withCtx as j } from "vue";
-import { cn as M, entriesFromListboxOptions as re, flattenListboxOptions as ie, mapListboxEntriesToRows as ae } from "@bridge-ui/core";
+import ee from "../ListItem/ListItem.js";
+import te from "../ListSection/ListSection.js";
+import a from "../Menu/Menu.js";
+import ne from "../Progress/Progress.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createSlots as f, createVNode as p, defineComponent as m, guardReactiveProps as h, mergeModels as g, mergeProps as _, normalizeClass as v, normalizeProps as y, openBlock as b, provide as x, ref as S, renderList as C, renderSlot as w, resolveDynamicComponent as T, toDisplayString as E, unref as D, useModel as O, useSlots as k, watch as A, withCtx as j } from "vue";
+import { isNil as M } from "es-toolkit/compat";
+import { cn as N, entriesFromListboxOptions as re, flattenListboxOptions as ie, mapListboxEntriesToRows as ae } from "@bridge-ui/core";
 import { Check as oe } from "@lucide/vue";
 //#region src/Components/Listbox/Listbox.vue?vue&type=script&setup=true&lang.ts
-var se = { key: 1 }, N = /* @__PURE__ */ h({
+var se = { key: 1 }, P = /* @__PURE__ */ m({
 	__name: "Listbox",
-	props: /* @__PURE__ */ _({
+	props: /* @__PURE__ */ g({
 		anchorEl: {},
 		classes: {},
 		color: { default: "primary" },
@@ -45,6 +46,7 @@ var se = { key: 1 }, N = /* @__PURE__ */ h({
 		},
 		options: {},
 		placement: { default: "bottom-start" },
+		rounded: {},
 		showCheckmark: {
 			type: Boolean,
 			default: !0
@@ -57,107 +59,107 @@ var se = { key: 1 }, N = /* @__PURE__ */ h({
 		},
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ _([
+	emits: /* @__PURE__ */ g([
 		"registered-options-change",
 		"select",
 		"show-change"
 	], ["update:modelValue"]),
-	setup(h, { emit: _ }) {
-		let N = k(), P = _, F = O(h, "modelValue");
-		A(F, (e) => {
-			P("show-change", e);
+	setup(m, { emit: g }) {
+		let P = k(), F = g, I = O(m, "modelValue");
+		A(I, (e) => {
+			F("show-change", e);
 		});
-		let I = h, { merged: L, checkClass: R, scrollBind: z, messageBind: B, sizeClasses: V, mergedClasses: H, optionSelectedClass: U, optionHighlightedClass: W } = r(I, {
+		let L = m, { merged: R, checkClass: z, scrollBind: B, messageBind: V, sizeClasses: H, mergedClasses: U, optionSelectedClass: W, optionHighlightedClass: G } = r(L, {
 			size: "md",
 			color: "primary"
-		}), G = l(() => I.options ?? []), K = l(() => I.entries ? I.entries : re(G.value)), q = l(() => ie(K.value)), J = l(() => e(N, "default")), Y = l(() => !I.loading && !J.value && q.value.length === 0 && I.hideEmptyMessage !== !0), X = l(() => M(R.value, H.value.check)), Z = C([]);
+		}), ce = s(() => L.options ?? []), K = s(() => L.entries ? L.entries : re(ce.value)), q = s(() => ie(K.value)), J = s(() => e(P, "default")), Y = s(() => !L.loading && !J.value && q.value.length === 0 && L.hideEmptyMessage !== !0), X = s(() => N(z.value, U.value.check)), Z = S([]);
 		function Q(e) {
-			return I.isSelected?.(e) ?? !1;
-		}
-		function ce(e) {
-			return I.highlightedIndex === e;
+			return L.isSelected?.(e) ?? !1;
 		}
 		function le(e) {
+			return L.highlightedIndex === e;
+		}
+		function ue(e) {
 			e.preventDefault();
 		}
-		function ue(e, t) {
+		function de(e, t) {
 			let n = {
 				tabindex: -1,
-				onMousedown: le,
-				class: M(V.value?.option)
+				onMousedown: ue,
+				class: N(H.value?.option)
 			};
-			return Q(e.value) ? n.class = M(n.class, U.value, H.value.optionSelected) : ce(t) && (n.class = M(n.class, W.value, H.value.optionHighlighted)), {
+			return Q(e.value) ? n.class = N(n.class, W.value, U.value.optionSelected) : le(t) && (n.class = N(n.class, G.value, U.value.optionHighlighted)), {
 				interactive: n,
-				primary: { class: V.value?.primary },
-				secondary: { class: V.value?.secondary }
+				primary: { class: H.value?.primary },
+				secondary: { class: H.value?.secondary }
 			};
 		}
 		function $(e) {
-			e.disabled || P("select", e);
+			e.disabled || F("select", e);
 		}
-		function de(e) {
+		function fe(e) {
 			return Z.value.some((t) => String(t.value) === String(e.value)) || (Z.value = [...Z.value, e]), () => {
 				Z.value = Z.value.filter((t) => String(t.value) !== String(e.value));
 			};
 		}
-		function fe(e) {
+		function pe(e) {
 			return (J.value ? Z.value : q.value).findIndex((t) => String(t.value) === String(e));
 		}
 		A(Z, (e) => {
-			J.value && P("registered-options-change", e);
-		}, { deep: !0 }), S(i, l(() => ({
-			getOptionIndex: fe,
-			registerOption: de,
+			J.value && F("registered-options-change", e);
+		}, { deep: !0 }), x(i, s(() => ({
+			getOptionIndex: pe,
+			registerOption: fe,
 			onSelect: $,
-			listboxId: I.listboxId,
+			listboxId: L.listboxId,
 			isSelected: Q,
-			sizeClasses: V.value,
-			showCheckmark: I.showCheckmark,
+			sizeClasses: H.value,
+			showCheckmark: L.showCheckmark,
 			checkClass: X.value,
-			highlightedIndex: I.highlightedIndex,
-			optionSelectedClass: U.value,
-			optionHighlightedClass: W.value,
+			highlightedIndex: L.highlightedIndex,
+			optionSelectedClass: W.value,
+			optionHighlightedClass: G.value,
 			mergedClasses: {
-				optionSelected: H.value.optionSelected,
-				optionHighlighted: H.value.optionHighlighted
+				optionSelected: U.value.optionSelected,
+				optionHighlighted: U.value.optionHighlighted
 			}
 		})));
-		let pe = l(() => ae(K.value, Q));
-		return (r, i) => (x(), u(D(s), {
-			modelValue: F.value,
-			"onUpdate:modelValue": i[0] ||= (e) => F.value = e,
-			"anchor-el": h.anchorEl,
-			placement: h.placement,
+		let me = s(() => ae(K.value, Q));
+		return (r, i) => (b(), c(D(a), _({
+			modelValue: I.value,
+			"onUpdate:modelValue": i[0] ||= (e) => I.value = e,
+			"anchor-el": m.anchorEl,
+			placement: m.placement,
 			"close-on-click-away": !0,
-			"disable-auto-focus": h.disableAutoFocus,
-			"custom-props": { content: D(L).customProps?.content }
-		}, {
+			"disable-auto-focus": m.disableAutoFocus,
+			"custom-props": { content: D(R).customProps?.content }
+		}, D(M)(m.rounded) ? {} : { rounded: m.rounded }), {
 			default: j(() => [
-				D(e)(D(N), "beforeOptions") ? (x(), u(T(D(t)(D(N), "beforeOptions")), { key: 0 })) : d("", !0),
-				h.loading ? (x(), f(c, { key: 1 }, [m(D(ee), {
+				D(e)(D(P), "beforeOptions") ? (b(), c(T(D(t)(D(P), "beforeOptions")), { key: 0 })) : l("", !0),
+				m.loading ? (b(), u(o, { key: 1 }, [p(D(ne), {
 					size: "xs",
 					"aria-hidden": "",
 					class: "shrink-0",
-					color: D(L).color,
-					classes: { bar: D(H).loading },
-					"custom-props": { bar: D(L).customProps?.loading }
+					color: D(R).color,
+					classes: { bar: D(U).loading },
+					"custom-props": { bar: D(R).customProps?.loading }
 				}, null, 8, [
 					"color",
 					"classes",
 					"custom-props"
-				]), p("div", b(g(D(B))), [D(e)(D(N), "loading") ? (x(), u(T(D(t)(D(N), "loading")), { key: 0 })) : (x(), f("span", se, E(h.loadingMessage), 1))], 16)], 64)) : (x(), f("div", b(v({ key: 2 }, D(z))), [m(D(n), {
+				]), d("div", y(h(D(V))), [D(e)(D(P), "loading") ? (b(), c(T(D(t)(D(P), "loading")), { key: 0 })) : (b(), u("span", se, E(m.loadingMessage), 1))], 16)], 64)) : (b(), u("div", y(_({ key: 2 }, D(B))), [p(D(n), {
 					dense: "",
 					class: "p-0",
 					role: "listbox",
-					id: h.listboxId,
-					"aria-labelledby": h.labelledBy,
-					"aria-multiselectable": h.multiple || void 0
+					id: m.listboxId,
+					"aria-labelledby": m.labelledBy,
+					"aria-multiselectable": m.multiple || void 0
 				}, {
-					default: j(() => [J.value ? w(r.$slots, "default", { key: 0 }) : (x(!0), f(c, { key: 1 }, ne(pe.value, (t) => (x(), f(c, { key: t.key }, [t.kind === "section" ? (x(), u(D(o), {
+					default: j(() => [J.value ? w(r.$slots, "default", { key: 0 }) : (b(!0), u(o, { key: 1 }, C(me.value, (t) => (b(), u(o, { key: t.key }, [t.kind === "section" ? (b(), c(D(te), {
 						key: 0,
 						title: t.title,
 						sticky: t.sticky
-					}, null, 8, ["title", "sticky"])) : (x(), u(D(a), {
+					}, null, 8, ["title", "sticky"])) : (b(), c(D(ee), {
 						key: 1,
 						interactive: "",
 						role: "option",
@@ -166,19 +168,19 @@ var se = { key: 1 }, N = /* @__PURE__ */ h({
 						disabled: t.option.disabled,
 						secondary: t.option.description,
 						onClick: (e) => $(t.option),
-						id: `${h.listboxId}-option-${t.index}`,
-						"custom-props": ue(t.option, t.index),
-						primary: D(e)(D(N), "option") ? void 0 : t.option.label
-					}, te({ _: 2 }, [D(e)(D(N), "option") ? {
+						id: `${m.listboxId}-option-${t.index}`,
+						"custom-props": de(t.option, t.index),
+						primary: D(e)(D(P), "option") ? void 0 : t.option.label
+					}, f({ _: 2 }, [D(e)(D(P), "option") ? {
 						name: "default",
 						fn: j(() => [w(r.$slots, "option", {
 							option: t.option,
 							selected: t.selected
 						})]),
 						key: "0"
-					} : void 0, h.showCheckmark && t.selected ? {
+					} : void 0, m.showCheckmark && t.selected ? {
 						name: "end",
-						fn: j(() => [m(D(oe), { class: y(X.value) }, null, 8, ["class"])]),
+						fn: j(() => [p(D(oe), { class: v(X.value) }, null, 8, ["class"])]),
 						key: "1"
 					} : void 0]), 1032, [
 						"aria-selected",
@@ -195,11 +197,11 @@ var se = { key: 1 }, N = /* @__PURE__ */ h({
 					"aria-labelledby",
 					"aria-multiselectable"
 				])], 16)),
-				Y.value && !D(e)(D(N), "empty") ? (x(), f("div", b(v({ key: 3 }, D(B))), E(h.emptyMessage), 17)) : Y.value && D(e)(D(N), "empty") ? (x(), u(T(D(t)(D(N), "empty")), { key: 4 })) : d("", !0),
-				D(e)(D(N), "afterOptions") ? (x(), u(T(D(t)(D(N), "afterOptions")), { key: 5 })) : d("", !0)
+				Y.value && !D(e)(D(P), "empty") ? (b(), u("div", y(_({ key: 3 }, D(V))), E(m.emptyMessage), 17)) : Y.value && D(e)(D(P), "empty") ? (b(), c(T(D(t)(D(P), "empty")), { key: 4 })) : l("", !0),
+				D(e)(D(P), "afterOptions") ? (b(), c(T(D(t)(D(P), "afterOptions")), { key: 5 })) : l("", !0)
 			]),
 			_: 3
-		}, 8, [
+		}, 16, [
 			"modelValue",
 			"anchor-el",
 			"placement",
@@ -209,4 +211,4 @@ var se = { key: 1 }, N = /* @__PURE__ */ h({
 	}
 });
 //#endregion
-export { N as default };
+export { P as default };

package/dist/Components/Listbox/listbox.types.d.ts

@@ -1,7 +1,8 @@
 import { HTMLAttributes, Slot } from 'vue';
-import { ListboxColor, ListboxEntry, ListboxOption, ListboxSize, ListboxValue, MergeHtmlProps, MergeProps, PositionPlacement } from '@bridge-ui/core';
+import { ListboxColor, ListboxEntry, ListboxOption, ListboxSize, ListboxValue, MenuRounded, MergeHtmlProps, MergeProps, PositionPlacement } from '@bridge-ui/core';
 export interface ListboxSizeOverrides {}
 export interface ListboxColorOverrides {}
+export interface ListboxRoundedOverrides {}
 export interface ListboxClasses {
     /**
      * Classes merged onto the check icon.
@@ -165,6 +166,14 @@ export interface ListboxOwnProps {
      * @default "bottom-start"
      */
     placement?: PositionPlacement;
+    /**
+     * Roundedness of the floating panel (`Menu`). When omitted, `Menu` defaults
+     * apply (including `Menu.defaultProps.rounded`).
+     *
+     * `Select` always forwards its own `rounded` here so the dropdown matches the
+     * field, independent of `Menu.defaultProps`.
+     */
+    rounded?: MergeProps<MenuRounded, ListboxRoundedOverrides>;
     /**
      * Shows a check icon on selected options.
      *

package/dist/Components/Select/composables/useSelect.d.ts

@@ -732,8 +732,9 @@ export declare function useSelect(props: SelectOwnProps, model: Ref<null | undef
         entries: ListboxEntry[];
         options: import('@bridge-ui/core').ListboxOption[];
         labelledBy: string;
-        highlightedIndex: number;
+        rounded: NonNullable<keyof import('@bridge-ui/core').FormFieldRounded | undefined>;
         invalidated: boolean;
+        highlightedIndex: number;
         color: "dark" | "error" | "info" | "primary" | "secondary" | "success" | "warning";
         size: "2xl" | "2xs" | "lg" | "md" | "sm" | "xl" | "xs";
         classes?: import('../../Listbox').ListboxClasses;

package/dist/Components/Select/composables/useSelect.js

@@ -319,8 +319,9 @@ function m(m, h, g, _, we) {
 		entries: Pe.value,
 		options: W.value,
 		labelledBy: K.controlId.value,
-		highlightedIndex: S.value,
-		invalidated: K.invalidated.value
+		rounded: K.merged.value.rounded,
+		invalidated: K.invalidated.value,
+		highlightedIndex: S.value
 	}));
 	function tt(e) {
 		let t = I.value;

package/dist/Components/Tabs/tabs.types.d.ts

@@ -43,7 +43,7 @@ export interface TabsOwnProps {
      */
     classes?: TabsClasses;
     /**
-     * Accent color for the selected tab (`primary` or `dark`).
+     * Accent color for the selected tab.
      *
      * @default "primary"
      */

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "license": "MIT",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "author": "BridgeUI",
   "sideEffects": false,
   "name": "@bridge-ui/vue",
@@ -60,7 +60,7 @@
     "dist"
   ],
   "peerDependencies": {
-    "@bridge-ui/core": "^0.0.1",
+    "@bridge-ui/core": "^0.0.2",
     "@lucide/vue": ">=1.0.0",
     "vue": "^3.4.0"
   },