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

package/dist/table/EUIDashboardTable.vue.d.ts

@@ -1,5 +1,5 @@
 export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/table/EUIDashboardTable.vue?vue&type=script&setup=true&lang.ts";
-import "/Volumes/work/repos/edvoy-ui-v2/src/components/table/EUIDashboardTable.vue?vue&type=style&index=0&scoped=210493c5&lang.scss";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/table/EUIDashboardTable.vue?vue&type=style&index=0&scoped=448c7bbf&lang.scss";
 declare const _default: any;
 export default _default;
 //# sourceMappingURL=EUIDashboardTable.vue.d.ts.map

package/package.json

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

package/src/components/datepicker/EUIDatepicker.vue

@@ -126,15 +126,17 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:modelValue"]);
 const { modelValue, isUtc, clearIcon } = toRefs(props);
-const startDate = ref(new Date());
-const endDate = ref(new Date(new Date().setDate(startDate.value.getDate() + 7)));
+// const startDate = ref(new Date());
+// const endDate = ref(new Date(new Date().setDate(startDate.value.getDate() + 7)));
 
-const time = ref({
-  hours: new Date().getHours(),
-  minutes: new Date().getMinutes()
-});
+// const time = ref({
+//   hours: new Date().getHours(),
+//   minutes: new Date().getMinutes()
+// });
+
+// const datepicker = ref( props.modelValue ? props.modelValue : props.timePicker ? time.value : props.range ? [startDate.value, endDate.value] : startDate.value);
 
-const datepicker = ref( props.modelValue ? props.modelValue : props.timePicker ? time.value : props.range ? [startDate.value, endDate.value] : startDate.value);
+const datepicker = ref(props.modelValue)
 
 watch(
   datepicker,
@@ -171,7 +173,7 @@ const clearIconRight = computed(() => (props.iconType === 'endIcon' ? '40px' : '
 }
 
 .eui-datepicker {
-    @apply min-w-56;
+  @apply min-w-56;
   .dp__main {
     .dp__input {
       @apply pb-2 pt-6 border-0 transition-colors duration-100 ease-in-out text-sm font-medium leading-6 placeholder:text-gray-400 placeholder:font-normal;

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"
       >
@@ -22,12 +22,12 @@
                 </th>
               </template>
               <th
-                 v-for="(header, headerIndex) in headers"
+                v-for="(header, headerIndex) in headers"
                 :key="`item-${headerIndex}`"
                 scope="col"
                 :class="[
                   'px-3 py-2 text-gray-600 snap-start snap-always',
-                   isScrolled && headerIndex === 0 ? stickyClass.head : '',
+                  isScrolled && headerIndex === 0 ? stickyClass.head : '',
                   { 'cursor-pointer hover:text-gray-900': header?.sortable },
                 ]"
                 :style="
@@ -41,7 +41,7 @@
                   class="flex items-center gap-2 text-sm font-normal text-current"
                 >
                   <slot name="header" :header="header">
-                    {{ capitalizeText(header?.text ?? header.name ?? '') }}
+                    {{ capitalizeText(header?.text ?? header.name ?? "") }}
                   </slot>
                   <slot name="headerOptionalItem"></slot>
                   <SortArrow
@@ -59,27 +59,47 @@
             </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}`"
             >
               <tr
-                @mouseenter="$attrs.mouseenter ? $emit('mouseenter', row, rowIndex) : null"
-                @mouseleave="$attrs.mouseleave ? $emit('mouseleave', row, rowIndex) : null"
+                @mouseenter="
+                  $attrs.mouseenter ? $emit('mouseenter', row, rowIndex) : null
+                "
+                @mouseleave="
+                  $attrs.mouseleave ? $emit('mouseleave', row, rowIndex) : null
+                "
               >
                 <template v-if="checkable">
                   <td class="checkable">
                     <EUITableCheckbox
                       :disabled="!isRowCheckable(row)"
                       :checked="isRowChecked(row)"
-                      @change.prevent.stop="($event) => checkRow(row, rowIndex, $event)"
+                      @change.prevent.stop="
+                        ($event) => checkRow(row, rowIndex, $event)
+                      "
                     />
                   </td>
                 </template>
-                 <td
+                <td
                   v-for="(header, headerIndex) in headers"
                   :key="headerIndex"
-                  :class="[isScrolled && headerIndex === 0 ? stickyClass.body : '']"
+                  :class="[
+                    isScrolled && headerIndex === 0 ? stickyClass.body : '',
+                  ]"
                 >
                   <slot
                     :name="`item.${header.value}`"
@@ -94,17 +114,17 @@
                 <slot name="expanded" :row="row" :rowIndex="rowIndex"></slot>
               </template>
             </template>
-          </tbody>
-          <tbody v-if="computedItems.length === 0">
-            <tr class="norecords">
-              <td :colspan="headers.length">
-                <div
-                  class="flex items-center justify-center text-xl font-medium text-gray-500 min-h-96"
-                >
-                  No matching records found
-                </div>
-              </td>
-            </tr>
+            <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"
+                  >
+                    No matching records found
+                  </div>
+                </td>
+              </tr>
+            </template>
           </tbody>
         </table>
       </div>
@@ -144,12 +164,21 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, PropType, ref, toRefs, watch } from "vue";
+import {
+  computed,
+  onMounted,
+  onUnmounted,
+  PropType,
+  ref,
+  toRefs,
+  watch,
+} from "vue";
 import EUIPagination from "./EUIPagination.vue";
 import EUITableCheckbox from "./EUITableCheckbox.vue";
 import SortArrow from "../../assets/svg/SortArrow.vue";
 import EUIPageLimit from "./EUIPageLimit.vue";
 import { capitalizeText } from "../../utils/lodash";
+import EUICircleLoader from "../loader/EUICircleLoader.vue";
 
 interface Header {
   value: string;
@@ -169,7 +198,11 @@ const props = defineProps({
   tableExpanded: { type: Boolean, default: false },
   backendPagination: { type: Boolean, default: false },
   checkedRows: { type: Array, default: () => ({}), required: true },
-  headers: { type: Array as PropType<Header[]>, default: () => ({}), required: true },
+  headers: {
+    type: Array as PropType<Header[]>,
+    default: () => ({}),
+    required: true,
+  },
   items: { type: Array, required: true, default: () => ({}) },
   defaultSort: { type: String, default: "" },
   defaultSortDirection: { type: String, default: "asc" },
@@ -182,6 +215,12 @@ const props = defineProps({
     default: () => () => false,
   },
   isRowCheckable: { type: Function, default: () => true },
+  tableHeight: {
+    type: String,
+    required: false,
+    default: ""
+  },
+  tableLoading: { type: Boolean, default: false },
 });
 const {
   defaultSort,
@@ -203,8 +242,8 @@ 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(() => {
@@ -227,18 +266,13 @@ const filteredItems = computed(() => {
 const computedItems = computed(() => {
   let items = filteredItems.value;
   // Sort items before slicing for pagination
-  items.sort((a:any, b:any) => {
+  items.sort((a: any, b: any) => {
     const modifier = currentSortDir.value === "desc" ? -1 : 1;
     if (a[currentSort.value] < b[currentSort.value]) return -1 * modifier;
     if (a[currentSort.value] > b[currentSort.value]) return 1 * modifier;
     return 0;
   });
-  return items
-
-  // Apply pagination
-  // const start = (newCurrentPage.value - 0) * limit.value;
-  // const end = start + limit.value;
-  // return items.slice(start, end);
+  return items;
 });
 
 const searchData = (data: number) => {
@@ -281,7 +315,7 @@ const isAllUncheckable = computed(() => {
 });
 
 // methods
-const defaultFilter = (value:any, search:any) => {
+const defaultFilter = (value: any, search: any) => {
   return value.toString().toLowerCase().includes(search);
 };
 
@@ -289,7 +323,7 @@ const indexOf = (
   array: any[],
   obj: any,
   fn: (item: any, obj: any) => boolean
-): number =>  {
+): number => {
   if (!array) return -1;
   if (!fn || typeof fn !== "function") return array?.indexOf(obj);
   for (let i = 0; i < array.length; i++) {
@@ -318,7 +352,7 @@ const emit = defineEmits([
   "update:checkedRows",
   "changeLimit",
   "mouseenter",
-  "mouseleave"
+  "mouseleave",
 ]);
 
 const changeLimit = (limitData: number) => {
@@ -354,20 +388,20 @@ const checkAll = () => {
   emit("update:checkedRows", newCheckedRows.value);
 };
 
-const removeCheckedRow = (row:any) => {
+const removeCheckedRow = (row: any) => {
   const index = indexOf(newCheckedRows.value, row, customIsChecked.value);
   if (index >= 0) {
     newCheckedRows.value.splice(index, 1);
   }
 };
 
-const isRowChecked = (row:any) => {
+const isRowChecked = (row: any) => {
   return indexOf(newCheckedRows.value, row, customIsChecked.value) >= 0;
 };
 
 const checkRow = (row: any, rowIndex: number, event: Event) => {
   if (!isRowCheckable.value(row)) return;
-  if(event) {
+  if (event) {
     lastCheckedRowIndex.value = rowIndex;
     if (!isRowChecked(row)) {
       newCheckedRows.value.push(row);
@@ -457,8 +491,8 @@ watch(() => tableContainer.value?.clientWidth, checkOverflow);
       }
     }
     tbody {
-     @apply snap-y snap-mandatory snap-always;
-      tr:not(.norecords)  {
+      @apply snap-y snap-mandatory snap-always;
+      tr:not(.norecords) {
         @apply text-gray-500 transition-all duration-150 rounded-xl bg-white snap-start ease-in-out snap-x snap-mandatory;
         &:hover {
           @apply shadow-[1px_2px_40px_0px_#03022912] ring-1 ring-gray-100 ring-inset z-30;

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(() => {