@stsdti/approvable-vue 0.1.4 → 0.1.7

package/dist/approvable-vue.mjs

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