@adyen/bento-vue2 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("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    tooltipText: {
+        type: StringConstructor;
+        default: any;
+    };
     value: {
         type: StringConstructor;
         default: string;
@@ -124,6 +128,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    tooltipText: {
+        type: StringConstructor;
+        default: any;
+    };
     value: {
         type: StringConstructor;
         default: string;
@@ -138,6 +146,7 @@ declare const _default: import("vue").DefineComponent<{
     optional: boolean;
     readonly: boolean;
     height: string;
+    tooltipText: string;
     errorMessage: string;
     ariaLabel: string;
     clearable: boolean;

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

@@ -55,7 +55,12 @@ declare const _default: import("vue").DefineComponent<{
     };
     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>;
@@ -63,6 +68,7 @@ declare const _default: import("vue").DefineComponent<{
         validator: (value: BentoTimelineItemVariant) => boolean;
     };
 }, {
+    isNoteType: import("vue").ComputedRef<boolean>;
     iconConditionalClasses: import("vue").ComputedRef<{
         'b-timeline-item__icon--default': boolean;
         'b-timeline-item__icon--success': boolean;
@@ -71,6 +77,9 @@ declare const _default: import("vue").DefineComponent<{
     titleConditionalClasses: import("vue").ComputedRef<{
         'b-timeline-item__title--default': boolean;
     }>;
+    conditionalClasses: import("vue").ComputedRef<{
+        'b-timeline-item--note': boolean;
+    }>;
     displayShowMoreButton: import("vue").ComputedRef<boolean>;
     showAll: import("vue").Ref<boolean>;
     hiddenItems: import("vue").Ref<number>;
@@ -80,6 +89,7 @@ declare const _default: import("vue").DefineComponent<{
     timegap: import("vue").ComputedRef<string>;
     timegapAriaLabel: import("vue").ComputedRef<string>;
     isLastItem: import("vue").ComputedRef<boolean>;
+    computedIconVariant: import("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<{
@@ -144,7 +154,12 @@ declare const _default: import("vue").DefineComponent<{
     };
     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>;
@@ -153,6 +168,8 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     description: string;
+    type: string;
+    title: string | BentoTimelineItemTitle;
     variant: "CrossCircleIcon" | "SquareSmallIcon" | "CheckedCircleIcon" | BentoTimelineItemVariant;
     tag: any;
     additionalTimestamp: BentoTimelineTimestamp;

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 'vue';
+import { PropType, Ref } from 'vue';
 import { BentoTimelineGapObject, BentoTimelineShowMoreObject } from './timeline.types';
 declare const _default: import("vue").DefineComponent<{
+    addNote: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     showMore: {
         type: PropType<BentoTimelineShowMoreObject>;
         default: any;
@@ -9,7 +13,18 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<BentoTimelineGapObject>;
         default: any;
     };
-}, void, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    addNoteLabel: import("vue").ComputedRef<string>;
+    cancelLabel: import("vue").ComputedRef<string>;
+    toggleAddNote: () => void;
+    updateNoteContent: (newTimelineNoteContent: string) => void;
+    addNoteToTimeline: () => void;
+    showAddNoteTextArea: Ref<boolean>;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, "add-timeline-note"[], string, Readonly<import("vue").ExtractPropTypes<{
+    addNote: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     showMore: {
         type: PropType<BentoTimelineShowMoreObject>;
         default: any;
@@ -20,6 +35,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     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

@@ -5,7 +5,7 @@ import { C as O, a as T } from "./chunks/chevron-up.674ec2e5.js";
 import { g as d } from "./chunks/unique-id.a2a2b458.js";
 import { o as E } from "./chunks/resize.a041304d.js";
 import { u as N } from "./chunks/use-expandable-content-height.62fc84e5.js";
-import "./assets/index13.css";
+import "./assets/index44.css";
 const m = Symbol("accordion title size injection key"), S = {}, z = /* @__PURE__ */ p({
   ...S,
   __name: "accordion",

package/dist/action-bar.js

@@ -1,107 +1,108 @@
-import { onMounted as C, nextTick as h, getCurrentScope as W, onScopeDispose as M, unref as T, getCurrentInstance as E, ref as m, watch as S, watchEffect as N, computed as y, defineComponent as O, toRef as x } from "vue";
-import { a as P } from "./chunks/button.e09d5980.js";
-import { B as R } from "./chunks/index.965ac1af.js";
-import { B as k } from "./chunks/button-actions-with-menu.a5413243.js";
-import { C as V } from "./chunks/cross.a2cadac5.js";
-import { u as j } from "./chunks/i18n.155748d6.js";
+import { onMounted as C, nextTick as h, getCurrentScope as M, onScopeDispose as W, unref as x, getCurrentInstance as w, ref as v, watch as b, watchEffect as P, computed as y, defineComponent as F, toRefs as V, provide as R } from "vue";
+import { a as k } from "./chunks/button.e09d5980.js";
+import { B as j } from "./chunks/index.965ac1af.js";
+import { B as D } from "./chunks/button-actions-with-menu.5faea13e.js";
+import { C as G } from "./chunks/cross.a2cadac5.js";
+import { u as z } from "./chunks/i18n.155748d6.js";
 import "./chunks/index.af05ced4.js";
-import { n as G } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index.css";
-function w(e) {
-  return W() ? (M(e), !0) : !1;
+import { P as H } from "./chunks/index.210d2169.js";
+import { n as U } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import "./assets/index2.css";
+function O(e) {
+  return M() ? (W(e), !0) : !1;
 }
-function A(e) {
-  return typeof e == "function" ? e() : T(e);
+function B(e) {
+  return typeof e == "function" ? e() : x(e);
 }
-const z = typeof window < "u" && typeof document < "u";
+const Y = typeof window < "u" && typeof document < "u";
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const F = Object.prototype.toString, H = (e) => F.call(e) === "[object Object]", q = () => {
+const q = Object.prototype.toString, K = (e) => q.call(e) === "[object Object]", Q = () => {
 };
-function D(e) {
-  return e || E();
+function $(e) {
+  return e || w();
 }
-function Q(e, n = !0, t) {
-  D() ? C(e, t) : n ? e() : h(e);
+function J(e, n = !0, t) {
+  $() ? C(e, t) : n ? e() : h(e);
 }
-function U(e) {
+function Z(e) {
   var n;
-  const t = A(e);
+  const t = B(e);
   return (n = t == null ? void 0 : t.$el) != null ? n : t;
 }
-const I = z ? window : void 0;
-function Y(...e) {
-  let n, t, o, s;
-  if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([t, o, s] = e, n = I) : [n, t, o, s] = e, !n)
-    return q;
+const I = Y ? window : void 0;
+function X(...e) {
+  let n, t, o, i;
+  if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([t, o, i] = e, n = I) : [n, t, o, i] = e, !n)
+    return Q;
   Array.isArray(t) || (t = [t]), Array.isArray(o) || (o = [o]);
-  const r = [], a = () => {
-    r.forEach((u) => u()), r.length = 0;
-  }, l = (u, f, d, p) => (u.addEventListener(f, d, p), () => u.removeEventListener(f, d, p)), c = S(
-    () => [U(n), A(s)],
-    ([u, f]) => {
-      if (a(), !u)
+  const r = [], s = () => {
+    r.forEach((d) => d()), r.length = 0;
+  }, c = (d, p, f, a) => (d.addEventListener(p, f, a), () => d.removeEventListener(p, f, a)), u = b(
+    () => [Z(n), B(i)],
+    ([d, p]) => {
+      if (s(), !d)
         return;
-      const d = H(f) ? { ...f } : f;
+      const f = K(p) ? { ...p } : p;
       r.push(
-        ...t.flatMap((p) => o.map((v) => l(u, p, v, d)))
+        ...t.flatMap((a) => o.map((_) => c(d, a, _, f)))
       );
     },
     { immediate: !0, flush: "post" }
-  ), i = () => {
-    c(), a();
+  ), l = () => {
+    u(), s();
   };
-  return w(i), i;
+  return O(l), l;
 }
-function $() {
-  const e = m(!1);
-  return E() && C(() => {
+function ee() {
+  const e = v(!1);
+  return w() && C(() => {
     e.value = !0;
   }), e;
 }
-function K(e) {
-  const n = $();
+function te(e) {
+  const n = ee();
   return y(() => (n.value, !!e()));
 }
-function Z(e, n = {}) {
-  const { window: t = I } = n, o = K(() => t && "matchMedia" in t && typeof t.matchMedia == "function");
-  let s;
-  const r = m(!1), a = (i) => {
-    r.value = i.matches;
-  }, l = () => {
-    s && ("removeEventListener" in s ? s.removeEventListener("change", a) : s.removeListener(a));
-  }, c = N(() => {
-    o.value && (l(), s = t.matchMedia(A(e)), "addEventListener" in s ? s.addEventListener("change", a) : s.addListener(a), r.value = s.matches);
+function ne(e, n = {}) {
+  const { window: t = I } = n, o = te(() => t && "matchMedia" in t && typeof t.matchMedia == "function");
+  let i;
+  const r = v(!1), s = (l) => {
+    r.value = l.matches;
+  }, c = () => {
+    i && ("removeEventListener" in i ? i.removeEventListener("change", s) : i.removeListener(s));
+  }, u = P(() => {
+    o.value && (c(), i = t.matchMedia(B(e)), "addEventListener" in i ? i.addEventListener("change", s) : i.addListener(s), r.value = i.matches);
   });
-  return w(() => {
-    c(), l(), s = void 0;
+  return O(() => {
+    u(), c(), i = void 0;
   }), r;
 }
-function J(e = {}) {
+function oe(e = {}) {
   const {
     window: n = I,
     initialWidth: t = Number.POSITIVE_INFINITY,
     initialHeight: o = Number.POSITIVE_INFINITY,
-    listenOrientation: s = !0,
+    listenOrientation: i = !0,
     includeScrollbar: r = !0
-  } = e, a = m(t), l = m(o), c = () => {
-    n && (r ? (a.value = n.innerWidth, l.value = n.innerHeight) : (a.value = n.document.documentElement.clientWidth, l.value = n.document.documentElement.clientHeight));
+  } = e, s = v(t), c = v(o), u = () => {
+    n && (r ? (s.value = n.innerWidth, c.value = n.innerHeight) : (s.value = n.document.documentElement.clientWidth, c.value = n.document.documentElement.clientHeight));
   };
-  if (c(), Q(c), Y("resize", c, { passive: !0 }), s) {
-    const i = Z("(orientation: portrait)");
-    S(i, () => c());
+  if (u(), J(u), X("resize", u, { passive: !0 }), i) {
+    const l = ne("(orientation: portrait)");
+    b(l, () => u());
   }
-  return { width: a, height: l };
+  return { width: s, height: c };
 }
-const X = {
+const ie = {
   "en-US": {
     actionBar: "Action bar",
     close: "Close",
     selected: "selected"
   }
-}, ee = {
-  i18n: { messages: X }
-}, te = /* @__PURE__ */ O({
-  ...ee,
+}, se = {
+  i18n: { messages: ie }
+}, ae = /* @__PURE__ */ F({
+  ...se,
   __name: "action-bar",
   props: {
     /**
@@ -118,6 +119,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
      */
@@ -142,50 +151,60 @@ const X = {
   },
   emits: ["close"],
   setup(e, { emit: n }) {
-    const t = e, { t: o } = j(), s = y(() => t.selectionLabel ? t.selectionLabel : o("selected")), r = 32, a = 100, l = 500, c = m(null), i = m(4), { width: u } = J(), f = x(t, "extraBottomSpacing"), d = y(() => ({
-      "b-action-bar--extra-spacing": f.value
-    })), p = y(() => {
-      const _ = t.actions.map((L) => ({
+    const t = e, o = 100, i = 7, r = 500, s = 32, { t: c } = z(), u = y(() => t.selectionLabel ? t.selectionLabel : c("selected")), l = v(null), { extraBottomSpacing: d, visibleActions: p } = V(t), { width: f } = oe(), a = v(null), _ = v(null);
+    b(
+      () => p.value,
+      (m) => {
+        _.value = m <= 4 ? m : 4, a.value = _.value;
+      },
+      { immediate: !0 }
+    );
+    const T = y(() => ({
+      "b-action-bar--extra-spacing": d.value
+    }));
+    R(H, i);
+    const N = y(() => {
+      const m = t.actions.map((L) => ({
         ...L,
         variant: "secondary"
-      })), g = _.slice(0, i.value).reverse(), B = _.slice(i.value);
-      return [...g, ...B];
-    }), v = async () => {
-      await h(), u.value > c.value.clientWidth + r + a && i.value < 4 && (i.value += 1, v());
-    }, b = async () => {
-      await h(), u.value < c.value.clientWidth + r && i.value > 0 && (i.value -= 1, b());
+      })), A = m.slice(0, a.value).reverse(), S = m.slice(a.value);
+      return [...A, ...S];
+    }), E = async () => {
+      await h(), f.value > l.value.clientWidth + s + o && a.value < _.value && (a.value += 1, E());
+    }, g = async () => {
+      await h(), f.value < l.value.clientWidth + s && a.value > 0 && (a.value -= 1, g());
     };
-    return S(
-      () => u.value,
-      async (_, g) => {
-        if (await h(), !c.value)
+    return b(
+      () => f.value,
+      async (m, A) => {
+        if (await h(), !l.value)
           return;
-        const B = _ > g;
-        u.value < l ? i.value = 0 : B ? v() : b();
+        const S = m > A;
+        f.value < r ? a.value = 0 : S ? E() : g();
       },
       { immediate: !0 }
-    ), { __sfc: !0, props: t, emit: n, t: o, label: s, SPACING: r, AVERAGE_BUTTON_SIZE: a, RESPONSIVE_BREAKPOINT: l, actionBar: c, displayedActions: i, width: u, extraSpacingRef: f, conditionalClasses: d, actionsInternal: p, showActions: v, hideActions: b, BentoButton: P, BentoTypography: R, ButtonActionsWithMenu: k, CrossIcon: V };
+    ), { __sfc: !0, AVERAGE_BUTTON_SIZE: o, MENU_OFFSET: i, RESPONSIVE_BREAKPOINT: r, SPACING: s, props: t, emit: n, t: c, label: u, actionBar: l, extraBottomSpacing: d, visibleActions: p, width: f, internalDisplayedActions: a, internalVisibleActions: _, conditionalClasses: T, actionsInternal: N, showActions: E, hideActions: g, BentoButton: k, BentoTypography: j, ButtonActionsWithMenu: D, CrossIcon: G };
   }
 });
-var ne = function() {
+var re = function() {
   var n = this, t = n._self._c, o = n._self._setupProxy;
-  return t("section", { ref: "actionBar", staticClass: "b-action-bar", class: o.conditionalClasses, attrs: { "aria-label": o.t("actionBar") } }, [t("div", { staticClass: "b-action-bar__close-button" }, [t(o.BentoButton, { attrs: { variant: "tertiary", inverse: "" }, on: { click: function(s) {
+  return t("Transition", { attrs: { name: "b-action-bar__animation", appear: "" } }, [t("section", { staticClass: "b-action-bar", class: o.conditionalClasses, attrs: { "aria-label": o.t("actionBar") } }, [t("div", { ref: "actionBar", staticClass: "b-action-bar__container" }, [t("div", { staticClass: "b-action-bar__close-button" }, [t(o.BentoButton, { attrs: { variant: "tertiary", inverse: "", "aria-label": o.t("close") }, on: { click: function(i) {
     return o.emit("close");
   } }, scopedSlots: n._u([{ key: "iconLeft", fn: function() {
-    return [t(o.CrossIcon, { attrs: { "svg-title": o.t("close") } })];
-  }, proxy: !0 }]) })], 1), t(o.BentoTypography, { staticClass: "b-action-bar__selection", attrs: { el: "span", stronger: "" } }, [n._v(n._s(n.itemCounter) + " " + n._s(o.label))]), t(o.ButtonActionsWithMenu, { staticClass: "b-action-bar__actions", attrs: { actions: o.actionsInternal, "displayed-actions": o.displayedActions, "menu-position": "top-end", inverse: "" } })], 1);
-}, oe = [], se = /* @__PURE__ */ G(
-  te,
-  ne,
-  oe,
+    return [t(o.CrossIcon, { attrs: { "aria-hidden": !0 } })];
+  }, proxy: !0 }]) })], 1), t(o.BentoTypography, { staticClass: "b-action-bar__selection", attrs: { el: "span", stronger: "" } }, [n._v(n._s(n.itemCounter) + " " + n._s(o.label))]), t(o.ButtonActionsWithMenu, { staticClass: "b-action-bar__actions", attrs: { actions: o.actionsInternal, "displayed-actions": o.internalDisplayedActions, "menu-position": "top-end", inverse: "" } })], 1)])]);
+}, ce = [], le = /* @__PURE__ */ U(
+  ae,
+  re,
+  ce,
   !1,
   null,
-  "16449f81",
+  "d2278799",
   null,
   null
 );
-const pe = se.exports;
+const be = le.exports;
 export {
-  pe as BentoActionBar
+  be as BentoActionBar
 };
 //# sourceMappingURL=action-bar.js.map