├── .gitignore
├── README.md
├── chapter-10
    ├── example-1
    │   └── index.html
    └── example-2
    │   └── index.html
├── chapter-11
    └── example-1
    │   └── index.html
├── chapter-12
    └── example-1
    │   ├── .gitignore
    │   ├── babel.config.js
    │   ├── package-lock.json
    │   ├── package.json
    │   ├── public
    │       ├── favicon.ico
    │       └── index.html
    │   └── src
    │       ├── App.vue
    │       ├── assets
    │           └── logo.png
    │       ├── components
    │           ├── ErrorComponent.vue
    │           ├── HelloWorld.vue
    │           └── LoadingComponent.vue
    │       └── main.js
├── chapter-13
    ├── example-1
    │   └── index.html
    └── example-2
    │   └── index.html
├── chapter-14
    └── example-1
    │   └── index.html
├── chapter-2
    ├── example-1
    │   └── index.html
    ├── example-2
    │   └── index.html
    ├── example-3
    │   └── index.html
    ├── example-4
    │   └── index.html
    └── example-5
    │   └── index.html
├── chapter-3
    ├── example-1
    │   └── index.html
    └── example-2
    │   └── index.html
├── chapter-4
    ├── example-1
    │   └── index.html
    ├── example-2
    │   └── index.html
    ├── example-3
    │   └── index.html
    ├── example-4
    │   └── index.html
    └── example-5
    │   └── index.html
├── chapter-5
    ├── example-1
    │   └── index.html
    ├── example-2
    │   └── index.html
    ├── example-3
    │   └── index.html
    └── example-4
    │   └── index.html
├── chapter-6
    ├── example-1
    │   ├── .gitignore
    │   ├── babel.config.js
    │   ├── package-lock.json
    │   ├── package.json
    │   ├── public
    │   │   ├── favicon.ico
    │   │   └── index.html
    │   └── src
    │   │   ├── App.vue
    │   │   ├── assets
    │   │       └── logo.png
    │   │   ├── components
    │   │       └── HelloWorld.vue
    │   │   └── main.js
    ├── example-2
    │   └── index.html
    └── example-3
    │   ├── .gitignore
    │   ├── babel.config.js
    │   ├── package-lock.json
    │   ├── package.json
    │   ├── public
    │       ├── favicon.ico
    │       └── index.html
    │   └── src
    │       ├── App.vue
    │       ├── assets
    │           └── logo.png
    │       ├── components
    │           └── HelloWorld.vue
    │       └── main.js
├── chapter-7
    └── example-1
    │   └── index.html
├── chapter-8
    ├── example-1
    │   └── index.html
    ├── example-2
    │   └── index.html
    ├── example-3
    │   └── index.html
    └── example-4
    │   ├── .gitignore
    │   ├── babel.config.js
    │   ├── package-lock.json
    │   ├── package.json
    │   ├── public
    │       ├── favicon.ico
    │       └── index.html
    │   └── src
    │       ├── App.vue
    │       ├── assets
    │           └── logo.png
    │       ├── components
    │           └── ArticleCard.vue
    │       ├── main.js
    │       └── withLoader.js
├── chapter-9
    └── example-1
    │   └── index.html
├── shared
    ├── avatars
    │   ├── 1.jpg
    │   ├── 2.jpg
    │   ├── 3.jpg
    │   └── 4.jpg
    ├── axios-0.18.0.js
    ├── button.css
    ├── carousel.css
    ├── cat.jpg
    ├── cat2.jpg
    ├── cat3.jpg
    ├── expandable.css
    ├── image.svg
    ├── image_card.css
    ├── list.css
    ├── main.css
    ├── modal.css
    ├── normalize-5.0.0.min.css
    ├── switch.css
    ├── table.css
    ├── tweet.css
    ├── vue-2.6.10.js
    └── vue-2.6.10.min.js
└── template
    ├── app.js
    └── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Vue.js Component Patterns Book Examples
2 | 
3 | This archive contains all examples from the book [Vue.js Component Patterns](https://fdietz.de/pages/vue-component-patterns-course/).
4 | 


--------------------------------------------------------------------------------
/chapter-10/example-1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Demo</title>
 9 |   <link rel="stylesheet" href="../../shared/normalize-5.0.0.min.css">
10 |   <link rel="stylesheet" href="../../shared/main.css">
11 | </head>
12 | 
13 | <body>
14 |   <div id="demo">
15 |     <page-layout :user="user"></page-layout>
16 |   </div>
17 | 
18 |   <template id="page-layout-template">
19 |     <div class="page-layout">
20 |       <page-layout-header :user="user"></page-layout-header>
21 |     </div>
22 |   </template>
23 | 
24 |   <template id="page-layout-header-template">
25 |     <div class="page-layout-header">
26 |       <header-menu :user="user"></header-menu>
27 |     </div>
28 |   </template>
29 | 
30 |   <template id="header-menu-template">
31 |     <div class="header-menu">
32 |       <user-avatar :user="user"></user-avatar>
33 |     </div>
34 |   </template>
35 | 
36 |   <template id="user-avatar-template">
37 |     <div class="user-avatar">
38 |       <div>{{user.name}}</div>
39 |     </div>
40 |   </template>
41 | 
42 |   <script src='../../shared/vue-2.6.10.js'></script>
43 |   <script>
44 |     Vue.component("page-layout", {
45 |       template: "#page-layout-template",
46 |       props: ["user"]
47 |     });
48 |     Vue.component("page-layout-header", {
49 |       template: "#page-layout-header-template",
50 |       props: ["user"]
51 |     });
52 |     Vue.component("header-menu", {
53 |       template: "#header-menu-template",
54 |       props: ["user"]
55 |     });
56 |     Vue.component("user-avatar", {
57 |       template: "#user-avatar-template",
58 |       props: ["user"]
59 |     });
60 | 
61 |     new Vue({ 
62 |       el: '#demo',
63 |       data: {
64 |         user: { id: 1, name: "Donald Duck" }
65 |       }
66 |     });
67 |   </script>
68 | </body>
69 | 
70 | </html>


--------------------------------------------------------------------------------
/chapter-10/example-2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Demo</title>
 9 |   <link rel="stylesheet" href="../../shared/normalize-5.0.0.min.css">
10 |   <link rel="stylesheet" href="../../shared/main.css">
11 | </head>
12 | 
13 | <body>
14 |   <div id="demo">
15 |     <page-layout>
16 |       <page-layout-header>
17 |         <header-menu>
18 |           <user-avatar :user="user"></user-avatar>
19 |         </header-menu>
20 |       </page-layout-header>
21 |     </page-layout>
22 |   </div>
23 | 
24 |   <template id="page-layout-template">
25 |     <div class="page-layout">
26 |       <slot></slot>
27 |     </div>
28 |   </template>
29 | 
30 |   <template id="page-layout-header-template">
31 |     <div class="page-layout-header">
32 |       <slot></slot>
33 |     </div>
34 |   </template>
35 | 
36 |   <template id="header-menu-template">
37 |     <div class="header-menu">
38 |       <slot></slot>
39 |     </div>
40 |   </template>
41 | 
42 |   <template id="user-avatar-template">
43 |     <div class="user-avatar">
44 |       <div>{{user.name}}</div>
45 |     </div>
46 |   </template>
47 | 
48 |   <script src='../../shared/vue-2.6.10.js'></script>
49 |   <script>
50 |     Vue.component("page-layout", {
51 |       template: "#page-layout-template"
52 |     });
53 |     Vue.component("page-layout-header", {
54 |       template: "#page-layout-header-template"
55 |     });
56 |     Vue.component("header-menu", {
57 |       template: "#header-menu-template"
58 |     });
59 |     Vue.component("user-avatar", {
60 |       template: "#user-avatar-template",
61 |       props: ["user"]
62 |     });
63 | 
64 |     new Vue({ 
65 |       el: '#demo',
66 |       data: {
67 |         user: { id: 1, name: "Donald Duck" }
68 |       }
69 |     });
70 |   </script>
71 | </body>
72 | 
73 | </html>


--------------------------------------------------------------------------------
/chapter-11/example-1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Demo</title>
 9 |   <link rel="stylesheet" href="../../shared/normalize-5.0.0.min.css">
10 |   <link rel="stylesheet" href="../../shared/main.css">
11 |   <style>
12 |     .button {
13 |       position: relative;
14 |       display: block;
15 | 
16 |       appearance: none;
17 | 
18 |       border-radius: 2px;
19 |       border: 0;
20 | 
21 |       font-family: inherit;
22 |       font-size: 1rem;
23 |       text-align: center;
24 |       overflow: hidden;
25 | 
26 |       padding: 6px 12px;
27 | 
28 |       height: 2.6em;
29 | 
30 |       color: #555;
31 |       background-color: #e4e4e4;
32 |     }
33 | 
34 |     .button.dark {
35 |       color: #fff;
36 |       background-color: #000;
37 |     }
38 | 
39 |     .mb {
40 |       margin-bottom: 1rem;
41 |     }
42 |   </style>
43 | </head>
44 | 
45 | <body>
46 |   <div id="demo">
47 |     <select v-model="theme.name" class="mb">
48 |       <option value="light">Light</option>
49 |       <option value="dark">Dark</option>
50 |     </select>
51 |     <themed-button>Click me</themed-button>
52 |   </div>
53 | 
54 |   <template id="themed-button-template">
55 |     <button :class="['button', theme.name]">
56 |       <slot></slot>
57 |     </button>
58 |   </template>
59 | 
60 |   <script src='../../shared/vue-2.6.10.js'></script>
61 |   <script>
62 |     Vue.component("themed-button", {
63 |       template: "#themed-button-template",
64 |       inject: ["theme"]
65 |     });
66 | 
67 |     new Vue({ 
68 |       el: '#demo',
69 |       provide() {
70 |         return {
71 |           theme: this.theme
72 |         }
73 |       },
74 |       data: {
75 |         theme: {
76 |           name: "dark"
77 |         }
78 |       }
79 |     });
80 |   </script>
81 | </body>
82 | 
83 | </html>


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


--------------------------------------------------------------------------------
/chapter-12/example-1/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }


--------------------------------------------------------------------------------
/chapter-12/example-1/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example-1",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "vue": "^2.5.16"
12 |   },
13 |   "devDependencies": {
14 |     "@vue/cli-plugin-babel": "^3.0.0-rc.7",
15 |     "@vue/cli-plugin-eslint": "^3.0.0-rc.7",
16 |     "@vue/cli-service": "^3.0.0-rc.7",
17 |     "vue-template-compiler": "^2.5.16"
18 |   },
19 |   "eslintConfig": {
20 |     "root": true,
21 |     "env": {
22 |       "node": true
23 |     },
24 |     "extends": [
25 |       "plugin:vue/essential",
26 |       "eslint:recommended"
27 |     ],
28 |     "rules": {},
29 |     "parserOptions": {
30 |       "parser": "babel-eslint"
31 |     }
32 |   },
33 |   "postcss": {
34 |     "plugins": {
35 |       "autoprefixer": {}
36 |     }
37 |   },
38 |   "browserslist": [
39 |     "> 1%",
40 |     "last 2 versions",
41 |     "not ie <= 8"
42 |   ]
43 | }
44 | 


--------------------------------------------------------------------------------
/chapter-12/example-1/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fdietz/vue_components_book_examples/a80ae43cb02a1e56731d6197f1a0d1e8a11576fc/chapter-12/example-1/public/favicon.ico


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


--------------------------------------------------------------------------------
/chapter-12/example-1/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <img src="./assets/logo.png">
 4 |     <HelloWorld msg="Welcome to Your Vue.js App"/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import LoadingComponent from "./components/LoadingComponent";
10 | import ErrorComponent from "./components/ErrorComponent";
11 | 
12 | const AsyncComponent = import("./components/HelloWorld.vue");
13 | 
14 | const delayedAsyncComponent = () => {
15 |   return new Promise(resolve => {
16 |     setTimeout(() => {
17 |       resolve(import("./components/HelloWorld.vue"));
18 |     }, 2000);
19 |   });
20 | };
21 | 
22 | export default {
23 |   name: "app",
24 |   components: {
25 |     HelloWorld: () => ({
26 |       component: AsyncComponent,
27 |       // component: delayedAsyncComponent(),
28 |       loading: LoadingComponent,
29 |       error: ErrorComponent
30 |       // optional delay before showing the loading component
31 |       // delay: 200
32 |       // optional timeout before showing the error component
33 |       // timeout: 0
34 |     })
35 |   }
36 | };
37 | </script>
38 | 
39 | <style>
40 | #app {
41 |   font-family: "Avenir", Helvetica, Arial, sans-serif;
42 |   -webkit-font-smoothing: antialiased;
43 |   -moz-osx-font-smoothing: grayscale;
44 |   text-align: center;
45 |   color: #2c3e50;
46 |   margin-top: 60px;
47 | }
48 | </style>
49 | 


--------------------------------------------------------------------------------
/chapter-12/example-1/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fdietz/vue_components_book_examples/a80ae43cb02a1e56731d6197f1a0d1e8a11576fc/chapter-12/example-1/src/assets/logo.png


--------------------------------------------------------------------------------
/chapter-12/example-1/src/components/ErrorComponent.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     Error loading component
4 |   </div>
5 | </template>


--------------------------------------------------------------------------------
/chapter-12/example-1/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: "HelloWorld",
10 |   props: {
11 |     msg: String
12 |   }
13 | };
14 | </script>
15 | 
16 | <!-- Add "scoped" attribute to limit CSS to this component only -->
17 | <style scoped>
18 | h3 {
19 |   margin: 40px 0 0;
20 | }
21 | ul {
22 |   list-style-type: none;
23 |   padding: 0;
24 | }
25 | li {
26 |   display: inline-block;
27 |   margin: 0 10px;
28 | }
29 | a {
30 |   color: #42b983;
31 | }
32 | </style>
33 | 


--------------------------------------------------------------------------------
/chapter-12/example-1/src/components/LoadingComponent.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     Loading component...
4 |   </div>
5 | </template>


--------------------------------------------------------------------------------
/chapter-12/example-1/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App)
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/chapter-13/example-1/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |   <title>Demo</title>
  9 |   <link rel="stylesheet" href="../../shared/normalize-5.0.0.min.css">
 10 |   <link rel="stylesheet" href="../../shared/main.css">
 11 | 
 12 |   <style>
 13 |     .tab-list {
 14 |       display: flex;
 15 |       margin: 0;
 16 |       padding: 0;
 17 |       list-style: none;
 18 |     }
 19 |     
 20 |     .tab-link {
 21 |       display: block;
 22 |       color: #555;
 23 |       background-color: #eee;
 24 |       
 25 |       padding: 0.5rem 1rem;
 26 |       text-decoration: none;
 27 |     }
 28 |     
 29 |     .tab-link:hover {
 30 |       background: #e0e0e0;
 31 |     }
 32 | 
 33 |     .tab-link.is-active {
 34 |       background: #64a1e6;
 35 |       color: white;
 36 |     }
 37 | 
 38 |     .tab-content {
 39 |       border: 1px solid #eee;
 40 |       padding: 1rem;
 41 |     }
 42 |   </style>
 43 | 
 44 | </head>
 45 | 
 46 | <body>
 47 |   <div id="demo">
 48 |     <tabs>
 49 |       <tab name="First">
 50 |         Content of the first tab
 51 |       </tab>
 52 |       <tab name="Second">
 53 |         Content of the second tab
 54 |       </tab>
 55 |       <tab name="Third">
 56 |         Content of the third tab
 57 |       </tab>
 58 |     </tabs>
 59 |   </div>
 60 | 
 61 |   <template id="tabs-component-template">
 62 |     <div class="tabs-component">
 63 |       <ul role="tablist" class="tab-list">
 64 |         <li v-for="(tab, i) in tabs" :key="i" class="tab" role="presentation">
 65 |           <a :href="tab.hash"
 66 |             :aria-controls="tab.hash" :aria-selected="tab.isActive" role="tab" 
 67 |             :class="{ 'is-active': tab.isActive }" class="tab-link"
 68 |             @click="selectTab(tab.hash)">{{tab.name}}</a>
 69 |         </li>
 70 |       </ul>
 71 |       <div class="tab-content">
 72 |         <slot></slot>
 73 |       </div>
 74 |     </div>
 75 |   </template>
 76 |   
 77 |   <template id="tab-component-template">
 78 |     <section v-show="isActive" :id="hash" :aria-hidden="!isActive" role="tabpanel">
 79 |       <slot></slot>
 80 |     </section>
 81 |   </template>
 82 | 
 83 |   <script src='../../shared/vue-2.6.10.js'></script>
 84 |   <script>
 85 |     Vue.component("tabs", {
 86 |       template: "#tabs-component-template",
 87 |       data()  {
 88 |         return {
 89 |           tabs: []
 90 |         }
 91 |       },
 92 |       created() {
 93 |         this.tabs = this.$children;
 94 |         
 95 |       },
 96 |       mounted() {
 97 |         if (this.tabs.length) {
 98 |           this.selectTab(this.tabs[0].hash);
 99 |         }
100 |       },
101 |       methods: {
102 |         findTab(hash) {
103 |           return this.tabs.find(tab => tab.hash === hash);
104 |         },
105 |         selectTab(hash) {
106 |           const selectedTab = this.findTab(hash);
107 |           if (!selectedTab) {
108 |               return;
109 |           }
110 | 
111 |           this.tabs.forEach(tab => {
112 |             tab.isActive = (tab.hash === selectedTab.hash);
113 |           });
114 |           this.$emit('changed', { tab: selectedTab });
115 |         }
116 |       }
117 |     });
118 | 
119 |     Vue.component("tab", {
120 |       template: "#tab-component-template",
121 |       props: [ "name" ],
122 |       data() {
123 |         return {
124 |           isActive: {
125 |             type: Boolean,
126 |             default: false
127 |           }
128 |         }
129 |       },
130 |       computed: {
131 |         hash() {
132 |           return `#${this.name.toLowerCase().replace(/ /g, '-')}`;
133 |         }
134 |       }
135 |     });
136 | 
137 |     new Vue({ el: '#demo' });
138 |   </script>
139 | </body>
140 | </html>


--------------------------------------------------------------------------------
/chapter-13/example-2/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |   <title>Demo</title>
  9 |   <link rel="stylesheet" href="../../shared/normalize-5.0.0.min.css">
 10 |   <link rel="stylesheet" href="../../shared/main.css">
 11 |   <link rel="stylesheet" href="../../shared/expandable.css">
 12 | </head>
 13 | 
 14 | <body>
 15 |   <div id="demo">
 16 |     <accordion>
 17 |       <accordion-item name="Item 1">
 18 |         Content of first item
 19 |       </accordion-item>
 20 |       <accordion-item name="Item 2">
 21 |         Content of second item
 22 |       </accordion-item>
 23 |       <accordion-item name="Item 3">
 24 |         Content of third item
 25 |       </accordion-item>
 26 |     </accordion>
 27 |   </div>
 28 | 
 29 |   <template id="accordion-item-template">
 30 |     <div class="expandable">
 31 |       <h2 class="expandable__header">
 32 |         {{name}}
 33 |         <button class="expandable__trigger" :aria-expanded="isActive" @click="select">
 34 |           <svg aria-hidden="true" focusable="false" viewBox="0 0 10 10">
 35 |             <rect v-if="isActive" height="8" width="2" y="1" x="4"/>
 36 |             <rect height="2" width="8" y="4" x="1"/>
 37 |           </svg> 
 38 |         </button>
 39 |       </h2>
 40 |       <div v-if="isActive" class="expandable__content">
 41 |         <slot></slot>
 42 |       </div>
 43 |     </div>
 44 |   </template>
 45 |   
 46 |   <template id="accordion-template">
 47 |     <div class="accordion">
 48 |       <slot></slot>
 49 |     </section>
 50 |   </template>
 51 | 
 52 |   <script src='../../shared/vue-2.6.10.js'></script>
 53 |   <script>
 54 |     Vue.component("accordion-item", {
 55 |       template: "#accordion-item-template",
 56 |       inject: ["accordion"],
 57 |       props: ["name"],
 58 |       computed: {
 59 |         isActive() {
 60 |           return this.accordion.isActive(this.name);
 61 |         }
 62 |       },
 63 |       methods: {
 64 |         select() {
 65 |           this.accordion.select(this.name);
 66 |         }
 67 |       },
 68 |       created() {
 69 |         this.accordion.register(this.name);
 70 |       }
 71 |     });
 72 | 
 73 |     Vue.component("accordion", {
 74 |       template: "#accordion-template",
 75 |       provide() {
 76 |         return {
 77 |           accordion: {
 78 |             items: this.items,
 79 |             register: this.register,
 80 |             select: this.select,
 81 |             isActive: this.isActive
 82 |           }
 83 |         }
 84 |       },
 85 |       data() {
 86 |         return {
 87 |           items: {}
 88 |         }
 89 |       },
 90 |       methods: {
 91 |         register(name) {
 92 |           this.$set(this.items, name, false);
 93 |         },
 94 |         isActive(name) {
 95 |           return this.items[name];
 96 |         },
 97 |         select(name) {
 98 |           const currentState = this.items[name];
 99 |           Object.keys(this.items).map(n => {
100 |             if (n === name) {
101 |               this.$set(this.items, n, !currentState);  
102 |             } else {
103 |               this.$set(this.items, n, false);
104 |             }
105 |           });
106 |         }
107 |       }
108 |     });
109 | 
110 |     new Vue({ el: '#demo' });
111 |   </script>
112 | </body>
113 | </html>


--------------------------------------------------------------------------------
/chapter-14/example-1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Demo</title>
 9 |   <link rel="stylesheet" href="../../shared/normalize-5.0.0.min.css">
10 |   <link rel="stylesheet" href="../../shared/main.css">
11 |   <style>
12 |     body {
13 |       max-width: 40rem;
14 |       margin: 0 auto;
15 |       padding: 1em;
16 | 
17 |       color: #555;
18 |     }
19 |   </style>
20 | </head>
21 | 
22 | <body>
23 |   <div id="demo">
24 |     <request url="https://jsonplaceholder.typicode.com/posts/1">
25 |       <template v-slot:default="{ loading, data }">
26 |         <div v-if="loading">Loading...</div>
27 |         <div v-else>
28 |           <h1>
29 |             {{data.title}}
30 |           </h1>
31 |           <p>
32 |             {{data.body}}
33 |           </p>
34 |         </div>
35 |       </template>
36 |     </request>
37 |   </div>
38 | 
39 |   <script src='../../shared/vue-2.6.10.js'></script>
40 |   <script src="../../shared/axios-0.18.0.js"></script>
41 |   <script>
42 |     Vue.component("Request", {
43 |       render() {
44 |         return this.$scopedSlots.default({
45 |           loading: this.loading,
46 |           data: this.response && this.response.data
47 |         })[0];
48 |       },
49 |       props: {
50 |         url: String
51 |       },
52 |       data() {
53 |         return {
54 |           loading: true,
55 |           response: null
56 |         }
57 |       },
58 |       created() {
59 |         axios.get(this.url)
60 |           .then(response => {
61 |             this.response = response;
62 |             this.loading = false;
63 |           })
64 |       }
65 |     });
66 | 
67 |     new Vue({ 
68 |       el: '#demo'
69 |     });
70 |   </script>
71 | </body>
72 | </html>


--------------------------------------------------------------------------------
/chapter-2/example-1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Demo</title>
 9 |   <link rel="stylesheet" href="../../shared/normalize-5.0.0.min.css">
10 |   <link rel="stylesheet" href="../../shared/main.css">
11 |   <link rel="stylesheet" href="../../shared/image_card.css">
12 | </head>
13 | 
14 | <body>
15 |   <div id="demo">
16 |     <div class="image-card">
17 |       <img class="image-card__image" src="../../shared/cat.jpg" alt="cat" />
18 |       <div class="image-card__body">
19 |         <h3 class="image-card__title">Striped Tiger Cat</h3>
20 |         <div class="image-card__author">Image by @lemepe</div>
21 |       </div>
22 |     </div>
23 |   </div>
24 | 
25 |   <script src='../../shared/vue-2.6.10.js'></script>
26 |   <script>
27 |     new Vue({ el: '#demo' });
28 |   </script>
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/chapter-2/example-2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Demo</title>
 9 |   <link rel="stylesheet" href="../../shared/normalize-5.0.0.min.css">
10 |   <link rel="stylesheet" href="../../shared/main.css">
11 |   <link rel="stylesheet" href="../../shared/image_card.css">
12 | </head>
13 | 
14 | <body>
15 |   <div id="demo">
16 |     <image-card></image-card>
17 |     <image-card></image-card>
18 |   </div>
19 | 
20 |   <template id="template-image-card">
21 |     <div class="image-card">
22 |       <img class="image-card__image" src="../../shared/cat.jpg" />
23 |       <div class="image-card__body">
24 |         <h3>Striped Tiger Cat</h3>
25 |         <div class="image-card__author">Image by @lemepe</div>
26 |       </div>
27 |     </div>
28 |   </template>
29 | 
30 |   <script src='../../shared/vue-2.6.10.js'></script>
31 |   <script>
32 |     Vue.component('image-card', {
33 |       template: "#template-image-card"
34 |     })
35 | 
36 |     new Vue({ el: '#demo' })
37 |   </script>
38 | </body>
39 | </html>


--------------------------------------------------------------------------------
/chapter-2/example-3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Demo</title>
 9 |   <link rel="stylesheet" href="../../shared/normalize-5.0.0.min.css">
10 |   <link rel="stylesheet" href="../../shared/main.css">
11 |   <link rel="stylesheet" href="../../shared/image_card.css">
12 | </head>
13 | 
14 | <body>
15 |   <div id="demo">
16 |     <image-card image-src="cat.jpg" heading="Striped Tiger Cat" text="Image by @lemepe"></image-card>
17 |     <image-card image-src="cat3.jpg" heading="Alternative Text" text="alternative subtitle"></image-card>
18 |   </div>
19 | 
20 |   <template id="template-image-card">
21 |     <div class="image-card">
22 |       <img class="image-card__image" :src="'../../shared/'+imageSrc" />
23 |       <div class="image-card__body">
24 |         <h3 class="image-card__heading">{{heading}}</h3>
25 |         <div class="image-card__author">{{text}}</div>
26 |       </div>
27 |     </div>
28 |   </template>
29 | 
30 |   <script src='../../shared/vue-2.6.10.js'></script>
31 |   <script>
32 |     Vue.component('image-card', {
33 |       template: "#template-image-card",
34 |       props: {
35 |         heading: String,
36 |         text: String,
37 |         imageSrc: String
38 |       }
39 |     });
40 |     
41 |     new Vue({ el: '#demo' });
42 |   </script>
43 | </body>
44 | </html>


--------------------------------------------------------------------------------
/chapter-2/example-4/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Demo</title>
 9 |   <link rel="stylesheet" href="../../shared/normalize-5.0.0.min.css">
10 |   <link rel="stylesheet" href="../../shared/main.css">
11 |   <link rel="stylesheet" href="../../shared/image_card.css">
12 | </head>
13 | 
14 | <body>
15 |   <div id="demo">
16 |     <image-card image-src="cat.jpg" heading="Striped Tiger Cat" text="Image by @lemepe"></image-card>
17 |     <image-card image-src="cat3.jpg" heading="Alternative Text" text="alternative subtitle"></image-card>
18 |   </div>
19 | 
20 |   <template id="template-image-card">
21 |     <div class="image-card">
22 |         <img class="image-card__image" :src="'../../shared/'+imageSrc" />
23 |       <div class="image-card__body">
24 |           <h3 class="image-card__heading">{{heading}}</h3>
25 |         <div class="image-card__author">{{text}}</div>
26 |         <button class="image-card__heart" @click="count++">
27 |           <svg viewBox="0 0 32 29.6">
28 |             <path d="M16,28.261c0,0-14-7.926-14-17.046c0-9.356,13.159-10.399,14-0.454c1.011-9.938,14-8.903,14,0.454 C30,20.335,16,28.261,16,28.261z"/>            
29 |           </svg>
30 |         </button>
31 |         <div class="image-card__count" v-if="count > 0">{{count}}</div>
32 |       </div>
33 |     </div>
34 |   </template>
35 | 
36 |   <script src='../../shared/vue-2.6.10.js'></script>
37 |   <script>
38 |    Vue.component('image-card', {
39 |     template: "#template-image-card",
40 |     props: {
41 |       heading: String,
42 |       text: String,
43 |       imageSrc: String
44 |     },
45 |     data: function () {
46 |       return {
47 |         count: 0
48 |       }
49 |     }
50 |   });
51 | 
52 |   new Vue({ el: '#demo' });
53 |   </script>
54 | </body>
55 | </html>


--------------------------------------------------------------------------------
/chapter-2/example-5/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Demo</title>
 9 |   <link rel="stylesheet" href="../../shared/normalize-5.0.0.min.css">
10 |   <link rel="stylesheet" href="../../shared/main.css">
11 |   <link rel="stylesheet" href="../../shared/image_card.css">
12 | </head>
13 | 
14 | <body>
15 |   <div id="demo">
16 |     <image-card image-src="cat.jpg" heading="Striped Tiger Cat" text="Image by @lemepe" @change="handleChange"></image-card>
17 |     <image-card image-src="cat.jpg" heading="Alternative Text" text="alternative subtitle" @change="handleChange"></image-card>
18 |     <p>Total Count: {{totalCount}}</p>
19 |   </div>
20 | 
21 |   <template id="template-image-card">
22 |     <div class="image-card">
23 |       <img class="image-card__image" :src="'../../shared/'+imageSrc" />
24 |       <div class="image-card__body">
25 |           <h3 class="image-card__heading">{{heading}}</h3>
26 |         <div class="image-card__author">{{text}}</div>
27 |         <button class="image-card__heart" @click="handleClick">
28 |           <svg viewBox="0 0 32 29.6">
29 |             <path d="M16,28.261c0,0-14-7.926-14-17.046c0-9.356,13.159-10.399,14-0.454c1.011-9.938,14-8.903,14,0.454 C30,20.335,16,28.261,16,28.261z"/>            
30 |           </svg>
31 |         </button>
32 |         <div class="image-card__count" v-if="count > 0">{{count}}</div>
33 |       </div>
34 |     </div>
35 |   </template>
36 | 
37 |   <script src='../../shared/vue-2.6.10.js'></script>
38 |   <script>
39 |    Vue.component('image-card', {
40 |     template: "#template-image-card",
41 |     props: {
42 |       heading: String,
43 |       text: String,
44 |       imageSrc: String
45 |     },
46 |     data: function () {
47 |       return {
48 |         count: 0
49 |       }
50 |     },
51 |     methods: {
52 |       handleClick() {
53 |         this.count++;
54 |         this.$emit("change", this.count);
55 |       }
56 |     }
57 |   });
58 | 
59 |   new Vue({ 
60 |     el: '#demo',
61 |     data: {
62 |       totalCount: 0
63 |     },
64 |     methods: {
65 |       handleChange(count) {
66 |         console.log("count changed", count);
67 |         this.totalCount++;
68 |       }
69 |     }
70 |   });
71 |   </script>
72 | </body>
73 | </html>


--------------------------------------------------------------------------------
/chapter-3/example-1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Demo</title>
 9 |   <link rel="stylesheet" href="../../shared/normalize-5.0.0.min.css">
10 |   <link rel="stylesheet" href="../../shared/main.css">
11 |   <link rel="stylesheet" href="../../shared/modal.css">
12 | </head>
13 | 
14 | <body>
15 |   <div id="demo">
16 |     <modal v-if="showModal" @close="showModal = false">
17 |       <h2>Modal Header</h2>
18 |       <p>This is a paragraph inside the modal.</p>
19 |     </modal>
20 |     <button @click="showModal = true">Show Modal</button>
21 |   </div>
22 | 
23 |   <template id="template-modal">
24 |     <div class="modal-background" @click.self="$emit('close')">
25 |       <div class="modal-container">
26 |         <div class="modal-body">
27 |           <slot></slot>
28 |         </div>
29 |         <div class="modal-footer">
30 |           <button @click="$emit('close')">Close</button>
31 |         </div>
32 |       </div>
33 |     </div>
34 |   </template>
35 | 
36 |   <script src='../../shared/vue-2.6.10.js'></script>
37 |   <script>
38 |   Vue.component("modal", {
39 |     template: "#template-modal"
40 |   });
41 | 
42 |   new Vue({ 
43 |     el: '#demo',
44 |     data: {
45 |       showModal: false
46 |     }
47 |   });
48 |   </script>
49 | </body>
50 | </html>


--------------------------------------------------------------------------------
/chapter-3/example-2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Demo</title>
 9 |   <link rel="stylesheet" href="../../shared/normalize-5.0.0.min.css">
10 |   <link rel="stylesheet" href="../../shared/main.css">
11 |   <link rel="stylesheet" href="../../shared/modal.css">
12 | </head>
13 | 
14 | <body>
15 |   <div id="demo">
16 |     <modal v-if="showModal" @close="showModal = false">
17 |       <template v-slot:header>
18 |         <h2>Modal Header</h2>
19 |       </template>
20 |       <template v-slot:body>
21 |         Modal Body
22 |       </template>
23 |     </modal>
24 |     <button @click="showModal = true">Show Modal</button>
25 |   </div>
26 | 
27 |   <template id="template-modal">
28 |     <div class="modal-background" @click.self="$emit('close')">
29 |       <div class="modal-container">
30 |         <div class="modal-header">
31 |           <slot name="header"></slot>
32 |         </div>
33 |         <div class="modal-body">
34 |           <slot name="body"></slot>
35 |         </div>
36 |         <div class="modal-footer">
37 |           <slot name="footer">
38 |             <button @click="$emit('close')">Close</button>
39 |           </slot>
40 |         </div>
41 |       </div>
42 |     </div>
43 |   </template>
44 | 
45 |   <script src='../../shared/vue-2.6.10.js'></script>
46 |   <script>
47 |   Vue.component("modal", {
48 |     template: "#template-modal"
49 |   });
50 | 
51 |   new Vue({ 
52 |     el: '#demo',
53 |     data: {
54 |       showModal: false
55 |     }
56 |   });
57 |   </script>
58 | </body>
59 | </html>


--------------------------------------------------------------------------------
/chapter-4/example-1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Demo</title>
 9 |   <link rel="stylesheet" href="../../shared/normalize-5.0.0.min.css">
10 |   <link rel="stylesheet" href="../../shared/main.css">
11 |   <link rel="stylesheet" href="../../shared/list.css">
12 | </head>
13 | 
14 | <body>
15 |   <div id="demo">
16 |     <div class="list">
17 |       <div v-for="item in listItems" key="item.id" class="list-item">
18 |         <input type="checkbox" v-model="item.completed" class="list-item__checkbox" />
19 |         {{item.name}}
20 |       </div>
21 |     </div>
22 |   </div>
23 | 
24 |   <script src='../../shared/vue-2.6.10.js'></script>
25 |   <script>
26 |   new Vue({ 
27 |     el: '#demo',
28 |     data: {
29 |       listItems: [
30 |         {id: 1, name: "item 1", completed: false},
31 |         {id: 2, name: "item 2", completed: false},
32 |         {id: 3, name: "item 3", completed: false}
33 |       ]
34 |     }
35 |   });
36 |   </script>
37 | </body>
38 | </html>


--------------------------------------------------------------------------------
/chapter-4/example-2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Demo</title>
 9 |   <link rel="stylesheet" href="../../shared/normalize-5.0.0.min.css">
10 |   <link rel="stylesheet" href="../../shared/main.css">
11 |   <link rel="stylesheet" href="../../shared/list.css">
12 | </head>
13 | 
14 | <body>
15 |   <div id="demo">
16 |     <List :items="listItems">
17 |       <div class="list-item">
18 |         <input type="checkbox" v-model="item.completed" class="list-item__checkbox" />
19 |         <div class="list-item__title">{{item.name}}</div>
20 |       </div>
21 |     </List>
22 |   </div>
23 | 
24 |   <template id="template-list">  
25 |     <div class="list">
26 |       <div v-for="item in items" class="list-item">
27 |         <slot></slot>
28 |       </div>
29 |     </div>
30 |   </template>
31 | 
32 |   <script src='../../shared/vue-2.6.10.js'></script>
33 |   <script>
34 |   Vue.component("List", {
35 |     template: "#template-list",
36 |     props: {
37 |       items: {
38 |         type: Array, 
39 |         default: []
40 |       }
41 |     }
42 |   });
43 |   
44 |   new Vue({ 
45 |     el: '#demo',
46 |     data: {
47 |       listItems: [
48 |         {id: 1, name: "item 1", completed: false},
49 |         {id: 2, name: "item 2", completed: false},
50 |         {id: 3, name: "item 3", completed: false}
51 |       ]
52 |     }
53 |   });
54 |   </script>
55 | </body>
56 | </html>


--------------------------------------------------------------------------------
/chapter-4/example-3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Demo</title>
 9 |   <link rel="stylesheet" href="../../shared/normalize-5.0.0.min.css">
10 |   <link rel="stylesheet" href="../../shared/main.css">
11 |   <link rel="stylesheet" href="../../shared/list.css">
12 | </head>
13 | 
14 | <body>
15 |   <div id="demo">
16 |     <List :items="listItems">
17 |       <template v-slot:default="slotProps" class="list-item">
18 |         <input type="checkbox" v-model="slotProps.item.completed" class="list-item__checkbox" />
19 |         <div class="list-item__title">{{slotProps.item.name}}</div>
20 |       </template>
21 |     </List>
22 |   </div>
23 | 
24 |   <template id="template-list">  
25 |     <div class="list">
26 |       <div v-for="item in items" class="list-item">
27 |         <slot :item="item"></slot>
28 |       </div>
29 |     </div>
30 |   </template>
31 | 
32 |   <script src='../../shared/vue-2.6.10.js'></script>
33 |   <script>
34 |   Vue.component("List", {
35 |     template: "#template-list",
36 |     props: {
37 |       items: {
38 |         type: Array, 
39 |         default: []
40 |       }
41 |     }
42 |   });
43 |   
44 |   new Vue({ 
45 |     el: '#demo',
46 |     data: {
47 |       listItems: [
48 |         {id: 1, name: "item 1", completed: false},
49 |         {id: 2, name: "item 2", completed: false},
50 |         {id: 3, name: "item 3", completed: false}
51 |       ]
52 |     }
53 |   });
54 |   </script>
55 | </body>
56 | </html>


--------------------------------------------------------------------------------
/chapter-4/example-4/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Demo</title>
 9 |   <link rel="stylesheet" href="../../shared/normalize-5.0.0.min.css">
10 |   <link rel="stylesheet" href="../../shared/main.css">
11 |   <link rel="stylesheet" href="../../shared/list.css">
12 | </head>
13 | 
14 | <body>
15 |   <div id="demo">
16 |     <List :items="listItems">
17 |       <template v-slot:default="slotProps" class="list-item">
18 |         <input type="checkbox" v-model="slotProps.item.completed" class="list-item__checkbox" />
19 |         <div class="list-item__title">{{slotProps.item.name}}</div>
20 |         <button @click="remove(slotProps.item)" class="list-item__remove">×</button>
21 |       </template>
22 |     </List>
23 |   </div>
24 | 
25 |   <template id="template-list">  
26 |     <div class="list">
27 |       <div v-for="item in items" class="list-item">
28 |         <slot :item="item"></slot>
29 |       </div>
30 |     </div>
31 |   </template>
32 | 
33 |   <script src='../../shared/vue-2.6.10.js'></script>
34 |   <script>
35 |   Vue.component("List", {
36 |     template: "#template-list",
37 |     props: {
38 |       items: {
39 |         type: Array, 
40 |         default: []
41 |       }
42 |     }
43 |   });
44 |   
45 |   new Vue({ 
46 |     el: '#demo',
47 |     data: {
48 |       listItems: [
49 |         {id: 1, name: "item 1", completed: false},
50 |         {id: 2, name: "item 2", completed: false},
51 |         {id: 3, name: "item 3", completed: false}
52 |       ]
53 |     },
54 |     methods: {
55 |       remove(item) {
56 |         this.listItems.splice(this.listItems.indexOf(item), 1);
57 |       }
58 |     }
59 |   });
60 |   </script>
61 | </body>
62 | </html>


--------------------------------------------------------------------------------
/chapter-4/example-5/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Demo</title>
 9 |   <link rel="stylesheet" href="../../shared/normalize-5.0.0.min.css">
10 |   <link rel="stylesheet" href="../../shared/main.css">
11 |   <link rel="stylesheet" href="../../shared/list.css">
12 | </head>
13 | 
14 | <body>
15 |   <div id="demo">
16 |     <List :items="listItems">
17 |       <template v-slot:default="{item}" class="list-item">
18 |         <input type="checkbox" v-model="item.completed" class="list-item__checkbox" />
19 |         <div class="list-item__title">{{item.name}}</div>
20 |         <button @click="remove(item)" class="list-item__remove">×</button>
21 |       </template>
22 |     </List>
23 |   </div>
24 | 
25 |   <template id="template-list">  
26 |     <div class="list">
27 |       <div v-for="item in items" class="list-item">
28 |         <slot :item="item"></slot>
29 |       </div>
30 |     </div>
31 |   </template>
32 | 
33 |   <script src='../../shared/vue-2.6.10.js'></script>
34 |   <script>
35 |   Vue.component("List", {
36 |     template: "#template-list",
37 |     props: {
38 |       items: {
39 |         type: Array, 
40 |         default: []
41 |       }
42 |     }
43 |   });
44 |   
45 |   new Vue({ 
46 |     el: '#demo',
47 |     data: {
48 |       listItems: [
49 |         {id: 1, name: "item 1", completed: false},
50 |         {id: 2, name: "item 2", completed: false},
51 |         {id: 3, name: "item 3", completed: false}
52 |       ]
53 |     },
54 |     methods: {
55 |       remove(item) {
56 |         this.listItems.splice(this.listItems.indexOf(item), 1);
57 |       }
58 |     }
59 |   });
60 |   </script>
61 | </body>
62 | </html>


--------------------------------------------------------------------------------
/chapter-5/example-1/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |   <title>Demo</title>
  9 |   <link rel="stylesheet" href="../../shared/normalize-5.0.0.min.css">
 10 |   <link rel="stylesheet" href="../../shared/main.css">
 11 |   <link rel="stylesheet" href="../../shared/button.css">
 12 |   <link rel="stylesheet" href="../../shared/switch.css">
 13 |   <style>
 14 |     body {
 15 |       max-width: 40rem;
 16 |       margin: 0 auto;
 17 |       padding: 1em;
 18 | 
 19 |       color: #555;
 20 |     }
 21 | 
 22 |     section {
 23 |       margin: 1rem;
 24 |     }
 25 |   </style>
 26 | </head>
 27 | 
 28 | <body>
 29 |   <div id="demo">
 30 |     <section>
 31 |       <h2>Button Toggle</h2>
 32 |       <Toggle @change="handleChange">
 33 |         <template v-slot:default="{active, toggle}">
 34 |           <button @click="toggle" class="button">Toggle</button>
 35 |           <div>{{active ? "yes" : "no"}}</div>
 36 |         </template>
 37 |       </Toggle>
 38 |     </section>
 39 |     
 40 |     <section>
 41 |       <h2>Switch Toggle</h2>
 42 |       <Toggle @change="handleChange">
 43 |         <template v-slot:default="{active, toggle}">
 44 |           <switch-toggle :value="active" @input="toggle"></switch-toggle>
 45 |           <div>{{active ? "yes" : "no"}}</div>
 46 |         </template>
 47 |       </Toggle>
 48 |     </section>
 49 |   </div>
 50 | 
 51 |   <template id="toggle-template">  
 52 |     <div>
 53 |       <slot :active="active" :toggle="toggle"></slot>
 54 |     </div>
 55 |   </template>
 56 |   
 57 |   <template id="switch-template">  
 58 |     <label class="switch">
 59 |       <input type="checkbox" :checked="value" @change="$emit('input', $event.target.checked)"/>
 60 |       <div class="switch-knob"></div>
 61 |     </label>
 62 |   </template>
 63 |   
 64 |   <script src='../../shared/vue-2.6.10.js'></script>
 65 |   <script>
 66 |     Vue.component("SwitchToggle", {
 67 |       template: "#switch-template",
 68 |       props: {
 69 |         value: {
 70 |           type: Boolean,
 71 |           default: false
 72 |         }
 73 |       }
 74 |     });
 75 | 
 76 |     Vue.component("Toggle", {
 77 |       template: "#toggle-template",
 78 |       data() {
 79 |         return {
 80 |           active: false
 81 |         }
 82 |       },
 83 |       methods: {
 84 |         toggle() {
 85 |           this.active = !this.active;
 86 |           this.$emit("change", this.active);
 87 |         }
 88 |       }
 89 |     });
 90 | 
 91 |     new Vue({ 
 92 |       el: '#demo',
 93 |       methods: {
 94 |         handleChange(active) {
 95 |           console.log("> changed to ", active)
 96 |         }
 97 |       }
 98 |     });
 99 |   </script>
100 | </body>
101 | </html>


--------------------------------------------------------------------------------
/chapter-5/example-2/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |   <title>Demo</title>
  9 |   <link rel="stylesheet" href="../../shared/normalize-5.0.0.min.css">
 10 |   <link rel="stylesheet" href="../../shared/main.css">
 11 |   <link rel="stylesheet" href="../../shared/button.css">
 12 |   <link rel="stylesheet" href="../../shared/switch.css">
 13 |   <style>
 14 |     body {
 15 |       max-width: 40rem;
 16 |       margin: 0 auto;
 17 |       padding: 1em;
 18 | 
 19 |       color: #555;
 20 |     }
 21 | 
 22 |     section {
 23 |       margin: 1rem;
 24 |     }
 25 |   </style>
 26 | </head>
 27 | 
 28 | <body>
 29 |   <div id="demo">
 30 |     <section>
 31 |       <h2>Button Toggle</h2>
 32 |       <Toggle @change="handleChange">
 33 |         <template v-slot:default="{active, toggle}">
 34 |           <button @click="toggle" class="button">Toggle</button>
 35 |           <div>{{active ? "yes" : "no"}}</div>
 36 |         </template>
 37 |       </Toggle>
 38 |     </section>
 39 |     
 40 |     <section>
 41 |       <h2>Switch Toggle</h2>
 42 |       <Toggle @change="handleChange">
 43 |         <template v-slot:default="{active, toggle}">
 44 |           <switch-toggle :value="active" @input="toggle"></switch-toggle>
 45 |           <div>{{active ? "yes" : "no"}}</div>
 46 |         </template>
 47 |       </Toggle>
 48 |     </section>
 49 |   </div>
 50 | 
 51 |   <template id="switch-template">  
 52 |     <label class="switch">
 53 |       <input type="checkbox" :checked="value" @change="$emit('input', $event.target.checked)"/>
 54 |       <div class="switch-knob"></div>
 55 |     </label>
 56 |   </template>
 57 |   
 58 |   <script src='../../shared/vue-2.6.10.js'></script>
 59 |   <script>
 60 |     Vue.component("SwitchToggle", {
 61 |       template: "#switch-template",
 62 |       props: {
 63 |         value: {
 64 |           type: Boolean,
 65 |           default: false
 66 |         }
 67 |       }
 68 |     });
 69 | 
 70 |     Vue.component("Toggle", {
 71 |       render() {
 72 |         return this.$scopedSlots.default({
 73 |           active: this.active, 
 74 |           toggle: this.toggle
 75 |         })[0];
 76 |       },
 77 |       data() {
 78 |         return {
 79 |           active: false
 80 |         }
 81 |       },
 82 |       methods: {
 83 |         toggle() {
 84 |           this.active = !this.active;
 85 |           this.$emit("change", this.active);
 86 |         }
 87 |       }
 88 |     });
 89 | 
 90 |     new Vue({ 
 91 |       el: '#demo',
 92 |       methods: {
 93 |         handleChange(active) {
 94 |           console.log("> changed to ", active)
 95 |         }
 96 |       }
 97 |     });
 98 |   </script>
 99 | </body>
100 | </html>


--------------------------------------------------------------------------------
/chapter-5/example-3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Demo</title>
 9 |   <link rel="stylesheet" href="../../shared/normalize-5.0.0.min.css">
10 |   <link rel="stylesheet" href="../../shared/main.css">
11 |   <link rel="stylesheet" href="../../shared/expandable.css">
12 |   <style>
13 |     body {
14 |       max-width: 40rem;
15 |       margin: 0 auto;
16 |       padding: 1em;
17 | 
18 |       color: #555;
19 |     }
20 |   </style>
21 | </head>
22 | 
23 | <body>
24 |   <div id="demo">
25 |     <Toggle @change="handleChange">
26 |       <template v-slot:default="{active, toggle}">
27 |         <div class="expandable">
28 |           <h2 class="expandable__header">
29 |             Heading 2
30 |             <button class="expandable__trigger" @click="toggle" aria-expanded="active">
31 |               <svg aria-hidden="true" focusable="false" viewBox="0 0 10 10">
32 |                 <rect v-if="active" height="8" width="2" y="1" x="4"/>
33 |                 <rect height="2" width="8" y="4" x="1"/>
34 |               </svg> 
35 |             </button>
36 |           </h2>
37 |           <div v-if="active" class="expandable__content">
38 |             Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, ...
39 |           </div>
40 |         </div>
41 |       </template>
42 |     </Toggle>
43 |   </div>
44 | 
45 |   <script src='../../shared/vue-2.6.10.js'></script>
46 |   <script>
47 |     Vue.component("Toggle", {
48 |       render() {
49 |         return this.$scopedSlots.default({
50 |           active: this.active, 
51 |           toggle: this.toggle
52 |         })[0];
53 |       },
54 |       data() {
55 |         return {
56 |           active: false
57 |         }
58 |       },
59 |       methods: {
60 |         toggle() {
61 |           this.active = !this.active;
62 |           this.$emit("change", this.active);
63 |         }
64 |       }
65 |     });
66 | 
67 |     new Vue({ 
68 |       el: '#demo',
69 |       methods: {
70 |         handleChange(active) {
71 |           console.log("> changed to ", active)
72 |         }
73 |       }
74 |     });
75 |   </script>
76 | </body>
77 | </html>


--------------------------------------------------------------------------------
/chapter-5/example-4/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Demo</title>
 9 |   <link rel="stylesheet" href="../../shared/normalize-5.0.0.min.css">
10 |   <link rel="stylesheet" href="../../shared/main.css">
11 |   <link rel="stylesheet" href="../../shared/expandable.css">
12 |   <style>
13 |     body {
14 |       max-width: 40rem;
15 |       margin: 0 auto;
16 |       padding: 1em;
17 | 
18 |       color: #555;
19 |     }
20 |   </style>
21 | </head>
22 | 
23 | <body>
24 |   <div id="demo">
25 |     <Toggle @change="handleChange">
26 |       <template v-slot:default="{active, togglerProps, togglerEvents}">
27 |         <div class="expandable">
28 |           <h2 class="expandable__header">
29 |             Heading 2
30 |             <button class="expandable__trigger" v-bind="togglerProps" v-on="togglerEvents" >
31 |               <svg aria-hidden="true" focusable="false" viewBox="0 0 10 10">
32 |                 <rect v-if="active" height="8" width="2" y="1" x="4"/>
33 |                 <rect height="2" width="8" y="4" x="1"/>
34 |               </svg> 
35 |             </button>
36 |           </h2>
37 |           <div v-if="active" class="expandable__content">
38 |             Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, ...
39 |           </div>
40 |         </div>
41 |       </template>
42 |     </Toggle>
43 |   </div>
44 | 
45 |   <script src='../../shared/vue-2.6.10.js'></script>
46 |   <script>
47 |     Vue.component("Toggle", {
48 |       render() {
49 |         return this.$scopedSlots.default({
50 |           active: this.active, 
51 |           togglerProps: {
52 |             'aria-expanded': this.active
53 |           },
54 |           togglerEvents: {
55 |             'click': this.toggle
56 |           }
57 |         })[0];
58 |       },
59 |       data() {
60 |         return {
61 |           active: false
62 |         }
63 |       },
64 |       methods: {
65 |         toggle() {
66 |           this.active = !this.active;
67 |           this.$emit("change", this.active);
68 |         }
69 |       }
70 |     });
71 | 
72 |     new Vue({ 
73 |       el: '#demo',
74 |       methods: {
75 |         handleChange(active) {
76 |           console.log("> changed to ", active)
77 |         }
78 |       }
79 |     });
80 |   </script>
81 | </body>
82 | </html>


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


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


--------------------------------------------------------------------------------
/chapter-6/example-1/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "render-function",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "vue": "^2.5.16"
12 |   },
13 |   "devDependencies": {
14 |     "@vue/cli-plugin-babel": "^3.0.0-rc.5",
15 |     "@vue/cli-plugin-eslint": "^3.0.0-rc.5",
16 |     "@vue/cli-service": "^3.0.0-rc.5",
17 |     "vue-template-compiler": "^2.5.16"
18 |   },
19 |   "eslintConfig": {
20 |     "root": true,
21 |     "env": {
22 |       "node": true
23 |     },
24 |     "extends": [
25 |       "plugin:vue/essential",
26 |       "eslint:recommended"
27 |     ],
28 |     "rules": {},
29 |     "parserOptions": {
30 |       "parser": "babel-eslint"
31 |     }
32 |   },
33 |   "postcss": {
34 |     "plugins": {
35 |       "autoprefixer": {}
36 |     }
37 |   },
38 |   "browserslist": [
39 |     "> 1%",
40 |     "last 2 versions",
41 |     "not ie <= 8"
42 |   ]
43 | }
44 | 


--------------------------------------------------------------------------------
/chapter-6/example-1/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fdietz/vue_components_book_examples/a80ae43cb02a1e56731d6197f1a0d1e8a11576fc/chapter-6/example-1/public/favicon.ico


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


--------------------------------------------------------------------------------
/chapter-6/example-1/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <img src="./assets/logo.png">
 4 |     <HelloWorld msg="Welcome to Your Vue.js App" @click="clickCount+=1">
 5 |       <p>I was clicked: {{clickCount}}</p>
 6 |     </HelloWorld>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import HelloWorld from "./components/HelloWorld.vue";
12 | 
13 | export default {
14 |   name: "app",
15 |   data() {
16 |     return {
17 |       clickCount: 0
18 |     };
19 |   },
20 |   components: {
21 |     HelloWorld
22 |   }
23 | };
24 | </script>
25 | 
26 | <style>
27 | #app {
28 |   font-family: "Avenir", Helvetica, Arial, sans-serif;
29 |   -webkit-font-smoothing: antialiased;
30 |   -moz-osx-font-smoothing: grayscale;
31 |   text-align: center;
32 |   color: #2c3e50;
33 |   margin-top: 60px;
34 | }
35 | </style>
36 | 


--------------------------------------------------------------------------------
/chapter-6/example-1/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fdietz/vue_components_book_examples/a80ae43cb02a1e56731d6197f1a0d1e8a11576fc/chapter-6/example-1/src/assets/logo.png


--------------------------------------------------------------------------------
/chapter-6/example-1/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
1 | <template functional>
2 |   <div class="hello">
3 |     <h1>{{ props.msg }}</h1>
4 |     <button @click="listeners.click">Click me</button>
5 |     <slot></slot>
6 |   </div>
7 | </template>


--------------------------------------------------------------------------------
/chapter-6/example-1/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App)
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/chapter-6/example-2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Demo</title>
 9 |   <link rel="stylesheet" href="../../shared/normalize-5.0.0.min.css">
10 |   <link rel="stylesheet" href="../../shared/main.css">
11 |   <link rel="stylesheet" href="../../shared/expandable.css">
12 |   <style>
13 |     body {
14 |       max-width: 40rem;
15 |       margin: 0 auto;
16 |       padding: 1em;
17 | 
18 |       color: #555;
19 |     }
20 |   </style>
21 | </head>
22 | 
23 | <body>
24 |   <div id="demo">
25 |     <hello-world msg="Welcome to Your Vue.js App" @click="clickCount+=1">
26 |       <p>I was clicked: {{clickCount}}</p>
27 |     </hello-world>
28 |   </div>
29 | 
30 |   <script src='../../shared/vue-2.6.10.js'></script>
31 |   <script>
32 |     Vue.component("hello-world", {
33 |       functional: true,
34 |       render(createElement, {data, listeners, slots}) {
35 |         return createElement("div", { class: "hello" }, [
36 |           createElement('h2', data.attrs.msg),
37 |           createElement('button', { 
38 |             on: { 
39 |               click: listeners.click 
40 |             } 
41 |           }, 'Click me'), 
42 |           slots().default
43 |         ]);
44 |       }
45 |     });
46 | 
47 |     new Vue({ 
48 |       el: '#demo',
49 |       data() {
50 |         return {
51 |           clickCount: 0
52 |         };
53 |       }
54 |     });
55 |   </script>
56 | </body>
57 | </html>


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


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


--------------------------------------------------------------------------------
/chapter-6/example-3/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example-3",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "vue": "^2.5.16"
12 |   },
13 |   "devDependencies": {
14 |     "@vue/cli-plugin-babel": "^3.0.0-rc.5",
15 |     "@vue/cli-plugin-eslint": "^3.0.0-rc.5",
16 |     "@vue/cli-service": "^3.0.0-rc.5",
17 |     "vue-template-compiler": "^2.5.16"
18 |   },
19 |   "eslintConfig": {
20 |     "root": true,
21 |     "env": {
22 |       "node": true
23 |     },
24 |     "extends": [
25 |       "plugin:vue/essential",
26 |       "eslint:recommended"
27 |     ],
28 |     "rules": {},
29 |     "parserOptions": {
30 |       "parser": "babel-eslint"
31 |     }
32 |   },
33 |   "postcss": {
34 |     "plugins": {
35 |       "autoprefixer": {}
36 |     }
37 |   },
38 |   "browserslist": [
39 |     "> 1%",
40 |     "last 2 versions",
41 |     "not ie <= 8"
42 |   ]
43 | }
44 | 


--------------------------------------------------------------------------------
/chapter-6/example-3/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fdietz/vue_components_book_examples/a80ae43cb02a1e56731d6197f1a0d1e8a11576fc/chapter-6/example-3/public/favicon.ico


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


--------------------------------------------------------------------------------
/chapter-6/example-3/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <img src="./assets/logo.png">
 4 |     <HelloWorld msg="Welcome to Your Vue.js App" @click="clickCount+=1">
 5 |       <p>I was clicked: {{clickCount}}</p>
 6 |     </HelloWorld>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import HelloWorld from "./components/HelloWorld.vue";
12 | 
13 | export default {
14 |   name: "app",
15 |   data() {
16 |     return {
17 |       clickCount: 0
18 |     };
19 |   },
20 |   components: {
21 |     HelloWorld
22 |   }
23 | };
24 | </script>
25 | 
26 | <style>
27 | #app {
28 |   font-family: "Avenir", Helvetica, Arial, sans-serif;
29 |   -webkit-font-smoothing: antialiased;
30 |   -moz-osx-font-smoothing: grayscale;
31 |   text-align: center;
32 |   color: #2c3e50;
33 |   margin-top: 60px;
34 | }
35 | </style>
36 | 


--------------------------------------------------------------------------------
/chapter-6/example-3/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fdietz/vue_components_book_examples/a80ae43cb02a1e56731d6197f1a0d1e8a11576fc/chapter-6/example-3/src/assets/logo.png


--------------------------------------------------------------------------------
/chapter-6/example-3/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   name: "HelloWorld",
 4 |   functional: true,
 5 |   render(h, { data, listeners, children }) {
 6 |     return (
 7 |       <div class="hello">
 8 |         <h1>{data.attrs.msg}</h1>
 9 |         <button onClick={listeners.click}>Click me</button>
10 |         {children}
11 |       </div>
12 |     );
13 |   }
14 | };
15 | </script>
16 | 


--------------------------------------------------------------------------------
/chapter-6/example-3/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App)
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/chapter-7/example-1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Demo</title>
 9 |   <link rel="stylesheet" href="../../shared/normalize-5.0.0.min.css">
10 |   <link rel="stylesheet" href="../../shared/main.css">
11 |   <style>
12 |     .tab-list {
13 |       display: flex;
14 |       margin: 0;
15 |       padding: 0;
16 |       list-style: none;
17 |     }
18 |    
19 |     .tab {
20 |       display: block; 
21 |       background-color: #eee;
22 |       
23 |       padding: 0.5rem 1rem;
24 |     }
25 | 
26 |     .tab:hover {
27 |       background: #e0e0e0;
28 |     }
29 | 
30 |     .tab.active {
31 |       background: #64a1e6;
32 |       color: white;
33 |     }
34 |     
35 |     .tab-content {
36 |       border: 1px solid #eee;
37 |       padding: 1rem;
38 |     }
39 |   </style>
40 | </head>
41 | 
42 | <body>
43 |   <div id="demo">
44 |     <ul class="tab-list">
45 |       <li 
46 |         v-for="tab in tabs"
47 |         :key="tab"
48 |         >
49 |         <a
50 |           :class="['tab', { active: currentTab === tab }]" 
51 |           @click="currentTab = tab">
52 |           {{tab}}
53 |         </a>
54 |       </li>
55 |     </ul>
56 | 
57 |     <component
58 |       :is="currentTabComponent"
59 |       class="tab-content">
60 |     </component>
61 |   </div>
62 | 
63 |   <script src='../../shared/vue-2.6.10.js'></script>
64 |   <script>
65 |     Vue.component('tab-home', { 
66 |       template: '<div>Home component</div>' 
67 |     });
68 | 
69 |     Vue.component('tab-posts', { 
70 |       template: '<div>Posts component</div>' 
71 |     });
72 | 
73 |     Vue.component('tab-archive', { 
74 |       template: '<div>Archive component</div>' 
75 |     });
76 | 
77 |     new Vue({ 
78 |       el: '#demo',
79 |       data: {
80 |         currentTab: 'Home',
81 |         tabs: ['Home', 'Posts', 'Archive']
82 |       },
83 |       computed: {
84 |         currentTabComponent: function () {
85 |           return 'tab-' + this.currentTab.toLowerCase()
86 |         }
87 |       }
88 |     });
89 |   </script>
90 | </body>
91 | </html>


--------------------------------------------------------------------------------
/chapter-8/example-1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Demo</title>
 9 |   <link rel="stylesheet" href="../../shared/normalize-5.0.0.min.css">
10 |   <link rel="stylesheet" href="../../shared/main.css">
11 |   <style>
12 |     body {
13 |       max-width: 40rem;
14 |       margin: 0 auto;
15 |       padding: 1em;
16 | 
17 |       color: #555;
18 |     }
19 | 
20 |     section {
21 |       margin: 1rem;
22 |     }
23 |   </style>
24 | </head>
25 | 
26 | <body>
27 |   <div id="demo">
28 |     <card-profile first-name="Michael" age="30" />
29 |     <card-profile first-name="Lana" age="32" />
30 |   </div>
31 | 
32 |   <template id="card-profile-template">  
33 |     <div>
34 |       <h2>My Profile</h2>
35 |       <div>
36 |         {{translate("firstName")}}: {{firstName}}
37 |       </div>
38 |       <div>
39 |         {{translate("age")}}: {{age}}
40 |       </div>
41 |     </div>
42 |   </template>
43 | 
44 |   <script src='../../shared/vue-2.6.10.js'></script>
45 |   <script>
46 |     const TRANSLATIONS = {
47 |       en: {
48 |         firstName: "Firstname",
49 |         age: "Age"
50 |       },
51 |       de: {
52 |         firstName: "Vorname",
53 |         age: "Alter"
54 |       }
55 |     };
56 | 
57 |     const Translate = Vue.mixin({
58 |       methods: {
59 |         translate(key) {
60 |           return TRANSLATIONS[this.$root.locale][key];
61 |         }
62 |       },
63 |       ready() {
64 |         // default locale set to "en"
65 |         this.$root.$set("locale", "en");
66 |       }
67 |     });
68 | 
69 |     Vue.component("card-profile", {
70 |       template: "#card-profile-template",
71 |       props: {
72 |         firstName: String,
73 |         age: String
74 |       }
75 |     });
76 | 
77 |     new Vue({ 
78 |       el: '#demo',
79 |       mixins: [Translate],
80 |       data: {
81 |         locale: "en"
82 |       }
83 |     });
84 |   </script>
85 | </body>
86 | </html>


--------------------------------------------------------------------------------
/chapter-8/example-2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Demo</title>
 9 |   <link rel="stylesheet" href="../../shared/normalize-5.0.0.min.css">
10 |   <link rel="stylesheet" href="../../shared/main.css">
11 |   <style>
12 |     body {
13 |       max-width: 40rem;
14 |       margin: 0 auto;
15 |       padding: 1em;
16 | 
17 |       color: #555;
18 |     }
19 | 
20 |     section {
21 |       margin: 1rem;
22 |     }
23 |   </style>
24 | </head>
25 | 
26 | <body>
27 |   <div id="demo">
28 |     <article-card />
29 |   </div>
30 | 
31 |   <template id="article-card-template">  
32 |     <div>
33 |       <span v-if="loading">Loading...</span>
34 |       <div v-else>
35 |         <h2>{{response.title}}</h2>
36 |         {{response.body}}
37 |       </div>
38 |     </div>
39 |   </template>
40 | 
41 |   <script src='../../shared/vue-2.6.10.js'></script>
42 |   <script src="../../shared/axios-0.18.0.js"></script>
43 | 
44 |   <script>
45 |     const DataLoader = Vue.mixin({
46 |       data() {
47 |         return {
48 |           loading: false,
49 |           response: null
50 |         }
51 |       },
52 |       methods: {
53 |         load(url) {
54 |           this.loading = true;
55 |           return axios.get(url)
56 |             .then(response => {
57 |               this.response = response.data;
58 |               this.loading = false;
59 |             })
60 |         }
61 |       }
62 |     });
63 | 
64 |     Vue.component("article-card", {
65 |       mixins: [DataLoader],
66 |       template: "#article-card-template",
67 |       created() {
68 |         this.load("https://jsonplaceholder.typicode.com/posts/1")
69 |       }
70 |     });
71 | 
72 |     new Vue({ 
73 |       el: '#demo'
74 |     });
75 |   </script>
76 | </body>
77 | </html>


--------------------------------------------------------------------------------
/chapter-8/example-3/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |   <title>Demo</title>
  9 |   <link rel="stylesheet" href="../../shared/normalize-5.0.0.min.css">
 10 |   <link rel="stylesheet" href="../../shared/main.css">
 11 |   <style>
 12 |     body {
 13 |       max-width: 40rem;
 14 |       margin: 0 auto;
 15 |       padding: 1em;
 16 | 
 17 |       color: #555;
 18 |     }
 19 | 
 20 |     .article-card {
 21 |       border-top: 2px solid #555;
 22 |       margin-bottom: 1rem;
 23 |       padding: 1rem;
 24 |     }
 25 |     
 26 |   </style>
 27 | </head>
 28 | 
 29 | <body>
 30 |   <div id="demo">
 31 |     <base-article-card id="1"></base-article-card>
 32 |     <advanced-article-card id="2"></advanced-article-card>
 33 |   </div>
 34 | 
 35 |   <template id="base-article-card-template">  
 36 |     <div class="article-card">
 37 |       <div v-if="loading">Loading...</div>
 38 |       <div v-else>
 39 |         <h2>{{title}}</h2>
 40 |         {{body}}
 41 |       </div>
 42 |     </div>
 43 |   </template>
 44 | 
 45 |   <template id="advanced-article-card-template">  
 46 |     <div class="article-card">
 47 |       <div v-if="loading">Loading...</div>
 48 |       <div v-else>
 49 |         <h2>{{articleTitle}}</h2>
 50 |         <p>Written by User ID: {{userId}}</p>
 51 |         {{body}}
 52 |       </div>
 53 |     </div>
 54 |   </template>
 55 | 
 56 |   <script src='../../shared/vue-2.6.10.js'></script>
 57 |   <script src="../../shared/axios-0.18.0.js"></script>
 58 | 
 59 |   <script>
 60 |     const BaseArticleCard = Vue.component("base-article-card", {
 61 |       props: ["id"],
 62 |       template: "#base-article-card-template",
 63 |       data() {
 64 |         return {
 65 |           loading: false,
 66 |           title: "",
 67 |           body: "",
 68 |           userId: ""
 69 |         }
 70 |       },
 71 |       computed: {
 72 |         articleTitle() { 
 73 |           return `Article: ${this.title}`;
 74 |         }
 75 |       },
 76 |       methods: {
 77 |         load(id) {
 78 |           this.loading = true;
 79 |           return axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`)
 80 |             .then(response => {
 81 |               this.title = response.data.title;
 82 |               this.body = response.data.body;
 83 |               this.userId = response.data.userId;
 84 |               this.loading = false;
 85 |             });
 86 |         }
 87 |       },
 88 |       created() {
 89 |         this.load(this.id);
 90 |       }
 91 |     });
 92 | 
 93 |     Vue.component("advanced-article-card", {
 94 |       extends: BaseArticleCard,
 95 |       template: "#advanced-article-card-template"
 96 |     });
 97 |     
 98 |     new Vue({ 
 99 |       el: '#demo'
100 |     });
101 |   </script>
102 | </body>
103 | </html>


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


--------------------------------------------------------------------------------
/chapter-8/example-4/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }


--------------------------------------------------------------------------------
/chapter-8/example-4/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example-4",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.18.0",
12 |     "vue": "^2.5.16"
13 |   },
14 |   "devDependencies": {
15 |     "@vue/cli-plugin-babel": "^3.0.0-rc.5",
16 |     "@vue/cli-plugin-eslint": "^3.0.0-rc.5",
17 |     "@vue/cli-service": "^3.0.0-rc.5",
18 |     "vue-template-compiler": "^2.5.16"
19 |   },
20 |   "eslintConfig": {
21 |     "root": true,
22 |     "env": {
23 |       "node": true
24 |     },
25 |     "extends": [
26 |       "plugin:vue/essential",
27 |       "eslint:recommended"
28 |     ],
29 |     "rules": {},
30 |     "parserOptions": {
31 |       "parser": "babel-eslint"
32 |     }
33 |   },
34 |   "postcss": {
35 |     "plugins": {
36 |       "autoprefixer": {}
37 |     }
38 |   },
39 |   "browserslist": [
40 |     "> 1%",
41 |     "last 2 versions",
42 |     "not ie <= 8"
43 |   ]
44 | }
45 | 


--------------------------------------------------------------------------------
/chapter-8/example-4/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fdietz/vue_components_book_examples/a80ae43cb02a1e56731d6197f1a0d1e8a11576fc/chapter-8/example-4/public/favicon.ico


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


--------------------------------------------------------------------------------
/chapter-8/example-4/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <ArticleCardWithLoader id="1"></ArticleCardWithLoader>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import ArticleCard from "./components/ArticleCard.vue";
 9 | import withLoader from "./withLoader";
10 | const ArticleCardWithLoader = withLoader(ArticleCard);
11 | 
12 | export default {
13 |   name: "app",
14 |   components: {
15 |     ArticleCardWithLoader
16 |   }
17 | };
18 | </script>
19 | 
20 | <style>
21 | #app {
22 |   font-family: "Avenir", Helvetica, Arial, sans-serif;
23 |   -webkit-font-smoothing: antialiased;
24 |   -moz-osx-font-smoothing: grayscale;
25 |   text-align: center;
26 |   color: #2c3e50;
27 |   margin-top: 60px;
28 | }
29 | </style>
30 | 


--------------------------------------------------------------------------------
/chapter-8/example-4/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fdietz/vue_components_book_examples/a80ae43cb02a1e56731d6197f1a0d1e8a11576fc/chapter-8/example-4/src/assets/logo.png


--------------------------------------------------------------------------------
/chapter-8/example-4/src/components/ArticleCard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="article-card">
 3 |     <div v-if="loading">Loading...</div>
 4 |     <div v-else>
 5 |       <h2>{{title}}</h2>
 6 |       {{body}}
 7 |     </div>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   props: {
14 |     loading: Boolean,
15 |     title: String,
16 |     body: String
17 |   }
18 | };
19 | </script>
20 | 
21 | <style scoped>
22 | .article-card {
23 |   border-top: 2px solid #555;
24 |   margin-bottom: 1rem;
25 |   padding: 1rem;
26 | }
27 | </style>
28 | 


--------------------------------------------------------------------------------
/chapter-8/example-4/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App)
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/chapter-8/example-4/src/withLoader.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import axios from "axios";
 3 | 
 4 | const withLoader = component => {
 5 |   return Vue.component("with-loader", {
 6 |     render(createElement) {
 7 |       return createElement(component, {
 8 |         props: {
 9 |           loading: this.loading,
10 |           title: this.title,
11 |           body: this.body
12 |         }
13 |       });
14 |     },
15 |     props: ["id"],
16 |     data() {
17 |       return {
18 |         loading: false,
19 |         title: "",
20 |         body: "",
21 |       }
22 |     },
23 |     methods: {
24 |       load(id) {
25 |         this.loading = true;
26 |         return axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`)
27 |           .then(response => {
28 |             this.title = response.data.title;
29 |             this.body = response.data.body;
30 |             this.loading = false;
31 |           });
32 |       }
33 |     },
34 |     created() {
35 |       this.load(this.id);
36 |     }
37 |   });
38 | };
39 | 
40 | export default withLoader;


--------------------------------------------------------------------------------
/chapter-9/example-1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Demo</title>
 9 |   <link rel="stylesheet" href="../../shared/normalize-5.0.0.min.css">
10 |   <link rel="stylesheet" href="../../shared/main.css">
11 | </head>
12 | 
13 | <body>
14 |   <div id="demo">
15 |     <user-list-container>
16 |     </user-list-container>
17 |   </div>
18 | 
19 |   <template id="user-list-container-template">
20 |     <user-list :users="users"></user-list>
21 |   </template>
22 | 
23 |   <template id="user-list-template">
24 |     <ul>
25 |       <li v-for="user in users" :key="user.id">
26 |         {{user.name}}
27 |       </li>
28 |     </ul>
29 |   </template>
30 | 
31 |   <script src='../../shared/vue-2.6.10.js'></script>
32 |   <script>
33 |     Vue.component("user-list-container", {
34 |       template: "#user-list-container-template",
35 |       data() {
36 |         return {
37 |           users: [
38 |             { id: 1, name: "Donald Duck" },
39 |             { id: 2, name: "John Doe" },
40 |             { id: 3, name: "Sherlock Holmes" }
41 |           ]
42 |         }
43 |       }
44 |     });
45 | 
46 |     Vue.component("user-list", {
47 |       props: ["users"],
48 |       template: "#user-list-template"
49 |     });
50 | 
51 |     new Vue({ el: '#demo' });
52 |   </script>
53 | </body>
54 | 
55 | </html>


--------------------------------------------------------------------------------
/shared/avatars/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fdietz/vue_components_book_examples/a80ae43cb02a1e56731d6197f1a0d1e8a11576fc/shared/avatars/1.jpg


--------------------------------------------------------------------------------
/shared/avatars/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fdietz/vue_components_book_examples/a80ae43cb02a1e56731d6197f1a0d1e8a11576fc/shared/avatars/2.jpg


--------------------------------------------------------------------------------
/shared/avatars/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fdietz/vue_components_book_examples/a80ae43cb02a1e56731d6197f1a0d1e8a11576fc/shared/avatars/3.jpg


--------------------------------------------------------------------------------
/shared/avatars/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fdietz/vue_components_book_examples/a80ae43cb02a1e56731d6197f1a0d1e8a11576fc/shared/avatars/4.jpg


--------------------------------------------------------------------------------
/shared/axios-0.18.0.js:
--------------------------------------------------------------------------------
   1 | /* axios v0.18.0 | (c) 2018 by Matt Zabriskie */
   2 | (function webpackUniversalModuleDefinition(root, factory) {
   3 | 	if(typeof exports === 'object' && typeof module === 'object')
   4 | 		module.exports = factory();
   5 | 	else if(typeof define === 'function' && define.amd)
   6 | 		define([], factory);
   7 | 	else if(typeof exports === 'object')
   8 | 		exports["axios"] = factory();
   9 | 	else
  10 | 		root["axios"] = factory();
  11 | })(this, function() {
  12 | return /******/ (function(modules) { // webpackBootstrap
  13 | /******/ 	// The module cache
  14 | /******/ 	var installedModules = {};
  15 | /******/
  16 | /******/ 	// The require function
  17 | /******/ 	function __webpack_require__(moduleId) {
  18 | /******/
  19 | /******/ 		// Check if module is in cache
  20 | /******/ 		if(installedModules[moduleId])
  21 | /******/ 			return installedModules[moduleId].exports;
  22 | /******/
  23 | /******/ 		// Create a new module (and put it into the cache)
  24 | /******/ 		var module = installedModules[moduleId] = {
  25 | /******/ 			exports: {},
  26 | /******/ 			id: moduleId,
  27 | /******/ 			loaded: false
  28 | /******/ 		};
  29 | /******/
  30 | /******/ 		// Execute the module function
  31 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  32 | /******/
  33 | /******/ 		// Flag the module as loaded
  34 | /******/ 		module.loaded = true;
  35 | /******/
  36 | /******/ 		// Return the exports of the module
  37 | /******/ 		return module.exports;
  38 | /******/ 	}
  39 | /******/
  40 | /******/
  41 | /******/ 	// expose the modules object (__webpack_modules__)
  42 | /******/ 	__webpack_require__.m = modules;
  43 | /******/
  44 | /******/ 	// expose the module cache
  45 | /******/ 	__webpack_require__.c = installedModules;
  46 | /******/
  47 | /******/ 	// __webpack_public_path__
  48 | /******/ 	__webpack_require__.p = "";
  49 | /******/
  50 | /******/ 	// Load entry module and return exports
  51 | /******/ 	return __webpack_require__(0);
  52 | /******/ })
  53 | /************************************************************************/
  54 | /******/ ([
  55 | /* 0 */
  56 | /***/ (function(module, exports, __webpack_require__) {
  57 | 
  58 | 	module.exports = __webpack_require__(1);
  59 | 
  60 | /***/ }),
  61 | /* 1 */
  62 | /***/ (function(module, exports, __webpack_require__) {
  63 | 
  64 | 	'use strict';
  65 | 	
  66 | 	var utils = __webpack_require__(2);
  67 | 	var bind = __webpack_require__(3);
  68 | 	var Axios = __webpack_require__(5);
  69 | 	var defaults = __webpack_require__(6);
  70 | 	
  71 | 	/**
  72 | 	 * Create an instance of Axios
  73 | 	 *
  74 | 	 * @param {Object} defaultConfig The default config for the instance
  75 | 	 * @return {Axios} A new instance of Axios
  76 | 	 */
  77 | 	function createInstance(defaultConfig) {
  78 | 	  var context = new Axios(defaultConfig);
  79 | 	  var instance = bind(Axios.prototype.request, context);
  80 | 	
  81 | 	  // Copy axios.prototype to instance
  82 | 	  utils.extend(instance, Axios.prototype, context);
  83 | 	
  84 | 	  // Copy context to instance
  85 | 	  utils.extend(instance, context);
  86 | 	
  87 | 	  return instance;
  88 | 	}
  89 | 	
  90 | 	// Create the default instance to be exported
  91 | 	var axios = createInstance(defaults);
  92 | 	
  93 | 	// Expose Axios class to allow class inheritance
  94 | 	axios.Axios = Axios;
  95 | 	
  96 | 	// Factory for creating new instances
  97 | 	axios.create = function create(instanceConfig) {
  98 | 	  return createInstance(utils.merge(defaults, instanceConfig));
  99 | 	};
 100 | 	
 101 | 	// Expose Cancel & CancelToken
 102 | 	axios.Cancel = __webpack_require__(23);
 103 | 	axios.CancelToken = __webpack_require__(24);
 104 | 	axios.isCancel = __webpack_require__(20);
 105 | 	
 106 | 	// Expose all/spread
 107 | 	axios.all = function all(promises) {
 108 | 	  return Promise.all(promises);
 109 | 	};
 110 | 	axios.spread = __webpack_require__(25);
 111 | 	
 112 | 	module.exports = axios;
 113 | 	
 114 | 	// Allow use of default import syntax in TypeScript
 115 | 	module.exports.default = axios;
 116 | 
 117 | 
 118 | /***/ }),
 119 | /* 2 */
 120 | /***/ (function(module, exports, __webpack_require__) {
 121 | 
 122 | 	'use strict';
 123 | 	
 124 | 	var bind = __webpack_require__(3);
 125 | 	var isBuffer = __webpack_require__(4);
 126 | 	
 127 | 	/*global toString:true*/
 128 | 	
 129 | 	// utils is a library of generic helper functions non-specific to axios
 130 | 	
 131 | 	var toString = Object.prototype.toString;
 132 | 	
 133 | 	/**
 134 | 	 * Determine if a value is an Array
 135 | 	 *
 136 | 	 * @param {Object} val The value to test
 137 | 	 * @returns {boolean} True if value is an Array, otherwise false
 138 | 	 */
 139 | 	function isArray(val) {
 140 | 	  return toString.call(val) === '[object Array]';
 141 | 	}
 142 | 	
 143 | 	/**
 144 | 	 * Determine if a value is an ArrayBuffer
 145 | 	 *
 146 | 	 * @param {Object} val The value to test
 147 | 	 * @returns {boolean} True if value is an ArrayBuffer, otherwise false
 148 | 	 */
 149 | 	function isArrayBuffer(val) {
 150 | 	  return toString.call(val) === '[object ArrayBuffer]';
 151 | 	}
 152 | 	
 153 | 	/**
 154 | 	 * Determine if a value is a FormData
 155 | 	 *
 156 | 	 * @param {Object} val The value to test
 157 | 	 * @returns {boolean} True if value is an FormData, otherwise false
 158 | 	 */
 159 | 	function isFormData(val) {
 160 | 	  return (typeof FormData !== 'undefined') && (val instanceof FormData);
 161 | 	}
 162 | 	
 163 | 	/**
 164 | 	 * Determine if a value is a view on an ArrayBuffer
 165 | 	 *
 166 | 	 * @param {Object} val The value to test
 167 | 	 * @returns {boolean} True if value is a view on an ArrayBuffer, otherwise false
 168 | 	 */
 169 | 	function isArrayBufferView(val) {
 170 | 	  var result;
 171 | 	  if ((typeof ArrayBuffer !== 'undefined') && (ArrayBuffer.isView)) {
 172 | 	    result = ArrayBuffer.isView(val);
 173 | 	  } else {
 174 | 	    result = (val) && (val.buffer) && (val.buffer instanceof ArrayBuffer);
 175 | 	  }
 176 | 	  return result;
 177 | 	}
 178 | 	
 179 | 	/**
 180 | 	 * Determine if a value is a String
 181 | 	 *
 182 | 	 * @param {Object} val The value to test
 183 | 	 * @returns {boolean} True if value is a String, otherwise false
 184 | 	 */
 185 | 	function isString(val) {
 186 | 	  return typeof val === 'string';
 187 | 	}
 188 | 	
 189 | 	/**
 190 | 	 * Determine if a value is a Number
 191 | 	 *
 192 | 	 * @param {Object} val The value to test
 193 | 	 * @returns {boolean} True if value is a Number, otherwise false
 194 | 	 */
 195 | 	function isNumber(val) {
 196 | 	  return typeof val === 'number';
 197 | 	}
 198 | 	
 199 | 	/**
 200 | 	 * Determine if a value is undefined
 201 | 	 *
 202 | 	 * @param {Object} val The value to test
 203 | 	 * @returns {boolean} True if the value is undefined, otherwise false
 204 | 	 */
 205 | 	function isUndefined(val) {
 206 | 	  return typeof val === 'undefined';
 207 | 	}
 208 | 	
 209 | 	/**
 210 | 	 * Determine if a value is an Object
 211 | 	 *
 212 | 	 * @param {Object} val The value to test
 213 | 	 * @returns {boolean} True if value is an Object, otherwise false
 214 | 	 */
 215 | 	function isObject(val) {
 216 | 	  return val !== null && typeof val === 'object';
 217 | 	}
 218 | 	
 219 | 	/**
 220 | 	 * Determine if a value is a Date
 221 | 	 *
 222 | 	 * @param {Object} val The value to test
 223 | 	 * @returns {boolean} True if value is a Date, otherwise false
 224 | 	 */
 225 | 	function isDate(val) {
 226 | 	  return toString.call(val) === '[object Date]';
 227 | 	}
 228 | 	
 229 | 	/**
 230 | 	 * Determine if a value is a File
 231 | 	 *
 232 | 	 * @param {Object} val The value to test
 233 | 	 * @returns {boolean} True if value is a File, otherwise false
 234 | 	 */
 235 | 	function isFile(val) {
 236 | 	  return toString.call(val) === '[object File]';
 237 | 	}
 238 | 	
 239 | 	/**
 240 | 	 * Determine if a value is a Blob
 241 | 	 *
 242 | 	 * @param {Object} val The value to test
 243 | 	 * @returns {boolean} True if value is a Blob, otherwise false
 244 | 	 */
 245 | 	function isBlob(val) {
 246 | 	  return toString.call(val) === '[object Blob]';
 247 | 	}
 248 | 	
 249 | 	/**
 250 | 	 * Determine if a value is a Function
 251 | 	 *
 252 | 	 * @param {Object} val The value to test
 253 | 	 * @returns {boolean} True if value is a Function, otherwise false
 254 | 	 */
 255 | 	function isFunction(val) {
 256 | 	  return toString.call(val) === '[object Function]';
 257 | 	}
 258 | 	
 259 | 	/**
 260 | 	 * Determine if a value is a Stream
 261 | 	 *
 262 | 	 * @param {Object} val The value to test
 263 | 	 * @returns {boolean} True if value is a Stream, otherwise false
 264 | 	 */
 265 | 	function isStream(val) {
 266 | 	  return isObject(val) && isFunction(val.pipe);
 267 | 	}
 268 | 	
 269 | 	/**
 270 | 	 * Determine if a value is a URLSearchParams object
 271 | 	 *
 272 | 	 * @param {Object} val The value to test
 273 | 	 * @returns {boolean} True if value is a URLSearchParams object, otherwise false
 274 | 	 */
 275 | 	function isURLSearchParams(val) {
 276 | 	  return typeof URLSearchParams !== 'undefined' && val instanceof URLSearchParams;
 277 | 	}
 278 | 	
 279 | 	/**
 280 | 	 * Trim excess whitespace off the beginning and end of a string
 281 | 	 *
 282 | 	 * @param {String} str The String to trim
 283 | 	 * @returns {String} The String freed of excess whitespace
 284 | 	 */
 285 | 	function trim(str) {
 286 | 	  return str.replace(/^\s*/, '').replace(/\s*$/, '');
 287 | 	}
 288 | 	
 289 | 	/**
 290 | 	 * Determine if we're running in a standard browser environment
 291 | 	 *
 292 | 	 * This allows axios to run in a web worker, and react-native.
 293 | 	 * Both environments support XMLHttpRequest, but not fully standard globals.
 294 | 	 *
 295 | 	 * web workers:
 296 | 	 *  typeof window -> undefined
 297 | 	 *  typeof document -> undefined
 298 | 	 *
 299 | 	 * react-native:
 300 | 	 *  navigator.product -> 'ReactNative'
 301 | 	 */
 302 | 	function isStandardBrowserEnv() {
 303 | 	  if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
 304 | 	    return false;
 305 | 	  }
 306 | 	  return (
 307 | 	    typeof window !== 'undefined' &&
 308 | 	    typeof document !== 'undefined'
 309 | 	  );
 310 | 	}
 311 | 	
 312 | 	/**
 313 | 	 * Iterate over an Array or an Object invoking a function for each item.
 314 | 	 *
 315 | 	 * If `obj` is an Array callback will be called passing
 316 | 	 * the value, index, and complete array for each item.
 317 | 	 *
 318 | 	 * If 'obj' is an Object callback will be called passing
 319 | 	 * the value, key, and complete object for each property.
 320 | 	 *
 321 | 	 * @param {Object|Array} obj The object to iterate
 322 | 	 * @param {Function} fn The callback to invoke for each item
 323 | 	 */
 324 | 	function forEach(obj, fn) {
 325 | 	  // Don't bother if no value provided
 326 | 	  if (obj === null || typeof obj === 'undefined') {
 327 | 	    return;
 328 | 	  }
 329 | 	
 330 | 	  // Force an array if not already something iterable
 331 | 	  if (typeof obj !== 'object') {
 332 | 	    /*eslint no-param-reassign:0*/
 333 | 	    obj = [obj];
 334 | 	  }
 335 | 	
 336 | 	  if (isArray(obj)) {
 337 | 	    // Iterate over array values
 338 | 	    for (var i = 0, l = obj.length; i < l; i++) {
 339 | 	      fn.call(null, obj[i], i, obj);
 340 | 	    }
 341 | 	  } else {
 342 | 	    // Iterate over object keys
 343 | 	    for (var key in obj) {
 344 | 	      if (Object.prototype.hasOwnProperty.call(obj, key)) {
 345 | 	        fn.call(null, obj[key], key, obj);
 346 | 	      }
 347 | 	    }
 348 | 	  }
 349 | 	}
 350 | 	
 351 | 	/**
 352 | 	 * Accepts varargs expecting each argument to be an object, then
 353 | 	 * immutably merges the properties of each object and returns result.
 354 | 	 *
 355 | 	 * When multiple objects contain the same key the later object in
 356 | 	 * the arguments list will take precedence.
 357 | 	 *
 358 | 	 * Example:
 359 | 	 *
 360 | 	 * ```js
 361 | 	 * var result = merge({foo: 123}, {foo: 456});
 362 | 	 * console.log(result.foo); // outputs 456
 363 | 	 * ```
 364 | 	 *
 365 | 	 * @param {Object} obj1 Object to merge
 366 | 	 * @returns {Object} Result of all merge properties
 367 | 	 */
 368 | 	function merge(/* obj1, obj2, obj3, ... */) {
 369 | 	  var result = {};
 370 | 	  function assignValue(val, key) {
 371 | 	    if (typeof result[key] === 'object' && typeof val === 'object') {
 372 | 	      result[key] = merge(result[key], val);
 373 | 	    } else {
 374 | 	      result[key] = val;
 375 | 	    }
 376 | 	  }
 377 | 	
 378 | 	  for (var i = 0, l = arguments.length; i < l; i++) {
 379 | 	    forEach(arguments[i], assignValue);
 380 | 	  }
 381 | 	  return result;
 382 | 	}
 383 | 	
 384 | 	/**
 385 | 	 * Extends object a by mutably adding to it the properties of object b.
 386 | 	 *
 387 | 	 * @param {Object} a The object to be extended
 388 | 	 * @param {Object} b The object to copy properties from
 389 | 	 * @param {Object} thisArg The object to bind function to
 390 | 	 * @return {Object} The resulting value of object a
 391 | 	 */
 392 | 	function extend(a, b, thisArg) {
 393 | 	  forEach(b, function assignValue(val, key) {
 394 | 	    if (thisArg && typeof val === 'function') {
 395 | 	      a[key] = bind(val, thisArg);
 396 | 	    } else {
 397 | 	      a[key] = val;
 398 | 	    }
 399 | 	  });
 400 | 	  return a;
 401 | 	}
 402 | 	
 403 | 	module.exports = {
 404 | 	  isArray: isArray,
 405 | 	  isArrayBuffer: isArrayBuffer,
 406 | 	  isBuffer: isBuffer,
 407 | 	  isFormData: isFormData,
 408 | 	  isArrayBufferView: isArrayBufferView,
 409 | 	  isString: isString,
 410 | 	  isNumber: isNumber,
 411 | 	  isObject: isObject,
 412 | 	  isUndefined: isUndefined,
 413 | 	  isDate: isDate,
 414 | 	  isFile: isFile,
 415 | 	  isBlob: isBlob,
 416 | 	  isFunction: isFunction,
 417 | 	  isStream: isStream,
 418 | 	  isURLSearchParams: isURLSearchParams,
 419 | 	  isStandardBrowserEnv: isStandardBrowserEnv,
 420 | 	  forEach: forEach,
 421 | 	  merge: merge,
 422 | 	  extend: extend,
 423 | 	  trim: trim
 424 | 	};
 425 | 
 426 | 
 427 | /***/ }),
 428 | /* 3 */
 429 | /***/ (function(module, exports) {
 430 | 
 431 | 	'use strict';
 432 | 	
 433 | 	module.exports = function bind(fn, thisArg) {
 434 | 	  return function wrap() {
 435 | 	    var args = new Array(arguments.length);
 436 | 	    for (var i = 0; i < args.length; i++) {
 437 | 	      args[i] = arguments[i];
 438 | 	    }
 439 | 	    return fn.apply(thisArg, args);
 440 | 	  };
 441 | 	};
 442 | 
 443 | 
 444 | /***/ }),
 445 | /* 4 */
 446 | /***/ (function(module, exports) {
 447 | 
 448 | 	/*!
 449 | 	 * Determine if an object is a Buffer
 450 | 	 *
 451 | 	 * @author   Feross Aboukhadijeh <https://feross.org>
 452 | 	 * @license  MIT
 453 | 	 */
 454 | 	
 455 | 	// The _isBuffer check is for Safari 5-7 support, because it's missing
 456 | 	// Object.prototype.constructor. Remove this eventually
 457 | 	module.exports = function (obj) {
 458 | 	  return obj != null && (isBuffer(obj) || isSlowBuffer(obj) || !!obj._isBuffer)
 459 | 	}
 460 | 	
 461 | 	function isBuffer (obj) {
 462 | 	  return !!obj.constructor && typeof obj.constructor.isBuffer === 'function' && obj.constructor.isBuffer(obj)
 463 | 	}
 464 | 	
 465 | 	// For Node v0.10 support. Remove this eventually.
 466 | 	function isSlowBuffer (obj) {
 467 | 	  return typeof obj.readFloatLE === 'function' && typeof obj.slice === 'function' && isBuffer(obj.slice(0, 0))
 468 | 	}
 469 | 
 470 | 
 471 | /***/ }),
 472 | /* 5 */
 473 | /***/ (function(module, exports, __webpack_require__) {
 474 | 
 475 | 	'use strict';
 476 | 	
 477 | 	var defaults = __webpack_require__(6);
 478 | 	var utils = __webpack_require__(2);
 479 | 	var InterceptorManager = __webpack_require__(17);
 480 | 	var dispatchRequest = __webpack_require__(18);
 481 | 	
 482 | 	/**
 483 | 	 * Create a new instance of Axios
 484 | 	 *
 485 | 	 * @param {Object} instanceConfig The default config for the instance
 486 | 	 */
 487 | 	function Axios(instanceConfig) {
 488 | 	  this.defaults = instanceConfig;
 489 | 	  this.interceptors = {
 490 | 	    request: new InterceptorManager(),
 491 | 	    response: new InterceptorManager()
 492 | 	  };
 493 | 	}
 494 | 	
 495 | 	/**
 496 | 	 * Dispatch a request
 497 | 	 *
 498 | 	 * @param {Object} config The config specific for this request (merged with this.defaults)
 499 | 	 */
 500 | 	Axios.prototype.request = function request(config) {
 501 | 	  /*eslint no-param-reassign:0*/
 502 | 	  // Allow for axios('example/url'[, config]) a la fetch API
 503 | 	  if (typeof config === 'string') {
 504 | 	    config = utils.merge({
 505 | 	      url: arguments[0]
 506 | 	    }, arguments[1]);
 507 | 	  }
 508 | 	
 509 | 	  config = utils.merge(defaults, {method: 'get'}, this.defaults, config);
 510 | 	  config.method = config.method.toLowerCase();
 511 | 	
 512 | 	  // Hook up interceptors middleware
 513 | 	  var chain = [dispatchRequest, undefined];
 514 | 	  var promise = Promise.resolve(config);
 515 | 	
 516 | 	  this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
 517 | 	    chain.unshift(interceptor.fulfilled, interceptor.rejected);
 518 | 	  });
 519 | 	
 520 | 	  this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
 521 | 	    chain.push(interceptor.fulfilled, interceptor.rejected);
 522 | 	  });
 523 | 	
 524 | 	  while (chain.length) {
 525 | 	    promise = promise.then(chain.shift(), chain.shift());
 526 | 	  }
 527 | 	
 528 | 	  return promise;
 529 | 	};
 530 | 	
 531 | 	// Provide aliases for supported request methods
 532 | 	utils.forEach(['delete', 'get', 'head', 'options'], function forEachMethodNoData(method) {
 533 | 	  /*eslint func-names:0*/
 534 | 	  Axios.prototype[method] = function(url, config) {
 535 | 	    return this.request(utils.merge(config || {}, {
 536 | 	      method: method,
 537 | 	      url: url
 538 | 	    }));
 539 | 	  };
 540 | 	});
 541 | 	
 542 | 	utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
 543 | 	  /*eslint func-names:0*/
 544 | 	  Axios.prototype[method] = function(url, data, config) {
 545 | 	    return this.request(utils.merge(config || {}, {
 546 | 	      method: method,
 547 | 	      url: url,
 548 | 	      data: data
 549 | 	    }));
 550 | 	  };
 551 | 	});
 552 | 	
 553 | 	module.exports = Axios;
 554 | 
 555 | 
 556 | /***/ }),
 557 | /* 6 */
 558 | /***/ (function(module, exports, __webpack_require__) {
 559 | 
 560 | 	'use strict';
 561 | 	
 562 | 	var utils = __webpack_require__(2);
 563 | 	var normalizeHeaderName = __webpack_require__(7);
 564 | 	
 565 | 	var DEFAULT_CONTENT_TYPE = {
 566 | 	  'Content-Type': 'application/x-www-form-urlencoded'
 567 | 	};
 568 | 	
 569 | 	function setContentTypeIfUnset(headers, value) {
 570 | 	  if (!utils.isUndefined(headers) && utils.isUndefined(headers['Content-Type'])) {
 571 | 	    headers['Content-Type'] = value;
 572 | 	  }
 573 | 	}
 574 | 	
 575 | 	function getDefaultAdapter() {
 576 | 	  var adapter;
 577 | 	  if (typeof XMLHttpRequest !== 'undefined') {
 578 | 	    // For browsers use XHR adapter
 579 | 	    adapter = __webpack_require__(8);
 580 | 	  } else if (typeof process !== 'undefined') {
 581 | 	    // For node use HTTP adapter
 582 | 	    adapter = __webpack_require__(8);
 583 | 	  }
 584 | 	  return adapter;
 585 | 	}
 586 | 	
 587 | 	var defaults = {
 588 | 	  adapter: getDefaultAdapter(),
 589 | 	
 590 | 	  transformRequest: [function transformRequest(data, headers) {
 591 | 	    normalizeHeaderName(headers, 'Content-Type');
 592 | 	    if (utils.isFormData(data) ||
 593 | 	      utils.isArrayBuffer(data) ||
 594 | 	      utils.isBuffer(data) ||
 595 | 	      utils.isStream(data) ||
 596 | 	      utils.isFile(data) ||
 597 | 	      utils.isBlob(data)
 598 | 	    ) {
 599 | 	      return data;
 600 | 	    }
 601 | 	    if (utils.isArrayBufferView(data)) {
 602 | 	      return data.buffer;
 603 | 	    }
 604 | 	    if (utils.isURLSearchParams(data)) {
 605 | 	      setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
 606 | 	      return data.toString();
 607 | 	    }
 608 | 	    if (utils.isObject(data)) {
 609 | 	      setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
 610 | 	      return JSON.stringify(data);
 611 | 	    }
 612 | 	    return data;
 613 | 	  }],
 614 | 	
 615 | 	  transformResponse: [function transformResponse(data) {
 616 | 	    /*eslint no-param-reassign:0*/
 617 | 	    if (typeof data === 'string') {
 618 | 	      try {
 619 | 	        data = JSON.parse(data);
 620 | 	      } catch (e) { /* Ignore */ }
 621 | 	    }
 622 | 	    return data;
 623 | 	  }],
 624 | 	
 625 | 	  /**
 626 | 	   * A timeout in milliseconds to abort a request. If set to 0 (default) a
 627 | 	   * timeout is not created.
 628 | 	   */
 629 | 	  timeout: 0,
 630 | 	
 631 | 	  xsrfCookieName: 'XSRF-TOKEN',
 632 | 	  xsrfHeaderName: 'X-XSRF-TOKEN',
 633 | 	
 634 | 	  maxContentLength: -1,
 635 | 	
 636 | 	  validateStatus: function validateStatus(status) {
 637 | 	    return status >= 200 && status < 300;
 638 | 	  }
 639 | 	};
 640 | 	
 641 | 	defaults.headers = {
 642 | 	  common: {
 643 | 	    'Accept': 'application/json, text/plain, */*'
 644 | 	  }
 645 | 	};
 646 | 	
 647 | 	utils.forEach(['delete', 'get', 'head'], function forEachMethodNoData(method) {
 648 | 	  defaults.headers[method] = {};
 649 | 	});
 650 | 	
 651 | 	utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
 652 | 	  defaults.headers[method] = utils.merge(DEFAULT_CONTENT_TYPE);
 653 | 	});
 654 | 	
 655 | 	module.exports = defaults;
 656 | 
 657 | 
 658 | /***/ }),
 659 | /* 7 */
 660 | /***/ (function(module, exports, __webpack_require__) {
 661 | 
 662 | 	'use strict';
 663 | 	
 664 | 	var utils = __webpack_require__(2);
 665 | 	
 666 | 	module.exports = function normalizeHeaderName(headers, normalizedName) {
 667 | 	  utils.forEach(headers, function processHeader(value, name) {
 668 | 	    if (name !== normalizedName && name.toUpperCase() === normalizedName.toUpperCase()) {
 669 | 	      headers[normalizedName] = value;
 670 | 	      delete headers[name];
 671 | 	    }
 672 | 	  });
 673 | 	};
 674 | 
 675 | 
 676 | /***/ }),
 677 | /* 8 */
 678 | /***/ (function(module, exports, __webpack_require__) {
 679 | 
 680 | 	'use strict';
 681 | 	
 682 | 	var utils = __webpack_require__(2);
 683 | 	var settle = __webpack_require__(9);
 684 | 	var buildURL = __webpack_require__(12);
 685 | 	var parseHeaders = __webpack_require__(13);
 686 | 	var isURLSameOrigin = __webpack_require__(14);
 687 | 	var createError = __webpack_require__(10);
 688 | 	var btoa = (typeof window !== 'undefined' && window.btoa && window.btoa.bind(window)) || __webpack_require__(15);
 689 | 	
 690 | 	module.exports = function xhrAdapter(config) {
 691 | 	  return new Promise(function dispatchXhrRequest(resolve, reject) {
 692 | 	    var requestData = config.data;
 693 | 	    var requestHeaders = config.headers;
 694 | 	
 695 | 	    if (utils.isFormData(requestData)) {
 696 | 	      delete requestHeaders['Content-Type']; // Let the browser set it
 697 | 	    }
 698 | 	
 699 | 	    var request = new XMLHttpRequest();
 700 | 	    var loadEvent = 'onreadystatechange';
 701 | 	    var xDomain = false;
 702 | 	
 703 | 	    // For IE 8/9 CORS support
 704 | 	    // Only supports POST and GET calls and doesn't returns the response headers.
 705 | 	    // DON'T do this for testing b/c XMLHttpRequest is mocked, not XDomainRequest.
 706 | 	    if (("production") !== 'test' &&
 707 | 	        typeof window !== 'undefined' &&
 708 | 	        window.XDomainRequest && !('withCredentials' in request) &&
 709 | 	        !isURLSameOrigin(config.url)) {
 710 | 	      request = new window.XDomainRequest();
 711 | 	      loadEvent = 'onload';
 712 | 	      xDomain = true;
 713 | 	      request.onprogress = function handleProgress() {};
 714 | 	      request.ontimeout = function handleTimeout() {};
 715 | 	    }
 716 | 	
 717 | 	    // HTTP basic authentication
 718 | 	    if (config.auth) {
 719 | 	      var username = config.auth.username || '';
 720 | 	      var password = config.auth.password || '';
 721 | 	      requestHeaders.Authorization = 'Basic ' + btoa(username + ':' + password);
 722 | 	    }
 723 | 	
 724 | 	    request.open(config.method.toUpperCase(), buildURL(config.url, config.params, config.paramsSerializer), true);
 725 | 	
 726 | 	    // Set the request timeout in MS
 727 | 	    request.timeout = config.timeout;
 728 | 	
 729 | 	    // Listen for ready state
 730 | 	    request[loadEvent] = function handleLoad() {
 731 | 	      if (!request || (request.readyState !== 4 && !xDomain)) {
 732 | 	        return;
 733 | 	      }
 734 | 	
 735 | 	      // The request errored out and we didn't get a response, this will be
 736 | 	      // handled by onerror instead
 737 | 	      // With one exception: request that using file: protocol, most browsers
 738 | 	      // will return status as 0 even though it's a successful request
 739 | 	      if (request.status === 0 && !(request.responseURL && request.responseURL.indexOf('file:') === 0)) {
 740 | 	        return;
 741 | 	      }
 742 | 	
 743 | 	      // Prepare the response
 744 | 	      var responseHeaders = 'getAllResponseHeaders' in request ? parseHeaders(request.getAllResponseHeaders()) : null;
 745 | 	      var responseData = !config.responseType || config.responseType === 'text' ? request.responseText : request.response;
 746 | 	      var response = {
 747 | 	        data: responseData,
 748 | 	        // IE sends 1223 instead of 204 (https://github.com/axios/axios/issues/201)
 749 | 	        status: request.status === 1223 ? 204 : request.status,
 750 | 	        statusText: request.status === 1223 ? 'No Content' : request.statusText,
 751 | 	        headers: responseHeaders,
 752 | 	        config: config,
 753 | 	        request: request
 754 | 	      };
 755 | 	
 756 | 	      settle(resolve, reject, response);
 757 | 	
 758 | 	      // Clean up request
 759 | 	      request = null;
 760 | 	    };
 761 | 	
 762 | 	    // Handle low level network errors
 763 | 	    request.onerror = function handleError() {
 764 | 	      // Real errors are hidden from us by the browser
 765 | 	      // onerror should only fire if it's a network error
 766 | 	      reject(createError('Network Error', config, null, request));
 767 | 	
 768 | 	      // Clean up request
 769 | 	      request = null;
 770 | 	    };
 771 | 	
 772 | 	    // Handle timeout
 773 | 	    request.ontimeout = function handleTimeout() {
 774 | 	      reject(createError('timeout of ' + config.timeout + 'ms exceeded', config, 'ECONNABORTED',
 775 | 	        request));
 776 | 	
 777 | 	      // Clean up request
 778 | 	      request = null;
 779 | 	    };
 780 | 	
 781 | 	    // Add xsrf header
 782 | 	    // This is only done if running in a standard browser environment.
 783 | 	    // Specifically not if we're in a web worker, or react-native.
 784 | 	    if (utils.isStandardBrowserEnv()) {
 785 | 	      var cookies = __webpack_require__(16);
 786 | 	
 787 | 	      // Add xsrf header
 788 | 	      var xsrfValue = (config.withCredentials || isURLSameOrigin(config.url)) && config.xsrfCookieName ?
 789 | 	          cookies.read(config.xsrfCookieName) :
 790 | 	          undefined;
 791 | 	
 792 | 	      if (xsrfValue) {
 793 | 	        requestHeaders[config.xsrfHeaderName] = xsrfValue;
 794 | 	      }
 795 | 	    }
 796 | 	
 797 | 	    // Add headers to the request
 798 | 	    if ('setRequestHeader' in request) {
 799 | 	      utils.forEach(requestHeaders, function setRequestHeader(val, key) {
 800 | 	        if (typeof requestData === 'undefined' && key.toLowerCase() === 'content-type') {
 801 | 	          // Remove Content-Type if data is undefined
 802 | 	          delete requestHeaders[key];
 803 | 	        } else {
 804 | 	          // Otherwise add header to the request
 805 | 	          request.setRequestHeader(key, val);
 806 | 	        }
 807 | 	      });
 808 | 	    }
 809 | 	
 810 | 	    // Add withCredentials to request if needed
 811 | 	    if (config.withCredentials) {
 812 | 	      request.withCredentials = true;
 813 | 	    }
 814 | 	
 815 | 	    // Add responseType to request if needed
 816 | 	    if (config.responseType) {
 817 | 	      try {
 818 | 	        request.responseType = config.responseType;
 819 | 	      } catch (e) {
 820 | 	        // Expected DOMException thrown by browsers not compatible XMLHttpRequest Level 2.
 821 | 	        // But, this can be suppressed for 'json' type as it can be parsed by default 'transformResponse' function.
 822 | 	        if (config.responseType !== 'json') {
 823 | 	          throw e;
 824 | 	        }
 825 | 	      }
 826 | 	    }
 827 | 	
 828 | 	    // Handle progress if needed
 829 | 	    if (typeof config.onDownloadProgress === 'function') {
 830 | 	      request.addEventListener('progress', config.onDownloadProgress);
 831 | 	    }
 832 | 	
 833 | 	    // Not all browsers support upload events
 834 | 	    if (typeof config.onUploadProgress === 'function' && request.upload) {
 835 | 	      request.upload.addEventListener('progress', config.onUploadProgress);
 836 | 	    }
 837 | 	
 838 | 	    if (config.cancelToken) {
 839 | 	      // Handle cancellation
 840 | 	      config.cancelToken.promise.then(function onCanceled(cancel) {
 841 | 	        if (!request) {
 842 | 	          return;
 843 | 	        }
 844 | 	
 845 | 	        request.abort();
 846 | 	        reject(cancel);
 847 | 	        // Clean up request
 848 | 	        request = null;
 849 | 	      });
 850 | 	    }
 851 | 	
 852 | 	    if (requestData === undefined) {
 853 | 	      requestData = null;
 854 | 	    }
 855 | 	
 856 | 	    // Send the request
 857 | 	    request.send(requestData);
 858 | 	  });
 859 | 	};
 860 | 
 861 | 
 862 | /***/ }),
 863 | /* 9 */
 864 | /***/ (function(module, exports, __webpack_require__) {
 865 | 
 866 | 	'use strict';
 867 | 	
 868 | 	var createError = __webpack_require__(10);
 869 | 	
 870 | 	/**
 871 | 	 * Resolve or reject a Promise based on response status.
 872 | 	 *
 873 | 	 * @param {Function} resolve A function that resolves the promise.
 874 | 	 * @param {Function} reject A function that rejects the promise.
 875 | 	 * @param {object} response The response.
 876 | 	 */
 877 | 	module.exports = function settle(resolve, reject, response) {
 878 | 	  var validateStatus = response.config.validateStatus;
 879 | 	  // Note: status is not exposed by XDomainRequest
 880 | 	  if (!response.status || !validateStatus || validateStatus(response.status)) {
 881 | 	    resolve(response);
 882 | 	  } else {
 883 | 	    reject(createError(
 884 | 	      'Request failed with status code ' + response.status,
 885 | 	      response.config,
 886 | 	      null,
 887 | 	      response.request,
 888 | 	      response
 889 | 	    ));
 890 | 	  }
 891 | 	};
 892 | 
 893 | 
 894 | /***/ }),
 895 | /* 10 */
 896 | /***/ (function(module, exports, __webpack_require__) {
 897 | 
 898 | 	'use strict';
 899 | 	
 900 | 	var enhanceError = __webpack_require__(11);
 901 | 	
 902 | 	/**
 903 | 	 * Create an Error with the specified message, config, error code, request and response.
 904 | 	 *
 905 | 	 * @param {string} message The error message.
 906 | 	 * @param {Object} config The config.
 907 | 	 * @param {string} [code] The error code (for example, 'ECONNABORTED').
 908 | 	 * @param {Object} [request] The request.
 909 | 	 * @param {Object} [response] The response.
 910 | 	 * @returns {Error} The created error.
 911 | 	 */
 912 | 	module.exports = function createError(message, config, code, request, response) {
 913 | 	  var error = new Error(message);
 914 | 	  return enhanceError(error, config, code, request, response);
 915 | 	};
 916 | 
 917 | 
 918 | /***/ }),
 919 | /* 11 */
 920 | /***/ (function(module, exports) {
 921 | 
 922 | 	'use strict';
 923 | 	
 924 | 	/**
 925 | 	 * Update an Error with the specified config, error code, and response.
 926 | 	 *
 927 | 	 * @param {Error} error The error to update.
 928 | 	 * @param {Object} config The config.
 929 | 	 * @param {string} [code] The error code (for example, 'ECONNABORTED').
 930 | 	 * @param {Object} [request] The request.
 931 | 	 * @param {Object} [response] The response.
 932 | 	 * @returns {Error} The error.
 933 | 	 */
 934 | 	module.exports = function enhanceError(error, config, code, request, response) {
 935 | 	  error.config = config;
 936 | 	  if (code) {
 937 | 	    error.code = code;
 938 | 	  }
 939 | 	  error.request = request;
 940 | 	  error.response = response;
 941 | 	  return error;
 942 | 	};
 943 | 
 944 | 
 945 | /***/ }),
 946 | /* 12 */
 947 | /***/ (function(module, exports, __webpack_require__) {
 948 | 
 949 | 	'use strict';
 950 | 	
 951 | 	var utils = __webpack_require__(2);
 952 | 	
 953 | 	function encode(val) {
 954 | 	  return encodeURIComponent(val).
 955 | 	    replace(/%40/gi, '@').
 956 | 	    replace(/%3A/gi, ':').
 957 | 	    replace(/%24/g, '$').
 958 | 	    replace(/%2C/gi, ',').
 959 | 	    replace(/%20/g, '+').
 960 | 	    replace(/%5B/gi, '[').
 961 | 	    replace(/%5D/gi, ']');
 962 | 	}
 963 | 	
 964 | 	/**
 965 | 	 * Build a URL by appending params to the end
 966 | 	 *
 967 | 	 * @param {string} url The base of the url (e.g., http://www.google.com)
 968 | 	 * @param {object} [params] The params to be appended
 969 | 	 * @returns {string} The formatted url
 970 | 	 */
 971 | 	module.exports = function buildURL(url, params, paramsSerializer) {
 972 | 	  /*eslint no-param-reassign:0*/
 973 | 	  if (!params) {
 974 | 	    return url;
 975 | 	  }
 976 | 	
 977 | 	  var serializedParams;
 978 | 	  if (paramsSerializer) {
 979 | 	    serializedParams = paramsSerializer(params);
 980 | 	  } else if (utils.isURLSearchParams(params)) {
 981 | 	    serializedParams = params.toString();
 982 | 	  } else {
 983 | 	    var parts = [];
 984 | 	
 985 | 	    utils.forEach(params, function serialize(val, key) {
 986 | 	      if (val === null || typeof val === 'undefined') {
 987 | 	        return;
 988 | 	      }
 989 | 	
 990 | 	      if (utils.isArray(val)) {
 991 | 	        key = key + '[]';
 992 | 	      } else {
 993 | 	        val = [val];
 994 | 	      }
 995 | 	
 996 | 	      utils.forEach(val, function parseValue(v) {
 997 | 	        if (utils.isDate(v)) {
 998 | 	          v = v.toISOString();
 999 | 	        } else if (utils.isObject(v)) {
1000 | 	          v = JSON.stringify(v);
1001 | 	        }
1002 | 	        parts.push(encode(key) + '=' + encode(v));
1003 | 	      });
1004 | 	    });
1005 | 	
1006 | 	    serializedParams = parts.join('&');
1007 | 	  }
1008 | 	
1009 | 	  if (serializedParams) {
1010 | 	    url += (url.indexOf('?') === -1 ? '?' : '&') + serializedParams;
1011 | 	  }
1012 | 	
1013 | 	  return url;
1014 | 	};
1015 | 
1016 | 
1017 | /***/ }),
1018 | /* 13 */
1019 | /***/ (function(module, exports, __webpack_require__) {
1020 | 
1021 | 	'use strict';
1022 | 	
1023 | 	var utils = __webpack_require__(2);
1024 | 	
1025 | 	// Headers whose duplicates are ignored by node
1026 | 	// c.f. https://nodejs.org/api/http.html#http_message_headers
1027 | 	var ignoreDuplicateOf = [
1028 | 	  'age', 'authorization', 'content-length', 'content-type', 'etag',
1029 | 	  'expires', 'from', 'host', 'if-modified-since', 'if-unmodified-since',
1030 | 	  'last-modified', 'location', 'max-forwards', 'proxy-authorization',
1031 | 	  'referer', 'retry-after', 'user-agent'
1032 | 	];
1033 | 	
1034 | 	/**
1035 | 	 * Parse headers into an object
1036 | 	 *
1037 | 	 * ```
1038 | 	 * Date: Wed, 27 Aug 2014 08:58:49 GMT
1039 | 	 * Content-Type: application/json
1040 | 	 * Connection: keep-alive
1041 | 	 * Transfer-Encoding: chunked
1042 | 	 * ```
1043 | 	 *
1044 | 	 * @param {String} headers Headers needing to be parsed
1045 | 	 * @returns {Object} Headers parsed into an object
1046 | 	 */
1047 | 	module.exports = function parseHeaders(headers) {
1048 | 	  var parsed = {};
1049 | 	  var key;
1050 | 	  var val;
1051 | 	  var i;
1052 | 	
1053 | 	  if (!headers) { return parsed; }
1054 | 	
1055 | 	  utils.forEach(headers.split('\n'), function parser(line) {
1056 | 	    i = line.indexOf(':');
1057 | 	    key = utils.trim(line.substr(0, i)).toLowerCase();
1058 | 	    val = utils.trim(line.substr(i + 1));
1059 | 	
1060 | 	    if (key) {
1061 | 	      if (parsed[key] && ignoreDuplicateOf.indexOf(key) >= 0) {
1062 | 	        return;
1063 | 	      }
1064 | 	      if (key === 'set-cookie') {
1065 | 	        parsed[key] = (parsed[key] ? parsed[key] : []).concat([val]);
1066 | 	      } else {
1067 | 	        parsed[key] = parsed[key] ? parsed[key] + ', ' + val : val;
1068 | 	      }
1069 | 	    }
1070 | 	  });
1071 | 	
1072 | 	  return parsed;
1073 | 	};
1074 | 
1075 | 
1076 | /***/ }),
1077 | /* 14 */
1078 | /***/ (function(module, exports, __webpack_require__) {
1079 | 
1080 | 	'use strict';
1081 | 	
1082 | 	var utils = __webpack_require__(2);
1083 | 	
1084 | 	module.exports = (
1085 | 	  utils.isStandardBrowserEnv() ?
1086 | 	
1087 | 	  // Standard browser envs have full support of the APIs needed to test
1088 | 	  // whether the request URL is of the same origin as current location.
1089 | 	  (function standardBrowserEnv() {
1090 | 	    var msie = /(msie|trident)/i.test(navigator.userAgent);
1091 | 	    var urlParsingNode = document.createElement('a');
1092 | 	    var originURL;
1093 | 	
1094 | 	    /**
1095 | 	    * Parse a URL to discover it's components
1096 | 	    *
1097 | 	    * @param {String} url The URL to be parsed
1098 | 	    * @returns {Object}
1099 | 	    */
1100 | 	    function resolveURL(url) {
1101 | 	      var href = url;
1102 | 	
1103 | 	      if (msie) {
1104 | 	        // IE needs attribute set twice to normalize properties
1105 | 	        urlParsingNode.setAttribute('href', href);
1106 | 	        href = urlParsingNode.href;
1107 | 	      }
1108 | 	
1109 | 	      urlParsingNode.setAttribute('href', href);
1110 | 	
1111 | 	      // urlParsingNode provides the UrlUtils interface - http://url.spec.whatwg.org/#urlutils
1112 | 	      return {
1113 | 	        href: urlParsingNode.href,
1114 | 	        protocol: urlParsingNode.protocol ? urlParsingNode.protocol.replace(/:$/, '') : '',
1115 | 	        host: urlParsingNode.host,
1116 | 	        search: urlParsingNode.search ? urlParsingNode.search.replace(/^\?/, '') : '',
1117 | 	        hash: urlParsingNode.hash ? urlParsingNode.hash.replace(/^#/, '') : '',
1118 | 	        hostname: urlParsingNode.hostname,
1119 | 	        port: urlParsingNode.port,
1120 | 	        pathname: (urlParsingNode.pathname.charAt(0) === '/') ?
1121 | 	                  urlParsingNode.pathname :
1122 | 	                  '/' + urlParsingNode.pathname
1123 | 	      };
1124 | 	    }
1125 | 	
1126 | 	    originURL = resolveURL(window.location.href);
1127 | 	
1128 | 	    /**
1129 | 	    * Determine if a URL shares the same origin as the current location
1130 | 	    *
1131 | 	    * @param {String} requestURL The URL to test
1132 | 	    * @returns {boolean} True if URL shares the same origin, otherwise false
1133 | 	    */
1134 | 	    return function isURLSameOrigin(requestURL) {
1135 | 	      var parsed = (utils.isString(requestURL)) ? resolveURL(requestURL) : requestURL;
1136 | 	      return (parsed.protocol === originURL.protocol &&
1137 | 	            parsed.host === originURL.host);
1138 | 	    };
1139 | 	  })() :
1140 | 	
1141 | 	  // Non standard browser envs (web workers, react-native) lack needed support.
1142 | 	  (function nonStandardBrowserEnv() {
1143 | 	    return function isURLSameOrigin() {
1144 | 	      return true;
1145 | 	    };
1146 | 	  })()
1147 | 	);
1148 | 
1149 | 
1150 | /***/ }),
1151 | /* 15 */
1152 | /***/ (function(module, exports) {
1153 | 
1154 | 	'use strict';
1155 | 	
1156 | 	// btoa polyfill for IE<10 courtesy https://github.com/davidchambers/Base64.js
1157 | 	
1158 | 	var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
1159 | 	
1160 | 	function E() {
1161 | 	  this.message = 'String contains an invalid character';
1162 | 	}
1163 | 	E.prototype = new Error;
1164 | 	E.prototype.code = 5;
1165 | 	E.prototype.name = 'InvalidCharacterError';
1166 | 	
1167 | 	function btoa(input) {
1168 | 	  var str = String(input);
1169 | 	  var output = '';
1170 | 	  for (
1171 | 	    // initialize result and counter
1172 | 	    var block, charCode, idx = 0, map = chars;
1173 | 	    // if the next str index does not exist:
1174 | 	    //   change the mapping table to "="
1175 | 	    //   check if d has no fractional digits
1176 | 	    str.charAt(idx | 0) || (map = '=', idx % 1);
1177 | 	    // "8 - idx % 1 * 8" generates the sequence 2, 4, 6, 8
1178 | 	    output += map.charAt(63 & block >> 8 - idx % 1 * 8)
1179 | 	  ) {
1180 | 	    charCode = str.charCodeAt(idx += 3 / 4);
1181 | 	    if (charCode > 0xFF) {
1182 | 	      throw new E();
1183 | 	    }
1184 | 	    block = block << 8 | charCode;
1185 | 	  }
1186 | 	  return output;
1187 | 	}
1188 | 	
1189 | 	module.exports = btoa;
1190 | 
1191 | 
1192 | /***/ }),
1193 | /* 16 */
1194 | /***/ (function(module, exports, __webpack_require__) {
1195 | 
1196 | 	'use strict';
1197 | 	
1198 | 	var utils = __webpack_require__(2);
1199 | 	
1200 | 	module.exports = (
1201 | 	  utils.isStandardBrowserEnv() ?
1202 | 	
1203 | 	  // Standard browser envs support document.cookie
1204 | 	  (function standardBrowserEnv() {
1205 | 	    return {
1206 | 	      write: function write(name, value, expires, path, domain, secure) {
1207 | 	        var cookie = [];
1208 | 	        cookie.push(name + '=' + encodeURIComponent(value));
1209 | 	
1210 | 	        if (utils.isNumber(expires)) {
1211 | 	          cookie.push('expires=' + new Date(expires).toGMTString());
1212 | 	        }
1213 | 	
1214 | 	        if (utils.isString(path)) {
1215 | 	          cookie.push('path=' + path);
1216 | 	        }
1217 | 	
1218 | 	        if (utils.isString(domain)) {
1219 | 	          cookie.push('domain=' + domain);
1220 | 	        }
1221 | 	
1222 | 	        if (secure === true) {
1223 | 	          cookie.push('secure');
1224 | 	        }
1225 | 	
1226 | 	        document.cookie = cookie.join('; ');
1227 | 	      },
1228 | 	
1229 | 	      read: function read(name) {
1230 | 	        var match = document.cookie.match(new RegExp('(^|;\\s*)(' + name + ')=([^;]*)'));
1231 | 	        return (match ? decodeURIComponent(match[3]) : null);
1232 | 	      },
1233 | 	
1234 | 	      remove: function remove(name) {
1235 | 	        this.write(name, '', Date.now() - 86400000);
1236 | 	      }
1237 | 	    };
1238 | 	  })() :
1239 | 	
1240 | 	  // Non standard browser env (web workers, react-native) lack needed support.
1241 | 	  (function nonStandardBrowserEnv() {
1242 | 	    return {
1243 | 	      write: function write() {},
1244 | 	      read: function read() { return null; },
1245 | 	      remove: function remove() {}
1246 | 	    };
1247 | 	  })()
1248 | 	);
1249 | 
1250 | 
1251 | /***/ }),
1252 | /* 17 */
1253 | /***/ (function(module, exports, __webpack_require__) {
1254 | 
1255 | 	'use strict';
1256 | 	
1257 | 	var utils = __webpack_require__(2);
1258 | 	
1259 | 	function InterceptorManager() {
1260 | 	  this.handlers = [];
1261 | 	}
1262 | 	
1263 | 	/**
1264 | 	 * Add a new interceptor to the stack
1265 | 	 *
1266 | 	 * @param {Function} fulfilled The function to handle `then` for a `Promise`
1267 | 	 * @param {Function} rejected The function to handle `reject` for a `Promise`
1268 | 	 *
1269 | 	 * @return {Number} An ID used to remove interceptor later
1270 | 	 */
1271 | 	InterceptorManager.prototype.use = function use(fulfilled, rejected) {
1272 | 	  this.handlers.push({
1273 | 	    fulfilled: fulfilled,
1274 | 	    rejected: rejected
1275 | 	  });
1276 | 	  return this.handlers.length - 1;
1277 | 	};
1278 | 	
1279 | 	/**
1280 | 	 * Remove an interceptor from the stack
1281 | 	 *
1282 | 	 * @param {Number} id The ID that was returned by `use`
1283 | 	 */
1284 | 	InterceptorManager.prototype.eject = function eject(id) {
1285 | 	  if (this.handlers[id]) {
1286 | 	    this.handlers[id] = null;
1287 | 	  }
1288 | 	};
1289 | 	
1290 | 	/**
1291 | 	 * Iterate over all the registered interceptors
1292 | 	 *
1293 | 	 * This method is particularly useful for skipping over any
1294 | 	 * interceptors that may have become `null` calling `eject`.
1295 | 	 *
1296 | 	 * @param {Function} fn The function to call for each interceptor
1297 | 	 */
1298 | 	InterceptorManager.prototype.forEach = function forEach(fn) {
1299 | 	  utils.forEach(this.handlers, function forEachHandler(h) {
1300 | 	    if (h !== null) {
1301 | 	      fn(h);
1302 | 	    }
1303 | 	  });
1304 | 	};
1305 | 	
1306 | 	module.exports = InterceptorManager;
1307 | 
1308 | 
1309 | /***/ }),
1310 | /* 18 */
1311 | /***/ (function(module, exports, __webpack_require__) {
1312 | 
1313 | 	'use strict';
1314 | 	
1315 | 	var utils = __webpack_require__(2);
1316 | 	var transformData = __webpack_require__(19);
1317 | 	var isCancel = __webpack_require__(20);
1318 | 	var defaults = __webpack_require__(6);
1319 | 	var isAbsoluteURL = __webpack_require__(21);
1320 | 	var combineURLs = __webpack_require__(22);
1321 | 	
1322 | 	/**
1323 | 	 * Throws a `Cancel` if cancellation has been requested.
1324 | 	 */
1325 | 	function throwIfCancellationRequested(config) {
1326 | 	  if (config.cancelToken) {
1327 | 	    config.cancelToken.throwIfRequested();
1328 | 	  }
1329 | 	}
1330 | 	
1331 | 	/**
1332 | 	 * Dispatch a request to the server using the configured adapter.
1333 | 	 *
1334 | 	 * @param {object} config The config that is to be used for the request
1335 | 	 * @returns {Promise} The Promise to be fulfilled
1336 | 	 */
1337 | 	module.exports = function dispatchRequest(config) {
1338 | 	  throwIfCancellationRequested(config);
1339 | 	
1340 | 	  // Support baseURL config
1341 | 	  if (config.baseURL && !isAbsoluteURL(config.url)) {
1342 | 	    config.url = combineURLs(config.baseURL, config.url);
1343 | 	  }
1344 | 	
1345 | 	  // Ensure headers exist
1346 | 	  config.headers = config.headers || {};
1347 | 	
1348 | 	  // Transform request data
1349 | 	  config.data = transformData(
1350 | 	    config.data,
1351 | 	    config.headers,
1352 | 	    config.transformRequest
1353 | 	  );
1354 | 	
1355 | 	  // Flatten headers
1356 | 	  config.headers = utils.merge(
1357 | 	    config.headers.common || {},
1358 | 	    config.headers[config.method] || {},
1359 | 	    config.headers || {}
1360 | 	  );
1361 | 	
1362 | 	  utils.forEach(
1363 | 	    ['delete', 'get', 'head', 'post', 'put', 'patch', 'common'],
1364 | 	    function cleanHeaderConfig(method) {
1365 | 	      delete config.headers[method];
1366 | 	    }
1367 | 	  );
1368 | 	
1369 | 	  var adapter = config.adapter || defaults.adapter;
1370 | 	
1371 | 	  return adapter(config).then(function onAdapterResolution(response) {
1372 | 	    throwIfCancellationRequested(config);
1373 | 	
1374 | 	    // Transform response data
1375 | 	    response.data = transformData(
1376 | 	      response.data,
1377 | 	      response.headers,
1378 | 	      config.transformResponse
1379 | 	    );
1380 | 	
1381 | 	    return response;
1382 | 	  }, function onAdapterRejection(reason) {
1383 | 	    if (!isCancel(reason)) {
1384 | 	      throwIfCancellationRequested(config);
1385 | 	
1386 | 	      // Transform response data
1387 | 	      if (reason && reason.response) {
1388 | 	        reason.response.data = transformData(
1389 | 	          reason.response.data,
1390 | 	          reason.response.headers,
1391 | 	          config.transformResponse
1392 | 	        );
1393 | 	      }
1394 | 	    }
1395 | 	
1396 | 	    return Promise.reject(reason);
1397 | 	  });
1398 | 	};
1399 | 
1400 | 
1401 | /***/ }),
1402 | /* 19 */
1403 | /***/ (function(module, exports, __webpack_require__) {
1404 | 
1405 | 	'use strict';
1406 | 	
1407 | 	var utils = __webpack_require__(2);
1408 | 	
1409 | 	/**
1410 | 	 * Transform the data for a request or a response
1411 | 	 *
1412 | 	 * @param {Object|String} data The data to be transformed
1413 | 	 * @param {Array} headers The headers for the request or response
1414 | 	 * @param {Array|Function} fns A single function or Array of functions
1415 | 	 * @returns {*} The resulting transformed data
1416 | 	 */
1417 | 	module.exports = function transformData(data, headers, fns) {
1418 | 	  /*eslint no-param-reassign:0*/
1419 | 	  utils.forEach(fns, function transform(fn) {
1420 | 	    data = fn(data, headers);
1421 | 	  });
1422 | 	
1423 | 	  return data;
1424 | 	};
1425 | 
1426 | 
1427 | /***/ }),
1428 | /* 20 */
1429 | /***/ (function(module, exports) {
1430 | 
1431 | 	'use strict';
1432 | 	
1433 | 	module.exports = function isCancel(value) {
1434 | 	  return !!(value && value.__CANCEL__);
1435 | 	};
1436 | 
1437 | 
1438 | /***/ }),
1439 | /* 21 */
1440 | /***/ (function(module, exports) {
1441 | 
1442 | 	'use strict';
1443 | 	
1444 | 	/**
1445 | 	 * Determines whether the specified URL is absolute
1446 | 	 *
1447 | 	 * @param {string} url The URL to test
1448 | 	 * @returns {boolean} True if the specified URL is absolute, otherwise false
1449 | 	 */
1450 | 	module.exports = function isAbsoluteURL(url) {
1451 | 	  // A URL is considered absolute if it begins with "<scheme>://" or "//" (protocol-relative URL).
1452 | 	  // RFC 3986 defines scheme name as a sequence of characters beginning with a letter and followed
1453 | 	  // by any combination of letters, digits, plus, period, or hyphen.
1454 | 	  return /^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(url);
1455 | 	};
1456 | 
1457 | 
1458 | /***/ }),
1459 | /* 22 */
1460 | /***/ (function(module, exports) {
1461 | 
1462 | 	'use strict';
1463 | 	
1464 | 	/**
1465 | 	 * Creates a new URL by combining the specified URLs
1466 | 	 *
1467 | 	 * @param {string} baseURL The base URL
1468 | 	 * @param {string} relativeURL The relative URL
1469 | 	 * @returns {string} The combined URL
1470 | 	 */
1471 | 	module.exports = function combineURLs(baseURL, relativeURL) {
1472 | 	  return relativeURL
1473 | 	    ? baseURL.replace(/\/+$/, '') + '/' + relativeURL.replace(/^\/+/, '')
1474 | 	    : baseURL;
1475 | 	};
1476 | 
1477 | 
1478 | /***/ }),
1479 | /* 23 */
1480 | /***/ (function(module, exports) {
1481 | 
1482 | 	'use strict';
1483 | 	
1484 | 	/**
1485 | 	 * A `Cancel` is an object that is thrown when an operation is canceled.
1486 | 	 *
1487 | 	 * @class
1488 | 	 * @param {string=} message The message.
1489 | 	 */
1490 | 	function Cancel(message) {
1491 | 	  this.message = message;
1492 | 	}
1493 | 	
1494 | 	Cancel.prototype.toString = function toString() {
1495 | 	  return 'Cancel' + (this.message ? ': ' + this.message : '');
1496 | 	};
1497 | 	
1498 | 	Cancel.prototype.__CANCEL__ = true;
1499 | 	
1500 | 	module.exports = Cancel;
1501 | 
1502 | 
1503 | /***/ }),
1504 | /* 24 */
1505 | /***/ (function(module, exports, __webpack_require__) {
1506 | 
1507 | 	'use strict';
1508 | 	
1509 | 	var Cancel = __webpack_require__(23);
1510 | 	
1511 | 	/**
1512 | 	 * A `CancelToken` is an object that can be used to request cancellation of an operation.
1513 | 	 *
1514 | 	 * @class
1515 | 	 * @param {Function} executor The executor function.
1516 | 	 */
1517 | 	function CancelToken(executor) {
1518 | 	  if (typeof executor !== 'function') {
1519 | 	    throw new TypeError('executor must be a function.');
1520 | 	  }
1521 | 	
1522 | 	  var resolvePromise;
1523 | 	  this.promise = new Promise(function promiseExecutor(resolve) {
1524 | 	    resolvePromise = resolve;
1525 | 	  });
1526 | 	
1527 | 	  var token = this;
1528 | 	  executor(function cancel(message) {
1529 | 	    if (token.reason) {
1530 | 	      // Cancellation has already been requested
1531 | 	      return;
1532 | 	    }
1533 | 	
1534 | 	    token.reason = new Cancel(message);
1535 | 	    resolvePromise(token.reason);
1536 | 	  });
1537 | 	}
1538 | 	
1539 | 	/**
1540 | 	 * Throws a `Cancel` if cancellation has been requested.
1541 | 	 */
1542 | 	CancelToken.prototype.throwIfRequested = function throwIfRequested() {
1543 | 	  if (this.reason) {
1544 | 	    throw this.reason;
1545 | 	  }
1546 | 	};
1547 | 	
1548 | 	/**
1549 | 	 * Returns an object that contains a new `CancelToken` and a function that, when called,
1550 | 	 * cancels the `CancelToken`.
1551 | 	 */
1552 | 	CancelToken.source = function source() {
1553 | 	  var cancel;
1554 | 	  var token = new CancelToken(function executor(c) {
1555 | 	    cancel = c;
1556 | 	  });
1557 | 	  return {
1558 | 	    token: token,
1559 | 	    cancel: cancel
1560 | 	  };
1561 | 	};
1562 | 	
1563 | 	module.exports = CancelToken;
1564 | 
1565 | 
1566 | /***/ }),
1567 | /* 25 */
1568 | /***/ (function(module, exports) {
1569 | 
1570 | 	'use strict';
1571 | 	
1572 | 	/**
1573 | 	 * Syntactic sugar for invoking a function and expanding an array for arguments.
1574 | 	 *
1575 | 	 * Common use case would be to use `Function.prototype.apply`.
1576 | 	 *
1577 | 	 *  ```js
1578 | 	 *  function f(x, y, z) {}
1579 | 	 *  var args = [1, 2, 3];
1580 | 	 *  f.apply(null, args);
1581 | 	 *  ```
1582 | 	 *
1583 | 	 * With `spread` this example can be re-written.
1584 | 	 *
1585 | 	 *  ```js
1586 | 	 *  spread(function(x, y, z) {})([1, 2, 3]);
1587 | 	 *  ```
1588 | 	 *
1589 | 	 * @param {Function} callback
1590 | 	 * @returns {Function}
1591 | 	 */
1592 | 	module.exports = function spread(callback) {
1593 | 	  return function wrap(arr) {
1594 | 	    return callback.apply(null, arr);
1595 | 	  };
1596 | 	};
1597 | 
1598 | 
1599 | /***/ })
1600 | /******/ ])
1601 | });
1602 | ;
1603 | //# sourceMappingURL=axios.map


--------------------------------------------------------------------------------
/shared/button.css:
--------------------------------------------------------------------------------
 1 | .button {
 2 |   display: inline-block;
 3 |   border: none;
 4 |   padding: 0.5em 1em;
 5 |   margin: 0;
 6 |   text-decoration: none;
 7 |   background: #0069ed;
 8 |   color: #ffffff;
 9 |   font-family: sans-serif;
10 |   font-size: 1rem;
11 |   cursor: pointer;
12 |   text-align: center;
13 |   -webkit-appearance: none;
14 |   -moz-appearance: none;
15 | }


--------------------------------------------------------------------------------
/shared/carousel.css:
--------------------------------------------------------------------------------
 1 | .carousel {
 2 |   width: 300px;
 3 | }
 4 | 
 5 | .slide-container {
 6 |   position: relative;
 7 |   height: 200px
 8 | }
 9 | 
10 | .slide {
11 |   position: absolute;
12 |   top: 0;
13 |   left: 0;
14 |   height: 200px
15 | }
16 | 
17 | .slide img {
18 |   width: auto;
19 |   height: 200px;
20 | }
21 | 
22 | .carousel-controls {
23 |   display: flex;
24 |   justify-content: center;
25 |   margin-top: 1rem;
26 | }
27 | 
28 | .carousel-controls button + button {
29 |   margin-left: 1rem;
30 | }
31 | 
32 | .fade-enter-active, .fade-leave-active {
33 |   transition: opacity .5s;
34 | }
35 | .fade-enter, .fade-leave-to { 
36 |   opacity: 0;
37 | }


--------------------------------------------------------------------------------
/shared/cat.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fdietz/vue_components_book_examples/a80ae43cb02a1e56731d6197f1a0d1e8a11576fc/shared/cat.jpg


--------------------------------------------------------------------------------
/shared/cat2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fdietz/vue_components_book_examples/a80ae43cb02a1e56731d6197f1a0d1e8a11576fc/shared/cat2.jpg


--------------------------------------------------------------------------------
/shared/cat3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fdietz/vue_components_book_examples/a80ae43cb02a1e56731d6197f1a0d1e8a11576fc/shared/cat3.jpg


--------------------------------------------------------------------------------
/shared/expandable.css:
--------------------------------------------------------------------------------
 1 | .expandable {
 2 |   width: 100%;
 3 | }
 4 | 
 5 | .expandable__header {
 6 |   display: flex;
 7 |   align-items: center;
 8 |   margin: 0;
 9 |   padding: 0.5em 0;
10 | 
11 |   border-top: 2px solid #555;
12 | }
13 | 
14 | .expandable__trigger {
15 |   all: inherit;
16 |   margin-left: auto;
17 |   border: 0;
18 | }
19 | 
20 | .expandable__trigger svg {
21 |   height: 1em;
22 |   margin-left: 0.5em;
23 |   fill: #555;
24 | }
25 | 
26 | .expandable__trigger:focus svg {
27 |   outline: 2px solid #aaa;
28 | }
29 | 
30 | .expandable__content {
31 |   padding: 1rem 0;
32 | }


--------------------------------------------------------------------------------
/shared/image.svg:
--------------------------------------------------------------------------------
1 | <svg id="dd753f21-6b71-4d24-98dc-8d672633fdb2" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1028.53" height="752.52" viewBox="0 0 1028.53 752.52"><defs><linearGradient id="b417a2e5-779f-434a-8a9b-5b809751130b" x1="493.91" y1="571.16" x2="493.91" y2="526.24" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient><linearGradient id="04db0182-19cc-4c2e-a103-750e5424fcaf" x1="579.64" y1="682.92" x2="579.64" y2="218.06" xlink:href="#b417a2e5-779f-434a-8a9b-5b809751130b"/><linearGradient id="497b2842-48f9-46b6-a092-cc1e43f49418" x1="448.98" y1="716.3" x2="448.98" y2="571.17" xlink:href="#b417a2e5-779f-434a-8a9b-5b809751130b"/><linearGradient id="fadd9628-c3f0-4493-ac03-d18d51c12264" x1="533.65" y1="716.3" x2="533.65" y2="571.17" xlink:href="#b417a2e5-779f-434a-8a9b-5b809751130b"/></defs><title>artificial_intelligence</title><ellipse cx="512.26" cy="706.43" rx="256" ry="43" fill="#dee3f3" opacity="0.5"/><g opacity="0.45"><path d="M536.5,332.71a11.13,11.13,0,0,0,.1,1.44A11.1,11.1,0,0,1,536.5,332.71Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M665.42,301.82c0,.13,0,.25.06.38C665.46,302.07,665.44,301.95,665.42,301.82Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M665.15,300.55c0,.13.07.27.1.4C665.22,300.81,665.19,300.68,665.15,300.55Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M665.28,335.12c0,.22-.11.44-.17.65C665.18,335.56,665.23,335.34,665.28,335.12Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M665.46,334.07c0,.23-.06.47-.11.7C665.4,334.54,665.44,334.3,665.46,334.07Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M542.46,342.52a11.13,11.13,0,0,1-2.37-1.67A11.09,11.09,0,0,0,542.46,342.52Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M540,340.78a11.15,11.15,0,0,1-.94-1A11.11,11.11,0,0,0,540,340.78Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M730.25,552.17a11,11,0,0,0-.47-1.29A11,11,0,0,1,730.25,552.17Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M724.74,545.51a11.11,11.11,0,0,1,1.26.77A11.05,11.05,0,0,0,724.74,545.51Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M727.22,547.27a11.13,11.13,0,0,1,1.77,2.14A11.11,11.11,0,0,0,727.22,547.27Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M726,546.3a11.18,11.18,0,0,1,1.05.85A11.11,11.11,0,0,0,726,546.3Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M729.68,550.69a11,11,0,0,0-.55-1A11,11,0,0,1,729.68,550.69Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M730.55,553.54a11,11,0,0,0-.24-1.09A11,11,0,0,1,730.55,553.54Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M1064.2,492.88h-63.65a11.06,11.06,0,0,0,4.76-9.09V454.57a11.07,11.07,0,0,0-11.07-11.07H921a11.08,11.08,0,0,0,7.71-10.55V403.72a11.06,11.06,0,0,0-4.76-9.09h70.32a11.07,11.07,0,0,0,11.07-11.07V354.33a11.07,11.07,0,0,0-11.07-11.07H916a11.08,11.08,0,0,0,7.71-10.55V303.48a11.06,11.06,0,0,0-4.76-9.09h75.33a11.07,11.07,0,0,0,11.07-11.07V254.09A11.07,11.07,0,0,0,994.23,243H954.8a11.08,11.08,0,0,0,7.71-10.55V203.25a11.07,11.07,0,0,0-11.07-11.07H844.53a11.07,11.07,0,0,0-11.07,11.07,11.07,11.07,0,0,0-11.07-11.07H715.47a11.07,11.07,0,0,0-10,6.41,11.1,11.1,0,0,1,.21,2.16V230a11,11,0,0,1-1,4.65,11.05,11.05,0,0,0,3.85,6.42h27.46a11,11,0,0,1,7,2.51h12a11.08,11.08,0,0,0-7.71,10.55A11.1,11.1,0,0,0,747,252s0,.08,0,.12v29.22a11.06,11.06,0,0,1-.36,2.76,4,4,0,0,1,.48.61,11.16,11.16,0,0,0,.09-1.39,11,11,0,0,0,.19,1.91,3.27,3.27,0,0,1,.25,1.11,11.09,11.09,0,0,0,4.33,6.07h-9.52l.24-.19c-.88,0-1.78-.07-2.66-.08a2.46,2.46,0,0,1-.92-.19,11.06,11.06,0,0,1-3.18.47l-65.61,2a11.06,11.06,0,0,0-4.76,9.09v29.22a11.08,11.08,0,0,0,7.71,10.55l62.66.52a11.07,11.07,0,0,1,3.25.49,12.11,12.11,0,0,1,2.07.36l.16,0a11,11,0,0,0-1.91-.82h15.42a11.08,11.08,0,0,0-7.71,10.55,11.12,11.12,0,0,0-.17-1.92,2.46,2.46,0,0,1-.24.3,11.12,11.12,0,0,1,.21,2.14v29.22c0,1.36.2,1,.2-.52a11.06,11.06,0,0,0,4.76,9.09l39.09,1.25a11,11,0,0,1,3.92.73h9.41a11.12,11.12,0,0,0-3.83,4.68,11,11,0,0,1,1.57,5.66V434.2a11,11,0,0,1-.93,4.43,11.1,11.1,0,0,0,6.13,4.87H797.06a11,11,0,0,1-6,1.78H752.27a11.05,11.05,0,0,0-5.07,9.3c0-3.9-1.45,34.56-1.45,34.56,0,3.45,60.34,5,60.34,5a11,11,0,0,1,4.45.94,7.75,7.75,0,0,1,1.92-.16l-.06,0h9.52a11.06,11.06,0,0,0-4.76,9.09,11.09,11.09,0,0,0-.12-1.58c-.05.12-.11.24-.17.35a11.08,11.08,0,0,1,.29,2.48v28a11.07,11.07,0,0,0,11.07,11.07h-17a11,11,0,0,1-5.11,1.25H736.68a11.07,11.07,0,0,0-6,9.82v29.22a11.07,11.07,0,0,0,11.07,11.07H848.69a11.07,11.07,0,0,0,11.07-11.07,11.07,11.07,0,0,0,11.07,11.07H977.74a11.07,11.07,0,0,0,11.07-11.07V555.33a11.07,11.07,0,0,0-11.07-11.07h86.45a11.07,11.07,0,0,0,11.07-11.07V504A11.07,11.07,0,0,0,1064.2,492.88ZM799.37,294.39a11.06,11.06,0,0,0-4.76,9.09,11.06,11.06,0,0,0-4.76-9.09ZM786.9,343.26a11.08,11.08,0,0,0,7.71-10.55,11.08,11.08,0,0,0,7.71,10.55ZM825.74,243a11.08,11.08,0,0,0,7.71-10.55A11.08,11.08,0,0,0,841.16,243Zm34,312.31a11.07,11.07,0,0,0-11.07-11.07h22.15A11.07,11.07,0,0,0,859.76,555.33Zm11.73-62.45a11.06,11.06,0,0,0,4.76-9.09,11.06,11.06,0,0,0,4.76,9.09Zm4.76-38.32A11.08,11.08,0,0,0,868.55,444H884A11.08,11.08,0,0,0,876.25,454.57Zm-4.76-61.92a11.06,11.06,0,0,0,4.76-9.09,11.06,11.06,0,0,0,4.76,9.09Zm4.76-38.32a11.08,11.08,0,0,0-7.71-10.55H884A11.08,11.08,0,0,0,876.25,354.33Zm-4.76-61.92a11.06,11.06,0,0,0,4.76-9.09,11.06,11.06,0,0,0,4.76,9.09Zm4.76-38.32a11.08,11.08,0,0,0-7.71-10.55H884A11.08,11.08,0,0,0,876.25,254.09ZM951,494.86a11.06,11.06,0,0,0-4.76,9.09,11.06,11.06,0,0,0-4.76-9.09Zm-15.84,49.39a11.07,11.07,0,0,0,11.07-11.07,11.07,11.07,0,0,0,11.07,11.07Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M747.2,483.79" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M730.71,555.33a11.14,11.14,0,0,0-.1-1.41A11.11,11.11,0,0,1,730.71,555.33Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M665.56,332.71c0,.35,0,.7-.05,1C665.54,333.4,665.56,333.06,665.56,332.71Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M536.63,334.36a11,11,0,0,0,.28,1.32A11,11,0,0,1,536.63,334.36Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M412.7,399.65a2.52,2.52,0,0,1-.47-.56,2.7,2.7,0,0,1-.31-.92,22.36,22.36,0,0,0,0,2.28,11,11,0,0,1,.51,3.27,11,11,0,0,1,.49-3.19,4.58,4.58,0,0,1-.23-.77S412.7,399.69,412.7,399.65Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M564.27,192.17H457.36a11.07,11.07,0,0,0-11.07,11.07,11.07,11.07,0,0,0-11.07-11.07H328.31a11.07,11.07,0,0,0-11.07,11.07v29.22A11.08,11.08,0,0,0,324.94,243H242.06A11.07,11.07,0,0,0,231,254.09v29.22a11.06,11.06,0,0,0,4.76,9.09H160.41a11.07,11.07,0,0,0-11.07,11.07v29.22a11.07,11.07,0,0,0,11.07,11.07h78.28A11.08,11.08,0,0,0,231,354.33v29.22a11.06,11.06,0,0,0,4.76,9.09H165.43a11.07,11.07,0,0,0-11.07,11.07v29.22A11.07,11.07,0,0,0,165.43,444h73.26A11.08,11.08,0,0,0,231,454.57v29.22a11.07,11.07,0,0,0,11.07,11.07h63.65a11.06,11.06,0,0,0-4.76,9.09v29.22A11.07,11.07,0,0,0,312,544.25H225.57a11.07,11.07,0,0,0-11.07,11.07v29.22a11.07,11.07,0,0,0,11.07,11.07H332.47a11.07,11.07,0,0,0,11.07-11.07,11.07,11.07,0,0,0,11.07,11.07H461.53a11.07,11.07,0,0,0,11.07-11.07V555.33a11.07,11.07,0,0,0-6-9.82H443.58a11,11,0,0,1-5.11-1.25H418.93A11.07,11.07,0,0,0,430,533.18c0,4.82,2.51-28,2.51-28a11.07,11.07,0,0,1,11.07-11.07l40.75-1.25a11.15,11.15,0,0,0,2.93-3,11,11,0,0,1-.88-4.29V456.34a11,11,0,0,1,1.83-6.09,11.11,11.11,0,0,0-4.2-5H426a11,11,0,0,1-6-1.78H404.75a11.08,11.08,0,0,0,7.71-10.55l-.39-29c0-1.31-.07-2.46-.12-3.49a11.09,11.09,0,0,0-4.25-5.82h9.52l-.21.16c5.4-.31,67.07-3.93,72.09-8a8.7,8.7,0,0,1-.07-2.32,11.1,11.1,0,0,1-.14-1.68V353.6c0-.36,0-.72.05-1.07a11.09,11.09,0,0,0-7.56-8.75h13.48a11,11,0,0,1,5.11-1.25h30.57a11.06,11.06,0,0,0,6-9.82V303.48a11.06,11.06,0,0,0-4.76-9.09l-31.78-2c-5.38,0-8.95-2-6.11,0h-9.52a11.05,11.05,0,0,0,4.76-9,11.12,11.12,0,0,1-.2-2V252.11s0,0,0-.07a11.09,11.09,0,0,0-7.51-8.5H493a11,11,0,0,1,7-2.51h71.31a11,11,0,0,0,4.07-8.57V203.25A11.07,11.07,0,0,0,564.27,192.17ZM283.16,294.39a11.06,11.06,0,0,0-4.76,9.09,11.06,11.06,0,0,0-4.76-9.09Zm-4.76,38.32a11.08,11.08,0,0,0,7.71,10.55H270.69A11.08,11.08,0,0,0,278.39,332.71Zm9.77,61.92a11.06,11.06,0,0,0-4.76,9.09,11.06,11.06,0,0,0-4.76-9.09ZM275.7,443.49a11.08,11.08,0,0,0,7.71-10.55,11.08,11.08,0,0,0,7.71,10.55Zm136.51-149.1a11.06,11.06,0,0,0-4.76,9.09,11.06,11.06,0,0,0-4.76-9.09ZM343.55,555.33a11.07,11.07,0,0,0-11.07-11.07h22.15A11.07,11.07,0,0,0,343.55,555.33Zm11.73-62.45a11.06,11.06,0,0,0,4.76-9.09,11.06,11.06,0,0,0,4.76,9.09ZM360,454.57A11.08,11.08,0,0,0,352.33,444h15.42A11.08,11.08,0,0,0,360,454.57Zm-4.76-61.92a11.06,11.06,0,0,0,4.76-9.09,11.06,11.06,0,0,0,4.76,9.09ZM360,354.33a11.08,11.08,0,0,0-7.71-10.55h15.42A11.08,11.08,0,0,0,360,354.33Zm-4.76-61.92a11.06,11.06,0,0,0,4.76-9.09,11.06,11.06,0,0,0,4.76,9.09ZM360,254.09a11.08,11.08,0,0,0-7.71-10.55h15.42A11.08,11.08,0,0,0,360,254.09Zm39.7,89.16a11.08,11.08,0,0,0,7.71-10.55,11.08,11.08,0,0,0,7.71,10.55ZM438.58,243a11.08,11.08,0,0,0,7.71-10.55A11.08,11.08,0,0,0,454,243Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M540.14,295.29l.16-.14Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M539.41,296l-.16.18Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M538.48,297.18l.08-.11Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M537,335.9a11,11,0,0,0,.46,1.27A11,11,0,0,1,537,335.9Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M538.16,338.53a11.08,11.08,0,0,0,.82,1.14A11.06,11.06,0,0,1,538.16,338.53Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M537.5,337.28a11,11,0,0,0,.66,1.24A11,11,0,0,1,537.5,337.28Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M536.81,300.95c0-.14.07-.27.1-.4C536.87,300.68,536.84,300.81,536.81,300.95Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M537.18,299.7c0-.11.08-.22.12-.33C537.26,299.48,537.22,299.59,537.18,299.7Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M536.58,302.2c0-.13,0-.26.06-.38C536.62,301.95,536.6,302.07,536.58,302.2Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M537.79,298.31l0,0Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><rect x="318.49" y="192.17" width="129.05" height="51.37" rx="8.84" ry="8.84" transform="translate(680.3 361.98) rotate(-180)" opacity="0.1"/><rect x="704.4" y="192.17" width="129.05" height="51.37" rx="8.84" ry="8.84" transform="translate(1452.12 361.98) rotate(-180)" opacity="0.1"/><rect x="876.05" y="242.29" width="129.05" height="51.37" rx="8.84" ry="8.84" transform="translate(1795.43 462.22) rotate(-180)" opacity="0.1"/><rect x="665.56" y="292.41" width="129.05" height="51.37" rx="8.84" ry="8.84" transform="translate(1374.43 562.45) rotate(-180)" opacity="0.1"/><rect x="876.05" y="343.78" width="129.05" height="51.37" rx="8.84" ry="8.84" transform="translate(1795.43 665.19) rotate(-180)" opacity="0.1"/><rect x="876.05" y="444.02" width="129.05" height="51.37" rx="8.84" ry="8.84" transform="translate(1795.43 865.67) rotate(-180)" opacity="0.1"/><path d="M938.16,494.14H825.23a8.06,8.06,0,0,0-7.74,5.8,5.15,5.15,0,0,1-.09,1.36,5.71,5.71,0,0,1-.23.77s0,.09,0,.13v35.25a8.06,8.06,0,0,0,8.06,8.06H938.16a8.06,8.06,0,0,0,8.06-8.06V502.2A8.06,8.06,0,0,0,938.16,494.14Z" transform="translate(-85.73 -73.74)" opacity="0.1"/><rect x="730.71" y="544.25" width="129.05" height="51.37" rx="8.84" ry="8.84" transform="translate(1504.74 1066.14) rotate(-180)" opacity="0.1"/><rect x="359.84" y="242.29" width="129.05" height="51.37" rx="8.84" ry="8.84" transform="translate(762.99 462.22) rotate(-180)" opacity="0.1"/><rect x="279.65" y="292.41" width="129.05" height="51.37" rx="8.84" ry="8.84" transform="translate(602.61 562.45) rotate(-180)" opacity="0.1"/><rect x="230.78" y="343.78" width="129.05" height="51.37" rx="8.84" ry="8.84" transform="translate(504.88 665.19) rotate(-180)" opacity="0.1"/><rect x="283.41" y="393.9" width="129.05" height="51.37" rx="8.84" ry="8.84" transform="translate(610.13 765.43) rotate(-180)" opacity="0.1"/><rect x="230.78" y="444.02" width="129.05" height="51.37" rx="8.84" ry="8.84" transform="translate(504.88 865.67) rotate(-180)" opacity="0.1"/><rect x="172.4" y="494.19" width="129.05" height="51.37" rx="8.84" ry="8.84" transform="translate(388.12 966.01) rotate(-180)" fill="#89c1ed"/><rect x="925.92" y="393.84" width="129.05" height="51.37" rx="8.84" ry="8.84" transform="translate(1895.15 765.32) rotate(-180)" fill="#89c1ed"/><rect x="920.44" y="292.58" width="129.05" height="51.37" rx="8.84" ry="8.84" transform="translate(1884.2 562.8) rotate(-180)" fill="#89c1ed"/><rect x="985.21" y="543.45" width="129.05" height="51.37" rx="8.84" ry="8.84" transform="translate(2013.74 1064.54) rotate(-180)" fill="#89c1ed"/><rect x="85.73" y="544.36" width="129.05" height="51.37" rx="8.84" ry="8.84" transform="translate(214.79 1066.36) rotate(-180)" fill="#89c1ed"/><rect x="103.07" y="443.11" width="129.05" height="51.37" rx="8.84" ry="8.84" transform="translate(249.45 863.84) rotate(-180)" fill="#89c1ed"/><rect x="103.07" y="343.67" width="129.05" height="51.37" rx="8.84" ry="8.84" transform="translate(249.45 664.97) rotate(-180)" fill="#89c1ed"/><rect x="107.63" y="242.41" width="129.05" height="51.37" rx="8.84" ry="8.84" transform="translate(258.58 462.45) rotate(-180)" fill="#89c1ed"/><rect x="107.63" y="242.41" width="129.05" height="51.37" rx="8.84" ry="8.84" transform="translate(258.58 462.45) rotate(-180)" opacity="0.1"/><rect x="189.73" y="192.24" width="129.05" height="51.37" rx="8.84" ry="8.84" transform="translate(422.78 362.11) rotate(-180)" fill="#89c1ed"/><rect x="302.2" y="494.14" width="129.05" height="51.37" rx="8.84" ry="8.84" transform="translate(647.72 965.9) rotate(-180)" opacity="0.1"/><rect x="214.49" y="544.25" width="129.05" height="51.37" rx="8.84" ry="8.84" transform="translate(472.31 1066.14) rotate(-180)" opacity="0.1"/></g><circle cx="810.34" cy="28.92" r="28.92" fill="#89c1ed" opacity="0.5"/><path d="M337.67,155.09h-6.88a4.82,4.82,0,0,0,0-9.63H275.06a4.82,4.82,0,1,0,0,9.63h6.88a4.82,4.82,0,0,0,0,9.63h-9.63a4.82,4.82,0,1,0,0,9.63H328a4.82,4.82,0,0,0,0-9.63h9.63a4.82,4.82,0,0,0,0-9.63Z" transform="translate(-85.73 -73.74)" fill="#dee3f3" opacity="0.5"/><path d="M892.4,99.18h-5.24a3.67,3.67,0,0,0,0-7.33H844.75a3.67,3.67,0,0,0,0,7.33H850a3.67,3.67,0,1,0,0,7.33h-7.33a3.67,3.67,0,0,0,0,7.33h42.42a3.67,3.67,0,1,0,0-7.33h7.33a3.67,3.67,0,1,0,0-7.33Z" transform="translate(-85.73 -73.74)" fill="#dee3f3" opacity="0.5"/><path d="M469.67,87.09h-6.88a4.82,4.82,0,1,0,0-9.63H407.06a4.82,4.82,0,1,0,0,9.63h6.88a4.82,4.82,0,0,0,0,9.63h-9.63a4.82,4.82,0,1,0,0,9.63H460a4.82,4.82,0,0,0,0-9.63h9.63a4.82,4.82,0,0,0,0-9.63Z" transform="translate(-85.73 -73.74)" fill="#dee3f3" opacity="0.5"/><polygon points="552.66 540.06 571.66 540.06 571.66 528.29 571.66 526.24 416.16 526.24 416.16 528.29 416.16 540.06 435.16 540.06 435.16 553.89 404.06 553.89 404.06 571.16 583.76 571.16 583.76 553.89 552.66 553.89 552.66 540.06" fill="url(#b417a2e5-779f-434a-8a9b-5b809751130b)"/><path d="M765.69,626.46h0c1.36-18.6.88-34.61-1-48.4-2.13-15.87-6.08-28.78-11.09-39.28-10-21-24.25-32.39-36.76-38.58a69.16,69.16,0,0,0-26.9-7.34,12.08,12.08,0,0,0-23.91-.05V461.75H600.37V444.47h88.48a10,10,0,0,0,10-10V343.9a10,10,0,0,0-10-10H655.26V244.62a13.48,13.48,0,0,0,7.93-12.28c0-.13,0-.26,0-.4s0-.26,0-.4a13.49,13.49,0,0,0-27,0c0,.13,0,.26,0,.4s0,.26,0,.4a13.48,13.48,0,0,0,7.14,11.9v89.65H518.81V244.24a13.48,13.48,0,0,0,7.14-11.9c0-.13,0-.26,0-.4s0-.26,0-.4a13.49,13.49,0,0,0-27,0c0,.13,0,.26,0,.4s0,.26,0,.4a13.48,13.48,0,0,0,7.93,12.28v89.26H470.43a10,10,0,0,0-10,10v90.56a10,10,0,0,0,10,10h88.48v17.28H493.25v25.46a12.07,12.07,0,0,0-2.61-4.35l-.29-.29a12.09,12.09,0,0,0-20.64,8.55v1.73s-12.42,0-27.27,7.35c-12.51,6.19-26.75,17.58-36.76,38.58-5,10.5-9,23.42-11.09,39.28-1.86,13.78-2.35,29.8-1,48.4-27.73,23,7,56.46,7,56.46,28.45,0,27.82-47.23,27.5-55.29h.14s-.08-.4-.2-1.14v0h0a176.9,176.9,0,0,1-1.71-39.9c.79-10.17,2.74-20.93,6.74-30.61a54.35,54.35,0,0,1,13.68-20.05,46.75,46.75,0,0,1,23-11.07v7.77a12.09,12.09,0,0,0,23.53,3.91V600H666V537.81a12.07,12.07,0,0,0,3.07,6.44l.33.35A12.09,12.09,0,0,0,690.08,536V524.92a46.62,46.62,0,0,1,22.46,11,54.35,54.35,0,0,1,13.68,20.05c4,9.69,5.94,20.44,6.74,30.61a176.9,176.9,0,0,1-1.71,39.9h0v0c-.12.74-.2,1.14-.2,1.14h.14c-.32,8.06-.95,55.29,27.5,55.29C758.69,682.92,793.42,649.48,765.69,626.46Z" transform="translate(-85.73 -73.74)" fill="url(#04db0182-19cc-4c2e-a103-750e5424fcaf)"/><polygon points="412.7 572.75 412.7 588.45 433.44 588.45 433.44 612.63 433.44 612.63 433.44 633.37 433.44 664.47 433.44 681.75 433.44 692.12 409.24 692.12 409.24 716.3 474.9 716.3 474.9 692.12 464.54 692.12 464.54 681.75 464.54 681.75 464.54 664.47 464.54 664.47 464.54 633.37 464.54 633.37 464.54 612.63 464.54 612.63 464.54 588.45 488.72 588.45 488.72 572.75 488.72 571.17 412.7 571.17 412.7 572.75" fill="url(#497b2842-48f9-46b6-a092-cc1e43f49418)"/><polygon points="495.64 572.75 495.64 588.45 526.74 588.45 526.74 612.63 526.74 612.63 526.74 633.37 526.74 664.47 526.74 681.75 526.74 692.12 502.55 692.12 502.55 716.3 568.21 716.3 568.21 692.12 557.84 692.12 557.84 681.75 557.84 664.47 557.84 633.37 557.84 612.63 557.84 612.63 557.84 588.45 571.66 588.45 571.66 572.75 571.66 571.17 495.64 571.17 495.64 572.75" fill="url(#fadd9628-c3f0-4493-ac03-d18d51c12264)"/><rect x="377.91" y="264.74" width="232.01" height="107.6" rx="12.97" ry="12.97" fill="#89c1ed"/><rect x="396.4" y="355.83" width="195.02" height="2.02" opacity="0.1"/><rect x="396.4" y="281.55" width="195.02" height="73.97" opacity="0.3"/><circle cx="441.79" cy="320.08" r="26.9" opacity="0.1"/><circle cx="441.79" cy="318.54" r="26.9" fill="#dee3f3"/><circle cx="546.03" cy="320.08" r="26.9" opacity="0.1"/><circle cx="546.03" cy="318.54" r="26.9" fill="#dee3f3"/><rect x="473.73" y="372.34" width="40.35" height="23.54" fill="#89c1ed"/><rect x="409.85" y="389.15" width="168.12" height="134.5" fill="#89c1ed"/><polygon points="569.57 523.65 569.57 537.1 551.07 537.1 551.07 550.55 436.74 550.55 436.74 537.1 418.26 537.1 418.26 523.65 569.57 523.65" fill="#89c1ed"/><polygon points="569.57 523.65 569.57 537.1 551.07 537.1 551.07 550.55 436.74 550.55 436.74 537.1 418.26 537.1 418.26 523.65 569.57 523.65" opacity="0.3"/><rect x="406.49" y="550.55" width="174.85" height="16.81" fill="#89c1ed"/><rect x="414.89" y="567.37" width="73.97" height="16.81" fill="#89c1ed"/><rect x="495.59" y="567.37" width="73.97" height="16.81" fill="#89c1ed"/><rect x="411.53" y="685.05" width="63.89" height="23.54" fill="#89c1ed"/><polygon points="435.07 607.71 435.07 627.89 435.07 658.15 435.07 674.96 435.07 685.05 465.33 685.05 465.33 674.96 465.33 658.15 465.33 627.89 465.33 607.71 465.33 584.17 435.07 584.17 435.07 607.71" fill="#89c1ed"/><polygon points="525.85 584.17 525.85 607.71 525.85 627.89 525.85 658.15 525.85 674.96 525.85 685.05 556.12 685.05 556.12 674.96 556.12 658.15 556.12 627.89 556.12 607.71 556.12 584.17 525.85 584.17" fill="#89c1ed"/><rect x="502.32" y="685.05" width="63.89" height="23.54" fill="#89c1ed"/><path d="M496.22,491.47v40.35c0,.3,0,.61,0,.9a11.77,11.77,0,0,1-23.5-.9V491.47a11.76,11.76,0,0,1,20.08-8.32l.28.29a11.72,11.72,0,0,1,3.13,7.13C496.2,490.86,496.22,491.17,496.22,491.47Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M687.1,494.83v40.36A11.76,11.76,0,0,1,667,543.51l-.32-.34a11.73,11.73,0,0,1-3.13-8V494.83a11.77,11.77,0,0,1,23.54,0Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M472.68,493.15v31.1A45.49,45.49,0,0,0,450.33,535,52.88,52.88,0,0,0,437,554.54c-3.89,9.42-5.78,19.89-6.55,29.79a170.32,170.32,0,0,0,1.86,40H398.7c-1.43-18.59-1-34.53.88-48.23,2.08-15.44,5.92-28,10.79-38.22,9.74-20.43,23.6-31.52,35.77-37.54C460.6,493.15,472.68,493.15,472.68,493.15Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M405.43,678.09s-33.79-32.53-6.81-54.93h33.51S435.69,678.09,405.43,678.09Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M405.43,678.09s-33.79-32.53-6.81-54.93h33.51S435.69,678.09,405.43,678.09Z" transform="translate(-85.73 -73.74)" opacity="0.3"/><rect x="436.75" y="409.33" width="114.32" height="87.42" opacity="0.3"/><rect x="435.07" y="584.17" width="30.26" height="23.54" opacity="0.3"/><rect x="435.07" y="627.89" width="30.26" height="30.26" opacity="0.3"/><rect x="435.07" y="674.96" width="30.26" height="10.09" opacity="0.3"/><rect x="525.85" y="584.17" width="30.26" height="23.54" opacity="0.3"/><rect x="525.85" y="627.89" width="30.26" height="30.26" opacity="0.3"/><rect x="525.85" y="674.96" width="30.26" height="10.09" opacity="0.3"/><path d="M472.68,493.15v31.1A45.49,45.49,0,0,0,450.33,535l-4.18-34.73C460.6,493.15,472.68,493.15,472.68,493.15Z" transform="translate(-85.73 -73.74)" opacity="0.3"/><path d="M437,554.54c-3.89,9.42-5.78,19.89-6.55,29.79l-30.88-8.27c2.08-15.44,5.92-28,10.79-38.22Z" transform="translate(-85.73 -73.74)" opacity="0.3"/><path d="M686.61,493.15v31.1A45.49,45.49,0,0,1,709,535a52.88,52.88,0,0,1,13.31,19.51c3.89,9.42,5.78,19.89,6.55,29.79a170.32,170.32,0,0,1-1.86,40h33.62c1.43-18.59,1-34.53-.88-48.23-2.08-15.44-5.92-28-10.79-38.22-9.74-20.43-23.6-31.52-35.77-37.54C698.69,493.15,686.61,493.15,686.61,493.15Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M753.86,678.09s33.79-32.53,6.81-54.93H727.15S723.6,678.09,753.86,678.09Z" transform="translate(-85.73 -73.74)" fill="#89c1ed"/><path d="M753.86,678.09s33.79-32.53,6.81-54.93H727.15S723.6,678.09,753.86,678.09Z" transform="translate(-85.73 -73.74)" opacity="0.3"/><path d="M686.61,493.15v31.1A45.49,45.49,0,0,1,709,535l4.18-34.73C698.69,493.15,686.61,493.15,686.61,493.15Z" transform="translate(-85.73 -73.74)" opacity="0.3"/><path d="M722.27,554.54c3.89,9.42,5.78,19.89,6.55,29.79l30.88-8.27c-2.08-15.44-5.92-28-10.79-38.22Z" transform="translate(-85.73 -73.74)" opacity="0.3"/><rect x="473.73" y="372.34" width="40.35" height="2.79" opacity="0.1"/><path d="M666.69,486.86v56.31a11.73,11.73,0,0,1-3.13-8V494.83A11.71,11.71,0,0,1,666.69,486.86Z" transform="translate(-85.73 -73.74)" opacity="0.1"/><path d="M496.18,490.57v42.15a11.72,11.72,0,0,1-3.13,7.13V483.44A11.72,11.72,0,0,1,496.18,490.57Z" transform="translate(-85.73 -73.74)" opacity="0.1"/><rect x="418.26" y="523.65" width="151.31" height="1.99" opacity="0.1"/><rect x="414.89" y="567.37" width="73.97" height="1.54" opacity="0.1"/><rect x="495.59" y="567.37" width="73.97" height="1.54" opacity="0.1"/><rect x="423.14" y="165.17" width="11.58" height="99.58" fill="#89c1ed"/><rect x="555.91" y="165.17" width="11.58" height="99.58" fill="#89c1ed"/><circle cx="428.55" cy="165.94" r="13.12" opacity="0.1"/><circle cx="428.55" cy="165.17" r="13.12" fill="#89c1ed"/><circle cx="562.09" cy="165.94" r="13.12" opacity="0.1"/><circle cx="562.09" cy="165.17" r="13.12" fill="#89c1ed"/><path d="M237.26,544s38.4,75.38,7.11,116.62,2.84,153.6,2.84,153.6" transform="translate(-85.73 -73.74)" fill="none" stroke="#fc6681" stroke-miterlimit="10" stroke-width="2"/><path d="M248.63,520.48C248.63,535,238,546.8,238,546.8S227.3,535,227.3,520.48,238,494.17,238,494.17,248.63,506,248.63,520.48Z" transform="translate(-85.73 -73.74)" fill="#fc6681"/><path d="M257.17,544s-38.4,75.38-7.11,116.62-2.84,153.6-2.84,153.6" transform="translate(-85.73 -73.74)" fill="none" stroke="#ffd037" stroke-miterlimit="10" stroke-width="2"/><path d="M245.79,520.48c0,14.53,10.67,26.31,10.67,26.31s10.67-11.78,10.67-26.31-10.67-26.31-10.67-26.31S245.79,506,245.79,520.48Z" transform="translate(-85.73 -73.74)" fill="#ffd037"/><path d="M272.81,544s38.4,75.38,7.11,116.62,2.84,153.6,2.84,153.6" transform="translate(-85.73 -73.74)" fill="none" stroke="#fc6681" stroke-miterlimit="10" stroke-width="2"/><path d="M284.19,520.48c0,14.53-10.67,26.31-10.67,26.31S262.86,535,262.86,520.48s10.67-26.31,10.67-26.31S284.19,506,284.19,520.48Z" transform="translate(-85.73 -73.74)" fill="#fc6681"/><path d="M278.21,580.88c-10.07,10.47-25.93,11.57-25.93,11.57s.48-15.88,10.55-26.36,25.93-11.57,25.93-11.57S288.28,570.41,278.21,580.88Z" transform="translate(-85.73 -73.74)" fill="#fc6681"/><path d="M279.21,632.88c-10.07,10.47-25.93,11.57-25.93,11.57s.48-15.88,10.55-26.36,25.93-11.57,25.93-11.57S289.28,622.41,279.21,632.88Z" transform="translate(-85.73 -73.74)" fill="#fc6681"/><path d="M224.58,661.49c9.53,11,9.19,26.86,9.19,26.86s-15.78-1.9-25.3-12.87-9.19-26.86-9.19-26.86S215.05,650.52,224.58,661.49Z" transform="translate(-85.73 -73.74)" fill="#fc6681"/><path d="M233.42,550.59c12.11,8,16,23.43,16,23.43s-15.71,2.38-27.82-5.64-16-23.43-16-23.43S221.3,542.57,233.42,550.59Z" transform="translate(-85.73 -73.74)" fill="#fc6681"/><path d="M292.72,544s-38.4,75.38-7.11,116.62-2.84,153.6-2.84,153.6" transform="translate(-85.73 -73.74)" fill="none" stroke="#ffd037" stroke-miterlimit="10" stroke-width="2"/><path d="M281.35,520.48C281.35,535,292,546.8,292,546.8s10.67-11.78,10.67-26.31S292,494.17,292,494.17,281.35,506,281.35,520.48Z" transform="translate(-85.73 -73.74)" fill="#ffd037"/><path d="M284.41,582c-10.2,10.35-10.87,26.23-10.87,26.23s15.87-.9,26.07-11.25,10.87-26.23,10.87-26.23S294.61,571.65,284.41,582Z" transform="translate(-85.73 -73.74)" fill="#ffd037"/><path d="M304.41,654c-10.2,10.35-10.87,26.23-10.87,26.23s15.87-.9,26.07-11.25,10.87-26.23,10.87-26.23S314.61,643.65,304.41,654Z" transform="translate(-85.73 -73.74)" fill="#ffd037"/><path d="M275,638.17s23.12-36.44,55.56-37.22" transform="translate(-85.73 -73.74)" fill="none" stroke="#ffd037" stroke-miterlimit="10" stroke-width="2"/><path d="M257,616.17S233.87,579.74,201.43,579" transform="translate(-85.73 -73.74)" fill="none" stroke="#fc6681" stroke-miterlimit="10" stroke-width="2"/><path d="M254,668.17s23.12-36.44,55.56-37.22" transform="translate(-85.73 -73.74)" fill="none" stroke="#ffd037" stroke-miterlimit="10" stroke-width="2"/><circle cx="243.76" cy="526.93" r="6" fill="#ffd037"/><circle cx="116.26" cy="505.43" r="6" fill="#fc6681"/><path d="M271,680.17S247.87,643.74,215.43,643" transform="translate(-85.73 -73.74)" fill="none" stroke="#fc6681" stroke-miterlimit="10" stroke-width="2"/><circle cx="130.26" cy="569.43" r="6" fill="#fc6681"/><circle cx="224.26" cy="557.43" r="6" fill="#ffd037"/><path d="M398.76,770.41s-55.7-11.14-70.56-26-81.7-40.85-89.13-22.28S138.81,803.83,201.94,815s148.54,14.85,167.11,7.43S398.76,770.41,398.76,770.41Z" transform="translate(-85.73 -73.74)" fill="#a8a8a8"/><path d="M201.94,808.07c63.13,11.14,148.54,14.85,167.11,7.43,14.14-5.66,24-32.83,27.85-45.48l1.86.39s-11.14,44.56-29.71,52-104,3.71-167.11-7.43c-18.22-3.22-23.43-10.77-21.47-20.33C182,800.88,188.38,805.68,201.94,808.07Z" transform="translate(-85.73 -73.74)" opacity="0.2"/><path d="M1000.38,557.26s13.35,17.45-6.16,43.81-35.59,48.6-29.09,65c0,0,29.43-48.94,53.39-49.62S1026.74,586.69,1000.38,557.26Z" transform="translate(-85.73 -73.74)" fill="#fc6681"/><path d="M1000.38,557.26a21.62,21.62,0,0,1,2.73,5.47c23.37,27.46,35.83,53.09,13.36,53.73-20.93.6-46,38-52,47.47a20.28,20.28,0,0,0,.71,2.15s29.43-48.94,53.39-49.62S1026.74,586.69,1000.38,557.26Z" transform="translate(-85.73 -73.74)" opacity="0.1"/><path d="M1025.2,579.5c0,6.14-.69,11.12-1.54,11.12s-1.54-5-1.54-11.12.86-3.25,1.71-3.25S1025.2,573.36,1025.2,579.5Z" transform="translate(-85.73 -73.74)" fill="#ffd037"/><path d="M1033.71,586.84c-5.39,2.94-10.1,4.72-10.5,4s3.64-3.74,9-6.68,3.27-.8,3.67-.05S1039.1,583.9,1033.71,586.84Z" transform="translate(-85.73 -73.74)" fill="#ffd037"/><path d="M929.89,557.26s-13.35,17.45,6.16,43.81,35.59,48.6,29.09,65c0,0-29.43-48.94-53.39-49.62S903.53,586.69,929.89,557.26Z" transform="translate(-85.73 -73.74)" fill="#fc6681"/><path d="M929.89,557.26a21.62,21.62,0,0,0-2.73,5.47c-23.37,27.46-35.83,53.09-13.36,53.73,20.93.6,46,38,52,47.47a20.28,20.28,0,0,1-.71,2.15s-29.43-48.94-53.39-49.62S903.53,586.69,929.89,557.26Z" transform="translate(-85.73 -73.74)" opacity="0.1"/><path d="M905.07,579.5c0,6.14.69,11.12,1.54,11.12s1.54-5,1.54-11.12-.86-3.25-1.71-3.25S905.07,573.36,905.07,579.5Z" transform="translate(-85.73 -73.74)" fill="#ffd037"/><path d="M896.56,586.84c5.39,2.94,10.1,4.72,10.5,4s-3.64-3.74-9-6.68-3.27-.8-3.67-.05S891.17,583.9,896.56,586.84Z" transform="translate(-85.73 -73.74)" fill="#ffd037"/><path d="M909.32,663.8s37.32-1.15,48.56-9.16,57.4-17.57,60.19-4.73,56.08,63.88,13.95,64.22-97.89-6.56-109.12-13.4S909.32,663.8,909.32,663.8Z" transform="translate(-85.73 -73.74)" fill="#a8a8a8"/><path d="M1032.78,709.67c-42.13.34-97.89-6.56-109.12-13.4-8.55-5.21-12-23.89-13.09-32.51l-1.25,0s2.36,30.1,13.59,36.93,67,13.74,109.12,13.4c12.16-.1,16.36-4.42,16.13-10.83C1046.47,707.18,1041.83,709.59,1032.78,709.67Z" transform="translate(-85.73 -73.74)" opacity="0.2"/></svg>


--------------------------------------------------------------------------------
/shared/image_card.css:
--------------------------------------------------------------------------------
 1 | .image-card {
 2 |   position: relative;
 3 |   display: flex;
 4 |   flex-direction: column;
 5 |   width: 300px;
 6 |   margin: 1rem;
 7 |   border-radius: 5px;
 8 |   color: #555;
 9 |   box-shadow: 0 0 3px 0 #aaa;
10 |   background: #fff;
11 |   user-select: none;
12 | }
13 | 
14 | .image-card:hover {
15 |   box-shadow:0 0 3px 0 #777;
16 | }
17 | 
18 | .image-card__image {
19 |   width: 300px;
20 |   border-radius: 5px 5px 0 0;
21 |   height: auto;
22 | }
23 | 
24 | .image-card__body {
25 |   display: flex;
26 |   flex-direction: column;
27 | 
28 |   padding: 1rem;
29 | }
30 | 
31 | .image-card__body h3 {
32 |   margin-top: 0;
33 |   margin-bottom: 0.2rem;
34 | }
35 | 
36 | .image-card__author {
37 |   margin: 0;
38 |   font-size: 0.8rem;
39 |   color: #999;
40 | }
41 | 
42 | .image-card__heart {
43 |   position: absolute;
44 |   top: 1rem;
45 |   left: 1rem;
46 |   width: 24px;
47 |   height: 24px;
48 | 
49 |   /* reset button */
50 |   background: none;
51 |   border: 0;
52 |   color: inherit;
53 |   font: inherit;
54 |   line-height: normal;
55 |   overflow: visible;
56 |   padding: 0;
57 | 
58 |   -webkit-appearance: none;
59 |   -moz-appearance:    none;
60 |        appearance:    none;
61 | 
62 |   cursor: pointer;
63 | 
64 |   fill: #fff;
65 |   stroke: white;
66 |   stroke-width: 2px;
67 | 
68 |   transition: all .35s ease-out;
69 | }
70 | 
71 | .image-card__count {
72 |   position: absolute;
73 |   top: 1.2rem;
74 |   left: 3rem;
75 |   width: 24px;
76 |   height: 24px;
77 |   
78 |   color: #FFF;
79 | }
80 | 
81 | .image-card__heart:hover {
82 |   fill: #fe4365;
83 |   stroke: #fe4365;
84 | }
85 | 
86 | .image-card__status {
87 |   margin: 0.5rem 0;
88 |   font-size: 0.8rem;
89 | }
90 | 


--------------------------------------------------------------------------------
/shared/list.css:
--------------------------------------------------------------------------------
 1 | .list {
 2 |   display: flex;
 3 |   flex-direction: column;
 4 |   color: #555;
 5 |   width: 320px;
 6 | }
 7 | 
 8 | .list-item {
 9 |   display: flex;
10 |   align-items: center;
11 |   padding: 0.8rem 1rem;
12 |   border: 1px solid #ccc;
13 |   border-radius: 4px;
14 |   background-color: white;
15 |   margin-bottom: 0.5rem;
16 | }
17 | 
18 | .list-item:hover {
19 |   background-color: #fafafa;
20 | }
21 | 
22 | .list-item__checkbox {
23 |   margin-right: 1rem;
24 | }
25 | 
26 | .list-item__title {
27 |   margin-right: 1rem;
28 | }
29 | 
30 | .list-item__remove {
31 |   display: none;
32 | 
33 |   color: #555;
34 |   font-size: 1rem;
35 |   appearance: none;
36 |   -webkit-appearance: none;
37 |   margin: 0;
38 | 	padding: 0;
39 | 	border: 0;
40 |   background: none;
41 |   
42 |   margin-left: auto;
43 | }
44 | 
45 | .list-item:hover .list-item__remove {
46 |   display: flex;
47 | }


--------------------------------------------------------------------------------
/shared/main.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   /* background: #e5edfd; */
 3 |   /* background: #f9efef; */
 4 |   margin: 2rem;
 5 | }
 6 | 
 7 | #demo {
 8 |   display: block;
 9 | }
10 | 
11 | [v-cloak] {display: none}
12 | 


--------------------------------------------------------------------------------
/shared/modal.css:
--------------------------------------------------------------------------------
 1 | .modal-background {
 2 |   position: fixed;
 3 |   z-index: 9998;
 4 |   top: 0;
 5 |   left: 0;
 6 |   width: 100%;
 7 |   height: 100%;
 8 |   background-color: rgba(0, 0, 0, .5);
 9 | 
10 |   display: flex;
11 |   align-items: center;
12 |   justify-content: center;
13 | }
14 | 
15 | .modal-container {
16 |   display: flex;
17 |   flex-direction: column;
18 | 
19 |   width: 320px;
20 |   height: 200px;
21 |   padding: 1rem;
22 |   background-color: #fff;
23 |   border-radius: 2px;
24 |   box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
25 | }
26 | 
27 | .modal-body {
28 |   display: flex;
29 |   flex-direction: column;
30 |   flex: 1 1;
31 | }
32 | 
33 | .modal-footer {
34 |   display: flex;
35 |   justify-content: flex-end;
36 | }
37 | 


--------------------------------------------------------------------------------
/shared/normalize-5.0.0.min.css:
--------------------------------------------------------------------------------
1 | button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} menu,article,aside,details,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{}button,select{text-transform:none}[type=submit], [type=reset],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}/*# sourceMappingURL=normalize.min.css.map */


--------------------------------------------------------------------------------
/shared/switch.css:
--------------------------------------------------------------------------------
 1 | /**
 2 | Switch component CSS from https://codepen.io/wilsonpage/pen/cxKEs from Wilson Page
 3 | **/
 4 | .switch input {
 5 |   position: absolute;
 6 |   opacity: 0;
 7 | }
 8 | 
 9 | .switch {
10 |   display: inline-block;
11 |   font-size: 20px; /* 1 */
12 |   height: 1em;
13 |   width: 2em;
14 |   background: #efefef;
15 |   border-radius: 1em;
16 | }
17 | 
18 | .switch div {
19 |   height: 1em;
20 |   width: 1em;
21 |   border-radius: 1em;
22 |   background: #FFF;
23 |   box-shadow: 0 0.1em 0.3em rgba(0,0,0,0.3);
24 |   transition: all 300ms;
25 | }
26 | 
27 | .switch input:checked + div {
28 |   transform: translate3d(100%, 0, 0);
29 | }
30 | 


--------------------------------------------------------------------------------
/shared/table.css:
--------------------------------------------------------------------------------
 1 | th {
 2 |   cursor: pointer;
 3 |   user-select: none;
 4 |   border-bottom: 2px solid #efefef;
 5 | }
 6 | 
 7 | 
 8 | th, td {
 9 |   padding: 10px 20px;
10 | }
11 | 
12 | th.active {
13 |   color: #1DA1F2;
14 | }
15 | 
16 | th.active .arrow {
17 |   color: #1DA1F2;
18 |   opacity: 1;
19 | }
20 | 
21 | .arrow {
22 |   display: inline-block;
23 |   vertical-align: middle;
24 |   width: 0;
25 |   height: 0;
26 |   margin-left: 5px;
27 |   opacity: 0;
28 | }
29 | 
30 | .arrow.asc {
31 |   border-left: 4px solid transparent;
32 |   border-right: 4px solid transparent;
33 |   border-bottom: 4px solid #1DA1F2;
34 | }
35 | 
36 | .arrow.dsc {
37 |   border-left: 4px solid transparent;
38 |   border-right: 4px solid transparent;
39 |   border-top: 4px solid #1DA1F2;
40 | }


--------------------------------------------------------------------------------
/shared/tweet.css:
--------------------------------------------------------------------------------
  1 | .tweet-item {
  2 |   display: flex;
  3 |   width: 600px;
  4 |   color: #333;
  5 |   background-color: white;
  6 |   border-bottom: 1px solid #e6ecf0;
  7 |   padding: 1.5rem 1rem; 
  8 | 
  9 |   cursor: pointer;
 10 | } 
 11 | 
 12 | .tweet-item:hover {
 13 |   background-color: #f5f8fa;
 14 | }
 15 | 
 16 | .tweet-media {
 17 | 
 18 | }
 19 | 
 20 | .tweet-media .circle {
 21 |   width: 48px;
 22 |   height: 48px;
 23 |   margin-right: 1rem;
 24 |   display: inline-block;
 25 |   overflow: hidden;
 26 |   background: #f3f6f9;
 27 |   border-radius: 50%;
 28 | }
 29 | 
 30 | .tweet-media .circle img {
 31 |   width: 100%;
 32 |   min-height: 100%;
 33 |   object-fit: cover;
 34 |   object-position: center;
 35 | }
 36 | 
 37 | .tweet-content {
 38 |   width: 100%;
 39 | }
 40 | 
 41 | .tweet-meta {
 42 |   margin-bottom: 0.5rem;
 43 |   color: rgb(101, 119, 134);
 44 | }
 45 | 
 46 | .tweet-meta .name {
 47 |   font-weight: bold;
 48 |   margin-right: 0.5rem;
 49 |   color: #333;
 50 | }
 51 | 
 52 | .tweet-meta .name:hover {
 53 |   color: #1DA1F2;
 54 |   text-decoration: underline;
 55 | }
 56 | 
 57 | .tweet-meta .handle {
 58 |   margin-right: 0.5rem
 59 | }
 60 | 
 61 | .tweet-body {
 62 |   margin-bottom: 1rem;
 63 | }
 64 | 
 65 | .tweet-body a {
 66 |   color: #1DA1F2;
 67 | }
 68 | 
 69 | .tweet-body a:hover {
 70 |   text-decoration: underline;
 71 | }
 72 | 
 73 | .image-wrapper img {
 74 |   display: block;
 75 |   width: 100%;
 76 |   height: auto;
 77 |   border-radius: 4px;
 78 | }
 79 | 
 80 | .video-wrapper {
 81 |   position: relative;
 82 |   width: 100%;
 83 |   height: 0;
 84 |   padding-bottom: 56.25%;
 85 | }
 86 | 
 87 | .video-wrapper .video {
 88 |   position: absolute;
 89 |   top: 0;
 90 |   left: 0;
 91 |   width: 100%;
 92 |   height: 100%;
 93 | }
 94 | 
 95 | .tweet-actions {
 96 |   display: flex;
 97 |   color: rgb(101, 119, 134);
 98 | }
 99 | 
100 | .tweet-actions .svg-icon {
101 |   width: 20px;
102 |   height: 20px;
103 | 
104 |   fill: rgb(101, 119, 134);
105 | 
106 |   margin-right: 6rem;
107 | }
108 | 
109 | .tweet-actions .svg-icon:hover {
110 |   fill: #1DA1F2;
111 | }


--------------------------------------------------------------------------------
/template/app.js:
--------------------------------------------------------------------------------
 1 | Vue.component('image-card', {
 2 |   template: "#template-image-card",
 3 |   data: function () {
 4 |     return {
 5 |       count: 0
 6 |     }
 7 |   }
 8 | })
 9 | 
10 | new Vue({ el: '#demo' });
11 | 


--------------------------------------------------------------------------------
/template/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Demo</title>
 9 |   <link rel="stylesheet" href="../../shared/normalize-5.0.0.min.css">
10 |   <link rel="stylesheet" href="../../shared/main.css">
11 |   <link rel="stylesheet" href="../../shared/image_card.css">
12 | </head>
13 | 
14 | <body>
15 |   <div id="demo">
16 |     <image-card></image-card>
17 |     <image-card></image-card>
18 |   </div>
19 | 
20 |   <template id="template-image-card">
21 |     <div class="card">
22 |       <img class="card-image" src="https://images.unsplash.com/photo-1457410129867-5999af49daf7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=db366be68b7ffcb315597fcf0c1b6a51&auto=format&fit=crop&w=315&q=80" />
23 |       <div class="card-meta">
24 |         <h3>Cholula, Mexico</h3>
25 |         <div class="author">Image by @lemepe</div>
26 |         <div class="heart transparent" @click="count++">
27 |           <svg viewBox="0 0 32 29.6">
28 |             <path id="heart-icon" d="M16,28.261c0,0-14-7.926-14-17.046c0-9.356,13.159-10.399,14-0.454c1.011-9.938,14-8.903,14,0.454
29 |     C30,20.335,16,28.261,16,28.261z"/>            
30 |     </svg>
31 |           </svg>
32 |         </div>
33 |         <p class="status">You clicked me {{ count }}</p>
34 |       </div>
35 |     </div>
36 |   </template>
37 | 
38 |   <script src='../../shared/vue-2.6.10.js'></script>
39 |   <script src='app.js' type="text/javascript"></script>
40 | </body>
41 | </html>


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