@nxgt/material-vue 0.24.0 → 0.25.0

package/dist/lib/components/ui/media/file-preview/partials/file-preview-body.vue.d.ts

@@ -0,0 +1,21 @@
+import { DescribedFile } from '@nxgt/material-core/file-preview';
+import { FilePreviewStatus as Status } from '../types';
+import { TextPreviewState } from '../use-text-preview';
+/** The part of `FilePreview` that depends on the file's kind and the status. */
+type __VLS_Props = {
+    status: Status;
+    described: DescribedFile;
+    displayName: string;
+    href: string | undefined;
+    text: TextPreviewState;
+    maxTextBytes?: number;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "media-error": () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onMedia-error"?: (() => any) | undefined;
+}>, {
+    maxTextBytes: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/lib/components/ui/media/file-preview/partials/file-preview-card.vue.d.ts

@@ -0,0 +1,15 @@
+import { FileKind } from '@nxgt/material-core/file-preview';
+/** Any other file: its icon, name, size and type, and a download link. */
+type __VLS_Props = {
+    kind: FileKind;
+    /** What the card shows. */
+    name: string;
+    /** What the download saves as. */
+    fileName: string;
+    size?: number;
+    type: string;
+    href: string | undefined;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/lib/components/ui/media/file-preview/partials/file-preview-download.vue.d.ts

@@ -0,0 +1,11 @@
+/**
+ * A link that saves the file under `name` (the browser's choice when `''`).
+ * Nothing until `href` is known.
+ */
+type __VLS_Props = {
+    href: string | undefined;
+    name: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/lib/components/ui/media/file-preview/partials/file-preview-media.vue.d.ts

@@ -0,0 +1,17 @@
+/**
+ * An image, a video or an audio file in the browser's own element: `<img>`
+ * named by the file name, `<video controls>` and `<audio controls>` labelled
+ * with it. `error` when the element cannot load `src`.
+ */
+type __VLS_Props = {
+    kind: 'image' | 'video' | 'audio';
+    src: string;
+    name: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    error: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onError?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/lib/components/ui/media/file-preview/partials/file-preview-pdf.vue.d.ts

@@ -0,0 +1,21 @@
+/**
+ * A PDF in `PdfReader`, loaded lazily (after mount: never on a server); the
+ * `fallback` slot (the file card) when the viewer cannot be loaded.
+ */
+type __VLS_Props = {
+    file: Blob | string;
+    fileName: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    fallback?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/lib/components/ui/media/file-preview/partials/file-preview-status.vue.d.ts

@@ -0,0 +1,22 @@
+/**
+ * `pending`: the server's and the pre-mount box, with no text, nothing to
+ * mismatch. `loading`: a spinner and its message, seen only (the figure's
+ * live region is what is heard). `error`: the message, and in the slot
+ * whatever can still be done (a download).
+ */
+type __VLS_Props = {
+    state: 'pending' | 'loading' | 'error';
+};
+declare var __VLS_11: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/lib/components/ui/media/file-preview/partials/file-preview-text.vue.d.ts

@@ -0,0 +1,16 @@
+import { FileKind, TextPreview } from '@nxgt/material-core/file-preview';
+/**
+ * A text kind's content: JSON in `JsonViewer` and Markdown rendered when the
+ * whole file was read, else (and for text and CSV) as it is, in a `<pre>`.
+ * What scrolls is a region named after the file, and takes focus so a
+ * keyboard can scroll it.
+ */
+type __VLS_Props = {
+    kind: FileKind;
+    name: string;
+    preview: TextPreview;
+    maxBytes: number;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/lib/components/ui/media/file-preview/types.d.ts

@@ -0,0 +1,19 @@
+import { FilePreviewSource } from '@nxgt/material-core/file-preview';
+import { HTMLAttributes } from 'vue';
+/** Where a preview is: server or first render, reading, shown, failed. */
+export type FilePreviewStatus = 'pending' | 'loading' | 'ready' | 'error';
+export type FilePreviewProps = {
+    /**
+     * The file: a `File` or `Blob`, or a URL. Nothing renders without one. A
+     * URL must be `http(s):`, relative, `blob:`, or a `data:` URL of an
+     * image, video, audio, plain text, CSV, Markdown, JSON or PDF; any other (`javascript:`, …) shows the error state.
+     */
+    file: FilePreviewSource | null | undefined;
+    /** MIME type; overrides the `Blob`'s. Picks the kind before the extension does. */
+    type?: string;
+    /** Name shown, used as the image's alt text and the download's file name; overrides the `File`'s. */
+    name?: string;
+    /** How much of a text, JSON, CSV or Markdown file is read and shown. 256 KB by default. */
+    maxTextBytes?: number;
+    class?: HTMLAttributes['class'];
+};

package/dist/lib/components/ui/media/file-preview/use-file-preview.d.ts

@@ -0,0 +1,21 @@
+import { DescribedFile } from '@nxgt/material-core/file-preview';
+import { ComputedRef, Ref } from 'vue';
+import { FilePreviewProps, FilePreviewStatus } from './types';
+import { TextPreviewState } from './use-text-preview';
+export type FilePreviewState = {
+    described: ComputedRef<DescribedFile | null>;
+    status: ComputedRef<FilePreviewStatus>;
+    /** What the media element and the download link point at, once known. */
+    href: ComputedRef<string | undefined>;
+    text: Ref<TextPreviewState>;
+    /** For an `<img>`, `<video>` or `<audio>` that failed to load `href`. */
+    onMediaError: () => void;
+};
+/**
+ * Everything `FilePreview` decides: the file's kind, the object URL of a
+ * `Blob` (made after mount, revoked on change and unmount), the text of a
+ * text kind, and the status. On a server and before mount the status is
+ * `'pending'` and nothing is read; a URL `safePreviewUrl` refuses is
+ * `'error'` everywhere and is never used. `onError` is called once per failure.
+ */
+export declare function useFilePreview(props: FilePreviewProps, onError: (error: unknown) => void): FilePreviewState;

package/dist/lib/components/ui/media/file-preview/use-text-preview.d.ts

@@ -0,0 +1,17 @@
+import { TextPreview } from '@nxgt/material-core/file-preview';
+import { Ref } from 'vue';
+export type TextPreviewState = {
+    status: 'loading';
+} | {
+    status: 'ready';
+    preview: TextPreview;
+} | {
+    status: 'error';
+    error: unknown;
+};
+/**
+ * The first `maxBytes` of `source` as text, read once `source` is defined
+ * (the caller leaves it `undefined` until mounted: never on a server). A new
+ * source aborts the previous read.
+ */
+export declare function useTextPreview(source: () => Blob | string | undefined, maxBytes: () => number | undefined): Ref<TextPreviewState>;

package/dist/lib/components/ui/media/files-form-field/files-form-field.vue.d.ts

@@ -0,0 +1,29 @@
+import { AutocompleteOption, AutocompleteProps } from '../../selection/autocomplete/autocomplete.vue';
+export type FilesFormFieldProps<T extends AutocompleteOption = AutocompleteOption> = {
+    name: string;
+} & Omit<AutocompleteProps<T>, 'modelValue' | 'error' | 'name' | 'options'> & {
+    /** Shows each selected file as a thumbnail rather than a file icon. */
+    image?: boolean;
+    /** Builds the thumbnail's URL from a value (a key, a path). Defaults to the value. */
+    imageLinkBuilder?: (image: string) => string;
+    /** Files to pick from; any URL can be typed too (`freeSolo`). */
+    options?: T[];
+};
+declare const __VLS_export: <T extends AutocompleteOption = AutocompleteOption>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<FilesFormFieldProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/lib/components/ui/media/files-form-field/index.d.ts

@@ -0,0 +1,2 @@
+export type { FilesFormFieldProps } from './files-form-field.vue';
+export { default as FilesFormField } from './files-form-field.vue';

package/dist/lib/components/ui/media/image-cropper/partials/image-cropper-canvas.vue.d.ts

@@ -12,8 +12,8 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {
     onChange?: ((value: ImageCropperCanvasChange) => any) | undefined;
 }>, {
     zoom: number;
-    cropShape: ImageCropShape;
     rotation: number;
+    cropShape: ImageCropShape;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/lib/components/ui/media/index.d.ts

@@ -1,6 +1,8 @@
 export * from './camera';
 export * from './carousel';
 export * from './file-list';
+export * from './file-preview';
+export * from './files-form-field';
 export * from './galleries';
 export * from './image-cropper';
 export * from './image-field';

package/dist/lib/components/ui/media/pdf-viewer/partials/pdf-page.vue.d.ts

@@ -24,10 +24,10 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     renderText: boolean;
-    eager: boolean;
     searchQuery: string;
     nightMode: boolean;
     isCurrent: boolean;
+    eager: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/lib/components/ui/media/pdf-viewer/partials/pdf-reader-body.vue.d.ts

@@ -14,20 +14,20 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     goToPage: (page: number) => any;
-    setOutline: (outline: PdfOutlineNode[]) => any;
     loadSuccess: (pdf: PdfSizedDocument) => any;
     loadError: (error: Error) => any;
     passwordProtected: (incorrect: boolean) => any;
     passwordSubmit: () => any;
+    setOutline: (outline: PdfOutlineNode[]) => any;
     "set-sidebar-tab": (tab: import('..').PdfSidebarTab) => any;
     documentChange: (pdf: import('pdfjs-dist/types/src/display/api').PDFDocumentProxy | null) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onGoToPage?: ((page: number) => any) | undefined;
-    onSetOutline?: ((outline: PdfOutlineNode[]) => any) | undefined;
     onLoadSuccess?: ((pdf: PdfSizedDocument) => any) | undefined;
     onLoadError?: ((error: Error) => any) | undefined;
     onPasswordProtected?: ((incorrect: boolean) => any) | undefined;
     onPasswordSubmit?: (() => any) | undefined;
+    onSetOutline?: ((outline: PdfOutlineNode[]) => any) | undefined;
     "onSet-sidebar-tab"?: ((tab: import('..').PdfSidebarTab) => any) | undefined;
     onDocumentChange?: ((pdf: import('pdfjs-dist/types/src/display/api').PDFDocumentProxy | null) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/lib/components/ui/media/upload/network-upload-field/use-image-preview.d.ts

@@ -1 +1,9 @@
-export declare function useImagePreview(file: () => File | undefined): import('vue').Ref<string | undefined, string | undefined>;
+import { Ref } from 'vue';
+/**
+ * An object URL for `blob`, made while `enabled` (pass `useIsClient()` to
+ * make none on a server) and revoked when `blob` changes or the component
+ * unmounts. `undefined` until made. `FilePreview` uses it.
+ */
+export declare function useBlobUrl(blob: () => Blob | undefined, enabled?: Ref<boolean>): Ref<string | undefined>;
+/** An object URL previewing `file` while it is an image, revoked on change. */
+export declare function useImagePreview(file: () => File | undefined): Ref<string | undefined, string | undefined>;

package/dist/lib/components/ui/primitives/tabs/Tabs.vue.d.ts

@@ -1,7 +1,10 @@
 import { TabsRootProps } from 'reka-ui';
 import { HTMLAttributes } from 'vue';
+import { TabsVariant } from './tabs-variant';
 type __VLS_Props = TabsRootProps & {
     class?: HTMLAttributes['class'];
+    /** `bar` (the default) or `line`, read by `TabsList` and `TabsTrigger`. */
+    variant?: TabsVariant;
 };
 declare var __VLS_8: {
     modelValue: string | number | undefined;

package/dist/lib/components/ui/primitives/tabs/index.d.ts

@@ -2,3 +2,4 @@ export { default as Tabs } from './Tabs.vue';
 export { default as TabsContent } from './TabsContent.vue';
 export { default as TabsList } from './TabsList.vue';
 export { default as TabsTrigger } from './TabsTrigger.vue';
+export type { TabsVariant } from './tabs-variant';

package/dist/lib/components/ui/primitives/tabs/tabs-variant.d.ts

@@ -0,0 +1,9 @@
+import { ComputedRef, InjectionKey } from 'vue';
+/**
+ * `bar` is the look `Tabs` always had here; `line` is `@nxgt/material`'s
+ * scrolling row of light tabs on a muted strip (used by `CodeGroup`).
+ */
+export type TabsVariant = 'bar' | 'line';
+export declare const TABS_VARIANT: InjectionKey<ComputedRef<TabsVariant>>;
+/** The variant of the enclosing `Tabs`; `bar` outside one. */
+export declare function useTabsVariant(): ComputedRef<TabsVariant>;

package/dist/lib/components/ui/selection/autocomplete/autocomplete-form-field.vue.d.ts

@@ -1,7 +1,33 @@
-import { AutocompleteProps } from './autocomplete.vue';
-type __VLS_Props = {
-    name: string;
-} & Omit<AutocompleteProps, 'modelValue' | 'error' | 'name'>;
-declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+import { AutocompleteOption, AutocompleteProps } from './autocomplete.vue';
+declare const __VLS_export: <T extends AutocompleteOption = AutocompleteOption>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<{
+        name: string;
+    } & Omit<AutocompleteProps<T>, "name" | "error" | "modelValue">> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        option?: (props: {
+            option: T;
+            index: number;
+            selected: boolean;
+        }) => unknown;
+        'selected-leading'?: (props: {
+            option: T;
+        }) => unknown;
+        actions?: (props: {
+            query: string;
+        }) => unknown;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/lib/components/ui/selection/autocomplete/autocomplete-items.d.ts

@@ -0,0 +1,23 @@
+import { AutocompleteOption } from './autocomplete.vue';
+/** One option as the list shows it: its value and label, and the option itself. */
+export type AutocompleteItem<T> = {
+    value: string;
+    label: string;
+    option: T;
+};
+export type OptionReaders<T> = {
+    getOptionValue?: (option: T) => string;
+    getOptionLabel?: (option: T) => string;
+};
+/**
+ * Every option as an item, then every selected value that is no option (a
+ * free-solo one) as itself. A free-solo value's `option` is `{ value, label }`
+ * cast to `T`, as `@nxgt/material` hands it: it has none of your extra fields.
+ */
+export declare function autocompleteItems<T extends AutocompleteOption>(options: T[], selected: string[], { getOptionValue, getOptionLabel }: OptionReaders<T>): AutocompleteItem<T>[];
+/** The selection after picking `value`: unchanged (same array) when already in it. */
+export declare function withPickedValue(mode: 'single' | 'multiple', selected: string[], value: string): string[];
+/** The `modelValue` a selection emits: the list, or its first value (or `null`). */
+export declare function autocompleteModelValue(mode: 'single' | 'multiple', next: string[]): string | string[] | null;
+/** The items of `selected`, in its order. */
+export declare function selectedAutocompleteItems<T>(items: AutocompleteItem<T>[], selected: string[]): AutocompleteItem<T>[];

package/dist/lib/components/ui/selection/autocomplete/autocomplete.vue.d.ts

@@ -2,7 +2,13 @@ export type AutocompleteOption = {
     value: string;
     label: string;
 };
-export type AutocompleteProps = {
+/**
+ * `T` is your option type, inferred from `options`: `getOptionValue` and
+ * `getOptionLabel` read it (they default to its `value` and `label`), and the
+ * `#option` and `#selected-leading` slots receive it whole. The value stays
+ * the options' values: a `string` (single) or `string[]` (multiple).
+ */
+export type AutocompleteProps<T extends AutocompleteOption = AutocompleteOption> = {
     label?: string;
     placeholder?: string;
     helperText?: string;
@@ -12,22 +18,51 @@ export type AutocompleteProps = {
     class?: string;
     name?: string;
     id?: string;
-    options: AutocompleteOption[];
+    options: T[];
     mode?: 'single' | 'multiple';
     freeSolo?: boolean;
     empty?: string;
     modelValue?: string | string[] | null;
+    /** The value an option stands for. Defaults to its `value`. */
+    getOptionValue?: (option: T) => string;
+    /** The text an option shows and is searched by. Defaults to its `label`. */
+    getOptionLabel?: (option: T) => string;
+    /** The free-solo button's text for `query`. Defaults to `Add "<query>"`, translated. */
+    freeSoloLabel?: (query: string) => string;
+};
+declare const __VLS_export: <T extends AutocompleteOption = AutocompleteOption>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<AutocompleteProps<T> & {
+        "onUpdate:modelValue"?: ((value: string | string[] | null) => any) | undefined;
+        onQueryChange?: ((query: string) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        /** One option in the list (`renderOption`). Defaults to its label. */
+        option?: (props: {
+            option: T;
+            index: number;
+            selected: boolean;
+        }) => unknown;
+        /** Before a selected option's chip label (`renderSelectedLeading`). */
+        'selected-leading'?: (props: {
+            option: T;
+        }) => unknown;
+        /** Above the list, beside the query (`actions`). */
+        actions?: (props: {
+            query: string;
+        }) => unknown;
+    };
+    emit: ((evt: "update:modelValue", value: string | string[] | null) => void) & ((evt: "queryChange", query: string) => void);
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-declare const __VLS_export: import('vue').DefineComponent<AutocompleteProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: string | string[] | null) => any;
-    queryChange: (query: string) => any;
-}, string, import('vue').PublicProps, Readonly<AutocompleteProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | string[] | null) => any) | undefined;
-    onQueryChange?: ((query: string) => any) | undefined;
-}>, {
-    mode: "single" | "multiple";
-    modelValue: string | string[] | null;
-    freeSolo: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/lib/components/ui/selection/autocomplete/filter-options.d.ts

@@ -1,5 +1,6 @@
 import { AutocompleteOption } from './autocomplete.vue';
-export declare function filterAutocompleteOptions(options: AutocompleteOption[], query: string): AutocompleteOption[];
+/** The options whose label or value holds `query`; any extra fields are kept. */
+export declare function filterAutocompleteOptions<O extends AutocompleteOption>(options: O[], query: string): O[];
 export declare function selectedAutocompleteValues(mode: 'single' | 'multiple', modelValue?: string | string[] | null): string[];
 export declare function extraAutocompleteOptions(options: AutocompleteOption[], selected: string[]): {
     value: string;

package/dist/lib/components/ui/selection/autocomplete/partials/autocomplete-box.vue.d.ts

@@ -9,9 +9,15 @@ type __VLS_Props = {
     selected: {
         value: string;
         label: string;
+        option?: unknown;
     }[];
 };
-declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {
+type __VLS_Slots = {
+    'selected-leading'?: (props: {
+        option: unknown;
+    }) => unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     focus: () => void | undefined;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     input: (event: Event) => any;
@@ -26,5 +32,11 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {
     onFocus?: (() => any) | undefined;
     onKeydown?: ((event: KeyboardEvent) => any) | undefined;
 }>, {}, {}, {}, {}, 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/lib/components/ui/selection/autocomplete/partials/autocomplete-list.vue.d.ts

@@ -1,19 +1,33 @@
-import { AutocompleteOption } from '../autocomplete.vue';
+import { AutocompleteItem } from '../autocomplete-items';
 type __VLS_Props = {
     name?: string;
     query: string;
-    filtered: AutocompleteOption[];
+    filtered: AutocompleteItem<unknown>[];
     selected: string[];
     canAdd: boolean;
     empty: string;
     addLabel: string;
 };
-declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+type __VLS_Slots = {
+    option?: (props: {
+        item: AutocompleteItem<unknown>;
+        index: number;
+        selected: boolean;
+    }) => unknown;
+    actions?: () => unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     pick: (value: string) => any;
     add: () => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onPick?: ((value: string) => any) | undefined;
     onAdd?: (() => any) | undefined;
 }>, {}, {}, {}, {}, 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/lib/components/ui/selection/autocomplete/use-autocomplete-items.d.ts

@@ -0,0 +1,15 @@
+import { Ref } from 'vue';
+import { AutocompleteOption } from './autocomplete.vue';
+import { OptionReaders } from './autocomplete-items';
+export type AutocompleteItemsOptions<T> = OptionReaders<T> & {
+    options: T[];
+    mode: 'single' | 'multiple';
+    modelValue?: string | string[] | null;
+};
+/** The selected values, every item, the ones the query keeps, and the selected ones. */
+export declare function useAutocompleteItems<T extends AutocompleteOption>(props: AutocompleteItemsOptions<T>, query: Readonly<Ref<string>>): {
+    selectedValues: import('vue').ComputedRef<string[]>;
+    allItems: import('vue').ComputedRef<import('./autocomplete-items').AutocompleteItem<T>[]>;
+    filtered: import('vue').ComputedRef<import('./autocomplete-items').AutocompleteItem<T>[]>;
+    selectedItems: import('vue').ComputedRef<import('./autocomplete-items').AutocompleteItem<T>[]>;
+};

package/dist/lib/components/ui/selection/autocomplete/use-autocomplete-open.d.ts

@@ -0,0 +1,15 @@
+import { Ref } from 'vue';
+/**
+ * Whether the list is open, and the handlers that open it: focus, a click
+ * on the box, typing. A click outside closes it; a disabled field never opens.
+ */
+export declare function useAutocompleteOpen(props: {
+    disabled?: boolean;
+}, query: Ref<string>, root: Readonly<Ref<HTMLElement | null>>, box: Readonly<Ref<{
+    focus: () => void;
+} | null>>): {
+    open: Ref<boolean, boolean>;
+    onFocus(): void;
+    focusInput(): void;
+    onInput(event: Event): void;
+};

package/dist/lib/components/ui/selection/autocomplete/use-autocomplete-texts.d.ts

@@ -0,0 +1,14 @@
+import { Ref } from 'vue';
+import { AutocompleteItem } from './autocomplete-items';
+type Options = {
+    freeSolo: boolean;
+    empty?: string;
+    freeSoloLabel?: (query: string) => string;
+};
+/** Whether the typed text can be added (free solo), and the list's two texts. */
+export declare function useAutocompleteTexts<T>(props: Options, query: Ref<string>, items: Readonly<Ref<AutocompleteItem<T>[]>>): {
+    canAddFreeSolo: import('vue').ComputedRef<boolean>;
+    emptyText: import('vue').ComputedRef<string>;
+    addLabel: import('vue').ComputedRef<string>;
+};
+export {};

package/dist/lib/components/ui/selection/autocomplete/use-autocomplete.d.ts

@@ -0,0 +1,34 @@
+import { Ref } from 'vue';
+import { AutocompleteOption } from './autocomplete.vue';
+import { AutocompleteItemsOptions } from './use-autocomplete-items';
+type Options<T> = AutocompleteItemsOptions<T> & {
+    freeSolo: boolean;
+    disabled?: boolean;
+    empty?: string;
+    freeSoloLabel?: (query: string) => string;
+};
+type Emit = {
+    (event: 'update:modelValue', value: string | string[] | null): void;
+    (event: 'queryChange', query: string): void;
+};
+/** Autocomplete's state and actions; the SFC only lays them out. */
+export declare function useAutocomplete<T extends AutocompleteOption>(props: Options<T>, emit: Emit, root: Readonly<Ref<HTMLElement | null>>, box: Readonly<Ref<{
+    focus: () => void;
+} | null>>): {
+    pick: (value: string) => void;
+    remove: (value: string) => void;
+    addFreeSolo: () => void;
+    onKeydown: (event: KeyboardEvent) => void;
+    canAddFreeSolo: import('vue').ComputedRef<boolean>;
+    emptyText: import('vue').ComputedRef<string>;
+    addLabel: import('vue').ComputedRef<string>;
+    query: Ref<string, string>;
+    selectedValues: import('vue').ComputedRef<string[]>;
+    selectedItems: import('vue').ComputedRef<import('./autocomplete-items').AutocompleteItem<T>[]>;
+    filtered: import('vue').ComputedRef<import('./autocomplete-items').AutocompleteItem<T>[]>;
+    open: Ref<boolean, boolean>;
+    onFocus(): void;
+    focusInput(): void;
+    onInput(event: Event): void;
+};
+export {};