adminforth 2.4.0-next.31 → 2.4.0-next.310

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 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?.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;
+    }[],
 }
 
 

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) {
@@ -118,7 +119,7 @@ export const useCoreStore = defineStore('core', () => {
         item.badge = badge;
       }
     });
-
+    websocket.unsubscribeAll();
     subscribeToMenuBadges();
 
   }
@@ -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

@@ -1,9 +1,11 @@
-import { ref, type Ref } from 'vue';
+import { ref, computed, type Ref } from 'vue';
 import { defineStore } from 'pinia';
+import { useCoreStore } from './core';
 
 export const useFiltersStore = defineStore('filters', () => {
     const filters: Ref<any[]> = ref([]);
     const sort: Ref<any> = ref({});
+    const coreStore = useCoreStore();
 
     const setSort = (s: any) => {
         sort.value = s;
@@ -20,8 +22,37 @@ 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 = [];
     }
-    return {setFilter, getFilters, clearFilters, filters, setFilters, setSort, getSort}
+
+    const shouldFilterBeHidden = (fieldName: string) => {
+        if (coreStore.resource?.columns) {
+            const column = coreStore.resource.columns.find((col: any) => col.name === fieldName);
+            if (column?.showIn?.filter !== true) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    const visibleFiltersCount = computed(() => {
+        return filters.value.filter(f => !shouldFilterBeHidden(f.field)).length;
+    });
+
+    return {
+        setFilter, 
+        getFilters, 
+        clearFilters, 
+        filters, 
+        setFilters, 
+        setSort, 
+        getSort,
+        visibleFiltersCount,
+        shouldFilterBeHidden,
+        clearFilter
+    }
 })

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

@@ -29,7 +29,12 @@ export const useModalStore = defineStore('modal', () => {
     onCancelFunction.value = func;
   }
   function setModalContent(content: ModalContentType) {
-    modalContent.value = content;
+    modalContent.value = {
+      title: content.title || 'title',
+      content: content.content || 'content',
+      acceptText: content.acceptText || 'acceptText',
+      cancelText: content.cancelText || 'cancelText',
+    };
   }
   function resetmodalState() {
     isOpened.value = false;

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

@@ -12,19 +12,38 @@ export const useToastStore = defineStore('toast', () => {
     watch(route, () => {
         // on route change clear all toasts older then 5 seconds
         const now = +new Date();
-        toasts.value = toasts.value.filter((t) => now - t.createdAt < 5000);
+        toasts.value = toasts.value.filter((t) => t?.timeout === 'unlimited' || now - t.createdAt < 5000);
     });
 
-    const addToast = (toast: { message: string; variant: string }) => {
+    const addToast = (toast: { 
+        message?: string; 
+        messageHtml?: string; 
+        variant: string; 
+        timeout?: number | 'unlimited';
+        buttons?: { value: any; label: string }[];
+        onResolve?: (value?: any) => void;
+    }): string => {
         const toastId = uuid();
         toasts.value.push({
             ...toast,
             id: toastId,
             createdAt: +new Date(),
         });
+        return toastId;
     };
     const removeToast = (toast: { id: string }) => {
         toasts.value = toasts.value.filter((t) => t.id !== toast.id);
     };
-    return { toasts, addToast, removeToast };
+
+    const resolveToast = (toastId: string, value?: any) => {
+        const t = toasts.value.find((x) => x.id === toastId);
+        try {
+            t?.onResolve?.(value);
+        } catch {
+            // no-op
+        }
+        toasts.value = toasts.value.filter((x) => x.id !== toastId);
+    };
+
+    return { toasts, addToast, removeToast, resolveToast };
 });