adminforth 2.71.0 → 2.71.1-next.1

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

@@ -7,7 +7,7 @@
     :class="{
       'cursor-default opacity-50 pointer-events-none': props.disabled,
       '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-white/60': props.mode === 'secondary',
+      '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-white/60': currentVariant === 'secondary',
     }"
   >
     <Spinner v-if="props.loader" class="w-4 h-4 text-lightButtonsText dark:text-darkButtonsText fill-lightButtonsBackground dark:fill-darkPrimary" />
@@ -17,17 +17,22 @@
 
 <script setup lang="ts">
 import { Spinner } from '@/afcl';
+import { computed } from 'vue';
 
 const props = withDefaults(defineProps<{
   loader?: boolean;
   disabled?: boolean;
   active?: boolean;
+  variant?: 'primary' | 'secondary';
+  /** @deprecated use variant instead of mode */
   mode?: 'primary' | 'secondary';
 }>(), {
   loader: false,
   disabled: false,
   active: false,
-  mode: 'primary'
 });
 
+// mode is deprecated, but we still want to support it for backward compatibility,
+// so we check both variant and mode props
+const currentVariant = computed(() => props.variant ?? props.mode ?? 'primary');
 </script>

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

@@ -5,6 +5,7 @@
     :closeByClickOutside="clickToCloseOutside || closeByClickOutside"
     :closeByEsc="closeByEsc || closable"
     :beforeCloseFunction="beforeCloseFunction"
+    :beforeCancelFunction="beforeCancelFunction" 
     :beforeOpenFunction="beforeOpenFunction"
     :askForCloseConfirmation="askForCloseConfirmation"
     :closeConfirmationText="closeConfirmationText"
@@ -26,7 +27,7 @@
         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"
+        @click="tryToCancelModal"
       >
         <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"/>
@@ -118,10 +119,15 @@ function close() {
   modalRef.value.close();
 }
 
+function tryToCancelModal() {
+  modalRef.value?.cancel();
+}
+
 defineExpose({
   open: open,
   close: close,
   tryToHideModal: tryToHideModal,
+  tryToCancelModal: tryToCancelModal,
 })
 
 function tryToHideModal() {
@@ -171,6 +177,11 @@ interface DialogProps {
    */
   beforeOpenFunction?: (() => void | Promise<void>) | null
 
+  /**
+  * Function that will be called before the dialog is canceled. 
+  */
+  beforeCancelFunction?: (() => void | Promise<void | boolean>) | null
+
   /**
    * Disables close on Ecs button
    * 
@@ -201,19 +212,21 @@ interface DialogProps {
 
 /**********  for the backward compatibility  ***************/
 class Dialog implements IDialogInsideButtonClickHandler {
-  hide: () => void
-  constructor( hide: () => void ) {
-    this.hide = hide;
+  hide: (isCancel?: boolean) => void
+  constructor(hideFn: (isCancel?: boolean) => void) {
+    this.hide = hideFn;
   }
 }
 const dialog: Ref<Dialog> = ref(
-  new Dialog(
-    () => {
-      if (dialog.value) {
-        tryToHideModal();
+  new Dialog((isCancel = false) => {
+    if (dialog.value) {
+      if (isCancel) {
+        modalRef.value?.cancel();
+      } else {
+        modalRef.value?.close();
       }
     }
-  )
+  })
 );
 /*************************************************************/
 

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

@@ -70,6 +70,7 @@ interface DialogProps {
   closeByEsc?: boolean
   beforeCloseFunction?: (() => void | Promise<void | boolean>) | null
   beforeOpenFunction?: (() => void | Promise<void>) | null
+  beforeCancelFunction?: (() => void | Promise<void | boolean>) | null
   askForCloseConfirmation?: boolean
   closeConfirmationText?: string
   removeFromDomOnClose?: boolean
@@ -82,6 +83,7 @@ const props = withDefaults(defineProps<DialogProps>(), {
   closeByEsc: true,
   beforeCloseFunction: null,
   beforeOpenFunction: null,
+  beforeCancelFunction: null,
   askForCloseConfirmation: false,
   closeConfirmationText: 'Are you sure you want to close this dialog?',
   removeFromDomOnClose: false,
@@ -109,6 +111,14 @@ async function close() {
   isModalOpen.value = false;
 }
 
+async function cancel() {
+  if (props.beforeCancelFunction) {
+    const shouldCancel = await props.beforeCancelFunction?.();
+    if (shouldCancel === false) return;
+  }
+  isModalOpen.value = false;
+}
+
 defineOptions({
   inheritAttrs: false,
 })
@@ -116,12 +126,17 @@ defineOptions({
 defineExpose({
   open: open,
   close: close,
+  cancel: cancel,
   tryToHideModal: tryToHideModal,
 })
 
-function tryToHideModal() {
-  if (!props.askForCloseConfirmation ) {
-    close();
+function tryToHideModal(isCancelAction = false) {
+  if (!props.askForCloseConfirmation) {
+    if (isCancelAction) {
+      cancel();
+    } else {
+      close();
+    }
   } else {
     showConfirmationOnClose.value = true;
   }
@@ -136,10 +151,8 @@ function toggleModal() {
 }
 
 function onEsc(event: KeyboardEvent) {
-  if (event.key === 'Escape') {
-    if (props.closeByEsc) {
-      tryToHideModal();
-    }
+  if (event.key === 'Escape' && props.closeByEsc) {
+    tryToHideModal(true);
   }
 }
 
@@ -154,7 +167,7 @@ onUnmounted(() => {
 
 function backdropClick(e: MouseEvent) {
   if (props.closeByClickOutside && e.target === e.currentTarget) {
-    tryToHideModal();
+    tryToHideModal(true);
   }
 }
 

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

@@ -5,7 +5,7 @@
       class="border border-gray-300 dark:border-gray-700 dark:border-opacity-0 border-opacity-0 hover:border-opacity-100 dark:hover:border-opacity-100 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer"
       @click="toggleMenu"
     >
-      <IconDotsHorizontalOutline class="w-6 h-6 text-lightPrimary dark:text-darkPrimary" />
+      <IconDotsHorizontalOutline class="w-6 h-6 text-lightPrimary dark:text-darkPrimary dark:brightness-150" />
     </div>
     <teleport to="body">
       <div
@@ -70,7 +70,7 @@
                 <component
                   v-if="action.icon"
                   :is="getIcon(action.icon)"
-                  class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"
+                  class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary dark:brightness-200"
                 />
                 {{ $t(action.name) }}
               </component>               

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

@@ -216,7 +216,7 @@
                         <component
                           v-if="action.icon && !actionLoadingStates[`${action.id}_${row._primaryKeyValue}`]"
                           :is="getIcon(action.icon)"
-                          class="w-6 h-6 text-lightPrimary dark:text-darkPrimary"
+                          class="w-6 h-6 text-lightPrimary dark:text-darkPrimary dark:brightness-150"
                         />
                         <Spinner
                           v-if="actionLoadingStates[`${action.id}_${row._primaryKeyValue}`]"

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

@@ -59,7 +59,7 @@
                     <component 
                       v-if="action.icon && !actionLoadingStates[action.id!]" 
                       :is="getIcon(action.icon)" 
-                      class="w-4 h-4 text-lightPrimary dark:text-darkPrimary"
+                      class="w-4 h-4 text-lightPrimary dark:text-darkPrimary dark:brightness-200"
                     />
                     <Spinner
                       v-if="actionLoadingStates[action.id!]"
@@ -83,7 +83,7 @@
                 <component 
                   v-if="action.icon" 
                   :is="getIcon(action.icon)" 
-                  class="w-4 h-4 text-lightPrimary dark:text-darkPrimary"
+                  class="w-4 h-4 text-lightPrimary dark:text-darkPrimary dark:brightness-200"
                 />
                 {{ action.label }}
               </div>

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

@@ -35,7 +35,7 @@
         @click="()=>{checkboxes = []}"
         v-if="checkboxes.length"
         data-tooltip-target="tooltip-remove-all"
-        class="flex gap-1  items-center py-1 px-3 me-2 text-sm font-medium text-lightListViewButtonText af-button-shadow 
+        class="flex gap-1  items-center py-1 px-3 text-sm font-medium text-lightListViewButtonText af-button-shadow 
           focus:outline-none bg-lightListViewButtonBackground rounded border border-lightListViewButtonBorder h-[2.125rem]
           hover:bg-lightListViewButtonBackgroundHover hover:text-lightListViewButtonTextHover focus:z-10 focus:ring-4 
           focus:ring-lightListViewButtonFocusRing dark:focus:ring-darkListViewButtonFocusRing 
@@ -125,7 +125,7 @@
       </RouterLink>
 
       <button
-        class="af-filter-button flex gap-1 items-center py-1 h-[2.125rem] px-3 me-2 af-button-shadow text-sm font-medium 
+        class="af-filter-button flex gap-1 items-center py-1 h-[2.125rem] px-3 af-button-shadow text-sm font-medium 
           text-lightListViewButtonText transition-all focus:outline-none bg-lightListViewButtonBackground rounded border 
           border-lightListViewButtonBorder hover:bg-lightListViewButtonBackgroundHover hover:text-lightListViewButtonTextHover 
           focus:z-10 focus:ring-4 focus:ring-lightListViewButtonFocusRing dark:focus:ring-darkListViewButtonFocusRing 

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

@@ -27,7 +27,7 @@
               <component 
                 v-if="action.icon && !actionLoadingStates[action.id!]" 
                 :is="getIcon(action.icon)" 
-                class="w-4 h-4 me-2 text-lightPrimary dark:text-darkPrimary"
+                class="w-4 h-4 me-2 text-lightPrimary dark:text-darkPrimary dark:brightness-200"
               />
               <Spinner
                 v-if="actionLoadingStates[action.id!]"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "2.71.0",
+  "version": "2.71.1-next.1",
   "description": "OpenSource Agent-Native forth-generation admin panel",
   "keywords": [
     "adminforth",