@groupteknology/vuno 3.0.0 → 4.0.0

package/dist/runtime/app/components/FieldCurrency/FieldCurrency.vue

@@ -1,51 +0,0 @@
-<script setup>
-import { useField } from "#vuno/composables/useField";
-import { useTheme } from "#vuno/composables/useTheme";
-import FieldShell from "#vuno/components/FormField/internal/FieldShell/FieldShell.vue";
-import PrimitiveNumberInput from "#vuno/primitives/PrimitiveNumberInput/PrimitiveNumberInput.vue";
-defineOptions({ name: "VunoFieldCurrency" });
-const model = defineModel({ type: null, ...{ default: void 0 } });
-const props = defineProps({
-  name: { type: String, required: false },
-  class: { type: String, required: false },
-  description: { type: String, required: false },
-  disabled: { type: Boolean, required: false },
-  error: { type: String, required: false },
-  help: { type: String, required: false },
-  hint: { type: String, required: false },
-  label: { type: String, required: false },
-  orientation: { type: String, required: false },
-  required: { type: Boolean, required: false },
-  size: { type: String, required: false },
-  ui: { type: Object, required: false },
-  controlsOrientation: { type: String, required: false },
-  currency: { type: String, required: true },
-  decimals: { type: Number, required: false },
-  max: { type: Number, required: false },
-  min: { type: Number, required: false },
-  placeholder: { type: String, required: false },
-  step: { type: Number, required: false }
-});
-const { value } = useField(() => props.name, model);
-const ui = useTheme("fieldCurrency", () => props.ui);
-</script>
-
-<template>
-    <FieldShell v-bind="props">
-        <template #default="control">
-            <PrimitiveNumberInput
-                v-bind="control"
-                v-model="value"
-                :currency="props.currency"
-                :decimals="props.decimals"
-                :disabled="props.disabled"
-                :max="props.max"
-                :min="props.min"
-                :orientation="props.controlsOrientation ?? 'horizontal'"
-                :placeholder="props.placeholder"
-                :step="props.step"
-                :ui="ui"
-            />
-        </template>
-    </FieldShell>
-</template>

package/dist/runtime/app/components/FieldCurrency/FieldCurrency.vue.d.ts

@@ -1,13 +0,0 @@
-import type { VunoFieldCurrencyProps } from './FieldCurrency.types.js';
-type __VLS_Props = VunoFieldCurrencyProps;
-type __VLS_ModelProps = {
-    modelValue?: number | undefined;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: number | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: number | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/app/components/FieldFile/FieldFile.d.vue.ts

@@ -1,26 +0,0 @@
-import type { VunoFieldFileProps } from './FieldFile.types.js';
-/**
- * Los tres booleanos llevan `withDefaults` y no un `?? true` en el uso.
- *
- * Vue convierte un prop declarado `boolean` que no viene en `false`, nunca
- * en `undefined`, así que `props.multiple ?? true` no se ejecuta jamás: da
- * `false` y el campo queda de un solo archivo salvo que la definición
- * escriba `multiple: true`. Lo mismo hacía que `dropzone` llegara en
- * `false` al control, pisando el `true` que este sí traía por defecto.
- */
-type __VLS_Props = VunoFieldFileProps;
-type __VLS_ModelProps = {
-    modelValue?: File[] | null | undefined;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: File[] | null | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: File[] | null | undefined) => any) | undefined;
-}>, {
-    dropzone: boolean;
-    multiple: boolean;
-    reorderable: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/app/components/FieldFile/FieldFile.theme.d.ts

@@ -1,5 +0,0 @@
-export declare const fieldFileTheme: Record<"fieldFile", {
-    readonly slots: {
-        readonly root: "w-full";
-    };
-}>;

package/dist/runtime/app/components/FieldFile/FieldFile.theme.js

@@ -1,2 +0,0 @@
-import { defineTheme } from "#vuno/utils/theme";
-export const fieldFileTheme = defineTheme("fieldFile", { slots: { root: "w-full" } });

package/dist/runtime/app/components/FieldFile/FieldFile.types.d.ts

@@ -1,2 +0,0 @@
-import type { VunoFieldFile } from '#vuno/types/field';
-export type VunoFieldFileProps = Omit<VunoFieldFile, 'columns'>;

package/dist/runtime/app/components/FieldFile/FieldFile.vue

@@ -1,99 +0,0 @@
-<script setup>
-import { computed } from "vue";
-import { useField } from "#vuno/composables/useField";
-import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
-import Button from "#vuno/components/Button/Button.vue";
-import FileUpload from "#vuno/components/FieldFile/internal/FileUpload/FileUpload.vue";
-import FieldShell from "#vuno/components/FormField/internal/FieldShell/FieldShell.vue";
-import Tooltip from "#vuno/components/Tooltip/Tooltip.vue";
-defineOptions({ name: "VunoFieldFile" });
-const model = defineModel({ type: null, ...{ default: void 0 } });
-const props = defineProps({
-  name: { type: String, required: false },
-  class: { type: String, required: false },
-  description: { type: String, required: false },
-  disabled: { type: Boolean, required: false },
-  error: { type: String, required: false },
-  help: { type: String, required: false },
-  hint: { type: String, required: false },
-  label: { type: String, required: false },
-  orientation: { type: String, required: false },
-  required: { type: Boolean, required: false },
-  size: { type: String, required: false },
-  ui: { type: Object, required: false },
-  accept: { type: String, required: false },
-  dropzone: { type: Boolean, required: false, default: true },
-  layout: { type: String, required: false },
-  multiple: { type: Boolean, required: false, default: true },
-  reorderable: { type: Boolean, required: false, default: true }
-});
-const { value } = useField(() => props.name, model);
-const icons = useIcons();
-const messages = useMessages();
-const ui = useTheme("fieldFile", () => props.ui);
-const isReorderable = computed(() => props.reorderable && props.multiple);
-const files = computed(() => value.value ?? []);
-function move(index, offset) {
-  const next = [...files.value];
-  const target = index + offset;
-  if (target < 0 || target >= next.length) return;
-  const [moved] = next.splice(index, 1);
-  if (!moved) return;
-  next.splice(target, 0, moved);
-  value.value = next;
-}
-</script>
-
-<template>
-    <FieldShell v-bind="props">
-        <template #default="control">
-            <FileUpload
-                v-bind="control"
-                v-model="value"
-                :accept="props.accept"
-                :disabled="props.disabled"
-                :dropzone="props.dropzone"
-                :layout="props.layout ?? 'list'"
-                :multiple="props.multiple"
-                :ui="ui"
-            >
-                <!--
-            Solo las flechas: el botón de quitar lo pone el control, que es
-            quien sabe cómo se borra de su lista. Aquí se añade lo que es propio
-            del campo, que es poder reordenar.
-        -->
-                <template #fileTrailing="{ actionClass, file, index }">
-                    <Tooltip
-                        v-if="isReorderable && index > 0"
-                        :text="messages.fileMoveUp"
-                    >
-                        <Button
-                            :aria-label="`${messages.fileMoveUp} ${file.name}`"
-                            color="neutral"
-                            :icon="icons.fileMoveUp"
-                            size="xs"
-                            :ui="{ base: actionClass }"
-                            variant="soft"
-                            @click="move(index, -1)"
-                        />
-                    </Tooltip>
-
-                    <Tooltip
-                        v-if="isReorderable && index < files.length - 1"
-                        :text="messages.fileMoveDown"
-                    >
-                        <Button
-                            :aria-label="`${messages.fileMoveDown} ${file.name}`"
-                            color="neutral"
-                            :icon="icons.fileMoveDown"
-                            size="xs"
-                            :ui="{ base: actionClass }"
-                            variant="soft"
-                            @click="move(index, 1)"
-                        />
-                    </Tooltip>
-                </template>
-            </FileUpload>
-        </template>
-    </FieldShell>
-</template>

package/dist/runtime/app/components/FieldFile/FieldFile.vue.d.ts

@@ -1,26 +0,0 @@
-import type { VunoFieldFileProps } from './FieldFile.types.js';
-/**
- * Los tres booleanos llevan `withDefaults` y no un `?? true` en el uso.
- *
- * Vue convierte un prop declarado `boolean` que no viene en `false`, nunca
- * en `undefined`, así que `props.multiple ?? true` no se ejecuta jamás: da
- * `false` y el campo queda de un solo archivo salvo que la definición
- * escriba `multiple: true`. Lo mismo hacía que `dropzone` llegara en
- * `false` al control, pisando el `true` que este sí traía por defecto.
- */
-type __VLS_Props = VunoFieldFileProps;
-type __VLS_ModelProps = {
-    modelValue?: File[] | null | undefined;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: File[] | null | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: File[] | null | undefined) => any) | undefined;
-}>, {
-    dropzone: boolean;
-    multiple: boolean;
-    reorderable: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/app/components/FieldFile/internal/FileUpload/FileUpload.d.vue.ts

@@ -1,67 +0,0 @@
-import type { VunoRadius } from '#vuno/types/base';
-import type { VunoFieldSize } from '#vuno/types/field';
-import type { VunoUi } from '#vuno/types/slots';
-type __VLS_Props = Props;
-type __VLS_Slots = {
-    /**
-     * Acciones extra por archivo: reordenar, previsualizar.
-     *
-     * Entrega `actionClass` porque lo que se añada aquí va al lado del
-     * botón de quitar y tiene que parecerse a él. Sin eso, quien use el
-     * hueco copia las clases, y una copia deja de seguir al tema en cuanto
-     * alguien cambia el original.
-     */
-    fileTrailing?: (props: {
-        actionClass: string | undefined;
-        file: File;
-        index: number;
-        removeFile: (index: number) => void;
-    }) => unknown;
-};
-type Props = {
-    name?: string;
-    /** Filtro del selector nativo: `image/*`, `.pdf`, ... */
-    accept?: string;
-    disabled?: boolean;
-    /** Admite soltar archivos encima, además del clic. */
-    dropzone?: boolean;
-    /** Texto de la zona de caída. Sin él solo se ve el icono. */
-    hint?: string;
-    /** En rejilla se ve la miniatura; en lista, el nombre y el tamaño. */
-    layout?: 'grid' | 'list';
-    multiple?: boolean;
-    /** La curvatura. Sin valor, la que traiga el tema. */
-    radius?: VunoRadius;
-    required?: boolean;
-    size?: VunoFieldSize;
-    ui?: VunoUi<'fieldFile' | 'fileUpload'>;
-};
-type __VLS_ModelProps = {
-    modelValue?: File[] | null | undefined;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
-    inputRef: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: File[] | null | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: File[] | null | undefined) => any) | undefined;
-}>, {
-    radius: VunoRadius;
-    size: VunoFieldSize;
-    name: string;
-    dropzone: boolean;
-    hint: string;
-    layout: "grid" | "list";
-    ui: VunoUi<"fieldFile" | "fileUpload">;
-    accept: string;
-    multiple: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/runtime/app/components/FieldFile/internal/FileUpload/FileUpload.theme.d.ts

@@ -1,89 +0,0 @@
-/**
- * La subida de archivos. La zona de caída es una `<label>`, así que el clic
- * en cualquier punto abre el selector sin manejadores; lo que se pinta aquí
- * es solo su aspecto y el de la lista de lo elegido.
- *
- * La miniatura y el icono de respaldo comparten hueco a propósito: si un
- * archivo sin vista previa ocupara menos, la lista bailaría al mezclar
- * imágenes con documentos.
- */
-export declare const fileUploadTheme: Record<"fileUpload", {
-    readonly slots: {
-        readonly name: "truncate text-vuno-body";
-        readonly actions: "ms-auto flex shrink-0 items-center gap-1.5";
-        readonly dropzone: "flex cursor-pointer items-center rounded-sm border border-vuno-border-strong bg-vuno-surface-1 text-vuno-muted transition-[background-color,border-color,color] focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-vuno-primary hover:border-vuno-primary hover:bg-vuno-surface-2 hover:text-vuno-body";
-        readonly dropzoneActive: "border-vuno-primary bg-vuno-surface-2 text-vuno-body";
-        readonly dropzoneDisabled: "cursor-not-allowed opacity-50";
-        readonly fileIcon: "shrink-0 text-vuno-muted";
-        readonly hint: "leading-snug";
-        readonly icon: "";
-        readonly item: "flex items-center gap-2 rounded-sm border border-vuno-border bg-vuno-surface p-1.5";
-        readonly itemAction: "rounded-sm";
-        readonly list: "flex w-full flex-col gap-1.5";
-        readonly preview: "shrink-0 rounded-sm object-cover";
-        readonly root: "flex w-full flex-col gap-2";
-        readonly size: "text-vuno-muted";
-        readonly texts: "flex min-w-0 flex-col";
-    };
-    readonly variants: {
-        readonly dropzone: {
-            readonly false: {
-                readonly dropzone: "w-full justify-start gap-2 border-solid bg-vuno-surface px-3 py-2";
-                readonly hint: "text-start";
-            };
-            readonly true: {
-                readonly dropzone: "min-h-24 w-full flex-col justify-center gap-2 border-dashed px-4 py-6";
-                readonly hint: "text-center font-medium text-vuno-body";
-            };
-        };
-        readonly layout: {
-            /** En rejilla manda la imagen: la lista pasa a columnas y el texto se va debajo. */
-            readonly grid: {
-                readonly item: "flex-col items-start";
-                readonly list: "grid grid-cols-[repeat(auto-fill,minmax(8rem,1fr))] gap-2";
-                readonly preview: "h-24 w-full";
-            };
-            readonly list: {
-                readonly preview: "size-9";
-            };
-        };
-        readonly radius: Record<import("../../../../types/base.js").VunoRadius, Record<"dropzone", string>>;
-        readonly size: {
-            readonly xs: {
-                readonly name: "text-xs";
-                readonly fileIcon: "size-6";
-                readonly hint: "text-xs";
-                readonly icon: "size-6";
-                readonly size: "text-xs";
-            };
-            readonly sm: {
-                readonly name: "text-sm";
-                readonly fileIcon: "size-7";
-                readonly hint: "text-xs";
-                readonly icon: "size-7";
-                readonly size: "text-xs";
-            };
-            readonly md: {
-                readonly name: "text-sm";
-                readonly fileIcon: "size-8";
-                readonly hint: "text-sm";
-                readonly icon: "size-8";
-                readonly size: "text-xs";
-            };
-            readonly lg: {
-                readonly name: "text-base";
-                readonly fileIcon: "size-9";
-                readonly hint: "text-sm";
-                readonly icon: "size-9";
-                readonly size: "text-sm";
-            };
-            readonly xl: {
-                readonly name: "text-base";
-                readonly fileIcon: "size-10";
-                readonly hint: "text-base";
-                readonly icon: "size-10";
-                readonly size: "text-sm";
-            };
-        };
-    };
-}>;

package/dist/runtime/app/components/FieldFile/internal/FileUpload/FileUpload.theme.js

@@ -1,56 +0,0 @@
-import { radiusByStep } from "#vuno/theme/shared";
-import { defineTheme } from "#vuno/utils/theme";
-export const fileUploadTheme = defineTheme("fileUpload", {
-  slots: {
-    name: "truncate text-vuno-body",
-    actions: "ms-auto flex shrink-0 items-center gap-1.5",
-    dropzone: "flex cursor-pointer items-center rounded-sm border border-vuno-border-strong bg-vuno-surface-1 text-vuno-muted transition-[background-color,border-color,color] focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-vuno-primary hover:border-vuno-primary hover:bg-vuno-surface-2 hover:text-vuno-body",
-    dropzoneActive: "border-vuno-primary bg-vuno-surface-2 text-vuno-body",
-    dropzoneDisabled: "cursor-not-allowed opacity-50",
-    fileIcon: "shrink-0 text-vuno-muted",
-    hint: "leading-snug",
-    icon: "",
-    item: "flex items-center gap-2 rounded-sm border border-vuno-border bg-vuno-surface p-1.5",
-    /*
-     * Los botones de cada archivo: quitar, y los de reordenar que
-     * `FieldFile` añade por el hueco. El radio estaba escrito a mano en
-     * los tres sitios, y por `ui` de instancia, así que no había forma
-     * de cambiarlo desde el proyecto. Ahora sale de aquí y el hueco lo
-     * reparte, de modo que los tres siguen pareciéndose entre sí.
-     */
-    itemAction: "rounded-sm",
-    list: "flex w-full flex-col gap-1.5",
-    preview: "shrink-0 rounded-sm object-cover",
-    root: "flex w-full flex-col gap-2",
-    size: "text-vuno-muted",
-    texts: "flex min-w-0 flex-col"
-  },
-  variants: {
-    /*
-     * **Sin zona de caída el control cambia de forma, no solo de
-     * comportamiento.** Antes `dropzone: false` apagaba los manejadores
-     * y dejaba el mismo recuadro de rayas: medido, idéntico píxel a
-     * píxel al de al lado. O sea un área que invita a soltar y no acepta
-     * nada, que es la peor manera de apagar algo. Ahora se encoge a una
-     * fila, que es lo que su propia documentación prometía para un
-     * formulario apretado.
-     */
-    dropzone: {
-      false: { dropzone: "w-full justify-start gap-2 border-solid bg-vuno-surface px-3 py-2", hint: "text-start" },
-      true: { dropzone: "min-h-24 w-full flex-col justify-center gap-2 border-dashed px-4 py-6", hint: "text-center font-medium text-vuno-body" }
-    },
-    layout: {
-      /** En rejilla manda la imagen: la lista pasa a columnas y el texto se va debajo. */
-      grid: { item: "flex-col items-start", list: "grid grid-cols-[repeat(auto-fill,minmax(8rem,1fr))] gap-2", preview: "h-24 w-full" },
-      list: { preview: "size-9" }
-    },
-    radius: radiusByStep("dropzone"),
-    size: {
-      xs: { name: "text-xs", fileIcon: "size-6", hint: "text-xs", icon: "size-6", size: "text-xs" },
-      sm: { name: "text-sm", fileIcon: "size-7", hint: "text-xs", icon: "size-7", size: "text-xs" },
-      md: { name: "text-sm", fileIcon: "size-8", hint: "text-sm", icon: "size-8", size: "text-xs" },
-      lg: { name: "text-base", fileIcon: "size-9", hint: "text-sm", icon: "size-9", size: "text-sm" },
-      xl: { name: "text-base", fileIcon: "size-10", hint: "text-base", icon: "size-10", size: "text-sm" }
-    }
-  }
-});

package/dist/runtime/app/components/FieldFile/internal/FileUpload/FileUpload.vue

@@ -1,208 +0,0 @@
-<script setup>
-import { computed, onBeforeUnmount, ref, watch } from "vue";
-import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
-import Button from "#vuno/components/Button/Button.vue";
-import Icon from "#vuno/components/Icon/Icon.vue";
-import Text from "#vuno/components/Text/Text.vue";
-defineOptions({ name: "VunoFileUpload", inheritAttrs: false });
-const model = defineModel({ type: null, ...{ default: void 0 } });
-const props = defineProps({
-  name: { type: String, required: false, default: void 0 },
-  accept: { type: String, required: false, default: void 0 },
-  disabled: { type: Boolean, required: false },
-  dropzone: { type: Boolean, required: false, default: true },
-  hint: { type: String, required: false, default: void 0 },
-  layout: { type: String, required: false, default: "list" },
-  multiple: { type: Boolean, required: false, default: true },
-  radius: { type: String, required: false, default: void 0 },
-  required: { type: Boolean, required: false },
-  size: { type: String, required: false, default: "md" },
-  ui: { type: Object, required: false, default: void 0 }
-});
-defineSlots();
-const icons = useIcons();
-const messages = useMessages();
-const ui = useTheme(
-  "fileUpload",
-  () => props.ui,
-  () => ({
-    dropzone: props.dropzone ? "true" : "false",
-    layout: props.layout,
-    radius: props.radius,
-    size: props.size
-  })
-);
-const inputRef = ref(null);
-const isDragging = ref(false);
-const previews = ref(/* @__PURE__ */ new Map());
-const files = computed(() => model.value ?? []);
-function releasePreviews(keep = []) {
-  for (const [file, url] of previews.value) {
-    if (keep.includes(file)) continue;
-    URL.revokeObjectURL(url);
-    previews.value.delete(file);
-  }
-}
-function formatSize(bytes) {
-  if (bytes < 1024) return `${bytes} B`;
-  const units = ["KB", "MB", "GB"];
-  let value = bytes / 1024;
-  let unit = 0;
-  while (value >= 1024 && unit < units.length - 1) {
-    value /= 1024;
-    unit += 1;
-  }
-  return `${value.toFixed(value >= 10 || unit === 0 ? 0 : 1)} ${units[unit]}`;
-}
-function accepted(list) {
-  const next = [...list];
-  return props.multiple ? [...files.value, ...next] : next.slice(0, 1);
-}
-function onChange(event) {
-  const input = event.target;
-  if (!input.files || input.files.length === 0) return;
-  model.value = accepted(input.files);
-  input.value = "";
-}
-function removeFile(index) {
-  const next = [...files.value];
-  next.splice(index, 1);
-  model.value = next.length > 0 ? next : void 0;
-}
-function onDrop(event) {
-  isDragging.value = false;
-  if (props.disabled || !props.dropzone) return;
-  const dropped = event.dataTransfer?.files;
-  if (!dropped || dropped.length === 0) return;
-  model.value = accepted(dropped);
-}
-function onDragOver() {
-  if (props.disabled || !props.dropzone) return;
-  isDragging.value = true;
-}
-watch(
-  files,
-  (next) => {
-    releasePreviews(next);
-    for (const file of next) {
-      if (!file.type.startsWith("image/") || previews.value.has(file)) continue;
-      previews.value.set(file, URL.createObjectURL(file));
-    }
-  },
-  { immediate: true }
-);
-onBeforeUnmount(() => releasePreviews());
-defineExpose({ inputRef });
-</script>
-
-<template>
-    <div :class="ui.root">
-        <!--
-            La etiqueta envuelve al input, así que el clic en cualquier punto de
-            la zona abre el selector sin necesitar un manejador. `dragover` se
-            cancela siempre —también deshabilitado— porque lo que hace por
-            defecto el navegador es abrir el archivo y perder el formulario.
-        -->
-        <!--
-            La etiqueta **envuelve** al control en vez de apuntarlo con `for`:
-            el envoltorio de campo le pone su propio `id` al input, así que un
-            `for` escrito aquí señalaría a un elemento que ya no existe y el
-            clic dejaría de abrir el selector sin que nada fallara.
-        -->
-        <label
-            :class="[ui.dropzone, isDragging && ui.dropzoneActive, props.disabled && ui.dropzoneDisabled]"
-            @dragleave="isDragging = false"
-            @dragover.prevent="onDragOver"
-            @drop.prevent="onDrop"
-        >
-            <Icon
-                :class="ui.icon"
-                :name="icons.fileUpload"
-            />
-
-            <Text
-                v-if="props.hint"
-                :class="ui.hint"
-                tag="span"
-                tone="inherit"
-                variant="inherit"
-                >{{ props.hint }}</Text
-            >
-
-            <input
-                ref="inputRef"
-                v-bind="$attrs"
-                :accept="props.accept"
-                class="sr-only"
-                :disabled="props.disabled"
-                :multiple="props.multiple"
-                :name="props.name"
-                :required="props.required && files.length === 0"
-                type="file"
-                @change="onChange"
-            />
-        </label>
-
-        <ul
-            v-if="files.length > 0"
-            :class="ui.list"
-        >
-            <li
-                v-for="(file, index) in files"
-                :key="`${file.name}-${index}`"
-                :class="ui.item"
-            >
-                <img
-                    v-if="previews.get(file)"
-                    :alt="file.name"
-                    :class="ui.preview"
-                    :src="previews.get(file)"
-                />
-
-                <Icon
-                    v-else
-                    :class="ui.fileIcon"
-                    :name="icons.fileUpload"
-                />
-
-                <div :class="ui.texts">
-                    <Text
-                        :class="ui.name"
-                        tag="span"
-                        tone="inherit"
-                        variant="inherit"
-                        >{{ file.name }}</Text
-                    >
-                    <Text
-                        :class="ui.size"
-                        tag="span"
-                        tone="inherit"
-                        variant="inherit"
-                        >{{ formatSize(file.size) }}</Text
-                    >
-                </div>
-
-                <div :class="ui.actions">
-                    <slot
-                        :actionClass="ui.itemAction"
-                        :file="file"
-                        :index="index"
-                        name="fileTrailing"
-                        :removeFile="removeFile"
-                    />
-
-                    <Button
-                        :aria-label="`${messages.fileRemove} ${file.name}`"
-                        color="neutral"
-                        :disabled="props.disabled"
-                        :icon="icons.fileRemove"
-                        size="xs"
-                        :ui="{ base: ui.itemAction }"
-                        variant="soft"
-                        @click="removeFile(index)"
-                    />
-                </div>
-            </li>
-        </ul>
-    </div>
-</template>