@brumaombra/ui-vintage 0.6.8 → 0.7.3

package/src/components/message-toast/MessageToast.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { AlertCircleIcon, Cancel01Icon, CheckmarkCircle02Icon, InformationCircleIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/vue";
+import { computed } from "vue";
+import { getUiVintageRuntimeMessage } from "../../lib/i18n";
+import { Button } from "../ui/button";
+import { closeMessageToast, messageToastState } from "./message-toast-state";
+
+// Current toast data
+const currentToast = computed(() => messageToastState.current);
+
+// Localized dismiss label resolved from bundled library messages
+const closeAriaLabel = computed(() => getUiVintageRuntimeMessage("uiVintage.buttons.close", "Close"));
+
+// Determine toast type for styling and icon selection
+const toastType = computed(() => currentToast.value?.type ?? "success");
+
+// Resolved icon based on toast type
+const toastIcon = computed(() => {
+    if (toastType.value === "success") return CheckmarkCircle02Icon;
+    return toastType.value === "info" ? InformationCircleIcon : AlertCircleIcon;
+});
+
+// Resolved icon color classes based on toast type
+const toastIconClasses = computed(() => {
+    if (toastType.value === "error") return "text-red-600 dark:text-red-400";
+    if (toastType.value === "warning") return "text-amber-600 dark:text-amber-400";
+    if (toastType.value === "info") return "text-blue-600 dark:text-blue-400";
+    return "text-green-600 dark:text-green-400";
+});
+
+// Resolved aria-live politeness based on toast type
+const toastAriaLive = computed(() => {
+    if (toastType.value === "error" || toastType.value === "warning") return "assertive";
+    return "polite";
+});
+</script>
+
+<template>
+    <Transition name="toast">
+        <div v-if="messageToastState.current && messageToastState.isOpen" class="fixed inset-x-3 bottom-3 z-[60] rounded border border-border bg-card p-4 text-card-foreground transition-colors duration-300 ease-in-out sm:inset-x-auto sm:right-6 sm:bottom-6 sm:max-w-[350px] sm:min-w-[250px]" role="alert" :aria-live="toastAriaLive" aria-atomic="true">
+            <div class="flex items-center gap-4">
+                <!-- Leading type icon -->
+                <HugeiconsIcon :icon="toastIcon" class="size-5" :class="toastIconClasses" />
+
+                <!-- Message text -->
+                <p class="m-0 flex-1 text-sm font-normal leading-5">
+                    {{ currentToast?.message }}
+                </p>
+
+                <!-- Dismiss button -->
+                <Button variant="ghost" size="icon-sm" class="-me-1 h-auto min-h-0 w-auto p-0 opacity-70 hover:opacity-100" :aria-label="closeAriaLabel" @click="closeMessageToast">
+                    <HugeiconsIcon :icon="Cancel01Icon" class="size-4" />
+                </Button>
+            </div>
+        </div>
+    </Transition>
+</template>
+
+<style scoped>
+.toast-enter-active,
+.toast-leave-active {
+    transition: all 0.3s ease-in-out;
+}
+
+.toast-enter-from {
+    transform: translateY(100%);
+    opacity: 0;
+}
+
+.toast-leave-to {
+    transform: translateY(8px);
+    opacity: 0;
+}
+</style>

package/src/components/message-toast/index.ts

@@ -0,0 +1,9 @@
+export {
+    closeMessageToast,
+    messageToastState,
+    showMessageToast
+} from "./message-toast-state";
+export type {
+    MessageToastType,
+    ShowMessageToastOptions
+} from "./message-toast-state";

package/src/components/message-toast/message-toast-state.ts

@@ -0,0 +1,167 @@
+import { h, reactive, render } from "vue";
+
+export type MessageToastType = "success" | "info" | "warning" | "error";
+
+export interface ShowMessageToastOptions {
+    message: string;
+    type?: MessageToastType;
+    duration?: number;
+}
+
+interface MessageToastContent {
+    message: string;
+    type: MessageToastType;
+}
+
+interface MessageToastState {
+    current: MessageToastContent | null;
+    isOpen: boolean;
+}
+
+const TOAST_CLOSE_DURATION_MS = 300;
+const DEFAULT_TOAST_DURATION_MS = 5000;
+const MESSAGE_TOAST_ROOT_ID = "ui-vintage-message-toast-root";
+
+let dismissTimer: ReturnType<typeof setTimeout> | null = null;
+let clearTimer: ReturnType<typeof setTimeout> | null = null;
+let messageToastMountPromise: Promise<void> | null = null;
+let openFrame: number | null = null;
+let activeToastId = 0;
+
+// Shared message toast state
+export const messageToastState: MessageToastState = reactive({
+    current: null,
+    isOpen: false
+});
+
+// Mount the toast once on demand
+const ensureMessageToastMounted = () => {
+    // Skip mounting during SSR
+    if (typeof document === "undefined") {
+        return Promise.resolve();
+    }
+
+    // Reuse the existing mount root
+    const existingRoot = document.getElementById(MESSAGE_TOAST_ROOT_ID);
+    if (existingRoot) {
+        return Promise.resolve();
+    }
+
+    // Reuse the in-flight mount
+    if (messageToastMountPromise) {
+        return messageToastMountPromise;
+    }
+
+    // Start the lazy mount
+    messageToastMountPromise = (async () => {
+        // Load the component only when needed
+        const { default: MessageToast } = await import("./MessageToast.vue");
+
+        // Guard against a concurrent mount
+        if (document.getElementById(MESSAGE_TOAST_ROOT_ID)) {
+            return;
+        }
+
+        // Create the host element and render the component
+        const container = document.createElement("div");
+        container.id = MESSAGE_TOAST_ROOT_ID;
+        document.body.appendChild(container);
+        render(h(MessageToast), container);
+    })().finally(() => {
+        messageToastMountPromise = null;
+    });
+
+    // Let callers await the mount
+    return messageToastMountPromise;
+};
+
+// Clear active timers before updating toast state
+const clearMessageToastTimers = () => {
+    // Clear any pending auto-dismiss timer
+    if (dismissTimer) {
+        clearTimeout(dismissTimer);
+        dismissTimer = null;
+    }
+
+    // Clear any pending clear timer from a previous toast
+    if (clearTimer) {
+        clearTimeout(clearTimer);
+        clearTimer = null;
+    }
+
+    // Clear any pending open frame from a previous toast
+    if (openFrame !== null && typeof cancelAnimationFrame !== "undefined") {
+        cancelAnimationFrame(openFrame);
+        openFrame = null;
+    }
+};
+
+// Clear the current toast after the leave transition
+const clearCurrentMessageToast = () => {
+    messageToastState.current = null;
+};
+
+// Close the toast after the leave transition
+const scheduleCloseMessageToast = () => {
+    // Skip if there's no active toast
+    if (!messageToastState.current || !messageToastState.isOpen) {
+        return;
+    }
+
+    // Start the close transition
+    messageToastState.isOpen = false;
+    clearTimer = setTimeout(() => {
+        clearTimer = null;
+        clearCurrentMessageToast();
+    }, TOAST_CLOSE_DURATION_MS);
+};
+
+// Dismiss the active toast
+export const closeMessageToast = () => {
+    clearMessageToastTimers();
+    scheduleCloseMessageToast();
+};
+
+// Show a message toast and optionally auto-dismiss it
+export const showMessageToast = (options: ShowMessageToastOptions) => {
+    clearMessageToastTimers();
+    activeToastId += 1;
+    const toastId = activeToastId;
+    const duration = options.duration ?? DEFAULT_TOAST_DURATION_MS;
+
+    // Update the toast state while keeping the shell closed until the renderer is mounted
+    messageToastState.current = {
+        message: options.message,
+        type: options.type ?? "success"
+    };
+    messageToastState.isOpen = false;
+
+    // Mount first so the initial visible transition can run after the component exists
+    void ensureMessageToastMounted().then(() => {
+        // Guard against a toast change during the async mount
+        if (toastId !== activeToastId || !messageToastState.current || typeof requestAnimationFrame === "undefined") {
+            return;
+        }
+
+        // Use requestAnimationFrame to ensure the DOM updates before starting the open transition
+        openFrame = requestAnimationFrame(() => {
+            openFrame = null;
+
+            // Guard against a toast change before the frame
+            if (toastId !== activeToastId || !messageToastState.current) {
+                return;
+            }
+
+            // Start the open transition after the renderer is present
+            messageToastState.isOpen = true;
+
+            // Auto-dismiss the toast after the specified duration
+            if (duration > 0) {
+                dismissTimer = setTimeout(() => {
+                    dismissTimer = null;
+                    scheduleCloseMessageToast();
+                }, duration);
+            }
+        });
+    });
+};

package/src/components/page-header/PageHeader.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { Comment, Text, computed, useSlots, type VNode } from 'vue';
+
+// Props
+const props = defineProps({
+    title: { type: String, required: true },
+    headingLevel: { type: Number, default: 1 },
+    size: { type: String, default: 'large', validator: (value: unknown) => ['small', 'medium', 'large'].includes(String(value)) }
+});
+
+const slots = useSlots();
+
+// Check if there is content in the default slot
+const hasSlotContent = computed(() => {
+    if (!slots.default) return false;
+
+    // Check if the slot has any non-empty content
+    return slots.default({}).some((vnode: VNode) => {
+        if (vnode.type === Comment) return false;
+        if (vnode.type === Text && typeof vnode.children === 'string' && !vnode.children.trim()) return false;
+        return true;
+    });
+});
+
+// Get size classes based on size prop
+const getSizeClasses = (size: string) => {
+    const baseClasses = 'font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)]';
+
+    // Return classes based on size
+    switch (size) {
+        case 'small':
+            return `${baseClasses} text-base md:text-xl`;
+        case 'medium':
+            return `${baseClasses} text-lg md:text-2xl`;
+        case 'large':
+        default:
+            return `${baseClasses} text-xl md:text-3xl`;
+    }
+};
+</script>
+
+<template>
+    <div class="flex flex-col gap-3 mb-6 sm:flex-row sm:justify-between sm:items-center sm:min-h-12 sm:gap-0">
+        <!-- Title -->
+        <component :is="`h${headingLevel}`" :class="getSizeClasses(props.size)">{{ props.title }}</component>
+
+        <!-- Right section -->
+        <div v-if="hasSlotContent" class="w-full sm:w-auto">
+            <slot />
+        </div>
+    </div>
+</template>

package/src/components/page-header/index.ts

@@ -0,0 +1,2 @@
+export { default } from './PageHeader.vue';
+export { default as PageHeader } from './PageHeader.vue';

package/src/components/progress-component/ProgressComponent.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { Progress } from '../ui/progress';
+
+// Props
+const props = defineProps({
+    title: { type: String, required: true },
+    bottomLeftLabel: { type: String, default: '' },
+    bottomRightLabel: { type: String, default: '' },
+    value: { type: Number, required: true },
+    max: { type: Number, required: true }
+});
+</script>
+
+<template>
+    <div class="space-y-3">
+        <!-- Header with icon and label -->
+        <div class="flex items-center justify-between">
+            <!-- Title of the progress bar -->
+            <span class="text-sm font-semibold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)]">
+                {{ props.title }}
+            </span>
+
+            <!-- Current value / max -->
+            <span class="text-sm font-semibold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)]">
+                {{ props.value }} / {{ props.max }}
+            </span>
+        </div>
+
+        <!-- Progress bar -->
+        <Progress :model-value="props.value" :max="props.max" />
+
+        <!-- Bottom labels -->
+        <div v-if="props.bottomLeftLabel || props.bottomRightLabel" class="flex items-center justify-between text-xs">
+            <!-- Bottom left label -->
+            <span v-if="props.bottomLeftLabel" class="text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]">
+                {{ props.bottomLeftLabel }}
+            </span>
+
+            <!-- Bottom right label -->
+            <span v-if="props.bottomRightLabel" class="text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]">
+                {{ props.bottomRightLabel }}
+            </span>
+        </div>
+    </div>
+</template>

package/{dist/components/progress-component/index.d.ts → src/components/progress-component/index.ts}

@@ -1,2 +1,2 @@
 export { default } from './ProgressComponent.vue';
-export { default as ProgressComponent } from './ProgressComponent.vue';
+export { default as ProgressComponent } from './ProgressComponent.vue';

package/src/components/single-value-card/SingleValueCard.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { HugeiconsIcon } from "@hugeicons/vue";
+import { Card, CardContent } from "../ui/card";
+
+// Props
+const props = defineProps({
+    value: { type: [String, Number], required: true },
+    label: { type: String, required: true },
+    icon: { type: Object, required: true },
+    valueColor: { type: String, default: "default", validator: (value: unknown) => ["default", "green", "red", "gray"].includes(String(value)) }
+});
+
+// Value classes
+const valueClass = computed(() => {
+    switch (props.valueColor) {
+        case "green":
+            return "text-green-600 dark:text-green-400";
+        case "red":
+            return "text-red-600 dark:text-red-400";
+        case "gray":
+            return "text-gray-600 dark:text-gray-400";
+        default:
+            return "text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)]";
+    }
+});
+</script>
+
+<template>
+    <Card class="flex-row items-center !p-4">
+        <CardContent class="!p-0 gap-0 flex-row items-center">
+            <!-- Icon -->
+            <Card color="gray" class="mr-4 flex h-12 w-12 flex-shrink-0 items-center justify-center !p-0">
+                <HugeiconsIcon :icon="props.icon" class="size-5" />
+            </Card>
+
+            <!-- Content -->
+            <div class="flex flex-col">
+                <!-- Label -->
+                <span class="mb-1 text-xs font-semibold text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]">
+                    {{ props.label }}
+                </span>
+
+                <!-- Value -->
+                <span :class="['text-2xl md:text-xl font-bold', valueClass]">
+                    {{ props.value }}
+                </span>
+            </div>
+        </CardContent>
+    </Card>
+</template>

package/{dist/components/single-value-card/index.d.ts → src/components/single-value-card/index.ts}

@@ -1,2 +1,2 @@
 export { default } from './SingleValueCard.vue';
-export { default as SingleValueCard } from './SingleValueCard.vue';
+export { default as SingleValueCard } from './SingleValueCard.vue';

package/src/components/slider-form-component/SliderFormComponent.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { Card } from "../ui/card";
+import { Slider } from "../ui/slider";
+
+interface SliderFormComponentProps {
+    id?: string;
+    label: string;
+    description?: string;
+    modelValue: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    valueText?: string;
+}
+
+// Props
+const props = withDefaults(defineProps<SliderFormComponentProps>(), {
+    id: undefined,
+    description: "",
+    min: 0,
+    max: 100,
+    step: 1,
+    valueText: ""
+});
+
+// Emits
+const emits = defineEmits<{
+    (e: "update:modelValue", value: number): void;
+}>();
+
+const sliderValue = computed(() => [props.modelValue]);
+const resolvedValueText = computed(() => props.valueText || String(props.modelValue));
+
+// Emit the first slider value back to the parent
+const handleUpdateModelValue = (value?: number[]) => {
+    emits("update:modelValue", value?.[0] ?? props.min);
+};
+</script>
+
+<template>
+    <Card class="space-y-3 px-4 py-4">
+        <!-- Slider header -->
+        <div class="flex items-center justify-between gap-3">
+            <!-- Label and description block -->
+            <div class="space-y-2">
+                <div class="text-sm font-semibold">
+                    {{ props.label }}
+                </div>
+                <div v-if="props.description" class="text-xs text-muted-foreground">
+                    {{ props.description }}
+                </div>
+            </div>
+
+            <!-- Current slider value display -->
+            <span class="rounded border border-border bg-background px-2 py-1 text-xs font-semibold">
+                {{ resolvedValueText }}
+            </span>
+        </div>
+
+        <!-- Slider control -->
+        <Slider
+            :id="props.id"
+            :model-value="sliderValue"
+            :min="props.min"
+            :max="props.max"
+            :step="props.step"
+            @update:model-value="handleUpdateModelValue"
+        />
+    </Card>
+</template>

package/src/components/slider-form-component/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./SliderFormComponent.vue";
+export { default as SliderFormComponent } from "./SliderFormComponent.vue";

package/src/components/switch-form-component/SwitchFormComponent.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { Card } from "../ui/card";
+import { Switch } from "../ui/switch";
+
+interface SwitchFormComponentProps {
+    id: string;
+    label: string;
+    description: string;
+    modelValue: boolean;
+}
+
+// Props
+const props = defineProps<SwitchFormComponentProps>();
+
+// Emits
+const emits = defineEmits<{
+    (e: "update:modelValue", value: boolean): void;
+}>();
+</script>
+
+<template>
+    <Card class="flex flex-col gap-2 sm:!gap-3 px-4 py-3">
+        <!-- Switch label and control -->
+        <div class="flex items-center justify-between gap-4">
+            <!-- Switch label -->
+            <div class="text-sm font-semibold">
+                {{ props.label }}
+            </div>
+
+            <!-- Switch control -->
+            <Switch :id="props.id" :model-value="props.modelValue" @update:model-value="emits('update:modelValue', $event)" />
+        </div>
+
+        <!-- Description -->
+        <div class="text-xs text-muted-foreground">
+            {{ props.description }}
+        </div>
+    </Card>
+</template>

package/src/components/switch-form-component/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./SwitchFormComponent.vue";
+export { default as SwitchFormComponent } from "./SwitchFormComponent.vue";

package/src/components/text-link/TextLink.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { Component, PropType } from 'vue';
+
+// Props
+const props = defineProps({
+    to: { type: String, required: true },
+    text: { type: String, required: true },
+    linkComponent: { type: [String, Object] as PropType<Component | string>, default: 'a' }
+});
+
+// Emits
+const emits = defineEmits(['click']);
+
+// Get link props based on the type of link component
+const getLinkProps = () => {
+    if (props.linkComponent === 'a') {
+        return { href: props.to };
+    } else {
+        return { to: props.to };
+    }
+};
+
+// Handle click
+const handleClick = (event: MouseEvent) => {
+    emits('click', event);
+};
+</script>
+
+<template>
+    <component :is="props.linkComponent" v-bind="getLinkProps()" class="cursor-pointer font-semibold text-[var(--text-primary-light)] hover:underline dark:text-[var(--text-primary-dark)]" @click="handleClick">
+        {{ props.text }}
+    </component>
+</template>

package/src/components/text-link/index.ts

@@ -0,0 +1,2 @@
+export { default } from './TextLink.vue';
+export { default as TextLink } from './TextLink.vue';