refactor(client): use setup syntax
This commit is contained in:
parent
f337459c6e
commit
4c3d094a45
1 changed files with 56 additions and 83 deletions
|
@ -1,11 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<XModalWindow ref="dialog"
|
<XModalWindow
|
||||||
|
ref="dialog"
|
||||||
:width="400"
|
:width="400"
|
||||||
:height="450"
|
:height="450"
|
||||||
:with-ok-button="true"
|
:with-ok-button="true"
|
||||||
:ok-button-disabled="false"
|
:ok-button-disabled="false"
|
||||||
:can-close="false"
|
:can-close="false"
|
||||||
@close="$refs.dialog.close()"
|
@close="dialog.close()"
|
||||||
@closed="$emit('closed')"
|
@closed="$emit('closed')"
|
||||||
@ok="ok()"
|
@ok="ok()"
|
||||||
>
|
>
|
||||||
|
@ -27,91 +28,63 @@
|
||||||
</XModalWindow>
|
</XModalWindow>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts" setup>
|
||||||
import { defineComponent } from 'vue';
|
import { } from 'vue';
|
||||||
import { permissions } from 'misskey-js';
|
import { permissions as kinds } from 'misskey-js';
|
||||||
import XModalWindow from '@/components/ui/modal-window.vue';
|
|
||||||
import MkInput from './form/input.vue';
|
import MkInput from './form/input.vue';
|
||||||
import MkTextarea from './form/textarea.vue';
|
|
||||||
import MkSwitch from './form/switch.vue';
|
import MkSwitch from './form/switch.vue';
|
||||||
import MkButton from './ui/button.vue';
|
import MkButton from './ui/button.vue';
|
||||||
import MkInfo from './ui/info.vue';
|
import MkInfo from './ui/info.vue';
|
||||||
|
import XModalWindow from '@/components/ui/modal-window.vue';
|
||||||
|
|
||||||
export default defineComponent({
|
const props = withDefaults(defineProps<{
|
||||||
components: {
|
title?: string | null;
|
||||||
XModalWindow,
|
information?: string | null;
|
||||||
MkInput,
|
initialName?: string | null;
|
||||||
MkTextarea,
|
initialPermissions?: string[] | null;
|
||||||
MkSwitch,
|
}>(), {
|
||||||
MkButton,
|
title: null,
|
||||||
MkInfo,
|
information: null,
|
||||||
},
|
initialName: null,
|
||||||
|
initialPermissions: null,
|
||||||
|
});
|
||||||
|
|
||||||
props: {
|
const emit = defineEmits<{
|
||||||
title: {
|
(ev: 'closed'): void;
|
||||||
type: String,
|
(ev: 'done', result: { name: string | null, permissions: string[] }): void;
|
||||||
required: false,
|
}>();
|
||||||
default: null
|
|
||||||
},
|
|
||||||
information: {
|
|
||||||
type: String,
|
|
||||||
required: false,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
initialName: {
|
|
||||||
type: String,
|
|
||||||
required: false,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
initialPermissions: {
|
|
||||||
type: Array,
|
|
||||||
required: false,
|
|
||||||
default: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
emits: ['done', 'closed'],
|
const dialog = $ref<InstanceType<typeof XModalWindow>>();
|
||||||
|
let name = $ref(props.initialName);
|
||||||
|
let permissions = $ref({});
|
||||||
|
|
||||||
data() {
|
if (props.initialPermissions) {
|
||||||
return {
|
for (const kind of props.initialPermissions) {
|
||||||
name: this.initialName,
|
permissions[kind] = true;
|
||||||
permissions: {},
|
|
||||||
kinds: permissions
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
created() {
|
|
||||||
if (this.initialPermissions) {
|
|
||||||
for (const kind of this.initialPermissions) {
|
|
||||||
this.permissions[kind] = true;
|
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
for (const kind of this.kinds) {
|
for (const kind of kinds) {
|
||||||
this.permissions[kind] = false;
|
permissions[kind] = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
function ok(): void {
|
||||||
ok() {
|
emit('done', {
|
||||||
this.$emit('done', {
|
name: name,
|
||||||
name: this.name,
|
permissions: Object.keys(permissions).filter(p => permissions[p]),
|
||||||
permissions: Object.keys(this.permissions).filter(p => this.permissions[p])
|
|
||||||
});
|
});
|
||||||
this.$refs.dialog.close();
|
dialog.close();
|
||||||
},
|
}
|
||||||
|
|
||||||
disableAll() {
|
function disableAll(): void {
|
||||||
for (const p in this.permissions) {
|
for (const p in permissions) {
|
||||||
this.permissions[p] = false;
|
permissions[p] = false;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
|
||||||
|
|
||||||
enableAll() {
|
function enableAll(): void {
|
||||||
for (const p in this.permissions) {
|
for (const p in permissions) {
|
||||||
this.permissions[p] = true;
|
permissions[p] = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in a new issue