@nuxt/ui 2.14.2 → 2.15.1

package/dist/module.d.mts

@@ -1367,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

@@ -1367,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.2",
+  "version": "2.15.1",
   "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.2";
+const version = "2.15.1";
 
 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

@@ -249,8 +249,8 @@ export default defineComponent({
         selected.value.push(row);
       });
     }
-    function onChange(event) {
-      if (event.target.checked) {
+    function onChange(checked) {
+      if (checked) {
         selectAllRows();
       } else {
         selected.value = [];

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

@@ -117,7 +117,7 @@ declare const _default: import("vue").DefineComponent<{
         direction?: 'asc' | 'desc';
     }) => void;
     onSelect: (row: any) => void;
-    onChange: (event: any) => void;
+    onChange: (checked: boolean) => void;
     getRowData: (row: Object, rowKey: string | string[], defaultValue?: any) => any;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "update:sort")[], "update:modelValue" | "update:sort", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
@@ -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">

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

@@ -1,13 +1,14 @@
 <template>
   <span :class="wrapperClass">
-    <img
+    <component
+      :is="as"
       v-if="url && !error"
       :class="imgClass"
       :alt="alt"
       :src="url"
       v-bind="attrs"
       @error="onError"
-    >
+    />
     <span v-else-if="text" :class="ui.text">{{ text }}</span>
     <UIcon v-else-if="icon" :name="icon" :class="iconClass" />
     <span v-else-if="placeholder" :class="ui.placeholder">{{ placeholder }}</span>
@@ -34,6 +35,10 @@ export default defineComponent({
   },
   inheritAttrs: false,
   props: {
+    as: {
+      type: [String, Object],
+      default: "img"
+    },
     src: {
       type: [String, Boolean],
       default: null

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

@@ -1,6 +1,10 @@
 import type { PropType } from 'vue';
 import type { AvatarSize } from '../../types';
 declare const _default: import("vue").DefineComponent<{
+    as: {
+        type: (ObjectConstructor | StringConstructor)[];
+        default: string;
+    };
     src: {
         type: (BooleanConstructor | StringConstructor)[];
         default: null;
@@ -62,6 +66,10 @@ declare const _default: import("vue").DefineComponent<{
     error: import("vue").Ref<boolean>;
     onError: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    as: {
+        type: (ObjectConstructor | StringConstructor)[];
+        default: string;
+    };
     src: {
         type: (BooleanConstructor | StringConstructor)[];
         default: null;
@@ -115,6 +123,7 @@ declare const _default: import("vue").DefineComponent<{
     ui: any;
     icon: string;
     class: any;
+    as: string | Record<string, any>;
     src: string | boolean;
     text: string;
     chipColor: any;

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

@@ -8,7 +8,7 @@
       :class="ui.trigger"
       role="button"
       @mouseenter="onMouseEnter"
-      @touchstart.prevent="onTouchStart"
+      @touchstart.passive="onTouchStart"
     >
       <slot :open="open" :disabled="disabled">
         <button :disabled="disabled">
@@ -17,7 +17,7 @@
       </slot>
     </HMenuButton>
 
-    <div v-if="open && items.length" ref="container" :class="[ui.container, ui.width]" :style="containerStyle">
+    <div v-if="open && items.length" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseenter="onMouseEnter">
       <Transition appear v-bind="ui.transition">
         <div>
           <div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />

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

@@ -126,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"
@@ -110,7 +110,7 @@ export default defineComponent({
       }
     });
     const onChange = (event) => {
-      emit("change", event);
+      emit("change", event.target.checked);
       emitFormChange();
     };
     const inputClass = computed(() => {

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

@@ -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 });
@@ -187,12 +187,18 @@ export default defineComponent({
       }
     };
     const onChange = (event) => {
-      const value = event.target.value;
-      if (modelModifiers.value.lazy) {
-        updateInput(value);
-      }
-      if (modelModifiers.value.trim) {
-        event.target.value = value.trim();
+      if (props.type === "file") {
+        const value = event.target.files;
+        emit("change", value);
+      } else {
+        const value = event.target.value;
+        emit("change", value);
+        if (modelModifiers.value.lazy) {
+          updateInput(value);
+        }
+        if (modelModifiers.value.trim) {
+          event.target.value = value.trim();
+        }
       }
     };
     const onBlur = (event) => {

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.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

@@ -63,7 +63,7 @@
               autofocus
               autocomplete="off"
               :class="uiMenu.input"
-              @change="onChange"
+              @change="onQueryChange"
             />
             <component
               :is="searchable ? 'HComboboxOption' : 'HListboxOption'"
@@ -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 if (props.modelValue) {
+      } 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;
@@ -372,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;
@@ -469,12 +469,12 @@ export default defineComponent({
         emitFormBlur();
       }
     });
-    function onUpdate(event) {
-      emit("update:modelValue", event);
-      emit("change", event);
+    function onUpdate(value) {
+      emit("update:modelValue", value);
+      emit("change", value);
       emitFormChange();
     }
-    function onChange(event) {
+    function onQueryChange(event) {
       query.value = event.target.value;
     }
     provideUseId(() => useId());
@@ -507,7 +507,7 @@ export default defineComponent({
       // eslint-disable-next-line vue/no-dupe-keys
       query,
       onUpdate,
-      onChange
+      onQueryChange
     };
   }
 });

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

@@ -2,7 +2,7 @@ import type { PropType } from 'vue';
 import type { SelectSize, SelectVariant, PopperOptions } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
-        type: (ObjectConstructor | NumberConstructor | StringConstructor | ArrayConstructor)[];
+        type: (ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor | ArrayConstructor)[];
         default: string;
     };
     query: {
@@ -177,11 +177,11 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: string;
     } | null>;
     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)[];
+        type: (ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor | ArrayConstructor)[];
         default: string;
     };
     query: {
@@ -349,9 +349,9 @@ declare const _default: import("vue").DefineComponent<{
     }[];
     popper: PopperOptions;
     name: string;
+    modelValue: string | number | boolean | unknown[] | Record<string, any>;
     leading: boolean;
     variant: SelectVariant;
-    modelValue: string | number | unknown[] | Record<string, any>;
     by: string;
     loading: boolean;
     disabled: boolean;

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

@@ -126,7 +126,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  emits: ["update:modelValue", "blur"],
+  emits: ["update:modelValue", "blur", "change"],
   setup(props, { emit }) {
     const { ui, attrs } = useUI("textarea", toRef(props, "ui"), config, toRef(props, "class"));
     const { emitFormBlur, emitFormInput, inputId, color, size, name } = useFormGroup(props, config);
@@ -173,6 +173,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/Textarea.vue.d.ts

@@ -100,7 +100,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;
@@ -190,6 +190,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
 }, {
     resize: boolean;
@@ -199,8 +200,8 @@ declare const _default: import("vue").DefineComponent<{
     color: any;
     class: any;
     name: string;
-    variant: TextareaVariant;
     modelValue: string | number;
+    variant: TextareaVariant;
     rows: number;
     disabled: boolean;
     placeholder: string;

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

@@ -3,15 +3,26 @@
     :id="inputId"
     v-model="active"
     :name="name"
-    :disabled="disabled"
+    :disabled="disabled || loading"
     :class="switchClass"
     v-bind="attrs"
   >
     <span :class="containerClass">
-      <span v-if="onIcon" :class="[active ? ui.icon.active : ui.icon.inactive, ui.icon.base]" aria-hidden="true">
+      <span v-if="loading" :class="[ui.icon.active, ui.icon.base]" aria-hidden="true">
+        <UIcon :name="loadingIcon" :class="loadingIconClass" />
+      </span>
+      <span
+        v-if="!loading && onIcon"
+        :class="[active ? ui.icon.active : ui.icon.inactive, ui.icon.base]"
+        aria-hidden="true"
+      >
         <UIcon :name="onIcon" :class="onIconClass" />
       </span>
-      <span v-if="offIcon" :class="[active ? ui.icon.inactive : ui.icon.active, ui.icon.base]" aria-hidden="true">
+      <span
+        v-if="!loading && offIcon"
+        :class="[active ? ui.icon.inactive : ui.icon.active, ui.icon.base]"
+        aria-hidden="true"
+      >
         <UIcon :name="offIcon" :class="offIconClass" />
       </span>
     </span>
@@ -53,6 +64,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    loading: {
+      type: Boolean,
+      default: false
+    },
     onIcon: {
       type: String,
       default: () => config.default.onIcon
@@ -61,6 +76,10 @@ export default defineComponent({
       type: String,
       default: () => config.default.offIcon
     },
+    loadingIcon: {
+      type: String,
+      default: () => config.default.loadingIcon
+    },
     color: {
       type: String,
       default: () => config.default.color,
@@ -94,6 +113,7 @@ export default defineComponent({
       },
       set(value) {
         emit("update:modelValue", value);
+        emit("change", value);
         emitFormChange();
       }
     });
@@ -125,6 +145,12 @@ export default defineComponent({
         color.value && ui.value.icon.off.replaceAll("{color}", color.value)
       );
     });
+    const loadingIconClass = computed(() => {
+      return twJoin(
+        ui.value.icon.size[props.size],
+        color.value && ui.value.icon.loading.replaceAll("{color}", color.value)
+      );
+    });
     provideUseId(() => useId());
     return {
       // eslint-disable-next-line vue/no-dupe-keys
@@ -137,7 +163,8 @@ export default defineComponent({
       switchClass,
       containerClass,
       onIconClass,
-      offIconClass
+      offIconClass,
+      loadingIconClass
     };
   }
 });

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

@@ -17,6 +17,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     onIcon: {
         type: StringConstructor;
         default: () => any;
@@ -25,6 +29,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: () => any;
     };
+    loadingIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
     color: {
         type: PropType<any>;
         default: () => any;
@@ -55,6 +63,7 @@ declare const _default: import("vue").DefineComponent<{
     containerClass: import("vue").ComputedRef<string>;
     onIconClass: import("vue").ComputedRef<string>;
     offIconClass: import("vue").ComputedRef<string>;
+    loadingIconClass: import("vue").ComputedRef<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     id: {
         type: StringConstructor;
@@ -72,6 +81,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     onIcon: {
         type: StringConstructor;
         default: () => any;
@@ -80,6 +93,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: () => any;
     };
+    loadingIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
     color: {
         type: PropType<any>;
         default: () => any;
@@ -109,7 +126,9 @@ declare const _default: import("vue").DefineComponent<{
     class: any;
     name: string;
     modelValue: boolean;
+    loading: boolean;
     disabled: boolean;
+    loadingIcon: string;
     onIcon: string;
     offIcon: string;
 }, {}>;

package/dist/runtime/components/overlays/Popover.vue

@@ -8,7 +8,7 @@
       :class="ui.trigger"
       role="button"
       @mouseenter="onMouseEnter"
-      @touchstart.prevent="onTouchStart"
+      @touchstart.passive="onTouchStart"
     >
       <slot :open="open" :close="close">
         <button :disabled="disabled">
@@ -21,7 +21,7 @@
       <div v-if="open" :class="[ui.overlay.base, ui.overlay.background]" />
     </Transition>
 
-    <div v-if="open" ref="container" :class="[ui.container, ui.width]" :style="containerStyle">
+    <div v-if="open" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseenter="onMouseEnter">
       <Transition appear v-bind="ui.transition">
         <div>
           <div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />

package/dist/runtime/components/overlays/Slideover.vue.d.ts

@@ -86,7 +86,7 @@ declare const _default: import("vue").DefineComponent<{
     transition: boolean;
     preventClose: boolean;
     class: any;
-    modelValue: boolean;
     side: "right" | "left";
+    modelValue: boolean;
 }, {}>;
 export default _default;

package/dist/runtime/components/overlays/Slideovers.client.vue

@@ -0,0 +1,17 @@
+<template>
+  <component
+    :is="slideoverState.component"
+    v-if="slideoverState"
+    v-bind="slideoverState.props"
+    v-model="isOpen"
+  />
+</template>
+
+<script lang="ts" setup>
+import { inject } from 'vue'
+import { useSlideover, slidOverInjectionKey } from '../../composables/useSlideover'
+
+const slideoverState = inject(slidOverInjectionKey)
+
+const { isOpen } = useSlideover()
+</script>

package/dist/runtime/composables/useButtonGroup.mjs

@@ -19,6 +19,14 @@ export function useProvideButtonGroup(buttonGroupProps) {
 }
 export function useInjectButtonGroup({ ui, props }) {
   const instance = getCurrentInstance();
+  provide("ButtonGroupContextConsumer", true);
+  const isParentPartOfGroup = inject("ButtonGroupContextConsumer", false);
+  if (isParentPartOfGroup) {
+    return {
+      size: computed(() => props.size),
+      rounded: computed(() => ui.value.rounded)
+    };
+  }
   let parent = instance.parent;
   let groupContext;
   while (parent && !groupContext) {

package/dist/runtime/composables/useModal.d.ts

@@ -4,7 +4,7 @@ import type { Modal, ModalState } from '../types/modal';
 export declare const modalInjectionKey: InjectionKey<ShallowRef<ModalState>>;
 declare function _useModal(): {
     isOpen: import("vue").Ref<boolean>;
-    open: <T extends Component>(component: T, props?: (Modal & ComponentProps<T>) | undefined) => void;
+    open: <T extends Component>(component: T, props?: Modal & ComponentProps<T>) => void;
     close: () => void;
     patch: <T_1 extends Component = {}>(props: Partial<Modal & ComponentProps<T_1>>) => void;
 };

package/dist/runtime/composables/useShortcuts.mjs

@@ -1,7 +1,7 @@
 import { createSharedComposable, useActiveElement } from "@vueuse/core";
 import { ref, computed, onMounted } from "vue";
 export const _useShortcuts = () => {
-  const macOS = computed(() => process.client && navigator && navigator.userAgent && navigator.userAgent.match(/Macintosh;/));
+  const macOS = computed(() => import.meta.client && navigator && navigator.userAgent && navigator.userAgent.match(/Macintosh;/));
   const metaSymbol = ref(" ");
   const activeElement = useActiveElement();
   const usingInput = computed(() => {

package/dist/runtime/composables/useSlideover.d.ts

@@ -0,0 +1,12 @@
+import type { ShallowRef, Component, InjectionKey } from 'vue';
+import type { ComponentProps } from '../types/component';
+import type { Slideover, SlideoverState } from '../types/slideover';
+export declare const slidOverInjectionKey: InjectionKey<ShallowRef<SlideoverState>>;
+declare function _useSlideover(): {
+    open: <T extends Component>(component: T, props?: Slideover & ComponentProps<T>) => void;
+    close: () => void;
+    patch: <T_1 extends Component = {}>(props: Partial<Slideover & ComponentProps<T_1>>) => void;
+    isOpen: import("vue").Ref<boolean>;
+};
+export declare const useSlideover: typeof _useSlideover;
+export {};

package/dist/runtime/composables/useSlideover.mjs

@@ -0,0 +1,40 @@
+import { ref, inject } from "vue";
+import { createSharedComposable } from "@vueuse/core";
+export const slidOverInjectionKey = Symbol("nuxt-ui.slideover");
+function _useSlideover() {
+  const slideoverState = inject(slidOverInjectionKey);
+  const isOpen = ref(false);
+  function open(component, props) {
+    if (!slideoverState) {
+      throw new Error("useSlideover() is called without provider");
+    }
+    slideoverState.value = {
+      component,
+      props: props ?? {}
+    };
+    isOpen.value = true;
+  }
+  function close() {
+    if (!slideoverState)
+      return;
+    isOpen.value = false;
+  }
+  function patch(props) {
+    if (!slideoverState)
+      return;
+    slideoverState.value = {
+      ...slideoverState.value,
+      props: {
+        ...slideoverState.value.props,
+        ...props
+      }
+    };
+  }
+  return {
+    open,
+    close,
+    patch,
+    isOpen
+  };
+}
+export const useSlideover = createSharedComposable(_useSlideover);

package/dist/runtime/composables/useUI.d.ts

@@ -1,8 +1,8 @@
 import type { Ref } from 'vue';
 import type { Strategy } from '../types';
 export declare const useUI: <T>(key: any, $ui?: Ref<(Partial<T> & {
-    strategy?: Strategy | undefined;
-}) | undefined> | undefined, $config?: T | Ref<T> | undefined, $wrapperClass?: Ref<string>, withAppConfig?: boolean) => {
+    strategy?: Strategy;
+}) | undefined>, $config?: Ref<T> | T, $wrapperClass?: Ref<string>, withAppConfig?: boolean) => {
     ui: import("vue").ComputedRef<T>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;

package/dist/runtime/plugins/colors.mjs

@@ -33,7 +33,7 @@ ${Object.entries(gray || colors.cool).map(([key, value]) => `--color-gray-${key}
       id: "nuxt-ui-colors"
     }]
   };
-  if (process.client && nuxtApp.isHydrating && !nuxtApp.payload.serverRendered) {
+  if (import.meta.client && nuxtApp.isHydrating && !nuxtApp.payload.serverRendered) {
     const style = document.createElement("style");
     style.innerHTML = root.value;
     style.setAttribute("data-nuxt-ui-colors", "");

package/dist/runtime/plugins/slideovers.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/plugins/slideovers.mjs

@@ -0,0 +1,10 @@
+import { defineNuxtPlugin } from "#imports";
+import { shallowRef } from "vue";
+import { slidOverInjectionKey } from "../composables/useSlideover.mjs";
+export default defineNuxtPlugin((nuxtApp) => {
+  const slideoverState = shallowRef({
+    component: "div",
+    props: {}
+  });
+  nuxtApp.vueApp.provide(slidOverInjectionKey, slideoverState);
+});

package/dist/runtime/types/index.d.ts

@@ -17,6 +17,7 @@ export * from './kbd'
 export * from './link'
 export * from './meter'
 export * from './modal'
+export * from './slideover'
 export * from './notification'
 export * from './popper'
 export * from './progress'

package/dist/runtime/types/slideover.d.ts

@@ -0,0 +1,17 @@
+import type { Component } from 'vue'
+
+interface Slideover {
+    ui?: any;
+    side?: 'right' | 'left';
+    transition?: boolean;
+    appear?: boolean;
+    overlay?: boolean;
+    preventClose?: boolean;
+    modelValue?: boolean;
+}
+
+interface SlideoverState {
+    component: Component | string;
+    props: Slideover;
+}
+

package/dist/runtime/ui.config/forms/inputMenu.mjs

@@ -1,7 +1,7 @@
 import { arrow } from "../popper.mjs";
 export default {
   container: "z-20 group",
-  trigger: "inline-flex w-full",
+  trigger: "flex items-center w-full",
   width: "w-full",
   height: "max-h-60",
   base: "relative focus:outline-none overflow-y-auto scroll-py-1",

package/dist/runtime/ui.config/forms/toggle.d.ts

@@ -50,10 +50,12 @@ declare const _default: {
         };
         on: string;
         off: string;
+        loading: string;
     };
     default: {
         onIcon: null;
         offIcon: null;
+        loadingIcon: string;
         color: string;
         size: string;
     };

package/dist/runtime/ui.config/forms/toggle.mjs

@@ -49,11 +49,13 @@ export default {
       "2xl": "h-6 w-6"
     },
     on: "text-{color}-500 dark:text-{color}-400",
-    off: "text-gray-400 dark:text-gray-500"
+    off: "text-gray-400 dark:text-gray-500",
+    loading: "animate-spin text-{color}-500 dark:text-{color}-400"
   },
   default: {
     onIcon: null,
     offIcon: null,
+    loadingIcon: "i-heroicons-arrow-path-20-solid",
     color: "primary",
     size: "md"
   }

package/dist/runtime/ui.config/layout/divider.mjs

@@ -1,7 +1,7 @@
 export default {
   wrapper: {
-    base: "flex items-center align-center text-center w-full",
-    horizontal: "flex-row",
+    base: "flex items-center align-center text-center",
+    horizontal: "w-full flex-row",
     vertical: "flex-col"
   },
   container: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.14.2",
+  "version": "2.15.1",
   "repository": "nuxt/ui",
   "homepage": "https://ui.nuxt.com",
   "type": "module",
@@ -37,50 +37,50 @@
     "@headlessui/tailwindcss": "^0.2.0",
     "@headlessui/vue": "^1.7.19",
     "@iconify-json/heroicons": "^1.1.20",
-    "@nuxt/kit": "^3.10.3",
-    "@nuxtjs/color-mode": "^3.3.2",
+    "@nuxt/kit": "^3.11.1",
+    "@nuxtjs/color-mode": "^3.3.3",
     "@nuxtjs/tailwindcss": "^6.11.4",
     "@popperjs/core": "^2.11.8",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",
-    "@tailwindcss/typography": "^0.5.10",
+    "@tailwindcss/typography": "^0.5.12",
     "@vueuse/core": "^10.9.0",
     "@vueuse/integrations": "^10.9.0",
     "@vueuse/math": "^10.9.0",
     "defu": "^6.1.4",
     "fuse.js": "^6.6.2",
-    "nuxt-icon": "^0.6.8",
+    "nuxt-icon": "^0.6.10",
     "ohash": "^1.1.3",
     "pathe": "^1.1.2",
     "scule": "^1.3.0",
-    "tailwind-merge": "^2.2.1",
-    "tailwindcss": "^3.4.1"
+    "tailwind-merge": "^2.2.2",
+    "tailwindcss": "^3.4.3"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.2.0",
     "@nuxt/module-builder": "^0.5.5",
-    "@nuxt/test-utils": "^3.11.0",
+    "@nuxt/test-utils": "^3.12.0",
     "@release-it/conventional-changelog": "^8.0.1",
-    "@vue/test-utils": "^2.4.4",
+    "@vue/test-utils": "^2.4.5",
     "eslint": "^8.57.0",
-    "happy-dom": "^13.6.2",
+    "happy-dom": "^14.3.10",
     "joi": "^17.12.2",
-    "nuxt": "^3.10.3",
+    "nuxt": "^3.11.1",
     "release-it": "^17.1.1",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.3",
     "unbuild": "^2.0.0",
-    "valibot": "^0.29.0",
-    "vitest": "^1.3.1",
+    "valibot": "^0.30.0",
+    "vitest": "^1.4.0",
     "vitest-environment-nuxt": "^1.0.0",
-    "vue-tsc": "^2.0.4",
-    "yup": "^1.3.3",
+    "vue-tsc": "^2.0.7",
+    "yup": "^1.4.0",
     "zod": "^3.22.4"
   },
   "resolutions": {
-    "@nuxt/kit": "3.10.3",
-    "@nuxt/schema": "3.10.3",
-    "tailwindcss": "3.4.1",
+    "@nuxt/kit": "^3.11.1",
+    "@nuxt/schema": "3.11.1",
+    "tailwindcss": "^3.4.3",
     "@headlessui/vue": "1.7.19",
     "vue": "3.4.21"
   }