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

packages/client/src/pages/emojis.emoji.vue

@@ -8,35 +8,29 @@
 </button>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { } from 'vue';
 import * as os from '@/os';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
+const props = defineProps<{
-	props: {
+	emoji: Record<string, unknown>; // TODO
-		emoji: {
+}>();
-			type: Object,
-			required: true,
-		}
-	},
 
-	methods: {
+function menu(ev) {
-		menu(ev) {
 	os.popupMenu([{
 		type: 'label',
-				text: ':' + this.emoji.name + ':',
+		text: ':' + props.emoji.name + ':',
 	}, {
-				text: this.$ts.copy,
+		text: i18n.locale.copy,
 		icon: 'fas fa-copy',
 		action: () => {
-					copyToClipboard(`:${this.emoji.name}:`);
+			copyToClipboard(`:${props.emoji.name}:`);
 			os.success();
 		}
 	}], ev.currentTarget || ev.target);
 }
-	}
-});
 </script>
 
 <style lang="scss" scoped>

packages/client/src/pages/emojis.vue

@@ -4,44 +4,26 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, computed } from 'vue';
+import { ref, computed } from 'vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
 import XCategory from './emojis.category.vue';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
+const tab = ref('category');
-	components: {
-		XCategory,
-	},
 
-	data() {
+function menu(ev) {
-		return {
-			[symbols.PAGE_INFO]: computed(() => ({
-				title: this.$ts.customEmojis,
-				icon: 'fas fa-laugh',
-				bg: 'var(--bg)',
-				actions: [{
-					icon: 'fas fa-ellipsis-h',
-					handler: this.menu
-				}],
-			})),
-			tab: 'category',
-		}
-	},
-
-	methods: {
-		menu(ev) {
 	os.popupMenu([{
 		icon: 'fas fa-download',
-				text: this.$ts.export,
+		text: i18n.locale.export,
 		action: async () => {
 			os.api('export-custom-emojis', {
 			})
 			.then(() => {
 				os.alert({
 					type: 'info',
-							text: this.$ts.exportRequested,
+					text: i18n.locale.exportRequested,
 				});
 			}).catch((e) => {
 				os.alert({
@@ -52,7 +34,17 @@ export default defineComponent({
 		}
 	}], ev.currentTarget || ev.target);
 }
-	}
+
+defineExpose({
+	[symbols.PAGE_INFO]: {
+		title: i18n.locale.customEmojis,
+		icon: 'fas fa-laugh',
+		bg: 'var(--bg)',
+		actions: [{
+			icon: 'fas fa-ellipsis-h',
+			handler: menu,
+		}],
+	},
 });
 </script>
 

packages/client/src/pages/timeline.tutorial.vue

@@ -65,26 +65,14 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { computed } from 'vue';
 import MkButton from '@/components/ui/button.vue';
+import { defaultStore } from '@/store';
 
-export default defineComponent({
+const tutorial = computed({
-	components: {
+	get() { return defaultStore.reactiveState.tutorial.value || 0; },
-		MkButton,
+	set(value) { defaultStore.set('tutorial', value); }
-	},
-
-	data() {
-		return {
-		}
-	},
-
-	computed: {
-		tutorial: {
-			get() { return this.$store.reactiveState.tutorial.value || 0; },
-			set(value) { this.$store.set('tutorial', value); }
-		},
-	},
 });
 </script>