@omnitend/dashboard-for-laravel 0.33.1 → 0.35.0

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

@@ -0,0 +1,124 @@
+<!--
+  @component (internal — not exported)
+  The chrome every DXField branch shares: the optional label (with its info
+  affordance and, in horizontal layout, its hint), the control (default slot),
+  and the trailing validation feedback + info block + hint + static help. Before
+  #135 this markup was re-rendered separately in each of DXField's ~7 branches;
+  it now lives here once.
+
+  Two shapes:
+  - `mode="group"` — root is a `DFormGroup` that owns the `#label` column and
+    holds the control + trailing block inside it (standard / horizontal
+    checkbox / horizontal switch).
+  - `mode="plain"` — root is a plain `div`; the control renders its own inline
+    label (vertical checkbox/switch), or a heading/rows (switch-list), or a
+    nested group (repeater). The trailing block follows the control in the div.
+
+  The `hint` and `info` slots are forwarded down from DXField (content AND slot
+  props). `hint` falls back to `{{ resolvedHint }}` when no slot is supplied.
+-->
+<template>
+    <DFormGroup
+        v-if="mode === 'group'"
+        :class="wrapperClass"
+        v-bind="groupAttrs"
+    >
+        <template v-if="!hideLabel" #label>
+            <DXFieldLabel :label="label" :info="info" />
+            <small
+                v-if="hintInLabel && (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 />
+
+        <DFormInvalidFeedback v-if="form.hasError(errorKey)" force-show>
+            {{ form.getError(errorKey) }}
+        </DFormInvalidFeedback>
+        <slot name="info" :field="field" :model="model" />
+        <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>
+    </DFormGroup>
+
+    <div v-else :class="wrapperClass">
+        <slot />
+
+        <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>
+    </div>
+</template>
+
+<script setup lang="ts">
+import DFormGroup from "../base/DFormGroup.vue";
+import DFormInvalidFeedback from "../base/DFormInvalidFeedback.vue";
+import DFormText from "../base/DFormText.vue";
+import DXFieldLabel from "./DXFieldLabel.vue";
+import type { UseFormReturn } from "../../composables/useForm";
+import type { FieldDefinition } from "../../types";
+
+interface Props {
+    /** The field definition (for `field.help` and slot props). */
+    field: FieldDefinition;
+
+    /** Form instance owning the field's errors. */
+    form: UseFormReturn<any>;
+
+    /** Error key for validation lookups. */
+    errorKey: string;
+
+    /** Model passed to `hint`/`info` slot props. */
+    model?: any;
+
+    /**
+     * Layout shape. `group` = DFormGroup root with a label column; `plain` =
+     * plain div, the control owning its own inline label/heading.
+     */
+    mode: "group" | "plain";
+
+    /** Wrapper class (`field.class || 'mb-3'`). */
+    wrapperClass?: string;
+
+    /** BFormGroup attrs (horizontal label-cols etc.); group mode only. */
+    groupAttrs?: Record<string, any>;
+
+    /** Resolved label text (group mode). Always supplied by DXField. */
+    label: string;
+
+    /** Resolved info text for the label popover (group mode). */
+    info?: string;
+
+    /** Skip the label column entirely (group mode). */
+    hideLabel?: boolean;
+
+    /**
+     * Whether the hint sits in the label column (horizontal) rather than below
+     * the control. Group mode only; plain mode always renders the hint below.
+     */
+    hintInLabel?: boolean;
+
+    /** Resolved hint text (fallback when no `hint` slot is supplied). */
+    resolvedHint?: string;
+}
+
+defineProps<Props>();
+</script>

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

@@ -13,8 +13,9 @@
 -->
 <template>
     <BForm
+        ref="formRoot"
         @submit.prevent="handleSubmit"
-        :class="{ 'dx-form--horizontal': layout === 'horizontal' }"
+        :class="{ 'dx-form--horizontal': resolvedLayout === 'horizontal' }"
     >
         <!-- Form-level error message -->
         <DAlert
@@ -71,7 +72,7 @@
                             :field="field"
                             :form="resolvedForm"
                             :model="model"
-                            :layout="layout"
+                            :layout="resolvedLayout"
                             :label-cols="labelCols"
                         >
                             <!-- Forward every DXForm slot so the field can render
@@ -105,7 +106,7 @@
                     :field="field"
                     :form="resolvedForm"
                     :model="model"
-                    :layout="layout"
+                    :layout="resolvedLayout"
                     :label-cols="labelCols"
                 >
                     <!-- Forward every DXForm slot so the field can render its
@@ -166,7 +167,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watch } from "vue";
+import { computed, ref, watch, type ComponentPublicInstance } from "vue";
 import { BForm } from "bootstrap-vue-next";
 import DAlert from "../base/DAlert.vue";
 import DButton from "../base/DButton.vue";
@@ -176,7 +177,12 @@ import { BTab as DTab } from "bootstrap-vue-next"; // raw BTab: BTabs scans slot
 import DXFormField from "./DXFormField.vue";
 import type { UseFormReturn } from "../../composables/useForm";
 import type { DefineFormReturn } from "../../composables/defineForm";
+import { useContainerWidth } from "../../composables/useContainerWidth";
 import type { FieldDefinition, FormTab, LabelCols, MaybeFn } from "../../types";
+import {
+    resolvePredicate as resolvePredicateFor,
+    isFieldVisible as isFieldVisibleFor,
+} from "../../utils/formSchema";
 
 interface Props {
     /**
@@ -231,12 +237,34 @@ interface Props {
     cardTabs?: 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.
+     * Form-wide field layout:
+     *
+     * - `"vertical"` (default) — label above input, always.
+     * - `"horizontal"` — label left, input right, always.
+     * - `"auto"` — horizontal when the form's **own container** is at least
+     *   `layoutThreshold` px wide, vertical below that. Container-driven, not
+     *   viewport-driven: a page narrowed by the dashboard sidebar, or a form
+     *   inside a modal, stacks even though the window is wide (which no
+     *   Bootstrap media query can see).
+     *
+     * Overridable per-field via `field.layout`. A field with `span: true`
+     * always renders full-width, regardless of layout.
      */
-    layout?: "vertical" | "horizontal";
+    layout?: "vertical" | "horizontal" | "auto";
+
+    /**
+     * Container width (px) at or above which `layout: "auto"` goes horizontal.
+     * Ignored for the explicit `"vertical"`/`"horizontal"` layouts.
+     *
+     * Default 640, measured rather than guessed: with the default 3-column
+     * label the label's text area is `containerWidth / 4 - 18` px, so 640 gives
+     * it 142px — enough for a ~20-character label ("Unit price (ex VAT)"
+     * measures 128px at the theme's label font) to stay on one line, with the
+     * control column still 474px. Below ~584px that label starts wrapping,
+     * which is the cramped-label symptom this exists to avoid. Raise it if your
+     * labels run longer, or lower `labelCols` instead.
+     */
+    layoutThreshold?: number;
 
     /**
      * Label column width for horizontal layout (mirrors BFormGroup's
@@ -254,6 +282,7 @@ const props = withDefaults(defineProps<Props>(), {
     card: false,
     cardTabs: true,
     layout: "vertical",
+    layoutThreshold: 640,
 });
 
 const emit = defineEmits<{
@@ -266,6 +295,55 @@ const slots = defineSlots<Record<string, (props: any) => any>>();
 /** v-model for the active tab index. */
 const activeTab = defineModel<number>("activeTab", { default: 0 });
 
+// ————————————————— container-driven layout (`layout: "auto"`)
+
+const formRoot = ref<ComponentPublicInstance | HTMLElement | null>(null);
+
+/**
+ * The `<form>` element BForm renders. A template ref on a component yields the
+ * component instance, so unwrap `$el` — and tolerate either shape rather than
+ * assuming one, so a future BForm change (or a functional re-implementation)
+ * can't silently leave us observing nothing.
+ */
+function resolveFormElement(): HTMLElement | null {
+    const rootValue = formRoot.value;
+    if (rootValue === null || rootValue === undefined) return null;
+    if (rootValue instanceof HTMLElement) return rootValue;
+    const element = (rootValue as ComponentPublicInstance).$el;
+    return element instanceof HTMLElement ? element : null;
+}
+
+// Observe ONLY in auto mode. Returning null for the other layouts means no
+// ResizeObserver is ever attached for the (overwhelmingly common) explicit
+// layouts — existing consumers pay nothing and behave identically.
+const { isBelow: containerIsNarrow } = useContainerWidth(
+    () => (props.layout === "auto" ? resolveFormElement() : null),
+    {
+        // Getter, so a consumer binding `:layout-threshold` to something
+        // reactive re-evaluates instead of latching the mount-time value.
+        threshold: () => props.layoutThreshold,
+        // Guard against an observer feedback loop at the boundary: the vertical
+        // layout is TALLER, so a form inside an `overflow:auto` ancestor can
+        // gain a scrollbar when it stacks, shrinking its own container by
+        // ~15-17px — straight back over the threshold, and it flips forever.
+        // A band wider than any scrollbar (24px) makes the crossing one-way
+        // until the container genuinely grows.
+        hysteresis: 24,
+    },
+);
+
+/**
+ * The layout actually rendered. `vertical`/`horizontal` pass through
+ * unconditionally (unchanged behaviour); `auto` resolves from the measured
+ * container width, defaulting to `vertical` before the first measurement and
+ * under SSR — the stacked layout is legible at any width, so it is the safe
+ * thing to render when the width is unknown.
+ */
+const resolvedLayout = computed<"vertical" | "horizontal">(() => {
+    if (props.layout !== "auto") return props.layout;
+    return containerIsNarrow.value ? "vertical" : "horizontal";
+});
+
 // ————————————————— resolve form / fields (accept useForm or defineForm)
 
 function isDefineForm(
@@ -303,12 +381,14 @@ const model = computed(() => ({
     ...resolvedForm.value.data,
 }));
 
+// Thin wrappers binding the shared formSchema predicates to this form's live
+// model (context + form data), so field/tab visibility follows the one rule
+// every renderer shares (#134).
 function resolvePredicate(
     when: MaybeFn<boolean> | undefined,
     fallback: boolean,
 ): boolean {
-    if (when === undefined) return fallback;
-    return typeof when === "function" ? when(model.value) : when;
+    return resolvePredicateFor(when, model.value, fallback);
 }
 
 /** Resolve a tab's (possibly function-valued) label against the live model. */
@@ -319,9 +399,7 @@ function resolveTabLabel(tab: FormTab): string {
 }
 
 function isFieldVisible(field: FieldDefinition): boolean {
-    const whenOk = resolvePredicate(field.when, true);
-    const showOk = field.show ? field.show() : true;
-    return whenOk && showOk;
+    return isFieldVisibleFor(field, model.value);
 }
 
 // ————————————————— tabs

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

@@ -0,0 +1,144 @@
+<!--
+  @component (internal — not exported)
+  The numeric control family for DXField: `currency`, `percentage`, `number`.
+  Extracted from DXField (#135) unchanged. The parent DXField still owns the
+  value/guards/`setValue` coercion — this component only renders the control and
+  emits the raw edited value back up. The `percentage` `asFraction` display
+  scaling (model holds a 0–1 fraction, input shows 0–100) lives here because it
+  is purely presentational to this control.
+-->
+<template>
+    <!-- Currency: the DXCurrencyInput leaf (#152) owns the symbol prepend, the
+         blur-padded display (#69), empty -> null, and the minor-units model
+         scaling (#116). -->
+    <DXCurrencyInput
+        v-if="field.type === 'currency'"
+        :model-value="modelValue"
+        :currency-symbol="field.currencySymbol || '£'"
+        :decimals="field.decimals ?? 2"
+        :minor-units="field.minorUnits ?? false"
+        :step="field.step"
+        :required="field.required"
+        :placeholder="field.placeholder"
+        :min="field.min"
+        :max="field.max"
+        :state="state"
+        :disabled="isDisabled"
+        :readonly="isReadonly || isPlaintext"
+        :plaintext="isPlaintext"
+        v-bind="inputProps"
+        @update:model-value="emit('update:modelValue', $event)"
+    />
+
+    <!-- Percentage: numeric input with an affix -->
+    <DInputGroup v-else-if="field.type === 'percentage'">
+        <DFormInput
+            v-model="numericInputValue"
+            type="number"
+            :required="field.required"
+            :placeholder="field.placeholder"
+            :step="field.step"
+            :min="field.min"
+            :max="field.max"
+            :state="state"
+            :disabled="isDisabled"
+            :readonly="isReadonly || isPlaintext"
+            :plaintext="isPlaintext"
+            v-bind="inputProps"
+        />
+
+        <template #append>
+            <span class="input-group-text">%</span>
+        </template>
+    </DInputGroup>
+
+    <!-- Number -->
+    <DFormInput
+        v-else
+        :model-value="modelValue"
+        type="number"
+        :required="field.required"
+        :placeholder="field.placeholder"
+        :step="field.step"
+        :min="field.min"
+        :max="field.max"
+        :state="state"
+        :disabled="isDisabled"
+        :readonly="isReadonly || isPlaintext"
+        :plaintext="isPlaintext"
+        v-bind="inputProps"
+        @update:model-value="emit('update:modelValue', $event)"
+    />
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import DFormInput from "../base/DFormInput.vue";
+import DInputGroup from "../base/DInputGroup.vue";
+import DXCurrencyInput from "./DXCurrencyInput.vue";
+import type { FieldDefinition } from "../../types";
+
+interface Props {
+    /** Field definition (type currency/percentage/number + numeric options). */
+    field: FieldDefinition;
+
+    /** Current model value. */
+    modelValue: any;
+
+    /** Validation state passed to the control. */
+    state?: boolean | null;
+
+    /** Disabled state (`isDisabled`). */
+    isDisabled?: boolean;
+
+    /** Readonly state (`isReadonly`). */
+    isReadonly?: boolean;
+
+    /** Plaintext (display-only) state (`isPlaintext`). */
+    isPlaintext?: boolean;
+
+    /** Escape-hatch input props, already guard-merged by DXField. */
+    inputProps?: Record<string, any>;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (event: "update:modelValue", value: any): void;
+}>();
+
+// For `percentage` fields with `asFraction`, the model holds a 0–1 fraction but
+// the input shows/edits a 0–100 percentage. Scale on read/write, rounding away
+// binary-float artefacts (0.2 * 100 = 20.000000000000004). Currency and plain
+// percentage fields pass straight through.
+const isFractionPercentage = computed(
+    () => props.field.type === "percentage" && props.field.asFraction === true,
+);
+
+const numericInputValue = computed({
+    get: () => {
+        const value = props.modelValue;
+        if (!isFractionPercentage.value) return value;
+        if (value === null || value === undefined || value === "") return value;
+        const num = Number(value);
+        if (!Number.isFinite(num)) return value;
+        return Math.round(num * 100 * 1e6) / 1e6;
+    },
+    set: (value: any) => {
+        if (!isFractionPercentage.value) {
+            emit("update:modelValue", value);
+            return;
+        }
+        if (value === null || value === undefined || value === "") {
+            emit("update:modelValue", value);
+            return;
+        }
+        const num = Number(value);
+        if (!Number.isFinite(num)) {
+            emit("update:modelValue", value);
+            return;
+        }
+        emit("update:modelValue", Math.round((num / 100) * 1e9) / 1e9);
+    },
+});
+</script>