adminforth 2.70.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/dist/spa/src/websocket.ts

@@ -1,5 +1,13 @@
 
-const subscriptions: { [topic: string]: ((data: any) => void)[] } = {};
+type WebsocketCallback = (data: any) => void;
+type Unsubscribe = () => void;
+type Subscription = {
+  id: number;
+  callback: WebsocketCallback;
+};
+
+const subscriptions: { [topic: string]: Subscription[] } = {};
+let nextSubscriptionId = 1;
 
 interface ExtendedWebSocket extends WebSocket {
   connected?: boolean;
@@ -65,8 +73,8 @@ async function connect () {
       const topic = message.topic;
       const data = message.data;
       if (subscriptions[topic]) {
-        for (const callback of subscriptions[topic]) {
-          callback(data);
+        for (const subscription of subscriptions[topic]) {
+          subscription.callback(data);
         }
       }
     }
@@ -104,19 +112,49 @@ setInterval(() => {
 }, 10_000);
 
 
+function unsubscribeSubscription(topic: string, subscriptionId: number): void {
+  if (!subscriptions[topic]) {
+    return;
+  }
+
+  subscriptions[topic] = subscriptions[topic].filter((subscription) => subscription.id !== subscriptionId);
+  if (subscriptions[topic].length > 0) {
+    return;
+  }
+
+  delete subscriptions[topic];
+  if (state.status === 'connected') {
+    doPhysicalUnsubscribe(topic);
+  }
+}
+
 export default {
-  subscribe(topic: string, callback: (data: any) => void): void {
+  subscribe(topic: string, callback: WebsocketCallback): Unsubscribe {
     const isFirstSubscription = !subscriptions[topic];
     if (!subscriptions[topic]) {
       subscriptions[topic] = [];
     }
-    subscriptions[topic].push(callback);
+    const subscriptionId = nextSubscriptionId++;
+    subscriptions[topic].push({
+      id: subscriptionId,
+      callback,
+    });
     if (isFirstSubscription && state.status === 'connected') {
       doPhysicalSubscribe(topic);
     }
+
+    let isSubscribed = true;
+    return () => {
+      if (!isSubscribed) {
+        return;
+      }
+      isSubscribed = false;
+      unsubscribeSubscription(topic, subscriptionId);
+    };
   },
 
   unsubscribe(topic: string): void {
+    console.warn('This method is deprecated because it removes all subscriptions for the topic. Use the unsubscribe function returned by subscribe(), or use unsubscribeByPrefix() when you explicitly need to unsubscribe by topic prefix.');
     if (!subscriptions[topic]) {
       return;
     }
@@ -146,4 +184,4 @@ export default {
     });
   }
   
-}
+}

package/package.json

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