vue-horizontal-csp - npm Package Compare versions

Comparing version 0.0.0 to 0.9.1

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}}function i(t,e,n,i,o,l,r,s,a,c){"boolean"!=typeof r&&(a=s,s=r,r=!1);const u="function"==typeof n?n.options:n;let f;if(t&&t.render&&(u.render=t.render,u.staticRenderFns=t.staticRenderFns,u._compiled=!0,o&&(u.functional=!0)),i&&(u._scopeId=i),l?(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,a(t)),t&&t._registeredComponents&&t._registeredComponents.add(l)},u._ssrRegister=f):e&&(f=r?function(t){e.call(this,c(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,s(t))}),f)if(u.functional){const t=u.render;u.render=function(e,n){return f.call(n),t(e,n)}}else{const t=u.beforeCreate;u.beforeCreate=t?[].concat(t,f):[f]}return n}var o=i({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vue-horizontal",staticStyle:{position:"relative",display:"flex"}},[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 navigate 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 navigate 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:[]},void 0,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()},beforeDestroy:function(){clearTimeout(this.debounceId)},methods:{children:function(){return this.$refs.container.children},findPrevSlot:function(t){for(var e=this.children(),n=0;n<e.length;n++){var i=e[n].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.children(),n=0;n<e.length;n++){var i=e[n].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.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.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.children();if(e[t]){var n=this.$refs.container,i=e[t].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;t&&(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,null==t||t(n)}))},calculate:function(){var t=this.$refs.container,e=this.children()[0];return{left:t.scrollLeft,width:t.clientWidth,scrollWidth:t.scrollWidth,hasNext:t.scrollWidth>t.scrollLeft+t.clientWidth+2.5,hasPrev:function(){var n,i;if(0===t.scrollLeft)return!1;var o=t.getBoundingClientRect().left,l=null!==(n=null==e||null===(i=e.getBoundingClientRect())||void 0===i?void 0:i.left)&&void 0!==n?n:0;return Math.abs(o-l)>=2.5}()}}}}),"data-v-45080727",!1,void 0,!1,void 0,void 0,void 0),l=function(t){l.installed||(l.installed=!0,t.component("VueHorizontal",o))},r={install:l},s=null;return"undefined"!=typeof window?s=window.Vue:"undefined"!=typeof global&&(s=global.Vue),s&&s.use(r),o.install=l,t.default=o,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}},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()},beforeDestroy:function(){clearTimeout(this.debounceId)},methods:{children:function(){return this.$refs.container.children},findPrevSlot:function(t){for(var e=this.children(),n=0;n<e.length;n++){var i=e[n].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.children(),n=0;n<e.length;n++){var i=e[n].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.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.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.children();if(e[t]){var n=this.$refs.container,i=e[t].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;t&&(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,null==t||t(n)}))},calculate:function(){var t=this.$refs.container,e=this.children()[0];return{left:t.scrollLeft,width:t.clientWidth,scrollWidth:t.scrollWidth,hasNext:t.scrollWidth>t.scrollLeft+t.clientWidth+2.5,hasPrev:function(){var n,i;if(0===t.scrollLeft)return!1;var o=t.getBoundingClientRect().left,l=null!==(n=null==e||null===(i=e.getBoundingClientRect())||void 0===i?void 0:i.left)&&void 0!==n?n:0;return Math.abs(o-l)>=2.5}()}}}});function o(t,e,n,i,o,l,r,a,s,c){"boolean"!=typeof r&&(s=a,a=r,r=!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,o&&(d.functional=!0)),i&&(d._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,s(t)),t&&t._registeredComponents&&t._registeredComponents.add(l)},d._ssrRegister=h):e&&(h=r?function(t){e.call(this,c(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,a(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 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=s[n]||(s[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===a&&(a=document.head||document.getElementsByTagName("head")[0]),a.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 a;const s={};var c=o({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vue-horizontal",staticStyle:{position:"relative",display:"flex"}},[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 navigate 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 navigate 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-45080727_0",{source:".v-hl-btn[data-v-45080727]{position:absolute;align-self:center;z-index:1;top:0;bottom:0;display:flex;align-items:center;cursor:pointer}.v-hl-btn-prev[data-v-45080727]{left:0}.v-hl-btn-prev.v-hl-btn-between[data-v-45080727]{transform:translateX(-50%)}.v-hl-btn-next[data-v-45080727]{right:0}.v-hl-btn-next.v-hl-btn-between[data-v-45080727]{transform:translateX(50%)}.v-hl-svg[data-v-45080727]{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-45080727]{display:flex;width:100%;margin:0;padding:0;border:none;box-sizing:content-box;overflow-x:scroll;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.v-hl-container>*[data-v-45080727]{flex-shrink:0;box-sizing:border-box;min-height:1px}.v-hl-snap-start>*[data-v-45080727]{scroll-snap-align:start}.v-hl-snap-center>*[data-v-45080727]{scroll-snap-align:center}.v-hl-snap-end>*[data-v-45080727]{scroll-snap-align:end}.v-hl-container[data-v-45080727]: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-45080727]:not(.v-hl-scroll)::-webkit-scrollbar{width:0!important;height:0!important}.v-hl-responsive>*[data-v-45080727]{width:100%;margin-right:24px}.v-hl-responsive[data-v-45080727]>:last-child{margin-right:0}@media (min-width:640px){.v-hl-responsive>*[data-v-45080727]{width:calc((100% - 24px)/ 2)}}@media (min-width:768px){.v-hl-responsive>*[data-v-45080727]{width:calc((100% - 48px)/ 3)}}@media (min-width:1024px){.v-hl-responsive>*[data-v-45080727]{width:calc((100% - 72px)/ 4)}}@media (min-width:1280px){.v-hl-responsive>*[data-v-45080727]{width:calc((100% - 96px)/ 5)}}",map:void 0,media:void 0})}),i,"data-v-45080727",!1,void 0,!1,r,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);

dist/vue-horizontal.ssr.js

@@ -330,2 +330,42 @@ '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);var delta = 2.5;
     return script;
+}function createInjectorSSR(context) {
+    if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+        context = __VUE_SSR_CONTEXT__;
+    }
+    if (!context)
+        return () => { };
+    if (!('styles' in context)) {
+        context._styles = context._styles || {};
+        Object.defineProperty(context, 'styles', {
+            enumerable: true,
+            get: () => context._renderStyles(context._styles)
+        });
+        context._renderStyles = context._renderStyles || renderStyles;
+    }
+    return (id, style) => addStyle(id, style, context);
+}
+function addStyle(id, css, context) {
+    const group =  css.media || 'default' ;
+    const style = context._styles[group] || (context._styles[group] = { ids: [], css: '' });
+    if (!style.ids.includes(id)) {
+        style.media = css.media;
+        style.ids.push(id);
+        let code = css.source;
+        style.css += code + '\n';
+    }
+}
+function renderStyles(styles) {
+    let css = '';
+    for (const key in styles) {
+        const style = styles[key];
+        css +=
+            '<style data-vue-ssr-id="' +
+                Array.from(style.ids).join(' ') +
+                '"' +
+                (style.media ? ' media="' + style.media + '"' : '') +
+                '>' +
+                style.css +
+                '</style>';
+    }
+    return css;
 }/* script */
@@ -384,5 +424,13 @@ var __vue_script__ = script;
 
-var __vue_inject_styles__ = undefined;
+var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
+  if (!inject) return;
+  inject("data-v-45080727_0", {
+    source: ".v-hl-btn[data-v-45080727]{position:absolute;align-self:center;z-index:1;top:0;bottom:0;display:flex;align-items:center;cursor:pointer}.v-hl-btn-prev[data-v-45080727]{left:0}.v-hl-btn-prev.v-hl-btn-between[data-v-45080727]{transform:translateX(-50%)}.v-hl-btn-next[data-v-45080727]{right:0}.v-hl-btn-next.v-hl-btn-between[data-v-45080727]{transform:translateX(50%)}.v-hl-svg[data-v-45080727]{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-45080727]{display:flex;width:100%;margin:0;padding:0;border:none;box-sizing:content-box;overflow-x:scroll;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.v-hl-container>*[data-v-45080727]{flex-shrink:0;box-sizing:border-box;min-height:1px}.v-hl-snap-start>*[data-v-45080727]{scroll-snap-align:start}.v-hl-snap-center>*[data-v-45080727]{scroll-snap-align:center}.v-hl-snap-end>*[data-v-45080727]{scroll-snap-align:end}.v-hl-container[data-v-45080727]: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-45080727]:not(.v-hl-scroll)::-webkit-scrollbar{width:0!important;height:0!important}.v-hl-responsive>*[data-v-45080727]{width:100%;margin-right:24px}.v-hl-responsive[data-v-45080727]>:last-child{margin-right:0}@media (min-width:640px){.v-hl-responsive>*[data-v-45080727]{width:calc((100% - 24px)/ 2)}}@media (min-width:768px){.v-hl-responsive>*[data-v-45080727]{width:calc((100% - 48px)/ 3)}}@media (min-width:1024px){.v-hl-responsive>*[data-v-45080727]{width:calc((100% - 72px)/ 4)}}@media (min-width:1280px){.v-hl-responsive>*[data-v-45080727]{width:calc((100% - 96px)/ 5)}}",
+    map: undefined,
+    media: undefined
+  });
+};
 /* scoped */
 
+
 var __vue_scope_id__ = "data-v-45080727";
@@ -395,6 +443,2 @@ /* module identifier */
 var __vue_is_functional_template__ = false;
-/* style inject */
-
-/* style inject SSR */
-
 /* style inject shadow dom */
@@ -405,3 +449,3 @@
   staticRenderFns: __vue_staticRenderFns__
-}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);// Import vue component
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, createInjectorSSR, undefined);// Import vue component
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -408,0 +452,0 @@

package.json

 {
   "name": "vue-horizontal-csp",
-  "version": "0.0.0",
+  "version": "0.9.1",
   "description": "An ultra simple pure vue horizontal layout for modern responsive web with zero dependencies. With no injected styles.",
@@ -5,0 +5,0 @@ "author": "Fuxing Loh and Mike Nelson",

README.md

@@ -48,3 +48,3 @@ [![chrome](https://github.com/fuxingloh/vue-horizontal/workflows/chrome/badge.svg)](https://github.com/fuxingloh/vue-horizontal/actions?query=workflow%3Achrome+branch%3Amain)
 # migration notes: https://github.com/fuxingloh/vue-horizontal/pull/87
-npm i vue-horizontal@next 
+npm i vue-horizontal@next
 # or
@@ -64,6 +64,7 @@ yarn add vue-horizontal
 import VueHorizontal from "vue-horizontal";
+import VueHorizontal from "vue-horizontal-csp/bundle.css";
 
 export default {
-  components: {VueHorizontal}
-}
+  components: { VueHorizontal }
+};
 </script>
@@ -78,6 +79,7 @@ ```
 ```javascript
-import Vue from 'vue';
+import Vue from "vue";
 import VueHorizontal from "vue-horizontal";
+import VueHorizontal from "vue-horizontal-csp/bundle.css";
 
-Vue.component(VueHorizontal)
+Vue.component(VueHorizontal);
 ```
@@ -111,14 +113,15 @@
 import VueHorizontal from "vue-horizontal";
+import VueHorizontal from "vue-horizontal-csp/bundle.css";
 
 export default {
-  components: {VueHorizontal},
+  components: { VueHorizontal },
   data() {
     return {
       // E.g: creates 20 array items...
-      items: [...Array(20).keys()].map((i) => {
-        return {title: `Item ${i}`, content: `🚀 Content ${i}`};
-      }),
-    }
+      items: [...Array(20).keys()].map(i => {
+        return { title: `Item ${i}`, content: `🚀 Content ${i}` };
+      })
+    };
   }
-}
+};
 </script>
@@ -201,2 +204,3 @@
 ## License
+
 [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Ffuxingloh%2Fvue-horizontal.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Ffuxingloh%2Fvue-horizontal?ref=badge_large)

New alerts

AI-detected possible typosquat

Supply chain risk

AI has identified this package as a potential typosquat of a more popular package. This suggests that the package may be intentionally mimicking another package's name, description, or other metadata.

Found 1 instance in 1 package

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

63768

11.06%

Lines of code

864

7.46%

Number of lines in readme file

202

2.02%

Worsened metrics

Number of low supply chain risk alerts

1

Infinity%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes