wip: refactor(client): migrate components to composition api
This commit is contained in:
syuilo
parent
45462e4a5e
commit
7f4fc20f98
3 changed files with 95 additions and 132 deletions
|
|
@ -4,27 +4,21 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import XDrive from '@/components/drive.vue';
|
||||
import * as os from '@/os';
|
||||
import * as symbols from '@/symbols';
|
||||
import { i18n } from '@/i18n';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
XDrive
|
||||
},
|
||||
let folder = $ref(null);
|
||||
|
||||
data() {
|
||||
return {
|
||||
[symbols.PAGE_INFO]: {
|
||||
title: computed(() => this.folder ? this.folder.name : this.$ts.drive),
|
||||
icon: 'fas fa-cloud',
|
||||
bg: 'var(--bg)',
|
||||
hideHeader: true,
|
||||
},
|
||||
folder: null,
|
||||
};
|
||||
},
|
||||
defineExpose({
|
||||
[symbols.PAGE_INFO]: computed(() => ({
|
||||
title: folder ? folder.name : i18n.locale.drive,
|
||||
icon: 'fas fa-cloud',
|
||||
bg: 'var(--bg)',
|
||||
hideHeader: true,
|
||||
})),
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -95,8 +95,8 @@
|
|||
</MkSpacer>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import MkButton from '@/components/ui/button.vue';
|
||||
import MkInput from '@/components/form/input.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 * as os from '@/os';
|
||||
import * as symbols from '@/symbols';
|
||||
import { i18n } from '@/i18n';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MkButton,
|
||||
MkInput,
|
||||
MkSelect,
|
||||
MkPagination,
|
||||
FormSplit,
|
||||
let host = $ref('');
|
||||
let state = $ref('federating');
|
||||
let sort = $ref('+pubSub');
|
||||
const pagination = {
|
||||
endpoint: 'federation/instances' as const,
|
||||
limit: 10,
|
||||
offsetMode: true,
|
||||
params: computed(() => ({
|
||||
sort: sort,
|
||||
host: host != '' ? host : null,
|
||||
...(
|
||||
state === 'federating' ? { federating: true } :
|
||||
state === 'subscribing' ? { subscribing: true } :
|
||||
state === 'publishing' ? { publishing: true } :
|
||||
state === 'suspended' ? { suspended: true } :
|
||||
state === 'blocked' ? { blocked: true } :
|
||||
state === 'notResponding' ? { notResponding: true } :
|
||||
{})
|
||||
}))
|
||||
};
|
||||
|
||||
function getStatus(instance) {
|
||||
if (instance.isSuspended) return 'suspended';
|
||||
if (instance.isNotResponding) return 'error';
|
||||
return 'alive';
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
[symbols.PAGE_INFO]: {
|
||||
title: i18n.locale.federation,
|
||||
icon: 'fas fa-globe',
|
||||
bg: 'var(--bg)',
|
||||
},
|
||||
|
||||
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,
|
||||
limit: 10,
|
||||
offsetMode: true,
|
||||
params: computed(() => ({
|
||||
sort: this.sort,
|
||||
host: this.host != '' ? this.host : null,
|
||||
...(
|
||||
this.state === 'federating' ? { federating: true } :
|
||||
this.state === 'subscribing' ? { subscribing: true } :
|
||||
this.state === 'publishing' ? { publishing: true } :
|
||||
this.state === 'suspended' ? { suspended: true } :
|
||||
this.state === 'blocked' ? { blocked: true } :
|
||||
this.state === 'notResponding' ? { notResponding: true } :
|
||||
{})
|
||||
}))
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
host() {
|
||||
this.$refs.instances.reload();
|
||||
},
|
||||
state() {
|
||||
this.$refs.instances.reload();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
getStatus(instance) {
|
||||
if (instance.isSuspended) return 'suspended';
|
||||
if (instance.isNotResponding) return 'error';
|
||||
return 'alive';
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,70 +6,62 @@
|
|||
</MkSpacer>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import XNotifications from '@/components/notifications.vue';
|
||||
import * as os from '@/os';
|
||||
import * as symbols from '@/symbols';
|
||||
import { notificationTypes } from 'misskey-js';
|
||||
import { i18n } from '@/i18n';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
XNotifications
|
||||
},
|
||||
let tab = $ref('all');
|
||||
let includeTypes = $ref<string[] | null>(null);
|
||||
|
||||
data() {
|
||||
return {
|
||||
[symbols.PAGE_INFO]: computed(() => ({
|
||||
title: this.$ts.notifications,
|
||||
icon: 'fas fa-bell',
|
||||
bg: 'var(--bg)',
|
||||
actions: [{
|
||||
text: this.$ts.filter,
|
||||
icon: 'fas fa-filter',
|
||||
highlighted: this.includeTypes != null,
|
||||
handler: this.setFilter,
|
||||
}, {
|
||||
text: this.$ts.markAllAsRead,
|
||||
icon: 'fas fa-check',
|
||||
handler: () => {
|
||||
os.apiWithDialog('notifications/mark-all-as-read');
|
||||
},
|
||||
}],
|
||||
tabs: [{
|
||||
active: this.tab === 'all',
|
||||
title: this.$ts.all,
|
||||
onClick: () => { this.tab = 'all'; },
|
||||
}, {
|
||||
active: this.tab === 'unread',
|
||||
title: this.$ts.unread,
|
||||
onClick: () => { this.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);
|
||||
function setFilter(ev) {
|
||||
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(() => ({
|
||||
title: i18n.locale.notifications,
|
||||
icon: 'fas fa-bell',
|
||||
bg: 'var(--bg)',
|
||||
actions: [{
|
||||
text: i18n.locale.filter,
|
||||
icon: 'fas fa-filter',
|
||||
highlighted: includeTypes != null,
|
||||
handler: setFilter,
|
||||
}, {
|
||||
text: i18n.locale.markAllAsRead,
|
||||
icon: 'fas fa-check',
|
||||
handler: () => {
|
||||
os.apiWithDialog('notifications/mark-all-as-read');
|
||||
},
|
||||
}],
|
||||
tabs: [{
|
||||
active: tab === 'all',
|
||||
title: i18n.locale.all,
|
||||
onClick: () => { tab = 'all'; },
|
||||
}, {
|
||||
active: tab === 'unread',
|
||||
title: i18n.locale.unread,
|
||||
onClick: () => { tab = 'unread'; },
|
||||
},]
|
||||
})),
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue