fix for zero-state for shadow-control

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] || {
+      if (this.ready && this.cValue.length > 0) {
-        x: 0,
+        return this.cValue[this.selectedId]
-        y: 0,
+      } else {
-        blur: 0,
+        return {
-        spread: 0,
+          x: 0,
-        inset: false,
+          y: 0,
-        color: '#000000',
+          blur: 0,
-        alpha: 1
+          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
+      return this.ready && this.selectedId < this.cValue.length - 1
-    },
-    isReady () {
-      return typeof this.cValue !== 'undefined'
     },
     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)
       } : {}
     }

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 || {}
 

src/components/style_switcher/style_switcher.vue

@@ -170,7 +170,7 @@
             <label class="checkbox-label" for="override"></label>
           </div>
         </div>
-        <shadow-control :fallback="currentShadowFallback" v-model="currentShadow"/>
+        <shadow-control :ready="!!currentShadowFallback" :fallback="currentShadowFallback" v-model="currentShadow"/>
       </div>
     </tab-switcher>
   </keep-alive>

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