iceshrimp/packages/client/src/components/MkNotes.vue

75 lines
1.5 KiB
Vue
Raw Normal View History

<template>
2023-04-08 09:01:42 +09:00
<MkPagination ref="pagingComponent" :pagination="pagination">
<template #empty>
<div class="_fullinfo">
<img
src="/static-assets/badges/info.png"
class="_ghost"
alt="Info"
/>
<div>{{ i18n.ts.noNotes }}</div>
</div>
</template>
2021-04-17 00:12:50 +09:00
2023-04-08 09:01:42 +09:00
<template #default="{ items: notes }">
<div class="giivymft" :class="{ noGap }">
<XList
ref="notes"
v-slot="{ item: note }"
:items="notes"
:direction="pagination.reversed ? 'up' : 'down'"
:reversed="pagination.reversed"
:no-gap="noGap"
:ad="true"
class="notes"
>
<XNote
:key="note._featuredId_ || note._prId_ || note.id"
class="qtqtichx"
:note="note"
/>
</XList>
</div>
</template>
</MkPagination>
</template>
<script lang="ts" setup>
2023-04-08 09:01:42 +09:00
import { ref } from "vue";
import type { Paging } from "@/components/MkPagination.vue";
import XNote from "@/components/MkNote.vue";
import XList from "@/components/MkDateSeparatedList.vue";
import MkPagination from "@/components/MkPagination.vue";
import { i18n } from "@/i18n";
const props = defineProps<{
pagination: Paging;
noGap?: boolean;
}>();
const pagingComponent = ref<InstanceType<typeof MkPagination>>();
defineExpose({
pagingComponent,
});
</script>
2021-04-17 00:12:50 +09:00
<style lang="scss" scoped>
2021-08-14 22:35:15 +09:00
.giivymft {
2021-08-16 15:21:58 +09:00
&.noGap {
> .notes {
background: var(--panel);
border-radius: var(--radius);
2021-08-16 15:21:58 +09:00
}
}
&:not(.noGap) {
> .notes {
.qtqtichx {
background: var(--panel);
border-radius: var(--radius);
}
}
2021-08-14 22:35:15 +09:00
}
}
2021-04-17 00:12:50 +09:00
</style>