@nxgt/material-vue 0.31.0 → 0.32.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @nxgt/material-vue
 
+## 0.32.0
+
+### Minor Changes
+
+- [#521](https://github.com/softistx/nxgt-material/pull/521) [`b76cd9a`](https://github.com/softistx/nxgt-material/commit/b76cd9ae3cc4f4d0f1b20cec31c9471819ffcd3c) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Autocomplete` can search a server (softistx/nxgt-material#514). Fixes [#514](https://github.com/softistx/nxgt-material/issues/514).
+  
+  - **Server search.** `onSearch(query, { signal })` (Vue: the function prop `on-search`, so `@search="fn"` binds it too) is called once typing pauses and its results become the list. Each search aborts the previous one (pass `signal` to `fetch`), and a response that lands after a newer one is dropped, even from an API that ignores the signal. `minQueryLength` (Vue: `min-query-length`, default 1) is how many characters it waits for; below it the list says "Type at least N characters to search." A rejected search is shown and announced ("The search failed. Try again.") and reported to `onSearchError` (Vue: `@search-error`). `options` is now optional: with `onSearch` it is the list before a search and the selected options' labels, and a picked option keeps its chip once a new search no longer returns it.
+  - **Controlled mode.** `loading` and `searchError` (Vue: `search-error`), beside `onQueryChange` (Vue: `@query-change`), for an app that fetches `options` itself.
+  - **A configurable debounce.** `debounceMs` (Vue: `debounce-ms`), 250 ms by default, sets the pause before `onSearch` and `onQueryChange`.
+  - **Accent-insensitive matching.** `filter`: `'accent-insensitive'` (the default without `onSearch`), `'none'` (the default with `onSearch`) or `(option, query) => boolean`. The default compares the label or value with the query lowercased in the provider's language and stripped of accents, so "e" finds "École" and "orle" finds "Orléans". Vue's exported `filterAutocompleteOptions` matches the same way and takes an optional `locale`.
+  - **Accessibility.** A polite live region announces "Loading…", then "N results" / "No results" (or the failure) once the search answers or typing pauses, not on every keystroke; the list is `aria-busy` while loading. New strings: `material.autocomplete.loading`, `.results`, `.search-error`, `.min-query` (en, fr). The keyboard works as before.
+  - React: clearing a single `Autocomplete`'s input no longer throws (`Cannot read properties of null (reading 'value')`).
+  - `@nxgt/material-core` adds `/debounce` (the `debounce` both libraries' `SearchField` kept a copy of, still exported by both, Vue now with its `Debounced` type), `/text-match` (`foldText`, `matchesText`) and `/async-search` (`createAsyncSearch`, `searchAnnouncement`).
+  
+  Apps that built their own search field and result list while waiting for this (marked `Temporary, until material [#514](https://github.com/softistx/nxgt-material/issues/514)`) can replace it with `onSearch` and remove the workaround.
+  
+  **Behaviour changes, no API removed.**
+  
+  - Local matching ignores accents by default, so a query can keep more options than before. To match as before, pass your own `filter`, for example `filter={(option, query) => option.label.toLowerCase().includes(query.toLowerCase())}`; to show `options` exactly as given (filtered on your server), pass `filter="none"`.
+  - `onQueryChange` (`@query-change`) now runs 250 ms after typing pauses; it was a fixed 1 s in `@nxgt/material` and 300 ms in `@nxgt/material-vue`. Search for `onQueryChange` / `@query-change`, and add `debounceMs={1000}` (`:debounce-ms="300"`) where the old pause mattered — or move the fetch to `onSearch`.
+  - React: the list's empty text is no longer a live region of its own (Base UI's `ComboboxEmpty` had `role="status"`); the field's one status region (`[data-slot="autocomplete-status"]`) says "No results" instead. A test that found the empty text by `role="status"` finds it by its text.
+
+- [#518](https://github.com/softistx/nxgt-material/pull/518) [`102f3b8`](https://github.com/softistx/nxgt-material/commit/102f3b822ea8d1e83aaffec8b6739ce4fdb5a599) Thanks [@SteveGT96](https://github.com/SteveGT96)! - A `RadioGroup` option can be disabled on its own (softistx/nxgt-material#513): `options` take `disabled?: boolean`, in `RadioGroup` and `RadioGroupFormField` of `@nxgt/material` and in `RadioGroupField` and `RadioGroupFormField` of `@nxgt/material-vue`. A disabled option is announced as disabled, skipped by the arrow keys (as the Radix and Reka UI primitives do), and drawn with a muted label (4.5:1 in both themes) and a faded radio; the group's own `disabled` still disables every option. `@nxgt/material` also exports the `RadioGroupOption` type, as `@nxgt/material-vue` does. Apps can drop the list of unavailable choices they kept apart (`Temporary, until material [#513](https://github.com/softistx/nxgt-material/issues/513)`). Fixes [#513](https://github.com/softistx/nxgt-material/issues/513).
+
+### Patch Changes
+
+- [#519](https://github.com/softistx/nxgt-material/pull/519) [`18f30c1`](https://github.com/softistx/nxgt-material/commit/18f30c1cc6cc41c2b73a43fad2501b7db2bbc016) Thanks [@SteveGT96](https://github.com/SteveGT96)! - package.json names its repository, so issue reports route to it. Each package now has a `repository` field (`git+https://github.com/softistx/nxgt-material.git`, with its `directory` under `packages/`).
+- Updated dependencies [[`b76cd9a`](https://github.com/softistx/nxgt-material/commit/b76cd9ae3cc4f4d0f1b20cec31c9471819ffcd3c), [`18f30c1`](https://github.com/softistx/nxgt-material/commit/18f30c1cc6cc41c2b73a43fad2501b7db2bbc016)]:
+  - @nxgt/material-core@0.8.0
+
 ## 0.31.0
 
 ### Minor Changes

package/README.md

@@ -433,7 +433,7 @@ React-only for now: `StepperIndicator` ([roadmap](https://cdn.jsdelivr.net/npm/@
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-selectfield.webp" width="120" alt="SelectField"> | [`SelectField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#selectfield) · `SelectFormField` | Labelled select built from `options`, with an `#option` slot. | `SelectField`, `SelectFormField` |
 | — | [Combobox](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#combobox) | The raw combobox primitives are not in `@nxgt/material-vue`. Use [`ComboboxField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#comboboxfield) for a searchable single select, [`Autocomplete`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#autocomplete) for several values or free text, or the `Command` parts (Overlays & menus) for a hand-built list. | `Combobox` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-comboboxfield.webp" width="120" alt="ComboboxField"> | [`ComboboxField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#comboboxfield) · `ComboboxFormField` | Labelled, searchable single select over `{ value, label }` options, in a popover. | `ComboboxField`, `ComboboxFormField` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-autocomplete.webp" width="120" alt="Autocomplete"> | [`Autocomplete`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#autocomplete) · `AutocompleteFormField` | Single or multiple (chips) autocomplete typed by its options, with free-solo values, a query event and option slots. | `Autocomplete`, `AutocompleteFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-autocomplete.webp" width="120" alt="Autocomplete"> | [`Autocomplete`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#autocomplete) · `AutocompleteFormField` | Single or multiple (chips) autocomplete typed by its options, with free-solo values, accent-insensitive matching, a debounced server search and option slots. | `Autocomplete`, `AutocompleteFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-checkbox.webp" width="120" alt="Checkbox"> | [`Checkbox`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#checkbox) · `CheckboxFormField` | Checkbox with label, helper text and an indeterminate state; without a label, the bare Reka UI box. | `Checkbox`, `CheckboxFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-checkboxgroup.webp" width="120" alt="CheckboxGroup"> | [`CheckboxGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#checkboxgroup) · `CheckboxGroupFormField` | Checkbox list built from `options`, valued as `string[]`. | `CheckboxGroup`, `CheckboxGroupFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-radiogroup.webp" width="120" alt="RadioGroup"> | [`RadioGroupField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#radiogroup) · `RadioGroupFormField`, `RadioGroup`, `RadioGroupItem` | Labelled radio group built from `options`, horizontal or vertical. | `RadioGroupField` (alias), `RadioGroup`, `RadioGroupItem`, `RadioGroupFormField` |

package/dist/{Button-CNbJT5qV.js → Button-DEA5W6O3.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { t } from "./use-material-translation-Do6ztdtV.js";
+import { t } from "./use-material-translation-CaHS6oZz.js";
 import { Comment as n, Fragment as r, Text as i, computed as a, createBlock as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, guardReactiveProps as f, h as p, inject as ee, isVNode as m, mergeProps as h, normalizeClass as g, normalizeProps as _, onBeforeUnmount as v, openBlock as y, provide as b, ref as x, renderSlot as S, shallowRef as C, unref as w, useAttrs as te, useSlots as ne, watch as T, withCtx as E } from "vue";
 import { Primitive as D, TooltipArrow as O, TooltipContent as k, TooltipPortal as A, TooltipProvider as re, TooltipRoot as j, TooltipTrigger as M, useForwardPropsEmits as N } from "reka-ui";
 import { cva as P } from "class-variance-authority";

package/dist/{HoverCardTrigger-BTAHE6wK.js → HoverCardTrigger-CjSteFgk.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { t } from "./use-material-translation-Do6ztdtV.js";
-import { t as n } from "./Button-CNbJT5qV.js";
+import { t } from "./use-material-translation-CaHS6oZz.js";
+import { t as n } from "./Button-DEA5W6O3.js";
 import { t as r } from "./use-inert-others-CtGqZKR8.js";
 import { t as i } from "./field-name-attribute-Bl7LSVK0.js";
 import { computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, getCurrentInstance as p, guardReactiveProps as m, isRef as h, mergeProps as g, normalizeClass as _, normalizeProps as v, onMounted as ee, onUpdated as y, openBlock as b, renderSlot as x, toDisplayString as S, unref as C, useAttrs as w, useId as T, useTemplateRef as E, vModelText as D, withCtx as O, withDirectives as k } from "vue";

package/dist/{camera-rJmgxIEn.js → camera-DlWK0PLP.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { gr as t, mr as n, pr as r } from "./components-Dxy9DvEe.js";
-import { t as i } from "./use-material-translation-Do6ztdtV.js";
-import { t as a } from "./Button-CNbJT5qV.js";
-import { t as o } from "./icon-button-DXXjxBgr.js";
+import { gr as t, mr as n, pr as r } from "./components-Dqg7KwA2.js";
+import { t as i } from "./use-material-translation-CaHS6oZz.js";
+import { t as a } from "./Button-DEA5W6O3.js";
+import { t as o } from "./icon-button-CWcOcNHr.js";
 import { createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, normalizeClass as m, openBlock as h, ref as g, renderSlot as _, shallowRef as v, toDisplayString as y, unref as b, withCtx as x } from "vue";
 import { Pause as S, Play as C } from "@lucide/vue";
 //#region lib/components/ui/media/camera/camera-content.vue?vue&type=script&setup=true&lang.ts