@omnitend/dashboard-for-laravel 0.4.13 → 0.5.0

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

@@ -1,26 +1,137 @@
+<!--
+  DXForm — the canonical form renderer.
+
+  Driven by field definitions, with optional tabs. Renders every field
+  through DXField (the single field engine), so flat and tabbed forms share
+  one code path. Supports conditional fields/tabs, per-field slot overrides,
+  async options, nested repeaters, and auto-switching to the first tab
+  containing a validation error.
+
+  Accepts either a `useForm` return or a `defineForm` return; with the latter
+  `fields` may be omitted. Works with the fetch-based `useForm` composable
+  (no Inertia required).
+-->
 <template>
-    <OBasicForm
-        :form="form.form"
-        :fields="form.fields"
-        :submit-text="submitText"
-        :submit-loading-text="submitLoadingText"
-        :show-submit="showSubmit"
-        @submit="emit('submit')"
-    >
-        <!-- Pass through all slots -->
-        <template v-for="(_, name) in $slots" #[name]="slotProps">
-            <slot :name="name" v-bind="slotProps" />
+    <BForm @submit.prevent="handleSubmit">
+        <!-- Form-level error message -->
+        <DAlert
+            v-if="resolvedForm.shouldShowMessage"
+            :model-value="resolvedForm.shouldShowMessage"
+            variant="danger"
+            class="mb-3"
+        >
+            {{ resolvedForm.message }}
+        </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="tab.label || tab.key"
+                :lazy="tab.lazy"
+                :active="index === 0"
+            >
+                <!-- Replace the entire tab body -->
+                <slot
+                    v-if="$slots[`tab-content(${tab.key})`]"
+                    :name="`tab-content(${tab.key})`"
+                    :tab="tab"
+                    :model="model"
+                />
+
+                <div v-else class="pt-3">
+                    <slot :name="`tab-before(${tab.key})`" :tab="tab" :model="model" />
+
+                    <DXField
+                        v-for="field in visibleFieldsFor(tab)"
+                        :key="field.key"
+                        :field="field"
+                        :form="resolvedForm"
+                        :model="model"
+                    >
+                        <template
+                            v-for="(slotName, target) in fieldSlotMap(field.key)"
+                            :key="target"
+                            #[target]="slotProps"
+                        >
+                            <slot :name="slotName" v-bind="slotProps" />
+                        </template>
+                    </DXField>
+
+                    <slot :name="`tab-after(${tab.key})`" :tab="tab" :model="model" />
+                </div>
+            </DTab>
+        </DTabs>
+
+        <!-- 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"
+                >
+                    <slot :name="slotName" v-bind="slotProps" />
+                </template>
+            </DXField>
         </template>
-    </OBasicForm>
+
+        <!-- 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 name="footer" :form="resolvedForm" />
+    </BForm>
 </template>
 
 <script setup lang="ts">
-import OBasicForm from "./DXBasicForm.vue";
+import { computed, watch } from "vue";
+import { BForm } from "bootstrap-vue-next";
+import DAlert from "../base/DAlert.vue";
+import DButton from "../base/DButton.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";
 
 interface Props {
-    /** Form object from defineForm */
-    form: DefineFormReturn<any>;
+    /**
+     * Form instance — either a raw `useForm` return or a `defineForm`
+     * return (`{ form, fields }`). With the latter, `fields` may be
+     * omitted and is taken from the form object.
+     */
+    form: UseFormReturn<any> | DefineFormReturn<any>;
+
+    /** Field definitions (optional when `form` is a defineForm return). */
+    fields?: FieldDefinition[];
+
+    /** Tab definitions. When omitted, a flat single-column form renders. */
+    tabs?: FormTab[];
+
+    /**
+     * Extra context merged under the live form data when evaluating
+     * predicates (label/hint/when/disabled). E.g. a table passes the
+     * original row so predicates can read non-edited columns.
+     */
+    context?: Record<string, any>;
 
     /** Submit button text */
     submitText?: string;
@@ -28,17 +139,171 @@ interface Props {
     /** Submit button loading text */
     submitLoadingText?: string;
 
-    /** Show submit button */
+    /** Show the submit button */
     showSubmit?: boolean;
+
+    /** Auto-switch to the first tab containing a validation error. */
+    autoErrorTab?: boolean;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
     submitText: "Submit",
     submitLoadingText: "Submitting...",
     showSubmit: true,
+    autoErrorTab: true,
 });
 
 const emit = defineEmits<{
     submit: [];
 }>();
+
+const slots = defineSlots<Record<string, (props: any) => any>>();
+
+/** v-model for the active tab index. */
+const activeTab = defineModel<number>("activeTab", { default: 0 });
+
+// ————————————————— resolve form / fields (accept useForm or defineForm)
+
+function isDefineForm(
+    value: Props["form"],
+): value is DefineFormReturn<any> {
+    return (
+        !!value &&
+        typeof value === "object" &&
+        "form" in value &&
+        "fields" in value &&
+        !("data" in value)
+    );
+}
+
+const resolvedForm = computed<UseFormReturn<any>>(() =>
+    isDefineForm(props.form) ? props.form.form : props.form,
+);
+
+const resolvedFields = computed<FieldDefinition[]>(() => {
+    if (props.fields) return props.fields;
+    if (isDefineForm(props.form)) return props.form.fields;
+    return [];
+});
+
+const fieldByKey = computed<Record<string, FieldDefinition>>(() => {
+    const map: Record<string, FieldDefinition> = {};
+    for (const field of resolvedFields.value) map[field.key] = field;
+    return map;
+});
+
+// ————————————————— model for predicates (live form data + context)
+
+const model = computed(() => ({
+    ...(props.context ?? {}),
+    ...resolvedForm.value.data,
+}));
+
+function resolvePredicate(
+    when: MaybeFn<boolean> | undefined,
+    fallback: boolean,
+): boolean {
+    if (when === undefined) return fallback;
+    return typeof when === "function" ? when(model.value) : when;
+}
+
+function isFieldVisible(field: FieldDefinition): boolean {
+    const whenOk = resolvePredicate(field.when, true);
+    const showOk = field.show ? field.show() : true;
+    return whenOk && showOk;
+}
+
+// ————————————————— tabs
+
+const hasTabs = computed(
+    () => !!props.tabs && props.tabs.length > 0,
+);
+
+function visibleFieldsFor(tab: FormTab): FieldDefinition[] {
+    return tab.fieldKeys
+        .map((key) => fieldByKey.value[key])
+        .filter((field): field is FieldDefinition => !!field)
+        .filter(isFieldVisible);
+}
+
+/** A tab with a custom body/before/after slot has content even with no fields. */
+function hasTabSlot(key: string): boolean {
+    return !!(
+        slots[`tab-content(${key})`] ||
+        slots[`tab-before(${key})`] ||
+        slots[`tab-after(${key})`]
+    );
+}
+
+const visibleTabs = computed<FormTab[]>(() => {
+    if (!props.tabs) return [];
+    return props.tabs.filter((tab) => {
+        if (!resolvePredicate(tab.when, true)) return false;
+        // Hide tabs with no visible fields, unless the consumer supplies a
+        // custom tab-content/before/after slot for that tab.
+        return visibleFieldsFor(tab).length > 0 || hasTabSlot(tab.key);
+    });
+});
+
+const visibleFlatFields = computed<FieldDefinition[]>(() =>
+    resolvedFields.value.filter(isFieldVisible),
+);
+
+// ————————————————— per-field slot forwarding
+
+/** Map a DXField slot name to the parent's keyed slot, when present. */
+function fieldSlotMap(key: string): Record<string, string> {
+    const map: Record<string, string> = {};
+    const candidates: Array<[string, string]> = [
+        ["value", `value(${key})`],
+        ["span", `span(${key})`],
+        ["info", `info(${key})`],
+        ["hint", `hint(${key})`],
+        ["repeater-row", `repeater-row(${key})`],
+    ];
+    for (const [target, source] of candidates) {
+        if (slots[source]) map[target] = source;
+    }
+    return map;
+}
+
+// ————————————————— auto-switch to the first error tab
+
+/** Keys that currently carry at least one validation error. */
+const erroredKeys = computed<string[]>(() =>
+    Object.keys(resolvedForm.value.errors).filter(
+        (key) => (resolvedForm.value.errors[key]?.length ?? 0) > 0,
+    ),
+);
+
+function goToErrorTab(): void {
+    if (!hasTabs.value || erroredKeys.value.length === 0) return;
+    const tabIndex = visibleTabs.value.findIndex((tab) =>
+        tab.fieldKeys.some((key) =>
+            erroredKeys.value.some(
+                // Match exact keys and nested (repeater) error keys.
+                (errorKey) => errorKey === key || errorKey.startsWith(`${key}.`),
+            ),
+        ),
+    );
+    if (tabIndex !== -1) activeTab.value = tabIndex;
+}
+
+// Watch a primitive derived from the error keys so the effect reliably
+// re-runs when errors are set (deep-watching the stable reactive object
+// reference does not fire on key additions). `immediate` handles errors
+// already present on the form before mount.
+watch(
+    () => erroredKeys.value.join("|"),
+    (joined) => {
+        if (props.autoErrorTab && joined) goToErrorTab();
+    },
+    { immediate: true },
+);
+
+function handleSubmit(): void {
+    emit("submit");
+}
+
+defineExpose({ goToErrorTab });
 </script>

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

@@ -0,0 +1,216 @@
+<template>
+    <div class="dx-repeater">
+        <div
+            v-for="(row, index) in rows"
+            :key="rowKey(index)"
+            class="dx-repeater-row"
+        >
+            <!-- Custom row layout escape hatch -->
+            <slot
+                v-if="$slots.row"
+                name="row"
+                :row="row"
+                :index="index"
+                :fields="subFields"
+                :remove="() => removeRow(index)"
+                :path="rowPath(index)"
+            />
+
+            <!-- Default row: stack each sub-field -->
+            <template v-else>
+                <div class="dx-repeater-row-header">
+                    <span class="dx-repeater-row-index">{{ index + 1 }}</span>
+                    <DButton
+                        variant="outline-danger"
+                        size="sm"
+                        :disabled="rows.length <= minItems"
+                        @click="removeRow(index)"
+                    >
+                        Remove
+                    </DButton>
+                </div>
+                <DXField
+                    v-for="subField in subFields"
+                    :key="subField.key"
+                    :field="subField"
+                    :form="form"
+                    :model="row"
+                    :key-path="`${rowPath(index)}.${subField.key}`"
+                    :error-key="`${rowPath(index)}.${subField.key}`"
+                />
+            </template>
+        </div>
+
+        <DButton
+            variant="outline-primary"
+            size="sm"
+            :disabled="maxItems !== undefined && rows.length >= maxItems"
+            @click="addRow"
+        >
+            {{ field.addLabel || "Add" }}
+        </DButton>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import DButton from "../base/DButton.vue";
+import DXField from "./DXField.vue";
+import type { UseFormReturn } from "../../composables/useForm";
+import type { FieldDefinition, FieldType } from "../../types";
+import { getByPath, setByPath } from "../../utils/objectPath";
+
+interface Props {
+    /** Form instance owning the repeater array */
+    form: UseFormReturn<any>;
+
+    /** The repeater field definition (provides sub-fields, limits, labels) */
+    field: FieldDefinition;
+
+    /** Dot path into form.data for the array (defaults to field.key) */
+    keyPath?: string;
+
+    /** Model passed to predicates from the parent context */
+    model?: any;
+}
+
+const props = defineProps<Props>();
+
+// The array key is a dot PATH: rows nest into it (`lines.0.price`), and that
+// path is also the validation-error key Laravel returns. So a repeater (or
+// nested sub-field) key is a path segment, not a literal — avoid literal dots
+// in repeater/sub-field keys. (Leaf DXField keys, by contrast, are literal.)
+const arrayPath = computed(() => props.keyPath ?? props.field.key);
+const subFields = computed<FieldDefinition[]>(() => props.field.fields ?? []);
+const minItems = computed(() => props.field.minItems ?? 0);
+const maxItems = computed(() => props.field.maxItems);
+
+/**
+ * The live rows array. Ensures form.data holds an array at the path so
+ * push/splice are reactive even when the form was seeded without one.
+ */
+const rows = computed<any[]>(() => {
+    const existing = getByPath(props.form.data, arrayPath.value);
+    if (Array.isArray(existing)) return existing;
+    return [];
+});
+
+const rowPath = (index: number): string => `${arrayPath.value}.${index}`;
+
+// Stable v-for keys tied to row object identity, so removing a middle row
+// preserves each surviving row's DOM/component state (focus, file inputs)
+// instead of shifting it down with the index. A WeakMap keeps the key off
+// form.data, so it never leaks into the submitted payload. A persisted row
+// id (when present) is preferred as it survives reloads.
+const generatedKeys = new WeakMap<object, number>();
+let nextGeneratedKey = 0;
+
+const rowKey = (index: number): string | number => {
+    const row = rows.value[index];
+    if (row && typeof row === "object") {
+        if (row.id !== undefined && row.id !== null) return row.id;
+        let key = generatedKeys.get(row);
+        if (key === undefined) {
+            key = nextGeneratedKey;
+            nextGeneratedKey += 1;
+            generatedKeys.set(row, key);
+        }
+        return `gen-${key}`;
+    }
+    return index;
+};
+
+/** Default value for a freshly added row's sub-field. */
+function defaultForType(type: FieldType): any {
+    switch (type) {
+        case "checkbox":
+            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));
+}
+
+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);
+    }
+    return row;
+}
+
+/**
+ * Clear any validation errors keyed under this array (e.g. `lines.1.price`).
+ * Row add/remove shifts indices, so stale per-index errors would otherwise
+ * attach to the wrong row. They're re-populated on the next submit.
+ */
+function clearArrayErrors(): void {
+    const prefix = `${arrayPath.value}.`;
+    for (const key of Object.keys(props.form.errors)) {
+        if (key === arrayPath.value || key.startsWith(prefix)) {
+            props.form.clearError(key);
+        }
+    }
+}
+
+function addRow(): void {
+    if (maxItems.value !== undefined && rows.value.length >= maxItems.value) {
+        return;
+    }
+    // Ensure the array exists on form.data before pushing (path may be
+    // nested for repeaters inside repeater rows).
+    const existing = getByPath(props.form.data, arrayPath.value);
+    if (!Array.isArray(existing)) {
+        setByPath(props.form.data, arrayPath.value, []);
+    }
+    getByPath(props.form.data, arrayPath.value).push(buildRow());
+    clearArrayErrors();
+}
+
+function removeRow(index: number): void {
+    if (rows.value.length <= minItems.value) return;
+    getByPath(props.form.data, arrayPath.value).splice(index, 1);
+    clearArrayErrors();
+}
+</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;
+    justify-content: space-between;
+    margin-bottom: 0.75rem;
+}
+
+.dx-repeater-row-index {
+    font-weight: 600;
+    color: var(--bs-secondary-color);
+}
+</style>