adata-ui 2.1.23 → 2.1.24

package/components/navigation/header/CardGallery.vue

@@ -1,249 +1,249 @@
-<script setup lang="ts">
-import { AIconArrowCircleDown, AIconGlobe, AIconId, AIconArrowSideUp } from '#components'
-import { PAGES } from '#adata-ui/shared/constans/pages'
-import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
-import { useUrls } from '#adata-ui/composables/useUrls'
-
-const urls = useUrls()
-const { t, locale } = useI18n()
-const colorMode = useColorMode()
-const computedColorMode = computed(() => colorMode.value)
-
-const items = computed(()=>{
-  return [
-    {
-      title: 'header.products.galleryCards.unload.title',
-      subtitle: 'header.products.galleryCards.unload.subtitle',
-      to: buildLocalizedUrl(locale, urls.pk, PAGES.pk.unload),
-      image: '/header/unload.webp',
-      icon: AIconArrowCircleDown,
-    },
-    {
-      title: 'header.products.galleryCards.compliance.title',
-      subtitle: 'header.products.galleryCards.compliance.subtitle',
-      to: buildLocalizedUrl(locale, urls.compliance, PAGES.compliance.l),
-      image: '/header/compliance.webp',
-      icon: AIconId,
-    },
-    {
-      title: 'header.products.galleryCards.ved.title',
-      subtitle: 'header.products.galleryCards.ved.subtitle',
-      to: buildLocalizedUrl(locale, urls.tnved),
-      image: '/header/ved.webp',
-      icon: AIconGlobe,
-    },
-  ]
-})
-
-const currentIndex = ref(0)
-const transitionName = ref('slide-left')
-let timeoutId: ReturnType<typeof setTimeout> | null = null
-const isHovered = ref(false)
-
-const intervalDuration = 3000
-let startTime = 0
-let remaining = intervalDuration
-
-const clearTimer = () => {
-  if (timeoutId) {
-    clearTimeout(timeoutId)
-    timeoutId = null
-  }
-}
-
-const startTimer = () => {
-  clearTimer()
-  startTime = Date.now()
-  timeoutId = setTimeout(() => {
-    nextImage()
-  }, remaining)
-}
-
-const pauseTimer = () => {
-  if (timeoutId) {
-    clearTimer()
-    const elapsed = Date.now() - startTime
-    remaining = Math.max(remaining - elapsed, 0)
-  }
-}
-
-const resumeTimer = () => {
-  startTime = Date.now()
-  timeoutId = setTimeout(() => {
-    nextImage()
-  }, remaining)
-}
-
-const resetTimer = () => {
-  remaining = intervalDuration
-  startTimer()
-}
-
-const nextImage = () => {
-  transitionName.value = 'slide-left'
-  currentIndex.value = (currentIndex.value + 1) % items.value.length
-  remaining = intervalDuration
-  startTimer()
-}
-
-const setCurrentIndex = (index: number) => {
-  transitionName.value = index < currentIndex.value ? 'slide-right' : 'slide-left'
-  currentIndex.value = index
-  resetTimer()
-  pauseTimer()
-}
-
-const handleMouseOver = () => {
-  isHovered.value = true
-  pauseTimer()
-}
-
-const handleMouseOut = () => {
-  isHovered.value = false
-  resumeTimer()
-}
-
-onMounted(() => startTimer())
-onUnmounted(() => clearTimer())
-</script>
-
-<template>
-  <div
-    class="overflow-hidden relative w-[320px] h-[480px] rounded-2xl"
-    @mouseover="handleMouseOver"
-    @mouseout="handleMouseOut"
-  >
-    <transition :name="transitionName">
-      <div
-        :key="currentIndex"
-        class="relative h-full"
-      >
-        <img
-          :src="items[currentIndex].image"
-          class="size-full object-cover rounded-2xl"
-        />
-        <nuxt-link-locale :to="items[currentIndex].to">
-          <div class="absolute bottom-0 rounded-2xl w-full bg-blue-700/80 dark:bg-blue-500/80 px-4 pt-4 pb-12 shadow-[0_-2px_4px_0_rgba(0,0,0,0.25)] backdrop-blur-md flex flex-col gap-6">
-            <div class="flex flex-col gap-2">
-              <div class="flex items-center justify-between">
-                <div class="flex items-center gap-2">
-                  <div class="flex items-center justify-center bg-white dark:bg-gray-900 text-blue-700 dark:text-blue-500 size-8 rounded-lg">
-                    <component
-                      :is="items[currentIndex].icon"
-                      class="size-6"
-                    />
-                  </div>
-                  <p class="normal-case text-white dark:text-gray-900 font-semibold text-xl">
-                    {{ t(items[currentIndex].title) }}
-                  </p>
-                </div>
-                <a-icon-arrow-side-up
-                  class="icon-link size-6 text-white dark:text-gray-900"
-                  :class="{ 'visible': isHovered }"
-                />
-              </div>
-              <p class="normal-case text-white font-semibold dark:text-gray-900">
-                {{ t(items[currentIndex].subtitle) }}
-              </p>
-            </div>
-          </div>
-        </nuxt-link-locale>
-      </div>
-    </transition>
-    <div class="absolute xl:bottom-4 w-full">
-      <div class="flex justify-center items-center gap-6">
-        <div
-          v-for="(item, index) in items"
-          :key="index"
-          class="relative bg-white/50 dark:bg-gray-900/50 rounded-full overflow-hidden cursor-pointer h-2 w-2"
-          :class="{ 'w-[52px]': currentIndex === index }"
-          @click="setCurrentIndex(index)"
-        >
-          <div
-            v-if="currentIndex === index"
-            class="absolute inset-0 bg-white dark:bg-gray-900 progress-bar"
-            :style="{ animationPlayState: isHovered ? 'paused' : 'running' }"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.progress-bar {
-  animation: progress 3s linear forwards;
-}
-
-@keyframes progress {
-  0% { width: 0; }
-  100% { width: 100%; }
-}
-
-.slide-left-enter-active,
-.slide-left-leave-active,
-.slide-right-enter-active,
-.slide-right-leave-active {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  transition: transform 0.3s ease, opacity 0.3s ease;
-}
-
-.slide-left-enter-from {
-  transform: translateX(100%);
-  opacity: 0;
-}
-.slide-left-enter-to {
-  transform: translateX(0);
-  opacity: 1;
-}
-.slide-left-leave-from {
-  transform: translateX(0);
-  opacity: 1;
-}
-.slide-left-leave-to {
-  transform: translateX(-100%);
-  opacity: 0;
-}
-
-.slide-right-enter-from {
-  transform: translateX(-100%);
-  opacity: 0;
-}
-.slide-right-enter-to {
-  transform: translateX(0);
-  opacity: 1;
-}
-.slide-right-leave-from {
-  transform: translateX(0);
-  opacity: 1;
-}
-.slide-right-leave-to {
-  transform: translateX(100%);
-  opacity: 0;
-}
-
-.icon-link {
-  opacity: 0;
-  transition: opacity 0.5s ease;
-}
-
-.icon-link.visible {
-  opacity: 1;
-}
-
-.content-wrapper {
-  overflow: hidden;
-  will-change: max-height, opacity;
-  max-height: 0;
-  opacity: 0;
-  transition: max-height 0.5s ease, opacity 0.5s ease;
-}
-
-.content-wrapper.visible {
-  max-height: 300px;
-  opacity: 1;
-}
-</style>
+<script setup lang="ts">
+import { AIconArrowCircleDown, AIconGlobe, AIconId, AIconArrowSideUp } from '#components'
+import { PAGES } from '#adata-ui/shared/constans/pages'
+import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
+import { useUrls } from '#adata-ui/composables/useUrls'
+
+const urls = useUrls()
+const { t, locale } = useI18n()
+const colorMode = useColorMode()
+const computedColorMode = computed(() => colorMode.value)
+
+const items = computed(()=>{
+  return [
+    {
+      title: 'header.products.galleryCards.unload.title',
+      subtitle: 'header.products.galleryCards.unload.subtitle',
+      to: buildLocalizedUrl(locale, urls.pk, PAGES.pk.unload),
+      image: '/header/unload.webp',
+      icon: AIconArrowCircleDown,
+    },
+    {
+      title: 'header.products.galleryCards.compliance.title',
+      subtitle: 'header.products.galleryCards.compliance.subtitle',
+      to: buildLocalizedUrl(locale, urls.compliance, PAGES.compliance.l),
+      image: '/header/compliance.webp',
+      icon: AIconId,
+    },
+    {
+      title: 'header.products.galleryCards.ved.title',
+      subtitle: 'header.products.galleryCards.ved.subtitle',
+      to: buildLocalizedUrl(locale, urls.tnved),
+      image: '/header/ved.webp',
+      icon: AIconGlobe,
+    },
+  ]
+})
+
+const currentIndex = ref(0)
+const transitionName = ref('slide-left')
+let timeoutId: ReturnType<typeof setTimeout> | null = null
+const isHovered = ref(false)
+
+const intervalDuration = 3000
+let startTime = 0
+let remaining = intervalDuration
+
+const clearTimer = () => {
+  if (timeoutId) {
+    clearTimeout(timeoutId)
+    timeoutId = null
+  }
+}
+
+const startTimer = () => {
+  clearTimer()
+  startTime = Date.now()
+  timeoutId = setTimeout(() => {
+    nextImage()
+  }, remaining)
+}
+
+const pauseTimer = () => {
+  if (timeoutId) {
+    clearTimer()
+    const elapsed = Date.now() - startTime
+    remaining = Math.max(remaining - elapsed, 0)
+  }
+}
+
+const resumeTimer = () => {
+  startTime = Date.now()
+  timeoutId = setTimeout(() => {
+    nextImage()
+  }, remaining)
+}
+
+const resetTimer = () => {
+  remaining = intervalDuration
+  startTimer()
+}
+
+const nextImage = () => {
+  transitionName.value = 'slide-left'
+  currentIndex.value = (currentIndex.value + 1) % items.value.length
+  remaining = intervalDuration
+  startTimer()
+}
+
+const setCurrentIndex = (index: number) => {
+  transitionName.value = index < currentIndex.value ? 'slide-right' : 'slide-left'
+  currentIndex.value = index
+  resetTimer()
+  pauseTimer()
+}
+
+const handleMouseOver = () => {
+  isHovered.value = true
+  pauseTimer()
+}
+
+const handleMouseOut = () => {
+  isHovered.value = false
+  resumeTimer()
+}
+
+onMounted(() => startTimer())
+onUnmounted(() => clearTimer())
+</script>
+
+<template>
+  <div
+    class="overflow-hidden relative w-[320px] h-[480px] rounded-2xl"
+    @mouseover="handleMouseOver"
+    @mouseout="handleMouseOut"
+  >
+    <transition :name="transitionName">
+      <div
+        :key="currentIndex"
+        class="relative h-full"
+      >
+        <img
+          :src="items[currentIndex].image"
+          class="size-full object-cover rounded-2xl"
+        />
+        <nuxt-link-locale :to="items[currentIndex].to">
+          <div class="absolute bottom-0 rounded-2xl w-full bg-blue-700/80 dark:bg-blue-500/80 px-4 pt-4 pb-12 shadow-[0_-2px_4px_0_rgba(0,0,0,0.25)] backdrop-blur-md flex flex-col gap-6">
+            <div class="flex flex-col gap-2">
+              <div class="flex items-center justify-between">
+                <div class="flex items-center gap-2">
+                  <div class="flex items-center justify-center bg-white dark:bg-gray-900 text-blue-700 dark:text-blue-500 size-8 rounded-lg">
+                    <component
+                      :is="items[currentIndex].icon"
+                      class="size-6"
+                    />
+                  </div>
+                  <p class="normal-case text-white dark:text-gray-900 font-semibold text-xl">
+                    {{ t(items[currentIndex].title) }}
+                  </p>
+                </div>
+                <a-icon-arrow-side-up
+                  class="icon-link size-6 text-white dark:text-gray-900"
+                  :class="{ 'visible': isHovered }"
+                />
+              </div>
+              <p class="normal-case text-white font-semibold dark:text-gray-900">
+                {{ t(items[currentIndex].subtitle) }}
+              </p>
+            </div>
+          </div>
+        </nuxt-link-locale>
+      </div>
+    </transition>
+    <div class="absolute xl:bottom-4 w-full">
+      <div class="flex justify-center items-center gap-6">
+        <div
+          v-for="(item, index) in items"
+          :key="index"
+          class="relative bg-white/50 dark:bg-gray-900/50 rounded-full overflow-hidden cursor-pointer h-2 w-2"
+          :class="{ 'w-[52px]': currentIndex === index }"
+          @click="setCurrentIndex(index)"
+        >
+          <div
+            v-if="currentIndex === index"
+            class="absolute inset-0 bg-white dark:bg-gray-900 progress-bar"
+            :style="{ animationPlayState: isHovered ? 'paused' : 'running' }"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.progress-bar {
+  animation: progress 3s linear forwards;
+}
+
+@keyframes progress {
+  0% { width: 0; }
+  100% { width: 100%; }
+}
+
+.slide-left-enter-active,
+.slide-left-leave-active,
+.slide-right-enter-active,
+.slide-right-leave-active {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.slide-left-enter-from {
+  transform: translateX(100%);
+  opacity: 0;
+}
+.slide-left-enter-to {
+  transform: translateX(0);
+  opacity: 1;
+}
+.slide-left-leave-from {
+  transform: translateX(0);
+  opacity: 1;
+}
+.slide-left-leave-to {
+  transform: translateX(-100%);
+  opacity: 0;
+}
+
+.slide-right-enter-from {
+  transform: translateX(-100%);
+  opacity: 0;
+}
+.slide-right-enter-to {
+  transform: translateX(0);
+  opacity: 1;
+}
+.slide-right-leave-from {
+  transform: translateX(0);
+  opacity: 1;
+}
+.slide-right-leave-to {
+  transform: translateX(100%);
+  opacity: 0;
+}
+
+.icon-link {
+  opacity: 0;
+  transition: opacity 0.5s ease;
+}
+
+.icon-link.visible {
+  opacity: 1;
+}
+
+.content-wrapper {
+  overflow: hidden;
+  will-change: max-height, opacity;
+  max-height: 0;
+  opacity: 0;
+  transition: max-height 0.5s ease, opacity 0.5s ease;
+}
+
+.content-wrapper.visible {
+  max-height: 300px;
+  opacity: 1;
+}
+</style>