chore: achieve selectable same as activable

vuetifyjs · May 12, 2024 · bf1dd2b · bf1dd2b
1 parent a911942
commit bf1dd2b
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 11 deletions.
diff --git a/packages/vuetify/src/components/VList/VListItem.sass b/packages/vuetify/src/components/VList/VListItem.sass
@@ -319,7 +319,7 @@
   .v-list-group__items .v-list-item
     padding-inline-start: calc(#{$base-padding} + var(--indent-padding)) !important
 
-  .v-list-group__header:not(.v-treeview-item).v-list-item--active
+  .v-list-group__header:not(.v-treeview-item--activetable-group-activator).v-list-item--active
     &:not(:focus-visible)
       .v-list-item__overlay
         opacity: 0

diff --git a/packages/vuetify/src/components/VList/VListItem.tsx b/packages/vuetify/src/components/VList/VListItem.tsx
@@ -359,6 +359,8 @@ export const VListItem = genericComponent<VListItemSlots>()({
     })
 
     return {
+      activate,
+      isActivated,
       isGroupActivator,
       isSelected,
       list,

diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
@@ -7,14 +7,15 @@ import { VListItemAction, VListItemSubtitle, VListItemTitle } from '@/components
 import { makeVListItemProps, VListItem } from '@/components/VList/VListItem'
 
 // Composables
+import { useDensity } from '@/composables/density'
 import { IconValue } from '@/composables/icons'
 import { useNestedItem } from '@/composables/nested/nested'
 import { useLink } from '@/composables/router'
 import { genOverlays } from '@/composables/variant'
 
 // Utilities
 import { computed, inject, ref } from 'vue'
-import { genericComponent, noop, propsFactory, useRender } from '@/util'
+import { genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
 import { VTreeviewSymbol } from './shared'
@@ -49,7 +50,9 @@ export const VTreeviewItem = genericComponent<VListItemSlots>()({
       root,
     } = useNestedItem(id, false)
 
-    const isActivetableGroupActivator = computed(() => isGroupActivator && !props.openOnClick)
+    const isActivetableGroupActivator = computed(() => (root.activatable || root.selectable) && isGroupActivator && !props.openOnClick)
+
+    const { densityClasses } = useDensity(props, 'v-list-item')
 
     const slotProps = computed(() => ({
       isActive: isActivated.value,
@@ -65,14 +68,20 @@ export const VTreeviewItem = genericComponent<VListItemSlots>()({
     )
 
     function onClick (e: MouseEvent | KeyboardEvent) {
-      if (!isActivetableGroupActivator.value) return
+      if (!isActivetableGroupActivator.value && isGroupActivator) return
 
       if (root.activatable.value) {
-        activate(!isActivated.value, e)
+        if (isActivetableGroupActivator.value) {
+          activate(!isActivated.value, e)
+        } else {
+          vListItemRef.value?.activate(!vListItemRef.value?.isActivated, e)
+        }
       } else if (root.selectable.value) {
-        select(!isSelected.value, e)
-      } else if (props.value != null) {
-        select(!isSelected.value, e)
+        if (isActivetableGroupActivator.value) {
+          select(!isSelected.value, e)
+        } else {
+          vListItemRef.value?.select(!vListItemRef.value?.isSelected, e)
+        }
       }
     }
 
@@ -96,17 +105,21 @@ export const VTreeviewItem = genericComponent<VListItemSlots>()({
           <div
             class={[
               'v-list-item',
+              'v-list-item--one-line',
               'v-treeview-item',
+              'v-treeview-item--activetable-group-activator',
               {
-                'v-list-item--active': isActivated.value,
+                'v-list-item--active': isActivated.value || isSelected.value,
+                'v-treeview-item--filtered': visibleIds.value && !visibleIds.value.has(id.value),
               },
+              densityClasses.value,
               props.class,
             ]}
             onClick={ onClick }
             v-ripple={ isClickable.value && props.ripple }
           >
             <>
-              { genOverlays(isActivated.value, 'v-list-item') }
+              { genOverlays(isActivated.value || isSelected.value, 'v-list-item') }
               { props.toggleIcon && (
                 <VListItemAction start={ false }>
                   <VBtn
@@ -160,7 +173,7 @@ export const VTreeviewItem = genericComponent<VListItemSlots>()({
             },
             props.class,
           ]}
-          onClick={ () => noop }
+          onClick={ onClick }
           onKeydown={ isClickable.value && onKeyDown }
         >
           {{