misskey/src/client/components/sample.vue

<template>
<div class="_card">
	<div class="_content">
		<MkInput v-model:value="text">
			<span>Text</span>
		</MkInput>
		<MkSwitch v-model:value="flag">
			<span>Switch is now {{ flag ? 'on' : 'off' }}</span>
		</MkSwitch>
		<div style="margin: 32px 0;">
			<MkRadio v-model="radio" value="misskey">Misskey</MkRadio>
			<MkRadio v-model="radio" value="mastodon">Mastodon</MkRadio>
			<MkRadio v-model="radio" value="pleroma">Pleroma</MkRadio>
		</div>
		<MkButton inline>This is</MkButton>
		<MkButton inline primary>the button</MkButton>
	</div>
	<div class="_content" style="pointer-events: none;">
		<Mfm :text="mfm"/>
	</div>
	<div class="_content">
		<MkButton inline primary @click="openMenu">Open menu</MkButton>
		<MkButton inline primary @click="openDialog">Open dialog</MkButton>
		<MkButton inline primary @click="openForm">Open form</MkButton>
		<MkButton inline primary @click="openDrive">Open drive</MkButton>
	</div>
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import MkButton from '@client/components/ui/button.vue';
import MkInput from '@client/components/ui/input.vue';
import MkSwitch from '@client/components/ui/switch.vue';
import MkTextarea from '@client/components/ui/textarea.vue';
import MkRadio from '@client/components/ui/radio.vue';
import * as os from '@client/os';
import * as config from '@client/config';

export default defineComponent({
	components: {
		MkButton,
		MkInput,
		MkSwitch,
		MkTextarea,
		MkRadio,
	},

	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.`
		}
	},

	methods: {
		async openDialog() {
			os.dialog({
				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() {
			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'
				},
			});
		},

		async openDrive() {
			os.selectDriveFile();
		},

		async selectUser() {
			os.selectUser();
		},

		async openMenu(ev) {
			os.modalMenu([{
				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);
		},
	}
});
</script>