diff --git a/packages/vuetify/src/components/VList/VListItem.sass b/packages/vuetify/src/components/VList/VListItem.sass index a57db323ea0..d1146c26a47 100644 --- 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 index ec51bda0e14..6bc8fc8bc64 100644 --- a/packages/vuetify/src/components/VList/VListItem.tsx +++ b/packages/vuetify/src/components/VList/VListItem.tsx @@ -359,6 +359,8 @@ export const VListItem = genericComponent()({ }) return { + activate, + isActivated, isGroupActivator, isSelected, list, diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx index 0ba53361b1e..5db80818a4e 100644 --- a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx +++ b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx @@ -7,6 +7,7 @@ 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' @@ -14,7 +15,7 @@ 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()({ 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()({ ) 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()({
<> - { genOverlays(isActivated.value, 'v-list-item') } + { genOverlays(isActivated.value || isSelected.value, 'v-list-item') } { props.toggleIcon && ( ()({ }, props.class, ]} - onClick={ () => noop } + onClick={ onClick } onKeydown={ isClickable.value && onKeyDown } > {{