@omnitend/dashboard-for-laravel 0.41.0 → 0.41.2

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

@@ -72,8 +72,7 @@
                              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. -->
+                             `table-layout: fixed`, regardless of any consumer header banners. -->
                         <template
                             v-if="fieldsHaveWidths && !$slots['table-colgroup']"
                             #table-colgroup
@@ -85,99 +84,100 @@
                             />
                         </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
-                             totals row sits above the headers where it belongs (#120). -->
-                        <template v-if="hasFilters || $slots['thead-top']" #thead-top="theadScope">
+                        <template v-if="$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.
+                              @slot Rows above the column headers, such as grouped-column banners or pinned totals. 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" />
+                        </template>
 
-                            <tr v-if="hasFilters" class="filter-row">
-                                <th v-for="field in fields" :key="`filter-${field.key}`" class="p-2">
-                                    <!-- Text Filter -->
-                                    <DFormInput
-                                        v-if="field.filter === 'text'"
-                                        :model-value="effectiveFilters[filterKeyFor(field)] || ''"
-                                        :placeholder="field.filterPlaceholder || `Search ${field.label || field.key}...`"
-                                        size="sm"
-                                        @update:model-value="handleFilterChange(filterKeyFor(field), $event as string)"
-                                    />
-
-                                    <!-- Multi-value Select Filter (#51): several values at once; the filters entry is an array -->
-                                    <DAutocomplete
-                                        v-else-if="field.filter === 'select' && field.filterMultiple"
-                                        :model-value="multiFilterValueFor(field)"
-                                        :options="getFieldFilterOptions(field)"
-                                        :placeholder="field.filterPlaceholder || filterAllLabelFor(field)"
-                                        size="sm"
-                                        multiple
-                                        open-on-focus
-                                        @update:model-value="handleMultiSelectFilterChange(field, $event)"
-                                    />
-
-                                    <!-- Select Filter: typeahead — browse the full list on focus, or type to narrow; clear (✕) resets to "no filter" -->
-                                    <DAutocomplete
-                                        v-else-if="field.filter === 'select'"
-                                        :model-value="(effectiveFilters[filterKeyFor(field)] as string) || ''"
-                                        :options="getFieldFilterOptions(field)"
-                                        :placeholder="field.filterPlaceholder || filterAllLabelFor(field)"
-                                        size="sm"
-                                        open-on-focus
-                                        @update:model-value="handleSelectFilterChange(field, $event)"
-                                    />
-
-                                    <!-- Native Select Filter (S3b): a plain <select> for consumers who
-                                         want OS-native behaviour (full-height menu, native keyboard/scroll)
-                                         instead of the DAutocomplete typeahead. Shares the select filter's
-                                         option list (getFieldFilterOptions) and change handler
-                                         (handleSelectFilterChange) EXACTLY — so it behaves identically to
-                                         filter:"select" in every way but the control. Single-select only:
-                                         `filterMultiple` is ignored here. The model maps "no filter" to the
-                                         FILTER_ALL_VALUE sentinel (see nativeSelectFilterValue) so the "All …"
-                                         option shows selected in a native control. -->
-                                    <DFormSelect
-                                        v-else-if="field.filter === 'select-native'"
-                                        :model-value="nativeSelectFilterValue(field)"
-                                        :options="getFieldFilterOptions(field) as unknown as Record<string, unknown>[]"
-                                        size="sm"
-                                        @update:model-value="handleSelectFilterChange(field, $event)"
-                                    />
-
-                                    <!-- Number Filter -->
-                                    <DFormInput
-                                        v-else-if="field.filter === 'number'"
-                                        :model-value="effectiveFilters[filterKeyFor(field)] || ''"
-                                        :placeholder="field.filterPlaceholder || `Filter ${field.label || field.key}...`"
-                                        type="number"
-                                        size="sm"
-                                        @update:model-value="handleFilterChange(filterKeyFor(field), $event as string)"
-                                    />
-
-                                    <!-- Date Filter -->
-                                    <DFormInput
-                                        v-else-if="field.filter === 'date'"
-                                        :model-value="effectiveFilters[filterKeyFor(field)] || ''"
-                                        type="date"
-                                        size="sm"
-                                        @update:model-value="handleFilterChange(filterKeyFor(field), $event as string)"
-                                    />
+                        <!-- The table supplies the below-header row and one cell per field. -->
+                        <template v-if="hasFilters || $slots['thead-sub']" #thead-sub="{ field, ...filterScope }">
+                            <div v-if="hasFilters" class="dx-table-filter-cell">
+                                <!-- Text Filter -->
+                                <DFormInput
+                                    v-if="field.filter === 'text'"
+                                    :model-value="effectiveFilters[filterKeyFor(field)] || ''"
+                                    :placeholder="field.filterPlaceholder || `Search ${field.label || field.key}...`"
+                                    size="sm"
+                                    @update:model-value="handleFilterChange(filterKeyFor(field), $event as string)"
+                                />
+
+                                <!-- Multi-value Select Filter (#51): several values at once; the filters entry is an array -->
+                                <DAutocomplete
+                                    v-else-if="field.filter === 'select' && field.filterMultiple"
+                                    :model-value="multiFilterValueFor(field)"
+                                    :options="getFieldFilterOptions(field)"
+                                    :placeholder="field.filterPlaceholder || filterAllLabelFor(field)"
+                                    size="sm"
+                                    multiple
+                                    open-on-focus
+                                    @update:model-value="handleMultiSelectFilterChange(field, $event)"
+                                />
+
+                                <!-- Select Filter: typeahead — browse the full list on focus, or type to narrow; clear (✕) resets to "no filter" -->
+                                <DAutocomplete
+                                    v-else-if="field.filter === 'select'"
+                                    :model-value="(effectiveFilters[filterKeyFor(field)] as string) || ''"
+                                    :options="getFieldFilterOptions(field)"
+                                    :placeholder="field.filterPlaceholder || filterAllLabelFor(field)"
+                                    size="sm"
+                                    open-on-focus
+                                    @update:model-value="handleSelectFilterChange(field, $event)"
+                                />
+
+                                <!-- Native Select Filter (S3b): a plain <select> for consumers who
+                                     want OS-native behaviour (full-height menu, native keyboard/scroll)
+                                     instead of the DAutocomplete typeahead. Shares the select filter's
+                                     option list (getFieldFilterOptions) and change handler
+                                     (handleSelectFilterChange) EXACTLY — so it behaves identically to
+                                     filter:"select" in every way but the control. Single-select only:
+                                     `filterMultiple` is ignored here. The model maps "no filter" to the
+                                     FILTER_ALL_VALUE sentinel (see nativeSelectFilterValue) so the "All …"
+                                     option shows selected in a native control. -->
+                                <DFormSelect
+                                    v-else-if="field.filter === 'select-native'"
+                                    :model-value="nativeSelectFilterValue(field)"
+                                    :options="getFieldFilterOptions(field) as unknown as Record<string, unknown>[]"
+                                    size="sm"
+                                    @update:model-value="handleSelectFilterChange(field, $event)"
+                                />
+
+                                <!-- Number Filter -->
+                                <DFormInput
+                                    v-else-if="field.filter === 'number'"
+                                    :model-value="effectiveFilters[filterKeyFor(field)] || ''"
+                                    :placeholder="field.filterPlaceholder || `Filter ${field.label || field.key}...`"
+                                    type="number"
+                                    size="sm"
+                                    @update:model-value="handleFilterChange(filterKeyFor(field), $event as string)"
+                                />
+
+                                <!-- Date Filter -->
+                                <DFormInput
+                                    v-else-if="field.filter === 'date'"
+                                    :model-value="effectiveFilters[filterKeyFor(field)] || ''"
+                                    type="date"
+                                    size="sm"
+                                    @update:model-value="handleFilterChange(filterKeyFor(field), $event as string)"
+                                />
 
-                                    <!-- No filter for this column -->
-                                    <div v-else></div>
-                                </th>
-                            </tr>
+                                <!-- No filter for this column -->
+                                <div v-else></div>
+                            </div>
+                            <slot name="thead-sub" v-bind="{ ...filterScope, field }" />
                         </template>
 
                         <!-- Custom headers for all fields -->
                         <template v-for="field in fields" :key="`head-${field.key}`" #[`head(${field.key})`]="{ label }">
                             <div class="d-flex align-items-center justify-content-between gap-2">
                                 <div class="flex-grow-1">
-                                    <div class="fw-semibold">{{ headerLabel(field, label) }}</div>
+                                    <div class="fw-semibold">
+                                        <DXFieldLabel v-if="field.info" :label="headerLabel(field, label)" :info="field.info" />
+                                        <template v-else>{{ headerLabel(field, label) }}</template>
+                                    </div>
                                     <small v-if="field.hint" class="text-muted d-block" style="font-weight: normal;">{{ field.hint }}</small>
                                 </div>
 
@@ -329,6 +329,7 @@ import DTable from "../base/DTable.vue";
 import DFormInput from "../base/DFormInput.vue";
 import DFormSelect from "../base/DFormSelect.vue";
 import DAutocomplete from "../base/DAutocomplete.vue";
+import DXFieldLabel from "./DXFieldLabel.vue";
 import DButton from "../base/DButton.vue";
 import DXTablePagination from "./DXTablePagination.vue";
 import DXTableEditorModal from "./DXTableEditorModal.vue";
@@ -407,6 +408,8 @@ export interface TableField {
     filterAllText?: string;
     sortable?: boolean;
     hint?: string;
+    /** Help revealed from a focusable info icon beside the column label. */
+    info?: string;
     /**
      * The inline filter control for this column, or `false`/omit for none. See
      * `FilterType`. `'select'` (typeahead) and `'select-native'` (plain
@@ -1318,9 +1321,8 @@ const dottedCellFields = (slots: Record<string, unknown>): TableField[] =>
 /*
  * 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
+ * column widths are taken from the FIRST row of cells, which may be a
+ * consumer banner rather than the column labels. A `<col>` width is
  * authoritative regardless of row order, in both fixed and auto layout.
  */
 const sizeToCss = (value: string | number): string =>
@@ -1771,6 +1773,7 @@ watch(clientSideLastPage, (lastPage) => {
 // Client-side paginated items (final output)
 const clientSidePaginatedItems = computed<T[]>(() => {
     if (!isClientSideMode.value) return [];
+    if (!props.showPagination) return clientSideSortedItems.value;
 
     const perPage = effectivePerPage.value;
     const start = (clientSidePage.value - 1) * perPage;
@@ -1787,19 +1790,19 @@ const clientSidePagination = computed<PaginationData>(() => {
     const lastPage = clientSideLastPage.value;
 
     // Same clamped page the slice uses — see `clientSidePage` (#118).
-    const validPage = clientSidePage.value;
+    const validPage = props.showPagination ? clientSidePage.value : 1;
 
-    const from = total > 0 ? (validPage - 1) * perPage + 1 : 0;
-    const to = Math.min(validPage * perPage, total);
+    const from = total > 0 ? (props.showPagination ? (validPage - 1) * perPage + 1 : 1) : 0;
+    const to = props.showPagination ? Math.min(validPage * perPage, total) : total;
 
     return {
         current_page: validPage,
-        per_page: perPage,
+        per_page: props.showPagination ? perPage : Math.max(1, total),
         total,
         total_unfiltered: totalUnfiltered !== total ? totalUnfiltered : undefined,
         from,
         to,
-        last_page: lastPage,
+        last_page: props.showPagination ? lastPage : 1,
     };
 });
 
@@ -1826,7 +1829,7 @@ const handleClientSidePageChange = (page: number) => {
 // Computed: determine if per-page selector should be shown
 // Hide it when total items is less than the smallest page size option
 const shouldShowPerPageSelector = computed(() => {
-    if (!props.showPerPageSelector) return false;
+    if (!props.showPagination || !props.showPerPageSelector) return false;
 
     const smallestOption = Math.min(...props.perPageOptions);
     const total = isClientSideMode.value
@@ -2262,7 +2265,7 @@ const refresh = () => {
  *
  * - `head(<key>)` — DXTable draws its own column headers (sort indicators,
  *   field hints). Forwarding a consumer's would silently drop those.
- * - `thead-top`   — DXTable renders the inline filter row there.
+ * - `thead-top` / `thead-sub` — composed with the below-header filter cells.
  *
  * `head-end(<key>)` is DXTable's OWN additive header slot (#99) and is likewise
  * not forwarded: the inner table has no such slot, and the prefixes below are
@@ -2312,11 +2315,10 @@ const isTableSlot = (name: string) =>
  * 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).
+ * or `#thead-sub` here would override the composed header/filter slots.
  */
 const forwardableSlotNames = (slots: Record<string, unknown>): string[] =>
-    Object.keys(slots).filter((name) => isTableSlot(name));
+    Object.keys(slots).filter((name) => name !== 'thead-sub' && isTableSlot(name));
 
 const tableSlotSignature = (slots: Record<string, unknown>): string => {
     // DXTable's OWN dotted-cell slots count too (#121). bvn captures its cell

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

@@ -1,6 +1,6 @@
 <!--
   @component
-  Internal pagination + per-page footer for `DXTable`. Renders the pager, the
+  Pagination + per-page footer shared by `DXTable` and standalone tables. Renders the pager, the
   per-page selector, and the "X to Y out of Z items" info line (with the
   "Filtered from N" note when a column filter is active).
 

package/resources/js/index.ts

@@ -9,6 +9,8 @@ export { default as DXDashboard } from "./components/extended/DXDashboard.vue";
 export { default as DXForm } from "./components/extended/DXForm.vue";
 export { default as DXField } from "./components/extended/DXField.vue";
 export { default as DXFieldLabel } from "./components/extended/DXFieldLabel.vue";
+export { default as DXModalActions } from "./components/extended/DXModalActions.vue";
+export { default as DXLoading } from "./components/extended/DXLoading.vue";
 export { default as DXSwitch } from "./components/extended/DXSwitch.vue";
 export { default as DXCurrencyInput } from "./components/extended/DXCurrencyInput.vue";
 export { default as DXStatCard } from "./components/extended/DXStatCard.vue";
@@ -23,6 +25,7 @@ export { default as DXRepeater } from "./components/extended/DXRepeater.vue";
  */
 export { default as DXBasicForm } from "./components/extended/DXBasicForm.vue";
 export { default as DXTable } from "./components/extended/DXTable.vue";
+export { default as DXTablePagination } from "./components/extended/DXTablePagination.vue";
 export { default as DXDashboardSidebar } from "./components/extended/DXDashboardSidebar.vue";
 export { default as DXDashboardNavbar } from "./components/extended/DXDashboardNavbar.vue";
 export { default as DXUserAvatar } from "./components/extended/DXUserAvatar.vue";