diff --git a/packages/ui/src/components/va-config/VaConfig.demo.vue b/packages/ui/src/components/va-config/VaConfig.demo.vue index dabf18a60d..8ef9b80aae 100644 --- a/packages/ui/src/components/va-config/VaConfig.demo.vue +++ b/packages/ui/src/components/va-config/VaConfig.demo.vue @@ -82,6 +82,14 @@
CSS variables
+ + + + + + @@ -94,6 +102,7 @@ import { VaRating } from '../va-rating/' import { VaChip } from '../va-chip' import { VaConfig } from './' import { VaColorInput } from '../va-color-input/' +import { VaFileUpload } from '../va-file-upload' export default { components: { @@ -102,6 +111,7 @@ export default { VaConfig, VaChip, VaColorInput, + VaFileUpload, }, data () { return { diff --git a/packages/ui/src/components/va-config/VaConfig.vue b/packages/ui/src/components/va-config/VaConfig.vue index e5df4f4839..f949d1543e 100644 --- a/packages/ui/src/components/va-config/VaConfig.vue +++ b/packages/ui/src/components/va-config/VaConfig.vue @@ -40,6 +40,7 @@ export default defineComponent({ ...useComponentPresetProp, components: { type: Object as PropType, default: () => ({}) }, colors: { type: Object as PropType, default: () => ({}) }, + i18n: { type: Object as PropType, default: () => ({}) }, }, inheritAttrs: false, setup (props) { @@ -52,6 +53,7 @@ export default defineComponent({ const newConfig = useGlobalConfigProvider(computed(() => { return { colors: props.colors, + i18n: props.i18n, } })) diff --git a/packages/ui/src/components/va-config/hooks/useGlobalConfigProvider.ts b/packages/ui/src/components/va-config/hooks/useGlobalConfigProvider.ts index ca6f2c38c7..1e57284188 100644 --- a/packages/ui/src/components/va-config/hooks/useGlobalConfigProvider.ts +++ b/packages/ui/src/components/va-config/hooks/useGlobalConfigProvider.ts @@ -3,41 +3,25 @@ import cloneDeep from 'lodash/cloneDeep' import { provide, computed, Ref } from 'vue' import { useGlobalConfig } from '../../../composables' import { GLOBAL_CONFIG, GlobalConfig, GlobalConfigUpdater, PartialGlobalConfig } from '../../../services/global-config' +import { makeColorsConfig } from '../../../services/color/config/make-config' export const useGlobalConfigProvider = (next: Ref) => { - const { globalConfig } = useGlobalConfig() + const { globalConfig, mergeGlobalConfig, setGlobalConfig, getGlobalConfig } = useGlobalConfig() const nextChain = computed(() => { const gcCopy = cloneDeep(globalConfig.value) const compiledCopy: GlobalConfig = { ...gcCopy, - colors: { - ...gcCopy.colors, - get variables () { - return this.presets[this.currentPresetName] - }, - set variables (value) { - this.presets[this.currentPresetName] = value - }, - }, + colors: makeColorsConfig(gcCopy.colors), } return mergeDeep(compiledCopy, next.value) as GlobalConfig }) - const getGlobalConfig = (): GlobalConfig => nextChain.value - const setGlobalConfig = (updater: GlobalConfig | GlobalConfigUpdater) => { - throw new Error('setGlobalConfig can not be used in VaConfig') - } - - const mergeGlobalConfig = (updater: PartialGlobalConfig | GlobalConfigUpdater) => { - throw new Error('mergeGlobalConfig can not be used in VaConfig') - } - provide(GLOBAL_CONFIG, { - getGlobalConfig, - setGlobalConfig, mergeGlobalConfig, + setGlobalConfig, + getGlobalConfig, globalConfig: nextChain, }) diff --git a/packages/ui/src/services/color/config/default.ts b/packages/ui/src/services/color/config/default.ts index 3666e41a73..4b3cea368f 100644 --- a/packages/ui/src/services/color/config/default.ts +++ b/packages/ui/src/services/color/config/default.ts @@ -1,13 +1,8 @@ import type { ColorConfig } from '../types' import { presets } from '../presets' +import { makeColorsConfig } from './make-config' -export const getColorDefaultConfig = (): ColorConfig => ({ - get variables () { - return this.presets[this.currentPresetName] - }, - set variables (value) { - this.presets[this.currentPresetName] = value - }, +export const getColorDefaultConfig = (): ColorConfig => makeColorsConfig({ threshold: 150, presets: { light: presets.light, diff --git a/packages/ui/src/services/color/config/make-config.ts b/packages/ui/src/services/color/config/make-config.ts new file mode 100644 index 0000000000..39bb2c66d3 --- /dev/null +++ b/packages/ui/src/services/color/config/make-config.ts @@ -0,0 +1,11 @@ +import { ColorConfig } from '../types' + +export const makeColorsConfig = (values: Omit): ColorConfig => ({ + get variables () { + return this.presets[this.currentPresetName] + }, + set variables (value) { + this.presets[this.currentPresetName] = value + }, + ...values, +})