@omnitend/dashboard-for-laravel 0.29.0 → 0.30.0

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-07-19T09:16:53.630Z",
+  "generated": "2026-07-20T07:09:59.465Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.28.0"
+    "version": "0.30.0"
   },
   "components": {
     "base": [
@@ -102,8 +102,27 @@
         "name": "DAutocomplete",
         "category": "base",
         "filePath": "resources/js/components/base/DAutocomplete.vue",
-        "description": "Type-safe wrapper around Bootstrap Vue Next BAutocomplete component. Text input with a filtered dropdown of suggestions (typeahead/combobox). Pass `options` and bind `v-model`; supports `multiple` and a custom `filterFunction`.",
-        "props": [],
+        "description": "Type-safe wrapper around Bootstrap Vue Next BAutocomplete component. Text input with a filtered dropdown of suggestions (typeahead/combobox). Pass `options` and bind `v-model`; supports `multiple` and a custom `filterFunction`. `null-option` adds an opt-in, pinned \"no selection\" row (see below) so a searchable single-select can always reach \"none\" in-list (#138).",
+        "props": [
+          {
+            "name": "options",
+            "type": "AutocompleteOptions",
+            "required": false,
+            "description": "Options passed straight through to BAutocomplete (see its `options` prop)."
+          },
+          {
+            "name": "filterFunction",
+            "type": "FilterFunction",
+            "required": false,
+            "description": "A custom filter. Composed with `null-option` rather than replaced: when a\nnull option is present it stays pinned and this runs on the rest."
+          },
+          {
+            "name": "nullOption",
+            "type": "union",
+            "required": false,
+            "description": "Prepend a pinned, never-filtered, selectable \"no selection\" row whose value\nis `null` (#138). `true` → default label \"None\"; a string → that label.\nSelecting it sets the model to `null` (bvn reads that as no selection, so\nthe ✕ hides and the placeholder shows). Off by default — unchanged\nbehaviour. DXTable does NOT use this; it builds its own \"All\" option."
+          }
+        ],
         "events": [],
         "slots": [
           {
@@ -2114,7 +2133,14 @@
             "type": "boolean",
             "required": false,
             "default": "false",
-            "description": "Wrap the form in a card for a visual boundary (mirrors DXTable's\n`card` prop). Tabbed forms render the tab nav as a BS5\ncard-header-tabs instead of double-wrapping. Off by default since\nDXForm is commonly embedded in a page card or modal already."
+            "description": "Wrap the form in a card for a visual boundary (mirrors DXTable's\n`card` prop). Off by default since DXForm is commonly embedded in a\npage card or modal already. Tabbed forms are wrapped by default\nregardless — see `cardTabs`; setting `card` also forces the tabbed\ncard on even when `cardTabs` is disabled."
+          },
+          {
+            "name": "cardTabs",
+            "type": "boolean",
+            "required": false,
+            "default": "true",
+            "description": "Wrap a TABBED form's content in a card panel so the active tab reads\nas a finished panel connected to the tab strip (the standard\nBootstrap card-with-tabs pattern) rather than floating on the bare\npage background (#159). On by default. Set `false` for bare tabs\n(e.g. inside a modal that already provides a boundary). Ignored for\nflat (non-tabbed) forms — use `card` for those."
           },
           {
             "name": "layout",
@@ -2779,6 +2805,13 @@
             "default": "true",
             "description": "Show per-page selector"
           },
+          {
+            "name": "showCount",
+            "type": "boolean",
+            "required": false,
+            "default": "true",
+            "description": "Show the footer's item-count caption (\"N items.\" / \"X to Y out of Z\nitems.\"). Defaults to `true`. Set `false` to suppress just the caption,\nindependent of the pager — a page ported from a plain `<b-table>` that\nhides the pager with `:show-pagination=\"false\"` would otherwise gain a\ncaption it never had (#127)."
+          },
           {
             "name": "perPageOptions",
             "type": "Array",
@@ -2797,7 +2830,7 @@
             "name": "perPage",
             "type": "number",
             "required": false,
-            "description": "Items per page (for provider mode, v-model support)"
+            "description": "Items per page. With a `v-model:per-page` it is controlled state; a bare\n`:per-page=\"20\"` is the INITIAL page size (see the initial-value vs\ncontrolled note above). When passed explicitly it takes PRECEDENCE over any\nper-page preference persisted in localStorage — `:per-page=\"20\"` always\nstarts at 20, never a size the user once picked on another table (#124).\nOmit it to let a stored preference (URL-keyed tables only) or the default\napply."
           },
           {
             "name": "striped",
@@ -2953,6 +2986,13 @@
             "type": "boolean",
             "required": false,
             "description": "Enable client-side filtering, sorting, and pagination on items array"
+          },
+          {
+            "name": "fixedLayout",
+            "type": "boolean",
+            "required": false,
+            "default": "false",
+            "description": "Apply `table-layout: fixed` to the underlying table. Off by default, so\nexisting tables keep their content-sized columns. When on, column widths\nstop depending on cell content, so they no longer reshuffle when a filter\nnarrows the rows — the table stays put as you filter (#156). Combine with\nper-field `width`/`minWidth` to control the proportions; columns with no\ndeclared width share the remaining space equally."
           }
         ],
         "events": [
@@ -3392,6 +3432,12 @@
             "required": true,
             "description": "Whether to render the per-page selector."
           },
+          {
+            "name": "showCount",
+            "type": "boolean",
+            "required": true,
+            "description": "Whether to render the item-count caption (the \"X out of Z items\" line)."
+          },
           {
             "name": "singularItemName",
             "type": "string",

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-07-19T09:16:53.689Z
+> Last updated: 2026-07-20T07:09:59.531Z
 
 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.29.0",
+  "version": "0.30.0",
   "description": "Vue 3 dashboard components for Laravel with Bootstrap Vue Next",
   "type": "module",
   "main": "./dist/dashboard-for-laravel.umd.cjs",

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

@@ -4,10 +4,38 @@
  * Text input with a filtered dropdown of suggestions (typeahead/combobox).
  * Pass `options` and bind `v-model`; supports `multiple` and a custom
  * `filterFunction`.
+ *
+ * `null-option` adds an opt-in, pinned "no selection" row (see below) so a
+ * searchable single-select can always reach "none" in-list (#138).
  */
 <script setup lang="ts">
 import { computed, useAttrs } from "vue";
 import { BAutocomplete } from "bootstrap-vue-next";
+import type { SelectOption } from "bootstrap-vue-next";
+
+// bvn's own `options` prop type — kept identical so this stays a pass-through.
+type AutocompleteOptions = readonly (object | string | number | boolean)[];
+type FilterFunction = (options: SelectOption[], search: string) => SelectOption[];
+
+interface Props {
+  /** Options passed straight through to BAutocomplete (see its `options` prop). */
+  options?: AutocompleteOptions;
+  /**
+   * A custom filter. Composed with `null-option` rather than replaced: when a
+   * null option is present it stays pinned and this runs on the rest.
+   */
+  filterFunction?: FilterFunction;
+  /**
+   * Prepend a pinned, never-filtered, selectable "no selection" row whose value
+   * is `null` (#138). `true` → default label "None"; a string → that label.
+   * Selecting it sets the model to `null` (bvn reads that as no selection, so
+   * the ✕ hides and the placeholder shows). Off by default — unchanged
+   * behaviour. DXTable does NOT use this; it builds its own "All" option.
+   */
+  nullOption?: boolean | string;
+}
+
+const props = defineProps<Props>();
 
 defineOptions({
   inheritAttrs: false,
@@ -15,6 +43,68 @@ defineOptions({
 
 const attrs = useAttrs();
 
+const attr = (name: string, hyphenated: string) =>
+  (attrs as Record<string, unknown>)[name] ?? (attrs as Record<string, unknown>)[hyphenated];
+
+const DEFAULT_NULL_OPTION_LABEL = "None";
+
+/*
+ * The null option is a raw option that bvn will normalise through the SAME
+ * `value-field`/`text-field` the consumer configured (default `value`/`text`).
+ * Build it with those effective field names so it normalises to
+ * `{ value: null, text: label }` — otherwise a consumer using e.g.
+ * `value-field="id" text-field="label"` would normalise our `{ value, text }`
+ * to `{ value: undefined, text: undefined }`, and the row would be filtered out
+ * and select as `undefined` instead of `null` (#138 review).
+ */
+const nullOption = computed<Record<string, unknown> | null>(() => {
+  const raw = props.nullOption;
+  if (raw === false || raw === undefined) return null;
+  const text = typeof raw === "string" ? raw : DEFAULT_NULL_OPTION_LABEL;
+  const valueField = (attr("valueField", "value-field") as string | undefined) ?? "value";
+  const textField = (attr("textField", "text-field") as string | undefined) ?? "text";
+  return { [valueField]: null, [textField]: text };
+});
+
+const consumerOptions = computed<AutocompleteOptions>(() =>
+  Array.isArray(props.options) ? props.options : [],
+);
+
+const computedOptions = computed<AutocompleteOptions>(() => {
+  const pinned = nullOption.value;
+  if (!pinned) return props.options ?? [];
+  return [pinned, ...consumerOptions.value];
+});
+
+const isNullOption = (option: SelectOption) => option?.value === null;
+
+/*
+ * When a null option is present it must stay pinned (top of the list, immune to
+ * the search term); the consumer's `filterFunction` — or bvn's default
+ * substring-on-text match — applies only to the rest, so the two compose rather
+ * than clobber. With no null option we forward the consumer's filter unchanged
+ * (possibly undefined, letting bvn use its own default).
+ */
+const effectiveFilterFunction = computed<FilterFunction | undefined>(() => {
+  const pinned = nullOption.value;
+  const consumerFilter = props.filterFunction;
+  if (!pinned) return consumerFilter;
+
+  return (options, search) => {
+    const rest = options.filter((option) => !isNullOption(option));
+    const filteredRest = consumerFilter
+      ? consumerFilter(rest, search)
+      : search
+        ? rest.filter((option) =>
+            String(option.text ?? "")
+              .toLowerCase()
+              .includes(search.toLowerCase()),
+          )
+        : rest;
+    return [...options.filter(isNullOption), ...filteredRest];
+  };
+});
+
 /*
  * Diverges from bvn: the clear (✕) is hidden when there is nothing to clear.
  *
@@ -28,9 +118,6 @@ const attrs = useAttrs();
  * A consumer's explicit `no-clear-button` still wins; this only ever hides the
  * button, never forces it on.
  */
-const attr = (name: string, hyphenated: string) =>
-  (attrs as Record<string, unknown>)[name] ?? (attrs as Record<string, unknown>)[hyphenated];
-
 const hasValue = computed(() => {
   const value = attr("modelValue", "model-value");
   if (Array.isArray(value)) return value.length > 0;
@@ -52,7 +139,12 @@ const noClearButton = computed(
     (#53). A plain element root makes it deterministic.
   -->
   <div class="d-autocomplete">
-    <BAutocomplete v-bind="$attrs" :no-clear-button="noClearButton">
+    <BAutocomplete
+      v-bind="$attrs"
+      :options="computedOptions"
+      :filter-function="effectiveFilterFunction"
+      :no-clear-button="noClearButton"
+    >
       <!-- Dynamically pass through all named slots with their props -->
       <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
         <slot :name="name" v-bind="slotProps" />

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

@@ -36,8 +36,8 @@
              `.card-body` wrapper — DTabs already provides `.card-header`/
              `.card-body` internally via its own `card` prop, so wrapping
              that in another `.card-body` would double up. -->
-        <component :is="card ? DCard : 'div'" v-if="hasTabs" v-bind="card ? { noBody: true } : {}">
-            <DTabs v-model:index="activeTab" :card="card">
+        <component :is="tabsInCard ? DCard : 'div'" v-if="hasTabs" v-bind="tabsInCard ? { noBody: true } : {}">
+            <DTabs v-model:index="activeTab" :card="tabsInCard">
                 <DTab
                     v-for="(tab, index) in visibleTabs"
                     :key="tab.key"
@@ -213,12 +213,23 @@ interface Props {
 
     /**
      * Wrap the form in a card for a visual boundary (mirrors DXTable's
-     * `card` prop). Tabbed forms render the tab nav as a BS5
-     * card-header-tabs instead of double-wrapping. Off by default since
-     * DXForm is commonly embedded in a page card or modal already.
+     * `card` prop). Off by default since DXForm is commonly embedded in a
+     * page card or modal already. Tabbed forms are wrapped by default
+     * regardless — see `cardTabs`; setting `card` also forces the tabbed
+     * card on even when `cardTabs` is disabled.
      */
     card?: boolean;
 
+    /**
+     * Wrap a TABBED form's content in a card panel so the active tab reads
+     * as a finished panel connected to the tab strip (the standard
+     * Bootstrap card-with-tabs pattern) rather than floating on the bare
+     * page background (#159). On by default. Set `false` for bare tabs
+     * (e.g. inside a modal that already provides a boundary). Ignored for
+     * flat (non-tabbed) forms — use `card` for those.
+     */
+    cardTabs?: boolean;
+
     /**
      * Form-wide field layout: "vertical" (default, label above input) or
      * "horizontal" (label left, input right). Overridable per-field via
@@ -241,6 +252,7 @@ const props = withDefaults(defineProps<Props>(), {
     showSubmit: true,
     autoErrorTab: true,
     card: false,
+    cardTabs: true,
     layout: "vertical",
 });
 
@@ -318,6 +330,14 @@ const hasTabs = computed(
     () => !!props.tabs && props.tabs.length > 0,
 );
 
+// Tabbed forms render inside a card panel by default (#159) so the tab
+// content reads as a finished panel rather than floating on the page.
+// `cardTabs` is the tabbed-only toggle (on by default); `card` (which also
+// wraps flat forms) still forces it on. Flat forms are unaffected.
+const tabsInCard = computed(
+    () => hasTabs.value && (props.card || props.cardTabs),
+);
+
 function visibleFieldsFor(tab: FormTab): FieldDefinition[] {
     return tab.fieldKeys
         .map((key) => fieldByKey.value[key])

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

@@ -57,6 +57,7 @@
                         :striped="striped"
                         :hover="hover"
                         :responsive="responsive"
+                        :fixed="fixedLayout"
                         :tbody-tr-class="composeRowClass"
                         v-bind="{ ...tableModeBindings, ...tablePassthroughProps }"
                         @update:sort-by="handleSortChange"
@@ -65,6 +66,25 @@
                         @update:busy="handleBusyChange"
                         @row-clicked="handleRowClick"
                     >
+                        <!-- Per-column widths (#156) via a `<colgroup>`. bvn nests this
+                             slot's `<col>`s inside a `<colgroup>` it renders. Only
+                             emitted when a field declares a width AND the consumer hasn't
+                             supplied their own `table-colgroup` (forwarded generically) —
+                             so a table with no widths gets no colgroup and renders exactly
+                             as before. `<col>` widths are authoritative under
+                             `table-layout: fixed`, where the filter row (not the header)
+                             is the width-determining first row. -->
+                        <template
+                            v-if="fieldsHaveWidths && !$slots['table-colgroup']"
+                            #table-colgroup
+                        >
+                            <col
+                                v-for="field in fields"
+                                :key="`col-${field.key}`"
+                                :style="columnStyleFor(field)"
+                            />
+                        </template>
+
                         <!-- DXTable owns `thead-top` (its filter row lives there), so a
                              consumer's own thead-top content is COMPOSED above it rather
                              than being dropped: a grouped column-header banner or a pinned
@@ -177,6 +197,7 @@
                         :per-page-options="perPageOptions"
                         :show-pagination="showPagination"
                         :show-per-page-selector="shouldShowPerPageSelector"
+                        :show-count="showCount"
                         :singular-item-name="singularItemName"
                         :plural-item-name="pluralItemName"
                         :has-active-filters="hasActiveFilters"
@@ -288,6 +309,21 @@ export interface TableField {
     filter?: FilterType;
     filterOptions?: FilterOption[];
     filterPlaceholder?: string;
+
+    /**
+     * Fixed width for this column, applied via a `<colgroup>` `<col>`. A number
+     * is treated as pixels (`200` → `200px`); a string is used verbatim
+     * (`"20%"`, `"12rem"`). Pair with the table-level `fixedLayout` prop so the
+     * width is authoritative and the column stops resizing to fit its content —
+     * without `fixedLayout` a wider cell can still stretch the column (#156).
+     */
+    width?: string | number;
+
+    /**
+     * Minimum width for this column, applied via the same `<col>` as `width`.
+     * A number is pixels; a string is used verbatim.
+     */
+    minWidth?: string | number;
     [key: string]: any;
 }
 
@@ -390,13 +426,30 @@ export interface Props<TItem = any> {
     /** Show per-page selector */
     showPerPageSelector?: boolean;
 
+    /**
+     * Show the footer's item-count caption ("N items." / "X to Y out of Z
+     * items."). Defaults to `true`. Set `false` to suppress just the caption,
+     * independent of the pager — a page ported from a plain `<b-table>` that
+     * hides the pager with `:show-pagination="false"` would otherwise gain a
+     * caption it never had (#127).
+     */
+    showCount?: boolean;
+
     /** Per-page options for selector */
     perPageOptions?: number[];
 
     /** Current page (for provider mode) */
     currentPage?: number;
 
-    /** Items per page (for provider mode, v-model support) */
+    /**
+     * Items per page. With a `v-model:per-page` it is controlled state; a bare
+     * `:per-page="20"` is the INITIAL page size (see the initial-value vs
+     * controlled note above). When passed explicitly it takes PRECEDENCE over any
+     * per-page preference persisted in localStorage — `:per-page="20"` always
+     * starts at 20, never a size the user once picked on another table (#124).
+     * Omit it to let a stored preference (URL-keyed tables only) or the default
+     * apply.
+     */
     perPage?: number;
 
     /** Striped (banded) rows. Off by default — banding adds little on short
@@ -525,6 +578,16 @@ export interface Props<TItem = any> {
 
     /** Enable client-side filtering, sorting, and pagination on items array */
     clientSide?: boolean;
+
+    /**
+     * Apply `table-layout: fixed` to the underlying table. Off by default, so
+     * existing tables keep their content-sized columns. When on, column widths
+     * stop depending on cell content, so they no longer reshuffle when a filter
+     * narrows the rows — the table stays put as you filter (#156). Combine with
+     * per-field `width`/`minWidth` to control the proportions; columns with no
+     * declared width share the remaining space equally.
+     */
+    fixedLayout?: boolean;
 }
 
 const props = withDefaults(defineProps<Props<T>>(), {
@@ -542,6 +605,7 @@ const props = withDefaults(defineProps<Props<T>>(), {
     }),
     showPagination: true,
     showPerPageSelector: true,
+    showCount: true,
     perPageOptions: () => [10, 20, 50, 100],
     currentPage: 1,
     // perPage: 10,  // Don't set default - let internalPerPage handle it
@@ -556,6 +620,7 @@ const props = withDefaults(defineProps<Props<T>>(), {
     showCreateButton: true,
     footClone: false,
     showEmpty: true,
+    fixedLayout: false,
 });
 
 const emit = defineEmits<{
@@ -906,6 +971,35 @@ const hasFieldValue = (item: unknown, key: string): boolean => {
 const dottedCellFields = (slots: Record<string, unknown>): TableField[] =>
     props.fields.filter((field) => field.key.includes('.') && !slots[`cell(${field.key})`]);
 
+/*
+ * Per-column widths (#156). A field's `width`/`minWidth` is applied through a
+ * `<colgroup>` `<col>`, NOT the header `<th>`: with `table-layout: fixed` the
+ * column widths are taken from the FIRST row of cells, and DXTable's inline
+ * filter row (`thead-top`) is that first row — so a width on the header `<th>`
+ * would be ignored whenever filters are present. A `<col>` width is
+ * authoritative regardless of row order, in both fixed and auto layout.
+ */
+const sizeToCss = (value: string | number): string =>
+    typeof value === 'number' ? `${value}px` : value;
+
+const hasDeclaredWidth = (field: TableField): boolean =>
+    (field.width !== undefined && field.width !== null) ||
+    (field.minWidth !== undefined && field.minWidth !== null);
+
+const columnStyleFor = (field: TableField): Record<string, string> | undefined => {
+    const style: Record<string, string> = {};
+    if (field.width !== undefined && field.width !== null) style.width = sizeToCss(field.width);
+    if (field.minWidth !== undefined && field.minWidth !== null) {
+        style.minWidth = sizeToCss(field.minWidth);
+    }
+    return Object.keys(style).length > 0 ? style : undefined;
+};
+
+// Only inject a `<colgroup>` when a column actually declares a width — otherwise
+// the table renders exactly as before (no colgroup at all), preserving the
+// content-sized default byte-for-byte.
+const fieldsHaveWidths = computed(() => props.fields.some(hasDeclaredWidth));
+
 // Computed: Get effective filter options for a field
 // The key a column's filter is SENT under, which is not always the column's own
 // key: a display column can filter on a different server param via `filterKey`.
@@ -973,27 +1067,51 @@ const getFieldFilterOptions = (field: TableField): FilterOption[] => {
     return [];
 };
 
-// LocalStorage key for perPage preference
-const perPageStorageKey = computed(() => {
-    const url = props.inertiaUrl || props.apiUrl || 'table';
+// LocalStorage key for the per-page preference. Only tables identified by a URL
+// (inertiaUrl / apiUrl) persist their preference: a keyless client-side table
+// has no stable identity across reloads, and every such table would otherwise
+// share the literal `table` key and clobber each other's stored value (#124).
+// Returns null when there is nothing stable to key on — every read and write
+// guards on that, so a keyless table simply doesn't persist.
+const perPageStorageKey = computed<string | null>(() => {
+    const url = props.inertiaUrl || props.apiUrl;
+    if (!url) return null;
     return `dxtable-perpage-${url.replace(/\//g, '-')}`;
 });
 
+// Whether the consumer EXPLICITLY passed `perPage`. A defaulted/omitted prop is
+// indistinguishable via `props`, so this reads the raw vnode props — the same
+// technique as `hasListener` above (Vue keeps passed props on the vnode).
+const wasPerPagePassed = ((): boolean => {
+    const vnodeProps = instance?.vnode.props ?? {};
+    return 'perPage' in vnodeProps || 'per-page' in vnodeProps;
+})();
+
 // Load perPage from localStorage or use default
 const getInitialPerPage = (): number => {
+    // An explicitly-passed `perPage` wins over any stored preference (#124):
+    // `:per-page="20"` means "start at 20" (since #110) and must not be silently
+    // overridden by a size the user once picked on a different table.
+    if (wasPerPagePassed && props.perPage !== undefined) {
+        return props.perPage;
+    }
+
     if (typeof window === 'undefined') return props.perPage || 10;
 
-    try {
-        const saved = localStorage.getItem(perPageStorageKey.value);
-        if (saved !== null) {
-            const parsed = parseInt(saved, 10);
-            // Validate it's in the allowed options
-            if (props.perPageOptions.includes(parsed)) {
-                return parsed;
+    const storageKey = perPageStorageKey.value;
+    if (storageKey !== null) {
+        try {
+            const saved = localStorage.getItem(storageKey);
+            if (saved !== null) {
+                const parsed = parseInt(saved, 10);
+                // Validate it's in the allowed options
+                if (props.perPageOptions.includes(parsed)) {
+                    return parsed;
+                }
             }
+        } catch (error) {
+            console.error('Error loading perPage from localStorage:', error);
         }
-    } catch (error) {
-        console.error('Error loading perPage from localStorage:', error);
     }
 
     return props.perPage || 10;
@@ -1006,10 +1124,11 @@ const internalPerPage = ref<number>(getInitialPerPage());
 watch(() => props.pagination?.per_page, (newPerPage) => {
     if (newPerPage && newPerPage !== internalPerPage.value) {
         internalPerPage.value = newPerPage;
-        // Also update localStorage to stay in sync
-        if (typeof window !== 'undefined') {
+        // Also update localStorage to stay in sync (only for URL-keyed tables).
+        const storageKey = perPageStorageKey.value;
+        if (typeof window !== 'undefined' && storageKey !== null) {
             try {
-                localStorage.setItem(perPageStorageKey.value, newPerPage.toString());
+                localStorage.setItem(storageKey, newPerPage.toString());
             } catch (error) {
                 console.error('Error saving perPage from watcher:', error);
             }
@@ -1445,10 +1564,11 @@ const handlePerPageChange = (newPerPage: number | string | null | (number | stri
         internalPerPage.value = perPageNum;
     }
 
-    // Save to localStorage
-    if (typeof window !== 'undefined') {
+    // Save to localStorage (only for URL-keyed tables — see perPageStorageKey).
+    const storageKey = perPageStorageKey.value;
+    if (typeof window !== 'undefined' && storageKey !== null) {
         try {
-            localStorage.setItem(perPageStorageKey.value, perPageNum.toString());
+            localStorage.setItem(storageKey, perPageNum.toString());
         } catch (error) {
             console.error('Error saving perPage to localStorage:', error);
         }

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

@@ -37,6 +37,9 @@
              from one row into the next. The key gives each record a fresh
              field subtree; the data still lives in `form`, so nothing
              is lost by remounting. -->
+        <!-- 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
             v-if="form"
             :key="formInstanceKey"
@@ -44,6 +47,7 @@
             :form="form"
             :fields="fields"
             :tabs="tabs"
+            :card-tabs="false"
             :context="item ?? undefined"
             :show-submit="false"
             @update:active-tab="emit('update:activeTab', $event)"

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

@@ -45,8 +45,9 @@
             </div>
         </div>
 
-        <!-- Bottom row: Info text -->
-        <div class="small text-muted">
+        <!-- Bottom row: Info text (the item-count caption). Suppressed by
+             `showCount` independent of the pager (#127). -->
+        <div v-if="showCount" class="small text-muted">
             <div>
                 <template v-if="pagination.total > pagination.per_page">
                     {{ pagination.from }} to {{ pagination.to }} out of {{ pagination.total }} {{ pagination.total === 1 ? singularItemName : pluralItemName }}.
@@ -81,6 +82,8 @@ interface Props {
     showPagination: boolean;
     /** Whether to render the per-page selector. */
     showPerPageSelector: boolean;
+    /** Whether to render the item-count caption (the "X out of Z items" line). */
+    showCount: boolean;
     /** Singular item noun for the info line (e.g. "product"). */
     singularItemName: string;
     /** Plural item noun for the info line (e.g. "products"). */

package/resources/js/composables/useForm.ts

@@ -154,6 +154,17 @@ export function useForm<TData extends Record<string, any>>(
 ): UseFormReturn<TData> {
     const snapshot = deepClone(initialData);
 
+    // Concurrency guards (#133). `useForm` allows overlapping submissions (a
+    // consumer can fire two before the first resolves), so:
+    //  - `inFlightCount` tracks how many requests are active; `processing` only
+    //    flips false when the LAST one finishes (a per-request `finally` flipping
+    //    it unconditionally re-enabled the button while another was still running).
+    //  - `successTimer` is a single handle for the `recentlySuccessful` reset; a
+    //    new success clears any pending timer before scheduling its own, so an
+    //    earlier success's timer can't clear the flag a later success just set.
+    let inFlightCount = 0;
+    let successTimer: ReturnType<typeof setTimeout> | null = null;
+
     const state = reactive<FormState<TData>>({
         data: deepClone(snapshot) as TData,
         errors: {},
@@ -250,6 +261,7 @@ export function useForm<TData extends Record<string, any>>(
         url: string,
         options: FormSubmitOptions<TData, TResponse> = {},
     ): Promise<TResponse> => {
+        inFlightCount += 1;
         state.processing = true;
         if (!options.preserveErrors) clearErrors();
 
@@ -314,7 +326,11 @@ export function useForm<TData extends Record<string, any>>(
                         });
 
             state.recentlySuccessful = true;
-            setTimeout(() => (state.recentlySuccessful = false), 1500);
+            if (successTimer !== null) clearTimeout(successTimer);
+            successTimer = setTimeout(() => {
+                state.recentlySuccessful = false;
+                successTimer = null;
+            }, 1500);
 
             options.onSuccess?.(data);
             if (options.resetOnSuccess) {
@@ -328,7 +344,9 @@ export function useForm<TData extends Record<string, any>>(
             options.onError?.(err as FormError);
             throw err;
         } finally {
-            state.processing = false;
+            inFlightCount -= 1;
+            // Only clear `processing` once no submission is still in flight.
+            if (inFlightCount === 0) state.processing = false;
             options.onFinish?.();
         }
     };