@aotearoan/neon 22.3.0 → 22.4.0

package/dist/components/layout/swiper/NeonSwiper.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const l=require("vue"),i=l.defineComponent({name:"NeonSwiper",props:{fade:{type:Boolean,default:!0}},setup(){const e=l.ref(null),t=l.ref(!1),n=l.ref(!1),a=l.ref(!1),r=()=>{e.value?(n.value=e.value.scrollLeft<=0,a.value=e.value.scrollLeft+e.value.clientWidth>e.value.scrollWidth-1):(n.value=!1,a.value=!1)},o=()=>{e.value?t.value=e.value.scrollWidth>e.value.clientWidth:t.value=!1,r()};return l.onMounted(()=>{var s;window.addEventListener("resize",o,{passive:!0}),(s=e.value)==null||s.addEventListener("scroll",r,{passive:!0}),o()}),l.onUnmounted(()=>{var s;window.removeEventListener("resize",o),(s=e.value)==null||s.removeEventListener("scroll",r)}),{isOverflowing:t,isScrollStart:n,isScrollEnd:a,scrollable:e}}});module.exports=i;
+"use strict";const l=require("vue"),s=require("../../../common/enums/NeonOrientation.cjs.js"),v=l.defineComponent({name:"NeonSwiper",props:{fade:{type:Boolean,default:!0},orientation:{type:String,default:s.NeonOrientation.Horizontal},hideFadeStart:{type:Boolean,default:!1},hideFadeEnd:{type:Boolean,default:!1}},setup(u){const e=l.ref(null),n=l.ref(!1),a=l.ref(!1),o=l.ref(!1),i=()=>{e.value?u.orientation===s.NeonOrientation.Horizontal?(a.value=e.value.scrollLeft<=0,o.value=e.value.scrollLeft+e.value.clientWidth>e.value.scrollWidth-1):(a.value=e.value.scrollTop<=0,o.value=e.value.scrollTop+e.value.clientHeight>e.value.scrollHeight-1):(a.value=!1,o.value=!1)},r=()=>{e.value?u.orientation===s.NeonOrientation.Horizontal?n.value=e.value.scrollWidth>e.value.clientWidth:n.value=e.value.scrollHeight>e.value.clientHeight:n.value=!1,i()};return l.onMounted(()=>{var t;window.addEventListener("resize",r,{passive:!0}),(t=e.value)==null||t.addEventListener("scroll",i,{passive:!0}),r()}),l.onUnmounted(()=>{var t;window.removeEventListener("resize",r),(t=e.value)==null||t.removeEventListener("scroll",i)}),{isOverflowing:n,isScrollStart:a,isScrollEnd:o,scrollable:e}}});module.exports=v;
 //# sourceMappingURL=NeonSwiper.cjs.js.map

package/dist/components/layout/swiper/NeonSwiper.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonSwiper.cjs.js","sources":["../../../../src/components/layout/swiper/NeonSwiper.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref } from 'vue';\n\n/**\n * Automatically handle horizontally overflowing content by placing it in a NeonSwiper component allowing for smooth\n * horizontal scrolling with all input devices.\n */\nexport default defineComponent({\n  name: 'NeonSwiper',\n  props: {\n    /**\n     * Display fade in / fade out styling when there is an overflow.\n     */\n    fade: { type: Boolean, default: true },\n  },\n  setup() {\n    const scrollable = ref<HTMLElement | null>(null);\n    const isOverflowing = ref<boolean>(false);\n    const isScrollStart = ref<boolean>(false);\n    const isScrollEnd = ref<boolean>(false);\n\n    const handleScroll = () => {\n      if (scrollable.value) {\n        isScrollStart.value = scrollable.value.scrollLeft <= 0;\n        isScrollEnd.value =\n          scrollable.value.scrollLeft + scrollable.value.clientWidth > scrollable.value.scrollWidth - 1;\n      } else {\n        isScrollStart.value = false;\n        isScrollEnd.value = false;\n      }\n    };\n\n    const handleResize = () => {\n      if (scrollable.value) {\n        isOverflowing.value = scrollable.value.scrollWidth > scrollable.value.clientWidth;\n      } else {\n        isOverflowing.value = false;\n      }\n\n      handleScroll();\n    };\n\n    onMounted(() => {\n      window.addEventListener('resize', handleResize, { passive: true });\n      scrollable.value?.addEventListener('scroll', handleScroll, { passive: true });\n      handleResize();\n    });\n\n    onUnmounted(() => {\n      window.removeEventListener('resize', handleResize);\n      scrollable.value?.removeEventListener('scroll', handleScroll);\n    });\n\n    return {\n      isOverflowing,\n      isScrollStart,\n      isScrollEnd,\n      scrollable,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","scrollable","ref","isOverflowing","isScrollStart","isScrollEnd","handleScroll","handleResize","onMounted","_a","onUnmounted"],"mappings":"oCAMAA,EAAeC,kBAAgB,CAC7B,KAAM,aACN,MAAO,CAIL,KAAM,CAAE,KAAM,QAAS,QAAS,EAAA,CAAK,EAEvC,OAAQ,CACN,MAAMC,EAAaC,EAAAA,IAAwB,IAAI,EACzCC,EAAgBD,EAAAA,IAAa,EAAK,EAClCE,EAAgBF,EAAAA,IAAa,EAAK,EAClCG,EAAcH,EAAAA,IAAa,EAAK,EAEhCI,EAAe,IAAM,CACrBL,EAAW,OACbG,EAAc,MAAQH,EAAW,MAAM,YAAc,EACrDI,EAAY,MACVJ,EAAW,MAAM,WAAaA,EAAW,MAAM,YAAcA,EAAW,MAAM,YAAc,IAE9FG,EAAc,MAAQ,GACtBC,EAAY,MAAQ,GAExB,EAEME,EAAe,IAAM,CACrBN,EAAW,MACbE,EAAc,MAAQF,EAAW,MAAM,YAAcA,EAAW,MAAM,YAEtEE,EAAc,MAAQ,GAGxBG,EAAA,CACF,EAEAE,OAAAA,EAAAA,UAAU,IAAM,OACd,OAAO,iBAAiB,SAAUD,EAAc,CAAE,QAAS,GAAM,GACjEE,EAAAR,EAAW,QAAX,MAAAQ,EAAkB,iBAAiB,SAAUH,EAAc,CAAE,QAAS,KACtEC,EAAA,CACF,CAAC,EAEDG,EAAAA,YAAY,IAAM,OAChB,OAAO,oBAAoB,SAAUH,CAAY,GACjDE,EAAAR,EAAW,QAAX,MAAAQ,EAAkB,oBAAoB,SAAUH,EAClD,CAAC,EAEM,CACL,cAAAH,EACA,cAAAC,EACA,YAAAC,EACA,WAAAJ,CAAA,CAEJ,CACF,CAAC"}
+{"version":3,"file":"NeonSwiper.cjs.js","sources":["../../../../src/components/layout/swiper/NeonSwiper.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref } from 'vue';\nimport { NeonOrientation } from '@/common/enums/NeonOrientation';\n\n/**\n * Automatically handle horizontally overflowing content by placing it in a NeonSwiper component allowing for smooth\n * horizontal scrolling with all input devices.\n */\nexport default defineComponent({\n  name: 'NeonSwiper',\n  props: {\n    /**\n     * Display fade in / fade out styling when there is an overflow.\n     */\n    fade: { type: Boolean, default: true },\n    /**\n     * Swiper orientation, i.e. whether to manage overflow horizontally or vertically.\n     */\n    orientation: { type: String as () => NeonOrientation, default: NeonOrientation.Horizontal },\n    /**\n     * Hide the starting fade (left or top depending on the orientation).\n     */\n    hideFadeStart: { type: Boolean, default: false },\n    /**\n     * Hide the ending fade (right or bottom depending on the orientation).\n     */\n    hideFadeEnd: { type: Boolean, default: false },\n  },\n  setup(props) {\n    const scrollable = ref<HTMLElement | null>(null);\n    const isOverflowing = ref<boolean>(false);\n    const isScrollStart = ref<boolean>(false);\n    const isScrollEnd = ref<boolean>(false);\n\n    const handleScroll = () => {\n      if (scrollable.value) {\n        if (props.orientation === NeonOrientation.Horizontal) {\n          isScrollStart.value = scrollable.value.scrollLeft <= 0;\n          isScrollEnd.value =\n            scrollable.value.scrollLeft + scrollable.value.clientWidth > scrollable.value.scrollWidth - 1;\n        } else {\n          isScrollStart.value = scrollable.value.scrollTop <= 0;\n          isScrollEnd.value =\n            scrollable.value.scrollTop + scrollable.value.clientHeight > scrollable.value.scrollHeight - 1;\n        }\n      } else {\n        isScrollStart.value = false;\n        isScrollEnd.value = false;\n      }\n    };\n\n    const handleResize = () => {\n      if (scrollable.value) {\n        if (props.orientation === NeonOrientation.Horizontal) {\n          isOverflowing.value = scrollable.value.scrollWidth > scrollable.value.clientWidth;\n        } else {\n          isOverflowing.value = scrollable.value.scrollHeight > scrollable.value.clientHeight;\n        }\n      } else {\n        isOverflowing.value = false;\n      }\n\n      handleScroll();\n    };\n\n    onMounted(() => {\n      window.addEventListener('resize', handleResize, { passive: true });\n      scrollable.value?.addEventListener('scroll', handleScroll, { passive: true });\n      handleResize();\n    });\n\n    onUnmounted(() => {\n      window.removeEventListener('resize', handleResize);\n      scrollable.value?.removeEventListener('scroll', handleScroll);\n    });\n\n    return {\n      isOverflowing,\n      isScrollStart,\n      isScrollEnd,\n      scrollable,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonOrientation","props","scrollable","ref","isOverflowing","isScrollStart","isScrollEnd","handleScroll","handleResize","onMounted","_a","onUnmounted"],"mappings":"8FAOAA,EAAeC,kBAAgB,CAC7B,KAAM,aACN,MAAO,CAIL,KAAM,CAAE,KAAM,QAAS,QAAS,EAAA,EAIhC,YAAa,CAAE,KAAM,OAAiC,QAASC,EAAAA,gBAAgB,UAAA,EAI/E,cAAe,CAAE,KAAM,QAAS,QAAS,EAAA,EAIzC,YAAa,CAAE,KAAM,QAAS,QAAS,EAAA,CAAM,EAE/C,MAAMC,EAAO,CACX,MAAMC,EAAaC,EAAAA,IAAwB,IAAI,EACzCC,EAAgBD,EAAAA,IAAa,EAAK,EAClCE,EAAgBF,EAAAA,IAAa,EAAK,EAClCG,EAAcH,EAAAA,IAAa,EAAK,EAEhCI,EAAe,IAAM,CACrBL,EAAW,MACTD,EAAM,cAAgBD,EAAAA,gBAAgB,YACxCK,EAAc,MAAQH,EAAW,MAAM,YAAc,EACrDI,EAAY,MACVJ,EAAW,MAAM,WAAaA,EAAW,MAAM,YAAcA,EAAW,MAAM,YAAc,IAE9FG,EAAc,MAAQH,EAAW,MAAM,WAAa,EACpDI,EAAY,MACVJ,EAAW,MAAM,UAAYA,EAAW,MAAM,aAAeA,EAAW,MAAM,aAAe,IAGjGG,EAAc,MAAQ,GACtBC,EAAY,MAAQ,GAExB,EAEME,EAAe,IAAM,CACrBN,EAAW,MACTD,EAAM,cAAgBD,EAAAA,gBAAgB,WACxCI,EAAc,MAAQF,EAAW,MAAM,YAAcA,EAAW,MAAM,YAEtEE,EAAc,MAAQF,EAAW,MAAM,aAAeA,EAAW,MAAM,aAGzEE,EAAc,MAAQ,GAGxBG,EAAA,CACF,EAEAE,OAAAA,EAAAA,UAAU,IAAM,OACd,OAAO,iBAAiB,SAAUD,EAAc,CAAE,QAAS,GAAM,GACjEE,EAAAR,EAAW,QAAX,MAAAQ,EAAkB,iBAAiB,SAAUH,EAAc,CAAE,QAAS,KACtEC,EAAA,CACF,CAAC,EAEDG,EAAAA,YAAY,IAAM,OAChB,OAAO,oBAAoB,SAAUH,CAAY,GACjDE,EAAAR,EAAW,QAAX,MAAAQ,EAAkB,oBAAoB,SAAUH,EAClD,CAAC,EAEM,CACL,cAAAH,EACA,cAAAC,EACA,YAAAC,EACA,WAAAJ,CAAA,CAEJ,CACF,CAAC"}

package/dist/components/layout/swiper/NeonSwiper.es.js

@@ -1,33 +1,46 @@
-import { defineComponent as i, ref as s, onMounted as u, onUnmounted as v } from "vue";
-const d = i({
+import { defineComponent as v, ref as n, onMounted as d, onUnmounted as c } from "vue";
+import { NeonOrientation as r } from "../../../common/enums/NeonOrientation.es.js";
+const h = v({
   name: "NeonSwiper",
   props: {
     /**
      * Display fade in / fade out styling when there is an overflow.
      */
-    fade: { type: Boolean, default: !0 }
+    fade: { type: Boolean, default: !0 },
+    /**
+     * Swiper orientation, i.e. whether to manage overflow horizontally or vertically.
+     */
+    orientation: { type: String, default: r.Horizontal },
+    /**
+     * Hide the starting fade (left or top depending on the orientation).
+     */
+    hideFadeStart: { type: Boolean, default: !1 },
+    /**
+     * Hide the ending fade (right or bottom depending on the orientation).
+     */
+    hideFadeEnd: { type: Boolean, default: !1 }
   },
-  setup() {
-    const e = s(null), t = s(!1), a = s(!1), n = s(!1), o = () => {
-      e.value ? (a.value = e.value.scrollLeft <= 0, n.value = e.value.scrollLeft + e.value.clientWidth > e.value.scrollWidth - 1) : (a.value = !1, n.value = !1);
-    }, r = () => {
-      e.value ? t.value = e.value.scrollWidth > e.value.clientWidth : t.value = !1, o();
+  setup(u) {
+    const e = n(null), t = n(!1), a = n(!1), o = n(!1), i = () => {
+      e.value ? u.orientation === r.Horizontal ? (a.value = e.value.scrollLeft <= 0, o.value = e.value.scrollLeft + e.value.clientWidth > e.value.scrollWidth - 1) : (a.value = e.value.scrollTop <= 0, o.value = e.value.scrollTop + e.value.clientHeight > e.value.scrollHeight - 1) : (a.value = !1, o.value = !1);
+    }, s = () => {
+      e.value ? u.orientation === r.Horizontal ? t.value = e.value.scrollWidth > e.value.clientWidth : t.value = e.value.scrollHeight > e.value.clientHeight : t.value = !1, i();
     };
-    return u(() => {
+    return d(() => {
       var l;
-      window.addEventListener("resize", r, { passive: !0 }), (l = e.value) == null || l.addEventListener("scroll", o, { passive: !0 }), r();
-    }), v(() => {
+      window.addEventListener("resize", s, { passive: !0 }), (l = e.value) == null || l.addEventListener("scroll", i, { passive: !0 }), s();
+    }), c(() => {
       var l;
-      window.removeEventListener("resize", r), (l = e.value) == null || l.removeEventListener("scroll", o);
+      window.removeEventListener("resize", s), (l = e.value) == null || l.removeEventListener("scroll", i);
     }), {
       isOverflowing: t,
       isScrollStart: a,
-      isScrollEnd: n,
+      isScrollEnd: o,
       scrollable: e
     };
   }
 });
 export {
-  d as default
+  h as default
 };
 //# sourceMappingURL=NeonSwiper.es.js.map

package/dist/components/layout/swiper/NeonSwiper.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonSwiper.es.js","sources":["../../../../src/components/layout/swiper/NeonSwiper.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref } from 'vue';\n\n/**\n * Automatically handle horizontally overflowing content by placing it in a NeonSwiper component allowing for smooth\n * horizontal scrolling with all input devices.\n */\nexport default defineComponent({\n  name: 'NeonSwiper',\n  props: {\n    /**\n     * Display fade in / fade out styling when there is an overflow.\n     */\n    fade: { type: Boolean, default: true },\n  },\n  setup() {\n    const scrollable = ref<HTMLElement | null>(null);\n    const isOverflowing = ref<boolean>(false);\n    const isScrollStart = ref<boolean>(false);\n    const isScrollEnd = ref<boolean>(false);\n\n    const handleScroll = () => {\n      if (scrollable.value) {\n        isScrollStart.value = scrollable.value.scrollLeft <= 0;\n        isScrollEnd.value =\n          scrollable.value.scrollLeft + scrollable.value.clientWidth > scrollable.value.scrollWidth - 1;\n      } else {\n        isScrollStart.value = false;\n        isScrollEnd.value = false;\n      }\n    };\n\n    const handleResize = () => {\n      if (scrollable.value) {\n        isOverflowing.value = scrollable.value.scrollWidth > scrollable.value.clientWidth;\n      } else {\n        isOverflowing.value = false;\n      }\n\n      handleScroll();\n    };\n\n    onMounted(() => {\n      window.addEventListener('resize', handleResize, { passive: true });\n      scrollable.value?.addEventListener('scroll', handleScroll, { passive: true });\n      handleResize();\n    });\n\n    onUnmounted(() => {\n      window.removeEventListener('resize', handleResize);\n      scrollable.value?.removeEventListener('scroll', handleScroll);\n    });\n\n    return {\n      isOverflowing,\n      isScrollStart,\n      isScrollEnd,\n      scrollable,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","scrollable","ref","isOverflowing","isScrollStart","isScrollEnd","handleScroll","handleResize","onMounted","_a","onUnmounted"],"mappings":";AAMA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,MAAM,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA,EAAK;AAAA,EAEvC,QAAQ;AACN,UAAMC,IAAaC,EAAwB,IAAI,GACzCC,IAAgBD,EAAa,EAAK,GAClCE,IAAgBF,EAAa,EAAK,GAClCG,IAAcH,EAAa,EAAK,GAEhCI,IAAe,MAAM;AACzB,MAAIL,EAAW,SACbG,EAAc,QAAQH,EAAW,MAAM,cAAc,GACrDI,EAAY,QACVJ,EAAW,MAAM,aAAaA,EAAW,MAAM,cAAcA,EAAW,MAAM,cAAc,MAE9FG,EAAc,QAAQ,IACtBC,EAAY,QAAQ;AAAA,IAExB,GAEME,IAAe,MAAM;AACzB,MAAIN,EAAW,QACbE,EAAc,QAAQF,EAAW,MAAM,cAAcA,EAAW,MAAM,cAEtEE,EAAc,QAAQ,IAGxBG,EAAA;AAAA,IACF;AAEA,WAAAE,EAAU,MAAM;;AACd,aAAO,iBAAiB,UAAUD,GAAc,EAAE,SAAS,IAAM,IACjEE,IAAAR,EAAW,UAAX,QAAAQ,EAAkB,iBAAiB,UAAUH,GAAc,EAAE,SAAS,OACtEC,EAAA;AAAA,IACF,CAAC,GAEDG,EAAY,MAAM;;AAChB,aAAO,oBAAoB,UAAUH,CAAY,IACjDE,IAAAR,EAAW,UAAX,QAAAQ,EAAkB,oBAAoB,UAAUH;AAAA,IAClD,CAAC,GAEM;AAAA,MACL,eAAAH;AAAA,MACA,eAAAC;AAAA,MACA,aAAAC;AAAA,MACA,YAAAJ;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}
+{"version":3,"file":"NeonSwiper.es.js","sources":["../../../../src/components/layout/swiper/NeonSwiper.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref } from 'vue';\nimport { NeonOrientation } from '@/common/enums/NeonOrientation';\n\n/**\n * Automatically handle horizontally overflowing content by placing it in a NeonSwiper component allowing for smooth\n * horizontal scrolling with all input devices.\n */\nexport default defineComponent({\n  name: 'NeonSwiper',\n  props: {\n    /**\n     * Display fade in / fade out styling when there is an overflow.\n     */\n    fade: { type: Boolean, default: true },\n    /**\n     * Swiper orientation, i.e. whether to manage overflow horizontally or vertically.\n     */\n    orientation: { type: String as () => NeonOrientation, default: NeonOrientation.Horizontal },\n    /**\n     * Hide the starting fade (left or top depending on the orientation).\n     */\n    hideFadeStart: { type: Boolean, default: false },\n    /**\n     * Hide the ending fade (right or bottom depending on the orientation).\n     */\n    hideFadeEnd: { type: Boolean, default: false },\n  },\n  setup(props) {\n    const scrollable = ref<HTMLElement | null>(null);\n    const isOverflowing = ref<boolean>(false);\n    const isScrollStart = ref<boolean>(false);\n    const isScrollEnd = ref<boolean>(false);\n\n    const handleScroll = () => {\n      if (scrollable.value) {\n        if (props.orientation === NeonOrientation.Horizontal) {\n          isScrollStart.value = scrollable.value.scrollLeft <= 0;\n          isScrollEnd.value =\n            scrollable.value.scrollLeft + scrollable.value.clientWidth > scrollable.value.scrollWidth - 1;\n        } else {\n          isScrollStart.value = scrollable.value.scrollTop <= 0;\n          isScrollEnd.value =\n            scrollable.value.scrollTop + scrollable.value.clientHeight > scrollable.value.scrollHeight - 1;\n        }\n      } else {\n        isScrollStart.value = false;\n        isScrollEnd.value = false;\n      }\n    };\n\n    const handleResize = () => {\n      if (scrollable.value) {\n        if (props.orientation === NeonOrientation.Horizontal) {\n          isOverflowing.value = scrollable.value.scrollWidth > scrollable.value.clientWidth;\n        } else {\n          isOverflowing.value = scrollable.value.scrollHeight > scrollable.value.clientHeight;\n        }\n      } else {\n        isOverflowing.value = false;\n      }\n\n      handleScroll();\n    };\n\n    onMounted(() => {\n      window.addEventListener('resize', handleResize, { passive: true });\n      scrollable.value?.addEventListener('scroll', handleScroll, { passive: true });\n      handleResize();\n    });\n\n    onUnmounted(() => {\n      window.removeEventListener('resize', handleResize);\n      scrollable.value?.removeEventListener('scroll', handleScroll);\n    });\n\n    return {\n      isOverflowing,\n      isScrollStart,\n      isScrollEnd,\n      scrollable,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonOrientation","props","scrollable","ref","isOverflowing","isScrollStart","isScrollEnd","handleScroll","handleResize","onMounted","_a","onUnmounted"],"mappings":";;AAOA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,MAAM,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIhC,aAAa,EAAE,MAAM,QAAiC,SAASC,EAAgB,WAAA;AAAA;AAAA;AAAA;AAAA,IAI/E,eAAe,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIzC,aAAa,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA,EAAM;AAAA,EAE/C,MAAMC,GAAO;AACX,UAAMC,IAAaC,EAAwB,IAAI,GACzCC,IAAgBD,EAAa,EAAK,GAClCE,IAAgBF,EAAa,EAAK,GAClCG,IAAcH,EAAa,EAAK,GAEhCI,IAAe,MAAM;AACzB,MAAIL,EAAW,QACTD,EAAM,gBAAgBD,EAAgB,cACxCK,EAAc,QAAQH,EAAW,MAAM,cAAc,GACrDI,EAAY,QACVJ,EAAW,MAAM,aAAaA,EAAW,MAAM,cAAcA,EAAW,MAAM,cAAc,MAE9FG,EAAc,QAAQH,EAAW,MAAM,aAAa,GACpDI,EAAY,QACVJ,EAAW,MAAM,YAAYA,EAAW,MAAM,eAAeA,EAAW,MAAM,eAAe,MAGjGG,EAAc,QAAQ,IACtBC,EAAY,QAAQ;AAAA,IAExB,GAEME,IAAe,MAAM;AACzB,MAAIN,EAAW,QACTD,EAAM,gBAAgBD,EAAgB,aACxCI,EAAc,QAAQF,EAAW,MAAM,cAAcA,EAAW,MAAM,cAEtEE,EAAc,QAAQF,EAAW,MAAM,eAAeA,EAAW,MAAM,eAGzEE,EAAc,QAAQ,IAGxBG,EAAA;AAAA,IACF;AAEA,WAAAE,EAAU,MAAM;;AACd,aAAO,iBAAiB,UAAUD,GAAc,EAAE,SAAS,IAAM,IACjEE,IAAAR,EAAW,UAAX,QAAAQ,EAAkB,iBAAiB,UAAUH,GAAc,EAAE,SAAS,OACtEC,EAAA;AAAA,IACF,CAAC,GAEDG,EAAY,MAAM;;AAChB,aAAO,oBAAoB,UAAUH,CAAY,IACjDE,IAAAR,EAAW,UAAX,QAAAQ,EAAkB,oBAAoB,UAAUH;AAAA,IAClD,CAAC,GAEM;AAAA,MACL,eAAAH;AAAA,MACA,eAAAC;AAAA,MACA,aAAAC;AAAA,MACA,YAAAJ;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}

package/dist/components/layout/swiper/NeonSwiper.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const s=require("./NeonSwiper.cjs.js"),e=require("vue"),o=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),t={ref:"scrollable",class:"neon-swiper__container"};function i(r,n,p,a,c,d){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([{"neon-swiper--fade":r.fade,"neon-swiper--overflowing":r.isOverflowing,"neon-swiper--start":r.isScrollStart,"neon-swiper--end":r.isScrollEnd},"neon-swiper"])},[e.createElementVNode("div",t,[e.renderSlot(r.$slots,"default")],512),n[0]||(n[0]=e.createElementVNode("div",{class:"neon-swiper__fade-out"},null,-1))],2)}const l=o(s,[["render",i]]);module.exports=l;
+"use strict";const o=require("./NeonSwiper.cjs.js"),n=require("vue"),s=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),i={ref:"scrollable",class:"neon-swiper__container"};function t(e,r,d,a,p,u){return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass([[`neon-swiper--${e.orientation}`,{"neon-swiper--fade":e.fade,"neon-swiper--overflowing":e.isOverflowing,"neon-swiper--start":e.isScrollStart,"neon-swiper--end":e.isScrollEnd,"neon-swiper--hide-fade-start":e.hideFadeStart,"neon-swiper--hide-fade-end":e.hideFadeEnd}],"neon-swiper"])},[n.createElementVNode("div",i,[n.renderSlot(e.$slots,"default")],512),r[0]||(r[0]=n.createElementVNode("div",{class:"neon-swiper__fade-out"},null,-1))],2)}const l=s(o,[["render",t]]);module.exports=l;
 //# sourceMappingURL=NeonSwiper.vue.cjs.js.map

package/dist/components/layout/swiper/NeonSwiper.vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonSwiper.vue.cjs.js","sources":["../../../../src/components/layout/swiper/NeonSwiper.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"{\n      'neon-swiper--fade': fade,\n      'neon-swiper--overflowing': isOverflowing,\n      'neon-swiper--start': isScrollStart,\n      'neon-swiper--end': isScrollEnd,\n    }\"\n    class=\"neon-swiper\"\n  >\n    <div ref=\"scrollable\" class=\"neon-swiper__container\">\n      <!-- @slot contents of swiper with which to apply overflow scrolling. -->\n      <slot></slot>\n    </div>\n    <div class=\"neon-swiper__fade-out\"></div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonSwiper.ts\"></script>\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_hoisted_1","_renderSlot"],"mappings":"wIAUS,IAAI,aAAa,MAAM,uEAT9BA,EAAAA,mBAcM,MAAA,CAbH,MAAKC,EAAAA,eAAA,CAAA,qBAA+BC,EAAA,gCAAwCA,EAAA,mCAA2CA,EAAA,iCAAyCA,EAAA,aAM3J,aAAa,CAAA,IAEnBC,EAAAA,mBAGM,MAHNC,EAGM,CADJC,aAAaH,EAAA,OAAA,SAAA,oBAEfC,EAAAA,mBAAyC,MAAA,CAApC,MAAM,yBAAuB,KAAA,EAAA"}
+{"version":3,"file":"NeonSwiper.vue.cjs.js","sources":["../../../../src/components/layout/swiper/NeonSwiper.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      `neon-swiper--${orientation}`,\n      {\n        'neon-swiper--fade': fade,\n        'neon-swiper--overflowing': isOverflowing,\n        'neon-swiper--start': isScrollStart,\n        'neon-swiper--end': isScrollEnd,\n        'neon-swiper--hide-fade-start': hideFadeStart,\n        'neon-swiper--hide-fade-end': hideFadeEnd,\n      },\n    ]\"\n    class=\"neon-swiper\"\n  >\n    <div ref=\"scrollable\" class=\"neon-swiper__container\">\n      <!-- @slot contents of swiper with which to apply overflow scrolling. -->\n      <slot></slot>\n    </div>\n    <div class=\"neon-swiper__fade-out\"></div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonSwiper.ts\"></script>\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_hoisted_1","_renderSlot"],"mappings":"wIAeS,IAAI,aAAa,MAAM,uEAd9BA,EAAAA,mBAmBM,MAAA,CAlBH,MAAKC,EAAAA,eAAA,CAAA,iBAA0BC,EAAA,WAAW,wBAAyCA,EAAA,gCAA0CA,EAAA,mCAA6CA,EAAA,iCAA2CA,EAAA,2CAAqDA,EAAA,2CAAqDA,EAAA,cAW1T,aAAa,CAAA,IAEnBC,EAAAA,mBAGM,MAHNC,EAGM,CADJC,aAAaH,EAAA,OAAA,SAAA,oBAEfC,EAAAA,mBAAyC,MAAA,CAApC,MAAM,yBAAuB,KAAA,EAAA"}

package/dist/components/layout/swiper/NeonSwiper.vue.es.js

@@ -1,27 +1,32 @@
-import n from "./NeonSwiper.es.js";
-import { openBlock as s, createElementBlock as i, normalizeClass as l, createElementVNode as r, renderSlot as t } from "vue";
-import a from "../../../_virtual/_plugin-vue_export-helper.es.js";
-const p = {
+import r from "./NeonSwiper.es.js";
+import { openBlock as s, createElementBlock as i, normalizeClass as a, createElementVNode as o, renderSlot as d } from "vue";
+import t from "../../../_virtual/_plugin-vue_export-helper.es.js";
+const l = {
   ref: "scrollable",
   class: "neon-swiper__container"
 };
-function d(e, o, f, c, m, w) {
+function p(e, n, f, w, m, c) {
   return s(), i("div", {
-    class: l([{
-      "neon-swiper--fade": e.fade,
-      "neon-swiper--overflowing": e.isOverflowing,
-      "neon-swiper--start": e.isScrollStart,
-      "neon-swiper--end": e.isScrollEnd
-    }, "neon-swiper"])
+    class: a([[
+      `neon-swiper--${e.orientation}`,
+      {
+        "neon-swiper--fade": e.fade,
+        "neon-swiper--overflowing": e.isOverflowing,
+        "neon-swiper--start": e.isScrollStart,
+        "neon-swiper--end": e.isScrollEnd,
+        "neon-swiper--hide-fade-start": e.hideFadeStart,
+        "neon-swiper--hide-fade-end": e.hideFadeEnd
+      }
+    ], "neon-swiper"])
   }, [
-    r("div", p, [
-      t(e.$slots, "default")
+    o("div", l, [
+      d(e.$slots, "default")
     ], 512),
-    o[0] || (o[0] = r("div", { class: "neon-swiper__fade-out" }, null, -1))
+    n[0] || (n[0] = o("div", { class: "neon-swiper__fade-out" }, null, -1))
   ], 2);
 }
-const S = /* @__PURE__ */ a(n, [["render", d]]);
+const v = /* @__PURE__ */ t(r, [["render", p]]);
 export {
-  S as default
+  v as default
 };
 //# sourceMappingURL=NeonSwiper.vue.es.js.map

package/dist/components/layout/swiper/NeonSwiper.vue.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonSwiper.vue.es.js","sources":["../../../../src/components/layout/swiper/NeonSwiper.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"{\n      'neon-swiper--fade': fade,\n      'neon-swiper--overflowing': isOverflowing,\n      'neon-swiper--start': isScrollStart,\n      'neon-swiper--end': isScrollEnd,\n    }\"\n    class=\"neon-swiper\"\n  >\n    <div ref=\"scrollable\" class=\"neon-swiper__container\">\n      <!-- @slot contents of swiper with which to apply overflow scrolling. -->\n      <slot></slot>\n    </div>\n    <div class=\"neon-swiper__fade-out\"></div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonSwiper.ts\"></script>\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_hoisted_1","_renderSlot"],"mappings":";;;;EAUS,KAAI;AAAA,EAAa,OAAM;;;cAT9BA,EAcM,OAAA;AAAA,IAbH,OAAKC,EAAA,CAAA;AAAA,2BAA+BC,EAAA;AAAA,kCAAwCA,EAAA;AAAA,4BAA2CA,EAAA;AAAA,0BAAyCA,EAAA;AAAA,OAM3J,aAAa,CAAA;AAAA;IAEnBC,EAGM,OAHNC,GAGM;AAAA,MADJC,EAAaH,EAAA,QAAA,SAAA;AAAA;oBAEfC,EAAyC,OAAA,EAApC,OAAM,2BAAuB,MAAA,EAAA;AAAA;;;"}
+{"version":3,"file":"NeonSwiper.vue.es.js","sources":["../../../../src/components/layout/swiper/NeonSwiper.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      `neon-swiper--${orientation}`,\n      {\n        'neon-swiper--fade': fade,\n        'neon-swiper--overflowing': isOverflowing,\n        'neon-swiper--start': isScrollStart,\n        'neon-swiper--end': isScrollEnd,\n        'neon-swiper--hide-fade-start': hideFadeStart,\n        'neon-swiper--hide-fade-end': hideFadeEnd,\n      },\n    ]\"\n    class=\"neon-swiper\"\n  >\n    <div ref=\"scrollable\" class=\"neon-swiper__container\">\n      <!-- @slot contents of swiper with which to apply overflow scrolling. -->\n      <slot></slot>\n    </div>\n    <div class=\"neon-swiper__fade-out\"></div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonSwiper.ts\"></script>\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_hoisted_1","_renderSlot"],"mappings":";;;;EAeS,KAAI;AAAA,EAAa,OAAM;;;cAd9BA,EAmBM,OAAA;AAAA,IAlBH,OAAKC,EAAA,CAAA;AAAA,sBAA0BC,EAAA,WAAW;AAAA;6BAAyCA,EAAA;AAAA,oCAA0CA,EAAA;AAAA,8BAA6CA,EAAA;AAAA,4BAA2CA,EAAA;AAAA,wCAAqDA,EAAA;AAAA,sCAAqDA,EAAA;AAAA;OAW1T,aAAa,CAAA;AAAA;IAEnBC,EAGM,OAHNC,GAGM;AAAA,MADJC,EAAaH,EAAA,QAAA,SAAA;AAAA;oBAEfC,EAAyC,OAAA,EAApC,OAAM,2BAAuB,MAAA,EAAA;AAAA;;;"}

package/dist/src/components/layout/swiper/NeonSwiper.d.ts

@@ -1,3 +1,4 @@
+import { NeonOrientation } from '@/common/enums/NeonOrientation';
 /**
  * Automatically handle horizontally overflowing content by placing it in a NeonSwiper component allowing for smooth
  * horizontal scrolling with all input devices.
@@ -10,6 +11,27 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Swiper orientation, i.e. whether to manage overflow horizontally or vertically.
+     */
+    orientation: {
+        type: () => NeonOrientation;
+        default: NeonOrientation;
+    };
+    /**
+     * Hide the starting fade (left or top depending on the orientation).
+     */
+    hideFadeStart: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Hide the ending fade (right or bottom depending on the orientation).
+     */
+    hideFadeEnd: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {
     isOverflowing: import("vue").Ref<boolean, boolean>;
     isScrollStart: import("vue").Ref<boolean, boolean>;
@@ -23,7 +45,31 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Swiper orientation, i.e. whether to manage overflow horizontally or vertically.
+     */
+    orientation: {
+        type: () => NeonOrientation;
+        default: NeonOrientation;
+    };
+    /**
+     * Hide the starting fade (left or top depending on the orientation).
+     */
+    hideFadeStart: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Hide the ending fade (right or bottom depending on the orientation).
+     */
+    hideFadeEnd: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{}>, {
+    orientation: NeonOrientation;
     fade: boolean;
+    hideFadeStart: boolean;
+    hideFadeEnd: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aotearoan/neon",
   "description": "Neon is a lightweight design library of Vue 3 components with minimal dependencies.",
-  "version": "22.3.0",
+  "version": "22.4.0",
   "main": "./dist/neon.cjs.js",
   "module": "./dist/neon.es.js",
   "types": "./dist/src/neon.d.ts",

package/src/sass/components/_swiper.scss

@@ -6,18 +6,14 @@
     flex-direction: row;
     max-width: 100%;
     width: 100%;
-    overflow-x: hidden;
 
     .neon-swiper__container {
       position: relative;
       top: 0;
       left: 0;
-      overflow-x: auto;
       overscroll-behavior: contain;
       width: 100%;
       height: 100%;
-
-      @include scrollbars.hide-scrollbars();
     }
 
     .neon-swiper__fade-out {
@@ -29,40 +25,108 @@
       z-index: var(--neon-z-index-above);
       width: 100%;
       height: 100%;
+    }
+
+    &--horizontal {
+      overflow-x: hidden;
+
+      .neon-swiper__container {
+        overflow-x: auto;
+        flex-direction: row;
+        @include scrollbars.hide-scrollbars();
+      }
+
+      .neon-swiper__fade-out {
+        &:before {
+          content: '';
+          position: absolute;
+          left: 0;
+          background: linear-gradient(to left, transparent, var(--neon-background-color-swiper));
+          height: 100%;
+          width: 0;
+          transition: width ease-in-out var(--neon-animation-speed-fast);
+        }
 
-      &:before {
-        content: '';
-        position: absolute;
-        left: 0;
-        background: linear-gradient(to left, transparent, var(--neon-background-color-swiper));
-        height: 100%;
-        width: 0;
-        transition: width ease-in-out var(--neon-animation-speed-fast);
+        &:after {
+          content: '';
+          position: absolute;
+          right: 0;
+          background: linear-gradient(to right, transparent, var(--neon-background-color-swiper));
+          height: 100%;
+          width: 0;
+          transition: width ease-in-out var(--neon-animation-speed-fastest);
+        }
       }
 
-      &:after {
-        content: '';
-        position: absolute;
-        right: 0;
-        background: linear-gradient(to right, transparent, var(--neon-background-color-swiper));
-        height: 100%;
-        width: 0;
-        transition: width ease-in-out var(--neon-animation-speed-fastest);
+      &.neon-swiper--overflowing.neon-swiper--fade {
+        &:not(.neon-swiper--start) {
+          .neon-swiper__fade-out:before {
+            width: var(--neon-space-24);
+          }
+        }
+
+        &:not(.neon-swiper--end) {
+          .neon-swiper__fade-out:after {
+            width: var(--neon-space-24);
+          }
+        }
       }
     }
 
-    &--overflowing.neon-swiper--fade {
-      &:not(.neon-swiper--start) {
-        .neon-swiper__fade-out:before {
-          width: var(--neon-space-24);
+    &--vertical {
+      overflow-y: hidden;
+
+      .neon-swiper__container {
+        overflow-y: auto;
+      }
+
+      .neon-swiper__fade-out {
+        &:before {
+          content: '';
+          position: absolute;
+          top: 0;
+          background: linear-gradient(to top, transparent, var(--neon-background-color-swiper));
+          width: 100%;
+          height: 0;
+          transition: width ease-in-out var(--neon-animation-speed-fastest);
+        }
+
+        &:after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          background: linear-gradient(to bottom, transparent, var(--neon-background-color-swiper));
+          width: 100%;
+          height: 0;
+          transition: width ease-in-out var(--neon-animation-speed-fastest);
         }
       }
 
-      &:not(.neon-swiper--end) {
-        .neon-swiper__fade-out:after {
-          width: var(--neon-space-24);
+      &.neon-swiper--overflowing.neon-swiper--fade {
+        &:not(.neon-swiper--start) {
+          .neon-swiper__fade-out:before {
+            height: var(--neon-space-24);
+          }
+        }
+
+        &:not(.neon-swiper--end) {
+          .neon-swiper__fade-out:after {
+            height: var(--neon-space-24);
+          }
         }
       }
     }
+
+    &.neon-swiper--hide-fade-start {
+      .neon-swiper__fade-out:before {
+        display: none;
+      }
+    }
+
+    &.neon-swiper--hide-fade-end {
+      .neon-swiper__fade-out:after {
+        display: none;
+      }
+    }
   }
 }