vib/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages 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
Show stats 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 pagingComponent = ref<InstanceType<typeof MkPagination>>();
const updated = (oldValue, newValue) => { const updated = (oldValue, newValue) => {
const i = pagingComponent.value.items.findIndex(n => n === oldValue); pagingComponent.value?.updateItem(oldValue.id, () => newValue);
pagingComponent.value.items[i] = newValue;
}; };
defineExpose({ defineExpose({

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

@ -9,7 +9,7 @@
<template #default="{ items: notifications }"> <template #default="{ items: notifications }">
<XList v-slot="{ item: notification }" class="elsfgstc" :items="notifications" :no-gap="true"> <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"/> <XNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="true" class="_panel notification"/>
</XList> </XList>
</template> </template>
@ -62,12 +62,11 @@ const onNotification = (notification) => {
} }
}; };
const noteUpdated = (oldValue, newValue) => { const noteUpdated = (item, note) => {
const i = pagingComponent.value.items.findIndex(n => n.note === oldValue); pagingComponent.value?.updateItem(item.id, old => ({
pagingComponent.value.items[i] = { ...old,
...pagingComponent.value.items[i], note: note,
note: newValue, }));
};
}; };
onMounted(() => { onMounted(() => {

11
packages/client/src/components/ui/pagination.vue
View file

@ -205,7 +205,6 @@ const prepend = (item) => {
// TODO // TODO
} else { } else {
const isTop = isBackTop.value || (document.body.contains(rootEl.value) && isTopVisible(rootEl.value)); const isTop = isBackTop.value || (document.body.contains(rootEl.value) && isTopVisible(rootEl.value));
console.log(item, top);
if (isTop) { if (isTop) {
// Prepend the item // Prepend the item
@ -236,7 +235,15 @@ const append = (item) => {
items.value.push(item); items.value.push(item);
}; };
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(props.pagination.params, init, { deep: true });
}
watch(queue, (a, b) => { watch(queue, (a, b) => {
if (a.length === 0 && b.length === 0) return; if (a.length === 0 && b.length === 0) return;
emit('queue', queue.value.length); emit('queue', queue.value.length);
@ -253,11 +260,11 @@ onDeactivated(() => {
}); });
defineExpose({ defineExpose({
items,
reload, reload,
fetchMoreAhead, fetchMoreAhead,
prepend, prepend,
append, append,
updateItem,
}); });
</script> </script>

40
packages/client/src/pages/favorites.vue
View file

@ -1,19 +1,42 @@
<template> <template>
<MkSpacer :content-max="800"> <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> </MkSpacer>
</template> </template>
<script lang="ts" setup> <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 * as symbols from '@/symbols';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
const pagination = { const pagination = {
endpoint: 'i/favorites', endpoint: 'i/favorites' as const,
limit: 10, limit: 10,
params: () => ({ };
}),
const pagingComponent = ref<InstanceType<typeof MkPagination>>();
const noteUpdated = (item, note) => {
pagingComponent.value?.updateItem(item.id, old => ({
...old,
note: note,
}));
}; };
defineExpose({ defineExpose({
@ -24,3 +47,10 @@ defineExpose({
}, },
}); });
</script> </script>
<style lang="scss" module>
.note {
background: var(--panel);
border-radius: var(--radius);
}
</style>