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)

src/components/shadow_control/shadow_control.scss

@@ -22,7 +22,6 @@
       display: grid;
       grid-auto-columns: 1fr;
       grid-auto-flow: column;
-      grid-gap: 0.125em;
       margin-top: 0.25em;
 
       .button-default {

src/components/shadow_control/shadow_control.vue

@@ -56,7 +56,7 @@
         @input="e => updateProperty('x', e.target.value)"
       >
       <Checkbox
-        id="inset"
+        id="lightGrid"
         v-model="lightGrid"
         :disabled="!present"
         name="lightGrid"
@@ -83,7 +83,7 @@
         </option>
       </Select>
       <div
-        class="id-control arrange-buttons"
+        class="id-control btn-group arrange-buttons"
       >
         <button
           class="btn button-default"
@@ -132,12 +132,11 @@
     </div>
     <div class="shadow-tweak">
       <div
-        :disabled="!present"
         :class="{ disabled: !present }"
         class="name-control style-control"
       >
         <label
-          for="spread"
+          for="name"
           class="label"
           :class="{ faint: !present }"
         >
@@ -163,7 +162,7 @@
           :disabled="!present"
           name="inset"
           class="input-inset input-boolean"
-          @input="e => updateProperty('inset', e.target.value)"
+          @input="e => updateProperty('inset', e.target.checked)"
         >
           <template #before>
             {{ $t('settings.style.shadows.inset') }}
@@ -176,7 +175,7 @@
         class="blur-control style-control"
       >
         <label
-          for="spread"
+          for="blur"
           class="label"
           :class="{ faint: !present }"
         >
@@ -205,22 +204,21 @@
         >
       </div>
       <div
-        :disabled="!present"
         class="spread-control style-control"
-        :class="{ disabled: !present }"
+        :class="{ disabled: !present || (separateInset && !selected?.inset) }"
       >
         <label
           for="spread"
           class="label"
-          :class="{ faint: !present }"
+          :class="{ faint: !present || (separateInset && !selected?.inset) }"
         >
           {{ $t('settings.style.shadows.spread') }}
         </label>
         <input
           id="spread"
           :value="selected?.spread"
-          :disabled="!present"
-          :class="{ disabled: !present }"
+          :disabled="!present || (separateInset && !selected?.inset)"
+          :class="{ disabled: !present || (separateInset && !selected?.inset) }"
           name="spread"
           class="input input-range"
           type="range"
@@ -230,26 +228,26 @@
         >
         <input
           :value="selected?.spread"
-          :disabled="!present"
-          :class="{ disabled: !present }"
+          :disabled="{ disabled: !present || (separateInset && !selected?.inset) }"
+          :class="{ disabled: !present || (separateInset && !selected?.inset) }"
           class="input input-number"
           type="number"
           @input="e => updateProperty('spread', e.target.value)"
         >
       </div>
       <ColorInput
-        :modelValue="selected?.color"
+        :model-value="selected?.color"
         :disabled="!present"
         :label="$t('settings.style.common.color')"
         :fallback="currentFallback?.color"
         :show-optional-tickbox="false"
         name="shadow"
-        @update:modelValue="e => updateProperty('color', e.target.value)"
+        @update:modelValue="e => updateProperty('color', e)"
       />
       <OpacityInput
-        :modelValue="selected?.alpha"
+        :model-value="selected?.alpha"
         :disabled="!present"
-        @update:modelValue="e => updateProperty('alpha', e.target.value)"
+        @update:modelValue="e => updateProperty('alpha', e)"
       />
       <i18n-t
         scope="global"
@@ -260,8 +258,8 @@
         <code>--variable,mod</code>
       </i18n-t>
       <Popover
-        trigger="hover"
         v-if="separateInset"
+        trigger="hover"
       >
         <template #trigger>
           <div