adminforth 2.7.18 → 2.8.0

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

@@ -1,79 +1,135 @@
 <template>
-
-<div class="afcl-table-container relative overflow-x-auto shadow-md sm:rounded-lg">
-  <table class="afcl-table w-full text-sm text-left rtl:text-right text-lightTableText dark:text-darkTableText">
-      <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"
-            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="{
-            '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,
-          }"
-        >
-          <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 sm: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="afcl-table-pagination-container bg-lightTableBackground dark:bg-darkTableBackground 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="afcl-table-pagination-text text-sm font-normal text-lightTablePaginationText dark:text-darkTablePaginationText 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-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ Math.min((currentPage - 1) * props.pageSize + 1, props.data.length) }}</span></template>
-      <template #to><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ Math.min(currentPage * props.pageSize, props.data.length) }}</span></template>
-      <template #total><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ 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">
+          <!-- 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">
+            <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">
+            <!-- <IconChevronDoubleLeftOutline class="w-4 h-4" /> -->
+            1
+          </button>
+          <div
+            contenteditable="true" 
+            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="afcl-table-pagination-list 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='{
-            "afcl-table-pagination-button text-blue-600 bg-lightActivePaginationButtonBackground text-lightActivePaginationButtonText dark:bg-darkActivePaginationButtonBackground dark:text-darkActivePaginationButtonText hover:opacity-90": page === currentPage,
-            "text-lightUnactivePaginationButtonText border bg-lightUnactivePaginationButtonBackground border-lightUnactivePaginationButtonBorder hover:bg-lightUnactivePaginationButtonHoverBackground hover:text-lightUnactivePaginationButtonHoverText dark:bg-darkUnactivePaginationButtonBackground dark:border-darkUnactivePaginationButtonBorder dark:text-darkUnactivePaginationButtonText dark:hover:bg-darkUnactivePaginationButtonHoverBackground dark:hover:text-darkUnactivePaginationButtonHoverText": 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">
+            {{ totalPages }}
 
-  
+            <!-- <IconChevronDoubleRightOutline class="w-4 h-4" /> -->
+          </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">
+            <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 +139,108 @@
       }[],
       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);
+  });
 
   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',
   ]);
   
+  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 {
+      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>
+  

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

@@ -5,9 +5,9 @@
             value="" class="sr-only peer" 
             :disabled="props.disabled"
             :checked="props.modelValue"
-            @change="$emit('update:modelValue', $event.target.checked)"
+            @change="$emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
             > 
-            <div class="border border-lightToggleBorderUnactive relative min-w-11 min-h-6 bg-lightToggleBgUnactive peer-focus:outline-none peer-focus:ring-4 
+            <div class="afcl-toggle border border-lightToggleBorderUnactive relative min-w-11 min-h-6 bg-lightToggleBgUnactive peer-focus:outline-none peer-focus:ring-4 
                 peer-focus:ring-lightToggleRing dark:peer-focus:ring-darkToggleRing rounded-full peer dark:bg-darkToggleBgUnactive 
                 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:top-[2px] peer-checked:border-none 
                 peer-checked:after:border-lightToggleBorderActive  after:content-[''] after:absolute after:top-[1px] 

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

@@ -10,7 +10,6 @@
     <slot name="tooltip"></slot>
     <div class="tooltip-arrow" data-popper-arrow></div>
   </div>
-
 </template>
 
 <script setup lang="ts">

package/dist/spa/src/afcl/index.ts

@@ -22,4 +22,4 @@ export { default as CountryFlag } from './CountryFlag.vue';
 export { default as JsonViewer } from './JsonViewer.vue';
 export { default as Toggle } from './Toggle.vue';
 export { default as DatePicker } from './DatePicker.vue';
-
+export { default as Textarea } from './Textarea.vue';

package/dist/spa/src/components/AcceptModal.vue

@@ -6,7 +6,7 @@ const modalStore = useModalStore();
 
 <template>
   <Teleport to="body">
-    <div  v-if="modalStore.isOpened"  class="bg-gray-900/50 dark:bg-gray-900/80  overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-full max-h-full">
+    <div  v-if="modalStore.isOpened"  class="bg-gray-900/50 dark:bg-gray-900/80  overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-[100] justify-center items-center w-full md:inset-0 h-full max-h-full">
         <div class="relative p-4 w-full max-w-md max-h-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 " >
             <div class="afcl-confirmation-container relative bg-lightAcceptModalBackground rounded-lg shadow dark:bg-darkAcceptModalBackground dark:shadow-black">
                 <button type="button"@click="modalStore.togleModal" class="absolute top-3 end-2.5 text-lightAcceptModalCloseIcon bg-transparent hover:bg-lightAcceptModalCloseIconHoverBackground hover:text-lightAcceptModalCloseIconHover rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:text-darkAcceptModalCloseIcon dark:hover:bg-darkAcceptModalCloseIconHoverBackground dark:hover:text-darkAcceptModalCloseIconHover" >

package/dist/spa/src/components/ColumnValueInput.vue

@@ -67,6 +67,7 @@
       step="1"
       class="w-40"
       placeholder="0"
+      :fullWidth="true"
       :min="![undefined, null].includes(column.minValue) ? column.minValue : ''"
       :max="![undefined, null].includes(column.maxValue) ? column.maxValue : ''"
       :prefix="column.inputPrefix"
@@ -91,6 +92,7 @@
       step="0.1"
       class="w-40"
       placeholder="0.0"
+      :fullWidth="true"
       :min="![undefined, null].includes(column.minValue) ? column.minValue : ''"
       :max="![undefined, null].includes(column.maxValue) ? column.maxValue : ''"
       :prefix="column.inputPrefix"
@@ -99,28 +101,25 @@
       @update:modelValue="$emit('update:modelValue', $event)"
       :readonly="(column.editReadonly && source === 'edit') || readonly"
     />
-    <textarea
+    <Textarea
       v-else-if="['text', 'richtext'].includes(type || column.type)"
-      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="$t('Text')"
-      :value="value"
-      @input="$emit('update:modelValue', $event.target.value)"
+      :modelValue="value"
+      @update:modelValue="$emit('update:modelValue', $event)"
       :readonly="(column.editReadonly && source === 'edit') || readonly"
     />
-    <textarea
+    <Textarea
       v-else-if="['json'].includes(type || column.type)"
-      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="$t('Text')"
-      :value="value"
-      @input="$emit('update:modelValue', $event.target.value)"
+      :modelValue="value"
+      @update:modelValue="$emit('update:modelValue', $event)"
     />
     <Input
       v-else
       ref="input"
       :type="!column.masked || unmasked[column.name] ? 'text' : 'password'"
       class="w-full"
+      :fullWidth="true"
       :placeholder="$t('Text')"
       :prefix="column.inputPrefix"
       :suffix="column.inputSuffix"
@@ -158,6 +157,7 @@
   import Select from '@/afcl/Select.vue';
   import Input from '@/afcl/Input.vue';
   import Spinner from '@/afcl/Spinner.vue';
+  import Textarea from '@/afcl/Textarea.vue';
   import { ref, inject } from 'vue';
   import { getCustomComponent } from '@/utils';
   import { useI18n } from 'vue-i18n';
@@ -191,7 +191,7 @@
   const onSearchInput = inject('onSearchInput', {} as any);
   const loadMoreOptions = inject('loadMoreOptions', (() => {}) as any);
 
-  const input = ref(null);
+const input = ref<HTMLInputElement | null>(null);
 
   const getBooleanOptions = (column: any) => {
     const options: Array<{ label: string; value: boolean | null }> = [

package/dist/spa/src/components/ColumnValueInputWrapper.vue

@@ -19,7 +19,7 @@
         @update:unmasked="$emit('update:unmasked', column.name)"
         @update:inValidity="$emit('update:inValidity', { name: column.name, value: $event })"
         @update:emptiness="$emit('update:emptiness', { name: column.name, value: $event })"
-        @delete="setCurrentValue(column.name, currentValues[column.name].filter((_, index) => index !== arrayItemIndex))"
+        @delete="setCurrentValue(column.name, currentValues[column.name].filter((_: any, index: any) => index !== arrayItemIndex))"
       />
     </div>
     <div class="flex items-center">
@@ -71,7 +71,7 @@
   
   const emit = defineEmits(['update:unmasked', 'update:inValidity', 'update:emptiness', 'focus-last-input']);
   
-  const arrayItemRefs = ref([]);
+  const arrayItemRefs = ref<HTMLInputElement[]>([]);
   
   async function addArrayItem() {
     props.setCurrentValue(props.column.name, props.currentValues[props.column.name], props.currentValues[props.column.name].length);

package/dist/spa/src/components/CustomRangePicker.vue

@@ -57,15 +57,15 @@ const props = defineProps({
 
 const emit = defineEmits(['update:valueStart', 'update:valueEnd']);
 
-const minFormatted = computed(() => Math.floor(props.min));
-const maxFormatted = computed(() => Math.ceil(props.max));
+const minFormatted = computed(() => Math.floor(<number>props.min));
+const maxFormatted = computed(() => Math.ceil(<number>props.max));
 
 const isChanged = computed(() => {
   return start.value && start.value !== minFormatted.value || end.value && end.value !== maxFormatted.value;
 });
 
-const start = ref(props.valueStart);
-const end = ref(props.valueEnd);
+const start = ref<string | number>(props.valueStart);
+const end = ref<string | number>(props.valueEnd);
 
 const sliderValue = ref([minFormatted.value, maxFormatted.value]);
 
@@ -118,7 +118,7 @@ const clear = () => {
   setSliderValues('', '')
 }
 
-function setSliderValues(start, end) {
+function setSliderValues(start: any, end: any) {
   sliderValue.value = [start || minFormatted.value, end || maxFormatted.value];
 }
 </script>

package/dist/spa/src/components/ErrorMessage.vue

@@ -0,0 +1,21 @@
+<template>
+  <div v-if="error" class="af-login-modal-error flex items-center p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
+    <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+      <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
+    </svg>
+    <span class="sr-only">{{ $t('Info') }}</span>
+    <div>
+      {{ error }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+defineProps({
+  error: {
+    type: String,
+    default: null
+  }
+});
+</script>

package/dist/spa/src/components/Filters.vue

@@ -108,9 +108,9 @@
              :min="getFilterMinValue(c.name)"
              :max="getFilterMaxValue(c.name)"
              :valueStart="getFilterItem({ column: c, operator: 'gte' })"
-             @update:valueStart="onFilterInput[c.name]({ column: c, operator: 'gte', value: $event || undefined })"
+             @update:valueStart="onFilterInput[c.name]({ column: c, operator: 'gte', value: ($event !== '' && $event !== null) ? $event : undefined })"
              :valueEnd="getFilterItem({ column: c, operator: 'lte' })"
-             @update:valueEnd="onFilterInput[c.name]({ column: c, operator: 'lte', value: $event || undefined })"
+             @update:valueEnd="onFilterInput[c.name]({ column: c, operator: 'lte', value: ($event !== '' && $event !== null) ? $event : undefined })"
            />
 
            <div v-else-if="['integer', 'decimal', 'float'].includes(c.type)" class="flex gap-2">
@@ -118,14 +118,14 @@
               type="number"
               aria-describedby="helper-text-explanation"
               :placeholder="$t('From')"
-              @update:modelValue="onFilterInput[c.name]({ column: c, operator: 'gte', value: $event || undefined })"
+              @update:modelValue="onFilterInput[c.name]({ column: c, operator: 'gte', value: ($event !== '' && $event !== null) ? $event : undefined })"
               :modelValue="getFilterItem({ column: c, operator: 'gte' })"
             />
             <Input
               type="number"
               aria-describedby="helper-text-explanation"
               :placeholder="$t('To')"
-              @update:modelValue="onFilterInput[c.name]({ column: c, operator: 'lte', value: $event|| undefined })"
+              @update:modelValue="onFilterInput[c.name]({ column: c, operator: 'lte', value: ($event !== '' && $event !== null) ? $event : undefined })"
               :modelValue="getFilterItem({ column: c, operator: 'lte' })"
             />
            </div>
@@ -269,7 +269,7 @@ const onSearchInput = computed(() => {
 function setFilterItem({ column, operator, value }) {
 
   const index = filtersStore.filters.findIndex(f => f.field === column.name && f.operator === operator);
-  if (value === undefined) {
+  if (value === undefined || value === '' || value === null) {
     if (index !== -1) {
       filtersStore.filters.splice(index, 1);
     }
@@ -284,7 +284,8 @@ function setFilterItem({ column, operator, value }) {
 }
 
 function getFilterItem({ column, operator }) {
-  return filtersStore.filters.find(f => f.field === column.name && f.operator === operator)?.value || '';
+  const filterValue = filtersStore.filters.find(f => f.field === column.name && f.operator === operator)?.value;
+  return filterValue !== undefined ? filterValue : '';
 }
 
 async function clear() {

package/dist/spa/src/components/GroupsTable.vue

@@ -70,6 +70,7 @@
   import { ref, computed, watch, nextTick, type Ref } from 'vue';
   import { useI18n } from 'vue-i18n';
   import ColumnValueInputWrapper from "@/components/ColumnValueInputWrapper.vue";
+  import type { AdminForthResourceColumnInputCommon } from '@/types/Common';
 
   const { t } = useI18n();
 
@@ -89,7 +90,7 @@
   const customComponentsInValidity: Ref<Record<string, boolean>> = ref({});
   const customComponentsEmptiness: Ref<Record<string, boolean>> = ref({});
   const allColumnsHaveCustomComponent = computed(() => {
-    return props.group.columns.every(column => {
+    return props.group.columns.every((column: AdminForthResourceColumnInputCommon) => {
       const componentKey = `${props.source}Row` as keyof typeof column.components;
       return column.components?.[componentKey];
     });

package/dist/spa/src/components/MenuLink.vue

@@ -10,13 +10,13 @@
         ($route.name === item.path)
       }"
   >
-    <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-lightSidebarIcons dark:text-darkSidebarIcons  transition duration-75  group-hover:text-lightSidebarIconsHover dark:group-hover:text-darkSidebarIconsHover" ></component>
+    <component v-if="item.icon" :is="getIcon(item.icon)" class="min-w-5 min-h-5 text-lightSidebarIcons dark:text-darkSidebarIcons  transition duration-75  group-hover:text-lightSidebarIconsHover dark:group-hover:text-darkSidebarIconsHover" ></component>
     <span class="text-ellipsis overflow-hidden ms-3">{{ item.label }}</span>
     <span v-if="item.badge"
     >
           
         <Tooltip v-if="item.badgeTooltip">
-          <div class="inline-flex items-center justify-center h-3 py-3 px-1 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
+          <div class="af-badge inline-flex items-center justify-center h-3 py-3 px-1 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
           fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent min-w-[1.5rem] max-w-[3rem]">{{ item.badge }}</div>
 
           <template #tooltip>
@@ -24,7 +24,7 @@
           </template>
         </Tooltip>
         <template v-else>
-          <div class="inline-flex items-center justify-center h-3 py-3 px-1 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
+          <div class="af-badge inline-flex items-center justify-center h-3 py-3 px-1 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
           fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent min-w-[1.5rem] max-w-[3rem]">{{ item.badge }}</div>
         </template>