adata-ui 2.1.39 → 2.1.40-beta.1

package/.playground/app.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+const manualOpen = ref(false)
+const placements = ['top', 'top-start', 'bottom', 'bottom-end', 'left', 'right'] as const
+</script>
+
+<template>
+  <div class="min-h-screen bg-gray-50 p-10 dark:bg-gray-950">
+    <div class="mx-auto flex max-w-3xl flex-col gap-10">
+      <div class="flex items-center justify-between">
+        <h1 class="text-xl font-bold text-deepblue-900 dark:text-gray-100">
+          ATooltipV2
+        </h1>
+        <a-color-mode />
+      </div>
+
+      <!-- Placements + arrow (hover/focus) -->
+      <section class="flex flex-wrap gap-6">
+        <a-tooltip-v2
+          v-for="p in placements"
+          :key="p"
+          :placement="p"
+          arrow
+          :open-delay="80"
+        >
+          <button class="rounded-lg bg-blue-700 px-3 py-2 text-sm text-white dark:bg-blue-500 dark:text-gray-900">
+            {{ p }}
+          </button>
+          <template #content>
+            <div class="text-[11px] text-deepblue-900 dark:text-gray-100">
+              Placement <b>{{ p }}</b>
+            </div>
+          </template>
+        </a-tooltip-v2>
+      </section>
+
+      <!-- Click trigger, interactive content -->
+      <section>
+        <a-tooltip-v2
+          trigger="click"
+          placement="bottom-start"
+          arrow
+          content-class="w-56"
+        >
+          <button class="rounded-lg px-3 py-2 text-sm text-deepblue-900 ring-1 ring-gray-200 dark:text-gray-100 dark:ring-gray-700">
+            Click me
+          </button>
+          <template #content="{ close }">
+            <div class="flex flex-col gap-2 text-[11px] text-deepblue-900 dark:text-gray-100">
+              <p>Interactive — outside-click &amp; Esc close.</p>
+              <button
+                class="self-start text-blue-700 dark:text-blue-400"
+                @click="close"
+              >
+                Close
+              </button>
+            </div>
+          </template>
+        </a-tooltip-v2>
+      </section>
+
+      <!-- Manual via v-model:open -->
+      <section class="flex items-center gap-4">
+        <button
+          class="rounded-lg bg-deepblue-900 px-3 py-2 text-sm text-white dark:bg-gray-100 dark:text-gray-900"
+          @click="manualOpen = !manualOpen"
+        >
+          Toggle manual ({{ manualOpen }})
+        </button>
+        <a-tooltip-v2
+          v-model:open="manualOpen"
+          trigger="manual"
+          placement="right"
+          arrow
+        >
+          <span class="text-sm text-gray-500 dark:text-gray-400">anchor</span>
+          <template #content>
+            <div class="text-[11px] text-deepblue-900 dark:text-gray-100">
+              Manually controlled
+            </div>
+          </template>
+        </a-tooltip-v2>
+      </section>
+
+      <!-- Teleport out of an overflow-hidden container -->
+      <section class="h-24 overflow-hidden rounded-lg p-3 ring-1 ring-gray-200 dark:ring-gray-700">
+        <a-tooltip-v2
+          placement="top"
+          arrow
+        >
+          <button class="rounded-lg bg-green-500 px-3 py-2 text-sm text-white dark:text-gray-900">
+            Inside overflow-hidden (teleported)
+          </button>
+          <template #content>
+            <div class="text-[11px] text-deepblue-900 dark:text-gray-100">
+              Not clipped
+            </div>
+          </template>
+        </a-tooltip-v2>
+      </section>
+    </div>
+  </div>
+</template>

package/components/elements/button-login/index.vue

@@ -1,22 +1,18 @@
 <script setup lang="ts">
-import IconLogout from '#adata-ui/icons/logout.vue'
+defineEmits(['click'])
 
 const { t } = useI18n()
-
-defineEmits(['click'])
 </script>
 
 <template>
-  <div
-    class="hidden w-max cursor-pointer items-center gap-2 rounded-2xl bg-blue-700 px-4 py-[6px] font-semibold dark:bg-blue-500 lg:flex"
+  <button
+    type="button"
+    class="hidden h-8 cursor-pointer items-center rounded-xl bg-blue-700 px-3.5 text-sm font-semibold text-white transition-colors duration-150 hover:bg-blue-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:ring-offset-1 dark:bg-blue-500 dark:text-gray-900 dark:hover:bg-blue-600 dark:focus-visible:ring-offset-gray-900 lg:inline-flex"
     data-test-id="header-login-button"
     @click="$emit('click')"
   >
-    <icon-logout class="text-white dark:text-gray-900 lg:h-4 lg:w-4" />
-    <span class="hidden text-sm font-semibold text-white dark:text-gray-900 lg:inline-block min-w-[44px]">
-      {{ t('header.login') }}
-    </span>
-  </div>
+    {{ t('header.login') }}
+  </button>
 </template>
 
 <style scoped></style>

package/components/features/color-mode/AColorMode.client.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import AToggle from "#adata-ui/components/forms/toggle/AToggle.vue";
-import Sun from "#adata-ui/icons/sun.vue";
-import Moon from "#adata-ui/icons/moon.vue";
+import Moon from '#adata-ui/icons/moon.vue'
+import Sun from '#adata-ui/icons/sun.vue'
+import { useEventListener } from '@vueuse/core'
 
 const colorMode = useColorMode()
 const setColorMode = useCookie('colorMode')
@@ -10,45 +10,87 @@ if (setColorMode.value) {
   colorMode.preference = setColorMode.value
 }
 
-const mode = computed({
-  get() {
-    return colorMode.value === 'dark'
-  },
-  set() {
-    const value = colorMode.value === 'dark' ? 'light' : 'dark'
-    const hostname = location.hostname.split('.').reverse()
-    const maxAge = 60 * 60 * 24 * 365 // 1 год
+const ONE_YEAR_SECONDS = 60 * 60 * 24 * 365
 
-    colorMode.preference = value
-    document.cookie = `colorMode=${value}; max-age=${maxAge}; domain=.${hostname[1]}.${hostname[0]}; path=/`
-  }
-})
+function cookieDomainAttr(): string {
+  const parts = location.hostname.split('.').reverse()
+  if (parts.length < 2) return ''
+  return `; domain=.${parts[1]}.${parts[0]}`
+}
+
+const isDark = computed(() => colorMode.value === 'dark')
 
-onMounted(() => {
-  window.addEventListener('storage', (event) => {
-    if (event.key === 'nuxt-color-mode') {
-      colorMode.preference = event.newValue;
-    }
-  });
+function toggle() {
+  const value = isDark.value ? 'light' : 'dark'
+  colorMode.preference = value
+  document.cookie = `colorMode=${value}; max-age=${ONE_YEAR_SECONDS}${cookieDomainAttr()}; path=/`
+}
+
+useEventListener(window, 'storage', (event: StorageEvent) => {
+  if (event.key === 'nuxt-color-mode' && event.newValue) {
+    colorMode.preference = event.newValue
+  }
 })
 </script>
 
 <template>
   <client-only>
-    <a-toggle
-      v-model="mode"
-      size="2xl"
-      active-class="dark:bg-gray-800"
-      :off-icon="Sun"
-      off-icon-class="w-4 h-4"
-      on-icon-class="w-4 h-4"
-      :on-icon="Moon"
-      active-container-class="dark:bg-black"
+    <button
+      type="button"
+      class="relative inline-flex size-8 items-center justify-center overflow-hidden rounded-xl text-deepblue-900/80 transition-colors duration-150 hover:bg-deepblue-900/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:ring-offset-1 dark:text-gray-200 dark:hover:bg-white/10 dark:focus-visible:ring-offset-gray-900"
+      :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
       data-test-id="header-switch-theme-toggle"
-    />
+      @click="toggle"
+    >
+      <transition
+        enter-active-class="color-mode__icon-enter-active"
+        enter-from-class="color-mode__icon-enter-from"
+        enter-to-class="color-mode__icon-enter-to"
+        leave-active-class="color-mode__icon-leave-active"
+        leave-from-class="color-mode__icon-leave-from"
+        leave-to-class="color-mode__icon-leave-to"
+        mode="out-in"
+      >
+        <component
+          :is="isDark ? Moon : Sun"
+          :key="isDark ? 'moon' : 'sun'"
+          class="size-5"
+          :font-controlled="false"
+          filled
+        />
+      </transition>
+    </button>
   </client-only>
 </template>
 
+<style scoped>
+.color-mode__icon-enter-active,
+.color-mode__icon-leave-active {
+  transition:
+    opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
+    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.color-mode__icon-enter-from {
+  opacity: 0;
+  transform: rotate(-90deg) scale(0.6);
+}
+
+.color-mode__icon-leave-to {
+  opacity: 0;
+  transform: rotate(90deg) scale(0.6);
+}
+
+.color-mode__icon-enter-to,
+.color-mode__icon-leave-from {
+  opacity: 1;
+  transform: rotate(0) scale(1);
+}
 
-<style>
+@media (prefers-reduced-motion: reduce) {
+  .color-mode__icon-enter-active,
+  .color-mode__icon-leave-active {
+    transition: none;
+  }
+}
 </style>

package/components/features/dropdown/ADropdownV2.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import type { Placement } from '@floating-ui/vue'
+import { autoUpdate, flip, offset as offsetMiddleware, shift, useFloating } from '@floating-ui/vue'
+import { onClickOutside, onKeyStroke } from '@vueuse/core'
+
+defineOptions({ name: 'ADropdownV2' })
+
+const props = withDefaults(defineProps<{
+  placement?: Placement
+  offset?: number
+}>(), {
+  placement: 'bottom-end',
+  offset: 8,
+})
+
+const wrapper = ref<HTMLElement | null>(null)
+const reference = ref<HTMLElement | null>(null)
+const floating = ref<HTMLElement | null>(null)
+const isOpen = ref(false)
+
+const { x, y, strategy, update, placement: resolvedPlacement } = useFloating(reference, floating, {
+  placement: computed(() => props.placement),
+  strategy: 'absolute',
+  middleware: computed(() => [offsetMiddleware(props.offset), flip(), shift({ padding: 8 })]),
+})
+
+// Anchor the grow/shrink animation to the trigger so the panel feels attached.
+const transformOrigin = computed(() => {
+  const [side, align] = resolvedPlacement.value.split('-')
+  const vertical = side === 'top' ? 'bottom' : 'top'
+  const horizontal = align === 'start' ? 'left' : align === 'end' ? 'right' : 'center'
+  return `${vertical} ${horizontal}`
+})
+
+let cleanup: (() => void) | null = null
+watch(isOpen, (open) => {
+  if (open && reference.value && floating.value) {
+    cleanup = autoUpdate(reference.value, floating.value, update)
+  }
+  else {
+    cleanup?.()
+    cleanup = null
+  }
+})
+onUnmounted(() => cleanup?.())
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+function close() {
+  isOpen.value = false
+}
+
+onClickOutside(wrapper, () => {
+  if (isOpen.value) close()
+})
+onKeyStroke('Escape', () => {
+  if (isOpen.value) close()
+})
+</script>
+
+<template>
+  <div
+    ref="wrapper"
+    class="relative"
+  >
+    <div
+      ref="reference"
+      class="inline-flex"
+    >
+      <slot
+        :toggle="toggle"
+        :is-open="isOpen"
+      />
+    </div>
+
+    <transition
+      enter-active-class="a-dropdown-v2__enter-active"
+      enter-from-class="a-dropdown-v2__enter-from"
+      enter-to-class="a-dropdown-v2__enter-to"
+      leave-active-class="a-dropdown-v2__leave-active"
+      leave-from-class="a-dropdown-v2__leave-from"
+      leave-to-class="a-dropdown-v2__leave-to"
+    >
+      <div
+        v-if="isOpen"
+        ref="floating"
+        class="z-[60] overflow-hidden rounded-xl shadow-lg shadow-gray-900/10 dark:shadow-black/30"
+        :style="{
+          position: strategy,
+          left: x != null ? `${x}px` : '',
+          top: y != null ? `${y}px` : '',
+          transformOrigin,
+        }"
+      >
+        <slot
+          name="content"
+          :close="close"
+        />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+.a-dropdown-v2__enter-active {
+  transition:
+    opacity 200ms ease,
+    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.a-dropdown-v2__leave-active {
+  transition:
+    opacity 140ms ease,
+    transform 160ms cubic-bezier(0.4, 0, 1, 1);
+}
+
+.a-dropdown-v2__enter-from,
+.a-dropdown-v2__leave-to {
+  opacity: 0;
+  transform: translateY(-8px) scale(0.96);
+}
+
+.a-dropdown-v2__enter-to,
+.a-dropdown-v2__leave-from {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .a-dropdown-v2__enter-active,
+  .a-dropdown-v2__leave-active {
+    transition: opacity 120ms ease;
+  }
+
+  .a-dropdown-v2__enter-from,
+  .a-dropdown-v2__leave-to {
+    transform: none;
+  }
+}
+</style>

package/components/features/lang-switcher/lang-switcher.vue

@@ -1,73 +1,153 @@
 <script setup lang="ts">
-import { onClickOutside } from "@vueuse/core";
+import Check from '#adata-ui/icons/check/check.vue'
+import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
+import { onClickOutside } from '@vueuse/core'
+
+type LocaleItem = string | { code: string }
 
 const props = withDefaults(defineProps<{
   isMobile?: boolean
 }>(), {
-  isMobile: false
+  isMobile: false,
 })
 
-const langSwitcher = ref<HTMLDivElement | null>(null)
-
 const switchLocalePath = useSwitchLocalePath()
-const { locale, locales } = useI18n()
-const availableLocales = computed(() => {
-  return (locales.value).filter(i => i.code !== locale.value)
-})
+const { t, locale, locales } = useI18n()
+
+const testIdSuffix = computed(() => props.isMobile ? '-mobile' : '')
 
+const wrapper = ref<HTMLDivElement | null>(null)
+const reference = ref<HTMLButtonElement | null>(null)
+const floating = ref<HTMLDivElement | null>(null)
 const isOpen = ref(false)
 
-onClickOutside(langSwitcher,() => {
-  isOpen.value = false
+const placement = computed(() => props.isMobile ? 'bottom-end' as const : 'bottom-start' as const)
+
+const { x, y, strategy, update } = useFloating(reference, floating, {
+  placement,
+  strategy: 'absolute',
+  middleware: computed(() => [
+    offset(6),
+    flip({ fallbackPlacements: props.isMobile ? ['top-end'] : ['top-start'] }),
+    shift({ padding: 8 }),
+  ]),
 })
 
-const { t } = useI18n()
+let cleanup: (() => void) | null = null
+watch(isOpen, (open) => {
+  if (open && reference.value && floating.value) {
+    cleanup = autoUpdate(reference.value, floating.value, update)
+  }
+  else {
+    cleanup?.()
+    cleanup = null
+  }
+})
+onUnmounted(() => cleanup?.())
 
-const testIdSuffix = computed(() => props.isMobile ? '-mobile' : '')
+onClickOutside(wrapper, () => {
+  if (isOpen.value) isOpen.value = false
+})
 
-function onClick(loc: any) {
-  if ((loc?.code || loc) === locale.value) return
+function localeCode(loc: LocaleItem): string {
+  return typeof loc === 'string' ? loc : loc.code
+}
 
+function onSelect(loc: LocaleItem) {
   isOpen.value = false
-  window.location.assign(switchLocalePath(loc?.code || loc))
+  const code = localeCode(loc)
+  if (code === locale.value) return
+  window.location.assign(switchLocalePath(code))
 }
 </script>
 
 <template>
-  <div
-    ref="langSwitcher"
-    class="relative"
-  >
+  <div ref="wrapper" class="relative">
     <button
-      class="text-xs font-semibold py-1 px-2 bg-gray-100 dark:bg-gray-200/5 rounded"
-      @click="isOpen = true"
-      aria-hidden="true"
+      ref="reference"
+      type="button"
+      class="inline-flex size-8 items-center justify-center rounded-xl text-xs font-semibold text-gray-900 transition-colors duration-150 hover:bg-deepblue-900/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:ring-offset-1 dark:text-gray-100 dark:hover:bg-white/10 dark:focus-visible:ring-offset-gray-900"
+      :class="[
+        isOpen
+          ? 'bg-blue-50 text-blue-700 ring-2 ring-blue-500/20 dark:bg-blue-900/40 dark:text-blue-300'
+          : '',
+      ]"
       :data-test-id="`header-switch-language-button${testIdSuffix}`"
+      :aria-expanded="isOpen"
+      aria-haspopup="listbox"
+      @click="isOpen = !isOpen"
     >
       {{ t(`lang.${locale}.short`) }}
     </button>
-    <div
-      v-show="isOpen"
-      :class="['absolute z-20 bg-white shadow rounded-md p-2 right-0 lg:right-auto lg:left-0 left-auto flex flex-col dark:bg-gray-900']"
+
+    <transition
+      enter-active-class="lang-switcher__dropdown-enter-active"
+      enter-from-class="lang-switcher__dropdown-enter-from"
+      enter-to-class="lang-switcher__dropdown-enter-to"
+      leave-active-class="lang-switcher__dropdown-leave-active"
+      leave-from-class="lang-switcher__dropdown-leave-from"
+      leave-to-class="lang-switcher__dropdown-leave-to"
     >
-      <nuxt-link
-        v-for="loc in locales"
-        :data-test-id="`header-switch-${loc?.code}-language-button${testIdSuffix}`"
-        :class="[
-          'text-sm cursor-pointer px-4 py-2.5 flex justify-between',
-          {'text-primary bg-deepblue-500/5': locale === loc.code}
-        ]"
-        :to="switchLocalePath(loc?.code || loc)"
-        @click.prevent="onClick(loc)"
+      <div
+        v-if="isOpen"
+        ref="floating"
+        class="z-[10000] w-fit rounded-xl border border-gray-200 bg-white shadow-lg shadow-gray-900/10 dark:border-gray-700 dark:bg-gray-900 dark:shadow-black/30"
+        :style="{
+          position: strategy,
+          left: x != null ? `${x}px` : '',
+          top: y != null ? `${y}px` : '',
+        }"
       >
-        {{ t(`lang.${loc?.code || loc}.long`) }}
-      </nuxt-link>
-    </div>
+        <ul class="flex flex-col gap-1 p-1.5" role="listbox">
+          <li v-for="loc in locales" :key="localeCode(loc)" role="option" :aria-selected="localeCode(loc) === locale">
+            <nuxt-link
+              :data-test-id="`header-switch-${localeCode(loc)}-language-button${testIdSuffix}`"
+              :to="switchLocalePath(localeCode(loc))"
+              class="flex w-full items-center justify-between gap-3 rounded-lg px-3 py-2 text-sm transition-colors duration-100"
+              :class="[
+                localeCode(loc) === locale
+                  ? 'bg-blue-50 font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
+                  : 'text-gray-700 hover:bg-gray-50 dark:text-gray-200 dark:hover:bg-gray-800/60',
+              ]"
+              @click.prevent="onSelect(loc)"
+            >
+              <span>{{ t(`lang.${localeCode(loc)}.long`) }}</span>
+              <check
+                v-if="localeCode(loc) === locale"
+                class="size-4 shrink-0 text-blue-600 dark:text-blue-400"
+              />
+            </nuxt-link>
+          </li>
+        </ul>
+      </div>
+    </transition>
   </div>
 </template>
 
-<style lang="scss" scoped>
-.shadow {
-  box-shadow: 0 1px 8px 0 #8B929C4D;
+<style scoped>
+.lang-switcher__dropdown-enter-active,
+.lang-switcher__dropdown-leave-active {
+  transition:
+    opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
+    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.lang-switcher__dropdown-enter-from,
+.lang-switcher__dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+.lang-switcher__dropdown-enter-to,
+.lang-switcher__dropdown-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lang-switcher__dropdown-enter-active,
+  .lang-switcher__dropdown-leave-active {
+    transition: none;
+  }
 }
 </style>

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/features//321/201hange-version/AChangeVersion.vue

@@ -10,7 +10,7 @@ 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-md 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>
     <a-icon-arrow-bottom-left-on-square class="rotate-180" />