@revojs/ui 0.1.58

package/dist/vue/components/button.vue

@@ -0,0 +1,124 @@
+<template>
+    <component
+        :is="is"
+        class="inline-flex cursor-pointer items-center justify-center gap-2 border border-transparent font-[inherit] font-medium leading-none no-underline transition-[background-color,border-color,color,opacity] duration-150 hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:hover:opacity-50"
+        :class="[
+            config.radius,
+            `outline-${config.light.ring}`,
+            `dark:outline-${config.dark.ring}`,
+            fonts[font],
+            layouts[layout],
+            sizes[size],
+            texts[text],
+            variants[variant],
+        ]"
+        :type="attributes.type ?? 'button'"
+        :disabled="disabled"
+    >
+        <Icon v-if="iconPrefix" :name="iconPrefix" />
+
+        <slot>
+            <span v-if="label" class="truncate px-1" :class="labelLayouts[layout]">{{ label }}</span>
+        </slot>
+
+        <Icon v-if="iconSuffix" :name="iconSuffix" />
+    </component>
+</template>
+
+<script setup lang="ts">
+import config from "#config/ui";
+import { useAttrs, type Component } from "vue";
+import type { ButtonFont, ButtonLayout, ButtonSize, ButtonText, ButtonVariant } from "../../components/button.ts";
+import Icon from "./icon.vue";
+
+const {
+    is = "button",
+    iconPrefix = undefined,
+    iconSuffix = undefined,
+    label = undefined,
+    font = "medium",
+    layout = "center",
+    size = "default",
+    text = "sm",
+    variant = "primary",
+    disabled = false,
+} = defineProps<{
+    is?: string | Component;
+    iconPrefix?: string;
+    iconSuffix?: string;
+    label?: string;
+    font?: ButtonFont;
+    layout?: ButtonLayout;
+    size?: ButtonSize;
+    text?: ButtonText;
+    variant?: ButtonVariant;
+    disabled?: boolean;
+}>();
+
+const attributes = useAttrs();
+
+const fonts: Record<ButtonFont, string> = {
+    normal: "font-normal",
+    medium: "font-medium",
+    semibold: "font-semibold",
+};
+
+const layouts: Record<ButtonLayout, string> = {
+    left: "justify-start text-left",
+    center: "justify-center text-center",
+    right: "justify-end text-right",
+};
+
+const labelLayouts: Record<ButtonLayout, string> = {
+    left: "flex-1",
+    center: "",
+    right: "flex-1",
+};
+
+const sizes: Record<ButtonSize, string> = {
+    default: "min-h-10 px-4 py-2",
+    icon: "size-10 shrink-0 p-0",
+};
+
+const texts: Record<ButtonText, string> = {
+    sm: "text-sm",
+    md: "text-base",
+};
+
+const variants: Record<ButtonVariant, Array<string>> = {
+    primary: [
+        `bg-${config.light.primary}`,
+        `text-${config.light.primaryForeground}`,
+        `dark:bg-${config.dark.primary}`,
+        `dark:text-${config.dark.primaryForeground}`,
+    ],
+    secondary: [
+        `bg-${config.light.secondary}`,
+        `text-${config.light.secondaryForeground}`,
+        `dark:bg-${config.dark.secondary}`,
+        `dark:text-${config.dark.secondaryForeground}`,
+    ],
+    outline: [
+        `border-${config.light.border}`,
+        `bg-${config.light.background}`,
+        `text-${config.light.foreground}`,
+        `dark:border-${config.dark.border}`,
+        `dark:bg-${config.dark.background}`,
+        `dark:text-${config.dark.foreground}`,
+    ],
+    ghost: [`text-${config.light.foreground}`, `dark:text-${config.dark.foreground}`],
+    destructive: [
+        `bg-${config.light.destructive}`,
+        `text-${config.light.destructiveForeground}`,
+        `dark:bg-${config.dark.destructive}`,
+        `dark:text-${config.dark.destructiveForeground}`,
+    ],
+    danger: [
+        `bg-${config.light.destructive}`,
+        `text-${config.light.destructiveForeground}`,
+        `dark:bg-${config.dark.destructive}`,
+        `dark:text-${config.dark.destructiveForeground}`,
+    ],
+    text: [`text-${config.light.foreground}`, `dark:text-${config.dark.foreground}`],
+};
+</script>

package/dist/vue/components/card.vue

@@ -0,0 +1,53 @@
+<template>
+    <section
+        class="flex flex-col overflow-hidden border shadow-sm"
+        :class="[
+            config.radius,
+            `border-${config.light.border}`,
+            `bg-${config.light.card}`,
+            `text-${config.light.cardForeground}`,
+            `dark:border-${config.dark.border}`,
+            `dark:bg-${config.dark.card}`,
+            `dark:text-${config.dark.cardForeground}`,
+        ]"
+    >
+        <header
+            v-if="label || title || description || $slots.header || $slots.actions"
+            class="flex items-start justify-between gap-4 border-b p-5"
+            :class="[`border-${config.light.border}`, `dark:border-${config.dark.border}`]"
+        >
+            <slot name="header">
+                <div class="flex flex-col gap-1.5">
+                    <h3 v-if="label || title" class="text-lg font-semibold leading-none">{{ label ?? title }}</h3>
+                    <p v-if="description" class="text-sm opacity-70">{{ description }}</p>
+                </div>
+            </slot>
+
+            <div v-if="$slots.actions" class="flex shrink-0 items-center gap-1">
+                <slot name="actions" />
+            </div>
+        </header>
+
+        <div class="flex flex-1 flex-col gap-4 p-5">
+            <slot />
+        </div>
+
+        <footer v-if="$slots.footer" class="flex items-center gap-3 px-5 pb-5">
+            <slot name="footer" />
+        </footer>
+    </section>
+</template>
+
+<script setup lang="ts">
+import config from "#config/ui";
+
+const {
+    label = undefined,
+    title = undefined,
+    description = undefined,
+} = defineProps<{
+    label?: string;
+    title?: string;
+    description?: string;
+}>();
+</script>

package/dist/vue/components/checkbox.vue

@@ -0,0 +1,54 @@
+<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="checkbox"
+            :checked="modelValue"
+            :name="name"
+            :required="required"
+            :disabled="disabled"
+            @change="$emit('update:modelValue', ($event.currentTarget as HTMLInputElement).checked)"
+        />
+
+        <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";
+
+const {
+    modelValue = false,
+    label = undefined,
+    description = undefined,
+    name = undefined,
+    required = false,
+    disabled = false,
+} = defineProps<{
+    modelValue?: boolean;
+    label?: string;
+    description?: string;
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+}>();
+
+defineEmits<{
+    "update:modelValue": [value: boolean];
+}>();
+
+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/collection.vue

@@ -0,0 +1,51 @@
+<template>
+    <div
+        v-if="items"
+        class="flex w-full flex-col divide-y overflow-hidden border"
+        :class="[
+            config.radius,
+            `divide-${config.light.border}`,
+            `border-${config.light.border}`,
+            `bg-${config.light.card}`,
+            `dark:divide-${config.dark.border}`,
+            `dark:border-${config.dark.border}`,
+            `dark:bg-${config.dark.card}`,
+        ]"
+    >
+        <template v-if="items.length">
+            <div v-for="(item, index) in items" :key="index">
+                <slot :item="item" :index="index" />
+            </div>
+        </template>
+        <div v-else class="flex flex-col items-center p-5 text-sm opacity-60">{{ emptyLabel }}</div>
+    </div>
+    <div v-else class="grid gap-4" :class="columnsClass[columns]">
+        <slot />
+    </div>
+</template>
+
+<script setup generic="T" lang="ts">
+import config from "#config/ui";
+import type { CollectionColumns } from "../../components/collection.ts";
+
+const {
+    items = undefined,
+    columns = 1,
+    emptyLabel = "Nothing found",
+} = defineProps<{
+    items?: Array<T>;
+    columns?: CollectionColumns;
+    emptyLabel?: string;
+}>();
+
+defineSlots<{
+    default: (() => unknown) & ((props: { item: T; index: number }) => unknown);
+}>();
+
+const columnsClass: Record<CollectionColumns, string> = {
+    1: "grid-cols-1",
+    2: "grid-cols-1 sm:grid-cols-2",
+    3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+    4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+};
+</script>

package/dist/vue/components/container.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="mx-auto flex w-full flex-col gap-5 p-5" :class="sizes[size]">
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { ContainerSize } from "../../components/container.ts";
+
+const { size = "5xl" } = defineProps<{
+    size?: ContainerSize;
+}>();
+
+const sizes: Record<ContainerSize, string> = {
+    "3xl": "max-w-3xl",
+    "5xl": "max-w-5xl",
+    "7xl": "max-w-7xl",
+};
+</script>

package/dist/vue/components/counter.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="inline-flex flex-col gap-2">
+        <span v-if="label" class="text-sm font-medium">{{ label }}</span>
+
+        <div
+            class="grid h-10 grid-cols-[2.5rem_minmax(0,1fr)_2.5rem] items-center overflow-hidden border"
+            :class="[config.radius, `border-${config.light.input}`, `dark:border-${config.dark.input}`]"
+        >
+            <Button
+                class="text-lg"
+                size="icon"
+                variant="ghost"
+                icon-prefix="minus-sign"
+                :disabled="disabled || modelValue <= min"
+                aria-label="Decrease"
+                @click="change(-step)"
+            />
+
+            <output class="px-2 text-center tabular-nums">{{ modelValue }}</output>
+
+            <Button
+                class="text-lg"
+                size="icon"
+                variant="ghost"
+                icon-prefix="add-01"
+                :disabled="disabled || modelValue >= max"
+                aria-label="Increase"
+                @click="change(step)"
+            />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import config from "#config/ui";
+import Button from "./button.vue";
+
+const {
+    modelValue = 0,
+    label = undefined,
+    min = -Infinity,
+    max = Infinity,
+    step = 1,
+    disabled = false,
+} = defineProps<{
+    modelValue?: number;
+    label?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+    "update:modelValue": [value: number];
+}>();
+
+function change(amount: number) {
+    emit("update:modelValue", Math.min(max, Math.max(min, modelValue + amount)));
+}
+</script>

package/dist/vue/components/dialog.vue

@@ -0,0 +1,76 @@
+<template>
+    <dialog
+        ref="dialog"
+        class="m-auto w-[min(32rem,calc(100%-2rem))] border-0 bg-transparent p-0 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"
+                />
+            </template>
+            <slot :open="open" :close="close" :toggle="toggle" />
+
+            <template v-if="$slots.footer" #footer>
+                <slot name="footer" />
+            </template>
+        </Card>
+    </dialog>
+</template>
+
+<script setup lang="ts">
+import { useTemplateRef, watchEffect } from "vue";
+import Button from "./button.vue";
+import Card from "./card.vue";
+
+const {
+    modelValue = false,
+    title = undefined,
+    description = undefined,
+    closeLabel = "Close",
+} = defineProps<{
+    modelValue?: boolean;
+    title?: string;
+    description?: string;
+    closeLabel?: string;
+}>();
+
+const emit = defineEmits<{
+    "update:modelValue": [value: boolean];
+}>();
+
+const dialog = useTemplateRef("dialog");
+
+function open() {
+    emit("update:modelValue", true);
+}
+
+function close() {
+    dialog.value?.close();
+    emit("update:modelValue", false);
+}
+
+function toggle() {
+    if (modelValue) {
+        close();
+    } else {
+        open();
+    }
+}
+
+watchEffect(() => {
+    if (modelValue && !dialog.value?.open) {
+        dialog.value?.showModal();
+    } else if (!modelValue && dialog.value?.open) {
+        dialog.value.close();
+    }
+});
+
+defineExpose({ open, close, toggle });
+</script>

package/dist/vue/components/field.vue

@@ -0,0 +1,38 @@
+<template>
+    <fieldset class="flex min-w-0 flex-col gap-2" :disabled="disabled">
+        <legend v-if="label" class="mb-2 text-sm font-medium">
+            {{ label }}<span v-if="required" aria-hidden="true"> *</span>
+        </legend>
+
+        <slot />
+
+        <p
+            v-if="error"
+            class="text-sm"
+            :class="[`text-${config.light.destructive}`, `dark:text-${config.dark.destructive}`]"
+        >
+            {{ error }}
+        </p>
+        <p v-else-if="description" class="text-sm opacity-60">
+            {{ description }}
+        </p>
+    </fieldset>
+</template>
+
+<script setup lang="ts">
+import config from "#config/ui";
+
+const {
+    label = undefined,
+    description = undefined,
+    error = undefined,
+    required = false,
+    disabled = false,
+} = defineProps<{
+    label?: string;
+    description?: string;
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+}>();
+</script>

package/dist/vue/components/heading.vue

@@ -0,0 +1,34 @@
+<template>
+    <component :is="is" class="font-bold text-pretty" :class="[texts[text], layouts[layout]]">
+        <slot> {{ label }} </slot>
+    </component>
+</template>
+
+<script setup lang="ts">
+import type { Component } from "vue";
+import type { HeadingLayout, HeadingText } from "../../components/heading.ts";
+
+const {
+    is = "h2",
+    label = undefined,
+    text = "xl",
+    layout = "left",
+} = defineProps<{
+    is?: string | Component;
+    label?: string;
+    text?: HeadingText;
+    layout?: HeadingLayout;
+}>();
+
+const layouts: Record<HeadingLayout, string> = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right",
+};
+
+const texts: Record<HeadingText, string> = {
+    sm: "text-sm",
+    xl: "text-xl",
+    "3xl": "text-3xl",
+};
+</script>

package/dist/vue/components/icon.vue

@@ -0,0 +1,49 @@
+<template>
+    <span aria-hidden="true" class="block size-[1em] shrink-0">
+        <component :is="icon" 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";
+
+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 });
+    });
+});
+</script>

package/dist/vue/components/input.vue

@@ -0,0 +1,82 @@
+<template>
+    <span
+        class="flex min-h-10 w-full cursor-text items-center gap-2 border px-3 text-sm focus-within:ring-2"
+        :class="[
+            config.radius,
+            `border-${config.light.input}`,
+            `ring-${config.light.ring}`,
+            `dark:border-${config.dark.input}`,
+            `dark:ring-${config.dark.ring}`,
+            interactionVariants[interaction],
+        ]"
+    >
+        <slot name="leading" />
+
+        <Icon v-if="iconPrefix" :name="iconPrefix" />
+
+        <input
+            class="w-full min-w-0 appearance-none bg-transparent py-2 outline-none placeholder:opacity-50"
+            :value="modelValue"
+            :type="type"
+            :name="name"
+            :spellcheck="spellcheck"
+            :placeholder="placeholder"
+            :required="required"
+            :readonly="readonly"
+            :disabled="disabled"
+            @input="input"
+        />
+
+        <Icon v-if="iconSuffix" :name="iconSuffix" />
+
+        <slot name="trailing" />
+    </span>
+</template>
+
+<script setup lang="ts">
+import config from "#config/ui";
+import { computed } from "vue";
+import type { ControlInteraction } from "../../components/control.ts";
+import Icon from "./icon.vue";
+
+const {
+    modelValue = undefined,
+    type = "text",
+    iconPrefix = undefined,
+    iconSuffix = undefined,
+    placeholder = undefined,
+    name = undefined,
+    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;
+}>();
+
+const emit = defineEmits<{
+    "update:modelValue": [value: string | number];
+}>();
+
+const interaction = computed<ControlInteraction>(() => (disabled ? "disabled" : "enabled"));
+
+const interactionVariants: Record<ControlInteraction, string> = {
+    disabled: "cursor-not-allowed opacity-50",
+    enabled: "",
+};
+
+function input(event: Event) {
+    const value = (event.currentTarget as HTMLInputElement).value;
+
+    emit("update:modelValue", type === "number" ? Number(value) : value);
+}
+</script>

package/dist/vue/components/link.vue

@@ -0,0 +1,33 @@
+<template>
+    <component
+        :is="is"
+        class="cursor-pointer underline-offset-4 transition-colors hover:underline"
+        :class="variants[variant]"
+        :href="href"
+    >
+        <slot>{{ label }}</slot>
+    </component>
+</template>
+
+<script setup lang="ts">
+import config from "#config/ui";
+import type { Component } from "vue";
+import type { LinkVariant } from "../../components/link.ts";
+
+const {
+    is = "a",
+    href = undefined,
+    label = undefined,
+    variant = "primary",
+} = defineProps<{
+    is?: string | Component;
+    href?: string;
+    label?: string;
+    variant?: LinkVariant;
+}>();
+
+const variants: Record<LinkVariant, Array<string>> = {
+    primary: [`text-${config.light.foreground}`, `dark:text-${config.dark.foreground}`],
+    muted: [`text-${config.light.mutedForeground}`, `dark:text-${config.dark.mutedForeground}`],
+};
+</script>