adminforth 1.13.0-next.9 → 1.14.0

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

@@ -34,7 +34,7 @@
     </div>
     <teleport to="body" v-if="teleportToBody && showDropdown">
       <div ref="dropdownEl" :style="getDropdownPosition" :class="{'shadow-none': isTop}"
-        class="fixed z-50 w-full bg-white shadow-lg dark:shadow-black dark:bg-gray-700 
+        class="fixed z-[5] w-full bg-white shadow-lg dark:shadow-black dark:bg-gray-700 
           dark:border-gray-600 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm max-h-48">
         <div
           v-for="item in filteredItems"
@@ -202,6 +202,23 @@ watch(
   }
 );
 
+const handleScroll = () => {
+  if (showDropdown.value && inputEl.value) {
+    const rect = inputEl.value.getBoundingClientRect();
+    const style = {
+      left: `${rect.left}px`,
+      top: isTop.value && dropdownHeight.value 
+        ? `${rect.top - dropdownHeight.value - 8}px`
+        : `${rect.bottom + 8}px`,
+      width: `${rect.width}px`
+    };
+    
+    if (dropdownEl.value) {
+      Object.assign(dropdownEl.value.style, style);
+    }
+  }
+};
+
 onMounted(() => {
   updateFromProps();
 
@@ -214,7 +231,11 @@ onMounted(() => {
   });
 
   addClickListener();
-
+  
+  // Add scroll listeners if teleportToBody is true
+  if (props.teleportToBody) {
+    window.addEventListener('scroll', handleScroll, true);
+  }
 });
 
 const filteredItems = computed(() => {
@@ -268,6 +289,10 @@ const toogleItem = (item) => {
 
 onUnmounted(() => {
   removeClickListener();
+  // Remove scroll listeners if teleportToBody is true
+  if (props.teleportToBody) {
+    window.removeEventListener('scroll', handleScroll, true);
+  }
 });
 
 const getDropdownPosition = computed(() => {

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex">
+  <div class="flex" :class="{ 'opacity-50' : column.editReadonly && source === 'edit' }">
     <component
       v-if="column?.components?.[props.source]?.file"
       :is="getCustomComponent(column.components[props.source])"
@@ -16,8 +16,9 @@
     <Select
       v-else-if="column.foreignResource"
       ref="input"
-      class="w-full"
+      class="w-full min-w-24"
       :options="columnOptions[column.name] || []"
+      teleportToBody
       :placeholder = "columnOptions[column.name]?.length ?$t('Select...'): $t('There are no options available')"
       :modelValue="value"
       :readonly="column.editReadonly && source === 'edit'"
@@ -26,8 +27,9 @@
     <Select
       v-else-if="column.enum"
       ref="input"
-      class="w-full"
+      class="w-full min-w-24"
       :options="column.enum"
+      teleportToBody
       :modelValue="value"
       :readonly="column.editReadonly && source === 'edit'"
       @update:modelValue="$emit('update:modelValue', $event)"
@@ -35,8 +37,9 @@
     <Select
       v-else-if="(type || column.type) === 'boolean'"
       ref="input"
-      class="w-full"
+      class="w-full min-w-24"
       :options="getBooleanOptions(column)"
+      teleportToBody
       :modelValue="value"
       :readonly="column.editReadonly && source === 'edit'"
       @update:modelValue="$emit('update:modelValue', $event)"
@@ -48,6 +51,8 @@
       step="1"
       class="w-40"
       placeholder="0"
+      :min="![undefined, null].includes(column.minValue) ? column.minValue : ''"
+      :max="![undefined, null].includes(column.maxValue) ? column.maxValue : ''"
       :prefix="column.inputPrefix"
       :suffix="column.inputSuffix"
       :readonly="column.editReadonly && source === 'edit'"
@@ -70,6 +75,8 @@
       step="0.1"
       class="w-40"
       placeholder="0.0"
+      :min="![undefined, null].includes(column.minValue) ? column.minValue : ''"
+      :max="![undefined, null].includes(column.maxValue) ? column.maxValue : ''"
       :prefix="column.inputPrefix"
       :suffix="column.inputSuffix"
       :modelValue="value"
@@ -168,7 +175,7 @@
       { label: t('Yes'), value: true },
       { label: t('No'), value: false },
     ];
-    if (!column.required[props.mode]) {
+    if (!column.required[props.mode] && !column.isArray?.enabled) {
       options.push({ label: t('Unset'), value: null });
     }
     return options;

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

@@ -0,0 +1,77 @@
+<template>
+  <template v-if="column.isArray?.enabled">
+    <div class="flex flex-col">
+      <ColumnValueInput
+        v-for="(arrayItemValue, arrayItemIndex) in currentValues[column.name]"
+        :key="`${column.name}-${arrayItemIndex}`"
+        ref="arrayItemRefs"
+        :class="{'mt-2': arrayItemIndex}"
+        :source="source"
+        :column="column"
+        :type="column.isArray.itemType"
+        :value="arrayItemValue"
+        :currentValues="currentValues"
+        :mode="mode"
+        :columnOptions="columnOptions"
+        :deletable="!column.editReadonly"
+        @update:modelValue="setCurrentValue(column.name, $event, arrayItemIndex)"
+        @update:unmasked="$emit('update:unmasked', column.name)"
+        @update:inValidity="$emit('update:inValidity', { name: column.name, value: $event })"
+        @update:emptiness="$emit('update:emptiness', { name: column.name, value: $event })"
+        @delete="setCurrentValue(column.name, currentValues[column.name].filter((_, index) => index !== arrayItemIndex))"
+      />
+    </div>
+    <div class="flex items-center">
+      <button
+        v-if="!column.editReadonly"
+        type="button"
+      @click="addArrayItem"
+      class="flex items-center py-1 px-3 me-2 text-sm font-medium rounded-default 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"
+      :class="{'mt-2': currentValues[column.name].length}"
+    >
+      <IconPlusOutline class="w-4 h-4 me-2"/>
+        {{ $t('Add') }}
+      </button>
+    </div>
+  </template>
+  <ColumnValueInput
+    v-else
+    :source="source"
+    :column="column"
+    :value="currentValues[column.name]"
+    :currentValues="currentValues"
+    :mode="mode"
+    :columnOptions="columnOptions"
+    :unmasked="unmasked"
+    @update:modelValue="setCurrentValue(column.name, $event)"
+    @update:unmasked="$emit('update:unmasked', column.name)"
+    @update:inValidity="$emit('update:inValidity', { name: column.name, value: $event })"
+    @update:emptiness="$emit('update:emptiness', { name: column.name, value: $event })"
+  />
+</template>
+  
+<script setup lang="ts">
+  import { IconPlusOutline } from '@iconify-prerendered/vue-flowbite';
+  import ColumnValueInput from "./ColumnValueInput.vue";
+  import { ref, nextTick } from 'vue';
+  
+  const props = defineProps<{
+    source: 'create' | 'edit',
+    column: any,
+    currentValues: any,
+    mode: string,
+    columnOptions: any,
+    unmasked: any,
+    setCurrentValue: Function
+  }>();
+  
+  const emit = defineEmits(['update:unmasked', 'update:inValidity', 'update:emptiness', 'focus-last-input']);
+  
+  const arrayItemRefs = ref([]);
+  
+  async function addArrayItem() {
+    props.setCurrentValue(props.column.name, props.currentValues[props.column.name], props.currentValues[props.column.name].length);
+    await nextTick();
+    arrayItemRefs.value[arrayItemRefs.value.length - 1].focus();
+  }
+</script> 

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

@@ -24,11 +24,11 @@
 
             <Select
               v-if="c.foreignResource"
-              multiple
+              :multiple="c.filterOptions.multiselect"
               class="w-full"
               :options="columnOptions[c.name] || []"
-              @update:modelValue="onFilterInput[c.name]({ column: c, operator: 'in', value: $event.length ? $event : undefined  })"
-              :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === 'in')?.value || []"
+              @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 || []"
             />
             <Select
               multiple
@@ -44,13 +44,13 @@
               :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === 'in')?.value || []"
             />
             
-            <Select 
-              multiple
+            <Select
+              :multiple="c.filterOptions.multiselect"
               class="w-full"
               v-else-if="c.enum"
               :options="c.enum"
-              @update:modelValue="onFilterInput[c.name]({ column: c, operator: 'in', value: $event.length ? $event : undefined })"
-              :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === 'in')?.value || []"
+              @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 || []"
             />
 
             <Input
@@ -118,7 +118,8 @@
 </template>
 
 <script setup>
-import { watch, computed } from 'vue'
+import { watch, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import CustomDateRangePicker from '@/components/CustomDateRangePicker.vue';
 import { callAdminForthApi } from '@/utils';
 import { useRouter } from 'vue-router';
@@ -130,6 +131,7 @@ import Select from '@/afcl/Select.vue';
 import debounce from 'debounce';
 
 const filtersStore = useFiltersStore();
+const { t } = useI18n();
 
 
 // props: columns
@@ -163,6 +165,12 @@ const columnOptions = computedAsync(async () => {
           },
         });
         ret[column.name] = list.items;
+        if (!column.filterOptions.multiselect) {
+          ret[column.name].push({
+            label: t('Unset'),
+            value: '',
+          });
+        }
       }
     })
   );

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" 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-gray-600 text-gray-700 bg-lightFormHeading dark:bg-gray-700 dark:text-gray-400 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 class="text-xs text-gray-700 uppercase dark:text-gray-400 bg-lightFormHeading dark:bg-gray-700 block md:table-row-group ">
+      <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 ">
         <tr>
           <th scope="col" :class="{'rounded-tl-lg': !group.groupName}" class="px-6 py-3 hidden md:w-52 md:table-cell">
               {{ $t('Field') }}
@@ -42,50 +42,17 @@
             class="px-6 py-4  whitespace-pre-wrap relative block md:table-cell"
             :class="{'rounded-br-lg': i === group.columns.length - 1}"
           >
-            <template v-if="column.isArray?.enabled">
-              <ColumnValueInput
-                v-for="(arrayItemValue, arrayItemIndex) in currentValues[column.name]"
-                :key="`${column.name}-${arrayItemIndex}`"
-                ref="arrayItemRefs"
-                :class="{'mt-2': arrayItemIndex}"
-                :source="source"
-                :column="column"
-                :type="column.isArray.itemType"
-                :value="arrayItemValue"
-                :currentValues="currentValues"
-                :mode="mode"
-                :columnOptions="columnOptions"
-                :deletable="!column.editReadonly"
-                @update:modelValue="setCurrentValue(column.name, $event, arrayItemIndex)"
-                @update:unmasked="unmasked[column.name] = !unmasked[column.name]"
-                @update:inValidity="customComponentsInValidity[column.name] = $event"
-                @update:emptiness="customComponentsEmptiness[column.name] = $event"
-                @delete="setCurrentValue(column.name, currentValues[column.name].filter((_, index) => index !== arrayItemIndex))"
-              />
-              <button
-                v-if="!column.editReadonly"
-                type="button"
-                @click="setCurrentValue(column.name, currentValues[column.name], currentValues[column.name].length); focusOnLastInput(column.name)"
-                class="flex items-center py-1 px-3 me-2 text-sm font-medium rounded-default 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"
-                :class="{'mt-2': currentValues[column.name].length}"
-              >
-                <IconPlusOutline class="w-4 h-4 me-2"/>
-                {{ $t('Add') }}
-              </button>
-            </template>
-            <ColumnValueInput
-              v-else
+            <ColumnValueInputWrapper
               :source="source"
               :column="column"
-              :value="currentValues[column.name]"
               :currentValues="currentValues"
               :mode="mode"
               :columnOptions="columnOptions"
               :unmasked="unmasked"
-              @update:modelValue="setCurrentValue(column.name, $event)"
-              @update:unmasked="unmasked[column.name] = !unmasked[column.name]"
-              @update:inValidity="customComponentsInValidity[column.name] = $event"
-              @update:emptiness="customComponentsEmptiness[column.name] = $event"
+              :setCurrentValue="setCurrentValue"
+              @update:unmasked="unmasked[$event] = !unmasked[$event]"
+              @update:inValidity="customComponentsInValidity[$event.name] = $event.value"
+              @update:emptiness="customComponentsEmptiness[$event.name] = $event.value"
             />
             <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>
@@ -98,10 +65,10 @@
 
 <script setup lang="ts">
   import { IconExclamationCircleSolid, IconPlusOutline } from '@iconify-prerendered/vue-flowbite';
-  import ColumnValueInput from "@/components/ColumnValueInput.vue";
   import { Tooltip } from '@/afcl';
   import { ref, computed, watch, nextTick, type Ref } from 'vue';
   import { useI18n } from 'vue-i18n';
+  import ColumnValueInputWrapper from "@/components/ColumnValueInputWrapper.vue";
 
   const { t } = useI18n();
 
@@ -117,19 +84,17 @@
     columnOptions: any,
   }>();
 
-  const arrayItemRefs = ref([]);
-
   const customComponentsInValidity: Ref<Record<string, boolean>> = ref({});
   const customComponentsEmptiness: Ref<Record<string, boolean>> = ref({});
+  const allColumnsHaveCustomComponent = computed(() => {
+    return props.group.columns.every(column => {
+      const componentKey = `${props.source}Row` as keyof typeof column.components;
+      return column.components?.[componentKey];
+    });
+  });
 
   const emit = defineEmits(['update:customComponentsInValidity', 'update:customComponentsEmptiness']);
 
-  async function focusOnLastInput(column) {
-    // wait for element to register
-    await nextTick();
-    arrayItemRefs.value[arrayItemRefs.value.length - 1].focus();
-  }
-
   watch(customComponentsInValidity.value, (newVal) => {
     emit('update:customComponentsInValidity', newVal);
   });
@@ -138,4 +103,4 @@
     emit('update:customComponentsEmptiness', newVal);
   });
 
-</script>
+</script>

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

@@ -190,8 +190,12 @@ const setCurrentValue = (key, value, index=null) => {
     } else if (index === currentValues.value[key].length) {
       currentValues.value[key].push(null);
     } else {
-      if (['integer', 'float'].includes(col.isArray.itemType) && (value || value === 0)) {
-        currentValues.value[key][index] = +value;
+      if (['integer', 'float', 'decimal'].includes(col.isArray.itemType)) {
+        if (value || value === 0) {
+          currentValues.value[key][index] = +value;
+        } else {
+          currentValues.value[key][index] = null;
+        }
       } else {
         currentValues.value[key][index] = value;
       }
@@ -200,8 +204,12 @@ const setCurrentValue = (key, value, index=null) => {
       }
     }
   } else {
-    if (['integer', 'float'].includes(col.type) && (value || value === 0)) {
-      currentValues.value[key] = +value;
+    if (['integer', 'float', 'decimal'].includes(col.type)) {
+      if (value || value === 0) {
+        currentValues.value[key] = +value;
+      } else {
+        currentValues.value[key] = null;
+      }
     } else {
       currentValues.value[key] = value;
     }
@@ -237,7 +245,12 @@ onMounted(() => {
           currentValues.value[column.name] = [];
         } else {
           // else copy array to prevent mutation
-          currentValues.value[column.name] = [...currentValues.value[column.name]];
+          if (Array.isArray(currentValues.value[column.name])) {
+            currentValues.value[column.name] = [...currentValues.value[column.name]];
+          } else {
+            // fallback for old data
+            currentValues.value[column.name] = [`${currentValues.value[column.name]}`];
+          }
         }
       } else if (currentValues.value[column.name]) {
         currentValues.value[column.name] = JSON.stringify(currentValues.value[column.name], null, 2);
@@ -263,7 +276,7 @@ const columnOptions = computedAsync(async () => {
           },
         });
 
-        if (!column.required[props.source]) list.items.push({ value: null, label: column.foreignResource.unsetLabel });
+        if (!column.required[props.source] && !column.isArray?.enabled) list.items.push({ value: null, label: column.foreignResource.unsetLabel });
 
         return { [column.name]: list.items };
       }

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

@@ -14,19 +14,19 @@
     <table v-else class=" w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-default">
 
       <tbody>
-
         <!-- table header -->
         <tr class="t-header sticky z-10 top-0 text-xs  bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-gray-400">
           <td scope="col" class="p-4">
-            <div v-if="rows && rows.length" class="flex items-center">
+            <div class="flex items-center">
               <input id="checkbox-all-search" type="checkbox" :checked="allFromThisPageChecked" @change="selectAll()" 
-                    class="w-4 h-4 cursor-pointer text-blue-600 bg-gray-100 border-gray-300 rounded
+                    :disabled="!rows || !rows.length"
+                    class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded
                     focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
               <label for="checkbox-all-search" class="sr-only">{{ $t('checkbox') }}</label>
             </div>
           </td>
 
-          <td v-for="c in columnsListed" scope="col" class="px-2 md:px-3 lg:px-6 py-3">
+          <td v-for="c in columnsListed" ref="headerRefs" scope="col" class="px-2 md:px-3 lg:px-6 py-3">
           
             <div @click="(evt) => c.sortable && onSortButtonClick(evt, c.name)" 
                 class="flex items-center " :class="{'cursor-pointer':c.sortable}">
@@ -59,13 +59,18 @@
             {{ $t('Actions') }}
           </td>
         </tr>
+        <tr v-for="c in tableBodyStartInjection" :key="c.id" class="align-top border-b border-lightListBorder dark:border-darkListTableBorder">
+          <component :is="getCustomComponent(c)" :meta="c.meta" :resource="resource" :adminUser="coreStore.adminUser" />
+        </tr>
         <!-- table header end -->
         <SkeleteLoader 
           v-if="!rows" 
           :columns="resource?.columns.filter(c => c.showIn.list).length + 2"
           :rows="rowHeights.length || 3"
           :row-heights="rowHeights"
+          :column-widths="columnWidths"
         />
+        
         <tr v-else-if="rows.length === 0" class="bg-lightListTable dark:bg-darkListTable dark:border-darkListTableBorder">
           <td :colspan="resource?.columns.length + 2">
 
@@ -178,7 +183,7 @@
                   <button
                     @click="startCustomAction(action.id, row)"
                   >
-                    <component v-if="action.icon" :is="getIcon(action.icon)" class="w-5 h-5 text-lightPrimary dark:text-darkPrimary"></component>
+                    <component v-if="action.icon" :is="getIcon(action.icon)" class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"></component>
                   </button>
                   <template v-slot:tooltip>
                     {{ action.name }}
@@ -320,6 +325,7 @@ const props = defineProps<{
   sort: any[],
   noRoundings?: boolean,
   customActionsInjection?: any[],
+  tableBodyStartInjection?: any[],
 }>();
 
 // emits, update page
@@ -376,10 +382,13 @@ watch(() => props.page, (newPage) => {
 });
 
 const rowRefs = useTemplateRef('rowRefs');
+const headerRefs = useTemplateRef('headerRefs');
 const rowHeights = ref([]);
+const columnWidths = ref([]);
 watch(() => props.rows, (newRows) => {
   // rows are set to null when new records are loading
   rowHeights.value = newRows || !rowRefs.value ? [] : rowRefs.value.map((el) => el.offsetHeight);
+  columnWidths.value = newRows || !headerRefs.value ? [] : [48, ...headerRefs.value.map((el) => el.offsetWidth)];
 });
 
 function addToCheckedValues(id) {
@@ -411,7 +420,7 @@ async function selectAll(value) {
 const totalPages = computed(() => Math.ceil(props.totalRows / props.pageSize));
 
 const allFromThisPageChecked = computed(() => {
-  if (!props.rows) return false;
+  if (!props.rows || !props.rows.length) return false;
   return props.rows.every((r) => checkboxesInternal.value.includes(r._primaryKeyValue));
 });
 const ascArr = computed(() => sort.value.filter((s) => s.direction === 'asc').map((s) => s.field));
@@ -536,6 +545,20 @@ async function startCustomAction(actionId, row) {
   
   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);
+      }
+    }
+    return;
+  }
   if (data?.ok) {
     emits('update:records', true);
 
@@ -553,4 +576,13 @@ async function startCustomAction(actionId, row) {
 }
 
 
-</script>
+</script>
+
+<style lang="scss" scoped>
+input[type="checkbox"][disabled] {
+  @apply opacity-50;
+}
+input[type="checkbox"]:not([disabled]) {
+  @apply cursor-pointer;
+}
+</style>

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

@@ -1,10 +1,10 @@
 <template>
     <div class="overflow-x-auto rounded-default shadow-resourseFormShadow dark:shadow-darkResourseFormShadow">
-        <div v-if="groupName" 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="groupName && !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">
         {{ groupName }}
         </div>
       <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 table-fixed">
-        <thead class="text-gray-700 dark:text-gray-400 bg-lightFormHeading dark:bg-gray-700 block md:table-row-group">
+        <thead v-if="!allColumnsHaveCustomComponent"  class="text-gray-700 dark:text-gray-400 bg-lightFormHeading dark:bg-gray-700 block md:table-row-group">
           <tr>
             <th scope="col" class="px-6 py-3 text-xs uppercase hidden md:w-52 md:table-cell">
               {{ $t('Field') }}
@@ -59,7 +59,8 @@
   import ValueRenderer from '@/components/ValueRenderer.vue';
   import { getCustomComponent } from '@/utils';
   import { useCoreStore } from '@/stores/core';
-  defineProps<{ 
+  import { computed } from 'vue';
+  const props = defineProps<{ 
     columns: Array<{
         name: string;
         label: string;
@@ -74,10 +75,17 @@
           };
         };
     }>;
+    source: string;
     groupName?: string | null;
+    noTitle?: boolean;
     resource: Record<string, any>;
     record: Record<string, any>;
   }>();
 
   const coreStore = useCoreStore();
+  const allColumnsHaveCustomComponent = computed(() => {
+    return props.columns.every(column => {
+      return column.components?.showRow;
+    });
+  });
   </script>

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

@@ -1,10 +1,16 @@
 <template>
     <tr
         v-for="(r, ri) in new Array(props.rows)"
-        class="bg-lightListTable border-b dark:bg-darkListTable dark:border-darkListBorder"
-        :style="[props.rowHeights[ri] !== undefined ? `height: ${props.rowHeights[ri]}px` : '' ]"
+        class="bg-lightListTable dark:bg-darkListTable dark:border-darkListBorder"
+        :class="{'border-b': ri !== props.rows - 1}"
+        :style="[`height: ${props.rowHeights[ri] !== undefined ? props.rowHeights[ri] : 52.5}px`]"
     >
-        <td v-for="c in new Array(props.columns)" class="items-center px-6 py-8 cursor-default" >
+        <td
+            v-for="(c, ci) in new Array(props.columns)" class="items-center px-6 py-4 cursor-default"
+            :style="[props.columnWidths[ci] !== undefined
+                ? `min-width: ${props.columnWidths[ci]}px; width: ${props.columnWidths[ci]}px;`
+                : '']"
+        >
             <div role="status" class="max-w-sm animate-pulse">
                 <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]"></div>
             </div>
@@ -18,8 +24,10 @@ const props = withDefaults(defineProps<{
     columns: number;
     rows: number;
     rowHeights?: number[];
+    columnWidths?: number[];
 }>(), {
     rowHeights: [],
+    columnWidths: [],
 });
 
 </script>

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

@@ -46,10 +46,11 @@ import { getCustomComponent, getIcon } from '@/utils';
 import { useCoreStore } from '@/stores/core';
 import adminforth from '@/adminforth';
 import { callAdminForthApi } from '@/utils';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 const route = useRoute();
 const coreStore = useCoreStore();
+const router = useRouter();
 
 const props = defineProps({
   threeDotsDropdownItems: Array,
@@ -69,6 +70,21 @@ async function handleActionClick(action) {
       recordId: route.params.primaryKey
     }
   });
+
+  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);
+      }
+    }
+    return;
+  }
   
   if (data?.ok) {
     await coreStore.fetchRecord({