1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div :class="$style.preview">
<div>
<MkInput v-model="text">
<template #label>Text</template>
</MkInput>
<MkSwitch v-model="flag" :class="$style.preview__content1__switch_button">
<span>Switch is now {{ flag ? 'on' : 'off' }}</span>
</MkSwitch>
<div :class="$style.preview__content1__input">
<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>
<div :class="$style.preview__content1__button">
<MkButton inline>This is</MkButton>
<MkButton inline primary>the button</MkButton>
</div>
</div>
<div :class="$style.preview__content2" style="pointer-events: none;">
<Mfm :text="mfm"/>
</div>
<div :class="$style.preview__content3">
<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" setup>
import { ref } from 'vue';
import MkButton from '@/components/MkButton.vue';
import MkInput from '@/components/MkInput.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import MkTextarea from '@/components/MkTextarea.vue';
import MkRadio from '@/components/MkRadio.vue';
import * as os from '@/os.js';
import * as config from '@@/js/config.js';
import { $i } from '@/i.js';
const text = ref('');
const flag = ref(true);
const radio = ref('misskey');
const mfm = ref(`Hello world! This is an @example mention. BTW you are @${$i ? $i.username : 'guest'}.\nAlso, here is ${config.webUrl} and [example link](${config.webUrl}). for more details, see https://example.com.\nAs you know #misskey is open-source software.`);
const openDialog = async () => {
await os.alert({
type: 'warning',
title: 'Oh my Aichan',
text: 'Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
});
};
const openForm = async () => {
await 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',
},
});
};
const openDrive = async () => {
await os.selectDriveFile(false);
};
const selectUser = async () => {
await os.selectUser();
};
const openMenu = async (ev: Event) => {
os.popupMenu([{
type: 'label',
text: 'Fruits',
}, {
text: 'Create some apples',
action: () => {},
}, {
text: 'Read some oranges',
action: () => {},
}, {
text: 'Update some melons',
action: () => {},
}, {
text: 'Delete some bananas',
danger: true,
action: () => {},
}], ev.currentTarget ?? ev.target);
};
</script>
<style lang="scss" module>
.preview {
padding: 16px;
&__content1 {
&__switch_button {
padding: 16px 0 8px 0;
}
&__input {
padding: 8px 0 8px 0;
div {
margin: 0 8px 8px 0;
}
}
&__button {
padding: 4px 0 8px 0;
button {
margin: 0 8px 8px 0;
}
}
}
&__content2 {
padding: 8px 0 8px 0;
}
&__content3 {
padding: 8px 0 8px 0;
button {
margin: 0 8px 8px 0;
}
}
}
</style>
|
