@revojs/ui 0.2.11 → 0.2.13

package/dist/vue/components/rating.vue

@@ -1,6 +1,6 @@
 <template>
     <Stack>
-        <span v-if="label" class="text-sm font-medium">{{ label }}</span>
+        <span v-if="label" class="text-sm font-normal">{{ label }}</span>
 
         <Stack direction="horizontal" align="center" gap="0" role="radiogroup" :aria-label="label">
             <Button
@@ -16,7 +16,7 @@
                 :disabled="readonly || disabled"
                 @click="$emit('update:modelValue', value)"
             >
-                <Icon :is="StarIcon" />
+                <Icon :is="StarIcon" :class="{ '[&_path]:fill-current': value <= modelValue }" />
             </Button>
         </Stack>
     </Stack>

package/dist/vue/components/select.vue

@@ -1,56 +1,99 @@
 <template>
-    <Stack>
-        <span v-if="label" class="text-sm font-medium">
+    <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="min-h-10 w-full cursor-text rounded-ui border border-input px-3 text-sm ring-ring focus-within:ring-2"
-                :class="disabled ? 'cursor-not-allowed opacity-50' : ''"
-                @click="search?.focus()"
+                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' : '',
+                    (invalid ??
+                    (controlAttributes['aria-invalid'] === true || controlAttributes['aria-invalid'] === 'true'))
+                        ? 'ring-2 ring-destructive'
+                        : '',
+                ]"
+                @click="
+                    if (!disabled) {
+                        open = true;
+                        search?.focus();
+                    }
+                "
             >
                 <input
+                    v-bind="controlAttributes"
+                    :id="controlAttributes.id ?? controlId"
                     ref="search"
                     v-model="query"
                     role="combobox"
-                    class="w-full min-w-0 bg-transparent py-2 outline-none placeholder:opacity-50"
+                    class="w-full min-w-0 bg-transparent px-1 outline-none placeholder:opacity-50"
                     :placeholder="placeholder ?? 'Select'"
                     :aria-expanded="open"
                     :aria-controls="listboxId"
                     :aria-activedescendant="activeId"
                     aria-autocomplete="list"
                     :disabled="disabled"
-                    @focus="open = true"
+                    :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)"
                 />
 
-                <button
-                    type="button"
-                    tabindex="-1"
-                    class="shrink-0 opacity-60 transition-transform"
-                    :class="open ? 'rotate-180' : ''"
-                    :disabled="disabled"
-                    @click.stop="open = !open"
-                >
-                    <Icon :is="ArrowDownIcon" :size="iconSize" />
+                <button type="button" tabindex="-1" class="shrink-0" :disabled="disabled" @click.stop="open = !open">
+                    <Icon :is="open ? ArrowUpIcon : ArrowDownIcon" :size="iconSize" />
                 </button>
             </Stack>
 
-            <div
+            <Stack
                 v-if="open"
                 :id="listboxId"
                 role="listbox"
                 :aria-label="label"
-                class="absolute inset-x-0 top-full z-10 mt-1 max-h-[min(16rem,50vh)] overflow-y-auto rounded-ui border border-border bg-popover p-1 text-popover-foreground shadow-xl"
+                padding="1"
+                class="absolute inset-x-0 top-full z-10 mt-1 max-h-[min(16rem,50vh)] overflow-y-auto rounded-ui border border-border bg-popover text-popover-foreground shadow-xl [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
             >
                 <Button
                     v-for="(option, index) in filtered"
@@ -60,13 +103,14 @@
                     variant="ghost"
                     layout="left"
                     :disabled="option.disabled"
+                    tabindex="-1"
                     role="option"
                     :aria-selected="option.value === modelValue"
                     @click="select(option)"
                 >
                     <Stack direction="horizontal" align="center" justify="between" gap="1" class="w-full text-left">
                         <slot name="option" :option="option" :selected="option.value === modelValue">
-                            {{ option.label }}
+                            <span class="min-w-0 flex-1 truncate px-1">{{ option.label }}</span>
                         </slot>
 
                         <Icon v-if="option.value === modelValue" :is="TickIcon" :size="iconSize" />
@@ -76,20 +120,23 @@
                 <p v-if="filtered.length === 0" class="px-1 py-5 text-center text-sm opacity-60">
                     {{ emptyLabel }}
                 </p>
-            </div>
+            </Stack>
         </div>
     </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,
@@ -100,30 +147,41 @@ 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));
 
 const query = ref(selected.value?.label ?? "");
 
+const searching = ref(false);
+
 const filtered = computed(() => {
-    const term = query.value.trim().toLowerCase();
+    const term = searching.value ? query.value.trim().toLowerCase() : "";
 
     return term === "" ? options : options.filter((option) => option.label.toLowerCase().includes(term));
 });
@@ -140,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();
     }
 }
 
@@ -194,6 +261,12 @@ function confirm() {
 }
 
 function input() {
+    if (!searchable) {
+        return;
+    }
+
+    searching.value = true;
+
     open.value = true;
 
     highlighted.value = -1;
@@ -205,10 +278,16 @@ watch(selected, (value) => {
     }
 });
 
+watchEffect(() => {
+    search.value?.setCustomValidity(required && !disabled && !selected.value ? requiredLabel : "");
+
+    if (disabled) {
+        open.value = false;
+    }
+});
+
 watch(open, (value) => {
     if (value) {
-        query.value = "";
-
         highlighted.value = filtered.value.findIndex((option) => option.value === modelValue);
 
         document.addEventListener("pointerdown", handlePointerDown);
@@ -221,6 +300,8 @@ watch(open, (value) => {
 
         highlighted.value = -1;
 
+        searching.value = false;
+
         query.value = selected.value?.label ?? "";
     }
 });

package/dist/vue/components/separator.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        class="shrink-0 bg-border"
+        class="shrink-0 self-center bg-border"
         :class="variants[selected]"
         :role="decorative ? 'none' : 'separator'"
         :aria-orientation="decorative ? undefined : selected"
@@ -17,6 +17,6 @@ const selected = computed(() => variant ?? orientation);
 
 const variants: Record<SeparatorOrientation, string> = {
     horizontal: "h-px w-full",
-    vertical: "h-full min-h-5 w-px",
+    vertical: "h-5 w-px",
 };
 </script>

package/dist/vue/components/sheet.vue

@@ -1,25 +1,47 @@
 <template>
     <dialog
         ref="sheet"
-        class="m-0 max-w-none border-0 bg-transparent p-0 backdrop:bg-black/50"
+        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 :title="title" :description="description" :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="flex-1 overflow-auto">
+            <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", title, description, 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>

package/dist/vue/components/shell.vue

@@ -0,0 +1,38 @@
+<template>
+    <header class="z-10 shrink-0 border-b border-border bg-background" :class="sticky ? 'sticky top-0' : ''">
+        <Stack direction="horizontal" align="center" gap="1" padding="1">
+            <slot name="prefix" />
+
+            <h1 v-if="label || $slots.heading" class="min-w-0 flex-1 truncate p-3 text-sm font-semibold">
+                <slot name="heading">{{ label }}</slot>
+            </h1>
+            <template v-else-if="headingLabel">
+                <h1 class="sr-only">{{ headingLabel }}</h1>
+
+                <span aria-hidden="true" class="min-w-0 flex-1" />
+            </template>
+            <span v-else aria-hidden="true" class="min-w-0 flex-1" />
+
+            <slot name="actions"><slot /></slot>
+        </Stack>
+
+        <Stack
+            v-if="$slots.navigation"
+            is="nav"
+            :aria-label="navigationLabel"
+            direction="horizontal"
+            gap="1"
+            padding="1"
+            class="overflow-x-auto border-t border-border [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+        >
+            <slot name="navigation" />
+        </Stack>
+    </header>
+</template>
+
+<script setup lang="ts">
+import type { ShellProps } from "../../components/shell";
+import Stack from "./stack.vue";
+
+const { label, headingLabel, sticky = true, navigationLabel = "Page navigation" } = defineProps<ShellProps>();
+</script>

package/dist/vue/components/switch.vue

@@ -1,21 +1,35 @@
 <template>
-    <Stack is="label" direction="horizontal" align="start" gap="3" :class="interactionVariants[interaction]">
+    <Stack
+        is="label"
+        direction="horizontal"
+        align="center"
+        gap="3"
+        class="group"
+        :class="interactionVariants[interaction]"
+    >
         <input v-if="name" type="hidden" :name="name" :value="modelValue ? 'on' : 'off'" />
 
         <button
-            class="relative mt-0.5 flex h-6 w-11 shrink-0 items-center rounded-ui outline-ring transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed"
-            :class="variants[state]"
+            class="relative flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-ui p-0.5 outline-ring focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed"
+            :class="[
+                variants[state],
+                disabled
+                    ? ''
+                    : modelValue
+                      ? 'group-hover:bg-primary-hover group-active:bg-primary-active'
+                      : 'group-hover:bg-secondary-hover group-active:bg-secondary-active',
+            ]"
             type="button"
             role="switch"
             :aria-checked="modelValue"
             :disabled="disabled"
             @click="$emit('update:modelValue', !modelValue)"
         >
-            <span class="block size-5 rounded-ui shadow transition-transform" :class="thumbVariants[state]" />
+            <span class="block size-5 rounded-ui shadow" :class="thumbVariants[state]" />
         </button>
 
         <Stack is="span" v-if="label || description || $slots.default" gap="0">
-            <span class="text-sm font-medium">
+            <span class="text-sm font-normal">
                 <slot> {{ label }} </slot>
             </span>
 
@@ -47,11 +61,11 @@ const interactionVariants: Record<ControlInteraction, string> = {
 
 const thumbVariants: Record<SwitchState, string> = {
     checked: "translate-x-5 bg-primary-foreground",
-    unchecked: "translate-x-1 bg-white",
+    unchecked: "translate-x-0 bg-foreground",
 };
 
 const variants: Record<SwitchState, string> = {
     checked: "bg-primary",
-    unchecked: "bg-input",
+    unchecked: "bg-background ring-1 ring-input ring-inset",
 };
 </script>

package/dist/vue/components/textarea.vue

@@ -0,0 +1,49 @@
+<template>
+    <textarea
+        ref="control"
+        class="block w-full min-w-0 rounded-ui outline-ring placeholder:opacity-50 focus-visible:outline-2 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-2 aria-invalid:ring-destructive"
+        :class="[texts[text], resizes[resize], variants[variant]]"
+        :value="modelValue"
+        :disabled="disabled"
+        :readonly="readonly"
+        :required="required"
+        :aria-invalid="invalid ?? ($attrs as HTMLAttributes)['aria-invalid']"
+        @input="$emit('update:modelValue', ($event.currentTarget as HTMLTextAreaElement).value)"
+    ></textarea>
+</template>
+
+<script setup lang="ts">
+import { useTemplateRef, type HTMLAttributes } from "vue";
+import type { TextareaProps, TextareaResize, TextareaText, TextareaVariant } from "../../components/textarea";
+
+const {
+    modelValue = "",
+    text = "sm",
+    resize = "vertical",
+    variant = "default",
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = undefined,
+} = defineProps<TextareaProps>();
+
+defineEmits<{ "update:modelValue": [value: string] }>();
+
+const control = useTemplateRef("control");
+
+defineExpose({ focus: () => control.value?.focus() });
+
+const texts: Record<TextareaText, string> = { sm: "text-sm", md: "text-base" };
+
+const resizes: Record<TextareaResize, string> = {
+    none: "resize-none",
+    vertical: "resize-y",
+    horizontal: "resize-x",
+    both: "resize",
+};
+
+const variants: Record<TextareaVariant, string> = {
+    default: "bg-secondary p-3 ring-1 ring-input ring-inset",
+    plain: "bg-transparent p-0",
+};
+</script>