edvoyui-component-library-test-flight 0.0.27 → 0.0.28

package/package.json

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

package/src/components/table/EUIDashboardTable.vue

@@ -3,7 +3,7 @@
     <div class="relative w-full mx-auto overflow-hidden">
       <div
         id="dashboard-table"
-        class="overflow-auto max-h-[calc(100svh-13rem)] scrollbar--thin overscroll-none"
+        :class="['overflow-auto scrollbar--thin overscroll-none', tableHeight ? tableHeight : 'h-[calc(100svh-13rem)] max-h-[calc(100svh-13rem)]']"
         ref="tableContainer"
         @scroll="handleScroll"
       >
@@ -63,7 +63,7 @@
               <tr class="norecords">
                 <td :colspan="headers.length">
                   <div
-                    class="flex items-center justify-center text-xl font-medium text-gray-500 min-h-96"
+                    class="flex items-center justify-center min-h-96"
                   >
                     <EUICircleLoader />
                   </div>
@@ -114,10 +114,9 @@
                 <slot name="expanded" :row="row" :rowIndex="rowIndex"></slot>
               </template>
             </template>
-
-            <template v-if="computedItems.length === 0">
+            <template v-else-if="computedItems.length === 0">
               <tr class="norecords">
-                <td :colspan="headers.length">
+                <td :colspan="checkable === true ? headers.length + 1 : headers.length">
                   <div
                     class="flex items-center justify-center text-xl font-medium text-gray-500 min-h-96"
                   >
@@ -216,7 +215,12 @@ const props = defineProps({
     default: () => () => false,
   },
   isRowCheckable: { type: Function, default: () => true },
-  tableLoading: { type: Boolean, default: true },
+  tableHeight: {
+    type: String,
+    required: false,
+    default: ""
+  },
+  tableLoading: { type: Boolean, default: false },
 });
 const {
   defaultSort,
@@ -238,9 +242,7 @@ const currentSortDir = ref(defaultSortDirection.value);
 const newCheckedRows = ref([...checkedRows.value]);
 const newCurrentPage = ref(currentPage.value);
 const lastCheckedRowIndex = ref();
-
 const limit = ref(props.perPage);
-
 const loading = computed(() => props.tableLoading);
 
 // Computed Property

package/src/components/table/EUITable.vue

@@ -88,7 +88,20 @@
             </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-for="(row, rowIndex) in computedItems"
               :key="`table-row-${rowIndex}`"
             >
@@ -123,9 +136,8 @@
                 <slot name="expanded" :row="row" :rowIndex="rowIndex"></slot>
               </template>
             </template>
-          </tbody>
-          <tbody v-if="computedItems.length === 0">
-            <tr class="norecords">
+            <template v-else-if="computedItems.length === 0">
+              <tr class="norecords">
               <td :colspan="checkable === true ? headers.length + 1 : headers.length">
                 <div
                   class="flex items-center justify-center text-xl font-medium text-gray-500 min-h-96"
@@ -134,7 +146,9 @@
                 </div>
               </td>
             </tr>
+            </template>
           </tbody>
+
         </table>
       </div>
       <div
@@ -179,6 +193,7 @@ import EUITableCheckbox from "./EUITableCheckbox.vue";
 import EUIPageLimit from "./EUIPageLimit.vue";
 import EUIStudentPagination from "./EUIStudentPagination.vue";
 import { capitalizeText } from "../../utils/lodash";
+import EUICircleLoader from "../loader/EUICircleLoader.vue";
 
 interface Header {
   value: string;
@@ -216,6 +231,7 @@ const props = defineProps({
     required: false,
     default: ""
   },
+  tableLoading: { type: Boolean, default: false },
 });
 
 const {
@@ -233,14 +249,13 @@ const {
   customIsChecked,
 } = toRefs(props);
 
-
-
 const currentSort = ref(defaultSort.value);
 const currentSortDir = ref(defaultSortDirection.value);
 const newCheckedRows = ref([...checkedRows.value]);
 const newCurrentPage = ref(currentPage.value);
 const lastCheckedRowIndex = ref();
 const limit = ref(props.perPage);
+const loading = computed(() => props.tableLoading);
 
 // Computed Property
 const filteredItems = computed(() => {