feat: prioritySelect script setup (#1925)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1925
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
This commit is contained in:
Dominik Pschenitschni 2022-05-14 15:04:04 +00:00 committed by konrad
parent 1bf378608e
commit 99d1c40cfd

View file

@ -1,6 +1,10 @@
<template>
<div class="select">
<select :disabled="disabled || null" @change="updateData" v-model="priority">
<select
v-model="priority"
@change="updateData"
:disabled="disabled || undefined"
>
<option :value="priorities.UNSET">{{ $t('task.priority.unset') }}</option>
<option :value="priorities.LOW">{{ $t('task.priority.low') }}</option>
<option :value="priorities.MEDIUM">{{ $t('task.priority.medium') }}</option>
@ -11,42 +15,36 @@
</div>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
import priorites from '../../../models/constants/priorities'
<script setup lang="ts">
import {ref, watch} from 'vue'
import priorities from '@/models/constants/priorities.json'
export default defineComponent({
name: 'prioritySelect',
data() {
return {
priorities: priorites,
priority: 0,
}
const priority = ref(0)
const props = defineProps({
modelValue: {
default: 0,
type: Number,
},
props: {
modelValue: {
default: 0,
type: Number,
},
disabled: {
default: false,
},
},
emits: ['update:modelValue', 'change'],
watch: {
// Set the priority to the :value every time it changes from the outside
modelValue: {
handler(value) {
this.priority = value
},
immediate: true,
},
},
methods: {
updateData() {
this.$emit('update:modelValue', this.priority)
this.$emit('change')
},
disabled: {
default: false,
},
})
const emit = defineEmits(['update:modelValue', 'change'])
// FIXME: store value outside
// Set the priority to the :value every time it changes from the outside
watch(
() => props.modelValue,
(value) => {
priority.value = value
},
{immediate: true},
)
function updateData() {
emit('update:modelValue', priority.value)
emit('change')
}
</script>