some extensions dialogs

some need a bit more work

lnbits/templates/pages/extensions.vue

@@ -366,9 +366,16 @@
     </div>
   </div>
 
-  <q-dialog v-model="showUninstallDialog" position="top">
+  <lnbits-dialog
-    <q-card class="q-pa-lg">
+    :show="showUninstallDialog"
-      <h6 class="q-my-md text-primary" v-text="$t('warning')"></h6>
+    :title="$t('warning')"
+    :action="{
+      handler: () => uninstallExtension(),
+      label: $t('uninstall_confirm')
+    }"
+    :cancel-label="$t('cancel')"
+    @update:model-value="showUninstallDialog = $event"
+  >
     <p>
       <span v-text="$t('extension_uninstall_warning')"></span><br />
       <span v-text="$t('confirm_continue')"></span>
@@ -385,27 +392,21 @@
         </q-tooltip>
       </q-checkbox>
     </div>
-      <div class="row q-mt-lg">
+  </lnbits-dialog>
-        <q-btn
-          outline
-          color="grey"
-          @click="uninstallExtension()"
-          v-text="$t('uninstall_confirm')"
-        ></q-btn>
-        <q-btn
-          v-close-popup
-          flat
-          color="grey"
-          class="q-ml-auto"
-          v-text="$t('cancel')"
-        ></q-btn>
-      </div>
-    </q-card>
-  </q-dialog>
 
-  <q-dialog v-model="showDropDbDialog" position="top">
+  <lnbits-dialog
-    <q-card v-if="selectedExtension" class="q-pa-lg">
+    v-if="selectedExtension"
-      <h6 class="q-my-md text-primary" v-text="$t('warning')"></h6>
+    :show="showDropDbDialog"
+    :title="$t('warning')"
+    :action="{
+      handler: () => dropExtensionDb(),
+      label: $t('confirm'),
+      color: 'red',
+      disable: dropDbExtensionId !== selectedExtension.id
+    }"
+    :cancel-label="$t('cancel')"
+    @update:model-value="showDropDbDialog = $event"
+  >
     <p><span v-text="$t('extension_db_drop_warning')"></span><br /></p>
     <q-input
       v-model="dropDbExtensionId"
@@ -430,8 +431,7 @@
         v-text="$t('cancel')"
       ></q-btn>
     </div>
-    </q-card>
+  </lnbits-dialog>
-  </q-dialog>
 
   <q-dialog v-model="showManageExtensionDialog" position="top">
     <q-card v-if="selectedRelease" class="q-pa-lg lnbits__dialog-card">
@@ -1244,9 +1244,11 @@
       </q-card-section>
     </q-card>
   </q-dialog>
-  <q-dialog v-model="paymentDialog.show" position="top">
+  <lnbits-dialog
-    <q-card class="q-pa-md lnbits__dialog-card">
+    :show="paymentDialog.show"
-      <q-card-section>
+    :cancel-label="$t('close')"
+    @update:model-value="paymentDialog.show = $event"
+  >
     <q-responsive :ratio="1" class="q-mx-xl q-mb-xl">
       <lnbits-qrcode
         :value="paymentDialog.invoice"
@@ -1254,21 +1256,20 @@
         class="rounded-borders"
       ></lnbits-qrcode>
     </q-responsive>
-      </q-card-section>
+  </lnbits-dialog>
-      <q-card-actions align="between">
+
-        <q-btn v-close-popup flat color="grey" :label="$t('close')"></q-btn>
+  <lnbits-dialog
-      </q-card-actions>
+    :show="showUpdateAllDialog"
-    </q-card>
+    :title="$t('update')"
-  </q-dialog>
+    :action="{
-  <q-dialog v-model="showUpdateAllDialog" position="top">
+      handler: () => updateSelectedExtensions(),
-    <q-card class="q-pa-md q-pt-md lnbits__dialog-card">
+      label: $t('update')
-      <div class="row">
+    }"
-        <div class="col-12">
+    :cancel-label="$t('cancel')"
-          <h6 class="q-my-md" v-text="$t('update')"></h6>
+    @update:model-value="showUpdateAllDialog = $event"
-        </div>
+  >
-      </div>
     <div v-if="updatableExtensions?.length > 1" class="row">
-        <div class="col-12">
+      <div class="col-12 q-mb-md">
         <q-btn
           outline
           color="grey"
@@ -1299,21 +1300,5 @@
         </div>
       </template>
     </q-virtual-scroll>
-      <div class="row q-mt-lg">
+  </lnbits-dialog>
-        <q-btn
-          @click="updateSelectedExtensions()"
-          outline
-          color="grey"
-          v-text="$t('update')"
-        ></q-btn>
-        <q-btn
-          v-close-popup
-          flat
-          color="grey"
-          class="q-ml-auto"
-          v-text="$t('cancel')"
-        ></q-btn>
-      </div>
-    </q-card>
-  </q-dialog>
 </template>