feat: allow to pass messageHtml to the adminforth.alert

https://web.tracklify.com/project/2b7ZVgE5/AdminForth/1280/cFz46RGr/is-it-possible-to-remove-this-

Author: yaroslav8765

adminforth/spa/src/adminforth.ts

@@ -132,6 +132,7 @@ class FrontendAPI implements FrontendAPIInterface {
     return new Promise((resolve, reject) => {
       this.modalStore.setModalContent({ 
         content: params.message, 
+        contentHTML: params.messageHtml,
         acceptText: params.yes || 'Yes',
         cancelText: params.no || 'Cancel' 
       })

adminforth/spa/src/components/AcceptModal.vue

@@ -14,6 +14,8 @@
                         <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="prose 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>

adminforth/spa/src/stores/modal.ts

@@ -4,6 +4,7 @@ import { defineStore } from 'pinia'
  type ModalContentType = {
   title?: string;
   content?: string;
+  contentHTML?: string;
   acceptText?: string;
   cancelText?: string;
  }
@@ -12,7 +13,8 @@ import { defineStore } from 'pinia'
 export const useModalStore = defineStore('modal', () => {
   const modalContent = ref({
     title: 'title',
-    content: 'content',
+    content: '',
+    contentHTML: '',
     acceptText: 'acceptText',
     cancelText: 'cancelText',
   });  
@@ -31,7 +33,8 @@ export const useModalStore = defineStore('modal', () => {
   function setModalContent(content: ModalContentType) {
     modalContent.value = {
       title: content.title || 'title',
-      content: content.content || 'content',
+      content: content.content || '',
+      contentHTML: content.contentHTML || '',
       acceptText: content.acceptText || 'acceptText',
       cancelText: content.cancelText || 'cancelText',
     };
@@ -41,6 +44,7 @@ export const useModalStore = defineStore('modal', () => {
     modalContent.value = {
       title: 'title',
       content: 'content',
+      contentHTML: '',
       acceptText: 'acceptText',
       cancelText: 'cancelText',
     };

adminforth/types/FrontendAPI.ts

@@ -159,6 +159,10 @@ export type ConfirmParams = {
      * The message to display in the dialog
      */
     message?: string;
+    /**
+     * Message to display in the dialog as HTML (can be used instead of message)
+     */
+    messageHtml?: string;
     /**
      * The text to display in the "accept" button
      */