├── .gitignore
├── config.js
├── README.md
├── src
    ├── components
    │   ├── SelectAllDirective.js
    │   ├── Highlight.js
    │   ├── shortener.js
    │   ├── compiler.js
    │   ├── MenuToggler.vue
    │   ├── CodeMirror.js
    │   ├── SplitPane.vue
    │   └── GithubRibbon.vue
    ├── index.js
    ├── app.js
    ├── samples.js
    ├── index.html
    └── style.css
├── webpack.config.js
├── package.json
├── yarn.lock
└── docs
    ├── client.fe1e06d6.css
    ├── client.f0b8de34.js
    └── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules/
2 | /vue-web-compiler/
3 | 


--------------------------------------------------------------------------------
/config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   html: {
3 |     template: __dirname + '/src/index.html'
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Browser based Vue.js compiler
2 | 
3 | https://vuejs-tips.github.io/compiler/
4 | 
5 | 
6 | Type html on the left and see the resulting javascript on the right
7 | 


--------------------------------------------------------------------------------
/src/components/SelectAllDirective.js:
--------------------------------------------------------------------------------
1 | export default function (el) {
2 |   ['focus', 'mouseup', 'keyup'].map(type => {
3 |     el.addEventListener(type, evt => {
4 |       evt.target.select()
5 |       evt.preventDefault()
6 |     })
7 |   })
8 | }
9 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | // Throw error message as Exception, so I can catch Vue compilation errors
 2 | console.error = function (msg) {throw msg}
 3 | 
 4 | // Vue.config.devtools = true
 5 | // Vue.config.debug = true
 6 | 
 7 | import './app'
 8 | import './style.css'
 9 | 
10 | import Clipboard from 'clipboard/dist/clipboard'
11 | new Clipboard('.copy')
12 | 


--------------------------------------------------------------------------------
/src/components/Highlight.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   template: '<pre><code class="javascript"></code></pre>',
 3 |   props: ['code'],
 4 |   mounted () {
 5 |     this.refresh()
 6 |   },
 7 |   watch: {
 8 |     code () {
 9 |       this.refresh()
10 |     }
11 |   },
12 |   methods: {
13 |     refresh () {
14 |       var codeTag = this.$el.querySelector('code')
15 |       codeTag.innerHTML = this.code
16 |       hljs.highlightBlock(codeTag)
17 |     }
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/components/shortener.js:
--------------------------------------------------------------------------------
 1 | // Safari 10 and mobile devices doesn't support fetch: http://caniuse.com/#search=fetch
 2 | export default function shortener(url) {
 3 |   return fetch('https://www.googleapis.com/urlshortener/v1/url?key=AIzaSyA20hdW0mgN9sdnfdMvKF0S63-QxwfazAU', {
 4 |     method:'POST',
 5 |     body: `{"longUrl": "${url}"}`,
 6 |     mode: 'cors',
 7 |     headers: {'Content-Type': 'application/json'}
 8 |   })
 9 |   .then(response => response.json())
10 |   .then(json => json.id)
11 | }
12 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require.main.require('webpack')
 2 | const HtmlWebpackPlugin = require.main.require('html-webpack-plugin')
 3 | const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
 4 | 
 5 | module.exports = {
 6 |   devtool: false,
 7 |   output: {
 8 |     publicPath: '' // same path as online version
 9 |   },
10 |   plugins: [
11 |     new webpack.DefinePlugin({
12 |       'process.env.VERSION': JSON.stringify(require('./package.json').version)
13 |     }),
14 |     new HtmlWebpackPlugin({
15 |       template: './src/index.html',
16 |       inlineSource: '.(js|css)$' // embed all javascript and css inline
17 |     }),
18 |     new HtmlWebpackInlineSourcePlugin()
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/src/components/compiler.js:
--------------------------------------------------------------------------------
 1 | export default function compile (code) {
 2 |   code = code.replace(/\s*\n+\s*/g, ' ') // collapse whitespaces
 3 |   code = code.replace(/>\s+/g, '>').replace(/\s+</g, '<') // collapse whitespaces between close/open tags
 4 |   code = Vue.compile(code) // https://vuejs.org/v2/api/#Vue-compile
 5 |   // https://vuejs.org/v2/guide/render-function.html#Template-Compilation
 6 |   code = code.staticRenderFns.toString().replace(/^function anonymous/, 'function staticRenderFns')
 7 |        + "\n"
 8 |        + code.render.toString().replace(/^function anonymous/, 'function render')
 9 |   // http://jsbeautifier.org/
10 |   code = js_beautify(code, {wrap_line_length: 80, break_chained_methods: true})
11 | 
12 |   return code
13 | }
14 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-web-compiler",
 3 |   "version": "0.5.0",
 4 |   "description": "Vue.js template compiler playground",
 5 |   "main": "src/index.js",
 6 |   "author": "Marcos Neves <marcos.neves@gmail.com> (https://medium.com/vuejs-tips)",
 7 |   "license": "MIT",
 8 |   "keywords": [
 9 |     "vue",
10 |     "compiler",
11 |     "template",
12 |     "playground"
13 |   ],
14 |   "scripts": {
15 |     "start": "vue build src/index.js --config config.js",
16 |     "compile": "yarn build -- --disable-compress",
17 |     "build": "vue build src/index.js --config config.js --webpack webpack.config.js --dist ./docs/ --prod",
18 |     "deploy": "npm version minor; yarn build",
19 |     "serve": "open 'http://localhost:3000/'; serve ./docs/",
20 |     "upgrade:check": "ncu",
21 |     "upgrade:apply": "ncu -a"
22 |   },
23 |   "devDependencies": {
24 |     "html-webpack-inline-source-plugin": "^0.0.8"
25 |   },
26 |   "dependencies": {
27 |     "clipboard": "^1.6.1"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/components/MenuToggler.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg class="inline-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="30px" viewBox="0 0 24 30" enable-background="new 0 0 32 22.5" xml:space="preserve">
 3 |     <g class="svg-menu-toggle">
 4 |       <path class="bar" d="M20.945,8.75c0,0.69-0.5,1.25-1.117,1.25H3.141c-0.617,0-1.118-0.56-1.118-1.25l0,0c0-0.69,0.5-1.25,1.118-1.25h16.688C20.445,7.5,20.945,8.06,20.945,8.75L20.945,8.75z"></path>
 5 |       <path class="bar" d="M20.923,15c0,0.689-0.501,1.25-1.118,1.25H3.118C2.5,16.25,2,15.689,2,15l0,0c0-0.689,0.5-1.25,1.118-1.25 h16.687C20.422,13.75,20.923,14.311,20.923,15L20.923,15z"></path>
 6 |       <path class="bar" d="M20.969,21.25c0,0.689-0.5,1.25-1.117,1.25H3.164c-0.617,0-1.118-0.561-1.118-1.25l0,0c0-0.689,0.5-1.25,1.118-1.25h16.688C20.469,20,20.969,20.561,20.969,21.25L20.969,21.25z"></path>
 7 |       <rect width="24" height="30" fill="none"></rect><!-- needs to be here as a 'hit area' -->
 8 |     </g>
 9 |   </svg>
10 | </template>
11 | 


--------------------------------------------------------------------------------
/src/components/CodeMirror.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   template: '<div></div>',
 3 |   props: ['value'],
 4 |   mounted () {
 5 |     // convert textarea to syntax highlight editor http://codemirror.net/
 6 |     var editor = CodeMirror(this.$el, {
 7 |       value: this.value,
 8 |       mode: "text/html", // https://github.com/codemirror/CodeMirror/blob/5.24.0/mode/xml/index.html#L41
 9 |       theme: 'material', // https://codemirror.net/demo/theme.html#material
10 |       tabSize: 2 // http://codemirror.net/doc/manual.html#config
11 |     })
12 | 
13 |     // fix cursor position after google font family has loaded
14 |     // https://github.com/codemirror/CodeMirror/issues/3764#issuecomment-171560662
15 |     window.addEventListener('load', function () {
16 |       editor.getWrapperElement().style.fontSize = '16px'
17 |       editor.refresh()
18 |     })
19 | 
20 |     editor.on('change', cm => this.$emit('input', cm.getValue()))
21 |     this.editor = editor
22 |   },
23 |   watch: {
24 |     value (val) {
25 |       if (val === this.editor.getValue()) return // changed from inside
26 |       this.editor.setValue(val)
27 |     }
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/components/SplitPane.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="split-pane"
 3 |     @mousemove="dragMove"
 4 |     @mouseup="dragEnd"
 5 |     @mouseleave="dragEnd"
 6 |     :class="{ dragging: dragging }">
 7 |     <div class="left" :style="{ width: split + '%' }">
 8 |       <slot name="left"></slot>
 9 |       <div class="dragger" @mousedown="dragStart">
10 |       </div>
11 |     </div>
12 |     <div class="right" :style="{ width: (100 - split) + '%' }">
13 |       <slot name="right"></slot>
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | export default {
20 |   data () {
21 |     return {
22 |       split: 50,
23 |       dragging: false
24 |     }
25 |   },
26 |   methods: {
27 |     dragStart (e) {
28 |       this.dragging = true
29 |       this.startX = e.pageX
30 |       this.startSplit = this.split
31 |     },
32 |     dragMove (e) {
33 |       if (this.dragging) {
34 |         const dx = e.pageX - this.startX
35 |         const totalWidth = this.$el.offsetWidth
36 |         this.split = this.startSplit + ~~(dx / totalWidth * 100)
37 |       }
38 |     },
39 |     dragEnd () {
40 |       this.dragging = false
41 |     }
42 |   }
43 | }
44 | </script>
45 | 
46 | <style scoped>
47 | .split-pane {
48 | 	display: flex;
49 | 	height: 100%;
50 |   width: 100%;
51 | }
52 | 
53 | .split-pane.dragging {
54 | 	cursor: ew-resize;
55 | }
56 | 
57 | .left, .right {
58 | 	position: relative;
59 |   width: 100%;
60 | }
61 | 
62 | .left {
63 | 	border-right: 1px solid #333;
64 | }
65 | 
66 | .dragger {
67 | 	position: absolute;
68 | 	z-index: 99;
69 | 	top: 0;
70 | 	bottom: 0;
71 | 	right: -5px;
72 | 	width: 10px;
73 | 	cursor: ew-resize;
74 | }
75 | </style>
76 | 


--------------------------------------------------------------------------------
/yarn.lock:
--------------------------------------------------------------------------------
 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 2 | # yarn lockfile v1
 3 | 
 4 | 
 5 | clipboard@^1.6.1:
 6 |   version "1.6.1"
 7 |   resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-1.6.1.tgz#65c5b654812466b0faab82dc6ba0f1d2f8e4be53"
 8 |   dependencies:
 9 |     good-listener "^1.2.0"
10 |     select "^1.1.2"
11 |     tiny-emitter "^1.0.0"
12 | 
13 | delegate@^3.1.2:
14 |   version "3.1.2"
15 |   resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.1.2.tgz#1e1bc6f5cadda6cb6cbf7e6d05d0bcdd5712aebe"
16 | 
17 | escape-string-regexp@^1.0.5:
18 |   version "1.0.5"
19 |   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
20 | 
21 | good-listener@^1.2.0:
22 |   version "1.2.2"
23 |   resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
24 |   dependencies:
25 |     delegate "^3.1.2"
26 | 
27 | html-webpack-inline-source-plugin@^0.0.8:
28 |   version "0.0.8"
29 |   resolved "https://registry.yarnpkg.com/html-webpack-inline-source-plugin/-/html-webpack-inline-source-plugin-0.0.8.tgz#245c0f33e14e017c224d61dbdb74ac58536596c2"
30 |   dependencies:
31 |     escape-string-regexp "^1.0.5"
32 |     slash "^1.0.0"
33 |     source-map-url "^0.4.0"
34 | 
35 | select@^1.1.2:
36 |   version "1.1.2"
37 |   resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
38 | 
39 | slash@^1.0.0:
40 |   version "1.0.0"
41 |   resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
42 | 
43 | source-map-url@^0.4.0:
44 |   version "0.4.0"
45 |   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
46 | 
47 | tiny-emitter@^1.0.0:
48 |   version "1.1.0"
49 |   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-1.1.0.tgz#ab405a21ffed814a76c19739648093d70654fecb"
50 | 


--------------------------------------------------------------------------------
/src/components/GithubRibbon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <a href="https://github.com/vuejs-tips/compiler"
 3 |      class="github-corner"
 4 |      aria-label="View source on Github">
 5 |     <svg width="80"
 6 |          height="80"
 7 |          viewBox="0 0 250 250"
 8 |          style="fill:#333333; color:#fff; position: absolute; top: 0; border: 0; right: 0;"
 9 |          aria-hidden="true">
10 |       <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
11 |       <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
12 |             fill="currentColor"
13 |             style="transform-origin: 130px 106px;"
14 |             class="octo-arm">
15 |       </path>
16 |       <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
17 |             fill="currentColor"
18 |             class="octo-body">
19 |       </path>
20 |     </svg>
21 |   </a>
22 | </template>
23 | 
24 | <style scoped>
25 | .github-corner {
26 |   z-index: 1;
27 | }
28 | .github-corner:hover .octo-arm {
29 |   animation: octocat-wave 560ms ease-in-out
30 | }
31 | 
32 | @keyframes octocat-wave {
33 |   0%, 100% {
34 |     transform: rotate(0)
35 |   }
36 |   20%, 60% {
37 |     transform: rotate(-25deg)
38 |   }
39 |   40%, 80% {
40 |     transform: rotate(10deg)
41 |   }
42 | }
43 | 
44 | @media (max-width:500px) {
45 |   .github-corner:hover .octo-arm {
46 |     animation: none
47 |   }
48 |   .github-corner .octo-arm {
49 |     animation: octocat-wave 560ms ease-in-out
50 |   }
51 | }
52 | </style>
53 | 


--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
 1 | import samples from './samples'
 2 | import CodeMirror from './components/CodeMirror'
 3 | import Highlight from './components/Highlight'
 4 | import compile from './components/compiler'
 5 | import shortener from './components/shortener'
 6 | import GithubRibbon from './components/GithubRibbon.vue'
 7 | import MenuToggler from './components/MenuToggler.vue'
 8 | import SplitPane from './components/SplitPane.vue'
 9 | 
10 | var urlParam = decodeURI(location.hash.substr(1))
11 | var input = urlParam ? samples[urlParam] || atob(urlParam) : localStorage.getItem('input') || '<div></div>'
12 | 
13 | new Vue({
14 |   el: '#app',
15 |   components: {CodeMirror, Highlight, GithubRibbon, MenuToggler, SplitPane},
16 | 
17 |   data: {
18 |     input: input, // restore after refresh
19 |     filter: '',
20 |     error: '',
21 |     code: '',
22 |     vueVersion: Vue.version,
23 |     version: process.env.VERSION,
24 |     samples,
25 |     showMenu: !!samples[urlParam],
26 |     selectedMenu: urlParam,
27 |     shortUrl: ''
28 |   },
29 | 
30 |   computed: {
31 |     filteredSamples () {
32 |       if (this.filter === '') {
33 |         return this.samples
34 |       } else {
35 |         var samples = {}
36 |         for (let label in this.samples) {
37 |           var code = this.samples[label].toLowerCase()
38 |           if (code.match(this.filter.toLowerCase()) || label.toLowerCase().match(this.filter.toLowerCase())) {
39 |             samples[label] = code
40 |           }
41 |         }
42 |         return samples
43 |       }
44 |     },
45 | 
46 |     compiled () {
47 |       try {
48 |         this.code = compile(this.input)
49 |         this.error = '' // clear error if compiled
50 |         localStorage.setItem('input', this.input) // keep code changes after refresh
51 |       } catch (e) {
52 |         this.error = e.toString()
53 |       }
54 | 
55 |       return this.code
56 |     },
57 | 
58 |     url () {
59 |       return location.protocol + '//' + location.host + location.pathname
60 |     },
61 | 
62 |     shareUrl () {
63 |       return this.url + '#' + btoa(this.input)
64 |     }
65 |   },
66 | 
67 |   methods: {
68 |     select (label) {
69 |       this.input = samples[label]
70 |       this.selectedMenu = label
71 |     },
72 | 
73 |     share () {
74 |       this.shortUrl = this.shareUrl
75 |       shortener(this.shareUrl).then(url => this.shortUrl = url)
76 |     }
77 |   },
78 | })
79 | 


--------------------------------------------------------------------------------
/src/samples.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     'custom': '<!-- type your html here -->',
 3 |     'sync': '<comp :foo.sync="bar"></comp>',
 4 |     'v-model': '<name-input v-model="fullName"></name-input>',
 5 |     'v-model_input': '<input v-model="fullName">',
 6 |     'v-model_textarea': `<!-- same as input -->\n<textarea v-model="fullName"></textarea>`,
 7 |     'v-model_checkbox': '<input v-model="fullName" type="checkbox">',
 8 |     'v-model_radio': '<input v-model="fullName" type="radio">',
 9 |     'v-model_select': '<select v-model="fullName"></select>',
10 |     'v-model.trim': '<input v-model.trim="fullName">',
11 |     'v-model.lazy': '<input v-model.lazy="fullName">',
12 |     'v-model.number': '<input type="number" v-model.number="price">',
13 |     'v-on': '<input v-on:input="update">',
14 |     'v-on-event': '<input v-on:input="update($event)">',
15 |     'v-on.prevent': '<input v-on:input.prevent="update">',
16 |     'v-on.native': '<input v-on:input.native="update">',
17 |     'v-on_filter': `<!-- filters does not work with v-on -->\n<input v-on:input="update | debounce(500)">`,
18 |     'v-bind_filter': '<textarea v-bind:value="message | truncate(140)"></textarea>',
19 |     'v-bind': '<input v-bind:placeholder="inputMessage">',
20 |     'v-pre': `<textarea v-pre>{{noCompilation}}</textarea>`,
21 |     'v-cloak': `<div v-cloak></div>`,
22 |     'v-once': `<div v-once></div>`,
23 |     'v-text': `<span v-text="msg"></span>`,
24 |     'v-html': `<div v-html="html"></div>`,
25 |     'v-show': '<a v-show="signedIn">logout</a>',
26 |     'v-if': '<a v-if="signedIn">logout</a>',
27 |     'v-else': `<nav>
28 |   <a v-if="signedIn">logout</a>
29 |   <a v-else>login</a>
30 | </nav>
31 | `,
32 | 
33 |   'v-else-if': `<div v-if="type === 'A'">
34 |   A
35 | </div>
36 | <div v-else-if="type === 'B'">
37 |   B
38 | </div>
39 | <div v-else-if="type === 'C'">
40 |   C
41 | </div>
42 | <div v-else>
43 |   Not A/B/C
44 | </div>`,
45 | 
46 | 'v-for': `<ul><!-- v-for can't be the root element -->
47 |   <li v-for="todo, index in todos">
48 |     {{todo.label}}
49 |   </li>
50 | </ul>
51 | `,
52 | 
53 |   'slot': `<div>
54 |   <slot>
55 |     content
56 |   </slot>
57 |   <slot name="footer">
58 |     copyright
59 |   </slot>
60 | </div>`,
61 | 
62 |   'slot-scoped': `<div class="parent">
63 |   <child>
64 |     <template scope="props">
65 |       <span>hello from parent</span>
66 |       <span>{{ props.text }}</span>
67 |     </template>
68 |   </child>
69 | </div>`,
70 | 
71 |   'inline-template': `<my-component inline-template>
72 |   <div>
73 |     content
74 |   </div>
75 | </my-component>`,
76 | 
77 |   'component-is': `<component is="OtherComponent"></component>`
78 | }
79 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <!-- vendors -->
 6 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro">
 7 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/atom-one-dark.min.css">
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.24.2/codemirror.min.css">
 9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.24.2/theme/material.min.css">
10 |   </head>
11 |   <body>
12 | 
13 |     <div id="app" class="fb-column" v-cloak>
14 |       <github-ribbon></github-ribbon>
15 |       <header>
16 |         <menu-toggler @click.native="showMenu = !showMenu" :class="{active: showMenu}"></menu-toggler>
17 |         <!-- <a id="share" :href="shareUrl" target="_blank">share this example</a> -->
18 |         <div>
19 |           <button @click="share">share this example</button>
20 |           <span v-show="shortUrl">
21 |             <input id="url" type="text" :value="shortUrl" readonly @focus="$event.target.select()" style="width: 130px">
22 |             <button class="copy" data-clipboard-target="#url">copy</button>
23 |           </span>
24 |         </div>
25 |         <span id="version" :title="version">Vue.js {{vueVersion}}</span>
26 |       </header>
27 | 
28 |       <div class="fb-row">
29 |         <nav class="menu" :class="{showing: showMenu}">
30 |           <ul>
31 |             <li>
32 |               <input type="search" v-model.trim="filter" placeholder="type your search here" />
33 |             </li>
34 |             <li v-for="code, label in filteredSamples" :class="{active: label === selectedMenu}">
35 |               <a :href="'#' + encodeURI(label)" @click="select(label)">
36 |                 {{label}}
37 |               </a>
38 |             </li>
39 |           </ul>
40 |         </nav>
41 |         <split-pane>
42 |           <div slot="left" class="fb-grow"><!-- Vue HTML editor -->
43 |             <code-mirror id="code" v-model="input"></code-mirror>
44 |             <div id="error" v-show="error">{{error}}</div>
45 |           </div>
46 | 
47 |           <div slot="right" class="fb-grow"><!-- Compiled Javascript Render Functions -->
48 |             <highlight id="output" :code="compiled"></highlight>
49 |           </div>
50 |         </split-pane>
51 |       </div>
52 |     </div>
53 | 
54 |     <!-- vendors -->
55 |     <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
56 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.9/beautify.min.js"></script>
57 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
58 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/javascript.min.js"></script>
59 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.24.2/codemirror.min.js"></script>
60 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.24.2/mode/xml/xml.min.js"></script>
61 | 
62 |     <script>
63 |       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
64 |       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
65 |       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
66 |       })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
67 |       ga('create', 'UA-183197-49', 'auto');
68 |       ga('send', 'pageview');
69 |     </script>
70 |   </body>
71 | </html>
72 | 


--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   box-sizing: border-box;
  3 | }
  4 | *,
  5 | *::before,
  6 | *::after {
  7 |   box-sizing: inherit;
  8 | }
  9 | html, body {
 10 |   margin: 0;
 11 | }
 12 | header {
 13 |   padding: 0 10px;
 14 |   display: flex;
 15 |   align-items: center;
 16 |   justify-content: space-between;
 17 |   height: 30px;
 18 |   background-color: #333;
 19 |   color: white;
 20 | }
 21 | header > * {
 22 | }
 23 | .fb-column {
 24 |   display: flex;
 25 |   flex-direction: column;
 26 |   align-items: stretch;
 27 | }
 28 | .fb-row {
 29 |   display: flex;
 30 |   flex-direction: row;
 31 |   align-items: stretch;
 32 | }
 33 | .fb-grow {
 34 |   display: flex;
 35 |   flex-grow: 1;
 36 |   width: 100%;
 37 |   flex-direction: column;
 38 | }
 39 | #code {
 40 |   flex-grow: 1;
 41 |   display: flex;
 42 |   flex-direction: column;
 43 |   cursor: text;
 44 |   flex-basis: 100%;
 45 | }
 46 | .CodeMirror {
 47 |   flex-grow: 1;
 48 | }
 49 | pre {
 50 |   margin: 0;
 51 | 
 52 | }
 53 | 
 54 | html, body, pre, code, #app, .fb-row, .fb-grow {
 55 |   height: 100%;
 56 | }
 57 | 
 58 | #output {
 59 |   cursor: default;
 60 |   flex-grow: 1;
 61 |   background-color: #282c34;
 62 | }
 63 | 
 64 | #error {
 65 |   position: absolute;
 66 |   bottom: 0;
 67 |   color: white;
 68 |   background-color: red;
 69 |   padding: 5px;
 70 | }
 71 | 
 72 | #error, textarea, code, .CodeMirror {
 73 |   font-family: 'Source Code Pro', monospace;
 74 |   font-size: 16px;
 75 | }
 76 | ol,
 77 | ul {
 78 |   list-style: none;
 79 |   margin: 0;
 80 |   padding: 0;
 81 | }
 82 | nav.menu {
 83 |   background-color: #fafafa;
 84 |   width: 150px;
 85 |   min-width: 150px;
 86 |   max-width: 150px;
 87 |   margin-left: -150px;
 88 |   transition: margin-left 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
 89 |   overflow-y: auto;
 90 |   padding-bottom: 20px;
 91 | }
 92 | 
 93 | nav.menu li {
 94 |   padding: 5px;
 95 |   border-bottom: 1px solid #ddd;
 96 | }
 97 | 
 98 | nav.menu a {
 99 |   text-decoration: none;
100 |   color: #444;
101 |   display: block;
102 | }
103 | 
104 | nav.menu li:hover {
105 |   background-color: #ccc;
106 | }
107 | 
108 | nav.menu li.active {
109 |   background-color: #efe;
110 |   font-weight: bold;
111 | }
112 | 
113 | nav.menu.showing {
114 |   margin-left: 0;
115 | }
116 | [v-cloak] {
117 |   display: none;
118 | }
119 | 
120 | #version {
121 |   margin-right: 70px;
122 | }
123 | 
124 | #share {
125 |   color: #ccc;
126 |   text-decoration: none;
127 | }
128 | 
129 | #share:hover {
130 |   color: white;
131 | }
132 | 
133 | input {
134 |   outline: none;
135 |   border-radius: 6px;
136 |   border: 1px solid silver;
137 |   height: 25px;
138 |   line-height: 25px;
139 |   font-size: 0.7em;
140 |   display: block;
141 |   width: 100%;
142 |   padding: 4px;
143 | }
144 | /* hamburger svg menu */
145 | 
146 | .svg-menu-toggle:hover {
147 |   fill: #fff;
148 | }
149 | 
150 | .svg-menu-toggle {
151 |   fill: #ccc;
152 |   pointer-events: all;
153 |   cursor: pointer;
154 | }
155 | .svg-menu-toggle .bar {
156 |   -webkit-transform: rotate(0) translateY(0) translateX(0);
157 |   transform: rotate(0) translateY(0) translateX(0);
158 |   opacity: 1;
159 |   -webkit-transform-origin: 20px 10px;
160 |   transform-origin: 20px 10px;
161 |   -webkit-transition: -webkit-transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
162 |   transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
163 | }
164 | .svg-menu-toggle .bar:nth-of-type(1) {
165 |   -webkit-transform-origin: 20px 10px;
166 |   transform-origin: 20px 10px;
167 | }
168 | .svg-menu-toggle .bar:nth-of-type(3) {
169 |   -webkit-transform-origin: 20px 20px;
170 |   transform-origin: 20px 20px;
171 | }
172 | 
173 | .active .svg-menu-toggle .bar:nth-of-type(1) {
174 |   -webkit-transform: rotate(-45deg) translateY(0) translateX(0);
175 |   transform: rotate(-45deg) translateY(0) translateX(0);
176 | }
177 | .active .svg-menu-toggle .bar:nth-of-type(2) {
178 |   opacity: 0;
179 | }
180 | .active .svg-menu-toggle .bar:nth-of-type(3) {
181 |   -webkit-transform: rotate(45deg) translateY(0em) translateX(0em);
182 |   transform: rotate(45deg) translateY(0em) translateX(0em);
183 | }
184 | 
185 | .inline-svg {
186 |   width: 30px;
187 | }
188 | 


--------------------------------------------------------------------------------
/docs/client.fe1e06d6.css:
--------------------------------------------------------------------------------
1 | .github-corner[data-v-01d82cf6]{z-index:1}.github-corner:hover .octo-arm[data-v-01d82cf6]{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}@-webkit-keyframes octocat-wave{0%,to{-webkit-transform:rotate(0);transform:rotate(0)}20%,60%{-webkit-transform:rotate(-25deg);transform:rotate(-25deg)}40%,80%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}}@keyframes octocat-wave{0%,to{-webkit-transform:rotate(0);transform:rotate(0)}20%,60%{-webkit-transform:rotate(-25deg);transform:rotate(-25deg)}40%,80%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm[data-v-01d82cf6]{-webkit-animation:none;animation:none}.github-corner .octo-arm[data-v-01d82cf6]{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}}.split-pane[data-v-233982e6]{display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;width:100%}.split-pane.dragging[data-v-233982e6]{cursor:ew-resize}.left[data-v-233982e6],.right[data-v-233982e6]{position:relative;width:100%}.left[data-v-233982e6]{border-right:1px solid #333}.dragger[data-v-233982e6]{position:absolute;z-index:99;top:0;bottom:0;right:-5px;width:10px;cursor:ew-resize}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}body,html{margin:0}header{padding:0 10px;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:30px;background-color:#333;color:#fff}.fb-column{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.fb-column,.fb-row{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}.fb-row{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.fb-grow{width:100%}#code,.fb-grow{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}#code{cursor:text;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%}.CodeMirror{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}pre{margin:0}#app,.fb-grow,.fb-row,body,code,html,pre{height:100%}#output{cursor:default;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;background-color:#282c34}#error{position:absolute;bottom:0;color:#fff;background-color:red;padding:5px}#error,.CodeMirror,code,textarea{font-family:Source Code Pro,monospace;font-size:16px}ol,ul{list-style:none;margin:0;padding:0}nav.menu{background-color:#fafafa;width:150px;min-width:150px;max-width:150px;margin-left:-150px;transition:margin-left .5s cubic-bezier(.77,.2,.05,1);overflow-y:auto;padding-bottom:20px}nav.menu li{padding:5px;border-bottom:1px solid #ddd}nav.menu a{text-decoration:none;color:#444;display:block}nav.menu li:hover{background-color:#ccc}nav.menu li.active{background-color:#efe;font-weight:700}nav.menu.showing{margin-left:0}[v-cloak]{display:none}#version{margin-right:70px}#share{color:#ccc;text-decoration:none}#share:hover{color:#fff}input{outline:none;border-radius:6px;border:1px solid silver;height:25px;line-height:25px;font-size:.7em;display:block;width:100%;padding:4px}.svg-menu-toggle:hover{fill:#fff}.svg-menu-toggle{fill:#ccc;pointer-events:all;cursor:pointer}.svg-menu-toggle .bar{-webkit-transform:rotate(0) translateY(0) translateX(0);-ms-transform:rotate(0) translateY(0) translateX(0);transform:rotate(0) translateY(0) translateX(0);opacity:1;transform-origin:20px 10px;transition:opacity .2s ease-in-out,-webkit-transform .4s ease-in-out;transition:transform .4s ease-in-out,opacity .2s ease-in-out;transition:transform .4s ease-in-out,opacity .2s ease-in-out,-webkit-transform .4s ease-in-out}.svg-menu-toggle .bar,.svg-menu-toggle .bar:first-of-type{-webkit-transform-origin:20px 10px;-ms-transform-origin:20px 10px}.svg-menu-toggle .bar:first-of-type{transform-origin:20px 10px}.svg-menu-toggle .bar:nth-of-type(3){-webkit-transform-origin:20px 20px;-ms-transform-origin:20px 20px;transform-origin:20px 20px}.active .svg-menu-toggle .bar:first-of-type{-webkit-transform:rotate(-45deg) translateY(0) translateX(0);-ms-transform:rotate(-45deg) translateY(0) translateX(0);transform:rotate(-45deg) translateY(0) translateX(0)}.active .svg-menu-toggle .bar:nth-of-type(2){opacity:0}.active .svg-menu-toggle .bar:nth-of-type(3){-webkit-transform:rotate(45deg) translateY(0) translateX(0);-ms-transform:rotate(45deg) translateY(0) translateX(0);transform:rotate(45deg) translateY(0) translateX(0)}.inline-svg{width:30px}


--------------------------------------------------------------------------------
/docs/client.f0b8de34.js:
--------------------------------------------------------------------------------
1 | (function(t){function e(o){if(n[o])return n[o].exports;var i=n[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var n={};e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,o){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:o})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=19)})([function(t,e){t.exports=function(t,e,n,o){var i,r=t=t||{},a=typeof t.default;"object"!==a&&"function"!==a||(i=t,r=t.default);var s="function"==typeof r?r.options:r;if(e&&(s.render=e.render,s.staticRenderFns=e.staticRenderFns),n&&(s._scopeId=n),o){var l=s.computed||(s.computed={});Object.keys(o).forEach(function(t){var e=o[t];l[t]=function(){return e}})}return{esModule:i,exports:r,options:s}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var o=(n(3),n(9)),i=(n.n(o),n(18)),r=n.n(i);console.error=function(t){throw t},new r.a(".copy")},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={data:function(){return{split:50,dragging:!1}},methods:{dragStart:function(t){this.dragging=!0,this.startX=t.pageX,this.startSplit=this.split},dragMove:function(t){if(this.dragging){var e=t.pageX-this.startX,n=this.$el.offsetWidth;this.split=this.startSplit+~~(e/n*100)}},dragEnd:function(){this.dragging=!1}}}},function(t,e,n){"use strict";var o=n(8),i=n(4),r=n(5),a=n(6),s=n(7),l=n(12),c=n.n(l),u=n(13),f=n.n(u),d=n(14),p=n.n(d),h=decodeURI(location.hash.substr(1)),v=h?o.a[h]||atob(h):localStorage.getItem("input")||"<div></div>";new Vue({el:"#app",components:{CodeMirror:i.a,Highlight:r.a,GithubRibbon:c.a,MenuToggler:f.a,SplitPane:p.a},data:{input:v,filter:"",error:"",code:"",vueVersion:Vue.version,version:"0.5.0",samples:o.a,showMenu:!!o.a[h],selectedMenu:h,shortUrl:""},computed:{filteredSamples:function(){if(""===this.filter)return this.samples;var t={};for(var e in this.samples){var n=this.samples[e].toLowerCase();(n.match(this.filter.toLowerCase())||e.toLowerCase().match(this.filter.toLowerCase()))&&(t[e]=n)}return t},compiled:function(){try{this.code=n.i(a.a)(this.input),this.error="",localStorage.setItem("input",this.input)}catch(t){this.error=t.toString()}return this.code},url:function(){return location.protocol+"//"+location.host+location.pathname},shareUrl:function(){return this.url+"#"+btoa(this.input)}},methods:{select:function(t){this.input=o.a[t],this.selectedMenu=t},share:function(){var t=this;this.shortUrl=this.shareUrl,n.i(s.a)(this.shareUrl).then(function(e){return t.shortUrl=e})}}})},function(t,e,n){"use strict";e.a={template:"<div></div>",props:["value"],mounted:function(){var t=this,e=CodeMirror(this.$el,{value:this.value,mode:"text/html",theme:"material",tabSize:2});window.addEventListener("load",function(){e.getWrapperElement().style.fontSize="16px",e.refresh()}),e.on("change",function(e){return t.$emit("input",e.getValue())}),this.editor=e},watch:{value:function(t){t!==this.editor.getValue()&&this.editor.setValue(t)}}}},function(t,e,n){"use strict";e.a={template:'<pre><code class="javascript"></code></pre>',props:["code"],mounted:function(){this.refresh()},watch:{code:function(){this.refresh()}},methods:{refresh:function(){var t=this.$el.querySelector("code");t.innerHTML=this.code,hljs.highlightBlock(t)}}}},function(t,e,n){"use strict";function o(t){return t=t.replace(/\s*\n+\s*/g," "),t=t.replace(/>\s+/g,">").replace(/\s+</g,"<"),t=Vue.compile(t),t=t.staticRenderFns.toString().replace(/^function anonymous/,"function staticRenderFns")+"\n"+t.render.toString().replace(/^function anonymous/,"function render"),t=js_beautify(t,{wrap_line_length:80,break_chained_methods:!0})}e.a=o},function(t,e,n){"use strict";function o(t){return fetch("https://www.googleapis.com/urlshortener/v1/url?key=AIzaSyA20hdW0mgN9sdnfdMvKF0S63-QxwfazAU",{method:"POST",body:'{"longUrl": "'+t+'"}',mode:"cors",headers:{"Content-Type":"application/json"}}).then(function(t){return t.json()}).then(function(t){return t.id})}e.a=o},function(t,e,n){"use strict";e.a={custom:"<!-- type your html here -->",sync:'<comp :foo.sync="bar"></comp>',"v-model":'<name-input v-model="fullName"></name-input>',"v-model_input":'<input v-model="fullName">',"v-model_textarea":'<!-- same as input -->\n<textarea v-model="fullName"></textarea>',"v-model_checkbox":'<input v-model="fullName" type="checkbox">',"v-model_radio":'<input v-model="fullName" type="radio">',"v-model_select":'<select v-model="fullName"></select>',"v-model.trim":'<input v-model.trim="fullName">',"v-model.lazy":'<input v-model.lazy="fullName">',"v-model.number":'<input type="number" v-model.number="price">',"v-on":'<input v-on:input="update">',"v-on-event":'<input v-on:input="update($event)">',"v-on.prevent":'<input v-on:input.prevent="update">',"v-on.native":'<input v-on:input.native="update">',"v-on_filter":'<!-- filters does not work with v-on -->\n<input v-on:input="update | debounce(500)">',"v-bind_filter":'<textarea v-bind:value="message | truncate(140)"></textarea>',"v-bind":'<input v-bind:placeholder="inputMessage">',"v-pre":"<textarea v-pre>{{noCompilation}}</textarea>","v-cloak":"<div v-cloak></div>","v-once":"<div v-once></div>","v-text":'<span v-text="msg"></span>',"v-html":'<div v-html="html"></div>',"v-show":'<a v-show="signedIn">logout</a>',"v-if":'<a v-if="signedIn">logout</a>',"v-else":'<nav>\n  <a v-if="signedIn">logout</a>\n  <a v-else>login</a>\n</nav>\n',"v-else-if":"<div v-if=\"type === 'A'\">\n  A\n</div>\n<div v-else-if=\"type === 'B'\">\n  B\n</div>\n<div v-else-if=\"type === 'C'\">\n  C\n</div>\n<div v-else>\n  Not A/B/C\n</div>","v-for":'<ul><!-- v-for can\'t be the root element -->\n  <li v-for="todo, index in todos">\n    {{todo.label}}\n  </li>\n</ul>\n',slot:'<div>\n  <slot>\n    content\n  </slot>\n  <slot name="footer">\n    copyright\n  </slot>\n</div>',"slot-scoped":'<div class="parent">\n  <child>\n    <template scope="props">\n      <span>hello from parent</span>\n      <span>{{ props.text }}</span>\n    </template>\n  </child>\n</div>',"inline-template":"<my-component inline-template>\n  <div>\n    content\n  </div>\n</my-component>","component-is":'<component is="OtherComponent"></component>'}},function(t,e){},function(t,e){},function(t,e){},function(t,e,n){n(10);var o=n(0)(null,n(15),"data-v-01d82cf6",null);t.exports=o.exports},function(t,e,n){var o=n(0)(null,n(16),null,null);t.exports=o.exports},function(t,e,n){n(11);var o=n(0)(n(2),n(17),"data-v-233982e6",null);t.exports=o.exports},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("a",{staticClass:"github-corner",attrs:{href:"https://github.com/vuejs-tips/compiler","aria-label":"View source on Github"}},[n("svg",{staticStyle:{fill:"#333333",color:"#fff",position:"absolute",top:"0",border:"0",right:"0"},attrs:{width:"80",height:"80",viewBox:"0 0 250 250","aria-hidden":"true"}},[n("path",{attrs:{d:"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"}}),t._v(" "),n("path",{staticClass:"octo-arm",staticStyle:{"transform-origin":"130px 106px"},attrs:{d:"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2",fill:"currentColor"}}),t._v(" "),n("path",{staticClass:"octo-body",attrs:{d:"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z",fill:"currentColor"}})])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("svg",{staticClass:"inline-svg",attrs:{version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",x:"0px",y:"0px",width:"24px",height:"30px",viewBox:"0 0 24 30","enable-background":"new 0 0 32 22.5","xml:space":"preserve"}},[n("g",{staticClass:"svg-menu-toggle"},[n("path",{staticClass:"bar",attrs:{d:"M20.945,8.75c0,0.69-0.5,1.25-1.117,1.25H3.141c-0.617,0-1.118-0.56-1.118-1.25l0,0c0-0.69,0.5-1.25,1.118-1.25h16.688C20.445,7.5,20.945,8.06,20.945,8.75L20.945,8.75z"}}),t._v(" "),n("path",{staticClass:"bar",attrs:{d:"M20.923,15c0,0.689-0.501,1.25-1.118,1.25H3.118C2.5,16.25,2,15.689,2,15l0,0c0-0.689,0.5-1.25,1.118-1.25 h16.687C20.422,13.75,20.923,14.311,20.923,15L20.923,15z"}}),t._v(" "),n("path",{staticClass:"bar",attrs:{d:"M20.969,21.25c0,0.689-0.5,1.25-1.117,1.25H3.164c-0.617,0-1.118-0.561-1.118-1.25l0,0c0-0.689,0.5-1.25,1.118-1.25h16.688C20.469,20,20.969,20.561,20.969,21.25L20.969,21.25z"}}),t._v(" "),n("rect",{attrs:{width:"24",height:"30",fill:"none"}})])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"split-pane",class:{dragging:t.dragging},on:{mousemove:t.dragMove,mouseup:t.dragEnd,mouseleave:t.dragEnd}},[n("div",{staticClass:"left",style:{width:t.split+"%"}},[t._t("left"),t._v(" "),n("div",{staticClass:"dragger",on:{mousedown:t.dragStart}})],2),t._v(" "),n("div",{staticClass:"right",style:{width:100-t.split+"%"}},[t._t("right")],2)])},staticRenderFns:[]}},function(t,e,n){var o,o;(function(e){t.exports=e()})(function(){var t;return function t(e,n,i){function r(s,l){if(!n[s]){if(!e[s]){var c="function"==typeof o&&o;if(!l&&c)return o(s,!0);if(a)return a(s,!0);var u=new Error("Cannot find module '"+s+"'");throw u.code="MODULE_NOT_FOUND",u}var f=n[s]={exports:{}};e[s][0].call(f.exports,function(t){var n=e[s][1][t];return r(n?n:t)},f,f.exports,t,e,n,i)}return n[s].exports}for(var a="function"==typeof o&&o,s=0;s<i.length;s++)r(i[s]);return r}({1:[function(t,e,n){function o(t,e){for(;t&&t.nodeType!==i;){if(t.matches(e))return t;t=t.parentNode}}var i=9;if("undefined"!=typeof Element&&!Element.prototype.matches){var r=Element.prototype;r.matches=r.matchesSelector||r.mozMatchesSelector||r.msMatchesSelector||r.oMatchesSelector||r.webkitMatchesSelector}e.exports=o},{}],2:[function(t,e,n){function o(t,e,n,o,r){var a=i.apply(this,arguments);return t.addEventListener(n,a,r),{destroy:function(){t.removeEventListener(n,a,r)}}}function i(t,e,n,o){return function(n){n.delegateTarget=r(n.target,e),n.delegateTarget&&o.call(t,n)}}var r=t("./closest");e.exports=o},{"./closest":1}],3:[function(t,e,n){n.node=function(t){return void 0!==t&&t instanceof HTMLElement&&1===t.nodeType},n.nodeList=function(t){var e=Object.prototype.toString.call(t);return void 0!==t&&("[object NodeList]"===e||"[object HTMLCollection]"===e)&&"length"in t&&(0===t.length||n.node(t[0]))},n.string=function(t){return"string"==typeof t||t instanceof String},n.fn=function(t){return"[object Function]"===Object.prototype.toString.call(t)}},{}],4:[function(t,e,n){function o(t,e,n){if(!t&&!e&&!n)throw new Error("Missing required arguments");if(!s.string(e))throw new TypeError("Second argument must be a String");if(!s.fn(n))throw new TypeError("Third argument must be a Function");if(s.node(t))return i(t,e,n);if(s.nodeList(t))return r(t,e,n);if(s.string(t))return a(t,e,n);throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList")}function i(t,e,n){return t.addEventListener(e,n),{destroy:function(){t.removeEventListener(e,n)}}}function r(t,e,n){return Array.prototype.forEach.call(t,function(t){t.addEventListener(e,n)}),{destroy:function(){Array.prototype.forEach.call(t,function(t){t.removeEventListener(e,n)})}}}function a(t,e,n){return l(document.body,t,e,n)}var s=t("./is"),l=t("delegate");e.exports=o},{"./is":3,delegate:2}],5:[function(t,e,n){function o(t){var e;if("SELECT"===t.nodeName)t.focus(),e=t.value;else if("INPUT"===t.nodeName||"TEXTAREA"===t.nodeName){var n=t.hasAttribute("readonly");n||t.setAttribute("readonly",""),t.select(),t.setSelectionRange(0,t.value.length),n||t.removeAttribute("readonly"),e=t.value}else{t.hasAttribute("contenteditable")&&t.focus();var o=window.getSelection(),i=document.createRange();i.selectNodeContents(t),o.removeAllRanges(),o.addRange(i),e=o.toString()}return e}e.exports=o},{}],6:[function(t,e,n){function o(){}o.prototype={on:function(t,e,n){var o=this.e||(this.e={});return(o[t]||(o[t]=[])).push({fn:e,ctx:n}),this},once:function(t,e,n){function o(){i.off(t,o),e.apply(n,arguments)}var i=this;return o._=e,this.on(t,o,n)},emit:function(t){var e=[].slice.call(arguments,1),n=((this.e||(this.e={}))[t]||[]).slice(),o=0,i=n.length;for(o;o<i;o++)n[o].fn.apply(n[o].ctx,e);return this},off:function(t,e){var n=this.e||(this.e={}),o=n[t],i=[];if(o&&e)for(var r=0,a=o.length;r<a;r++)o[r].fn!==e&&o[r].fn._!==e&&i.push(o[r]);return i.length?n[t]=i:delete n[t],this}},e.exports=o},{}],7:[function(e,n,o){(function(i,r){if("function"==typeof t&&t.amd)t(["module","select"],r);else if(void 0!==o)r(n,e("select"));else{var a={exports:{}};r(a,i.select),i.clipboardAction=a.exports}})(this,function(t,e){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var o=function(t){return t&&t.__esModule?t:{default:t}}(e),i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},r=function(){function t(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,n,o){return n&&t(e.prototype,n),o&&t(e,o),e}}(),a=function(){function t(e){n(this,t),this.resolveOptions(e),this.initSelection()}return r(t,[{key:"resolveOptions",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.action=t.action,this.emitter=t.emitter,this.target=t.target,this.text=t.text,this.trigger=t.trigger,this.selectedText=""}},{key:"initSelection",value:function(){this.text?this.selectFake():this.target&&this.selectTarget()}},{key:"selectFake",value:function(){var t=this,e="rtl"==document.documentElement.getAttribute("dir");this.removeFake(),this.fakeHandlerCallback=function(){return t.removeFake()},this.fakeHandler=document.body.addEventListener("click",this.fakeHandlerCallback)||!0,this.fakeElem=document.createElement("textarea"),this.fakeElem.style.fontSize="12pt",this.fakeElem.style.border="0",this.fakeElem.style.padding="0",this.fakeElem.style.margin="0",this.fakeElem.style.position="absolute",this.fakeElem.style[e?"right":"left"]="-9999px";var n=window.pageYOffset||document.documentElement.scrollTop;this.fakeElem.style.top=n+"px",this.fakeElem.setAttribute("readonly",""),this.fakeElem.value=this.text,document.body.appendChild(this.fakeElem),this.selectedText=(0,o.default)(this.fakeElem),this.copyText()}},{key:"removeFake",value:function(){this.fakeHandler&&(document.body.removeEventListener("click",this.fakeHandlerCallback),this.fakeHandler=null,this.fakeHandlerCallback=null),this.fakeElem&&(document.body.removeChild(this.fakeElem),this.fakeElem=null)}},{key:"selectTarget",value:function(){this.selectedText=(0,o.default)(this.target),this.copyText()}},{key:"copyText",value:function(){var t=void 0;try{t=document.execCommand(this.action)}catch(e){t=!1}this.handleResult(t)}},{key:"handleResult",value:function(t){this.emitter.emit(t?"success":"error",{action:this.action,text:this.selectedText,trigger:this.trigger,clearSelection:this.clearSelection.bind(this)})}},{key:"clearSelection",value:function(){this.target&&this.target.blur(),window.getSelection().removeAllRanges()}},{key:"destroy",value:function(){this.removeFake()}},{key:"action",set:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"copy";if(this._action=t,"copy"!==this._action&&"cut"!==this._action)throw new Error('Invalid "action" value, use either "copy" or "cut"')},get:function(){return this._action}},{key:"target",set:function(t){if(void 0!==t){if(!t||"object"!==(void 0===t?"undefined":i(t))||1!==t.nodeType)throw new Error('Invalid "target" value, use a valid Element');if("copy"===this.action&&t.hasAttribute("disabled"))throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');if("cut"===this.action&&(t.hasAttribute("readonly")||t.hasAttribute("disabled")))throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');this._target=t}},get:function(){return this._target}}]),t}();t.exports=a})},{select:5}],8:[function(e,n,o){(function(i,r){if("function"==typeof t&&t.amd)t(["module","./clipboard-action","tiny-emitter","good-listener"],r);else if(void 0!==o)r(n,e("./clipboard-action"),e("tiny-emitter"),e("good-listener"));else{var a={exports:{}};r(a,i.clipboardAction,i.tinyEmitter,i.goodListener),i.clipboard=a.exports}})(this,function(t,e,n,o){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function s(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function l(t,e){var n="data-clipboard-"+t;if(e.hasAttribute(n))return e.getAttribute(n)}var c=i(e),u=i(n),f=i(o),d=function(){function t(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,n,o){return n&&t(e.prototype,n),o&&t(e,o),e}}(),p=function(t){function e(t,n){r(this,e);var o=a(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return o.resolveOptions(n),o.listenClick(t),o}return s(e,t),d(e,[{key:"resolveOptions",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.action="function"==typeof t.action?t.action:this.defaultAction,this.target="function"==typeof t.target?t.target:this.defaultTarget,this.text="function"==typeof t.text?t.text:this.defaultText}},{key:"listenClick",value:function(t){var e=this;this.listener=(0,f.default)(t,"click",function(t){return e.onClick(t)})}},{key:"onClick",value:function(t){var e=t.delegateTarget||t.currentTarget;this.clipboardAction&&(this.clipboardAction=null),this.clipboardAction=new c.default({action:this.action(e),target:this.target(e),text:this.text(e),trigger:e,emitter:this})}},{key:"defaultAction",value:function(t){return l("action",t)}},{key:"defaultTarget",value:function(t){var e=l("target",t);if(e)return document.querySelector(e)}},{key:"defaultText",value:function(t){return l("text",t)}},{key:"destroy",value:function(){this.listener.destroy(),this.clipboardAction&&(this.clipboardAction.destroy(),this.clipboardAction=null)}}],[{key:"isSupported",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:["copy","cut"],e="string"==typeof t?[t]:t,n=!!document.queryCommandSupported;return e.forEach(function(t){n=n&&!!document.queryCommandSupported(t)}),n}}]),e}(u.default);t.exports=p})},{"./clipboard-action":7,"good-listener":4,"tiny-emitter":6}]},{},[8])(8)})},function(t,e,n){t.exports=n(1)}]);


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <!-- vendors -->
 6 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro">
 7 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/atom-one-dark.min.css">
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.24.2/codemirror.min.css">
 9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.24.2/theme/material.min.css">
10 |   <style type="text/css">.github-corner[data-v-01d82cf6]{z-index:1}.github-corner:hover .octo-arm[data-v-01d82cf6]{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}@-webkit-keyframes octocat-wave{0%,to{-webkit-transform:rotate(0);transform:rotate(0)}20%,60%{-webkit-transform:rotate(-25deg);transform:rotate(-25deg)}40%,80%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}}@keyframes octocat-wave{0%,to{-webkit-transform:rotate(0);transform:rotate(0)}20%,60%{-webkit-transform:rotate(-25deg);transform:rotate(-25deg)}40%,80%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm[data-v-01d82cf6]{-webkit-animation:none;animation:none}.github-corner .octo-arm[data-v-01d82cf6]{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}}.split-pane[data-v-233982e6]{display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;width:100%}.split-pane.dragging[data-v-233982e6]{cursor:ew-resize}.left[data-v-233982e6],.right[data-v-233982e6]{position:relative;width:100%}.left[data-v-233982e6]{border-right:1px solid #333}.dragger[data-v-233982e6]{position:absolute;z-index:99;top:0;bottom:0;right:-5px;width:10px;cursor:ew-resize}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}body,html{margin:0}header{padding:0 10px;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:30px;background-color:#333;color:#fff}.fb-column{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.fb-column,.fb-row{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}.fb-row{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.fb-grow{width:100%}#code,.fb-grow{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}#code{cursor:text;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%}.CodeMirror{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}pre{margin:0}#app,.fb-grow,.fb-row,body,code,html,pre{height:100%}#output{cursor:default;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;background-color:#282c34}#error{position:absolute;bottom:0;color:#fff;background-color:red;padding:5px}#error,.CodeMirror,code,textarea{font-family:Source Code Pro,monospace;font-size:16px}ol,ul{list-style:none;margin:0;padding:0}nav.menu{background-color:#fafafa;width:150px;min-width:150px;max-width:150px;margin-left:-150px;transition:margin-left .5s cubic-bezier(.77,.2,.05,1);overflow-y:auto;padding-bottom:20px}nav.menu li{padding:5px;border-bottom:1px solid #ddd}nav.menu a{text-decoration:none;color:#444;display:block}nav.menu li:hover{background-color:#ccc}nav.menu li.active{background-color:#efe;font-weight:700}nav.menu.showing{margin-left:0}[v-cloak]{display:none}#version{margin-right:70px}#share{color:#ccc;text-decoration:none}#share:hover{color:#fff}input{outline:none;border-radius:6px;border:1px solid silver;height:25px;line-height:25px;font-size:.7em;display:block;width:100%;padding:4px}.svg-menu-toggle:hover{fill:#fff}.svg-menu-toggle{fill:#ccc;pointer-events:all;cursor:pointer}.svg-menu-toggle .bar{-webkit-transform:rotate(0) translateY(0) translateX(0);-ms-transform:rotate(0) translateY(0) translateX(0);transform:rotate(0) translateY(0) translateX(0);opacity:1;transform-origin:20px 10px;transition:opacity .2s ease-in-out,-webkit-transform .4s ease-in-out;transition:transform .4s ease-in-out,opacity .2s ease-in-out;transition:transform .4s ease-in-out,opacity .2s ease-in-out,-webkit-transform .4s ease-in-out}.svg-menu-toggle .bar,.svg-menu-toggle .bar:first-of-type{-webkit-transform-origin:20px 10px;-ms-transform-origin:20px 10px}.svg-menu-toggle .bar:first-of-type{transform-origin:20px 10px}.svg-menu-toggle .bar:nth-of-type(3){-webkit-transform-origin:20px 20px;-ms-transform-origin:20px 20px;transform-origin:20px 20px}.active .svg-menu-toggle .bar:first-of-type{-webkit-transform:rotate(-45deg) translateY(0) translateX(0);-ms-transform:rotate(-45deg) translateY(0) translateX(0);transform:rotate(-45deg) translateY(0) translateX(0)}.active .svg-menu-toggle .bar:nth-of-type(2){opacity:0}.active .svg-menu-toggle .bar:nth-of-type(3){-webkit-transform:rotate(45deg) translateY(0) translateX(0);-ms-transform:rotate(45deg) translateY(0) translateX(0);transform:rotate(45deg) translateY(0) translateX(0)}.inline-svg{width:30px}</style></head>
11 |   <body>
12 | 
13 |     <div id="app" class="fb-column" v-cloak>
14 |       <github-ribbon></github-ribbon>
15 |       <header>
16 |         <menu-toggler @click.native="showMenu = !showMenu" :class="{active: showMenu}"></menu-toggler>
17 |         <!-- <a id="share" :href="shareUrl" target="_blank">share this example</a> -->
18 |         <div>
19 |           <button @click="share">share this example</button>
20 |           <span v-show="shortUrl">
21 |             <input id="url" type="text" :value="shortUrl" readonly @focus="$event.target.select()" style="width: 130px">
22 |             <button class="copy" data-clipboard-target="#url">copy</button>
23 |           </span>
24 |         </div>
25 |         <span id="version" :title="version">Vue.js {{vueVersion}}</span>
26 |       </header>
27 | 
28 |       <div class="fb-row">
29 |         <nav class="menu" :class="{showing: showMenu}">
30 |           <ul>
31 |             <li>
32 |               <input type="search" v-model.trim="filter" placeholder="type your search here" />
33 |             </li>
34 |             <li v-for="code, label in filteredSamples" :class="{active: label === selectedMenu}">
35 |               <a :href="'#' + encodeURI(label)" @click="select(label)">
36 |                 {{label}}
37 |               </a>
38 |             </li>
39 |           </ul>
40 |         </nav>
41 |         <split-pane>
42 |           <div slot="left" class="fb-grow"><!-- Vue HTML editor -->
43 |             <code-mirror id="code" v-model="input"></code-mirror>
44 |             <div id="error" v-show="error">{{error}}</div>
45 |           </div>
46 | 
47 |           <div slot="right" class="fb-grow"><!-- Compiled Javascript Render Functions -->
48 |             <highlight id="output" :code="compiled"></highlight>
49 |           </div>
50 |         </split-pane>
51 |       </div>
52 |     </div>
53 | 
54 |     <!-- vendors -->
55 |     <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
56 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.9/beautify.min.js"></script>
57 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
58 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/javascript.min.js"></script>
59 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.24.2/codemirror.min.js"></script>
60 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.24.2/mode/xml/xml.min.js"></script>
61 | 
62 |     <script>
63 |       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
64 |       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
65 |       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
66 |       })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
67 |       ga('create', 'UA-183197-49', 'auto');
68 |       ga('send', 'pageview');
69 |     </script>
70 |   <script type="text/javascript">(function(t){function e(o){if(n[o])return n[o].exports;var i=n[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var n={};e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,o){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:o})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=19)})([function(t,e){t.exports=function(t,e,n,o){var i,r=t=t||{},a=typeof t.default;"object"!==a&&"function"!==a||(i=t,r=t.default);var s="function"==typeof r?r.options:r;if(e&&(s.render=e.render,s.staticRenderFns=e.staticRenderFns),n&&(s._scopeId=n),o){var l=s.computed||(s.computed={});Object.keys(o).forEach(function(t){var e=o[t];l[t]=function(){return e}})}return{esModule:i,exports:r,options:s}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var o=(n(3),n(9)),i=(n.n(o),n(18)),r=n.n(i);console.error=function(t){throw t},new r.a(".copy")},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={data:function(){return{split:50,dragging:!1}},methods:{dragStart:function(t){this.dragging=!0,this.startX=t.pageX,this.startSplit=this.split},dragMove:function(t){if(this.dragging){var e=t.pageX-this.startX,n=this.$el.offsetWidth;this.split=this.startSplit+~~(e/n*100)}},dragEnd:function(){this.dragging=!1}}}},function(t,e,n){"use strict";var o=n(8),i=n(4),r=n(5),a=n(6),s=n(7),l=n(12),c=n.n(l),u=n(13),f=n.n(u),d=n(14),p=n.n(d),h=decodeURI(location.hash.substr(1)),v=h?o.a[h]||atob(h):localStorage.getItem("input")||"<div></div>";new Vue({el:"#app",components:{CodeMirror:i.a,Highlight:r.a,GithubRibbon:c.a,MenuToggler:f.a,SplitPane:p.a},data:{input:v,filter:"",error:"",code:"",vueVersion:Vue.version,version:"0.5.0",samples:o.a,showMenu:!!o.a[h],selectedMenu:h,shortUrl:""},computed:{filteredSamples:function(){if(""===this.filter)return this.samples;var t={};for(var e in this.samples){var n=this.samples[e].toLowerCase();(n.match(this.filter.toLowerCase())||e.toLowerCase().match(this.filter.toLowerCase()))&&(t[e]=n)}return t},compiled:function(){try{this.code=n.i(a.a)(this.input),this.error="",localStorage.setItem("input",this.input)}catch(t){this.error=t.toString()}return this.code},url:function(){return location.protocol+"//"+location.host+location.pathname},shareUrl:function(){return this.url+"#"+btoa(this.input)}},methods:{select:function(t){this.input=o.a[t],this.selectedMenu=t},share:function(){var t=this;this.shortUrl=this.shareUrl,n.i(s.a)(this.shareUrl).then(function(e){return t.shortUrl=e})}}})},function(t,e,n){"use strict";e.a={template:"<div></div>",props:["value"],mounted:function(){var t=this,e=CodeMirror(this.$el,{value:this.value,mode:"text/html",theme:"material",tabSize:2});window.addEventListener("load",function(){e.getWrapperElement().style.fontSize="16px",e.refresh()}),e.on("change",function(e){return t.$emit("input",e.getValue())}),this.editor=e},watch:{value:function(t){t!==this.editor.getValue()&&this.editor.setValue(t)}}}},function(t,e,n){"use strict";e.a={template:'<pre><code class="javascript"></code></pre>',props:["code"],mounted:function(){this.refresh()},watch:{code:function(){this.refresh()}},methods:{refresh:function(){var t=this.$el.querySelector("code");t.innerHTML=this.code,hljs.highlightBlock(t)}}}},function(t,e,n){"use strict";function o(t){return t=t.replace(/\s*\n+\s*/g," "),t=t.replace(/>\s+/g,">").replace(/\s+</g,"<"),t=Vue.compile(t),t=t.staticRenderFns.toString().replace(/^function anonymous/,"function staticRenderFns")+"\n"+t.render.toString().replace(/^function anonymous/,"function render"),t=js_beautify(t,{wrap_line_length:80,break_chained_methods:!0})}e.a=o},function(t,e,n){"use strict";function o(t){return fetch("https://www.googleapis.com/urlshortener/v1/url?key=AIzaSyA20hdW0mgN9sdnfdMvKF0S63-QxwfazAU",{method:"POST",body:'{"longUrl": "'+t+'"}',mode:"cors",headers:{"Content-Type":"application/json"}}).then(function(t){return t.json()}).then(function(t){return t.id})}e.a=o},function(t,e,n){"use strict";e.a={custom:"<!-- type your html here -->",sync:'<comp :foo.sync="bar"></comp>',"v-model":'<name-input v-model="fullName"></name-input>',"v-model_input":'<input v-model="fullName">',"v-model_textarea":'<!-- same as input -->\n<textarea v-model="fullName"></textarea>',"v-model_checkbox":'<input v-model="fullName" type="checkbox">',"v-model_radio":'<input v-model="fullName" type="radio">',"v-model_select":'<select v-model="fullName"></select>',"v-model.trim":'<input v-model.trim="fullName">',"v-model.lazy":'<input v-model.lazy="fullName">',"v-model.number":'<input type="number" v-model.number="price">',"v-on":'<input v-on:input="update">',"v-on-event":'<input v-on:input="update($event)">',"v-on.prevent":'<input v-on:input.prevent="update">',"v-on.native":'<input v-on:input.native="update">',"v-on_filter":'<!-- filters does not work with v-on -->\n<input v-on:input="update | debounce(500)">',"v-bind_filter":'<textarea v-bind:value="message | truncate(140)"></textarea>',"v-bind":'<input v-bind:placeholder="inputMessage">',"v-pre":"<textarea v-pre>{{noCompilation}}</textarea>","v-cloak":"<div v-cloak></div>","v-once":"<div v-once></div>","v-text":'<span v-text="msg"></span>',"v-html":'<div v-html="html"></div>',"v-show":'<a v-show="signedIn">logout</a>',"v-if":'<a v-if="signedIn">logout</a>',"v-else":'<nav>\n  <a v-if="signedIn">logout</a>\n  <a v-else>login</a>\n</nav>\n',"v-else-if":"<div v-if=\"type === 'A'\">\n  A\n</div>\n<div v-else-if=\"type === 'B'\">\n  B\n</div>\n<div v-else-if=\"type === 'C'\">\n  C\n</div>\n<div v-else>\n  Not A/B/C\n</div>","v-for":'<ul><!-- v-for can\'t be the root element -->\n  <li v-for="todo, index in todos">\n    {{todo.label}}\n  </li>\n</ul>\n',slot:'<div>\n  <slot>\n    content\n  </slot>\n  <slot name="footer">\n    copyright\n  </slot>\n</div>',"slot-scoped":'<div class="parent">\n  <child>\n    <template scope="props">\n      <span>hello from parent</span>\n      <span>{{ props.text }}</span>\n    </template>\n  </child>\n</div>',"inline-template":"<my-component inline-template>\n  <div>\n    content\n  </div>\n</my-component>","component-is":'<component is="OtherComponent"></component>'}},function(t,e){},function(t,e){},function(t,e){},function(t,e,n){n(10);var o=n(0)(null,n(15),"data-v-01d82cf6",null);t.exports=o.exports},function(t,e,n){var o=n(0)(null,n(16),null,null);t.exports=o.exports},function(t,e,n){n(11);var o=n(0)(n(2),n(17),"data-v-233982e6",null);t.exports=o.exports},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("a",{staticClass:"github-corner",attrs:{href:"https://github.com/vuejs-tips/compiler","aria-label":"View source on Github"}},[n("svg",{staticStyle:{fill:"#333333",color:"#fff",position:"absolute",top:"0",border:"0",right:"0"},attrs:{width:"80",height:"80",viewBox:"0 0 250 250","aria-hidden":"true"}},[n("path",{attrs:{d:"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"}}),t._v(" "),n("path",{staticClass:"octo-arm",staticStyle:{"transform-origin":"130px 106px"},attrs:{d:"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2",fill:"currentColor"}}),t._v(" "),n("path",{staticClass:"octo-body",attrs:{d:"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z",fill:"currentColor"}})])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("svg",{staticClass:"inline-svg",attrs:{version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",x:"0px",y:"0px",width:"24px",height:"30px",viewBox:"0 0 24 30","enable-background":"new 0 0 32 22.5","xml:space":"preserve"}},[n("g",{staticClass:"svg-menu-toggle"},[n("path",{staticClass:"bar",attrs:{d:"M20.945,8.75c0,0.69-0.5,1.25-1.117,1.25H3.141c-0.617,0-1.118-0.56-1.118-1.25l0,0c0-0.69,0.5-1.25,1.118-1.25h16.688C20.445,7.5,20.945,8.06,20.945,8.75L20.945,8.75z"}}),t._v(" "),n("path",{staticClass:"bar",attrs:{d:"M20.923,15c0,0.689-0.501,1.25-1.118,1.25H3.118C2.5,16.25,2,15.689,2,15l0,0c0-0.689,0.5-1.25,1.118-1.25 h16.687C20.422,13.75,20.923,14.311,20.923,15L20.923,15z"}}),t._v(" "),n("path",{staticClass:"bar",attrs:{d:"M20.969,21.25c0,0.689-0.5,1.25-1.117,1.25H3.164c-0.617,0-1.118-0.561-1.118-1.25l0,0c0-0.689,0.5-1.25,1.118-1.25h16.688C20.469,20,20.969,20.561,20.969,21.25L20.969,21.25z"}}),t._v(" "),n("rect",{attrs:{width:"24",height:"30",fill:"none"}})])])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"split-pane",class:{dragging:t.dragging},on:{mousemove:t.dragMove,mouseup:t.dragEnd,mouseleave:t.dragEnd}},[n("div",{staticClass:"left",style:{width:t.split+"%"}},[t._t("left"),t._v(" "),n("div",{staticClass:"dragger",on:{mousedown:t.dragStart}})],2),t._v(" "),n("div",{staticClass:"right",style:{width:100-t.split+"%"}},[t._t("right")],2)])},staticRenderFns:[]}},function(t,e,n){var o,o;(function(e){t.exports=e()})(function(){var t;return function t(e,n,i){function r(s,l){if(!n[s]){if(!e[s]){var c="function"==typeof o&&o;if(!l&&c)return o(s,!0);if(a)return a(s,!0);var u=new Error("Cannot find module '"+s+"'");throw u.code="MODULE_NOT_FOUND",u}var f=n[s]={exports:{}};e[s][0].call(f.exports,function(t){var n=e[s][1][t];return r(n?n:t)},f,f.exports,t,e,n,i)}return n[s].exports}for(var a="function"==typeof o&&o,s=0;s<i.length;s++)r(i[s]);return r}({1:[function(t,e,n){function o(t,e){for(;t&&t.nodeType!==i;){if(t.matches(e))return t;t=t.parentNode}}var i=9;if("undefined"!=typeof Element&&!Element.prototype.matches){var r=Element.prototype;r.matches=r.matchesSelector||r.mozMatchesSelector||r.msMatchesSelector||r.oMatchesSelector||r.webkitMatchesSelector}e.exports=o},{}],2:[function(t,e,n){function o(t,e,n,o,r){var a=i.apply(this,arguments);return t.addEventListener(n,a,r),{destroy:function(){t.removeEventListener(n,a,r)}}}function i(t,e,n,o){return function(n){n.delegateTarget=r(n.target,e),n.delegateTarget&&o.call(t,n)}}var r=t("./closest");e.exports=o},{"./closest":1}],3:[function(t,e,n){n.node=function(t){return void 0!==t&&t instanceof HTMLElement&&1===t.nodeType},n.nodeList=function(t){var e=Object.prototype.toString.call(t);return void 0!==t&&("[object NodeList]"===e||"[object HTMLCollection]"===e)&&"length"in t&&(0===t.length||n.node(t[0]))},n.string=function(t){return"string"==typeof t||t instanceof String},n.fn=function(t){return"[object Function]"===Object.prototype.toString.call(t)}},{}],4:[function(t,e,n){function o(t,e,n){if(!t&&!e&&!n)throw new Error("Missing required arguments");if(!s.string(e))throw new TypeError("Second argument must be a String");if(!s.fn(n))throw new TypeError("Third argument must be a Function");if(s.node(t))return i(t,e,n);if(s.nodeList(t))return r(t,e,n);if(s.string(t))return a(t,e,n);throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList")}function i(t,e,n){return t.addEventListener(e,n),{destroy:function(){t.removeEventListener(e,n)}}}function r(t,e,n){return Array.prototype.forEach.call(t,function(t){t.addEventListener(e,n)}),{destroy:function(){Array.prototype.forEach.call(t,function(t){t.removeEventListener(e,n)})}}}function a(t,e,n){return l(document.body,t,e,n)}var s=t("./is"),l=t("delegate");e.exports=o},{"./is":3,delegate:2}],5:[function(t,e,n){function o(t){var e;if("SELECT"===t.nodeName)t.focus(),e=t.value;else if("INPUT"===t.nodeName||"TEXTAREA"===t.nodeName){var n=t.hasAttribute("readonly");n||t.setAttribute("readonly",""),t.select(),t.setSelectionRange(0,t.value.length),n||t.removeAttribute("readonly"),e=t.value}else{t.hasAttribute("contenteditable")&&t.focus();var o=window.getSelection(),i=document.createRange();i.selectNodeContents(t),o.removeAllRanges(),o.addRange(i),e=o.toString()}return e}e.exports=o},{}],6:[function(t,e,n){function o(){}o.prototype={on:function(t,e,n){var o=this.e||(this.e={});return(o[t]||(o[t]=[])).push({fn:e,ctx:n}),this},once:function(t,e,n){function o(){i.off(t,o),e.apply(n,arguments)}var i=this;return o._=e,this.on(t,o,n)},emit:function(t){var e=[].slice.call(arguments,1),n=((this.e||(this.e={}))[t]||[]).slice(),o=0,i=n.length;for(o;o<i;o++)n[o].fn.apply(n[o].ctx,e);return this},off:function(t,e){var n=this.e||(this.e={}),o=n[t],i=[];if(o&&e)for(var r=0,a=o.length;r<a;r++)o[r].fn!==e&&o[r].fn._!==e&&i.push(o[r]);return i.length?n[t]=i:delete n[t],this}},e.exports=o},{}],7:[function(e,n,o){(function(i,r){if("function"==typeof t&&t.amd)t(["module","select"],r);else if(void 0!==o)r(n,e("select"));else{var a={exports:{}};r(a,i.select),i.clipboardAction=a.exports}})(this,function(t,e){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var o=function(t){return t&&t.__esModule?t:{default:t}}(e),i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},r=function(){function t(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,n,o){return n&&t(e.prototype,n),o&&t(e,o),e}}(),a=function(){function t(e){n(this,t),this.resolveOptions(e),this.initSelection()}return r(t,[{key:"resolveOptions",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.action=t.action,this.emitter=t.emitter,this.target=t.target,this.text=t.text,this.trigger=t.trigger,this.selectedText=""}},{key:"initSelection",value:function(){this.text?this.selectFake():this.target&&this.selectTarget()}},{key:"selectFake",value:function(){var t=this,e="rtl"==document.documentElement.getAttribute("dir");this.removeFake(),this.fakeHandlerCallback=function(){return t.removeFake()},this.fakeHandler=document.body.addEventListener("click",this.fakeHandlerCallback)||!0,this.fakeElem=document.createElement("textarea"),this.fakeElem.style.fontSize="12pt",this.fakeElem.style.border="0",this.fakeElem.style.padding="0",this.fakeElem.style.margin="0",this.fakeElem.style.position="absolute",this.fakeElem.style[e?"right":"left"]="-9999px";var n=window.pageYOffset||document.documentElement.scrollTop;this.fakeElem.style.top=n+"px",this.fakeElem.setAttribute("readonly",""),this.fakeElem.value=this.text,document.body.appendChild(this.fakeElem),this.selectedText=(0,o.default)(this.fakeElem),this.copyText()}},{key:"removeFake",value:function(){this.fakeHandler&&(document.body.removeEventListener("click",this.fakeHandlerCallback),this.fakeHandler=null,this.fakeHandlerCallback=null),this.fakeElem&&(document.body.removeChild(this.fakeElem),this.fakeElem=null)}},{key:"selectTarget",value:function(){this.selectedText=(0,o.default)(this.target),this.copyText()}},{key:"copyText",value:function(){var t=void 0;try{t=document.execCommand(this.action)}catch(e){t=!1}this.handleResult(t)}},{key:"handleResult",value:function(t){this.emitter.emit(t?"success":"error",{action:this.action,text:this.selectedText,trigger:this.trigger,clearSelection:this.clearSelection.bind(this)})}},{key:"clearSelection",value:function(){this.target&&this.target.blur(),window.getSelection().removeAllRanges()}},{key:"destroy",value:function(){this.removeFake()}},{key:"action",set:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"copy";if(this._action=t,"copy"!==this._action&&"cut"!==this._action)throw new Error('Invalid "action" value, use either "copy" or "cut"')},get:function(){return this._action}},{key:"target",set:function(t){if(void 0!==t){if(!t||"object"!==(void 0===t?"undefined":i(t))||1!==t.nodeType)throw new Error('Invalid "target" value, use a valid Element');if("copy"===this.action&&t.hasAttribute("disabled"))throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');if("cut"===this.action&&(t.hasAttribute("readonly")||t.hasAttribute("disabled")))throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');this._target=t}},get:function(){return this._target}}]),t}();t.exports=a})},{select:5}],8:[function(e,n,o){(function(i,r){if("function"==typeof t&&t.amd)t(["module","./clipboard-action","tiny-emitter","good-listener"],r);else if(void 0!==o)r(n,e("./clipboard-action"),e("tiny-emitter"),e("good-listener"));else{var a={exports:{}};r(a,i.clipboardAction,i.tinyEmitter,i.goodListener),i.clipboard=a.exports}})(this,function(t,e,n,o){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function s(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function l(t,e){var n="data-clipboard-"+t;if(e.hasAttribute(n))return e.getAttribute(n)}var c=i(e),u=i(n),f=i(o),d=function(){function t(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,n,o){return n&&t(e.prototype,n),o&&t(e,o),e}}(),p=function(t){function e(t,n){r(this,e);var o=a(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return o.resolveOptions(n),o.listenClick(t),o}return s(e,t),d(e,[{key:"resolveOptions",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.action="function"==typeof t.action?t.action:this.defaultAction,this.target="function"==typeof t.target?t.target:this.defaultTarget,this.text="function"==typeof t.text?t.text:this.defaultText}},{key:"listenClick",value:function(t){var e=this;this.listener=(0,f.default)(t,"click",function(t){return e.onClick(t)})}},{key:"onClick",value:function(t){var e=t.delegateTarget||t.currentTarget;this.clipboardAction&&(this.clipboardAction=null),this.clipboardAction=new c.default({action:this.action(e),target:this.target(e),text:this.text(e),trigger:e,emitter:this})}},{key:"defaultAction",value:function(t){return l("action",t)}},{key:"defaultTarget",value:function(t){var e=l("target",t);if(e)return document.querySelector(e)}},{key:"defaultText",value:function(t){return l("text",t)}},{key:"destroy",value:function(){this.listener.destroy(),this.clipboardAction&&(this.clipboardAction.destroy(),this.clipboardAction=null)}}],[{key:"isSupported",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:["copy","cut"],e="string"==typeof t?[t]:t,n=!!document.queryCommandSupported;return e.forEach(function(t){n=n&&!!document.queryCommandSupported(t)}),n}}]),e}(u.default);t.exports=p})},{"./clipboard-action":7,"good-listener":4,"tiny-emitter":6}]},{},[8])(8)})},function(t,e,n){t.exports=n(1)}]);</script></body>
71 | </html>
72 | 


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