mirror/hotomoe
1
0
Fork 0
mirror of https://github.com/hotomoe/hotomoe synced 2024-11-28 23:08:17 +09:00
Code

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

Browse Source
This commit is contained in:
syuilo 2022-01-14 10:35:32 +09:00
parent 41ece00789
commit c8a90ec7d1
4 changed files with 46 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/client/src/components/reaction-icon.vue
View File

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

35
packages/client/src/components/reaction-tooltip.vue
View File

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

45
packages/client/src/components/reactions-viewer.details.vue
View File

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

34
packages/client/src/components/renote.details.vue
View File

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