feat: percentDoneSelect script setup (#1922)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: #1922
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>

src/components/tasks/partials/percentDoneSelect.vue

@@ -1,6 +1,9 @@
 <template>
 	<div class="select">
-		<select :disabled="disabled || null" v-model.number="percentDone">
+		<select
+			v-model.number="percentDone"
+			:disabled="disabled || undefined"
+		>
 			<option value="0">0%</option>
 			<option value="0.1">10%</option>
 			<option value="0.2">20%</option>
@@ -16,11 +19,10 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import {defineComponent} from 'vue'
+import {computed} from 'vue'
-export default defineComponent({
+
-	name: 'percentDoneSelect',
+const props = defineProps({
-	props: {
 	modelValue: {
 		default: 0,
 		type: Number,
@@ -28,18 +30,15 @@ export default defineComponent({
 	disabled: {
 		default: false,
 	},
-	},
+})
-	emits: ['update:modelValue', 'change'],
+
-	computed: {
+const emit = defineEmits(['update:modelValue', 'change'])
-		percentDone: {
+
-			get() {
+const percentDone = computed({
-				return this.modelValue
+	get: () => props.modelValue,
-			},
 	set(percentDone) {
-				this.$emit('update:modelValue', percentDone)
+		emit('update:modelValue', percentDone)
-				this.$emit('change')
+		emit('change')
-			},
-		},
 	},
 })
 </script>