adminforth 2.25.1 → 2.26.0-next.10

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

@@ -6,7 +6,8 @@
       focus:ring-4 focus:outline-none focus:ring-lightButtonFocusRing focus:ring-opacity-50 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-darkButtonFocusRing dark:text-darkButtonsText dark:border-darkButtonsBorder dark:hover:bg-darkButtonsHover dark:hover:border-darkButtonsBorderHover"
     :class="{
       'cursor-default opacity-50 pointer-events-none': props.disabled,
-      'active brightness-200 hover:brightness-150'  : props.active
+      'active brightness-200 hover:brightness-150'  : props.active,
+      'text-lightSecondaryContrast/70 bg-lightSecondary border-lightSecondaryContrast/30 dark:bg-darkSecondary hover:bg-lightSecondary/60 hover:border-lightSecondaryContrast/60 focus:ring-lightSecondary dark:focus:ring-darkSecondary/40 dark:text-darkSecondaryContrast dark:border-darkSecondaryContrast/40 dark:hover:bg-darkSecondary/60 dark:hover:border-darkSecondary/60': props.mode === 'secondary',
     }"
   >
     <svg v-if="props.loader"
@@ -18,10 +19,16 @@
 
 <script setup lang="ts">
 
-const props = defineProps({
-  loader: Boolean,
-  disabled: Boolean,
-  active: Boolean,
+const props = withDefaults(defineProps<{
+  loader?: boolean;
+  disabled?: boolean;
+  active?: boolean;
+  mode?: 'primary' | 'secondary';
+}>(), {
+  loader: false,
+  disabled: false,
+  active: false,
+  mode: 'primary'
 });
 
 </script>

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

@@ -1,124 +1,188 @@
 <template>
-  <div
-    v-if="$slots.trigger"
-    @click="modal?.show()" class="inline-flex items-center cursor-pointer"
+  <Modal 
+    ref="modalRef" 
+    v-bind="$attrs"
+    :closeByClickOutside="clickToCloseOutside || closeByClickOutside"
+    :closeByEsc="closeByEsc || closable"
+    :beforeCloseFunction="beforeCloseFunction"
+    :beforeOpenFunction="beforeOpenFunction"
+    :askForCloseConfirmation="askForCloseConfirmation"
+    :closeConfirmationText="closeConfirmationText"
+    :removeFromDomOnClose="removeFromDomOnClose"
   >
-    <slot name="trigger"></slot>
-  </div>
-  <Teleport to="body">
-    <div ref="modalEl" tabindex="-1" aria-hidden="true" class="[scrollbar-gutter:stable] hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-full max-h-full">
-      <div v-bind="$attrs" class="relative p-4 max-w-2xl max-h-full" :class="($attrs.class as string)?.includes('w-') ? '' : 'w-full'">
-        <!-- Modal content -->
-        <div class="relative bg-lightDialogBackgorund rounded-lg shadow-sm dark:bg-darkDialogBackgorund">
-          <!-- Modal header -->
-          <div
-            v-if="header"
-            class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-darkDialogBreakLine border-lightDialogBreakLine"
-          >
-            <h3 class="text-xl font-semibold text-lightDialogHeaderText dark:text-darkDialogHeaderText">
-              {{ header }}
-            </h3>
-            <button
-              v-if="headerCloseButton"
-              type="button"
-              class="text-lightDialogCloseButton bg-transparent hover:bg-lightDialogCloseButtonHoverBackground hover:text-lightDialogCloseButtonHover rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:text-darkDialogCloseButton dark:hover:bg-darkDialogCloseButtonHoverBackground dark:hover:text-darkDialogCloseButtonHover"
-              @click="tryToHideModal"
-            >
-              <svg class="w-3 h-3" aria-hidden="true" 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">Close modal</span>
-            </button>
-          </div>
-          <!-- Modal body -->
-          <div class="p-4 md:p-5 space-y-4 text-lightDialogBodyText dark:text-darkDialogBodyText">
-            <slot></slot>
-          </div>
-          <!-- Modal footer -->
-          <div
-            v-if="buttons.length"
-            class="flex items-center p-4 md:p-5 border-t border-lightDialogBreakLine rounded-b dark:border-darkDialogBreakLine"
-          >
-            <Button
-              v-for="(button, buttonIndex) in buttons"
-              :key="buttonIndex"
-              v-bind="button.options"
-              :class="{ 'ms-3': buttonIndex > 0 }"
-              @click="button.onclick(modal)"
-            >
-              {{ button.label }}
-            </Button>
-          </div>
-        </div>
-      </div>
-      <div>
-        <!-- Confirmation Modal -->
-        <div
-          v-if="showConfirmationOnClose"
-          class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-[60]"
-        >
-          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-sm w-full">
-            <h2 class="text-lg font-semibold mb-4 text-lightDialogHeaderText dark:text-darkDialogHeaderText">Confirm Close</h2>
-            <p class="mb-6 text-lightDialogBodyText dark:text-darkDialogBodyText">{{ props.closeConfirmationText }}</p>
-            <div class="flex justify-end">
-              <Button
-                class="me-3 !bg-gray-50 dark:!bg-gray-700 !text-lightDialogBodyText dark:!text-darkDialogBodyText hover:!bg-gray-100 dark:hover:!bg-gray-600 !border-gray-200 dark:!border-gray-600"
-                @click="showConfirmationOnClose = false"
-              >
-                Cancel
-              </Button>
-              <Button
-                @click="
-                  showConfirmationOnClose = false;
-                  modal?.hide();
-                "
-              >
-                Confirm
-              </Button>
-            </div>
-          </div>
-        </div>
-      </div>
+    <template v-if="$slots.trigger" #trigger>
+      <slot name="trigger"></slot>
+    </template>
+
+    <!-- Modal header -->
+    <div
+      v-if="header"
+      class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-darkDialogBreakLine border-lightDialogBreakLine"
+    >
+      <h3 class="text-xl font-semibold text-lightDialogHeaderText dark:text-darkDialogHeaderText">
+        {{ header }}
+      </h3>
+      <button
+        v-if="headerCloseButton"
+        type="button"
+        class="text-lightDialogCloseButton bg-transparent hover:bg-lightDialogCloseButtonHoverBackground hover:text-lightDialogCloseButtonHover rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:text-darkDialogCloseButton dark:hover:bg-darkDialogCloseButtonHoverBackground dark:hover:text-darkDialogCloseButtonHover"
+        @click="tryToHideModal"
+      >
+        <svg class="w-3 h-3" aria-hidden="true" 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>
+    <!-- Modal body -->
+    <div class="p-4 md:p-5 text-lightDialogBodyText dark:text-darkDialogBodyText">
+      <slot></slot>
+    </div>
+    <!-- Modal footer -->
+    <div
+      v-if="buttons.length"
+      class="flex items-center p-4 md:p-5 border-t border-lightDialogBreakLine rounded-b dark:border-darkDialogBreakLine"
+    >
+      <Button
+        v-for="(button, buttonIndex) in buttons"
+        :key="buttonIndex"
+        v-bind="button.options"
+        :class="{ 'ms-3': buttonIndex > 0 }"
+        @click="button.onclick(dialog)"
+      >
+        {{ button.label }}
+      </Button>
     </div>
-  </Teleport>
+  </Modal>
 </template>
 
 <script setup lang="ts">
 import Button from "./Button.vue";
-import { ref, onMounted, nextTick, onUnmounted, computed, type Ref } from 'vue';
-import { Modal } from 'flowbite';
+import { ref, computed, type Ref } from 'vue';
+import { Modal } from '@/afcl'
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
+
+interface IDialogInsideButtonClickHandler {
+  hide: () => void
+}
 
-const modalEl = ref(null);
-const modal: Ref<Modal|null> = ref(null);
 
 interface DialogButton {
   label: string
-  onclick: (dialog: any) => void
+  onclick: (dialog: IDialogInsideButtonClickHandler) => void
   options?: Record<string, any> 
 }
 
+
 interface DialogProps {
+  /**
+   * The header text to display in the dialog. If not provided, no header will be displayed.
+   */
   header?: string
+
+  /**
+   * If true, a close button will be displayed in the dialog header. Default is true.
+   */
   headerCloseButton?: boolean
+
+  /**
+   * An array of buttons to display in the dialog footer. 
+   */
   buttons?: DialogButton[]
+
+  /**
+   * If true, clicking outside the dialog will close it. Default is true.
+   * 
+   * @deprecated Use `closeByClickOutside` instead
+   */
   clickToCloseOutside?: boolean
+
+  /**
+   * If true, pressing the Esc key will close the dialog. Default is true.
+   */
+  closeByEsc?: boolean
+
+  /**
+   * If true, clicking outside the dialog will close it. Default is true.
+   */
+  closeByClickOutside?: boolean
+
+  /**
+   * Function that will be called before the dialog is closed. 
+   */
   beforeCloseFunction?: (() => void | Promise<void>) | null
+
+  /**
+   * Function that will be called before the dialog is opened. 
+   */
   beforeOpenFunction?: (() => void | Promise<void>) | null
+
+  /**
+   * Disables close on Ecs button
+   * 
+   * @deprecated Use `closeByEsc` or  instead
+   */
   closable?: boolean
+
+  /**
+   * If true, the dialog will ask for confirmation before closing. Default is false.
+   */
   askForCloseConfirmation?: boolean
+
+  /**
+   * The text to display in the close confirmation dialog. Default is "Are you sure you want to close this dialog?".
+   */
   closeConfirmationText?: string
+
+  /**
+   * If true, the dialog will be removed from the DOM when closed. Default is false.
+   */
+  removeFromDomOnClose?: boolean
 }
 
+
+
+
+
+
+/**********  for the backward compatibility  ***************/
+class Dialog implements IDialogInsideButtonClickHandler {
+  hide: () => void
+  constructor( hide: () => void ) {
+    this.hide = hide;
+  }
+}
+const dialog: Ref<Dialog> = ref(
+  new Dialog(
+    () => {
+      if (dialog.value) {
+        tryToHideModal();
+      }
+    }
+  )
+);
+/*************************************************************/
+
+
+
+const modalRef = ref();
+
 const props = withDefaults(defineProps<DialogProps>(), {
   header: '',
   headerCloseButton: true,
   buttons: () => [],
-  clickToCloseOutside: true,
+  clickToCloseOutside: false,
+  closeByEsc: true,
+  closeByClickOutside: true,
   beforeCloseFunction: null,
   beforeOpenFunction: null,
-  closable: true,
+  closable: false,
   askForCloseConfirmation: false,
   closeConfirmationText: 'Are you sure you want to close this dialog?',
+  removeFromDomOnClose: false,
 })
 
 const buttons = computed<DialogButton[]>(() => {
@@ -129,51 +193,20 @@ const buttons = computed<DialogButton[]>(() => {
     {
       label: 'Close',
       onclick: (dialog: any) => {
-        if (!props.askForCloseConfirmation) {
-          dialog.hide();
-        } else {
-          showConfirmationOnClose.value = true;
-        }
+        tryToHideModal();
       },
       options: {}
     }
   ];
 });
 
-const showConfirmationOnClose = ref(false);
-onMounted(async () => {
-  //await one tick when all is mounted
-  await nextTick();
-  modal.value = new Modal(
-    modalEl.value,
-    {
-      closable: props.closable,
-      backdrop: props.clickToCloseOutside ? 'dynamic' : 'static',
-      onHide: async () => {
-        if (props.beforeCloseFunction) {
-          await props.beforeCloseFunction();
-        }
-      },
-      onShow: async () => {
-        if (props.beforeOpenFunction) {
-          await props.beforeOpenFunction();
-        }
-      },
-    }
-  );
-})
-
-onUnmounted(() => {
-  //destroy tooltip
-  modal.value?.destroy();
-})
 
 function open() {
-  modal.value?.show();
+  modalRef.value.open();
 }
 
 function close() {
-  modal.value?.hide();
+  modalRef.value.hide();
 }
 
 defineExpose({
@@ -183,11 +216,7 @@ defineExpose({
 })
 
 function tryToHideModal() {
-  if (!props.askForCloseConfirmation ) {
-    modal.value?.hide();
-  } else {
-    showConfirmationOnClose.value = true;
-  }
+  modalRef.value?.tryToHideModal();
 }
 
 

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

@@ -6,12 +6,12 @@
     <slot name="trigger"></slot>
   </div>
   <Teleport to="body">
-      <div v-show="isModalOpen" v-if="!removeFromDom" @click="backdropClick" v-bind="$attrs" class="bg-black/50 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-1rem max-h-full flex" >
+      <div v-show="isModalOpen" v-if="!removeFromDom" @click="backdropClick" class="bg-black/50 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full h-full md:inset-0 h-1rem max-h-full flex" >
         <!-- Modal content -->
-        <div class="relative bg-lightDialogBackgorund rounded-lg shadow-sm dark:bg-darkDialogBackgorund">
+        <div v-bind="$attrs" class="relative bg-lightDialogBackgorund rounded-lg shadow-sm dark:bg-darkDialogBackgorund">
 
           <!-- Modal body -->
-          <div class="p-4 md:p-5 space-y-4 text-lightDialogBodyText dark:text-darkDialogBodyText">
+          <div class="text-lightDialogBodyText dark:text-darkDialogBodyText">
             <slot ></slot>
           </div>
          
@@ -57,7 +57,8 @@ const removeFromDom = computed(() => {
 })
 
 interface DialogProps {
-  clickToCloseOutside?: boolean
+  closeByClickOutside?: boolean
+  closeByEsc?: boolean
   beforeCloseFunction?: (() => void | Promise<void>) | null
   beforeOpenFunction?: (() => void | Promise<void>) | null
   askForCloseConfirmation?: boolean
@@ -66,7 +67,8 @@ interface DialogProps {
 }
 
 const props = withDefaults(defineProps<DialogProps>(), {
-  clickToCloseOutside: true,
+  closeByClickOutside: true,
+  closeByEsc: true,
   beforeCloseFunction: null,
   beforeOpenFunction: null,
   askForCloseConfirmation: false,
@@ -78,12 +80,16 @@ const showConfirmationOnClose = ref(false);
 
 
 async function open() {
-  await props.beforeOpenFunction?.();
+  if (props.beforeOpenFunction) {
+    await props.beforeOpenFunction?.();
+  }
   isModalOpen.value = true;
 }
 
 async function close() {
-  await props.beforeCloseFunction?.();
+  if (props.beforeCloseFunction) {
+    await props.beforeCloseFunction?.();
+  }
   isModalOpen.value = false;
 }
 
@@ -109,8 +115,25 @@ function toggleModal() {
   }
 }
 
+function onEsc(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    if (props.closeByEsc) {
+      tryToHideModal();
+    }
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', onEsc)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', onEsc)
+})
+
+
 function backdropClick(e: MouseEvent) {
-  if (props.clickToCloseOutside && e.target === e.currentTarget) {
+  if (props.closeByClickOutside && e.target === e.currentTarget) {
     tryToHideModal();
   }
 }

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

@@ -13,7 +13,7 @@
         class="block w-full pl-3 pr-10 py-2.5 border border-lightDropownButtonsBorder rounded-md leading-5 bg-lightDropdownButtonsBackground 
         placeholder-lightDropdownButtonsPlaceholderText text-lightDropdownButtonsText sm:text-sm transition duration-150 ease-in-out dark:bg-darkDropdownButtonsBackground dark:border-darkDropdownButtonsBorder dark:placeholder-darkDropdownButtonsPlaceholderText
         dark:text-darkDropdownButtonsText focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
-        :class="{'cursor-pointer': searchDisabled}"
+        :class="[{'cursor-pointer': searchDisabled}, classesForInput]"
         autocomplete="off" data-custom="no-autofill"
         :placeholder="
           selectedItems.length && !multiple ? '' :  (showDropdown ? $t('Search') : placeholder || $t('Select...')) 
@@ -122,7 +122,7 @@ import { useElementSize } from '@vueuse/core'
 const props = defineProps({
   options: Array,
   modelValue: {
-    type: Array as PropType<(string | number)[]>,
+    type: Array as PropType<(string | number)[] | (string | number)>,
     default: () => [],
   },
   multiple: {
@@ -153,6 +153,10 @@ const props = defineProps({
     type: Number,
     default: 300,
   },
+  classesForInput: {
+    type: String,
+    default: '',
+  },
 });
 
 const emit = defineEmits(['update:modelValue', 'scroll-near-end', 'search']);

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

@@ -1,41 +1,40 @@
 <template>
   <Teleport to="body">
-  <div ref="modalEl" tabindex="-1" aria-hidden="true" class="hidden fixed inset-0 z-[110] w-full h-full overflow-y-auto overflow-x-hidden flex items-center justify-center">
-    <div class="relative p-4 w-full max-w-md max-h-full" >
-            <div class="afcl-confirmation-container relative bg-lightAcceptModalBackground rounded-lg shadow dark:bg-darkAcceptModalBackground dark:shadow-black">
-        <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">
-                        <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>
-            </div>
+    <Modal 
+      ref="modalRef"
+      :beforeCloseFunction="()=>{modalStore.onAcceptFunction(false);modalStore.isOpened=false}"
+    >
+      <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">
+              <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>
-    </div>
-
-</Teleport>
+      </div>
+    </Modal>
+  </Teleport>
 </template>
 
 <script setup lang="ts">
 import { watch, onMounted, nextTick, ref } from 'vue';
 import { useModalStore } from '@/stores/modal';
-import { Modal } from 'flowbite';
+import { Modal } from '@/afcl';
 
+const modalRef = ref();
 const modalStore = useModalStore();
-const modalEl = ref(null);
-const modal = ref(null);
 
 watch( () => modalStore.isOpened, (newVal) => {
     if (newVal) {
@@ -46,35 +45,14 @@ watch( () => modalStore.isOpened, (newVal) => {
   }
 );
 
-onMounted(async () => {
-  await nextTick();
-  modal.value = new Modal(
-    modalEl.value,
-    {
-      closable: true,
-      backdrop: 'static',
-      backdropClasses: "bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-[100]"
-    }
-  );
-})
+
 
 function open() {
-  modal.value?.show();
+  modalRef.value.open();
 }
 
 function close() {
-  modal.value?.hide();
+  modalRef.value.close();
 }
 
-</script>
-
-<style scoped>
-.modal {
-  position: fixed;
-  z-index: 999;
-  top: 20%;
-  left: 50%;
-  width: 300px;
-  margin-left: -150px;
-}
-</style>
+</script>

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

@@ -1,15 +1,14 @@
 <template>
   <RouterLink 
-      :to="{name: item.resourceId ? 'resource-list' : item.path, params: item.resourceId ? { resourceId: item.resourceId }: {}}" 
+      :to="item.url || { name: item.resourceId ? 'resource-list' : item.path, params: item.resourceId ? { resourceId: item.resourceId }: {}}" 
+      :target="item.isOpenInNewTab ? '_blank' : '_self'"
       class="af-menu-link flex group relative items-center w-full py-2 text-lightSidebarText dark:text-darkSidebarText rounded-default transition-all duration-200 ease-in-out" 
       :class="{ 
         'hover:bg-lightSidebarItemHover hover:text-lightSidebarTextHover dark:hover:bg-darkSidebarItemHover dark:hover:text-darkSidebarTextHover active:bg-lightSidebarActive dark:active:bg-darkSidebarHover': !['divider', 'gap', 'heading'].includes(item.type),
         'pl-6 pr-3.5': (isChild && !isSidebarIconOnly && !isSidebarHovering) || (isChild && isSidebarIconOnly && isSidebarHovering),
         'px-3.5 ': !isChild || (isSidebarIconOnly && !isSidebarHovering),
         'max-w-12': isSidebarIconOnly && !isSidebarHovering,
-        'bg-lightSidebarItemActive dark:bg-darkSidebarItemActive': item.resourceId ?
-        ($route.params.resourceId === item.resourceId && $route.name === 'resource-list') :
-        ($route.name === item.path)
+        'bg-lightSidebarItemActive dark:bg-darkSidebarItemActive': isItemActive(item)
       }"
   >
     <component v-if="item.icon" :is="getIcon(item.icon)" 
@@ -61,6 +60,21 @@ import { Tooltip } from '@/afcl';
 import { ref, watch, computed } from 'vue';
 import { useCoreStore } from '@/stores/core';
 import { IconFileImageOutline } from '@iconify-prerendered/vue-flowbite';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+
+const isItemActive = (item: any) => {
+  if (item.url) {
+    return route.fullPath === item.url;
+  }
+
+  if (item.resourceId) {
+    return route.params.resourceId === item.resourceId && route.name === 'resource-list';
+  }
+
+  return route.name === item.path;
+};
 
 const props = defineProps(['item', 'isChild', 'isSidebarIconOnly', 'isSidebarHovering']);