vue-scroll-number.min.js

/*!
 * vue-scroll-number v1.1.0
 * (c) 2020 Calvin Von
 * Released under the MIT License.
 */
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VueScrollNumber=t():e.VueScrollNumber=t()}("undefined"!=typeof self?self:this,(function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(r,i,function(t){return e[t]}.bind(null,i));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=9)}([function(e,t,n){"use strict";n.r(t);var r=n(1),i=n.n(r);for(var o in r)"default"!==o&&function(e){n.d(t,e,(function(){return r[e]}))}(o);t.default=i.a},function(e,t,n){var r,i,o;function u(e){return(u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self&&self,i=[t,n(8),n(5)],void 0===(o="function"==typeof(r=function(e,t,n){"use strict";function r(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return r=function(){return e},e}Object.defineProperty(e,"__esModule",{value:!0}),Object.defineProperty(e,"DIRECTIONS",{enumerable:!0,get:function(){return t.DIRECTIONS}}),e.default=void 0,t=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==u(e)&&"function"!=typeof e)return{default:e};var t=r();if(t&&t.has(e))return t.get(e);var n={},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var o in e)if(Object.prototype.hasOwnProperty.call(e,o)){var s=i?Object.getOwnPropertyDescriptor(e,o):null;s&&(s.get||s.set)?Object.defineProperty(n,o,s):n[o]=e[o]}return n.default=e,t&&t.set(e,n),n}(t);var i=function(e){return!Number.isNaN(+e)},o={name:"ScrollNumber",components:{ScrollNumberItem:t.default},props:{value:{type:[Number,String],default:0},numberOnly:{type:Boolean,default:function(){return(0,n.getOptions)().numberOnly}},transitionTime:{type:Number,default:function(){return(0,n.getOptions)().transitionTime}},itemStyle:Object},data:function(){return{innerValue:this.value,isNumber:i,direction:t.DIRECTIONS.FORWARD,process:Promise.resolve()}},computed:{numbers:function(){return this.getNumbers(this.innerValue)}},watch:{value:function(e){this.changeTo(e)},innerValue:function(e,n){(i(this.value)?function(t,r){return Math.abs(e)>Math.abs(n)}:function(t,r){return e>n})(e,n)?this.direction=t.DIRECTIONS.FORWARD:this.direction=t.DIRECTIONS.BACKWARD}},mounted:function(){this.changeTo(this.innerValue)},methods:{changeTo:function(e){var t=this;return this.numberOnly&&!i(e)?(console.warn("[vue-scroll-number]: You can only change value to a number"),Promise.reject()):(this.process=this.process.then((function(){return new Promise((function(n){t.innerValue=e,setTimeout((function(){var r=t.getNumbers(e).filter(i).map((function(e,n){var r=t.$refs.scrollItem[n];return r?r.changeTo(e):Promise.resolve()}));n(Promise.all(r).then((function(){return t.$emit("change",e),e})))}))}))})),this.process)},getNumbers:function(e){return String(e).split("").map((function(e){return i(e)?Number(e):e}))},getIndex:function(e,t){for(var n=0,r=0;r<t;r++)i(e[r])||n++;return t-n}}};e.default=o})?r.apply(t,i):r)||(e.exports=o)},function(e,t,n){"use strict";n.r(t);var r=n(3),i=n.n(r);for(var o in r)"default"!==o&&function(e){n.d(t,e,(function(){return r[e]}))}(o);t.default=i.a},function(e,t,n){var r,i,o;"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self&&self,i=[t,n(5)],void 0===(o="function"==typeof(r=function(e,t){"use strict";function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e){return function(e){if(Array.isArray(e))return i(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return i(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?i(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}Object.defineProperty(e,"__esModule",{value:!0}),e.DIRECTIONS=e.default=void 0;var o={FORWARD:"FORWARD",BACKWARD:"BACKWARD"};e.DIRECTIONS=o;var u={name:"scroll-number-item",props:{direction:{type:String,validator:function(e){return!!o[e]}},transitionTime:{type:Number,default:function(){return(0,t.getOptions)().transitionTime}},itemStyle:Object},data:function(){return{numbers:r(new Array(10).keys()),forwardPaddingNumbers:[],backwardPaddingNumbers:[],itemSize:{},value:0,currentIndex:0,overrideStyle:{},process:Promise.resolve()}},computed:{itemWidth:function(){return this.itemSize.width},itemHeight:function(){return this.itemSize.height},listStyle:function(){var e=this.backwardPaddingNumbers,t=this.currentIndex,n=this.itemHeight;return{top:-1*e.length*n+"px",transform:"translate3d(0, ".concat(-1*t*n,"px, 0)")}}},watch:{itemStyle:function(){var e=this;this.$nextTick((function(){e.calcItemSize()}))}},created:function(){this.currentIndex=this.numbers.indexOf(+this.value)},mounted:function(){this.calcItemSize()},methods:{changeTo:function(e){var t,r=this;return(0,(t={},n(t,o.FORWARD,(function(){return r.forwardTo(e)})),n(t,o.BACKWARD,(function(){return r.backwardTo(e)})),t)[this.direction])()},forwardTo:function(e){var t=this;return this.process=this.process.then((function(){return new Promise((function(n){var i=t.value,o=function(){t.nextTransition((function(){n(e)}))},u=e-i;u<0?(u+=10,t.forwardPaddingNumbers=r(new Array(e+1).keys()),t.currentIndex+=u,t.nextTransition((function(){t.moveWithoutAnimation((function(){t.currentIndex=t.currentIndex%t.numbers.length,o(),t.value=e}))}))):(t.currentIndex+=e-i,o(),t.value=e)}))})),this.process},backwardTo:function(e){var t=this;return this.process=this.process.then((function(){return new Promise((function(n){var i=t.value,o=function(){t.nextTransition((function(){n(e)}))},u=e-i;u>0?(t.backwardPaddingNumbers=r(new Array(t.numbers.length-e).keys()),u=t.backwardPaddingNumbers.length,t.currentIndex=-u,t.nextTransition((function(){t.moveWithoutAnimation((function(){t.currentIndex=e,o(),t.value=e}))}))):(t.currentIndex+=e-i,o(),t.value=e)}))})),this.process},nextFrame:function(e){this.$nextTick((function(){setTimeout(e,1e3/60)}))},nextTransition:function(e){var t=this;this.nextFrame((function(){setTimeout(e,t.transitionTime)}))},calcItemSize:function(){this.itemSize=this.$refs.realList.querySelector("span").getBoundingClientRect()},moveWithoutAnimation:function(e){var t=this;this.overrideStyle={transition:"none"},e(),this.nextFrame((function(){t.overrideStyle={}}))}}};e.default=u})?r.apply(t,i):r)||(e.exports=o)},function(e,t,n){"use strict";function r(e,t,n,r,i,o,u,s){var a,c="function"==typeof e?e.options:e;if(t&&(c.render=t,c.staticRenderFns=n,c._compiled=!0),r&&(c.functional=!0),o&&(c._scopeId="data-v-"+o),u?(a=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),i&&i.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(u)},c._ssrRegister=a):i&&(a=s?function(){i.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:i),a)if(c.functional){c._injectStyles=a;var l=c.render;c.render=function(e,t){return a.call(t),l(e,t)}}else{var f=c.beforeCreate;c.beforeCreate=f?[].concat(f,a):[a]}return{exports:e,options:c}}n.d(t,"a",(function(){return r}))},function(e,t,n){var r,i,o;"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self&&self,i=[t],void 0===(o="function"==typeof(r=function(e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.setOptions=function(e){Object.assign(t,e||{})},e.getOptions=function(){return t},e.default=void 0;var t={transitionTime:800,numberOnly:!1},n=t;e.default=n})?r.apply(t,i):r)||(e.exports=o)},function(e,t,n){"use strict";n.d(t,"a",(function(){return r})),n.d(t,"b",(function(){return i}));var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"scroll-number"},[e._l(e.numbers,(function(t,r){return[e.isNumber(t)?n("ScrollNumberItem",{key:e.getIndex(e.numbers,r),ref:"scrollItem",refInFor:!0,attrs:{direction:e.direction,transitionTime:e.transitionTime,itemStyle:e.itemStyle}}):n("div",{key:"char-"+r,staticClass:"digit",style:e.itemStyle},[n("span",[e._v(e._s(t))])])]}))],2)},i=[];r._withStripped=!0},function(e,t,n){"use strict";n.d(t,"a",(function(){return r})),n.d(t,"b",(function(){return i}));var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"scroll-number-item",style:{width:e.itemWidth+"px",height:e.itemHeight+"px"}},[n("div",{ref:"list",staticClass:"scroll-list",style:Object.assign({},e.listStyle,e.overrideStyle)},[n("ul",{staticClass:"number-list padding-number-list"},e._l(e.backwardPaddingNumbers,(function(t,r){return n("li",{key:"real-"+r},[n("div",{staticClass:"number-item",style:e.itemStyle},[n("span",[e._v(e._s(e.numbers[r]+e.numbers.length-e.backwardPaddingNumbers.length))])])])})),0),e._v(" "),n("ul",{ref:"realList",staticClass:"number-list"},e._l(e.numbers,(function(t,r){return n("li",{key:"real-"+r},[n("div",{staticClass:"number-item",style:e.itemStyle},[n("span",[e._v(e._s(t))])])])})),0),e._v(" "),n("ul",{staticClass:"number-list padding-number-list"},e._l(e.forwardPaddingNumbers,(function(t,r){return n("li",{key:"real-"+r},[n("div",{staticClass:"number-item",style:e.itemStyle},[n("span",[e._v(e._s(t))])])])})),0)])])},i=[];r._withStripped=!0},function(e,t,n){"use strict";n.r(t);var r=n(7),i=n(2);for(var o in i)"default"!==o&&function(e){n.d(t,e,(function(){return i[e]}))}(o);var u=n(4),s=Object(u.a)(i.default,r.a,r.b,!1,null,null,null);s.options.__file="src/scroll-number-item.vue",t.default=s.exports},function(e,t,n){var r,i,o;function u(e){return(u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self&&self,i=[t,n(10),n(8),n(5),n(11)],void 0===(o="function"==typeof(r=function(e,t,n,r,i){"use strict";function o(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return o=function(){return e},e}var s;Object.defineProperty(e,"__esModule",{value:!0}),Object.defineProperty(e,"ScrollNumber",{enumerable:!0,get:function(){return t.default}}),Object.defineProperty(e,"DIRECTIONS",{enumerable:!0,get:function(){return t.DIRECTIONS}}),Object.defineProperty(e,"ScrollNumberItem",{enumerable:!0,get:function(){return n.default}}),e.default=void 0,t=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==u(e)&&"function"!=typeof e)return{default:e};var t=o();if(t&&t.has(e))return t.get(e);var n={},r=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in e)if(Object.prototype.hasOwnProperty.call(e,i)){var s=r?Object.getOwnPropertyDescriptor(e,i):null;s&&(s.get||s.set)?Object.defineProperty(n,i,s):n[i]=e[i]}return n.default=e,t&&t.set(e,n),n}(t),n=(s=n)&&s.__esModule?s:{default:s},t.default.install=function(e,n){(0,r.setOptions)(n),e.component(t.default.name,t.default)},t.default.Item=n.default;var a=t.default;e.default=a})?r.apply(t,i):r)||(e.exports=o)},function(e,t,n){"use strict";n.r(t);var r=n(6),i=n(0);for(var o in i)"default"!==o&&function(e){n.d(t,e,(function(){return i[e]}))}(o);var u=n(4),s=Object(u.a)(i.default,r.a,r.b,!1,null,null,null);s.options.__file="src/scroll-number.vue",t.default=s.exports},function(e,t,n){}])}));