@adyen/bento-vue3 1.43.0 → 1.45.0

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

@@ -0,0 +1,558 @@
+import { defineComponent as ne, computed as m, ref as D, toRefs as ce, provide as z, resolveComponent as I, createElementBlock as v, openBlock as i, createCommentVNode as c, createElementVNode as g, createBlock as T, withCtx as h, createTextVNode as w, toDisplayString as y, createVNode as S, renderSlot as H, mergeProps as V, inject as K, onUnmounted as fe, normalizeClass as W, Fragment as Y, renderList as pe } from "vue";
+import { B as oe } from "./button.Cneb6rPP.js";
+import { B as ve } from "./textarea.CCr8inwI.js";
+import { u as ae } from "./i18n.WMYWtwxB.js";
+import { B as _e } from "./button-actions.CShVMUOC.js";
+import { _ as q } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { B as be } from "./date.DeaBl297.js";
+import { B as he } from "./link.ClFi8uSm.js";
+import { B as ge } from "./tag.BuUbvgok.js";
+import { B as ye, d as Ne } from "./typography.DN5eC5ch.js";
+import { a as Ie, B as Ee, S as we } from "./structured-list-item.DpI6jzfM.js";
+import { g as Te } from "./generate-uid.NJ8tVoha.js";
+import { u as Se } from "./use-has-slot.B7eQSabc.js";
+import { r as Ce, l as Me, t as B, a as Z } from "./get-date-locale.BN8xEjY0.js";
+import { c as ke, a as Le } from "./index.DDnf1O9p.js";
+import "../assets/timeline-item.css";
+var G = 1e3 * 60, U = 60 * 24, Q = U * 30, X = U * 365;
+function x(e, o) {
+  var s = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+  Ce(2, arguments);
+  var l = s.locale || Me;
+  if (!l.formatDistance)
+    throw new RangeError("locale must contain localize.formatDistance property");
+  var N = ke(e, o);
+  if (isNaN(N))
+    throw new RangeError("Invalid time value");
+  var r = Le(s);
+  r.addSuffix = !!s.addSuffix, r.comparison = N;
+  var a, f;
+  N > 0 ? (a = B(o), f = B(e)) : (a = B(e), f = B(o));
+  var p = s.roundingMethod == null ? "round" : String(s.roundingMethod), n;
+  if (p === "floor")
+    n = Math.floor;
+  else if (p === "ceil")
+    n = Math.ceil;
+  else if (p === "round")
+    n = Math.round;
+  else
+    throw new RangeError("roundingMethod must be 'floor', 'ceil' or 'round'");
+  var u = f.getTime() - a.getTime(), _ = u / G, C = Z(f) - Z(a), b = (u - C) / G, t;
+  if (s.unit == null ? _ < 1 ? t = "second" : _ < 60 ? t = "minute" : _ < U ? t = "hour" : b < Q ? t = "day" : b < X ? t = "month" : t = "year" : t = String(s.unit), t === "second") {
+    var M = n(u / 1e3);
+    return l.formatDistance("xSeconds", M, r);
+  } else if (t === "minute") {
+    var k = n(_);
+    return l.formatDistance("xMinutes", k, r);
+  } else if (t === "hour") {
+    var O = n(_ / 60);
+    return l.formatDistance("xHours", O, r);
+  } else if (t === "day") {
+    var R = n(b / U);
+    return l.formatDistance("xDays", R, r);
+  } else if (t === "month") {
+    var d = n(b / Q);
+    return d === 12 && s.unit !== "month" ? l.formatDistance("xYears", 1, r) : l.formatDistance("xMonths", d, r);
+  } else if (t === "year") {
+    var E = n(b / X);
+    return l.formatDistance("xYears", E, r);
+  }
+  throw new RangeError("unit must be 'second', 'minute', 'hour', 'day', 'month' or 'year'");
+}
+var A = /* @__PURE__ */ ((e) => (e.BOTTOM = "bottom", e.AFTER_FIRST = "after-first", e.BEFORE_LAST = "before-last", e))(A || {}), Ae = /* @__PURE__ */ ((e) => (e.SECOND = "second", e.MINUTE = "minute", e.HOUR = "hour", e.DAY = "day", e.MONTH = "month", e.YEAR = "year", e))(Ae || {}), j = /* @__PURE__ */ ((e) => (e.DEFAULT = "SquareSmallIcon", e.SUCCESS = "CheckedCircleIcon", e.CRITICAL = "CrossCircleIcon", e))(j || {}), se = /* @__PURE__ */ ((e) => (e.BLACK = "black", e.BLUE = "blue", e.GREEN = "green", e.GREY = "grey", e.ORANGE = "orange", e.RED = "red", e.YELLOW = "yellow", e))(se || {});
+const le = Symbol("timeline register entry injection key"), re = Symbol("timeline config obj injection key"), ee = {
+  "en-US": {
+    addNote: "Add note",
+    cancel: "Cancel"
+  },
+  "pt-BR": {
+    addNote: "Adicionar anotação",
+    cancel: "Cancelar"
+  },
+  "ja-JP": {
+    addNote: "メモを追加",
+    cancel: "キャンセル"
+  }
+}, Oe = ne({
+  i18n: { messages: ee },
+  name: "bento-timeline",
+  components: { BentoButton: oe, BentoButtonActions: _e, BentoTextarea: ve },
+  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: o }) {
+    const { t: s } = ae({ messages: ee }), l = m(() => s("addNote")), N = m(() => s("cancel")), r = D(), a = (d) => {
+      r.value = d;
+    }, f = D(!1), p = () => {
+      f.value = !f.value;
+    }, n = () => {
+      o("add-timeline-note", {
+        description: r.value,
+        timestamp: { date: /* @__PURE__ */ new Date() },
+        type: "note"
+      }), p();
+    }, u = D([]), _ = m(
+      () => e.showMore && u.value.length > e.showMore.limit ? u.value.length - e.showMore.limit : null
+    ), C = D(!1), { timegapLimit: b } = ce(e), t = m(() => {
+      if (!e.showMore)
+        return null;
+      const d = Array.from(u.value.keys());
+      return e.showMore.placement === A.BEFORE_LAST ? [
+        ...d.slice(0, e.showMore.limit - 1),
+        d[d.length - 1]
+      ] : e.showMore.placement === A.AFTER_FIRST ? [d[0], ...d.slice(-(e.showMore.limit - 1))] : d.slice(0, e.showMore.limit);
+    }), M = m(() => {
+      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;
+      }
+    }), k = (d) => () => {
+      var E;
+      u.value = (E = u.value) == null ? void 0 : E.filter(($, L) => L !== d);
+    }, O = ({ title: d, description: E, date: $ }) => {
+      const L = u.value.length;
+      return u.value.push({ title: d, description: E, date: $ }), { timelineEntries: u, index: L, unregisterTimelineEntry: k(L) };
+    }, R = {
+      showAll: C,
+      showMoreIndex: M,
+      hiddenItems: _,
+      visibleIndexes: t,
+      timegapLimit: b
+    };
+    return z(le, O), z(re, R), {
+      addNoteLabel: l,
+      cancelLabel: N,
+      toggleAddNote: p,
+      updateNoteContent: a,
+      addNoteToTimeline: n,
+      showAddNoteTextArea: f
+    };
+  }
+}), Re = { class: "b-timeline" }, $e = {
+  key: 0,
+  class: "b-timeline__add-note-section"
+}, De = { key: 1 }, Be = { class: "b-timeline__items" };
+function je(e, o, s, l, N, r) {
+  const a = I("bento-button"), f = I("bento-textarea"), p = I("bento-button-actions");
+  return i(), v("div", Re, [
+    e.addNote ? (i(), v("div", $e, [
+      e.showAddNoteTextArea ? c("", !0) : (i(), T(a, {
+        key: 0,
+        variant: "tertiary",
+        onClick: e.toggleAddNote
+      }, {
+        default: h(() => [
+          w(y(e.addNoteLabel), 1)
+        ]),
+        _: 1
+      }, 8, ["onClick"])),
+      e.showAddNoteTextArea ? (i(), v("div", De, [
+        S(f, {
+          label: e.addNoteLabel,
+          "character-limit": 150,
+          resizable: "vertical",
+          onInput: e.updateNoteContent
+        }, null, 8, ["label", "onInput"]),
+        S(p, {
+          actions: [
+            { title: e.addNoteLabel, event: e.addNoteToTimeline },
+            { title: e.cancelLabel, event: e.toggleAddNote }
+          ]
+        }, null, 8, ["actions"])
+      ])) : c("", !0)
+    ])) : c("", !0),
+    g("ol", Be, [
+      H(e.$slots, "default", {}, void 0, !0)
+    ])
+  ]);
+}
+const vt = /* @__PURE__ */ q(Oe, [["render", je], ["__scopeId", "data-v-f844f908"]]);
+let te = 0;
+const Ue = {
+  beforeCreate() {
+    this.uuid = te.toString(), te += 1;
+  }
+}, Fe = { key: 0 };
+function Ye(e, o, s, l, N, r) {
+  return i(), v("svg", V({ 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(), v("title", Fe, y(e.$attrs["svg-title"]), 1)) : c("", !0),
+    o[0] || (o[0] = g("path", {
+      fill: "#00112C",
+      d: "M5.5 3.25C4.25736 3.25 3.25 4.25736 3.25 5.5V10.5C3.25 11.7426 4.25736 12.75 5.5 12.75H10.5C11.7426 12.75 12.75 11.7426 12.75 10.5V5.5C12.75 4.25736 11.7426 3.25 10.5 3.25H5.5Z"
+    }, null, -1))
+  ], 16);
+}
+const ze = /* @__PURE__ */ q(Ue, [["render", Ye]]), ie = {
+  "en-US": {
+    timegap: "{timegap} passed between the timeline events",
+    showMore: "Show {items} more",
+    showLess: "Show less"
+  },
+  "pt-BR": {
+    showLess: "Mostrar menos"
+  },
+  "ja-JP": {
+    showLess: "表示内容を減らす"
+  }
+}, He = ne({
+  name: "bento-timeline-item",
+  components: {
+    BentoButton: oe,
+    BentoDate: be,
+    BentoLink: he,
+    BentoTag: ge,
+    BentoTypography: ye,
+    BentoStructuredList: Ee,
+    BentoStructuredListItem: Ie,
+    SquareSmallIcon: ze
+  },
+  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(se).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(j).includes(e)
+    }
+  },
+  setup(e, { slots: o }) {
+    const { t: s } = ae({ messages: ie }), l = m(() => e.type === "note"), N = m(() => e.variant === j.CRITICAL ? "red" : e.variant === j.SUCCESS ? "green" : e.status);
+    e.variant && Ne(
+      '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 r = m(() => ({
+      [`b-timeline-item__icon--${N.value}`]: N.value && !l.value
+    })), a = m(() => ({
+      "b-timeline-item--note": l.value
+    }));
+    z(we, !0);
+    const f = K(le), { timelineEntries: p, index: n, unregisterTimelineEntry: u } = f({
+      title: e.title,
+      date: e.timestamp.date
+    });
+    fe(() => u());
+    const { showAll: _, showMoreIndex: C, hiddenItems: b, visibleIndexes: t, timegapLimit: M } = K(re), k = m(() => _.value || !t.value), O = m(() => k.value ? !0 : t.value.includes(n)), R = m(() => typeof e.title == "object"), d = m(() => e.title), E = m(() => {
+      var P;
+      if (!M.value)
+        return null;
+      const F = (P = p.value[n - 1]) == null ? void 0 : P.date, me = k.value || t.value.includes(n - 1);
+      if (!F || !me)
+        return null;
+      const { date: J } = p.value[n], ue = parseInt(
+        x(F, J, { unit: M.value.unit }),
+        10
+      );
+      return M.value.amount < ue ? x(F, J, { roundingMethod: "floor" }) : null;
+    }), $ = m(() => E.value ? s("timegap", { timegap: E.value }) : ""), L = m(() => b.value && C.value === n), de = m(() => n === p.value.length - 1);
+    return {
+      // Values
+      isNoteType: l,
+      iconConditionalClasses: r,
+      conditionalClasses: a,
+      displayShowMoreButton: L,
+      showAll: _,
+      hiddenItems: b,
+      isVisible: O,
+      isLinkTitle: R,
+      linkTitleProps: d,
+      timegap: E,
+      timegapAriaLabel: $,
+      isLastItem: de,
+      // Methods
+      generateUid: Te,
+      hasSlot: Se(o),
+      t: s
+    };
+  }
+}), Ve = {
+  key: 0,
+  class: "b-timeline-item__row"
+}, qe = { class: "b-timeline-item__content" }, Je = { class: "b-timeline-item__row" }, Pe = {
+  class: "b-timeline-item__marker",
+  "aria-hidden": "true"
+}, Ke = {
+  key: 0,
+  class: "b-timeline-item__separator",
+  "data-testid": "last-timeline-item-separator"
+}, We = { class: "b-timeline-item__content" }, Ze = { key: 1 }, Ge = {
+  key: 5,
+  class: "b-timeline-item__data-list"
+}, Qe = {
+  key: 1,
+  class: "b-timeline-item__row"
+}, Xe = { class: "b-timeline-item__content" };
+function xe(e, o, s, l, N, r) {
+  const a = I("bento-typography"), f = I("square-small-icon"), p = I("bento-link"), n = I("bento-date"), u = I("bento-structured-list-item"), _ = I("bento-structured-list"), C = I("bento-tag"), b = I("bento-button");
+  return e.isVisible ? (i(), v("li", {
+    key: 0,
+    class: W(["b-timeline-item", e.conditionalClasses])
+  }, [
+    e.timegap ? (i(), v("div", Ve, [
+      o[1] || (o[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", qe, [
+        S(a, {
+          class: "b-timeline-item__timegap",
+          "aria-label": e.timegapAriaLabel
+        }, {
+          default: h(() => [
+            w(y(e.timegap), 1)
+          ]),
+          _: 1
+        }, 8, ["aria-label"])
+      ])
+    ])) : c("", !0),
+    g("div", Je, [
+      g("div", Pe, [
+        S(f, {
+          class: W(["b-timeline-item__icon", e.iconConditionalClasses])
+        }, null, 8, ["class"]),
+        e.isLastItem ? c("", !0) : (i(), v("div", Ke))
+      ]),
+      g("div", We, [
+        e.isNoteType ? c("", !0) : (i(), T(a, {
+          key: 0,
+          el: "div",
+          variant: "body",
+          strongest: "",
+          class: "b-timeline-item__title",
+          role: "heading"
+        }, {
+          default: h(() => [
+            e.isLinkTitle ? (i(), T(p, V({ key: 0 }, e.linkTitleProps, { "disable-typography": "" }), {
+              default: h(() => [
+                w(y(e.linkTitleProps.title), 1)
+              ]),
+              _: 1
+            }, 16)) : (i(), v("span", Ze, y(e.title), 1))
+          ]),
+          _: 1
+        })),
+        e.isNoteType && (e.description || e.hasSlot("default")) ? (i(), T(a, {
+          key: 1,
+          el: "div",
+          variant: "body",
+          class: "b-timeline-item__description"
+        }, {
+          default: h(() => [
+            H(e.$slots, "default", {}, () => [
+              w(y(e.description), 1)
+            ], !0)
+          ]),
+          _: 3
+        })) : c("", !0),
+        e.timestamp ? (i(), T(a, {
+          key: 2,
+          class: "b-timeline-item__timestamp",
+          el: "div",
+          variant: "caption"
+        }, {
+          default: h(() => [
+            S(n, {
+              date: e.timestamp.date,
+              format: e.timestamp.format,
+              "disable-typography": ""
+            }, null, 8, ["date", "format"]),
+            w(" " + y(e.timestamp.value), 1)
+          ]),
+          _: 1
+        })) : c("", !0),
+        !e.isNoteType && e.additionalTimestamp ? (i(), T(a, {
+          key: 3,
+          class: "b-timeline-item__timestamp",
+          el: "div",
+          variant: "caption"
+        }, {
+          default: h(() => [
+            S(n, {
+              date: e.additionalTimestamp.date,
+              format: e.additionalTimestamp.format,
+              "disable-typography": ""
+            }, null, 8, ["date", "format"]),
+            w(" " + y(e.additionalTimestamp.value), 1)
+          ]),
+          _: 1
+        })) : c("", !0),
+        !e.isNoteType && (e.description || e.hasSlot("default")) ? (i(), T(a, {
+          key: 4,
+          el: "div",
+          variant: "body",
+          class: "b-timeline-item__description"
+        }, {
+          default: h(() => [
+            H(e.$slots, "default", {}, () => [
+              w(y(e.description), 1)
+            ], !0)
+          ]),
+          _: 3
+        })) : c("", !0),
+        !e.isNoteType && e.dataList ? (i(), v("div", Ge, [
+          S(_, null, {
+            default: h(() => [
+              (i(!0), v(Y, null, pe(e.dataList, (t) => (i(), T(u, {
+                key: e.generateUid(t.label),
+                label: t.label
+              }, {
+                default: h(() => [
+                  S(a, { variant: "caption" }, {
+                    default: h(() => [
+                      w(y(t.value), 1)
+                    ]),
+                    _: 2
+                  }, 1024)
+                ]),
+                _: 2
+              }, 1032, ["label"]))), 128))
+            ]),
+            _: 1
+          })
+        ])) : c("", !0),
+        !e.isNoteType && e.tag ? (i(), T(C, V({ key: 6 }, e.tag, { class: "b-timeline-item__tag" }), null, 16)) : c("", !0)
+      ])
+    ]),
+    e.displayShowMoreButton ? (i(), v("div", Qe, [
+      o[2] || (o[2] = g("div", {
+        class: "b-timeline-item__marker",
+        "aria-hidden": "true"
+      }, [
+        g("div", { class: "b-timeline-item__separator" })
+      ], -1)),
+      g("div", Xe, [
+        S(b, {
+          class: "b-timeline__show-more",
+          variant: "tertiary",
+          onClick: o[0] || (o[0] = (t) => e.showAll = !e.showAll)
+        }, {
+          default: h(() => [
+            e.showAll ? (i(), v(Y, { key: 1 }, [
+              w(y(e.t("showLess")), 1)
+            ], 64)) : (i(), v(Y, { key: 0 }, [
+              w(y(e.t("showMore", { items: e.hiddenItems })), 1)
+            ], 64))
+          ]),
+          _: 1
+        })
+      ])
+    ])) : c("", !0)
+  ], 2)) : c("", !0);
+}
+const _t = /* @__PURE__ */ q(He, [["render", xe], ["__scopeId", "data-v-b2c79a1c"]]);
+export {
+  A as B,
+  _t as a,
+  Ae as b,
+  j as c,
+  se as d,
+  vt as t
+};
+//# sourceMappingURL=timeline-item.DG9YaOiC.js.map