feat: convert simple components to script setup and use typescript (#1120)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1120
Reviewed-by: konrad <k@knt.li>
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>

src/components/list/partials/list-card.vue

@@ -20,64 +20,59 @@
 				:class="{'is-favorite': list.isFavorite, 'is-archived': list.isArchived}"
 				@click.stop="toggleFavoriteList(list)"
 				class="favorite">
-				<icon icon="star" v-if="list.isFavorite"/>
-				<icon :icon="['far', 'star']" v-else/>
+				<icon :icon="list.isFavorite ? 'star' : ['far', 'star']" />
 			</span>
 		</div>
 		<div class="title">{{ list.title }}</div>
 	</router-link>
 </template>
 
-<script>
+<script lang="ts" setup>
+import {ref, watch} from 'vue'
+import {useStore} from 'vuex'
+
 import ListService from '@/services/list'
 
-export default {
-	name: 'list-card',
-	data() {
-		return {
-			background: null,
-			backgroundLoading: false,
-		}
-	},
-	props: {
-		list: {
-			required: true,
-		},
-		showArchived: {
-			default: false,
-			type: Boolean,
-		},
-	},
-	watch: {
-		list: {
-			handler: 'loadBackground',
-			immediate: true,
-		},
-	},
-	methods: {
-		async loadBackground() {
-			if (this.list === null || !this.list.backgroundInformation || this.backgroundLoading) {
-				return
-			}
+const background = ref(null)
+const backgroundLoading = ref(false)
 
-			this.backgroundLoading = true
-
-			const listService = new ListService()
-			try {
-				this.background = await listService.background(this.list)
-			} finally {
-				this.backgroundLoading = false
-			}
-		},
-		toggleFavoriteList(list) {
-			// The favorites pseudo list is always favorite
-			// Archived lists cannot be marked favorite
-			if (list.id === -1 || list.isArchived) {
-				return
-			}
-			this.$store.dispatch('lists/toggleListFavorite', list)
-		},
+const props = defineProps({
+	list: {
+		type: Object,
+		required: true,
 	},
+	showArchived: {
+		default: false,
+		type: Boolean,
+	},
+})
+
+watch(props.list, loadBackground, { immediate: true })
+
+async function loadBackground() {
+	if (props.list === null || !props.list.backgroundInformation || backgroundLoading.value) {
+		return
+	}
+
+	backgroundLoading.value = true
+
+	const listService = new ListService()
+	try {
+		background.value = await listService.background(props.list)
+	} finally {
+		backgroundLoading.value = false
+	}
+}
+
+const store = useStore()
+
+function toggleFavoriteList(list) {
+	// The favorites pseudo list is always favorite
+	// Archived lists cannot be marked favorite
+	if (list.id === -1 || list.isArchived) {
+		return
+	}
+	store.dispatch('lists/toggleListFavorite', list)
 }
 </script>
 

src/components/misc/Done.vue

@@ -1,40 +1,27 @@
 <template>
     <div
-			v-if="isDone"
-			class="is-done"
-			:class="{ 'is-done--small': variant === variants.SMALL }"
-		>
-			{{ $t('task.attributes.done') }}
-		</div>
+		v-if="isDone"
+		class="is-done"
+		:class="{ 'is-done--small': variant === 'small' }"
+	>
+		{{ $t('task.attributes.done') }}
+	</div>
 </template>
 
-<script>
-const VARIANTS = {
-	DEFAULT: 'default',
-	SMALL: 'small',
-}
+<script lang="ts" setup>
+import {PropType} from 'vue'
+type Variants = 'default' | 'small'
 
-export default {
-	name: 'Done',
-
-	data() {
-		return {
-			variants: VARIANTS,
-		}
+defineProps({
+	isDone: {
+		type: Boolean,
+		default: false,
 	},
-
-	props: {
-		isDone: {
-			type: Boolean,
-			default: false,
-		},
-		variant: {
-			type: String,
-			default: VARIANTS.DEFAULT,
-			validator: (variant) => Object.values(VARIANTS).includes(variant),
-		},
+	variant: {
+		type: String as PropType<Variants>,
+		default: 'default',
 	},
-}
+})
 </script>
 
 

src/components/misc/card.vue

@@ -24,41 +24,39 @@
 	</div>
 </template>
 
-<script>
-export default {
-	name: 'card',
-	props: {
-		title: {
-			type: String,
-			default: '',
-		},
-		padding: {
-			type: Boolean,
-			default: true,
-		},
-		hasClose: {
-			type: Boolean,
-			default: false,
-		},
-		closeIcon: {
-			type: String,
-			default: 'times',
-		},
-		shadow: {
-			type: Boolean,
-			default: true,
-		},
-		hasContent: {
-			type: Boolean,
-			default: true,
-		},
-		loading: {
-			type: Boolean,
-			default: false,
-		},
+<script setup lang="ts">
+defineProps({
+	title: {
+		type: String,
+		default: '',
 	},
-	emits: ['close'],
-}
+	padding: {
+		type: Boolean,
+		default: true,
+	},
+	hasClose: {
+		type: Boolean,
+		default: false,
+	},
+	closeIcon: {
+		type: String,
+		default: 'times',
+	},
+	shadow: {
+		type: Boolean,
+		default: true,
+	},
+	hasContent: {
+		type: Boolean,
+		default: true,
+	},
+	loading: {
+		type: Boolean,
+		default: false,
+	},
+})
+
+defineEmits(['close'])
 </script>
 
 <style lang="scss" scoped>

src/components/misc/dropdown-item.vue

@@ -11,18 +11,15 @@
 	</router-link>
 </template>
 
-<script>
-export default {
-	name: 'dropdown-item',
-	props: {
-		to: {
-			required: true,
-		},
-		icon: {
-			type: String,
-			required: false,
-			default: '',
-		},
+<script lang="ts" setup>
+defineProps({
+	to: {
+		required: true,
 	},
-}
+	icon: {
+		type: String,
+		required: false,
+		default: '',
+	},
+})
 </script>

src/components/misc/error.vue

@@ -7,16 +7,10 @@
 	</message>
 </template>
 
-<script>
-import Message from '@/components/misc/message'
+<script lang="ts" setup>
+import Message from '@/components/misc/message.vue'
 
-export default {
-	name: 'error',
-	components: {Message},
-	methods: {
-		reload() {
-			window.location.reload()
-		},
-	},
+function reload() {
+	window.location.reload()
 }
 </script>

src/components/misc/legal.vue

@@ -6,16 +6,14 @@
 	</div>
 </template>
 
-<script>
-import {mapState} from 'vuex'
+<script lang="ts" setup>
+import {computed} from 'vue'
+import {useStore} from 'vuex'
 
-export default {
-	name: 'legal',
-	computed: mapState({
-		imprintUrl: state => state.config.legal.imprintUrl,
-		privacyPolicyUrl: state => state.config.legal.privacyPolicyUrl,
-	}),
-}
+const store = useStore()
+
+const imprintUrl = computed(() => store.state.config.legal.imprintUrl)
+const privacyPolicyUrl = computed(() => store.state.config.legal.privacyPolicyUrl)
 </script>
 
 <style lang="scss" scoped>

src/components/misc/loading.vue

@@ -2,12 +2,6 @@
 	<div class="loader-container is-loading"></div>
 </template>
 
-<script>
-export default {
-	name: 'loading',
-}
-</script>
-
 <style scoped>
 .loader-container {
 	height: 100%;

src/components/misc/message.vue

@@ -4,7 +4,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 defineProps({
 	variant: {
 		type: String,

src/components/misc/no-auth-wrapper.vue

@@ -2,17 +2,17 @@
 	<div class="no-auth-wrapper">
 		<div class="noauth-container">
 			<Logo class="logo" width="400" height="117" />
-			<message v-if="motd !== ''" class="my-2">
+			<Message v-if="motd !== ''" class="my-2">
 				{{ motd }}
-			</message>
+			</Message>
 			<slot/>
 		</div>
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import Logo from '@/components/home/Logo.vue'
-import message from '@/components/misc/message'
+import Message from '@/components/misc/message.vue'
 import {useStore} from 'vuex'
 import {computed} from 'vue'
 

src/components/misc/pagination.vue

@@ -34,8 +34,10 @@
 	</nav>
 </template>
 
-<script>
-function createPagination(totalPages, currentPage) {
+<script lang="ts" setup>
+import {computed} from 'vue'
+
+function createPagination(totalPages: number, currentPage: number) {
 	const pages = []
 	for (let i = 0; i < totalPages; i++) {
 
@@ -79,30 +81,18 @@ function getRouteForPagination(page = 1, type = 'list') {
 	}
 }
 
-export default {
-	name: 'Pagination',
-
-	props: {
-		totalPages: {
-			type: Number,
-			required: true,
-		},
-		currentPage: {
-			type: Number,
-			default: 0,
-		},
+const props = defineProps({
+	totalPages: {
+		type: Number,
+		required: true,
 	},
-
-	computed: {
-		pages() {
-			return createPagination(this.totalPages, this.currentPage)
-		},
+	currentPage: {
+		type: Number,
+		default: 0,
 	},
+})
 
-	methods: {
-		getRouteForPagination,
-	},
-}
+const pages = computed(() => createPagination(props.totalPages, props.currentPage))
 </script>
 
 <style lang="scss" scoped>

src/components/misc/ready.vue

@@ -13,7 +13,7 @@
 	<section v-else-if="error !== ''">
 		<no-auth-wrapper>
 			<card>
-				<p v-if="error === errorNoApiUrl">
+				<p v-if="error === ERROR_NO_API_URL">
 					{{ $t('ready.noApiUrlConfigured') }}
 				</p>
 				<message variant="danger" v-else>
@@ -40,51 +40,34 @@
 	</transition>
 </template>
 
-<script>
+<script lang="ts" setup>
+import {ref, computed} from 'vue'
+import {useStore} from 'vuex'
+
 import Logo from '@/assets/logo.svg?component'
-import ApiConfig from '@/components/misc/api-config'
-import Message from '@/components/misc/message'
-import NoAuthWrapper from '@/components/misc/no-auth-wrapper'
-import {mapState} from 'vuex'
+import ApiConfig from '@/components/misc/api-config.vue'
+import Message from '@/components/misc/message.vue'
+import NoAuthWrapper from '@/components/misc/no-auth-wrapper.vue'
+
 import {ERROR_NO_API_URL} from '@/helpers/checkAndSetApiUrl'
 
-export default {
-	name: 'ready',
-	components: {
-		Message,
-		Logo,
-		NoAuthWrapper,
-		ApiConfig,
-	},
-	data() {
-		return {
-			error: '',
-			errorNoApiUrl: ERROR_NO_API_URL,
-		}
-	},
-	created() {
-		this.load()
-	},
-	computed: {
-		ready() {
-			return this.$store.state.vikunjaReady
-		},
-		showLoading() {
-			return !this.ready && this.error === ''
-		},
-		...mapState([
-			'online',
-		]),
-	},
-	methods: {
-		load() {
-			this.$store.dispatch('loadApp')
-				.catch(e => {
-					this.error = e
-				})
-		},
-	},
+const store = useStore()
+
+const ready = computed(() => store.state.vikunjaReady)
+const online = computed(() => store.state.online)
+
+const error = ref('')
+const showLoading = computed(() => !ready.value && error.value === '')
+
+async function load() {
+	try {
+		await store.dispatch('loadApp')
+	} catch(e: any) {
+		error.value = e
+	}
 }
+
+load()
 </script>
 
 <style lang="scss" scoped>

src/components/misc/shortcut.vue

@@ -7,24 +7,21 @@
 	</component>
 </template>
 
-<script>
-export default {
-	name: 'shortcut',
-	props: {
-		keys: {
-			type: Array,
-			required: true,
-		},
-		combination: {
-			type: String,
-			default: '+',
-		},
-		is: {
-			type: String,
-			default: 'div',
-		},
+<script lang="ts" setup>
+defineProps({
+	keys: {
+		type: Array,
+		required: true,
 	},
-}
+	combination: {
+		type: String,
+		default: '+',
+	},
+	is: {
+		type: String,
+		default: 'div',
+	},
+})
 </script>
 
 <style lang="scss" scoped>

src/components/misc/subscription.vue

@@ -22,91 +22,89 @@
 	</a>
 </template>
 
-<script>
+<script lang="ts" setup>
+import {computed, shallowRef} from 'vue'
+import {useI18n} from 'vue-i18n'
+
 import SubscriptionService from '@/services/subscription'
 import SubscriptionModel from '@/models/subscription'
 
-export default {
-	name: 'task-subscription',
-	data() {
-		return {
-			subscriptionService: new SubscriptionService(),
-		}
-	},
-	props: {
-		entity: {
-			required: true,
-			type: String,
-		},
-		subscription: {
-			required: true,
-		},
-		entityId: {
-			required: true,
-		},
-		isButton: {
-			type: Boolean,
-			default: true,
-		},
-	},
-	emits: ['change'],
-	computed: {
-		tooltipText() {
-			if (this.disabled) {
-				return this.$t('task.subscription.subscribedThroughParent', {
-					entity: this.entity,
-					parent: this.subscription.entity,
-				})
-			}
+import {success} from '@/message'
 
-			return this.subscription !== null ?
-				this.$t('task.subscription.subscribed', {entity: this.entity}) :
-				this.$t('task.subscription.notSubscribed', {entity: this.entity})
-		},
-		buttonText() {
-			return this.subscription !== null ? this.$t('task.subscription.unsubscribe') : this.$t('task.subscription.subscribe')
-		},
-		icon() {
-			return this.subscription !== null ? ['far', 'bell-slash'] : 'bell'
-		},
-		disabled() {
-			if (this.subscription === null) {
-				return false
-			}
-
-			return this.subscription.entity !== this.entity
-		},
+const props = defineProps({
+	entity: {
+		required: true,
+		type: String,
 	},
-	methods: {
-		changeSubscription() {
-			if (this.disabled) {
-				return
-			}
-
-			if (this.subscription === null) {
-				this.subscribe()
-			} else {
-				this.unsubscribe()
-			}
-		},
-		async subscribe() {
-			const subscription = new SubscriptionModel({
-				entity: this.entity,
-				entityId: this.entityId,
-			})
-			await this.subscriptionService.create(subscription)
-			this.$emit('change', subscription)
-			this.$message.success({message: this.$t('task.subscription.subscribeSuccess', {entity: this.entity})})
-		},
-		async unsubscribe() {
-			const subscription = new SubscriptionModel({
-				entity: this.entity,
-				entityId: this.entityId,
-			})
-			await this.subscriptionService.delete(subscription)
-			this.$emit('change', null)
-			this.$message.success({message: this.$t('task.subscription.unsubscribeSuccess', {entity: this.entity})})
-		},
+	subscription: {
+		required: true,
 	},
+	entityId: {
+		required: true,
+	},
+	isButton: {
+		type: Boolean,
+		default: true,
+	},
+})
+
+const emit = defineEmits(['change'])
+
+const subscriptionService = shallowRef(new SubscriptionService())
+
+const {t} = useI18n()
+const tooltipText = computed(() => {
+	if (disabled.value) {
+		return t('task.subscription.subscribedThroughParent', {
+			entity: props.entity,
+			parent: props.subscription.entity,
+		})
+	}
+
+	return props.subscription !== null ?
+		t('task.subscription.subscribed', {entity: props.entity}) :
+		t('task.subscription.notSubscribed', {entity: props.entity})
+})
+
+const buttonText = computed(() => props.subscription !== null ? t('task.subscription.unsubscribe') : t('task.subscription.subscribe'))
+const icon = computed(() => props.subscription !== null ? ['far', 'bell-slash'] : 'bell')
+const disabled = computed(() => {
+	if (props.subscription === null) {
+		return false
+	}
+
+	return props.subscription.entity !== props.entity
+})
+
+function changeSubscription() {
+	if (disabled.value) {
+		return
+	}
+
+	if (props.subscription === null) {
+		subscribe()
+	} else {
+		unsubscribe()
+	}
+}
+
+async function subscribe() {
+	const subscription = new SubscriptionModel({
+		entity: props.entity,
+		entityId: props.entityId,
+	})
+	await subscriptionService.value.create(subscription)
+	emit('change', subscription)
+	success({message: t('task.subscription.subscribeSuccess', {entity: props.entity})})
+}
+
+async function unsubscribe() {
+	const subscription = new SubscriptionModel({
+		entity: props.entity,
+		entityId: props.entityId,
+	})
+	await subscriptionService.value.delete(subscription)
+	emit('change', null)
+	success({message: t('task.subscription.unsubscribeSuccess', {entity: props.entity})})
 }
 </script>

src/components/misc/user.vue

@@ -11,31 +11,28 @@
 	</div>
 </template>
 
-<script>
-export default {
-	name: 'user',
-	props: {
-		user: {
-			required: true,
-			type: Object,
-		},
-		showUsername: {
-			required: false,
-			type: Boolean,
-			default: true,
-		},
-		avatarSize: {
-			required: false,
-			type: Number,
-			default: 50,
-		},
-		isInline: {
-			required: false,
-			type: Boolean,
-			default: false,
-		},
+<script lang="ts" setup>
+defineProps({
+	user: {
+		required: true,
+		type: Object,
 	},
-}
+	showUsername: {
+		required: false,
+		type: Boolean,
+		default: true,
+	},
+	avatarSize: {
+		required: false,
+		type: Number,
+		default: 50,
+	},
+	isInline: {
+		required: false,
+		type: Boolean,
+		default: false,
+	},
+})
 </script>
 
 <style lang="scss" scoped>

src/components/namespace/namespace-search.vue

@@ -9,32 +9,23 @@
 	/>
 </template>
 
-<script>
+<script lang="ts" setup>
+import {ref, computed} from 'vue'
+import {useStore} from 'vuex'
 import Multiselect from '@/components/input/multiselect.vue'
 
-export default {
-	name: 'namespace-search',
-	emits: ['selected'],
-	data() {
-		return {
-			query: '',
-		}
-	},
-	components: {
-		Multiselect,
-	},
-	computed: {
-		namespaces() {
-			return this.$store.getters['namespaces/searchNamespace'](this.query)
-		},
-	},
-	methods: {
-		findNamespaces(query) {
-			this.query = query
-		},
-		select(namespace) {
-			this.$emit('selected', namespace)
-		},
-	},
+const emit = defineEmits(['selected'])
+
+const query = ref('')
+
+const store = useStore()
+const namespaces = computed(() => store.getters['namespaces/searchNamespace'](query.value))
+
+function findNamespaces(newQuery: string) {
+	query.value = newQuery
+}
+
+function select(namespace) {
+	emit('selected', namespace)
 }
 </script>

src/components/namespace/namespace-settings-dropdown.vue

@@ -52,30 +52,22 @@
 	</dropdown>
 </template>
 
-<script>
+<script setup lang="ts">
+import {ref, onMounted} from 'vue'
+
 import Dropdown from '@/components/misc/dropdown.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
 import TaskSubscription from '@/components/misc/subscription.vue'
 
-export default {
-	name: 'namespace-settings-dropdown',
-	data() {
-		return {
-			subscription: null,
-		}
+const props = defineProps({
+	namespace: {
+		type: Object, // NamespaceModel
+		required: true,
 	},
-	components: {
-		DropdownItem,
-		Dropdown,
-		TaskSubscription,
-	},
-	props: {
-		namespace: {
-			required: true,
-		},
-	},
-	mounted() {
-		this.subscription = this.namespace.subscription
-	},
-}
+})
+
+const subscription = ref(null)
+onMounted(() => {
+	subscription.value = props.namespace.subscription
+})
 </script>