adminforth 2.4.0-next.26 → 2.4.0-next.261

package/dist/spa/src/afcl/Select.vue

@@ -1,55 +1,58 @@
 <template>
-  <div class="afcl-select-wrapper relative inline-block" ref="internalSelect" 
+  <div class="afcl-select afcl-select-wrapper relative inline-block" ref="internalSelect" 
     :class="{'opacity-50': readonly}"
   >
     <div class="relative">
       <input
         ref="inputEl"
         type="text"
-        :readonly="readonly"
+        :readonly="readonly || searchDisabled"
         v-model="search"
         @click="inputClick"
         @input="inputInput"
-        class="afcl-select block w-full pl-3 pr-10 py-2.5 border border-gray-300 rounded-md leading-5 bg-gray-50 placeholder-gray-500 sm:text-sm transition duration-150 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
+        class="block w-full pl-3 pr-10 py-2.5 border border-lightDropownButtonsBorder rounded-md leading-5 bg-lightDropdownButtonsBackground 
+        placeholder-lightDropdownButtonsPlaceholderText text-lightDropdownButtonsText sm:text-sm transition duration-150 ease-in-out dark:bg-darkDropdownButtonsBackground dark:border-darkDropdownButtonsBorder dark:placeholder-darkDropdownButtonsPlaceholderText
+        dark:text-darkDropdownButtonsText focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
         autocomplete="off" data-custom="no-autofill"
         :placeholder="
           selectedItems.length && !multiple ? '' :  (showDropdown ? $t('Search') : placeholder || $t('Select...')) 
         "
       />
 
-      <div v-if="!multiple && selectedItems.length" class="absolute pointer-events-none inset-y-0 left-2 flex items-center pr-2 px-1">
+      <div v-if="!multiple && selectedItems.length" class="text-lightDropdownButtonsText dark:text-darkDropdownButtonsText absolute pointer-events-none inset-y-0 left-2 flex items-center pr-2 px-1">
         <slot 
           name="selected-item" 
           :option="selectedItems[0]"
         ></slot>
-        <span v-if="!$slots['selected-item']" class="text-lightPrimary dark:text-white font-medium  ">
+        <span v-if="!$slots['selected-item']" class="text-lightDropdownButtonsText dark:text-darkDropdownButtonsText font-medium  ">
           {{ selectedItems[0]?.label }}
         </span>
       </div>
 
       <div class="absolute inset-y-0 right-2 flex items-center pointer-events-none">
         <!-- triangle icon -->
-        <IconCaretDownSolid class="h-5 w-5 text-lightPrimary dark:text-gray-400 opacity-50 transition duration-150 ease-in"
+        <IconCaretDownSolid class="h-5 w-5 text-lightPrimary dark:text-darkPrimary opacity-50 transition duration-150 ease-in"
           :class="{ 'transform rotate-180': showDropdown }"
         />
       </div>
     </div>
-    <teleport to="body" v-if="teleportToBody && showDropdown">
-      <div ref="dropdownEl" :style="getDropdownPosition" :class="{'shadow-none': isTop}"
-        class="fixed z-[5] w-full bg-white shadow-lg dark:shadow-black dark:bg-gray-700 
-          dark:border-gray-600 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm max-h-48">
+    <teleport to="body" v-if="(teleportToBody  || teleportToTop) && showDropdown">
+      <div ref="dropdownEl" :style="getDropdownPosition" :class="{'shadow-none': isTop, 'z-[5]': teleportToBody, 'z-[1000]': teleportToTop}"
+        class="fixed w-full bg-lightDropdownOptionsBackground shadow-lg dark:shadow-black dark:bg-darkDropdownOptionsBackground
+          dark:border-gray-600 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm max-h-48"
+        @scroll="handleDropdownScroll">
         <div
           v-for="item in filteredItems"
           :key="item.value"
-          class="px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400"
-          :class="{ 'bg-lightPrimaryOpacity dark:bg-darkPrimaryOpacity': selectedItems.includes(item) }"
+          class="px-4 py-2 cursor-pointer hover:bg-lightDropdownOptionsHoverBackground dark:hover:bg-darkDropdownOptionsHoverBackground text-lightDropdownOptionsText dark:text-darkDropdownOptionsText"
+          :class="{ 'bg-lightDropdownPicked dark:bg-darkDropdownPicked': selectedItems.includes(item) }"
           @click="toogleItem(item)"
         >
           <slot name="item" :option="item"></slot>
           <label v-if="!$slots.item" :for="item.value">{{ item.label }}</label>
         </div>
-        <div v-if="!filteredItems.length" class="px-4 py-2 cursor-pointer text-gray-400 dark:text-gray-300">
-          {{ options.length ? $t('No results found') : $t('No items here') }}
+        <div v-if="!filteredItems.length" class="px-4 py-2 cursor-pointer text-lightDropdownOptionsText dark:text-darkDropdownOptionsText">
+          {{ options?.length ? $t('No results found') : $t('No items here') }}
         </div>
 
         <div v-if="$slots['extra-item']" class="px-4 py-2 dark:text-gray-400">
@@ -58,24 +61,24 @@
       </div>
     </teleport>
 
-    <div v-if="!teleportToBody && showDropdown" ref="dropdownEl" :style="dropdownStyle" :class="{'shadow-none': isTop}"
-      class="absolute z-10 mt-1 w-full bg-white shadow-lg dark:shadow-black dark:bg-gray-700 
-        dark:border-gray-600 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm max-h-48">
+    <div v-if="!teleportToBody && !teleportToTop && showDropdown" ref="dropdownEl" :style="dropdownStyle" :class="{'shadow-none': isTop}"
+      class="absolute z-10 mt-1 w-full bg-lightDropdownOptionsBackground shadow-lg text-lightDropdownButtonsText dark:shadow-black dark:bg-darkDropdownOptionsBackground
+        dark:border-gray-600 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm max-h-48"
+        @scroll="handleDropdownScroll">
       <div
         v-for="item in filteredItems"
         :key="item.value"
-        class="px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400"
-        :class="{ 'bg-lightPrimaryOpacity dark:bg-darkPrimaryOpacity': selectedItems.includes(item) }"
+        class="px-4 py-2 cursor-pointer text-lightDropdownOptionsText hover:bg-lightDropdownOptionsHoverBackground dark:hover:bg-darkDropdownOptionsHoverBackground dark:text-darkDropdownOptionsText"
+        :class="{ 'bg-lightDropdownPicked dark:bg-darkDropdownPicked': selectedItems.includes(item) }"
         @click="toogleItem(item)"
       >
         <slot name="item" :option="item"></slot>
         <label v-if="!$slots.item" :for="item.value">{{ item.label }}</label>
       </div>
-      <div v-if="!filteredItems.length" class="px-4 py-2 cursor-pointer text-gray-400 dark:text-gray-300">
-        {{ options.length ? $t('No results found') : $t('No items here') }}
+      <div v-if="!filteredItems.length" class="px-4 py-2 cursor-pointer text-lightDropdownOptionsText dark:text-darkDropdownOptionsText">
+        {{ options?.length ? $t('No results found') : $t('No items here') }}
       </div>
-
-      <div v-if="$slots['extra-item']"  class="px-4 py-2 dark:text-gray-400">
+      <div v-if="$slots['extra-item']"  class="px-4 py-2 dark:text-darkDropdownOptionsText">
         <slot name="extra-item"></slot>
       </div>
 
@@ -87,12 +90,12 @@
       <template v-for="item in selectedItems" :key="`afcl-select-${item.value}`">
         <slot name="selected-item" :item="item"></slot>
         <div v-if="!$slots['selected-item']"
-          class="bg-lightPrimaryOpacity text-lightPrimary text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-darkPrimaryOpacity dark:text-darkPrimary">
+          class="bg-lightDropdownMultipleSelectBackground text-lightDropdownMultipleSelectText text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-darkDropdownMultipleSelectBackground dark:text-darkDropdownMultipleSelectText">
           <span>{{ item.label }}</span>
           <button
             type="button"
             @click="toogleItem(item)"
-            class="z-index-100 flex-shrink-0 ml-1 h-4 w-4 -mr-1 rounded-full inline-flex items-center justify-center text-gray-400 hover:text-gray-500 focus:outline-none focus:text-gray-500 focus:bg-gray-100"
+            class="z-index-100 flex-shrink-0 ml-1 h-4 w-4 -mr-1 rounded-full inline-flex items-center justify-center text-lightDropdownMultipleSelectIcon hover:text-lightDropdownMultipleSelectIconHover dark:text-darkDropdownMultipleSelectIcon dark:hover:text-darkDropdownMultipleSelectIconHover focus:outline-none focus:text-lightDropdownMultipleSelectIconFocus focus:bg-lightDropdownMultipleSelectIconFocusBackground dark:focus:text-darkDropdownMultipleSelectIconFocus dark:focus:bg-darkDropdownMultipleSelectIconFocusBackground"
           >
             <span class="sr-only">{{ $t('Remove item') }}</span>
             <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
@@ -111,14 +114,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch, type Ref } from 'vue';
+import { ref, computed, onMounted, onUnmounted, watch, nextTick,type PropType, type Ref } from 'vue';
 import { IconCaretDownSolid } from '@iconify-prerendered/vue-flowbite';
 import { useElementSize } from '@vueuse/core'
 
 const props = defineProps({
   options: Array,
   modelValue: {
-    default: undefined,
+    type: Array as PropType<(string | number)[]>,
+    default: () => [],
   },
   multiple: {
     type: Boolean,
@@ -132,13 +136,21 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  searchDisabled: {
+    type: Boolean,
+    default: false,
+  },
   teleportToBody: {
     type: Boolean,
     default: false,
   },
+  teleportToTop: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'scroll-near-end', 'search']);
 
 const search = ref('');
 const showDropdown = ref(false);
@@ -159,24 +171,27 @@ function inputInput() {
     selectedItems.value = [];
     emit('update:modelValue', null);
   }
+  if (!props.searchDisabled) {
+    emit('search', search.value);
+  }
 }
 
 function updateFromProps() {
   if (props.modelValue !== undefined) {
     if (!props.multiple) {
-      const el = props.options.find(item => item.value === props.modelValue);
+      const el = props.options?.find((item: any) => item.value === props.modelValue);
       if (el) {
         selectedItems.value = [el];
       } else {
         selectedItems.value = [];
       }
     } else {
-      selectedItems.value = props.options.filter(item => props.modelValue.includes(item.value));
+      selectedItems.value = props.options?.filter((item: any) => props.modelValue?.includes(item.value)) || [];
     }
   }
 }
 
-function inputClick() {
+async function inputClick() {
   if (props.readonly) return;
   // Toggle local dropdown
   showDropdown.value = !showDropdown.value;
@@ -184,6 +199,11 @@ function inputClick() {
   if (!showDropdown.value && !search.value) {
     search.value = '';
   }
+
+  if(props.teleportToBody){
+    await nextTick();
+    handleScroll();
+  }
 }
 
 watch(
@@ -221,6 +241,15 @@ const handleScroll = () => {
   }
 };
 
+const handleDropdownScroll = (event: Event) => {
+  const target = event.target as HTMLElement;
+  const threshold = 10; // pixels from bottom
+  
+  if (target.scrollTop + target.clientHeight >= target.scrollHeight - threshold) {
+    emit('scroll-near-end');
+  }
+};
+
 onMounted(() => {
   updateFromProps();
 
@@ -240,8 +269,13 @@ onMounted(() => {
   }
 });
 
-const filteredItems = computed(() => {
-  return props.options.filter(item =>
+const filteredItems: Ref<any[]> = computed(() => {
+
+  if (props.searchDisabled) {
+    return props.options || [];
+  }
+  
+  return (props.options || []).filter((item: any) =>
     item.label.toLowerCase().includes(search.value.toLowerCase())
   );
 });
@@ -262,7 +296,7 @@ const removeClickListener = () => {
   document.removeEventListener('click', handleClickOutside);
 };
 
-const toogleItem = (item) => {
+const toogleItem = (item: any) => {
   if (selectedItems.value.includes(item)) {
     selectedItems.value = selectedItems.value.filter(i => i.value !== item.value);
   } else {

package/dist/spa/src/afcl/Skeleton.vue

@@ -1,20 +1,20 @@
 <template>
-    <div v-if="type === 'image'" role="status" class="flex animate-pulse items-center justify-center bg-gray-300 rounded dark:bg-gray-700">
-        <svg class="w-10 h-10 text-gray-200 dark:text-gray-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
+    <div v-if="type === 'image'" role="status" class="flex animate-pulse items-center justify-center bg-lightSkeletonBackgroundColor rounded dark:bg-darkSkeletonBackgroundColor">
+        <svg class="w-10 h-10 text-lightSkeletonIconColor dark:text-darkSkeletonIconColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
             <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z"/>
         </svg>
     </div>
-    <div v-else-if="type === 'video'" role="status" class="flex items-center justify-center max-w-sm bg-gray-300 rounded-lg animate-pulse dark:bg-gray-700">
-        <svg class="w-10 h-10 text-gray-200 dark:text-gray-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 20">
+    <div v-else-if="type === 'video'" role="status" class="flex items-center justify-center max-w-sm bg-lightSkeletonBackgroundColor rounded-lg animate-pulse dark:bg-darkSkeletonBackgroundColor">
+        <svg class="w-10 h-10 text-lightSkeletonIconColor dark:text-darkSkeletonIconColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 20">
             <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z"/>
             <path d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM9 13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2Zm4 .382a1 1 0 0 1-1.447.894L10 13v-2l1.553-1.276a1 1 0 0 1 1.447.894v2.764Z"/>
         </svg>
         <span class="sr-only">Loading...</span>
     </div>
-    <svg v-else-if="type === 'avatar'" class="me-3 animate-pulse text-gray-200 dark:text-gray-700" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+    <svg v-else-if="type === 'avatar'" class="me-3 animate-pulse text-lightSkeletonIconColor dark:text-darkSkeletonBackgroundColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
         <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
     </svg>
-    <div v-else role="status" class="flex items-center justify-center animate-pulse bg-gray-200 rounded-full dark:bg-gray-700">
+    <div v-else role="status" class="flex items-center justify-center animate-pulse bg-lightSkeletonIconColor rounded-full dark:bg-darkSkeletonBackgroundColor">
         <span class="sr-only">Loading...</span>
     </div>
 </template>

package/dist/spa/src/afcl/Table.vue

@@ -1,79 +1,140 @@
 <template>
-
-<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
-  <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-      <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
-        <tr>
-          <th scope="col" class="px-6 py-3"
-            v-for="column in columns"
-          >
-            <slot v-if="$slots[`header:${column.fieldName}`]" :name="`header:${column.fieldName}`" :column="column" />
-            
-            <span v-else>
-              {{ column.label }}
-            </span>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="(item, index) in dataPage"
-          :class="{
-            'odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800': evenHighlights,
-            'border-b dark:border-gray-700': index !== dataPage.length - 1 || totalPages > 1,
-          }"
-        >
-          <td class="px-6 py-4" 
-            v-for="column in props.columns"
-          >
-            <slot v-if="$slots[`cell:${column.fieldName}`]" 
-              :name="`cell:${column.fieldName}`" 
-              :item="item" :column="column"
+  <div class="afcl-table-container relative overflow-x-auto shadow-md rounded-lg">
+    <div class="overflow-x-auto w-full">
+      <table class="afcl-table w-full text-sm text-left rtl:text-right text-lightTableText dark:text-darkTableText overflow-x-auto">
+          <thead class="afcl-table-thread text-xs text-lightTableHeadingText uppercase bg-lightTableHeadingBackground dark:bg-darkTableHeadingBackground dark:text-darkTableHeadingText">
+            <tr>
+              <th scope="col" class="px-6 py-3" ref="headerRefs" :key="`header-${column.fieldName}`"
+                v-for="column in columns"
+              >
+                <slot v-if="$slots[`header:${column.fieldName}`]" :name="`header:${column.fieldName}`" :column="column" />
+                
+                <span v-else>
+                  {{ column.label }}
+                </span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <SkeleteLoader 
+              v-if="isLoading || props.isLoading" 
+              :rows="pageSize" 
+              :columns="columns.length" 
+              :row-heights="rowHeights"
+              :column-widths="columnWidths"
+            />
+            <tr v-else-if="!isLoading && !props.isLoading && dataPage.length === 0" class="afcl-table-empty-body">
+              <td :colspan="columns.length" class="px-6 py-12 text-center">
+                <div class="flex flex-col items-center justify-center text-lightTableText dark:text-darkTableText">
+                  <IconTableRowOutline class="w-10 h-10 mb-4 text-gray-400 dark:text-gray-500" />
+                  <p class="text-md">{{ $t('No data available') }}</p>
+                </div>
+              </td>
+            </tr>
+            <tr
+              v-else="!isLoading && !props.isLoading"
+              v-for="(item, index) in dataPage"
+              :key="`row-${index}`"
+              ref="rowRefs"
+              :class="{
+                'afcl-table-body odd:bg-lightTableOddBackground odd:dark:bg-darkTableOddBackground even:bg-lightTableEvenBackground even:dark:bg-darkTableEvenBackground': evenHighlights,
+                'border-b border-lightTableBorder dark:border-darkTableBorder': index !== dataPage.length - 1 || totalPages > 1,
+              }"
             >
-            </slot>
-            <span v-else>
-              {{ item[column.fieldName] }}
-            </span>
-          </td>
-        </tr>
-      </tbody>
-  </table>
-  <nav class="flex items-center flex-column flex-wrap md:flex-row justify-between p-4" 
-    v-if="totalPages > 1"
-    :aria-label="$t('Table navigation')">
+              <td class="px-6 py-4" :key="`cell-${index}-${column.fieldName}`"
+                v-for="column in props.columns"
+              >
+                <slot v-if="$slots[`cell:${column.fieldName}`]" 
+                  :name="`cell:${column.fieldName}`" 
+                  :item="item" :column="column"
+                >
+                </slot>
+                <span v-else-if="!isLoading || props.isLoading" >
+                  {{ item[column.fieldName] }}
+                </span>
+                <div v-else>
+                  <div class=" w-full">
+                    <Skeleton class="h-4" />
+                  </div>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+      </table>
+    </div>
+    <nav class="afcl-table-pagination-container bg-lightTableBackground dark:bg-darkTableBackground mt-2 flex flex-col gap-2 items-center sm:flex-row justify-center sm:justify-between px-4 pb-4" 
+      v-if="totalPages > 1"
+      :aria-label="$t('Table navigation')">
     <i18n-t 
-      keypath="Showing {from} to {to} of {total}" tag="span" class="text-sm font-normal text-gray-500 dark:text-gray-400 mb-4 md:mb-0 block w-full md:inline md:w-auto"
+      keypath="Showing {from} to {to} of {total}" tag="span" class="afcl-table-pagination-text text-sm font-normal text-center text-lightTablePaginationText dark:text-darkTablePaginationText sm:mb-4 md:mb-0 block w-full md:inline md:w-auto"
     >
-      <template #from><span class="font-semibold text-gray-900 dark:text-white">{{ Math.min((currentPage - 1) * props.pageSize + 1, props.data.length) }}</span></template>
-      <template #to><span class="font-semibold text-gray-900 dark:text-white">{{ Math.min(currentPage * props.pageSize, props.data.length) }}</span></template>
-      <template #total><span class="font-semibold text-gray-900 dark:text-white">{{ props.data.length }}</span></template>
+      <template #from><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ Math.min((currentPage - 1) * props.pageSize + 1, dataResult.total) }}</span></template>
+      <template #to><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ Math.min(currentPage * props.pageSize, dataResult.total) }}</span></template>
+      <template #total><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ dataResult.total }}</span></template>
     </i18n-t>
+    <div class="af-pagination-container flex flex-row items-center xs:flex-row xs:justify-between xs:items-center gap-3">
+      <div class="inline-flex" :class="isLoading || props.isLoading ? 'pointer-events-none select-none opacity-50' : ''">
+          <!-- Buttons -->
+          <button
+            class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-lightActivePaginationButtonText bg-lightActivePaginationButtonBackground border-r-0 rounded-s hover:opacity-90 dark:bg-darkActivePaginationButtonBackground dark:text-darkActivePaginationButtonText disabled:opacity-50"
+            @click="currentPage--; pageInput = currentPage.toString();" 
+            :disabled="currentPage <= 1 || isLoading || props.isLoading">
+            <svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                viewBox="0 0 14 10">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M13 5H1m0 0 4 4M1 5l4-4"/>
+            </svg>
+          </button>
+          <button
+            class="flex items-center py-1 px-3 text-sm font-medium text-lightUnactivePaginationButtonText focus:outline-none bg-lightUnactivePaginationButtonBackground border-r-0  border border-lightUnactivePaginationButtonBorder hover:bg-lightUnactivePaginationButtonHoverBackground hover:text-lightUnactivePaginationButtonHoverText dark:bg-darkUnactivePaginationButtonBackground dark:text-darkUnactivePaginationButtonText dark:border-darkUnactivePaginationButtonBorder dark:hover:text-darkUnactivePaginationButtonHoverText dark:hover:bg-darkUnactivePaginationButtonHoverBackground disabled:opacity-50"
+            @click="switchPage(1); pageInput = currentPage.toString();" 
+            :disabled="currentPage <= 1 || isLoading || props.isLoading">
+            <!-- <IconChevronDoubleLeftOutline class="w-4 h-4" /> -->
+            1
+          </button>
+          <div
+            :contenteditable="!isLoading && !props.isLoading"
+            class="min-w-10 outline-none inline-block w-auto py-1.5 px-3 text-sm text-center text-lightTablePaginationInputText border border-lightTablePaginationInputBorder bg-lightTablePaginationInputBackground dark:border-darkTablePaginationInputBorder dark:text-darkTablePaginationInputText dark:bg-darkTablePaginationInputBackground z-10"
+            @keydown="onPageKeydown($event)"
+            @input="onPageInput($event)"
+            @blur="validatePageInput()"
+          >
+            {{ pageInput }}
+          </div>
 
-    <ul class="inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
-      <li v-for="page in totalPages" :key="page">
-        <a href="#" 
-          @click.prevent="switchPage(page)"
-          :aria-current="page === page ? 'page' : undefined"
-          :class='{
-            "text-blue-600 bg-lightPrimary text-lightPrimaryContrast dark:bg-darkPrimary dark:text-darkPrimaryContrast hover:opacity-90": page === currentPage,
-            "text-gray-500 border bg-white border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white": page !== currentPage,
-            "rounded-s-lg ms-0": page === 1,
-            "rounded-e-lg": page === totalPages,
-          }'
-          class="flex items-center justify-center px-3 h-8 leading-tight ">
-          {{ page }}
-        </a>
-      </li>
-    </ul>
-  </nav>
-</div>
-
+          <button
+            class="flex items-center py-1 px-3 text-sm font-medium text-lightUnactivePaginationButtonText focus:outline-none bg-lightUnactivePaginationButtonBackground border-l-0  border border-lightUnactivePaginationButtonBorder hover:bg-lightUnactivePaginationButtonHoverBackground hover:text-lightUnactivePaginationButtonHoverText dark:bg-darkUnactivePaginationButtonBackground dark:text-darkUnactivePaginationButtonText dark:border-darkUnactivePaginationButtonBorder dark:hover:text-darkUnactivePaginationButtonHoverText dark:hover:bg-darkUnactivePaginationButtonHoverBackground disabled:opacity-50"
+            @click="currentPage = totalPages; pageInput = currentPage.toString();" 
+            :disabled="currentPage >= totalPages || isLoading || props.isLoading"
+          >
+            {{ totalPages }}
 
-  
+          </button>
+          <button
+            class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-lightActivePaginationButtonText focus:outline-none bg-lightActivePaginationButtonBackground border-l-0 rounded-e hover:opacity-90 dark:bg-darkActivePaginationButtonBackground dark:text-darkActivePaginationButtonText disabled:opacity-50"
+            @click="currentPage++; pageInput = currentPage.toString();" 
+            :disabled="currentPage >= totalPages || isLoading || props.isLoading"
+          >
+            <svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                viewBox="0 0 14 10">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M1 5h12m0 0L9 1m4 4L9 9"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </nav>
+  </div>
 </template>
 
 <script setup lang="ts">
-  import { ref, type Ref, computed } from 'vue';
+  import { ref, computed, useTemplateRef, watch, onMounted } from 'vue';
+  import SkeleteLoader from '@/components/SkeleteLoader.vue';
+  import { IconTableRowOutline } from '@iconify-prerendered/vue-flowbite';
+
+  defineExpose({
+    refreshTable
+  })
 
   const props = withDefaults(
     defineProps<{
@@ -83,34 +144,112 @@
       }[],
       data: {
         [key: string]: any,
-      }[],
+      }[] | ((params: { offset: number, limit: number }) => Promise<{data: {[key: string]: any}[], total: number}>),
       evenHighlights?: boolean,
       pageSize?: number,
+      isLoading?: boolean,
     }>(), {
       evenHighlights: true,
-      pageSize: 10,
+      pageSize: 5,
     }
   );
 
+  const pageInput = ref('1');
+  const rowRefs = useTemplateRef<HTMLElement[]>('rowRefs');
+  const headerRefs = useTemplateRef<HTMLElement[]>('headerRefs');
+  const rowHeights = ref<number[]>([]);
+  const columnWidths = ref<number[]>([]);
   const currentPage = ref(1);
+  const isLoading = ref(false);
+  const dataResult = ref<{data: {[key: string]: any}[], total: number}>({data: [], total: 0});
+  const isAtLeastOneLoading = ref<boolean[]>([false]);
+
+  onMounted(() => {
+    refresh();
+  });
+
+  watch([currentPage, () => props.data], async () => {
+    refresh();
+  });
+
+  watch(() => currentPage.value, () => {
+    rowHeights.value = !rowRefs.value ? [] : rowRefs.value.map((el: HTMLElement) => el.offsetHeight);
+    columnWidths.value = !headerRefs.value ? [] : headerRefs.value.map((el: HTMLElement) => el.offsetWidth);
+  });
+
+  watch([isLoading, () => props.isLoading], () => {
+    emit('update:tableLoading', isLoading.value || props.isLoading);
+  });
 
   const totalPages = computed(() => {
-    return Math.ceil(props.data.length / props.pageSize);
+    return dataResult.value?.total ? Math.ceil(dataResult.value.total / props.pageSize) : 1;
   });
 
   const dataPage = computed(() => {
-    const start = (currentPage.value - 1) * props.pageSize;
-    const end = start + props.pageSize;
-    return props.data.slice(start, end);
+    return dataResult.value?.data;
   });
 
   function switchPage(p: number) {
     currentPage.value = p;
+    pageInput.value = p.toString();
   }
 
-  const emites = defineEmits([
-    'update:activeTab',
+  const emit = defineEmits([
+    'update:tableLoading',
   ]);
   
+  function onPageInput(event: any) {
+    pageInput.value = event.target.innerText;
+  }
+
+  function validatePageInput() {
+    const newPage = parseInt(pageInput.value) || 1;
+    const validPage = Math.max(1, Math.min(newPage, totalPages.value));
+    currentPage.value = validPage;
+    pageInput.value = validPage.toString();
+  }
+
+  watch(() => currentPage.value, (newPage) => {
+    pageInput.value = newPage.toString();
+  });
+
+  async function onPageKeydown(event: any) {
+    // page input should accept only numbers, arrow keys and backspace
+    if (['Enter', 'Space'].includes(event.code) ||
+      (!['Backspace', 'ArrowRight', 'ArrowLeft'].includes(event.code)
+      && isNaN(Number(String.fromCharCode(event.keyCode || 0))))) {
+      event.preventDefault();
+      if (event.code === 'Enter') {
+        validatePageInput();
+        event.target.blur();
+      }
+    }
+  }
+
+  async function refresh() {
+    if (typeof props.data === 'function') {
+      isLoading.value = true;
+      const currentLoadingIndex = currentPage.value;
+      isAtLeastOneLoading.value[currentLoadingIndex] = true;
+      const result = await props.data({ offset: (currentLoadingIndex - 1) * props.pageSize, limit: props.pageSize });
+      isAtLeastOneLoading.value[currentLoadingIndex] = false;
+      if (isAtLeastOneLoading.value.every(v => v === false)) {
+        isLoading.value = false;
+      }
+      dataResult.value = result;
+    } else if (typeof props.data === 'object' && Array.isArray(props.data)) {
+      const start = (currentPage.value - 1) * props.pageSize;
+      const end = start + props.pageSize;
+      dataResult.value = { data: props.data.slice(start, end), total: props.data.length };
+    }
+  }
+
+  function refreshTable() {
+    if ( currentPage.value !== 1 ) {
+      currentPage.value = 1;
+    } else {
+      refresh();
+    }
+  }
 
 </script>

package/dist/spa/src/afcl/Textarea.vue

@@ -0,0 +1,31 @@
+<template> 
+
+    <textarea
+      ref="input"
+      class="bg-lightInputBackground border border-lightInputBorder text-lightInputText placeholder-lightInputPlaceholderText text-sm rounded-lg block w-full p-2.5 dark:bg-darkInputBackground dark:border-darkInputBorder dark:placeholder-darkInputPlaceholderText dark:text-darkInputText dark:border-darkInputBorder focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder"
+      :placeholder="placeholder"
+      :value="modelValue"
+      @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+      :readonly="readonly"
+    />
+
+</template>
+
+<script setup lang="ts">
+
+import { ref } from 'vue';
+
+const props = defineProps<{
+  modelValue: string,
+  readonly?: boolean,
+  placeholder?: string,
+}>()
+
+const input = ref<HTMLInputElement | null>(null)
+
+defineExpose({
+  focus: () => input.value?.focus(),
+});
+
+</script>
+