@next-fe/vue-za-swiper/dist/index.umd.js

smoothly swiper

(function(s,c){typeof exports=="object"&&typeof module!="undefined"?module.exports=c(require("vue")):typeof define=="function"&&define.amd?define(["vue"],c):(s=typeof globalThis!="undefined"?globalThis:s||self,s["z-index"]=c(s.Vue))})(this,function(s){"use strict";var c=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},C="Expected a function",L=0/0,B="[object Symbol]",E=/^\s+|\s+$/g,_=/^[-+]0x[0-9a-f]+$/i,P=/^0b[01]+$/i,k=/^0o[0-7]+$/i,M=parseInt,z=typeof c=="object"&&c&&c.Object===Object&&c,W=typeof self=="object"&&self&&self.Object===Object&&self,H=z||W||Function("return this")(),G=Object.prototype,j=G.toString,F=Math.max,U=Math.min,O=function(){return H.Date.now()};function Z(t,e,i){var o,l,n,r,a,f,g=0,N=!1,y=!1,S=!0;if(typeof t!="function")throw new TypeError(C);e=x(e)||0,T(i)&&(N=!!i.leading,y="maxWait"in i,n=y?F(x(i.maxWait)||0,e):n,S="trailing"in i?!!i.trailing:S);function v(h){var m=o,b=l;return o=l=void 0,g=h,r=t.apply(b,m),r}function nt(h){return g=h,a=setTimeout(I,e),N?v(h):r}function st(h){var m=h-f,b=h-g,R=e-m;return y?U(R,n-b):R}function A(h){var m=h-f,b=h-g;return f===void 0||m>=e||m<0||y&&b>=n}function I(){var h=O();if(A(h))return V(h);a=setTimeout(I,st(h))}function V(h){return a=void 0,S&&o?v(h):(o=l=void 0,r)}function rt(){a!==void 0&&clearTimeout(a),g=0,o=f=l=a=void 0}function at(){return a===void 0?r:V(O())}function w(){var h=O(),m=A(h);if(o=arguments,l=this,f=h,m){if(a===void 0)return nt(f);if(y)return a=setTimeout(I,e),v(f)}return a===void 0&&(a=setTimeout(I,e)),r}return w.cancel=rt,w.flush=at,w}function $(t,e,i){var o=!0,l=!0;if(typeof t!="function")throw new TypeError(C);return T(i)&&(o="leading"in i?!!i.leading:o,l="trailing"in i?!!i.trailing:l),Z(t,e,{leading:o,maxWait:e,trailing:l})}function T(t){var e=typeof t;return!!t&&(e=="object"||e=="function")}function q(t){return!!t&&typeof t=="object"}function X(t){return typeof t=="symbol"||q(t)&&j.call(t)==B}function x(t){if(typeof t=="number")return t;if(X(t))return L;if(T(t)){var e=typeof t.valueOf=="function"?t.valueOf():t;t=T(e)?e+"":e}if(typeof t!="string")return t===0?t:+t;t=t.replace(E,"");var i=P.test(t);return i||k.test(t)?M(t.slice(2),i?2:8):_.test(t)?L:+t}var Y=$;function J(t){return typeof t=="number"&&!isNaN(t)}var p={isNumber:J,throttle:Y},u={getCssValue(t){const e=String(t).match(/[+-]?(0|([1-9]\d*))(\.\d+)?/);return Number(e[0])},getCssUnit(t){return String(t).match(/([a-z]+)/)[1]},getDomPropertyValue(t,e){return Number(window.getComputedStyle(t).getPropertyValue(e).replace("px",""))}},ot="",K=(t,e)=>{const i=t.__vccOpts||t;for(const[o,l]of e)i[o]=l;return i};const D={COMPUTED:"computed",CUSTOM:"custom"},d={VERTICAL:"vertical",HORIZONTAL:"horizontal"},Q={name:"za-swiper",props:{direction:{type:String,default:d.HORIZONTAL},itemSizeMode:{type:String,default:D.COMPUTED},list:{type:Array,required:!0},initialOffset:{type:[Number,String],default:0},visibleLength:{type:Number},innerHeight:{type:[Number,String],required:!0},innerWidth:{type:[Number,String],required:!0},spanGap:{type:[Number,String],default:0},sideGap:{type:[Number,String],default:0},autoPlay:{type:Boolean,default:!1},step:{type:Number,default:-.5},playDelay:{type:Number,default:2e3},playImmediate:{type:Boolean,default:!1},slideAnimationDuration:{type:Number,default:300}},data(){return{listDiv:0,leftBorder:0,rightBorder:0,itemWidth:"auto",itemHeight:"auto",itemFullDirectionLengthValue:0,lastOffset:0,intersectionRatioThreshold:.95,replayTimer:null,animationInterval:null,doubleList:[],playing:!1}},computed:{computedInnerWidth(){return p.isNumber(this.innerWidth)?`${this.innerWidth}px`:this.innerWidth},computedInnerHeight(){return p.isNumber(this.innerHeight)?`${this.innerHeight}px`:this.innerHeight},computedSpanGap(){return p.isNumber(this.spanGap)?`${this.spanGap}px`:this.spanGap},computedSideGap(){return p.isNumber(this.sideGap)?`${this.sideGap}px`:this.sideGap},customBtnStyle(){return{padding:`0 ${this.computedSideGap}`}},containerClasses(){const t=["za-swiper"];return this.direction===d.VERTICAL&&t.push("za-swiper--vertical"),t},swiperItemStyle(){const t={width:this.itemWidth,height:this.itemHeight,marginRight:0,marginBottom:0};return this.direction===d.HORIZONTAL?t.marginRight=this.computedSpanGap:t.marginBottom=this.computedSpanGap,t},useLeft(){return this.$slots.left},useRight(){return this.$slots.right}},methods:{getObserveEntries(){return new Promise(t=>{const e=new IntersectionObserver(i=>{e.disconnect(),t(i)},{root:this.$refs.swiperBody});this.$refs.swiperItems.forEach(i=>{e.observe(i)})})},getDomDirectionTranslate(){const[,t,e]=/translate\(([^p]+)px, ([^p]+)px\)/.exec(this.$refs.swiperWrapper.style.transform);return Number(this.direction===d.HORIZONTAL?t:e)},setDomDirectionTranslate(t){let e=0,i=0;this.direction===d.HORIZONTAL?e=t:i=t,this.$refs.swiperWrapper.style.transform=`translate(${e}px, ${i}px)`},initDoubleList(){const t=Math.floor(this.list.length/2);this.doubleList=[...this.list.slice(t),...this.list,...this.list.slice(0,t)],this.listDiv=this.list.length-t},initItemCss(){const t=u.getCssUnit(this.computedInnerWidth),e=u.getCssUnit(this.computedSpanGap);if(t!==e)throw new Error("Please unite spanGap\u3001innerWidth css unit");const i=this.direction===d.HORIZONTAL?this.computedInnerWidth:this.computedInnerHeight,o=u.getCssValue(i),l=u.getCssValue(this.computedSpanGap),n=(o-l*(this.visibleLength-1))/this.visibleLength;this.direction===d.HORIZONTAL?(this.itemWidth=n+t,this.itemHeight="100%"):(this.itemWidth="100%",this.itemHeight=n+t)},initItemRenderedValue(){const t=this.$refs.swiperItems[0];let e="width",i="margin-right";this.direction===d.VERTICAL&&(e="height",i="margin-bottom"),this.itemFullDirectionLengthValue=u.getDomPropertyValue(t,e)+u.getDomPropertyValue(t,i)},initTranslate(){const t=this.getDomDirectionTranslate()-this.itemFullDirectionLengthValue*this.listDiv;return this.setDomDirectionTranslate(t),Math.abs(t)},play(){this.translate=this.getDomDirectionTranslate();const t=()=>{this.setMove(this.step),this.animationInterval=requestAnimationFrame(t)};this.animationInterval=requestAnimationFrame(t)},replay(){clearTimeout(this.replayTimer),this.replayTimer=setTimeout(()=>{this.playing||this.play()},this.playDelay)},setMove(t){this.translate+=t;const e=Math.abs(this.translate);e>=this.rightBorder?this.translate=-(this.leftBorder+(e-this.rightBorder)):e<=this.leftBorder&&(this.translate=-(this.rightBorder-(this.leftBorder-e))),this.setDomDirectionTranslate(this.translate)},_slidePrev(){this.getObserveEntries().then(t=>{const e=t.findLastIndex(a=>a.intersectionRatio>=this.intersectionRatioThreshold),o=t.filter(a=>a.intersectionRatio>=this.intersectionRatioThreshold).length===this.visibleLength?e-1:e,l=t[o],n=l.rootBounds.right-l.boundingClientRect.right;this.translate+=n,this.setDomDirectionTranslate(this.translate);const r=Math.abs(this.translate);setTimeout(()=>{r<=this.leftBorder&&(this.translate=-(this.itemFullDirectionLengthValue*(o-this.visibleLength+1+this.list.length)),this.setDomDirectionTranslate(this.translate))},this.slideAnimationDuration)})},_slideNext(){this.getObserveEntries().then(t=>{const e=t.findIndex(a=>a.intersectionRatio>=this.intersectionRatioThreshold),o=t.filter(a=>a.intersectionRatio>=this.intersectionRatioThreshold).length===this.visibleLength?e+1:e,l=t[o],n=l.boundingClientRect.left-l.rootBounds.left;this.translate-=n,this.setDomDirectionTranslate(this.translate);const r=Math.abs(this.translate);setTimeout(()=>{r>=this.rightBorder&&(this.translate=-(this.itemFullDirectionLengthValue*(o-this.list.length)),this.setDomDirectionTranslate(this.translate))},this.slideAnimationDuration)})},initOffset(){let t=0;if(p.isNumber(this.initialOffset))t=this.initialOffset;else if(u.getCssUnit(this.initialOffset)==="px")t=u.getCssValue(this.initialOffset);else{const i=document.createElement("div");i.setAttribute("style",`width: ${this.initialOffset}; position: fixed; top: 9999px`),document.body.appendChild(i),t=u.getDomPropertyValue(i,"width"),document.body.removeChild(i)}this.translate=this.getDomDirectionTranslate(),this.setMove(t)},slidePrev(){if(this.direction===d.VERTICAL||this.itemSizeMode!==D.COMPUTED)throw new Error("\u4EC5\u5F53 direction \u4E3A horizontal \u4E14 item-width-mode \u4E3A computed \u65F6\u624D\u80FD\u4F7F\u7528\u6309\u94AE\u6ED1\u52A8\u529F\u80FD");this.handleSlide(!0)},slideNext(){if(this.direction===d.VERTICAL||this.itemSizeMode!==D.COMPUTED)throw new Error("\u4EC5\u5F53 direction \u4E3A horizontal \u4E14 item-width-mode \u4E3A computed \u65F6\u624D\u80FD\u4F7F\u7528\u6309\u94AE\u6ED1\u52A8\u529F\u80FD");this.handleSlide()},touchstart(t){this.playing=!0,cancelAnimationFrame(this.animationInterval),this.lastOffset=this.direction===d.HORIZONTAL?t.targetTouches[0].pageX:t.targetTouches[0].pageY,this.translate=this.getDomDirectionTranslate()},touchmove(t){const e=this.direction===d.HORIZONTAL?t.targetTouches[0].pageX:t.targetTouches[0].pageY,i=e-this.lastOffset;this.lastOffset=e,this.setMove(i)},touchend(){this.playing=!1,this.autoPlay&&this.replay()},touchcancel(){this.touchend()}},created(){if(this.itemSizeMode===D.COMPUTED){if(!this.visibleLength)throw new Error("visibleLength \u5FC5\u987B\u4E3A\u5927\u4E8E 0 \u7684\u6574\u6570");this.initItemCss()}this.initDoubleList()},mounted(){this.initItemRenderedValue();const t=this.initTranslate();if(this.leftBorder=t,this.rightBorder=this.itemFullDirectionLengthValue*this.list.length+t,this.initialOffset&&this.initOffset(),this.autoPlay){if(this.playImmediate){this.play();return}this.replay()}this.handleSlide=p.throttle(e=>{cancelAnimationFrame(this.animationInterval),Object.assign(this.$refs.swiperWrapper.style,{"transition-duration":`${this.slideAnimationDuration}ms`}),this.translate=this.getDomDirectionTranslate(),e?this._slidePrev():this._slideNext(),setTimeout(()=>{Object.assign(this.$refs.swiperWrapper.style,{"transition-duration":"0ms"}),this.autoPlay&&this.replay()},this.slideAnimationDuration)},this.slideAnimationDuration+200,{trailing:!1})},beforeDestroy(){clearTimeout(this.replayTimer),cancelAnimationFrame(this.animationInterval)}},tt=["data-index"];function et(t,e,i,o,l,n){return s.openBlock(),s.createElementBlock("div",{class:s.normalizeClass(n.containerClasses)},[n.useLeft?(s.openBlock(),s.createElementBlock("div",{key:0,class:"za-swiper__btn",onClick:e[0]||(e[0]=(...r)=>n.slidePrev&&n.slidePrev(...r)),style:s.normalizeStyle(n.customBtnStyle)},[s.renderSlot(t.$slots,"left",{},void 0,!0)],4)):s.createCommentVNode("",!0),s.createElementVNode("div",{class:"za-swiper__list-wrapper",ref:"swiperBody",onTouchstart:e[1]||(e[1]=(...r)=>n.touchstart&&n.touchstart(...r)),onTouchmove:e[2]||(e[2]=(...r)=>n.touchmove&&n.touchmove(...r)),onTouchend:e[3]||(e[3]=(...r)=>n.touchend&&n.touchend(...r)),onTouchcancel:e[4]||(e[4]=(...r)=>n.touchcancel&&n.touchcancel(...r))},[s.createElementVNode("div",{class:"za-swiper__list",ref:"swiperWrapper",style:s.normalizeStyle({width:n.computedInnerWidth,height:n.computedInnerHeight,transform:"translate(0px, 0px)"})},[(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(l.doubleList,(r,a)=>(s.openBlock(),s.createElementBlock("div",{class:"za-swiper__item",ref_for:!0,ref:"swiperItems",style:s.normalizeStyle(n.swiperItemStyle),"data-index":a,key:a},[s.renderSlot(t.$slots,"default",{item:r,index:a},void 0,!0)],12,tt))),128))],4)],544),n.useRight?(s.openBlock(),s.createElementBlock("div",{key:1,class:"za-swiper__btn",onClick:e[5]||(e[5]=(...r)=>n.slideNext&&n.slideNext(...r)),style:s.normalizeStyle(n.customBtnStyle)},[s.renderSlot(t.$slots,"right",{},void 0,!0)],4)):s.createCommentVNode("",!0)],2)}var it=K(Q,[["render",et],["__scopeId","data-v-59aca861"]]);return it});