@nuxt/ui 3.2.0 → 3.3.1

package/dist/runtime/components/FileUpload.vue

@@ -0,0 +1,248 @@
+<script>
+import theme from "#build/ui/file-upload";
+</script>
+
+<script setup>
+import { computed, watch } from "vue";
+import { Primitive } from "reka-ui";
+import { createReusableTemplate } from "@vueuse/core";
+import { useAppConfig, useLocale } from "#imports";
+import { useFormField } from "../composables/useFormField";
+import { useFileUpload } from "../composables/useFileUpload";
+import { tv } from "../utils/tv";
+import UAvatar from "./Avatar.vue";
+import UButton from "./Button.vue";
+import UIcon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  icon: { type: String, required: false },
+  label: { type: String, required: false },
+  description: { type: String, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  layout: { type: null, required: false, default: "grid" },
+  position: { type: null, required: false, default: "outside" },
+  highlight: { type: Boolean, required: false },
+  accept: { type: String, required: false, default: "*" },
+  multiple: { type: Boolean, required: false, default: false },
+  reset: { type: Boolean, required: false, default: false },
+  dropzone: { type: Boolean, required: false, default: true },
+  interactive: { type: Boolean, required: false, default: true },
+  required: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  fileIcon: { type: String, required: false },
+  fileDelete: { type: [Boolean, Object], required: false },
+  fileDeleteIcon: { type: String, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+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,
+  reset: props.reset,
+  multiple: props.multiple,
+  dropzone: props.dropzone,
+  onUpdate
+});
+const { emitFormInput, emitFormChange, id, name, disabled, ariaAttrs } = useFormField(props);
+const variant = computed(() => props.multiple ? "area" : props.variant);
+const layout = computed(() => props.variant === "button" && !props.multiple ? "grid" : props.layout);
+const position = computed(() => {
+  if (layout.value === "grid" && props.multiple) {
+    return "inside";
+  }
+  if (variant.value === "button") {
+    return "outside";
+  }
+  return props.position;
+});
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.fileUpload || {} })({
+  dropzone: props.dropzone,
+  interactive: props.interactive,
+  color: props.color,
+  size: props.size,
+  variant: variant.value,
+  layout: layout.value,
+  position: position.value,
+  multiple: props.multiple,
+  highlight: props.highlight,
+  disabled: props.disabled
+}));
+function createObjectUrl(file) {
+  return URL.createObjectURL(file);
+}
+function formatFileSize(bytes) {
+  if (bytes === 0) {
+    return "0B";
+  }
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  const size = bytes / Math.pow(k, i);
+  const formattedSize = i === 0 ? size.toString() : size.toFixed(0);
+  return `${formattedSize}${sizes[i]}`;
+}
+function onUpdate(files, reset = false) {
+  if (props.multiple) {
+    if (reset) {
+      modelValue.value = files;
+    } else {
+      const existingFiles = modelValue.value || [];
+      modelValue.value = [...existingFiles, ...files || []];
+    }
+  } else {
+    modelValue.value = files?.[0];
+  }
+  const event = new Event("change", { target: { value: modelValue.value } });
+  emits("change", event);
+  emitFormChange();
+  emitFormInput();
+}
+function removeFile(index) {
+  if (!modelValue.value) {
+    return;
+  }
+  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;
+  if (hasModelReset && inputRef.value) {
+    inputRef.value.value = "";
+  }
+});
+defineExpose({
+  inputRef,
+  dropzoneRef
+});
+</script>
+
+<template>
+  <DefineFilesTemplate>
+    <template v-if="modelValue && (Array.isArray(modelValue) ? modelValue.length : true)">
+      <slot name="files-top" :files="modelValue" :open="open" :remove-file="removeFile" />
+
+      <div :class="ui.files({ class: props.ui?.files })">
+        <slot name="files" :files="modelValue">
+          <div v-for="(file, index) in Array.isArray(modelValue) ? modelValue : [modelValue]" :key="file.name" :class="ui.file({ class: props.ui?.file })">
+            <slot name="file" :file="file" :index="index">
+              <slot name="file-leading" :file="file" :index="index">
+                <UAvatar :src="createObjectUrl(file)" :icon="fileIcon || appConfig.ui.icons.file" :size="props.size" :class="ui.fileLeadingAvatar({ class: props.ui?.fileLeadingAvatar })" />
+              </slot>
+
+              <div :class="ui.fileWrapper({ class: props.ui?.fileWrapper })">
+                <span :class="ui.fileName({ class: props.ui?.fileName })">
+                  <slot name="file-name" :file="file" :index="index">
+                    {{ file.name }}
+                  </slot>
+                </span>
+
+                <span :class="ui.fileSize({ class: props.ui?.fileSize })">
+                  <slot name="file-size" :file="file" :index="index">
+                    {{ formatFileSize(file.size) }}
+                  </slot>
+                </span>
+              </div>
+
+              <slot name="file-trailing" :file="file" :index="index">
+                <UButton
+                  color="neutral"
+                  v-bind="{
+  ...layout === 'grid' ? {
+    variant: 'solid',
+    size: 'xs'
+  } : {
+    variant: 'link',
+    size
+  },
+  ...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)"
+                />
+              </slot>
+            </slot>
+          </div>
+        </slot>
+      </div>
+
+      <slot name="files-bottom" :files="modelValue" :open="open" :remove-file="removeFile" />
+    </template>
+  </DefineFilesTemplate>
+
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <slot :open="open" :remove-file="removeFile">
+      <component
+        :is="variant === 'button' ? 'button' : 'div'"
+        ref="dropzoneRef"
+        :role="variant === 'button' ? void 0 : 'button'"
+        :data-dragging="isDragging"
+        :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'" />
+
+        <div v-if="position === 'inside' ? multiple ? !modelValue?.length : !modelValue : true" :class="ui.wrapper({ class: props.ui?.wrapper })">
+          <slot name="leading">
+            <UIcon v-if="variant === 'button'" :name="icon || appConfig.ui.icons.upload" :class="ui.icon({ class: props.ui?.icon })" />
+            <UAvatar v-else :icon="icon || appConfig.ui.icons.upload" :size="props.size" :class="ui.avatar({ class: props.ui?.avatar })" />
+          </slot>
+
+          <template v-if="variant !== 'button'">
+            <div v-if="label || !!slots.label" :class="ui.label({ class: props.ui?.label })">
+              <slot name="label">
+                {{ label }}
+              </slot>
+            </div>
+            <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+              <slot name="description">
+                {{ description }}
+              </slot>
+            </div>
+
+            <div v-if="!!slots.actions" :class="ui.actions({ class: props.ui?.actions })">
+              <slot name="actions" :files="modelValue" :open="open" :remove-file="removeFile" />
+            </div>
+          </template>
+        </div>
+      </component>
+
+      <ReuseFilesTemplate v-if="position === 'outside'" />
+    </slot>
+
+    <input
+      :id="id"
+      ref="inputRef"
+      type="file"
+      :name="name"
+      :accept="accept"
+      :multiple="multiple"
+      :required="required"
+      :disabled="disabled"
+      v-bind="{ ...$attrs, ...ariaAttrs }"
+      class="sr-only"
+      tabindex="-1"
+    >
+  </Primitive>
+</template>

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

@@ -0,0 +1,167 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { UseFileDialogReturn } from '@vueuse/core';
+import theme from '#build/ui/file-upload';
+import type { ButtonProps } from '../types';
+import type { ComponentConfig } from '../types/utils';
+type FileUpload = ComponentConfig<typeof theme, AppConfig, 'fileUpload'>;
+export interface FileUploadProps<M extends boolean = false> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    id?: string;
+    name?: string;
+    /**
+     * The icon to display.
+     * @defaultValue appConfig.ui.icons.upload
+     * @IconifyIcon
+     */
+    icon?: string;
+    label?: string;
+    description?: string;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: FileUpload['variants']['color'];
+    /**
+     * The `button` variant is only available when `multiple` is `false`.
+     * @defaultValue 'area'
+     */
+    variant?: FileUpload['variants']['variant'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: FileUpload['variants']['size'];
+    /**
+     * The layout of how files are displayed.
+     * Only works when `variant` is `area`.
+     * @defaultValue 'list'
+     */
+    layout?: FileUpload['variants']['layout'];
+    /**
+     * The position of the files.
+     * Only works when `variant` is `area` and when `layout` is `list`.
+     * @defaultValue 'outside'
+     */
+    position?: FileUpload['variants']['position'];
+    /** Highlight the ring color like a focus state. */
+    highlight?: boolean;
+    /**
+     * Specifies the allowed file types for the input. Provide a comma-separated list of MIME types or file extensions (e.g., "image/png,application/pdf,.jpg").
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/accept
+     * @defaultValue '*'
+     */
+    accept?: string;
+    multiple?: M & boolean;
+    /**
+     * Reset the file input when the dialog is opened.
+     * @defaultValue false
+     */
+    reset?: boolean;
+    /**
+     * Create a zone that allows the user to drop files onto it.
+     * @defaultValue true
+     */
+    dropzone?: boolean;
+    /**
+     * Make the dropzone interactive when the user is clicking on it.
+     * @defaultValue true
+     */
+    interactive?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    /**
+     * The icon to display for the file.
+     * @defaultValue appConfig.ui.icons.file
+     * @IconifyIcon
+     */
+    fileIcon?: string;
+    /**
+     * Configure the delete button for the file.
+     * When `layout` is `grid`, the default is `{ color: 'neutral', variant: 'solid', size: 'xs' }`{lang="ts-type"}
+     * When `layout` is `list`, the default is `{ color: 'neutral', variant: 'link' }`{lang="ts-type"}
+     */
+    fileDelete?: boolean | Partial<ButtonProps>;
+    /**
+     * The icon displayed to delete a file.
+     * @defaultValue appConfig.ui.icons.close
+     * @IconifyIcon
+     */
+    fileDeleteIcon?: string;
+    class?: any;
+    ui?: FileUpload['slots'];
+}
+export interface FileUploadEmits<M extends boolean = false> {
+    'update:modelValue': [payload: M extends true ? File[] : File | null];
+    'change': [event: Event];
+}
+type FileUploadFiles<M> = (M extends true ? File[] : File) | null;
+export interface FileUploadSlots<M extends boolean = false> {
+    'default'(props: {
+        open: UseFileDialogReturn['open'];
+        removeFile: (index?: number) => void;
+    }): any;
+    'leading'(props?: {}): any;
+    'label'(props?: {}): any;
+    'description'(props?: {}): any;
+    'actions'(props: {
+        files?: FileUploadFiles<M>;
+        open: UseFileDialogReturn['open'];
+        removeFile: (index?: number) => void;
+    }): any;
+    'files'(props: {
+        files?: FileUploadFiles<M>;
+    }): any;
+    'files-top'(props: {
+        files?: FileUploadFiles<M>;
+        open: UseFileDialogReturn['open'];
+        removeFile: (index?: number) => void;
+    }): any;
+    'files-bottom'(props: {
+        files?: FileUploadFiles<M>;
+        open: UseFileDialogReturn['open'];
+        removeFile: (index?: number) => void;
+    }): any;
+    'file'(props: {
+        file: File;
+        index: number;
+    }): any;
+    'file-leading'(props: {
+        file: File;
+        index: number;
+    }): any;
+    'file-name'(props: {
+        file: File;
+        index: number;
+    }): any;
+    'file-size'(props: {
+        file: File;
+        index: number;
+    }): any;
+    'file-trailing'(props: {
+        file: File;
+        index: number;
+    }): any;
+}
+declare const _default: <M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onChange?: ((event: Event) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onChange" | "onUpdate:modelValue"> & (FileUploadProps<M> & {
+        modelValue?: (M extends true ? File[] : File) | null;
+    }) & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{
+        inputRef: import("vue").Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
+        dropzoneRef: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+    }>): void;
+    attrs: any;
+    slots: FileUploadSlots<M>;
+    emit: (((evt: "change", event: Event) => void) & ((evt: "update:modelValue", payload: M extends true ? File[] : File | null) => void)) & ((evt: "update:modelValue", value: (M extends true ? File[] : File) | null | undefined) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

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/Form.vue.d.ts

@@ -13,6 +13,7 @@ export interface FormProps<S extends FormSchema, T extends boolean = true> {
     validate?: (state: Partial<InferInput<S>>) => Promise<FormError[]> | FormError[];
     /**
      * The list of input events that trigger the form validation.
+     * @remarks The form always validates on submit.
      * @defaultValue `['blur', 'change', 'input']`
      */
     validateOn?: FormInputEvents[];
@@ -43,8 +44,8 @@ export interface FormProps<S extends FormSchema, T extends boolean = true> {
     onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => void | Promise<void>) | (() => void | Promise<void>);
 }
 export interface FormEmits<S extends FormSchema, T extends boolean = true> {
-    (e: 'submit', payload: FormSubmitEvent<FormData<S, T>>): void;
-    (e: 'error', payload: FormErrorEvent): void;
+    submit: [payload: FormSubmitEvent<FormData<S, T>>];
+    error: [payload: FormErrorEvent];
 }
 export interface FormSlots {
     default(props?: {
@@ -56,15 +57,15 @@ declare const _default: <S extends FormSchema, T extends boolean = true>(__VLS_p
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly onError?: ((payload: FormErrorEvent) => any) | undefined;
         readonly onSubmit?: ((payload: FormSubmitEvent<FormData<S, T>>) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onError" | "onSubmit"> & FormProps<S, T> & Partial<{}>> & import("vue").PublicProps;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onSubmit" | "onError"> & FormProps<S, T> & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<Form<S>>): void;
     attrs: any;
     slots: FormSlots;
-    emit: FormEmits<S, T>;
+    emit: ((evt: "error", payload: FormErrorEvent) => void) & ((evt: "submit", payload: FormSubmitEvent<FormData<S, T>>) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

package/dist/runtime/components/FormField.vue

@@ -15,7 +15,7 @@ const props = defineProps({
   label: { type: String, required: false },
   description: { type: String, required: false },
   help: { type: String, required: false },
-  error: { type: [String, Boolean], required: false },
+  error: { type: [Boolean, String], required: false },
   hint: { type: String, required: false },
   size: { type: null, required: false },
   required: { type: Boolean, required: false },
@@ -80,7 +80,7 @@ provide(formFieldInjectionKey, computed(() => ({
           {{ error }}
         </slot>
       </div>
-      <div v-else-if="help || !!slots.help" :class="ui.help({ class: props.ui?.help })">
+      <div v-else-if="help || !!slots.help" :id="`${ariaId}-help`" :class="ui.help({ class: props.ui?.help })">
         <slot name="help" :help="help">
           {{ help }}
         </slot>

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

@@ -15,7 +15,7 @@ export interface FormFieldProps {
     label?: string;
     description?: string;
     help?: string;
-    error?: string | boolean;
+    error?: boolean | string;
     hint?: string;
     /**
      * @defaultValue 'md'
@@ -46,13 +46,13 @@ export interface FormFieldSlots {
         help?: string;
     }): any;
     error(props: {
-        error?: string | boolean;
+        error?: boolean | string;
     }): any;
     default(props: {
-        error?: string | boolean;
+        error?: boolean | string;
     }): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<FormFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FormFieldSlots>;
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<FormFieldProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FormFieldSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -4,5 +4,5 @@ export interface IconProps {
     size?: string | number;
     customize?: (content: string, name?: string, prefix?: string, provider?: string) => string;
 }
-declare const _default: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<IconProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Input.vue

@@ -5,6 +5,7 @@ import theme from "#build/ui/input";
 <script setup>
 import { ref, computed, onMounted } from "vue";
 import { Primitive } from "reka-ui";
+import { useVModel } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useButtonGroup } from "../composables/useButtonGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
@@ -29,6 +30,8 @@ const props = defineProps({
   autofocusDelay: { type: Number, required: false, default: 0 },
   disabled: { type: Boolean, required: false },
   highlight: { type: Boolean, required: false },
+  modelValue: { type: null, required: false },
+  defaultValue: { type: null, required: false },
   modelModifiers: { type: Object, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
@@ -43,7 +46,7 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:modelValue", "blur", "change"]);
 const slots = defineSlots();
-const [modelValue, modelModifiers] = defineModel({ type: null });
+const modelValue = useVModel(props, "modelValue", emits, { defaultValue: props.defaultValue });
 const appConfig = useAppConfig();
 const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField(props, { deferInputValidation: true });
 const { orientation, size: buttonGroupSize } = useButtonGroup(props);
@@ -62,29 +65,29 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.input || {} }
 }));
 const inputRef = ref(null);
 function updateInput(value) {
-  if (modelModifiers.trim) {
+  if (props.modelModifiers?.trim) {
     value = value?.trim() ?? null;
   }
-  if (modelModifiers.number || props.type === "number") {
+  if (props.modelModifiers?.number || props.type === "number") {
     value = looseToNumber(value);
   }
-  if (modelModifiers.nullify) {
+  if (props.modelModifiers?.nullify) {
     value ||= null;
   }
   modelValue.value = value;
   emitFormInput();
 }
 function onInput(event) {
-  if (!modelModifiers.lazy) {
+  if (!props.modelModifiers?.lazy) {
     updateInput(event.target.value);
   }
 }
 function onChange(event) {
   const value = event.target.value;
-  if (modelModifiers.lazy) {
+  if (props.modelModifiers?.lazy) {
     updateInput(value);
   }
-  if (modelModifiers.trim) {
+  if (props.modelModifiers?.trim) {
     event.target.value = value.trim();
   }
   emitFormChange();

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

@@ -4,7 +4,7 @@ import theme from '#build/ui/input';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { AcceptableValue, ComponentConfig } from '../types/utils';
 type Input = ComponentConfig<typeof theme, AppConfig, 'input'>;
-export interface InputProps extends UseComponentIconsProps {
+export interface InputProps<T extends AcceptableValue = AcceptableValue> extends UseComponentIconsProps {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -34,6 +34,8 @@ export interface InputProps extends UseComponentIconsProps {
     disabled?: boolean;
     /** Highlight the ring color like a focus state. */
     highlight?: boolean;
+    modelValue?: T;
+    defaultValue?: T;
     modelModifiers?: {
         string?: boolean;
         number?: boolean;
@@ -45,9 +47,9 @@ export interface InputProps extends UseComponentIconsProps {
     ui?: Input['slots'];
 }
 export interface InputEmits<T extends AcceptableValue = AcceptableValue> {
-    (e: 'update:modelValue', payload: T): void;
-    (e: 'blur', event: FocusEvent): void;
-    (e: 'change', event: Event): void;
+    'update:modelValue': [payload: T];
+    'blur': [event: FocusEvent];
+    'change': [event: Event];
 }
 export interface InputSlots {
     leading(props?: {}): any;
@@ -59,19 +61,17 @@ declare const _default: <T extends AcceptableValue>(__VLS_props: NonNullable<Awa
         readonly onBlur?: ((event: FocusEvent) => any) | undefined;
         readonly onChange?: ((event: Event) => any) | undefined;
         readonly "onUpdate:modelValue"?: ((payload: T) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onBlur" | "onChange" | "onUpdate:modelValue"> & (InputProps & {
-        modelValue?: T;
-    }) & Partial<{}>> & import("vue").PublicProps;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onBlur" | "onChange" | "onUpdate:modelValue"> & InputProps<T> & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{
         inputRef: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
     }>): void;
     attrs: any;
     slots: InputSlots;
-    emit: InputEmits<T> & ((evt: "update:modelValue", value: T | undefined) => void);
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", payload: T) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};