adata-ui 2.1.40-beta.18 → 2.1.40-beta.19

package/components/navigation/header/AlmatyContacts.vue

@@ -1,16 +1,64 @@
+<script setup lang="ts">
+import { useContacts } from '#adata-ui/composables/projectState'
+import Clock from '#adata-ui/icons/clock.vue'
+import ExpandWindow from '#adata-ui/icons/expand-window.vue'
+import Location from '#adata-ui/icons/location.vue'
+import Mail from '#adata-ui/icons/mail.vue'
+import Phone from '#adata-ui/icons/phone.vue'
+import Whatsapp from '#adata-ui/icons/whatsapp.vue'
+
+const { t } = useI18n()
+const contacts = useContacts()
+const AlmatyItems = computed(() => ([
+  {
+    title: t('header.contacts.almaty.adress.title'),
+    subtitle: t('header.contacts.almaty.adress.subtitle'),
+    icon: Location,
+    to: 'https://yandex.kz/maps/ru/org/avrora_kholding/1099794306/?ll=76.912479%2C43.208928&z=17.72',
+  },
+  {
+    title: t('header.contacts.almaty.email.title'),
+    subtitle: 'info@adata.kz',
+    icon: Mail,
+    to: 'mailto:info@adata.kz',
+  },
+  {
+    title: t('header.contacts.almaty.schedule.title'),
+    subtitle: t('header.contacts.almaty.schedule.subtitle'),
+    icon: Clock,
+  },
+]))
+
+const technicalSupport = computed(() => ([
+  {
+    subtitle: t('header.contacts.almaty.support.linkTitle'),
+    icon: ExpandWindow,
+    to: 'https://api.whatsapp.com/send/?phone=77712289041',
+  },
+]))
+
+const newContacts = computed(() => contacts.value.map(item => ({
+  subtitle: item.contact,
+  icon: item.platform_code === 'telephone' ? Phone : Whatsapp,
+  to: item.platform_code === 'telephone'
+    ? `tel:${item.contact}`
+    : `https://api.whatsapp.com/send/?phone=${item.contact.replace(/\D/g, '')}`,
+})))
+</script>
+
 <template>
-  <!--noindex-->
+  <!-- noindex -->
   <div class="h-[272px]" data-nosnippet>
-    <h2 class="heading-02 mb-4">
+    <h2 class="mb-4 text-h2">
       {{ t('header.contacts.almaty.title') }}
     </h2>
     <div class="flex gap-10">
       <div class="flex flex-col gap-4">
         <div
-          v-for="item in AlmatyItems.slice(0,3)"
+          v-for="item in AlmatyItems.slice(0, 3)"
           class="flex flex-col gap-2 "
         >
-          <div class="heading-04">
+          <div class="text-h5">
             {{ item.title }}
           </div>
           <a
@@ -21,46 +69,46 @@
               :is="item.icon"
               class="shrink-0"
             />
-            <div class=" body-400">
+            <div class="text-body-md">
               {{ item.subtitle }}
             </div>
           </a>
         </div>
       </div>
       <div class="flex flex-col gap-2 2xl:gap-4">
-        <div class="flex flex-col gap-4 h-full justify-between">
+        <div class="flex h-full flex-col justify-between gap-4">
           <div class="flex flex-col gap-2 ">
-            <div class="heading-04">
+            <div class="text-h5">
               {{ t('header.contacts.almaty.contactUs.title') }}
             </div>
-            <div class="grid grid-cols-[repeat(auto-fit,minmax(140px,1fr))] max-w-[484px] gap-x-8 gap-y-2">
+            <div class="grid max-w-[484px] grid-cols-[repeat(auto-fit,minmax(140px,1fr))] gap-x-8 gap-y-2">
               <a
                 v-for="link in newContacts"
                 :key="link.subtitle"
-                class="flex 2xl:items-center gap-1 text-deepblue-900 dark:text-white"
+                class="flex gap-1 text-deepblue-900 dark:text-white 2xl:items-center"
                 :href="link.to"
                 :target="link.icon === Whatsapp ? '_blank' : '_self'"
               >
                 <component :is="link.icon" />
-                <div class="body-400 line-clamp-1">
+                <div class="line-clamp-1 text-body-md">
                   {{ link.subtitle }}
                 </div>
               </a>
             </div>
           </div>
           <div class="flex flex-col gap-2 ">
-            <div class="heading-04 whitespace-nowrap">
+            <div class="whitespace-nowrap text-h5">
               {{ t('header.contacts.almaty.support.title') }}
             </div>
             <div class="flex flex-col lg:gap-y-5">
               <a
                 v-for="link in technicalSupport"
                 :key="link.subtitle"
-                class="flex 2xl:items-center gap-1 text-deepblue-900 dark:text-white"
+                class="flex gap-1 text-deepblue-900 dark:text-white 2xl:items-center"
                 :href="link.to"
                 target="_blank"
               >
-                <div class="body-400 line-clamp-1 text-blue-600">
+                <div class="line-clamp-1 text-body-md text-blue-600">
                   {{ link.subtitle }}
                 </div>
                 <component
@@ -72,74 +120,26 @@
           </div>
         </div>
       </div>
-<!--      Here is the financial department-->
-<!--      <div class="flex flex-col gap-2 self-end">-->
-<!--        <div class="heading-04 whitespace-nowrap">-->
-<!--          {{ t('header.contacts.almaty.financeDep.title') }}-->
-<!--        </div>-->
-<!--        <nuxt-link-->
-<!--          class="flex gap-1 items-center"-->
-<!--          to="https://api.whatsapp.com/send?phone=77713954561"-->
-<!--          target="_blank"-->
-<!--        >-->
-<!--          <div class="body-400 line-clamp-1 text-blue-600">-->
-<!--            {{ t('header.contacts.almaty.financeDep.linkTitle') }}-->
-<!--          </div>-->
-<!--          <a-icon-expand-window class="stroke-blue-600"/>-->
-<!--        </nuxt-link>-->
-<!--      </div>-->
+      <!--      Here is the financial department -->
+      <!--      <div class="flex flex-col gap-2 self-end"> -->
+      <!--        <div class="heading-04 whitespace-nowrap"> -->
+      <!--          {{ t('header.contacts.almaty.financeDep.title') }} -->
+      <!--        </div> -->
+      <!--        <nuxt-link -->
+      <!--          class="flex gap-1 items-center" -->
+      <!--          to="https://api.whatsapp.com/send?phone=77713954561" -->
+      <!--          target="_blank" -->
+      <!--        > -->
+      <!--          <div class="body-400 line-clamp-1 text-blue-600"> -->
+      <!--            {{ t('header.contacts.almaty.financeDep.linkTitle') }} -->
+      <!--          </div> -->
+      <!--          <a-icon-expand-window class="stroke-blue-600"/> -->
+      <!--        </nuxt-link> -->
+      <!--      </div> -->
     </div>
   </div>
-  <!--/noindex-->
+  <!-- /noindex -->
 </template>
 
-<script setup lang="ts">
-
-import Location from "#adata-ui/icons/location.vue";
-import Mail from "#adata-ui/icons/mail.vue";
-import Clock from "#adata-ui/icons/clock.vue";
-import Whatsapp from "#adata-ui/icons/whatsapp.vue";
-import Phone from "#adata-ui/icons/phone.vue";
-import ExpandWindow from "#adata-ui/icons/expand-window.vue";
-import {useContacts} from "#adata-ui/composables/projectState";
-
-const {t} = useI18n()
-const contacts = ref(useContacts())
-const AlmatyItems = computed(() => ([
-  {
-    title: t('header.contacts.almaty.adress.title'),
-    subtitle: t('header.contacts.almaty.adress.subtitle'),
-    icon: Location,
-    to: 'https://yandex.kz/maps/ru/org/avrora_kholding/1099794306/?ll=76.912479%2C43.208928&z=17.72'
-  },
-  {
-    title: t('header.contacts.almaty.email.title'),
-    subtitle: 'info@adata.kz',
-    icon: Mail,
-    to: 'mailto:info@adata.kz'
-  },
-  {
-    title: t('header.contacts.almaty.schedule.title'),
-    subtitle: t('header.contacts.almaty.schedule.subtitle'),
-    icon: Clock,
-  },
-]))
-
-const technicalSupport = computed(() => ([
-  {
-    subtitle: t('header.contacts.almaty.support.linkTitle'),
-    icon: ExpandWindow,
-    to: "https://api.whatsapp.com/send/?phone=77712289041"
-  }
-]))
-
-const newContacts = computed(()=> contacts.value.map(item => ({
-  subtitle: item.contact,
-  icon: item.platform_code === 'telephone' ? Phone : Whatsapp,
-  to: item.platform_code === 'telephone' ? `tel:${item.contact}`
-    : `https://api.whatsapp.com/send/?phone=${item.contact.replace(/[^0-9]/g, '')}`
-})))
-</script>
-
 <style scoped>
 </style>

package/components/navigation/header/CardGallery.vue

@@ -109,7 +109,7 @@ onUnmounted(() => clearTimer())
 
 <template>
   <div
-    class="overflow-hidden relative w-[320px] h-[480px] rounded-2xl"
+    class="overflow-hidden relative w-[320px] h-[480px] rounded-xl"
     @mouseover="handleMouseOver"
     @mouseout="handleMouseOut"
   >
@@ -120,14 +120,14 @@ onUnmounted(() => clearTimer())
       >
         <img
           :src="items[currentIndex].image"
-          class="size-full object-cover rounded-2xl"
+          class="size-full object-cover rounded-xl"
         />
         <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="absolute bottom-0 rounded-xl 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">
+                  <div class="flex items-center justify-center bg-white dark:bg-gray-900 text-blue-700 dark:text-blue-500 size-8 rounded-md">
                     <component
                       :is="items[currentIndex].icon"
                       class="size-6"
@@ -150,12 +150,12 @@ onUnmounted(() => clearTimer())
         </nuxt-link-locale>
       </div>
     </transition>
-    <div class="absolute xl:bottom-4 w-full">
+    <div class="absolute 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="relative bg-white/50 dark:bg-gray-900/50 rounded-full overflow-hidden cursor-pointer h-2 w-2 transition-[width] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]"
           :class="{ 'w-[52px]': currentIndex === index }"
           @click="setCurrentIndex(index)"
         >
@@ -188,7 +188,9 @@ onUnmounted(() => clearTimer())
   top: 0;
   left: 0;
   width: 100%;
-  transition: transform 0.3s ease, opacity 0.3s ease;
+  transition:
+    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .slide-left-enter-from {

package/components/navigation/header/ContactMenu.vue

@@ -1,19 +1,8 @@
 <script setup lang="ts">
-import AlmatyContacts from "#adata-ui/components/navigation/header/AlmatyContacts.vue";
-import AstanaContacts from "#adata-ui/components/navigation/header/AstanaContacts.vue";
+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:''
-  }
-)
+defineProps<{ url?: string }>()
 defineEmits(['outerClick', 'mouseOver'])
 
 const { t } = useI18n()
@@ -21,94 +10,39 @@ const activeTab = ref(0)
 const options = [
   {
     key: 0,
-    name: 'ТОО "Alldata"'
+    name: 'ТОО "Alldata"',
   },
   {
     key: 1,
-    name: ' ТОО «ADATA Consulting»'
+    name: ' ТОО «ADATA Consulting»',
   },
 ]
-
 </script>
 
 <template>
-  <div class=" normal-case ">
+  <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 class="a-container">
+        <div class="mb-8 flex justify-between pt-2">
+          <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>
-      </transition>
-      <button
-        class="absolute right-8 top-4"
-        @click="$emit('outerClick')"
-      >
-        <a-icon-x-mark
-          width="32"
-          height="32"
-        />
-      </button>
+      </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);
-}
-</style>