refactor: sample.vue to composition api

packages/client/src/components/sample.vue

@@ -27,90 +27,70 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+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({
+const text = ref('');
-	components: {
+const flag = ref(true);
-		MkButton,
+const radio = ref('misskey');
-		MkInput,
+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.`);
-		MkSwitch,
-		MkTextarea,
-		MkRadio,
-	},
 
-	data() {
+function openDialog(): void {
-		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.`
-		};
-	},
-
-	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.',
 	});
-		},
+}
 
-		async openForm() {
+function openForm(): void {
 	os.form('Example form', {
 		foo: {
 			type: 'boolean',
 			default: true,
-					label: 'This is a boolean property'
+			label: 'This is a boolean property',
 		},
 		bar: {
 			type: 'number',
 			default: 300,
-					label: 'This is a number property'
+			label: 'This is a number property',
 		},
 		baz: {
 			type: 'string',
 			default: 'Misskey makes you happy.',
-					label: 'This is a string property'
+			label: 'This is a string property',
 		},
 	});
-		},
+}
 
-		async openDrive() {
+function openDrive(): void {
-			os.selectDriveFile();
+	os.selectDriveFile(true);
-		},
+}
 
-		async selectUser() {
+function openMenu(ev): void {
-			os.selectUser();
-		},
-
-		async openMenu(ev) {
 	os.popupMenu([{
 		type: 'label',
 		text: 'Fruits'
 	}, {
 		text: 'Create some apples',
-				action: () => {},
+		action: (): void => {},
 	}, {
 		text: 'Read some oranges',
-				action: () => {},
+		action: (): void => {},
 	}, {
 		text: 'Update some melons',
-				action: () => {},
+		action: (): void => {},
 	}, null, {
 		text: 'Delete some bananas',
 		danger: true,
-				action: () => {},
+		action: (): void => {},
 	}], ev.currentTarget ?? ev.target);
-		},
+}
-	}
-});
 </script>