adata-ui 0.3.98 → 2.0.0

package/components/navigation/header/CardGallery.vue

@@ -0,0 +1,248 @@
+<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'
+
+const { myLayer } = useAppConfig()
+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, myLayer.pkUrl, PAGES.pk.unload),
+      image: '/header/unload.webp',
+      icon: AIconArrowCircleDown,
+    },
+    {
+      title: 'header.products.galleryCards.compliance.title',
+      subtitle: 'header.products.galleryCards.compliance.subtitle',
+      to: buildLocalizedUrl(locale, myLayer.complianceUrl, PAGES.compliance.l),
+      image: '/header/compliance.webp',
+      icon: AIconId,
+    },
+    {
+      title: 'header.products.galleryCards.ved.title',
+      subtitle: 'header.products.galleryCards.ved.subtitle',
+      to: buildLocalizedUrl(locale, myLayer.tnvedUrl),
+      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>

package/components/navigation/header/ContactMenu.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import AlmatyContacts from "#adata-ui/components/navigation/header/AlmatyContacts.vue";
+import AstanaContacts from "#adata-ui/components/navigation/header/AstanaContacts.vue";
+
+const props = withDefaults(
+  defineProps<{
+    animation?: string
+    index?: number
+    url?: string
+  }>(),
+  {
+    animation: 'previous',
+    index: 2,
+    url:''
+  }
+)
+defineEmits(['outerClick', 'mouseOver'])
+
+const { t } = useI18n()
+const activeTab = ref(0)
+const options = [
+  {
+    key: 0,
+    name: 'ТОО "Alldata"'
+  },
+  {
+    key: 1,
+    name: ' ТОО «ADATA Consulting»'
+  },
+]
+
+</script>
+
+<template>
+  <div class=" normal-case ">
+    <div class="bg-white dark:bg-gray-950">
+      <transition :name="animation">
+        <div
+          :key="index"
+          class="a-container"
+        >
+          <div class="pt-2 mb-8  flex justify-between">
+            <a-pill-tabs
+              v-model="activeTab"
+              class="gap-2"
+              view="mobile"
+              :options="options"
+              size="lg"
+            />
+            <nuxt-link :to="url">
+              <a-button variant="gray">
+                {{ t('header.contacts.toContacts') }}
+                <a-icon-arrow-top-right-on-square />
+              </a-button>
+            </nuxt-link>
+          </div>
+          <div>
+            <almaty-contacts v-show="activeTab===0" />
+            <astana-contacts v-show="activeTab===1" />
+          </div>
+        </div>
+      </transition>
+      <button
+        class="absolute right-8 top-4"
+        @click="$emit('outerClick')"
+      >
+        <a-icon-x-mark
+          width="32"
+          height="32"
+        />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+$percent: 30%;
+.next-enter-from,
+.next-leave-to {
+  opacity: 0;
+  transform: translateX($percent);
+  position: absolute;
+}
+
+.next-enter-active {
+  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.next-leave-active {
+  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  opacity: 0;
+  transform: translateX(-$percent);
+}
+
+// Backwards transition
+
+.prev-enter-from,
+.prev-leave-to {
+  position: absolute;
+
+  opacity: 0;
+  transform: translateX(-$percent);
+}
+
+.prev-enter-active {
+  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.prev-leave-active {
+  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  opacity: 0;
+  transform: translateX($percent);
+}
+</style>

package/components/navigation/header/HeaderLink.vue

@@ -0,0 +1,247 @@
+<script setup lang="ts">
+import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
+
+import { PAGES } from '#adata-ui/shared/constans/pages'
+import ProductMenu from '#adata-ui/components/navigation/header/ProductMenu.vue'
+
+import ContactMenu from '#adata-ui/components/navigation/header/ContactMenu.vue'
+import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
+
+const { myLayer }: any = useAppConfig()
+const { t, locale } = useI18n()
+
+const navs: any = [
+  {
+    label: 'header.navs.products',
+    to: myLayer.landingUrl + PAGES.totalServices
+  },
+  {
+    label: 'header.navs.contacts',
+    to: myLayer.landingUrl + PAGES.contacts
+  },
+  {
+    label: 'header.navs.tariffs',
+    to: myLayer.landingUrl + PAGES.tariffs
+  }
+]
+
+const menu = ref<HTMLElement | null>(null)
+const isBodyAlreadyLocked = ref<boolean>(false)
+const currentIndex = ref(0)
+const forward = ref(true)
+const show = ref(false)
+const isMenuLocked = ref(false)
+const animation = ref('slide-fade')
+const currentMenu = shallowRef(null)
+const delayTimer = ref<ReturnType<typeof setTimeout> | null>(null)
+
+const currentMenuToShow = (index) => {
+  switch (index) {
+    case 0:
+      return ProductMenu
+    case 1:
+      return ContactMenu
+    case 2:
+      return null
+  }
+}
+const toggleMenu = (index: number) => {
+  if (index === 2) {
+    window.open(buildLocalizedUrl(locale, myLayer.landingUrl, PAGES.tariffs), '_blank')
+  } else {
+    currentMenu.value = currentMenuToShow(index)
+    const prev = currentIndex.value
+    if (prev < index) {
+      forward.value = false
+    } else if (prev > index) {
+      forward.value = true
+    }
+    animation.value = forward.value ? ' prev' : 'next'
+    if (!show.value) animation.value = 'slide-fade'
+    currentIndex.value = index
+    show.value = true
+  }
+}
+const closeMenu = (forceClose = false) => {
+  if (isMenuLocked.value && !forceClose) {
+    return
+  } else {
+    animation.value = 'slide-fade'
+    show.value = false
+
+    setTimeout(() => {
+      isMenuLocked.value = false
+      currentMenu.value = null
+    }, 200)
+  }
+}
+const onMenuMouseEnter = (index: number) => {
+  if (index !== 2) {
+    if (show.value === false) {
+      delayTimer.value = setTimeout(() => {
+        toggleMenu(index)
+      }, 600)
+    } else {
+      delayTimer.value = setTimeout(() => {
+        toggleMenu(index)
+      }, 100)
+    }
+  } else show.value = false
+}
+const onMenuMouseLeave = () => {
+  if (delayTimer.value) {
+    clearTimeout(delayTimer.value)
+    delayTimer.value = null
+  }
+}
+const lockMenu = () => {
+  isMenuLocked.value = true
+}
+const toggleBodyScroll = (el: HTMLBodyElement | HTMLDivElement, lock: boolean) => {
+  if (lock) {
+    setTimeout(() => {
+      disableBodyScroll(el, { reserveScrollBarGap: true })
+    }, 0)
+    return
+  }
+  enableBodyScroll(el)
+}
+
+onBeforeUnmount(() => {
+  if (show.value) toggleBodyScroll(menu.value, false)
+})
+
+watch(
+  () => [show.value, menu.value],
+  (newVal, oldVal) => {
+    const wasShown = oldVal ? oldVal[0] : false
+    const [isShown, menuEl] = newVal
+    const isOpening = isShown
+    const isClosing = wasShown && !isShown
+
+    if (!menuEl) return
+    if (isOpening) isBodyAlreadyLocked.value = !!document.body.style.overflow
+
+    if (isShown) {
+      toggleBodyScroll(menuEl, true)
+      return
+    }
+
+    if (!isClosing || isBodyAlreadyLocked.value) return
+
+    setTimeout(() => {
+      if (menuEl) toggleBodyScroll(menuEl, false)
+    }, 100)
+  }
+)
+</script>
+
+<template>
+  <div class="relative">
+    <ul>
+      <li
+        v-for="(nav, index) in navs"
+        :key="nav.label"
+        class="group inline-block border-r border-[#2C3E501A] px-2 last-of-type:border-none dark:border-[#E3E5E81A]"
+        @click="lockMenu"
+      >
+        <div
+          class="relative cursor-pointer font-bold uppercase text-gray-800 hover:text-gray-600 dark:text-gray-200 hover:dark:text-gray-600"
+          @mouseenter="onMenuMouseEnter(index)"
+          @click="toggleMenu(index)"
+          @mouseleave="onMenuMouseLeave"
+        >
+          {{ t(nav.label) }}
+        </div>
+      </li>
+    </ul>
+    <div
+      v-show="show"
+      ref="menu"
+      class="mt-5 fixed left-0 z-20 h-full w-full"
+    >
+      <div class="h-full w-full">
+        <transition :name="animation">
+          <keep-alive>
+            <component
+              :is="currentMenu"
+              v-show="show"
+              :animation="forward ? 'next' : 'prev'"
+              :index="currentIndex"
+              :url="buildLocalizedUrl(locale, myLayer.landingUrl, PAGES.contacts)"
+              @outer-click="closeMenu(true)"
+              @mouse-over="closeMenu"
+            />
+          </keep-alive>
+        </transition>
+        <div
+          v-show="show"
+          class="absolute left-[-25%] h-full w-[150%] bg-[#E3E5E833] backdrop-blur transition"
+          @click="closeMenu(true)"
+          @mouseover="closeMenu(false)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+$percent: 30%;
+.next-enter-from,
+.next-leave-to {
+  opacity: 0;
+  transform: translateX($percent);
+  position: absolute;
+}
+
+.next-enter-active {
+  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.next-leave-active {
+  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  opacity: 0;
+  transform: translateX(-$percent);
+}
+
+// Backwards transition
+
+.prev-enter-from,
+.prev-leave-to {
+  position: absolute;
+
+  opacity: 0;
+  transform: translateX(-$percent);
+}
+
+.prev-enter-active {
+  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.prev-leave-active {
+  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  opacity: 0;
+  transform: translateX($percent);
+}
+
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+  transition: all 0.2s ease-in-out;
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateY(-12px);
+  opacity: 0;
+}
+
+.slide-change-enter-active,
+.slide-change-leave-active {
+  transition: all 0.2s ease-in-out;
+}
+
+.slide-change-enter-from,
+.slide-change-leave-to {
+  opacity: 0;
+}
+</style>

package/components/navigation/header/ListItem.vue

@@ -0,0 +1,31 @@
+<template>
+  <nuxt-link-locale
+    :to="item.to"
+    @mouseenter="hover = true"
+    @mouseleave="hover = false"
+    :class="{'opacity-30' : !hover && someHovered}"
+    class="flex items-center gap-4 px-2.5 py-2 hover:bg-gray-50 rounded-lg dark:hover:bg-gray-800 normal-case transition-all "
+  >
+    <div class="min-w-8 h-8 rounded-lg flex items-center justify-center dark:text-gray-900 text-white bg-gradient-blue">
+      <component
+        :is="item.icon"
+        class="h-5 w-5"
+      />
+    </div>
+    <span class="text-sm text-deepblue-900 dark:text-[#E3E5E8]">{{ item.title }}</span>
+  </nuxt-link-locale>
+</template>
+
+<script setup lang="ts">
+import type {NavChildItem} from "#adata-ui/components/navigation/header/types";
+
+defineProps<{
+  item: NavChildItem
+  someHovered: boolean
+}>()
+const hover = ref(false)
+</script>
+
+<style scoped>
+
+</style>

package/components/navigation/header/NavCard.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type {NavChild, NavChildItem} from '#adata-ui/components/navigation/header/types'
+
+defineProps<{
+  item: NavChildItem
+  size: 'lg' | 'sm',
+  someHovered: boolean
+}>()
+const hover = ref(false)
+</script>
+
+<template>
+  <nuxt-link-locale
+    :to="item.to"
+    class="flex h-full justify-between xl:gap-4 rounded-[0.5rem] bg-gray-50 p-4 dark:bg-gray-800  transition-all dark:hover:bg-gray-800"
+    :class="{'opacity-30': !hover && someHovered}"
+    @mouseenter="hover = true"
+    @mouseleave="hover = false"
+  >
+    <div class="normal-case">
+      <h4
+        class="mb-2 font-semibold text-deepblue-900 dark:text-[#E3E5E8]"
+        :class="{'heading-04' : size==='lg', 'heading-05' : size === 'sm'}"
+      >
+        {{ item.title }}
+      </h4>
+      <p class="text-gray-600 dark:text-gray-300 body-400">
+        {{ item.subtitle ? item.subtitle : '' }}
+      </p>
+    </div>
+    <div
+      class="flex items-center justify-center self-end rounded-lg bg-gradient-blue  dark:text-gray-900 text-white"
+      :class="{'h-8 min-w-8' : size==='sm', 'h-16 min-w-16' : size==='lg'}"
+    >
+      <component
+        :is="item.icon"
+        :class="{'h-5 w-5' : size==='sm', 'h-11 w-11' : size==='lg'}"
+      />
+    </div>
+  </nuxt-link-locale>
+</template>