init

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

@@ -0,0 +1,85 @@
+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/templates/components/lnbits-dialog.vue

@@ -0,0 +1,48 @@
+<template id="lnbits-dialog">
+  <q-dialog
+    :model-value="show"
+    :position="position"
+    :persistent="persistent"
+    @update:model-value="$emit('update:show', $event)"
+    @hide="handleHide"
+  >
+    <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>
+
+      <!-- Main content slot -->
+      <slot></slot>
+
+      <!-- Footer actions -->
+      <div class="row q-mt-lg">
+        <!-- Left-aligned action buttons -->
+        <div v-if="hasActionsSlot" class="col">
+          <slot name="actions"></slot>
+        </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-card>
+  </q-dialog>
+</template>