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

package/components/features/pk-mobile-services/APkMobileServices.vue

@@ -1,16 +1,10 @@
 <script setup lang="ts">
-import { PAGES } from '#adata-ui/shared/constans/pages'
 import { usePkServicesLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
-import { useUrls } from '#adata-ui/composables/useUrls'
+import { useActiveNavigation } from '#adata-ui/composables/useActiveNavigation'
 import { NuxtLinkLocale } from '#components'
 
 const services = usePkServicesLinks()
-const route = useRoute()
-const localePath = useLocalePath()
-const { landing } = useUrls()
-const { locale } = useI18n()
-
-const pageUrl = useRequestURL()
+const { isActiveService } = useActiveNavigation()
 
 const blockStyles = [
   'first-border-gradient',
@@ -23,22 +17,6 @@ const blockStyles = [
   'eighth-border-gradient',
   'ninth-border-gradient',
 ]
-const linkByIndex = [
-  PAGES.pk.main,
-  PAGES.pk.employees,
-  PAGES.pk.connections,
-  PAGES.pk.offshore,
-  PAGES.pk.foreign,
-  PAGES.pk.unload,
-  PAGES.pk.compare,
-  PAGES.pk.sanctions,
-  buildLocalizedUrl(locale, landing, '/all-services'),
-]
-
-const normalize = (path: string) => {
-  const cleaned = path.replace(/\/+$/, '')
-  return cleaned === '' ? '/' : cleaned
-}
 </script>
 
 <template>
@@ -46,15 +24,15 @@ const normalize = (path: string) => {
     <component
       v-for="(service, index) in services"
       :key="index"
-      :is="normalize(localePath(service.short)) === normalize(route.path) && pageUrl.hostname.startsWith('pk') ? 'div' : NuxtLinkLocale"
-      :to="normalize(localePath(service.short)) === normalize(route.path) ? '' : service.to"
+      :is="isActiveService(service.to) ? 'div' : NuxtLinkLocale"
+      :to="isActiveService(service.to) ? '' : service.to"
       :class="['flex flex-col items-center gap-2 p-2', blockStyles[index]]"
     >
       <div
-        class="size-10 p-2 rounded-lg"
+        class="size-10 p-2 rounded-md"
         :class="[
           'bg-deepblue-900/5 dark:bg-gray-200/5',
-          {'!bg-blue-700 text-white dark:!bg-blue-500 ': route.path.replace(/\/+$/, '') === localePath(linkByIndex[index]).replace(/\/+$/, '')}
+          {'!bg-blue-700 text-white dark:!bg-blue-500 ': isActiveService(service.to)}
         ]"
       >
         <component

package/components/features//321/201hange-version/AChangeVersion.vue

@@ -10,9 +10,9 @@ const { t } = useI18n()
   <nuxt-link
     :to="url"
     target="_blank"
-    class="flex cursor-pointer items-center justify-center gap-1 rounded-md bg-blue-700/10 px-3 py-2 text-blue-700"
+    class="flex cursor-pointer items-center justify-center gap-1 rounded-sm bg-blue-700/10 px-3 py-2 text-blue-700 transition-colors duration-150 hover:bg-blue-700/15 dark:bg-blue-400/10 dark:text-blue-300 dark:hover:bg-blue-400/20"
   >
-    <span class="body-400">{{ t('header.oldVersion') }}</span>
+    <span class="text-body-md">{{ t('header.oldVersion') }}</span>
     <a-icon-arrow-bottom-left-on-square class="rotate-180" />
   </nuxt-link>
 </template>

package/components/forms/checkbox/ACheckbox.vue

@@ -58,7 +58,7 @@
 </template>
 
 <script setup lang="ts">
-import { twMerge } from 'tailwind-merge'
+import { twMerge } from '#adata-ui/utils/twMerge'
 
 
 defineOptions({ name: 'ACheckbox' })

package/components/forms/checkbox/ACheckboxV2.vue

@@ -0,0 +1,229 @@
+<script setup lang="ts">
+type Size = 'sm' | 'md' | 'lg'
+type Side = 'left' | 'right'
+type View = 'checkbox' | 'chip'
+
+const props = withDefaults(defineProps<{
+  value?: string | number | boolean | Record<string, unknown> | null
+  view?: View
+  size?: Size
+  side?: Side
+  intermediate?: boolean
+  disabled?: boolean
+  name?: string
+  label?: string
+}>(), {
+  value: null,
+  view: 'checkbox',
+  size: 'md',
+  side: 'right',
+  intermediate: false,
+  disabled: false,
+})
+
+const modelValue = defineModel<boolean | unknown[]>({ required: true })
+
+const slots = useSlots()
+
+const isChecked = computed(() => {
+  const v = modelValue.value
+  if (Array.isArray(v)) return v.includes(props.value as never)
+  return v === true
+})
+
+const ariaChecked = computed<'true' | 'false' | 'mixed'>(() => {
+  if (props.intermediate) return 'mixed'
+  return isChecked.value ? 'true' : 'false'
+})
+
+const hasLabel = computed(() => Boolean(props.label) || Boolean(slots.default?.().length))
+
+function toggle() {
+  if (props.disabled) return
+
+  const current = modelValue.value
+  if (Array.isArray(current)) {
+    const next = [...current]
+    const idx = next.indexOf(props.value as never)
+    if (idx === -1) next.push(props.value as never)
+    else next.splice(idx, 1)
+    modelValue.value = next
+  }
+  else {
+    modelValue.value = !current
+  }
+}
+
+const gapClass = computed(() => {
+  switch (props.size) {
+    case 'sm': return 'gap-1.5'
+    case 'lg': return 'gap-2.5'
+    default: return 'gap-2'
+  }
+})
+
+const textClass = computed(() => {
+  switch (props.size) {
+    case 'sm': return 'text-body-sm'
+    case 'lg': return 'text-body-lg'
+    default: return 'text-body-md'
+  }
+})
+
+const squareSizeClass = computed(() => {
+  switch (props.size) {
+    case 'sm': return 'size-4'
+    case 'lg': return 'size-6'
+    default: return 'size-[18px]'
+  }
+})
+
+const isActive = computed(() => isChecked.value || props.intermediate)
+
+const squareClass = computed(() => {
+  const base = [
+    'checkbox-square inline-flex shrink-0 items-center justify-center rounded-sm border transition-colors duration-150',
+    squareSizeClass.value,
+  ]
+
+  if (isActive.value) {
+    base.push('border-transparent bg-blue-700 text-white dark:bg-blue-500')
+  }
+  else {
+    base.push('border-gray-300 bg-white text-transparent dark:border-gray-600 dark:bg-white/[0.04]')
+    if (!props.disabled) {
+      base.push('group-hover/cb:border-blue-500 dark:group-hover/cb:border-blue-400')
+    }
+  }
+
+  return base.join(' ')
+})
+
+const chipClass = computed(() => {
+  const base = [
+    'inline-flex items-center rounded-full border px-3 py-1 text-body-sm transition-colors duration-150',
+  ]
+
+  if (isActive.value) {
+    base.push('border-transparent bg-blue-700 text-white dark:bg-blue-500 dark:text-gray-900')
+  }
+  else {
+    base.push('border-gray-300 bg-transparent text-gray-700 dark:border-gray-600 dark:text-gray-300')
+    if (!props.disabled) {
+      base.push('group-hover/cb:border-gray-400 dark:group-hover/cb:border-gray-500')
+    }
+  }
+
+  return base.join(' ')
+})
+
+const labelClass = computed(() => `${textClass.value} leading-none text-deepblue-900 dark:text-gray-200`)
+
+const rootClass = computed(() => {
+  const base = [
+    'checkbox-v2 group/cb inline-flex items-center select-none rounded transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900',
+  ]
+
+  if (props.view === 'checkbox') {
+    base.push(gapClass.value)
+  }
+
+  if (props.disabled) {
+    base.push('cursor-not-allowed opacity-50')
+  }
+  else {
+    base.push('cursor-pointer')
+  }
+
+  return base.join(' ')
+})
+</script>
+
+<template>
+  <button
+    type="button"
+    role="checkbox"
+    :aria-checked="ariaChecked"
+    :aria-disabled="disabled || undefined"
+    :disabled="disabled"
+    :name="name"
+    :class="rootClass"
+    @click="toggle"
+    @keydown.space.prevent="toggle"
+  >
+    <template v-if="view === 'checkbox'">
+      <span v-if="side === 'left' && hasLabel" :class="labelClass">
+        <slot>{{ label }}</slot>
+      </span>
+
+      <span :class="squareClass">
+        <svg
+          v-if="intermediate"
+          class="checkbox-intermediate size-3/4"
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          aria-hidden="true"
+        >
+          <line x1="3" y1="8" x2="13" y2="8" stroke-width="2" stroke-linecap="round" />
+        </svg>
+        <svg
+          v-else-if="isChecked"
+          class="checkbox-check size-3/4"
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            d="M3 8.5 L6.5 12 L13 4.5"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </span>
+
+      <span v-if="side === 'right' && hasLabel" :class="labelClass">
+        <slot>{{ label }}</slot>
+      </span>
+    </template>
+
+    <span v-else :class="chipClass">
+      <slot>{{ label }}</slot>
+    </span>
+  </button>
+</template>
+
+<style scoped lang="scss">
+.checkbox-check path {
+  stroke-dasharray: 22;
+  stroke-dashoffset: 22;
+  animation: check-draw 220ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
+.checkbox-intermediate line {
+  stroke-dasharray: 14;
+  stroke-dashoffset: 14;
+  animation: check-draw 160ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
+@keyframes check-draw {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .checkbox-check path,
+  .checkbox-intermediate line {
+    animation: none;
+    stroke-dashoffset: 0;
+  }
+
+  .checkbox-v2,
+  .checkbox-square {
+    transition: none;
+  }
+}
+</style>

package/components/forms/feedback-form/FeedbackForm.vue

@@ -152,26 +152,26 @@ onMounted(() => {
     </AButton>
   </section>
 
-  <a-modal
+  <a-modal-v2
     v-model="isModalOpen"
     width="424px"
     @close="isModalOpen = false"
   >
-    <div class="flex flex-col items-center gap-5">
-      <h4 class="heading-04">
+    <div class="flex flex-col items-center gap-4 px-6 py-4">
+      <a-ill-mail />
+      <h4 class="text-[18px] font-semibold">
         {{ t('forms.feedback.modalTitle') }}
       </h4>
-      <a-ill-mail />
       <p class="body-400 max-[352xp]">
         {{ t('forms.feedback.modalSubtitle') }}
       </p>
-      <AButton
-        block
+      <a-button-v2
         view="outline"
+        block
         @click="isModalOpen = false"
       >
         {{ t('forms.feedback.close') }}
-      </AButton>
+      </a-button-v2>
     </div>
-  </a-modal>
+  </a-modal-v2>
 </template>

package/components/forms/feedback-form/FeedbackFormV2.vue

@@ -0,0 +1,182 @@
+<script lang="ts" setup>
+import * as z from 'zod'
+import { useUIValidation } from '#adata-ui/composables/useUIValidation'
+import MessageSquare from '#adata-ui/icons/message/message-square.vue'
+import AInputV2 from '#adata-ui/components/forms/input/AInputV2.vue'
+import ATextareaV2 from '#adata-ui/components/forms/input/textarea/ATextareaV2.vue'
+import AButtonV2 from '#adata-ui/components/elements/button/AButtonV2.vue'
+
+const props = withDefaults(defineProps<{
+  userInfo: any
+  title?: string
+  subtitle?: string
+}>(), {
+  title: undefined,
+  subtitle: undefined,
+})
+
+const emit = defineEmits(['submit'])
+
+const { t } = useI18n()
+
+const isLoading = defineModel< null | any>('isLoading', { default: false })
+const isModalOpen = defineModel< null | any>('isModalOpen', { default: false })
+
+const fullName = ref<string>('')
+const phone = ref<string>('')
+const mail = ref<string>('')
+const comment = ref<string>('')
+
+const submitted = ref(false)
+
+const scheme = z.object({
+  fullName: z.string().nonempty(t('forms.feedback.fieldRequired')),
+  phone: z.string().nonempty(t('forms.feedback.fieldRequired')).min(17, t('forms.feedback.phoneMinLength', { count: 10 })),
+  mail: z.string().nonempty(t('forms.feedback.fieldRequired')).email(t('forms.feedback.emailValid')),
+  comment: z.string().nonempty(t('forms.feedback.fieldRequired')).min(10, t('forms.feedback.commentMinLength', { count: 10 })).max(250, t('forms.feedback.commentMaxLength', { count: 250 })),
+})
+
+const { validation, getError } = useUIValidation(
+  scheme,
+  () => ({
+    fullName: fullName.value,
+    phone: phone.value,
+    mail: mail.value,
+    comment: comment.value,
+  }),
+  submitted,
+)
+
+const send = () => {
+  submitted.value = true
+  if (validation.value) return;
+
+  emit('submit', { sender_name: fullName.value, phone_number: phone.value, email: mail.value, message: comment.value })
+  submitted.value = false
+  fullName.value = ''
+  phone.value = ''
+  mail.value = props.userInfo?.email || ''
+  comment.value = ''
+}
+
+defineExpose({
+  reset: () => (submitted.value = false),
+})
+
+onMounted(() => {
+  mail.value = props.userInfo?.email || ''
+})
+</script>
+
+<template>
+  <section class="feedback-v2">
+    <div class="grid grid-cols-1 items-center gap-8 rounded-[28px] border border-blue-100 bg-gradient-to-br from-blue-50 to-blue-100 p-4 md:gap-10 md:p-12 lg:grid-cols-2">
+      <div>
+        <div class="mb-4 inline-flex items-center gap-2 rounded-full border border-blue-100 bg-white px-3 py-1.5 text-body-md text-blue-600">
+          <message-square class="size-3.5" />
+          {{ t('forms.feedback.value') }}
+        </div>
+
+        <h2 class="text-h2 md:text-display-sm">
+          {{ title ?? t('forms.feedback.title') }}
+        </h2>
+        <p class="mt-3 max-w-[448px] text-body-sm md:text-body-lg text-gray-600">
+          {{ subtitle ?? t('forms.feedback.subtitle') }}
+        </p>
+
+        <div class="mt-6 flex flex-col gap-3">
+          <slot name="contacts" />
+        </div>
+      </div>
+
+      <div class="rounded-[24px] border border-gray-200 bg-white p-4 md:p-7 shadow-xl shadow-blue-600/10">
+        <form
+          class="flex flex-col gap-3"
+          @submit.prevent="send"
+        >
+          <a-input-v2
+            v-model="fullName"
+            variant="gray"
+            size="md"
+            required
+            :label="t('forms.demo.n')"
+            :error="getError('fullName')"
+            :disabled="isLoading"
+          />
+          <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            <a-input-v2
+              v-model="phone"
+              type="tel"
+              variant="gray"
+              size="md"
+              required
+              mask="8 (###) ###-##-##"
+              :label="t('forms.feedback.phone')"
+              :error="getError('phone')"
+              :disabled="isLoading"
+            />
+            <a-input-v2
+              v-model="mail"
+              type="email"
+              variant="gray"
+              size="md"
+              required
+              :label="t('forms.feedback.email')"
+              :error="getError('mail')"
+              :disabled="isLoading"
+            />
+          </div>
+          <a-textarea-v2
+            v-model="comment"
+            variant="gray"
+            size="md"
+            :rows="4"
+            resize="none"
+            :label="t('forms.feedback.comment')"
+            :error="getError('comment')"
+            :disabled="isLoading"
+            required
+          />
+          <a-button-v2
+            type="submit"
+            size="lg"
+            block
+            class="mt-1"
+            :loading="isLoading"
+          >
+            {{ t('forms.feedback.send') }}
+          </a-button-v2>
+          <p class="mt-1 text-center text-body-sm text-gray-400">
+            {{ t('forms.feedback.consent') }}
+            <span class="text-blue-600">
+              {{ t('forms.feedback.consentAccent') }}
+            </span>
+          </p>
+        </form>
+      </div>
+    </div>
+  </section>
+
+  <a-modal-v2
+    v-model="isModalOpen"
+    width="424px"
+    @close="isModalOpen = false"
+  >
+    <div class="flex flex-col items-center gap-4 px-6 py-4">
+      <a-ill-mail />
+      <h4 class="text-[18px] font-semibold">
+        {{ t('forms.feedback.modalTitle') }}
+      </h4>
+      <p class="body-400 max-[352xp]">
+        {{ t('forms.feedback.modalSubtitle') }}
+      </p>
+      <a-button-v2
+        view="outline"
+        block
+        @click="isModalOpen = false"
+      >
+        {{ t('forms.feedback.close') }}
+      </a-button-v2>
+    </div>
+  </a-modal-v2>
+</template>