@revojs/ui 0.2.60 → 0.2.62

package/dist/vue/components/menu-radio-item.vue

@@ -0,0 +1,50 @@
+<template>
+    <Button
+        role="menuitemradio"
+        tabindex="-1"
+        font="normal"
+        layout="left"
+        variant="ghost"
+        :aria-checked="checked"
+        :data-state="checked ? 'checked' : 'unchecked'"
+        :icon-prefix="iconPrefix"
+        :icon-suffix="checked ? TickIcon : undefined"
+        :size="size ?? menuSize ?? 'md'"
+        :disabled="disabled"
+        class="w-full"
+        @click="select"
+    >
+        <slot>
+            <span v-if="label" class="flex-1 truncate px-1">{{ label }}</span>
+        </slot>
+    </Button>
+</template>
+
+<script setup lang="ts" generic="Value extends MenuRadioValue = MenuRadioValue">
+import TickIcon from "~icons/hugeicons/tick-02";
+import { computed, inject } from "vue";
+import type { MenuRadioItemProps, MenuRadioValue } from "../../components/menu";
+import { menuCloseKey, menuRadioKey, menuSizeKey } from "../utilities/menu";
+import Button from "./button.vue";
+
+const { value, label, iconPrefix, size = undefined, disabled = false } = defineProps<MenuRadioItemProps<Value>>();
+
+const emit = defineEmits<{ select: [event: MouseEvent] }>();
+
+const close = inject(menuCloseKey, undefined);
+
+const menuSize = inject(menuSizeKey, undefined);
+
+const group = inject(menuRadioKey, undefined);
+
+const checked = computed(() => group?.value.value === value);
+
+function select(event: MouseEvent) {
+    emit("select", event);
+
+    if (!event.defaultPrevented) {
+        group?.select(value);
+        close?.();
+    }
+}
+</script>

package/dist/vue/components/menu.vue

@@ -3,7 +3,7 @@
         ref="popover"
         v-model="isOpen"
         content-role="menu"
-        :trigger-label="triggerLabel"
+        :trigger-label="triggerLabel ?? labels.menu"
         :trigger-class="triggerClass"
         :trigger-layout="triggerLayout"
         :trigger-variant="triggerVariant"
@@ -31,11 +31,13 @@
 import { computed, nextTick, provide, ref, useTemplateRef, watch } from "vue";
 import type { MenuProps } from "../../components/menu";
 import { menuCloseKey, menuSizeKey } from "../utilities/menu";
+import { useUiLabels } from "../utilities/labels";
+import { useMenuNavigation } from "../utilities/use-menu-navigation";
 import Popover from "./popover.vue";
 
 const {
     modelValue = false,
-    triggerLabel = "Menu",
+    triggerLabel,
     triggerClass,
     triggerLayout = "center",
     triggerVariant = "ghost",
@@ -54,25 +56,20 @@ const emit = defineEmits<{
     "update:modelValue": [value: boolean];
 }>();
 
+const labels = useUiLabels();
+
 const popover = useTemplateRef("popover");
 
+const { focusItem, handleKeyDown: navigate } = useMenuNavigation();
+
 const isOpen = ref(modelValue);
 
 let initialFocus: "first" | "last" = "first";
 
-function items() {
+function menu() {
     const element: HTMLElement | undefined = popover.value?.$el;
 
-    return [
-        ...(element?.querySelectorAll<HTMLElement>('[role="menu"] [role="menuitem"]:not([aria-disabled="true"])') ??
-            []),
-    ];
-}
-
-function focusItem(index: number) {
-    const list = items();
-
-    list[(index + list.length) % list.length]?.focus();
+    return element?.querySelector("[role='menu']");
 }
 
 function close() {
@@ -82,13 +79,13 @@ function close() {
 function handleKeyDown(event: KeyboardEvent) {
     const target = event.target as HTMLElement;
 
-    if (target.getAttribute("aria-haspopup") === "menu") {
+    if (target.getAttribute("aria-haspopup") === "menu" && !target.closest("[role='menu']")) {
         if (event.key === "ArrowDown" || event.key === "ArrowUp") {
             event.preventDefault();
             initialFocus = event.key === "ArrowDown" ? "first" : "last";
 
             if (isOpen.value) {
-                focusItem(initialFocus === "first" ? 0 : -1);
+                focusItem(menu(), initialFocus === "first" ? 0 : -1);
             } else {
                 isOpen.value = true;
             }
@@ -97,40 +94,13 @@ function handleKeyDown(event: KeyboardEvent) {
         return;
     }
 
-    const list = items();
-    const index = list.indexOf(target);
+    if (event.key === "Tab") {
+        close();
 
-    if (index === -1) {
         return;
     }
 
-    if (event.key === "ArrowDown") {
-        event.preventDefault();
-        focusItem(index + 1);
-    } else if (event.key === "ArrowUp") {
-        event.preventDefault();
-        focusItem(index - 1);
-    } else if (event.key === "Home") {
-        event.preventDefault();
-        focusItem(0);
-    } else if (event.key === "End") {
-        event.preventDefault();
-        focusItem(-1);
-    } else if (event.key === "Tab") {
-        close();
-    } else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-        const character = event.key.toLowerCase();
-
-        for (let offset = 1; offset <= list.length; offset++) {
-            const item = list[(index + offset) % list.length];
-
-            if (item.textContent?.trim().toLowerCase().startsWith(character)) {
-                event.preventDefault();
-                item.focus();
-                break;
-            }
-        }
-    }
+    navigate(event);
 }
 
 watch(
@@ -145,7 +115,7 @@ watch(isOpen, async (value) => {
 
     if (value) {
         await nextTick();
-        focusItem(initialFocus === "first" ? 0 : -1);
+        focusItem(menu(), initialFocus === "first" ? 0 : -1);
         initialFocus = "first";
     }
 });

package/dist/vue/components/pagination.vue

@@ -1,13 +1,31 @@
 <template>
-    <Stack is="nav" :aria-label="label" direction="horizontal" justify="end" gap="1" :aria-busy="loading || undefined">
-        <Button :label="previousLabel" variant="ghost" :disabled="!hasPrevious || loading" @click="$emit('previous')" />
+    <Stack
+        is="nav"
+        :aria-label="label ?? labels.pagination"
+        direction="horizontal"
+        justify="end"
+        gap="1"
+        :aria-busy="loading || undefined"
+    >
+        <Button
+            :label="previousLabel ?? labels.previous"
+            variant="ghost"
+            :disabled="!hasPrevious || loading"
+            @click="$emit('previous')"
+        />
 
-        <Button :label="nextLabel" variant="ghost" :disabled="!hasNext || loading" @click="$emit('next')" />
+        <Button
+            :label="nextLabel ?? labels.next"
+            variant="ghost"
+            :disabled="!hasNext || loading"
+            @click="$emit('next')"
+        />
     </Stack>
 </template>
 
 <script setup lang="ts">
 import type { PaginationProps } from "../../components/pagination";
+import { useUiLabels } from "../utilities/labels";
 import Button from "./button.vue";
 import Stack from "./stack.vue";
 
@@ -15,10 +33,12 @@ const {
     hasPrevious = false,
     hasNext = false,
     loading = false,
-    previousLabel = "Previous",
-    nextLabel = "Next",
-    label = "Pagination",
+    previousLabel,
+    nextLabel,
+    label,
 } = defineProps<PaginationProps>();
 
 defineEmits<{ previous: []; next: [] }>();
+
+const labels = useUiLabels();
 </script>

package/dist/vue/components/popover.vue

@@ -3,8 +3,9 @@
         ref="container"
         class="relative"
         :class="matchTriggerWidth ? 'w-full' : 'w-fit'"
+        :style="anchorStyle"
         @keydown="handleKeyDown"
-        @focusout="$event.relatedTarget && !container?.contains($event.relatedTarget as Node) && close()"
+        @focusout="$event.relatedTarget && !container?.contains($event.relatedTarget as Node) && setOpen(false)"
     >
         <Button
             :id="triggerId"
@@ -16,11 +17,12 @@
             :aria-haspopup="contentRole"
             :aria-expanded="isOpen"
             :aria-controls="isOpen ? contentId : undefined"
+            :data-state="isOpen ? 'open' : 'closed'"
             @click="toggle"
         >
             <slot name="trigger" :open="open" :close="close" :toggle="toggle">
                 <span class="truncate px-1" :class="triggerLayout === 'center' ? '' : 'flex-1'">{{
-                    triggerLabel
+                    triggerLabel ?? labels.open
                 }}</span>
             </slot>
         </Button>
@@ -28,16 +30,27 @@
         <Stack
             v-if="isOpen"
             :id="contentId"
+            ref="content"
             :role="contentRole"
             :aria-labelledby="triggerId"
+            :popover="anchored ? 'manual' : undefined"
+            :style="anchored ? layerStyle : undefined"
+            :tabindex="contentRole === 'dialog' ? -1 : undefined"
             :padding="contentPadding"
             :gap="contentGap"
             :direction="contentDirection"
             :align="contentAlign"
             :justify="contentJustify"
             :wrap="contentWrap"
-            class="absolute z-10 max-w-xs rounded-ui border border-border bg-popover text-popover-foreground shadow-xl"
-            :class="[placements[placement], aligns[align], contentClass, matchTriggerWidth ? 'w-full' : '']"
+            data-state="open"
+            class="max-w-xs rounded-ui border border-border bg-popover text-popover-foreground shadow-xl outline-none"
+            :class="[
+                anchored
+                    ? `inset-auto mx-0 my-1 overflow-visible [position-try-fallbacks:flip-block,flip-inline,flip-block_flip-inline] ${areas[`${placement}-${align}`]}`
+                    : `absolute z-10 ${placements[placement]} ${aligns[align]}`,
+                contentClass,
+                matchTriggerWidth ? (anchored ? '[width:anchor-size(width)]' : 'w-full') : '',
+            ]"
         >
             <slot :open="open" :close="close" :toggle="toggle" />
         </Stack>
@@ -45,14 +58,16 @@
 </template>
 
 <script setup lang="ts">
-import { onUnmounted, ref, useId, useTemplateRef, watch } from "vue";
+import { computed, nextTick, onUnmounted, ref, useId, useTemplateRef, watch } from "vue";
 import type { PopoverAlign, PopoverPlacement, PopoverProps } from "../../components/popover";
+import { useUiLabels } from "../utilities/labels";
+import { useAnchor } from "../utilities/use-anchor";
 import Button from "./button.vue";
 import Stack from "./stack.vue";
 
 const {
     modelValue = false,
-    triggerLabel = "Open",
+    triggerLabel,
     triggerClass,
     triggerLayout = "center",
     triggerVariant = "outline",
@@ -75,8 +90,16 @@ const emit = defineEmits<{
     "update:modelValue": [value: boolean];
 }>();
 
+const labels = useUiLabels();
+
 const container = useTemplateRef("container");
 
+const content = useTemplateRef<InstanceType<typeof Stack>>("content");
+
+const contentElement = computed<HTMLElement | null>(() => content.value?.$el ?? null);
+
+const { anchored, anchorStyle, layerStyle } = useAnchor(contentElement);
+
 const triggerId = useId();
 
 const contentId = useId();
@@ -87,8 +110,15 @@ const placements: Record<PopoverPlacement, string> = {
 };
 
 const aligns: Record<PopoverAlign, string> = {
-    start: "left-0",
-    end: "right-0",
+    start: "start-0",
+    end: "end-0",
+};
+
+const areas: Record<`${PopoverPlacement}-${PopoverAlign}`, string> = {
+    "bottom-start": "[position-area:block-end_span-inline-end]",
+    "bottom-end": "[position-area:block-end_span-inline-start]",
+    "top-start": "[position-area:block-start_span-inline-end]",
+    "top-end": "[position-area:block-start_span-inline-start]",
 };
 
 const isOpen = ref(modelValue);
@@ -103,17 +133,28 @@ function open() {
     setOpen(true);
 }
 
-function close() {
+async function close() {
+    const restore = contentElement.value?.contains(document.activeElement) ?? false;
+
     setOpen(false);
+
+    if (restore) {
+        await nextTick();
+        document.getElementById(triggerId)?.focus();
+    }
 }
 
 function toggle() {
-    setOpen(!isOpen.value);
+    if (isOpen.value) {
+        close();
+    } else {
+        open();
+    }
 }
 
 function handlePointerDown(event: PointerEvent) {
     if (!container.value?.contains(event.target as Node)) {
-        close();
+        setOpen(false);
     }
 }
 
@@ -121,20 +162,28 @@ function handleKeyDown(event: KeyboardEvent) {
     if (event.key === "Escape" && isOpen.value) {
         event.preventDefault();
         event.stopPropagation();
-        close();
+        setOpen(false);
         document.getElementById(triggerId)?.focus();
     }
 }
 
 watch(
     isOpen,
-    (value) => {
+    async (value) => {
         if (typeof document === "undefined") {
             return;
         }
 
         if (value) {
             document.addEventListener("pointerdown", handlePointerDown);
+
+            if (contentRole === "dialog") {
+                await nextTick();
+
+                const element = contentElement.value;
+
+                (element?.querySelector<HTMLElement>("[autofocus]") ?? element)?.focus({ preventScroll: true });
+            }
         } else {
             document.removeEventListener("pointerdown", handlePointerDown);
         }

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

@@ -0,0 +1,46 @@
+<template>
+    <fieldset class="m-0 flex min-w-0 flex-col gap-3 border-0 p-0" :disabled="disabled">
+        <legend v-if="label" class="p-0 text-sm font-normal">
+            {{ label }}<span v-if="required" aria-hidden="true" class="text-destructive"> *</span>
+        </legend>
+
+        <Stack :direction="orientation" :gap="orientation === 'horizontal' ? '5' : '3'" wrap>
+            <Radio
+                v-for="option in options"
+                :key="option.value"
+                :model-value="modelValue"
+                :value="option.value"
+                :label="option.label"
+                :description="option.description"
+                :name="name ?? id"
+                :required="required"
+                :disabled="disabled || option.disabled"
+                @update:model-value="$emit('update:modelValue', $event as Value)"
+            />
+        </Stack>
+    </fieldset>
+</template>
+
+<script setup lang="ts" generic="Value extends RadioValue = RadioValue">
+import { useId } from "vue";
+import type { RadioValue } from "../../components/radio";
+import type { RadioGroupProps } from "../../components/radio-group";
+import Radio from "./radio.vue";
+import Stack from "./stack.vue";
+
+const {
+    modelValue,
+    options,
+    label,
+    name,
+    orientation = "vertical",
+    required = false,
+    disabled = false,
+} = defineProps<RadioGroupProps<Value>>();
+
+defineEmits<{
+    "update:modelValue": [value: Value];
+}>();
+
+const id = useId();
+</script>

package/dist/vue/components/range.vue

@@ -1,10 +1,10 @@
 <template>
     <Stack :class="interactionVariants[interaction]">
         <Stack v-if="label" direction="horizontal" align="center" justify="between" gap="1" class="text-sm">
-            <span class="font-normal">{{ label }}</span>
+            <span :id="labelId" class="font-normal">{{ label }}</span>
 
             <output class="tabular-nums opacity-60">
-                {{ modelValue }}
+                {{ valueText ? valueText(modelValue) : modelValue }}
             </output>
         </Stack>
 
@@ -17,8 +17,11 @@
             :aria-valuemin="min"
             :aria-valuemax="max"
             :aria-valuenow="modelValue"
-            :aria-label="label"
+            :aria-valuetext="valueText ? valueText(modelValue) : undefined"
+            :aria-labelledby="label ? labelId : undefined"
+            aria-orientation="horizontal"
             :aria-disabled="disabled"
+            :data-disabled="disabled ? '' : undefined"
             @pointerdown="onPointerDown"
             @pointermove="onPointerMove"
             @pointerup="onPointerUp"
@@ -36,12 +39,21 @@
 </template>
 
 <script setup lang="ts">
-import { computed, useTemplateRef } from "vue";
+import { computed, useId, useTemplateRef } from "vue";
 import type { ControlInteraction } from "../../components/control.ts";
 import type { RangeProps } from "../../components/range";
 import Stack from "./stack.vue";
 
-const { modelValue = 0, label, min = 0, max = 100, step = 1, disabled = false } = defineProps<RangeProps>();
+const {
+    modelValue = 0,
+    label,
+    min = 0,
+    max = 100,
+    step = 1,
+    largeStep,
+    valueText,
+    disabled = false,
+} = defineProps<RangeProps>();
 
 const emit = defineEmits<{
     "update:modelValue": [value: number];
@@ -56,6 +68,10 @@ const interactionVariants: Record<ControlInteraction, string> = {
 
 const track = useTemplateRef("track");
 
+const labelId = useId();
+
+const jump = computed(() => largeStep ?? Math.max(step, (max - min) / 10));
+
 const percent = computed(() => (max > min ? Math.min(100, Math.max(0, ((modelValue - min) / (max - min)) * 100)) : 0));
 
 let dragging = false;
@@ -108,11 +124,19 @@ function onKeyDown(event: KeyboardEvent) {
         return;
     }
 
+    const amount = event.shiftKey ? jump.value : step;
+
     if (event.key === "ArrowRight" || event.key === "ArrowUp") {
-        commit(modelValue + step);
+        commit(modelValue + amount);
         event.preventDefault();
     } else if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
-        commit(modelValue - step);
+        commit(modelValue - amount);
+        event.preventDefault();
+    } else if (event.key === "PageUp") {
+        commit(modelValue + jump.value);
+        event.preventDefault();
+    } else if (event.key === "PageDown") {
+        commit(modelValue - jump.value);
         event.preventDefault();
     } else if (event.key === "Home") {
         commit(min);

package/dist/vue/components/rating.vue

@@ -2,7 +2,16 @@
     <Stack>
         <span v-if="label" class="text-sm font-normal">{{ label }}</span>
 
-        <Stack direction="horizontal" align="center" gap="0" role="radiogroup" :aria-label="label">
+        <Stack
+            ref="group"
+            direction="horizontal"
+            align="center"
+            gap="0"
+            role="radiogroup"
+            :aria-label="label"
+            @keydown="handleKeyDown"
+            @focusin="handleFocusIn"
+        >
             <Button
                 v-for="value in max"
                 :key="value"
@@ -11,9 +20,10 @@
                 variant="ghost"
                 role="radio"
                 :aria-checked="value === modelValue"
-                :aria-label="`${value} of ${max}`"
+                :aria-label="labels.rating(value, max)"
+                :data-value="value"
                 :disabled="readonly || disabled"
-                @click="$emit('update:modelValue', value)"
+                @click="select(value)"
             >
                 <Icon :is="StarIcon" :size="20" :class="{ '[&_path]:fill-current': value <= modelValue }" />
             </Button>
@@ -23,6 +33,9 @@
 
 <script setup lang="ts">
 import StarIcon from "~icons/hugeicons/star";
+import { computed, useTemplateRef } from "vue";
+import { useUiLabels } from "../utilities/labels";
+import { useRovingFocus } from "../utilities/use-roving-focus";
 import Button from "./button.vue";
 import Icon from "./icon.vue";
 import Stack from "./stack.vue";
@@ -30,10 +43,28 @@ import type { RatingProps, RatingState } from "../../components/rating";
 
 const { modelValue = 0, max = 5, label, readonly = false, disabled = false } = defineProps<RatingProps>();
 
-defineEmits<{
+const emit = defineEmits<{
     "update:modelValue": [value: number];
 }>();
 
+const labels = useUiLabels();
+
+const group = useTemplateRef<InstanceType<typeof Stack>>("group");
+
+const { handleKeyDown, handleFocusIn } = useRovingFocus(
+    computed(() => group.value?.$el ?? null),
+    () => ({
+        selector: "[role='radio']",
+        onMove: (element: HTMLElement) => select(Number(element.dataset.value)),
+    }),
+);
+
+function select(value: number) {
+    if (!readonly && !disabled) {
+        emit("update:modelValue", value);
+    }
+}
+
 function state(value: number): RatingState {
     return value <= modelValue ? "active" : "inactive";
 }