vue-horizontal - npm Package Compare versions

Comparing version 0.8.0 to 0.8.1

dist/vue-horizontal.esm.js

@@ -62,3 +62,3 @@ import Vue from 'vue';
 
-      return (_this$$slots = this.$slots) === null || _this$$slots === void 0 ? void 0 : (_this$$slots$default = _this$$slots.default) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.filter(s => s.tag);
+      return ((_this$$slots = this.$slots) === null || _this$$slots === void 0 ? void 0 : (_this$$slots$default = _this$$slots.default) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.filter(s => s.tag)) || [];
     }
@@ -165,3 +165,3 @@
 
-      this.debounceId = setTimeout(this.onScrollDebounce, 500);
+      this.debounceId = setTimeout(this.onScrollDebounce, 100);
     },
@@ -433,4 +433,4 @@
   if (!inject) return;
-  inject("data-v-5e92d2ac_0", {
-    source: ".vue-horizontal[data-v-5e92d2ac]{position:relative;display:flex}.v-hl-btn[data-v-5e92d2ac]{position:absolute;align-self:center;z-index:1;top:0;bottom:0;display:flex;align-items:center}.v-hl-btn[data-v-5e92d2ac]:hover{cursor:pointer}.v-hl-btn-prev[data-v-5e92d2ac]{left:0}.v-hl-btn-prev.v-hl-btn-between[data-v-5e92d2ac]{transform:translateX(-50%)}.v-hl-btn-next[data-v-5e92d2ac]{right:0}.v-hl-btn-next.v-hl-btn-between[data-v-5e92d2ac]{transform:translateX(50%)}.v-hl-svg[data-v-5e92d2ac]{width:40px;height:40px;margin:6px;padding:6px;border-radius:20px;box-sizing:border-box;background:#fff;color:#000;fill:currentColor;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}.v-hl-container[data-v-5e92d2ac]{display:flex;width:100%;margin:0;padding:0;border:none;box-sizing:content-box;overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.v-hl-container>*[data-v-5e92d2ac]{flex-shrink:0;box-sizing:border-box}.v-hl-snap-start>*[data-v-5e92d2ac]{scroll-snap-align:start}.v-hl-snap-center>*[data-v-5e92d2ac]{scroll-snap-align:center}.v-hl-snap-end>*[data-v-5e92d2ac]{scroll-snap-align:end}.v-hl-container[data-v-5e92d2ac]:not(.v-hl-scroll){scrollbar-width:none;-ms-overflow-style:none;padding-bottom:30px;margin-bottom:-30px;clip-path:inset(0 0 30px 0)}.v-hl-container[data-v-5e92d2ac]:not(.v-hl-scroll)::-webkit-scrollbar{width:0!important;height:0!important}.v-hl-responsive>*[data-v-5e92d2ac]{width:100%;margin-right:24px}@media (min-width:640px){.v-hl-responsive>*[data-v-5e92d2ac]{width:calc((100% - (24px))/ 2)}}@media (min-width:768px){.v-hl-responsive>*[data-v-5e92d2ac]{width:calc((100% - (2 * 24px))/ 3)}}@media (min-width:1024px){.v-hl-responsive>*[data-v-5e92d2ac]{width:calc((100% - (3 * 24px))/ 4)}}@media (min-width:1280px){.v-hl-responsive>*[data-v-5e92d2ac]{width:calc((100% - (4 * 24px))/ 5)}}",
+  inject("data-v-51d5efc6_0", {
+    source: ".vue-horizontal[data-v-51d5efc6]{position:relative;display:flex}.v-hl-btn[data-v-51d5efc6]{position:absolute;align-self:center;z-index:1;top:0;bottom:0;display:flex;align-items:center}.v-hl-btn[data-v-51d5efc6]:hover{cursor:pointer}.v-hl-btn-prev[data-v-51d5efc6]{left:0}.v-hl-btn-prev.v-hl-btn-between[data-v-51d5efc6]{transform:translateX(-50%)}.v-hl-btn-next[data-v-51d5efc6]{right:0}.v-hl-btn-next.v-hl-btn-between[data-v-51d5efc6]{transform:translateX(50%)}.v-hl-svg[data-v-51d5efc6]{width:40px;height:40px;margin:6px;padding:6px;border-radius:20px;box-sizing:border-box;background:#fff;color:#000;fill:currentColor;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}.v-hl-container[data-v-51d5efc6]{display:flex;width:100%;margin:0;padding:0;border:none;box-sizing:content-box;overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.v-hl-container>*[data-v-51d5efc6]{flex-shrink:0;box-sizing:border-box}.v-hl-snap-start>*[data-v-51d5efc6]{scroll-snap-align:start}.v-hl-snap-center>*[data-v-51d5efc6]{scroll-snap-align:center}.v-hl-snap-end>*[data-v-51d5efc6]{scroll-snap-align:end}.v-hl-container[data-v-51d5efc6]:not(.v-hl-scroll){scrollbar-width:none;-ms-overflow-style:none;padding-bottom:30px;margin-bottom:-30px;clip-path:inset(0 0 30px 0)}.v-hl-container[data-v-51d5efc6]:not(.v-hl-scroll)::-webkit-scrollbar{width:0!important;height:0!important}.v-hl-responsive>*[data-v-51d5efc6]{width:100%;margin-right:24px}@media (min-width:640px){.v-hl-responsive>*[data-v-51d5efc6]{width:calc((100% - (24px))/ 2)}}@media (min-width:768px){.v-hl-responsive>*[data-v-51d5efc6]{width:calc((100% - (2 * 24px))/ 3)}}@media (min-width:1024px){.v-hl-responsive>*[data-v-51d5efc6]{width:calc((100% - (3 * 24px))/ 4)}}@media (min-width:1280px){.v-hl-responsive>*[data-v-51d5efc6]{width:calc((100% - (4 * 24px))/ 5)}}",
     map: undefined,
@@ -443,3 +443,3 @@ media: undefined
 
-const __vue_scope_id__ = "data-v-5e92d2ac";
+const __vue_scope_id__ = "data-v-51d5efc6";
 /* module identifier */
@@ -446,0 +446,0 @@

dist/vue-horizontal.min.js

@@ -1,1 +0,1 @@
-var VueHorizontal=function(t,e){"use strict";function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var o=n(e).default.extend({name:"VueHorizontal",data:function(){return{left:0,width:0,scrollWidth:0,hasPrev:!1,hasNext:!1,debounceId:void 0}},props:{button:{type:Boolean,default:function(){return!0}},buttonBetween:{type:Boolean,default:function(){return!0}},scroll:{type:Boolean,default:function(){return!1}},responsive:{type:Boolean,default:function(){return!1}},displacement:{type:Number,default:function(){return 1}},snap:{type:String,default:function(){return"start"}}},mounted:function(){this.onScrollDebounce()},computed:{slots:function(){var t,e;return null===(t=this.$slots)||void 0===t||null===(e=t.default)||void 0===e?void 0:e.filter((function(t){return t.tag}))}},methods:{findPrevSlot:function(t){for(var e=this.slots,n=0;n<e.length;n++){var o=e[n].elm.getBoundingClientRect();if(o.left<=t&&t<=o.right)return e[n];if(t<=o.left)return e[n]}},findNextSlot:function(t){for(var e=this.slots,n=0;n<e.length;n++){var o=e[n].elm.getBoundingClientRect();if(!(o.right<=t)){if(o.left<=t)return e[n];if(t<=o.left)return e[n]}}},prev:function(){this.$emit("prev");var t=this.$refs.container,e=t.getBoundingClientRect().left,n=e+t.clientWidth*-this.displacement-2.5,o=this.findPrevSlot(n);if(o){var l=o.elm.getBoundingClientRect().left-e;this.scrollToLeft(t.scrollLeft+l)}else{var i=t.clientWidth*this.displacement;this.scrollToLeft(t.scrollLeft-i)}},next:function(){this.$emit("next");var t=this.$refs.container,e=t.getBoundingClientRect().left,n=e+t.clientWidth*this.displacement+2.5,o=this.findNextSlot(n);if(o){var l=o.elm.getBoundingClientRect().left-e;if(l>2.5)return void this.scrollToLeft(t.scrollLeft+l)}var i=t.clientWidth*this.displacement;this.scrollToLeft(t.scrollLeft+i)},scrollToIndex:function(t){var e=this.slots;if(e[t]){var n=this.$refs.container,o=e[t].elm.getBoundingClientRect().left-n.getBoundingClientRect().left;this.scrollToLeft(n.scrollLeft+o)}},scrollToLeft:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"smooth",n=this.$refs.container;n.scrollTo({left:t,behavior:e})},onScroll:function(){var t=this.$refs.container;this.$emit("scroll",{left:t.scrollLeft}),clearTimeout(this.debounceId),this.debounceId=setTimeout(this.onScrollDebounce,500)},onScrollDebounce:function(){var t=this;this.refresh((function(e){t.$emit("scroll-debounce",e)}))},refresh:function(t){var e=this;this.$nextTick((function(){var n=e.calculate();e.left=n.left,e.width=n.width,e.scrollWidth=n.scrollWidth,e.hasNext=n.hasNext,e.hasPrev=n.hasPrev,t(n)}))},calculate:function(){var t,e=this.$refs.container,n=null===(t=this.slots[0])||void 0===t?void 0:t.elm;return{left:e.scrollLeft,width:e.clientWidth,scrollWidth:e.scrollWidth,hasNext:e.scrollWidth>e.scrollLeft+e.clientWidth+2.5,hasPrev:function(){var t,o;if(0===e.scrollLeft)return!1;var l=e.getBoundingClientRect().left,i=null!==(t=null==n||null===(o=n.getBoundingClientRect())||void 0===o?void 0:o.left)&&void 0!==t?t:0;return Math.abs(l-i)>=2.5}()}}}});function l(t,e,n,o,l,i,a,r,s,c){"boolean"!=typeof a&&(s=r,r=a,a=!1);const d="function"==typeof n?n.options:n;let h;if(t&&t.render&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0,l&&(d.functional=!0)),o&&(d._scopeId=o),i?(h=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,s(t)),t&&t._registeredComponents&&t._registeredComponents.add(i)},d._ssrRegister=h):e&&(h=a?function(t){e.call(this,c(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,r(t))}),h)if(d.functional){const t=d.render;d.render=function(e,n){return h.call(n),t(e,n)}}else{const t=d.beforeCreate;d.beforeCreate=t?[].concat(t,h):[h]}return n}const i="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function a(t){return(t,e)=>function(t,e){const n=i?e.media||"default":t,o=s[n]||(s[n]={ids:new Set,styles:[]});if(!o.ids.has(t)){o.ids.add(t);let n=e.source;if(e.map&&(n+="\n/*# sourceURL="+e.map.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),o.element||(o.element=document.createElement("style"),o.element.type="text/css",e.media&&o.element.setAttribute("media",e.media),void 0===r&&(r=document.head||document.getElementsByTagName("head")[0]),r.appendChild(o.element)),"styleSheet"in o.element)o.styles.push(n),o.element.styleSheet.cssText=o.styles.filter(Boolean).join("\n");else{const t=o.ids.size-1,e=document.createTextNode(n),l=o.element.childNodes;l[t]&&o.element.removeChild(l[t]),l.length?o.element.insertBefore(e,l[t]):o.element.appendChild(e)}}}(t,e)}let r;const s={};var c=l({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vue-horizontal"},[t.button&&t.hasPrev?n("div",{staticClass:"v-hl-btn v-hl-btn-prev",class:{"v-hl-btn-between":t.buttonBetween},attrs:{role:"button"},on:{click:function(e){return e.stopPropagation(),t.prev(e)}}},[t._t("btn-prev",[n("svg",{staticClass:"v-hl-svg",attrs:{viewBox:"0 0 24 24","aria-label":"horizontal scroll area navigation to previous button"}},[n("path",{attrs:{d:"m9.8 12 5 5a1 1 0 1 1-1.4 1.4l-5.7-5.7a1 1 0 0 1 0-1.4l5.7-5.7a1 1 0 0 1 1.4 1.4l-5 5z"}})])])],2):t._e(),t._v(" "),t.button&&t.hasNext?n("div",{staticClass:"v-hl-btn v-hl-btn-next",class:{"v-hl-btn-between":t.buttonBetween},attrs:{role:"button"},on:{click:function(e){return e.stopPropagation(),t.next(e)}}},[t._t("btn-next",[n("svg",{staticClass:"v-hl-svg",attrs:{viewBox:"0 0 24 24","aria-label":"horizontal scroll area navigation to next button"}},[n("path",{attrs:{d:"m14.3 12.1-5-5a1 1 0 0 1 1.4-1.4l5.7 5.7a1 1 0 0 1 0 1.4l-5.7 5.7a1 1 0 0 1-1.4-1.4l5-5z"}})])])],2):t._e(),t._v(" "),n("div",{ref:"container",staticClass:"v-hl-container",class:{"v-hl-responsive":t.responsive,"v-hl-scroll":t.scroll,"v-hl-snap-start":"start"===t.snap,"v-hl-snap-center":"center"===t.snap,"v-hl-snap-end":"end"===t.snap},on:{"&scroll":function(e){return t.onScroll(e)}}},[t._t("default")],2)])},staticRenderFns:[]},(function(t){t&&t("data-v-5e92d2ac_0",{source:".vue-horizontal[data-v-5e92d2ac]{position:relative;display:flex}.v-hl-btn[data-v-5e92d2ac]{position:absolute;align-self:center;z-index:1;top:0;bottom:0;display:flex;align-items:center}.v-hl-btn[data-v-5e92d2ac]:hover{cursor:pointer}.v-hl-btn-prev[data-v-5e92d2ac]{left:0}.v-hl-btn-prev.v-hl-btn-between[data-v-5e92d2ac]{transform:translateX(-50%)}.v-hl-btn-next[data-v-5e92d2ac]{right:0}.v-hl-btn-next.v-hl-btn-between[data-v-5e92d2ac]{transform:translateX(50%)}.v-hl-svg[data-v-5e92d2ac]{width:40px;height:40px;margin:6px;padding:6px;border-radius:20px;box-sizing:border-box;background:#fff;color:#000;fill:currentColor;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}.v-hl-container[data-v-5e92d2ac]{display:flex;width:100%;margin:0;padding:0;border:none;box-sizing:content-box;overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.v-hl-container>*[data-v-5e92d2ac]{flex-shrink:0;box-sizing:border-box}.v-hl-snap-start>*[data-v-5e92d2ac]{scroll-snap-align:start}.v-hl-snap-center>*[data-v-5e92d2ac]{scroll-snap-align:center}.v-hl-snap-end>*[data-v-5e92d2ac]{scroll-snap-align:end}.v-hl-container[data-v-5e92d2ac]:not(.v-hl-scroll){scrollbar-width:none;-ms-overflow-style:none;padding-bottom:30px;margin-bottom:-30px;clip-path:inset(0 0 30px 0)}.v-hl-container[data-v-5e92d2ac]:not(.v-hl-scroll)::-webkit-scrollbar{width:0!important;height:0!important}.v-hl-responsive>*[data-v-5e92d2ac]{width:100%;margin-right:24px}@media (min-width:640px){.v-hl-responsive>*[data-v-5e92d2ac]{width:calc((100% - (24px))/ 2)}}@media (min-width:768px){.v-hl-responsive>*[data-v-5e92d2ac]{width:calc((100% - (2 * 24px))/ 3)}}@media (min-width:1024px){.v-hl-responsive>*[data-v-5e92d2ac]{width:calc((100% - (3 * 24px))/ 4)}}@media (min-width:1280px){.v-hl-responsive>*[data-v-5e92d2ac]{width:calc((100% - (4 * 24px))/ 5)}}",map:void 0,media:void 0})}),o,"data-v-5e92d2ac",!1,void 0,!1,a,void 0,void 0),d=function(t){d.installed||(d.installed=!0,t.component("VueHorizontal",c))},h={install:d},u=null;return"undefined"!=typeof window?u=window.Vue:"undefined"!=typeof global&&(u=global.Vue),u&&u.use(h),c.install=d,t.default=c,Object.defineProperty(t,"__esModule",{value:!0}),t}({},Vue);
+var VueHorizontal=function(t,e){"use strict";function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var o=n(e).default.extend({name:"VueHorizontal",data:function(){return{left:0,width:0,scrollWidth:0,hasPrev:!1,hasNext:!1,debounceId:void 0}},props:{button:{type:Boolean,default:function(){return!0}},buttonBetween:{type:Boolean,default:function(){return!0}},scroll:{type:Boolean,default:function(){return!1}},responsive:{type:Boolean,default:function(){return!1}},displacement:{type:Number,default:function(){return 1}},snap:{type:String,default:function(){return"start"}}},mounted:function(){this.onScrollDebounce()},computed:{slots:function(){var t,e;return(null===(t=this.$slots)||void 0===t||null===(e=t.default)||void 0===e?void 0:e.filter((function(t){return t.tag})))||[]}},methods:{findPrevSlot:function(t){for(var e=this.slots,n=0;n<e.length;n++){var o=e[n].elm.getBoundingClientRect();if(o.left<=t&&t<=o.right)return e[n];if(t<=o.left)return e[n]}},findNextSlot:function(t){for(var e=this.slots,n=0;n<e.length;n++){var o=e[n].elm.getBoundingClientRect();if(!(o.right<=t)){if(o.left<=t)return e[n];if(t<=o.left)return e[n]}}},prev:function(){this.$emit("prev");var t=this.$refs.container,e=t.getBoundingClientRect().left,n=e+t.clientWidth*-this.displacement-2.5,o=this.findPrevSlot(n);if(o){var l=o.elm.getBoundingClientRect().left-e;this.scrollToLeft(t.scrollLeft+l)}else{var i=t.clientWidth*this.displacement;this.scrollToLeft(t.scrollLeft-i)}},next:function(){this.$emit("next");var t=this.$refs.container,e=t.getBoundingClientRect().left,n=e+t.clientWidth*this.displacement+2.5,o=this.findNextSlot(n);if(o){var l=o.elm.getBoundingClientRect().left-e;if(l>2.5)return void this.scrollToLeft(t.scrollLeft+l)}var i=t.clientWidth*this.displacement;this.scrollToLeft(t.scrollLeft+i)},scrollToIndex:function(t){var e=this.slots;if(e[t]){var n=this.$refs.container,o=e[t].elm.getBoundingClientRect().left-n.getBoundingClientRect().left;this.scrollToLeft(n.scrollLeft+o)}},scrollToLeft:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"smooth",n=this.$refs.container;n.scrollTo({left:t,behavior:e})},onScroll:function(){var t=this.$refs.container;this.$emit("scroll",{left:t.scrollLeft}),clearTimeout(this.debounceId),this.debounceId=setTimeout(this.onScrollDebounce,100)},onScrollDebounce:function(){var t=this;this.refresh((function(e){t.$emit("scroll-debounce",e)}))},refresh:function(t){var e=this;this.$nextTick((function(){var n=e.calculate();e.left=n.left,e.width=n.width,e.scrollWidth=n.scrollWidth,e.hasNext=n.hasNext,e.hasPrev=n.hasPrev,t(n)}))},calculate:function(){var t,e=this.$refs.container,n=null===(t=this.slots[0])||void 0===t?void 0:t.elm;return{left:e.scrollLeft,width:e.clientWidth,scrollWidth:e.scrollWidth,hasNext:e.scrollWidth>e.scrollLeft+e.clientWidth+2.5,hasPrev:function(){var t,o;if(0===e.scrollLeft)return!1;var l=e.getBoundingClientRect().left,i=null!==(t=null==n||null===(o=n.getBoundingClientRect())||void 0===o?void 0:o.left)&&void 0!==t?t:0;return Math.abs(l-i)>=2.5}()}}}});function l(t,e,n,o,l,i,r,a,s,c){"boolean"!=typeof r&&(s=a,a=r,r=!1);const d="function"==typeof n?n.options:n;let f;if(t&&t.render&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0,l&&(d.functional=!0)),o&&(d._scopeId=o),i?(f=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,s(t)),t&&t._registeredComponents&&t._registeredComponents.add(i)},d._ssrRegister=f):e&&(f=r?function(t){e.call(this,c(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,a(t))}),f)if(d.functional){const t=d.render;d.render=function(e,n){return f.call(n),t(e,n)}}else{const t=d.beforeCreate;d.beforeCreate=t?[].concat(t,f):[f]}return n}const i="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function r(t){return(t,e)=>function(t,e){const n=i?e.media||"default":t,o=s[n]||(s[n]={ids:new Set,styles:[]});if(!o.ids.has(t)){o.ids.add(t);let n=e.source;if(e.map&&(n+="\n/*# sourceURL="+e.map.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),o.element||(o.element=document.createElement("style"),o.element.type="text/css",e.media&&o.element.setAttribute("media",e.media),void 0===a&&(a=document.head||document.getElementsByTagName("head")[0]),a.appendChild(o.element)),"styleSheet"in o.element)o.styles.push(n),o.element.styleSheet.cssText=o.styles.filter(Boolean).join("\n");else{const t=o.ids.size-1,e=document.createTextNode(n),l=o.element.childNodes;l[t]&&o.element.removeChild(l[t]),l.length?o.element.insertBefore(e,l[t]):o.element.appendChild(e)}}}(t,e)}let a;const s={};var c=l({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vue-horizontal"},[t.button&&t.hasPrev?n("div",{staticClass:"v-hl-btn v-hl-btn-prev",class:{"v-hl-btn-between":t.buttonBetween},attrs:{role:"button"},on:{click:function(e){return e.stopPropagation(),t.prev(e)}}},[t._t("btn-prev",[n("svg",{staticClass:"v-hl-svg",attrs:{viewBox:"0 0 24 24","aria-label":"horizontal scroll area navigation to previous button"}},[n("path",{attrs:{d:"m9.8 12 5 5a1 1 0 1 1-1.4 1.4l-5.7-5.7a1 1 0 0 1 0-1.4l5.7-5.7a1 1 0 0 1 1.4 1.4l-5 5z"}})])])],2):t._e(),t._v(" "),t.button&&t.hasNext?n("div",{staticClass:"v-hl-btn v-hl-btn-next",class:{"v-hl-btn-between":t.buttonBetween},attrs:{role:"button"},on:{click:function(e){return e.stopPropagation(),t.next(e)}}},[t._t("btn-next",[n("svg",{staticClass:"v-hl-svg",attrs:{viewBox:"0 0 24 24","aria-label":"horizontal scroll area navigation to next button"}},[n("path",{attrs:{d:"m14.3 12.1-5-5a1 1 0 0 1 1.4-1.4l5.7 5.7a1 1 0 0 1 0 1.4l-5.7 5.7a1 1 0 0 1-1.4-1.4l5-5z"}})])])],2):t._e(),t._v(" "),n("div",{ref:"container",staticClass:"v-hl-container",class:{"v-hl-responsive":t.responsive,"v-hl-scroll":t.scroll,"v-hl-snap-start":"start"===t.snap,"v-hl-snap-center":"center"===t.snap,"v-hl-snap-end":"end"===t.snap},on:{"&scroll":function(e){return t.onScroll(e)}}},[t._t("default")],2)])},staticRenderFns:[]},(function(t){t&&t("data-v-51d5efc6_0",{source:".vue-horizontal[data-v-51d5efc6]{position:relative;display:flex}.v-hl-btn[data-v-51d5efc6]{position:absolute;align-self:center;z-index:1;top:0;bottom:0;display:flex;align-items:center}.v-hl-btn[data-v-51d5efc6]:hover{cursor:pointer}.v-hl-btn-prev[data-v-51d5efc6]{left:0}.v-hl-btn-prev.v-hl-btn-between[data-v-51d5efc6]{transform:translateX(-50%)}.v-hl-btn-next[data-v-51d5efc6]{right:0}.v-hl-btn-next.v-hl-btn-between[data-v-51d5efc6]{transform:translateX(50%)}.v-hl-svg[data-v-51d5efc6]{width:40px;height:40px;margin:6px;padding:6px;border-radius:20px;box-sizing:border-box;background:#fff;color:#000;fill:currentColor;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}.v-hl-container[data-v-51d5efc6]{display:flex;width:100%;margin:0;padding:0;border:none;box-sizing:content-box;overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.v-hl-container>*[data-v-51d5efc6]{flex-shrink:0;box-sizing:border-box}.v-hl-snap-start>*[data-v-51d5efc6]{scroll-snap-align:start}.v-hl-snap-center>*[data-v-51d5efc6]{scroll-snap-align:center}.v-hl-snap-end>*[data-v-51d5efc6]{scroll-snap-align:end}.v-hl-container[data-v-51d5efc6]:not(.v-hl-scroll){scrollbar-width:none;-ms-overflow-style:none;padding-bottom:30px;margin-bottom:-30px;clip-path:inset(0 0 30px 0)}.v-hl-container[data-v-51d5efc6]:not(.v-hl-scroll)::-webkit-scrollbar{width:0!important;height:0!important}.v-hl-responsive>*[data-v-51d5efc6]{width:100%;margin-right:24px}@media (min-width:640px){.v-hl-responsive>*[data-v-51d5efc6]{width:calc((100% - (24px))/ 2)}}@media (min-width:768px){.v-hl-responsive>*[data-v-51d5efc6]{width:calc((100% - (2 * 24px))/ 3)}}@media (min-width:1024px){.v-hl-responsive>*[data-v-51d5efc6]{width:calc((100% - (3 * 24px))/ 4)}}@media (min-width:1280px){.v-hl-responsive>*[data-v-51d5efc6]{width:calc((100% - (4 * 24px))/ 5)}}",map:void 0,media:void 0})}),o,"data-v-51d5efc6",!1,void 0,!1,r,void 0,void 0),d=function(t){d.installed||(d.installed=!0,t.component("VueHorizontal",c))},f={install:d},h=null;return"undefined"!=typeof window?h=window.Vue:"undefined"!=typeof global&&(h=global.Vue),h&&h.use(f),c.install=d,t.default=c,Object.defineProperty(t,"__esModule",{value:!0}),t}({},Vue);

dist/vue-horizontal.ssr.js

@@ -68,5 +68,5 @@ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var Vue=require('vue');function _interopDefaultLegacy(e){return e&&typeof e==='object'&&'default'in e?e:{'default':e}}var Vue__default=/*#__PURE__*/_interopDefaultLegacy(Vue);// Compatibility delta due to rounding issues
 
-      return (_this$$slots = this.$slots) === null || _this$$slots === void 0 ? void 0 : (_this$$slots$default = _this$$slots.default) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.filter(function (s) {
+      return ((_this$$slots = this.$slots) === null || _this$$slots === void 0 ? void 0 : (_this$$slots$default = _this$$slots.default) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.filter(function (s) {
         return s.tag;
-      });
+      })) || [];
     }
@@ -168,3 +168,3 @@ },
 
-      this.debounceId = setTimeout(this.onScrollDebounce, 500);
+      this.debounceId = setTimeout(this.onScrollDebounce, 100);
     },
@@ -351,3 +351,3 @@ onScrollDebounce: function onScrollDebounce() {
     'v-hl-btn-between': _vm.buttonBetween
-  }) + " data-v-5e92d2ac>", "</div>", [_vm._t("btn-prev", [_c('svg', {
+  }) + " data-v-51d5efc6>", "</div>", [_vm._t("btn-prev", [_c('svg', {
     staticClass: "v-hl-svg",
@@ -364,3 +364,3 @@ attrs: {
     'v-hl-btn-between': _vm.buttonBetween
-  }) + " data-v-5e92d2ac>", "</div>", [_vm._t("btn-next", [_c('svg', {
+  }) + " data-v-51d5efc6>", "</div>", [_vm._t("btn-next", [_c('svg', {
     staticClass: "v-hl-svg",
@@ -381,3 +381,3 @@ attrs: {
     'v-hl-snap-end': _vm.snap === 'end'
-  }) + " data-v-5e92d2ac>", "</div>", [_vm._t("default")], 2)], 2);
+  }) + " data-v-51d5efc6>", "</div>", [_vm._t("default")], 2)], 2);
 };
@@ -390,4 +390,4 @@
   if (!inject) return;
-  inject("data-v-5e92d2ac_0", {
-    source: ".vue-horizontal[data-v-5e92d2ac]{position:relative;display:flex}.v-hl-btn[data-v-5e92d2ac]{position:absolute;align-self:center;z-index:1;top:0;bottom:0;display:flex;align-items:center}.v-hl-btn[data-v-5e92d2ac]:hover{cursor:pointer}.v-hl-btn-prev[data-v-5e92d2ac]{left:0}.v-hl-btn-prev.v-hl-btn-between[data-v-5e92d2ac]{transform:translateX(-50%)}.v-hl-btn-next[data-v-5e92d2ac]{right:0}.v-hl-btn-next.v-hl-btn-between[data-v-5e92d2ac]{transform:translateX(50%)}.v-hl-svg[data-v-5e92d2ac]{width:40px;height:40px;margin:6px;padding:6px;border-radius:20px;box-sizing:border-box;background:#fff;color:#000;fill:currentColor;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}.v-hl-container[data-v-5e92d2ac]{display:flex;width:100%;margin:0;padding:0;border:none;box-sizing:content-box;overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.v-hl-container>*[data-v-5e92d2ac]{flex-shrink:0;box-sizing:border-box}.v-hl-snap-start>*[data-v-5e92d2ac]{scroll-snap-align:start}.v-hl-snap-center>*[data-v-5e92d2ac]{scroll-snap-align:center}.v-hl-snap-end>*[data-v-5e92d2ac]{scroll-snap-align:end}.v-hl-container[data-v-5e92d2ac]:not(.v-hl-scroll){scrollbar-width:none;-ms-overflow-style:none;padding-bottom:30px;margin-bottom:-30px;clip-path:inset(0 0 30px 0)}.v-hl-container[data-v-5e92d2ac]:not(.v-hl-scroll)::-webkit-scrollbar{width:0!important;height:0!important}.v-hl-responsive>*[data-v-5e92d2ac]{width:100%;margin-right:24px}@media (min-width:640px){.v-hl-responsive>*[data-v-5e92d2ac]{width:calc((100% - (24px))/ 2)}}@media (min-width:768px){.v-hl-responsive>*[data-v-5e92d2ac]{width:calc((100% - (2 * 24px))/ 3)}}@media (min-width:1024px){.v-hl-responsive>*[data-v-5e92d2ac]{width:calc((100% - (3 * 24px))/ 4)}}@media (min-width:1280px){.v-hl-responsive>*[data-v-5e92d2ac]{width:calc((100% - (4 * 24px))/ 5)}}",
+  inject("data-v-51d5efc6_0", {
+    source: ".vue-horizontal[data-v-51d5efc6]{position:relative;display:flex}.v-hl-btn[data-v-51d5efc6]{position:absolute;align-self:center;z-index:1;top:0;bottom:0;display:flex;align-items:center}.v-hl-btn[data-v-51d5efc6]:hover{cursor:pointer}.v-hl-btn-prev[data-v-51d5efc6]{left:0}.v-hl-btn-prev.v-hl-btn-between[data-v-51d5efc6]{transform:translateX(-50%)}.v-hl-btn-next[data-v-51d5efc6]{right:0}.v-hl-btn-next.v-hl-btn-between[data-v-51d5efc6]{transform:translateX(50%)}.v-hl-svg[data-v-51d5efc6]{width:40px;height:40px;margin:6px;padding:6px;border-radius:20px;box-sizing:border-box;background:#fff;color:#000;fill:currentColor;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}.v-hl-container[data-v-51d5efc6]{display:flex;width:100%;margin:0;padding:0;border:none;box-sizing:content-box;overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.v-hl-container>*[data-v-51d5efc6]{flex-shrink:0;box-sizing:border-box}.v-hl-snap-start>*[data-v-51d5efc6]{scroll-snap-align:start}.v-hl-snap-center>*[data-v-51d5efc6]{scroll-snap-align:center}.v-hl-snap-end>*[data-v-51d5efc6]{scroll-snap-align:end}.v-hl-container[data-v-51d5efc6]:not(.v-hl-scroll){scrollbar-width:none;-ms-overflow-style:none;padding-bottom:30px;margin-bottom:-30px;clip-path:inset(0 0 30px 0)}.v-hl-container[data-v-51d5efc6]:not(.v-hl-scroll)::-webkit-scrollbar{width:0!important;height:0!important}.v-hl-responsive>*[data-v-51d5efc6]{width:100%;margin-right:24px}@media (min-width:640px){.v-hl-responsive>*[data-v-51d5efc6]{width:calc((100% - (24px))/ 2)}}@media (min-width:768px){.v-hl-responsive>*[data-v-51d5efc6]{width:calc((100% - (2 * 24px))/ 3)}}@media (min-width:1024px){.v-hl-responsive>*[data-v-51d5efc6]{width:calc((100% - (3 * 24px))/ 4)}}@media (min-width:1280px){.v-hl-responsive>*[data-v-51d5efc6]{width:calc((100% - (4 * 24px))/ 5)}}",
     map: undefined,
@@ -400,6 +400,6 @@ media: undefined
 
-var __vue_scope_id__ = "data-v-5e92d2ac";
+var __vue_scope_id__ = "data-v-51d5efc6";
 /* module identifier */
 
-var __vue_module_identifier__ = "data-v-5e92d2ac";
+var __vue_module_identifier__ = "data-v-51d5efc6";
 /* functional template */
@@ -406,0 +406,0 @@

package.json

 {
   "name": "vue-horizontal",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "An ultra simple pure vue horizontal layout for modern responsive web with zero dependencies.",
@@ -5,0 +5,0 @@ "author": "Fuxing Loh",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

61109

increased by0.04%

No dependency changes