feat: expandable container for chunk details

Author: webfansplz

packages/vite/src/app/components/chunks/Imports.vue

@@ -7,13 +7,15 @@ defineProps<{
 </script>
 
 <template>
-  <div flex="~ col gap-1" mt2 ws-nowrap>
-    <ChunksImportItem
-      v-for="(chunk, index) in imports"
-      :key="index"
-      :chunk="chunk"
-      hover="bg-active"
-      border="~ base rounded" px2 py1 w-full
-    />
-  </div>
+  <DisplayExpandableContainer flex="~ col gap-1" mt2 ws-nowrap :list="imports">
+    <template #default="{ items }">
+      <ChunksImportItem
+        v-for="(chunk, index) in items"
+        :key="index"
+        :chunk="chunk"
+        hover="bg-active"
+        border="~ base rounded" px2 py1 w-full
+      />
+    </template>
+  </DisplayExpandableContainer>
 </template>

packages/vite/src/app/components/data/ChunkDetails.vue

@@ -102,18 +102,20 @@ const importers = computed((): RolldownChunkImport[] => {
       <summary op50>
         <span>Modules ({{ chunk.modules.length }})</span>
       </summary>
-      <div flex="~ col gap-1" mt2 ws-nowrap>
-        <DisplayModuleId
-          v-for="module of chunk.modules"
-          :id="module"
-          :key="module"
-          :session
-          :link="true"
-          :minimal="true"
-          hover="bg-active"
-          border="~ base rounded" px2 py1 w-full
-        />
-      </div>
+      <DisplayExpandableContainer flex="~ col gap-1" mt2 ws-nowrap :list="chunk.modules">
+        <template #default="{ items }">
+          <DisplayModuleId
+            v-for="module of items"
+            :id="module"
+            :key="module"
+            :session
+            :link="true"
+            :minimal="true"
+            hover="bg-active"
+            border="~ base rounded" px2 py1 w-full
+          />
+        </template>
+      </DisplayExpandableContainer>
     </details>
 
     <VisualLoading v-if="isLoading" />

packages/vite/src/app/components/display/ExpandableContainer.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts" generic="T">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  list: T[]
+}>()
+
+const count = defineModel('count', {
+  default: 20,
+})
+
+const initialCount = count.value
+
+const top = computed(() => props.list.slice(0, count.value))
+</script>
+
+<template>
+  <div relative>
+    <slot :items="top" />
+    <div
+      v-if="list.length > count"
+      pointer-events-none absolute left-0 right-0 bottom-0 bg-gradient-more h-30
+      flex="~ justify-center"
+    >
+      <button
+        op35 p2 pt4 mta
+        pointer-events-auto
+        hover:op100
+        flex="~ items-center gap-1 justify-center"
+        @click="count = Math.round(count + initialCount)"
+      >
+        <div i-ri:arrow-down-double-line />
+        <span>More</span>
+        <DisplayNumberBadge prefix="+" :number="Math.min(Math.round(initialCount), props.list.length - count)" rounded-full text-sm />
+      </button>
+      <button
+        op35 p2 pt4 mta
+        pointer-events-auto
+        hover:op100
+        flex="~ items-center gap-1 justify-center"
+        @click="count = props.list.length"
+      >
+        <div i-ph-arrows-out-line-vertical-duotone />
+        <span>All</span>
+        <DisplayNumberBadge :number="props.list.length" rounded-full text-sm />
+      </button>
+    </div>
+  </div>
+</template>