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