@revojs/ui 0.2.8 → 0.2.10

package/dist/vue/components/dialog.vue

@@ -1,19 +1,13 @@
 <template>
     <dialog
         ref="dialog"
-        class="m-auto w-[min(32rem,calc(100%-2rem))] border-0 bg-transparent p-0 backdrop:bg-black/50"
+        class="m-auto w-full max-w-lg border-0 bg-transparent p-5 backdrop:bg-black/50"
         @close="$emit('update:modelValue', false)"
         @click="$event.target === $event.currentTarget && ($event.currentTarget as HTMLDialogElement).close()"
     >
         <Card :title="title" :description="description" class="shadow-2xl">
             <template #actions>
-                <Button
-                    size="icon"
-                    variant="ghost"
-                    icon-prefix="multiplication-sign"
-                    :aria-label="closeLabel"
-                    @click="close"
-                />
+                <Button size="icon" variant="ghost" :icon-prefix="CloseIcon" :aria-label="closeLabel" @click="close" />
             </template>
             <slot :open="open" :close="close" :toggle="toggle" />
 
@@ -25,21 +19,15 @@
 </template>
 
 <script setup lang="ts">
+import CloseIcon from "~icons/hugeicons/multiplication-sign";
 import { useTemplateRef, watchEffect } from "vue";
+import type { DialogProps } from "../../components/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";
 
-const {
-    modelValue = false,
-    title = undefined,
-    description = undefined,
-    closeLabel = "Close",
-} = defineProps<{
-    modelValue?: boolean;
-    title?: string;
-    description?: string;
-    closeLabel?: string;
-}>();
+const { modelValue = false, title, description, closeLabel = "Close" } = defineProps<DialogProps>();
 
 const emit = defineEmits<{
     "update:modelValue": [value: boolean];
@@ -47,6 +35,10 @@ const emit = defineEmits<{
 
 const dialog = useTemplateRef("dialog");
 
+useFocusTrap(dialog, () => modelValue);
+
+useScrollLock(() => modelValue);
+
 function open() {
     emit("update:modelValue", true);
 }

package/dist/vue/components/field.vue

@@ -1,6 +1,6 @@
 <template>
-    <fieldset class="flex min-w-0 flex-col gap-2" :disabled="disabled">
-        <legend v-if="label" class="mb-2 text-sm font-medium">
+    <Stack is="fieldset" :disabled="disabled">
+        <legend v-if="label" class="mb-1 text-sm font-medium">
             {{ label }}<span v-if="required" aria-hidden="true"> *</span>
         </legend>
 
@@ -12,21 +12,12 @@
         <p v-else-if="description" class="text-sm opacity-60">
             {{ description }}
         </p>
-    </fieldset>
+    </Stack>
 </template>
 
 <script setup lang="ts">
-const {
-    label = undefined,
-    description = undefined,
-    error = undefined,
-    required = false,
-    disabled = false,
-} = defineProps<{
-    label?: string;
-    description?: string;
-    error?: string;
-    required?: boolean;
-    disabled?: boolean;
-}>();
+import type { FieldProps } from "../../components/field";
+import Stack from "./stack.vue";
+
+const { label, description, error, required = false, disabled = false } = defineProps<FieldProps>();
 </script>

package/dist/vue/components/heading.vue

@@ -6,19 +6,18 @@
 
 <script setup lang="ts">
 import type { Component } from "vue";
-import type { HeadingLayout, HeadingText } from "../../components/heading.ts";
+import type { HeadingLayout, HeadingProps, HeadingText } from "../../components/heading";
 
 const {
     is = "h2",
-    label = undefined,
+    label,
     text = "xl",
     layout = "left",
-} = defineProps<{
-    is?: string | Component;
-    label?: string;
-    text?: HeadingText;
-    layout?: HeadingLayout;
-}>();
+} = defineProps<
+    HeadingProps & {
+        is?: string | Component;
+    }
+>();
 
 const layouts: Record<HeadingLayout, string> = {
     left: "text-left",

package/dist/vue/components/icon.vue

@@ -1,49 +1,15 @@
 <template>
-    <span aria-hidden="true" class="block size-[1em] shrink-0">
-        <component :is="icon" class="block size-full" />
+    <span
+        aria-hidden="true"
+        class="block shrink-0"
+        :style="{ height: size === undefined ? '1em' : `${size}px`, width: size === undefined ? '1em' : `${size}px` }"
+    >
+        <component :is="is" class="block size-full" />
     </span>
 </template>
 
 <script setup lang="ts">
-import iconSets from "#ui/icons";
-import { getIconData, iconToSVG, replaceIDs } from "@iconify/utils";
-import { computed, defineAsyncComponent, h, markRaw } from "vue";
+import type { IconProps } from "../../components/icon";
 
-const { name } = defineProps<{
-    name: string;
-}>();
-
-const icon = computed(() => {
-    const separator = name.indexOf(":");
-    const prefix = separator === -1 ? undefined : name.slice(0, separator);
-    const iconName = separator === -1 ? name : name.slice(separator + 1);
-
-    return defineAsyncComponent(async () => {
-        for (const [key, resolve] of Object.entries(iconSets)) {
-            if (prefix && key !== prefix) {
-                continue;
-            }
-
-            const set = await resolve();
-
-            if (prefix && set.prefix !== prefix) {
-                continue;
-            }
-
-            const data = getIconData(set, iconName);
-
-            if (data) {
-                const svg = iconToSVG(data);
-                const body = replaceIDs(svg.body);
-
-                return markRaw({
-                    name: `${set.prefix}-${iconName}`,
-                    render: () => h("svg", { ...svg.attributes, innerHTML: body }),
-                });
-            }
-        }
-
-        return markRaw({ render: () => null });
-    });
-});
+const { is, size } = defineProps<IconProps>();
 </script>

package/dist/vue/components/input.vue

@@ -1,11 +1,14 @@
 <template>
-    <span
-        class="flex min-h-10 w-full cursor-text items-center gap-2 rounded-ui border border-input px-3 text-sm ring-ring focus-within:ring-2"
+    <Stack
+        is="span"
+        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="interactionVariants[interaction]"
     >
         <slot name="leading" />
 
-        <Icon v-if="iconPrefix" :name="iconPrefix" />
+        <Icon v-if="iconPrefix" :is="iconPrefix" :size="iconSize" />
 
         <input
             class="w-full min-w-0 appearance-none bg-transparent py-2 outline-none placeholder:opacity-50"
@@ -20,40 +23,33 @@
             @input="input"
         />
 
-        <Icon v-if="iconSuffix" :name="iconSuffix" />
+        <Icon v-if="iconSuffix" :is="iconSuffix" :size="iconSize" />
 
         <slot name="trailing" />
-    </span>
+    </Stack>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
 import type { ControlInteraction } from "../../components/control.ts";
+import type { InputProps } from "../../components/input";
 import Icon from "./icon.vue";
+import Stack from "./stack.vue";
 
 const {
-    modelValue = undefined,
+    modelValue,
     type = "text",
-    iconPrefix = undefined,
-    iconSuffix = undefined,
-    placeholder = undefined,
-    name = undefined,
+    iconPrefix,
+    iconSuffix,
+    placeholder,
+    name,
     spellcheck = undefined,
     required = false,
     readonly = false,
     disabled = false,
-} = defineProps<{
-    modelValue?: string | number;
-    type?: string;
-    iconPrefix?: string;
-    iconSuffix?: string;
-    placeholder?: string;
-    name?: string;
-    spellcheck?: boolean;
-    required?: boolean;
-    readonly?: boolean;
-    disabled?: boolean;
-}>();
+} = defineProps<InputProps>();
+
+const iconSize = 20;
 
 const emit = defineEmits<{
     "update:modelValue": [value: string | number];

package/dist/vue/components/link.vue

@@ -11,19 +11,18 @@
 
 <script setup lang="ts">
 import type { Component } from "vue";
-import type { LinkVariant } from "../../components/link.ts";
+import type { LinkProps, LinkVariant } from "../../components/link";
 
 const {
     is = "a",
-    href = undefined,
-    label = undefined,
+    href,
+    label,
     variant = "primary",
-} = defineProps<{
-    is?: string | Component;
-    href?: string;
-    label?: string;
-    variant?: LinkVariant;
-}>();
+} = defineProps<
+    LinkProps & {
+        is?: string | Component;
+    }
+>();
 
 const variants: Record<LinkVariant, string> = {
     primary: "text-foreground",

package/dist/vue/components/navigate.vue

@@ -12,19 +12,8 @@
 </template>
 
 <script setup lang="ts">
+import type { NavigateProps } from "../../components/navigate";
 import Button from "./button.vue";
 
-const {
-    href,
-    label = undefined,
-    iconPrefix = undefined,
-    iconSuffix = undefined,
-    active = false,
-} = defineProps<{
-    href: string;
-    label?: string;
-    iconPrefix?: string;
-    iconSuffix?: string;
-    active?: boolean;
-}>();
+const { href, label, iconPrefix, iconSuffix, active = false } = defineProps<NavigateProps>();
 </script>

package/dist/vue/components/popover.vue

@@ -1,23 +1,13 @@
 <template>
-    <div ref="container" class="inline-flex">
-        <Button
-            variant="outline"
-            :class="triggerClass"
-            :layout="triggerLayout"
-            :disabled="disabled"
-            :popovertarget="id"
-        >
+    <div ref="container" class="relative inline-flex">
+        <Button variant="outline" :class="triggerClass" :layout="triggerLayout" :disabled="disabled" @click="toggle">
             <slot name="trigger" :open="open" :close="close" :toggle="toggle">{{ triggerLabel }}</slot>
         </Button>
 
         <div
-            :id="id"
-            ref="popover"
-            popover
-            class="m-0 mt-2 max-w-sm rounded-ui border border-border bg-popover text-popover-foreground shadow-xl"
-            :class="contentClass"
-            :style="position"
-            @toggle="handleToggle"
+            v-if="isOpen"
+            class="absolute left-0 top-full z-10 mt-1 max-w-sm 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>
@@ -25,88 +15,88 @@
 </template>
 
 <script setup lang="ts">
-import { ref, useId, useTemplateRef, watchEffect } from "vue";
-import type { ButtonLayout } from "../../components/button.ts";
+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";
 
 const {
     modelValue = false,
     triggerLabel = "Open",
-    triggerClass = undefined,
+    triggerClass,
     triggerLayout = "center",
-    contentClass = "p-4",
+    contentClass = "flex flex-col gap-1 p-1",
     matchTriggerWidth = false,
     disabled = false,
-} = defineProps<{
-    modelValue?: boolean;
-    triggerLabel?: string;
-    triggerClass?: string;
-    triggerLayout?: ButtonLayout;
-    contentClass?: string;
-    matchTriggerWidth?: boolean;
-    disabled?: boolean;
-}>();
+} = defineProps<PopoverProps>();
 
 const emit = defineEmits<{
     "update:modelValue": [value: boolean];
 }>();
 
-const id = `popover-${useId()}`;
-
 const container = useTemplateRef("container");
 
-const popover = useTemplateRef("popover");
+const isOpen = ref(modelValue);
+
+useFocusTrap(container, isOpen);
 
-const position = ref<Record<string, string>>({});
+function setOpen(value: boolean) {
+    isOpen.value = value;
+
+    emit("update:modelValue", value);
+}
 
 function open() {
-    popover.value?.showPopover();
+    setOpen(true);
 }
 
 function close() {
-    popover.value?.hidePopover();
+    setOpen(false);
 }
 
 function toggle() {
-    popover.value?.togglePopover();
+    setOpen(!isOpen.value);
 }
 
-function handleToggle(event: Event) {
-    const element = event.currentTarget as HTMLElement;
-    const open = element.matches(":popover-open");
-
-    if (open) {
-        const trigger = container.value?.querySelector("button");
-
-        if (trigger) {
-            const bounds = trigger.getBoundingClientRect();
-            const width = matchTriggerWidth ? bounds.width : element.offsetWidth;
-            const left = Math.min(Math.max(8, bounds.left), window.innerWidth - width - 8);
-            const top =
-                bounds.bottom + element.offsetHeight + 8 <= window.innerHeight
-                    ? bounds.bottom + 8
-                    : bounds.top - element.offsetHeight - 8;
-
-            position.value = {
-                bottom: "auto",
-                left: `${left}px`,
-                right: "auto",
-                top: `${Math.max(8, top)}px`,
-                position: "fixed",
-                width: matchTriggerWidth ? `${width}px` : "auto",
-            };
-        }
+function handlePointerDown(event: PointerEvent) {
+    if (!container.value?.contains(event.target as Node)) {
+        close();
     }
-
-    emit("update:modelValue", open);
 }
 
-watchEffect(() => {
-    if (modelValue && !popover.value?.matches(":popover-open")) {
-        popover.value?.showPopover();
-    } else if (!modelValue && popover.value?.matches(":popover-open")) {
-        popover.value.hidePopover();
+function handleKeyDown(event: KeyboardEvent) {
+    if (event.key === "Escape") {
+        close();
     }
+}
+
+watch(
+    isOpen,
+    (value) => {
+        if (value) {
+            document.addEventListener("pointerdown", handlePointerDown);
+
+            document.addEventListener("keydown", handleKeyDown);
+        } else {
+            document.removeEventListener("pointerdown", handlePointerDown);
+
+            document.removeEventListener("keydown", handleKeyDown);
+        }
+    },
+    { immediate: true },
+);
+
+watch(
+    () => modelValue,
+    (value) => {
+        isOpen.value = value;
+    },
+);
+
+onUnmounted(() => {
+    document.removeEventListener("pointerdown", handlePointerDown);
+
+    document.removeEventListener("keydown", handleKeyDown);
 });
 
 defineExpose({ open, close, toggle });

package/dist/vue/components/progress.vue

@@ -1,38 +1,32 @@
 <template>
-    <div class="flex flex-col gap-2">
-        <div v-if="label" class="flex items-center justify-between gap-4 text-sm">
+    <Stack>
+        <Stack v-if="label" direction="horizontal" align="center" justify="between" gap="1" class="text-sm">
             <span class="font-medium">{{ label }}</span>
 
             <span class="tabular-nums opacity-60">{{ Math.round(percent) }}%</span>
-        </div>
+        </Stack>
 
         <progress class="sr-only" :value="value" :max="max">{{ percent }}%</progress>
 
         <div
-            class="h-2 w-full overflow-hidden rounded-full bg-input"
+            class="h-2 w-full overflow-hidden rounded-ui bg-input"
             role="progressbar"
             :aria-label="label"
             :aria-valuenow="value"
             aria-valuemin="0"
             :aria-valuemax="max"
         >
-            <div class="h-full rounded-full bg-primary transition-[width]" :style="{ width: `${percent}%` }" />
+            <div class="h-full rounded-ui bg-primary transition-[width]" :style="{ width: `${percent}%` }" />
         </div>
-    </div>
+    </Stack>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
+import type { ProgressProps } from "../../components/progress";
+import Stack from "./stack.vue";
 
-const {
-    value = 0,
-    max = 100,
-    label = undefined,
-} = defineProps<{
-    value?: number;
-    max?: number;
-    label?: string;
-}>();
+const { value = 0, max = 100, label } = defineProps<ProgressProps>();
 
 const percent = computed(() => (max > 0 ? Math.min(100, Math.max(0, (value / max) * 100)) : 0));
 </script>

package/dist/vue/components/radio.vue

@@ -1,5 +1,5 @@
 <template>
-    <label class="inline-flex items-start gap-3" :class="interactionVariants[interaction]">
+    <Stack is="label" direction="horizontal" align="start" gap="3" :class="interactionVariants[interaction]">
         <input
             class="peer sr-only"
             type="radio"
@@ -13,44 +13,29 @@
 
         <span
             aria-hidden="true"
-            class="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full border transition-colors peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-ring"
+            class="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-ui border transition-colors peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-ring"
             :class="modelValue === value ? 'border-primary bg-background' : 'border-input bg-background'"
         >
-            <span v-if="modelValue === value" class="size-2 rounded-full bg-primary" />
+            <span v-if="modelValue === value" class="size-2 rounded-ui bg-primary" />
         </span>
 
-        <span class="flex flex-col gap-0.5">
+        <Stack is="span" gap="0">
             <span class="text-sm font-medium">
                 <slot> {{ label }}</slot>
             </span>
 
             <span v-if="description" class="text-sm opacity-60">{{ description }}</span>
-        </span>
-    </label>
+        </Stack>
+    </Stack>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
 import type { ControlInteraction } from "../../components/control.ts";
-import type { RadioValue } from "../../components/radio.ts";
+import type { RadioProps, RadioValue } from "../../components/radio";
+import Stack from "./stack.vue";
 
-const {
-    modelValue = undefined,
-    value,
-    label = undefined,
-    description = undefined,
-    name = undefined,
-    required = false,
-    disabled = false,
-} = defineProps<{
-    modelValue?: RadioValue;
-    value: RadioValue;
-    label?: string;
-    description?: string;
-    name?: string;
-    required?: boolean;
-    disabled?: boolean;
-}>();
+const { modelValue, value, label, description, name, required = false, disabled = false } = defineProps<RadioProps>();
 
 defineEmits<{
     "update:modelValue": [value: RadioValue];

package/dist/vue/components/range.vue

@@ -1,16 +1,16 @@
 <template>
-    <div class="flex flex-col gap-2" :class="interactionVariants[interaction]">
-        <span v-if="label" class="flex items-center justify-between gap-4 text-sm">
+    <Stack :class="interactionVariants[interaction]">
+        <Stack v-if="label" direction="horizontal" align="center" justify="between" gap="1" class="text-sm">
             <span class="font-medium"> {{ label }} </span>
 
             <output class="tabular-nums opacity-60">
                 {{ modelValue }}
             </output>
-        </span>
+        </Stack>
 
         <div
             ref="track"
-            class="relative h-2 w-full touch-none rounded-full bg-input outline-ring focus-visible:outline-2 focus-visible:outline-offset-2"
+            class="relative h-2 w-full touch-none rounded-ui bg-input outline-ring focus-visible:outline-2 focus-visible:outline-offset-2"
             :class="disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'"
             role="slider"
             :tabindex="disabled ? -1 : 0"
@@ -28,32 +28,20 @@
             <div class="absolute inset-y-0 left-0 rounded-full bg-primary" :style="{ width: `${percent}%` }" />
 
             <span
-                class="absolute top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-primary bg-background shadow"
+                class="absolute top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-ui border-2 border-primary bg-background shadow"
                 :style="{ left: `${percent}%` }"
             />
         </div>
-    </div>
+    </Stack>
 </template>
 
 <script setup lang="ts">
 import { computed, 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 = undefined,
-    min = 0,
-    max = 100,
-    step = 1,
-    disabled = false,
-} = defineProps<{
-    modelValue?: number;
-    label?: string;
-    min?: number;
-    max?: number;
-    step?: number;
-    disabled?: boolean;
-}>();
+const { modelValue = 0, label, min = 0, max = 100, step = 1, disabled = false } = defineProps<RangeProps>();
 
 const emit = defineEmits<{
     "update:modelValue": [value: number];