@omnitend/dashboard-for-laravel 0.24.0 → 0.26.0

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
@@ -80,10 +92,10 @@
                                         v-else-if="field.filter === 'select'"
                                         :model-value="effectiveFilters[filterKeyFor(field)] || ''"
                                         :options="getFieldFilterOptions(field)"
-                                        :placeholder="field.filterPlaceholder || `All ${field.label || field.key}`"
+                                        :placeholder="field.filterPlaceholder || filterAllLabelFor(field)"
                                         size="sm"
                                         open-on-focus
-                                        @update:model-value="handleFilterChange(filterKeyFor(field), ($event ?? '') as string)"
+                                        @update:model-value="handleSelectFilterChange(field, $event)"
                                     />
 
                                     <!-- Number Filter -->
@@ -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
@@ -176,10 +200,10 @@
                                         v-else-if="field.filter === 'select'"
                                         :model-value="effectiveFilters[filterKeyFor(field)] || ''"
                                         :options="getFieldFilterOptions(field)"
-                                        :placeholder="field.filterPlaceholder || `All ${field.label || field.key}`"
+                                        :placeholder="field.filterPlaceholder || filterAllLabelFor(field)"
                                         size="sm"
                                         open-on-focus
-                                        @update:model-value="handleFilterChange(filterKeyFor(field), ($event ?? '') as string)"
+                                        @update:model-value="handleSelectFilterChange(field, $event)"
                                     />
 
                                     <!-- Number Filter -->
@@ -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
@@ -273,10 +309,10 @@
                                         v-else-if="field.filter === 'select'"
                                         :model-value="effectiveFilters[filterKeyFor(field)] || ''"
                                         :options="getFieldFilterOptions(field)"
-                                        :placeholder="field.filterPlaceholder || `All ${field.label || field.key}`"
+                                        :placeholder="field.filterPlaceholder || filterAllLabelFor(field)"
                                         size="sm"
                                         open-on-focus
-                                        @update:model-value="handleFilterChange(filterKeyFor(field), ($event ?? '') as string)"
+                                        @update:model-value="handleSelectFilterChange(field, $event)"
                                     />
 
                                     <!-- Number Filter -->
@@ -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"
                         >
@@ -685,6 +721,14 @@ export interface TableField {
 
     /** The value sent when the `filterNullText` option is chosen. Default `"null"`. */
     filterNullValue?: string;
+
+    /**
+     * Text of the "clear this filter" option at the top of a `select` filter's
+     * list (default: the filter's placeholder, e.g. "All statuses"). The list
+     * otherwise offers no way back to *unfiltered* once a value is picked —
+     * only the ✕, which isn't discoverable from inside the open dropdown.
+     */
+    filterAllText?: string;
     sortable?: boolean;
     hint?: string;
     filter?: FilterType;
@@ -909,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;
 }
@@ -928,7 +988,7 @@ const props = withDefaults(defineProps<Props<T>>(), {
     }),
     showPagination: true,
     showPerPageSelector: true,
-    perPageOptions: () => [10, 25, 50, 100],
+    perPageOptions: () => [10, 20, 50, 100],
     currentPage: 1,
     // perPage: 10,  // Don't set default - let internalPerPage handle it
     striped: false,
@@ -1037,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] : []);
@@ -1228,6 +1308,20 @@ const filterKeyFor = (field: TableField): string => field.filterKey ?? field.key
 // The value that means "has no value" for a select filter (#106).
 const filterNullValueFor = (field: TableField): string => field.filterNullValue ?? 'null';
 
+// The filter's placeholder, and the label of its "no filter" option — the same
+// words, so picking the top option visibly returns the field to its resting state.
+// See getFieldFilterOptions: an empty-string option value makes bvn render no
+// options at all, so "no filter" needs a value that isn't empty.
+const FILTER_ALL_VALUE = '__dx_filter_all__';
+
+const handleSelectFilterChange = (field: TableField, value: unknown) => {
+    const selected = (value ?? '') as string;
+    handleFilterChange(filterKeyFor(field), selected === FILTER_ALL_VALUE ? '' : selected);
+};
+
+const filterAllLabelFor = (field: TableField): string =>
+    field.filterAllText ?? field.filterPlaceholder ?? `All ${field.label || field.key}`;
+
 /**
  * Column header text. An explicitly empty `label` means an EMPTY header — an
  * actions column headed `actions` (lowercase, as-keyed) is a leak, not a
@@ -1239,7 +1333,19 @@ const headerLabel = (field: TableField, slotLabel?: string): string =>
 const getFieldFilterOptions = (field: TableField): FilterOption[] => {
     const options: FilterOption[] = [];
 
-    // An "Unassigned"-style option, so a select filter can express "no value".
+    // The way back to *unfiltered*. Without it the dropdown lists only the
+    // values, so once a filter is picked the only way to clear it is the ✕ —
+    // which isn't discoverable from inside the open list.
+    //
+    // It carries a SENTINEL, not `''`. bvn drops the ENTIRE option list if any
+    // option's value is an empty string — not just that entry, the whole list —
+    // so the obvious encoding of "no filter" silently empties the dropdown.
+    // `handleSelectFilterChange` translates it back to `''`, which is already
+    // how the filter map represents unset.
+    options.push({ value: FILTER_ALL_VALUE, text: filterAllLabelFor(field) });
+
+    // An "Unassigned"-style option, so a select filter can express "has no value"
+    // — a different thing from "no filter" above.
     if (field.filterNullText) {
         options.push({ value: filterNullValueFor(field), text: field.filterNullText });
     }
@@ -1257,7 +1363,8 @@ const getFieldFilterOptions = (field: TableField): FilterOption[] => {
         return [...options, ...serverValues.map(value => ({ value, text: value }))];
     }
 
-    return options;
+    // No values to choose from — don't offer a lone "All x" that filters nothing.
+    return [];
 };
 
 // LocalStorage key for perPage preference
@@ -1379,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);
@@ -1395,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);
@@ -1798,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(() =>
@@ -1808,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> => {
@@ -1850,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.
@@ -1921,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);
 
@@ -1940,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();
         }
@@ -2249,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/components/extended/DXUserAvatar.vue

@@ -15,7 +15,11 @@
   <div class="dx-user-avatar">
     <!-- `.user-avatar` (not a `dx-`-prefixed name) because it's the documented
          theming hook consumers already override — see the theming guide. -->
-    <span class="user-avatar">
+    <!-- The initial is decorative: it tells a screen-reader user nothing they
+         don't know, and it would otherwise leak into the accessible name of
+         whatever contains the avatar (the navbar's user-menu trigger). The
+         badge's label below stays announced. -->
+    <span class="user-avatar" aria-hidden="true">
       <!-- @slot Replaces the initial inside the disc (e.g. a photo or an icon). -->
       <slot>{{ resolvedInitial }}</slot>
     </span>

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>