wip: refactor(client): migrate components to composition api

packages/client/src/pages/my-antennas/create.vue

@@ -4,25 +4,14 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { } from 'vue';
-import MkButton from '@/components/ui/button.vue';
 import XAntenna from './editor.vue';
 import * as symbols from '@/symbols';
+import { i18n } from '@/i18n';
+import { router } from '@/router';
 
-export default defineComponent({
+let draft = $ref({
-	components: {
-		MkButton,
-		XAntenna,
-	},
-
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts.manageAntennas,
-				icon: 'fas fa-satellite',
-			},
-			draft: {
 	name: '',
 	src: 'all',
 	userListId: null,
@@ -34,15 +23,18 @@ export default defineComponent({
 	caseSensitive: false,
 	withFile: false,
 	notify: false
-			},
+});
-		};
-	},
 
-	methods: {
+function onAntennaCreated() {
-		onAntennaCreated() {
+	router.push('/my/antennas');
-			this.$router.push('/my/antennas');
-		},
 }
+
+defineExpose({
+	[symbols.PAGE_INFO]: {
+		title: i18n.locale.manageAntennas,
+		icon: 'fas fa-satellite',
+		bg: 'var(--bg)',
+	},
 });
 </script>
 

packages/client/src/pages/my-clips/index.vue

@@ -3,7 +3,7 @@
 	<div class="qtcaoidl">
 		<MkButton primary class="add" @click="create"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
 
-		<MkPagination v-slot="{items}" ref="list" :pagination="pagination" class="list">
+		<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="list">
 			<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
 				<b>{{ item.name }}</b>
 				<div v-if="item.description" class="description">{{ item.description }}</div>
@@ -13,71 +13,64 @@
 </MkSpacer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { } from 'vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
+import i18n from '@/components/global/i18n';
 
-export default defineComponent({
+const pagination = {
-	components: {
-		MkPagination,
-		MkButton,
-	},
-
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts.clip,
-				icon: 'fas fa-paperclip',
-				bg: 'var(--bg)',
-				action: {
-					icon: 'fas fa-plus',
-					handler: this.create
-				}
-			},
-			pagination: {
 	endpoint: 'clips/list' as const,
 	limit: 10,
-			},
-			draft: null,
 };
-	},
 
-	methods: {
+const pagingComponent = $ref<InstanceType<typeof MkPagination>>();
-		async create() {
+
-			const { canceled, result } = await os.form(this.$ts.createNewClip, {
+async function create() {
+	const { canceled, result } = await os.form(i18n.locale.createNewClip, {
 		name: {
 			type: 'string',
-					label: this.$ts.name
+			label: i18n.locale.name,
 		},
 		description: {
 			type: 'string',
 			required: false,
 			multiline: true,
-					label: this.$ts.description
+			label: i18n.locale.description,
 		},
 		isPublic: {
 			type: 'boolean',
-					label: this.$ts.public,
+			label: i18n.locale.public,
-					default: false
+			default: false,
-				}
+		},
 	});
 	if (canceled) return;
 
 	os.apiWithDialog('clips/create', result);
-		},
 
-		onClipCreated() {
+	pagingComponent.reload();
-			this.$refs.list.reload();
-			this.draft = null;
-		},
-
-		onClipDeleted() {
-			this.$refs.list.reload();
-		},
 }
+
+function onClipCreated() {
+	pagingComponent.reload();
+}
+
+function onClipDeleted() {
+	pagingComponent.reload();
+}
+
+defineExpose({
+	[symbols.PAGE_INFO]: {
+		title: i18n.locale.clip,
+		icon: 'fas fa-paperclip',
+		bg: 'var(--bg)',
+		action: {
+			icon: 'fas fa-plus',
+			handler: create
+		},
+	},
 });
 </script>
 

packages/client/src/pages/my-lists/index.vue

@@ -3,7 +3,7 @@
 	<div class="qkcjvfiv">
 		<MkButton primary class="add" @click="create"><i class="fas fa-plus"></i> {{ $ts.createList }}</MkButton>
 
-		<MkPagination v-slot="{items}" ref="list" :pagination="pagination" class="lists _content">
+		<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="lists _content">
 			<MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">
 				<div class="name">{{ list.name }}</div>
 				<MkAvatars :user-ids="list.userIds"/>
@@ -13,50 +13,41 @@
 </MkSpacer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { } from 'vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import MkButton from '@/components/ui/button.vue';
 import MkAvatars from '@/components/avatars.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
+const pagingComponent = $ref<InstanceType<typeof MkPagination>>();
-	components: {
-		MkPagination,
-		MkButton,
-		MkAvatars,
-	},
 
-	data() {
+const pagination = {
-		return {
+	endpoint: 'users/lists/list' as const,
+	limit: 10,
+};
+
+async function create() {
+	const { canceled, result: name } = await os.inputText({
+		title: i18n.locale.enterListName,
+	});
+	if (canceled) return;
+	await os.apiWithDialog('users/lists/create', { name: name });
+	pagingComponent.reload();
+}
+
+defineExpose({
 	[symbols.PAGE_INFO]: {
-				title: this.$ts.manageLists,
+		title: i18n.locale.manageLists,
 		icon: 'fas fa-list-ul',
 		bg: 'var(--bg)',
 		action: {
 			icon: 'fas fa-plus',
-					handler: this.create
+			handler: create,
 		},
 	},
-			pagination: {
-				endpoint: 'users/lists/list' as const,
-				limit: 10,
-			},
-		};
-	},
-
-	methods: {
-		async create() {
-			const { canceled, result: name } = await os.inputText({
-				title: this.$ts.enterListName,
-			});
-			if (canceled) return;
-			await os.api('users/lists/create', { name: name });
-			this.$refs.list.reload();
-			os.success();
-		},
-	}
 });
 </script>