adminforth 2.4.0-next.290 → 2.4.0-next.292

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

@@ -52,7 +52,7 @@
           <label v-if="!$slots.item" :for="item.value">{{ item.label }}</label>
         </div>
         <div v-if="!filteredItems.length" class="px-4 py-2 cursor-pointer text-lightDropdownOptionsText dark:text-darkDropdownOptionsText">
-          {{ options?.length ? $t('No results found') : $t('No items here') }}
+          {{ $t('No results found') }}
         </div>
 
         <div v-if="$slots['extra-item']" class="px-4 py-2 dark:text-gray-400">
@@ -148,6 +148,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  searchDebounceMs: {
+    type: Number,
+    default: 300,
+  },
 });
 
 const emit = defineEmits(['update:modelValue', 'scroll-near-end', 'search']);
@@ -165,6 +169,7 @@ const dropdownStyle = ref<{ top?: string; }>({
 
 const selectedItems: Ref<any[]> = ref([]);
 const internalSelect = ref<HTMLElement | null>(null);
+let searchDebounceHandle: ReturnType<typeof setTimeout> | null = null;
 
 function inputInput() {
   if (!props.multiple && selectedItems.value.length) {
@@ -172,7 +177,12 @@ function inputInput() {
     emit('update:modelValue', null);
   }
   if (!props.searchDisabled) {
-    emit('search', search.value);
+    if (searchDebounceHandle) {
+      clearTimeout(searchDebounceHandle);
+    }
+    searchDebounceHandle = setTimeout(() => {
+      emit('search', search.value);
+    }, props.searchDebounceMs);
   }
 }
 
@@ -329,6 +339,10 @@ onUnmounted(() => {
   if (props.teleportToBody) {
     window.removeEventListener('scroll', handleScroll, true);
   }
+  if (searchDebounceHandle) {
+    clearTimeout(searchDebounceHandle);
+    searchDebounceHandle = null;
+  }
 });
 
 const getDropdownPosition = computed(() => {

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

@@ -17,7 +17,7 @@
     <Select
       v-else-if="column.foreignResource"
       ref="input"
-      :key="`${column.name}-${(columnOptions[column.name] || []).length}`"
+      :key="`select-${column.name}-${source}-${column.foreignResource?.name || column.foreignResource?.table || ''}`"
       class="w-full min-w-24"
       :options="columnOptions[column.name] || []"
       :searchDisabled="!column.foreignResource.searchableFields"

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

@@ -5,17 +5,17 @@
     :class="toast.variant == 'info' ? 'border-lightPrimary dark:border-darkPrimary' : toast.variant == 'danger' ? 'border-red-500 dark:border-red-800' : toast.variant == 'warning' ? 'border-orange-500 dark:border-orange-700' : 'border-green-500 dark:border-green-800'"
     role="alert"
 >
-    <div v-if="toast.variant == 'info'" class=" inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-lightPrimary dark:text-darkPrimary bg-lightPrimaryOpacity rounded-lg dark:bg-darkPrimary dark:!text-blue-100">
+    <div v-if="toast.variant == 'info'" class="af-toast-icon inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-lightPrimary dark:text-darkPrimary bg-lightPrimaryOpacity rounded-lg dark:bg-darkPrimary dark:!text-blue-100">
         <IconInfoCircleSolid class="w-5 h-5" aria-hidden="true" />
     </div>
-    <div v-else-if="toast.variant == 'danger'" class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200">
+    <div v-else-if="toast.variant == 'danger'" class="af-toast-icon inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200">
         <IconCloseCircleSolid class="w-5 h-5" aria-hidden="true" />
     </div>
-    <div v-else-if="toast.variant == 'warning'"class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-orange-500 bg-orange-100 rounded-lg dark:bg-orange-700 dark:text-orange-200">
+    <div v-else-if="toast.variant == 'warning'" class="af-toast-icon inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-orange-500 bg-orange-100 rounded-lg dark:bg-orange-700 dark:text-orange-200">
         <IconExclamationCircleSolid class="w-5 h-5" aria-hidden="true" />
 
     </div>
-    <div v-else class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
+    <div v-else class="af-toast-icon inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
         <IconCheckCircleSolid class="w-5 h-5" aria-hidden="true" />
     </div>
 
@@ -24,7 +24,7 @@
         <div class="flex flex-col items-center justify-center">
             {{toast.message}}
             <div v-if="toast.buttons" class="flex justify-center mt-2 gap-2">
-                <div v-for="button in toast.buttons" class="rounded-md bg-lightButtonsBackground hover:bg-lightButtonsHover text-lightButtonsText dark:bg-darkPrimary dark:hover:bg-darkButtonsBackground  dark:text-darkButtonsText">
+                <div v-for="button in toast.buttons" class="af-toast-button rounded-md bg-lightButtonsBackground hover:bg-lightButtonsHover text-lightButtonsText dark:bg-darkPrimary dark:hover:bg-darkButtonsBackground  dark:text-darkButtonsText">
                     <button @click="onButtonClick(button.value)" class="px-2 py-1 rounded hover:bg-black/5 dark:hover:bg-white/10">
                         {{ button.label }}
                     </button>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "2.4.0-next.290",
+  "version": "2.4.0-next.292",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "module": "dist/index.js",