feat: add item size configuration options for list view in demo and documentation, enhancing user customization capabilities

Author: n1crack

docs/.vitepress/config.mts

@@ -286,6 +286,7 @@ gtag('config', 'G-6BYQESCJ6R');`
           items: [
             { text: 'Basic Usage', link: '/examples/basic-usage' },
             { text: 'Custom Icons', link: '/examples/custom-icons' },
+            { text: 'Item Size Configuration', link: '/examples/item-size-configuration' },
             { text: 'Feature Presets', link: '/examples/feature-presets' },
             { text: 'UI Visibility', link: '/examples/ui-visibility' },
             { text: 'Single Selection', link: '/examples/single-selection' },

docs/.vitepress/theme/components/examples/ItemSizeConfigurationDemo.vue

@@ -58,6 +58,49 @@
           </div>
         </div>
 
+        <div class="controls">
+          <h4>List View Settings</h4>
+          <div class="control-group">
+            <label>
+              <span>Item Height: {{ listItemHeight }}px</span>
+              <input
+                v-model.number="listItemHeight"
+                type="range"
+                min="20"
+                max="80"
+                step="2"
+                class="slider"
+              />
+            </label>
+          </div>
+          <div class="control-group">
+            <label>
+              <span>Gap: {{ listItemGap }}px</span>
+              <input
+                v-model.number="listItemGap"
+                type="range"
+                min="0"
+                max="12"
+                step="1"
+                class="slider"
+              />
+            </label>
+          </div>
+          <div class="control-group">
+            <label>
+              <span>Icon Size: {{ listIconSize }}px</span>
+              <input
+                v-model.number="listIconSize"
+                type="range"
+                min="16"
+                max="40"
+                step="2"
+                class="slider"
+              />
+            </label>
+          </div>
+        </div>
+
         <div class="vuefinder-container">
           <vue-finder
             id="demo-item-size"
@@ -81,15 +124,20 @@ const gridItemWidth = ref(96);
 const gridItemHeight = ref(80);
 const gridItemGap = ref(8);
 const gridIconSize = ref(48);
+const listItemHeight = ref(32);
+const listItemGap = ref(2);
+const listIconSize = ref(20);
 
 const computedConfig = computed(() => ({
   initialPath: 'local://',
   persist: false,
-  view: 'grid',
   gridItemWidth: gridItemWidth.value,
   gridItemHeight: gridItemHeight.value,
   gridItemGap: gridItemGap.value,
   gridIconSize: gridIconSize.value,
+  listItemHeight: listItemHeight.value,
+  listItemGap: listItemGap.value,
+  listIconSize: listIconSize.value,
 }));
 
 const driver = ref<Driver | null>(null);

docs/examples/item-size-configuration.md

@@ -8,7 +8,7 @@ Learn how to customize item dimensions, spacing, and icon sizes for both grid an
 
 ## Live Demo
 
-Use the sliders below to adjust grid item dimensions and see the changes in real-time:
+Use the sliders below to adjust item dimensions and icon sizes for both grid and list views. Switch between grid and list view in the demo to see how icon sizes change:
 
 <ClientOnly>
   <ItemSizeConfigurationDemo />