refactor(ui): use BaseDialog @close event in User components

Author: luizhf42

ui/src/components/User/ChangePassword.vue

@@ -1,5 +1,5 @@
 <template>
-  <BaseDialog v-model="showDialog" @click:outside="close">
+  <BaseDialog v-model="showDialog" @close="close">
     <v-card data-test="password-change-card" class="bg-v-theme-surface">
       <v-card-title class="text-h5 pa-4 bg-primary" data-test="title">
         Change Password

ui/src/components/User/PaywallChat.vue

@@ -2,8 +2,6 @@
   <BaseDialog
     v-model="showDialog"
     transition="dialog-bottom-transition"
-    @click:outside="close"
-    @keydown.esc="close"
   >
     <v-card color="background" data-test="card-dialog">
       <v-container>
@@ -39,7 +37,7 @@
           </v-col>
         </v-row>
         <v-card-actions data-test="card-actions">
-          <v-btn @click="close()" class="mt-4" variant="text" data-test="close-btn">
+          <v-btn @click="showDialog = false" class="mt-4" variant="text" data-test="close-btn">
             Close
           </v-btn>
           <v-spacer />
@@ -63,10 +61,6 @@ import BaseDialog from "../BaseDialog.vue";
 
 const showDialog = defineModel({ default: false });
 
-const close = () => {
-  showDialog.value = false;
-};
-
 defineExpose({ showDialog });
 </script>
 

ui/src/components/User/PaywallDialog.vue

@@ -3,8 +3,7 @@
     v-model="showDialog"
     threshold="md"
     transition="dialog-bottom-transition"
-    @click:outside="close"
-    @keydown.esc="close"
+    @close="close"
   >
     <v-card color="background" data-test="card-dialog">
       <v-container class="px-6">