adminforth 2.23.0 → 2.25.0-next.1

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

@@ -0,0 +1,137 @@
+<template>
+  <div
+    v-if="$slots.trigger"
+    @click="toggleModal()" class="inline-flex items-center cursor-pointer w-full"
+  >
+    <slot name="trigger"></slot>
+  </div>
+  <Teleport to="body">
+      <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 v-bind="$attrs" class="relative bg-lightDialogBackgorund rounded-lg shadow-sm dark:bg-darkDialogBackgorund">
+
+          <!-- Modal body -->
+          <div class="text-lightDialogBodyText dark:text-darkDialogBodyText">
+            <slot ></slot>
+          </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;
+                    close();
+                  "
+                >
+                  Confirm
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import Button from "./Button.vue";
+import { ref, onMounted, nextTick, onUnmounted, computed, type Ref } from 'vue';
+
+const isModalOpen = ref(false);
+
+const removeFromDom = computed(() => {
+  return props.removeFromDomOnClose && !isModalOpen.value;
+})
+
+interface DialogProps {
+  closeByClickOutside?: boolean
+  closeByEsc?: boolean
+  beforeCloseFunction?: (() => void | Promise<void>) | null
+  beforeOpenFunction?: (() => void | Promise<void>) | null
+  askForCloseConfirmation?: boolean
+  closeConfirmationText?: string
+  removeFromDomOnClose?: boolean
+}
+
+const props = withDefaults(defineProps<DialogProps>(), {
+  closeByClickOutside: true,
+  closeByEsc: true,
+  beforeCloseFunction: null,
+  beforeOpenFunction: null,
+  askForCloseConfirmation: false,
+  closeConfirmationText: 'Are you sure you want to close this dialog?',
+  removeFromDomOnClose: false,
+})
+
+const showConfirmationOnClose = ref(false);
+
+
+async function open() {
+  await props.beforeOpenFunction?.();
+  isModalOpen.value = true;
+}
+
+async function close() {
+  await props.beforeCloseFunction?.();
+  isModalOpen.value = false;
+}
+
+defineExpose({
+  open: open,
+  close: close,
+  tryToHideModal: tryToHideModal,
+})
+
+function tryToHideModal() {
+  if (!props.askForCloseConfirmation ) {
+    close();
+  } else {
+    showConfirmationOnClose.value = true;
+  }
+}
+
+function toggleModal() {
+  if (isModalOpen.value) {
+    tryToHideModal();
+  } else {
+    open();
+  }
+}
+
+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.closeByClickOutside && e.target === e.currentTarget) {
+    tryToHideModal();
+  }
+}
+
+</script>

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

@@ -1,14 +1,17 @@
 <template>
-  <div class="relative mt-4 lg:mt-10 w-full max-w-[700px] bg-lightProgressBarUnfilledColor rounded-full h-2.5 dark:bg-darkProgressBarUnfilledColor">
-    <span class="absolute -top-6 left-0 text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ leftLabel }}</span>
-    <span class="absolute -top-6 right-0 text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ rightLabel }}</span>
+  <div class="relative w-full bg-lightProgressBarUnfilledColor rounded-full h-2.5 dark:bg-darkProgressBarUnfilledColor" :class="props.height ? `h-${props.height}` : ''">
+    <span v-if="leftLabel" class="absolute -top-6 left-0 text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ leftLabel }}</span>
+    <span v-if="rightLabel" class="absolute -top-6 right-0 text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ rightLabel }}</span>
     <div 
       class="bg-lightProgressBarFilledColor dark:bg-darkProgressBarFilledColor h-2.5 rounded-full transition-all duration-300 ease-in-out"
+      :class="{ 'progress-bar': showAnimation, [`h-${props.height}`]: props.height }"  
       :style="{ width: `${percentage}%` }"
     ></div>
-    <span v-if="showValues" class="absolute top-4 left-0 text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ formatValue(minValue) }}</span>
-    <span v-if="showProgress" class="absolute top-4 right-1/2 translate-x-1/2 text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ progressText }}</span>
-    <span v-if="showValues" class="absolute top-4 right-0 text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ formatValue(maxValue) }}</span>
+    <div v-if="showValues || showProgress" class="flex justify-between mt-2">
+      <span v-if="showValues" class="text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ formatValue(minValue) }}</span>
+      <span v-if="showProgress" class="text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ progressText }}</span>
+      <span v-if="showValues" class="text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ formatValue(maxValue) }}</span>
+    </div>
   </div>
 </template>
 
@@ -26,6 +29,8 @@ interface Props {
   showLabels?: boolean
   showValues?: boolean
   showProgress?: boolean
+  showAnimation?: boolean
+  height?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -53,3 +58,34 @@ const formatValue = (value: number): string => {
   return formatter(value)
 }
 </script>
+
+
+<style scoped>
+.progress-bar {
+  position: relative;
+  overflow: hidden;
+}
+
+.progress-bar::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  width: 100%;
+
+  background: linear-gradient(
+    -45deg,
+    transparent 35%,
+    rgba(255,255,255,0.4),
+    transparent 65%
+  );
+
+  transform: translateX(-100%);
+  animation: progress-slide 2s linear infinite;
+}
+
+@keyframes progress-slide {
+  100% {
+    transform: translateX(100%);
+  }
+}
+</style>

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

@@ -0,0 +1,136 @@
+<template>
+  <div class="afcl-treemap -mb-2" ref="chart"></div>
+</template>
+
+<script setup lang="ts">
+import ApexCharts, { type ApexOptions } from 'apexcharts';
+import { ref, type Ref, watch, computed, onUnmounted } from 'vue';
+
+const chart: Ref<HTMLDivElement | null> = ref(null);
+
+const props = defineProps<{
+  data: {
+    x: string,
+    [key: string]: any,
+  }[],
+  series: {
+    name: string,
+    fieldName: string,
+  }[],
+  options?: ApexOptions,
+}>();
+
+const optionsBase: ApexOptions = {
+  chart: {
+    height: 350,
+    type: 'treemap',
+    fontFamily: 'Inter, sans-serif',
+    toolbar: {
+      show: false,
+    },
+  },
+  legend: {
+    show: false,
+  },
+  dataLabels: {
+    enabled: true,
+    style: {
+      fontFamily: 'Inter, sans-serif',
+      colors: ['#FFFFFF'],
+    },
+  },
+  plotOptions: {
+    treemap: {
+      distributed: true,
+      enableShades: false,
+    },
+  },
+};
+
+const options = computed(() => {
+  if (props.data?.length > 0) {
+    props.series.forEach((s) => {
+      if (props.data[0][s.fieldName] === undefined) {
+        throw new Error(
+          `Field ${s.fieldName} not found even in first data point ${JSON.stringify(props.data[0])}, something is wrong`,
+        );
+      }
+    });
+  }
+
+  const nextOptions: ApexOptions = {
+    ...optionsBase,
+    series: props.series.map((s) => ({
+      name: s.name,
+      data: (props.data ?? []).map((item: any) => {
+        const { x, y: _ignoredY, ...rest } = item ?? {};
+        return {
+          x,
+          y: item?.[s.fieldName],
+          ...rest,
+        };
+      }),
+    })),
+  };
+
+  function mergeOptions(target: any, source: any) {
+    if (!source) {
+      return;
+    }
+    for (const key in source) {
+      if (typeof source[key] === 'object' && !Array.isArray(source[key])) {
+        if (!target[key]) {
+          target[key] = {};
+        }
+        mergeOptions(target[key], source[key]);
+      } else {
+        target[key] = source[key];
+      }
+    }
+  }
+
+  mergeOptions(nextOptions, props.options);
+  return nextOptions;
+});
+
+let apexChart: ApexCharts | null = null;
+
+watch(() => [options.value, chart.value], (value) => {
+  if (!value || !chart.value) {
+    return;
+  }
+
+  if (apexChart) {
+    apexChart.updateOptions(options.value);
+  } else {
+    apexChart = new ApexCharts(chart.value, options.value);
+    apexChart.render();
+  }
+});
+
+onUnmounted(() => {
+  if (apexChart) {
+    apexChart.destroy();
+  }
+});
+</script>
+
+<style lang="scss">
+:root {
+  --afcl-treemap-text: #FFFFFF;
+}
+
+[data-theme='dark'] {
+  --afcl-treemap-text: #FFFFFF;
+}
+
+.afcl-treemap {
+  .apexcharts-datalabel {
+    fill: var(--afcl-treemap-text);
+  }
+
+  .apexcharts-legend-text {
+    color: var(--afcl-treemap-text) !important;
+  }
+}
+</style>