adata-ui 2.1.39 → 2.1.40-beta

package/components/overlays/tooltip/ATooltipV2.vue

@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import type { TooltipPlacement, TooltipTrigger } from './types'
+import {
+  arrow as arrowMiddleware,
+  autoUpdate,
+  flip,
+  offset as offsetMiddleware,
+  shift,
+  useFloating,
+} from '@floating-ui/vue'
+import { onClickOutside, onKeyStroke } from '@vueuse/core'
+import { twMerge } from 'tailwind-merge'
+import { useTooltipTrigger } from './useTooltipTrigger'
+
+interface Props {
+  /** Preferred side; auto-flips when there isn't room. */
+  placement?: TooltipPlacement
+  /** How the tooltip opens. `manual` is fully driven by `v-model:open`. */
+  trigger?: TooltipTrigger
+  /** Show a pointer arrow aimed at the trigger. */
+  arrow?: boolean
+  /** Gap between trigger and tooltip, in px. */
+  offset?: number
+  openDelay?: number
+  closeDelay?: number
+  /** Render through `<Teleport to="body">` to escape overflow/stacking contexts. */
+  teleport?: boolean
+  disabled?: boolean
+  zIndex?: number
+  /** Plain-text fallback used when the `content` slot is empty. */
+  text?: string
+  /** Extra classes merged onto the tooltip box (e.g. width/padding overrides). */
+  contentClass?: string
+}
+
+defineOptions({ name: 'ATooltipV2', inheritAttrs: false })
+
+const props = withDefaults(defineProps<Props>(), {
+  placement: 'top',
+  trigger: 'hover',
+  arrow: false,
+  offset: 8,
+  openDelay: 0,
+  closeDelay: 0,
+  teleport: true,
+  disabled: false,
+  zIndex: 9999,
+  text: '',
+  contentClass: '',
+})
+
+const open = defineModel<boolean>('open', { default: false })
+
+const reference = ref<HTMLElement | null>(null)
+const floating = ref<HTMLElement | null>(null)
+const arrowRef = ref<HTMLElement | null>(null)
+
+const tooltipId = `a-tooltip-v2-${useId()}`
+
+const { listeners, close, clearTimers } = useTooltipTrigger({
+  open,
+  trigger: toRef(props, 'trigger'),
+  disabled: toRef(props, 'disabled'),
+  openDelay: toRef(props, 'openDelay'),
+  closeDelay: toRef(props, 'closeDelay'),
+})
+
+const { x, y, strategy, middlewareData, placement: resolvedPlacement } = useFloating(reference, floating, {
+  placement: computed(() => props.placement),
+  strategy: 'fixed',
+  whileElementsMounted: autoUpdate,
+  middleware: computed(() => [
+    offsetMiddleware(props.offset),
+    flip(),
+    shift({ padding: 8 }),
+    ...(props.arrow ? [arrowMiddleware({ element: arrowRef, padding: 6 })] : []),
+  ]),
+})
+
+const side = computed(() => resolvedPlacement.value.split('-')[0])
+const opposite: Record<string, string> = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' }
+
+// Grow the panel out of the edge nearest the trigger.
+const transformOrigin = computed(() => {
+  const [main, align] = resolvedPlacement.value.split('-')
+  const anchor = opposite[main] ?? 'center'
+  if (main === 'left' || main === 'right') {
+    const v = align === 'start' ? 'top' : align === 'end' ? 'bottom' : 'center'
+    return `${anchor} ${v}`
+  }
+  const h = align === 'start' ? 'left' : align === 'end' ? 'right' : 'center'
+  return `${h} ${anchor}`
+})
+
+// The two outer edges of the rotated square form the visible point.
+const arrowBorderClass = computed(() => {
+  switch (side.value) {
+    case 'top': return 'border-b border-r'
+    case 'bottom': return 'border-t border-l'
+    case 'left': return 'border-t border-r'
+    case 'right': return 'border-b border-l'
+    default: return ''
+  }
+})
+
+const arrowStyle = computed<Record<string, string>>(() => {
+  const data = middlewareData.value.arrow
+  const staticSide = opposite[side.value]
+  const style: Record<string, string> = {}
+  if (data?.x != null) style.left = `${data.x}px`
+  if (data?.y != null) style.top = `${data.y}px`
+  if (staticSide) style[staticSide] = '-4px'
+  return style
+})
+
+const interactive = computed(() => props.trigger !== 'hover')
+
+const boxClass = computed(() =>
+  twMerge(
+    'rounded-lg bg-white px-2.5 py-1.5 shadow-lg ring-1 ring-gray-200 dark:bg-gray-900 dark:ring-gray-700',
+    props.contentClass,
+  ),
+)
+
+// Click mode dismisses on outside-click / Escape; hover leaves on its own; manual is parent-driven.
+onClickOutside(
+  floating,
+  () => {
+    if (open.value && props.trigger === 'click') close()
+  },
+  { ignore: [reference] },
+)
+
+onKeyStroke('Escape', () => {
+  if (open.value && props.trigger === 'click') close()
+})
+
+onUnmounted(() => clearTimers())
+</script>
+
+<template>
+  <span
+    ref="reference"
+    v-bind="$attrs"
+    class="inline-flex"
+    :aria-describedby="open ? tooltipId : undefined"
+    v-on="listeners"
+  >
+    <slot :open="open" />
+  </span>
+
+  <teleport
+    to="body"
+    :disabled="!teleport"
+  >
+    <transition
+      enter-active-class="a-tooltip-v2__enter-active"
+      enter-from-class="a-tooltip-v2__enter-from"
+      enter-to-class="a-tooltip-v2__enter-to"
+      leave-active-class="a-tooltip-v2__leave-active"
+      leave-from-class="a-tooltip-v2__leave-from"
+      leave-to-class="a-tooltip-v2__leave-to"
+    >
+      <div
+        v-if="open && !disabled"
+        :id="tooltipId"
+        ref="floating"
+        role="tooltip"
+        :class="[boxClass, interactive ? 'pointer-events-auto' : 'pointer-events-none']"
+        :style="{
+          position: strategy,
+          left: x != null ? `${x}px` : '0',
+          top: y != null ? `${y}px` : '0',
+          zIndex,
+          transformOrigin,
+        }"
+      >
+        <slot
+          name="content"
+          :close="close"
+        >
+          {{ text }}
+        </slot>
+
+        <span
+          v-if="arrow"
+          ref="arrowRef"
+          class="absolute size-2 rotate-45 border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900"
+          :class="arrowBorderClass"
+          :style="arrowStyle"
+        />
+      </div>
+    </transition>
+  </teleport>
+</template>
+
+<style scoped>
+.a-tooltip-v2__enter-active {
+  transition:
+    opacity 160ms ease,
+    transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.a-tooltip-v2__leave-active {
+  transition:
+    opacity 120ms ease,
+    transform 140ms cubic-bezier(0.4, 0, 1, 1);
+}
+
+.a-tooltip-v2__enter-from,
+.a-tooltip-v2__leave-to {
+  opacity: 0;
+  transform: translateY(-4px) scale(0.96);
+}
+
+.a-tooltip-v2__enter-to,
+.a-tooltip-v2__leave-from {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .a-tooltip-v2__enter-active,
+  .a-tooltip-v2__leave-active {
+    transition: opacity 120ms ease;
+  }
+
+  .a-tooltip-v2__enter-from,
+  .a-tooltip-v2__leave-to {
+    transform: none;
+  }
+}
+</style>

package/components/overlays/tooltip/types.ts

@@ -0,0 +1,26 @@
+import type { Placement } from '@floating-ui/vue'
+
+export type { Placement }
+
+/**
+ * Placement options spelled out as literals (mirrors Floating UI's `Placement`).
+ * Importing the package's `Placement` alias directly makes Vue's runtime prop
+ * inference fall back to `Object` and warn; a locally-resolvable union infers
+ * `String` correctly.
+ */
+export type TooltipPlacement
+  = | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+
+/** How the tooltip is opened. `manual` is fully driven by `v-model:open`. */
+export type TooltipTrigger = 'hover' | 'click' | 'manual'

package/components/overlays/tooltip/useTooltipTrigger.ts

@@ -0,0 +1,101 @@
+import type { Ref } from 'vue'
+import type { TooltipTrigger } from './types'
+import { computed, watch } from 'vue'
+
+interface UseTooltipTriggerOptions {
+  /** Visibility ref (the component's `v-model:open`). Mutated here. */
+  open: Ref<boolean>
+  trigger: Ref<TooltipTrigger>
+  disabled: Ref<boolean>
+  openDelay: Ref<number>
+  closeDelay: Ref<number>
+}
+
+/**
+ * Owns the open/close state machine for {@link ATooltipV2}: debounced show/hide
+ * and the per-mode DOM listeners. Kept separate from the SFC so each trigger
+ * style (hover/focus, click, manual) stays small and independently testable.
+ */
+export function useTooltipTrigger(options: UseTooltipTriggerOptions) {
+  const { open, trigger, disabled, openDelay, closeDelay } = options
+
+  let openTimer: ReturnType<typeof setTimeout> | null = null
+  let closeTimer: ReturnType<typeof setTimeout> | null = null
+
+  function clearOpenTimer() {
+    if (openTimer) {
+      clearTimeout(openTimer)
+      openTimer = null
+    }
+  }
+
+  function clearCloseTimer() {
+    if (closeTimer) {
+      clearTimeout(closeTimer)
+      closeTimer = null
+    }
+  }
+
+  function clearTimers() {
+    clearOpenTimer()
+    clearCloseTimer()
+  }
+
+  function show() {
+    if (disabled.value || open.value) return
+    clearCloseTimer()
+    if (openDelay.value > 0) {
+      openTimer = setTimeout(() => {
+        open.value = true
+        openTimer = null
+      }, openDelay.value)
+    }
+    else {
+      open.value = true
+    }
+  }
+
+  function hide() {
+    clearOpenTimer()
+    if (!open.value) return
+    if (closeDelay.value > 0) {
+      closeTimer = setTimeout(() => {
+        open.value = false
+        closeTimer = null
+      }, closeDelay.value)
+    }
+    else {
+      open.value = false
+    }
+  }
+
+  function toggle() {
+    if (open.value) hide()
+    else show()
+  }
+
+  function close() {
+    clearTimers()
+    open.value = false
+  }
+
+  // Force-close if disabled while visible.
+  watch(disabled, (value) => {
+    if (value) close()
+  })
+
+  // Listeners bound on the trigger wrapper via `v-on`, selected by mode.
+  const listeners = computed<Record<string, () => void>>(() => {
+    if (disabled.value) return {}
+    switch (trigger.value) {
+      case 'hover':
+        return { mouseenter: show, mouseleave: hide, focusin: show, focusout: hide }
+      case 'click':
+        return { click: toggle }
+      default:
+        return {}
+    }
+  })
+
+  return { show, hide, toggle, close, clearTimers, listeners }
+}

package/composables/useHeaderNavigationLinks.ts

@@ -367,22 +367,26 @@ export const useHeaderMenuLinks = () => {
     {
       title: t('header.profile.menu.personalInfo'),
       icon: IconProfile,
-      to: buildLocalizedUrl(locale.value, urls.landing, PAGES.profile.index)
+      to: buildLocalizedUrl(locale.value, urls.landing, PAGES.profile.index),
+      dataTestId: 'dropdown-profile-button'
     },
     {
       title: t('header.profile.menu.security'),
       icon: IconLock,
-      to: buildLocalizedUrl(locale.value, urls.landing, PAGES.profile.security)
+      to: buildLocalizedUrl(locale.value, urls.landing, PAGES.profile.security),
+      dataTestId: 'dropdown-profile-change-password-button'
     },
     {
       title: t('header.profile.menu.paymentHistory'),
       icon: IconReceipt,
-      to: buildLocalizedUrl(locale.value, urls.landing, PAGES.profile.paymentHistory)
+      to: buildLocalizedUrl(locale.value, urls.landing, PAGES.profile.paymentHistory),
+      dataTestId: 'dropdown-profile-payment-story-button'
     },
     {
       title: t('header.profile.menu.favourites'),
       icon: IconFavorite,
-      to: buildLocalizedUrl(locale.value, urls.landing, PAGES.profile.favourites)
+      to: buildLocalizedUrl(locale.value, urls.landing, PAGES.profile.favourites),
+      dataTestId: 'dropdown-favourites-button'
     },
     // {
     //   title: t('header.profile.menu.myReports'),
@@ -392,17 +396,20 @@ export const useHeaderMenuLinks = () => {
     {
       title: t('header.profile.menu.browsingHistory'),
       icon: IconHistory,
-      to: buildLocalizedUrl(locale.value, urls.landing, PAGES.profile.browsingHistory)
+      to: buildLocalizedUrl(locale.value, urls.landing, PAGES.profile.browsingHistory),
+      dataTestId: 'dropdown-profile-view-history-button'
     },
     {
       title: t('header.profile.menu.myGroups'),
       icon: IconUsers,
-      to: buildLocalizedUrl(locale.value, urls.landing, PAGES.profile.myGroups)
+      to: buildLocalizedUrl(locale.value, urls.landing, PAGES.profile.myGroups),
+      dataTestId: 'dropdown-profile-my-groups-button'
     },
     {
       title: t('header.profile.menu.notes'),
       icon: IconMessage,
-      to: buildLocalizedUrl(locale.value, urls.landing, PAGES.profile.notes)
+      to: buildLocalizedUrl(locale.value, urls.landing, PAGES.profile.notes),
+      dataTestId: 'dropdown-profile-notes-button'
     }
   ]
 }

package/icons/gauge.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="m12 14l4-4M3.34 19a10 10 0 1 1 17.32 0"
+    />
+  </svg>
+</template>

package/icons/sun.vue

@@ -3,9 +3,19 @@
 </script>
 
 <template>
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path opacity="0.4" d="M7.99998 12.6666C10.5773 12.6666 12.6666 10.5772 12.6666 7.99992C12.6666 5.42259 10.5773 3.33325 7.99998 3.33325C5.42265 3.33325 3.33331 5.42259 3.33331 7.99992C3.33331 10.5772 5.42265 12.6666 7.99998 12.6666Z" fill="#FBC920"/>
-    <path d="M8.00002 15.3067C7.63335 15.3067 7.33335 15.0334 7.33335 14.6667V14.6134C7.33335 14.2467 7.63335 13.9467 8.00002 13.9467C8.36669 13.9467 8.66669 14.2467 8.66669 14.6134C8.66669 14.9801 8.36669 15.3067 8.00002 15.3067ZM12.76 13.4267C12.5867 13.4267 12.42 13.3601 12.2867 13.2334L12.2 13.1467C11.94 12.8867 11.94 12.4667 12.2 12.2067C12.46 11.9467 12.88 11.9467 13.14 12.2067L13.2267 12.2934C13.4867 12.5534 13.4867 12.9734 13.2267 13.2334C13.1 13.3601 12.9334 13.4267 12.76 13.4267ZM3.24002 13.4267C3.06669 13.4267 2.90002 13.3601 2.76669 13.2334C2.50669 12.9734 2.50669 12.5534 2.76669 12.2934L2.85335 12.2067C3.11335 11.9467 3.53335 11.9467 3.79335 12.2067C4.05335 12.4667 4.05335 12.8867 3.79335 13.1467L3.70669 13.2334C3.58002 13.3601 3.40669 13.4267 3.24002 13.4267ZM14.6667 8.66675H14.6134C14.2467 8.66675 13.9467 8.36675 13.9467 8.00008C13.9467 7.63341 14.2467 7.33342 14.6134 7.33342C14.98 7.33342 15.3067 7.63341 15.3067 8.00008C15.3067 8.36675 15.0334 8.66675 14.6667 8.66675ZM1.38669 8.66675H1.33335C0.966687 8.66675 0.666687 8.36675 0.666687 8.00008C0.666687 7.63341 0.966687 7.33342 1.33335 7.33342C1.70002 7.33342 2.02669 7.63341 2.02669 8.00008C2.02669 8.36675 1.75335 8.66675 1.38669 8.66675ZM12.6734 3.99341C12.5 3.99341 12.3334 3.92675 12.2 3.80008C11.94 3.54008 11.94 3.12008 12.2 2.86008L12.2867 2.77341C12.5467 2.51341 12.9667 2.51341 13.2267 2.77341C13.4867 3.03341 13.4867 3.45341 13.2267 3.71341L13.14 3.80008C13.0134 3.92675 12.8467 3.99341 12.6734 3.99341ZM3.32669 3.99341C3.15335 3.99341 2.98669 3.92675 2.85335 3.80008L2.76669 3.70675C2.50669 3.44675 2.50669 3.02675 2.76669 2.76675C3.02669 2.50675 3.44669 2.50675 3.70669 2.76675L3.79335 2.85342C4.05335 3.11342 4.05335 3.53341 3.79335 3.79341C3.66669 3.92675 3.49335 3.99341 3.32669 3.99341ZM8.00002 2.02675C7.63335 2.02675 7.33335 1.75341 7.33335 1.38675V1.33341C7.33335 0.966748 7.63335 0.666748 8.00002 0.666748C8.36669 0.666748 8.66669 0.966748 8.66669 1.33341C8.66669 1.70008 8.36669 2.02675 8.00002 2.02675Z" fill="#FBC920"/>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      opacity="0.7"
+      d="M7.99998 12.6666C10.5773 12.6666 12.6666 10.5772 12.6666 7.99992C12.6666 5.42259 10.5773 3.33325 7.99998 3.33325C5.42265 3.33325 3.33331 5.42259 3.33331 7.99992C3.33331 10.5772 5.42265 12.6666 7.99998 12.6666Z"
+      fill="#FBC920"
+    />
+    <path d="M8.00002 15.3067C7.63335 15.3067 7.33335 15.0334 7.33335 14.6667V14.6134C7.33335 14.2467 7.63335 13.9467 8.00002 13.9467C8.36669 13.9467 8.66669 14.2467 8.66669 14.6134C8.66669 14.9801 8.36669 15.3067 8.00002 15.3067ZM12.76 13.4267C12.5867 13.4267 12.42 13.3601 12.2867 13.2334L12.2 13.1467C11.94 12.8867 11.94 12.4667 12.2 12.2067C12.46 11.9467 12.88 11.9467 13.14 12.2067L13.2267 12.2934C13.4867 12.5534 13.4867 12.9734 13.2267 13.2334C13.1 13.3601 12.9334 13.4267 12.76 13.4267ZM3.24002 13.4267C3.06669 13.4267 2.90002 13.3601 2.76669 13.2334C2.50669 12.9734 2.50669 12.5534 2.76669 12.2934L2.85335 12.2067C3.11335 11.9467 3.53335 11.9467 3.79335 12.2067C4.05335 12.4667 4.05335 12.8867 3.79335 13.1467L3.70669 13.2334C3.58002 13.3601 3.40669 13.4267 3.24002 13.4267ZM14.6667 8.66675H14.6134C14.2467 8.66675 13.9467 8.36675 13.9467 8.00008C13.9467 7.63341 14.2467 7.33342 14.6134 7.33342C14.98 7.33342 15.3067 7.63341 15.3067 8.00008C15.3067 8.36675 15.0334 8.66675 14.6667 8.66675ZM1.38669 8.66675H1.33335C0.966687 8.66675 0.666687 8.36675 0.666687 8.00008C0.666687 7.63341 0.966687 7.33342 1.33335 7.33342C1.70002 7.33342 2.02669 7.63341 2.02669 8.00008C2.02669 8.36675 1.75335 8.66675 1.38669 8.66675ZM12.6734 3.99341C12.5 3.99341 12.3334 3.92675 12.2 3.80008C11.94 3.54008 11.94 3.12008 12.2 2.86008L12.2867 2.77341C12.5467 2.51341 12.9667 2.51341 13.2267 2.77341C13.4867 3.03341 13.4867 3.45341 13.2267 3.71341L13.14 3.80008C13.0134 3.92675 12.8467 3.99341 12.6734 3.99341ZM3.32669 3.99341C3.15335 3.99341 2.98669 3.92675 2.85335 3.80008L2.76669 3.70675C2.50669 3.44675 2.50669 3.02675 2.76669 2.76675C3.02669 2.50675 3.44669 2.50675 3.70669 2.76675L3.79335 2.85342C4.05335 3.11342 4.05335 3.53341 3.79335 3.79341C3.66669 3.92675 3.49335 3.99341 3.32669 3.99341ZM8.00002 2.02675C7.63335 2.02675 7.33335 1.75341 7.33335 1.38675V1.33341C7.33335 0.966748 7.63335 0.666748 8.00002 0.666748C8.36669 0.666748 8.66669 0.966748 8.66669 1.33341C8.66669 1.70008 8.36669 2.02675 8.00002 2.02675Z" fill="#FBC920" />
   </svg>
 </template>
 

package/lang/en.ts

@@ -27,6 +27,10 @@ const EnLocale: RuLocale = {
       requestLimit: 'Daily request limit',
       daysLeft: 'Days left',
     },
+    usage: {
+      requests: 'Requests',
+      days: 'days',
+    },
     profile: {
       tariff: 'Tariff',
       balance: 'Balance:',
@@ -268,6 +272,8 @@ const EnLocale: RuLocale = {
       },
       edo: {
         label: 'EDM',
+        heroSubtitle: 'Templates · AI assistant · Signatures · Voice input',
+        heroCta: 'Open EDO',
         items: {
           l: {
             t: 'Document Flow',

package/lang/kk.ts

@@ -27,6 +27,10 @@ const KkLocale: RuLocale = {
       requestLimit: 'Күнделікті сұраныс лимиті',
       daysLeft: 'Қалған күндер',
     },
+    usage: {
+      requests: 'Сұраныстар',
+      days: 'күн',
+    },
     profile: {
       tariff: 'Тариф',
       balance: 'Баланс:',
@@ -268,6 +272,8 @@ const KkLocale: RuLocale = {
       },
       edo: {
         label: 'ЭҚА',
+        heroSubtitle: 'Үлгілер · AI-ассистент · ЭЦҚ · Дауыспен енгізу',
+        heroCta: 'EDO-ды ашу',
         items: {
           l: {
             t: 'Құжат айналымы',

package/lang/ru.ts

@@ -23,6 +23,10 @@ const RuLocale = {
       requestLimit: 'Cуточный лимит запросов',
       daysLeft: 'Остаток дней',
     },
+    usage: {
+      requests: 'Запросы',
+      days: 'дн.',
+    },
     profile: {
       tariff: 'Тариф',
       balance: 'Баланс:',
@@ -269,6 +273,8 @@ const RuLocale = {
       },
       edo: {
         label: 'ЭДО',
+        heroSubtitle: 'Шаблоны · AI-ассистент · ЭЦП · Голосовой ввод',
+        heroCta: 'Открыть EDO',
         items: {
           l: {
             t: 'Документооборот',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "adata-ui",
   "type": "module",
-  "version": "2.1.39",
+  "version": "2.1.40-beta",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",