adminforth 2.44.2-next.1 → 2.45.0-next.10

package/dist/spa/src/App.vue

@@ -135,6 +135,7 @@
     <component
       v-for="c in coreStore?.config?.globalInjections?.everyPageBottom || []"
       :is="getCustomComponent(c)"
+      :adminUser="coreStore.adminUser || null"
       :meta="c.meta"
     />
   </div>

package/dist/spa/src/adminforth.ts

@@ -118,11 +118,13 @@ class FrontendAPI implements FrontendAPIInterface {
 
   confirm(params: Parameters<FrontendAPIInterface['confirm']>[0]): ReturnType<FrontendAPIInterface['confirm']> {
     return new Promise((resolve, reject) => {
-      this.modalStore.setModalContent({ 
-        content: params.message, 
+      this.modalStore.setModalContent({
+        title: params.title,
+        guardMessage: params.guardMessage,
+        content: params.message,
         contentHTML: params.messageHtml,
         acceptText: params.yes || 'Yes',
-        cancelText: params.no || 'Cancel' 
+        cancelText: params.no || 'Cancel'
       })
       this.modalStore.onAcceptFunction = resolve
       this.modalStore.onCancelFunction = reject

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

@@ -104,6 +104,10 @@ async function close() {
   isModalOpen.value = false;
 }
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 defineExpose({
   open: open,
   close: close,

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

@@ -4,26 +4,59 @@
       ref="modalRef"
       :beforeCloseFunction="()=>{modalStore.onAcceptFunction(false);modalStore.isOpened=false}"
       backgroundCustomClasses="z-[998]"
-      modalCustomClasses="z-[999]"
+      modalCustomClasses="z-[999] flex items-center justify-center" 
     >
-      <div class="relative p-4 w-full max-w-md max-h-full" >
-        <button type="button" @click="modalStore.togleModal()" class="absolute top-3 end-2.5 text-lightAcceptModalCloseIcon bg-transparent hover:bg-lightAcceptModalCloseIconHoverBackground hover:text-lightAcceptModalCloseIconHover rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:text-darkAcceptModalCloseIcon dark:hover:bg-darkAcceptModalCloseIconHoverBackground dark:hover:text-darkAcceptModalCloseIconHover" >
-          <svg class="w-3 h-3"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+      <div class="relative p-6 sm:p-8 w-[440px] bg-white rounded-lg shadow-xl dark:bg-gray-800" >
+        
+        <button type="button" @click="modalStore.togleModal()" class="absolute top-4 right-4 text-gray-400 hover:text-gray-900 transition-colors dark:hover:text-white" >
+          <svg class="w-3.5 h-3.5" 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>
-          <span class="sr-only">{{ $t('Close modal') }}</span>
         </button>
-        <div class="p-4 md:p-5 text-center">
-          <svg class="mx-auto mb-4 text-lightAcceptModalWarningIcon w-12 h-12 dark:text-darkAcceptModalWarningIcon"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
-              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
-          </svg>
-          <h3 class="afcl-confirmation-title mb-5 text-lg font-normal text-lightAcceptModalText dark:text-darkAcceptModalText">{{ modalStore?.modalContent?.content }}</h3>
-          <h3 class=" afcl-confirmation-title mb-5 text-lg font-normal text-lightAcceptModalText dark:text-darkAcceptModalText" v-html="modalStore?.modalContent?.contentHTML"></h3>
 
-          <button @click="()=>{ modalStore.onAcceptFunction(true);modalStore.togleModal()}" type="button" class="afcl-confirmation-accept-button text-lightAcceptModalConfirmButtonText bg-lightAcceptModalConfirmButtonBackground hover:bg-lightAcceptModalConfirmButtonBackgroundHover focus:ring-4 focus:outline-none focus:ring-lightAcceptModalConfirmButtonFocus font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center dark:text-darkAcceptModalConfirmButtonText dark:bg-darkAcceptModalConfirmButtonBackground dark:hover:bg-darkAcceptModalConfirmButtonBackgroundHover dark:focus:ring-darkAcceptModalConfirmButtonFocus">
-              {{ modalStore?.modalContent?.acceptText }}
-          </button>
-          <button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}"  type="button" class="afcl-confirmation-cancel-button py-2.5 px-5 ms-3 text-sm font-medium text-lightAcceptModalCancelButtonText focus:outline-none bg-lightAcceptModalCancelButtonBackground rounded-lg border border-lightAcceptModalCancelButtonBorder hover:bg-lightAcceptModalCancelButtonBackgroundHover hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-lightAcceptModalCancelButtonFocus dark:focus:ring-darkAcceptModalCancelButtonFocus dark:bg-darkAcceptModalCancelButtonBackground dark:text-darkAcceptModalCancelButtonText dark:border-darkAcceptModalCancelButtonBorder dark:hover:text-darkAcceptModalCancelButtonTextHover dark:hover:bg-darkAcceptModalCancelButtonBackgroundHover">{{ modalStore?.modalContent?.cancelText }}</button>
+        <div class="text-center flex flex-col">
+          <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-red-50 mb-4 relative dark:bg-red-900/20">
+            <IconClipboardDocumentSolid class="w-10 h-10 text-red-500" />
+            <div class="absolute bottom-1 right-1 bg-red-500 rounded-full w-[18px] h-[18px] flex items-center justify-center border-2 border-white dark:border-gray-800">
+                <span class="text-white text-[10px] font-medium">!</span>
+            </div>
+          </div>
+          
+          <div class="flex flex-col gap-3">
+            <h3 v-if="modalStore?.modalContent?.title" class="text-2xl font-bold text-gray-900 dark:text-white">
+              {{ modalStore.modalContent.title }}
+            </h3>
+            
+            <div class="text-[15px] text-gray-600 dark:text-gray-300">
+              <div v-if="modalStore?.modalContent?.contentHTML" class="font-medium" v-html="modalStore.modalContent.contentHTML"></div>
+              <p v-else-if="modalStore?.modalContent?.content" class="font-medium">{{ modalStore.modalContent.content }}</p>
+            </div>
+          </div>
+
+          <hr class="border-t-2 border-gray-300 dark:border-gray-700 my-6">
+
+          <div class="flex justify-center gap-4 w-full">
+            <button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}" type="button" class="flex-1 py-2.5 px-4 text-sm font-medium text-gray-700 bg-white rounded-lg border border-gray-200 hover:bg-gray-50 focus:ring-4 focus:ring-gray-100 transition-all dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700">
+                {{ modalStore?.modalContent?.cancelText }}
+            </button>
+            
+            <button 
+              @click="()=>{ modalStore.onAcceptFunction(true);modalStore.togleModal()}" 
+              type="button" 
+              class="flex-1 flex items-center justify-center py-2.5 px-4 text-sm font-medium transition-all focus:outline-none 
+                    text-white bg-red-600 hover:bg-red-700 
+                    dark:bg-red-500 dark:hover:bg-red-600 
+                    border-none rounded-lg shadow-sm focus:z-10 focus:ring-4 
+                    focus:ring-red-100 dark:focus:ring-red-900 gap-1">
+                {{ modalStore?.modalContent?.acceptText }}
+            </button>
+          </div>
+
+          <div v-if="modalStore?.modalContent?.guardMessage" class="flex items-center justify-center mt-6 text-xs text-gray-400 gap-1.5 font-medium">
+            <IconShieldCheck class="w-4 h-4" />
+            <span> {{ modalStore?.modalContent?.guardMessage }}</span>
+          </div>
+
         </div>
       </div>
     </Modal>
@@ -31,9 +64,11 @@
 </template>
 
 <script setup lang="ts">
-import { watch, onMounted, nextTick, ref } from 'vue';
+import { watch, ref } from 'vue';
 import { useModalStore } from '@/stores/modal';
 import { Modal } from '@/afcl';
+import { IconClipboardDocumentSolid, IconShieldCheck } from '@iconify-prerendered/vue-heroicons';
+
 
 const modalRef = ref();
 const modalStore = useModalStore();

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

@@ -18,7 +18,7 @@
       v-model="end"
     >
 
-    <div v-if="min && max" class="w-full px-2.5">
+    <div v-if="min !== undefined && max !== undefined" class="w-full px-2.5">
       <RangePicker
         :dot-size="20"
         height="7.99px"
@@ -31,96 +31,70 @@
   </div>
 </template>
 <script setup lang="ts">
-import {computed, onMounted, ref, watch} from "vue";
+import { computed, ref, watch } from "vue";
 import debounce from 'debounce'
 import RangePicker from './RangePicker.vue';
 
 const props = defineProps<{
-  valueStart: number | null,
-  valueEnd: number | null,
-  min: number,
-  max: number,
+  valueStart: number | null | string,
+  valueEnd: number | null | string,
+  min: number | string | undefined,
+  max: number | string | undefined,
 }>()
 
 const emit = defineEmits(['update:valueStart', 'update:valueEnd']);
 
-const minFormatted = computed(() => Math.floor(<number>props.min));
-const maxFormatted = computed(() => Math.ceil(<number>props.max));
+const minFormatted = computed(() => {
+  const v = Number(props.min);
+  return isNaN(v) ? 0 : Math.floor(v);
+});
 
+const maxFormatted = computed(() => {
+  const v = Number(props.max);
+  return isNaN(v) ? 100 : Math.ceil(v);
+});
 
-const start = ref<number | null>(props.valueStart);
-const end = ref<number | null>(props.valueEnd);
+const normalize = (val: any) => {
+  if (val === "" || val === null || val === undefined) return null;
+  const numericValue = Number(val);
+  return isNaN(numericValue) ? null : numericValue;
+};
 
-const sliderValue = ref<[number, number]>([minFormatted.value, maxFormatted.value]);
+const start = ref<number | null>(normalize(props.valueStart));
+const end = ref<number | null>(normalize(props.valueEnd));
 
-watch([start, end], () => {
-  if ( !start.value && end.value ) {
-    setSliderValues(minFormatted.value, end.value);
-  } else if ( start.value && !end.value ) {
-    setSliderValues(start.value, maxFormatted.value);
-  } else if ( !start.value && !end.value ) {
-    setSliderValues(minFormatted.value, maxFormatted.value);
-  } else {
-    setSliderValues(start.value, end.value);
-  }
-})
+const sliderValue = ref<[number, number]>([
+  start.value ?? minFormatted.value, 
+  end.value ?? maxFormatted.value
+]);
 
-const updateFromSlider =
-    debounce((value: [number, number]) => {
-      start.value = value[0] === minFormatted.value ? null : value[0];
-      end.value = value[1] === maxFormatted.value ? null : value[1];
-    }, 500);
+function setSliderValues(s: number | null, e: number | null) {
+  sliderValue.value = [s ?? minFormatted.value, e ?? maxFormatted.value];
+}
 
-onMounted(() => {
-  updateStartFromProps();
-  updateEndFromProps();
+watch([start, end], () => {
+  setSliderValues(start.value, end.value);
+}, { immediate: true });
 
-  watch(() => props.valueStart, (value) => {
-    updateStartFromProps();
-  });
+const updateFromSlider = debounce((value: [number, number]) => {
+  start.value = value[0] === minFormatted.value ? null : value[0];
+  end.value = value[1] === maxFormatted.value ? null : value[1];
+}, 500);
 
-  watch(() => props.valueEnd, (value) => {
-    updateEndFromProps();
-  });
-})
+watch(() => props.valueStart, (newVal) => {
+  const v = normalize(newVal);
+  if (v !== start.value) start.value = v;
+});
 
-function updateStartFromProps() {
-  if (props.valueStart == start.value) {
-    return;
-  }
-  start.value = props.valueStart;
-  setSliderValues(start.value, end.value)
-}
+watch(() => props.valueEnd, (newVal) => {
+  const v = normalize(newVal);
+  if (v !== end.value) end.value = v;
+});
 
-function updateEndFromProps() {
-  if (props.valueEnd == end.value) {
-    return;
-  }
-  end.value = props.valueEnd;
-  setSliderValues(start.value, end.value)
-}
+watch(start, (newVal) => emit('update:valueStart', newVal));
+watch(end, (newVal) => emit('update:valueEnd', newVal));
 
-watch(start, () => {
-  emit('update:valueStart', start.value)
+watch([minFormatted, maxFormatted], () => {
+  setSliderValues(start.value, end.value);
 })
-
-watch(end, () => {
-  emit('update:valueEnd', end.value);
-})
-
-watch([minFormatted,maxFormatted], () => {
-  if ( !start.value && end.value ) {
-    setSliderValues(minFormatted.value, end.value);
-  } else if ( start.value && !end.value ) {
-    setSliderValues(start.value, maxFormatted.value);
-  } else if ( !start.value && !end.value ) {
-    setSliderValues(minFormatted.value, maxFormatted.value);
-  } else {
-    setSliderValues(start.value, end.value);
-  }
-})
-
-function setSliderValues(start: any, end: any) {
-  sliderValue.value = [start || minFormatted.value, end || maxFormatted.value];
-}
 </script>

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

@@ -372,7 +372,7 @@ import CallActionWrapper from '@/components/CallActionWrapper.vue'
 const coreStore = useCoreStore();
 const { t } = useI18n();
 const { alert, confirm } = useAdminforth();
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   page: number,
   resource: AdminForthResourceFrontend | null,
   rows: any[] | null,
@@ -389,7 +389,9 @@ const props = defineProps<{
   customActionIconsThreeDotsMenuItems?: AdminForthComponentDeclaration[]
   tableRowReplaceInjection?: AdminForthComponentDeclaration,
   isVirtualScrollEnabled: boolean
-}>();
+}>(), {
+  sort: () => []
+});
 
 //select between all rows or rows, that should be rendered in virtual scroll
 const rowsToRender = computed(() => {
@@ -582,7 +584,7 @@ async function onClick(e: any, row: any) {
 
 async function deleteRecord(row: any) {
   const data = await confirm({
-    message: t('Are you sure you want to delete this item?'),
+    title: t('Are you sure you want to delete this item?'),
     yes: t('Delete'),
     no: t('Cancel'),
   });

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

@@ -3,6 +3,7 @@ import { defineStore } from 'pinia'
 
  type ModalContentType = {
   title?: string;
+  guardMessage?: string;
   content?: string;
   contentHTML?: string;
   acceptText?: string;
@@ -13,6 +14,7 @@ import { defineStore } from 'pinia'
 export const useModalStore = defineStore('modal', () => {
   const modalContent = ref({
     title: 'title',
+    guardMessage: 'guardMessage',
     content: '',
     contentHTML: '',
     acceptText: 'acceptText',
@@ -32,7 +34,8 @@ export const useModalStore = defineStore('modal', () => {
   }
   function setModalContent(content: ModalContentType) {
     modalContent.value = {
-      title: content.title || 'title',
+      title: content.title || '',
+      guardMessage: content.guardMessage || '',
       content: content.content || '',
       contentHTML: content.contentHTML || '',
       acceptText: content.acceptText || 'acceptText',
@@ -43,6 +46,7 @@ export const useModalStore = defineStore('modal', () => {
     isOpened.value = false;
     modalContent.value = {
       title: 'title',
+      guardMessage: 'guardMessage',
       content: 'content',
       contentHTML: '',
       acceptText: 'acceptText',

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

@@ -153,6 +153,11 @@ export interface IExpressHttpServer extends IHttpServer {
   listen(port: number, callback: Function): void;
   listen(port: number, host: string, callback: Function): void;
 
+  /**
+   * Returns an internal HTTP origin for same-process/server API calls.
+   */
+  getInternalApiOrigin(): string | undefined;
+
   /**
    * Method (middleware) to wrap express endpoints with authorization check.
    * Adds adminUser to request object if user is authorized. Drops request with 401 status if user is not authorized.
@@ -2328,4 +2333,4 @@ export interface PluginsCommonOptions {
      * It is required if you want to log custom actions, otherwise it is optional.
     */
     id?: string;
-}
+}

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

@@ -160,6 +160,16 @@ export interface FrontendAPIInterface {
 }
 
 export type ConfirmParams = {
+    /**
+     * The title to display in the dialog
+     */
+    title?: string;
+
+    /**
+     * The message to display in the dialog as a warning that action is irreversible
+     */
+    guardMessage?: string;
+    
     /**
      * The message to display in the dialog
      */

package/dist/spa/src/utils/listUtils.ts

@@ -60,7 +60,7 @@ export async function startBulkAction(actionId: string, resource: AdminForthReso
 
   if (action?.confirm) {
     const confirmed = await confirm({
-      message: action.confirm,
+      title: action.confirm,
     });
     if (!confirmed) {
       return;

package/dist/spa/src/utils/utils.ts

@@ -6,7 +6,7 @@ import { useCoreStore } from '../stores/core';
 import { useUserStore } from '../stores/user';
 import { Dropdown } from 'flowbite';
 import adminforth, { useAdminforth } from '../adminforth';
-import sanitizeHtml  from 'sanitize-html'
+import DOMPurify  from 'dompurify'
 import debounce from 'debounce';
 import type { AdminForthActionFront, AdminForthResourceColumnInputCommon, AdminForthResourceFrontend, Predicate } from '@/types/Common';
 import { i18nInstance } from '../i18n'
@@ -337,26 +337,25 @@ export function humanifySize(size: number) {
 }
 
 export function protectAgainstXSS(value: string) {
-  return sanitizeHtml(value, {
-    allowedTags: [
-      "address", "article", "aside", "footer", "header", "h1", "h2", "h3", "h4",
-      "h5", "h6", "hgroup", "main", "nav", "section", "blockquote", "dd", "div",
-      "dl", "dt", "figcaption", "figure", "hr", "li", "main", "ol", "p", "pre",
-      "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn",
-      "em", "i", "kbd", "mark", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp",
-      "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "caption",
-      "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", 'img', 'video', 'source'
+  return DOMPurify.sanitize(value, {
+    ALLOWED_TAGS: [
+      "address","article","aside","footer","header","h1","h2","h3","h4",
+      "h5","h6","hgroup","main","nav","section","blockquote","dd","div",
+      "dl","dt","figcaption","figure","hr","li","ol","p","pre",
+      "ul","a","abbr","b","bdi","bdo","br","cite","code","data","dfn",
+      "em","i","kbd","mark","q","rb","rp","rt","rtc","ruby","s","samp",
+      "small","span","strong","sub","sup","time","u","var","wbr","caption",
+      "col","colgroup","table","tbody","td","tfoot","th","thead","tr",
+      "img","video","source"
     ],
-    allowedAttributes: {
-      'li': [ 'data-list' ],
-      'img': [ 'src', 'srcset', 'alt', 'title', 'width', 'height', 'loading' ],
-      'video': [ 'src', 'controls', 'autoplay', 'loop', 'muted', 'poster', 'width', 'height', 'autoplay', 'playsinline' ],
-      'source': [ 'src', 'type' ],
-      // Allow  markup on spans (classes & styles), and
-      // generic data/aria/style attributes on any element. (e.g. for KaTeX-related previews)
-      'span': [ 'class', 'style' ],
-      '*': [ 'data-*', 'aria-*', 'style' ]
-    },
+    ALLOWED_ATTR: [
+      "data-list",
+      "src","srcset","alt","title","width","height","loading",
+      "controls","autoplay","loop","muted","poster","playsinline","type",
+      "class","style"
+    ],
+    ALLOW_DATA_ATTR: true,
+    ALLOW_ARIA_ATTR: true
   });
 }
 
@@ -707,7 +706,16 @@ export function generateMessageHtmlForRecordChange(changedFields: Record<string,
   }).join('');
 
   const listHtml = items ? `<ul class="mt-2 list-disc list-inside">${items}</ul>` : '';
-  const messageHtml = `<div>${escapeHtml(t('There are unsaved changes. Are you sure you want to leave this page?'))}${listHtml}</div>`;
+  const messageHtml = `
+    <div class="flex flex-col gap-y-2 text-center">
+      <div class="text-gray-500 dark:text-gray-400">
+        ${listHtml}
+      </div>
+      <p class="font-medium text-gray-900 dark:text-white mt-4"> 
+        ${escapeHtml(t('Are you sure you want to leave this page?'))}
+      </p>
+    </div>
+  `;
   return messageHtml; 
 }
 
@@ -772,9 +780,11 @@ export async function onBeforeRouteLeaveCreateEditViewGuard(initialValues: any,
         generateMessageHtmlForRecordChange(changedFields, t);
 
       const answer = await confirm({
+        title: t('There are unsaved changes'),
+        guardMessage: t('Your changes will not be saved'),
         messageHtml,
-        yes: t('Yes'),
-        no: t('No'),
+        yes: t('Leave without saving'),
+        no: t('Stay and continue'),
       });
 
       return answer;

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

@@ -224,7 +224,7 @@ import { getCustomComponent, initThreeDotsDropdown, getList, startBulkAction } f
 import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
 import { Tooltip, Spinner } from '@/afcl'
 import type { AdminForthComponentDeclaration, AdminForthComponentDeclarationFull, AdminForthFilterOperators, AdminForthResourceColumnCommon } from '@/types/Common';
-
+import { useI18n } from 'vue-i18n';
 
 import {
   IconBanOutline,

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

@@ -310,7 +310,7 @@ const otherColumns = computed(() => {
 
 async function deleteRecord() {
   const data = await confirm({
-    message: t('Are you sure you want to delete this item?'),
+    title: t('Are you sure you want to delete this item?'),
     yes: t('Delete'),
     no: t('Cancel'),
   });

package/dist/types/Back.d.ts

@@ -124,6 +124,10 @@ export interface IExpressHttpServer extends IHttpServer {
      */
     listen(port: number, callback: Function): void;
     listen(port: number, host: string, callback: Function): void;
+    /**
+     * Returns an internal HTTP origin for same-process/server API calls.
+     */
+    getInternalApiOrigin(): string | undefined;
     /**
      * Method (middleware) to wrap express endpoints with authorization check.
      * Adds adminUser to request object if user is authorized. Drops request with 401 status if user is not authorized.