mirror of
https://activitypub.software/TransFem-org/Sharkey.git
synced 2024-12-14 14:15:43 +01:00
wip: migrate paging components to composition api
This commit is contained in:
parent
d3315bda11
commit
f9882a0c5c
4 changed files with 52 additions and 17 deletions
|
@ -32,8 +32,7 @@ const props = defineProps<{
|
|||
const pagingComponent = ref<InstanceType<typeof MkPagination>>();
|
||||
|
||||
const updated = (oldValue, newValue) => {
|
||||
const i = pagingComponent.value.items.findIndex(n => n === oldValue);
|
||||
pagingComponent.value.items[i] = newValue;
|
||||
pagingComponent.value?.updateItem(oldValue.id, () => newValue);
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
<template #default="{ items: notifications }">
|
||||
<XList v-slot="{ item: notification }" class="elsfgstc" :items="notifications" :no-gap="true">
|
||||
<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note" @update:note="noteUpdated(notification.note, $event)"/>
|
||||
<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note" @update:note="noteUpdated(notification, $event)"/>
|
||||
<XNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="true" class="_panel notification"/>
|
||||
</XList>
|
||||
</template>
|
||||
|
@ -62,12 +62,11 @@ const onNotification = (notification) => {
|
|||
}
|
||||
};
|
||||
|
||||
const noteUpdated = (oldValue, newValue) => {
|
||||
const i = pagingComponent.value.items.findIndex(n => n.note === oldValue);
|
||||
pagingComponent.value.items[i] = {
|
||||
...pagingComponent.value.items[i],
|
||||
note: newValue,
|
||||
};
|
||||
const noteUpdated = (item, note) => {
|
||||
pagingComponent.value?.updateItem(item.id, old => ({
|
||||
...old,
|
||||
note: note,
|
||||
}));
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
|
|
|
@ -205,7 +205,6 @@ const prepend = (item) => {
|
|||
// TODO
|
||||
} else {
|
||||
const isTop = isBackTop.value || (document.body.contains(rootEl.value) && isTopVisible(rootEl.value));
|
||||
console.log(item, top);
|
||||
|
||||
if (isTop) {
|
||||
// Prepend the item
|
||||
|
@ -236,7 +235,15 @@ const append = (item) => {
|
|||
items.value.push(item);
|
||||
};
|
||||
|
||||
watch(props.pagination.params, init, { deep: true });
|
||||
const updateItem = (id, replacer: (item: any) => any): void => {
|
||||
const i = items.value.findIndex(item => item.id === id);
|
||||
items.value[i] = replacer(items.value[i]);
|
||||
};
|
||||
|
||||
if (props.pagination.params && isRef(props.pagination.params)) {
|
||||
watch(props.pagination.params, init, { deep: true });
|
||||
}
|
||||
|
||||
watch(queue, (a, b) => {
|
||||
if (a.length === 0 && b.length === 0) return;
|
||||
emit('queue', queue.value.length);
|
||||
|
@ -253,11 +260,11 @@ onDeactivated(() => {
|
|||
});
|
||||
|
||||
defineExpose({
|
||||
items,
|
||||
reload,
|
||||
fetchMoreAhead,
|
||||
prepend,
|
||||
append,
|
||||
updateItem,
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
@ -1,19 +1,42 @@
|
|||
<template>
|
||||
<MkSpacer :content-max="800">
|
||||
<XNotes :pagination="pagination" :detail="true" :prop="'note'"/>
|
||||
<MkPagination ref="pagingComponent" :pagination="pagination">
|
||||
<template #empty>
|
||||
<div class="_fullinfo">
|
||||
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
|
||||
<div>{{ $ts.noNotes }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #default="{ items }">
|
||||
<XList v-slot="{ item }" :items="items" :direction="'down'" :no-gap="false" :ad="false">
|
||||
<XNote :key="item.id" :note="item.note" :class="$style.note" @update:note="noteUpdated(item, $event)"/>
|
||||
</XList>
|
||||
</template>
|
||||
</MkPagination>
|
||||
</MkSpacer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import XNotes from '@/components/notes.vue';
|
||||
import { ref } from 'vue';
|
||||
import MkPagination from '@/components/ui/pagination.vue';
|
||||
import XNote from '@/components/note.vue';
|
||||
import XList from '@/components/date-separated-list.vue';
|
||||
import * as symbols from '@/symbols';
|
||||
import { i18n } from '@/i18n';
|
||||
|
||||
const pagination = {
|
||||
endpoint: 'i/favorites',
|
||||
endpoint: 'i/favorites' as const,
|
||||
limit: 10,
|
||||
params: () => ({
|
||||
}),
|
||||
};
|
||||
|
||||
const pagingComponent = ref<InstanceType<typeof MkPagination>>();
|
||||
|
||||
const noteUpdated = (item, note) => {
|
||||
pagingComponent.value?.updateItem(item.id, old => ({
|
||||
...old,
|
||||
note: note,
|
||||
}));
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
|
@ -24,3 +47,10 @@ defineExpose({
|
|||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.note {
|
||||
background: var(--panel);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
</style>
|
Loading…
Reference in a new issue