vue-carousel-card/lib/vue-carousel-card.es.js

vue轮播卡片组件（vue carousel card component）with vue@3.x

var e=Object.defineProperty,t=Object.prototype.hasOwnProperty,n=Object.getOwnPropertySymbols,r=Object.prototype.propertyIsEnumerable,a=(t,n,r)=>n in t?e(t,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[n]=r,o=(e,o)=>{for(var i in o||(o={}))t.call(o,i)&&a(e,i,o[i]);if(n)for(var i of n(o))r.call(o,i)&&a(e,i,o[i]);return e};import{defineComponent as i,ref as s,computed as l,watch as u,onMounted as c,nextTick as d,onBeforeUnmount as h,provide as v,openBlock as f,createBlock as p,withModifiers as _,createVNode as m,Transition as b,withCtx as y,withDirectives as g,vShow as w,createCommentVNode as E,renderSlot as O,Fragment as C,renderList as M,toDisplayString as I,getCurrentInstance as x,inject as k,onUnmounted as S}from"vue";var z=function(e,t,n,r){var a,o=0;return"boolean"!=typeof t&&(r=n,n=t,t=void 0),function(){var i=this,s=Number(new Date)-o,l=arguments;function u(){o=Number(new Date),n.apply(i,l)}function c(){a=void 0}r&&!a&&u(),a&&clearTimeout(a),void 0===r&&s>e?u():!0!==t&&(a=setTimeout(r?c:u,void 0===r?e-s:e))}},A=z,L=function(){if("undefined"!=typeof Map)return Map;function e(e,t){var n=-1;return e.some((function(e,r){return e[0]===t&&(n=r,!0)})),n}return function(){function t(){this.__entries__=[]}return Object.defineProperty(t.prototype,"size",{get:function(){return this.__entries__.length},enumerable:!0,configurable:!0}),t.prototype.get=function(t){var n=e(this.__entries__,t),r=this.__entries__[n];return r&&r[1]},t.prototype.set=function(t,n){var r=e(this.__entries__,t);~r?this.__entries__[r][1]=n:this.__entries__.push([t,n])},t.prototype.delete=function(t){var n=this.__entries__,r=e(n,t);~r&&n.splice(r,1)},t.prototype.has=function(t){return!!~e(this.__entries__,t)},t.prototype.clear=function(){this.__entries__.splice(0)},t.prototype.forEach=function(e,t){void 0===t&&(t=null);for(var n=0,r=this.__entries__;n<r.length;n++){var a=r[n];e.call(t,a[1],a[0])}},t}()}(),T="undefined"!=typeof window&&"undefined"!=typeof document&&window.document===document,$="undefined"!=typeof global&&global.Math===Math?global:"undefined"!=typeof self&&self.Math===Math?self:"undefined"!=typeof window&&window.Math===Math?window:Function("return this")(),B="function"==typeof requestAnimationFrame?requestAnimationFrame.bind($):function(e){return setTimeout((function(){return e(Date.now())}),1e3/60)};var D=["top","right","bottom","left","width","height","size","weight"],R="undefined"!=typeof MutationObserver,j=function(){function e(){this.connected_=!1,this.mutationEventsAdded_=!1,this.mutationsObserver_=null,this.observers_=[],this.onTransitionEnd_=this.onTransitionEnd_.bind(this),this.refresh=function(e,t){var n=!1,r=!1,a=0;function o(){n&&(n=!1,e()),r&&s()}function i(){B(o)}function s(){var e=Date.now();if(n){if(e-a<2)return;r=!0}else n=!0,r=!1,setTimeout(i,t);a=e}return s}(this.refresh.bind(this),20)}return e.prototype.addObserver=function(e){~this.observers_.indexOf(e)||this.observers_.push(e),this.connected_||this.connect_()},e.prototype.removeObserver=function(e){var t=this.observers_,n=t.indexOf(e);~n&&t.splice(n,1),!t.length&&this.connected_&&this.disconnect_()},e.prototype.refresh=function(){this.updateObservers_()&&this.refresh()},e.prototype.updateObservers_=function(){var e=this.observers_.filter((function(e){return e.gatherActive(),e.hasActive()}));return e.forEach((function(e){return e.broadcastActive()})),e.length>0},e.prototype.connect_=function(){T&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),R?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=!0),this.connected_=!0)},e.prototype.disconnect_=function(){T&&this.connected_&&(document.removeEventListener("transitionend",this.onTransitionEnd_),window.removeEventListener("resize",this.refresh),this.mutationsObserver_&&this.mutationsObserver_.disconnect(),this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh),this.mutationsObserver_=null,this.mutationEventsAdded_=!1,this.connected_=!1)},e.prototype.onTransitionEnd_=function(e){var t=e.propertyName,n=void 0===t?"":t;D.some((function(e){return!!~n.indexOf(e)}))&&this.refresh()},e.getInstance=function(){return this.instance_||(this.instance_=new e),this.instance_},e.instance_=null,e}(),H=function(e,t){for(var n=0,r=Object.keys(t);n<r.length;n++){var a=r[n];Object.defineProperty(e,a,{value:t[a],enumerable:!1,writable:!1,configurable:!0})}return e},W=function(e){return e&&e.ownerDocument&&e.ownerDocument.defaultView||$},N=G(0,0,0,0);function P(e){return parseFloat(e)||0}function V(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];return t.reduce((function(t,n){return t+P(e["border-"+n+"-width"])}),0)}function X(e){var t=e.clientWidth,n=e.clientHeight;if(!t&&!n)return N;var r=W(e).getComputedStyle(e),a=function(e){for(var t={},n=0,r=["top","right","bottom","left"];n<r.length;n++){var a=r[n],o=e["padding-"+a];t[a]=P(o)}return t}(r),o=a.left+a.right,i=a.top+a.bottom,s=P(r.width),l=P(r.height);if("border-box"===r.boxSizing&&(Math.round(s+o)!==t&&(s-=V(r,"left","right")+o),Math.round(l+i)!==n&&(l-=V(r,"top","bottom")+i)),!function(e){return e===W(e).document.documentElement}(e)){var u=Math.round(s+o)-t,c=Math.round(l+i)-n;1!==Math.abs(u)&&(s-=u),1!==Math.abs(c)&&(l-=c)}return G(a.left,a.top,s,l)}var Y="undefined"!=typeof SVGGraphicsElement?function(e){return e instanceof W(e).SVGGraphicsElement}:function(e){return e instanceof W(e).SVGElement&&"function"==typeof e.getBBox};function q(e){return T?Y(e)?function(e){var t=e.getBBox();return G(0,0,t.width,t.height)}(e):X(e):N}function G(e,t,n,r){return{x:e,y:t,width:n,height:r}}var F=function(){function e(e){this.broadcastWidth=0,this.broadcastHeight=0,this.contentRect_=G(0,0,0,0),this.target=e}return e.prototype.isActive=function(){var e=q(this.target);return this.contentRect_=e,e.width!==this.broadcastWidth||e.height!==this.broadcastHeight},e.prototype.broadcastRect=function(){var e=this.contentRect_;return this.broadcastWidth=e.width,this.broadcastHeight=e.height,e},e}(),J=function(e,t){var n,r,a,o,i,s,l,u=(r=(n=t).x,a=n.y,o=n.width,i=n.height,s="undefined"!=typeof DOMRectReadOnly?DOMRectReadOnly:Object,l=Object.create(s.prototype),H(l,{x:r,y:a,width:o,height:i,top:a,right:r+o,bottom:i+a,left:r}),l);H(this,{target:e,contentRect:u})},K=function(){function e(e,t,n){if(this.activeObservations_=[],this.observations_=new L,"function"!=typeof e)throw new TypeError("The callback provided as parameter 1 is not a function.");this.callback_=e,this.controller_=t,this.callbackCtx_=n}return e.prototype.observe=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof W(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)||(t.set(e,new F(e)),this.controller_.addObserver(this),this.controller_.refresh())}},e.prototype.unobserve=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof W(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)&&(t.delete(e),t.size||this.controller_.removeObserver(this))}},e.prototype.disconnect=function(){this.clearActive(),this.observations_.clear(),this.controller_.removeObserver(this)},e.prototype.gatherActive=function(){var e=this;this.clearActive(),this.observations_.forEach((function(t){t.isActive()&&e.activeObservations_.push(t)}))},e.prototype.broadcastActive=function(){if(this.hasActive()){var e=this.callbackCtx_,t=this.activeObservations_.map((function(e){return new J(e.target,e.broadcastRect())}));this.callback_.call(e,t,e),this.clearActive()}},e.prototype.clearActive=function(){this.activeObservations_.splice(0)},e.prototype.hasActive=function(){return this.activeObservations_.length>0},e}(),Q="undefined"!=typeof WeakMap?new WeakMap:new L,U=function e(t){if(!(this instanceof e))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var n=j.getInstance(),r=new K(t,n,this);Q.set(this,r)};["observe","unobserve","disconnect"].forEach((function(e){U.prototype[e]=function(){var t;return(t=Q.get(this))[e].apply(t,arguments)}}));var Z=void 0!==$.ResizeObserver?$.ResizeObserver:U;const ee="undefined"==typeof window,te=e=>{for(const t of e){const e=t.target.__resizeListeners__||[];e.length&&e.forEach((e=>e()))}};var ne=i({name:"CarouselCard",props:{initialIndex:{type:Number,default:0},height:{type:String,default:"200"},trigger:{type:String,default:"hover"},autoplay:{type:Boolean,default:!0},interval:{type:Number,default:3e3},indicatorPosition:{type:String,default:"",validator:e=>["outside","none",""].includes(e)},indicator:{type:Boolean,default:!0},arrow:{type:String,default:"hover"},type:{type:String,default:""},loop:{type:Boolean,default:!0},direction:{type:String,default:"horizontal",validator:e=>["horizontal","vertical"].includes(e)},pauseOnHover:{type:Boolean,default:!0}},emits:["change"],setup(e,{emit:t}){const n=s(null),r=s(0),a=s(0),o=s([]),i=s(-1),f=s(null),p=s(!1),_=l((()=>o.value.some((e=>e.label.toString().length>0)))),m=l((()=>"never"!==e.arrow&&"vertical"!==e.direction)),b=l((()=>["carousel-card",`carousel-card-${e.direction}`])),y=l((()=>{const t=["carousel-card-indicators",`carousel-card-indicators-${e.direction}`];return _.value&&t.push("carousel-card-indicators-labels"),"vertical"===e.direction||"outside"!==e.indicatorPosition&&"card"!==e.type||t.push("carousel-card-indicators-outside"),t}));u(o,(t=>{t.length>0&&g(e.initialIndex)})),u(i,((e,n)=>{w(n),n>-1&&t("change",e,n)})),u((()=>e.autoplay),(e=>{e?O():E()})),u((()=>e.loop),(()=>{g(i.value)}));const g=t=>{if("string"==typeof t){const e=o.value.filter((e=>e.name===t));e.length>0&&(t=o.value.indexOf(e[0]))}if(t=Number(t),isNaN(t)||t!==Math.floor(t))return void console.warn("[Vue-Carousel-Card Warn][Carousel-card] index must be an integer.");const n=o.value.length,r=i.value;i.value=t<0?e.loop?n-1:0:t>=n?e.loop?0:n-1:t,r===i.value&&w(r)},w=e=>{o.value.forEach(((t,n)=>{t.translateItem(n,i.value,e)}))},E=()=>{f.value&&clearInterval(f.value)},O=()=>{e.interval<=0||!e.autoplay||(f.value=setInterval(C,e.interval))},C=()=>{i.value<o.value.length-1?i.value++:e.loop&&(i.value=0)},M=A(300,!0,(e=>{g(e)})),I=A(300,!0,(e=>{k(e)})),x=()=>{g(i.value+1)},k=t=>{"hover"===e.trigger&&t!==i.value&&(i.value=t)};return c((()=>{d((()=>{var t,s;n.value&&(t=n.value,s=w,ee||(t.__resizeListeners__||(t.__resizeListeners__=[],t.__ro__=new Z(te),t.__ro__.observe(t)),t.__resizeListeners__.push(s)),r.value=n.value.offsetWidth,a.value=n.value.offsetHeight),e.initialIndex<o.value.length&&e.initialIndex>=0&&(i.value=e.initialIndex),O()}))})),h((()=>{var e,t;n.value&&(e=n.value,t=w,e&&e.__resizeListeners__&&(e.__resizeListeners__.splice(e.__resizeListeners__.indexOf(t),1),e.__resizeListeners__.length||e.__ro__.disconnect()))})),v("injectCarouselCardScope",{offsetWidth:r,offsetHeight:a,type:e.type,items:o,direction:e.direction,loop:e.loop,addItem:e=>{o.value.push(e)},removeItem:e=>{const t=o.value.findIndex((t=>t.uid===e));-1!==t&&(o.value.splice(t,1),i.value===t&&x())},setActiveItem:g}),{rootRef:n,items:o,activeIndex:i,hover:p,hasLabel:_,arrowDisplay:m,carouselCardClazz:b,indicatorsClazz:y,setActiveItem:g,handleMouseEnter:()=>{p.value=!0,e.pauseOnHover&&E()},handleMouseLeave:()=>{p.value=!1,O()},handleButtonEnter:t=>{"vertical"!==e.direction&&o.value.forEach(((e,n)=>{t===((e,t)=>{const n=o.value.length;return t===n-1&&e.inStage&&o.value[0].active||e.inStage&&o.value[t+1]&&o.value[t+1].active?"left":!!(0===t&&e.inStage&&o.value[n-1].active||e.inStage&&o.value[t-1]&&o.value[t-1].active)&&"right"})(e,n)&&(e.hover=!0)}))},handleButtonLeave:()=>{"vertical"!==e.direction&&o.value.forEach((e=>{e.hover=!1}))},prev:()=>{g(i.value-1)},next:x,handleIndicatorClick:e=>{i.value=e},handleIndicatorHover:k,throttledArrowClick:M,throttledIndicatorHover:I}}});const re=m("i",null,null,-1),ae=m("i",null,null,-1),oe={class:"carousel-card-button"};ne.render=function(e,t,n,r,a,o){return f(),p("div",{ref:"rootRef",class:e.carouselCardClazz,onMouseenter:t[7]||(t[7]=_(((...t)=>e.handleMouseEnter&&e.handleMouseEnter(...t)),["stop"])),onMouseleave:t[8]||(t[8]=_(((...t)=>e.handleMouseLeave&&e.handleMouseLeave(...t)),["stop"]))},[m("div",{style:{height:e.height},class:"carousel-card-container"},[e.arrowDisplay?(f(),p(b,{key:0,name:"carousel-card-arrow-left"},{default:y((()=>[g(m("button",{type:"button",class:"carousel-card-arrow carousel-card-arrow-left",onMouseenter:t[1]||(t[1]=t=>e.handleButtonEnter("left")),onMouseleave:t[2]||(t[2]=(...t)=>e.handleButtonLeave&&e.handleButtonLeave(...t)),onClick:t[3]||(t[3]=_((t=>e.throttledArrowClick(e.activeIndex-1)),["stop"]))},[re],544),[[w,("always"===e.arrow||e.hover)&&(e.loop||e.activeIndex>0)]])])),_:1})):E("",!0),e.arrowDisplay?(f(),p(b,{key:1,name:"carousel-card-arrow-right"},{default:y((()=>[g(m("button",{type:"button",class:"carousel-card-arrow carousel-card-arrow-right",onMouseenter:t[4]||(t[4]=t=>e.handleButtonEnter("right")),onMouseleave:t[5]||(t[5]=(...t)=>e.handleButtonLeave&&e.handleButtonLeave(...t)),onClick:t[6]||(t[6]=_((t=>e.throttledArrowClick(e.activeIndex+1)),["stop"]))},[ae],544),[[w,("always"===e.arrow||e.hover)&&(e.loop||e.activeIndex<e.items.length-1)]])])),_:1})):E("",!0),O(e.$slots,"default")],4),"none"!==e.indicatorPosition?(f(),p("ul",{key:0,class:e.indicatorsClazz},[(f(!0),p(C,null,M(e.items,((t,n)=>(f(),p("li",{key:n,class:["carousel-card-indicator",`carousel-card-indicator-${e.direction}`,{"is-active":n===e.activeIndex}],onMouseenter:t=>e.throttledIndicatorHover(n),onClick:_((t=>e.handleIndicatorClick(n)),["stop"])},[m("button",oe,[e.hasLabel?(f(),p("span",{key:0,textContent:I(t.label)},null,8,["textContent"])):E("",!0)])],42,["onMouseenter","onClick"])))),128))],2)):E("",!0)],34)};var ie=i({name:"CarouselCardItem",props:{name:{type:String,default:""},label:{type:[String,Number],default:""}},setup(e){const t=x(),n=s(!1),r=s(0),a=s(1),i=s(!1),u=s(!1),d=s(!1),h=s(!1),v=k("injectCarouselCardScope"),f=l((()=>v.direction)),p=l((()=>"vertical"===f.value?{msTransform:`translateY(${r.value}px) translateX(-50%) scale(${a.value})`,webkitTransform:`translateY(${r.value}px) translateX(-50%) scale(${a.value})`,transform:`translateY(${r.value}px) translateX(-50%) scale(${a.value})`,left:"50%"}:{msTransform:`translateX(${r.value}px) translateY(-50%) scale(${a.value})`,webkitTransform:`translateX(${r.value}px) translateY(-50%) scale(${a.value})`,transform:`translateX(${r.value}px) translateY(-50%) scale(${a.value})`,top:"50%"})),_=(e,t,n)=>{const o=v.items.value.length,s=v.type;"card"!==s&&void 0!==n&&(h.value=e===t||e===n),e!==t&&o>2&&(e=((e,t,n)=>0===t&&e===n-1?-1:t===n-1&&0===e?n:e<t-1&&t-e>=n/2?n+1:e>t+1&&e-t>=n/2?-2:e)(e,t,o)),"card"===s?("vertical"===f.value&&console.warn("[Vue-Carousel-Card Warn][Carousel-card] vertical direction is not supported in card mode"),d.value=Math.round(Math.abs(e-t))<=1,i.value=e===t,r.value=((e,t)=>{const n=v.offsetWidth.value;return d.value?n*(1.17*(e-t)+1)/4:e<t?-1.83*n/4:3.83*n/4})(e,t),a.value=i.value?1:.83):(i.value=e===t,r.value=((e,t,n)=>v[n?"offsetHeight":"offsetWidth"].value*(e-t))(e,t,"vertical"===f.value)),u.value=!0};return c((()=>{v.addItem&&t&&v.addItem(o(o({uid:t.uid},e),{hover:n,translate:r,scale:a,active:i,ready:u,inStage:d,animating:h,translateItem:_}))})),S((()=>{v.removeItem&&t&&v.removeItem(t.uid)})),{type:v.type,ready:u,active:i,inStage:d,hover:n,animating:h,itemStyle:p,translateItem:_,handleItemClick:()=>{if(v&&"card"===v.type&&t){const e=v.items.value.map((e=>e.uid)).indexOf(t.uid);v.setActiveItem(e)}}}}});const se={key:0,class:"carousel-card-mask"};ie.render=function(e,t,n,r,a,o){return g((f(),p("div",{style:e.itemStyle,class:[{"is-active":e.active,"carousel-card-item-card":"card"===e.type,"is-in-stage":e.inStage,"is-hover":e.hover,"is-animating":e.animating},"carousel-card-item"],onClick:t[1]||(t[1]=(...t)=>e.handleItemClick&&e.handleItemClick(...t))},["card"===e.type?g((f(),p("div",se,null,512)),[[w,!e.active]]):E("",!0),O(e.$slots,"default")],6)),[[w,e.ready]])},ne.install=e=>{e.component(ne.name,ne)},ie.install=e=>{e.component(ie.name,ie)};var le={install:e=>{e.component(ne.name,ne),e.component(ie.name,ie)},CarouselCard:ne,CarouselCardItem:ie};export default le;export{ne as CarouselCard,ie as CarouselCardItem};