diff --git a/packages/docs/layouts/landing.vue b/packages/docs/layouts/landing.vue
index 296033067e..cb2e8807e9 100644
--- a/packages/docs/layouts/landing.vue
+++ b/packages/docs/layouts/landing.vue
@@ -1,13 +1,14 @@
-
+
+
+
+
+
-
diff --git a/packages/ui/src/components/va-config/VaConfig.demo.vue b/packages/ui/src/components/va-config/VaConfig.demo.vue
index 3d20e7e2ae..8ef9b80aae 100644
--- a/packages/ui/src/components/va-config/VaConfig.demo.vue
+++ b/packages/ui/src/components/va-config/VaConfig.demo.vue
@@ -70,6 +70,26 @@
+
+
+
+
+ Button inside va-config
+
+
+ CSS variables
+
+
+
+
+
+
+
+
@@ -82,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: {
@@ -90,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 e66fc5e63c..f949d1543e 100644
--- a/packages/ui/src/components/va-config/VaConfig.vue
+++ b/packages/ui/src/components/va-config/VaConfig.vue
@@ -1,20 +1,48 @@
-
+
+
+
diff --git a/packages/ui/src/components/va-config/hooks/useGlobalConfigProvider.ts b/packages/ui/src/components/va-config/hooks/useGlobalConfigProvider.ts
new file mode 100644
index 0000000000..1e57284188
--- /dev/null
+++ b/packages/ui/src/components/va-config/hooks/useGlobalConfigProvider.ts
@@ -0,0 +1,29 @@
+import { mergeDeep } from './../../../utils/merge-deep'
+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, mergeGlobalConfig, setGlobalConfig, getGlobalConfig } = useGlobalConfig()
+
+ const nextChain = computed(() => {
+ const gcCopy = cloneDeep(globalConfig.value)
+ const compiledCopy: GlobalConfig = {
+ ...gcCopy,
+ colors: makeColorsConfig(gcCopy.colors),
+ }
+
+ return mergeDeep(compiledCopy, next.value) as GlobalConfig
+ })
+
+ provide(GLOBAL_CONFIG, {
+ mergeGlobalConfig,
+ setGlobalConfig,
+ getGlobalConfig,
+ globalConfig: nextChain,
+ })
+
+ return nextChain
+}
diff --git a/packages/ui/src/composables/useColors.ts b/packages/ui/src/composables/useColors.ts
index 89c1e58ea6..34fdac64cb 100644
--- a/packages/ui/src/composables/useColors.ts
+++ b/packages/ui/src/composables/useColors.ts
@@ -22,6 +22,7 @@ import {
normalizeColorName,
} from '../services/color/utils'
import { isDev } from '../utils/env'
+import kebabCase from 'lodash/kebabCase'
/**
* You can add these props to any component by destructuring them inside props option.
@@ -111,7 +112,8 @@ export const useColors = () => {
.keys(colors)
.filter((key) => colors[key] !== undefined)
.reduce((acc: Record, colorName: string) => {
- acc[`--${prefix}-${colorName}`] = getColor(colors[colorName], undefined, true)
+ acc[`--${prefix}-${kebabCase(colorName)}`] = getColor(colors[colorName], undefined, true)
+ acc[`--${prefix}-on-${kebabCase(colorName)}`] = getColor(getTextColor(getColor(colors[colorName]!)), undefined, true)
return acc
}, {})
}
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,
+})
diff --git a/packages/ui/src/services/color/tests/color-config.spec.ts b/packages/ui/src/services/color/tests/color-config.spec.ts
index 0a454c7834..5b84d2e3a0 100644
--- a/packages/ui/src/services/color/tests/color-config.spec.ts
+++ b/packages/ui/src/services/color/tests/color-config.spec.ts
@@ -44,10 +44,10 @@ describe('useColors', () => {
)
it.each([
- [[{ color: '#000000' }, 'va-test'], { '--va-test-color': '#000000' }],
- [[{ color: 'secondary' }, 'va-test'], { '--va-test-color': 'var(--va-secondary)' }],
- [[{ color: 'var(--va-primary)' }, 'va-test'], { '--va-test-color': 'var(--va-primary)' }], // TODO call Oleg
- [[{ color: 'bad-color' }, 'va-test'], { '--va-test-color': '#154EC1' }],
+ [[{ color: '#000000' }, 'va-test'], { '--va-test-color': '#000000', '--va-test-on-color': 'var(--va-text-inverted)' }],
+ [[{ color: 'secondary' }, 'va-test'], { '--va-test-color': 'var(--va-secondary)', '--va-test-on-color': 'var(--va-text-inverted)' }],
+ [[{ color: 'var(--va-primary)' }, 'va-test'], { '--va-test-color': 'var(--va-primary)', '--va-test-on-color': 'var(--va-text-inverted)' }],
+ [[{ color: 'bad-color' }, 'va-test'], { '--va-test-color': '#154EC1', '--va-test-on-color': 'var(--va-text-inverted)' }],
[[{}, 'va-test'], {}],
])(
'colorToCssVariableArgs %s should be %s',
diff --git a/packages/ui/src/utils/headless.ts b/packages/ui/src/utils/headless.ts
index 517713f15d..e9dad876ef 100644
--- a/packages/ui/src/utils/headless.ts
+++ b/packages/ui/src/utils/headless.ts
@@ -37,7 +37,7 @@ const toNode = (v: any, attrs: NodeAttributes): VNode | null => {
if (v.type === Fragment) {
if (v.children === null) { return v }
- return toNode(v.children[0], attrs)
+ return h(Fragment, v.props, v.children.map((v: any) => toNode(v, attrs)))
}
return h(v, attrs)
diff --git a/packages/ui/src/utils/merge-deep.ts b/packages/ui/src/utils/merge-deep.ts
index b2fbc00a76..6b5a56ebfc 100644
--- a/packages/ui/src/utils/merge-deep.ts
+++ b/packages/ui/src/utils/merge-deep.ts
@@ -14,7 +14,10 @@ export const mergeDeep = (target: any, source: any): any => {
const sourceValue = source[key]
if (isObject(targetValue) && isObject(sourceValue)) {
- target[key] = mergeDeep(Object.assign({}, targetValue), sourceValue)
+ target[key] = mergeDeep(Object.create(
+ Object.getPrototypeOf(targetValue),
+ Object.getOwnPropertyDescriptors(targetValue),
+ ), sourceValue)
} else {
target[key] = sourceValue
}