graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-10 02:13:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

28
packages/client/src/pages/drive.vue
View file

@ -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>

93
packages/client/src/pages/federation.vue
View file

@ -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>

106
packages/client/src/pages/notifications.vue
View file

@ -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>