Merge pull request #6 from BitTheCat/fix/currentPage-add-new-features

BitTheCat · web-flow · commit 17a353ddf521 · 2022-11-14T18:44:42.000+01:00
TVTable v2
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@ Contains the TVPaginator component that can be disabled via prop or used in stan
 <hr>
 
 #### ❗️ *__Documentation soon available__* 
-##### For now, check under dev/TableShow.vue to see the table in action
+##### For now, check under dev/TableShow.vue to see the table in action or [here](https://bitthecat.github.io/tailwind-vue-data-table.html)
 
 <hr>
 
@@ -32,107 +32,6 @@ content: [
 import { TVTable } from '@bitthecat/tailwind-vue-data-table' 
 ```
 
-### Next additions
-- Pagination (can be disabled) ✔️
- 
-<img src="https://github.com/BitTheCat/tailwind-vue-data-table/blob/main/assets/tvpagination.jpg"/>
-
-- Select row column (with checkbox) ✔️
-
-<img src="https://github.com/BitTheCat/tailwind-vue-data-table/blob/main/assets/tvtable_checkbox.jpg"/>
-
-- Row detail ✔️
-
-<img src="https://github.com/BitTheCat/tailwind-vue-data-table/blob/main/assets/tvtable_row_details.jpg"/>
-  
-- Row Clicked event ✔️
-
-- Busy state ✔️
-<img src="https://github.com/BitTheCat/tailwind-vue-data-table/blob/main/assets/tvtable_busy_state.jpg"/>
-  
-- Additional rows up the header ✔️
-
-- Select rows (visual) ✔️
-
-- Footer ✔️
-
-- Provide item from api url
-
-- ...
-  
-<hr>
-
-## Table
-### Props
-
-| Props | Default | Description |
-| --- | --- | --- |
-| currentPage | 1 | current displayed page (used by the paginator) |
-| totalRows | 0 | total number of rows (used by the paginator) |
-| perPage | 15 | number of rows displayed for page (used by the paginator) |
-| hidePagination | false | enables for hide paginator |
-| multipleSortable | false | enables multiple sortable for table header |
-| enableCheck | false | enables checkbox for table row |
-| busy | false | enables spinner for loading data |
-
-### Slots
-
-| Props | Description |
-| --- | --- |
-| items | table data |
-| fields | data fields |
-| #cell:FIELD_NAME | used for overwrite |
-| #row-details | row details, you need to use row.toggleDetails(row.item) within a template that contains an icon/button to toggle it |
-| #header-row | used for additional row up the header |
-| #footer-row | used for show table footer row |
-
-slot 'cell:' has item or data props
-
-item retrieves the row value
-
-``` html
-    <template #cell:username="{ item }">
-        {{ item.emoji }} - {{ item.username }}
-    </template>
-```
-
-data retrieves the field value
-
-``` html
-    <template #cell:username="{ data }">
-        {{ data }}
-    </template>
-```
-
-### Events
-
-| Event | Description |
-| --- | --- |
-| updateSortable | emit the sortable field/fields |
-| changePage | emit the page change |
-| checkRow | emit the row item when user click on row checkbox |
-| rowClicked | emit the row item when user click on row |
-
-##### Notes
-
-##### Any __@click__ event of elements within the row triggers the rowClicked event, to get around this we need to __use @click.stop to prevent the propagation of the event__
-
-<hr>
-
-## Fields 
-### Props
-
-| Props | Description |
-| --- | --- |
-| key | th Title |
-| label | index of value |
-| sortable | the default setting is false, if set to true a symbol appears for sorting |
-| thStyle | used for overwrite the th style |
-| tdStyle | used for overwrite the td style |
-| thClass | used for overwrite the th class |
-| tdClass | used for overwrite the td class |
-| _showDetails | used for show row details (default false) |
-
 <hr>
 
 This project is licensed under the MIT license. See [LICENSE](LICENSE).
diff --git a/dev/App.vue b/dev/App.vue
@@ -3,7 +3,7 @@
     <div class="flex max-w-2xl mx-auto mb-10 space-x-4 sm:mt-10">
       <div class="flex flex-col flex-grow">
         <div class="font-semibold mb-2">
-            Tailwind Vue DataTable
+            Tailwind Vue DataTable v2
             <span class="text-xs font-light">by BitTheCat</span>
         </div>
         <div>
diff --git a/dev/TableShow.vue b/dev/TableShow.vue
@@ -7,6 +7,10 @@
                 :items="cloneItems"
                 :fields="fieldsSimple"
                 :busy="busy"
+                :body-class="'text-lg'"
+                :spinner-class="'text-green-500'"
+                :table-class="'overflow-hidden shadow ring-1 ring-gray-100 md:rounded-lg'"
+                :head-class="'bg-yellow-600'"
                 @check-row="checkRow"
                 @row-clicked="checkRow"
             />
@@ -60,6 +64,7 @@
 
             <div class="text-left mt-2">
                 Selected: {{ selectRow }}
+                CurrentPage: {{ currentPage }}
             </div>
         </div>
     </div>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@bitthecat/tailwind-vue-data-table",
-    "version": "0.1.8",
+    "version": "0.2.0",
     "keywords": [
         "tailwindcss",
         "vue",
diff --git a/src/components/TVTable.vue b/src/components/TVTable.vue
@@ -3,8 +3,8 @@
         <span>Displaying {{ fromRow + 1 }} to {{ toRow }} of {{ totalRows }} items</span>
     </div>
     
-    <table ref="TVTABLE" class="min-w-full" v-bind="attrs">
-        <thead class="bg-gray-300 border divide-x divide-y">
+    <table ref="TVTABLE" class="min-w-full" :class="tableClass">
+        <thead class="bg-gray-300 text-xs border divide-x divide-y" :class="headClass">
             <slot v-if="slots['header-row']" name="header-row" />
             <tr class="divide-x divide-y">
                 <th 
@@ -16,7 +16,7 @@
                 <th
                     v-for="field in fields"
                     :key="field.label"
-                    class="px-2 py-1.5 text-xs font-medium uppercase"
+                    class="px-2 py-1.5 font-medium uppercase"
                     :class="field.thClass"
                     :style="field.thStyle"
                 >
@@ -52,12 +52,12 @@
                 </th>
             </tr>
         </thead>
-        <tbody class="px-2 py-1.5 text-left text-xs font-medium border">
+        <tbody class="px-2 py-1.5 text-left text-xs font-medium border" :class="bodyClass">
             <tr v-if="busy">
                     <td :colspan="enableCheck ? fields.length + 1 : fields.length">
                         <div class="flex justify-center mb-3 mt-3">
                             <slot name="busy">
-                                <svg class="animate-spin -ml-1 mr-3 h-6 w-6 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                <svg class="animate-spin -ml-1 mr-3 h-6 w-6 text-black" :class="spinnerClass" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                     <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                     <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                 </svg>
@@ -68,7 +68,7 @@
             <template v-for="(item, index) in items" v-else :key="item.id">
                 <tr 
                     :id="`TVTABLE_row_${index}_${item.id}`"  
-                    class="divide-x divide-y last:border-b-0 px-2 py-1.5 text-left text-xs font-medium border hover:bg-gray-400/50"
+                    class="divide-x divide-y last:border-b-0 px-2 py-1.5 text-left font-medium border hover:bg-gray-400/50"
                     :class="`${index % 2 ? 'bg-gray-300/50' : 'bg-gray-100/50'}`"
                     @click="rowClicked(item)"
                 >
@@ -107,7 +107,7 @@
                 </tr>
             </template>
         </tbody>
-        <tfoot class="bg-gray-300 border divide-x divide-y">
+        <tfoot class="bg-gray-300 border divide-x divide-y" :class="footerClass">
             <slot v-if="slots['footer-row']" name="footer-row" />
         </tfoot>
     </table>
@@ -125,7 +125,8 @@ import {computed, defineComponent, ref, useAttrs, useSlots, watch} from 'vue';
 import TVPagination from './TVPagination.vue';
 
 defineComponent({
-    name: 'TVTable'
+    name: 'TVTable',
+    inheritAttrs: false
 })
 
 const slots = useSlots();
@@ -152,17 +153,38 @@ const props = defineProps({
         type: Number,
         default: 15
     },
+    tableClass: {
+        type: String,
+        default: ''
+    },
+    headClass: {
+        type: String,
+        default: ''
+    },
+    bodyClass: {
+        type: String,
+        default: ''
+    },
+    footerClass: {
+        type: String,
+        default: ''
+    },
+    spinnerClass: {
+        type: String,
+        default: ''
+    },
     hidePagination: Boolean,
     multipleSortable: Boolean,
     enableCheck: Boolean,
     busy: Boolean,
 })
 
 const emit = defineEmits([
+    'update:currentPage',
     'updateSortable', 
     'changePage', 
     'checkRow', 
-    'rowClicked'
+    'rowClicked',
 ])
 
 
@@ -223,6 +245,7 @@ const checkSelectedForRow = (item) => {
 watch(() => localCurrentPage.value, (value) => {
     refreshCounter()
     emit('changePage', {page: value, from: fromRow.value, to: toRow.value})
+    emit('update:currentPage', value)
 }, {immediate: true})
 
 </script>

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@bitthecat/tailwind-vue-data-table",`
`3`		`- "version": "0.1.8",`
	`3`	`+ "version": "0.2.0",`
`4`	`4`	`"keywords": [`
`5`	`5`	`"tailwindcss",`
`6`	`6`	`"vue",`