wait a tick before emitting new Id in SelectMotion

src/components/select/select_motion.vue

@@ -49,9 +49,27 @@
 </template>
 
 <script setup>
-import { computed, defineEmits, defineProps } from 'vue'
+import { computed, defineEmits, defineProps, nextTick } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    required: true
+  },
+  selectedId: {
+    type: Number,
+    required: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  getAddValue: {
+    type: Function,
+    required: true
+  }
+})
 
-const props = defineProps(['modelValue', 'selectedId', 'disabled', 'getAddValue'])
 const emit = defineEmits(['update:modelValue', 'update:selectedId'])
 
 const moveUpValid = computed(() => {
@@ -60,12 +78,13 @@ const moveUpValid = computed(() => {
 
 const present = computed(() => props.modelValue[props.selectedId] != null)
 
-const moveUp = () => {
+const moveUp = async () => {
   const newModel = [...props.modelValue]
   const movable = newModel.splice(props.selectedId, 1)[0]
   newModel.splice(props.selectedId - 1, 0, movable)
 
   emit('update:modelValue', newModel)
+  await nextTick()
   emit('update:selectedId', props.selectedId - 1)
 }
 
@@ -73,27 +92,30 @@ const moveDnValid = computed(() => {
   return props.selectedId < props.modelValue.length - 1
 })
 
-const moveDn = () => {
+const moveDn = async () => {
   const newModel = [...props.modelValue]
   const movable = newModel.splice(props.selectedId.value, 1)[0]
   newModel.splice(props.selectedId + 1, 0, movable)
 
   emit('update:modelValue', newModel)
+  await nextTick()
   emit('update:selectedId', props.selectedId + 1)
 }
 
-const add = () => {
+const add = async () => {
   const newModel = [...props.modelValue, props.getAddValue()]
 
   emit('update:modelValue', newModel)
+  await nextTick()
   emit('update:selectedId', Math.max(newModel.length - 1, 0))
 }
 
-const del = () => {
+const del = async () => {
   const newModel = [...props.modelValue]
   newModel.splice(props.selectedId, 1)
 
   emit('update:modelValue', newModel)
+  await nextTick()
   emit('update:selectedId', newModel.length === 0 ? undefined : Math.max(props.selectedId - 1, 0))
 }
 </script>

src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue

@@ -1,83 +1,83 @@
 <script src="./virtual_directives_tab.js"></script>
 
 <template>
-<div class="setting-item list-editor variables-editor">
+  <div class="setting-item list-editor variables-editor">
-  <label
+    <label
-    class="list-select-label"
+      class="list-select-label"
-    for="variables-selector"
+      for="variables-selector"
-  >
-    {{ $t('settings.style.themes3.editor.variables.label') }}
-    {{ ' ' }}
-  </label>
-  <Select
-    id="variables-selector"
-    v-model="selectedVirtualDirectiveId"
-    class="list-select"
-    size="20"
     >
-    <option
+      {{ $t('settings.style.themes3.editor.variables.label') }}
-      v-for="(p, index) in modelValue"
+      {{ ' ' }}
-      :key="p.name"
+    </label>
-      :value="index"
+    <Select
+      id="variables-selector"
+      v-model="selectedVirtualDirectiveId"
+      class="list-select"
+      size="20"
       >
-      {{ p.name }}
+      <option
-    </option>
+        v-for="(p, index) in modelValue"
-  </Select>
+        :key="p.name"
-  <SelectMotion
+        :value="index"
-    class="list-select-movement"
-    :model-value="modelValue"
-    @update:modelValue="e => emit('update:modelValue', e)"
-    :selected-id="selectedVirtualDirectiveId"
-    @update:selectedId="e => selectedVirtualDirectiveId = e"
-    :get-add-value="getNewVirtualDirective"
-  />
-  <div class="list-edit-area">
-    <div class="variable-selector">
-      <label
-        class="variable-name-label"
-        for="variables-selector"
-      >
-        {{ $t('settings.style.themes3.editor.variables.name_label') }}
-        {{ ' ' }}
-      </label>
-      <input
-        class="input"
-        v-model="selectedVirtualDirective.name"
-      >
-      <label
-        class="variable-type-label"
-        for="variables-selector"
         >
-        {{ $t('settings.style.themes3.editor.variables.type_label') }}
+        {{ p.name }}
-        {{ ' ' }}
+      </option>
-      </label>
+    </Select>
-      <Select
+    <SelectMotion
-        v-model="selectedVirtualDirectiveValType"
+      class="list-select-movement"
-      >
+      :model-value="modelValue"
-        <option value='shadow'>
+      @update:modelValue="e => emit('update:modelValue', e)"
-          {{ $t('settings.style.themes3.editor.variables.type_shadow') }}
+      :selected-id="selectedVirtualDirectiveId"
-        </option>
+      @update:selectedId="e => selectedVirtualDirectiveId = e"
-        <option value='color'>
+      :get-add-value="getNewVirtualDirective"
-          {{ $t('settings.style.themes3.editor.variables.type_color') }}
+    />
-        </option>
+    <div class="list-edit-area">
-        <option value='generic'>
+      <div class="variable-selector">
-          {{ $t('settings.style.themes3.editor.variables.type_generic') }}
+        <label
-        </option>
+          class="variable-name-label"
-      </Select>
+          for="variables-selector"
+        >
+          {{ $t('settings.style.themes3.editor.variables.name_label') }}
+          {{ ' ' }}
+        </label>
+        <input
+          class="input"
+          v-model="selectedVirtualDirective.name"
+        >
+        <label
+          class="variable-type-label"
+          for="variables-selector"
+          >
+          {{ $t('settings.style.themes3.editor.variables.type_label') }}
+          {{ ' ' }}
+        </label>
+        <Select
+          v-model="selectedVirtualDirectiveValType"
+        >
+          <option value='shadow'>
+            {{ $t('settings.style.themes3.editor.variables.type_shadow') }}
+          </option>
+          <option value='color'>
+            {{ $t('settings.style.themes3.editor.variables.type_color') }}
+          </option>
+          <option value='generic'>
+            {{ $t('settings.style.themes3.editor.variables.type_generic') }}
+          </option>
+        </Select>
+      </div>
+      <ShadowControl
+        v-if="selectedVirtualDirectiveValType === 'shadow'"
+        v-model="draftVirtualDirective"
+        :static-vars="staticVars"
+        :compact="true"
+      />
+      <ColorInput
+        v-if="selectedVirtualDirectiveValType === 'color'"
+        v-model="draftVirtualDirective"
+        :fallback="computeColor(draftVirtualDirective)"
+        :label="$t('settings.style.themes3.editor.variables.virtual_color')"
+        :hide-optional-checkbox="true"
+      />
     </div>
-    <ShadowControl
-      v-if="selectedVirtualDirectiveValType === 'shadow'"
-      v-model="draftVirtualDirective"
-      :static-vars="staticVars"
-      :compact="true"
-    />
-    <ColorInput
-      v-if="selectedVirtualDirectiveValType === 'color'"
-      v-model="draftVirtualDirective"
-      :fallback="computeColor(draftVirtualDirective)"
-      :label="$t('settings.style.themes3.editor.variables.virtual_color')"
-      :hide-optional-checkbox="true"
-    />
   </div>
-</div>
 </template>