sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

wip: migrate paging components to composition api

Browse Source
This commit is contained in:
syuilo
2022-01-10 00:45:20 +09:00
parent d3315bda11
commit f9882a0c5c
4 changed files with 52 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/client/src/components/notes.vue
View File

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

13
packages/client/src/components/notifications.vue
View File

@ -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(() => {

13
packages/client/src/components/ui/pagination.vue
View File

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