From ef4d78dda25e741c536f535aece0b20b488b9af4 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 13 Jan 2022 02:55:19 +0900
Subject: [PATCH] wip: refactor(client): migrate paging components to
composition api
---
.../src/components/reactions-viewer.vue | 34 ++++-------
.../client/src/components/waiting-dialog.vue | 57 +++++++------------
2 files changed, 30 insertions(+), 61 deletions(-)
diff --git a/packages/client/src/components/reactions-viewer.vue b/packages/client/src/components/reactions-viewer.vue
index 59fcbb7129..a9bf51f65f 100644
--- a/packages/client/src/components/reactions-viewer.vue
+++ b/packages/client/src/components/reactions-viewer.vue
@@ -4,31 +4,19 @@
</div>
</template>
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { computed } from 'vue';
+import * as misskey from 'misskey-js';
+import { $i } from '@/account';
import XReaction from './reactions-viewer.reaction.vue';
-export default defineComponent({
- components: {
- XReaction
- },
- props: {
- note: {
- type: Object,
- required: true
- },
- },
- data() {
- return {
- initialReactions: new Set(Object.keys(this.note.reactions))
- };
- },
- computed: {
- isMe(): boolean {
- return this.$i && this.$i.id === this.note.userId;
- },
- },
-});
+const props = defineProps<{
+ note: misskey.entities.Note;
+}>();
+
+const initialReactions = new Set(Object.keys(props.note.reactions));
+
+const isMe = computed(() => $i && $i.id === props.note.userId);
</script>
<style lang="scss" scoped>
diff --git a/packages/client/src/components/waiting-dialog.vue b/packages/client/src/components/waiting-dialog.vue
index 10aedbd8f6..7dfcc55695 100644
--- a/packages/client/src/components/waiting-dialog.vue
+++ b/packages/client/src/components/waiting-dialog.vue
@@ -1,5 +1,5 @@
<template>
-<MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="success ? done() : () => {}" @closed="$emit('closed')">
+<MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="success ? done() : () => {}" @closed="emit('closed')">
<div class="iuyakobc" :class="{ iconOnly: (text == null) || success }">
<i v-if="success" class="fas fa-check icon success"></i>
<i v-else class="fas fa-spinner fa-pulse icon waiting"></i>
@@ -8,49 +8,30 @@
</MkModal>
</template>
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { watch, ref } from 'vue';
import MkModal from '@/components/ui/modal.vue';
-export default defineComponent({
- components: {
- MkModal,
- },
+const modal = ref<InstanceType<typeof MkModal>>();
- props: {
- success: {
- type: Boolean,
- required: true,
- },
- showing: {
- type: Boolean,
- required: true,
- },
- text: {
- type: String,
- required: false,
- },
- },
+const props = defineProps<{
+ success: boolean;
+ showing: boolean;
+ text?: string;
+}>();
- emits: ['done', 'closed'],
+const emit = defineEmits<{
+ (e: 'done');
+ (e: 'closed');
+}>();
- data() {
- return {
- };
- },
-
- watch: {
- showing() {
- if (!this.showing) this.done();
- }
- },
+function done() {
+ emit('done');
+ modal.value.close();
+}
- methods: {
- done() {
- this.$emit('done');
- this.$refs.modal.close();
- },
- }
+watch(() => props.showing, () => {
+ if (!props.showing) done();
});
</script>
--
GitLab