wip: refactor(client): migrate components to composition api

This commit is contained in:
syuilo 2022-01-14 23:23:08 +09:00
parent 45462e4a5e
commit 7f4fc20f98
3 changed files with 95 additions and 132 deletions

View file

@ -4,27 +4,21 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { computed, defineComponent } from 'vue'; import { computed } from 'vue';
import XDrive from '@/components/drive.vue'; import XDrive from '@/components/drive.vue';
import * as os from '@/os'; import * as os from '@/os';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
import { i18n } from '@/i18n';
export default defineComponent({ let folder = $ref(null);
components: {
XDrive
},
data() { defineExpose({
return { [symbols.PAGE_INFO]: computed(() => ({
[symbols.PAGE_INFO]: { title: folder ? folder.name : i18n.locale.drive,
title: computed(() => this.folder ? this.folder.name : this.$ts.drive),
icon: 'fas fa-cloud', icon: 'fas fa-cloud',
bg: 'var(--bg)', bg: 'var(--bg)',
hideHeader: true, hideHeader: true,
}, })),
folder: null,
};
},
}); });
</script> </script>

View file

@ -95,8 +95,8 @@
</MkSpacer> </MkSpacer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { computed, defineComponent } from 'vue'; import { computed } from 'vue';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import MkInput from '@/components/form/input.vue'; import MkInput from '@/components/form/input.vue';
import MkSelect from '@/components/form/select.vue'; import MkSelect from '@/components/form/select.vue';
@ -104,64 +104,41 @@ import MkPagination from '@/components/ui/pagination.vue';
import FormSplit from '@/components/form/split.vue'; import FormSplit from '@/components/form/split.vue';
import * as os from '@/os'; import * as os from '@/os';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
import { i18n } from '@/i18n';
export default defineComponent({ let host = $ref('');
components: { let state = $ref('federating');
MkButton, let sort = $ref('+pubSub');
MkInput, const pagination = {
MkSelect,
MkPagination,
FormSplit,
},
emits: ['info'],
data() {
return {
[symbols.PAGE_INFO]: {
title: this.$ts.federation,
icon: 'fas fa-globe',
bg: 'var(--bg)',
},
host: '',
state: 'federating',
sort: '+pubSub',
pagination: {
endpoint: 'federation/instances' as const, endpoint: 'federation/instances' as const,
limit: 10, limit: 10,
offsetMode: true, offsetMode: true,
params: computed(() => ({ params: computed(() => ({
sort: this.sort, sort: sort,
host: this.host != '' ? this.host : null, host: host != '' ? host : null,
...( ...(
this.state === 'federating' ? { federating: true } : state === 'federating' ? { federating: true } :
this.state === 'subscribing' ? { subscribing: true } : state === 'subscribing' ? { subscribing: true } :
this.state === 'publishing' ? { publishing: true } : state === 'publishing' ? { publishing: true } :
this.state === 'suspended' ? { suspended: true } : state === 'suspended' ? { suspended: true } :
this.state === 'blocked' ? { blocked: true } : state === 'blocked' ? { blocked: true } :
this.state === 'notResponding' ? { notResponding: true } : state === 'notResponding' ? { notResponding: true } :
{}) {})
})) }))
}, };
}
},
watch: { function getStatus(instance) {
host() {
this.$refs.instances.reload();
},
state() {
this.$refs.instances.reload();
}
},
methods: {
getStatus(instance) {
if (instance.isSuspended) return 'suspended'; if (instance.isSuspended) return 'suspended';
if (instance.isNotResponding) return 'error'; if (instance.isNotResponding) return 'error';
return 'alive'; return 'alive';
};
defineExpose({
[symbols.PAGE_INFO]: {
title: i18n.locale.federation,
icon: 'fas fa-globe',
bg: 'var(--bg)',
}, },
}
}); });
</script> </script>

View file

@ -6,70 +6,62 @@
</MkSpacer> </MkSpacer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { computed, defineComponent } from 'vue'; import { computed } from 'vue';
import XNotifications from '@/components/notifications.vue'; import XNotifications from '@/components/notifications.vue';
import * as os from '@/os'; import * as os from '@/os';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
import { notificationTypes } from 'misskey-js'; import { notificationTypes } from 'misskey-js';
import { i18n } from '@/i18n';
export default defineComponent({ let tab = $ref('all');
components: { let includeTypes = $ref<string[] | null>(null);
XNotifications
},
data() { function setFilter(ev) {
return { const typeItems = notificationTypes.map(t => ({
text: i18n.t(`_notification._types.${t}`),
active: includeTypes && includeTypes.includes(t),
action: () => {
includeTypes = [t];
}
}));
const items = includeTypes != null ? [{
icon: 'fas fa-times',
text: i18n.locale.clear,
action: () => {
includeTypes = null;
}
}, null, ...typeItems] : typeItems;
os.popupMenu(items, ev.currentTarget || ev.target);
}
defineExpose({
[symbols.PAGE_INFO]: computed(() => ({ [symbols.PAGE_INFO]: computed(() => ({
title: this.$ts.notifications, title: i18n.locale.notifications,
icon: 'fas fa-bell', icon: 'fas fa-bell',
bg: 'var(--bg)', bg: 'var(--bg)',
actions: [{ actions: [{
text: this.$ts.filter, text: i18n.locale.filter,
icon: 'fas fa-filter', icon: 'fas fa-filter',
highlighted: this.includeTypes != null, highlighted: includeTypes != null,
handler: this.setFilter, handler: setFilter,
}, { }, {
text: this.$ts.markAllAsRead, text: i18n.locale.markAllAsRead,
icon: 'fas fa-check', icon: 'fas fa-check',
handler: () => { handler: () => {
os.apiWithDialog('notifications/mark-all-as-read'); os.apiWithDialog('notifications/mark-all-as-read');
}, },
}], }],
tabs: [{ tabs: [{
active: this.tab === 'all', active: tab === 'all',
title: this.$ts.all, title: i18n.locale.all,
onClick: () => { this.tab = 'all'; }, onClick: () => { tab = 'all'; },
}, { }, {
active: this.tab === 'unread', active: tab === 'unread',
title: this.$ts.unread, title: i18n.locale.unread,
onClick: () => { this.tab = 'unread'; }, onClick: () => { tab = 'unread'; },
},] },]
})), })),
tab: 'all',
includeTypes: null,
};
},
methods: {
setFilter(ev) {
const typeItems = notificationTypes.map(t => ({
text: this.$t(`_notification._types.${t}`),
active: this.includeTypes && this.includeTypes.includes(t),
action: () => {
this.includeTypes = [t];
}
}));
const items = this.includeTypes != null ? [{
icon: 'fas fa-times',
text: this.$ts.clear,
action: () => {
this.includeTypes = null;
}
}, null, ...typeItems] : typeItems;
os.popupMenu(items, ev.currentTarget || ev.target);
}
}
}); });
</script> </script>