@omnitend/dashboard-for-laravel 0.16.3 → 0.17.0

package/dist/types/index.d.ts

@@ -34,6 +34,25 @@ export interface FieldOption extends Record<string, unknown> {
  * again on model change when `reloadOptionsOnChange` is set.
  */
 export type OptionsLoader = (model: any) => Promise<FieldOption[]>;
+/**
+ * Label column width for horizontal layout, mirroring Bootstrap Vue Next's
+ * `BFormGroup` `labelCols`/`labelCols*` props: either a single width applied
+ * at all breakpoints, or a per-breakpoint object (omitted breakpoints fall
+ * back to BFormGroup's own defaults, which is how "collapse to vertical
+ * below a breakpoint" comes for free — e.g. `{ md: 3 }` stacks below `md`).
+ *
+ * Deliberately excludes `boolean` (which BFormGroup's own `labelCols` prop
+ * accepts): Vue's type-based `defineProps` auto-defaults an omitted prop to
+ * `false` (not `undefined`) whenever its declared type includes `boolean`,
+ * which would silently break the `field.labelCols ?? formLabelCols ?? 3`
+ * fallback chain used to resolve this value.
+ */
+export type LabelCols = number | {
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+};
 /**
  * Field definition shared by every form renderer.
  *
@@ -123,9 +142,21 @@ export interface FieldDefinition {
     inputProps?: Record<string, any>;
     /**
      * Render the field full-width with no label wrapper, delegating its
-     * content to the `#span(<key>)` slot. Useful for custom blocks.
+     * content to the `#span(<key>)` slot. Useful for custom blocks. Also
+     * doubles as the "fill both columns" escape hatch in horizontal layout —
+     * a span field always bypasses the label/content column split.
      */
     span?: boolean;
+    /**
+     * Per-field override of DXForm's `layout` prop ("vertical" | "horizontal").
+     * Falls back to the form-level `layout` when omitted.
+     */
+    layout?: "vertical" | "horizontal";
+    /**
+     * Per-field override of DXForm's `labelCols` prop, for horizontal
+     * layout. Falls back to the form-level `labelCols` when omitted.
+     */
+    labelCols?: LabelCols;
     /**
      * Component rendered for `type: "component"` fields. Receives
      * `modelValue`, `field`, `model` props and emits `update:modelValue`.
@@ -144,6 +175,24 @@ export interface FieldDefinition {
     /** Minimum / maximum number of repeater rows. */
     minItems?: number;
     maxItems?: number;
+    /**
+     * For `repeater` fields: `"cards"` (default) stacks each row as its own
+     * card with sub-fields listed vertically — best for rows with several
+     * or complex sub-fields. `"table"` renders one row per item with
+     * sub-fields as columns — far more compact for simple child-row lists
+     * (e.g. 2-3 short sub-fields). Named `repeaterLayout` (not `layout`) to
+     * avoid colliding with the unrelated form-level `layout` prop
+     * ("vertical" | "horizontal") every field type accepts.
+     */
+    repeaterLayout?: "cards" | "table";
+    /**
+     * For `repeater` fields in `cards` layout: show each row's 1-based
+     * position (e.g. "1", "2") next to its Remove button. Off by default —
+     * only meaningful once a consumer explicitly wants it (e.g. rows the
+     * user thinks of as numbered/ordered); most repeaters don't need it.
+     * Not applicable to `table` layout, which has no equivalent column.
+     */
+    showRowIndex?: boolean;
     /**
      * For `repeater` fields backed by an upsert-children API contract (rows
      * carrying a persisted `id` are only deleted server-side when submitted

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-07-06T19:02:59.128Z",
+  "generated": "2026-07-06T20:01:04.234Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.16.2"
+    "version": "0.16.3"
   },
   "components": {
     "base": [

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-07-06T19:02:59.193Z
+> Last updated: 2026-07-06T20:01:04.293Z
 
 This file provides a complete map of all available documentation for AI agents and developers.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnitend/dashboard-for-laravel",
-  "version": "0.16.3",
+  "version": "0.17.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

@@ -171,6 +171,17 @@ $dashboard-navbar-height: 64px;
   );
 }
 
+// Bootstrap's `.input-group` defaults to `flex-wrap: wrap`, letting a
+// narrow container (e.g. a compact table cell, a small screen) stack the
+// prepend/append affix onto its own line below the input. That breaks the
+// visual "one control" continuity an input-group exists to provide — an
+// affix + input should shrink/scroll before it wraps, never stack. Applies
+// globally (currency/percentage fields, DAutocomplete's own `:deep()`
+// override becomes redundant but harmless here).
+.input-group {
+  flex-wrap: nowrap;
+}
+
 // ----------------------------------------------------------------------------
 // Dashboard Custom Styles
 // ----------------------------------------------------------------------------
@@ -221,17 +232,24 @@ $dashboard-navbar-height: 64px;
 // Toasts
 // ----------------------------------------------------------------------------
 // Bootstrap Vue Next renders toasts with Bootstrap's `.text-bg-{variant}`
-// utility, which fills the whole toast with a saturated colour and white text —
-// loud "candy" blocks that are wrong for a dashboard. Restyle them as a calm,
-// neutral surface with a subtle semantic tint + a coloured left accent rail and
-// progress bar. Colour still signals the toast type, but the bold palette stays
-// where it belongs (actions, badges, selected states).
+// utility by default, which fills the whole toast with a saturated colour and
+// white text — loud "candy" blocks that are wrong for a dashboard. Restyle
+// them as a calm, neutral surface with a subtle semantic tint. Colour still
+// signals the toast type, but the bold palette stays where it belongs
+// (actions, badges, selected states).
+//
+// `useToast()` (resources/js/composables/useToast.ts) intercepts a themed
+// `variant` and swaps it for a `toast-{variant}` class instead of BVN's own
+// `variant` prop, so these rules drive Bootstrap's own `--bs-toast-*`
+// variables — no `!important` needed to fight the `.text-bg-*` utility, which
+// sets its colours `!important` by design. An untouched (non-themed) variant
+// still falls through to BVN's default `.text-bg-*` styling.
 
 .toast {
   overflow: hidden; // clip the bottom progress bar to the rounded corners
   border: 1px solid $border-color;
   border-radius: $border-radius;
-  background-color: $white;
+  --bs-toast-bg: #{$white};
   box-shadow:
     0 10px 15px -3px rgba(0, 0, 0, 0.1),
     0 4px 6px -2px rgba(0, 0, 0, 0.05);
@@ -260,19 +278,16 @@ $dashboard-navbar-height: 64px;
     display: none;
   }
 
-  // Semantic variants: subtle tinted surface. Overrides the saturated
-  // `.text-bg-*` fill (compound selector wins on specificity); the dark title /
-  // muted body from the base rules above stay.
+  // Semantic variants: subtle tinted surface, driven through the CSS variable
+  // the base `.toast` rule (above, and Bootstrap's own) already reads.
   @each $name, $color in (
     "success": $success,
     "danger": $danger,
     "warning": $warning,
     "info": $info
   ) {
-    &.text-bg-#{$name} {
-      // !important overrides Bootstrap's `.text-bg-*` helper, which sets a
-      // saturated background-color !important that BVN applies per variant.
-      background-color: mix($color, $white, 8%) !important;
+    &.toast-#{$name} {
+      --bs-toast-bg: #{mix($color, $white, 8%)};
     }
   }
 }

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

@@ -21,7 +21,51 @@
         />
     </div>
 
-    <!-- Checkbox: no label wrapper, label sits beside the control -->
+    <!-- Checkbox (horizontal layout): wrapped in DFormGroup for the same
+         label/content column split as other field types, instead of the
+         label-beside-control layout below. The inline label beside the
+         checkbox itself is kept (not deduplicated against the outer label)
+         so the control's accessible name doesn't depend on aria-labelledby
+         association through the fieldset alone — but its `info` popover is
+         omitted here, since rendering the same popover trigger twice (once
+         per label) would be a duplicated interactive element, not just
+         duplicated text. -->
+    <DFormGroup
+        v-else-if="field.type === 'checkbox' && isHorizontal"
+        :class="field.class || 'mb-3'"
+        v-bind="horizontalAttrs"
+    >
+        <template #label>
+            <DXFieldLabel :label="resolvedLabel" :info="resolvedInfo" />
+        </template>
+        <slot
+            v-if="$slots.value"
+            name="value"
+            :field="field"
+            :model="model"
+            :value="fieldValue"
+            :update="setValue"
+        />
+        <DFormCheckbox
+            v-else
+            v-model="fieldValue"
+            :disabled="isDisabled || isReadonly"
+            v-bind="field.inputProps"
+        >
+            <DXFieldLabel :label="resolvedLabel" />
+        </DFormCheckbox>
+
+        <DFormInvalidFeedback v-if="form.hasError(errorKey)" force-show>
+            {{ form.getError(errorKey) }}
+        </DFormInvalidFeedback>
+        <slot name="info" :field="field" :model="model" />
+        <DFormText v-if="resolvedHint || $slots.hint" class="text-muted">
+            <slot name="hint" :field="field" :model="model">{{ resolvedHint }}</slot>
+        </DFormText>
+        <DFormText v-if="field.help">{{ field.help }}</DFormText>
+    </DFormGroup>
+
+    <!-- Checkbox (vertical, default): no label wrapper, label sits beside the control -->
     <div v-else-if="field.type === 'checkbox'" :class="field.class || 'mb-3'">
         <!--
           @slot Replaces the built-in control with a custom value editor.
@@ -67,7 +111,46 @@
         <DFormText v-if="field.help">{{ field.help }}</DFormText>
     </div>
 
-    <!-- Switch: toggle with contextual on/off text and an on-state style -->
+    <!-- Switch (horizontal layout): same column-split treatment as checkbox
+         above, including omitting `info` from the inner label to avoid a
+         duplicated popover trigger. -->
+    <DFormGroup
+        v-else-if="field.type === 'switch' && isHorizontal"
+        :class="[field.class || 'mb-3', 'dx-switch', { 'dx-switch--on': switchIsOn }]"
+        v-bind="horizontalAttrs"
+    >
+        <template #label>
+            <DXFieldLabel :label="resolvedLabel" :info="resolvedInfo" />
+        </template>
+        <slot
+            v-if="$slots.value"
+            name="value"
+            :field="field"
+            :model="model"
+            :value="fieldValue"
+            :update="setValue"
+        />
+        <DFormCheckbox
+            v-else
+            v-model="switchModel"
+            switch
+            :disabled="isDisabled || isReadonly"
+            v-bind="field.inputProps"
+        >
+            <DXFieldLabel :label="switchText" />
+        </DFormCheckbox>
+
+        <DFormInvalidFeedback v-if="form.hasError(errorKey)" force-show>
+            {{ form.getError(errorKey) }}
+        </DFormInvalidFeedback>
+        <slot name="info" :field="field" :model="model" />
+        <DFormText v-if="resolvedHint || $slots.hint" class="text-muted">
+            <slot name="hint" :field="field" :model="model">{{ resolvedHint }}</slot>
+        </DFormText>
+        <DFormText v-if="field.help">{{ field.help }}</DFormText>
+    </DFormGroup>
+
+    <!-- Switch (vertical, default): toggle with contextual on/off text and an on-state style -->
     <div
         v-else-if="field.type === 'switch'"
         :class="[field.class || 'mb-3', 'dx-switch', { 'dx-switch--on': switchIsOn }]"
@@ -119,7 +202,7 @@
 
     <!-- Repeater: nested, repeatable sub-form -->
     <div v-else-if="field.type === 'repeater'" :class="field.class || 'mb-3'">
-        <DFormGroup>
+        <DFormGroup v-bind="repeaterHorizontalAttrs">
             <template #label>
                 <DXFieldLabel :label="resolvedLabel" :info="resolvedInfo" />
             </template>
@@ -154,9 +237,11 @@
     </div>
 
     <!-- Standard labelled field -->
-    <DFormGroup v-else :class="field.class || 'mb-3'">
-        <!-- Label with optional info popover -->
-        <template #label>
+    <DFormGroup v-else :class="field.class || 'mb-3'" v-bind="horizontalAttrs">
+        <!-- Label with optional info popover. Omitted entirely (not just
+             emptied) when hideLabel is set, so BFormGroup doesn't reserve a
+             label column/row for it (see DXRepeater's table layout). -->
+        <template v-if="!hideLabel" #label>
             <DXFieldLabel :label="resolvedLabel" :info="resolvedInfo" />
         </template>
 
@@ -380,7 +465,7 @@ import DFormText from "../base/DFormText.vue";
 import DInputGroup from "../base/DInputGroup.vue";
 import DXFieldLabel from "./DXFieldLabel.vue";
 import type { UseFormReturn } from "../../composables/useForm";
-import type { FieldDefinition, FieldOption, FieldType } from "../../types";
+import type { FieldDefinition, FieldOption, FieldType, LabelCols } from "../../types";
 import { getByPath, setByPath } from "../../utils/objectPath";
 
 // Async to break the DXField <-> DXRepeater circular import.
@@ -405,12 +490,74 @@ interface Props {
 
     /** Error key for validation lookups (defaults to keyPath/field.key). */
     errorKey?: string;
+
+    /**
+     * Field layout: "vertical" (default, label above input) or "horizontal"
+     * (label left, input right). Normally set by DXForm (form-level, with
+     * `field.layout` taking precedence); pass directly when using DXField
+     * standalone.
+     */
+    layout?: "vertical" | "horizontal";
+
+    /** Label column width for horizontal layout (mirrors BFormGroup). */
+    labelCols?: LabelCols;
+
+    /**
+     * Skip rendering the field's own label entirely (only affects the
+     * standard labelled-field branch). Used by DXRepeater's `table` layout,
+     * where a column header already names the field and a per-row label
+     * would waste space in the cell.
+     */
+    hideLabel?: boolean;
 }
 
 const props = defineProps<Props>();
 
 const effectiveModel = computed(() => props.model ?? props.form.data);
 
+// ————————————————— horizontal layout (#66)
+
+// A `span` field always bypasses the label/content column split — it's
+// rendered as fully custom full-width content via the very first template
+// branch, before layout is ever considered.
+const isHorizontal = computed(
+    () => props.layout === "horizontal" && !props.field.span,
+);
+
+/** Translate a `LabelCols` value into the BFormGroup attrs it expects. */
+function labelColsAttrs(cols: LabelCols | undefined): Record<string, any> {
+    if (cols === undefined) return {};
+    // BFormGroup's own `labelCols` prop accepts a number OR a numeric string
+    // (BVN's `Numberish` type) — pass anything that isn't the breakpoint
+    // object straight through, rather than gatekeeping on `typeof === "number"`,
+    // so a numeric string (e.g. from an unbound template attribute or a
+    // JSON-driven field config) still activates horizontal layout instead of
+    // silently falling through to an empty breakpoint-object read.
+    if (typeof cols !== "object" || cols === null) {
+        return { labelCols: cols };
+    }
+    const attrs: Record<string, any> = {};
+    if (cols.sm !== undefined) attrs.labelColsSm = cols.sm;
+    if (cols.md !== undefined) attrs.labelColsMd = cols.md;
+    if (cols.lg !== undefined) attrs.labelColsLg = cols.lg;
+    if (cols.xl !== undefined) attrs.labelColsXl = cols.xl;
+    return attrs;
+}
+
+// Default to a 3-column label when horizontal but no width was configured,
+// so `layout: "horizontal"` alone is enough to see the effect.
+const horizontalAttrs = computed<Record<string, any>>(() =>
+    isHorizontal.value ? labelColsAttrs(props.labelCols ?? 3) : {},
+);
+
+// A table-layout repeater is inherently wide — squeezing its own label into a
+// narrow left column (as if it were a single-line input) reads badly, unlike
+// a normal horizontal field. Its label always renders above, regardless of
+// the form/field's horizontal layout setting (#68 follow-up).
+const repeaterHorizontalAttrs = computed<Record<string, any>>(() =>
+    props.field.repeaterLayout === "table" ? {} : horizontalAttrs.value,
+);
+
 // Path semantics (getByPath/setByPath) are only used when a parent passes an
 // explicit keyPath (e.g. a repeater binding `lines.0.price`). For top-level
 // fields the key is used literally, so a field whose key legitimately contains