commit: eb472e2d76b5eb7307b96f94a5cff6e0d9940543
parent ec1f069515148fa9cd164a27e865140931662164
Author: Henry Jameson <me@hjkos.com>
Date: Wed, 30 Oct 2024 22:33:50 +0200
wait a tick before emitting new Id in SelectMotion
Diffstat:
2 files changed, 102 insertions(+), 80 deletions(-)
diff --git a/src/components/select/select_motion.vue b/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>
diff --git a/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue b/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">
- <label
- class="list-select-label"
- for="variables-selector"
- >
- {{ $t('settings.style.themes3.editor.variables.label') }}
- {{ ' ' }}
- </label>
- <Select
- id="variables-selector"
- v-model="selectedVirtualDirectiveId"
- class="list-select"
- size="20"
+ <div class="setting-item list-editor variables-editor">
+ <label
+ class="list-select-label"
+ for="variables-selector"
>
- <option
- v-for="(p, index) in modelValue"
- :key="p.name"
- :value="index"
+ {{ $t('settings.style.themes3.editor.variables.label') }}
+ {{ ' ' }}
+ </label>
+ <Select
+ id="variables-selector"
+ v-model="selectedVirtualDirectiveId"
+ class="list-select"
+ size="20"
>
- {{ p.name }}
- </option>
- </Select>
- <SelectMotion
- 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"
+ <option
+ v-for="(p, index) in modelValue"
+ :key="p.name"
+ :value="index"
>
- {{ $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"
+ {{ p.name }}
+ </option>
+ </Select>
+ <SelectMotion
+ 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') }}
+ {{ ' ' }}
+ </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>
</div>
-</div>
</template>
