From 4f1007a220ad55da91012edba0cfa14f006615ca Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Mon, 06 Jan 2025 17:42:00 +0100
Subject: [PATCH] step lezione 09
---
09 - deeper into components/cmp-adv-03-introducing-slots/src/components/BaseCard.vue | 20
09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/public/favicon.ico | 0
09 - deeper into components/cmp-adv-04-named-slots/public/favicon.ico | 0
09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/CourseGoals.vue | 17
09 - deeper into components/cmp-adv-05-more-on-slots/.browserslistrc | 3
09 - deeper into components/cmp-adv-06-scoped-slots/src/components/CourseGoals.vue | 17
09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/ErrorAlert.vue | 18
09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/BaseCard.vue | 33
09 - deeper into components/cmp-adv-02-scoped-styles/src/components/TheHeader.vue | 21
09 - deeper into components/cmp-adv-05-more-on-slots/src/components/BaseCard.vue | 33
09 - deeper into components/cmp-adv-09-working-with-fragments/.browserslistrc | 3
09 - deeper into components/cmp-adv-05-more-on-slots/package.json | 23
09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/UI/BaseBadge.vue | 37
09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/BadgeList.vue | 34
09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/ErrorAlert.vue | 18
09 - deeper into components/cmp-adv-06-scoped-slots/src/App.vue | 51 +
09 - deeper into components/cmp-adv-03-introducing-slots/public/index.html | 17
09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/public/index.html | 17
09 - deeper into components/cmp-adv-02-scoped-styles/package.json | 23
09 - deeper into components/cmp-adv-04-named-slots/.gitignore | 22
09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/CourseGoals.vue | 17
09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/BaseBadge.vue | 37
09 - deeper into components/cmp-adv-02-scoped-styles/src/components/BaseBadge.vue | 37
09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/main.js | 12
09 - deeper into components/cmp-adv-08-teleporting-elements/.gitignore | 22
09 - deeper into components/cmp-adv-08-teleporting-elements/public/index.html | 17
09 - deeper into components/cmp-adv-03-introducing-slots/src/components/BaseBadge.vue | 37
09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/public/index.html | 17
09 - deeper into components/cmp-adv-03-introducing-slots/babel.config.js | 5
09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/ActiveGoals.vue | 3
09 - deeper into components/cmp-adv-09-working-with-fragments/package.json | 23
09 - deeper into components/cmp-adv-02-scoped-styles/public/favicon.ico | 0
09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/TheHeader.vue | 21
09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/TheHeader.vue | 21
09 - deeper into components/cmp-adv-08-teleporting-elements/public/favicon.ico | 0
09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/.browserslistrc | 3
09 - deeper into components/cmp-adv-06-scoped-slots/public/favicon.ico | 0
09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/BadgeList.vue | 34
09 - deeper into components/cmp-adv-05-more-on-slots/.gitignore | 22
09 - deeper into components/cmp-adv-09-working-with-fragments/.gitignore | 22
09 - deeper into components/cmp-adv-06-scoped-slots/src/components/UserInfo.vue | 19
09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/BaseBadge.vue | 37
09 - deeper into components/cmp-adv-05-more-on-slots/HOW-TO-USE.pdf | 0
09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/BadgeList.vue | 34
09 - deeper into components/cmp-adv-08-teleporting-elements/HOW-TO-USE.pdf | 0
09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/BadgeList.vue | 34
09 - deeper into components/cmp-adv-02-scoped-styles/src/components/UserInfo.vue | 31
09 - deeper into components/cmp-adv-08-teleporting-elements/babel.config.js | 5
09 - deeper into components/cmp-adv-03-introducing-slots/src/components/TheHeader.vue | 21
09 - deeper into components/cmp-adv-04-named-slots/src/components/UserInfo.vue | 19
09 - deeper into components/cmp-adv-06-scoped-slots/HOW-TO-USE.pdf | 0
09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/.eslintrc.js | 17
09 - deeper into components/cmp-adv-03-introducing-slots/package.json | 23
09 - deeper into components/cmp-adv-05-more-on-slots/src/App.vue | 45
09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/CourseGoals.vue | 17
09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/ActiveGoals.vue | 3
09 - deeper into components/cmp-adv-06-scoped-slots/.browserslistrc | 3
09 - deeper into components/cmp-adv-06-scoped-slots/.eslintrc.js | 17
09 - deeper into components/cmp-adv-08-teleporting-elements/src/App.vue | 55 +
09 - deeper into components/cmp-adv-08-teleporting-elements/.eslintrc.js | 17
09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/public/favicon.ico | 0
09 - deeper into components/cmp-adv-02-scoped-styles/src/App.vue | 45
09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/UI/BaseCard.vue | 33
09 - deeper into components/cmp-adv-05-more-on-slots/src/components/TheHeader.vue | 21
09 - deeper into components/cmp-adv-05-more-on-slots/src/main.js | 12
09 - deeper into components/cmp-adv-04-named-slots/.eslintrc.js | 17
09 - deeper into components/cmp-adv-06-scoped-slots/package.json | 23
09 - deeper into components/cmp-adv-08-teleporting-elements/src/main.js | 12
09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/App.vue | 55 +
09 - deeper into components/cmp-adv-04-named-slots/package.json | 23
09 - deeper into components/cmp-adv-03-introducing-slots/.eslintrc.js | 17
09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/CourseGoals.vue | 17
09 - deeper into components/cmp-adv-02-scoped-styles/babel.config.js | 5
09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/package.json | 23
09 - deeper into components/cmp-adv-06-scoped-slots/src/main.js | 12
09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/TheHeader.vue | 21
09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/App.vue | 55 +
09 - deeper into components/cmp-adv-02-scoped-styles/src/components/BadgeList.vue | 38
09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/ManageGoals.vue | 6
09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/BaseBadge.vue | 37
09 - deeper into components/cmp-adv-05-more-on-slots/src/components/BaseBadge.vue | 37
09 - deeper into components/cmp-adv-03-introducing-slots/HOW-TO-USE.pdf | 0
09 - deeper into components/cmp-adv-04-named-slots/src/components/BaseCard.vue | 27
09 - deeper into components/cmp-adv-03-introducing-slots/.browserslistrc | 3
09 - deeper into components/cmp-adv-06-scoped-slots/src/components/BadgeList.vue | 34
09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/BaseCard.vue | 33
09 - deeper into components/cmp-adv-05-more-on-slots/src/components/BadgeList.vue | 34
09 - deeper into components/cmp-adv-02-scoped-styles/src/main.js | 10
09 - deeper into components/cmp-adv-05-more-on-slots/public/favicon.ico | 0
09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/BaseCard.vue | 33
09 - deeper into components/cmp-adv-06-scoped-slots/src/components/BaseCard.vue | 33
09 - deeper into components/cmp-adv-03-introducing-slots/src/main.js | 12
09 - deeper into components/cmp-adv-09-working-with-fragments/babel.config.js | 5
09 - deeper into components/cmp-adv-04-named-slots/src/main.js | 12
09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/UserInfo.vue | 19
09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/.browserslistrc | 3
09 - deeper into components/cmp-adv-02-scoped-styles/.eslintrc.js | 17
09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/ManageGoals.vue | 40
09 - deeper into components/cmp-adv-06-scoped-slots/public/index.html | 17
09 - deeper into components/cmp-adv-09-working-with-fragments/src/App.vue | 55 +
09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/babel.config.js | 5
09 - deeper into components/cmp-adv-04-named-slots/babel.config.js | 5
09 - deeper into components/cmp-adv-06-scoped-slots/src/components/TheHeader.vue | 21
09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/ActiveGoals.vue | 3
09 - deeper into components/cmp-adv-09-working-with-fragments/public/favicon.ico | 0
09 - deeper into components/cmp-adv-09-working-with-fragments/.eslintrc.js | 17
09 - deeper into components/cmp-adv-06-scoped-slots/babel.config.js | 5
09 - deeper into components/cmp-adv-08-teleporting-elements/package.json | 23
09 - deeper into components/cmp-adv-05-more-on-slots/babel.config.js | 5
09 - deeper into components/cmp-adv-05-more-on-slots/public/index.html | 17
09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/main.js | 12
09 - deeper into components/cmp-adv-06-scoped-slots/src/components/BaseBadge.vue | 37
09 - deeper into components/cmp-adv-06-scoped-slots/.gitignore | 22
09 - deeper into components/cmp-adv-03-introducing-slots/src/components/BadgeList.vue | 38
09 - deeper into components/cmp-adv-02-scoped-styles/.gitignore | 22
09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/babel.config.js | 5
09 - deeper into components/cmp-adv-09-working-with-fragments/public/index.html | 17
09 - deeper into components/cmp-adv-03-introducing-slots/src/App.vue | 45
09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/ErrorAlert.vue | 18
09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/ManageGoals.vue | 38
09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/UserInfo.vue | 19
09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/HOW-TO-USE.pdf | 0
09 - deeper into components/cmp-adv-05-more-on-slots/.eslintrc.js | 17
09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/HOW-TO-USE.pdf | 0
09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/ActiveGoals.vue | 3
09 - deeper into components/cmp-adv-04-named-slots/src/components/TheHeader.vue | 21
09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/UserInfo.vue | 19
09 - deeper into components/cmp-adv-04-named-slots/src/App.vue | 45
09 - deeper into components/cmp-adv-04-named-slots/.browserslistrc | 3
09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/.gitignore | 22
09 - deeper into components/cmp-adv-02-scoped-styles/public/index.html | 17
09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/ManageGoals.vue | 38
09 - deeper into components/cmp-adv-02-scoped-styles/HOW-TO-USE.pdf | 0
09 - deeper into components/cmp-adv-03-introducing-slots/.gitignore | 22
09 - deeper into components/cmp-adv-04-named-slots/HOW-TO-USE.pdf | 0
09 - deeper into components/cmp-adv-03-introducing-slots/public/favicon.ico | 0
09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/UserInfo.vue | 19
09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/.eslintrc.js | 17
09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/layout/TheHeader.vue | 21
09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/.gitignore | 22
09 - deeper into components/cmp-adv-04-named-slots/src/components/BaseBadge.vue | 37
09 - deeper into components/cmp-adv-09-working-with-fragments/src/main.js | 12
09 - deeper into components/cmp-adv-08-teleporting-elements/.browserslistrc | 3
09 - deeper into components/cmp-adv-04-named-slots/src/components/BadgeList.vue | 37
09 - deeper into components/cmp-adv-04-named-slots/public/index.html | 17
09 - deeper into components/cmp-adv-09-working-with-fragments/HOW-TO-USE.pdf | 0
09 - deeper into components/cmp-adv-02-scoped-styles/.browserslistrc | 3
09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/package.json | 23
09 - deeper into components/cmp-adv-03-introducing-slots/src/components/UserInfo.vue | 25
09 - deeper into components/cmp-adv-05-more-on-slots/src/components/UserInfo.vue | 19
150 files changed, 2,886 insertions(+), 0 deletions(-)
diff --git a/09 - deeper into components/cmp-adv-02-scoped-styles/.browserslistrc b/09 - deeper into components/cmp-adv-02-scoped-styles/.browserslistrc
new file mode 100644
index 0000000..214388f
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-02-scoped-styles/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
diff --git a/09 - deeper into components/cmp-adv-02-scoped-styles/.eslintrc.js b/09 - deeper into components/cmp-adv-02-scoped-styles/.eslintrc.js
new file mode 100644
index 0000000..3391da1
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-02-scoped-styles/.eslintrc.js
@@ -0,0 +1,17 @@
+module.exports = {
+ root: true,
+ env: {
+ node: true
+ },
+ 'extends': [
+ 'plugin:vue/vue3-essential',
+ 'eslint:recommended'
+ ],
+ parserOptions: {
+ parser: 'babel-eslint'
+ },
+ rules: {
+ 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+ 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+ }
+}
diff --git a/09 - deeper into components/cmp-adv-02-scoped-styles/.gitignore b/09 - deeper into components/cmp-adv-02-scoped-styles/.gitignore
new file mode 100644
index 0000000..11f5d71
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-02-scoped-styles/.gitignore
@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/09 - deeper into components/cmp-adv-02-scoped-styles/HOW-TO-USE.pdf b/09 - deeper into components/cmp-adv-02-scoped-styles/HOW-TO-USE.pdf
new file mode 100644
index 0000000..00d28ea
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-02-scoped-styles/HOW-TO-USE.pdf
Binary files differ
diff --git a/09 - deeper into components/cmp-adv-02-scoped-styles/babel.config.js b/09 - deeper into components/cmp-adv-02-scoped-styles/babel.config.js
new file mode 100644
index 0000000..e955840
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-02-scoped-styles/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+ presets: [
+ '@vue/cli-plugin-babel/preset'
+ ]
+}
diff --git a/09 - deeper into components/cmp-adv-02-scoped-styles/package.json b/09 - deeper into components/cmp-adv-02-scoped-styles/package.json
new file mode 100644
index 0000000..52d25ec
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-02-scoped-styles/package.json
@@ -0,0 +1,23 @@
+{
+ "name": "vue-first-app",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "serve": "vue-cli-service serve",
+ "build": "vue-cli-service build",
+ "lint": "vue-cli-service lint"
+ },
+ "dependencies": {
+ "core-js": "^3.6.5",
+ "vue": "^3.0.0"
+ },
+ "devDependencies": {
+ "@vue/cli-plugin-babel": "~4.5.0",
+ "@vue/cli-plugin-eslint": "~4.5.0",
+ "@vue/cli-service": "~4.5.0",
+ "@vue/compiler-sfc": "^3.0.0-0",
+ "babel-eslint": "^10.1.0",
+ "eslint": "^6.7.2",
+ "eslint-plugin-vue": "^7.0.0-0"
+ }
+}
diff --git a/09 - deeper into components/cmp-adv-02-scoped-styles/public/favicon.ico b/09 - deeper into components/cmp-adv-02-scoped-styles/public/favicon.ico
new file mode 100644
index 0000000..df36fcf
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-02-scoped-styles/public/favicon.ico
Binary files differ
diff --git a/09 - deeper into components/cmp-adv-02-scoped-styles/public/index.html b/09 - deeper into components/cmp-adv-02-scoped-styles/public/index.html
new file mode 100644
index 0000000..4123528
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-02-scoped-styles/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
+ <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+ <title><%= htmlWebpackPlugin.options.title %></title>
+ </head>
+ <body>
+ <noscript>
+ <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+ </noscript>
+ <div id="app"></div>
+ <!-- built files will be auto injected -->
+ </body>
+</html>
diff --git a/09 - deeper into components/cmp-adv-02-scoped-styles/src/App.vue b/09 - deeper into components/cmp-adv-02-scoped-styles/src/App.vue
new file mode 100644
index 0000000..7b4a6c8
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-02-scoped-styles/src/App.vue
@@ -0,0 +1,45 @@
+<template>
+ <div>
+ <the-header></the-header>
+ <!-- <TheHeader /> -->
+ <badge-list></badge-list>
+ <user-info
+ :full-name="activeUser.name"
+ :info-text="activeUser.description"
+ :role="activeUser.role"
+ ></user-info>
+ </div>
+</template>
+
+<script>
+import TheHeader from './components/TheHeader.vue';
+import BadgeList from './components/BadgeList.vue';
+import UserInfo from './components/UserInfo.vue';
+
+export default {
+ components: {
+ TheHeader,
+ BadgeList,
+ UserInfo
+ },
+ data() {
+ return {
+ activeUser: {
+ name: 'Maximilian Schwarzmüller',
+ description: 'Site owner and admin',
+ role: 'admin',
+ },
+ };
+ },
+};
+</script>
+
+<style>
+html {
+ font-family: sans-serif;
+}
+
+body {
+ margin: 0;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-02-scoped-styles/src/components/BadgeList.vue b/09 - deeper into components/cmp-adv-02-scoped-styles/src/components/BadgeList.vue
new file mode 100644
index 0000000..3ff5202
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-02-scoped-styles/src/components/BadgeList.vue
@@ -0,0 +1,38 @@
+<template>
+ <section>
+ <h2>Available Badges</h2>
+ <ul>
+ <li>
+ <base-badge type="admin" caption="ADMIN"></base-badge>
+ </li>
+ <li>
+ <base-badge type="author" caption="AUTHOR"></base-badge>
+ </li>
+ </ul>
+ </section>
+</template>
+
+<style scoped>
+section {
+ margin: 2rem auto;
+ max-width: 30rem;
+ border-radius: 12px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ padding: 1rem;
+}
+section h2 {
+ margin: 0.5rem 0;
+ color: #3a3a3a;
+}
+ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: row;
+}
+
+li {
+ margin-right: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-02-scoped-styles/src/components/BaseBadge.vue b/09 - deeper into components/cmp-adv-02-scoped-styles/src/components/BaseBadge.vue
new file mode 100644
index 0000000..c494bc6
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-02-scoped-styles/src/components/BaseBadge.vue
@@ -0,0 +1,37 @@
+<template>
+ <span class="badge" :class="classes">{{ caption }}</span>
+</template>
+
+<script>
+export default {
+ props: ['type', 'caption'],
+ computed: {
+ classes() {
+ return {
+ 'badge--admin': this.type === 'admin',
+ 'badge--author': this.type === 'author',
+ };
+ },
+ },
+};
+</script>
+
+<style scoped>
+.badge {
+ display: inline-block;
+ padding: 0.5rem 1rem;
+ border-radius: 30px;
+ background-color: #ccc;
+ color: #2e2e2e;
+}
+
+.badge--admin {
+ background-color: #810036;
+ color: white;
+}
+
+.badge--author {
+ background-color: #002c8a;
+ color: white;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-02-scoped-styles/src/components/TheHeader.vue b/09 - deeper into components/cmp-adv-02-scoped-styles/src/components/TheHeader.vue
new file mode 100644
index 0000000..aeace6e
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-02-scoped-styles/src/components/TheHeader.vue
@@ -0,0 +1,21 @@
+<template>
+ <header>
+ <h1>More on Vue Components</h1>
+ </header>
+</template>
+
+<style scoped>
+ header {
+ width: 100%;
+ height: 5rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #14005e;
+ }
+
+ header h1 {
+ color: white;
+ margin: 0;
+ }
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-02-scoped-styles/src/components/UserInfo.vue b/09 - deeper into components/cmp-adv-02-scoped-styles/src/components/UserInfo.vue
new file mode 100644
index 0000000..04dcf0f
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-02-scoped-styles/src/components/UserInfo.vue
@@ -0,0 +1,31 @@
+<template>
+ <section>
+ <header>
+ <h3>{{ fullName }}</h3>
+ <base-badge :type="role" :caption="role.toUpperCase()"></base-badge>
+ </header>
+ <p>{{ infoText }}</p>
+ </section>
+</template>
+
+<script>
+export default {
+ props: ['fullName', 'infoText', 'role'],
+};
+</script>
+
+<style scoped>
+section {
+ margin: 2rem auto;
+ max-width: 30rem;
+ border-radius: 12px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ padding: 1rem;
+}
+
+section header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-02-scoped-styles/src/main.js b/09 - deeper into components/cmp-adv-02-scoped-styles/src/main.js
new file mode 100644
index 0000000..017f08f
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-02-scoped-styles/src/main.js
@@ -0,0 +1,10 @@
+import { createApp } from 'vue';
+
+import App from './App.vue';
+import BaseBadge from './components/BaseBadge.vue';
+
+const app = createApp(App);
+
+app.component('base-badge', BaseBadge);
+
+app.mount('#app');
diff --git a/09 - deeper into components/cmp-adv-03-introducing-slots/.browserslistrc b/09 - deeper into components/cmp-adv-03-introducing-slots/.browserslistrc
new file mode 100644
index 0000000..214388f
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-03-introducing-slots/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
diff --git a/09 - deeper into components/cmp-adv-03-introducing-slots/.eslintrc.js b/09 - deeper into components/cmp-adv-03-introducing-slots/.eslintrc.js
new file mode 100644
index 0000000..3391da1
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-03-introducing-slots/.eslintrc.js
@@ -0,0 +1,17 @@
+module.exports = {
+ root: true,
+ env: {
+ node: true
+ },
+ 'extends': [
+ 'plugin:vue/vue3-essential',
+ 'eslint:recommended'
+ ],
+ parserOptions: {
+ parser: 'babel-eslint'
+ },
+ rules: {
+ 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+ 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+ }
+}
diff --git a/09 - deeper into components/cmp-adv-03-introducing-slots/.gitignore b/09 - deeper into components/cmp-adv-03-introducing-slots/.gitignore
new file mode 100644
index 0000000..11f5d71
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-03-introducing-slots/.gitignore
@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/09 - deeper into components/cmp-adv-03-introducing-slots/HOW-TO-USE.pdf b/09 - deeper into components/cmp-adv-03-introducing-slots/HOW-TO-USE.pdf
new file mode 100644
index 0000000..00d28ea
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-03-introducing-slots/HOW-TO-USE.pdf
Binary files differ
diff --git a/09 - deeper into components/cmp-adv-03-introducing-slots/babel.config.js b/09 - deeper into components/cmp-adv-03-introducing-slots/babel.config.js
new file mode 100644
index 0000000..e955840
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-03-introducing-slots/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+ presets: [
+ '@vue/cli-plugin-babel/preset'
+ ]
+}
diff --git a/09 - deeper into components/cmp-adv-03-introducing-slots/package.json b/09 - deeper into components/cmp-adv-03-introducing-slots/package.json
new file mode 100644
index 0000000..52d25ec
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-03-introducing-slots/package.json
@@ -0,0 +1,23 @@
+{
+ "name": "vue-first-app",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "serve": "vue-cli-service serve",
+ "build": "vue-cli-service build",
+ "lint": "vue-cli-service lint"
+ },
+ "dependencies": {
+ "core-js": "^3.6.5",
+ "vue": "^3.0.0"
+ },
+ "devDependencies": {
+ "@vue/cli-plugin-babel": "~4.5.0",
+ "@vue/cli-plugin-eslint": "~4.5.0",
+ "@vue/cli-service": "~4.5.0",
+ "@vue/compiler-sfc": "^3.0.0-0",
+ "babel-eslint": "^10.1.0",
+ "eslint": "^6.7.2",
+ "eslint-plugin-vue": "^7.0.0-0"
+ }
+}
diff --git a/09 - deeper into components/cmp-adv-03-introducing-slots/public/favicon.ico b/09 - deeper into components/cmp-adv-03-introducing-slots/public/favicon.ico
new file mode 100644
index 0000000..df36fcf
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-03-introducing-slots/public/favicon.ico
Binary files differ
diff --git a/09 - deeper into components/cmp-adv-03-introducing-slots/public/index.html b/09 - deeper into components/cmp-adv-03-introducing-slots/public/index.html
new file mode 100644
index 0000000..4123528
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-03-introducing-slots/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
+ <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+ <title><%= htmlWebpackPlugin.options.title %></title>
+ </head>
+ <body>
+ <noscript>
+ <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+ </noscript>
+ <div id="app"></div>
+ <!-- built files will be auto injected -->
+ </body>
+</html>
diff --git a/09 - deeper into components/cmp-adv-03-introducing-slots/src/App.vue b/09 - deeper into components/cmp-adv-03-introducing-slots/src/App.vue
new file mode 100644
index 0000000..7b4a6c8
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-03-introducing-slots/src/App.vue
@@ -0,0 +1,45 @@
+<template>
+ <div>
+ <the-header></the-header>
+ <!-- <TheHeader /> -->
+ <badge-list></badge-list>
+ <user-info
+ :full-name="activeUser.name"
+ :info-text="activeUser.description"
+ :role="activeUser.role"
+ ></user-info>
+ </div>
+</template>
+
+<script>
+import TheHeader from './components/TheHeader.vue';
+import BadgeList from './components/BadgeList.vue';
+import UserInfo from './components/UserInfo.vue';
+
+export default {
+ components: {
+ TheHeader,
+ BadgeList,
+ UserInfo
+ },
+ data() {
+ return {
+ activeUser: {
+ name: 'Maximilian Schwarzmüller',
+ description: 'Site owner and admin',
+ role: 'admin',
+ },
+ };
+ },
+};
+</script>
+
+<style>
+html {
+ font-family: sans-serif;
+}
+
+body {
+ margin: 0;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-03-introducing-slots/src/components/BadgeList.vue b/09 - deeper into components/cmp-adv-03-introducing-slots/src/components/BadgeList.vue
new file mode 100644
index 0000000..3ff5202
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-03-introducing-slots/src/components/BadgeList.vue
@@ -0,0 +1,38 @@
+<template>
+ <section>
+ <h2>Available Badges</h2>
+ <ul>
+ <li>
+ <base-badge type="admin" caption="ADMIN"></base-badge>
+ </li>
+ <li>
+ <base-badge type="author" caption="AUTHOR"></base-badge>
+ </li>
+ </ul>
+ </section>
+</template>
+
+<style scoped>
+section {
+ margin: 2rem auto;
+ max-width: 30rem;
+ border-radius: 12px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ padding: 1rem;
+}
+section h2 {
+ margin: 0.5rem 0;
+ color: #3a3a3a;
+}
+ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: row;
+}
+
+li {
+ margin-right: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-03-introducing-slots/src/components/BaseBadge.vue b/09 - deeper into components/cmp-adv-03-introducing-slots/src/components/BaseBadge.vue
new file mode 100644
index 0000000..c494bc6
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-03-introducing-slots/src/components/BaseBadge.vue
@@ -0,0 +1,37 @@
+<template>
+ <span class="badge" :class="classes">{{ caption }}</span>
+</template>
+
+<script>
+export default {
+ props: ['type', 'caption'],
+ computed: {
+ classes() {
+ return {
+ 'badge--admin': this.type === 'admin',
+ 'badge--author': this.type === 'author',
+ };
+ },
+ },
+};
+</script>
+
+<style scoped>
+.badge {
+ display: inline-block;
+ padding: 0.5rem 1rem;
+ border-radius: 30px;
+ background-color: #ccc;
+ color: #2e2e2e;
+}
+
+.badge--admin {
+ background-color: #810036;
+ color: white;
+}
+
+.badge--author {
+ background-color: #002c8a;
+ color: white;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-03-introducing-slots/src/components/BaseCard.vue b/09 - deeper into components/cmp-adv-03-introducing-slots/src/components/BaseCard.vue
new file mode 100644
index 0000000..7a1b120
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-03-introducing-slots/src/components/BaseCard.vue
@@ -0,0 +1,20 @@
+<template>
+ <div>
+ <slot></slot>
+ </div>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style scoped>
+div {
+ margin: 2rem auto;
+ max-width: 30rem;
+ border-radius: 12px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ padding: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-03-introducing-slots/src/components/TheHeader.vue b/09 - deeper into components/cmp-adv-03-introducing-slots/src/components/TheHeader.vue
new file mode 100644
index 0000000..aeace6e
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-03-introducing-slots/src/components/TheHeader.vue
@@ -0,0 +1,21 @@
+<template>
+ <header>
+ <h1>More on Vue Components</h1>
+ </header>
+</template>
+
+<style scoped>
+ header {
+ width: 100%;
+ height: 5rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #14005e;
+ }
+
+ header h1 {
+ color: white;
+ margin: 0;
+ }
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-03-introducing-slots/src/components/UserInfo.vue b/09 - deeper into components/cmp-adv-03-introducing-slots/src/components/UserInfo.vue
new file mode 100644
index 0000000..6f0bd6b
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-03-introducing-slots/src/components/UserInfo.vue
@@ -0,0 +1,25 @@
+<template>
+ <section>
+ <base-card>
+ <header>
+ <h3>{{ fullName }}</h3>
+ <base-badge :type="role" :caption="role.toUpperCase()"></base-badge>
+ </header>
+ <p>{{ infoText }}</p>
+ </base-card>
+ </section>
+</template>
+
+<script>
+export default {
+ props: ['fullName', 'infoText', 'role'],
+};
+</script>
+
+<style scoped>
+section header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-03-introducing-slots/src/main.js b/09 - deeper into components/cmp-adv-03-introducing-slots/src/main.js
new file mode 100644
index 0000000..23a57d1
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-03-introducing-slots/src/main.js
@@ -0,0 +1,12 @@
+import { createApp } from 'vue';
+
+import App from './App.vue';
+import BaseBadge from './components/BaseBadge.vue';
+import BaseCard from './components/BaseCard.vue';
+
+const app = createApp(App);
+
+app.component('base-badge', BaseBadge);
+app.component('base-card', BaseCard);
+
+app.mount('#app');
diff --git a/09 - deeper into components/cmp-adv-04-named-slots/.browserslistrc b/09 - deeper into components/cmp-adv-04-named-slots/.browserslistrc
new file mode 100644
index 0000000..214388f
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-04-named-slots/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
diff --git a/09 - deeper into components/cmp-adv-04-named-slots/.eslintrc.js b/09 - deeper into components/cmp-adv-04-named-slots/.eslintrc.js
new file mode 100644
index 0000000..3391da1
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-04-named-slots/.eslintrc.js
@@ -0,0 +1,17 @@
+module.exports = {
+ root: true,
+ env: {
+ node: true
+ },
+ 'extends': [
+ 'plugin:vue/vue3-essential',
+ 'eslint:recommended'
+ ],
+ parserOptions: {
+ parser: 'babel-eslint'
+ },
+ rules: {
+ 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+ 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+ }
+}
diff --git a/09 - deeper into components/cmp-adv-04-named-slots/.gitignore b/09 - deeper into components/cmp-adv-04-named-slots/.gitignore
new file mode 100644
index 0000000..11f5d71
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-04-named-slots/.gitignore
@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/09 - deeper into components/cmp-adv-04-named-slots/HOW-TO-USE.pdf b/09 - deeper into components/cmp-adv-04-named-slots/HOW-TO-USE.pdf
new file mode 100644
index 0000000..00d28ea
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-04-named-slots/HOW-TO-USE.pdf
Binary files differ
diff --git a/09 - deeper into components/cmp-adv-04-named-slots/babel.config.js b/09 - deeper into components/cmp-adv-04-named-slots/babel.config.js
new file mode 100644
index 0000000..e955840
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-04-named-slots/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+ presets: [
+ '@vue/cli-plugin-babel/preset'
+ ]
+}
diff --git a/09 - deeper into components/cmp-adv-04-named-slots/package.json b/09 - deeper into components/cmp-adv-04-named-slots/package.json
new file mode 100644
index 0000000..52d25ec
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-04-named-slots/package.json
@@ -0,0 +1,23 @@
+{
+ "name": "vue-first-app",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "serve": "vue-cli-service serve",
+ "build": "vue-cli-service build",
+ "lint": "vue-cli-service lint"
+ },
+ "dependencies": {
+ "core-js": "^3.6.5",
+ "vue": "^3.0.0"
+ },
+ "devDependencies": {
+ "@vue/cli-plugin-babel": "~4.5.0",
+ "@vue/cli-plugin-eslint": "~4.5.0",
+ "@vue/cli-service": "~4.5.0",
+ "@vue/compiler-sfc": "^3.0.0-0",
+ "babel-eslint": "^10.1.0",
+ "eslint": "^6.7.2",
+ "eslint-plugin-vue": "^7.0.0-0"
+ }
+}
diff --git a/09 - deeper into components/cmp-adv-04-named-slots/public/favicon.ico b/09 - deeper into components/cmp-adv-04-named-slots/public/favicon.ico
new file mode 100644
index 0000000..df36fcf
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-04-named-slots/public/favicon.ico
Binary files differ
diff --git a/09 - deeper into components/cmp-adv-04-named-slots/public/index.html b/09 - deeper into components/cmp-adv-04-named-slots/public/index.html
new file mode 100644
index 0000000..4123528
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-04-named-slots/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
+ <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+ <title><%= htmlWebpackPlugin.options.title %></title>
+ </head>
+ <body>
+ <noscript>
+ <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+ </noscript>
+ <div id="app"></div>
+ <!-- built files will be auto injected -->
+ </body>
+</html>
diff --git a/09 - deeper into components/cmp-adv-04-named-slots/src/App.vue b/09 - deeper into components/cmp-adv-04-named-slots/src/App.vue
new file mode 100644
index 0000000..7b4a6c8
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-04-named-slots/src/App.vue
@@ -0,0 +1,45 @@
+<template>
+ <div>
+ <the-header></the-header>
+ <!-- <TheHeader /> -->
+ <badge-list></badge-list>
+ <user-info
+ :full-name="activeUser.name"
+ :info-text="activeUser.description"
+ :role="activeUser.role"
+ ></user-info>
+ </div>
+</template>
+
+<script>
+import TheHeader from './components/TheHeader.vue';
+import BadgeList from './components/BadgeList.vue';
+import UserInfo from './components/UserInfo.vue';
+
+export default {
+ components: {
+ TheHeader,
+ BadgeList,
+ UserInfo
+ },
+ data() {
+ return {
+ activeUser: {
+ name: 'Maximilian Schwarzmüller',
+ description: 'Site owner and admin',
+ role: 'admin',
+ },
+ };
+ },
+};
+</script>
+
+<style>
+html {
+ font-family: sans-serif;
+}
+
+body {
+ margin: 0;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-04-named-slots/src/components/BadgeList.vue b/09 - deeper into components/cmp-adv-04-named-slots/src/components/BadgeList.vue
new file mode 100644
index 0000000..4be9746
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-04-named-slots/src/components/BadgeList.vue
@@ -0,0 +1,37 @@
+<template>
+ <section>
+ <base-card>
+ <template v-slot:header>
+ <h2>Available Badges</h2>
+ </template>
+ <template v-slot:default>
+ <ul>
+ <li>
+ <base-badge type="admin" caption="ADMIN"></base-badge>
+ </li>
+ <li>
+ <base-badge type="author" caption="AUTHOR"></base-badge>
+ </li>
+ </ul>
+ </template>
+ </base-card>
+ </section>
+</template>
+
+<style scoped>
+section h2 {
+ margin: 0.5rem 0;
+ color: #3a3a3a;
+}
+ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: row;
+}
+
+li {
+ margin-right: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-04-named-slots/src/components/BaseBadge.vue b/09 - deeper into components/cmp-adv-04-named-slots/src/components/BaseBadge.vue
new file mode 100644
index 0000000..c494bc6
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-04-named-slots/src/components/BaseBadge.vue
@@ -0,0 +1,37 @@
+<template>
+ <span class="badge" :class="classes">{{ caption }}</span>
+</template>
+
+<script>
+export default {
+ props: ['type', 'caption'],
+ computed: {
+ classes() {
+ return {
+ 'badge--admin': this.type === 'admin',
+ 'badge--author': this.type === 'author',
+ };
+ },
+ },
+};
+</script>
+
+<style scoped>
+.badge {
+ display: inline-block;
+ padding: 0.5rem 1rem;
+ border-radius: 30px;
+ background-color: #ccc;
+ color: #2e2e2e;
+}
+
+.badge--admin {
+ background-color: #810036;
+ color: white;
+}
+
+.badge--author {
+ background-color: #002c8a;
+ color: white;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-04-named-slots/src/components/BaseCard.vue b/09 - deeper into components/cmp-adv-04-named-slots/src/components/BaseCard.vue
new file mode 100644
index 0000000..efcfe4b
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-04-named-slots/src/components/BaseCard.vue
@@ -0,0 +1,27 @@
+<template>
+ <div>
+ <header>
+ <slot name="header"></slot>
+ </header>
+ <slot></slot>
+ </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped>
+header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+div {
+ margin: 2rem auto;
+ max-width: 30rem;
+ border-radius: 12px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ padding: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-04-named-slots/src/components/TheHeader.vue b/09 - deeper into components/cmp-adv-04-named-slots/src/components/TheHeader.vue
new file mode 100644
index 0000000..aeace6e
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-04-named-slots/src/components/TheHeader.vue
@@ -0,0 +1,21 @@
+<template>
+ <header>
+ <h1>More on Vue Components</h1>
+ </header>
+</template>
+
+<style scoped>
+ header {
+ width: 100%;
+ height: 5rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #14005e;
+ }
+
+ header h1 {
+ color: white;
+ margin: 0;
+ }
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-04-named-slots/src/components/UserInfo.vue b/09 - deeper into components/cmp-adv-04-named-slots/src/components/UserInfo.vue
new file mode 100644
index 0000000..f76662b
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-04-named-slots/src/components/UserInfo.vue
@@ -0,0 +1,19 @@
+<template>
+ <section>
+ <base-card>
+ <template v-slot:header>
+ <h3>{{ fullName }}</h3>
+ <base-badge :type="role" :caption="role.toUpperCase()"></base-badge>
+ </template>
+ <template v-slot:default>
+ <p>{{ infoText }}</p>
+ </template>
+ </base-card>
+ </section>
+</template>
+
+<script>
+export default {
+ props: ['fullName', 'infoText', 'role'],
+};
+</script>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-04-named-slots/src/main.js b/09 - deeper into components/cmp-adv-04-named-slots/src/main.js
new file mode 100644
index 0000000..23a57d1
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-04-named-slots/src/main.js
@@ -0,0 +1,12 @@
+import { createApp } from 'vue';
+
+import App from './App.vue';
+import BaseBadge from './components/BaseBadge.vue';
+import BaseCard from './components/BaseCard.vue';
+
+const app = createApp(App);
+
+app.component('base-badge', BaseBadge);
+app.component('base-card', BaseCard);
+
+app.mount('#app');
diff --git a/09 - deeper into components/cmp-adv-05-more-on-slots/.browserslistrc b/09 - deeper into components/cmp-adv-05-more-on-slots/.browserslistrc
new file mode 100644
index 0000000..214388f
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-05-more-on-slots/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
diff --git a/09 - deeper into components/cmp-adv-05-more-on-slots/.eslintrc.js b/09 - deeper into components/cmp-adv-05-more-on-slots/.eslintrc.js
new file mode 100644
index 0000000..3391da1
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-05-more-on-slots/.eslintrc.js
@@ -0,0 +1,17 @@
+module.exports = {
+ root: true,
+ env: {
+ node: true
+ },
+ 'extends': [
+ 'plugin:vue/vue3-essential',
+ 'eslint:recommended'
+ ],
+ parserOptions: {
+ parser: 'babel-eslint'
+ },
+ rules: {
+ 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+ 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+ }
+}
diff --git a/09 - deeper into components/cmp-adv-05-more-on-slots/.gitignore b/09 - deeper into components/cmp-adv-05-more-on-slots/.gitignore
new file mode 100644
index 0000000..11f5d71
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-05-more-on-slots/.gitignore
@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/09 - deeper into components/cmp-adv-05-more-on-slots/HOW-TO-USE.pdf b/09 - deeper into components/cmp-adv-05-more-on-slots/HOW-TO-USE.pdf
new file mode 100644
index 0000000..00d28ea
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-05-more-on-slots/HOW-TO-USE.pdf
Binary files differ
diff --git a/09 - deeper into components/cmp-adv-05-more-on-slots/babel.config.js b/09 - deeper into components/cmp-adv-05-more-on-slots/babel.config.js
new file mode 100644
index 0000000..e955840
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-05-more-on-slots/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+ presets: [
+ '@vue/cli-plugin-babel/preset'
+ ]
+}
diff --git a/09 - deeper into components/cmp-adv-05-more-on-slots/package.json b/09 - deeper into components/cmp-adv-05-more-on-slots/package.json
new file mode 100644
index 0000000..52d25ec
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-05-more-on-slots/package.json
@@ -0,0 +1,23 @@
+{
+ "name": "vue-first-app",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "serve": "vue-cli-service serve",
+ "build": "vue-cli-service build",
+ "lint": "vue-cli-service lint"
+ },
+ "dependencies": {
+ "core-js": "^3.6.5",
+ "vue": "^3.0.0"
+ },
+ "devDependencies": {
+ "@vue/cli-plugin-babel": "~4.5.0",
+ "@vue/cli-plugin-eslint": "~4.5.0",
+ "@vue/cli-service": "~4.5.0",
+ "@vue/compiler-sfc": "^3.0.0-0",
+ "babel-eslint": "^10.1.0",
+ "eslint": "^6.7.2",
+ "eslint-plugin-vue": "^7.0.0-0"
+ }
+}
diff --git a/09 - deeper into components/cmp-adv-05-more-on-slots/public/favicon.ico b/09 - deeper into components/cmp-adv-05-more-on-slots/public/favicon.ico
new file mode 100644
index 0000000..df36fcf
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-05-more-on-slots/public/favicon.ico
Binary files differ
diff --git a/09 - deeper into components/cmp-adv-05-more-on-slots/public/index.html b/09 - deeper into components/cmp-adv-05-more-on-slots/public/index.html
new file mode 100644
index 0000000..4123528
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-05-more-on-slots/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
+ <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+ <title><%= htmlWebpackPlugin.options.title %></title>
+ </head>
+ <body>
+ <noscript>
+ <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+ </noscript>
+ <div id="app"></div>
+ <!-- built files will be auto injected -->
+ </body>
+</html>
diff --git a/09 - deeper into components/cmp-adv-05-more-on-slots/src/App.vue b/09 - deeper into components/cmp-adv-05-more-on-slots/src/App.vue
new file mode 100644
index 0000000..7b4a6c8
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-05-more-on-slots/src/App.vue
@@ -0,0 +1,45 @@
+<template>
+ <div>
+ <the-header></the-header>
+ <!-- <TheHeader /> -->
+ <badge-list></badge-list>
+ <user-info
+ :full-name="activeUser.name"
+ :info-text="activeUser.description"
+ :role="activeUser.role"
+ ></user-info>
+ </div>
+</template>
+
+<script>
+import TheHeader from './components/TheHeader.vue';
+import BadgeList from './components/BadgeList.vue';
+import UserInfo from './components/UserInfo.vue';
+
+export default {
+ components: {
+ TheHeader,
+ BadgeList,
+ UserInfo
+ },
+ data() {
+ return {
+ activeUser: {
+ name: 'Maximilian Schwarzmüller',
+ description: 'Site owner and admin',
+ role: 'admin',
+ },
+ };
+ },
+};
+</script>
+
+<style>
+html {
+ font-family: sans-serif;
+}
+
+body {
+ margin: 0;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-05-more-on-slots/src/components/BadgeList.vue b/09 - deeper into components/cmp-adv-05-more-on-slots/src/components/BadgeList.vue
new file mode 100644
index 0000000..2d3204e
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-05-more-on-slots/src/components/BadgeList.vue
@@ -0,0 +1,34 @@
+<template>
+ <section>
+ <base-card>
+ <template #default>
+ <ul>
+ <li>
+ <base-badge type="admin" caption="ADMIN"></base-badge>
+ </li>
+ <li>
+ <base-badge type="author" caption="AUTHOR"></base-badge>
+ </li>
+ </ul>
+ </template>
+ </base-card>
+ </section>
+</template>
+
+<style scoped>
+section h2 {
+ margin: 0.5rem 0;
+ color: #3a3a3a;
+}
+ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: row;
+}
+
+li {
+ margin-right: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-05-more-on-slots/src/components/BaseBadge.vue b/09 - deeper into components/cmp-adv-05-more-on-slots/src/components/BaseBadge.vue
new file mode 100644
index 0000000..063a539
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-05-more-on-slots/src/components/BaseBadge.vue
@@ -0,0 +1,37 @@
+<template>
+ <span class="badge" :class="classes">{{ caption }}</span>
+</template>
+
+<script>
+export default {
+ props: ['type', 'caption'],
+ computed: {
+ classes() {
+ return {
+ 'badge--admin': this.type === 'admin',
+ 'badge--author': this.type === 'author',
+ };
+ },
+ }
+};
+</script>
+
+<style scoped>
+.badge {
+ display: inline-block;
+ padding: 0.5rem 1rem;
+ border-radius: 30px;
+ background-color: #ccc;
+ color: #2e2e2e;
+}
+
+.badge--admin {
+ background-color: #810036;
+ color: white;
+}
+
+.badge--author {
+ background-color: #002c8a;
+ color: white;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-05-more-on-slots/src/components/BaseCard.vue b/09 - deeper into components/cmp-adv-05-more-on-slots/src/components/BaseCard.vue
new file mode 100644
index 0000000..07e45ac
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-05-more-on-slots/src/components/BaseCard.vue
@@ -0,0 +1,33 @@
+<template>
+ <div>
+ <header v-if="$slots.header">
+ <slot name="header">
+ <!-- <h2>The Default</h2> -->
+ </slot>
+ </header>
+ <slot></slot>
+ </div>
+</template>
+
+<script>
+export default {
+ mounted() {
+ console.log(this.$slots.header);
+ }
+};
+</script>
+
+<style scoped>
+header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+div {
+ margin: 2rem auto;
+ max-width: 30rem;
+ border-radius: 12px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ padding: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-05-more-on-slots/src/components/TheHeader.vue b/09 - deeper into components/cmp-adv-05-more-on-slots/src/components/TheHeader.vue
new file mode 100644
index 0000000..aeace6e
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-05-more-on-slots/src/components/TheHeader.vue
@@ -0,0 +1,21 @@
+<template>
+ <header>
+ <h1>More on Vue Components</h1>
+ </header>
+</template>
+
+<style scoped>
+ header {
+ width: 100%;
+ height: 5rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #14005e;
+ }
+
+ header h1 {
+ color: white;
+ margin: 0;
+ }
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-05-more-on-slots/src/components/UserInfo.vue b/09 - deeper into components/cmp-adv-05-more-on-slots/src/components/UserInfo.vue
new file mode 100644
index 0000000..4caedcd
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-05-more-on-slots/src/components/UserInfo.vue
@@ -0,0 +1,19 @@
+<template>
+ <section>
+ <base-card>
+ <template #header>
+ <h3>{{ fullName }}</h3>
+ <base-badge :type="role" :caption="role.toUpperCase()"></base-badge>
+ </template>
+ <template #default>
+ <p>{{ infoText }}</p>
+ </template>
+ </base-card>
+ </section>
+</template>
+
+<script>
+export default {
+ props: ['fullName', 'infoText', 'role'],
+};
+</script>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-05-more-on-slots/src/main.js b/09 - deeper into components/cmp-adv-05-more-on-slots/src/main.js
new file mode 100644
index 0000000..23a57d1
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-05-more-on-slots/src/main.js
@@ -0,0 +1,12 @@
+import { createApp } from 'vue';
+
+import App from './App.vue';
+import BaseBadge from './components/BaseBadge.vue';
+import BaseCard from './components/BaseCard.vue';
+
+const app = createApp(App);
+
+app.component('base-badge', BaseBadge);
+app.component('base-card', BaseCard);
+
+app.mount('#app');
diff --git a/09 - deeper into components/cmp-adv-06-scoped-slots/.browserslistrc b/09 - deeper into components/cmp-adv-06-scoped-slots/.browserslistrc
new file mode 100644
index 0000000..214388f
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-06-scoped-slots/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
diff --git a/09 - deeper into components/cmp-adv-06-scoped-slots/.eslintrc.js b/09 - deeper into components/cmp-adv-06-scoped-slots/.eslintrc.js
new file mode 100644
index 0000000..3391da1
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-06-scoped-slots/.eslintrc.js
@@ -0,0 +1,17 @@
+module.exports = {
+ root: true,
+ env: {
+ node: true
+ },
+ 'extends': [
+ 'plugin:vue/vue3-essential',
+ 'eslint:recommended'
+ ],
+ parserOptions: {
+ parser: 'babel-eslint'
+ },
+ rules: {
+ 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+ 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+ }
+}
diff --git a/09 - deeper into components/cmp-adv-06-scoped-slots/.gitignore b/09 - deeper into components/cmp-adv-06-scoped-slots/.gitignore
new file mode 100644
index 0000000..11f5d71
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-06-scoped-slots/.gitignore
@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/09 - deeper into components/cmp-adv-06-scoped-slots/HOW-TO-USE.pdf b/09 - deeper into components/cmp-adv-06-scoped-slots/HOW-TO-USE.pdf
new file mode 100644
index 0000000..00d28ea
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-06-scoped-slots/HOW-TO-USE.pdf
Binary files differ
diff --git a/09 - deeper into components/cmp-adv-06-scoped-slots/babel.config.js b/09 - deeper into components/cmp-adv-06-scoped-slots/babel.config.js
new file mode 100644
index 0000000..e955840
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-06-scoped-slots/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+ presets: [
+ '@vue/cli-plugin-babel/preset'
+ ]
+}
diff --git a/09 - deeper into components/cmp-adv-06-scoped-slots/package.json b/09 - deeper into components/cmp-adv-06-scoped-slots/package.json
new file mode 100644
index 0000000..52d25ec
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-06-scoped-slots/package.json
@@ -0,0 +1,23 @@
+{
+ "name": "vue-first-app",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "serve": "vue-cli-service serve",
+ "build": "vue-cli-service build",
+ "lint": "vue-cli-service lint"
+ },
+ "dependencies": {
+ "core-js": "^3.6.5",
+ "vue": "^3.0.0"
+ },
+ "devDependencies": {
+ "@vue/cli-plugin-babel": "~4.5.0",
+ "@vue/cli-plugin-eslint": "~4.5.0",
+ "@vue/cli-service": "~4.5.0",
+ "@vue/compiler-sfc": "^3.0.0-0",
+ "babel-eslint": "^10.1.0",
+ "eslint": "^6.7.2",
+ "eslint-plugin-vue": "^7.0.0-0"
+ }
+}
diff --git a/09 - deeper into components/cmp-adv-06-scoped-slots/public/favicon.ico b/09 - deeper into components/cmp-adv-06-scoped-slots/public/favicon.ico
new file mode 100644
index 0000000..df36fcf
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-06-scoped-slots/public/favicon.ico
Binary files differ
diff --git a/09 - deeper into components/cmp-adv-06-scoped-slots/public/index.html b/09 - deeper into components/cmp-adv-06-scoped-slots/public/index.html
new file mode 100644
index 0000000..4123528
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-06-scoped-slots/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
+ <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+ <title><%= htmlWebpackPlugin.options.title %></title>
+ </head>
+ <body>
+ <noscript>
+ <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+ </noscript>
+ <div id="app"></div>
+ <!-- built files will be auto injected -->
+ </body>
+</html>
diff --git a/09 - deeper into components/cmp-adv-06-scoped-slots/src/App.vue b/09 - deeper into components/cmp-adv-06-scoped-slots/src/App.vue
new file mode 100644
index 0000000..e1916ca
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-06-scoped-slots/src/App.vue
@@ -0,0 +1,51 @@
+<template>
+ <div>
+ <the-header></the-header>
+ <!-- <TheHeader /> -->
+ <badge-list></badge-list>
+ <user-info
+ :full-name="activeUser.name"
+ :info-text="activeUser.description"
+ :role="activeUser.role"
+ ></user-info>
+ <course-goals #default="slotProps">
+ <h2>{{ slotProps.item }}</h2>
+ <p>{{ slotProps['another-prop'] }}</p>
+ </course-goals>
+ </div>
+</template>
+
+<script>
+import TheHeader from './components/TheHeader.vue';
+import BadgeList from './components/BadgeList.vue';
+import UserInfo from './components/UserInfo.vue';
+import CourseGoals from './components/CourseGoals.vue';
+
+export default {
+ components: {
+ TheHeader,
+ BadgeList,
+ UserInfo,
+ CourseGoals,
+ },
+ data() {
+ return {
+ activeUser: {
+ name: 'Maximilian Schwarzmüller',
+ description: 'Site owner and admin',
+ role: 'admin',
+ },
+ };
+ },
+};
+</script>
+
+<style>
+html {
+ font-family: sans-serif;
+}
+
+body {
+ margin: 0;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-06-scoped-slots/src/components/BadgeList.vue b/09 - deeper into components/cmp-adv-06-scoped-slots/src/components/BadgeList.vue
new file mode 100644
index 0000000..2d3204e
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-06-scoped-slots/src/components/BadgeList.vue
@@ -0,0 +1,34 @@
+<template>
+ <section>
+ <base-card>
+ <template #default>
+ <ul>
+ <li>
+ <base-badge type="admin" caption="ADMIN"></base-badge>
+ </li>
+ <li>
+ <base-badge type="author" caption="AUTHOR"></base-badge>
+ </li>
+ </ul>
+ </template>
+ </base-card>
+ </section>
+</template>
+
+<style scoped>
+section h2 {
+ margin: 0.5rem 0;
+ color: #3a3a3a;
+}
+ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: row;
+}
+
+li {
+ margin-right: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-06-scoped-slots/src/components/BaseBadge.vue b/09 - deeper into components/cmp-adv-06-scoped-slots/src/components/BaseBadge.vue
new file mode 100644
index 0000000..063a539
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-06-scoped-slots/src/components/BaseBadge.vue
@@ -0,0 +1,37 @@
+<template>
+ <span class="badge" :class="classes">{{ caption }}</span>
+</template>
+
+<script>
+export default {
+ props: ['type', 'caption'],
+ computed: {
+ classes() {
+ return {
+ 'badge--admin': this.type === 'admin',
+ 'badge--author': this.type === 'author',
+ };
+ },
+ }
+};
+</script>
+
+<style scoped>
+.badge {
+ display: inline-block;
+ padding: 0.5rem 1rem;
+ border-radius: 30px;
+ background-color: #ccc;
+ color: #2e2e2e;
+}
+
+.badge--admin {
+ background-color: #810036;
+ color: white;
+}
+
+.badge--author {
+ background-color: #002c8a;
+ color: white;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-06-scoped-slots/src/components/BaseCard.vue b/09 - deeper into components/cmp-adv-06-scoped-slots/src/components/BaseCard.vue
new file mode 100644
index 0000000..07e45ac
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-06-scoped-slots/src/components/BaseCard.vue
@@ -0,0 +1,33 @@
+<template>
+ <div>
+ <header v-if="$slots.header">
+ <slot name="header">
+ <!-- <h2>The Default</h2> -->
+ </slot>
+ </header>
+ <slot></slot>
+ </div>
+</template>
+
+<script>
+export default {
+ mounted() {
+ console.log(this.$slots.header);
+ }
+};
+</script>
+
+<style scoped>
+header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+div {
+ margin: 2rem auto;
+ max-width: 30rem;
+ border-radius: 12px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ padding: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-06-scoped-slots/src/components/CourseGoals.vue b/09 - deeper into components/cmp-adv-06-scoped-slots/src/components/CourseGoals.vue
new file mode 100644
index 0000000..aed46e7
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-06-scoped-slots/src/components/CourseGoals.vue
@@ -0,0 +1,17 @@
+<template>
+ <ul>
+ <li v-for="goal in goals" :key="goal">
+ <slot :item="goal" another-prop="..."></slot>
+ </li>
+ </ul>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ goals: ['Finish the course', 'Learn Vue'],
+ };
+ },
+};
+</script>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-06-scoped-slots/src/components/TheHeader.vue b/09 - deeper into components/cmp-adv-06-scoped-slots/src/components/TheHeader.vue
new file mode 100644
index 0000000..aeace6e
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-06-scoped-slots/src/components/TheHeader.vue
@@ -0,0 +1,21 @@
+<template>
+ <header>
+ <h1>More on Vue Components</h1>
+ </header>
+</template>
+
+<style scoped>
+ header {
+ width: 100%;
+ height: 5rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #14005e;
+ }
+
+ header h1 {
+ color: white;
+ margin: 0;
+ }
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-06-scoped-slots/src/components/UserInfo.vue b/09 - deeper into components/cmp-adv-06-scoped-slots/src/components/UserInfo.vue
new file mode 100644
index 0000000..4caedcd
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-06-scoped-slots/src/components/UserInfo.vue
@@ -0,0 +1,19 @@
+<template>
+ <section>
+ <base-card>
+ <template #header>
+ <h3>{{ fullName }}</h3>
+ <base-badge :type="role" :caption="role.toUpperCase()"></base-badge>
+ </template>
+ <template #default>
+ <p>{{ infoText }}</p>
+ </template>
+ </base-card>
+ </section>
+</template>
+
+<script>
+export default {
+ props: ['fullName', 'infoText', 'role'],
+};
+</script>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-06-scoped-slots/src/main.js b/09 - deeper into components/cmp-adv-06-scoped-slots/src/main.js
new file mode 100644
index 0000000..23a57d1
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-06-scoped-slots/src/main.js
@@ -0,0 +1,12 @@
+import { createApp } from 'vue';
+
+import App from './App.vue';
+import BaseBadge from './components/BaseBadge.vue';
+import BaseCard from './components/BaseCard.vue';
+
+const app = createApp(App);
+
+app.component('base-badge', BaseBadge);
+app.component('base-card', BaseCard);
+
+app.mount('#app');
diff --git a/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/.browserslistrc b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/.browserslistrc
new file mode 100644
index 0000000..214388f
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
diff --git a/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/.eslintrc.js b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/.eslintrc.js
new file mode 100644
index 0000000..3391da1
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/.eslintrc.js
@@ -0,0 +1,17 @@
+module.exports = {
+ root: true,
+ env: {
+ node: true
+ },
+ 'extends': [
+ 'plugin:vue/vue3-essential',
+ 'eslint:recommended'
+ ],
+ parserOptions: {
+ parser: 'babel-eslint'
+ },
+ rules: {
+ 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+ 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+ }
+}
diff --git a/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/.gitignore b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/.gitignore
new file mode 100644
index 0000000..11f5d71
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/.gitignore
@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/HOW-TO-USE.pdf b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/HOW-TO-USE.pdf
new file mode 100644
index 0000000..00d28ea
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/HOW-TO-USE.pdf
Binary files differ
diff --git a/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/babel.config.js b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/babel.config.js
new file mode 100644
index 0000000..e955840
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+ presets: [
+ '@vue/cli-plugin-babel/preset'
+ ]
+}
diff --git a/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/package.json b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/package.json
new file mode 100644
index 0000000..52d25ec
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/package.json
@@ -0,0 +1,23 @@
+{
+ "name": "vue-first-app",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "serve": "vue-cli-service serve",
+ "build": "vue-cli-service build",
+ "lint": "vue-cli-service lint"
+ },
+ "dependencies": {
+ "core-js": "^3.6.5",
+ "vue": "^3.0.0"
+ },
+ "devDependencies": {
+ "@vue/cli-plugin-babel": "~4.5.0",
+ "@vue/cli-plugin-eslint": "~4.5.0",
+ "@vue/cli-service": "~4.5.0",
+ "@vue/compiler-sfc": "^3.0.0-0",
+ "babel-eslint": "^10.1.0",
+ "eslint": "^6.7.2",
+ "eslint-plugin-vue": "^7.0.0-0"
+ }
+}
diff --git a/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/public/favicon.ico b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/public/favicon.ico
new file mode 100644
index 0000000..df36fcf
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/public/favicon.ico
Binary files differ
diff --git a/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/public/index.html b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/public/index.html
new file mode 100644
index 0000000..4123528
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
+ <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+ <title><%= htmlWebpackPlugin.options.title %></title>
+ </head>
+ <body>
+ <noscript>
+ <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+ </noscript>
+ <div id="app"></div>
+ <!-- built files will be auto injected -->
+ </body>
+</html>
diff --git a/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/App.vue b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/App.vue
new file mode 100644
index 0000000..d271300
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/App.vue
@@ -0,0 +1,55 @@
+<template>
+ <div>
+ <the-header></the-header>
+ <!-- <TheHeader /> -->
+ <button @click="setSelectedComponent('active-goals')">Active Goals</button>
+ <button @click="setSelectedComponent('manage-goals')">Manage Goals</button>
+ <!-- <active-goals v-if="selectedComponent === 'active-goals'"></active-goals>
+ <manage-goals v-if="selectedComponent === 'manage-goals'"></manage-goals>-->
+ <keep-alive>
+ <component :is="selectedComponent"></component>
+ </keep-alive>
+ </div>
+</template>
+
+<script>
+import TheHeader from './components/TheHeader.vue';
+// import BadgeList from './components/BadgeList.vue';
+// import UserInfo from './components/UserInfo.vue';
+// import CourseGoals from './components/CourseGoals.vue';
+import ActiveGoals from './components/ActiveGoals.vue';
+import ManageGoals from './components/ManageGoals.vue';
+
+export default {
+ components: {
+ TheHeader,
+ ActiveGoals,
+ ManageGoals,
+ },
+ data() {
+ return {
+ selectedComponent: 'active-goals',
+ activeUser: {
+ name: 'Maximilian Schwarzmüller',
+ description: 'Site owner and admin',
+ role: 'admin',
+ },
+ };
+ },
+ methods: {
+ setSelectedComponent(cmp) {
+ this.selectedComponent = cmp;
+ },
+ },
+};
+</script>
+
+<style>
+html {
+ font-family: sans-serif;
+}
+
+body {
+ margin: 0;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/ActiveGoals.vue b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/ActiveGoals.vue
new file mode 100644
index 0000000..2600205
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/ActiveGoals.vue
@@ -0,0 +1,3 @@
+<template>
+ <h2>Active Goals</h2>
+</template>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/BadgeList.vue b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/BadgeList.vue
new file mode 100644
index 0000000..2d3204e
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/BadgeList.vue
@@ -0,0 +1,34 @@
+<template>
+ <section>
+ <base-card>
+ <template #default>
+ <ul>
+ <li>
+ <base-badge type="admin" caption="ADMIN"></base-badge>
+ </li>
+ <li>
+ <base-badge type="author" caption="AUTHOR"></base-badge>
+ </li>
+ </ul>
+ </template>
+ </base-card>
+ </section>
+</template>
+
+<style scoped>
+section h2 {
+ margin: 0.5rem 0;
+ color: #3a3a3a;
+}
+ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: row;
+}
+
+li {
+ margin-right: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/BaseBadge.vue b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/BaseBadge.vue
new file mode 100644
index 0000000..063a539
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/BaseBadge.vue
@@ -0,0 +1,37 @@
+<template>
+ <span class="badge" :class="classes">{{ caption }}</span>
+</template>
+
+<script>
+export default {
+ props: ['type', 'caption'],
+ computed: {
+ classes() {
+ return {
+ 'badge--admin': this.type === 'admin',
+ 'badge--author': this.type === 'author',
+ };
+ },
+ }
+};
+</script>
+
+<style scoped>
+.badge {
+ display: inline-block;
+ padding: 0.5rem 1rem;
+ border-radius: 30px;
+ background-color: #ccc;
+ color: #2e2e2e;
+}
+
+.badge--admin {
+ background-color: #810036;
+ color: white;
+}
+
+.badge--author {
+ background-color: #002c8a;
+ color: white;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/BaseCard.vue b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/BaseCard.vue
new file mode 100644
index 0000000..07e45ac
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/BaseCard.vue
@@ -0,0 +1,33 @@
+<template>
+ <div>
+ <header v-if="$slots.header">
+ <slot name="header">
+ <!-- <h2>The Default</h2> -->
+ </slot>
+ </header>
+ <slot></slot>
+ </div>
+</template>
+
+<script>
+export default {
+ mounted() {
+ console.log(this.$slots.header);
+ }
+};
+</script>
+
+<style scoped>
+header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+div {
+ margin: 2rem auto;
+ max-width: 30rem;
+ border-radius: 12px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ padding: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/CourseGoals.vue b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/CourseGoals.vue
new file mode 100644
index 0000000..aed46e7
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/CourseGoals.vue
@@ -0,0 +1,17 @@
+<template>
+ <ul>
+ <li v-for="goal in goals" :key="goal">
+ <slot :item="goal" another-prop="..."></slot>
+ </li>
+ </ul>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ goals: ['Finish the course', 'Learn Vue'],
+ };
+ },
+};
+</script>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/ManageGoals.vue b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/ManageGoals.vue
new file mode 100644
index 0000000..df3bcab
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/ManageGoals.vue
@@ -0,0 +1,6 @@
+<template>
+ <div>
+ <h2>Manage Goals</h2>
+ <input type="text" />
+ </div>
+</template>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/TheHeader.vue b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/TheHeader.vue
new file mode 100644
index 0000000..aeace6e
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/TheHeader.vue
@@ -0,0 +1,21 @@
+<template>
+ <header>
+ <h1>More on Vue Components</h1>
+ </header>
+</template>
+
+<style scoped>
+ header {
+ width: 100%;
+ height: 5rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #14005e;
+ }
+
+ header h1 {
+ color: white;
+ margin: 0;
+ }
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/UserInfo.vue b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/UserInfo.vue
new file mode 100644
index 0000000..4caedcd
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/components/UserInfo.vue
@@ -0,0 +1,19 @@
+<template>
+ <section>
+ <base-card>
+ <template #header>
+ <h3>{{ fullName }}</h3>
+ <base-badge :type="role" :caption="role.toUpperCase()"></base-badge>
+ </template>
+ <template #default>
+ <p>{{ infoText }}</p>
+ </template>
+ </base-card>
+ </section>
+</template>
+
+<script>
+export default {
+ props: ['fullName', 'infoText', 'role'],
+};
+</script>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/main.js b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/main.js
new file mode 100644
index 0000000..23a57d1
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-07-keeping-dynamic-components-alive/src/main.js
@@ -0,0 +1,12 @@
+import { createApp } from 'vue';
+
+import App from './App.vue';
+import BaseBadge from './components/BaseBadge.vue';
+import BaseCard from './components/BaseCard.vue';
+
+const app = createApp(App);
+
+app.component('base-badge', BaseBadge);
+app.component('base-card', BaseCard);
+
+app.mount('#app');
diff --git a/09 - deeper into components/cmp-adv-08-teleporting-elements/.browserslistrc b/09 - deeper into components/cmp-adv-08-teleporting-elements/.browserslistrc
new file mode 100644
index 0000000..214388f
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-08-teleporting-elements/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
diff --git a/09 - deeper into components/cmp-adv-08-teleporting-elements/.eslintrc.js b/09 - deeper into components/cmp-adv-08-teleporting-elements/.eslintrc.js
new file mode 100644
index 0000000..3391da1
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-08-teleporting-elements/.eslintrc.js
@@ -0,0 +1,17 @@
+module.exports = {
+ root: true,
+ env: {
+ node: true
+ },
+ 'extends': [
+ 'plugin:vue/vue3-essential',
+ 'eslint:recommended'
+ ],
+ parserOptions: {
+ parser: 'babel-eslint'
+ },
+ rules: {
+ 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+ 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+ }
+}
diff --git a/09 - deeper into components/cmp-adv-08-teleporting-elements/.gitignore b/09 - deeper into components/cmp-adv-08-teleporting-elements/.gitignore
new file mode 100644
index 0000000..11f5d71
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-08-teleporting-elements/.gitignore
@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/09 - deeper into components/cmp-adv-08-teleporting-elements/HOW-TO-USE.pdf b/09 - deeper into components/cmp-adv-08-teleporting-elements/HOW-TO-USE.pdf
new file mode 100644
index 0000000..00d28ea
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-08-teleporting-elements/HOW-TO-USE.pdf
Binary files differ
diff --git a/09 - deeper into components/cmp-adv-08-teleporting-elements/babel.config.js b/09 - deeper into components/cmp-adv-08-teleporting-elements/babel.config.js
new file mode 100644
index 0000000..e955840
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-08-teleporting-elements/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+ presets: [
+ '@vue/cli-plugin-babel/preset'
+ ]
+}
diff --git a/09 - deeper into components/cmp-adv-08-teleporting-elements/package.json b/09 - deeper into components/cmp-adv-08-teleporting-elements/package.json
new file mode 100644
index 0000000..52d25ec
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-08-teleporting-elements/package.json
@@ -0,0 +1,23 @@
+{
+ "name": "vue-first-app",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "serve": "vue-cli-service serve",
+ "build": "vue-cli-service build",
+ "lint": "vue-cli-service lint"
+ },
+ "dependencies": {
+ "core-js": "^3.6.5",
+ "vue": "^3.0.0"
+ },
+ "devDependencies": {
+ "@vue/cli-plugin-babel": "~4.5.0",
+ "@vue/cli-plugin-eslint": "~4.5.0",
+ "@vue/cli-service": "~4.5.0",
+ "@vue/compiler-sfc": "^3.0.0-0",
+ "babel-eslint": "^10.1.0",
+ "eslint": "^6.7.2",
+ "eslint-plugin-vue": "^7.0.0-0"
+ }
+}
diff --git a/09 - deeper into components/cmp-adv-08-teleporting-elements/public/favicon.ico b/09 - deeper into components/cmp-adv-08-teleporting-elements/public/favicon.ico
new file mode 100644
index 0000000..df36fcf
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-08-teleporting-elements/public/favicon.ico
Binary files differ
diff --git a/09 - deeper into components/cmp-adv-08-teleporting-elements/public/index.html b/09 - deeper into components/cmp-adv-08-teleporting-elements/public/index.html
new file mode 100644
index 0000000..4123528
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-08-teleporting-elements/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
+ <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+ <title><%= htmlWebpackPlugin.options.title %></title>
+ </head>
+ <body>
+ <noscript>
+ <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+ </noscript>
+ <div id="app"></div>
+ <!-- built files will be auto injected -->
+ </body>
+</html>
diff --git a/09 - deeper into components/cmp-adv-08-teleporting-elements/src/App.vue b/09 - deeper into components/cmp-adv-08-teleporting-elements/src/App.vue
new file mode 100644
index 0000000..d271300
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-08-teleporting-elements/src/App.vue
@@ -0,0 +1,55 @@
+<template>
+ <div>
+ <the-header></the-header>
+ <!-- <TheHeader /> -->
+ <button @click="setSelectedComponent('active-goals')">Active Goals</button>
+ <button @click="setSelectedComponent('manage-goals')">Manage Goals</button>
+ <!-- <active-goals v-if="selectedComponent === 'active-goals'"></active-goals>
+ <manage-goals v-if="selectedComponent === 'manage-goals'"></manage-goals>-->
+ <keep-alive>
+ <component :is="selectedComponent"></component>
+ </keep-alive>
+ </div>
+</template>
+
+<script>
+import TheHeader from './components/TheHeader.vue';
+// import BadgeList from './components/BadgeList.vue';
+// import UserInfo from './components/UserInfo.vue';
+// import CourseGoals from './components/CourseGoals.vue';
+import ActiveGoals from './components/ActiveGoals.vue';
+import ManageGoals from './components/ManageGoals.vue';
+
+export default {
+ components: {
+ TheHeader,
+ ActiveGoals,
+ ManageGoals,
+ },
+ data() {
+ return {
+ selectedComponent: 'active-goals',
+ activeUser: {
+ name: 'Maximilian Schwarzmüller',
+ description: 'Site owner and admin',
+ role: 'admin',
+ },
+ };
+ },
+ methods: {
+ setSelectedComponent(cmp) {
+ this.selectedComponent = cmp;
+ },
+ },
+};
+</script>
+
+<style>
+html {
+ font-family: sans-serif;
+}
+
+body {
+ margin: 0;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/ActiveGoals.vue b/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/ActiveGoals.vue
new file mode 100644
index 0000000..2600205
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/ActiveGoals.vue
@@ -0,0 +1,3 @@
+<template>
+ <h2>Active Goals</h2>
+</template>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/BadgeList.vue b/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/BadgeList.vue
new file mode 100644
index 0000000..2d3204e
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/BadgeList.vue
@@ -0,0 +1,34 @@
+<template>
+ <section>
+ <base-card>
+ <template #default>
+ <ul>
+ <li>
+ <base-badge type="admin" caption="ADMIN"></base-badge>
+ </li>
+ <li>
+ <base-badge type="author" caption="AUTHOR"></base-badge>
+ </li>
+ </ul>
+ </template>
+ </base-card>
+ </section>
+</template>
+
+<style scoped>
+section h2 {
+ margin: 0.5rem 0;
+ color: #3a3a3a;
+}
+ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: row;
+}
+
+li {
+ margin-right: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/BaseBadge.vue b/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/BaseBadge.vue
new file mode 100644
index 0000000..063a539
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/BaseBadge.vue
@@ -0,0 +1,37 @@
+<template>
+ <span class="badge" :class="classes">{{ caption }}</span>
+</template>
+
+<script>
+export default {
+ props: ['type', 'caption'],
+ computed: {
+ classes() {
+ return {
+ 'badge--admin': this.type === 'admin',
+ 'badge--author': this.type === 'author',
+ };
+ },
+ }
+};
+</script>
+
+<style scoped>
+.badge {
+ display: inline-block;
+ padding: 0.5rem 1rem;
+ border-radius: 30px;
+ background-color: #ccc;
+ color: #2e2e2e;
+}
+
+.badge--admin {
+ background-color: #810036;
+ color: white;
+}
+
+.badge--author {
+ background-color: #002c8a;
+ color: white;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/BaseCard.vue b/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/BaseCard.vue
new file mode 100644
index 0000000..07e45ac
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/BaseCard.vue
@@ -0,0 +1,33 @@
+<template>
+ <div>
+ <header v-if="$slots.header">
+ <slot name="header">
+ <!-- <h2>The Default</h2> -->
+ </slot>
+ </header>
+ <slot></slot>
+ </div>
+</template>
+
+<script>
+export default {
+ mounted() {
+ console.log(this.$slots.header);
+ }
+};
+</script>
+
+<style scoped>
+header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+div {
+ margin: 2rem auto;
+ max-width: 30rem;
+ border-radius: 12px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ padding: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/CourseGoals.vue b/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/CourseGoals.vue
new file mode 100644
index 0000000..aed46e7
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/CourseGoals.vue
@@ -0,0 +1,17 @@
+<template>
+ <ul>
+ <li v-for="goal in goals" :key="goal">
+ <slot :item="goal" another-prop="..."></slot>
+ </li>
+ </ul>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ goals: ['Finish the course', 'Learn Vue'],
+ };
+ },
+};
+</script>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/ErrorAlert.vue b/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/ErrorAlert.vue
new file mode 100644
index 0000000..22633c3
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/ErrorAlert.vue
@@ -0,0 +1,18 @@
+<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>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/ManageGoals.vue b/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/ManageGoals.vue
new file mode 100644
index 0000000..1117a94
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/ManageGoals.vue
@@ -0,0 +1,40 @@
+<template>
+ <div>
+ <h2>Manage Goals</h2>
+ <input type="text" ref="goal" />
+ <button @click="setGoal">Set Goal</button>
+ <teleport to="body">
+ <error-alert v-if="inputIsInvalid">
+ <h2>Input is invalid!</h2>
+ <p>Please enter at least a few characters...</p>
+ <button @click="confirmError">Okay</button>
+ </error-alert>
+ </teleport>
+ </div>
+</template>
+
+<script>
+import ErrorAlert from './ErrorAlert.vue';
+
+export default {
+ components: {
+ ErrorAlert
+ },
+ data() {
+ return {
+ inputIsInvalid: false
+ };
+ },
+ methods: {
+ setGoal() {
+ const enteredValue = this.$refs.goal.value;
+ if (enteredValue === '') {
+ this.inputIsInvalid = true;
+ }
+ },
+ confirmError() {
+ this.inputIsInvalid = false;
+ }
+ }
+}
+</script>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/TheHeader.vue b/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/TheHeader.vue
new file mode 100644
index 0000000..aeace6e
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/TheHeader.vue
@@ -0,0 +1,21 @@
+<template>
+ <header>
+ <h1>More on Vue Components</h1>
+ </header>
+</template>
+
+<style scoped>
+ header {
+ width: 100%;
+ height: 5rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #14005e;
+ }
+
+ header h1 {
+ color: white;
+ margin: 0;
+ }
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/UserInfo.vue b/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/UserInfo.vue
new file mode 100644
index 0000000..4caedcd
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/UserInfo.vue
@@ -0,0 +1,19 @@
+<template>
+ <section>
+ <base-card>
+ <template #header>
+ <h3>{{ fullName }}</h3>
+ <base-badge :type="role" :caption="role.toUpperCase()"></base-badge>
+ </template>
+ <template #default>
+ <p>{{ infoText }}</p>
+ </template>
+ </base-card>
+ </section>
+</template>
+
+<script>
+export default {
+ props: ['fullName', 'infoText', 'role'],
+};
+</script>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-08-teleporting-elements/src/main.js b/09 - deeper into components/cmp-adv-08-teleporting-elements/src/main.js
new file mode 100644
index 0000000..23a57d1
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-08-teleporting-elements/src/main.js
@@ -0,0 +1,12 @@
+import { createApp } from 'vue';
+
+import App from './App.vue';
+import BaseBadge from './components/BaseBadge.vue';
+import BaseCard from './components/BaseCard.vue';
+
+const app = createApp(App);
+
+app.component('base-badge', BaseBadge);
+app.component('base-card', BaseCard);
+
+app.mount('#app');
diff --git a/09 - deeper into components/cmp-adv-09-working-with-fragments/.browserslistrc b/09 - deeper into components/cmp-adv-09-working-with-fragments/.browserslistrc
new file mode 100644
index 0000000..214388f
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-09-working-with-fragments/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
diff --git a/09 - deeper into components/cmp-adv-09-working-with-fragments/.eslintrc.js b/09 - deeper into components/cmp-adv-09-working-with-fragments/.eslintrc.js
new file mode 100644
index 0000000..3391da1
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-09-working-with-fragments/.eslintrc.js
@@ -0,0 +1,17 @@
+module.exports = {
+ root: true,
+ env: {
+ node: true
+ },
+ 'extends': [
+ 'plugin:vue/vue3-essential',
+ 'eslint:recommended'
+ ],
+ parserOptions: {
+ parser: 'babel-eslint'
+ },
+ rules: {
+ 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+ 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+ }
+}
diff --git a/09 - deeper into components/cmp-adv-09-working-with-fragments/.gitignore b/09 - deeper into components/cmp-adv-09-working-with-fragments/.gitignore
new file mode 100644
index 0000000..11f5d71
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-09-working-with-fragments/.gitignore
@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/09 - deeper into components/cmp-adv-09-working-with-fragments/HOW-TO-USE.pdf b/09 - deeper into components/cmp-adv-09-working-with-fragments/HOW-TO-USE.pdf
new file mode 100644
index 0000000..00d28ea
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-09-working-with-fragments/HOW-TO-USE.pdf
Binary files differ
diff --git a/09 - deeper into components/cmp-adv-09-working-with-fragments/babel.config.js b/09 - deeper into components/cmp-adv-09-working-with-fragments/babel.config.js
new file mode 100644
index 0000000..e955840
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-09-working-with-fragments/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+ presets: [
+ '@vue/cli-plugin-babel/preset'
+ ]
+}
diff --git a/09 - deeper into components/cmp-adv-09-working-with-fragments/package.json b/09 - deeper into components/cmp-adv-09-working-with-fragments/package.json
new file mode 100644
index 0000000..52d25ec
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-09-working-with-fragments/package.json
@@ -0,0 +1,23 @@
+{
+ "name": "vue-first-app",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "serve": "vue-cli-service serve",
+ "build": "vue-cli-service build",
+ "lint": "vue-cli-service lint"
+ },
+ "dependencies": {
+ "core-js": "^3.6.5",
+ "vue": "^3.0.0"
+ },
+ "devDependencies": {
+ "@vue/cli-plugin-babel": "~4.5.0",
+ "@vue/cli-plugin-eslint": "~4.5.0",
+ "@vue/cli-service": "~4.5.0",
+ "@vue/compiler-sfc": "^3.0.0-0",
+ "babel-eslint": "^10.1.0",
+ "eslint": "^6.7.2",
+ "eslint-plugin-vue": "^7.0.0-0"
+ }
+}
diff --git a/09 - deeper into components/cmp-adv-09-working-with-fragments/public/favicon.ico b/09 - deeper into components/cmp-adv-09-working-with-fragments/public/favicon.ico
new file mode 100644
index 0000000..df36fcf
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-09-working-with-fragments/public/favicon.ico
Binary files differ
diff --git a/09 - deeper into components/cmp-adv-09-working-with-fragments/public/index.html b/09 - deeper into components/cmp-adv-09-working-with-fragments/public/index.html
new file mode 100644
index 0000000..4123528
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-09-working-with-fragments/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
+ <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+ <title><%= htmlWebpackPlugin.options.title %></title>
+ </head>
+ <body>
+ <noscript>
+ <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+ </noscript>
+ <div id="app"></div>
+ <!-- built files will be auto injected -->
+ </body>
+</html>
diff --git a/09 - deeper into components/cmp-adv-09-working-with-fragments/src/App.vue b/09 - deeper into components/cmp-adv-09-working-with-fragments/src/App.vue
new file mode 100644
index 0000000..d271300
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-09-working-with-fragments/src/App.vue
@@ -0,0 +1,55 @@
+<template>
+ <div>
+ <the-header></the-header>
+ <!-- <TheHeader /> -->
+ <button @click="setSelectedComponent('active-goals')">Active Goals</button>
+ <button @click="setSelectedComponent('manage-goals')">Manage Goals</button>
+ <!-- <active-goals v-if="selectedComponent === 'active-goals'"></active-goals>
+ <manage-goals v-if="selectedComponent === 'manage-goals'"></manage-goals>-->
+ <keep-alive>
+ <component :is="selectedComponent"></component>
+ </keep-alive>
+ </div>
+</template>
+
+<script>
+import TheHeader from './components/TheHeader.vue';
+// import BadgeList from './components/BadgeList.vue';
+// import UserInfo from './components/UserInfo.vue';
+// import CourseGoals from './components/CourseGoals.vue';
+import ActiveGoals from './components/ActiveGoals.vue';
+import ManageGoals from './components/ManageGoals.vue';
+
+export default {
+ components: {
+ TheHeader,
+ ActiveGoals,
+ ManageGoals,
+ },
+ data() {
+ return {
+ selectedComponent: 'active-goals',
+ activeUser: {
+ name: 'Maximilian Schwarzmüller',
+ description: 'Site owner and admin',
+ role: 'admin',
+ },
+ };
+ },
+ methods: {
+ setSelectedComponent(cmp) {
+ this.selectedComponent = cmp;
+ },
+ },
+};
+</script>
+
+<style>
+html {
+ font-family: sans-serif;
+}
+
+body {
+ margin: 0;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/ActiveGoals.vue b/09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/ActiveGoals.vue
new file mode 100644
index 0000000..2600205
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/ActiveGoals.vue
@@ -0,0 +1,3 @@
+<template>
+ <h2>Active Goals</h2>
+</template>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/BadgeList.vue b/09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/BadgeList.vue
new file mode 100644
index 0000000..2d3204e
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/BadgeList.vue
@@ -0,0 +1,34 @@
+<template>
+ <section>
+ <base-card>
+ <template #default>
+ <ul>
+ <li>
+ <base-badge type="admin" caption="ADMIN"></base-badge>
+ </li>
+ <li>
+ <base-badge type="author" caption="AUTHOR"></base-badge>
+ </li>
+ </ul>
+ </template>
+ </base-card>
+ </section>
+</template>
+
+<style scoped>
+section h2 {
+ margin: 0.5rem 0;
+ color: #3a3a3a;
+}
+ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: row;
+}
+
+li {
+ margin-right: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/BaseBadge.vue b/09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/BaseBadge.vue
new file mode 100644
index 0000000..063a539
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/BaseBadge.vue
@@ -0,0 +1,37 @@
+<template>
+ <span class="badge" :class="classes">{{ caption }}</span>
+</template>
+
+<script>
+export default {
+ props: ['type', 'caption'],
+ computed: {
+ classes() {
+ return {
+ 'badge--admin': this.type === 'admin',
+ 'badge--author': this.type === 'author',
+ };
+ },
+ }
+};
+</script>
+
+<style scoped>
+.badge {
+ display: inline-block;
+ padding: 0.5rem 1rem;
+ border-radius: 30px;
+ background-color: #ccc;
+ color: #2e2e2e;
+}
+
+.badge--admin {
+ background-color: #810036;
+ color: white;
+}
+
+.badge--author {
+ background-color: #002c8a;
+ color: white;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/BaseCard.vue b/09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/BaseCard.vue
new file mode 100644
index 0000000..07e45ac
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/BaseCard.vue
@@ -0,0 +1,33 @@
+<template>
+ <div>
+ <header v-if="$slots.header">
+ <slot name="header">
+ <!-- <h2>The Default</h2> -->
+ </slot>
+ </header>
+ <slot></slot>
+ </div>
+</template>
+
+<script>
+export default {
+ mounted() {
+ console.log(this.$slots.header);
+ }
+};
+</script>
+
+<style scoped>
+header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+div {
+ margin: 2rem auto;
+ max-width: 30rem;
+ border-radius: 12px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ padding: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/CourseGoals.vue b/09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/CourseGoals.vue
new file mode 100644
index 0000000..aed46e7
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/CourseGoals.vue
@@ -0,0 +1,17 @@
+<template>
+ <ul>
+ <li v-for="goal in goals" :key="goal">
+ <slot :item="goal" another-prop="..."></slot>
+ </li>
+ </ul>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ goals: ['Finish the course', 'Learn Vue'],
+ };
+ },
+};
+</script>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/ErrorAlert.vue b/09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/ErrorAlert.vue
new file mode 100644
index 0000000..22633c3
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/ErrorAlert.vue
@@ -0,0 +1,18 @@
+<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>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/ManageGoals.vue b/09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/ManageGoals.vue
new file mode 100644
index 0000000..cd9fa40
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/ManageGoals.vue
@@ -0,0 +1,38 @@
+<template>
+ <h2>Manage Goals</h2>
+ <input type="text" ref="goal" />
+ <button @click="setGoal">Set Goal</button>
+ <teleport to="body">
+ <error-alert v-if="inputIsInvalid">
+ <h2>Input is invalid!</h2>
+ <p>Please enter at least a few characters...</p>
+ <button @click="confirmError">Okay</button>
+ </error-alert>
+ </teleport>
+</template>
+
+<script>
+import ErrorAlert from './ErrorAlert.vue';
+
+export default {
+ components: {
+ ErrorAlert,
+ },
+ data() {
+ return {
+ inputIsInvalid: false,
+ };
+ },
+ methods: {
+ setGoal() {
+ const enteredValue = this.$refs.goal.value;
+ if (enteredValue === '') {
+ this.inputIsInvalid = true;
+ }
+ },
+ confirmError() {
+ this.inputIsInvalid = false;
+ },
+ },
+};
+</script>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/TheHeader.vue b/09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/TheHeader.vue
new file mode 100644
index 0000000..aeace6e
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/TheHeader.vue
@@ -0,0 +1,21 @@
+<template>
+ <header>
+ <h1>More on Vue Components</h1>
+ </header>
+</template>
+
+<style scoped>
+ header {
+ width: 100%;
+ height: 5rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #14005e;
+ }
+
+ header h1 {
+ color: white;
+ margin: 0;
+ }
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/UserInfo.vue b/09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/UserInfo.vue
new file mode 100644
index 0000000..4caedcd
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-09-working-with-fragments/src/components/UserInfo.vue
@@ -0,0 +1,19 @@
+<template>
+ <section>
+ <base-card>
+ <template #header>
+ <h3>{{ fullName }}</h3>
+ <base-badge :type="role" :caption="role.toUpperCase()"></base-badge>
+ </template>
+ <template #default>
+ <p>{{ infoText }}</p>
+ </template>
+ </base-card>
+ </section>
+</template>
+
+<script>
+export default {
+ props: ['fullName', 'infoText', 'role'],
+};
+</script>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-09-working-with-fragments/src/main.js b/09 - deeper into components/cmp-adv-09-working-with-fragments/src/main.js
new file mode 100644
index 0000000..23a57d1
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-09-working-with-fragments/src/main.js
@@ -0,0 +1,12 @@
+import { createApp } from 'vue';
+
+import App from './App.vue';
+import BaseBadge from './components/BaseBadge.vue';
+import BaseCard from './components/BaseCard.vue';
+
+const app = createApp(App);
+
+app.component('base-badge', BaseBadge);
+app.component('base-card', BaseCard);
+
+app.mount('#app');
diff --git a/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/.browserslistrc b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/.browserslistrc
new file mode 100644
index 0000000..214388f
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
diff --git a/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/.eslintrc.js b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/.eslintrc.js
new file mode 100644
index 0000000..3391da1
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/.eslintrc.js
@@ -0,0 +1,17 @@
+module.exports = {
+ root: true,
+ env: {
+ node: true
+ },
+ 'extends': [
+ 'plugin:vue/vue3-essential',
+ 'eslint:recommended'
+ ],
+ parserOptions: {
+ parser: 'babel-eslint'
+ },
+ rules: {
+ 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+ 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+ }
+}
diff --git a/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/.gitignore b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/.gitignore
new file mode 100644
index 0000000..11f5d71
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/.gitignore
@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/HOW-TO-USE.pdf b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/HOW-TO-USE.pdf
new file mode 100644
index 0000000..00d28ea
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/HOW-TO-USE.pdf
Binary files differ
diff --git a/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/babel.config.js b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/babel.config.js
new file mode 100644
index 0000000..e955840
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+ presets: [
+ '@vue/cli-plugin-babel/preset'
+ ]
+}
diff --git a/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/package.json b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/package.json
new file mode 100644
index 0000000..52d25ec
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/package.json
@@ -0,0 +1,23 @@
+{
+ "name": "vue-first-app",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "serve": "vue-cli-service serve",
+ "build": "vue-cli-service build",
+ "lint": "vue-cli-service lint"
+ },
+ "dependencies": {
+ "core-js": "^3.6.5",
+ "vue": "^3.0.0"
+ },
+ "devDependencies": {
+ "@vue/cli-plugin-babel": "~4.5.0",
+ "@vue/cli-plugin-eslint": "~4.5.0",
+ "@vue/cli-service": "~4.5.0",
+ "@vue/compiler-sfc": "^3.0.0-0",
+ "babel-eslint": "^10.1.0",
+ "eslint": "^6.7.2",
+ "eslint-plugin-vue": "^7.0.0-0"
+ }
+}
diff --git a/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/public/favicon.ico b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/public/favicon.ico
new file mode 100644
index 0000000..df36fcf
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/public/favicon.ico
Binary files differ
diff --git a/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/public/index.html b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/public/index.html
new file mode 100644
index 0000000..4123528
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
+ <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+ <title><%= htmlWebpackPlugin.options.title %></title>
+ </head>
+ <body>
+ <noscript>
+ <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+ </noscript>
+ <div id="app"></div>
+ <!-- built files will be auto injected -->
+ </body>
+</html>
diff --git a/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/App.vue b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/App.vue
new file mode 100644
index 0000000..7760d04
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/App.vue
@@ -0,0 +1,55 @@
+<template>
+ <div>
+ <the-header></the-header>
+ <!-- <TheHeader /> -->
+ <button @click="setSelectedComponent('active-goals')">Active Goals</button>
+ <button @click="setSelectedComponent('manage-goals')">Manage Goals</button>
+ <!-- <active-goals v-if="selectedComponent === 'active-goals'"></active-goals>
+ <manage-goals v-if="selectedComponent === 'manage-goals'"></manage-goals>-->
+ <keep-alive>
+ <component :is="selectedComponent"></component>
+ </keep-alive>
+ </div>
+</template>
+
+<script>
+import TheHeader from './components/layout/TheHeader.vue';
+// import BadgeList from './components/BadgeList.vue';
+// import UserInfo from './components/UserInfo.vue';
+// import CourseGoals from './components/CourseGoals.vue';
+import ActiveGoals from './components/ActiveGoals.vue';
+import ManageGoals from './components/ManageGoals.vue';
+
+export default {
+ components: {
+ TheHeader,
+ ActiveGoals,
+ ManageGoals,
+ },
+ data() {
+ return {
+ selectedComponent: 'active-goals',
+ activeUser: {
+ name: 'Maximilian Schwarzmüller',
+ description: 'Site owner and admin',
+ role: 'admin',
+ },
+ };
+ },
+ methods: {
+ setSelectedComponent(cmp) {
+ this.selectedComponent = cmp;
+ },
+ },
+};
+</script>
+
+<style>
+html {
+ font-family: sans-serif;
+}
+
+body {
+ margin: 0;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/ActiveGoals.vue b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/ActiveGoals.vue
new file mode 100644
index 0000000..2600205
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/ActiveGoals.vue
@@ -0,0 +1,3 @@
+<template>
+ <h2>Active Goals</h2>
+</template>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/BadgeList.vue b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/BadgeList.vue
new file mode 100644
index 0000000..2d3204e
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/BadgeList.vue
@@ -0,0 +1,34 @@
+<template>
+ <section>
+ <base-card>
+ <template #default>
+ <ul>
+ <li>
+ <base-badge type="admin" caption="ADMIN"></base-badge>
+ </li>
+ <li>
+ <base-badge type="author" caption="AUTHOR"></base-badge>
+ </li>
+ </ul>
+ </template>
+ </base-card>
+ </section>
+</template>
+
+<style scoped>
+section h2 {
+ margin: 0.5rem 0;
+ color: #3a3a3a;
+}
+ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: row;
+}
+
+li {
+ margin-right: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/CourseGoals.vue b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/CourseGoals.vue
new file mode 100644
index 0000000..aed46e7
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/CourseGoals.vue
@@ -0,0 +1,17 @@
+<template>
+ <ul>
+ <li v-for="goal in goals" :key="goal">
+ <slot :item="goal" another-prop="..."></slot>
+ </li>
+ </ul>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ goals: ['Finish the course', 'Learn Vue'],
+ };
+ },
+};
+</script>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/ErrorAlert.vue b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/ErrorAlert.vue
new file mode 100644
index 0000000..22633c3
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/ErrorAlert.vue
@@ -0,0 +1,18 @@
+<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>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/ManageGoals.vue b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/ManageGoals.vue
new file mode 100644
index 0000000..cd9fa40
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/ManageGoals.vue
@@ -0,0 +1,38 @@
+<template>
+ <h2>Manage Goals</h2>
+ <input type="text" ref="goal" />
+ <button @click="setGoal">Set Goal</button>
+ <teleport to="body">
+ <error-alert v-if="inputIsInvalid">
+ <h2>Input is invalid!</h2>
+ <p>Please enter at least a few characters...</p>
+ <button @click="confirmError">Okay</button>
+ </error-alert>
+ </teleport>
+</template>
+
+<script>
+import ErrorAlert from './ErrorAlert.vue';
+
+export default {
+ components: {
+ ErrorAlert,
+ },
+ data() {
+ return {
+ inputIsInvalid: false,
+ };
+ },
+ methods: {
+ setGoal() {
+ const enteredValue = this.$refs.goal.value;
+ if (enteredValue === '') {
+ this.inputIsInvalid = true;
+ }
+ },
+ confirmError() {
+ this.inputIsInvalid = false;
+ },
+ },
+};
+</script>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/UI/BaseBadge.vue b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/UI/BaseBadge.vue
new file mode 100644
index 0000000..063a539
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/UI/BaseBadge.vue
@@ -0,0 +1,37 @@
+<template>
+ <span class="badge" :class="classes">{{ caption }}</span>
+</template>
+
+<script>
+export default {
+ props: ['type', 'caption'],
+ computed: {
+ classes() {
+ return {
+ 'badge--admin': this.type === 'admin',
+ 'badge--author': this.type === 'author',
+ };
+ },
+ }
+};
+</script>
+
+<style scoped>
+.badge {
+ display: inline-block;
+ padding: 0.5rem 1rem;
+ border-radius: 30px;
+ background-color: #ccc;
+ color: #2e2e2e;
+}
+
+.badge--admin {
+ background-color: #810036;
+ color: white;
+}
+
+.badge--author {
+ background-color: #002c8a;
+ color: white;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/UI/BaseCard.vue b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/UI/BaseCard.vue
new file mode 100644
index 0000000..07e45ac
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/UI/BaseCard.vue
@@ -0,0 +1,33 @@
+<template>
+ <div>
+ <header v-if="$slots.header">
+ <slot name="header">
+ <!-- <h2>The Default</h2> -->
+ </slot>
+ </header>
+ <slot></slot>
+ </div>
+</template>
+
+<script>
+export default {
+ mounted() {
+ console.log(this.$slots.header);
+ }
+};
+</script>
+
+<style scoped>
+header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+div {
+ margin: 2rem auto;
+ max-width: 30rem;
+ border-radius: 12px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ padding: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/UserInfo.vue b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/UserInfo.vue
new file mode 100644
index 0000000..4caedcd
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/UserInfo.vue
@@ -0,0 +1,19 @@
+<template>
+ <section>
+ <base-card>
+ <template #header>
+ <h3>{{ fullName }}</h3>
+ <base-badge :type="role" :caption="role.toUpperCase()"></base-badge>
+ </template>
+ <template #default>
+ <p>{{ infoText }}</p>
+ </template>
+ </base-card>
+ </section>
+</template>
+
+<script>
+export default {
+ props: ['fullName', 'infoText', 'role'],
+};
+</script>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/layout/TheHeader.vue b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/layout/TheHeader.vue
new file mode 100644
index 0000000..aeace6e
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/components/layout/TheHeader.vue
@@ -0,0 +1,21 @@
+<template>
+ <header>
+ <h1>More on Vue Components</h1>
+ </header>
+</template>
+
+<style scoped>
+ header {
+ width: 100%;
+ height: 5rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #14005e;
+ }
+
+ header h1 {
+ color: white;
+ margin: 0;
+ }
+</style>
\ No newline at end of file
diff --git a/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/main.js b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/main.js
new file mode 100644
index 0000000..48555d1
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-10-moving-to-a-different-folder-structure/src/main.js
@@ -0,0 +1,12 @@
+import { createApp } from 'vue';
+
+import App from './App.vue';
+import BaseBadge from './components/UI/BaseBadge.vue';
+import BaseCard from './components/UI/BaseCard.vue';
+
+const app = createApp(App);
+
+app.component('base-badge', BaseBadge);
+app.component('base-card', BaseCard);
+
+app.mount('#app');
--
Gitblit v1.8.0