@omnitend/dashboard-for-laravel 0.33.1 → 0.35.0

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-07-20T14:11:55.365Z
+> Last updated: 2026-07-21T12:16:47.128Z
 
 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 70 Vue 3 components for building Laravel dashboards with Bootstrap Vue Next.
+> A dual-package library (NPM + Composer) providing 73 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 (60 components)
 
 Lightweight type-safe wrappers around Bootstrap Vue Next components providing API stability and consistent theming.
 
@@ -35,6 +35,8 @@ Lightweight type-safe wrappers around Bootstrap Vue Next components providing AP
 - [DButtonGroup](/components/base/dbuttongroup): Bootstrap Vue Next ButtonGroup wrapper
 - [DButtonToolbar](/components/base/dbuttontoolbar): Bootstrap Vue Next ButtonToolbar wrapper
 - [DCard](/components/base/dcard): Bootstrap Vue Next Card wrapper
+- [DCarousel](/components/base/dcarousel): Bootstrap Vue Next Carousel wrapper
+- [DCarouselSlide](/components/base/dcarouselslide): Bootstrap Vue Next CarouselSlide wrapper
 - [DCol](/components/base/dcol): Bootstrap Vue Next Col wrapper
 - [DCollapse](/components/base/dcollapse): Bootstrap Vue Next Collapse wrapper
 - [DContainer](/components/base/dcontainer): Bootstrap Vue Next Container wrapper
@@ -75,6 +77,7 @@ 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.33.1",
+  "version": "0.35.0",
   "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

@@ -313,6 +313,32 @@ $bootstrap-icons-font-src: url("bootstrap-icons/font/fonts/bootstrap-icons.woff2
   flex-wrap: nowrap;
 }
 
+// ----------------------------------------------------------------------------
+// Nav tabs
+// ----------------------------------------------------------------------------
+// Chrome recedes, content leads — the same ethos as the muted table headers
+// (#157). Bootstrap gives an INACTIVE tab `--bs-nav-link-color:
+// var(--bs-link-color)`, i.e. the saturated link-blue, so a row of tabs above a
+// form reads as a row of links competing with the fields below. Mute the
+// inactive tabs and let the ACTIVE one (Bootstrap's
+// `--bs-nav-tabs-link-active-color`, the near-black emphasis colour) carry the
+// selection on its own.
+//
+// Driven through Bootstrap's own `--bs-nav-*` variables rather than a raw
+// `color:` — so a consumer can re-louden one tab set by resetting the same
+// variable, `[data-bs-theme="dark"]` remaps the tokens for free, and Bootstrap
+// keeps ownership of the `.active`/`.disabled` resolution order.
+//
+// `--bs-secondary-color` is `rgba(var(--bs-body-color-rgb), .75)` → ~#585b5e on
+// white: 6.83:1, comfortably AA (AAA for body text); 6.53:1 on the theme's
+// `$light` #f8fafc panel. Hover goes to the full body colour (#212529, 16.1:1)
+// so hovering reads as "heading toward selected" rather than "turning into a
+// link".
+.nav-tabs {
+  --bs-nav-link-color: var(--bs-secondary-color);
+  --bs-nav-link-hover-color: var(--bs-body-color);
+}
+
 // ----------------------------------------------------------------------------
 // Dashboard Custom Styles
 // ----------------------------------------------------------------------------
@@ -433,6 +459,40 @@ $bootstrap-icons-font-src: url("bootstrap-icons/font/fonts/bootstrap-icons.woff2
     color: $secondary; // muted message text
   }
 
+  // HEADER-LESS toast (`body` but no `title` — the shape every toast created
+  // through `useToast().create({ body })` takes). BVN renders it as
+  //   .toast > .d-flex > (.toast-body + .btn-close)
+  // and BVN's own `.toast .btn-close-custom { margin: <pad> <pad> auto }` pins
+  // the close X to the TOP of that row, while the `.toast-body` above still
+  // carries the reduced `padding-top` that only makes sense when it sits under
+  // a `.toast-header`. Result: the message rides high, the X sits lower, and a
+  // one-line toast reads as misaligned.
+  //
+  // With no header there is nothing above the body, so restore symmetric
+  // padding (Bootstrap's `.toast-body` is `padding: var(--bs-toast-padding-x)`
+  // all round) and centre the row. The `margin-bottom: auto` has to go too —
+  // an auto margin outranks `align-items` in flex alignment, so centring alone
+  // would leave the X pinned; `margin-block: 0` hands alignment back to the
+  // container while keeping BVN's horizontal margin.
+  //
+  // `:has()` is the structural test — it is the only way to key off "this toast
+  // has no header" from CSS, and it is supported in every evergreen browser
+  // (Chrome/Edge 105+, Safari 15.4+, Firefox 121+). A browser without it simply
+  // keeps today's slightly-off alignment; nothing breaks.
+  &:not(:has(.toast-header)) {
+    > .d-flex {
+      align-items: center;
+    }
+
+    .toast-body {
+      padding-top: var(--bs-toast-padding-x);
+    }
+
+    .btn-close-custom {
+      margin-block: 0;
+    }
+  }
+
   // Hide the auto-dismiss countdown bar — the ticking animation reads as
   // stressful/urgent, which is wrong for a passive notification. Auto-dismiss
   // still works; only its visual indicator is removed.
@@ -530,7 +590,18 @@ $bootstrap-icons-font-src: url("bootstrap-icons/font/fonts/bootstrap-icons.woff2
   // (which sets its colours `!important` by design). `.toast` is excluded: it
   // has its own soft handling (a fainter 50%-white mix via `--bs-toast-bg` for
   // its large surface) and themed toasts don't carry `.text-bg-*` anyway.
-  .text-bg-#{$name}:not(.toast) {
+  //
+  // The exclusion is wrapped in `:where()` DELIBERATELY: `:where()` always
+  // contributes ZERO specificity, so this stays a single-class 0,1,0 selector
+  // while matching exactly what a bare `:not(.toast)` would. Written bare it is
+  // 0,2,0 — and because the declarations are `!important`, a consumer painting
+  // a fully custom badge (`.my-status-badge { background: …; }`) could not win
+  // with a single-class `!important` rule and had to escalate to a
+  // repeated-class hack. One class in, one class out: a consumer's own
+  // `!important` single-class rule now overrides us on source order, as it
+  // should. (Everything Bootstrap defines for `.text-bg-*` is also 0,1,0
+  // `!important` and is imported ABOVE this block, so we still win it.)
+  .text-bg-#{$name}:where(:not(.toast)) {
     background-color: #{$soft-bg} !important;
     color: #{$soft-text} !important;
   }
@@ -551,7 +622,14 @@ $bootstrap-icons-font-src: url("bootstrap-icons/font/fonts/bootstrap-icons.woff2
   // (danger/info's solid IS their emphasis). The variant-less default bar
   // stays `$progress-bar-bg` (brand navy). `!important` beats the `.bg-*`
   // utility, which sets its colour `!important` by design.
-  .progress-bar.bg-#{$name} {
+  //
+  // `.progress-bar` is only here to SCOPE the rule (large fills, not every
+  // `.bg-*` element), so it goes in `:where()` — zero specificity, same
+  // matching, and the selector stays 0,1,0 like Bootstrap's own `.bg-*`. Same
+  // reasoning as the `.text-bg-*` rule above: at 0,2,0 `!important` a consumer
+  // recolouring one bar had to out-specify us instead of just writing
+  // `.my-bar { background-color: … !important }`.
+  :where(.progress-bar).bg-#{$name} {
     background-color: #{$solid-bg} !important;
     color: #{$solid-text};
   }

package/resources/js/components/charts/DXBarChart.vue

@@ -14,57 +14,18 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
 import { Bar } from "vue-chartjs";
-import {
-  registerCharts,
-  baseOptions,
-  applyPalette,
-  mergeOptions,
-  type ChartValueFormat,
-} from "./chartTheme";
+import { registerCharts } from "./chartTheme";
+import { useThemedChart, type ThemedChartProps } from "./useThemedChart";
 
 registerCharts();
 
-interface Props {
-  /** X-axis category labels. */
-  labels: string[];
-  /** Chart.js datasets. Colours are themed when a dataset omits them. */
-  datasets: any[];
-  /** Chart.js options; deep-merged over the themed defaults. */
-  options?: Record<string, any>;
-  /** Format value-axis ticks and tooltips. */
-  valueFormat?: ChartValueFormat;
-  /** Currency symbol for valueFormat: "currency" (default "£"). */
-  currencySymbol?: string;
-  /** Locale for number formatting. */
-  locale?: string;
-  /** Show the legend (default: only when there is more than one dataset). */
-  showLegend?: boolean;
-}
-
 // `showLegend` defaults to `undefined` (not Vue's Boolean-cast `false`) so the
 // `?? datasets.length > 1` default can actually fire when it isn't passed.
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<ThemedChartProps<"bar">>(), {
   currencySymbol: "£",
   showLegend: undefined,
 });
 
-const chartData = computed(() => ({
-  labels: props.labels,
-  datasets: applyPalette(props.datasets, "bar", props.labels.length),
-}));
-
-const mergedOptions = computed(() =>
-  mergeOptions(
-    baseOptions({
-      valueFormat: props.valueFormat,
-      currencySymbol: props.currencySymbol,
-      locale: props.locale,
-      showLegend: props.showLegend ?? props.datasets.length > 1,
-      hasValueAxis: true,
-    }),
-    props.options ?? {},
-  ),
-);
+const { chartData, mergedOptions } = useThemedChart("bar", props);
 </script>

package/resources/js/components/charts/DXLineChart.vue

@@ -14,57 +14,18 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
 import { Line } from "vue-chartjs";
-import {
-  registerCharts,
-  baseOptions,
-  applyPalette,
-  mergeOptions,
-  type ChartValueFormat,
-} from "./chartTheme";
+import { registerCharts } from "./chartTheme";
+import { useThemedChart, type ThemedChartProps } from "./useThemedChart";
 
 registerCharts();
 
-interface Props {
-  /** X-axis category labels. */
-  labels: string[];
-  /** Chart.js datasets. Colours are themed when a dataset omits them. */
-  datasets: any[];
-  /** Chart.js options; deep-merged over the themed defaults. */
-  options?: Record<string, any>;
-  /** Format value-axis ticks and tooltips. */
-  valueFormat?: ChartValueFormat;
-  /** Currency symbol for valueFormat: "currency" (default "£"). */
-  currencySymbol?: string;
-  /** Locale for number formatting. */
-  locale?: string;
-  /** Show the legend (default: only when there is more than one dataset). */
-  showLegend?: boolean;
-}
-
 // `showLegend` defaults to `undefined` (not Vue's Boolean-cast `false`) so the
 // `?? datasets.length > 1` default can actually fire when it isn't passed.
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<ThemedChartProps<"line">>(), {
   currencySymbol: "£",
   showLegend: undefined,
 });
 
-const chartData = computed(() => ({
-  labels: props.labels,
-  datasets: applyPalette(props.datasets, "line", props.labels.length),
-}));
-
-const mergedOptions = computed(() =>
-  mergeOptions(
-    baseOptions({
-      valueFormat: props.valueFormat,
-      currencySymbol: props.currencySymbol,
-      locale: props.locale,
-      showLegend: props.showLegend ?? props.datasets.length > 1,
-      hasValueAxis: true,
-    }),
-    props.options ?? {},
-  ),
-);
+const { chartData, mergedOptions } = useThemedChart("line", props);
 </script>

package/resources/js/components/charts/useThemedChart.ts

@@ -0,0 +1,69 @@
+import { computed, type ComputedRef } from "vue";
+import type { ChartData, ChartDataset, ChartOptions } from "chart.js";
+import {
+    baseOptions,
+    applyPalette,
+    mergeOptions,
+    type ChartValueFormat,
+} from "./chartTheme";
+
+/**
+ * Shared props for the value-axis chart wrappers (`DXBarChart`, `DXLineChart`).
+ * `DXBarChart` and `DXLineChart` differ ONLY in the chart.js component they
+ * render and the palette kind — everything else (theming, option-merge,
+ * legend-default) is identical, and lived duplicated in both SFCs (#135).
+ */
+export interface ThemedChartProps<TType extends "bar" | "line"> {
+    /** X-axis category labels. */
+    labels: string[];
+    /** Chart.js datasets. Colours are themed when a dataset omits them. */
+    datasets: ChartDataset<TType>[];
+    /** Chart.js options; deep-merged over the themed defaults. */
+    options?: ChartOptions<TType>;
+    /** Format value-axis ticks and tooltips. */
+    valueFormat?: ChartValueFormat;
+    /** Currency symbol for valueFormat: "currency" (default "£"). */
+    currencySymbol?: string;
+    /** Locale for number formatting. */
+    locale?: string;
+    /** Show the legend (default: only when there is more than one dataset). */
+    showLegend?: boolean;
+}
+
+/**
+ * The themed-chart body shared by `DXBarChart` and `DXLineChart`: applies the
+ * data-viz palette to un-coloured datasets and deep-merges the consumer's
+ * `options` over the dashboard-friendly defaults. Pass the reactive `props`
+ * object (property access stays reactive inside the computeds).
+ */
+export function useThemedChart<TType extends "bar" | "line">(
+    type: TType,
+    props: ThemedChartProps<TType>,
+): {
+    chartData: ComputedRef<ChartData<TType>>;
+    mergedOptions: ComputedRef<ChartOptions<TType>>;
+} {
+    const chartData = computed(
+        () =>
+            ({
+                labels: props.labels,
+                datasets: applyPalette(props.datasets, type, props.labels.length),
+            }) as ChartData<TType>,
+    );
+
+    const mergedOptions = computed(
+        () =>
+            mergeOptions(
+                baseOptions({
+                    valueFormat: props.valueFormat,
+                    currencySymbol: props.currencySymbol,
+                    locale: props.locale,
+                    showLegend: props.showLegend ?? props.datasets.length > 1,
+                    hasValueAxis: true,
+                }),
+                props.options ?? {},
+            ) as ChartOptions<TType>,
+    );
+
+    return { chartData, mergedOptions };
+}

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

@@ -0,0 +1,114 @@
+<!--
+  @component (internal — not exported)
+  The choice control family for DXField: `select` (plain or `searchable`),
+  `radio`, and `checkbox-group`. Extracted from DXField (#135) unchanged. These
+  share the "no native readonly" convention (read-only is expressed as
+  `disabled`, hence the pre-merged `disabled` + `controlProps`). The parent
+  DXField still owns the value/options/guards and the `setValue` coercion; this
+  component only renders the control and emits the edited value up.
+
+  Plain-text `autocomplete` (a text input + datalist) stays in DXField itself,
+  with the text-family controls, because it uses the native-readonly guard path
+  rather than this disabled-only convention.
+-->
+<template>
+    <!-- Searchable select: type to filter a long option list, while the model
+         keeps the option's VALUE (an id), not the typed text. -->
+    <template v-if="field.type === 'select' && field.searchable">
+        <DAutocomplete
+            v-if="optionsReady"
+            :model-value="modelValue"
+            :options="options"
+            :placeholder="field.placeholder"
+            :required="field.required"
+            :state="state"
+            :disabled="disabled"
+            open-on-focus
+            v-bind="controlProps"
+            @update:model-value="emit('update:modelValue', $event)"
+        />
+        <!-- BAutocomplete resolves the input's display text from the model AT
+             MOUNT and doesn't re-derive it when `options` arrive later, so an
+             async list would leave the raw id showing ("51" instead of
+             "Waitrose") — and a long list is exactly the case that loads async.
+             Hold the control until the options are in. -->
+        <DFormInput v-else placeholder="Loading…" disabled />
+    </template>
+
+    <!-- Select (sync or async options) -->
+    <DFormSelect
+        v-else-if="field.type === 'select'"
+        :model-value="modelValue"
+        :required="field.required"
+        :options="options"
+        :state="state"
+        :disabled="disabled"
+        v-bind="controlProps"
+        @update:model-value="emit('update:modelValue', $event)"
+    />
+
+    <!-- Radio group -->
+    <DFormRadioGroup
+        v-else-if="field.type === 'radio'"
+        :model-value="modelValue"
+        :options="options"
+        :required="field.required"
+        :state="state"
+        :disabled="disabled"
+        v-bind="controlProps"
+        @update:model-value="emit('update:modelValue', $event)"
+    />
+
+    <!-- Checkbox group: "pick any of N" — the model is an ARRAY of the checked
+         option values (default the field to []). -->
+    <DFormCheckboxGroup
+        v-else
+        :model-value="modelValue"
+        :options="options"
+        :state="state"
+        :disabled="disabled"
+        v-bind="controlProps"
+        @update:model-value="emit('update:modelValue', $event)"
+    />
+</template>
+
+<script setup lang="ts">
+import DFormSelect from "../base/DFormSelect.vue";
+import DFormRadioGroup from "../base/DFormRadioGroup.vue";
+import DFormCheckboxGroup from "../base/DFormCheckboxGroup.vue";
+import DFormInput from "../base/DFormInput.vue";
+import DAutocomplete from "../base/DAutocomplete.vue";
+import type { FieldDefinition, FieldOption } from "../../types";
+
+interface Props {
+    /** Field definition (type select/radio/checkbox-group + `searchable`). */
+    field: FieldDefinition;
+
+    /** Current model value. */
+    modelValue: any;
+
+    /** Resolved options (async-loaded or static). */
+    options?: FieldOption[];
+
+    /** Validation state passed to the control. */
+    state?: boolean | null;
+
+    /** Pre-merged disabled state (`isDisabled || isReadonly || isPlaintext`). */
+    disabled?: boolean;
+
+    /** Escape-hatch control props, already guard-merged by DXField. */
+    controlProps?: Record<string, any>;
+
+    /**
+     * Whether async options have resolved (a searchable select must not render
+     * before its options load, or it shows the raw id instead of the label).
+     */
+    optionsReady?: boolean;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+    (event: "update:modelValue", value: any): void;
+}>();
+</script>

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

@@ -426,7 +426,7 @@ watch(activeGroupIndex, () => {
   overflow-x: hidden;
 }
 
-/* Dense rhythm (#95): greendragon's cutover values, adopted as the default —
+/* Dense rhythm (#95): values proven in a production dashboard, adopted as the default —
    natural-case headers at 0.875rem (no uppercase/letter-spacing), tight group
    spacing. */
 .nav-group {