fix(VTreeview): properly indent nodes

fixes #20421
vuetifyjs · Jan 20, 2025 · 28ed40b · 28ed40b
1 parent 7abcca1
commit 28ed40b
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 23 deletions.
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass
@@ -16,3 +16,6 @@
 
     .v-list-group__items .v-list-item
       padding-inline-start: calc(#{$treeview-item-padding-inline-start} + var(--indent-padding)) !important
+
+    .v-list-group__items .v-list-item.v-list-group__header
+      padding-inline-start: calc(#{$treeview-group-header-padding-inline-start} + var(--indent-padding)) !important
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
@@ -80,29 +80,29 @@ export const VTreeviewItem = genericComponent<VListItemSlots>()({
             prepend: hasPrepend ? slotProps => {
               return (
                 <>
-                  { props.toggleIcon && (
-                    <VListItemAction start={ false }>
-                      <VBtn
-                        density="compact"
-                        icon={ props.toggleIcon }
-                        loading={ props.loading }
-                        variant="text"
-                        onClick={ props.onToggleExpand }
-                      >
-                        {{
-                          loader () {
-                            return (
-                              <VProgressCircular
-                                indeterminate="disable-shrink"
-                                size="20"
-                                width="2"
-                              />
-                            )
-                          },
-                        }}
-                      </VBtn>
-                    </VListItemAction>
-                  )}
+                  <VListItemAction start={ false }>
+                    { props.toggleIcon && (
+                        <VBtn
+                          density="compact"
+                          icon={ props.toggleIcon }
+                          loading={ props.loading }
+                          variant="text"
+                          onClick={ props.onToggleExpand }
+                        >
+                          {{
+                            loader () {
+                              return (
+                                <VProgressCircular
+                                  indeterminate="disable-shrink"
+                                  size="20"
+                                  width="2"
+                                />
+                              )
+                            },
+                          }}
+                        </VBtn>
+                    )}
+                  </VListItemAction>
 
                   { slots.prepend?.(slotProps) }
                 </>

diff --git a/packages/vuetify/src/labs/VTreeview/_variables.scss b/packages/vuetify/src/labs/VTreeview/_variables.scss
@@ -4,3 +4,4 @@ $treeview-group-list-indent-size: 16px !default;
 $treeview-group-list-prepend-width: 16px !default;
 $treeview-item-padding-inline-start: 12px !default;
 $treeview-item-prepend-padding-inline-start: 44px !default;
+$treeview-group-header-padding-inline-start: 16px !default;