├── .browserslistrc
├── babel.config.js
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
├── composing-components.pdf
├── src
    ├── views
    │   ├── Home.vue
    │   ├── ExampleOne.vue
    │   ├── Dynamic.vue
    │   ├── ExampleTwo.vue
    │   └── ExampleThree.vue
    ├── main.js
    ├── components
    │   ├── AppButton.vue
    │   ├── AppDropdown.vue
    │   ├── AppSelect.vue
    │   ├── Layout.vue
    │   └── AppTooltip.vue
    ├── App.vue
    └── router.js
├── .editorconfig
├── .gitignore
├── .eslintrc.js
├── README.md
└── package.json


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not ie <= 8
4 | 


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


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shentao/composing-components/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/composing-components.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shentao/composing-components/HEAD/composing-components.pdf


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="home">
3 |     <h1>Demo Time!</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/.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 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13 |   },
14 |   parserOptions: {
15 |     parser: 'babel-eslint'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import { library } from '@fortawesome/fontawesome-svg-core'
 5 | import { fas } from '@fortawesome/free-solid-svg-icons'
 6 | import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 7 | 
 8 | library.add(fas)
 9 | 
10 | Vue.component('AppIcon', FontAwesomeIcon)
11 | 
12 | Vue.config.productionTip = false
13 | 
14 | new Vue({
15 |   router,
16 |   render: h => h(App)
17 | }).$mount('#app')
18 | 


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


--------------------------------------------------------------------------------
/src/components/AppButton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <button type="button" class="button" v-on="$listeners">
 3 |     <slot/>
 4 |   </button>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | }
10 | </script>
11 | 
12 | <style lang="stylus">
13 | .button
14 |   display: inline-flex
15 |   padding: 8px 16px
16 |   color: #fff
17 |   background: #3a82d4
18 |   font-weight: bold
19 |   font-size: 1rem
20 |   border: none
21 |   border-radius: 4px
22 |   align-items: center
23 | 
24 |   &:hover
25 |     background: darken(#3a82d4, 10%)
26 | </style>
27 | 


--------------------------------------------------------------------------------
/src/views/ExampleOne.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>AppTooltip</h1>
 4 |     <h2>
 5 |       How are you
 6 |       <AppTooltip>
 7 |         doing?
 8 |         <div slot="content">
 9 |           Hello Amsterdam!
10 |         </div>
11 |       </AppTooltip>
12 |     </h2>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | import AppTooltip from '@/components/AppTooltip'
18 | 
19 | export default {
20 |   components: {
21 |     AppTooltip
22 |   },
23 |   methods: {
24 |     select (option, callback) {
25 |       callback()
26 |     }
27 |   }
28 | }
29 | </script>
30 | 


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


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <div id="nav">
 4 |       <router-link to="/">Start</router-link> |
 5 |       <router-link to="/example-one">Example #1</router-link> |
 6 |       <router-link to="/example-two">Example #2</router-link> |
 7 |       <router-link to="/example-three">Example #3</router-link>
 8 |       <router-link to="/dynamic">Dynamic</router-link>
 9 |     </div>
10 |     <router-view/>
11 |   </div>
12 | </template>
13 | 
14 | <style lang="stylus">
15 | #app
16 |   font-family 'Avenir', Helvetica, Arial, sans-serif
17 |   -webkit-font-smoothing antialiased
18 |   -moz-osx-font-smoothing grayscale
19 |   text-align center
20 |   color #2c3e50
21 |   margin-top 60px
22 | </style>
23 | 


--------------------------------------------------------------------------------
/src/views/Dynamic.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Select slot</h2>
 4 |     <select v-model="position">
 5 |       <option value="header">Header</option>
 6 |       <option value="sidebar">Sidebar</option>
 7 |       <option value="main">Main</option>
 8 |     </select>
 9 | 
10 |     <Layout>
11 |       <template v-slot:[position]>
12 |          <h1>HELLO!</h1>
13 |       </template>
14 |     </Layout>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | import Layout from '@/components/Layout'
20 | 
21 | export default {
22 |   components: { Layout },
23 |   data () {
24 |     return {
25 |       position: 'header'
26 |     }
27 |   }
28 | }
29 | </script>
30 | 
31 | <style lang="stylus">
32 | .red-background
33 |   background: red
34 | </style>
35 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "composing-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 |     "@fortawesome/fontawesome-svg-core": "^1.2.14",
12 |     "@fortawesome/free-solid-svg-icons": "^5.7.1",
13 |     "@fortawesome/vue-fontawesome": "^0.1.5",
14 |     "vue": "2.6.3",
15 |     "vue-global-events": "^1.1.0",
16 |     "vue-router": "^3.0.1"
17 |   },
18 |   "devDependencies": {
19 |     "@vue/cli-plugin-babel": "^3.1.1",
20 |     "@vue/cli-plugin-eslint": "^3.1.5",
21 |     "@vue/cli-service": "^3.4.0",
22 |     "@vue/eslint-config-standard": "^4.0.0",
23 |     "babel-eslint": "^10.0.1",
24 |     "eslint": "^5.8.0",
25 |     "eslint-plugin-vue": "^5.0.0",
26 |     "stylus": "^0.54.5",
27 |     "stylus-loader": "^3.0.2",
28 |     "vue-template-compiler": "2.6.3"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/views/ExampleTwo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>AppDropdown</h1>
 4 |     <AppDropdown>
 5 |       Learn more
 6 |       <div slot="content" class="content" slot-scope="{ setIsOpen }">
 7 |         <p>
 8 |           Dropdown can have different contents inside.<br/>
 9 |           You can even put more buttons inside if you want!
10 |         </p>
11 |         <AppButton @click="setIsOpen(false)">Close</AppButton>
12 |       </div>
13 |     </AppDropdown>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | import AppDropdown from '@/components/AppDropdown'
19 | import AppButton from '@/components/AppButton'
20 | 
21 | export default {
22 |   components: {
23 |     AppDropdown,
24 |     AppButton
25 |   },
26 |   methods: {
27 |     select (option, callback) {
28 |       callback()
29 |     }
30 |   }
31 | }
32 | </script>
33 | 
34 | <style lang="stylus" scoped>
35 | 
36 | .content
37 |   padding: 10px
38 |   margin: -20px 0 0
39 |   min-width: 250px
40 | </style>
41 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Home from './views/Home.vue'
 4 | import ExampleOne from './views/ExampleOne.vue'
 5 | import ExampleTwo from './views/ExampleTwo.vue'
 6 | import ExampleThree from './views/ExampleThree.vue'
 7 | import Dynamic from './views/Dynamic.vue'
 8 | 
 9 | Vue.use(Router)
10 | 
11 | export default new Router({
12 |   routes: [
13 |     {
14 |       path: '/',
15 |       name: 'home',
16 |       component: Home
17 |     },
18 |     {
19 |       path: '/example-one',
20 |       name: 'example-one',
21 |       component: ExampleOne
22 |     },
23 |     {
24 |       path: '/example-two',
25 |       name: 'example-two',
26 |       component: ExampleTwo
27 |     },
28 |     {
29 |       path: '/example-three',
30 |       name: 'example-three',
31 |       component: ExampleThree
32 |     },
33 |     {
34 |       path: '/dynamic',
35 |       name: 'dynamic',
36 |       component: Dynamic
37 |     }
38 |   ]
39 | })
40 | 


--------------------------------------------------------------------------------
/src/components/AppDropdown.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AppTooltip>
 3 |     <template
 4 |       slot="trigger"
 5 |       slot-scope="{ setIsOpen, isOpen }"
 6 |     >
 7 |       <AppButton @click.native="setIsOpen(!isOpen)">
 8 |         <GlobalEvents v-if="isOpen" @click="handleOutsideClick($event, setIsOpen)"/>
 9 |         <slot/>
10 |       </AppButton>
11 |     </template>
12 |     <div slot="content" slot-scope="{ setIsOpen, isOpen }">
13 |       <slot name="content" v-bind="{ setIsOpen }"/>
14 |     </div>
15 |   </AppTooltip>
16 | </template>
17 | 
18 | <script>
19 | import AppButton from './AppButton'
20 | import AppTooltip from './AppTooltip'
21 | import GlobalEvents from 'vue-global-events'
22 | 
23 | export default {
24 |   components: {
25 |     AppTooltip,
26 |     AppButton,
27 |     GlobalEvents
28 |   },
29 |   methods: {
30 |     handleOutsideClick (e, cb) {
31 |       if (!this.$el.contains(e.target)) cb()
32 |     }
33 |   }
34 | }
35 | </script>
36 | 
37 | <style lang="css">
38 | </style>
39 | 


--------------------------------------------------------------------------------
/src/components/AppSelect.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AppDropdown>
 3 |     <slot name="selected">some content {{ value }}</slot>
 4 |     <ul slot="content" class="content" slot-scope="{ setIsOpen }">
 5 |       <li
 6 |         v-for="(option, index) of options"
 7 |         :key="index"
 8 |         @click="update(option, setIsOpen)"
 9 |       >
10 |         <slot name="option" :option="option">{{ option }}</slot>
11 |       </li>
12 |     </ul>
13 |   </AppDropdown>
14 | </template>
15 | 
16 | <script>
17 | import AppDropdown from './AppDropdown'
18 | 
19 | export default {
20 |   components: {
21 |     AppDropdown
22 |   },
23 |   props: {
24 |     options: {
25 |       type: Array
26 |     },
27 |     value: {
28 |       type: [String, Object]
29 |     }
30 |   },
31 |   methods: {
32 |     update (option, cb) {
33 |       this.$emit('input', option)
34 |       cb()
35 |     }
36 |   }
37 | }
38 | </script>
39 | 
40 | <style lang="stylus" scoped>
41 | .content
42 |   list-style: none
43 |   padding: 0
44 |   margin: -10px
45 | 
46 |   li
47 |     border-bottom: 1px solid #f0f0f0
48 |     padding: 8px 14px
49 |     cursor: pointer
50 | 
51 |     &:hover
52 |       background: #f0f0f0
53 | </style>
54 | 


--------------------------------------------------------------------------------
/src/components/Layout.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="layout">
 3 |     <div class="header">
 4 |       <h2>header</h2>
 5 |       <slot name="header"/>
 6 |     </div>
 7 |     <div class="body">
 8 |       <div class="main">
 9 |         <h2>main</h2>
10 |         <slot name="main"/>
11 |       </div>
12 |       <div class="sidebar">
13 |         <h2>sidebar</h2>
14 |         <slot name="sidebar"/>
15 |       </div>
16 |     </div>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | export default {
22 | }
23 | </script>
24 | 
25 | <style lang="stylus" scoped>
26 | .layout
27 |   display: flex
28 |   flex-direction: column
29 |   margin: 50px
30 |   color: white
31 | 
32 |   h2
33 |     position: absolute
34 |     text-transform: uppercase
35 |     left: 20px
36 |     top: 20px
37 |     margin: 0
38 | 
39 | .header, .main, .sidebar
40 |   display: flex
41 |   position: relative
42 |   align-items: center;
43 |   justify-content: center;
44 | 
45 | .header
46 |   height: 200px
47 |   background: green
48 | 
49 | .body
50 |   display: flex
51 |   height: 400px
52 | 
53 | .sidebar
54 |   width: 200px
55 |   background: blue
56 | 
57 | .main
58 |   background: red
59 |   flex-grow: 1
60 | </style>
61 | 


--------------------------------------------------------------------------------
/src/components/AppTooltip.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <span class="tooltip">
 3 |     <slot name="trigger" v-bind="{ setIsOpen, isOpen }">
 4 |       <span
 5 |         @mouseenter="setIsOpen(true)"
 6 |         @mouseleave="setIsOpen(false)"
 7 |         class="tooltip-trigger"
 8 |       >
 9 |         <slot/>
10 |       </span>
11 |     </slot>
12 |     <div v-show="isOpen" class="tooltip-content">
13 |       <slot name="content" v-bind="{ setIsOpen, isOpen }"/>
14 |     </div>
15 |   </span>
16 | </template>
17 | 
18 | <script>
19 | export default {
20 |   data () {
21 |     return {
22 |       isOpen: false
23 |     }
24 |   },
25 |   methods: {
26 |     setIsOpen (isOpen) {
27 |       this.isOpen = isOpen
28 |     }
29 |   }
30 | }
31 | </script>
32 | 
33 | <style lang="stylus">
34 | .tooltip
35 |   position: relative
36 | 
37 | .tooltip-trigger
38 |   cursor: help
39 |   border-bottom: 1px dashed rgba(#000, 0.5)
40 | 
41 | .tooltip-content
42 |   position: absolute
43 |   z-index: 10
44 |   padding: 10px
45 |   min-width: 150px
46 |   text-align: left
47 |   background: #fafafa
48 |   box-shadow: 0 0 1px 1px rgba(#000, 0.15)
49 |   left: 0
50 |   bottom: -5px
51 |   transform: translateY(100%)
52 | </style>
53 | 


--------------------------------------------------------------------------------
/src/views/ExampleThree.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>AppSelect</h1>
 4 |     <AppSelect v-model="value" :options="options">
 5 |       <template #selected>
 6 |         {{ value.name || 'Select option' }}
 7 |         <AppIcon icon="chevron-down" style="margin-left: 10px;"/>
 8 |       </template>
 9 |       <template #option="{ option }">
10 |         <div class="option">
11 |           {{ option.name }}
12 |           <span style="margin-left: 20px">
13 |             <AppIcon icon="star" style="margin-right: 5px"/>{{ option.stars }}
14 |           </span>
15 |         </div>
16 |       </template>
17 |     </AppSelect>
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 | import AppSelect from '@/components/AppSelect'
23 | 
24 | export default {
25 |   components: {
26 |     AppSelect
27 |   },
28 |   data () {
29 |     return {
30 |       value: {},
31 |       options: [
32 |         { name: 'Vue-Multiselect', stars: '3904' },
33 |         { name: 'Vuelidate', stars: '3369' },
34 |         { name: 'Vue-Global-Events', stars: '342' }
35 |       ]
36 |     }
37 |   }
38 | }
39 | </script>
40 | 
41 | <style lang="stylus">
42 | .option
43 |   display: flex
44 |   justify-content: space-between
45 |   white-space: nowrap;
46 | </style>
47 | 


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