@revojs/ui 0.2.61 → 0.2.63

package/dist/vue/components/tags-input.vue

@@ -0,0 +1,141 @@
+<template>
+    <Stack class="text-sm">
+        <label v-if="label" :for="id" class="font-normal">
+            {{ label }}<span v-if="required" aria-hidden="true" class="text-destructive"> *</span>
+        </label>
+
+        <Stack
+            direction="horizontal"
+            align="center"
+            gap="1"
+            padding="2"
+            wrap
+            class="cursor-text rounded-ui bg-secondary ring-1 ring-input ring-inset focus-within:ring-2 focus-within:ring-ring"
+            :class="[disabled ? 'cursor-not-allowed opacity-50' : '', invalid ? 'ring-2 ring-destructive' : '']"
+            @mousedown="focus"
+        >
+            <Badge
+                v-for="(tag, index) in modelValue"
+                :key="tag"
+                variant="outline"
+                :label="tag"
+                :remove-label="labels.remove(tag)"
+                :remove-disabled="disabled"
+                @remove="remove(index)"
+            />
+
+            <input
+                :id="id"
+                ref="input"
+                v-model="draft"
+                type="text"
+                autocomplete="off"
+                class="min-w-24 flex-1 bg-transparent p-1 outline-none placeholder:opacity-50 pointer-coarse:text-[16px]/5"
+                :placeholder="modelValue.length === 0 ? placeholder : undefined"
+                :required="required && modelValue.length === 0"
+                :disabled="disabled"
+                :readonly="max !== undefined && modelValue.length >= max"
+                :aria-invalid="invalid || undefined"
+                @keydown="handleKeyDown"
+                @paste="paste"
+                @blur="add(draft)"
+            />
+        </Stack>
+
+        <input v-for="tag in modelValue" :key="tag" type="hidden" :name="name" :value="tag" :disabled="disabled" />
+    </Stack>
+</template>
+
+<script setup lang="ts">
+import { ref, useId, useTemplateRef } from "vue";
+import type { TagsInputProps } from "../../components/tags-input";
+import { useUiLabels } from "../utilities/labels";
+import Badge from "./badge.vue";
+import Stack from "./stack.vue";
+
+const {
+    modelValue = [],
+    label,
+    placeholder,
+    name,
+    max,
+    required = false,
+    disabled = false,
+    invalid = false,
+} = defineProps<TagsInputProps>();
+
+const emit = defineEmits<{
+    "update:modelValue": [value: Array<string>];
+}>();
+
+const labels = useUiLabels();
+
+const id = useId();
+
+const input = useTemplateRef("input");
+
+const draft = ref("");
+
+function add(text: string) {
+    const tags = [...modelValue];
+
+    for (const part of text.split(/[,\n]/)) {
+        const tag = part.trim();
+
+        if (tag !== "" && !tags.includes(tag) && (max === undefined || tags.length < max)) {
+            tags.push(tag);
+        }
+    }
+
+    draft.value = "";
+
+    if (tags.length !== modelValue.length) {
+        emit("update:modelValue", tags);
+    }
+}
+
+function remove(index: number) {
+    if (disabled) {
+        return;
+    }
+
+    const tags: Array<string> = [];
+
+    for (const [position, tag] of modelValue.entries()) {
+        if (position !== index) {
+            tags.push(tag);
+        }
+    }
+
+    emit("update:modelValue", tags);
+    input.value?.focus();
+}
+
+function focus(event: MouseEvent) {
+    if (event.target !== input.value && !(event.target as HTMLElement).closest("button")) {
+        event.preventDefault();
+        input.value?.focus();
+    }
+}
+
+function paste(event: ClipboardEvent) {
+    const text = event.clipboardData?.getData("text") ?? "";
+
+    if (/[,\n]/.test(text)) {
+        event.preventDefault();
+        add(`${draft.value}${text}`);
+    }
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+    if (event.key === "Enter" || event.key === ",") {
+        if (draft.value.trim() !== "") {
+            event.preventDefault();
+            add(draft.value);
+        }
+    } else if (event.key === "Backspace" && draft.value === "" && modelValue.length > 0) {
+        event.preventDefault();
+        remove(modelValue.length - 1);
+    }
+}
+</script>

package/dist/vue/components/toast-region.vue

@@ -0,0 +1,233 @@
+<template>
+    <section
+        ref="region"
+        :aria-label="label ?? labels.notifications"
+        :popover="layered ? 'manual' : undefined"
+        class="pointer-events-none fixed inset-auto end-0 bottom-0 z-50 m-0 w-full overflow-visible border-0 bg-transparent p-0 sm:w-96"
+    >
+        <Stack
+            is="ol"
+            ref="list"
+            tabindex="-1"
+            aria-live="polite"
+            aria-relevant="additions"
+            padding="3"
+            gap="3"
+            class="outline-none"
+            @pointerenter="pause"
+            @pointerleave="resume"
+            @focusin="pause"
+            @focusout="resume"
+        >
+            <li
+                v-for="toast in toasts"
+                :key="toast.id"
+                class="pointer-events-auto touch-pan-y rounded-ui bg-popover shadow-xl"
+                :style="offsets[toast.id] ? `translate: ${offsets[toast.id]}px 0` : undefined"
+                @pointerdown="startSwipe($event, toast.id)"
+                @pointermove="swipe($event, toast.id)"
+                @pointerup="endSwipe(toast.id)"
+                @pointercancel="endSwipe(toast.id)"
+            >
+                <Notification :label="toast.label" :subtext="toast.subtext" :variant="toast.variant" :announce="false">
+                    <template #actions>
+                        <Button
+                            v-if="toast.action"
+                            size="xs"
+                            variant="outline"
+                            :label="toast.action.label"
+                            @click="select(toast)"
+                        />
+
+                        <Button
+                            size="xs"
+                            variant="ghost"
+                            :icon-prefix="CloseIcon"
+                            :aria-label="labels.close"
+                            @click="remove(toast.id)"
+                        />
+                    </template>
+                </Notification>
+            </li>
+        </Stack>
+    </section>
+</template>
+
+<script setup lang="ts">
+import CloseIcon from "~icons/hugeicons/multiplication-sign";
+import { computed, onMounted, onUnmounted, ref, useTemplateRef, watch } from "vue";
+import type { Toast, ToastRegionProps } from "../../components/toast";
+import { useUiLabels } from "../utilities/labels";
+import { useToast } from "../utilities/use-toast";
+import Button from "./button.vue";
+import Notification from "./notification.vue";
+import Stack from "./stack.vue";
+
+const { label, hotkey = "F8" } = defineProps<ToastRegionProps>();
+
+const labels = useUiLabels();
+
+const { toasts, remove } = useToast();
+
+const region = useTemplateRef("region");
+
+const list = useTemplateRef<InstanceType<typeof Stack>>("list");
+
+const layered = ref(false);
+
+const offsets = ref<Record<string, number>>({});
+
+const timers = new Map<string, { timer?: ReturnType<typeof setTimeout>; remaining: number; started: number }>();
+
+const visible = computed(() => toasts.value.length > 0);
+
+let paused = false;
+
+let swiping: { id: string; x: number } | undefined;
+
+function schedule(id: string) {
+    const entry = timers.get(id);
+
+    if (!entry || paused) {
+        return;
+    }
+
+    clearTimeout(entry.timer);
+    entry.started = Date.now();
+    entry.timer = setTimeout(() => remove(id), entry.remaining);
+}
+
+function pause() {
+    paused = true;
+
+    for (const entry of timers.values()) {
+        if (entry.timer) {
+            clearTimeout(entry.timer);
+            entry.timer = undefined;
+            entry.remaining -= Date.now() - entry.started;
+        }
+    }
+}
+
+function resume(event: Event) {
+    const element: HTMLElement | undefined = list.value?.$el;
+
+    if (
+        (event.type === "focusout" && element?.contains((event as FocusEvent).relatedTarget as Node)) ||
+        (event.type === "pointerleave" && element?.contains(document.activeElement))
+    ) {
+        return;
+    }
+
+    paused = false;
+
+    for (const id of timers.keys()) {
+        schedule(id);
+    }
+}
+
+function select(toast: Toast) {
+    toast.action?.onSelect();
+    remove(toast.id);
+}
+
+function startSwipe(event: PointerEvent, id: string) {
+    if ((event.target as HTMLElement).closest("button, a")) {
+        return;
+    }
+
+    swiping = { id, x: event.clientX };
+    (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
+}
+
+function swipe(event: PointerEvent, id: string) {
+    if (swiping?.id === id) {
+        offsets.value = { ...offsets.value, [id]: event.clientX - swiping.x };
+    }
+}
+
+function endSwipe(id: string) {
+    if (swiping?.id !== id) {
+        return;
+    }
+
+    swiping = undefined;
+
+    if (Math.abs(offsets.value[id] ?? 0) > 80) {
+        remove(id);
+    }
+
+    const next: Record<string, number> = {};
+
+    for (const [key, value] of Object.entries(offsets.value)) {
+        if (key !== id) {
+            next[key] = value;
+        }
+    }
+
+    offsets.value = next;
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+    if (event.key === hotkey && visible.value) {
+        event.preventDefault();
+        (list.value?.$el as HTMLElement | undefined)?.focus();
+    }
+}
+
+watch(
+    toasts,
+    (value, previous) => {
+        for (const toast of value) {
+            if (!timers.has(toast.id) && toast.duration) {
+                timers.set(toast.id, { remaining: toast.duration, started: Date.now() });
+                schedule(toast.id);
+            }
+        }
+
+        for (const [id, entry] of timers) {
+            let present = false;
+
+            for (const toast of value) {
+                if (toast.id === id) {
+                    present = true;
+                    break;
+                }
+            }
+
+            if (!present) {
+                clearTimeout(entry.timer);
+                timers.delete(id);
+            }
+        }
+
+        const element = region.value;
+
+        if (layered.value && element) {
+            const shown = element.matches(":popover-open");
+
+            if (shown && (value.length === 0 || value.length > previous.length)) {
+                element.hidePopover();
+            }
+
+            if (value.length > 0 && (!shown || value.length > previous.length)) {
+                element.showPopover();
+            }
+        }
+    },
+    { flush: "post" },
+);
+
+onMounted(() => {
+    layered.value = typeof HTMLElement.prototype.showPopover === "function";
+    document.addEventListener("keydown", handleKeyDown);
+});
+
+onUnmounted(() => {
+    document.removeEventListener("keydown", handleKeyDown);
+
+    for (const entry of timers.values()) {
+        clearTimeout(entry.timer);
+    }
+});
+</script>

package/dist/vue/components/toggle-group.vue

@@ -1,41 +1,96 @@
 <template>
-    <Stack role="group" :aria-label="label" direction="horizontal" gap="1" :wrap="wrap">
+    <Stack
+        ref="group"
+        role="group"
+        :aria-label="label"
+        :aria-orientation="orientation"
+        :direction="orientation"
+        gap="1"
+        :wrap="wrap"
+        @keydown="handleKeyDown"
+        @focusin="handleFocusIn"
+    >
         <Button
             v-for="item in items"
             :key="item.value"
             font="medium"
             :size="size"
-            :variant="item.value === selected ? 'secondary' : 'ghost'"
+            :variant="isSelected(item.value) ? 'secondary' : 'ghost'"
             :icon-prefix="item.iconPrefix"
             :disabled="item.disabled"
-            :aria-pressed="item.value === selected"
+            :aria-pressed="isSelected(item.value)"
+            :data-state="isSelected(item.value) ? 'on' : 'off'"
             @click="select(item.value)"
         >
-            <slot name="item" :item="item" :selected="item.value === selected">
+            <slot name="item" :item="item" :selected="isSelected(item.value)">
                 <span v-if="item.label" class="truncate px-1">{{ item.label }}</span>
             </slot>
         </Button>
     </Stack>
 </template>
 
-<script setup lang="ts" generic="Value extends ToggleGroupValue = ToggleGroupValue">
-import { ref, watch } from "vue";
+<script
+    setup
+    lang="ts"
+    generic="Value extends ToggleGroupValue = ToggleGroupValue, Model extends Value | Array<Value> = Value"
+>
+import { computed, ref, useTemplateRef, watch } from "vue";
 import type { ToggleGroupProps, ToggleGroupValue } from "../../components/toggle-group";
+import { useRovingFocus } from "../utilities/use-roving-focus";
 import Button from "./button.vue";
 import Stack from "./stack.vue";
 
-const { modelValue, items, label, size = "md", wrap = true } = defineProps<ToggleGroupProps<Value>>();
+const {
+    modelValue,
+    items,
+    label,
+    size = "md",
+    wrap = true,
+    multiple = false,
+    orientation = "horizontal",
+} = defineProps<ToggleGroupProps<Value, Model>>();
 
 const emit = defineEmits<{
-    "update:modelValue": [value: Value];
+    "update:modelValue": [value: Model];
 }>();
 
+const group = useTemplateRef<InstanceType<typeof Stack>>("group");
+
+const { handleKeyDown, handleFocusIn } = useRovingFocus(
+    computed(() => group.value?.$el ?? null),
+    () => ({ selector: "button", orientation }),
+);
+
 const selected = ref(modelValue);
 
+function isSelected(value: Value) {
+    if (Array.isArray(selected.value)) {
+        return selected.value.includes(value);
+    }
+
+    return selected.value === value;
+}
+
 function select(value: Value) {
-    selected.value = value;
+    if (multiple) {
+        const values: Array<Value> = [];
+
+        for (const entry of Array.isArray(selected.value) ? selected.value : []) {
+            if (entry !== value) {
+                values.push(entry);
+            }
+        }
+
+        if (!isSelected(value)) {
+            values.push(value);
+        }
+
+        selected.value = values as Model;
+    } else {
+        selected.value = value as Model;
+    }
 
-    emit("update:modelValue", value);
+    emit("update:modelValue", selected.value as Model);
 }
 
 watch(

package/dist/vue/components/toolbar.vue

@@ -0,0 +1,43 @@
+<template>
+    <Stack
+        ref="toolbar"
+        role="toolbar"
+        :aria-label="label"
+        :aria-orientation="orientation"
+        :direction="orientation"
+        :gap="gap"
+        :padding="padding"
+        :align="align"
+        :justify="justify"
+        :wrap="wrap"
+        @keydown="handleKeyDown"
+        @focusin="handleFocusIn"
+    >
+        <slot />
+    </Stack>
+</template>
+
+<script setup lang="ts">
+import { computed, useTemplateRef } from "vue";
+import type { ToolbarProps } from "../../components/toolbar";
+import { useRovingFocus } from "../utilities/use-roving-focus";
+import Stack from "./stack.vue";
+
+const {
+    label,
+    orientation = "horizontal",
+    gap = "1",
+    padding,
+    align = "center",
+    justify,
+    wrap = false,
+    loop = true,
+} = defineProps<ToolbarProps>();
+
+const toolbar = useTemplateRef<InstanceType<typeof Stack>>("toolbar");
+
+const { handleKeyDown, handleFocusIn } = useRovingFocus(
+    computed(() => toolbar.value?.$el ?? null),
+    () => ({ orientation, loop }),
+);
+</script>

package/dist/vue/components/tooltip.vue

@@ -1,19 +1,33 @@
 <template>
     <span
         class="group/tooltip relative inline-flex max-w-full"
-        @pointerenter="hovered = true"
-        @pointerleave="hovered = false"
-        @focusin="focused = true"
-        @focusout="focused = false"
+        :style="anchorStyle"
+        @pointerenter="enter"
+        @pointerleave="leave"
+        @focusin="focus"
+        @focusout="blur"
     >
         <Trigger />
 
         <span
             v-if="!disabled"
             :id="id"
+            ref="layer"
             role="tooltip"
-            class="invisible absolute z-20 w-max max-w-xs group-hover/tooltip:visible group-has-[:focus-visible]/tooltip:visible"
-            :class="[placements[placement], aligns[align], dismissed ? 'hidden' : '']"
+            :popover="anchored ? 'manual' : undefined"
+            :style="anchored ? layerStyle : undefined"
+            :data-state="visible ? 'open' : 'closed'"
+            class="w-max max-w-xs p-1"
+            :class="
+                anchored
+                    ? `inset-auto m-0 overflow-visible border-0 bg-transparent [position-try-fallbacks:flip-block] ${areas[`${placement}-${align}`]}`
+                    : [
+                          'invisible absolute z-20 group-hover/tooltip:visible group-has-[:focus-visible]/tooltip:visible',
+                          placements[placement],
+                          aligns[align],
+                          dismissed ? 'hidden' : '',
+                      ]
+            "
         >
             <span class="block rounded-ui bg-primary p-1 text-xs/4 text-primary-foreground shadow-xl">
                 <span class="block px-1">{{ label }}</span>
@@ -23,32 +37,97 @@
 </template>
 
 <script setup lang="ts">
-import { cloneVNode, Comment, isVNode, onUnmounted, ref, useId, useSlots, watch, type VNodeChild } from "vue";
+import {
+    cloneVNode,
+    Comment,
+    computed,
+    isVNode,
+    onUnmounted,
+    ref,
+    useId,
+    useSlots,
+    useTemplateRef,
+    watch,
+    type VNodeChild,
+} from "vue";
 import type { TooltipAlign, TooltipPlacement, TooltipProps } from "../../components/tooltip";
+import { tooltipState } from "../utilities/tooltip";
+import { useAnchor } from "../utilities/use-anchor";
 
-const { label, placement = "top", align = "center", disabled = false } = defineProps<TooltipProps>();
+const { label, placement = "top", align = "center", delay = 400, disabled = false } = defineProps<TooltipProps>();
 
 const slots = useSlots();
 
 const id = useId();
 
+const layer = useTemplateRef("layer");
+
 const dismissed = ref(false);
 
 const hovered = ref(false);
 
 const focused = ref(false);
 
+const visible = computed(() => (hovered.value || focused.value) && !dismissed.value);
+
+const { anchored, anchorStyle, layerStyle } = useAnchor(layer, visible);
+
 const placements: Record<TooltipPlacement, string> = {
-    top: "bottom-full p-1",
-    bottom: "top-full p-1",
+    top: "bottom-full",
+    bottom: "top-full",
 };
 
 const aligns: Record<TooltipAlign, string> = {
-    start: "left-0",
+    start: "start-0",
     center: "left-1/2 -translate-x-1/2",
-    end: "right-0",
+    end: "end-0",
+};
+
+const areas: Record<`${TooltipPlacement}-${TooltipAlign}`, string> = {
+    "top-start": "[position-area:block-start_span-inline-end]",
+    "top-center": "[position-area:block-start]",
+    "top-end": "[position-area:block-start_span-inline-start]",
+    "bottom-start": "[position-area:block-end_span-inline-end]",
+    "bottom-center": "[position-area:block-end]",
+    "bottom-end": "[position-area:block-end_span-inline-start]",
 };
 
+let timer: ReturnType<typeof setTimeout> | undefined;
+
+function enter(event: PointerEvent) {
+    if (event.pointerType === "touch" || hovered.value) {
+        return;
+    }
+
+    clearTimeout(timer);
+
+    if (Date.now() - tooltipState.closedAt < 300) {
+        hovered.value = true;
+    } else {
+        timer = setTimeout(() => {
+            hovered.value = true;
+        }, delay);
+    }
+}
+
+function leave() {
+    clearTimeout(timer);
+
+    if (hovered.value) {
+        tooltipState.closedAt = Date.now();
+    }
+
+    hovered.value = false;
+}
+
+function focus(event: FocusEvent) {
+    focused.value = (event.target as HTMLElement).matches(":focus-visible");
+}
+
+function blur() {
+    focused.value = false;
+}
+
 function handleKeyDown(event: KeyboardEvent) {
     if (event.key === "Escape") {
         dismissed.value = true;
@@ -71,20 +150,27 @@ function Trigger() {
 
     return nodes;
 }
-watch([hovered, focused], ([hover, focus]) => {
+
+watch(visible, (value) => {
     if (typeof document === "undefined") {
         return;
     }
 
-    if (hover || focus) {
+    if (value) {
         document.addEventListener("keydown", handleKeyDown);
     } else {
-        dismissed.value = false;
         document.removeEventListener("keydown", handleKeyDown);
     }
 });
 
+watch([hovered, focused], ([hover, focus]) => {
+    if (!hover && !focus) {
+        dismissed.value = false;
+    }
+});
+
 onUnmounted(() => {
+    clearTimeout(timer);
     document.removeEventListener("keydown", handleKeyDown);
 });
 </script>