├── .gitignore
├── README.md
├── codecon_banner.png
├── error-boundary
    ├── .browserslistrc
    ├── .editorconfig
    ├── .eslintrc.js
    ├── .gitignore
    ├── README.md
    ├── babel.config.js
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    └── src
    │   ├── App.vue
    │   ├── assets
    │       └── logo.png
    │   ├── components
    │       ├── Content.vue
    │       ├── ErrorBoundary.vue
    │       ├── Fallback.vue
    │       ├── Footer.vue
    │       ├── Header.vue
    │       ├── Loading.vue
    │       └── PostList.vue
    │   ├── global.js
    │   ├── main.js
    │   ├── services
    │       ├── index.js
    │       └── posts.js
    │   └── stores
    │       ├── posts.js
    │       └── user.js
├── factory-components
    ├── .browserslistrc
    ├── .editorconfig
    ├── .eslintrc.js
    ├── .gitignore
    ├── README.md
    ├── babel.config.js
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    └── src
    │   ├── App.vue
    │   ├── assets
    │       └── logo.png
    │   ├── components
    │       ├── Modal.vue
    │       ├── ModalFactory.vue
    │       ├── ModalLogin.vue
    │       └── ModalRegister.vue
    │   └── main.js
├── global-services
    ├── .browserslistrc
    ├── .editorconfig
    ├── .eslintrc.js
    ├── .gitignore
    ├── README.md
    ├── babel.config.js
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    └── src
    │   ├── App.vue
    │   ├── assets
    │       └── logo.png
    │   ├── components
    │       ├── Content.vue
    │       ├── Footer.vue
    │       ├── Header.vue
    │       └── Loading.vue
    │   ├── global.js
    │   ├── main.js
    │   ├── services
    │       ├── index.js
    │       └── posts.js
    │   └── stores
    │       ├── posts.js
    │       └── user.js
├── scoped-slots
    ├── .browserslistrc
    ├── .editorconfig
    ├── .eslintrc.js
    ├── .gitignore
    ├── README.md
    ├── babel.config.js
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    └── src
    │   ├── App.vue
    │   ├── assets
    │       └── logo.png
    │   ├── components
    │       ├── HelloWorld.vue
    │       ├── QueryRenderer.vue
    │       └── WithMouse.vue
    │   ├── main.js
    │   └── services
    │       ├── index.js
    │       └── posts.js
└── vue-global-store
    ├── .browserslistrc
    ├── .editorconfig
    ├── .eslintrc.js
    ├── .gitignore
    ├── README.md
    ├── babel.config.js
    ├── package-lock.json
    ├── package.json
    ├── public
        ├── favicon.ico
        └── index.html
    └── src
        ├── App.vue
        ├── assets
            └── logo.png
        ├── components
            ├── Content.vue
            ├── Footer.vue
            └── Header.vue
        ├── main.js
        ├── services
            ├── index.js
            └── posts.js
        └── stores
            ├── posts.js
            └── user.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## `codecon-vuejs-components-patterns-workshop`
 2 | 
 3 | > Workshop para a [codecon](https://codecon.dev/workshops/patterns-componentes-vue-js)
 4 | 
 5 | Embora os componentes sejam uma das melhores coisas que já aconteceram no front-end, a capacidade de reutilização e a escalabilidade tornam-se as coisas mais difíceis de gerenciar conforme sua base de código e equipe crescem. Aqui vou mostrar os padrões de componentes você precisa considerar para reutilização e escalabilidade do código.
 6 | 
 7 | ![](./codecon_banner.png)
 8 | 
 9 | 
10 | 


--------------------------------------------------------------------------------
/codecon_banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IgorHalfeld/codecon-vuejs-components-patterns-workshop/48b9e8cc9890bffc6e52933e32077eb5939ad357/codecon_banner.png


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


--------------------------------------------------------------------------------
/error-boundary/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


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


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


--------------------------------------------------------------------------------
/error-boundary/README.md:
--------------------------------------------------------------------------------
 1 | # vue-global-store
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


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


--------------------------------------------------------------------------------
/error-boundary/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-global-store",
 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.22.0",
12 |     "core-js": "^3.6.5",
13 |     "vue": "^2.6.11"
14 |   },
15 |   "devDependencies": {
16 |     "@vue/cli-plugin-babel": "~4.5.0",
17 |     "@vue/cli-plugin-eslint": "~4.5.0",
18 |     "@vue/cli-service": "~4.5.0",
19 |     "@vue/eslint-config-standard": "^5.1.2",
20 |     "babel-eslint": "^10.1.0",
21 |     "eslint": "^6.7.2",
22 |     "eslint-plugin-import": "^2.20.2",
23 |     "eslint-plugin-node": "^11.1.0",
24 |     "eslint-plugin-promise": "^4.2.1",
25 |     "eslint-plugin-standard": "^4.0.0",
26 |     "eslint-plugin-vue": "^6.2.2",
27 |     "lint-staged": "^9.5.0",
28 |     "vue-template-compiler": "^2.6.11"
29 |   },
30 |   "gitHooks": {
31 |     "pre-commit": "lint-staged"
32 |   },
33 |   "lint-staged": {
34 |     "*.{js,jsx,vue}": [
35 |       "vue-cli-service lint",
36 |       "git add"
37 |     ]
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/error-boundary/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IgorHalfeld/codecon-vuejs-components-patterns-workshop/48b9e8cc9890bffc6e52933e32077eb5939ad357/error-boundary/public/favicon.ico


--------------------------------------------------------------------------------
/error-boundary/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> 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 | 


--------------------------------------------------------------------------------
/error-boundary/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <loading />
 4 |     <custom-header />
 5 |     <custom-content />
 6 |     <custom-footer />
 7 |     <error-boundary :fallback="fallbackComponent">
 8 |       <post-list />
 9 |     </error-boundary>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import { setCurrentUser } from './stores/user'
15 | import ErrorBoundary from './components/ErrorBoundary'
16 | import Loading from './components/Loading'
17 | import Header from './components/Header'
18 | import PostList from './components/PostList'
19 | import Content from './components/Content'
20 | import Footer from './components/Footer'
21 | import Fallback from './components/Fallback'
22 | 
23 | export default {
24 |   name: 'App',
25 |   data: () => ({
26 |     fallbackComponent: Fallback
27 |   }),
28 |   components: {
29 |     Loading,
30 |     CustomHeader: Header,
31 |     CustomContent: Content,
32 |     CustomFooter: Footer,
33 |     PostList,
34 |     ErrorBoundary
35 |   },
36 |   async mounted () {
37 |     setTimeout(async () => {
38 |       setCurrentUser({
39 |         id: '123',
40 |         name: 'Igor',
41 |         email: 'igor@igor.com'
42 |       })
43 |       console.log('setCurrentUser dispatched')
44 |     }, 2000)
45 |   }
46 | }
47 | </script>
48 | 


--------------------------------------------------------------------------------
/error-boundary/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IgorHalfeld/codecon-vuejs-components-patterns-workshop/48b9e8cc9890bffc6e52933e32077eb5939ad357/error-boundary/src/assets/logo.png


--------------------------------------------------------------------------------
/error-boundary/src/components/Content.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <p v-if="hasError">Um error aconteceu</p>
 4 |     <p v-if="isLoading">Carregando</p>
 5 | 
 6 |     <template v-if="posts.length && !isLoading">
 7 |       <ul>
 8 |         <li v-for="post in posts" :key="post.id">
 9 |           {{ post.title }}
10 |         </li>
11 |       </ul>
12 |     </template>
13 | 
14 |     <p v-if="!posts.length && !isLoading">Nenhum post :(</p>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | import {
20 |   getPosts,
21 |   isLoading,
22 |   hasError
23 | } from '../stores/posts'
24 | 
25 | export default {
26 |   computed: {
27 |     posts: getPosts,
28 |     isLoading,
29 |     hasError
30 |   }
31 | }
32 | </script>
33 | 


--------------------------------------------------------------------------------
/error-boundary/src/components/ErrorBoundary.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   data: () => ({
 4 |     hasError: null,
 5 |     component: null
 6 |   }),
 7 |   props: {
 8 |     fallback: {
 9 |       type: Object,
10 |       required: true
11 |     }
12 |   },
13 |   errorCaptured (err) {
14 |     this.hasError = true
15 |     console.log('captured: ', err)
16 |     this.$emit('error-captured', { err })
17 |   },
18 |   render (h) {
19 |     if (this.hasError) {
20 |       return h(this.fallback)
21 |     }
22 | 
23 |     return this.$slots.default
24 |   }
25 | }
26 | </script>
27 | 


--------------------------------------------------------------------------------
/error-boundary/src/components/Fallback.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h1>Teve um erro! fale com alguém!</h1>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 | 
 8 | }
 9 | </script>
10 | 
11 | <style>
12 | 
13 | </style>
14 | 


--------------------------------------------------------------------------------
/error-boundary/src/components/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>Footer</h1>
 4 | 
 5 |     <p v-if="!hasUserLogged">Nenhum usuário logado</p>
 6 |     <p v-else>Usuário logado: {{ currentUser.name }}</p>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import { getCurrentUser } from '../stores/user'
12 | 
13 | export default {
14 |   computed: {
15 |     hasUserLogged () {
16 |       return this.currentUser.id !== ''
17 |     },
18 |     currentUser: getCurrentUser
19 |   }
20 | }
21 | </script>
22 | 
23 | <style scoped>
24 | div {
25 |   display: flex;
26 |   padding: 10px;
27 |   border: 1px solid red;
28 |   justify-content: space-between;
29 |   align-items: center;
30 | }
31 | 
32 | h1 {
33 |   color: purple;
34 | }
35 | </style>
36 | 


--------------------------------------------------------------------------------
/error-boundary/src/components/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>Vue Global Store</h1>
 4 | 
 5 |     <p v-if="!hasUserLogged">Nenhum usuário logado</p>
 6 |     <p v-else>Usuário logado: {{ currentUser.name }}</p>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import { getCurrentUser } from '../stores/user'
12 | 
13 | export default {
14 |   computed: {
15 |     hasUserLogged () {
16 |       return this.currentUser.id !== ''
17 |     },
18 |     currentUser: getCurrentUser
19 |   }
20 | }
21 | </script>
22 | 
23 | <style scoped>
24 | div {
25 |   display: flex;
26 |   padding: 10px;
27 |   border: 1px solid red;
28 |   justify-content: space-between;
29 |   align-items: center;
30 | }
31 | 
32 | h1 {
33 |   color: purple;
34 | }
35 | </style>
36 | 


--------------------------------------------------------------------------------
/error-boundary/src/components/Loading.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="loading" v-if="status">
 3 |     <p>Loading...</p>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   data: () => ({
10 |     status: false
11 |   }),
12 |   created () {
13 |     this.$g.loading.onToggle(({ payload }) => {
14 |       console.log('toggling')
15 |       this.status = payload
16 |     })
17 |   },
18 |   destroyed () {
19 |     this.$g.loading.off()
20 |   }
21 | }
22 | </script>
23 | 
24 | <style scoped>
25 | .loading {
26 |   position: absolute;
27 |   top: 0px;
28 |   left: 0px;
29 |   width: 100%;
30 |   height: 100%;
31 |   background-color: rgba(0, 0, 0, .6);
32 |   display: flex;
33 |   justify-content: center;
34 |   align-items: center;
35 | }
36 | 
37 | p {
38 |   color: white;
39 |   font-weight: 800;
40 |   font-size: 44px;
41 | }
42 | </style>
43 | 


--------------------------------------------------------------------------------
/error-boundary/src/components/PostList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h1>Post List</h1>
 3 | </template>
 4 | 
 5 | <script>
 6 | function getPosts () {
 7 |   return new Promise((_, reject) => { // eslint-disable-line
 8 |     setTimeout(() => {
 9 |       // resolve([{ id: 123, title: 'post 1' }, { id: 321, title: 'post 2' }])
10 |       reject(new Error('api offline'))
11 |     }, 2000)
12 |   })
13 | }
14 | 
15 | export default {
16 |   async mounted () {
17 |     const posts = await getPosts()
18 |     console.log('posts', posts)
19 |   }
20 | }
21 | </script>
22 | 


--------------------------------------------------------------------------------
/error-boundary/src/global.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | export function NewGlobalEvent (eventName = '') {
 4 |   const bus = new Vue()
 5 |   const name = `global-${eventName}-event`
 6 | 
 7 |   function generic (action) {
 8 |     bus.$emit(name, action)
 9 |   }
10 | 
11 |   function show (payload = true) {
12 |     generic({ type: 'SHOW', payload })
13 |   }
14 | 
15 |   function hide (payload = false) {
16 |     generic({ type: 'HIDE', payload })
17 |   }
18 | 
19 |   function onToggle (callback) {
20 |     bus.$on(name, callback)
21 |   }
22 | 
23 |   function off () {
24 |     bus.$off(name)
25 |   }
26 | 
27 |   return {
28 |     show,
29 |     hide,
30 |     off,
31 |     onToggle
32 |   }
33 | }
34 | 
35 | export default {
36 |   loading: NewGlobalEvent('loading'),
37 |   modal: NewGlobalEvent('modal'),
38 |   notification: NewGlobalEvent('notification')
39 | }
40 | 


--------------------------------------------------------------------------------
/error-boundary/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import services from './services'
 4 | import global from './global'
 5 | 
 6 | Vue.config.productionTip = false
 7 | 
 8 | Object.defineProperty(Vue.prototype, '$services', {
 9 |   get () {
10 |     return services
11 |   },
12 |   set () {
13 |     throw new Error('you cann\'t set $services')
14 |   }
15 | })
16 | 
17 | Object.defineProperty(Vue.prototype, '$g', {
18 |   get () {
19 |     return global
20 |   },
21 |   set () {
22 |     throw new Error('you cann\'t set $g')
23 |   }
24 | })
25 | 
26 | new Vue({
27 |   render: h => h(App)
28 | }).$mount('#app')
29 | 


--------------------------------------------------------------------------------
/error-boundary/src/services/index.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | import PostsService from './posts'
 3 | 
 4 | const httpClient = axios.create({
 5 |   baseURL: 'https://jsonplaceholder.typicode.com'
 6 | })
 7 | 
 8 | export default {
 9 |   posts: PostsService(httpClient)
10 | }
11 | 


--------------------------------------------------------------------------------
/error-boundary/src/services/posts.js:
--------------------------------------------------------------------------------
 1 | import global from '../global'
 2 | 
 3 | function getPosts (httpClient) {
 4 |   return new Promise((resolve, reject) => {
 5 |     try {
 6 |       setTimeout(async () => {
 7 |         const response = await httpClient.get('/posts')
 8 |         resolve(response)
 9 |       }, 3000)
10 |     } catch (err) {
11 |       reject(err)
12 |     }
13 |   })
14 | }
15 | 
16 | export default (httpClient) => ({
17 |   async getAll () {
18 |     global.loading.show()
19 |     const response = await getPosts(httpClient)
20 |     global.loading.hide()
21 |     return response
22 |   }
23 | })
24 | 


--------------------------------------------------------------------------------
/error-boundary/src/stores/posts.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | const state = Vue.observable({
 4 |   posts: [],
 5 |   isLoading: false,
 6 |   hasError: false
 7 | })
 8 | 
 9 | export const getPosts = () => state.posts
10 | export const isLoading = () => state.isLoading
11 | export const hasError = () => state.hasError
12 | 
13 | export function setPosts (posts) {
14 |   state.posts = posts
15 | }
16 | 
17 | export function setLoading (loading) {
18 |   state.isLoading = loading
19 | }
20 | 
21 | export function setError (error) {
22 |   state.hasError = error
23 | }
24 | 


--------------------------------------------------------------------------------
/error-boundary/src/stores/user.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | // State
 4 | const state = Vue.observable({
 5 |   currentUser: {
 6 |     id: '',
 7 |     name: '',
 8 |     email: ''
 9 |   }
10 | })
11 | 
12 | // Getters
13 | export const getCurrentUser = () => state.currentUser
14 | 
15 | // Actions
16 | export function setEmail (email) {
17 |   state.currentUser.email = email
18 | }
19 | 
20 | export function setCurrentUser (user) {
21 |   state.currentUser = user
22 | }
23 | 


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


--------------------------------------------------------------------------------
/factory-components/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


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


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


--------------------------------------------------------------------------------
/factory-components/README.md:
--------------------------------------------------------------------------------
 1 | # factory-components
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


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


--------------------------------------------------------------------------------
/factory-components/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "factory-components",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "vue": "^2.6.11"
13 |   },
14 |   "devDependencies": {
15 |     "@vue/cli-plugin-babel": "~4.5.0",
16 |     "@vue/cli-plugin-eslint": "~4.5.0",
17 |     "@vue/cli-service": "~4.5.0",
18 |     "@vue/eslint-config-standard": "^5.1.2",
19 |     "babel-eslint": "^10.1.0",
20 |     "eslint": "^6.7.2",
21 |     "eslint-plugin-import": "^2.20.2",
22 |     "eslint-plugin-node": "^11.1.0",
23 |     "eslint-plugin-promise": "^4.2.1",
24 |     "eslint-plugin-standard": "^4.0.0",
25 |     "eslint-plugin-vue": "^6.2.2",
26 |     "lint-staged": "^9.5.0",
27 |     "vue-template-compiler": "^2.6.11"
28 |   },
29 |   "gitHooks": {
30 |     "pre-commit": "lint-staged"
31 |   },
32 |   "lint-staged": {
33 |     "*.{js,jsx,vue}": [
34 |       "vue-cli-service lint",
35 |       "git add"
36 |     ]
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/factory-components/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IgorHalfeld/codecon-vuejs-components-patterns-workshop/48b9e8cc9890bffc6e52933e32077eb5939ad357/factory-components/public/favicon.ico


--------------------------------------------------------------------------------
/factory-components/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> 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 | 


--------------------------------------------------------------------------------
/factory-components/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>Factory component</h1>
 4 |     <modal-factory :component="component" />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import ModalFactory from './components/ModalFactory'
10 | 
11 | export default {
12 |   name: 'App',
13 |   components: { ModalFactory },
14 |   data: () => ({
15 |     component: 'ModalLogin'
16 |   }),
17 |   mounted () {
18 |     setInterval(() => {
19 |       if (this.component === 'ModalLogin') {
20 |         this.component = 'ModalRegister'
21 |         return
22 |       }
23 | 
24 |       this.component = 'ModalLogin'
25 |     }, 1000)
26 |   }
27 | }
28 | </script>
29 | 


--------------------------------------------------------------------------------
/factory-components/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IgorHalfeld/codecon-vuejs-components-patterns-workshop/48b9e8cc9890bffc6e52933e32077eb5939ad357/factory-components/src/assets/logo.png


--------------------------------------------------------------------------------
/factory-components/src/components/Modal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="modal">
 3 |     <div class="body">
 4 |       <h1>my content</h1>
 5 |     </div>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 | 
12 | }
13 | </script>
14 | 
15 | <style scoped>
16 | .modal {
17 |   position: absolute;
18 |   top: 0px;
19 |   left: 0px;
20 |   width: 100%;
21 |   height: 100%;
22 |   background-color: rgba(0, 0, 0, .6);
23 |   display: flex;
24 |   justify-content: center;
25 |   align-items: center;
26 | }
27 | 
28 | .body {
29 |   width: 600px;
30 |   height: 400px;
31 |   background-color: #f4f4f4;
32 | }
33 | </style>
34 | 


--------------------------------------------------------------------------------
/factory-components/src/components/ModalFactory.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <component :is="component" />
 3 | </template>
 4 | 
 5 | <script>
 6 | import ModalLogin from './ModalLogin'
 7 | import ModalRegister from './ModalRegister'
 8 | 
 9 | export default {
10 |   components: {
11 |     ModalLogin,
12 |     ModalRegister
13 |   },
14 |   props: {
15 |     component: { type: String, required: true }
16 |   }
17 | }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/factory-components/src/components/ModalLogin.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="modal">
 3 |     <div class="body">
 4 |       <h1>Modal login</h1>
 5 |     </div>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 | 
12 | }
13 | </script>
14 | 
15 | <style scoped>
16 | .modal {
17 |   position: absolute;
18 |   top: 0px;
19 |   left: 0px;
20 |   width: 100%;
21 |   height: 100%;
22 |   background-color: rgba(0, 0, 0, .6);
23 |   display: flex;
24 |   justify-content: center;
25 |   align-items: center;
26 | }
27 | 
28 | .body {
29 |   width: 600px;
30 |   height: 400px;
31 |   background-color: #f4f4f4;
32 | }
33 | </style>
34 | 


--------------------------------------------------------------------------------
/factory-components/src/components/ModalRegister.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="modal">
 3 |     <div class="body">
 4 |       <h1>Modal register</h1>
 5 |     </div>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 | 
12 | }
13 | </script>
14 | 
15 | <style scoped>
16 | .modal {
17 |   position: absolute;
18 |   top: 0px;
19 |   left: 0px;
20 |   width: 100%;
21 |   height: 100%;
22 |   background-color: rgba(0, 0, 0, .6);
23 |   display: flex;
24 |   justify-content: center;
25 |   align-items: center;
26 | }
27 | 
28 | .body {
29 |   width: 600px;
30 |   height: 400px;
31 |   background-color: #f4f4f4;
32 | }
33 | </style>
34 | 


--------------------------------------------------------------------------------
/factory-components/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 | 


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


--------------------------------------------------------------------------------
/global-services/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


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


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


--------------------------------------------------------------------------------
/global-services/README.md:
--------------------------------------------------------------------------------
 1 | # vue-global-store
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


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


--------------------------------------------------------------------------------
/global-services/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-global-store",
 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.22.0",
12 |     "core-js": "^3.6.5",
13 |     "vue": "^2.6.11"
14 |   },
15 |   "devDependencies": {
16 |     "@vue/cli-plugin-babel": "~4.5.0",
17 |     "@vue/cli-plugin-eslint": "~4.5.0",
18 |     "@vue/cli-service": "~4.5.0",
19 |     "@vue/eslint-config-standard": "^5.1.2",
20 |     "babel-eslint": "^10.1.0",
21 |     "eslint": "^6.7.2",
22 |     "eslint-plugin-import": "^2.20.2",
23 |     "eslint-plugin-node": "^11.1.0",
24 |     "eslint-plugin-promise": "^4.2.1",
25 |     "eslint-plugin-standard": "^4.0.0",
26 |     "eslint-plugin-vue": "^6.2.2",
27 |     "lint-staged": "^9.5.0",
28 |     "vue-template-compiler": "^2.6.11"
29 |   },
30 |   "gitHooks": {
31 |     "pre-commit": "lint-staged"
32 |   },
33 |   "lint-staged": {
34 |     "*.{js,jsx,vue}": [
35 |       "vue-cli-service lint",
36 |       "git add"
37 |     ]
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/global-services/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IgorHalfeld/codecon-vuejs-components-patterns-workshop/48b9e8cc9890bffc6e52933e32077eb5939ad357/global-services/public/favicon.ico


--------------------------------------------------------------------------------
/global-services/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> 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 | 


--------------------------------------------------------------------------------
/global-services/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <loading />
 4 |     <custom-header />
 5 |     <custom-content />
 6 |     <custom-footer />
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import { setCurrentUser } from './stores/user'
12 | import { setLoading, setError, setPosts } from './stores/posts'
13 | import Loading from './components/Loading'
14 | import Header from './components/Header'
15 | import Content from './components/Content'
16 | import Footer from './components/Footer'
17 | 
18 | export default {
19 |   name: 'App',
20 |   components: {
21 |     Loading,
22 |     CustomHeader: Header,
23 |     CustomContent: Content,
24 |     CustomFooter: Footer
25 |   },
26 |   async mounted () {
27 |     try {
28 |       setLoading(true)
29 |       const { data: posts } = await this.$services.posts.getAll()
30 |       setPosts(posts)
31 |     } catch (err) {
32 |       setError(!!err)
33 |     } finally {
34 |       setLoading(false)
35 |     }
36 | 
37 |     setTimeout(async () => {
38 |       setCurrentUser({
39 |         id: '123',
40 |         name: 'Igor',
41 |         email: 'igor@igor.com'
42 |       })
43 |       console.log('setCurrentUser dispatched')
44 |     }, 2000)
45 |   }
46 | }
47 | </script>
48 | 


--------------------------------------------------------------------------------
/global-services/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IgorHalfeld/codecon-vuejs-components-patterns-workshop/48b9e8cc9890bffc6e52933e32077eb5939ad357/global-services/src/assets/logo.png


--------------------------------------------------------------------------------
/global-services/src/components/Content.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <p v-if="hasError">Um error aconteceu</p>
 4 |     <p v-if="isLoading">Carregando</p>
 5 | 
 6 |     <template v-if="posts.length && !isLoading">
 7 |       <ul>
 8 |         <li v-for="post in posts" :key="post.id">
 9 |           {{ post.title }}
10 |         </li>
11 |       </ul>
12 |     </template>
13 | 
14 |     <p v-if="!posts.length && !isLoading">Nenhum post :(</p>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | import {
20 |   getPosts,
21 |   isLoading,
22 |   hasError
23 | } from '../stores/posts'
24 | 
25 | export default {
26 |   computed: {
27 |     posts: getPosts,
28 |     isLoading,
29 |     hasError
30 |   }
31 | }
32 | </script>
33 | 


--------------------------------------------------------------------------------
/global-services/src/components/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>Footer</h1>
 4 | 
 5 |     <p v-if="!hasUserLogged">Nenhum usuário logado</p>
 6 |     <p v-else>Usuário logado: {{ currentUser.name }}</p>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import { getCurrentUser } from '../stores/user'
12 | 
13 | export default {
14 |   computed: {
15 |     hasUserLogged () {
16 |       return this.currentUser.id !== ''
17 |     },
18 |     currentUser: getCurrentUser
19 |   }
20 | }
21 | </script>
22 | 
23 | <style scoped>
24 | div {
25 |   display: flex;
26 |   padding: 10px;
27 |   border: 1px solid red;
28 |   justify-content: space-between;
29 |   align-items: center;
30 | }
31 | 
32 | h1 {
33 |   color: purple;
34 | }
35 | </style>
36 | 


--------------------------------------------------------------------------------
/global-services/src/components/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>Vue Global Store</h1>
 4 | 
 5 |     <p v-if="!hasUserLogged">Nenhum usuário logado</p>
 6 |     <p v-else>Usuário logado: {{ currentUser.name }}</p>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import { getCurrentUser } from '../stores/user'
12 | 
13 | export default {
14 |   computed: {
15 |     hasUserLogged () {
16 |       return this.currentUser.id !== ''
17 |     },
18 |     currentUser: getCurrentUser
19 |   }
20 | }
21 | </script>
22 | 
23 | <style scoped>
24 | div {
25 |   display: flex;
26 |   padding: 10px;
27 |   border: 1px solid red;
28 |   justify-content: space-between;
29 |   align-items: center;
30 | }
31 | 
32 | h1 {
33 |   color: purple;
34 | }
35 | </style>
36 | 


--------------------------------------------------------------------------------
/global-services/src/components/Loading.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="loading" v-if="status">
 3 |     <p>Loading...</p>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   data: () => ({
10 |     status: false
11 |   }),
12 |   created () {
13 |     this.$g.loading.onToggle(({ payload }) => {
14 |       console.log('toggling')
15 |       this.status = payload
16 |     })
17 |   },
18 |   destroyed () {
19 |     this.$g.loading.off()
20 |   }
21 | }
22 | </script>
23 | 
24 | <style scoped>
25 | .loading {
26 |   position: absolute;
27 |   top: 0px;
28 |   left: 0px;
29 |   width: 100%;
30 |   height: 100%;
31 |   background-color: rgba(0, 0, 0, .6);
32 |   display: flex;
33 |   justify-content: center;
34 |   align-items: center;
35 | }
36 | 
37 | p {
38 |   color: white;
39 |   font-weight: 800;
40 |   font-size: 44px;
41 | }
42 | </style>
43 | 


--------------------------------------------------------------------------------
/global-services/src/global.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | export function NewGlobalEvent (eventName = '') {
 4 |   const bus = new Vue()
 5 |   const name = `global-${eventName}-event`
 6 | 
 7 |   function generic (action) {
 8 |     bus.$emit(name, action)
 9 |   }
10 | 
11 |   function show (payload = true) {
12 |     generic({ type: 'SHOW', payload })
13 |   }
14 | 
15 |   function hide (payload = false) {
16 |     generic({ type: 'HIDE', payload })
17 |   }
18 | 
19 |   function onToggle (callback) {
20 |     bus.$on(name, callback)
21 |   }
22 | 
23 |   function off () {
24 |     bus.$off(name)
25 |   }
26 | 
27 |   return {
28 |     show,
29 |     hide,
30 |     off,
31 |     onToggle
32 |   }
33 | }
34 | 
35 | export default {
36 |   loading: NewGlobalEvent('loading'),
37 |   modal: NewGlobalEvent('modal'),
38 |   notification: NewGlobalEvent('notification')
39 | }
40 | 


--------------------------------------------------------------------------------
/global-services/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import services from './services'
 4 | import global from './global'
 5 | 
 6 | Vue.config.productionTip = false
 7 | 
 8 | Object.defineProperty(Vue.prototype, '$services', {
 9 |   get () {
10 |     return services
11 |   },
12 |   set () {
13 |     throw new Error('you cann\'t set $services')
14 |   }
15 | })
16 | 
17 | Object.defineProperty(Vue.prototype, '$g', {
18 |   get () {
19 |     return global
20 |   },
21 |   set () {
22 |     throw new Error('you cann\'t set $g')
23 |   }
24 | })
25 | 
26 | new Vue({
27 |   render: h => h(App)
28 | }).$mount('#app')
29 | 


--------------------------------------------------------------------------------
/global-services/src/services/index.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | import PostsService from './posts'
 3 | 
 4 | const httpClient = axios.create({
 5 |   baseURL: 'https://jsonplaceholder.typicode.com'
 6 | })
 7 | 
 8 | export default {
 9 |   posts: PostsService(httpClient)
10 | }
11 | 


--------------------------------------------------------------------------------
/global-services/src/services/posts.js:
--------------------------------------------------------------------------------
 1 | import global from '../global'
 2 | 
 3 | function getPosts (httpClient) {
 4 |   return new Promise((resolve, reject) => {
 5 |     try {
 6 |       setTimeout(async () => {
 7 |         const response = await httpClient.get('/posts')
 8 |         resolve(response)
 9 |       }, 3000)
10 |     } catch (err) {
11 |       reject(err)
12 |     }
13 |   })
14 | }
15 | 
16 | export default (httpClient) => ({
17 |   async getAll () {
18 |     global.loading.show()
19 |     const response = await getPosts(httpClient)
20 |     global.loading.hide()
21 |     return response
22 |   }
23 | })
24 | 


--------------------------------------------------------------------------------
/global-services/src/stores/posts.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | const state = Vue.observable({
 4 |   posts: [],
 5 |   isLoading: false,
 6 |   hasError: false
 7 | })
 8 | 
 9 | export const getPosts = () => state.posts
10 | export const isLoading = () => state.isLoading
11 | export const hasError = () => state.hasError
12 | 
13 | export function setPosts (posts) {
14 |   state.posts = posts
15 | }
16 | 
17 | export function setLoading (loading) {
18 |   state.isLoading = loading
19 | }
20 | 
21 | export function setError (error) {
22 |   state.hasError = error
23 | }
24 | 


--------------------------------------------------------------------------------
/global-services/src/stores/user.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | // State
 4 | const state = Vue.observable({
 5 |   currentUser: {
 6 |     id: '',
 7 |     name: '',
 8 |     email: ''
 9 |   }
10 | })
11 | 
12 | // Getters
13 | export const getCurrentUser = () => state.currentUser
14 | 
15 | // Actions
16 | export function setEmail (email) {
17 |   state.currentUser.email = email
18 | }
19 | 
20 | export function setCurrentUser (user) {
21 |   state.currentUser = user
22 | }
23 | 


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


--------------------------------------------------------------------------------
/scoped-slots/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


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


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


--------------------------------------------------------------------------------
/scoped-slots/README.md:
--------------------------------------------------------------------------------
 1 | # scoped-slots
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


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


--------------------------------------------------------------------------------
/scoped-slots/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "scoped-slots",
 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.22.0",
12 |     "core-js": "^3.6.5",
13 |     "vue": "^2.6.11"
14 |   },
15 |   "devDependencies": {
16 |     "@vue/cli-plugin-babel": "~4.5.0",
17 |     "@vue/cli-plugin-eslint": "~4.5.0",
18 |     "@vue/cli-service": "~4.5.0",
19 |     "@vue/eslint-config-standard": "^5.1.2",
20 |     "babel-eslint": "^10.1.0",
21 |     "eslint": "^6.7.2",
22 |     "eslint-plugin-import": "^2.20.2",
23 |     "eslint-plugin-node": "^11.1.0",
24 |     "eslint-plugin-promise": "^4.2.1",
25 |     "eslint-plugin-standard": "^4.0.0",
26 |     "eslint-plugin-vue": "^6.2.2",
27 |     "lint-staged": "^9.5.0",
28 |     "vue-template-compiler": "^2.6.11"
29 |   },
30 |   "gitHooks": {
31 |     "pre-commit": "lint-staged"
32 |   },
33 |   "lint-staged": {
34 |     "*.{js,jsx,vue}": [
35 |       "vue-cli-service lint",
36 |       "git add"
37 |     ]
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/scoped-slots/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IgorHalfeld/codecon-vuejs-components-patterns-workshop/48b9e8cc9890bffc6e52933e32077eb5939ad357/scoped-slots/public/favicon.ico


--------------------------------------------------------------------------------
/scoped-slots/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> 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 | 


--------------------------------------------------------------------------------
/scoped-slots/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <h1>Scoped slots</h1>
 4 | 
 5 |     <QueryRenderer entity="posts" action="getAll" :payload="{ name: 'igor' }">
 6 |       <template v-slot="{ data, hasError, isLoading }">
 7 |         <p v-if="isLoading">Carregando...</p>
 8 |         <p v-if="hasError">Deu ruim!!</p>
 9 | 
10 |         <div v-if="data.length && !hasError && !isLoading">
11 |           <ul>
12 |             <li v-for="post in data" :key="post.id">{{ post.title }}</li>
13 |           </ul>
14 |         </div>
15 |       </template>
16 |     </QueryRenderer>
17 |     <!--
18 |     <with-mouse>
19 |       <template v-slot="{ coords }">
20 |         <div
21 |           class="box"
22 |           :style="{
23 |             left: `${coords.x -75}px`,
24 |             top: `${coords.y - 75}px`
25 |           }" />
26 |       </template>
27 |     </with-mouse>
28 |     -->
29 |   </div>
30 | </template>
31 | 
32 | <script>
33 | // import WithMouse from './components/WithMouse'
34 | import QueryRenderer from './components/QueryRenderer'
35 | 
36 | export default {
37 |   name: 'App',
38 |   components: {
39 |     QueryRenderer
40 |     // WithMouse
41 |   }
42 | }
43 | </script>
44 | 
45 | <style>
46 | @keyframes blink {
47 |   from {
48 |     background-color: tomato;
49 |   }
50 |   to {
51 |     background-color: cyan;
52 |   }
53 | }
54 | 
55 | * { margin: 0; padding: 0; box-sizing: border-box }
56 | html, body, .container {
57 |   width: 100%;
58 |   height: 100%;
59 |   background-color: #f4f4f4;
60 | }
61 | 
62 | .box {
63 |   position: absolute;
64 |   background-color: tomato;
65 |   border-radius: 50%;
66 |   width: 150px;
67 |   height: 150px;
68 |   animation: blink 400ms ease-in infinite;
69 | 
70 | }
71 | </style>
72 | 


--------------------------------------------------------------------------------
/scoped-slots/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IgorHalfeld/codecon-vuejs-components-patterns-workshop/48b9e8cc9890bffc6e52933e32077eb5939ad357/scoped-slots/src/assets/logo.png


--------------------------------------------------------------------------------
/scoped-slots/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <p>
 5 |       For a guide and recipes on how to configure / customize this project,<br>
 6 |       check out the
 7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
 8 |     </p>
 9 |     <h3>Installed CLI Plugins</h3>
10 |     <ul>
11 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
13 |     </ul>
14 |     <h3>Essential Links</h3>
15 |     <ul>
16 |       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
17 |       <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
18 |       <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
19 |       <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
20 |       <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
21 |     </ul>
22 |     <h3>Ecosystem</h3>
23 |     <ul>
24 |       <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
25 |       <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
26 |       <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
27 |       <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
28 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
29 |     </ul>
30 |   </div>
31 | </template>
32 | 
33 | <script>
34 | export default {
35 |   name: 'HelloWorld',
36 |   props: {
37 |     msg: String
38 |   }
39 | }
40 | </script>
41 | 
42 | <!-- Add "scoped" attribute to limit CSS to this component only -->
43 | <style scoped>
44 | h3 {
45 |   margin: 40px 0 0;
46 | }
47 | ul {
48 |   list-style-type: none;
49 |   padding: 0;
50 | }
51 | li {
52 |   display: inline-block;
53 |   margin: 0 10px;
54 | }
55 | a {
56 |   color: #42b983;
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/scoped-slots/src/components/QueryRenderer.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import services from '../services'
 3 | 
 4 | export default {
 5 |   props: {
 6 |     entity: {
 7 |       type: String,
 8 |       required: true
 9 |     },
10 |     action: {
11 |       type: String,
12 |       required: true
13 |     },
14 |     payload: {
15 |       type: [Object, Array],
16 |       default: () => ({})
17 |     }
18 |   },
19 |   data: () => ({
20 |     data: [],
21 |     isLoading: false,
22 |     hasError: false
23 |   }),
24 |   async created () {
25 |     try {
26 |       if (!services[this.entity]) {
27 |         throw new Error('entity not found')
28 |       }
29 | 
30 |       const { data: response } = await services[this.entity][this.action](this.payload)
31 |       this.data = response
32 |       this.isLoading = true
33 |     } catch (err) {
34 |       this.hasError = !!err
35 |     } finally {
36 |       this.isLoading = false
37 |     }
38 |   },
39 |   render (h) {
40 |     const slot = this.$scopedSlots.default({
41 |       data: this.data,
42 |       isLoading: this.isLoading,
43 |       hasError: this.hasError
44 |     })
45 | 
46 |     return h('div', slot)
47 |   }
48 | }
49 | </script>
50 | 


--------------------------------------------------------------------------------
/scoped-slots/src/components/WithMouse.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container" @mousemove="handleEvent">
 3 |     <slot :coords="{ x, y }"/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   data: () => ({
10 |     x: window.innerWidth * 0.5,
11 |     y: window.innerWidth * 0.5
12 |   }),
13 |   methods: {
14 |     handleEvent (event) {
15 |       const { clientX, clientY } = event
16 |       this.x = clientX
17 |       this.y = clientY
18 |     }
19 |   }
20 | }
21 | </script>
22 | 


--------------------------------------------------------------------------------
/scoped-slots/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 | 


--------------------------------------------------------------------------------
/scoped-slots/src/services/index.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | import PostsService from './posts'
 3 | 
 4 | const httpClient = axios.create({
 5 |   baseURL: 'https://jsonplaceholder.typicode.com'
 6 | })
 7 | 
 8 | export default {
 9 |   posts: PostsService(httpClient)
10 | }
11 | 


--------------------------------------------------------------------------------
/scoped-slots/src/services/posts.js:
--------------------------------------------------------------------------------
1 | export default (httpClient) => ({
2 |   getAll () {
3 |     return httpClient.get('/posts')
4 |   }
5 | })
6 | 


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


--------------------------------------------------------------------------------
/vue-global-store/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


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


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


--------------------------------------------------------------------------------
/vue-global-store/README.md:
--------------------------------------------------------------------------------
 1 | # vue-global-store
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


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


--------------------------------------------------------------------------------
/vue-global-store/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-global-store",
 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.22.0",
12 |     "core-js": "^3.6.5",
13 |     "vue": "^2.6.11"
14 |   },
15 |   "devDependencies": {
16 |     "@vue/cli-plugin-babel": "~4.5.0",
17 |     "@vue/cli-plugin-eslint": "~4.5.0",
18 |     "@vue/cli-service": "~4.5.0",
19 |     "@vue/eslint-config-standard": "^5.1.2",
20 |     "babel-eslint": "^10.1.0",
21 |     "eslint": "^6.7.2",
22 |     "eslint-plugin-import": "^2.20.2",
23 |     "eslint-plugin-node": "^11.1.0",
24 |     "eslint-plugin-promise": "^4.2.1",
25 |     "eslint-plugin-standard": "^4.0.0",
26 |     "eslint-plugin-vue": "^6.2.2",
27 |     "lint-staged": "^9.5.0",
28 |     "vue-template-compiler": "^2.6.11"
29 |   },
30 |   "gitHooks": {
31 |     "pre-commit": "lint-staged"
32 |   },
33 |   "lint-staged": {
34 |     "*.{js,jsx,vue}": [
35 |       "vue-cli-service lint",
36 |       "git add"
37 |     ]
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/vue-global-store/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IgorHalfeld/codecon-vuejs-components-patterns-workshop/48b9e8cc9890bffc6e52933e32077eb5939ad357/vue-global-store/public/favicon.ico


--------------------------------------------------------------------------------
/vue-global-store/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> 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 | 


--------------------------------------------------------------------------------
/vue-global-store/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <custom-header />
 4 |     <custom-content />
 5 |     <custom-footer />
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import { setCurrentUser } from './stores/user'
11 | import { setLoading, setError, setPosts } from './stores/posts'
12 | import Header from './components/Header'
13 | import Content from './components/Content'
14 | import Footer from './components/Footer'
15 | import services from './services'
16 | 
17 | export default {
18 |   name: 'App',
19 |   components: {
20 |     CustomHeader: Header,
21 |     CustomContent: Content,
22 |     CustomFooter: Footer
23 |   },
24 |   mounted () {
25 |     setTimeout(async () => {
26 |       try {
27 |         setLoading(true)
28 |         const { data: posts } = await services.posts.getAll()
29 |         setPosts(posts)
30 |       } catch (err) {
31 |         setError(!!err)
32 |       } finally {
33 |         setLoading(false)
34 |       }
35 | 
36 |       setCurrentUser({
37 |         id: '123',
38 |         name: 'Igor',
39 |         email: 'igor@igor.com'
40 |       })
41 |       console.log('setCurrentUser dispatched')
42 |     }, 2000)
43 |   }
44 | }
45 | </script>
46 | 


--------------------------------------------------------------------------------
/vue-global-store/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IgorHalfeld/codecon-vuejs-components-patterns-workshop/48b9e8cc9890bffc6e52933e32077eb5939ad357/vue-global-store/src/assets/logo.png


--------------------------------------------------------------------------------
/vue-global-store/src/components/Content.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <p v-if="hasError">Um error aconteceu</p>
 4 |     <p v-if="isLoading">Carregando</p>
 5 | 
 6 |     <template v-if="posts.length && !isLoading">
 7 |       <ul>
 8 |         <li v-for="post in posts" :key="post.id">
 9 |           {{ post.title }}
10 |         </li>
11 |       </ul>
12 |     </template>
13 | 
14 |     <p v-if="!posts.length && !isLoading">Nenhum post :(</p>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | import {
20 |   getPosts,
21 |   isLoading,
22 |   hasError
23 | } from '../stores/posts'
24 | 
25 | export default {
26 |   computed: {
27 |     posts: getPosts,
28 |     isLoading,
29 |     hasError
30 |   }
31 | }
32 | </script>
33 | 


--------------------------------------------------------------------------------
/vue-global-store/src/components/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>Footer</h1>
 4 | 
 5 |     <p v-if="!hasUserLogged">Nenhum usuário logado</p>
 6 |     <p v-else>Usuário logado: {{ currentUser.name }}</p>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import { getCurrentUser } from '../stores/user'
12 | 
13 | export default {
14 |   computed: {
15 |     hasUserLogged () {
16 |       return this.currentUser.id !== ''
17 |     },
18 |     currentUser: getCurrentUser
19 |   }
20 | }
21 | </script>
22 | 
23 | <style scoped>
24 | div {
25 |   display: flex;
26 |   padding: 10px;
27 |   border: 1px solid red;
28 |   justify-content: space-between;
29 |   align-items: center;
30 | }
31 | 
32 | h1 {
33 |   color: purple;
34 | }
35 | </style>
36 | 


--------------------------------------------------------------------------------
/vue-global-store/src/components/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>Vue Global Store</h1>
 4 | 
 5 |     <p v-if="!hasUserLogged">Nenhum usuário logado</p>
 6 |     <p v-else>Usuário logado: {{ currentUser.name }}</p>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import { getCurrentUser } from '../stores/user'
12 | 
13 | export default {
14 |   computed: {
15 |     hasUserLogged () {
16 |       return this.currentUser.id !== ''
17 |     },
18 |     currentUser: getCurrentUser
19 |   }
20 | }
21 | </script>
22 | 
23 | <style scoped>
24 | div {
25 |   display: flex;
26 |   padding: 10px;
27 |   border: 1px solid red;
28 |   justify-content: space-between;
29 |   align-items: center;
30 | }
31 | 
32 | h1 {
33 |   color: purple;
34 | }
35 | </style>
36 | 


--------------------------------------------------------------------------------
/vue-global-store/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 | 


--------------------------------------------------------------------------------
/vue-global-store/src/services/index.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | import PostsService from './posts'
 3 | 
 4 | const httpClient = axios.create({
 5 |   baseURL: 'https://jsonplaceholder.typicode.com'
 6 | })
 7 | 
 8 | export default {
 9 |   posts: PostsService(httpClient)
10 | }
11 | 


--------------------------------------------------------------------------------
/vue-global-store/src/services/posts.js:
--------------------------------------------------------------------------------
1 | 
2 | export default (httpClient) => ({
3 |   getAll () {
4 |     return httpClient.get('/posts')
5 |   }
6 | })
7 | 


--------------------------------------------------------------------------------
/vue-global-store/src/stores/posts.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | const state = Vue.observable({
 4 |   posts: [],
 5 |   isLoading: false,
 6 |   hasError: false
 7 | })
 8 | 
 9 | export const getPosts = () => state.posts
10 | export const isLoading = () => state.isLoading
11 | export const hasError = () => state.hasError
12 | 
13 | export function setPosts (posts) {
14 |   state.posts = posts
15 | }
16 | 
17 | export function setLoading (loading) {
18 |   state.isLoading = loading
19 | }
20 | 
21 | export function setError (error) {
22 |   state.hasError = error
23 | }
24 | 


--------------------------------------------------------------------------------
/vue-global-store/src/stores/user.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | // State
 4 | const state = Vue.observable({
 5 |   currentUser: {
 6 |     id: '',
 7 |     name: '',
 8 |     email: ''
 9 |   }
10 | })
11 | 
12 | // Getters
13 | export const getCurrentUser = () => state.currentUser
14 | 
15 | // Actions
16 | export function setEmail (email) {
17 |   state.currentUser.email = email
18 | }
19 | 
20 | export function setCurrentUser (user) {
21 |   state.currentUser = user
22 | }
23 | 


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