adata-ui 3.0.2 → 3.1.0

package/dist/runtime/components/forms/request-demo/RequestDemo.vue.d.ts

@@ -0,0 +1,23 @@
+type __VLS_PublicProps = {
+    'loading'?: boolean;
+    'modal'?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:loading": (value: boolean) => any;
+    "update:modal": (value: boolean) => any;
+} & {
+    onSend: (form: {
+        sender_name: string;
+        phone_number: string;
+        message: string;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onOnSend?: ((form: {
+        sender_name: string;
+        phone_number: string;
+        message: string;
+    }) => any) | undefined;
+    "onUpdate:loading"?: ((value: boolean) => any) | undefined;
+    "onUpdate:modal"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/header/AlmatyContacts.vue

@@ -0,0 +1,120 @@
+<script setup>
+import { useContacts } from "../../composables/projectState";
+import Location from "#icons/navigation/location.vue";
+import Mail from "#icons/communication/mail.vue";
+import Clock from "#icons/clock.vue";
+import ExpandWindow from "#icons/navigation/expand-window.vue";
+import { computed, ref, useI18n } from "#imports";
+import Phone from "#icons/communication/phone.vue";
+import Whatsapp from "#icons/socials/whatsapp.vue";
+const contacts = ref(useContacts());
+const { t } = useI18n();
+const AlmatyItems = [
+  {
+    title: "header.contacts.almaty.adress.title",
+    subtitle: "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: "header.contacts.almaty.email.title",
+    subtitle: "info@adata.kz",
+    icon: Mail,
+    to: "mailto:info@adata.kz"
+  },
+  {
+    title: "header.contacts.almaty.schedule.title",
+    subtitle: "header.contacts.almaty.schedule.subtitle",
+    icon: Clock
+  }
+];
+const technicalSupport = [
+  {
+    subtitle: "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>
+  <div class="h-[272px]">
+    <h2 class="heading-02 mb-4">
+      {{ 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)"
+          class="flex flex-col gap-2 "
+        >
+          <div class="heading-04">
+            {{ t(item.title) }}
+          </div>
+          <a
+            class="flex items-center gap-1 text-deepblue-900 dark:text-white"
+            :href="item.to"
+          >
+            <component
+              :is="item.icon"
+              class="shrink-0"
+            />
+            <div class=" body-400">
+              {{ t(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 flex-col gap-2 ">
+            <div class="heading-04">
+              {{ t("header.contacts.almaty.sellDep.title") }}
+            </div>
+            <div class="grid grid-cols-3 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"
+                :href="link.to"
+                :target="link.icon === Whatsapp ? '_blank' : '_self'"
+              >
+                <component :is="link.icon" />
+                <div class="body-400 line-clamp-1">
+                  {{ link.subtitle }}
+                </div>
+              </a>
+            </div>
+          </div>
+          <div class="flex flex-col gap-2 ">
+            <div class="heading-04 whitespace-nowrap">
+              {{ 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"
+                :href="link.to"
+                target="_blank"
+              >
+                <div class="body-400 line-clamp-1 text-blue-600">
+                  {{ t(link.subtitle) }}
+                </div>
+                <component
+                  :is="link.icon"
+                  class="stroke-blue-600"
+                />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/header/AlmatyContacts.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/header/AstanaContacts.vue

@@ -0,0 +1,65 @@
+<script setup>
+import Location from "#icons/navigation/location.vue";
+import Mail from "#icons/communication/mail.vue";
+import Clock from "#icons/clock.vue";
+import Whatsapp from "#icons/socials/whatsapp.vue";
+import { useI18n } from "#imports";
+const { t } = useI18n();
+const AstanaItems = [
+  {
+    title: "header.contacts.astana.adress.title",
+    subtitle: "header.contacts.astana.adress.subtitle",
+    icon: Location,
+    to: "https://yandex.kz/maps/ru/org/adata_consulting/214484722242/?ll=71.429573%2C51.131319&z=20.56"
+  },
+  {
+    title: "header.contacts.astana.email.title",
+    subtitle: "info@adata-c.kz",
+    icon: Mail,
+    to: "mailto:info@adata-c.kz"
+  },
+  {
+    title: "header.contacts.astana.schedule.title",
+    subtitle: "header.contacts.astana.schedule.subtitle",
+    icon: Clock
+  },
+  {
+    title: "header.contacts.astana.sellDep.title",
+    subtitle: "+7 700 744 00 10",
+    icon: Whatsapp,
+    to: "https://api.whatsapp.com/send/?phone=77007440010"
+  }
+];
+</script>
+
+<template>
+  <div class="h-[272px]">
+    <h2 class="heading-02 mb-4">
+      {{ t("header.contacts.astana.title") }}
+    </h2>
+    <div class="grid grid-cols-2 gap-5 ">
+      <div class="xl:grid grid-cols-2 grid-rows-3 flex flex-wrap gap-4 ">
+        <div
+          v-for="(item, index) in AstanaItems"
+          :key="index"
+          class="flex flex-col gap-2 "
+          :class="{ 'col-span-2': index === 0 }"
+        >
+          <div class="heading-04">
+            {{ t(item.title) }}
+          </div>
+          <a
+            class="flex items-center gap-1 text-deepblue-900 dark:text-white"
+            :href="item?.to"
+            :target="item.icon === Whatsapp ? '_blank' : '_self'"
+          >
+            <component :is="item.icon" />
+            <div class=" body-400">
+              {{ t(item.subtitle) }}
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/header/AstanaContacts.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/header/CardGallery.vue

@@ -0,0 +1,156 @@
+<script setup>
+import { computed, onMounted, onUnmounted, ref, useI18n } from "#imports";
+import ArrowSideUp from "#icons/arrow/arrow-side-up.vue";
+const { t } = useI18n();
+const items = computed(() => {
+  return [
+    {
+      title: "header.products.galleryCards.unload.title",
+      subtitle: "header.products.galleryCards.unload.subtitle",
+      to: "/",
+      image: "/header/unload.webp",
+      icon: ""
+    },
+    {
+      title: "header.products.galleryCards.compliance.title",
+      subtitle: "header.products.galleryCards.compliance.subtitle",
+      to: "/",
+      image: "/header/compliance.webp",
+      icon: ""
+    },
+    {
+      title: "header.products.galleryCards.ved.title",
+      subtitle: "header.products.galleryCards.ved.subtitle",
+      to: "/",
+      image: "/header/ved.webp",
+      icon: ""
+    }
+  ];
+});
+const currentIndex = ref(0);
+const transitionName = ref("slide-left");
+let timeoutId = null;
+const isHovered = ref(false);
+const intervalDuration = 3e3;
+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) => {
+  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"
+      >
+        <img
+          :src="items[currentIndex].image"
+          class="size-full object-cover rounded-2xl"
+        />
+        <nuxt-link :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>
+                <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>
+      </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 scoped>
+.progress-bar{animation:progress 3s linear forwards}@keyframes progress{0%{width:0}to{width:100%}}.slide-left-enter-active,.slide-left-leave-active,.slide-right-enter-active,.slide-right-leave-active{left:0;position:absolute;top:0;transition:transform .3s ease,opacity .3s ease;width:100%}.slide-left-enter-from{opacity:0;transform:translateX(100%)}.slide-left-enter-to,.slide-left-leave-from{opacity:1;transform:translateX(0)}.slide-left-leave-to,.slide-right-enter-from{opacity:0;transform:translateX(-100%)}.slide-right-enter-to,.slide-right-leave-from{opacity:1;transform:translateX(0)}.slide-right-leave-to{opacity:0;transform:translateX(100%)}.icon-link{opacity:0;transition:opacity .5s ease}.icon-link.visible{opacity:1}.content-wrapper{max-height:0;opacity:0;overflow:hidden;transition:max-height .5s ease,opacity .5s ease;will-change:max-height,opacity}.content-wrapper.visible{max-height:300px;opacity:1}
+</style>

package/dist/runtime/components/header/CardGallery.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/header/ContactMenu.vue

@@ -0,0 +1,105 @@
+<script setup>
+import AButton from "../button/Button.vue";
+import APillTabs from "../pill-tabs/PillTabs.vue";
+import AlmatyContacts from "./AlmatyContacts.vue";
+import AstanaContacts from "./AstanaContacts.vue";
+import { ref, useI18n } from "#imports";
+import ArrowTopRightOnSquare from "#icons/arrow/arrow-top-right-on-square.vue";
+import IXMark from "#icons/x-mark.vue";
+const props = defineProps({
+  animation: { type: String, required: false, default: "previous" },
+  index: { type: Number, required: false, default: 2 },
+  url: { type: String, required: false, default: "" }
+});
+defineEmits(["outerClick", "mouseOver"]);
+const { t } = useI18n();
+const activeTab = ref(0);
+const options = [
+  {
+    key: 0,
+    name: '\u0422\u041E\u041E "Alldata"'
+  },
+  {
+    key: 1,
+    name: " \u0422\u041E\u041E \xABADATA Consulting\xBB"
+  }
+];
+</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"
+              size="lg"
+              view="mobile"
+              :options="options"
+            />
+            <nuxt-link :to="url">
+              <a-button variant="gray">
+                {{ t("header.contacts.toContacts") }}
+                <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')"
+      >
+        <i-x-mark
+          width="32"
+          height="32"
+        />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.next-enter-from,
+.next-leave-to {
+  opacity: 0;
+  transform: translateX(30%);
+  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(-30%);
+}
+
+.prev-enter-from,
+.prev-leave-to {
+  position: absolute;
+  opacity: 0;
+  transform: translateX(-30%);
+}
+
+.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(30%);
+}
+</style>

package/dist/runtime/components/header/ContactMenu.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    animation?: string;
+    index?: number;
+    url?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    index: number;
+    animation: string;
+    url: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/header/HeaderLink.vue

@@ -0,0 +1,169 @@
+<script setup>
+import ContactMenu from "./ContactMenu.vue";
+import ProductMenu from "./ProductMenu.vue";
+import { ref, shallowRef, useI18n, onBeforeUnmount, watch, useAppConfig } from "#imports";
+const { t } = useI18n();
+const appConfig = useAppConfig();
+const mode = appConfig.adataUI.mode;
+const navs = [
+  {
+    label: "header.navs.products",
+    to: "/"
+  },
+  {
+    label: "header.navs.contacts",
+    to: `https://${mode}.kz/contacts`
+  },
+  {
+    label: "header.navs.tariffs",
+    to: `https://${mode}.kz/tariffs`
+  }
+];
+const menu = ref(null);
+const isBodyAlreadyLocked = ref(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(null);
+const currentMenuToShow = (index) => {
+  switch (index) {
+    case 0:
+      return ProductMenu;
+    case 1:
+      return ContactMenu;
+    case 2:
+      return null;
+  }
+};
+const toggleMenu = (index) => {
+  if (index === 2) {
+    window.open(`https://${mode}.kz/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) => {
+  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, lock) => {
+  if (lock) {
+    setTimeout(() => {
+    }, 0);
+    return;
+  }
+};
+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>
+  <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 class="absolute left-[-8px] w-[calc(100%+16px)]">
+&nbsp;
+        </div>
+      </div>
+      <div
+        v-show="show"
+        class="fixed left-0 top-[104px] z-20 h-full w-full"
+      >
+        <transition :name="animation">
+          <keep-alive>
+            <component
+              :is="currentMenu"
+              v-show="show"
+              ref="menu"
+              :url="currentIndex === 1 ? `https://${mode}.kz/contacts` : nav.to"
+              :animation="forward ? 'next' : 'prev'"
+              :index="currentIndex"
+              @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>
+    </li>
+  </ul>
+</template>

package/dist/runtime/components/header/HeaderLink.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;