refactor: sample.vue to composition api #44

Merged
toast merged 1 commit from :refactor/sample.vue into main 2022-07-30 12:24:45 +00:00

View file

@ -27,90 +27,70 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import MkButton from '@/components/ui/button.vue';
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';
import { $i } from '@/account';
export default defineComponent({
components: {
MkButton,
MkInput,
MkSwitch,
MkTextarea,
MkRadio,
},
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.url} and [example link](${config.url}). for more details, see https://example.com.\nAs you know #misskey is open-source software.`);
data() {
return {
text: '',
flag: true,
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.`
};
},
function openDialog(): void {
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.',
});
}
methods: {
async openDialog() {
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.',
});
function openForm(): void {
os.form('Example form', {
foo: {
type: 'boolean',
default: true,
label: 'This is a boolean property',
},
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'
},
});
bar: {
type: 'number',
default: 300,
label: 'This is a number property',
},
async openDrive() {
os.selectDriveFile();
baz: {
type: 'string',
default: 'Misskey makes you happy.',
label: 'This is a string property',
},
});
}
async selectUser() {
os.selectUser();
},
function openDrive(): void {
os.selectDriveFile(true);
}
async openMenu(ev) {
os.popupMenu([{
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);
},
}
});
function openMenu(ev): void {
os.popupMenu([{
type: 'label',
text: 'Fruits'
}, {
text: 'Create some apples',
action: (): void => {},
}, {
text: 'Read some oranges',
action: (): void => {},
}, {
text: 'Update some melons',
action: (): void => {},
}, null, {
text: 'Delete some bananas',
danger: true,
action: (): void => {},
}], ev.currentTarget ?? ev.target);
}
</script>