@pienter/ui 0.3.0 → 0.7.1

package/components/form/record-form/record-form.css

@@ -0,0 +1,15 @@
+@layer components {
+    .pui-record-form {
+        gap: var(--space-s);
+    }
+
+    .pui-record-fields {
+        display: grid;
+        grid-template-columns: var(
+            --pui-record-fields-columns,
+            var(--pui-record-form-columns, minmax(0, 1fr))
+        );
+        gap: var(--space-s);
+        min-inline-size: 0;
+    }
+}

package/components/form/record-form/types.ts

@@ -0,0 +1,28 @@
+import type { ValuePath } from '../../../utils/cms/index.js';
+
+interface RecordFieldBase {
+    name: string;
+    label: string;
+    /** Defaults to the literal property name, without splitting dots. */
+    path?: ValuePath;
+    hint?: string;
+    required?: boolean;
+    disabled?: boolean;
+}
+
+export type RecordFormField = RecordFieldBase &
+    (
+        | {
+              type?: 'text' | 'email';
+              placeholder?: string;
+              autocomplete?: string;
+          }
+        | { type: 'textarea'; placeholder?: string; rows?: number }
+        | {
+              type: 'select';
+              options: { value: string; label: string }[];
+              placeholder?: string;
+          }
+        | { type: 'checkbox' }
+        | { type: 'custom' }
+    );

package/components/form/slider/slider.css

@@ -5,9 +5,8 @@
    * horizontal track that hosts a faint background rail, a coloured
    * fill segment representing the current value (or range), and one
    * or two `<button role="slider">` thumbs. Each thumb is absolutely
-   * positioned via `inset-inline-start: <pct>%`; the controller
-   * (Astro) and Vue's reactive computed both write the same
-   * percentage so the visual is identical across both tiers.
+   * positioned via `inset-inline-start: <pct>%`, written by Vue's
+   * reactive computed.
    *
    * Layout rationale: rejected the native `<input type="range">`
    * baseline for two reasons — (a) cross-browser thumb / track

package/components/form/tags-input/tags-input.css

@@ -6,8 +6,7 @@
    * row that hosts existing tag pills followed by a text input where
    * the user types the next tag. The whole row reads as one
    * integrated control: clicking anywhere lands focus on the entry
-   * input (handled by Vue / via the click handler in
-   * `mountTagsInput`).
+   * input (a click handler in `TagsInput.vue`).
    *
    * Layout rationale: rejected the "fixed-height pills + horizontally-
    * scrolling row" alternative because vertical wrapping reads better

package/components/form/text-input/text-input.css

@@ -16,6 +16,7 @@
 
     .pui-field {
         display: grid;
+        align-content: start;
         gap: var(--space-2xs);
     }
 
@@ -59,6 +60,7 @@
     }
 
     .pui-field__label {
+        margin-block: 0;
         font-size: var(--step--1);
         font-weight: var(--fw-bold);
     }

package/components/form/textarea/textarea.css

@@ -13,7 +13,7 @@
 
     /* Auto-resize variant — opt-in via the `autoResize` prop, which sets
    * `style="field-sizing: content"` inline on the <textarea>. The
-   * inline style is the only documented Vue/Astro path, so the
+   * inline style is the only documented path, so the
    * selector matches it directly. Browsers without `field-sizing`
    * support fall back gracefully to the default fixed-rows/min-height
    * box. */

package/components/layout/accordion/Accordion.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
-import { mountDisclosure } from '../../../utils/controllers/disclosure.js';
+import { ref } from 'vue';
+import { useDisclosure } from '../../../composables/useDisclosure.js';
 
 const props = withDefaults(
     defineProps<{
@@ -25,32 +25,11 @@ const props = withDefaults(
 );
 
 const rootRef = ref<HTMLDivElement | null>(null);
-let teardown: (() => void) | null = null;
 
-function mount(): void {
-    if (!rootRef.value) return;
-    teardown = mountDisclosure(rootRef.value, {
-        singleOpen: props.singleOpen,
-    });
-}
-
-onMounted(mount);
-
-// `singleOpen` is read once at mount time. If a consumer toggles it
-// at runtime we re-mount so the new policy takes effect immediately.
-// This is rare (the prop is typically static per surface) but cheap.
-watch(
-    () => props.singleOpen,
-    () => {
-        teardown?.();
-        teardown = null;
-        mount();
-    },
-);
-
-onBeforeUnmount(() => {
-    teardown?.();
-    teardown = null;
+// `singleOpen` is read per toggle, so a runtime change takes effect on
+// the next interaction without re-wiring.
+useDisclosure(rootRef, {
+    singleOpen: () => props.singleOpen,
 });
 </script>
 

package/components/layout/collapsible/Collapsible.vue

@@ -17,8 +17,8 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref } from 'vue';
-import { mountDisclosure } from '../../../utils/controllers/disclosure.js';
+import { ref } from 'vue';
+import { useDisclosure } from '../../../composables/useDisclosure.js';
 import Icon from '../../display/icon/Icon.vue';
 
 withDefaults(
@@ -51,24 +51,14 @@ const emit = defineEmits<{
 }>();
 
 const rootRef = ref<HTMLDetailsElement | null>(null);
-let teardown: (() => void) | null = null;
 
-onMounted(() => {
-    if (!rootRef.value) return;
-    // Collapsible is single-disclosure: no `singleOpen` coordination
-    // needed. The controller's only role here is to provide the
-    // standard mount/teardown lifecycle and a normalized callback —
-    // the native `<details>` element does the open/close work itself.
-    teardown = mountDisclosure(rootRef.value, {
-        onToggle: (_target, open) => {
-            emit('update:open', open);
-        },
-    });
-});
-
-onBeforeUnmount(() => {
-    teardown?.();
-    teardown = null;
+// Collapsible is single-disclosure: no `singleOpen` coordination
+// needed. The composable's only role here is a normalized callback —
+// the native `<details>` element does the open/close work itself.
+useDisclosure(rootRef, {
+    onToggle: (_target, open) => {
+        emit('update:open', open);
+    },
 });
 </script>
 

package/components/layout/index/Index.vue

@@ -0,0 +1,353 @@
+<template>
+    <div class="pui-index" :data-state="loading ? 'loading' : undefined">
+        <header
+            v-if="title || description || $slots.actions"
+            class="pui-index__header"
+        >
+            <div v-if="title || description" class="pui-index__heading">
+                <h1 v-if="title" class="pui-index__title">{{ title }}</h1>
+                <p v-if="description" class="pui-index__description">
+                    {{ description }}
+                </p>
+            </div>
+            <div v-if="$slots.actions" class="pui-index__actions">
+                <slot name="actions" :reload="reload" :loading="loading" />
+            </div>
+        </header>
+
+        <div class="pui-index__body">
+            <div
+                v-if="
+                    !invalidQuery &&
+                    (searchable || $slots.filters || queryOptions.sorts.length)
+                "
+                class="pui-index__toolbar"
+            >
+                <div v-if="searchable" class="pui-index__search">
+                    <TextInput
+                        type="search"
+                        :label="searchLabel"
+                        :placeholder="searchPlaceholder"
+                        :model-value="search"
+                        @update:model-value="setSearch"
+                    />
+                </div>
+                <slot
+                    name="filters"
+                    :filters="query.filters"
+                    :set-filters="setFilters"
+                    :set-filter="setFilter"
+                />
+                <div v-if="queryOptions.sorts.length" class="pui-index__sort">
+                    <Select
+                        :label="sortLabel"
+                        :aria-label="sortLabel"
+                        :model-value="formatSort(query.sort) ?? ''"
+                        :options="sortOptions"
+                        @update:model-value="
+                            updateCriteria({ sort: parseSort($event) })
+                        "
+                    />
+                </div>
+            </div>
+
+            <div
+                v-if="selectable && selected.length && $slots.selection"
+                class="pui-index__selection"
+            >
+                <slot
+                    name="selection"
+                    :selected="selected"
+                    :reload="reload"
+                    :loading="loading"
+                />
+            </div>
+
+            <div v-if="errors.length" class="pui-index__error">
+                <slot
+                    name="error"
+                    :error="error"
+                    :errors="errors"
+                    :retry="reload"
+                    :reset="reset"
+                    :invalid-query="invalidQuery"
+                >
+                    <Alert
+                        tone="danger"
+                        :title="
+                            invalidQuery
+                                ? 'This list query is invalid'
+                                : 'Could not load results'
+                        "
+                    >
+                        <ul>
+                            <li v-for="message in errors" :key="message">
+                                {{ message }}
+                            </li>
+                        </ul>
+                        <Button
+                            size="sm"
+                            @click="invalidQuery ? reset() : reload()"
+                            >{{
+                                invalidQuery ? 'Reset filters' : 'Try again'
+                            }}</Button
+                        >
+                    </Alert>
+                </slot>
+            </div>
+
+            <div v-if="showResults" class="pui-index__results">
+                <DataTable
+                    class="pui-index__table"
+                    :rows="rows"
+                    :columns="columns"
+                    :row-key="rowKey"
+                    :sort="query.sort"
+                    :loading="loading"
+                    :selectable="selectable"
+                    :selected="selected"
+                    :clickable="clickable"
+                    @sort="
+                        updateCriteria({ sort: toggleSort(query.sort, $event) })
+                    "
+                    @update:selected="emit('update:selected', $event)"
+                    @row-click="emit('row-click', $event)"
+                >
+                    <template
+                        v-for="name in cellSlots"
+                        :key="name"
+                        #[name]="scope"
+                    >
+                        <slot :name="name" v-bind="scope" />
+                    </template>
+                    <template #empty
+                        ><slot name="empty">No results.</slot></template
+                    >
+                </DataTable>
+            </div>
+        </div>
+
+        <PaginationFooter v-if="showResults" class="pui-index__footer">
+            <template #summary>
+                <slot name="summary" :total="total" :from="from" :to="to">
+                    {{ from }}–{{ to }} of {{ total }}
+                </slot>
+            </template>
+            <div class="pui-index__pagination">
+                <div v-if="pageSizes.length" class="pui-index__page-size">
+                    <Select
+                        :label="pageSizeLabel"
+                        :aria-label="pageSizeLabel"
+                        :model-value="String(query.page_size)"
+                        :options="pageSizeOptions"
+                        @update:model-value="
+                            updateCriteria({
+                                page_size: Number($event),
+                            })
+                        "
+                    />
+                </div>
+                <Pagination
+                    :current-page="query.page"
+                    :total-pages="totalPages"
+                    @update:current-page="setPage($event)"
+                />
+            </div>
+        </PaginationFooter>
+    </div>
+</template>
+
+<script setup lang="ts" generic="T extends object">
+import { computed, watch } from 'vue';
+import DataTable from '../table/DataTable.vue';
+import type { Column } from '../table/types.js';
+import TextInput from '../../form/text-input/TextInput.vue';
+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,
+} from '../../../utils/cms/index.js';
+import Button from '../../action/button/Button.vue';
+import { useIndex } from './useIndex.js';
+import {
+    formatSort,
+    parseSort,
+    toggleSort,
+} from '../../../utils/sort/index.js';
+
+const props = withDefaults(
+    defineProps<{
+        /** Returns the matching page using the shared backend response contract. */
+        load: ListLoader<T>;
+        columns: Column[];
+        queryOptions: QueryOptions;
+        /** Synchronize list parameters with the current Vue Router route. */
+        syncQuery?: boolean;
+        /** Delay in milliseconds before committing typed search text. */
+        searchDebounce?: number;
+        title?: string;
+        description?: string;
+        searchable?: boolean;
+        searchLabel?: string;
+        searchPlaceholder?: string;
+        sortLabel?: string;
+        /** Labels for sort keys, including fields without a visible column. */
+        sortLabels?: Record<string, string>;
+        /** An empty array hides the page-size control. */
+        pageSizes?: number[];
+        pageSizeLabel?: string;
+        rowKey?: string;
+        selectable?: boolean;
+        selected?: (string | number)[];
+        clickable?: boolean;
+    }>(),
+    {
+        syncQuery: false,
+        searchDebounce: 250,
+        title: undefined,
+        description: undefined,
+        searchable: true,
+        searchLabel: 'Search',
+        searchPlaceholder: undefined,
+        sortLabel: 'Sort by',
+        sortLabels: () => ({}),
+        pageSizes: () => [10, 20, 50],
+        pageSizeLabel: 'Rows per page',
+        rowKey: 'id',
+        selectable: false,
+        selected: () => [],
+        clickable: false,
+    },
+);
+
+const emit = defineEmits<{
+    'update:selected': [keys: (string | number)[]];
+    'row-click': [row: T];
+}>();
+
+const slots = defineSlots<{
+    actions?: (scope: {
+        reload: () => Promise<void>;
+        loading: boolean;
+    }) => unknown;
+    filters?: (scope: {
+        filters: ListQuery['filters'];
+        setFilters: (filters: ListQuery['filters']) => void;
+        setFilter: (name: string, value: string | undefined) => void;
+    }) => unknown;
+    selection?: (scope: {
+        selected: (string | number)[];
+        reload: () => Promise<void>;
+        loading: boolean;
+    }) => unknown;
+    error?: (scope: {
+        error: ApiError | null;
+        errors: string[];
+        retry: () => Promise<void>;
+        reset: () => Promise<void>;
+        invalidQuery: boolean;
+    }) => unknown;
+    empty?: () => unknown;
+    summary?: (scope: { total: number; from: number; to: number }) => unknown;
+    [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) {
+        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);
+
+const {
+    query,
+    search,
+    rows,
+    meta,
+    loading,
+    error,
+    errors,
+    invalidQuery,
+    updateCriteria,
+    setSearch,
+    setPage,
+    setFilters,
+    setFilter,
+    reload,
+    reset,
+} = useIndex<T>(props);
+defineExpose({ reload });
+const total = computed(() => meta.value.total);
+const showResults = computed(
+    () =>
+        !invalidQuery.value &&
+        (!errors.value.length || rows.value.length > 0 || loading.value),
+);
+const sortOptions = computed(() => [
+    { value: '', label: 'Default order' },
+    ...props.queryOptions.sorts.flatMap((key) => {
+        const label =
+            props.sortLabels[key] ??
+            props.columns.find((column) => column.key === key)?.label ??
+            key
+                .replaceAll('_', ' ')
+                .replace(/^./, (letter) => letter.toUpperCase());
+        return [
+            {
+                value: formatSort({ key, direction: 'asc' })!,
+                label: `${label} (ascending)`,
+            },
+            {
+                value: formatSort({ key, direction: 'desc' })!,
+                label: `${label} (descending)`,
+            },
+        ];
+    }),
+]);
+
+const cellSlots = computed(() =>
+    props.columns
+        .map((column) => `cell:${column.key}` as const)
+        .filter((name) => slots[name]),
+);
+const totalPages = computed(() =>
+    Math.max(1, Math.ceil(total.value / query.value.page_size)),
+);
+const from = computed(() =>
+    rows.value.length ? (meta.value.page - 1) * meta.value.page_size + 1 : 0,
+);
+const to = computed(() =>
+    rows.value.length
+        ? Math.min(total.value, from.value + rows.value.length - 1)
+        : 0,
+);
+const pageSizeOptions = computed(() =>
+    [...new Set([...props.pageSizes, query.value.page_size])]
+        .filter(
+            (size) =>
+                Number.isInteger(size) &&
+                size > 0 &&
+                size <= (props.queryOptions.maxPageSize ?? 100),
+        )
+        .sort((a, b) => a - b)
+        .map((size) => ({ value: String(size), label: String(size) })),
+);
+</script>
+
+<style>
+@import './index.css';
+</style>

package/components/layout/index/index.css

@@ -0,0 +1,114 @@
+@layer components {
+    .pui-index {
+        display: grid;
+        min-inline-size: 0;
+        gap: var(--space-s);
+        color: var(--text-clr-base);
+    }
+
+    .pui-index__header {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) auto;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--space-s);
+        padding-block-end: var(--space-s);
+        border-block-end: var(--stroke-sm) solid var(--border-clr-subtle);
+    }
+
+    .pui-index__heading {
+        display: grid;
+        gap: var(--space-3xs);
+        min-inline-size: 0;
+    }
+
+    .pui-index__title {
+        margin: 0;
+        font-family: var(--ff-display);
+        font-size: var(--step-2);
+        font-weight: var(--fw-display);
+        letter-spacing: var(--ls-display);
+    }
+
+    .pui-index__description {
+        margin: 0;
+        font-size: var(--step--1);
+        color: var(--text-clr-muted);
+    }
+
+    .pui-index__actions,
+    .pui-index__selection {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--space-xs);
+    }
+
+    .pui-index__body {
+        min-inline-size: 0;
+        background: var(--bg-clr-surface);
+        border: var(--stroke-sm) solid var(--border-clr-subtle);
+        border-radius: var(--radius-md);
+    }
+
+    .pui-index__selection,
+    .pui-index__error {
+        padding: var(--space-s);
+    }
+
+    .pui-index__toolbar {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: end;
+        gap: var(--space-s);
+        padding: var(--space-s);
+        border-block-end: var(--stroke-sm) solid var(--border-clr-subtle);
+    }
+
+    .pui-index__search {
+        flex: 0 1 calc(var(--space-sidebar-width) * 1.5);
+        min-inline-size: min(100%, var(--space-sidebar-width));
+
+        @media (max-width: 48em) {
+            flex-grow: 1;
+        }
+    }
+
+    .pui-index__sort {
+        flex: 0 1 auto;
+        min-inline-size: 0;
+        max-inline-size: 100%;
+    }
+
+    .pui-index__results {
+        min-inline-size: 0;
+    }
+
+    .pui-index__table {
+        --pui-table-cell-padding-block: var(--space-2xs);
+        border: 0;
+        border-radius: var(--radius-md) var(--radius-md) 0 0;
+    }
+
+    .pui-index__page-size > .pui-field {
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
+
+        & > .pui-field__label {
+            white-space: nowrap;
+        }
+    }
+
+    .pui-index__pagination {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: end;
+        gap: var(--space-s);
+
+        & > .pui-pagination-nav {
+            flex: 1;
+        }
+    }
+}