adminforth 2.27.0-next.3 → 2.27.0-next.30

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

@@ -19,7 +19,7 @@
    
     <div class="py-4 ">
       <ul class="space-y-3 font-medium text-sm">
-         <li v-for="c in columnsWithFilter" :key="c">
+         <li v-for="c in columnsWithFilter" :key="c.name">
             <div class="flex flex-col">
               <div class="flex justify-between items-center">
                 <p class="dark:text-gray-400 my-1">{{ c.label }}</p>
@@ -38,15 +38,15 @@
               </div>
               <component
                 v-if="c.components?.filter"
-                :is="getCustomComponent(c.components.filter)"
-                :meta="c?.components?.list?.meta"
+                :is="getCustomComponent(formatComponent(c.components.filter))"
+                :meta="formatComponent(c.components.filter)?.meta"
                 :column="c"
                 class="w-full"
-                @update:modelValue="(filtersArray) => {
+                @update:modelValue="(filtersArray:FilterParams[] ) => {
                   filtersStore.filters = filtersStore.filters.filter(f => f.field !== c.name);
 
                   for (const f of filtersArray) {
-                    filtersStore.filters.push({ field: c.name, ...f });
+                    filtersStore.filters.push({ ...f, field: c.name });
                   }
                   console.log('filtersStore.filters', filtersStore.filters);
                   emits('update:filters', [...filtersStore.filters]);
@@ -55,18 +55,18 @@
               />
               <Select
                 v-else-if="c.foreignResource"
-                :multiple="c.filterOptions.multiselect"
+                :multiple="c?.filterOptions?.multiselect"
                 class="w-full"
                 :options="columnOptions[c.name] || []"
                 :searchDisabled="!c.foreignResource.searchableFields"
                 @scroll-near-end="loadMoreOptions(c.name)"
                 @search="(searchTerm) => {
-                  if (c.foreignResource.searchableFields && onSearchInput[c.name]) {
+                  if (c.foreignResource?.searchableFields && onSearchInput[c.name]) {
                     onSearchInput[c.name](searchTerm);
                   }
                 }"
-                @update:modelValue="onFilterInput[c.name]({ column: c, operator: c.filterOptions.multiselect ? 'in' : 'eq', value: c.filterOptions.multiselect ? ($event.length ? $event : undefined) : $event || undefined })"
-                :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions.multiselect ? 'in' : 'eq'))?.value || (c.filterOptions.multiselect ? [] : '')"
+                @update:modelValue="onFilterInput[c.name]({ column: c, operator: c.filterOptions?.multiselect ? AFFO.IN : AFFO.EQ, value: c.filterOptions?.multiselect ? ($event.length ? $event : undefined) : $event || undefined })"
+                :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions?.multiselect ? AFFO.IN : AFFO.EQ))?.value || (c.filterOptions?.multiselect ? [] : '')"
               >
                 <template #extra-item v-if="columnLoadingState[c.name]?.loading">
                   <div class="text-center text-gray-400 dark:text-gray-300 py-2 flex items-center justify-center gap-2">
@@ -76,7 +76,7 @@
                 </template>
               </Select>
               <Select
-                :multiple="c.filterOptions.multiselect"
+                :multiple="c.filterOptions?.multiselect"
                 class="w-full"
                 v-else-if="c.type === 'boolean'"
                 :options="[
@@ -85,63 +85,63 @@
                   // if field is not required, undefined might be there, and user might want to filter by it
                   ...(c.required ? [] : [ { label: $t('Unset'), value: undefined } ])
                 ]"
-                @update:modelValue="onFilterInput[c.name]({ column: c, operator: c.filterOptions.multiselect ? 'in' : 'eq', value: c.filterOptions.multiselect ? ($event.length ? $event : undefined) : $event })"
-                :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions.multiselect ? 'in' : 'eq'))?.value !== undefined
-                  ? filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions.multiselect ? 'in' : 'eq'))?.value
-                  : (c.filterOptions.multiselect ? [] : '')"
+                @update:modelValue="onFilterInput[c.name]({ column: c, operator: c.filterOptions?.multiselect ? AFFO.IN : AFFO.EQ, value: c.filterOptions?.multiselect ? ($event.length ? $event : undefined) : $event })"
+                :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions?.multiselect ? AFFO.IN : AFFO.EQ))?.value !== undefined
+                  ? filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions?.multiselect ? AFFO.IN : AFFO.EQ))?.value
+                  : (c.filterOptions?.multiselect ? [] : '')"
               />
               
               <Select
-                :multiple="c.filterOptions.multiselect"
+                :multiple="c.filterOptions?.multiselect"
                 class="w-full"
                 v-else-if="c.enum"
                 :options="c.enum"
-                @update:modelValue="onFilterInput[c.name]({ column: c, operator: c.filterOptions.multiselect ? 'in' : 'eq', value: c.filterOptions.multiselect ? ($event.length ? $event : undefined) : $event || undefined })"
-                :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions.multiselect ? 'in' : 'eq'))?.value || (c.filterOptions.multiselect ? [] : '')"
+                @update:modelValue="onFilterInput[c.name]({ column: c, operator: c.filterOptions?.multiselect ? AFFO.IN : AFFO.EQ, value: c.filterOptions?.multiselect ? ($event.length ? $event : undefined) : $event || undefined })"
+                :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === (c.filterOptions?.multiselect ? AFFO.IN : AFFO.EQ))?.value || (c.filterOptions?.multiselect ? [] : '')"
               />
 
               <Input
-                v-else-if="['string', 'text', 'json', 'richtext', 'unknown'].includes(c.type)"
+                v-else-if="['string', 'text', 'json', 'richtext', 'unknown'].includes(c.type ?? '')"
                 type="text"
                 full-width
                 :placeholder="$t('Search')"
-                @update:modelValue="onFilterInput[c.name]({ column: c, operator: c.filterOptions?.substringSearch ? 'ilike' : 'eq', value: $event || undefined })"
-                :modelValue="getFilterItem({ column: c, operator: c.filterOptions?.substringSearch ? 'ilike' : 'eq' })"
+                @update:modelValue="onFilterInput[c.name]({ column: c, operator: c.filterOptions?.substringSearch ? AFFO.ILIKE : AFFO.EQ, value: $event || undefined })"
+                :modelValue="(getFilterItem({ column: c, operator: c.filterOptions?.substringSearch ? AFFO.ILIKE : AFFO.EQ }) as string | number)"
               />
 
               <CustomDateRangePicker
-                v-else-if="['datetime', 'date', 'time'].includes(c.type)"
+                v-else-if="['datetime', 'date', 'time'].includes(c.type ?? '')"
                 :column="c"
-                :valueStart="filtersStore.filters.find(f => f.field === c.name && f.operator === 'gte')?.value || undefined"
-                @update:valueStart="onFilterInput[c.name]({ column: c, operator: 'gte', value: $event || undefined })"
-                :valueEnd="filtersStore.filters.find(f => f.field === c.name && f.operator === 'lte')?.value || undefined"
-                @update:valueEnd="onFilterInput[c.name]({ column: c, operator: 'lte', value: $event || undefined })"
+                :valueStart="filtersStore.filters.find(f => f.field === c.name && f.operator === AFFO.GTE)?.value || undefined"
+                @update:valueStart="onFilterInput[c.name]({ column: c, operator: AFFO.GTE, value: $event || undefined })"
+                :valueEnd="filtersStore.filters.find(f => f.field === c.name && f.operator === AFFO.LTE)?.value || undefined"
+                @update:valueEnd="onFilterInput[c.name]({ column: c, operator: AFFO.LTE, value: $event || undefined })"
               />
 
               <CustomRangePicker
-                v-else-if="['integer', 'decimal', 'float'].includes(c.type) && c.allowMinMaxQuery"
+                v-else-if="['integer', 'decimal', 'float'].includes(c.type ?? '') && c.allowMinMaxQuery"
                 :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 !== '' && $event !== null) ? (c.type === 'decimal' ? String($event) : $event) : undefined })"
-                :valueEnd="getFilterItem({ column: c, operator: 'lte' })"
-                @update:valueEnd="onFilterInput[c.name]({ column: c, operator: 'lte', value: ($event !== '' && $event !== null) ? (c.type === 'decimal' ? String($event) : $event) : undefined })"
+                :valueStart="(getFilterItem({ column: c, operator: AFFO.GTE }) as number)"
+                @update:valueStart="(val) => rangeChangeHandler((val !== '' && val !== null) ? (c.type === 'decimal' ? String(val) : val) : undefined, c, AFFO.GTE)"
+                :valueEnd="(getFilterItem({ column: c, operator: AFFO.LTE }) as number)"
+                @update:valueEnd="(val) => rangeChangeHandler((val !== '' && val !== null) ? (c.type === 'decimal' ? String(val) : val) : undefined, c, AFFO.LTE)"
               />
 
-              <div v-else-if="['integer', 'decimal', 'float'].includes(c.type)" class="flex gap-2">
+              <div v-else-if="['integer', 'decimal', 'float'].includes(c.type ?? '')" class="flex gap-2">
                 <Input
                   type="number"
                   aria-describedby="helper-text-explanation"
                   :placeholder="$t('From')"
-                  @update:modelValue="onFilterInput[c.name]({ column: c, operator: 'gte', value: ($event !== '' && $event !== null) ? (c.type === 'decimal' ? String($event) : $event) : undefined })"
-                  :modelValue="getFilterItem({ column: c, operator: 'gte' })"
+                  @update:modelValue="onFilterInput[c.name]({ column: c, operator: AFFO.GTE, value: ($event !== '' && $event !== null) ? (c.type === 'decimal' ? String($event) : $event) : undefined })"
+                  :modelValue="(getFilterItem({ column: c, operator: AFFO.GTE }) as number)"
                 />
                 <Input
                   type="number"
                   aria-describedby="helper-text-explanation"
                   :placeholder="$t('To')"
-                  @update:modelValue="onFilterInput[c.name]({ column: c, operator: 'lte', value: ($event !== '' && $event !== null) ? (c.type === 'decimal' ? String($event) : $event) : undefined })"
-                  :modelValue="getFilterItem({ column: c, operator: 'lte' })"
+                  @update:modelValue="onFilterInput[c.name]({ column: c, operator: AFFO.LTE, value: ($event !== '' && $event !== null) ? (c.type === 'decimal' ? String($event) : $event) : undefined })"
+                  :modelValue="(getFilterItem({ column: c, operator: AFFO.LTE }) as number)"
                 />
               </div>
             </div>
@@ -164,14 +164,13 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { watch, computed, ref, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import CustomDateRangePicker from '@/components/CustomDateRangePicker.vue';
-import { callAdminForthApi, loadMoreForeignOptions, searchForeignOptions, createSearchInputHandlers } from '@/utils';
+import { loadMoreForeignOptions, searchForeignOptions, createSearchInputHandlers, formatComponent } from '@/utils';
 import { useRouter } from 'vue-router';
 import CustomRangePicker from "@/components/CustomRangePicker.vue";
-import { useFiltersStore } from '@/stores/filters';
 import { getCustomComponent } from '@/utils';
 import Input from '@/afcl/Input.vue';
 import Select from '@/afcl/Select.vue';
@@ -179,27 +178,39 @@ import Spinner from '@/afcl/Spinner.vue';
 import debounce from 'debounce';
 import { Tooltip } from '@/afcl';
 import { IconCloseOutline } from '@iconify-prerendered/vue-flowbite';
+import type { AdminforthFilterStore, AdminforthFilterStoreUnwrapped } from '@/spa_types/core';
+import type { AdminForthResourceColumnCommon, FilterParams, ColumnMinMaxValue } from '@/types/Common';
+import { AdminForthFilterOperators } from '@/types/Common';
+
 
-const filtersStore = useFiltersStore();
 const { t } = useI18n();
 
+const AFFO = AdminForthFilterOperators;
 
 // props: columns
 // add support for v-model:filers
-const props = defineProps(['columns', 'filters', 'show', 'columnsMinMax']);
+// const props = defineProps(['columns', 'filters', 'show', 'columnsMinMax']);
+const props = defineProps<{
+  columns: AdminForthResourceColumnCommon[],
+  filters?: AdminforthFilterStore['filters'],
+  show: Boolean,
+  columnsMinMax: ColumnMinMaxValue,
+  filtersStore: AdminforthFilterStoreUnwrapped
+}>();
+
 const emits = defineEmits(['update:filters', 'hide']);
 
 const router = useRouter();
 
 
 const columnsWithFilter = computed(
-  () => props.columns?.filter(column => column.showIn.filter) || []
+  () => props.columns?.filter(column => column.showIn?.filter) || []
 );
 
-const columnOptions = ref({});
-const columnLoadingState = reactive({});
-const columnOffsets = reactive({});
-const columnEmptyResultsCount = reactive({});
+const columnOptions = ref<{[key: string]: Record<string, any>[]}>({});
+const columnLoadingState = reactive<Record<string, { loading: boolean; hasMore: boolean }>>({});
+const columnOffsets = reactive<Record<string, number>>({});
+const columnEmptyResultsCount = reactive<Record<string, number>>({});
 
 watch(() => props.columns, async (newColumns) => {
   if (!newColumns) return;
@@ -219,12 +230,12 @@ watch(() => props.columns, async (newColumns) => {
 }, { immediate: true });
 
 // Function to load more options for a specific column
-async function loadMoreOptions(columnName, searchTerm = '') {
+async function loadMoreOptions(columnName: string, searchTerm = '') {
   return loadMoreForeignOptions({
     columnName,
     searchTerm,
     columns: props.columns,
-    resourceId: router.currentRoute.value.params.resourceId,
+    resourceId: router.currentRoute.value.params.resourceId as string,
     columnOptions,
     columnLoadingState,
     columnOffsets,
@@ -232,12 +243,12 @@ async function loadMoreOptions(columnName, searchTerm = '') {
   });
 }
 
-async function searchOptions(columnName, searchTerm) {
+async function searchOptions(columnName: string, searchTerm: string) {
   return searchForeignOptions({
     columnName,
     searchTerm,
     columns: props.columns,
-    resourceId: router.currentRoute.value.params.resourceId,
+    resourceId: router.currentRoute.value.params.resourceId as string,
     columnOptions,
     columnLoadingState,
     columnOffsets,
@@ -263,9 +274,9 @@ watch(() => props.show, (show) => {
 // }
 
 const onFilterInput = computed(() => {
-  if (!props.columns) return {};
+  if (!props.columns) return {} as Record<string, any>;
 
-  return props.columns.reduce((acc, c) => {
+  return props.columns.reduce<Record<string, ReturnType<typeof debounce>>>((acc, c) => {
     return {
       ...acc,
       [c.name]: debounce(({ column, operator, value }) => {
@@ -275,6 +286,27 @@ const onFilterInput = computed(() => {
   }, {});
 });
 
+// rangeState is used for cutom range picker, because if we change two values very quickly
+// in filters writes only the last one, because of debounce
+const rangeState = reactive<Record<string, { gte: number | null; lte: number | null }>>({});
+
+const updateRange = (column: AdminForthResourceColumnCommon) => {
+  debounce(() => {
+    const { gte, lte } = rangeState[column.name];
+
+    setFilterItem({ column, operator: AFFO.GTE, value: gte });
+    setFilterItem({ column, operator: AFFO.LTE, value: lte });
+  }, column?.filterOptions?.debounceTimeMs || 10)();
+}
+
+function rangeChangeHandler(value: number | null, column: AdminForthResourceColumnCommon, operator: 'gte' | 'lte') {
+  if (!rangeState[column.name]) {
+    rangeState[column.name] = { gte: null, lte: null };
+  }
+  rangeState[column.name][operator] = value;
+  updateRange(column);
+}
+
 const onSearchInput = computed(() => {
   return createSearchInputHandlers(
     props.columns,
@@ -283,40 +315,40 @@ const onSearchInput = computed(() => {
   );
 });
 
-function setFilterItem({ column, operator, value }) {
+function setFilterItem({ column, operator, value }: { column: AdminForthResourceColumnCommon; operator: AdminForthFilterOperators; value: any }) {
 
-  const index = filtersStore.filters.findIndex(f => f.field === column.name && f.operator === operator);
+  const index = props.filtersStore.filters.findIndex(f => f.field === column.name && f.operator === operator);
   if (value === undefined || value === '' || value === null) {
     if (index !== -1) {
-      filtersStore.filters.splice(index, 1);
+      props.filtersStore.filters.splice(index, 1);
     }
   } else {
     if (index === -1) {
-      filtersStore.setFilter({ field: column.name, value, operator });
+      props.filtersStore.setFilter({ field: column.name, value, operator });
     } else {
-      filtersStore.setFilters([...filtersStore.filters.slice(0, index), { field: column.name, value, operator }, ...filtersStore.filters.slice(index + 1)])
+      props.filtersStore.setFilters([...props.filtersStore.filters.slice(0, index), { field: column.name, value, operator }, ...props.filtersStore.filters.slice(index + 1)])
     }
   }
-  emits('update:filters', [...filtersStore.filters]);
+  emits('update:filters', [...props.filtersStore.filters]);
 }
 
-function getFilterItem({ column, operator }) {
-  const filterValue = filtersStore.filters.find(f => f.field === column.name && f.operator === operator)?.value;
+function getFilterItem({ column, operator }: { column: AdminForthResourceColumnCommon; operator: AdminForthFilterOperators }) {
+  const filterValue = props.filtersStore.filters.find(f => f.field === column.name && f.operator === operator)?.value;
   return filterValue !== undefined ? filterValue : '';
 }
 
 async function clear() {
-  filtersStore.filters = [...filtersStore.filters.filter(f => filtersStore.shouldFilterBeHidden(f.field))];
-  emits('update:filters', [...filtersStore.filters]);
+  props.filtersStore.filters = [...props.filtersStore.filters.filter(f => props.filtersStore.shouldFilterBeHidden(f.field))];
+  emits('update:filters', [...props.filtersStore.filters]);
 }
 
-function getFilterMinValue(columnName) {
+function getFilterMinValue(columnName: string) {
   if(props.columnsMinMax && props.columnsMinMax[columnName]) {
     return props.columnsMinMax[columnName]?.min
   }
 }
 
-function getFilterMaxValue(columnName) {
+function getFilterMaxValue(columnName: string) {
   if(props.columnsMinMax && props.columnsMinMax[columnName]) {
     return props.columnsMinMax[columnName]?.max
   }

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg shadow-resourseFormShadow dark:shadow-darkResourseFormShadow dark:shadow-2xl">
+  <div class="rounded-lg shadow-resourseFormShadow dark:shadow-darkResourseFormShadow dark:shadow-2xl border dark:border-darkFormBorder">
     <div v-if="group.groupName && !group.noTitle" class="text-md font-semibold px-6 py-3 flex flex-1 items-center dark:border-darkFormBorder text-lightListTableHeadingText bg-lightFormHeading dark:bg-darkFormHeading dark:text-darkListTableHeadingText rounded-t-lg">
       {{ group.groupName }}
     </div>
@@ -30,7 +30,7 @@
                 <Tooltip v-if="column.required[mode]">
 
                   <IconExclamationCircleSolid v-if="column.required[mode]" class="w-4 h-4" 
-                    :class="(columnError(column) && validating) ? 'text-lightInputErrorColor dark:text-darkInputErrorColor' : 'text-lightRequiredIconColor dark:text-darkRequiredIconColor'"
+                    :class="(columnsWithErrors[column.name] && validatingMode && !isValidating) ? 'text-lightInputErrorColor dark:text-darkInputErrorColor' : 'text-lightRequiredIconColor dark:text-darkRequiredIconColor'"
                   />
 
                   <template #tooltip>
@@ -56,9 +56,10 @@
               @update:inValidity="customComponentsInValidity[$event.name] = $event.value"
               @update:emptiness="customComponentsEmptiness[$event.name] = $event.value"
               :readonly="readonlyColumns?.includes(column.name)"
+              :columnsWithErrors="columnsWithErrors"
+              :isValidating="isValidating"
+              :validatingMode="validatingMode"
             />
-            <div v-if="columnError(column) && validating" class="af-invalid-field-message mt-1 text-xs text-lightInputErrorColor dark:text-darkInputErrorColor">{{ columnError(column) }}</div>
-            <div v-if="column.editingNote && column.editingNote[mode]" class="mt-1 text-xs text-lightFormFieldTextColor dark:text-darkFormFieldTextColor">{{ column.editingNote[mode] }}</div>
           </td>
         </tr>
       </tbody>
@@ -79,14 +80,16 @@
   const props = defineProps<{
     source: 'create' | 'edit',
     group: any,
-    mode: string,
-    validating: boolean,
+    mode: 'create' | 'edit',
+    validatingMode: boolean,
     currentValues: any,
     unmasked: any,
     columnError: (column: any) => string,
     setCurrentValue: (columnName: string, value: any) => void,
     columnOptions: any,
     readonlyColumns?: string[],
+    columnsWithErrors: Record<string, string>,
+    isValidating: boolean
   }>();
 
   const customComponentsInValidity: Ref<Record<string, boolean>> = ref({});

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

@@ -35,7 +35,7 @@
     >
       {{ item.label }}
     </div>
-    <span class="absolute flex items-center justify-center right-1 top-1/2 -translate-y-1/2" v-if="item.badge && showExpandedBadge">
+    <span class="absolute flex items-center justify-center right-1 top-1/2 -translate-y-1/2" v-if="(item.badge || item.badge === 0) && showExpandedBadge ">
       <Tooltip v-if="item.badgeTooltip">
         <div class="af-badge inline-flex items-center justify-center h-3 py-2.5 px-1 ms-3 text-xs 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>
@@ -48,7 +48,7 @@
         fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent min-w-[1.5rem] max-w-[3rem]">{{ item.badge }}</div>
       </template>
     </span>
-    <div v-if="item.badge && isSidebarIconOnly && !isSidebarHovering"  class="af-badge absolute right-0.5 bottom-1 -translate-y-1/2 inline-flex items-center justify-center h-2 w-2 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
+    <div v-if="(item.badge || item.badge === 0) && isSidebarIconOnly && !isSidebarHovering"  class="af-badge absolute right-0.5 bottom-1 -translate-y-1/2 inline-flex items-center justify-center h-2 w-2 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
       fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent">
     </div>
   </RouterLink>

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

@@ -13,11 +13,13 @@
         :mode="mode"
         :unmasked="unmasked"
         :columnOptions="columnOptions"
-        :validating="validating"
+        :validatingMode="validatingMode"
         :columnError="columnError"
         :setCurrentValue="setCurrentValue"
         @update:customComponentsInValidity="(data) => customComponentsInValidity = { ...customComponentsInValidity, ...data }"
         @update:customComponentsEmptiness="(data) => customComponentsEmptiness = { ...customComponentsEmptiness, ...data }"
+        :columnsWithErrors="columnsWithErrors"
+        :isValidating="isValidating"
         />
       </div>
       <div v-else class="flex flex-col gap-4">
@@ -31,11 +33,13 @@
           :mode="mode"
           :unmasked="unmasked"
           :columnOptions="columnOptions"
-          :validating="validating"
+          :validatingMode="validatingMode"
           :columnError="columnError"
           :setCurrentValue="setCurrentValue"
           @update:customComponentsInValidity="(data) => customComponentsInValidity = { ...customComponentsInValidity, ...data }"
           @update:customComponentsEmptiness="(data) => customComponentsEmptiness = { ...customComponentsEmptiness, ...data }"
+          :columnsWithErrors="columnsWithErrors"
+          :isValidating="isValidating"
           />
         </template>
         <div v-if="otherColumns?.length || 0 > 0">
@@ -48,11 +52,13 @@
           :mode="mode"
           :unmasked="unmasked"
           :columnOptions="columnOptions"
-          :validating="validating"
+          :validatingMode="validatingMode"
           :columnError="columnError"
           :setCurrentValue="setCurrentValue"
           @update:customComponentsInValidity="(data) => customComponentsInValidity = { ...customComponentsInValidity, ...data }"
           @update:customComponentsEmptiness="(data) => customComponentsEmptiness = { ...customComponentsEmptiness, ...data }"
+          :columnsWithErrors="columnsWithErrors"
+          :isValidating="isValidating"
           />
         </div>
       </div>
@@ -71,16 +77,20 @@ import { useCoreStore } from "@/stores/core";
 import GroupsTable from '@/components/GroupsTable.vue';
 import { useI18n } from 'vue-i18n';
 import { type AdminForthResourceColumnCommon, type AdminForthResourceCommon } from '@/types/Common';
+import { Mutex } from 'async-mutex';
+import debounce from 'lodash.debounce';
 
 const { t } = useI18n();
 
+const mutex = new Mutex();
+
 const coreStore = useCoreStore();
 const router = useRouter();
 const route = useRoute();
 const props = defineProps<{
   resource: AdminForthResourceCommon,
   record: any,
-  validating: boolean,
+  validatingMode: boolean,
   source: 'create' | 'edit',
   readonlyColumns?: string[],
 }>();
@@ -99,6 +109,11 @@ const columnOptions = ref<Record<string, any[]>>({});
 const columnLoadingState = reactive<Record<string, { loading: boolean; hasMore: boolean }>>({});
 const columnOffsets = reactive<Record<string, number>>({});
 const columnEmptyResultsCount = reactive<Record<string, number>>({});
+const columnsWithErrors = ref<Record<string, string>>({});
+const isValidating = ref(false);
+const blockSettingIsValidating = ref(false);
+const isValid = ref(true);
+const doesUserHaveCustomValidation = computed(() => props.resource.columns.some(column => column.validation && column.validation.some((val) => val.validator)));
 
 const columnError = (column: AdminForthResourceColumnCommon) => {
   const val = computed(() => {
@@ -329,10 +344,48 @@ const editableColumns = computed(() => {
   return props.resource?.columns?.filter(column => column.showIn?.[mode.value] && (currentValues.value ? checkShowIf(column, currentValues.value, props.resource.columns) : true));
 });
 
-const isValid = computed(() => {
-  return editableColumns.value?.every(column => !columnError(column));
+function checkIfColumnHasError(column: AdminForthResourceColumnCommon) {
+  const error = columnError(column);
+  if (error) {
+    columnsWithErrors.value[column.name] = error;
+  } else {
+    delete columnsWithErrors.value[column.name];
+  }
+}
+
+const checkIfAnyColumnHasErrors = () => {
+  return Object.keys(columnsWithErrors.value).length > 0 ? false : true;
+}
+
+const debouncedValidation = debounce(async (columns: AdminForthResourceColumnCommon[]) => {
+  await mutex.runExclusive(async () => {
+    await validateUsingUserValidationFunction(columns);
+  });
+  setIsValidatingValue(false);
+  isValid.value = checkIfAnyColumnHasErrors();
+}, 500);
+
+watch(() => [editableColumns.value, props.validatingMode], async () => {
+  setIsValidatingValue(true);
+  
+  editableColumns.value?.forEach(column => {
+    checkIfColumnHasError(column);
+  });
+
+  if (props.validatingMode && doesUserHaveCustomValidation.value) {
+    debouncedValidation(editableColumns.value);
+  } else {
+    setIsValidatingValue(false);
+    isValid.value = checkIfAnyColumnHasErrors();
+  }
 });
 
+const setIsValidatingValue = (value: boolean) => {
+  if (!blockSettingIsValidating.value) {
+    isValidating.value = value;
+  }
+}
+
 
 const groups = computed(() => {
   let fieldGroupType;
@@ -381,9 +434,50 @@ watch(() => isValid.value, (value) => {
   emit('update:isValid', value);
 });
 
+async function validateUsingUserValidationFunction(editableColumnsInner: AdminForthResourceColumnCommon[]): Promise<void> {
+  if (doesUserHaveCustomValidation.value) {
+    try {
+      blockSettingIsValidating.value = true;
+      const res = await callAdminForthApi({
+        method: 'POST',
+        path: '/validate_columns',
+        body: {
+          resourceId: props.resource.resourceId,
+          editableColumns: editableColumnsInner.map(col => {return {name: col.name, value: currentValues.value?.[col.name]} }),
+          record: currentValues.value,
+        }
+      })
+      if (res.validationResults && Object.keys(res.validationResults).length > 0) {
+        for (const [columnName, validationResult] of Object.entries(res.validationResults) as [string, any][]) {
+          if (!validationResult.isValid) {
+            columnsWithErrors.value[columnName] = validationResult.message || 'Invalid value';
+          } else {
+            delete columnsWithErrors.value[columnName];
+          }
+        }
+        const columnsToProcess = editableColumns.value.filter(col => res.validationResults[col.name] === undefined);
+        columnsToProcess.forEach(column => {
+          checkIfColumnHasError(column);
+        });
+      } else {
+        editableColumnsInner.forEach(column => {
+          checkIfColumnHasError(column);
+        });
+      }
+      blockSettingIsValidating.value = false;
+    } catch (e) {
+      console.error('Error during custom validation', e);
+      blockSettingIsValidating.value = false;
+    }
+  }
+}
+
 defineExpose({
   columnError,
   editableColumns,
+  columnsWithErrors,
+  isValidating,
+  validateUsingUserValidationFunction
 })
 
 </script>

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

@@ -211,12 +211,18 @@
                       <button
                         type="button"
                         class="border border-gray-300 dark:border-gray-700 dark:border-opacity-0 border-opacity-0 hover:border-opacity-100 dark:hover:border-opacity-100 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer"
+                        :disabled="!!actionLoadingStates[`${action.id}_${row._primaryKeyValue}`]"
                       >
                         <component
-                          v-if="action.icon"
+                          v-if="action.icon && !actionLoadingStates[`${action.id}_${row._primaryKeyValue}`]"
                           :is="getIcon(action.icon)"
                           class="w-6 h-6 text-lightPrimary dark:text-darkPrimary"
                         />
+                        <Spinner
+                          v-if="actionLoadingStates[`${action.id}_${row._primaryKeyValue}`]"
+                          class="w-5 h-5 text-gray-200 dark:text-gray-500 fill-gray-500 dark:fill-gray-300"
+                        />
+                        <span v-if="actionLoadingStates[`${action.id}_${row._primaryKeyValue}`]" class="sr-only">Loading...</span>
                       </button>
                     </component>
 
@@ -356,7 +362,7 @@ import {
   IconInboxOutline
 } from '@iconify-prerendered/vue-flowbite';
 import router from '@/router';
-import { Tooltip } from '@/afcl';
+import { Tooltip, Spinner } from '@/afcl';
 import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, AdminForthComponentDeclarationFull, AdminForthComponentDeclaration } from '@/types/Common';
 import { useAdminforth } from '@/adminforth';
 import Checkbox from '@/afcl/Checkbox.vue';
@@ -613,7 +619,7 @@ async function startCustomAction(actionId: string | number, row: any, extraData:
     recordId: row._primaryKeyValue,
     extra: extraData,
     setLoadingState: (loading: boolean) => {
-      actionLoadingStates.value[actionId] = loading;
+      actionLoadingStates.value[`${actionId}_${row._primaryKeyValue}`] = loading;
     },
     onSuccess: async (data: any) => {
       emits('update:records', true);
@@ -638,10 +644,10 @@ function validatePageInput() {
   pageInput.value = validPage.toString();
 }
 /*
-*___________________________________________________________________
-*                                                                   |
-*                 Virtual Scroll Implementation                     |
-*___________________________________________________________________|
+* ___________________________________________________________________
+*|                                                                   |
+*|                 Virtual Scroll Implementation                     |
+*|___________________________________________________________________|
 */
 // Add throttle utility
 const throttle = (fn: Function, delay: number) => { 

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

@@ -1,5 +1,5 @@
 <template>
-      <div class="overflow-x-auto shadow-resourseFormShadow dark:shadow-darkResourseFormShadow"
+      <div class="overflow-x-auto shadow-resourseFormShadow dark:shadow-darkResourseFormShadow border dark:border-gray-700"
         :class="{'rounded-default' : isRounded}"
       >
         <div v-if="groupName && !noTitle"  class="text-md font-semibold px-6 py-3 flex flex-1 items-center text-lightShowTableHeadingText bg-lightShowTableHeadingBackground dark:bg-darkShowTableHeadingBackground  dark:text-darkShowTableHeadingText rounded-t-lg">