helene/FoundKey
2
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

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> <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> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { } from 'vue';
export default defineComponent({ const props = defineProps<{
props: { reaction: string;
reaction: { customEmojis?: any[]; // TODO
type: String, noStyle?: boolean;
required: true }>();
},
customEmojis: {
required: false,
default: () => []
},
noStyle: {
type: Boolean,
required: false,
default: false
},
},
});
</script> </script>

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

@ -1,5 +1,5 @@
<template> <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"> <div class="beeadbfb">
<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/> <XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
<div class="name">{{ reaction.replace('@.', '') }}</div> <div class="name">{{ reaction.replace('@.', '') }}</div>
@ -7,31 +7,20 @@
</MkTooltip> </MkTooltip>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { } from 'vue';
import MkTooltip from './ui/tooltip.vue'; import MkTooltip from './ui/tooltip.vue';
import XReactionIcon from './reaction-icon.vue'; import XReactionIcon from './reaction-icon.vue';
export default defineComponent({ const props = defineProps<{
components: { reaction: string;
MkTooltip, emojis: any[]; // TODO
XReactionIcon, source: any; // TODO
}, }>();
props: {
reaction: { const emit = defineEmits<{
type: String, (e: 'closed'): void;
required: true, }>();
},
emojis: {
type: Array,
required: true,
},
source: {
required: true,
}
},
emits: ['closed'],
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

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

@ -1,5 +1,5 @@
<template> <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="bqxuuuey">
<div class="reaction"> <div class="reaction">
<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/> <XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
@ -16,39 +16,22 @@
</MkTooltip> </MkTooltip>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { } from 'vue';
import MkTooltip from './ui/tooltip.vue'; import MkTooltip from './ui/tooltip.vue';
import XReactionIcon from './reaction-icon.vue'; import XReactionIcon from './reaction-icon.vue';
export default defineComponent({ const props = defineProps<{
components: { reaction: string;
MkTooltip, users: any[]; // TODO
XReactionIcon count: number;
}, emojis: any[]; // TODO
props: { source: any; // TODO
reaction: { }>();
type: String,
required: true, const emit = defineEmits<{
}, (e: 'closed'): void;
users: { }>();
type: Array,
required: true,
},
count: {
type: Number,
required: true,
},
emojis: {
type: Array,
required: true,
},
source: {
required: true,
}
},
emits: ['closed'],
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

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

@ -1,5 +1,5 @@
<template> <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 class="beaffaef">
<div v-for="u in users" :key="u.id" class="user"> <div v-for="u in users" :key="u.id" class="user">
<MkAvatar class="avatar" :user="u"/> <MkAvatar class="avatar" :user="u"/>
@ -10,29 +10,19 @@
</MkTooltip> </MkTooltip>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { } from 'vue';
import MkTooltip from './ui/tooltip.vue'; import MkTooltip from './ui/tooltip.vue';
export default defineComponent({ const props = defineProps<{
components: { users: any[]; // TODO
MkTooltip, count: number;
}, source: any; // TODO
props: { }>();
users: {
type: Array, const emit = defineEmits<{
required: true, (e: 'closed'): void;
}, }>();
count: {
type: Number,
required: true,
},
source: {
required: true,
}
},
emits: ['closed'],
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>