vue-amazing-ui/lib/textscroll/TextScroll.vue2.cjs

An Amazing Vue3 UI Components Library, Using TypeScript.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),f=require("../utils/index.cjs"),A=e.defineComponent({__name:"TextScroll",props:{items:{default:()=>[]},single:{type:Boolean,default:!1},width:{default:"100%"},height:{default:50},itemStyle:{default:()=>({})},hrefHoverColor:{default:void 0},amount:{default:4},gap:{default:20},speed:{default:48},vertical:{type:Boolean,default:!1},duration:{default:1e3},interval:{default:3e3},pauseOnMouseEnter:{type:Boolean,default:!1}},emits:["click"],setup(T,{expose:R,emit:D}){const l=T,v=e.ref(),k=e.ref(0),S=e.ref(),m=e.ref(),x=e.ref(0),i=e.ref("paused"),p=e.ref(!0),d=e.ref(0),s=e.ref(),o=e.ref(!0),a=e.ref([]),{colorPalettes:C}=f.useInject("TextScroll"),O=D,h=e.computed(()=>a.value.length),B=e.computed(()=>({width:typeof l.width=="number"?`${l.width}px`:l.width,height:`${l.height}px`})),w=e.computed(()=>l.single?1:l.amount),$=e.computed(()=>parseFloat((k.value/w.value).toFixed(2))),V=e.computed(()=>x.value/l.speed);e.watch(()=>l.items,()=>{l.single?a.value=[l.items]:l.vertical&&l.items.length===1?a.value=[...l.items,...l.items]:a.value=[...l.items]},{immediate:!0,deep:!0}),e.watch(a,()=>{M()}),e.watch(()=>[l.vertical,l.duration,l.interval],()=>{z()},{deep:!0,flush:"post"}),f.useResizeObserver([v,m,S],()=>{z()});function z(){s.value&&f.cancelRaf(s.value),o.value||(o.value=!0),l.vertical||b(),u()}function b(){k.value=v.value.offsetWidth,x.value=m.value.offsetWidth}function N(){i.value="paused",e.nextTick(()=>{var r;(r=v.value)==null||r.offsetTop,i.value="running"})}function W(){N()}function F(){s.value=f.rafTimeout(()=>{o.value&&(o.value=!1),d.value=(d.value+1)%h.value},o.value?l.interval:l.interval+l.duration,!0)}function g(r){O("click",r)}function u(){l.vertical?h.value>=1&&F():h.value>=w.value&&(p.value=!1,i.value="running")}function y(){l.vertical?(o.value=!0,s.value&&f.cancelRaf(s.value)):i.value="paused"}function M(){l.vertical?(s.value&&f.cancelRaf(s.value),d.value!==0?(d.value=0,o.value=!1):o.value=!0,u()):(i.value="paused",p.value=!0,e.nextTick(()=>{var r;(r=v.value)==null||r.offsetTop,u()}))}return R({start:u,stop:y,reset:M}),(r,n)=>r.vertical?(e.openBlock(),e.createElementBlock("div",{key:1,ref_key:"verticalRef",ref:S,class:"m-scroll-vertical",style:e.normalizeStyle([B.value,`
        --text-scroll-shadow-color: #d3d3d3;
        --text-scroll-bg-color: #fff;
        --text-scroll-href-hover-color: ${r.hrefHoverColor||e.unref(C)[5]};
        --text-scroll-duration: ${r.duration}ms;
        --text-scroll-timing-function: ease;
        --text-scroll-scale: 0.5;
        --text-scroll-item-padding: ${r.gap}px;
      `]),onMouseenter:n[2]||(n[2]=t=>r.pauseOnMouseEnter?y():()=>!1),onMouseleave:n[3]||(n[3]=t=>r.pauseOnMouseEnter?u():()=>!1)},[e.createVNode(e.TransitionGroup,{name:"slide"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,(t,c)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{class:"scroll-item-wrap",key:c},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.href?"a":"div"),{class:e.normalizeClass(["scroll-item",{"href-item":t.href}]),style:e.normalizeStyle(r.itemStyle),title:t.title,href:t.href,target:t.target,onClick:E=>g(t)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.title),1)]),_:2},1032,["class","style","title","href","target","onClick"]))])),[[e.vShow,d.value===c]])),128))]),_:1})],36)):(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"horizontalRef",ref:v,class:"m-scroll-horizontal",style:e.normalizeStyle([B.value,`
        --text-scroll-shadow-color: #d3d3d3;
        --text-scroll-bg-color: #fff;
        --text-scroll-href-hover-color: ${r.hrefHoverColor||e.unref(C)[5]};
        --text-scroll-item-gap: ${r.gap}px;
        --text-scroll-play-state: ${i.value};
        --text-scroll-duration: ${V.value}s;
        --text-scroll-delay: 0s;
        --text-scroll-iteration-count: infinite;
      `]),onMouseenter:n[0]||(n[0]=t=>r.pauseOnMouseEnter?y():()=>!1),onMouseleave:n[1]||(n[1]=t=>r.pauseOnMouseEnter?u():()=>!1)},[e.createElementVNode("div",{ref_key:"groupRef",ref:m,class:e.normalizeClass(["scroll-items-group",{"scroll-items-reset":p.value}]),onAnimationiteration:W},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,(t,c)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.href?"a":"div"),{class:e.normalizeClass(["scroll-item",{"href-item":t.href}]),style:e.normalizeStyle([r.itemStyle,`width: ${$.value}px;`]),key:c,title:t.title,href:t.href,target:t.target,onClick:E=>g(t)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.title),1)]),_:2},1032,["class","style","title","href","target","onClick"]))),128))],34),e.createElementVNode("div",{class:e.normalizeClass(["scroll-items-group",{"scroll-items-reset":p.value}])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,(t,c)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.href?"a":"div"),{class:e.normalizeClass(["scroll-item",{"href-item":t.href}]),style:e.normalizeStyle([r.itemStyle,`width: ${$.value}px;`]),key:c,title:t.title,href:t.href,target:t.target,onClick:E=>g(t)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.title),1)]),_:2},1032,["class","style","title","href","target","onClick"]))),128))],2)],36))}});exports.default=A;