├── .editorconfig ├── .gitignore ├── README.md ├── babel.config.js ├── docs ├── favicon.ico ├── favicon.png ├── img │ ├── logo.png │ └── preview.gif ├── index.html └── js │ ├── app.fdaf3b89.js │ ├── app.fdaf3b89.js.map │ ├── chunk-vendors.c24a1472.js │ └── chunk-vendors.c24a1472.js.map ├── package.json ├── src ├── App.vue ├── components │ └── VNumber.vue ├── index.js └── main.js ├── vue.config.js └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | /public 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 | 5 | # V-Number 6 | 7 | ## Animated number transition library for Vue.js 8 | 9 | ### Simple lightweight library for smooth vertical number transitions 10 | 11 | [LIVE DEMO](https://maxflex.github.io/v-number/): animated likes counter 12 | 13 | 14 | 15 | ## Installation 16 | 17 | ``` 18 | yarn add @maxflex/v-number 19 | // or 20 | npm install @maxflex/v-number 21 | ``` 22 | 23 | ## Usage 24 | 25 | Just import: 26 | 27 | ```js 28 | import { VNumber } from "@maxflex/v-number"; 29 | ``` 30 | 31 | And use: 32 | 33 | ```html 34 | 35 | ``` 36 | 37 | ## Customization 38 | 39 | You can set custom animation speed in ms: 40 | 41 | ```html 42 | 43 | ``` 44 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxflex/v-number/5e10f9e2dffa9b90eb6fd190ae31a080b306c47c/docs/favicon.ico -------------------------------------------------------------------------------- /docs/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxflex/v-number/5e10f9e2dffa9b90eb6fd190ae31a080b306c47c/docs/favicon.png -------------------------------------------------------------------------------- /docs/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxflex/v-number/5e10f9e2dffa9b90eb6fd190ae31a080b306c47c/docs/img/logo.png -------------------------------------------------------------------------------- /docs/img/preview.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maxflex/v-number/5e10f9e2dffa9b90eb6fd190ae31a080b306c47c/docs/img/preview.gif -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | V-Number – Animated number transition library for Vue.js
-------------------------------------------------------------------------------- /docs/js/app.fdaf3b89.js: -------------------------------------------------------------------------------- 1 | (function(e){function t(t){for(var i,o,l=t[0],s=t[1],u=t[2],p=0,b=[];p\n ")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("iframe",{attrs:{src:"https://ghbtns.com/github-btn.html?user=maxflex&repo=v-number&type=star&count=true&size=large",frameborder:"0",scrolling:"0",width:"160px",height:"30px"}})])}],o=(n("6b54"),function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"v-number"},[n("transition",{attrs:{name:"v-number-current-value"}},[null!==e.currentValue?n("div",{staticClass:"v-number__animated v-number__current-value",style:e.transitionDuration},[e._v("\n "+e._s(e.currentValue)+"\n ")]):e._e()]),n("transition",{attrs:{name:"v-number-new-value"}},[null!==e.newValue?n("div",{staticClass:"v-number__animated v-number__new-value",style:e.transitionDuration},[e._v("\n "+e._s(e.newValue)+"\n ")]):e._e()]),n("span",{staticClass:"v-number__original-value"},[e._v("\n "+e._s(e.value)+"\n ")])],1)}),l=[],s=(n("c5f6"),{name:"v-number",props:{value:{required:!0,validator:function(e){return!isNaN(e)}},speed:{type:Number,default:500}},watch:{value:function(e){var t=this;this.isAnimating||(this.isAnimating=!0,this.currentValue=null,this.newValue=e,setTimeout((function(){t.currentValue=e,t.newValue=null,t.isAnimating=!1}),this.speed))}},data:function(){return{currentValue:null,newValue:null,isAnimating:!1}},created:function(){this.currentValue=this.value},computed:{transitionDuration:function(){return{transitionDuration:this.speed+"ms"}}}}),u=s,c=(n("f2f6"),n("2877")),p=Object(c["a"])(u,o,l,!1,null,"484b7acc",null),b=p.exports,d={components:{VNumber:b},data:function(){return{number:1,likes:153,isLiked:!1,intervalSpeed:2e3,interval:null}},created:function(){this.startInterval()},methods:{startInterval:function(){var e=this;this.interval=setInterval((function(){return e.number++}),this.intervalSpeed)},clearInterval:function(e){function t(){return e.apply(this,arguments)}return t.toString=function(){return e.toString()},t}((function(){clearInterval(this.interval)})),like:function(){this.likes+=1}}},f=d,m=(n("5c0b"),Object(c["a"])(f,r,a,!1,null,null,null)),v=m.exports;i["a"].config.productionTip=!1,new i["a"]({render:function(e){return e(v)}}).$mount("#app")},"5c0b":function(e,t,n){"use strict";var i=n("a859"),r=n.n(i);r.a},"68cc":function(e,t,n){var i=n("125a");"string"===typeof i&&(i=[[e.i,i,""]]),i.locals&&(e.exports=i.locals);var r=n("499e").default;r("250e7e4e",i,!0,{sourceMap:!1,shadowMode:!1})},8144:function(e,t,n){t=e.exports=n("2350")(!1),t.push([e.i,"body,html{height:100%;padding:0;margin:0;overflow:hidden;background:-webkit-gradient(linear,left top,left bottom,from(#34495e),color-stop(#1e647c),color-stop(#00818f),color-stop(#009e90),to(#41b883));background:linear-gradient(180deg,#34495e,#1e647c,#00818f,#009e90,#41b883);color:#fff;font-family:Open Sans,sans-serif}code{background:rgba(0,0,0,.5);width:460px;display:block;padding:20px;border-radius:2px}.header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.header__logo{height:120px}.header__title{font-size:82px;margin-left:18px}.v-number-example{font-size:100px;color:#db7093}.app{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.app,input{padding:10px}input{border:none;border-radius:4px;font-size:16px;background:hsla(0,0%,100%,.5);outline:none;width:60px}.likes-counter-example,.likes-counter-example__likes{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.likes-counter-example__likes{margin-right:30px}.likes-counter-example__likes .material-icons{margin-right:3px;color:#db7093}.likes-counter-example__likes .v-number{margin-right:3px;color:#db7093;font-weight:700}.likes-counter-example__button{display:-webkit-box;display:-ms-flexbox;display:flex;background-color:#4267b2;padding:6px 30px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:6px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;cursor:pointer;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.likes-counter-example__button:hover{background-color:#3a5a9c;-webkit-box-shadow:8px 8px rgba(0,0,0,.5);box-shadow:8px 8px rgba(0,0,0,.5);-webkit-transform:scale(1.04);transform:scale(1.04)}.likes-counter-example__button:active{background-color:#375694;-webkit-transform:scale(1.01);transform:scale(1.01);-webkit-box-shadow:2px 2px rgba(0,0,0,.5);box-shadow:2px 2px rgba(0,0,0,.5)}.likes-counter-example__button .material-icons{margin-right:5px;font-size:18px}",""])},a859:function(e,t,n){var i=n("8144");"string"===typeof i&&(i=[[e.i,i,""]]),i.locals&&(e.exports=i.locals);var r=n("499e").default;r("469a83a7",i,!0,{sourceMap:!1,shadowMode:!1})},f2f6:function(e,t,n){"use strict";var i=n("68cc"),r=n.n(i);r.a}}); 2 | //# sourceMappingURL=app.fdaf3b89.js.map -------------------------------------------------------------------------------- /docs/js/app.fdaf3b89.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/components/VNumber.vue?902f","webpack:///./src/App.vue?f8fa","webpack:///./src/components/VNumber.vue?4c28","webpack:///src/components/VNumber.vue","webpack:///./src/components/VNumber.vue?3fc7","webpack:///./src/components/VNumber.vue","webpack:///src/App.vue","webpack:///./src/App.vue?a37b","webpack:///./src/App.vue","webpack:///./src/main.js","webpack:///./src/App.vue?971d","webpack:///./src/components/VNumber.vue?7911","webpack:///./src/App.vue?46d3","webpack:///./src/App.vue?ed3f","webpack:///./src/components/VNumber.vue?8f65"],"names":["webpackJsonpCallback","data","moduleId","chunkId","chunkIds","moreModules","executeModules","i","resolves","length","Object","prototype","hasOwnProperty","call","installedChunks","push","modules","parentJsonpFunction","shift","deferredModules","apply","checkDeferredModules","result","deferredModule","fulfilled","j","depId","splice","__webpack_require__","s","installedModules","exports","module","l","m","c","d","name","getter","o","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","p","jsonpArray","window","oldJsonpFunction","slice","_vm","this","_h","$createElement","_c","_self","staticClass","_m","attrs","number","staticStyle","_v","model","callback","$$v","likes","expression","on","$event","like","staticRenderFns","currentValue","style","_s","_e","newValue","props","required","validator","isNaN","speed","type","Number","default","watch","isAnimating","setTimeout","created","computed","transitionDuration","component","components","VNumber","isLiked","intervalSpeed","interval","startInterval","methods","setInterval","clearInterval","Vue","config","productionTip","render","h","App","$mount","content","locals","add"],"mappings":"aACE,SAASA,EAAqBC,GAQ7B,IAPA,IAMIC,EAAUC,EANVC,EAAWH,EAAK,GAChBI,EAAcJ,EAAK,GACnBK,EAAiBL,EAAK,GAIHM,EAAI,EAAGC,EAAW,GACpCD,EAAIH,EAASK,OAAQF,IACzBJ,EAAUC,EAASG,GAChBG,OAAOC,UAAUC,eAAeC,KAAKC,EAAiBX,IAAYW,EAAgBX,IACpFK,EAASO,KAAKD,EAAgBX,GAAS,IAExCW,EAAgBX,GAAW,EAE5B,IAAID,KAAYG,EACZK,OAAOC,UAAUC,eAAeC,KAAKR,EAAaH,KACpDc,EAAQd,GAAYG,EAAYH,IAG/Be,GAAqBA,EAAoBhB,GAE5C,MAAMO,EAASC,OACdD,EAASU,OAATV,GAOD,OAHAW,EAAgBJ,KAAKK,MAAMD,EAAiBb,GAAkB,IAGvDe,IAER,SAASA,IAER,IADA,IAAIC,EACIf,EAAI,EAAGA,EAAIY,EAAgBV,OAAQF,IAAK,CAG/C,IAFA,IAAIgB,EAAiBJ,EAAgBZ,GACjCiB,GAAY,EACRC,EAAI,EAAGA,EAAIF,EAAed,OAAQgB,IAAK,CAC9C,IAAIC,EAAQH,EAAeE,GACG,IAA3BX,EAAgBY,KAAcF,GAAY,GAE3CA,IACFL,EAAgBQ,OAAOpB,IAAK,GAC5Be,EAASM,EAAoBA,EAAoBC,EAAIN,EAAe,KAItE,OAAOD,EAIR,IAAIQ,EAAmB,GAKnBhB,EAAkB,CACrB,IAAO,GAGJK,EAAkB,GAGtB,SAASS,EAAoB1B,GAG5B,GAAG4B,EAAiB5B,GACnB,OAAO4B,EAAiB5B,GAAU6B,QAGnC,IAAIC,EAASF,EAAiB5B,GAAY,CACzCK,EAAGL,EACH+B,GAAG,EACHF,QAAS,IAUV,OANAf,EAAQd,GAAUW,KAAKmB,EAAOD,QAASC,EAAQA,EAAOD,QAASH,GAG/DI,EAAOC,GAAI,EAGJD,EAAOD,QAKfH,EAAoBM,EAAIlB,EAGxBY,EAAoBO,EAAIL,EAGxBF,EAAoBQ,EAAI,SAASL,EAASM,EAAMC,GAC3CV,EAAoBW,EAAER,EAASM,IAClC3B,OAAO8B,eAAeT,EAASM,EAAM,CAAEI,YAAY,EAAMC,IAAKJ,KAKhEV,EAAoBe,EAAI,SAASZ,GACX,qBAAXa,QAA0BA,OAAOC,aAC1CnC,OAAO8B,eAAeT,EAASa,OAAOC,YAAa,CAAEC,MAAO,WAE7DpC,OAAO8B,eAAeT,EAAS,aAAc,CAAEe,OAAO,KAQvDlB,EAAoBmB,EAAI,SAASD,EAAOE,GAEvC,GADU,EAAPA,IAAUF,EAAQlB,EAAoBkB,IAC/B,EAAPE,EAAU,OAAOF,EACpB,GAAW,EAAPE,GAA8B,kBAAVF,GAAsBA,GAASA,EAAMG,WAAY,OAAOH,EAChF,IAAII,EAAKxC,OAAOyC,OAAO,MAGvB,GAFAvB,EAAoBe,EAAEO,GACtBxC,OAAO8B,eAAeU,EAAI,UAAW,CAAET,YAAY,EAAMK,MAAOA,IACtD,EAAPE,GAA4B,iBAATF,EAAmB,IAAI,IAAIM,KAAON,EAAOlB,EAAoBQ,EAAEc,EAAIE,EAAK,SAASA,GAAO,OAAON,EAAMM,IAAQC,KAAK,KAAMD,IAC9I,OAAOF,GAIRtB,EAAoB0B,EAAI,SAAStB,GAChC,IAAIM,EAASN,GAAUA,EAAOiB,WAC7B,WAAwB,OAAOjB,EAAO,YACtC,WAA8B,OAAOA,GAEtC,OADAJ,EAAoBQ,EAAEE,EAAQ,IAAKA,GAC5BA,GAIRV,EAAoBW,EAAI,SAASgB,EAAQC,GAAY,OAAO9C,OAAOC,UAAUC,eAAeC,KAAK0C,EAAQC,IAGzG5B,EAAoB6B,EAAI,aAExB,IAAIC,EAAaC,OAAO,gBAAkBA,OAAO,iBAAmB,GAChEC,EAAmBF,EAAW3C,KAAKsC,KAAKK,GAC5CA,EAAW3C,KAAOf,EAClB0D,EAAaA,EAAWG,QACxB,IAAI,IAAItD,EAAI,EAAGA,EAAImD,EAAWjD,OAAQF,IAAKP,EAAqB0D,EAAWnD,IAC3E,IAAIU,EAAsB2C,EAI1BzC,EAAgBJ,KAAK,CAAC,EAAE,kBAEjBM,K,gECvJTU,EAAUC,EAAOD,QAAU,EAAQ,OAAR,EAAyD,GAKpFA,EAAQhB,KAAK,CAACiB,EAAOzB,EAAI,smBAAumB,M,mGCL5nB,EAAS,WAAa,IAAIuD,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,OAAO,CAACF,EAAG,MAAM,CAACJ,EAAIO,GAAG,GAAGP,EAAIO,GAAG,GAAGH,EAAG,WAAW,CAACE,YAAY,mBAAmBE,MAAM,CAAC,MAAQR,EAAIS,WAAW,GAAGL,EAAG,MAAM,CAACM,YAAY,CAAC,aAAa,UAAU,CAACN,EAAG,IAAI,CAACJ,EAAIW,GAAG,sCAAsCP,EAAG,MAAM,CAACE,YAAY,yBAAyB,CAACF,EAAG,MAAM,CAACE,YAAY,gCAAgC,CAACF,EAAG,IAAI,CAACE,YAAY,kBAAkB,CAACN,EAAIW,GAAG,cAAcP,EAAG,WAAW,CAACQ,MAAM,CAAC5B,MAAOgB,EAAS,MAAEa,SAAS,SAAUC,GAAMd,EAAIe,MAAMD,GAAKE,WAAW,WAAWZ,EAAG,OAAO,CAACJ,EAAIW,GAAG,qBAAqB,GAAGP,EAAG,MAAM,CAACE,YAAY,gCAAgCW,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOlB,EAAImB,UAAU,CAACf,EAAG,IAAI,CAACE,YAAY,kBAAkB,CAACN,EAAIW,GAAG,cAAcP,EAAG,OAAO,CAACJ,EAAIW,GAAG,cAAcP,EAAG,IAAI,CAACM,YAAY,CAAC,aAAa,SAAS,CAACV,EAAIW,GAAG,YAAYX,EAAIO,GAAG,KAAKH,EAAG,MAAM,CAACM,YAAY,CAAC,KAAO,OAAOV,EAAIO,GAAG,MAC17Ba,EAAkB,CAAC,WAAa,IAAIpB,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,UAAU,CAACF,EAAG,MAAM,CAACE,YAAY,eAAeE,MAAM,CAAC,IAAM,kBAAkBJ,EAAG,KAAK,CAACE,YAAY,iBAAiB,CAACN,EAAIW,GAAG,eAAe,WAAa,IAAIX,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,KAAK,CAACM,YAAY,CAAC,aAAa,WAAW,CAACV,EAAIW,GAAG,yEAAyEP,EAAG,SAAS,WAAa,IAAIJ,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,OAAO,CAACA,EAAG,MAAM,CAACJ,EAAIW,GAAG,yDAAyD,WAAa,IAAIX,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACA,EAAG,SAAS,CAACI,MAAM,CAAC,IAAM,gGAAgG,YAAc,IAAI,UAAY,IAAI,MAAQ,QAAQ,OAAS,cCDh6B,G,UAAS,WAAa,IAAIR,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,YAAY,CAACF,EAAG,aAAa,CAACI,MAAM,CAAC,KAAO,2BAA2B,CAAuB,OAArBR,EAAIqB,aAAuBjB,EAAG,MAAM,CAACE,YAAY,6CAA6CgB,MAAOtB,EAAsB,oBAAG,CAACA,EAAIW,GAAG,WAAWX,EAAIuB,GAAGvB,EAAIqB,cAAc,YAAYrB,EAAIwB,OAAOpB,EAAG,aAAa,CAACI,MAAM,CAAC,KAAO,uBAAuB,CAAmB,OAAjBR,EAAIyB,SAAmBrB,EAAG,MAAM,CAACE,YAAY,yCAAyCgB,MAAOtB,EAAsB,oBAAG,CAACA,EAAIW,GAAG,WAAWX,EAAIuB,GAAGvB,EAAIyB,UAAU,YAAYzB,EAAIwB,OAAOpB,EAAG,OAAO,CAACE,YAAY,4BAA4B,CAACN,EAAIW,GAAG,SAASX,EAAIuB,GAAGvB,EAAIhB,OAAO,WAAW,KAC1sB,EAAkB,GC4BtB,G,UAAA,CACET,KAAM,WAENmD,MAAO,CACL1C,MAAO,CACL2C,UAAU,EACVC,UAFN,SAEA,GACQ,OAAQC,MAAM7C,KAKlB8C,MAAO,CACLC,KAAMC,OACNC,QAAS,MAIbC,MAAO,CACLlD,MADJ,SACA,cACUiB,KAAKkC,cAITlC,KAAKkC,aAAc,EACnBlC,KAAKoB,aAAe,KACpBpB,KAAKwB,SAAWA,EAEhBW,YAAW,WACT,EAAR,eACQ,EAAR,cACQ,EAAR,iBACA,eAIEjG,KApCF,WAqCI,MAAO,CACLkF,aAAc,KACdI,SAAU,KACVU,aAAa,IAIjBE,QA5CF,WA6CIpC,KAAKoB,aAAepB,KAAKjB,OAG3BsD,SAAU,CACRC,mBADJ,WAEM,MAAO,CACLA,mBAAoBtC,KAAK6B,MAAQ,UChFwS,I,wBCQ7UU,EAAY,eACd,EACA,EACA,GACA,EACA,KACA,WACA,MAIa,EAAAA,E,QC8Bf,GACEC,WAAY,CACVC,QAAJ,GAGEvG,KALF,WAMI,MAAO,CACLsE,OAAQ,EACRM,MAAO,IACP4B,SAAS,EACTC,cAAe,IACfC,SAAU,OAIdR,QAfF,WAgBIpC,KAAK6C,iBAGPC,QAAS,CACPD,cADJ,WACA,WACM7C,KAAK4C,SAAWG,aAAY,WAAlC,yCAGIC,cALJ,yHAMMA,cAAchD,KAAK4C,aAGrB1B,KATJ,WAUMlB,KAAKc,OAAS,KC9E0S,ICQ1T,G,UAAY,eACd,EACA,EACAK,GACA,EACA,KACA,KACA,OAIa,I,QChBf8B,OAAIC,OAAOC,eAAgB,EAE3B,IAAIF,OAAI,CACNG,OAAQ,SAAAC,GAAC,OAAIA,EAAEC,MACdC,OAAO,S,oCCPV,yBAAiiB,EAAG,G,uBCGpiB,IAAIC,EAAU,EAAQ,QACA,kBAAZA,IAAsBA,EAAU,CAAC,CAACvF,EAAOzB,EAAIgH,EAAS,MAC7DA,EAAQC,SAAQxF,EAAOD,QAAUwF,EAAQC,QAE5C,IAAIC,EAAM,EAAQ,QAA+D1B,QACpE0B,EAAI,WAAYF,GAAS,EAAM,CAAC,WAAY,EAAM,YAAa,K,qBCR5ExF,EAAUC,EAAOD,QAAU,EAAQ,OAAR,EAAsD,GAKjFA,EAAQhB,KAAK,CAACiB,EAAOzB,EAAI,g4EAAi4E,M,qBCF15E,IAAIgH,EAAU,EAAQ,QACA,kBAAZA,IAAsBA,EAAU,CAAC,CAACvF,EAAOzB,EAAIgH,EAAS,MAC7DA,EAAQC,SAAQxF,EAAOD,QAAUwF,EAAQC,QAE5C,IAAIC,EAAM,EAAQ,QAA4D1B,QACjE0B,EAAI,WAAYF,GAAS,EAAM,CAAC,WAAY,EAAM,YAAa,K,kCCR5E,yBAAqlB,EAAG","file":"js/app.fdaf3b89.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t\"app\": 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/v-number/\";\n\n \tvar jsonpArray = window[\"webpackJsonp\"] = window[\"webpackJsonp\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// add entry module to deferred list\n \tdeferredModules.push([0,\"chunk-vendors\"]);\n \t// run deferred modules when ready\n \treturn checkDeferredModules();\n","exports = module.exports = require(\"../../node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.id, \".v-number[data-v-484b7acc]{overflow:hidden;position:relative;display:inline-block}.v-number__current-value[data-v-484b7acc]{position:absolute}.v-number__original-value[data-v-484b7acc]{visibility:hidden}.v-number__animated[data-v-484b7acc]{position:absolute;-webkit-transition-property:top;transition-property:top;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.v-number-new-value-enter[data-v-484b7acc]{top:-100%}.v-number-current-value-leave[data-v-484b7acc],.v-number-new-value-enter-to[data-v-484b7acc]{top:0}.v-number-current-value-leave-to[data-v-484b7acc]{top:100%}\", \"\"]);\n\n// exports\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"app\"},[_c('div',[_vm._m(0),_vm._m(1),_c('v-number',{staticClass:\"v-number-example\",attrs:{\"value\":_vm.number}})],1),_c('div',{staticStyle:{\"margin-top\":\"100px\"}},[_c('p',[_vm._v(\"Likes counter animation example:\")]),_c('div',{staticClass:\"likes-counter-example\"},[_c('div',{staticClass:\"likes-counter-example__likes\"},[_c('i',{staticClass:\"material-icons\"},[_vm._v(\"favorite\")]),_c('v-number',{model:{value:(_vm.likes),callback:function ($$v) {_vm.likes=$$v},expression:\"likes\"}}),_c('span',[_vm._v(\" people liked \")])],1),_c('div',{staticClass:\"likes-counter-example__button\",on:{\"click\":function($event){return _vm.like()}}},[_c('i',{staticClass:\"material-icons\"},[_vm._v(\"thumb_up\")]),_c('span',[_vm._v(\"Like\")])])]),_c('p',{staticStyle:{\"margin-top\":\"60px\"}},[_vm._v(\"Usage:\")]),_vm._m(2)]),_c('div',{staticStyle:{\"flex\":\"1\"}}),_vm._m(3)])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"header\"},[_c('img',{staticClass:\"header__logo\",attrs:{\"src\":\"img/logo.png\"}}),_c('h1',{staticClass:\"header__title\"},[_vm._v(\"Number\")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('h2',{staticStyle:{\"text-align\":\"center\"}},[_vm._v(\"\\n Animated number transition & likes counter library for Vue.js\"),_c('br')])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('code',[_c('div',[_vm._v(\"\\n \\n \")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('iframe',{attrs:{\"src\":\"https://ghbtns.com/github-btn.html?user=maxflex&repo=v-number&type=star&count=true&size=large\",\"frameborder\":\"0\",\"scrolling\":\"0\",\"width\":\"160px\",\"height\":\"30px\"}})])}]\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"v-number\"},[_c('transition',{attrs:{\"name\":\"v-number-current-value\"}},[(_vm.currentValue !== null)?_c('div',{staticClass:\"v-number__animated v-number__current-value\",style:(_vm.transitionDuration)},[_vm._v(\"\\n \"+_vm._s(_vm.currentValue)+\"\\n \")]):_vm._e()]),_c('transition',{attrs:{\"name\":\"v-number-new-value\"}},[(_vm.newValue !== null)?_c('div',{staticClass:\"v-number__animated v-number__new-value\",style:(_vm.transitionDuration)},[_vm._v(\"\\n \"+_vm._s(_vm.newValue)+\"\\n \")]):_vm._e()]),_c('span',{staticClass:\"v-number__original-value\"},[_vm._v(\"\\n \"+_vm._s(_vm.value)+\"\\n \")])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\n\n\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VNumber.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VNumber.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./VNumber.vue?vue&type=template&id=484b7acc&scoped=true&\"\nimport script from \"./VNumber.vue?vue&type=script&lang=js&\"\nexport * from \"./VNumber.vue?vue&type=script&lang=js&\"\nimport style0 from \"./VNumber.vue?vue&type=style&index=0&id=484b7acc&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"484b7acc\",\n null\n \n)\n\nexport default component.exports","\n\n\n\n\n","import mod from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./App.vue?vue&type=template&id=62c4d44c&\"\nimport script from \"./App.vue?vue&type=script&lang=js&\"\nexport * from \"./App.vue?vue&type=script&lang=js&\"\nimport style0 from \"./App.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","import Vue from 'vue'\nimport App from './App.vue'\n\nVue.config.productionTip = false\n\nnew Vue({\n render: h => h(App),\n}).$mount('#app')\n","import mod from \"-!../node_modules/vue-style-loader/index.js??ref--8-oneOf-1-0!../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-3!../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-4!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=style&index=0&lang=scss&\"; export default mod; export * from \"-!../node_modules/vue-style-loader/index.js??ref--8-oneOf-1-0!../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-3!../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-4!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=style&index=0&lang=scss&\"","// style-loader: Adds some css to the DOM by adding a 196 | -------------------------------------------------------------------------------- /src/components/VNumber.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 87 | 88 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export { default as VNumber } from './components/VNumber' 2 | 3 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | css: { 3 | extract: false, 4 | }, 5 | publicPath: process.env.NODE_ENV === 'production' 6 | ? '/v-number/' 7 | : '/' 8 | }; --------------------------------------------------------------------------------