vectis-ui 0.1.0

package/dist/components/VFilePicker/VFilePicker.d.ts

@@ -0,0 +1,203 @@
+import { IconSource } from '../VIcon/types.js';
+import { FileKind } from './fileKind.js';
+/** Where the files taken are listed — under the zone, beside it, or nowhere. */
+export type FilePickerPreview = false | 'bottom' | 'end';
+/** Why a file was turned away: its kind, its size, how many there already are, or the total. */
+export type FilePickerRejectReason = 'type' | 'size' | 'count' | 'total-size';
+/** One file that was turned away, and the reason it was. */
+export interface FilePickerRejection {
+    /** The file itself, so a message can name it. */
+    file: File;
+    /** What it fell foul of. */
+    reason: FilePickerRejectReason;
+}
+/**
+ * Everything known about one row of the list. The same object is handed to both slots
+ * that can replace part of a row, so the two can never be given different information.
+ */
+export interface FilePickerRow {
+    /** The file itself. */
+    file: File;
+    /** Its position in the list. */
+    index: number;
+    /** What kind of file it is, as worked out from its type or its extension. */
+    kind: FileKind;
+    /**
+     * The address of its image thumbnail, when there is one.
+     *
+     * It is absent on the server AND on the browser's first render — those addresses only
+     * exist in a browser, and creating them during the first render would make the two
+     * markups differ — and absent as well for anything the browser fails to decode. Fall
+     * back to the icon in that case.
+     */
+    thumbnail: string | undefined;
+    /** The icon standing for that kind of file, a consumer's override included. */
+    icon: IconSource;
+    /** Its size, already written out in the reader's conventions. */
+    sizeText: string;
+    /** Takes this file out of the list. */
+    remove: () => void;
+}
+interface FilePickerProps {
+    /**
+     * What the reader is being asked to drop, in one line. It is REQUIRED: a drop zone
+     * with no instruction is just a rectangle.
+     *
+     * Note that this prop shadows the HTML attribute of the same name on the component
+     * itself, an accepted trade-off — a tooltip on a drop zone would be redundant anyway.
+     */
+    title: string;
+    /** A second line under it, for the constraints in plain words: kinds, sizes, how many. */
+    subtitle?: string;
+    /** The large icon at the top of the zone. */
+    icon?: IconSource;
+    /**
+     * Shows the separator and the browse button under the instruction. Hiding them
+     * changes the zone's nature: it then becomes the control ITSELF, a real button, so
+     * Enter, Space and the focus come from the platform rather than from a container that
+     * merely reacts to clicks.
+     */
+    showBrowse?: boolean;
+    /** The wording of the browse button. It falls back to the design system dictionary. */
+    browseLabel?: string;
+    /**
+     * Where the files taken are listed: under the zone, or beside it — beside folds back
+     * underneath when the COMPONENT is narrow, following the width it was given rather
+     * than the width of the window.
+     *
+     * By default nothing is listed at all: the value is there for a parent that wants to
+     * present it its own way.
+     */
+    preview?: FilePickerPreview;
+    /**
+     * Shows a thumbnail for each image in that list. Every image is given a temporary
+     * address, created in the browser only and released as soon as the file leaves the
+     * list or the component goes away.
+     *
+     * Turning it off shows the kind icon for every file instead — the way out when a list
+     * holds many images, or very large ones.
+     */
+    thumbnails?: boolean;
+    /** Replaces the icon of one or more kinds of file. */
+    typeIcons?: Partial<Record<FileKind, IconSource>>;
+    /** The icon of the button removing a file from the list. */
+    removeIcon?: IconSource;
+    /** Allows several files to be taken. With one only, every extra file is turned away. */
+    multiple?: boolean;
+    /**
+     * Which kinds of file are accepted, in the browser's own syntax (`image/*,.pdf`).
+     *
+     * It is applied TWICE, and it has to be: as an attribute, which is what filters the
+     * system's file dialog, and again in code, which is the only thing that can filter a
+     * DROPPED file — the attribute has no say over a drop.
+     */
+    accept?: string;
+    /** The largest ONE file may be, in bytes. */
+    maxSize?: number;
+    /** The largest the whole selection may be, in bytes. */
+    maxTotalSize?: number;
+    /** How many files may be taken at most. */
+    maxFiles?: number;
+    /** Makes the zone unusable, greyed out through the colour tokens. */
+    disabled?: boolean;
+    /** Shows what was taken without allowing it to change: no dialog, no drop, no removal. */
+    readonly?: boolean;
+}
+type __VLS_Props = FilePickerProps;
+type __VLS_Slots = {
+    /**
+     * The large icon, for an illustration the icon props cannot express.
+     *
+     * It must stay non-interactive, and so must the two below: with the browse button
+     * hidden, the zone IS a button, and nothing interactive may sit inside one.
+     */
+    icon?(): unknown;
+    /** The instruction. Text and inline elements only, for the same reason. */
+    title?(): unknown;
+    /** The second line. Same contract as the instruction. */
+    subtitle?(): unknown;
+    /**
+     * The browse button. Call the `open` it receives: without it a button of your own
+     * could no longer open the file dialog at all.
+     */
+    browse?(props: {
+        open: () => void;
+        disabled: boolean;
+    }): unknown;
+    /**
+     * A WHOLE row of the list — the way out for a row showing its own upload progress. It
+     * receives everything the standard row was given, so nothing has to be worked out
+     * again.
+     */
+    item?(props: FilePickerRow): unknown;
+    /**
+     * The square at the start of a row alone: for a thumbnail produced by your server, a
+     * video's poster frame, or a format the browser cannot decode.
+     */
+    thumbnail?(props: FilePickerRow): unknown;
+    /**
+     * The control that removes a row. Two of the values it receives are not optional in
+     * practice: `remove` is the only thing that can take the file out, and `label` is the
+     * ready-made name — including the file's own — without which the button would be
+     * announced as nothing at all.
+     */
+    remove?(props: {
+        file: File;
+        index: number;
+        remove: () => void;
+        label: string;
+    }): unknown;
+};
+type __VLS_ModelProps = {
+    /**
+     * Always a LIST of files, whether or not several are allowed — never a file on its own.
+     * The shape of the value does not depend on a prop, so a consumer never has to narrow a
+     * union TypeScript has no way of discriminating. With a single file it is simply a list
+     * of at most one.
+     */
+    modelValue?: File[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
+    /** Moves the focus to the browse control — the button, or the zone when it is one. */
+    focus: (options?: FocusOptions) => void | undefined;
+    /**
+     * Opens the file dialog. It only works when called from something the reader did — a
+     * click, a key press: browsers refuse to open a file dialog by themselves.
+     */
+    open: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    remove: (file: File, index: number) => any;
+    "update:modelValue": (value: File[]) => any;
+    change: (files: File[]) => any;
+    reject: (rejection: FilePickerRejection) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onRemove?: ((file: File, index: number) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: File[]) => any) | undefined;
+    onChange?: ((files: File[]) => any) | undefined;
+    onReject?: ((rejection: FilePickerRejection) => any) | undefined;
+}>, {
+    subtitle: string;
+    disabled: boolean;
+    icon: IconSource;
+    multiple: boolean;
+    readonly: boolean;
+    preview: FilePickerPreview;
+    accept: string;
+    maxSize: number;
+    maxTotalSize: number;
+    maxFiles: number;
+    showBrowse: boolean;
+    browseLabel: string;
+    thumbnails: boolean;
+    typeIcons: Partial<Record<FileKind, IconSource>>;
+    removeIcon: IconSource;
+}, {}, {}, {}, 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/components/VFilePicker/VFilePicker.js

@@ -0,0 +1,9 @@
+import './VFilePicker.css';
+import e from "./VFilePicker.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                            */
+//#region src/components/VFilePicker/VFilePicker.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=VFilePicker.js.map

package/dist/components/VFilePicker/VFilePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VFilePicker.js","names":[],"sources":["../../../src/components/VFilePicker/VFilePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * A drop zone: a dashed rectangle that accepts files dragged onto it or chosen through\n * a dialog, with an optional list of what has been taken.\n *\n * The value is a plain list of files, and the division of labour matters: this component\n * SHOWS and SCREENS, while sending anything anywhere is the parent's business.\n *\n * Four pieces of behaviour need JavaScript, each because the platform leaves no choice.\n * A file dialog opens ONLY from a real click on a real file input, and the list of files\n * it holds cannot be written from a template — hence the relayed click, and the hidden\n * input being a source of files rather than a mirror of the value. The `accept`\n * attribute has no say over a DROP, the browser handing the dropped files over\n * untouched, so the screening has to happen in code. That input has to be reset after\n * every change, or the same file cannot be chosen twice in a row. And a thumbnail has no\n * HTML-only form: an image needs an address, a file only yields one through a temporary\n * URL, and that URL then has to be released.\n *\n * What deliberately is NOT JavaScript is the keyboard. With the browse button hidden,\n * the zone becomes a real button, so Enter, Space, the focus, the role and the complete\n * inertness of a disabled control all come from the browser. The other incarnation, a\n * plain container, exists for one reason only: a button inside a button is invalid\n * markup and unusable by keyboard. Nor is any of the drag highlighting, the \"or\"\n * separator, or the side-by-side layout — all three are CSS.\n */\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  reactive,\n  ref,\n  watch,\n  watchEffect,\n} from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { audio_file as audioFileIcon } from '../VIcon/icons/audio_file'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport { cloud_upload as cloudUploadIcon } from '../VIcon/icons/cloud_upload'\nimport { code as codeIcon } from '../VIcon/icons/code'\nimport { description as descriptionIcon } from '../VIcon/icons/description'\nimport { folder_zip as folderZipIcon } from '../VIcon/icons/folder_zip'\nimport { image as imageIcon } from '../VIcon/icons/image'\nimport { picture_as_pdf as pictureAsPdfIcon } from '../VIcon/icons/picture_as_pdf'\nimport { table_chart as tableChartIcon } from '../VIcon/icons/table_chart'\nimport { video_file as videoFileIcon } from '../VIcon/icons/video_file'\nimport type { IconSource } from '../VIcon/types'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport VTypography from '../VTypography/VTypography.vue'\n\nimport { useFileDrop } from '../../composables/useFileDrop'\nimport { useFileField } from '../../composables/useFileField'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useLocale, useMessages } from '../../i18n/state'\nimport { isDev } from '../../utils/env'\nimport { formatBytes } from '../../utils/file'\nimport { fileKind, type FileKind } from './fileKind'\n\n/** Where the files taken are listed — under the zone, beside it, or nowhere. */\nexport type FilePickerPreview = false | 'bottom' | 'end'\n\n/** Why a file was turned away: its kind, its size, how many there already are, or the total. */\nexport type FilePickerRejectReason = 'type' | 'size' | 'count' | 'total-size'\n\n/** One file that was turned away, and the reason it was. */\nexport interface FilePickerRejection {\n  /** The file itself, so a message can name it. */\n  file: File\n  /** What it fell foul of. */\n  reason: FilePickerRejectReason\n}\n\n/**\n * Everything known about one row of the list. The same object is handed to both slots\n * that can replace part of a row, so the two can never be given different information.\n */\nexport interface FilePickerRow {\n  /** The file itself. */\n  file: File\n  /** Its position in the list. */\n  index: number\n  /** What kind of file it is, as worked out from its type or its extension. */\n  kind: FileKind\n  /**\n   * The address of its image thumbnail, when there is one.\n   *\n   * It is absent on the server AND on the browser's first render — those addresses only\n   * exist in a browser, and creating them during the first render would make the two\n   * markups differ — and absent as well for anything the browser fails to decode. Fall\n   * back to the icon in that case.\n   */\n  thumbnail: string | undefined\n  /** The icon standing for that kind of file, a consumer's override included. */\n  icon: IconSource\n  /** Its size, already written out in the reader's conventions. */\n  sizeText: string\n  /** Takes this file out of the list. */\n  remove: () => void\n}\n\ninterface FilePickerProps {\n  /**\n   * What the reader is being asked to drop, in one line. It is REQUIRED: a drop zone\n   * with no instruction is just a rectangle.\n   *\n   * Note that this prop shadows the HTML attribute of the same name on the component\n   * itself, an accepted trade-off — a tooltip on a drop zone would be redundant anyway.\n   */\n  title: string\n  /** A second line under it, for the constraints in plain words: kinds, sizes, how many. */\n  subtitle?: string\n  /** The large icon at the top of the zone. */\n  icon?: IconSource\n  /**\n   * Shows the separator and the browse button under the instruction. Hiding them\n   * changes the zone's nature: it then becomes the control ITSELF, a real button, so\n   * Enter, Space and the focus come from the platform rather than from a container that\n   * merely reacts to clicks.\n   */\n  showBrowse?: boolean\n  /** The wording of the browse button. It falls back to the design system dictionary. */\n  browseLabel?: string\n  /**\n   * Where the files taken are listed: under the zone, or beside it — beside folds back\n   * underneath when the COMPONENT is narrow, following the width it was given rather\n   * than the width of the window.\n   *\n   * By default nothing is listed at all: the value is there for a parent that wants to\n   * present it its own way.\n   */\n  preview?: FilePickerPreview\n  /**\n   * Shows a thumbnail for each image in that list. Every image is given a temporary\n   * address, created in the browser only and released as soon as the file leaves the\n   * list or the component goes away.\n   *\n   * Turning it off shows the kind icon for every file instead — the way out when a list\n   * holds many images, or very large ones.\n   */\n  thumbnails?: boolean\n  /** Replaces the icon of one or more kinds of file. */\n  typeIcons?: Partial<Record<FileKind, IconSource>>\n  /** The icon of the button removing a file from the list. */\n  removeIcon?: IconSource\n  /** Allows several files to be taken. With one only, every extra file is turned away. */\n  multiple?: boolean\n  /**\n   * Which kinds of file are accepted, in the browser's own syntax (`image/*,.pdf`).\n   *\n   * It is applied TWICE, and it has to be: as an attribute, which is what filters the\n   * system's file dialog, and again in code, which is the only thing that can filter a\n   * DROPPED file — the attribute has no say over a drop.\n   */\n  accept?: string\n  /** The largest ONE file may be, in bytes. */\n  maxSize?: number\n  /** The largest the whole selection may be, in bytes. */\n  maxTotalSize?: number\n  /** How many files may be taken at most. */\n  maxFiles?: number\n  /** Makes the zone unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /** Shows what was taken without allowing it to change: no dialog, no drop, no removal. */\n  readonly?: boolean\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<FilePickerProps>(), {\n  subtitle: undefined,\n  icon: () => cloudUploadIcon,\n  showBrowse: true,\n  browseLabel: undefined,\n  preview: false,\n  thumbnails: true,\n  typeIcons: undefined,\n  removeIcon: () => closeIcon,\n  multiple: false,\n  accept: undefined,\n  maxSize: undefined,\n  maxTotalSize: undefined,\n  maxFiles: undefined,\n  disabled: false,\n  readonly: false,\n})\n\nconst emit = defineEmits<{\n  /** The reader changed the selection, by adding or removing something. */\n  change: [files: File[]]\n  /**\n   * A file was turned away and never joined the selection. It is emitted once PER file,\n   * so a batch drop can be reported precisely.\n   */\n  reject: [rejection: FilePickerRejection]\n  /**\n   * One file was taken out, and which one. It exists alongside `change`, which only says\n   * what is LEFT: an upload already in flight is aborted from here, without having to\n   * compare two lists to find out what went.\n   */\n  remove: [file: File, index: number]\n}>()\n\ndefineSlots<{\n  /**\n   * The large icon, for an illustration the icon props cannot express.\n   *\n   * It must stay non-interactive, and so must the two below: with the browse button\n   * hidden, the zone IS a button, and nothing interactive may sit inside one.\n   */\n  icon?(): unknown\n  /** The instruction. Text and inline elements only, for the same reason. */\n  title?(): unknown\n  /** The second line. Same contract as the instruction. */\n  subtitle?(): unknown\n  /**\n   * The browse button. Call the `open` it receives: without it a button of your own\n   * could no longer open the file dialog at all.\n   */\n  browse?(props: { open: () => void; disabled: boolean }): unknown\n  /**\n   * A WHOLE row of the list — the way out for a row showing its own upload progress. It\n   * receives everything the standard row was given, so nothing has to be worked out\n   * again.\n   */\n  item?(props: FilePickerRow): unknown\n  /**\n   * The square at the start of a row alone: for a thumbnail produced by your server, a\n   * video's poster frame, or a format the browser cannot decode.\n   */\n  thumbnail?(props: FilePickerRow): unknown\n  /**\n   * The control that removes a row. Two of the values it receives are not optional in\n   * practice: `remove` is the only thing that can take the file out, and `label` is the\n   * ready-made name — including the file's own — without which the button would be\n   * announced as nothing at all.\n   */\n  remove?(props: { file: File; index: number; remove: () => void; label: string }): unknown\n}>()\n\n/**\n * Always a LIST of files, whether or not several are allowed — never a file on its own.\n * The shape of the value does not depend on a prop, so a consumer never has to narrow a\n * union TypeScript has no way of discriminating. With a single file it is simply a list\n * of at most one.\n */\nconst model = defineModel<File[]>({ default: () => [] })\n\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nconst m = useMessages()\nconst locale = useLocale()\n\nconst interactive = computed(() => !props.disabled && !props.readonly)\n\n/*\n * The hidden input, the sorting of the consumer's attributes and the single entry point\n * into the value all live in `useFileField`, shared with VFileInput.\n *\n * Here, the bucket meant for \"the control the user deals with\" goes to the ZONE: that is\n * what they see, and what takes the focus once the browse button is hidden. Nothing is\n * pulled out of it, unlike in VFileInput — this component assembles no description of\n * its own.\n */\nconst {\n  fileEl,\n  nativeAttrs,\n  controlAttrs: zoneAttrs,\n  acceptFiles,\n  onNativeChange,\n  openPicker,\n  resetNative,\n} = useFileField({\n  model,\n  forwardedAttrs,\n  enabled: () => interactive.value,\n  multiple: () => props.multiple,\n  limits: () => ({\n    accept: props.accept,\n    maxSize: props.maxSize,\n    maxFiles: props.maxFiles,\n    maxTotalSize: props.maxTotalSize,\n  }),\n  onReject: (rejection) => emit('reject', rejection),\n  onChange: (files) => emit('change', files),\n})\n\nconst zoneEl = ref<HTMLElement | null>(null)\nconst listEl = ref<HTMLUListElement | null>(null)\n/** The zone becomes the control exactly when there is no button inside to be one. */\nconst zoneIsControl = computed(() => !props.showBrowse)\nconst showList = computed(() => props.preview !== false && model.value.length > 0)\n\n/**\n * Which icon stands for which kind of file. A consumer overrides it entry by entry, so\n * replacing one icon does not mean restating the other seven.\n */\nconst KIND_ICONS: Record<FileKind, IconSource> = {\n  image: imageIcon,\n  pdf: pictureAsPdfIcon,\n  audio: audioFileIcon,\n  video: videoFileIcon,\n  archive: folderZipIcon,\n  spreadsheet: tableChartIcon,\n  code: codeIcon,\n  file: descriptionIcon,\n}\n\nconst iconForKind = (kind: FileKind): IconSource => props.typeIcons?.[kind] ?? KIND_ICONS[kind]\n\nfunction onZoneClick(event: MouseEvent) {\n  // The browse button already handles its own click, and that click also reaches the\n  // zone: without this guard it would open the dialog twice. The test is inert when the\n  // zone IS the button, there being nothing inside it to match.\n  if (!zoneIsControl.value && (event.target as HTMLElement).closest('button')) return\n  openPicker()\n}\n\nconst { dragging, onDragEnter, onDragOver, onDragLeave, onDrop } = useFileDrop(\n  () => interactive.value,\n  acceptFiles,\n)\n\n// @a11y\n/**\n * What can be focused in the zone, whichever shape it has taken: the zone itself when it\n * is the button, and otherwise the first button inside it.\n *\n * It is found by searching the DOM rather than kept as a reference, because a consumer\n * may have replaced the browse button entirely — theirs is not ours to hold a reference\n * to, and it still has to be reachable.\n */\nfunction focusTarget(): HTMLElement | null {\n  const zone = zoneEl.value\n  if (!zone) return null\n  return zone.matches('button') ? zone : zone.querySelector('button')\n}\n\n// @a11y @core\n/**\n * Takes a file out of the list, and catches the focus that was on its remove button.\n *\n * That button disappears with its row, so the focus would fall back to the page body.\n * It is moved instead to the row that takes its place, or to the browse control once\n * the list is empty. Waiting for the next tick is what makes the new row findable: the\n * page still shows the old one at the moment the value is written.\n */\nasync function removeAt(index: number) {\n  const file = model.value[index]\n  if (!file || !interactive.value) return\n\n  model.value = model.value.filter((_, i) => i !== index)\n  resetNative()\n  emit('remove', file, index)\n  emit('change', model.value)\n\n  await nextTick()\n  const items = listEl.value?.querySelectorAll<HTMLElement>('.v-file-picker-item') ?? []\n  const next = items[Math.min(index, items.length - 1)]?.querySelector('button')\n  ;(next ?? focusTarget())?.focus()\n}\n\n/**\n * One temporary address per image, kept against THE FILE OBJECT ITSELF.\n *\n * Using the file as the key is safe, and that is worth knowing: Vue's reactivity only\n * wraps plain objects, arrays and collections, so a File travelling through the value\n * comes back with its identity intact — the exact opposite of VCombobox's option cache,\n * where comparing identities IS the bug. Keying by name would be wrong here: two files\n * picked from different folders can share one.\n *\n * The map is made reactive rather than held in a plain reference, which is what lets a\n * single row re-render when its address is ready, instead of replacing the whole map.\n *\n * TRAP — it is called `thumbUrls` and NOT `thumbnails`. Every top-level binding of a\n * `<script setup>` is exposed to the template, where it would SHADOW the prop of the\n * same name — the same trap VHotkeys' `listening` flag avoids.\n */\nconst thumbUrls = reactive(new Map<File, string>())\n\n/**\n * Whether a thumbnail can be drawn at all, decided on the type the BROWSER reports and\n * not on the kind derived from the extension. A `.heic` file counts as an image and\n * deserves the image icon, but no engine will decode it.\n */\nconst isThumbable = (file: File) => file.type.startsWith('image/')\n\n// @ssr @core\n/**\n * Brings the map into line with the list: releases the addresses of files that have\n * gone, and creates them for files that have arrived.\n *\n * TRAP — it is never called from setup, from a derived value or during rendering, only\n * once mounted, from a watcher and from handlers. That is what keeps the component\n * renderable on a server: the server draws the kind icon, and so does the browser's\n * first render, the map being empty until then — the same reasoning as today's date in\n * VDatePicker.\n */\nfunction syncThumbnails() {\n  // With no list rendered there is nothing to draw a thumbnail in, so no address is\n  // created at all. This gate — and not a warning — is what makes the default\n  // configuration cost strictly nothing.\n  const wanted = new Set(\n    props.thumbnails && props.preview !== false ? model.value.filter(isThumbable) : [],\n  )\n\n  for (const [file, url] of thumbUrls) {\n    if (wanted.has(file)) continue\n    URL.revokeObjectURL(url)\n    thumbUrls.delete(file)\n  }\n  for (const file of wanted) {\n    if (!thumbUrls.has(file)) thumbUrls.set(file, URL.createObjectURL(file))\n  }\n}\n\n// @fallback\n/**\n * The image failed to decode — a format the browser does not read, a corrupt file, a\n * type that lied about itself. The address is released and the kind icon takes over: a\n * failure to draw must never leave an empty square in the list.\n */\nfunction dropThumbnail(file: File) {\n  const url = thumbUrls.get(file)\n  if (!url) return\n  URL.revokeObjectURL(url)\n  thumbUrls.delete(file)\n}\n\n// @ssr — the addresses are created in the browser only; the server and the browser's\n// first render both show the kind icon, so the two markups agree.\nonMounted(syncThumbnails)\n/*\n * Watching deeply costs nothing here and covers a consumer who ADDS to the list rather\n * than replacing it: the walk stops at a File, which is neither a plain object nor a\n * collection, so it never descends past the array itself.\n */\nwatch([model, () => props.thumbnails, () => props.preview], syncThumbnails, { deep: true })\n// Released BEFORE the component is torn down and never after — the same rule `useTimer`\n// and VHotkeys follow.\nonBeforeUnmount(() => {\n  for (const url of thumbUrls.values()) URL.revokeObjectURL(url)\n  thumbUrls.clear()\n})\n\n/**\n * Everything one row of the list needs, assembled in one place. A Vue template has no\n * way of declaring a reusable fragment, so this is what keeps the two slots that can\n * replace part of a row fed from a single source.\n */\nfunction rowProps(file: File, index: number): FilePickerRow {\n  const kind = fileKind(file)\n  return {\n    file,\n    index,\n    kind,\n    thumbnail: thumbUrls.get(file),\n    icon: iconForKind(kind),\n    sizeText: formatBytes(file.size, locale.value),\n    remove: () => removeAt(index),\n  }\n}\n\n// @devwarn — the last two are accessibility guards, and both describe things that fail\n// SILENTLY at runtime: a required control nobody can focus, and a name given to a plain\n// container, which assistive technology ignores.\nif (isDev) {\n  watchEffect(() => {\n    if (props.maxFiles !== undefined && !props.multiple)\n      console.warn(\n        '[VFilePicker] `maxFiles` ignored without `multiple`: single mode already caps at one file.',\n      )\n    if (attrs.required !== undefined)\n      console.warn(\n        '[VFilePicker] `required` lands on the hidden file input, which is not focusable: the browser blocks submission with no visible message. Validate the v-model yourself.',\n      )\n    if (\n      props.showBrowse &&\n      (attrs['aria-label'] !== undefined || attrs['aria-labelledby'] !== undefined)\n    )\n      console.warn(\n        '[VFilePicker] an aria-label on the zone is inert while the browse button is shown: the zone is a plain container then, and axe reports aria-prohibited-attr. Name the zone through `title`, or set `showBrowse: false` to make the zone itself the control.',\n      )\n  })\n}\n\ndefineExpose({\n  /** Moves the focus to the browse control — the button, or the zone when it is one. */\n  focus: (options?: FocusOptions) => focusTarget()?.focus(options),\n  /**\n   * Opens the file dialog. It only works when called from something the reader did — a\n   * click, a key press: browsers refuse to open a file dialog by themselves.\n   */\n  open: openPicker,\n})\n</script>\n\n<template>\n  <div\n    class=\"v-file-picker\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-preview=\"preview || undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n    :data-dragging=\"dragging ? '' : undefined\"\n    @dragenter=\"onDragEnter\"\n    @dragover=\"onDragOver\"\n    @dragleave=\"onDragLeave\"\n    @drop=\"onDrop\"\n  >\n    <input\n      v-bind=\"nativeAttrs\"\n      ref=\"fileEl\"\n      type=\"file\"\n      class=\"v-file-picker-native\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      :accept=\"accept\"\n      :multiple=\"multiple || undefined\"\n      :disabled=\"disabled || undefined\"\n      @change=\"onNativeChange\"\n    />\n\n    <!-- TRAP — this wrapper is not decoration. The root is what the layout asks about\n         its own width, and an element cannot ask about ITSELF: whatever flips has to be\n         a descendant of it. Deleting this element makes the side-by-side layout\n         silently stop folding, with no error anywhere. -->\n    <div class=\"v-file-picker-body\">\n      <!-- A real button as soon as the zone IS the control: the role, Enter, Space, the\n           focus and the complete inertness of a disabled control then come from the\n           platform. A plain container otherwise — a button inside a button is invalid\n           markup, and unreachable by keyboard. -->\n      <component\n        :is=\"zoneIsControl ? 'button' : 'div'\"\n        v-bind=\"zoneAttrs\"\n        ref=\"zoneEl\"\n        class=\"v-file-picker-zone\"\n        :type=\"zoneIsControl ? 'button' : undefined\"\n        :disabled=\"zoneIsControl && !interactive ? true : undefined\"\n        @click=\"onZoneClick\"\n      >\n        <span class=\"v-file-picker-icon\">\n          <slot name=\"icon\"><VIcon v-bind=\"iconProps(icon)\" /></slot>\n        </span>\n\n        <!-- Rendered as a span in BOTH shapes: a paragraph is not allowed inside a\n             button, and the markup must not change form between the two — one shape\n             means one set of CSS rules. -->\n        <VTypography as=\"span\" variant=\"subtitle\" class=\"v-file-picker-title\">\n          <slot name=\"title\">{{ title }}</slot>\n        </VTypography>\n\n        <VTypography\n          v-if=\"subtitle || $slots.subtitle\"\n          as=\"span\"\n          variant=\"body-sm\"\n          class=\"v-file-picker-subtitle\"\n        >\n          <slot name=\"subtitle\">{{ subtitle }}</slot>\n        </VTypography>\n\n        <template v-if=\"showBrowse\">\n          <!-- Deliberately not hidden from screen readers: \"or\" is real text, and it\n               reads naturally between the instruction and the button. The two rules on\n               either side of it are pseudo-elements, and therefore decorative by\n               construction. -->\n          <span class=\"v-file-picker-separator\">{{ m.filePicker.or }}</span>\n\n          <slot name=\"browse\" :open=\"openPicker\" :disabled=\"!interactive\">\n            <VButton\n              class=\"v-file-picker-browse\"\n              variant=\"outline\"\n              tone=\"neutral\"\n              :disabled=\"!interactive\"\n              @click=\"openPicker\"\n            >\n              {{ browseLabel ?? m.filePicker.browse }}\n            </VButton>\n          </slot>\n        </template>\n      </component>\n\n      <ul v-if=\"showList\" ref=\"listEl\" class=\"v-file-picker-list\" :aria-label=\"m.filePicker.list\">\n        <li\n          v-for=\"(file, index) in model\"\n          :key=\"`${index}-${file.name}`\"\n          class=\"v-file-picker-item\"\n        >\n          <slot name=\"item\" v-bind=\"rowProps(file, index)\">\n            <span class=\"v-file-picker-thumb\">\n              <slot name=\"thumbnail\" v-bind=\"rowProps(file, index)\">\n                <img\n                  v-if=\"thumbUrls.get(file)\"\n                  class=\"v-file-picker-image\"\n                  :src=\"thumbUrls.get(file)\"\n                  alt=\"\"\n                  loading=\"lazy\"\n                  decoding=\"async\"\n                  @error=\"dropThumbnail(file)\"\n                />\n                <VIcon v-else v-bind=\"iconProps(iconForKind(fileKind(file)))\" />\n              </slot>\n            </span>\n\n            <span class=\"v-file-picker-info\">\n              <span class=\"v-file-picker-name\" :title=\"file.name\">{{ file.name }}</span>\n              <span class=\"v-file-picker-size\">{{ formatBytes(file.size, locale) }}</span>\n            </span>\n\n            <slot\n              name=\"remove\"\n              :file=\"file\"\n              :index=\"index\"\n              :remove=\"() => removeAt(index)\"\n              :label=\"m.filePicker.remove(file.name)\"\n            >\n              <VIconButton\n                class=\"v-file-picker-remove\"\n                size=\"sm\"\n                :icon=\"removeIcon\"\n                :label=\"m.filePicker.remove(file.name)\"\n                :disabled=\"!interactive\"\n                @click=\"removeAt(index)\"\n              />\n            </slot>\n          </slot>\n        </li>\n      </ul>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /* These variables carry the component's name for a reason: they INHERIT, so a bare\n     `--bg` or `--border-color` set by the host application on any ancestor would be\n     picked up here instead — and nothing would catch it, since the unit tests evaluate\n     no styles at all.\n\n     They are declared on the ROOT so that the drag, disabled and read-only states each\n     redefine them in ONE place, which is what makes those states structurally incapable\n     of disagreeing with hover or focus. */\n  .v-file-picker {\n    --file-picker-border-color: var(--vectis-color-border-strong);\n    --file-picker-bg: var(--vectis-color-surface-sunken);\n    --file-picker-text: var(--vectis-color-text);\n    --file-picker-text-muted: var(--vectis-color-text-muted);\n    --file-picker-row-bg: var(--vectis-color-surface-raised);\n    --file-picker-thumb-bg: var(--vectis-color-surface-muted);\n\n    /* Positioned so the hidden file input, which has no size at all, has something to be\n       placed against. */\n    position: relative;\n    display: block;\n    inline-size: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  /* The real file input is a SOURCE of files and not a control anyone deals with. It is\n     hidden with `opacity` and never with `display: none`, the design system's rule for a\n     hidden form control, which has to stay submittable; it is given no size and made\n     deaf to the pointer, so it can never swallow a click meant for the zone. */\n  .v-file-picker-native {\n    position: absolute;\n    inline-size: 0;\n    block-size: 0;\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  .v-file-picker-body {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-4);\n  }\n\n  /* One set of rules serves both shapes the zone can take. All that has to be undone is\n     what the browser gives a button — its own appearance, font and margin — since\n     everything else is declared here regardless. The full width is part of that: a\n     button shrinks to fit its content, where a container does not. */\n  .v-file-picker-zone {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: var(--vectis-space-2);\n    inline-size: 100%;\n    min-block-size: var(--vectis-control-size-file-picker-min-block);\n    margin: 0;\n    padding: var(--vectis-space-6) var(--vectis-space-4);\n    appearance: none;\n    border: 1px dashed var(--file-picker-border-color);\n    border-radius: var(--vectis-radius-surface);\n    background: var(--file-picker-bg);\n    color: var(--file-picker-text);\n    font: inherit;\n    text-align: center;\n    transition:\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-file-picker:not([data-disabled]):not([data-readonly]) .v-file-picker-zone {\n    cursor: pointer;\n  }\n\n  .v-file-picker:not([data-disabled]):not([data-readonly]) .v-file-picker-zone:hover {\n    --file-picker-border-color: var(--vectis-color-accent);\n  }\n\n  .v-file-picker-zone:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  /* While a file is being dragged over it, the zone is highlighted by redefining the\n     very variables it paints itself with — so the highlight cannot disagree with the\n     hover and focus states. */\n  .v-file-picker[data-dragging] {\n    --file-picker-border-color: var(--vectis-color-accent);\n    --file-picker-bg: var(--vectis-color-accent-surface);\n  }\n\n  /* The large icon's size is set HERE, on its own wrapper, and never on the zone: set\n     there it would inherit down and enlarge the browse button's icons as well. */\n  .v-file-picker-icon {\n    --vectis-icon-size: var(--vectis-control-size-file-picker-icon);\n\n    display: inline-flex;\n    color: var(--file-picker-text-muted);\n  }\n\n  .v-file-picker-subtitle {\n    /* Set through VTypography's own colour variable rather than with a plain colour:\n       there is then a single source, and the disabled state below overrides that same\n       one instead of introducing a second. */\n    --typography-color: var(--file-picker-text-muted);\n  }\n\n  /* The word set between two rules, entirely in CSS: the two lines are pseudo-elements\n     sharing the row with the text between them. No extra element is added to the markup,\n     and nothing decorative reaches the accessibility tree. */\n  .v-file-picker-separator {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-3);\n    inline-size: 100%;\n    margin-block-start: var(--vectis-space-2);\n    color: var(--file-picker-text-muted);\n    font-size: var(--vectis-text-caption-size);\n  }\n\n  .v-file-picker-separator::before,\n  .v-file-picker-separator::after {\n    content: '';\n    flex: 1 1 0;\n    border-block-start: 1px solid var(--vectis-color-border);\n  }\n\n  .v-file-picker-list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .v-file-picker-item {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-3);\n    padding: var(--vectis-space-2);\n    border: 1px solid var(--vectis-color-border);\n    border-radius: var(--vectis-radius-interactive);\n    background: var(--file-picker-row-bg);\n  }\n\n  .v-file-picker-thumb {\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--vectis-control-size-file-picker-thumb);\n    block-size: var(--vectis-control-size-file-picker-thumb);\n    overflow: hidden;\n    border-radius: var(--vectis-radius-interactive);\n    background: var(--file-picker-thumb-bg);\n    color: var(--file-picker-text-muted);\n  }\n\n  .v-file-picker-image {\n    display: block;\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: cover;\n  }\n\n  /* The zero minimum is what makes the ellipsis below possible at all: a flex item\n     refuses by default to shrink below its own content, so without it a long file name\n     would widen the row instead of being cut short. */\n  .v-file-picker-info {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    min-inline-size: 0;\n    color: var(--file-picker-text);\n  }\n\n  .v-file-picker-name {\n    overflow: hidden;\n    font-size: var(--vectis-text-body-sm-size);\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  /* Figures of equal width, so the sizes line up down the column instead of wobbling.\n     That is not a typographic role, so it stays a local rule — the same reasoning as\n     VFileInput's counter. */\n  .v-file-picker-size {\n    color: var(--file-picker-text-muted);\n    font-size: var(--vectis-text-caption-size);\n    font-variant-numeric: tabular-nums;\n  }\n\n  /*\n   * Making the component a query container is reserved for the side-by-side layout,\n   * since only its rule below depends on it — and it is not free.\n   *\n   * A container of this kind computes its width WITHOUT looking at its content, so the\n   * component would lose its natural width inside an automatically sized grid column or\n   * an inline box. In the two other layouts it keeps it.\n   */\n  .v-file-picker[data-preview='end'] {\n    container-type: inline-size;\n    container-name: v-file-picker;\n  }\n\n  .v-file-picker[data-preview='end'] .v-file-picker-body {\n    flex-direction: row;\n    align-items: flex-start;\n  }\n\n  .v-file-picker[data-preview='end'] .v-file-picker-zone,\n  .v-file-picker[data-preview='end'] .v-file-picker-list {\n    flex: 1 1 0;\n    min-inline-size: 0;\n  }\n\n  /*\n   * The threshold is written as a literal length, a container query accepting no\n   * variables. It is the width NEEDED to hold the two columns side by side, and not what\n   * is left once they fold: the zone stops being readable below about 18rem — its\n   * instruction wraps onto two lines and the button follows — a row needs about 15rem to\n   * show a thumbnail, a name worth reading and its remove button, and there is a gutter\n   * between them.\n   */\n  @container v-file-picker (max-width: 34rem) {\n    .v-file-picker[data-preview='end'] .v-file-picker-body {\n      flex-direction: column;\n    }\n  }\n\n  /* A disabled zone greys out through the colour tokens and never through opacity.\n\n     The pairing used is the design system's own for a disabled surface, exactly as\n     VInput sets it: a lighter text would look more convincingly disabled, and would fall\n     below the required contrast against that background — which the accessibility checks\n     refuse.\n\n     Both text variables take the SAME value here, so that the secondary line does not\n     sink below the title on a surface that is already dimmed. */\n  .v-file-picker[data-disabled] {\n    --file-picker-border-color: var(--vectis-color-border);\n    --file-picker-bg: var(--vectis-color-surface-muted);\n    --file-picker-text: var(--vectis-color-text-muted);\n    --file-picker-text-muted: var(--vectis-color-text-muted);\n    --file-picker-row-bg: var(--vectis-color-surface-muted);\n  }\n\n  .v-file-picker[data-readonly] {\n    --file-picker-border-color: var(--vectis-color-border);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-file-picker-zone {\n      transition: none;\n    }\n  }\n\n  /*\n   * Under Windows forced colours the backgrounds are dropped and every border colour is\n   * replaced, so the drag highlight — which is nothing but colour — would disappear\n   * entirely. A change of border STYLE survives that: the dashed outline becomes solid\n   * for as long as a file hovers over the zone.\n   */\n  @media (forced-colors: active) {\n    .v-file-picker[data-dragging] .v-file-picker-zone {\n      border-style: solid;\n    }\n\n    .v-file-picker-thumb {\n      border: 1px solid;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VFilePicker/VFilePicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,266 @@
+import { useLocale as e, useMessages as t } from "../../i18n/state.js";
+import n from "../VIcon/VIcon.js";
+import r from "../VTypography/VTypography.js";
+import { iconProps as i } from "../VIcon/iconProps.js";
+import ee from "../VButton/VButton.js";
+import te from "../VIconButton/VIconButton.js";
+import { useRootAttrs as ne } from "../../composables/useRootAttrs.js";
+import { close as a } from "../VIcon/icons/close.js";
+import { useFileDrop as re } from "../../composables/useFileDrop.js";
+import { formatBytes as o } from "../../utils/file.js";
+import { useFileField as ie } from "../../composables/useFileField.js";
+import { audio_file as ae } from "../VIcon/icons/audio_file.js";
+import { cloud_upload as s } from "../VIcon/icons/cloud_upload.js";
+import { code as oe } from "../VIcon/icons/code.js";
+import { description as se } from "../VIcon/icons/description.js";
+import { folder_zip as ce } from "../VIcon/icons/folder_zip.js";
+import { image as le } from "../VIcon/icons/image.js";
+import { picture_as_pdf as ue } from "../VIcon/icons/picture_as_pdf.js";
+import { table_chart as c } from "../VIcon/icons/table_chart.js";
+import { video_file as de } from "../VIcon/icons/video_file.js";
+import { fileKind as l } from "./fileKind.js";
+import { Fragment as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createTextVNode as g, createVNode as _, defineComponent as v, guardReactiveProps as fe, mergeModels as y, mergeProps as b, nextTick as pe, normalizeClass as me, normalizeProps as he, normalizeStyle as ge, onBeforeUnmount as _e, onMounted as ve, openBlock as x, reactive as ye, ref as S, renderList as be, renderSlot as C, resolveDynamicComponent as xe, toDisplayString as w, unref as T, useModel as E, watch as D, withCtx as O } from "vue";
+//#region src/components/VFilePicker/VFilePicker.vue?vue&type=script&setup=true&lang.ts
+var k = [
+	"data-preview",
+	"data-disabled",
+	"data-readonly",
+	"data-dragging"
+], A = [
+	"accept",
+	"multiple",
+	"disabled"
+], j = { class: "v-file-picker-body" }, M = { class: "v-file-picker-icon" }, Se = { class: "v-file-picker-separator" }, Ce = ["aria-label"], we = { class: "v-file-picker-thumb" }, Te = ["src", "onError"], Ee = { class: "v-file-picker-info" }, N = ["title"], De = { class: "v-file-picker-size" }, P = /*@__PURE__*/ v({
+	inheritAttrs: !1,
+	__name: "VFilePicker",
+	props: /*@__PURE__*/ y({
+		title: {},
+		subtitle: { default: void 0 },
+		icon: { default: () => s },
+		showBrowse: {
+			type: Boolean,
+			default: !0
+		},
+		browseLabel: { default: void 0 },
+		preview: {
+			type: [Boolean, String],
+			default: !1
+		},
+		thumbnails: {
+			type: Boolean,
+			default: !0
+		},
+		typeIcons: { default: void 0 },
+		removeIcon: { default: () => a },
+		multiple: {
+			type: Boolean,
+			default: !1
+		},
+		accept: { default: void 0 },
+		maxSize: { default: void 0 },
+		maxTotalSize: { default: void 0 },
+		maxFiles: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: { default: () => [] },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ y([
+		"change",
+		"reject",
+		"remove"
+	], ["update:modelValue"]),
+	setup(a, { expose: s, emit: v }) {
+		let y = a, P = v, F = E(a, "modelValue"), { attrs: Oe, rootClass: ke, rootStyle: Ae, forwardedAttrs: je } = ne(), I = t(), L = e(), R = d(() => !y.disabled && !y.readonly), { fileEl: Me, nativeAttrs: Ne, controlAttrs: Pe, acceptFiles: Fe, onNativeChange: z, openPicker: B, resetNative: Ie } = ie({
+			model: F,
+			forwardedAttrs: je,
+			enabled: () => R.value,
+			multiple: () => y.multiple,
+			limits: () => ({
+				accept: y.accept,
+				maxSize: y.maxSize,
+				maxFiles: y.maxFiles,
+				maxTotalSize: y.maxTotalSize
+			}),
+			onReject: (e) => P("reject", e),
+			onChange: (e) => P("change", e)
+		}), V = S(null), H = S(null), U = d(() => !y.showBrowse), Le = d(() => y.preview !== !1 && F.value.length > 0), Re = {
+			image: le,
+			pdf: ue,
+			audio: ae,
+			video: de,
+			archive: ce,
+			spreadsheet: c,
+			code: oe,
+			file: se
+		}, W = (e) => y.typeIcons?.[e] ?? Re[e];
+		function ze(e) {
+			!U.value && e.target.closest("button") || B();
+		}
+		let { dragging: Be, onDragEnter: G, onDragOver: K, onDragLeave: q, onDrop: J } = re(() => R.value, Fe);
+		function Y() {
+			let e = V.value;
+			return e ? e.matches("button") ? e : e.querySelector("button") : null;
+		}
+		async function X(e) {
+			let t = F.value[e];
+			if (!t || !R.value) return;
+			F.value = F.value.filter((t, n) => n !== e), Ie(), P("remove", t, e), P("change", F.value), await pe();
+			let n = H.value?.querySelectorAll(".v-file-picker-item") ?? [];
+			(n[Math.min(e, n.length - 1)]?.querySelector("button") ?? Y())?.focus();
+		}
+		let Z = ye(/* @__PURE__ */ new Map()), Ve = (e) => e.type.startsWith("image/");
+		function Q() {
+			let e = new Set(y.thumbnails && y.preview !== !1 ? F.value.filter(Ve) : []);
+			for (let [t, n] of Z) e.has(t) || (URL.revokeObjectURL(n), Z.delete(t));
+			for (let t of e) Z.has(t) || Z.set(t, URL.createObjectURL(t));
+		}
+		function He(e) {
+			let t = Z.get(e);
+			t && (URL.revokeObjectURL(t), Z.delete(e));
+		}
+		ve(Q), D([
+			F,
+			() => y.thumbnails,
+			() => y.preview
+		], Q, { deep: !0 }), _e(() => {
+			for (let e of Z.values()) URL.revokeObjectURL(e);
+			Z.clear();
+		});
+		function $(e, t) {
+			let n = l(e);
+			return {
+				file: e,
+				index: t,
+				kind: n,
+				thumbnail: Z.get(e),
+				icon: W(n),
+				sizeText: o(e.size, L.value),
+				remove: () => X(t)
+			};
+		}
+		return s({
+			focus: (e) => Y()?.focus(e),
+			open: B
+		}), (e, t) => (x(), m("div", {
+			class: me(["v-file-picker", T(ke)]),
+			style: ge(T(Ae)),
+			"data-preview": a.preview || void 0,
+			"data-disabled": a.disabled ? "" : void 0,
+			"data-readonly": a.readonly ? "" : void 0,
+			"data-dragging": T(Be) ? "" : void 0,
+			onDragenter: t[1] ||= (...e) => T(G) && T(G)(...e),
+			onDragover: t[2] ||= (...e) => T(K) && T(K)(...e),
+			onDragleave: t[3] ||= (...e) => T(q) && T(q)(...e),
+			onDrop: t[4] ||= (...e) => T(J) && T(J)(...e)
+		}, [h("input", b(T(Ne), {
+			ref_key: "fileEl",
+			ref: Me,
+			type: "file",
+			class: "v-file-picker-native",
+			tabindex: "-1",
+			"aria-hidden": "true",
+			accept: a.accept,
+			multiple: a.multiple || void 0,
+			disabled: a.disabled || void 0,
+			onChange: t[0] ||= (...e) => T(z) && T(z)(...e)
+		}), null, 16, A), h("div", j, [(x(), f(xe(U.value ? "button" : "div"), b(T(Pe), {
+			ref_key: "zoneEl",
+			ref: V,
+			class: "v-file-picker-zone",
+			type: U.value ? "button" : void 0,
+			disabled: U.value && !R.value ? !0 : void 0,
+			onClick: ze
+		}), {
+			default: O(() => [
+				h("span", M, [C(e.$slots, "icon", {}, () => [_(n, he(fe(T(i)(a.icon))), null, 16)])]),
+				_(r, {
+					as: "span",
+					variant: "subtitle",
+					class: "v-file-picker-title"
+				}, {
+					default: O(() => [C(e.$slots, "title", {}, () => [g(w(a.title), 1)])]),
+					_: 3
+				}),
+				a.subtitle || e.$slots.subtitle ? (x(), f(r, {
+					key: 0,
+					as: "span",
+					variant: "body-sm",
+					class: "v-file-picker-subtitle"
+				}, {
+					default: O(() => [C(e.$slots, "subtitle", {}, () => [g(w(a.subtitle), 1)])]),
+					_: 3
+				})) : p("", !0),
+				a.showBrowse ? (x(), m(u, { key: 1 }, [h("span", Se, w(T(I).filePicker.or), 1), C(e.$slots, "browse", {
+					open: T(B),
+					disabled: !R.value
+				}, () => [_(ee, {
+					class: "v-file-picker-browse",
+					variant: "outline",
+					tone: "neutral",
+					disabled: !R.value,
+					onClick: T(B)
+				}, {
+					default: O(() => [g(w(a.browseLabel ?? T(I).filePicker.browse), 1)]),
+					_: 1
+				}, 8, ["disabled", "onClick"])])], 64)) : p("", !0)
+			]),
+			_: 3
+		}, 16, ["type", "disabled"])), Le.value ? (x(), m("ul", {
+			key: 0,
+			ref_key: "listEl",
+			ref: H,
+			class: "v-file-picker-list",
+			"aria-label": T(I).filePicker.list
+		}, [(x(!0), m(u, null, be(F.value, (t, r) => (x(), m("li", {
+			key: `${r}-${t.name}`,
+			class: "v-file-picker-item"
+		}, [C(e.$slots, "item", b({ ref_for: !0 }, $(t, r)), () => [
+			h("span", we, [C(e.$slots, "thumbnail", b({ ref_for: !0 }, $(t, r)), () => [Z.get(t) ? (x(), m("img", {
+				key: 0,
+				class: "v-file-picker-image",
+				src: Z.get(t),
+				alt: "",
+				loading: "lazy",
+				decoding: "async",
+				onError: (e) => He(t)
+			}, null, 40, Te)) : (x(), f(n, b({
+				key: 1,
+				ref_for: !0
+			}, T(i)(W(T(l)(t)))), null, 16))])]),
+			h("span", Ee, [h("span", {
+				class: "v-file-picker-name",
+				title: t.name
+			}, w(t.name), 9, N), h("span", De, w(T(o)(t.size, T(L))), 1)]),
+			C(e.$slots, "remove", {
+				file: t,
+				index: r,
+				remove: () => X(r),
+				label: T(I).filePicker.remove(t.name)
+			}, () => [_(te, {
+				class: "v-file-picker-remove",
+				size: "sm",
+				icon: a.removeIcon,
+				label: T(I).filePicker.remove(t.name),
+				disabled: !R.value,
+				onClick: (e) => X(r)
+			}, null, 8, [
+				"icon",
+				"label",
+				"disabled",
+				"onClick"
+			])])
+		])]))), 128))], 8, Ce)) : p("", !0)])], 46, k));
+	}
+});
+//#endregion
+export { P as default };
+
+//# sourceMappingURL=VFilePicker.vue_vue_type_script_setup_true_lang.js.map