refactor: sample.vue to composition api

packages/client/src/components/sample.vue

@@ -27,90 +27,70 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { ref } from 'vue';
 import MkButton from '@/components/ui/button.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSwitch from '@/components/form/switch.vue';
-import MkTextarea from '@/components/form/textarea.vue';
 import MkRadio from '@/components/form/radio.vue';
 import * as os from '@/os';
 import * as config from '@/config';
+import { $i } from '@/account';
 
-export default defineComponent({
-	components: {
-		MkButton,
-		MkInput,
-		MkSwitch,
-		MkTextarea,
-		MkRadio,
-	},
+const text = ref('');
+const flag = ref(true);
+const radio = ref('misskey');
+const mfm = ref(`Hello world! This is an @example mention. BTW you are @${$i ? $i.username : 'guest'}.\nAlso, here is ${config.url} and [example link](${config.url}). for more details, see https://example.com.\nAs you know #misskey is open-source software.`);
 
-	data() {
-		return {
-			text: '',
-			flag: true,
-			radio: 'misskey',
-			mfm: `Hello world! This is an @example mention. BTW you are @${this.$i ? this.$i.username : 'guest'}.\nAlso, here is ${config.url} and [example link](${config.url}). for more details, see https://example.com.\nAs you know #misskey is open-source software.`
-		};
-	},
+function openDialog(): void {
+	os.alert({
+		type: 'warning',
+		title: 'Oh my Aichan',
+		text: 'Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+	});
+}
 
-	methods: {
-		async openDialog() {
-			os.alert({
-				type: 'warning',
-				title: 'Oh my Aichan',
-				text: 'Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-			});
+function openForm(): void {
+	os.form('Example form', {
+		foo: {
+			type: 'boolean',
+			default: true,
+			label: 'This is a boolean property',
 		},
-
-		async openForm() {
-			os.form('Example form', {
-				foo: {
-					type: 'boolean',
-					default: true,
-					label: 'This is a boolean property'
-				},
-				bar: {
-					type: 'number',
-					default: 300,
-					label: 'This is a number property'
-				},
-				baz: {
-					type: 'string',
-					default: 'Misskey makes you happy.',
-					label: 'This is a string property'
-				},
-			});
+		bar: {
+			type: 'number',
+			default: 300,
+			label: 'This is a number property',
 		},
-
-		async openDrive() {
-			os.selectDriveFile();
+		baz: {
+			type: 'string',
+			default: 'Misskey makes you happy.',
+			label: 'This is a string property',
 		},
+	});
+}
 
-		async selectUser() {
-			os.selectUser();
-		},
+function openDrive(): void {
+	os.selectDriveFile(true);
+}
 
-		async openMenu(ev) {
-			os.popupMenu([{
-				type: 'label',
-				text: 'Fruits'
-			}, {
-				text: 'Create some apples',
-				action: () => {},
-			}, {
-				text: 'Read some oranges',
-				action: () => {},
-			}, {
-				text: 'Update some melons',
-				action: () => {},
-			}, null, {
-				text: 'Delete some bananas',
-				danger: true,
-				action: () => {},
-			}], ev.currentTarget ?? ev.target);
-		},
-	}
-});
+function openMenu(ev): void {
+	os.popupMenu([{
+		type: 'label',
+		text: 'Fruits'
+	}, {
+		text: 'Create some apples',
+		action: (): void => {},
+	}, {
+		text: 'Read some oranges',
+		action: (): void => {},
+	}, {
+		text: 'Update some melons',
+		action: (): void => {},
+	}, null, {
+		text: 'Delete some bananas',
+		danger: true,
+		action: (): void => {},
+	}], ev.currentTarget ?? ev.target);
+}
 </script>