Merge pull request #17 from BitTheCat/feat/add-pagination-summary-size

added size props for change summary & pagination size

Author: BitTheCat

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>

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bitthecat/tailwind-vue-data-table",
-    "version": "0.2.6",
+    "version": "0.2.7",
     "keywords": [
         "tailwindcss",
         "customisable",

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,15 +20,19 @@
                 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" />
             </svg>
         </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'])
 

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([