@stsdti/approvable-vue 0.1.0

package/dist/approvable-vue.mjs

@@ -0,0 +1,902 @@
+import { inject as J, ref as T, computed as C, watch as se, openBlock as e, createElementBlock as a, normalizeClass as N, createElementVNode as t, toDisplayString as c, unref as w, createCommentVNode as y, createTextVNode as z, Fragment as D, renderList as q, useTemplateRef as oe, onMounted as re, onBeforeUnmount as ke, withDirectives as ge, vModelText as Se, nextTick as we, markRaw as Ae, renderSlot as H, createBlock as K, resolveDynamicComponent as W, mergeProps as X, withCtx as ie, createVNode as pe, normalizeStyle as Q, createSlots as $e, Teleport as Ce, withModifiers as Ee, withKeys as Re, useModel as De, mergeModels as le } from "vue";
+import { mergeMessages as Le, ApprovableAuditRepository as xe, formatMessage as G, get as V, notifyError as ne, ApprovableStepRepository as ue, isSuccessResponse as de, notifySuccess as ce, registerActionRenderer as Oe, createStepViewModel as Me, approvableStatusTone as Ie, approvableStepGlyph as Te, isClassIcon as Y, actionRenderer as Ne, performStepAction as Ve, ApprovableStatus as B, createApprovableViewModel as je, isRegisteredIcon as Pe, isUrlIcon as qe, ApprovableStatusRepository as Be } from "@stsdti/approvable-core";
+import { actionRenderer as fa, actionSlotName as ha, isClassIcon as ya, isRegisteredIcon as _a, isUrlIcon as ka, unregisterActionRenderer as ga } from "@stsdti/approvable-core";
+const ve = Symbol("approvable.messages");
+function U() {
+  return Le(J(ve, null));
+}
+const Ke = {
+  key: 0,
+  class: "approvable-timeline-header"
+}, Ue = { class: "approvable-timeline-eyebrow" }, Fe = { class: "approvable-timeline-title" }, Ge = ["disabled"], He = {
+  key: 1,
+  class: "approvable-timeline-state",
+  role: "status"
+}, ze = {
+  key: 2,
+  class: "approvable-timeline-error"
+}, Qe = {
+  key: 3,
+  class: "approvable-timeline-state"
+}, We = { class: "approvable-timeline-list" }, Ye = ["stroke-width"], Je = ["d"], Xe = { class: "approvable-timeline-content" }, Ze = { class: "approvable-timeline-line" }, et = { class: "approvable-timeline-actor" }, tt = { class: "approvable-timeline-operation" }, at = { class: "approvable-timeline-time" }, st = {
+  key: 0,
+  class: "approvable-timeline-comment"
+}, ot = {
+  key: 1,
+  class: "approvable-timeline-change"
+}, lt = { class: "approvable-timeline-change-label" }, nt = { class: "approvable-timeline-value approvable-timeline-value--old" }, rt = { class: "approvable-timeline-value approvable-timeline-value--new" }, it = { class: "approvable-timeline-footer" }, me = {
+  __name: "ApprovableAuditTimeline",
+  props: {
+    approvableId: { type: [Number, String], required: !0 },
+    limit: { type: Number, default: 100 },
+    showHeader: { type: Boolean, default: !0 }
+  },
+  emits: ["loaded"],
+  setup(r, { expose: _, emit: b }) {
+    const f = r, h = b, S = U(), k = new xe(), o = T([]), m = T(!1), L = T(""), A = {
+      approvable_status_name: "Status",
+      comment: "Comment",
+      responsible: "Assigned to",
+      is_active: "Active step"
+    }, O = {
+      approve: { paths: ["M4 8.4l2.8 2.8 5.4-6"], width: 2.8 },
+      reject: { paths: ["M5.2 5.2l5.6 5.6M10.8 5.2l-5.6 5.6"], width: 2.4 },
+      comment: { paths: ["M8 4.6v3.6l2.6 1.6"], width: 2.2 },
+      status: { paths: ["M4 8h8M9.2 5.4L11.8 8l-2.6 2.6"], width: 2.2 },
+      undo: { paths: ["M4.4 6.6h3.4M4.4 6.6v-3M4.6 9.4a3.6 3.6 0 1 0 1-3.2"], width: 2 },
+      signal: { paths: ["M8 3.4v3.2M5.2 5.2l2.2 2.2M8 11.6a1.4 1.4 0 1 0 0-2.8 1.4 1.4 0 0 0 0 2.8"], width: 1.8 },
+      created: { paths: ["M4.4 8h7.2"], width: 2.2 },
+      update: { paths: ["M4.4 8h7.2"], width: 2.2 }
+    }, v = /* @__PURE__ */ new Set(["created", "update"]), d = C(() => {
+      const s = o.value.filter((l) => l.approvable_step_id), n = /* @__PURE__ */ new Map();
+      for (const l of s) {
+        const i = l.request_id || `audit-${l.id}`;
+        n.has(i) || n.set(i, []), n.get(i).push(l);
+      }
+      return [...n.values()].map((l) => {
+        const i = l[0], $ = x(i), F = l.flatMap(u);
+        return {
+          id: i.request_id || `audit-${i.id}`,
+          entries: l,
+          audit: i,
+          kind: $,
+          // A modifier class rather than utilities: the accent for each kind of
+          // event is a theme decision, so it belongs in the stylesheets alongside
+          // every other colour, not baked into the component.
+          kindClass: `approvable-timeline-marker--${$}`,
+          icon: O[$],
+          isQuiet: v.has($),
+          isSingleLine: F.length === 0
+        };
+      }).sort((l, i) => new Date(i.audit.created_at) - new Date(l.audit.created_at));
+    });
+    function x(s) {
+      var l, i, $;
+      const n = (l = s.metadata) == null ? void 0 : l.button;
+      return n != null && n.is_undo ? "undo" : (n == null ? void 0 : n.result) === "rejected" ? "reject" : (n == null ? void 0 : n.result) === "approved" ? "approve" : ((i = s.metadata) == null ? void 0 : i.operation) === "comment" ? "comment" : (($ = s.metadata) == null ? void 0 : $.operation) === "signal" ? "signal" : s.event === "created" ? "created" : j(s) ? "status" : "update";
+    }
+    function j(s) {
+      var i, $;
+      const n = (i = s.old_values) == null ? void 0 : i.approvable_status_name, l = ($ = s.new_values) == null ? void 0 : $.approvable_status_name;
+      return l !== void 0 && n !== l;
+    }
+    function R(s) {
+      var i, $, F, Z, ee, te;
+      const n = (i = s.metadata) == null ? void 0 : i.button;
+      if (n) {
+        const ae = n.text || n.label || n.id || "action";
+        return n.is_undo ? "Reverted the decision" : n.is_revision ? `Changed decision to ${ae}` : ae;
+      }
+      if ((($ = s.metadata) == null ? void 0 : $.operation) === "comment") return "Comment added";
+      if (((F = s.metadata) == null ? void 0 : F.operation) === "signal") return `Signal received: ${((ee = (Z = s.metadata) == null ? void 0 : Z.signal) == null ? void 0 : ee.name) || ""}`.trim();
+      if (s.event === "created") return "Step started";
+      const l = (te = s.new_values) == null ? void 0 : te.approvable_status_name;
+      return j(s) && l ? `Status set to ${l}` : "Step updated";
+    }
+    function p(s = {}) {
+      return s.type === "system" ? "System" : s.name ? s.name : s.email ? s.email : s.id ? s.type === "fake" ? `Test user ${s.id}` : `User ${s.id}` : s.type === "fake" ? "Test identity" : "Automated";
+    }
+    function u(s) {
+      const n = s.old_values || {}, l = s.new_values || {};
+      return Object.keys(A).filter((i) => i in n || i in l).map((i) => ({ key: i, label: A[i], oldValue: n[i], newValue: l[i] })).filter((i) => i.oldValue !== i.newValue);
+    }
+    function E(s) {
+      return s.oldValue !== void 0 && s.oldValue !== null && s.oldValue !== "";
+    }
+    function P(s) {
+      if (s == null || s === "") return "—";
+      if (typeof s == "boolean") return s ? "Yes" : "No";
+      if (Array.isArray(s)) return s.length ? s.join(", ") : "—";
+      const n = typeof s == "object" ? JSON.stringify(s) : String(s);
+      return n.length > 180 ? `${n.slice(0, 177)}…` : n;
+    }
+    function I(s) {
+      if (!s) return "";
+      const n = new Date(s);
+      return Number.isNaN(n.getTime()) ? s : new Intl.DateTimeFormat(void 0, {
+        dateStyle: "medium",
+        timeStyle: "short"
+      }).format(n);
+    }
+    async function M() {
+      var s, n;
+      if (!f.approvableId) {
+        o.value = [], m.value = !1, L.value = "The approval history is unavailable because the approvable has no id.";
+        return;
+      }
+      m.value = !0, L.value = "";
+      try {
+        const l = await k.fetchTimeline(f.approvableId, f.limit);
+        if (!l || l.status < 200 || l.status >= 300)
+          throw new Error(((s = l == null ? void 0 : l.data) == null ? void 0 : s.message) || "The audit timeline could not be loaded.");
+        const i = Array.isArray(l.data) ? l.data : (n = l.data) == null ? void 0 : n.data;
+        o.value = Array.isArray(i) ? i : [];
+      } catch (l) {
+        L.value = (l == null ? void 0 : l.message) || "The audit timeline could not be loaded.";
+      } finally {
+        m.value = !1;
+      }
+    }
+    const g = C(() => G(S.eventCount, { count: d.value.length }));
+    return se(d, (s) => h("loaded", s.length)), se(() => f.approvableId, M, { immediate: !0 }), _({ refresh: M }), (s, n) => (e(), a("section", {
+      class: N(["approvable-timeline", r.showHeader && "approvable-timeline--panel"])
+    }, [
+      r.showHeader ? (e(), a("div", Ke, [
+        t("p", Ue, c(w(S).history), 1),
+        t("h3", Fe, c(g.value), 1),
+        t("button", {
+          type: "button",
+          class: "approvable-timeline-refresh",
+          disabled: m.value,
+          onClick: M
+        }, c(m.value ? "Loading…" : "Refresh"), 9, Ge)
+      ])) : y("", !0),
+      m.value ? (e(), a("div", He, [...n[0] || (n[0] = [
+        t("span", {
+          class: "approvable-spinner",
+          "aria-hidden": "true"
+        }, null, -1),
+        z(" Loading approval history… ", -1)
+      ])])) : L.value ? (e(), a("p", ze, c(L.value), 1)) : d.value.length ? (e(), a(D, { key: 4 }, [
+        t("ol", We, [
+          (e(!0), a(D, null, q(d.value, (l) => (e(), a("li", {
+            key: l.id,
+            class: N(["approvable-timeline-item", {
+              "approvable-timeline-item--single-line": l.isSingleLine,
+              "approvable-timeline-item--quiet": l.isQuiet
+            }])
+          }, [
+            t("span", {
+              class: N(["approvable-timeline-marker", l.kindClass])
+            }, [
+              (e(), a("svg", {
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": l.icon.width,
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                viewBox: "0 0 16 16",
+                "aria-hidden": "true"
+              }, [
+                (e(!0), a(D, null, q(l.icon.paths, (i, $) => (e(), a("path", {
+                  key: $,
+                  d: i
+                }, null, 8, Je))), 128))
+              ], 8, Ye))
+            ], 2),
+            t("div", Xe, [
+              t("div", Ze, [
+                t("p", et, c(p(l.audit.actor)), 1),
+                t("p", tt, c(R(l.audit)), 1),
+                t("time", at, c(I(l.audit.created_at)), 1)
+              ]),
+              (e(!0), a(D, null, q(l.entries, (i) => (e(), a(D, {
+                key: i.id
+              }, [
+                (e(!0), a(D, null, q(u(i), ($) => (e(), a(D, {
+                  key: `${i.id}-${$.key}`
+                }, [
+                  $.key === "comment" ? (e(), a("p", st, c(P($.newValue)), 1)) : (e(), a("p", ot, [
+                    t("span", lt, c($.label), 1),
+                    E($) ? (e(), a(D, { key: 0 }, [
+                      t("span", nt, c(P($.oldValue)), 1),
+                      n[1] || (n[1] = t("span", { class: "approvable-timeline-arrow" }, "→", -1))
+                    ], 64)) : y("", !0),
+                    t("span", rt, c(P($.newValue)), 1)
+                  ]))
+                ], 64))), 128))
+              ], 64))), 128))
+            ])
+          ], 2))), 128))
+        ]),
+        t("p", it, c(w(S).allEventsShown), 1)
+      ], 64)) : (e(), a("p", Qe, "No approval activity yet."))
+    ], 2));
+  }
+}, pt = ["title"], ut = {
+  key: 0,
+  class: "approvable-popover-panel"
+}, dt = {
+  key: 0,
+  class: "approvable-loading"
+}, ct = { class: "approvable-popover-title" }, vt = {
+  key: 1,
+  class: "approvable-popover-meta"
+}, mt = { class: "approvable-popover-author" }, bt = { class: "approvable-popover-actions" }, be = {
+  __name: "ApprovableStepComment",
+  props: {
+    approvableStep: {
+      required: !0
+    },
+    disabled: {
+      required: !0,
+      type: Boolean
+    }
+  },
+  emits: ["isLoading", "refresh"],
+  setup(r, { emit: _ }) {
+    const b = r, f = _, h = oe("rootRef"), S = oe("textareaRef"), k = T(!1), o = T(!1), m = T(null), L = C(() => V(b.approvableStep, "commented_by"));
+    function A() {
+      k.value ? v() : O();
+    }
+    function O() {
+      m.value = V(b.approvableStep, "comment"), k.value = !0, we(d);
+    }
+    function v() {
+      k.value = !1;
+    }
+    function d() {
+      const u = S.value;
+      u && (u.style.height = "auto", u.style.height = `${u.scrollHeight}px`);
+    }
+    function x(u) {
+      k.value && h.value && !h.value.contains(u.target) && v();
+    }
+    function j(u) {
+      u.key === "Escape" && v();
+    }
+    re(() => {
+      document.addEventListener("click", x), document.addEventListener("keydown", j);
+    }), ke(() => {
+      document.removeEventListener("click", x), document.removeEventListener("keydown", j);
+    });
+    const R = U();
+    async function p() {
+      if (!V(b.approvableStep, "comment") && !m.value) {
+        ne(R.commentRequired);
+        return;
+      }
+      o.value = !0, f("isLoading", !0);
+      const u = {
+        comment: m.value
+      }, E = await new ue().comment(b.approvableStep.id, u);
+      de(E) ? (ce(R.commentSaved), v(), f("refresh")) : ne(R.commentFailed), o.value = !1, f("isLoading", !1);
+    }
+    return (u, E) => (e(), a("div", {
+      ref_key: "rootRef",
+      ref: h,
+      class: "approvable-popover"
+    }, [
+      t("button", {
+        class: "approvable-btn",
+        title: w(R).comments,
+        type: "button",
+        onClick: A
+      }, [...E[1] || (E[1] = [
+        t("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "1.8",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "aria-hidden": "true"
+        }, [
+          t("path", { d: "M8 9h8" }),
+          t("path", { d: "M8 13h6" }),
+          t("path", { d: "M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12z" })
+        ], -1)
+      ])], 8, pt),
+      k.value ? (e(), a("div", ut, [
+        o.value ? (e(), a("div", dt, [...E[2] || (E[2] = [
+          t("span", { class: "approvable-spinner" }, null, -1)
+        ])])) : y("", !0),
+        t("div", ct, c(w(R).comments), 1),
+        L.value ? (e(), a("div", vt, [
+          t("div", null, c(w(R).commentAuthor) + ":", 1),
+          t("div", mt, c(L.value), 1)
+        ])) : y("", !0),
+        r.disabled ? y("", !0) : (e(), a(D, { key: 2 }, [
+          ge(t("textarea", {
+            ref_key: "textareaRef",
+            ref: S,
+            "onUpdate:modelValue": E[0] || (E[0] = (P) => m.value = P),
+            class: "approvable-textarea",
+            rows: "1",
+            onInput: d
+          }, null, 544), [
+            [Se, m.value]
+          ]),
+          t("div", bt, [
+            t("button", {
+              class: "approvable-btn approvable-btn--primary",
+              type: "button",
+              onClick: p
+            }, c(w(R).save), 1)
+          ])
+        ], 64))
+      ])) : y("", !0)
+    ], 512));
+  }
+};
+function ca(r, _) {
+  return Oe(r, Ae(_));
+}
+const fe = Symbol("approvable.linkComponent");
+function ft() {
+  return J(fe, "a");
+}
+function ht(r, _) {
+  return r === "a" ? { href: _ } : { to: _ };
+}
+const he = Symbol("approvable.iconRegistry");
+function yt() {
+  return J(he, {});
+}
+const _t = {
+  key: 0,
+  "aria-hidden": "true",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  viewBox: "0 0 16 16"
+}, kt = ["d", "stroke-width"], gt = { class: "approvable-step-body" }, St = { class: "approvable-step-line" }, wt = { class: "approvable-step-name" }, At = ["title"], $t = {
+  key: 1,
+  class: "approvable-step-spacer"
+}, Ct = {
+  key: 0,
+  class: "approvable-step-status"
+}, Et = { key: 0 }, Rt = {
+  key: 1,
+  class: "approvable-step-date"
+}, Dt = {
+  key: 1,
+  class: "approvable-step-actions"
+}, Lt = { class: "approvable-btn-group" }, xt = ["title", "onClick"], Ot = ["title", "onClick"], Mt = {
+  key: 0,
+  class: "approvable-btn-group"
+}, It = {
+  key: 0,
+  class: "approvable-step-comment"
+}, Tt = ["title"], Nt = ["aria-expanded"], ye = {
+  __name: "ApprovableStep",
+  props: {
+    value: {
+      type: Object,
+      required: !0
+    },
+    approvable: {
+      type: Object,
+      required: !0
+    },
+    resource: {
+      type: Object,
+      required: !0
+    }
+  },
+  emits: ["isLoading", "refresh"],
+  setup(r, { emit: _ }) {
+    const b = _, f = r, h = ft(), S = U(), k = T(!1), o = C(() => Me(f.value)), m = C(() => Ie(o.value.status)), L = C(() => o.value.buttons.length > 0 || !!f.value.can_comment), A = C(() => (!o.value.isActive || !L.value) && !!(o.value.statusName || o.value.performedAt)), O = C(() => ({
+      "approvable-step": !0,
+      "approvable-step--active": o.value.isActive,
+      // A step nobody has reached yet is dimmed; one with an outcome is not.
+      "approvable-step--pending": !o.value.isActive && !m.value,
+      [`approvable-step--${m.value}`]: !!m.value,
+      // Nothing wraps below the name, so the row can hold to a single line.
+      "approvable-step--single-line": !L.value && !o.value.comment.text
+    })), v = {
+      check: { d: "M4 8.4l2.8 2.8 5.4-6", width: 2.8 },
+      cross: { d: "M5.2 5.2l5.6 5.6M10.8 5.2l-5.6 5.6", width: 2.4 },
+      dash: { d: "M4.4 8h7.2", width: 2.2 }
+    }, d = {
+      check: "success",
+      cross: "danger",
+      dash: "muted",
+      ring: "ring",
+      pending: "pending"
+    }, x = C(() => Te(m.value, o.value.isActive)), j = C(() => v[x.value] ?? null), R = C(() => ({
+      "approvable-step-disc": !0,
+      [`approvable-step-disc--${d[x.value]}`]: !0
+    })), p = C(() => k.value ? o.value.comment.text : o.value.comment.preview), u = (I) => ({
+      "approvable-btn": !0,
+      // A button carrying only an icon collapses to a circle, so the row keeps its
+      // rhythm instead of stretching around an empty label.
+      "approvable-btn--icon": !I.text,
+      "approvable-btn--primary": I.result === "approved"
+    }), E = (I) => o.value.isActive ? Ne(I == null ? void 0 : I.action_ui) : null, P = async (I) => {
+      b("isLoading", !0);
+      const M = await Ve({
+        stepId: o.value.id,
+        button: I,
+        buttons: o.value.buttons
+      });
+      b("isLoading", !1), M.skipped || b("refresh");
+    };
+    return (I, M) => o.value.isVisible ? (e(), a("li", {
+      key: 0,
+      class: N(O.value)
+    }, [
+      t("span", {
+        class: N(R.value)
+      }, [
+        j.value ? (e(), a("svg", _t, [
+          t("path", {
+            d: j.value.d,
+            "stroke-width": j.value.width
+          }, null, 8, kt)
+        ])) : y("", !0)
+      ], 2),
+      t("div", gt, [
+        t("div", St, [
+          H(I.$slots, "approvableStepInfo", { step: r.value }, () => [
+            t("span", wt, c(o.value.approverName), 1)
+          ]),
+          H(I.$slots, "approvableStepRole", {
+            step: r.value,
+            role: o.value.approverRole
+          }, () => [
+            o.value.approverRole ? (e(), a("span", {
+              key: 0,
+              title: o.value.approverRole,
+              class: "approvable-step-role"
+            }, c(o.value.approverRole), 9, At)) : (e(), a("span", $t))
+          ]),
+          A.value ? (e(), a("span", Ct, [
+            o.value.statusName ? (e(), a("span", Et, c(o.value.statusName), 1)) : y("", !0),
+            o.value.performedAt ? (e(), a("time", Rt, c(o.value.performedAt), 1)) : y("", !0)
+          ])) : y("", !0),
+          L.value ? (e(), a("div", Dt, [
+            t("div", Lt, [
+              (e(!0), a(D, null, q(o.value.buttons, (g, s) => (e(), a(D, {
+                key: g.id ?? s
+              }, [
+                E(g) ? (e(), K(W(E(g)), {
+                  key: 0,
+                  "action-ui": g.action_ui,
+                  approvable: r.approvable,
+                  button: g,
+                  buttons: [g],
+                  complete: P,
+                  resource: r.resource,
+                  step: r.value,
+                  onIsLoading: M[0] || (M[0] = (n) => b("isLoading", n)),
+                  onRefresh: M[1] || (M[1] = (n) => b("refresh"))
+                }, null, 40, ["action-ui", "approvable", "button", "buttons", "resource", "step"])) : g.link ? (e(), K(W(w(h)), X({
+                  key: 1,
+                  ref_for: !0
+                }, w(ht)(w(h), g.link)), {
+                  default: ie(() => [
+                    t("button", {
+                      title: g.tooltip,
+                      class: N(u(g)),
+                      type: "button",
+                      onClick: (n) => P(g)
+                    }, [
+                      w(Y)(g.icon) ? (e(), a("i", {
+                        key: 0,
+                        class: N(g.icon)
+                      }, null, 2)) : y("", !0)
+                    ], 10, xt)
+                  ]),
+                  _: 2
+                }, 1040)) : (e(), a("button", {
+                  key: 2,
+                  title: g.tooltip,
+                  class: N(u(g)),
+                  type: "button",
+                  onClick: (n) => P(g)
+                }, [
+                  w(Y)(g.icon) ? (e(), a("i", {
+                    key: 0,
+                    class: N(g.icon)
+                  }, null, 2)) : y("", !0),
+                  z(" " + c(g.text), 1)
+                ], 10, Ot))
+              ], 64))), 128))
+            ]),
+            r.value.can_comment ? (e(), a("div", Mt, [
+              pe(be, {
+                "approvable-step": r.value,
+                disabled: !r.value.can_comment,
+                onRefresh: M[2] || (M[2] = (g) => b("refresh")),
+                onIsLoading: M[3] || (M[3] = (g) => b("isLoading", g))
+              }, null, 8, ["approvable-step", "disabled"])
+            ])) : y("", !0)
+          ])) : y("", !0)
+        ]),
+        o.value.comment.text ? (e(), a("p", It, [
+          t("span", {
+            title: o.value.comment.title
+          }, c(p.value), 9, Tt),
+          o.value.comment.isTrimmed ? (e(), a("button", {
+            key: 0,
+            type: "button",
+            class: "approvable-step-comment-more",
+            "aria-expanded": k.value,
+            onClick: M[4] || (M[4] = (g) => k.value = !k.value)
+          }, c(k.value ? w(S).showLess : w(S).showMore), 9, Nt)) : y("", !0)
+        ])) : y("", !0)
+      ])
+    ], 2)) : y("", !0);
+  }
+}, _e = {
+  __name: "ApproveStatusInfo",
+  props: {
+    value: {
+      required: !0
+    },
+    label: {
+      default: null
+    }
+  },
+  setup(r) {
+    const _ = r, b = C(() => {
+      const h = V(_.value, "code", " - ");
+      return {
+        "approvable-badge": !0,
+        "approvable-badge--draft": [B.CODES.CODE_DRAFT].includes(h),
+        "approvable-badge--waiting": [B.CODES.CODE_WAITING].includes(h),
+        "approvable-badge--success": [B.CODES.CODE_APPROVED, B.CODES.CODE_VIEWED, B.CODES.CODE_NOTICED].includes(h),
+        "approvable-badge--danger": [B.CODES.CODE_REJECTED].includes(h),
+        "approvable-badge--muted": [B.CODES.CODE_EXPIRED, B.CODES.CODE_SOLVED].includes(h),
+        "approvable-badge--empty": h === " - "
+      };
+    }), f = C(() => _.label ? _.label : V(_.value, "name", " - "));
+    return (h, S) => (e(), a("span", {
+      class: N(b.value)
+    }, c(f.value), 3));
+  }
+}, Vt = {
+  key: 0,
+  class: "approvable"
+}, jt = {
+  key: 0,
+  class: "approvable-loading"
+}, Pt = { class: "approvable-header" }, qt = { class: "approvable-sr-only" }, Bt = { class: "approvable-updated-at" }, Kt = ["title", "aria-label"], Ut = {
+  class: "approvable-sr-only",
+  "aria-live": "polite"
+}, Ft = {
+  key: 1,
+  class: "approvable-footer"
+}, Gt = { class: "approvable-dialog-header" }, Ht = { class: "approvable-dialog-eyebrow" }, zt = {
+  id: "approvable-history-title",
+  class: "approvable-dialog-title"
+}, Qt = ["aria-label"], Wt = { class: "approvable-dialog-body" }, Yt = {
+  __name: "Approvable",
+  props: {
+    value: {},
+    showApprovableStatus: { type: Boolean, default: !0 },
+    title: { default: "Approval" },
+    isDirectionRow: { default: !1 }
+  },
+  emits: ["refresh", "isLoading"],
+  setup(r, { emit: _ }) {
+    const b = r, f = _, h = T(!1), S = T(null), k = T(!1), o = T(null), m = U(), L = [
+      { name: "118px", meta: "56px", delay: "0s", metaDelay: "0.15s" },
+      { name: "96px", meta: "72px", delay: "0.1s", metaDelay: "0.25s" },
+      { name: "78px", meta: "48px", delay: "0.2s", metaDelay: "0.35s" }
+    ], A = C(() => je(b.value)), O = C(() => o.value === null ? m.historyTitle : G(m.eventCount, { count: o.value })), v = C(() => h.value && !A.value.steps.length), d = C(() => ({
+      "approvable-steps": !0,
+      "approvable-steps--row": b.isDirectionRow
+    })), x = C(() => {
+      const { activeStepNumber: R, visibleStepCount: p, activeApproverName: u } = A.value;
+      if (!R || !p)
+        return null;
+      const E = G(m.stepProgress, {
+        current: R,
+        total: p
+      });
+      return u ? `${E} — ${G(m.awaitingApprover, { name: u })}` : E;
+    }), j = () => {
+      var R;
+      (R = S.value) == null || R.refresh(), f("refresh");
+    };
+    return (R, p) => A.value.hasApprovable ? (e(), a("div", Vt, [
+      h.value && A.value.steps.length ? (e(), a("div", jt, [...p[6] || (p[6] = [
+        t("span", { class: "approvable-spinner" }, null, -1)
+      ])])) : y("", !0),
+      t("div", Pt, [
+        t("h2", qt, c(r.title), 1),
+        v.value ? (e(), a(D, { key: 0 }, [
+          p[7] || (p[7] = t("span", {
+            "aria-hidden": "true",
+            class: "approvable-skeleton-bar approvable-skeleton-bar--pill"
+          }, null, -1)),
+          p[8] || (p[8] = t("span", { class: "approvable-skeleton-spacer" }, null, -1)),
+          p[9] || (p[9] = t("span", {
+            "aria-hidden": "true",
+            class: "approvable-skeleton-bar approvable-skeleton-bar--soft",
+            style: { width: "104px", "animation-delay": "0.2s" }
+          }, null, -1))
+        ], 64)) : (e(), a(D, { key: 1 }, [
+          r.showApprovableStatus ? (e(), K(_e, {
+            key: 0,
+            label: A.value.statusName,
+            value: A.value.status
+          }, null, 8, ["label", "value"])) : y("", !0),
+          t("span", Bt, c(A.value.updatedAt), 1),
+          A.value.id ? (e(), a("button", {
+            key: 1,
+            type: "button",
+            class: "approvable-history-btn",
+            title: w(m).historyTitle,
+            "aria-label": w(m).historyTitle,
+            onClick: p[0] || (p[0] = (u) => k.value = !0)
+          }, c(w(m).history), 9, Kt)) : y("", !0)
+        ], 64))
+      ]),
+      v.value ? (e(), a(D, { key: 1 }, [
+        t("span", Ut, c(w(m).loadingStatus), 1),
+        (e(), a(D, null, q(L, (u) => t("div", {
+          key: u.delay,
+          "aria-hidden": "true",
+          class: "approvable-skeleton-row"
+        }, [
+          t("span", {
+            class: "approvable-skeleton-disc",
+            style: Q({ animationDelay: u.delay })
+          }, null, 4),
+          t("span", {
+            class: "approvable-skeleton-bar",
+            style: Q({ width: u.name, animationDelay: u.delay })
+          }, null, 4),
+          p[10] || (p[10] = t("span", { class: "approvable-skeleton-spacer" }, null, -1)),
+          t("span", {
+            class: "approvable-skeleton-bar approvable-skeleton-bar--soft",
+            style: Q({ width: u.meta, animationDelay: u.metaDelay })
+          }, null, 4)
+        ])), 64)),
+        p[11] || (p[11] = t("div", {
+          class: "approvable-footer",
+          "aria-hidden": "true"
+        }, [
+          t("span", {
+            class: "approvable-skeleton-bar approvable-skeleton-bar--soft",
+            style: { display: "block", width: "132px" }
+          })
+        ], -1))
+      ], 64)) : (e(), a(D, { key: 2 }, [
+        A.value.steps.length ? (e(), a("ol", {
+          key: 0,
+          class: N(d.value)
+        }, [
+          (e(!0), a(D, null, q(A.value.steps, (u) => (e(), K(ye, {
+            key: u.id,
+            approvable: A.value.approvable,
+            resource: r.value,
+            value: u,
+            onIsLoading: p[1] || (p[1] = (E) => h.value = E),
+            onRefresh: j
+          }, $e({ _: 2 }, [
+            q(Object.keys(R.$slots), (E) => ({
+              name: E,
+              fn: ie((P) => [
+                H(R.$slots, E, X({ ref_for: !0 }, P ?? {}))
+              ])
+            }))
+          ]), 1032, ["approvable", "resource", "value"]))), 128))
+        ], 2)) : y("", !0),
+        x.value ? (e(), a("p", Ft, c(x.value), 1)) : y("", !0)
+      ], 64)),
+      (e(), K(Ce, { to: "body" }, [
+        k.value ? (e(), a("div", {
+          key: 0,
+          class: "approvable-dialog-backdrop",
+          onClick: p[5] || (p[5] = Ee((u) => k.value = !1, ["self"]))
+        }, [
+          t("section", {
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": "approvable-history-title",
+            class: "approvable-dialog",
+            onKeydown: p[4] || (p[4] = Re((u) => k.value = !1, ["esc"]))
+          }, [
+            t("header", Gt, [
+              t("p", Ht, [
+                p[12] || (p[12] = t("svg", {
+                  "aria-hidden": "true",
+                  fill: "none",
+                  stroke: "currentColor",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  "stroke-width": "2",
+                  viewBox: "0 0 16 16"
+                }, [
+                  t("path", { d: "M9.6 4.5 6 8l3.6 3.5" })
+                ], -1)),
+                z(" " + c(w(m).history), 1)
+              ]),
+              t("h2", zt, c(O.value), 1),
+              t("button", {
+                type: "button",
+                class: "approvable-dialog-close",
+                "aria-label": w(m).historyClose,
+                onClick: p[2] || (p[2] = (u) => k.value = !1)
+              }, [...p[13] || (p[13] = [
+                t("svg", {
+                  "aria-hidden": "true",
+                  class: "approvable-icon",
+                  fill: "none",
+                  stroke: "currentColor",
+                  "stroke-linecap": "round",
+                  "stroke-width": "2",
+                  viewBox: "0 0 16 16"
+                }, [
+                  t("path", { d: "m5.2 5.2 5.6 5.6M10.8 5.2l-5.6 5.6" })
+                ], -1)
+              ])], 8, Qt)
+            ]),
+            t("div", Wt, [
+              pe(me, {
+                ref_key: "auditTimeline",
+                ref: S,
+                "approvable-id": A.value.id,
+                "show-header": !1,
+                onLoaded: p[3] || (p[3] = (u) => o.value = u)
+              }, null, 8, ["approvable-id"])
+            ])
+          ], 32)
+        ])) : y("", !0)
+      ]))
+    ])) : y("", !0);
+  }
+}, Jt = {
+  key: 0,
+  class: "approvable-actions"
+}, Xt = { class: "approvable-actions-list" }, Zt = ["title", "onClick"], ea = ["src"], ta = {
+  __name: "ApprovableButtons",
+  props: {
+    value: {
+      required: !0
+    }
+  },
+  emits: ["isLoading", "refresh"],
+  setup(r, { emit: _ }) {
+    const b = r, f = _, h = T(!1), S = C(() => V(b.value, "buttons", [])), k = C(() => S.value ? S.value.length > 0 : !1), o = yt(), m = U(), L = (O) => {
+      let v = V(b.value, "id");
+      v && A(v, O);
+    }, A = async (O, v) => {
+      f("isLoading", !0), h.value = !0;
+      const d = await new ue().updateApproveStatus(O, v);
+      de(d) && ce(m.actionSucceeded), f("isLoading", !1), f("refresh");
+    };
+    return (O, v) => k.value ? (e(), a("div", Jt, [
+      v[0] || (v[0] = t("hr", { class: "approvable-divider" }, null, -1)),
+      t("div", Xt, [
+        (e(!0), a(D, null, q(S.value, (d) => (e(), a("button", {
+          key: d.code,
+          title: d.tooltip,
+          class: "approvable-btn",
+          type: "button",
+          onClick: (x) => L(d)
+        }, [
+          H(O.$slots, "icon", { button: d }, () => [
+            w(Pe)(w(o), d.icon) ? (e(), K(W(w(o)[d.icon]), {
+              key: 0,
+              class: "approvable-btn-icon"
+            })) : w(qe)(d.icon) ? (e(), a("img", {
+              key: 1,
+              src: d.icon,
+              alt: "",
+              class: "approvable-btn-icon"
+            }, null, 8, ea)) : w(Y)(d.icon) ? (e(), a("i", {
+              key: 2,
+              class: N(d.icon)
+            }, null, 2)) : y("", !0)
+          ]),
+          z(" " + c(d.text), 1)
+        ], 8, Zt))), 128))
+      ])
+    ])) : y("", !0);
+  }
+}, aa = { class: "approvable-select" }, sa = {
+  key: 0,
+  class: "approvable-select-label"
+}, oa = ["value"], la = ["value"], na = /* @__PURE__ */ Object.assign({
+  inheritAttrs: !1
+}, {
+  __name: "ApprovableStatusSelect",
+  props: /* @__PURE__ */ le({
+    getList: {},
+    label: {
+      default: "Status"
+    }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ le(["mounted"], ["update:modelValue"]),
+  setup(r, { emit: _ }) {
+    const b = _, f = De(r, "modelValue"), h = r, S = T([]), k = async (v) => {
+      let d = [{ field: "search", value: v }];
+      return await new Be().fetchAll({ filters: d });
+    }, o = (v) => String(V(v, "id") ?? V(v, "code", "")), m = (v) => V(v, "name") ?? V(v, "text", ""), L = C(() => f.value ? o(f.value) : ""), A = (v) => {
+      const d = v.target.value;
+      f.value = S.value.find((x) => o(x) === d) ?? null;
+    }, O = async (v = null) => {
+      const d = await (h.getList ?? k)(v);
+      S.value = Array.isArray(d) ? d : [];
+    };
+    return re(async () => {
+      await O(), b("mounted", { refresh: O, options: S });
+    }), (v, d) => (e(), a("label", aa, [
+      r.label ? (e(), a("span", sa, c(r.label), 1)) : y("", !0),
+      t("select", X({
+        value: L.value,
+        class: "approvable-select-input"
+      }, v.$attrs, { onChange: A }), [
+        d[0] || (d[0] = t("option", { value: "" }, "-", -1)),
+        (e(!0), a(D, null, q(S.value, (x) => (e(), a("option", {
+          key: o(x),
+          value: o(x)
+        }, c(m(x)), 9, la))), 128))
+      ], 16, oa)
+    ]));
+  }
+}), ra = { class: "approvable-select-option" }, ia = {
+  __name: "ApprovableStatusSelectOption",
+  props: {
+    value: {}
+  },
+  setup(r) {
+    const _ = r, b = C(() => V(_.value, "name"));
+    return (f, h) => (e(), a("div", ra, [
+      t("span", null, c(b.value), 1)
+    ]));
+  }
+}, pa = {
+  Approvable: Yt,
+  ApprovableStep: ye,
+  ApprovableButtons: ta,
+  ApprovableStepComment: be,
+  ApprovableAuditTimeline: me,
+  ApproveStatusInfo: _e,
+  ApprovableStatusSelect: na,
+  ApprovableStatusSelectOption: ia
+}, va = {
+  install(r, { linkComponent: _ = null, icons: b = null, messages: f = null, register: h = !0 } = {}) {
+    if (_ && r.provide(fe, _), b && r.provide(he, b), f && r.provide(ve, f), h)
+      for (const [S, k] of Object.entries(pa))
+        r.component(S, k);
+  }
+};
+export {
+  he as APPROVABLE_ICON_REGISTRY,
+  fe as APPROVABLE_LINK_COMPONENT,
+  ve as APPROVABLE_MESSAGES,
+  Yt as Approvable,
+  me as ApprovableAuditTimeline,
+  ta as ApprovableButtons,
+  na as ApprovableStatusSelect,
+  ia as ApprovableStatusSelectOption,
+  ye as ApprovableStep,
+  be as ApprovableStepComment,
+  _e as ApproveStatusInfo,
+  fa as approvableActionRenderer,
+  ha as approvableActionSlotName,
+  va as default,
+  ya as isClassIcon,
+  _a as isRegisteredIcon,
+  ka as isUrlIcon,
+  ht as linkProps,
+  ca as registerApprovableActionRenderer,
+  ga as unregisterApprovableActionRenderer,
+  yt as useIconRegistry,
+  ft as useLinkComponent,
+  U as useMessages
+};
+//# sourceMappingURL=approvable-vue.mjs.map