lesson 133: close the dialog when clicking the background

2021-02-08 prj-cmp-01-starting-setup/src/components/UI/BaseDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <div></div>
+  <div @click="$emit('close')"></div>
   <dialog open>
     <header>
       <slot name="header">
@@ -17,7 +17,8 @@ export default {
       type: String,
       required: false
     }
-  }
+  },
+  emits: ['close']
 };
 </script>
 <style scoped>

2021-02-08 prj-cmp-01-starting-setup/src/components/resources/AddResource.vue

@@ -24,7 +24,11 @@
     </form>
   </base-card>
   <teleport to="body">
-    <base-dialog v-if="inputIsInvalid" title="Input may not be empty">
+    <base-dialog
+      v-if="inputIsInvalid"
+      title="Input may not be empty"
+      @close="resetErrorDialog"
+    >
       <template #default>
         <p>Unfortunately some inputs seem to be empty.</p>
         <p>Please correct this and try again.</p>