├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── img
    │   ├── bloodroot-leaf.jpg
    │   ├── cat-basking.jpg
    │   ├── frame.jpg
    │   ├── orange-blue-abstract.jpg
    │   └── red-tailed-hawk.jpg
    └── index.html
└── src
    ├── App.vue
    ├── components
        ├── FigureFunctionalRF.js
        ├── FigureFunctionalSFC.vue
        ├── FigureStandardRF.js
        └── FigureStandardSFC.vue
    └── main.js


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-functional
 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 | 


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


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


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabrown/vue-functional-examples/33713a4e2a9adaf054e82be2a52c9791c3181329/public/favicon.ico


--------------------------------------------------------------------------------
/public/img/bloodroot-leaf.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabrown/vue-functional-examples/33713a4e2a9adaf054e82be2a52c9791c3181329/public/img/bloodroot-leaf.jpg


--------------------------------------------------------------------------------
/public/img/cat-basking.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabrown/vue-functional-examples/33713a4e2a9adaf054e82be2a52c9791c3181329/public/img/cat-basking.jpg


--------------------------------------------------------------------------------
/public/img/frame.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabrown/vue-functional-examples/33713a4e2a9adaf054e82be2a52c9791c3181329/public/img/frame.jpg


--------------------------------------------------------------------------------
/public/img/orange-blue-abstract.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabrown/vue-functional-examples/33713a4e2a9adaf054e82be2a52c9791c3181329/public/img/orange-blue-abstract.jpg


--------------------------------------------------------------------------------
/public/img/red-tailed-hawk.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabrown/vue-functional-examples/33713a4e2a9adaf054e82be2a52c9791c3181329/public/img/red-tailed-hawk.jpg


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-functional</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-functional 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 |     <FigureStandardSFC
  4 |       src="cat-basking.jpg"
  5 |       type="post-it"
  6 |       :tags="['cat','feline','fuzzy','gray']"
  7 |       @click="alertHello">Cat basking in the sun.</FigureStandardSFC>
  8 | 
  9 |     <FigureStandardRF
 10 |       src="red-tailed-hawk.jpg"
 11 |       type="modern"
 12 |       :tags="['bird','hawk','raptor']"
 13 |       @click="alertHello">Red-tailed hawk.</FigureStandardRF>
 14 | 
 15 |     <FigureFunctionalRF
 16 |       src="orange-blue-abstract.jpg"
 17 |       type="eighties"
 18 |       :tags="['orange','blue','abstract', 'metal']"
 19 |       @click="alertGoodbye">
 20 |         Orange circle, blue square.
 21 |       </FigureFunctionalRF>
 22 | 
 23 |     <FigureFunctionalSFC 
 24 |       src="bloodroot-leaf.jpg" 
 25 |       type="framed" 
 26 |       :tags="['leaf','plant','forest','green']"
 27 |       @click="alertGoodbye">Bloodroot leaf.</FigureFunctionalSFC>
 28 |   </div>
 29 | </template>
 30 | 
 31 | <script>
 32 | import FigureStandardSFC from "./components/FigureStandardSFC.vue";
 33 | import FigureFunctionalSFC from "./components/FigureFunctionalSFC.vue";
 34 | import FigureStandardRF from "./components/FigureStandardRF.js";
 35 | import FigureFunctionalRF from "./components/FigureFunctionalRF.js";
 36 | 
 37 | export default {
 38 |   name: "app",
 39 |   components: {
 40 |     FigureStandardSFC,
 41 |     FigureFunctionalSFC,
 42 |     FigureStandardRF,
 43 |     FigureFunctionalRF
 44 |   },
 45 |   methods: {
 46 |     alertHello(){
 47 |       alert("HELLO!")
 48 |     },
 49 |     alertGoodbye(){
 50 |       alert("Bye.")
 51 |     }
 52 |   }
 53 | };
 54 | </script>
 55 | 
 56 | <style>
 57 |   body {
 58 |     font-family: HelveticaNeue, sans-serif;
 59 |   }
 60 |   * {
 61 |     box-sizing: border-box;
 62 |   }
 63 |   #app {
 64 |     display: grid;
 65 |     grid-template-columns: repeat(2, 1fr);
 66 |     font-size: 1.2em;
 67 |     grid-gap: 4vw;
 68 |     margin: 4vw;
 69 |   }
 70 |   figure {
 71 |     position: relative;
 72 |     margin: 0;
 73 |     padding: 0;
 74 |   }
 75 |   img {
 76 |     max-width: 100%;
 77 |     display: block;
 78 |   }
 79 |   figcaption {
 80 |     position: absolute;
 81 |   }
 82 |   .tags {
 83 |     position: absolute;
 84 |     top: .2em;
 85 |     right: .2em;
 86 |     font-size: smaller;
 87 |     color: #FFF;
 88 |   }
 89 |   .tags span {
 90 |     background: rgba(255,255,255,0.3);
 91 |     padding: .1em .3em;
 92 |     margin-left: .3em;
 93 |   }
 94 |   .modern {
 95 |     box-shadow: 0 8px 20px rgba(0,0,0,0.3);
 96 |   }
 97 |   .modern figcaption {
 98 |     bottom: 0;
 99 |     width: 100%;
100 |     padding: .5em;
101 |     color: #FFF;
102 |     background: rgba(0,0,0,.8);
103 |   }
104 |   .post-it {
105 |     box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
106 |     transform: rotate(2deg);
107 |   }
108 |   .post-it figcaption {
109 |     width: 10em;
110 |     height: 6em;
111 |     bottom: 2em;
112 |     right: 2em;
113 |     padding: .5em;
114 |     font-family: "Bradley Hand", "Comic Sans", fantasy;
115 |     text-align: center;
116 |     background: yellow;
117 |     box-shadow: 1px 1px 3px rgba(0,0,0,.5);
118 |     transform: rotate(-7deg);
119 |   }
120 |   .eighties figcaption {
121 |     top: 80%;
122 |     left: -30px;
123 |     font-size: 2em;
124 |     font-family: "Impact", sans-serif;
125 |     transform: skew(-13deg);
126 |     text-indent: .5em;
127 |   }
128 |   .eighties figcaption span {
129 |     background: #4276c7;
130 |     color: #FFF;
131 |     padding: 0 .5em;
132 |   }
133 |   .framed img{
134 |     border: 67px solid #dcdbcb;
135 |     border-image: url("/img/frame.jpg") 67 round round;
136 |   }
137 |   .framed figcaption {
138 |     bottom: 38px;
139 |     width: 100%;
140 |     text-align: center;
141 |     font-size: smaller;
142 |   }
143 |   .framed figcaption span {
144 |     background: linear-gradient(to right, #b9a704e3, #d6cc7d, #b9a704e3);
145 |     padding: .2em 0;
146 |     border-radius: 0.7em;
147 |     box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
148 |   }
149 |   .framed figcaption span:before,
150 |   .framed figcaption span:after {
151 |     content: "•";
152 |     margin: 0 1em;
153 |     color: #a29422;
154 |   }
155 | </style>
156 | 


--------------------------------------------------------------------------------
/src/components/FigureFunctionalRF.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   functional: true,
 3 |   props: {
 4 |     src: {
 5 |       required: true,
 6 |       type: String
 7 |     },
 8 |     type: {
 9 |       required: true,
10 |       type: String
11 |     },
12 |     tags: {
13 |       required: false,
14 |       type: Array
15 |     }
16 |   },
17 |   render(createElement, {props, listeners, slots}){
18 | 
19 |     const img = createElement(
20 |       'img',
21 |       {
22 |         'attrs': {
23 |           'src': props.src
24 |         }
25 |       }
26 |     )
27 | 
28 |     const caption = slots().default ? createElement(
29 |       'figcaption',
30 |       [ createElement('span', slots().default) ]
31 |     ) : ''
32 | 
33 |     const tags = props.tags && (props.type != 'framed') ? createElement(
34 |       'div',
35 |       {'class' : 'tags'},
36 |       props.tags.map(function (tag) {
37 |         return createElement('span', tag)
38 |       })
39 |     ) : ''
40 | 
41 |     return createElement( 
42 |       'figure', 
43 |       {
44 |         'class': props.type,
45 |         'on' : {
46 |           'click': listeners.click
47 |         }
48 |       },
49 |       [img, caption, tags]
50 |     )
51 |   }
52 | }


--------------------------------------------------------------------------------
/src/components/FigureFunctionalSFC.vue:
--------------------------------------------------------------------------------
 1 | <template functional>
 2 |   <figure :class="props.type" v-on:click="listeners.click">
 3 |     <img :src="props.src" />
 4 |     <figcaption v-if="slots().default">
 5 |       <span><slot></slot></span>
 6 |     </figcaption>
 7 |     <div class="tags" v-if="props.tags && props.type != 'framed'">
 8 |       <span v-for="tag in props.tags"> {{ tag }}</span>
 9 |     </div>
10 |   </figure>
11 | </template>
12 | 
13 | <script>
14 |   export default {
15 |     name: 'FigureFunctionalSFC',
16 |     props: {
17 |       src: {
18 |         required: true,
19 |         type: String
20 |       },
21 |       type: {
22 |         required: true,
23 |         type: String
24 |       },
25 |       tags: {
26 |         required: false,
27 |         type: Array
28 |       }
29 |     }
30 |   }
31 | </script>
32 | 


--------------------------------------------------------------------------------
/src/components/FigureStandardRF.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 | 
 3 |   props: {
 4 |     src: {
 5 |       required: true,
 6 |       type: String
 7 |     },
 8 |     type: {
 9 |       required: true,
10 |       type: String
11 |     },
12 |     tags: {
13 |       required: false,
14 |       type: Array
15 |     }
16 |   },
17 |   render(createElement){
18 | 
19 |     const img = createElement(
20 |       'img',
21 |       {
22 |         'attrs': {
23 |           'src': this.src
24 |         }
25 |       }
26 |     )
27 | 
28 |     const caption = this.$slots.default ? createElement(
29 |       'figcaption',
30 |       [ createElement('span', this.$slots.default) ]
31 |     ) : ''
32 | 
33 |     const tags = this.tags && (this.type != 'framed') ? createElement(
34 |       'div',
35 |       {'class' : 'tags'},
36 |       this.tags.map(function (tag) {
37 |         return createElement('span', tag)
38 |       })
39 |     ) : ''
40 |     
41 |     return createElement(
42 |       'figure', 
43 |       {
44 |         'class': this.type,
45 |         'on': {
46 |           'click' : () => {
47 |             this.$emit('click')
48 |           }
49 |         }
50 |       },
51 |       [img, caption, tags]
52 |     )
53 |   }
54 | }


--------------------------------------------------------------------------------
/src/components/FigureStandardSFC.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <figure :class="type" v-on:click="$emit('click')">
 3 |     <img :src="src" />
 4 |     <figcaption v-if="$slots.default">
 5 |       <span><slot></slot></span>
 6 |     </figcaption>
 7 |     <div class="tags" v-if="tags && type != 'framed'">
 8 |       <span v-for="tag in tags"> {{ tag }}</span>
 9 |     </div>
10 |   </figure>
11 | </template>
12 | 
13 | <script>
14 |   export default {
15 |     name: 'FigureStandardSFC',
16 |     props: {
17 |       src: {
18 |         required: true,
19 |         type: String
20 |       },
21 |       type: {
22 |         required: true,
23 |         type: String
24 |       },
25 |       tags: {
26 |         required: false,
27 |         type: Array
28 |       }
29 |     }
30 |   }
31 | </script>
32 | 


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


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