adminforth 2.17.0-next.3 → 2.17.0-next.30

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

@@ -0,0 +1,235 @@
+<template>
+  <div class="relative inline-block">
+    <div
+      ref="triggerRef"
+      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"
+      @click="toggleMenu"
+    >
+      <IconDotsHorizontalOutline class="w-6 h-6 text-lightPrimary dark:text-darkPrimary" />
+    </div>
+    <teleport to="body">
+      <div
+        v-if="showMenu"
+        ref="menuRef"
+        class="z-50 bg-white dark:bg-gray-900 rounded-md shadow-lg border dark:border-gray-700 py-1"
+        :style="menuStyles"
+      >
+        <template v-if="!resourceOptions?.baseActionsAsQuickIcons || (resourceOptions?.baseActionsAsQuickIcons && !resourceOptions?.baseActionsAsQuickIcons.includes('show'))">
+          <RouterLink
+            v-if="resourceOptions?.allowedActions?.show"
+            class="flex text-nowrap p-1 hover:bg-gray-100 dark:hover:bg-gray-800 w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300"
+            :to="{
+              name: 'resource-show', 
+              params: { 
+                resourceId: props.resourceId, 
+                primaryKey: record._primaryKeyValue,
+              }
+            }"
+
+          >
+            <IconEyeSolid class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"/>
+            {{ $t('Show item') }}
+          </RouterLink>
+        </template>
+        <template v-if="!resourceOptions?.baseActionsAsQuickIcons || (resourceOptions?.baseActionsAsQuickIcons && !resourceOptions?.baseActionsAsQuickIcons.includes('edit'))">
+          <RouterLink
+            v-if="resourceOptions?.allowedActions?.edit"
+            class="flex text-nowrap p-1 hover:bg-gray-100 dark:hover:bg-gray-800 w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300"
+            :to="{ 
+              name: 'resource-edit', 
+              params: { 
+                resourceId: props.resourceId, 
+                primaryKey: record._primaryKeyValue,
+              }
+            }"
+          >
+            <IconPenSolid class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"/>
+            {{ $t('Edit item') }}
+          </RouterLink>
+        </template>
+        <template v-if="!resourceOptions?.baseActionsAsQuickIcons || (resourceOptions?.baseActionsAsQuickIcons && !resourceOptions?.baseActionsAsQuickIcons.includes('delete'))">
+          <button
+            v-if="resourceOptions?.allowedActions?.delete"
+            class="flex text-nowrap p-1 hover:bg-gray-100 dark:hover:bg-gray-800 w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300"
+            @click="deleteRecord(record)"
+          >
+            <IconTrashBinSolid class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"/>
+            {{ $t('Delete item') }}
+          </button>
+        </template>
+        <div v-for="action in (resourceOptions.actions ?? []).filter(a => a.showIn?.listThreeDotsMenu)" :key="action.id" >
+            <button class="flex text-nowrap p-1 hover:bg-gray-100 dark:hover:bg-gray-800 w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300" @click="() => { startCustomAction(action.id, record); showMenu = false; }">
+              <component
+                :is="action.customComponent ? getCustomComponent(action.customComponent) : CallActionWrapper"
+                :meta="action.customComponent?.meta"
+                :row="record"
+                :resource="resource"
+                :adminUser="adminUser"
+                @callAction="(payload? : Object) => startCustomAction(action.id, record, payload)"
+              >
+                <component
+                  v-if="action.icon"
+                  :is="getIcon(action.icon)"
+                  class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"
+                />
+                {{ $t(action.name) }}
+              </component>               
+            </button>
+        </div>
+        <template v-if="customActionIconsThreeDotsMenuItems">
+            <component 
+                v-for="c in customActionIconsThreeDotsMenuItems"
+                :is="getCustomComponent(c)"
+                :meta="c.meta"
+                :resource="coreStore.resource" 
+                :adminUser="coreStore.adminUser"
+                :record="record"
+                :updateRecords="props.updateRecords"
+            />
+        </template>
+      </div>
+    </teleport>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  IconEyeSolid,
+  IconPenSolid,
+  IconTrashBinSolid,
+  IconDotsHorizontalOutline
+} from '@iconify-prerendered/vue-flowbite';
+import { onMounted, onBeforeUnmount, ref, nextTick, watch } from 'vue';
+import { getIcon, getCustomComponent } from '@/utils';
+import { useCoreStore } from '@/stores/core';
+import CallActionWrapper from '@/components/CallActionWrapper.vue'
+
+const coreStore = useCoreStore();
+const showMenu = ref(false);
+const triggerRef = ref<HTMLElement | null>(null);
+const menuRef = ref<HTMLElement | null>(null);
+const menuStyles = ref<Record<string, string>>({});
+
+const props = defineProps<{
+    resourceOptions: any;
+    record: any;
+    customActionIconsThreeDotsMenuItems: any[];
+    resourceId: string;
+    deleteRecord: (record: any) => void;
+    updateRecords: () => void;
+    startCustomAction: (actionId: string, record: any) => void;
+}>();
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScrollOrResize, true);
+  window.addEventListener('resize', handleScrollOrResize);
+  document.addEventListener('click', handleOutsideClick, true);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', handleScrollOrResize, true);
+  window.removeEventListener('resize', handleScrollOrResize);
+  document.removeEventListener('click', handleOutsideClick, true);
+});
+
+watch(showMenu, async (isOpen) => {
+  if (isOpen) {
+    await nextTick();
+    // First pass: after DOM mount
+    updateMenuPosition();
+    // Second pass: after layout/paint to catch width changes (fonts/icons)
+    requestAnimationFrame(() => {
+      updateMenuPosition();
+      // Final safety: one micro-delay retry if width was still 0
+      setTimeout(() => updateMenuPosition(), 0);
+    });
+  }
+});
+
+function toggleMenu() {
+  if (!showMenu.value) {
+    // Provisional position to avoid flashing at left:0 on first open
+    const el = triggerRef.value;
+    if (el) {
+      const rect = el.getBoundingClientRect();
+      const gap = 8;
+      menuStyles.value = {
+        position: 'fixed',
+        top: `${Math.round(rect.bottom)}px`,
+        left: `${Math.round(rect.left)}px`,
+      };
+    }
+  }
+  showMenu.value = !showMenu.value;
+}
+
+function updateMenuPosition() {
+  const el = triggerRef.value;
+  if (!el) return;
+  const rect = el.getBoundingClientRect();
+  const margin = 8; // gap around the trigger/menu
+  const menuEl = menuRef.value;
+  // Measure current menu size to align and decide flipping
+  let menuWidth = rect.width; // fallback to trigger width
+  let menuHeight = 0;
+  if (menuEl) {
+    const menuRect = menuEl.getBoundingClientRect();
+    // Prefer bounding rect; fallback to offset/scroll width if needed
+    const measuredW = menuRect.width || menuEl.offsetWidth || menuEl.scrollWidth;
+    if (measuredW > 0) menuWidth = measuredW;
+    const measuredH = menuRect.height || menuEl.offsetHeight || menuEl.scrollHeight;
+    if (measuredH > 0) menuHeight = measuredH;
+  }
+  // Right-align: right edge of menu == right edge of trigger
+  let left = rect.right - menuWidth;
+  // Clamp within viewport with small margin so it doesn't render off-screen
+  const minLeft = margin;
+  const maxLeft = Math.max(minLeft, window.innerWidth - margin - menuWidth);
+  left = Math.min(Math.max(left, minLeft), maxLeft);
+
+  // Determine whether to place above or below based on available space
+  const spaceBelow = window.innerHeight - rect.bottom - margin;
+  const spaceAbove = rect.top - margin;
+  const maxMenuHeight = Math.max(0, window.innerHeight - 2 * margin);
+
+  let top: number;
+  if (menuHeight === 0) {
+    // Unknown height yet (first pass). Prefer placing below; a subsequent pass will correct if needed.
+    top = rect.bottom + margin;
+  } else if (menuHeight <= spaceBelow) {
+    // Enough space below
+    top = rect.bottom + margin;
+  } else if (menuHeight <= spaceAbove) {
+    // Not enough below but enough above -> flip
+    top = rect.top - margin - menuHeight;
+  } else {
+    // Not enough space on either side: pick the side with more room and clamp within viewport
+    if (spaceBelow >= spaceAbove) {
+      top = Math.min(rect.bottom + margin, window.innerHeight - margin - menuHeight);
+    } else {
+      top = Math.max(margin, rect.top - margin - menuHeight);
+    }
+  }
+
+  menuStyles.value = {
+    position: 'fixed',
+    top: `${Math.round(top)}px`,
+    left: `${Math.round(left)}px`,
+    maxHeight: `${Math.round(maxMenuHeight)}px`,
+    overflowY: 'auto',
+  };
+}
+
+function handleScrollOrResize() {
+  showMenu.value = false;
+}
+
+function handleOutsideClick(e: MouseEvent) {
+  const target = e.target as Node | null;
+  if (!target) return;
+  if (menuRef.value?.contains(target)) return;
+  if (triggerRef.value?.contains(target)) return;
+  showMenu.value = false;
+}
+
+</script>

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

@@ -206,7 +206,7 @@ const setCurrentValue = (key: any, value: any, index = null) => {
     } else if (index === currentValues.value[key].length) {
       currentValues.value[key].push(null);
     } else {
-      if (['integer', 'float', 'decimal'].includes(col.isArray.itemType)) {
+      if (['integer', 'float'].includes(col.isArray.itemType)) {
         if (value || value === 0) {
           currentValues.value[key][index] = +value;
         } else {
@@ -215,12 +215,12 @@ const setCurrentValue = (key: any, value: any, index = null) => {
       } else {
         currentValues.value[key][index] = value;
       }
-      if (col?.isArray && ['text', 'richtext', 'string'].includes(col.isArray.itemType) && col.enforceLowerCase) {
+      if (col?.isArray && ['text', 'richtext', 'string', 'decimal'].includes(col.isArray.itemType) && col.enforceLowerCase) {
         currentValues.value[key][index] = currentValues.value[key][index].toLowerCase();
       }
     }
   } else {
-    if (col?.type && ['integer', 'float', 'decimal'].includes(col.type)) {
+    if (col?.type && ['integer', 'float'].includes(col.type)) {
       if (value || value === 0) {
         currentValues.value[key] = +value;
       } else {
@@ -229,7 +229,7 @@ const setCurrentValue = (key: any, value: any, index = null) => {
     } else {
       currentValues.value[key] = value;
     }
-    if (col?.type && ['text', 'richtext', 'string'].includes(col?.type) && col.enforceLowerCase) {
+    if (col?.type && ['text', 'richtext', 'string', 'decimal'].includes(col?.type) && col.enforceLowerCase) {
       currentValues.value[key] = currentValues.value[key].toLowerCase();
     }
   }
@@ -322,7 +322,7 @@ async function searchOptions(columnName: string, searchTerm: string) {
 
 
 const editableColumns = computed(() => {
-  return props.resource?.columns?.filter(column => column.showIn?.[mode.value] && (currentValues.value ? checkShowIf(column, currentValues.value) : true));
+  return props.resource?.columns?.filter(column => column.showIn?.[mode.value] && (currentValues.value ? checkShowIf(column, currentValues.value, props.resource.columns) : true));
 });
 
 const isValid = computed(() => {

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

@@ -119,8 +119,8 @@
             />
           </td>
           <td class=" items-center px-2 md:px-3 lg:px-6 py-4 cursor-default" @click="(e)=>{e.stopPropagation()}">
-            <div class="flex text-lightPrimary dark:text-darkPrimary items-center">
-              <Tooltip>
+            <div class="flex text-lightPrimary dark:text-darkPrimary items-center gap-2">
+              <Tooltip v-if="resource.options?.baseActionsAsQuickIcons && resource.options?.baseActionsAsQuickIcons.includes('show')">
                 <RouterLink
                   v-if="resource.options?.allowedActions?.show"
                   :to="{ 
@@ -139,8 +139,7 @@
                   {{ $t('Show item') }}
                 </template>
               </Tooltip>
-
-              <Tooltip>
+              <Tooltip v-if="resource.options?.baseActionsAsQuickIcons && resource.options?.baseActionsAsQuickIcons.includes('edit')" >
                 <RouterLink
                   v-if="resource.options?.allowedActions?.edit"
                   :to="{ 
@@ -157,8 +156,7 @@
                   {{ $t('Edit item') }}
                 </template>
               </Tooltip>
-
-              <Tooltip>
+              <Tooltip v-if="resource.options?.baseActionsAsQuickIcons && resource.options?.baseActionsAsQuickIcons.includes('delete')">
                 <button
                   v-if="resource.options?.allowedActions?.delete"
                   @click="deleteRecord(row)"
@@ -170,7 +168,6 @@
                   {{ $t('Delete item') }}
                 </template>
               </Tooltip>
-                
               <template v-if="customActionsInjection">
                 <component 
                   v-for="c in customActionsInjection"
@@ -185,7 +182,7 @@
 
               <template v-if="resource.options?.actions">
                 <Tooltip
-                  v-for="action in resource.options.actions.filter(a => a.showIn?.list)"
+                  v-for="action in resource.options.actions.filter(a => a.showIn?.list || a.showIn?.listQuickIcon)"
                   :key="action.id"
                 >
                     <component
@@ -198,12 +195,13 @@
                     >
                       <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="rowActionLoadingStates?.[action.id]"
                       >
                         <component
                           v-if="action.icon"
                           :is="getIcon(action.icon)"
-                          class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"
+                          class="w-6 h-6 text-lightPrimary dark:text-darkPrimary"
                         />
                       </button>
                     </component>
@@ -213,6 +211,16 @@
                   </template>
                 </Tooltip>
               </template>
+              <ListActionsThreeDots
+                v-if="showListActionsThreeDots"
+                :resourceOptions="resource?.options"
+                :record="row"
+                :updateRecords="()=>emits('update:records', true)"
+                :deleteRecord="deleteRecord"
+                :resourceId="resource.resourceId"
+                :startCustomAction="startCustomAction"
+                :customActionIconsThreeDotsMenuItems="customActionIconsThreeDotsMenuItems"
+              />
             </div>
             
           </td>
@@ -323,20 +331,18 @@ import { useCoreStore } from '@/stores/core';
 import { showSuccesTost, showErrorTost } from '@/composables/useFrontendApi';
 import SkeleteLoader from '@/components/SkeleteLoader.vue';
 import { getIcon } from '@/utils';
-import {
-  IconInboxOutline,
-} from '@iconify-prerendered/vue-flowbite';
-
 import {
   IconEyeSolid,
   IconPenSolid,
   IconTrashBinSolid,
+  IconInboxOutline
 } from '@iconify-prerendered/vue-flowbite';
 import router from '@/router';
 import { Tooltip } from '@/afcl';
 import type { AdminForthResourceCommon, AdminForthResourceColumnInputCommon, AdminForthResourceColumnCommon, AdminForthComponentDeclaration } from '@/types/Common';
 import adminforth from '@/adminforth';
 import Checkbox from '@/afcl/Checkbox.vue';
+import ListActionsThreeDots from '@/components/ListActionsThreeDots.vue';
 import CallActionWrapper from '@/components/CallActionWrapper.vue'
 
 const coreStore = useCoreStore();
@@ -352,6 +358,7 @@ const props = defineProps<{
   noRoundings?: boolean,
   customActionsInjection?: any[],
   tableBodyStartInjection?: any[],
+  customActionIconsThreeDotsMenuItems?: any[]
   tableRowReplaceInjection?: AdminForthComponentDeclaration,
 }>();
 
@@ -369,6 +376,12 @@ const pageInput = ref('1');
 const page = ref(1);
 const sort: Ref<Array<{field: string, direction: string}>> = ref([]);
 
+const showListActionsThreeDots = computed(() => {
+  return  props.resource?.options?.actions?.some(a => a.showIn?.listThreeDotsMenu) // show if any action is set to show in three dots menu
+    || (props.customActionIconsThreeDotsMenuItems && props.customActionIconsThreeDotsMenuItems.length > 0) // or if there are custom action icons for three dots menu
+    || !props.resource?.options.baseActionsAsQuickIcons // or if there is no baseActionsAsQuickIcons
+    || (props.resource?.options.baseActionsAsQuickIcons && props.resource?.options.baseActionsAsQuickIcons.length < 3) // if there all 3 base actions are shown as quick icons - hide three dots icon
+})
 
 const from = computed(() => ((page.value || 1) - 1) * props.pageSize + 1);
 const to = computed(() => Math.min((page.value || 1) * props.pageSize, props.totalRows));

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

@@ -129,8 +129,8 @@
             />
           </td>
           <td class=" items-center px-2 md:px-3 lg:px-6 py-4 cursor-default" @click="(e)=>{e.stopPropagation()}">
-            <div class="flex text-lightPrimary dark:text-darkPrimary items-center">
-              <Tooltip>
+            <div class="flex text-lightPrimary dark:text-darkPrimary items-center gap-2">
+              <Tooltip v-if="resource.options?.baseActionsAsQuickIcons && resource.options?.baseActionsAsQuickIcons.includes('show')">
                 <RouterLink
                   v-if="resource.options?.allowedActions?.show"
                   :to="{ 
@@ -142,15 +142,14 @@
                   }"
 
                 >
-                  <IconEyeSolid class="w-5 h-5 me-2"/>
+                  <IconEyeSolid class="af-show-icon w-5 h-5 me-2"/>
                 </RouterLink>
 
                 <template v-slot:tooltip>
                   {{ $t('Show item') }}
                 </template>
               </Tooltip>
-
-              <Tooltip>
+              <Tooltip v-if="resource.options?.baseActionsAsQuickIcons && resource.options?.baseActionsAsQuickIcons.includes('edit')" >
                 <RouterLink
                   v-if="resource.options?.allowedActions?.edit"
                   :to="{ 
@@ -161,26 +160,24 @@
                     }
                   }"
                 >
-                  <IconPenSolid class="w-5 h-5 me-2"/>
+                  <IconPenSolid class="af-edit-icon w-5 h-5 me-2"/>
                 </RouterLink>
                 <template v-slot:tooltip>
                   {{ $t('Edit item') }}
                 </template>
               </Tooltip>
-
-              <Tooltip>
+              <Tooltip v-if="resource.options?.baseActionsAsQuickIcons && resource.options?.baseActionsAsQuickIcons.includes('delete')">
                 <button
                   v-if="resource.options?.allowedActions?.delete"
                   @click="deleteRecord(row)"
                 >
-                  <IconTrashBinSolid class="w-5 h-5 me-2"/>
+                  <IconTrashBinSolid class="af-delete-icon w-5 h-5 me-2"/>
                 </button>
 
                 <template v-slot:tooltip>
                   {{ $t('Delete item') }}
                 </template>
-              </Tooltip>
-                
+              </Tooltip>                
               <template v-if="customActionsInjection">
                 <component 
                   v-for="c in customActionsInjection"
@@ -192,10 +189,9 @@
                   :updateRecords="()=>emits('update:records', true)"
                 />
               </template>
-
-                            <template v-if="resource.options?.actions">
+              <template v-if="resource.options?.actions">
                 <Tooltip
-                  v-for="action in resource.options.actions.filter(a => a.showIn?.list)"
+                  v-for="action in resource.options.actions.filter(a => a.showIn?.list || a.showIn?.listQuickIcon)"
                   :key="action.id"
                 >
                   <CallActionWrapper
@@ -212,12 +208,13 @@
                     >
                       <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="rowActionLoadingStates?.[action.id]"
                       >
                         <component
                           v-if="action.icon"
                           :is="getIcon(action.icon)"
-                          class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"
+                          class="w-6 h-6 text-lightPrimary dark:text-darkPrimary"
                         />
                       </button>
                     </component>
@@ -228,6 +225,16 @@
                   </template>
                 </Tooltip>
               </template>
+              <ListActionsThreeDots
+                v-if="showListActionsThreeDots"
+                :resourceOptions="resource?.options"
+                :record="row"
+                :updateRecords="()=>emits('update:records', true)"
+                :deleteRecord="deleteRecord"
+                :resourceId="resource.resourceId"
+                :startCustomAction="startCustomAction"
+                :customActionIconsThreeDotsMenuItems="customActionIconsThreeDotsMenuItems"
+              />
             </div>
           </td>
         </component>
@@ -359,6 +366,7 @@ import { Tooltip } from '@/afcl';
 import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, AdminForthComponentDeclaration } from '@/types/Common';
 import adminforth from '@/adminforth';
 import Checkbox from '@/afcl/Checkbox.vue';
+import ListActionsThreeDots from '@/components/ListActionsThreeDots.vue';
 import CallActionWrapper from '@/components/CallActionWrapper.vue'
 
 const coreStore = useCoreStore();
@@ -377,6 +385,7 @@ const props = defineProps<{
   containerHeight?: number,
   itemHeight?: number,
   bufferSize?: number,
+  customActionIconsThreeDotsMenuItems?: any[]
   tableRowReplaceInjection?: AdminForthComponentDeclaration
 }>();
 
@@ -394,6 +403,12 @@ const pageInput = ref('1');
 const page = ref(1);
 const sort: Ref<Array<{field: string, direction: string}>> = ref([]);
 
+const showListActionsThreeDots = computed(() => {
+  return  props.resource?.options?.actions?.some(a => a.showIn?.listThreeDotsMenu) // show if any action is set to show in three dots menu
+    || (props.customActionIconsThreeDotsMenuItems && props.customActionIconsThreeDotsMenuItems.length > 0) // or if there are custom action icons for three dots menu
+    || !props.resource?.options.baseActionsAsQuickIcons // or if there is no baseActionsAsQuickIcons
+    || (props.resource?.options.baseActionsAsQuickIcons && props.resource?.options.baseActionsAsQuickIcons.length < 3) // if there all 3 base actions are shown as quick icons - hide three dots icon
+})
 
 const from = computed(() => ((page.value || 1) - 1) * props.pageSize + 1);
 const to = computed(() => Math.min((page.value || 1) * props.pageSize, props.totalRows));

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

@@ -24,14 +24,14 @@
               dark:bg-darkShowTablesBodyBackground dark:border-darkShowTableBodyBorder block md:table-row"
           >
             <component
-                v-if="column.components?.showRow && checkShowIf(column, record)"
+                v-if="column.components?.showRow && checkShowIf(column, record, resource?.columns || [])"
                   :is="getCustomComponent(column.components.showRow)"
                   :meta="column.components.showRow.meta"
                   :column="column"
                   :resource="coreStore.resource"
                   :record="coreStore.record"
               />
-            <template v-else-if="checkShowIf(column, record)">
+            <template v-else-if="checkShowIf(column, record, resource?.columns || [])">
               <td class="px-6 py-4 relative block md:table-cell font-bold md:font-normal pb-0 md:pb-4">
                 {{ column.label }}
               </td>

package/dist/spa/src/renderers/RichText.vue

@@ -22,4 +22,19 @@ const htmlContent = protectAgainstXSS(props.record[props.column.name])
    /* You can add default styles here if needed */
   word-break: break-word;
 }
+.rich-text :deep(table) {
+  border-collapse: collapse;
+  border: 1px solid #ddd;
+}
+
+.rich-text :deep(table th),
+.rich-text :deep(table td) {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+
+.rich-text :deep(table th) {
+  background-color: #f5f5f5;
+  font-weight: 600;
+}
 </style>

package/dist/spa/src/stores/filters.ts

@@ -15,7 +15,7 @@ export const useFiltersStore = defineStore('filters', () => {
     }
     const setFilter = (filter: any) => {
         const index = filters.value.findIndex(f => f.field === filter.field);
-        if (filters.value[index]) {
+        if (filters.value[index] && filters.value[index].operator === filter.value.operator) {
             filters.value[index] = filter;
             return;
         }

package/dist/spa/src/types/Back.ts

@@ -1,7 +1,7 @@
 import type { Express, Request } from 'express';
 import type { Writable } from 'stream';
 
-import { ActionCheckSource, AdminForthFilterOperators, AdminForthSortDirections, AllowedActionsEnum, 
+import { ActionCheckSource, AdminForthFilterOperators, AdminForthSortDirections, AllowedActionsEnum, AdminForthResourcePages,
   type AdminForthComponentDeclaration, 
   type AdminForthResourceCommon, 
   type AdminUser, type AllowedActionsResolved, 
@@ -12,7 +12,6 @@ import { ActionCheckSource, AdminForthFilterOperators, AdminForthSortDirections,
   type AdminForthComponentDeclarationFull,
   type AdminForthConfigMenuItem,
   type AnnouncementBadgeResponse,
-  AdminForthResourcePages,
   type AdminForthResourceColumnInputCommon,
 } from './Common.js';
 
@@ -129,7 +128,7 @@ export interface IAdminForthSingleFilter {
   operator?: AdminForthFilterOperators.EQ | AdminForthFilterOperators.NE
   | AdminForthFilterOperators.GT | AdminForthFilterOperators.LT | AdminForthFilterOperators.GTE
   | AdminForthFilterOperators.LTE | AdminForthFilterOperators.LIKE | AdminForthFilterOperators.ILIKE
-  | AdminForthFilterOperators.IN | AdminForthFilterOperators.NIN;
+  | AdminForthFilterOperators.IN | AdminForthFilterOperators.NIN | AdminForthFilterOperators.IS_EMPTY | AdminForthFilterOperators.IS_NOT_EMPTY;
   value?: any;
   rightField?: string;
   insecureRawSQL?: string;
@@ -307,7 +306,7 @@ export interface IAdminForthAuth {
 
   removeCustomCookie({response, name}: {response: any, name: string}): void;
 
-  setCustomCookie({response, payload}: {response: any, payload: {name: string, value: string, expiry: number, expirySeconds: number, httpOnly: boolean}}): void;
+  setCustomCookie({response, payload}: {response: any, payload: {name: string, value: string, expiry?: number, expirySeconds: number, httpOnly: boolean}}): void;
 
   getCustomCookie({cookies, name}: {cookies: {key: string, value: string}[], name: string}): string | null;
 
@@ -469,6 +468,13 @@ export interface IAdminForthPlugin {
   instanceUniqueRepresentation(pluginOptions: any) : string;
 
 
+  /**   
+   * If this method returns true, AdminForth will allow only one instance of plugin per whole app
+   * (only for case when we are creating copy of resource and activating plugins)
+   * If false, multiple instances of plugin can be installed on different resources.
+   */
+  shouldHaveSingleInstancePerWholeApp?(): boolean;
+
   /**
    * Optional method which will be called after AdminForth discovers all resources and their columns.
    * Can be used to validate types of columns, check if some columns are missing, etc.
@@ -848,6 +854,7 @@ export interface AdminForthActionInput {
   name: string;
   showIn?: {
       list?: boolean,
+      listThreeDotsMenu?: boolean,
       showButton?: boolean,
       showThreeDotsMenu?: boolean,
   };
@@ -861,6 +868,7 @@ export interface AdminForthActionInput {
       resource: AdminForthResource;
       recordId: string;
       adminUser: AdminUser;
+      response: IAdminForthHttpResponse;
       extra?: HttpExtra;
       tr: Function;
   }) => Promise<{
@@ -1102,7 +1110,7 @@ export interface AdminForthInputConfig {
       /**
        * Add custom page to the settings page
        */
-      userMenuSettingsPages: {
+      userMenuSettingsPages?: {
         icon?: string,
         pageLabel: string,
         slug?: string,
@@ -1282,6 +1290,14 @@ export class Filters {
       subFilters,
     };
   }
+
+  static IS_EMPTY(field: string): IAdminForthSingleFilter {
+    return { field, operator: AdminForthFilterOperators.IS_EMPTY, value: null };
+  }
+
+  static IS_NOT_EMPTY(field: string): IAdminForthSingleFilter {
+    return { field, operator: AdminForthFilterOperators.IS_NOT_EMPTY, value: null };
+  }
 }
 
 export type FDataSort = (field: string, direction: AdminForthSortDirections) => IAdminForthSort;
@@ -1358,6 +1374,7 @@ export type AllowedActions = {
  */
 export interface ResourceOptionsInput extends Omit<NonNullable<AdminForthResourceInputCommon['options']>, 'allowedActions' | 'bulkActions'> {
 
+  baseActionsAsQuickIcons?: ('show' | 'edit' | 'delete')[],
   /** 
    * Custom bulk actions list. Bulk actions available in list view when user selects multiple records by
    * using checkboxes.