@nuxt/ui 2.14.1 → 2.15.0

package/dist/module.d.mts

@@ -1271,6 +1271,7 @@ declare const _default$n: {
 
 declare const _default$m: {
     wrapper: string;
+    fieldset: string;
     legend: string;
     default: {
         color: string;
@@ -1366,10 +1367,12 @@ declare const _default$j: {
         };
         on: string;
         off: string;
+        loading: string;
     };
     default: {
         onIcon: any;
         offIcon: any;
+        loadingIcon: string;
         color: string;
         size: string;
     };

package/dist/module.d.ts

@@ -1271,6 +1271,7 @@ declare const _default$n: {
 
 declare const _default$m: {
     wrapper: string;
+    fieldset: string;
     legend: string;
     default: {
         color: string;
@@ -1366,10 +1367,12 @@ declare const _default$j: {
         };
         on: string;
         off: string;
+        loading: string;
     };
     default: {
         onIcon: any;
         offIcon: any;
+        loadingIcon: string;
         color: string;
         size: string;
     };

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.14.1",
+  "version": "2.15.0",
   "configKey": "ui",
   "compatibility": {
     "nuxt": "^3.10.0"

package/dist/module.mjs

@@ -14,7 +14,7 @@ const __filename = __cjs_url__.fileURLToPath(import.meta.url);
 const __dirname = __cjs_path__.dirname(__filename);
 const require = __cjs_mod__.createRequire(import.meta.url);
 const name = "@nuxt/ui";
-const version = "2.14.1";
+const version = "2.15.0";
 
 function createTemplates(nuxt = useNuxt()) {
   const template = addTemplate({
@@ -424,6 +424,9 @@ const module = defineNuxtModule({
     addPlugin({
       src: resolve(runtimeDir, "plugins", "modals")
     });
+    addPlugin({
+      src: resolve(runtimeDir, "plugins", "slideovers")
+    });
     addComponentsDir({
       path: resolve(runtimeDir, "components", "elements"),
       prefix: options.prefix,

package/dist/runtime/components/data/Table.vue.d.ts

@@ -219,6 +219,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     ui: any;
     class: any;
+    modelValue: unknown[];
     columns: {
         [key: string]: any;
         key: string;
@@ -227,7 +228,6 @@ declare const _default: import("vue").DefineComponent<{
         direction?: "asc" | "desc" | undefined;
         class?: string | undefined;
     }[];
-    modelValue: unknown[];
     by: string | Function;
     rows: {
         [key: string]: any;

package/dist/runtime/components/elements/Accordion.vue

@@ -52,7 +52,7 @@
 </template>
 
 <script>
-import { ref, computed, toRef, defineComponent } from "vue";
+import { ref, computed, toRef, defineComponent, watch } from "vue";
 import { Disclosure as HDisclosure, DisclosureButton as HDisclosureButton, DisclosurePanel as HDisclosurePanel, provideUseId } from "@headlessui/vue";
 import UIcon from "../elements/Icon.vue";
 import UButton from "../elements/Button.vue";
@@ -102,10 +102,21 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  setup(props) {
+  emits: ["open"],
+  setup(props, { emit }) {
     const { ui, attrs } = useUI("accordion", toRef(props, "ui"), config, toRef(props, "class"));
     const uiButton = computed(() => configButton);
     const buttonRefs = ref([]);
+    const openedStates = computed(() => buttonRefs.value.map(({ open }) => open));
+    watch(openedStates, (newValue, oldValue) => {
+      for (const index in newValue) {
+        const isOpenBefore = oldValue[index];
+        const isOpenAfter = newValue[index];
+        if (!isOpenBefore && isOpenAfter) {
+          emit("open", index);
+        }
+      }
+    }, { immediate: true });
     function closeOthers(currentIndex, e) {
       if (!props.items[currentIndex].closeOthers && props.multiple) {
         return;

package/dist/runtime/components/elements/Accordion.vue.d.ts

@@ -46,7 +46,7 @@ declare const _default: import("vue").DefineComponent<{
     onBeforeLeave: (_el: Element) => void;
     onAfterEnter: (_el: Element) => void;
     onLeave: (_el: Element, done: () => void) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "open"[], "open", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
         type: PropType<AccordionItem[]>;
         default: () => never[];
@@ -75,7 +75,9 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<any>;
         default: () => {};
     };
-}>>, {
+}>> & {
+    onOpen?: ((...args: any[]) => any) | undefined;
+}, {
     ui: any;
     class: any;
     defaultOpen: boolean;

package/dist/runtime/components/elements/Alert.vue

@@ -1,8 +1,12 @@
 <template>
   <div :class="alertClass" v-bind="attrs">
     <div class="flex" :class="[ui.gap, { 'items-start': (description || $slots.description), 'items-center': !description && !$slots.description }]">
-      <UIcon v-if="icon" :name="icon" :class="ui.icon.base" />
-      <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
+      <slot name="icon" :icon="icon">
+        <UIcon v-if="icon" :name="icon" :ui="ui.icon.base" />
+      </slot>
+      <slot name="avatar" :avatar="avatar">
+        <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
+      </slot>
 
       <div :class="ui.inner">
         <p v-if="(title || $slots.title)" :class="ui.title">
@@ -10,7 +14,7 @@
             {{ title }}
           </slot>
         </p>
-        <p v-if="description || $slots.description" :class="ui.description">
+        <p v-if="description || $slots.description" :class="twMerge(ui.description, !(title && $slots.title) && 'mt-0 leading-5')">
           <slot name="description" :description="description">
             {{ description }}
           </slot>

package/dist/runtime/components/elements/Carousel.vue

@@ -5,6 +5,7 @@
         v-for="(item, index) in items"
         :key="index"
         :class="ui.item"
+        :role="indicators ? 'tabpanel' : null"
       >
         <slot :item="item" :index="index" />
       </div>
@@ -34,11 +35,13 @@
       </slot>
     </div>
 
-    <div v-if="indicators" :class="ui.indicators.wrapper">
+    <div v-if="indicators" role="tablist" :class="ui.indicators.wrapper">
       <template v-for="page in pages" :key="page">
         <slot name="indicator" :on-click="onClick" :active="page === currentPage" :page="page">
           <button
             type="button"
+            role="tab"
+            :aria-selected="page === currentPage"
             :class="[
               ui.indicators.base,
               page === currentPage ? ui.indicators.active : ui.indicators.inactive

package/dist/runtime/components/elements/Dropdown.vue

@@ -7,7 +7,8 @@
       :disabled="disabled"
       :class="ui.trigger"
       role="button"
-      @mouseover="onMouseOver"
+      @mouseenter="onMouseEnter"
+      @touchstart.passive="onTouchStart"
     >
       <slot :open="open" :disabled="disabled">
         <button :disabled="disabled">
@@ -16,25 +17,25 @@
       </slot>
     </HMenuButton>
 
-    <div v-if="open && items.length" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
+    <div v-if="open && items.length" ref="container" :class="[ui.container, ui.width]" :style="containerStyle">
       <Transition appear v-bind="ui.transition">
         <div>
           <div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
 
           <HMenuItems :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background, ui.height]" static>
             <div v-for="(subItems, index) of items" :key="index" :class="ui.padding">
-              <NuxtLink v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ href, target, rel, navigate, isExternal }" v-bind="getNuxtLinkProps(item)" custom>
+              <NuxtLink v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ href, target, rel, navigate, isExternal, isActive }" v-bind="getNuxtLinkProps(item)" custom>
                 <HMenuItem v-slot="{ active, disabled: itemDisabled, close }" :disabled="item.disabled">
                   <component
                     :is="!!href ? 'a' : 'button'"
                     :href="!itemDisabled ? href : undefined"
                     :rel="rel"
                     :target="target"
-                    :class="twMerge(twJoin(ui.item.base, ui.item.padding, ui.item.size, ui.item.rounded, active ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled), item.class)"
+                    :class="twMerge(twJoin(ui.item.base, ui.item.padding, ui.item.size, ui.item.rounded, active || isActive ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled), item.class)"
                     @click="onClick($event, item, { href, navigate, close, isExternal })"
                   >
                     <slot :name="item.slot || 'item'" :item="item">
-                      <UIcon v-if="item.icon" :name="item.icon" :class="twMerge(twJoin(ui.item.icon.base, active ? ui.item.icon.active : ui.item.icon.inactive), item.iconClass)" />
+                      <UIcon v-if="item.icon" :name="item.icon" :class="twMerge(twJoin(ui.item.icon.base, active || isActive ? ui.item.icon.active : ui.item.icon.inactive), item.iconClass)" />
                       <UAvatar v-else-if="item.avatar" v-bind="{ size: ui.item.avatar.size, ...item.avatar }" :class="ui.item.avatar.base" />
 
                       <span :class="twMerge(ui.item.label, item.labelClass)">{{ item.label }}</span>
@@ -164,7 +165,17 @@ export default defineComponent({
         };
       }
     });
-    function onMouseOver() {
+    function onTouchStart() {
+      if (!menuApi.value) {
+        return;
+      }
+      if (menuApi.value.menuState === 0) {
+        menuApi.value.closeMenu();
+      } else {
+        menuApi.value.openMenu();
+      }
+    }
+    function onMouseEnter() {
       if (props.mode !== "hover" || !menuApi.value) {
         return;
       }
@@ -232,7 +243,8 @@ export default defineComponent({
       trigger,
       container,
       containerStyle,
-      onMouseOver,
+      onTouchStart,
+      onMouseEnter,
       onMouseLeave,
       onClick,
       getNuxtLinkProps,

package/dist/runtime/components/elements/Dropdown.vue.d.ts

@@ -68,7 +68,8 @@ declare const _default: import("vue").DefineComponent<{
         paddingLeft: string;
         paddingRight: string;
     }>;
-    onMouseOver: () => void;
+    onTouchStart: () => void;
+    onMouseEnter: () => void;
     onMouseLeave: () => void;
     onClick: (e: any, item: any, { href, navigate, close, isExternal }: {
         href: any;
@@ -125,8 +126,8 @@ declare const _default: import("vue").DefineComponent<{
     class: any;
     popper: PopperOptions;
     disabled: boolean;
-    items: DropdownItem[][];
     open: boolean;
+    items: DropdownItem[][];
     mode: "click" | "hover";
     openDelay: number;
     closeDelay: number;

package/dist/runtime/components/forms/Checkbox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="ui.wrapper">
+  <div :class="ui.wrapper" :data-n-ids="attrs['data-n-ids']">
     <div :class="ui.container">
       <input
         :id="inputId"
@@ -35,6 +35,7 @@ import { useFormGroup } from "../../composables/useFormGroup";
 import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";
 import { checkbox } from "#ui/ui.config";
+import { useId } from "#app";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.checkbox, checkbox);
 export default defineComponent({
   inheritAttrs: false,
@@ -98,7 +99,8 @@ export default defineComponent({
   emits: ["update:modelValue", "change"],
   setup(props, { emit }) {
     const { ui, attrs } = useUI("checkbox", toRef(props, "ui"), config, toRef(props, "class"));
-    const { emitFormChange, color, name, inputId } = useFormGroup(props);
+    const { emitFormChange, color, name, inputId: _inputId } = useFormGroup(props);
+    const inputId = _inputId.value ?? useId();
     const toggle = computed({
       get() {
         return props.modelValue;
@@ -108,7 +110,7 @@ export default defineComponent({
       }
     });
     const onChange = (event) => {
-      emit("change", event);
+      emit("change", event.target.value);
       emitFormChange();
     };
     const inputClass = computed(() => {

package/dist/runtime/components/forms/Checkbox.vue.d.ts

@@ -59,7 +59,7 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     toggle: import("vue").WritableComputedRef<boolean | unknown[]>;
-    inputId: import("vue").ComputedRef<string | undefined>;
+    inputId: any;
     name: import("vue").ComputedRef<string | undefined>;
     inputClass: import("vue").ComputedRef<string>;
     onChange: (event: Event) => void;
@@ -127,8 +127,8 @@ declare const _default: import("vue").DefineComponent<{
     color: any;
     class: any;
     name: string;
-    label: string;
     modelValue: boolean | unknown[];
+    label: string;
     indeterminate: boolean;
     disabled: boolean;
     required: boolean;

package/dist/runtime/components/forms/Form.vue.d.ts

@@ -6,7 +6,9 @@ import type { ObjectSchemaAsync as ValibotObjectSchema } from 'valibot';
 import type { FormError, FormEventType } from '../../types/form';
 declare const _default: import("vue").DefineComponent<{
     schema: {
-        type: PropType<ZodSchema<any, import("zod").ZodTypeDef, any>> | PropType<YupObjectSchema<any, import("yup").AnyObject, any, "">> | PropType<JoiSchema> | PropType<ValibotObjectSchema<any>>;
+        type: PropType<ZodSchema<any, import("zod").ZodTypeDef, any>> | PropType<YupObjectSchema<any, import("yup").AnyObject, any, "">> | PropType<JoiSchema> | PropType<ValibotObjectSchema<any, undefined, {
+            [x: string]: any;
+        }>>;
         default: undefined;
     };
     state: {
@@ -25,7 +27,9 @@ declare const _default: import("vue").DefineComponent<{
     onSubmit: (payload: Event) => Promise<void>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("error" | "submit")[], "error" | "submit", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     schema: {
-        type: PropType<ZodSchema<any, import("zod").ZodTypeDef, any>> | PropType<YupObjectSchema<any, import("yup").AnyObject, any, "">> | PropType<JoiSchema> | PropType<ValibotObjectSchema<any>>;
+        type: PropType<ZodSchema<any, import("zod").ZodTypeDef, any>> | PropType<YupObjectSchema<any, import("yup").AnyObject, any, "">> | PropType<JoiSchema> | PropType<ValibotObjectSchema<any, undefined, {
+            [x: string]: any;
+        }>>;
         default: undefined;
     };
     state: {
@@ -44,7 +48,9 @@ declare const _default: import("vue").DefineComponent<{
     onError?: ((...args: any[]) => any) | undefined;
     onSubmit?: ((...args: any[]) => any) | undefined;
 }, {
-    schema: ZodSchema<any, import("zod").ZodTypeDef, any> | YupObjectSchema<any, import("yup").AnyObject, any, ""> | import("joi").AnySchema<any> | ValibotObjectSchema<any>;
+    schema: ZodSchema<any, import("zod").ZodTypeDef, any> | YupObjectSchema<any, import("yup").AnyObject, any, ""> | import("joi").AnySchema<any> | ValibotObjectSchema<any, undefined, {
+        [x: string]: any;
+    }>;
     validate: ((state: any) => Promise<FormError[]>) | ((state: any) => FormError[]);
     validateOn: FormEventType[];
 }, {}>;

package/dist/runtime/components/forms/Input.vue

@@ -158,7 +158,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  emits: ["update:modelValue", "blur"],
+  emits: ["update:modelValue", "blur", "change"],
   setup(props, { emit, slots }) {
     const { ui, attrs } = useUI("input", toRef(props, "ui"), config, toRef(props, "class"));
     const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props });
@@ -188,6 +188,7 @@ export default defineComponent({
     };
     const onChange = (event) => {
       const value = event.target.value;
+      emit("change", value);
       if (modelModifiers.value.lazy) {
         updateInput(value);
       }

package/dist/runtime/components/forms/Input.vue.d.ts

@@ -124,7 +124,7 @@ declare const _default: import("vue").DefineComponent<{
     onInput: (event: Event) => void;
     onChange: (event: Event) => void;
     onBlur: (event: FocusEvent) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "update:modelValue")[], "blur" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "update:modelValue")[], "blur" | "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: (NumberConstructor | StringConstructor)[];
         default: string;
@@ -230,6 +230,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
 }, {
     size: InputSize;
@@ -240,9 +241,9 @@ declare const _default: import("vue").DefineComponent<{
     type: string;
     class: any;
     name: string;
+    modelValue: string | number;
     leading: boolean;
     variant: InputVariant;
-    modelValue: string | number;
     loading: boolean;
     disabled: boolean;
     placeholder: string;

package/dist/runtime/components/forms/InputMenu.vue

@@ -21,7 +21,7 @@
         autocomplete="off"
         v-bind="attrs"
         :display-value="() => query ? query : label"
-        @change="onChange"
+        @change="onQueryChange"
       />
 
       <span v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass">
@@ -385,13 +385,13 @@ export default defineComponent({
         emitFormBlur();
       }
     });
-    function onUpdate(event) {
+    function onUpdate(value) {
       query.value = "";
-      emit("update:modelValue", event);
-      emit("change", event);
+      emit("update:modelValue", value);
+      emit("change", value);
       emitFormChange();
     }
-    function onChange(event) {
+    function onQueryChange(event) {
       query.value = event.target.value;
     }
     provideUseId(() => useId());
@@ -423,7 +423,7 @@ export default defineComponent({
       // eslint-disable-next-line vue/no-dupe-keys
       query,
       onUpdate,
-      onChange
+      onQueryChange
     };
   }
 });

package/dist/runtime/components/forms/InputMenu.vue.d.ts

@@ -158,8 +158,8 @@ declare const _default: import("vue").DefineComponent<{
     trailingWrapperIconClass: import("vue").ComputedRef<string>;
     filteredOptions: import("vue").Ref<any[]>;
     query: import("vue").WritableComputedRef<string>;
-    onUpdate: (event: any) => void;
-    onChange: (event: any) => void;
+    onUpdate: (value: any) => void;
+    onQueryChange: (event: any) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "update:modelValue" | "open" | "update:query")[], "change" | "close" | "update:modelValue" | "open" | "update:query", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: (ObjectConstructor | NumberConstructor | StringConstructor | ArrayConstructor)[];
@@ -314,10 +314,10 @@ declare const _default: import("vue").DefineComponent<{
     }[];
     popper: PopperOptions;
     name: string;
+    modelValue: string | number | unknown[] | Record<string, any>;
     leading: boolean;
     search: (query: string) => Promise<any[]> | any[];
     variant: InputVariant;
-    modelValue: string | number | unknown[] | Record<string, any>;
     by: string;
     loading: boolean;
     disabled: boolean;

package/dist/runtime/components/forms/Radio.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="ui.wrapper">
+  <div :class="ui.wrapper" :data-n-ids="attrs['data-n-ids']">
     <div :class="ui.container">
       <input
         :id="inputId"
@@ -11,6 +11,7 @@
         type="radio"
         :class="inputClass"
         v-bind="attrs"
+        @change="onChange"
       >
     </div>
     <div v-if="label || $slots.label" :class="ui.inner">
@@ -36,6 +37,7 @@ import { radio } from "#ui/ui.config";
 import { useId } from "#imports";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.radio, radio);
 export default defineComponent({
+  inheritAttrs: false,
   props: {
     id: {
       type: String,
@@ -101,12 +103,14 @@ export default defineComponent({
       },
       set(value) {
         emit("update:modelValue", value);
-        emit("change", value);
         if (!radioGroup) {
           emitFormChange();
         }
       }
     });
+    function onChange(event) {
+      emit("change", event.target.value);
+    }
     const inputClass = computed(() => {
       return twMerge(twJoin(
         ui.value.base,
@@ -126,7 +130,8 @@ export default defineComponent({
       // eslint-disable-next-line vue/no-dupe-keys
       name,
       // eslint-disable-next-line vue/no-dupe-keys
-      inputClass
+      inputClass,
+      onChange
     };
   }
 });

package/dist/runtime/components/forms/Radio.vue.d.ts

@@ -58,6 +58,7 @@ declare const _default: import("vue").DefineComponent<{
     pick: import("vue").WritableComputedRef<string | number | boolean | Record<string, any>>;
     name: import("vue").ComputedRef<string | undefined>;
     inputClass: import("vue").ComputedRef<string>;
+    onChange: (event: Event) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     id: {
         type: StringConstructor;
@@ -118,8 +119,8 @@ declare const _default: import("vue").DefineComponent<{
     color: any;
     class: any;
     name: string;
-    label: string;
     modelValue: string | number | boolean | Record<string, any>;
+    label: string;
     disabled: boolean;
     required: boolean;
     help: string;

package/dist/runtime/components/forms/RadioGroup.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="ui.wrapper">
-    <fieldset v-bind="attrs">
+    <fieldset v-bind="attrs" :class="ui.fieldset">
       <legend v-if="legend || $slots.legend" :class="ui.legend">
         <slot name="legend">
           {{ legend }}

package/dist/runtime/components/forms/RadioGroup.vue.d.ts

@@ -108,8 +108,8 @@ declare const _default: import("vue").DefineComponent<{
     class: any;
     options: unknown[];
     name: string;
-    legend: string;
     modelValue: string | number | Record<string, any>;
+    legend: string;
     disabled: boolean;
     optionAttribute: string;
     valueAttribute: string;

package/dist/runtime/components/forms/Range.vue

@@ -99,7 +99,7 @@ export default defineComponent({
       }
     });
     const onChange = (event) => {
-      emit("change", event);
+      emit("change", event.target.value);
       emitFormChange();
     };
     const wrapperClass = computed(() => {

package/dist/runtime/components/forms/Select.vue

@@ -184,8 +184,8 @@ export default defineComponent({
       emit("update:modelValue", event.target.value);
     };
     const onChange = (event) => {
+      emit("change", event.target.value);
       emitFormChange();
-      emit("change", event);
     };
     const guessOptionValue = (option) => {
       return get(option, props.valueAttribute, get(option, props.optionAttribute));

package/dist/runtime/components/forms/Select.vue.d.ts

@@ -229,9 +229,9 @@ declare const _default: import("vue").DefineComponent<{
     class: any;
     options: unknown[];
     name: string;
+    modelValue: string | number | Record<string, any>;
     leading: boolean;
     variant: SelectVariant;
-    modelValue: string | number | Record<string, any>;
     loading: boolean;
     disabled: boolean;
     placeholder: string;

package/dist/runtime/components/forms/SelectMenu.vue

@@ -105,12 +105,12 @@
                 </div>
               </li>
             </component>
-            <p v-else-if="searchable && query && !filteredOptions.length" :class="uiMenu.option.empty">
+            <p v-else-if="searchable && query && !filteredOptions?.length" :class="uiMenu.option.empty">
               <slot name="option-empty" :query="query">
                 No results for "{{ query }}".
               </slot>
             </p>
-            <p v-else-if="!filteredOptions.length" :class="uiMenu.empty">
+            <p v-else-if="!filteredOptions?.length" :class="uiMenu.empty">
               <slot name="empty" :query="query">
                 No options.
               </slot>
@@ -168,7 +168,7 @@ export default defineComponent({
   inheritAttrs: false,
   props: {
     modelValue: {
-      type: [String, Number, Object, Array],
+      type: [String, Number, Object, Array, Boolean],
       default: ""
     },
     query: {
@@ -350,7 +350,7 @@ export default defineComponent({
         } else {
           return null;
         }
-      } else {
+      } else if (props.modelValue !== void 0 && props.modelValue !== null) {
         if (props.valueAttribute) {
           const option = props.options.find((option2) => option2[props.valueAttribute] === props.modelValue);
           return option ? option[props.optionAttribute] : null;
@@ -358,6 +358,7 @@ export default defineComponent({
           return ["string", "number"].includes(typeof props.modelValue) ? props.modelValue : props.modelValue[props.optionAttribute];
         }
       }
+      return null;
     });
     const selectClass = computed(() => {
       const variant = ui.value.color?.[color.value]?.[props.variant] || ui.value.variant[props.variant];
@@ -371,7 +372,7 @@ export default defineComponent({
         variant?.replaceAll("{color}", color.value),
         (isLeading.value || slots.leading) && ui.value.leading.padding[size.value],
         (isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value]
-      ), props.placeholder && !props.modelValue && ui.value.placeholder, props.selectClass);
+      ), props.placeholder && (props.modelValue === void 0 && props.modelValue === null) && ui.value.placeholder, props.selectClass);
     });
     const isLeading = computed(() => {
       return props.icon && props.leading || props.icon && !props.trailing || props.loading && !props.trailing || props.leadingIcon;
@@ -470,10 +471,10 @@ export default defineComponent({
     });
     function onUpdate(event) {
       emit("update:modelValue", event);
-      emit("change", event);
-      emitFormChange();
     }
     function onChange(event) {
+      emit("change", event.target.value);
+      emitFormChange();
       query.value = event.target.value;
     }
     provideUseId(() => useId());