@adyen/bento-vue3 1.26.0 → 1.27.0

package/dist/tabs.js

@@ -1,11 +1,11 @@
-import { defineComponent as w, toRefs as x, ref as v, provide as m, computed as L, inject as h, onUnmounted as V, withDirectives as N, openBlock as u, createElementBlock as p, renderSlot as A, createCommentVNode as C, vShow as $, watch as X, nextTick as Y, resolveComponent as g, createVNode as y, withCtx as E, createElementVNode as f, Fragment as F, renderList as O, normalizeClass as G, withKeys as J, createTextVNode as U, toDisplayString as j } from "vue";
-import { E as q, T as B, a as K } from "./chunks/tabs.keys.358742f2.js";
-import { _ as D } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { B as z } from "./chunks/index.a3d60e4f.js";
-import { g as P } from "./chunks/unique-id.a2a2b458.js";
-import { F as H } from "./chunks/fixed-scroller.59aefd1b.js";
-import "./assets/index32.css";
-const M = w({
+import { defineComponent as N, toRefs as L, ref as _, provide as I, computed as V, inject as g, onUnmounted as X, withDirectives as A, openBlock as u, createElementBlock as p, renderSlot as C, createCommentVNode as $, vShow as B, watch as Y, nextTick as F, resolveComponent as y, createVNode as E, withCtx as w, createElementVNode as m, Fragment as O, renderList as G, normalizeClass as J, withKeys as U, createTextVNode as j, toDisplayString as q } from "vue";
+import { E as z, T as K, a as D } from "./chunks/tabs.keys.358742f2.js";
+import { _ as R } from "./chunks/_plugin-vue_export-helper.dad06003.js";
+import { B as P } from "./chunks/index.ee15db35.js";
+import { g as H } from "./chunks/unique-id.a2a2b458.js";
+import { F as M } from "./chunks/fixed-scroller.7b42cb1e.js";
+import "./assets/index29.css";
+const Q = N({
   props: {
     /**
      * Title of the tab
@@ -30,39 +30,39 @@ const M = w({
     }
   },
   setup(e) {
-    const { disabled: o, withNotificationIndicator: t } = x(e), c = v();
-    m(q, (a) => {
-      c.value = a;
+    const { disabled: n, withNotificationIndicator: t } = L(e), c = _();
+    I(z, (f) => {
+      c.value = f;
     });
-    const b = L(() => c.value ?? e.title), T = h(B), _ = h(K), { id: d, unregisterTab: s } = T({ disabled: o, title: b, withNotificationIndicator: t });
-    return V(() => s()), { activeTabId: _, id: d, computedTitle: b };
+    const r = V(() => c.value ?? e.title), b = g(K), v = g(D), { id: d, unregisterTab: o } = b({ disabled: n, title: r, withNotificationIndicator: t });
+    return X(() => o()), { activeTabId: v, id: d, computedTitle: r };
   }
 });
-const Q = ["id", "aria-labelledby"];
-function W(e, o, t, c, r, b) {
-  return N((u(), p("div", {
+const W = ["id", "aria-labelledby"];
+function Z(e, n, t, c, T, r) {
+  return A((u(), p("div", {
     id: `${e.id}-tabpanel`,
     class: "b-tab",
     role: "tabpanel",
     "aria-labelledby": e.id
   }, [
-    e.activeTabId === e.id ? A(e.$slots, "default", { key: 0 }, void 0, !0) : C("", !0)
-  ], 8, Q)), [
-    [$, e.activeTabId === e.id]
+    e.activeTabId === e.id ? C(e.$slots, "default", { key: 0 }, void 0, !0) : $("", !0)
+  ], 8, W)), [
+    [B, e.activeTabId === e.id]
   ]);
 }
-const _e = /* @__PURE__ */ D(M, [["render", W], ["__scopeId", "data-v-5889fd13"]]), R = (e, o) => {
-  const t = e === 0 ? o.length - 1 : e - 1;
-  return o[t].disabled ? R(t, o) : t;
-}, S = (e, o) => {
-  const t = e === o.length - 1 ? 0 : e + 1;
-  return o[t].disabled ? S(t, o) : t;
+const ue = /* @__PURE__ */ R(Q, [["render", Z], ["__scopeId", "data-v-5889fd13"]]), S = (e, n) => {
+  const t = e === 0 ? n.length - 1 : e - 1;
+  return n[t].disabled ? S(t, n) : t;
+}, k = (e, n) => {
+  const t = e === n.length - 1 ? 0 : e + 1;
+  return n[t].disabled ? k(t, n) : t;
 };
-var I = /* @__PURE__ */ ((e) => (e.ACTIVE_TAB_INDEX = "update:active-tab-index", e))(I || {});
-const Z = w({
+var h = /* @__PURE__ */ ((e) => (e.ACTIVE_TAB_INDEX = "update:active-tab-index", e))(h || {});
+const ee = N({
   components: {
-    BentoTypography: z,
-    FixedScroller: H
+    BentoTypography: P,
+    FixedScroller: M
   },
   props: {
     /**
@@ -70,50 +70,51 @@ const Z = w({
      */
     activeTabIndex: { type: Number, default: 0 }
   },
-  emits: [I.ACTIVE_TAB_INDEX],
-  setup(e, { emit: o }) {
-    const t = v([]), c = v(null), r = v("");
-    m(K, r);
+  emits: [h.ACTIVE_TAB_INDEX],
+  setup(e, { emit: n }) {
+    const t = _([]), c = _(null), T = _(), r = _("");
+    I(D, r);
     const b = (a) => () => {
       var i;
-      t.value = (i = t.value) == null ? void 0 : i.filter(({ id: n }) => n !== a);
+      t.value = (i = t.value) == null ? void 0 : i.filter(({ id: s }) => s !== a);
     };
-    m(B, ({ title: a, disabled: i, withNotificationIndicator: n }) => {
-      const l = P("b-tab");
-      return t.value.push({ disabled: i, id: l, title: a, withNotificationIndicator: n }), { id: l, unregisterTab: b(l) };
+    I(K, ({ title: a, disabled: i, withNotificationIndicator: s }) => {
+      const l = H("b-tab");
+      return t.value.push({ disabled: i, id: l, title: a, withNotificationIndicator: s }), { id: l, unregisterTab: b(l) };
     });
-    const _ = (a) => {
+    const d = (a) => {
       if (a.code === "ArrowLeft" || a.code === "ArrowRight") {
         const i = t.value.find((l) => document.activeElement.id === l.id);
-        let n = t.value.indexOf(i);
-        a.code === "ArrowLeft" ? n = R(n, t.value) : a.code === "ArrowRight" && (n = S(n, t.value)), c.value.children[n].focus();
+        let s = t.value.indexOf(i);
+        a.code === "ArrowLeft" ? s = S(s, t.value) : a.code === "ArrowRight" && (s = k(s, t.value)), c.value.children[s].focus();
       }
     };
-    return X(
+    return Y(
       [() => e.activeTabIndex, t],
       ([a, i]) => {
-        Y(() => {
+        F(() => {
           var l;
-          const n = i[a];
-          r.value = n && !n.disabled ? n.id : (l = t.value.find(({ disabled: k }) => !k)) == null ? void 0 : l.id;
+          const s = i[a];
+          r.value = s && !s.disabled ? s.id : (l = t.value.find(({ disabled: x }) => !x)) == null ? void 0 : l.id;
         });
       },
       { immediate: !0 }
     ), {
       tabs: t,
       tablist: c,
+      tablistwrapper: T,
       activeTabId: r,
-      onKeydownTabsNavigation: _,
+      onKeydownTabsNavigation: d,
       handleTabChange: (a) => {
         r.value = a;
-        const i = t.value.findIndex(({ id: n }) => n === r.value);
-        o(I.ACTIVE_TAB_INDEX, i);
+        const i = t.value.findIndex(({ id: s }) => s === r.value);
+        n(h.ACTIVE_TAB_INDEX, i);
       },
       isDisabled: (a) => a ? "disabled" : !1
     };
   }
 });
-const ee = { class: "b-tabs" }, te = ["id", "aria-controls", "aria-selected", "tabindex", "disabled", "onClick", "onKeydown"], ae = { class: "b-tabs__tab-text" }, ne = {
+const te = { class: "b-tabs" }, ae = ["id", "aria-controls", "aria-selected", "tabindex", "disabled", "onClick", "onKeydown"], ne = { class: "b-tabs__tab-text" }, se = {
   key: 0,
   class: "b-tabs__tab-notification-dot",
   "aria-hidden": "true"
@@ -121,65 +122,66 @@ const ee = { class: "b-tabs" }, te = ["id", "aria-controls", "aria-selected", "t
   class: "b-tabs__tab-underline",
   "aria-hidden": "true"
 };
-function se(e, o, t, c, r, b) {
-  const T = g("bento-typography"), _ = g("fixed-scroller");
-  return u(), p("div", ee, [
-    y(_, {
+function ie(e, n, t, c, T, r) {
+  const b = y("bento-typography"), v = y("fixed-scroller");
+  return u(), p("div", te, [
+    E(v, {
+      ref: "tablistwrapper",
       condensed: "",
       "extra-padding-top": 5,
       class: "b-tabs__tab-list-wrapper"
     }, {
-      default: E(() => [
-        f("div", {
+      default: w(() => [
+        m("div", {
           ref: "tablist",
           class: "b-tabs__tab-list",
           role: "tablist",
-          onKeydown: o[0] || (o[0] = (...d) => e.onKeydownTabsNavigation && e.onKeydownTabsNavigation(...d))
+          onKeydown: n[0] || (n[0] = (...d) => e.onKeydownTabsNavigation && e.onKeydownTabsNavigation(...d))
         }, [
-          (u(!0), p(F, null, O(e.tabs, ({ disabled: d, id: s, title: a, withNotificationIndicator: i }) => (u(), p("button", {
-            id: s,
-            key: s,
+          (u(!0), p(O, null, G(e.tabs, ({ disabled: d, id: o, title: f, withNotificationIndicator: a }) => (u(), p("button", {
+            id: o,
+            key: o,
             role: "tab",
             type: "button",
-            class: G(["b-tabs__tab", {
-              "b-tabs__tab--active": e.activeTabId === s,
+            class: J(["b-tabs__tab", {
+              "b-tabs__tab--active": e.activeTabId === o,
               "b-tabs__tab--disabled": d
             }]),
-            "aria-controls": `${s}-tabpanel`,
-            "aria-selected": e.activeTabId === s ? "true" : "false",
-            tabindex: e.activeTabId === s && !d.value ? null : -1,
+            "aria-controls": `${o}-tabpanel`,
+            "aria-selected": e.activeTabId === o ? "true" : "false",
+            tabindex: e.activeTabId === o && !d.value ? null : -1,
             disabled: e.isDisabled(d),
-            onClick: (n) => e.handleTabChange(s),
-            onKeydown: J((n) => e.handleTabChange(s), ["enter", "space"])
+            onClick: (i) => e.handleTabChange(o),
+            onKeydown: U((i) => e.handleTabChange(o), ["enter", "space"])
           }, [
-            f("span", ae, [
-              y(T, {
+            m("span", ne, [
+              E(b, {
                 class: "b-tabs__tab-title",
                 el: "span",
                 variant: "body",
                 stronger: ""
               }, {
-                default: E(() => [
-                  U(j(a), 1)
+                default: w(() => [
+                  j(q(f), 1)
                 ]),
                 _: 2
               }, 1024),
-              i ? (u(), p("span", ne)) : C("", !0)
+              a ? (u(), p("span", se)) : $("", !0)
             ]),
-            N(f("span", oe, null, 512), [
-              [$, e.activeTabId === s]
+            A(m("span", oe, null, 512), [
+              [B, e.activeTabId === o]
             ])
-          ], 42, te))), 128))
+          ], 42, ae))), 128))
         ], 544)
       ]),
       _: 1
-    }),
-    A(e.$slots, "default", {}, void 0, !0)
+    }, 512),
+    C(e.$slots, "default", {}, void 0, !0)
   ]);
 }
-const ue = /* @__PURE__ */ D(Z, [["render", se], ["__scopeId", "data-v-b9c3ac7b"]]);
+const pe = /* @__PURE__ */ R(ee, [["render", ie], ["__scopeId", "data-v-1768d17c"]]);
 export {
-  _e as BentoTab,
-  ue as BentoTabs
+  ue as BentoTab,
+  pe as BentoTabs
 };
 //# sourceMappingURL=tabs.js.map

package/dist/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../vue2/src/components/tabs/components/tab.vue","../../vue2/src/components/tabs/tabs.utils.ts","../../vue2/src/components/tabs/tabs.types.ts","../../vue2/src/components/tabs/tabs.vue"],"sourcesContent":["<template>\n    <div v-show=\"activeTabId === id\" :id=\"`${id}-tabpanel`\" class=\"b-tab\" role=\"tabpanel\" :aria-labelledby=\"id\">\n        <template v-if=\"activeTabId === id\">\n            <slot />\n        </template>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, inject, onUnmounted, provide, ref, toRefs } from 'vue';\n    import {\n        EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY,\n        TABS_ACTIVE_TAB_ID_KEY,\n        TABS_REGISTER_TAB_INJECTION_KEY,\n    } from '../tabs.keys';\n    import { BentoTabsRegisterTab } from '../tabs.types';\n    import { BentoTabProvidedTitle } from './tab.types';\n\n    export default defineComponent({\n        props: {\n            /**\n             * Title of the tab\n             */\n            title: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Determines whether the tab is disabled\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays the tab with a notification indicator\n             */\n            withNotificationIndicator: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        setup(props) {\n            // External title injection\n            const { disabled, withNotificationIndicator } = toRefs(props);\n            const componentTitle = ref();\n            const setTitle: BentoTabProvidedTitle = (value: string) => {\n                componentTitle.value = value;\n            };\n            provide(EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY, setTitle);\n\n            const computedTitle = computed(() => (componentTitle.value ?? props.title) as string);\n\n            const registerTab: BentoTabsRegisterTab = inject(TABS_REGISTER_TAB_INJECTION_KEY);\n            const activeTabId = inject(TABS_ACTIVE_TAB_ID_KEY);\n\n            const { id, unregisterTab } = registerTab({ disabled, title: computedTitle, withNotificationIndicator });\n\n            onUnmounted(() => unregisterTab());\n\n            return { activeTabId, id, computedTitle };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./tab.scss\" />\n","import { BentoTab } from './components/tab.types';\n\nexport const getPreviousTabIndex = (activeTabIndex: number, tabsValue: BentoTab[]) => {\n    const newActiveTabIndex = activeTabIndex === 0 ? tabsValue.length - 1 : activeTabIndex - 1;\n    if (tabsValue[newActiveTabIndex].disabled) {\n        return getPreviousTabIndex(newActiveTabIndex, tabsValue);\n    }\n    return newActiveTabIndex;\n};\n\nexport const getNextTabIndex = (activeTabIndex: number, tabsValue: BentoTab[]) => {\n    const newActiveTabIndex = activeTabIndex === tabsValue.length - 1 ? 0 : activeTabIndex + 1;\n    if (tabsValue[newActiveTabIndex].disabled) {\n        return getNextTabIndex(newActiveTabIndex, tabsValue);\n    }\n    return newActiveTabIndex;\n};\n","import type { Ref } from 'vue';\n\nexport type BentoTabsRegisterTab = (props: {\n    disabled: Ref<boolean>;\n    title: Ref<string>;\n    withNotificationIndicator: Ref<boolean>;\n}) => { id: string; unregisterTab: () => void };\n\nexport enum BentoTabsEvent {\n    ACTIVE_TAB_INDEX = 'update:active-tab-index',\n}\n","<template>\n    <div class=\"b-tabs\">\n        <fixed-scroller condensed :extra-padding-top=\"5\" class=\"b-tabs__tab-list-wrapper\">\n            <div ref=\"tablist\" class=\"b-tabs__tab-list\" role=\"tablist\" @keydown=\"onKeydownTabsNavigation\">\n                <button\n                    v-for=\"{ disabled, id, title, withNotificationIndicator } in tabs\"\n                    :id=\"id\"\n                    :key=\"id\"\n                    role=\"tab\"\n                    type=\"button\"\n                    class=\"b-tabs__tab\"\n                    :class=\"{\n                        'b-tabs__tab--active': activeTabId === id,\n                        'b-tabs__tab--disabled': disabled,\n                    }\"\n                    :aria-controls=\"`${id}-tabpanel`\"\n                    :aria-selected=\"activeTabId === id ? 'true' : 'false'\"\n                    :tabindex=\"activeTabId === id && !disabled.value ? null : -1\"\n                    :disabled=\"isDisabled(disabled)\"\n                    @click=\"handleTabChange(id)\"\n                    @keydown.enter.space=\"handleTabChange(id)\"\n                >\n                    <span class=\"b-tabs__tab-text\">\n                        <bento-typography class=\"b-tabs__tab-title\" el=\"span\" variant=\"body\" stronger>\n                            {{ title }}\n                        </bento-typography>\n                        <span\n                            v-if=\"withNotificationIndicator\"\n                            class=\"b-tabs__tab-notification-dot\"\n                            aria-hidden=\"true\"\n                        ></span>\n                    </span>\n                    <span v-show=\"activeTabId === id\" class=\"b-tabs__tab-underline\" aria-hidden=\"true\"></span>\n                </button>\n            </div>\n        </fixed-scroller>\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, nextTick, provide, ref, Ref, watch } from 'vue';\n\n    // components\n    import { BentoTypography } from '@/components/typography';\n    import { FixedScroller } from '@/internal';\n\n    // utils\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { getNextTabIndex, getPreviousTabIndex } from './tabs.utils';\n\n    // types\n    import { BentoTab } from './components/tab.types';\n    import { BentoTabsEvent, BentoTabsRegisterTab } from './tabs.types';\n\n    // keys\n    import { TABS_ACTIVE_TAB_ID_KEY, TABS_REGISTER_TAB_INJECTION_KEY } from './tabs.keys';\n    import { Booleanish } from '@/types';\n\n    /**\n     * Tabs are used to navigate between different, but related content views within a page.\n     * This component conforms to the official WAI-ARIA guidelines for tabs: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n     *\n     * @example\n     * import { BentoTabs, BentoTab } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoTabs, BentoTab },\n     *     template: `\n     *         <bento-tabs v-bind=\"$props\">\n     *             <bento-tab title=\"Maria Ahlefeldt\">\n     *                 (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark.\n     *             </bento-tab>\n     *             <bento-tab title=\"Carl Andersen\">\n     *                 (29 April 1847 - 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen.\n     *             </bento-tab>\n     *             <bento-tab title=\"Karl Truffel\">\n     *                 (1 March 1981 - 7 November 1992) was a Danish dog and commander born in Berlin, son of the machinist Tom Jahoor Truffel.\n     *             </bento-tab>\n     *             <bento-tab title=\"Maria Ahlefeldt\" :disabled=\"true\">\n     *                 (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark.\n     *             </bento-tab>\n     *         </bento-tabs>\n     *     `\n     * };\n     */\n\n    // component\n    export default defineComponent({\n        components: {\n            BentoTypography,\n            FixedScroller,\n        },\n        props: {\n            /**\n             * Sets the active tab by its index (0 being the first tab item).\n             */\n            activeTabIndex: { type: Number, default: 0 },\n        },\n        emits: [BentoTabsEvent.ACTIVE_TAB_INDEX],\n        setup(props, { emit }) {\n            const tabs: Ref<BentoTab[]> = ref([]);\n            const tablist = ref(null);\n            const activeTabId = ref('');\n\n            provide(TABS_ACTIVE_TAB_ID_KEY, activeTabId);\n\n            // unregister tab if removed / destroyed\n            const unregisterTab = (tabIdToRemove: string) => () => {\n                tabs.value = tabs.value?.filter(({ id }) => id !== tabIdToRemove);\n            };\n\n            // register tab\n            const registerTab: BentoTabsRegisterTab = ({ title, disabled, withNotificationIndicator }) => {\n                const id = generateUid('b-tab');\n\n                // add tab to tabs\n                tabs.value.push({ disabled, id, title, withNotificationIndicator });\n\n                // return values to the Tab component\n                return { id, unregisterTab: unregisterTab(id) };\n            };\n\n            // provide activeTab and registerTab to tab items\n            provide(TABS_REGISTER_TAB_INJECTION_KEY, registerTab);\n\n            // keyboard navigation\n            const onKeydownTabsNavigation = (e: KeyboardEvent) => {\n                if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') {\n                    // find tab that is focussed\n                    const activeTab = tabs.value.find(tab => document.activeElement.id === tab.id);\n                    let activeTabIndex = tabs.value.indexOf(activeTab);\n\n                    // conditionally increase or decrease the\n                    if (e.code === 'ArrowLeft') {\n                        activeTabIndex = getPreviousTabIndex(activeTabIndex, tabs.value);\n                    } else if (e.code === 'ArrowRight') {\n                        activeTabIndex = getNextTabIndex(activeTabIndex, tabs.value);\n                    }\n\n                    // focus new active tab\n                    tablist.value.children[activeTabIndex].focus();\n                }\n            };\n\n            watch(\n                [() => props.activeTabIndex, tabs],\n                ([index, currentTabs]) => {\n                    nextTick(() => {\n                        const tab = currentTabs[index];\n                        activeTabId.value =\n                            tab && !tab.disabled ? tab.id : tabs.value.find(({ disabled }) => !disabled)?.id;\n                    });\n                },\n                { immediate: true }\n            );\n\n            const handleTabChange = (tabId: string) => {\n                activeTabId.value = tabId;\n                const activeIndex = tabs.value.findIndex(({ id }) => id === activeTabId.value);\n                emit(BentoTabsEvent.ACTIVE_TAB_INDEX, activeIndex);\n            };\n\n            const isDisabled = (isDisabledTab: Ref<boolean>): Booleanish =>\n                (isDisabledTab ? 'disabled' : false) as Booleanish;\n\n            return {\n                tabs,\n                tablist,\n                activeTabId,\n                onKeydownTabsNavigation,\n                handleTabChange,\n                isDisabled,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./tabs.scss\" />\n"],"names":["_sfc_main$1","defineComponent","props","disabled","withNotificationIndicator","toRefs","componentTitle","ref","provide","EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY","value","computedTitle","computed","registerTab","inject","TABS_REGISTER_TAB_INJECTION_KEY","activeTabId","TABS_ACTIVE_TAB_ID_KEY","id","unregisterTab","onUnmounted","_ctx","renderSlot","createCommentVNode","_hoisted_1$1","getPreviousTabIndex","activeTabIndex","tabsValue","newActiveTabIndex","getNextTabIndex","BentoTabsEvent","BentoTabsEvent2","_sfc_main","BentoTypography","FixedScroller","emit","tabs","tablist","tabIdToRemove","_a","title","generateUid","onKeydownTabsNavigation","e","activeTab","tab","watch","index","currentTabs","nextTick","tabId","activeIndex","isDisabledTab","createVNode","_component_fixed_scroller","createElementVNode","_cache","args","openBlock","createElementBlock","Fragment","renderList","normalizeClass","$event","withKeys","_component_bento_typography","_hoisted_4"],"mappings":"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"}
+{"version":3,"file":"tabs.js","sources":["../../vue2/src/components/tabs/components/tab.vue","../../vue2/src/components/tabs/tabs.utils.ts","../../vue2/src/components/tabs/tabs.types.ts","../../vue2/src/components/tabs/tabs.vue"],"sourcesContent":["<template>\n    <div v-show=\"activeTabId === id\" :id=\"`${id}-tabpanel`\" class=\"b-tab\" role=\"tabpanel\" :aria-labelledby=\"id\">\n        <template v-if=\"activeTabId === id\">\n            <slot />\n        </template>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, inject, onUnmounted, provide, ref, toRefs } from 'vue';\n    import {\n        EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY,\n        TABS_ACTIVE_TAB_ID_KEY,\n        TABS_REGISTER_TAB_INJECTION_KEY,\n    } from '../tabs.keys';\n    import { BentoTabsRegisterTab } from '../tabs.types';\n    import { BentoTabProvidedTitle } from './tab.types';\n\n    export default defineComponent({\n        props: {\n            /**\n             * Title of the tab\n             */\n            title: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Determines whether the tab is disabled\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays the tab with a notification indicator\n             */\n            withNotificationIndicator: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        setup(props) {\n            // External title injection\n            const { disabled, withNotificationIndicator } = toRefs(props);\n            const componentTitle = ref();\n            const setTitle: BentoTabProvidedTitle = (value: string) => {\n                componentTitle.value = value;\n            };\n            provide(EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY, setTitle);\n\n            const computedTitle = computed(() => (componentTitle.value ?? props.title) as string);\n\n            const registerTab: BentoTabsRegisterTab = inject(TABS_REGISTER_TAB_INJECTION_KEY);\n            const activeTabId = inject(TABS_ACTIVE_TAB_ID_KEY);\n\n            const { id, unregisterTab } = registerTab({ disabled, title: computedTitle, withNotificationIndicator });\n\n            onUnmounted(() => unregisterTab());\n\n            return { activeTabId, id, computedTitle };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./tab.scss\" />\n","import { BentoTab } from './components/tab.types';\n\nexport const getPreviousTabIndex = (activeTabIndex: number, tabsValue: BentoTab[]) => {\n    const newActiveTabIndex = activeTabIndex === 0 ? tabsValue.length - 1 : activeTabIndex - 1;\n    if (tabsValue[newActiveTabIndex].disabled) {\n        return getPreviousTabIndex(newActiveTabIndex, tabsValue);\n    }\n    return newActiveTabIndex;\n};\n\nexport const getNextTabIndex = (activeTabIndex: number, tabsValue: BentoTab[]) => {\n    const newActiveTabIndex = activeTabIndex === tabsValue.length - 1 ? 0 : activeTabIndex + 1;\n    if (tabsValue[newActiveTabIndex].disabled) {\n        return getNextTabIndex(newActiveTabIndex, tabsValue);\n    }\n    return newActiveTabIndex;\n};\n","import type { Ref } from 'vue';\n\nexport type BentoTabsRegisterTab = (props: {\n    disabled: Ref<boolean>;\n    title: Ref<string>;\n    withNotificationIndicator: Ref<boolean>;\n}) => { id: string; unregisterTab: () => void };\n\nexport enum BentoTabsEvent {\n    ACTIVE_TAB_INDEX = 'update:active-tab-index',\n}\n","<template>\n    <div class=\"b-tabs\">\n        <fixed-scroller ref=\"tablistwrapper\" condensed :extra-padding-top=\"5\" class=\"b-tabs__tab-list-wrapper\">\n            <div ref=\"tablist\" class=\"b-tabs__tab-list\" role=\"tablist\" @keydown=\"onKeydownTabsNavigation\">\n                <button\n                    v-for=\"{ disabled, id, title, withNotificationIndicator } in tabs\"\n                    :id=\"id\"\n                    :key=\"id\"\n                    role=\"tab\"\n                    type=\"button\"\n                    class=\"b-tabs__tab\"\n                    :class=\"{\n                        'b-tabs__tab--active': activeTabId === id,\n                        'b-tabs__tab--disabled': disabled,\n                    }\"\n                    :aria-controls=\"`${id}-tabpanel`\"\n                    :aria-selected=\"activeTabId === id ? 'true' : 'false'\"\n                    :tabindex=\"activeTabId === id && !disabled.value ? null : -1\"\n                    :disabled=\"isDisabled(disabled)\"\n                    @click=\"handleTabChange(id)\"\n                    @keydown.enter.space=\"handleTabChange(id)\"\n                >\n                    <span class=\"b-tabs__tab-text\">\n                        <bento-typography class=\"b-tabs__tab-title\" el=\"span\" variant=\"body\" stronger>\n                            {{ title }}\n                        </bento-typography>\n                        <span\n                            v-if=\"withNotificationIndicator\"\n                            class=\"b-tabs__tab-notification-dot\"\n                            aria-hidden=\"true\"\n                        ></span>\n                    </span>\n                    <span v-show=\"activeTabId === id\" class=\"b-tabs__tab-underline\" aria-hidden=\"true\"></span>\n                </button>\n            </div>\n        </fixed-scroller>\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, nextTick, provide, ref, Ref, watch } from 'vue';\n\n    // components\n    import { BentoTypography } from '@/components/typography';\n    import { FixedScroller } from '@/internal';\n\n    // utils\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { getNextTabIndex, getPreviousTabIndex } from './tabs.utils';\n\n    // types\n    import { BentoTab } from './components/tab.types';\n    import { BentoTabsEvent, BentoTabsRegisterTab } from './tabs.types';\n\n    // keys\n    import { TABS_ACTIVE_TAB_ID_KEY, TABS_REGISTER_TAB_INJECTION_KEY } from './tabs.keys';\n    import { Booleanish } from '@/types';\n\n    /**\n     * Tabs are used to navigate between different, but related content views within a page.\n     * This component conforms to the official WAI-ARIA guidelines for tabs: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n     *\n     * @example\n     * import { BentoTabs, BentoTab } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoTabs, BentoTab },\n     *     template: `\n     *         <bento-tabs v-bind=\"$props\">\n     *             <bento-tab title=\"Maria Ahlefeldt\">\n     *                 (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark.\n     *             </bento-tab>\n     *             <bento-tab title=\"Carl Andersen\">\n     *                 (29 April 1847 - 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen.\n     *             </bento-tab>\n     *             <bento-tab title=\"Karl Truffel\">\n     *                 (1 March 1981 - 7 November 1992) was a Danish dog and commander born in Berlin, son of the machinist Tom Jahoor Truffel.\n     *             </bento-tab>\n     *             <bento-tab title=\"Maria Ahlefeldt\" :disabled=\"true\">\n     *                 (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark.\n     *             </bento-tab>\n     *         </bento-tabs>\n     *     `\n     * };\n     */\n\n    // component\n    export default defineComponent({\n        components: {\n            BentoTypography,\n            FixedScroller,\n        },\n        props: {\n            /**\n             * Sets the active tab by its index (0 being the first tab item).\n             */\n            activeTabIndex: { type: Number, default: 0 },\n        },\n        emits: [BentoTabsEvent.ACTIVE_TAB_INDEX],\n        setup(props, { emit }) {\n            const tabs: Ref<BentoTab[]> = ref([]);\n            const tablist = ref(null);\n            const tablistwrapper = ref<InstanceType<typeof FixedScroller>>();\n            const activeTabId = ref('');\n\n            provide(TABS_ACTIVE_TAB_ID_KEY, activeTabId);\n\n            // unregister tab if removed / destroyed\n            const unregisterTab = (tabIdToRemove: string) => () => {\n                tabs.value = tabs.value?.filter(({ id }) => id !== tabIdToRemove);\n            };\n\n            // register tab\n            const registerTab: BentoTabsRegisterTab = ({ title, disabled, withNotificationIndicator }) => {\n                const id = generateUid('b-tab');\n\n                // add tab to tabs\n                tabs.value.push({ disabled, id, title, withNotificationIndicator });\n\n                // return values to the Tab component\n                return { id, unregisterTab: unregisterTab(id) };\n            };\n\n            // provide activeTab and registerTab to tab items\n            provide(TABS_REGISTER_TAB_INJECTION_KEY, registerTab);\n\n            // keyboard navigation\n            const onKeydownTabsNavigation = (e: KeyboardEvent) => {\n                if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') {\n                    // find tab that is focussed\n                    const activeTab = tabs.value.find(tab => document.activeElement.id === tab.id);\n                    let activeTabIndex = tabs.value.indexOf(activeTab);\n\n                    // conditionally increase or decrease the\n                    if (e.code === 'ArrowLeft') {\n                        activeTabIndex = getPreviousTabIndex(activeTabIndex, tabs.value);\n                    } else if (e.code === 'ArrowRight') {\n                        activeTabIndex = getNextTabIndex(activeTabIndex, tabs.value);\n                    }\n\n                    // focus new active tab\n                    tablist.value.children[activeTabIndex].focus();\n                }\n            };\n\n            watch(\n                [() => props.activeTabIndex, tabs],\n                ([index, currentTabs]) => {\n                    nextTick(() => {\n                        const tab = currentTabs[index];\n                        activeTabId.value =\n                            tab && !tab.disabled ? tab.id : tabs.value.find(({ disabled }) => !disabled)?.id;\n                    });\n                },\n                { immediate: true }\n            );\n\n            const handleTabChange = (tabId: string) => {\n                activeTabId.value = tabId;\n                const activeIndex = tabs.value.findIndex(({ id }) => id === activeTabId.value);\n                emit(BentoTabsEvent.ACTIVE_TAB_INDEX, activeIndex);\n            };\n\n            const isDisabled = (isDisabledTab: Ref<boolean>): Booleanish =>\n                (isDisabledTab ? 'disabled' : false) as Booleanish;\n\n            return {\n                tabs,\n                tablist,\n                tablistwrapper,\n                activeTabId,\n                onKeydownTabsNavigation,\n                handleTabChange,\n                isDisabled,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./tabs.scss\" />\n"],"names":["_sfc_main$1","defineComponent","props","disabled","withNotificationIndicator","toRefs","componentTitle","ref","provide","EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY","value","computedTitle","computed","registerTab","inject","TABS_REGISTER_TAB_INJECTION_KEY","activeTabId","TABS_ACTIVE_TAB_ID_KEY","id","unregisterTab","onUnmounted","_ctx","renderSlot","createCommentVNode","_hoisted_1$1","getPreviousTabIndex","activeTabIndex","tabsValue","newActiveTabIndex","getNextTabIndex","BentoTabsEvent","BentoTabsEvent2","_sfc_main","BentoTypography","FixedScroller","emit","tabs","tablist","tablistwrapper","tabIdToRemove","_a","title","generateUid","onKeydownTabsNavigation","e","activeTab","tab","watch","index","currentTabs","nextTick","tabId","activeIndex","isDisabledTab","openBlock","createElementBlock","_hoisted_1","createVNode","_component_fixed_scroller","createElementVNode","_cache","args","Fragment","renderList","normalizeClass","$event","withKeys","_component_bento_typography","_hoisted_4"],"mappings":"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"}

package/dist/tag.js

@@ -1,10 +1,10 @@
 import { defineComponent as d, computed as o, resolveComponent as p, resolveDirective as m, withDirectives as _, openBlock as b, createElementBlock as v, normalizeClass as f, createVNode as g, withCtx as h, createTextVNode as y, toDisplayString as E } from "vue";
-import { B as C } from "./chunks/index.a3d60e4f.js";
-import { b as S } from "./chunks/tooltip.1084d92b.js";
+import { B as C } from "./chunks/index.ee15db35.js";
+import { b as S } from "./chunks/tooltip.36172265.js";
 import { u as x } from "./chunks/aria-label.ac9651a5.js";
 import { g as c } from "./chunks/get-slot-text.bead058f.js";
 import { _ as $ } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index33.css";
+import "./assets/index35.css";
 var n = /* @__PURE__ */ ((e) => (e.GREY = "grey", e.BLUE = "blue", e.GREEN = "green", e.ORANGE = "orange", e.RED = "red", e.WHITE = "white", e))(n || {});
 const w = d({
   name: "bento-tag",

package/dist/textarea.js

@@ -1,14 +1,14 @@
 import { openBlock as i, createElementBlock as E, mergeProps as fe, toDisplayString as F, createCommentVNode as b, createElementVNode as C, defineComponent as ve, useAttrs as pe, toRefs as K, ref as f, toRef as he, computed as s, watch as N, nextTick as me, onMounted as ge, onUnmounted as ye, normalizeClass as L, unref as t, normalizeStyle as V, createBlock as m, withCtx as x, createTextVNode as z, createVNode as w, withKeys as H } from "vue";
-import { a as _e } from "./chunks/button.60dad578.js";
-import { B as O } from "./chunks/index.a3d60e4f.js";
+import { a as _e } from "./chunks/button.ae4760cd.js";
+import { B as O } from "./chunks/index.ee15db35.js";
 import { _ as G } from "./chunks/_plugin-vue_export-helper.dad06003.js";
 import { g as Le } from "./chunks/unique-id.a2a2b458.js";
 import { o as q } from "./chunks/resize.a041304d.js";
 import { u as xe } from "./chunks/aria-label.ac9651a5.js";
 import { u as Ce } from "./chunks/i18n.f7e6533e.js";
 import { u as Ee } from "./chunks/use-form-layout-loading.d03e5d48.js";
-import { F as Se, E as Y } from "./chunks/error-message.3fb5573a.js";
-import "./assets/index34.css";
+import { F as Se, E as Y } from "./chunks/error-message.d2bdeb80.js";
+import "./assets/index28.css";
 let Z = 0;
 const Ae = {
   beforeCreate() {

package/dist/timeline.js

@@ -1,19 +1,19 @@
 import { defineComponent as ie, computed as d, ref as D, toRefs as _e, provide as q, resolveComponent as N, openBlock as i, createElementBlock as f, createBlock as S, withCtx as y, createTextVNode as T, toDisplayString as I, createCommentVNode as _, createVNode as w, createElementVNode as b, renderSlot as ne, mergeProps as z, inject as J, onUnmounted as fe, normalizeClass as P, Fragment as Y, renderList as pe, pushScopeId as ve, popScopeId as he } from "vue";
-import { a as oe } from "./chunks/button.60dad578.js";
+import { a as oe } from "./chunks/button.ae4760cd.js";
 import { BentoTextarea as be } from "./textarea.js";
 import { u as ae } from "./chunks/i18n.f7e6533e.js";
-import { B as ge } from "./chunks/button-actions.642b37de.js";
+import { B as ge } from "./chunks/button-actions.82163994.js";
 import { _ as H } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { B as ye } from "./chunks/index.146f967e.js";
-import { B as Ie } from "./chunks/index.6e0e9d21.js";
+import { B as ye } from "./chunks/index.f9d081d2.js";
+import { B as Ie } from "./chunks/index.eb38a6c4.js";
 import { BentoTag as Ne } from "./tag.js";
-import { B as Ee, d as Te } from "./chunks/index.a3d60e4f.js";
-import { B as we, a as Se, S as Ce } from "./chunks/index.c8ffede1.js";
+import { B as Ee, d as Te } from "./chunks/index.ee15db35.js";
+import { B as we, a as Se, S as Ce } from "./chunks/index.2fcd1233.js";
 import { g as Me } from "./chunks/unique-id.a2a2b458.js";
 import { u as ke } from "./chunks/use-has-slot.4d98bf29.js";
 import { r as Le, e as Ae, t as B, g as W } from "./chunks/index.f55fdc32.js";
 import { c as Oe, a as $e } from "./chunks/index.86453263.js";
-import "./assets/index35.css";
+import "./assets/index32.css";
 var Z = 1e3 * 60, j = 60 * 24, G = j * 30, Q = j * 365;
 function X(e, p) {
   var o = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};

package/dist/toast.js

@@ -1,9 +1,9 @@
 import { defineComponent as N, openBlock as l, createElementBlock as A, createElementVNode as G, createVNode as k, unref as o, withCtx as B, createTextVNode as M, toDisplayString as R, createBlock as T, createCommentVNode as b, ref as u, computed as h, watch as w, onMounted as X, nextTick as J, normalizeStyle as K, TransitionGroup as Q, Fragment as Z, renderList as F, mergeProps as tt } from "vue";
-import { u as U } from "./chunks/use-bento-toast-controller.98d8613c.js";
-import { C as et } from "./chunks/cross-small.9bc6a02f.js";
+import { u as U } from "./chunks/use-bento-toast-controller.3dc4e113.js";
+import { C as et } from "./chunks/cross-small.b85406fe.js";
 import { u as st } from "./chunks/i18n.f7e6533e.js";
-import { a as H } from "./chunks/button.60dad578.js";
-import { B as at } from "./chunks/index.a3d60e4f.js";
+import { a as H } from "./chunks/button.ae4760cd.js";
+import { B as at } from "./chunks/index.ee15db35.js";
 import { _ as O } from "./chunks/_plugin-vue_export-helper.dad06003.js";
 import "./assets/index36.css";
 const P = {

package/dist/toggle.js

@@ -1,13 +1,13 @@
 import { defineComponent as $, ref as y, computed as p, toRefs as V, watch as D, resolveComponent as _, openBlock as n, createElementBlock as k, normalizeClass as T, withDirectives as w, createElementVNode as b, vModelCheckbox as O, createBlock as g, createCommentVNode as i, withCtx as h, renderSlot as v } from "vue";
-import { C as N } from "./chunks/checkmark-small.d7e31e5e.js";
-import { B as U } from "./chunks/index.a3d60e4f.js";
+import { C as N } from "./chunks/checkmark-small.c79220d9.js";
+import { B as U } from "./chunks/index.ee15db35.js";
 import { g as j } from "./chunks/unique-id.a2a2b458.js";
 import { u as z } from "./chunks/use-default-slot-validator.1169c221.js";
 import { u as H } from "./chunks/use-has-slot.4d98bf29.js";
 import { g as m } from "./chunks/get-slot-text.bead058f.js";
 import { u as M } from "./chunks/aria-label.ac9651a5.js";
 import { _ as P } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index37.css";
+import "./assets/index34.css";
 var C = /* @__PURE__ */ ((e) => (e.LABEL_FIRST = "label-first", e))(C || {}), d = /* @__PURE__ */ ((e) => (e.BEFORE = "before", e.AFTER = "after", e))(d || {});
 const q = $({
   name: "bento-toggle",