feat(VList): allow group activator to be activated without open children

fixes #19441
vuetifyjs · May 10, 2024 · b49a70b · b49a70b
1 parent a6340ac
commit b49a70b
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 14 deletions.
diff --git a/packages/vuetify/src/components/VList/VList.tsx b/packages/vuetify/src/components/VList/VList.tsx
@@ -88,6 +88,10 @@ export const makeVListProps = propsFactory({
   disabled: Boolean,
   expandIcon: String,
   collapseIcon: String,
+  groupActivatorActivatable: {
+    type: Boolean,
+    default: false,
+  },
   lines: {
     type: [Boolean, String] as PropType<'one' | 'two' | 'three' | false>,
     default: 'one',

diff --git a/packages/vuetify/src/components/VList/VListGroup.tsx b/packages/vuetify/src/components/VList/VListGroup.tsx
@@ -78,7 +78,7 @@ export const VListGroup = genericComponent<VListGroupSlots>()({
     const toggleIcon = computed(() => isOpen.value ? props.collapseIcon : props.expandIcon)
     const activatorDefaults = computed(() => ({
       VListItem: {
-        active: isOpen.value,
+        // active: isOpen.value,
         activeColor: props.activeColor,
         baseColor: props.baseColor,
         color: props.color,

diff --git a/packages/vuetify/src/components/VList/VListItem.sass b/packages/vuetify/src/components/VList/VListItem.sass
@@ -318,12 +318,3 @@
 
   .v-list-group__items .v-list-item
     padding-inline-start: calc(#{$base-padding} + var(--indent-padding)) !important
-
-  .v-list-group__header.v-list-item--active
-    &:not(:focus-visible)
-      .v-list-item__overlay
-        opacity: 0
-
-    &:hover
-      .v-list-item__overlay
-        opacity: calc(#{map.get(settings.$states, 'hover')} * var(--v-theme-overlay-multiplier))
diff --git a/packages/vuetify/src/components/VList/VListItem.tsx b/packages/vuetify/src/components/VList/VListItem.tsx
@@ -28,7 +28,7 @@ import { Ripple } from '@/directives/ripple'
 
 // Utilities
 import { computed, watch } from 'vue'
-import { deprecate, EventProp, genericComponent, propsFactory, useRender } from '@/util'
+import { deprecate, EventProp, genericComponent, noop, propsFactory, useRender } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -173,12 +173,13 @@ export const VListItem = genericComponent<VListItemSlots>()({
 
     function onClick (e: MouseEvent) {
       emit('click', e)
-
+    }
+    function onSelect (e: MouseEvent) {
       if (!isClickable.value) return
 
       link.navigate?.(e)
 
-      if (isGroupActivator) return
+      if (!root.groupActivatorActivatable && isGroupActivator) return
 
       if (root.activatable.value) {
         activate(!isActivated.value, e)
@@ -241,7 +242,10 @@ export const VListItem = genericComponent<VListItemSlots>()({
           ]}
           href={ link.href.value }
           tabindex={ isClickable.value ? (list ? -2 : 0) : undefined }
-          onClick={ onClick }
+          onClick={[
+            onSelect,
+            root.groupActivatorActivatable ? () => noop : onClick,
+          ]}
           onKeydown={ isClickable.value && !isLink.value && onKeyDown }
           v-ripple={ isClickable.value && props.ripple }
         >
@@ -264,6 +268,7 @@ export const VListItem = genericComponent<VListItemSlots>()({
                       key="prepend-icon"
                       density={ props.density }
                       icon={ props.prependIcon }
+                      onClick={ root.groupActivatorActivatable ? onClick : () => noop }
                     />
                   )}
                 </>
@@ -318,6 +323,7 @@ export const VListItem = genericComponent<VListItemSlots>()({
                       key="append-icon"
                       density={ props.density }
                       icon={ props.appendIcon }
+                      onClick={ root.groupActivatorActivatable ? onClick : () => noop }
                     />
                   )}
 

diff --git a/packages/vuetify/src/composables/nested/nested.ts b/packages/vuetify/src/composables/nested/nested.ts
@@ -45,6 +45,7 @@ export type OpenStrategyProp = 'single' | 'multiple' | 'list' | OpenStrategy
 
 export interface NestedProps {
   activatable: boolean
+  groupActivatorActivatable: boolean
   selectable: boolean
   activeStrategy: ActiveStrategyProp | undefined
   selectStrategy: SelectStrategyProp | undefined
@@ -66,6 +67,7 @@ type NestedProvide = {
     parents: Ref<Map<unknown, unknown>>
     activatable: Ref<boolean>
     selectable: Ref<boolean>
+    groupActivatorActivatable: Ref<boolean>
     opened: Ref<Set<unknown>>
     activated: Ref<Set<unknown>>
     selected: Ref<Map<unknown, 'on' | 'off' | 'indeterminate'>>
@@ -93,6 +95,7 @@ export const emptyNested: NestedProvide = {
     activate: () => null,
     select: () => null,
     activatable: ref(false),
+    groupActivatorActivatable: ref(false),
     selectable: ref(false),
     opened: ref(new Set()),
     activated: ref(new Set()),
@@ -196,6 +199,7 @@ export const useNested = (props: NestedProps) => {
     root: {
       opened,
       activatable: toRef(props, 'activatable'),
+      groupActivatorActivatable: toRef(props, 'groupActivatorActivatable'),
       selectable: toRef(props, 'selectable'),
       activated,
       selected,