@revojs/ui 0.1.58

package/dist/vue/components/navigate.vue

@@ -0,0 +1,30 @@
+<template>
+    <Button
+        is="a"
+        :href="href"
+        font="normal"
+        layout="left"
+        :variant="active ? 'secondary' : 'text'"
+        :icon-prefix="iconPrefix"
+        :icon-suffix="iconSuffix"
+        :label="label"
+    />
+</template>
+
+<script setup lang="ts">
+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;
+}>();
+</script>

package/dist/vue/components/popover.vue

@@ -0,0 +1,123 @@
+<template>
+    <div ref="container" class="inline-flex">
+        <Button
+            variant="outline"
+            :class="triggerClass"
+            :layout="triggerLayout"
+            :disabled="disabled"
+            :popovertarget="id"
+        >
+            <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 border shadow-xl"
+            :class="[
+                config.radius,
+                `border-${config.light.border}`,
+                `bg-${config.light.popover}`,
+                `text-${config.light.popoverForeground}`,
+                `dark:border-${config.dark.border}`,
+                `dark:bg-${config.dark.popover}`,
+                `dark:text-${config.dark.popoverForeground}`,
+                contentClass,
+            ]"
+            :style="position"
+            @toggle="handleToggle"
+        >
+            <slot :open="open" :close="close" :toggle="toggle" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import config from "#config/ui";
+import { ref, useId, useTemplateRef, watchEffect } from "vue";
+import type { ButtonLayout } from "../../components/button.ts";
+import Button from "./button.vue";
+
+const {
+    modelValue = false,
+    triggerLabel = "Open",
+    triggerClass = undefined,
+    triggerLayout = "center",
+    contentClass = "p-4",
+    matchTriggerWidth = false,
+    disabled = false,
+} = defineProps<{
+    modelValue?: boolean;
+    triggerLabel?: string;
+    triggerClass?: string;
+    triggerLayout?: ButtonLayout;
+    contentClass?: string;
+    matchTriggerWidth?: boolean;
+    disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+    "update:modelValue": [value: boolean];
+}>();
+
+const id = `popover-${useId()}`;
+
+const container = useTemplateRef("container");
+
+const popover = useTemplateRef("popover");
+
+const position = ref<Record<string, string>>({});
+
+function open() {
+    popover.value?.showPopover();
+}
+
+function close() {
+    popover.value?.hidePopover();
+}
+
+function toggle() {
+    popover.value?.togglePopover();
+}
+
+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",
+            };
+        }
+    }
+
+    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();
+    }
+});
+
+defineExpose({ open, close, toggle });
+</script>

package/dist/vue/components/progress.vue

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

package/dist/vue/components/radio.vue

@@ -0,0 +1,59 @@
+<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"
+            :class="[`text-${config.light.primary}`, `dark:text-${config.dark.primary}`]"
+            type="radio"
+            :checked="modelValue === value"
+            :value="value"
+            :name="name"
+            :required="required"
+            :disabled="disabled"
+            @change="$emit('update:modelValue', value)"
+        />
+
+        <span class="flex flex-col gap-0.5">
+            <span class="text-sm font-medium">
+                <slot> {{ label }}</slot>
+            </span>
+
+            <span v-if="description" class="text-sm opacity-60">{{ description }}</span>
+        </span>
+    </label>
+</template>
+
+<script setup lang="ts">
+import config from "#config/ui";
+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;
+}>();
+
+defineEmits<{
+    "update:modelValue": [value: RadioValue];
+}>();
+
+const interaction = computed<ControlInteraction>(() => (disabled ? "disabled" : "enabled"));
+
+const interactionVariants: Record<ControlInteraction, string> = {
+    disabled: "cursor-not-allowed opacity-50",
+    enabled: "cursor-pointer",
+};
+</script>

package/dist/vue/components/range.vue

@@ -0,0 +1,56 @@
+<template>
+    <label 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>
+
+            <output class="tabular-nums opacity-60">
+                {{ modelValue }}
+            </output>
+        </span>
+
+        <input
+            class="h-2 w-full cursor-pointer accent-current disabled:cursor-not-allowed"
+            :class="[`text-${config.light.primary}`, `dark:text-${config.dark.primary}`]"
+            type="range"
+            :value="modelValue"
+            :min="min"
+            :max="max"
+            :step="step"
+            :disabled="disabled"
+            @input="$emit('update:modelValue', Number(($event.currentTarget as HTMLInputElement).value))"
+        />
+    </label>
+</template>
+
+<script setup lang="ts">
+import config from "#config/ui";
+import { computed } from "vue";
+import type { ControlInteraction } from "../../components/control.ts";
+
+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;
+}>();
+
+defineEmits<{
+    "update:modelValue": [value: number];
+}>();
+
+const interaction = computed<ControlInteraction>(() => (disabled ? "disabled" : "enabled"));
+
+const interactionVariants: Record<ControlInteraction, string> = {
+    disabled: "cursor-not-allowed opacity-50",
+    enabled: "",
+};
+</script>

package/dist/vue/components/rating.vue

@@ -0,0 +1,56 @@
+<template>
+    <div class="inline-flex flex-col gap-2">
+        <span v-if="label" class="text-sm font-medium">{{ label }}</span>
+
+        <div class="flex items-center" role="radiogroup" :aria-label="label">
+            <Button
+                v-for="value in max"
+                :key="value"
+                class="text-2xl transition-transform hover:scale-110 disabled:hover:scale-100"
+                :class="variants[state(value)]"
+                size="icon"
+                variant="ghost"
+                role="radio"
+                :aria-checked="value === modelValue"
+                :aria-label="`${value} of ${max}`"
+                :disabled="readonly || disabled"
+                @click="$emit('update:modelValue', value)"
+            >
+                <Icon name="star" />
+            </Button>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import Button from "./button.vue";
+import Icon from "./icon.vue";
+import type { RatingState } from "../../components/rating.ts";
+
+const {
+    modelValue = 0,
+    max = 5,
+    label = undefined,
+    readonly = false,
+    disabled = false,
+} = defineProps<{
+    modelValue?: number;
+    max?: number;
+    label?: string;
+    readonly?: boolean;
+    disabled?: boolean;
+}>();
+
+defineEmits<{
+    "update:modelValue": [value: number];
+}>();
+
+function state(value: number): RatingState {
+    return value <= modelValue ? "active" : "inactive";
+}
+
+const variants: Record<RatingState, string> = {
+    active: "text-amber-400",
+    inactive: "text-neutral-300 dark:text-neutral-700",
+};
+</script>

package/dist/vue/components/select.vue

@@ -0,0 +1,99 @@
+<template>
+    <div class="flex flex-col gap-2">
+        <span v-if="label" class="text-sm font-medium">
+            {{ label }}
+        </span>
+
+        <input v-if="name" type="hidden" :name="name" :value="modelValue" :required="required" />
+
+        <Popover
+            v-model="open"
+            class="w-full"
+            content-class="min-w-56 p-1"
+            trigger-class="w-full min-w-48"
+            trigger-layout="left"
+            match-trigger-width
+            :disabled="disabled"
+        >
+            <template #trigger>
+                <span class="min-w-0 flex-1 truncate text-left" :class="valueVariants[valueState]">
+                    <slot name="value" :option="selected">
+                        {{ selected?.label ?? placeholder ?? "Select" }}
+                    </slot>
+                </span>
+
+                <Icon name="arrow-down-01" class="opacity-60" />
+            </template>
+
+            <div role="listbox" :aria-label="label">
+                <Button
+                    v-for="option in options"
+                    :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" name="tick-02" />
+                    </span>
+                </Button>
+            </div>
+        </Popover>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import type { SelectOption, SelectValue, SelectValueState } from "../../components/select.ts";
+import Button from "./button.vue";
+import Icon from "./icon.vue";
+import Popover from "./popover.vue";
+
+const {
+    modelValue = undefined,
+    options,
+    label = undefined,
+    placeholder = undefined,
+    name = undefined,
+    required = false,
+    disabled = false,
+} = defineProps<{
+    modelValue?: SelectValue;
+    options: Array<SelectOption>;
+    label?: string;
+    placeholder?: string;
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+    "update:modelValue": [value: SelectValue];
+}>();
+
+const open = ref(false);
+
+const selected = computed(() => options.find((option) => option.value === modelValue));
+
+const valueState = computed<SelectValueState>(() => (selected.value ? "selected" : "placeholder"));
+
+const valueVariants: Record<SelectValueState, string> = {
+    placeholder: "opacity-60",
+    selected: "",
+};
+
+function select(option: SelectOption) {
+    if (!option.disabled) {
+        emit("update:modelValue", option.value);
+        open.value = false;
+    }
+}
+</script>

package/dist/vue/components/separator.vue

@@ -0,0 +1,31 @@
+<template>
+    <div
+        class="shrink-0"
+        :class="[`bg-${config.light.border}`, `dark:bg-${config.dark.border}`, variants[selected]]"
+        :role="decorative ? 'none' : 'separator'"
+        :aria-orientation="decorative ? undefined : selected"
+    />
+</template>
+
+<script setup lang="ts">
+import config from "#config/ui";
+import { computed } from "vue";
+import type { DividerVariant, SeparatorOrientation } from "../../components/separator.ts";
+
+const {
+    orientation = "horizontal",
+    variant = undefined,
+    decorative = false,
+} = defineProps<{
+    orientation?: SeparatorOrientation;
+    variant?: DividerVariant;
+    decorative?: boolean;
+}>();
+
+const selected = computed(() => variant ?? orientation);
+
+const variants: Record<SeparatorOrientation, string> = {
+    horizontal: "h-px w-full",
+    vertical: "h-full min-h-5 w-px",
+};
+</script>

package/dist/vue/components/sheet.vue

@@ -0,0 +1,71 @@
+<template>
+    <dialog
+        ref="sheet"
+        class="m-0 h-full max-h-none max-w-none border-0 bg-transparent p-0 backdrop:bg-black/50"
+        :class="positions[side]"
+        @close="$emit('update:modelValue', false)"
+        @click="$event.target === $event.currentTarget && ($event.currentTarget as HTMLDialogElement).close()"
+    >
+        <Card :title="title" :description="description" class="h-full w-full shadow-2xl">
+            <template #actions>
+                <Button
+                    size="icon"
+                    variant="ghost"
+                    icon-prefix="multiplication-sign"
+                    :aria-label="closeLabel"
+                    @click="sheet?.close()"
+                />
+            </template>
+
+            <div class="flex-1 overflow-auto">
+                <slot />
+            </div>
+
+            <template v-if="$slots.footer" #footer>
+                <slot name="footer" />
+            </template>
+        </Card>
+    </dialog>
+</template>
+
+<script setup lang="ts">
+import { useTemplateRef, watchEffect } from "vue";
+import type { SheetSide } from "../../components/sheet.ts";
+import Button from "./button.vue";
+import Card from "./card.vue";
+
+const {
+    modelValue = false,
+    side = "right",
+    title = undefined,
+    description = undefined,
+    closeLabel = "Close",
+} = defineProps<{
+    modelValue?: boolean;
+    side?: SheetSide;
+    title?: string;
+    description?: string;
+    closeLabel?: string;
+}>();
+
+defineEmits<{
+    "update:modelValue": [value: boolean];
+}>();
+
+const sheet = useTemplateRef("sheet");
+
+const positions: Record<SheetSide, string> = {
+    top: "inset-x-0 top-0 h-auto w-full max-h-[85vh]",
+    right: "inset-y-0 right-0 w-[min(28rem,90vw)]",
+    bottom: "inset-x-0 bottom-0 h-auto w-full max-h-[85vh]",
+    left: "inset-y-0 left-0 w-[min(28rem,90vw)]",
+};
+
+watchEffect(() => {
+    if (modelValue && !sheet.value?.open) {
+        sheet.value?.showModal();
+    } else if (!modelValue && sheet.value?.open) {
+        sheet.value.close();
+    }
+});
+</script>

package/dist/vue/components/switch.vue

@@ -0,0 +1,72 @@
+<template>
+    <label class="inline-flex items-start gap-3" :class="interactionVariants[interaction]">
+        <input v-if="name" type="hidden" :name="name" :value="modelValue ? 'on' : 'off'" />
+
+        <button
+            class="relative mt-0.5 h-6 w-11 shrink-0 rounded-full transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed"
+            :class="[variants[state], `outline-${config.light.ring}`, `dark:outline-${config.dark.ring}`]"
+            type="button"
+            role="switch"
+            :aria-checked="modelValue"
+            :disabled="disabled"
+            @click="$emit('update:modelValue', !modelValue)"
+        >
+            <span
+                class="block size-5 translate-x-0.5 rounded-full bg-white shadow transition-transform"
+                :class="thumbVariants[state]"
+            />
+        </button>
+
+        <span v-if="label || description || $slots.default" class="flex flex-col gap-0.5">
+            <span class="text-sm font-medium">
+                <slot> {{ label }} </slot>
+            </span>
+
+            <span v-if="description" class="text-sm opacity-60"> {{ description }} </span>
+        </span>
+    </label>
+</template>
+
+<script setup lang="ts">
+import config from "#config/ui";
+import { computed } from "vue";
+import type { ControlInteraction } from "../../components/control.ts";
+import type { SwitchState } from "../../components/switch.ts";
+
+const {
+    modelValue = false,
+    label = undefined,
+    description = undefined,
+    name = undefined,
+    disabled = false,
+} = defineProps<{
+    modelValue?: boolean;
+    label?: string;
+    description?: string;
+    name?: string;
+    disabled?: boolean;
+}>();
+
+defineEmits<{
+    "update:modelValue": [value: boolean];
+}>();
+
+const interaction = computed<ControlInteraction>(() => (disabled ? "disabled" : "enabled"));
+
+const state = computed<SwitchState>(() => (modelValue ? "checked" : "unchecked"));
+
+const interactionVariants: Record<ControlInteraction, string> = {
+    disabled: "cursor-not-allowed opacity-50",
+    enabled: "cursor-pointer",
+};
+
+const thumbVariants: Record<SwitchState, string> = {
+    checked: "translate-x-5",
+    unchecked: "",
+};
+
+const variants: Record<SwitchState, Array<string>> = {
+    checked: [`bg-${config.light.primary}`, `dark:bg-${config.dark.primary}`],
+    unchecked: [`bg-${config.light.input}`, `dark:bg-${config.dark.input}`],
+};
+</script>