edvoyui-component-library-test-flight 0.0.31 → 0.0.33

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "edvoyui-component-library-test-flight",
   "private": false,
-  "version": "0.0.31",
+  "version": "0.0.33",
   "type": "module",
   "files": [
     "dist/",

package/src/components/HelloWorld.vue

@@ -13,8 +13,8 @@
   <div class="h-[clac(100svh-64px)] w-full px-10 py-8 max-w-screen-xl mx-auto">
     <h1 class="mb-2 font-semibold text-gray-900 tetx-lg">Edvoy UI Componnet</h1>
 
-    <Delete />
 
+    <Delete />
     <div class="grid gap-4 sm:grid-cols-2 place-items-start">
       <div
         class="w-full max-w-screen-xl col-span-2 p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
@@ -827,6 +827,7 @@
             <div class="py-4">
       <EUITable
         :checkable="true"
+        :table-loading="loading"
         paginated
         :checked-rows.sync="checkedRows"
         backend-pagination
@@ -837,6 +838,7 @@
         :default-sort-direction="defaultSortOrder"
         default-sort=""
         :current-page="offset"
+        @changePage="onPageChange"
         @sort="onSort"
         @mouseenter="select"
         @mouseleave="(selectedIndex = null), (selected = null)"
@@ -896,9 +898,9 @@ import { capitalizeText } from "../utils/lodash";
 import ChevronDownStroke from '../assets/svg/ChevronDownStroke.vue';
 import EUIMultiDropdown from './dropdown/EUIMultiDropdown.vue';
 import Delete from "./delete.vue";
-
 const mobileNumber = ref("+91 8667444951");
 const datepicker = ref(new Date());
+const loading = ref(false)
 
 const form = reactive({
   input: "Lorem ipsum dolor sit",
@@ -930,6 +932,15 @@ const onSort = (field: string, order: string) => {
   });
 };
 
+const onPageChange = (offsetData: number) => {
+  offset.value = offsetData;
+  loading.value = true
+  console.log("@changePage:", offsetData);
+   setTimeout(() => {
+    loading.value = false
+  }, 500);
+};
+
 // TODO: Multi dropdown menu clicked access
 const menubar = ref([
   { text: "Students" },

package/src/components/table/EUITable.vue

@@ -1,6 +1,13 @@
 <template>
   <div>
-    <div class="relative w-full mx-auto overflow-hidden">
+     <template v-if="loading">
+        <div :class="['overflow-hidden relative z-0 isolate bg-white backdrop-blur border border-gray-200 rounded-xl transition-colors duration-150 ease-in-out', tableHeight ? tableHeight : 'h-[calc(100svh-9rem)] max-h-[calc(100svh-9rem)]']">
+          <div class="absolute flex items-center z-[calc(infinity)] w-full h-auto pointer-events-none inset-0">
+            <EUICircleLoader />
+          </div>
+        </div>
+      </template>
+    <div v-else class="relative w-full mx-auto overflow-hidden">
       <div
         id="student-table"
         :class="['overflow-auto scrollbar--thin overscroll-none', tableHeight ? tableHeight : 'h-[calc(100svh-12rem)] max-h-[calc(100svh-12rem)]']"
@@ -88,20 +95,8 @@
             </tr>
           </thead>
           <tbody>
-            <template v-if="loading">
-              <tr class="norecords">
-                <td :colspan="headers.length">
-                  <div
-                    class="flex items-center justify-center min-h-96"
-                  >
-                    <EUICircleLoader />
-                  </div>
-                </td>
-              </tr>
-            </template>
-
             <template
-              v-else-if="computedItems.length > 0"
+              v-if="computedItems.length > 0"
               v-for="(row, rowIndex) in computedItems"
               :key="`table-row-${rowIndex}`"
             >