Add sample view in theme-editor

This commit is contained in:
syuilo 2020-10-18 00:49:02 +09:00
parent 2d96af1255
commit 2de1df3514
2 changed files with 126 additions and 2 deletions

View file

@ -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>

View file

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