@revojs/ui 0.2.61 → 0.2.62

package/dist/vue/components/context-menu.vue

@@ -0,0 +1,178 @@
+<template>
+    <div
+        class="[-webkit-touch-callout:none]"
+        :data-state="isOpen ? 'open' : 'closed'"
+        @contextmenu="handleContextMenu"
+        @pointerdown="press"
+        @pointermove="move"
+        @pointerup="release"
+        @pointercancel="release"
+        @keydown="handleKeyDown"
+    >
+        <slot :open="isOpen" />
+
+        <span
+            v-if="isOpen"
+            aria-hidden="true"
+            class="pointer-events-none fixed size-0"
+            :style="`left: ${point.x}px; top: ${point.y}px; ${anchorStyle}`"
+        />
+
+        <Stack
+            v-if="isOpen"
+            ref="content"
+            role="menu"
+            :popover="anchored ? 'manual' : undefined"
+            :style="anchored ? layerStyle : `left: ${point.x}px; top: ${point.y}px`"
+            data-state="open"
+            padding="1"
+            gap="1"
+            class="w-max max-w-xs min-w-48 rounded-ui border border-border bg-popover text-popover-foreground shadow-xl"
+            :class="[
+                anchored
+                    ? 'inset-auto m-0 overflow-visible [position-area:block-end_span-inline-end] [position-try-fallbacks:flip-block,flip-inline,flip-block_flip-inline]'
+                    : 'fixed z-10',
+                contentClass,
+            ]"
+        >
+            <slot name="content" :close="close" />
+        </Stack>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onUnmounted, provide, ref, useTemplateRef, watch } from "vue";
+import type { ContextMenuProps } from "../../components/menu";
+import { menuCloseKey, menuSizeKey } from "../utilities/menu";
+import { useAnchor } from "../utilities/use-anchor";
+import { useMenuNavigation } from "../utilities/use-menu-navigation";
+import Stack from "./stack.vue";
+
+const { itemSize = "md", contentClass, disabled = false } = defineProps<ContextMenuProps>();
+
+const content = useTemplateRef<InstanceType<typeof Stack>>("content");
+
+const contentElement = computed<HTMLElement | null>(() => content.value?.$el ?? null);
+
+const { anchored, anchorStyle, layerStyle } = useAnchor(contentElement);
+
+const { focusItem, handleKeyDown: navigate } = useMenuNavigation();
+
+const isOpen = ref(false);
+
+const point = ref({ x: 0, y: 0 });
+
+let previous: HTMLElement | null = null;
+
+let timer: ReturnType<typeof setTimeout> | undefined;
+
+let start: { x: number; y: number } | undefined;
+
+function openAt(x: number, y: number) {
+    if (!isOpen.value) {
+        previous = document.activeElement as HTMLElement | null;
+    }
+
+    point.value = { x, y };
+    isOpen.value = true;
+}
+
+async function close() {
+    const restore = contentElement.value?.contains(document.activeElement) ?? false;
+
+    isOpen.value = false;
+
+    if (restore) {
+        await nextTick();
+        previous?.focus();
+    }
+}
+
+function handleContextMenu(event: MouseEvent) {
+    if (disabled || contentElement.value?.contains(event.target as Node)) {
+        return;
+    }
+
+    event.preventDefault();
+
+    if (event.clientX === 0 && event.clientY === 0) {
+        const bounds = (event.target as HTMLElement).getBoundingClientRect();
+
+        openAt(bounds.left, bounds.bottom);
+    } else {
+        openAt(event.clientX, event.clientY);
+    }
+}
+
+function press(event: PointerEvent) {
+    if (event.pointerType !== "touch" || disabled) {
+        return;
+    }
+
+    start = { x: event.clientX, y: event.clientY };
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+        if (start) {
+            openAt(start.x, start.y);
+        }
+    }, 500);
+}
+
+function move(event: PointerEvent) {
+    if (start && Math.hypot(event.clientX - start.x, event.clientY - start.y) > 10) {
+        release();
+    }
+}
+
+function release() {
+    clearTimeout(timer);
+    start = undefined;
+}
+
+function handlePointerDown(event: PointerEvent) {
+    if (!contentElement.value?.contains(event.target as Node)) {
+        isOpen.value = false;
+    }
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+    if (!isOpen.value || !contentElement.value?.contains(event.target as Node)) {
+        return;
+    }
+
+    if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        close();
+    } else if (event.key === "Tab") {
+        event.preventDefault();
+        close();
+    } else {
+        navigate(event);
+    }
+}
+
+watch(isOpen, async (value) => {
+    if (value) {
+        document.addEventListener("pointerdown", handlePointerDown, true);
+        await nextTick();
+        focusItem(contentElement.value, 0);
+    } else {
+        document.removeEventListener("pointerdown", handlePointerDown, true);
+    }
+});
+
+provide(
+    menuSizeKey,
+    computed(() => itemSize),
+);
+
+provide(menuCloseKey, close);
+
+onUnmounted(() => {
+    clearTimeout(timer);
+    document.removeEventListener("pointerdown", handlePointerDown, true);
+});
+
+defineExpose({ openAt, close });
+</script>

package/dist/vue/components/counter.vue

@@ -1,32 +1,54 @@
 <template>
-    <Stack>
-        <span v-if="label" class="text-sm font-normal">{{ label }}</span>
+    <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>
 
-        <div class="relative grid grid-cols-[auto_minmax(0,1fr)_auto] items-center overflow-hidden rounded-ui">
+        <div
+            class="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center rounded-ui bg-secondary ring-1 ring-input ring-inset focus-within:ring-2 focus-within:ring-ring"
+            :class="[disabled ? 'opacity-50' : '', invalid ? 'ring-2 ring-destructive' : '']"
+        >
             <Button
                 size="md"
                 variant="ghost"
+                tabindex="-1"
                 :icon-prefix="MinusIcon"
-                :disabled="disabled || modelValue <= min"
-                aria-label="Decrease"
+                :aria-label="labels.decrease"
+                :aria-controls="id"
+                :disabled="disabled || (modelValue !== undefined && min !== undefined && modelValue <= min)"
                 @click="change(-step)"
             />
 
-            <output class="px-1 text-center tabular-nums">{{ modelValue }}</output>
+            <input
+                :id="id"
+                v-model="draft"
+                type="text"
+                inputmode="decimal"
+                role="spinbutton"
+                autocomplete="off"
+                class="w-full min-w-0 bg-transparent px-1 text-center tabular-nums outline-none placeholder:opacity-50 pointer-coarse:text-[16px]/5"
+                :name="name"
+                :placeholder="placeholder"
+                :required="required"
+                :disabled="disabled"
+                :aria-valuenow="modelValue"
+                :aria-valuemin="min"
+                :aria-valuemax="max"
+                :aria-invalid="invalid || undefined"
+                @blur="commit(draft)"
+                @keydown="handleKeyDown"
+            />
 
             <Button
                 size="md"
                 variant="ghost"
+                tabindex="-1"
                 :icon-prefix="AddIcon"
-                :disabled="disabled || modelValue >= max"
-                aria-label="Increase"
+                :aria-label="labels.increase"
+                :aria-controls="id"
+                :disabled="disabled || (modelValue !== undefined && max !== undefined && modelValue >= max)"
                 @click="change(step)"
             />
-
-            <span
-                aria-hidden="true"
-                class="pointer-events-none absolute inset-0 rounded-ui ring-1 ring-input ring-inset"
-            />
         </div>
     </Stack>
 </template>
@@ -34,24 +56,108 @@
 <script setup lang="ts">
 import AddIcon from "~icons/hugeicons/add-01";
 import MinusIcon from "~icons/hugeicons/minus-sign";
+import { computed, ref, useId, watch } from "vue";
 import type { CounterProps } from "../../components/counter";
+import { useUiLabels } from "../utilities/labels";
 import Button from "./button.vue";
 import Stack from "./stack.vue";
 
 const {
-    modelValue = 0,
+    modelValue,
     label,
-    min = -Infinity,
-    max = Infinity,
+    min,
+    max,
     step = 1,
+    largeStep,
+    name,
+    placeholder,
+    required = false,
     disabled = false,
+    invalid = false,
 } = defineProps<CounterProps>();
 
 const emit = defineEmits<{
-    "update:modelValue": [value: number];
+    "update:modelValue": [value: number | undefined];
 }>();
 
+const labels = useUiLabels();
+
+const id = useId();
+
+const draft = ref(modelValue === undefined ? "" : String(modelValue));
+
+const jump = computed(() => largeStep ?? step * 10);
+
+function update(raw: number) {
+    const decimals = (String(step).split(".")[1] ?? "").length;
+    const base = min ?? 0;
+    let value = Number((base + Math.round((raw - base) / step) * step).toFixed(decimals));
+
+    if (min !== undefined) {
+        value = Math.max(min, value);
+    }
+
+    if (max !== undefined) {
+        value = Math.min(max, value);
+    }
+
+    draft.value = String(value);
+
+    if (value !== modelValue) {
+        emit("update:modelValue", value);
+    }
+}
+
+function commit(text: string) {
+    const value = Number(text.trim().replace(",", "."));
+
+    if (text.trim() === "") {
+        draft.value = "";
+
+        if (modelValue !== undefined) {
+            emit("update:modelValue", undefined);
+        }
+    } else if (Number.isNaN(value)) {
+        draft.value = modelValue === undefined ? "" : String(modelValue);
+    } else {
+        update(value);
+    }
+}
+
 function change(amount: number) {
-    emit("update:modelValue", Math.min(max, Math.max(min, modelValue + amount)));
+    if (!disabled) {
+        update((modelValue ?? min ?? 0) + amount);
+    }
 }
+
+function handleKeyDown(event: KeyboardEvent) {
+    if (event.key === "ArrowUp") {
+        event.preventDefault();
+        change(event.shiftKey ? jump.value : step);
+    } else if (event.key === "ArrowDown") {
+        event.preventDefault();
+        change(event.shiftKey ? -jump.value : -step);
+    } else if (event.key === "PageUp") {
+        event.preventDefault();
+        change(jump.value);
+    } else if (event.key === "PageDown") {
+        event.preventDefault();
+        change(-jump.value);
+    } else if (event.key === "Home" && min !== undefined) {
+        event.preventDefault();
+        update(min);
+    } else if (event.key === "End" && max !== undefined) {
+        event.preventDefault();
+        update(max);
+    } else if (event.key === "Enter") {
+        commit(draft.value);
+    }
+}
+
+watch(
+    () => modelValue,
+    (value) => {
+        draft.value = value === undefined ? "" : String(value);
+    },
+);
 </script>

package/dist/vue/components/dialog.vue

@@ -30,7 +30,7 @@
                     size="md"
                     variant="ghost"
                     :icon-prefix="CloseIcon"
-                    :aria-label="closeLabel"
+                    :aria-label="closeLabel ?? labels.close"
                     :disabled="!dismissible"
                     @click="dismiss"
                 />
@@ -51,6 +51,7 @@ import { useId, useTemplateRef, type HTMLAttributes } from "vue";
 import type { DialogProps } from "../../components/dialog";
 import Button from "./button.vue";
 import Card from "./card.vue";
+import { useUiLabels } from "../utilities/labels";
 import { useModalDialog } from "../utilities/use-modal-dialog";
 
 const {
@@ -63,7 +64,7 @@ const {
     bodyAlign,
     bodyJustify,
     bodyWrap,
-    closeLabel = "Close",
+    closeLabel,
     dismissible = true,
 } = defineProps<DialogProps>();
 
@@ -71,6 +72,8 @@ const emit = defineEmits<{
     "update:modelValue": [value: boolean];
 }>();
 
+const labels = useUiLabels();
+
 const dialog = useTemplateRef("dialog");
 
 const id = `dialog-${useId()}`;

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

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

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

@@ -0,0 +1,37 @@
+<template>
+    <Stack role="group" :aria-labelledby="label ? id : undefined" gap="1">
+        <span v-if="label" :id="id" class="text-xs font-medium text-muted-foreground" :class="sizes[selected]">
+            <span class="block truncate" :class="insets[selected]">{{ label }}</span>
+        </span>
+
+        <slot />
+    </Stack>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, useId } from "vue";
+import type { ButtonSize } from "../../components/button";
+import type { MenuGroupProps } from "../../components/menu";
+import { menuSizeKey } from "../utilities/menu";
+import Stack from "./stack.vue";
+
+const { label, size = undefined } = defineProps<MenuGroupProps>();
+
+const id = useId();
+
+const menuSize = inject(menuSizeKey, undefined);
+
+const selected = computed(() => size ?? menuSize?.value ?? "md");
+
+const sizes: Record<ButtonSize, string> = {
+    md: "p-2",
+    sm: "p-1",
+    xs: "p-1",
+};
+
+const insets: Record<ButtonSize, string> = {
+    md: "px-2",
+    sm: "px-2",
+    xs: "px-1",
+};
+</script>

package/dist/vue/components/menu-layer.vue

@@ -0,0 +1,152 @@
+<template>
+    <div ref="wrapper" class="relative w-full" :style="anchorStyle" @keydown="handleKeyDown">
+        <Button
+            :id="triggerId"
+            role="menuitem"
+            tabindex="-1"
+            font="normal"
+            layout="left"
+            variant="ghost"
+            aria-haspopup="menu"
+            :aria-expanded="isOpen"
+            :aria-controls="isOpen ? contentId : undefined"
+            :data-state="isOpen ? 'open' : 'closed'"
+            :icon-prefix="iconPrefix"
+            :icon-suffix="ArrowRightIcon"
+            :size="size ?? menuSize ?? 'md'"
+            :disabled="disabled"
+            class="w-full"
+            :class="isOpen ? 'bg-ghost-hover!' : ''"
+            @click="show(true)"
+            @pointerenter="$event.pointerType !== 'touch' && show(false)"
+        >
+            <span class="flex-1 truncate px-1">{{ label }}</span>
+        </Button>
+
+        <Stack
+            v-if="isOpen"
+            :id="contentId"
+            ref="content"
+            role="menu"
+            :aria-labelledby="triggerId"
+            :popover="anchored ? 'manual' : undefined"
+            :style="anchored ? layerStyle : undefined"
+            data-state="open"
+            padding="1"
+            gap="1"
+            class="w-max max-w-xs min-w-48 rounded-ui border border-border bg-popover text-popover-foreground shadow-xl"
+            :class="
+                anchored
+                    ? 'inset-auto mx-1 my-0 overflow-visible [position-area:inline-end_span-block-end] [position-try-fallbacks:flip-inline,block-end_span-inline-end,block-start_span-inline-end]'
+                    : 'absolute start-full top-0 z-10 mx-1'
+            "
+        >
+            <slot />
+        </Stack>
+    </div>
+</template>
+
+<script setup lang="ts">
+import ArrowRightIcon from "~icons/hugeicons/arrow-right-01";
+import { computed, inject, nextTick, onMounted, onUnmounted, ref, useId, useTemplateRef } from "vue";
+import type { MenuLayerProps } from "../../components/menu";
+import { menuSizeKey } from "../utilities/menu";
+import { useAnchor } from "../utilities/use-anchor";
+import { useMenuNavigation } from "../utilities/use-menu-navigation";
+import Button from "./button.vue";
+import Stack from "./stack.vue";
+
+const { label, iconPrefix, size = undefined, disabled = false } = defineProps<MenuLayerProps>();
+
+const menuSize = inject(menuSizeKey, undefined);
+
+const wrapper = useTemplateRef("wrapper");
+
+const content = useTemplateRef<InstanceType<typeof Stack>>("content");
+
+const contentElement = computed<HTMLElement | null>(() => content.value?.$el ?? null);
+
+const { anchored, anchorStyle, layerStyle } = useAnchor(contentElement);
+
+const { focusItem } = useMenuNavigation();
+
+const triggerId = useId();
+
+const contentId = useId();
+
+const isOpen = ref(false);
+
+let parent: Element | null | undefined;
+
+let timer: ReturnType<typeof setTimeout> | undefined;
+
+async function show(focus: boolean) {
+    clearTimeout(timer);
+
+    if (disabled) {
+        return;
+    }
+
+    isOpen.value = true;
+
+    if (focus) {
+        await nextTick();
+        focusItem(contentElement.value, 0);
+    }
+}
+
+function hide(focus: boolean) {
+    clearTimeout(timer);
+    isOpen.value = false;
+
+    if (focus) {
+        document.getElementById(triggerId)?.focus();
+    }
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+    const target = event.target as HTMLElement;
+    const rtl = getComputedStyle(target).direction === "rtl";
+    const forward = rtl ? "ArrowLeft" : "ArrowRight";
+    const backward = rtl ? "ArrowRight" : "ArrowLeft";
+
+    if (target.id === triggerId) {
+        if (event.key === forward) {
+            event.preventDefault();
+            event.stopPropagation();
+            show(true);
+        }
+
+        return;
+    }
+
+    if (isOpen.value && (event.key === backward || event.key === "Escape")) {
+        event.preventDefault();
+        event.stopPropagation();
+        hide(true);
+    }
+}
+
+function handlePointerOver(event: PointerEvent) {
+    if (wrapper.value?.contains(event.target as Node)) {
+        clearTimeout(timer);
+
+        return;
+    }
+
+    if (isOpen.value) {
+        clearTimeout(timer);
+        timer = setTimeout(() => hide(false), 300);
+    }
+}
+
+onMounted(() => {
+    parent = wrapper.value?.parentElement?.closest("[role='menu']");
+    parent?.addEventListener("pointerover", handlePointerOver as EventListener);
+});
+
+onUnmounted(() => {
+    clearTimeout(timer);
+    parent?.removeEventListener("pointerover", handlePointerOver as EventListener);
+});
+</script>

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

@@ -0,0 +1,36 @@
+<template>
+    <Stack role="group" :aria-label="label" gap="1">
+        <slot />
+    </Stack>
+</template>
+
+<script setup lang="ts" generic="Value extends MenuRadioValue = MenuRadioValue">
+import { computed, provide, ref, watch } from "vue";
+import type { MenuRadioGroupProps, MenuRadioValue } from "../../components/menu";
+import { menuRadioKey } from "../utilities/menu";
+import Stack from "./stack.vue";
+
+const { modelValue, label } = defineProps<MenuRadioGroupProps<Value>>();
+
+const emit = defineEmits<{
+    "update:modelValue": [value: Value];
+}>();
+
+const selected = ref<MenuRadioValue | undefined>(modelValue);
+
+provide(menuRadioKey, {
+    value: computed(() => selected.value),
+    select: (value) => {
+        selected.value = value;
+
+        emit("update:modelValue", value as Value);
+    },
+});
+
+watch(
+    () => modelValue,
+    (value) => {
+        selected.value = value;
+    },
+);
+</script>