refactor: rollback groupActivatorActivatable & move activate group ac…

…tivator as treeview dedicated logic
vuetifyjs · May 11, 2024 · d13e68f · d13e68f
1 parent b49a70b
commit d13e68f
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 20 deletions.
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,3 +318,12 @@
 
   .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, noop, propsFactory, useRender } from '@/util'
+import { deprecate, EventProp, genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -173,13 +173,12 @@ export const VListItem = genericComponent<VListItemSlots>()({
 
     function onClick (e: MouseEvent) {
       emit('click', e)
-    }
-    function onSelect (e: MouseEvent) {
+
       if (!isClickable.value) return
 
       link.navigate?.(e)
 
-      if (!root.groupActivatorActivatable && isGroupActivator) return
+      if (isGroupActivator) return
 
       if (root.activatable.value) {
         activate(!isActivated.value, e)
@@ -242,10 +241,7 @@ export const VListItem = genericComponent<VListItemSlots>()({
           ]}
           href={ link.href.value }
           tabindex={ isClickable.value ? (list ? -2 : 0) : undefined }
-          onClick={[
-            onSelect,
-            root.groupActivatorActivatable ? () => noop : onClick,
-          ]}
+          onClick={ onClick }
           onKeydown={ isClickable.value && !isLink.value && onKeyDown }
           v-ripple={ isClickable.value && props.ripple }
         >
@@ -268,7 +264,6 @@ export const VListItem = genericComponent<VListItemSlots>()({
                       key="prepend-icon"
                       density={ props.density }
                       icon={ props.prependIcon }
-                      onClick={ root.groupActivatorActivatable ? onClick : () => noop }
                     />
                   )}
                 </>
@@ -323,7 +318,6 @@ 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,7 +45,6 @@ export type OpenStrategyProp = 'single' | 'multiple' | 'list' | OpenStrategy
 
 export interface NestedProps {
   activatable: boolean
-  groupActivatorActivatable: boolean
   selectable: boolean
   activeStrategy: ActiveStrategyProp | undefined
   selectStrategy: SelectStrategyProp | undefined
@@ -67,7 +66,6 @@ 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'>>
@@ -95,7 +93,6 @@ 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()),
@@ -199,7 +196,6 @@ export const useNested = (props: NestedProps) => {
     root: {
       opened,
       activatable: toRef(props, 'activatable'),
-      groupActivatorActivatable: toRef(props, 'groupActivatorActivatable'),
       selectable: toRef(props, 'selectable'),
       activated,
       selected,
@@ -340,3 +336,4 @@ export const useNestedGroupActivator = () => {
 
   provide(VNestedSymbol, { ...parent, isGroupActivator: true })
 }
+
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass
@@ -1,4 +1,6 @@
+@use 'sass:map'
 @use '../../styles/tools'
+@use '../../styles/settings'
 @use './variables' as *
 
 @include tools.layer('components')
@@ -19,3 +21,15 @@
 
     .v-list-group__items .v-list-item--prepend
       // padding-inline-start: calc(#{$treeview-item-prepend-padding-inline-start} + var(--indent-padding)) !important
+
+  .v-list-item
+    &--active
+      .v-list-item__prepend,
+      .v-list-item__append
+        > .v-badge .v-icon,
+        > .v-icon
+          opacity: #{$list-item-icon-active-opacity}
+
+      &:not(.v-list-item--link)
+        .v-list-item__overlay
+          opacity: calc(#{map.get(settings.$states, 'activated')} * var(--v-theme-overlay-multiplier))
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
@@ -3,12 +3,14 @@ import './VTreeviewItem.sass'
 
 // Components
 import { VBtn } from '@/components/VBtn'
-import { VListItemAction } from '@/components/VList'
+import { VListItemAction, VListItemSubtitle, VListItemTitle } from '@/components/VList'
 import { makeVListItemProps, VListItem } from '@/components/VList/VListItem'
 
 // Composables
 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'
@@ -36,15 +38,37 @@ export const VTreeviewItem = genericComponent<VListItemSlots>()({
     const id = computed(() => props.value === undefined ? link.href.value : props.value)
     const vListItemRef = ref<VListItem>()
 
+    const {
+      activate,
+      isActivated,
+      select,
+      isSelected,
+      isIndeterminate,
+      isGroupActivator,
+      root,
+    } = useNestedItem(id, false)
+
+    const slotProps = computed(() => ({
+      isActive: isActivated.value,
+      select,
+      isSelected: isSelected.value,
+      isIndeterminate: isIndeterminate.value,
+    } satisfies any))
+
     const isClickable = computed(() =>
       !props.disabled &&
       props.link !== false &&
       (props.link || link.isClickable.value || (props.value != null && !!vListItemRef.value?.list))
     )
 
     function onClick (e: MouseEvent | KeyboardEvent) {
-      if (!vListItemRef.value?.isGroupActivator || !isClickable.value) return
-      props.value != null && vListItemRef.value?.select(!vListItemRef.value?.isSelected, e)
+      if (root.activatable.value) {
+        activate(!isActivated.value, e)
+      } else if (root.selectable.value) {
+        select(!isSelected.value, e)
+      } else if (props.value != null) {
+        select(!isSelected.value, e)
+      }
     }
 
     function onKeyDown (e: KeyboardEvent) {
@@ -57,10 +81,69 @@ export const VTreeviewItem = genericComponent<VListItemSlots>()({
     const visibleIds = inject(VTreeviewSymbol, { visibleIds: ref() }).visibleIds
 
     useRender(() => {
+      const hasTitle = (slots.title || props.title != null)
+      const hasSubtitle = (slots.subtitle || props.subtitle != null)
       const listItemProps = VListItem.filterProps(props)
       const hasPrepend = slots.prepend || props.toggleIcon
 
-      return (
+      return isGroupActivator
+        ? (
+          <div
+            class={[
+              'v-list-item',
+              'v-treeview-item',
+              {
+                'v-list-item--active': isActivated.value,
+              },
+              props.class,
+            ]}
+            onClick={ onClick }
+          >
+            <>
+              { genOverlays(isActivated.value, 'v-list-item') }
+              { props.toggleIcon && (
+                <VListItemAction start={ false }>
+                  <VBtn
+                    density="compact"
+                    icon={ props.toggleIcon }
+                    loading={ props.loading }
+                    variant="text"
+                    onClick={ props.onClick }
+                  >
+                    {{
+                      loader () {
+                        return (
+                          <VProgressCircular
+                            indeterminate="disable-shrink"
+                            size="20"
+                            width="2"
+                          />
+                        )
+                      },
+                    }}
+                  </VBtn>
+                </VListItemAction>
+              )}
+
+             </>
+
+            <div class="v-list-item__content" data-no-activator="">
+              { hasTitle && (
+                <VListItemTitle key="title">
+                  { slots.title?.({ title: props.title }) ?? props.title }
+                </VListItemTitle>
+              )}
+
+              { hasSubtitle && (
+                <VListItemSubtitle key="subtitle">
+                  { slots.subtitle?.({ subtitle: props.subtitle }) ?? props.subtitle }
+                </VListItemSubtitle>
+              )}
+
+              { slots.default?.(slotProps.value) }
+            </div>
+          </div>
+        ) : (
         <VListItem
           ref={ vListItemRef }
           { ...listItemProps }
@@ -108,7 +191,7 @@ export const VTreeviewItem = genericComponent<VListItemSlots>()({
             } : undefined,
           }}
         </VListItem>
-      )
+        )
     })
 
     return {}

diff --git a/packages/vuetify/src/labs/VTreeview/_variables.scss b/packages/vuetify/src/labs/VTreeview/_variables.scss
@@ -1,4 +1,5 @@
 @use 'sass:map';
+@forward '../../components/VList/variables';
 
 $treeview-group-list-indent-size: 16px !default;
 $treeview-group-list-prepend-width: 16px !default;