@bridge-ui/vue 0.0.7 → 0.0.9

package/dist/Adapters/I18n/useI18nAdapter.d.ts

@@ -7,7 +7,7 @@ export declare function setI18nAdapterForTests(adapter: undefined | I18nAdapter)
 /**
  * Returns the active i18n adapter from {@link BridgeUIProvider}.
  * When unset, {@link useResolveMessage} returns the English source string
- * (see `packages/vue/examples`).
+ * (see `packages/vue/docs/examples`).
  */
 export declare function useI18nAdapter(): ComputedRef<undefined | I18nAdapter>;
 /**

package/dist/Adapters/Icon/useIconAdapter.d.ts

@@ -6,6 +6,6 @@ import { IconAdapter } from '@bridge-ui/core';
 export declare function setIconAdapterForTests(adapter: undefined | IconAdapter): void;
 /**
  * Returns the active icon adapter from {@link BridgeUIProvider}.
- * Semantic icon names require `global.icons` (see `packages/vue/examples`).
+ * Semantic icon names require `global.icons` (see `packages/vue/docs/examples`).
  */
 export declare function useIconAdapter(): ComputedRef<undefined | IconAdapter>;

package/dist/Adapters/index.d.ts

@@ -1,3 +1,4 @@
+export { setDateAdapterForTests, useDateAdapter, useDateAdapterContext, } from './Date';
 export { setI18nAdapterForTests, useI18nAdapter, useResolveMessage, } from './I18n';
 export { setIconAdapterForTests, useIconAdapter } from './Icon';
 export type { IconElement, IconSource, IconSourceValueOverrides, SemanticIconName, } from './Icon';

package/dist/Adapters/index.js

@@ -1,3 +1,4 @@
-import { setI18nAdapterForTests as e, useI18nAdapter as t, useResolveMessage as n } from "./I18n/useI18nAdapter.js";
-import { setIconAdapterForTests as r, useIconAdapter as i } from "./Icon/useIconAdapter.js";
-export { e as setI18nAdapterForTests, r as setIconAdapterForTests, t as useI18nAdapter, i as useIconAdapter, n as useResolveMessage };
+import { setDateAdapterForTests as e, useDateAdapter as t, useDateAdapterContext as n } from "./Date/useDateAdapter.js";
+import { setI18nAdapterForTests as r, useI18nAdapter as i, useResolveMessage as a } from "./I18n/useI18nAdapter.js";
+import { setIconAdapterForTests as o, useIconAdapter as s } from "./Icon/useIconAdapter.js";
+export { e as setDateAdapterForTests, r as setI18nAdapterForTests, o as setIconAdapterForTests, t as useDateAdapter, n as useDateAdapterContext, i as useI18nAdapter, s as useIconAdapter, a as useResolveMessage };

package/dist/Components/Alert/Alert.vue_vue_type_script_setup_true_lang.js

@@ -6,7 +6,7 @@ import { Fragment as o, createBlock as s, createCommentVNode as c, createElement
 var v = {
 	key: 1,
 	class: "flex justify-between items-start"
-}, y = { class: "flex items-start gap-x-3" }, b = /* @__PURE__ */ d({
+}, y = { class: "flex items-start gap-x-3" }, b = /*@__PURE__*/ d({
 	inheritAttrs: !1,
 	__name: "Alert",
 	props: {

package/dist/Components/Alert/composables/useAlert.js

@@ -33,7 +33,19 @@ function _(_, v) {
 	}), E = i(() => {
 		let e = b.default?.();
 		return !!(e && e.length > 0);
-	}), D = i(() => u(c(h, C.value?.tokens?.variant), [S.value.variant, S.value.color])), O = i(() => u(c(m, C.value?.tokens?.shadow), S.value.shadow)), k = i(() => u(c(f, C.value?.tokens?.padding), S.value.padding)), A = i(() => u(c(p, C.value?.tokens?.rounded), S.value.rounded)), j = i(() => d(S.value.icon) ? null : S.value.icon ? S.value.icon : u(D.value, "icon") ?? u(e, S.value.color));
+	}), D = i(() => {
+		let e = c(h, C.value?.tokens?.variant);
+		return u(e, [S.value.variant, S.value.color]);
+	}), O = i(() => {
+		let e = c(m, C.value?.tokens?.shadow);
+		return u(e, S.value.shadow);
+	}), k = i(() => {
+		let e = c(f, C.value?.tokens?.padding);
+		return u(e, S.value.padding);
+	}), A = i(() => {
+		let e = c(p, C.value?.tokens?.rounded);
+		return u(e, S.value.rounded);
+	}), j = i(() => d(S.value.icon) ? null : S.value.icon ? S.value.icon : u(D.value, "icon") ?? u(e, S.value.color));
 	return {
 		slots: b,
 		merged: S,

package/dist/Components/Autocomplete/Autocomplete.vue.d.ts

@@ -9,26 +9,28 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     clear: () => any;
     search: (query: string) => any;
     select: (option: import('@bridge-ui/core').ListboxOption) => any;
-    "update:modelValue": (...args: unknown[]) => any;
+    cancel: () => any;
     change: (value: import('@bridge-ui/core').SelectModel) => any;
     close: () => any;
-    open: () => any;
     deselect: (option: import('@bridge-ui/core').ListboxOption) => any;
+    open: () => any;
+    "update:modelValue": (...args: unknown[]) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClear?: (() => any) | undefined;
     onSearch?: ((query: string) => any) | undefined;
     onSelect?: ((option: import('@bridge-ui/core').ListboxOption) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
+    onCancel?: (() => any) | undefined;
     onChange?: ((value: import('@bridge-ui/core').SelectModel) => any) | undefined;
     onClose?: (() => any) | undefined;
-    onOpen?: (() => any) | undefined;
     onDeselect?: ((option: import('@bridge-ui/core').ListboxOption) => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
 }>, {
     showErrorIcon: boolean;
     clearable: boolean;
+    freeSolo: boolean;
     minItemsForSearch: number;
     searchable: boolean;
-    freeSolo: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -21,10 +21,10 @@ var P = {
 	key: 0,
 	hidden: "",
 	"aria-hidden": "true"
-}, R = /* @__PURE__ */ h({
+}, R = /*@__PURE__*/ h({
 	inheritAttrs: !1,
 	__name: "Autocomplete",
-	props: /* @__PURE__ */ v({
+	props: /*@__PURE__*/ v({
 		asyncData: {},
 		clearable: {
 			type: Boolean,
@@ -49,11 +49,13 @@ var P = {
 		optionLabel: {},
 		options: {},
 		optionValue: {},
+		overlay: {},
 		placeholder: {},
 		searchable: {
 			type: Boolean,
 			default: !0
 		},
+		showFooter: { type: Boolean },
 		classes: {},
 		color: {},
 		controlId: {},
@@ -83,7 +85,8 @@ var P = {
 		modelValue: {},
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ v([
+	emits: /*@__PURE__*/ v([
+		"cancel",
 		"change",
 		"clear",
 		"close",
@@ -108,20 +111,20 @@ 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);
+		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 } = 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({
+				default: k(() => [E(q) ? (x(), f("div", P, [(x(!0), f(c, null, ie(E(he), (t) => (x(), u(E(ee), y({
 					dismissible: "",
 					key: String(t.value),
 					size: E(J).merged.value.size,
 					disabled: E(J).isDisabled.value,
 					"clear-label": `Remove ${t.label}`,
-					onDismiss: (e) => E(le)(t, e)
+					onDismiss: (e) => E(se)(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,
+						"bg-white ring-1 ring-inset ring-dark-200 dark:bg-dark-700 dark:ring-dark-600": !0,
 						[E(pe).chip ?? ""]: !0
 					}) }
 				})), {
@@ -135,7 +138,7 @@ var P = {
 				]))), 128)), p("textarea", y({ ref: "trigger" }, E(Z)), null, 16)])) : (x(), f("div", F, [p("input", y({
 					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), {
+				}, E(Z)), null, 16), E(me) ? (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")
@@ -149,9 +152,11 @@ var P = {
 				modelValue: E(G),
 				"onUpdate:modelValue": a[3] ||= (e) => _(G) ? G.value = e : null
 			}, E(de), {
+				onApply: E(ce),
 				"anchor-el": E(Q),
-				onSelect: E(ue),
-				onRegisteredOptionsChange: E(he)
+				onCancel: E(ue),
+				onSelect: E(le),
+				onRegisteredOptionsChange: E(ge)
 			}), ne({ _: 2 }, [
 				E($) ? {
 					name: "default",
@@ -185,7 +190,9 @@ var P = {
 				} : void 0
 			]), 1040, [
 				"modelValue",
+				"onApply",
 				"anchor-el",
+				"onCancel",
 				"onSelect",
 				"onRegisteredOptionsChange"
 			]),

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

@@ -436,7 +436,7 @@ export declare function useAutocomplete(props: AutocompleteOwnProps, model: Ref<
             onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
             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" | "endIcon" | "startIcon" | "start" | "required" | "description" | "errorMessage" | "hideErrorMessage" | "readonly" | "errorIcon" | "showErrorIcon" | "corner">>>>;
+        }, 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">>>>;
         isNotched: import('vue').ComputedRef<boolean>;
         isStacked: import('vue').ComputedRef<boolean>;
         startBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
@@ -719,13 +719,16 @@ export declare function useAutocomplete(props: AutocompleteOwnProps, model: Ref<
         onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
         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" | "endIcon" | "startIcon" | "start" | "required" | "description" | "errorMessage" | "hideErrorMessage" | "readonly" | "errorIcon" | "showErrorIcon" | "corner">>>>>;
+    }, 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;
         classes?: import('../../Listbox').ListboxClasses;
         color: "info" | "error" | "success" | "warning" | "dark" | "primary" | "secondary";
+        componentName: "Select" | "Autocomplete";
         customProps?: import('../../Listbox').ListboxCustomProps;
         disableAutoFocus: boolean;
         disableMaxHeight: boolean;
@@ -742,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>;