@pienter/ui 0.5.0 → 0.8.0

package/components/form/block-editor/BlockEditor.vue

@@ -0,0 +1,455 @@
+<script lang="ts">
+export type { BlockType, ContentBlock, BlockPatch } from './types.js';
+</script>
+
+<script setup lang="ts" generic="T extends ContentBlock">
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
+import Button from '../../action/button/Button.vue';
+import IconButton from '../../action/button/IconButton.vue';
+import Icon from '../../display/icon/Icon.vue';
+import { announce } from '../../../utils/a11y/live-region.js';
+import { generateId } from '../../../utils/a11y/id.js';
+import type { BlockPatch, BlockType, ContentBlock } from './types.js';
+
+const props = withDefaults(
+    defineProps<{
+        modelValue: readonly T[];
+        blockTypes: readonly BlockType<T>[];
+        /** Optional controlled list of collapsed block ids. */
+        collapsed?: readonly string[];
+        disabled?: boolean;
+        label?: string;
+        blockLabel?: (block: T, index: number) => string;
+    }>(),
+    {
+        disabled: false,
+        collapsed: undefined,
+        label: 'Content blocks',
+        blockLabel: undefined,
+    },
+);
+
+const emit = defineEmits<{
+    'update:modelValue': [blocks: T[]];
+    'update:collapsed': [ids: string[]];
+}>();
+defineSlots<{
+    block: (scope: {
+        block: T;
+        index: number;
+        update: (patch: BlockPatch<T>) => void;
+        disabled: boolean;
+    }) => unknown;
+    summary?: (scope: { block: T; index: number }) => unknown;
+    empty?: () => unknown;
+}>();
+
+const id = generateId('blocks');
+const localCollapsed = ref<string[]>([]);
+const collapsed = computed(
+    () => new Set(props.collapsed ?? localCollapsed.value),
+);
+const dragging = ref<string>();
+const dropIndex = ref(0);
+const items = new Map<string, HTMLElement>();
+let gesture:
+    | {
+          id: string;
+          pointerId: number;
+          startX: number;
+          startY: number;
+          y: number;
+      }
+    | undefined;
+let pointerListeners: AbortController | undefined;
+let scrollFrame = 0;
+let scrollParent: HTMLElement | undefined;
+
+function setItem(key: string, element: HTMLElement | null) {
+    if (element) items.set(key, element);
+    else items.delete(key);
+}
+
+function typeLabel(block: T) {
+    return (
+        props.blockTypes.find((type) => type.type === block.type)?.label ??
+        block.type
+    );
+}
+
+function title(block: T, index: number) {
+    return props.blockLabel?.(block, index) || typeLabel(block);
+}
+
+function bodyId(block: T) {
+    return `${id}-${encodeURIComponent(block.id)}`;
+}
+
+function focusBlock(key: string) {
+    void nextTick(() =>
+        items
+            .get(key)
+            ?.querySelector<HTMLButtonElement>('[data-block-toggle]')
+            ?.focus(),
+    );
+}
+
+function add(type: BlockType<T>) {
+    if (props.disabled) return;
+    const block = type.create();
+    if (
+        !block.id ||
+        block.type !== type.type ||
+        props.modelValue.some((item) => item.id === block.id)
+    ) {
+        throw new TypeError(
+            'Block factories must return the requested type and a unique, non-empty id.',
+        );
+    }
+    emit('update:modelValue', [...props.modelValue, { ...block }]);
+    focusBlock(block.id);
+    announce(`${type.label} added. ${props.modelValue.length + 1} blocks.`);
+}
+
+function update(key: string, patch: BlockPatch<T>) {
+    if (props.disabled) return;
+    emit(
+        'update:modelValue',
+        props.modelValue.map((block) =>
+            block.id === key
+                ? { ...block, ...patch, id: block.id, type: block.type }
+                : block,
+        ),
+    );
+}
+
+function remove(key: string) {
+    if (props.disabled) return;
+    const index = props.modelValue.findIndex((block) => block.id === key);
+    const block = props.modelValue[index];
+    if (!block) return;
+    const remaining = props.modelValue.filter((block) => block.id !== key);
+    emit('update:modelValue', remaining);
+    setCollapsed([...collapsed.value].filter((id) => id !== key));
+    const next = remaining[Math.min(index, remaining.length - 1)];
+    if (next) focusBlock(next.id);
+    else
+        void nextTick(() =>
+            document
+                .getElementById(`${id}-add`)
+                ?.querySelector<HTMLButtonElement>('button')
+                ?.focus(),
+        );
+    announce(`${title(block, index)} removed. ${remaining.length} blocks.`);
+}
+
+function move(key: string, target: number) {
+    if (props.disabled) return;
+    const source = props.modelValue.findIndex((block) => block.id === key);
+    if (
+        source < 0 ||
+        target < 0 ||
+        target >= props.modelValue.length ||
+        source === target
+    )
+        return;
+    const blocks = [...props.modelValue];
+    const block = blocks.splice(source, 1)[0]!;
+    blocks.splice(target, 0, block);
+    emit('update:modelValue', blocks);
+    focusBlock(key);
+    announce(
+        `${title(block, source)} moved to position ${target + 1} of ${blocks.length}.`,
+    );
+}
+
+function toggle(key: string) {
+    if (props.disabled) return;
+    const next = new Set(collapsed.value);
+    if (next.has(key)) next.delete(key);
+    else next.add(key);
+    setCollapsed([...next]);
+}
+
+function setCollapsed(ids: string[]) {
+    if (props.collapsed === undefined) localCollapsed.value = ids;
+    emit('update:collapsed', ids);
+}
+
+const otherBlocks = computed(() =>
+    props.modelValue.filter((block) => block.id !== dragging.value),
+);
+function indicator(key: string) {
+    if (!dragging.value) return undefined;
+    if (otherBlocks.value[dropIndex.value]?.id === key) return 'before';
+    if (
+        dropIndex.value === otherBlocks.value.length &&
+        otherBlocks.value.at(-1)?.id === key
+    )
+        return 'after';
+    return undefined;
+}
+
+function locateDrop(y: number) {
+    dropIndex.value = otherBlocks.value.filter((block) => {
+        const rect = items.get(block.id)?.getBoundingClientRect();
+        return rect && y > rect.top + rect.height / 2;
+    }).length;
+}
+
+function autoScroll() {
+    if (!gesture || !dragging.value) return;
+    const bounds = scrollParent?.getBoundingClientRect();
+    const top = bounds?.top ?? 0;
+    const bottom = bounds?.bottom ?? window.innerHeight;
+    const delta = gesture.y < top + 48 ? -14 : gesture.y > bottom - 48 ? 14 : 0;
+    if (delta) {
+        if (scrollParent) scrollParent.scrollTop += delta;
+        else window.scrollBy(0, delta);
+        locateDrop(gesture.y);
+    }
+    scrollFrame = requestAnimationFrame(autoScroll);
+}
+
+function stopDrag() {
+    pointerListeners?.abort();
+    pointerListeners = undefined;
+    cancelAnimationFrame(scrollFrame);
+    gesture = undefined;
+    dragging.value = undefined;
+}
+
+function startDrag(event: PointerEvent, key: string) {
+    if (props.disabled || event.button !== 0 || props.modelValue.length < 2)
+        return;
+    stopDrag();
+    const handle = event.currentTarget as HTMLButtonElement;
+    handle.focus({ preventScroll: true });
+    gesture = {
+        id: key,
+        pointerId: event.pointerId,
+        startX: event.clientX,
+        startY: event.clientY,
+        y: event.clientY,
+    };
+    scrollParent = undefined;
+    for (
+        let parent = handle.parentElement;
+        parent;
+        parent = parent.parentElement
+    ) {
+        if (
+            /(auto|scroll)/.test(getComputedStyle(parent).overflowY) &&
+            parent.scrollHeight > parent.clientHeight
+        ) {
+            scrollParent = parent;
+            break;
+        }
+    }
+    try {
+        handle.setPointerCapture(event.pointerId);
+    } catch {
+        /* Synthetic pointer events have no capturable pointer. */
+    }
+    pointerListeners = new AbortController();
+    const options = { signal: pointerListeners.signal };
+    window.addEventListener('pointermove', dragMove, options);
+    window.addEventListener('pointerup', finishDrag, options);
+    window.addEventListener('pointercancel', stopDrag, options);
+    window.addEventListener('blur', stopDrag, options);
+    window.addEventListener('keydown', cancelWithEscape, options);
+    event.preventDefault();
+}
+
+function dragMove(event: PointerEvent) {
+    if (!gesture || event.pointerId !== gesture.pointerId) return;
+    gesture.y = event.clientY;
+    if (!dragging.value) {
+        if (
+            Math.hypot(
+                event.clientX - gesture.startX,
+                event.clientY - gesture.startY,
+            ) < 5
+        )
+            return;
+        dragging.value = gesture.id;
+        scrollFrame = requestAnimationFrame(autoScroll);
+    }
+    locateDrop(event.clientY);
+    event.preventDefault();
+}
+
+function finishDrag(event: PointerEvent) {
+    if (!gesture || event.pointerId !== gesture.pointerId) return;
+    const key = dragging.value;
+    const target = dropIndex.value;
+    stopDrag();
+    if (key) move(key, target);
+}
+
+function cancelWithEscape(event: KeyboardEvent) {
+    if (event.key === 'Escape' && gesture) {
+        event.preventDefault();
+        stopDrag();
+        announce('Reordering cancelled.');
+    }
+}
+
+watch(
+    () => props.disabled,
+    (disabled) => {
+        if (disabled) stopDrag();
+    },
+);
+watch(() => props.modelValue.map((block) => block.id).join('\u0000'), stopDrag);
+onBeforeUnmount(stopDrag);
+</script>
+
+<template>
+    <div
+        class="pui-block-editor"
+        :data-disabled="disabled ? 'true' : undefined"
+    >
+        <p :id="`${id}-hint`" class="pui-block-editor__hint">
+            Use the move buttons to reorder, or drag with a pointer.
+        </p>
+        <ol
+            v-if="modelValue.length"
+            class="pui-block-editor__list"
+            :aria-label="label"
+            :aria-describedby="`${id}-hint`"
+        >
+            <li
+                v-for="(block, index) in modelValue"
+                :key="block.id"
+                :ref="
+                    (element) =>
+                        setItem(block.id, element as HTMLElement | null)
+                "
+                class="pui-block-editor__item"
+                :data-block-id="block.id"
+                :data-dragging="dragging === block.id ? 'true' : undefined"
+                :data-drop="indicator(block.id)"
+            >
+                <div class="pui-block-editor__header">
+                    <button
+                        class="pui-block-editor__drag"
+                        type="button"
+                        tabindex="-1"
+                        :disabled="disabled || modelValue.length < 2"
+                        :aria-label="`Drag ${title(block, index)}`"
+                        :aria-describedby="`${id}-hint`"
+                        @pointerdown="startDrag($event, block.id)"
+                    >
+                        <Icon name="arrow-up-down" size="sm" />
+                    </button>
+                    <div class="pui-block-editor__heading">
+                        <button
+                            type="button"
+                            class="pui-block-editor__toggle"
+                            data-block-toggle
+                            :disabled="disabled"
+                            :aria-label="`${collapsed.has(block.id) ? 'Expand' : 'Collapse'} ${title(block, index)}`"
+                            :aria-expanded="
+                                collapsed.has(block.id) ? 'false' : 'true'
+                            "
+                            :aria-controls="bodyId(block)"
+                            @click="toggle(block.id)"
+                        >
+                            <Icon
+                                :name="
+                                    collapsed.has(block.id)
+                                        ? 'chevron-right'
+                                        : 'chevron-down'
+                                "
+                                size="sm"
+                            />
+                            <span class="pui-block-editor__title">{{
+                                title(block, index)
+                            }}</span>
+                            <span
+                                v-if="title(block, index) !== typeLabel(block)"
+                                class="pui-block-editor__type"
+                                >{{ typeLabel(block) }}</span
+                            >
+                        </button>
+                        <div
+                            v-if="$slots.summary"
+                            class="pui-block-editor__summary"
+                        >
+                            <slot
+                                name="summary"
+                                :block="block"
+                                :index="index"
+                            />
+                        </div>
+                    </div>
+                    <div class="pui-block-editor__actions">
+                        <IconButton
+                            name="arrow-up"
+                            variant="ghost"
+                            size="sm"
+                            :label="`Move ${title(block, index)} up`"
+                            :disabled="disabled || index === 0"
+                            @click="move(block.id, index - 1)"
+                        />
+                        <IconButton
+                            name="arrow-down"
+                            variant="ghost"
+                            size="sm"
+                            :label="`Move ${title(block, index)} down`"
+                            :disabled="
+                                disabled || index === modelValue.length - 1
+                            "
+                            @click="move(block.id, index + 1)"
+                        />
+                        <IconButton
+                            name="trash-2"
+                            variant="ghost"
+                            size="sm"
+                            :label="`Remove ${title(block, index)}`"
+                            :disabled="disabled"
+                            @click="remove(block.id)"
+                        />
+                    </div>
+                </div>
+                <div
+                    :id="bodyId(block)"
+                    :hidden="collapsed.has(block.id)"
+                    class="pui-block-editor__body"
+                    :inert="disabled ? true : undefined"
+                >
+                    <slot
+                        name="block"
+                        :block="block"
+                        :index="index"
+                        :update="
+                            (patch: BlockPatch<T>) => update(block.id, patch)
+                        "
+                        :disabled="disabled"
+                    />
+                </div>
+            </li>
+        </ol>
+        <div v-else class="pui-block-editor__empty">
+            <slot name="empty"
+                >No blocks yet. Add a block to start writing.</slot
+            >
+        </div>
+        <div :id="`${id}-add`" class="pui-block-editor__add">
+            <Button
+                v-for="type in blockTypes"
+                :key="type.type"
+                icon="plus"
+                size="sm"
+                :disabled="disabled"
+                @click="add(type)"
+                >Add {{ type.label }}</Button
+            >
+        </div>
+    </div>
+</template>
+
+<style>
+@import './block-editor.css';
+</style>

package/components/form/block-editor/block-editor.css

@@ -0,0 +1,149 @@
+@layer components {
+    .pui-block-editor {
+        display: grid;
+        gap: var(--space-s);
+        min-inline-size: 0;
+    }
+
+    .pui-block-editor__hint,
+    .pui-block-editor__summary {
+        margin: 0;
+        color: var(--text-clr-muted);
+        font-size: var(--step--1);
+    }
+
+    .pui-block-editor__list {
+        display: grid;
+        gap: var(--space-s);
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .pui-block-editor__item {
+        position: relative;
+        min-inline-size: 0;
+        border: var(--stroke-sm) solid var(--border-clr-subtle);
+        border-radius: var(--radius-md);
+        background: var(--bg-clr-surface);
+
+        &[data-dragging='true'] {
+            opacity: var(--opacity-disabled);
+        }
+
+        &[data-drop]::before {
+            content: '';
+            position: absolute;
+            inset-inline: 0;
+            block-size: var(--stroke-lg);
+            border-radius: var(--radius-pill);
+            background: var(--outline-clr-base);
+            pointer-events: none;
+        }
+
+        &[data-drop='before']::before {
+            inset-block-start: calc(var(--space-2xs) * -1);
+        }
+
+        &[data-drop='after']::before {
+            inset-block-end: calc(var(--space-2xs) * -1);
+        }
+    }
+
+    .pui-block-editor__header {
+        display: flex;
+        align-items: start;
+        gap: var(--space-2xs);
+        padding: var(--space-xs);
+    }
+
+    .pui-block-editor__heading {
+        flex: 1;
+        min-inline-size: 0;
+    }
+
+    .pui-block-editor__drag,
+    .pui-block-editor__toggle {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2xs);
+        min-block-size: var(--control-height-sm);
+        padding: 0;
+        border: 0;
+        background: transparent;
+        color: var(--text-clr-base);
+        font: inherit;
+        text-align: start;
+        cursor: pointer;
+
+        &:focus-visible {
+            outline: var(--outline-width) solid var(--outline-clr-base);
+            outline-offset: var(--outline-offset);
+            border-radius: var(--radius-xs);
+        }
+
+        &:disabled {
+            opacity: var(--opacity-disabled);
+            cursor: not-allowed;
+        }
+    }
+
+    .pui-block-editor__drag {
+        justify-content: center;
+        flex: 0 0 var(--control-height-sm);
+        touch-action: none;
+        cursor: grab;
+
+        &:active:not(:disabled) {
+            cursor: grabbing;
+        }
+    }
+
+    .pui-block-editor__toggle {
+        flex-wrap: wrap;
+        inline-size: 100%;
+    }
+
+    .pui-block-editor__title {
+        font-size: var(--step--1);
+        font-weight: var(--fw-control);
+        overflow-wrap: anywhere;
+    }
+
+    .pui-block-editor__type {
+        color: var(--text-clr-muted);
+        font-size: var(--step--2);
+    }
+
+    .pui-block-editor__actions,
+    .pui-block-editor__add {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--space-3xs);
+    }
+
+    .pui-block-editor__body {
+        display: grid;
+        gap: var(--space-s);
+        padding: var(--space-s);
+        border-block-start: var(--stroke-sm) solid var(--border-clr-subtle);
+
+        &[hidden] {
+            display: none;
+        }
+    }
+
+    .pui-block-editor__empty {
+        padding: var(--space-m);
+        border: var(--stroke-sm) dashed var(--border-clr-subtle);
+        border-radius: var(--radius-md);
+        color: var(--text-clr-muted);
+        font-size: var(--step--1);
+        text-align: center;
+    }
+
+    .pui-block-editor__add {
+        gap: var(--space-2xs);
+    }
+}

package/components/form/block-editor/types.ts

@@ -0,0 +1,15 @@
+export interface ContentBlock {
+    id: string;
+    type: string;
+}
+
+export interface BlockType<T extends ContentBlock = ContentBlock> {
+    type: string;
+    label: string;
+    /** Return a new block with a unique, stable id. */
+    create: () => T;
+}
+
+export type BlockPatch<T extends ContentBlock> = Partial<
+    Omit<T, 'id' | 'type'>
+>;

package/components/form/checkbox/Checkbox.vue

@@ -19,13 +19,21 @@
                 )
             "
         />
-        <label class="pui-field__label" :for="inputId">{{ label }}</label>
+        <label class="pui-field__label" :for="inputId"
+            >{{ label
+            }}<span
+                v-if="required"
+                class="pui-field__required"
+                aria-hidden="true"
+                >*</span
+            ></label
+        >
         <p v-if="hint" :id="hintId" class="pui-field__hint">{{ hint }}</p>
         <ul
             v-if="errors.length"
             :id="errorsId"
             class="pui-field__hint"
-            role="alert"
+            role="status"
         >
             <li v-for="error in errors" :key="error">{{ error }}</li>
         </ul>