feat: use defineComponent wrapper

src/components/input/button.vue

@@ -18,9 +18,11 @@
 </template>
 
 <script lang="ts">
-export default {
+import {defineComponent} from 'vue'
+
+export default defineComponent({
 	name: 'x-button',
-}
+})
 </script>
 
 <script setup lang="ts">

src/components/input/colorPicker.vue

@@ -35,6 +35,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import {createRandomID} from '@/helpers/randomId'
 
 const DEFAULT_COLORS = [
@@ -46,7 +48,7 @@ const DEFAULT_COLORS = [
 	'#00db60',
 ]
 
-export default {
+export default defineComponent({
 	name: 'colorPicker',
 	data() {
 		return {
@@ -105,7 +107,7 @@ export default {
 			this.update(true)
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/input/datepicker.vue

@@ -111,6 +111,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import flatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
 import { i18n } from '@/i18n'
@@ -121,7 +123,7 @@ import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {createDateFromString} from '@/helpers/time/createDateFromString'
 
-export default {
+export default defineComponent({
 	name: 'datepicker',
 	data() {
 		return {
@@ -249,7 +251,7 @@ export default {
 			return format(newDate, 'E')
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/input/editor.vue

@@ -43,6 +43,8 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import VueEasymde from './vue-easymde/vue-easymde.vue'
 import {marked} from 'marked'
 import DOMPurify from 'dompurify'
@@ -55,7 +57,7 @@ import AttachmentService from '../../services/attachment'
 import {findCheckboxesInText} from '../../helpers/checklistFromText'
 import {createRandomID} from '@/helpers/randomId'
 
-export default {
+export default defineComponent({
 	name: 'editor',
 	components: {
 		VueEasymde,
@@ -304,7 +306,7 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss">

src/components/input/fancycheckbox.vue

@@ -20,9 +20,11 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import {createRandomID} from '@/helpers/randomId'
 
-export default {
+export default defineComponent({
 	name: 'fancycheckbox',
 	data() {
 		return {
@@ -57,7 +59,7 @@ export default {
 			this.$emit('change', checked)
 		},
 	},
-}
+})
 </script>
 
 

src/components/input/multiselect.vue

@@ -83,10 +83,11 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
 import {i18n} from '@/i18n'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 
-export default {
+export default defineComponent({
 	name: 'multiselect',
 	data() {
 		return {
@@ -366,7 +367,7 @@ export default {
 			this.$refs.searchInput.focus()
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/components/input/vue-easymde/vue-easymde.vue

@@ -10,10 +10,12 @@
 </template>
 
 <script lang="ts">
+import {defineComponent} from 'vue'
+
 import EasyMDE from 'easymde'
 import {marked} from 'marked'
 
-export default {
+export default defineComponent({
   name: 'vue-easymde',
   props: {
     modelValue: String,
@@ -143,7 +145,7 @@ export default {
       }
     },
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>