From 72328b0e33723e8e9cd098e203e7cf29f1ffaf0c Mon Sep 17 00:00:00 2001
From: michelelotito <m.lotito93@gmail.com>
Date: Fri, 20 Jan 2023 12:04:02 +0100
Subject: [PATCH] added size props for change summary & pagination size

---
 dev/App.vue                     |  2 +-
 package.json                    |  2 +-
 src/components/TVPagination.vue | 19 ++++++++++++++-----
 src/components/TVTable.vue      | 10 ++++++++--
 4 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/dev/App.vue b/dev/App.vue
index c034b31..f0be8f8 100644
--- a/dev/App.vue
+++ b/dev/App.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="py-8 px-8">
         <div class="font-semibold mb-2">
-            Tailwind Vue DataTable v0.2.6
+            Tailwind Vue DataTable v0.2.7
             <span class="text-xs font-light">by BitTheCat</span>
         </div>
         <div>
diff --git a/package.json b/package.json
index 4afe10d..0eaa6cb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@bitthecat/tailwind-vue-data-table",
-    "version": "0.2.6",
+    "version": "0.2.7",
     "keywords": [
         "tailwindcss",
         "customisable",
diff --git a/src/components/TVPagination.vue b/src/components/TVPagination.vue
index c08fffb..fed4de0 100644
--- a/src/components/TVPagination.vue
+++ b/src/components/TVPagination.vue
@@ -7,7 +7,7 @@
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="w-3 h-3"
+                :class="size === 'sm' ? 'w-3 h-3' : 'w-4 h-4'" 
                 @click="changePage(1)"
             >
                 <path stroke-linecap="round" stroke-linejoin="round" d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5" />
@@ -20,7 +20,7 @@
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="w-3 h-3"
+                :class="size === 'sm' ? 'w-3 h-3' : 'w-4 h-4'" 
                 @click="changePage(undefined, true)"
             >
                 <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
@@ -28,7 +28,11 @@
         </div>
         <div class="sm:flex hidden">
             <template v-for="page of pages" :key="`page_${page}`">
-                <p class="text-sm font-medium leading-none cursor-pointer link px-2" :class="paginationClass(page)" @click="changePage(page)">
+                <p 
+                    class="font-medium leading-none cursor-pointer link px-2" 
+                    :class="`${paginationClass(page)} ${size === 'sm' ? 'text-xs' : 'text-md'}`" 
+                    @click="changePage(page)"
+                >
                     {{ page }}
                 </p>
             </template>
@@ -40,7 +44,7 @@
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="w-3 h-3"
+                :class="size === 'sm' ? 'w-3 h-3' : 'w-4 h-4'" 
                 @click="changePage(undefined)"
             >
                 <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
@@ -53,7 +57,7 @@
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="w-3 h-3"
+                :class="size === 'sm' ? 'w-3 h-3' : 'w-4 h-4'" 
                 @click="changePage(totPages)"
             >
                 <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" />
@@ -83,6 +87,11 @@ const props = defineProps({
         type: Number,
         default: 1
     },
+    size: {
+        type: String,
+        default: 'md',
+        validator: (value) => ['sm', 'md'].includes(value)
+    }
 })
 const emit = defineEmits(['update:currentPage'])
 
diff --git a/src/components/TVTable.vue b/src/components/TVTable.vue
index d450641..35ff867 100644
--- a/src/components/TVTable.vue
+++ b/src/components/TVTable.vue
@@ -1,6 +1,6 @@
 <template>
-    <div v-if="!hidePagination && totalRows != 0 && !hideSummary && !busy" class="flex items-center justify-end mr-2 mb-2 text-xs font-small text-body">
-        <span>{{ getSummary() }}</span>
+    <div v-if="!hidePagination && totalRows != 0 && !hideSummary && !busy" class="flex items-center justify-end mr-2 mb-2 text-body">
+        <span :class="size === 'sm' ? 'text-xs' : 'text-md'">{{ getSummary() }}</span>
     </div>
     
     <div class="overflow-auto">
@@ -144,6 +144,7 @@
         v-model:currentPage="localCurrentPage"
         :total-rows="localTotalRows"
         :per-page="perPage"
+        :size="size"
     />
 </template>
 
@@ -207,6 +208,11 @@ const props = defineProps({
         type: String,
         default: 'Displaying _STR_FROM_ to _STR_TO_ of _STR_TOTAL_ items'
     },
+    size: {
+        type: String,
+        default: 'md',
+        validator: (value) => ['sm', 'md'].includes(value)
+    }
 })
 
 const emit = defineEmits([