diff --git a/src/client/components/sample.vue b/src/client/components/sample.vue new file mode 100644 index 0000000000..2e21b785d5 --- /dev/null +++ b/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> diff --git a/src/client/pages/theme-editor.vue b/src/client/pages/theme-editor.vue index 5b59d025d9..e5b593137e 100644 --- a/src/client/pages/theme-editor.vue +++ b/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() {