@adyen/bento-vue3 1.7.0 → 1.8.0

package/dist/@types/packages/vue2/src/components/summary-grid/summary-grid.types.d.ts

@@ -1,4 +1,4 @@
-import { GridLayoutColumnWidth } from "../internal/grid-layout/grid-layout.types";
+import { GridLayoutColumnWidths } from "../internal/grid-layout/grid-layout.types";
 export declare enum BentoSummaryGridItemSize {
     SMALL = "small",
     MEDIUM = "medium",
@@ -10,9 +10,9 @@ export declare enum BentoSummaryGridItemTrendDirection {
     NEUTRAL = "neutral"
 }
 export interface BentoSummaryGridColumnWidth {
-    row1: Array<GridLayoutColumnWidth>;
-    row2?: Array<GridLayoutColumnWidth>;
-    row3?: Array<GridLayoutColumnWidth>;
+    row1: GridLayoutColumnWidths;
+    row2?: GridLayoutColumnWidths;
+    row3?: GridLayoutColumnWidths;
 }
 export type BentoSummaryGridLayout = () => {
     isSummaryGridLayout: boolean;

package/dist/@types/packages/vue2/src/components/textarea/textarea.vue.d.ts

@@ -54,6 +54,10 @@ declare const _default: import("../../../../vue3/node_modules/vue").DefineCompon
         type: BooleanConstructor;
         default: boolean;
     };
+    tooltipText: {
+        type: StringConstructor;
+        default: any;
+    };
     value: {
         type: StringConstructor;
         default: string;
@@ -124,6 +128,10 @@ declare const _default: import("../../../../vue3/node_modules/vue").DefineCompon
         type: BooleanConstructor;
         default: boolean;
     };
+    tooltipText: {
+        type: StringConstructor;
+        default: any;
+    };
     value: {
         type: StringConstructor;
         default: string;
@@ -145,6 +153,7 @@ declare const _default: import("../../../../vue3/node_modules/vue").DefineCompon
     description: string;
     optional: boolean;
     readonly: boolean;
+    tooltipText: string;
     errorMessage: string;
     ariaLabel: string;
     clearable: boolean;

package/dist/@types/packages/vue2/src/components/timeline/components/timeline-item/timeline-item.vue.d.ts

@@ -41,7 +41,12 @@ declare const _default: import("../../../../../../vue3/node_modules/vue").Define
     };
     title: {
         type: PropType<string | BentoTimelineItemTitle>;
-        required: true;
+        default: any;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
     };
     variant: {
         type: PropType<"CrossCircleIcon" | "SquareSmallIcon" | "CheckedCircleIcon" | BentoTimelineItemVariant>;
@@ -49,6 +54,7 @@ declare const _default: import("../../../../../../vue3/node_modules/vue").Define
         validator: (value: BentoTimelineItemVariant) => boolean;
     };
 }, {
+    isNoteType: import("../../../../../../vue3/node_modules/vue").ComputedRef<boolean>;
     iconConditionalClasses: import("../../../../../../vue3/node_modules/vue").ComputedRef<{
         'b-timeline-item__icon--default': boolean;
         'b-timeline-item__icon--success': boolean;
@@ -57,6 +63,9 @@ declare const _default: import("../../../../../../vue3/node_modules/vue").Define
     titleConditionalClasses: import("../../../../../../vue3/node_modules/vue").ComputedRef<{
         'b-timeline-item__title--default': boolean;
     }>;
+    conditionalClasses: import("../../../../../../vue3/node_modules/vue").ComputedRef<{
+        'b-timeline-item--note': boolean;
+    }>;
     displayShowMoreButton: import("../../../../../../vue3/node_modules/vue").ComputedRef<boolean>;
     showAll: import("../../../../../../vue3/node_modules/vue").Ref<boolean>;
     hiddenItems: import("../../../../../../vue3/node_modules/vue").Ref<number>;
@@ -66,6 +75,7 @@ declare const _default: import("../../../../../../vue3/node_modules/vue").Define
     timegap: import("../../../../../../vue3/node_modules/vue").ComputedRef<string>;
     timegapAriaLabel: import("../../../../../../vue3/node_modules/vue").ComputedRef<string>;
     isLastItem: import("../../../../../../vue3/node_modules/vue").ComputedRef<boolean>;
+    computedIconVariant: import("../../../../../../vue3/node_modules/vue").ComputedRef<"CrossCircleIcon" | "SquareSmallIcon" | "CheckedCircleIcon" | BentoTimelineItemVariant>;
     generateUid: (value: string) => string;
     hasSlot: (name: string) => boolean;
     t: import("vue-i18n-bridge").ComposerTranslation<import("../../../../utils/ts/i18n").i18nMessages, string, import("@intlify/core-base").RemoveIndexSignature<{
@@ -116,7 +126,12 @@ declare const _default: import("../../../../../../vue3/node_modules/vue").Define
     };
     title: {
         type: PropType<string | BentoTimelineItemTitle>;
-        required: true;
+        default: any;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
     };
     variant: {
         type: PropType<"CrossCircleIcon" | "SquareSmallIcon" | "CheckedCircleIcon" | BentoTimelineItemVariant>;
@@ -124,6 +139,8 @@ declare const _default: import("../../../../../../vue3/node_modules/vue").Define
         validator: (value: BentoTimelineItemVariant) => boolean;
     };
 }>>, {
+    type: string;
+    title: string | BentoTimelineItemTitle;
     variant: "CrossCircleIcon" | "SquareSmallIcon" | "CheckedCircleIcon" | BentoTimelineItemVariant;
     tag: any;
     description: string;

package/dist/@types/packages/vue2/src/components/timeline/timeline.types.d.ts

@@ -46,11 +46,13 @@ export interface BentoTimelineDataListObject {
 export type BentoTimelineDataList = Array<BentoTimelineDataListObject>;
 export type BentoTimelineTagProps = InstanceType<typeof BentoTag>['$props'];
 export interface BentoTimelineEntry {
-    title: string | BentoTimelineItemTitle;
+    title?: string | BentoTimelineItemTitle;
+    description?: string;
     date: Date | number;
 }
 export type BentoTimelineRegisterEntry = (props: {
-    title: string | BentoTimelineItemTitle;
+    title?: string | BentoTimelineItemTitle;
+    description?: string;
     date: Date | number;
 }) => {
     timelineEntries: Ref<BentoTimelineEntry[]>;

package/dist/@types/packages/vue2/src/components/timeline/timeline.vue.d.ts

@@ -1,6 +1,10 @@
-import { PropType } from "../../../../vue3/node_modules/vue";
+import { PropType, Ref } from "../../../../vue3/node_modules/vue";
 import { BentoTimelineGapObject, BentoTimelineShowMoreObject } from './timeline.types';
 declare const _default: import("../../../../vue3/node_modules/vue").DefineComponent<{
+    addNote: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     showMore: {
         type: PropType<BentoTimelineShowMoreObject>;
         default: any;
@@ -9,7 +13,18 @@ declare const _default: import("../../../../vue3/node_modules/vue").DefineCompon
         type: PropType<BentoTimelineGapObject>;
         default: any;
     };
-}, void, 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<{
+}, {
+    addNoteLabel: import("../../../../vue3/node_modules/vue").ComputedRef<string>;
+    cancelLabel: import("../../../../vue3/node_modules/vue").ComputedRef<string>;
+    toggleAddNote: () => void;
+    updateNoteContent: (newTimelineNoteContent: string) => void;
+    addNoteToTimeline: () => void;
+    showAddNoteTextArea: Ref<boolean>;
+}, unknown, {}, {}, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../vue3/node_modules/vue").ComponentOptionsMixin, "add-timeline-note"[], "add-timeline-note", 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<{
+    addNote: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     showMore: {
         type: PropType<BentoTimelineShowMoreObject>;
         default: any;
@@ -18,8 +33,11 @@ declare const _default: import("../../../../vue3/node_modules/vue").DefineCompon
         type: PropType<BentoTimelineGapObject>;
         default: any;
     };
-}>>, {
+}>> & {
+    "onAdd-timeline-note"?: (...args: any[]) => any;
+}, {
     showMore: BentoTimelineShowMoreObject;
+    addNote: boolean;
     timegapLimit: BentoTimelineGapObject;
 }>;
 export default _default;

package/dist/@types/packages/vue2/src/index.d.ts

@@ -1,5 +1,6 @@
 import BentoVue from './install';
 export * from './components/accordion';
+export * from './components/action-bar';
 export * from './components/alert';
 export * from './components/button';
 export * from './components/data-grid';

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.2bd3812b.js";
+import { B as w } from "./chunks/index.75f3672e.js";
 import { a as R, C as j } from "./chunks/chevron-up.9bf21068.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/index36.css";
+import "./assets/index8.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,95 +1,96 @@
-import { onMounted as N, nextTick as S, getCurrentScope as O, onScopeDispose as V, unref as d, getCurrentInstance as T, ref as _, watch as E, watchEffect as k, computed as B, defineComponent as P, toRef as R, openBlock as j, createElementBlock as G, normalizeClass as z, createElementVNode as D, createVNode as g, withCtx as C, createTextVNode as H, toDisplayString as L } from "vue";
-import { a as q } from "./chunks/button.e5177388.js";
-import { B as F } from "./chunks/index.2bd3812b.js";
-import { B as Q } from "./chunks/button-actions-with-menu.fa35390c.js";
-import { C as U } from "./chunks/cross.5c36a670.js";
-import { u as Y } from "./chunks/i18n.6c402773.js";
-import { _ as $ } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index19.css";
+import { onMounted as L, nextTick as g, getCurrentScope as F, onScopeDispose as R, unref as p, getCurrentInstance as M, ref as _, watch as A, watchEffect as j, computed as S, defineComponent as D, toRefs as G, provide as z, openBlock as H, createBlock as U, Transition as Y, withCtx as I, createElementVNode as B, normalizeClass as q, createVNode as E, createTextVNode as K, toDisplayString as T } from "vue";
+import { a as Q } from "./chunks/button.82ed953e.js";
+import { B as $ } from "./chunks/index.75f3672e.js";
+import { B as J } from "./chunks/button-actions-with-menu.3f52ea2d.js";
+import { C as Z } from "./chunks/cross.5c36a670.js";
+import { u as X } from "./chunks/i18n.6c402773.js";
+import { P as ee } from "./chunks/index.726e2f3c.js";
+import { _ as te } from "./chunks/_plugin-vue_export-helper.dad06003.js";
+import "./assets/index13.css";
 function W(e) {
-  return O() ? (V(e), !0) : !1;
+  return F() ? (R(e), !0) : !1;
 }
 function w(e) {
-  return typeof e == "function" ? e() : d(e);
+  return typeof e == "function" ? e() : p(e);
 }
-const K = typeof window < "u" && typeof document < "u";
+const ne = typeof window < "u" && typeof document < "u";
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const Z = Object.prototype.toString, J = (e) => Z.call(e) === "[object Object]", X = () => {
+const oe = Object.prototype.toString, ie = (e) => oe.call(e) === "[object Object]", ae = () => {
 };
-function ee(e) {
-  return e || T();
+function se(e) {
+  return e || M();
 }
-function te(e, n = !0, t) {
-  ee() ? N(e, t) : n ? e() : S(e);
+function re(e, n = !0, t) {
+  se() ? L(e, t) : n ? e() : g(e);
 }
-function ne(e) {
+function ce(e) {
   var n;
   const t = w(e);
   return (n = t == null ? void 0 : t.$el) != null ? n : t;
 }
-const I = K ? window : void 0;
-function oe(...e) {
-  let n, t, i, o;
-  if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([t, i, o] = e, n = I) : [n, t, i, o] = e, !n)
-    return X;
-  Array.isArray(t) || (t = [t]), Array.isArray(i) || (i = [i]);
-  const c = [], a = () => {
-    c.forEach((l) => l()), c.length = 0;
-  }, u = (l, f, p, m) => (l.addEventListener(f, p, m), () => l.removeEventListener(f, p, m)), r = E(
-    () => [ne(n), w(o)],
-    ([l, f]) => {
-      if (a(), !l)
+const N = ne ? window : void 0;
+function le(...e) {
+  let n, t, s, o;
+  if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([t, s, o] = e, n = N) : [n, t, s, o] = e, !n)
+    return ae;
+  Array.isArray(t) || (t = [t]), Array.isArray(s) || (s = [s]);
+  const c = [], i = () => {
+    c.forEach((d) => d()), c.length = 0;
+  }, r = (d, m, f, a) => (d.addEventListener(m, f, a), () => d.removeEventListener(m, f, a)), u = A(
+    () => [ce(n), w(o)],
+    ([d, m]) => {
+      if (i(), !d)
         return;
-      const p = J(f) ? { ...f } : f;
+      const f = ie(m) ? { ...m } : m;
       c.push(
-        ...t.flatMap((m) => i.map((y) => u(l, m, y, p)))
+        ...t.flatMap((a) => s.map((h) => r(d, a, h, f)))
       );
     },
     { immediate: !0, flush: "post" }
-  ), s = () => {
-    r(), a();
+  ), l = () => {
+    u(), i();
   };
-  return W(s), s;
+  return W(l), l;
 }
-function ie() {
+function ue() {
   const e = _(!1);
-  return T() && N(() => {
+  return M() && L(() => {
     e.value = !0;
   }), e;
 }
-function se(e) {
-  const n = ie();
-  return B(() => (n.value, !!e()));
+function de(e) {
+  const n = ue();
+  return S(() => (n.value, !!e()));
 }
-function ae(e, n = {}) {
-  const { window: t = I } = n, i = se(() => t && "matchMedia" in t && typeof t.matchMedia == "function");
+function fe(e, n = {}) {
+  const { window: t = N } = n, s = de(() => t && "matchMedia" in t && typeof t.matchMedia == "function");
   let o;
-  const c = _(!1), a = (s) => {
-    c.value = s.matches;
-  }, u = () => {
-    o && ("removeEventListener" in o ? o.removeEventListener("change", a) : o.removeListener(a));
-  }, r = k(() => {
-    i.value && (u(), o = t.matchMedia(w(e)), "addEventListener" in o ? o.addEventListener("change", a) : o.addListener(a), c.value = o.matches);
+  const c = _(!1), i = (l) => {
+    c.value = l.matches;
+  }, r = () => {
+    o && ("removeEventListener" in o ? o.removeEventListener("change", i) : o.removeListener(i));
+  }, u = j(() => {
+    s.value && (r(), o = t.matchMedia(w(e)), "addEventListener" in o ? o.addEventListener("change", i) : o.addListener(i), c.value = o.matches);
   });
   return W(() => {
-    r(), u(), o = void 0;
+    u(), r(), o = void 0;
   }), c;
 }
-function re(e = {}) {
+function pe(e = {}) {
   const {
-    window: n = I,
+    window: n = N,
     initialWidth: t = Number.POSITIVE_INFINITY,
-    initialHeight: i = Number.POSITIVE_INFINITY,
+    initialHeight: s = Number.POSITIVE_INFINITY,
     listenOrientation: o = !0,
     includeScrollbar: c = !0
-  } = e, a = _(t), u = _(i), r = () => {
-    n && (c ? (a.value = n.innerWidth, u.value = n.innerHeight) : (a.value = n.document.documentElement.clientWidth, u.value = n.document.documentElement.clientHeight));
+  } = e, i = _(t), r = _(s), u = () => {
+    n && (c ? (i.value = n.innerWidth, r.value = n.innerHeight) : (i.value = n.document.documentElement.clientWidth, r.value = n.document.documentElement.clientHeight));
   };
-  if (r(), te(r), oe("resize", r, { passive: !0 }), o) {
-    const s = ae("(orientation: portrait)");
-    E(s, () => r());
+  if (u(), re(u), le("resize", u, { passive: !0 }), o) {
+    const l = fe("(orientation: portrait)");
+    A(l, () => u());
   }
-  return { width: a, height: u };
+  return { width: i, height: r };
 }
 const x = {
   "en-US": {
@@ -97,10 +98,10 @@ const x = {
     close: "Close",
     selected: "selected"
   }
-}, ce = ["aria-label"], le = { class: "b-action-bar__close-button" }, ue = {
+}, me = ["aria-label"], ve = { class: "b-action-bar__close-button" }, _e = {
   i18n: { messages: x }
-}, de = /* @__PURE__ */ P({
-  ...ue,
+}, be = /* @__PURE__ */ D({
+  ..._e,
   __name: "action-bar",
   props: {
     /**
@@ -117,6 +118,14 @@ const x = {
       type: Array,
       required: !0
     },
+    /**
+     * How many actions should be visible outside the menu, cannot be more than 4
+     */
+    visibleActions: {
+      type: Number,
+      default: 4,
+      validator: (e) => e > 0 && e <= 4
+    },
     /**
      * Use when there are sticky elements at the bottom, like sticky pagination
      */
@@ -141,70 +150,91 @@ const x = {
   },
   emits: ["close"],
   setup(e, { emit: n }) {
-    const t = e, { t: i } = Y({ messages: x }), o = B(() => t.selectionLabel ? t.selectionLabel : i("selected")), c = 32, a = 100, u = 500, r = _(null), s = _(4), { width: l } = re(), f = R(t, "extraBottomSpacing"), p = B(() => ({
-      "b-action-bar--extra-spacing": f.value
-    })), m = B(() => {
-      const h = t.actions.map((M) => ({
-        ...M,
+    const t = e, s = 100, o = 7, c = 500, i = 32, { t: r } = X({ messages: x }), u = S(() => t.selectionLabel ? t.selectionLabel : r("selected")), l = _(null), { extraBottomSpacing: d, visibleActions: m } = G(t), { width: f } = pe(), a = _(null), h = _(null);
+    A(
+      () => m.value,
+      (v) => {
+        h.value = v <= 4 ? v : 4, a.value = h.value;
+      },
+      { immediate: !0 }
+    );
+    const V = S(() => ({
+      "b-action-bar--extra-spacing": d.value
+    }));
+    z(ee, o);
+    const P = S(() => {
+      const v = t.actions.map((k) => ({
+        ...k,
         variant: "secondary"
-      })), v = h.slice(0, s.value).reverse(), b = h.slice(s.value);
-      return [...v, ...b];
-    }), y = async () => {
-      await S(), l.value > r.value.clientWidth + c + a && s.value < 4 && (s.value += 1, y());
-    }, A = async () => {
-      await S(), l.value < r.value.clientWidth + c && s.value > 0 && (s.value -= 1, A());
+      })), b = v.slice(0, a.value).reverse(), y = v.slice(a.value);
+      return [...b, ...y];
+    }), C = async () => {
+      await g(), f.value > l.value.clientWidth + i + s && a.value < h.value && (a.value += 1, C());
+    }, O = async () => {
+      await g(), f.value < l.value.clientWidth + i && a.value > 0 && (a.value -= 1, O());
     };
-    return E(
-      () => l.value,
-      async (h, v) => {
-        if (await S(), !r.value)
+    return A(
+      () => f.value,
+      async (v, b) => {
+        if (await g(), !l.value)
           return;
-        const b = h > v;
-        l.value < u ? s.value = 0 : b ? y() : A();
+        const y = v > b;
+        f.value < c ? a.value = 0 : y ? C() : O();
       },
       { immediate: !0 }
-    ), (h, v) => (j(), G("section", {
-      ref_key: "actionBar",
-      ref: r,
-      class: z(["b-action-bar", d(p)]),
-      "aria-label": d(i)("actionBar")
-    }, [
-      D("div", le, [
-        g(d(q), {
-          variant: "tertiary",
-          inverse: "",
-          onClick: v[0] || (v[0] = (b) => n("close"))
-        }, {
-          iconLeft: C(() => [
-            g(d(U), {
-              "svg-title": d(i)("close")
-            }, null, 8, ["svg-title"])
-          ]),
-          _: 1
-        })
+    ), (v, b) => (H(), U(Y, {
+      name: "b-action-bar__animation",
+      appear: ""
+    }, {
+      default: I(() => [
+        B("section", {
+          class: q(["b-action-bar", p(V)]),
+          "aria-label": p(r)("actionBar")
+        }, [
+          B("div", {
+            ref_key: "actionBar",
+            ref: l,
+            class: "b-action-bar__container"
+          }, [
+            B("div", ve, [
+              E(p(Q), {
+                variant: "tertiary",
+                inverse: "",
+                "aria-label": p(r)("close"),
+                onClick: b[0] || (b[0] = (y) => n("close"))
+              }, {
+                iconLeft: I(() => [
+                  E(p(Z), { "aria-hidden": !0 })
+                ]),
+                _: 1
+              }, 8, ["aria-label"])
+            ]),
+            E(p($), {
+              el: "span",
+              stronger: "",
+              class: "b-action-bar__selection"
+            }, {
+              default: I(() => [
+                K(T(e.itemCounter) + " " + T(p(u)), 1)
+              ]),
+              _: 1
+            }),
+            E(J, {
+              actions: p(P),
+              class: "b-action-bar__actions",
+              "displayed-actions": a.value,
+              "menu-position": "top-end",
+              inverse: ""
+            }, null, 8, ["actions", "displayed-actions"])
+          ], 512)
+        ], 10, me)
       ]),
-      g(d(F), {
-        el: "span",
-        stronger: "",
-        class: "b-action-bar__selection"
-      }, {
-        default: C(() => [
-          H(L(e.itemCounter) + " " + L(d(o)), 1)
-        ]),
-        _: 1
-      }),
-      g(Q, {
-        actions: d(m),
-        class: "b-action-bar__actions",
-        "displayed-actions": s.value,
-        "menu-position": "top-end",
-        inverse: ""
-      }, null, 8, ["actions", "displayed-actions"])
-    ], 10, ce));
+      _: 1
+    }));
   }
 });
-const be = /* @__PURE__ */ $(de, [["__scopeId", "data-v-68845914"]]);
+const we = /* @__PURE__ */ te(be, [["__scopeId", "data-v-59086ee6"]]);
 export {
-  be as BentoActionBar
+  we as BentoActionBar
 };
 //# sourceMappingURL=action-bar.js.map