fix(defaults): react to sub-component updates

vuetifyjs · May 24, 2023 · 2783164 · 2783164
1 parent 4cbe669
commit 2783164
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 15 deletions.
diff --git a/packages/vuetify/src/composables/defaults.ts b/packages/vuetify/src/composables/defaults.ts
@@ -1,8 +1,5 @@
-// Composables
-import { useToggleScope } from '@/composables/toggleScope'
-
 // Utilities
-import { computed, inject, provide, ref, shallowRef, unref, watchEffect } from 'vue'
+import { computed, inject, provide, ref, shallowRef, unref, watch, watchEffect } from 'vue'
 import { getCurrentInstance, injectSelf, mergeDeep, toKebabCase } from '@/util'
 
 // Types
@@ -113,20 +110,24 @@ export function internalUseDefaults (
   watchEffect(() => {
     if (componentDefaults.value) {
       const subComponents = Object.entries(componentDefaults.value).filter(([key]) => key.startsWith(key[0].toUpperCase()))
-      if (subComponents.length) _subcomponentDefaults.value = Object.fromEntries(subComponents)
+      _subcomponentDefaults.value = subComponents.length ? Object.fromEntries(subComponents) : undefined
+    } else {
+      _subcomponentDefaults.value = undefined
     }
   })
 
   function provideSubDefaults () {
     // If subcomponent defaults are provided, override any
     // subcomponents provided by the component's setup function.
     // This uses injectSelf so must be done after the original setup to work.
-    useToggleScope(_subcomponentDefaults, () => {
-      provideDefaults(mergeDeep(
-        injectSelf(DefaultsSymbol)?.value ?? {},
-        _subcomponentDefaults.value
-      ))
-    })
+    const subDefaults = shallowRef()
+    watch(_subcomponentDefaults, val => {
+      subDefaults.value = val ? mergeDeep(
+        injectSelf(DefaultsSymbol, vm)?.value ?? {},
+        val
+      ) : undefined
+    }, { immediate: true })
+    provideDefaults(subDefaults)
   }
 
   return { props: _props, provideSubDefaults }

diff --git a/packages/vuetify/src/util/injectSelf.ts b/packages/vuetify/src/util/injectSelf.ts
@@ -2,11 +2,11 @@
 import { getCurrentInstance } from '@/util/getCurrentInstance'
 
 // Types
-import type { InjectionKey } from 'vue'
+import type { ComponentInternalInstance, InjectionKey } from 'vue'
 
-export function injectSelf<T>(key: InjectionKey<T> | string): T | undefined
-export function injectSelf (key: InjectionKey<any> | string) {
-  const { provides } = getCurrentInstance('injectSelf')
+export function injectSelf<T>(key: InjectionKey<T> | string, vm?: ComponentInternalInstance): T | undefined
+export function injectSelf (key: InjectionKey<any> | string, vm = getCurrentInstance('injectSelf')) {
+  const { provides } = vm
 
   if (provides && (key as string | symbol) in provides) {
     // TS doesn't allow symbol as index type