@nuxt/ui 4.1.0 → 4.2.0

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

@@ -35,8 +35,8 @@ export interface ErrorSlots {
     links(props?: {}): any;
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ErrorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ErrorProps> & Readonly<{}>, {
-    clear: boolean | Partial<ButtonProps>;
     redirect: string;
+    clear: boolean | Partial<ButtonProps>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ErrorSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -2,9 +2,10 @@ import type { AppConfig } from '@nuxt/schema';
 import type { UseFileDialogReturn } from '@vueuse/core';
 import theme from '#build/ui/file-upload';
 import type { ButtonProps, IconProps } from '../types';
+import type { InputHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type FileUpload = ComponentConfig<typeof theme, AppConfig, 'fileUpload'>;
-export interface FileUploadProps<M extends boolean = false> {
+export interface FileUploadProps<M extends boolean = false> extends /** @vue-ignore */ Pick<InputHTMLAttributes, 'form' | 'formaction' | 'formenctype' | 'formmethod' | 'formnovalidate' | 'formtarget'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -89,6 +90,11 @@ export interface FileUploadProps<M extends boolean = false> {
      * @IconifyIcon
      */
     fileDeleteIcon?: IconProps['name'];
+    /**
+     * Show the file preview/list after upload.
+     * @defaultValue true
+     */
+    preview?: boolean;
     class?: any;
     ui?: FileUpload['slots'];
 }
@@ -156,7 +162,7 @@ declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable
         "onUpdate:modelValue"?: ((value: (M extends true ? File[] : File) | null | undefined) => any) | undefined;
     }> & import("vue").PublicProps;
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        inputRef: import("vue").Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
+        inputRef: Readonly<import("vue").Ref<HTMLInputElement, HTMLInputElement>>;
         dropzoneRef: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
     }>) => void;
     attrs: any;

package/dist/runtime/components/FileUpload.vue

@@ -3,8 +3,8 @@ import theme from "#build/ui/file-upload";
 </script>
 
 <script setup>
-import { computed, watch } from "vue";
-import { Primitive } from "reka-ui";
+import { computed, toRef, watch } from "vue";
+import { Primitive, VisuallyHidden } from "reka-ui";
 import { createReusableTemplate } from "@vueuse/core";
 import { useAppConfig, useLocale } from "#imports";
 import { useFormField } from "../composables/useFormField";
@@ -37,6 +37,7 @@ const props = defineProps({
   fileIcon: { type: [String, Object], required: false },
   fileDelete: { type: [Boolean, Object], required: false, default: true },
   fileDeleteIcon: { type: [String, Object], required: false },
+  preview: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
   ui: { type: null, required: false }
 });
@@ -122,38 +123,45 @@ function removeFile(index) {
   dropzoneRef.value?.focus();
 }
 watch(modelValue, (newValue) => {
-  const hasModelReset = !Array.isArray(newValue) || !newValue.length;
-  if (hasModelReset && inputRef.value) {
-    inputRef.value.value = "";
+  const hasModelReset = props.multiple ? !newValue?.length : !newValue;
+  if (hasModelReset && inputRef.value?.$el) {
+    inputRef.value.$el.value = "";
   }
 });
 defineExpose({
-  inputRef,
+  inputRef: toRef(() => inputRef.value?.$el),
   dropzoneRef
 });
 </script>
 
 <template>
   <DefineFilesTemplate>
-    <template v-if="modelValue && (Array.isArray(modelValue) ? modelValue.length : true)">
+    <template v-if="props.preview && 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 })">
+      <div data-slot="files" :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 })">
+          <div v-for="(file, index) in Array.isArray(modelValue) ? modelValue : [modelValue]" :key="file.name" data-slot="file" :class="ui.file({ class: props.ui?.file })">
             <slot name="file" :file="file" :index="index">
               <slot name="file-leading" :file="file" :index="index" :ui="ui">
-                <UAvatar :as="{ img: 'img' }" :src="createObjectUrl(file)" :icon="fileIcon || appConfig.ui.icons.file" :size="props.size" :class="ui.fileLeadingAvatar({ class: props.ui?.fileLeadingAvatar })" />
+                <UAvatar
+                  :as="{ img: 'img' }"
+                  :src="createObjectUrl(file)"
+                  :icon="fileIcon || appConfig.ui.icons.file"
+                  :size="props.size"
+                  data-slot="fileLeadingAvatar"
+                  :class="ui.fileLeadingAvatar({ class: props.ui?.fileLeadingAvatar })"
+                />
               </slot>
 
-              <div :class="ui.fileWrapper({ class: props.ui?.fileWrapper })">
-                <span :class="ui.fileName({ class: props.ui?.fileName })">
+              <div data-slot="fileWrapper" :class="ui.fileWrapper({ class: props.ui?.fileWrapper })">
+                <span data-slot="fileName" :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 })">
+                <span data-slot="fileSize" :class="ui.fileSize({ class: props.ui?.fileSize })">
                   <slot name="file-size" :file="file" :index="index">
                     {{ formatFileSize(file.size) }}
                   </slot>
@@ -176,6 +184,7 @@ defineExpose({
 }"
                   :aria-label="t('fileUpload.removeFile', { filename: file.name })"
                   :trailing-icon="fileDeleteIcon || appConfig.ui.icons.close"
+                  data-slot="fileTrailingButton"
                   :class="ui.fileTrailingButton({ class: props.ui?.fileTrailingButton })"
                   @click.stop.prevent="removeFile(index)"
                 />
@@ -189,7 +198,7 @@ defineExpose({
     </template>
   </DefineFilesTemplate>
 
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot :open="open" :remove-file="removeFile" :ui="ui">
       <component
         :is="variant === 'button' ? 'button' : 'div'"
@@ -197,6 +206,7 @@ defineExpose({
         :type="variant === 'button' ? 'button' : void 0"
         :role="variant === 'button' ? void 0 : 'button'"
         :data-dragging="isDragging"
+        data-slot="base"
         :class="ui.base({ class: props.ui?.base })"
         :tabindex="interactive && !disabled ? 0 : -1"
         @click="interactive && !disabled && open()"
@@ -205,25 +215,25 @@ defineExpose({
       >
         <ReuseFilesTemplate v-if="position === 'inside'" />
 
-        <div v-if="position === 'inside' ? multiple ? !modelValue?.length : !modelValue : true" :class="ui.wrapper({ class: props.ui?.wrapper })">
+        <div v-if="position === 'inside' ? multiple ? !modelValue?.length : !modelValue : true" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
           <slot name="leading" :ui="ui">
-            <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 })" />
+            <UIcon v-if="variant === 'button'" :name="icon || appConfig.ui.icons.upload" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
+            <UAvatar v-else :icon="icon || appConfig.ui.icons.upload" :size="props.size" data-slot="avatar" :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 })">
+            <div v-if="label || !!slots.label" data-slot="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 })">
+            <div v-if="description || !!slots.description" data-slot="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 })">
+            <div v-if="!!slots.actions" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
               <slot name="actions" :files="modelValue" :open="open" :remove-file="removeFile" />
             </div>
           </template>
@@ -233,18 +243,18 @@ defineExpose({
       <ReuseFilesTemplate v-if="position === 'outside'" />
     </slot>
 
-    <input
+    <VisuallyHidden
       :id="id"
       ref="inputRef"
+      as="input"
       type="file"
+      feature="fully-hidden"
       :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

@@ -2,9 +2,10 @@ import type { AppConfig } from '@nuxt/schema';
 import type { UseFileDialogReturn } from '@vueuse/core';
 import theme from '#build/ui/file-upload';
 import type { ButtonProps, IconProps } from '../types';
+import type { InputHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type FileUpload = ComponentConfig<typeof theme, AppConfig, 'fileUpload'>;
-export interface FileUploadProps<M extends boolean = false> {
+export interface FileUploadProps<M extends boolean = false> extends /** @vue-ignore */ Pick<InputHTMLAttributes, 'form' | 'formaction' | 'formenctype' | 'formmethod' | 'formnovalidate' | 'formtarget'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -89,6 +90,11 @@ export interface FileUploadProps<M extends boolean = false> {
      * @IconifyIcon
      */
     fileDeleteIcon?: IconProps['name'];
+    /**
+     * Show the file preview/list after upload.
+     * @defaultValue true
+     */
+    preview?: boolean;
     class?: any;
     ui?: FileUpload['slots'];
 }
@@ -156,7 +162,7 @@ declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable
         "onUpdate:modelValue"?: ((value: (M extends true ? File[] : File) | null | undefined) => any) | undefined;
     }> & import("vue").PublicProps;
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        inputRef: import("vue").Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
+        inputRef: Readonly<import("vue").Ref<HTMLInputElement, HTMLInputElement>>;
         dropzoneRef: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
     }>) => void;
     attrs: any;

package/dist/runtime/components/Footer.vue

@@ -19,26 +19,26 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.footer || {}
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-if="!!slots.top" :class="ui.top({ class: props.ui?.top })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!slots.top" data-slot="top" :class="ui.top({ class: props.ui?.top })">
       <slot name="top" />
     </div>
 
-    <UContainer :class="ui.container({ class: props.ui?.container })">
-      <div :class="ui.right({ class: props.ui?.right })">
+    <UContainer data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div data-slot="right" :class="ui.right({ class: props.ui?.right })">
         <slot name="right" />
       </div>
 
-      <div :class="ui.center({ class: props.ui?.center })">
+      <div data-slot="center" :class="ui.center({ class: props.ui?.center })">
         <slot />
       </div>
 
-      <div :class="ui.left({ class: props.ui?.left })">
+      <div data-slot="left" :class="ui.left({ class: props.ui?.left })">
         <slot name="left" />
       </div>
     </UContainer>
 
-    <div v-if="!!slots.bottom" :class="ui.bottom({ class: props.ui?.bottom })">
+    <div v-if="!!slots.bottom" data-slot="bottom" :class="ui.bottom({ class: props.ui?.bottom })">
       <slot name="bottom" />
     </div>
   </Primitive>

package/dist/runtime/components/FooterColumns.vue

@@ -23,35 +23,35 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.footerColumns
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-if="!!slots.left" :class="ui.left({ class: props.ui?.left })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!slots.left" data-slot="left" :class="ui.left({ class: props.ui?.left })">
       <slot name="left" />
     </div>
 
-    <div v-if="!!slots.default || columns?.length" :class="ui.center({ class: props.ui?.center })">
+    <div v-if="!!slots.default || columns?.length" data-slot="center" :class="ui.center({ class: props.ui?.center })">
       <slot>
         <div v-for="(column, index) in columns" :key="index">
-          <h3 :class="ui.label({ class: props.ui?.label })">
+          <h3 data-slot="label" :class="ui.label({ class: props.ui?.label })">
             <slot name="column-label" :column="column">
               {{ column.label }}
             </slot>
           </h3>
 
-          <ul :class="ui.list({ class: props.ui?.list })">
-            <li v-for="(link, linkIndex) in column.children" :key="linkIndex" :class="ui.item({ class: [props.ui?.item, link.ui?.item] })">
+          <ul data-slot="list" :class="ui.list({ class: props.ui?.list })">
+            <li v-for="(link, linkIndex) in column.children" :key="linkIndex" data-slot="item" :class="ui.item({ class: [props.ui?.item, link.ui?.item] })">
               <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(link)" custom>
-                <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active })">
+                <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active })">
                   <slot name="link" :link="link" :active="active" :ui="ui">
                     <slot name="link-leading" :link="link" :active="active" :ui="ui">
-                      <UIcon v-if="link.icon" :name="link.icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
+                      <UIcon v-if="link.icon" :name="link.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
                     </slot>
 
-                    <span v-if="link.label || !!slots['link-label']" :class="ui.linkLabel({ class: [props.ui?.linkLabel, link.ui?.linkLabel], active })">
+                    <span v-if="link.label || !!slots['link-label']" data-slot="linkLabel" :class="ui.linkLabel({ class: [props.ui?.linkLabel, link.ui?.linkLabel], active })">
                       <slot name="link-label" :link="link" :active="active">
                         {{ link.label }}
                       </slot>
 
-                      <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, link.ui?.linkLabelExternalIcon], active })" />
+                      <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" data-slot="linkLabelExternalIcon" :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, link.ui?.linkLabelExternalIcon], active })" />
                     </span>
 
                     <slot name="link-trailing" :link="link" :active="active" />
@@ -64,7 +64,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.footerColumns
       </slot>
     </div>
 
-    <div v-if="!!slots.right" :class="ui.right({ class: props.ui?.right })">
+    <div v-if="!!slots.right" data-slot="right" :class="ui.right({ class: props.ui?.right })">
       <slot name="right" />
     </div>
   </Primitive>

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

@@ -1,4 +1,5 @@
 import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, FormErrorWithId, InferInput, FormData } from '../types/form';
+import type { FormHTMLAttributes } from '../types/html';
 export type FormProps<S extends FormSchema, T extends boolean = true, N extends boolean = false> = {
     id?: string | number;
     /** Schema to validate the form state. Supports Standard Schema objects, Yup, Joi, and Superstructs. */
@@ -38,7 +39,7 @@ export type FormProps<S extends FormSchema, T extends boolean = true, N extends
      * If true, this form will attach to its parent Form and validate at the same time.
      * @defaultValue `false`
      */
-    nested?: N;
+    nested?: N & boolean;
     /**
      * When `true`, all form elements will be disabled on `@submit` event.
      * This will cause any focused input elements to lose their focus state.
@@ -47,7 +48,7 @@ export type FormProps<S extends FormSchema, T extends boolean = true, N extends
     loadingAuto?: boolean;
     class?: any;
     onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => void | Promise<void>) | (() => void | Promise<void>);
-};
+} & /** @vue-ignore */ Omit<FormHTMLAttributes, 'name'>;
 export interface FormEmits<S extends FormSchema, T extends boolean = true> {
     submit: [event: FormSubmitEvent<FormData<S, T>>];
     error: [event: FormErrorEvent];

package/dist/runtime/components/Form.vue

@@ -22,7 +22,7 @@ const props = defineProps({
   name: { type: null, required: false },
   validateOnInputDelay: { type: Number, required: false, default: 300 },
   transform: { type: null, required: false, default: () => true },
-  nested: { type: null, required: false },
+  nested: { type: Boolean, required: false },
   loadingAuto: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
   onSubmit: { type: Function, required: false }
@@ -33,12 +33,11 @@ const appConfig = useAppConfig();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.form || {} }));
 const formId = props.id ?? useId();
 const bus = useEventBus(`form-${formId}`);
-const isNested = props.nested?.toString() === "" || props.nested === true;
-const parentBus = isNested && inject(
+const parentBus = props.nested === true && inject(
   formBusInjectionKey,
   void 0
 );
-const parentState = isNested ? inject(formStateInjectionKey, void 0) : void 0;
+const parentState = props.nested === true ? inject(formStateInjectionKey, void 0) : void 0;
 const state = computed(() => {
   if (parentState?.value) {
     return props.name ? getAtPath(parentState.value, props.name) : parentState.value;

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

@@ -1,4 +1,5 @@
 import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, FormErrorWithId, InferInput, FormData } from '../types/form';
+import type { FormHTMLAttributes } from '../types/html';
 export type FormProps<S extends FormSchema, T extends boolean = true, N extends boolean = false> = {
     id?: string | number;
     /** Schema to validate the form state. Supports Standard Schema objects, Yup, Joi, and Superstructs. */
@@ -38,7 +39,7 @@ export type FormProps<S extends FormSchema, T extends boolean = true, N extends
      * If true, this form will attach to its parent Form and validate at the same time.
      * @defaultValue `false`
      */
-    nested?: N;
+    nested?: N & boolean;
     /**
      * When `true`, all form elements will be disabled on `@submit` event.
      * This will cause any focused input elements to lose their focus state.
@@ -47,7 +48,7 @@ export type FormProps<S extends FormSchema, T extends boolean = true, N extends
     loadingAuto?: boolean;
     class?: any;
     onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => void | Promise<void>) | (() => void | Promise<void>);
-};
+} & /** @vue-ignore */ Omit<FormHTMLAttributes, 'name'>;
 export interface FormEmits<S extends FormSchema, T extends boolean = true> {
     submit: [event: FormSubmitEvent<FormData<S, T>>];
     error: [event: FormErrorEvent];

package/dist/runtime/components/FormField.vue

@@ -56,22 +56,22 @@ provide(formFieldInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <div v-if="label || !!slots.label" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })">
-        <Label :for="id" :class="ui.label({ class: props.ui?.label })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <div v-if="label || !!slots.label" data-slot="labelWrapper" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })">
+        <Label :for="id" data-slot="label" :class="ui.label({ class: props.ui?.label })">
           <slot name="label" :label="label">
             {{ label }}
           </slot>
         </Label>
-        <span v-if="hint || !!slots.hint" :id="`${ariaId}-hint`" :class="ui.hint({ class: props.ui?.hint })">
+        <span v-if="hint || !!slots.hint" :id="`${ariaId}-hint`" data-slot="hint" :class="ui.hint({ class: props.ui?.hint })">
           <slot name="hint" :hint="hint">
             {{ hint }}
           </slot>
         </span>
       </div>
 
-      <p v-if="description || !!slots.description" :id="`${ariaId}-description`" :class="ui.description({ class: props.ui?.description })">
+      <p v-if="description || !!slots.description" :id="`${ariaId}-description`" data-slot="description" :class="ui.description({ class: props.ui?.description })">
         <slot name="description" :description="description">
           {{ description }}
         </slot>
@@ -81,12 +81,12 @@ provide(formFieldInjectionKey, computed(() => ({
     <div :class="[(label || !!slots.label || description || !!slots.description) && ui.container({ class: props.ui?.container })]">
       <slot :error="error" />
 
-      <div v-if="typeof error === 'string' && error || !!slots.error" :id="`${ariaId}-error`" :class="ui.error({ class: props.ui?.error })">
+      <div v-if="typeof error === 'string' && error || !!slots.error" :id="`${ariaId}-error`" data-slot="error" :class="ui.error({ class: props.ui?.error })">
         <slot name="error" :error="error">
           {{ error }}
         </slot>
       </div>
-      <div v-else-if="help || !!slots.help" :id="`${ariaId}-help`" :class="ui.help({ class: props.ui?.help })">
+      <div v-else-if="help || !!slots.help" :id="`${ariaId}-help`" data-slot="help" :class="ui.help({ class: props.ui?.help })">
         <slot name="help" :help="help">
           {{ help }}
         </slot>

package/dist/runtime/components/Header.vue

@@ -70,6 +70,7 @@ function toggleOpen() {
         :aria-label="open ? t('header.close') : t('header.open')"
         :icon="open ? appConfig.ui.icons.close : appConfig.ui.icons.menu"
         v-bind="typeof toggle === 'object' ? toggle : {}"
+        data-slot="toggle"
         :class="ui.toggle({ class: props.ui?.toggle, toggleSide })"
         @click="toggleOpen"
       />
@@ -77,11 +78,11 @@ function toggleOpen() {
   </DefineToggleTemplate>
 
   <DefineLeftTemplate>
-    <div :class="ui.left({ class: props.ui?.left })">
+    <div data-slot="left" :class="ui.left({ class: props.ui?.left })">
       <ReuseToggleTemplate v-if="toggleSide === 'left'" />
 
       <slot name="left">
-        <ULink :to="to" :aria-label="ariaLabel" :class="ui.title({ class: props.ui?.title })">
+        <ULink :to="to" :aria-label="ariaLabel" data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
             {{ title }}
           </slot>
@@ -91,20 +92,20 @@ function toggleOpen() {
   </DefineLeftTemplate>
 
   <DefineRightTemplate>
-    <div :class="ui.right({ class: props.ui?.right })">
+    <div data-slot="right" :class="ui.right({ class: props.ui?.right })">
       <slot name="right" />
 
       <ReuseToggleTemplate v-if="toggleSide === 'right'" />
     </div>
   </DefineRightTemplate>
 
-  <Primitive :as="as" v-bind="$attrs" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot name="top" />
 
-    <UContainer :class="ui.container({ class: props.ui?.container })">
+    <UContainer data-slot="container" :class="ui.container({ class: props.ui?.container })">
       <ReuseLeftTemplate />
 
-      <div :class="ui.center({ class: props.ui?.center })">
+      <div data-slot="center" :class="ui.center({ class: props.ui?.center })">
         <slot />
       </div>
 
@@ -126,13 +127,13 @@ function toggleOpen() {
   >
     <template #content="contentData">
       <slot name="content" v-bind="contentData">
-        <div v-if="mode !== 'drawer'" :class="ui.header({ class: props.ui?.header })">
+        <div v-if="mode !== 'drawer'" data-slot="header" :class="ui.header({ class: props.ui?.header })">
           <ReuseLeftTemplate />
 
           <ReuseRightTemplate />
         </div>
 
-        <div :class="ui.body({ class: props.ui?.body })">
+        <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
           <slot name="body" />
         </div>
       </slot>

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

@@ -1,13 +1,13 @@
-import type { InputHTMLAttributes } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/input';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
+import type { InputHTMLAttributes } from '../types/html';
 import type { ModelModifiers } from '../types/input';
 import type { AcceptableValue } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Input = ComponentConfig<typeof theme, AppConfig, 'input'>;
 export type InputValue = AcceptableValue;
-export interface InputProps<T extends InputValue = InputValue> extends UseComponentIconsProps {
+export interface InputProps<T extends InputValue = InputValue> extends UseComponentIconsProps, /** @vue-ignore */ Omit<InputHTMLAttributes, 'name' | 'type' | 'placeholder' | 'required' | 'autocomplete' | 'autofocus' | 'disabled'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -39,7 +39,7 @@ export interface InputProps<T extends InputValue = InputValue> extends UseCompon
     highlight?: boolean;
     modelValue?: T;
     defaultValue?: T;
-    modelModifiers?: ModelModifiers;
+    modelModifiers?: ModelModifiers<T>;
     class?: any;
     ui?: Input['slots'];
 }
@@ -61,16 +61,16 @@ export interface InputSlots {
 }
 declare const __VLS_export: <T extends InputValue>(__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<InputProps<T> & {
-        onBlur?: ((event: FocusEvent) => any) | undefined;
         onChange?: ((event: Event) => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
         "onUpdate:modelValue"?: ((value: T) => any) | undefined;
     }> & import("vue").PublicProps;
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        inputRef: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
+        inputRef: Readonly<import("vue").ShallowRef<HTMLInputElement | null>>;
     }>) => void;
     attrs: any;
     slots: InputSlots;
-    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void);
+    emit: ((evt: "change", event: Event) => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "update:modelValue", value: T) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/Input.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/input";
 </script>
 
 <script setup>
-import { ref, computed, onMounted } from "vue";
+import { useTemplateRef, computed, onMounted } from "vue";
 import { Primitive } from "reka-ui";
 import { useVModel } from "@vueuse/core";
 import { useAppConfig } from "#imports";
@@ -63,7 +63,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.input || {} }
   trailing: isTrailing.value || !!slots.trailing,
   fieldGroup: orientation.value
 }));
-const inputRef = ref(null);
+const inputRef = useTemplateRef("inputRef");
 function updateInput(value) {
   if (props.modelModifiers?.trim) {
     value = value?.trim() ?? null;
@@ -116,7 +116,7 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <input
       :id="id"
       ref="inputRef"
@@ -124,6 +124,7 @@ defineExpose({
       :value="modelValue"
       :name="name"
       :placeholder="placeholder"
+      data-slot="base"
       :class="ui.base({ class: props.ui?.base })"
       :disabled="disabled"
       :required="required"
@@ -137,16 +138,16 @@ defineExpose({
 
     <slot :ui="ui" />
 
-    <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+    <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
       <slot name="leading" :ui="ui">
-        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-        <UAvatar v-else-if="!!avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        <UAvatar v-else-if="!!avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
       </slot>
     </span>
 
-    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
       <slot name="trailing" :ui="ui">
-        <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+        <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
       </slot>
     </span>
   </Primitive>