@bridge-ui/vue 0.0.1-beta.2 → 0.0.1-beta.4

package/dist/Components/Select/Select.vue_vue_type_script_setup_true_lang.js

@@ -1,37 +1,36 @@
 import { hasNamedSlot as e, resolveNamedSlot as t } from "../../Utils/slotOrProp.js";
 import n from "../Icon/Icon.js";
-import r from "../FormField/FormField.js";
-import i from "../Listbox/Listbox.js";
-import { useSelect as a } from "./composables/useSelect.js";
-import { SELECT_OPTION_KEY as o } from "./selectInjectionKey.js";
-import { Fragment as s, createBlock as c, createCommentVNode as ee, createElementBlock as l, createElementVNode as u, createSlots as d, createVNode as f, defineComponent as p, guardReactiveProps as m, isRef as h, mergeModels as g, mergeProps as _, normalizeProps as v, openBlock as y, provide as b, ref as x, renderList as S, renderSlot as C, resolveDynamicComponent as w, toDisplayString as T, unref as E, useModel as te, useTemplateRef as D, withCtx as O, withKeys as k, withModifiers as A } from "vue";
-import { X as j } from "lucide-vue-next";
+import r from "../Chip/Chip.js";
+import i from "../FormField/FormField.js";
+import a from "../Listbox/Listbox.js";
+import { useSelect as o } from "./composables/useSelect.js";
+import { SELECT_OPTION_KEY as s } from "./selectInjectionKey.js";
+import { Fragment as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createTextVNode as m, createVNode as h, defineComponent as g, guardReactiveProps as _, isRef as v, mergeModels as y, mergeProps as b, normalizeProps as x, openBlock as S, provide as C, ref as w, renderList as T, renderSlot as E, resolveDynamicComponent as D, toDisplayString as O, unref as k, useModel as A, useTemplateRef as j, withCtx as M, withKeys as N, withModifiers as P } from "vue";
+import { X as F } from "@lucide/vue";
 //#region src/Components/Select/Select.vue?vue&type=script&setup=true&lang.ts
-var ne = {
+var I = {
 	key: 0,
-	class: "flex min-w-0 flex-1 flex-wrap items-center gap-1"
-}, M = { class: "truncate" }, N = [
-	"aria-label",
-	"onClick",
-	"onKeydown"
-], P = {
+	class: "flex min-w-0 flex-1 flex-wrap items-center gap-0.5"
+}, L = {
 	key: 1,
 	class: "flex min-w-0 flex-1 items-center gap-1"
-}, F = /* @__PURE__ */ p({
+}, R = /* @__PURE__ */ g({
 	inheritAttrs: !1,
 	__name: "Select",
-	props: /* @__PURE__ */ g({
+	props: /* @__PURE__ */ y({
 		asyncData: {},
 		clearable: {
 			type: Boolean,
 			default: !0
 		},
+		customProps: {},
 		defaultValue: {},
 		disableMaxHeight: { type: Boolean },
 		emptyMessage: { default: "No options" },
 		flipOptions: { type: Boolean },
 		hideEmptyMessage: { type: Boolean },
 		loading: { type: Boolean },
+		loadingMessage: {},
 		maxHeight: {},
 		minItemsForSearch: { default: 11 },
 		multiple: { type: Boolean },
@@ -48,7 +47,6 @@ var ne = {
 		color: {},
 		controlId: {},
 		corner: {},
-		customProps: {},
 		description: {},
 		disabled: { type: Boolean },
 		end: {},
@@ -74,7 +72,7 @@ var ne = {
 		modelValue: {},
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ g([
+	emits: /* @__PURE__ */ y([
 		"change",
 		"clear",
 		"close",
@@ -84,108 +82,90 @@ var ne = {
 		"select",
 		"update:modelValue"
 	], ["update:modelValue"]),
-	setup(p, { emit: g }) {
-		let F = te(p, "modelValue"), I = p, L = g, R = D("trigger"), z = x([]);
-		b(o, {
+	setup(g, { emit: y }) {
+		let R = A(g, "modelValue"), z = g, B = y, V = j("trigger"), H = w([]);
+		C(s, {
 			unregister(e) {
-				z.value = z.value.filter((t) => String(t.value) !== String(e));
+				H.value = H.value.filter((t) => String(t.value) !== String(e));
 			},
 			register(e) {
-				z.value.some((t) => String(t.value) === String(e.value)) || (z.value = [...z.value, e]);
+				H.value.some((t) => String(t.value) === String(e.value)) || (H.value = [...H.value, e]);
 			}
 		});
-		let { open: B, slots: V, hasValue: H, multiple: U, listboxId: W, formField: G, isLoading: K, clearable: q, clearBind: J, isSelected: Y, clearValue: X, removeChip: Z, triggerBind: Q, selectOption: re, containerRef: ie, emptyMessage: ae, clearIconSize: $, visibleOptions: oe, selectedOptions: se, highlightedIndex: ce, hideEmptyMessage: le } = a(I, F, R, L, z);
-		return (a, o) => (y(), l(s, null, [
-			f(E(r), { field: E(G) }, {
-				default: O(() => [E(U) ? (y(), l("div", ne, [(y(!0), l(s, null, S(E(se), (e) => (y(), l("span", {
+		let { open: U, slots: W, hasValue: G, multiple: K, formField: q, clearable: J, clearBind: Y, clearValue: X, removeChip: Z, triggerBind: Q, selectOption: $, containerRef: ee, listboxProps: te, clearIconSize: ne, mergedClasses: re, selectedOptions: ie } = o(z, R, V, B, H);
+		return (o, s) => (S(), d(c, null, [
+			h(k(i), { field: k(q) }, {
+				default: M(() => [k(K) ? (S(), d("div", I, [(S(!0), d(c, null, T(k(ie), (e) => (S(), l(k(r), {
+					dismissible: "",
 					key: String(e.value),
-					class: "inline-flex max-w-full items-center gap-1 rounded-md bg-gray-100 px-2 py-0.5 text-sm text-gray-800 dark:bg-gray-700 dark:text-gray-100"
-				}, [C(a.$slots, "chip", { option: e }, () => [u("span", M, T(e.label), 1)]), u("span", _({ ref_for: !0 }, E(J), {
-					"aria-label": `Remove ${e.label}`,
-					onClick: (t) => E(Z)(e, t),
-					onKeydown: [k(A((t) => E(Z)(e, t), ["prevent"]), ["enter"]), k(A((t) => E(Z)(e, t), ["prevent"]), ["space"])]
-				}), [f(E(n), {
-					icon: E(j),
-					size: E($)
-				}, null, 8, ["icon", "size"])], 16, N)]))), 128)), u("textarea", _({ ref: "trigger" }, E(Q)), null, 16)])) : (y(), l("div", P, [u("input", _({
+					size: k(q).merged.value.size,
+					"custom-props": { clear: k(Y) },
+					disabled: k(q).isDisabled.value,
+					"clear-label": `Remove ${e.label}`,
+					classes: { root: k(re).chip },
+					onDismiss: (t) => k(Z)(e, t)
+				}, {
+					default: M(() => [E(o.$slots, "chip", { option: e }, () => [m(O(e.label), 1)])]),
+					_: 2
+				}, 1032, [
+					"size",
+					"custom-props",
+					"disabled",
+					"clear-label",
+					"classes",
+					"onDismiss"
+				]))), 128)), f("textarea", b({ ref: "trigger" }, k(Q)), null, 16)])) : (S(), d("div", L, [f("input", b({
 					ref: "trigger",
 					class: "min-w-0 flex-1"
-				}, E(Q)), null, 16), E(q) && E(H) && !E(G).isDisabled.value ? (y(), l("span", _({ key: 0 }, E(J), {
-					onClick: o[0] ||= (...e) => E(X) && E(X)(...e),
+				}, k(Q)), null, 16), k(J) && k(G) && !k(q).isDisabled.value ? (S(), d("span", b({ key: 0 }, k(Y), {
+					onClick: s[0] ||= (...e) => k(X) && k(X)(...e),
 					"aria-label": "Clear selection",
-					onKeydown: [o[1] ||= k(A((...e) => E(X) && E(X)(...e), ["prevent"]), ["enter"]), o[2] ||= k(A((...e) => E(X) && E(X)(...e), ["prevent"]), ["space"])]
-				}), [f(E(n), {
-					icon: E(j),
-					size: E($)
-				}, null, 8, ["icon", "size"])], 16)) : ee("", !0)]))]),
+					onKeydown: [s[1] ||= N(P((...e) => k(X) && k(X)(...e), ["prevent"]), ["enter"]), s[2] ||= N(P((...e) => k(X) && k(X)(...e), ["prevent"]), ["space"])]
+				}), [h(k(n), {
+					icon: k(F),
+					size: k(ne)
+				}, null, 8, ["icon", "size"])], 16)) : u("", !0)]))]),
 				_: 3
 			}, 8, ["field"]),
-			f(E(i), {
-				modelValue: E(B),
-				"onUpdate:modelValue": o[3] ||= (e) => h(B) ? B.value = e : null,
-				loading: E(K),
-				multiple: E(U),
-				"listbox-id": E(W),
-				"anchor-el": E(ie),
-				options: E(oe),
-				"is-selected": E(Y),
-				onSelect: E(re),
-				"disable-auto-focus": !0,
-				"empty-message": E(ae),
-				"max-height": I.maxHeight,
-				color: E(G).merged.value.color,
-				"highlighted-index": E(ce),
-				"hide-empty-message": E(le),
-				"labelled-by": E(G).controlId.value,
-				invalidated: E(G).invalidated.value,
-				"disable-max-height": I.disableMaxHeight
-			}, d({ _: 2 }, [
-				E(e)(E(V), "beforeOptions") ? {
+			h(k(a), b(k(te), {
+				modelValue: k(U),
+				"onUpdate:modelValue": s[3] ||= (e) => v(U) ? U.value = e : null,
+				"anchor-el": k(ee),
+				onSelect: k($)
+			}), p({ _: 2 }, [
+				k(e)(k(W), "beforeOptions") ? {
 					name: "beforeOptions",
-					fn: O(() => [(y(), c(w(E(t)(E(V), "beforeOptions"))))]),
+					fn: M(() => [(S(), l(D(k(t)(k(W), "beforeOptions"))))]),
 					key: "0"
 				} : void 0,
-				E(e)(E(V), "loading") ? {
+				k(e)(k(W), "loading") ? {
 					name: "loading",
-					fn: O(() => [(y(), c(w(E(t)(E(V), "loading"))))]),
+					fn: M(() => [(S(), l(D(k(t)(k(W), "loading"))))]),
 					key: "1"
 				} : void 0,
-				E(e)(E(V), "option") ? {
+				k(e)(k(W), "option") ? {
 					name: "option",
-					fn: O((e) => [C(a.$slots, "option", v(m(e)))]),
+					fn: M((e) => [E(o.$slots, "option", x(_(e)))]),
 					key: "2"
 				} : void 0,
-				E(e)(E(V), "empty") ? {
+				k(e)(k(W), "empty") ? {
 					name: "empty",
-					fn: O(() => [(y(), c(w(E(t)(E(V), "empty"))))]),
+					fn: M(() => [(S(), l(D(k(t)(k(W), "empty"))))]),
 					key: "3"
 				} : void 0,
-				E(e)(E(V), "afterOptions") ? {
+				k(e)(k(W), "afterOptions") ? {
 					name: "afterOptions",
-					fn: O(() => [(y(), c(w(E(t)(E(V), "afterOptions"))))]),
+					fn: M(() => [(S(), l(D(k(t)(k(W), "afterOptions"))))]),
 					key: "4"
 				} : void 0
-			]), 1032, [
+			]), 1040, [
 				"modelValue",
-				"loading",
-				"multiple",
-				"listbox-id",
 				"anchor-el",
-				"options",
-				"is-selected",
-				"onSelect",
-				"empty-message",
-				"max-height",
-				"color",
-				"highlighted-index",
-				"hide-empty-message",
-				"labelled-by",
-				"invalidated",
-				"disable-max-height"
+				"onSelect"
 			]),
-			C(a.$slots, "default")
+			E(o.$slots, "default")
 		], 64));
 	}
 });
 //#endregion
-export { F as default };
+export { R as default };

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

@@ -1,6 +1,6 @@
 import { Ref, SetupContext } from 'vue';
 import { FormFieldOwnProps } from '../../FormField/formField.types';
-import { SelectEmits, SelectOption, SelectOwnProps, SelectValue } from '../select.types';
+import { SelectClasses, SelectEmits, SelectOption, SelectOwnProps, SelectValue } from '../select.types';
 export declare function useSelect(props: SelectOwnProps, model: Ref<null | undefined | SelectValue | SelectValue[]>, triggerRef: Ref<null | HTMLInputElement | HTMLTextAreaElement>, emit: SetupContext<SelectEmits>["emit"], declarativeOptions: Ref<SelectOption[]>): {
     open: Ref<boolean, boolean>;
     slots: Readonly<{
@@ -18,7 +18,7 @@ export declare function useSelect(props: SelectOwnProps, model: Ref<null | undef
             size: NonNullable<keyof import('@bridge-ui/core').FormFieldSize | undefined>;
             rounded: NonNullable<keyof import('@bridge-ui/core').FormFieldRounded | undefined>;
             variant: NonNullable<keyof import('@bridge-ui/core').FormFieldVariant | undefined>;
-            errorIcon: import('lucide-vue-next').LucideIcon;
+            errorIcon: import('@lucide/vue').LucideIcon;
             withErrorIcon: NonNullable<boolean | undefined>;
         }>;
         control: import('vue').ComputedRef<string>;
@@ -214,7 +214,7 @@ export declare function useSelect(props: SelectOwnProps, model: Ref<null | undef
         }>>;
         controlId: import('vue').ComputedRef<string>;
         errorBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-        errorIcon: import('vue').ComputedRef<import('lucide-vue-next').LucideIcon>;
+        errorIcon: import('vue').ComputedRef<import('@lucide/vue').LucideIcon>;
         inputBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {
             id: string;
             disabled: boolean;
@@ -723,11 +723,35 @@ export declare function useSelect(props: SelectOwnProps, model: Ref<null | undef
     }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "color" | "end" | "size" | "classes" | "customProps" | "error" | "rounded" | "variant" | "label" | "disabled" | "endIcon" | "startIcon" | "start" | "description" | "errorMessage" | "readonly" | "required" | "withoutErrorMessage" | "errorIcon" | "withErrorIcon" | "corner">>>>>;
     selectOption: (option: SelectOption) => void;
     containerRef: Ref<HTMLElement | null, HTMLElement | null>;
+    listboxProps: import('vue').ComputedRef<{
+        listboxId: string;
+        isSelected: (value: SelectValue) => boolean;
+        loading: boolean;
+        multiple: boolean;
+        options: import('@bridge-ui/core').ListboxOption[];
+        labelledBy: string;
+        highlightedIndex: number;
+        invalidated: boolean;
+        color: "dark" | "error" | "info" | "primary" | "secondary" | "success" | "warning";
+        size: "2xl" | "2xs" | "lg" | "md" | "sm" | "xl" | "xs";
+        classes?: import('../../Listbox').ListboxClasses;
+        customProps?: import('../../Listbox').ListboxCustomProps;
+        disableAutoFocus: boolean;
+        placement?: import('@floating-ui/utils').Placement;
+        disableMaxHeight: boolean;
+        emptyMessage: string;
+        hideEmptyMessage: boolean;
+        loadingMessage: string;
+        maxHeight: string;
+        showCheckmark?: boolean;
+    }>;
     clearIconSize: import('vue').ComputedRef<keyof import('@bridge-ui/core').IconSize>;
+    mergedClasses: import('vue').ComputedRef<Partial<SelectClasses>>;
     visibleOptions: import('vue').ComputedRef<import('@bridge-ui/core').ListboxOption[]>;
     isSearchActive: import('vue').ComputedRef<boolean>;
     selectedOptions: import('vue').ComputedRef<import('@bridge-ui/core').ListboxOption[]>;
     highlightedIndex: Ref<number, number>;
     emptyMessage: import('vue').ComputedRef<string>;
     hideEmptyMessage: import('vue').ComputedRef<boolean>;
+    loadingMessage: import('vue').ComputedRef<string>;
 };