54 lines
1.8 KiB
Vue
54 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
// import { userCards } from '@/_mockApis/components/widget/card';
|
|
const props = defineProps({
|
|
data:{
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
})
|
|
const userCards: any = computed(() => {
|
|
return props.data
|
|
});
|
|
|
|
const emit = defineEmits(['paginated']);
|
|
|
|
</script>
|
|
<template>
|
|
<v-row>
|
|
<v-col cols="12" md="3" sm="6" v-for="(card,index) in userCards" :key="card.title">
|
|
<v-lazy
|
|
:min-height="300"
|
|
:options="{ threshold: 1 }"
|
|
transition="fade-transition"
|
|
>
|
|
<v-card elevation="10" rounded="md">
|
|
<v-card-item>
|
|
<v-avatar size="80" >
|
|
<slot name="avatar" :prop="card"></slot>
|
|
</v-avatar>
|
|
<div class="mt-6">
|
|
<h5 class="text-h5 mb-2">
|
|
<slot name="title" :prop="card"></slot>
|
|
</h5>
|
|
<div class="d-flex align-center justify-space-between">
|
|
<div class="ml-2 d-flex ">
|
|
<slot name="left-side-content" :prop="card"></slot>
|
|
</div>
|
|
<slot name="right-side-content" :prop="card"></slot>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6">
|
|
<slot name="actions" :prop="card"></slot>
|
|
</div>
|
|
</v-card-item>
|
|
</v-card>
|
|
<div
|
|
v-if="index === userCards.length - 1"
|
|
v-intersect="emit('paginated',true)"
|
|
style="height: 1px"
|
|
></div>
|
|
</v-lazy>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|