From 7f4fc20f9860008cc44b7c1f5e2642823d675f59 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 14 Jan 2022 23:23:08 +0900
Subject: [PATCH] wip: refactor(client): migrate components to composition api
---
packages/client/src/pages/drive.vue | 28 ++----
packages/client/src/pages/federation.vue | 93 +++++++----------
packages/client/src/pages/notifications.vue | 106 +++++++++-----------
3 files changed, 95 insertions(+), 132 deletions(-)
diff --git a/packages/client/src/pages/drive.vue b/packages/client/src/pages/drive.vue
index f30000367..1e17bea0c 100644
--- a/packages/client/src/pages/drive.vue
+++ b/packages/client/src/pages/drive.vue
@@ -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>
diff --git a/packages/client/src/pages/federation.vue b/packages/client/src/pages/federation.vue
index 610c9233a..6a4a28b6b 100644
--- a/packages/client/src/pages/federation.vue
+++ b/packages/client/src/pages/federation.vue
@@ -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>
diff --git a/packages/client/src/pages/notifications.vue b/packages/client/src/pages/notifications.vue
index 695c54a53..090e80f99 100644
--- a/packages/client/src/pages/notifications.vue
+++ b/packages/client/src/pages/notifications.vue
@@ -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>