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