Merge pull request #19 from BitTheCat/feat/table-paginator-size

removed size prop for css style

Author: BitTheCat

package.json

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

src/components/TVPagination.vue

@@ -7,7 +7,7 @@
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                :class="size === 'sm' ? 'w-3 h-3' : 'w-4 h-4'" 
+                class="tv-paginator-size" 
                 @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="size === 'sm' ? 'w-3 h-3' : 'w-4 h-4'" 
+                class="tv-paginator-size" 
                 @click="changePage(undefined, true)"
             >
                 <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
@@ -30,7 +30,7 @@
             <template v-for="page of pages" :key="`page_${page}`">
                 <p 
                     class="font-medium leading-none cursor-pointer link px-2" 
-                    :class="`${paginationClass(page)} ${size === 'sm' ? 'text-xs' : 'text-md'}`" 
+                    :class="`${paginationClass(page)} tv-paginator-text`" 
                     @click="changePage(page)"
                 >
                     {{ page }}
@@ -44,7 +44,7 @@
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                :class="size === 'sm' ? 'w-3 h-3' : 'w-4 h-4'" 
+                class="tv-paginator-size" 
                 @click="changePage(undefined)"
             >
                 <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
@@ -57,7 +57,7 @@
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                :class="size === 'sm' ? 'w-3 h-3' : 'w-4 h-4'" 
+                class="tv-paginator-size" 
                 @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" />
@@ -87,11 +87,6 @@ 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-body">
-        <span :class="size === 'sm' ? 'text-xs' : 'text-md'">{{ getSummary() }}</span>
+        <span class="tv-summary-size">{{ getSummary() }}</span>
     </div>
 
     <div class="overflow-auto">
@@ -144,7 +144,6 @@
         v-model:currentPage="localCurrentPage"
         :total-rows="localTotalRows"
         :per-page="perPage"
-        :size="size"
     />
 </template>
 
@@ -208,11 +207,6 @@ 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([

src/css/app.css

@@ -19,9 +19,21 @@
 }
 
 .tv-td {
-    @apply px-2 py-1.5 align-top table-cell last:border-b-0
+    @apply px-2 py-3.5 align-top table-cell last:border-b-0 text-2xl md:text-sm
 }
 
 .tv-tfoot {
     @apply text-xs bg-gray-300 border divide-x divide-y
+}
+
+.tv-summary-size {
+    @apply text-lg md:text-sm
+}
+
+.tv-paginator-size {
+    @apply w-6 h-6 md:w-4 md:h-4
+}
+
+.tv-paginator-text {
+    @apply text-lg md:text-sm
 }