Fix #1967: move componentsAll and Presets to components

packages/docs/src/locales/en/en.json

@@ -3265,7 +3265,7 @@
     },
     "components": {
       "title": "Components config",
-      "intro": "If you want to set global defaults for Vuestic components — we've got a config for that either!",
+      "intro": "If you want to set global defaults for Vuestic components or create presets — we have config for this as well!",
       "description": "Let’s say you want all of your buttons to be `outline` and `small` to match your design, but by default that's not the case:",
       "action": "To solve that problem edit to `main.js` file the following way:",
       "result": "Now all of your buttons by default will look like this:",

packages/nuxt-docs/locales/en.json

@@ -3136,9 +3136,9 @@
     },
     "components": {
       "title": "Components config",
-      "intro": "If you want to set global defaults for Vuestic components — we've got a config for that either!",
+      "intro": "If you want to set global defaults for Vuestic components or create presets — we have config for this as well!",
       "description": "Let’s say you want all of your buttons to be `outline` and `small` to match your design, but by default that's not the case:",
-      "action": "To solve that problem edit to `main.js` file the following way:",
+      "action": "To solve that problem edit `main.js` file the following way:",
       "result": "Now all of your buttons by default will look like this:",
       "example": "You can configure any prop for any Vuestic UI component in such a manner.",
       "more": "In case your customization runs deeper consider [overriding CSS variables](/styles/css-variables#overriding) or even directly the `.class`' properties (components use BEM-notation so it should be easy to figure out which selector to address with the help of standard dev-tooling)."
@@ -3797,4 +3797,4 @@
       }
     }
   }
-}
+}

packages/ui/src/components/va-config/VaConfig.demo.vue

@@ -27,7 +27,7 @@
       </va-button>
     </VbCard>
 
-    <VbCard title="Global config -> componentsAll">
+    <VbCard title="Global config -> components -> all">
       <div class="center">
         <va-button @click="setComponentsAllColor()">Should set dark red color on click</va-button>
         <va-rating icon="heart" empty-icon="heart_empty" stateful></va-rating>
@@ -43,9 +43,9 @@
         <hr />
         <pre>{{ getGlobalConfig().components }}</pre>
 
-        <p class="mt-2">Current ComponentsAll:</p>
+        <p class="mt-2">Current components.all:</p>
         <hr />
-        <pre>{{ getGlobalConfig().componentsAll }}</pre>
+        <pre>{{ getGlobalConfig().components.all }}</pre>
       </div>
     </VbCard>
 
@@ -156,34 +156,25 @@ export default {
       },
     }
 
-    setGlobalConfig(config => ({
-      ...config,
+    mergeGlobalConfig({
       components: {
-        ...config.components,
         ConfigUsageTest: {
           color: getColor('#0000ff'),
         },
         VaBadge: {
-          ...config.components.VaBadge,
           color: 'info',
           label: 'default label',
         },
         VaButton: {
-          ...config.components.VaButton,
           size: 'small',
-          // icon: 'room',
           outline: true,
         },
-        VaIcon: {
-          ...config.components.VaIcon,
+        presets: {
+          VaCard: cardPreset,
+          VaButton: buttonPreset,
         },
       },
-      componentsPresets: {
-        ...config.componentsPresets,
-        VaCard: cardPreset,
-        VaButton: buttonPreset,
-      },
-    }))
+    })
 
     const buttonRoundConfigValue = computed(() => {
       const globalConfig = getGlobalConfig()
@@ -211,7 +202,7 @@ export default {
       },
     },
     getComponentsPresets () {
-      return this.getGlobalConfig().componentsPresets
+      return this.getGlobalConfig().components.presets
     },
     showButtonPreset () {
       return this.getComponentsPresets?.VaButton?.[this.buttonPresetName] || 'No preset currently'
@@ -241,15 +232,15 @@ export default {
     },
     setComponentsAllColor () {
       this.mergeGlobalConfig({
-        componentsAll: {
-          color: '#bd1313',
+        components: {
+          all: { color: '#bd1313' },
         },
       })
     },
     resetComponentsAllColor () {
-      this.setGlobalConfig({
-        ...this.getGlobalConfig(),
-        componentsAll: {},
+      this.setGlobalConfig((config) => {
+        config.components.all = {}
+        return config
       })
     },
     toggleButtonPreset () {
@@ -266,9 +257,9 @@ export default {
         ? {}
         : { VaButton: this.buttonPreset, VaCard: this.cardPreset }
 
-      this.setGlobalConfig({
-        ...this.getGlobalConfig(),
-        ...{ componentsPresets: presetsConfig },
+      this.setGlobalConfig((config) => {
+        config.components.presets = presetsConfig
+        return config
       })
 
       this.hasPresetsInConfig = !this.hasPresetsInConfig

packages/ui/src/services/component-config/component-config.ts

@@ -3,24 +3,24 @@ import { useGlobalConfig } from '../global-config/global-config'
 import { ComponentInternalInstance, computed, DefineComponent } from 'vue'
 
 export type Props = { [propName: string]: any }
-export type ComponentConfig = { [componentName: string]: Props }
-export type ComponentPreset = { [componentName: string]: { [presetName: string]: Props } }
+export type Presets = { [componentName: string]: { [presetName: string]: Props } }
+export type ComponentConfig = { [componentOrConfigName: string]: Props | Presets }
 
 export const useComponentConfigProps = <T extends DefineComponent>(component: T, instance: ComponentInternalInstance) => {
   const localConfig = useLocalConfig()
   const { globalConfig } = useGlobalConfig()
 
   return computed(() => {
-    const globalConfigProps = {
-      ...globalConfig.value.componentsAll,
+    const globalConfigProps: Props = {
+      ...globalConfig.value.components?.all,
       ...globalConfig.value.components?.[component.name],
     }
 
     const localConfigProps = localConfig.value
       .reduce((finalConfig, config) => config[component.name] ? { ...finalConfig, ...config[component.name] } : finalConfig, {})
 
     const presetName = instance.props?.preset || localConfigProps.preset || globalConfigProps.preset
-    const getPresetProps = () => globalConfig.value.componentsPresets?.[component.name]?.[presetName]
+    const getPresetProps = () => globalConfig.value.components?.presets?.[component.name]?.[presetName]
 
     const presetProps = presetName && getPresetProps()
 

packages/ui/src/services/config-transport/withConfigTransport.ts

@@ -20,6 +20,7 @@ export const withConfigTransport = <T>(component: T): WithConfigTransport<T> =>
   } else {
     // Options api. We need to transform it to Composition API and then create proxy.
     (component as any).setup = () => ({ /* Fake setup function */})
+    // TODO: remove this? no point if this will not work anyway
     return createProxyComponent(component as any)
   }
 }

packages/ui/src/services/global-config/config-default/index.ts

@@ -1,4 +1,4 @@
-import { ComponentConfig, Props } from '../../component-config/component-config'
+import { ComponentConfig } from '../../component-config/component-config'
 
 export const getComponentsDefaultConfig = (): ComponentConfig =>
   // TODO: Should be handled in size service
@@ -23,6 +23,6 @@ export const getComponentsDefaultConfig = (): ComponentConfig =>
         },
       },
     },
+    all: {},
+    presets: {},
   })
-
-export const getComponentsAllDefaultConfig = (): Props => ({})

packages/ui/src/services/global-config/global-config.ts

@@ -2,7 +2,7 @@ import merge from 'lodash/merge.js'
 import cloneDeep from 'lodash/cloneDeep.js'
 import { ref, inject, Ref } from 'vue'
 import { GlobalConfig, GlobalConfigUpdater } from './types'
-import { getComponentsAllDefaultConfig, getComponentsDefaultConfig } from './config-default'
+import { getComponentsDefaultConfig } from './config-default'
 import { createIconsConfig } from '../icon-config/icon-config-helpers'
 import { colorsPresets } from '../color-config/color-theme-presets'
 
@@ -24,8 +24,6 @@ export const createGlobalConfig = () => {
     colors: colorsPresets.default,
     icons: createIconsConfig({}),
     components: getComponentsDefaultConfig(),
-    componentsAll: getComponentsAllDefaultConfig(),
-    componentsPresets: {},
   })
 
   const getGlobalConfig = (): GlobalConfig => globalConfig.value

packages/ui/src/services/global-config/plugin/index.ts

@@ -10,6 +10,13 @@ export const GlobalConfigPlugin = defineVuesticPlugin((config: GlobalConfig | un
 
     if (config) { globalConfig.mergeGlobalConfig(config) }
 
+    // @ts-ignore
+    if (config?.componentsAll) {
+      console.warn('Global config -> `componentsAll` was moved to Global config -> components.all. ' +
+        'Please replace this to make it work. ' +
+        'More info here: https://github.com/epicmaxco/vuestic-ui/issues/1967')
+    }
+
     app.provide(GLOBAL_CONFIG, globalConfig)
 
     defineGlobalProperty(app, '$vaConfig', globalConfig)

packages/ui/src/services/global-config/types.ts

@@ -1,13 +1,11 @@
 import type { ColorConfig } from '../color-config/color-config'
-import type { ComponentConfig, ComponentPreset, Props } from '../component-config/component-config'
+import type { ComponentConfig } from '../component-config/component-config'
 import type { IconConfig } from '../icon-config/types'
 
 export type GlobalConfig = {
   colors?: ColorConfig,
   icons?: IconConfig,
   components?: ComponentConfig
-  componentsAll?: Props
-  componentsPresets?: ComponentPreset,
 }
 
 export type SizeConfig = {