@wishbone-media/spark 0.33.0 → 0.34.0

package/dist/index.js

@@ -1,7 +1,7 @@
-import { computed as L, resolveComponent as A, createElementBlock as v, openBlock as m, normalizeClass as V, createElementVNode as g, createCommentVNode as $, createVNode as S, unref as C, renderSlot as z, reactive as G, Fragment as E, renderList as N, toDisplayString as M, createBlock as H, resolveDynamicComponent as W, markRaw as ce, ref as D, watch as U, onMounted as pe, Transition as ht, withCtx as P, normalizeProps as yt, mergeProps as K, createTextVNode as I, Teleport as vt, TransitionGroup as ue, inject as be, provide as bt, withModifiers as O, toHandlers as Be, useSlots as je, onUnmounted as ze, withDirectives as xt, vShow as kt, h as Le } from "vue";
+import { computed as L, resolveComponent as A, createElementBlock as v, openBlock as m, normalizeClass as V, createElementVNode as g, createCommentVNode as $, createVNode as S, unref as C, renderSlot as z, reactive as G, Fragment as E, renderList as N, toDisplayString as M, createBlock as H, resolveDynamicComponent as W, markRaw as ce, ref as D, watch as U, onMounted as pe, Transition as ht, withCtx as P, normalizeProps as yt, mergeProps as K, createTextVNode as I, Teleport as vt, TransitionGroup as ue, inject as be, provide as bt, withModifiers as O, toHandlers as Be, useSlots as je, onUnmounted as ze, withDirectives as xt, vShow as wt, h as Le } from "vue";
 import { icon as se, library as Ne } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon as he } from "@fortawesome/vue-fontawesome";
-import { faCircleDot as Ue, faEyeDropper as qe, faAnglesLeft as Ze, faAnglesRight as We, faStar as Ke, faSpinnerThird as Ge, faCircle as wt, faFile as Se, faCalendar as Ye, faArrowUp as Xe, faArrowDown as Je, faPlus as Qe, faCircleCheck as _t, faInbox as St, faCloudArrowUp as Ct, faCloudDownload as Tt, faBolt as $t, faUndo as Lt, faEye as Pt, faSignOut as Mt, faXmark as Ce, faTrash as et, faTimes as Vt, faStreetView as Ht, faSortUp as Ft, faSortDown as Dt, faSort as Rt, faScaleBalanced as At, faSatelliteDish as Et, faLayerPlus as It, faLaptopMobile as Ot, faInfoCircle as Bt, faGripDotsVertical as tt, faGearComplex as jt, faFlag as zt, faFaceSmileWink as Nt, faFaceSmileRelaxed as Ut, faExclamationTriangle as qt, faEllipsisVertical as Zt, faEllipsis as Wt, faEdit as Kt, faComments as Gt, faCircleXmark as Yt, faCircleUser as Xt, faChevronUp as Jt, faChevronRight as st, faChevronLeft as at, faChevronDown as ot, faCheckCircle as Qt, faCheck as Te, faBullhorn as es, faBellRing as ts, faBarsSort as ss, faArrowRightToLine as as, faArrowLeftToLine as os } from "@fortawesome/pro-regular-svg-icons";
+import { faCircleDot as Ue, faEyeDropper as qe, faAnglesLeft as Ze, faAnglesRight as We, faStar as Ke, faSpinnerThird as Ge, faCircle as kt, faFile as Se, faCalendar as Ye, faArrowUp as Xe, faArrowDown as Je, faPlus as Qe, faCircleCheck as _t, faInbox as St, faCloudArrowUp as Ct, faCloudDownload as Tt, faBolt as $t, faUndo as Lt, faEye as Pt, faSignOut as Mt, faXmark as Ce, faTrash as et, faTimes as Vt, faStreetView as Ht, faSortUp as Ft, faSortDown as Dt, faSort as Rt, faScaleBalanced as At, faSatelliteDish as Et, faLayerPlus as It, faLaptopMobile as Ot, faInfoCircle as Bt, faGripDotsVertical as tt, faGearComplex as jt, faFlag as zt, faFaceSmileWink as Nt, faFaceSmileRelaxed as Ut, faExclamationTriangle as qt, faEllipsisVertical as Zt, faEllipsis as Wt, faEdit as Kt, faComments as Gt, faCircleXmark as Yt, faCircleUser as Xt, faChevronUp as Jt, faChevronRight as st, faChevronLeft as at, faChevronDown as ot, faCheckCircle as Qt, faCheck as Te, faBullhorn as es, faBellRing as ts, faBarsSort as ss, faArrowRightToLine as as, faArrowLeftToLine as os } from "@fortawesome/pro-regular-svg-icons";
 import { faSortUp as rs, faSortDown as ns, faSort as ls } from "@fortawesome/pro-duotone-svg-icons";
 import { defineStore as fe } from "pinia";
 import { useRoute as ee, useRouter as Y, onBeforeRouteLeave as is } from "vue-router";
@@ -69,7 +69,7 @@ const R = {
   farArrowUp: Xe,
   farCalendar: Ye,
   farFile: Se,
-  farCircle: wt,
+  farCircle: kt,
   farSpinner: Ge,
   farStar: Ke,
   farAnglesRight: We,
@@ -124,7 +124,7 @@ function sl(e) {
 function al(e) {
   Ne.add(...Object.values(R)), e.component("FontAwesomeIcon", he);
 }
-const ks = { class: "flex items-center" }, ws = { class: "shrink-0 self-start" }, _s = { class: "ml-3" }, Ss = {
+const ws = { class: "flex items-center" }, ks = { class: "shrink-0 self-start" }, _s = { class: "ml-3" }, Ss = {
   key: 0,
   class: "ml-auto pl-3 pt-1 self-start"
 }, Cs = { class: "-mx-1.5 -my-1.5" }, re = {
@@ -168,8 +168,8 @@ const ks = { class: "flex items-center" }, ws = { class: "shrink-0 self-start" }
       return m(), v("div", {
         class: V(["rounded-md border p-4", t.value])
       }, [
-        g("div", ks, [
-          g("div", ws, [
+        g("div", ws, [
+          g("div", ks, [
             S(r, {
               icon: C(R)[l.value],
               class: V(a.value)
@@ -195,7 +195,7 @@ const ks = { class: "flex items-center" }, ws = { class: "shrink-0 self-start" }
       ], 2);
     };
   }
-}, ke = [
+}, we = [
   {
     name: "Bolt",
     description: "Job management",
@@ -246,7 +246,7 @@ const ks = { class: "flex items-center" }, ws = { class: "shrink-0 self-start" }
   }
 ], ct = fe("sparkAppSelector", () => {
   const e = G({
-    apps: [...ke]
+    apps: [...we]
   }), s = (n = {}) => {
     if (n.apps && Array.isArray(n.apps)) {
       const o = n.apps.filter((i) => {
@@ -265,7 +265,7 @@ const ks = { class: "flex items-center" }, ws = { class: "shrink-0 self-start" }
       const o = /* @__PURE__ */ new Map();
       Object.keys(n.appHrefs).forEach((i) => {
         o.set(i.toLowerCase(), n.appHrefs[i]);
-      }), e.apps = ke.map((i) => {
+      }), e.apps = we.map((i) => {
         const r = o.get(i.name.toLowerCase());
         return {
           ...i,
@@ -274,7 +274,7 @@ const ks = { class: "flex items-center" }, ws = { class: "shrink-0 self-start" }
       });
       return;
     }
-    e.apps = [...ke];
+    e.apps = [...we];
   }, t = L(() => e.apps), a = (n) => {
     if (!n) return null;
     const o = n.toLowerCase();
@@ -423,7 +423,7 @@ function zs() {
     show: (p = {}) => {
       n();
       const {
-        type: w = "info",
+        type: k = "info",
         message: _ = null,
         component: b = null,
         props: u = {},
@@ -431,9 +431,9 @@ function zs() {
         duration: x = null,
         persistent: y = !1
       } = p;
-      e.type = w, e.message = _, e.component = b ? ce(b) : null, e.props = u, e.closeable = h, e.persistent = y, e.isVisible = !0;
-      const k = x !== null ? x : dt[w];
-      e.duration = k, k > 0 && i(k);
+      e.type = k, e.message = _, e.component = b ? ce(b) : null, e.props = u, e.closeable = h, e.persistent = y, e.isVisible = !0;
+      const w = x !== null ? x : dt[k];
+      e.duration = w, w > 0 && i(w);
     },
     hide: o,
     reset: () => {
@@ -583,9 +583,9 @@ class Ns {
       duration: f,
       position: d,
       createdAt: Date.now()
-    }, w = this.toastState.toasts.filter((_) => _.position === d);
-    if (w.length >= this.toastState.maxToasts) {
-      const _ = this.toastState.newestOnTop ? w[w.length - 1] : w[0];
+    }, k = this.toastState.toasts.filter((_) => _.position === d);
+    if (k.length >= this.toastState.maxToasts) {
+      const _ = this.toastState.newestOnTop ? k[k.length - 1] : k[0];
       this.hideToast(_.id);
     }
     if (this.toastState.newestOnTop) {
@@ -773,9 +773,9 @@ const B = new Ns(), ol = {
               S(re, {
                 type: p.type,
                 closeable: p.closeable,
-                onClose: (w) => i(p.id),
-                onMouseenter: (w) => r(p.id),
-                onMouseleave: (w) => c(p.id)
+                onClose: (k) => i(p.id),
+                onMouseenter: (k) => r(p.id),
+                onMouseleave: (k) => c(p.id)
               }, {
                 default: P(() => [
                   p.component ? (m(), H(W(p.component), K({
@@ -809,9 +809,9 @@ const B = new Ns(), ol = {
               S(re, {
                 type: p.type,
                 closeable: p.closeable,
-                onClose: (w) => i(p.id),
-                onMouseenter: (w) => r(p.id),
-                onMouseleave: (w) => c(p.id)
+                onClose: (k) => i(p.id),
+                onMouseenter: (k) => r(p.id),
+                onMouseleave: (k) => c(p.id)
               }, {
                 default: P(() => [
                   p.component ? (m(), H(W(p.component), K({
@@ -845,9 +845,9 @@ const B = new Ns(), ol = {
               S(re, {
                 type: p.type,
                 closeable: p.closeable,
-                onClose: (w) => i(p.id),
-                onMouseenter: (w) => r(p.id),
-                onMouseleave: (w) => c(p.id)
+                onClose: (k) => i(p.id),
+                onMouseenter: (k) => r(p.id),
+                onMouseleave: (k) => c(p.id)
               }, {
                 default: P(() => [
                   p.component ? (m(), H(W(p.component), K({
@@ -881,9 +881,9 @@ const B = new Ns(), ol = {
               S(re, {
                 type: p.type,
                 closeable: p.closeable,
-                onClose: (w) => i(p.id),
-                onMouseenter: (w) => r(p.id),
-                onMouseleave: (w) => c(p.id)
+                onClose: (k) => i(p.id),
+                onMouseenter: (k) => r(p.id),
+                onMouseleave: (k) => c(p.id)
               }, {
                 default: P(() => [
                   p.component ? (m(), H(W(p.component), K({
@@ -917,9 +917,9 @@ const B = new Ns(), ol = {
               S(re, {
                 type: p.type,
                 closeable: p.closeable,
-                onClose: (w) => i(p.id),
-                onMouseenter: (w) => r(p.id),
-                onMouseleave: (w) => c(p.id)
+                onClose: (k) => i(p.id),
+                onMouseenter: (k) => r(p.id),
+                onMouseleave: (k) => c(p.id)
               }, {
                 default: P(() => [
                   p.component ? (m(), H(W(p.component), K({
@@ -1085,9 +1085,9 @@ const B = new Ns(), ol = {
     }, o = (r, c) => {
       if (!c) return r;
       const d = r.split(" ").filter(Boolean), f = c.split(" ").filter(Boolean);
-      return [...d.filter((w) => !f.some((_) => {
+      return [...d.filter((k) => !f.some((_) => {
         const b = Object.entries(n).find(
-          ([h, x]) => x.test(w)
+          ([h, x]) => x.test(k)
         )?.[0], u = Object.entries(n).find(
           ([h, x]) => x.test(_)
         )?.[0];
@@ -1211,10 +1211,10 @@ const B = new Ns(), ol = {
 }, ba = { class: "text-gray-700" }, xa = {
   key: 0,
   class: "absolute inset-0 flex items-center justify-center bg-blue-50/80 rounded-md pointer-events-none"
-}, ka = {
+}, wa = {
   key: 3,
   class: "flex justify-end mt-4"
-}, wa = {
+}, ka = {
   key: 4,
   class: "text-sm text-gray-500 mt-1"
 }, ll = {
@@ -1299,7 +1299,7 @@ const B = new Ns(), ol = {
       if (r.value = !1, a.disabled || i.value) return;
       const y = x.dataTransfer?.files?.[0];
       if (y) {
-        if (!w(y)) {
+        if (!k(y)) {
           B.show({
             type: "danger",
             message: "File type not accepted."
@@ -1309,16 +1309,16 @@ const B = new Ns(), ol = {
         o.value = y, l("file-selected", y);
       }
     }
-    function w(x) {
-      const y = a.accept.split(",").map((k) => k.trim());
-      for (const k of y) {
-        if (k === "*/*") return !0;
-        if (k.endsWith("/*")) {
-          const T = k.slice(0, -2);
+    function k(x) {
+      const y = a.accept.split(",").map((w) => w.trim());
+      for (const w of y) {
+        if (w === "*/*") return !0;
+        if (w.endsWith("/*")) {
+          const T = w.slice(0, -2);
           if (x.type.startsWith(T + "/")) return !0;
-        } else if (k.startsWith(".")) {
-          if (x.name.toLowerCase().endsWith(k.toLowerCase())) return !0;
-        } else if (x.type === k) return !0;
+        } else if (w.startsWith(".")) {
+          if (x.name.toLowerCase().endsWith(w.toLowerCase())) return !0;
+        } else if (x.type === w) return !0;
       }
       return !1;
     }
@@ -1347,8 +1347,8 @@ const B = new Ns(), ol = {
           const y = await n.post(a.uploadUrl, x, {
             headers: { "Content-Type": "multipart/form-data" },
             params: a.extraParams
-          }), k = a.responseParser(y);
-          l("upload-success", k);
+          }), w = a.responseParser(y);
+          l("upload-success", w);
         } catch (x) {
           l("upload-error", x), B.show({
             type: "danger",
@@ -1365,7 +1365,7 @@ const B = new Ns(), ol = {
       selectedFile: o,
       uploading: i
     }), (x, y) => {
-      const k = A("FormKit"), T = A("font-awesome-icon");
+      const w = A("FormKit"), T = A("font-awesome-icon");
       return m(), v("div", null, [
         e.label ? (m(), v("label", ga, M(e.label), 1)) : $("", !0),
         e.variant === "dashed" ? (m(), v("div", {
@@ -1379,7 +1379,7 @@ const B = new Ns(), ol = {
           onDragleave: O(f, ["prevent"]),
           onDrop: O(p, ["prevent"])
         }, [
-          S(k, {
+          S(w, {
             ref_key: "formkitFileRef",
             ref: c,
             type: "file",
@@ -1433,7 +1433,7 @@ const B = new Ns(), ol = {
           onDragleave: O(f, ["prevent"]),
           onDrop: O(p, ["prevent"])
         }, [
-          S(k, {
+          S(w, {
             type: "file",
             name: e.name,
             accept: e.accept,
@@ -1444,7 +1444,7 @@ const B = new Ns(), ol = {
             g("span", { class: "text-sm text-blue-600 font-medium" }, "Drop file here", -1)
           ])])) : $("", !0)
         ], 34)),
-        e.showUploadButton ? (m(), v("div", ka, [
+        e.showUploadButton ? (m(), v("div", wa, [
           S(q, {
             size: "lg",
             disabled: !o.value || i.value,
@@ -1461,7 +1461,7 @@ const B = new Ns(), ol = {
             _: 1
           }, 8, ["disabled"])
         ])) : $("", !0),
-        i.value && !e.showUploadButton ? (m(), v("p", wa, M(e.uploadingText), 1)) : $("", !0)
+        i.value && !e.showUploadButton ? (m(), v("p", ka, M(e.uploadingText), 1)) : $("", !0)
       ]);
     };
   }
@@ -1544,7 +1544,7 @@ const B = new Ns(), ol = {
           });
           return;
         }
-        w(b);
+        k(b);
       }
     }
     function f(_) {
@@ -1563,9 +1563,9 @@ const B = new Ns(), ol = {
     function p(_) {
       if (!_ || _.length === 0) return;
       const b = _[0].file;
-      b && w(b);
+      b && k(b);
     }
-    async function w(_) {
+    async function k(_) {
       n.value = !0, a("upload-start");
       try {
         const b = new FormData();
@@ -1748,7 +1748,7 @@ const B = new Ns(), ol = {
           (m(!0), v(E, null, N(t.value, (f, p) => (m(), H(C(q), {
             key: p,
             variant: f.variant,
-            onClick: (w) => r.$emit(f.event, f)
+            onClick: (k) => r.$emit(f.event, f)
           }, {
             default: P(() => [
               I(M(f.text), 1)
@@ -2029,13 +2029,13 @@ const J = new Fa(), Da = { class: "fixed inset-0 z-10 w-screen overflow-y-auto"
         "inline-flex items-center transition-colors cursor-pointer",
         "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1"
       ];
-      return h && x.push("opacity-50 cursor-not-allowed"), t.layout === "tabs" ? x.push(...p(u, h)) : t.layout === "vertical" && x.push(...w(u, h)), x;
+      return h && x.push("opacity-50 cursor-not-allowed"), t.layout === "tabs" ? x.push(...p(u, h)) : t.layout === "vertical" && x.push(...k(u, h)), x;
     }
     function p(b, u) {
       const h = ["border-b-2 -mb-px rounded-t font-medium"], x = t.compact ? "text-sm px-3 py-1.5" : "text-sm px-8 py-4";
       return h.push(x), b ? h.push("border-primary-600 text-primary-600") : u ? h.push("border-transparent text-gray-400") : h.push("border-transparent text-gray-600 hover:text-gray-900 hover:border-gray-300"), h;
     }
-    function w(b, u) {
+    function k(b, u) {
       const h = ["font-medium text-sm py-1"];
       return b ? h.push("text-primary-600") : u ? h.push("text-gray-400") : h.push("text-gray-600 hover:text-gray-900"), h;
     }
@@ -2178,16 +2178,16 @@ const J = new Fa(), Da = { class: "fixed inset-0 z-10 w-screen overflow-y-auto"
   f.classList.add("flex", "items-center", "gap-2"), c.forEach((p) => {
     if (p.condition && typeof p.condition == "function" && !p.condition(d))
       return;
-    const w = document.createElement("button");
-    if (w.type = "button", w.classList.add("spark-table-action-button"), p.icon) {
+    const k = document.createElement("button");
+    if (k.type = "button", k.classList.add("spark-table-action-button"), p.icon) {
       const _ = document.createElement("span");
-      _.innerHTML = se({ prefix: "far", iconName: p.icon }).html, _.classList.add("size-4"), w.appendChild(_);
+      _.innerHTML = se({ prefix: "far", iconName: p.icon }).html, _.classList.add("size-4"), k.appendChild(_);
     }
     if (p.label) {
       const _ = document.createElement("span");
-      _.textContent = p.label, w.appendChild(_);
+      _.textContent = p.label, k.appendChild(_);
     }
-    w.addEventListener("click", async (_) => {
+    k.addEventListener("click", async (_) => {
       if (_.preventDefault(), _.stopPropagation(), p.confirm) {
         const b = typeof p.confirm == "string" ? p.confirm : `Are you sure you want to ${p.label?.toLowerCase() || "perform this action"}?`;
         if (!await J.confirm({
@@ -2201,7 +2201,7 @@ const J = new Fa(), Da = { class: "fixed inset-0 z-10 w-screen overflow-y-auto"
           return;
       }
       p.event && e.methods.fireEvent(p.event, d), p.handler && typeof p.handler == "function" && p.handler(d);
-    }), f.appendChild(w);
+    }), f.appendChild(k);
   }), t.appendChild(f);
 }, He = {
   green: "bg-green-100 text-green-800",
@@ -2248,7 +2248,7 @@ const J = new Fa(), Da = { class: "fixed inset-0 z-10 w-screen overflow-y-auto"
   return !1;
 }, Ka = (e) => (s, t, a, l, n, o, i) => {
   t.innerHTML = "", t.classList.add("spark-table-cell-boolean");
-  const r = i.rendererConfig || {}, c = Wa(o), d = c ? r.trueIcon || "check" : r.falseIcon || "xmark", f = c ? r.trueColor || "green" : r.falseColor || "red", p = r.size || 32, w = r.iconPrefix || "far", _ = Fe[f] || Fe.gray;
+  const r = i.rendererConfig || {}, c = Wa(o), d = c ? r.trueIcon || "check" : r.falseIcon || "xmark", f = c ? r.trueColor || "green" : r.falseColor || "red", p = r.size || 32, k = r.iconPrefix || "far", _ = Fe[f] || Fe.gray;
   t.dataset.copyValue = c ? "true" : "false";
   const b = document.createElement("div");
   b.classList.add(
@@ -2260,7 +2260,7 @@ const J = new Fa(), Da = { class: "fixed inset-0 z-10 w-screen overflow-y-auto"
     _.text
   ), b.style.width = `${p}px`, b.style.height = `${p}px`;
   const u = document.createElement("span");
-  u.innerHTML = se({ prefix: w, iconName: d }).html, u.classList.add("flex", "items-center", "justify-center");
+  u.innerHTML = se({ prefix: k, iconName: d }).html, u.classList.add("flex", "items-center", "justify-center");
   const h = Math.round(p * 0.5);
   u.style.fontSize = `${h}px`, b.appendChild(u), t.appendChild(b);
 }, Ga = (e, s = 2) => {
@@ -2303,24 +2303,24 @@ const J = new Fa(), Da = { class: "fixed inset-0 z-10 w-screen overflow-y-auto"
   if (t.innerHTML = "", t.classList.add("spark-table-cell-image"), !o)
     return;
   const r = i.rendererConfig || {}, c = s.getSourceDataAtRow(s.toPhysicalRow(a)), d = r.size || "md", f = De[d] || De.md, p = r.rounded !== !1;
-  let w = r.alt || "";
-  typeof r.alt == "string" && c[r.alt] && (w = c[r.alt]);
+  let k = r.alt || "";
+  typeof r.alt == "string" && c[r.alt] && (k = c[r.alt]);
   const _ = document.createElement("img");
-  _.src = o, _.alt = w, _.classList.add(...f.split(" "), "object-cover"), p ? _.classList.add("rounded-full") : _.classList.add("rounded"), t.appendChild(_);
+  _.src = o, _.alt = k, _.classList.add(...f.split(" "), "object-cover"), p ? _.classList.add("rounded-full") : _.classList.add("rounded"), t.appendChild(_);
 }, Qa = (e) => (s, t, a, l, n, o, i) => {
   if (t.innerHTML = "", t.classList.add("spark-table-cell-date"), !o)
     return;
   const r = i.rendererConfig || {}, c = r.format || "short", d = r.locale || "en-US";
   let f = o;
   try {
-    const w = new Date(o);
-    isNaN(w.getTime()) ? f = o : typeof c == "function" ? f = c(w) : c === "short" ? f = w.toLocaleDateString(d) : c === "long" ? f = w.toLocaleDateString(d, {
+    const k = new Date(o);
+    isNaN(k.getTime()) ? f = o : typeof c == "function" ? f = c(k) : c === "short" ? f = k.toLocaleDateString(d) : c === "long" ? f = k.toLocaleDateString(d, {
       year: "numeric",
       month: "long",
       day: "numeric"
-    }) : c === "relative" ? f = eo(w) : c === "datetime" ? f = w.toLocaleString(d) : f = w.toLocaleDateString(d);
-  } catch (w) {
-    console.error("Error formatting date:", w), f = o;
+    }) : c === "relative" ? f = eo(k) : c === "datetime" ? f = k.toLocaleString(d) : f = k.toLocaleDateString(d);
+  } catch (k) {
+    console.error("Error formatting date:", k), f = o;
   }
   const p = document.createElement("span");
   p.textContent = f, t.appendChild(p);
@@ -2332,9 +2332,9 @@ function eo(e) {
 const to = (e) => {
   const s = ["th", "st", "nd", "rd"], t = e % 100;
   return e + (s[(t - 20) % 10] || s[t] || s[0]);
-}, Z = (e, s = 2) => String(e).padStart(s, "0"), we = /* @__PURE__ */ new Map(), so = (e, s) => {
+}, Z = (e, s = 2) => String(e).padStart(s, "0"), ke = /* @__PURE__ */ new Map(), so = (e, s) => {
   const t = `${e}:${JSON.stringify(s)}`;
-  return we.has(t) || we.set(t, new Intl.DateTimeFormat(e, s)), we.get(t);
+  return ke.has(t) || ke.set(t, new Intl.DateTimeFormat(e, s)), ke.get(t);
 }, de = (e, s, t, a) => {
   const o = so(s, t).formatToParts(e).find((i) => i.type === a);
   return o ? o.value : "";
@@ -2452,16 +2452,16 @@ const to = (e) => {
     fromTimezone: d,
     toTimezone: f,
     locale: p = "en-US",
-    emptyText: w = ""
+    emptyText: k = ""
   } = r;
   if (!o) {
-    t.textContent = w;
+    t.textContent = k;
     return;
   }
   try {
     const _ = lo(o, { fromTimezone: d, toTimezone: f });
     if (!_) {
-      t.textContent = w;
+      t.textContent = k;
       return;
     }
     const b = no(_, c, { locale: p }), u = document.createElement("span");
@@ -2484,10 +2484,10 @@ const to = (e) => {
   });
 }, po = () => {
 }, fo = (e, s = {}) => {
-  const t = Y(), a = ee(), l = s.namespace, n = l === null, o = s.syncToRoute !== !1, i = s.persistToStorage === !0, r = s.restoreOnMount !== !1, c = s.storageTTL || 7, d = n ? `spark-table:${a.path}` : `spark-table:${l}`, f = (y, k = "") => {
+  const t = Y(), a = ee(), l = s.namespace, n = l === null, o = s.syncToRoute !== !1, i = s.persistToStorage === !0, r = s.restoreOnMount !== !1, c = s.storageTTL || 7, d = n ? `spark-table:${a.path}` : `spark-table:${l}`, f = (y, w = "") => {
     const T = {};
     return Object.keys(y).forEach((F) => {
-      const j = y[F], me = k ? `${k}[${F}]` : F;
+      const j = y[F], me = w ? `${w}[${F}]` : F;
       j != null && (typeof j == "object" && !Array.isArray(j) ? Object.assign(T, f(j, me)) : T[me] = String(j));
     }), T;
   }, p = () => {
@@ -2501,18 +2501,18 @@ const to = (e) => {
       } catch (y) {
         console.warn("Failed to save table state to localStorage:", y);
       }
-  }, w = () => {
+  }, k = () => {
     if (!i) return null;
     try {
       const y = localStorage.getItem(d);
       if (!y) return null;
-      const k = JSON.parse(y);
+      const w = JSON.parse(y);
       if (c > 0) {
-        const T = Date.now() - k.timestamp, F = c * 24 * 60 * 60 * 1e3;
+        const T = Date.now() - w.timestamp, F = c * 24 * 60 * 60 * 1e3;
         if (T > F)
           return localStorage.removeItem(d), null;
       }
-      return k.params;
+      return w.params;
     } catch (y) {
       return console.warn("Failed to load table state from localStorage:", y), null;
     }
@@ -2529,22 +2529,22 @@ const to = (e) => {
       Object.keys(y).forEach((T) => {
         u(T) && delete y[T];
       });
-      const k = f(e.params);
-      Object.assign(y, k);
+      const w = f(e.params);
+      Object.assign(y, w);
     } else {
       Object.keys(y).forEach((T) => {
         (T.startsWith(`${l}[`) || T === l) && delete y[T];
       });
-      const k = f(e.params, l);
-      Object.assign(y, k);
+      const w = f(e.params, l);
+      Object.assign(y, w);
     }
     t.replace({ query: y });
-  }, u = (y) => !!(["page", "limit", "search", "orderBy", "sortedBy"].includes(y) || y.includes("[")), h = (y, k) => {
-    if (["page", "limit"].includes(y) && k !== null && k !== void 0) {
-      const F = parseInt(k, 10);
-      return isNaN(F) ? k : F;
+  }, u = (y) => !!(["page", "limit", "search", "orderBy", "sortedBy"].includes(y) || y.includes("[")), h = (y, w) => {
+    if (["page", "limit"].includes(y) && w !== null && w !== void 0) {
+      const F = parseInt(w, 10);
+      return isNaN(F) ? w : F;
     }
-    return k;
+    return w;
   }, x = () => {
     if (n)
       Object.keys(a.query).forEach((y) => {
@@ -2552,10 +2552,10 @@ const to = (e) => {
       });
     else {
       const y = `${l}[`;
-      Object.keys(a.query).forEach((k) => {
-        if (k.startsWith(y)) {
-          const T = k.slice(y.length, -1);
-          e.params[T] = h(T, a.query[k]);
+      Object.keys(a.query).forEach((w) => {
+        if (w.startsWith(y)) {
+          const T = w.slice(y.length, -1);
+          e.params[T] = h(T, a.query[w]);
         }
       });
     }
@@ -2569,28 +2569,28 @@ const to = (e) => {
   ), r && pe(() => {
     let y = !1;
     if (o) {
-      let k = !1;
+      let w = !1;
       if (n)
-        k = Object.keys(a.query).some((T) => u(T));
+        w = Object.keys(a.query).some((T) => u(T));
       else {
         const T = `${l}[`;
-        k = Object.keys(a.query).some(
+        w = Object.keys(a.query).some(
           (F) => F.startsWith(T)
         );
       }
-      k && (y = !0, x());
+      w && (y = !0, x());
     }
     if (!y && i) {
-      const k = w();
-      k && Object.keys(k).length > 0 && (Object.keys(k).forEach((T) => {
-        k[T] = h(T, k[T]);
-      }), Object.assign(e.params, k));
+      const w = k();
+      w && Object.keys(w).length > 0 && (Object.keys(w).forEach((T) => {
+        w[T] = h(T, w[T]);
+      }), Object.assign(e.params, w));
     }
   }), {
     syncToRoute: b,
     restoreFromRoute: x,
     saveToStorage: p,
-    loadFromStorage: w,
+    loadFromStorage: k,
     clearStorage: _
   };
 }, mo = { class: "flex items-center gap-4 py-3" }, go = { class: "shrink-0" }, ho = { class: "text-sm text-gray-700" }, yo = { class: "font-medium" }, vo = { class: "font-medium" }, bo = { class: "font-medium" }, xo = {
@@ -2619,7 +2619,7 @@ const to = (e) => {
       ])
     ]));
   }
-}, ko = { class: "flex items-center gap-4 px-4 py-3" }, wo = {
+}, wo = { class: "flex items-center gap-4 px-4 py-3" }, ko = {
   key: 0,
   class: "shrink-0 ml-auto"
 }, _o = {
@@ -2650,32 +2650,32 @@ const to = (e) => {
     return (d, f) => {
       const p = A("font-awesome-icon");
       return m(), v("div", null, [
-        g("div", ko, [
-          i.value.length > 1 ? (m(), v("div", wo, [
+        g("div", wo, [
+          i.value.length > 1 ? (m(), v("div", ko, [
             g("div", null, [
               g("nav", _o, [
                 g("a", {
                   class: V([c.value ? "" : "disabled", "relative inline-flex items-center rounded-l-md px-2 py-[9px] text-gray-400 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-20 focus:outline-offset-0"]),
                   href: "#",
-                  onClick: f[0] || (f[0] = O((w) => l(-1), ["prevent"]))
+                  onClick: f[0] || (f[0] = O((k) => l(-1), ["prevent"]))
                 }, [
                   S(p, {
                     icon: C(R).farChevronLeft,
                     class: "size-5"
                   }, null, 8, ["icon"])
                 ], 2),
-                (m(!0), v(E, null, N(i.value, (w) => (m(), v("a", {
-                  key: `page-${w}`,
+                (m(!0), v(E, null, N(i.value, (k) => (m(), v("a", {
+                  key: `page-${k}`,
                   href: "#",
                   class: V([
                     "relative inline-flex items-center px-4 py-[9px] text-sm font-semibold ring-1 ring-inset",
-                    e.sparkTable.params.page === w ? "z-10 text-white bg-primary-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 hover:bg-primary-600" : "text-gray-900 hover:bg-gray-50 ring-gray-300 focus:z-20 focus:outline-offset-0"
+                    e.sparkTable.params.page === k ? "z-10 text-white bg-primary-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 hover:bg-primary-600" : "text-gray-900 hover:bg-gray-50 ring-gray-300 focus:z-20 focus:outline-offset-0"
                   ]),
-                  onClick: (_) => n(w)
-                }, M(w), 11, So))), 128)),
+                  onClick: (_) => n(k)
+                }, M(k), 11, So))), 128)),
                 g("a", {
                   class: V([r.value ? "" : "disabled", "relative inline-flex items-center rounded-r-md px-2 py-[9px] text-gray-400 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-20 focus:outline-offset-0"]),
-                  onClick: f[1] || (f[1] = O((w) => l(1), ["prevent"])),
+                  onClick: f[1] || (f[1] = O((k) => l(1), ["prevent"])),
                   href: "#"
                 }, [
                   S(p, {
@@ -3154,8 +3154,8 @@ const to = (e) => {
               if (c) return;
               f.hotInstance.updateData(f.response.data), f.options.callback && typeof f.options.callback == "function" && await f.options.callback();
               const h = f.hotInstance.getPlugin("autoColumnSize");
-              te(a.settings, "columns", []).forEach((y, k) => {
-                y.width || h.calculateColumnsWidth(k, k, !0);
+              te(a.settings, "columns", []).forEach((y, w) => {
+                y.width || h.calculateColumnsWidth(w, w, !0);
               }), l("load", {
                 data: f.response.data,
                 meta: f.response.meta
@@ -3221,11 +3221,11 @@ const to = (e) => {
         beforeCopy: (u, h) => {
           const x = o.value?.hotInstance;
           x && h.forEach((y) => {
-            for (let k = y.startRow; k <= y.endRow; k++)
+            for (let w = y.startRow; w <= y.endRow; w++)
               for (let T = y.startCol; T <= y.endCol; T++) {
-                const F = x.getCell(k, T);
+                const F = x.getCell(w, T);
                 if (F) {
-                  const j = k - h[0].startRow, me = T - h[0].startCol;
+                  const j = w - h[0].startRow, me = T - h[0].startCol;
                   u[j][me] = F.dataset.copyValue ?? F.textContent ?? "";
                 }
               }
@@ -3235,7 +3235,7 @@ const to = (e) => {
       }))
     }), p = L(
       () => f.computed.ready && f.response.data?.length === 0
-    ), w = (u) => {
+    ), k = (u) => {
       if (!u) return null;
       switch (u.type) {
         case "search":
@@ -3253,10 +3253,10 @@ const to = (e) => {
       () => {
         const u = [];
         Object.values(a.plugins).forEach((h) => {
-          const x = w(h);
+          const x = k(h);
           if (!x) return;
-          const y = _(h), k = f.params[x] !== void 0;
-          !y && k && u.push(x);
+          const y = _(h), w = f.params[x] !== void 0;
+          !y && w && u.push(x);
         }), u.length > 0 && u.forEach((h) => {
           delete f.params[h];
         });
@@ -3331,7 +3331,7 @@ const to = (e) => {
           ref: o,
           settings: f.tableSettings
         }, null, 8, ["settings"]), [
-          [kt, !p.value]
+          [wt, !p.value]
         ]),
         p.value ? (m(), v("div", Ko, [
           S(x, {
@@ -3630,24 +3630,24 @@ function fl(e = {}) {
     onError: i = null,
     showNotification: r = !0,
     setFieldErrors: c = !0,
-    setFormErrors: d = !1
+    setFormErrors: d = !0
   } = e, f = Y(), p = D(!1);
-  async function w(u) {
-    const { submitFn: h, method: x = "create", node: y = null, isEditMode: k = !1 } = u;
+  async function k(u) {
+    const { submitFn: h, method: x = "create", node: y = null, isEditMode: w = !1 } = u;
     p.value = !0, y && y.clearErrors();
     try {
       const F = (await h()).data;
+      if (o && await o(F), !w && n) {
+        const j = typeof n == "function" ? n(F) : n;
+        await f.push(j);
+      }
       if (r) {
-        const j = k ? l : x === "create" ? a : t;
-        B.show({
+        const j = w ? l : x === "create" ? a : t;
+        B.toast({
           type: "success",
           message: j
         });
       }
-      if (o && await o(F), !k && n) {
-        const j = typeof n == "function" ? n(F) : n;
-        await f.push(j);
-      }
       return { success: !0, data: F, error: null };
     } catch (T) {
       const F = T.response;
@@ -3655,36 +3655,36 @@ function fl(e = {}) {
         return { success: !1, data: null, error: T };
       if (rr(F)) {
         const j = or(F);
-        j && y && c && y.setErrors([], j), d && B.show({
+        j && y && c && y.setErrors([], j), d && (B.show({
           type: "danger",
           message: Oe(F)
-        });
+        }), window.scrollTo({ top: 0, behavior: "smooth" }));
       } else
         B.show({
           type: "danger",
           message: Oe(F)
-        });
+        }), window.scrollTo({ top: 0, behavior: "smooth" });
       return { success: !1, data: null, error: T };
     } finally {
       p.value = !1;
     }
   }
   async function _(u) {
-    const { url: h, payload: x, method: y = "post", node: k, isEditMode: T } = u, F = ve();
-    return w({
+    const { url: h, payload: x, method: y = "post", node: w, isEditMode: T } = u, F = ve();
+    return k({
       submitFn: () => F[y](h, x),
       method: T ? "update" : "create",
-      node: k,
+      node: w,
       isEditMode: T
     });
   }
   async function b(u) {
-    const { payload: h, node: x, resourceId: y, isEditMode: k } = u, T = k ? `/${s}/${y}` : `/${s}`;
-    return _({ url: T, payload: h, method: k ? "put" : "post", node: x, isEditMode: k });
+    const { payload: h, node: x, resourceId: y, isEditMode: w } = u, T = w ? `/${s}/${y}` : `/${s}`;
+    return _({ url: T, payload: h, method: w ? "put" : "post", node: x, isEditMode: w });
   }
   return {
     submitting: p,
-    submit: w,
+    submit: k,
     submitToApi: _,
     ...s ? { submitCrud: b } : {}
   };
@@ -3705,9 +3705,9 @@ function ml(e, s = {}) {
           p !== void 0 && (o.value = p);
         } else {
           const p = ve();
-          let w = `/${e}/${r.value}`;
-          t && (w += `?${t}`);
-          const _ = await p.get(w);
+          let k = `/${e}/${r.value}`;
+          t && (k += `?${t}`);
+          const _ = await p.get(k);
           o.value = _.data;
         }
       } catch (p) {
@@ -3790,7 +3790,7 @@ function hl(e = {}) {
     const u = r.value.find((h) => d(h));
     return u || (t ? r.value.find((h) => h.id === t) || r.value[0] : r.value[0] || null);
   }), p = L(() => f.value?.id || null);
-  async function w(u) {
+  async function k(u) {
     const h = typeof u == "string" ? n.value.find((x) => x.id === u) : u;
     if (!h)
       return console.warn(`[useSubNavigation] Item not found: ${u}`), !1;
@@ -3801,12 +3801,12 @@ function hl(e = {}) {
       return await a.push(x), !0;
     }
     if (h.overlay) {
-      const { component: x, props: y = {}, eventHandlers: k = {}, position: T = "right", size: F } = h.overlay;
-      return ae[T === "left" ? "showLeft" : "showRight"](ce(x), y, k, { size: F }), !0;
+      const { component: x, props: y = {}, eventHandlers: w = {}, position: T = "right", size: F } = h.overlay;
+      return ae[T === "left" ? "showLeft" : "showRight"](ce(x), y, w, { size: F }), !0;
     }
     if (h.modal) {
-      const { component: x, props: y = {}, eventHandlers: k = {} } = h.modal;
-      return J.show(ce(x), y, k), !0;
+      const { component: x, props: y = {}, eventHandlers: w = {} } = h.modal;
+      return J.show(ce(x), y, w), !0;
     }
     if (h.action) {
       const x = h.action(h);
@@ -3826,7 +3826,7 @@ function hl(e = {}) {
     visibleItems: r,
     activeItem: f,
     activeId: p,
-    navigateTo: w,
+    navigateTo: k,
     isActive: d,
     isDisabled: c,
     setItems: _,
@@ -3885,7 +3885,7 @@ function yl(e = {}) {
   const p = (b) => {
     if (i.value)
       return b.preventDefault(), b.returnValue = "", "";
-  }, w = () => {
+  }, k = () => {
     f || (window.addEventListener("beforeunload", p), f = !0);
   }, _ = () => {
     f && (window.removeEventListener("beforeunload", p), f = !1);
@@ -3897,7 +3897,7 @@ function yl(e = {}) {
     setDirty: r,
     setClean: c,
     checkDirty: d,
-    enableBrowserWarning: w,
+    enableBrowserWarning: k,
     disableBrowserWarning: _
   };
 }
@@ -3925,7 +3925,7 @@ const vl = [
 }, br = ["href", "onClick"], xr = {
   key: 1,
   class: "text-[13px]"
-}, kr = { class: "mt-auto" }, wr = { class: "p-[10px] flex-shrink-0" }, _r = { class: "flex flex-1 items-center gap-x-6" }, Sr = { class: "relative flex flex-1 items-center gap-4" }, Cr = { class: "cursor-pointer" }, Tr = ["src"], $r = { class: "ml-auto" }, Lr = { class: "mr-[10px] pb-[10px] flex-1 flex flex-col" }, bl = {
+}, wr = { class: "mt-auto" }, kr = { class: "p-[10px] flex-shrink-0" }, _r = { class: "flex flex-1 items-center gap-x-6" }, Sr = { class: "relative flex flex-1 items-center gap-4" }, Cr = { class: "cursor-pointer" }, Tr = ["src"], $r = { class: "ml-auto" }, Lr = { class: "mr-[10px] pb-[10px] flex-1 flex flex-col" }, bl = {
   __name: "SparkDefaultContainer",
   props: {
     appStore: {
@@ -3960,12 +3960,12 @@ const vl = [
           }
         }
       );
-    }, w = L(() => t.mainNavStore.state.hidden ? ["w-0 overflow-hidden"] : [t.mainNavStore.state.collapsed ? "w-[80px]" : "w-[240px]"]), _ = L(() => t.mainNavStore.state.hidden ? ["pl-2.5"] : [t.mainNavStore.state.collapsed ? "pl-[80px]" : "pl-[240px]"]);
+    }, k = L(() => t.mainNavStore.state.hidden ? ["w-0 overflow-hidden"] : [t.mainNavStore.state.collapsed ? "w-[80px]" : "w-[240px]"]), _ = L(() => t.mainNavStore.state.hidden ? ["pl-2.5"] : [t.mainNavStore.state.collapsed ? "pl-[80px]" : "pl-[240px]"]);
     return (b, u) => {
       const h = A("font-awesome-icon"), x = A("router-view");
       return m(), v(E, null, [
         g("div", {
-          class: V([w.value, "fixed inset-y-0 flex transition-all z-100"])
+          class: V([k.value, "fixed inset-y-0 flex transition-all z-100"])
         }, [
           g("div", ur, [
             g("nav", dr, [
@@ -4001,7 +4001,7 @@ const vl = [
                           "hover:bg-gray-100": y?.href
                         }, "h-[37px] sgroup flex items-center gap-x-2 rounded-md p-3 text-gray-800 leading-5 transition-all duration-300 ease-in-out"]),
                         href: y?.href,
-                        onClick: O((k) => e.mainNavStore.goto(y.href), ["prevent"])
+                        onClick: O((w) => e.mainNavStore.goto(y.href), ["prevent"])
                       }, [
                         y.icon ? (m(), H(h, {
                           key: 0,
@@ -4021,27 +4021,27 @@ const vl = [
                         }, M(y.name), 3))
                       ], 10, hr),
                       y.children ? (m(), v("ul", vr, [
-                        (m(!0), v(E, null, N(y.children, (k) => (m(), v("li", {
-                          key: k.name
+                        (m(!0), v(E, null, N(y.children, (w) => (m(), v("li", {
+                          key: w.name
                         }, [
                           g("a", {
-                            class: V([[o(k) ? "bg-gray-100" : "", "hover:bg-gray-100"], "h-[37px] sgroup flex items-center gap-x-2 rounded-md p-3 text-gray-800 leading-5 transition-all duration-300 ease-in-out"]),
-                            href: k.href,
-                            onClick: O((T) => e.mainNavStore.goto(k.href), ["prevent"])
+                            class: V([[o(w) ? "bg-gray-100" : "", "hover:bg-gray-100"], "h-[37px] sgroup flex items-center gap-x-2 rounded-md p-3 text-gray-800 leading-5 transition-all duration-300 ease-in-out"]),
+                            href: w.href,
+                            onClick: O((T) => e.mainNavStore.goto(w.href), ["prevent"])
                           }, [
-                            k.icon ? (m(), H(h, {
+                            w.icon ? (m(), H(h, {
                               key: 0,
-                              icon: C(R)[k.icon],
-                              class: V([[(o(k), "text-gray-400")], "size-4"])
+                              icon: C(R)[w.icon],
+                              class: V([[(o(w), "text-gray-400")], "size-4"])
                             }, null, 8, ["icon", "class"])) : $("", !0),
-                            e.mainNavStore.state.collapsed ? $("", !0) : (m(), v("span", xr, M(k.name), 1))
+                            e.mainNavStore.state.collapsed ? $("", !0) : (m(), v("span", xr, M(w.name), 1))
                           ], 10, br)
                         ]))), 128))
                       ])) : $("", !0)
                     ], 2))), 128))
                   ])
                 ]),
-                g("li", kr, [
+                g("li", wr, [
                   z(b.$slots, "sidebar-footer"),
                   g("a", {
                     class: "font-medium grid place-content-center gap-x-3 rounded-md h-10 p-2.5 text-gray-800 text-[13px] hover:bg-gray-100 transition-all duration-300 ease-in-out",
@@ -4061,7 +4061,7 @@ const vl = [
         g("div", {
           class: V([_.value, "h-full transition-all flex flex-col"])
         }, [
-          g("div", wr, [
+          g("div", kr, [
             g("div", _r, [
               g("div", Sr, [
                 z(b.$slots, "header-left", {}, () => [
@@ -4577,14 +4577,14 @@ const xl = /* @__PURE__ */ oe(Pr, [["render", Vr]]), Hr = { class: "h-full grid
       ])
     ]));
   }
-}, vn = { class: "h-full grid place-content-center relative" }, bn = { class: "absolute top-8 left-8" }, xn = ["src"], kn = {
+}, vn = { class: "h-full grid place-content-center relative" }, bn = { class: "absolute top-8 left-8" }, xn = ["src"], wn = {
   key: 1,
   width: "59",
   height: "23",
   viewBox: "0 0 59 23",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, wn = { class: "max-w-lg grid gap-y-6 text-center -mt-8" }, _n = { class: "flex gap-4 justify-center" }, Sn = {
+}, kn = { class: "max-w-lg grid gap-y-6 text-center -mt-8" }, _n = { class: "flex gap-4 justify-center" }, Sn = {
   __name: "SparkError404View",
   props: {
     logo: {
@@ -4607,7 +4607,7 @@ const xl = /* @__PURE__ */ oe(Pr, [["render", Vr]]), Hr = { class: "h-full grid
           src: t.logo,
           alt: "Logo",
           class: "h-[23px] w-auto"
-        }, null, 8, xn)) : (m(), v("svg", kn, [...n[0] || (n[0] = [
+        }, null, 8, xn)) : (m(), v("svg", wn, [...n[0] || (n[0] = [
           g("path", {
             d: "M49.2029 17.1264V8.03835H44.0829V5.22235H58.0989V8.03835H52.9629V17.1264H49.2029Z",
             fill: "#1C64F2"
@@ -4626,7 +4626,7 @@ const xl = /* @__PURE__ */ oe(Pr, [["render", Vr]]), Hr = { class: "h-full grid
           }, null, -1)
         ])]))
       ]),
-      g("div", wn, [
+      g("div", kn, [
         n[2] || (n[2] = g("div", null, [
           g("div", { class: "text-primary-600 text-7xl font-bold mb-4" }, "404"),
           g("h1", { class: "text-3xl text-gray-900 font-semibold tracking-tight mb-3" }, " Page Not Found "),
@@ -4653,7 +4653,7 @@ const xl = /* @__PURE__ */ oe(Pr, [["render", Vr]]), Hr = { class: "h-full grid
   viewBox: "0 0 59 23",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, Pn = { class: "max-w-lg grid gap-y-6 text-center -mt-8" }, Mn = { class: "text-primary-600 text-7xl font-bold mb-4" }, Vn = { class: "text-3xl text-gray-900 font-semibold tracking-tight mb-3" }, Hn = { class: "text-gray-600" }, Fn = { class: "flex gap-4 justify-center" }, kl = {
+}, Pn = { class: "max-w-lg grid gap-y-6 text-center -mt-8" }, Mn = { class: "text-primary-600 text-7xl font-bold mb-4" }, Vn = { class: "text-3xl text-gray-900 font-semibold tracking-tight mb-3" }, Hn = { class: "text-gray-600" }, Fn = { class: "flex gap-4 justify-center" }, wl = {
   __name: "SparkErrorGeneralView",
   props: {
     logo: {
@@ -4728,7 +4728,7 @@ const xl = /* @__PURE__ */ oe(Pr, [["render", Vr]]), Hr = { class: "h-full grid
     ]));
   }
 };
-function wl(e = {}) {
+function kl(e = {}) {
   const {
     loginPath: s = "/login",
     logoutPath: t = "/logout",
@@ -4937,7 +4937,7 @@ export {
   bl as SparkDefaultContainer,
   yn as SparkError403View,
   Sn as SparkError404View,
-  kl as SparkErrorGeneralView,
+  wl as SparkErrorGeneralView,
   ll as SparkFileDragUpload,
   en as SparkForgotPasswordView,
   il as SparkImageUpload,
@@ -4964,7 +4964,7 @@ export {
   cr as clearAllDirtyForms,
   Sl as create403Route,
   Cl as create404Route,
-  wl as createAuthRoutes,
+  kl as createAuthRoutes,
   ar as createAxiosInstance,
   dl as createBootstrapService,
   Na as customiseHeader,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "0.33.0",
+  "version": "0.34.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/composables/useFormSubmission.js

@@ -18,7 +18,7 @@ import { parseLaravelErrors, getFormLevelMessage, isValidationError } from '../u
  * @param {Function} options.onError - Callback after error (receives error, can return true to skip default handling)
  * @param {boolean} options.showNotification - Whether to show success notification (default: true)
  * @param {boolean} options.setFieldErrors - Whether to set field-level errors on 422 (default: true)
- * @param {boolean} options.setFormErrors - Whether to show form-level error notification on 422 (default: false)
+ * @param {boolean} options.setFormErrors - Whether to show form-level error notification on 422 (default: true)
  *
  * @returns {Object} Form submission helpers
  */
@@ -33,7 +33,7 @@ export function useFormSubmission(options = {}) {
     onError = null,
     showNotification = true,
     setFieldErrors = true,
-    setFormErrors = false,
+    setFormErrors = true,
   } = options
 
   const router = useRouter()
@@ -64,20 +64,6 @@ export function useFormSubmission(options = {}) {
       const response = await submitFn()
       const data = response.data
 
-      // Show success notification
-      if (showNotification) {
-        const message = isEditMode
-          ? updateMessage
-          : method === 'create'
-            ? createMessage
-            : successMessage
-
-        sparkNotificationService.show({
-          type: 'success',
-          message,
-        })
-      }
-
       // Execute success callback
       if (onSuccess) {
         await onSuccess(data)
@@ -91,6 +77,21 @@ export function useFormSubmission(options = {}) {
         await router.push(location)
       }
 
+      // Show success notification (after redirect so it appears on the destination page
+      // and isn't cleared by SparkNotificationOutlet's route-change detection)
+      if (showNotification) {
+        const message = isEditMode
+          ? updateMessage
+          : method === 'create'
+            ? createMessage
+            : successMessage
+
+        sparkNotificationService.toast({
+          type: 'success',
+          message,
+        })
+      }
+
       return { success: true, data, error: null }
     } catch (error) {
       const response = error.response
@@ -116,6 +117,7 @@ export function useFormSubmission(options = {}) {
             type: 'danger',
             message: getFormLevelMessage(response),
           })
+          window.scrollTo({ top: 0, behavior: 'smooth' })
         }
       } else {
         // Handle non-validation errors
@@ -123,6 +125,7 @@ export function useFormSubmission(options = {}) {
           type: 'danger',
           message: getFormLevelMessage(response),
         })
+        window.scrollTo({ top: 0, behavior: 'smooth' })
       }
 
       return { success: false, data: null, error }