refactor(desk): improve v-gallery pagination

Author: zzhenryquezz

packages/desktop/components/v-card.vue

@@ -45,7 +45,7 @@ const colors = computed(() => {
 
 // classes
 const classes = computed(() => {
-    const result: string[] = []
+    const result: string[] = ['transition-all']
 
     if (props.color) {
         result.push(colors.value[props.color] || props.color)

packages/desktop/components/v-gallery.vue

@@ -89,9 +89,9 @@ const size = computed(() => {
 
 // pagination
 
-const pagination = ref({ limit: +props.limit })
+const pagination = ref({ page: 1 })
 
-const visibleItems = computed(() => props.items.slice(0, pagination.value.limit))
+const visibleItems = computed(() => props.items.slice(0, pagination.value.page * +props.limit))
 </script>
 
 <template>
@@ -147,15 +147,14 @@ const visibleItems = computed(() => props.items.slice(0, pagination.value.limit)
         />
 
         <v-card
-            v-if="items.length > pagination.limit"
+            v-if="visibleItems.length < items.length"
             width="100%"
-            class="cursor-pointer"
+            class="cursor-pointer hover:bg-b-secondary"
             v-bind="bindings.card"
-            :color="color"
-            @click="pagination.limit = pagination.limit + Number(limit)"
+            @click="pagination.page++"
         >
-            <v-card-content class="items-center text-sm">
-                <fa-icon icon="arrow-down" class="mr-4" />
+            <v-card-content class="items-center justify-center text-sm text-t-secondary">
+                <v-icon name="arrow-down" class="mr-4" />
 
                 <span>{{ `${$t('loadMore')} (${visibleItems.length}/${items.length})` }}</span>
             </v-card-content>

packages/examples/watch-list/medias/.is/views.json

@@ -43,6 +43,7 @@
         "component": "group",
         "id": "default",
         "label": "",
+        "selected": "6ab296a7-aa37-4d21-b9cc-c077150c8345",
         "viewIds": [
             "77e4ca35-a424-4a98-aa0c-5e2c40b018ef",
             "6ab296a7-aa37-4d21-b9cc-c077150c8345",
@@ -134,7 +135,7 @@
                 "height": "260"
             }
         },
-        "limit": 100
+        "limit": 20
     },
     {
         "component": "gallery",
@@ -195,7 +196,8 @@
                 "width": "200",
                 "height": "260"
             }
-        }
+        },
+        "limit": 6
     },
     {
         "component": "gallery",