From c8a90ec7d15a8df5fe982e7daaae58e1af2f433c Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Fri, 14 Jan 2022 10:35:32 +0900 Subject: [PATCH] wip: refactor(client): migrate paging components to composition api --- .../client/src/components/reaction-icon.vue | 28 ++++-------- .../src/components/reaction-tooltip.vue | 35 +++++---------- .../components/reactions-viewer.details.vue | 45 ++++++------------- .../client/src/components/renote.details.vue | 34 +++++--------- 4 files changed, 46 insertions(+), 96 deletions(-) diff --git a/packages/client/src/components/reaction-icon.vue b/packages/client/src/components/reaction-icon.vue index c0ec955e32..5638c9a816 100644 --- a/packages/client/src/components/reaction-icon.vue +++ b/packages/client/src/components/reaction-icon.vue @@ -1,25 +1,13 @@ <template> -<MkEmoji :emoji="reaction" :custom-emojis="customEmojis" :is-reaction="true" :normal="true" :no-style="noStyle"/> +<MkEmoji :emoji="reaction" :custom-emojis="customEmojis || []" :is-reaction="true" :normal="true" :no-style="noStyle"/> </template> -<script lang="ts"> -import { defineComponent } from 'vue'; +<script lang="ts" setup> +import { } from 'vue'; -export default defineComponent({ - props: { - reaction: { - type: String, - required: true - }, - customEmojis: { - required: false, - default: () => [] - }, - noStyle: { - type: Boolean, - required: false, - default: false - }, - }, -}); +const props = defineProps<{ + reaction: string; + customEmojis?: any[]; // TODO + noStyle?: boolean; +}>(); </script> diff --git a/packages/client/src/components/reaction-tooltip.vue b/packages/client/src/components/reaction-tooltip.vue index dda8e7c6d7..1b2a024e21 100644 --- a/packages/client/src/components/reaction-tooltip.vue +++ b/packages/client/src/components/reaction-tooltip.vue @@ -1,5 +1,5 @@ <template> -<MkTooltip ref="tooltip" :source="source" :max-width="340" @closed="$emit('closed')"> +<MkTooltip ref="tooltip" :source="source" :max-width="340" @closed="emit('closed')"> <div class="beeadbfb"> <XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/> <div class="name">{{ reaction.replace('@.', '') }}</div> @@ -7,31 +7,20 @@ </MkTooltip> </template> -<script lang="ts"> -import { defineComponent } from 'vue'; +<script lang="ts" setup> +import { } from 'vue'; import MkTooltip from './ui/tooltip.vue'; import XReactionIcon from './reaction-icon.vue'; -export default defineComponent({ - components: { - MkTooltip, - XReactionIcon, - }, - props: { - reaction: { - type: String, - required: true, - }, - emojis: { - type: Array, - required: true, - }, - source: { - required: true, - } - }, - emits: ['closed'], -}) +const props = defineProps<{ + reaction: string; + emojis: any[]; // TODO + source: any; // TODO +}>(); + +const emit = defineEmits<{ + (e: 'closed'): void; +}>(); </script> <style lang="scss" scoped> diff --git a/packages/client/src/components/reactions-viewer.details.vue b/packages/client/src/components/reactions-viewer.details.vue index d6374517a2..8cec8dfa2f 100644 --- a/packages/client/src/components/reactions-viewer.details.vue +++ b/packages/client/src/components/reactions-viewer.details.vue @@ -1,5 +1,5 @@ <template> -<MkTooltip ref="tooltip" :source="source" :max-width="340" @closed="$emit('closed')"> +<MkTooltip ref="tooltip" :source="source" :max-width="340" @closed="emit('closed')"> <div class="bqxuuuey"> <div class="reaction"> <XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/> @@ -16,39 +16,22 @@ </MkTooltip> </template> -<script lang="ts"> -import { defineComponent } from 'vue'; +<script lang="ts" setup> +import { } from 'vue'; import MkTooltip from './ui/tooltip.vue'; import XReactionIcon from './reaction-icon.vue'; -export default defineComponent({ - components: { - MkTooltip, - XReactionIcon - }, - props: { - reaction: { - type: String, - required: true, - }, - users: { - type: Array, - required: true, - }, - count: { - type: Number, - required: true, - }, - emojis: { - type: Array, - required: true, - }, - source: { - required: true, - } - }, - emits: ['closed'], -}) +const props = defineProps<{ + reaction: string; + users: any[]; // TODO + count: number; + emojis: any[]; // TODO + source: any; // TODO +}>(); + +const emit = defineEmits<{ + (e: 'closed'): void; +}>(); </script> <style lang="scss" scoped> diff --git a/packages/client/src/components/renote.details.vue b/packages/client/src/components/renote.details.vue index e3ef15c753..cdbc71bdce 100644 --- a/packages/client/src/components/renote.details.vue +++ b/packages/client/src/components/renote.details.vue @@ -1,5 +1,5 @@ <template> -<MkTooltip ref="tooltip" :source="source" :max-width="250" @closed="$emit('closed')"> +<MkTooltip ref="tooltip" :source="source" :max-width="250" @closed="emit('closed')"> <div class="beaffaef"> <div v-for="u in users" :key="u.id" class="user"> <MkAvatar class="avatar" :user="u"/> @@ -10,29 +10,19 @@ </MkTooltip> </template> -<script lang="ts"> -import { defineComponent } from 'vue'; +<script lang="ts" setup> +import { } from 'vue'; import MkTooltip from './ui/tooltip.vue'; -export default defineComponent({ - components: { - MkTooltip, - }, - props: { - users: { - type: Array, - required: true, - }, - count: { - type: Number, - required: true, - }, - source: { - required: true, - } - }, - emits: ['closed'], -}) +const props = defineProps<{ + users: any[]; // TODO + count: number; + source: any; // TODO +}>(); + +const emit = defineEmits<{ + (e: 'closed'): void; +}>(); </script> <style lang="scss" scoped>