diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js index b4f48668..a1484d09 100644 --- a/src/components/shadow_control/shadow_control.js +++ b/src/components/shadow_control/shadow_control.js @@ -4,13 +4,17 @@ import { getCssShadow } from '../../services/style_setter/style_setter.js' import { hex2rgb } from '../../services/color_convert/color_convert.js' export default { + // 'Value' and 'Fallback' can be undefined, but if they are + // initially vue won't detect it when they become something else + // therefore i'm using "ready" which should be passed as true when + // data becomes available props: [ - 'value', 'fallback' + 'value', 'fallback', 'ready' ], data () { return { selectedId: 0, - cValue: this.value || this.fallback + cValue: this.value || this.fallback || [] } }, components: { @@ -42,27 +46,28 @@ export default { }, computed: { selected () { - return this.isReady && this.cValue[this.selectedId] || { - x: 0, - y: 0, - blur: 0, - spread: 0, - inset: false, - color: '#000000', - alpha: 1 + if (this.ready && this.cValue.length > 0) { + return this.cValue[this.selectedId] + } else { + return { + x: 0, + y: 0, + blur: 0, + spread: 0, + inset: false, + color: '#000000', + alpha: 1 + } } }, moveUpValid () { - return this.isReady && this.selectedId > 0 + return this.ready && this.selectedId > 0 }, moveDnValid () { - return this.isReady && this.selectedId < this.cValue.length - 1 - }, - isReady () { - return typeof this.cValue !== 'undefined' + return this.ready && this.selectedId < this.cValue.length - 1 }, present () { - return this.isReady && + return this.ready && typeof this.cValue[this.selectedId] !== 'undefined' && !this.usingFallback }, @@ -73,7 +78,7 @@ export default { return hex2rgb(this.selected.color) }, style () { - return this.isReady ? { + return this.ready ? { boxShadow: getCssShadow(this.cValue) } : {} } diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index c39aa95b..2af77a85 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -182,7 +182,6 @@ export default { }, previewTheme () { if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {} } - console.log(this.preview.theme.radii) return this.preview.theme }, // This needs optimization maybe @@ -382,8 +381,6 @@ export default { normalizeLocalState (input, version = 0) { const colors = input.colors || input const radii = input.radii || input - console.log('Benis') - console.log(JSON.stringify(radii, null, 2)) const opacity = input.opacity || input const shadows = input.shadows || {} diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 4ed62242..658bb288 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -170,7 +170,7 @@ - + diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 20f54a84..4a48f419 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -107,7 +107,6 @@ const getCssShadow = (input) => { } const getCssColor = (input, a) => { - console.log(input) let rgb = {} if (typeof input === 'object') { rgb = input @@ -120,7 +119,6 @@ const getCssColor = (input, a) => { return input } } - console.log(rgb2rgba({ ...rgb, a })) return rgb2rgba({ ...rgb, a }) }