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>

src/components/tasks/partials/prioritySelect.vue

@@ -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">
+<script setup lang="ts">
-import {defineComponent} from 'vue'
+import {ref, watch} from 'vue'
-import priorites from '../../../models/constants/priorities'
+import priorities from '@/models/constants/priorities.json'
 
-export default defineComponent({
+const priority = ref(0)
-	name: 'prioritySelect',
+
-	data() {
+const props = defineProps({
-		return {
+	modelValue: {
-			priorities: priorites,
+		default: 0,
-			priority: 0,
+		type: Number,
-		}
 	},
-	props: {
+	disabled: {
-		modelValue: {
+		default: false,
-			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')
-		},
 	},
 })
+
+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>