adata-ui 2.1.41-beta.1 → 2.1.41

package/composables/useChipOverflow.ts

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