| New file |
| | |
|---|
| | | > 1% |
|---|
| | | last 2 versions |
|---|
| | | not dead |
|---|
| New file |
| | |
|---|
| | | 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' |
|---|
| | | } |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | .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? |
|---|
| New file |
| | |
|---|
| | | module.exports = { |
|---|
| | | presets: [ |
|---|
| | | '@vue/cli-plugin-babel/preset' |
|---|
| | | ] |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | { |
|---|
| | | "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" |
|---|
| | | } |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | <!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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | 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'); |
|---|
| New file |
| | |
|---|
| | | > 1% |
|---|
| | | last 2 versions |
|---|
| | | not dead |
|---|
| New file |
| | |
|---|
| | | 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' |
|---|
| | | } |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | .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? |
|---|
| New file |
| | |
|---|
| | | module.exports = { |
|---|
| | | presets: [ |
|---|
| | | '@vue/cli-plugin-babel/preset' |
|---|
| | | ] |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | { |
|---|
| | | "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" |
|---|
| | | } |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | <!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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | 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'); |
|---|
| New file |
| | |
|---|
| | | > 1% |
|---|
| | | last 2 versions |
|---|
| | | not dead |
|---|
| New file |
| | |
|---|
| | | 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' |
|---|
| | | } |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | .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? |
|---|
| New file |
| | |
|---|
| | | module.exports = { |
|---|
| | | presets: [ |
|---|
| | | '@vue/cli-plugin-babel/preset' |
|---|
| | | ] |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | { |
|---|
| | | "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" |
|---|
| | | } |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | <!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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | 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'); |
|---|
| New file |
| | |
|---|
| | | > 1% |
|---|
| | | last 2 versions |
|---|
| | | not dead |
|---|
| New file |
| | |
|---|
| | | 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' |
|---|
| | | } |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | .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? |
|---|
| New file |
| | |
|---|
| | | module.exports = { |
|---|
| | | presets: [ |
|---|
| | | '@vue/cli-plugin-babel/preset' |
|---|
| | | ] |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | { |
|---|
| | | "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" |
|---|
| | | } |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | <!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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | 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'); |
|---|
| New file |
| | |
|---|
| | | > 1% |
|---|
| | | last 2 versions |
|---|
| | | not dead |
|---|
| New file |
| | |
|---|
| | | 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' |
|---|
| | | } |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | .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? |
|---|
| New file |
| | |
|---|
| | | module.exports = { |
|---|
| | | presets: [ |
|---|
| | | '@vue/cli-plugin-babel/preset' |
|---|
| | | ] |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | { |
|---|
| | | "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" |
|---|
| | | } |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | <!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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | 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'); |
|---|
| New file |
| | |
|---|
| | | > 1% |
|---|
| | | last 2 versions |
|---|
| | | not dead |
|---|
| New file |
| | |
|---|
| | | 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' |
|---|
| | | } |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | .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? |
|---|
| New file |
| | |
|---|
| | | module.exports = { |
|---|
| | | presets: [ |
|---|
| | | '@vue/cli-plugin-babel/preset' |
|---|
| | | ] |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | { |
|---|
| | | "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" |
|---|
| | | } |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | <!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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <h2>Active Goals</h2> |
|---|
| | | </template> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <div> |
|---|
| | | <h2>Manage Goals</h2> |
|---|
| | | <input type="text" /> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | 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'); |
|---|
| New file |
| | |
|---|
| | | > 1% |
|---|
| | | last 2 versions |
|---|
| | | not dead |
|---|
| New file |
| | |
|---|
| | | 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' |
|---|
| | | } |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | .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? |
|---|
| New file |
| | |
|---|
| | | module.exports = { |
|---|
| | | presets: [ |
|---|
| | | '@vue/cli-plugin-babel/preset' |
|---|
| | | ] |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | { |
|---|
| | | "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" |
|---|
| | | } |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | <!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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <h2>Active Goals</h2> |
|---|
| | | </template> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | 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'); |
|---|
| New file |
| | |
|---|
| | | > 1% |
|---|
| | | last 2 versions |
|---|
| | | not dead |
|---|
| New file |
| | |
|---|
| | | 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' |
|---|
| | | } |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | .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? |
|---|
| New file |
| | |
|---|
| | | module.exports = { |
|---|
| | | presets: [ |
|---|
| | | '@vue/cli-plugin-babel/preset' |
|---|
| | | ] |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | { |
|---|
| | | "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" |
|---|
| | | } |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | <!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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <h2>Active Goals</h2> |
|---|
| | | </template> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | 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'); |
|---|
| New file |
| | |
|---|
| | | > 1% |
|---|
| | | last 2 versions |
|---|
| | | not dead |
|---|
| New file |
| | |
|---|
| | | 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' |
|---|
| | | } |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | .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? |
|---|
| New file |
| | |
|---|
| | | module.exports = { |
|---|
| | | presets: [ |
|---|
| | | '@vue/cli-plugin-babel/preset' |
|---|
| | | ] |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | { |
|---|
| | | "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" |
|---|
| | | } |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | <!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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <h2>Active Goals</h2> |
|---|
| | | </template> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | <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> |
|---|
| New file |
| | |
|---|
| | | 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'); |
|---|
