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

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

var __defProp=Object.defineProperty,__hasOwnProp=Object.prototype.hasOwnProperty,__getOwnPropSymbols=Object.getOwnPropertySymbols,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(e,t,n)=>t in e?__defProp(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,__assign=(e,t)=>{for(var n in t||(t={}))__hasOwnProp.call(t,n)&&__defNormalProp(e,n,t[n]);if(__getOwnPropSymbols)for(var n of __getOwnPropSymbols(t))__propIsEnum.call(t,n)&&__defNormalProp(e,n,t[n]);return e};!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["vue-carousel-card"]={},e.Vue)}(this,(function(e,t){"use strict";var n=function(e,t,n,r){var o,i=0;return"boolean"!=typeof t&&(r=n,n=t,t=void 0),function(){var a=this,s=Number(new Date)-i,l=arguments;function c(){i=Number(new Date),n.apply(a,l)}function u(){o=void 0}r&&!o&&c(),o&&clearTimeout(o),void 0===r&&s>e?c():!0!==t&&(o=setTimeout(r?u:c,void 0===r?e-s:e))}},r=n,o=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 o=r[n];e.call(t,o[1],o[0])}},t}()}(),i="undefined"!=typeof window&&"undefined"!=typeof document&&window.document===document,a="undefined"!=typeof global&&global.Math===Math?global:"undefined"!=typeof self&&self.Math===Math?self:"undefined"!=typeof window&&window.Math===Math?window:Function("return this")(),s="function"==typeof requestAnimationFrame?requestAnimationFrame.bind(a):function(e){return setTimeout((function(){return e(Date.now())}),1e3/60)};var l=["top","right","bottom","left","width","height","size","weight"],c="undefined"!=typeof MutationObserver,u=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,o=0;function i(){n&&(n=!1,e()),r&&l()}function a(){s(i)}function l(){var e=Date.now();if(n){if(e-o<2)return;r=!0}else n=!0,r=!1,setTimeout(a,t);o=e}return l}(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(){i&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),c?(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(){i&&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;l.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}(),d=function(e,t){for(var n=0,r=Object.keys(t);n<r.length;n++){var o=r[n];Object.defineProperty(e,o,{value:t[o],enumerable:!1,writable:!1,configurable:!0})}return e},h=function(e){return e&&e.ownerDocument&&e.ownerDocument.defaultView||a},v=b(0,0,0,0);function f(e){return parseFloat(e)||0}function p(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];return t.reduce((function(t,n){return t+f(e["border-"+n+"-width"])}),0)}function _(e){var t=e.clientWidth,n=e.clientHeight;if(!t&&!n)return v;var r=h(e).getComputedStyle(e),o=function(e){for(var t={},n=0,r=["top","right","bottom","left"];n<r.length;n++){var o=r[n],i=e["padding-"+o];t[o]=f(i)}return t}(r),i=o.left+o.right,a=o.top+o.bottom,s=f(r.width),l=f(r.height);if("border-box"===r.boxSizing&&(Math.round(s+i)!==t&&(s-=p(r,"left","right")+i),Math.round(l+a)!==n&&(l-=p(r,"top","bottom")+a)),!function(e){return e===h(e).document.documentElement}(e)){var c=Math.round(s+i)-t,u=Math.round(l+a)-n;1!==Math.abs(c)&&(s-=c),1!==Math.abs(u)&&(l-=u)}return b(o.left,o.top,s,l)}var m="undefined"!=typeof SVGGraphicsElement?function(e){return e instanceof h(e).SVGGraphicsElement}:function(e){return e instanceof h(e).SVGElement&&"function"==typeof e.getBBox};function y(e){return i?m(e)?function(e){var t=e.getBBox();return b(0,0,t.width,t.height)}(e):_(e):v}function b(e,t,n,r){return{x:e,y:t,width:n,height:r}}var g=function(){function e(e){this.broadcastWidth=0,this.broadcastHeight=0,this.contentRect_=b(0,0,0,0),this.target=e}return e.prototype.isActive=function(){var e=y(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}(),w=function(e,t){var n,r,o,i,a,s,l,c=(r=(n=t).x,o=n.y,i=n.width,a=n.height,s="undefined"!=typeof DOMRectReadOnly?DOMRectReadOnly:Object,l=Object.create(s.prototype),d(l,{x:r,y:o,width:i,height:a,top:o,right:r+i,bottom:a+o,left:r}),l);d(this,{target:e,contentRect:c})},C=function(){function e(e,t,n){if(this.activeObservations_=[],this.observations_=new o,"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 h(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)||(t.set(e,new g(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 h(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 w(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}(),O="undefined"!=typeof WeakMap?new WeakMap:new o,E=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=u.getInstance(),r=new C(t,n,this);O.set(this,r)};["observe","unobserve","disconnect"].forEach((function(e){E.prototype[e]=function(){var t;return(t=O.get(this))[e].apply(t,arguments)}}));var M=void 0!==a.ResizeObserver?a.ResizeObserver:E;const k="undefined"==typeof window,x=e=>{for(const t of e){const e=t.target.__resizeListeners__||[];e.length&&e.forEach((e=>e()))}};var I=t.defineComponent({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:n}){const o=t.ref(null),i=t.ref(0),a=t.ref(0),s=t.ref([]),l=t.ref(-1),c=t.ref(null),u=t.ref(!1),d=t.computed((()=>s.value.some((e=>e.label.toString().length>0)))),h=t.computed((()=>"never"!==e.arrow&&"vertical"!==e.direction)),v=t.computed((()=>["carousel-card",`carousel-card-${e.direction}`])),f=t.computed((()=>{const t=["carousel-card-indicators",`carousel-card-indicators-${e.direction}`];return d.value&&t.push("carousel-card-indicators-labels"),"vertical"===e.direction||"outside"!==e.indicatorPosition&&"card"!==e.type||t.push("carousel-card-indicators-outside"),t}));t.watch(s,(t=>{t.length>0&&p(e.initialIndex)})),t.watch(l,((e,t)=>{_(t),t>-1&&n("change",e,t)})),t.watch((()=>e.autoplay),(e=>{e?y():m()})),t.watch((()=>e.loop),(()=>{p(l.value)}));const p=t=>{if("string"==typeof t){const e=s.value.filter((e=>e.name===t));e.length>0&&(t=s.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=s.value.length,r=l.value;l.value=t<0?e.loop?n-1:0:t>=n?e.loop?0:n-1:t,r===l.value&&_(r)},_=e=>{s.value.forEach(((t,n)=>{t.translateItem(n,l.value,e)}))},m=()=>{c.value&&clearInterval(c.value)},y=()=>{e.interval<=0||!e.autoplay||(c.value=setInterval(b,e.interval))},b=()=>{l.value<s.value.length-1?l.value++:e.loop&&(l.value=0)},g=r(300,!0,(e=>{p(e)})),w=r(300,!0,(e=>{O(e)})),C=()=>{p(l.value+1)},O=t=>{"hover"===e.trigger&&t!==l.value&&(l.value=t)};return t.onMounted((()=>{t.nextTick((()=>{var t,n;o.value&&(t=o.value,n=_,k||(t.__resizeListeners__||(t.__resizeListeners__=[],t.__ro__=new M(x),t.__ro__.observe(t)),t.__resizeListeners__.push(n)),i.value=o.value.offsetWidth,a.value=o.value.offsetHeight),e.initialIndex<s.value.length&&e.initialIndex>=0&&(l.value=e.initialIndex),y()}))})),t.onBeforeUnmount((()=>{var e,t;o.value&&(e=o.value,t=_,e&&e.__resizeListeners__&&(e.__resizeListeners__.splice(e.__resizeListeners__.indexOf(t),1),e.__resizeListeners__.length||e.__ro__.disconnect()))})),t.provide("injectCarouselCardScope",{offsetWidth:i,offsetHeight:a,type:e.type,items:s,direction:e.direction,loop:e.loop,addItem:e=>{s.value.push(e)},removeItem:e=>{const t=s.value.findIndex((t=>t.uid===e));-1!==t&&(s.value.splice(t,1),l.value===t&&C())},setActiveItem:p}),{rootRef:o,items:s,activeIndex:l,hover:u,hasLabel:d,arrowDisplay:h,carouselCardClazz:v,indicatorsClazz:f,setActiveItem:p,handleMouseEnter:()=>{u.value=!0,e.pauseOnHover&&m()},handleMouseLeave:()=>{u.value=!1,y()},handleButtonEnter:t=>{"vertical"!==e.direction&&s.value.forEach(((e,n)=>{t===((e,t)=>{const n=s.value.length;return t===n-1&&e.inStage&&s.value[0].active||e.inStage&&s.value[t+1]&&s.value[t+1].active?"left":!!(0===t&&e.inStage&&s.value[n-1].active||e.inStage&&s.value[t-1]&&s.value[t-1].active)&&"right"})(e,n)&&(e.hover=!0)}))},handleButtonLeave:()=>{"vertical"!==e.direction&&s.value.forEach((e=>{e.hover=!1}))},prev:()=>{p(l.value-1)},next:C,handleIndicatorClick:e=>{l.value=e},handleIndicatorHover:O,throttledArrowClick:g,throttledIndicatorHover:w}}});const S=t.createVNode("i",null,null,-1),B=t.createVNode("i",null,null,-1),T={class:"carousel-card-button"};I.render=function(e,n,r,o,i,a){return t.openBlock(),t.createBlock("div",{ref:"rootRef",class:e.carouselCardClazz,onMouseenter:n[7]||(n[7]=t.withModifiers(((...t)=>e.handleMouseEnter&&e.handleMouseEnter(...t)),["stop"])),onMouseleave:n[8]||(n[8]=t.withModifiers(((...t)=>e.handleMouseLeave&&e.handleMouseLeave(...t)),["stop"]))},[t.createVNode("div",{style:{height:e.height},class:"carousel-card-container"},[e.arrowDisplay?(t.openBlock(),t.createBlock(t.Transition,{key:0,name:"carousel-card-arrow-left"},{default:t.withCtx((()=>[t.withDirectives(t.createVNode("button",{type:"button",class:"carousel-card-arrow carousel-card-arrow-left",onMouseenter:n[1]||(n[1]=t=>e.handleButtonEnter("left")),onMouseleave:n[2]||(n[2]=(...t)=>e.handleButtonLeave&&e.handleButtonLeave(...t)),onClick:n[3]||(n[3]=t.withModifiers((t=>e.throttledArrowClick(e.activeIndex-1)),["stop"]))},[S],544),[[t.vShow,("always"===e.arrow||e.hover)&&(e.loop||e.activeIndex>0)]])])),_:1})):t.createCommentVNode("",!0),e.arrowDisplay?(t.openBlock(),t.createBlock(t.Transition,{key:1,name:"carousel-card-arrow-right"},{default:t.withCtx((()=>[t.withDirectives(t.createVNode("button",{type:"button",class:"carousel-card-arrow carousel-card-arrow-right",onMouseenter:n[4]||(n[4]=t=>e.handleButtonEnter("right")),onMouseleave:n[5]||(n[5]=(...t)=>e.handleButtonLeave&&e.handleButtonLeave(...t)),onClick:n[6]||(n[6]=t.withModifiers((t=>e.throttledArrowClick(e.activeIndex+1)),["stop"]))},[B],544),[[t.vShow,("always"===e.arrow||e.hover)&&(e.loop||e.activeIndex<e.items.length-1)]])])),_:1})):t.createCommentVNode("",!0),t.renderSlot(e.$slots,"default")],4),"none"!==e.indicatorPosition?(t.openBlock(),t.createBlock("ul",{key:0,class:e.indicatorsClazz},[(t.openBlock(!0),t.createBlock(t.Fragment,null,t.renderList(e.items,((n,r)=>(t.openBlock(),t.createBlock("li",{key:r,class:["carousel-card-indicator",`carousel-card-indicator-${e.direction}`,{"is-active":r===e.activeIndex}],onMouseenter:t=>e.throttledIndicatorHover(r),onClick:t.withModifiers((t=>e.handleIndicatorClick(r)),["stop"])},[t.createVNode("button",T,[e.hasLabel?(t.openBlock(),t.createBlock("span",{key:0,textContent:t.toDisplayString(n.label)},null,8,["textContent"])):t.createCommentVNode("",!0)])],42,["onMouseenter","onClick"])))),128))],2)):t.createCommentVNode("",!0)],34)};const z=.83;var L=t.defineComponent({name:"CarouselCardItem",props:{name:{type:String,default:""},label:{type:[String,Number],default:""}},setup(e){const n=t.getCurrentInstance(),r=t.ref(!1),o=t.ref(0),i=t.ref(1),a=t.ref(!1),s=t.ref(!1),l=t.ref(!1),c=t.ref(!1),u=t.inject("injectCarouselCardScope"),d=t.computed((()=>u.direction)),h=t.computed((()=>"vertical"===d.value?{msTransform:`translateY(${o.value}px) translateX(-50%) scale(${i.value})`,webkitTransform:`translateY(${o.value}px) translateX(-50%) scale(${i.value})`,transform:`translateY(${o.value}px) translateX(-50%) scale(${i.value})`,left:"50%"}:{msTransform:`translateX(${o.value}px) translateY(-50%) scale(${i.value})`,webkitTransform:`translateX(${o.value}px) translateY(-50%) scale(${i.value})`,transform:`translateX(${o.value}px) translateY(-50%) scale(${i.value})`,top:"50%"})),v=(e,t,n)=>{const r=u.items.value.length,h=u.type;"card"!==h&&void 0!==n&&(c.value=e===t||e===n),e!==t&&r>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,r)),"card"===h?("vertical"===d.value&&console.warn("[Vue-Carousel-Card Warn][Carousel-card] vertical direction is not supported in card mode"),l.value=Math.round(Math.abs(e-t))<=1,a.value=e===t,o.value=((e,t)=>{const n=u.offsetWidth.value;return l.value?n*(1.17*(e-t)+1)/4:e<t?-1.83*n/4:3.83*n/4})(e,t),i.value=a.value?1:z):(a.value=e===t,o.value=((e,t,n)=>u[n?"offsetHeight":"offsetWidth"].value*(e-t))(e,t,"vertical"===d.value)),s.value=!0};return t.onMounted((()=>{u.addItem&&n&&u.addItem(__assign(__assign({uid:n.uid},e),{hover:r,translate:o,scale:i,active:a,ready:s,inStage:l,animating:c,translateItem:v}))})),t.onUnmounted((()=>{u.removeItem&&n&&u.removeItem(n.uid)})),{type:u.type,ready:s,active:a,inStage:l,hover:r,animating:c,itemStyle:h,translateItem:v,handleItemClick:()=>{if(u&&"card"===u.type&&n){const e=u.items.value.map((e=>e.uid)).indexOf(n.uid);u.setActiveItem(e)}}}}});const A={key:0,class:"carousel-card-mask"};L.render=function(e,n,r,o,i,a){return t.withDirectives((t.openBlock(),t.createBlock("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:n[1]||(n[1]=(...t)=>e.handleItemClick&&e.handleItemClick(...t))},["card"===e.type?t.withDirectives((t.openBlock(),t.createBlock("div",A,null,512)),[[t.vShow,!e.active]]):t.createCommentVNode("",!0),t.renderSlot(e.$slots,"default")],6)),[[t.vShow,e.ready]])},I.install=e=>{e.component(I.name,I)},L.install=e=>{e.component(L.name,L)};var N={install:e=>{e.component(I.name,I),e.component(L.name,L)},CarouselCard:I,CarouselCardItem:L};e.CarouselCard=I,e.CarouselCardItem=L,e.default=N,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"}));