@adyen/bento-vue3 1.25.0 → 1.27.0

package/dist/@types/packages/vue2/src/templates/dashboard-template/components/dashboard-section/dashboard-section.vue.d.ts

@@ -0,0 +1,78 @@
+import type { BentoDashboardTemplateHeader } from '../../dashboard-template.types';
+/**
+ * Dashboard section is subcomponent of Dashboard template meant to be used to create the different sections within the page.
+ *
+ * @example
+ * import { BentoDashboardSection } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoDashboardSection },
+ *     template: `
+ *          <bento-dashboard-section :header="{ title: 'Section' }" half-width>
+ *              <template #controls>
+ *                  // Add your controls here
+ *              </template>
+ *              // You can render content with two cols
+ *              <template #content-col-1>
+ *                  // Add your content here
+ *              </template>
+ *              <template #content-col-2>
+ *                  // Add your content here
+ *              </template>
+ *              // Or you can render full width content by using default slot
+ *              // Add your content here
+ *          </bento-dashboard-section>
+ *     `
+ * }
+ */
+declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/node_modules/vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * The header of the section
+     */
+    header: BentoDashboardTemplateHeader;
+    /**
+     * Renders the section to take only half of the page
+     */
+    halfWidth?: boolean;
+}>, {
+    halfWidth: boolean;
+}>, {}, unknown, {}, {}, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, {}, string, import("../../../../../../vue3/node_modules/vue").VNodeProps & import("../../../../../../vue3/node_modules/vue").AllowedComponentProps & import("../../../../../../vue3/node_modules/vue").ComponentCustomProps, Readonly<import("../../../../../../vue3/node_modules/vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * The header of the section
+     */
+    header: BentoDashboardTemplateHeader;
+    /**
+     * Renders the section to take only half of the page
+     */
+    halfWidth?: boolean;
+}>, {
+    halfWidth: boolean;
+}>>>, {
+    halfWidth: boolean;
+}>, {
+    infoIconTooltipContent: (_: {}) => any;
+    controls: (_: {}) => any;
+    default: (_: {}) => any;
+    'content-col-1': (_: {}) => any;
+    'content-col-2': (_: {}) => any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import("../../../../../../vue3/node_modules/vue").PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import("../../../../../../vue3/node_modules/vue").PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/@types/packages/vue2/src/templates/dashboard-template/dashboard-template.types.d.ts

@@ -0,0 +1,8 @@
+import type { BentoTab } from "../../components/tabs";
+import type { BentoHeader } from "../../components/header";
+export type BentoDashboardTemplateTab = InstanceType<typeof BentoTab>['$props'];
+export type BentoDashboardTemplateHeader = InstanceType<typeof BentoHeader>['$props'];
+export type BentoDashboardTemplateTabs = {
+    activeTabIndex?: number;
+    tabs: BentoDashboardTemplateTab[];
+};

package/dist/@types/packages/vue2/src/templates/dashboard-template/dashboard-template.vue.d.ts

@@ -0,0 +1,103 @@
+import type { BentoDashboardTemplateHeader, BentoDashboardTemplateTabs } from './dashboard-template.types';
+/**
+ * Dashboard template is a full page template used to visualize data on pages such as data dashboards and reports.
+ *
+ * @example
+ * import { BentoDashboardTemplate, BentoDashboardSection } from '@adyen/bento-vue2';
+ *
+ * export default {
+ *     components: { BentoDashboardTemplate, BentoDashboardSection },
+ *     template: `
+ *          <bento-dashboard-template :header="{ title: 'Dashboard'}" :tabs="tabs: [{ title: 'Tab 1' }, { title: 'Tab 2' }]" sticky-tabs sticky-filters>
+ *              <template #tab-1>
+ *                  <bento-dashboard-section :header="{ title: 'Section'}">
+ *                      <template #controls>
+ *                          // Add your controls here
+ *                      </template>
+ *                      // Add your content here
+ *                  </bento-dashboard-section>
+ *              </template>
+ *              <template #tab-2>
+ *                  <bento-dashboard-section :header="{ title: 'Section'}">
+ *                      // Add your content here
+ *                  </bento-dashboard-section>
+ *              </template>
+ *          </bento-dashboard-template>
+ *     `
+ * }
+ */
+declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_modules/vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * The header that goes to the top of the template
+     */
+    header: BentoDashboardTemplateHeader;
+    /**
+     * All the tab properties that can be set on the inner tab components.
+     *  - tabs.activeTabIndex: the currently active tab index.
+     *  - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on.
+     */
+    tabs?: BentoDashboardTemplateTabs;
+    /**
+     * Renders the tabs with a sticky positioning
+     */
+    stickyTabs?: boolean;
+    /**
+     * Renders the tabs with a sticky positioning
+     */
+    stickyFilters?: boolean;
+}>, {
+    tabs: any;
+    stickyTabs: boolean;
+    stickyFilters: boolean;
+}>, {}, unknown, {}, {}, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, {}, string, import("../../../../vue3/node_modules/vue").VNodeProps & import("../../../../vue3/node_modules/vue").AllowedComponentProps & import("../../../../vue3/node_modules/vue").ComponentCustomProps, Readonly<import("../../../../vue3/node_modules/vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * The header that goes to the top of the template
+     */
+    header: BentoDashboardTemplateHeader;
+    /**
+     * All the tab properties that can be set on the inner tab components.
+     *  - tabs.activeTabIndex: the currently active tab index.
+     *  - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on.
+     */
+    tabs?: BentoDashboardTemplateTabs;
+    /**
+     * Renders the tabs with a sticky positioning
+     */
+    stickyTabs?: boolean;
+    /**
+     * Renders the tabs with a sticky positioning
+     */
+    stickyFilters?: boolean;
+}>, {
+    tabs: any;
+    stickyTabs: boolean;
+    stickyFilters: boolean;
+}>>>, {
+    tabs: BentoDashboardTemplateTabs;
+    stickyFilters: boolean;
+    stickyTabs: boolean;
+}>, Record<string, (_: {}) => any> & {
+    infoIconTooltipContent: (_: {}) => any;
+    filters: (_: {}) => any;
+    default: (_: {}) => any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import("../../../../vue3/node_modules/vue").PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import("../../../../vue3/node_modules/vue").PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/@types/packages/vue2/src/templates/dashboard-template/index.d.ts

@@ -0,0 +1,3 @@
+export { default as BentoDashboardTemplate } from './dashboard-template.vue';
+export { default as BentoDashboardSection } from './components/dashboard-section/dashboard-section.vue';
+export type * from './dashboard-template.types';

package/dist/@types/packages/vue2/src/utils/ts/storybook.d.ts

@@ -1,15 +1,4 @@
-export declare const storybookDocsParameter: (codeSource: string, language?: string) => {
-    docs: {
-        source: {
-            code: string;
-            language: string;
-        };
-    };
-};
-export declare const getPokemonFromApi: (pokemonName?: string) => Promise<{
-    label: any;
-    value: any;
-}[]>;
+export * from "../../../../core/src/utils/ts/storybook";
 /**
  * Adds necessary Toast component to display toasts.
  * It should be added just once on the app level, but never in the views or components itself

package/dist/accordion.js

@@ -1,11 +1,11 @@
 import { defineComponent as C, provide as k, toRef as B, openBlock as a, createElementBlock as r, renderSlot as E, ref as b, inject as O, computed as $, watch as s, createVNode as y, unref as e, withCtx as g, createElementVNode as h, createBlock as I, createTextVNode as z, toDisplayString as A, Transition as D, normalizeStyle as H, createCommentVNode as V } from "vue";
 import { _ as N } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { B as w } from "./chunks/index.11b6dd35.js";
+import { B as w } from "./chunks/index.ee15db35.js";
 import { C as R, a as j } from "./chunks/chevron-up.638a9f34.js";
 import { g as x } from "./chunks/unique-id.a2a2b458.js";
 import { o as M } from "./chunks/resize.a041304d.js";
 import { u as U } from "./chunks/use-expandable-content-height.62fc84e5.js";
-import "./assets/index3.css";
+import "./assets/index2.css";
 const S = Symbol("accordion title size injection key"), q = { class: "b-accordion" }, J = {}, K = /* @__PURE__ */ C({
   ...J,
   __name: "accordion",

package/dist/action-bar.js

@@ -1,99 +1,15 @@
-import { onMounted as k, nextTick as B, getCurrentScope as z, onScopeDispose as H, unref as o, getCurrentInstance as x, ref as _, watch as A, watchEffect as U, computed as y, defineComponent as Y, toRefs as K, provide as Q, openBlock as S, createBlock as I, Transition as $, withCtx as w, createElementVNode as V, normalizeClass as q, createElementBlock as J, createVNode as N, createCommentVNode as Z, createTextVNode as X, toDisplayString as W } from "vue";
-import { a as ee } from "./chunks/button.de5589fa.js";
-import { B as te } from "./chunks/index.11b6dd35.js";
-import { B as ne } from "./chunks/button-actions-with-menu.a007b034.js";
-import { C as ae } from "./chunks/cross.26509efc.js";
-import { u as oe } from "./chunks/i18n.f7e6533e.js";
-import { P as ie } from "./chunks/index.bab8811d.js";
-import { B as se } from "./chunks/button-actions.adc0a2fe.js";
-import { _ as ce } from "./chunks/_plugin-vue_export-helper.dad06003.js";
+import { defineComponent as W, computed as c, ref as p, toRefs as U, watch as g, provide as z, nextTick as f, openBlock as m, createBlock as b, Transition as D, withCtx as y, createElementVNode as E, normalizeClass as G, unref as e, createElementBlock as K, createVNode as B, createCommentVNode as M, createTextVNode as q, toDisplayString as S } from "vue";
+import { a as J } from "./chunks/button.ae4760cd.js";
+import { B as Y } from "./chunks/index.ee15db35.js";
+import { B as Z } from "./chunks/button-actions-with-menu.4f311411.js";
+import { C as $ } from "./chunks/cross.26509efc.js";
+import { u as j } from "./chunks/i18n.f7e6533e.js";
+import { u as H } from "./chunks/index.fedbb4c2.js";
+import { P as Q } from "./chunks/index.a001a0a8.js";
+import { B as X } from "./chunks/button-actions.82163994.js";
+import { _ as ee } from "./chunks/_plugin-vue_export-helper.dad06003.js";
 import "./assets/index5.css";
-function P(e) {
-  return z() ? (H(e), !0) : !1;
-}
-function O(e) {
-  return typeof e == "function" ? e() : o(e);
-}
-const re = typeof window < "u" && typeof document < "u";
-typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const le = Object.prototype.toString, ue = (e) => le.call(e) === "[object Object]", de = () => {
-};
-function fe(e) {
-  return e || x();
-}
-function pe(e, n = !0, t) {
-  fe() ? k(e, t) : n ? e() : B(e);
-}
-function ve(e) {
-  var n;
-  const t = O(e);
-  return (n = t == null ? void 0 : t.$el) != null ? n : t;
-}
-const T = re ? window : void 0;
-function me(...e) {
-  let n, t, c, a;
-  if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([t, c, a] = e, n = T) : [n, t, c, a] = e, !n)
-    return de;
-  Array.isArray(t) || (t = [t]), Array.isArray(c) || (c = [c]);
-  const l = [], i = () => {
-    l.forEach((r) => r()), l.length = 0;
-  }, s = (r, v, b, f) => (r.addEventListener(v, b, f), () => r.removeEventListener(v, b, f)), d = A(
-    () => [ve(n), O(a)],
-    ([r, v]) => {
-      if (i(), !r)
-        return;
-      const b = ue(v) ? { ...v } : v;
-      l.push(
-        ...t.flatMap((f) => c.map((u) => s(r, f, u, b)))
-      );
-    },
-    { immediate: !0, flush: "post" }
-  ), p = () => {
-    d(), i();
-  };
-  return P(p), p;
-}
-function _e() {
-  const e = _(!1);
-  return x() && k(() => {
-    e.value = !0;
-  }), e;
-}
-function be(e) {
-  const n = _e();
-  return y(() => (n.value, !!e()));
-}
-function he(e, n = {}) {
-  const { window: t = T } = n, c = be(() => t && "matchMedia" in t && typeof t.matchMedia == "function");
-  let a;
-  const l = _(!1), i = (p) => {
-    l.value = p.matches;
-  }, s = () => {
-    a && ("removeEventListener" in a ? a.removeEventListener("change", i) : a.removeListener(i));
-  }, d = U(() => {
-    c.value && (s(), a = t.matchMedia(O(e)), "addEventListener" in a ? a.addEventListener("change", i) : a.addListener(i), l.value = a.matches);
-  });
-  return P(() => {
-    d(), s(), a = void 0;
-  }), l;
-}
-function ye(e = {}) {
-  const {
-    window: n = T,
-    initialWidth: t = Number.POSITIVE_INFINITY,
-    initialHeight: c = Number.POSITIVE_INFINITY,
-    listenOrientation: a = !0,
-    includeScrollbar: l = !0
-  } = e, i = _(t), s = _(c), d = () => {
-    n && (l ? (i.value = n.innerWidth, s.value = n.innerHeight) : (i.value = n.document.documentElement.clientWidth, s.value = n.document.documentElement.clientHeight));
-  };
-  if (d(), pe(d), me("resize", d, { passive: !0 }), a) {
-    const p = he("(orientation: portrait)");
-    A(p, () => d());
-  }
-  return { width: i, height: s };
-}
-const F = {
+const N = {
   "en-US": {
     actionBar: "Action bar",
     cancel: "Cancel",
@@ -102,13 +18,13 @@ const F = {
     selected: "selected",
     unsavedChanges: "unsaved change | unsaved changes"
   }
-}, ge = ["aria-label"], Ee = {
+}, te = ["aria-label"], ae = {
   key: 0,
   class: "b-action-bar__close-button"
-}, Se = {
-  i18n: { messages: F }
-}, Be = /* @__PURE__ */ Y({
-  ...Se,
+}, ne = {
+  i18n: { messages: N }
+}, oe = /* @__PURE__ */ W({
+  ...ne,
   __name: "action-bar",
   props: {
     /**
@@ -132,7 +48,7 @@ const F = {
     visibleActions: {
       type: Number,
       default: 4,
-      validator: (e) => e > 0 && e <= 4
+      validator: (n) => n > 0 && n <= 4
     },
     /**
      * Use when there are sticky elements at the bottom, like sticky pagination
@@ -165,109 +81,109 @@ const F = {
     }
   },
   emits: ["close", "cancel", "save"],
-  setup(e, { emit: n }) {
-    const t = e, c = 100, a = 7, l = 500, i = 32, { t: s, tc: d } = oe({ messages: F }), p = y(() => t.selectionLabel ? t.selectionLabel : s("selected")), r = _(null), { extraBottomSpacing: v, visibleActions: b } = K(t), { width: f } = ye(), u = _(null), C = _(null), g = y(() => t.variant === "confirmation");
-    A(
-      () => b.value,
-      (m) => {
-        C.value = m <= 4 ? m : 4, u.value = C.value;
+  setup(n, { emit: v }) {
+    const s = n, I = 100, x = 7, T = 500, A = 32, { t: i, tc: k } = j({ messages: N }), w = c(() => s.selectionLabel ? s.selectionLabel : i("selected")), r = p(null), { extraBottomSpacing: V, visibleActions: O } = U(s), { width: l } = H(), t = p(null), _ = p(null), u = c(() => s.variant === "confirmation");
+    g(
+      () => O.value,
+      (a) => {
+        _.value = a <= 4 ? a : 4, t.value = _.value;
       },
       { immediate: !0 }
     );
-    const R = y(() => ({
-      "b-action-bar--extra-spacing": v.value,
-      "b-action-bar--confirmation": g.value
+    const P = c(() => ({
+      "b-action-bar--extra-spacing": V.value,
+      "b-action-bar--confirmation": u.value
     }));
-    Q(ie, a);
-    const j = y(() => {
-      const m = t.actions.map((G) => ({
-        ...G,
+    z(Q, x);
+    const R = c(() => {
+      const a = s.actions.map((L) => ({
+        ...L,
         variant: "secondary"
-      })), h = m.slice(0, u.value).reverse(), E = m.slice(u.value);
-      return [...h, ...E];
-    }), D = y(() => [
+      })), o = a.slice(0, t.value).reverse(), d = a.slice(t.value);
+      return [...o, ...d];
+    }), F = c(() => [
       {
-        title: s("save"),
-        event: () => n("save")
+        title: i("save"),
+        event: () => v("save")
       },
       {
-        title: s("cancel"),
+        title: i("cancel"),
         variant: "secondary",
-        event: () => n("cancel")
+        event: () => v("cancel")
       }
-    ]), L = async () => {
-      await B(), f.value > r.value.clientWidth + i + c && u.value < C.value && (u.value += 1, L());
-    }, M = async () => {
-      await B(), f.value < r.value.clientWidth + i && u.value > 0 && (u.value -= 1, M());
+    ]), C = async () => {
+      await f(), l.value > r.value.clientWidth + A + I && t.value < _.value && (t.value += 1, C());
+    }, h = async () => {
+      await f(), l.value < r.value.clientWidth + A && t.value > 0 && (t.value -= 1, h());
     };
-    return A(
-      () => f.value,
-      async (m, h) => {
-        if (await B(), !r.value)
+    return g(
+      () => l.value,
+      async (a, o) => {
+        if (await f(), !r.value)
           return;
-        const E = m > h;
-        f.value < l ? u.value = 0 : E ? L() : M();
+        const d = a > o;
+        l.value < T ? t.value = 0 : d ? C() : h();
       },
       { immediate: !0 }
-    ), (m, h) => (S(), I($, {
+    ), (a, o) => (m(), b(D, {
       name: "b-action-bar__animation",
       appear: ""
     }, {
-      default: w(() => [
-        V("section", {
-          class: q(["b-action-bar", o(R)]),
-          "aria-label": o(s)("actionBar")
+      default: y(() => [
+        E("section", {
+          class: G(["b-action-bar", e(P)]),
+          "aria-label": e(i)("actionBar")
         }, [
-          V("div", {
+          E("div", {
             ref_key: "actionBar",
             ref: r,
             class: "b-action-bar__container"
           }, [
-            o(g) ? Z("", !0) : (S(), J("div", Ee, [
-              N(o(ee), {
+            e(u) ? M("", !0) : (m(), K("div", ae, [
+              B(e(J), {
                 variant: "tertiary",
                 inverse: "",
-                "aria-label": o(s)("close"),
-                onClick: h[0] || (h[0] = (E) => n("close"))
+                "aria-label": e(i)("close"),
+                onClick: o[0] || (o[0] = (d) => v("close"))
               }, {
-                iconLeft: w(() => [
-                  N(o(ae), { "aria-hidden": !0 })
+                iconLeft: y(() => [
+                  B(e($), { "aria-hidden": !0 })
                 ]),
                 _: 1
               }, 8, ["aria-label"])
             ])),
-            N(o(te), {
+            B(e(Y), {
               el: "span",
               stronger: "",
               class: "b-action-bar__selection"
             }, {
-              default: w(() => [
-                X(W(e.itemCounter) + " " + W(o(g) ? o(d)("unsavedChanges", e.itemCounter) : o(p)), 1)
+              default: y(() => [
+                q(S(n.itemCounter) + " " + S(e(u) ? e(k)("unsavedChanges", n.itemCounter) : e(w)), 1)
               ]),
               _: 1
             }),
-            o(g) ? (S(), I(o(se), {
+            e(u) ? (m(), b(e(X), {
               key: 1,
-              actions: o(D),
+              actions: e(F),
               class: "b-action-bar__actions",
               inverse: ""
-            }, null, 8, ["actions"])) : (S(), I(ne, {
+            }, null, 8, ["actions"])) : (m(), b(Z, {
               key: 2,
-              actions: o(j),
+              actions: e(R),
               class: "b-action-bar__actions",
-              "displayed-actions": u.value,
+              "displayed-actions": t.value,
               "menu-position": "top-end",
               inverse: ""
             }, null, 8, ["actions", "displayed-actions"]))
           ], 512)
-        ], 10, ge)
+        ], 10, te)
       ]),
       _: 1
     }));
   }
 });
-const Ve = /* @__PURE__ */ ce(Be, [["__scopeId", "data-v-191a2ab0"]]);
+const pe = /* @__PURE__ */ ee(oe, [["__scopeId", "data-v-191a2ab0"]]);
 export {
-  Ve as BentoActionBar
+  pe as BentoActionBar
 };
 //# sourceMappingURL=action-bar.js.map