feat: add VDefaultsProvider component (#13743)

packages/api-generator/src/locale/en/v-defaults-provider.json

@@ -0,0 +1,5 @@
+{
+  "props": {
+    "defaults": "Specify new default prop values for components. Keep in mind that this will be merged with previously defined values"
+  }
+}

packages/api-generator/src/maps/components/v-defaults-provider.js

@@ -0,0 +1,10 @@
+module.exports = {
+  'v-defaults-provider': {
+    props: [
+      {
+        name: 'defaults',
+        type: 'object',
+      },
+    ],
+  },
+}

packages/docs/src/data/nav-alpha.json

@@ -48,6 +48,7 @@
       "banners",
       "buttons",
       "cards",
+      "defaults-providers",
       "dialogs",
       "dividers",
       "floating-action-buttons",

packages/docs/src/examples/v-defaults-provider/prop-defaults.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <v-card title="Title" subtitle="Subtitle" class="ma-10"></v-card>
+    <v-defaults-provider :defaults="defaults">
+      <v-card title="Title" subtitle="Subtitle" class="ma-10"></v-card>
+    </v-defaults-provider>
+  </div>
+</template>
+
+<script>
+  export default {
+    data: () => ({
+      defaults: {
+        global: {
+          elevation: 10,
+        },
+        VCard: {
+          color: 'secondary',
+        },
+      },
+    })
+  }
+</script>

packages/docs/src/pages/en/components/defaults-providers.md

@@ -0,0 +1,24 @@
+---
+meta:
+  title: Defaults provider component
+  description: The defaults provider allows you to provide specific default prop values to components in a section of your application
+  keywords: defaults provider, vuetify defaults provider component, vue defaults provider component
+related:
+  - /features/global-config/
+---
+
+# Defaults providers
+
+The defaults provider allows you to provide specific default prop values to components in a section of your application
+
+## API
+
+- [v-defaults-provider](/api/v-defaults-provider)
+
+## Examples
+
+### Defaults
+
+The `v-defaults-provider` expects a prop **defaults** which looks the same as the **defaults** object that you can pass to `createVuetify` when creating your application.
+
+<example file="v-defaults-provider/prop-defaults" />

packages/docs/src/pages/en/components/theme-providers.md

@@ -21,4 +21,4 @@ The theme provider allows you to style a section of your application in a differ
 
 By default, `v-theme-provider` is a renderless component that allows you to change the applied theme for all of its children. When using the **with-background** prop, the `v-theme-provider` wraps its children in an element and applies the selected theme's background color to it.
 
-<example file="v-theme-provider/prop-with-background">
+<example file="v-theme-provider/prop-with-background" />

packages/vuetify/src/components/VDefaultsProvider/VDefaultsProvider.tsx

@@ -0,0 +1,17 @@
+import { provideDefaults } from '@/composables/defaults'
+import { defineComponent } from 'vue'
+
+import type { PropType } from 'vue'
+import type { DefaultsOptions } from '@/composables/defaults'
+
+export default defineComponent({
+  props: {
+    defaults: Object as PropType<DefaultsOptions>,
+  },
+
+  setup (props, { slots }) {
+    provideDefaults(props)
+
+    return () => slots.default?.()
+  },
+})

packages/vuetify/src/components/VDefaultsProvider/__tests__/VDefaultsProvider.cy.spec.tsx

@@ -0,0 +1,17 @@
+/// <reference types="../../../../types/cypress" />
+
+import { CenteredGrid } from '@/../cypress/templates'
+import { VCard } from '@/components'
+import VDefaultsProvider from '../VDefaultsProvider'
+
+describe('VDefaultsProvider', () => {
+  it('should apply new defaults', () => {
+    cy.mount(() => (
+      <CenteredGrid width="200px">
+        <VDefaultsProvider defaults={{ global: { elevation: 10 }, VCard: { color: 'primary' } }}>
+          <VCard title="foo" subtitle="bar"></VCard>
+        </VDefaultsProvider>
+      </CenteredGrid>
+    )).get('.v-card').should('have.class', 'elevation-10').should('have.class', 'bg-primary')
+  })
+})

packages/vuetify/src/components/VDefaultsProvider/index.ts

@@ -0,0 +1 @@
+export { default as VDefaultsProvider } from './VDefaultsProvider'

packages/vuetify/src/components/index.ts

@@ -26,6 +26,7 @@ export * from './VCode'
 // export * from './VDataIterator'
 // export * from './VDataTable'
 // export * from './VDatePicker'
+export * from './VDefaultsProvider'
 export * from './VDialog'
 export * from './VDivider'
 // export * from './VExpansionPanel'

packages/vuetify/src/composables/defaults.ts

@@ -0,0 +1,35 @@
+import { computed, inject, provide, ref } from 'vue'
+import { mergeDeep } from '@/util'
+
+import type { InjectionKey, Ref } from 'vue'
+
+interface DefaultsInstance {
+  [key: string]: undefined | Record<string, unknown>
+  global?: Record<string, unknown>
+}
+
+export type DefaultsOptions = Partial<DefaultsInstance>
+
+export const VuetifyDefaultsSymbol: InjectionKey<Ref<DefaultsInstance>> = Symbol.for('vuetify:defaults')
+
+export function createDefaults (options?: DefaultsInstance): Ref<DefaultsInstance> {
+  return ref(options ?? {})
+}
+
+export function useDefaults () {
+  const defaults = inject(VuetifyDefaultsSymbol)
+
+  if (!defaults) throw new Error('[Vuetify] Could not find defaults instance')
+
+  return defaults
+}
+
+export function provideDefaults (props?: { defaults?: DefaultsInstance }) {
+  const defaults = useDefaults()
+
+  const newDefaults = computed(() => mergeDeep(defaults.value, props?.defaults) as any as DefaultsInstance)
+
+  provide(VuetifyDefaultsSymbol, newDefaults)
+
+  return newDefaults
+}

packages/vuetify/src/framework.ts

@@ -1,33 +1,31 @@
-import { inject } from 'vue'
-import { createDisplay, VuetifyDisplaySymbol } from './composables/display'
-import { createTheme, VuetifyThemeSymbol } from './composables/theme'
+// Composables
+import { createDisplay, VuetifyDisplaySymbol } from '@/composables/display'
+import { createTheme, VuetifyThemeSymbol } from '@/composables/theme'
 import { defaultSets, VuetifyIconSymbol } from '@/composables/icons'
+import { createDefaults, VuetifyDefaultsSymbol } from '@/composables/defaults'
 import { createLocaleAdapter, VuetifyLocaleAdapterSymbol } from '@/composables/locale'
 import { createRtl, VuetifyRtlSymbol } from '@/composables/rtl'
-import { mergeDeep } from '@/util'
 import { aliases, mdi } from '@/iconsets/mdi'
 
+// Utilities
+import { inject } from 'vue'
+import { mergeDeep } from '@/util'
+
 // Types
 import type { App, InjectionKey } from 'vue'
 import type { DisplayOptions } from '@/composables/display'
 import type { ThemeOptions } from '@/composables/theme'
 import type { IconOptions } from '@/composables/icons'
 import type { LocaleAdapter, LocaleOptions } from '@/composables/locale'
 import type { RtlOptions } from '@/composables/rtl'
+import type { DefaultsOptions } from '@/composables/defaults'
 
-export interface VuetifyComponentDefaults {
-  [key: string]: undefined | Record<string, unknown>
-  global: Record<string, unknown>
-}
-
-export interface VuetifyInstance {
-  defaults: VuetifyComponentDefaults
-}
+export interface VuetifyInstance {}
 
 export interface VuetifyOptions {
   components?: Record<string, any>
   directives?: Record<string, any>
-  defaults?: Partial<VuetifyComponentDefaults>
+  defaults?: DefaultsOptions
   display?: DisplayOptions
   theme?: ThemeOptions
   icons?: IconOptions
@@ -51,7 +49,6 @@ export const createVuetify = (options: VuetifyOptions = {}) => {
     const {
       components = {},
       directives = {},
-      defaults = {},
       icons = {},
     } = options
 
@@ -67,14 +64,10 @@ export const createVuetify = (options: VuetifyOptions = {}) => {
       app.component(key, component)
     }
 
-    const vuetify: VuetifyInstance = {
-      defaults: {
-        global: {},
-        ...defaults,
-      },
-    }
+    const vuetify = {}
 
     app.provide(VuetifySymbol, vuetify)
+    app.provide(VuetifyDefaultsSymbol, createDefaults(options.defaults))
     app.provide(VuetifyDisplaySymbol, createDisplay(options.display))
     app.provide(VuetifyThemeSymbol, createTheme(options.theme))
     app.provide(VuetifyIconSymbol, mergeDeep({

packages/vuetify/src/util/makeProps.ts

@@ -1,8 +1,10 @@
+// Composables
+import { useDefaults } from '@/composables/defaults'
+
 // Utilities
 import { getCurrentInstance } from 'vue'
 import { wrapInArray } from './helpers'
 import { consoleWarn } from './console'
-import { useVuetify } from '@/framework'
 
 // Types
 import type { Prop } from 'vue'
@@ -46,9 +48,9 @@ function generateDefault (propName: string, localDefault: any, type: any) {
       return localDefault
     }
 
-    const vuetify = useVuetify()
-    const globalDefault = vuetify.defaults.global[propName]
-    const componentDefault = vuetify.defaults[vm.type.name]?.[propName]
+    const defaults = useDefaults()
+    const globalDefault = defaults.value.global?.[propName]
+    const componentDefault = defaults.value[vm.type.name]?.[propName]
     const actualDefault = typeof componentDefault !== 'undefined'
       ? componentDefault
       : typeof globalDefault !== 'undefined'