@omnitend/dashboard-for-laravel 0.42.0 → 0.42.2

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-10-04T09:15:57.974Z",
+  "generated": "2026-10-05T09:32:06.242Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.42.0"
+    "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-04T09:15:58.053Z
+> 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.0",
+  "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/css/theme.scss

@@ -562,6 +562,47 @@ h6,
   }
 }
 
+// A horizontal row whose content column holds NO form control shows a
+// display-only value: text, a link, a badge, a flex row of text, a small
+// table, a stack of lines. Such a row is baseline-aligned instead of
+// top-aligned, so the first line of text in the value, whatever its shape,
+// sits on the label's first line (the label's padding just moves the shared
+// baseline down). No class or field flag is needed; `.dx-form-plaintext`
+// below still works and is now redundant inside a horizontal form.
+//
+// Every row that holds a control keeps the top alignment above: a checkbox,
+// switch or file input exposes a synthesized or box-edge baseline, so
+// baseline alignment would move them. The list is what the library renders
+// as a control plus the native ones; a `.btn` counts because it is
+// input-height and already lines its text up with the label when
+// top-aligned. Content with no text at all (an image, an icon) sits its
+// bottom edge on the label's baseline, as an inline image would in a line of
+// text. The rule needs `:has()` (Chrome 105, Safari 15.4, Firefox 121); a
+// browser without it falls back to the top alignment.
+$dx-display-only-row: '.dx-form--horizontal .row:has(> .col-form-label):not(:has(> .col-form-label ~ * :is(input:not([type="hidden"]), select, textarea, button, .btn, .form-control, .form-select, .form-check, .input-group, [contenteditable])))';
+
+#{$dx-display-only-row} {
+  align-items: baseline;
+
+  // A table's baseline is its first row's, and a row's baseline is its
+  // first BASELINE-aligned cell's; with every cell `middle` (the theme's
+  // default) CSS falls back to the bottom of the cell, ~6px below the text.
+  // Baseline-align the first row's cells so the table offers its text.
+  > .col-form-label ~ * table tr:first-child > * {
+    vertical-align: baseline;
+  }
+
+  // A badge's own baseline is its smaller text's, which lands its box ~2px
+  // off the label's centre; centre it on its line instead, as
+  // `.dx-form-plaintext .badge` does below.
+  > .col-form-label ~ * .badge {
+    vertical-align: top;
+    margin-top: calc(
+      (#{math.div($input-line-height, math.div($badge-font-size, 1em)) * 1em} - 1em - #{$badge-padding-y * 2}) / 2
+    );
+  }
+}
+
 // A display-only value in a form row: a badge, a line of text, a short stack
 // of lines. It has no input box, so on its own it sits at the top of the row
 // while the label column (`.col-form-label`) is padded down to an input's text
@@ -1125,13 +1166,18 @@ fieldset:disabled .btn {
   }
 }
 
-// The one exception: DXSaveButton's saved state ("✓ Saved") is a REAL
-// disabled button, but it is a confirmation, not an unavailable action, so it
-// keeps its variant's own colours (by default the navy primary fill, #151e2d /
-// #e9f0f8) at full opacity rather than the neutral grey above, so saving
-// changes the label and the disabled state but not the colour. Three classes
-// plus the state, so it outranks the neutral rule (and `fieldset:disabled .btn`).
-.btn.dx-save-button--saved:is(:disabled, .disabled) {
+// The exceptions: two states that are REALLY disabled but are not unavailable
+// actions, so they keep their variant's own colours (by default the navy
+// primary fill, #151e2d / #e9f0f8) at full opacity rather than the neutral grey
+// above:
+// - a busy button (DButton `loading`, marked `aria-busy="true"`), disabled only
+//   so it can't be pressed twice. Greying it made every save blink navy → grey
+//   → navy, since the grey lasted exactly as long as the request;
+// - DXSaveButton's saved state ("✓ Saved"), a confirmation.
+// So saving changes the label and the disabled state but never the colour.
+// `.btn` + the `:is()` (its most specific argument counts) + the state outranks
+// the neutral rule (and `fieldset:disabled .btn`).
+.btn:is(.dx-save-button--saved, [aria-busy="true"]):is(:disabled, .disabled) {
   --bs-btn-disabled-opacity: 1;
   --bs-btn-disabled-bg: var(--bs-btn-bg);
   --bs-btn-disabled-color: var(--bs-btn-color);

package/resources/js/components/base/DAutocomplete.vue

@@ -9,7 +9,7 @@
  * searchable single-select can always reach "none" in-list (#138).
  */
 <script setup lang="ts">
-import { computed, useAttrs } from "vue";
+import { computed, ref, useAttrs, watch } from "vue";
 import { BAutocomplete } from "bootstrap-vue-next";
 import type { SelectOption } from "bootstrap-vue-next";
 
@@ -127,6 +127,75 @@ const hasValue = computed(() => {
 const noClearButton = computed(
   () => attr("noClearButton", "no-clear-button") === true || !hasValue.value,
 );
+
+/*
+ * Late options (0.42.1). bvn's BAutocomplete writes the input's text from the
+ * model value through reka-ui's ComboboxInput, which does so on mount and
+ * again only when the MODEL changes. A value set before its options load (a
+ * DXTable select filter seeded from the URL while the option list is still
+ * being fetched) therefore kept showing the raw value ("78") after its label
+ * ("Alcopop") arrived. bvn exposes no "resync" method, but the input's text
+ * is its `search` v-model, so this wrapper owns that model and, whenever the
+ * options change, puts the matching option's label in it.
+ *
+ * It never overwrites a search the user is typing: while the input has
+ * focus, it relabels only text that is still exactly the raw value. Multiple
+ * mode needs nothing (bvn derives the chips from the options on every
+ * render). A consumer that binds its own `search` owns the text, so it is
+ * left alone. A `:key` remount would also work but drops focus and the open
+ * menu, so the `search` model is the cleaner hook.
+ */
+const rootElement = ref<HTMLElement | null>(null);
+const searchText = ref("");
+const consumerOwnsSearch = computed(() => attr("search", "search") !== undefined);
+const boundSearch = computed<string>(() =>
+  consumerOwnsSearch.value ? String(attr("search", "search")) : searchText.value,
+);
+
+const optionValueAndText = (option: unknown): { value: unknown; text: unknown } => {
+  if (option === null || typeof option !== "object") return { value: option, text: option };
+  const valueField = (attr("valueField", "value-field") as string | undefined) ?? "value";
+  const textField = (attr("textField", "text-field") as string | undefined) ?? "text";
+  const record = option as Record<string, unknown>;
+  return { value: record[valueField], text: record[textField] };
+};
+
+// The same equality bvn uses to find the selected option (strict, or by key).
+const sameValue = (optionValue: unknown, modelValue: unknown) => {
+  const by = attr("by", "by");
+  if (typeof by === "string") {
+    return (
+      (optionValue as Record<string, unknown> | null)?.[by] ===
+      (modelValue as Record<string, unknown> | null)?.[by]
+    );
+  }
+  return optionValue === modelValue;
+};
+
+// A bare `multiple` in a template arrives as "" (it is not a declared prop).
+const isMultiple = computed(() => {
+  const multiple = attr("multiple", "multiple");
+  return multiple !== undefined && multiple !== null && multiple !== false;
+});
+
+const relabelFromOptions = () => {
+  if (isMultiple.value || consumerOwnsSearch.value) return;
+  const modelValue = attr("modelValue", "model-value");
+  if (modelValue === null || modelValue === undefined || modelValue === "") return;
+  const match = computedOptions.value
+    .map(optionValueAndText)
+    .find((option) => sameValue(option.value, modelValue));
+  if (!match) return;
+  const label = String(match.text ?? "");
+  if (searchText.value === label) return;
+  const input = rootElement.value?.querySelector("input");
+  const userIsTyping =
+    input !== null && input !== undefined && document.activeElement === input;
+  if (userIsTyping && searchText.value !== String(modelValue)) return;
+  searchText.value = label;
+};
+
+watch(computedOptions, relabelFromOptions);
 </script>
 
 <template>
@@ -138,12 +207,14 @@ const noClearButton = computed(
     root, so `[data-v-x] .input-group` matches nothing in a consumer build
     (#53). A plain element root makes it deterministic.
   -->
-  <div class="d-autocomplete">
+  <div ref="rootElement" class="d-autocomplete">
     <BAutocomplete
       v-bind="$attrs"
+      :search="boundSearch"
       :options="computedOptions"
       :filter-function="effectiveFilterFunction"
       :no-clear-button="noClearButton"
+      @update:search="searchText = $event"
     >
       <!-- Dynamically pass through all named slots with their props -->
       <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">

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">