npm - @pienter/ui - Versions diffs - 0.16.0 → 0.18.0 - Mend

@pienter/ui 0.16.0 → 0.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/CHANGELOG.md +61 -0
package/CONVENTIONS.md +86 -53
package/components/form/checkbox/checkbox.css +4 -3
package/components/form/number-field/NumberField.vue +7 -1
package/components/form/number-field/number-field.css +3 -2
package/components/form/radio-group/radio-group.css +1 -0
package/components/form/switch/switch.css +1 -0
package/components/layout/index/Index.vue +109 -27
package/components/layout/index/index.css +18 -0
package/components/layout/index/{useIndex.ts → useIndexQuery.ts} +62 -8
package/components/layout/index-filters/FilterCheckbox.vue +29 -0
package/components/layout/index-filters/FilterMultiSelect.vue +110 -0
package/components/layout/index-filters/FilterRange.vue +80 -0
package/components/layout/index-filters/FilterSelect.vue +38 -0
package/components/layout/index-filters/filters.css +65 -0
package/components/layout/index-filters/useFilterControl.ts +40 -0
package/package.json +6 -1
package/utils/cms/index.ts +13 -0

package/CHANGELOG.md CHANGED Viewed

@@ -2,6 +2,67 @@
 ## Unreleased
+## 0.18.0 - 2026-09-16
+### Changed
+- `NumberField` takes `steppers` (default `true`); `false` renders a plain
+  number input without the +/− column.
+### Fixed
+- `Checkbox`, `RadioGroup` and `Switch` inputs are their declared em size
+  again. The base `input, textarea, select` rule padded them by `--space-s`,
+  which inflated a 1.15em checkbox to 35px; all three reset `padding` to 0.
+### Added
+- `FilterCheckbox`, `FilterSelect`, `FilterMultiSelect` and `FilterRange`
+  (`@pienter/ui/components/Filter*.vue`), the filter controls an index
+  definition declares. Each binds to the index that owns the query — the
+  state `Index` provides to its `filters` slot, the one a definition provides
+  with `provideIndexQuery`, or an explicit `state` prop — and reads and
+  writes only its own filter names; mounted without a state it warns once
+  and does nothing. The checkbox writes `'true'` or deletes; the select
+  prepends an `emptyLabel` option that deletes; the multi-select is a
+  fieldset of checkboxes whose legend reads `Label (n)` with a Clear while
+  `n > 0`, optional per-option counts, an optional client-side search, and
+  values joined on the comma convention; the range is two NumberFields
+  without steppers writing `<name>_min` and `<name>_max` on change, each
+  cleared on its own.
+  `injectIndexQuery()` joins the composable exports for a control that needs
+  the provided state without throwing when there is none.
+## 0.17.0 - 2026-09-15
+### Added
+- `splitFilterValues` and `joinFilterValues` in `@pienter/ui/utils/cms`, for
+  the multi-value filter convention the backend contract now documents: a
+  filter such as `filter[type]=1,2` carries its values as one comma-separated
+  string of identifiers or enum tokens, and a numeric range is two ordinary
+  allowlisted filters, `<name>_min` and `<name>_max`. Both stay one string per
+  `filter[name]`, so `decodeListQuery`, `encodeListQuery`, the URL sync and
+  the allowlist are unchanged. `splitFilterValues('')` is `[]` and
+  `joinFilterValues([])` is `undefined`, so clearing deletes the parameter
+  rather than sending an empty string. See ADR 0009.
+- `useIndexQuery`, `provideIndexQuery` and `useIndexFilters` in
+  `@pienter/ui/composables/useIndexQuery`. `useIndexQuery` is the query state
+  `Index` has always owned — query, rows, meta, loading, errors, the setters,
+  `reload` and `reset` — exported so an index definition can create it, pass
+  it to `Index` through the new `state` prop and share it with filter
+  controls rendered outside `Index`, such as a page sidebar. `Index` provides
+  its state to its subtree, and `useIndexFilters()` gives a control the small
+  surface it needs: `filters`, `filterNames`, `loading`, `setFilter`,
+  `setFilters`, `clearFilters`. Without `state` nothing changes; `load` and
+  `queryOptions` are required unless `state` is passed.
+- `Index` shows its active filters as a chips row between the toolbar and the
+  table: one chip per filter value (a comma-separated multi-value filter is
+  one chip per value), each with a "Remove <label> <value>" button, and a
+  Clear all that empties `filters` only. New `filterLabels` and
+  `filterValueLabels` props name the chips; the raw name and value are the
+  fallback.
 ## 0.16.0 - 2026-09-15
 ### Breaking

package/CONVENTIONS.md CHANGED Viewed

@@ -60,6 +60,7 @@ Current consumers:
 - `components/form/select/` — `Select` + `Segmented` (the segmented control is a tab-like single-select visual; shares form-primitive scaffolding with Select; will be retrofit in Phase 4)
 - `components/action/button/` — `Button` + `IconButton` (the icon-only control is a square button. `button.css` shares the base/variant/size/state/focus rules across both via a `.pui-btn, .pui-icon-btn` selector group; a `.pui-btn`-only block holds the label, link variant, block layout, and loading fade that must not reach the icon button; a `.pui-icon-btn` rule adds the square box)
 - `components/feedback/toast/` — `Toast` + `ToastHost` (Toast renders one notification; ToastHost orchestrates the visible family and owns the shared `pui-toast-region` block in `toast.css`)
+- `components/layout/index-filters/` — `FilterCheckbox` + `FilterSelect` + `FilterMultiSelect` + `FilterRange` (the filter controls of an index definition; one binding composable and the fieldset chrome the two grouped controls share in `filters.css`)
 Rules:
@@ -1253,59 +1254,63 @@ Each component keeps its own audit next to its source, so a decision and the
 code it governs move in the same diff. Add an entry when you add a component;
 follow the shape of an existing one.
-| Component    | Audit                                                                                      |
-| ------------ | ------------------------------------------------------------------------------------------ |
-| Accordion    | [`components/layout/accordion/AUDIT.md`](./components/layout/accordion/AUDIT.md)           |
-| Alert        | [`components/feedback/alert/AUDIT.md`](./components/feedback/alert/AUDIT.md)               |
-| AlertDialog  | [`components/overlay/alert-dialog/AUDIT.md`](./components/overlay/alert-dialog/AUDIT.md)   |
-| AppLayout    | [`components/layout/app-layout/AUDIT.md`](./components/layout/app-layout/AUDIT.md)         |
-| Avatar       | [`components/display/avatar/AUDIT.md`](./components/display/avatar/AUDIT.md)               |
-| AvatarStack  | [`components/display/avatar/AUDIT.md`](./components/display/avatar/AUDIT.md)               |
-| Badge        | [`components/display/badge/AUDIT.md`](./components/display/badge/AUDIT.md)                 |
-| Breadcrumb   | [`components/navigation/breadcrumb/AUDIT.md`](./components/navigation/breadcrumb/AUDIT.md) |
-| Button       | [`components/action/button/AUDIT.md`](./components/action/button/AUDIT.md)                 |
-| Card         | [`components/layout/card/AUDIT.md`](./components/layout/card/AUDIT.md)                     |
-| Checkbox     | [`components/form/checkbox/AUDIT.md`](./components/form/checkbox/AUDIT.md)                 |
-| Collapsible  | [`components/layout/collapsible/AUDIT.md`](./components/layout/collapsible/AUDIT.md)       |
-| Combobox     | [`components/form/combobox/AUDIT.md`](./components/form/combobox/AUDIT.md)                 |
-| Command      | [`components/overlay/command/AUDIT.md`](./components/overlay/command/AUDIT.md)             |
-| DataTable    | [`components/layout/table/AUDIT.md`](./components/layout/table/AUDIT.md)                   |
-| DateInput    | [`components/form/date-input/AUDIT.md`](./components/form/date-input/AUDIT.md)             |
-| DropdownMenu | [`components/overlay/dropdown-menu/AUDIT.md`](./components/overlay/dropdown-menu/AUDIT.md) |
-| Empty        | [`components/display/empty/AUDIT.md`](./components/display/empty/AUDIT.md)                 |
-| Form         | [`components/form/form/AUDIT.md`](./components/form/form/AUDIT.md)                         |
-| Icon         | [`components/display/icon/AUDIT.md`](./components/display/icon/AUDIT.md)                   |
-| IconButton   | [`components/action/button/AUDIT.md`](./components/action/button/AUDIT.md)                 |
-| InputOTP     | [`components/form/input-otp/AUDIT.md`](./components/form/input-otp/AUDIT.md)               |
-| Label        | [`components/form/label/AUDIT.md`](./components/form/label/AUDIT.md)                       |
-| Modal        | [`components/overlay/modal/AUDIT.md`](./components/overlay/modal/AUDIT.md)                 |
-| Navbar       | [`components/navigation/navbar/AUDIT.md`](./components/navigation/navbar/AUDIT.md)         |
-| NumberField  | [`components/form/number-field/AUDIT.md`](./components/form/number-field/AUDIT.md)         |
-| PageAside    | [`components/layout/page-aside/AUDIT.md`](./components/layout/page-aside/AUDIT.md)         |
-| Pagination   | [`components/navigation/pagination/AUDIT.md`](./components/navigation/pagination/AUDIT.md) |
-| Panel        | [`components/layout/record-layout/AUDIT.md`](./components/layout/record-layout/AUDIT.md)   |
-| Popover      | [`components/overlay/popover/AUDIT.md`](./components/overlay/popover/AUDIT.md)             |
-| Progress     | [`components/feedback/progress/AUDIT.md`](./components/feedback/progress/AUDIT.md)         |
-| RadioGroup   | [`components/form/radio-group/AUDIT.md`](./components/form/radio-group/AUDIT.md)           |
-| Segmented    | [`components/form/select/AUDIT.md`](./components/form/select/AUDIT.md)                     |
-| Select       | [`components/form/select/AUDIT.md`](./components/form/select/AUDIT.md)                     |
-| Separator    | [`components/layout/separator/AUDIT.md`](./components/layout/separator/AUDIT.md)           |
-| Sheet        | [`components/overlay/sheet/AUDIT.md`](./components/overlay/sheet/AUDIT.md)                 |
-| Sidebar      | [`components/navigation/sidebar/AUDIT.md`](./components/navigation/sidebar/AUDIT.md)       |
-| Skeleton     | [`components/feedback/skeleton/AUDIT.md`](./components/feedback/skeleton/AUDIT.md)         |
-| Slider       | [`components/form/slider/AUDIT.md`](./components/form/slider/AUDIT.md)                     |
-| Spinner      | [`components/feedback/spinner/AUDIT.md`](./components/feedback/spinner/AUDIT.md)           |
-| Switch       | [`components/form/switch/AUDIT.md`](./components/form/switch/AUDIT.md)                     |
-| Table        | [`components/layout/table/AUDIT.md`](./components/layout/table/AUDIT.md)                   |
-| Tabs         | [`components/navigation/tabs/AUDIT.md`](./components/navigation/tabs/AUDIT.md)             |
-| TagsInput    | [`components/form/tags-input/AUDIT.md`](./components/form/tags-input/AUDIT.md)             |
-| Textarea     | [`components/form/textarea/AUDIT.md`](./components/form/textarea/AUDIT.md)                 |
-| TextInput    | [`components/form/text-input/AUDIT.md`](./components/form/text-input/AUDIT.md)             |
-| Toast        | [`components/feedback/toast/AUDIT.md`](./components/feedback/toast/AUDIT.md)               |
-| ToastHost    | [`components/feedback/toast/AUDIT.md`](./components/feedback/toast/AUDIT.md)               |
-| Toggle       | [`components/action/toggle/AUDIT.md`](./components/action/toggle/AUDIT.md)                 |
-| ToggleGroup  | [`components/action/toggle-group/AUDIT.md`](./components/action/toggle-group/AUDIT.md)     |
-| Tooltip      | [`components/overlay/tooltip/AUDIT.md`](./components/overlay/tooltip/AUDIT.md)             |
+| Component         | Audit                                                                                      |
+| ----------------- | ------------------------------------------------------------------------------------------ |
+| Accordion         | [`components/layout/accordion/AUDIT.md`](./components/layout/accordion/AUDIT.md)           |
+| Alert             | [`components/feedback/alert/AUDIT.md`](./components/feedback/alert/AUDIT.md)               |
+| AlertDialog       | [`components/overlay/alert-dialog/AUDIT.md`](./components/overlay/alert-dialog/AUDIT.md)   |
+| AppLayout         | [`components/layout/app-layout/AUDIT.md`](./components/layout/app-layout/AUDIT.md)         |
+| Avatar            | [`components/display/avatar/AUDIT.md`](./components/display/avatar/AUDIT.md)               |
+| AvatarStack       | [`components/display/avatar/AUDIT.md`](./components/display/avatar/AUDIT.md)               |
+| Badge             | [`components/display/badge/AUDIT.md`](./components/display/badge/AUDIT.md)                 |
+| Breadcrumb        | [`components/navigation/breadcrumb/AUDIT.md`](./components/navigation/breadcrumb/AUDIT.md) |
+| Button            | [`components/action/button/AUDIT.md`](./components/action/button/AUDIT.md)                 |
+| Card              | [`components/layout/card/AUDIT.md`](./components/layout/card/AUDIT.md)                     |
+| Checkbox          | [`components/form/checkbox/AUDIT.md`](./components/form/checkbox/AUDIT.md)                 |
+| Collapsible       | [`components/layout/collapsible/AUDIT.md`](./components/layout/collapsible/AUDIT.md)       |
+| Combobox          | [`components/form/combobox/AUDIT.md`](./components/form/combobox/AUDIT.md)                 |
+| Command           | [`components/overlay/command/AUDIT.md`](./components/overlay/command/AUDIT.md)             |
+| DataTable         | [`components/layout/table/AUDIT.md`](./components/layout/table/AUDIT.md)                   |
+| DateInput         | [`components/form/date-input/AUDIT.md`](./components/form/date-input/AUDIT.md)             |
+| DropdownMenu      | [`components/overlay/dropdown-menu/AUDIT.md`](./components/overlay/dropdown-menu/AUDIT.md) |
+| Empty             | [`components/display/empty/AUDIT.md`](./components/display/empty/AUDIT.md)                 |
+| FilterCheckbox    | [`components/layout/index-filters/AUDIT.md`](./components/layout/index-filters/AUDIT.md)   |
+| FilterMultiSelect | [`components/layout/index-filters/AUDIT.md`](./components/layout/index-filters/AUDIT.md)   |
+| FilterRange       | [`components/layout/index-filters/AUDIT.md`](./components/layout/index-filters/AUDIT.md)   |
+| FilterSelect      | [`components/layout/index-filters/AUDIT.md`](./components/layout/index-filters/AUDIT.md)   |
+| Form              | [`components/form/form/AUDIT.md`](./components/form/form/AUDIT.md)                         |
+| Icon              | [`components/display/icon/AUDIT.md`](./components/display/icon/AUDIT.md)                   |
+| IconButton        | [`components/action/button/AUDIT.md`](./components/action/button/AUDIT.md)                 |
+| InputOTP          | [`components/form/input-otp/AUDIT.md`](./components/form/input-otp/AUDIT.md)               |
+| Label             | [`components/form/label/AUDIT.md`](./components/form/label/AUDIT.md)                       |
+| Modal             | [`components/overlay/modal/AUDIT.md`](./components/overlay/modal/AUDIT.md)                 |
+| Navbar            | [`components/navigation/navbar/AUDIT.md`](./components/navigation/navbar/AUDIT.md)         |
+| NumberField       | [`components/form/number-field/AUDIT.md`](./components/form/number-field/AUDIT.md)         |
+| PageAside         | [`components/layout/page-aside/AUDIT.md`](./components/layout/page-aside/AUDIT.md)         |
+| Pagination        | [`components/navigation/pagination/AUDIT.md`](./components/navigation/pagination/AUDIT.md) |
+| Panel             | [`components/layout/record-layout/AUDIT.md`](./components/layout/record-layout/AUDIT.md)   |
+| Popover           | [`components/overlay/popover/AUDIT.md`](./components/overlay/popover/AUDIT.md)             |
+| Progress          | [`components/feedback/progress/AUDIT.md`](./components/feedback/progress/AUDIT.md)         |
+| RadioGroup        | [`components/form/radio-group/AUDIT.md`](./components/form/radio-group/AUDIT.md)           |
+| Segmented         | [`components/form/select/AUDIT.md`](./components/form/select/AUDIT.md)                     |
+| Select            | [`components/form/select/AUDIT.md`](./components/form/select/AUDIT.md)                     |
+| Separator         | [`components/layout/separator/AUDIT.md`](./components/layout/separator/AUDIT.md)           |
+| Sheet             | [`components/overlay/sheet/AUDIT.md`](./components/overlay/sheet/AUDIT.md)                 |
+| Sidebar           | [`components/navigation/sidebar/AUDIT.md`](./components/navigation/sidebar/AUDIT.md)       |
+| Skeleton          | [`components/feedback/skeleton/AUDIT.md`](./components/feedback/skeleton/AUDIT.md)         |
+| Slider            | [`components/form/slider/AUDIT.md`](./components/form/slider/AUDIT.md)                     |
+| Spinner           | [`components/feedback/spinner/AUDIT.md`](./components/feedback/spinner/AUDIT.md)           |
+| Switch            | [`components/form/switch/AUDIT.md`](./components/form/switch/AUDIT.md)                     |
+| Table             | [`components/layout/table/AUDIT.md`](./components/layout/table/AUDIT.md)                   |
+| Tabs              | [`components/navigation/tabs/AUDIT.md`](./components/navigation/tabs/AUDIT.md)             |
+| TagsInput         | [`components/form/tags-input/AUDIT.md`](./components/form/tags-input/AUDIT.md)             |
+| Textarea          | [`components/form/textarea/AUDIT.md`](./components/form/textarea/AUDIT.md)                 |
+| TextInput         | [`components/form/text-input/AUDIT.md`](./components/form/text-input/AUDIT.md)             |
+| Toast             | [`components/feedback/toast/AUDIT.md`](./components/feedback/toast/AUDIT.md)               |
+| ToastHost         | [`components/feedback/toast/AUDIT.md`](./components/feedback/toast/AUDIT.md)               |
+| Toggle            | [`components/action/toggle/AUDIT.md`](./components/action/toggle/AUDIT.md)                 |
+| ToggleGroup       | [`components/action/toggle-group/AUDIT.md`](./components/action/toggle-group/AUDIT.md)     |
+| Tooltip           | [`components/overlay/tooltip/AUDIT.md`](./components/overlay/tooltip/AUDIT.md)             |
 ## Form submit response contract
@@ -1470,6 +1475,34 @@ value is a key prefix: `sync-query="contacts"` reads and writes `contacts.page`,
 `contacts.search`, `contacts.filter[...]` and so on, so a related index shares
 its parent page's URL without touching the page's own parameters.
+That query state is a composable, `useIndexQuery({ load, queryOptions,
+syncQuery, searchDebounce })` from `@pienter/ui/composables/useIndexQuery`.
+Index calls it when given `load` and `queryOptions`; an index definition
+whose filter controls sit outside Index's subtree (a page sidebar) calls it
+itself, passes the result as `state`, and shares it with
+`provideIndexQuery(state)`. A control reads `useIndexFilters()` — `filters`,
+`filterNames`, `loading`, `setFilter`, `setFilters`, `clearFilters` — from
+the injected state, so the same control works in the `filters` slot, where
+Index provides its own state, or anywhere the definition provides one. The
+`filters` slot stays for the toolbar. Index shows the active filters as a
+chips row above the table: one chip per value, split on the comma convention
+(ADR 0009), each with a remove button, plus Clear all, which empties
+`filters` and nothing else. `filterLabels` and `filterValueLabels` name the
+chips the way `sortLabels` names the sort select.
+The controls a definition declares are `FilterCheckbox` (`name`, `label`;
+`'true'` or deleted), `FilterSelect` (`name`, `label`, `options`, an
+`emptyLabel` option that deletes), `FilterMultiSelect` (`name`, `label`,
+`options` with an optional `count`, `searchable`; a fieldset whose legend
+counts the selected values, with a Clear, joining values on the comma
+convention) and `FilterRange` (`name`, `label`, `min`, `max`, `step`; two
+NumberFields writing `<name>_min` and `<name>_max` on change). Each binds
+through `useIndexFilters` to the provided state, or to a `state` prop, and
+touches only its own names; without a state it warns and does nothing. They
+sit in the `filters` slot or anywhere the definition provides the state; a
+column of them is a consumer grid with a spacing token for its gap. Options
+and counts are the consumer's (`CONTEXT.md`: Facet).
 `placement` selects the chrome for the two CMS placements (`CONTEXT.md`, ADR
 0008), exposed as `data-placement` on `.pui-index`. `module` (default) is the
 page itself: an `h1` header above a divider, an unboxed toolbar, the table with

package/components/form/checkbox/checkbox.css CHANGED Viewed

@@ -3,6 +3,7 @@
         appearance: none;
         flex: none;
         margin: 0;
+        padding: 0;
         width: 1.15em;
         height: 1.15em;
         border: var(--stroke-md) solid var(--border-clr-strong);
@@ -60,18 +61,18 @@
     }
     /* The label is the click target for the box, so it reads as one. */
-    .pui-field:has(.pui-checkbox) .pui-field__label {
+    .pui-field:has(> .pui-checkbox) > .pui-field__label {
         cursor: pointer;
         user-select: none;
     }
     /* Mute the label + cursor when the input is disabled. */
-    .pui-field:has(.pui-checkbox:disabled) .pui-field__label {
+    .pui-field:has(> .pui-checkbox:disabled) > .pui-field__label {
         color: var(--text-clr-muted);
         cursor: not-allowed;
     }
-    .pui-field[data-readonly='true']:has(.pui-checkbox) .pui-field__label {
+    .pui-field[data-readonly='true']:has(> .pui-checkbox) > .pui-field__label {
         cursor: default;
     }
 }

package/components/form/number-field/NumberField.vue CHANGED Viewed

@@ -35,7 +35,10 @@
                 @input="onInput"
                 @blur="emit('blur')"
             />
-            <div v-if="!readonly" class="pui-number-field__steppers">
+            <div
+                v-if="!readonly && steppers"
+                class="pui-number-field__steppers"
+            >
                 <button
                     type="button"
                     class="pui-number-field__step"
@@ -95,6 +98,8 @@ const props = withDefaults(
         disabled?: boolean;
         /** Read-only: the value shows in the field chrome without steppers, stays focusable and cannot be edited. */
         readonly?: boolean;
+        /** The +/− buttons beside the input; off, the field is a plain number input. */
+        steppers?: boolean;
         hint?: string;
         errors?: string[];
         status?: 'error' | 'success';
@@ -112,6 +117,7 @@ const props = withDefaults(
         required: false,
         disabled: false,
         readonly: false,
+        steppers: true,
         hint: undefined,
         errors: () => [],
         status: undefined,

package/components/form/number-field/number-field.css CHANGED Viewed

@@ -42,8 +42,9 @@
         margin: 0;
     }
-    /* Read-only renders no stepper column, so the input keeps its own corners. */
-    .pui-field[data-readonly='true'] .pui-number-field__input {
+    /* Without a stepper column the input keeps its own corners. */
+    .pui-number-field:not(:has(.pui-number-field__steppers))
+        .pui-number-field__input {
         border-top-right-radius: var(--radius-sm);
         border-bottom-right-radius: var(--radius-sm);
     }

package/components/form/radio-group/radio-group.css CHANGED Viewed

@@ -66,6 +66,7 @@
         appearance: none;
         flex: none;
         margin: 0;
+        padding: 0;
         width: 1.15em;
         height: 1.15em;
         border: var(--stroke-md) solid var(--border-clr-strong);

package/components/form/switch/switch.css CHANGED Viewed

@@ -3,6 +3,7 @@
         appearance: none;
         flex: none;
         margin: 0;
+        padding: 0;
         width: 2.4em;
         height: 1.4em;
         background: var(--border-clr-base);

package/components/layout/index/Index.vue CHANGED Viewed

@@ -19,7 +19,7 @@
             <div
                 v-if="
                     !invalidQuery &&
-                    (searchable || $slots.filters || queryOptions.sorts.length)
+                    (searchable || $slots.filters || vocabulary.sorts.length)
                 "
                 class="pui-index__toolbar"
             >
@@ -38,7 +38,7 @@
                     :set-filters="setFilters"
                     :set-filter="setFilter"
                 />
-                <div v-if="queryOptions.sorts.length" class="pui-index__sort">
+                <div v-if="vocabulary.sorts.length" class="pui-index__sort">
                     <Select
                         :label="sortLabel"
                         :aria-label="sortLabel"
@@ -51,6 +51,34 @@
                 </div>
             </div>
+            <div
+                v-if="!invalidQuery && activeFilters.length"
+                class="pui-index__filters"
+            >
+                <ul class="pui-index__chips" aria-label="Active filters">
+                    <li
+                        v-for="chip in activeFilters"
+                        :key="`${chip.name}=${chip.value}`"
+                    >
+                        <Badge>
+                            {{ chip.label }}: {{ chip.valueLabel }}
+                            <IconButton
+                                name="x"
+                                size="sm"
+                                variant="ghost"
+                                :label="`Remove ${chip.label} ${chip.valueLabel}`"
+                                @click="
+                                    removeFilterValue(chip.name, chip.value)
+                                "
+                            />
+                        </Badge>
+                    </li>
+                </ul>
+                <Button size="sm" variant="ghost" @click="clearFilters()"
+                    >Clear all</Button
+                >
+            </div>
             <div class="pui-index__selection" role="status">
                 <slot
                     v-if="selectable && selected.length && $slots.selection"
@@ -170,15 +198,24 @@ import Select from '../../form/select/Select.vue';
 import Alert from '../../feedback/alert/Alert.vue';
 import Pagination from '../../navigation/pagination/Pagination.vue';
 import PaginationFooter from '../../navigation/pagination/PaginationFooter.vue';
-import type {
-    ApiError,
-    ListQuery,
-    ListLoader,
-    QueryOptions,
+import {
+    joinFilterValues,
+    splitFilterValues,
+    type ApiError,
+    type ListQuery,
+    type ListLoader,
+    type QueryOptions,
 } from '../../../utils/cms/index.js';
 import Button from '../../action/button/Button.vue';
+import IconButton from '../../action/button/IconButton.vue';
+import Badge from '../../display/badge/Badge.vue';
 import { generateId } from '../../../utils/a11y/id.js';
-import { useIndex } from './useIndex.js';
+import {
+    provideIndexQuery,
+    useIndexQuery,
+    type IndexQuery,
+    type IndexQueryOptions,
+} from './useIndexQuery.js';
 import {
     formatSort,
     parseSort,
@@ -187,10 +224,13 @@ import {
 const props = withDefaults(
     defineProps<{
-        /** Returns the matching page using the shared backend response contract. */
-        load: ListLoader<T>;
+        /** Returns the matching page using the shared backend response contract. Required unless `state` is passed. */
+        load?: ListLoader<T>;
         columns: Column[];
-        queryOptions: QueryOptions;
+        /** Required unless `state` is passed. */
+        queryOptions?: QueryOptions;
+        /** Query state from `useIndexQuery`, when the definition owns it; `load`, `queryOptions`, `syncQuery` and `searchDebounce` then come from there. */
+        state?: IndexQuery<T>;
         /** `module` is the page itself (flat, h1); `related` sits inside a record's detail page (one bordered region, h2). */
         placement?: 'module' | 'related';
         /** Synchronize list parameters with the current Vue Router route; a string prefixes every key (`contacts.page`). */
@@ -207,6 +247,10 @@ const props = withDefaults(
         sortLabel?: string;
         /** Labels for sort keys, including fields without a visible column. */
         sortLabels?: Record<string, string>;
+        /** Labels for filter names in the active-filters row; the raw name otherwise. */
+        filterLabels?: Record<string, string>;
+        /** Labels for filter values in the active-filters row, per filter name; the raw value otherwise. */
+        filterValueLabels?: Record<string, Record<string, string>>;
         /** An empty array hides the page-size control. */
         pageSizes?: number[];
         pageSizeLabel?: string;
@@ -216,6 +260,9 @@ const props = withDefaults(
         clickable?: boolean;
     }>(),
     {
+        load: undefined,
+        queryOptions: undefined,
+        state: undefined,
         placement: 'module',
         syncQuery: false,
         searchDebounce: 250,
@@ -227,6 +274,8 @@ const props = withDefaults(
         searchPlaceholder: undefined,
         sortLabel: 'Sort by',
         sortLabels: () => ({}),
+        filterLabels: () => ({}),
+        filterValueLabels: () => ({}),
         pageSizes: () => [10, 20, 50],
         pageSizeLabel: 'Rows per page',
         rowKey: 'id',
@@ -268,23 +317,17 @@ const slots = defineSlots<{
     [name: `cell:${string}`]: (scope: { row: T; value: unknown }) => unknown;
 }>();
-const unsupportedSortColumns = computed(() =>
-    props.columns.filter(
-        (column) =>
-            column.sortable && !props.queryOptions.sorts.includes(column.key),
-    ),
-);
-function validateSortColumns(unsupported: Column[]) {
-    if (unsupported.length) {
+function ownState() {
+    if (!props.load || !props.queryOptions)
         throw new Error(
-            `[pui] Index sortable columns must be allowed by queryOptions.sorts: ${unsupported.map((column) => column.key).join(', ')}.`,
+            '[pui] Index needs load and queryOptions, or a state from useIndexQuery.',
         );
-    }
+    return useIndexQuery<T>(props as IndexQueryOptions<T>);
 }
-validateSortColumns(unsupportedSortColumns.value);
-watch(unsupportedSortColumns, validateSortColumns);
+const state = props.state ?? ownState();
+provideIndexQuery(state);
 const {
+    queryOptions: vocabulary,
     query,
     search,
     rows,
@@ -298,9 +341,27 @@ const {
     setPage,
     setFilters,
     setFilter,
+    clearFilters,
     reload,
     reset,
-} = useIndex<T>(props);
+} = state;
+const unsupportedSortColumns = computed(() =>
+    props.columns.filter(
+        (column) =>
+            column.sortable && !vocabulary.value.sorts.includes(column.key),
+    ),
+);
+function validateSortColumns(unsupported: Column[]) {
+    if (unsupported.length) {
+        throw new Error(
+            `[pui] Index sortable columns must be allowed by queryOptions.sorts: ${unsupported.map((column) => column.key).join(', ')}.`,
+        );
+    }
+}
+validateSortColumns(unsupportedSortColumns.value);
+watch(unsupportedSortColumns, validateSortColumns);
 defineExpose({ reload });
 const titleId = generateId('index-title');
 const total = computed(() => meta.value.total);
@@ -311,7 +372,7 @@ const showResults = computed(
 );
 const sortOptions = computed(() => [
     { value: '', label: 'Default order' },
-    ...props.queryOptions.sorts.flatMap((key) => {
+    ...vocabulary.value.sorts.flatMap((key) => {
         const label =
             props.sortLabels[key] ??
             props.columns.find((column) => column.key === key)?.label ??
@@ -331,6 +392,27 @@ const sortOptions = computed(() => [
     }),
 ]);
+const activeFilters = computed(() =>
+    Object.entries(query.value.filters).flatMap(([name, raw]) =>
+        splitFilterValues(raw).map((value) => ({
+            name,
+            value,
+            label: props.filterLabels[name] ?? name,
+            valueLabel: props.filterValueLabels[name]?.[value] ?? value,
+        })),
+    ),
+);
+function removeFilterValue(name: string, value: string) {
+    setFilter(
+        name,
+        joinFilterValues(
+            splitFilterValues(query.value.filters[name]).filter(
+                (other) => other !== value,
+            ),
+        ),
+    );
+}
 const cellSlots = computed(() =>
     props.columns
         .map((column) => `cell:${column.key}` as const)
@@ -353,7 +435,7 @@ const pageSizeOptions = computed(() =>
             (size) =>
                 Number.isInteger(size) &&
                 size > 0 &&
-                size <= (props.queryOptions.maxPageSize ?? 100),
+                size <= (vocabulary.value.maxPageSize ?? 100),
         )
         .sort((a, b) => a - b)
         .map((size) => ({ value: String(size), label: String(size) })),

package/components/layout/index/index.css CHANGED Viewed

@@ -39,6 +39,22 @@
         max-inline-size: 100%;
     }
+    .pui-index__filters {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--space-2xs);
+    }
+    .pui-index__chips {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--space-2xs);
+        list-style: none;
+        padding: 0;
+    }
     .pui-index__results {
         min-inline-size: 0;
     }
@@ -76,6 +92,7 @@
        selection region is always rendered, so it spaces itself only when filled. */
     .pui-index[data-placement='module'] {
         & .pui-index__toolbar,
+        & .pui-index__filters,
         & .pui-index__selection:not(:empty),
         & .pui-index__error {
             margin-block-end: var(--space-s);
@@ -102,6 +119,7 @@
             border-block-end: var(--stroke-sm) solid var(--border-clr-subtle);
         }
+        & .pui-index__filters,
         & .pui-index__selection:not(:empty),
         & .pui-index__error {
             padding: var(--space-s);

package/components/layout/index/{useIndex.ts → useIndexQuery.ts} RENAMED Viewed

@@ -1,4 +1,13 @@
-import { computed, inject, onScopeDispose, ref, shallowRef, watch } from 'vue';
+import {
+    computed,
+    inject,
+    onScopeDispose,
+    provide,
+    ref,
+    shallowRef,
+    watch,
+    type InjectionKey,
+} from 'vue';
 import {
     routeLocationKey,
     routerKey,
@@ -17,12 +26,50 @@ import {
     type QueryOptions,
 } from '../../../utils/cms/index.js';
-interface Options<T> {
+export interface IndexQueryOptions<T> {
+    /** Returns the matching page using the shared backend response contract. */
     load: ListLoader<T>;
     queryOptions: QueryOptions;
-    /** `true` syncs the bare keys; a string syncs `<prefix>.<key>` instead. */
-    syncQuery: boolean | string;
-    searchDebounce: number;
+    /** `true` syncs the bare keys; a string syncs `<prefix>.<key>` instead. Default `false`. */
+    syncQuery?: boolean | string;
+    /** Delay in milliseconds before committing typed search text. Default 250. */
+    searchDebounce?: number;
+}
+/** The query state of one index, shared by `Index` and any filter control bound to it. */
+export type IndexQuery<T> = ReturnType<typeof useIndexQuery<T>>;
+const indexQueryKey: InjectionKey<IndexQuery<unknown>> =
+    Symbol('pui-index-query');
+/** Makes `state` the index every `useIndexFilters()` below reads; `Index` does this for its own subtree. */
+export function provideIndexQuery<T>(state: IndexQuery<T>) {
+    provide(indexQueryKey, state);
+}
+/** The state provided above the caller, or `undefined` outside an Index and without a provider. */
+export function injectIndexQuery(): IndexQuery<unknown> | undefined {
+    return inject(indexQueryKey, undefined);
+}
+/** What a filter control needs from the index it belongs to: the provided state, or an explicit one. */
+export function useIndexFilters(state?: IndexQuery<unknown>) {
+    const index = state ?? injectIndexQuery();
+    if (!index)
+        throw new Error(
+            '[pui] useIndexFilters needs an Index above it or a state from useIndexQuery.',
+        );
+    return {
+        filters: computed<Readonly<ListQuery['filters']>>(
+            () => index.query.value.filters,
+        ),
+        /** Allowed filter names, from `queryOptions.filters`. */
+        filterNames: computed(() => index.queryOptions.value.filters),
+        loading: computed(() => index.loading.value),
+        setFilter: index.setFilter,
+        setFilters: index.setFilters,
+        clearFilters: index.clearFilters,
+    };
 }
 function isListParameter(key: string): boolean {
@@ -83,10 +130,11 @@ interface Work {
     finish: () => void;
 }
-export function useIndex<T>(props: Options<T>) {
+export function useIndexQuery<T>(props: IndexQueryOptions<T>) {
     const route = inject(routeLocationKey, undefined);
     const router = inject(routerKey, undefined);
-    const syncing = () => props.syncQuery !== false;
+    const syncing = () =>
+        props.syncQuery !== undefined && props.syncQuery !== false;
     const prefix = () =>
         typeof props.syncQuery === 'string' && props.syncQuery
             ? `${props.syncQuery}.`
@@ -334,7 +382,7 @@ export function useIndex<T>(props: Options<T>) {
             () => {
                 void commit({ ...query.value, search: value, page: 1 }, true);
             },
-            Math.max(0, props.searchDebounce),
+            Math.max(0, props.searchDebounce ?? 250),
         );
     }
@@ -379,6 +427,10 @@ export function useIndex<T>(props: Options<T>) {
         setFilters(filters);
     }
+    function clearFilters() {
+        setFilters({});
+    }
     onScopeDispose(() => {
         disposed = true;
         navigation++;
@@ -388,6 +440,7 @@ export function useIndex<T>(props: Options<T>) {
     });
     return {
+        queryOptions: computed(() => props.queryOptions),
         query,
         search,
         rows,
@@ -401,6 +454,7 @@ export function useIndex<T>(props: Options<T>) {
         setPage,
         setFilters,
         setFilter,
+        clearFilters,
         reload,
         reset,
     };

package/components/layout/index-filters/FilterCheckbox.vue ADDED Viewed

@@ -0,0 +1,29 @@
+<template>
+    <Checkbox
+        :label="label"
+        :model-value="filters[name] === 'true'"
+        @update:model-value="setFilter(name, $event ? 'true' : undefined)"
+    />
+</template>
+<script setup lang="ts">
+import Checkbox from '../../form/checkbox/Checkbox.vue';
+import type { IndexQuery } from '../index/useIndexQuery.js';
+import { useFilterControl } from './useFilterControl.js';
+const props = withDefaults(
+    defineProps<{
+        /** The allowlisted filter name: `'true'` while checked, deleted otherwise. */
+        name: string;
+        label: string;
+        /** The index state, for a control rendered outside an Index without a provider above it. */
+        state?: IndexQuery<unknown>;
+    }>(),
+    { state: undefined },
+);
+const { filters, setFilter } = useFilterControl(
+    () => [props.name],
+    props.state,
+);
+</script>

package/components/layout/index-filters/FilterMultiSelect.vue ADDED Viewed

@@ -0,0 +1,110 @@
+<template>
+    <fieldset class="pui-field pui-filter-multi-select">
+        <legend class="pui-field__label">
+            {{ label }} ({{ selected.length }})
+        </legend>
+        <Button
+            v-if="selected.length"
+            class="pui-filter-multi-select__clear"
+            size="sm"
+            variant="ghost"
+            :aria-label="`Clear ${label}`"
+            @click="setFilter(name, undefined)"
+            >Clear</Button
+        >
+        <input
+            v-if="searchable"
+            v-model="search"
+            class="pui-input pui-filter-multi-select__search"
+            type="search"
+            :aria-label="`Search ${label}`"
+            :placeholder="searchPlaceholder ?? `Search ${label}`"
+        />
+        <div class="pui-filter-multi-select__options">
+            <label
+                v-for="option in visibleOptions"
+                :key="option.value"
+                class="pui-filter-multi-select__option"
+            >
+                <input
+                    class="pui-checkbox"
+                    type="checkbox"
+                    :name="name"
+                    :value="option.value"
+                    :checked="selected.includes(option.value)"
+                    :aria-checked="
+                        selected.includes(option.value) ? 'true' : 'false'
+                    "
+                    @change="
+                        toggle(
+                            option.value,
+                            ($event.target as HTMLInputElement).checked,
+                        )
+                    "
+                />
+                <span class="pui-filter-multi-select__label">{{
+                    option.label
+                }}</span>
+                <span
+                    v-if="typeof option.count === 'number'"
+                    class="pui-filter-multi-select__count"
+                    >({{ option.count }})</span
+                >
+            </label>
+            <p v-if="!visibleOptions.length" class="pui-field__hint">
+                No matching options.
+            </p>
+        </div>
+    </fieldset>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import Button from '../../action/button/Button.vue';
+import {
+    joinFilterValues,
+    splitFilterValues,
+} from '../../../utils/cms/index.js';
+import type { IndexQuery } from '../index/useIndexQuery.js';
+import { useFilterControl } from './useFilterControl.js';
+const props = withDefaults(
+    defineProps<{
+        /** The allowlisted filter name; values join as one comma-separated string (ADR 0009). */
+        name: string;
+        label: string;
+        /** `count` renders muted after the label when it is a number. */
+        options: { value: string; label: string; count?: number }[];
+        /** Shows a search box that narrows the options by case-insensitive substring of the label. */
+        searchable?: boolean;
+        searchPlaceholder?: string;
+        /** The index state, for a control rendered outside an Index without a provider above it. */
+        state?: IndexQuery<unknown>;
+    }>(),
+    { searchable: false, searchPlaceholder: undefined, state: undefined },
+);
+const { filters, setFilter } = useFilterControl(
+    () => [props.name],
+    props.state,
+);
+const search = ref('');
+const selected = computed(() => splitFilterValues(filters.value[props.name]));
+const visibleOptions = computed(() => {
+    const needle = props.searchable ? search.value.trim().toLowerCase() : '';
+    return needle
+        ? props.options.filter((option) =>
+              option.label.toLowerCase().includes(needle),
+          )
+        : props.options;
+});
+function toggle(value: string, checked: boolean) {
+    const rest = selected.value.filter((other) => other !== value);
+    setFilter(props.name, joinFilterValues(checked ? [...rest, value] : rest));
+}
+</script>
+<style>
+@import './filters.css';
+</style>

package/components/layout/index-filters/FilterRange.vue ADDED Viewed

@@ -0,0 +1,80 @@
+<template>
+    <fieldset class="pui-field pui-filter-range">
+        <legend class="pui-field__label">{{ label }}</legend>
+        <div class="pui-filter-range__bounds">
+            <NumberField
+                label="Min"
+                layout="inline"
+                :steppers="false"
+                :min="min"
+                :max="max"
+                :step="step"
+                :model-value="bound(minName)"
+                @change="
+                    commit(
+                        minName,
+                        ($event.target as HTMLInputElement).valueAsNumber,
+                    )
+                "
+            />
+            <NumberField
+                label="Max"
+                layout="inline"
+                :steppers="false"
+                :min="min"
+                :max="max"
+                :step="step"
+                :model-value="bound(maxName)"
+                @change="
+                    commit(
+                        maxName,
+                        ($event.target as HTMLInputElement).valueAsNumber,
+                    )
+                "
+            />
+        </div>
+    </fieldset>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+import NumberField from '../../form/number-field/NumberField.vue';
+import type { IndexQuery } from '../index/useIndexQuery.js';
+import { useFilterControl } from './useFilterControl.js';
+const props = withDefaults(
+    defineProps<{
+        /** The range name; the bounds are the allowlisted filters `<name>_min` and `<name>_max` (ADR 0009). */
+        name: string;
+        label: string;
+        min?: number;
+        max?: number;
+        step?: number | string;
+        /** The index state, for a control rendered outside an Index without a provider above it. */
+        state?: IndexQuery<unknown>;
+    }>(),
+    { min: undefined, max: undefined, step: undefined, state: undefined },
+);
+const minName = computed(() => `${props.name}_min`);
+const maxName = computed(() => `${props.name}_max`);
+const { filters, setFilter } = useFilterControl(
+    () => [minName.value, maxName.value],
+    props.state,
+);
+function bound(name: string): number | undefined {
+    const value = filters.value[name];
+    const number = Number(value);
+    return value && Number.isFinite(number) ? number : undefined;
+}
+function commit(name: string, value: number) {
+    const next = Number.isFinite(value) ? String(value) : undefined;
+    if (next !== filters.value[name]) setFilter(name, next);
+}
+</script>
+<style>
+@import './filters.css';
+</style>

package/components/layout/index-filters/FilterSelect.vue ADDED Viewed

@@ -0,0 +1,38 @@
+<template>
+    <SelectField
+        :label="label"
+        :options="allOptions"
+        :model-value="filters[name] ?? ''"
+        @update:model-value="setFilter(name, $event || undefined)"
+    />
+</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+import SelectField from '../../form/select/Select.vue';
+import type { IndexQuery } from '../index/useIndexQuery.js';
+import { useFilterControl } from './useFilterControl.js';
+const props = withDefaults(
+    defineProps<{
+        /** The allowlisted filter name; the empty option deletes it. */
+        name: string;
+        label: string;
+        options: { value: string; label: string }[];
+        /** Label of the first option, which clears the filter. */
+        emptyLabel?: string;
+        /** The index state, for a control rendered outside an Index without a provider above it. */
+        state?: IndexQuery<unknown>;
+    }>(),
+    { emptyLabel: 'All', state: undefined },
+);
+const { filters, setFilter } = useFilterControl(
+    () => [props.name],
+    props.state,
+);
+const allOptions = computed(() => [
+    { value: '', label: props.emptyLabel },
+    ...props.options,
+]);
+</script>

package/components/layout/index-filters/filters.css ADDED Viewed

@@ -0,0 +1,65 @@
+@layer components {
+    /* The two grouped controls share one fieldset chrome; the legend takes
+       the small control height so a Clear button beside it lines up. */
+    .pui-filter-multi-select,
+    .pui-filter-range {
+        position: relative;
+        & > .pui-field__label {
+            line-height: var(--control-height-sm);
+        }
+    }
+    .pui-filter-multi-select {
+        & > .pui-field__label {
+            padding-inline-end: var(--space-2xl);
+        }
+    }
+    /* A rendered legend is not a grid item, so the Clear sits beside it by
+       position rather than by a grid row. */
+    .pui-filter-multi-select__clear {
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline-end: 0;
+    }
+    /* About six option rows, then the list scrolls; the padding keeps the
+       focus ring inside the scrollport. */
+    .pui-filter-multi-select__options {
+        display: grid;
+        align-content: start;
+        gap: var(--space-2xs);
+        max-block-size: calc(6 * var(--space-l));
+        padding: var(--space-3xs);
+        overflow-y: auto;
+    }
+    .pui-filter-multi-select__option {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2xs);
+        min-inline-size: 0;
+        margin-block-end: 0;
+        font-size: var(--step--1);
+        font-weight: var(--fw-regular);
+        cursor: pointer;
+    }
+    .pui-filter-multi-select__label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    .pui-filter-multi-select__count {
+        flex: none;
+        color: var(--text-clr-muted);
+    }
+    .pui-filter-range__bounds {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: var(--space-xs);
+    }
+}

package/components/layout/index-filters/useFilterControl.ts ADDED Viewed

@@ -0,0 +1,40 @@
+import { computed, watch, type ComputedRef } from 'vue';
+import type { ListQuery } from '../../../utils/cms/index.js';
+import {
+    injectIndexQuery,
+    useIndexFilters,
+    type IndexQuery,
+} from '../index/useIndexQuery.js';
+export interface FilterBinding {
+    filters: ComputedRef<Readonly<ListQuery['filters']>>;
+    setFilter: (name: string, value: string | undefined) => void;
+}
+/** Binds a control to its index; without one it warns and every write is a no-op. */
+export function useFilterControl(
+    names: () => readonly string[],
+    state?: IndexQuery<unknown>,
+): FilterBinding {
+    const index = state ?? injectIndexQuery();
+    if (!index) {
+        console.warn(
+            `[pui] Filter "${names().join('", "')}" has no index: render it inside an Index or pass the state from useIndexQuery.`,
+        );
+        return { filters: computed(() => ({})), setFilter: () => {} };
+    }
+    const { filters, filterNames, setFilter } = useIndexFilters(index);
+    let warned = false;
+    watch(
+        () => names().filter((name) => !filterNames.value.includes(name)),
+        (missing) => {
+            if (!missing.length || warned) return;
+            warned = true;
+            console.warn(
+                `[pui] Filter "${missing.join('", "')}" is not in queryOptions.filters; the index rejects it.`,
+            );
+        },
+        { immediate: true },
+    );
+    return { filters, setFilter };
+}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pienter/ui",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "description": "Shared Pienter UI components, styles, icons, and browser utilities.",
   "type": "module",
   "license": "MIT",
@@ -86,6 +86,7 @@
     "./components/Sheet.vue": "./components/overlay/sheet/Sheet.vue",
     "./components/Tooltip.vue": "./components/overlay/tooltip/Tooltip.vue",
     "./composables/useDialog": "./composables/useDialog.ts",
+    "./composables/useIndexQuery": "./components/layout/index/useIndexQuery.ts",
     "./composables/useDisclosure": "./composables/useDisclosure.ts",
     "./composables/useMenu": "./composables/useMenu.ts",
     "./composables/usePopover": "./composables/usePopover.ts",
@@ -98,6 +99,10 @@
     "./toast": "./components/feedback/toast/toast.ts",
     "./utils/a11y": "./utils/a11y/index.ts",
     "./components/Index.vue": "./components/layout/index/Index.vue",
+    "./components/FilterCheckbox.vue": "./components/layout/index-filters/FilterCheckbox.vue",
+    "./components/FilterSelect.vue": "./components/layout/index-filters/FilterSelect.vue",
+    "./components/FilterMultiSelect.vue": "./components/layout/index-filters/FilterMultiSelect.vue",
+    "./components/FilterRange.vue": "./components/layout/index-filters/FilterRange.vue",
     "./components/RecordForm.vue": "./components/form/record-form/RecordForm.vue",
     "./components/RecordForm.types": "./components/form/record-form/types.ts",
     "./components/RecordDetails.vue": "./components/display/record-details/RecordDetails.vue",

package/utils/cms/index.ts CHANGED Viewed

@@ -205,6 +205,19 @@ export function encodeListQuery(query: ListQuery): URLSearchParams {
     return params;
 }
+/** Values of a multi-value filter, from its comma-separated wire string. */
+export function splitFilterValues(value: string | undefined): string[] {
+    return value ? value.split(',').filter(Boolean) : [];
+}
+/** The wire string of a multi-value filter; `undefined` clears the parameter. */
+export function joinFilterValues(
+    values: readonly string[],
+): string | undefined {
+    const joined = values.filter(Boolean).join(',');
+    return joined || undefined;
+}
 export function cloneRecord<T>(record: T): T {
     return JSON.parse(JSON.stringify(record)) as T;
 }