Sharkey/packages/frontend/src/components/MkSample.vue

117 lines
2.8 KiB
Vue
Raw Normal View History

2020-10-17 18:49:02 +03:00
<template>
<div class="_card">
<div class="_content">
2021-08-06 16:29:19 +03:00
<MkInput v-model="text">
<template #label>Text</template>
2020-10-17 18:49:02 +03:00
</MkInput>
2021-08-06 16:29:19 +03:00
<MkSwitch v-model="flag">
2020-10-17 18:49:02 +03:00
<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>
2021-01-09 10:18:45 +02:00
<div class="_content" style="pointer-events: none;">
2020-10-17 18:49:02 +03:00
<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';
2021-11-11 19:02:25 +02:00
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';
2020-10-17 18:49:02 +03:00
export default defineComponent({
components: {
MkButton,
MkInput,
MkSwitch,
MkTextarea,
MkRadio,
},
data() {
return {
text: '',
2021-01-09 10:18:45 +02:00
flag: true,
2020-10-17 18:49:02 +03:00
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.`,
};
2020-10-17 18:49:02 +03:00
},
methods: {
async openDialog() {
os.alert({
2020-10-17 18:49:02 +03:00
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',
2020-10-17 18:49:02 +03:00
},
bar: {
type: 'number',
default: 300,
label: 'This is a number property',
2020-10-17 18:49:02 +03:00
},
baz: {
type: 'string',
default: 'Misskey makes you happy.',
label: 'This is a string property',
2020-10-17 18:49:02 +03:00
},
});
},
async openDrive() {
os.selectDriveFile();
},
async selectUser() {
os.selectUser();
},
async openMenu(ev) {
2021-08-08 06:19:10 +03:00
os.popupMenu([{
2020-10-17 18:49:02 +03:00
type: 'label',
text: 'Fruits',
2020-10-17 18:49:02 +03:00
}, {
text: 'Create some apples',
action: () => {},
}, {
text: 'Read some oranges',
action: () => {},
}, {
text: 'Update some melons',
action: () => {},
}, null, {
text: 'Delete some bananas',
danger: true,
action: () => {},
2022-01-28 04:53:12 +02:00
}], ev.currentTarget ?? ev.target);
2020-10-17 18:49:02 +03:00
},
},
2020-10-17 18:49:02 +03:00
});
</script>