Fix/color config (#3446)

* fix(docs): fix theme switch re-render

* docs(config): update colors example

* fix(docs): hide colors VaConfig demo

packages/docs/components/layout/Sidebar.vue

@@ -168,6 +168,8 @@ export default defineComponent({
 @import "@/assets/smart-grid.scss";
 
 .sidebar {
+  --va-sidebar-transition: none;
+
   &__collapse-custom-header {
     position: relative;
     padding: 1rem 1.2rem;

packages/docs/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="docs-layout" :key="currentPresetName + isMounted">
+  <div class="docs-layout" :key="isMounted + ''">
     <div v-if="!isMounted" class="docs-layout__loader" />
     <div
       ref="header"

packages/docs/page-config/ui-elements/config/examples/Colors.vue

@@ -0,0 +1,21 @@
+<template>
+  <VaConfig :colors="{ variables: { primary: color }, currentPresetName: presetName }">
+    <VaCard>
+      <VaCardContent class="flex flex-col gap-2">
+        <VaColorInput v-model="color" />
+        <VaButton @click="presetName === 'light' ? presetName = 'dark' : presetName = 'light'">Toggle theme</VaButton>
+        <VaInput label="login" />
+        <VaInput label="password" type="password" />
+        <div class="flex gap-2">
+          <VaButton>login</VaButton>
+          <VaButton color="secondary">register</VaButton>
+        </div>        
+      </VaCardContent>
+    </VaCard>
+  </VaConfig>
+</template>
+
+<script setup lang="ts">
+  const color = ref('#f0f')
+  const presetName = ref('light')
+</script>

packages/docs/page-config/ui-elements/config/examples/Components.vue

@@ -0,0 +1,41 @@
+<template>
+  <va-button-toggle
+    v-model="config"
+    :options="[
+      {
+        label: 'Outline',
+        value: {
+          VaInput: { outline: true },
+          VaSelect: { outline: true },
+          VaButton: { preset: 'secondary' },
+        },
+      },
+      {
+        label: 'Solid',
+        value: {
+          VaInput: { bordered: true },
+          VaSelect: { bordred: true },
+        },
+      },
+    ]"
+    class="mb-4"
+  />
+
+  <va-config :components="config">
+    <va-card>
+      <va-card-title>My Card</va-card-title>
+      <va-card-content class="flex gap-2 flex-col">
+        <va-input label="Login" />
+        <va-input label="Password" />
+        <va-select :options="['one', 'two', 'three']" label="Country" />
+      </va-card-content>
+      <va-card-actions align="right">
+        <va-button>My Button</va-button>
+      </va-card-actions>
+    </va-card>
+  </va-config>
+</template>
+
+<script setup lang="ts">
+const config = ref();
+</script>

packages/docs/page-config/ui-elements/config/examples/Internalization.vue

@@ -0,0 +1,8 @@
+<template>
+  <VaConfig :i18n="{
+    dropzone: 'Перетягніть файли сюди або натисніть, щоб вибрати',
+    uploadFile: 'Завантажити',
+  }">
+      <VaFileUpload dropzone />
+  </VaConfig>
+</template>

packages/docs/page-config/ui-elements/config/index.ts

@@ -8,7 +8,12 @@ export default definePageConfig({
 
     block.subtitle("all.examples"),
 
-    block.example("Default"),
+    block.example("Components"),
+    block.link('config.examples.components.see', '/services/components-config'),
+    // block.example("Colors"),
+    // block.link('config.examples.colors.see', '/services/colors-config'),
+    block.example("Internalization"),
+    block.link('config.examples.internalization.see', '/services/i18n'),
 
     block.subtitle("all.api"),
     block.api("VaConfig", apiOptions),

packages/docs/page-config/ui-elements/config/translation/en.json

@@ -3,9 +3,20 @@
   "description": "`VaConfig` is a utility component that allows you to configure components (provide specific default prop values to components) locally in a section of your application. This is useful when you have a local scope where your components have props other than global ones.",
   "link": "Find out more about components config",
   "examples": {
-    "default": {
-      "title": "Default usage",
-      "text": "By default, `VaConfig` does nothing. You must provide the `components` prop with the `vuestic` components configuration."
+    "components": {
+      "title": "Components",
+      "text": "By default, `VaConfig` does nothing. You must provide the `components` prop with the `vuestic` components configuration.",
+      "see": "Learn more about Components Config"
+    },
+    "colors": {
+      "title": "Colors",
+      "text": "You can configure colors for components. For example, you can change color whole preset name.",
+      "see": "Learn more about Colors Config"
+    },
+    "internalization": {
+      "title": "i18n",
+      "text": "You can configure i18n translations for components.",
+      "see": "Learn more about i18n Config"
     }
   }
 }

packages/ui/src/components/va-button-toggle/types.ts

@@ -1,5 +1,7 @@
 export type ButtonOption = {
   icon?: string,
   iconRight?: string
-  [prop: string]: string | number | boolean | undefined
+  label?: string,
+  value?: unknown,
+  [prop: string]: any
 }

packages/ui/src/components/va-color-input/VaColorInput.vue

@@ -90,7 +90,6 @@ export default defineComponent({
 
   &__input {
     margin-bottom: 0;
-    margin-left: 0.25rem;
     min-width: 5.6rem;
 
     &__pointer {

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

@@ -1,7 +1,8 @@
 <template>
-  <CssVarsRenderer v-bind="$attrs">
+  <CssVarsRenderer v-if="doRenderCssVars" v-bind="$attrs">
     <slot />
   </CssVarsRenderer>
+  <slot v-else />
 </template>
 
 <script lang="ts">
@@ -39,8 +40,8 @@ export default defineComponent({
   props: {
     ...useComponentPresetProp,
     components: { type: Object as PropType<ComponentConfig>, default: () => ({}) },
-    colors: { type: Object as PropType<PartialGlobalConfig['colors']>, default: () => ({}) },
-    i18n: { type: Object as PropType<PartialGlobalConfig['i18n']>, default: () => ({}) },
+    colors: { type: Object as PropType<PartialGlobalConfig['colors']> },
+    i18n: { type: Object as PropType<PartialGlobalConfig['i18n']> },
   },
   inheritAttrs: false,
   setup (props) {
@@ -51,14 +52,26 @@ export default defineComponent({
     provideLocalConfig(nextChain)
 
     const newConfig = useGlobalConfigProvider(computed(() => {
-      return {
-        colors: props.colors,
-        i18n: props.i18n,
+      const config = {} as any
+
+      if (props.colors) {
+        config.colors = props.colors
+      }
+
+      if (props.i18n) {
+        config.i18n = props.i18n
       }
+
+      return config
     }))
 
+    const doRenderCssVars = computed(() => {
+      return Boolean(props.colors)
+    })
+
     return {
       newConfig,
+      doRenderCssVars,
     }
   },
 })

packages/ui/src/components/va-config/hooks/useGlobalConfigProvider.ts

@@ -15,7 +15,16 @@ export const useGlobalConfigProvider = (next: Ref<PartialGlobalConfig>) => {
       colors: makeColorsConfig(gcCopy.colors),
     }
 
-    return mergeDeep(compiledCopy, next.value) as GlobalConfig
+    const config = mergeDeep(compiledCopy, next.value) as GlobalConfig
+
+    // Variables is a virtual property, so we need to merge it manually after preset in chosen!
+    if (next.value.colors?.variables) {
+      Object.keys(next.value.colors.variables).forEach((key) => {
+        config.colors.variables[key] = next.value.colors!.variables![key]!
+      })
+    }
+
+    return config
   })
 
   provide(GLOBAL_CONFIG, {

packages/ui/src/services/color/config/make-config.ts

@@ -1,11 +1,11 @@
 import { ColorConfig } from '../types'
 
 export const makeColorsConfig = (values: Omit<ColorConfig, 'variables'>): ColorConfig => ({
+  ...values,
   get variables () {
     return this.presets[this.currentPresetName]
   },
   set variables (value) {
     this.presets[this.currentPresetName] = value
   },
-  ...values,
 })