47 lines
1.2 KiB
Vue
47 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
const props = withDefaults(defineProps<{
|
|
shown: number
|
|
total?: number | null
|
|
canLoadMore?: boolean
|
|
loading?: boolean
|
|
pageSize?: number
|
|
itemLabel?: string
|
|
}>(), {
|
|
total: null,
|
|
canLoadMore: false,
|
|
loading: false,
|
|
pageSize: 12,
|
|
itemLabel: 'элементов',
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
loadMore: []
|
|
}>()
|
|
|
|
const summaryText = computed(() => {
|
|
if (typeof props.total === 'number') {
|
|
return `Показано ${props.shown} из ${props.total} ${props.itemLabel}`
|
|
}
|
|
|
|
return `Загружено ${props.shown} ${props.itemLabel}`
|
|
})
|
|
|
|
const buttonText = computed(() => props.loading ? 'Загружаем...' : `Загрузить ещё ${props.pageSize}`)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col items-center gap-3 rounded-[28px] bg-white/82 px-5 py-5 text-center text-sm text-[#6f6353] shadow-none">
|
|
<p>{{ summaryText }}</p>
|
|
<button
|
|
v-if="canLoadMore"
|
|
type="button"
|
|
class="btn rounded-full border-0 bg-[#2f2418] px-6 text-white hover:bg-[#493824]"
|
|
:disabled="loading"
|
|
@click="emit('loadMore')"
|
|
>
|
|
<span v-if="loading" class="loading loading-spinner loading-sm" />
|
|
{{ buttonText }}
|
|
</button>
|
|
</div>
|
|
</template>
|