diff --git a/client/src/ui/components/bd/setting/Colour.vue b/client/src/ui/components/bd/setting/Colour.vue index 7a7c5abd..65b2a4bc 100644 --- a/client/src/ui/components/bd/setting/Colour.vue +++ b/client/src/ui/components/bd/setting/Colour.vue @@ -13,7 +13,7 @@

{{setting.text}}

-
@@ -25,14 +25,14 @@ export default { data() { return { - colors: '#3e82e5', - open: false + open: false, + colors: '#FFF' } }, components: { Picker }, - props: ['setting'], + props: ['setting', 'change'], computed: { hex() { if (!this.$refs.picker || !this.$refs.picker.val) return this.colors; @@ -51,14 +51,24 @@ return this.$refs.picker.val.hsl; }, rgbaString() { - const rgba = this.rgba; - if (!rgba.r) return this.colors; - return `${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a}`; + if ('string' === typeof this.colors) return this.colors; + const { rgba } = this.colors; + return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`; } }, methods: { pick(c) { - + this.change(this.rgbaString); + } + }, + beforeMount() { + this.colors = this.setting.value; + }, + watch: { + setting(newVal, oldVal) { + if (newVal.value === oldVal.value) return; + this.colors = newVal.value; + this.open = false; } } } diff --git a/tests/themes/Example/config.json b/tests/themes/Example/config.json index f150ecc1..b9437612 100644 --- a/tests/themes/Example/config.json +++ b/tests/themes/Example/config.json @@ -15,10 +15,9 @@ { "id": "colourTest", "type": "colour", - "subtype": "hex", "value": "#3e82e5", "text": "Colour Picker Test", - "hint": "Colour Picker Test Hint" + "hint": "Colour Picker Test Hint" }, { "id": "divBg",