edvoyui-component-library-test-flight 0.0.164 → 0.0.166

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" :index="headerIndex">
-                    {{ 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

package/src/components/table/EUITable.vue

@@ -1,21 +1,25 @@
 <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 w-full mx-auto overflow-hidden">
         <div
           id="student-table"
@@ -116,8 +120,12 @@
                 :key="`table-row-${rowIndex}`"
               >
                 <tr
-                :id="`row-${rowIndex}`"
-                :class="activeRowIndex==rowIndex?'!bg-purple-50 !ring-1 !ring-purple-100 !ring-inset':''"
+                  :id="`row-${rowIndex}`"
+                  :class="
+                    activeRowIndex == rowIndex
+                      ? '!bg-purple-50 !ring-1 !ring-purple-100 !ring-inset'
+                      : ''
+                  "
                   @mouseenter="
                     $attrs.mouseenter
                       ? $emit('mouseenter', row, rowIndex)
@@ -130,8 +138,14 @@
                   "
                 >
                   <template v-if="checkable">
-                    <td class="checkable"
-                    :class=" activeRowIndex==rowIndex?'!bg-purple-50 !ring-1 !ring-purple-100 !ring-inset':''">
+                    <td
+                      class="checkable"
+                      :class="
+                        activeRowIndex == rowIndex
+                          ? '!bg-purple-50 !ring-1 !ring-purple-100 !ring-inset'
+                          : ''
+                      "
+                    >
                       <EUITableCheckbox
                         :disabled="!isRowCheckable(row)"
                         :checked="isRowChecked(row)"
@@ -146,9 +160,10 @@
                     :key="headerIndex"
                     :class="[
                       isScrolled && headerIndex === 0 ? stickyClass.body : '',
-                      activeRowIndex==rowIndex?'!bg-purple-50 !ring-1 !ring-purple-100 !ring-inset':''
+                      activeRowIndex == rowIndex
+                        ? '!bg-purple-50 !ring-1 !ring-purple-100 !ring-inset'
+                        : '',
                     ]"
-
                   >
                     <slot
                       :name="`item.${header?.value}`"
@@ -171,12 +186,12 @@
                       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="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>
@@ -293,7 +308,8 @@ const {
   search,
   headers,
   paginated,
-  isRowCheckable,activeRowIndex
+  isRowCheckable,
+  activeRowIndex,
 } = toRefs(props);
 
 const currentSort = ref(defaultSort.value);
@@ -382,7 +398,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);
 };

package/src/components/table/GrowthTable.vue

@@ -1,21 +1,25 @@
 <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 w-full mx-auto overflow-hidden">
         <div
           id="growth-table"
@@ -397,7 +401,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);
 };