chore(frontend): migrate vue component options (#917)

frontend/src/components/project/views/ProjectList.vue

@@ -93,9 +93,6 @@
 	</ProjectWrapper>
 </template>
 
-<script lang="ts">
-export default {name: 'List'}
-</script>
 
 <script setup lang="ts">
 import {ref, computed, nextTick, onMounted, watch} from 'vue'
@@ -129,6 +126,8 @@ const props = defineProps<{
 	viewId: IProjectView['id'],
 }>()
 
+defineOptions({name: 'List'})
+
 const ctaVisible = ref(false)
 
 const drag = ref(false)

frontend/src/components/sharing/UserTeam.vue

@@ -156,9 +156,6 @@
 	</div>
 </template>
 
-<script lang="ts">
-export default {name: 'UserTeamShare'}
-</script>
 
 <script setup lang="ts">
 import {ref, reactive, computed, shallowReactive, type Ref} from 'vue'
@@ -201,6 +198,8 @@ const props = withDefaults(defineProps<{
 	userIsAdmin: false,
 })
 
+defineOptions({name: 'UserTeamShare'})
+
 const {t} = useI18n({useScope: 'global'})
 
 // This user service is a userProjectService, depending on the type we are using

frontend/src/views/project/settings/ProjectSettingsArchive.vue

@@ -13,10 +13,6 @@
 	</Modal>
 </template>
 
-<script lang="ts">
-export default {name: 'ProjectSettingArchive'}
-</script>
-
 <script setup lang="ts">
 import {computed} from 'vue'
 import {useRouter, useRoute} from 'vue-router'
@@ -28,6 +24,8 @@ import {useTitle} from '@/composables/useTitle'
 import {useBaseStore} from '@/stores/base'
 import {useProjectStore} from '@/stores/projects'
 
+defineOptions({name: 'ProjectSettingArchive'})
+
 const {t} = useI18n({useScope: 'global'})
 const projectStore = useProjectStore()
 const router = useRouter()

frontend/src/views/project/settings/ProjectSettingsBackground.vue

@@ -105,9 +105,6 @@
 	</CreateEdit>
 </template>
 
-<script lang="ts">
-export default { name: 'ProjectSettingBackground' }
-</script>
 
 <script setup lang="ts">
 import {ref, computed, shallowReactive} from 'vue'
@@ -133,6 +130,8 @@ import {useTitle} from '@/composables/useTitle'
 import CreateEdit from '@/components/misc/CreateEdit.vue'
 import {success} from '@/message'
 
+defineOptions({name: 'ProjectSettingBackground'})
+
 const SEARCH_DEBOUNCE = 300
 
 const {t} = useI18n({useScope: 'global'})

frontend/src/views/project/settings/ProjectSettingsEdit.vue

@@ -83,10 +83,6 @@
 	</CreateEdit>
 </template>
 
-<script lang="ts">
-export default {name: 'ProjectSettingEdit'}
-</script>
-
 <script setup lang="ts">
 import {watch, ref} from 'vue'
 import {useRouter} from 'vue-router'
@@ -110,6 +106,8 @@ const props = defineProps<{
 	projectId: IProject['id'],
 }>()
 
+defineOptions({name: 'ProjectSettingEdit'})
+
 const router = useRouter()
 const projectStore = useProjectStore()
 

frontend/src/views/project/settings/ProjectSettingsShare.vue

@@ -24,9 +24,6 @@
 	</CreateEdit>
 </template>
 
-<script lang="ts">
-export default {name: 'ProjectSettingShare'}
-</script>
 
 <script lang="ts" setup>
 import {ref, computed, watchEffect} from 'vue'
@@ -46,6 +43,8 @@ import userTeam from '@/components/sharing/UserTeam.vue'
 import {useBaseStore} from '@/stores/base'
 import {useConfigStore} from '@/stores/config'
 
+defineOptions({name: 'ProjectSettingShare'})
+
 const {t} = useI18n({useScope: 'global'})
 
 const project = ref<IProject>()

frontend/src/views/project/settings/ProjectSettingsWebhooks.vue

@@ -1,7 +1,3 @@
-<script lang="ts">
-export default {name: 'ProjectSettingWebhooks'}
-</script>
-
 <script lang="ts" setup>
 import {ref, computed, watchEffect} from 'vue'
 import {useRoute} from 'vue-router'
@@ -25,6 +21,8 @@ import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
 import {success} from '@/message'
 import {isValidHttpUrl} from '@/helpers/isValidHttpUrl'
 
+defineOptions({name: 'ProjectSettingWebhooks'})
+
 const {t} = useI18n({useScope: 'global'})
 
 const project = ref<IProject>()
@@ -105,7 +103,7 @@ const selectedEventsValid = ref(true)
 
 function getSelectedEventsArray() {
 	return Object.entries(newWebhookEvents.value)
-		.filter(([_, use]) => use)
+		.filter(([, use]) => use)
 		.map(([event]) => event)
 }
 

frontend/src/views/teams/NewTeam.vue

@@ -54,10 +54,6 @@
 	</CreateEdit>
 </template>
 
-<script lang="ts">
-export default { name: 'NewTeam' }
-</script>
-
 <script setup lang="ts">
 import {reactive, ref, shallowReactive, computed} from 'vue'
 import {useI18n} from 'vue-i18n'
@@ -74,6 +70,8 @@ import {success} from '@/message'
 
 import {useConfigStore} from '@/stores/config'
 
+defineOptions({name: 'NewTeam'})
+
 const {t} = useI18n()
 const title = computed(() => t('team.create.title'))
 useTitle(title)

frontend/src/views/user/OpenIdAuth.vue

@@ -19,9 +19,6 @@
 	</div>
 </template>
 
-<script lang="ts">
-export default { name: 'Auth' }
-</script>
 
 <script setup lang="ts">
 import {ref, computed, onMounted} from 'vue'
@@ -34,6 +31,8 @@ import {useRedirectToLastVisited} from '@/composables/useRedirectToLastVisited'
 
 import {useAuthStore} from '@/stores/auth'
 
+defineOptions({name: 'Auth'})
+
 const {t} = useI18n({useScope: 'global'})
 
 const route = useRoute()

frontend/src/views/user/settings/Avatar.vue

@@ -75,9 +75,6 @@
 	</Card>
 </template>
 
-<script lang="ts">
-export default {name: 'UserSettingsAvatar'}
-</script>
 
 <script setup lang="ts">
 import {computed, ref, shallowReactive} from 'vue'
@@ -92,6 +89,8 @@ import {success} from '@/message'
 import {useAuthStore} from '@/stores/auth'
 import Message from '@/components/misc/Message.vue'
 
+defineOptions({name: 'UserSettingsAvatar'})
+
 const {t} = useI18n({useScope: 'global'})
 const authStore = useAuthStore()
 

frontend/src/views/user/settings/DataExport.vue

@@ -45,9 +45,6 @@
 	</Card>
 </template>
 
-<script lang="ts">
-export default {name: 'UserSettingsDataExport'}
-</script>
 
 <script setup lang="ts">
 import {ref, computed, shallowReactive} from 'vue'
@@ -58,6 +55,8 @@ import {useTitle} from '@/composables/useTitle'
 import {success} from '@/message'
 import {useAuthStore} from '@/stores/auth'
 
+defineOptions({name: 'UserSettingsDataExport'})
+
 const {t} = useI18n({useScope: 'global'})
 const authStore = useAuthStore()
 

frontend/src/views/user/settings/Deletion.vue

@@ -110,10 +110,6 @@
 	</Card>
 </template>
 
-<script lang="ts">
-export default {name: 'UserSettingsDeletion'}
-</script>
-
 <script setup lang="ts">
 import {ref, shallowReactive, computed} from 'vue'
 import {useI18n} from 'vue-i18n'
@@ -126,6 +122,8 @@ import {success} from '@/message'
 import {useAuthStore} from '@/stores/auth'
 import {useConfigStore} from '@/stores/config'
 
+defineOptions({name: 'UserSettingsDeletion'})
+
 const {t} = useI18n({useScope: 'global'})
 useTitle(() => `${t('user.deletion.title')} - ${t('user.settings.title')}`)
 

frontend/src/views/user/settings/EmailUpdate.vue

@@ -48,9 +48,6 @@
 	</Card>
 </template>
 
-<script lang="ts">
-export default { name: 'UserSettingsUpdateEmail' }
-</script>
 
 <script setup lang="ts">
 import {reactive, computed, shallowReactive} from 'vue'
@@ -62,6 +59,8 @@ import {success} from '@/message'
 import {useTitle} from '@/composables/useTitle'
 import {useAuthStore} from '@/stores/auth'
 
+defineOptions({name: 'UserSettingsUpdateEmail'})
+
 const {t} = useI18n({useScope: 'global'})
 useTitle(() => `${t('user.settings.updateEmailTitle')} - ${t('user.settings.title')}`)
 

frontend/src/views/user/settings/General.vue

@@ -247,9 +247,6 @@
 	</Card>
 </template>
 
-<script lang="ts">
-export default {name: 'UserSettingsGeneral'}
-</script>
 
 <script setup lang="ts">
 import {computed, watch, ref} from 'vue'
@@ -273,6 +270,8 @@ import {isSavedFilter} from '@/services/savedFilter'
 import {DEFAULT_PROJECT_VIEW_SETTINGS} from '@/modelTypes/IProjectView'
 import {PRIORITIES} from '@/constants/priorities'
 
+defineOptions({name: 'UserSettingsGeneral'})
+
 const {t} = useI18n({useScope: 'global'})
 useTitle(() => `${t('user.settings.general.title')} - ${t('user.settings.title')}`)
 

frontend/src/views/user/settings/PasswordUpdate.vue

@@ -68,9 +68,6 @@
 	</Card>
 </template>
 
-<script lang="ts">
-export default {name: 'UserSettingsPasswordUpdate'}
-</script>
 
 <script setup lang="ts">
 import {ref, reactive, shallowReactive, computed} from 'vue'
@@ -83,6 +80,8 @@ import {useTitle} from '@/composables/useTitle'
 import {success, error} from '@/message'
 import {useAuthStore} from '@/stores/auth'
 
+defineOptions({name: 'UserSettingsPasswordUpdate'})
+
 const passwordUpdateService = shallowReactive(new PasswordUpdateService())
 const passwordUpdate = reactive(new PasswordUpdateModel())
 const passwordConfirm = ref('')

frontend/src/views/user/settings/TOTP.vue

@@ -93,9 +93,6 @@
 	</Card>
 </template>
 
-<script lang="ts">
-export default { name: 'UserSettingsTotp' }
-</script>
 
 <script lang="ts" setup>
 import {computed, ref, shallowReactive} from 'vue'
@@ -111,10 +108,11 @@ import {useConfigStore} from '@/stores/config'
 import {useAuthStore} from '@/stores/auth'
 import type {ITotp} from '@/modelTypes/ITotp'
 
+defineOptions({name: 'UserSettingsTotp'})
+
 const {t} = useI18n({useScope: 'global'})
 useTitle(() => `${t('user.settings.totp.title')} - ${t('user.settings.title')}`)
 
-
 const totpService = shallowReactive(new TotpService())
 const totp = ref<ITotp>(new TotpModel())
 const totpQR = ref('')