refactor: add new useVisibleItems composable (#2395)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: 43081j

app/components/Package/Dependencies.vue

@@ -37,11 +37,6 @@ function getDeprecatedDepInfo(depName: string) {
   return vulnTree.value.deprecatedPackages.find(p => p.name === depName && p.depth === 'direct')
 }
 
-// Expanded state for each section
-const depsExpanded = shallowRef(false)
-const peerDepsExpanded = shallowRef(false)
-const optionalDepsExpanded = shallowRef(false)
-
 // Sort dependencies alphabetically
 const sortedDependencies = computed(() => {
   if (!props.dependencies) return []
@@ -89,6 +84,24 @@ function getDepVersionClass(dep: string) {
   return getVersionClass(undefined)
 }
 
+const {
+  visibleItems: visibleDeps,
+  hasMore: hasMoreDeps,
+  expand: expandDeps,
+} = useVisibleItems(sortedDependencies, 10)
+
+const {
+  visibleItems: visiblePeerDeps,
+  hasMore: hasMorePeerDeps,
+  expand: expandPeerDeps,
+} = useVisibleItems(sortedPeerDependencies, 10)
+
+const {
+  visibleItems: visibleOptionalDeps,
+  hasMore: hasMoreOptionalDeps,
+  expand: expandOptionalDeps,
+} = useVisibleItems(sortedOptionalDependencies, 10)
+
 const numberFormatter = useNumberFormatter()
 </script>
 
@@ -110,7 +123,7 @@ const numberFormatter = useNumberFormatter()
     >
       <ul class="space-y-1 list-none m-0" :aria-label="$t('package.dependencies.list_label')">
         <li
-          v-for="[dep, version] in sortedDependencies.slice(0, depsExpanded ? undefined : 10)"
+          v-for="[dep, version] in visibleDeps"
           :key="dep"
           class="flex items-center justify-between py-1 text-sm gap-2"
         >
@@ -190,10 +203,10 @@ const numberFormatter = useNumberFormatter()
         </li>
       </ul>
       <button
-        v-if="sortedDependencies.length > 10 && !depsExpanded"
+        v-if="hasMoreDeps"
         type="button"
         class="my-2 ms-1 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
-        @click="depsExpanded = true"
+        @click="expandDeps"
       >
         {{
           $t(
@@ -222,7 +235,7 @@ const numberFormatter = useNumberFormatter()
         :aria-label="$t('package.peer_dependencies.list_label')"
       >
         <li
-          v-for="peer in sortedPeerDependencies.slice(0, peerDepsExpanded ? undefined : 10)"
+          v-for="peer in visiblePeerDeps"
           :key="peer.name"
           class="flex items-center justify-between py-1 text-sm gap-1 min-w-0"
         >
@@ -245,10 +258,10 @@ const numberFormatter = useNumberFormatter()
         </li>
       </ul>
       <button
-        v-if="sortedPeerDependencies.length > 10 && !peerDepsExpanded"
+        v-if="hasMorePeerDeps"
         type="button"
         class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
-        @click="peerDepsExpanded = true"
+        @click="expandPeerDeps"
       >
         {{
           $t(
@@ -281,10 +294,7 @@ const numberFormatter = useNumberFormatter()
         :aria-label="$t('package.optional_dependencies.list_label')"
       >
         <li
-          v-for="[dep, version] in sortedOptionalDependencies.slice(
-            0,
-            optionalDepsExpanded ? undefined : 10,
-          )"
+          v-for="[dep, version] in visibleOptionalDeps"
           :key="dep"
           class="flex items-baseline justify-between py-1 text-sm gap-2"
         >
@@ -302,10 +312,10 @@ const numberFormatter = useNumberFormatter()
         </li>
       </ul>
       <button
-        v-if="sortedOptionalDependencies.length > 10 && !optionalDepsExpanded"
+        v-if="hasMoreOptionalDeps"
         type="button"
         class="mt-2 truncate"
-        @click="optionalDepsExpanded = true"
+        @click="expandOptionalDeps"
       >
         {{
           $t(

app/composables/useVisibleItems.ts

@@ -0,0 +1,29 @@
+import { computed, shallowRef, toValue } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+
+export function useVisibleItems<T>(items: MaybeRefOrGetter<T[]>, limit: number) {
+  const showAll = shallowRef(false)
+
+  const visibleItems = computed(() => {
+    const list = toValue(items)
+    return showAll.value ? list : list.slice(0, limit)
+  })
+
+  const hiddenCount = computed(() =>
+    showAll.value ? 0 : Math.max(0, toValue(items).length - limit),
+  )
+
+  const hasMore = computed(() => !showAll.value && toValue(items).length > limit)
+
+  const expand = () => {
+    showAll.value = true
+  }
+  const collapse = () => {
+    showAll.value = false
+  }
+  const toggle = () => {
+    showAll.value = !showAll.value
+  }
+
+  return { visibleItems, hiddenCount, hasMore, showAll, expand, collapse, toggle }
+}

test/unit/app/composables/use-visible-items.spec.ts

@@ -0,0 +1,147 @@
+import { describe, expect, it } from 'vitest'
+import { computed, ref } from 'vue'
+import { useVisibleItems } from '~/composables/useVisibleItems'
+
+describe('useVisibleItems', () => {
+  describe('initial state', () => {
+    it('returns all items when list is within limit', () => {
+      const { visibleItems, hasMore, hiddenCount } = useVisibleItems(['a', 'b', 'c'], 5)
+
+      expect(visibleItems.value).toEqual(['a', 'b', 'c'])
+      expect(hasMore.value).toBe(false)
+      expect(hiddenCount.value).toBe(0)
+    })
+
+    it('returns exactly limit items when list exceeds limit', () => {
+      const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+      const { visibleItems, hasMore, hiddenCount } = useVisibleItems(items, 5)
+
+      expect(visibleItems.value).toEqual([1, 2, 3, 4, 5])
+      expect(hasMore.value).toBe(true)
+      expect(hiddenCount.value).toBe(5)
+    })
+
+    it('returns all items when list length equals limit exactly', () => {
+      const items = [1, 2, 3]
+      const { visibleItems, hasMore, hiddenCount } = useVisibleItems(items, 3)
+
+      expect(visibleItems.value).toEqual([1, 2, 3])
+      expect(hasMore.value).toBe(false)
+      expect(hiddenCount.value).toBe(0)
+    })
+
+    it('handles empty list', () => {
+      const { visibleItems, hasMore, hiddenCount } = useVisibleItems([], 5)
+
+      expect(visibleItems.value).toEqual([])
+      expect(hasMore.value).toBe(false)
+      expect(hiddenCount.value).toBe(0)
+    })
+  })
+
+  describe('expand()', () => {
+    it('shows all items after expand', () => {
+      const items = [1, 2, 3, 4, 5, 6]
+      const { visibleItems, hasMore, hiddenCount, expand } = useVisibleItems(items, 3)
+
+      expect(visibleItems.value).toEqual([1, 2, 3])
+
+      expand()
+
+      expect(visibleItems.value).toEqual([1, 2, 3, 4, 5, 6])
+      expect(hasMore.value).toBe(false)
+      expect(hiddenCount.value).toBe(0)
+    })
+  })
+
+  describe('collapse()', () => {
+    it('hides items again after collapse', () => {
+      const items = [1, 2, 3, 4, 5, 6]
+      const { visibleItems, hasMore, expand, collapse } = useVisibleItems(items, 3)
+
+      expect(visibleItems.value).toEqual([1, 2, 3])
+
+      expand()
+
+      expect(visibleItems.value).toEqual([1, 2, 3, 4, 5, 6])
+
+      collapse()
+
+      expect(visibleItems.value).toEqual([1, 2, 3])
+      expect(hasMore.value).toBe(true)
+    })
+  })
+
+  describe('toggle()', () => {
+    it('expands on first toggle', () => {
+      const items = [1, 2, 3, 4, 5]
+      const { visibleItems, toggle } = useVisibleItems(items, 3)
+
+      expect(visibleItems.value).toEqual([1, 2, 3])
+
+      toggle()
+
+      expect(visibleItems.value).toEqual([1, 2, 3, 4, 5])
+    })
+
+    it('collapses on second toggle', () => {
+      const items = [1, 2, 3, 4, 5]
+      const { visibleItems, toggle } = useVisibleItems(items, 3)
+
+      expect(visibleItems.value).toEqual([1, 2, 3])
+
+      toggle()
+
+      expect(visibleItems.value).toEqual([1, 2, 3, 4, 5])
+
+      toggle()
+
+      expect(visibleItems.value).toEqual([1, 2, 3])
+    })
+  })
+
+  describe('reactivity', () => {
+    it('reacts to ref source changes', () => {
+      const items = ref([1, 2, 3])
+      const { visibleItems, hasMore, hiddenCount } = useVisibleItems(items, 2)
+
+      expect(visibleItems.value).toEqual([1, 2])
+      expect(hasMore.value).toBe(true)
+      expect(hiddenCount.value).toBe(1)
+
+      items.value = [1, 2]
+
+      expect(visibleItems.value).toEqual([1, 2])
+      expect(hasMore.value).toBe(false)
+      expect(hiddenCount.value).toBe(0)
+    })
+
+    it('reacts to computed source changes', () => {
+      const source = ref([1, 2, 3, 4, 5])
+      const filtered = computed(() => source.value.filter(n => n % 2 === 0))
+      const { visibleItems, hasMore } = useVisibleItems(filtered, 3)
+
+      expect(visibleItems.value).toEqual([2, 4])
+      expect(hasMore.value).toBe(false)
+
+      source.value = [1, 2, 3, 4, 5, 6, 7, 8]
+
+      expect(visibleItems.value).toEqual([2, 4, 6])
+      expect(hasMore.value).toBe(true)
+    })
+
+    it('reacts to getter function source changes', () => {
+      const count = ref(2)
+      const { visibleItems } = useVisibleItems(
+        () => Array.from({ length: count.value }, (_, i) => i),
+        3,
+      )
+
+      expect(visibleItems.value).toEqual([0, 1])
+
+      count.value = 5
+
+      expect(visibleItems.value).toEqual([0, 1, 2])
+    })
+  })
+})