@adyen/bento-vue3 1.3.0 → 1.4.0

package/dist/summary-grid.js

@@ -1,16 +1,15 @@
-import { defineComponent as S, resolveComponent as f, openBlock as i, createElementBlock as E, Fragment as D, renderList as R, createBlock as p, createSlots as O, withCtx as r, renderSlot as y, toRefs as j, computed as T, normalizeStyle as w, createElementVNode as h, createVNode as M, createTextVNode as v, toDisplayString as g, createCommentVNode as $, mergeProps as z } from "vue";
-import { u as P } from "./chunks/use-has-slot.068222e6.js";
-import { G as U } from "./chunks/grid-layout.a30855ff.js";
+import { defineComponent as S, resolveComponent as p, openBlock as i, createElementBlock as E, Fragment as N, renderList as j, createBlock as m, createSlots as O, withCtx as r, renderSlot as y, toRefs as w, computed as v, normalizeStyle as R, createElementVNode as h, createVNode as M, createTextVNode as _, toDisplayString as f, createCommentVNode as $, mergeProps as z } from "vue";
+import { u as k } from "./chunks/use-has-slot.9fac7123.js";
+import { G as q } from "./chunks/grid-layout.984317d7.js";
 import { _ as b } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { BentoInfoIcon as q } from "./info-icon.js";
-import { B as X, b as A, a as W } from "./chunks/index.222d29b0.js";
-import { BentoTag as Y, BentoTagVariant as B } from "./tag.js";
-import { PopperContainerPosition as F } from "./popper-container.js";
-import { C as H } from "./chunks/copy.2cf5e6c3.js";
-import "./assets/index39.css";
-const J = S({
+import { BentoInfoIcon as U } from "./info-icon.js";
+import { B as X, a as V } from "./chunks/index.89b00b94.js";
+import { BentoTag as W, BentoTagVariant as L } from "./tag.js";
+import { C as F } from "./chunks/copy.1d14b783.js";
+import "./assets/index33.css";
+const H = S({
   name: "bento-summary-grid",
-  components: { GridLayout: U },
+  components: { GridLayout: q },
   props: {
     /**
      * Sets the responsive columns widths values for 1 of the 3 rows.
@@ -21,34 +20,34 @@ const J = S({
     }
   },
   setup(e, { slots: s }) {
-    var m, a;
+    var u, a;
     let c = 1;
     if (s) {
-      const l = (a = (m = Object.keys(s)) == null ? void 0 : m.filter((n) => n.includes("cell-"))) == null ? void 0 : a.map((n) => {
+      const d = (a = (u = Object.keys(s)) == null ? void 0 : u.filter((n) => n.includes("cell-"))) == null ? void 0 : a.map((n) => {
         var t;
         return parseInt((t = n.split("-")) == null ? void 0 : t[1], 10);
       });
-      if (c = Math.max(...l), c > 3)
+      if (c = Math.max(...d), c > 3)
         throw new Error(
           "BentoSummaryGrid must only have a maximum of 3 rows. Read the documentation for more information."
         );
     }
     return {
-      hasSlot: P(s),
+      hasSlot: k(s),
       numberOfRows: c
     };
   }
 });
-const K = { class: "b-summary-grid" };
-function Q(e, s, c, m, a, l) {
-  const n = f("grid-layout");
-  return i(), E("div", K, [
-    (i(!0), E(D, null, R(e.numberOfRows, (t) => {
-      var _;
-      return i(), p(n, {
+const Y = { class: "b-summary-grid" };
+function J(e, s, c, u, a, d) {
+  const n = p("grid-layout");
+  return i(), E("div", Y, [
+    (i(!0), E(N, null, j(e.numberOfRows, (t) => {
+      var T;
+      return i(), m(n, {
         key: `summary-grid-row-${t}`,
         "data-testid": `summary-grid-row-${t}`,
-        "column-width": (_ = e.columnWidth) == null ? void 0 : _[`row${t}`]
+        "column-width": (T = e.columnWidth) == null ? void 0 : T[`row${t}`]
       }, O({ _: 2 }, [
         e.hasSlot(`cell-${t}-1`) ? {
           name: "col-1",
@@ -96,11 +95,11 @@ function Q(e, s, c, m, a, l) {
     }), 128))
   ]);
 }
-const Ee = /* @__PURE__ */ b(J, [["render", Q], ["__scopeId", "data-v-1b4c3b84"]]);
-var d = /* @__PURE__ */ ((e) => (e.SMALL = "small", e.MEDIUM = "medium", e.LARGE = "large", e))(d || {}), o = /* @__PURE__ */ ((e) => (e.POSITIVE = "positive", e.NEGATIVE = "negative", e.NEUTRAL = "neutral", e))(o || {}), u = /* @__PURE__ */ ((e) => (e.AMOUNT = "amount", e.PERCENTAGE = "percentage", e.NUMERIC = "numeric", e.TEXT = "text", e.CUSTOM = "custom", e))(u || {});
-const Z = S({
+const $e = /* @__PURE__ */ b(H, [["render", J], ["__scopeId", "data-v-1b4c3b84"]]);
+var l = /* @__PURE__ */ ((e) => (e.SMALL = "small", e.MEDIUM = "medium", e.LARGE = "large", e))(l || {}), o = /* @__PURE__ */ ((e) => (e.POSITIVE = "positive", e.NEGATIVE = "negative", e.NEUTRAL = "neutral", e))(o || {}), g = /* @__PURE__ */ ((e) => (e.AMOUNT = "amount", e.PERCENTAGE = "percentage", e.NUMERIC = "numeric", e.TEXT = "text", e.CUSTOM = "custom", e))(g || {});
+const K = S({
   name: "summary-grid-item",
-  components: { BentoInfoIcon: q, BentoTypography: X, BentoTag: Y, Copy: H },
+  components: { BentoInfoIcon: U, BentoTypography: X, BentoTag: W, Copy: F },
   props: {
     /**
      * Text to copy to the clipboard
@@ -112,8 +111,8 @@ const Z = S({
     // TODO add text truncation for SummaryGridItemType.TEXT
     itemType: {
       type: String,
-      default: u.CUSTOM,
-      validator: (e) => Object.values(u).includes(e)
+      default: g.CUSTOM,
+      validator: (e) => Object.values(g).includes(e)
     },
     /**
      * Text showed in the info-icon tooltip on hover
@@ -134,8 +133,8 @@ const Z = S({
     // TODO implement logic for Large size
     size: {
       type: String,
-      default: d.SMALL,
-      validator: (e) => Object.values(d).includes(e)
+      default: l.SMALL,
+      validator: (e) => Object.values(l).includes(e)
     },
     /**
      * Shows colored trend label next to text content
@@ -169,99 +168,91 @@ const Z = S({
     }
   },
   setup(e, { slots: s }) {
-    const { trendDirection: c, secondaryTrendDirection: m, itemType: a, size: l } = j(e), n = (k) => {
-      switch (k) {
+    const { trendDirection: c, secondaryTrendDirection: u, itemType: a, size: d } = w(e), n = (P) => {
+      switch (P) {
         case o.POSITIVE:
-          return B.GREEN;
+          return L.GREEN;
         case o.NEGATIVE:
-          return B.RED;
+          return L.RED;
         default:
-          return B.BLUE;
+          return L.BLUE;
       }
-    }, t = T(() => n(c.value)), _ = T(() => n(m.value)), I = T(
-      () => a.value === u.TEXT || a.value === u.PERCENTAGE || a.value === u.AMOUNT || a.value === u.NUMERIC
-    ), L = T(() => {
+    }, t = v(() => n(c.value)), T = v(() => n(u.value)), I = v(
+      () => a.value === g.TEXT || a.value === g.PERCENTAGE || a.value === g.AMOUNT || a.value === g.NUMERIC
+    ), A = v(() => {
       if (I.value) {
-        if (l.value === d.SMALL)
-          return A.BODY;
-        if (a.value !== u.TEXT)
-          return A.TITLE;
+        if (d.value === l.SMALL)
+          return V.BODY;
+        if (a.value !== g.TEXT)
+          return V.TITLE;
       }
       return null;
-    }), V = T(() => ({
-      medium: l.value === d.LARGE,
-      strongest: l.value === d.SMALL,
-      wide: l.value === d.SMALL,
-      variant: L.value
-    })), G = T(() => e.fitContent ? { width: "fit-content" } : {}), N = T(() => ({
+    }), B = v(() => ({
+      medium: d.value === l.LARGE,
+      strongest: d.value === l.SMALL,
+      wide: d.value === l.SMALL,
+      variant: A.value
+    })), D = v(() => e.fitContent ? { width: "fit-content" } : {}), G = v(() => ({
       [`b-summary-grid-item__content-trend--${e.trend}`]: e.trend
     }));
     return {
       // Values
       trendVariant: t,
-      secondaryTrendVariant: _,
+      secondaryTrendVariant: T,
       isContentTypographyApplied: I,
-      typographyProps: V,
+      typographyProps: B,
       // Styles
-      computedStyles: G,
-      summaryBarItemTrendConditionalClasses: N,
-      // Enums
-      BentoTypographyElement: W,
-      BentoTypographyVariant: A,
-      SummaryGridItemType: u,
-      BentoSummaryGridItemSize: d,
-      PopperContainerPosition: F,
+      computedStyles: D,
+      summaryBarItemTrendConditionalClasses: G,
       // Utils
-      hasSlot: P(s)
+      hasSlot: k(s)
     };
   }
 });
-const x = { class: "b-summary-grid-item__header" }, ee = { class: "b-summary-grid-item__title-icons" }, te = { class: "b-summary-grid-item__content--primary" }, ne = {
+const Q = { class: "b-summary-grid-item__header" }, Z = { class: "b-summary-grid-item__title-icons" }, x = { class: "b-summary-grid-item__content--primary" }, ee = {
   key: 0,
   class: "b-summary-grid-item__content--secondary"
 };
-function oe(e, s, c, m, a, l) {
-  const n = f("bento-typography"), t = f("copy"), _ = f("bento-info-icon"), I = f("bento-tag");
+function te(e, s, c, u, a, d) {
+  const n = p("bento-typography"), t = p("copy"), T = p("bento-info-icon"), I = p("bento-tag");
   return i(), E("div", {
     class: "b-summary-grid-item",
-    style: w(e.computedStyles)
+    style: R(e.computedStyles)
   }, [
-    h("div", x, [
+    h("div", Q, [
       M(n, {
         class: "b-summary-grid-item__title",
-        el: e.BentoTypographyElement.SPAN,
-        variant: e.BentoTypographyVariant.BODY
+        el: "span",
+        variant: "body"
       }, {
         default: r(() => [
-          v(g(e.title), 1)
+          _(f(e.title), 1)
         ]),
         _: 1
-      }, 8, ["el", "variant"]),
-      h("div", ee, [
-        e.copy ? (i(), p(t, {
+      }),
+      h("div", Z, [
+        e.copy ? (i(), m(t, {
           key: 0,
           class: "b-structured-list__icon",
           text: e.copy
         }, null, 8, ["text"])) : $("", !0),
-        e.infoIconTooltipText ? (i(), p(_, {
+        e.infoIconTooltipText ? (i(), m(T, {
           key: 1,
           "tooltip-text": e.infoIconTooltipText,
-          "tooltip-position": e.PopperContainerPosition.TOP,
+          "tooltip-position": "top",
           class: "b-summary-grid-item__title-tooltip"
-        }, null, 8, ["tooltip-text", "tooltip-position"])) : $("", !0)
+        }, null, 8, ["tooltip-text"])) : $("", !0)
       ])
     ]),
-    h("div", te, [
-      e.isContentTypographyApplied ? (i(), p(n, z({
+    h("div", x, [
+      e.isContentTypographyApplied ? (i(), m(n, z({
         key: 0,
         "data-testid": "summary-grid-item-content-typography",
         class: "b-summary-grid-item__title"
-      }, e.typographyProps, {
-        el: e.BentoTypographyElement.SPAN
-      }), {
+      }, e.typographyProps, { el: "span" }), {
         default: r(() => [
           y(e.$slots, "default", {}, void 0, !0),
-          e.trend && e.itemType !== e.SummaryGridItemType.TEXT ? (i(), p(I, {
+          e.trend && e.itemType !== "text" ? (i(), m(I, {
             key: 0,
             variant: e.trendVariant,
             label: e.trend,
@@ -269,19 +260,19 @@ function oe(e, s, c, m, a, l) {
           }, null, 8, ["variant", "label"])) : $("", !0)
         ]),
         _: 3
-      }, 16, ["el"])) : y(e.$slots, "default", { key: 1 }, void 0, !0)
+      }, 16)) : y(e.$slots, "default", { key: 1 }, void 0, !0)
     ]),
-    e.hasSlot("secondary") ? (i(), E("div", ne, [
+    e.hasSlot("secondary") ? (i(), E("div", ee, [
       M(n, {
         class: "b-summary-grid-item__title",
         "data-testid": "summary-grid-item-secondary-metric-typography",
-        el: e.BentoTypographyElement.SPAN,
-        variant: e.BentoTypographyVariant.CAPTION,
+        el: "span",
+        variant: "caption",
         stronger: ""
       }, {
         default: r(() => [
           y(e.$slots, "secondary", {}, void 0, !0),
-          e.secondaryTrend ? (i(), p(I, {
+          e.secondaryTrend ? (i(), m(I, {
             key: 0,
             variant: e.secondaryTrendVariant,
             label: e.secondaryTrend,
@@ -289,11 +280,11 @@ function oe(e, s, c, m, a, l) {
           }, null, 8, ["variant", "label"])) : $("", !0)
         ]),
         _: 3
-      }, 8, ["el", "variant"])
+      })
     ])) : $("", !0)
   ], 4);
 }
-const C = /* @__PURE__ */ b(Z, [["render", oe], ["__scopeId", "data-v-ed63ec1f"]]), re = S({
+const C = /* @__PURE__ */ b(K, [["render", te], ["__scopeId", "data-v-00f7a92b"]]), ne = S({
   name: "bento-summary-grid-item-amount",
   components: { SummaryGridItem: C },
   props: {
@@ -378,25 +369,19 @@ const C = /* @__PURE__ */ b(Z, [["render", oe], ["__scopeId", "data-v-ed63ec1f"]
      */
     size: {
       type: String,
-      default: d.SMALL,
-      validator: (e) => Object.values(d).includes(e)
+      default: l.SMALL,
+      validator: (e) => Object.values(l).includes(e)
     }
-  },
-  setup() {
-    return {
-      // Enums
-      SummaryGridItemType: u
-    };
   }
 });
-const ie = { class: "b-summary-grid-item-amount__content" }, ae = {
+const oe = { class: "b-summary-grid-item-amount__content" }, re = {
   key: 0,
   class: "b-summary-grid-item-amount__secondary-label"
 };
-function se(e, s, c, m, a, l) {
-  const n = f("summary-grid-item");
-  return i(), p(n, {
-    "item-type": e.SummaryGridItemType.AMOUNT,
+function ie(e, s, c, u, a, d) {
+  const n = p("summary-grid-item");
+  return i(), m(n, {
+    "item-type": "amount",
     "info-icon-tooltip-text": e.infoIconTooltipText,
     title: e.title,
     copy: e.copy,
@@ -409,9 +394,9 @@ function se(e, s, c, m, a, l) {
     class: "b-summary-grid-item-amount"
   }, O({
     default: r(() => [
-      h("div", ie, [
-        h("div", null, g(e.label), 1),
-        e.secondaryLabel ? (i(), E("div", ae, g(e.secondaryLabel), 1)) : $("", !0)
+      h("div", oe, [
+        h("div", null, f(e.label), 1),
+        e.secondaryLabel ? (i(), E("div", re, f(e.secondaryLabel), 1)) : $("", !0)
       ])
     ]),
     _: 2
@@ -419,13 +404,13 @@ function se(e, s, c, m, a, l) {
     e.secondaryMetric ? {
       name: "secondary",
       fn: r(() => [
-        v(g(e.secondaryMetric), 1)
+        _(f(e.secondaryMetric), 1)
       ]),
       key: "0"
     } : void 0
-  ]), 1032, ["item-type", "info-icon-tooltip-text", "title", "copy", "fit-content", "size", "trend", "trend-direction", "secondary-trend", "secondary-trend-direction"]);
+  ]), 1032, ["info-icon-tooltip-text", "title", "copy", "fit-content", "size", "trend", "trend-direction", "secondary-trend", "secondary-trend-direction"]);
 }
-const Ce = /* @__PURE__ */ b(re, [["render", se], ["__scopeId", "data-v-b7d11d13"]]), de = S({
+const Ie = /* @__PURE__ */ b(ne, [["render", ie], ["__scopeId", "data-v-fd1debe6"]]), ae = S({
   name: "bento-summary-grid-item-numeric",
   components: { SummaryGridItem: C },
   props: {
@@ -503,21 +488,15 @@ const Ce = /* @__PURE__ */ b(re, [["render", se], ["__scopeId", "data-v-b7d11d13
      */
     size: {
       type: String,
-      default: d.SMALL,
-      validator: (e) => Object.values(d).includes(e)
+      default: l.SMALL,
+      validator: (e) => Object.values(l).includes(e)
     }
-  },
-  setup() {
-    return {
-      // Enums
-      SummaryGridItemType: u
-    };
   }
 });
-function le(e, s, c, m, a, l) {
-  const n = f("summary-grid-item");
-  return i(), p(n, {
-    "item-type": e.SummaryGridItemType.NUMERIC,
+function se(e, s, c, u, a, d) {
+  const n = p("summary-grid-item");
+  return i(), m(n, {
+    "item-type": "numeric",
     "info-icon-tooltip-text": e.infoIconTooltipText,
     title: e.title,
     copy: e.copy,
@@ -530,20 +509,20 @@ function le(e, s, c, m, a, l) {
     class: "b-summary-grid-item-numeric"
   }, O({
     default: r(() => [
-      v(g(e.label) + " ", 1)
+      _(f(e.label) + " ", 1)
     ]),
     _: 2
   }, [
     e.secondaryMetric ? {
       name: "secondary",
       fn: r(() => [
-        v(g(e.secondaryMetric), 1)
+        _(f(e.secondaryMetric), 1)
       ]),
       key: "0"
     } : void 0
-  ]), 1032, ["item-type", "info-icon-tooltip-text", "title", "copy", "fit-content", "size", "trend", "trend-direction", "secondary-trend", "secondary-trend-direction"]);
+  ]), 1032, ["info-icon-tooltip-text", "title", "copy", "fit-content", "size", "trend", "trend-direction", "secondary-trend", "secondary-trend-direction"]);
 }
-const Oe = /* @__PURE__ */ b(de, [["render", le]]), ue = S({
+const he = /* @__PURE__ */ b(ae, [["render", se]]), de = S({
   name: "bento-summary-grid-item-percentage",
   components: { SummaryGridItem: C },
   props: {
@@ -621,21 +600,15 @@ const Oe = /* @__PURE__ */ b(de, [["render", le]]), ue = S({
      */
     size: {
       type: String,
-      default: d.SMALL,
-      validator: (e) => Object.values(d).includes(e)
+      default: l.SMALL,
+      validator: (e) => Object.values(l).includes(e)
     }
-  },
-  setup() {
-    return {
-      // Enums
-      SummaryGridItemType: u
-    };
   }
 });
-function ce(e, s, c, m, a, l) {
-  const n = f("summary-grid-item");
-  return i(), p(n, {
-    "item-type": e.SummaryGridItemType.PERCENTAGE,
+function le(e, s, c, u, a, d) {
+  const n = p("summary-grid-item");
+  return i(), m(n, {
+    "item-type": "percentage",
     "info-icon-tooltip-text": e.infoIconTooltipText,
     title: e.title,
     copy: e.copy,
@@ -648,20 +621,20 @@ function ce(e, s, c, m, a, l) {
     class: "b-summary-grid-item-percentage"
   }, O({
     default: r(() => [
-      v(g(e.label) + "% ", 1)
+      _(f(e.label) + "% ", 1)
     ]),
     _: 2
   }, [
     e.secondaryMetric ? {
       name: "secondary",
       fn: r(() => [
-        v(g(e.secondaryMetric) + "% ", 1)
+        _(f(e.secondaryMetric) + "% ", 1)
       ]),
       key: "0"
     } : void 0
-  ]), 1032, ["item-type", "info-icon-tooltip-text", "title", "copy", "fit-content", "size", "trend", "trend-direction", "secondary-trend", "secondary-trend-direction"]);
+  ]), 1032, ["info-icon-tooltip-text", "title", "copy", "fit-content", "size", "trend", "trend-direction", "secondary-trend", "secondary-trend-direction"]);
 }
-const Ae = /* @__PURE__ */ b(ue, [["render", ce]]), me = S({
+const Ee = /* @__PURE__ */ b(de, [["render", le]]), ce = S({
   name: "bento-summary-grid-item-text",
   components: { SummaryGridItem: C },
   props: {
@@ -697,18 +670,12 @@ const Ae = /* @__PURE__ */ b(ue, [["render", ce]]), me = S({
       type: Boolean,
       default: !1
     }
-  },
-  setup() {
-    return {
-      // Enums
-      SummaryGridItemType: u
-    };
   }
 });
-function pe(e, s, c, m, a, l) {
-  const n = f("summary-grid-item");
-  return i(), p(n, {
-    "item-type": e.SummaryGridItemType.TEXT,
+function ue(e, s, c, u, a, d) {
+  const n = p("summary-grid-item");
+  return i(), m(n, {
+    "item-type": "text",
     "info-icon-tooltip-text": e.infoIconTooltipText,
     title: e.title,
     copy: e.copy,
@@ -716,12 +683,12 @@ function pe(e, s, c, m, a, l) {
     class: "b-summary-grid-item-text"
   }, {
     default: r(() => [
-      v(g(e.label), 1)
+      _(f(e.label), 1)
     ]),
     _: 1
-  }, 8, ["item-type", "info-icon-tooltip-text", "title", "copy", "fit-content"]);
+  }, 8, ["info-icon-tooltip-text", "title", "copy", "fit-content"]);
 }
-const Be = /* @__PURE__ */ b(me, [["render", pe]]), ye = S({
+const Ce = /* @__PURE__ */ b(ce, [["render", ue]]), me = S({
   name: "bento-summary-grid-item-custom",
   components: { SummaryGridItem: C },
   props: {
@@ -744,9 +711,9 @@ const Be = /* @__PURE__ */ b(me, [["render", pe]]), ye = S({
   },
   emits: ["copy-to-clipboard"]
 });
-function fe(e, s, c, m, a, l) {
-  const n = f("summary-grid-item");
-  return i(), p(n, {
+function ye(e, s, c, u, a, d) {
+  const n = p("summary-grid-item");
+  return i(), m(n, {
     title: e.title,
     "info-icon-tooltip-text": e.infoIconTooltipText,
     copy: e.copy,
@@ -759,15 +726,15 @@ function fe(e, s, c, m, a, l) {
     _: 3
   }, 8, ["title", "info-icon-tooltip-text", "copy", "fit-content"]);
 }
-const Me = /* @__PURE__ */ b(ye, [["render", fe]]);
+const Oe = /* @__PURE__ */ b(me, [["render", ye]]);
 export {
-  Ee as BentoSummaryGrid,
-  Ce as BentoSummaryGridItemAmount,
-  Me as BentoSummaryGridItemCustom,
-  Oe as BentoSummaryGridItemNumeric,
-  Ae as BentoSummaryGridItemPercentage,
-  d as BentoSummaryGridItemSize,
-  Be as BentoSummaryGridItemText,
+  $e as BentoSummaryGrid,
+  Ie as BentoSummaryGridItemAmount,
+  Oe as BentoSummaryGridItemCustom,
+  he as BentoSummaryGridItemNumeric,
+  Ee as BentoSummaryGridItemPercentage,
+  l as BentoSummaryGridItemSize,
+  Ce as BentoSummaryGridItemText,
   o as BentoSummaryGridItemTrendDirection
 };
 //# sourceMappingURL=summary-grid.js.map