@nuxt/ui 3.3.0 → 3.3.1

package/.nuxt/ui/drawer.ts

@@ -41,7 +41,7 @@ export default {
     },
     "inset": {
       "true": {
-        "content": "rounded-lg after:hidden overflow-hidden"
+        "content": "rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)]"
       }
     }
   },

package/.nuxt/ui/input.ts

@@ -28,7 +28,7 @@ export default {
   "slots": {
     "root": "relative inline-flex items-center",
     "base": [
-      "w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75",
+      "w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75",
       "transition-colors"
     ],
     "leading": "absolute inset-y-0 start-0 flex items-center",

package/.nuxt/ui/select.ts

@@ -187,7 +187,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"
+      "class": "focus:ring-2 focus:ring-inset focus:ring-primary"
     },
     {
       "color": "secondary" as typeof color[number],
@@ -195,7 +195,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-secondary"
+      "class": "focus:ring-2 focus:ring-inset focus:ring-secondary"
     },
     {
       "color": "success" as typeof color[number],
@@ -203,7 +203,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-success"
+      "class": "focus:ring-2 focus:ring-inset focus:ring-success"
     },
     {
       "color": "info" as typeof color[number],
@@ -211,7 +211,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-info"
+      "class": "focus:ring-2 focus:ring-inset focus:ring-info"
     },
     {
       "color": "warning" as typeof color[number],
@@ -219,7 +219,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-warning"
+      "class": "focus:ring-2 focus:ring-inset focus:ring-warning"
     },
     {
       "color": "error" as typeof color[number],
@@ -227,7 +227,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error"
+      "class": "focus:ring-2 focus:ring-inset focus:ring-error"
     },
     {
       "color": "primary" as typeof color[number],
@@ -265,7 +265,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"
+      "class": "focus:ring-2 focus:ring-inset focus:ring-inverted"
     },
     {
       "color": "neutral" as typeof color[number],

package/.nuxt/ui/textarea.ts

@@ -28,7 +28,7 @@ export default {
   "slots": {
     "root": "relative inline-flex items-center",
     "base": [
-      "w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75",
+      "w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75",
       "transition-colors"
     ],
     "leading": "absolute start-0 flex items-start",

package/cli/templates.mjs

@@ -213,6 +213,10 @@ navigation.badge: Soon
 ## Theme
 
 :component-theme${pro ? '{pro}' : ''}
+
+## Changelog
+
+:component-changelog
 `
   }
 }

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "docs": "https://ui.nuxt.com/getting-started/installation/nuxt",
   "configKey": "ui",
   "compatibility": {
@@ -8,6 +8,6 @@
   },
   "builder": {
     "@nuxt/module-builder": "1.0.1",
-    "unbuild": "3.5.0"
+    "unbuild": "3.6.0"
   }
 }

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.BkSj2DmF.mjs';
+import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.BTUFJHYJ.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
 import 'scule';
@@ -8,7 +8,7 @@ import 'tailwindcss/colors';
 import 'knitwork';
 
 const name = "@nuxt/ui";
-const version = "3.3.0";
+const version = "3.3.1";
 
 const module = defineNuxtModule({
   meta: {

package/dist/runtime/components/ContextMenuContent.vue

@@ -30,7 +30,9 @@ const props = defineProps({
   ui: { type: null, required: true },
   uiOverride: { type: null, required: false },
   loop: { type: Boolean, required: false },
+  sideFlip: { type: Boolean, required: false },
   alignOffset: { type: Number, required: false },
+  alignFlip: { type: Boolean, required: false },
   avoidCollisions: { type: Boolean, required: false },
   collisionBoundary: { type: null, required: false },
   collisionPadding: { type: [Number, Object], required: false },
@@ -61,7 +63,7 @@ const groups = computed(
       <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="active" :index="index">
         <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, loading: true })" />
         <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, active })" />
-        <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || props.uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })" />
+        <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })" />
       </slot>
 
       <span v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="ui.itemLabel({ class: [uiOverride?.itemLabel, item.ui?.itemLabel], active })">
@@ -76,7 +78,7 @@ const groups = computed(
         <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="active" :index="index">
           <UIcon v-if="item.children?.length" :name="childrenIcon" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color, active })" />
           <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [uiOverride?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
-            <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.ui?.itemTrailingKbdsSize || props.uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+            <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.ui?.itemTrailingKbdsSize || uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
           </span>
         </slot>
 
@@ -91,7 +93,7 @@ const groups = computed(
     <component :is="sub ? ContextMenu.SubContent : ContextMenu.Content" :class="props.class" v-bind="contentProps">
       <slot name="content-top" />
 
-      <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+      <div role="presentation" :class="ui.viewport({ class: uiOverride?.viewport })">
         <ContextMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
           <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
             <ContextMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">

package/dist/runtime/components/DropdownMenuContent.vue

@@ -32,8 +32,10 @@ const props = defineProps({
   loop: { type: Boolean, required: false },
   side: { type: null, required: false },
   sideOffset: { type: Number, required: false },
+  sideFlip: { type: Boolean, required: false },
   align: { type: null, required: false },
   alignOffset: { type: Number, required: false },
+  alignFlip: { type: Boolean, required: false },
   avoidCollisions: { type: Boolean, required: false },
   collisionBoundary: { type: null, required: false },
   collisionPadding: { type: [Number, Object], required: false },
@@ -66,7 +68,7 @@ const groups = computed(
       <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="active" :index="index">
         <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, loading: true })" />
         <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, active })" />
-        <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || props.uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })" />
+        <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })" />
       </slot>
 
       <span v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="ui.itemLabel({ class: [uiOverride?.itemLabel, item.ui?.itemLabel], active })">
@@ -81,7 +83,7 @@ const groups = computed(
         <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="active" :index="index">
           <UIcon v-if="item.children?.length" :name="childrenIcon" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color, active })" />
           <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [uiOverride?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
-            <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.ui?.itemTrailingKbdsSize || props.uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+            <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.ui?.itemTrailingKbdsSize || uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
           </span>
         </slot>
 
@@ -96,7 +98,7 @@ const groups = computed(
     <component :is="sub ? DropdownMenu.SubContent : DropdownMenu.Content" :class="props.class" v-bind="contentProps">
       <slot name="content-top" />
 
-      <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+      <div role="presentation" :class="ui.viewport({ class: uiOverride?.viewport })">
         <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
           <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
             <DropdownMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">

package/dist/runtime/components/FileUpload.vue

@@ -6,7 +6,7 @@ import theme from "#build/ui/file-upload";
 import { computed, watch } from "vue";
 import { Primitive } from "reka-ui";
 import { createReusableTemplate } from "@vueuse/core";
-import { useAppConfig } from "#imports";
+import { useAppConfig, useLocale } from "#imports";
 import { useFormField } from "../composables/useFormField";
 import { useFileUpload } from "../composables/useFileUpload";
 import { tv } from "../utils/tv";
@@ -44,6 +44,7 @@ const emits = defineEmits(["update:modelValue", "change"]);
 const slots = defineSlots();
 const modelValue = defineModel({ type: null });
 const appConfig = useAppConfig();
+const { t } = useLocale();
 const [DefineFilesTemplate, ReuseFilesTemplate] = createReusableTemplate();
 const { isDragging, open, inputRef, dropzoneRef } = useFileUpload({
   accept: props.accept,
@@ -112,11 +113,13 @@ function removeFile(index) {
   }
   if (!props.multiple || index === void 0) {
     onUpdate([], true);
+    dropzoneRef.value?.focus();
     return;
   }
   const files = [...modelValue.value];
   files.splice(index, 1);
   onUpdate(files, true);
+  dropzoneRef.value?.focus();
 }
 watch(modelValue, (newValue) => {
   const hasModelReset = !Array.isArray(newValue) || !newValue.length;
@@ -170,6 +173,7 @@ defineExpose({
   },
   ...typeof fileDelete === 'object' ? fileDelete : void 0
 }"
+                  :aria-label="t('fileUpload.removeFile', { filename: file.name })"
                   :trailing-icon="fileDeleteIcon || appConfig.ui.icons.close"
                   :class="ui.fileTrailingButton({ class: props.ui?.fileTrailingButton })"
                   @click.stop.prevent="removeFile(index)"
@@ -194,6 +198,8 @@ defineExpose({
         :class="ui.base({ class: props.ui?.base })"
         :tabindex="interactive && !disabled ? 0 : -1"
         @click="interactive && !disabled && open()"
+        @keydown.prevent
+        @keyup.enter.space="interactive && !disabled && open()"
       >
         <ReuseFilesTemplate v-if="position === 'inside'" />
 

package/dist/runtime/components/Form.vue

@@ -168,7 +168,7 @@ defineExpose({
   errors,
   setErrors(errs, name) {
     if (name) {
-      errors.value = errors.value.filter((error) => error.name !== name).concat(resolveErrorIds(errs));
+      errors.value = errors.value.filter((err) => name instanceof RegExp ? !(err.name && name.test(err.name)) : err.name !== name).concat(resolveErrorIds(errs));
     } else {
       errors.value = resolveErrorIds(errs);
     }
@@ -178,13 +178,13 @@ defineExpose({
   },
   getErrors(name) {
     if (name) {
-      return errors.value.filter((err) => err.name === name);
+      return errors.value.filter((err) => name instanceof RegExp ? err.name && name.test(err.name) : err.name === name);
     }
     return errors.value;
   },
   clear(name) {
     if (name) {
-      errors.value = errors.value.filter((err) => err.name !== name);
+      errors.value = errors.value.filter((err) => name instanceof RegExp ? !(err.name && name.test(err.name)) : err.name !== name);
     } else {
       errors.value = [];
     }

package/dist/runtime/components/InputMenu.vue

@@ -14,7 +14,7 @@ import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { useLocale } from "../composables/useLocale";
 import { usePortal } from "../composables/usePortal";
-import { compare, get, isArrayOfArray } from "../utils";
+import { compare, get, getDisplayValue, isArrayOfArray } from "../utils";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
 import UAvatar from "./Avatar.vue";
@@ -56,6 +56,8 @@ const props = defineProps({
   resetSearchTermOnBlur: { type: Boolean, required: false, default: true },
   resetSearchTermOnSelect: { type: Boolean, required: false, default: true },
   highlightOnHover: { type: Boolean, required: false },
+  openOnClick: { type: Boolean, required: false },
+  openOnFocus: { type: Boolean, required: false },
   icon: { type: String, required: false },
   avatar: { type: Object, required: false },
   leading: { type: Boolean, required: false },
@@ -70,7 +72,7 @@ const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" }
 const { t } = useLocale();
 const appConfig = useAppConfig();
 const { contains } = useFilter({ sensitivity: "base" });
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "open", "defaultOpen", "required", "multiple", "resetSearchTermOnBlur", "resetSearchTermOnSelect", "highlightOnHover", "ignoreFilter"), emits);
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "open", "defaultOpen", "required", "multiple", "resetSearchTermOnBlur", "resetSearchTermOnSelect", "highlightOnHover", "openOnClick", "openOnFocus"), emits);
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8, position: "popper" }));
 const arrowProps = toRef(() => props.arrow);
@@ -91,8 +93,10 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputMenu ||
   buttonGroup: orientation.value
 }));
 function displayValue(value) {
-  const item = items.value.find((item2) => compare(typeof item2 === "object" && props.valueKey ? get(item2, props.valueKey) : item2, value));
-  return item && (typeof item === "object" ? get(item, props.labelKey) : item);
+  return getDisplayValue(items.value, value, {
+    labelKey: props.labelKey,
+    valueKey: props.valueKey
+  }) ?? "";
 }
 const groups = computed(
   () => props.items?.length ? isArrayOfArray(props.items) ? props.items : [props.items] : []
@@ -231,7 +235,6 @@ defineExpose({
   </DefineCreateItemTemplate>
 
   <ComboboxRoot
-    :id="id"
     v-slot="{ modelValue, open }"
     v-bind="rootProps"
     :name="name"
@@ -259,7 +262,7 @@ defineExpose({
         <TagsInputItem v-for="(item, index) in tags" :key="index" :value="item" :class="ui.tagsItem({ class: [props.ui?.tagsItem, isInputItem(item) && item.ui?.tagsItem] })">
           <TagsInputItemText :class="ui.tagsItemText({ class: [props.ui?.tagsItemText, isInputItem(item) && item.ui?.tagsItemText] })">
             <slot name="tags-item-text" :item="item" :index="index">
-              {{ displayValue(item) ?? item }}
+              {{ displayValue(item) }}
             </slot>
           </TagsInputItemText>
 
@@ -272,6 +275,7 @@ defineExpose({
 
         <ComboboxInput v-model="searchTerm" as-child>
           <TagsInputInput
+            :id="id"
             ref="inputRef"
             v-bind="{ ...$attrs, ...ariaAttrs }"
             :placeholder="placeholder"
@@ -283,6 +287,7 @@ defineExpose({
 
       <ComboboxInput
         v-else
+        :id="id"
         ref="inputRef"
         :display-value="displayValue"
         v-bind="{ ...$attrs, ...ariaAttrs }"

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

@@ -27,7 +27,7 @@ interface _InputMenuItem {
     [key: string]: any;
 }
 export type InputMenuItem = _InputMenuItem | AcceptableValue | boolean;
-export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'resetSearchTermOnSelect' | 'highlightOnHover'>, UseComponentIconsProps {
+export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'resetSearchTermOnSelect' | 'highlightOnHover' | 'openOnClick' | 'openOnFocus'>, UseComponentIconsProps {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -209,110 +209,6 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
             };
             $refs: {
                 [x: string]: unknown;
-            } & {
-                primitiveElement: ({
-                    $: import("vue").ComponentInternalInstance;
-                    $data: {};
-                    $props: {
-                        readonly modelValue?: string | undefined;
-                        readonly autoFocus?: boolean | undefined;
-                        readonly disabled?: boolean | undefined;
-                        readonly asChild?: boolean | undefined;
-                        readonly as?: (import("reka-ui").AsTag | import("vue").Component) | undefined;
-                        readonly "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
-                    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
-                    $attrs: {
-                        [x: string]: unknown;
-                    };
-                    $refs: {
-                        [x: string]: unknown;
-                    } & {
-                        primitiveElement: import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
-                            asChild: {
-                                type: BooleanConstructor;
-                                default: boolean;
-                            };
-                            as: {
-                                type: import("vue").PropType<import("reka-ui").AsTag | import("vue").Component>;
-                                default: string;
-                            };
-                        }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                            [key: string]: any;
-                        }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-                            asChild: boolean;
-                            as: import("reka-ui").AsTag | import("vue").Component;
-                        }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
-                            P: {};
-                            B: {};
-                            D: {};
-                            C: {};
-                            M: {};
-                            Defaults: {};
-                        }, Readonly<import("vue").ExtractPropTypes<{
-                            asChild: {
-                                type: BooleanConstructor;
-                                default: boolean;
-                            };
-                            as: {
-                                type: import("vue").PropType<import("reka-ui").AsTag | import("vue").Component>;
-                                default: string;
-                            };
-                        }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                            [key: string]: any;
-                        }>, {}, {}, {}, {
-                            asChild: boolean;
-                            as: import("reka-ui").AsTag | import("vue").Component;
-                        }> | null;
-                    };
-                    $slots: Readonly<{
-                        [name: string]: import("vue").Slot<any> | undefined;
-                    }>;
-                    $root: import("vue").ComponentPublicInstance | null;
-                    $parent: import("vue").ComponentPublicInstance | null;
-                    $host: Element | null;
-                    $emit: (event: "update:modelValue", args_0: string) => void;
-                    $el: any;
-                    $options: import("vue").ComponentOptionsBase<Readonly<import("reka-ui").ListboxFilterProps> & Readonly<{
-                        "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
-                    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-                        "update:modelValue": (args_0: string) => any;
-                    }, string, {
-                        as: import("reka-ui").AsTag | import("vue").Component;
-                    }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
-                        beforeCreate?: (() => void) | (() => void)[];
-                        created?: (() => void) | (() => void)[];
-                        beforeMount?: (() => void) | (() => void)[];
-                        mounted?: (() => void) | (() => void)[];
-                        beforeUpdate?: (() => void) | (() => void)[];
-                        updated?: (() => void) | (() => void)[];
-                        activated?: (() => void) | (() => void)[];
-                        deactivated?: (() => void) | (() => void)[];
-                        beforeDestroy?: (() => void) | (() => void)[];
-                        beforeUnmount?: (() => void) | (() => void)[];
-                        destroyed?: (() => void) | (() => void)[];
-                        unmounted?: (() => void) | (() => void)[];
-                        renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
-                        renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
-                        errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
-                    };
-                    $forceUpdate: () => void;
-                    $nextTick: typeof nextTick;
-                    $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
-                } & Readonly<{
-                    as: import("reka-ui").AsTag | import("vue").Component;
-                }> & Omit<Readonly<import("reka-ui").ListboxFilterProps> & Readonly<{
-                    "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
-                }>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
-                    $slots: Readonly<{
-                        default?: (props: {
-                            modelValue: string | undefined;
-                        }) => any;
-                    }> & {
-                        default?: (props: {
-                            modelValue: string | undefined;
-                        }) => any;
-                    };
-                }) | null;
             };
             $slots: Readonly<{
                 [name: string]: import("vue").Slot<any> | undefined;
@@ -354,7 +250,7 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
             "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
         }>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
             $slots: {
-                default?(_: {}): any;
+                default?: (props: {}) => any;
             };
         }) | null, ({
             $: import("vue").ComponentInternalInstance;
@@ -373,110 +269,6 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
             };
             $refs: {
                 [x: string]: unknown;
-            } & {
-                primitiveElement: ({
-                    $: import("vue").ComponentInternalInstance;
-                    $data: {};
-                    $props: {
-                        readonly modelValue?: string | undefined;
-                        readonly autoFocus?: boolean | undefined;
-                        readonly disabled?: boolean | undefined;
-                        readonly asChild?: boolean | undefined;
-                        readonly as?: (import("reka-ui").AsTag | import("vue").Component) | undefined;
-                        readonly "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
-                    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
-                    $attrs: {
-                        [x: string]: unknown;
-                    };
-                    $refs: {
-                        [x: string]: unknown;
-                    } & {
-                        primitiveElement: import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
-                            asChild: {
-                                type: BooleanConstructor;
-                                default: boolean;
-                            };
-                            as: {
-                                type: import("vue").PropType<import("reka-ui").AsTag | import("vue").Component>;
-                                default: string;
-                            };
-                        }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                            [key: string]: any;
-                        }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-                            asChild: boolean;
-                            as: import("reka-ui").AsTag | import("vue").Component;
-                        }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
-                            P: {};
-                            B: {};
-                            D: {};
-                            C: {};
-                            M: {};
-                            Defaults: {};
-                        }, Readonly<import("vue").ExtractPropTypes<{
-                            asChild: {
-                                type: BooleanConstructor;
-                                default: boolean;
-                            };
-                            as: {
-                                type: import("vue").PropType<import("reka-ui").AsTag | import("vue").Component>;
-                                default: string;
-                            };
-                        }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                            [key: string]: any;
-                        }>, {}, {}, {}, {
-                            asChild: boolean;
-                            as: import("reka-ui").AsTag | import("vue").Component;
-                        }> | null;
-                    };
-                    $slots: Readonly<{
-                        [name: string]: import("vue").Slot<any> | undefined;
-                    }>;
-                    $root: import("vue").ComponentPublicInstance | null;
-                    $parent: import("vue").ComponentPublicInstance | null;
-                    $host: Element | null;
-                    $emit: (event: "update:modelValue", args_0: string) => void;
-                    $el: any;
-                    $options: import("vue").ComponentOptionsBase<Readonly<import("reka-ui").ListboxFilterProps> & Readonly<{
-                        "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
-                    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-                        "update:modelValue": (args_0: string) => any;
-                    }, string, {
-                        as: import("reka-ui").AsTag | import("vue").Component;
-                    }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
-                        beforeCreate?: (() => void) | (() => void)[];
-                        created?: (() => void) | (() => void)[];
-                        beforeMount?: (() => void) | (() => void)[];
-                        mounted?: (() => void) | (() => void)[];
-                        beforeUpdate?: (() => void) | (() => void)[];
-                        updated?: (() => void) | (() => void)[];
-                        activated?: (() => void) | (() => void)[];
-                        deactivated?: (() => void) | (() => void)[];
-                        beforeDestroy?: (() => void) | (() => void)[];
-                        beforeUnmount?: (() => void) | (() => void)[];
-                        destroyed?: (() => void) | (() => void)[];
-                        unmounted?: (() => void) | (() => void)[];
-                        renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
-                        renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
-                        errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
-                    };
-                    $forceUpdate: () => void;
-                    $nextTick: typeof nextTick;
-                    $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
-                } & Readonly<{
-                    as: import("reka-ui").AsTag | import("vue").Component;
-                }> & Omit<Readonly<import("reka-ui").ListboxFilterProps> & Readonly<{
-                    "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
-                }>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
-                    $slots: Readonly<{
-                        default?: (props: {
-                            modelValue: string | undefined;
-                        }) => any;
-                    }> & {
-                        default?: (props: {
-                            modelValue: string | undefined;
-                        }) => any;
-                    };
-                }) | null;
             };
             $slots: Readonly<{
                 [name: string]: import("vue").Slot<any> | undefined;
@@ -518,7 +310,7 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
             "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
         }>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
             $slots: {
-                default?(_: {}): any;
+                default?: (props: {}) => any;
             };
         }) | null>;
     }>): void;

package/dist/runtime/components/InputNumber.vue

@@ -44,13 +44,14 @@ const props = defineProps({
   name: { type: String, required: false },
   formatOptions: { type: null, required: false },
   disableWheelChange: { type: Boolean, required: false },
-  invertWheelChange: { type: Boolean, required: false }
+  invertWheelChange: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false }
 });
 const emits = defineEmits(["update:modelValue", "blur", "change"]);
 defineSlots();
 const { t, code: codeLocale } = useLocale();
 const appConfig = useAppConfig();
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "min", "max", "step", "stepSnapping", "formatOptions", "disableWheelChange", "invertWheelChange"), emits);
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "min", "max", "step", "stepSnapping", "formatOptions", "disableWheelChange", "invertWheelChange", "readonly"), emits);
 const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formGroupSize, name, highlight, disabled, ariaAttrs } = useFormField(props);
 const { orientation, size: buttonGroupSize } = useButtonGroup(props);
 const locale = computed(() => props.locale || codeLocale.value);