@nuxt/ui 4.1.0 → 4.2.1

package/dist/runtime/components/DropdownMenuContent.vue

@@ -24,9 +24,9 @@ const props = defineProps({
   sub: { type: Boolean, required: false },
   labelKey: { type: null, required: true },
   descriptionKey: { type: null, required: true },
-  checkedIcon: { type: [String, Object], required: false },
-  loadingIcon: { type: [String, Object], required: false },
-  externalIcon: { type: [Boolean, String, Object], required: false },
+  checkedIcon: { type: null, required: false },
+  loadingIcon: { type: null, required: false },
+  externalIcon: { type: [Boolean, String], required: false, skipCheck: true },
   class: { type: null, required: false },
   ui: { type: null, required: true },
   uiOverride: { type: null, required: false },
@@ -67,59 +67,60 @@ const groups = computed(
   <DefineItemTemplate v-slot="{ item, active, index }">
     <slot :name="item.slot || 'item'" :item="item" :index="index" :ui="ui">
       <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="active" :index="index" :ui="ui">
-        <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 || uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })" />
+        <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, loading: true })" />
+        <UIcon v-else-if="item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, active })" />
+        <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" data-slot="itemLeadingAvatar" :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'] || (get(item, props.descriptionKey) || !!slots[item.slot ? `${item.slot}-description` : 'item-description'])" :class="ui.itemWrapper({ class: [uiOverride?.itemWrapper, item.ui?.itemWrapper] })">
-        <span :class="ui.itemLabel({ class: [uiOverride?.itemLabel, item.ui?.itemLabel], active })">
+      <span v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label'] || (get(item, props.descriptionKey) || !!slots[item.slot ? `${item.slot}-description` : 'item-description'])" data-slot="itemWrapper" :class="ui.itemWrapper({ class: [uiOverride?.itemWrapper, item.ui?.itemWrapper] })">
+        <span data-slot="itemLabel" :class="ui.itemLabel({ class: [uiOverride?.itemLabel, item.ui?.itemLabel], active })">
           <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="active" :index="index">
             {{ get(item, props.labelKey) }}
           </slot>
 
-          <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.itemLabelExternalIcon({ class: [uiOverride?.itemLabelExternalIcon, item.ui?.itemLabelExternalIcon], color: item?.color, active })" />
+          <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" data-slot="itemLabelExternalIcon" :class="ui.itemLabelExternalIcon({ class: [uiOverride?.itemLabelExternalIcon, item.ui?.itemLabelExternalIcon], color: item?.color, active })" />
         </span>
 
-        <span v-if="get(item, props.descriptionKey)" :class="ui.itemDescription({ class: [uiOverride?.itemDescription, item.ui?.itemDescription] })">
+        <span v-if="get(item, props.descriptionKey)" data-slot="itemDescription" :class="ui.itemDescription({ class: [uiOverride?.itemDescription, item.ui?.itemDescription] })">
           <slot :name="item.slot ? `${item.slot}-description` : 'item-description'" :item="item" :active="active" :index="index">
             {{ get(item, props.descriptionKey) }}
           </slot>
         </span>
       </span>
 
-      <span :class="ui.itemTrailing({ class: [uiOverride?.itemTrailing, item.ui?.itemTrailing] })">
+      <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [uiOverride?.itemTrailing, item.ui?.itemTrailing] })">
         <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="active" :index="index" :ui="ui">
-          <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] })">
+          <UIcon v-if="item.children?.length" :name="childrenIcon" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color, active })" />
+          <span v-else-if="item.kbds?.length" data-slot="itemTrailingKbds" :class="ui.itemTrailingKbds({ class: [uiOverride?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
             <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>
 
         <DropdownMenu.ItemIndicator as-child>
-          <UIcon :name="checkedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color })" />
+          <UIcon :name="checkedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color })" />
         </DropdownMenu.ItemIndicator>
       </span>
     </slot>
   </DefineItemTemplate>
 
   <DropdownMenu.Portal v-bind="portalProps">
-    <component :is="sub ? DropdownMenu.SubContent : DropdownMenu.Content" :class="ui.content({ class: [uiOverride?.content, props.class] })" v-bind="contentProps">
+    <component :is="sub ? DropdownMenu.SubContent : DropdownMenu.Content" data-slot="content" :class="ui.content({ class: [uiOverride?.content, props.class] })" v-bind="contentProps">
       <slot name="content-top" />
 
-      <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 })">
+      <div role="presentation" data-slot="viewport" :class="ui.viewport({ class: uiOverride?.viewport })">
+        <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" data-slot="group" :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] })">
+            <DropdownMenu.Label v-if="item.type === 'label'" data-slot="label" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
               <ReuseItemTemplate :item="item" :index="index" />
             </DropdownMenu.Label>
-            <DropdownMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
+            <DropdownMenu.Separator v-else-if="item.type === 'separator'" data-slot="separator" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
             <DropdownMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
               <DropdownMenu.SubTrigger
                 as="button"
                 type="button"
                 :disabled="item.disabled"
                 :text-value="get(item, props.labelKey)"
+                data-slot="item"
                 :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
               >
                 <ReuseItemTemplate :item="item" :index="index" />
@@ -152,6 +153,7 @@ const groups = computed(
               :model-value="item.checked"
               :disabled="item.disabled"
               :text-value="get(item, props.labelKey)"
+              data-slot="item"
               :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
               @update:model-value="item.onUpdateChecked"
               @select="item.onSelect"
@@ -166,7 +168,7 @@ const groups = computed(
               @select="item.onSelect"
             >
               <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
-                <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color, active })">
+                <ULinkBase v-bind="slotProps" data-slot="item" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color, active })">
                   <ReuseItemTemplate :item="item" :active="active" :index="index" />
                 </ULinkBase>
               </ULink>

package/dist/runtime/components/Empty.vue

@@ -11,7 +11,7 @@ import UAvatar from "./Avatar.vue";
 import UButton from "./Button.vue";
 const props = defineProps({
   as: { type: null, required: false },
-  icon: { type: [String, Object], required: false },
+  icon: { type: null, required: false },
   avatar: { type: Object, required: false },
   title: { type: String, required: false },
   description: { type: String, required: false },
@@ -30,20 +30,20 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.empty || {} }
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-if="!!slots.header || (icon || avatar || !!slots.leading) || (title || !!slots.title) || (description || !!slots.description)" :class="ui.header({ class: props.ui?.header })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!slots.header || (icon || avatar || !!slots.leading) || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header">
         <slot name="leading" :ui="ui">
-          <UAvatar v-if="icon || avatar" :icon="icon" v-bind="typeof avatar === 'object' ? avatar : {}" :class="ui.avatar({ class: props.ui?.avatar })" />
+          <UAvatar v-if="icon || avatar" :icon="icon" v-bind="typeof avatar === 'object' ? avatar : {}" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
         </slot>
 
-        <h2 v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+        <h2 v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
             {{ title }}
           </slot>
         </h2>
 
-        <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>
@@ -51,9 +51,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.empty || {} }
       </slot>
     </div>
 
-    <div v-if="!!slots.body || (actions?.length || !!slots.actions)" :class="ui.body({ class: props.ui?.body })">
+    <div v-if="!!slots.body || (actions?.length || !!slots.actions)" data-slot="body" :class="ui.body({ class: props.ui?.body })">
       <slot name="body">
-        <div v-if="actions?.length || !!slots.actions" :class="ui.actions({ class: props.ui?.actions })">
+        <div v-if="actions?.length || !!slots.actions" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
           <slot name="actions">
             <UButton v-for="(action, index) in actions" :key="index" :size="size" v-bind="action" />
           </slot>
@@ -61,7 +61,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.empty || {} }
       </slot>
     </div>
 
-    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>

package/dist/runtime/components/Error.d.vue.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/Error.vue

@@ -27,23 +27,23 @@ function handleError() {
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <p v-if="!!props.error?.statusCode || !!slots.statusCode" :class="ui.statusCode({ class: props.ui?.statusCode })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <p v-if="!!props.error?.statusCode || !!slots.statusCode" data-slot="statusCode" :class="ui.statusCode({ class: props.ui?.statusCode })">
       <slot name="statusCode">
         {{ props.error?.statusCode }}
       </slot>
     </p>
-    <h1 v-if="!!props.error?.statusMessage || !!slots.statusMessage" :class="ui.statusMessage({ class: props.ui?.statusMessage })">
+    <h1 v-if="!!props.error?.statusMessage || !!slots.statusMessage" data-slot="statusMessage" :class="ui.statusMessage({ class: props.ui?.statusMessage })">
       <slot name="statusMessage">
         {{ props.error?.statusMessage }}
       </slot>
     </h1>
-    <p v-if="props.error?.message && props.error.message !== props.error.statusMessage || !!slots.message" :class="ui.message({ class: props.ui?.message })">
+    <p v-if="props.error?.message && props.error.message !== props.error.statusMessage || !!slots.message" data-slot="message" :class="ui.message({ class: props.ui?.message })">
       <slot name="message">
         {{ props.error?.message }}
       </slot>
     </p>
-    <div v-if="!!clear || !!slots.links" :class="ui.links({ class: props.ui?.links })">
+    <div v-if="!!clear || !!slots.links" data-slot="links" :class="ui.links({ class: props.ui?.links })">
       <slot name="links">
         <UButton
           v-if="clear"

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";
@@ -18,7 +18,7 @@ const props = defineProps({
   as: { type: null, required: false },
   id: { type: String, required: false },
   name: { type: String, required: false },
-  icon: { type: [String, Object], required: false },
+  icon: { type: null, required: false },
   label: { type: String, required: false },
   description: { type: String, required: false },
   color: { type: null, required: false },
@@ -34,9 +34,10 @@ const props = defineProps({
   interactive: { type: Boolean, required: false, default: true },
   required: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
-  fileIcon: { type: [String, Object], required: false },
+  fileIcon: { type: null, required: false },
   fileDelete: { type: [Boolean, Object], required: false, default: true },
-  fileDeleteIcon: { type: [String, Object], required: false },
+  fileDeleteIcon: { type: null, 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];