Add sample view in theme-editor

src/client/components/sample.vue

@@ -0,0 +1,116 @@
+<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">
+		<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/ui/button.vue';
+import MkInput from '@/components/ui/input.vue';
+import MkSwitch from '@/components/ui/switch.vue';
+import MkTextarea from '@/components/ui/textarea.vue';
+import MkRadio from '@/components/ui/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: false,
+			radio: 'misskey',
+			mfm: `Hello world! This is an @example mention. BTW you are @${this.$store.state.i.username}.\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>

src/client/pages/theme-editor.vue

@@ -75,6 +75,12 @@
 			</div>
 		</div>
 	</section>
+	<section class="_section">
+		<details class="_content">
+			<summary>{{ $t('sample') }}</summary>
+			<MkSample/>
+		</details>
+	</section>
 	<section class="_section">
 		<div class="_content">
 			<MkButton inline @click="preview">{{ $t('preview') }}</MkButton>
@@ -88,16 +94,17 @@
 import { defineComponent } from 'vue';
 import { faPalette, faChevronDown, faKeyboard } from '@fortawesome/free-solid-svg-icons';
 import * as JSON5 from 'json5';
+import { toUnicode } from 'punycode';
 
 import MkRadio from '@/components/ui/radio.vue';
 import MkButton from '@/components/ui/button.vue';
 import MkInput from '@/components/ui/input.vue';
 import MkTextarea from '@/components/ui/textarea.vue';
 import MkSelect from '@/components/ui/select.vue';
+import MkSample from '@/components/sample.vue';
 
 import { convertToMisskeyTheme, ThemeValue, convertToViewModel, ThemeViewModel } from '@/scripts/theme-editor';
 import { Theme, applyTheme, lightTheme, darkTheme, themeProps, validateTheme } from '@/scripts/theme';
-import { toUnicode } from 'punycode';
 import { host } from '@/config';
 import * as os from '@/os';
 
@@ -107,7 +114,8 @@ export default defineComponent({
 		MkButton,
 		MkInput,
 		MkTextarea,
-		MkSelect
+		MkSelect,
+		MkSample,
 	},
 
 	data() {