lesson 133: convert the ErrorAlert to BaseDialog

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

@@ -1,18 +0,0 @@
-<template>
-    <dialog open>
-        <slot></slot>
-    </dialog>
-</template>
-
-<style scoped>
-dialog {
-    margin: 0;
-    position: fixed;
-    top: 20vh;
-    left: 30%;
-    width: 40%;
-    background-color: white;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
-    padding: 1rem;
-}
-</style>

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

@@ -0,0 +1,76 @@
+<template>
+  <div></div>
+  <dialog open>
+    <header>
+      <slot name="header">
+        <h2>{{ title }}</h2>
+      </slot>
+    </header>
+    <section><slot name="default"></slot></section>
+    <menu><slot name="actions"></slot></menu>
+  </dialog>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: false
+    }
+  }
+};
+</script>
+<style scoped>
+div {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.75);
+  z-index: 10;
+}
+
+dialog {
+  position: fixed;
+  top: 20vh;
+  left: 10%;
+  width: 80%;
+  z-index: 100;
+  border-radius: 12px;
+  border: none;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+}
+
+header {
+  background-color: #3a0061;
+  color: white;
+  width: 100%;
+  padding: 1rem;
+}
+
+header h2 {
+  margin: 0;
+}
+
+section {
+  padding: 1rem;
+}
+
+menu {
+  padding: 1rem;
+  display: flex;
+  justify-content: flex-end;
+  margin: 0;
+}
+
+@media (min-width: 768px) {
+  dialog {
+    left: calc(50% - 20rem);
+    width: 40rem;
+  }
+}
+</style>

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

@@ -24,19 +24,19 @@
     </form>
   </base-card>
   <teleport to="body">
-    <error-alert v-if="inputIsInvalid">
-      <h2>Input may not be empty</h2>
-      <button @click="resetErrorDialog">Ok</button>
-    </error-alert>
+    <base-dialog v-if="inputIsInvalid">
+      <template #header>
+        Input may not be empty
+      </template>
+      <template #actions>
+        <button @click="resetErrorDialog">Ok</button>
+      </template>
+    </base-dialog>
   </teleport>
 </template>
 
 <script>
-import ErrorAlert from '../ErrorAlert';
 export default {
-  components: {
-    ErrorAlert
-  },
   inject: ['storeNewResource'],
   data() {
     return {
@@ -48,7 +48,11 @@ export default {
   },
   methods: {
     validateInput(resource) {
-      if (!resource.title || !resource.description || !resource.link) {
+      if (
+        resource.title === '' ||
+        resource.description === '' ||
+        resource.link === ''
+      ) {
         this.inputIsInvalid = true;
         return false;
       } else {
@@ -61,9 +65,9 @@ export default {
     returnNewResource() {
       const resource = {
         id: new Date().toISOString(),
-        title: this.title,
-        description: this.description,
-        link: this.link
+        title: this.title.trim(),
+        description: this.description.trim(),
+        link: this.link.trim()
       };
       if (this.validateInput(resource)) {
         this.storeNewResource(resource);

2021-02-08 prj-cmp-01-starting-setup/src/main.js

@@ -3,9 +3,10 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import BaseCard from './components/UI/BaseCard';
 import BaseButton from './components/UI/BaseButton';
-
+import BaseDialog from './components/UI/BaseDialog';
 const app = createApp(App);
 
 app.component('base-card', BaseCard);
 app.component('base-button', BaseButton);
+app.component('base-dialog', BaseDialog);
 app.mount('#app');