moved the select motion stuff into its own component

src/components/shadow_control/shadow_control.js

@@ -1,6 +1,7 @@
 import ColorInput from 'src/components/color_input/color_input.vue'
 import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
 import Select from 'src/components/select/select.vue'
+import SelectMotion from 'src/components/select/select_motion.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Popover from 'src/components/popover/popover.vue'
 import ComponentPreview from 'src/components/component_preview/component_preview.vue'
@@ -54,13 +55,11 @@ export default {
     ColorInput,
     OpacityInput,
     Select,
+    SelectMotion,
     Checkbox,
     Popover,
     ComponentPreview
   },
-  beforeUpdate () {
-    this.cValue = (this.modelValue ?? this.fallback ?? []).map(toModel)
-  },
   computed: {
     selectedType: {
       get () {
@@ -73,7 +72,6 @@ export default {
     selected: {
       get () {
         const selected = this.cValue[this.selectedId]
-        console.log('SELECTED', selected)
         if (selected && typeof selected === 'object') {
           return { ...selected }
         } else if (typeof selected === 'string') {
@@ -95,12 +93,6 @@ export default {
     currentFallback () {
       return this.fallback?.[this.selectedId]
     },
-    moveUpValid () {
-      return this.selectedId > 0
-    },
-    moveDnValid () {
-      return this.selectedId < this.cValue.length - 1
-    },
     usingFallback () {
       return this.modelValue == null
     },
@@ -123,11 +115,20 @@ export default {
     }
   },
   watch: {
+    modelValue (value) {
+      if (!value) this.cValue = (this.modelValue ?? this.fallback ?? []).map(toModel)
+    },
     selected (value) {
       this.$emit('subShadowSelected', this.selectedId)
     }
   },
   methods: {
+    getNewSubshadow () {
+      return toModel(this.selected)
+    },
+    onSelectChange (id) {
+      this.selectedId = id
+    },
     getSubshadowLabel (shadow, index) {
       if (typeof shadow === 'object') {
         return shadow?.name ?? this.$t('settings.style.shadows.shadow_id', { value: index })
@@ -141,28 +142,6 @@ export default {
         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)
-      this.$emit('update:modelValue', this.cValue)
-    },
-    del () {
-      this.cValue.splice(this.selectedId, 1)
-      this.selectedId = this.cValue.length === 0 ? undefined : Math.max(this.selectedId - 1, 0)
-      this.$emit('update:modelValue', this.cValue)
-    },
-    moveUp () {
-      const movable = this.cValue.splice(this.selectedId, 1)[0]
-      this.cValue.splice(this.selectedId - 1, 0, movable)
-      this.selectedId -= 1
-      this.$emit('update:modelValue', this.cValue)
-    },
-    moveDn () {
-      const movable = this.cValue.splice(this.selectedId, 1)[0]
-      this.cValue.splice(this.selectedId + 1, 0, movable)
-      this.selectedId += 1
-      this.$emit('update:modelValue', this.cValue)
-    }
+    }, 100)
   }
 }

src/components/shadow_control/shadow_control.vue

@@ -28,53 +28,14 @@
           {{ getSubshadowLabel(shadow, index) }}
         </option>
       </Select>
-      <div
-        class="id-control btn-group arrange-buttons"
-      >
-        <button
-          class="btn button-default"
-          :disabled="disabled || shadowsAreNull"
-          @click="add"
-        >
-          <FAIcon
-            fixed-width
-            icon="plus"
-          />
-        </button>
-        <button
-          class="btn button-default"
-          :disabled="disabled || !moveUpValid"
-          :class="{ disabled: disabled || !moveUpValid }"
-          @click="moveUp"
-        >
-          <FAIcon
-            fixed-width
-            icon="chevron-up"
-          />
-        </button>
-        <button
-          class="btn button-default"
-          :disabled="disabled || !moveDnValid"
-          :class="{ disabled: disabled || !moveDnValid }"
-          @click="moveDn"
-        >
-          <FAIcon
-            fixed-width
-            icon="chevron-down"
-          />
-        </button>
-        <button
-          class="btn button-default"
-          :disabled="disabled || !present"
-          :class="{ disabled: disabled || !present }"
-          @click="del"
-        >
-          <FAIcon
-            fixed-width
-            icon="times"
-          />
-        </button>
-      </div>
+      <SelectMotion
+        class="arrange-buttons"
+        v-model="cValue"
+        :selectedId="selectedId"
+        :get-add-value="getNewSubshadow"
+        :disabled="disabled"
+        @update:selectedId="onSelectChange"
+      />
     </div>
     <div class="shadow-tweak">
       <Select