adminforth 2.11.18 → 2.12.1

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

@@ -12,7 +12,7 @@
     <!-- Dropdown menu -->
     <div 
       id="listThreeDotsDropdown" 
-      class="z-20 hidden bg-lightThreeDotsMenuBodyBackground divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-darkThreeDotsMenuBodyBackground dark:divide-gray-600">
+      class="z-30 hidden bg-lightThreeDotsMenuBodyBackground divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-darkThreeDotsMenuBodyBackground dark:divide-gray-600">
         <ul class="py-2 text-sm text-lightThreeDotsMenuBodyText dark:text-darkThreeDotsMenuBodyText" aria-labelledby="dropdownMenuIconButton">
           <li v-for="(item, i) in threeDotsDropdownItems" :key="`dropdown-item-${i}`">
             <a  href="#" 
@@ -23,7 +23,7 @@
                 'cursor-not-allowed': checkboxes && checkboxes.length === 0 && item.meta?.disabledWhenNoCheckboxes,
               }"
               @click="injectedComponentClick(i)">
-              <component :ref="(el: any) => setComponentRef(el, i)" :is="getCustomComponent(item)" 
+              <component :ref="(el: any) => setComponentRef(el, i)" :is="getCustomComponent(item)"
                 :meta="item.meta" 
                 :resource="coreStore.resource" 
                 :adminUser="coreStore.adminUser"
@@ -33,19 +33,25 @@
               />
             </a>
           </li>
-          <li v-if="customActions" v-for="action in customActions" :key="action.id">
-            <a href="#" @click.prevent="handleActionClick(action)" class="block px-4 py-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover">
-              <div class="flex items-center gap-2">
-                <component 
-                  v-if="action.icon" 
-                  :is="getIcon(action.icon)" 
-                  class="w-4 h-4 text-lightPrimary dark:text-darkPrimary"
-                />
-                {{ action.name }}
-              </div>
-            </a>
+          <li v-for="action in customActions" :key="action.id">
+            <component
+              :is="(action.customComponent && getCustomComponent(action.customComponent)) || CallActionWrapper"
+              :meta="action.customComponent?.meta"
+              @callAction="(payload? : Object) => handleActionClick(action, payload)"
+            >
+              <a href="#" @click.prevent class="block px-4 py-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover">
+                <div class="flex items-center gap-2">
+                  <component 
+                    v-if="action.icon" 
+                    :is="getIcon(action.icon)" 
+                    class="w-4 h-4 text-lightPrimary dark:text-darkPrimary"
+                  />
+                  {{ action.name }}
+                </div>
+              </a>
+            </component>
           </li>
-          <li v-for="action in bulkActions?.filter((a:AdminForthBulkActionCommon ) => a.showInThreeDotsDropdown)" :key="action.id">
+          <li v-for="action in (bulkActions ?? []).filter(a => a.showInThreeDotsDropdown)" :key="action.id">
             <a href="#" @click.prevent="startBulkAction(action.id)" 
                 class="block px-4 py-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover"
                 :class="{
@@ -75,8 +81,11 @@ import { useCoreStore } from '@/stores/core';
 import adminforth from '@/adminforth';
 import { callAdminForthApi } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
-import type { AdminForthComponentDeclarationFull, AdminForthBulkActionCommon, AdminForthActionInput } from '@/types/Common.js';
+import CallActionWrapper from '@/components/CallActionWrapper.vue'
 import { ref, type ComponentPublicInstance } from 'vue';
+import type { AdminForthBulkActionCommon, AdminForthComponentDeclarationFull } from '@/types/Common';
+import type { AdminForthActionInput } from '@/types/Back';
+
 
 const route = useRoute();
 const coreStore = useCoreStore();
@@ -104,7 +113,7 @@ function setComponentRef(el: ComponentPublicInstance | null, index: number) {
   }
 }
 
-async function handleActionClick(action: AdminForthActionInput) {
+async function handleActionClick(action: AdminForthActionInput, payload: any) {
   adminforth.list.closeThreeDotsDropdown();
   
   const actionId = action.id;
@@ -114,7 +123,8 @@ async function handleActionClick(action: AdminForthActionInput) {
     body: {
       resourceId: route.params.resourceId,
       actionId: actionId,
-      recordId: route.params.primaryKey
+      recordId: route.params.primaryKey,
+      extra: payload || {},
     }
   });
 

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

@@ -1,32 +1,22 @@
 <template>
     
 
-<div class="flex items-center w-full p-4 rounded-lg shadow-lg dark:text-darkToastText dark:bg-darkToastBackground bg-lightToastBackground text-lightToastText"
+<div class="afcl-toast flex items-center w-full p-4 rounded-lg shadow-lg dark:text-darkToastText dark:bg-darkToastBackground bg-lightToastBackground text-lightToastText border-l-4"
+    :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-blue-800 dark:text-blue-200">
-        <svg class="w-4 h-4"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.147 15.085a7.159 7.159 0 0 1-6.189 3.307A6.713 6.713 0 0 1 3.1 15.444c-2.679-4.513.287-8.737.888-9.548A4.373 4.373 0 0 0 5 1.608c1.287.953 6.445 3.218 5.537 10.5 1.5-1.122 2.706-3.01 2.853-6.14 1.433 1.049 3.993 5.395 1.757 9.117Z"/>
-        </svg>
-        <span class="sr-only">{{ $t('Fire icon') }}</span>
+    <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">
-        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z"/>
-        </svg>
-        <span class="sr-only">{{ $t('Error icon') }}</span>
+    <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">
-        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"/>
-        </svg>
-        <span class="sr-only">{{ $t('Warning icon') }}</span>
+    <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">
-        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
-        </svg>
-        <span class="sr-only">{{ $t('Check icon') }}</span>
+    <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>
 
     <div class="ms-3 text-sm font-normal max-w-xs pr-2" v-if="toast.messageHtml" v-html="toast.messageHtml"></div>
@@ -34,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>
@@ -47,6 +37,7 @@
             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
         </svg>
     </button>
+    <!-- <div class="h-full ml-3 w-1 rounded-r-lg" :class="toast.variant == 'info' ? 'bg-lightPrimary dark:bg-darkPrimary' : toast.variant == 'danger' ? 'bg-red-500 dark:bg-red-800' : toast.variant == 'warning' ? 'bg-orange-500 dark:bg-orange-700' : 'bg-green-500 dark:bg-green-800'"></div> -->
 </div>
 
 
@@ -55,6 +46,8 @@
 <script setup lang="ts">
 import { onMounted } from 'vue';
 import { useToastStore } from '@/stores/toast';
+import { IconInfoCircleSolid, IconCloseCircleSolid, IconExclamationCircleSolid, IconCheckCircleSolid } from '@iconify-prerendered/vue-flowbite';
+
 const toastStore = useToastStore();
 const emit = defineEmits(['close']);
 const props = defineProps<{

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

@@ -1,15 +1,13 @@
 <template>
   <div class="min-w-40">
     <div class="cursor-pointer flex items-center justify-between gap-1 block px-4 py-2 text-sm 
-      bg-lightUserMenuSettingsButtonBackground hover:bg-lightUserMenuSettingsButtonBackgroundHover
-      text-lightUserMenuSettingsButtonText hover:text-lightUserMenuSettingsButtonTextHover
-      dark:bg-darkUserMenuSettingsButtonBackground dark:hover:bg-darkUserMenuSettingsButtonBackgroundHover
-      dark:text-darkUserMenuSettingsButtonText dark:hover:text-darkUserMenuSettingsButtonTextHover
+      bg-lightUserMenuItemBackground hover:bg-lightUserMenuItemBackgroundHover text-lightUserMenuItemText 
+      hover:text-lightUserMenuItemText dark:bg-darkUserMenuItemBackground dark:hover:bg-darkUserMenuItemBackgroundHover 
+      dark:text-darkUserMenuItemText dark:hover:darkUserMenuItemTextHover
       w-full select-none "
-      :class="{ 'bg-lightUserMenuSettingsButtonBackgroundExpanded hover:bg-lightUserMenuSettingsButtonBackgroundExpanded dark:bg-darkUserMenuSettingsButtonBackgroundExpanded	hover:dark:bg-darkUserMenuSettingsButtonBackgroundExpanded ': showDropdown }"
       @click="showDropdown = !showDropdown"
     >
-        <span>Settings</span>
+        <span>{{ $t('Settings') }}</span>
         <IconCaretDownSolid class="h-5 w-5 text-lightPrimary dark:text-gray-400 opacity-50 transition duration-150 ease-in"
             :class="{ 'transform rotate-180': showDropdown }"
       />
@@ -18,10 +16,9 @@
     <div v-if="showDropdown" >
       
       <router-link class="cursor-pointer flex items-center gap-1 block px-4 py-1 text-sm 
-        bg-lightUserMenuSettingsButtonDropdownItemBackground hover:bg-lightUserMenuSettingsButtonDropdownItemBackgroundHover
-        text-lightUserMenuSettingsButtonDropdownItemText hover:text-lightUserMenuSettingsButtonDropdownItemTextHover
-        dark:bg-darkUserMenuSettingsButtonDropdownItemBackground dark:hover:bg-darkUserMenuSettingsButtonDropdownItemBackgroundHover
-        dark:text-darkUserMenuSettingsButtonDropdownItemText dark:hover:text-darkUserMenuSettingsButtonDropdownItemTextHover
+        bg-lightUserMenuItemBackground hover:bg-lightUserMenuItemBackgroundHover text-lightUserMenuItemText 
+        hover:text-lightUserMenuItemText dark:bg-darkUserMenuItemBackground dark:hover:bg-darkUserMenuItemBackgroundHover 
+        dark:text-darkUserMenuItemText dark:hover:darkUserMenuItemTextHover
         w-full text-select-none pl-5 select-none"
         v-for="option in options"
         :to="getRoute(option)"
@@ -43,9 +40,11 @@ import { computed, ref, onMounted, watch } from 'vue';
 import { useCoreStore } from '@/stores/core';
 import { getIcon } from '@/utils';
 import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 
 const router = useRouter();
 const coreStore = useCoreStore();
+const { t } = useI18n();
 
 const showDropdown = ref(false);
 const props = defineProps(['meta', 'resource']);

package/dist/spa/src/i18n.ts

@@ -7,7 +7,7 @@ function slavicPluralRule(choice: number, choicesLength: number, orgRule: any) {
   if (choice === 0) {
     return 0
   }
-
+  
   const teen = choice > 10 && choice < 20
   const endsWithOne = choice % 10 === 1
 
@@ -21,6 +21,8 @@ function slavicPluralRule(choice: number, choicesLength: number, orgRule: any) {
   return choicesLength < 4 ? 2 : 3
 }
 
+export let i18nInstance: ReturnType<typeof createI18n> | null = null
+
 export function initI18n(app: ReturnType<typeof createApp>) {
   const i18n = createI18n({
     legacy: false,
@@ -48,7 +50,7 @@ export function initI18n(app: ReturnType<typeof createApp>) {
       return key + ' ';
     },
   });
-
   app.use(i18n);
+  i18nInstance = i18n 
   return i18n
 }

package/dist/spa/src/main.ts

@@ -14,7 +14,7 @@ app.use(createPinia())
 app.use(router)
 
 // get access to i18n instance outside components
-window.i18n = initI18n(app);
+initI18n(app);
 
 
 /* IMPORTANT:ADMINFORTH CUSTOM USES */

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

@@ -16,6 +16,7 @@ export const useCoreStore = defineStore('core', () => {
   const record: Ref<any | null> = ref({});
   const resource: Ref<AdminForthResourceCommon | null> = ref(null);
   const userData: Ref<UserData | null> = ref(null);
+  const isResourceFetching = ref(false);
 
   const resourceColumnsWithFilters = computed(() => {
     if (!resource.value) {
@@ -172,6 +173,7 @@ export const useCoreStore = defineStore('core', () => {
       // already fetched
       return;
     }
+    isResourceFetching.value = true;
     resourceColumnsId.value = resourceId;
     resourceColumnsError.value = '';
     const res = await callAdminForthApi({
@@ -188,6 +190,7 @@ export const useCoreStore = defineStore('core', () => {
       resource.value = res.resource;
       resourceOptions.value = res.resource.options;
     }
+    isResourceFetching.value = false;
   }
 
   async function getPublicConfig() {
@@ -198,6 +201,13 @@ export const useCoreStore = defineStore('core', () => {
     config.value = {...config.value, ...res};
   }
 
+  async function getLoginFormConfig() {
+    const res = await callAdminForthApi({
+      path: '/get_login_form_config',
+      method: 'GET',
+    });
+    config.value = {...config.value, ...res};
+  }
 
   const username = computed(() => {
     const usernameField = config.value?.usernameField;
@@ -218,6 +228,7 @@ export const useCoreStore = defineStore('core', () => {
     userFullname,
     getPublicConfig,
     fetchMenuAndResource, 
+    getLoginFormConfig,
     fetchRecord, 
     record, 
     fetchResourceFull, 
@@ -231,5 +242,6 @@ export const useCoreStore = defineStore('core', () => {
     fetchMenuBadges,
     resetAdminUser,
     resetResource,
+    isResourceFetching,
   }
 })

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

@@ -22,6 +22,9 @@ export const useFiltersStore = defineStore('filters', () => {
     const getFilters = () => {
         return filters.value;
     }
+    const clearFilter = (fieldName: string) => {
+        filters.value = filters.value.filter(f => f.field !== fieldName);
+    }
     const clearFilters = () => {
         filters.value = [];
     }
@@ -49,6 +52,7 @@ export const useFiltersStore = defineStore('filters', () => {
         setSort, 
         getSort,
         visibleFiltersCount,
-        shouldFilterBeHidden
+        shouldFilterBeHidden,
+        clearFilter
     }
 })

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

@@ -363,7 +363,8 @@ export interface IAdminForth {
   ): Promise<{ error?: string, createdRecord?: any, newRecordId?: any }>;
 
   updateResourceRecord(
-    params: { resource: AdminForthResource, recordId: any, record: any, oldRecord: any, adminUser: AdminUser, extra?: HttpExtra }
+    params: { resource: AdminForthResource, recordId: any, record: any, oldRecord: any, adminUser: AdminUser, extra?: HttpExtra, updates?: never }
+    | { resource: AdminForthResource, recordId: any, record?: never, oldRecord: any, adminUser: AdminUser, extra?: HttpExtra, updates: any }
   ): Promise<{ error?: string }>;
 
   deleteResourceRecord(
@@ -603,6 +604,7 @@ export type BeforeLoginConfirmationFunction = (params?: {
     response: IAdminForthHttpResponse,
     adminforth: IAdminForth,
     extra?: HttpExtra,
+    rememberMeDays?: number,
 }) => Promise<{
   error?: string, 
   body: {
@@ -611,6 +613,19 @@ export type BeforeLoginConfirmationFunction = (params?: {
   }
 }>;
 
+/**
+ * Allow to make extra authorization
+ */
+export type AdminUserAuthorizeFunction = ((params?: { 
+    adminUser: AdminUser,
+    response: IAdminForthHttpResponse,
+    adminforth: IAdminForth,
+    extra?: HttpExtra,
+}) => Promise<{
+  error?: string,
+  allowed?: boolean,
+}>);
+
   
 /**
  * Data source describes database connection which will be used to fetch data for resources.
@@ -848,6 +863,7 @@ export interface AdminForthActionInput {
   }>;
   icon?: string;
   id?: string;
+  customComponent?: AdminForthComponentDeclaration;
 }
 
 export interface AdminForthResourceInput extends Omit<NonNullable<AdminForthResourceInputCommon>, 'columns' | 'hooks' | 'options'> {
@@ -1009,6 +1025,11 @@ export interface AdminForthInputConfig {
        */
       beforeLoginConfirmation?: BeforeLoginConfirmationFunction | Array<BeforeLoginConfirmationFunction>,
 
+      /**
+       * Array of functions which will be called before any request to AdminForth API.
+       */
+      adminUserAuthorize?: AdminUserAuthorizeFunction | Array<AdminUserAuthorizeFunction>,
+
       /**
        * Optionally if your users table has a field(column) with full name, you can set it here.
        * This field will be used to display user name in the top right corner of the admin panel.

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

@@ -67,6 +67,11 @@ export type AllowedActionsResolved = {
   [key in AllowedActionsEnum]: boolean
 }
 
+// conditional operators for predicates
+type Value = any;
+type Operators = { $eq: Value } | { $not: Value } | { $gt: Value } | { $gte: Value } | { $lt: Value } | { $lte: Value } | { $in: Value[] } | { $nin: Value[] } | { $includes: Value } | { $nincludes: Value };
+export type Predicate = { $and: Predicate[] } | { $or: Predicate[] } | { [key: string]: Operators | Value };
+
 export interface AdminUser {
   /**
    * primaryKey field value of user in table which is defined by {@link AdminForthConfig.auth.usersResourceId}
@@ -507,6 +512,11 @@ export interface AdminForthResourceInputCommon {
           afterBreadcrumbs?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           bottom?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           threeDotsDropdownItems?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+          /**
+           * Custom Save button component for Edit page.
+           * Accepts props: [record, resource, adminUser, meta, saving, validating, isValid, disabled, saveRecord]
+           */
+          saveButton?: AdminForthComponentDeclaration,
         },
 
         /**
@@ -519,6 +529,11 @@ export interface AdminForthResourceInputCommon {
           afterBreadcrumbs?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           bottom?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           threeDotsDropdownItems?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+          /**
+           * Custom Save button component for Create page.
+           * Accepts props: [record, resource, adminUser, meta, saving, validating, isValid, disabled, saveRecord]
+           */
+          saveButton?: AdminForthComponentDeclaration,
         },
       }
     },
@@ -872,6 +887,15 @@ export interface AdminForthResourceColumnInputCommon {
    */
   masked?: boolean,
 
+  /**
+   * Sticky position for column
+   */
+  listSticky?: boolean;
+
+  /**
+   * Show field only if certain conditions are met.
+   */
+  showIf?: Predicate;
 }
 
 export interface AdminForthResourceColumnCommon extends AdminForthResourceColumnInputCommon {

package/dist/spa/src/utils.ts

@@ -8,6 +8,8 @@ import { Dropdown } from 'flowbite';
 import adminforth from './adminforth';
 import sanitizeHtml  from 'sanitize-html'
 import debounce from 'debounce';
+import type { AdminForthResourceColumnInputCommon, Predicate } from '@/types/Common';
+import { i18nInstance } from './i18n'
 
 const LS_LANG_KEY = `afLanguage`;
 const MAX_CONSECUTIVE_EMPTY_RESULTS = 2;
@@ -18,6 +20,7 @@ export async function callApi({path, method, body, headers}: {
   body?: any
   headers?: Record<string, string>
 }): Promise<any> {
+  const t = i18nInstance?.global.t || ((s: string) => s)
   const options = {
     method,
     headers: {
@@ -41,11 +44,11 @@ export async function callApi({path, method, body, headers}: {
     // if it is internal error, say to user
     if (e instanceof TypeError && e.message === 'Failed to fetch') {
       // this is a network error
-      adminforth.alert({variant:'danger', message: window.i18n?.global?.t('Network error, please check your Internet connection and try again'),})
+      adminforth.alert({variant:'danger', message: t('Network error, please check your Internet connection and try again'),})
       return null;
     }
 
-    adminforth.alert({variant:'danger', message: window.i18n?.global?.t('Something went wrong, please try again later'),})
+    adminforth.alert({variant:'danger', message: t('Something went wrong, please try again later'),})
     console.error(`error in callApi ${path}`, e);
   }
 }
@@ -421,4 +424,68 @@ export function createSearchInputHandlers(
     }
     return acc;
   }, {} as Record<string, (searchTerm: string) => void>);
+}
+
+export function checkShowIf(c: AdminForthResourceColumnInputCommon, record: Record<string, any>) {
+  if (!c.showIf) return true;
+
+  const evaluatePredicate = (predicate: Predicate): boolean => {
+    const results: boolean[] = [];
+
+    if ("$and" in predicate) {
+      results.push(predicate.$and.every(evaluatePredicate));
+    }
+
+    if ("$or" in predicate) {
+      results.push(predicate.$or.some(evaluatePredicate));
+    }
+
+    const fieldEntries = Object.entries(predicate).filter(([key]) => !key.startsWith('$'));
+    if (fieldEntries.length > 0) {
+      const fieldResult = fieldEntries.every(([field, condition]) => {
+        const recordValue = record[field];
+
+        if (condition === undefined) {
+          return true;
+        }
+        if (typeof condition !== "object" || condition === null) {
+          return recordValue === condition;
+        }
+
+        if ("$eq" in condition) return recordValue === condition.$eq;
+        if ("$not" in condition) return recordValue !== condition.$not;
+        if ("$gt" in condition) return recordValue > condition.$gt;
+        if ("$gte" in condition) return recordValue >= condition.$gte;
+        if ("$lt" in condition) return recordValue < condition.$lt;
+        if ("$lte" in condition) return recordValue <= condition.$lte;
+        if ("$in" in condition) return (Array.isArray(condition.$in) && condition.$in.includes(recordValue));
+        if ("$nin" in condition) return (Array.isArray(condition.$nin) && !condition.$nin.includes(recordValue));
+        if ("$includes" in condition)
+          return (
+            Array.isArray(recordValue) &&
+            recordValue.includes(condition.$includes)
+          );
+        if ("$nincludes" in condition)
+          return (
+            Array.isArray(recordValue) &&
+            !recordValue.includes(condition.$nicludes)
+          );
+
+        return true;
+      });
+      results.push(fieldResult);
+    }
+
+    return results.every(result => result);
+  };
+
+  return evaluatePredicate(c.showIf);
+}
+
+export function btoa_function(source: string): string {
+  return btoa(source);
+}
+
+export function atob_function(source: string): string {
+  return atob(source);
 }

package/dist/spa/src/views/CreateView.vue

@@ -18,8 +18,25 @@
         {{ $t('Cancel') }}
       </button>
 
+      <!-- Custom Save Button injection -->
+      <component
+        v-if="createSaveButtonInjection"
+        :is="getCustomComponent(createSaveButtonInjection)"
+        :meta="createSaveButtonInjection.meta"
+        :record="record"
+        :resource="coreStore.resource"
+        :adminUser="coreStore.adminUser"
+        :saving="saving"
+        :validating="validating"
+        :isValid="isValid"
+        :disabled="saving || (validating && !isValid)"
+        :saveRecord="saveRecord"
+      />
+      
+      <!-- Default Save Button fallback -->
       <button  
-        @click="saveRecord"
+        v-else
+        @click="() => saveRecord()"
         class="af-save-button flex items-center py-1 px-3 text-sm font-medium rounded-default text-lightCreateViewSaveButtonText focus:outline-none bg-lightCreateViewButtonBackground rounded border border-lightCreateViewButtonBorder hover:bg-lightCreateViewButtonBackgroundHover hover:text-lightCreateViewSaveButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightCreateViewButtonFocusRing dark:focus:ring-darkCreateViewButtonFocusRing dark:bg-darkCreateViewButtonBackground dark:text-darkCreateViewSaveButtonText dark:border-darkCreateViewButtonBorder dark:hover:text-darkCreateViewSaveButtonTextHover dark:hover:bg-darkCreateViewButtonBackgroundHover disabled:opacity-50 gap-1"
         :disabled="saving || (validating && !isValid)"
       > 
@@ -105,6 +122,13 @@ const coreStore = useCoreStore();
 
 const { t } = useI18n();
 
+const createSaveButtonInjection = computed<AdminForthComponentDeclarationFull | null>(() => {
+  const raw: any = coreStore.resourceOptions?.pageInjections?.create?.saveButton as any;
+  if (!raw) return null;
+  const item = Array.isArray(raw) ? raw[0] : raw;
+  return item as AdminForthComponentDeclarationFull;
+});
+
 const initialValues = ref({});
 
 const readonlyColumns = ref([]);
@@ -125,11 +149,27 @@ onMounted(async () => {
     }
     return acc;
   }, {});
+  let userUseMultipleEncoding = true;  //TODO remove this in future versions
   if (route.query.values) {
-    initialValues.value = { ...initialValues.value, ...JSON.parse(decodeURIComponent(route.query.values as string)) };
+    try {
+      JSON.parse(decodeURIComponent(route.query.values as string));
+      console.warn('You are using an outdated format for the query vales. Please update your links and don`t use multiple URL encoding.');
+    } catch (e) {
+      userUseMultipleEncoding = false;
+      console.warn('You are using an outdated format for the query vales. Please update your links and don`t use multiple URL encoding.');
+    }
+    if (userUseMultipleEncoding) {
+      initialValues.value = { ...initialValues.value, ...JSON.parse(decodeURIComponent((route.query.values as string))) };
+    } else {
+      initialValues.value = { ...initialValues.value, ...JSON.parse(atob(route.query.values as string)) };
+    }
   }
   if (route.query.readonlyColumns) {
-    readonlyColumns.value = JSON.parse(decodeURIComponent(route.query.readonlyColumns as string));
+    if (userUseMultipleEncoding) {
+      readonlyColumns.value = JSON.parse(decodeURIComponent((route.query.readonlyColumns as string)));
+    } else {
+      readonlyColumns.value = JSON.parse(atob(route.query.readonlyColumns as string));
+    }
   }
   record.value = initialValues.value;
   loading.value = false;
@@ -137,7 +177,7 @@ onMounted(async () => {
   initThreeDotsDropdown();
 });
 
-async function saveRecord() {
+async function saveRecord(opts?: { confirmationResult?: any }) {
   if (!isValid.value) {
     validating.value = true;
     return;
@@ -151,6 +191,9 @@ async function saveRecord() {
     body: {
       resourceId: route.params.resourceId,
       record: record.value,
+      meta: {
+        ...(opts?.confirmationResult ? { confirmationResult: opts.confirmationResult } : {}),
+      },
     },
   });
   if (response?.error && response?.error !== 'Operation aborted by hook') {