@nuxt/ui 3.1.3 → 3.3.0

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

@@ -21,12 +21,17 @@ export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
     loading?: boolean;
     disabled?: boolean;
     slot?: string;
+    /**
+     * The placeholder to display when the item has children.
+     */
+    placeholder?: string;
+    children?: CommandPaletteItem[];
     onSelect?(e?: Event): void;
     class?: any;
     ui?: Pick<CommandPalette['slots'], 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemLabel' | 'itemLabelPrefix' | 'itemLabelBase' | 'itemLabelSuffix' | 'itemTrailing' | 'itemTrailingKbds' | 'itemTrailingKbdsSize' | 'itemTrailingHighlightedIcon' | 'itemTrailingIcon'>;
     [key: string]: any;
 }
-export interface CommandPaletteGroup<T> {
+export interface CommandPaletteGroup<T extends CommandPaletteItem = CommandPaletteItem> {
     id: string;
     label?: string;
     slot?: string;
@@ -45,7 +50,7 @@ export interface CommandPaletteGroup<T> {
      */
     highlightedIcon?: string;
 }
-export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
+export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover' | 'selectionBehavior'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -63,6 +68,12 @@ export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multi
      * @IconifyIcon
      */
     selectedIcon?: string;
+    /**
+     * The icon displayed when an item has children.
+     * @defaultValue appConfig.ui.icons.chevronRight
+     * @IconifyIcon
+     */
+    trailingIcon?: string;
     /**
      * The placeholder text for the input.
      * @defaultValue t('commandPalette.placeholder')
@@ -86,6 +97,18 @@ export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multi
      * @IconifyIcon
      */
     closeIcon?: string;
+    /**
+     * Display a button to navigate back in history.
+     * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
+     * @defaultValue true
+     */
+    back?: boolean | ButtonProps;
+    /**
+     * The icon displayed in the back button.
+     * @defaultValue appConfig.ui.icons.arrowLeft
+     * @IconifyIcon
+     */
+    backIcon?: string;
     groups?: G[];
     /**
      * Options for [useFuse](https://vueuse.org/integrations/useFuse).
@@ -108,21 +131,27 @@ export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multi
     class?: any;
     ui?: CommandPalette['slots'];
 }
-export type CommandPaletteEmits<T> = ListboxRootEmits<T> & {
+export type CommandPaletteEmits<T extends CommandPaletteItem = CommandPaletteItem> = ListboxRootEmits<T> & {
     'update:open': [value: boolean];
 };
 type SlotProps<T> = (props: {
     item: T;
     index: number;
 }) => any;
-export type CommandPaletteSlots<G extends {
-    slot?: string;
-}, T extends {
-    slot?: string;
-}> = {
+export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> = {
     'empty'(props: {
         searchTerm?: string;
     }): any;
+    'footer'(props: {
+        ui: {
+            [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string;
+        };
+    }): any;
+    'back'(props: {
+        ui: {
+            [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string;
+        };
+    }): any;
     'close'(props: {
         ui: {
             [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string;
@@ -159,5 +188,5 @@ declare const _default: <G extends CommandPaletteGroup<T>, T extends CommandPale
 };
 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/Container.vue.d.ts

@@ -9,7 +9,7 @@ export interface ContainerProps {
 export interface ContainerSlots {
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ContainerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContainerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ContainerSlots>;
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ContainerProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContainerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ContainerSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -105,5 +105,5 @@ declare const _default: <T extends ArrayOrNested<ContextMenuItem>>(__VLS_props:
 };
 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/ContextMenuContent.vue.d.ts

@@ -31,35 +31,19 @@ interface ContextMenuContentProps<T extends ArrayOrNested<ContextMenuItem>> exte
 declare const _default: <T extends ArrayOrNested<ContextMenuItem>>(__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 onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
-        readonly onPointerDownOutside?: ((event: CustomEvent<{
-            originalEvent: PointerEvent;
-        }>) => any) | undefined;
-        readonly onFocusOutside?: ((event: CustomEvent<{
-            originalEvent: FocusEvent;
-        }>) => any) | undefined;
-        readonly onInteractOutside?: ((event: CustomEvent<{
-            originalEvent: PointerEvent;
-        }> | CustomEvent<{
-            originalEvent: FocusEvent;
-        }>) => any) | undefined;
+        readonly onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
+        readonly onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
+        readonly onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
         readonly onCloseAutoFocus?: ((event: Event) => any) | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "onCloseAutoFocus"> & ContextMenuContentProps<T> & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: ContextMenuSlots<T>;
-    emit: ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: CustomEvent<{
-        originalEvent: PointerEvent;
-    }>) => void) & ((evt: "focusOutside", event: CustomEvent<{
-        originalEvent: FocusEvent;
-    }>) => void) & ((evt: "interactOutside", event: CustomEvent<{
-        originalEvent: PointerEvent;
-    }> | CustomEvent<{
-        originalEvent: FocusEvent;
-    }>) => void) & ((evt: "closeAutoFocus", event: Event) => void);
+    emit: ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: import("reka-ui").PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: import("reka-ui").FocusOutsideEvent) => void) & ((evt: "interactOutside", event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => void) & ((evt: "closeAutoFocus", event: Event) => 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/Drawer.vue

@@ -5,7 +5,7 @@ import theme from "#build/ui/drawer";
 <script setup>
 import { computed, toRef } from "vue";
 import { VisuallyHidden, useForwardPropsEmits } from "reka-ui";
-import { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from "vaul-vue";
+import { DrawerRoot, DrawerRootNested, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from "vaul-vue";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { usePortal } from "../composables/usePortal";
@@ -19,6 +19,7 @@ const props = defineProps({
   overlay: { type: Boolean, required: false, default: true },
   handle: { type: Boolean, required: false, default: true },
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
+  nested: { type: Boolean, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
   activeSnapPoint: { type: [Number, String, null], required: false },
@@ -31,7 +32,6 @@ const props = defineProps({
   modal: { type: Boolean, required: false, default: true },
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },
-  nested: { type: Boolean, required: false },
   direction: { type: String, required: false, default: "bottom" },
   noBodyStyles: { type: Boolean, required: false },
   handleOnly: { type: Boolean, required: false },
@@ -54,7 +54,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.drawer || {}
 </script>
 
 <template>
-  <DrawerRoot v-bind="rootProps">
+  <component :is="nested ? DrawerRootNested : DrawerRoot" v-bind="rootProps">
     <DrawerTrigger v-if="!!slots.default" as-child :class="props.class">
       <slot />
     </DrawerTrigger>
@@ -108,5 +108,5 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.drawer || {}
         </slot>
       </DrawerContent>
     </DrawerPortal>
-  </DrawerRoot>
+  </component>
 </template>

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

@@ -34,6 +34,11 @@ export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | '
      * @defaultValue true
      */
     portal?: boolean | string | HTMLElement;
+    /**
+     * Whether the drawer is nested in another drawer.
+     * @defaultValue false
+     */
+    nested?: boolean;
     class?: any;
     ui?: Drawer['slots'];
 }
@@ -48,7 +53,7 @@ export interface DrawerSlots {
     body(props?: {}): any;
     footer(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DrawerProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     close: () => any;
     drag: (percentageDragged: number) => any;
     "update:open": (open: boolean) => any;

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

@@ -115,5 +115,5 @@ declare const _default: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_props:
 };
 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/DropdownMenuContent.vue.d.ts

@@ -2,7 +2,7 @@ import { DropdownMenu } from 'reka-ui/namespaced';
 import type { DropdownMenuContentProps as RekaDropdownMenuContentProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import type theme from '#build/ui/dropdown-menu';
-import type { DropdownMenuItem, DropdownMenuSlots } from '../types';
+import type { DropdownMenuItem, DropdownMenuSlots, DynamicSlots, MergeTypes } from '../types';
 import type { ArrayOrNested, NestedItem, ComponentConfig } from '../types/utils';
 type DropdownMenu = ComponentConfig<typeof theme, AppConfig, 'dropdownMenu'>;
 interface DropdownMenuContentProps<T extends ArrayOrNested<DropdownMenuItem>> extends Omit<RekaDropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> {
@@ -28,41 +28,28 @@ interface DropdownMenuContentProps<T extends ArrayOrNested<DropdownMenuItem>> ex
     };
     uiOverride?: DropdownMenu['slots'];
 }
-type DropdownMenuContentSlots<T extends ArrayOrNested<DropdownMenuItem>> = Omit<DropdownMenuSlots<T>, 'default'> & {
+type DropdownMenuContentSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>, T extends NestedItem<A> = NestedItem<A>> = Pick<DropdownMenuSlots<A>, 'item' | 'item-leading' | 'item-label' | 'item-trailing' | 'content-top' | 'content-bottom'> & {
     default(props?: {}): any;
-};
+} & DynamicSlots<MergeTypes<T>, 'leading' | 'label' | 'trailing', {
+    active?: boolean;
+    index: number;
+}>;
 declare const _default: <T extends ArrayOrNested<DropdownMenuItem>>(__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 onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
-        readonly onPointerDownOutside?: ((event: CustomEvent<{
-            originalEvent: PointerEvent;
-        }>) => any) | undefined;
-        readonly onFocusOutside?: ((event: CustomEvent<{
-            originalEvent: FocusEvent;
-        }>) => any) | undefined;
-        readonly onInteractOutside?: ((event: CustomEvent<{
-            originalEvent: PointerEvent;
-        }> | CustomEvent<{
-            originalEvent: FocusEvent;
-        }>) => any) | undefined;
+        readonly onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
+        readonly onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
+        readonly onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
         readonly onCloseAutoFocus?: ((event: Event) => any) | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "onCloseAutoFocus"> & DropdownMenuContentProps<T> & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
-    slots: DropdownMenuContentSlots<T>;
-    emit: ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: CustomEvent<{
-        originalEvent: PointerEvent;
-    }>) => void) & ((evt: "focusOutside", event: CustomEvent<{
-        originalEvent: FocusEvent;
-    }>) => void) & ((evt: "interactOutside", event: CustomEvent<{
-        originalEvent: PointerEvent;
-    }> | CustomEvent<{
-        originalEvent: FocusEvent;
-    }>) => void) & ((evt: "closeAutoFocus", event: Event) => void);
+    slots: DropdownMenuContentSlots<T, NestedItem<T>>;
+    emit: ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: import("reka-ui").PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: import("reka-ui").FocusOutsideEvent) => void) & ((evt: "interactOutside", event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => void) & ((evt: "closeAutoFocus", event: Event) => 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/FileUpload.vue

@@ -0,0 +1,242 @@
+<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 } 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 [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);
+    return;
+  }
+  const files = [...modelValue.value];
+  files.splice(index, 1);
+  onUpdate(files, true);
+}
+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
+}"
+                  :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()"
+      >
+        <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>