test fixes

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

@@ -1,85 +0,0 @@
-window.app.component('lnbits-dialog', {
-  template: '#lnbits-dialog',
-
-  props: {
-    show: {
-      type: Boolean,
-      required: true
-    },
-    title: {
-      type: String,
-      default: ''
-    },
-    position: {
-      type: String,
-      default: 'top'
-    },
-    persistent: {
-      type: Boolean,
-      default: true
-    },
-    showCancel: {
-      type: Boolean,
-      default: true
-    },
-    cancelLabel: {
-      type: String,
-      default: 'Close'
-    },
-    cancelColor: {
-      type: String,
-      default: 'grey'
-    },
-    showConfirm: {
-      type: Boolean,
-      default: false
-    },
-    confirmLabel: {
-      type: String,
-      default: 'Confirm'
-    },
-    confirmColor: {
-      type: String,
-      default: 'primary'
-    },
-    confirmOutline: {
-      type: Boolean,
-      default: false
-    },
-    confirmFlat: {
-      type: Boolean,
-      default: false
-    },
-    confirmLoading: {
-      type: Boolean,
-      default: false
-    },
-    confirmDisable: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  emits: ['update:show', 'hide', 'cancel', 'confirm'],
-
-  computed: {
-    hasActionsSlot() {
-      return !!this.$slots.actions
-    }
-  },
-
-  methods: {
-    handleHide() {
-      this.$emit('update:show', false)
-      this.$emit('hide')
-    },
-
-    handleCancel() {
-      this.$emit('cancel')
-    },
-
-    handleConfirm() {
-      this.$emit('confirm')
-    }
-  }
-})

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

@@ -0,0 +1,103 @@
+window.app.component('lnbits-dialog', {
+  template: '#lnbits-dialog',
+
+  props: {
+    show: {
+      type: Boolean,
+      default: undefined
+    },
+    modelValue: {
+      type: Boolean,
+      default: undefined
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    position: {
+      type: String,
+      default: 'top'
+    },
+    persistent: {
+      type: Boolean,
+      default: true
+    },
+    showCancel: {
+      type: Boolean,
+      default: true
+    },
+    cancelLabel: {
+      type: String,
+      default: 'Close'
+    },
+    cancelColor: {
+      type: String,
+      default: 'grey'
+    },
+    action: {
+      type: Object,
+      default: null
+    }
+  },
+
+  emits: ['update:show', 'update:model-value', 'hide', 'cancel', 'action'],
+
+  computed: {
+    hasActionsSlot() {
+      return !!this.$slots.actions
+    },
+
+    hasAction() {
+      return !!(this.action && this.action.label)
+    },
+
+    actionProps() {
+      const action = this.action || {}
+      return {
+        label: action.label || 'Action',
+        color: action.color || 'primary',
+        outline: !!action.outline,
+        flat: !!action.flat,
+        unelevated: !!action.unelevated,
+        noCaps: !!action.noCaps,
+        icon: action.icon || null,
+        loading: !!action.loading,
+        disable: !!action.disable
+      }
+    },
+
+    dialogShow() {
+      if (typeof this.show === 'boolean') return this.show
+      if (typeof this.modelValue === 'boolean') return this.modelValue
+      return false
+    }
+  },
+
+  methods: {
+    handleModelUpdate(value) {
+      this.$emit('update:show', value)
+      this.$emit('update:model-value', value)
+    },
+
+    handleHide() {
+      this.handleModelUpdate(false)
+      this.$emit('hide')
+    },
+
+    handleCancel() {
+      this.$emit('cancel')
+    },
+
+    handleAction() {
+      if (this.action && typeof this.action.handler === 'function') {
+        this.action.handler()
+      }
+
+      this.$emit('action')
+
+      if (this.action && this.action.closeOnClick) {
+        this.handleModelUpdate(false)
+      }
+    }
+  }
+})

lnbits/static/vendor.json

@@ -95,8 +95,12 @@
     "js/components/lnbits-label-selector.js",
     "js/components/extension-settings.js",
     "js/components/data-fields.js",
+    "js/components/lnbits-dialog.js",
     "js/components.js",
     "js/init-app.js"
   ],
-  "css": ["vendor/quasar.css", "css/base.css"]
-}
+  "css": [
+    "vendor/quasar.css",
+    "css/base.css"
+  ]
+}

lnbits/templates/components.vue

@@ -30,7 +30,8 @@ include('components/lnbits-wallet-share.vue') %} {%
 include('components/lnbits-wallet-charts.vue') %} {%
 include('components/lnbits-wallet-paylinks.vue') %} {%
 include('components/lnbits-wallet-extra.vue') %} {%
-include('components/lnbits-error.vue') %}
+include('components/lnbits-error.vue') %} {%
+include('components/lnbits-dialog.vue') %}
 
 <template id="lnbits-manage">
   <q-list v-if="g.user" dense class="lnbits-drawer__q-list">

lnbits/templates/components/lnbits-dialog.vue

@@ -8,41 +8,50 @@
   >
     <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
       <!-- Header with optional title -->
-      <div v-if="title" class="text-h6 q-mb-md" v-text="title"></div>
+      <q-card-section v-if="title">
+        <div class="text-h6 q-mb-md" v-text="title"></div>
+      </q-card-section>
 
       <!-- Main content slot -->
-      <slot></slot>
+      <q-card-section>
+        <slot></slot>
+      </q-card-section>
 
       <!-- Footer actions -->
-      <div class="row q-mt-lg">
-        <!-- Left-aligned action buttons -->
-        <div v-if="hasActionsSlot" class="col">
-          <slot name="actions"></slot>
-        </div>
+      <q-card-actions class="q-mt-lg" align="right">
+        <!-- Left-aligned buttons -->
+        <!-- <div> -->
+        <!-- <slot v-if="hasActionsSlot" name="actions"></slot> -->
+        <q-btn
+          v-if="showCancel"
+          v-close-popup
+          flat
+          :color="cancelColor"
+          :label="cancelLabel"
+          :class="{'q-ml-sm': hasActionsSlot}"
+          @click="handleCancel"
+        />
+        <!-- </div> -->
 
-        <!-- Right-aligned buttons -->
-        <div class="col-auto q-ml-auto">
-          <q-btn
-            v-if="showCancel"
-            v-close-popup
-            flat
-            :color="cancelColor"
-            :label="cancelLabel"
-            @click="handleCancel"
-          />
-          <q-btn
-            v-if="showConfirm"
-            :outline="confirmOutline"
-            :flat="confirmFlat"
-            :color="confirmColor"
-            :label="confirmLabel"
-            :loading="confirmLoading"
-            :disable="confirmDisable"
-            class="q-ml-sm"
-            @click="handleConfirm"
-          />
-        </div>
-      </div>
+        <q-space></q-space>
+
+        <!-- Right-aligned primary action -->
+        <!-- <div> -->
+        <q-btn
+          v-if="hasAction"
+          :outline="actionProps.outline"
+          :flat="actionProps.flat"
+          :unelevated="actionProps.unelevated"
+          :no-caps="actionProps.noCaps"
+          :color="actionProps.color"
+          :label="actionProps.label"
+          :icon="actionProps.icon"
+          :loading="actionProps.loading"
+          :disable="actionProps.disable"
+          @click="handleAction"
+        />
+        <!-- </div> -->
+      </q-card-actions>
     </q-card>
   </q-dialog>
 </template>

package.json

@@ -123,6 +123,7 @@
       "js/components/admin/lnbits-admin-site-customisation.js",
       "js/components/admin/lnbits-admin-assets-config.js",
       "js/components/admin/lnbits-admin-audit.js",
+      "js/components/lnbits-dialog.js",
       "js/components/lnbits-wallet-charts.js",
       "js/components/lnbits-wallet-api-docs.js",
       "js/components/lnbits-wallet-icon.js",
@@ -156,4 +157,4 @@
       "css/base.css"
     ]
   }
-}
+}