@revojs/ui 0.2.7 → 0.2.9

package/dist/vue/components/input.vue

@@ -5,7 +5,7 @@
     >
         <slot name="leading" />
 
-        <Icon v-if="iconPrefix" :name="iconPrefix" />
+        <Icon v-if="iconPrefix" :is="iconPrefix" />
 
         <input
             class="w-full min-w-0 appearance-none bg-transparent py-2 outline-none placeholder:opacity-50"
@@ -20,7 +20,7 @@
             @input="input"
         />
 
-        <Icon v-if="iconSuffix" :name="iconSuffix" />
+        <Icon v-if="iconSuffix" :is="iconSuffix" />
 
         <slot name="trailing" />
     </span>
@@ -29,31 +29,21 @@
 <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";
 
 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 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

@@ -4,7 +4,7 @@
         :href="href"
         font="normal"
         layout="left"
-        :variant="active ? 'secondary' : 'text'"
+        :variant="active ? 'secondary' : 'ghost'"
         :icon-prefix="iconPrefix"
         :icon-suffix="iconSuffix"
         :label="label"
@@ -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

@@ -26,26 +26,18 @@
 
 <script setup lang="ts">
 import { ref, useId, useTemplateRef, watchEffect } from "vue";
-import type { ButtonLayout } from "../../components/button.ts";
+import type { PopoverProps } from "../../components/popover";
 import Button from "./button.vue";
 
 const {
     modelValue = false,
     triggerLabel = "Open",
-    triggerClass = undefined,
+    triggerClass,
     triggerLayout = "center",
     contentClass = "p-4",
     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];

package/dist/vue/components/progress.vue

@@ -9,7 +9,7 @@
         <progress class="sr-only" :value="value" :max="max">{{ percent }}%</progress>
 
         <div
-            class="h-2 w-full overflow-hidden rounded-full bg-secondary"
+            class="h-2 w-full overflow-hidden rounded-full bg-input"
             role="progressbar"
             :aria-label="label"
             :aria-valuenow="value"
@@ -23,16 +23,9 @@
 
 <script setup lang="ts">
 import { computed } from "vue";
+import type { ProgressProps } from "../../components/progress";
 
-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,7 +1,7 @@
 <template>
     <label class="inline-flex items-start gap-3" :class="interactionVariants[interaction]">
         <input
-            class="mt-0.5 size-5 shrink-0 cursor-inherit accent-current text-primary"
+            class="peer sr-only"
             type="radio"
             :checked="modelValue === value"
             :value="value"
@@ -11,6 +11,14 @@
             @change="$emit('update:modelValue', value)"
         />
 
+        <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="modelValue === value ? 'border-primary bg-background' : 'border-input bg-background'"
+        >
+            <span v-if="modelValue === value" class="size-2 rounded-full bg-primary" />
+        </span>
+
         <span class="flex flex-col gap-0.5">
             <span class="text-sm font-medium">
                 <slot> {{ label }}</slot>
@@ -24,25 +32,9 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import type { ControlInteraction } from "../../components/control.ts";
-import type { RadioValue } from "../../components/radio.ts";
-
-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;
-}>();
+import type { RadioProps, RadioValue } from "../../components/radio";
+
+const { modelValue, value, label, description, name, required = false, disabled = false } = defineProps<RadioProps>();
 
 defineEmits<{
     "update:modelValue": [value: RadioValue];

package/dist/vue/components/range.vue

@@ -1,5 +1,5 @@
 <template>
-    <label class="flex flex-col gap-2" :class="interactionVariants[interaction]">
+    <div class="flex flex-col gap-2" :class="interactionVariants[interaction]">
         <span v-if="label" class="flex items-center justify-between gap-4 text-sm">
             <span class="font-medium"> {{ label }} </span>
 
@@ -8,40 +8,41 @@
             </output>
         </span>
 
-        <input
-            class="h-2 w-full cursor-pointer accent-current text-primary disabled:cursor-not-allowed"
-            type="range"
-            :value="modelValue"
-            :min="min"
-            :max="max"
-            :step="step"
-            :disabled="disabled"
-            @input="$emit('update:modelValue', Number(($event.currentTarget as HTMLInputElement).value))"
-        />
-    </label>
+        <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="disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'"
+            role="slider"
+            :tabindex="disabled ? -1 : 0"
+            :aria-valuemin="min"
+            :aria-valuemax="max"
+            :aria-valuenow="modelValue"
+            :aria-label="label"
+            :aria-disabled="disabled"
+            @pointerdown="onPointerDown"
+            @pointermove="onPointerMove"
+            @pointerup="onPointerUp"
+            @pointercancel="onPointerUp"
+            @keydown="onKeyDown"
+        >
+            <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"
+                :style="{ left: `${percent}%` }"
+            />
+        </div>
+    </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, useTemplateRef } from "vue";
 import type { ControlInteraction } from "../../components/control.ts";
+import type { RangeProps } from "../../components/range";
 
-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>();
 
-defineEmits<{
+const emit = defineEmits<{
     "update:modelValue": [value: number];
 }>();
 
@@ -51,4 +52,73 @@ const interactionVariants: Record<ControlInteraction, string> = {
     disabled: "cursor-not-allowed opacity-50",
     enabled: "",
 };
+
+const track = useTemplateRef("track");
+
+const percent = computed(() => (max > min ? Math.min(100, Math.max(0, ((modelValue - min) / (max - min)) * 100)) : 0));
+
+let dragging = false;
+
+function commit(raw: number) {
+    const decimals = (String(step).split(".")[1] ?? "").length;
+    const snapped = min + Math.round((raw - min) / step) * step;
+    const rounded = Number(snapped.toFixed(decimals));
+    const value = Math.min(max, Math.max(min, rounded));
+
+    if (value !== modelValue) {
+        emit("update:modelValue", value);
+    }
+}
+
+function setValueFromClientX(clientX: number) {
+    if (!track.value) {
+        return;
+    }
+
+    const rect = track.value.getBoundingClientRect();
+    const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
+
+    commit(min + ratio * (max - min));
+}
+
+function onPointerDown(event: PointerEvent) {
+    if (disabled || !track.value) {
+        return;
+    }
+
+    dragging = true;
+    track.value.setPointerCapture(event.pointerId);
+    track.value.focus({ preventScroll: true });
+    setValueFromClientX(event.clientX);
+}
+
+function onPointerMove(event: PointerEvent) {
+    if (dragging) {
+        setValueFromClientX(event.clientX);
+    }
+}
+
+function onPointerUp() {
+    dragging = false;
+}
+
+function onKeyDown(event: KeyboardEvent) {
+    if (disabled) {
+        return;
+    }
+
+    if (event.key === "ArrowRight" || event.key === "ArrowUp") {
+        commit(modelValue + step);
+        event.preventDefault();
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
+        commit(modelValue - step);
+        event.preventDefault();
+    } else if (event.key === "Home") {
+        commit(min);
+        event.preventDefault();
+    } else if (event.key === "End") {
+        commit(max);
+        event.preventDefault();
+    }
+}
 </script>

package/dist/vue/components/rating.vue

@@ -16,30 +16,19 @@
                 :disabled="readonly || disabled"
                 @click="$emit('update:modelValue', value)"
             >
-                <Icon name="star" />
+                <Icon :is="StarIcon" />
             </Button>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
+import StarIcon from "~icons/hugeicons/star";
 import Button from "./button.vue";
 import Icon from "./icon.vue";
-import type { RatingState } from "../../components/rating.ts";
+import type { RatingProps, RatingState } from "../../components/rating";
 
-const {
-    modelValue = 0,
-    max = 5,
-    label = undefined,
-    readonly = false,
-    disabled = false,
-} = defineProps<{
-    modelValue?: number;
-    max?: number;
-    label?: string;
-    readonly?: boolean;
-    disabled?: boolean;
-}>();
+const { modelValue = 0, max = 5, label, readonly = false, disabled = false } = defineProps<RatingProps>();
 
 defineEmits<{
     "update:modelValue": [value: number];
@@ -50,7 +39,7 @@ function state(value: number): RatingState {
 }
 
 const variants: Record<RatingState, string> = {
-    active: "text-amber-400",
-    inactive: "text-neutral-300 dark:text-neutral-700",
+    active: "text-primary",
+    inactive: "text-input",
 };
 </script>

package/dist/vue/components/select.vue

@@ -6,7 +6,7 @@
 
         <input v-if="name" type="hidden" :name="name" :value="modelValue" :required="required" />
 
-        <div ref="container">
+        <div ref="container" class="relative">
             <div
                 ref="trigger"
                 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"
@@ -38,72 +38,66 @@
                     :disabled="disabled"
                     @click.stop="open = !open"
                 >
-                    <Icon name="arrow-down-01" />
+                    <Icon :is="ArrowDownIcon" />
                 </button>
             </div>
-        </div>
 
-        <div
-            ref="dropdown"
-            popover="manual"
-            :id="listboxId"
-            role="listbox"
-            :aria-label="label"
-            class="m-0 max-h-[min(16rem,50vh)] overflow-y-auto rounded-ui border border-border bg-popover p-1 text-popover-foreground shadow-xl"
-            :style="panel"
-        >
-            <Button
-                v-for="option in filtered"
-                :key="option.value"
-                class="w-full"
-                variant="ghost"
-                layout="left"
-                :disabled="option.disabled"
-                role="option"
-                :aria-selected="option.value === modelValue"
-                @click="select(option)"
+            <div
+                ref="dropdown"
+                :popover="popoverSupported ? 'manual' : undefined"
+                :id="listboxId"
+                role="listbox"
+                :aria-label="label"
+                class="m-0 max-h-[min(16rem,50vh)] overflow-y-auto rounded-ui border border-border bg-popover p-1 text-popover-foreground shadow-xl"
+                :class="fallbackClass"
+                :style="popoverSupported ? panel : undefined"
             >
-                <span class="flex w-full items-center justify-between gap-4 text-left">
-                    <slot name="option" :option="option" :selected="option.value === modelValue">
-                        {{ option.label }}
-                    </slot>
-
-                    <Icon v-if="option.value === modelValue" name="tick-02" />
-                </span>
-            </Button>
-
-            <p v-if="filtered.length === 0" class="px-2 py-6 text-center text-sm opacity-60">
-                {{ emptyLabel }}
-            </p>
+                <Button
+                    v-for="option in filtered"
+                    :key="option.value"
+                    class="w-full"
+                    variant="ghost"
+                    layout="left"
+                    :disabled="option.disabled"
+                    role="option"
+                    :aria-selected="option.value === modelValue"
+                    @click="select(option)"
+                >
+                    <span class="flex w-full items-center justify-between gap-4 text-left">
+                        <slot name="option" :option="option" :selected="option.value === modelValue">
+                            {{ option.label }}
+                        </slot>
+
+                        <Icon v-if="option.value === modelValue" :is="TickIcon" />
+                    </span>
+                </Button>
+
+                <p v-if="filtered.length === 0" class="px-2 py-6 text-center text-sm opacity-60">
+                    {{ emptyLabel }}
+                </p>
+            </div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onUnmounted, ref, useId, useTemplateRef, watch } from "vue";
-import type { SelectOption, SelectValue } from "../../components/select.ts";
+import ArrowDownIcon from "~icons/hugeicons/arrow-down-01";
+import TickIcon from "~icons/hugeicons/tick-02";
+import { computed, nextTick, onMounted, onUnmounted, ref, useId, useTemplateRef, watch } from "vue";
+import type { SelectOption, SelectProps, SelectValue } from "../../components/select";
 import Button from "./button.vue";
 import Icon from "./icon.vue";
 
 const {
-    modelValue = undefined,
+    modelValue,
     options,
-    label = undefined,
-    placeholder = undefined,
+    label,
+    placeholder,
     emptyLabel = "No results found",
-    name = undefined,
+    name,
     required = false,
     disabled = false,
-} = defineProps<{
-    modelValue?: SelectValue;
-    options: Array<SelectOption>;
-    label?: string;
-    placeholder?: string;
-    emptyLabel?: string;
-    name?: string;
-    required?: boolean;
-    disabled?: boolean;
-}>();
+} = defineProps<SelectProps>();
 
 const emit = defineEmits<{
     "update:modelValue": [value: SelectValue];
@@ -121,6 +115,8 @@ const dropdown = useTemplateRef("dropdown");
 
 const listboxId = `select-${useId()}`;
 
+const popoverSupported = ref(true);
+
 const selected = computed(() => options.find((option) => option.value === modelValue));
 
 const query = ref(selected.value?.label ?? "");
@@ -133,6 +129,14 @@ const filtered = computed(() => {
     return term === "" ? options : options.filter((option) => option.label.toLowerCase().includes(term));
 });
 
+const fallbackClass = computed(() => {
+    if (popoverSupported.value) {
+        return undefined;
+    }
+
+    return open.value ? "absolute inset-x-0 top-full z-50 mt-2" : "hidden";
+});
+
 function handlePointerDown(event: PointerEvent) {
     const target = event.target as Node;
 
@@ -156,12 +160,13 @@ function updatePanel() {
         return;
     }
 
+    const height = window.visualViewport?.height ?? window.innerHeight;
+    const width = window.visualViewport?.width ?? window.innerWidth;
     const bounds = anchor.getBoundingClientRect();
-    const height = list.offsetHeight;
-    const width = bounds.width;
-    const left = Math.min(Math.max(8, bounds.left), window.innerWidth - width - 8);
-    const top =
-        bounds.bottom + height + 8 <= window.innerHeight ? bounds.bottom + 8 : Math.max(8, bounds.top - height - 8);
+    const listHeight = list.offsetHeight;
+    const listWidth = bounds.width;
+    const left = Math.max(8, Math.min(Math.max(8, bounds.left), width - listWidth - 8));
+    const top = bounds.bottom + listHeight + 8 <= height ? bounds.bottom + 8 : Math.max(8, bounds.top - listHeight - 8);
 
     panel.value = {
         bottom: "auto",
@@ -169,7 +174,7 @@ function updatePanel() {
         position: "fixed",
         right: "auto",
         top: `${top}px`,
-        width: `${width}px`,
+        width: `${listWidth}px`,
     };
 }
 
@@ -186,7 +191,7 @@ watch(open, async (value) => {
         return;
     }
 
-    if (value && !list.matches(":popover-open")) {
+    if (value) {
         query.value = "";
 
         document.addEventListener("pointerdown", handlePointerDown);
@@ -195,31 +200,49 @@ watch(open, async (value) => {
 
         window.addEventListener("scroll", updatePanel, true);
 
-        list.showPopover();
+        window.visualViewport?.addEventListener("resize", updatePanel);
+
+        if (popoverSupported.value && !list.matches(":popover-open")) {
+            list.showPopover();
+        }
 
         await nextTick();
 
         updatePanel();
 
-        search.value?.focus();
-    } else if (!value && list.matches(":popover-open")) {
+        requestAnimationFrame(updatePanel);
+
+        if (document.activeElement !== search.value) {
+            search.value?.focus();
+        }
+    } else {
         document.removeEventListener("pointerdown", handlePointerDown);
 
         window.removeEventListener("resize", updatePanel);
 
         window.removeEventListener("scroll", updatePanel, true);
 
-        list.hidePopover();
+        window.visualViewport?.removeEventListener("resize", updatePanel);
+
+        if (popoverSupported.value && list.matches(":popover-open")) {
+            list.hidePopover();
+        }
 
         query.value = selected.value?.label ?? "";
     }
 });
 
+onMounted(() => {
+    popoverSupported.value = typeof dropdown.value?.showPopover === "function";
+});
+
 onUnmounted(() => {
     document.removeEventListener("pointerdown", handlePointerDown);
 
     window.removeEventListener("resize", updatePanel);
 
     window.removeEventListener("scroll", updatePanel, true);
+
+    window.visualViewport?.removeEventListener("resize", updatePanel);
 });
 </script>

package/dist/vue/components/separator.vue

@@ -9,17 +9,9 @@
 
 <script setup lang="ts">
 import { computed } from "vue";
-import type { DividerVariant, SeparatorOrientation } from "../../components/separator.ts";
+import type { SeparatorOrientation, SeparatorProps } from "../../components/separator";
 
-const {
-    orientation = "horizontal",
-    variant = undefined,
-    decorative = false,
-} = defineProps<{
-    orientation?: SeparatorOrientation;
-    variant?: DividerVariant;
-    decorative?: boolean;
-}>();
+const { orientation = "horizontal", variant, decorative = false } = defineProps<SeparatorProps>();
 
 const selected = computed(() => variant ?? orientation);