adata-ui 0.3.99 → 2.0.0

package/components/modals/SubmitApplicationModal.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import * as z from 'zod'
+import { useUIValidation } from '#adata-ui/composables/useUIValidation'
+
+const emit = defineEmits<{
+  (e: 'send', num: number): void
+}>()
+const { t } = useI18n()
+const isOpen = defineModel<boolean>({default: false})
+const form: any = reactive({
+  name: '',
+  email: '',
+  phone: '',
+  comment: '',
+})
+
+const scheme = z.object({
+  name: z.string().nonempty(t('modals.submit_application_modal.rules.required')),
+  email: z.string().nonempty(t('modals.submit_application_modal.rules.required')).email(t('modals.submit_application_modal.rules.email')),
+  phone: z.string().nonempty(t('modals.submit_application_modal.rules.required')).min(17, t('forms.feedback.phoneMinLength', { count: 10 })),
+  comment: z.string().nonempty(t('modals.submit_application_modal.rules.required')),
+})
+
+const submitted = ref(false)
+
+const { validation, getError } = useUIValidation(
+  scheme,
+  () => form,
+  submitted,
+)
+
+const send = () => {
+  submitted.value = true
+  if (validation.value) return
+  emit('send', form)
+  form.name = ''
+  form.email = ''
+  form.phone = ''
+  form.comment = ''
+
+}
+const cancel = () => {
+  isOpen.value = false
+}
+
+defineExpose({
+  reset: () => (submitted.value = false),
+})
+</script>
+
+<template>
+  <a-modal
+    v-model="isOpen"
+    name="submit-application"
+    :prevent-close="true"
+  >
+    <div class="flex flex-col gap-5">
+      <p class="text-center heading-02">
+        {{ t('modals.submit_application_modal.title') }}
+      </p>
+      <a-ill-mail class="w-full" />
+      <div class="flex flex-col gap-2">
+        <a-input-standard
+          v-model="form.name"
+          :label="t('modals.submit_application_modal.labels.name')"
+          :error="getError('name')"
+        />
+        <a-input-standard
+          v-model="form.email"
+          :label="t('modals.submit_application_modal.labels.email')"
+          :error="getError('email')"
+        />
+        <a-input-standard
+          v-model="form.phone"
+          v-maska
+          :label="t('modals.submit_application_modal.labels.phone')"
+          data-maska="8 (###) ###-##-##"
+          :error="getError('phone')"
+          clearable
+          required
+        />
+        <a-textarea
+          v-model="form.comment"
+          :label="t('modals.submit_application_modal.labels.comment')"
+          :error="getError('comment')"
+        />
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex gap-2 ">
+        <a-button
+          view="outline"
+          block
+          @click="cancel"
+        >
+          {{ t('reuse.close') }}
+        </a-button>
+        <a-button
+          block
+          @click="send"
+        >
+          {{ t('reuse.send') }}
+        </a-button>
+      </div>
+    </template>
+  </a-modal>
+</template>
+
+<style scoped>
+
+</style>

package/components/navigation/README.md

@@ -0,0 +1 @@
+# breadcrumb, tabs

package/components/navigation/bottom-navigation/ABottomNavigation.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts" generic="T extends NavigationItem">
+
+import Avatar from "#adata-ui/icons/avatar.vue";
+import IconLogout from "#adata-ui/icons/logout.vue";
+
+const {t} = useI18n()
+const appConfig = useAppConfig()
+const loginUrl = appConfig.myLayer.loginUrl
+
+interface Props {
+  grow?: boolean
+  items: T[]
+  modelValue: string | null
+  replenish?: string
+  hasNotification?: boolean
+  email: string | undefined
+  rate: string
+  daysRemaining: number
+  limitRemaining: number
+  balance: number
+  isAuthenticated: boolean
+  showLogIn?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  limitRemaining: 0,
+  daysRemaining: 0,
+  balance: 0,
+  rate: 'Базовый',
+  showLogIn: true
+})
+const emit = defineEmits(['update:modelValue', 'logout'])
+
+const goAuth = () => {
+  if (window) {
+    let fullPath = encodeURIComponent(window.location.toString())
+    if (fullPath.includes('basic-info')) {
+      fullPath = fullPath.replace('%2Fcounterparty/main', '').replace('%2Fbasic-info', '')
+    }
+    window.location.href = `${loginUrl}?url=${fullPath}`
+  }
+}
+const onClick = (value: string) => {
+  if (value === props.modelValue) value = ''
+  emit('update:modelValue', value)
+}
+
+const login: string = 'header.login';
+const profile: string = 'modals.mobile_navigation.type_profile';
+
+
+</script>
+<template>
+  <header class="w-full border-t border-[#9DA3AC80] bg-white dark:bg-gray-900">
+    <div class="grid w-full grid-cols-3 justify-items-center">
+      <slot>
+        <button
+          v-for="(item, index) in items"
+          :key="index"
+          class="h-16 w-auto min-w-16 max-w-[168px] lg:hover:bg-blue-700/20 lg:hover:text-blue-700"
+          :class="{ grow, 'text-blue-700': modelValue === item.value }"
+          @click="onClick(item.value)"
+        >
+          <span class="flex flex-col items-center justify-center text-[10px] leading-5 lg:text-sm">
+            <template v-if="Object.prototype.hasOwnProperty.call(item, 'icon')">
+              <component
+                :is="item.icon"
+                class="h-6 w-6"
+              />
+            </template>
+            {{ t(item.label) }}
+          </span>
+        </button>
+        <button
+          v-show="isAuthenticated"
+          @click="onClick('profile')"
+          class="h-16 w-auto min-w-16 max-w-[168px]"
+        >
+          <span class="flex flex-col items-center justify-center text-[10px] leading-5 lg:text-sm">
+            <avatar
+              class="bg-gray outline-blue h-6 w-6 rounded-full"
+            />
+            {{ t(profile) }}
+          </span>
+        </button>
+        <button
+          v-show="!isAuthenticated && showLogIn"
+          class="h-16 w-auto min-w-16 max-w-[168px]"
+          @click="goAuth"
+        >
+          <span class="flex flex-col items-center justify-center text-[10px] leading-5 lg:text-sm">
+            <icon-logout class="lg:h-6 lg:w-6" />
+            {{ t(login) }}
+          </span>
+        </button>
+      </slot>
+    </div>
+  </header>
+</template>
+
+<style scoped></style>

package/components/navigation/breadcrumbs/ABreadcrumbs.vue

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import type { Crumb } from './types'
+import { twMerge } from 'tailwind-merge'
+
+defineProps<{
+  links: Crumb[]
+  customClasses?: string
+}>()
+
+const { t } = useI18n()
+</script>
+<template>
+  <div class="">
+    <ul
+      class="flex gap-1"
+      itemscope
+      itemtype="https://schema.org/BreadcrumbList"
+    >
+      <li
+        v-for="(breadcrumbItem, idx) in links"
+        :key="idx"
+        :class="
+          twMerge(
+            'flex items-center text-xs text-gray-500 underline-offset-2 last-of-type:text-deepblue-900 hover:underline dark:last-of-type:text-gray-200',
+            customClasses
+          )
+        "
+        itemprop="itemListElement"
+        itemscope
+        itemtype="https://schema.org/ListItem"
+      >
+        <meta
+          itemprop="position"
+          :content="`${idx}`"
+        >
+        <slot
+          name="icon"
+          :breadcrumb-item="breadcrumbItem"
+          :index="idx"
+        >
+          <span v-if="idx !== 0">
+            <a-icon-chevron-right />
+          </span>
+        </slot>
+        <nuxt-link-locale
+          v-if="breadcrumbItem.to"
+          class="pl-1"
+          :to="breadcrumbItem.to"
+          rel="noopener noreferrer"
+          itemprop="item"
+        >
+          <span itemprop="name">
+            {{ t(breadcrumbItem.label) }}
+          </span>
+        </nuxt-link-locale>
+        <span
+          v-else
+          class="pl-1"
+          itemprop="name"
+        >
+          {{ t(breadcrumbItem.label) }}
+        </span>
+      </li>
+    </ul>
+  </div>
+</template>

package/components/navigation/breadcrumbs/types.ts

@@ -0,0 +1,4 @@
+export interface Crumb {
+  label: string
+  to: string
+}

package/components/navigation/footer/AFooter.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import AdataLogo from '#adata-ui/icons/adata-logo.vue'
+import YouTubeIcon from '#adata-ui/icons/socials/youtube.vue'
+import InstagramIcon from '#adata-ui/icons/socials/instagram.vue'
+import TelegramIcon from '#adata-ui/icons/socials/telegram.vue'
+import FaceBookIcon from '#adata-ui/icons/socials/face-book.vue'
+import TikTokIcon from '#adata-ui/icons/socials/tik-tok.vue'
+import LinkedinIcon from '#adata-ui/icons/linkedin.vue'
+import FooterAccordion from './ui/footer-acccordion.vue'
+import { PAGES } from '#adata-ui/shared/constans/pages'
+import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
+import { useFooterInfoLinks, useFooterNavigationLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
+
+const { myLayer }: any = useAppConfig()
+const { t, locale } = useI18n()
+const year = new Date().getFullYear()
+
+const socialMedia = [
+  {
+    icon: LinkedinIcon,
+    link: 'https://www.linkedin.com/company/adata-kz/?viewAsMember=true',
+    name: 'Linkedin'
+  },
+  {
+    icon: YouTubeIcon,
+    link: 'https://www.youtube.com/channel/UCPkbtgwgTZbMJXjmTi3R8Uw/featured',
+    name: 'YouTube'
+  },
+  {
+    icon: InstagramIcon,
+    link: 'https://www.instagram.com/adata.kz/?igshid=253i4qxg3els',
+    name: 'Instagram'
+  },
+  {
+    icon: TelegramIcon,
+    link: 'https://t.me/adatakz_official',
+    name: 'Telegram'
+  },
+  {
+    icon: FaceBookIcon,
+    link: 'https://www.facebook.com/adata.kz',
+    name: 'Facebook'
+  },
+  {
+    icon: TikTokIcon,
+    link: 'https://www.tiktok.com/@adata.kz?lang=ru-RU',
+    name: 'Tiktok'
+  }
+]
+
+const info = useFooterInfoLinks()
+
+const links = useFooterNavigationLinks()
+</script>
+
+<template>
+  <div
+    id="footer"
+    class="bg-deepblue-900 dark:bg-gray-900 lg:pt-10"
+  >
+    <div class="a-container mobile-padding py-5 text-white">
+      <adata-logo
+        filled
+        :font-controlled="false"
+        class="mb-8 h-[26px] w-[92px] lg:hidden"
+      />
+      <div class="grid gap-5 lg:grid-cols-5 lg:gap-10 xl:grid-cols-6">
+        <div
+          v-for="(link, key) in links"
+          :key="key"
+        >
+          <footer-accordion
+            :content="link.items"
+            :label="t(link.title)"
+            :link="link.link.replace(/\/$/, '')"
+          />
+        </div>
+      </div>
+      <div class="flex grow justify-end gap-8 py-5">
+        <nuxt-link
+          v-for="(social, idx) in socialMedia"
+          :key="idx"
+          target="_blank"
+          :to="social.link"
+          :aria-label="social.name"
+        >
+          <component
+            :is="social.icon"
+            filled
+            :font-controlled="false"
+            class="social-icon h-[28px] w-[28px]"
+          />
+        </nuxt-link>
+      </div>
+    </div>
+    <div class="relative">
+      <div class="a-container mobile-padding py-5">
+        <div
+          class="flex flex-col gap-10 text-xs text-white before:absolute before:left-0 before:top-0 before:h-[0.5px] before:w-full before:bg-white lg:flex-row lg:items-center lg:gap-5"
+        >
+          <div class="flex flex-col gap-4 lg:flex-row lg:gap-6">
+            <nuxt-link-locale
+              v-for="(item, idx) in info"
+              :key="idx"
+              target="_blank"
+              class="text-[10px]"
+              :to="item.link"
+            >
+              {{ t(item.title) }}
+            </nuxt-link-locale>
+          </div>
+          <div class="flex justify-center lg:grow lg:items-center lg:justify-end lg:gap-4">
+            <div class="flex flex-col gap-1">
+              <span>{{ year }} © {{ t('footer.LLP') }} "Alldata"</span>
+            </div>
+            <adata-logo
+              filled
+              :font-controlled="false"
+              class="hidden h-[26px] w-[92px] lg:block"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/components/navigation/footer/NewFooter.vue

@@ -0,0 +1,276 @@
+<script setup lang="ts">
+import AdataLogo from '#adata-ui/icons/adata-logo.vue'
+import LinkedinIcon from '#adata-ui/icons/linkedin.vue'
+import YouTubeIcon from '#adata-ui/icons/socials/youtube.vue'
+import InstagramIcon from '#adata-ui/icons/socials/instagram.vue'
+import TelegramIcon from '#adata-ui/icons/socials/telegram.vue'
+import FaceBookIcon from '#adata-ui/icons/socials/face-book.vue'
+import TikTokIcon from '#adata-ui/icons/socials/tik-tok.vue'
+import NewFooterAccordion from '#adata-ui/components/navigation/footer/ui/new-footer-accordion.vue'
+import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
+import { PAGES } from '#adata-ui/shared/constans/pages'
+import { AIconExpandWindow, AIconLocation, AIconMail, AIconPhone } from '#components'
+
+const year = new Date().getFullYear()
+const { t, locale } = useI18n()
+const { myLayer } = useAppConfig()
+
+const socialMedia = [
+  {
+    icon: LinkedinIcon,
+    link: 'https://www.linkedin.com/company/adata-kz/?viewAsMember=true',
+    name: 'Linkedin'
+  },
+  {
+    icon: YouTubeIcon,
+    link: 'https://www.youtube.com/channel/UCPkbtgwgTZbMJXjmTi3R8Uw/featured',
+    name: 'YouTube'
+  },
+  {
+    icon: InstagramIcon,
+    link: 'https://www.instagram.com/adata.kz/?igshid=253i4qxg3els',
+    name: 'Instagram'
+  },
+  {
+    icon: TelegramIcon,
+    link: 'https://t.me/adatakz_official',
+    name: 'Telegram'
+  },
+  {
+    icon: FaceBookIcon,
+    link: 'https://www.facebook.com/adata.kz',
+    name: 'Facebook'
+  },
+  {
+    icon: TikTokIcon,
+    link: 'https://www.tiktok.com/@adata.kz?lang=ru-RU',
+    name: 'Tiktok'
+  }
+]
+
+const mainLinks = {
+  services: {
+    title: 'footer.services',
+    items: [
+      [
+        {
+          title: 'footer.counterparties.title',
+          link: buildLocalizedUrl(locale.value, myLayer.pkUrl, ''),
+        },
+        {
+          title: 'footer.fines.title',
+          link: buildLocalizedUrl(locale.value, myLayer.avtoUrl, PAGES.fines.main),
+        },
+        {
+          title: 'footer.work.title',
+          link: myLayer.workUrl + PAGES.work.vacancy,
+        },
+        {
+          title: 'footer.analytics.title',
+          link: buildLocalizedUrl(locale.value, 'https://analytics-new.adata.kz', PAGES.analytics.main),
+        },
+        {
+          title: 'footer.tenders.title',
+          link: myLayer.tenderUrl + PAGES.tender.main,
+        }
+      ],
+      [
+        {
+          title: 'footer.compliance.title',
+          link: myLayer?.complianceUrl + PAGES.compliance.l,
+          isNew: true
+        },
+        {
+          title: 'header.products.edo.label',
+          link: (myLayer?.edoUrl ?? 'https://edo.adata.kz') + PAGES.edo.l,
+          isNew: true
+        },
+        {
+          title: 'footer.fea.title',
+          link: buildLocalizedUrl(locale.value, myLayer.tnvedUrl, PAGES.fea.main),
+          isNew: true
+        },
+      ]
+    ]
+  },
+  useful: {
+    title: 'footer.useful',
+    link: buildLocalizedUrl(locale.value, myLayer.landingUrl, PAGES.usefulMain),
+    items: [
+      [
+        {
+          title: 'footer.info.api',
+          link: buildLocalizedUrl(locale.value, myLayer.landingUrl, PAGES.apiDescription),
+        },
+        {
+          title: 'footer.info.userAgreement',
+          link: buildLocalizedUrl(locale.value, myLayer.landingUrl, PAGES.userAgreement),
+        },
+        {
+          title: 'footer.info.privacyPolicy',
+          link: buildLocalizedUrl(locale.value, myLayer.landingUrl, PAGES.privacy),
+        },
+        {
+          title: 'footer.info.vacancy',
+          link: buildLocalizedUrl(locale.value, myLayer.landingUrl, PAGES.vacancy),
+        },
+        {
+          title: 'footer.info.counterparty',
+          link: buildLocalizedUrl(locale.value, myLayer.pkUrl, PAGES.pk.counterparty),
+        },
+      ]
+    ]
+  }
+}
+
+const contactLinks = {
+  title: 'footer.contacts.title',
+  link: buildLocalizedUrl(locale.value, myLayer.landingUrl, PAGES.contacts),
+  items: [
+    {
+      title: t('footer.contacts.address'),
+      link: 'https://go.2gis.com/30j2f',
+      startIcon: AIconLocation,
+      endIcon: null,
+    },
+    {
+      title: '+7 (747) 120 34 67',
+      link: 'tel:+77471203467',
+      startIcon: AIconPhone,
+      endIcon: null,
+    },
+    {
+      title: 'info@adata.kz',
+      link: 'mailto:info@adata.kz',
+      startIcon: AIconMail,
+      endIcon: null,
+    },
+    {
+      title: t('footer.contacts.goToChat'),
+      link: 'https://api.whatsapp.com/send?phone=77712289041',
+      startIcon: null,
+      endIcon: AIconExpandWindow,
+      class: 'font-bold',
+    },
+  ],
+}
+
+</script>
+
+<template>
+  <footer
+    id="footer"
+    class="bg-deepblue-900 dark:bg-gray-900 py-4 lg:py-5 rounded-t-3xl"
+  >
+    <div class="a-container mobile-padding py-5 text-white flex flex-col lg:flex-row justify-between gap-8">
+      <div class="flex flex-col gap-8 justify-between">
+        <div class="flex flex-col gap-4">
+          <adata-logo
+            filled
+            :font-controlled="false"
+            class="shrink-0"
+          />
+
+          <p class="text-sm">
+            {{ t('footer.subtitle') }}
+          </p>
+
+          <div class="hidden lg:flex gap-8">
+            <nuxt-link
+              v-for="(social, idx) in socialMedia"
+              :key="idx"
+              target="_blank"
+              :to="social.link"
+              :aria-label="social.name"
+            >
+              <span class="visually-hidden"> {{ social.name }}</span>
+              <component
+                :is="social.icon"
+                filled
+                :font-controlled="false"
+                class="social-icon size-7"
+              />
+            </nuxt-link>
+          </div>
+        </div>
+
+        <p class="hidden lg:block text-[10px]">
+          {{ year }} © {{ t('footer.LLP') }} "Alldata"
+        </p>
+      </div>
+
+      <div class="flex gap-6 lg:gap-[75px] flex-col lg:flex-row">
+        <div class="flex gap-[18px] lg:gap-[75px] flex-col lg:flex-row">
+          <div
+            v-for="(item, idx) in mainLinks"
+            :key="idx"
+          >
+            <new-footer-accordion
+              :label="t(item.title)"
+              :link="item?.link?.replace(/\/$/, '')"
+              :content="item.items"
+            />
+          </div>
+        </div>
+
+        <div class="flex flex-col gap-2 items-start">
+          <nuxt-link
+            class="text-sm font-semibold pb-3 pr-4 border-b-[0.5px] border-white cursor-pointer"
+            :to="contactLinks.link?.replace(/\/$/, '')"
+          >
+            {{ t(contactLinks.title) }}
+          </nuxt-link>
+
+          <div class="flex flex-col gap-3 lg:gap-2">
+            <div
+              v-for="(link, idx) in contactLinks.items"
+              :key="idx"
+              class="flex gap-2 items-center"
+            >
+              <nuxt-link
+                class="text-xs font-medium flex gap-2 items-center cursor-pointer"
+                :class="link.class"
+                :to="link.link?.replace(/\/$/, '')"
+              >
+                <component
+                  :is="link.startIcon"
+                  v-if="link.startIcon"
+                  class="size-4 shrink-0"
+                />
+
+                <p>{{ link.title }}</p>
+
+                <component
+                  :is="link.endIcon"
+                  v-if="link.endIcon"
+                  class="size-4 shrink-0"
+                />
+              </nuxt-link>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="lg:hidden flex gap-8 flex-wrap">
+        <nuxt-link
+          v-for="(social, idx) in socialMedia"
+          :key="idx"
+          target="_blank"
+          :to="social.link"
+          :aria-label="social.name"
+        >
+          <component
+            :is="social.icon"
+            filled
+            :font-controlled="false"
+            class="social-icon size-7"
+          />
+        </nuxt-link>
+      </div>
+
+      <p class="lg:hidden text-[10px]">
+        {{ year }} © {{ t('footer.LLP') }} "Alldata"
+      </p>
+    </div>
+  </footer>
+</template>