diff --git a/dist/vue-snap.esm.js b/dist/vue-snap.esm.js index 59ff698..c8d83ba 100644 --- a/dist/vue-snap.esm.js +++ b/dist/vue-snap.esm.js @@ -1 +1 @@ -import{elementScrollByPolyfill as e}from"seamless-scroll-polyfill/dist/esm/Element.scrollBy";import t from"lodash/debounce";import{openBlock as s,createBlock as r,resolveDynamicComponent as i,withCtx as o,createCommentVNode as l,renderSlot as n,withDirectives as a,createVNode as c,vShow as d}from"vue";var h=function(e,t,s){return Math.abs(e-t)<=s},u="undefined"==typeof window,f=!u;u||"scrollBehavior"in document.documentElement.style||e();var p={props:{hideArrows:{type:Boolean,default:!1},hideArrowsOnBound:{type:Boolean,default:!1},tag:{type:String,default:"ul"},i18n:{type:Object,default:()=>({slideLeft:"Slide left",slideRight:"Slide right"}),validator:e=>["slideLeft","slideRight"].every(t=>t in e)}},data:()=>({boundLeft:!0,boundRight:!1,slidesWidth:[],wrapperScrollWidth:0,wrapperVisibleWidth:0,currentPage:0,currentPos:0,maxPages:0,step:1,observer:null,onResizeFn:null,onScrollFn:null}),watch:{currentPage(e,t){e!==t&&this.$emit("page",{current:e,previous:t})}},mounted(){this.calcOnInit(),f&&(this.onResizeFn=t(this.calcOnInit,410),this.onScrollFn=t(this.calcOnScroll,100),this.attachMutationObserver(),this.$refs.vsWrapper.addEventListener("scroll",this.onScrollFn),window.addEventListener("resize",this.onResizeFn,!1))},beforeDestroy(){f&&(this.observer.disconnect(),this.$refs.vsWrapper.removeEventListener("scroll",this.onScrollFn),window.removeEventListener("resize",this.onResizeFn,!1))},methods:{calcOnInit(){this.$refs.vsWrapper&&(this.calcWrapperWidth(),this.calcSlidesWidth(),this.calcCurrentPosition(),this.calcCurrentPage(),this.calcBounds(),this.calcMaxPages())},calcOnScroll(){this.$refs.vsWrapper&&(this.calcCurrentPosition(),this.calcCurrentPage(),this.calcBounds())},calcBounds(){const e=h(this.currentPos,0,5),t=h(this.wrapperScrollWidth-this.wrapperVisibleWidth,this.currentPos,5);e?(this.$emit("bound-left",!0),this.boundLeft=!0):this.boundLeft=!1,t?(this.$emit("bound-right",!0),this.boundRight=!0):this.boundRight=!1},calcWrapperWidth(){this.wrapperScrollWidth=this.$refs.vsWrapper.scrollWidth,this.wrapperVisibleWidth=this.$refs.vsWrapper.offsetWidth},calcSlidesWidth(){const e=[...this.$refs.vsWrapper.children];this.slidesWidth=e.map(e=>({offsetLeft:e.offsetLeft,width:e.offsetWidth}))},calcCurrentPage(){const e=this.slidesWidth.findIndex(e=>h(e.offsetLeft,this.currentPos,5));-1!==e&&-2!==e&&(this.currentPage=e||0)},calcCurrentPosition(){this.currentPos=this.$refs.vsWrapper.scrollLeft||0},calcMaxPages(){const e=this.wrapperScrollWidth-this.wrapperVisibleWidth;this.maxPages=this.slidesWidth.findIndex(({offsetLeft:t})=>t>e)-1},calcNextWidth(e){const t=e>0?this.currentPage:this.currentPage+e,s=this.slidesWidth[t].width||0;if(s)return s*e},attachMutationObserver(){this.observer=new MutationObserver(()=>{this.calcOnInit()}),this.observer.observe(this.$refs.vsWrapper,{attributes:!0,childList:!0,characterData:!0,subtree:!0})},changeSlide(e){const t=-1===e&&this.boundLeft,s=1===e&&this.boundRight;if(t||s)return;const r=this.calcNextWidth(e);r&&this.scrollTo(r)},scrollTo(e=0){this.$refs.vsWrapper.scrollBy({left:e,behavior:"smooth"})}}};const b={class:"vs-carousel"};p.render=function(e,t,h,u,f,p){return s(),r("div",b,[(s(),r(i(h.tag),{ref:"vsWrapper",class:"vs-carousel__wrapper"},{default:o(()=>[l(" @slot Slot for Slides "),n(e.$slots,"default")]),_:3},512)),l(" @slot Slot for Arrows "),h.hideArrows?l("v-if",!0):n(e.$slots,"arrows",{key:0,"change-slide":p.changeSlide,"bound-left":e.boundLeft,"bound-right":e.boundRight},()=>[a(c("button",{type:"button","aria-label":h.i18n.slideLeft,disabled:e.boundLeft,class:"\n vs-carousel__arrows\n vs-carousel__arrows--left\n ",onClick:t[1]||(t[1]=e=>p.changeSlide(-1))}," ← ",8,["aria-label","disabled"]),[[d,!h.hideArrowsOnBound||!e.boundLeft]]),a(c("button",{type:"button","aria-label":h.i18n.slideRight,disabled:e.boundRight,class:"\n vs-carousel__arrows\n vs-carousel__arrows--right\n ",onClick:t[2]||(t[2]=e=>p.changeSlide(1))}," → ",8,["aria-label","disabled"]),[[d,!h.hideArrowsOnBound||!e.boundRight]])])])},p.__file="src/components/Carousel/Carousel.vue";var v={props:{tag:{type:String,default:"li"}}};v.render=function(e,t,l,a,c,d){return s(),r(i(l.tag),{ref:"vsSlide",class:"vs-carousel__slide",tabindex:"0"},{default:o(()=>[n(e.$slots,"default")]),_:3},512)},v.__file="src/components/Slide/Slide.vue";var g={install:function(e){e.component("carousel",p),e.component("slide",v)}};export default g;export{p as Carousel,v as Slide}; +import{elementScrollByPolyfill as e}from"seamless-scroll-polyfill/dist/esm/Element.scrollBy";import{ref as l,watch as t,onMounted as a,onBeforeUnmount as o,openBlock as s,createBlock as n,resolveDynamicComponent as r,withCtx as u,createCommentVNode as i,renderSlot as d,withDirectives as v,createVNode as f,vShow as c}from"vue";import h from"lodash/debounce";var p=function(e,l,t){return Math.abs(e-l)<=t},b="undefined"==typeof window,g=!b;b||"scrollBehavior"in document.documentElement.style||e();var m={name:"Carousel",props:{hideArrows:{type:Boolean,default:!1},hideArrowsOnBound:{type:Boolean,default:!1},tag:{type:String,default:"ul"},i18n:{type:Object,default:()=>({slideLeft:"Slide left",slideRight:"Slide right"}),validator:e=>["slideLeft","slideRight"].every((l=>l in e))}},setup(e,{emit:s}){const n=l(null),r=l(!0),u=l(!1),i=l([]),d=l(0),v=l(0),f=l(0),c=l(0),b=l(0),m=l(null),w=l(null);t(f,((e,l)=>{e!==l&&s("page",{current:e,previous:l})}));const S=()=>{const e=p(c.value,0,5),l=p(d.value-v.value,c.value,5);e?(s("bound-left",!0),r.value=!0):r.value=!1,l?(s("bound-right",!0),u.value=!0):u.value=!1},_=()=>{const e=i.value.findIndex((e=>p(e.offsetLeft,c.value,5)));-1!==e&&-2!==e&&(f.value=e||0)},L=()=>{c.value=n.value.scrollLeft||0},y=()=>{n.value&&(d.value=n.value.scrollWidth,v.value=n.value.offsetWidth,(()=>{const e=[...n.value.children];i.value=e.map((e=>({offsetLeft:e.offsetLeft,width:e.offsetWidth})))})(),L(),_(),S(),(()=>{const e=d.value-v.value;b.value=i.value.findIndex((({offsetLeft:l})=>l>e))-1})())},B=()=>{n.value&&(L(),_(),S())};return a((()=>{y(),g&&(w.value=h(B,100),m.value=h(y,410),n.value.addEventListener("scroll",w.value),window.addEventListener("resize",m.value))})),o((()=>{g&&(n.value.removeEventListener("scroll",w.value),window.removeEventListener("resize",m.value))})),{boundLeft:r,boundRight:u,changeSlide:e=>{const l=(e=>{const l=e>0?f.value:f.value+e,t=i.value[l].width||0;if(t)return t*e})(e);l&&n.value.scrollBy({left:l,behavior:"smooth"})},vsWrapper:n}}};const w={class:"vs-carousel"};m.render=function(e,l,t,a,o,h){return s(),n("div",w,[(s(),n(r(e.tag),{ref:"vsWrapper",class:"vs-carousel__wrapper"},{default:u((()=>[i(" @slot Slot for Slides "),d(e.$slots,"default")])),_:3},512)),i(" @slot Slot for Arrows "),e.hideArrows?i("v-if",!0):d(e.$slots,"arrows",{key:0,changeSlide:a.changeSlide,boundLeft:a.boundLeft,boundRight:a.boundRight},(()=>[e.hideArrowsOnBound&&a.boundLeft?i("v-if",!0):(s(),n("button",{key:0,type:"button","aria-label":e.i18n.slideLeft,disabled:a.boundLeft,class:"\n vs-carousel__arrows\n vs-carousel__arrows--left\n ",onClick:l[1]||(l[1]=e=>a.changeSlide(-1))}," ← ",8,["aria-label","disabled"])),v(f("button",{type:"button","aria-label":e.i18n.slideRight,disabled:a.boundRight,class:"\n vs-carousel__arrows\n vs-carousel__arrows--right\n ",onClick:l[2]||(l[2]=e=>a.changeSlide(1))}," → ",8,["aria-label","disabled"]),[[c,!e.hideArrowsOnBound||!a.boundRight]])]))])},m.__file="src/components/Carousel/Carousel.vue";var S={name:"Slide",props:{tag:{type:String,default:"li"}}};S.render=function(e,l,t,a,o,i){return s(),n(r(t.tag),{ref:"vsSlide",class:"vs-carousel__slide",tabindex:"0"},{default:u((()=>[d(e.$slots,"default")])),_:3},512)},S.__file="src/components/Slide/Slide.vue";var _={install:function(e){e.component("Carousel",m),e.component("Slide",S)}};export default _;export{m as Carousel,S as Slide}; diff --git a/dist/vue-snap.js b/dist/vue-snap.js index 07086ac..a99feee 100644 --- a/dist/vue-snap.js +++ b/dist/vue-snap.js @@ -1 +1 @@ -var VueSnap=function(e,t){"use strict";const r=e=>.5*(1-Math.cos(Math.PI*e)),o={_elementScroll:void 0,get elementScroll(){return this._elementScroll||(this._elementScroll=HTMLElement.prototype.scroll||HTMLElement.prototype.scrollTo||function(e,t){this.scrollLeft=e,this.scrollTop=t})},_elementScrollIntoView:void 0,get elementScrollIntoView(){return this._elementScrollIntoView||(this._elementScrollIntoView=HTMLElement.prototype.scrollIntoView)},_windowScroll:void 0,get windowScroll(){return this._windowScroll||(this._windowScroll=window.scroll||window.scrollTo)}},n=()=>{var e,t,r;return null!==(r=null===(t=null===(e=window.performance)||void 0===e?void 0:e.now)||void 0===t?void 0:t.call(e))&&void 0!==r?r:Date.now()},i=e=>{const t=(n()-e.timeStamp)/(e.duration||500);if(t>1)return e.method(e.targetX,e.targetY),void e.callback();const o=(e.timingFunc||r)(t),s=e.startX+(e.targetX-e.startX)*o,l=e.startY+(e.targetY-e.startY)*o;e.method(s,l),e.rafId=requestAnimationFrame(()=>{i(e)})},s=e=>isFinite(e)?Number(e):0,l=e=>{const t=typeof e;return null!==e&&("object"===t||"function"===t)},a=(e,t)=>{const r=s(t.left||0)+e.scrollLeft,l=s(t.top||0)+e.scrollTop;return((e,t)=>{var r,l;const a=o.elementScroll.bind(e);if(void 0===t.left&&void 0===t.top)return;const c=e.scrollLeft,d=e.scrollTop,u=s(null!==(r=t.left)&&void 0!==r?r:c),h=s(null!==(l=t.top)&&void 0!==l?l:d);if("smooth"!==t.behavior)return a(u,h);const f=()=>{window.removeEventListener("wheel",v),window.removeEventListener("touchmove",v)},p={timeStamp:n(),duration:t.duration,startX:c,startY:d,targetX:u,targetY:h,rafId:0,method:a,timingFunc:t.timingFunc,callback:f},v=()=>{cancelAnimationFrame(p.rafId),f()};window.addEventListener("wheel",v,{passive:!0,once:!0}),window.addEventListener("touchmove",v,{passive:!0,once:!0}),i(p)})(e,{...t,left:r,top:l})},c=e=>{var t;"scrollBehavior"in document.documentElement.style||(t=t=>t.scrollBy=function(){if(1===arguments.length){const t=arguments[0];if(!l(t))throw new TypeError("Failed to execute 'scrollBy' on 'Element': parameter 1 ('options') is not an object.");return a(this,{...t,...e})}const t=Number(arguments[0]),r=Number(arguments[1]);return a(this,{left:t,top:r})},[HTMLElement.prototype,SVGElement.prototype,Element.prototype].forEach(e=>t(e)))};var d=function(e,t,r){return Math.abs(e-t)<=r},u="undefined"==typeof window,h=!u;u||"scrollBehavior"in document.documentElement.style||c();var f=function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)},p="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},v="object"==typeof p&&p&&p.Object===Object&&p,m="object"==typeof self&&self&&self.Object===Object&&self,b=v||m||Function("return this")(),w=function(){return b.Date.now()},g=b.Symbol,S=Object.prototype,y=S.hasOwnProperty,W=S.toString,L=g?g.toStringTag:void 0;var _=function(e){var t=y.call(e,L),r=e[L];try{e[L]=void 0;var o=!0}catch(e){}var n=W.call(e);return o&&(t?e[L]=r:delete e[L]),n},O=Object.prototype.toString;var P=function(e){return O.call(e)},T=g?g.toStringTag:void 0;var E=function(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":T&&T in Object(e)?_(e):P(e)};var $=function(e){return null!=e&&"object"==typeof e};var B=function(e){return"symbol"==typeof e||$(e)&&"[object Symbol]"==E(e)},j=/^\s+|\s+$/g,C=/^[-+]0x[0-9a-f]+$/i,x=/^0b[01]+$/i,F=/^0o[0-7]+$/i,I=parseInt;var V=function(e){if("number"==typeof e)return e;if(B(e))return NaN;if(f(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=f(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(j,"");var r=x.test(e);return r||F.test(e)?I(e.slice(2),r?2:8):C.test(e)?NaN:+e},M=Math.max,N=Math.min;var R=function(e,t,r){var o,n,i,s,l,a,c=0,d=!1,u=!1,h=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function p(t){var r=o,i=n;return o=n=void 0,c=t,s=e.apply(i,r)}function v(e){return c=e,l=setTimeout(b,t),d?p(e):s}function m(e){var r=e-a;return void 0===a||r>=t||r<0||u&&e-c>=i}function b(){var e=w();if(m(e))return g(e);l=setTimeout(b,function(e){var r=t-(e-a);return u?N(r,i-(e-c)):r}(e))}function g(e){return l=void 0,h&&o?p(e):(o=n=void 0,s)}function S(){var e=w(),r=m(e);if(o=arguments,n=this,a=e,r){if(void 0===l)return v(a);if(u)return clearTimeout(l),l=setTimeout(b,t),p(a)}return void 0===l&&(l=setTimeout(b,t)),s}return t=V(t)||0,f(r)&&(d=!!r.leading,i=(u="maxWait"in r)?M(V(r.maxWait)||0,t):i,h="trailing"in r?!!r.trailing:h),S.cancel=function(){void 0!==l&&clearTimeout(l),c=0,o=a=n=l=void 0},S.flush=function(){return void 0===l?s:g(w())},S};var k={props:{hideArrows:{type:Boolean,default:!1},hideArrowsOnBound:{type:Boolean,default:!1},tag:{type:String,default:"ul"},i18n:{type:Object,default:()=>({slideLeft:"Slide left",slideRight:"Slide right"}),validator:e=>["slideLeft","slideRight"].every(t=>t in e)}},data:()=>({boundLeft:!0,boundRight:!1,slidesWidth:[],wrapperScrollWidth:0,wrapperVisibleWidth:0,currentPage:0,currentPos:0,maxPages:0,step:1,observer:null,onResizeFn:null,onScrollFn:null}),watch:{currentPage(e,t){e!==t&&this.$emit("page",{current:e,previous:t})}},mounted(){this.calcOnInit(),h&&(this.onResizeFn=R(this.calcOnInit,410),this.onScrollFn=R(this.calcOnScroll,100),this.attachMutationObserver(),this.$refs.vsWrapper.addEventListener("scroll",this.onScrollFn),window.addEventListener("resize",this.onResizeFn,!1))},beforeDestroy(){h&&(this.observer.disconnect(),this.$refs.vsWrapper.removeEventListener("scroll",this.onScrollFn),window.removeEventListener("resize",this.onResizeFn,!1))},methods:{calcOnInit(){this.$refs.vsWrapper&&(this.calcWrapperWidth(),this.calcSlidesWidth(),this.calcCurrentPosition(),this.calcCurrentPage(),this.calcBounds(),this.calcMaxPages())},calcOnScroll(){this.$refs.vsWrapper&&(this.calcCurrentPosition(),this.calcCurrentPage(),this.calcBounds())},calcBounds(){const e=d(this.currentPos,0,5),t=d(this.wrapperScrollWidth-this.wrapperVisibleWidth,this.currentPos,5);e?(this.$emit("bound-left",!0),this.boundLeft=!0):this.boundLeft=!1,t?(this.$emit("bound-right",!0),this.boundRight=!0):this.boundRight=!1},calcWrapperWidth(){this.wrapperScrollWidth=this.$refs.vsWrapper.scrollWidth,this.wrapperVisibleWidth=this.$refs.vsWrapper.offsetWidth},calcSlidesWidth(){const e=[...this.$refs.vsWrapper.children];this.slidesWidth=e.map(e=>({offsetLeft:e.offsetLeft,width:e.offsetWidth}))},calcCurrentPage(){const e=this.slidesWidth.findIndex(e=>d(e.offsetLeft,this.currentPos,5));-1!==e&&-2!==e&&(this.currentPage=e||0)},calcCurrentPosition(){this.currentPos=this.$refs.vsWrapper.scrollLeft||0},calcMaxPages(){const e=this.wrapperScrollWidth-this.wrapperVisibleWidth;this.maxPages=this.slidesWidth.findIndex(({offsetLeft:t})=>t>e)-1},calcNextWidth(e){const t=e>0?this.currentPage:this.currentPage+e,r=this.slidesWidth[t].width||0;if(r)return r*e},attachMutationObserver(){this.observer=new MutationObserver(()=>{this.calcOnInit()}),this.observer.observe(this.$refs.vsWrapper,{attributes:!0,childList:!0,characterData:!0,subtree:!0})},changeSlide(e){const t=-1===e&&this.boundLeft,r=1===e&&this.boundRight;if(t||r)return;const o=this.calcNextWidth(e);o&&this.scrollTo(o)},scrollTo(e=0){this.$refs.vsWrapper.scrollBy({left:e,behavior:"smooth"})}}};const A={class:"vs-carousel"};k.render=function(e,r,o,n,i,s){return t.openBlock(),t.createBlock("div",A,[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(o.tag),{ref:"vsWrapper",class:"vs-carousel__wrapper"},{default:t.withCtx(()=>[t.createCommentVNode(" @slot Slot for Slides "),t.renderSlot(e.$slots,"default")]),_:3},512)),t.createCommentVNode(" @slot Slot for Arrows "),o.hideArrows?t.createCommentVNode("v-if",!0):t.renderSlot(e.$slots,"arrows",{key:0,"change-slide":s.changeSlide,"bound-left":e.boundLeft,"bound-right":e.boundRight},()=>[t.withDirectives(t.createVNode("button",{type:"button","aria-label":o.i18n.slideLeft,disabled:e.boundLeft,class:"\n vs-carousel__arrows\n vs-carousel__arrows--left\n ",onClick:r[1]||(r[1]=e=>s.changeSlide(-1))}," ← ",8,["aria-label","disabled"]),[[t.vShow,!o.hideArrowsOnBound||!e.boundLeft]]),t.withDirectives(t.createVNode("button",{type:"button","aria-label":o.i18n.slideRight,disabled:e.boundRight,class:"\n vs-carousel__arrows\n vs-carousel__arrows--right\n ",onClick:r[2]||(r[2]=e=>s.changeSlide(1))}," → ",8,["aria-label","disabled"]),[[t.vShow,!o.hideArrowsOnBound||!e.boundRight]])])])},k.__file="src/components/Carousel/Carousel.vue";var D={props:{tag:{type:String,default:"li"}}};D.render=function(e,r,o,n,i,s){return t.openBlock(),t.createBlock(t.resolveDynamicComponent(o.tag),{ref:"vsSlide",class:"vs-carousel__slide",tabindex:"0"},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"default")]),_:3},512)},D.__file="src/components/Slide/Slide.vue";var z={install:function(e){e.component("carousel",k),e.component("slide",D)}};return e.Carousel=k,e.Slide=D,e.default=z,Object.defineProperty(e,"__esModule",{value:!0}),e}({},vue); +var VueSnap=function(e,t){"use strict";const o=e=>.5*(1-Math.cos(Math.PI*e)),n={_elementScroll:void 0,get elementScroll(){return this._elementScroll||(this._elementScroll=HTMLElement.prototype.scroll||HTMLElement.prototype.scrollTo||function(e,t){this.scrollLeft=e,this.scrollTop=t})},_elementScrollIntoView:void 0,get elementScrollIntoView(){return this._elementScrollIntoView||(this._elementScrollIntoView=HTMLElement.prototype.scrollIntoView)},_windowScroll:void 0,get windowScroll(){return this._windowScroll||(this._windowScroll=window.scroll||window.scrollTo)}},r=()=>{var e,t,o;return null!==(o=null===(t=null===(e=window.performance)||void 0===e?void 0:e.now)||void 0===t?void 0:t.call(e))&&void 0!==o?o:Date.now()},l=e=>{const t=(r()-e.timeStamp)/(e.duration||500);if(t>1)return e.method(e.targetX,e.targetY),void e.callback();const n=(e.timingFunc||o)(t),i=e.startX+(e.targetX-e.startX)*n,a=e.startY+(e.targetY-e.startY)*n;e.method(i,a),e.rafId=requestAnimationFrame((()=>{l(e)}))},i=e=>isFinite(e)?Number(e):0,a=e=>{const t=typeof e;return null!==e&&("object"===t||"function"===t)},u=(e,t)=>{const o=i(t.left||0)+e.scrollLeft,a=i(t.top||0)+e.scrollTop;return((e,t)=>{var o,a;const u=n.elementScroll.bind(e);if(void 0===t.left&&void 0===t.top)return;const s=e.scrollLeft,c=e.scrollTop,d=i(null!==(o=t.left)&&void 0!==o?o:s),f=i(null!==(a=t.top)&&void 0!==a?a:c);if("smooth"!==t.behavior)return u(d,f);const v=()=>{window.removeEventListener("wheel",m),window.removeEventListener("touchmove",m)},p={timeStamp:r(),duration:t.duration,startX:s,startY:c,targetX:d,targetY:f,rafId:0,method:u,timingFunc:t.timingFunc,callback:v},m=()=>{cancelAnimationFrame(p.rafId),v()};window.addEventListener("wheel",m,{passive:!0,once:!0}),window.addEventListener("touchmove",m,{passive:!0,once:!0}),l(p)})(e,{...t,left:o,top:a})},s=e=>{var t;"scrollBehavior"in document.documentElement.style||(t=t=>t.scrollBy=function(){if(1===arguments.length){const t=arguments[0];if(!a(t))throw new TypeError("Failed to execute 'scrollBy' on 'Element': parameter 1 ('options') is not an object.");return u(this,{...t,...e})}const t=Number(arguments[0]),o=Number(arguments[1]);return u(this,{left:t,top:o})},[HTMLElement.prototype,SVGElement.prototype,Element.prototype].forEach((e=>t(e))))};var c=function(e,t,o){return Math.abs(e-t)<=o},d="undefined"==typeof window,f=!d;d||"scrollBehavior"in document.documentElement.style||s();var v=function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)},p="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},m="object"==typeof p&&p&&p.Object===Object&&p,h="object"==typeof self&&self&&self.Object===Object&&self,w=m||h||Function("return this")(),b=function(){return w.Date.now()},g=w.Symbol,y=Object.prototype,S=y.hasOwnProperty,_=y.toString,L=g?g.toStringTag:void 0;var E=function(e){var t=S.call(e,L),o=e[L];try{e[L]=void 0;var n=!0}catch(e){}var r=_.call(e);return n&&(t?e[L]=o:delete e[L]),r},T=Object.prototype.toString;var B=function(e){return T.call(e)},j=g?g.toStringTag:void 0;var C=function(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":j&&j in Object(e)?E(e):B(e)};var O=function(e){return null!=e&&"object"==typeof e};var k=function(e){return"symbol"==typeof e||O(e)&&"[object Symbol]"==C(e)},N=/^\s+|\s+$/g,I=/^[-+]0x[0-9a-f]+$/i,V=/^0b[01]+$/i,x=/^0o[0-7]+$/i,M=parseInt;var A=function(e){if("number"==typeof e)return e;if(k(e))return NaN;if(v(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=v(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(N,"");var o=V.test(e);return o||x.test(e)?M(e.slice(2),o?2:8):I.test(e)?NaN:+e},F=Math.max,R=Math.min;var W=function(e,t,o){var n,r,l,i,a,u,s=0,c=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function p(t){var o=n,l=r;return n=r=void 0,s=t,i=e.apply(l,o)}function m(e){return s=e,a=setTimeout(w,t),c?p(e):i}function h(e){var o=e-u;return void 0===u||o>=t||o<0||d&&e-s>=l}function w(){var e=b();if(h(e))return g(e);a=setTimeout(w,function(e){var o=t-(e-u);return d?R(o,l-(e-s)):o}(e))}function g(e){return a=void 0,f&&n?p(e):(n=r=void 0,i)}function y(){var e=b(),o=h(e);if(n=arguments,r=this,u=e,o){if(void 0===a)return m(u);if(d)return clearTimeout(a),a=setTimeout(w,t),p(u)}return void 0===a&&(a=setTimeout(w,t)),i}return t=A(t)||0,v(o)&&(c=!!o.leading,l=(d="maxWait"in o)?F(A(o.maxWait)||0,t):l,f="trailing"in o?!!o.trailing:f),y.cancel=function(){void 0!==a&&clearTimeout(a),s=0,n=u=r=a=void 0},y.flush=function(){return void 0===a?i:g(b())},y};var $={name:"Carousel",props:{hideArrows:{type:Boolean,default:!1},hideArrowsOnBound:{type:Boolean,default:!1},tag:{type:String,default:"ul"},i18n:{type:Object,default:()=>({slideLeft:"Slide left",slideRight:"Slide right"}),validator:e=>["slideLeft","slideRight"].every((t=>t in e))}},setup(e,{emit:o}){const n=t.ref(null),r=t.ref(!0),l=t.ref(!1),i=t.ref([]),a=t.ref(0),u=t.ref(0),s=t.ref(0),d=t.ref(0),v=t.ref(0),p=t.ref(null),m=t.ref(null);t.watch(s,((e,t)=>{e!==t&&o("page",{current:e,previous:t})}));const h=()=>{const e=c(d.value,0,5),t=c(a.value-u.value,d.value,5);e?(o("bound-left",!0),r.value=!0):r.value=!1,t?(o("bound-right",!0),l.value=!0):l.value=!1},w=()=>{const e=i.value.findIndex((e=>c(e.offsetLeft,d.value,5)));-1!==e&&-2!==e&&(s.value=e||0)},b=()=>{d.value=n.value.scrollLeft||0},g=()=>{n.value&&(a.value=n.value.scrollWidth,u.value=n.value.offsetWidth,(()=>{const e=[...n.value.children];i.value=e.map((e=>({offsetLeft:e.offsetLeft,width:e.offsetWidth})))})(),b(),w(),h(),(()=>{const e=a.value-u.value;v.value=i.value.findIndex((({offsetLeft:t})=>t>e))-1})())},y=()=>{n.value&&(b(),w(),h())};return t.onMounted((()=>{g(),f&&(m.value=W(y,100),p.value=W(g,410),n.value.addEventListener("scroll",m.value),window.addEventListener("resize",p.value))})),t.onBeforeUnmount((()=>{f&&(n.value.removeEventListener("scroll",m.value),window.removeEventListener("resize",p.value))})),{boundLeft:r,boundRight:l,changeSlide:e=>{const t=(e=>{const t=e>0?s.value:s.value+e,o=i.value[t].width||0;if(o)return o*e})(e);t&&n.value.scrollBy({left:t,behavior:"smooth"})},vsWrapper:n}}};const X={class:"vs-carousel"};$.render=function(e,o,n,r,l,i){return t.openBlock(),t.createBlock("div",X,[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.tag),{ref:"vsWrapper",class:"vs-carousel__wrapper"},{default:t.withCtx((()=>[t.createCommentVNode(" @slot Slot for Slides "),t.renderSlot(e.$slots,"default")])),_:3},512)),t.createCommentVNode(" @slot Slot for Arrows "),e.hideArrows?t.createCommentVNode("v-if",!0):t.renderSlot(e.$slots,"arrows",{key:0,changeSlide:r.changeSlide,boundLeft:r.boundLeft,boundRight:r.boundRight},(()=>[e.hideArrowsOnBound&&r.boundLeft?t.createCommentVNode("v-if",!0):(t.openBlock(),t.createBlock("button",{key:0,type:"button","aria-label":e.i18n.slideLeft,disabled:r.boundLeft,class:"\n vs-carousel__arrows\n vs-carousel__arrows--left\n ",onClick:o[1]||(o[1]=e=>r.changeSlide(-1))}," ← ",8,["aria-label","disabled"])),t.withDirectives(t.createVNode("button",{type:"button","aria-label":e.i18n.slideRight,disabled:r.boundRight,class:"\n vs-carousel__arrows\n vs-carousel__arrows--right\n ",onClick:o[2]||(o[2]=e=>r.changeSlide(1))}," → ",8,["aria-label","disabled"]),[[t.vShow,!e.hideArrowsOnBound||!r.boundRight]])]))])},$.__file="src/components/Carousel/Carousel.vue";var Y={name:"Slide",props:{tag:{type:String,default:"li"}}};Y.render=function(e,o,n,r,l,i){return t.openBlock(),t.createBlock(t.resolveDynamicComponent(n.tag),{ref:"vsSlide",class:"vs-carousel__slide",tabindex:"0"},{default:t.withCtx((()=>[t.renderSlot(e.$slots,"default")])),_:3},512)},Y.__file="src/components/Slide/Slide.vue";var D={install:function(e){e.component("Carousel",$),e.component("Slide",Y)}};return e.Carousel=$,e.Slide=Y,e.default=D,Object.defineProperty(e,"__esModule",{value:!0}),e}({},vue); diff --git a/dist/vue-snap.umd.js b/dist/vue-snap.umd.js index 3b53014..97a5517 100644 --- a/dist/vue-snap.umd.js +++ b/dist/vue-snap.umd.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("seamless-scroll-polyfill/dist/esm/Element.scrollBy"),require("lodash/debounce"),require("vue")):"function"==typeof define&&define.amd?define(["exports","seamless-scroll-polyfill/dist/esm/Element.scrollBy","lodash/debounce","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).VueSnap={},e.Element_scrollBy,e._.debounce,e.vue)}(this,(function(e,t,s,r){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=i(s),l=function(e,t,s){return Math.abs(e-t)<=s},n="undefined"==typeof window,a=!n;n||"scrollBehavior"in document.documentElement.style||t.elementScrollByPolyfill();var c={props:{hideArrows:{type:Boolean,default:!1},hideArrowsOnBound:{type:Boolean,default:!1},tag:{type:String,default:"ul"},i18n:{type:Object,default:()=>({slideLeft:"Slide left",slideRight:"Slide right"}),validator:e=>["slideLeft","slideRight"].every(t=>t in e)}},data:()=>({boundLeft:!0,boundRight:!1,slidesWidth:[],wrapperScrollWidth:0,wrapperVisibleWidth:0,currentPage:0,currentPos:0,maxPages:0,step:1,observer:null,onResizeFn:null,onScrollFn:null}),watch:{currentPage(e,t){e!==t&&this.$emit("page",{current:e,previous:t})}},mounted(){this.calcOnInit(),a&&(this.onResizeFn=o.default(this.calcOnInit,410),this.onScrollFn=o.default(this.calcOnScroll,100),this.attachMutationObserver(),this.$refs.vsWrapper.addEventListener("scroll",this.onScrollFn),window.addEventListener("resize",this.onResizeFn,!1))},beforeDestroy(){a&&(this.observer.disconnect(),this.$refs.vsWrapper.removeEventListener("scroll",this.onScrollFn),window.removeEventListener("resize",this.onResizeFn,!1))},methods:{calcOnInit(){this.$refs.vsWrapper&&(this.calcWrapperWidth(),this.calcSlidesWidth(),this.calcCurrentPosition(),this.calcCurrentPage(),this.calcBounds(),this.calcMaxPages())},calcOnScroll(){this.$refs.vsWrapper&&(this.calcCurrentPosition(),this.calcCurrentPage(),this.calcBounds())},calcBounds(){const e=l(this.currentPos,0,5),t=l(this.wrapperScrollWidth-this.wrapperVisibleWidth,this.currentPos,5);e?(this.$emit("bound-left",!0),this.boundLeft=!0):this.boundLeft=!1,t?(this.$emit("bound-right",!0),this.boundRight=!0):this.boundRight=!1},calcWrapperWidth(){this.wrapperScrollWidth=this.$refs.vsWrapper.scrollWidth,this.wrapperVisibleWidth=this.$refs.vsWrapper.offsetWidth},calcSlidesWidth(){const e=[...this.$refs.vsWrapper.children];this.slidesWidth=e.map(e=>({offsetLeft:e.offsetLeft,width:e.offsetWidth}))},calcCurrentPage(){const e=this.slidesWidth.findIndex(e=>l(e.offsetLeft,this.currentPos,5));-1!==e&&-2!==e&&(this.currentPage=e||0)},calcCurrentPosition(){this.currentPos=this.$refs.vsWrapper.scrollLeft||0},calcMaxPages(){const e=this.wrapperScrollWidth-this.wrapperVisibleWidth;this.maxPages=this.slidesWidth.findIndex(({offsetLeft:t})=>t>e)-1},calcNextWidth(e){const t=e>0?this.currentPage:this.currentPage+e,s=this.slidesWidth[t].width||0;if(s)return s*e},attachMutationObserver(){this.observer=new MutationObserver(()=>{this.calcOnInit()}),this.observer.observe(this.$refs.vsWrapper,{attributes:!0,childList:!0,characterData:!0,subtree:!0})},changeSlide(e){const t=-1===e&&this.boundLeft,s=1===e&&this.boundRight;if(t||s)return;const r=this.calcNextWidth(e);r&&this.scrollTo(r)},scrollTo(e=0){this.$refs.vsWrapper.scrollBy({left:e,behavior:"smooth"})}}};const d={class:"vs-carousel"};c.render=function(e,t,s,i,o,l){return r.openBlock(),r.createBlock("div",d,[(r.openBlock(),r.createBlock(r.resolveDynamicComponent(s.tag),{ref:"vsWrapper",class:"vs-carousel__wrapper"},{default:r.withCtx(()=>[r.createCommentVNode(" @slot Slot for Slides "),r.renderSlot(e.$slots,"default")]),_:3},512)),r.createCommentVNode(" @slot Slot for Arrows "),s.hideArrows?r.createCommentVNode("v-if",!0):r.renderSlot(e.$slots,"arrows",{key:0,"change-slide":l.changeSlide,"bound-left":e.boundLeft,"bound-right":e.boundRight},()=>[r.withDirectives(r.createVNode("button",{type:"button","aria-label":s.i18n.slideLeft,disabled:e.boundLeft,class:"\n vs-carousel__arrows\n vs-carousel__arrows--left\n ",onClick:t[1]||(t[1]=e=>l.changeSlide(-1))}," ← ",8,["aria-label","disabled"]),[[r.vShow,!s.hideArrowsOnBound||!e.boundLeft]]),r.withDirectives(r.createVNode("button",{type:"button","aria-label":s.i18n.slideRight,disabled:e.boundRight,class:"\n vs-carousel__arrows\n vs-carousel__arrows--right\n ",onClick:t[2]||(t[2]=e=>l.changeSlide(1))}," → ",8,["aria-label","disabled"]),[[r.vShow,!s.hideArrowsOnBound||!e.boundRight]])])])},c.__file="src/components/Carousel/Carousel.vue";var h={props:{tag:{type:String,default:"li"}}};h.render=function(e,t,s,i,o,l){return r.openBlock(),r.createBlock(r.resolveDynamicComponent(s.tag),{ref:"vsSlide",class:"vs-carousel__slide",tabindex:"0"},{default:r.withCtx(()=>[r.renderSlot(e.$slots,"default")]),_:3},512)},h.__file="src/components/Slide/Slide.vue";var u={install:function(e){e.component("carousel",c),e.component("slide",h)}};e.Carousel=c,e.Slide=h,e.default=u,Object.defineProperty(e,"__esModule",{value:!0})})); +!function(e,l){"object"==typeof exports&&"undefined"!=typeof module?l(exports,require("seamless-scroll-polyfill/dist/esm/Element.scrollBy"),require("vue"),require("lodash/debounce")):"function"==typeof define&&define.amd?define(["exports","seamless-scroll-polyfill/dist/esm/Element.scrollBy","vue","lodash/debounce"],l):l((e="undefined"!=typeof globalThis?globalThis:e||self).VueSnap={},e.Element_scrollBy,e.vue,e._.debounce)}(this,(function(e,l,t,o){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(o),a=function(e,l,t){return Math.abs(e-l)<=t},s="undefined"==typeof window,u=!s;s||"scrollBehavior"in document.documentElement.style||l.elementScrollByPolyfill();var i={name:"Carousel",props:{hideArrows:{type:Boolean,default:!1},hideArrowsOnBound:{type:Boolean,default:!1},tag:{type:String,default:"ul"},i18n:{type:Object,default:()=>({slideLeft:"Slide left",slideRight:"Slide right"}),validator:e=>["slideLeft","slideRight"].every((l=>l in e))}},setup(e,{emit:l}){const o=t.ref(null),n=t.ref(!0),s=t.ref(!1),i=t.ref([]),d=t.ref(0),f=t.ref(0),c=t.ref(0),v=t.ref(0),p=t.ref(0),h=t.ref(null),m=t.ref(null);t.watch(c,((e,t)=>{e!==t&&l("page",{current:e,previous:t})}));const b=()=>{const e=a(v.value,0,5),t=a(d.value-f.value,v.value,5);e?(l("bound-left",!0),n.value=!0):n.value=!1,t?(l("bound-right",!0),s.value=!0):s.value=!1},y=()=>{const e=i.value.findIndex((e=>a(e.offsetLeft,v.value,5)));-1!==e&&-2!==e&&(c.value=e||0)},g=()=>{v.value=o.value.scrollLeft||0},w=()=>{o.value&&(d.value=o.value.scrollWidth,f.value=o.value.offsetWidth,(()=>{const e=[...o.value.children];i.value=e.map((e=>({offsetLeft:e.offsetLeft,width:e.offsetWidth})))})(),g(),y(),b(),(()=>{const e=d.value-f.value;p.value=i.value.findIndex((({offsetLeft:l})=>l>e))-1})())},S=()=>{o.value&&(g(),y(),b())};return t.onMounted((()=>{w(),u&&(m.value=r.default(S,100),h.value=r.default(w,410),o.value.addEventListener("scroll",m.value),window.addEventListener("resize",h.value))})),t.onBeforeUnmount((()=>{u&&(o.value.removeEventListener("scroll",m.value),window.removeEventListener("resize",h.value))})),{boundLeft:n,boundRight:s,changeSlide:e=>{const l=(e=>{const l=e>0?c.value:c.value+e,t=i.value[l].width||0;if(t)return t*e})(e);l&&o.value.scrollBy({left:l,behavior:"smooth"})},vsWrapper:o}}};const d={class:"vs-carousel"};i.render=function(e,l,o,n,r,a){return t.openBlock(),t.createBlock("div",d,[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.tag),{ref:"vsWrapper",class:"vs-carousel__wrapper"},{default:t.withCtx((()=>[t.createCommentVNode(" @slot Slot for Slides "),t.renderSlot(e.$slots,"default")])),_:3},512)),t.createCommentVNode(" @slot Slot for Arrows "),e.hideArrows?t.createCommentVNode("v-if",!0):t.renderSlot(e.$slots,"arrows",{key:0,changeSlide:n.changeSlide,boundLeft:n.boundLeft,boundRight:n.boundRight},(()=>[e.hideArrowsOnBound&&n.boundLeft?t.createCommentVNode("v-if",!0):(t.openBlock(),t.createBlock("button",{key:0,type:"button","aria-label":e.i18n.slideLeft,disabled:n.boundLeft,class:"\n vs-carousel__arrows\n vs-carousel__arrows--left\n ",onClick:l[1]||(l[1]=e=>n.changeSlide(-1))}," ← ",8,["aria-label","disabled"])),t.withDirectives(t.createVNode("button",{type:"button","aria-label":e.i18n.slideRight,disabled:n.boundRight,class:"\n vs-carousel__arrows\n vs-carousel__arrows--right\n ",onClick:l[2]||(l[2]=e=>n.changeSlide(1))}," → ",8,["aria-label","disabled"]),[[t.vShow,!e.hideArrowsOnBound||!n.boundRight]])]))])},i.__file="src/components/Carousel/Carousel.vue";var f={name:"Slide",props:{tag:{type:String,default:"li"}}};f.render=function(e,l,o,n,r,a){return t.openBlock(),t.createBlock(t.resolveDynamicComponent(o.tag),{ref:"vsSlide",class:"vs-carousel__slide",tabindex:"0"},{default:t.withCtx((()=>[t.renderSlot(e.$slots,"default")])),_:3},512)},f.__file="src/components/Slide/Slide.vue";var c={install:function(e){e.component("Carousel",i),e.component("Slide",f)}};e.Carousel=i,e.Slide=f,e.default=c,Object.defineProperty(e,"__esModule",{value:!0})})); diff --git a/examples/vue@3/vite/package.json b/examples/vue@3/vite/package.json index 252b08d..6638b2d 100644 --- a/examples/vue@3/vite/package.json +++ b/examples/vue@3/vite/package.json @@ -7,10 +7,10 @@ }, "dependencies": { "vue": "^3.0.0", - "vue-snap": "^1.0.0-alpha.3" + "vue-snap": "^1.0.0-alpha.5" }, "devDependencies": { - "@vue/compiler-sfc": "^3.0.0", - "vite": "^0.16.6" + "@vue/compiler-sfc": "^3.0.3", + "vite": "^0.20.10" } } diff --git a/examples/vue@3/vue-cli/package.json b/examples/vue@3/vue-cli/package.json index e544078..7e8fbc9 100644 --- a/examples/vue@3/vue-cli/package.json +++ b/examples/vue@3/vue-cli/package.json @@ -8,18 +8,18 @@ "lint": "vue-cli-service lint" }, "dependencies": { - "core-js": "^3.6.5", + "core-js": "^3.8.0", "vue": "^3.0.0-0", - "vue-snap": "^1.0.0-alpha.3" + "vue-snap": "^1.0.0-alpha.5" }, "devDependencies": { - "@vue/cli-plugin-babel": "~4.5.6", - "@vue/cli-plugin-eslint": "~4.5.6", - "@vue/cli-service": "~4.5.6", - "@vue/compiler-sfc": "^3.0.0", + "@vue/cli-plugin-babel": "~4.5.9", + "@vue/cli-plugin-eslint": "~4.5.9", + "@vue/cli-service": "~4.5.9", + "@vue/compiler-sfc": "^3.0.3", "babel-eslint": "^10.1.0", - "eslint": "^7.9.0", - "eslint-plugin-vue": "^7.0.0-0" + "eslint": "^7.14.0", + "eslint-plugin-vue": "^7.1.0" }, "eslintConfig": { "root": true, diff --git a/package.json b/package.json index 7f0c59f..5a5abb7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-snap", - "version": "0.6.5", + "version": "1.0.0-alpha.6", "description": "Lightweight Carousel based on CSS Scroll Snap", "main": "dist/vue-snap.umd.js", "module": "dist/vue-snap.esm.js", @@ -36,7 +36,7 @@ }, "homepage": "https://github.com/bartdominiak/vue-snap#README", "peerDependencies": { - "vue": "^2.6.12" + "vue": "^3.0.0" }, "dependencies": { "core-js": "^3.8.0", @@ -66,11 +66,11 @@ "rollup": "^2.34.1", "rollup-plugin-analyzer": "^3.3.0", "rollup-plugin-terser": "^7.0.2", - "rollup-plugin-vue": "^6.0.0", + "rollup-plugin-vue": "6.0.0-beta.10", "sass": "^1.30.0", "sass-loader": "^10.1.0", "vue-lazy": "^0.3.0", - "vue-loader": "^15.9.5", + "vue-loader": "^16.0.0", "vue-style-loader": "^4.1.2", "vue-template-compiler": "^2.6.12", "vuepress": "^1.7.1" diff --git a/src/components/Carousel/Carousel.vue b/src/components/Carousel/Carousel.vue index 9c078f8..7abd54a 100644 --- a/src/components/Carousel/Carousel.vue +++ b/src/components/Carousel/Carousel.vue @@ -18,7 +18,7 @@ :bound-right="boundRight" >