@omnitend/dashboard-for-laravel 0.25.0 → 0.26.0

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-07-11T11:02:20.726Z",
+  "generated": "2026-07-13T10:49:19.086Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.25.0"
+    "version": "0.26.0"
   },
   "components": {
     "base": [
@@ -1121,27 +1121,6 @@
         "slots": [],
         "methods": []
       },
-      {
-        "name": "DTab",
-        "category": "base",
-        "filePath": "resources/js/components/base/DTab.vue",
-        "description": "",
-        "props": [],
-        "events": [],
-        "slots": [
-          {
-            "name": "name",
-            "description": "",
-            "bindings": [
-              {
-                "name": "name",
-                "title": "binding"
-              }
-            ]
-          }
-        ],
-        "methods": []
-      },
       {
         "name": "DTable",
         "category": "base",
@@ -2928,6 +2907,18 @@
             "required": false,
             "description": "Rows currently expanded, as a `v-model`. Pair with the `row-expansion`\nslot to render detail content under a row (#112) instead of forcing every\nper-row detail into a modal."
           },
+          {
+            "name": "rowClass",
+            "type": "union",
+            "required": false,
+            "description": "Class(es) applied to each row's `<tr>` — a string, or a function of the\nrow. Use for conditional row styling (a variant, a muted/disabled look)\nwithout reaching into the table's internal DOM from global CSS."
+          },
+          {
+            "name": "rowClickable",
+            "type": "TSFunctionType",
+            "required": false,
+            "description": "Whether a given row is actionable. Only relevant when rows are clickable\n(an `editFields` modal or a `row-clicked` listener). A row this returns\n`false` for gets no pointer cursor, no hover highlight, and does not fire\n`row-clicked` or open the edit modal — so a row that isn't clickable\ndoesn't *look* clickable, and a click on it can't quietly do something."
+          },
           {
             "name": "clientSide",
             "type": "boolean",
@@ -3023,6 +3014,28 @@
             "description": "Card header content; overrides the default title heading and the \"New {item}\" button.",
             "bindings": []
           },
+          {
+            "name": "thead-top",
+            "description": "A row rendered ABOVE the column headers — a grouped-column banner (a `<th colspan>` spanning several columns), or a pinned totals row. Renders above DXTable's own filter row. Give it `<tr>`s.",
+            "bindings": [
+              {
+                "title": "binding",
+                "type": {
+                  "name": "object"
+                },
+                "name": "columns",
+                "description": "The number of columns in the table."
+              },
+              {
+                "title": "binding",
+                "type": {
+                  "name": "object"
+                },
+                "name": "fields",
+                "description": "The table's fields."
+              }
+            ]
+          },
           {
             "name": "name",
             "description": "Any slot the underlying table supports, forwarded with its scope: `cell(<fieldKey>)` for a cell, `foot(<fieldKey>)` for a footer cell (needs `footClone`), `empty` for the no-rows message, `row-expansion` for expandable row detail, plus `custom-foot`, `top-row`, `bottom-row`, `thead-sub` and the `table-*` slots.",
@@ -3282,8 +3295,8 @@
     ]
   },
   "stats": {
-    "totalComponents": 74,
-    "baseComponents": 57,
+    "totalComponents": 73,
+    "baseComponents": 56,
     "extendedComponents": 17
   }
 }

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-07-11T11:02:20.808Z
+> Last updated: 2026-07-13T10:49:19.148Z
 
 This file provides a complete map of all available documentation for AI agents and developers.
 

package/docs/public/llms.txt

@@ -2,7 +2,7 @@
 
 > Vue 3 dashboard components for Laravel with Bootstrap Vue Next
 >
-> A dual-package library (NPM + Composer) providing 69 Vue 3 components for building Laravel dashboards with Bootstrap Vue Next.
+> A dual-package library (NPM + Composer) providing 68 Vue 3 components for building Laravel dashboards with Bootstrap Vue Next.
 
 ## Installation
 
@@ -19,7 +19,7 @@
 - [Theming](/guide/theming): Customize appearance with CSS variables
 - [TypeScript](/guide/typescript): TypeScript types and best practices
 
-## Base Components (57 components)
+## Base Components (56 components)
 
 Lightweight type-safe wrappers around Bootstrap Vue Next components providing API stability and consistent theming.
 
@@ -74,7 +74,6 @@ Lightweight type-safe wrappers around Bootstrap Vue Next components providing AP
 - [DProgress](/components/base/dprogress): Bootstrap Vue Next Progress wrapper
 - [DRow](/components/base/drow): Bootstrap Vue Next Row wrapper
 - [DSpinner](/components/base/dspinner): Bootstrap Vue Next Spinner wrapper
-- [DTab](/components/base/dtab): Bootstrap Vue Next Tab wrapper
 - [DTable](/components/base/dtable): Bootstrap Vue Next Table wrapper
 - [DTabs](/components/base/dtabs): Bootstrap Vue Next Tabs wrapper
 - [DToast](/components/base/dtoast): Bootstrap Vue Next Toast wrapper

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnitend/dashboard-for-laravel",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "description": "Vue 3 dashboard components for Laravel with Bootstrap Vue Next",
   "type": "module",
   "main": "./dist/dashboard-for-laravel.umd.cjs",
@@ -29,7 +29,7 @@
   ],
   "scripts": {
     "dev": "vite build --watch",
-    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly --outDir dist",
+    "build": "vite build && node scripts/extract-icon-font.mjs && vue-tsc --declaration --emitDeclarationOnly --outDir dist",
     "typecheck": "vue-tsc --noEmit",
     "pretest": "vite build",
     "test": "vitest",

package/resources/css/theme.scss

@@ -210,12 +210,18 @@ $dashboard-navbar-content-height: calc(
 // bi-*">`) renders without the consumer wiring up their own icon set.
 //
 // Imported as SCSS (not the prebuilt CSS) so we can override the font `src` to
-// woff2 ONLY — dropping bootstrap-icons' legacy `woff` fallback. In the library
-// build Vite inlines CSS `url()` assets as data URIs, so shipping both formats
-// doubled the embedded font bytes in `dist/style.css` for no benefit (every
-// browser we target reads woff2). The override must come BEFORE the import so
+// woff2 ONLY — dropping bootstrap-icons' legacy `woff` fallback, which no
+// browser we target needs. The override must come BEFORE the import so
 // bootstrap-icons' own `!default` src doesn't re-add the woff. The bare
 // `bootstrap-icons/...` specifier resolves through Vite's module resolver.
+//
+// The font itself does NOT ship inside `dist/style.css`. Vite always inlines
+// CSS-referenced assets as base64 data URIs in library mode, which is
+// pathological for a woff2 (already Brotli-compressed; base64 inflates it a
+// third; gzip recovers none of it) — inlined, the font alone was 137 KB of the
+// stylesheet's 191 KB gzip. `scripts/extract-icon-font.mjs` writes it back out
+// as a real file post-build, so the browser fetches it only when a `.bi-*`
+// glyph actually renders. See #77.
 $bootstrap-icons-font-src: url("bootstrap-icons/font/fonts/bootstrap-icons.woff2")
   format("woff2");
 @import "bootstrap-icons/font/bootstrap-icons";

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

@@ -172,7 +172,7 @@ import DAlert from "../base/DAlert.vue";
 import DButton from "../base/DButton.vue";
 import DCard from "../base/DCard.vue";
 import DTabs from "../base/DTabs.vue";
-import DTab from "../base/DTab.vue";
+import { BTab as DTab } from "bootstrap-vue-next"; // raw BTab: BTabs scans slot vnodes for it (#119)
 import DXFormField from "./DXFormField.vue";
 import type { UseFormReturn } from "../../composables/useForm";
 import type { DefineFormReturn } from "../../composables/defineForm";

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

@@ -44,6 +44,7 @@
                     <DTable
                         v-else-if="isProviderMode"
                         ref="tableRef"
+                        :key="tableSlotSignature($slots)"
                         :provider="effectiveProvider"
                         :fields="fields"
                         :sort-by="effectiveSortBy"
@@ -55,6 +56,7 @@
                         :hover="hover"
                         :responsive="responsive"
                         :busy="busy"
+                        :tbody-tr-class="composeRowClass"
                         v-bind="tablePassthroughProps"
                         @update:sort-by="handleSortChange"
                         @update:expanded-items="emit('update:expandedItems', $event)"
@@ -62,9 +64,19 @@
                         @update:busy="handleBusyChange"
                         @row-clicked="handleRowClick"
                     >
-                        <!-- Inline Filter Row -->
-                        <template v-if="hasFilters" #thead-top>
-                            <tr class="filter-row">
+                        <!-- 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
+                             totals row sits above the headers where it belongs (#120). -->
+                        <template v-if="hasFilters || $slots['thead-top']" #thead-top="theadScope">
+                            <!--
+                              @slot A row rendered ABOVE the column headers — a grouped-column banner (a `<th colspan>` spanning several columns), or a pinned totals row. Renders above DXTable's own filter row. Give it `<tr>`s.
+                              @binding {object} columns The number of columns in the table.
+                              @binding {object} fields The table's fields.
+                            -->
+                            <slot name="thead-top" v-bind="theadScope" />
+
+                            <tr v-if="hasFilters" class="filter-row">
                                 <th v-for="field in fields" :key="`filter-${field.key}`" class="p-2">
                                     <!-- Text Filter -->
                                     <DFormInput
@@ -130,7 +142,7 @@
                              table-busy/caption/colgroup, thead-sub, top-row, bottom-row.
                              See `isTableSlot` for the two DXTable renders itself. -->
                         <template
-                            v-for="name in forwardedTableSlotNames"
+                            v-for="name in forwardableSlotNames($slots)"
                             :key="name"
                             #[name]="slotProps"
                         >
@@ -144,6 +156,7 @@
                     <!-- Client-Side Mode: Local filtering, sorting, pagination -->
                     <DTable
                         v-else-if="isClientSideMode"
+                        :key="tableSlotSignature($slots)"
                         :items="clientSidePaginatedItems"
                         :fields="fields"
                         :sort-by="effectiveSortBy"
@@ -153,14 +166,25 @@
                         :striped="striped"
                         :hover="hover"
                         :responsive="responsive"
+                        :tbody-tr-class="composeRowClass"
                         v-bind="tablePassthroughProps"
                         @update:sort-by="handleSortChange"
                         @update:expanded-items="emit('update:expandedItems', $event)"
                         @row-clicked="handleRowClick"
                     >
-                        <!-- Inline Filter Row -->
-                        <template v-if="hasFilters" #thead-top>
-                            <tr class="filter-row">
+                        <!-- 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
+                             totals row sits above the headers where it belongs (#120). -->
+                        <template v-if="hasFilters || $slots['thead-top']" #thead-top="theadScope">
+                            <!--
+                              @slot A row rendered ABOVE the column headers — a grouped-column banner (a `<th colspan>` spanning several columns), or a pinned totals row. Renders above DXTable's own filter row. Give it `<tr>`s.
+                              @binding {object} columns The number of columns in the table.
+                              @binding {object} fields The table's fields.
+                            -->
+                            <slot name="thead-top" v-bind="theadScope" />
+
+                            <tr v-if="hasFilters" class="filter-row">
                                 <th v-for="field in fields" :key="`filter-${field.key}`" class="p-2">
                                     <!-- Text Filter -->
                                     <DFormInput
@@ -226,7 +250,7 @@
                              table-busy/caption/colgroup, thead-sub, top-row, bottom-row.
                              See `isTableSlot` for the two DXTable renders itself. -->
                         <template
-                            v-for="name in forwardedTableSlotNames"
+                            v-for="name in forwardableSlotNames($slots)"
                             :key="name"
                             #[name]="slotProps"
                         >
@@ -240,6 +264,7 @@
                     <!-- Inertia Mode: Use items prop -->
                     <DTable
                         v-else-if="isInertiaMode"
+                        :key="tableSlotSignature($slots)"
                         :items="items"
                         :fields="fields"
                         :sort-by="effectiveSortBy"
@@ -250,14 +275,25 @@
                         :hover="hover"
                         :responsive="responsive"
                         :busy="effectiveBusy"
+                        :tbody-tr-class="composeRowClass"
                         v-bind="tablePassthroughProps"
                         @update:sort-by="handleSortChange"
                         @update:expanded-items="emit('update:expandedItems', $event)"
                         @row-clicked="handleRowClick"
                     >
-                        <!-- Inline Filter Row -->
-                        <template v-if="hasFilters" #thead-top>
-                            <tr class="filter-row">
+                        <!-- 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
+                             totals row sits above the headers where it belongs (#120). -->
+                        <template v-if="hasFilters || $slots['thead-top']" #thead-top="theadScope">
+                            <!--
+                              @slot A row rendered ABOVE the column headers — a grouped-column banner (a `<th colspan>` spanning several columns), or a pinned totals row. Renders above DXTable's own filter row. Give it `<tr>`s.
+                              @binding {object} columns The number of columns in the table.
+                              @binding {object} fields The table's fields.
+                            -->
+                            <slot name="thead-top" v-bind="theadScope" />
+
+                            <tr v-if="hasFilters" class="filter-row">
                                 <th v-for="field in fields" :key="`filter-${field.key}`" class="p-2">
                                     <!-- Text Filter -->
                                     <DFormInput
@@ -323,7 +359,7 @@
                              table-busy/caption/colgroup, thead-sub, top-row, bottom-row.
                              See `isTableSlot` for the two DXTable renders itself. -->
                         <template
-                            v-for="name in forwardedTableSlotNames"
+                            v-for="name in forwardableSlotNames($slots)"
                             :key="name"
                             #[name]="slotProps"
                         >
@@ -917,6 +953,22 @@ export interface Props<TItem = any> {
      */
     expandedItems?: TItem[];
 
+    /**
+     * Class(es) applied to each row's `<tr>` — a string, or a function of the
+     * row. Use for conditional row styling (a variant, a muted/disabled look)
+     * without reaching into the table's internal DOM from global CSS.
+     */
+    rowClass?: string | ((item: TItem, index: number) => string | string[] | Record<string, boolean>);
+
+    /**
+     * Whether a given row is actionable. Only relevant when rows are clickable
+     * (an `editFields` modal or a `row-clicked` listener). A row this returns
+     * `false` for gets no pointer cursor, no hover highlight, and does not fire
+     * `row-clicked` or open the edit modal — so a row that isn't clickable
+     * doesn't *look* clickable, and a click on it can't quietly do something.
+     */
+    rowClickable?: (item: TItem, index: number) => boolean;
+
     /** Enable client-side filtering, sorting, and pagination on items array */
     clientSide?: boolean;
 }
@@ -1045,10 +1097,30 @@ const rowsAreInteractive = computed(
     () => (props.editFields?.length ?? 0) > 0 || hasListener('rowClicked'),
 );
 
-const rowCursor = computed(() => (rowsAreInteractive.value ? 'pointer' : 'default'));
-const rowHoverBackground = computed(() =>
-    rowsAreInteractive.value ? 'var(--bs-table-hover-bg)' : 'inherit',
-);
+/**
+ * A row is actionable when the table is interactive AND the consumer's
+ * `rowClickable` predicate (if any) says so — a row-clicked table can have rows
+ * that aren't navigable (#115).
+ */
+const isRowActionable = (item: T, index: number): boolean =>
+    rowsAreInteractive.value && (props.rowClickable?.(item, index) ?? true);
+
+/**
+ * The `<tr>` class, composed from the consumer's `rowClass` and our own
+ * actionable marker. The pointer/hover affordance hangs off the marker class
+ * rather than a blanket `tbody tr` rule, so a non-actionable row simply doesn't
+ * get it — which is what let consumers drop their global
+ * `tbody tr:has(.marker)` CSS hack.
+ */
+const composeRowClass = (item: T, index: number) => {
+    const consumerClass =
+        typeof props.rowClass === 'function' ? props.rowClass(item, index) : props.rowClass;
+
+    const classes: any[] = [];
+    if (consumerClass) classes.push(consumerClass);
+    if (isRowActionable(item, index)) classes.push('dx-row-actionable');
+    return classes;
+};
 
 // Internal sortBy state, seeded from the prop when it's an initial value.
 const internalSortBy = ref<BTableSortBy[]>(props.sortBy ? [...props.sortBy] : []);
@@ -1414,12 +1486,37 @@ const effectivePerPage = computed(() => {
 // Client-Side Mode: Pagination (requires effectivePerPage)
 // ============================================
 
+/*
+ * The page the client-side view actually renders (#118).
+ *
+ * `clientSideCurrentPage` is only reset on a filter or per-page change, so when
+ * the `items` prop SHRINKS — a consumer refetching a narrower dataset — it can
+ * point past the end of the new set. The pagination metadata below already
+ * clamped for display, but the slice used the raw value, so the pager said
+ * "page 2 of 2" while the table sliced page 6 and rendered zero rows. Both read
+ * from this now, so the view and its pager can't disagree.
+ */
+const clientSideLastPage = computed(() =>
+    Math.max(1, Math.ceil(clientSideFilteredItems.value.length / effectivePerPage.value)),
+);
+
+const clientSidePage = computed(() =>
+    Math.min(Math.max(1, clientSideCurrentPage.value), clientSideLastPage.value),
+);
+
+// Write the clamp back, so the NEXT interaction starts from a real page rather
+// than a stale one. Clamping to the last page (not resetting to 1) keeps the
+// user near where they were.
+watch(clientSideLastPage, (lastPage) => {
+    if (clientSideCurrentPage.value > lastPage) clientSideCurrentPage.value = lastPage;
+});
+
 // Client-side paginated items (final output)
 const clientSidePaginatedItems = computed<T[]>(() => {
     if (!isClientSideMode.value) return [];
 
     const perPage = effectivePerPage.value;
-    const start = (clientSideCurrentPage.value - 1) * perPage;
+    const start = (clientSidePage.value - 1) * perPage;
     const end = start + perPage;
 
     return clientSideSortedItems.value.slice(start, end);
@@ -1430,11 +1527,10 @@ const clientSidePagination = computed<PaginationData>(() => {
     const total = clientSideFilteredItems.value.length;
     const totalUnfiltered = props.items?.length || 0;
     const perPage = effectivePerPage.value;
-    const currentPage = clientSideCurrentPage.value;
-    const lastPage = Math.max(1, Math.ceil(total / perPage));
+    const lastPage = clientSideLastPage.value;
 
-    // Ensure current page is valid
-    const validPage = Math.min(Math.max(1, currentPage), lastPage);
+    // Same clamped page the slice uses — see `clientSidePage` (#118).
+    const validPage = clientSidePage.value;
 
     const from = total > 0 ? (validPage - 1) * perPage + 1 : 0;
     const to = Math.min(validPage * perPage, total);
@@ -1833,6 +1929,43 @@ try {
 // Forward only the keyed edit slots the consumer actually provided, so
 // DXForm doesn't mistake an always-present (but empty) wrapper for
 // a real custom-value override.
+/*
+ * Seeding an EDIT form from a row (#117).
+ *
+ * `row[key] ?? field.default` is wrong: it can't tell "the row has no such key"
+ * from "the row's value IS null", so an explicitly-null column gets overwritten
+ * by the field's default — a value the user never saw, on a field they may not
+ * even be able to see. Presence, not nullishness, decides.
+ */
+const seedValueFor = (field: any, row: T): any => {
+    if (Object.prototype.hasOwnProperty.call(row as any, field.key)) {
+        return (row as any)[field.key];
+    }
+    return field.default ?? '';
+};
+
+/*
+ * Whether a field is currently VISIBLE, by the same rule DXForm renders by
+ * (`when` + the legacy `show`), against the same model (context + live data).
+ * Kept in step with DXForm.isFieldVisible.
+ */
+const editPredicateModel = computed(() => ({
+    ...((selectedItem.value as any) ?? {}),
+    ...(editForm.value?.data ?? {}),
+}));
+
+const isEditFieldVisible = (field: any): boolean => {
+    const when = field.when;
+    const whenOk =
+        when === undefined
+            ? true
+            : typeof when === 'function'
+              ? when(editPredicateModel.value)
+              : when;
+    const showOk = field.show ? field.show() : true;
+    return whenOk && showOk;
+};
+
 // Fields whose value actually belongs in the payload. A presentational field
 // (submit: false) renders but holds no data — see FieldDefinition.submit.
 const submittableEditFields = computed(() =>
@@ -1843,7 +1976,21 @@ const submittableEditFields = computed(() =>
 // so a `submit: false` control — or a `span` slot calling `update` — can write
 // its key back into the form data after seeding. Strip them on the way out.
 const nonSubmittedFieldKeys = computed(
-    () => new Set((props.editFields ?? []).filter((field) => field.submit === false).map((field) => field.key)),
+    () =>
+        new Set(
+            (props.editFields ?? [])
+                .filter(
+                    (field) =>
+                        // Presentational: lays the form out, holds no data (#110).
+                        field.submit === false ||
+                        // Hidden by `when` at submit time (#117). Submitting a field
+                        // the user cannot see is a silent write — and with `default`
+                        // set it writes a value they never chose. Omitting the key
+                        // leaves the stored value alone.
+                        !isEditFieldVisible(field),
+                )
+                .map((field) => field.key),
+        ),
 );
 
 const stripNonSubmittedFields = (data: Record<string, any>): Record<string, any> => {
@@ -1885,9 +2032,50 @@ const TABLE_SLOT_NAMES = new Set([
 const isTableSlot = (name: string) =>
     TABLE_SLOT_NAMES.has(name) || TABLE_SLOT_PREFIXES.some((prefix) => name.startsWith(prefix));
 
-const forwardedTableSlotNames = computed(() =>
-    Object.keys(tableSlots).filter((name) => isTableSlot(name)),
-);
+/*
+ * The inner table is KEYED on the set of forwarded slot names (#114).
+ *
+ * bootstrap-vue-next's BTable captures its slot set at mount: a `cell(...)` slot
+ * that comes into existence LATER — a consumer whose columns are data-driven and
+ * only known once a fetch resolves — never reaches the cells, and the column
+ * renders raw values as though no cell slot existed. Verified against raw BTable,
+ * so it isn't something our forwarding chain drops.
+ *
+ * Nothing in the forwarding can fix that, so the inner table remounts when the
+ * slot SET changes. Consumers were already remounting to work around it, but at
+ * the DXTable level, which throws away per-page, filters, sort and page — all of
+ * which live out here and now survive. The signature is names-only, so a slot's
+ * CONTENT changing (the common case) doesn't remount anything.
+ *
+ * In provider mode a remount refetches; that only happens when the column set
+ * itself changes, which is already a refetch in practice.
+ */
+/*
+ * A FUNCTION, not a computed: `useSlots()` returns an object Vue mutates in
+ * place with nothing to track, so a computed over its keys is captured on the
+ * first render and never updates — which is what made late `cell(...)` slots
+ * invisible (#114). Called from the template, it re-evaluates every render.
+ *
+ * It also has to EXCLUDE the slots DXTable renders itself: declaring `#thead-top`
+ * here (even rendering nothing into it) would override DXTable's own thead-top
+ * template, silently dropping the filter row and the consumer's banner (#120).
+ */
+const forwardableSlotNames = (slots: Record<string, unknown>): string[] =>
+    Object.keys(slots).filter((name) => isTableSlot(name));
+
+const tableSlotSignature = (slots: Record<string, unknown>): string =>
+    Object.keys(slots).filter(isTableSlot).sort().join('|');
+
+/*
+ * The template iterates `$slots` DIRECTLY rather than a computed over
+ * `useSlots()`. It has to: `useSlots()` returns an object that Vue MUTATES in
+ * place, with no reactive dependency to track — so a computed over its keys is
+ * captured on first render and never recomputes. A consumer whose `cell(...)`
+ * slots come into existence after a fetch resolves (data-driven columns) got
+ * columns with raw values and no cell templates, and had to remount the whole
+ * table to fix it (#114). Reading `$slots` inside the render function re-reads
+ * the current slot set on every update.
+ */
 
 // Table-level features of the inner BTable, exposed verbatim and bound to all
 // three data modes from one place.
@@ -1956,6 +2144,11 @@ const getFieldSortState = (fieldKey: string) => {
 
 // Handle row click for editing
 const handleRowClick = (item: T, index: number, event: MouseEvent) => {
+    // A row the consumer marked non-actionable doesn't look clickable, so it
+    // must not BE clickable either — otherwise a click that looks dead quietly
+    // navigates or opens the modal (#115).
+    if (props.rowClickable && !props.rowClickable(item, index)) return;
+
     // Always emit rowClicked for custom handling
     emit('rowClicked', item, index, event);
 
@@ -1975,13 +2168,13 @@ const handleRowClick = (item: T, index: number, event: MouseEvent) => {
             // Presentational fields (submit: false) lay the form out; they hold
             // no data and must not be POSTed just because they were declared.
             submittableEditFields.value.forEach(field => {
-                formData[field.key] = (item as any)[field.key] ?? field.default ?? '';
+                formData[field.key] = seedValueFor(field, item);
             });
             editForm.value = useForm(formData);
         } else {
             // Update existing form
             submittableEditFields.value.forEach(field => {
-                editForm.value.data[field.key] = (item as any)[field.key] ?? field.default ?? '';
+                editForm.value.data[field.key] = seedValueFor(field, item);
             });
             editForm.value.clearErrors();
         }
@@ -2284,13 +2477,15 @@ defineExpose({
 </script>
 
 <style scoped>
-/* Rows that do something on click look like it — see `rowsAreInteractive`. */
-:deep(tbody tr) {
-    cursor: v-bind(rowCursor);
+/* Rows that do something on click look like it. Hung off a marker class rather
+   than a blanket `tbody tr` rule, so a row the consumer's `rowClickable` says is
+   not actionable simply doesn't get the affordance (#107, #115). */
+:deep(tbody tr.dx-row-actionable) {
+    cursor: pointer;
 }
 
-:deep(tbody tr:hover) {
-    background-color: v-bind(rowHoverBackground);
+:deep(tbody tr.dx-row-actionable:hover) {
+    background-color: var(--bs-table-hover-bg);
 }
 
 /* Improve pagination button sizing to match form controls */

package/resources/js/index.ts

@@ -85,7 +85,20 @@ export { default as DProgress } from "./components/base/DProgress.vue";
 export { default as DRow } from "./components/base/DRow.vue";
 export { default as DSpinner } from "./components/base/DSpinner.vue";
 export { default as DTable } from "./components/base/DTable.vue";
-export { default as DTab } from "./components/base/DTab.vue";
+/*
+ * DTab is a RAW RE-EXPORT of BTab, not a wrapper — same exception as
+ * DCarouselSlide above, and for the same reason.
+ *
+ * BTabs decides which tab to activate on mount by scanning its slot vnodes for
+ * the BTab component type (its initial-selection branch is gated on
+ * `tabElementsArray.length > 0`). A wrapper component in between hides that, so
+ * BTabs found no tabs to select and NO pane got `active`/`show`: the nav
+ * rendered and every body was invisible until the user clicked (#119).
+ *
+ * Bisected — BTabs+BTab and DTabs+BTab both activate the first tab; BTabs+DTab
+ * does not. So it is the child wrapper, and only the child, that has to go.
+ */
+export { BTab as DTab } from "bootstrap-vue-next";
 export { default as DTabs } from "./components/base/DTabs.vue";
 export { default as DToast } from "./components/base/DToast.vue";
 export { default as DToaster } from "./components/base/DToaster.vue";

package/dist/components/base/DTab.vue.d.ts

@@ -1,12 +0,0 @@
-declare var __VLS_7: string | number, __VLS_8: any;
-type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_7>]?: (props: typeof __VLS_8) => any;
-};
-declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

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

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { BTab } from "bootstrap-vue-next";
-import { useSlots } from "vue";
-
-const slots = useSlots();
-</script>
-
-<template>
-  <BTab v-bind="$attrs">
-    <template v-for="(_, name) in slots" :key="name" #[name]="slotProps">
-      <slot :name="name" v-bind="slotProps" />
-    </template>
-  </BTab>
-</template>