adata-ui 2.1.40-beta → 2.1.40-beta.10

package/components/elements/status-badge-v2/StatusBadgeV2.vue

@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import { twMerge } from 'tailwind-merge'
+
+defineOptions({ name: 'StatusBadgeV2', inheritAttrs: false })
+
+type BadgeType = 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning'
+type BadgeView = 'default' | 'inverted' | 'transparent'
+type BadgeSize = 'xs' | 'sm' | 'md' | 'lg'
+
+interface Props {
+  type?: BadgeType
+  view?: BadgeView
+  size?: BadgeSize
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'primary',
+  view: 'inverted',
+  size: 'sm',
+})
+
+const base
+  = 'inline-flex w-fit items-center justify-center gap-1.5 rounded-full font-semibold select-none'
+
+const sizeClasses: Record<BadgeSize, string> = {
+  xs: 'px-2 py-0.5 text-[11px] leading-none',
+  sm: 'px-2.5 py-1 text-xs leading-none',
+  md: 'px-3 py-1.5 text-sm',
+  lg: 'px-4 py-2 text-base',
+}
+
+const typeClasses: Record<BadgeView, Partial<Record<BadgeType, string>>> = {
+  default: {
+    primary: 'bg-blue-700 text-white dark:bg-blue-500 dark:text-gray-900',
+    success: 'bg-green-500 text-white dark:bg-green-400 dark:text-gray-900',
+    danger: 'bg-red-500 text-white dark:text-gray-100',
+    warning: 'bg-yellow-400 text-white dark:text-gray-900',
+    gray: 'bg-deepblue-900 text-white dark:bg-gray-200/10 dark:text-gray-200',
+    orange: 'bg-orange-600 text-white dark:text-gray-100',
+  },
+  inverted: {
+    primary: 'bg-blue-700/10 text-blue-700 dark:bg-blue-500/10 dark:text-blue-500',
+    success: 'bg-green-500/15 text-green-600 dark:bg-green-400/15 dark:text-green-400',
+    danger: 'bg-red-500/10 text-red-500 dark:bg-red-400/10 dark:text-red-400',
+    warning: 'bg-yellow-400/15 text-yellow-500 dark:bg-yellow-400/15 dark:text-yellow-400',
+    gray: 'bg-deepblue-900/10 text-gray-600 dark:bg-gray-200/10 dark:text-gray-300',
+    orange: 'bg-orange-600/10 text-orange-600 dark:text-orange-500',
+  },
+  transparent: {
+    primary: 'bg-transparent text-blue-700 dark:text-blue-500',
+    success: 'bg-transparent text-green-600 dark:text-green-400',
+    danger: 'bg-transparent text-red-500 dark:text-red-400',
+    warning: 'bg-transparent text-yellow-500 dark:text-yellow-400',
+    gray: 'bg-transparent text-gray-600 dark:text-gray-300',
+    orange: 'bg-transparent text-orange-600 dark:text-orange-500',
+  },
+}
+
+const attrs = useAttrs()
+
+// twMerge resolves Tailwind conflicts: any class passed via `class` wins over
+// the defaults below, so padding / rounded / bg / text can all be overridden.
+const classes = computed(() =>
+  twMerge(
+    base,
+    sizeClasses[props.size],
+    typeClasses[props.view][props.type],
+    attrs.class as string,
+  ),
+)
+</script>
+
+<template>
+  <div :class="classes" v-bind="{ ...$attrs, class: undefined }">
+    <slot name="point" />
+    <slot />
+  </div>
+</template>

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="[
           '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/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-xs'
+    case 'lg': return 'text-base'
+    default: return 'text-sm'
+  }
+})
+
+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-md 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-xs 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>