@adyen/bento-vue3 1.75.0 → 1.76.0

package/dist/chunks/timeline-item.DNjubXL2.js

@@ -0,0 +1,556 @@
+import { defineComponent as ae, computed as o, ref as M, toRefs as ce, watch as fe, provide as z, nextTick as ve, resolveComponent as w, createElementBlock as f, openBlock as i, createCommentVNode as u, createElementVNode as g, createBlock as S, withCtx as p, createTextVNode as k, toDisplayString as y, createVNode as L, renderSlot as V, mergeProps as H, inject as K, onUnmounted as _e, normalizeClass as W, Fragment as Y, renderList as be } from "vue";
+import { B as se } from "./button.DhcxX2GJ.js";
+import { B as he } from "./textarea.C1jkfowf.js";
+import { u as oe } from "./index.pdBj0KQU.js";
+import { B as pe } from "./button-actions.BQ3AFQqt.js";
+import { _ as q } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { B as ge } from "./date.DZvVL-uz.js";
+import { B as ye } from "./link.cwPmWlsk.js";
+import { B as Ne } from "./tag.CEmpyuYX.js";
+import { B as Te, d as we } from "./typography.yBEME_Gu.js";
+import { a as Ie, B as Ee, S as ke } from "./structured-list-item.BTPh7SPj.js";
+/* empty css              */
+import { g as Ce } from "./generate-uid.NJ8tVoha.js";
+import { u as Se } from "./use-has-slot.B7eQSabc.js";
+import { b as Le, e as Me, a as Ae, n as Oe, g as Z, m as G, d as Q, f as X, h as x } from "./getTimezoneOffsetInMilliseconds.BW7U6PxE.js";
+import { g as $e } from "./getRoundingMethod.C3eaeGLR.js";
+import "../assets/timeline-item.css";
+var A = /* @__PURE__ */ ((e) => (e.BOTTOM = "bottom", e.AFTER_FIRST = "after-first", e.BEFORE_LAST = "before-last", e))(A || {}), Re = /* @__PURE__ */ ((e) => (e.SECOND = "second", e.MINUTE = "minute", e.HOUR = "hour", e.DAY = "day", e.MONTH = "month", e.YEAR = "year", e))(Re || {}), R = /* @__PURE__ */ ((e) => (e.DEFAULT = "SquareSmallIcon", e.SUCCESS = "CheckedCircleIcon", e.CRITICAL = "CrossCircleIcon", e))(R || {}), le = /* @__PURE__ */ ((e) => (e.BLACK = "black", e.BLUE = "blue", e.GREEN = "green", e.GREY = "grey", e.ORANGE = "orange", e.RED = "red", e.YELLOW = "yellow", e))(le || {});
+const re = Symbol("timeline register entry injection key"), de = Symbol("timeline config obj injection key"), ee = {
+  "en-US": {
+    addNote: "Add note",
+    cancel: "Cancel"
+  },
+  "ja-JP": {
+    addNote: "メモを追加",
+    cancel: "キャンセル"
+  },
+  "pt-BR": {
+    addNote: "Adicionar anotação",
+    cancel: "Cancelar"
+  }
+}, Be = ae({
+  i18n: { messages: ee },
+  name: "bento-timeline",
+  components: { BentoButton: se, BentoButtonActions: pe, BentoTextarea: he },
+  props: {
+    /**
+     * If set to true, gives the possibility to manually add notes to the timeline via a textarea
+     */
+    addNote: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Object that determines the max number of items to show without clicking the show more button
+     * and where in the timeline is the show more button placed
+     */
+    showMore: {
+      type: Object,
+      default: null
+    },
+    /**
+     * Object that determines minimum amount of time for the automatic timegap indicator;
+     * Define a unit (hour, day, month) and an amount (e.g. { amount: 7, unit: 'days' }).
+     * If null, automatic timegap detection will be turned off
+     */
+    timegapLimit: {
+      type: Object,
+      default: null
+    }
+  },
+  emits: ["add-timeline-note"],
+  setup(e, { emit: l }) {
+    const { t: n } = oe({ messages: ee }), I = o(() => n("addNote")), m = o(() => n("cancel")), N = M(), a = (v) => {
+      N.value = v;
+    }, _ = M(null), T = M(null), s = M(!1), E = async () => {
+      var v, C;
+      s.value = !s.value, await ve(), s.value ? (v = _.value.$refs.textareaElement) == null || v.focus() : (C = T.value.$el) == null || C.focus();
+    }, b = () => {
+      l("add-timeline-note", {
+        description: N.value,
+        timestamp: { date: /* @__PURE__ */ new Date() },
+        type: "note"
+      }), E();
+    }, d = M([]), h = o(
+      () => e.showMore && d.value.length > e.showMore.limit ? d.value.length - e.showMore.limit : null
+    ), c = M(!1), { timegapLimit: r } = ce(e), t = o(() => Array.from(d.value.keys())), $ = o(() => e.showMore ? e.showMore.placement === A.BEFORE_LAST ? [
+      ...t.value.slice(0, e.showMore.limit - 1),
+      t.value[t.value.length - 1]
+    ] : e.showMore.placement === A.AFTER_FIRST ? [t.value[0], ...t.value.slice(-(e.showMore.limit - 1))] : t.value.slice(0, e.showMore.limit) : null), B = o(() => {
+      if (!e.showMore)
+        return null;
+      switch (e.showMore.placement) {
+        case A.BEFORE_LAST:
+          return e.showMore.limit - 2;
+        case A.AFTER_FIRST:
+          return 0;
+        case A.BOTTOM:
+        default:
+          return e.showMore.limit - 1;
+      }
+    }), D = () => {
+      d.value.sort((v, C) => new Date(C.date).getTime() - new Date(v.date).getTime());
+    }, j = (v) => () => {
+      const C = d.value.indexOf(v);
+      C > -1 && d.value.splice(C, 1);
+    }, O = (v) => (d.value.push(v), { timelineEntries: d, unregisterTimelineEntry: j(v) });
+    fe(
+      () => d.value.length,
+      () => D()
+    );
+    const F = {
+      showAll: c,
+      showMoreIndex: B,
+      hiddenItems: h,
+      visibleIndexes: $,
+      timegapLimit: r,
+      timelineEntries: d
+    };
+    return z(re, O), z(de, F), {
+      addNoteLabel: I,
+      cancelLabel: m,
+      toggleAddNote: E,
+      updateNoteContent: a,
+      addNoteToTimeline: b,
+      showAddNoteTextArea: s,
+      // refs
+      addNoteTextareaRef: _,
+      addNoteButtonRef: T
+    };
+  }
+}), De = { class: "b-timeline" }, je = {
+  key: 0,
+  class: "b-timeline__add-note-section"
+}, Fe = { key: 1 }, Ue = { class: "b-timeline__items" };
+function Ye(e, l, n, I, m, N) {
+  const a = w("bento-button"), _ = w("bento-textarea"), T = w("bento-button-actions");
+  return i(), f("div", De, [
+    e.addNote ? (i(), f("div", je, [
+      e.showAddNoteTextArea ? u("", !0) : (i(), S(a, {
+        key: 0,
+        ref: "addNoteButtonRef",
+        variant: "tertiary",
+        onClick: e.toggleAddNote
+      }, {
+        default: p(() => [
+          k(y(e.addNoteLabel), 1)
+        ]),
+        _: 1
+      }, 8, ["onClick"])),
+      e.showAddNoteTextArea ? (i(), f("div", Fe, [
+        L(_, {
+          ref: "addNoteTextareaRef",
+          label: e.addNoteLabel,
+          "character-limit": 150,
+          resizable: "vertical",
+          onInput: e.updateNoteContent
+        }, null, 8, ["label", "onInput"]),
+        L(T, {
+          actions: [
+            { title: e.addNoteLabel, event: e.addNoteToTimeline },
+            { title: e.cancelLabel, event: e.toggleAddNote }
+          ]
+        }, null, 8, ["actions"])
+      ])) : u("", !0)
+    ])) : u("", !0),
+    g("ol", Ue, [
+      V(e.$slots, "default", {}, void 0, !0)
+    ])
+  ]);
+}
+const gt = /* @__PURE__ */ q(Be, [["render", Ye], ["__scopeId", "data-v-8dcc5ff3"]]);
+let te = 0;
+const ze = {
+  beforeCreate() {
+    this.uuid = te.toString(), te += 1;
+  }
+}, Ve = { key: 0 };
+function He(e, l, n, I, m, N) {
+  return i(), f("svg", H({ role: "img" }, e.$attrs, {
+    class: "ui-assets-icons-16",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    fill: "none"
+  }), [
+    e.$attrs["svg-title"] ? (i(), f("title", Ve, y(e.$attrs["svg-title"]), 1)) : u("", !0),
+    l[0] || (l[0] = g("path", {
+      fill: "#001222",
+      d: "M10 3.25C11.5188 3.25 12.75 4.48122 12.75 6V10C12.75 11.5188 11.5188 12.75 10 12.75H6C4.48122 12.75 3.25 11.5188 3.25 10V6C3.25 4.48122 4.48122 3.25 6 3.25H10Z"
+    }, null, -1))
+  ], 16);
+}
+const qe = /* @__PURE__ */ q(ze, [["render", He]]);
+function ne(e, l, n) {
+  const I = Le(), m = (n == null ? void 0 : n.locale) ?? I.locale ?? Me, N = Ae(e, l);
+  if (isNaN(N))
+    throw new RangeError("Invalid time value");
+  const a = Object.assign({}, n, {
+    addSuffix: n == null ? void 0 : n.addSuffix,
+    comparison: N
+  }), [_, T] = Oe(
+    n == null ? void 0 : n.in,
+    ...N > 0 ? [l, e] : [e, l]
+  ), s = $e((n == null ? void 0 : n.roundingMethod) ?? "round"), E = T.getTime() - _.getTime(), b = E / x, d = Z(T) - Z(_), h = (E - d) / x, c = n == null ? void 0 : n.unit;
+  let r;
+  if (c ? r = c : b < 1 ? r = "second" : b < 60 ? r = "minute" : b < G ? r = "hour" : h < Q ? r = "day" : h < X ? r = "month" : r = "year", r === "second") {
+    const t = s(E / 1e3);
+    return m.formatDistance("xSeconds", t, a);
+  } else if (r === "minute") {
+    const t = s(b);
+    return m.formatDistance("xMinutes", t, a);
+  } else if (r === "hour") {
+    const t = s(b / 60);
+    return m.formatDistance("xHours", t, a);
+  } else if (r === "day") {
+    const t = s(h / G);
+    return m.formatDistance("xDays", t, a);
+  } else if (r === "month") {
+    const t = s(h / Q);
+    return t === 12 && c !== "month" ? m.formatDistance("xYears", 1, a) : m.formatDistance("xMonths", t, a);
+  } else {
+    const t = s(h / X);
+    return m.formatDistance("xYears", t, a);
+  }
+}
+const ie = {
+  "en-US": {
+    showLess: "Show less",
+    showMore: "Show {items} more",
+    timegap: "{timegap} passed between the timeline events"
+  },
+  "ja-JP": {
+    showLess: "表示内容を減らす"
+  },
+  "pt-BR": {
+    showLess: "Mostrar menos"
+  }
+}, Je = ae({
+  name: "bento-timeline-item",
+  components: {
+    BentoButton: se,
+    BentoDate: ge,
+    BentoLink: ye,
+    BentoTag: Ne,
+    BentoTypography: Te,
+    BentoStructuredList: Ee,
+    BentoStructuredListItem: Ie,
+    SquareSmallIcon: qe
+  },
+  i18n: { messages: ie },
+  props: {
+    /**
+     * Additional timestamp of the event
+     */
+    additionalTimestamp: {
+      type: Object,
+      default: null
+    },
+    /**
+     * Relevant key-value pair data to display in the event
+     */
+    dataList: {
+      type: Array,
+      default: null
+    },
+    /**
+     * Description of the event
+     */
+    description: {
+      type: String,
+      default: null
+    },
+    /**
+     * Modifier that changes the color of the timeline icon
+     * @values blue, black, green, grey, orange, red, yellow
+     */
+    status: {
+      type: String,
+      default: "black",
+      validator: (e) => Object.values(le).includes(e)
+    },
+    /**
+     * Tag props that will be passed down to inner tag component
+     */
+    tag: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Main timestamp of the event. Used for timegap detection.
+     */
+    timestamp: {
+      type: Object,
+      required: !0
+    },
+    /**
+     * Title of the event
+     */
+    title: {
+      type: [Object, String],
+      default: null
+    },
+    /**
+     * Type of the timeline item. If set to 'note', it renders a note item in the timeline. Defaults to 'milestone'.
+     * @values milestone, note
+     */
+    type: {
+      type: String,
+      default: "milestone",
+      validator: (e) => ["milestone", "note"].includes(e)
+    },
+    /**
+     * Variant for the timeline item
+     * @values DEFAULT, SUCCESS, CRITICAL
+     *
+     * @deprecated Use "status" prop instead
+     */
+    variant: {
+      type: String,
+      default: null,
+      validator: (e) => Object.values(R).includes(e)
+    }
+  },
+  setup(e, { slots: l }) {
+    const { t: n } = oe({ messages: ie }), I = o(() => e.type === "note"), m = o(() => e.variant === R.CRITICAL ? "red" : e.variant === R.SUCCESS ? "green" : e.status);
+    e.variant && we(
+      'BentoTimelineItem "variant" property',
+      `Use the BentoTimelineItem "status" modifier instead to modify the color of the timeline icon.
+                    <bento-timeline-item status="red" />`,
+      "2.0.0"
+    );
+    const N = o(() => ({
+      [`b-timeline-item__icon--${m.value}`]: m.value && !I.value
+    })), a = o(() => ({
+      "b-timeline-item--note": I.value
+    }));
+    z(ke, !0);
+    const _ = {
+      title: e.title,
+      date: e.timestamp.date
+    }, T = K(re), { timelineEntries: s, unregisterTimelineEntry: E } = T(_);
+    _e(() => E());
+    const { showAll: b, showMoreIndex: d, hiddenItems: h, visibleIndexes: c, timegapLimit: r } = K(de), t = o(() => s.value.indexOf(_)), $ = o(() => b.value || !c.value), B = o(
+      () => $.value ? !0 : c.value.includes(t.value)
+    ), D = o(() => typeof e.title == "object"), j = o(() => e.title), O = o(() => {
+      var P;
+      if (!r.value)
+        return null;
+      const U = (P = s.value[t.value - 1]) == null ? void 0 : P.date, me = $.value || c.value.includes(t.value - 1);
+      if (!U || !me)
+        return null;
+      const { date: J } = s.value[t.value], ue = parseInt(
+        ne(U, J, { unit: r.value.unit }),
+        10
+      );
+      return r.value.amount < ue ? ne(U, J, { roundingMethod: "floor" }) : null;
+    }), F = o(() => O.value ? n("timegap", { timegap: O.value }) : ""), v = o(() => h.value && d.value === t.value), C = o(() => t.value !== -1 && t.value === s.value.length - 1);
+    return {
+      // Values
+      isNoteType: I,
+      iconConditionalClasses: N,
+      conditionalClasses: a,
+      displayShowMoreButton: v,
+      showAll: b,
+      hiddenItems: h,
+      isVisible: B,
+      isLinkTitle: D,
+      linkTitleProps: j,
+      timegap: O,
+      timegapAriaLabel: F,
+      isLastItem: C,
+      // Methods
+      generateUid: Ce,
+      hasSlot: Se(l),
+      t: n
+    };
+  }
+}), Pe = {
+  key: 0,
+  class: "b-timeline-item__row"
+}, Ke = { class: "b-timeline-item__content" }, We = { class: "b-timeline-item__row" }, Ze = {
+  class: "b-timeline-item__marker",
+  "aria-hidden": "true"
+}, Ge = {
+  key: 0,
+  class: "b-timeline-item__separator",
+  "data-testid": "last-timeline-item-separator"
+}, Qe = { class: "b-timeline-item__content" }, Xe = { key: 1 }, xe = {
+  key: 5,
+  class: "b-timeline-item__data-list"
+}, et = {
+  key: 1,
+  class: "b-timeline-item__row"
+}, tt = { class: "b-timeline-item__content" };
+function nt(e, l, n, I, m, N) {
+  const a = w("bento-typography"), _ = w("square-small-icon"), T = w("bento-link"), s = w("bento-date"), E = w("bento-structured-list-item"), b = w("bento-structured-list"), d = w("bento-tag"), h = w("bento-button");
+  return e.isVisible ? (i(), f("li", {
+    key: 0,
+    class: W(["b-timeline-item", e.conditionalClasses])
+  }, [
+    e.timegap ? (i(), f("div", Pe, [
+      l[1] || (l[1] = g("div", {
+        class: "b-timeline-item__marker",
+        "aria-hidden": "true"
+      }, [
+        g("div", { class: "b-timeline-item__icon b-timeline-item__icon--timegap" }),
+        g("div", { class: "b-timeline-item__separator" })
+      ], -1)),
+      g("div", Ke, [
+        L(a, {
+          class: "b-timeline-item__timegap",
+          "aria-label": e.timegapAriaLabel
+        }, {
+          default: p(() => [
+            k(y(e.timegap), 1)
+          ]),
+          _: 1
+        }, 8, ["aria-label"])
+      ])
+    ])) : u("", !0),
+    g("div", We, [
+      g("div", Ze, [
+        L(_, {
+          class: W(["b-timeline-item__icon", e.iconConditionalClasses])
+        }, null, 8, ["class"]),
+        e.isLastItem ? u("", !0) : (i(), f("div", Ge))
+      ]),
+      g("div", Qe, [
+        e.isNoteType ? u("", !0) : (i(), S(a, {
+          key: 0,
+          el: "div",
+          variant: "body",
+          strongest: "",
+          class: "b-timeline-item__title",
+          role: "heading",
+          "aria-level": "2"
+        }, {
+          default: p(() => [
+            e.isLinkTitle ? (i(), S(T, H({ key: 0 }, e.linkTitleProps, { "disable-typography": "" }), {
+              default: p(() => [
+                k(y(e.linkTitleProps.title), 1)
+              ]),
+              _: 1
+            }, 16)) : (i(), f("span", Xe, y(e.title), 1))
+          ]),
+          _: 1
+        })),
+        e.isNoteType && (e.description || e.hasSlot("default")) ? (i(), S(a, {
+          key: 1,
+          el: "div",
+          variant: "body",
+          class: "b-timeline-item__description"
+        }, {
+          default: p(() => [
+            V(e.$slots, "default", {}, () => [
+              k(y(e.description), 1)
+            ], !0)
+          ]),
+          _: 3
+        })) : u("", !0),
+        e.timestamp ? (i(), S(a, {
+          key: 2,
+          class: "b-timeline-item__timestamp",
+          el: "div",
+          variant: "caption"
+        }, {
+          default: p(() => [
+            L(s, {
+              date: e.timestamp.date,
+              format: e.timestamp.format,
+              "disable-typography": ""
+            }, null, 8, ["date", "format"]),
+            k(" " + y(e.timestamp.value), 1)
+          ]),
+          _: 1
+        })) : u("", !0),
+        !e.isNoteType && e.additionalTimestamp ? (i(), S(a, {
+          key: 3,
+          class: "b-timeline-item__timestamp",
+          el: "div",
+          variant: "caption"
+        }, {
+          default: p(() => [
+            L(s, {
+              date: e.additionalTimestamp.date,
+              format: e.additionalTimestamp.format,
+              "disable-typography": ""
+            }, null, 8, ["date", "format"]),
+            k(" " + y(e.additionalTimestamp.value), 1)
+          ]),
+          _: 1
+        })) : u("", !0),
+        !e.isNoteType && (e.description || e.hasSlot("default")) ? (i(), S(a, {
+          key: 4,
+          el: "div",
+          variant: "body",
+          class: "b-timeline-item__description"
+        }, {
+          default: p(() => [
+            V(e.$slots, "default", {}, () => [
+              k(y(e.description), 1)
+            ], !0)
+          ]),
+          _: 3
+        })) : u("", !0),
+        !e.isNoteType && e.dataList ? (i(), f("div", xe, [
+          L(b, null, {
+            default: p(() => [
+              (i(!0), f(Y, null, be(e.dataList, (c) => (i(), S(E, {
+                key: e.generateUid(c.label),
+                label: c.label
+              }, {
+                default: p(() => [
+                  L(a, { variant: "caption" }, {
+                    default: p(() => [
+                      k(y(c.value), 1)
+                    ]),
+                    _: 2
+                  }, 1024)
+                ]),
+                _: 2
+              }, 1032, ["label"]))), 128))
+            ]),
+            _: 1
+          })
+        ])) : u("", !0),
+        !e.isNoteType && e.tag ? (i(), S(d, H({ key: 6 }, e.tag, { class: "b-timeline-item__tag" }), null, 16)) : u("", !0)
+      ])
+    ]),
+    e.displayShowMoreButton ? (i(), f("div", et, [
+      l[2] || (l[2] = g("div", {
+        class: "b-timeline-item__marker",
+        "aria-hidden": "true"
+      }, [
+        g("div", { class: "b-timeline-item__separator" })
+      ], -1)),
+      g("div", tt, [
+        L(h, {
+          class: "b-timeline__show-more",
+          variant: "tertiary",
+          onClick: l[0] || (l[0] = (c) => e.showAll = !e.showAll)
+        }, {
+          default: p(() => [
+            e.showAll ? (i(), f(Y, { key: 1 }, [
+              k(y(e.t("showLess")), 1)
+            ], 64)) : (i(), f(Y, { key: 0 }, [
+              k(y(e.t("showMore", { items: e.hiddenItems })), 1)
+            ], 64))
+          ]),
+          _: 1
+        })
+      ])
+    ])) : u("", !0)
+  ], 2)) : u("", !0);
+}
+const yt = /* @__PURE__ */ q(Je, [["render", nt], ["__scopeId", "data-v-78251ada"]]);
+export {
+  A as B,
+  yt as a,
+  Re as b,
+  R as c,
+  le as d,
+  gt as t
+};
+//# sourceMappingURL=timeline-item.DNjubXL2.js.map