adminforth 2.27.0-next.9 → 2.27.0

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

@@ -20,7 +20,7 @@
       ref="input"
       :key="`select-${column.name}-${source}-${column.foreignResource?.name || column.foreignResource?.table || ''}`"
       class="w-full min-w-24"
-      :options="columnOptions[column.name] || []"
+      :options="formatSelectOptions(columnOptions[column.name] || [], column)"
       :searchDisabled="!column.foreignResource.searchableFields"
       @scroll-near-end="loadMoreOptions && loadMoreOptions(column.name)"
       @search="(searchTerm) => {
@@ -33,6 +33,7 @@
       :modelValue="value"
       :readonly="(column.editReadonly && source === 'edit') || readonly"
       @update:modelValue="$emit('update:modelValue', $event)"
+      disableTogleOfSelectedItem
     >
       <template #extra-item v-if="columnLoadingState && columnLoadingState[column.name]?.loading">
         <div class="text-center text-gray-400 dark:text-gray-300 py-2 flex items-center justify-center gap-2">
@@ -45,11 +46,12 @@
       v-else-if="column.enum"
       ref="input"
       class="w-full min-w-24"
-      :options="column.enum"
+      :options="formatSelectOptions(column.enum, column)"
       teleportToBody
       :modelValue="value"
       :readonly="(column.editReadonly && source === 'edit') || readonly"
       @update:modelValue="$emit('update:modelValue', $event)"
+      disableTogleOfSelectedItem
     />
     <Select
       v-else-if="(type || column.type) === 'boolean'"
@@ -60,6 +62,7 @@
       :modelValue="value"
       :readonly="(column.editReadonly && source === 'edit') || readonly"
       @update:modelValue="$emit('update:modelValue', $event)"
+      disableTogleOfSelectedItem
     />
     <Input
       v-else-if="['integer'].includes(type || column.type)"
@@ -188,7 +191,7 @@
       type?: string,
       value: any,
       currentValues: any,
-      mode: string,
+      mode: 'create' | 'edit',
       columnOptions: any,
       unmasked: any,
       deletable?: boolean,
@@ -218,6 +221,16 @@ const input = ref<HTMLInputElement | null>(null);
     return options;
   };
 
+  const formatSelectOptions = (options: any, column: any) => {
+    const optionsToReturn = options;
+    if (!column.required[props.mode] && !column.isArray?.enabled) {
+      if (!optionsToReturn.some((option: any) => option.value === null)) {
+        optionsToReturn.push({ label: t('Unset'), value: null });
+      }
+    }
+    return optionsToReturn;
+  };
+
   function onFocusHandler(event:FocusEvent, column:any, source:string, ) {
     const focusedInput = event.target as HTMLInputElement; 
     if(!focusedInput) return;  

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

@@ -53,7 +53,7 @@
     @update:inValidity="$emit('update:inValidity', { name: column.name, value: $event })"
     @update:emptiness="$emit('update:emptiness', { name: column.name, value: $event })"
   />
-  <div v-if="columnsWithErrors[column.name] && validatingMode && !isValidating" class="af-invalid-field-message mt-1 text-xs text-lightInputErrorColor dark:text-darkInputErrorColor">{{ columnsWithErrors[column.name] }}</div>
+  <div v-if="columnsWithErrors && columnsWithErrors[column.name] && validatingMode && !isValidating" class="af-invalid-field-message mt-1 text-xs text-lightInputErrorColor dark:text-darkInputErrorColor">{{ columnsWithErrors[column.name] }}</div>
   <Spinner v-if="shouldWeShowSpinner" class="w-4 mt-1"/>
   <div v-if="column.editingNote && column.editingNote[mode]" class="mt-1 text-xs text-lightFormFieldTextColor dark:text-darkFormFieldTextColor">{{ column.editingNote[mode] }}</div>
 </template>
@@ -68,7 +68,7 @@
     source: 'create' | 'edit',
     column: any,
     currentValues: any,
-    mode: string,
+    mode: 'create' | 'edit',
     columnOptions: any,
     unmasked: any,
     setCurrentValue: Function,

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

@@ -35,16 +35,12 @@ import {computed, onMounted, ref, watch} from "vue";
 import debounce from 'debounce'
 import RangePicker from './RangePicker.vue';
 
-const props = defineProps({
-  valueStart: {
-    default: '',
-  },
-  valueEnd: {
-    default: '',
-  },
-  min: {},
-  max: {},
-});
+const props = defineProps<{
+  valueStart: number | null,
+  valueEnd: number | null,
+  min: number,
+  max: number,
+}>()
 
 const emit = defineEmits(['update:valueStart', 'update:valueEnd']);
 
@@ -52,8 +48,8 @@ const minFormatted = computed(() => Math.floor(<number>props.min));
 const maxFormatted = computed(() => Math.ceil(<number>props.max));
 
 
-const start = ref<string | number>(props.valueStart);
-const end = ref<string | number>(props.valueEnd);
+const start = ref<number | null>(props.valueStart);
+const end = ref<number | null>(props.valueEnd);
 
 const sliderValue = ref<[number, number]>([minFormatted.value, maxFormatted.value]);
 
@@ -71,8 +67,8 @@ watch([start, end], () => {
 
 const updateFromSlider =
     debounce((value: [number, number]) => {
-      start.value = value[0] === minFormatted.value ? '': value[0];
-      end.value = value[1] === maxFormatted.value ? '': value[1];
+      start.value = value[0] === minFormatted.value ? null : value[0];
+      end.value = value[1] === maxFormatted.value ? null : value[1];
     }, 500);
 
 onMounted(() => {

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>
@@ -80,7 +80,7 @@
   const props = defineProps<{
     source: 'create' | 'edit',
     group: any,
-    mode: string,
+    mode: 'create' | 'edit',
     validatingMode: boolean,
     currentValues: any,
     unmasked: any,

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/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">

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

@@ -71,7 +71,7 @@
             >
               <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-lightSidebarIcons group-hover:text-lightSidebarIconsHover transition duration-75 dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" ></component>
               <span class="overflow-hidden flex-1 ms-3 text-left rtl:text-right whitespace-nowrap">{{ item.label }}
-                <span v-if="item.badge" class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
+                <span v-if="item.badge || item.badge === 0" class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
                   fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent">
                   <Tooltip v-if="item.badgeTooltip">
                     {{ item.badge }}
@@ -129,7 +129,7 @@
                       } : {}"
                     >{{ item.label }}
 
-                        <span v-if="item.badge" class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
+                        <span v-if="item.badge || item.badge === 0" class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
                         fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent">
                         <Tooltip v-if="item.badgeTooltip">
                             {{ item.badge }}

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

@@ -51,12 +51,16 @@
                 @callAction="(payload? : Object) => handleActionClick(action, payload)"
               >
                 <a @click.prevent class="block">
-                  <div class="flex items-center gap-2">
+                  <div class="flex items-center gap-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover">
                     <component 
-                      v-if="action.icon" 
+                      v-if="action.icon && !actionLoadingStates[action.id!]" 
                       :is="getIcon(action.icon)" 
                       class="w-4 h-4 text-lightPrimary dark:text-darkPrimary"
                     />
+                    <Spinner
+                      v-if="actionLoadingStates[action.id!]"
+                      class="w-5 h-5 text-gray-200 dark:text-gray-500 fill-gray-500 dark:fill-gray-300"
+                    />
                     {{ action.name }}
                   </div>
                 </a>
@@ -91,12 +95,12 @@
 import { getCustomComponent, getIcon, formatComponent, executeCustomAction } from '@/utils';
 import { useCoreStore } from '@/stores/core';
 import { useAdminforth } from '@/adminforth';
-import { callAdminForthApi } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
 import CallActionWrapper from '@/components/CallActionWrapper.vue'
 import { ref, type ComponentPublicInstance, onMounted, onUnmounted } from 'vue';
 import type { AdminForthActionFront, AdminForthBulkActionFront, AdminForthComponentDeclarationFull } from '@/types/Common';
 import type { AdminForthActionInput } from '@/types/Back';
+import { Spinner } from '@/afcl';
 
 const { list, alert} = useAdminforth();
 const route = useRoute();
@@ -104,6 +108,7 @@ const coreStore = useCoreStore();
 const router = useRouter();
 const threeDotsDropdownItemsRefs = ref<Array<ComponentPublicInstance | null>>([]);
 const showDropdown = ref(false);
+const actionLoadingStates = ref<Record<string, boolean>>({});
 const dropdownRef = ref<HTMLElement | null>(null);
 const buttonTriggerRef = ref<HTMLElement | null>(null);
 
@@ -135,6 +140,9 @@ async function handleActionClick(action: AdminForthActionInput, payload: any) {
     resourceId: route.params.resourceId as string,
     recordId: route.params.primaryKey as string,
     extra: payload || {},
+    setLoadingState: (loading: boolean) => {
+      actionLoadingStates.value[action.id!] = loading;
+    },
     onSuccess: async (data: any) => {
       await coreStore.fetchRecord({
         resourceId: route.params.resourceId as string,
@@ -195,7 +203,7 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-  .wrapper > * {
+  .wrapper {
     @apply px-4 py-2 
     hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover 
     dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover