adminforth 2.4.0-next.33 → 2.4.0-next.331

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

@@ -1,8 +1,8 @@
 <template >
-  <template v-if="threeDotsDropdownItems?.length || customActions?.length">
+  <template v-if="threeDotsDropdownItems?.length || customActions?.length || (bulkActions?.some((action: AdminForthBulkActionCommon) => action.showInThreeDotsDropdown))">
     <button 
       data-dropdown-toggle="listThreeDotsDropdown" 
-      class="flex items-center py-2 px-2 text-sm font-medium 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 rounded-default"
+      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"
     >
       <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"/>
@@ -12,26 +12,60 @@
     <!-- Dropdown menu -->
     <div 
       id="listThreeDotsDropdown" 
-      class="z-20 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
-        <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownMenuIconButton">
-          <li v-for="item in threeDotsDropdownItems" :key="`dropdown-item-${item.label}`">
-            <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
-              <component :is="getCustomComponent(item)" 
+      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="#" 
+              class="block px-4 py-2 hover:bg-lightThreeDotsMenuBodyBackgroundHover hover:text-lightThreeDotsMenuBodyTextHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover"
+              :class="{
+                'pointer-events-none': checkboxes && checkboxes.length === 0 && item.meta?.disabledWhenNoCheckboxes,
+                'opacity-50': checkboxes && checkboxes.length === 0 && item.meta?.disabledWhenNoCheckboxes,
+                'cursor-not-allowed': checkboxes && checkboxes.length === 0 && item.meta?.disabledWhenNoCheckboxes,
+              }"
+              @click="injectedComponentClick(i)">
+              <component :ref="(el: any) => setComponentRef(el, i)" :is="getCustomComponent(item)"
                 :meta="item.meta" 
                 :resource="coreStore.resource" 
                 :adminUser="coreStore.adminUser"
+                :checkboxes="checkboxes"
+                :updateList="props.updateList"
+                :clearCheckboxes="clearCheckboxes"
               />
             </a>
           </li>
           <li v-for="action in customActions" :key="action.id">
-            <a href="#" @click.prevent="handleActionClick(action)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+            <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 => 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="{
+                  'pointer-events-none': checkboxes && checkboxes.length === 0,
+                  'opacity-50': checkboxes && checkboxes.length === 0,
+                  'cursor-not-allowed': checkboxes && checkboxes.length === 0
+                }">
               <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 }}
+                {{ action.label }}
               </div>
             </a>
           </li>
@@ -47,17 +81,39 @@ import { useCoreStore } from '@/stores/core';
 import adminforth from '@/adminforth';
 import { callAdminForthApi } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
+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();
 const router = useRouter();
+const threeDotsDropdownItemsRefs = ref<Array<ComponentPublicInstance | null>>([]);
 
 const props = defineProps({
-  threeDotsDropdownItems: Array,
-  customActions: Array
+  threeDotsDropdownItems: Array<AdminForthComponentDeclarationFull>,
+  customActions: Array<AdminForthActionInput>,
+  bulkActions: Array<AdminForthBulkActionCommon>,
+  checkboxes: Array,
+  updateList: {
+    type: Function,
+  },
+  clearCheckboxes: {
+    type: Function
+  }
 });
 
-async function handleActionClick(action) {
+const emit = defineEmits(['startBulkAction']);
+
+function setComponentRef(el: ComponentPublicInstance | null, index: number) {
+  if (el) {
+    threeDotsDropdownItemsRefs.value[index] = el;
+  }
+}
+
+async function handleActionClick(action: AdminForthActionInput, payload: any) {
   adminforth.list.closeThreeDotsDropdown();
   
   const actionId = action.id;
@@ -67,7 +123,8 @@ async function handleActionClick(action) {
     body: {
       resourceId: route.params.resourceId,
       actionId: actionId,
-      recordId: route.params.primaryKey
+      recordId: route.params.primaryKey,
+      extra: payload || {},
     }
   });
 
@@ -88,8 +145,8 @@ async function handleActionClick(action) {
   
   if (data?.ok) {
     await coreStore.fetchRecord({
-      resourceId: route.params.resourceId, 
-      primaryKey: route.params.primaryKey,
+      resourceId: route.params.resourceId as string, 
+      primaryKey: route.params.primaryKey as string,
       source: 'show',
     });
 
@@ -108,4 +165,16 @@ async function handleActionClick(action) {
     });
   }
 }
+
+function startBulkAction(actionId: string) {
+  adminforth.list.closeThreeDotsDropdown();
+  emit('startBulkAction', actionId);
+}
+
+async function injectedComponentClick(index: number) {
+  const componentRef = threeDotsDropdownItemsRefs.value[index];
+  if (componentRef && 'click' in componentRef) {
+    (componentRef as any).click?.();
+  }
+}
 </script>

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

@@ -1,46 +1,43 @@
 <template>
     
 
-<div class="flex items-center w-full p-4 text-gray-500 rounded-lg shadow-lg dark:text-gray-400 dark:bg-gray-800 bg-white"
+<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"
-    :class="
-        {
-            'danger': 'bg-red-100',
-        }[toast.variant]
-    "
 >
-    <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>
-    <div class="ms-3 text-sm font-normal max-w-xs pr-2" v-else>{{toast.message}}</div>
-    <button @click="closeToast" type="button" class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" >
+    <div class="ms-3 text-sm font-normal max-w-xs pr-2" v-else>
+        <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="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>
+                </div>
+            </div>
+        </div>
+    </div>
+    <button @click="closeToast" type="button" class="ms-auto -mx-1.5 -my-1.5 bg-lightToastCloseIconBackground text-lightToastCloseIcon hover:text-lightToastCloseIconHover rounded-lg focus:ring-2 focus:ring-lightToastCloseIconFocusRing p-1.5 hover:bg-lightToastCloseIconBackgroundHover inline-flex items-center justify-center h-8 w-8 dark:text-darkToastCloseIcon dark:hover:text-darkToastCloseIconHover dark:bg-darkToastCloseIconBackground dark:hover:bg-darkToastCloseIconBackgroundHover dark:focus:ring-darkToastCloseIconFocusRing" >
         <svg class="w-3 h-3"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
             <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>
 
 
@@ -49,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<{
@@ -58,16 +57,28 @@ const props = defineProps<{
         variant: string;
         id: string;
         timeout?: number|'unlimited';
+        buttons?: { value: any; label: string }[];
     }
 }>();
 function closeToast() {
+    // resolve with undefined on close (X button)
+    toastStore.resolveToast(props.toast.id);
+    emit('close');
+}
+
+function onButtonClick(value: any) {
+    toastStore.resolveToast(props.toast.id, value);
     emit('close');
 }
 
 onMounted(() => {
     if (props.toast.timeout === 'unlimited') return;
     else { 
-      setTimeout(() => {emit('close');}, (props.toast.timeout || 10) * 1e3 );
+      setTimeout(() => {
+        // resolve with undefined on auto-timeout
+        toastStore.resolveToast(props.toast.id);
+        emit('close');
+      }, (props.toast.timeout || 10) * 1e3 );
     }
 });
 

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

@@ -0,0 +1,69 @@
+<template>
+  <div v-if="options && options.length" class="min-w-40">
+    <div class="cursor-pointer flex items-center justify-between gap-1 block px-4 py-2 text-sm 
+      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 "
+      @click="showDropdown = !showDropdown"
+    >
+        <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 }"
+      />
+    </div>
+
+    <div v-if="showDropdown" >
+      
+      <router-link class="cursor-pointer flex items-center gap-1 block px-4 py-1 text-sm 
+        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)"
+      >
+        <span class="mr-1">
+          <component v-if="option.icon" :is="getIcon(option.icon)" class="w-5 h-5 transition duration-75" ></component>
+        </span>
+        <span>{{ option.pageLabel }}</span>
+      </router-link>
+    </div>
+
+   
+  </div>
+</template>
+
+<script setup lang="ts">
+import { IconCaretDownSolid } from '@iconify-prerendered/vue-flowbite';
+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']);
+
+const options = computed(() => {
+  return coreStore.config?.settingPages?.filter(page => page.isVisible).map((page) => {
+    return {
+      pageLabel: page.pageLabel,
+      slug: page.slug || null,
+      icon: page.icon || null,
+    };
+  });
+});
+
+function getRoute(option: { slug?: string | null, pageLabel: string }) {
+  return {
+    name: 'settings',
+    params: { page: option.slug }
+  }
+}
+
+</script>

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

@@ -12,13 +12,40 @@
       >
         <RouterLink
           class="font-medium text-lightSidebarText dark:text-darkSidebarText hover:brightness-110 whitespace-nowrap"
-          :to="{ name: 'resource-show', params: { primaryKey: foreignResource.pk, resourceId: column.foreignResource.resourceId || column.foreignResource.polymorphicResources.find((pr) => pr.whenValue === record[column.foreignResource.polymorphicOn]).resourceId } }"
+          :to="{
+            name: 'resource-show',
+            params: {
+              primaryKey: foreignResource.pk,
+              resourceId: column.foreignResource
+                ? (
+                    column.foreignResource.resourceId
+                    || column.foreignResource.polymorphicResources?.find(
+                        (pr: any) => pr.whenValue === record[column.foreignResource?.polymorphicOn!]
+                      )?.resourceId
+                  )
+                : undefined
+            }
+          }"
         >
           {{ foreignResource.label }}
         </RouterLink>
       </span>
       <RouterLink v-else-if="record[column.name]" class="font-medium text-lightPrimary dark:text-darkPrimary hover:brightness-110 whitespace-nowrap"
-        :to="{ name: 'resource-show', params: { primaryKey: record[column.name].pk, resourceId: column.foreignResource.resourceId || column.foreignResource.polymorphicResources.find((pr) => pr.whenValue === record[column.foreignResource.polymorphicOn]).resourceId } }">
+          :to="{
+            name: 'resource-show',
+            params: {
+              primaryKey: record[column.name].pk,
+              resourceId: column.foreignResource
+                ? (
+                    column.foreignResource.resourceId
+                    || column.foreignResource.polymorphicResources?.find(
+                        (pr: any) => pr.whenValue === record[column.foreignResource?.polymorphicOn!]
+                      )?.resourceId
+                  )
+                : undefined
+            }
+          }"
+        >
         {{ record[column.name].label }}
       </RouterLink>
       <div v-else>
@@ -27,8 +54,8 @@
     </span>
         
     <span v-else-if="column.type === 'boolean'">
-      <span v-if="record[column.name] === true" class="bg-green-100 whitespace-nowrap text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">{{ $t('Yes') }}</span>
-      <span v-else-if="record[column.name] === false" class="bg-red-100 whitespace-nowrap text-red-800gg text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">{{ $t('No') }}</span>
+      <span v-if="record[column.name] === true" class="af-true-value-icon bg-green-100 whitespace-nowrap text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">{{ $t('Yes') }}</span>
+      <span v-else-if="record[column.name] === false" class="af-false-value-icon bg-red-100 whitespace-nowrap text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">{{ $t('No') }}</span>
       <span v-else class="bg-gray-100 whitespace-nowrap text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-400 border border-gray-400">{{ $t('Unset') }}</span>
     </span>
     <span
@@ -38,14 +65,14 @@
       <template v-for="(arrayItem, arrayItemIndex) in record[column.name]">
         <span
           v-if="column.isArray.itemType === 'boolean' && arrayItem"
-          :key="`${column.name}-${arrayItemIndex}`"
-          class="bg-green-100 whitespace-nowrap text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">
+          :key="`${column.name}-${arrayItemIndex}-true`"
+          class="af-true-value-icon bg-green-100 whitespace-nowrap text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">
           {{ $t('Yes') }}
         </span>
         <span
           v-else-if="column.isArray.itemType === 'boolean'"
-          :key="`${column.name}-${arrayItemIndex}`"
-          class="bg-red-100 whitespace-nowrap text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">
+          :key="`${column.name}-${arrayItemIndex}-false`"
+          class="af-false-value-icon bg-red-100 whitespace-nowrap text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">
           {{ $t('No') }}
         </span>
         <span
@@ -53,30 +80,30 @@
           :key="`${column.name}-${arrayItemIndex}`"
           class="rounded-md m-0.5 bg-lightAnnouncementBG dark:bg-darkAnnouncementBG text-lightAnnouncementText dark:text-darkAnnouncementText py-0.5 px-2.5 text-sm"
         >
-          {{ checkEmptyValues(getArrayItemDisplayValue(arrayItem, column), route.meta.type) }}
+          {{ checkEmptyValues(getArrayItemDisplayValue(arrayItem, column), route.meta.type as "show" | "list") }}
         </span>
       </template>
     </span>
     <span v-else-if="column.enum">
-      {{ checkEmptyValues(column.enum.find(e => e.value === record[column.name])?.label || record[column.name], route.meta.type) }}
+      {{ checkEmptyValues(column.enum.find(e => e.value === record[column.name])?.label || record[column.name], route.meta.type as "show" | "list") }}
     </span>
     <span v-else-if="column.type === 'datetime'" class="whitespace-nowrap">
-      {{ checkEmptyValues(formatDateTime(record[column.name]), route.meta.type) }}
+      {{ checkEmptyValues(formatDateTime(record[column.name]), route.meta.type as "show" | "list") }}
     </span>
     <span v-else-if="column.type === 'date'" class="whitespace-nowrap">
-      {{ checkEmptyValues(formatDate(record[column.name]), route.meta.type) }}
+      {{ checkEmptyValues(formatDate(record[column.name]), route.meta.type as "show" | "list") }}
     </span>
     <span v-else-if="column.type === 'time'" class="whitespace-nowrap">
-      {{ checkEmptyValues(formatTime(record[column.name]), route.meta.type) }}
+      {{ checkEmptyValues(formatTime(record[column.name]), route.meta.type as "show" | "list") }}
     </span>
     <span v-else-if="column.type === 'decimal'">
-      {{ checkEmptyValues(record[column.name] && parseFloat(record[column.name]), route.meta.type) }}
+      {{ checkEmptyValues(record[column.name] && parseFloat(record[column.name]), route.meta.type as "show" | "list") }}
     </span>
     <span v-else-if="column.type === 'json'">
       <JsonViewer class="min-w-[6rem]" :value="record[column.name]" :expandDepth="column.extra?.jsonCollapsedLevel" copyable sort :theme="coreStore.theme"/>
     </span>
     <span v-else>
-      {{ checkEmptyValues(record[column.name],route.meta.type) }}
+      {{ checkEmptyValues(record[column.name], route.meta.type as "show" | "list") }}
     </span>
   </div>
 </template>
@@ -90,7 +117,7 @@ import timezone from 'dayjs/plugin/timezone';
 import {checkEmptyValues} from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
 import { JsonViewer } from "vue3-json-viewer";
-import "vue3-json-viewer/dist/index.css";
+import "vue3-json-viewer/dist/vue3-json-viewer.css";
 import type { AdminForthResourceColumnCommon } from '@/types/Common';
 
 import { useCoreStore } from '@/stores/core';
@@ -122,7 +149,7 @@ function formatTime(time: string) {
   return dayjs(`0000-00-00 ${time}`).format(coreStore.config?.timeFormat || 'HH:mm:ss');
 }
 
-function getArrayItemDisplayValue(value, column) {
+function getArrayItemDisplayValue(value: any, column: AdminForthResourceColumnCommon) {
   if (column.isArray?.itemType === 'datetime') {
     return formatDateTime(value);
   } else if (column.isArray?.itemType === 'date') {

package/dist/spa/src/controls/BoolToggle.vue

@@ -0,0 +1,34 @@
+<template>
+        <Toggle 
+        :disabled="readonly" 
+        @update:modelValue="$emit('update:value', $event)"
+        :modelValue="valueFromRecord"
+        >
+        <p>{{text}}</p>
+    </Toggle>
+</template>
+
+<script setup lang="ts">
+import Toggle from '@/afcl/Toggle.vue';
+import type {
+  AdminForthResourceColumnCommon,
+  AdminForthResourceCommon,
+  AdminUser,
+} from "@/types/Common";
+
+    const props = defineProps<{
+        value: boolean,
+        text: string,
+        column: AdminForthResourceColumnCommon,
+        record: any,
+        meta: any,
+        resource: AdminForthResourceCommon,
+        adminUser: AdminUser,
+        readonly: boolean
+    }>();
+    console.log(JSON.stringify(props));
+    console.log("Current mode:", props.meta?.mode)
+    defineEmits(['update:value']);
+    const valueFromRecord = props.record[props.column.name]
+    const editReadOnly = props.column.editReadonly;
+</script>

package/dist/spa/src/i18n.ts

@@ -3,11 +3,11 @@ import { createApp } from 'vue';
 
 
 // taken from here https://vue-i18n.intlify.dev/guide/essentials/pluralization.html#custom-pluralization
-function slavicPluralRule(choice, choicesLength, orgRule) {
+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, choicesLength, orgRule) {
   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/renderers/CompactField.vue

@@ -1,7 +1,7 @@
 <template>
   <Tooltip>
     <span class="flex items-center">
-      {{ visualValue }} <IconFileCopyAltSolid @click.stop="copyToCB" class="w-5 h-5 text-lightPrimary dark:text-darkPrimary" v-if="visualValue"/>
+      {{ visualValue }} <IconFileCopyAltSolid @click.stop="copyToCB" class="min-w-5 min-h-5 text-lightPrimary dark:text-darkPrimary" v-if="visualValue"/>
     </span>
     <template #tooltip v-if="visualValue">
       {{ props.record[props.column.name] }}

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

@@ -1,7 +1,7 @@
 <template>
   <Tooltip>
     <span class="flex items-center">
-      {{ visualValue }} <IconFileCopyAltSolid @click.stop="copyToCB" class="w-5 h-5 text-lightPrimary dark:text-darkPrimary" v-if="visualValue"/>
+      {{ visualValue }} <IconFileCopyAltSolid @click.stop="copyToCB" class="min-w-5 min-h-5 text-lightPrimary dark:text-darkPrimary" v-if="visualValue"/>
     </span>
     <template #tooltip v-if="visualValue">
       {{ props.record[props.column.name] }}

package/dist/spa/src/router/index.ts

@@ -62,6 +62,14 @@ const router = createRouter({
         },
       ]
     },
+    {
+      path: '/settings/:page?',
+      name: 'settings',
+      component: () => import('@/views/SettingsView.vue'),
+      meta: { 
+        title: 'Settings', 
+      },
+    },
     /* IMPORTANT:ADMINFORTH ROUTES */
     { path: "/:pathMatch(.*)*", component: PageNotFound },
   ]

package/dist/spa/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

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

@@ -1,4 +1,4 @@
-import type { AdminForthResource, AdminForthResourceColumn } from '../types/AdminForthConfig';
+import type { AdminForthResource, AdminForthResourceColumn } from '../types/Back.js';
 
 export type resourceById = {
     [key: string]: AdminForthResource;
@@ -21,7 +21,12 @@ export type ResourceColumns = {
 
 export type CoreConfig = {
     brandName: string,
+    singleTheme?: 'light' | 'dark',
     brandLogo: string,
+    iconOnlySidebar: {
+        logo?: string,
+        enabled?: boolean,
+    },
     title: string,
     datesFormat: string,
     timeFormat: string,
@@ -33,12 +38,19 @@ export type CoreConfig = {
         passwordHashField: string,
         loginBackgroundImage: string,
         loginBackgroundPosition: string,
+        removeBackgroundBlendMode: boolean,
         userFullnameField: string,
     },
     emptyFieldPlaceholder?: {
         show?: string,
         list?: string,
     } | string,
+
+    customHeadItems?: {
+        tagName: string;
+        attributes: { [key: string]: string | boolean };
+        innerCode?: string;
+    }[],
 }