rudeshark.net/packages/client/src/components/MkSample.vue

<template>
	<div class="_card">
		<div class="_content">
			<MkInput v-model="text">
				<template #label>Text</template>
			</MkInput>
			<MkSwitch v-model="flag">
				<span>Switch is now {{ flag ? "on" : "off" }}</span>
			</MkSwitch>
			<div style="margin: 32px 0">
				<MkRadio v-model="radio" value="misskey">Calckey</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 "@/components/MkButton.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";

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

	data() {
		return {
			text: "",
			flag: true,
			radio: "calckey",
			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://calckey.org.\nAs you know #misskey is open-source software.`,
		};
	},

	methods: {
		async openDialog() {
			os.alert({
				type: "warning",
				title: "Oh my Calc",
				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: "Calckey makes you happy.",
					label: "This is a string property",
				},
			});
		},

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

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

		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
			);
		},
	},
});
</script>