adata-ui 2.1.40-beta → 2.1.40-beta.2

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,82 @@
+import type { ComputedRef, Ref } from 'vue'
+
+interface UseChipOverflowOptions {
+  container: Ref<HTMLElement | null>
+  measure: Ref<HTMLElement | null>
+  count: Ref<number>
+  gap?: number
+}
+
+interface UseChipOverflow {
+  visibleCount: Ref<number>
+  hiddenCount: ComputedRef<number>
+}
+
+export function useChipOverflow(options: UseChipOverflowOptions): UseChipOverflow {
+  const { container, measure, count, gap = 6 } = options
+
+  const availableWidth = ref(0)
+  const visibleCount = ref(0)
+
+  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 = chips[i].offsetWidth + (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?.offsetWidth ?? 0) + gap
+    while (fit > 1 && used + badgeWidth > avail) {
+      used -= chips[fit - 1].offsetWidth + gap
+      fit--
+    }
+
+    visibleCount.value = Math.max(1, fit)
+  }
+
+  let resizeObserver: ResizeObserver | null = null
+
+  onMounted(() => {
+    if (container.value) {
+      availableWidth.value = container.value.clientWidth
+      resizeObserver = new ResizeObserver((entries) => {
+        availableWidth.value = entries[0]?.contentRect.width ?? 0
+      })
+      resizeObserver.observe(container.value)
+    }
+    recompute()
+  })
+
+  onUnmounted(() => resizeObserver?.disconnect())
+
+  watch([availableWidth, count], () => nextTick(recompute))
+
+  const hiddenCount = computed(() => Math.max(0, count.value - visibleCount.value))
+
+  return { visibleCount, hiddenCount }
+}

package/package.json

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