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,
 })