fixed shadow preview, added more safeguards for spread on separateInset shadows

src/components/shadow_control/shadow_control.js

@@ -4,8 +4,8 @@ import Select from 'src/components/select/select.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Popover from 'src/components/popover/popover.vue'
 import { getCssShadow, getCssShadowFilter } from '../../services/theme_data/theme_data.service.js'
-import { hex2rgb } from '../../services/color_convert/color_convert.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
+import { throttle } from 'lodash'
 import {
   faTimes,
   faChevronDown,
@@ -41,7 +41,7 @@ export default {
       lightGrid: false,
       selectedId: 0,
       // TODO there are some bugs regarding display of array (it's not getting updated when deleting for some reason)
-      cValue: (this.modelValue || this.fallback || []).map(toModel)
+      cValue: (this.modelValue ?? this.fallback ?? []).map(toModel)
     }
   },
   components: {
@@ -52,7 +52,7 @@ export default {
     Popover
   },
   beforeUpdate () {
-    this.cValue = (this.modelValue || this.fallback || []).map(toModel)
+    this.cValue = (this.modelValue ?? this.fallback ?? []).map(toModel)
   },
   computed: {
     selected () {
@@ -68,12 +68,6 @@ export default {
     shadowsAreNull () {
       return this.modelValue == null
     },
-    anyShadows () {
-      return this.cValue.length > 0
-    },
-    anyShadowsFallback () {
-      return this.fallback.length > 0
-    },
     currentFallback () {
       return this.fallback?.[this.selectedId]
     },
@@ -86,27 +80,28 @@ export default {
     usingFallback () {
       return this.modelValue == null
     },
-    rgb () {
-      return hex2rgb(this.selected.color)
-    },
     style () {
-      if (!this.ready) return {}
+      console.log(this.separateInset)
       if (this.separateInset) {
         return {
-          filter: getCssShadowFilter(this.fallback),
-          boxShadow: getCssShadow(this.fallback, true)
+          filter: getCssShadowFilter(this.cValue),
+          boxShadow: getCssShadow(this.cValue, true)
         }
       }
       return {
-        boxShadow: getCssShadow(this.fallback)
+        boxShadow: getCssShadow(this.cValue)
       }
     }
   },
   methods: {
-    updateProperty (prop, value) {
+    updateProperty: throttle(function (prop, value) {
+      console.log(prop, value)
       this.cValue[this.selectedId][prop] = value
+      if (prop === 'inset' && value === false && this.separateInset) {
+        this.cValue[this.selectedId].spread = 0
+      }
       this.$emit('update:modelValue', this.cValue)
-    },
+    }, 100),
     add () {
       this.cValue.push(toModel(this.selected))
       this.selectedId = Math.max(this.cValue.length - 1, 0)