├── .gitignore ├── README.md ├── build.config.js ├── demo ├── client.3ad7f6c0.css ├── client.828979a9.js └── index.html ├── dist └── v-tag-list.js ├── package.json ├── src ├── Component.vue ├── demo.vue └── index.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | yarn-error.log 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![npm](https://img.shields.io/npm/v/v-tag-list.svg)]() 2 | 3 | # Vue Tag List 4 | 5 | Tiny tag list view for Vue.js 6 | 7 | ## Demo 8 | 9 | https://htmlpreview.github.io/?https://github.com/vuejs-tips/v-tag-list/master/demo/index.html 10 | 11 | ## Usage 12 | 13 | Just bind an array of tags using `v-model` directive or **value** property. 14 | 15 | ```html 16 | 21 | 22 | 34 | ``` 35 | 36 | ## Installation 37 | 38 | ### Using yarn 39 | 40 | `yarn add v-tag-list` 41 | 42 | ### Using npm 43 | 44 | `npm i --save v-tag-list` 45 | 46 | ## Contribution 47 | 48 | You're free to contribute to this project by submitting [issues](https://github.com/vuejs-tips/v-tag-list.svg/issues) and/or [pull requests](https://github.com/vuejs-tips/v-tag-list.svg/pulls). This project is test-driven, so keep in mind that every change and new feature should be covered by tests. Your name will be added to the hall of fame ;) 49 | 50 | ## License 51 | 52 | This project is licensed under [MIT License](http://en.wikipedia.org/wiki/MIT_License) 53 | 54 | Build inspired by [vue-plugin-template](https://github.com/posva/vue-plugin-template) 55 | -------------------------------------------------------------------------------- /build.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require.main.require('webpack') 2 | const {name, version} = require('./package.json') 3 | 4 | const demo = process.env.NODE_ENV === 'development' || process.env.npm_lifecycle_event === 'dist:demo' 5 | 6 | module.exports = { 7 | // generate html only for dev and dist:demo 8 | html: demo, 9 | webpack: { 10 | devtool: false, // disable source-map 11 | output: { 12 | publicPath: '.', // generate client.*.js relative to ./demo/index.html 13 | filename: demo ? undefined : kebabCase(name) + '.js', // my-component.js 14 | library: demo ? undefined : camelCase(name) // MyComponent 15 | }, 16 | plugins: [ 17 | new webpack.DefinePlugin({ 18 | 'proccess.env.VERSION': JSON.stringify(version) // adds MyComponent.version 19 | }) 20 | ] 21 | } 22 | } 23 | 24 | // utils 25 | 26 | // converts MyComponent to my-component 27 | function kebabCase (s) { 28 | return s.replace(/([A-Z])([^A-Z\-])/g, (_, a, b) => `-${a}${b}`) 29 | .toLowerCase() 30 | .replace(/[\s_-]+/g, '-') 31 | .replace(/(^\W)|(\W$)/g, '') 32 | } 33 | 34 | // converts my-component to MyComponent 35 | function camelCase (s) { 36 | return s.replace(/([\-_\s]+[a-z])|(^[a-z])/g, $1 => $1.toUpperCase()) 37 | .replace(/[\-_\s]+/g, '') 38 | } 39 | -------------------------------------------------------------------------------- /demo/client.3ad7f6c0.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/icon?family=Material+Icons); -------------------------------------------------------------------------------- /demo/client.828979a9.js: -------------------------------------------------------------------------------- 1 | (function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p=".",t(t.s=12)})([function(e,t){e.exports=function(e,t,n,r){var o,i=e=e||{},a=typeof e.default;"object"!==a&&"function"!==a||(o=e,i=e.default);var s="function"==typeof i?i.options:i;if(t&&(s.render=t.render,s.staticRenderFns=t.staticRenderFns),n&&(s._scopeId=n),r){var c=s.computed||(s.computed={});Object.keys(r).forEach(function(e){var t=r[e];c[e]=function(){return t}})}return{esModule:o,exports:i,options:s}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(10),o=n(7),i=n.n(o);new r.a({el:"#app",render:function(e){return e(i.a)}})},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={name:"v-tag-list",props:{value:{type:Array,default:function(){return[]}},theme:{type:[String,Object],default:""},removable:{type:Boolean,default:!0}},computed:{activeTheme:function(){return"string"==typeof this.theme?this.$options.themes[this.theme]||{}:this.theme||{}}},methods:{remove:function(e){var t=this.value.slice();t.splice(e,1),this.$emit("input",t)}},themes:{bulma:{tag:"tag is-info",remove:"delete is-small"},"semantic-ui":{tag:"ui small blue label tag",remove:"delete icon"},materialize:{tag:"chip",remove:"close material-icons"},bootstrap:{tag:"badge badge-primary d-inline-flex align-items-center",remove:"close"}}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(4),o=n.n(r);t.default={components:{VTagList:o.a},data:function(){return{tags:["php","ruby","javascript","python","java","c#","scala","closure"],themes:Object.keys(o.a.themes),theme:"bulma",removable:!0,version:o.a.version}}}},function(e,t,n){var r=n(6);e.exports=r,r.install=function(e){return e.component(r.name,r)},r.version="0.0.2","undefined"!=typeof window&&window.Vue&&window.Vue.use(r)},function(e,t){},function(e,t,n){var r=n(0)(n(2),n(9),null,null);e.exports=r.exports},function(e,t,n){n(5);var r=n(0)(n(3),n(8),null,null);e.exports=r.exports},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"ui container",staticStyle:{"padding-top":"50px"}},[n("h1",{staticClass:"title is-1"},[e._v("v-tag-list ("+e._s(e.version)+")")]),e._v(" "),"semantic-ui"==e.theme?n("link",{attrs:{href:"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css",rel:"stylesheet"}}):e._e(),e._v(" "),"bulma"==e.theme?n("link",{attrs:{href:"https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.min.css",rel:"stylesheet"}}):e._e(),e._v(" "),"materialize"==e.theme?n("link",{attrs:{href:"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css",rel:"stylesheet"}}):e._e(),e._v(" "),"bootstrap"==e.theme?n("link",{attrs:{href:"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css",rel:"stylesheet"}}):e._e(),e._v(" "),n("v-tag-list",{attrs:{theme:e.theme,removable:e.removable},model:{value:e.tags,callback:function(t){e.tags=t}}}),e._v(" "),n("div",{staticClass:"input-field"},[n("input",{directives:[{name:"model",rawName:"v-model",value:e.theme,expression:"theme"}],attrs:{id:"none",type:"radio",value:""},domProps:{checked:e._q(e.theme,"")},on:{__c:function(t){e.theme=""}}}),e._v(" "),n("label",{attrs:{for:"none"}},[e._v("None")])]),e._v(" "),e._l(e.themes,function(t){return n("div",[n("div",{staticClass:"input-field"},[n("input",{directives:[{name:"model",rawName:"v-model",value:e.theme,expression:"theme"}],attrs:{id:t,type:"radio"},domProps:{value:t,checked:e._q(e.theme,t)},on:{__c:function(n){e.theme=t}}}),e._v(" "),n("label",{attrs:{for:t}},[e._v(e._s(t))])])])}),e._v(" "),n("div",{staticClass:"input-field"},[n("input",{directives:[{name:"model",rawName:"v-model",value:e.removable,expression:"removable"}],attrs:{id:"removable",type:"checkbox"},domProps:{checked:Array.isArray(e.removable)?e._i(e.removable,null)>-1:e.removable},on:{__c:function(t){var n=e.removable,r=t.target,o=!!r.checked;if(Array.isArray(n)){var i=null,a=e._i(n,i);o?a<0&&(e.removable=n.concat(i)):a>-1&&(e.removable=n.slice(0,a).concat(n.slice(a+1)))}else e.removable=o}}}),e._v(" "),n("label",{attrs:{for:"removable"}},[e._v("Removable")])]),e._v(" "),n("pre",[e._v(e._s(e.tags))])],2)},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"v-tag-list"},e._l(e.value,function(t,r){return n("span",{class:e.activeTheme.tag,staticStyle:{"margin-right":"2px"}},[e._v("\n "+e._s(t)+"\n "),e.removable?n("i",{class:e.activeTheme.remove,on:{click:function(t){e.remove(r)}}},["bootstrap"===e.theme?n("span",[e._v("×")]):e._e(),e._v(" "),"materialize"===e.theme?n("span",[e._v("close")]):e._e()]):e._e()])}))},staticRenderFns:[]}},function(e,t,n){"use strict";(function(e){function n(e){return null==e?"":"object"==typeof e?JSON.stringify(e,null,2):String(e)}function r(e){var t=parseFloat(e);return isNaN(t)?e:t}function o(e,t){for(var n=Object.create(null),r=e.split(","),o=0;o-1)return e.splice(n,1)}}function a(e,t){return Kn.call(e,t)}function s(e){return"string"==typeof e||"number"==typeof e}function c(e){var t=Object.create(null);return function(n){var r=t[n];return r||(t[n]=e(n))}}function u(e,t){function n(n){var r=arguments.length;return r?r>1?e.apply(t,arguments):e.call(t,n):e.call(t)}return n._length=e.length,n}function l(e,t){t=t||0;for(var n=e.length-t,r=new Array(n);n--;)r[n]=e[n+t];return r}function f(e,t){for(var n in t)e[n]=t[n];return e}function p(e){return null!==e&&"object"==typeof e}function d(e){return Yn.call(e)===er}function v(e){for(var t={},n=0;n1?l(n):n;for(var r=l(arguments,1),o=0,i=n.length;o=0&&Lr[n].id>e.id;)n--;Lr.splice(Math.max(n,Vr)+1,0,e)}else Lr.push(e);Rr||(Rr=!0,mr(me))}}function _e(e){Fr.clear(),ge(e,Fr)}function ge(e,t){var n,r,o=Array.isArray(e);if((o||p(e))&&Object.isExtensible(e)){if(e.__ob__){var i=e.__ob__.dep.id;if(t.has(i))return;t.add(i)}if(o)for(n=e.length;n--;)ge(e[n],t);else for(r=Object.keys(e),n=r.length;n--;)ge(e[r[n]],t)}}function be(e,t,n){Hr.get=function(){return this[t][n]},Hr.set=function(e){this[t][n]=e},Object.defineProperty(e,n,Hr)}function we(e){e._watchers=[];var t=e.$options;t.props&&Ce(e,t.props),t.methods&&Oe(e,t.methods),t.data?xe(e):O(e._data={},!0),t.computed&&$e(e,t.computed),t.watch&&Se(e,t.watch)}function Ce(e,t){var n=e.$options.propsData||{},r=e._props={},o=e.$options._propKeys=[],i=!e.$parent;Ar.shouldConvert=i;var a=function(i){o.push(i);var a=U(i,t,n,e);S(r,i,a),i in e||be(e,"_props",i)};for(var s in t)a(s);Ar.shouldConvert=!0}function xe(e){var t=e.$options.data;t=e._data="function"==typeof t?t.call(e):t||{},d(t)||(t={});for(var n=Object.keys(t),r=e.$options.props,o=n.length;o--;)r&&a(r,n[o])||b(n[o])||be(e,"_data",n[o]);O(t,!0)}function $e(e,t){var n=e._computedWatchers=Object.create(null);for(var r in t){var o=t[r],i="function"==typeof o?o:o.get;n[r]=new zr(e,i,h,qr),r in e||ke(e,r,o)}}function ke(e,t,n){"function"==typeof n?(Hr.get=Ae(t),Hr.set=h):(Hr.get=n.get?n.cache!==!1?Ae(t):n.get:h,Hr.set=n.set?n.set:h),Object.defineProperty(e,t,Hr)}function Ae(e){return function(){var t=this._computedWatchers&&this._computedWatchers[e];if(t)return t.dirty&&t.evaluate(),wr.target&&t.depend(),t.value}}function Oe(e,t){e.$options.props;for(var n in t)e[n]=null==t[n]?h:u(t[n],e)}function Se(e,t){for(var n in t){var r=t[n];if(Array.isArray(r))for(var o=0;o-1:e instanceof RegExp&&e.test(t)}function gt(e,t){for(var n in e){var r=e[n];if(r){var o=yt(r.componentOptions);o&&!t(o)&&(bt(r),e[n]=null)}}}function bt(e){e&&(e.componentInstance._inactive||ve(e.componentInstance,"deactivated"),e.componentInstance.$destroy())}function wt(e){var t={};t.get=function(){return rr},Object.defineProperty(e,"config",t),e.util={warn:gr,extend:f,mergeOptions:M,defineReactive:S},e.set=j,e.delete=E,e.nextTick=mr,e.options=Object.create(null),rr._assetTypes.forEach(function(t){e.options[t+"s"]=Object.create(null)}),e.options._base=e,f(e.options.components,Yr),ft(e),pt(e),dt(e),mt(e)}function Ct(e){for(var t=e.data,n=e,r=e;r.componentInstance;)r=r.componentInstance._vnode,r.data&&(t=xt(r.data,t));for(;n=n.parent;)n.data&&(t=xt(t,n.data));return $t(t)}function xt(e,t){return{staticClass:kt(e.staticClass,t.staticClass),class:e.class?[e.class,t.class]:t.class}}function $t(e){var t=e.class,n=e.staticClass;return n||t?kt(n,At(t)):""}function kt(e,t){return e?t?e+" "+t:e:t||""}function At(e){var t="";if(!e)return t;if("string"==typeof e)return e;if(Array.isArray(e)){for(var n,r=0,o=e.length;r-1?ho[e]=t.constructor===window.HTMLUnknownElement||t.constructor===window.HTMLElement:ho[e]=/HTMLUnknownElement/.test(t.toString())}function jt(e){if("string"==typeof e){var t=document.querySelector(e);return t?t:document.createElement("div")}return e}function Et(e,t){var n=document.createElement(e);return"select"!==e?n:(t.data&&t.data.attrs&&void 0!==t.data.attrs.multiple&&n.setAttribute("multiple","multiple"),n)}function Tt(e,t){return document.createElementNS(lo[e],t)}function It(e){return document.createTextNode(e)}function Dt(e){return document.createComment(e)}function Nt(e,t,n){e.insertBefore(t,n)}function Pt(e,t){e.removeChild(t)}function Lt(e,t){e.appendChild(t)}function Mt(e){return e.parentNode}function Rt(e){return e.nextSibling}function Ut(e){return e.tagName}function Vt(e,t){e.textContent=t}function Bt(e,t,n){e.setAttribute(t,n)}function zt(e,t){var n=e.data.ref;if(n){var r=e.context,o=e.componentInstance||e.elm,a=r.$refs;t?Array.isArray(a[n])?i(a[n],o):a[n]===o&&(a[n]=void 0):e.data.refInFor?Array.isArray(a[n])&&a[n].indexOf(o)<0?a[n].push(o):a[n]=[o]:a[n]=o}}function Ft(e){return null==e}function Ht(e){return null!=e}function qt(e,t){return e.key===t.key&&e.tag===t.tag&&e.isComment===t.isComment&&!e.data==!t.data}function Wt(e,t,n){var r,o,i={};for(r=t;r<=n;++r)o=e[r].key,Ht(o)&&(i[o]=r);return i}function Kt(e){function t(e){return new Er(O.tagName(e).toLowerCase(),{},[],void 0,e)}function n(e,t){function n(){0===--n.listeners&&r(e)}return n.listeners=t,n}function r(e){var t=O.parentNode(e);t&&O.removeChild(t,e)}function i(e,t,n,r,o){if(e.isRootInsert=!o,!a(e,t,n,r)){var i=e.data,s=e.children,c=e.tag;Ht(c)?(e.elm=e.ns?O.createElementNS(e.ns,c):O.createElement(c,e),v(e),f(e,s,t),Ht(i)&&d(e,t),l(n,e.elm,r)):e.isComment?(e.elm=O.createComment(e.text),l(n,e.elm,r)):(e.elm=O.createTextNode(e.text),l(n,e.elm,r))}}function a(e,t,n,r){var o=e.data;if(Ht(o)){var i=Ht(e.componentInstance)&&o.keepAlive;if(Ht(o=o.hook)&&Ht(o=o.init)&&o(e,!1,n,r),Ht(e.componentInstance))return c(e,t),i&&u(e,t,n,r),!0}}function c(e,t){e.data.pendingInsert&&t.push.apply(t,e.data.pendingInsert),e.elm=e.componentInstance.$el,p(e)?(d(e,t),v(e)):(zt(e),t.push(e))}function u(e,t,n,r){for(var o,i=e;i.componentInstance;)if(i=i.componentInstance._vnode,Ht(o=i.data)&&Ht(o=o.transition)){for(o=0;op?(u=Ft(n[m+1])?null:n[m+1].elm,h(e,u,n,f,m,r)):f>m&&y(e,t,l,p)}function b(e,t,n,r){if(e!==t){if(t.isStatic&&e.isStatic&&t.key===e.key&&(t.isCloned||t.isOnce))return t.elm=e.elm,void(t.componentInstance=e.componentInstance);var o,i=t.data,a=Ht(i);a&&Ht(o=i.hook)&&Ht(o=o.prepatch)&&o(e,t);var s=t.elm=e.elm,c=e.children,u=t.children;if(a&&p(t)){for(o=0;o-1?t.split(/\s+/).forEach(function(t){return e.classList.add(t)}):e.classList.add(t);else{var n=" "+(e.getAttribute("class")||"")+" ";n.indexOf(" "+t+" ")<0&&e.setAttribute("class",(n+t).trim())}}function mn(e,t){if(t&&(t=t.trim()))if(e.classList)t.indexOf(" ")>-1?t.split(/\s+/).forEach(function(t){return e.classList.remove(t)}):e.classList.remove(t);else{for(var n=" "+(e.getAttribute("class")||"")+" ",r=" "+t+" ";n.indexOf(r)>=0;)n=n.replace(r," ");e.setAttribute("class",n.trim())}}function yn(e){if(e){if("object"==typeof e){var t={};return e.css!==!1&&f(t,Lo(e.name||"v")),f(t,e),t}return"string"==typeof e?Lo(e):void 0}}function _n(e){Ho(function(){Ho(e)})}function gn(e,t){(e._transitionClasses||(e._transitionClasses=[])).push(t),hn(e,t)}function bn(e,t){e._transitionClasses&&i(e._transitionClasses,t),mn(e,t)}function wn(e,t,n){var r=Cn(e,t),o=r.type,i=r.timeout,a=r.propCount;if(!o)return n();var s=o===Ro?Bo:Fo,c=0,u=function(){e.removeEventListener(s,l),n()},l=function(t){t.target===e&&++c>=a&&u()};setTimeout(function(){c0&&(n=Ro,l=a,f=i.length):t===Uo?u>0&&(n=Uo,l=u,f=c.length):(l=Math.max(a,u),n=l>0?a>u?Ro:Uo:null,f=n?n===Ro?i.length:c.length:0);var p=n===Ro&&qo.test(r[Vo+"Property"]);return{type:n,timeout:l,propCount:f,hasTransform:p}}function xn(e,t){for(;e.length1}function jn(e,t){t.data.show||kn(t)}function En(e,t,n){var r=t.value,o=e.multiple;if(!o||Array.isArray(r)){for(var i,a,s=0,c=e.options.length;s-1,a.selected!==i&&(a.selected=i);else if(m(In(a),r))return void(e.selectedIndex!==s&&(e.selectedIndex=s));o||(e.selectedIndex=-1)}}function Tn(e,t){for(var n=0,r=t.length;n0,ur=ar&&ar.indexOf("edge/")>0,lr=ar&&ar.indexOf("android")>0,fr=ar&&/iphone|ipad|ipod|ios/.test(ar),pr=ar&&/chrome\/\d+/.test(ar)&&!ur,dr=function(){return void 0===qn&&(qn=!ir&&"undefined"!=typeof e&&"server"===e.process.env.VUE_ENV),qn},vr=ir&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__,hr="undefined"!=typeof Symbol&&g(Symbol)&&"undefined"!=typeof Reflect&&g(Reflect.ownKeys),mr=function(){function e(){r=!1;var e=n.slice(0);n.length=0;for(var t=0;t1&&(t[n[0].trim()]=n[1].trim())}}),t}),Eo=/^--/,To=/\s*!important$/,Io=function(e,t,n){Eo.test(t)?e.style.setProperty(t,n):To.test(n)?e.style.setProperty(t,n.replace(To,""),"important"):e.style[No(t)]=n},Do=["Webkit","Moz","ms"],No=c(function(e){if(to=to||document.createElement("div"),e=Gn(e),"filter"!==e&&e in to.style)return e;for(var t=e.charAt(0).toUpperCase()+e.slice(1),n=0;n 2 | 3 | 4 | 5 | Vue App 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /dist/v-tag-list.js: -------------------------------------------------------------------------------- 1 | (function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VTagList=t():e.VTagList=t()})(this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p=".",t(t.s=5)}([function(e,t,n){var o=n(2);e.exports=o,o.install=function(e){return e.component(o.name,o)},o.version="0.0.2","undefined"!=typeof window&&window.Vue&&window.Vue.use(o)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={name:"v-tag-list",props:{value:{type:Array,default:function(){return[]}},theme:{type:[String,Object],default:""},removable:{type:Boolean,default:!0}},computed:{activeTheme:function(){return"string"==typeof this.theme?this.$options.themes[this.theme]||{}:this.theme||{}}},methods:{remove:function(e){var t=this.value.slice();t.splice(e,1),this.$emit("input",t)}},themes:{bulma:{tag:"tag is-info",remove:"delete is-small"},"semantic-ui":{tag:"ui small blue label tag",remove:"delete icon"},materialize:{tag:"chip",remove:"close material-icons"},bootstrap:{tag:"badge badge-primary d-inline-flex align-items-center",remove:"close"}}}},function(e,t,n){var o=n(3)(n(1),n(4),null,null);e.exports=o.exports},function(e,t){e.exports=function(e,t,n,o){var r,i=e=e||{},a=typeof e.default;"object"!==a&&"function"!==a||(r=e,i=e.default);var s="function"==typeof i?i.options:i;if(t&&(s.render=t.render,s.staticRenderFns=t.staticRenderFns),n&&(s._scopeId=n),o){var u=s.computed||(s.computed={});Object.keys(o).forEach(function(e){var t=o[e];u[e]=function(){return t}})}return{esModule:r,exports:i,options:s}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"v-tag-list"},e._l(e.value,function(t,o){return n("span",{class:e.activeTheme.tag,staticStyle:{"margin-right":"2px"}},[e._v("\n "+e._s(t)+"\n "),e.removable?n("i",{class:e.activeTheme.remove,on:{click:function(t){e.remove(o)}}},["bootstrap"===e.theme?n("span",[e._v("×")]):e._e(),e._v(" "),"materialize"===e.theme?n("span",[e._v("close")]):e._e()]):e._e()])}))},staticRenderFns:[]}},function(e,t,n){e.exports=n(0)}])}); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "v-tag-list", 3 | "version": "0.0.2", 4 | "description": "Vue.js tiny tag list view component", 5 | "homepage": "https://medium.com/vuejs-tips", 6 | "author": "Marcos Neves (https://medium.com/vuejs-tips)", 7 | "main": "dist/v-tag-list.js", 8 | "license": "MIT", 9 | "files": [ 10 | "dist/" 11 | ], 12 | "scripts": { 13 | "dist": "vue build ./src/index.js --config ./build.config.js --dist ./dist/ --prod --lib", 14 | "dist:demo": "vue build ./src/demo.vue --config ./build.config.js --dist ./demo/ --prod", 15 | "build": "npm run dist -- --disable-compress", 16 | "start": "npm run dev", 17 | "dev": "vue build ./src/demo.vue --config ./build.config.js", 18 | "demo:open": "open 'http://localhost:3000/'; serve ./demo/", 19 | "deploy": "npm version patch && npm run dist && npm run dist:demo" 20 | }, 21 | "keywords": [ 22 | "vue", 23 | "tag", 24 | "component", 25 | "list" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /src/Component.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 63 | -------------------------------------------------------------------------------- /src/demo.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 50 | 51 | 54 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | // need to use require instead of import (changes from babel 5 to 6) 2 | const Component = require('./Component.vue') 3 | module.exports = Component 4 | 5 | Component.install = Vue => Vue.component(Component.name, Component) 6 | Component.version = proccess.env.VERSION 7 | 8 | // Install by default if using the script tag 9 | if (typeof window !== 'undefined' && window.Vue) { 10 | window.Vue.use(Component) 11 | } 12 | -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | --------------------------------------------------------------------------------