diff --git a/src/components/select/select_motion.vue b/src/components/select/select_motion.vue index 21262c256..f01ec0cbd 100644 --- a/src/components/select/select_motion.vue +++ b/src/components/select/select_motion.vue @@ -80,10 +80,16 @@ const present = computed(() => props.modelValue[props.selectedId] != null) const moveUp = async () => { const newModel = [...props.modelValue] - const movable = newModel.splice(props.selectedId, 1)[0] - newModel.splice(props.selectedId - 1, 0, movable) + const movableId = Number(props.selectedId) - emit('update:modelValue', newModel) + const movable = newModel.slice(movableId, movableId + 1)[0] + const before = newModel.slice(0, movableId) + const after = newModel.slice(movableId + 1) + + const newBefore = before.slice(0, -1) + const newAfter = [before.slice(-1)[0], ...after] + + emit('update:modelValue', [...newBefore, movable, ...newAfter]) await nextTick() emit('update:selectedId', props.selectedId - 1) } @@ -94,12 +100,18 @@ const moveDnValid = computed(() => { const moveDn = async () => { const newModel = [...props.modelValue] - const movable = newModel.splice(props.selectedId.value, 1)[0] - newModel.splice(props.selectedId + 1, 0, movable) + const movableId = Number(props.selectedId) - emit('update:modelValue', newModel) + const movable = newModel.slice(movableId, movableId + 1)[0] + const before = newModel.slice(0, movableId) + const after = newModel.slice(movableId + 1) + + const newBefore = [...before, after.slice(0, 1)[0]] + const newAfter = after.slice(1) + + emit('update:modelValue', [...newBefore, movable, ...newAfter]) await nextTick() - emit('update:selectedId', props.selectedId + 1) + emit('update:selectedId', movableId + 1) } const add = async () => { diff --git a/src/components/settings_modal/helpers/vertical_tab_switcher.scss b/src/components/settings_modal/helpers/vertical_tab_switcher.scss index cb9ac205c..f98d2d78f 100644 --- a/src/components/settings_modal/helpers/vertical_tab_switcher.scss +++ b/src/components/settings_modal/helpers/vertical_tab_switcher.scss @@ -65,6 +65,8 @@ .tab-content-wrapper { flex: 1 1 auto; height: 100%; + display: flex; + flex-direction: column; &.-hidden { display: none;