adminforth 2.26.2 → 2.27.0-next.2

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

@@ -0,0 +1,236 @@
+<template>
+  <div class="range-slider" ref="trackRef" @mousedown="onTrackMouseDown">
+    <div class="track"></div>
+    <div class="range bg-lightPrimary/30" :style="rangeStyle"></div>
+
+    <div
+      class="bg-lightPrimary thumb"
+      :style="minThumbStyle"
+      @mousedown.stop.prevent="startDrag('min', $event)"
+      @mouseenter="minHovered = true"
+      @mouseleave="minHovered = false"
+    ></div>
+    <div v-if="minHovered || activeThumb === 'min'" class="thumb-tooltip" :style="minTooltipStyle">{{ minVal }}</div>
+
+    <div
+      class="bg-lightPrimary thumb"
+      :style="maxThumbStyle"
+      @mousedown.stop.prevent="startDrag('max', $event)"
+      @mouseenter="maxHovered = true"
+      @mouseleave="maxHovered = false"
+    ></div>
+    <div v-if="maxHovered || activeThumb === 'max'" class="thumb-tooltip" :style="maxTooltipStyle">{{ maxVal }}</div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch, onBeforeUnmount } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Array as unknown as () => [number, number],
+    default: () => [0, 100]
+  },
+  min: { type: Number, default: 0 },
+  max: { type: Number, default: 100 },
+  dotSize: { type: Number, default: 20 },
+  height: { type: String, default: '8px' }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const trackRef = ref<HTMLElement | null>(null)
+
+const minVal = ref(props.modelValue[0])
+const maxVal = ref(props.modelValue[1])
+
+watch(() => props.modelValue, (val) => {
+  if (!val) return
+  minVal.value = val[0]
+  maxVal.value = val[1]
+})
+
+function clamp(val: number) {
+  return Math.min(props.max, Math.max(props.min, val))
+}
+
+function valueToPercent(val: number) {
+  return ((val - props.min) / (props.max - props.min)) * 100
+}
+
+function percentToValue(percent: number) {
+  return props.min + ((props.max - props.min) * percent) / 100
+}
+
+const minPercent = computed(() => valueToPercent(minVal.value))
+const maxPercent = computed(() => valueToPercent(maxVal.value))
+
+const rangeStyle = computed(() => ({
+  left: `${minPercent.value}%`,
+  width: `${maxPercent.value - minPercent.value}%`,
+  transition: isAnimating.value ? 'left 0.18s ease, width 0.18s ease' : 'none'
+}))
+
+const minThumbStyle = computed(() => ({
+  left: `calc(${minPercent.value}% - ${props.dotSize / 2}px)`,
+  width: `${props.dotSize}px`,
+  height: `${props.dotSize}px`,
+  transition: isAnimating.value ? 'left 0.18s ease' : 'none',
+  zIndex: activeThumb.value === 'min' ? 3 : 2
+}))
+
+const maxThumbStyle = computed(() => ({
+  left: `calc(${maxPercent.value}% - ${props.dotSize / 2}px)`,
+  width: `${props.dotSize}px`,
+  height: `${props.dotSize}px`,
+  transition: isAnimating.value ? 'left 0.18s ease' : 'none',
+  zIndex: activeThumb.value === 'max' ? 3 : 2
+}))
+
+const minTooltipStyle = computed(() => ({
+  left: `${minPercent.value}%`,
+  transition: isAnimating.value ? 'left 0.18s ease' : 'none'
+}))
+
+const maxTooltipStyle = computed(() => ({
+  left: `${maxPercent.value}%`,
+  transition: isAnimating.value ? 'left 0.18s ease' : 'none'
+}))
+
+const activeThumb = ref<'min' | 'max' | null>(null)
+const isAnimating = ref(false)
+const minHovered = ref(false)
+const maxHovered = ref(false)
+
+function startDrag(type: 'min' | 'max', e: MouseEvent) {
+  activeThumb.value = type
+  document.addEventListener('mousemove', onMouseMove)
+  document.addEventListener('mouseup', stopDrag)
+}
+
+function onMouseMove(e: MouseEvent) {
+  if (!trackRef.value || !activeThumb.value) return
+
+  const rect = trackRef.value.getBoundingClientRect()
+  const percent = ((e.clientX - rect.left) / rect.width) * 100
+  const value = Math.round(clamp(percentToValue(percent)))
+
+  if (activeThumb.value === 'min') {
+    if (value > maxVal.value) {
+      // cross over: become the max thumb
+      minVal.value = maxVal.value
+      maxVal.value = value
+      activeThumb.value = 'max'
+    } else {
+      minVal.value = value
+    }
+  } else {
+    if (value < minVal.value) {
+      // cross over: become the min thumb
+      maxVal.value = minVal.value
+      minVal.value = value
+      activeThumb.value = 'min'
+    } else {
+      maxVal.value = value
+    }
+  }
+
+  emit('update:modelValue', [minVal.value, maxVal.value])
+}
+
+function stopDrag() {
+  document.removeEventListener('mousemove', onMouseMove)
+  document.removeEventListener('mouseup', stopDrag)
+  activeThumb.value = null
+}
+
+function onTrackMouseDown(e: MouseEvent) {
+  if (!trackRef.value) return
+
+  const rect = trackRef.value.getBoundingClientRect()
+  const percent = ((e.clientX - rect.left) / rect.width) * 100
+  const value = percentToValue(percent)
+
+  const distToMin = Math.abs(value - minVal.value)
+  const distToMax = Math.abs(value - maxVal.value)
+
+  isAnimating.value = true
+  if (distToMin < distToMax) {
+    minVal.value = Math.round(Math.min(clamp(value), maxVal.value))
+  } else {
+    maxVal.value = Math.round(Math.max(clamp(value), minVal.value))
+  }
+
+  emit('update:modelValue', [minVal.value, maxVal.value])
+
+  setTimeout(() => { isAnimating.value = false }, 200)
+}
+
+onBeforeUnmount(() => {
+  stopDrag()
+})
+</script>
+
+<style scoped>
+.range-slider {
+  position: relative;
+  width: 100%;
+  height: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.track {
+  position: absolute;
+  width: 100%;
+  height: 8px;
+  background: #e5e7eb;
+  border-radius: 9999px;
+}
+
+.range {
+  position: absolute;
+  height: 8px;
+  border-radius: 9999px;
+}
+
+.thumb {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  border-radius: 9999px;
+  cursor: pointer;
+}
+
+.thumb-tooltip {
+  position: absolute;
+  top: -28px;
+  transform: translateX(-50%);
+  background: rgba(0, 0, 0, 0.75);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  padding: 6px 6px;
+  border-radius: 4px;
+  white-space: nowrap;
+  pointer-events: none;
+  animation: tooltip-in 0.12s ease;
+}
+
+.thumb-tooltip::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-top-color: rgba(0, 0, 0, 0.75);
+}
+
+@keyframes tooltip-in {
+  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
+  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
+}
+</style>

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

@@ -1,7 +1,6 @@
 <template>
   <!-- table -->
-  <div 
-    class="relative shadow-listTableShadow dark:shadow-darkListTableShadow	overflow-auto "
+  <div class="relative shadow-listTableShadow dark:shadow-darkListTableShadow	overflow-auto border dark:border-gray-700"
     :class="{'rounded-default': !noRoundings}"
     :style="isVirtualScrollEnabled ? { maxHeight: `${containerHeight}px` } : {}"
     @scroll="handleScroll"
@@ -21,7 +20,7 @@
 
       <tbody>
         <!-- table header -->
-        <tr class="t-header sticky z-20 top-0 text-xs text-lightListTableHeadingText bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-darkListTableHeadingText">
+        <tr class="border-b dark:border-gray-700 t-header sticky z-20 top-0 text-xs text-lightListTableHeadingText bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-darkListTableHeadingText">
           <td scope="col" class="list-table-header-cell p-4 sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading">
             <Checkbox
               :modelValue="allFromThisPageChecked"
@@ -34,10 +33,8 @@
 
           <td v-for="c in columnsListed" ref="headerRefs" scope="col" class="list-table-header-cell px-2 md:px-3 lg:px-6 py-3" :class="{'sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading': c.listSticky}">
           
-            <div 
-              @click="(evt) => c.sortable && onSortButtonClick(evt, c.name)" 
-              class="flex items-center " :class="{'cursor-pointer':c.sortable}"
-            >
+            <div @click="(evt) => c.sortable && onSortButtonClick(evt, c.name)" 
+                class="flex items-center font-semibold" :class="{'cursor-pointer':c.sortable}">
               {{ c.label }}
 
               <div v-if="c.sortable">
@@ -67,7 +64,7 @@
             </div>
           </td>
 
-          <td scope="col" class="px-6 py-3">
+          <td scope="col" class="px-6 py-3 font-semibold">
             {{ $t('Actions') }}
           </td>
         </tr>
@@ -103,12 +100,12 @@
 
         <component
           v-for="(row, rowI) in rowsToRender"
-          :is="tableRowReplaceInjection ? getCustomComponent(tableRowReplaceInjection) : 'tr'"
+          :is="tableRowReplaceInjection ? getCustomComponent(formatComponent(tableRowReplaceInjection)) : 'tr'"
           :key="`row_${row._primaryKeyValue}`"
           :record="row"
           :resource="resource"
           :adminUser="coreStore.adminUser"
-          :meta="tableRowReplaceInjection ? tableRowReplaceInjection.meta : undefined"
+          :meta="tableRowReplaceInjection ? formatComponent(tableRowReplaceInjection).meta : undefined"
           @click="onClick($event, row)"
           ref="rowRefs"
           class="list-table-body-row bg-lightListTable dark:bg-darkListTable border-lightListBorder dark:border-gray-700 hover:bg-lightListTableRowHover dark:hover:bg-darkListTableRowHover"
@@ -203,17 +200,17 @@
                   :key="action.id"
                 >
                     <component
-                      :is="action.customComponent ? getCustomComponent(action.customComponent) : CallActionWrapper"
-                      :meta="action.customComponent?.meta"
+                      v-if="action.customComponent"
+                      :is="action.customComponent ? getCustomComponent(formatComponent(action.customComponent)) : CallActionWrapper"
+                      :meta="formatComponent(action.customComponent).meta"
                       :row="row"
                       :resource="resource"
-                      :adminUser="adminUser"
-                      @callAction="(payload? : Object) => startCustomAction(action.id, row, payload)"
+                      :adminUser="coreStore.adminUser"
+                      @callAction="(payload? : Object) => startCustomAction(action.id as string | number, row, payload)"
                     >
                       <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"
@@ -236,7 +233,7 @@
                 :deleteRecord="deleteRecord"
                 :resourceId="resource.resourceId"
                 :startCustomAction="startCustomAction"
-                :customActionIconsThreeDotsMenuItems="customActionIconsThreeDotsMenuItems"
+                :customActionIconsThreeDotsMenuItems="customActionIconsThreeDotsMenuItems ?? []"
               />
             </div>
             
@@ -256,12 +253,12 @@
   -->
   <div class="af-pagination-container flex flex-row items-center mt-4 xs:flex-row xs:justify-between xs:items-center gap-3">
     
-    <div class="af-pagination-buttons-container inline-flex "
+    <div class="af-pagination-buttons-container af-button-shadow inline-flex rounded "
       v-if="(rows || totalRows) && totalRows >= pageSize && totalRows > 0"
     >
       <!-- Buttons -->
       <button
-        class="af-pagination-prev-button flex items-center py-1 px-3 gap-1 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-r-0 rounded-s border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:z-10 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-darkListTablePaginationTextHover dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
+        class="af-pagination-prev-button flex items-center py-1 px-3 gap-1 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-r-0 rounded-s border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:z-20 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-darkListTablePaginationTextHover dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
         @click="page--; pageInput = page.toString();" 
         :disabled="page <= 1"
       >
@@ -273,7 +270,7 @@
         </span>
       </button>
       <button
-        class="af-pagination-first-page-button flex items-center py-1 px-3 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-r-0  border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:z-10 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-darkListTablePaginationTextHover dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
+        class="af-pagination-first-page-button flex items-center py-1 px-3 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-r-0  border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover z-10 focus:z-20 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-darkListTablePaginationTextHover dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
         @click="page = 1; 
         pageInput = page.toString();" 
         :disabled="page <= 1"
@@ -284,13 +281,13 @@
         type="text"
         v-model="pageInput"
         :style="{ width: `${Math.max(1, pageInput.length+4)}ch` }"
-        class="af-pagination-input min-w-10 outline-none inline-block py-1.5 px-3 text-sm text-center text-lightListTablePaginationCurrentPageText border border-lightListTablePaginationBorder dark:border-darkListTablePaginationBorder dark:text-darkListTablePaginationCurrentPageText dark:bg-darkListTablePaginationBackgoround z-10"
+        class="af-pagination-input z-10 min-w-10 outline-none inline-block py-1.5 px-3 text-sm text-center text-lightListTablePaginationCurrentPageText border border-lightListTablePaginationBorder dark:border-darkListTablePaginationBorder dark:text-darkListTablePaginationCurrentPageText dark:bg-darkListTablePaginationBackgoround"
         @keydown="onPageKeydown($event)"
         @blur="validatePageInput()"
       />
 
       <button
-        class="af-pagination-last-page-button flex items-center py-1 px-3 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-l-0  border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:z-10 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-white dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
+        class="af-pagination-last-page-button z-10 flex items-center py-1 px-3 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-l-0  border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:ring-4 focus:z-20 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-white dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
         @click="page = totalPages; pageInput = page.toString();" :disabled="page >= totalPages">
         {{ totalPages }}
       </button>
@@ -344,10 +341,10 @@
 
 
 import { computed, onMounted, ref, watch, useTemplateRef, nextTick, type Ref } from 'vue';
-import { callAdminForthApi } from '@/utils';
+import { callAdminForthApi, executeCustomAction } from '@/utils';
 import { useI18n } from 'vue-i18n';
 import ValueRenderer from '@/components/ValueRenderer.vue';
-import { getCustomComponent } from '@/utils';
+import { getCustomComponent, formatComponent } from '@/utils';
 import { useCoreStore } from '@/stores/core';
 import { showSuccesTost, showErrorTost } from '@/composables/useFrontendApi';
 import SkeleteLoader from '@/components/SkeleteLoader.vue';
@@ -360,7 +357,7 @@ import {
 } from '@iconify-prerendered/vue-flowbite';
 import router from '@/router';
 import { Tooltip } from '@/afcl';
-import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, AdminForthComponentDeclarationFull } from '@/types/Common';
+import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, AdminForthComponentDeclarationFull, AdminForthComponentDeclaration } from '@/types/Common';
 import { useAdminforth } from '@/adminforth';
 import Checkbox from '@/afcl/Checkbox.vue';
 import ListActionsThreeDots from '@/components/ListActionsThreeDots.vue';
@@ -383,8 +380,8 @@ const props = defineProps<{
   containerHeight?: number,
   itemHeight?: number,
   bufferSize?: number,
-  customActionIconsThreeDotsMenuItems?: any[]
-  tableRowReplaceInjection?: AdminForthComponentDeclarationFull,
+  customActionIconsThreeDotsMenuItems?: AdminForthComponentDeclaration[]
+  tableRowReplaceInjection?: AdminForthComponentDeclaration,
   isVirtualScrollEnabled: boolean
 }>();
 
@@ -414,7 +411,7 @@ 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 // 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
 })
 
@@ -609,51 +606,29 @@ async function deleteRecord(row: any) {
 
 const actionLoadingStates = ref<Record<string | number, boolean>>({});
 
-async function startCustomAction(actionId: string, row: any, extraData: Record<string, any> = {}) {
-
-  actionLoadingStates.value[actionId] = true;
-
-  const data = await callAdminForthApi({
-    path: '/start_custom_action',
-    method: 'POST',
-    body: {
-      resourceId: props.resource?.resourceId,
-      actionId: actionId,
-      recordId: row._primaryKeyValue,
-      extra: extraData
-    }
-  });
-  
-  actionLoadingStates.value[actionId] = false;
-  
-  if (data?.redirectUrl) {
-    // Check if the URL should open in a new tab
-    if (data.redirectUrl.includes('target=_blank')) {
-      window.open(data.redirectUrl.replace('&target=_blank', '').replace('?target=_blank', ''), '_blank');
-    } else {
-      // Navigate within the app
-      if (data.redirectUrl.startsWith('http')) {
-        window.location.href = data.redirectUrl;
-      } else {
-        router.push(data.redirectUrl);
+async function startCustomAction(actionId: string | number, row: any, extraData: Record<string, any> = {}) {
+  await executeCustomAction({
+    actionId,
+    resourceId: props.resource?.resourceId || '',
+    recordId: row._primaryKeyValue,
+    extra: extraData,
+    setLoadingState: (loading: boolean) => {
+      actionLoadingStates.value[actionId] = loading;
+    },
+    onSuccess: async (data: any) => {
+      emits('update:records', true);
+
+      if (data.successMessage) {
+        alert({
+          message: data.successMessage,
+          variant: 'success'
+        });
       }
+    },
+    onError: (error: string) => {
+      showErrorTost(error);
     }
-    return;
-  }
-  if (data?.ok) {
-    emits('update:records', true);
-
-    if (data.successMessage) {
-      alert({
-        message: data.successMessage,
-        variant: 'success'
-      });
-    }
-  }
-  
-  if (data?.error) {
-    showErrorTost(data.error);
-  }
+  });
 }
 
 function validatePageInput() {

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

@@ -52,7 +52,7 @@
         </div>
       </div>
 
-     <div v-if="coreStore.config.defaultUserExists && !isLocalhost" class="p-4 mb-4 text-white rounded-lg bg-red-700/80 fill-white text-sm"> 
+     <div v-if="coreStore?.config?.defaultUserExists && !isLocalhost" class="p-4 mb-4 text-white rounded-lg bg-red-700/80 fill-white text-sm"> 
       <IconExclamationCircleOutline class="inline-block align-text-bottom mr-0,5 w-5 h-5" />
       Default user <strong>"adminforth"</strong> detected. Delete it and create your own account.
     </div>

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

@@ -1,9 +1,9 @@
 <template >
-  <div class="relative" v-if="threeDotsDropdownItems?.length || customActions?.length || (bulkActions?.some((action: AdminForthBulkActionCommon) => action.showInThreeDotsDropdown))">
+  <div class="relative" v-if="threeDotsDropdownItems?.length || customActions?.length || (bulkActions?.some((action: AdminForthBulkActionFront) => action.showInThreeDotsDropdown))">
     <button 
       ref="buttonTriggerRef"
       @click="toggleDropdownVisibility"
-      class="flex items-center py-2 px-2 text-sm font-medium text-lightThreeDotsMenuIconDots focus:outline-none bg-lightThreeDotsMenuIconBackground rounded border border-lightThreeDotsMenuIconBackgroundBorder hover:bg-lightThreeDotsMenuIconBackgroundHover hover:text-lightThreeDotsMenuIconDotsHover focus:z-10 focus:ring-4 focus:ring-lightThreeDotsMenuIconFocus dark:focus:ring-darkThreeDotsMenuIconFocus dark:bg-darkThreeDotsMenuIconBackground dark:text-darkThreeDotsMenuIconDots dark:border-darkThreeDotsMenuIconBackgroundBorder dark:hover:text-darkThreeDotsMenuIconDotsHover dark:hover:bg-darkThreeDotsMenuIconBackgroundHover rounded-default"
+      class="flex transition-all items-center af-button-shadow py-2.5 px-2.5 text-sm font-medium text-lightThreeDotsMenuIconDots focus:outline-none bg-lightThreeDotsMenuIconBackground rounded border border-lightThreeDotsMenuIconBackgroundBorder hover:bg-lightThreeDotsMenuIconBackgroundHover hover:text-lightThreeDotsMenuIconDotsHover focus:z-10 focus:ring-4 focus:ring-lightThreeDotsMenuIconFocus dark:focus:ring-darkThreeDotsMenuIconFocus dark:bg-darkThreeDotsMenuIconBackground dark:text-darkThreeDotsMenuIconDots dark:border-darkThreeDotsMenuIconBackgroundBorder dark:hover:text-darkThreeDotsMenuIconDotsHover dark:hover:bg-darkThreeDotsMenuIconBackgroundHover rounded-default"
     >
       <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 4 15">
         <path d="M3.5 1.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 6.041a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 5.959a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"/>
@@ -46,8 +46,9 @@
           <li v-for="action in customActions" :key="action.id">
             <div class="wrapper"> 
               <component
-                :is="(action.customComponent && getCustomComponent(action.customComponent)) || CallActionWrapper"
-                :meta="action.customComponent?.meta"
+                v-if="action.customComponent"
+                :is="(action.customComponent && getCustomComponent(formatComponent(action.customComponent))) || CallActionWrapper"
+                :meta="formatComponent(action.customComponent).meta"
                 @callAction="(payload? : Object) => handleActionClick(action, payload)"
               >
                 <a @click.prevent class="block px-4 py-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover">
@@ -88,14 +89,14 @@
 
 
 <script setup lang="ts">
-import { getCustomComponent, getIcon } from '@/utils';
+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 { AdminForthBulkActionCommon, AdminForthComponentDeclarationFull } from '@/types/Common';
+import type { AdminForthActionFront, AdminForthBulkActionFront, AdminForthComponentDeclarationFull } from '@/types/Common';
 import type { AdminForthActionInput } from '@/types/Back';
 
 const { list, alert} = useAdminforth();
@@ -109,8 +110,8 @@ const buttonTriggerRef = ref<HTMLElement | null>(null);
 
 const props = defineProps({
   threeDotsDropdownItems: Array<AdminForthComponentDeclarationFull>,
-  customActions: Array<AdminForthActionInput>,
-  bulkActions: Array<AdminForthBulkActionCommon>,
+  customActions: Array<AdminForthActionFront>,
+  bulkActions: Array<AdminForthBulkActionFront>,
   checkboxes: Array,
   updateList: {
     type: Function,
@@ -130,55 +131,32 @@ function setComponentRef(el: ComponentPublicInstance | null, index: number) {
 
 async function handleActionClick(action: AdminForthActionInput, payload: any) {
   list.closeThreeDotsDropdown();
-  
-  const actionId = action.id;
-  const data = await callAdminForthApi({
-    path: '/start_custom_action',
-    method: 'POST',
-    body: {
-      resourceId: route.params.resourceId,
-      actionId: actionId,
-      recordId: route.params.primaryKey,
-      extra: payload || {},
-    }
-  });
+  await executeCustomAction({
+    actionId: action.id,
+    resourceId: route.params.resourceId as string,
+    recordId: route.params.primaryKey as string,
+    extra: payload || {},
+    onSuccess: async (data: any) => {
+      await coreStore.fetchRecord({
+        resourceId: route.params.resourceId as string,
+        primaryKey: route.params.primaryKey as string,
+        source: 'show',
+      });
 
-  if (data?.redirectUrl) {
-    // Check if the URL should open in a new tab
-    if (data.redirectUrl.includes('target=_blank')) {
-      window.open(data.redirectUrl.replace('&target=_blank', '').replace('?target=_blank', ''), '_blank');
-    } else {
-      // Navigate within the app
-      if (data.redirectUrl.startsWith('http')) {
-        window.location.href = data.redirectUrl;
-      } else {
-        router.push(data.redirectUrl);
+      if (data.successMessage) {
+        alert({
+          message: data.successMessage,
+          variant: 'success'
+        });
       }
-    }
-    return;
-  }
-  
-  if (data?.ok) {
-    await coreStore.fetchRecord({
-      resourceId: route.params.resourceId as string, 
-      primaryKey: route.params.primaryKey as string,
-      source: 'show',
-    });
-
-    if (data.successMessage) {
+    },
+    onError: (error: string) => {
       alert({
-        message: data.successMessage,
-        variant: 'success'
+        message: error,
+        variant: 'danger'
       });
     }
-  }
-  
-  if (data?.error) {
-    alert({
-      message: data.error,
-      variant: 'danger'
-    });
-  }
+  });
 }
 
 function startBulkAction(actionId: string) {

package/dist/spa/src/i18n.ts

@@ -51,6 +51,6 @@ export function initI18n(app: ReturnType<typeof createApp>) {
     },
   });
   app.use(i18n);
-  i18nInstance = i18n 
+  i18nInstance = i18n as typeof i18nInstance
   return i18n
 }

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

@@ -4,9 +4,11 @@ import { callAdminForthApi } from '@/utils';
 import websocket from '@/websocket';
 import { useAdminforth } from '@/adminforth';
 
-import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, GetBaseConfigResponse, ResourceVeryShort, AdminUser, UserData, AdminForthConfigMenuItem, AdminForthConfigForFrontend } from '@/types/Common';
+import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, GetBaseConfigResponse, ResourceVeryShort, AdminUser, UserData, AdminForthConfigMenuItem, AdminForthConfigForFrontend, AdminForthResourceFrontend } from '@/types/Common';
 import type { Ref } from 'vue'
 
+
+
 export const useCoreStore = defineStore('core', () => {
   const { alert } = useAdminforth();
   const resourceById: Ref<Record<string, ResourceVeryShort>> = ref({});
@@ -15,7 +17,7 @@ export const useCoreStore = defineStore('core', () => {
   const menu: Ref<AdminForthConfigMenuItem[]> = ref([]);
   const config: Ref<AdminForthConfigForFrontend | null> = ref(null);
   const record: Ref<any | null> = ref({});
-  const resource: Ref<AdminForthResourceCommon | null> = ref(null);
+  const resource: Ref<AdminForthResourceFrontend | null> = ref(null);
   const userData: Ref<UserData | null> = ref(null);
   const isResourceFetching = ref(false);
   const isInternetError = ref(false);