vue-horizontal - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

dist/vue-horizontal.esm.js

@@ -11,7 +11,7 @@ import Vue from 'vue';
       left: 0,
-      containerWidth: 0,
+      width: 0,
       scrollWidth: 0,
       hasPrev: false,
       hasNext: false,
-      debounceId: null
+      debounceId: undefined
     };
@@ -55,3 +55,3 @@ },
 
-  methods: {
+  computed: {
     slots() {
@@ -61,6 +61,8 @@ var _this$$slots, _this$$slots$default;
       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);
-    },
+    }
 
+  },
+  methods: {
     findPrevSlot(x) {
-      const slots = this.slots();
+      const slots = this.slots;
 
@@ -81,3 +83,3 @@ for (let i = 0; i < slots.length; i++) {
     findNextSlot(x) {
-      const slots = this.slots();
+      const slots = this.slots;
 
@@ -137,3 +139,3 @@ for (let i = 0; i < slots.length; i++) {
     scrollToIndex(i) {
-      const slots = this.slots();
+      const slots = this.slots;
 
@@ -161,15 +163,30 @@ if (slots[i]) {
       });
+      clearTimeout(this.debounceId); // @ts-ignore
 
-      if (this.debounceId) {
-        clearTimeout(this.debounceId);
-      }
-
-      this.debounceId = window.setTimeout(this.onScrollDebounce, 500);
+      this.debounceId = setTimeout(this.onScrollDebounce, 500);
     },
 
     onScrollDebounce() {
-      var _this$$slots2, _this$$slots2$default, _this$$slots2$default2;
+      this.refresh(data => {
+        this.$emit('scroll-debounce', data);
+      });
+    },
 
+    refresh(callback) {
+      this.$nextTick(() => {
+        const data = this.calculate();
+        this.left = data.left;
+        this.width = data.width;
+        this.scrollWidth = data.scrollWidth;
+        this.hasNext = data.hasNext;
+        this.hasPrev = data.hasPrev;
+        callback(data);
+      });
+    },
+
+    calculate() {
+      var _this$slots$;
+
       const container = this.$refs.container;
-      const slot0 = (_this$$slots2 = this.$slots) === null || _this$$slots2 === void 0 ? void 0 : (_this$$slots2$default = _this$$slots2.default) === null || _this$$slots2$default === void 0 ? void 0 : (_this$$slots2$default2 = _this$$slots2$default.find(s => s.tag)) === null || _this$$slots2$default2 === void 0 ? void 0 : _this$$slots2$default2.elm;
+      const slot0 = (_this$slots$ = this.slots[0]) === null || _this$slots$ === void 0 ? void 0 : _this$slots$.elm;
 
@@ -192,14 +209,9 @@ function hasNext() {
 
-      this.left = container.scrollLeft;
-      this.containerWidth = container.clientWidth;
-      this.scrollWidth = container.scrollWidth;
-      this.hasNext = hasNext();
-      this.hasPrev = hasPrev();
-      this.$emit('scroll-debounce', {
-        left: this.left,
-        containerWidth: this.containerWidth,
-        scrollWidth: this.scrollWidth,
-        hasPrev: this.hasPrev,
-        hasNext: this.hasNext
-      });
+      return {
+        left: container.scrollLeft,
+        width: container.clientWidth,
+        scrollWidth: container.scrollWidth,
+        hasNext: hasNext(),
+        hasPrev: hasPrev()
+      };
     }
@@ -400,4 +412,4 @@
   if (!inject) return;
-  inject("data-v-05174758_0", {
-    source: ".vue-horizontal[data-v-05174758]{position:relative;display:flex}.v-hl-btn[data-v-05174758]{position:absolute;align-self:center;line-height:0;z-index:1}.v-hl-btn[data-v-05174758]:hover{cursor:pointer}.v-hl-btn-prev[data-v-05174758]{left:0;transform:translateX(-50%)}.v-hl-btn-next[data-v-05174758]{right:0;transform:translateX(50%)}svg[data-v-05174758]{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-05174758]{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-05174758]{flex-shrink:0;box-sizing:border-box}.v-hl-snap-start>*[data-v-05174758]{scroll-snap-align:start}.v-hl-snap-center>*[data-v-05174758]{scroll-snap-align:center}.v-hl-snap-end>*[data-v-05174758]{scroll-snap-align:end}.v-hl-container[data-v-05174758]: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-05174758]:not(.v-hl-scroll)::-webkit-scrollbar{width:0!important;height:0!important}.v-hl-responsive>*[data-v-05174758]{width:100%;margin-right:24px}@media (min-width:640px){.v-hl-responsive>*[data-v-05174758]{width:calc((100% - (24px))/ 2)}}@media (min-width:768px){.v-hl-responsive>*[data-v-05174758]{width:calc((100% - (2 * 24px))/ 3)}}@media (min-width:1024px){.v-hl-responsive>*[data-v-05174758]{width:calc((100% - (3 * 24px))/ 4)}}@media (min-width:1280px){.v-hl-responsive>*[data-v-05174758]{width:calc((100% - (4 * 24px))/ 5)}}",
+  inject("data-v-d24b344c_0", {
+    source: ".vue-horizontal[data-v-d24b344c]{position:relative;display:flex}.v-hl-btn[data-v-d24b344c]{position:absolute;align-self:center;line-height:0;z-index:1}.v-hl-btn[data-v-d24b344c]:hover{cursor:pointer}.v-hl-btn-prev[data-v-d24b344c]{left:0;transform:translateX(-50%)}.v-hl-btn-next[data-v-d24b344c]{right:0;transform:translateX(50%)}svg[data-v-d24b344c]{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-d24b344c]{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-d24b344c]{flex-shrink:0;box-sizing:border-box}.v-hl-snap-start>*[data-v-d24b344c]{scroll-snap-align:start}.v-hl-snap-center>*[data-v-d24b344c]{scroll-snap-align:center}.v-hl-snap-end>*[data-v-d24b344c]{scroll-snap-align:end}.v-hl-container[data-v-d24b344c]: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-d24b344c]:not(.v-hl-scroll)::-webkit-scrollbar{width:0!important;height:0!important}.v-hl-responsive>*[data-v-d24b344c]{width:100%;margin-right:24px}@media (min-width:640px){.v-hl-responsive>*[data-v-d24b344c]{width:calc((100% - (24px))/ 2)}}@media (min-width:768px){.v-hl-responsive>*[data-v-d24b344c]{width:calc((100% - (2 * 24px))/ 3)}}@media (min-width:1024px){.v-hl-responsive>*[data-v-d24b344c]{width:calc((100% - (3 * 24px))/ 4)}}@media (min-width:1280px){.v-hl-responsive>*[data-v-d24b344c]{width:calc((100% - (4 * 24px))/ 5)}}",
     map: undefined,
@@ -410,3 +422,3 @@ media: undefined
 
-const __vue_scope_id__ = "data-v-05174758";
+const __vue_scope_id__ = "data-v-d24b344c";
 /* module identifier */
@@ -413,0 +425,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 i=n(e).default.extend({name:"VueHorizontal",data:function(){return{left:0,containerWidth:0,scrollWidth:0,hasPrev:!1,hasNext:!1,debounceId:null}},props:{button:{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()},methods:{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}))},findPrevSlot:function(t){for(var e=this.slots(),n=0;n<e.length;n++){var i=e[n].elm.getBoundingClientRect();if(i.left<=t&&t<=i.right)return e[n];if(t<=i.left)return e[n]}},findNextSlot:function(t){for(var e=this.slots(),n=0;n<e.length;n++){var i=e[n].elm.getBoundingClientRect();if(!(i.right<=t)){if(i.left<=t)return e[n];if(t<=i.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,i=this.findPrevSlot(n);if(i){var o=i.elm.getBoundingClientRect().left-e;this.scrollToLeft(t.scrollLeft+o)}else{var l=t.clientWidth*this.displacement;this.scrollToLeft(t.scrollLeft-l)}},next:function(){this.$emit("next");var t=this.$refs.container,e=t.getBoundingClientRect().left,n=e+t.clientWidth*this.displacement+2.5,i=this.findNextSlot(n);if(i){var o=i.elm.getBoundingClientRect().left-e;if(o>2.5)return void this.scrollToLeft(t.scrollLeft+o)}var l=t.clientWidth*this.displacement;this.scrollToLeft(t.scrollLeft+l)},scrollToIndex:function(t){var e=this.slots();if(e[t]){var n=this.$refs.container,i=e[t].elm.getBoundingClientRect().left-n.getBoundingClientRect().left;this.scrollToLeft(n.scrollLeft+i)}},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}),this.debounceId&&clearTimeout(this.debounceId),this.debounceId=window.setTimeout(this.onScrollDebounce,500)},onScrollDebounce:function(){var t,e,n,i=this.$refs.container,o=null===(t=this.$slots)||void 0===t||null===(e=t.default)||void 0===e||null===(n=e.find((function(t){return t.tag})))||void 0===n?void 0:n.elm;this.left=i.scrollLeft,this.containerWidth=i.clientWidth,this.scrollWidth=i.scrollWidth,this.hasNext=i.scrollWidth>i.scrollLeft+i.clientWidth+2.5,this.hasPrev=function(){var t,e;if(0===i.scrollLeft)return!1;var n=i.getBoundingClientRect().left,l=null!==(t=null==o||null===(e=o.getBoundingClientRect())||void 0===e?void 0:e.left)&&void 0!==t?t:0;return Math.abs(n-l)>=2.5}(),this.$emit("scroll-debounce",{left:this.left,containerWidth:this.containerWidth,scrollWidth:this.scrollWidth,hasPrev:this.hasPrev,hasNext:this.hasNext})}}});function o(t,e,n,i,o,l,s,r,a,d){"boolean"!=typeof s&&(a=r,r=s,s=!1);const c="function"==typeof n?n.options:n;let h;if(t&&t.render&&(c.render=t.render,c.staticRenderFns=t.staticRenderFns,c._compiled=!0,o&&(c.functional=!0)),i&&(c._scopeId=i),l?(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,a(t)),t&&t._registeredComponents&&t._registeredComponents.add(l)},c._ssrRegister=h):e&&(h=s?function(t){e.call(this,d(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,r(t))}),h)if(c.functional){const t=c.render;c.render=function(e,n){return h.call(n),t(e,n)}}else{const t=c.beforeCreate;c.beforeCreate=t?[].concat(t,h):[h]}return n}const l="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function s(t){return(t,e)=>function(t,e){const n=l?e.media||"default":t,i=a[n]||(a[n]={ids:new Set,styles:[]});if(!i.ids.has(t)){i.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))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",e.media&&i.element.setAttribute("media",e.media),void 0===r&&(r=document.head||document.getElementsByTagName("head")[0]),r.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(n),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{const t=i.ids.size-1,e=document.createTextNode(n),o=i.element.childNodes;o[t]&&i.element.removeChild(o[t]),o.length?i.element.insertBefore(e,o[t]):i.element.appendChild(e)}}}(t,e)}let r;const a={};var d=o({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",on:{click:t.prev}},[t._t("btn-prev",[n("svg",{attrs:{viewBox:"0 0 24 24"}},[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",on:{click:t.next}},[t._t("btn-next",[n("svg",{attrs:{viewBox:"0 0 24 24"}},[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-05174758_0",{source:".vue-horizontal[data-v-05174758]{position:relative;display:flex}.v-hl-btn[data-v-05174758]{position:absolute;align-self:center;line-height:0;z-index:1}.v-hl-btn[data-v-05174758]:hover{cursor:pointer}.v-hl-btn-prev[data-v-05174758]{left:0;transform:translateX(-50%)}.v-hl-btn-next[data-v-05174758]{right:0;transform:translateX(50%)}svg[data-v-05174758]{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-05174758]{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-05174758]{flex-shrink:0;box-sizing:border-box}.v-hl-snap-start>*[data-v-05174758]{scroll-snap-align:start}.v-hl-snap-center>*[data-v-05174758]{scroll-snap-align:center}.v-hl-snap-end>*[data-v-05174758]{scroll-snap-align:end}.v-hl-container[data-v-05174758]: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-05174758]:not(.v-hl-scroll)::-webkit-scrollbar{width:0!important;height:0!important}.v-hl-responsive>*[data-v-05174758]{width:100%;margin-right:24px}@media (min-width:640px){.v-hl-responsive>*[data-v-05174758]{width:calc((100% - (24px))/ 2)}}@media (min-width:768px){.v-hl-responsive>*[data-v-05174758]{width:calc((100% - (2 * 24px))/ 3)}}@media (min-width:1024px){.v-hl-responsive>*[data-v-05174758]{width:calc((100% - (3 * 24px))/ 4)}}@media (min-width:1280px){.v-hl-responsive>*[data-v-05174758]{width:calc((100% - (4 * 24px))/ 5)}}",map:void 0,media:void 0})}),i,"data-v-05174758",!1,void 0,!1,s,void 0,void 0),c=function(t){c.installed||(c.installed=!0,t.component("VueHorizontal",d))},h={install:c},f=null;return"undefined"!=typeof window?f=window.Vue:"undefined"!=typeof global&&(f=global.Vue),f&&f.use(h),d.install=c,t.default=d,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 i=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}},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 i=e[n].elm.getBoundingClientRect();if(i.left<=t&&t<=i.right)return e[n];if(t<=i.left)return e[n]}},findNextSlot:function(t){for(var e=this.slots,n=0;n<e.length;n++){var i=e[n].elm.getBoundingClientRect();if(!(i.right<=t)){if(i.left<=t)return e[n];if(t<=i.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,i=this.findPrevSlot(n);if(i){var o=i.elm.getBoundingClientRect().left-e;this.scrollToLeft(t.scrollLeft+o)}else{var l=t.clientWidth*this.displacement;this.scrollToLeft(t.scrollLeft-l)}},next:function(){this.$emit("next");var t=this.$refs.container,e=t.getBoundingClientRect().left,n=e+t.clientWidth*this.displacement+2.5,i=this.findNextSlot(n);if(i){var o=i.elm.getBoundingClientRect().left-e;if(o>2.5)return void this.scrollToLeft(t.scrollLeft+o)}var l=t.clientWidth*this.displacement;this.scrollToLeft(t.scrollLeft+l)},scrollToIndex:function(t){var e=this.slots;if(e[t]){var n=this.$refs.container,i=e[t].elm.getBoundingClientRect().left-n.getBoundingClientRect().left;this.scrollToLeft(n.scrollLeft+i)}},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,i;if(0===e.scrollLeft)return!1;var o=e.getBoundingClientRect().left,l=null!==(t=null==n||null===(i=n.getBoundingClientRect())||void 0===i?void 0:i.left)&&void 0!==t?t:0;return Math.abs(o-l)>=2.5}()}}}});function o(t,e,n,i,o,l,r,s,a,d){"boolean"!=typeof r&&(a=s,s=r,r=!1);const c="function"==typeof n?n.options:n;let h;if(t&&t.render&&(c.render=t.render,c.staticRenderFns=t.staticRenderFns,c._compiled=!0,o&&(c.functional=!0)),i&&(c._scopeId=i),l?(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,a(t)),t&&t._registeredComponents&&t._registeredComponents.add(l)},c._ssrRegister=h):e&&(h=r?function(t){e.call(this,d(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,s(t))}),h)if(c.functional){const t=c.render;c.render=function(e,n){return h.call(n),t(e,n)}}else{const t=c.beforeCreate;c.beforeCreate=t?[].concat(t,h):[h]}return n}const l="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function r(t){return(t,e)=>function(t,e){const n=l?e.media||"default":t,i=a[n]||(a[n]={ids:new Set,styles:[]});if(!i.ids.has(t)){i.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))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",e.media&&i.element.setAttribute("media",e.media),void 0===s&&(s=document.head||document.getElementsByTagName("head")[0]),s.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(n),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{const t=i.ids.size-1,e=document.createTextNode(n),o=i.element.childNodes;o[t]&&i.element.removeChild(o[t]),o.length?i.element.insertBefore(e,o[t]):i.element.appendChild(e)}}}(t,e)}let s;const a={};var d=o({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",on:{click:t.prev}},[t._t("btn-prev",[n("svg",{attrs:{viewBox:"0 0 24 24"}},[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",on:{click:t.next}},[t._t("btn-next",[n("svg",{attrs:{viewBox:"0 0 24 24"}},[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-d24b344c_0",{source:".vue-horizontal[data-v-d24b344c]{position:relative;display:flex}.v-hl-btn[data-v-d24b344c]{position:absolute;align-self:center;line-height:0;z-index:1}.v-hl-btn[data-v-d24b344c]:hover{cursor:pointer}.v-hl-btn-prev[data-v-d24b344c]{left:0;transform:translateX(-50%)}.v-hl-btn-next[data-v-d24b344c]{right:0;transform:translateX(50%)}svg[data-v-d24b344c]{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-d24b344c]{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-d24b344c]{flex-shrink:0;box-sizing:border-box}.v-hl-snap-start>*[data-v-d24b344c]{scroll-snap-align:start}.v-hl-snap-center>*[data-v-d24b344c]{scroll-snap-align:center}.v-hl-snap-end>*[data-v-d24b344c]{scroll-snap-align:end}.v-hl-container[data-v-d24b344c]: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-d24b344c]:not(.v-hl-scroll)::-webkit-scrollbar{width:0!important;height:0!important}.v-hl-responsive>*[data-v-d24b344c]{width:100%;margin-right:24px}@media (min-width:640px){.v-hl-responsive>*[data-v-d24b344c]{width:calc((100% - (24px))/ 2)}}@media (min-width:768px){.v-hl-responsive>*[data-v-d24b344c]{width:calc((100% - (2 * 24px))/ 3)}}@media (min-width:1024px){.v-hl-responsive>*[data-v-d24b344c]{width:calc((100% - (3 * 24px))/ 4)}}@media (min-width:1280px){.v-hl-responsive>*[data-v-d24b344c]{width:calc((100% - (4 * 24px))/ 5)}}",map:void 0,media:void 0})}),i,"data-v-d24b344c",!1,void 0,!1,r,void 0,void 0),c=function(t){c.installed||(c.installed=!0,t.component("VueHorizontal",d))},h={install:c},f=null;return"undefined"!=typeof window?f=window.Vue:"undefined"!=typeof global&&(f=global.Vue),f&&f.use(h),d.install=c,t.default=d,Object.defineProperty(t,"__esModule",{value:!0}),t}({},Vue);

dist/vue-horizontal.ssr.js

@@ -8,7 +8,7 @@ '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
       left: 0,
-      containerWidth: 0,
+      width: 0,
       scrollWidth: 0,
       hasPrev: false,
       hasNext: false,
-      debounceId: null
+      debounceId: undefined
     };
@@ -59,3 +59,3 @@ },
   },
-  methods: {
+  computed: {
     slots: function slots() {
@@ -67,5 +67,7 @@ var _this$$slots, _this$$slots$default;
       });
-    },
+    }
+  },
+  methods: {
     findPrevSlot: function findPrevSlot(x) {
-      var slots = this.slots();
+      var slots = this.slots;
 
@@ -85,3 +87,3 @@ for (var i = 0; i < slots.length; i++) {
     findNextSlot: function findNextSlot(x) {
-      var slots = this.slots();
+      var slots = this.slots;
 
@@ -139,3 +141,3 @@ for (var i = 0; i < slots.length; i++) {
     scrollToIndex: function scrollToIndex(i) {
-      var slots = this.slots();
+      var slots = this.slots;
 
@@ -162,16 +164,32 @@ if (slots[i]) {
       });
+      clearTimeout(this.debounceId); // @ts-ignore
 
-      if (this.debounceId) {
-        clearTimeout(this.debounceId);
-      }
-
-      this.debounceId = window.setTimeout(this.onScrollDebounce, 500);
+      this.debounceId = setTimeout(this.onScrollDebounce, 500);
     },
     onScrollDebounce: function onScrollDebounce() {
-      var _this$$slots2, _this$$slots2$default, _this$$slots2$default2;
+      var _this = this;
 
+      this.refresh(function (data) {
+        _this.$emit('scroll-debounce', data);
+      });
+    },
+    refresh: function refresh(callback) {
+      var _this2 = this;
+
+      this.$nextTick(function () {
+        var data = _this2.calculate();
+
+        _this2.left = data.left;
+        _this2.width = data.width;
+        _this2.scrollWidth = data.scrollWidth;
+        _this2.hasNext = data.hasNext;
+        _this2.hasPrev = data.hasPrev;
+        callback(data);
+      });
+    },
+    calculate: function calculate() {
+      var _this$slots$;
+
       var container = this.$refs.container;
-      var slot0 = (_this$$slots2 = this.$slots) === null || _this$$slots2 === void 0 ? void 0 : (_this$$slots2$default = _this$$slots2.default) === null || _this$$slots2$default === void 0 ? void 0 : (_this$$slots2$default2 = _this$$slots2$default.find(function (s) {
-        return s.tag;
-      })) === null || _this$$slots2$default2 === void 0 ? void 0 : _this$$slots2$default2.elm;
+      var slot0 = (_this$slots$ = this.slots[0]) === null || _this$slots$ === void 0 ? void 0 : _this$slots$.elm;
 
@@ -194,14 +212,9 @@ function hasNext() {
 
-      this.left = container.scrollLeft;
-      this.containerWidth = container.clientWidth;
-      this.scrollWidth = container.scrollWidth;
-      this.hasNext = hasNext();
-      this.hasPrev = hasPrev();
-      this.$emit('scroll-debounce', {
-        left: this.left,
-        containerWidth: this.containerWidth,
-        scrollWidth: this.scrollWidth,
-        hasPrev: this.hasPrev,
-        hasNext: this.hasNext
-      });
+      return {
+        left: container.scrollLeft,
+        width: container.clientWidth,
+        scrollWidth: container.scrollWidth,
+        hasNext: hasNext(),
+        hasPrev: hasPrev()
+      };
     }
@@ -335,3 +348,3 @@ }
     staticClass: "vue-horizontal"
-  }, [_vm.button && _vm.hasPrev ? _vm._ssrNode("<div class=\"v-hl-btn v-hl-btn-prev\" data-v-05174758>", "</div>", [_vm._t("btn-prev", [_c('svg', {
+  }, [_vm.button && _vm.hasPrev ? _vm._ssrNode("<div class=\"v-hl-btn v-hl-btn-prev\" data-v-d24b344c>", "</div>", [_vm._t("btn-prev", [_c('svg', {
     attrs: {
@@ -344,3 +357,3 @@ "viewBox": "0 0 24 24"
     }
-  })])])], 2) : _vm._e(), _vm._ssrNode(" "), _vm.button && _vm.hasNext ? _vm._ssrNode("<div class=\"v-hl-btn v-hl-btn-next\" data-v-05174758>", "</div>", [_vm._t("btn-next", [_c('svg', {
+  })])])], 2) : _vm._e(), _vm._ssrNode(" "), _vm.button && _vm.hasNext ? _vm._ssrNode("<div class=\"v-hl-btn v-hl-btn-next\" data-v-d24b344c>", "</div>", [_vm._t("btn-next", [_c('svg', {
     attrs: {
@@ -359,3 +372,3 @@ "viewBox": "0 0 24 24"
     'v-hl-snap-end': _vm.snap === 'end'
-  }) + " data-v-05174758>", "</div>", [_vm._t("default")], 2)], 2);
+  }) + " data-v-d24b344c>", "</div>", [_vm._t("default")], 2)], 2);
 };
@@ -368,4 +381,4 @@
   if (!inject) return;
-  inject("data-v-05174758_0", {
-    source: ".vue-horizontal[data-v-05174758]{position:relative;display:flex}.v-hl-btn[data-v-05174758]{position:absolute;align-self:center;line-height:0;z-index:1}.v-hl-btn[data-v-05174758]:hover{cursor:pointer}.v-hl-btn-prev[data-v-05174758]{left:0;transform:translateX(-50%)}.v-hl-btn-next[data-v-05174758]{right:0;transform:translateX(50%)}svg[data-v-05174758]{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-05174758]{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-05174758]{flex-shrink:0;box-sizing:border-box}.v-hl-snap-start>*[data-v-05174758]{scroll-snap-align:start}.v-hl-snap-center>*[data-v-05174758]{scroll-snap-align:center}.v-hl-snap-end>*[data-v-05174758]{scroll-snap-align:end}.v-hl-container[data-v-05174758]: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-05174758]:not(.v-hl-scroll)::-webkit-scrollbar{width:0!important;height:0!important}.v-hl-responsive>*[data-v-05174758]{width:100%;margin-right:24px}@media (min-width:640px){.v-hl-responsive>*[data-v-05174758]{width:calc((100% - (24px))/ 2)}}@media (min-width:768px){.v-hl-responsive>*[data-v-05174758]{width:calc((100% - (2 * 24px))/ 3)}}@media (min-width:1024px){.v-hl-responsive>*[data-v-05174758]{width:calc((100% - (3 * 24px))/ 4)}}@media (min-width:1280px){.v-hl-responsive>*[data-v-05174758]{width:calc((100% - (4 * 24px))/ 5)}}",
+  inject("data-v-d24b344c_0", {
+    source: ".vue-horizontal[data-v-d24b344c]{position:relative;display:flex}.v-hl-btn[data-v-d24b344c]{position:absolute;align-self:center;line-height:0;z-index:1}.v-hl-btn[data-v-d24b344c]:hover{cursor:pointer}.v-hl-btn-prev[data-v-d24b344c]{left:0;transform:translateX(-50%)}.v-hl-btn-next[data-v-d24b344c]{right:0;transform:translateX(50%)}svg[data-v-d24b344c]{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-d24b344c]{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-d24b344c]{flex-shrink:0;box-sizing:border-box}.v-hl-snap-start>*[data-v-d24b344c]{scroll-snap-align:start}.v-hl-snap-center>*[data-v-d24b344c]{scroll-snap-align:center}.v-hl-snap-end>*[data-v-d24b344c]{scroll-snap-align:end}.v-hl-container[data-v-d24b344c]: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-d24b344c]:not(.v-hl-scroll)::-webkit-scrollbar{width:0!important;height:0!important}.v-hl-responsive>*[data-v-d24b344c]{width:100%;margin-right:24px}@media (min-width:640px){.v-hl-responsive>*[data-v-d24b344c]{width:calc((100% - (24px))/ 2)}}@media (min-width:768px){.v-hl-responsive>*[data-v-d24b344c]{width:calc((100% - (2 * 24px))/ 3)}}@media (min-width:1024px){.v-hl-responsive>*[data-v-d24b344c]{width:calc((100% - (3 * 24px))/ 4)}}@media (min-width:1280px){.v-hl-responsive>*[data-v-d24b344c]{width:calc((100% - (4 * 24px))/ 5)}}",
     map: undefined,
@@ -378,6 +391,6 @@ media: undefined
 
-var __vue_scope_id__ = "data-v-05174758";
+var __vue_scope_id__ = "data-v-d24b344c";
 /* module identifier */
 
-var __vue_module_identifier__ = "data-v-05174758";
+var __vue_module_identifier__ = "data-v-d24b344c";
 /* functional template */
@@ -384,0 +397,0 @@

package.json

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

README.md

@@ -5,13 +5,12 @@ [![Vue Horizontal](./docs/vue-horizontal.svg)](https://vue-horizontal.fuxing.dev)
 
-![chrome](https://github.com/fuxingloh/vue-horizontal/workflows/chrome/badge.svg)
-![firefox](https://github.com/fuxingloh/vue-horizontal/workflows/firefox/badge.svg)
-![edge](https://github.com/fuxingloh/vue-horizontal/workflows/edge/badge.svg)
-![CI](https://github.com/fuxingloh/vue-horizontal/workflows/CI/badge.svg)
+[![chrome](https://github.com/fuxingloh/vue-horizontal/workflows/chrome/badge.svg)](https://github.com/fuxingloh/vue-horizontal/actions?query=workflow%3Achrome+branch%3Amain)
+[![firefox](https://github.com/fuxingloh/vue-horizontal/workflows/firefox/badge.svg)](https://github.com/fuxingloh/vue-horizontal/actions?query=workflow%3Afirefox+branch%3Amain)
+[![edge](https://github.com/fuxingloh/vue-horizontal/workflows/edge/badge.svg)](https://github.com/fuxingloh/vue-horizontal/actions?query=workflow%3Aedge+branch%3Amain)
+[![SSR](https://github.com/fuxingloh/vue-horizontal/workflows/SSR/badge.svg)](https://github.com/fuxingloh/vue-horizontal/actions?query=workflow%3ASSR+branch%3Amain)
+[![SSG](https://github.com/fuxingloh/vue-horizontal/workflows/SSG/badge.svg)](https://github.com/fuxingloh/vue-horizontal/actions?query=workflow%3ASSG+branch%3Amain)
 [![License MIT](https://img.shields.io/github/license/fuxingloh/vue-horizontal)](https://github.com/fuxingloh/vue-horizontal/blob/main/LICENSE)
 
-#### **⚠️ This library is still a work in progress, please be careful.**
-
 At its core, [Vue Horizontal](https://vue-horizontal.fuxing.dev) is an ultra simple pure vue horizontal layout for 
 modern responsive web with zero dependencies.
-This is also an ultra complex code snippet dossier with over 100 SPA/SSR/SSG friendly recipes for your design needs.
+Vue Horizontal is also an ultra complex code snippet dossier with over 100 SPA/SSR/SSG friendly recipes for your design needs.
 
@@ -26,9 +25,9 @@ [**DOCUMENTATION**](https://vue-horizontal.fuxing.dev)
 - Mobile first for the responsive web
-- Customizable navigation: scroll bar, buttons or programmatic
-- Content snapping, to snap to the nearest item after scrolling
-- Small size of 3 KB
-- Highly extensible for any use case with [well documented recipes](https://vue-horizontal.fuxing.dev/design/taxonomy).
-  - You control how to structure content with HTML
+- Customizable navigation: scroll bar, buttons or basically everything
+- UX focused, smooth scrolling, snapping for variety of use case.
+- Small size of 3 KB for CDN users
+- Highly extensible for any use case with [well documented recipes](https://vue-horizontal.fuxing.dev/design/principles).
+  - You control how to structure your content with HTML
   - You control how it looks with CSS
-  - You control how to navigate it with Vue.js
+  - You control how to navigate your layout with Vue.js
 
@@ -74,2 +73,12 @@ ## Installation
 
+<details>
+<summary><b>Import Script</b></summary>
+
+```html
+<!-- For latest release: https://github.com/fuxingloh/vue-horizontal/releases -->
+<script src="https://unpkg.com/vue-horizontal@0.6.0"></script>
+```
+
+</details>
+
 ### Using Vue Horizontal
@@ -114,6 +123,7 @@
 - [All features demo](https://vue-horizontal.fuxing.dev/features)
-- [Design: Taxonomy](https://vue-horizontal.fuxing.dev/design/taxonomy)
+- [Design: Principles](https://vue-horizontal.fuxing.dev/design/principles)
 - [Design: Responsive](https://vue-horizontal.fuxing.dev/design/responsive)
 - [Design: Navigation](https://vue-horizontal.fuxing.dev/design/navigation)
 - [Design: Scrollbar](https://vue-horizontal.fuxing.dev/design/scrollbar)
+- [Recipes](https://vue-horizontal.fuxing.dev/recipes/cards)
 
@@ -128,6 +138,6 @@ ## Known Limitations
 
-As of December 2020, there is only a 76% cross browser compatibility. Meantime you should polyfill this feature with
-more
-[information here](https://vue-horizontal.fuxing.dev/limitations#smoothscroll-polyfill). Polyfill should be done by the
-user, there are no plans to incorporate this natively in the library.
+As of December 2020, there is only a 76% cross browser compatibility (88% if you include Safari experimental feature flag).
+Meantime you should polyfill this feature with more
+[information provided here](https://vue-horizontal.fuxing.dev/limitations#smoothscroll-polyfill). 
+Polyfill should be done by the user, there are no plans to incorporate this natively in the library.
 
@@ -138,9 +148,7 @@ ### [CSS Scroll Snap](https://vue-horizontal.fuxing.dev/limitations#css-scroll-snap)
 of carousels by setting defined snap positions. Vue Horizontal has it enabled by default, to disable you can set 
-`<vue-horizontal :snap="false">`. As of December 2020, there is a **94%+** cross browser compatibility.
+`<vue-horizontal snap="none">`. 
 
-### [Hiding scrollbar](https://vue-horizontal.fuxing.dev/limitations#hiding-scrollbar)
+As of December 2020, there is a **94%+** cross browser compatibility. 
+You can choose to polyfill this, but it's more of an aesthetic feature rather than a breaking functional requirement. 
 
-In Vue Horizontal, the x-axis scrollbar is hidden by default. Although there isn't a shared specification, most browser
-has it implemented one way or another. As of December 2020, there is a **99%** cross browser compatibility.
-
 ## Development
@@ -172,3 +180,2 @@
 - [kenwheeler/slick](https://github.com/kenwheeler/slick)
-- Airbnb.com
 
@@ -175,0 +182,0 @@ Originally, this project started out as another project

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

58565

increased by1.21%

Lines of code

797

increased by2.71%

Number of lines in readme file

182

increased by4%

No dependency changes