@adyen/bento-vue3 1.6.1 → 1.7.0

package/dist/internal.js

@@ -1,147 +1,23 @@
-import { B as P, L as Q } from "./chunks/listbox-option-tag.0f31ecb2.js";
-import { C as Z, a as ee, b as te } from "./chunks/calendar.cc37ac1f.js";
-import { C as re } from "./chunks/copy.7a73d1fd.js";
-import { C as ae } from "./chunks/controls-group.7214dc7f.js";
-import { E as ne } from "./chunks/error-message.b91afffc.js";
-import { ref as n, computed as a, defineComponent as W, openBlock as x, createElementBlock as g, createElementVNode as B, normalizeStyle as w, unref as t, renderSlot as E, createVNode as h, withCtx as R, createCommentVNode as L } from "vue";
-import { a as S } from "./chunks/button.975d0bb8.js";
-import { u as V } from "./chunks/i18n.6c402773.js";
-import { C as G, a as I } from "./chunks/chevron-right.aef416c6.js";
-import { _ as O } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { G as ie, a as fe } from "./chunks/grid-layout.7c919507.js";
-import { B as de } from "./chunks/listbox.0f25778d.js";
-import "./assets/index13.css";
-const A = ({
-  contentRef: C,
-  containerRef: f,
-  leftButtonRef: u,
-  rightButtonRef: d
-}) => {
-  const r = n(0), o = n(0), c = a(() => {
-    var e;
-    return (e = C.value) == null ? void 0 : e.scrollWidth;
-  }), s = a(() => {
-    var e;
-    return (e = f.value) == null ? void 0 : e.clientWidth;
-  }), p = a(() => {
-    var l, _;
-    const e = ((l = u.value) == null ? void 0 : l.scrollWidth) ?? 0, b = ((_ = d.value) == null ? void 0 : _.scrollWidth) ?? 0;
-    return e + b;
-  }), i = a(() => Math.ceil(c.value / s.value) ?? 0), v = a(() => {
-    const e = new Array(i.value).fill(0);
-    return e.forEach((b, l) => {
-      if (l === 0)
-        return;
-      if (l === i.value - 1) {
-        e[e.length - 1] = -(c.value - s.value);
-        return;
-      }
-      const _ = e[l - 1];
-      e[l] = -(s.value + Math.abs(_) - p.value);
-    }), e;
-  }), m = a(() => o.value !== 0), y = a(
-    () => r.value === 0 || r.value >= -(c.value - s.value - 1)
-  );
-  return {
-    offset: r,
-    shouldShowLeftButton: m,
-    shouldShowRightButton: y,
-    // Methods
-    scrollLeft: () => {
-      o.value !== 0 && (o.value -= 1, r.value = v.value[o.value]);
-    },
-    scrollRight: () => {
-      o.value !== i.value - 1 && (o.value += 1, r.value = v.value[o.value]);
-    }
-  };
-}, k = {
-  "en-US": {
-    scrollLeft: "Scroll left",
-    scrollRight: "Scroll right"
-  }
-}, F = { class: "b-fixed-scroller__container" }, M = {
-  i18n: { messages: k }
-}, N = /* @__PURE__ */ W({
-  ...M,
-  __name: "fixed-scroller",
-  setup(C) {
-    const { t: f } = V({ messages: k }), u = n(null), d = n(null), r = n(null), o = n(null), { offset: c, shouldShowLeftButton: s, shouldShowRightButton: p, scrollLeft: i, scrollRight: v } = A({
-      contentRef: u,
-      containerRef: d,
-      leftButtonRef: r,
-      rightButtonRef: o
-    });
-    return (m, y) => (x(), g("div", {
-      ref_key: "fixedScrollerRef",
-      ref: d,
-      class: "b-fixed-scroller"
-    }, [
-      B("div", F, [
-        B("div", {
-          ref_key: "contentRef",
-          ref: u,
-          class: "b-fixed-scroller__content",
-          style: w({ transform: `translateX(${t(c)}px)` })
-        }, [
-          E(m.$slots, "default", {}, void 0, !0)
-        ], 4)
-      ]),
-      t(s) ? (x(), g("div", {
-        key: 0,
-        ref_key: "leftButtonRef",
-        ref: r,
-        class: "b-fixed-scroller__left"
-      }, [
-        h(t(S), {
-          variant: "secondary",
-          "aria-label": t(f)("scrollLeft"),
-          onClick: t(i)
-        }, {
-          iconLeft: R(() => [
-            h(t(G), {
-              "svg-title": "checked",
-              "aria-hidden": "true"
-            })
-          ]),
-          _: 1
-        }, 8, ["aria-label", "onClick"])
-      ], 512)) : L("", !0),
-      t(p) ? (x(), g("div", {
-        key: 1,
-        ref_key: "rightButtonRef",
-        ref: o,
-        class: "b-fixed-scroller__right"
-      }, [
-        h(t(S), {
-          variant: "secondary",
-          "aria-label": t(f)("scrollRight"),
-          onClick: t(v)
-        }, {
-          iconLeft: R(() => [
-            h(t(I), {
-              "svg-title": "checked",
-              "aria-hidden": "true"
-            })
-          ]),
-          _: 1
-        }, 8, ["aria-label", "onClick"])
-      ], 512)) : L("", !0)
-    ], 512));
-  }
-});
-const q = /* @__PURE__ */ O(N, [["__scopeId", "data-v-ba6ad0f9"]]);
+import { B as a, L as e } from "./chunks/listbox-option-tag.809ec40e.js";
+import { C as s, a as p, b as x } from "./chunks/calendar.c83d4e99.js";
+import { C as f } from "./chunks/copy.86236c8d.js";
+import { C as i } from "./chunks/controls-group.38b436f6.js";
+import { E as d } from "./chunks/error-message.64e1964b.js";
+import { F as y } from "./chunks/fixed-scroller.e5aa7b00.js";
+import { G as B, a as G } from "./chunks/grid-layout.7c919507.js";
+import { B as u } from "./chunks/listbox.f6e5a11d.js";
 export {
-  P as BentoAvatar,
-  de as BentoListbox,
-  Z as Calendar,
-  ee as CalendarEvent,
-  te as CalendarFirstDayOfWeek,
-  ae as ControlsGroup,
-  re as Copy,
-  ne as ErrorMessage,
-  q as FixedScroller,
-  ie as GridLayout,
-  fe as GridLayoutContainerType,
-  Q as ListboxOptionTag
+  a as BentoAvatar,
+  u as BentoListbox,
+  s as Calendar,
+  p as CalendarEvent,
+  x as CalendarFirstDayOfWeek,
+  i as ControlsGroup,
+  f as Copy,
+  d as ErrorMessage,
+  y as FixedScroller,
+  B as GridLayout,
+  G as GridLayoutContainerType,
+  e as ListboxOptionTag
 };
 //# sourceMappingURL=internal.js.map

package/dist/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sources":["../../vue2/src/components/internal/fixed-scroller/composables/useFixedScroller.ts","../../vue2/src/components/internal/fixed-scroller/fixed-scroller.vue"],"sourcesContent":["import { computed, ref } from 'vue';\nimport type { Ref } from 'vue';\n\ninterface useFixedScrollerProps {\n    contentRef?: Ref<HTMLElement | undefined>;\n    containerRef?: Ref<HTMLElement | undefined>;\n    leftButtonRef?: Ref<HTMLElement | undefined>;\n    rightButtonRef?: Ref<HTMLElement | undefined>;\n}\n\n/**\n * Function to calculate the offset of each view and change the \"view\" via offsets\n * through the functions `scrollLeft` and `scrollRight` whilst providing a way to\n * show and hide the buttons based on the current \"view\" via\n * `shouldShowLeftButton` and `shouldShowRightButton`.\n *\n * Each view is pre-calculated (offsetArray) and updated if the content changes as a computed ref:\n * First view: Always 0 (x axis beginning).\n * Last view: total content space - visible width\n * Intermediate views: Previous offset (to the left) plus the visible space taking\n *                     away the space the buttons take so that the whole view can be rendered\n *\n *\n * @param {useFixedScrollerProps} props - All the necessary references to calculate the scroll\n * @param {Ref<HTMLElement | undefined>} props.containerRef - Reference to the container, this defines the visible space width\n * @param {Ref<HTMLElement | undefined>} props.contentRef - Reference to the content itself, this defines the total content width\n * @param {Ref<HTMLElement | undefined>} props.leftButtonRef - Reference to the left button, used to calculate total space in which the content will be rendered\n * @param {Ref<HTMLElement | undefined>} props.rightButtonRef - Reference to the right button, used to calculate total space in which the content will be rendered\n * @returns {Object} response - Values used in the view to show the buttons and to change the view right or left\n * @returns {Ref<number>} response.offset - Offset value by which the view will move on the x axis. To be used in `styles`.\n * @returns {ComputedRef<boolean>} response.shouldShowLeftButton - Indicates if the button on the left should be shown\n * @returns {ComputedRef<boolean>} response.shouldShowRightButton - Indicates if the button on the right should be shown\n * @returns {() => {}} response.scrollLeft - Used to shift the view to the left\n * @returns {() => {}} response.scrollRight - Used to shift the view to the right\n */\nexport const useFixedScroller = ({\n    contentRef,\n    containerRef,\n    leftButtonRef,\n    rightButtonRef,\n}: useFixedScrollerProps) => {\n    const offset = ref(0);\n    const currentView = ref(0);\n\n    // Calculated using 'scrollWidth' to get the full width of the content\n    const totalContentWidth = computed(() => contentRef.value?.scrollWidth);\n    // Calculated using 'clientWidth' to get the rendered componen width\n    const visibleSpaceWidth = computed(() => containerRef.value?.clientWidth);\n    // Sum of the space used by the Left and Right buttons\n    // Used to calculate how much space the \"actual\" visible space is\n    const buttonsWidth = computed(() => {\n        const leftButtonWidth = leftButtonRef.value?.scrollWidth ?? 0;\n        const rightButtonWidth = rightButtonRef.value?.scrollWidth ?? 0;\n\n        return leftButtonWidth + rightButtonWidth;\n    });\n    // Total number of pages/views available.\n    // Calculated as \"ceil\" because if the space doesn't fit \"one view\" (irrational number) the content flows to the next view (integer).\n    const totalViews = computed(() => Math.ceil(totalContentWidth.value / visibleSpaceWidth.value) ?? 0);\n\n    // Calculation of offsets per view (index).\n    // This allows to easily swap the offset without on-the-fly calculations\n    const offsetArray = computed(() => {\n        const calculatedOffsetList = new Array(totalViews.value).fill(0);\n\n        calculatedOffsetList.forEach((_, index) => {\n            // First offset will be 0\n            if (index === 0) {\n                return;\n            }\n\n            // Calculate last\n            if (index === totalViews.value - 1) {\n                calculatedOffsetList[calculatedOffsetList.length - 1] = -(\n                    totalContentWidth.value - visibleSpaceWidth.value\n                );\n                return;\n            }\n\n            // Calculate each offset - Move 1 view\n            const previousOffset = calculatedOffsetList[index - 1];\n            calculatedOffsetList[index] = -(visibleSpaceWidth.value + Math.abs(previousOffset) - buttonsWidth.value);\n        });\n\n        return calculatedOffsetList;\n    });\n\n    // Hide left button when it's the first view\n    const shouldShowLeftButton = computed(() => currentView.value !== 0);\n    // Hide right button if it's the last view\n    const shouldShowRightButton = computed(\n        () => offset.value === 0 || offset.value >= -(totalContentWidth.value - visibleSpaceWidth.value - 1)\n    );\n\n    /**\n     * Shifts the current offset by one view to the left.\n     */\n    const scrollLeft = () => {\n        // Do nothing if it is already in page 0\n        if (currentView.value === 0) {\n            return;\n        }\n\n        currentView.value -= 1;\n        offset.value = offsetArray.value[currentView.value];\n    };\n\n    /**\n     * Shifts the current offset by one view to the right.\n     */\n    const scrollRight = () => {\n        // Do nothing if it is already in last page\n        if (currentView.value === totalViews.value - 1) {\n            return;\n        }\n\n        currentView.value += 1;\n        offset.value = offsetArray.value[currentView.value];\n    };\n\n    return {\n        offset,\n        shouldShowLeftButton,\n        shouldShowRightButton,\n\n        // Methods\n        scrollLeft,\n        scrollRight,\n    };\n};\n","<template>\n    <div ref=\"fixedScrollerRef\" class=\"b-fixed-scroller\">\n        <div class=\"b-fixed-scroller__container\">\n            <div ref=\"contentRef\" class=\"b-fixed-scroller__content\" :style=\"{ transform: `translateX(${offset}px)` }\">\n                <slot></slot>\n            </div>\n        </div>\n\n        <div v-if=\"shouldShowLeftButton\" ref=\"leftButtonRef\" class=\"b-fixed-scroller__left\">\n            <bento-button variant=\"secondary\" :aria-label=\"t('scrollLeft')\" @click=\"scrollLeft\">\n                <template #iconLeft>\n                    <chevron-left-icon svg-title=\"checked\" aria-hidden=\"true\" />\n                </template>\n            </bento-button>\n        </div>\n        <div v-if=\"shouldShowRightButton\" ref=\"rightButtonRef\" class=\"b-fixed-scroller__right\">\n            <bento-button variant=\"secondary\" :aria-label=\"t('scrollRight')\" @click=\"scrollRight\">\n                <template #iconLeft>\n                    <chevron-right-icon svg-title=\"checked\" aria-hidden=\"true\" />\n                </template>\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { ref } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { useFixedScroller } from './composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import ChevronLeftIcon from '@adyen/ui-assets-icons-16/vue/chevron-left';\n    import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const contentRef = ref(null);\n    const fixedScrollerRef = ref(null);\n    const leftButtonRef = ref(null);\n    const rightButtonRef = ref(null);\n\n    const { offset, shouldShowLeftButton, shouldShowRightButton, scrollLeft, scrollRight } = useFixedScroller({\n        contentRef,\n        containerRef: fixedScrollerRef,\n        leftButtonRef,\n        rightButtonRef,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Allows to horizontally scroll content by one view at a time.\n     *\n     * @example\n     * import { FixedScroller } from '@/internal';\n     *\n     * export default {\n     *     components: { FixedScroller },\n     *     template: `\n     *          <fixed-scroller>\n     *              <div style=\"display: flex; gap: 8px;\">\n     *                  {{ Content here }}\n     *              </div>\n     *          </fixed-scroller>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./fixed-scroller.scss\" />\n"],"names":["useFixedScroller","contentRef","containerRef","leftButtonRef","rightButtonRef","offset","ref","currentView","totalContentWidth","computed","_a","visibleSpaceWidth","buttonsWidth","leftButtonWidth","rightButtonWidth","_b","totalViews","offsetArray","calculatedOffsetList","_","index","previousOffset","shouldShowLeftButton","shouldShowRightButton","__default__","messages","t","useI18n","fixedScrollerRef","scrollLeft","scrollRight"],"mappings":";;;;;;;;;;;;;AAmCO,MAAAA,IAAA,CAAA;AAAA,EAA0B,YAAAC;AAAA,EAC7B,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AAEJ,MAAA;AACI,QAAAC,IAAAC,EAAA,CAAA,GACAC,IAAAD,EAAA,CAAA,GAGAE,IAAAC,EAAA,MAAA;;AAAA,YAAAC,IAAAT,EAAA,UAAA,gBAAAS,EAAA;AAAA,GAAA,GAEAC,IAAAF,EAAA,MAAA;;AAAA,YAAAC,IAAAR,EAAA,UAAA,gBAAAQ,EAAA;AAAA,GAAA,GAGAE,IAAAH,EAAA,MAAA;;AACI,UAAAI,MAAAH,IAAAP,EAAA,UAAA,gBAAAO,EAAA,gBAAA,GACAI,MAAAC,IAAAX,EAAA,UAAA,gBAAAW,EAAA,gBAAA;AAEA,WAAAF,IAAAC;AAAA,EAAyB,CAAA,GAI7BE,IAAAP,EAAA,MAAA,KAAA,KAAAD,EAAA,QAAAG,EAAA,KAAA,KAAA,CAAA,GAIAM,IAAAR,EAAA,MAAA;AACI,UAAAS,IAAA,IAAA,MAAAF,EAAA,KAAA,EAAA,KAAA,CAAA;AAEA,WAAAE,EAAA,QAAA,CAAAC,GAAAC,MAAA;AAEI,UAAAA,MAAA;AACI;AAIJ,UAAAA,MAAAJ,EAAA,QAAA,GAAA;AACI,QAAAE,EAAAA,EAAA,SAAA,CAAA,IAAA,EAAAV,EAAA,QAAAG,EAAA;AAGA;AAAA;AAIJ,YAAAU,IAAAH,EAAAE,IAAA,CAAA;AACA,MAAAF,EAAAE,CAAA,IAAA,EAAAT,EAAA,QAAA,KAAA,IAAAU,CAAA,IAAAT,EAAA;AAAA,IAAkG,CAAA,GAGtGM;AAAA,EAAO,CAAA,GAIXI,IAAAb,EAAA,MAAAF,EAAA,UAAA,CAAA,GAEAgB,IAAAd;AAAA,IAA8B,MAAAJ,EAAA,UAAA,KAAAA,EAAA,SAAA,EAAAG,EAAA,QAAAG,EAAA,QAAA;AAAA,EACwE;AA6BtG,SAAA;AAAA,IAAO,QAAAN;AAAA,IACH,sBAAAiB;AAAA,IACA,uBAAAC;AAAA;AAAA,IACA,YA1BJ,MAAA;AAEI,MAAAhB,EAAA,UAAA,MAIAA,EAAA,SAAA,GACAF,EAAA,QAAAY,EAAA,MAAAV,EAAA,KAAA;AAAA,IAAkD;AAAA,IAsBlD,aAhBJ,MAAA;AAEI,MAAAA,EAAA,UAAAS,EAAA,QAAA,MAIAT,EAAA,SAAA,GACAF,EAAA,QAAAY,EAAA,MAAAV,EAAA,KAAA;AAAA,IAAkD;AAAA,EAUlD;AAER;;;;;iDC3DIiB,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;AAnCA,UAAA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAF,EAAA,CAAA,GAEAxB,IAAAK,EAAA,IAAA,GACAsB,IAAAtB,EAAA,IAAA,GACAH,IAAAG,EAAA,IAAA,GACAF,IAAAE,EAAA,IAAA,GAEA,EAAA,QAAAD,GAAA,sBAAAiB,GAAA,uBAAAC,GAAA,YAAAM,GAAA,aAAAC,EAAA,IAAA9B,EAAA;AAAA,MAA0G,YAAAC;AAAA,MACtG,cAAA2B;AAAA,MACc,eAAAzB;AAAA,MACd,gBAAAC;AAAA,IACA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"internal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/link.js

@@ -1,8 +1,8 @@
 import { defineComponent as g, computed as b, useAttrs as h, openBlock as a, createElementBlock as v, mergeProps as y, unref as e, createBlock as n, withCtx as i, renderSlot as r } from "vue";
 import { RouterLink as T } from "vue-router";
-import { B as k } from "./chunks/index.7f24db66.js";
+import { B as k } from "./chunks/index.2bd3812b.js";
 import { _ as B } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index22.css";
+import "./assets/index14.css";
 var l = /* @__PURE__ */ ((t) => (t.DEFAULT = "default", t.QUIET = "quiet", t))(l || {});
 const E = ["href", "title", "target"], U = {
   name: "bento-link",

package/dist/loading-indicator.js

@@ -1,6 +1,6 @@
 import { defineComponent as t, onMounted as i, onUnmounted as l, computed as s, openBlock as d, createElementBlock as r, normalizeClass as c } from "vue";
 import { _ } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index35.css";
+import "./assets/index18.css";
 var e = /* @__PURE__ */ ((a) => (a.START = "loading-start", a.END = "loading-end", a))(e || {});
 const p = t({
   name: "bento-loading-indicator",