@adyen/bento-vue2 1.95.0 → 1.96.1

package/dist/chunks/tab.YQXssvyU.js

@@ -1,229 +0,0 @@
-import { defineComponent as A, ref as p, provide as g, watch as E, nextTick as k, computed as m, unref as $, onUnmounted as N, toRefs as U, inject as B } from "vue";
-import { B as j } from "./typography.C8lPlsbD.js";
-import { B as G } from "./tag.CbNFG45Y.js";
-import { C as J } from "./cross-circle-fill.DTDtgLMf.js";
-import { u as z } from "./index.B6WW_F-J.js";
-import { g as q } from "./generate-uid.NJ8tVoha.js";
-import { T as R, a as O, E as H } from "./tabs.keys.B4qGhjp2.js";
-import { F as M } from "./fixed-scroller.4xAzt_OI.js";
-import { n as S } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import "../assets/tab.css";
-const F = (n, t) => {
-  const a = n === 0 ? t.length - 1 : n - 1, e = t[a];
-  return e.disabled || e.hidden ? F(a, t) : a;
-}, D = (n, t) => {
-  const a = n === t.length - 1 ? 0 : n + 1, e = t[a];
-  return e.disabled || e.hidden ? D(a, t) : a;
-}, Q = {
-  "en-US": {
-    errorCount: "error | errors"
-  }
-};
-var w = /* @__PURE__ */ ((n) => (n.ACTIVE_TAB_INDEX = "update:active-tab-index", n))(w || {});
-const V = A({
-  i18n: { messages: Q },
-  components: {
-    BentoTag: G,
-    BentoTypography: j,
-    CrossCircleFillIcon: J,
-    FixedScroller: M
-  },
-  props: {
-    /**
-     * Sets the active tab by its index (0 being the first tab item).
-     */
-    activeTabIndex: { type: Number, default: 0 },
-    /*
-     * Renders the tab with a sticky positioning.
-     */
-    sticky: { type: Boolean, default: !1 },
-    /**
-     * Additional configurable options for tabs rendered with a sticky positioning.
-     * It must be an object of type {@see BentoStickyTabsOption}
-     * @property {Ref<number>} stickyOptions.top - Top position the tabs should take up when rendered as sticky.
-     */
-    stickyOptions: { type: Object, default: null }
-  },
-  emits: [w.ACTIVE_TAB_INDEX],
-  setup(n, { emit: t }) {
-    const { tc: a } = z(), e = p([]), b = p(null), u = p(), l = p(""), r = p(!1);
-    let c;
-    g(R, l);
-    const _ = (s) => () => {
-      var i;
-      e.value = (i = e.value) == null ? void 0 : i.filter(({ id: o }) => o !== s);
-    };
-    g(O, ({
-      title: s,
-      disabled: i,
-      errorCounter: o,
-      withNotificationIndicator: f,
-      counter: h,
-      hidden: X,
-      setElementRef: Y
-    }) => {
-      const C = q("b-tab");
-      return e.value.push({
-        counter: h,
-        disabled: i,
-        errorCounter: o,
-        hidden: X,
-        id: C,
-        title: s,
-        withNotificationIndicator: f,
-        setElementRef: Y
-      }), { id: C, unregisterTab: _(C) };
-    });
-    const d = (s) => {
-      if (s.code === "ArrowLeft" || s.code === "ArrowRight") {
-        const i = e.value.find((f) => document.activeElement.id === f.id);
-        let o = e.value.indexOf(i);
-        s.code === "ArrowLeft" ? o = F(o, e.value) : s.code === "ArrowRight" && (o = D(o, e.value)), b.value.children[o].focus();
-      }
-    };
-    E(
-      [() => n.activeTabIndex, e],
-      ([s, i]) => {
-        k(() => {
-          var f;
-          const o = i[s];
-          l.value = o && !o.disabled ? o.id : (f = e.value.find(({ disabled: h }) => !h)) == null ? void 0 : f.id;
-        });
-      },
-      { immediate: !0 }
-    );
-    const I = (s) => {
-      l.value = s;
-      const i = e.value.findIndex(({ id: o }) => o === l.value);
-      t(w.ACTIVE_TAB_INDEX, i);
-    }, y = (s) => s ? "disabled" : !1, T = m(() => {
-      var s;
-      return (s = n.stickyOptions) != null && s.top ? $(n.stickyOptions.top) : 0;
-    }), K = m(() => n.sticky && T.value > 0 ? !0 : r.value), x = () => {
-      c && (c.disconnect(), c = null), r.value = !1;
-    }, P = (s) => {
-      n.sticky && T.value === 0 && (c = new IntersectionObserver(
-        ([i]) => {
-          r.value = i.intersectionRatio < 1;
-        },
-        { threshold: [1] }
-      ), c.observe(s));
-    };
-    E(
-      [() => n.sticky, u, T],
-      ([s, i]) => {
-        x(), s && i && k(() => P(i));
-      },
-      { immediate: !0 }
-    ), N(() => {
-      x();
-    });
-    const L = m(() => ({
-      "b-tabs__tab-list-wrapper--sticky": n.sticky,
-      "b-tabs__tab-list-wrapper--pinned": K.value
-    })), W = m(
-      () => {
-        var s;
-        return (
-          // This helps us detect when the tabs are pinned without calculations on the tabs positions because it makes the tabs intersect by 1 pixel with the element on top of it, which is getting aught by the intersection observer.
-          // Followed this example: https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/
-          n.sticky ? {
-            top: `${(((s = n.stickyOptions) == null ? void 0 : s.top) ?? 0) - 1}px`
-          } : {}
-        );
-      }
-    );
-    return {
-      tc: a,
-      tabs: e,
-      tablist: b,
-      tablistwrapper: u,
-      activeTabId: l,
-      tablistWrapperConditionalClasses: L,
-      tablistWrapperStyles: W,
-      onKeydownTabsNavigation: d,
-      handleTabChange: I,
-      isDisabled: y
-    };
-  }
-});
-var Z = function() {
-  var t = this, a = t._self._c;
-  return t._self._setupProxy, a("div", { staticClass: "b-tabs" }, [a("div", { ref: "tablistwrapper", staticClass: "b-tabs__tab-list-wrapper", class: t.tablistWrapperConditionalClasses, style: t.tablistWrapperStyles }, [a("fixed-scroller", { attrs: { condensed: "", "extra-padding-top": 2 } }, [a("div", { ref: "tablist", staticClass: "b-tabs__tab-list", attrs: { role: "tablist" }, on: { keydown: t.onKeydownTabsNavigation } }, t._l(t.tabs, function({
-    counter: e,
-    disabled: b,
-    errorCounter: u,
-    hidden: l,
-    id: r,
-    title: c,
-    withNotificationIndicator: _,
-    setElementRef: v
-  }) {
-    return a("button", { directives: [{ name: "show", rawName: "v-show", value: !l, expression: "!hidden" }], key: r, ref: v, refInFor: !0, staticClass: "b-tabs__tab", class: {
-      "b-tabs__tab--active": t.activeTabId === r,
-      "b-tabs__tab--disabled": b
-    }, attrs: { id: r, role: "tab", type: "button", "aria-controls": `${r}-tabpanel`, "aria-hidden": l ? "true" : "false", "aria-selected": t.activeTabId === r ? "true" : "false", tabindex: t.activeTabId === r && !b.value ? null : -1, disabled: t.isDisabled(b) }, on: { click: function(d) {
-      return t.handleTabChange(r);
-    }, keydown: function(d) {
-      return !d.type.indexOf("key") && t._k(d.keyCode, "enter", 13, d.key, "Enter") && t._k(d.keyCode, "space", 32, d.key, [" ", "Spacebar"]) ? null : t.handleTabChange(r);
-    } } }, [a("span", { staticClass: "b-tabs__tab-text" }, [a("bento-typography", { staticClass: "b-tabs__tab-title", attrs: { el: "span", variant: "body", stronger: "" } }, [t._v(" " + t._s(c) + " ")]), e != null ? a("bento-typography", { staticClass: "b-tabs__tab-counter", class: {
-      "b-tabs__tab-counter--active": t.activeTabId === r
-    }, attrs: { el: "span", variant: "body", stronger: "" } }, [t._v(" " + t._s(e) + " ")]) : t._e(), u != null ? a("bento-tag", { staticClass: "b-tabs__tab-error-counter", attrs: { variant: "red" }, scopedSlots: t._u([{ key: "icon", fn: function() {
-      return [a("cross-circle-fill-icon", { attrs: { "aria-hidden": "true" } })];
-    }, proxy: !0 }], null, !0) }, [a("span", [t._v(t._s(u))]), a("span", { staticClass: "b-tabs__visually-hidden" }, [t._v(t._s(t.tc("errorCount", u)))])]) : t._e(), _ ? a("span", { staticClass: "b-tabs__tab-notification-dot", attrs: { "aria-hidden": "true" } }) : t._e()], 1), a("span", { directives: [{ name: "show", rawName: "v-show", value: t.activeTabId === r, expression: "activeTabId === id" }], staticClass: "b-tabs__tab-underline", attrs: { "aria-hidden": "true" } })]);
-  }), 0)])], 1), t._t("default")], 2);
-}, tt = [], et = /* @__PURE__ */ S(
-  V,
-  Z,
-  tt,
-  !1,
-  null,
-  "c941b744"
-);
-const vt = et.exports, at = {
-  name: "bento-tab"
-}, st = /* @__PURE__ */ A({
-  ...at,
-  props: {
-    counter: { default: null },
-    disabled: { type: Boolean, default: !1 },
-    errorCounter: { default: null },
-    hidden: { type: Boolean, default: !1 },
-    title: null,
-    withNotificationIndicator: { type: Boolean, default: !1 },
-    setElementRef: { type: Function, default: void 0 }
-  },
-  setup(n) {
-    const t = n, { counter: a, disabled: e, errorCounter: b, hidden: u, withNotificationIndicator: l } = U(t), r = p(), c = (T) => {
-      r.value = T;
-    };
-    g(H, c);
-    const _ = m(() => r.value ?? t.title), v = B(O), d = B(R), { id: I, unregisterTab: y } = v({
-      counter: a,
-      disabled: e,
-      errorCounter: b,
-      hidden: u,
-      title: _,
-      withNotificationIndicator: l,
-      setElementRef: t.setElementRef
-    });
-    return N(() => y()), { __sfc: !0, props: t, counter: a, disabled: e, errorCounter: b, hidden: u, withNotificationIndicator: l, componentTitle: r, setTitle: c, computedTitle: _, registerTab: v, activeTabId: d, id: I, unregisterTab: y };
-  }
-});
-var nt = function() {
-  var t = this, a = t._self._c, e = t._self._setupProxy;
-  return a("div", { directives: [{ name: "show", rawName: "v-show", value: e.activeTabId === e.id, expression: "activeTabId === id" }], staticClass: "b-tab", attrs: { id: `${e.id}-tabpanel`, role: "tabpanel", "aria-labelledby": e.id } }, [e.activeTabId === e.id ? [t._t("default")] : t._e()], 2);
-}, rt = [], it = /* @__PURE__ */ S(
-  st,
-  nt,
-  rt,
-  !1,
-  null,
-  "95343e8e"
-);
-const Tt = it.exports;
-export {
-  Tt as B,
-  vt as a
-};
-//# sourceMappingURL=tab.YQXssvyU.js.map