@omnitend/dashboard-for-laravel 0.42.1 → 0.42.2

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-10-05T05:06:30.259Z",
+  "generated": "2026-10-05T09:32:06.242Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.42.1"
+    "version": "0.42.2"
   },
   "components": {
     "base": [
@@ -2806,7 +2806,7 @@
         "name": "DXNumberStepper",
         "category": "extended",
         "filePath": "resources/js/components/extended/DXNumberStepper.vue",
-        "description": "DXNumberStepper — a number input between a decrease and an increase button. `[ − ][ 12 ][ + ]` as one input group, for quantities that are usually nudged rather than typed (cases on an order line, covers on a booking). - The model is a number, or `null` when the input is empty (never `NaN`, never `\"\"`). Every step and every valid keystroke emits `update:modelValue`; debounce on the consumer's side if each change saves. - A step adds or subtracts `step` from the current value and clamps to `min`/`max`. It does not snap to a grid, so 1.05 + 0.1 is 1.15. The sum is rounded to the decimal places of the value and step, so 0.1 three times is 0.3, not 0.30000000000000004. From empty, a step goes to the in-range value nearest zero. - The button at a bound is disabled (decrease at `min`, increase at `max`). - Typing is free: the value is emitted as typed, even out of range, and is CLAMPED ON BLUR to `min`/`max` (emitting the clamped value). Half-typed input the browser cannot parse (\"-\", \"1e\") emits nothing until it parses. - ArrowUp/ArrowDown on the input go through the same step as the buttons (the browser's own spin-button stepping snaps to a grid; this does not). The native spin arrows are hidden. The buttons are `tabindex=\"-1\"`, so a list of steppers is one Tab stop each; keyboard users step with the arrows. - The buttons are square icon buttons at the input's height (never narrower than tall), soft `secondary` like other in-row actions, labelled \"Decrease\"/\"Increase\" plus the input's `aria-label` when it has one. `class` and `style` go on the group; every other attribute (`aria-label`, `name`, `id`, `placeholder`, `required`, `state`, listeners…) goes on the input. Styles live in theme.scss under `.dx-number-stepper`.",
+        "description": "DXNumberStepper — a number input between a decrease and an increase button. `[ − ][ 12 ][ + ]` as one input group, for quantities that are usually nudged rather than typed (cases on an order line, covers on a booking). - The model is a number, or `null` when the input is empty (never `NaN`, never `\"\"`). Every step and every valid keystroke emits `update:modelValue`; debounce on the consumer's side if each change saves. - Controlled: steps, the bound checks and blur all read `modelValue`. A parent may decline an emitted value (keep 2 when 2.5 is typed): blur then shows 2, + goes to 3, and a declined step is not left on screen. - A step adds or subtracts `step` from the current value and clamps to `min`/`max`. It does not snap to a grid, so 1.05 + 0.1 is 1.15. The sum is rounded to the decimal places of the value and step, so 0.1 three times is 0.3, not 0.30000000000000004. From empty, a step goes to the in-range value nearest zero. - The button at a bound is disabled (decrease at `min`, increase at `max`). - Typing is free: the value is emitted as typed, even out of range, and is CLAMPED ON BLUR to `min`/`max` (emitting the clamped value). Half-typed input the browser cannot parse (\"-\", \"1e\") emits nothing until it parses. - ArrowUp/ArrowDown on the input go through the same step as the buttons (the browser's own spin-button stepping snaps to a grid; this does not). The native spin arrows are hidden. The buttons are `tabindex=\"-1\"`, so a list of steppers is one Tab stop each; keyboard users step with the arrows. - The buttons are square icon buttons at the input's height (never narrower than tall), soft `secondary` like other in-row actions, labelled \"Decrease\"/\"Increase\" plus the input's `aria-label` when it has one. `class` and `style` go on the group; every other attribute (`aria-label`, `name`, `id`, `placeholder`, `required`, `state`, listeners…) goes on the input. Styles live in theme.scss under `.dx-number-stepper`.",
         "props": [
           {
             "name": "modelValue",

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-10-05T05:06:30.315Z
+> Last updated: 2026-10-05T09:32:06.295Z
 
 This file provides a complete map of all available documentation for AI agents and developers.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnitend/dashboard-for-laravel",
-  "version": "0.42.1",
+  "version": "0.42.2",
   "description": "Vue 3 dashboard components for Laravel with Bootstrap Vue Next",
   "type": "module",
   "main": "./dist/dashboard-for-laravel.umd.cjs",

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

@@ -7,6 +7,9 @@
   - The model is a number, or `null` when the input is empty (never `NaN`,
     never `""`). Every step and every valid keystroke emits `update:modelValue`;
     debounce on the consumer's side if each change saves.
+  - Controlled: steps, the bound checks and blur all read `modelValue`. A
+    parent may decline an emitted value (keep 2 when 2.5 is typed): blur then
+    shows 2, + goes to 3, and a declined step is not left on screen.
   - A step adds or subtracts `step` from the current value and clamps to
     `min`/`max`. It does not snap to a grid, so 1.05 + 0.1 is 1.15. The sum is
     rounded to the decimal places of the value and step, so 0.1 three times is
@@ -79,7 +82,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useAttrs, watch } from "vue";
+import { computed, nextTick, ref, useAttrs, watch } from "vue";
 import type { StyleValue } from "vue";
 import DInputGroup from "../base/DInputGroup.vue";
 import DFormInput from "../base/DFormInput.vue";
@@ -143,26 +146,33 @@ const increaseAriaLabel = computed(
     () => props.increaseLabel ?? (fieldLabel.value === "" ? "Increase" : `Increase ${fieldLabel.value}`),
 );
 
-// The value the buttons step from: the last value emitted or received.
-const currentValue = ref<number | null>(props.modelValue);
-// The shown text tracks a local ref so typing is never rewritten mid-edit
-// ("0." must not become "0"); it resyncs from the model while not focused.
+// Controlled: steps, bounds and blur all read `modelValue`, never a value of
+// the stepper's own. A parent may decline an emitted value (a quantity that
+// only takes whole numbers keeps 2 when 2.5 is typed); the prop then does not
+// change, so a private copy would silently diverge — + would step from 2.5.
+const modelNumber = computed<number | null>(() =>
+    typeof props.modelValue === "number" && Number.isFinite(props.modelValue)
+        ? props.modelValue
+        : null,
+);
+// The shown text is a local ref only so typing is never rewritten mid-edit
+// ("0." must not become "0"). It resyncs from the model while not focused, on
+// blur, and after every step (see `commit`).
 const displayValue = ref(format(props.modelValue));
 const isFocused = ref(false);
 
 watch(
     () => props.modelValue,
     (value) => {
-        currentValue.value = value;
         if (!isFocused.value) displayValue.value = format(value);
     },
 );
 
 const isAtMin = computed(
-    () => props.min !== undefined && currentValue.value !== null && currentValue.value <= props.min,
+    () => props.min !== undefined && modelNumber.value !== null && modelNumber.value <= props.min,
 );
 const isAtMax = computed(
-    () => props.max !== undefined && currentValue.value !== null && currentValue.value >= props.max,
+    () => props.max !== undefined && modelNumber.value !== null && modelNumber.value >= props.max,
 );
 
 function format(value: number | null | undefined): string {
@@ -186,16 +196,30 @@ function clamp(value: number): number {
     return clamped;
 }
 
+// A step emitted in this tick, before the parent's answer can reach the prop.
+// Two steps in one tick (two synchronous clicks) chain from it rather than
+// both stepping from the same stale prop; it is dropped at the next tick, when
+// `modelValue` says what the parent made of it.
+let unansweredStep: number | null | undefined;
+
+// Emit a step (or a blur clamp), then show whatever the parent made of it: the
+// new value if it accepted, its unchanged value if it declined.
 function commit(value: number | null): void {
-    currentValue.value = value;
     displayValue.value = format(value);
+    const isFirstInTick = unansweredStep === undefined;
+    unansweredStep = value;
     emit("update:modelValue", value);
+    if (!isFirstInTick) return;
+    void nextTick(() => {
+        unansweredStep = undefined;
+        displayValue.value = format(props.modelValue);
+    });
 }
 
 function stepBy(direction: 1 | -1): void {
     if (props.disabled) return;
     const stepSize = Number.isFinite(props.step) && props.step > 0 ? props.step : 1;
-    const from = currentValue.value;
+    const from = unansweredStep !== undefined ? unansweredStep : modelNumber.value;
     if (from === null) {
         commit(clamp(0));
         return;
@@ -213,13 +237,11 @@ function handleInput(event: Event): void {
         // A number input reports "" for unparseable text too ("-", "1e");
         // wait for it to parse rather than emitting null mid-typing.
         if (target.validity?.badInput) return;
-        currentValue.value = null;
         emit("update:modelValue", null);
         return;
     }
     const parsed = Number(raw);
     if (!Number.isFinite(parsed)) return;
-    currentValue.value = parsed;
     emit("update:modelValue", parsed);
 }
 
@@ -227,7 +249,7 @@ function handleInput(event: Event): void {
 // merged with these by Vue, so they are not re-emitted.
 function handleBlur(): void {
     isFocused.value = false;
-    const value = currentValue.value;
+    const value = modelNumber.value;
     if (value !== null && clamp(value) !== value) {
         commit(clamp(value));
         return;

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

@@ -40,104 +40,118 @@
         <!-- Tabs stay bare here: the modal body already provides the panel
              boundary, so DXForm's default card-panel-around-tabs (#159) would be
              redundant nested chrome inside the modal. -->
-        <DXForm
+        <!-- Not editable while the full record is loading (showUrl): the
+             response reseeds the form, so anything typed before it lands would
+             be silently replaced. `disabled` greys and blocks the native
+             controls (Bootstrap styles :disabled); `inert` also blocks focus,
+             clicks and keystrokes for custom slot controls that are not form
+             elements (a contenteditable, an editor widget). Save and Delete are
+             disabled for the same window in the footer. -->
+        <fieldset
             v-if="form"
-            :key="formInstanceKey"
-            :active-tab="activeTab"
-            :form="form"
-            :fields="fields"
-            :tabs="tabs"
-            :layout="layout"
-            :label-cols="labelCols"
-            :card="card"
-            :card-tabs="false"
-            :context="item ?? undefined"
-            :show-submit="false"
-            @update:active-tab="emit('update:activeTab', $event)"
-            @submit="emit('save')"
+            class="dx-edit-fieldset"
+            :disabled="loading"
+            :inert="loading"
+            :aria-busy="loading ? 'true' : undefined"
         >
-            <!-- Forward DXTable's edit-value(key) → DXForm value(key) -->
-            <template
-                v-for="key in editValueSlotKeys"
-                :key="`ev-${key}`"
-                #[`value(${key})`]="sp"
+            <DXForm
+                :key="formInstanceKey"
+                :active-tab="activeTab"
+                :form="form"
+                :fields="fields"
+                :tabs="tabs"
+                :layout="layout"
+                :label-cols="labelCols"
+                :card="card"
+                :card-tabs="false"
+                :context="item ?? undefined"
+                :show-submit="false"
+                @update:active-tab="emit('update:activeTab', $event)"
+                @submit="emit('save')"
             >
-                <!--
-                  @slot Custom input for field `<key>` in the edit/create modal, forwarded to DXForm. Name it `edit-value(<fieldKey>)`.
-                  @binding {object} item The row being edited (null in create mode).
-                  @binding {any} value The current field value.
-                  @binding {Function} update Call with a new value to update the field.
-                  @binding {object} field The field definition.
-                -->
-                <slot
-                    :name="`edit-value(${key})`"
-                    :item="item"
-                    :value="sp.value"
-                    :update="sp.update"
-                    :field="sp.field"
-                />
-            </template>
+                <!-- Forward DXTable's edit-value(key) → DXForm value(key) -->
+                <template
+                    v-for="key in editValueSlotKeys"
+                    :key="`ev-${key}`"
+                    #[`value(${key})`]="sp"
+                >
+                    <!--
+                      @slot Custom input for field `<key>` in the edit/create modal, forwarded to DXForm. Name it `edit-value(<fieldKey>)`.
+                      @binding {object} item The row being edited (null in create mode).
+                      @binding {any} value The current field value.
+                      @binding {Function} update Call with a new value to update the field.
+                      @binding {object} field The field definition.
+                    -->
+                    <slot
+                        :name="`edit-value(${key})`"
+                        :item="item"
+                        :value="sp.value"
+                        :update="sp.update"
+                        :field="sp.field"
+                    />
+                </template>
 
-            <!-- Forward edit-span(key) → span(key) -->
-            <template
-                v-for="key in editSpanSlotKeys"
-                :key="`es-${key}`"
-                #[`span(${key})`]="sp"
-            >
-                <!--
-                  @slot Full-width custom content for field `<key>` in the edit/create modal, forwarded to DXForm's span slot. Name it `edit-span(<fieldKey>)`.
-                  @binding {object} item The row being edited (null in create mode).
-                  @binding {any} value The current field value.
-                  @binding {Function} update Call with a new value to update the field.
-                  @binding {Function} close Call to close the edit modal.
-                -->
-                <slot
-                    :name="`edit-span(${key})`"
-                    :item="item"
-                    :value="sp.value"
-                    :update="sp.update"
-                    :close="close"
-                />
-            </template>
+                <!-- Forward edit-span(key) → span(key) -->
+                <template
+                    v-for="key in editSpanSlotKeys"
+                    :key="`es-${key}`"
+                    #[`span(${key})`]="sp"
+                >
+                    <!--
+                      @slot Full-width custom content for field `<key>` in the edit/create modal, forwarded to DXForm's span slot. Name it `edit-span(<fieldKey>)`.
+                      @binding {object} item The row being edited (null in create mode).
+                      @binding {any} value The current field value.
+                      @binding {Function} update Call with a new value to update the field.
+                      @binding {Function} close Call to close the edit modal.
+                    -->
+                    <slot
+                        :name="`edit-span(${key})`"
+                        :item="item"
+                        :value="sp.value"
+                        :update="sp.update"
+                        :close="close"
+                    />
+                </template>
 
-            <!-- Forward tab-content / tab-before / tab-after slots -->
-            <template
-                v-for="key in tabContentSlotKeys"
-                :key="`tc-${key}`"
-                #[`tab-content(${key})`]="sp"
-            >
-                <!--
-                  @slot Replaces the auto-rendered fields of edit-modal tab `<key>` with custom content. Name it `tab-content(<tabKey>)`.
-                  @binding {object} item The row being edited (null in create mode).
-                  @binding {object} tab The tab definition.
-                -->
-                <slot :name="`tab-content(${key})`" :item="item" :tab="sp.tab" />
-            </template>
-            <template
-                v-for="key in tabBeforeSlotKeys"
-                :key="`tb-${key}`"
-                #[`tab-before(${key})`]="sp"
-            >
-                <!--
-                  @slot Custom content rendered before the fields of edit-modal tab `<key>`. Name it `tab-before(<tabKey>)`.
-                  @binding {object} item The row being edited (null in create mode).
-                  @binding {object} tab The tab definition.
-                -->
-                <slot :name="`tab-before(${key})`" :item="item" :tab="sp.tab" />
-            </template>
-            <template
-                v-for="key in tabAfterSlotKeys"
-                :key="`taf-${key}`"
-                #[`tab-after(${key})`]="sp"
-            >
-                <!--
-                  @slot Custom content rendered after the fields of edit-modal tab `<key>`. Name it `tab-after(<tabKey>)`.
-                  @binding {object} item The row being edited (null in create mode).
-                  @binding {object} tab The tab definition.
-                -->
-                <slot :name="`tab-after(${key})`" :item="item" :tab="sp.tab" />
-            </template>
-        </DXForm>
+                <!-- Forward tab-content / tab-before / tab-after slots -->
+                <template
+                    v-for="key in tabContentSlotKeys"
+                    :key="`tc-${key}`"
+                    #[`tab-content(${key})`]="sp"
+                >
+                    <!--
+                      @slot Replaces the auto-rendered fields of edit-modal tab `<key>` with custom content. Name it `tab-content(<tabKey>)`.
+                      @binding {object} item The row being edited (null in create mode).
+                      @binding {object} tab The tab definition.
+                    -->
+                    <slot :name="`tab-content(${key})`" :item="item" :tab="sp.tab" />
+                </template>
+                <template
+                    v-for="key in tabBeforeSlotKeys"
+                    :key="`tb-${key}`"
+                    #[`tab-before(${key})`]="sp"
+                >
+                    <!--
+                      @slot Custom content rendered before the fields of edit-modal tab `<key>`. Name it `tab-before(<tabKey>)`.
+                      @binding {object} item The row being edited (null in create mode).
+                      @binding {object} tab The tab definition.
+                    -->
+                    <slot :name="`tab-before(${key})`" :item="item" :tab="sp.tab" />
+                </template>
+                <template
+                    v-for="key in tabAfterSlotKeys"
+                    :key="`taf-${key}`"
+                    #[`tab-after(${key})`]="sp"
+                >
+                    <!--
+                      @slot Custom content rendered after the fields of edit-modal tab `<key>`. Name it `tab-after(<tabKey>)`.
+                      @binding {object} item The row being edited (null in create mode).
+                      @binding {object} tab The tab definition.
+                    -->
+                    <slot :name="`tab-after(${key})`" :item="item" :tab="sp.tab" />
+                </template>
+            </DXForm>
+        </fieldset>
 
         <template #footer>
             <div class="d-flex justify-content-between w-100">