@pienter/ui 0.5.0 → 0.8.0

package/components/feedback/toast/ToastHost.vue

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, watch } from 'vue';
+import Toast from './Toast.vue';
+import { toast as defaultController } from './toast.js';
+import type { ToastController, ToastItem } from './types.js';
+import { ensureLiveRegion } from '../../../utils/a11y/live-region.js';
+
+interface Timer {
+    handle?: ReturnType<typeof setTimeout>;
+    startedAt: number;
+    remaining: number;
+    autoDismiss: boolean;
+    hovered: boolean;
+    focused: boolean;
+}
+
+const props = withDefaults(
+    defineProps<{
+        controller?: ToastController;
+        label?: string;
+    }>(),
+    {
+        controller: () => defaultController,
+        label: 'Notifications',
+    },
+);
+const items = computed(() => props.controller.visible.value);
+const position = computed(() => props.controller.position.value);
+const timers = new Map<string, Timer>();
+
+function start(item: ToastItem, remaining = item.duration): void {
+    const timer: Timer = {
+        startedAt: Date.now(),
+        remaining,
+        autoDismiss: item.duration > 0,
+        hovered: false,
+        focused: false,
+    };
+    if (remaining > 0)
+        timer.handle = setTimeout(
+            () => props.controller.dismiss(item.id),
+            remaining,
+        );
+    timers.set(item.id, timer);
+}
+
+function pause(id: string): void {
+    const timer = timers.get(id);
+    if (!timer || timer.handle === undefined) return;
+    clearTimeout(timer.handle);
+    timer.remaining = Math.max(
+        0,
+        timer.remaining - (Date.now() - timer.startedAt),
+    );
+    timer.handle = undefined;
+}
+
+function resume(item: ToastItem): void {
+    const timer = timers.get(item.id);
+    if (
+        !timer ||
+        timer.handle !== undefined ||
+        !timer.autoDismiss ||
+        timer.hovered ||
+        timer.focused
+    )
+        return;
+    if (timer.remaining <= 0) {
+        props.controller.dismiss(item.id);
+        return;
+    }
+    timer.startedAt = Date.now();
+    timer.handle = setTimeout(
+        () => props.controller.dismiss(item.id),
+        timer.remaining,
+    );
+}
+
+function setHovered(item: ToastItem, hovered: boolean): void {
+    const timer = timers.get(item.id);
+    if (!timer) return;
+    timer.hovered = hovered;
+    if (hovered) pause(item.id);
+    else resume(item);
+}
+
+function setFocused(item: ToastItem, focused: boolean): void {
+    const timer = timers.get(item.id);
+    if (!timer) return;
+    timer.focused = focused;
+    if (focused) pause(item.id);
+    else resume(item);
+}
+
+function onFocusOut(item: ToastItem, event: FocusEvent): void {
+    const root = event.currentTarget as HTMLElement;
+    const target = event.relatedTarget;
+    setFocused(item, target instanceof Node && root.contains(target));
+}
+
+function dismiss(id: string): void {
+    props.controller.dismiss(id);
+}
+
+function runAction(item: ToastItem): void {
+    try {
+        item.action?.onClick();
+    } finally {
+        dismiss(item.id);
+    }
+}
+
+watch(
+    items,
+    (next) => {
+        const ids = new Set(next.map((item) => item.id));
+        for (const [id, timer] of timers) {
+            if (ids.has(id)) continue;
+            if (timer.handle !== undefined) clearTimeout(timer.handle);
+            timers.delete(id);
+        }
+        for (const item of next) if (!timers.has(item.id)) start(item);
+    },
+    { immediate: true },
+);
+
+onMounted(ensureLiveRegion);
+
+onBeforeUnmount(() => {
+    for (const timer of timers.values())
+        if (timer.handle !== undefined) clearTimeout(timer.handle);
+    timers.clear();
+});
+</script>
+
+<template>
+    <Teleport to="body">
+        <div
+            v-if="items.length"
+            class="pui-toast-region"
+            role="region"
+            :aria-label="label"
+            :data-position="position"
+        >
+            <Toast
+                v-for="item in items"
+                :key="item.id"
+                :tone="item.tone"
+                :title="item.title"
+                :message="item.message"
+                :dismissible="item.dismissible"
+                :icon="item.icon"
+                :action="item.action"
+                aria-keyshortcuts="Escape"
+                @dismiss="dismiss(item.id)"
+                @action="runAction(item)"
+                @keydown.escape.prevent="dismiss(item.id)"
+                @mouseenter="setHovered(item, true)"
+                @mouseleave="setHovered(item, false)"
+                @focusin="setFocused(item, true)"
+                @focusout="onFocusOut(item, $event)"
+            />
+        </div>
+    </Teleport>
+</template>

package/components/feedback/toast/toast.ts

@@ -0,0 +1,116 @@
+import { readonly, shallowRef, ref } from 'vue';
+import { announce } from '../../../utils/a11y/live-region.js';
+import type {
+    ToastConfig,
+    ToastController,
+    ToastItem,
+    ToastPosition,
+} from './types.js';
+
+const DEFAULT_CONFIG = {
+    maxVisible: 3,
+    defaultDuration: 5000,
+    position: 'bottom-right' as ToastPosition,
+};
+
+export function createToastController(
+    initialConfig: ToastConfig = {},
+): ToastController {
+    const config = { ...DEFAULT_CONFIG };
+    const visible = shallowRef<ToastItem[]>([]);
+    const position = ref<ToastPosition>(config.position);
+    const queued: ToastItem[] = [];
+    let nextId = 0;
+
+    function configure(next: ToastConfig): void {
+        if (
+            next.maxVisible !== undefined &&
+            Number.isFinite(next.maxVisible) &&
+            next.maxVisible > 0
+        )
+            config.maxVisible = Math.floor(next.maxVisible);
+        if (
+            next.defaultDuration !== undefined &&
+            Number.isFinite(next.defaultDuration) &&
+            next.defaultDuration >= 0
+        )
+            config.defaultDuration = next.defaultDuration;
+        if (next.position) {
+            config.position = next.position;
+            position.value = next.position;
+        }
+        if (visible.value.length > config.maxVisible) {
+            const overflow = visible.value.slice(config.maxVisible);
+            visible.value = visible.value.slice(0, config.maxVisible);
+            queued.unshift(...overflow);
+        }
+        drain();
+    }
+
+    function generateId(): string {
+        nextId += 1;
+        return `pui-toast-${Date.now().toString(36)}-${nextId}`;
+    }
+
+    function drain(): void {
+        if (visible.value.length >= config.maxVisible || !queued.length) return;
+        const slots = config.maxVisible - visible.value.length;
+        visible.value = [...visible.value, ...queued.splice(0, slots)];
+    }
+
+    function dismiss(id: string): void {
+        const next = visible.value.filter((item) => item.id !== id);
+        if (next.length !== visible.value.length) {
+            visible.value = next;
+            drain();
+            return;
+        }
+        const queuedIndex = queued.findIndex((item) => item.id === id);
+        if (queuedIndex >= 0) queued.splice(queuedIndex, 1);
+    }
+
+    configure(initialConfig);
+
+    return {
+        visible: readonly(visible),
+        position: readonly(position),
+        show(options) {
+            const requestedDuration =
+                options.duration ?? config.defaultDuration;
+            const item: ToastItem = {
+                ...options,
+                id: options.id ?? generateId(),
+                duration: Number.isFinite(requestedDuration)
+                    ? Math.max(0, requestedDuration)
+                    : config.defaultDuration,
+                dismissible: options.dismissible ?? true,
+            };
+            if (visible.value.length < config.maxVisible)
+                visible.value = [...visible.value, item];
+            else queued.push(item);
+            if (typeof document !== 'undefined')
+                announce(
+                    [item.title, item.message].filter(Boolean).join('. '),
+                    item.tone === 'danger' ? 'assertive' : 'polite',
+                );
+            return item.id;
+        },
+        dismiss,
+        dismissAll() {
+            queued.length = 0;
+            visible.value = [];
+        },
+        configure,
+    };
+}
+
+export const toast = createToastController();
+
+export type {
+    ToastConfig,
+    ToastController,
+    ToastItem,
+    ToastOptions,
+    ToastPosition,
+    ToastTone,
+} from './types.js';

package/components/feedback/toast/types.ts

@@ -0,0 +1,48 @@
+import type { Ref } from 'vue';
+import type { IconName } from '../../../icons/index.js';
+
+export type ToastTone = 'brand' | 'success' | 'warning' | 'danger';
+
+export type ToastPosition =
+    | 'bottom-right'
+    | 'bottom-center'
+    | 'bottom-left'
+    | 'top-right'
+    | 'top-center'
+    | 'top-left';
+
+export interface ToastOptions {
+    title: string;
+    message?: string;
+    tone?: ToastTone;
+    /** Milliseconds. `0` keeps the toast visible until it is dismissed. */
+    duration?: number;
+    dismissible?: boolean;
+    action?: { label: string; onClick: () => void };
+    icon?: IconName;
+    id?: string;
+}
+
+export interface ToastConfig {
+    maxVisible?: number;
+    defaultDuration?: number;
+    position?: ToastPosition;
+}
+
+export interface ToastItem extends Omit<
+    ToastOptions,
+    'duration' | 'dismissible' | 'id'
+> {
+    id: string;
+    duration: number;
+    dismissible: boolean;
+}
+
+export interface ToastController {
+    readonly visible: Readonly<Ref<readonly ToastItem[]>>;
+    readonly position: Readonly<Ref<ToastPosition>>;
+    show(options: ToastOptions): string;
+    dismiss(id: string): void;
+    dismissAll(): void;
+    configure(config: ToastConfig): void;
+}