diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 33be522b..e1a17837 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -28,6 +28,7 @@ export default { invalidThemeImported: false, keepShadows: false, + keepOpacity: false, keepRoundness: false, textColorLocal: '', @@ -386,6 +387,14 @@ export default { }) }, + clearOpacity () { + Object.keys(this.$data) + .filter(_ => _.endsWith('OpacityLocal')) + .forEach(key => { + set(this.$data, key, undefined) + }) + }, + clearShadows () { this.shadowsLocal = {} console.log(this.shadowsLocal) @@ -397,9 +406,10 @@ export default { * @param {Number} version - version of data. 0 means try to guess based on data. */ normalizeLocalState (input, version = 0) { + console.log(input.opacity) const colors = input.colors || input const radii = input.radii || input - const opacity = input.opacity || input + const opacity = input.opacity const shadows = input.shadows || {} if (version === 0) { @@ -451,10 +461,13 @@ export default { this.shadowSelected = this.shadowsAvailable[0] } - Object.entries(opacity).forEach(([k, v]) => { - if (typeof v === 'undefined' || v === null || Number.isNaN(v)) return - this[k + 'OpacityLocal'] = v - }) + if (opacity && !this.keepOpacity) { + this.clearOpacity() + Object.entries(opacity).forEach(([k, v]) => { + if (typeof v === 'undefined' || v === null || Number.isNaN(v)) return + this[k + 'OpacityLocal'] = v + }) + } } }, watch: { @@ -468,6 +481,10 @@ export default { this.clearShadows() } + if (!this.keepOpacity) { + this.clearOpacity() + } + this.clearV1() this.bgColorLocal = this.selected[1] diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 0c6b811d..ed0dd733 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -32,6 +32,13 @@ v-model="keepShadows"> + + + + { } const getCssShadow = (input) => { - // >shad + if (input.length === 0) { + return 'none' + } + return input.map((shad) => [ shad.x, shad.y, @@ -340,9 +343,10 @@ const generateShadows = (input) => { ...(input.shadows || {}) } + console.log(Object.entries(shadows).map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}`).join(';')) return { rules: { - shadows: Object.entries(shadows).filter(([k, v]) => v).map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}`).join(';') + shadows: Object.entries(shadows).map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}`).join(';') }, theme: { shadows