@omnitend/dashboard-for-laravel 0.18.1 → 0.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnitend/dashboard-for-laravel",
-  "version": "0.18.1",
+  "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,11 +35,20 @@
         :class="field.class || 'mb-3'"
         v-bind="horizontalAttrs"
     >
-        <!-- The inner label (beside the checkbox) always names the control, so
-             hideLabel drops only the redundant outer row label; horizontalAttrs
-             then reserves no label column, letting the control span full width. -->
+        <!-- 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"
@@ -55,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>
@@ -122,11 +131,22 @@
         :class="[field.class || 'mb-3', 'dx-switch', { 'dx-switch--on': switchIsOn }]"
         v-bind="horizontalAttrs"
     >
-        <!-- The switch renders its own label inside the control, so hideLabel
-             drops only the redundant outer row label; horizontalAttrs then
-             reserves no label column, letting the toggle span full width. -->
+        <!-- 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"
@@ -143,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>
@@ -246,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 -->
@@ -435,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.
@@ -564,10 +598,34 @@ function labelColsAttrs(cols: LabelCols | undefined): Record<string, any> {
 // with sibling row labels (#78).
 const horizontalAttrs = computed<Record<string, any>>(() =>
     isHorizontal.value && !props.hideLabel
-        ? labelColsAttrs(props.labelCols ?? 3)
+        ? {
+              ...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
 // 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

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"