Vue.element example

├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── bower.json ├── component.json ├── example └── example.html ├── package.json └── vue-element.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .* 2 | *.md 3 | *.json 4 | example -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014-2016 Evan You 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Deprecated 2 | 3 | See [karol-f/vue-element](https://github.com/karol-f/vue-element) instead. 4 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-element", 3 | "version": "1.0.0", 4 | "description": "register a custom element with Vue.js.", 5 | "main": "vue-element.js", 6 | "authors": ["Evan You "], 7 | "license": "MIT", 8 | "ignore": [ 9 | ".*", 10 | "*.md", 11 | "*.json", 12 | "example" 13 | ] 14 | } -------------------------------------------------------------------------------- /component.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-element", 3 | "version": "1.0.0", 4 | "description": "register a custom element with Vue.js.", 5 | "main": "vue-element.js", 6 | "keywords": [ 7 | "vue", 8 | "custom-elements" 9 | ], 10 | "author": "Evan You", 11 | "license": "MIT", 12 | "scripts": [ 13 | "vue-element.js" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /example/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue.element example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | original content 14 | 15 | 16 | 41 | 42 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-element", 3 | "version": "1.0.1", 4 | "description": "register a custom element with Vue.js.", 5 | "main": "vue-element.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/vuejs/vue-element" 9 | }, 10 | "keywords": [ 11 | "vue", 12 | "custom-elements" 13 | ], 14 | "author": "Evan You", 15 | "license": "MIT", 16 | "bugs": { 17 | "url": "https://github.com/vuejs/vue-element/issues" 18 | }, 19 | "homepage": "https://github.com/vuejs/vue-element" 20 | } 21 | -------------------------------------------------------------------------------- /vue-element.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 3 | function install (Vue) { 4 | Vue.element = function (tag, options) { 5 | var p = Object.create(HTMLElement.prototype) 6 | // Handle attached/detached callbacks 7 | p.attachedCallback = options.attached 8 | p.detachedCallback = options.detached 9 | // disable Vue's own attached/detached detection 10 | // so we don't fire the callback twice 11 | options.attached = null 12 | options.detached = null 13 | // Handle param attributes 14 | var props = options.props || options.paramAttributes || [] 15 | var propsHash = Object.create(null) 16 | props.forEach(function (name) { 17 | propsHash[name] = true 18 | Object.defineProperty(p, name, { 19 | get: function () { 20 | return this.__vue__[name] 21 | }, 22 | set: function (val) { 23 | this.setAttribute(name, val) 24 | } 25 | }) 26 | }) 27 | p.attributeChangedCallback = function (name, oldVal, newVal) { 28 | if (propsHash[name]) { 29 | this.__vue__[name] = newVal 30 | } 31 | } 32 | // Define the Vue constructor to manage the element 33 | var VM = Vue.extend(options) 34 | p.createdCallback = function () { 35 | var vm = new VM({ 36 | el: this 37 | }) 38 | if (options.shadow) { 39 | var shadow = this.createShadowRoot() 40 | while (this.firstChild) { 41 | shadow.appendChild(this.firstChild) 42 | } 43 | } 44 | } 45 | // register element 46 | document.registerElement(tag, { 47 | prototype: p 48 | }) 49 | } 50 | } 51 | 52 | if (typeof exports == "object") { 53 | module.exports = install 54 | } else if (typeof define == "function" && define.amd) { 55 | define([], function(){ return install }) 56 | } else if (window.Vue) { 57 | Vue.use(install) 58 | } 59 | 60 | })() --------------------------------------------------------------------------------