@omnitend/dashboard-for-laravel 0.33.0 → 0.34.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

@@ -177,6 +177,10 @@ import DXFormField from "./DXFormField.vue";
 import type { UseFormReturn } from "../../composables/useForm";
 import type { DefineFormReturn } from "../../composables/defineForm";
 import type { FieldDefinition, FormTab, LabelCols, MaybeFn } from "../../types";
+import {
+    resolvePredicate as resolvePredicateFor,
+    isFieldVisible as isFieldVisibleFor,
+} from "../../utils/formSchema";
 
 interface Props {
     /**
@@ -303,12 +307,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 +325,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>

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

@@ -91,137 +91,65 @@
             </DButton>
         </div>
 
-        <!-- Cards fallback: identical to the default cards markup below,
-             shown instead of the table when there isn't enough room for it.
-             `v-else` (not `v-show`) — only the OUTER wrapper above needs to
+        <!-- Cards fallback: the same DXRepeaterCards as the default branch
+             below, shown instead of the table when there isn't enough room for
+             it. `v-else` (not `v-show`) — only the OUTER wrapper above needs to
              stay mounted for measurement; unmounting whichever of these two
              isn't current avoids permanently double-running every DXField
              in both layouts at once (double async optionsLoader fetches,
              double watchers, double everything else a field might do). -->
-        <div v-else class="dx-repeater">
-            <div
-                v-for="(entry, position) in visibleRows"
-                :key="rowKey(entry.row, position)"
-                class="dx-repeater-row"
-            >
-                <slot
-                    v-if="$slots.row"
-                    name="row"
-                    :row="entry.row"
-                    :index="position"
-                    :fields="subFields"
-                    :remove="() => removeRow(entry.index)"
-                    :path="rowPath(entry.index)"
-                />
-
-                <template v-else>
-                    <div class="dx-repeater-row-header">
-                        <span v-if="field.showRowIndex" class="dx-repeater-row-index">{{ position + 1 }}</span>
-                        <DButton
-                            variant="outline-danger"
-                            size="sm"
-                            :disabled="visibleRows.length <= minItems"
-                            @click="removeRow(entry.index)"
-                        >
-                            Remove
-                        </DButton>
-                    </div>
-                    <DXField
-                        v-for="subField in subFields"
-                        :key="subField.key"
-                        :field="subField"
-                        :form="form"
-                        :model="entry.row"
-                        :key-path="`${rowPath(entry.index)}.${subField.key}`"
-                        :error-key="`${rowPath(entry.index)}.${subField.key}`"
-                    />
-                </template>
-            </div>
-
-            <DButton
-                variant="outline-primary"
-                size="sm"
-                :disabled="maxItems !== undefined && visibleRows.length >= maxItems"
-                @click="addRow"
-            >
-                {{ field.addLabel || "Add" }}
-            </DButton>
-        </div>
-    </div>
-
-    <!-- Cards layout (default, `repeaterLayout: "cards"` or unset): each row
-         is its own bordered card with sub-fields stacked vertically. Kept as
-         a separate, unconditional branch (rather than reusing the fallback
-         above) so this — the overwhelmingly common case — never pays for a
-         ResizeObserver or the extra wrapper div; its markup is byte-for-byte
-         what cards mode has always rendered. -->
-    <div v-else class="dx-repeater">
-        <div
-            v-for="(entry, position) in visibleRows"
-            :key="rowKey(entry.row, position)"
-            class="dx-repeater-row"
+        <DXRepeaterCards
+            v-else
+            :visible-rows="visibleRows"
+            :sub-fields="subFields"
+            :form="form"
+            :field="field"
+            :min-items="minItems"
+            :max-items="maxItems"
+            :row-key="rowKey"
+            :row-path="rowPath"
+            :remove-row="removeRow"
+            :add-row="addRow"
         >
-            <!--
-              @slot Custom layout for a single repeater row, replacing the default sub-field stack.
-              @binding {object} row The current row's data object.
-              @binding {number} index The row's zero-based position among visible rows.
-              @binding {FieldDefinition[]} fields The sub-field definitions for the row.
-              @binding {function} remove Removes this row (respects `minItems`; soft-deletes instead of splicing when `field.softDeleteKey` is set and the row has an `id`).
-              @binding {string} path The dot path into `form.data` for this row (e.g. `lines.0`).
-            -->
-            <slot
-                v-if="$slots.row"
-                name="row"
-                :row="entry.row"
-                :index="position"
-                :fields="subFields"
-                :remove="() => removeRow(entry.index)"
-                :path="rowPath(entry.index)"
-            />
-
-            <!-- Default row: stack each sub-field -->
-            <template v-else>
-                <div class="dx-repeater-row-header">
-                    <span v-if="field.showRowIndex" class="dx-repeater-row-index">{{ position + 1 }}</span>
-                    <DButton
-                        variant="outline-danger"
-                        size="sm"
-                        :disabled="visibleRows.length <= minItems"
-                        @click="removeRow(entry.index)"
-                    >
-                        Remove
-                    </DButton>
-                </div>
-                <DXField
-                    v-for="subField in subFields"
-                    :key="subField.key"
-                    :field="subField"
-                    :form="form"
-                    :model="entry.row"
-                    :key-path="`${rowPath(entry.index)}.${subField.key}`"
-                    :error-key="`${rowPath(entry.index)}.${subField.key}`"
-                />
+            <template v-if="$slots.row" #row="binds">
+                <slot name="row" v-bind="binds" />
             </template>
-        </div>
-
-        <DButton
-            variant="outline-primary"
-            size="sm"
-            :disabled="maxItems !== undefined && visibleRows.length >= maxItems"
-            @click="addRow"
-        >
-            {{ field.addLabel || "Add" }}
-        </DButton>
+        </DXRepeaterCards>
     </div>
+
+    <!-- Cards layout (default, `repeaterLayout: "cards"` or unset): each row
+         is its own bordered card with sub-fields stacked vertically. The
+         overwhelmingly common case, rendered directly (no ResizeObserver, no
+         measurement wrapper) — only the `table` preference above pays for
+         those. Both branches render the same DXRepeaterCards (#135). -->
+    <DXRepeaterCards
+        v-else
+        :visible-rows="visibleRows"
+        :sub-fields="subFields"
+        :form="form"
+        :field="field"
+        :min-items="minItems"
+        :max-items="maxItems"
+        :row-key="rowKey"
+        :row-path="rowPath"
+        :remove-row="removeRow"
+        :add-row="addRow"
+    >
+        <template v-if="$slots.row" #row="binds">
+            <slot name="row" v-bind="binds" />
+        </template>
+    </DXRepeaterCards>
 </template>
 
 <script setup lang="ts">
 import { computed, onBeforeUnmount, ref, watch } from "vue";
 import DButton from "../base/DButton.vue";
 import DXField from "./DXField.vue";
+import DXRepeaterCards from "./DXRepeaterCards.vue";
 import type { UseFormReturn } from "../../composables/useForm";
-import type { FieldDefinition, FieldType } from "../../types";
+import type { FieldDefinition } from "../../types";
 import { getByPath, setByPath } from "../../utils/objectPath";
+import { resolveFieldDefault } from "../../utils/formSchema";
 
 interface Props {
     /** Form instance owning the repeater array */
@@ -378,42 +306,15 @@ const rowKey = (row: any, fallbackPosition: number): string | number => {
     return fallbackPosition;
 };
 
-/** Default value for a freshly added row's sub-field. */
-function defaultForType(type: FieldType): any {
-    switch (type) {
-        case "checkbox":
-        case "switch":
-            return false;
-        case "number":
-        case "currency":
-        case "percentage":
-            return 0;
-        case "repeater":
-            return [];
-        case "image":
-        case "file":
-            return null;
-        default:
-            return "";
-    }
-}
-
-/** Deep-clone a sub-field default so object/array defaults aren't shared
- *  (by reference) across rows. Uses JSON (not structuredClone) because the
- *  default may be a Vue reactive proxy — which structuredClone can't clone —
- *  and form defaults are JSON-serializable by construction. */
-function cloneDefault(value: any): any {
-    if (value === null || typeof value !== "object") return value;
-    return JSON.parse(JSON.stringify(value));
-}
-
+/**
+ * A freshly-added row: each sub-field seeded by the shared `resolveFieldDefault`
+ * rule (explicit default deep-cloned when defined, else the type default), so
+ * repeater rows agree with every other seeding site (#134).
+ */
 function buildRow(): Record<string, any> {
     const row: Record<string, any> = {};
     for (const subField of subFields.value) {
-        row[subField.key] =
-            subField.default !== undefined
-                ? cloneDefault(subField.default)
-                : defaultForType(subField.type);
+        row[subField.key] = resolveFieldDefault(subField);
     }
     return row;
 }
@@ -467,32 +368,9 @@ function removeRow(index: number): void {
 </script>
 
 <style scoped>
-.dx-repeater-row {
-    border: 1px solid var(--bs-border-color);
-    border-radius: var(--bs-border-radius);
-    padding: 1rem;
-    margin-bottom: 0.75rem;
-}
-
-.dx-repeater-row-header {
-    display: flex;
-    align-items: center;
-    margin-bottom: 0.75rem;
-}
-
-/* The Remove control is always this header's last child, whether or not the
-   (opt-in) row-index span is also present — push it to the end explicitly
-   rather than relying on `justify-content: space-between`, which centres a
-   single remaining child at the *start* once the index is off (the default). */
-.dx-repeater-row-header > :last-child {
-    margin-inline-start: auto;
-}
-
-.dx-repeater-row-index {
-    font-weight: 600;
-    color: var(--bs-secondary-color);
-}
-
+/* Cards-layout row styles (.dx-repeater-row*) live in DXRepeaterCards.vue with
+   the markup they target — a scoped rule can't reach another component (#135).
+   Only the table layout is rendered directly here, so only its styles remain. */
 .dx-repeater-table td {
     vertical-align: middle;
 }