From 359a11551f655ff485a47bcc6de94d2ee9e82dad Mon Sep 17 00:00:00 2001
From: Yuchao Wu <yuchao.sydneyuni@gmail.com>
Date: Fri, 25 Oct 2024 22:30:42 +1100
Subject: [PATCH] feat(VList): add prependSpacer prop

---
 packages/api-generator/src/locale/en/VList.json     |  1 +
 packages/vuetify/src/components/VList/VList.tsx     | 13 +++++++++++--
 .../vuetify/src/components/VList/VListItem.sass     |  2 +-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/api-generator/src/locale/en/VList.json b/packages/api-generator/src/locale/en/VList.json
index c45480c4d31..8ba47a40476 100644
--- a/packages/api-generator/src/locale/en/VList.json
+++ b/packages/api-generator/src/locale/en/VList.json
@@ -5,6 +5,7 @@
     "inactive": "If set, the list tile will not be rendered as a link even if it has to/href prop or @click handler.",
     "lines": "Designates a **minimum-height** for all children `v-list-item` components. This prop uses [line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp) and is not supported in all browsers.",
     "link": "Applies `v-list-item` hover styles. Useful when using the item is an _activator_.",
+    "prependSpacer": "Defines the gap between the prepend element and the element that follows it.", 
     "nav": "An alternative styling that reduces `v-list-item` width and rounds the corners. Typically used with **[v-navigation-drawer](/components/navigation-drawers)**.",
     "subheader": "Removes the top padding from `v-list-subheader` components. When used as a **String**, renders a subheader for you.",
     "slim": "Reduces horizontal spacing for badges, icons, tooltips, and avatars within slim list items to create a more compact visual representation.",
diff --git a/packages/vuetify/src/components/VList/VList.tsx b/packages/vuetify/src/components/VList/VList.tsx
index cbdc04b2cce..25f8790e265 100644
--- a/packages/vuetify/src/components/VList/VList.tsx
+++ b/packages/vuetify/src/components/VList/VList.tsx
@@ -21,8 +21,8 @@ import { makeThemeProps, provideTheme } from '@/composables/theme'
 import { makeVariantProps } from '@/composables/variant'
 
 // Utilities
-import { computed, ref, shallowRef, toRef } from 'vue'
-import { EventProp, focusChild, genericComponent, getPropertyFromItem, omit, propsFactory, useRender } from '@/util'
+import { computed, ref, shallowRef, toRef, watch } from 'vue'
+import { convertToUnit, EventProp, focusChild, genericComponent, getPropertyFromItem, omit, propsFactory, useRender } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -92,6 +92,7 @@ export const makeVListProps = propsFactory({
     type: [Boolean, String] as PropType<'one' | 'two' | 'three' | false>,
     default: 'one',
   },
+  prependSpacer: [Number, String],
   slim: Boolean,
   nav: Boolean,
 
@@ -239,6 +240,14 @@ export const VList = genericComponent<new <
       }
     }
 
+    watch([contentRef, () => props.prependSpacer], () => {
+      if (contentRef.value && props.prependSpacer) {
+        const width = convertToUnit(props.prependSpacer)
+
+        if (width) contentRef.value.style.setProperty('--v-list-prepend-spacer-width', width)
+      }
+    }, { immediate: true })
+
     useRender(() => {
       return (
         <props.tag
diff --git a/packages/vuetify/src/components/VList/VListItem.sass b/packages/vuetify/src/components/VList/VListItem.sass
index 3dfb6b0b782..fe5650d797a 100644
--- a/packages/vuetify/src/components/VList/VListItem.sass
+++ b/packages/vuetify/src/components/VList/VListItem.sass
@@ -78,7 +78,7 @@
     > .v-icon,
     > .v-tooltip
       ~ .v-list-item__spacer
-        width: $list-item-icon-margin-start
+        width: var(--v-list-prepend-spacer-width, $list-item-icon-margin-start)
 
     > .v-avatar ~ .v-list-item__spacer
       width: $list-item-avatar-margin-start