@brumaombra/ui-vintage 0.6.8 → 0.7.1

package/src/components/blog/AllPostsSection.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { LoadMoreButton } from '../load-more-button';
+import PostsList from './PostsList.vue';
+
+const { t } = useI18n();
+
+// Props
+const props = defineProps({
+    posts: { type: Array, default: () => [] },
+    currentPage: { type: Number, default: 1 },
+    postsPerPage: { type: Number, default: 9 },
+    totalPosts: { type: Number, default: 0 },
+    hasMorePosts: { type: Boolean, default: false },
+    isLoading: { type: Boolean, default: false }
+});
+
+// Emits
+const emits = defineEmits(['load-more']);
+
+// Handle load more posts
+const handleLoadMorePosts = () => {
+    if (!props.isLoading) {
+        emits('load-more');
+    }
+};
+
+// Number of currently visible posts
+const visiblePostsCount = computed(() => Math.min(props.posts.length, props.totalPosts));
+</script>
+
+<template>
+    <div>
+        <!-- Blog posts grid -->
+        <PostsList :posts="props.posts" />
+
+        <!-- Load more button -->
+        <LoadMoreButton v-if="props.hasMorePosts"
+            :busy="props.isLoading"
+            :text="t('uiVintage.blog.loadMoreWithNumbers', { current: visiblePostsCount, total: props.totalPosts })"
+            @load-more="handleLoadMorePosts"
+            class="mt-8"
+            data-aos="fade-up" />
+    </div>
+</template>

package/src/components/blog/BlogFAQSection.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ArrowDown01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { Card, CardContent } from '../ui/card';
+import BlogSectionTitle from './BlogSectionTitle.vue';
+
+// Props
+const props = defineProps({
+    faqs: { type: Array, default: () => [] }
+});
+
+const { t } = useI18n();
+const expandedItems = ref({});
+const hasValidFAQs = computed(() => props.faqs && props.faqs.length > 0);
+
+// Toggle expanded state
+const toggleItem = index => {
+    expandedItems.value[index] = !expandedItems.value[index];
+};
+
+// Check if item is expanded
+const isExpanded = index => {
+    return expandedItems.value[index] || false;
+};
+
+// Auto-open first FAQ for better UX
+if (hasValidFAQs.value) {
+    expandedItems.value[0] = true;
+}
+</script>
+
+<template>
+    <div v-if="hasValidFAQs" class="mt-12 lg:mt-16">
+        <!-- Title -->
+        <BlogSectionTitle :title="t('uiVintage.blog.faq.title')" />
+
+        <!-- Description -->
+        <p class="text-base md:text-lg text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] mb-8">
+            {{ t('uiVintage.blog.faq.description') }}
+        </p>
+
+        <!-- FAQ Items -->
+        <div class="space-y-4">
+            <Card v-for="(faq, index) in props.faqs" :key="index" class="!p-0 cursor-pointer" @click="toggleItem(index)">
+                <CardContent class="!p-0 gap-0">
+                    <!-- Question -->
+                    <div class="flex items-center justify-between p-5 gap-4">
+                        <!-- Question text -->
+                        <h3 class="text-sm md:text-base font-semibold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] text-left">
+                            {{ faq.question }}
+                        </h3>
+
+                        <!-- Toggle 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(index) }">
+                            <HugeiconsIcon :icon="ArrowDown01Icon" class="size-4 text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]" />
+                        </div>
+                    </div>
+
+                    <!-- Answer -->
+                    <div class="overflow-hidden transition-all duration-300 ease-in-out" :class="isExpanded(index) ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'">
+                        <p class="px-5 pb-5 text-xs md:text-sm text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] leading-relaxed">
+                            {{ faq.answer }}
+                        </p>
+                    </div>
+                </CardContent>
+            </Card>
+        </div>
+    </div>
+</template>

package/src/components/blog/BlogHeaderSection.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { Badge } from '../ui/badge';
+
+// Props
+const props = defineProps({
+    badges: {
+        type: Array,
+        default: () => []
+    },
+    title: { type: String, required: true },
+    description: { type: String, required: true }
+});
+</script>
+
+<template>
+    <div class="flex flex-col space-y-6 md:space-y-8">
+        <!-- Badges -->
+        <div v-if="props.badges.length > 0" class="flex flex-wrap gap-3 mb-6 md:mb-8">
+            <Badge v-for="badge in props.badges"
+                :key="`${badge.color}-${badge.text}`"
+                :color="badge.color"
+                :text="badge.text" />
+        </div>
+
+        <!-- Title -->
+        <h1 class="text-3xl md:text-6xl font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] leading-tight">
+            {{ props.title }}
+        </h1>
+
+        <!-- Description -->
+        <p class="text-sm md:text-xl text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] leading-relaxed">
+            {{ props.description }}
+        </p>
+    </div>
+</template>

package/src/components/blog/BlogInfoSection.vue

@@ -0,0 +1,70 @@
+<script setup>
+import { NuxtImg } from '#components';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Card, CardContent } from '../ui/card';
+import { formatDateLongItalyTimezone } from '../../lib/utils';
+
+// Props
+const props = defineProps({
+    author: { type: String, required: true },
+    authorUrl: { type: String, required: true },
+    authorImageUrl: { type: String, required: true },
+    datePublished: { type: String, required: true },
+    dateModified: { type: String, default: null }
+});
+
+const { t, locale } = useI18n();
+
+// Formatted dates
+const formattedPublishedDate = computed(() => formatDateLongItalyTimezone(props.datePublished, locale.value));
+const formattedModifiedDate = computed(() => formatDateLongItalyTimezone(props.dateModified, locale.value));
+</script>
+
+<template>
+    <!-- Author and date information -->
+    <Card data-aos="fade-up">
+        <CardContent>
+            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
+                <!-- Author -->
+                <div class="flex items-center mb-4 sm:mb-0">
+                    <div class="flex items-center">
+                        <!-- Author image -->
+                        <NuxtLink :to="props.authorUrl" target="_blank" rel="noopener noreferrer" class="rounded me-3 transition-transform duration-300 ease-out hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100">
+                            <NuxtImg :src="props.authorImageUrl" :alt="props.author" height="50" width="50" format="avif" quality="40" :sizes="{ 480: '50px', 1280: '50px' }" loading="lazy" decoding="async" class="object-cover rounded" />
+                        </NuxtLink>
+
+                        <!-- Author name -->
+                        <div>
+                            <p class="text-sm text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]">{{ t('uiVintage.blog.author') }}</p>
+                            <p class="font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)]">
+                                <NuxtLink :to="props.authorUrl" target="_blank" rel="noopener noreferrer" class="hover:text-[var(--text-secondary-light)] dark:hover:text-[var(--text-secondary-dark)] transition-colors">
+                                    {{ props.author }}
+                                </NuxtLink>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Date information -->
+                <div class="flex flex-col sm:items-end text-xs md:text-sm text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]">
+                    <!-- Published date -->
+                    <div v-if="props.datePublished" class="mb-1">
+                        <span class="font-semibold">{{ t('uiVintage.blog.publishedDate') }}:</span>
+                        <time :datetime="props.datePublished" class="ml-1">
+                            {{ formattedPublishedDate }}
+                        </time>
+                    </div>
+
+                    <!-- Last updated date -->
+                    <div v-if="props.dateModified" class="text-xs">
+                        <span class="font-semibold">{{ t('uiVintage.blog.lastUpdatedDate') }}:</span>
+                        <time :datetime="props.dateModified" class="ml-1">
+                            {{ formattedModifiedDate }}
+                        </time>
+                    </div>
+                </div>
+            </div>
+        </CardContent>
+    </Card>
+</template>

package/src/components/blog/BlogSectionTitle.vue

@@ -0,0 +1,12 @@
+<script setup>
+// Props
+const props = defineProps({
+    title: { type: String, required: true }
+});
+</script>
+
+<template>
+    <h2 class="text-xl md:text-2xl font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] mb-5">
+        {{ props.title }}
+    </h2>
+</template>

package/src/components/blog/CategoriesList.vue

@@ -0,0 +1,17 @@
+<script setup>
+import CategoryCard from './CategoryCard.vue';
+
+// Props
+const props = defineProps({
+    categories: { type: Array, default: () => [] }
+});
+</script>
+
+<template>
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5 md:gap-6">
+        <!-- Category card -->
+        <NuxtLink v-for="(category, i) in props.categories" :key="category.path || category.slug" :to="category.path" class="block h-full" data-aos="fade-up" :data-aos-delay="(i % 4) * 200">
+            <CategoryCard :name="category.name" :image="category.image" :count="category.count" />
+        </NuxtLink>
+    </div>
+</template>

package/src/components/blog/CategoriesSection.vue

@@ -0,0 +1,14 @@
+<script setup>
+import CategoriesList from './CategoriesList.vue';
+
+// Props
+const props = defineProps({
+    categories: { type: Array, default: () => [] }
+});
+</script>
+
+<template>
+    <div>
+        <CategoriesList :categories="props.categories" />
+    </div>
+</template>

package/src/components/blog/CategoryCard.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { NuxtImg } from '#components';
+import { Badge } from '../ui/badge';
+import { Card, CardContent } from '../ui/card';
+
+// Props
+const props = defineProps({
+    name: { type: String, required: true },
+    image: { type: String, default: '' },
+    count: { type: Number, required: true }
+});
+</script>
+
+<template>
+    <Card class="!p-0 overflow-hidden group cursor-pointer transition-transform duration-300 ease-out hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:translate-y-0">
+        <CardContent class="gap-0 !p-0">
+            <!-- Background Image -->
+            <div v-if="props.image" class="relative w-full h-36 overflow-hidden">
+                <NuxtImg :src="props.image" :alt="props.name" height="225" width="400" format="avif" quality="35" :sizes="{ 480: '480px', 1280: '400px' }" loading="lazy" decoding="async" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
+            </div>
+
+            <!-- Content -->
+            <div class="p-4 flex items-center justify-between">
+                <!-- Name -->
+                <span class="text-sm font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] truncate mr-3">
+                    {{ props.name }}
+                </span>
+
+                <!-- Count -->
+                <Badge color="gray" :text="String(props.count)" />
+            </div>
+        </CardContent>
+    </Card>
+</template>

package/src/components/blog/HeaderCarousel.vue

@@ -0,0 +1,194 @@
+<script setup>
+import { NuxtImg } from '#components';
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ArrowLeft01Icon, ArrowRight01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { Badge } from '../ui/badge';
+import { Button } from '../ui/button';
+import { Card, CardContent } from '../ui/card';
+
+const { t } = useI18n();
+
+// Props
+const props = defineProps({
+    featuredPosts: { type: Array, default: () => [] }
+});
+
+// Carousel state
+const currentSlide = ref(0);
+const slideCount = computed(() => props.featuredPosts.length || 0);
+const intervalId = ref(null);
+const direction = ref('forward');
+
+// Start auto-play functionality
+const startAutoPlay = () => {
+    intervalId.value = setInterval(nextSlide, 5000);
+};
+
+// Stop auto-play functionality
+const stopAutoPlay = () => {
+    if (intervalId.value) clearInterval(intervalId.value);
+};
+
+// Handle next slide press
+const nextSlide = () => {
+    direction.value = 'forward';
+    currentSlide.value = (currentSlide.value + 1) % slideCount.value;
+};
+
+// Handle previous slide press
+const prevSlide = () => {
+    direction.value = 'backward';
+    currentSlide.value = (currentSlide.value - 1 + slideCount.value) % slideCount.value;
+};
+
+// Go to specific slide
+const goToSlide = index => {
+    // Determine direction
+    if (index > currentSlide.value) {
+        direction.value = 'forward';
+    } else {
+        direction.value = 'backward';
+    }
+
+    // Set current slide
+    currentSlide.value = index;
+};
+
+// Start autoplay when component mounts
+onMounted(() => {
+    startAutoPlay();
+});
+
+// Clean up interval when component unmounts
+onUnmounted(() => {
+    stopAutoPlay();
+});
+</script>
+
+<template>
+    <div v-if="props.featuredPosts.length > 0" class="relative" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay">
+        <!-- Slides -->
+        <div class="relative overflow-hidden rounded">
+            <TransitionGroup name="slide">
+                <div v-for="(post, index) in props.featuredPosts" :id="`carousel-slide-${index}`" :key="post.path || post.title || index" v-show="currentSlide === index" class="w-full" :data-direction="direction">
+                    <Card class="!p-0 overflow-hidden cursor-pointer">
+                        <CardContent class="gap-0 !p-0">
+                            <!-- Slide image -->
+                            <NuxtLink :to="post.path">
+                                <div class="relative w-full h-56 md:h-80 overflow-hidden">
+                                    <NuxtImg :src="post.image" :alt="post.title" width="560" height="315" format="avif" quality="35" :sizes="{ 480: '480px', 1536: '1086px' }" :loading="index === 0 ? 'eager' : 'lazy'" :fetchpriority="index === 0 ? 'high' : 'auto'" :preload="index === 0" class="w-full h-full object-cover transition-transform duration-500 hover:scale-105" />
+                                </div>
+                            </NuxtLink>
+
+                            <!-- Slide content -->
+                            <div class="p-6 md:p-8">
+                                <!-- Category badge -->
+                                <NuxtLink v-if="post.categoryText && post.categoryPath" :to="post.categoryPath" class="inline-block mb-3">
+                                    <Badge color="gray" :text="post.categoryText" />
+                                </NuxtLink>
+
+                                <!-- Title -->
+                                <NuxtLink :to="post.path">
+                                    <h3 class="text-base md:text-3xl font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] mb-3 line-clamp-2 hover:opacity-75 transition-opacity duration-200">
+                                        {{ post.title }}
+                                    </h3>
+                                </NuxtLink>
+
+                                <!-- Description -->
+                                <p class="text-xs md:text-base text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] mb-6 line-clamp-2 leading-relaxed">
+                                    {{ post.description }}
+                                </p>
+
+                                <!-- Button + indicators row -->
+                                <div class="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
+                                    <!-- Read post button -->
+                                    <NuxtLink :to="post.path">
+                                        <Button variant="primary" class="w-full sm:w-auto">
+                                            <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4" />
+                                            {{ t('uiVintage.blog.goToPost') }}
+                                        </Button>
+                                    </NuxtLink>
+
+                                    <!-- Slide indicators -->
+                                    <div v-if="props.featuredPosts.length > 1" class="flex w-full justify-center gap-3 sm:w-auto" role="tablist" :aria-label="t('uiVintage.blog.carouselNavigation')">
+                                        <button v-for="(_, idx) in props.featuredPosts"
+                                            :key="idx"
+                                            @click="goToSlide(idx)"
+                                            :class="['h-5 w-5 sm:h-4 sm:w-4 shrink-0 rounded-[2px] transition-all duration-300 cursor-pointer bg-[var(--border-light)] dark:bg-[var(--border-dark)]', currentSlide === idx ? 'w-8 sm:w-7 !bg-[var(--text-primary-light)] dark:!bg-[var(--text-primary-dark)]' : '']"
+                                            :aria-label="t('uiVintage.blog.goToSlide', { index: idx + 1 })"
+                                            :aria-current="currentSlide === idx"
+                                            role="tab"
+                                            :aria-controls="`carousel-slide-${idx}`">
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </CardContent>
+                    </Card>
+                </div>
+            </TransitionGroup>
+        </div>
+
+        <!-- Previous slide -->
+        <button v-if="props.featuredPosts.length > 1"
+            @click="prevSlide"
+            :aria-label="t('uiVintage.blog.previousSlide')"
+            class="absolute left-2 top-[calc(50%-4rem)] -translate-y-1/2 z-10 border border-[var(--border-light)] dark:border-[var(--border-dark)] bg-[var(--bg-card-light)] dark:bg-[var(--bg-card-dark)] px-3 py-3 rounded-none transition-colors duration-200 hover:border-[var(--border-hover-light)] dark:hover:border-[var(--border-hover-dark)] cursor-pointer">
+            <HugeiconsIcon :icon="ArrowLeft01Icon" class="size-4 text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]" />
+        </button>
+
+        <!-- Next slide -->
+        <button v-if="props.featuredPosts.length > 1"
+            @click="nextSlide"
+            :aria-label="t('uiVintage.blog.nextSlide')"
+            class="absolute right-2 top-[calc(50%-4rem)] -translate-y-1/2 z-10 border border-[var(--border-light)] dark:border-[var(--border-dark)] bg-[var(--bg-card-light)] dark:bg-[var(--bg-card-dark)] px-3 py-3 rounded-none transition-colors duration-200 hover:border-[var(--border-hover-light)] dark:hover:border-[var(--border-hover-dark)] cursor-pointer">
+            <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4 text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]" />
+        </button>
+    </div>
+</template>
+
+<style scoped>
+.slide-enter-active,
+.slide-leave-active {
+    transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), filter 0.75s cubic-bezier(0.22, 1, 0.36, 1);
+    will-change: transform, opacity, filter;
+}
+
+.slide-enter-from[data-direction="forward"] {
+    opacity: 0;
+    transform: translateX(12%) scale(0.985);
+    filter: blur(4px);
+}
+
+.slide-leave-to[data-direction="forward"] {
+    opacity: 0;
+    transform: translateX(-12%) scale(0.985);
+    filter: blur(4px);
+}
+
+.slide-enter-from[data-direction="backward"] {
+    opacity: 0;
+    transform: translateX(-12%) scale(0.985);
+    filter: blur(4px);
+}
+
+.slide-leave-to[data-direction="backward"] {
+    opacity: 0;
+    transform: translateX(12%) scale(0.985);
+    filter: blur(4px);
+}
+
+.slide-leave-active {
+    position: absolute;
+    width: 100%;
+}
+
+.slide-enter-to,
+.slide-leave-from {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+    filter: blur(0);
+}
+</style>

package/src/components/blog/PostCard.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { NuxtImg } from '#components';
+import { useI18n } from 'vue-i18n';
+import { ArrowRight01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { Badge } from '../ui/badge';
+import { Button } from '../ui/button';
+import { Card, CardContent } from '../ui/card';
+
+const { t } = useI18n();
+
+// Props
+const props = defineProps({
+    image: { type: String, default: '' },
+    category: { type: String, default: '' },
+    title: { type: String, default: '' },
+    description: { type: String, default: '' }
+});
+</script>
+
+<template>
+    <Card class="!p-0 overflow-hidden group cursor-pointer transition-transform duration-300 ease-out hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:translate-y-0">
+        <CardContent class="h-full gap-0 !p-0">
+            <!-- Featured image -->
+            <div v-if="props.image" class="relative w-full h-48 overflow-hidden">
+                <NuxtImg :src="props.image" :alt="props.title" height="225" width="400" format="avif" quality="35" :sizes="{ 480: '480px', 1280: '400px' }" loading="lazy" decoding="async" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
+            </div>
+
+            <!-- Content -->
+            <div class="p-6 flex flex-col flex-grow">
+                <!-- Category Badge -->
+                <div v-if="props.category" class="mb-3">
+                    <Badge color="gray" :text="props.category" />
+                </div>
+
+                <!-- Post Title -->
+                <h2 class="text-base font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] mb-2 line-clamp-2">
+                    {{ props.title }}
+                </h2>
+
+                <!-- Post Description -->
+                <p class="text-xs md:text-sm text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] leading-relaxed mb-4 line-clamp-3 flex-grow">
+                    {{ props.description }}
+                </p>
+
+                <!-- Read More Button -->
+                <div class="mt-auto">
+                    <Button variant="primary" class="w-full sm:w-auto">
+                        <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4" />
+                        {{ t('uiVintage.blog.readMore') }}
+                    </Button>
+                </div>
+            </div>
+        </CardContent>
+    </Card>
+</template>

package/src/components/blog/PostsList.vue

@@ -0,0 +1,16 @@
+<script setup>
+import PostCard from './PostCard.vue';
+
+// Props
+const props = defineProps({
+    posts: { type: Array, default: () => [] }
+});
+</script>
+
+<template>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <NuxtLink v-for="(post, index) in props.posts" :key="post.path" :to="post.path" class="block h-full" data-aos="fade-up" :data-aos-delay="(index % 3) * 200">
+            <PostCard class="h-full" :image="post.image" :category="post.categoryText" :title="post.title" :description="post.description" />
+        </NuxtLink>
+    </div>
+</template>