add optional secondary action button

lnbits/static/js/components/lnbits-dialog.js

@@ -33,15 +33,22 @@ window.app.component('lnbits-dialog', {
     action: {
       type: Object,
       default: null
+    },
+    secondaryAction: {
+      type: Object,
+      default: null
     }
   },
 
-  emits: ['update:show', 'hide', 'cancel', 'action'],
+  emits: ['update:show', 'hide', 'cancel', 'action', 'secondary-action'],
 
   computed: {
     hasAction() {
       return !!(this.action && this.action.label)
     },
+    hasSecondaryAction() {
+      return !!(this.secondaryAction && this.secondaryAction.label)
+    },
 
     actionProps() {
       const action = this.action || {}
@@ -50,7 +57,19 @@ window.app.component('lnbits-dialog', {
         label: action.label || 'Action',
         color: action.color || 'primary',
         loading: !!action.loading,
-        disable: !!action.disable
+        disable: !!action.disable,
+        closePopup: !!action.closePopup
+      }
+    },
+    secondaryActionProps() {
+      const action = this.secondaryAction || {}
+      return {
+        icon: action.icon || null,
+        label: action.label || 'Secondary',
+        color: action.color || 'secondary',
+        loading: !!action.loading,
+        disable: !!action.disable,
+        closePopup: !!action.closePopup
       }
     }
   },
@@ -83,6 +102,22 @@ window.app.component('lnbits-dialog', {
       } catch (error) {
         console.error('lnbits-dialog action handler failed', error)
       }
+    },
+    async handleSecondaryAction() {
+      try {
+        if (
+          this.secondaryAction &&
+          typeof this.secondaryAction.handler === 'function'
+        ) {
+          await this.secondaryAction.handler()
+        }
+        this.$emit('secondary-action')
+        if (this.secondaryAction && this.secondaryAction.closeOnClick) {
+          this.handleModelUpdate(false)
+        }
+      } catch (error) {
+        console.error('lnbits-dialog secondary action handler failed', error)
+      }
     }
   }
 })

lnbits/templates/components/lnbits-dialog.vue

@@ -18,7 +18,7 @@
       </q-card-section>
 
       <q-card-actions
-        v-if="showCancel || hasAction"
+        v-if="showCancel || hasAction || hasSecondaryAction"
         class="q-mt-lg"
         align="right"
       >
@@ -32,6 +32,18 @@
 
         <q-space></q-space>
 
+        <q-btn
+          v-if="hasSecondaryAction"
+          :icon="secondaryActionProps.icon"
+          :color="secondaryActionProps.color"
+          :label="secondaryActionProps.label"
+          :loading="secondaryActionProps.loading"
+          :disable="secondaryActionProps.disable"
+          @click="handleSecondaryAction"
+          v-close-popup="secondaryActionProps.closePopup"
+          class="q-mr-sm"
+        ></q-btn>
+
         <q-btn
           v-if="hasAction"
           :icon="actionProps.icon"
@@ -40,6 +52,7 @@
           :loading="actionProps.loading"
           :disable="actionProps.disable"
           @click="handleAction"
+          v-close-popup="actionProps.closePopup"
         ></q-btn>
       </q-card-actions>
     </q-card>