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