vectis-ui 0.1.0

package/dist/components/VFileInput/VFileInput.d.ts

@@ -0,0 +1,156 @@
+import { IconSource } from '../VIcon/types.js';
+/** How the chosen files are shown inside the field when several are allowed. */
+export type FileInputDisplay = 'text' | 'chip';
+/** Why a file was turned away: its kind, its size, how many there already are, or the total. */
+export type FileInputRejectReason = 'type' | 'size' | 'count' | 'total-size';
+/** One file that was turned away, and the reason it was. */
+export interface FileInputRejection {
+    /** The file itself, so a message can name it. */
+    file: File;
+    /** What it fell foul of. */
+    reason: FileInputRejectReason;
+}
+interface FileInputProps {
+    /** Allows several files to be chosen. 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
+     * file DROPPED on the component — the attribute has no say over a drop.
+     */
+    accept?: string;
+    /**
+     * How the chosen files are shown: their names joined by commas, or one dismissible
+     * chip each. It only means something when several files are allowed; a single name is
+     * always text.
+     */
+    display?: FileInputDisplay;
+    /** 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 chosen at most. */
+    maxFiles?: number;
+    /** Shows how much has been chosen under the field: "3 files (1.2 MB)". */
+    counter?: boolean;
+    /** The icon at the end of the field, which opens the file dialog. */
+    attachIcon?: IconSource;
+    /** Accepts files dropped onto the component, as well as chosen through the dialog. */
+    droppable?: boolean;
+    /** The height of the field: 32, 40 or 48 pixels. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Takes 4px off the height, leaving the padding, the text and the icons as they are. */
+    compact?: boolean;
+    /** Makes the field unusable, greyed out through the colour tokens. */
+    disabled?: boolean;
+    /**
+     * Shows what was chosen without allowing it to change: no dialog, no drop, no removal.
+     */
+    readonly?: boolean;
+    /**
+     * Marks the field as invalid — for a rule of your own, since nothing here is checked
+     * by the browser.
+     */
+    invalid?: boolean;
+    /** The label above the field, tied to it so that clicking it focuses the field. */
+    label?: string;
+    /**
+     * A line of help under the field, to the left of the counter. It is tied to the field
+     * for assistive technology.
+     */
+    hint?: string;
+    /**
+     * What the field says while nothing is chosen. It falls back to the design system
+     * dictionary.
+     */
+    placeholder?: string;
+    /** Offers a cross that empties the selection. */
+    clearable?: boolean;
+}
+type __VLS_Props = FileInputProps;
+type __VLS_Slots = {
+    /**
+     * Replaces the chip standing for one file.
+     *
+     * Three of the values it receives are what make it usable without regressions:
+     * `label` is the name already shortened in the MIDDLE so that its extension survives,
+     * `remove` is what takes the file out — without it the file could no longer be removed
+     * at all — and the size and density are the ones worked out to sit inside the field,
+     * which cannot be guessed from outside.
+     */
+    chip?(props: {
+        file: File;
+        index: number;
+        label: string;
+        remove: () => void;
+        size: 'xs' | 'sm';
+        compact: boolean;
+    }): unknown;
+    /**
+     * Replaces the counter under the field. `text` is the sentence already built and
+     * translated; the count and the total size are there for a wording of your own.
+     */
+    counter?(props: {
+        count: number;
+        size: number;
+        text: 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 visible field. */
+    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, {
+    clear: () => any;
+    "update:modelValue": (value: File[]) => any;
+    change: (files: File[]) => any;
+    reject: (rejection: FileInputRejection) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClear?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: File[]) => any) | undefined;
+    onChange?: ((files: File[]) => any) | undefined;
+    onReject?: ((rejection: FileInputRejection) => any) | undefined;
+}>, {
+    label: string;
+    placeholder: string;
+    size: "sm" | "md" | "lg";
+    display: FileInputDisplay;
+    compact: boolean;
+    disabled: boolean;
+    multiple: boolean;
+    invalid: boolean;
+    readonly: boolean;
+    hint: string;
+    clearable: boolean;
+    counter: boolean;
+    accept: string;
+    maxSize: number;
+    maxTotalSize: number;
+    maxFiles: number;
+    attachIcon: IconSource;
+    droppable: 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/components/VFileInput/VFileInput.js

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

package/dist/components/VFileInput/VFileInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VFileInput.js","names":[],"sources":["../../../src/components/VFileInput/VFileInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * Choosing files, presented as an ordinary form field: a read-only text field showing\n * what was picked, with the real file input hidden behind it. It is the shape of a\n * read-only date picker, without the panel.\n *\n * What was chosen is reported as a plain list of files, which is what lets a consumer\n * build whatever preview they like from it.\n *\n * The JavaScript here is imposed by the platform rather than chosen. A file dialog opens\n * ONLY from a real click on a real file input, and the list of files it holds cannot be\n * written from a template — so the visible field can never BE the native control, and\n * that control can only ever be a SOURCE of files, never a mirror of the value.\n *\n * Everything else follows from those two facts: the clicks and keys relayed to the\n * hidden input, the reset of that input after every change — without which the same file\n * cannot be picked twice in a row — and the screening of incoming files in code, since\n * the `accept` attribute has no say whatsoever over a drop.\n */\nimport { computed, ref, useId, watchEffect } from 'vue'\n\nimport VChip from '../VChip/VChip.vue'\nimport { attach_file as attachFileIcon } from '../VIcon/icons/attach_file'\nimport type { IconSource } from '../VIcon/types'\nimport VInput from '../VInput/VInput.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 { chipScaleFor } from '../../utils/chip'\nimport { isDev } from '../../utils/env'\nimport { formatBytes } from '../../utils/file'\nimport { truncateMiddle } from './truncate'\n\n/** How the chosen files are shown inside the field when several are allowed. */\nexport type FileInputDisplay = 'text' | 'chip'\n\n/** Why a file was turned away: its kind, its size, how many there already are, or the total. */\nexport type FileInputRejectReason = 'type' | 'size' | 'count' | 'total-size'\n\n/** One file that was turned away, and the reason it was. */\nexport interface FileInputRejection {\n  /** The file itself, so a message can name it. */\n  file: File\n  /** What it fell foul of. */\n  reason: FileInputRejectReason\n}\n\ninterface FileInputProps {\n  /** Allows several files to be chosen. 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   * file DROPPED on the component — the attribute has no say over a drop.\n   */\n  accept?: string\n  /**\n   * How the chosen files are shown: their names joined by commas, or one dismissible\n   * chip each. It only means something when several files are allowed; a single name is\n   * always text.\n   */\n  display?: FileInputDisplay\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 chosen at most. */\n  maxFiles?: number\n  /** Shows how much has been chosen under the field: \"3 files (1.2 MB)\". */\n  counter?: boolean\n  /** The icon at the end of the field, which opens the file dialog. */\n  attachIcon?: IconSource\n  /** Accepts files dropped onto the component, as well as chosen through the dialog. */\n  droppable?: boolean\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: 'sm' | 'md' | 'lg'\n  /** Takes 4px off the height, leaving the padding, the text and the icons as they are. */\n  compact?: boolean\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows what was chosen without allowing it to change: no dialog, no drop, no removal.\n   */\n  readonly?: boolean\n  /**\n   * Marks the field as invalid — for a rule of your own, since nothing here is checked\n   * by the browser.\n   */\n  invalid?: boolean\n  /** The label above the field, tied to it so that clicking it focuses the field. */\n  label?: string\n  /**\n   * A line of help under the field, to the left of the counter. It is tied to the field\n   * for assistive technology.\n   */\n  hint?: string\n  /**\n   * What the field says while nothing is chosen. It falls back to the design system\n   * dictionary.\n   */\n  placeholder?: string\n  /** Offers a cross that empties the selection. */\n  clearable?: boolean\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<FileInputProps>(), {\n  multiple: false,\n  accept: undefined,\n  display: 'text',\n  maxSize: undefined,\n  maxTotalSize: undefined,\n  maxFiles: undefined,\n  counter: false,\n  attachIcon: () => attachFileIcon,\n  droppable: true,\n  size: 'md',\n  compact: false,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  label: undefined,\n  hint: undefined,\n  placeholder: undefined,\n  // On by default, unlike an ordinary field: what is in a picker cannot be erased by\n  // typing, so without the cross there would be no way to empty it — the same reasoning\n  // as in a read-only date picker.\n  clearable: true,\n})\n\nconst emit = defineEmits<{\n  /** The reader changed the selection — added something, removed something, cleared it. */\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: FileInputRejection]\n  /** The clear cross emptied the selection. */\n  clear: []\n}>()\n\ndefineSlots<{\n  /**\n   * Replaces the chip standing for one file.\n   *\n   * Three of the values it receives are what make it usable without regressions:\n   * `label` is the name already shortened in the MIDDLE so that its extension survives,\n   * `remove` is what takes the file out — without it the file could no longer be removed\n   * at all — and the size and density are the ones worked out to sit inside the field,\n   * which cannot be guessed from outside.\n   */\n  chip?(props: {\n    file: File\n    index: number\n    label: string\n    remove: () => void\n    size: 'xs' | 'sm'\n    compact: boolean\n  }): unknown\n  /**\n   * Replaces the counter under the field. `text` is the sentence already built and\n   * translated; the count and the total size are there for a wording of your own.\n   */\n  counter?(props: { count: number; size: number; text: 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\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 VFilePicker.\n *\n * Here, the bucket meant for \"the control the user deals with\" goes to the visible\n * field: that is what they see, focus and click, so a consumer's own `<label for>` has\n * to point at it. The description attribute is pulled out of that bucket, because this\n * component re-assembles it further down.\n */\nconst {\n  fileEl,\n  nativeAttrs,\n  controlAttrs: fieldAttrs,\n  acceptFiles,\n  onNativeChange,\n  openPicker,\n  resetNative,\n} = useFileField({\n  model,\n  forwardedAttrs,\n  enabled: () => !props.disabled && !props.readonly,\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  excludeFromControl: ['aria-describedby'],\n})\n\nconst inputRef = ref<InstanceType<typeof VInput> | null>(null)\n\n// Chips only mean something for a list: a single file always shows as plain text.\nconst resolvedDisplay = computed<FileInputDisplay>(() => (props.multiple ? props.display : 'text'))\n\nconst displayText = computed(() =>\n  resolvedDisplay.value === 'chip' ? '' : model.value.map((file) => file.name).join(', '),\n)\n\nconst placeholderText = computed(() =>\n  model.value.length > 0 ? undefined : (props.placeholder ?? m.value.fileInput.placeholder),\n)\n\n/*\n * Whether the clear cross is shown has to be answered EXPLICITLY here. The visible field\n * is read-only, and a read-only field hides its cross by default — rightly so, since its\n * text cannot be edited. Here the value comes from the file dialog rather than from\n * typing, so there is something to clear all the same.\n */\nconst canClear = computed(\n  () => props.clearable && !props.disabled && !props.readonly && model.value.length > 0,\n)\n\n// @a11y @devwarn\n/*\n * The icon disappears along with what it offers: a read-only field opens no dialog, so\n * an icon inviting one would be a lie — the same rule VDateInput follows for its\n * calendar.\n *\n * TRAP — its LABEL stays defined at all times, even when no icon is rendered. The helper\n * that detects a click handler on an icon warns AT SETUP if one is attached without a\n * label, and it has no way of knowing whether an icon exists.\n */\nconst endIcon = computed<IconSource | undefined>(() =>\n  props.readonly ? undefined : props.attachIcon,\n)\n\nconst totalSize = computed(() => model.value.reduce((sum, file) => sum + file.size, 0))\n\n/*\n * The counter is assembled from three sources: the WORD comes from the dictionary, since\n * it is language; the SIZE is formatted by the platform, which knows the local\n * conventions; and the parentheses come from neither, being punctuation every language\n * shares — the same boundary VBadge's \"99+\" falls on.\n *\n * With nothing chosen it states the count alone: \"0 files ()\" would be noise.\n */\nconst counterText = computed(() => {\n  const word = m.value.fileInput.files(model.value.length)\n  return model.value.length === 0 ? word : `${word} (${formatBytes(totalSize.value, locale.value)})`\n})\n\nconst hintId = useId()\nconst counterId = useId()\n\n// @a11y\n/*\n * What describes the field for a screen reader is a LIST of references, assembled here\n * rather than by VInput: the hint belongs to OUR row under the field, VInput having no\n * such row — its own counter sits inside the field.\n *\n * The counter is deliberately part of that list, unlike in VTextarea. When the files are\n * shown as chips the field's own text is EMPTY, and the counter is then the only spoken\n * summary of what has been chosen.\n */\nconst describedBy = computed(\n  () =>\n    [\n      attrs['aria-describedby'] as string | undefined,\n      props.hint ? hintId : undefined,\n      props.counter ? counterId : undefined,\n    ]\n      .filter(Boolean)\n      .join(' ') || undefined,\n)\n\n// The size, the density and the HEIGHT of the chips sitting inside the field, worked out\n// once in `utils/chip.ts` and shared with VCombobox. The height is set inline rather than\n// restated as a table of CSS rules: it belongs to the chips' own subtree, out of the\n// field's reach, and the field has to force its input to that same height or it grows\n// when focused.\nconst chipScale = computed(() => chipScaleFor(props.size, props.compact))\n\n/**\n * What a chip shows for a file. The name is shortened in the MIDDLE rather than cut off\n * at the end, for two reasons.\n *\n * The chips WRAP, so there is no line for a long name to overflow: left whole it would\n * simply push the field onto two or three rows. And cutting the middle preserves the\n * extension, which is what tells the reader what kind of file it is — an ellipsis at the\n * end drops it first.\n *\n * The full name is never lost: the removal button is named with it, and the chip carries\n * it as a tooltip whenever the label was actually shortened.\n */\nconst chipLabel = (file: File) => truncateMiddle(file.name)\n\nfunction onControlClick(event: MouseEvent) {\n  // The field's own buttons already handle their clicks, and the click also reaches the\n  // field itself. Without this guard the attach icon would open the dialog TWICE, and\n  // the clear cross would reopen it immediately after emptying the selection.\n  if ((event.target as HTMLElement).closest('button')) return\n  openPicker()\n}\n\nfunction onFieldKeydown(event: KeyboardEvent) {\n  if (event.key !== 'Enter' && event.key !== ' ') return\n  // Cancelling the default on Enter also stops the form from being submitted: a\n  // read-only text field is still a field, and Enter in one submits the form around it.\n  event.preventDefault()\n  openPicker()\n}\n\nfunction removeAt(index: number) {\n  model.value = model.value.filter((_, i) => i !== index)\n  resetNative()\n  emit('change', model.value)\n  // The removal button disappears along with its chip, so the focus would fall back to\n  // the page body. Unlike the date and time pickers, nothing here opens on focus, so\n  // this needs no guard against re-entering.\n  inputRef.value?.focus()\n}\n\n/**\n * Empties the selection, and the hidden input with it — without that reset the same file\n * could not be chosen again straight afterwards.\n */\nfunction clearValue() {\n  model.value = []\n  resetNative()\n  emit('clear')\n  emit('change', model.value)\n}\n\n/* Files may be dropped on the component itself; there is no separate drop area here —\n   that is what VFilePicker is for. */\nconst { dragging, onDragEnter, onDragOver, onDragLeave, onDrop } = useFileDrop(\n  () => props.droppable && !props.disabled && !props.readonly,\n  acceptFiles,\n)\n\n// @devwarn\nif (isDev) {\n  watchEffect(() => {\n    if (props.display === 'chip' && !props.multiple)\n      console.warn(\n        '[VFileInput] display=\"chip\" ignored without `multiple`: a single file shows as text.',\n      )\n    if (props.maxFiles !== undefined && !props.multiple)\n      console.warn(\n        '[VFileInput] `maxFiles` ignored without `multiple`: single mode already caps at one file.',\n      )\n    if (attrs.required !== undefined)\n      console.warn(\n        '[VFileInput] `required` lands on the hidden file input, which is not focusable: the browser blocks submission with no visible message. Validate the v-model yourself and use the `invalid` prop.',\n      )\n  })\n}\n\ndefineExpose({\n  /** Moves the focus to the visible field. */\n  focus: (options?: FocusOptions) => inputRef.value?.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-input\"\n    :class=\"rootClass\"\n    :style=\"[{ '--chip-height': chipScale.height }, rootStyle]\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-display=\"resolvedDisplay\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n    :data-dragging=\"dragging ? '' : undefined\"\n    :data-can-clear=\"canClear ? '' : 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-input-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    <div class=\"v-file-input-control\" @click=\"onControlClick\">\n      <VInput\n        v-bind=\"fieldAttrs\"\n        ref=\"inputRef\"\n        :model-value=\"displayText\"\n        readonly\n        :label=\"label\"\n        :placeholder=\"placeholderText\"\n        :size=\"size\"\n        :compact=\"compact\"\n        :disabled=\"disabled\"\n        :invalid=\"invalid\"\n        :clearable=\"clearable\"\n        :clear-visible=\"canClear\"\n        :clear-label=\"m.fileInput.clear\"\n        :icon-end=\"endIcon\"\n        :icon-end-label=\"m.fileInput.attach\"\n        :aria-describedby=\"describedBy\"\n        @click:icon-end=\"openPicker\"\n        @clear=\"clearValue\"\n        @keydown=\"onFieldKeydown\"\n      >\n        <template v-if=\"resolvedDisplay === 'chip'\" #start>\n          <template v-for=\"(file, index) in model\" :key=\"`${index}-${file.name}`\">\n            <slot\n              name=\"chip\"\n              :file=\"file\"\n              :index=\"index\"\n              :label=\"chipLabel(file)\"\n              :remove=\"() => removeAt(index)\"\n              :size=\"chipScale.size\"\n              :compact=\"chipScale.compact\"\n            >\n              <VChip\n                tone=\"accent\"\n                :size=\"chipScale.size\"\n                :compact=\"chipScale.compact\"\n                :dismissible=\"!readonly && !disabled\"\n                :dismiss-label=\"m.fileInput.remove(file.name)\"\n                :disabled=\"disabled\"\n                :title=\"chipLabel(file) === file.name ? undefined : file.name\"\n                @dismiss=\"removeAt(index)\"\n                >{{ chipLabel(file) }}</VChip\n              >\n            </slot>\n          </template>\n        </template>\n      </VInput>\n    </div>\n\n    <div v-if=\"hint || counter\" class=\"v-file-input-meta\">\n      <VTypography\n        v-if=\"hint\"\n        :id=\"hintId\"\n        variant=\"caption\"\n        tone=\"muted\"\n        class=\"v-file-input-hint\"\n      >\n        {{ hint }}\n      </VTypography>\n      <span v-if=\"counter\" :id=\"counterId\" class=\"v-file-input-counter\">\n        <slot name=\"counter\" :count=\"model.length\" :size=\"totalSize\" :text=\"counterText\">\n          {{ counterText }}\n        </slot>\n      </span>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /* Positioned so the hidden file input, which has no size at all, has something to be\n     placed against. */\n  .v-file-input {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    width: 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 field. Taking it\n     out of the tab order and hiding it from screen readers, in the template, is what\n     leaves the visible field as the single stop and the single announcement. */\n  .v-file-input-native {\n    position: absolute;\n    inline-size: 0;\n    block-size: 0;\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  .v-file-input:not([data-disabled]):not([data-readonly]) .v-file-input-control,\n  .v-file-input:not([data-disabled]):not([data-readonly])[data-display='text'] .v-input-control {\n    cursor: pointer;\n  }\n\n  /* An ellipsis DOES work on an input, and a read-only one never scrolls by itself, so a\n     long list of names is simply cut short. No tooltip is added for the rest: it would be\n     announced as a description repeating the value the field already shows, and the\n     complete list is what the model is for. */\n  .v-file-input[data-display='text'] .v-input-control {\n    text-overflow: ellipsis;\n  }\n\n  /* While a file is being dragged over it, the field is highlighted by redefining the\n     very variable VInput uses for its own border colour — so the two can never disagree.\n     The selector is one step more specific than VInput's, which is what makes it win\n     whatever order the two sheets end up in. */\n  .v-file-input[data-dragging] .v-input-field {\n    --field-border-color: var(--vectis-color-accent);\n\n    background: var(--vectis-color-accent-surface);\n  }\n\n  /* Shown as chips, the field holds them and lets them WRAP onto several rows, so it\n     grows instead of scrolling.\n\n     Two things have to be forced for that to hold together. The input inside is given\n     the chips' own height rather than the full height it inherits, or its natural height\n     would stretch every row it shares. And the padding at the end reserves exactly the\n     room the icons take, since those are lifted out of the wrapping flow just below.\n\n     That reservation is written as what the flow itself produces when the files are\n     shown as text and nothing is lifted out: one glyph's width per action from the\n     field's padding, one gap between two of them. It reads from the same two variables\n     as the insets further down, so the room reserved and the glyphs it protects cannot\n     drift apart. */\n  .v-file-input[data-display='chip'] .v-input-field {\n    position: relative;\n    flex-wrap: wrap;\n    height: auto;\n    min-height: var(--control-height);\n    padding-block: var(--vectis-space-1);\n    padding-inline-end: calc(\n      var(--control-padding-inline-field) + var(--vectis-icon-size) + var(--control-gap)\n    );\n  }\n\n  .v-file-input[data-display='chip'][data-can-clear] .v-input-field {\n    padding-inline-end: calc(\n      var(--control-padding-inline-field) + 2 * var(--vectis-icon-size) + 2 * var(--control-gap)\n    );\n  }\n\n  .v-file-input[data-display='chip'] .v-input-control {\n    height: var(--chip-height);\n  }\n\n  /* The two icons are lifted out of the wrapping flow — the same recipe VCombobox uses —\n     so that they stay pinned to the end of the field and vertically centred whatever the\n     chips do. VInput renders the clear cross FIRST and the end icon after it, which is\n     why the icon has to be addressed by excluding the cross. */\n  .v-file-input[data-display='chip'] .v-input-clear,\n  .v-file-input[data-display='chip'] .v-input-action:not(.v-input-clear) {\n    position: absolute;\n    top: 50%;\n    translate: 0 -50%;\n  }\n\n  .v-file-input[data-display='chip'] .v-input-action:not(.v-input-clear) {\n    inset-inline-end: var(--control-padding-inline-field);\n  }\n\n  /* This is the ONE place where the spacing between the two icons has to be written by\n     hand. Everywhere else the field's own flow produces it for free, and the two must\n     agree, or the same component would show two different gaps depending on how the\n     files are displayed.\n\n     So it is written as exactly what that flow produces: the end icon occupies one\n     glyph's width from the field's padding, then one gap separates the two.\n\n     TRAP — this reads in GLYPHS and not in buttons. VInput gives its inner buttons a\n     negative margin equal to half the difference between the two, which makes an inset\n     land on the glyph's edge rather than on the button's. Measuring in button widths\n     instead pushes the cross a whole gap too far, with nothing anywhere to signal it. */\n  .v-file-input[data-display='chip'] .v-input-clear {\n    inset-inline-end: calc(\n      var(--control-padding-inline-field) + var(--vectis-icon-size) + var(--control-gap)\n    );\n  }\n\n  .v-file-input-meta {\n    display: flex;\n    align-items: baseline;\n    gap: var(--vectis-space-2);\n  }\n\n  /* The counter stays styled locally: tabular-nums is not a typographic role.\n     No overflow state — an over-limit file never enters the model, so the\n     counter cannot overflow. */\n  .v-file-input-counter {\n    margin-inline-start: auto;\n    font-size: var(--vectis-text-caption-size);\n    color: var(--vectis-color-text-muted);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .v-file-input[data-disabled] .v-file-input-hint,\n  .v-file-input[data-disabled] .v-file-input-counter {\n    color: var(--vectis-color-text-subtle);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VFileInput/VFileInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,244 @@
+import { useLocale as e, useMessages as t } from "../../i18n/state.js";
+import n from "../VTypography/VTypography.js";
+import { useRootAttrs as ee } from "../../composables/useRootAttrs.js";
+import te from "../VInput/VInput.js";
+import ne from "../VChip/VChip.js";
+import { chipScaleFor as r } from "../../utils/chip.js";
+import { attach_file as i } from "../VIcon/icons/attach_file.js";
+import { useFileDrop as re } from "../../composables/useFileDrop.js";
+import { formatBytes as ie } from "../../utils/file.js";
+import { useFileField as ae } from "../../composables/useFileField.js";
+import { truncateMiddle as oe } from "./truncate.js";
+import { Fragment as se, computed as a, createBlock as ce, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createSlots as le, createTextVNode as l, createVNode as u, defineComponent as d, mergeModels as f, mergeProps as p, normalizeClass as ue, normalizeStyle as m, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, unref as b, useId as x, useModel as de, withCtx as S } from "vue";
+//#region src/components/VFileInput/VFileInput.vue?vue&type=script&setup=true&lang.ts
+var fe = [
+	"data-size",
+	"data-compact",
+	"data-display",
+	"data-disabled",
+	"data-readonly",
+	"data-dragging",
+	"data-can-clear"
+], pe = [
+	"accept",
+	"multiple",
+	"disabled"
+], me = {
+	key: 0,
+	class: "v-file-input-meta"
+}, he = ["id"], C = /*@__PURE__*/ d({
+	inheritAttrs: !1,
+	__name: "VFileInput",
+	props: /*@__PURE__*/ f({
+		multiple: {
+			type: Boolean,
+			default: !1
+		},
+		accept: { default: void 0 },
+		display: { default: "text" },
+		maxSize: { default: void 0 },
+		maxTotalSize: { default: void 0 },
+		maxFiles: { default: void 0 },
+		counter: {
+			type: Boolean,
+			default: !1
+		},
+		attachIcon: { default: () => i },
+		droppable: {
+			type: Boolean,
+			default: !0
+		},
+		size: { default: "md" },
+		compact: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		label: { default: void 0 },
+		hint: { default: void 0 },
+		placeholder: { default: void 0 },
+		clearable: {
+			type: Boolean,
+			default: !0
+		}
+	}, {
+		modelValue: { default: () => [] },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ f([
+		"change",
+		"reject",
+		"clear"
+	], ["update:modelValue"]),
+	setup(i, { expose: d, emit: f }) {
+		let C = i, w = f, T = de(i, "modelValue"), { attrs: E, rootClass: D, rootStyle: O, forwardedAttrs: k } = ee(), A = t(), j = e(), { fileEl: M, nativeAttrs: N, controlAttrs: P, acceptFiles: F, onNativeChange: I, openPicker: L, resetNative: R } = ae({
+			model: T,
+			forwardedAttrs: k,
+			enabled: () => !C.disabled && !C.readonly,
+			multiple: () => C.multiple,
+			limits: () => ({
+				accept: C.accept,
+				maxSize: C.maxSize,
+				maxFiles: C.maxFiles,
+				maxTotalSize: C.maxTotalSize
+			}),
+			onReject: (e) => w("reject", e),
+			onChange: (e) => w("change", e),
+			excludeFromControl: ["aria-describedby"]
+		}), z = g(null), B = a(() => C.multiple ? C.display : "text"), ge = a(() => B.value === "chip" ? "" : T.value.map((e) => e.name).join(", ")), _e = a(() => T.value.length > 0 ? void 0 : C.placeholder ?? A.value.fileInput.placeholder), V = a(() => C.clearable && !C.disabled && !C.readonly && T.value.length > 0), ve = a(() => C.readonly ? void 0 : C.attachIcon), H = a(() => T.value.reduce((e, t) => e + t.size, 0)), U = a(() => {
+			let e = A.value.fileInput.files(T.value.length);
+			return T.value.length === 0 ? e : `${e} (${ie(H.value, j.value)})`;
+		}), W = x(), G = x(), K = a(() => [
+			E["aria-describedby"],
+			C.hint ? W : void 0,
+			C.counter ? G : void 0
+		].filter(Boolean).join(" ") || void 0), q = a(() => r(C.size, C.compact)), J = (e) => oe(e.name);
+		function ye(e) {
+			e.target.closest("button") || L();
+		}
+		function be(e) {
+			e.key !== "Enter" && e.key !== " " || (e.preventDefault(), L());
+		}
+		function Y(e) {
+			T.value = T.value.filter((t, n) => n !== e), R(), w("change", T.value), z.value?.focus();
+		}
+		function xe() {
+			T.value = [], R(), w("clear"), w("change", T.value);
+		}
+		let { dragging: Se, onDragEnter: X, onDragOver: Z, onDragLeave: Q, onDrop: $ } = re(() => C.droppable && !C.disabled && !C.readonly, F);
+		return d({
+			focus: (e) => z.value?.focus(e),
+			open: L
+		}), (e, t) => (h(), s("div", {
+			class: ue(["v-file-input", b(D)]),
+			style: m([{ "--chip-height": q.value.height }, b(O)]),
+			"data-size": i.size,
+			"data-compact": i.compact ? "" : void 0,
+			"data-display": B.value,
+			"data-disabled": i.disabled ? "" : void 0,
+			"data-readonly": i.readonly ? "" : void 0,
+			"data-dragging": b(Se) ? "" : void 0,
+			"data-can-clear": V.value ? "" : void 0,
+			onDragenter: t[1] ||= (...e) => b(X) && b(X)(...e),
+			onDragover: t[2] ||= (...e) => b(Z) && b(Z)(...e),
+			onDragleave: t[3] ||= (...e) => b(Q) && b(Q)(...e),
+			onDrop: t[4] ||= (...e) => b($) && b($)(...e)
+		}, [
+			c("input", p(b(N), {
+				ref_key: "fileEl",
+				ref: M,
+				type: "file",
+				class: "v-file-input-native",
+				tabindex: "-1",
+				"aria-hidden": "true",
+				accept: i.accept,
+				multiple: i.multiple || void 0,
+				disabled: i.disabled || void 0,
+				onChange: t[0] ||= (...e) => b(I) && b(I)(...e)
+			}), null, 16, pe),
+			c("div", {
+				class: "v-file-input-control",
+				onClick: ye
+			}, [u(te, p(b(P), {
+				ref_key: "inputRef",
+				ref: z,
+				"model-value": ge.value,
+				readonly: "",
+				label: i.label,
+				placeholder: _e.value,
+				size: i.size,
+				compact: i.compact,
+				disabled: i.disabled,
+				invalid: i.invalid,
+				clearable: i.clearable,
+				"clear-visible": V.value,
+				"clear-label": b(A).fileInput.clear,
+				"icon-end": ve.value,
+				"icon-end-label": b(A).fileInput.attach,
+				"aria-describedby": K.value,
+				"onClick:iconEnd": b(L),
+				onClear: xe,
+				onKeydown: be
+			}), le({ _: 2 }, [B.value === "chip" ? {
+				name: "start",
+				fn: S(() => [(h(!0), s(se, null, _(T.value, (t, n) => v(e.$slots, "chip", {
+					file: t,
+					index: n,
+					label: J(t),
+					remove: () => Y(n),
+					size: q.value.size,
+					compact: q.value.compact
+				}, () => [u(ne, {
+					tone: "accent",
+					size: q.value.size,
+					compact: q.value.compact,
+					dismissible: !i.readonly && !i.disabled,
+					"dismiss-label": b(A).fileInput.remove(t.name),
+					disabled: i.disabled,
+					title: J(t) === t.name ? void 0 : t.name,
+					onDismiss: (e) => Y(n)
+				}, {
+					default: S(() => [l(y(J(t)), 1)]),
+					_: 2
+				}, 1032, [
+					"size",
+					"compact",
+					"dismissible",
+					"dismiss-label",
+					"disabled",
+					"title",
+					"onDismiss"
+				])], void 0, `${n}-${t.name}`)), 128))]),
+				key: "0"
+			} : void 0]), 1040, [
+				"model-value",
+				"label",
+				"placeholder",
+				"size",
+				"compact",
+				"disabled",
+				"invalid",
+				"clearable",
+				"clear-visible",
+				"clear-label",
+				"icon-end",
+				"icon-end-label",
+				"aria-describedby",
+				"onClick:iconEnd"
+			])]),
+			i.hint || i.counter ? (h(), s("div", me, [i.hint ? (h(), ce(n, {
+				key: 0,
+				id: b(W),
+				variant: "caption",
+				tone: "muted",
+				class: "v-file-input-hint"
+			}, {
+				default: S(() => [l(y(i.hint), 1)]),
+				_: 1
+			}, 8, ["id"])) : o("", !0), i.counter ? (h(), s("span", {
+				key: 1,
+				id: b(G),
+				class: "v-file-input-counter"
+			}, [v(e.$slots, "counter", {
+				count: T.value.length,
+				size: H.value,
+				text: U.value
+			}, () => [l(y(U.value), 1)])], 8, he)) : o("", !0)])) : o("", !0)
+		], 46, fe));
+	}
+});
+//#endregion
+export { C as default };
+
+//# sourceMappingURL=VFileInput.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VFileInput/VFileInput.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VFileInput.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VFileInput/VFileInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * Choosing files, presented as an ordinary form field: a read-only text field showing\n * what was picked, with the real file input hidden behind it. It is the shape of a\n * read-only date picker, without the panel.\n *\n * What was chosen is reported as a plain list of files, which is what lets a consumer\n * build whatever preview they like from it.\n *\n * The JavaScript here is imposed by the platform rather than chosen. A file dialog opens\n * ONLY from a real click on a real file input, and the list of files it holds cannot be\n * written from a template — so the visible field can never BE the native control, and\n * that control can only ever be a SOURCE of files, never a mirror of the value.\n *\n * Everything else follows from those two facts: the clicks and keys relayed to the\n * hidden input, the reset of that input after every change — without which the same file\n * cannot be picked twice in a row — and the screening of incoming files in code, since\n * the `accept` attribute has no say whatsoever over a drop.\n */\nimport { computed, ref, useId, watchEffect } from 'vue'\n\nimport VChip from '../VChip/VChip.vue'\nimport { attach_file as attachFileIcon } from '../VIcon/icons/attach_file'\nimport type { IconSource } from '../VIcon/types'\nimport VInput from '../VInput/VInput.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 { chipScaleFor } from '../../utils/chip'\nimport { isDev } from '../../utils/env'\nimport { formatBytes } from '../../utils/file'\nimport { truncateMiddle } from './truncate'\n\n/** How the chosen files are shown inside the field when several are allowed. */\nexport type FileInputDisplay = 'text' | 'chip'\n\n/** Why a file was turned away: its kind, its size, how many there already are, or the total. */\nexport type FileInputRejectReason = 'type' | 'size' | 'count' | 'total-size'\n\n/** One file that was turned away, and the reason it was. */\nexport interface FileInputRejection {\n  /** The file itself, so a message can name it. */\n  file: File\n  /** What it fell foul of. */\n  reason: FileInputRejectReason\n}\n\ninterface FileInputProps {\n  /** Allows several files to be chosen. 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   * file DROPPED on the component — the attribute has no say over a drop.\n   */\n  accept?: string\n  /**\n   * How the chosen files are shown: their names joined by commas, or one dismissible\n   * chip each. It only means something when several files are allowed; a single name is\n   * always text.\n   */\n  display?: FileInputDisplay\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 chosen at most. */\n  maxFiles?: number\n  /** Shows how much has been chosen under the field: \"3 files (1.2 MB)\". */\n  counter?: boolean\n  /** The icon at the end of the field, which opens the file dialog. */\n  attachIcon?: IconSource\n  /** Accepts files dropped onto the component, as well as chosen through the dialog. */\n  droppable?: boolean\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: 'sm' | 'md' | 'lg'\n  /** Takes 4px off the height, leaving the padding, the text and the icons as they are. */\n  compact?: boolean\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows what was chosen without allowing it to change: no dialog, no drop, no removal.\n   */\n  readonly?: boolean\n  /**\n   * Marks the field as invalid — for a rule of your own, since nothing here is checked\n   * by the browser.\n   */\n  invalid?: boolean\n  /** The label above the field, tied to it so that clicking it focuses the field. */\n  label?: string\n  /**\n   * A line of help under the field, to the left of the counter. It is tied to the field\n   * for assistive technology.\n   */\n  hint?: string\n  /**\n   * What the field says while nothing is chosen. It falls back to the design system\n   * dictionary.\n   */\n  placeholder?: string\n  /** Offers a cross that empties the selection. */\n  clearable?: boolean\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<FileInputProps>(), {\n  multiple: false,\n  accept: undefined,\n  display: 'text',\n  maxSize: undefined,\n  maxTotalSize: undefined,\n  maxFiles: undefined,\n  counter: false,\n  attachIcon: () => attachFileIcon,\n  droppable: true,\n  size: 'md',\n  compact: false,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  label: undefined,\n  hint: undefined,\n  placeholder: undefined,\n  // On by default, unlike an ordinary field: what is in a picker cannot be erased by\n  // typing, so without the cross there would be no way to empty it — the same reasoning\n  // as in a read-only date picker.\n  clearable: true,\n})\n\nconst emit = defineEmits<{\n  /** The reader changed the selection — added something, removed something, cleared it. */\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: FileInputRejection]\n  /** The clear cross emptied the selection. */\n  clear: []\n}>()\n\ndefineSlots<{\n  /**\n   * Replaces the chip standing for one file.\n   *\n   * Three of the values it receives are what make it usable without regressions:\n   * `label` is the name already shortened in the MIDDLE so that its extension survives,\n   * `remove` is what takes the file out — without it the file could no longer be removed\n   * at all — and the size and density are the ones worked out to sit inside the field,\n   * which cannot be guessed from outside.\n   */\n  chip?(props: {\n    file: File\n    index: number\n    label: string\n    remove: () => void\n    size: 'xs' | 'sm'\n    compact: boolean\n  }): unknown\n  /**\n   * Replaces the counter under the field. `text` is the sentence already built and\n   * translated; the count and the total size are there for a wording of your own.\n   */\n  counter?(props: { count: number; size: number; text: 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\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 VFilePicker.\n *\n * Here, the bucket meant for \"the control the user deals with\" goes to the visible\n * field: that is what they see, focus and click, so a consumer's own `<label for>` has\n * to point at it. The description attribute is pulled out of that bucket, because this\n * component re-assembles it further down.\n */\nconst {\n  fileEl,\n  nativeAttrs,\n  controlAttrs: fieldAttrs,\n  acceptFiles,\n  onNativeChange,\n  openPicker,\n  resetNative,\n} = useFileField({\n  model,\n  forwardedAttrs,\n  enabled: () => !props.disabled && !props.readonly,\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  excludeFromControl: ['aria-describedby'],\n})\n\nconst inputRef = ref<InstanceType<typeof VInput> | null>(null)\n\n// Chips only mean something for a list: a single file always shows as plain text.\nconst resolvedDisplay = computed<FileInputDisplay>(() => (props.multiple ? props.display : 'text'))\n\nconst displayText = computed(() =>\n  resolvedDisplay.value === 'chip' ? '' : model.value.map((file) => file.name).join(', '),\n)\n\nconst placeholderText = computed(() =>\n  model.value.length > 0 ? undefined : (props.placeholder ?? m.value.fileInput.placeholder),\n)\n\n/*\n * Whether the clear cross is shown has to be answered EXPLICITLY here. The visible field\n * is read-only, and a read-only field hides its cross by default — rightly so, since its\n * text cannot be edited. Here the value comes from the file dialog rather than from\n * typing, so there is something to clear all the same.\n */\nconst canClear = computed(\n  () => props.clearable && !props.disabled && !props.readonly && model.value.length > 0,\n)\n\n// @a11y @devwarn\n/*\n * The icon disappears along with what it offers: a read-only field opens no dialog, so\n * an icon inviting one would be a lie — the same rule VDateInput follows for its\n * calendar.\n *\n * TRAP — its LABEL stays defined at all times, even when no icon is rendered. The helper\n * that detects a click handler on an icon warns AT SETUP if one is attached without a\n * label, and it has no way of knowing whether an icon exists.\n */\nconst endIcon = computed<IconSource | undefined>(() =>\n  props.readonly ? undefined : props.attachIcon,\n)\n\nconst totalSize = computed(() => model.value.reduce((sum, file) => sum + file.size, 0))\n\n/*\n * The counter is assembled from three sources: the WORD comes from the dictionary, since\n * it is language; the SIZE is formatted by the platform, which knows the local\n * conventions; and the parentheses come from neither, being punctuation every language\n * shares — the same boundary VBadge's \"99+\" falls on.\n *\n * With nothing chosen it states the count alone: \"0 files ()\" would be noise.\n */\nconst counterText = computed(() => {\n  const word = m.value.fileInput.files(model.value.length)\n  return model.value.length === 0 ? word : `${word} (${formatBytes(totalSize.value, locale.value)})`\n})\n\nconst hintId = useId()\nconst counterId = useId()\n\n// @a11y\n/*\n * What describes the field for a screen reader is a LIST of references, assembled here\n * rather than by VInput: the hint belongs to OUR row under the field, VInput having no\n * such row — its own counter sits inside the field.\n *\n * The counter is deliberately part of that list, unlike in VTextarea. When the files are\n * shown as chips the field's own text is EMPTY, and the counter is then the only spoken\n * summary of what has been chosen.\n */\nconst describedBy = computed(\n  () =>\n    [\n      attrs['aria-describedby'] as string | undefined,\n      props.hint ? hintId : undefined,\n      props.counter ? counterId : undefined,\n    ]\n      .filter(Boolean)\n      .join(' ') || undefined,\n)\n\n// The size, the density and the HEIGHT of the chips sitting inside the field, worked out\n// once in `utils/chip.ts` and shared with VCombobox. The height is set inline rather than\n// restated as a table of CSS rules: it belongs to the chips' own subtree, out of the\n// field's reach, and the field has to force its input to that same height or it grows\n// when focused.\nconst chipScale = computed(() => chipScaleFor(props.size, props.compact))\n\n/**\n * What a chip shows for a file. The name is shortened in the MIDDLE rather than cut off\n * at the end, for two reasons.\n *\n * The chips WRAP, so there is no line for a long name to overflow: left whole it would\n * simply push the field onto two or three rows. And cutting the middle preserves the\n * extension, which is what tells the reader what kind of file it is — an ellipsis at the\n * end drops it first.\n *\n * The full name is never lost: the removal button is named with it, and the chip carries\n * it as a tooltip whenever the label was actually shortened.\n */\nconst chipLabel = (file: File) => truncateMiddle(file.name)\n\nfunction onControlClick(event: MouseEvent) {\n  // The field's own buttons already handle their clicks, and the click also reaches the\n  // field itself. Without this guard the attach icon would open the dialog TWICE, and\n  // the clear cross would reopen it immediately after emptying the selection.\n  if ((event.target as HTMLElement).closest('button')) return\n  openPicker()\n}\n\nfunction onFieldKeydown(event: KeyboardEvent) {\n  if (event.key !== 'Enter' && event.key !== ' ') return\n  // Cancelling the default on Enter also stops the form from being submitted: a\n  // read-only text field is still a field, and Enter in one submits the form around it.\n  event.preventDefault()\n  openPicker()\n}\n\nfunction removeAt(index: number) {\n  model.value = model.value.filter((_, i) => i !== index)\n  resetNative()\n  emit('change', model.value)\n  // The removal button disappears along with its chip, so the focus would fall back to\n  // the page body. Unlike the date and time pickers, nothing here opens on focus, so\n  // this needs no guard against re-entering.\n  inputRef.value?.focus()\n}\n\n/**\n * Empties the selection, and the hidden input with it — without that reset the same file\n * could not be chosen again straight afterwards.\n */\nfunction clearValue() {\n  model.value = []\n  resetNative()\n  emit('clear')\n  emit('change', model.value)\n}\n\n/* Files may be dropped on the component itself; there is no separate drop area here —\n   that is what VFilePicker is for. */\nconst { dragging, onDragEnter, onDragOver, onDragLeave, onDrop } = useFileDrop(\n  () => props.droppable && !props.disabled && !props.readonly,\n  acceptFiles,\n)\n\n// @devwarn\nif (isDev) {\n  watchEffect(() => {\n    if (props.display === 'chip' && !props.multiple)\n      console.warn(\n        '[VFileInput] display=\"chip\" ignored without `multiple`: a single file shows as text.',\n      )\n    if (props.maxFiles !== undefined && !props.multiple)\n      console.warn(\n        '[VFileInput] `maxFiles` ignored without `multiple`: single mode already caps at one file.',\n      )\n    if (attrs.required !== undefined)\n      console.warn(\n        '[VFileInput] `required` lands on the hidden file input, which is not focusable: the browser blocks submission with no visible message. Validate the v-model yourself and use the `invalid` prop.',\n      )\n  })\n}\n\ndefineExpose({\n  /** Moves the focus to the visible field. */\n  focus: (options?: FocusOptions) => inputRef.value?.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-input\"\n    :class=\"rootClass\"\n    :style=\"[{ '--chip-height': chipScale.height }, rootStyle]\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-display=\"resolvedDisplay\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n    :data-dragging=\"dragging ? '' : undefined\"\n    :data-can-clear=\"canClear ? '' : 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-input-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    <div class=\"v-file-input-control\" @click=\"onControlClick\">\n      <VInput\n        v-bind=\"fieldAttrs\"\n        ref=\"inputRef\"\n        :model-value=\"displayText\"\n        readonly\n        :label=\"label\"\n        :placeholder=\"placeholderText\"\n        :size=\"size\"\n        :compact=\"compact\"\n        :disabled=\"disabled\"\n        :invalid=\"invalid\"\n        :clearable=\"clearable\"\n        :clear-visible=\"canClear\"\n        :clear-label=\"m.fileInput.clear\"\n        :icon-end=\"endIcon\"\n        :icon-end-label=\"m.fileInput.attach\"\n        :aria-describedby=\"describedBy\"\n        @click:icon-end=\"openPicker\"\n        @clear=\"clearValue\"\n        @keydown=\"onFieldKeydown\"\n      >\n        <template v-if=\"resolvedDisplay === 'chip'\" #start>\n          <template v-for=\"(file, index) in model\" :key=\"`${index}-${file.name}`\">\n            <slot\n              name=\"chip\"\n              :file=\"file\"\n              :index=\"index\"\n              :label=\"chipLabel(file)\"\n              :remove=\"() => removeAt(index)\"\n              :size=\"chipScale.size\"\n              :compact=\"chipScale.compact\"\n            >\n              <VChip\n                tone=\"accent\"\n                :size=\"chipScale.size\"\n                :compact=\"chipScale.compact\"\n                :dismissible=\"!readonly && !disabled\"\n                :dismiss-label=\"m.fileInput.remove(file.name)\"\n                :disabled=\"disabled\"\n                :title=\"chipLabel(file) === file.name ? undefined : file.name\"\n                @dismiss=\"removeAt(index)\"\n                >{{ chipLabel(file) }}</VChip\n              >\n            </slot>\n          </template>\n        </template>\n      </VInput>\n    </div>\n\n    <div v-if=\"hint || counter\" class=\"v-file-input-meta\">\n      <VTypography\n        v-if=\"hint\"\n        :id=\"hintId\"\n        variant=\"caption\"\n        tone=\"muted\"\n        class=\"v-file-input-hint\"\n      >\n        {{ hint }}\n      </VTypography>\n      <span v-if=\"counter\" :id=\"counterId\" class=\"v-file-input-counter\">\n        <slot name=\"counter\" :count=\"model.length\" :size=\"totalSize\" :text=\"counterText\">\n          {{ counterText }}\n        </slot>\n      </span>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /* Positioned so the hidden file input, which has no size at all, has something to be\n     placed against. */\n  .v-file-input {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    width: 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 field. Taking it\n     out of the tab order and hiding it from screen readers, in the template, is what\n     leaves the visible field as the single stop and the single announcement. */\n  .v-file-input-native {\n    position: absolute;\n    inline-size: 0;\n    block-size: 0;\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  .v-file-input:not([data-disabled]):not([data-readonly]) .v-file-input-control,\n  .v-file-input:not([data-disabled]):not([data-readonly])[data-display='text'] .v-input-control {\n    cursor: pointer;\n  }\n\n  /* An ellipsis DOES work on an input, and a read-only one never scrolls by itself, so a\n     long list of names is simply cut short. No tooltip is added for the rest: it would be\n     announced as a description repeating the value the field already shows, and the\n     complete list is what the model is for. */\n  .v-file-input[data-display='text'] .v-input-control {\n    text-overflow: ellipsis;\n  }\n\n  /* While a file is being dragged over it, the field is highlighted by redefining the\n     very variable VInput uses for its own border colour — so the two can never disagree.\n     The selector is one step more specific than VInput's, which is what makes it win\n     whatever order the two sheets end up in. */\n  .v-file-input[data-dragging] .v-input-field {\n    --field-border-color: var(--vectis-color-accent);\n\n    background: var(--vectis-color-accent-surface);\n  }\n\n  /* Shown as chips, the field holds them and lets them WRAP onto several rows, so it\n     grows instead of scrolling.\n\n     Two things have to be forced for that to hold together. The input inside is given\n     the chips' own height rather than the full height it inherits, or its natural height\n     would stretch every row it shares. And the padding at the end reserves exactly the\n     room the icons take, since those are lifted out of the wrapping flow just below.\n\n     That reservation is written as what the flow itself produces when the files are\n     shown as text and nothing is lifted out: one glyph's width per action from the\n     field's padding, one gap between two of them. It reads from the same two variables\n     as the insets further down, so the room reserved and the glyphs it protects cannot\n     drift apart. */\n  .v-file-input[data-display='chip'] .v-input-field {\n    position: relative;\n    flex-wrap: wrap;\n    height: auto;\n    min-height: var(--control-height);\n    padding-block: var(--vectis-space-1);\n    padding-inline-end: calc(\n      var(--control-padding-inline-field) + var(--vectis-icon-size) + var(--control-gap)\n    );\n  }\n\n  .v-file-input[data-display='chip'][data-can-clear] .v-input-field {\n    padding-inline-end: calc(\n      var(--control-padding-inline-field) + 2 * var(--vectis-icon-size) + 2 * var(--control-gap)\n    );\n  }\n\n  .v-file-input[data-display='chip'] .v-input-control {\n    height: var(--chip-height);\n  }\n\n  /* The two icons are lifted out of the wrapping flow — the same recipe VCombobox uses —\n     so that they stay pinned to the end of the field and vertically centred whatever the\n     chips do. VInput renders the clear cross FIRST and the end icon after it, which is\n     why the icon has to be addressed by excluding the cross. */\n  .v-file-input[data-display='chip'] .v-input-clear,\n  .v-file-input[data-display='chip'] .v-input-action:not(.v-input-clear) {\n    position: absolute;\n    top: 50%;\n    translate: 0 -50%;\n  }\n\n  .v-file-input[data-display='chip'] .v-input-action:not(.v-input-clear) {\n    inset-inline-end: var(--control-padding-inline-field);\n  }\n\n  /* This is the ONE place where the spacing between the two icons has to be written by\n     hand. Everywhere else the field's own flow produces it for free, and the two must\n     agree, or the same component would show two different gaps depending on how the\n     files are displayed.\n\n     So it is written as exactly what that flow produces: the end icon occupies one\n     glyph's width from the field's padding, then one gap separates the two.\n\n     TRAP — this reads in GLYPHS and not in buttons. VInput gives its inner buttons a\n     negative margin equal to half the difference between the two, which makes an inset\n     land on the glyph's edge rather than on the button's. Measuring in button widths\n     instead pushes the cross a whole gap too far, with nothing anywhere to signal it. */\n  .v-file-input[data-display='chip'] .v-input-clear {\n    inset-inline-end: calc(\n      var(--control-padding-inline-field) + var(--vectis-icon-size) + var(--control-gap)\n    );\n  }\n\n  .v-file-input-meta {\n    display: flex;\n    align-items: baseline;\n    gap: var(--vectis-space-2);\n  }\n\n  /* The counter stays styled locally: tabular-nums is not a typographic role.\n     No overflow state — an over-limit file never enters the model, so the\n     counter cannot overflow. */\n  .v-file-input-counter {\n    margin-inline-start: auto;\n    font-size: var(--vectis-text-caption-size);\n    color: var(--vectis-color-text-muted);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .v-file-input[data-disabled] .v-file-input-hint,\n  .v-file-input[data-disabled] .v-file-input-counter {\n    color: var(--vectis-color-text-subtle);\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VFileInput/truncate.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Middle truncation, for text whose END carries as much meaning as its start.
+ * A file name is the canonical case: `text-overflow: ellipsis` would drop the
+ * extension, which is often the only thing distinguishing two entries
+ * (`invoice.pdf` and `invoice.png`), and the tail is also where the version or
+ * date suffixes live.
+ *
+ * Pure, no Vue — the `VHotkeys/platform.ts` precedent: a single consumer, so it
+ * stays in the component's folder. Deliberately NOT promoted alongside the file
+ * helpers of `utils/file.ts`: cutting a string is a lexical operation, not
+ * something the FILE domain decides — `utils/text.ts` is where it would go the
+ * day a second consumer appears.
+ */
+/** Ceiling of a chip's label, ellipsis included. Chips wrap, so the point is not
+    the field's width but keeping a row readable at a glance. */
+export declare const CHIP_NAME_MAX = 20;
+/**
+ * `truncateMiddle('annual_report_2026_final.pdf')` → `annual_rep…_final.pdf`.
+ *
+ * The result is EXACTLY `max` characters long: the ellipsis takes one of them,
+ * and the odd one goes to the head — the start of a name is what makes it
+ * recognizable, the end is what disambiguates it.
+ *
+ * Counted in CODE POINTS (`[...text]`) and not in UTF-16 units: an emoji in a
+ * name would otherwise be cut between its two halves and render as a
+ * replacement character. Combining marks stay out of scope — a grapheme
+ * segmenter for a chip label would be a lot of machinery for a rounding error.
+ */
+export declare function truncateMiddle(text: string, max?: number): string;

package/dist/components/VFileInput/truncate.js

@@ -0,0 +1,10 @@
+function e(e, t = 20) {
+	let n = [...e];
+	if (n.length <= t) return e;
+	let r = Math.max(0, t - 1), i = Math.ceil(r / 2), a = r - i;
+	return `${n.slice(0, i).join("")}…${n.slice(n.length - a).join("")}`;
+}
+//#endregion
+export { e as truncateMiddle };
+
+//# sourceMappingURL=truncate.js.map

package/dist/components/VFileInput/truncate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"truncate.js","names":[],"sources":["../../../src/components/VFileInput/truncate.ts"],"sourcesContent":["/**\n * Middle truncation, for text whose END carries as much meaning as its start.\n * A file name is the canonical case: `text-overflow: ellipsis` would drop the\n * extension, which is often the only thing distinguishing two entries\n * (`invoice.pdf` and `invoice.png`), and the tail is also where the version or\n * date suffixes live.\n *\n * Pure, no Vue — the `VHotkeys/platform.ts` precedent: a single consumer, so it\n * stays in the component's folder. Deliberately NOT promoted alongside the file\n * helpers of `utils/file.ts`: cutting a string is a lexical operation, not\n * something the FILE domain decides — `utils/text.ts` is where it would go the\n * day a second consumer appears.\n */\n\n/** Ceiling of a chip's label, ellipsis included. Chips wrap, so the point is not\n    the field's width but keeping a row readable at a glance. */\nexport const CHIP_NAME_MAX = 20\n\n/**\n * `truncateMiddle('annual_report_2026_final.pdf')` → `annual_rep…_final.pdf`.\n *\n * The result is EXACTLY `max` characters long: the ellipsis takes one of them,\n * and the odd one goes to the head — the start of a name is what makes it\n * recognizable, the end is what disambiguates it.\n *\n * Counted in CODE POINTS (`[...text]`) and not in UTF-16 units: an emoji in a\n * name would otherwise be cut between its two halves and render as a\n * replacement character. Combining marks stay out of scope — a grapheme\n * segmenter for a chip label would be a lot of machinery for a rounding error.\n */\nexport function truncateMiddle(text: string, max: number = CHIP_NAME_MAX): string {\n  const chars = [...text]\n  if (chars.length <= max) return text\n\n  const budget = Math.max(0, max - 1)\n  const head = Math.ceil(budget / 2)\n  const tail = budget - head\n\n  return `${chars.slice(0, head).join('')}…${chars.slice(chars.length - tail).join('')}`\n}\n"],"mappings":"AA8BA,SAAgB,EAAe,GAAc,IAAA,IAAqC;CAChF,IAAM,IAAQ,CAAC,GAAG,CAAI;CACtB,IAAI,EAAM,UAAU,GAAK,OAAO;CAEhC,IAAM,IAAS,KAAK,IAAI,GAAG,IAAM,CAAC,GAC5B,IAAO,KAAK,KAAK,IAAS,CAAC,GAC3B,IAAO,IAAS;CAEtB,OAAO,GAAG,EAAM,MAAM,GAAG,CAAI,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAM,MAAM,EAAM,SAAS,CAAI,CAAC,CAAC,KAAK,EAAE;AACrF"}

package/dist/components/VFilePicker/VFilePicker.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-file-picker{--file-picker-border-color:var(--vectis-color-border-strong);--file-picker-bg:var(--vectis-color-surface-sunken);--file-picker-text:var(--vectis-color-text);--file-picker-text-muted:var(--vectis-color-text-muted);--file-picker-row-bg:var(--vectis-color-surface-raised);--file-picker-thumb-bg:var(--vectis-color-surface-muted);inline-size:100%;font-family:var(--vectis-text-family);display:block;position:relative}.v-file-picker-native{opacity:0;pointer-events:none;block-size:0;inline-size:0;position:absolute}.v-file-picker-body{gap:var(--vectis-space-4);flex-direction:column;display:flex}.v-file-picker-zone{justify-content:center;align-items:center;gap:var(--vectis-space-2);inline-size:100%;min-block-size:var(--vectis-control-size-file-picker-min-block);padding:var(--vectis-space-6) var(--vectis-space-4);appearance:none;border:1px dashed var(--file-picker-border-color);border-radius:var(--vectis-radius-surface);background:var(--file-picker-bg);color:var(--file-picker-text);font:inherit;text-align:center;transition:border-color var(--vectis-duration-fast) var(--vectis-ease-default), background-color var(--vectis-duration-fast) var(--vectis-ease-default);flex-direction:column;margin:0;display:flex}.v-file-picker:not([data-disabled]):not([data-readonly]) .v-file-picker-zone{cursor:pointer}.v-file-picker:not([data-disabled]):not([data-readonly]) .v-file-picker-zone:hover{--file-picker-border-color:var(--vectis-color-accent)}.v-file-picker-zone:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-file-picker[data-dragging]{--file-picker-border-color:var(--vectis-color-accent);--file-picker-bg:var(--vectis-color-accent-surface)}.v-file-picker-icon{--vectis-icon-size:var(--vectis-control-size-file-picker-icon);color:var(--file-picker-text-muted);display:inline-flex}.v-file-picker-subtitle{--typography-color:var(--file-picker-text-muted)}.v-file-picker-separator{align-items:center;gap:var(--vectis-space-3);inline-size:100%;color:var(--file-picker-text-muted);font-size:var(--vectis-text-caption-size);margin-block-start:var(--vectis-space-2);display:flex}.v-file-picker-separator:before,.v-file-picker-separator:after{content:"";border-block-start:1px solid var(--vectis-color-border);flex:1 1 0}.v-file-picker-list{gap:var(--vectis-space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.v-file-picker-item{align-items:center;gap:var(--vectis-space-3);padding:var(--vectis-space-2);border:1px solid var(--vectis-color-border);border-radius:var(--vectis-radius-interactive);background:var(--file-picker-row-bg);display:flex}.v-file-picker-thumb{inline-size:var(--vectis-control-size-file-picker-thumb);block-size:var(--vectis-control-size-file-picker-thumb);border-radius:var(--vectis-radius-interactive);background:var(--file-picker-thumb-bg);color:var(--file-picker-text-muted);flex:none;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}.v-file-picker-image{object-fit:cover;block-size:100%;inline-size:100%;display:block}.v-file-picker-info{min-inline-size:0;color:var(--file-picker-text);flex-direction:column;flex:auto;display:flex}.v-file-picker-name{font-size:var(--vectis-text-body-sm-size);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.v-file-picker-size{color:var(--file-picker-text-muted);font-size:var(--vectis-text-caption-size);font-variant-numeric:tabular-nums}.v-file-picker[data-preview=end]{container:v-file-picker/inline-size}.v-file-picker[data-preview=end] .v-file-picker-body{flex-direction:row;align-items:flex-start}.v-file-picker[data-preview=end] .v-file-picker-zone,.v-file-picker[data-preview=end] .v-file-picker-list{flex:1 1 0;min-inline-size:0}@container v-file-picker (width<=34rem){.v-file-picker[data-preview=end] .v-file-picker-body{flex-direction:column}}.v-file-picker[data-disabled]{--file-picker-border-color:var(--vectis-color-border);--file-picker-bg:var(--vectis-color-surface-muted);--file-picker-text:var(--vectis-color-text-muted);--file-picker-text-muted:var(--vectis-color-text-muted);--file-picker-row-bg:var(--vectis-color-surface-muted)}.v-file-picker[data-readonly]{--file-picker-border-color:var(--vectis-color-border)}@media (prefers-reduced-motion:reduce){.v-file-picker-zone{transition:none}}@media (forced-colors:active){.v-file-picker[data-dragging] .v-file-picker-zone{border-style:solid}.v-file-picker-thumb{border:1px solid}}}