@omnitend/dashboard-for-laravel 0.18.0 → 0.19.0

package/dist/types/index.d.ts

@@ -157,6 +157,16 @@ export interface FieldDefinition {
      * layout. Falls back to the form-level `labelCols` when omitted.
      */
     labelCols?: LabelCols;
+    /**
+     * Skip rendering the field's own label. In horizontal layout no label
+     * column is reserved either, so the control spans the full width. Useful
+     * for `switch` (and `checkbox`) fields, which render their own label
+     * inside the control — the outer row label would otherwise duplicate it,
+     * and the self-label then lines up with sibling row labels. Also used
+     * internally by `DXRepeater`'s `table` layout, where a column header
+     * already names the field.
+     */
+    hideLabel?: boolean;
     /**
      * Component rendered for `type: "component"` fields. Receives
      * `modelValue`, `field`, `model` props and emits `update:modelValue`.

package/package.json

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

@@ -79,13 +79,18 @@ $btn-padding-x-lg: 1.5rem; // 24px
 // Forms
 // ----------------------------------------------------------------------------
 
-$input-padding-y: 0.625rem;
+$input-padding-y: 0.375rem; // compact fields (Bootstrap's default; 0.625rem read oversized)
 $input-padding-x: 1rem;
 $input-border-radius: $border-radius;
 $input-border-color: #d1d5db; // Gray-300
 $input-focus-border-color: $primary;
 $input-focus-box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
 
+// Check/radio inputs default their border to `$border-color` (Gray-200), not
+// `$input-border-color` — so a bare checkbox looks faint beside the (darker,
+// Gray-300) text inputs. Share the input border colour across all controls.
+$form-check-input-border: 1px solid $input-border-color;
+
 // ----------------------------------------------------------------------------
 // Cards
 // ----------------------------------------------------------------------------
@@ -188,6 +193,36 @@ $bootstrap-icons-font-src: url("bootstrap-icons/font/fonts/bootstrap-icons.woff2
   );
 }
 
+// Bigger check/radio boxes — Bootstrap's 1em default reads small next to the
+// theme's inputs and is a fiddly touch target.
+.form-check-input {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+// Horizontal ("label-left") forms: a compact settings-form rhythm, with the
+// label + control top-aligned so a checkbox/switch sits on the label's first
+// line rather than floating above it (the label column carries a top offset to
+// line up with text inputs; the checkbox is given the same offset). Vertical
+// forms are unaffected.
+.dx-form--horizontal {
+  .row {
+    align-items: flex-start;
+  }
+
+  .col-form-label {
+    padding-top: 0.4rem;
+  }
+
+  .form-check {
+    margin-top: 0.4rem;
+  }
+
+  .mb-3 {
+    margin-bottom: 0.5rem;
+  }
+}
+
 // 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
@@ -243,6 +278,10 @@ $bootstrap-icons-font-src: url("bootstrap-icons/font/fonts/bootstrap-icons.woff2
 
 .dashboard-navbar {
   height: $dashboard-navbar-height;
+  // A light grey top bar over the white content panel (higher contrast than a
+  // grey-everywhere layout). The navbar markup drops its `bg-white` class so
+  // this wins without `!important`.
+  background-color: #f8f9fa;
 }
 
 // ----------------------------------------------------------------------------

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

@@ -247,5 +247,8 @@ const toggleSidebar = () => {
 .dashboard-main {
   flex: 1;
   max-width: 100%;
+  /* A white content panel under the light grey top bar / layout, so forms and
+     content sit on white (higher contrast than a grey-everywhere dashboard). */
+  background-color: #fff;
 }
 </style>

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

@@ -5,7 +5,7 @@
   `DXDashboard`, which forwards these slots with a `navbar-` prefix.
 -->
 <template>
-  <header class="dashboard-navbar bg-white border-bottom">
+  <header class="dashboard-navbar border-bottom">
     <DContainer fluid>
       <!-- Flex bar that wraps: below `md` the search drops to its own
            full-width row beneath the toggle/title/user-menu row. -->

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

@@ -35,8 +35,20 @@
         :class="field.class || 'mb-3'"
         v-bind="horizontalAttrs"
     >
-        <template #label>
+        <!-- The row label (left column) names the control; the checkbox's own
+             label is kept for screen readers but hidden visually so it doesn't
+             duplicate the row label. In horizontal layout the hint sits beneath
+             the label here rather than below the control. -->
+        <template v-if="!hideLabel" #label>
             <DXFieldLabel :label="resolvedLabel" :info="resolvedInfo" />
+            <small
+                v-if="isHorizontal && (resolvedHint || $slots.hint)"
+                class="form-text text-muted d-block dx-field-hint"
+            >
+                <slot name="hint" :field="field" :model="model">{{
+                    resolvedHint
+                }}</slot>
+            </small>
         </template>
         <slot
             v-if="$slots.value"
@@ -52,14 +64,14 @@
             :disabled="isDisabled || isReadonly"
             v-bind="field.inputProps"
         >
-            <DXFieldLabel :label="resolvedLabel" />
+            <DXFieldLabel :label="resolvedLabel" class="visually-hidden" />
         </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">
+        <DFormText v-if="!hintInLabel && (resolvedHint || $slots.hint)" class="text-muted">
             <slot name="hint" :field="field" :model="model">{{ resolvedHint }}</slot>
         </DFormText>
         <DFormText v-if="field.help">{{ field.help }}</DFormText>
@@ -119,8 +131,22 @@
         :class="[field.class || 'mb-3', 'dx-switch', { 'dx-switch--on': switchIsOn }]"
         v-bind="horizontalAttrs"
     >
-        <template #label>
+        <!-- The row label (left column) names the control. The switch's own
+             inner text is shown only when the field opts into contextual on/off
+             text (e.g. "Product is current"); otherwise it falls back to the row
+             label and is hidden visually (kept for screen readers). In horizontal
+             layout the hint sits beneath the label here rather than below the
+             control. -->
+        <template v-if="!hideLabel" #label>
             <DXFieldLabel :label="resolvedLabel" :info="resolvedInfo" />
+            <small
+                v-if="isHorizontal && (resolvedHint || $slots.hint)"
+                class="form-text text-muted d-block dx-field-hint"
+            >
+                <slot name="hint" :field="field" :model="model">{{
+                    resolvedHint
+                }}</slot>
+            </small>
         </template>
         <slot
             v-if="$slots.value"
@@ -137,14 +163,17 @@
             :disabled="isDisabled || isReadonly"
             v-bind="field.inputProps"
         >
-            <DXFieldLabel :label="switchText" />
+            <DXFieldLabel
+                :label="switchText"
+                :class="switchHasContextualText ? undefined : 'visually-hidden'"
+            />
         </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">
+        <DFormText v-if="!hintInLabel && (resolvedHint || $slots.hint)" class="text-muted">
             <slot name="hint" :field="field" :model="model">{{ resolvedHint }}</slot>
         </DFormText>
         <DFormText v-if="field.help">{{ field.help }}</DFormText>
@@ -203,7 +232,7 @@
     <!-- Repeater: nested, repeatable sub-form -->
     <div v-else-if="field.type === 'repeater'" :class="field.class || 'mb-3'">
         <DFormGroup v-bind="repeaterHorizontalAttrs">
-            <template #label>
+            <template v-if="!hideLabel" #label>
                 <DXFieldLabel :label="resolvedLabel" :info="resolvedInfo" />
             </template>
             <DXRepeater
@@ -240,9 +269,19 @@
     <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). -->
+             label column/row for it (see DXRepeater's table layout). In
+             horizontal layout the hint sits beneath the label here rather than
+             below the control. -->
         <template v-if="!hideLabel" #label>
             <DXFieldLabel :label="resolvedLabel" :info="resolvedInfo" />
+            <small
+                v-if="isHorizontal && (resolvedHint || $slots.hint)"
+                class="form-text text-muted d-block dx-field-hint"
+            >
+                <slot name="hint" :field="field" :model="model">{{
+                    resolvedHint
+                }}</slot>
+            </small>
         </template>
 
         <!-- Custom value slot overrides the built-in control -->
@@ -429,8 +468,9 @@
         -->
         <slot name="info" :field="field" :model="model" />
 
-        <!-- Hint (dynamic, slot-overridable) -->
-        <DFormText v-if="resolvedHint || $slots.hint" class="text-muted">
+        <!-- Hint (dynamic, slot-overridable). In horizontal layout it renders in
+             the label column instead (see the #label slot above). -->
+        <DFormText v-if="!hintInLabel && (resolvedHint || $slots.hint)" class="text-muted">
             <!--
               @slot Overrides the field's hint text shown below the control.
               @binding {FieldDefinition} field The field definition being rendered.
@@ -503,10 +543,14 @@ interface Props {
     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.
+     * Skip rendering the field's own (outer) label. Applies to the standard
+     * labelled-field branch and to the checkbox/switch/repeater branches. In
+     * horizontal layout no label column is reserved either, so the control
+     * spans the full width (a switch/checkbox self-label then lines up with
+     * sibling row labels). Used by DXRepeater's `table` layout (a column
+     * header already names the field) and by consumers hiding the redundant
+     * row label on a switch/checkbox, which render their own label inside the
+     * control (#78).
      */
     hideLabel?: boolean;
 }
@@ -545,9 +589,41 @@ function labelColsAttrs(cols: LabelCols | undefined): Record<string, any> {
 }
 
 // Default to a 3-column label when horizontal but no width was configured,
-// so `layout: "horizontal"` alone is enough to see the effect.
+// so `layout: "horizontal"` alone is enough to see the effect. When the
+// field's label is hidden, reserve no label column at all — BFormGroup would
+// otherwise still emit an empty label column (it goes horizontal whenever any
+// labelCols are set, regardless of whether a label exists), leaving the
+// control indented in the input column beside dead space. Dropping the column
+// lets the control span full width, so a switch/checkbox self-label lines up
+// with sibling row labels (#78).
 const horizontalAttrs = computed<Record<string, any>>(() =>
-    isHorizontal.value ? labelColsAttrs(props.labelCols ?? 3) : {},
+    isHorizontal.value && !props.hideLabel
+        ? {
+              ...labelColsAttrs(props.labelCols ?? 3),
+              // Right-align the label column so the label (and the hint that
+              // sits beneath it in horizontal layout) line up against the
+              // control column, like a classic label-left settings form.
+              labelClass: "text-sm-end dx-field-label-col",
+          }
+        : {},
+);
+
+// In horizontal layout the hint moves up into the label column (beneath the
+// label), rather than below the control — so a row reads "label + hint | control".
+// Vertical layout (and a hidden label, which reserves no label column) keeps the
+// hint below the control.
+const hintInLabel = computed(() => isHorizontal.value && !props.hideLabel);
+
+// A `switch` renders visible text inside the control only when the field opts
+// into contextual on/off text (textWhenTrue/textWhenFalse) — e.g. "Product is
+// current". Without it, `switchText` falls back to the row label, which would
+// duplicate the outer label, so the inner label is kept for screen readers but
+// hidden visually (the row label names the control). A plain `checkbox` never
+// shows visible inner text for the same reason.
+const switchHasContextualText = computed(
+    () =>
+        props.field.textWhenTrue !== undefined ||
+        props.field.textWhenFalse !== undefined,
 );
 
 // A table-layout repeater is inherently wide — squeezing its own label into a
@@ -846,9 +922,12 @@ onBeforeUnmount(() => {
    `justify-content: space-between` on a full-width box used to leave a wide
    unclickable gap between the label and the toggle (only the tiny toggle
    itself was a real click target); shrinking the box to fit its content
-   removes that dead zone entirely. */
+   removes that dead zone entirely. Uses block-level `flex` (not `inline-flex`)
+   so the box stays shrink-to-fit yet still takes its own line: an inline-level
+   box let a following `<small class="form-text">` hint flow inline beside it
+   instead of dropping below the control like every other field type (#79). */
 .dx-switch :deep(.form-check) {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     gap: 0.75rem;
     width: fit-content;

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

@@ -53,6 +53,13 @@ const infoId = `dx-field-info-${useId()}`;
     gap: 0.35rem;
 }
 
+/* Soften the label from the near-black body colour so it doesn't dominate the
+   row — but keep it a step darker than the (lighter, secondary-grey) hint so the
+   label still leads. */
+.dx-field-label__text {
+    color: #495057; /* gray-700 */
+}
+
 .dx-field-label__info {
     display: inline-flex;
     align-items: center;

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

@@ -12,7 +12,10 @@
   (no Inertia required).
 -->
 <template>
-    <BForm @submit.prevent="handleSubmit">
+    <BForm
+        @submit.prevent="handleSubmit"
+        :class="{ 'dx-form--horizontal': layout === 'horizontal' }"
+    >
         <!-- Form-level error message -->
         <DAlert
             v-if="resolvedForm.shouldShowMessage"
@@ -88,6 +91,7 @@
                                     :model="model"
                                     :layout="field.layout ?? layout"
                                     :label-cols="field.labelCols ?? labelCols"
+                                    :hide-label="field.hideLabel"
                                 >
                                     <template
                                         v-for="(slotName, target) in fieldSlotMap(field.key)"
@@ -151,6 +155,7 @@
                             :model="model"
                             :layout="field.layout ?? layout"
                             :label-cols="field.labelCols ?? labelCols"
+                            :hide-label="field.hideLabel"
                         >
                             <template
                                 v-for="(slotName, target) in fieldSlotMap(field.key)"

package/resources/js/types/index.ts

@@ -207,6 +207,17 @@ export interface FieldDefinition {
      */
     labelCols?: LabelCols;
 
+    /**
+     * Skip rendering the field's own label. In horizontal layout no label
+     * column is reserved either, so the control spans the full width. Useful
+     * for `switch` (and `checkbox`) fields, which render their own label
+     * inside the control — the outer row label would otherwise duplicate it,
+     * and the self-label then lines up with sibling row labels. Also used
+     * internally by `DXRepeater`'s `table` layout, where a column header
+     * already names the field.
+     */
+    hideLabel?: boolean;
+
     /**
      * Component rendered for `type: "component"` fields. Receives
      * `modelValue`, `field`, `model` props and emits `update:modelValue`.