shadow editor now can handle expressions (functions and variables)

src/components/shadow_control/shadow_control.js

@@ -21,16 +21,22 @@ library.add(
   faPlus
 )
 
-const toModel = (object = {}) => ({
-  x: 0,
-  y: 0,
-  blur: 0,
-  spread: 0,
-  inset: false,
-  color: '#000000',
-  alpha: 1,
-  ...object
-})
+const toModel = (input) => {
+  if (typeof input === 'object') {
+    return {
+      x: 0,
+      y: 0,
+      blur: 0,
+      spread: 0,
+      inset: false,
+      color: '#000000',
+      alpha: 1,
+      ...input
+    }
+  } else if (typeof input === 'string') {
+    return input
+  }
+}
 
 export default {
   props: [
@@ -56,12 +62,29 @@ export default {
     this.cValue = (this.modelValue ?? this.fallback ?? []).map(toModel)
   },
   computed: {
-    selected () {
-      const selected = this.cValue[this.selectedId]
-      if (selected) {
-        return { ...selected }
+    selectedType: {
+      get () {
+        return typeof this.selected
+      },
+      set (newType) {
+        this.selected = toModel(newType === 'object' ? {} : '')
+      }
+    },
+    selected: {
+      get () {
+        const selected = this.cValue[this.selectedId]
+        console.log('SELECTED', selected)
+        if (selected && typeof selected === 'object') {
+          return { ...selected }
+        } else if (typeof selected === 'string') {
+          return selected
+        }
+        return null
+      },
+      set (value) {
+        this.cValue[this.selectedId] = toModel(value)
+        this.$emit('update:modelValue', this.cValue)
       }
-      return null
     },
     present () {
       return this.selected != null && !this.usingFallback
@@ -82,14 +105,20 @@ export default {
       return this.modelValue == null
     },
     style () {
-      if (this.separateInset) {
-        return {
-          filter: getCssShadowFilter(this.cValue),
-          boxShadow: getCssShadow(this.cValue, true)
+      try {
+        if (this.separateInset) {
+          return {
+            filter: getCssShadowFilter(this.cValue),
+            boxShadow: getCssShadow(this.cValue, true)
+          }
+        }
+        return {
+          boxShadow: getCssShadow(this.cValue)
+        }
+      } catch (e) {
+        return {
+          border: '1px solid red'
         }
-      }
-      return {
-        boxShadow: getCssShadow(this.cValue)
       }
     }
   },
@@ -99,6 +128,13 @@ export default {
     }
   },
   methods: {
+    getSubshadowLabel (shadow, index) {
+      if (typeof shadow === 'object') {
+        return shadow?.name ?? this.$t('settings.style.shadows.shadow_id', { value: index })
+      } else if (typeof shadow === 'string') {
+        return shadow || this.$t('settings.style.shadows.empty_expression')
+      }
+    },
     updateProperty: throttle(function (prop, value) {
       this.cValue[this.selectedId][prop] = value
       if (prop === 'inset' && value === false && this.separateInset) {