mirror of
https://activitypub.software/TransFem-org/Sharkey.git
synced 2024-12-14 14:15:43 +01:00
wip: refactor(client): migrate paging components to composition api
This commit is contained in:
parent
41ece00789
commit
c8a90ec7d1
4 changed files with 46 additions and 96 deletions
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue