vue-roller/dist/vue-roller.umd.js

Fluid and smooth rolling animation for Vue.js

(function(s,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis!="undefined"?globalThis:s||self,e(s["vue-roller"]={},s.Vue))})(this,function(s,e){"use strict";function y(t){const a=e.ref(!1),r=e.ref(!1);let l,n,i=function(){};return{reloadAnimation:()=>{a.value=!1,r.value=!1,clearTimeout(l),clearTimeout(n),l=setTimeout(()=>{a.value=!0,n=setTimeout(()=>{r.value=!0,i()},t.value)},100)},isReady:a,isEnd:r,onAnimationEnd:d=>{i=d}}}function B(t,a,r,l){const n=e.computed(()=>r.value.indexOf(t.value)),i=e.ref(r.value.indexOf(a.value)),{reloadAnimation:d,isReady:_,isEnd:o}=y(l);return e.watch(t,(f,c)=>{i.value=r.value.indexOf(c),d()}),d(),{isReady:_,isEnd:o,targetIdx:n,prevTargetIdx:i}}function R(t){const a=e.ref(0);function r(){var l;a.value=((l=t.value)==null?void 0:l.clientWidth)||16}return e.onMounted(r),e.watch(t,r),{width:a}}function T(t,a){const r=e.ref(null);function l(){r.value=t.value[a.value]}return e.onMounted(l),e.watch(a,()=>{e.nextTick(l)}),{itemElement:r}}var m=(t=>(t.SHORT="short",t.LONG="long",t))(m||{}),b=(t=>(t.NUMBER="number",t.ALPHABET="alphabet",t))(b||{});const k={number:[" ",...[...Array(10).keys()].map(String),","],alphabet:[" ","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","-"]};var z=(()=>`.roller-item[data-v-5357a046]{position:relative;height:1em;transition:width .5s}.roller-item .roller-item__wrapper[data-v-5357a046]{position:relative;display:flex;align-items:center;width:100%;height:200%;overflow:hidden;top:-50%;mask-image:linear-gradient(0deg,rgba(255,255,255,0) 0%,rgb(0,0,0) 25%,rgb(0,0,0) 75%,rgba(255,255,255,0) 100%);-webkit-mask-image:linear-gradient(0deg,rgba(255,255,255,0) 0%,rgb(0,0,0) 25%,rgb(0,0,0) 75%,rgba(255,255,255,0) 100%);box-sizing:border-box}.roller-item .roller-item__wrapper.roller-item__wrapper--short[data-v-5357a046]{mask-image:linear-gradient(0deg,rgba(255,255,255,0) 22%,rgb(0,0,0) 30%,rgb(0,0,0) 70%,rgba(255,255,255,0) 78%);-webkit-mask-image:linear-gradient(0deg,rgba(255,255,255,0) 22%,rgb(0,0,0) 30%,rgb(0,0,0) 70%,rgba(255,255,255,0) 78%)}.roller-item .roller-item__wrapper .roller-item__wrapper__list[data-v-5357a046]{position:absolute;width:100%;display:flex;align-items:center;flex-direction:column;box-sizing:border-box;transition:.25s}.roller-item .roller-item__wrapper .roller-item__wrapper__list .roller-item__wrapper__list__item[data-v-5357a046]{display:flex;width:fit-content;height:1em;line-height:1;box-sizing:border-box;user-select:none}.roller-item .roller-item__wrapper .roller-item__wrapper__list .roller-item__wrapper__list__item--target[data-v-5357a046]{user-select:text}
`)(),x=(t,a)=>{const r=t.__vccOpts||t;for(const[l,n]of a)r[l]=n;return r};const A={class:"roller-item__wrapper__list"},C=e.defineComponent({name:"RollerItem",props:{char:{default:""},defaultChar:{default:""},duration:{default:500},charSet:{default:()=>k[b.NUMBER]},mode:{default:m.SHORT}},setup(t){const a=t,{char:r,defaultChar:l,charSet:n,duration:i}=e.toRefs(a),{isReady:d,isEnd:_,targetIdx:o,prevTargetIdx:f}=B(r,l,n,i),c=e.ref([]),{itemElement:S}=T(c,o),{width:w}=R(S),h=e.computed(()=>d.value?o.value===-1?`-${1/n.value.length*100}%`:`-${o.value/n.value.length*100}%`:f.value!==-1?`-${f.value/n.value.length*100}%`:"0%"),O=e.computed(()=>a.mode==m.SHORT?[a.char]:o.value==-1?["",a.char,""]:o.value==0?["",a.char,a.charSet[o.value+1]]:o.value==n.value.length-1?[a.charSet[o.value-1],a.char,""]:a.charSet.slice(o.value-1,o.value+2));return(M,H)=>(e.openBlock(),e.createElementBlock("div",{class:"roller-item",style:e.normalizeStyle({width:`${e.unref(w)}px`})},[e.unref(_)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["roller-item__wrapper",{"roller-item__wrapper--short":t.mode==e.unref(m).SHORT}])},[e.createElementVNode("div",A,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(O),p=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["roller-item__wrapper__list__item",{"roller-item__wrapper__list__item--target":p==e.unref(r)}]),ref_for:!0,ref_key:"itemElements",ref:c},e.toDisplayString(p),3))),256))])],2)):(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["roller-item__wrapper",{"roller-item__wrapper--short":t.mode==e.unref(m).SHORT}])},[e.createElementVNode("div",{class:"roller-item__wrapper__list",style:e.normalizeStyle({top:"25%",transform:`translateY(${e.unref(h)})`,transition:`transform ${e.unref(i)}ms`})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(n),p=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["roller-item__wrapper__list__item",{"roller-item__wrapper__list__item--target":p==e.unref(r)}]),ref_for:!0,ref_key:"itemElements",ref:c},e.toDisplayString(p),3))),256))],4)],2))],4))}});var u=x(C,[["__scopeId","data-v-5357a046"]]),I=(()=>`.roller[data-v-4760d5f9]{display:flex;flex-wrap:wrap}.roller-list-enter-active[data-v-4760d5f9],.roller-list-leave-active[data-v-4760d5f9]{transition:.5s}.roller-list-enter-from[data-v-4760d5f9]{opacity:0}.roller-list-enter-to[data-v-4760d5f9],.roller-list-leave-from[data-v-4760d5f9]{opacity:1}.roller-list-leave-to[data-v-4760d5f9]{opacity:0;width:0px!important}
`)();const v=e.defineComponent({name:"Roller",props:{value:{default:"123"},defaultValue:{default:""},duration:{default:500},charSet:null,mode:null},emits:["animation-end"],setup(t,{emit:a}){const r=t,{duration:l,value:n}=e.toRefs(r),{reloadAnimation:i,onAnimationEnd:d}=y(l);e.watch([n],()=>{i()}),d(()=>a("animation-end")),i();const _=e.computed(()=>[...r.value]),o=e.computed(()=>[...r.defaultValue]),f=e.computed(()=>Array.isArray(r.charSet)?r.charSet:k[r.charSet]);return(c,S)=>(e.openBlock(),e.createBlock(e.TransitionGroup,{tag:"div",name:"roller-list",class:"roller"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(_),(w,h)=>(e.openBlock(),e.createBlock(u,{char:w,duration:e.unref(l),charSet:e.unref(f),defaultChar:e.unref(o)[h],mode:t.mode,key:h},null,8,["char","duration","charSet","defaultChar","mode"]))),128))]),_:1}))}});var g=x(v,[["__scopeId","data-v-4760d5f9"]]);const E=t=>{t.component(g.name,g),t.component(u.name,u)};typeof window!="undefined"&&window.Vue&&E(window.Vue),s.Roller=g,s.RollerItem=u,s.install=E,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});