@pienter/ui 0.17.0 → 0.19.0

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

@@ -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

@@ -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/components/layout/table/DataTable.vue

@@ -10,6 +10,7 @@
         :selectable="selectable"
         :clickable="clickable"
         :all-selected="allSelected"
+        :select-all-label="selectAllLabel"
         :label="label"
         :labelledby="labelledby"
         @toggle-all="toggleAll"
@@ -76,6 +77,10 @@ const props = withDefaults(
         selectable?: boolean;
         /** Show a pointer cursor on rows. */
         clickable?: boolean;
+        /** Accessible name of the header select-all checkbox. */
+        selectAllLabel?: string;
+        /** Accessible name of a row's checkbox; a function receives the row. Default: `Select <first cell>`, or `Select row` when that cell is empty. */
+        selectRowLabel?: string | ((row: T) => string);
         /** Which column is sorted, and how. `rows` is passed through untouched — ordering them is the consumer's job (ADR 0005). */
         sort?: SortState;
         /** Frosts and disables the body while the rows are stale, and suppresses the empty state. */
@@ -90,6 +95,8 @@ const props = withDefaults(
         selected: () => [],
         selectable: false,
         clickable: false,
+        selectAllLabel: 'Select all rows',
+        selectRowLabel: undefined,
         sort: null,
         loading: false,
         label: undefined,
@@ -112,6 +119,9 @@ function keyOf(row: T): string | number {
     return cellValue(row, props.rowKey) as string | number;
 }
 function rowLabel(row: T): string {
+    if (typeof props.selectRowLabel === 'function')
+        return props.selectRowLabel(row);
+    if (props.selectRowLabel !== undefined) return props.selectRowLabel;
     const first = props.columns[0];
     const value = first ? String(cellValue(row, first.key) ?? '').trim() : '';
     return value ? `Select ${value}` : 'Select row';

package/components/layout/table/Table.vue

@@ -27,7 +27,7 @@
                             class="pui-table__check"
                             type="checkbox"
                             :checked="allSelected"
-                            aria-label="Select all rows"
+                            :aria-label="selectAllLabel"
                             @change="emit('toggle-all')"
                         />
                     </th>
@@ -106,6 +106,8 @@ const props = withDefaults(
         clickable?: boolean;
         /** Checked state of the header select-all checkbox. */
         allSelected?: boolean;
+        /** Accessible name of the header select-all checkbox. */
+        selectAllLabel?: string;
         /** Which column is sorted, and how. Rendered, never changed here; `null` is unsorted (ADR 0005). */
         sort?: SortState;
         /** Frosts and disables the body while the rows are stale, leaving the header usable. */
@@ -119,6 +121,7 @@ const props = withDefaults(
         selectable: false,
         clickable: false,
         allSelected: false,
+        selectAllLabel: 'Select all rows',
         sort: null,
         loading: false,
         label: undefined,

package/components/navigation/breadcrumb/Breadcrumb.vue

@@ -1,5 +1,5 @@
 <template>
-    <nav aria-label="Breadcrumb" class="pui-breadcrumb">
+    <nav :aria-label="label" class="pui-breadcrumb">
         <ol class="pui-breadcrumb__trail">
             <template v-for="(item, index) in items" :key="index">
                 <li
@@ -36,9 +36,14 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{
-    items: { label: string; href?: string }[];
-}>();
+withDefaults(
+    defineProps<{
+        items: { label: string; href?: string }[];
+        /** Accessible name of the `<nav>` landmark. */
+        label?: string;
+    }>(),
+    { label: 'Breadcrumb' },
+);
 
 defineSlots<{
     link?: (scope: {

package/components/navigation/pagination/Pagination.vue

@@ -1,11 +1,11 @@
 <template>
-    <nav class="pui-pagination-nav" aria-label="Pagination">
+    <nav class="pui-pagination-nav" :aria-label="label">
         <ul class="pui-pagination">
             <li>
                 <button
                     class="pui-pagination__item"
                     :disabled="currentPage <= 1"
-                    aria-label="Previous page"
+                    :aria-label="previousLabel"
                     @click="emit('update:currentPage', currentPage - 1)"
                 >
                     <Icon name="chevron-left" size="sm" />
@@ -33,7 +33,7 @@
                 <button
                     class="pui-pagination__item"
                     :disabled="currentPage >= totalPages"
-                    aria-label="Next page"
+                    :aria-label="nextLabel"
                     @click="emit('update:currentPage', currentPage + 1)"
                 >
                     <Icon name="chevron-right" size="sm" />
@@ -52,9 +52,18 @@ const props = withDefaults(
         currentPage: number;
         totalPages: number;
         maxVisible?: number;
+        /** Accessible name of the `<nav>` landmark. */
+        label?: string;
+        /** Accessible name of the icon-only previous button. */
+        previousLabel?: string;
+        /** Accessible name of the icon-only next button. */
+        nextLabel?: string;
     }>(),
     {
         maxVisible: 5,
+        label: 'Pagination',
+        previousLabel: 'Previous page',
+        nextLabel: 'Next page',
     },
 );
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pienter/ui",
-  "version": "0.17.0",
+  "version": "0.19.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",