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

package/components/overlays/tooltip/ATooltipV2.vue

@@ -0,0 +1,223 @@
+<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 '#adata-ui/utils/twMerge'
+import { useTooltipTrigger } from './useTooltipTrigger'
+
+interface Props {
+  placement?: TooltipPlacement
+  trigger?: TooltipTrigger
+  arrow?: boolean
+  offset?: number
+  openDelay?: number
+  closeDelay?: number
+  teleport?: boolean
+  disabled?: boolean
+  zIndex?: number
+  text?: string
+  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' }
+
+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}`
+})
+
+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-md 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,
+  ),
+)
+
+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/components/transitions/ATransitionHeight.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import ui from "#adata-ui/components/elements/accordion/AAccordionGroup/ui.config";
-import { twMerge } from 'tailwind-merge'
+import { twMerge } from '#adata-ui/utils/twMerge'
 
 const props = defineProps<{
   transition?: {

package/composables/useAccessTokenCookie.ts

@@ -0,0 +1,25 @@
+import { useUrls } from '#adata-ui/composables/useUrls'
+
+/**
+ * Единая точка записи куки accessToken (логин, 2FA, OTP, обмен по auth-сессии).
+ * Домен должен совпадать с доменом удаления в resetTokens (adata-common-auth),
+ * иначе кука не находится на следующей загрузке и логин-флоу зацикливается на reload.
+ */
+export async function writeAccessTokenCookie(accessToken: string, expireIn?: number): Promise<boolean> {
+  const { mode } = useUrls()
+  const sharedDomain = `${mode}.kz`
+  const onSharedDomain = location.hostname === sharedDomain || location.hostname.endsWith(`.${sharedDomain}`)
+  const maxAge = Number(expireIn) > 0 ? Number(expireIn) : undefined
+
+  useCookie('accessToken', {
+    maxAge,
+    // на localhost/превью-хостах атрибут domain невалиден — пишем host-only куку
+    domain: onSharedDomain ? `.${sharedDomain}` : undefined,
+    path: '/',
+    secure: location.protocol === 'https:',
+  }).value = accessToken
+
+  // useCookie пишет document.cookie на следующем flush, не синхронно
+  await nextTick()
+  return document.cookie.split('; ').some(part => part.startsWith('accessToken='))
+}

package/composables/useActiveNavigation.ts

@@ -0,0 +1,84 @@
+// Active-state detection for the products mega-menu.
+//
+// Two levels of "active":
+//   1. activeModule  — the current host matches one of the module's hosts
+//      (host ≠ module key: e.g. the `fines` module lives on avto.*.kz,
+//       and `tenders` spans both zakupki.*.kz and tender.*.kz).
+//   2. activeService — within the active module, the current page matches a
+//      concrete item link (`/`, `/unload`, `/foreign`, …).
+
+const LOCALE_SEGMENTS = new Set(['kk', 'en'])
+
+interface NavTarget { to: string }
+interface NavModule { link: string, items: NavTarget[] }
+interface NormalizedUrl { host: string, key: string }
+
+function safeUrl(href: string): URL | null {
+  try {
+    return new URL(href)
+  }
+  catch {
+    return null
+  }
+}
+
+// Reduce a URL to a comparable identity: host + locale-stripped path + query.
+// The query is kept because it can be significant (fines main is `/?check_fines=true`).
+function normalize(href: string): NormalizedUrl | null {
+  const url = safeUrl(href)
+  if (!url) return null
+
+  const segments = url.pathname
+    .split('/')
+    .filter(segment => segment && !LOCALE_SEGMENTS.has(segment))
+
+  const path = `/${segments.join('/')}`
+  return { host: url.host, key: path + url.search }
+}
+
+// A "root" target has no path segments (e.g. `/` or `/?check_fines=true`).
+// Roots must match exactly, otherwise their prefix would light up every sub-page.
+function isRoot(key: string): boolean {
+  return key === '/' || key.startsWith('/?')
+}
+
+export function useActiveNavigation() {
+  const route = useRoute()
+
+  // Recompute on every SPA navigation. Host stays constant within an app, so we
+  // read it from the request URL (SSR-safe); the path/query come from the route.
+  const current = computed<NormalizedUrl | null>(() => {
+    const host = useRequestURL().host
+    return normalize(`https://${host}${route.fullPath}`)
+  })
+
+  function isActiveModule(module: NavModule): boolean {
+    if (!current.value) return false
+
+    const hosts = new Set<string>()
+    const link = normalize(module.link)
+    if (link) hosts.add(link.host)
+    for (const item of module.items) {
+      const item_url = normalize(item.to)
+      if (item_url) hosts.add(item_url.host)
+    }
+
+    return hosts.has(current.value.host)
+  }
+
+  function isActiveService(itemTo: string): boolean {
+    const cur = current.value
+    const item = normalize(itemTo)
+    if (!cur || !item || cur.host !== item.host) return false
+
+    // The car-check page redirects to a `car-result` URL; keep its item lit.
+    if (item.key.includes('check-car') && cur.key.includes('car-result')) return true
+
+    if (cur.key === item.key) return true
+    if (isRoot(item.key)) return false
+
+    return cur.key.startsWith(item.key)
+  }
+
+  return { isActiveModule, isActiveService }
+}

package/composables/useChipOverflow.ts

@@ -0,0 +1,92 @@
+import type { ComputedRef, Ref } from 'vue'
+
+interface UseChipOverflowOptions {
+  container: Ref<HTMLElement | null>
+  measure: Ref<HTMLElement | null>
+  count: Ref<number>
+  contentKey?: Ref<unknown>
+  gap?: number
+}
+
+interface UseChipOverflow {
+  visibleCount: Ref<number>
+  hiddenCount: ComputedRef<number>
+}
+
+export function useChipOverflow(options: UseChipOverflowOptions): UseChipOverflow {
+  const { container, measure, count, contentKey, gap = 6 } = options
+
+  const availableWidth = ref(0)
+  const visibleCount = ref(0)
+
+  // Ceil so a chip is only counted as fitting when it fully fits;
+  // sub-pixel underestimates would let flexbox squeeze visible chips into truncation.
+  function chipWidth(el: HTMLElement): number {
+    return Math.ceil(el.getBoundingClientRect().width)
+  }
+
+  function recompute() {
+    const total = count.value
+    if (total <= 0) {
+      visibleCount.value = 0
+      return
+    }
+
+    const avail = availableWidth.value
+    const root = measure.value
+
+    if (!avail || !root) {
+      visibleCount.value = total
+      return
+    }
+
+    const chips = (Array.from(root.children) as HTMLElement[]).slice(0, total)
+
+    let used = 0
+    let fit = 0
+    for (let i = 0; i < chips.length; i++) {
+      const width = chipWidth(chips[i]) + (i > 0 ? gap : 0)
+      if (used + width > avail) break
+      used += width
+      fit++
+    }
+
+    if (fit >= total) {
+      visibleCount.value = total
+      return
+    }
+
+    const badge = root.children[total] as HTMLElement | undefined
+    const badgeWidth = (badge ? chipWidth(badge) : 0) + gap
+    while (fit > 1 && used + badgeWidth > avail) {
+      used -= chipWidth(chips[fit - 1]) + gap
+      fit--
+    }
+
+    visibleCount.value = Math.max(1, fit)
+  }
+
+  let resizeObserver: ResizeObserver | null = null
+
+  onMounted(() => {
+    if (container.value) {
+      availableWidth.value = Math.floor(container.value.clientWidth)
+      resizeObserver = new ResizeObserver((entries) => {
+        availableWidth.value = Math.floor(entries[0]?.contentRect.width ?? 0)
+      })
+      resizeObserver.observe(container.value)
+    }
+    recompute()
+  })
+
+  onUnmounted(() => resizeObserver?.disconnect())
+
+  watch(
+    contentKey ? [availableWidth, count, contentKey] : [availableWidth, count],
+    () => nextTick(recompute),
+  )
+
+  const hiddenCount = computed(() => Math.max(0, count.value - visibleCount.value))
+
+  return { visibleCount, hiddenCount }
+}