halaman dipisah

components/widgets2/cards/SettingCards.vue

@@ -0,0 +1,59 @@
+<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>

components/widgets2/cards/UserCards.vue

@@ -10,11 +10,17 @@ 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 in userCards" :key="card.title">
+        <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" > 
@@ -36,6 +42,12 @@ const userCards: any = computed(() => {
                     </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>