vue-devui/carousel/index.umd.js

DevUI components based on Vite and Vue3

(function(m,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue"),require("clipboard")):typeof define=="function"&&define.amd?define(["exports","vue","clipboard"],e):(m=typeof globalThis!="undefined"?globalThis:m||self,e(m.index={},m.Vue))})(this,function(m,e){"use strict";const G={arrowTrigger:{type:String,default:"hover"},autoplay:{type:Boolean,default:!1},autoplaySpeed:{type:Number,default:3e3},height:{type:String,default:"100%"},showDots:{type:Boolean,default:!0},dotTrigger:{type:String,default:"click"},dotPosition:{type:String,default:"bottom"},activeIndex:{type:Number,default:0},transitionSpeed:{type:Number,default:500}},L={name:{type:String,default:"",required:!0},size:{type:[Number,String],default:"inherit"},color:{type:String,default:"inherit"},component:{type:Object,default:null},classPrefix:{type:String,default:"icon"},operable:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},rotate:{type:[Number,String]}},H={name:{type:String,default:"",required:!0},color:{type:String,default:"inherit"},size:{type:[Number,String],default:"inherit"}};function b(l,o,n){let a=l;return o&&(a+=`__${o}`),n&&(a+=`--${n}`),a}function w(l,o=!1){const n=o?`.devui-${l}`:`devui-${l}`;return{b:()=>b(n),e:t=>t?b(n,t):"",m:t=>t?b(n,"",t):"",em:(t,i)=>t&&i?b(n,t,i):""}}var ee="",J=e.defineComponent({name:"DSvgIcon",props:H,setup(l){const{name:o,color:n,size:a}=e.toRefs(l),r=w("svg-icon"),c=e.computed(()=>`#icon-${o.value}`),p=e.computed(()=>typeof a.value=="number"?`${a.value}px`:a.value),t={width:p.value,height:p.value};return()=>e.createVNode("svg",{class:r.b(),style:t},[e.createVNode("use",{"xlink:href":c.value,fill:n.value},null)])}});function K(l){return/^((http|https):)?\/\//.test(l)}function Q(l,o){const{component:n,name:a,size:r,color:c,classPrefix:p,rotate:t}=e.toRefs(l),i=w("icon"),y=e.computed(()=>typeof r.value=="number"?`${r.value}px`:r.value),h=n.value?e.resolveDynamicComponent(n.value):e.resolveDynamicComponent(J),C=()=>e.createVNode("img",e.mergeProps({src:a.value,alt:a.value.split("/")[a.value.split("/").length-1],class:[(t==null?void 0:t.value)==="infinite"&&i.m("spin")],style:{width:y.value||"",transform:`rotate(${t==null?void 0:t.value}deg)`,verticalAlign:"middle"}},o.attrs),null),D=()=>e.createVNode(h,e.mergeProps({name:a.value,color:c.value,size:y.value,class:[(t==null?void 0:t.value)==="infinite"&&i.m("spin")],style:{transform:`rotate(${t==null?void 0:t.value}deg)`}},o.attrs),null),I=()=>{const N=/^icon-/.test(a.value)?a.value:`${p.value}-${a.value}`;return e.createVNode("i",e.mergeProps({class:[p.value,N,(t==null?void 0:t.value)==="infinite"&&i.m("spin")],style:{fontSize:y.value,color:c.value,transform:`rotate(${t==null?void 0:t.value}deg)`}},o.attrs),null)};return{iconDom:()=>n.value?D():K(a.value)?C():I()}}var j=e.defineComponent({name:"DIcon",props:L,emits:["click"],setup(l,o){const{disabled:n,operable:a}=e.toRefs(l),{iconDom:r}=Q(l,o),c=w("icon"),p=e.computed(()=>({[c.e("container")]:!0,[c.m("disabled")]:n.value,[c.m("operable")]:a.value,[c.m("no-slots")]:!Object.keys(o.slots).length})),t=i=>{n.value||o.emit("click",i)};return()=>{var i,y,h,C;return e.createVNode("div",{class:p.value,onClick:t},[(y=(i=o.slots).prefix)==null?void 0:y.call(i),r(),(C=(h=o.slots).suffix)==null?void 0:C.call(h)])}}}),te="";e.defineComponent({name:"DIconGroup",setup(l,o){const n=w("icon-group");return()=>{var a,r;return e.createVNode("div",{class:n.b()},[(r=(a=o.slots).default)==null?void 0:r.call(a)])}}});function $(l,o,n){let a=l;return o&&(a+=`__${o}`),n&&(a+=`--${n}`),a}function A(l,o=!1){const n=o?`.devui-${l}`:`devui-${l}`;return{b:()=>$(n),e:t=>t?$(n,t):"",m:t=>t?$(n,"",t):"",em:(t,i)=>t&&i?$(n,t,i):""}}var ne="",z=e.defineComponent({name:"DCarousel",props:G,emits:["update:activeIndex","activeIndexChange"],setup(l,{emit:o,slots:n,expose:a}){const r=A("carousel"),{height:c,showDots:p,dotPosition:t,arrowTrigger:i,autoplay:y,autoplaySpeed:h,dotTrigger:C,activeIndex:D,transitionSpeed:I}=e.toRefs(l),d=e.ref(0),N=e.ref(!1),v=e.ref(0),V=e.ref(null),f=e.ref(null),P=e.ref(null);e.watch(()=>i,()=>{N.value=i.value==="always"},{immediate:!0}),e.watch(()=>D,()=>{v.value=D.value},{immediate:!0});const T=s=>{f.value&&(f.value.style.left=`${-s*100}%`)},F=s=>{setTimeout(()=>{f.value&&(f.value.style.transition=""),s.style.transform="",T(v.value)},I.value)},k=(s,u)=>{if(V.value){const g=V.value.getBoundingClientRect();s.style.transform=`translateX(${(u?-d.value:d.value)*g.width}px)`}},x=()=>{P.value&&(clearTimeout(P.value),P.value=null)},E=s=>{x(),y.value&&h.value&&(P.value=setTimeout(()=>{s==null||s()},h.value))},S=s=>{if(s===v.value||!V.value||!f.value)return;f.value.style.transition=`left ${I.value}ms ease`;let u=v.value;if(s<0&&v.value===0){u=d.value-1;const g=f.value.children[u];k(g,!0),T(-1),F(g)}else if(s>=d.value&&v.value===d.value-1){u=0;const g=f.value.children[u];k(g,!1),T(d.value),F(g)}else u=s<0?0:s>d.value-1?d.value-1:s,T(u);v.value=u,o("update:activeIndex",u),o("activeIndexChange",u),E(()=>{S(v.value+1)})},q=()=>{S(v.value-1)},R=()=>{S(v.value+1)},U=s=>{i.value==="hover"&&(N.value=s==="enter")},O=(s,u)=>{u===C.value&&S(s)},Y=s=>{d.value=s,E(R)};return e.onMounted(()=>{f.value&&(f.value.style.transition=`left ${I.value}ms ease`,f.value.style.left="0%"),E(R)}),e.onBeforeUnmount(()=>{x()}),a({prev:q,next:R,goto:S}),()=>{var g,X;const s=(X=(g=n.default)==null?void 0:g.call(n))!=null?X:[];let u=s;return u.length===1&&u[0].type===e.Fragment&&(u=(u[0].children||[]).filter(_=>(_==null?void 0:_.type)!==e.Comment)),u.length!==d.value&&Y(u.length),e.createVNode("div",{class:r.b(),style:{height:c.value},onMouseenter:()=>U("enter"),onMouseleave:()=>U("leave")},[i.value!=="never"&&N.value?e.createVNode("div",{class:r.e("arrow")},[e.createVNode("button",{class:"arrow-left",onClick:()=>q()},[e.createVNode(j,{name:"arrow-left"},null)]),e.createVNode("button",{class:"arrow-right",onClick:()=>R()},[e.createVNode(j,{name:"arrow-right"},null)])]):null,e.createVNode("div",{class:r.e("item-wrapper"),ref:V},[e.createVNode("div",{class:r.e("item-container"),style:{width:`${d.value*100}%`},ref:f},[s])]),d.value>0&&p.value?e.createVNode("ul",{class:[r.e("dots"),t.value]},[u.map((_,M)=>e.createVNode("li",{class:{"dot-item":!0,active:v.value===M},onClick:()=>O(M,"click"),onMouseenter:()=>O(M,"hover"),style:{transition:`all ${I.value}ms ease`}},null))]):null])}}}),B=e.defineComponent({name:"DCarouselItem",setup(l,{slots:o}){var r;const n=A("carousel"),a=(r=o.default)==null?void 0:r.call(o);return()=>e.createVNode("div",{class:n.e("item")},[a])}}),W={title:"Carousel \u8D70\u9A6C\u706F",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(l){l.component(z.name,z),l.component(B.name,B)}};m.Carousel=z,m.CarouselItem=B,m.default=W,Object.defineProperty(m,"__esModule",{value:!0}),m[Symbol.toStringTag]="Module"});