@revojs/ui 0.2.12 → 0.2.14

package/dist/vue/components/field.vue

@@ -1,25 +1,55 @@
 <template>
-    <Stack is="fieldset" :disabled="disabled" :class="texts[text]">
-        <legend v-if="label" class="mb-1 font-normal">
+    <Stack
+        :is="is ?? (controlId ? 'div' : 'fieldset')"
+        :disabled="is !== 'div' && !controlId ? disabled : undefined"
+        :class="texts[text]"
+    >
+        <component
+            :is="controlId ? 'label' : is === 'div' ? 'span' : 'legend'"
+            v-if="label"
+            :for="controlId"
+            class="font-normal"
+            :class="!controlId && is !== 'div' ? 'mb-1' : ''"
+        >
             {{ label }}<span v-if="required" aria-hidden="true" class="text-destructive"> *</span>
-        </legend>
+        </component>
 
-        <slot />
+        <slot :control="controlAttributes" />
 
-        <p v-if="error" class="text-destructive">
+        <p v-if="error" :id="`${id}-error`" role="alert" class="text-destructive">
             {{ error }}
         </p>
-        <p v-else-if="description" class="opacity-60">
+        <p v-else-if="description" :id="`${id}-description`" class="opacity-60">
             {{ description }}
         </p>
     </Stack>
 </template>
 
 <script setup lang="ts">
+import { computed, useId } from "vue";
 import type { FieldProps, FieldText } from "../../components/field";
 import Stack from "./stack.vue";
 
-const { label, description, error, text = "sm", required = false, disabled = false } = defineProps<FieldProps>();
+const {
+    label,
+    description,
+    error,
+    text = "sm",
+    required = false,
+    disabled = false,
+    for: controlId,
+    is,
+} = defineProps<FieldProps>();
+
+const id = useId();
+
+const controlAttributes = computed(() => ({
+    id: controlId,
+    required,
+    disabled,
+    "aria-describedby": error ? `${id}-error` : description ? `${id}-description` : undefined,
+    "aria-invalid": error ? true : undefined,
+}));
 
 const texts: Record<FieldText, string> = {
     sm: "text-sm",

package/dist/vue/components/input.vue

@@ -1,17 +1,26 @@
 <template>
     <Stack
+        v-bind="rootAttributes"
         is="span"
         direction="horizontal"
         align="center"
         gap="0"
         class="w-full cursor-text rounded-ui bg-secondary p-3 ring-1 ring-input ring-inset focus-within:ring-2 focus-within:ring-ring"
-        :class="[texts[text], interactionVariants[interaction]]"
+        :class="[
+            texts[text],
+            interactionVariants[interaction],
+            (invalid ?? (controlAttributes['aria-invalid'] === true || controlAttributes['aria-invalid'] === 'true'))
+                ? 'ring-2 ring-destructive'
+                : '',
+        ]"
     >
         <slot name="leading" />
 
         <Icon v-if="iconPrefix" :is="iconPrefix" :size="iconSize" />
 
         <input
+            v-bind="controlAttributes"
+            ref="control"
             class="w-full min-w-0 appearance-none bg-transparent px-1 outline-none placeholder:opacity-50"
             :value="modelValue"
             :type="type"
@@ -21,6 +30,7 @@
             :required="required"
             :readonly="readonly"
             :disabled="disabled"
+            :aria-invalid="invalid ?? controlAttributes['aria-invalid']"
             @input="input"
         />
 
@@ -31,11 +41,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, useTemplateRef } from "vue";
 import type { ControlInteraction } from "../../components/control.ts";
 import type { InputProps, InputText } from "../../components/input";
 import Icon from "./icon.vue";
 import Stack from "./stack.vue";
+import { useControlAttributes } from "../utilities/use-control-attributes";
+
+defineOptions({ inheritAttrs: false });
 
 const {
     modelValue,
@@ -49,8 +62,15 @@ const {
     required = false,
     readonly = false,
     disabled = false,
+    invalid = undefined,
 } = defineProps<InputProps>();
 
+const { rootAttributes, controlAttributes } = useControlAttributes();
+
+const control = useTemplateRef("control");
+
+defineExpose({ focus: () => control.value?.focus() });
+
 const iconSize = computed(() => (text === "sm" ? 20 : 24));
 
 const texts: Record<InputText, string> = {

package/dist/vue/components/navigate.vue

@@ -8,6 +8,7 @@
         :icon-prefix="iconPrefix"
         :icon-suffix="iconSuffix"
         :label="label"
+        :aria-current="active ? 'page' : undefined"
     />
 </template>
 

package/dist/vue/components/notification.vue

@@ -0,0 +1,58 @@
+<template>
+    <div
+        :role="announce ? (variant === 'error' ? 'alert' : 'status') : undefined"
+        class="grid grid-cols-[auto_minmax(0,1fr)] items-center gap-x-3 gap-y-3 rounded-ui border p-3 text-sm"
+        :class="[variants[variant], $slots.actions ? 'sm:grid-cols-[auto_minmax(0,1fr)_auto]' : '']"
+    >
+        <Stack gap="0" class="shrink-0">
+            <slot name="icon">
+                <Icon :is="icon ?? icons[variant]" :size="20" />
+            </slot>
+        </Stack>
+
+        <Stack gap="1" class="min-w-0">
+            <p v-if="label" class="text-sm/5 font-medium">{{ label }}</p>
+
+            <div v-if="subtext || $slots.default" class="text-sm/5 text-muted-foreground">
+                <slot>{{ subtext }}</slot>
+            </div>
+        </Stack>
+
+        <Stack
+            v-if="$slots.actions"
+            direction="horizontal"
+            align="center"
+            gap="1"
+            wrap
+            class="col-start-2 sm:col-start-auto"
+        >
+            <slot name="actions" />
+        </Stack>
+    </div>
+</template>
+
+<script setup lang="ts">
+import AlertIcon from "~icons/hugeicons/alert-circle";
+import CheckmarkIcon from "~icons/hugeicons/checkmark-circle-02";
+import InformationIcon from "~icons/hugeicons/information-circle";
+import type { IconComponent } from "../../components/icon";
+import type { NotificationProps, NotificationVariant } from "../../components/notification";
+import Icon from "./icon.vue";
+import Stack from "./stack.vue";
+
+const { label, subtext, icon, variant = "info", announce = true } = defineProps<NotificationProps>();
+
+const icons: Record<NotificationVariant, IconComponent> = {
+    error: AlertIcon,
+    attention: AlertIcon,
+    success: CheckmarkIcon,
+    info: InformationIcon,
+};
+
+const variants: Record<NotificationVariant, string> = {
+    error: "border-destructive/30 bg-destructive/5 text-destructive",
+    attention: "border-attention/30 bg-attention/5 text-attention",
+    success: "border-success/30 bg-success/5 text-success",
+    info: "border-border bg-muted/50 text-foreground",
+};
+</script>

package/dist/vue/components/pagination.vue

@@ -0,0 +1,24 @@
+<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')" />
+
+        <Button :label="nextLabel" variant="ghost" :disabled="!hasNext || loading" @click="$emit('next')" />
+    </Stack>
+</template>
+
+<script setup lang="ts">
+import type { PaginationProps } from "../../components/pagination";
+import Button from "./button.vue";
+import Stack from "./stack.vue";
+
+const {
+    hasPrevious = false,
+    hasNext = false,
+    loading = false,
+    previousLabel = "Previous",
+    nextLabel = "Next",
+    label = "Pagination",
+} = defineProps<PaginationProps>();
+
+defineEmits<{ previous: []; next: [] }>();
+</script>

package/dist/vue/components/popover.vue

@@ -1,6 +1,18 @@
 <template>
-    <div ref="container" class="relative w-full">
-        <Button variant="outline" :class="triggerClass" :layout="triggerLayout" :disabled="disabled" @click="toggle">
+    <div
+        ref="container"
+        class="relative w-full"
+        @keydown="handleKeyDown"
+        @focusout="$event.relatedTarget && !container?.contains($event.relatedTarget as Node) && close()"
+    >
+        <Button
+            :variant="triggerVariant"
+            :class="triggerClass"
+            :layout="triggerLayout"
+            :disabled="disabled"
+            :aria-expanded="isOpen"
+            @click="toggle"
+        >
             <slot name="trigger" :open="open" :close="close" :toggle="toggle">
                 <span class="truncate px-1" :class="triggerLayout === 'center' ? '' : 'flex-1'">{{
                     triggerLabel
@@ -8,13 +20,19 @@
             </slot>
         </Button>
 
-        <div
+        <Stack
             v-if="isOpen"
+            :padding="contentPadding"
+            :gap="contentGap"
+            :direction="contentDirection"
+            :align="contentAlign"
+            :justify="contentJustify"
+            :wrap="contentWrap"
             class="absolute left-0 top-full z-10 mt-1 max-w-xs rounded-ui border border-border bg-popover text-popover-foreground shadow-xl"
             :class="[contentClass, matchTriggerWidth ? 'w-full' : '']"
         >
             <slot :open="open" :close="close" :toggle="toggle" />
-        </div>
+        </Stack>
     </div>
 </template>
 
@@ -22,14 +40,21 @@
 import { onUnmounted, ref, useTemplateRef, watch } from "vue";
 import type { PopoverProps } from "../../components/popover";
 import Button from "./button.vue";
-import { useFocusTrap } from "../utilities/use-focus-trap";
+import Stack from "./stack.vue";
 
 const {
     modelValue = false,
     triggerLabel = "Open",
     triggerClass,
     triggerLayout = "center",
-    contentClass = "flex flex-col gap-1 p-1",
+    triggerVariant = "outline",
+    contentClass,
+    contentPadding = "1",
+    contentGap = "1",
+    contentDirection,
+    contentAlign,
+    contentJustify,
+    contentWrap,
     matchTriggerWidth = true,
     disabled = false,
 } = defineProps<PopoverProps>();
@@ -42,8 +67,6 @@ const container = useTemplateRef("container");
 
 const isOpen = ref(modelValue);
 
-useFocusTrap(container, isOpen);
-
 function setOpen(value: boolean) {
     isOpen.value = value;
 
@@ -69,22 +92,25 @@ function handlePointerDown(event: PointerEvent) {
 }
 
 function handleKeyDown(event: KeyboardEvent) {
-    if (event.key === "Escape") {
+    if (event.key === "Escape" && isOpen.value) {
+        event.preventDefault();
+        event.stopPropagation();
         close();
+        container.value?.querySelector<HTMLButtonElement>("button")?.focus();
     }
 }
 
 watch(
     isOpen,
     (value) => {
+        if (typeof document === "undefined") {
+            return;
+        }
+
         if (value) {
             document.addEventListener("pointerdown", handlePointerDown);
-
-            document.addEventListener("keydown", handleKeyDown);
         } else {
             document.removeEventListener("pointerdown", handlePointerDown);
-
-            document.removeEventListener("keydown", handleKeyDown);
         }
     },
     { immediate: true },
@@ -99,8 +125,6 @@ watch(
 
 onUnmounted(() => {
     document.removeEventListener("pointerdown", handlePointerDown);
-
-    document.removeEventListener("keydown", handleKeyDown);
 });
 
 defineExpose({ open, close, toggle });

package/dist/vue/components/select.vue

@@ -1,17 +1,56 @@
 <template>
-    <Stack>
-        <span v-if="label" class="text-sm font-normal">
+    <Stack v-bind="rootAttributes">
+        <label v-if="label" :for="controlAttributes.id ?? controlId" class="text-sm font-normal">
             {{ label }}
-        </span>
-
-        <input v-if="name" type="hidden" :name="name" :value="modelValue" :required="required" />
+        </label>
+
+        <input v-if="name && searchable" type="hidden" :name="name" :value="modelValue" :disabled="disabled" />
+
+        <select
+            v-if="!searchable"
+            v-bind="controlAttributes"
+            ref="nativeControl"
+            :id="controlAttributes.id ?? controlId"
+            :value="modelValue ?? ''"
+            :name="name"
+            :required="required"
+            :disabled="disabled"
+            :aria-invalid="invalid ?? controlAttributes['aria-invalid']"
+            class="w-full rounded-ui bg-secondary p-3 text-sm ring-1 ring-input ring-inset outline-ring focus-visible:outline-2 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-2 aria-invalid:ring-destructive"
+            @change="
+                const option = options.find(
+                    (option) => String(option.value) === ($event.currentTarget as HTMLSelectElement).value,
+                );
+                if (option) {
+                    select(option);
+                }
+            "
+        >
+            <option v-if="modelValue === undefined" value="" disabled>{{ placeholder ?? "Select" }}</option>
+
+            <option
+                v-for="option in options"
+                :key="option.value"
+                :value="option.value"
+                :selected="option.value === modelValue"
+                :disabled="option.disabled"
+            >
+                {{ option.label }}
+            </option>
+        </select>
 
-        <div ref="container" class="relative">
+        <div v-else ref="container" class="relative">
             <Stack
                 direction="horizontal"
                 align="center"
                 class="w-full cursor-text rounded-ui bg-secondary p-3 text-sm font-semibold ring-1 ring-input ring-inset focus-within:ring-2 focus-within:ring-ring"
-                :class="disabled ? 'cursor-not-allowed opacity-50' : ''"
+                :class="[
+                    disabled ? 'cursor-not-allowed opacity-50' : '',
+                    (invalid ??
+                    (controlAttributes['aria-invalid'] === true || controlAttributes['aria-invalid'] === 'true'))
+                        ? 'ring-2 ring-destructive'
+                        : '',
+                ]"
                 @click="
                     if (!disabled) {
                         open = true;
@@ -20,6 +59,8 @@
                 "
             >
                 <input
+                    v-bind="controlAttributes"
+                    :id="controlAttributes.id ?? controlId"
                     ref="search"
                     v-model="query"
                     role="combobox"
@@ -30,9 +71,13 @@
                     :aria-activedescendant="activeId"
                     aria-autocomplete="list"
                     :disabled="disabled"
+                    :required="required"
+                    :aria-invalid="invalid ?? controlAttributes['aria-invalid']"
+                    @invalid="open = true"
                     @input="input"
                     @keydown.enter.prevent="confirm"
-                    @keydown.escape="open = false"
+                    @keydown.escape="escape"
+                    @keydown.tab="open = false"
                     @keydown.arrow-down.prevent="stepHighlight(1)"
                     @keydown.arrow-up.prevent="stepHighlight(-1)"
                 />
@@ -58,6 +103,7 @@
                     variant="ghost"
                     layout="left"
                     :disabled="option.disabled"
+                    tabindex="-1"
                     role="option"
                     :aria-selected="option.value === modelValue"
                     @click="select(option)"
@@ -79,16 +125,18 @@
     </Stack>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="Value extends SelectValue = SelectValue">
 import ArrowDownIcon from "~icons/hugeicons/arrow-down-01";
 import ArrowUpIcon from "~icons/hugeicons/arrow-up-01";
 import TickIcon from "~icons/hugeicons/tick-02";
-import { computed, onUnmounted, ref, useId, useTemplateRef, watch } from "vue";
+import { computed, onUnmounted, ref, useId, useTemplateRef, watch, watchEffect } from "vue";
 import type { SelectOption, SelectProps, SelectValue } from "../../components/select";
 import Button from "./button.vue";
 import Icon from "./icon.vue";
 import Stack from "./stack.vue";
-import { useFocusTrap } from "../utilities/use-focus-trap";
+import { useControlAttributes } from "../utilities/use-control-attributes";
+
+defineOptions({ inheritAttrs: false });
 
 const {
     modelValue,
@@ -99,22 +147,31 @@ const {
     name,
     required = false,
     disabled = false,
-} = defineProps<SelectProps>();
+    searchable = true,
+    invalid = undefined,
+    requiredLabel = "Please select an option",
+} = defineProps<SelectProps<Value>>();
 
 const emit = defineEmits<{
-    "update:modelValue": [value: SelectValue];
+    "update:modelValue": [value: Value];
 }>();
 
 const open = ref(false);
 
 const container = useTemplateRef("container");
 
-useFocusTrap(container, open);
+const { rootAttributes, controlAttributes } = useControlAttributes();
 
 const search = useTemplateRef("search");
 
+const nativeControl = useTemplateRef("nativeControl");
+
 const listboxId = `select-${useId()}`;
 
+const controlId = `${listboxId}-control`;
+
+defineExpose({ focus: () => (search.value ?? nativeControl.value)?.focus() });
+
 const iconSize = 20;
 
 const selected = computed(() => options.find((option) => option.value === modelValue));
@@ -141,10 +198,19 @@ function handlePointerDown(event: PointerEvent) {
     }
 }
 
-function select(option: SelectOption) {
+function escape(event: KeyboardEvent) {
+    if (open.value) {
+        event.preventDefault();
+        event.stopPropagation();
+        open.value = false;
+    }
+}
+
+function select(option: SelectOption<Value>) {
     if (!option.disabled) {
         emit("update:modelValue", option.value);
         open.value = false;
+        search.value?.focus();
     }
 }
 
@@ -195,6 +261,10 @@ function confirm() {
 }
 
 function input() {
+    if (!searchable) {
+        return;
+    }
+
     searching.value = true;
 
     open.value = true;
@@ -208,6 +278,14 @@ watch(selected, (value) => {
     }
 });
 
+watchEffect(() => {
+    search.value?.setCustomValidity(required && !disabled && !selected.value ? requiredLabel : "");
+
+    if (disabled) {
+        open.value = false;
+    }
+});
+
 watch(open, (value) => {
     if (value) {
         highlighted.value = filtered.value.findIndex((option) => option.value === modelValue);

package/dist/vue/components/sheet.vue

@@ -3,23 +3,45 @@
         ref="sheet"
         class="m-0 max-w-none border-0 bg-transparent p-0 backdrop:bg-black/50 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
         :class="positions[side]"
-        @close="$emit('update:modelValue', false)"
-        @click="$event.target === $event.currentTarget && ($event.currentTarget as HTMLDialogElement).close()"
+        :aria-labelledby="label && !$slots.header ? (labelId ?? id) : ($attrs as HTMLAttributes)['aria-labelledby']"
+        @close="handleClose"
+        @cancel="dismiss"
+        @click="$event.target === $event.currentTarget && dismiss($event)"
     >
-        <Card :label="label" :class="cardClasses[side]">
+        <Card
+            :label="label"
+            :label-id="labelId ?? id"
+            :body-padding="bodyPadding"
+            :body-gap="bodyGap"
+            :class="cardClasses[side]"
+        >
+            <template v-if="$slots.header" #header>
+                <slot name="header" />
+            </template>
+
             <template #actions>
+                <slot name="actions" />
+
                 <Button
                     size="icon"
                     variant="ghost"
                     :icon-prefix="CloseIcon"
                     :aria-label="closeLabel"
-                    @click="sheet?.close()"
+                    :disabled="!dismissible"
+                    @click="dismiss"
                 />
             </template>
 
-            <div class="min-h-0 flex-1 overflow-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+            <Stack
+                :gap="bodyGap"
+                :direction="bodyDirection"
+                :align="bodyAlign"
+                :justify="bodyJustify"
+                :wrap="bodyWrap"
+                class="min-h-0 flex-1 overflow-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+            >
                 <slot />
-            </div>
+            </Stack>
 
             <template v-if="$slots.footer" #footer>
                 <slot name="footer" />
@@ -29,25 +51,45 @@
 </template>
 
 <script setup lang="ts">
+import { useId, useTemplateRef, type HTMLAttributes } from "vue";
 import CloseIcon from "~icons/hugeicons/multiplication-sign";
-import { useTemplateRef, watchEffect } from "vue";
 import type { SheetProps, SheetSide } from "../../components/sheet";
+import { useModalDialog } from "../utilities/use-modal-dialog";
 import Button from "./button.vue";
 import Card from "./card.vue";
-import { useFocusTrap } from "../utilities/use-focus-trap";
-import { useScrollLock } from "../utilities/use-scroll-lock";
+import Stack from "./stack.vue";
 
-const { modelValue = false, side = "right", label, closeLabel = "Close" } = defineProps<SheetProps>();
+const {
+    modelValue = undefined,
+    side = "right",
+    label,
+    labelId,
+    bodyPadding,
+    bodyGap = "5",
+    bodyDirection,
+    bodyAlign,
+    bodyJustify,
+    bodyWrap,
+    closeLabel = "Close",
+    dismissible = true,
+} = defineProps<SheetProps>();
 
-defineEmits<{
+const emit = defineEmits<{
     "update:modelValue": [value: boolean];
 }>();
 
 const sheet = useTemplateRef("sheet");
 
-useFocusTrap(sheet, () => modelValue);
+const id = `sheet-${useId()}`;
 
-useScrollLock(() => modelValue);
+const { open, close, toggle, dismiss, handleClose } = useModalDialog(
+    sheet,
+    () => modelValue,
+    (value) => emit("update:modelValue", value),
+    () => dismissible,
+);
+
+defineExpose({ open, close, toggle });
 
 const positions: Record<SheetSide, string> = {
     top: "bottom-auto left-0 right-0 top-0 h-auto w-full",
@@ -62,12 +104,4 @@ const cardClasses: Record<SheetSide, string> = {
     bottom: "max-h-[85vh] w-full border-b-0 border-l-0 border-r-0 shadow-sheet-bottom",
     left: "h-full w-full border-b-0 border-l-0 border-t-0 shadow-sheet-left",
 };
-
-watchEffect(() => {
-    if (modelValue && !sheet.value?.open) {
-        sheet.value?.showModal();
-    } else if (!modelValue && sheet.value?.open) {
-        sheet.value.close();
-    }
-});
 </script>