vue-devui/carousel/index.umd.js

DevUI components based on Vite and Vue3

(function(d,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue"),require("clipboard")):typeof define=="function"&&define.amd?define(["exports","vue","clipboard"],e):(d=typeof globalThis!="undefined"?globalThis:d||self,e(d.index={},d.Vue))})(this,function(d,e){"use strict";const z={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}};function F(){return e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",points:"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8"},null)])])}function L(){return e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",transform:"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) ",points:"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8"},null)])])}function g(s,r,l){let v=s;return r&&(v+=`__${r}`),l&&(v+=`--${l}`),v}function b(s,r=!1){const l=r?`.devui-${s}`:`devui-${s}`;return{b:()=>g(l),e:i=>i?g(l,i):"",m:i=>i?g(l,"",i):"",em:(i,p)=>i&&p?g(l,i,p):""}}var H="",I=e.defineComponent({name:"DCarousel",props:z,emits:["update:activeIndex","activeIndexChange"],setup(s,{emit:r,slots:l,expose:v}){const f=b("carousel"),{height:B,showDots:M,dotPosition:i,arrowTrigger:p,autoplay:U,autoplaySpeed:P,dotTrigger:X,activeIndex:R,transitionSpeed:m}=e.toRefs(s),n=e.ref(0),T=e.ref(!1),u=e.ref(0),y=e.ref(null),o=e.ref(null),w=e.ref(null);e.watch(()=>p,()=>{T.value=p.value==="always"},{immediate:!0}),e.watch(()=>R,()=>{u.value=R.value},{immediate:!0});const C=t=>{o.value&&(o.value.style.left=`${-t*100}%`)},A=t=>{setTimeout(()=>{o.value&&(o.value.style.transition=""),t.style.transform="",C(u.value)},m.value)},D=(t,a)=>{if(y.value){const c=y.value.getBoundingClientRect();t.style.transform=`translateX(${(a?-n.value:n.value)*c.width}px)`}},_=()=>{w.value&&(clearTimeout(w.value),w.value=null)},x=t=>{_(),U.value&&P.value&&(w.value=setTimeout(()=>{t==null||t()},P.value))},h=t=>{if(t===u.value||!y.value||!o.value)return;o.value.style.transition=`left ${m.value}ms ease`;let a=u.value;if(t<0&&u.value===0){a=n.value-1;const c=o.value.children[a];D(c,!0),C(-1),A(c)}else if(t>=n.value&&u.value===n.value-1){a=0;const c=o.value.children[a];D(c,!1),C(n.value),A(c)}else a=t<0?0:t>n.value-1?n.value-1:t,C(a);u.value=a,r("update:activeIndex",a),r("activeIndexChange",a),x(()=>{h(u.value+1)})},j=()=>{h(u.value-1)},N=()=>{h(u.value+1)},k=t=>{p.value==="hover"&&(T.value=t==="enter")},E=(t,a)=>{a===X.value&&h(t)},G=t=>{n.value=t,x(N)};return e.onMounted(()=>{o.value&&(o.value.style.transition=`left ${m.value}ms ease`,o.value.style.left="0%"),x(N)}),e.onBeforeUnmount(()=>{_()}),v({prev:j,next:N,goto:h}),()=>{var c,q;const t=(q=(c=l.default)==null?void 0:c.call(l))!=null?q:[];let a=t;return a.length===1&&a[0].type===e.Fragment&&(a=(a[0].children||[]).filter(V=>(V==null?void 0:V.type)!==e.Comment)),a.length!==n.value&&G(a.length),e.createVNode("div",{class:f.b(),style:{height:B.value},onMouseenter:()=>k("enter"),onMouseleave:()=>k("leave")},[p.value!=="never"&&T.value?e.createVNode("div",{class:f.e("arrow")},[e.createVNode("button",{class:"arrow-left",onClick:()=>j()},[e.createVNode(F,null,null)]),e.createVNode("button",{class:"arrow-right",onClick:()=>N()},[e.createVNode(L,null,null)])]):null,e.createVNode("div",{class:f.e("item-wrapper"),ref:y},[e.createVNode("div",{class:f.e("item-container"),style:{width:`${n.value*100}%`},ref:o},[t])]),n.value>0&&M.value?e.createVNode("ul",{class:[f.e("dots"),i.value]},[a.map((V,$)=>e.createVNode("li",{class:{"dot-item":!0,active:u.value===$},onClick:()=>E($,"click"),onMouseenter:()=>E($,"hover"),style:{transition:`all ${m.value}ms ease`}},null))]):null])}}}),S=e.defineComponent({name:"DCarouselItem",setup(s,{slots:r}){var f;const l=b("carousel"),v=(f=r.default)==null?void 0:f.call(r);return()=>e.createVNode("div",{class:l.e("item")},[v])}}),O={title:"Carousel \u8D70\u9A6C\u706F",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(s){s.component(I.name,I),s.component(S.name,S)}};d.Carousel=I,d.CarouselItem=S,d.default=O,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});