@skdx/vue 0.28.0 → 0.30.0

package/dist/field/useField.cjs

@@ -1 +1 @@
-const h=require("./fieldCore.cjs"),o=require("./context.cjs"),I=require("../utils/liveAnnouncer.cjs");let r=require("vue");function g(e,l,C){const d={labelId:o.nextFieldId("label"),descriptionId:o.nextFieldId("description"),errorId:o.nextFieldId("error"),controlId:o.nextFieldId("control")},a=(0,r.ref)(""),c=(0,r.ref)([]),u=(0,r.ref)(0),s=(0,r.ref)(null),t=new h.FieldController({...d,grouped:l,onSnapshotChange:n=>{a.value=n.controlId,c.value=n.errors,u.value=n.count;const{controlId:i,...f}=n;C(f)},announce:I.announce});(0,r.provide)(o.FIELD_CONTEXT,{...d,controlId:a,errors:c,grouped:l,get required(){return e.required===!0},count:u,setCharacterCount:n=>t.setCharacterCount(n),get getCharacterCountMessage(){return e.getCharacterCountMessage},requestSync:()=>t.sync()});let v=!1;return(0,r.watchEffect)(()=>{const n={validate:e.validate,mode:e.mode,errors:e.errors,value:e.value,name:e.name,required:e.required,disabled:e.disabled,getCharacterCountMessage:e.getCharacterCountMessage,invalidMessage:e.invalidMessage,validationDebounceTime:e.validationDebounceTime},i=s.value;i&&!v&&(v=!0,t.connect(i)),t.setProps(n),t.sync()},{flush:"post"}),(0,r.watch)([c,a],()=>t.sync(),{flush:"post"}),(0,r.onUnmounted)(()=>t.disconnect()),{checkValidity:()=>t.validate(),reset:()=>t.reset(),rootRef:s}}exports.useField=g;
+const h=require("../utils/liveAnnouncer.cjs"),I=require("../utils/field-core.cjs"),o=require("./context.cjs");let r=require("vue");function g(e,l,C){const d={labelId:o.nextFieldId("label"),descriptionId:o.nextFieldId("description"),errorId:o.nextFieldId("error"),controlId:o.nextFieldId("control")},c=(0,r.ref)(""),a=(0,r.ref)([]),u=(0,r.ref)(0),s=(0,r.ref)(null),t=new I.FieldController({...d,grouped:l,onSnapshotChange:n=>{c.value=n.controlId,a.value=n.errors,u.value=n.count;const{controlId:i,...f}=n;C(f)},announce:h.announce});(0,r.provide)(o.FIELD_CONTEXT,{...d,controlId:c,errors:a,grouped:l,get required(){return e.required===!0},count:u,setCharacterCount:n=>t.setCharacterCount(n),get getCharacterCountMessage(){return e.getCharacterCountMessage},requestSync:()=>t.sync()});let v=!1;return(0,r.watchEffect)(()=>{const n={validate:e.validate,mode:e.mode,errors:e.errors,value:e.value,name:e.name,required:e.required,disabled:e.disabled,getCharacterCountMessage:e.getCharacterCountMessage,invalidMessage:e.invalidMessage,validationDebounceTime:e.validationDebounceTime},i=s.value;i&&!v&&(v=!0,t.connect(i)),t.setProps(n),t.sync()},{flush:"post"}),(0,r.watch)([a,c],()=>t.sync(),{flush:"post"}),(0,r.onUnmounted)(()=>t.disconnect()),{checkValidity:()=>t.validate(),reset:()=>t.reset(),rootRef:s}}exports.useField=g;

package/dist/field/useField.d.cts

@@ -1,10 +1,7 @@
 import { type Ref } from 'vue';
+import { type FieldControllerProps } from '../utils/field-core.cjs';
 import { type FieldValidityDetail } from './context.cjs';
-import { type FieldControllerProps } from './fieldCore.cjs';
-/**
- * Creates and drives FieldController for one Field root, providing FIELD_CONTEXT;
- * mirrors snapshot into refs for part re-renders. Returns root ref and imperative methods.
- */
+/** Creates and drives a FieldController for one Field root, providing FIELD_CONTEXT and mirroring its snapshot into refs. */
 export declare function useField(props: FieldControllerProps, grouped: boolean, onValidityChange: (detail: FieldValidityDetail) => void): {
     rootRef: Ref<HTMLElement | null>;
     checkValidity: () => Promise<boolean>;

package/dist/field/useField.d.ts

@@ -1,10 +1,7 @@
 import { type Ref } from 'vue';
+import { type FieldControllerProps } from '../utils/field-core.js';
 import { type FieldValidityDetail } from './context.js';
-import { type FieldControllerProps } from './fieldCore.js';
-/**
- * Creates and drives FieldController for one Field root, providing FIELD_CONTEXT;
- * mirrors snapshot into refs for part re-renders. Returns root ref and imperative methods.
- */
+/** Creates and drives a FieldController for one Field root, providing FIELD_CONTEXT and mirroring its snapshot into refs. */
 export declare function useField(props: FieldControllerProps, grouped: boolean, onValidityChange: (detail: FieldValidityDetail) => void): {
     rootRef: Ref<HTMLElement | null>;
     checkValidity: () => Promise<boolean>;

package/dist/field/useField.js

@@ -1 +1 @@
-import{FieldController as e}from"./fieldCore.js";import{FIELD_CONTEXT as r,nextFieldId as t}from"./context.js";import{announce as o}from"../utils/liveAnnouncer.js";import{onUnmounted as a,provide as n,ref as s,watch as c,watchEffect as i}from"vue";function l(l,d,u){const v={labelId:t("label"),descriptionId:t("description"),errorId:t("error"),controlId:t("control")},C=s(""),g=s([]),m=s(0),p=s(null),h=new e({...v,grouped:d,onSnapshotChange:e=>{C.value=e.controlId,g.value=e.errors,m.value=e.count;const{controlId:r,...t}=e;u(t)},announce:o});n(r,{...v,controlId:C,errors:g,grouped:d,get required(){return!0===l.required},count:m,setCharacterCount:e=>h.setCharacterCount(e),get getCharacterCountMessage(){return l.getCharacterCountMessage},requestSync:()=>h.sync()});let f=!1;return i(()=>{const e={validate:l.validate,mode:l.mode,errors:l.errors,value:l.value,name:l.name,required:l.required,disabled:l.disabled,getCharacterCountMessage:l.getCharacterCountMessage,invalidMessage:l.invalidMessage,validationDebounceTime:l.validationDebounceTime},r=p.value;r&&!f&&(f=!0,h.connect(r)),h.setProps(e),h.sync()},{flush:"post"}),c([g,C],()=>h.sync(),{flush:"post"}),a(()=>h.disconnect()),{checkValidity:()=>h.validate(),reset:()=>h.reset(),rootRef:p}}export{l as useField};
+import{announce as e}from"../utils/liveAnnouncer.js";import{FieldController as r}from"../utils/field-core.js";import{FIELD_CONTEXT as t,nextFieldId as o}from"./context.js";import{onUnmounted as a,provide as n,ref as s,watch as c,watchEffect as i}from"vue";function l(l,u,d){const v={labelId:o("label"),descriptionId:o("description"),errorId:o("error"),controlId:o("control")},g=s(""),m=s([]),C=s(0),p=s(null),h=new r({...v,grouped:u,onSnapshotChange:e=>{g.value=e.controlId,m.value=e.errors,C.value=e.count;const{controlId:r,...t}=e;d(t)},announce:e});n(t,{...v,controlId:g,errors:m,grouped:u,get required(){return!0===l.required},count:C,setCharacterCount:e=>h.setCharacterCount(e),get getCharacterCountMessage(){return l.getCharacterCountMessage},requestSync:()=>h.sync()});let f=!1;return i(()=>{const e={validate:l.validate,mode:l.mode,errors:l.errors,value:l.value,name:l.name,required:l.required,disabled:l.disabled,getCharacterCountMessage:l.getCharacterCountMessage,invalidMessage:l.invalidMessage,validationDebounceTime:l.validationDebounceTime},r=p.value;r&&!f&&(f=!0,h.connect(r)),h.setProps(e),h.sync()},{flush:"post"}),c([m,g],()=>h.sync(),{flush:"post"}),a(()=>h.disconnect()),{checkValidity:()=>h.validate(),reset:()=>h.reset(),rootRef:p}}export{l as useField};

package/dist/file-upload/FileUpload.vue.d.cts

@@ -1,130 +1,92 @@
 import { type FileUploadCapture, type FileUploadFileStatus, type FileUploadRejection } from './context.cjs';
-/**
- * Owns and manages a controllable `File[]` list via context, handling picker,
- * drop, add/remove operations. Renders a plain `<div>`.
- */
+/** Owns and manages a controllable `File[]` list via context, handling picker, drop, and add/remove. */
 type __VLS_Props = {
     /** Selected files, for controlled usage. Pair with `v-model:value` or `@value-change`. */
-    value?: File[];
+    value?: File[] | undefined;
     /** Initially selected files, for uncontrolled usage. */
     defaultValue?: File[];
     /** Comma-separated file-type filter, applied to picker and drag-and-drop alike. */
-    accept?: string;
+    accept?: string | undefined;
     /** Allow selecting/dropping more than one file. */
     multiple?: boolean;
     /** Disables the dropzone, trigger, and file input, and blocks adding or removing files. */
     disabled?: boolean;
     /** Most files the list may hold; files past the cap are rejected with `too-many-files`. Ignored while `multiple` is false. */
-    maxFiles?: number;
+    maxFiles?: number | undefined;
     /** Largest accepted file size in bytes; a bigger file is rejected with `file-too-large`. */
-    maxFileSize?: number;
+    maxFileSize?: number | undefined;
     /** Smallest accepted file size in bytes; a smaller file is rejected with `file-too-small`. */
-    minFileSize?: number;
+    minFileSize?: number | undefined;
     /** Extra per-file check. Return error codes to reject the file, or null/undefined/[] to accept it. */
-    validate?: (file: File) => string[] | null | undefined;
+    validator?: ((file: File) => string[] | null) | undefined;
     /**
-     * Words every `SkdxFileUploadItemDelete`'s accessible name from the name of
-     * the file it removes. Declared once on the root rather than per row so the
-     * wording — and its translation — lives in one place; a consumer's own
-     * `aria-label` on a delete button still wins over it.
+     * Words every `SkdxFileUploadItemDelete`'s accessible name from the name of the file it removes.
      * @default (fileName) => `Remove ${fileName}`
      */
     removeLabel?: (fileName: string) => string;
     /**
-     * Form field name. With it, the root renders a visually-hidden
-     * `<input type="file">` whose `files` mirror the selection, so every
-     * selected file is submitted as its own entry under this name and
-     * `new FormData(form).getAll(name)` returns the `File` objects.
-     *
-     * Not `SkdxFileUploadInput`: that input's `value` is cleared after every
-     * selection, which is what makes re-picking the same file fire `change`.
+     * Form field name; with it, the root renders a hidden `<input type="file">` whose `files` mirror the selection.
+     * @default undefined
      */
-    name?: string;
+    name?: string | undefined;
     /**
-     * Id of the `<form>` this upload submits into, forwarded to every mirrored
-     * hidden control — the named file input and the unnamed constraint input —
-     * so a FileUpload can live outside the form it belongs to. Needs `name` to
-     * mean anything.
+     * Id of the `<form>` this upload submits into, forwarded to every mirrored hidden control.
+     * @default undefined
      */
-    form?: string;
+    form?: string | undefined;
     /**
-     * Marks the field required: `valueMissing` while no file is selected,
-     * reported through the exposed `checkValidity()`/`reportValidity()`, and
-     * announced through the required/validity description
-     * `SkdxFileUploadDropzone` points `aria-describedby` at while unsatisfied
-     * — not `aria-required`, which `role="button"` does not support, and not
-     * `aria-invalid`, which it deprecates.
+     * Marks the field required, reported through `checkValidity()`/`reportValidity()` and an `aria-describedby` description.
      */
     required?: boolean;
     /**
-     * Replaces the browser's own `valueMissing` message when a `required`
-     * upload is submitted empty — "Please select a file." — so it can be
-     * translated, or can name what has to be attached. The default is otherwise
-     * unreachable: the control carrying the constraint is a visually-hidden
-     * input the consumer never renders. Yields to `setCustomValidity()`,
-     * which is more specific.
+     * Replaces the browser's own `valueMissing` message when a `required` upload is submitted empty.
+     * @default undefined
      */
-    requiredMessage?: string;
+    requiredMessage?: string | undefined;
     /**
-     * Shows the selection but blocks changing it: the dropzone refuses clicks,
-     * keyboard activation and drops, the trigger is inert, and every
-     * `SkdxFileUploadItemDelete` is disabled. Unlike `disabled` the dropzone
-     * keeps its tab stop and the list stays readable — that is the whole
-     * distinction.
+     * Shows the selection but blocks changing it, unlike `disabled` keeping the dropzone's tab stop and the list readable.
      */
     readOnly?: boolean;
     /**
-     * Marks the selection invalid from outside — a server rejection, a
-     * cross-field rule. ORed with the component's own derived invalidity
-     * (`required` with no files), which it cannot switch off.
+     * Marks the selection invalid from outside, ORed with the component's own derived invalidity.
      */
     invalid?: boolean;
     /**
-     * Lets the picker select a whole directory, forwarded to the hidden input
-     * as `webkitdirectory`. Browser-dependent: the attribute is prefixed and
-     * specified nowhere, and a browser without it opens an ordinary picker.
+     * Lets the picker select a whole directory, forwarded to the hidden input as `webkitdirectory`.
      */
     directory?: boolean;
     /**
-     * Opens the device camera instead of the file browser. Honoured on mobile
-     * and ignored on desktop, so it is a hint rather than a guarantee.
+     * Opens the device camera instead of the file browser; honoured on mobile, ignored on desktop.
+     * @default undefined
      */
-    capture?: FileUploadCapture;
+    capture?: FileUploadCapture | undefined;
     /**
-     * Suppresses the browser's default open-on-drop behaviour everywhere
-     * *outside* a mounted dropzone. On by default because the default is
-     * destructive: a file dropped a few pixels off target navigates the tab to
-     * it and discards the surrounding form.
+     * Suppresses the browser's default open-on-drop behaviour everywhere outside a mounted dropzone.
      */
     preventDocumentDrop?: boolean;
     /**
      * Renders the derived `SkdxFileUploadItemGroup` list of selected files.
-     * Ignored once the default slot supplies its own parts.
      * @default true — the selected files are listed.
      */
     showList?: boolean;
     /**
-     * Renders a derived `SkdxFileUploadItemPreview` in each row. Ignored
-     * once the default slot supplies its own parts, or while `renderFile` is set.
+     * Renders a derived `SkdxFileUploadItemPreview` in each row.
      * @default false — no preview slot.
      */
     showPreview?: boolean;
     /**
-     * Per-file upload state for the derived rows, keyed by the `File` itself rather than by index so it cannot fall out of step with the selection. What it returns becomes that row's `status` and `progress`, and so its `data-state` and `data-progress`. This component performs no transport, so the consumer that owns the upload owns this. Ignored when children are given, where each `FileUploadItem` takes the two directly.
-     *
-     * `data-progress` is a styling hook, so a row returning `'uploading'` also needs the number in the accessibility tree — under the derived anatomy that means composing the row with `renderFile`.
+     * Per-file upload state for the derived rows, keyed by the `File` itself and mapped to `data-state`/`data-progress`.
      * @default undefined — every derived row is `idle` with no progress.
      */
-    fileStatus?: (file: File) => {
+    fileStatus?: ((file: File) => {
         status?: FileUploadFileStatus;
         progress?: number;
-    } | undefined;
+    }) | undefined;
     /**
-     * Renders one file's row content in the derived anatomy, replacing the
-     * default preview/name/size/delete composition.
+     * Renders one file's row content in the derived anatomy, replacing the default preview/name/size/delete composition.
      * @default undefined — each row is name, size and a delete button.
      */
-    renderFile?: (file: File) => unknown;
+    renderFile?: ((file: File) => unknown) | undefined;
 };
 declare function addFiles(incoming: FileList | File[]): void;
 declare function checkValidity(): boolean;
@@ -135,66 +97,38 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
-    /**
-     * Reports whether the field satisfies its constraints, firing `invalid` when
-     * it does not — delegated to the control that carries the constraint, so the
-     * answer is the browser's rather than a re-implementation of it.
-     */
+    /** Reports whether the field satisfies its constraints, firing `invalid` when it does not. */
     checkValidity: typeof checkValidity;
     /** Like `checkValidity()`, but also shows the browser's validation message. */
     reportValidity: typeof reportValidity;
-    /**
-     * Pushes an externally-computed error in, exactly like the native method.
-     *
-     * Works whether or not the upload is `required`: the constraint-carrying
-     * control renders unconditionally, so there is always something to write
-     * to. A *custom* error is by definition one the browser cannot derive, so
-     * tying it to a built-in constraint being present would invert the
-     * feature.
-     */
+    /** Pushes an externally-computed error in, exactly like the native method. */
     setCustomValidity: typeof setCustomValidity;
-    /**
-     * Feeds files through the same pipeline the picker and the drop handler use —
-     * `accept`, the size bounds, the `maxFiles` cap, `multiple` replacement, one
-     * `file-reject` per refused file, one `value-change` for the batch, and the
-     * live announcement. For an entry point this component does not own: a
-     * `paste` handler, a third-party drag-and-drop library, a camera capture.
-     * A no-op while `disabled` or `readOnly`.
-     */
+    /** Feeds files through the same accept/size/maxFiles/announcement pipeline the picker and drop handler use. */
     addFiles: typeof addFiles;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:value": (value: File[]) => any;
     "value-change": (value: File[]) => any;
     "file-reject": (rejection: FileUploadRejection) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:value"?: ((value: File[]) => any) | undefined;
-    "onValue-change"?: ((value: File[]) => any) | undefined;
-    "onFile-reject"?: ((rejection: FileUploadRejection) => any) | undefined;
+    "onUpdate:value"?: (value: File[]) => any;
+    "onValue-change"?: (value: File[]) => any;
+    "onFile-reject"?: (rejection: FileUploadRejection) => any;
 }>, {
-    form: string;
     disabled: boolean;
-    value: File[];
+    accept: string | undefined;
+    defaultValue: File[];
+    multiple: boolean;
     readOnly: boolean;
     required: boolean;
-    name: string;
+    value: File[] | undefined;
     invalid: boolean;
-    accept: string;
-    capture: FileUploadCapture;
-    defaultValue: File[];
-    multiple: boolean;
-    validate: (file: File) => string[] | null | undefined;
+    validator: ((file: File) => string[] | null) | undefined;
     showList: boolean;
     showPreview: boolean;
-    fileStatus: (file: File) => {
-        status?: FileUploadFileStatus;
-        progress?: number;
-    } | undefined;
-    renderFile: (file: File) => unknown;
-    maxFiles: number;
-    maxFileSize: number;
-    minFileSize: number;
+    maxFiles: number | undefined;
+    maxFileSize: number | undefined;
+    minFileSize: number | undefined;
     removeLabel: (fileName: string) => string;
-    requiredMessage: string;
     directory: boolean;
     preventDocumentDrop: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/file-upload/FileUpload.vue.d.ts

@@ -1,130 +1,92 @@
 import { type FileUploadCapture, type FileUploadFileStatus, type FileUploadRejection } from './context.js';
-/**
- * Owns and manages a controllable `File[]` list via context, handling picker,
- * drop, add/remove operations. Renders a plain `<div>`.
- */
+/** Owns and manages a controllable `File[]` list via context, handling picker, drop, and add/remove. */
 type __VLS_Props = {
     /** Selected files, for controlled usage. Pair with `v-model:value` or `@value-change`. */
-    value?: File[];
+    value?: File[] | undefined;
     /** Initially selected files, for uncontrolled usage. */
     defaultValue?: File[];
     /** Comma-separated file-type filter, applied to picker and drag-and-drop alike. */
-    accept?: string;
+    accept?: string | undefined;
     /** Allow selecting/dropping more than one file. */
     multiple?: boolean;
     /** Disables the dropzone, trigger, and file input, and blocks adding or removing files. */
     disabled?: boolean;
     /** Most files the list may hold; files past the cap are rejected with `too-many-files`. Ignored while `multiple` is false. */
-    maxFiles?: number;
+    maxFiles?: number | undefined;
     /** Largest accepted file size in bytes; a bigger file is rejected with `file-too-large`. */
-    maxFileSize?: number;
+    maxFileSize?: number | undefined;
     /** Smallest accepted file size in bytes; a smaller file is rejected with `file-too-small`. */
-    minFileSize?: number;
+    minFileSize?: number | undefined;
     /** Extra per-file check. Return error codes to reject the file, or null/undefined/[] to accept it. */
-    validate?: (file: File) => string[] | null | undefined;
+    validator?: ((file: File) => string[] | null) | undefined;
     /**
-     * Words every `SkdxFileUploadItemDelete`'s accessible name from the name of
-     * the file it removes. Declared once on the root rather than per row so the
-     * wording — and its translation — lives in one place; a consumer's own
-     * `aria-label` on a delete button still wins over it.
+     * Words every `SkdxFileUploadItemDelete`'s accessible name from the name of the file it removes.
      * @default (fileName) => `Remove ${fileName}`
      */
     removeLabel?: (fileName: string) => string;
     /**
-     * Form field name. With it, the root renders a visually-hidden
-     * `<input type="file">` whose `files` mirror the selection, so every
-     * selected file is submitted as its own entry under this name and
-     * `new FormData(form).getAll(name)` returns the `File` objects.
-     *
-     * Not `SkdxFileUploadInput`: that input's `value` is cleared after every
-     * selection, which is what makes re-picking the same file fire `change`.
+     * Form field name; with it, the root renders a hidden `<input type="file">` whose `files` mirror the selection.
+     * @default undefined
      */
-    name?: string;
+    name?: string | undefined;
     /**
-     * Id of the `<form>` this upload submits into, forwarded to every mirrored
-     * hidden control — the named file input and the unnamed constraint input —
-     * so a FileUpload can live outside the form it belongs to. Needs `name` to
-     * mean anything.
+     * Id of the `<form>` this upload submits into, forwarded to every mirrored hidden control.
+     * @default undefined
      */
-    form?: string;
+    form?: string | undefined;
     /**
-     * Marks the field required: `valueMissing` while no file is selected,
-     * reported through the exposed `checkValidity()`/`reportValidity()`, and
-     * announced through the required/validity description
-     * `SkdxFileUploadDropzone` points `aria-describedby` at while unsatisfied
-     * — not `aria-required`, which `role="button"` does not support, and not
-     * `aria-invalid`, which it deprecates.
+     * Marks the field required, reported through `checkValidity()`/`reportValidity()` and an `aria-describedby` description.
      */
     required?: boolean;
     /**
-     * Replaces the browser's own `valueMissing` message when a `required`
-     * upload is submitted empty — "Please select a file." — so it can be
-     * translated, or can name what has to be attached. The default is otherwise
-     * unreachable: the control carrying the constraint is a visually-hidden
-     * input the consumer never renders. Yields to `setCustomValidity()`,
-     * which is more specific.
+     * Replaces the browser's own `valueMissing` message when a `required` upload is submitted empty.
+     * @default undefined
      */
-    requiredMessage?: string;
+    requiredMessage?: string | undefined;
     /**
-     * Shows the selection but blocks changing it: the dropzone refuses clicks,
-     * keyboard activation and drops, the trigger is inert, and every
-     * `SkdxFileUploadItemDelete` is disabled. Unlike `disabled` the dropzone
-     * keeps its tab stop and the list stays readable — that is the whole
-     * distinction.
+     * Shows the selection but blocks changing it, unlike `disabled` keeping the dropzone's tab stop and the list readable.
      */
     readOnly?: boolean;
     /**
-     * Marks the selection invalid from outside — a server rejection, a
-     * cross-field rule. ORed with the component's own derived invalidity
-     * (`required` with no files), which it cannot switch off.
+     * Marks the selection invalid from outside, ORed with the component's own derived invalidity.
      */
     invalid?: boolean;
     /**
-     * Lets the picker select a whole directory, forwarded to the hidden input
-     * as `webkitdirectory`. Browser-dependent: the attribute is prefixed and
-     * specified nowhere, and a browser without it opens an ordinary picker.
+     * Lets the picker select a whole directory, forwarded to the hidden input as `webkitdirectory`.
      */
     directory?: boolean;
     /**
-     * Opens the device camera instead of the file browser. Honoured on mobile
-     * and ignored on desktop, so it is a hint rather than a guarantee.
+     * Opens the device camera instead of the file browser; honoured on mobile, ignored on desktop.
+     * @default undefined
      */
-    capture?: FileUploadCapture;
+    capture?: FileUploadCapture | undefined;
     /**
-     * Suppresses the browser's default open-on-drop behaviour everywhere
-     * *outside* a mounted dropzone. On by default because the default is
-     * destructive: a file dropped a few pixels off target navigates the tab to
-     * it and discards the surrounding form.
+     * Suppresses the browser's default open-on-drop behaviour everywhere outside a mounted dropzone.
      */
     preventDocumentDrop?: boolean;
     /**
      * Renders the derived `SkdxFileUploadItemGroup` list of selected files.
-     * Ignored once the default slot supplies its own parts.
      * @default true — the selected files are listed.
      */
     showList?: boolean;
     /**
-     * Renders a derived `SkdxFileUploadItemPreview` in each row. Ignored
-     * once the default slot supplies its own parts, or while `renderFile` is set.
+     * Renders a derived `SkdxFileUploadItemPreview` in each row.
      * @default false — no preview slot.
      */
     showPreview?: boolean;
     /**
-     * Per-file upload state for the derived rows, keyed by the `File` itself rather than by index so it cannot fall out of step with the selection. What it returns becomes that row's `status` and `progress`, and so its `data-state` and `data-progress`. This component performs no transport, so the consumer that owns the upload owns this. Ignored when children are given, where each `FileUploadItem` takes the two directly.
-     *
-     * `data-progress` is a styling hook, so a row returning `'uploading'` also needs the number in the accessibility tree — under the derived anatomy that means composing the row with `renderFile`.
+     * Per-file upload state for the derived rows, keyed by the `File` itself and mapped to `data-state`/`data-progress`.
      * @default undefined — every derived row is `idle` with no progress.
      */
-    fileStatus?: (file: File) => {
+    fileStatus?: ((file: File) => {
         status?: FileUploadFileStatus;
         progress?: number;
-    } | undefined;
+    }) | undefined;
     /**
-     * Renders one file's row content in the derived anatomy, replacing the
-     * default preview/name/size/delete composition.
+     * Renders one file's row content in the derived anatomy, replacing the default preview/name/size/delete composition.
      * @default undefined — each row is name, size and a delete button.
      */
-    renderFile?: (file: File) => unknown;
+    renderFile?: ((file: File) => unknown) | undefined;
 };
 declare function addFiles(incoming: FileList | File[]): void;
 declare function checkValidity(): boolean;
@@ -135,66 +97,38 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
-    /**
-     * Reports whether the field satisfies its constraints, firing `invalid` when
-     * it does not — delegated to the control that carries the constraint, so the
-     * answer is the browser's rather than a re-implementation of it.
-     */
+    /** Reports whether the field satisfies its constraints, firing `invalid` when it does not. */
     checkValidity: typeof checkValidity;
     /** Like `checkValidity()`, but also shows the browser's validation message. */
     reportValidity: typeof reportValidity;
-    /**
-     * Pushes an externally-computed error in, exactly like the native method.
-     *
-     * Works whether or not the upload is `required`: the constraint-carrying
-     * control renders unconditionally, so there is always something to write
-     * to. A *custom* error is by definition one the browser cannot derive, so
-     * tying it to a built-in constraint being present would invert the
-     * feature.
-     */
+    /** Pushes an externally-computed error in, exactly like the native method. */
     setCustomValidity: typeof setCustomValidity;
-    /**
-     * Feeds files through the same pipeline the picker and the drop handler use —
-     * `accept`, the size bounds, the `maxFiles` cap, `multiple` replacement, one
-     * `file-reject` per refused file, one `value-change` for the batch, and the
-     * live announcement. For an entry point this component does not own: a
-     * `paste` handler, a third-party drag-and-drop library, a camera capture.
-     * A no-op while `disabled` or `readOnly`.
-     */
+    /** Feeds files through the same accept/size/maxFiles/announcement pipeline the picker and drop handler use. */
     addFiles: typeof addFiles;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:value": (value: File[]) => any;
     "value-change": (value: File[]) => any;
     "file-reject": (rejection: FileUploadRejection) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:value"?: ((value: File[]) => any) | undefined;
-    "onValue-change"?: ((value: File[]) => any) | undefined;
-    "onFile-reject"?: ((rejection: FileUploadRejection) => any) | undefined;
+    "onUpdate:value"?: (value: File[]) => any;
+    "onValue-change"?: (value: File[]) => any;
+    "onFile-reject"?: (rejection: FileUploadRejection) => any;
 }>, {
-    form: string;
     disabled: boolean;
-    value: File[];
+    accept: string | undefined;
+    defaultValue: File[];
+    multiple: boolean;
     readOnly: boolean;
     required: boolean;
-    name: string;
+    value: File[] | undefined;
     invalid: boolean;
-    accept: string;
-    capture: FileUploadCapture;
-    defaultValue: File[];
-    multiple: boolean;
-    validate: (file: File) => string[] | null | undefined;
+    validator: ((file: File) => string[] | null) | undefined;
     showList: boolean;
     showPreview: boolean;
-    fileStatus: (file: File) => {
-        status?: FileUploadFileStatus;
-        progress?: number;
-    } | undefined;
-    renderFile: (file: File) => unknown;
-    maxFiles: number;
-    maxFileSize: number;
-    minFileSize: number;
+    maxFiles: number | undefined;
+    maxFileSize: number | undefined;
+    minFileSize: number | undefined;
     removeLabel: (fileName: string) => string;
-    requiredMessage: string;
     directory: boolean;
     preventDocumentDrop: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/file-upload/FileUpload.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const B=require("../utils/id.cjs"),P=require("../utils/useFormReset.cjs"),y=require("../utils/liveAnnouncer.cjs"),o=require("./context.cjs"),U=require("./FileUploadAnatomy.vue.cjs");let e=require("vue");var j=["data-disabled"],z=["name","multiple","accept","disabled","form"],M=["required","disabled","form","^value"],T=["id"],$=(0,e.defineComponent)({__name:"FileUpload",props:{value:{default:void 0},defaultValue:{default:()=>[]},accept:{default:void 0},multiple:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},maxFiles:{default:void 0},maxFileSize:{default:void 0},minFileSize:{default:void 0},validate:{type:Function,default:void 0},removeLabel:{type:Function,default:l=>`Remove ${l}`},name:{default:void 0},form:{default:void 0},required:{type:Boolean,default:!1},requiredMessage:{default:void 0},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},directory:{type:Boolean,default:!1},capture:{default:void 0},preventDocumentDrop:{type:Boolean,default:!0},showList:{type:Boolean,default:!0},showPreview:{type:Boolean,default:!1},fileStatus:{type:Function,default:void 0},renderFile:{type:Function,default:void 0}},emits:["update:value","value-change","file-reject"],setup(l,{expose:E,emit:V}){const t=l,m=V,h=(0,e.ref)(null),b=(0,e.ref)(t.defaultValue),i=(0,e.computed)(()=>t.value===void 0?b.value:t.value);function c(n){t.value===void 0&&(b.value=n),m("update:value",n),m("value-change",n)}function g(n){if(t.disabled||t.readOnly)return;const a=t.multiple?i.value:[],u=(t.multiple?t.maxFiles??1/0:1)-a.length,d=[],k=[];for(const v of Array.from(n)){const f=o.fileErrors(v,t);if(d.length>=u&&f.push("too-many-files"),f.length>0){k.push(f[0]),m("file-reject",{file:v,errors:f});continue}d.push(v)}y.announce(o.commitAnnouncement(d.length,k)),d.length!==0&&c([...a,...d])}function L(n){if(t.disabled||t.readOnly)return;const a=i.value.indexOf(n);a!==-1&&(y.announce(o.removalAnnouncement([n.name])),c([...i.value.slice(0,a),...i.value.slice(a+1)]))}function D(){t.disabled||t.readOnly||i.value.length===0||(y.announce(o.removalAnnouncement(i.value.map(n=>n.name))),c([]))}function O(){!t.disabled&&!t.readOnly&&h.value?.click()}const R=B.nextId("file-upload-label"),q=B.nextId("file-upload-description"),A=(0,e.ref)(!1);function I(n){if(typeof DataTransfer>"u")return null;const a=new DataTransfer;for(const u of n)a.items.add(u);return a.files}const p=(0,e.ref)(null),r=(0,e.ref)(null),w=(0,e.computed)(()=>t.invalid||t.required&&i.value.length===0);(0,e.watchEffect)(()=>{const n=p.value;if(!n)return;const a=I(i.value);a&&(n.files=a)}),P.useFormReset(()=>p.value??r.value,()=>c(t.defaultValue));function C(){return r.value?.checkValidity()??!0}function S(){return r.value?.reportValidity()??!0}function s(n){const a=n.target;a instanceof Element&&a.closest('[data-part="dropzone"]')||n.preventDefault()}(0,e.onMounted)(()=>{t.preventDocumentDrop&&(document.addEventListener("dragover",s),document.addEventListener("drop",s))}),(0,e.onBeforeUnmount)(()=>{document.removeEventListener("dragover",s),document.removeEventListener("drop",s)});let F="";function x(){const n=r.value;if(!n)return;const a=t.requiredMessage&&t.required&&i.value.length===0?t.requiredMessage:"";n.setCustomValidity(F||a)}(0,e.watchEffect)(x);function N(n){F=n,x()}return E({checkValidity:C,reportValidity:S,setCustomValidity:N,addFiles:g}),(0,e.provide)(o.FILE_UPLOAD_CONTEXT,{inputRef:h,files:i,disabled:(0,e.computed)(()=>t.disabled),readOnly:(0,e.computed)(()=>t.readOnly),accept:(0,e.computed)(()=>t.accept),multiple:(0,e.computed)(()=>t.multiple),directory:(0,e.computed)(()=>t.directory),capture:(0,e.computed)(()=>t.capture),addFiles:g,removeFile:L,clearFiles:D,openPicker:O,removeLabel:(0,e.computed)(()=>t.removeLabel),labelId:R,labelPresent:A,descriptionId:q,required:(0,e.computed)(()=>t.required),invalid:w}),(n,a)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-file-upload","data-part":"root","data-skdx-component":"file-upload","data-disabled":l.disabled?"":void 0},[(0,e.renderSlot)(n.$slots,"default",{},()=>[(0,e.createVNode)(U.default,{"show-list":l.showList,"show-preview":l.showPreview,"file-status":l.fileStatus,"render-file":l.renderFile},null,8,["show-list","show-preview","file-status","render-file"])]),l.name?((0,e.openBlock)(),(0,e.createElementBlock)("input",{key:0,ref_key:"formInputRef",ref:p,type:"file","aria-hidden":"true",tabindex:"-1",name:l.name,multiple:l.multiple,accept:l.accept,disabled:l.disabled,form:l.form,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,z)):(0,e.createCommentVNode)("",!0),(0,e.createElementVNode)("input",{ref_key:"validityRef",ref:r,type:"text","aria-hidden":"true",tabindex:"-1",required:l.required,disabled:l.disabled,form:l.form,"^value":i.value.map(u=>u.name).join(", "),style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,M),l.required?((0,e.openBlock)(),(0,e.createElementBlock)("span",{key:1,id:(0,e.unref)(q),style:{position:"absolute",border:"0",width:"1px",height:"1px",padding:"0",margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)","white-space":"nowrap","word-wrap":"normal"}},(0,e.toDisplayString)((0,e.unref)(o.requiredDescription)(w.value)),9,T)):(0,e.createCommentVNode)("",!0)],8,j))}});exports.default=$;
+const E=require("../utils/id.cjs"),y=require("../utils/liveAnnouncer.cjs"),P=require("../utils/useFormReset.cjs"),r=require("./context.cjs"),j=require("./FileUploadAnatomy.vue.cjs");let e=require("vue");var z=["data-disabled","data-readonly"],T=["name","multiple","accept","disabled","form"],U=["required","disabled","form","^value"],M=["id"],$=(0,e.defineComponent)({__name:"FileUpload",props:{value:{default:void 0},defaultValue:{default:()=>[]},accept:{default:void 0},multiple:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},maxFiles:{default:void 0},maxFileSize:{default:void 0},minFileSize:{default:void 0},validator:{type:Function,default:void 0},removeLabel:{type:Function,default:n=>`Remove ${n}`},name:{},form:{},required:{type:Boolean,default:!1},requiredMessage:{},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},directory:{type:Boolean,default:!1},capture:{},preventDocumentDrop:{type:Boolean,default:!0},showList:{type:Boolean,default:!0},showPreview:{type:Boolean,default:!1},fileStatus:{},renderFile:{}},emits:["update:value","value-change","file-reject"],setup(n,{expose:B,emit:V}){const t=n,m=V,h=(0,e.ref)(null),b=(0,e.ref)(t.defaultValue),i=(0,e.computed)(()=>t.value===void 0?b.value:t.value);function c(a){t.value===void 0&&(b.value=a),m("update:value",a),m("value-change",a)}function g(a){if(t.disabled||t.readOnly)return;const l=t.multiple?i.value:[],u=(t.multiple?t.maxFiles??1/0:1)-l.length,d=[],k=[];for(const v of Array.from(a)){const f=r.fileErrors(v,t);if(d.length>=u&&f.push("too-many-files"),f.length>0){k.push(f[0]),m("file-reject",{file:v,errors:f});continue}d.push(v)}y.announce(r.commitAnnouncement(d.length,k)),d.length!==0&&c([...l,...d])}function L(a){if(t.disabled||t.readOnly)return;const l=i.value.indexOf(a);l!==-1&&(y.announce(r.removalAnnouncement([a.name])),c([...i.value.slice(0,l),...i.value.slice(l+1)]))}function D(){t.disabled||t.readOnly||i.value.length===0||(y.announce(r.removalAnnouncement(i.value.map(a=>a.name))),c([]))}function O(){!t.disabled&&!t.readOnly&&h.value?.click()}const R=E.nextId("file-upload-label"),q=E.nextId("file-upload-description"),A=(0,e.ref)(!1);function I(a){if(typeof DataTransfer>"u")return null;const l=new DataTransfer;for(const u of a)l.items.add(u);return l.files}const p=(0,e.ref)(null),o=(0,e.ref)(null),w=(0,e.computed)(()=>t.invalid||t.required&&i.value.length===0);(0,e.watchEffect)(()=>{const a=p.value;if(!a)return;const l=I(i.value);l&&(a.files=l)}),P.useFormReset(()=>p.value??o.value,()=>c(t.defaultValue));function C(){return o.value?.checkValidity()??!0}function S(){return o.value?.reportValidity()??!0}function s(a){const l=a.target;l instanceof Element&&l.closest('[data-part="dropzone"]')||a.preventDefault()}(0,e.watchEffect)(a=>{!t.preventDocumentDrop||typeof document>"u"||(document.addEventListener("dragover",s),document.addEventListener("drop",s),a(()=>{document.removeEventListener("dragover",s),document.removeEventListener("drop",s)}))});let F="";function x(){const a=o.value;if(!a)return;const l=t.requiredMessage&&t.required&&i.value.length===0?t.requiredMessage:"";a.setCustomValidity(F||l)}(0,e.watchEffect)(x);function N(a){F=a,x()}return B({checkValidity:C,reportValidity:S,setCustomValidity:N,addFiles:g}),(0,e.provide)(r.FILE_UPLOAD_CONTEXT,{inputRef:h,files:i,disabled:(0,e.computed)(()=>t.disabled),readOnly:(0,e.computed)(()=>t.readOnly),accept:(0,e.computed)(()=>t.accept),multiple:(0,e.computed)(()=>t.multiple),directory:(0,e.computed)(()=>t.directory),capture:(0,e.computed)(()=>t.capture),addFiles:g,removeFile:L,clearFiles:D,openPicker:O,removeLabel:(0,e.computed)(()=>t.removeLabel),labelId:R,labelPresent:A,descriptionId:q,required:(0,e.computed)(()=>t.required),invalid:w}),(a,l)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-file-upload","data-part":"root","data-skdx-component":"file-upload","data-disabled":n.disabled?"":void 0,"data-readonly":n.readOnly?"":void 0},[(0,e.renderSlot)(a.$slots,"default",{},()=>[(0,e.createVNode)(j.default,{"show-list":n.showList,"show-preview":n.showPreview,"file-status":n.fileStatus,"render-file":n.renderFile},null,8,["show-list","show-preview","file-status","render-file"])]),n.name?((0,e.openBlock)(),(0,e.createElementBlock)("input",{key:0,ref_key:"formInputRef",ref:p,type:"file","aria-hidden":"true",tabindex:"-1",name:n.name,multiple:n.multiple,accept:n.accept,disabled:n.disabled,form:n.form,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,T)):(0,e.createCommentVNode)("",!0),(0,e.createElementVNode)("input",{ref_key:"validityRef",ref:o,type:"text","aria-hidden":"true",tabindex:"-1",required:n.required,disabled:n.disabled,form:n.form,"^value":i.value.map(u=>u.name).join(", "),style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,U),n.required?((0,e.openBlock)(),(0,e.createElementBlock)("span",{key:1,id:(0,e.unref)(q),style:{position:"absolute",border:"0",width:"1px",height:"1px",padding:"0",margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)","white-space":"nowrap","word-wrap":"normal"}},(0,e.toDisplayString)((0,e.unref)(r.requiredDescription)(w.value)),9,M)):(0,e.createCommentVNode)("",!0)],8,z))}});exports.default=$;

package/dist/file-upload/FileUpload.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{nextId as e}from"../utils/id.js";import{useFormReset as t}from"../utils/useFormReset.js";import{announce as a}from"../utils/liveAnnouncer.js";import{FILE_UPLOAD_CONTEXT as l,commitAnnouncement as i,fileErrors as o,removalAnnouncement as n,requiredDescription as r}from"./context.js";import d from"./FileUploadAnatomy.vue.js";import{computed as u,createCommentVNode as s,createElementBlock as p,createElementVNode as f,createVNode as c,defineComponent as m,onBeforeUnmount as v,onMounted as y,openBlock as h,provide as b,ref as g,renderSlot as w,toDisplayString as x,unref as F,watchEffect as q}from"vue";var k=["data-disabled"],B=["name","multiple","accept","disabled","form"],V=["required","disabled","form","^value"],E=["id"],L=/* @__PURE__ */m({__name:"FileUpload",props:{value:{default:void 0},defaultValue:{default:()=>[]},accept:{default:void 0},multiple:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},maxFiles:{default:void 0},maxFileSize:{default:void 0},minFileSize:{default:void 0},validate:{type:Function,default:void 0},removeLabel:{type:Function,default:e=>`Remove ${e}`},name:{default:void 0},form:{default:void 0},required:{type:Boolean,default:!1},requiredMessage:{default:void 0},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},directory:{type:Boolean,default:!1},capture:{default:void 0},preventDocumentDrop:{type:Boolean,default:!0},showList:{type:Boolean,default:!0},showPreview:{type:Boolean,default:!1},fileStatus:{type:Function,default:void 0},renderFile:{type:Function,default:void 0}},emits:["update:value","value-change","file-reject"],setup(m,{expose:L,emit:D}){const O=m,j=D,A=g(null),R=g(O.defaultValue),S=u(()=>void 0===O.value?R.value:O.value);function _(e){void 0===O.value&&(R.value=e),j("update:value",e),j("value-change",e)}function C(e){if(O.disabled||O.readOnly)return;const t=O.multiple?S.value:[],l=(O.multiple?O.maxFiles??1/0:1)-t.length,n=[],r=[];for(const t of Array.from(e)){const e=o(t,O);n.length>=l&&e.push("too-many-files"),e.length>0?(r.push(e[0]),j("file-reject",{file:t,errors:e})):n.push(t)}a(i(n.length,r)),0!==n.length&&_([...t,...n])}const I=e("file-upload-label"),P=e("file-upload-description"),M=g(!1),N=g(null),T=g(null),U=u(()=>O.invalid||O.required&&0===S.value.length);function z(e){const t=e.target;t instanceof Element&&t.closest('[data-part="dropzone"]')||e.preventDefault()}q(()=>{const e=N.value;if(!e)return;const t=function(e){if(typeof DataTransfer>"u")return null;const t=new DataTransfer;for(const a of e)t.items.add(a);return t.files}(S.value);t&&(e.files=t)}),t(()=>N.value??T.value,()=>_(O.defaultValue)),y(()=>{O.preventDocumentDrop&&(document.addEventListener("dragover",z),document.addEventListener("drop",z))}),v(()=>{document.removeEventListener("dragover",z),document.removeEventListener("drop",z)});let $="";function X(){const e=T.value;if(!e)return;const t=O.requiredMessage&&O.required&&0===S.value.length?O.requiredMessage:"";e.setCustomValidity($||t)}return q(X),L({checkValidity:function(){return T.value?.checkValidity()??!0},reportValidity:function(){return T.value?.reportValidity()??!0},setCustomValidity:function(e){$=e,X()},addFiles:C}),b(l,{inputRef:A,files:S,disabled:u(()=>O.disabled),readOnly:u(()=>O.readOnly),accept:u(()=>O.accept),multiple:u(()=>O.multiple),directory:u(()=>O.directory),capture:u(()=>O.capture),addFiles:C,removeFile:function(e){if(O.disabled||O.readOnly)return;const t=S.value.indexOf(e);-1!==t&&(a(n([e.name])),_([...S.value.slice(0,t),...S.value.slice(t+1)]))},clearFiles:function(){O.disabled||O.readOnly||0===S.value.length||(a(n(S.value.map(e=>e.name))),_([]))},openPicker:function(){!O.disabled&&!O.readOnly&&A.value?.click()},removeLabel:u(()=>O.removeLabel),labelId:I,labelPresent:M,descriptionId:P,required:u(()=>O.required),invalid:U}),(e,t)=>(h(),p("div",{class:"skdx-file-upload","data-part":"root","data-skdx-component":"file-upload","data-disabled":m.disabled?"":void 0},[w(e.$slots,"default",{},()=>[c(d,{"show-list":m.showList,"show-preview":m.showPreview,"file-status":m.fileStatus,"render-file":m.renderFile},null,8,["show-list","show-preview","file-status","render-file"])]),m.name?(h(),p("input",{key:0,ref_key:"formInputRef",ref:N,type:"file","aria-hidden":"true",tabindex:"-1",name:m.name,multiple:m.multiple,accept:m.accept,disabled:m.disabled,form:m.form,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,B)):s("",!0),f("input",{ref_key:"validityRef",ref:T,type:"text","aria-hidden":"true",tabindex:"-1",required:m.required,disabled:m.disabled,form:m.form,"^value":S.value.map(e=>e.name).join(", "),style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,V),m.required?(h(),p("span",{key:1,id:F(P),style:{position:"absolute",border:"0",width:"1px",height:"1px",padding:"0",margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)","white-space":"nowrap","word-wrap":"normal"}},x(F(r)(U.value)),9,E)):s("",!0)],8,k))}});export{L as default};
+import{nextId as e}from"../utils/id.js";import{announce as t}from"../utils/liveAnnouncer.js";import{useFormReset as a}from"../utils/useFormReset.js";import{FILE_UPLOAD_CONTEXT as l,commitAnnouncement as i,fileErrors as n,removalAnnouncement as o,requiredDescription as r}from"./context.js";import d from"./FileUploadAnatomy.vue.js";import{computed as u,createCommentVNode as s,createElementBlock as p,createElementVNode as f,createVNode as c,defineComponent as m,openBlock as v,provide as y,ref as h,renderSlot as b,toDisplayString as g,unref as w,watchEffect as x}from"vue";var F=["data-disabled","data-readonly"],q=["name","multiple","accept","disabled","form"],k=["required","disabled","form","^value"],V=["id"],B=/* @__PURE__ */m({__name:"FileUpload",props:{value:{default:void 0},defaultValue:{default:()=>[]},accept:{default:void 0},multiple:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},maxFiles:{default:void 0},maxFileSize:{default:void 0},minFileSize:{default:void 0},validator:{type:Function,default:void 0},removeLabel:{type:Function,default:e=>`Remove ${e}`},name:{},form:{},required:{type:Boolean,default:!1},requiredMessage:{},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},directory:{type:Boolean,default:!1},capture:{},preventDocumentDrop:{type:Boolean,default:!0},showList:{type:Boolean,default:!0},showPreview:{type:Boolean,default:!1},fileStatus:{},renderFile:{}},emits:["update:value","value-change","file-reject"],setup(m,{expose:B,emit:E}){const L=m,O=E,D=h(null),j=h(L.defaultValue),A=u(()=>void 0===L.value?j.value:L.value);function R(e){void 0===L.value&&(j.value=e),O("update:value",e),O("value-change",e)}function S(e){if(L.disabled||L.readOnly)return;const a=L.multiple?A.value:[],l=(L.multiple?L.maxFiles??1/0:1)-a.length,o=[],r=[];for(const t of Array.from(e)){const e=n(t,L);o.length>=l&&e.push("too-many-files"),e.length>0?(r.push(e[0]),O("file-reject",{file:t,errors:e})):o.push(t)}t(i(o.length,r)),0!==o.length&&R([...a,...o])}const _=e("file-upload-label"),C=e("file-upload-description"),I=h(!1),P=h(null),N=h(null),T=u(()=>L.invalid||L.required&&0===A.value.length);function z(e){const t=e.target;t instanceof Element&&t.closest('[data-part="dropzone"]')||e.preventDefault()}x(()=>{const e=P.value;if(!e)return;const t=function(e){if(typeof DataTransfer>"u")return null;const t=new DataTransfer;for(const a of e)t.items.add(a);return t.files}(A.value);t&&(e.files=t)}),a(()=>P.value??N.value,()=>R(L.defaultValue)),x(e=>{!L.preventDocumentDrop||typeof document>"u"||(document.addEventListener("dragover",z),document.addEventListener("drop",z),e(()=>{document.removeEventListener("dragover",z),document.removeEventListener("drop",z)}))});let M="";function U(){const e=N.value;if(!e)return;const t=L.requiredMessage&&L.required&&0===A.value.length?L.requiredMessage:"";e.setCustomValidity(M||t)}return x(U),B({checkValidity:function(){return N.value?.checkValidity()??!0},reportValidity:function(){return N.value?.reportValidity()??!0},setCustomValidity:function(e){M=e,U()},addFiles:S}),y(l,{inputRef:D,files:A,disabled:u(()=>L.disabled),readOnly:u(()=>L.readOnly),accept:u(()=>L.accept),multiple:u(()=>L.multiple),directory:u(()=>L.directory),capture:u(()=>L.capture),addFiles:S,removeFile:function(e){if(L.disabled||L.readOnly)return;const a=A.value.indexOf(e);-1!==a&&(t(o([e.name])),R([...A.value.slice(0,a),...A.value.slice(a+1)]))},clearFiles:function(){L.disabled||L.readOnly||0===A.value.length||(t(o(A.value.map(e=>e.name))),R([]))},openPicker:function(){!L.disabled&&!L.readOnly&&D.value?.click()},removeLabel:u(()=>L.removeLabel),labelId:_,labelPresent:I,descriptionId:C,required:u(()=>L.required),invalid:T}),(e,t)=>(v(),p("div",{class:"skdx-file-upload","data-part":"root","data-skdx-component":"file-upload","data-disabled":m.disabled?"":void 0,"data-readonly":m.readOnly?"":void 0},[b(e.$slots,"default",{},()=>[c(d,{"show-list":m.showList,"show-preview":m.showPreview,"file-status":m.fileStatus,"render-file":m.renderFile},null,8,["show-list","show-preview","file-status","render-file"])]),m.name?(v(),p("input",{key:0,ref_key:"formInputRef",ref:P,type:"file","aria-hidden":"true",tabindex:"-1",name:m.name,multiple:m.multiple,accept:m.accept,disabled:m.disabled,form:m.form,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,q)):s("",!0),f("input",{ref_key:"validityRef",ref:N,type:"text","aria-hidden":"true",tabindex:"-1",required:m.required,disabled:m.disabled,form:m.form,"^value":A.value.map(e=>e.name).join(", "),style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,k),m.required?(v(),p("span",{key:1,id:w(C),style:{position:"absolute",border:"0",width:"1px",height:"1px",padding:"0",margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)","white-space":"nowrap","word-wrap":"normal"}},g(w(r)(T.value)),9,V)):s("",!0)],8,F))}});export{B as default};