60 lines
1.7 KiB
Vue
60 lines
1.7 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" class="mt-6">
|
|
<v-card-item class="text-center">
|
|
<!-- <h5 class="text-h5 mb-6"><slot name="title" :prop="card"></slot></h5> -->
|
|
<!-- <v-badge content="1" color="error" offset-x="18" offset-y="18"> -->
|
|
<v-avatar size="140">
|
|
<slot name="avatar" :prop="card"></slot>
|
|
</v-avatar>
|
|
<!-- </v-badge> -->
|
|
|
|
<h5 class="text-h5 pt-3 mt-3 mb-0">
|
|
<slot name="title" :prop="card"></slot>
|
|
</h5>
|
|
<p class="text-body-1 mt-3 textSecondary">
|
|
<slot name="content" :prop="card"></slot>
|
|
</p>
|
|
<div class="d-flex justify-center gap-3 mt-4">
|
|
<slot name="actions" :prop="card"></slot>
|
|
<!-- <v-btn flat color="primary" size="large">accept</v-btn>
|
|
<v-btn flat variant="tonal" size="large" color="error">remove</v-btn> -->
|
|
</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>
|