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/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>