edvoyui-component-library-test-flight 0.0.58 → 0.0.60

package/src/components/table/EUITable.vue

@@ -1,190 +1,228 @@
 <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>
-    <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)]']"
-        ref="tableContainer"
-        @scroll="handleScroll"
+        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)]',
+        ]"
       >
-        <table class="eui-table">
-          <thead
-            class="sticky top-0 left-0 z-20 bg-gray-100 before:-bottom-px before:left-0 before:absolute before:h-px before:w-full before:bg-gray-300"
-          >
-            <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 justify-between gap-2 text-sm font-medium text-current font-inter"
-                >
-                  <slot name="header" :header="header">
-                    {{ capitalizeText(header?.text ?? header?.name ?? '') }}
-                  </slot>
-                  <slot name="headerOptionalItem"></slot>
-                  <div v-if="header?.sortable" class="flex-none">
-                    <svg
-                      width="24"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="size-6"
-                    >
-                      <path
-                        d="M8 15C9.06206 16.4619 10.3071 17.7713 11.7021 18.8942C11.8774 19.0353 12.1226 19.0353 12.2979 18.8942C13.6929 17.7713 14.9379 16.4619 16 15"
-                        :stroke="
-                          currentSortDir === 'asc' &&
-                          currentSort === header?.value
-                            ? '#111827'
-                            : '#9ca3af'
-                        "
-                        stroke-opacity="0.8"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                      <path
-                        d="M8 9C9.06206 7.5381 10.3071 6.2287 11.7021 5.1058C11.8774 4.9647 12.1226 4.9647 12.2979 5.1058C13.6929 6.2287 14.9379 7.5381 16 9"
-                        :stroke="
-                          currentSortDir === 'desc' &&
-                          currentSort === header?.value
-                            ? '#111827'
-                            : '#9ca3af'
-                        "
-                        stroke-opacity="0.8"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                    </svg>
-                  </div>
-                </div>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <template
-              v-if="computedItems.length > 0"
-              v-for="(row, rowIndex) in computedItems"
-              :key="`table-row-${rowIndex}`"
+        <div
+          class="absolute flex items-center z-[calc(infinity)] w-full h-auto pointer-events-none inset-0"
+        >
+          <EUICircleLoader />
+        </div>
+      </div>
+      <div v-else class="relative w-full mx-auto overflow-hidden">
+        <div
+          id="student-table"
+          :class="[
+            'scrollbar--thin overscroll-none',
+            computedItems.length === 0 ? 'overflow-hidden' : 'overflow-auto',
+            tableHeight
+              ? tableHeight
+              : 'h-[calc(100svh-12rem)] max-h-[calc(100svh-12rem)]',
+          ]"
+          ref="tableContainer"
+          @scroll="handleScroll"
+        >
+          <table class="eui-table">
+            <thead
+              class="sticky top-0 left-0 z-20 bg-gray-100 before:-bottom-px before:left-0 before:absolute before:h-px before:w-full before:bg-gray-300"
             >
-              <tr
-                @mouseenter="$attrs.mouseenter ? $emit('mouseenter', row, rowIndex) : null"
-                @mouseleave="$attrs.mouseleave ? $emit('mouseleave', row, rowIndex) : null"
-              >
+              <tr>
                 <template v-if="checkable">
-                  <td class="checkable">
+                  <th class="checkable">
                     <EUITableCheckbox
-                      :disabled="!isRowCheckable(row)"
-                      :checked="isRowChecked(row)"
-                      @change.prevent.stop="($event) => 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"
-                  :class="[isScrolled && headerIndex === 0 ? stickyClass.body : '']"
+                  :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)"
                 >
-                  <slot
-                    :name="`item.${header?.value}`"
-                    :row="row"
-                    :rowIndex="rowIndex"
-                    :headerIndex="headerIndex"
+                  <div
+                    class="flex items-center justify-between gap-2 text-sm font-medium text-current font-inter"
                   >
-                    {{ getValueByPath(row, header?.value) }}
-                  </slot>
-                </td>
+                    <slot name="header" :header="header">
+                      {{ capitalizeText(header?.text ?? header?.name ?? "") }}
+                    </slot>
+                    <slot name="headerOptionalItem"></slot>
+                    <div v-if="header?.sortable" class="flex-none">
+                      <svg
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="size-6"
+                      >
+                        <path
+                          d="M8 15C9.06206 16.4619 10.3071 17.7713 11.7021 18.8942C11.8774 19.0353 12.1226 19.0353 12.2979 18.8942C13.6929 17.7713 14.9379 16.4619 16 15"
+                          :stroke="
+                            currentSortDir === 'asc' &&
+                            currentSort === header?.value
+                              ? '#111827'
+                              : '#9ca3af'
+                          "
+                          stroke-opacity="0.8"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                        <path
+                          d="M8 9C9.06206 7.5381 10.3071 6.2287 11.7021 5.1058C11.8774 4.9647 12.1226 4.9647 12.2979 5.1058C13.6929 6.2287 14.9379 7.5381 16 9"
+                          :stroke="
+                            currentSortDir === 'desc' &&
+                            currentSort === header?.value
+                              ? '#111827'
+                              : '#9ca3af'
+                          "
+                          stroke-opacity="0.8"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                </th>
               </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">
-                <div
-                  class="flex items-center justify-center text-xl font-medium text-gray-500 min-h-96"
+            </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
+                  "
                 >
-                  No matching records found
-                </div>
-              </td>
-            </tr>
-            </template>
-          </tbody>
-
-        </table>
-      </div>
-      <div
-        class="sticky bottom-0 left-0 z-50 flex items-center justify-between px-2 py-1 bg-white border-t border-gray-300"
-      >
-        <slot name="tableCount">
-          <div class="inline-flex items-center gap-x-2">
-            <div class="text-sm font-medium text-gray-900">
-              Total {{ total }}
-            </div>
-            <span class="text-gray-300">&vert;</span>
-            <div class="inline-flex items-center">
-              <span class="text-sm font-medium text-gray-900">Per page</span>
-              <EUIPageLimit
-                :page-limit="limit"
-                @update-limit="changeLimit($event)"
-                @refetch="searchData($event)"
-                :iconStyle="true"
-              />
+                  <template v-if="checkable">
+                    <td class="checkable">
+                      <EUITableCheckbox
+                        :disabled="!isRowCheckable(row)"
+                        :checked="isRowChecked(row)"
+                        @change.prevent.stop="
+                          ($event) => 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"
+                      :headerIndex="headerIndex"
+                    >
+                      {{ 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
+                    "
+                  >
+                    <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>
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+        <div
+          class="sticky bottom-0 left-0 z-50 flex items-center justify-between px-2 py-1 bg-white border-t border-gray-300"
+        >
+          <slot name="tableCount">
+            <div class="inline-flex items-center gap-x-2">
+              <div class="text-sm font-medium text-gray-900">
+                Total {{ total }}
+              </div>
+              <span class="text-gray-300">&vert;</span>
+              <div class="inline-flex items-center">
+                <span class="text-sm font-medium text-gray-900">Per page</span>
+                <EUIPageLimit
+                  :page-limit="limit"
+                  @update-limit="changeLimit($event)"
+                  @refetch="searchData($event)"
+                  :iconStyle="true"
+                />
+              </div>
             </div>
-          </div>
-        </slot>
-        <template v-if="paginated && computedItems.length !== 0">
-          <slot name="tablepagination">
-            <EUIStudentPagination
-              :activePage="newCurrentPage"
-              :pageLimit="limit"
-              :totalCount="total"
-              @change-page="pageChanged($event)"
-            />
           </slot>
-        </template>
+          <template v-if="paginated && computedItems.length !== 0">
+            <slot name="tablepagination">
+              <EUIStudentPagination
+                :activePage="newCurrentPage"
+                :pageLimit="limit"
+                :totalCount="total"
+                @change-page="pageChanged($event)"
+              />
+            </slot>
+          </template>
+        </div>
       </div>
-    </div>
     </Transition>
   </div>
 </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 EUITableCheckbox from "./EUITableCheckbox.vue";
 import EUIPageLimit from "./EUIPageLimit.vue";
 import EUIStudentPagination from "./EUIStudentPagination.vue";
@@ -210,7 +248,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" },
@@ -226,7 +268,7 @@ const props = defineProps({
   tableHeight: {
     type: String,
     required: false,
-    default: ""
+    default: "",
   },
   tableLoading: { type: Boolean, default: false },
 });
@@ -257,7 +299,7 @@ const filteredItems = computed(() => {
   let filteredItems = items.value.slice();
   if (!backendPagination.value && search.value !== "") {
     if (search.value.trim() === "") return filteredItems;
-    const props = headers.value.map((h:any) => h.value);
+    const props = headers.value.map((h: any) => h.value);
     filteredItems = items.value.filter((row) =>
       props.some((prop) =>
         defaultFilter(
@@ -273,13 +315,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
+  return items;
 
   // Apply pagination
   // const start = (newCurrentPage.value - 0) * limit.value;
@@ -287,8 +329,7 @@ const computedItems = computed(() => {
   // return items.slice(start, end);
 });
 
-
-const searchData = (_data:any) => {
+const searchData = (_data: any) => {
   // console.log(_data);
 };
 
@@ -303,10 +344,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(() => {
@@ -327,7 +368,7 @@ const emit = defineEmits([
   "update:selectedRows",
   "changeLimit",
   "mouseenter",
-  "mouseleave"
+  "mouseleave",
 ]);
 
 const changeLimit = (limitData: number) => {
@@ -352,44 +393,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);
+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);
 };
 
-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
@@ -423,7 +464,7 @@ const stickyClass = computed(() => {
 });
 
 const isOverflowing = ref(false);
-const isScrolled = ref(false)
+const isScrolled = ref(false);
 const tableContainer = ref<HTMLElement | null>(null);
 
 const handleScroll = () => {
@@ -441,11 +482,11 @@ const checkOverflow = () => {
 };
 
 onMounted(() => {
-  window.addEventListener('resize', checkOverflow);
+  window.addEventListener("resize", checkOverflow);
 });
 
 onUnmounted(() => {
-  window.removeEventListener('resize', checkOverflow);
+  window.removeEventListener("resize", checkOverflow);
 });
 
 // Watch for changes in the container's width to check for overflow
@@ -462,14 +503,14 @@ watch(() => tableContainer.value?.clientWidth, checkOverflow);
       th {
         @apply snap-always snap-start;
         &:first-of-type.checkable {
-            @apply min-h-11 flex items-center justify-center px-2 max-w-16 w-16 sticky left-0 top-0 z-20 bg-gray-100;
+          @apply min-h-11 flex items-center justify-center px-2 max-w-16 w-16 sticky left-0 top-0 z-20 bg-gray-100;
         }
       }
     }
 
     tbody {
       @apply snap-y snap-mandatory snap-always;
-        tr:not(.norecords)  {
+      tr:not(.norecords) {
         @apply text-gray-600 transition-colors duration-100 bg-white snap-start ease-in-out snap-x snap-mandatory rounded-sm h-12;
         &:hover {
           @apply bg-purple-50 ring-1 ring-purple-100 ring-inset;
@@ -477,9 +518,9 @@ watch(() => tableContainer.value?.clientWidth, checkOverflow);
         td {
           @apply px-3 py-1 text-sm font-normal transition-transform duration-100 ease-in-out snap-start snap-always border-solid border border-l-0 border-r-0 border-white first:border-s last:border-e last-of-type:rounded-e-sm first-of-type:rounded-s-sm;
           &:first-of-type.checkable {
-              @apply w-12 text-center sticky left-0 top-0 z-[11] bg-white;
-            }
+            @apply w-12 text-center sticky left-0 top-0 z-[11] bg-white;
           }
+        }
         &:hover td {
           @apply font-medium text-gray-900 bg-purple-50 border-purple-100;
           &:first-of-type.checkable {

package/dist/EUITelephone.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EUITelephone.vue.d.ts","sourceRoot":"","sources":["../src/components/telephone/EUITelephone.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,8GAA8G,CAAC;AACrI,cAAc,8GAA8G,CAAC;AAC7H,OAAO,4GAA4G,CAAC;AACpH,eAAe,SAAS,CAAC"}

package/dist/button/EUIButton.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EUIButton.vue.d.ts","sourceRoot":"","sources":["../../src/components/button/EUIButton.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,wGAAwG,CAAC;AAC/H,cAAc,wGAAwG,CAAC;AACvH,OAAO,sGAAsG,CAAC;AAC9G,eAAe,SAAS,CAAC"}