@webilio-xyz/webilio-vue 1.0.11 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webilio-xyz/webilio-vue",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "type": "module",
   "scripts": {
     "dev": "vite --host 0.0.0.0",

package/src/Components/Modal/ModalComponent.vue

@@ -115,8 +115,14 @@ onUnmounted(() => {
                                 />
                             </div>
                         </div>
-                        <div>
+                        <div class="flex flex-col space-y-2">
+                          <div>
                             <slot name="content" />
+                          </div>
+
+                          <div>
+                            <slot name="footer" />
+                          </div>
                         </div>
                     </template>
                 </div>

package/src/Components/Table/InertiaTableComponent.vue

@@ -29,6 +29,22 @@ const props = defineProps({
   footerClass: {
     type: String,
     default: ''
+  },
+  headerClass: {
+    type: String,
+    default: ''
+  },
+  trHeadClass: {
+    type: String,
+    default: ''
+  },
+  paginationClass: {
+      type: String,
+      default: ''
+  },
+  currentPage: {
+    type: Number,
+    default: 1
   }
 })
 
@@ -42,7 +58,9 @@ const computedResults = computed(() => {
 
 const dataLoading = ref(false);
 
-const currentPage = ref(get(data, 'current_page', 1));
+const tableCurrentPage = ref(get(data, 'current_page', props.currentPage));
+
+
 
 defineExpose({
   getData
@@ -54,7 +72,7 @@ function getData() {
       window.location.pathname,
       {
         filters: {...props.additionalFilters, ...filters.value},
-        page: currentPage.value
+        page: tableCurrentPage.value
       },
       {
         preserveState: true,
@@ -73,25 +91,35 @@ function getData() {
 const debouncedGetData = debounce(getData, 500);
 
 watch(props, debouncedGetData, {deep: true});
-watch(currentPage, debouncedGetData)
-
+watch(tableCurrentPage, debouncedGetData)
+watch(() => props.currentPage, (newPage) => {
+    tableCurrentPage.value = newPage
+})
 </script>
 
 <template>
   <TableComponent
+      ref="props.table"
       :is-loading="dataLoading"
       :data="computedResults"
       :columns="columns"
       :class="tableClass"
+      :headerClass="headerClass"
+      :trHeadClass="trHeadClass"
   />
-  <div class="flex items-center" :class="footerClass">
-    <div class="flex-grow flex">
-      <span class="py-2">{{ $t('table.nbResults', {total: get(data, 'total', 0)}) }}</span>
-    </div>
-
-    <TablePaginationComponent
-        :last-page="data.last_page"
-        v-model="currentPage"
-    />
-  </div>
+
+    <slot name="pagination">
+        <div class="flex items-center" :class="footerClass">
+            <div class="flex-grow flex">
+                <span class="py-2">{{ $t('table.nbResults', {total: get(data, 'total', 0)}) }}</span>
+            </div>
+
+            <TablePaginationComponent
+                :last-page="data.last_page"
+                v-model="tableCurrentPage"
+                :class="footerClass"
+            />
+        </div>
+    </slot>
+
 </template>

package/src/Components/Table/TableComponent.vue

@@ -19,6 +19,10 @@ const props = defineProps({
   headerClass: {
     type: String,
     default: ''
+  },
+  trHeadClass: {
+    type: String,
+    default: ''
   }
 });
 
@@ -26,7 +30,7 @@ const props = defineProps({
 
 <template>
   <table class="overflow-x-auto table w-full relative">
-    <TableHeaderComponent :columns="columns" :class="headerClass"/>
+    <TableHeaderComponent :columns="columns" :headerClass="headerClass" :trClass="trHeadClass"/>
     <template v-if="data?.length && !isLoading">
       <template v-for="(datum, i) in data" :key="i">
         <TableRowComponent

package/src/Components/Table/TableHeaderComponent.vue

@@ -7,6 +7,14 @@ const props = defineProps({
     type: Columns,
     default: []
   },
+  trClass: {
+    type: String,
+    default: ''
+  },
+  headerClass: {
+    type: String,
+    default: 'sticky border-b-2 h-20 bg-gray-100 z-10 text-gray-700 text-xs font-medium uppercase shadow-md'
+  }
 })
 
 const renderedColumns = computed(() => {
@@ -15,8 +23,8 @@ const renderedColumns = computed(() => {
 </script>
 
 <template>
-  <thead class="sticky border-b-2 h-20 bg-gray-100 z-10 text-gray-700 text-xs font-medium uppercase shadow-md">
-  <tr>
+  <thead :class="headerClass">
+  <tr :class="trClass">
     <th
         v-for="column in renderedColumns"
         :key="column.key"

package/src/Components/Table/TablePaginationComponent.vue

@@ -12,9 +12,27 @@ const props = defineProps({
     type: Number,
     default: 1
   },
+   buttonClass: {
+    type: String,
+    default: ''
+  },
+    buttonLrClass: {
+        type: String,
+        default: ''
+    },
+    buttonPageClass: {
+        type: String,
+        default: ''
+    },
 });
 
 const currentPage = computed(() => props.modelValue);
+const lrClassButtons = computed(() => {
+    return `${props.buttonClass} ${props.buttonLrClass}`;
+})
+const pageClassButtons = computed(() => {
+    return `${props.buttonClass} ${props.buttonPageClass}`;
+})
 
 const emits = defineEmits(['update:modelValue']);
 
@@ -28,17 +46,19 @@ const changePage = (page) => {
 <template>
   <div class="flex space-x-1.5">
     <Button
+        :class="lrClassButtons"
         :disabled="currentPage === 1"
         @click="changePage(currentPage - 1)"
     >
       <ChevronLeftIcon class="w-5 h-5" />
     </Button>
     <template v-if="currentPage === 1">
-      <Button disabled>
+      <Button :class="pageClassButtons" disabled>
         {{ currentPage }}
       </Button>
       <template v-if="lastPage < 5">
         <Button
+            :class="pageClassButtons"
             v-for="pageId in range(currentPage + 1, lastPage + 1)"
             :key="pageId"
             @click="changePage(pageId)"
@@ -48,6 +68,7 @@ const changePage = (page) => {
       </template>
       <template v-else>
         <Button
+            :class="pageClassButtons"
             v-for="pageId in range(currentPage + 1, currentPage + 3)"
             :key="pageId"
             @click="changePage(pageId)"
@@ -55,7 +76,7 @@ const changePage = (page) => {
           {{ pageId }}
         </Button>
         <span class="py-2">...</span>
-        <Button @click="changePage(lastPage)">
+        <Button :class="pageClassButtons" @click="changePage(lastPage)">
           {{ lastPage }}
         </Button>
       </template>
@@ -63,6 +84,7 @@ const changePage = (page) => {
     <template v-else-if="currentPage === lastPage">
       <template v-if="lastPage < 5">
         <Button
+            :class="pageClassButtons"
             v-for="pageId in range(1, lastPage)"
             :key="pageId"
             @click="changePage(pageId)"
@@ -71,11 +93,12 @@ const changePage = (page) => {
         </Button>
       </template>
       <template v-else>
-        <Button @click="changePage(1)">
+        <Button :class="pageClassButtons" @click="changePage(1)">
           1
         </Button>
         <span class="py-2">...</span>
         <Button
+            :class="pageClassButtons"
             v-for="pageId in range(currentPage - 2, currentPage)"
             :key="pageId"
             @click="changePage(pageId)"
@@ -83,13 +106,13 @@ const changePage = (page) => {
           {{ pageId }}
         </Button>
       </template>
-      <Button disabled>
+      <Button :class="pageClassButtons" disabled>
         {{ currentPage }}
       </Button>
     </template>
     <template v-else>
       <template v-if="currentPage > 2">
-        <Button @click="changePage(1)">
+        <Button :class="pageClassButtons" @click="changePage(1)">
           1
         </Button>
         <span
@@ -98,16 +121,18 @@ const changePage = (page) => {
         >...</span>
       </template>
       <Button
+          :class="pageClassButtons"
           v-for="pageId in range(currentPage - 1, currentPage)"
           :key="pageId"
           @click="changePage(pageId)"
       >
         {{ pageId }}
       </Button>
-      <Button disabled>
+      <Button :class="pageClassButtons" disabled>
         {{ currentPage }}
       </Button>
       <Button
+          :class="pageClassButtons"
           v-for="pageId in range(currentPage + 1, currentPage + 2)"
           :key="pageId"
           @click="changePage(pageId)"
@@ -119,12 +144,13 @@ const changePage = (page) => {
                         v-if="currentPage < (lastPage - 2)"
                         class="py-2"
                     >...</span>
-        <Button @click="changePage(lastPage)">
+        <Button :class="pageClassButtons" @click="changePage(lastPage)">
           {{ lastPage }}
         </Button>
       </template>
     </template>
     <Button
+        :class="lrClassButtons"
         :disabled="currentPage === lastPage"
         @click="changePage(currentPage + 1)"
     >
@@ -135,4 +161,4 @@ const changePage = (page) => {
 
 <style scoped>
 
-</style>
+</style>

package/src/Demo/Modal/ModalComponentDemo.js

@@ -5,7 +5,7 @@ const show = ref(false);
 export default {
     component: ModalComponent,
     description: "Generic modal component",
-    importStatement: "import { ModalComponent } from from '@webilio-xyz/webilio-vue/Modal';",
+    importStatement: "import { ModalComponent } from '@webilio-xyz/webilio-vue/Modal';",
     propsToDemo: {
         'show': {
             props: {
@@ -24,6 +24,11 @@ export default {
                 'modelValue':'content'
             }
         },
+        'footer': {
+            props: {
+                'modelValue':'footer'
+            }
+        },
     },
     events: {
         close: () => {