edvoyui-component-library-test-flight 0.0.199 → 0.0.201

package/dist/components/select/EUISelect.vue

@@ -27,7 +27,7 @@
       :loading="loading"
       :disabled="disabled"
       :selectable="selectedLimit"
-      class="eui-select"
+      class="eui-style"
       :class="[
         isUseCustomSelect
           ? 'customselect'
@@ -614,7 +614,7 @@ const offsetValue = computed(() => props.customOffset);
 const withPopper = (
   dropdownList: HTMLElement,
   component: { $refs: { toggle: Element | VirtualElement } },
-  { width, maxHeight }: any
+  { width, maxHeight }: any,
 ) => {
   const newwidth = selectWidth.value || width; //setcustom width '400px'
   const newHeight = selectMaxHeight.value || width; //setcustom maxHeight '600px'
@@ -643,7 +643,7 @@ const withPopper = (
 
 const fuseSearch = (
   options: readonly unknown[],
-  search: string | any[] | Fuse.Expression
+  search: string | any[] | Fuse.Expression,
 ) => {
   const fuse: any = new Fuse(options, {
     keys: keys.value,
@@ -687,7 +687,7 @@ const slectedChipHeight = computed(() =>
     ? "fit-content"
     : props.inputFilled
     ? ""
-    : "auto"
+    : "auto",
 );
 
 const dropDownIcon = computed(() => (props.clearable ? "flex" : "none"));
@@ -735,20 +735,20 @@ const selectFocus = computed(() =>
     ? "8px"
     : props.inputFilled
     ? "8px"
-    : "0px"
+    : "0px",
 );
 const searchMargin = computed(() =>
   props.multiple && props.inputFilled
     ? "10px"
     : props.inputFilled
     ? "10px"
-    : "0px"
+    : "0px",
 );
 
 const selectRequited = computed(() =>
   props.required
     ? "-webkit-linear-gradient(left, #374151 0%, #374151 92%,red 8%,red 100%)"
-    : "-webkit-linear-gradient(left, #374151 50%, #374151 50%)"
+    : "-webkit-linear-gradient(left, #374151 50%, #374151 50%)",
 );
 
 interface Iflag {
@@ -1050,44 +1050,42 @@ const open = () => {
     -webkit-text-fill-color: transparent;
   }
 }
-
-.eui-select {
-  .selectall__input {
-    @apply size-4 flex-shrink-0 border border-solid border-gray-200 bg-white appearance-none inline-block select-none cursor-pointer align-middle rounded relative before:content-[''] before:transform before:translate-x-1/2 before:-translate-y-1/2 before:z-[-1] before:absolute before:top-1/2 before:right-1/2 before:block before:size-9 before:rounded-full before:bg-violet-100 before:opacity-0 before:transition-opacity hover:before:opacity-75;
+// .style-chooser use this class for customize select style
+.selectall__input {
+  @apply size-4 flex-shrink-0 border border-solid border-gray-200 bg-white appearance-none inline-block select-none cursor-pointer align-middle rounded relative before:content-[''] before:transform before:translate-x-1/2 before:-translate-y-1/2 before:z-[-1] before:absolute before:top-1/2 before:right-1/2 before:block before:size-9 before:rounded-full before:bg-violet-100 before:opacity-0 before:transition-opacity hover:before:opacity-75;
+  &::after {
+    @apply absolute hidden border-solid inset-0 -ml-px -mt-px size-4 scale-90;
+    content: "";
+    background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%2012.7132L10.0168%2017.7247L10.4177%2017.0238C12.5668%2013.2658%2015.541%2010.0448%2019.1161%207.60354L20%207%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E);
+    background-size: contain;
+    transition: all 0.2s ease;
+  }
+  &:hover {
+    @apply bg-violet-100 border-violet-500;
+  }
+  &:checked {
+    transition: all 0.3s ease;
+    transform: translate3d(0, 1, 0);
+    @apply bg-violet-700 border-violet-700;
     &::after {
-      @apply absolute hidden border-solid inset-0 -ml-px -mt-px size-4 scale-90;
-      content: "";
-      background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%2012.7132L10.0168%2017.7247L10.4177%2017.0238C12.5668%2013.2658%2015.541%2010.0448%2019.1161%207.60354L20%207%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E);
-      background-size: contain;
-      transition: all 0.2s ease;
+      @apply block border-white;
     }
-    &:hover {
-      @apply bg-violet-100 border-violet-500;
+    &:focus {
+      @apply bg-violet-700;
+    }
+  }
+  &:focus {
+    @apply outline-none border border-violet-700 bg-violet-200;
+  }
+  &:disabled {
+    @apply bg-gray-300 border-gray-100 cursor-not-allowed;
+    & ~ span {
+      @apply cursor-not-allowed;
     }
     &:checked {
-      transition: all 0.3s ease;
-      transform: translate3d(0, 1, 0);
-      @apply bg-violet-700 border-violet-700;
+      @apply bg-white border-white;
       &::after {
-        @apply block border-white;
-      }
-      &:focus {
-        @apply bg-violet-700;
-      }
-    }
-    &:focus {
-      @apply outline-none border border-violet-700 bg-violet-200;
-    }
-    &:disabled {
-      @apply bg-gray-300 border-gray-100 cursor-not-allowed;
-      & ~ span {
-        @apply cursor-not-allowed;
-      }
-      &:checked {
-        @apply bg-white border-white;
-        &::after {
-          @apply block border-gray-100;
-        }
+        @apply block border-gray-100;
       }
     }
   }

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

@@ -58,7 +58,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     };
     checkedRows: {
         type: ArrayConstructor;
-        default: () => {};
+        default: () => never[];
         required: false;
     };
     headers: {
@@ -146,7 +146,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     };
     checkedRows: {
         type: ArrayConstructor;
-        default: () => {};
+        default: () => never[];
         required: false;
     };
     headers: {

package/dist/components/table/EUIDashboardTable.vue

@@ -223,7 +223,7 @@ const props = defineProps({
   paginated: { type: Boolean, default: false },
   tableExpanded: { type: Boolean, default: false },
   backendPagination: { type: Boolean, default: false },
-  checkedRows: { type: Array, default: () => ({}), required: false },
+  checkedRows: { type: Array, default: () => [], required: false },
   headers: {
     type: Array as PropType<Header[]>,
     default: () => ({}),

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

@@ -59,7 +59,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     };
     checkedRows: {
         type: ArrayConstructor;
-        default: () => {};
+        default: () => never[];
         required: true;
     };
     headers: {
@@ -151,7 +151,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     };
     checkedRows: {
         type: ArrayConstructor;
-        default: () => {};
+        default: () => never[];
         required: true;
     };
     headers: {

package/dist/components/table/EUITable.vue

@@ -269,7 +269,7 @@ const props = defineProps({
   paginated: { type: Boolean, default: false },
   tableExpanded: { type: Boolean, default: false },
   backendPagination: { type: Boolean, default: false },
-  checkedRows: { type: Array, default: () => ({}), required: true },
+  checkedRows: { type: Array, default: () => [], required: true },
   headers: {
     type: Array as PropType<Header[]>,
     default: () => ({}),

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

@@ -16,15 +16,15 @@ declare function __VLS_template(): {
         row: unknown;
         rowIndex: number;
     }) => any>> & {
-        loader?(_: {
-            loading: true;
-            height: string;
-        }): any;
         header?(_: {
             header: Header;
             index: number;
         }): any;
         headerOptionalItem?(_: {}): any;
+        loader?(_: {
+            loading: true;
+            height: string;
+        }): any;
         expanded?(_: {
             row: unknown;
             rowIndex: number;
@@ -62,7 +62,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     };
     checkedRows: {
         type: ArrayConstructor;
-        default: () => {};
+        default: () => never[];
         required: true;
     };
     headers: {
@@ -154,7 +154,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     };
     checkedRows: {
         type: ArrayConstructor;
-        default: () => {};
+        default: () => never[];
         required: true;
     };
     headers: {

package/dist/components/table/GrowthTable.vue

@@ -1,34 +1,17 @@
 <template>
   <div>
     <Transition name="fade" mode="out-in">
-      <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="relative w-full mx-auto overflow-hidden">
         <div
           id="growth-table"
           :class="[
             'scrollbar--thin overscroll-auto',
-            computedItems.length === 0 ? 'overflow-hidden' : 'overflow-auto',
+            computedItems.length === 0 || loading
+              ? 'overflow-hidden'
+              : 'overflow-auto',
             tableHeight
               ? tableHeight
-              : 'h-[calc(100svh-13rem)] max-h-[calc(100svh-13rem)]',
+              : 'h-[calc(100vh_-_13rem)] max-h-[calc(100vh_-_13rem)]',
           ]"
           ref="tableContainer"
           @scroll="handleScroll"
@@ -104,51 +87,93 @@
               </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
-                  "
-                >
-                  <template v-if="checkable">
-                    <td class="checkable">
-                      <EUITableCheckbox
-                        :disabled="!isRowCheckable(row)"
-                        :checked="isRowChecked(row)"
-                        @change="($event:boolean) => checkRow(row, rowIndex, $event)"
-                      />
-                    </td>
-                  </template>
+              <template v-if="loading">
+                <tr class="norecords">
                   <td
-                    v-for="(header, headerIndex) in headers"
-                    :key="headerIndex"
-                    :class="[
-                      isScrolled && headerIndex === 0 ? stickyClass.body : '',
-                    ]"
+                    :colspan="
+                      checkable === true ? headers.length + 1 : headers.length
+                    "
                   >
                     <slot
-                      :name="`item.${header.value}`"
-                      :row="row"
-                      :rowIndex="rowIndex"
+                      name="loader"
+                      :loading="loading"
+                      :height="tableHeight"
                     >
-                      {{ getValueByPath(row, header?.value) }}
+                      <div
+                        :class="[
+                          'overflow-hidden relative z-0 isolate bg-white backdrop-blur transition-colors duration-150 ease-in-out rounded-xl max-w-screen-xl w-full',
+                          tableHeight
+                            ? tableHeight
+                            : 'h-[calc(100vh-22rem)] max-h-[calc(100vh-22rem)]',
+                        ]"
+                      >
+                        <div
+                          class="absolute flex items-center justify-center z-[calc(infinity)] w-full h-auto pointer-events-none inset-0"
+                        >
+                          <EUICircleLoader />
+                        </div>
+                      </div>
                     </slot>
                   </td>
                 </tr>
-                <template v-if="tableExpanded">
-                  <slot name="expanded" :row="row" :rowIndex="rowIndex"></slot>
+              </template>
+              <template v-else-if="computedItems.length > 0">
+                <template
+                  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
+                    "
+                  >
+                    <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>
+                <!-- Filler row to push footer to bottom when items are few -->
+                <tr class="filler-row">
+                  <td
+                    :colspan="checkable ? headers.length + 1 : headers.length"
+                    class="!p-0 !h-auto !border-none"
+                  ></td>
+                </tr>
               </template>
               <template v-else-if="computedItems.length === 0">
                 <tr class="norecords">
@@ -159,7 +184,7 @@
                   >
                     <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"
+                        class="flex items-center justify-center border text-xl font-medium text-gray-500 h-[calc(100vh_-_23rem)] max-w-screen-xl"
                       >
                         No matching records found
                       </div>
@@ -170,7 +195,7 @@
             </tbody>
             <tfoot
               v-if="footers.length"
-              class="sticky bottom-0 left-0 z-50 bg-[#FEF3C7]"
+              class="sticky bottom-0 z-50 bg-[#FEF3C7]"
             >
               <template
                 v-if="footers.length > 0"
@@ -201,8 +226,14 @@
           </table>
         </div>
         <div
-          v-if="paginated && computedItems.length !== 0"
-          class="sticky bottom-0 left-0 z-50 flex items-center justify-between px-2 py-2 bg-gray-100"
+          v-if="paginated"
+          class="sticky bottom-0 left-0 z-50 flex items-center justify-between px-2 py-2 bg-gray-100 mt-2"
+          :class="[
+            {
+              'opacity-50 pointer-events-none cursor-none select-none':
+                computedItems.length === 0,
+            },
+          ]"
         >
           <slot name="tableCount">
             <div class="inline-flex items-center gap-x-10">
@@ -273,7 +304,7 @@ const props = defineProps({
   paginated: { type: Boolean, default: false },
   tableExpanded: { type: Boolean, default: false },
   backendPagination: { type: Boolean, default: false },
-  checkedRows: { type: Array, default: () => ({}), required: true },
+  checkedRows: { type: Array, default: () => [], required: true },
   headers: {
     type: Array as PropType<Header[]>,
     default: () => ({}),
@@ -330,9 +361,9 @@ const filteredItems = computed(() => {
       props.some((prop) =>
         defaultFilter(
           getValueByPath(item, prop),
-          search.value.toString().toLowerCase()
-        )
-      )
+          search.value.toString().toLowerCase(),
+        ),
+      ),
     );
   }
   return filteredItems;
@@ -364,7 +395,7 @@ const sortClass = computed(() => (header: any) => {
 
 const isIndeterminate = computed(() => {
   const validVisibleData = computedItems.value.filter((row) =>
-    isRowCheckable.value(row)
+    isRowCheckable.value(row),
   );
   return (
     newCheckedRows.value.length > 0 &&
@@ -381,7 +412,7 @@ const isAllChecked = computed(() => {
 
 const isAllUncheckable = computed(() => {
   const validVisibleData = computedItems.value?.filter((row) =>
-    isRowCheckable.value!(row)
+    isRowCheckable.value!(row),
   );
   return validVisibleData.length === 0;
 });
@@ -439,7 +470,7 @@ const checkAll = () => {
   } else {
     // Check all rows
     const rowsToCheck = computedItems.value.filter(
-      (row) => !newCheckedRows.value.includes(row)
+      (row) => !newCheckedRows.value.includes(row),
     );
     newCheckedRows.value.push(...rowsToCheck);
   }
@@ -467,7 +498,7 @@ watch(
   (newVal) => {
     newCurrentPage.value = newVal;
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 watch(
@@ -477,7 +508,7 @@ watch(
   },
   {
     immediate: true,
-  }
+  },
 );
 
 // table scroll to add class
@@ -529,7 +560,7 @@ watch(() => tableContainer.value?.clientWidth, checkOverflow);
 #growth-table {
   & table {
     // border-spacing: 0 0.5rem;
-    @apply min-w-full text-sm font-light text-left table table-auto w-full -mt-2 box-border border-separate border-spacing-y-2 relative;
+    @apply min-w-full text-sm font-light text-left w-full table table-auto -mt-2 box-border border-separate border-spacing-y-2 relative min-h-full;
     thead tr {
       @apply snap-x snap-mandatory;
       th {
@@ -542,7 +573,7 @@ watch(() => tableContainer.value?.clientWidth, checkOverflow);
     }
     tbody {
       @apply snap-y snap-mandatory snap-always;
-      tr:not(.norecords) {
+      tr:not(.norecords, .filler-row) {
         @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;
@@ -560,13 +591,20 @@ watch(() => tableContainer.value?.clientWidth, checkOverflow);
           }
         }
       }
+      tr.filler-row {
+        @apply h-full pointer-events-none;
+        td {
+          padding: 0 !important;
+          @apply h-auto border-none bg-transparent;
+        }
+      }
     }
     tfoot tr {
       @apply snap-x snap-mandatory;
       th {
         @apply snap-always snap-start last-of-type:rounded-r-xl first-of-type:rounded-l-xl font-semibold;
         &:first-of-type.empty {
-          @apply table-cell min-h-10 px-2 max-w-[45px] w-[45px] sticky left-0 top-0 z-20 bg-[#FEF3C7];
+          @apply table-cell min-h-10 px-2 max-w-11 w-11 sticky left-0 top-0 z-20 bg-[#FEF3C7];
         }
       }
     }

package/dist/components/table/GrowthTableView.vue

@@ -1,9 +1,10 @@
 <!-- <template>
-  <div class="max-w-screen-xl mx-auto">
-    <pre class="text-[0.5rem] p-2 border border-gray-300 rounded-lg max-h-72 overflow-y-auto">{{ selectedRows?.map(x => x?._id)}}</pre>
+  <div class="max-w-screen-xl pb-10 mx-auto">
+  <pre class="text-[0.5rem] p-2 border border-gray-300 rounded-lg max-h-72 overflow-y-auto">{{ selectedRows?.map(x => x?._id)}}</pre>
     <GrowthTable
       checkable
       paginated
+      v-model:selectedRows.sync="selectedRows"
       :checked-rows.sync="checkedRows"
       backend-pagination
       :per-page="limit"
@@ -14,6 +15,7 @@
       :default-sort-direction="defaultSortOrder"
       default-sort="introducer_details"
       :current-page="offset"
+      :table-loading="false"
       @sort="onSort"
       @mouseenter="select"
       @mouseleave="(selectedIndex = null), (selected = null)"
@@ -80,6 +82,7 @@ import { growthTableData, growthTableFooter, growthTableHeaders } from "../../da
 import GrowthTable from "./GrowthTable.vue";
 
 //TODO: Dashboard Table
+const selectedRows = ref([]);
 const checkedRows = ref([]);
 const defaultSortOrder = ref("asc");
 const limit = ref(5);