feat: list settings edit script setup

src/views/list/settings/edit.vue

@@ -67,49 +67,48 @@
 
 <script lang="ts">
 import {defineComponent} from 'vue'
+export default defineComponent({ name: 'list-setting-edit' })
+</script>
 
-import AsyncEditor from '@/components/input/AsyncEditor'
+<script setup lang="ts">
+import {watch, reactive, shallowReactive} from 'vue'
+import {useRoute, useRouter} from 'vue-router'
+import {useStore} from 'vuex'
+import {useI18n} from 'vue-i18n'
+
+import Editor from '@/components/input/AsyncEditor'
+import ColorPicker from '@/components/input/colorPicker.vue'
+import CreateEdit from '@/components/misc/create-edit.vue'
 
 import ListModel from '@/models/list'
 import ListService from '@/services/list'
-import ColorPicker from '@/components/input/colorPicker.vue'
 import {CURRENT_LIST} from '@/store/mutation-types'
-import CreateEdit from '@/components/misc/create-edit.vue'
+import { success } from '@/message'
+import { useTitle } from '@/composables/useTitle'
 
-export default defineComponent({
-	name: 'list-setting-edit',
-	data() {
-		return {
-			list: ListModel,
-			listService: new ListService(),
-		}
-	},
-	components: {
-		CreateEdit,
-		ColorPicker,
-		editor: AsyncEditor,
-	},
-	watch: {
-		'$route.params.listId': {
-			handler: 'loadList',
-			immediate: true,
-		},
-	},
-	methods: {
-		async loadList() {
-			const list = new ListModel({id: this.$route.params.listId})
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
 
-			const loadedList = await this.listService.get(list)
-			this.list = { ...loadedList }
-		},
+const {t} = useI18n()
 
-		async save() {
-			await this.$store.dispatch('lists/updateList', this.list)
-			await this.$store.dispatch(CURRENT_LIST, {list: this.list})
-			this.setTitle(this.$t('list.edit.title', {list: this.list.title}))
-			this.$message.success({message: this.$t('list.edit.success')})
-			this.$router.back()
-		},
+useTitle(() => t('list.edit.title', {list: list.title}))
+
+const listService = shallowReactive(new ListService())
+const list = reactive(ListModel)
+watch(
+	() => route.params.listId,
+	async () => {
+		const loadedList = await listService.get(new ListModel({id: route.params.listId}))
+		Object.assign(list, loadedList)
 	},
-})
+	{immediate: true},
+)
+
+async function save() {
+	await store.dispatch('lists/updateList', list)
+	await store.dispatch(CURRENT_LIST, {list})
+	success({message: t('list.edit.success')})
+	router.back()
+}
 </script>