feat: use defineComponent wrapper

src/components/tasks/edit-task.vue

@@ -76,6 +76,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import AsyncEditor from '@/components/input/AsyncEditor'
 
 import TaskService from '../../services/task'
@@ -85,7 +87,7 @@ import EditLabels from './partials/editLabels'
 import Reminders from './partials/reminders'
 import ColorPicker from '../input/colorPicker'
 
-export default {
+export default defineComponent({
 	name: 'edit-task',
 	data() {
 		return {
@@ -151,7 +153,7 @@ export default {
 			this.$message.success({message: this.$t('task.detail.updateSuccess')})
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/gantt-component.vue

@@ -171,6 +171,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import VueDragResize from 'vue-drag-resize'
 import EditTask from './edit-task'
 
@@ -185,7 +187,7 @@ import FilterPopup from '@/components/list/partials/filter-popup.vue'
 
 import {colorIsDark} from '@/helpers/color/colorIsDark'
 
-export default {
+export default defineComponent({
 	name: 'GanttChart',
 	components: {
 		FilterPopup,
@@ -435,7 +437,7 @@ export default {
 			return this.format(date, 'MMMM, yyyy')
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/attachments.vue

@@ -136,6 +136,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import AttachmentService from '../../../services/attachment'
 import AttachmentModel from '../../../models/attachment'
 import User from '../../misc/user'
@@ -144,7 +146,7 @@ import copy from 'copy-to-clipboard'
 
 import { uploadFiles, generateAttachmentUrl } from '@/helpers/attachments'
 
-export default {
+export default defineComponent({
 	name: 'attachments',
 	components: {
 		User,
@@ -247,7 +249,7 @@ export default {
 			copy(generateAttachmentUrl(this.taskId, attachment.id))
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/checklist-summary.vue

@@ -12,9 +12,11 @@
 </template>
 
 <script lang="ts">
-import {getChecklistStatistics} from '../../../helpers/checklistFromText'
+import {defineComponent} from 'vue'
 
-export default {
+import {getChecklistStatistics} from '@/helpers/checklistFromText'
+
+export default defineComponent({
 	name: 'checklist-summary',
 	props: {
 		task: {
@@ -34,7 +36,7 @@ export default {
 			return ((100 - progress) / 100) * c
 		},
 	},
-}
+})
 </script>
 
 <style scoped lang="scss">

src/components/tasks/partials/comments.vue

@@ -152,6 +152,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import AsyncEditor from '@/components/input/AsyncEditor'
 
 import TaskCommentService from '../../../services/taskComment'
@@ -159,7 +161,7 @@ import TaskCommentModel from '../../../models/taskComment'
 import {uploadFile} from '@/helpers/attachments'
 import {mapState} from 'vuex'
 
-export default {
+export default defineComponent({
 	name: 'comments',
 	components: {
 		Editor: AsyncEditor,
@@ -302,7 +304,7 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/date-table-cell.vue

@@ -6,14 +6,11 @@
 	</td>
 </template>
 
-<script lang="ts">
-export default {
-	name: 'date-table-cell',
-	props: {
-		date: {
-			type: Date,
-			default: 0,
-		},
+<script setup lang="ts">
+defineProps({
+	date: {
+		type: Date,
+		default: 0,
 	},
-}
+})
 </script>

src/components/tasks/partials/defer-task.vue

@@ -38,10 +38,12 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import TaskService from '../../../services/task'
 import flatPickr from 'vue-flatpickr-component'
 
-export default {
+export default defineComponent({
 	name: 'defer-task',
 	data() {
 		return {
@@ -129,7 +131,7 @@ export default {
 			this.$emit('update:modelValue', task)
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/description.vue

@@ -30,12 +30,14 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import AsyncEditor from '@/components/input/AsyncEditor'
 
 import {LOADING} from '@/store/mutation-types'
 import {mapState} from 'vuex'
 
-export default {
+export default defineComponent({
 	name: 'description',
 	components: {
 		Editor: AsyncEditor,
@@ -86,6 +88,6 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>
 

src/components/tasks/partials/editAssignees.vue

@@ -28,6 +28,7 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import {includesById} from '@/helpers/utils'
 import UserModel from '../../../models/user'
 import ListUserService from '../../../services/listUsers'
@@ -35,7 +36,7 @@ import TaskAssigneeService from '../../../services/taskAssignee'
 import User from '../../misc/user'
 import Multiselect from '@/components/input/multiselect.vue'
 
-export default {
+export default defineComponent({
 	name: 'editAssignees',
 	components: {
 		User,
@@ -115,7 +116,7 @@ export default {
 			this.$refs.multiselect.focus()
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/editLabels.vue

@@ -39,13 +39,14 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import LabelModel from '../../../models/label'
 import LabelTaskService from '../../../services/labelTask'
 
 import Multiselect from '@/components/input/multiselect.vue'
 import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 
-export default {
+export default defineComponent({
 	name: 'edit-labels',
 	props: {
 		modelValue: {
@@ -141,7 +142,7 @@ export default {
 		},
 
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/heading.vue

@@ -26,11 +26,12 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import {mapState} from 'vuex'
 
 import Done from '@/components/misc/Done.vue'
 
-export default {
+export default defineComponent({
 	name: 'heading',
 	components: {
 		Done,
@@ -92,7 +93,7 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/kanban-card.vue

@@ -66,6 +66,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import {playPop} from '../../../helpers/playPop'
 import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
 import User from '../../../components/misc/user'
@@ -75,7 +77,7 @@ import ChecklistSummary from './checklist-summary'
 
 import {colorIsDark} from '@/helpers/color/colorIsDark'
 
-export default {
+export default defineComponent({
 	name: 'kanban-card',
 	components: {
 		ChecklistSummary,
@@ -124,7 +126,7 @@ export default {
 			})
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/labels.vue

@@ -10,15 +10,12 @@
 	</div>
 </template>
 
-<script lang="ts">
-export default {
-	name: 'labels',
-	props: {
-		labels: {
-			required: true,
-		},
+<script setup lang="ts">
+defineProps({
+	labels: {
+		required: true,
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/percentDoneSelect.vue

@@ -17,7 +17,8 @@
 </template>
 
 <script lang="ts">
-export default {
+import {defineComponent} from 'vue'
+export default defineComponent({
 	name: 'percentDoneSelect',
 	props: {
 		modelValue: {
@@ -40,5 +41,5 @@ export default {
 			},
 		},
 	},
-}
+})
 </script>

src/components/tasks/partials/priorityLabel.vue

@@ -20,31 +20,23 @@
 	</span>
 </template>
 
-<script lang="ts">
-import priorites from '../../../models/constants/priorities'
-
-export default {
-	name: 'priorityLabel',
-	data() {
-		return {
-			priorities: priorites,
-		}
+<script setup lang="ts">
+import priorities from '@/models/constants/priorities'
+	
+defineProps({
+	priority: {
+		default: 0,
+		type: Number,
 	},
-	props: {
-		priority: {
-			default: 0,
-			type: Number,
-		},
-		showAll: {
-			type: Boolean,
-			default: false,
-		},
-		done: {
-			type: Boolean,
-			default: false,
-		},
+	showAll: {
+		type: Boolean,
+		default: false,
 	},
-}
+	done: {
+		type: Boolean,
+		default: false,
+	},
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/prioritySelect.vue

@@ -12,9 +12,10 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import priorites from '../../../models/constants/priorities'
 
-export default {
+export default defineComponent({
 	name: 'prioritySelect',
 	data() {
 		return {
@@ -47,5 +48,5 @@ export default {
 			this.$emit('change')
 		},
 	},
-}
+})
 </script>

src/components/tasks/partials/quick-add-magic.vue

@@ -88,8 +88,9 @@
 <script lang="ts">
 import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
 import {PREFIXES} from '@/modules/parseTaskText'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
 	name: 'quick-add-magic',
 	data() {
 		return {
@@ -105,5 +106,5 @@ export default {
 			return PREFIXES[this.mode]
 		},
 	},
-}
+})
 </script>

src/components/tasks/partials/relatedTasks.vue

@@ -135,6 +135,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import TaskService from '../../../services/task'
 import TaskModel from '../../../models/task'
 import TaskRelationService from '../../../services/taskRelation'
@@ -143,7 +145,7 @@ import TaskRelationModel from '../../../models/taskRelation'
 
 import Multiselect from '@/components/input/multiselect.vue'
 
-export default {
+export default defineComponent({
 	name: 'relatedTasks',
 	data() {
 		return {
@@ -307,7 +309,7 @@ export default {
 				})
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/reminders.vue

@@ -26,9 +26,11 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import datepicker from '@/components/input/datepicker.vue'
 
-export default {
+export default defineComponent({
 	name: 'reminders',
 	data() {
 		return {
@@ -102,7 +104,7 @@ export default {
 			this.updateData()
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/repeatAfter.vue

@@ -51,9 +51,10 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import repeatModes from '@/models/constants/taskRepeatModes'
 
-export default {
+export default defineComponent({
 	name: 'repeatAfter',
 	data() {
 		return {
@@ -102,7 +103,7 @@ export default {
 			this.updateData()
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/tasks/partials/singleTaskInList.vue

@@ -92,6 +92,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import TaskModel from '../../../models/task'
 import PriorityLabel from './priorityLabel'
 import TaskService from '../../../services/task'
@@ -103,7 +105,7 @@ import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {playPop} from '@/helpers/playPop'
 import ChecklistSummary from './checklist-summary'
 
-export default {
+export default defineComponent({
 	name: 'singleTaskInList',
 	data() {
 		return {
@@ -221,7 +223,7 @@ export default {
 			})
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>