adminforth 2.4.0-next.8 → 2.4.0-next.81

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

@@ -2,15 +2,15 @@
   <div>
     <div class="grid w-40 gap-4 mb-2">
       <div>
-        <label v-if="label" for="start-time" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ label }}</label>
+        <label v-if="label" for="start-time" class="block mb-2 text-sm font-medium text-lightDatePickerButtonText dark:text-darkDatePickerButtonText">{{ label }}</label>
 
         <div class="relative" :class="{hidden: column.type === 'time'}">
           <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-            <IconCalendar class="w-4 h-4 text-gray-500 dark:text-gray-400"/>
+            <IconCalendar class="w-4 h-4 text-lightDatePickerIcon dark:text-darkDatePickerIcon"/>
           </div>
 
           <input ref="datepickerStartEl"  type="text"
-                 class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
+                 class="af-pick-date-button bg-lightDatePickerButtonBackground border border-lightDatePickerButtonBorder text-lightDatePickerButtonText text-sm rounded-lg block w-full p-2.5 dark:bg-darkDatePickerButtonBackground dark:border-darkDatePickerButtonBorder dark:placeholder-darkInputPlaceholderText dark:text-darkDatePickerButtonText focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder"
                 :placeholder="$t('Select date')" :disabled="readonly" />
           
         </div>
@@ -22,18 +22,17 @@
         <div>
           <div class="relative">
             <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-              <IconTime class="w-4 h-4 text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-700"/>
+              <IconTime class="w-4 h-4 text-lightDatePickerIcon dark:text-darkDatePickerIcon bg-lightDatePickerButtonBackground dark:bg-darkDatePickerButtonBackground"/>
             </div>
-
-            <input v-model="startTime" type="time" id="start-time" onfocus="this.showPicker()" onclick="this.showPicker()" step="1"
-                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
+            <input v-model="startTime" type="time" id="start-time" step="1"
+                   class="af-pick-time-button bg-lightDatePickerButtonBackground border border-lightDatePickerButtonBorder text-lightDatePickerButtonText text-sm rounded-lg block w-full p-2.5 dark:bg-darkInputBackground dark:border-darkInputBorder dark:placeholder-darkInputPlaceholderText dark:text-darkDatePickerButtonText focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder"
                    value="00:00" :disabled="readonly" required/>
           </div>
         </div>
       </div>
 
       <button type="button"
-              class="text-lightPrimary dark:text-darkPrimary text-base font-medium hover:underline p-0 inline-flex items-center mb-2"
+              class="text-lightDatePickerExpandText dark:text-darkDatePickerExpandText text-base font-medium hover:underline p-0 inline-flex items-center mb-2"
               :class="{hidden: column.type !== 'datetime'}"
               @click="toggleTimeInputs">{{ showTimeInputs ? $t('Hide time') : $t('Show time') }}
         <svg class="w-8 h-8 ms-0.5" :class="{'rotate-180': showTimeInputs}" aria-hidden="true"
@@ -197,4 +196,91 @@ function focus() {
 defineExpose({
   focus,
 });
-</script>
+</script>
+
+<style lang="css" scoped>
+
+:global(.datepicker-controls button svg),
+:global(.datepicker-controls button) {
+  @apply text-lightDatePickerCalendarText;
+}
+
+:global( .datepicker-dropdown ),
+:global( .datepicker-picker ) {
+  @apply !bg-lightDatePickerCalendarBackground
+}
+
+:global(.datepicker-controls button:hover) {
+  @apply bg-lightDatePickerCalendarArrowButtonBackgroundHover;    
+}
+
+:global(.datepicker-controls button) {
+  @apply ring-lightDatePickerCalendarArrowButtonFocusRing bg-lightDatePickerCalendarArrowButtonBackground;    
+}
+
+:global(.datepicker-controls button:focus) {
+  @apply ring-lightDatePickerCalendarArrowButtonFocusRing;
+}
+
+:global(.days-of-week span) {
+  @apply text-lightDatePickerCalendarDaysOfWeekText;
+}
+
+:global(.datepicker-grid span) {
+  @apply text-lightDatePickerCalendarDateButtonText; 
+}
+
+:global(.datepicker-grid span:hover:not(.selected)) {
+  @apply bg-lightDatePickerCalendarDateButtonBackgroundHover; 
+}
+
+:global(.datepicker-grid .selected ) {
+  @apply text-lightDatePickerCalendarDateActiveButtonText bg-lightDatePickerCalendarDateActiveButtonBackground; 
+}
+
+
+
+
+
+
+
+
+:global(.dark .datepicker-controls button svg),
+:global(.dark .datepicker-controls button) {
+  @apply text-darkDatePickerCalendarMainText;
+}
+
+:global(.dark .datepicker-dropdown),
+:global(.dark .datepicker-picker) {
+  @apply !bg-darkDatePickerCalendarBackground;
+}
+
+:global(.dark .datepicker-controls button:hover) {
+  @apply bg-darkDatePickerCalendarArrowButtonBackgroundHover;    
+}
+
+:global(.dark .datepicker-controls button) {
+  @apply ring-darkDatePickerCalendarArrowButtonFocusRing bg-darkDatePickerCalendarArrowButtonBackground;    
+}
+
+:global(.dark .datepicker-controls button) {
+  @apply ring-darkDatePickerCalendarArrowButtonFocusRing;    
+}
+
+:global(.dark .days-of-week span) {
+  @apply text-darkDatePickerCalendarDaysOfWeekText;
+}
+
+:global(.dark .datepicker-grid span) {
+  @apply text-darkDatePickerCalendarDateButtonText; 
+}
+
+:global(.dark .datepicker-grid span:hover:not(.selected)) {
+  @apply bg-darkDatePickerCalendarDateButtonBackgroundHover; 
+}
+
+:global(.dark .datepicker-grid .selected) {
+  @apply text-darkDatePickerCalendarDateActiveButtonText 
+         bg-darkDatePickerCalendarDateActiveButtonBackground; 
+}
+</style>

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

@@ -3,21 +3,21 @@
     <div class="mx-auto grid grid-cols-2 gap-4 mb-2" :class="{hidden: column.type === 'time'}">
       <div class="relative">
         <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-          <IconCalendar class="w-4 h-4 text-gray-500 dark:text-gray-400"/>
+          <IconCalendar class="w-4 h-4 text-lightDatePickerIcon dark:text-darkDatePickerIcon"/>
         </div>
 
         <input ref="datepickerStartEl" type="text"
-               class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+               class="bg-lightDatePickerButtonBackground border leading-none border-lightDatePickerButtonBorder text-lightDatePickerButtonText placeholder-lightDatePickerPlaceHolder text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-darkDatePickerButtonBackground dark:border-darkDatePickerButtonBorder dark:placeholder-darkDatePickerPlaceHolder dark:text-darkDatePickerButtonText dark:focus:ring-blue-500 dark:focus:border-blue-500"
                :placeholder="$t('From')">
       </div>
 
       <div class="relative">
         <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-          <IconCalendar class="w-4 h-4 text-gray-500 dark:text-gray-400"/>
+          <IconCalendar class="w-4 h-4 text-lightDatePickerIcon dark:text-darkDatePickerIcon"/>
         </div>
 
         <input ref="datepickerEndEl" type="text"
-               class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+               class="bg-lightDatePickerButtonBackground border leading-none border-lightDatePickerButtonBorder text-lightDatePickerButtonText placeholder-lightDatePickerPlaceHolder text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-darkDatePickerButtonBackground dark:border-darkDatePickerButtonBorder dark:placeholder-darkDatePickerPlaceHolder dark:text-darkDatePickerButtonText dark:focus:ring-blue-500 dark:focus:border-blue-500"
                :placeholder="$t('To')">
       </div>
     </div>
@@ -27,11 +27,11 @@
         <div>
           <div class="relative">
             <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-              <IconTime class="w-4 h-4 text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-700"/>
+              <IconTime class="w-4 h-4 text-lightDatePickerIcon dark:text-darkDatePickerIcon bg-lightDatePickerButtonBackground dark:bg-darkDatePickerButtonBackground"/>
             </div>
 
             <input v-model="startTime" type="time" id="start-time"
-                   class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                   class="bg-lightDatePickerButtonBackground border leading-none border-lightDatePickerButtonBorder text-lightDatePickerButtonText placeholder-lightDatePickerPlaceHolder text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-darkDatePickerButtonBackground dark:border-darkDatePickerButtonBorder dark:placeholder-darkDatePickerPlaceHolder dark:text-darkDatePickerButtonText dark:focus:ring-blue-500 dark:focus:border-blue-500"
                    value="00:00" required/>
           </div>
         </div>
@@ -39,11 +39,11 @@
         <div>
           <div class="relative">
             <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-              <IconTime class="w-4 h-4 text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-700"/>
+              <IconTime class="w-4 h-4 text-lightDatePickerIcon dark:text-darkDatePickerIcon bg-lightDatePickerButtonBackground dark:bg-darkDatePickerButtonBackground"/>
             </div>
 
             <input v-model="endTime" type="time" id="end-time"
-                   class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                   class="bg-lightDatePickerButtonBackground border leading-none border-lightDatePickerButtonBorder text-lightDatePickerButtonText placeholder-lightDatePickerPlaceHolder text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-darkDatePickerButtonBackground dark:border-darkDatePickerButtonBorder dark:placeholder-darkDatePickerPlaceHolder dark:text-darkDatePickerButtonText dark:focus:ring-blue-500 dark:focus:border-blue-500"
                    value="00:00" required/>
           </div>
         </div>
@@ -172,6 +172,7 @@ function updateFromProps() {
   if (!props.valueEnd) {
     datepickerEndEl.value.value = '';
     endTime.value = '';
+    endDate.value = '';
   } else if (props.column.type === 'time') {
     endTime.value = props.valueEnd;
   } else {

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

@@ -4,7 +4,7 @@
       :min="minFormatted"
       :max="maxFormatted"
       type="number" aria-describedby="helper-text-explanation"
-      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      class="bg-lightRangePickerInputBackground border border-lightRangePickerInputBorder text-lightRangePickerInputText placeholder-lightRangePickerInputPlaceholder text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-darkRangePickerInputBackground dark:border-darkRangePickerInputBorder dark:placeholder-darkRangePickerInputPlaceholder dark:text-darkRangePickerInputText dark:focus:ring-blue-500 dark:focus:border-blue-500"
       :placeholder="$t('From')"
       v-model="start"
     >
@@ -13,7 +13,7 @@
       :min="minFormatted"
       :max="maxFormatted"
       type="number" aria-describedby="helper-text-explanation"
-      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      class="bg-lightRangePickerInputBackground border border-lightRangePickerInputBorder text-lightRangePickerInputText placeholder-lightRangePickerInputPlaceholder text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-darkRangePickerInputBackground dark:border-darkRangePickerInputBorder dark:placeholder-darkRangePickerInputPlaceholder dark:text-darkRangePickerInputText dark:focus:ring-blue-500 dark:focus:border-blue-500"
       :placeholder="$t('To')"
       v-model="end"
     >
@@ -21,7 +21,7 @@
     <button
       v-if="isChanged"
       type="button"
-      class="flex items-center p-0.5 ml-auto px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+      class="flex items-center p-0.5 ml-auto px-3 text-sm font-medium text-lightRangePickerButtonText focus:outline-none bg-lightRangePickerButtonBackground rounded border border-lightRangePickerButtonBorder hover:bg-lightRangePickerButtonBackgroundHover hover:text-lightRangePickerButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightRangePickerFocusRing dark:focus:ring-darkRangePickerFocusRing dark:bg-darkRangePickerButtonBackground dark:text-darkRangePickerButtonText dark:border-darkRangePickerButtonBorder dark:hover:text-darkRangePickerButtonTextHover dark:hover:bg-darkRangePickerButtonBackgroundHover disabled:opacity-50 disabled:cursor-not-allowed"
       @click="clear">Clear
     </button>
 
@@ -153,4 +153,33 @@ function setSliderValues(start, end) {
       @apply bg-lightPrimaryOpacity;
     }
 }
+
+.dark .custom-slider {
+  &:deep(.vue-slider-rail) {
+    background-color: rgb(55 65 81); // gray-700
+  }
+
+  &:deep(.vue-slider-dot-handle) {
+    @apply bg-darkPrimary;
+    border: none;
+    box-shadow: none;
+  }
+
+  &:deep(.vue-slider-dot-handle:hover) {
+    @apply bg-darkPrimary;
+    filter: brightness(1.1);
+    border: none;
+    box-shadow: none;
+  }
+
+  &:deep(.vue-slider-process) {
+    @apply bg-darkPrimaryOpacity;
+  }
+
+  &:deep(.vue-slider-process:hover) {
+    filter: brightness(1.1);
+    @apply bg-darkPrimaryOpacity;
+  }
+}
+
 </style>

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

@@ -2,16 +2,16 @@
   <!-- drawer component -->
   <div id="drawer-navigation" 
   
-      class="fixed  right-0 z-50 p-4 overflow-y-auto transition-transform translate-x-full bg-white w-80 dark:bg-gray-800 shadow-xl dark:shadow-gray-900"
+      class="af-filters-sidebar fixed right-0 z-50 p-4 overflow-y-auto transition-transform translate-x-full bg-lightFiltersBackgroung w-80 dark:bg-darkFiltersBackgroung shadow-xl dark:shadow-gray-900"
 
       :class="show ? 'top-0 transform-none' : ''"
       tabindex="-1" aria-labelledby="drawer-navigation-label"
       :style="{ height: `calc(100dvh ` }"
   >
-    <h5 id="drawer-navigation-label" class="text-base font-semibold text-gray-500 uppercase dark:text-gray-400">
+    <h5 id="drawer-navigation-label" class="text-base font-semibold text-lightFiltersHeaderText uppercase dark:text-darkFiltersHeaderText">
       {{ $t('Filters') }}
 
-      <button type="button" @click="$emit('hide')" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute end-2.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" >
+      <button type="button" @click="$emit('hide')" class="text-lightFiltersCloseIcon bg-transparent hover:bg-lightFiltersCloseIconHoverBackground hover:text-lightFiltersCloseIconHover rounded-lg text-sm p-1.5 absolute end-2.5 inline-flex items-center dark:text-darkFiltersCloseIcon dark:hover:bg-darkFiltersCloseIconHoverBackground dark:hover:text-darkFiltersCloseIconHover" >
         <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
         <span class="sr-only">{{ $t('Close menu') }}</span>
       </button>
@@ -43,9 +43,23 @@
               :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]) {
+                  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 ? [] : '')"
-            />
+            >
+              <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">
+                  <Spinner class="w-4 h-4" />
+                  {{ $t('Loading...') }}
+                </div>
+              </template>
+            </Select>
             <Select
               :multiple="c.filterOptions.multiselect"
               class="w-full"
@@ -124,7 +138,7 @@
       <button 
         :disabled="!filtersStore.filters.length"
         type="button" 
-        class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+        class="flex items-center py-1 px-3 text-sm font-medium text-lightFiltersClearAllButtonText focus:outline-none bg-lightFiltersClearAllButtonBackground rounded border border-lightFiltersClearAllButtonBorder hover:bg-lightFiltersClearAllButtonBackgroundHover hover:text-lightFiltersClearAllButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightFiltersClearAllButtonFocus dark:focus:ring-darkFiltersClearAllButtonFocus dark:bg-darkFiltersClearAllButtonBackground dark:text-darkFiltersClearAllButtonText dark:border-darkFiltersClearAllButtonBorder dark:hover:text-darkFiltersClearAllButtonTextHover dark:hover:bg-darkFiltersClearAllButtonBackgroundHover disabled:opacity-50 disabled:cursor-not-allowed"
         @click="clear">{{ $t('Clear all') }}</button>
 
    </div>
@@ -136,17 +150,17 @@
 </template>
 
 <script setup>
-import { watch, computed } from 'vue';
+import { watch, computed, ref, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import CustomDateRangePicker from '@/components/CustomDateRangePicker.vue';
-import { callAdminForthApi } from '@/utils';
+import { callAdminForthApi, loadMoreForeignOptions, searchForeignOptions, createSearchInputHandlers } from '@/utils';
 import { useRouter } from 'vue-router';
-import { computedAsync } from '@vueuse/core'
 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';
+import Spinner from '@/afcl/Spinner.vue';
 import debounce from 'debounce';
 
 const filtersStore = useFiltersStore();
@@ -165,31 +179,54 @@ const columnsWithFilter = computed(
   () => props.columns?.filter(column => column.showIn.filter) || []
 );
 
-const columnOptions = computedAsync(async () => {
-  const ret = {};
-  if (!props.columns) {
-    return ret;
-  }
-  await Promise.all(
-    Object.values(props.columns).map(async (column) => {
-      if (column.foreignResource) {
-        const list = await callAdminForthApi({
-          method: 'POST',
-          path: `/get_resource_foreign_data`,
-          body: {
-            resourceId: router.currentRoute.value.params.resourceId,
-            column: column.name,
-            limit: 10000,
-            offset: 0,
-          },
-        });
-        ret[column.name] = list.items;
+const columnOptions = ref({});
+const columnLoadingState = reactive({});
+const columnOffsets = reactive({});
+const columnEmptyResultsCount = reactive({});
+
+watch(() => props.columns, async (newColumns) => {
+  if (!newColumns) return;
+  
+  for (const column of newColumns) {
+    if (column.foreignResource) {
+      if (!columnOptions.value[column.name]) {
+        columnOptions.value[column.name] = [];
+        columnLoadingState[column.name] = { loading: false, hasMore: true };
+        columnOffsets[column.name] = 0;
+        columnEmptyResultsCount[column.name] = 0;
+        
+        await loadMoreOptions(column.name);
       }
-    })
-  );
+    }
+  }
+}, { immediate: true });
+
+// Function to load more options for a specific column
+async function loadMoreOptions(columnName, searchTerm = '') {
+  return loadMoreForeignOptions({
+    columnName,
+    searchTerm,
+    columns: props.columns,
+    resourceId: router.currentRoute.value.params.resourceId,
+    columnOptions,
+    columnLoadingState,
+    columnOffsets,
+    columnEmptyResultsCount
+  });
+}
 
-  return ret;
-}, {});
+async function searchOptions(columnName, searchTerm) {
+  return searchForeignOptions({
+    columnName,
+    searchTerm,
+    columns: props.columns,
+    resourceId: router.currentRoute.value.params.resourceId,
+    columnOptions,
+    columnLoadingState,
+    columnOffsets,
+    columnEmptyResultsCount
+  });
+}
 
 
 // sync 'body' class 'overflow-hidden' with show prop show
@@ -221,6 +258,14 @@ const onFilterInput = computed(() => {
   }, {});
 });
 
+const onSearchInput = computed(() => {
+  return createSearchInputHandlers(
+    props.columns,
+    searchOptions,
+    (column) => column.filterOptions?.debounceTimeMs || 300
+  );
+});
+
 function setFilterItem({ column, operator, value }) {
 
   const index = filtersStore.filters.findIndex(f => f.field === column.name && f.operator === operator);

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

@@ -1,10 +1,10 @@
 <template>
   <div class="rounded-lg shadow-resourseFormShadow dark:shadow-darkResourseFormShadow dark:shadow-2xl">
-    <div v-if="group.groupName && !group.noTitle" class="text-md font-semibold px-6 py-3 flex flex-1 items-center dark:border-gray-600 text-gray-700 bg-lightFormHeading dark:bg-gray-700 dark:text-gray-400 rounded-t-lg">
+    <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>
-    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-      <thead v-if="!allColumnsHaveCustomComponent" class="text-xs text-gray-700 uppercase dark:text-gray-400 bg-lightFormHeading dark:bg-gray-700 block md:table-row-group ">
+    <table class="w-full text-sm text-left rtl:text-right text-lightFormFieldTextColor dark:text-darkFormFieldTextColor">
+      <thead v-if="!allColumnsHaveCustomComponent" class="text-xs text-lightListTableHeadingText uppercase dark:text-darkListTableHeadingText bg-lightFormHeading dark:bg-darkFormHeading block md:table-row-group ">
         <tr>
           <th scope="col" :class="{'rounded-tl-lg': !group.groupName}" class="px-6 py-3 hidden md:w-52 md:table-cell">
               {{ $t('Field') }}
@@ -19,7 +19,7 @@
           v-for="(column, i) in group.columns"
           :key="column.name"
           v-if="currentValues !== null"
-          class="bg-ligftForm dark:bg-gray-800 dark:border-gray-700 block md:table-row"
+          class="bg-lightForm dark:bg-darkForm dark:border-darkFormBorder block md:table-row"
           :class="{ 'border-b': i !== group.columns.length - 1}"
         >
           <td class="px-6 py-4 flex items-center block md:table-cell pb-0 md:pb-4" 
@@ -29,7 +29,7 @@
               <Tooltip v-if="column.required[mode]">
 
                 <IconExclamationCircleSolid v-if="column.required[mode]" class="w-4 h-4" 
-                  :class="(columnError(column) && validating) ? 'text-red-500 dark:text-red-400' : 'text-gray-400 dark:text-gray-500'"
+                  :class="(columnError(column) && validating) ? 'text-lightInputErrorColor dark:text-darkInputErrorColor' : 'text-lightRequiredIconColor dark:text-darkRequiredIconColor'"
                 />
 
                 <template #tooltip>
@@ -55,8 +55,8 @@
               @update:emptiness="customComponentsEmptiness[$event.name] = $event.value"
               :readonly="readonlyColumns?.includes(column.name)"
             />
-            <div v-if="columnError(column) && validating" class="mt-1 text-xs text-red-500 dark:text-red-400">{{ columnError(column) }}</div>
-            <div v-if="column.editingNote && column.editingNote[mode]" class="mt-1 text-xs text-gray-400 dark:text-gray-500">{{ column.editingNote[mode] }}</div>
+            <div v-if="columnError(column) && validating" class="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>

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

@@ -63,9 +63,9 @@
 
 <script setup lang="ts">
 
-import { applyRegexValidation, callAdminForthApi} from '@/utils';
+import { applyRegexValidation, callAdminForthApi, loadMoreForeignOptions, searchForeignOptions, createSearchInputHandlers} from '@/utils';
 import { computedAsync } from '@vueuse/core';
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, reactive, ref, watch, provide } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useCoreStore } from "@/stores/core";
 import GroupsTable from '@/components/GroupsTable.vue';
@@ -95,6 +95,11 @@ const currentValues = ref(null);
 const customComponentsInValidity = ref({});
 const customComponentsEmptiness = ref({});
 
+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 columnError = (column) => {
   const val = computed(() => {
     if (!currentValues.value) {
@@ -186,7 +191,7 @@ const validateValue = (type, value, column) => {
 };
 
 
-const setCurrentValue = (key, value, index=null) => {
+const setCurrentValue = (key, value, index = null) => {
   const col = props.resource.columns.find((column) => column.name === key);
   // if field is an array, we need to update the array or individual element
   if (col.type === 'json' && col.isArray?.enabled) {
@@ -239,6 +244,23 @@ const setCurrentValue = (key, value, index=null) => {
   emit('update:record', up);
 };
 
+watch(() => props.resource.columns, async (newColumns) => {
+  if (!newColumns) return;
+  
+  for (const column of newColumns) {
+    if (column.foreignResource) {
+      if (!columnOptions.value[column.name]) {
+        columnOptions.value[column.name] = [];
+        columnLoadingState[column.name] = { loading: false, hasMore: true };
+        columnOffsets[column.name] = 0;
+        columnEmptyResultsCount[column.name] = 0;
+        
+        await loadMoreOptions(column.name);
+      }
+    }
+  }
+}, { immediate: true });
+
 onMounted(() => {
   currentValues.value = Object.assign({}, props.record);
   // json values should transform to string
@@ -266,29 +288,31 @@ onMounted(() => {
   emit('update:isValid', isValid.value);
 });
 
-const columnOptions = computedAsync(async () => { 
-  return (await Promise.all(
-    Object.values(props.resource.columns).map(async (column) => {
-      if (column.foreignResource) {
-        const list = await callAdminForthApi({
-          method: 'POST',
-          path: `/get_resource_foreign_data`,
-          body: {
-            resourceId: router.currentRoute.value.params.resourceId,
-            column: column.name,
-            limit: 1000,
-            offset: 0,
-          },
-        });
-
-        if (!column.required[props.source] && !column.isArray?.enabled) list.items.push({ value: null, label: column.foreignResource.unsetLabel });
-
-        return { [column.name]: list.items };
-      }
-    })
-  )).reduce((acc, val) => Object.assign(acc, val), {})
-
-}, {});
+async function loadMoreOptions(columnName: string, searchTerm = '') {
+  return loadMoreForeignOptions({
+    columnName,
+    searchTerm,
+    columns: props.resource.columns,
+    resourceId: router.currentRoute.value.params.resourceId as string,
+    columnOptions,
+    columnLoadingState,
+    columnOffsets,
+    columnEmptyResultsCount
+  });
+}
+
+async function searchOptions(columnName: string, searchTerm: string) {
+  return searchForeignOptions({
+    columnName,
+    searchTerm,
+    columns: props.resource.columns,
+    resourceId: router.currentRoute.value.params.resourceId as string,
+    columnOptions,
+    columnLoadingState,
+    columnOffsets,
+    columnEmptyResultsCount
+  });
+}
 
 
 const editableColumns = computed(() => {
@@ -330,6 +354,17 @@ const getOtherColumns = () => {
 
 const otherColumns = getOtherColumns();
 
+const onSearchInput = computed(() => {
+  return createSearchInputHandlers(
+    props.resource.columns,
+    searchOptions
+  );
+});
+
+provide('columnLoadingState', columnLoadingState);
+provide('onSearchInput', onSearchInput);
+provide('loadMoreOptions', loadMoreOptions);
+
 watch(() => isValid.value, (value) => {
   emit('update:isValid', value);
 });