42 lines
820 B
Vue
42 lines
820 B
Vue
<script setup>
|
|
const props = defineProps({
|
|
totalItemsCount: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
itemsLength: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
itemsPerPage: {
|
|
type: Number,
|
|
required: false,
|
|
default: 5,
|
|
},
|
|
isQueryRunning: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
|
|
const emits = defineEmits(["load-more"]);
|
|
const loadMore = () => {
|
|
emits("load-more", props.itemsPerPage);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<slot name="items"/>
|
|
<slot name="skeleton" v-if="isQueryRunning"/>
|
|
|
|
<div class="text-center q-my-md">
|
|
<q-btn color="primary" :loading="isQueryRunning" rounded size="lg" icon="expand_more" @click="loadMore()" v-if="totalItemsCount > itemsLength">
|
|
<slot name="loadMoreText"/>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</template>
|