@omnitend/dashboard-for-laravel 0.16.4 → 0.18.0

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

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

@@ -24,99 +24,199 @@
         </DAlert>
 
         <!-- Tabbed layout. BTabs exposes the active *index* via v-model:index
-             (plain v-model is the active tab id), which is what we track. -->
-        <DTabs v-if="hasTabs" v-model:index="activeTab">
-            <DTab
-                v-for="(tab, index) in visibleTabs"
-                :key="tab.key"
-                :title="resolveTabLabel(tab)"
-                :lazy="tab.lazy"
-                :active="index === 0"
-            >
-                <!--
-                  @slot Replaces the entire body of a tab, keyed by tab (slot name `tab-content(<tabKey>)`).
-                  @binding {FormTab} tab The tab definition being rendered.
-                  @binding {object} model Live form data merged with `context`, for predicates.
-                -->
-                <slot
-                    v-if="$slots[`tab-content(${tab.key})`]"
-                    :name="`tab-content(${tab.key})`"
-                    :tab="tab"
-                    :model="model"
-                />
-
-                <div v-else class="pt-3">
+             (plain v-model is the active tab id), which is what we track.
+             `card` needs BOTH: DTabs' own `card` prop (adds `card-header`/
+             `card-body` classes to its nav/content internally) AND an outer
+             `.card` element wrapping it (BVN's `card` prop does not add the
+             outer wrapper itself — the consumer supplies it, per BVN's docs
+             pattern). `no-body` stops DCard from adding its own
+             `.card-body` wrapper — DTabs already provides `.card-header`/
+             `.card-body` internally via its own `card` prop, so wrapping
+             that in another `.card-body` would double up. -->
+        <component :is="card ? DCard : 'div'" v-if="hasTabs" v-bind="card ? { noBody: true } : {}">
+            <DTabs v-model:index="activeTab" :card="card">
+                <DTab
+                    v-for="(tab, index) in visibleTabs"
+                    :key="tab.key"
+                    :title="resolveTabLabel(tab)"
+                    :lazy="tab.lazy"
+                    :active="index === 0"
+                >
                     <!--
-                      @slot Content inserted above a tab's fields, keyed by tab (slot name `tab-before(<tabKey>)`).
+                      @slot Replaces the entire body of a tab, keyed by tab (slot name `tab-content(<tabKey>)`).
                       @binding {FormTab} tab The tab definition being rendered.
                       @binding {object} model Live form data merged with `context`, for predicates.
                     -->
-                    <slot :name="`tab-before(${tab.key})`" :tab="tab" :model="model" />
-
-                    <DXField
-                        v-for="field in visibleFieldsFor(tab)"
-                        :key="field.key"
-                        :field="field"
-                        :form="resolvedForm"
+                    <slot
+                        v-if="$slots[`tab-content(${tab.key})`]"
+                        :name="`tab-content(${tab.key})`"
+                        :tab="tab"
                         :model="model"
-                    >
-                        <template
-                            v-for="(slotName, target) in fieldSlotMap(field.key)"
-                            :key="target"
-                            #[target]="slotProps"
-                        >
-                            <!-- @slot Per-field overrides forwarded to DXField, keyed by field key: `value(<key>)`, `span(<key>)`, `info(<key>)`, `hint(<key>)`, `repeater-row(<key>)`. -->
-                            <slot :name="slotName" v-bind="slotProps" />
+                    />
+
+                    <div v-else class="pt-3">
+                        <!--
+                          @slot Content inserted above a tab's fields, keyed by tab (slot name `tab-before(<tabKey>)`).
+                          @binding {FormTab} tab The tab definition being rendered.
+                          @binding {object} model Live form data merged with `context`, for predicates.
+                        -->
+                        <slot :name="`tab-before(${tab.key})`" :tab="tab" :model="model" />
+
+                        <template v-for="field in visibleFieldsFor(tab)" :key="field.key">
+                            <!--
+                              @slot Fully replaces a field's rendering (including its label), keyed by field key: `field(<key>)`. Unlike `value(<key>)`, bypasses DXField entirely — like `tab-content`, this also supersedes `field-before(<key>)`/`field-after(<key>)` for the same key.
+                              @binding {FieldDefinition} field The field definition being replaced.
+                              @binding {object} model Live form data merged with `context`, for predicates.
+                            -->
+                            <slot
+                                v-if="$slots[`field(${field.key})`]"
+                                :name="`field(${field.key})`"
+                                :field="field"
+                                :model="model"
+                            />
+                            <template v-else>
+                                <!--
+                                  @slot Content inserted directly above a field, keyed by field key: `field-before(<key>)`. Not rendered when `field(<key>)` replaces the same field.
+                                  @binding {FieldDefinition} field The field about to be rendered.
+                                  @binding {object} model Live form data merged with `context`, for predicates.
+                                -->
+                                <slot :name="`field-before(${field.key})`" :field="field" :model="model" />
+
+                                <DXField
+                                    :field="field"
+                                    :form="resolvedForm"
+                                    :model="model"
+                                    :layout="field.layout ?? layout"
+                                    :label-cols="field.labelCols ?? labelCols"
+                                >
+                                    <template
+                                        v-for="(slotName, target) in fieldSlotMap(field.key)"
+                                        :key="target"
+                                        #[target]="slotProps"
+                                    >
+                                        <!-- @slot Per-field overrides forwarded to DXField, keyed by field key: `value(<key>)`, `span(<key>)`, `info(<key>)`, `hint(<key>)`, `repeater-row(<key>)`. -->
+                                        <slot :name="slotName" v-bind="slotProps" />
+                                    </template>
+                                </DXField>
+
+                                <!--
+                                  @slot Content inserted directly below a field, keyed by field key: `field-after(<key>)`. Not rendered when `field(<key>)` replaces the same field.
+                                  @binding {FieldDefinition} field The field that was just rendered.
+                                  @binding {object} model Live form data merged with `context`, for predicates.
+                                -->
+                                <slot :name="`field-after(${field.key})`" :field="field" :model="model" />
+                            </template>
                         </template>
-                    </DXField>
 
+                        <!--
+                          @slot Content inserted below a tab's fields, keyed by tab (slot name `tab-after(<tabKey>)`).
+                          @binding {FormTab} tab The tab definition being rendered.
+                          @binding {object} model Live form data merged with `context`, for predicates.
+                        -->
+                        <slot :name="`tab-after(${tab.key})`" :tab="tab" :model="model" />
+                    </div>
+                </DTab>
+            </DTabs>
+        </component>
+
+        <!-- Flat layout (no tabs). When `card` is set, the fields + submit
+             button + footer render inside a DCard, giving the form a visual
+             boundary (the tabbed case gets this from DTabs' own `card` prop
+             instead, above). -->
+        <template v-if="!hasTabs">
+            <component :is="card ? DCard : 'div'">
+                <template v-for="field in visibleFlatFields" :key="field.key">
                     <!--
-                      @slot Content inserted below a tab's fields, keyed by tab (slot name `tab-after(<tabKey>)`).
-                      @binding {FormTab} tab The tab definition being rendered.
+                      @slot Fully replaces a field's rendering (including its label), keyed by field key: `field(<key>)`. Unlike `value(<key>)`, bypasses DXField entirely — like `tab-content`, this also supersedes `field-before(<key>)`/`field-after(<key>)` for the same key.
+                      @binding {FieldDefinition} field The field definition being replaced.
                       @binding {object} model Live form data merged with `context`, for predicates.
                     -->
-                    <slot :name="`tab-after(${tab.key})`" :tab="tab" :model="model" />
-                </div>
-            </DTab>
-        </DTabs>
+                    <slot
+                        v-if="$slots[`field(${field.key})`]"
+                        :name="`field(${field.key})`"
+                        :field="field"
+                        :model="model"
+                    />
+                    <template v-else>
+                        <!--
+                          @slot Content inserted directly above a field, keyed by field key: `field-before(<key>)`. Not rendered when `field(<key>)` replaces the same field.
+                          @binding {FieldDefinition} field The field about to be rendered.
+                          @binding {object} model Live form data merged with `context`, for predicates.
+                        -->
+                        <slot :name="`field-before(${field.key})`" :field="field" :model="model" />
+
+                        <DXField
+                            :field="field"
+                            :form="resolvedForm"
+                            :model="model"
+                            :layout="field.layout ?? layout"
+                            :label-cols="field.labelCols ?? labelCols"
+                        >
+                            <template
+                                v-for="(slotName, target) in fieldSlotMap(field.key)"
+                                :key="target"
+                                #[target]="slotProps"
+                            >
+                                <!-- @slot Per-field overrides forwarded to DXField, keyed by field key: `value(<key>)`, `span(<key>)`, `info(<key>)`, `hint(<key>)`, `repeater-row(<key>)`. -->
+                                <slot :name="slotName" v-bind="slotProps" />
+                            </template>
+                        </DXField>
+
+                        <!--
+                          @slot Content inserted directly below a field, keyed by field key: `field-after(<key>)`. Not rendered when `field(<key>)` replaces the same field.
+                          @binding {FieldDefinition} field The field that was just rendered.
+                          @binding {object} model Live form data merged with `context`, for predicates.
+                        -->
+                        <slot :name="`field-after(${field.key})`" :field="field" :model="model" />
+                    </template>
+                </template>
 
-        <!-- Flat layout (no tabs) -->
-        <template v-else>
-            <DXField
-                v-for="field in visibleFlatFields"
-                :key="field.key"
-                :field="field"
-                :form="resolvedForm"
-                :model="model"
-            >
-                <template
-                    v-for="(slotName, target) in fieldSlotMap(field.key)"
-                    :key="target"
-                    #[target]="slotProps"
+                <!-- Submit button -->
+                <DButton
+                    v-if="showSubmit"
+                    type="submit"
+                    variant="primary"
+                    block
+                    :loading="resolvedForm.processing"
+                    :loading-text="submitLoadingText"
+                    class="mt-3"
                 >
-                    <!-- @slot Per-field overrides forwarded to DXField, keyed by field key: `value(<key>)`, `span(<key>)`, `info(<key>)`, `hint(<key>)`, `repeater-row(<key>)`. -->
-                    <slot :name="slotName" v-bind="slotProps" />
-                </template>
-            </DXField>
+                    {{ submitText }}
+                </DButton>
+
+                <!--
+                  @slot Content rendered below the submit button (e.g. a cancel link or secondary actions).
+                  @binding {UseFormReturn} form The resolved form instance (state, errors, submit helpers).
+                -->
+                <slot name="footer" :form="resolvedForm" />
+            </component>
         </template>
 
-        <!-- Submit button -->
-        <DButton
-            v-if="showSubmit"
-            type="submit"
-            variant="primary"
-            :disabled="resolvedForm.processing"
-            class="w-100 mt-3"
-        >
-            <span v-if="resolvedForm.processing">{{ submitLoadingText }}</span>
-            <span v-else>{{ submitText }}</span>
-        </DButton>
-
-        <!--
-          @slot Content rendered below the submit button (e.g. a cancel link or secondary actions).
-          @binding {UseFormReturn} form The resolved form instance (state, errors, submit helpers).
-        -->
-        <slot name="footer" :form="resolvedForm" />
+        <!-- Tabbed layout: submit button + footer always render as siblings
+             below DTabs (outside the card, when `card` is set) — unlike the
+             flat layout, they aren't pulled inside the card here, since
+             DTabs' own card-body padding belongs to its tab content, not to
+             trailing form-level actions. -->
+        <template v-else>
+            <!-- Submit button -->
+            <DButton
+                v-if="showSubmit"
+                type="submit"
+                variant="primary"
+                block
+                :loading="resolvedForm.processing"
+                :loading-text="submitLoadingText"
+                class="mt-3"
+            >
+                {{ submitText }}
+            </DButton>
+
+            <!--
+              @slot Content rendered below the submit button (e.g. a cancel link or secondary actions).
+              @binding {UseFormReturn} form The resolved form instance (state, errors, submit helpers).
+            -->
+            <slot name="footer" :form="resolvedForm" />
+        </template>
     </BForm>
 </template>
 
@@ -125,12 +225,13 @@ import { computed, watch } from "vue";
 import { BForm } from "bootstrap-vue-next";
 import DAlert from "../base/DAlert.vue";
 import DButton from "../base/DButton.vue";
+import DCard from "../base/DCard.vue";
 import DTabs from "../base/DTabs.vue";
 import DTab from "../base/DTab.vue";
 import DXField from "./DXField.vue";
 import type { UseFormReturn } from "../../composables/useForm";
 import type { DefineFormReturn } from "../../composables/defineForm";
-import type { FieldDefinition, FormTab, MaybeFn } from "../../types";
+import type { FieldDefinition, FormTab, LabelCols, MaybeFn } from "../../types";
 
 interface Props {
     /**
@@ -164,6 +265,29 @@ interface Props {
 
     /** Auto-switch to the first tab containing a validation error. */
     autoErrorTab?: boolean;
+
+    /**
+     * Wrap the form in a card for a visual boundary (mirrors DXTable's
+     * `card` prop). Tabbed forms render the tab nav as a BS5
+     * card-header-tabs instead of double-wrapping. Off by default since
+     * DXForm is commonly embedded in a page card or modal already.
+     */
+    card?: boolean;
+
+    /**
+     * Form-wide field layout: "vertical" (default, label above input) or
+     * "horizontal" (label left, input right). Overridable per-field via
+     * `field.layout`. A field with `span: true` always renders full-width,
+     * regardless of layout.
+     */
+    layout?: "vertical" | "horizontal";
+
+    /**
+     * Label column width for horizontal layout (mirrors BFormGroup's
+     * `labelCols`/`labelCols*` props). Overridable per-field via
+     * `field.labelCols`. Ignored when `layout` is "vertical".
+     */
+    labelCols?: LabelCols;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -171,6 +295,8 @@ const props = withDefaults(defineProps<Props>(), {
     submitLoadingText: "Submitting...",
     showSubmit: true,
     autoErrorTab: true,
+    card: false,
+    layout: "vertical",
 });
 
 const emit = defineEmits<{