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

package/composables/useAdaptive.ts

@@ -1,46 +1,46 @@
-import {ref, useSSRContext} from "vue";
-import type {Ref, UnwrapRef} from "vue"
-
-export type AdaptiveContext = {
-    isMobile: boolean
-    isTablet: boolean
-    isSmallTablet: boolean
-    isDesktop: boolean
-}
-
-const isBrowser = typeof window !== undefined && process.client
-const computeIsMobile = (): boolean =>
-    isBrowser ? window.matchMedia('(max-width: 560px)').matches : false
-
-const computeIsSmallTablet = (): boolean =>
-    isBrowser ? window.matchMedia('(max-width: 767px)').matches : false
-const computeIsTablet = (): boolean =>
-    isBrowser ? window.innerWidth >= 768 && window.innerWidth < 1024 : false
-const computeIsDesktop = (): boolean =>
-    isBrowser ? window.innerWidth >= 1024 : false
-
-export const useAdaptive = (): Ref<AdaptiveContext> => {
-    const ctx = ref<UnwrapRef<AdaptiveContext>>({
-        isDesktop: computeIsDesktop(),
-        isMobile: computeIsMobile(),
-        isTablet: computeIsTablet(),
-        isSmallTablet: computeIsSmallTablet()
-    })
-
-    const setValues = () =>
-        (ctx.value = {
-            isDesktop: computeIsDesktop(),
-            isMobile: computeIsMobile(),
-            isTablet: computeIsTablet(),
-            isSmallTablet: computeIsSmallTablet()
-        })
-
-
-    onMounted(() => {
-            window.addEventListener('resize', setValues, { passive: true })
-        }
-    )
-    onUnmounted(() => window.removeEventListener('resize', setValues))
-
-    return ctx
-}
+import {ref, useSSRContext} from "vue";
+import type {Ref, UnwrapRef} from "vue"
+
+export type AdaptiveContext = {
+    isMobile: boolean
+    isTablet: boolean
+    isSmallTablet: boolean
+    isDesktop: boolean
+}
+
+const isBrowser = typeof window !== undefined && process.client
+const computeIsMobile = (): boolean =>
+    isBrowser ? window.matchMedia('(max-width: 560px)').matches : false
+
+const computeIsSmallTablet = (): boolean =>
+    isBrowser ? window.matchMedia('(max-width: 767px)').matches : false
+const computeIsTablet = (): boolean =>
+    isBrowser ? window.innerWidth >= 768 && window.innerWidth < 1024 : false
+const computeIsDesktop = (): boolean =>
+    isBrowser ? window.innerWidth >= 1024 : false
+
+export const useAdaptive = (): Ref<AdaptiveContext> => {
+    const ctx = ref<UnwrapRef<AdaptiveContext>>({
+        isDesktop: computeIsDesktop(),
+        isMobile: computeIsMobile(),
+        isTablet: computeIsTablet(),
+        isSmallTablet: computeIsSmallTablet()
+    })
+
+    const setValues = () =>
+        (ctx.value = {
+            isDesktop: computeIsDesktop(),
+            isMobile: computeIsMobile(),
+            isTablet: computeIsTablet(),
+            isSmallTablet: computeIsSmallTablet()
+        })
+
+
+    onMounted(() => {
+            window.addEventListener('resize', setValues, { passive: true })
+        }
+    )
+    onUnmounted(() => window.removeEventListener('resize', setValues))
+
+    return ctx
+}

package/composables/useBuyTariffs.ts

@@ -1,91 +1,91 @@
-import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
-
-export function useBuyTariffs() {
-  const { commonAuth } = useAppConfig()
-
-  const userApiURL = commonAuth.userApiURL
-  const { locale } = useI18n()
-  const localePath = useLocalePath()
-  const checkNumber = ref(0)
-  const messageRate = ref(null)
-
-
-  const isAuthenticated = computed(() => {
-    const accessToken = useCookie('accessToken')
-    return accessToken.value
-  })
-
-  async function buyTariff(tariffs: any) {
-    await fetch(`${removeTrailingSlash(userApiURL)}/user/rate`, {
-      method: 'PUT',
-      credentials: 'include',
-      headers: {
-        'Content-Type': 'application/json',
-        'lang': locale.value,
-        Authorization: `Bearer ${isAuthenticated.value}`
-      },
-      body: JSON.stringify({
-        rate_code: tariffs
-      })
-    })
-    location.reload()
-  }
-
-  async function viaKaspiBank(tariffId: any, sum: any) {
-    try {
-      const info = await fetch(`${removeTrailingSlash(userApiURL)}/user/kaspi-balance/request/`, {
-        method: 'POST',
-        credentials: 'include',
-        headers: {
-          'Content-Type': 'application/json',
-          'lang': locale.value,
-          Authorization: `Bearer ${isAuthenticated.value}`
-        },
-        body: JSON.stringify({
-          amount: sum,
-          rate_id: tariffId
-        })
-      })
-      const { data } = await info.json().catch(() => ({}))
-
-      checkNumber.value = data.request_id
-    } catch (error) {
-      console.error(error)
-    } finally {
-      window.open(localePath(`https://kaspi.kz/pay/adata?service_id=5964&9507=${checkNumber.value}`), '_blank')
-    }
-  }
-
-  async function leaveRequest(name: any, email: any, phone: any, comment: any, rateCode: any = 'adata_pro') {
-    try {
-      const info = await fetch(`${removeTrailingSlash(userApiURL)}/message/rate`, {
-        method: 'POST',
-        credentials: 'include',
-        headers: {
-          'Content-Type': 'application/json',
-          'lang': locale.value,
-          Authorization: `Bearer ${isAuthenticated.value}`
-        },
-        body: JSON.stringify({
-          sender_name: name,
-          email: email,
-          phone_number: phone,
-          message: comment,
-          rate_code: rateCode,
-        })
-      })
-      const { data } = await info.json().catch(() => ({}))
-      messageRate.value = data
-    } catch (error) {
-      console.error(error)
-    }
-  }
-
-  return {
-    buyTariff,
-    viaKaspiBank,
-    checkNumber,
-    leaveRequest,
-    messageRate
-  }
-}
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+
+export function useBuyTariffs() {
+  const { commonAuth } = useAppConfig()
+
+  const userApiURL = commonAuth.userApiURL
+  const { locale } = useI18n()
+  const localePath = useLocalePath()
+  const checkNumber = ref(0)
+  const messageRate = ref(null)
+
+
+  const isAuthenticated = computed(() => {
+    const accessToken = useCookie('accessToken')
+    return accessToken.value
+  })
+
+  async function buyTariff(tariffs: any) {
+    await fetch(`${removeTrailingSlash(userApiURL)}/user/rate`, {
+      method: 'PUT',
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+        'lang': locale.value,
+        Authorization: `Bearer ${isAuthenticated.value}`
+      },
+      body: JSON.stringify({
+        rate_code: tariffs
+      })
+    })
+    location.reload()
+  }
+
+  async function viaKaspiBank(tariffId: any, sum: any) {
+    try {
+      const info = await fetch(`${removeTrailingSlash(userApiURL)}/user/kaspi-balance/request/`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+          'lang': locale.value,
+          Authorization: `Bearer ${isAuthenticated.value}`
+        },
+        body: JSON.stringify({
+          amount: sum,
+          rate_id: tariffId
+        })
+      })
+      const { data } = await info.json().catch(() => ({}))
+
+      checkNumber.value = data.request_id
+    } catch (error) {
+      console.error(error)
+    } finally {
+      window.open(localePath(`https://kaspi.kz/pay/adata?service_id=5964&9507=${checkNumber.value}`), '_blank')
+    }
+  }
+
+  async function leaveRequest(name: any, email: any, phone: any, comment: any, rateCode: any = 'adata_pro') {
+    try {
+      const info = await fetch(`${removeTrailingSlash(userApiURL)}/message/rate`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+          'lang': locale.value,
+          Authorization: `Bearer ${isAuthenticated.value}`
+        },
+        body: JSON.stringify({
+          sender_name: name,
+          email: email,
+          phone_number: phone,
+          message: comment,
+          rate_code: rateCode,
+        })
+      })
+      const { data } = await info.json().catch(() => ({}))
+      messageRate.value = data
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  return {
+    buyTariff,
+    viaKaspiBank,
+    checkNumber,
+    leaveRequest,
+    messageRate
+  }
+}

package/composables/useCarouselScroll.ts

@@ -1,49 +1,49 @@
-import { ref, type Ref, onMounted, onUnmounted } from 'vue'
-
-export const useCarouselScroll = (el: Ref<HTMLElement>) => {
-  const x = ref<number>(0)
-
-  function onMouseDown (e) {
-    el.value.style.scrollSnapType = 'none'
-    el.value.style.scrollBehavior = 'auto'
-
-    x.value = e.pageX
-
-    window.addEventListener('mousemove', onMouseMove)
-    window.addEventListener('mouseup', onMouseUp)
-  }
-
-  function onMouseUp () {
-    el.value.style.removeProperty('scroll-behavior')
-    el.value.style.removeProperty('scroll-snap-type')
-
-    window.removeEventListener('mousemove', onMouseMove)
-    window.removeEventListener('mouseup', onMouseUp)
-  }
-
-  function onMouseMove (e) {
-    e.preventDefault()
-
-    const delta = e.pageX - x.value
-
-    x.value = e.pageX
-
-    el.value.scrollBy(-delta, 0)
-  }
-
-  onMounted(() => {
-    if (!el.value) {
-      return
-    }
-
-    el.value.addEventListener('mousedown', onMouseDown)
-  })
-
-  onUnmounted(() => {
-    if (!el.value) {
-      return
-    }
-
-    el.value.removeEventListener('mousedown', onMouseDown)
-  })
-}
+import { ref, type Ref, onMounted, onUnmounted } from 'vue'
+
+export const useCarouselScroll = (el: Ref<HTMLElement>) => {
+  const x = ref<number>(0)
+
+  function onMouseDown (e) {
+    el.value.style.scrollSnapType = 'none'
+    el.value.style.scrollBehavior = 'auto'
+
+    x.value = e.pageX
+
+    window.addEventListener('mousemove', onMouseMove)
+    window.addEventListener('mouseup', onMouseUp)
+  }
+
+  function onMouseUp () {
+    el.value.style.removeProperty('scroll-behavior')
+    el.value.style.removeProperty('scroll-snap-type')
+
+    window.removeEventListener('mousemove', onMouseMove)
+    window.removeEventListener('mouseup', onMouseUp)
+  }
+
+  function onMouseMove (e) {
+    e.preventDefault()
+
+    const delta = e.pageX - x.value
+
+    x.value = e.pageX
+
+    el.value.scrollBy(-delta, 0)
+  }
+
+  onMounted(() => {
+    if (!el.value) {
+      return
+    }
+
+    el.value.addEventListener('mousedown', onMouseDown)
+  })
+
+  onUnmounted(() => {
+    if (!el.value) {
+      return
+    }
+
+    el.value.removeEventListener('mousedown', onMouseDown)
+  })
+}

package/composables/useChipOverflow.ts

@@ -1,82 +1,92 @@
-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 }
-}
+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 }
+}