@bridge-ui/vue 0.0.8 → 0.0.10

package/dist/Components/Autocomplete/Autocomplete.vue_vue_type_script_setup_true_lang.js

@@ -1,30 +1,31 @@
 import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
-import { hasNamedSlot as t, resolveNamedSlot as n } from "../../Utils/slotOrProp.js";
+import { hasNamedSlot as t, presentSlotNames as n } from "../../Utils/slotOrProp.js";
 import { mergeNestedComponentProps as r } from "../../Utils/index.js";
 import i from "../Icon/Icon.js";
 import { AUTOCOMPLETE_OPTION_KEY as a } from "./autocompleteInjectionKey.js";
-import { useAutocomplete as o } from "./composables/useAutocomplete.js";
-import ee from "../Chip/Chip.js";
-import te from "../FormField/FormField.js";
+import { useAutocomplete as ee } from "./composables/useAutocomplete.js";
+import o from "../Chip/Chip.js";
+import { FORM_FIELD_CHROME_SLOT_NAMES as te } from "../FormField/formField.types.js";
+import ne from "../FormField/FormField.js";
 import s from "../Listbox/Listbox.js";
-import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as ne, createTextVNode as re, createVNode as m, defineComponent as h, guardReactiveProps as g, isRef as _, mergeModels as v, mergeProps as y, normalizeProps as b, openBlock as x, provide as S, ref as C, renderList as ie, renderSlot as w, resolveDynamicComponent as T, toDisplayString as ae, unref as E, useModel as D, useTemplateRef as O, withCtx as k, withKeys as A, withModifiers as j } from "vue";
-import { cn as M } from "@bridge-ui/core";
-import { isUndefined as N } from "es-toolkit/compat";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as m, createTextVNode as re, 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, toDisplayString as ie, unref as D, useModel as ae, useTemplateRef as oe, withCtx as O, withKeys as k, withModifiers as A } from "vue";
+import { cn as j } from "@bridge-ui/core";
+import { isUndefined as M } from "es-toolkit/compat";
 //#region src/Components/Autocomplete/Autocomplete.vue?vue&type=script&setup=true&lang.ts
-var P = {
+var N = {
 	key: 0,
 	class: "flex min-w-0 flex-1 flex-wrap items-center gap-0.5"
-}, F = {
+}, P = {
 	key: 1,
 	class: "flex min-w-0 flex-1 items-center gap-1"
-}, I = ["aria-label"], L = {
+}, F = ["aria-label"], I = {
 	key: 0,
 	hidden: "",
 	"aria-hidden": "true"
-}, R = /* @__PURE__ */ h({
+}, L = /*@__PURE__*/ g({
 	inheritAttrs: !1,
 	__name: "Autocomplete",
-	props: /* @__PURE__ */ v({
+	props: /*@__PURE__*/ y({
 		asyncData: {},
 		clearable: {
 			type: Boolean,
@@ -49,11 +50,13 @@ var P = {
 		optionLabel: {},
 		options: {},
 		optionValue: {},
+		overlay: {},
 		placeholder: {},
 		searchable: {
 			type: Boolean,
 			default: !0
 		},
+		showFooter: { type: Boolean },
 		classes: {},
 		color: {},
 		controlId: {},
@@ -83,7 +86,8 @@ var P = {
 		modelValue: {},
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ v([
+	emits: /*@__PURE__*/ y([
+		"cancel",
 		"change",
 		"clear",
 		"close",
@@ -93,14 +97,14 @@ var P = {
 		"select",
 		"update:modelValue"
 	], ["update:modelValue"]),
-	setup(h, { emit: v }) {
-		let R = D(h, "modelValue"), z = h, B = e(), V = v, H = C(z.defaultValue), oe = l({
+	setup(g, { emit: y }) {
+		let L = ae(g, "modelValue"), R = g, z = e(), B = y, V = w(R.defaultValue), H = l({
 			set: (e) => {
-				R.value = e, H.value = e;
+				L.value = e, V.value = e;
 			},
-			get: () => N(R.value) ? H.value : R.value
-		}), U = O("trigger"), W = C([]);
-		S(a, {
+			get: () => M(L.value) ? V.value : L.value
+		}), U = oe("trigger"), W = w([]);
+		C(a, {
 			unregister(e) {
 				W.value = W.value.filter((t) => String(t.value) !== String(e));
 			},
@@ -108,90 +112,97 @@ var P = {
 				W.value.some((t) => String(t.value) === String(e.value)) || (W.value = [...W.value, e]);
 			}
 		});
-		let { open: G, slots: K, hasValue: q, multiple: se, formField: J, clearable: ce, clearBind: Y, clearValue: X, removeChip: le, triggerBind: Z, selectOption: ue, containerRef: Q, listboxProps: de, clearIconSize: fe, mergedClasses: pe, selectedOptions: me, hasComposedList: $, handleRegisteredOptionsChange: he } = o(z, oe, U, V, W);
-		return (e, a) => (x(), f(c, null, [
-			m(E(te), { field: E(J) }, {
-				default: k(() => [E(se) ? (x(), f("div", P, [(x(!0), f(c, null, ie(E(me), (t) => (x(), u(E(ee), y({
+		let { open: G, slots: K, multiple: q, formField: J, clearBind: Y, clearValue: X, removeChip: se, triggerBind: Z, handleApply: ce, selectOption: le, handleCancel: ue, containerRef: Q, listboxProps: de, clearIconSize: fe, mergedClasses: pe, showClearIcon: me, selectedOptions: he, hasComposedList: $, handleRegisteredOptionsChange: ge } = ee(R, H, U, B, W);
+		return (e, a) => (S(), f(c, null, [
+			h(D(ne), { field: D(J) }, m({
+				default: O(() => [D(q) ? (S(), f("div", N, [(S(!0), f(c, null, T(D(he), (t) => (S(), u(D(o), b({
 					dismissible: "",
 					key: String(t.value),
-					size: E(J).merged.value.size,
-					disabled: E(J).isDisabled.value,
+					size: D(J).merged.value.size,
+					disabled: D(J).isDisabled.value,
 					"clear-label": `Remove ${t.label}`,
-					onDismiss: (e) => E(le)(t, e)
-				}, { ref_for: !0 }, E(r)(z.customProps?.chip, {
-					customProps: { clear: E(Y) },
-					classes: { root: E(M)({
-						"bg-white ring-1 ring-inset ring-gray-200 dark:bg-gray-700 dark:ring-gray-600": !0,
-						[E(pe).chip ?? ""]: !0
+					onDismiss: (e) => D(se)(t, e)
+				}, { ref_for: !0 }, D(r)(R.customProps?.chip, {
+					customProps: { clear: D(Y) },
+					classes: { root: D(j)({
+						"bg-white ring-1 ring-inset ring-dark-200 dark:bg-dark-700 dark:ring-dark-600": !0,
+						[D(pe).chip ?? ""]: !0
 					}) }
 				})), {
-					default: k(() => [w(e.$slots, "chip", { option: t }, () => [re(ae(t.label), 1)])]),
+					default: O(() => [E(e.$slots, "chip", { option: t }, () => [re(ie(t.label), 1)])]),
 					_: 2
 				}, 1040, [
 					"size",
 					"disabled",
 					"clear-label",
 					"onDismiss"
-				]))), 128)), p("textarea", y({ ref: "trigger" }, E(Z)), null, 16)])) : (x(), f("div", F, [p("input", y({
+				]))), 128)), p("textarea", b({ ref: "trigger" }, D(Z)), null, 16)])) : (S(), f("div", P, [p("input", b({
 					ref: "trigger",
 					class: "min-w-0 flex-1"
-				}, E(Z)), null, 16), E(ce) && E(q) && !E(J).isDisabled.value ? (x(), f("span", y({ key: 0 }, E(Y), {
-					onClick: a[0] ||= (...e) => E(X) && E(X)(...e),
-					onKeydown: [a[1] ||= A(j((...e) => E(X) && E(X)(...e), ["prevent"]), ["enter"]), a[2] ||= A(j((...e) => E(X) && E(X)(...e), ["prevent"]), ["space"])],
-					"aria-label": E(B)("Clear selection")
-				}), [m(E(i), y({
+				}, D(Z)), null, 16), D(me) ? (S(), f("span", b({ key: 0 }, D(Y), {
+					onClick: a[0] ||= (...e) => D(X) && D(X)(...e),
+					onKeydown: [a[1] ||= k(A((...e) => D(X) && D(X)(...e), ["prevent"]), ["enter"]), a[2] ||= k(A((...e) => D(X) && D(X)(...e), ["prevent"]), ["space"])],
+					"aria-label": D(z)("Clear selection")
+				}), [h(D(i), b({
 					icon: "clear",
-					size: E(fe)
-				}, z.customProps?.clearIcon), null, 16, ["size"])], 16, I)) : d("", !0)]))]),
-				_: 3
-			}, 8, ["field"]),
-			m(E(s), y({
-				modelValue: E(G),
-				"onUpdate:modelValue": a[3] ||= (e) => _(G) ? G.value = e : null
-			}, E(de), {
-				"anchor-el": E(Q),
-				onSelect: E(ue),
-				onRegisteredOptionsChange: E(he)
-			}), ne({ _: 2 }, [
-				E($) ? {
+					size: D(fe)
+				}, R.customProps?.clearIcon), null, 16, ["size"])], 16, F)) : d("", !0)]))]),
+				_: 2
+			}, [T(D(n)(D(te), e.$slots), (t) => ({
+				name: t,
+				fn: O((n) => [E(e.$slots, t, x(_(n || {})))])
+			}))]), 1032, ["field"]),
+			h(D(s), b({
+				modelValue: D(G),
+				"onUpdate:modelValue": a[3] ||= (e) => v(G) ? G.value = e : null
+			}, D(de), {
+				onApply: D(ce),
+				"anchor-el": D(Q),
+				onCancel: D(ue),
+				onSelect: D(le),
+				onRegisteredOptionsChange: D(ge)
+			}), m({ _: 2 }, [
+				D($) ? {
 					name: "default",
-					fn: k(() => [w(e.$slots, "default")]),
+					fn: O(() => [E(e.$slots, "default")]),
 					key: "0"
 				} : void 0,
-				E(t)(E(K), "beforeOptions") ? {
+				D(t)(D(K), "beforeOptions") ? {
 					name: "beforeOptions",
-					fn: k(() => [(x(), u(T(E(n)(E(K), "beforeOptions"))))]),
+					fn: O(() => [E(e.$slots, "beforeOptions")]),
 					key: "1"
 				} : void 0,
-				E(t)(E(K), "loading") ? {
+				D(t)(D(K), "loading") ? {
 					name: "loading",
-					fn: k(() => [(x(), u(T(E(n)(E(K), "loading"))))]),
+					fn: O(() => [E(e.$slots, "loading")]),
 					key: "2"
 				} : void 0,
-				E(t)(E(K), "option") ? {
+				D(t)(D(K), "option") ? {
 					name: "option",
-					fn: k((t) => [w(e.$slots, "option", b(g(t)))]),
+					fn: O((t) => [E(e.$slots, "option", x(_(t)))]),
 					key: "3"
 				} : void 0,
-				E(t)(E(K), "empty") ? {
+				D(t)(D(K), "empty") ? {
 					name: "empty",
-					fn: k(() => [(x(), u(T(E(n)(E(K), "empty"))))]),
+					fn: O(() => [E(e.$slots, "empty")]),
 					key: "4"
 				} : void 0,
-				E(t)(E(K), "afterOptions") ? {
+				D(t)(D(K), "afterOptions") ? {
 					name: "afterOptions",
-					fn: k(() => [(x(), u(T(E(n)(E(K), "afterOptions"))))]),
+					fn: O(() => [E(e.$slots, "afterOptions")]),
 					key: "5"
 				} : void 0
 			]), 1040, [
 				"modelValue",
+				"onApply",
 				"anchor-el",
+				"onCancel",
 				"onSelect",
 				"onRegisteredOptionsChange"
 			]),
-			E($) ? d("", !0) : (x(), f("div", L, [w(e.$slots, "default")]))
+			D($) ? d("", !0) : (S(), f("div", I, [E(e.$slots, "default")]))
 		], 64));
 	}
 });
 //#endregion
-export { R as default };
+export { L as default };

package/dist/Components/Autocomplete/AutocompleteOption.vue_vue_type_script_setup_true_lang.js

@@ -4,7 +4,7 @@ import { createElementBlock as t, defineComponent as n, inject as r, onBeforeUnm
 var s = {
 	hidden: "",
 	"aria-hidden": "true"
-}, c = /* @__PURE__ */ n({
+}, c = /*@__PURE__*/ n({
 	inheritAttrs: !1,
 	name: "AutocompleteOption",
 	__name: "AutocompleteOption",

package/dist/Components/Autocomplete/autocomplete.types.d.ts

@@ -1,5 +1,5 @@
 import { InputHTMLAttributes, Slot, TextareaHTMLAttributes } from 'vue';
-import { ListboxOptionsInput, MergeHtmlProps, SelectAsyncData, SelectModel, SelectOption, SelectValue } from '@bridge-ui/core';
+import { FieldOverlayMode, ListboxOptionsInput, MergeHtmlProps, SelectAsyncData, SelectModel, SelectOption, SelectValue } from '@bridge-ui/core';
 import { ChipOwnProps } from '../Chip/chip.types';
 import { FormFieldClasses, FormFieldCustomProps, FormFieldOwnProps, FormFieldSlots } from '../FormField/formField.types';
 import { IconProps } from '../Icon';
@@ -50,6 +50,10 @@ export interface AutocompleteCustomProps extends FormFieldCustomProps {
     listbox?: Partial<ListboxOwnProps>;
 }
 export interface AutocompleteEmits {
+    /**
+     * Emitted when Cancel is pressed on the listbox footer (`showFooter`).
+     */
+    cancel: [];
     /**
      * Emitted when the selection changes.
      */
@@ -210,6 +214,13 @@ export interface AutocompleteOwnProps extends Omit<FormFieldOwnProps, "field"> {
      * @default "value"
      */
     optionValue?: string;
+    /**
+     * Which overlay shell opens the options panel. `auto` uses `menu` on desktop
+     * and `drawer` (bottom) on mobile. Forwarded to the internal `Listbox`.
+     *
+     * @default "auto"
+     */
+    overlay?: FieldOverlayMode;
     /**
      * Placeholder shown when no value is selected.
      */
@@ -220,6 +231,13 @@ export interface AutocompleteOwnProps extends Omit<FormFieldOwnProps, "field"> {
      * @default true
      */
     searchable?: boolean;
+    /**
+     * Shows Cancel / Apply on the nested listbox. When unset, defaults to `true`
+     * on mobile. Selection stays draft until Apply.
+     *
+     * @default false
+     */
+    showFooter?: boolean;
 }
 export interface AutocompleteSlots extends FormFieldSlots {
     /**

package/dist/Components/Autocomplete/composables/useAutocomplete.d.ts

@@ -720,7 +720,9 @@ export declare function useAutocomplete(props: AutocompleteOwnProps, model: Ref<
         onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
     }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>>>;
+    handleApply: () => void;
     selectOption: (option: SelectOption) => void;
+    handleCancel: () => void;
     containerRef: Ref<HTMLElement | null, HTMLElement | null>;
     listboxProps: import('vue').ComputedRef<{
         anchorEl?: null | HTMLElement;
@@ -743,13 +745,16 @@ export declare function useAutocomplete(props: AutocompleteOwnProps, model: Ref<
         maxHeight: string;
         multiple: boolean;
         options: import('@bridge-ui/core').ListboxOption[];
+        overlay: import('@bridge-ui/core').FieldOverlayMode;
         placement?: import('@floating-ui/utils').Placement;
         rounded: "2xl" | "lg" | "md" | "sm" | "xl" | "xs" | "none" | "3xl" | "4xl" | "full";
         showCheckmark?: boolean;
+        showFooter: boolean;
         size: "2xl" | "2xs" | "lg" | "md" | "sm" | "xl" | "xs";
     }>;
     clearIconSize: import('vue').ComputedRef<keyof import('@bridge-ui/core').IconSize>;
     mergedClasses: import('vue').ComputedRef<Partial<AutocompleteClasses>>;
+    showClearIcon: import('vue').ComputedRef<boolean>;
     visibleOptions: import('vue').ComputedRef<import('@bridge-ui/core').ListboxOption[]>;
     isSearchActive: import('vue').ComputedRef<boolean>;
     open: import('vue').WritableComputedRef<boolean, boolean>;