@omnitend/dashboard-for-laravel 0.41.1 → 0.41.2

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-09-27T10:14:02.393Z",
+  "generated": "2026-09-30T05:13:05.340Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.41.1"
+    "version": "0.41.2"
   },
   "components": {
     "base": [
@@ -911,6 +911,16 @@
         "props": [],
         "events": [],
         "slots": [
+          {
+            "name": "default",
+            "description": "",
+            "bindings": []
+          },
+          {
+            "name": "actions",
+            "description": "",
+            "bindings": []
+          },
           {
             "name": "name",
             "description": "",
@@ -2737,6 +2747,47 @@
         "slots": [],
         "methods": []
       },
+      {
+        "name": "DXLoading",
+        "category": "extended",
+        "filePath": "resources/js/components/extended/DXLoading.vue",
+        "description": "",
+        "props": [
+          {
+            "name": "text",
+            "type": "string",
+            "required": false,
+            "default": "\"Loading…\"",
+            "description": ""
+          },
+          {
+            "name": "delay",
+            "type": "number",
+            "required": false,
+            "default": "300",
+            "description": ""
+          }
+        ],
+        "events": [],
+        "slots": [],
+        "methods": []
+      },
+      {
+        "name": "DXModalActions",
+        "category": "extended",
+        "filePath": "resources/js/components/extended/DXModalActions.vue",
+        "description": "Shared secondary modal actions; distinct from the modal footer controls.",
+        "props": [],
+        "events": [],
+        "slots": [
+          {
+            "name": "default",
+            "description": "",
+            "bindings": []
+          }
+        ],
+        "methods": []
+      },
       {
         "name": "DXNumericField",
         "category": "extended",
@@ -3079,7 +3130,7 @@
         "name": "DXSwitch",
         "category": "extended",
         "filePath": "resources/js/components/extended/DXSwitch.vue",
-        "description": "DXSwitch — a \"filled box\" toggle switch. An opinionated switch built on `DFormCheckbox` (`switch`): a bordered box sized like a `.form-control` with the label on the left and the toggle on the right, colour-coding its state. By default (`onVariant=\"success\"`) it reads the house green-on / red-off style: a light-red box with a grey toggle when off, a soft-green box with a muted green-grey toggle when on. `onVariant=\"neutral\"` (brand primary on / grey off) is for semantically-mixed switches that shouldn't imply good/bad (#158). Used standalone or, internally, by `DXField`'s `switch` field type so a form switch and a lone switch share one look. Usage: ```vue <DXSwitch v-model=\"isCurrent\" label=\"Product is current\" /> ``` For a form field, prefer a `DXField`/`DXForm` `type: 'switch'`; reach for `DXSwitch` directly when you want the styled toggle outside a form. Pass a `label` prop for simple text, or the default slot for richer label content.",
+        "description": "DXSwitch — a \"filled box\" toggle switch. An opinionated switch built on `DFormCheckbox` (`switch`): a bordered box sized like a `.form-control` with the label on the left and the toggle on the right, colour-coding its state. By default (`onVariant=\"success\"`) it reads the house green-on / red-off style: a light-red box with a muted red-grey toggle when off, a soft-green box with a muted green-grey toggle when on. `onVariant=\"neutral\"` (brand primary on / grey off) is for semantically-mixed switches that shouldn't imply good/bad (#158). Used standalone or, internally, by `DXField`'s `switch` field type so a form switch and a lone switch share one look. Usage: ```vue <DXSwitch v-model=\"isCurrent\" label=\"Product is current\" /> ``` For a form field, prefer a `DXField`/`DXForm` `type: 'switch'`; reach for `DXSwitch` directly when you want the styled toggle outside a form. Pass a `label` prop for simple text, or the default slot for richer label content.",
         "props": [
           {
             "name": "modelValue",
@@ -3117,7 +3168,7 @@
             "name": "size",
             "type": "\"sm\"",
             "required": false,
-            "description": "`\"sm\"` renders a compact box (a few px shorter than the default, which\nmatches the input height) for dense rows that repeat the switch per item (a\nper-line visibility toggle in a modal). Omit for the standard size, which\nlines the switch up with the `.form-control`\nheight so a switch lines up with inputs beside it."
+            "description": "`\"sm\"` renders a compact rounded pill (a few px shorter than the default, which\nmatches the input height) for dense rows that repeat the switch per item (a\nper-line visibility toggle in a modal). Omit for the standard size, which\nlines the switch up with the `.form-control`\nheight so a switch lines up with inputs beside it."
           }
         ],
         "events": [
@@ -4000,7 +4051,7 @@
         "name": "DXTablePagination",
         "category": "extended",
         "filePath": "resources/js/components/extended/DXTablePagination.vue",
-        "description": "Internal pagination + per-page footer for `DXTable`. 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). Extracted because `DXTable` used to carry three byte-identical copies of this footer — one per data mode (client-side / inertia / provider) — that differed only in which `PaginationData` object and page-change handler they used, so every footer fix had to be written three times (#123). `DXTable` now derives the active pagination + handler and renders this once. It owns its own `:deep(.pagination …)` styling (rather than leaving it in `DXTable`), because a scoped `:deep()` in `DXTable` would not reach the pager once it lives in a child component — the scope-id doesn't cross the boundary. Anchoring the rules on this component's own `.dx-table-pagination` root (a plain element it owns) gives the scope-id a deterministic host. In a row too narrow for the full windowed pager, the number strip collapses to a \"current / last\" status with Previous/Next either side (#162). The decision is CONTAINER-driven, not viewport-driven — see `compactThreshold`.",
+        "description": "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). Extracted because `DXTable` used to carry three byte-identical copies of this footer — one per data mode (client-side / inertia / provider) — that differed only in which `PaginationData` object and page-change handler they used, so every footer fix had to be written three times (#123). `DXTable` now derives the active pagination + handler and renders this once. It owns its own `:deep(.pagination …)` styling (rather than leaving it in `DXTable`), because a scoped `:deep()` in `DXTable` would not reach the pager once it lives in a child component — the scope-id doesn't cross the boundary. Anchoring the rules on this component's own `.dx-table-pagination` root (a plain element it owns) gives the scope-id a deterministic host. In a row too narrow for the full windowed pager, the number strip collapses to a \"current / last\" status with Previous/Next either side (#162). The decision is CONTAINER-driven, not viewport-driven — see `compactThreshold`.",
         "props": [
           {
             "name": "pagination",
@@ -4163,8 +4214,8 @@
     ]
   },
   "stats": {
-    "totalComponents": 84,
+    "totalComponents": 86,
     "baseComponents": 60,
-    "extendedComponents": 24
+    "extendedComponents": 26
   }
 }

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-09-27T10:14:02.445Z
+> Last updated: 2026-09-30T05:13:05.394Z
 
 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 73 Vue 3 components for building Laravel dashboards with Bootstrap Vue Next.
+> A dual-package library (NPM + Composer) providing 76 Vue 3 components for building Laravel dashboards with Bootstrap Vue Next.
 
 ## Installation
 
@@ -84,7 +84,7 @@ Lightweight type-safe wrappers around Bootstrap Vue Next components providing AP
 - [DToaster](/components/base/dtoaster): Bootstrap Vue Next Toaster wrapper
 - [DTooltip](/components/base/dtooltip): Bootstrap Vue Next Tooltip wrapper
 
-## Extended Components (13 components)
+## Extended Components (16 components)
 
 Custom dashboard components with advanced functionality beyond Bootstrap Vue Next.
 
@@ -96,10 +96,13 @@ Custom dashboard components with advanced functionality beyond Bootstrap Vue Nex
 - [DXField](/components/extended/dxfield): Single-field renderer for any field type with value/span/info/hint slots
 - [DXFieldLabel](/components/extended/dxfieldlabel): Extended dashboard component
 - [DXForm](/components/extended/dxform): Form renderer driven by field definitions, with optional tabs, conditional fields, per-field slots, async options, nested repeaters, and auto error-tab switching
+- [DXLoading](/components/extended/dxloading): Extended dashboard component
+- [DXModalActions](/components/extended/dxmodalactions): Extended dashboard component
 - [DXRepeater](/components/extended/dxrepeater): Repeatable nested sub-form (field array) primitive
 - [DXStatCard](/components/extended/dxstatcard): Extended dashboard component
 - [DXSwitch](/components/extended/dxswitch): Extended dashboard component
 - [DXTable](/components/extended/dxtable): Data table with pagination, filtering, and sorting
+- [DXTablePagination](/components/extended/dxtablepagination): Extended dashboard component
 - [DXUserAvatar](/components/extended/dxuseravatar): Extended dashboard component
 
 ## Composables

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnitend/dashboard-for-laravel",
-  "version": "0.41.1",
+  "version": "0.41.2",
   "description": "Vue 3 dashboard components for Laravel with Bootstrap Vue Next",
   "type": "module",
   "main": "./dist/dashboard-for-laravel.umd.cjs",

package/resources/css/theme.scss

@@ -694,6 +694,11 @@ $bootstrap-icons-font-src: url("bootstrap-icons/font/fonts/bootstrap-icons.woff2
   vertical-align: middle;
 }
 
+// Column help uses the table's header colour rather than the form-label ink.
+.table > thead th .dx-field-label__text {
+  color: inherit;
+}
+
 .table > thead {
   vertical-align: middle;
 }
@@ -750,7 +755,7 @@ $bootstrap-icons-font-src: url("bootstrap-icons/font/fonts/bootstrap-icons.woff2
 // theme `@import`s `bootstrap-icons/font/bootstrap-icons` (declaring the
 // `@font-face`), and #77's post-build extraction ships that woff2 with the
 // stylesheet — so this needs no new dependency and no data-URI. Values signed
-// off after one padding iteration in the greendragon interim; the glyph metrics
+// off after one padding iteration in the interim UI; the glyph metrics
 // are tunable via the variables below.
 $dx-dropdown-caret-size: 0.75em; // glyph size relative to the label
 $dx-dropdown-caret-gap: 0.4em; // space between label and chevron
@@ -806,23 +811,16 @@ $dx-switch-on-soft: map.get(map.get($dx-variants, "success"), "soft-bg"); // #cd
   --dx-switch-off-well: #{color.mix($dx-switch-off, #fff, 10%)};
   --dx-switch-off-line: #{color.mix($dx-switch-off, #fff, 45%)};
   --dx-switch-off-ink: #{color.mix($dx-switch-off, #000, 30%)};
-  --dx-switch-pill: var(--bs-gray-400, #ced4da); // neutral OFF pill
+  --dx-switch-pill: var(--bs-gray-400, #ced4da);
+  --dx-switch-off-pill: #{color.mix(map.get(map.get($dx-variants, "danger"), "soft-text"), $gray-400, 50%)};
   --dx-switch-on-pill: #{color.mix(map.get(map.get($dx-variants, "success"), "soft-text"), $gray-400, 50%)};
 }
 
-// Optically centre the check/radio/switch box against its label's FIRST line.
-// Bootstrap's `.25em` top margin is mathematically right for a 1em box in a
-// 1.5em line box, but Poppins seats its glyphs low in the line box, so the box
-// reads visibly HIGH beside the text (same optical-metrics issue as the B14
-// dropdown caret). `0.325em` lands the box centre on Poppins' visual centre —
-// judged against a rendered filmstrip (0.25/0.30/0.325/0.35em) with Poppins
-// loaded, not from the maths. A top MARGIN (not flex-centring) is deliberate:
-// it aligns to the first line, so a multi-line label keeps the box on line one
-// rather than floating to the block's vertical centre. DXSwitch is unaffected —
-// it flex-centres and zeroes this margin on its inner input at higher
-// specificity (`.dx-switch :deep(.form-check-input) { margin: 0 }`).
+// Centre checkboxes/radios on the first label line using their actual size.
+// The old em offset assumed a 1em box; these controls are now 1.25rem tall.
+// A margin keeps wrapped labels aligned to line one rather than the whole block.
 .form-check-input {
-  margin-top: 0.325em;
+  margin-top: calc((1lh - #{$form-check-input-width}) / 2);
 }
 
 .form-switch .form-check-input {

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

@@ -1,11 +1,22 @@
 <template>
-  <BModal v-bind="$attrs">
-    <template v-for="(_, name) in $slots" #[name]="slotProps">
+  <BModal size="lg" v-bind="$attrs">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+      <DXModalActions v-if="$slots.actions" class="mt-3">
+        <slot name="actions" v-bind="slotProps" />
+      </DXModalActions>
+    </template>
+    <template v-for="name in forwardedSlots" #[name]="slotProps">
       <slot :name="name" v-bind="slotProps" />
     </template>
   </BModal>
 </template>
 
 <script setup lang="ts">
+import { computed, useSlots } from "vue";
 import { BModal } from "bootstrap-vue-next";
+import DXModalActions from "../extended/DXModalActions.vue";
+
+const slots = useSlots();
+const forwardedSlots = computed(() => Object.keys(slots).filter(name => name !== "default" && name !== "actions"));
 </script>

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

@@ -0,0 +1,47 @@
+<template>
+  <div
+    v-if="isVisible"
+    class="dx-loading text-center text-muted py-5"
+    role="status"
+    aria-live="polite"
+  >
+    <DSpinner variant="primary" aria-hidden="true" />
+    <div class="mt-2">{{ text }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from "vue";
+import DSpinner from "../base/DSpinner.vue";
+
+const props = withDefaults(
+  defineProps<{
+    text?: string;
+    delay?: number;
+  }>(),
+  {
+    text: "Loading…",
+    delay: 300,
+  },
+);
+
+const isVisible = ref(false);
+let showTimer: ReturnType<typeof setTimeout> | undefined;
+
+onMounted(() => {
+  if (props.delay <= 0) {
+    isVisible.value = true;
+    return;
+  }
+
+  showTimer = setTimeout(() => {
+    isVisible.value = true;
+  }, props.delay);
+});
+
+onBeforeUnmount(() => {
+  if (showTimer !== undefined) {
+    clearTimeout(showTimer);
+  }
+});
+</script>

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

@@ -0,0 +1,13 @@
+<!-- Shared secondary modal actions; distinct from the modal footer controls. -->
+<template>
+  <div class="dx-modal-actions"><slot /></div>
+</template>
+
+<style scoped>
+.dx-modal-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.75rem;
+}
+</style>

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

@@ -5,7 +5,7 @@
   An opinionated switch built on `DFormCheckbox` (`switch`): a bordered box sized
   like a `.form-control` with the label on the left and the toggle on the right,
   colour-coding its state. By default (`onVariant="success"`) it reads the house
-  green-on / red-off style: a light-red box with a grey toggle when off, a
+  green-on / red-off style: a light-red box with a muted red-grey toggle when off, a
   soft-green box with a muted green-grey toggle when on. `onVariant="neutral"` (brand primary on / grey off)
   is for semantically-mixed switches that shouldn't imply good/bad (#158). Used
   standalone or, internally, by `DXField`'s `switch` field type so a form switch
@@ -64,7 +64,7 @@ interface Props {
    */
   onVariant?: "success" | "neutral";
   /**
-   * `"sm"` renders a compact box (a few px shorter than the default, which
+   * `"sm"` renders a compact rounded pill (a few px shorter than the default, which
    * matches the input height) for dense rows that repeat the switch per item (a
    * per-line visibility toggle in a modal). Omit for the standard size, which
    * lines the switch up with the `.form-control`
@@ -147,6 +147,7 @@ defineOptions({
    chrome tightens. */
 .dx-switch--sm :deep(.form-check) {
   font-size: 0.875rem;
+  border-radius: var(--bs-border-radius-pill, 50rem);
   min-height: auto;
   padding: 0.25rem 0.625rem;
 }
@@ -173,6 +174,10 @@ defineOptions({
    glance (the house style). `success` (default) is green ON / light-red OFF;
    `neutral` keeps a brand primary panel for mixed-semantics switches. Pair with
    `textWhenTrue`/`textWhenFalse` so the LABEL also names each state. */
+.dx-switch--success {
+  --dx-switch-pill: var(--dx-switch-off-pill);
+}
+
 .dx-switch--success :deep(.form-check) {
   background-color: var(--dx-switch-off-bg);
   border-color: var(--dx-switch-off-line);
@@ -189,14 +194,13 @@ defineOptions({
 
 .dx-switch--success.dx-switch--on :deep(.form-check-label) {
   color: var(--dx-switch-on-ink);
-  font-weight: 500;
 }
 
 .dx-switch--success.dx-switch--on {
   --dx-switch-pill: var(--dx-switch-on-pill);
 }
 
-/* Muted pill with a white sliding thumb: green-grey ON, neutral grey OFF.
+/* Muted pill with a white sliding thumb: green-grey ON, red-grey OFF.
    The stronger box colour and position continue to communicate the state. Explicit `:checked`/`:focus` selectors so they out-specify the global
    `.form-switch .form-check-input:checked` rule. */
 .dx-switch--success :deep(.form-check-input),
@@ -220,6 +224,5 @@ defineOptions({
 
 .dx-switch--neutral.dx-switch--on :deep(.form-check-label) {
   color: var(--bs-primary-text-emphasis);
-  font-weight: 500;
 }
 </style>

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

@@ -174,7 +174,10 @@
                         <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>
 
@@ -326,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";
@@ -404,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
@@ -1767,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;
@@ -1783,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,
     };
 });
 
@@ -1822,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

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