@brumaombra/ui-vintage 0.6.8 → 0.7.3

package/src/components/blog/SocialShareSidebar.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Facebook01Icon, Linkedin01Icon, NewTwitterIcon, Share08Icon, TelegramIcon, WhatsappIcon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { Card, CardContent } from '../ui/card';
+
+// Props
+const props = defineProps({
+    title: { type: String, required: true },
+    url: { type: String, required: true }
+});
+
+const { t } = useI18n();
+
+// Social platforms config
+const socialPlatforms = computed(() => {
+    const encodedUrl = encodeURIComponent(props.url);
+    const encodedTitle = encodeURIComponent(props.title);
+
+    return [{
+        name: 'facebook',
+        url: `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`,
+        icon: Facebook01Icon,
+        color: 'bg-blue-700 hover:bg-blue-800',
+        label: t('uiVintage.blog.share.facebook')
+    }, {
+        name: 'twitter',
+        url: `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedTitle}`,
+        icon: NewTwitterIcon,
+        color: 'bg-black hover:bg-gray-800',
+        label: t('uiVintage.blog.share.x')
+    }, {
+        name: 'whatsapp',
+        url: `https://api.whatsapp.com/send?text=${encodedTitle}%20${encodedUrl}`,
+        icon: WhatsappIcon,
+        color: 'bg-green-500 hover:bg-green-600',
+        label: t('uiVintage.blog.share.whatsapp')
+    }, {
+        name: 'linkedin',
+        url: `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`,
+        icon: Linkedin01Icon,
+        color: 'bg-blue-700 hover:bg-blue-800',
+        label: t('uiVintage.blog.share.linkedin')
+    }, {
+        name: 'telegram',
+        url: `https://t.me/share/url?url=${encodedUrl}&text=${encodedTitle}`,
+        icon: TelegramIcon,
+        color: 'bg-blue-400 hover:bg-blue-500',
+        label: t('uiVintage.blog.share.telegram')
+    }];
+});
+</script>
+
+<template>
+    <!-- Desktop sidebar on the right -->
+    <div class="fixed right-[calc(50%-600px)] top-[140px] z-10 hidden xl:block">
+        <Card class="!p-5 flex flex-col space-y-4 items-center">
+            <CardContent class="!p-0 gap-4 items-center">
+                <!-- Share icon -->
+                <HugeiconsIcon :icon="Share08Icon" class="size-5 text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] mb-2" />
+
+                <!-- Social share links (desktop) -->
+                <template v-for="platform in socialPlatforms" :key="platform.name">
+                    <NuxtLink :to="platform.url"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        :aria-label="platform.label"
+                        :class="['w-10 h-10 rounded flex items-center justify-center text-white transition-all duration-200 hover:opacity-80 hover:scale-105', platform.color]">
+                        <HugeiconsIcon :icon="platform.icon" class="size-4" />
+                    </NuxtLink>
+                </template>
+            </CardContent>
+        </Card>
+    </div>
+
+    <!-- Mobile view (floating bar at bottom) -->
+    <div class="fixed bottom-4 left-1/2 z-10 -translate-x-1/2 xl:hidden">
+        <Card class="!p-3 w-fit">
+            <CardContent class="!flex-row !p-0 items-center justify-center gap-3">
+                <!-- Social share links (mobile) -->
+                <template v-for="platform in socialPlatforms" :key="platform.name">
+                    <NuxtLink :to="platform.url"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        :aria-label="platform.label"
+                        :class="['w-10 h-10 rounded flex items-center justify-center text-white transition-all duration-200 hover:opacity-80 hover:scale-105', platform.color]">
+                        <HugeiconsIcon :icon="platform.icon" class="size-4" />
+                    </NuxtLink>
+                </template>
+            </CardContent>
+        </Card>
+    </div>
+</template>

package/src/components/blog/TableOfContents.vue

@@ -0,0 +1,114 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ArrowDown01Icon, Bookmark01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { Card, CardContent } from '../ui/card';
+
+// Props
+const props = defineProps({
+    content: { type: Object, required: true }
+});
+
+const { t } = useI18n();
+const isExpanded = ref(false);
+const contentBodyRef = ref(null);
+
+// Create the headings list
+const headings = computed(() => {
+    const tocLinks = props.content?.body?.toc?.links || props.content?.toc?.links || [];
+
+    // Recursive function to flatten the nested links
+    const flattenLinks = links => {
+        return links.flatMap(link => {
+            // Extract the current heading
+            const currentHeading = {
+                id: link.id,
+                text: link.text,
+                level: link.depth
+            };
+
+            // Recursively flatten the children links
+            const children = link.children?.length ? flattenLinks(link.children) : [];
+            return [currentHeading, ...children];
+        });
+    };
+
+    // Return the flattened list of headings
+    return flattenLinks(tocLinks).filter(heading => heading.id && heading.text && heading.level >= 2 && heading.level <= 3);
+});
+
+// Smooth scroll to heading
+const scrollToHeading = id => {
+    const element = document.getElementById(id);
+    if (element) {
+        element.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start',
+            inline: 'nearest'
+        });
+    }
+};
+
+// Toggle expanded state
+const toggleExpanded = () => {
+    isExpanded.value = !isExpanded.value;
+};
+
+// Get the current content height for the expand/collapse animation
+const contentHeight = computed(() => {
+    return contentBodyRef.value?.scrollHeight ?? 0;
+});
+
+// Get classes for heading button
+const getHeadingButtonClasses = heading => {
+    // Base classes for all titles
+    const baseClasses = 'block w-full text-left px-0 py-2 md:px-3 md:py-2 rounded transition-all duration-200 hover:bg-[var(--bg-selected-light)] dark:hover:bg-[var(--bg-selected-dark)] cursor-pointer';
+
+    // Add classes based on heading level
+    let levelClasses = '';
+    if (heading.level === 2) {
+        levelClasses = 'text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] font-semibold text-xs md:text-sm';
+    } else {
+        levelClasses = 'text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] !pl-6 text-xs md:text-sm';
+    }
+
+    // Return combined classes
+    return [baseClasses, levelClasses];
+};
+</script>
+
+<template>
+    <Card v-if="headings.length > 0" class="!p-0 overflow-hidden">
+        <CardContent class="!p-0 gap-0">
+            <!-- Header -->
+            <button @click="toggleExpanded" class="flex items-center justify-between w-full p-5 gap-4 text-left cursor-pointer">
+                <div class="flex items-center gap-3 min-w-0">
+                    <!-- Icon -->
+                    <div class="flex items-center justify-center w-8 h-8 md:!w-10 md:!h-10 bg-[var(--bg-card-light)] dark:bg-[var(--bg-card-dark)] border border-[var(--border-light)] dark:border-[var(--border-dark)] rounded-none flex-shrink-0">
+                        <HugeiconsIcon :icon="Bookmark01Icon" class="size-4 text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]" />
+                    </div>
+
+                    <!-- Title -->
+                    <span class="text-sm md:!text-base font-semibold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)]">
+                        {{ t('uiVintage.blog.tableOfContents') }}
+                    </span>
+                </div>
+
+                <!-- Expand/Collapse icon -->
+                <div class="flex-shrink-0 w-8 h-8 flex items-center justify-center rounded bg-[var(--bg-card-light)] dark:bg-[var(--bg-card-dark)] border border-[var(--border-light)] dark:border-[var(--border-dark)] transition-transform duration-300" :class="{ 'rotate-180': isExpanded }">
+                    <HugeiconsIcon :icon="ArrowDown01Icon" class="size-4 text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]" />
+                </div>
+            </button>
+
+            <!-- Table of contents list with smooth transition -->
+            <div class="overflow-hidden transition-[height,opacity] duration-300 ease-in-out" :style="{ height: isExpanded ? `${contentHeight}px` : '0px' }" :class="isExpanded ? 'opacity-100' : 'opacity-0'">
+                <nav ref="contentBodyRef" class="px-5 pb-5 space-y-1">
+                    <button v-for="heading in headings" :key="heading.id" @click="scrollToHeading(heading.id)" :class="getHeadingButtonClasses(heading)">
+                        {{ heading.text }}
+                    </button>
+                </nav>
+            </div>
+        </CardContent>
+    </Card>
+</template>

package/{dist/components/blog/index.d.ts → src/components/blog/index.ts}

@@ -10,4 +10,4 @@ export { default as HeaderCarousel } from './HeaderCarousel.vue';
 export { default as PostCard } from './PostCard.vue';
 export { default as PostsList } from './PostsList.vue';
 export { default as SocialShareSidebar } from './SocialShareSidebar.vue';
-export { default as TableOfContents } from './TableOfContents.vue';
+export { default as TableOfContents } from './TableOfContents.vue';

package/src/components/busy-indicator/BusyIndicator.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { Busy } from "../ui/busy";
+import { busyIndicatorState } from "./busy-indicator-state";
+</script>
+
+<template>
+    <!-- Busy overlay -->
+    <Busy
+        :show="busyIndicatorState.show"
+        :label="busyIndicatorState.label"
+        :class="busyIndicatorState.class"
+        :overlay-class="busyIndicatorState.overlayClass"
+    />
+</template>

package/src/components/busy-indicator/busy-indicator-state.ts

@@ -0,0 +1,88 @@
+import { h, reactive, render } from "vue";
+import type { HTMLAttributes } from "vue";
+
+export interface SetBusyOptions {
+    label?: string;
+    class?: HTMLAttributes["class"];
+    overlayClass?: HTMLAttributes["class"];
+}
+
+interface BusyIndicatorState {
+    show: boolean;
+    label: string;
+    class: HTMLAttributes["class"];
+    overlayClass: HTMLAttributes["class"];
+}
+
+const BUSY_INDICATOR_ROOT_ID = "ui-vintage-busy-indicator-root";
+
+let busyIndicatorMountPromise: Promise<void> | null = null;
+
+// Shared busy state
+export const busyIndicatorState: BusyIndicatorState = reactive({
+    show: false,
+    label: "Loading...",
+    class: undefined,
+    overlayClass: undefined
+});
+
+// Mount the busy indicator once on demand
+const ensureBusyIndicatorMounted = () => {
+    // Skip mounting during SSR
+    if (typeof document === "undefined") {
+        return Promise.resolve();
+    }
+
+    // Reuse the existing mount root
+    const existingRoot = document.getElementById(BUSY_INDICATOR_ROOT_ID);
+    if (existingRoot) {
+        return Promise.resolve();
+    }
+
+    // Reuse the in-flight mount
+    if (busyIndicatorMountPromise) {
+        return busyIndicatorMountPromise;
+    }
+
+    // Start the lazy mount
+    busyIndicatorMountPromise = (async () => {
+        // Load the component only when needed
+        const { default: BusyIndicator } = await import("./BusyIndicator.vue");
+
+        // Guard against a concurrent mount
+        if (document.getElementById(BUSY_INDICATOR_ROOT_ID)) {
+            return;
+        }
+
+        // Create the host element and render the component
+        const container = document.createElement("div");
+        container.id = BUSY_INDICATOR_ROOT_ID;
+        document.body.appendChild(container);
+        render(h(BusyIndicator), container);
+    })().finally(() => {
+        busyIndicatorMountPromise = null;
+    });
+
+    // Let callers await the mount
+    return busyIndicatorMountPromise;
+};
+
+// Toggle the global busy overlay
+export const setBusy = (show: boolean, options: SetBusyOptions = {}) => {
+    // Prepare the overlay before showing it
+    if (show) {
+        busyIndicatorState.label = options.label ?? busyIndicatorState.label ?? "Loading...";
+        busyIndicatorState.class = options.class;
+        busyIndicatorState.overlayClass = options.overlayClass;
+        void ensureBusyIndicatorMounted();
+    }
+
+    // Toggle the overlay visibility
+    busyIndicatorState.show = show;
+
+    // Reset transient styling after hiding
+    if (!show) {
+        busyIndicatorState.class = undefined;
+        busyIndicatorState.overlayClass = undefined;
+    }
+};

package/src/components/busy-indicator/index.ts

@@ -0,0 +1,3 @@
+export { default as BusyIndicator } from "./BusyIndicator.vue";
+export { busyIndicatorState, setBusy } from "./busy-indicator-state";
+export type { SetBusyOptions } from "./busy-indicator-state";

package/src/components/card-grid/CardGrid.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { PackageIcon } from '@hugeicons/core-free-icons';
+import { EmptyStateCard } from '../empty-state-card';
+import { LoadMoreButton } from '../load-more-button';
+import { LoadingStateCard } from '../loading-state-card';
+
+// Props
+const props = defineProps({
+    items: { type: Array, default: () => [] },
+    busy: { type: Boolean, default: false },
+    loadMoreBusy: { type: Boolean, default: false },
+    hasMore: { type: Boolean, default: false },
+    emptyMessage: { type: String, required: true },
+    emptyIcon: { type: Object, default: () => PackageIcon }
+});
+
+// Emits
+const emits = defineEmits(['load-more']);
+
+// Handle load more
+const handleLoadMore = () => {
+    emits('load-more');
+};
+</script>
+
+<template>
+    <div>
+        <!-- Busy state for initial loading -->
+        <LoadingStateCard v-if="props.busy" />
+
+        <!-- Empty state -->
+        <EmptyStateCard v-else-if="!props.items || props.items.length === 0"
+            :description="props.emptyMessage"
+            :icon="props.emptyIcon" />
+
+        <!-- Cards grid -->
+        <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6 xl:gap-4">
+            <slot name="card" v-for="item in props.items" :item="item" :key="(item as any).id" />
+        </div>
+
+        <!-- Load more button -->
+        <div v-if="props.hasMore || (props.loadMoreBusy && props.items.length > 0)" class="flex justify-center mt-6">
+            <LoadMoreButton :busy="props.loadMoreBusy"
+                @load-more="handleLoadMore" />
+        </div>
+    </div>
+</template>

package/src/components/card-grid/index.ts

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

package/src/components/chip/Chip.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { Cancel01Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/vue"
+import type { HTMLAttributes } from "vue"
+import { getSurfaceToneClasses, type ToneColor } from "../../lib/color-tokens"
+import { cn } from "../../lib/utils"
+
+// Props
+const props = withDefaults(defineProps<{
+    text: string
+    color?: ToneColor
+    removeLabel?: string
+    class?: HTMLAttributes["class"]
+}>(), {
+    color: "gray",
+    removeLabel: "Remove"
+})
+
+// Emits
+const emits = defineEmits<{
+    remove: []
+}>()
+
+// Handle remove button click
+const handleRemove = () => {
+    emits("remove")
+}
+</script>
+
+<template>
+    <div data-slot="chip" :class="cn('inline-flex items-center gap-2 rounded border px-3 py-2 text-sm font-semibold transition-colors duration-300 ease-in-out', getSurfaceToneClasses(props.color), props.class)">
+        <!-- Text content -->
+        <span class="leading-none">{{ props.text }}</span>
+
+        <!-- Remove button -->
+        <button type="button" :aria-label="props.removeLabel" class="inline-flex size-4 items-center justify-center rounded-sm opacity-70 transition-all duration-200 ease-in-out hover:bg-black/5 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/20 dark:hover:bg-white/10" @click="handleRemove">
+            <HugeiconsIcon :icon="Cancel01Icon" class="size-3" />
+        </button>
+    </div>
+</template>

package/src/components/chip/index.ts

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

package/src/components/confirm-dialog/ConfirmDialog.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { HugeiconsIcon } from "@hugeicons/vue";
+import { computed } from "vue";
+import { InformationCircleIcon } from "@hugeicons/core-free-icons";
+import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "../ui/alert-dialog";
+import { Button } from "../ui/button";
+import { cancelActiveConfirmDialog, closeConfirmDialog, confirmActiveDialog, confirmDialogState } from "./confirm-dialog-state";
+
+const currentDialog = computed(() => confirmDialogState.current);
+
+// Close the dialog when the shell requests it
+const handleOpenChange = (open: boolean) => {
+    if (!open) {
+        closeConfirmDialog();
+    }
+};
+</script>
+
+<template>
+    <!-- Dialog shell -->
+    <AlertDialog :open="confirmDialogState.isOpen" @update:open="handleOpenChange">
+        <!-- Dialog content -->
+        <AlertDialogContent v-if="currentDialog">
+            <div class="px-5 pb-5 pt-5 sm:px-6 sm:pb-4 sm:pt-6">
+                <div class="flex flex-col gap-4 sm:flex-row sm:items-start">
+                    <!-- Dialog icon -->
+                    <div class="flex size-12 shrink-0 self-center items-center justify-center rounded border border-[var(--border-light)] bg-[var(--bg-surface-light)] sm:size-10 sm:self-start dark:border-[var(--border-dark)] dark:bg-[var(--bg-surface-dark)]">
+                        <HugeiconsIcon v-if="currentDialog.options.icon" :icon="currentDialog.options.icon" :stroke-width="1.8" class="size-6 text-[var(--button-primary-light)] dark:text-[var(--button-primary-dark)]" />
+                        <HugeiconsIcon v-else :icon="InformationCircleIcon" :stroke-width="1.8" class="size-6 text-[var(--button-primary-light)] dark:text-[var(--button-primary-dark)]" />
+                    </div>
+
+                    <!-- Dialog header -->
+                    <AlertDialogHeader class="sm:pt-0">
+                        <AlertDialogTitle>
+                            {{ currentDialog.options.title }}
+                        </AlertDialogTitle>
+                        <AlertDialogDescription>
+                            {{ currentDialog.options.message }}
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                </div>
+            </div>
+
+            <!-- Dialog actions -->
+            <AlertDialogFooter>
+                <!-- Cancel button -->
+                <Button :variant="currentDialog.options.cancelButtonType" :disabled="confirmDialogState.busy" @click="cancelActiveConfirmDialog">
+                    <HugeiconsIcon v-if="currentDialog.options.cancelButtonIcon" :icon="currentDialog.options.cancelButtonIcon" class="size-4" />
+                    {{ currentDialog.options.cancelText }}
+                </Button>
+
+                <!-- Confirm button -->
+                <Button :variant="currentDialog.options.confirmButtonType" :disabled="confirmDialogState.busy" @click="confirmActiveDialog">
+                    <HugeiconsIcon v-if="currentDialog.options.confirmButtonIcon" :icon="currentDialog.options.confirmButtonIcon" class="size-4" />
+                    {{ currentDialog.options.confirmText }}
+                </Button>
+            </AlertDialogFooter>
+        </AlertDialogContent>
+    </AlertDialog>
+</template>