@nxgt/material-vue 0.31.0 → 0.33.0

package/dist/lib/components/ui/fields/opening-hours/consts.d.ts

@@ -1,12 +1,23 @@
 import { z } from 'zod';
 import { MaterialLocaleKey } from '../../../../i18n/types';
 import { OpeningHour } from './models';
-export declare const OpeningHoursSchema: z.ZodObject<{
+/**
+ * The schema of one opening hour: `dayOfWeek` `0`-`6` (coerced from a
+ * string), `openTime` and `closeTime` as `HH:mm`, `isClosed`. Built on the
+ * first call, then the same schema: nothing is built when the module loads,
+ * so an app under a strict CSP can call `z.config({ jitless: true })` first.
+ */
+export declare const openingHoursSchema: () => z.ZodObject<{
     openTime: z.ZodOptional<z.ZodString>;
     closeTime: z.ZodOptional<z.ZodString>;
     isClosed: z.ZodOptional<z.ZodBoolean>;
     dayOfWeek: z.ZodCoercedNumber<unknown>;
 }, z.core.$strip>;
+/**
+ * @deprecated Use `openingHoursSchema()`; removed in 1.0. Built on its first
+ * use, and behaves as the schema the factory returns (not the same object).
+ */
+export declare const OpeningHoursSchema: ReturnType<typeof openingHoursSchema>;
 /** English fallback for every `material.opening-hours.days.*` key. */
 export declare const DAY_OF_WEEK_FALLBACKS: readonly ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
 /**

package/dist/lib/components/ui/fields/search-field/index.d.ts

@@ -1,4 +1,5 @@
-export { debounce } from './debounce';
+export type { Debounced } from '@nxgt/material-core/debounce';
+export { debounce } from '@nxgt/material-core/debounce';
 export type { SearchFieldProps } from './search-field.vue';
 export { default as SearchField } from './search-field.vue';
 export { default as SearchFormField } from './search-form-field.vue';

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

@@ -10,6 +10,7 @@ export * from './input';
 export * from './input-group';
 export * from './kbd';
 export * from './label';
+export * from './nonce-provider';
 export * from './scroll-area';
 export * from './separator';
 export * from './table';

package/dist/lib/components/ui/primitives/nonce-provider/index.d.ts

@@ -0,0 +1,2 @@
+export type { NonceProviderProps } from './nonce-provider.vue';
+export { default as NonceProvider } from './nonce-provider.vue';

package/dist/lib/components/ui/primitives/nonce-provider/nonce-provider.vue.d.ts

@@ -0,0 +1,20 @@
+export type NonceProviderProps = {
+    /**
+     * This request's Content Security Policy nonce: the one in the
+     * `style-src-elem 'nonce-…'` directive (`useNonce()` with nuxt-security).
+     */
+    nonce?: string;
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<NonceProviderProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<NonceProviderProps> & 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/selection/autocomplete/autocomplete-items.d.ts

@@ -15,6 +15,11 @@ export type OptionReaders<T> = {
  * 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 options of `lists`, once each by value: the first list's copy wins its
+ * place, a later one only adds what the earlier lack.
+ */
+export declare function knownAutocompleteOptions<T extends AutocompleteOption>(lists: T[][], { getOptionValue }: OptionReaders<T>): 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`). */

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

@@ -1,3 +1,4 @@
+import { AutocompleteSearchProps } from './search-types';
 export type AutocompleteOption = {
     value: string;
     label: string;
@@ -18,7 +19,8 @@ export type AutocompleteProps<T extends AutocompleteOption = AutocompleteOption>
     class?: string;
     name?: string;
     id?: string;
-    options: T[];
+    /** The options; with `onSearch`, only those to show before a search (the selected ones). */
+    options?: T[];
     mode?: 'single' | 'multiple';
     freeSolo?: boolean;
     empty?: string;
@@ -29,10 +31,11 @@ export type AutocompleteProps<T extends AutocompleteOption = AutocompleteOption>
     getOptionLabel?: (option: T) => string;
     /** The free-solo button's text for `query`. Defaults to `Add "<query>"`, translated. */
     freeSoloLabel?: (query: string) => string;
-};
+} & AutocompleteSearchProps<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<AutocompleteProps<T> & {
         "onUpdate:modelValue"?: ((value: string | string[] | null) => any) | undefined;
+        onSearchError?: ((error: unknown) => any) | undefined;
         onQueryChange?: ((query: string) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
@@ -55,7 +58,7 @@ declare const __VLS_export: <T extends AutocompleteOption = AutocompleteOption>(
             query: string;
         }) => unknown;
     };
-    emit: ((evt: "update:modelValue", value: string | string[] | null) => void) & ((evt: "queryChange", query: string) => void);
+    emit: ((evt: "update:modelValue", value: string | string[] | null) => void) & ((evt: "searchError", error: unknown) => void) & ((evt: "queryChange", query: string) => void);
 }>) => import('vue').VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

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

@@ -1,6 +1,13 @@
 import { AutocompleteOption } from './autocomplete.vue';
-/** 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[];
+import { AutocompleteItem } from './autocomplete-items';
+import { AutocompleteFilter } from './search-types';
+/**
+ * The options whose label or value holds `query`, ignoring case and accents
+ * (`'e'` keeps "École"), lowercased for `locale`; any extra fields are kept.
+ */
+export declare function filterAutocompleteOptions<O extends AutocompleteOption>(options: O[], query: string, locale?: string): O[];
+/** The items `filter` keeps for `query` (trimmed; an empty one keeps all). */
+export declare function filterAutocompleteItems<T>(items: AutocompleteItem<T>[], query: string, filter: AutocompleteFilter<T>, locale?: string): AutocompleteItem<T>[];
 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/index.d.ts

@@ -2,3 +2,4 @@ export type { AutocompleteOption, AutocompleteProps } from './autocomplete.vue';
 export { default as Autocomplete } from './autocomplete.vue';
 export { default as AutocompleteFormField } from './autocomplete-form-field.vue';
 export { filterAutocompleteOptions } from './filter-options';
+export type { AutocompleteFilter, AutocompleteSearch, AutocompleteSearchContext, AutocompleteSearchProps, } from './search-types';

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

@@ -5,7 +5,14 @@ type __VLS_Props = {
     filtered: AutocompleteItem<unknown>[];
     selected: string[];
     canAdd: boolean;
-    empty: string;
+    /** The empty text, when nothing matches and nothing can be added. */
+    empty: string | null;
+    /** A search is running: the list is `aria-busy` and says so. */
+    loading: boolean;
+    /** Why the search failed, shown in place of the options. */
+    failure: string | null;
+    /** The minimum query length `onSearch` waits for, as a sentence. */
+    hint: string | null;
     addLabel: string;
 };
 type __VLS_Slots = {

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

@@ -0,0 +1,34 @@
+/**
+ * How the list is filtered as the user types: `'accent-insensitive'` (the
+ * default without `onSearch`) keeps the options whose label or value holds
+ * the query, ignoring case and accents; `'none'` shows the options as given
+ * (the default with `onSearch`, or when you filter on a server); a function
+ * decides per option, given the trimmed query (never called for an empty one).
+ */
+export type AutocompleteFilter<T> = 'accent-insensitive' | 'none' | ((option: T, query: string) => boolean);
+/** What `onSearch` is handed besides the query: aborted once it is stale. */
+export type AutocompleteSearchContext = {
+    signal: AbortSignal;
+};
+/** A server search: the options for `query`. Pass `signal` on to `fetch`. */
+export type AutocompleteSearch<T> = (query: string, context: AutocompleteSearchContext) => Promise<T[]>;
+/** The async and filtering props; see the Autocomplete page of the docs. */
+export type AutocompleteSearchProps<T> = {
+    /**
+     * Server search (`@search`, a function prop): called once typing pauses
+     * (`debounceMs`) with the query and an `AbortSignal`; its results become
+     * the list. A response that lands after a newer query's is dropped.
+     * `options` then only needs the selected option(s), for their chips.
+     */
+    onSearch?: AutocompleteSearch<T>;
+    /** Controlled loading, when you fetch `options` yourself on `queryChange`. */
+    loading?: boolean;
+    /** Controlled failure text, shown and announced in place of the options. */
+    searchError?: string;
+    /** The pause before `onSearch` and `queryChange`, in ms. Default 250. */
+    debounceMs?: number;
+    /** `onSearch` waits for this many characters. Default 1. */
+    minQueryLength?: number;
+    /** Default `'accent-insensitive'`, or `'none'` with `onSearch`. */
+    filter?: AutocompleteFilter<T>;
+};

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

@@ -1,15 +1,32 @@
+import { AsyncSearchState } from '@nxgt/material-core/async-search';
 import { Ref } from 'vue';
 import { AutocompleteOption } from './autocomplete.vue';
 import { OptionReaders } from './autocomplete-items';
+import { AutocompleteFilter } from './search-types';
 export type AutocompleteItemsOptions<T> = OptionReaders<T> & {
-    options: T[];
+    options?: T[];
     mode: 'single' | 'multiple';
     modelValue?: string | string[] | null;
+    filter?: AutocompleteFilter<T>;
 };
-/** 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>>): {
+type Lists<T> = {
+    query: Readonly<Ref<string>>;
+    /** `onSearch`'s state, `null` without it. */
+    search: Readonly<Ref<AsyncSearchState<T> | null>>;
+    /** The provider's language, which the accent-insensitive filter lowercases for. */
+    locale: () => string | undefined;
+};
+/**
+ * The selected values; every item a value may stand for (`options`, the
+ * search results, the options picked so far, then the free-solo values);
+ * the list the query keeps; and the selected items. A picked option keeps
+ * its chip once a new search no longer returns it.
+ */
+export declare function useAutocompleteItems<T extends AutocompleteOption>(props: AutocompleteItemsOptions<T>, { query, search, locale }: Lists<T>): {
     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>[]>;
+    remember: (value: string) => void;
 };
+export {};

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

@@ -0,0 +1,28 @@
+import { Ref } from 'vue';
+import { AutocompleteOption } from './autocomplete.vue';
+import { AutocompleteSearchProps } from './search-types';
+import { AutocompleteItemsOptions } from './use-autocomplete-items';
+export type AutocompleteListOptions<T> = AutocompleteItemsOptions<T> & Omit<AutocompleteSearchProps<T>, 'filter'> & {
+    freeSolo: boolean;
+    empty?: string;
+};
+/**
+ * The list behind the field: `onSearch`'s state, the items and the ones the
+ * query keeps, and what the list says (loading, failure, hint, empty text,
+ * the polite announcement).
+ */
+export declare function useAutocompleteList<T extends AutocompleteOption>(props: AutocompleteListOptions<T>, query: Readonly<Ref<string>>, open: Readonly<Ref<boolean>>, onSearchError: (error: unknown) => void): {
+    status: {
+        loading: import('vue').ComputedRef<boolean>;
+        failure: import('vue').ComputedRef<string | null>;
+        hint: import('vue').ComputedRef<string | null>;
+        emptyText: import('vue').ComputedRef<string | null>;
+        announcement: import('vue').ComputedRef<string>;
+    };
+    debounceMs: () => number;
+    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>[]>;
+    remember: (value: string) => void;
+};

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

@@ -0,0 +1,11 @@
+import { AsyncSearchState } from '@nxgt/material-core/async-search';
+import { Ref } from 'vue';
+import { AutocompleteSearchProps } from './search-types';
+type SearchProps<T> = Pick<AutocompleteSearchProps<T>, 'onSearch' | 'debounceMs' | 'minQueryLength'>;
+/**
+ * `onSearch`'s state while the list is open: searched once typing pauses,
+ * each run aborting the last, and a stale response dropped (core's
+ * `createAsyncSearch`). `null` without `onSearch`.
+ */
+export declare function useAutocompleteSearch<T>(props: SearchProps<T>, query: Readonly<Ref<string>>, open: Readonly<Ref<boolean>>, onError: (error: unknown) => void): import('vue').ComputedRef<AsyncSearchState<T> | null>;
+export {};

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

@@ -0,0 +1,32 @@
+import { AsyncSearchState } from '@nxgt/material-core/async-search';
+import { Ref } from 'vue';
+type StatusProps = {
+    loading?: boolean;
+    searchError?: string;
+    empty?: string;
+    freeSolo: boolean;
+    minQueryLength?: number;
+};
+type List = {
+    query: Readonly<Ref<string>>;
+    open: Readonly<Ref<boolean>>;
+    /** `onSearch`'s state, `null` without it. */
+    search: Readonly<Ref<AsyncSearchState<unknown> | null>>;
+    /** How many options the list shows for the query. */
+    count: Readonly<Ref<number>>;
+    debounceMs: () => number;
+};
+/**
+ * What the list says besides its options — loading, a failure, the minimum
+ * query length, the empty text — and the polite announcement: "Loading…",
+ * then the count once the search answered or typing paused, never on every
+ * keystroke.
+ */
+export declare function useAutocompleteStatus(props: StatusProps, list: List): {
+    loading: import('vue').ComputedRef<boolean>;
+    failure: import('vue').ComputedRef<string | null>;
+    hint: import('vue').ComputedRef<string | null>;
+    emptyText: import('vue').ComputedRef<string | null>;
+    announcement: import('vue').ComputedRef<string>;
+};
+export {};

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

@@ -2,13 +2,11 @@ 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. */
+/** Whether the typed text can be added (free solo), and the button's text. */
 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

@@ -1,26 +1,31 @@
 import { Ref } from 'vue';
 import { AutocompleteOption } from './autocomplete.vue';
-import { AutocompleteItemsOptions } from './use-autocomplete-items';
-type Options<T> = AutocompleteItemsOptions<T> & {
-    freeSolo: boolean;
+import { AutocompleteListOptions } from './use-autocomplete-list';
+type Options<T> = AutocompleteListOptions<T> & {
     disabled?: boolean;
-    empty?: string;
     freeSoloLabel?: (query: string) => string;
 };
 type Emit = {
     (event: 'update:modelValue', value: string | string[] | null): void;
     (event: 'queryChange', query: string): void;
+    (event: 'searchError', error: unknown): 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>>): {
+    status: {
+        loading: import('vue').ComputedRef<boolean>;
+        failure: import('vue').ComputedRef<string | null>;
+        hint: import('vue').ComputedRef<string | null>;
+        emptyText: import('vue').ComputedRef<string | null>;
+        announcement: import('vue').ComputedRef<string>;
+    };
     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[]>;

package/dist/lib/components/ui/selection/radio-group/radio-group-field.vue.d.ts

@@ -2,6 +2,8 @@ import { HTMLAttributes } from 'vue';
 export type RadioGroupOption = {
     value: string;
     label: string;
+    /** Rendered and announced as disabled, skipped by the arrow keys. */
+    disabled?: boolean;
 };
 export type RadioGroupFieldProps = {
     options: RadioGroupOption[];

package/dist/lib/composables/index.d.ts

@@ -1,5 +1,6 @@
 export * from './resolve-theme';
 export * from './use-allowed-transitions';
+export { useCspNonce } from './use-csp-nonce';
 export * from './use-formatters';
 export * from './use-heading-spy';
 export * from './use-is-client';

package/dist/lib/composables/use-csp-nonce.d.ts

@@ -0,0 +1,18 @@
+import { ComputedRef, InjectionKey, Ref } from 'vue';
+/**
+ * The page's CSP nonce, provided by `NonceProvider`. Internal: read it with
+ * `useCspNonce`.
+ */
+export declare const CSP_NONCE_KEY: InjectionKey<Ref<string | undefined>>;
+/** How many `NonceProvider`s enclose a component. Internal. */
+export declare const CSP_NONCE_DEPTH_KEY: InjectionKey<number>;
+/**
+ * The CSP nonce of the nearest `NonceProvider`, else of reka's nearest
+ * `ConfigProvider`, for a `<style>` (or `<script>`) a component creates. Call
+ * it in `setup`.
+ *
+ * `undefined` without either. It never reads the page, so the server and the
+ * client render the same attribute; code that runs once mounted can fall back
+ * to `getCspNonce()` (from `/lib`).
+ */
+export declare function useCspNonce(): ComputedRef<string | undefined>;

package/dist/lib/i18n/resources/en/en.d.ts

@@ -798,6 +798,10 @@ export declare const en: {
         autocomplete: {
             empty: string;
             add: string;
+            loading: string;
+            results: string;
+            "search-error": string;
+            "min-query": string;
         };
         avatar: {
             online: string;

package/dist/lib/i18n/resources/en/material.json.d.ts

@@ -787,7 +787,11 @@ declare const _default: {
 	},
 	"autocomplete": {
 		"empty": "No option found.",
-		"add": "Add \"{query}\""
+		"add": "Add \"{query}\"",
+		"loading": "Loading…",
+		"results": "{count, plural, =0 {No results} one {# result} other {# results}}",
+		"search-error": "The search failed. Try again.",
+		"min-query": "Type at least {count, plural, one {# character} other {# characters}} to search."
 	},
 	"avatar": {
 		"online": "Online",

package/dist/lib/i18n/resources/fr/fr.d.ts

@@ -798,6 +798,10 @@ export declare const fr: {
         autocomplete: {
             empty: string;
             add: string;
+            loading: string;
+            results: string;
+            "search-error": string;
+            "min-query": string;
         };
         avatar: {
             online: string;

package/dist/lib/i18n/resources/fr/material.json.d.ts

@@ -787,7 +787,11 @@ declare const _default: {
 	},
 	"autocomplete": {
 		"empty": "Aucune option.",
-		"add": "Ajouter « {query} »"
+		"add": "Ajouter « {query} »",
+		"loading": "Chargement…",
+		"results": "{count, plural, =0 {Aucun résultat} one {# résultat} other {# résultats}}",
+		"search-error": "La recherche a échoué. Réessayez.",
+		"min-query": "Saisissez au moins {count, plural, one {# caractère} other {# caractères}} pour rechercher."
 	},
 	"avatar": {
 		"online": "En ligne",

package/dist/lib/i18n/resources/resources.d.ts

@@ -796,6 +796,10 @@ export declare const resources: {
             autocomplete: {
                 empty: string;
                 add: string;
+                loading: string;
+                results: string;
+                "search-error": string;
+                "min-query": string;
             };
             avatar: {
                 online: string;
@@ -2051,6 +2055,10 @@ export declare const resources: {
             autocomplete: {
                 empty: string;
                 add: string;
+                loading: string;
+                results: string;
+                "search-error": string;
+                "min-query": string;
             };
             avatar: {
                 online: string;