edvoyui-component-library-test-flight 0.0.232 → 0.0.234

package/dist/components/table/EUIDashboardTable.vue

@@ -172,6 +172,7 @@
                 >
                 <EUIPageLimit
                   :page-limit="limit"
+                  :disabled="loading"
                   @update-limit="changeLimit($event)"
                   @refetch="searchData($event)"
                 />
@@ -189,6 +190,7 @@
                 :activePage="newCurrentPage"
                 :pageLimit="limit"
                 :totalCount="total"
+                :disabled="loading"
                 @change-page="pageChanged($event)"
               />
             </slot>

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

@@ -8,6 +8,10 @@ declare const _default: import('../../../node_modules/vue').DefineComponent<impo
         type: BooleanConstructor;
         default: boolean;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {}, {}, {}, {}, import('../../../node_modules/vue').ComponentOptionsMixin, import('../../../node_modules/vue').ComponentOptionsMixin, {
     updateLimit: (...args: any[]) => void;
     refetch: (...args: any[]) => void;
@@ -20,10 +24,15 @@ declare const _default: import('../../../node_modules/vue').DefineComponent<impo
         type: BooleanConstructor;
         default: boolean;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     onUpdateLimit?: ((...args: any[]) => any) | undefined;
     onRefetch?: ((...args: any[]) => any) | undefined;
 }>, {
+    disabled: boolean;
     pageLimit: number;
     iconStyle: boolean;
 }, {}, {}, {}, string, import('../../../node_modules/vue').ComponentProvideOptions, true, {}, HTMLDivElement>;

package/dist/components/table/EUIPageLimit.vue

@@ -1,5 +1,9 @@
 <template>
-  <div>
+  <div
+    :class="{ 'pointer-events-none opacity-50 cursor-not-allowed': disabled }"
+    :aria-disabled="disabled"
+    :inert="disabled"
+  >
     <EUIPopover
       v-model:visible="popoverVisible"
       trigger="click"
@@ -57,12 +61,18 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
-const { pageLimit } = toRefs(props);
+const { pageLimit, disabled } = toRefs(props);
 const emit = defineEmits(["updateLimit", "refetch"]);
 const pageList = ref([5, 10, 20, 30, 40, 50, 100]);
 const popoverVisible = ref(false);
 const changePageLimit = (data: any) => {
+  if (disabled.value) return;
+
   emit("updateLimit", data);
   emit("refetch");
   popoverVisible.value = false;

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

@@ -13,6 +13,10 @@ declare const _default: import('../../../node_modules/vue').DefineComponent<impo
         type: NumberConstructor;
         default: number;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     divider: {
         type: StringConstructor;
         default: string;
@@ -39,6 +43,10 @@ declare const _default: import('../../../node_modules/vue').DefineComponent<impo
         type: NumberConstructor;
         default: number;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     divider: {
         type: StringConstructor;
         default: string;
@@ -51,6 +59,7 @@ declare const _default: import('../../../node_modules/vue').DefineComponent<impo
 }>> & Readonly<{
     onChangePage?: ((...args: any[]) => any) | undefined;
 }>, {
+    disabled: boolean;
     max: number;
     pageLimit: number;
     totalCount: number;

package/dist/components/table/EUIPagination.vue

@@ -4,9 +4,9 @@
       <button
         :class="[
           'rounded-md capitalize box-border border-none focus:outline-none inline-flex flex-row gap-x-2 items-center transition duration-150 ease-in-out bg-white text-black cursor-pointer text-sm font-medium px-3 py-2',
-          currentPage === 1 && 'opacity-50 pointer-events-none',
+          (disabled || currentPage === 1) && 'opacity-50 pointer-events-none cursor-not-allowed',
         ]"
-        :disabled="currentPage === 1 ? true : false"
+        :disabled="disabled || currentPage === 1"
         @click="prev()"
       >
         <ChevronDownStroke class="text-current transform rotate-90 size-6" />
@@ -19,10 +19,13 @@
           'rounded-md capitalize box-border border-none focus:outline-none inline-flex flex-row gap-x-2 items-center transition duration-150 ease-in-out  cursor-pointer text-sm font-medium px-3 py-2',
           i == '…'
             ? 'select-none pointer-events-none'
+            : disabled
+            ? 'opacity-50 pointer-events-none cursor-not-allowed'
             : currentPage == i
             ? 'text-white bg-violet-600'
             : 'bg-white text-black',
         ]"
+        :disabled="disabled || i === '…'"
         @click="typeof i === 'number' && changePage(i - 1)"
       >
         {{ i }}
@@ -32,9 +35,9 @@
       <button
         :class="[
           'rounded-md capitalize box-border border-none focus:outline-none inline-flex flex-row gap-x-2 items-center transition duration-150 ease-in-out bg-white text-black cursor-pointer text-sm font-medium px-3 py-2',
-          totalPages === currentPage && 'opacity-50 pointer-events-none',
+          (disabled || totalPages === currentPage) && 'opacity-50 pointer-events-none cursor-not-allowed',
         ]"
-        :disabled="totalPages === currentPage ? true : false"
+        :disabled="disabled || totalPages === currentPage"
         @click="next()"
       >
         <span class="hidden md:block">Next</span>
@@ -58,6 +61,9 @@ import ChevronDownStroke from '../../assets/svg/ChevronDownStroke.vue';
         activePage: {
             type: Number, default: 0
         },
+        disabled: {
+            type: Boolean, default: false
+        },
         divider: {
             type: String, default: '…'
         },
@@ -76,6 +82,8 @@ import ChevronDownStroke from '../../assets/svg/ChevronDownStroke.vue';
     });
 
     const prev = () => {
+        if (props.disabled) return
+
         if (props.activePage > 0) {
             const prevPage = props.activePage - 1
             changePage(prevPage)
@@ -83,6 +91,8 @@ import ChevronDownStroke from '../../assets/svg/ChevronDownStroke.vue';
     }
 
     const next = () => {
+        if (props.disabled) return
+
         if (props.activePage < totalPages.value - 1) {
             const nextPage = props.activePage + 1
             changePage(nextPage)
@@ -90,6 +100,8 @@ import ChevronDownStroke from '../../assets/svg/ChevronDownStroke.vue';
     }
 
     const changePage = (page: Number) => {
+        if (props.disabled) return
+
         emit('changePage', page)
     }
 
@@ -169,4 +181,4 @@ const displayedPages = computed(() => {
 
 <style scoped>
 
-</style>
+</style>

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

@@ -13,6 +13,10 @@ declare const _default: import('../../../node_modules/vue').DefineComponent<impo
         type: NumberConstructor;
         default: number;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     divider: {
         type: StringConstructor;
         default: string;
@@ -39,6 +43,10 @@ declare const _default: import('../../../node_modules/vue').DefineComponent<impo
         type: NumberConstructor;
         default: number;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     divider: {
         type: StringConstructor;
         default: string;
@@ -51,6 +59,7 @@ declare const _default: import('../../../node_modules/vue').DefineComponent<impo
 }>> & Readonly<{
     onChangePage?: ((...args: any[]) => any) | undefined;
 }>, {
+    disabled: boolean;
     max: number;
     pageLimit: number;
     totalCount: number;

package/dist/components/table/EUIStudentPagination.vue

@@ -4,9 +4,9 @@
       <button
         :class="[
           'rounded-md capitalize box-border border-none focus:outline-none inline-flex flex-row gap-x-2 items-center transition duration-150 ease-in-out bg-white text-black cursor-pointer text-sm font-medium px-3 py-1 leading-6',
-          currentPage === 1 && 'opacity-50 pointer-events-none',
+          (disabled || currentPage === 1) && 'opacity-50 pointer-events-none cursor-not-allowed',
         ]"
-        :disabled="currentPage === 1 ? true : false"
+        :disabled="disabled || currentPage === 1"
         @click="prev()"
       >
         <ChevronDownStroke class="text-current transform rotate-90 size-6" />
@@ -19,10 +19,13 @@
           'rounded-md capitalize box-border border-none focus:outline-none inline-flex flex-row gap-x-1 items-center transition-transform duration-100 ease-in-out cursor-pointer text-sm font-medium leading-6 px-3 py-1',
           i === '…'
             ? 'select-none pointer-events-none'
+            : disabled
+            ? 'opacity-50 pointer-events-none cursor-not-allowed'
             : currentPage === i
             ? 'text-black bg-purple-50 ring-2 ring-inset ring-purple-600'
             : 'bg-white text-black',
         ]"
+        :disabled="disabled || i === '…'"
         @click="typeof i === 'number' && changePage(i - 1)"
       >
         {{ i }}
@@ -32,9 +35,9 @@
       <button
         :class="[
           'rounded-md capitalize box-border border-none focus:outline-none inline-flex flex-row gap-x-2 items-center transition duration-150 ease-in-out bg-white text-black cursor-pointer text-sm font-medium px-3 py-1 leading-6',
-          totalPages === currentPage && 'opacity-50 pointer-events-none',
+          (disabled || totalPages === currentPage) && 'opacity-50 pointer-events-none cursor-not-allowed',
         ]"
-        :disabled="totalPages === currentPage ? true : false"
+        :disabled="disabled || totalPages === currentPage"
         @click="next()"
       >
         <span class="hidden md:block">Next</span>
@@ -58,6 +61,9 @@ import ChevronDownStroke from '../../assets/svg/ChevronDownStroke.vue';
         activePage: {
             type: Number, default: 0
         },
+        disabled: {
+            type: Boolean, default: false
+        },
         divider: {
             type: String, default: '…'
         },
@@ -77,6 +83,8 @@ import ChevronDownStroke from '../../assets/svg/ChevronDownStroke.vue';
     });
 
     const prev = () => {
+        if (props.disabled) return
+
         if (props.activePage > 0) {
             const prevPage = props.activePage - 1
             changePage(prevPage)
@@ -84,6 +92,8 @@ import ChevronDownStroke from '../../assets/svg/ChevronDownStroke.vue';
     }
 
     const next = () => {
+        if (props.disabled) return
+
         if (props.activePage < totalPages.value - 1) {
             const nextPage = props.activePage + 1
             changePage(nextPage)
@@ -91,6 +101,8 @@ import ChevronDownStroke from '../../assets/svg/ChevronDownStroke.vue';
     }
 
     const changePage = (page: Number) => {
+        if (props.disabled) return
+
         emit('changePage', page)
     }
 
@@ -169,4 +181,4 @@ const displayedPages = computed(() => {
 </script>
 
 <style scoped>
-</style>
+</style>

package/dist/components/table/EUITable.vue

@@ -213,6 +213,7 @@
                 <span class="text-sm font-medium text-gray-900">Per page</span>
                 <EUIPageLimit
                   :page-limit="limit"
+                  :disabled="loading"
                   @update-limit="changeLimit($event)"
                   @refetch="searchData($event)"
                   :iconStyle="false"
@@ -226,6 +227,7 @@
                 :activePage="newCurrentPage"
                 :pageLimit="limit"
                 :totalCount="total"
+                :disabled="loading"
                 @change-page="pageChanged($event)"
               />
             </slot>

package/dist/components/table/GrowthTable.vue

@@ -246,6 +246,7 @@
                 >
                 <EUIPageLimit
                   :page-limit="limit"
+                  :disabled="loading"
                   @update-limit="changeLimit($event)"
                   @refetch="searchData($event)"
                 />
@@ -258,6 +259,7 @@
                 :activePage="newCurrentPage"
                 :pageLimit="limit"
                 :totalCount="total"
+                :disabled="loading"
                 @change-page="pageChanged($event)"
               />
             </slot>

package/dist/components/table/UTable.vue

@@ -279,13 +279,12 @@
           <slot
             name="tableCount"
             :currentPage="newCurrentPage"
-            :from="newCurrentPage * limit + 1"
-            :to="(newCurrentPage + 1) * limit"
+            :from="rangeFrom"
+            :to="rangeTo"
           >
             <div class="inline-flex items-center self-stretch gap-x-3">
               <div class="text-sm font-normal text-gray-600">
-                {{ newCurrentPage * limit + 1 }} -
-                {{ (newCurrentPage + 1) * limit }} of {{ total }}
+                {{ rangeFrom }} - {{ rangeTo }} of {{ total }}
               </div>
               <div class="self-stretch w-px h-4 my-auto bg-gray-300"></div>
               <div class="inline-flex items-center gap-0">
@@ -293,6 +292,7 @@
                   > Items per page:</span>
                 <EUIPageLimit
                   :page-limit="limit"
+                  :disabled="loading"
                   @update-limit="changeLimit($event)"
                   @refetch="searchData($event)"
                 />
@@ -305,6 +305,7 @@
                 :activePage="newCurrentPage"
                 :pageLimit="limit"
                 :totalCount="total"
+                :disabled="loading"
                 @change-page="pageChanged($event)"
               />
             </slot>
@@ -418,6 +419,12 @@ const newCheckedRows = ref([...checkedRows.value]);
 const newCurrentPage = ref(currentPage.value);
 const limit = ref(props.perPage);
 const loading = computed(() => props.tableLoading);
+const rangeFrom = computed(() =>
+  total.value > 0 ? newCurrentPage.value * limit.value + 1 : 0
+);
+const rangeTo = computed(() =>
+  Math.min((newCurrentPage.value + 1) * limit.value, total.value)
+);
 
 // Computed Property