├── .browserslistrc
├── public
    ├── favicon.ico
    ├── src
    │   ├── main.js
    │   ├── components
    │   │   └── BaseModal.vue
    │   └── App.vue
    └── index.html
├── src
    ├── mixins
    │   ├── logger.js
    │   └── alert.js
    ├── main.js
    ├── components
    │   ├── AddUser.vue
    │   ├── DeleteUser.vue
    │   └── UserAlert.vue
    └── App.vue
├── babel.config.js
├── .gitignore
├── .eslintrc.js
└── package.json


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neto112/Vue---course-complete/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/mixins/logger.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   mounted() {
3 |     console.log('Mounted!');
4 |   }
5 | };


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue';
 2 | 
 3 | import App from './App.vue';
 4 | import loggerMixin from './mixins/logger.js';
 5 | 
 6 | const app = createApp(App)
 7 | 
 8 | app.mixin(loggerMixin);
 9 | 
10 | app.mount('#app');
11 | 


--------------------------------------------------------------------------------
/public/src/main.js:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue';
 2 | 
 3 | import App from './App.vue';
 4 | import BaseModal from './components/BaseModal.vue';
 5 | 
 6 | const app = createApp(App);
 7 | 
 8 | app.component('base-modal', BaseModal);
 9 | 
10 | app.mount('#app');
11 | 


--------------------------------------------------------------------------------
/src/mixins/alert.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   data() {
 3 |     return {
 4 |       alertIsVisible: false
 5 |     };
 6 |   },
 7 |   methods: {
 8 |     showAlert() {
 9 |       this.alertIsVisible = true;
10 |     },
11 |     hideAlert() {
12 |       this.alertIsVisible = false;
13 |     }
14 |   }
15 | };
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/vue3-essential',
 8 |     'eslint:recommended'
 9 |   ],
10 |   parserOptions: {
11 |     parser: 'babel-eslint'
12 |   },
13 |   rules: {
14 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
15 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/components/AddUser.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <user-alert v-if="alertIsVisible" title="Add a User?" @close="hideAlert">
 3 |     <p>Do you want to continue with adding a user?</p>
 4 |   </user-alert>
 5 |   <section>
 6 |     <h2>Add a User</h2>
 7 |     <button @click="showAlert">Add User</button>
 8 |   </section>
 9 | </template>
10 | 
11 | <script>
12 | import UserAlert from './UserAlert.vue';
13 | 
14 | import alertMixin from '../mixins/alert.js';
15 | 
16 | export default {
17 |   components: {
18 |     UserAlert,
19 |   },
20 |   mixins: [alertMixin],
21 | };
22 | </script>


--------------------------------------------------------------------------------
/src/components/DeleteUser.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <user-alert v-if="alertIsVisible" :title="alertTitle" @close="hideAlert">
 3 |     <p>Do you want to continue with deleting a user?</p>
 4 |   </user-alert>
 5 |   <section>
 6 |     <h2>Delete a User</h2>
 7 |     <button @click="showAlert">Delete User</button>
 8 |   </section>
 9 | </template>
10 | 
11 | <script>
12 | import UserAlert from './UserAlert.vue';
13 | 
14 | import alertMixin from '../mixins/alert.js';
15 | 
16 | export default {
17 |   components: {
18 |     UserAlert,
19 |   },
20 |   data() {
21 |     return {
22 |       alertTitle: 'Delete User?',
23 |       alertIsVisible: true, // overwritten!
24 |     };
25 |   },
26 |   mixins: [alertMixin]
27 | };
28 | </script>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-first-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "firebase": "^9.15.0",
13 |     "vue": "^3.0.0",
14 |     "vue-router": "^4.1.6",
15 |     "vuex": "^4.1.0"
16 |   },
17 |   "devDependencies": {
18 |     "@vue/cli-plugin-babel": "~4.5.0",
19 |     "@vue/cli-plugin-eslint": "~4.5.0",
20 |     "@vue/cli-service": "~4.5.0",
21 |     "@vue/compiler-sfc": "^3.0.0-0",
22 |     "babel-eslint": "^10.1.0",
23 |     "eslint": "^6.7.2",
24 |     "eslint-plugin-vue": "^7.0.0-0"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong
13 |         >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
14 |         properly without JavaScript enabled. Please enable it to
15 |         continue.</strong
16 |       >
17 |     </noscript>
18 |     <div id="app"></div>
19 |     <!-- built files will be auto injected -->
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/public/src/components/BaseModal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="backdrop" @click="$emit('close')"></div>
 3 |   <dialog open>
 4 |     <slot></slot>
 5 |   </dialog>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   emits: ['close'],
11 | };
12 | </script>
13 | 
14 | <style scoped>
15 | .backdrop {
16 |   position: fixed;
17 |   top: 0;
18 |   left: 0;
19 |   width: 100%;
20 |   height: 100vh;
21 |   z-index: 10;
22 |   background-color: rgba(0, 0, 0, 0.75);
23 | }
24 | 
25 | dialog {
26 |   position: fixed;
27 |   top: 30vh;
28 |   width: 30rem;
29 |   left: calc(50% - 15rem);
30 |   margin: 0;
31 |   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
32 |   border-radius: 12px;
33 |   padding: 1rem;
34 |   background-color: white;
35 |   z-index: 100;
36 |   border: none;
37 | }
38 | </style>


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <main>
 3 |     <add-user></add-user>
 4 |     <delete-user></delete-user>
 5 |   </main>
 6 | </template>
 7 | 
 8 | <script>
 9 | import AddUser from './components/AddUser.vue';
10 | import DeleteUser from './components/DeleteUser.vue';
11 | 
12 | export default {
13 |   components: {
14 |     AddUser,
15 |     DeleteUser,
16 |   },
17 | };
18 | </script>
19 | 
20 | <style>
21 | * {
22 |   box-sizing: border-box;
23 | }
24 | 
25 | html {
26 |   font-family: sans-serif;
27 | }
28 | 
29 | body {
30 |   margin: 0;
31 | }
32 | 
33 | main {
34 |   width: 40rem;
35 |   margin: 3rem auto;
36 | }
37 | 
38 | section {
39 |   margin: 2rem auto;
40 |   border: 1px solid #ccc;
41 |   border-radius: 12px;
42 |   padding: 1rem;
43 | }
44 | 
45 | button {
46 |   font: inherit;
47 |   background-color: #310131;
48 |   border: 1px solid #310131;
49 |   border-radius: 8px;
50 |   color: white;
51 |   padding: 0.5rem 1.5rem;
52 |   cursor: pointer;
53 | }
54 | 
55 | button:hover,
56 | button:active {
57 |   background-color: #770e77;
58 |   border-color: #770e77;
59 | }
60 | </style>


--------------------------------------------------------------------------------
/src/components/UserAlert.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="backdrop" @click="closeDialog"></div>
 3 |   <dialog open>
 4 |     <header>
 5 |       <h2>{{ title }}</h2>
 6 |     </header>
 7 |     <div>
 8 |       <slot></slot>
 9 |     </div>
10 |     <menu>
11 |       <button @click="closeDialog">Close</button>
12 |     </menu>
13 |   </dialog>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 |   props: ['title'],
19 |   emits: ['close'],
20 |   methods: {
21 |     closeDialog() {
22 |       this.$emit('close');
23 |     },
24 |   },
25 | };
26 | </script>
27 | 
28 | <style scoped>
29 | .backdrop {
30 |   position: fixed;
31 |   top: 0;
32 |   left: 0;
33 |   width: 100%;
34 |   height: 100vh;
35 |   background-color: rgba(0, 0, 0, 0.75);
36 |   z-index: 10;
37 | }
38 | 
39 | dialog {
40 |   margin: 0;
41 |   padding: 0;
42 |   border: none;
43 |   border-radius: 12px;
44 |   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
45 |   position: fixed;
46 |   top: 30vh;
47 |   left: calc(50% - 15rem);
48 |   width: 30rem;
49 |   background-color: white;
50 |   z-index: 100;
51 |   overflow: hidden;
52 | }
53 | 
54 | header {
55 |   width: 100%;
56 |   padding: 1rem;
57 |   background-color: #310131;
58 |   color: white;
59 | }
60 | 
61 | dialog div {
62 |   padding: 1rem;
63 | }
64 | 
65 | menu {
66 |   padding: 1rem;
67 |   display: flex;
68 |   justify-content: flex-end;
69 |   align-items: center;
70 | }
71 | </style>


--------------------------------------------------------------------------------
/public/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <div class="block"></div>
 4 |     <button>Animate</button>
 5 |   </div>
 6 |   <base-modal @close="hideDialog" v-if="dialogIsVisible">
 7 |     <p>This is a test dialog!</p>
 8 |     <button @click="hideDialog">Close it!</button>
 9 |   </base-modal>
10 |   <div class="container">
11 |     <button @click="showDialog">Show Dialog</button>
12 |   </div>
13 | </template>  
14 | 
15 | <script>
16 | export default {
17 |   data() {
18 |     return { dialogIsVisible: false };
19 |   },
20 |   methods: {
21 |     showDialog() {
22 |       this.dialogIsVisible = true;
23 |     },
24 |     hideDialog() {
25 |       this.dialogIsVisible = false;
26 |     },
27 |   },
28 | };
29 | </script>
30 | 
31 | <style>
32 | * {
33 |   box-sizing: border-box;
34 | }
35 | html {
36 |   font-family: sans-serif;
37 | }
38 | body {
39 |   margin: 0;
40 | }
41 | button {
42 |   font: inherit;
43 |   padding: 0.5rem 2rem;
44 |   border: 1px solid #810032;
45 |   border-radius: 30px;
46 |   background-color: #810032;
47 |   color: white;
48 |   cursor: pointer;
49 | }
50 | button:hover,
51 | button:active {
52 |   background-color: #a80b48;
53 |   border-color: #a80b48;
54 | }
55 | .block {
56 |   width: 8rem;
57 |   height: 8rem;
58 |   background-color: #290033;
59 |   margin-bottom: 2rem;
60 | }
61 | .container {
62 |   max-width: 40rem;
63 |   margin: 2rem auto;
64 |   display: flex;
65 |   justify-content: center;
66 |   align-items: center;
67 |   flex-direction: column;
68 |   padding: 2rem;
69 |   border: 2px solid #ccc;
70 |   border-radius: 12px;
71 | }
72 | </style>


--------------------------------------------------------------------------------