@omnitend/dashboard-for-laravel 0.40.0 → 0.41.0

package/resources/js/components/extended/DXDashboardSidebar.vue

@@ -35,7 +35,7 @@
       </div>
     </div>
 
-    <nav ref="navRef" class="sidebar-nav p-3">
+    <nav ref="navRef" class="sidebar-nav px-3 pb-3 pt-2">
       <template v-for="(group, groupIndex) in navigation" :key="groupIndex">
         <div
           v-if="group.visible !== false"
@@ -426,11 +426,15 @@ watch(activeGroupIndex, () => {
   overflow-x: hidden;
 }
 
-/* Dense rhythm (#95): values proven in a production dashboard, adopted as the default —
-   natural-case headers at 0.875rem (no uppercase/letter-spacing), tight group
-   spacing. */
+/* Rhythm: natural-case headers at 0.875rem (no uppercase/letter-spacing, #95),
+   with a full 1rem between groups so each section reads as its own block.
+   The 0.25rem gap #95 shipped with left a group label 4px under the previous
+   group's last item — closer to that item than to its own — and the eye
+   attached the label to the wrong group. The nav's top padding is reduced to
+   match (pt-2), so the first item sits nearer the header than the groups sit
+   to each other. */
 .nav-group {
-  margin-bottom: 0.25rem;
+  margin-bottom: 1rem;
 }
 
 .nav-group-label {

package/resources/js/components/extended/DXTable.vue

@@ -752,6 +752,9 @@ export interface Props<TItem = any> {
      * `edit-value` slot's binding); `data` is the live form data. Aborting
      * leaves the modal open with the user's edits intact. A guard that throws
      * also aborts, surfacing its message.
+     *
+     * Dismissing the modal while the guard is still pending — by any route —
+     * abandons the save; nothing is written for a record the user has closed.
      */
     saveGuard?: (
         item: TItem | null,

package/resources/js/composables/useResourceEditor.ts

@@ -1,4 +1,4 @@
-import { computed, ref, type Ref } from "vue";
+import { computed, ref, watch, type Ref } from "vue";
 import { api } from "../utils/api";
 import { useForm } from "./useForm";
 import { useToast } from "./useToast";
@@ -102,6 +102,30 @@ export function useResourceEditor<T = any>(
     // True while the edit modal is fetching the full record via `showUrl`.
     const editLoading = ref(false);
 
+    // Bumped every time the modal closes. An action that AWAITS something —
+    // a save or delete guard — re-reads this before committing, so work begun
+    // in one modal session can never land after that session has ended (#174).
+    //
+    // A counter rather than a boolean because the modal reopens: by the time a
+    // slow guard resolves the user may already be editing a different row, and
+    // "is it open?" answers yes for the WRONG record. The generation only
+    // matches if this is still the same session that started the action.
+    //
+    // Watched rather than folded into `cancel()` because `cancel()` is not the
+    // only way out: the Cancel button and the slot's `close` binding route
+    // through it, but the header X, Escape and a backdrop click reach BModal
+    // directly and merely flip `show`. Watching the flag itself catches every
+    // route, including any added later. `flush: 'sync'` so the bump lands in
+    // the same tick as the dismissal, leaving no window of its own.
+    const editGeneration = ref(0);
+    watch(
+        showEditModal,
+        (isOpen) => {
+            if (!isOpen) editGeneration.value++;
+        },
+        { flush: 'sync' },
+    );
+
     // Monotonic token so a slow fetch for a previously-opened row can't overwrite
     // the form after the user has since opened a different row.
     let editFetchToken = 0;
@@ -324,8 +348,17 @@ export function useResourceEditor<T = any>(
         if (pendingAction.value) return;
 
         pendingAction.value = 'save';
+        const generation = editGeneration.value;
         try {
             if (!(await passesSaveGuard())) return;
+
+            // Dismissed while the guard was pending. Saving now would write a
+            // record the user watched themselves close — the same silent
+            // outliving-of-intent the guard exists to prevent, reached by a
+            // different route (#174). The check sits HERE rather than inside
+            // performSave so it covers the whole class, not one call site.
+            if (editGeneration.value !== generation) return;
+
             await performSave();
         } finally {
             pendingAction.value = null;
@@ -532,6 +565,7 @@ export function useResourceEditor<T = any>(
         if (pendingAction.value) return;
 
         pendingAction.value = 'delete';
+        const generation = editGeneration.value;
         try {
             // Delete guard: a non-null message means this item can't be deleted —
             // show it immediately and skip the confirm and the request entirely.
@@ -543,6 +577,12 @@ export function useResourceEditor<T = any>(
 
             if (!confirmed) return;
 
+            // Same window as `save`, opened by awaiting the guard: the modal can
+            // be dismissed underneath a pending delete (#174). Checked after the
+            // confirm as well as the guard, though `window.confirm` blocks the
+            // event loop, so nothing can slip in during it.
+            if (editGeneration.value !== generation) return;
+
             const itemId = (selectedItem.value as any).id;
             const url = props.deleteUrl.replace(':id', itemId);