edvoyui-component-library-test-flight 0.0.163 → 0.0.165

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=eae073aa&lang.scss";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/table/EUIDashboardTable.vue?vue&type=style&index=0&scoped=96e61185&lang.scss";
 declare const _default: any;
 export default _default;
 //# sourceMappingURL=EUIDashboardTable.vue.d.ts.map

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

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

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

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

package/package.json

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

package/src/components/HelloWorld.vue

@@ -1653,7 +1653,7 @@ const selectedRows = ref([]);
 const checkedRows = ref([]);
 const defaultSortOrder = ref("asc");
 const limit = ref(5);
-const offset = ref(1);
+const offset = ref(0);
 const selectedIndex = ref(null);
 const selected: { index: string } = { index: "" };
 

package/src/components/table/ColumnResizeTable.vue

@@ -1,21 +1,24 @@
 <template>
   <div>
     <Transition name="fade" mode="out-in">
-      <div
-        v-if="loading"
-        :class="[
-          'overflow-hidden relative z-0 isolate bg-white backdrop-blur transition-colors duration-150 ease-in-out rounded-xl border border-gray-50',
-          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 v-if="loading">
+        <slot name="loader" :loading="loading" :height="tableHeight">
+          <div
+            :class="[
+              'overflow-hidden relative z-0 isolate bg-white backdrop-blur transition-colors duration-150 ease-in-out rounded-xl border border-gray-50',
+              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>
+        </slot>
+      </template>
 
       <div v-else class="relative max-w-full mx-auto">
         <article
@@ -77,7 +80,7 @@
                     <div
                       class="w-full text-sm font-bold text-current truncate font-inter"
                     >
-                      <slot name="header" :header="header">
+                      <slot name="header" :header="header" :index="headerIndex">
                         {{ capitalizeText(header?.text ?? header?.name ?? "") }}
                       </slot>
                       <slot
@@ -201,28 +204,30 @@
                       checkable === true ? headers.length + 1 : headers.length
                     "
                   >
-                  <slot name="no-records">
-                    <div
-                      class="flex items-center justify-center w-[calc(100vw-14rem)]"
-                      :class="[
-                        tableHeight
-                          ? tableHeight
-                          : 'h-[calc(100svh-12rem)] max-h-[calc(100svh-12rem)]',
-                      ]"
-                    >
-                      <div class="text-center">
-                        <div class="mx-auto overflow-hidden rounded-md size-56">
-                          <img
-                            src="@/assets/images/search-nodata.png"
-                            alt=""
-                            class="block object-contain object-center h-auto max-w-full opacity-90"
-                          />
-                        </div>
-                        <div class="my-2 text-xl font-medium text-gray-500">
-                          No matching records found
+                    <slot name="no-records">
+                      <div
+                        class="flex items-center justify-center w-[calc(100vw-14rem)]"
+                        :class="[
+                          tableHeight
+                            ? tableHeight
+                            : 'h-[calc(100svh-12rem)] max-h-[calc(100svh-12rem)]',
+                        ]"
+                      >
+                        <div class="text-center">
+                          <div
+                            class="mx-auto overflow-hidden rounded-md size-56"
+                          >
+                            <img
+                              src="@/assets/images/search-nodata.png"
+                              alt=""
+                              class="block object-contain object-center h-auto max-w-full opacity-90"
+                            />
+                          </div>
+                          <div class="my-2 text-xl font-medium text-gray-500">
+                            No matching records found
+                          </div>
                         </div>
                       </div>
-                    </div>
                     </slot>
                   </td>
                 </tr>
@@ -424,7 +429,7 @@ const searchData = (_data: any) => {
 
 const changeLimit = (limitData: number) => {
   limit.value = limitData;
-  newCurrentPage.value = 1;
+  newCurrentPage.value = 0;
   emit("update:currentPage", newCurrentPage.value);
   emit("changeLimit", limitData);
 };
@@ -573,7 +578,7 @@ const tableColumnResize = () => {
 
     let startX: number, startWidth: number;
 
-    const mouseDownHandler = function (e:any) {
+    const mouseDownHandler = function (e: any) {
       startX = e.pageX;
       startWidth = parseInt(
         document.defaultView?.getComputedStyle(th)?.width || "0px",
@@ -587,7 +592,7 @@ const tableColumnResize = () => {
       e.preventDefault();
     };
 
-    const onMouseMove = function (e:any) {
+    const onMouseMove = function (e: any) {
       if (isResizing) {
         const newWidth = startWidth + (e.pageX - startX);
         if (newWidth > 100) {
@@ -682,9 +687,9 @@ watch(() => tableContainer.value?.clientWidth, checkOverflow);
       }
 
       & > tr {
-         transition-property: filter, background, opacity;
-         transition-duration: 0.2s;
-         transition-timing-function: ease-out;
+        transition-property: filter, background, opacity;
+        transition-duration: 0.2s;
+        transition-timing-function: ease-out;
       }
     }
 
@@ -710,10 +715,10 @@ watch(() => tableContainer.value?.clientWidth, checkOverflow);
     */
 
     // TODO: Hover Row highlight
-    & tbody:hover tr:not(:hover) td:not(:nth-child(-n+2)) {
-        filter: blur(4px) saturate(0.2);
-        pointer-events: none;
-        opacity: 0.6;
+    & tbody:hover tr:not(:hover) td:not(:nth-child(-n + 2)) {
+      filter: blur(4px) saturate(0.2);
+      pointer-events: none;
+      opacity: 0.6;
     }
   }
 }

package/src/components/table/EUIDashboardTable.vue

@@ -1,172 +1,189 @@
 <template>
   <div>
     <Transition name="fade" mode="out-in">
-      <div
-        v-if="loading"
-        :class="[
-          'overflow-hidden relative z-0 isolate bg-white backdrop-blur transition-colors duration-150 ease-in-out rounded-xl border border-gray-50',
-          tableHeight
-            ? tableHeight
-            : 'h-[calc(100svh-9rem)] max-h-[calc(100svh-9rem)]',
-        ]"
-      >
+      <template v-if="loading">
+        <slot name="loader" :loading="loading" :height="tableHeight">
+          <div
+            :class="[
+              'overflow-hidden relative z-0 isolate bg-white backdrop-blur transition-colors duration-150 ease-in-out rounded-xl border border-gray-50',
+              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>
+        </slot>
+      </template>
+
+      <div v-else class="relative w-full mx-auto overflow-hidden">
         <div
-          class="absolute flex items-center z-[calc(infinity)] w-full h-auto pointer-events-none inset-0"
+          id="dashboard-table"
+          :class="[
+            'scrollbar--thin overscroll-auto',
+            computedItems.length === 0 ? 'overflow-hidden' : 'overflow-auto',
+            tableHeight
+              ? tableHeight
+              : 'h-[calc(100svh-13rem)] max-h-[calc(100svh-13rem)]',
+          ]"
+          ref="tableContainer"
+          @scroll="handleScroll"
         >
-          <EUICircleLoader />
-        </div>
-      </div>
-      <div v-else class="relative w-full mx-auto overflow-hidden">
-      <div
-        id="dashboard-table"
-        :class="['scrollbar--thin overscroll-auto',
-        computedItems.length === 0 ? 'overflow-hidden' : 'overflow-auto', tableHeight ? tableHeight : 'h-[calc(100svh-13rem)] max-h-[calc(100svh-13rem)]']"
-        ref="tableContainer"
-        @scroll="handleScroll"
-      >
-        <table class="eui-table">
-          <thead class="sticky top-0 left-0 z-50 bg-gray-100">
-            <tr>
-              <template v-if="checkable">
-                <th class="checkable">
-                  <EUITableCheckbox
-                    :checked="isAllChecked"
-                    :indeterminate="isIndeterminate"
-                    :disabled="isAllUncheckable"
-                    class="flex justify-center mt-0"
-                    @change="checkAll()"
-                  />
-                </th>
-              </template>
-              <th
-                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 : '',
-                  { 'cursor-pointer hover:text-gray-900': header?.sortable },
-                ]"
-                :style="
-                  header?.width
-                    ? `min-width:${header.width}px;max-width:${header.width}px;`
-                    : ``
-                "
-                @click="sortBy(header, $event)"
-              >
-                <div
-                  class="flex items-center gap-2 text-sm font-normal text-current"
-                >
-                  <slot name="header" :header="header">
-                    {{ capitalizeText(header?.text ?? header.name ?? "") }}
-                  </slot>
-                  <slot name="headerOptionalItem"></slot>
-                  <SortArrow
-                    v-if="header?.sortable"
-                    :class="[
-                      'transform duration-100 transition-all',
-                      currentSort === header.value
-                        ? 'text-violet-700'
-                        : 'text-gray-900',
-                      sortClass(header),
-                    ]"
-                  />
-                </div>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-
-            <template
-              v-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
-                "
-              >
+          <table class="eui-table">
+            <thead class="sticky top-0 left-0 z-50 bg-gray-100">
+              <tr>
                 <template v-if="checkable">
-                  <td class="checkable">
+                  <th class="checkable">
                     <EUITableCheckbox
-                      :disabled="!isRowCheckable(row)"
-                      :checked="isRowChecked(row)"
-                      @change="($event:boolean) => checkRow(row, rowIndex, $event)"
+                      :checked="isAllChecked"
+                      :indeterminate="isIndeterminate"
+                      :disabled="isAllUncheckable"
+                      class="flex justify-center mt-0"
+                      @change="checkAll()"
                     />
-                  </td>
+                  </th>
                 </template>
-                <td
+                <th
                   v-for="(header, headerIndex) in headers"
-                  :key="headerIndex"
+                  :key="`item-${headerIndex}`"
+                  scope="col"
                   :class="[
-                    isScrolled && headerIndex === 0 ? stickyClass.body : '',
+                    'px-3 py-2 text-gray-600 snap-start snap-always',
+                    isScrolled && headerIndex === 0 ? stickyClass.head : '',
+                    { 'cursor-pointer hover:text-gray-900': header?.sortable },
                   ]"
+                  :style="
+                    header?.width
+                      ? `min-width:${header.width}px;max-width:${header.width}px;`
+                      : ``
+                  "
+                  @click="sortBy(header, $event)"
                 >
-                  <slot
-                    :name="`item.${header.value}`"
-                    :row="row"
-                    :rowIndex="rowIndex"
+                  <div
+                    class="flex items-center gap-2 text-sm font-normal text-current"
                   >
-                    {{ getValueByPath(row, header?.value) }}
-                  </slot>
-                </td>
-              </tr>
-              <template v-if="tableExpanded">
-                <slot name="expanded" :row="row" :rowIndex="rowIndex"></slot>
-              </template>
-            </template>
-            <template v-else-if="computedItems.length === 0">
-              <tr class="norecords">
-                <td :colspan="checkable === true ? headers.length + 1 : headers.length">
-                  <slot name="no-records">
-                    <div
-                      class="flex items-center justify-center text-xl font-medium text-gray-500 h-[calc(100svh-18rem)] max-w-screen-xl"
-                    >
-                    No matching records found
-                  </div>
+                    <slot name="header" :header="header" :index="headerIndex">
+                      {{ capitalizeText(header?.text ?? header.name ?? "") }}
                     </slot>
-                </td>
+                    <slot name="headerOptionalItem"></slot>
+                    <SortArrow
+                      v-if="header?.sortable"
+                      :class="[
+                        'transform duration-100 transition-all',
+                        currentSort === header.value
+                          ? 'text-violet-700'
+                          : 'text-gray-900',
+                        sortClass(header),
+                      ]"
+                    />
+                  </div>
+                </th>
               </tr>
-            </template>
-          </tbody>
-        </table>
-      </div>
-      <div
-        class="sticky bottom-0 left-0 z-50 flex items-center justify-between px-2 py-2 bg-gray-100"
-      >
-        <slot name="tableCount">
-          <div class="inline-flex items-center gap-x-10">
-            <div class="text-sm font-normal text-gray-900">
-              {{ newCurrentPage }} - {{ limit }} of {{ total }}
-            </div>
-            <div class="inline-flex items-center gap-2">
-              <span class="text-sm font-normal text-gray-900"
-                >Result per page</span
+            </thead>
+            <tbody>
+              <template
+                v-if="computedItems.length > 0"
+                v-for="(row, rowIndex) in computedItems"
+                :key="`table-row-${rowIndex}`"
               >
-              <EUIPageLimit
-                :page-limit="limit"
-                @update-limit="changeLimit($event)"
-                @refetch="searchData($event)"
-              />
+                <tr
+                  @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="($event:boolean) => checkRow(row, rowIndex, $event)"
+                      />
+                    </td>
+                  </template>
+                  <td
+                    v-for="(header, headerIndex) in headers"
+                    :key="headerIndex"
+                    :class="[
+                      isScrolled && headerIndex === 0 ? stickyClass.body : '',
+                    ]"
+                  >
+                    <slot
+                      :name="`item.${header.value}`"
+                      :row="row"
+                      :rowIndex="rowIndex"
+                    >
+                      {{ getValueByPath(row, header?.value) }}
+                    </slot>
+                  </td>
+                </tr>
+                <template v-if="tableExpanded">
+                  <slot name="expanded" :row="row" :rowIndex="rowIndex"></slot>
+                </template>
+              </template>
+              <template v-else-if="computedItems.length === 0">
+                <tr class="norecords">
+                  <td
+                    :colspan="
+                      checkable === true ? headers.length + 1 : headers.length
+                    "
+                  >
+                    <slot name="no-records">
+                      <div
+                        class="flex items-center justify-center text-xl font-medium text-gray-500 h-[calc(100svh-18rem)] max-w-screen-xl"
+                      >
+                        No matching records found
+                      </div>
+                    </slot>
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+        <div
+          class="sticky bottom-0 left-0 z-50 flex items-center justify-between px-2 py-2 bg-gray-100"
+        >
+          <slot name="tableCount">
+            <div class="inline-flex items-center gap-x-10">
+              <div class="text-sm font-normal text-gray-900">
+                {{ newCurrentPage * limit + 1 }} -
+                {{ (newCurrentPage + 1) * limit }} of {{ total }}
+              </div>
+              <div class="inline-flex items-center gap-2">
+                <span class="text-sm font-normal text-gray-900"
+                  >Result per page</span
+                >
+                <EUIPageLimit
+                  :page-limit="limit"
+                  @update-limit="changeLimit($event)"
+                  @refetch="searchData($event)"
+                />
+              </div>
             </div>
-          </div>
-        </slot>
-        <template v-if="paginated && computedItems.length !== 0">
-          <slot name="tablepagination">
-            <EUIPagination
-              :activePage="newCurrentPage"
-              :pageLimit="limit"
-              :totalCount="total"
-              @change-page="pageChanged($event)"
-            />
           </slot>
-        </template>
+          <template v-if="paginated && computedItems.length !== 0">
+            <slot name="tablepagination">
+              <EUIPagination
+                :activePage="newCurrentPage"
+                :pageLimit="limit"
+                :totalCount="total"
+                @change-page="pageChanged($event)"
+              />
+            </slot>
+          </template>
+        </div>
       </div>
-    </div>
     </Transition>
   </div>
 </template>
@@ -227,7 +244,7 @@ const props = defineProps({
   tableHeight: {
     type: String,
     required: false,
-    default: ""
+    default: "",
   },
   tableLoading: { type: Boolean, default: false },
 });
@@ -248,6 +265,7 @@ const {
 const currentSort = ref(defaultSort.value);
 const currentSortDir = ref(defaultSortDirection.value);
 const newCheckedRows = ref([...checkedRows.value]);
+
 const newCurrentPage = ref(currentPage.value);
 const limit = ref(props.perPage);
 const loading = computed(() => props.tableLoading);
@@ -282,7 +300,7 @@ const computedItems = computed(() => {
   return items;
 });
 
-const searchData = (_data:any) => {
+const searchData = (_data: any) => {
   // console.log(_data);
 };
 
@@ -305,10 +323,10 @@ const isIndeterminate = computed(() => {
 });
 
 const isAllChecked = computed(() => {
-    return (
-        computedItems.value.length > 0 &&
-        computedItems.value.every(row => newCheckedRows.value.includes(row))
-    );
+  return (
+    computedItems.value.length > 0 &&
+    computedItems.value.every((row) => newCheckedRows.value.includes(row))
+  );
 });
 
 const isAllUncheckable = computed(() => {
@@ -333,7 +351,7 @@ const emit = defineEmits([
 
 const changeLimit = (limitData: number) => {
   limit.value = limitData;
-  newCurrentPage.value = 1;
+  newCurrentPage.value = 0;
   emit("update:currentPage", newCurrentPage.value);
   emit("changeLimit", limitData);
 };
@@ -353,44 +371,44 @@ const sortBy = (header: any, event: any) => {
   emit("sort", currentSort.value, currentSortDir.value, event);
 };
 
- const isRowChecked = (row:any) => {
-    return indexOf(newCheckedRows.value, row) >= 0;
-  };
+const isRowChecked = (row: any) => {
+  return indexOf(newCheckedRows.value, row) >= 0;
+};
 
- const removeCheckedRow = (row:any) => {
-      const index = indexOf(newCheckedRows.value, row);
-      if (index >= 0) {
-          newCheckedRows.value.splice(index, 1);
-      }
-  };
+const removeCheckedRow = (row: any) => {
+  const index = indexOf(newCheckedRows.value, row);
+  if (index >= 0) {
+    newCheckedRows.value.splice(index, 1);
+  }
+};
 
 const checkAll = () => {
-    if (isAllChecked.value) {
-        // Uncheck all rows
-        newCheckedRows.value = []
-    } else {
-        // Check all rows
-        const rowsToCheck = computedItems.value.filter(
-        row => !newCheckedRows.value.includes(row)
-        );
-        newCheckedRows.value.push(...rowsToCheck);
-    }
-    emit('check', newCheckedRows.value);
-    emit("check-all", newCheckedRows.value);
-    emit("update:checkedRows", newCheckedRows.value);
-    emit("update:selectedRows", newCheckedRows.value);
+  if (isAllChecked.value) {
+    // Uncheck all rows
+    newCheckedRows.value = [];
+  } else {
+    // Check all rows
+    const rowsToCheck = computedItems.value.filter(
+      (row) => !newCheckedRows.value.includes(row)
+    );
+    newCheckedRows.value.push(...rowsToCheck);
+  }
+  emit("check", newCheckedRows.value);
+  emit("check-all", newCheckedRows.value);
+  emit("update:checkedRows", newCheckedRows.value);
+  emit("update:selectedRows", newCheckedRows.value);
 };
 
-const checkRow = (row: any, _rowIndex: number, _event:any) => {
+const checkRow = (row: any, _rowIndex: number, _event: any) => {
   const isChecked = newCheckedRows.value.includes(row);
-    if (_event && isChecked) {
-      removeCheckedRow(row);
-    } else {
-        newCheckedRows.value.push(row);
-    }
-    emit("check", newCheckedRows.value, row);
-    emit("update:checkedRows", newCheckedRows.value);
-    emit("update:selectedRows", newCheckedRows.value);
+  if (_event && isChecked) {
+    removeCheckedRow(row);
+  } else {
+    newCheckedRows.value.push(row);
+  }
+  emit("check", newCheckedRows.value, row);
+  emit("update:checkedRows", newCheckedRows.value);
+  emit("update:selectedRows", newCheckedRows.value);
 };
 
 // watch