wait a tick before emitting new Id in SelectMotion

This commit is contained in:
Henry Jameson 2024-10-30 22:33:50 +02:00
parent ec1f069515
commit eb472e2d76
2 changed files with 102 additions and 80 deletions

View file

@ -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>