@omnitend/dashboard-for-laravel 0.4.14 → 0.5.0

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

@@ -455,128 +455,70 @@
             :title="computedModalTitle"
             :size="editModalSize"
         >
-            <!-- Tabbed view (if editTabs provided) -->
-            <template v-if="editTabs && editTabs.length > 0 && editForm">
-                <DTabs v-model="activeTabIndex">
-                    <DTab
-                        v-for="(tab, index) in visibleTabs"
-                        :key="tab.key"
-                        :title="tab.label || tab.key"
-                        :lazy="tab.lazy"
-                        :active="index === 0"
-                    >
-                        <!-- Custom tab content slot -->
-                        <slot
-                            v-if="$slots[`tab-content(${tab.key})`]"
-                            :name="`tab-content(${tab.key})`"
-                            :item="selectedItem"
-                            :tab="tab"
-                        />
-
-                        <!-- Default: render fields for this tab -->
-                        <div v-else class="p-3">
-                            <!-- Before slot -->
-                            <slot :name="`tab-before(${tab.key})`" :item="selectedItem" :tab="tab" />
-
-                            <!-- Form fields for this tab -->
-                            <template v-for="fieldKey in tab.fieldKeys" :key="fieldKey">
-                                <div v-if="getField(fieldKey).span" class="mb-3">
-                                    <!-- Full-width span field -->
-                                    <slot
-                                        :name="`edit-span(${fieldKey})`"
-                                        :item="selectedItem"
-                                        :value="editForm.data[fieldKey]"
-                                        :update="(v: any) => editForm.data[fieldKey] = v"
-                                        :close="handleEditCancel"
-                                    />
-                                </div>
-                                <!-- Checkbox (no label wrapper needed) -->
-                                <div v-else-if="getField(fieldKey).type === 'checkbox'" class="mb-3">
-                                    <!-- Custom value slot -->
-                                    <slot
-                                        v-if="$slots[`edit-value(${fieldKey})`]"
-                                        :name="`edit-value(${fieldKey})`"
-                                        :item="selectedItem"
-                                        :value="editForm.data[fieldKey]"
-                                        :update="(v: any) => editForm.data[fieldKey] = v"
-                                        :field="getField(fieldKey)"
-                                    />
-                                    <DFormCheckbox
-                                        v-else
-                                        v-model="editForm.data[fieldKey]"
-                                    >
-                                        {{ getField(fieldKey).label || fieldKey }}
-                                    </DFormCheckbox>
-                                </div>
-                                <!-- Other field types with label -->
-                                <DFormGroup
-                                    v-else
-                                    :label="getFieldLabel(fieldKey)"
-                                    class="mb-3"
-                                >
-                                    <!-- Custom value slot -->
-                                    <slot
-                                        v-if="$slots[`edit-value(${fieldKey})`]"
-                                        :name="`edit-value(${fieldKey})`"
-                                        :item="selectedItem"
-                                        :value="editForm.data[fieldKey]"
-                                        :update="(v: any) => editForm.data[fieldKey] = v"
-                                        :field="getField(fieldKey)"
-                                    />
-                                    <DFormTextarea
-                                        v-else-if="getField(fieldKey).type === 'textarea'"
-                                        v-model="editForm.data[fieldKey]"
-                                        :required="getField(fieldKey).required"
-                                        :rows="getField(fieldKey).rows || 3"
-                                        :state="editForm.getState(fieldKey)"
-                                        :disabled="isFieldDisabled(fieldKey)"
-                                        @input="editForm.clearError(fieldKey)"
-                                    />
-                                    <DFormSelect
-                                        v-else-if="getField(fieldKey).type === 'select'"
-                                        v-model="editForm.data[fieldKey]"
-                                        :required="getField(fieldKey).required"
-                                        :options="getField(fieldKey).options"
-                                        :state="editForm.getState(fieldKey)"
-                                        :disabled="isFieldDisabled(fieldKey)"
-                                        @change="editForm.clearError(fieldKey)"
-                                    />
-                                    <DFormInput
-                                        v-else
-                                        v-model="editForm.data[fieldKey]"
-                                        :type="getField(fieldKey).type || 'text'"
-                                        :required="getField(fieldKey).required"
-                                        :step="getField(fieldKey).step"
-                                        :state="editForm.getState(fieldKey)"
-                                        :disabled="isFieldDisabled(fieldKey)"
-                                        @input="editForm.clearError(fieldKey)"
-                                    />
-                                    <!-- Validation error -->
-                                    <DFormInvalidFeedback v-if="editForm.hasError(fieldKey)">
-                                        {{ editForm.getError(fieldKey) }}
-                                    </DFormInvalidFeedback>
-                                    <!-- Hint text -->
-                                    <DFormText v-if="getFieldHint(fieldKey)" class="text-muted">
-                                        {{ getFieldHint(fieldKey) }}
-                                    </DFormText>
-                                </DFormGroup>
-                            </template>
-
-                            <!-- After slot -->
-                            <slot :name="`tab-after(${tab.key})`" :item="selectedItem" :tab="tab" />
-                        </div>
-                    </DTab>
-                </DTabs>
-            </template>
-
-            <!-- Fallback: no tabs, render flat form (current behavior) -->
-            <DXBasicForm
-                v-else-if="editForm"
+            <!-- Edit/create form (tabbed when editTabs provided, flat otherwise) -->
+            <DXForm
+                v-if="editForm"
+                v-model:active-tab="activeTabIndex"
                 :form="editForm"
-                :fields="resolvedEditFields"
+                :fields="editFields"
+                :tabs="editTabs"
+                :context="selectedItem ?? undefined"
                 :show-submit="false"
                 @submit="handleEditSave"
-            />
+            >
+                <!-- Forward DXTable's edit-value(key) → DXForm value(key) -->
+                <template
+                    v-for="key in editValueSlotKeys"
+                    :key="`ev-${key}`"
+                    #[`value(${key})`]="sp"
+                >
+                    <slot
+                        :name="`edit-value(${key})`"
+                        :item="selectedItem"
+                        :value="sp.value"
+                        :update="sp.update"
+                        :field="sp.field"
+                    />
+                </template>
+
+                <!-- Forward edit-span(key) → span(key) -->
+                <template
+                    v-for="key in editSpanSlotKeys"
+                    :key="`es-${key}`"
+                    #[`span(${key})`]="sp"
+                >
+                    <slot
+                        :name="`edit-span(${key})`"
+                        :item="selectedItem"
+                        :value="sp.value"
+                        :update="sp.update"
+                        :close="handleEditCancel"
+                    />
+                </template>
+
+                <!-- Forward tab-content / tab-before / tab-after slots -->
+                <template
+                    v-for="key in tabContentSlotKeys"
+                    :key="`tc-${key}`"
+                    #[`tab-content(${key})`]="sp"
+                >
+                    <slot :name="`tab-content(${key})`" :item="selectedItem" :tab="sp.tab" />
+                </template>
+                <template
+                    v-for="key in tabBeforeSlotKeys"
+                    :key="`tb-${key}`"
+                    #[`tab-before(${key})`]="sp"
+                >
+                    <slot :name="`tab-before(${key})`" :item="selectedItem" :tab="sp.tab" />
+                </template>
+                <template
+                    v-for="key in tabAfterSlotKeys"
+                    :key="`taf-${key}`"
+                    #[`tab-after(${key})`]="sp"
+                >
+                    <slot :name="`tab-after(${key})`" :item="selectedItem" :tab="sp.tab" />
+                </template>
+            </DXForm>
 
             <template #footer>
                 <div class="d-flex justify-content-between w-100">
@@ -614,7 +556,7 @@
 </template>
 
 <script setup lang="ts" generic="T = any">
-import { computed, ref, watch } from "vue";
+import { computed, ref, watch, useSlots } from "vue";
 import { router } from "@inertiajs/vue3";
 import axios from "axios";
 import pluralize from "pluralize";
@@ -630,14 +572,7 @@ import DFormInput from "../base/DFormInput.vue";
 import DFormSelect from "../base/DFormSelect.vue";
 import DModal from "../base/DModal.vue";
 import DButton from "../base/DButton.vue";
-import DTabs from "../base/DTabs.vue";
-import DTab from "../base/DTab.vue";
-import DFormGroup from "../base/DFormGroup.vue";
-import DFormTextarea from "../base/DFormTextarea.vue";
-import DFormCheckbox from "../base/DFormCheckbox.vue";
-import DFormInvalidFeedback from "../base/DFormInvalidFeedback.vue";
-import DFormText from "../base/DFormText.vue";
-import DXBasicForm from "./DXBasicForm.vue";
+import DXForm from "./DXForm.vue";
 export type FilterType = 'text' | 'select' | 'number' | 'date' | false;
 
 export interface FilterOption {
@@ -1455,67 +1390,35 @@ try {
     createToast = undefined;
 }
 
-// Computed: Visible tabs (respects when condition)
-const visibleTabs = computed(() => {
-    if (!props.editTabs || props.editTabs.length === 0) return [];
-
-    return props.editTabs.filter(tab => {
-        if (tab.when === undefined) return true;
-        return typeof tab.when === 'function'
-            ? tab.when(selectedItem.value)
-            : tab.when;
-    });
-});
-
-// Helper: Get field by key
-const getField = (key: string) => {
-    return props.editFields?.find(f => f.key === key) || { key };
-};
-
-// Helper: Get field label (supports function for dynamic labels)
-const getFieldLabel = (key: string): string => {
-    const field = getField(key);
-    if (typeof field.label === 'function') {
-        return field.label(selectedItem.value);
-    }
-    return field.label || key;
-};
-
-// Helper: Get field hint (supports function for dynamic hints)
-const getFieldHint = (key: string): string | undefined => {
-    const field = getField(key);
-    if (typeof field.hint === 'function') {
-        return field.hint(selectedItem.value);
-    }
-    return field.hint;
-};
-
-// Helper: Check if field is disabled (supports disabledWhen function)
-const isFieldDisabled = (key: string): boolean => {
-    const field = getField(key);
-    if (typeof field.disabledWhen === 'function') {
-        return field.disabledWhen(selectedItem.value);
-    }
-    return field.disabled || false;
-};
-
-// Computed: Resolve edit fields with dynamic labels/hints for DXBasicForm
-const resolvedEditFields = computed(() => {
-    if (!props.editFields) return [];
-
-    return props.editFields.map(field => ({
-        ...field,
-        label: typeof field.label === 'function'
-            ? field.label(selectedItem.value)
-            : field.label,
-        hint: typeof field.hint === 'function'
-            ? field.hint(selectedItem.value)
-            : field.hint,
-        disabled: typeof field.disabledWhen === 'function'
-            ? field.disabledWhen(selectedItem.value)
-            : field.disabled,
-    }));
-});
+// The edit/create form rendering is delegated to DXForm, which
+// owns field/tab visibility, dynamic labels/hints, conditional fields,
+// and auto-switching to the first tab with a validation error.
+
+// Forward only the keyed edit slots the consumer actually provided, so
+// DXForm doesn't mistake an always-present (but empty) wrapper for
+// a real custom-value override.
+const tableSlots = useSlots();
+const editFieldKeys = computed<string[]>(() =>
+    (props.editFields ?? []).map((field: any) => field.key),
+);
+const tabKeys = computed<string[]>(() =>
+    (props.editTabs ?? []).map((tab) => tab.key),
+);
+const editValueSlotKeys = computed(() =>
+    editFieldKeys.value.filter((key) => !!tableSlots[`edit-value(${key})`]),
+);
+const editSpanSlotKeys = computed(() =>
+    editFieldKeys.value.filter((key) => !!tableSlots[`edit-span(${key})`]),
+);
+const tabContentSlotKeys = computed(() =>
+    tabKeys.value.filter((key) => !!tableSlots[`tab-content(${key})`]),
+);
+const tabBeforeSlotKeys = computed(() =>
+    tabKeys.value.filter((key) => !!tableSlots[`tab-before(${key})`]),
+);
+const tabAfterSlotKeys = computed(() =>
+    tabKeys.value.filter((key) => !!tableSlots[`tab-after(${key})`]),
+);
 
 // Computed: Singular and plural item names
 const singularItemName = computed(() => props.itemName);
@@ -1653,16 +1556,8 @@ const handleEditSave = async () => {
                         modelValue: 5000,
                     });
 
-                    if (props.editTabs && props.editTabs.length > 0) {
-                        const errorKeys = Object.keys(errors);
-                        const tabIndex = visibleTabs.value.findIndex(tab =>
-                            tab.fieldKeys.some(key => errorKeys.includes(key))
-                        );
-                        if (tabIndex !== -1) {
-                            activeTabIndex.value = tabIndex;
-                        }
-                    }
-
+                    // DXForm switches to the first errored tab via its
+                    // own watcher on editForm.errors.
                     emit('createError', errors);
                 }
             });
@@ -1716,17 +1611,8 @@ const handleEditSave = async () => {
                         modelValue: 5000, // Auto-dismiss after 5 seconds
                     });
 
-                    // Switch to tab containing error field
-                    if (props.editTabs && props.editTabs.length > 0) {
-                        const errorKeys = Object.keys(errors);
-                        const tabIndex = visibleTabs.value.findIndex(tab =>
-                            tab.fieldKeys.some(key => errorKeys.includes(key))
-                        );
-                        if (tabIndex !== -1) {
-                            activeTabIndex.value = tabIndex;
-                        }
-                    }
-
+                    // DXForm switches to the first errored tab via its
+                    // own watcher on editForm.errors.
                     emit('editError', selectedItem.value as T, errors);
                 }
             });

package/resources/js/composables/defineForm.ts

@@ -32,7 +32,14 @@ function getDefaultValueForType(type: FieldType): any {
         case "checkbox":
             return false;
         case "number":
+        case "currency":
+        case "percentage":
             return 0;
+        case "repeater":
+            return [];
+        case "image":
+        case "file":
+            return null;
         case "select":
         case "radio":
             return "";

package/resources/js/index.ts

@@ -6,8 +6,15 @@ export * from 'bootstrap-vue-next';
 
 // Extended components (custom functionality beyond Bootstrap Vue Next)
 export { default as DXDashboard } from "./components/extended/DXDashboard.vue";
-export { default as DXBasicForm } from "./components/extended/DXBasicForm.vue";
 export { default as DXForm } from "./components/extended/DXForm.vue";
+export { default as DXField } from "./components/extended/DXField.vue";
+export { default as DXRepeater } from "./components/extended/DXRepeater.vue";
+/**
+ * @deprecated Use `DXForm`. `DXBasicForm` is a thin wrapper around `DXForm`
+ * (a flat form is just `DXForm` without a `tabs` prop) that logs a one-time
+ * deprecation warning. It will be removed in a future major version.
+ */
+export { default as DXBasicForm } from "./components/extended/DXBasicForm.vue";
 export { default as DXTable } from "./components/extended/DXTable.vue";
 export { default as DXDashboardSidebar } from "./components/extended/DXDashboardSidebar.vue";
 export { default as DXDashboardNavbar } from "./components/extended/DXDashboardNavbar.vue";
@@ -37,6 +44,7 @@ export { default as DFormGroup } from "./components/base/DFormGroup.vue";
 export { default as DFormInput } from "./components/base/DFormInput.vue";
 export { default as DFormInvalidFeedback } from "./components/base/DFormInvalidFeedback.vue";
 export { default as DFormRadio } from "./components/base/DFormRadio.vue";
+export { default as DFormRadioGroup } from "./components/base/DFormRadioGroup.vue";
 export { default as DFormSelect } from "./components/base/DFormSelect.vue";
 export { default as DFormSpinbutton } from "./components/base/DFormSpinbutton.vue";
 export { default as DFormTags } from "./components/base/DFormTags.vue";
@@ -82,6 +90,9 @@ export type {
     FieldType,
     FieldOption,
     FieldDefinition,
+    FormTab,
+    MaybeFn,
+    OptionsLoader,
 } from "./types";
 
 export type {

package/resources/js/types/index.ts

@@ -1,5 +1,16 @@
+import type { Component } from "vue";
+
 /**
- * Field types supported by OForm
+ * Field types supported by DXForm (and DXField, its per-field renderer).
+ *
+ * Text-like types render an `<input>`; the remainder render purpose-built
+ * controls:
+ * - `currency` / `percentage` — numeric input wrapped in an input-group
+ *   with a symbol affix.
+ * - `datetime` — alias for the native `datetime-local` control.
+ * - `image` / `file` — file input (`image` additionally shows a preview).
+ * - `component` — escape hatch that renders `field.component`.
+ * - `repeater` — nested, repeatable sub-form driven by `field.fields`.
  */
 export type FieldType =
     | "text"
@@ -10,11 +21,25 @@ export type FieldType =
     | "tel"
     | "date"
     | "datetime-local"
+    | "datetime"
     | "time"
+    | "currency"
+    | "percentage"
     | "textarea"
     | "select"
     | "checkbox"
-    | "radio";
+    | "radio"
+    | "image"
+    | "file"
+    | "component"
+    | "repeater";
+
+/**
+ * A value that may be supplied directly or computed from the live form
+ * model. Predicates receive the current model so fields can react to
+ * other fields (cross-field reactivity).
+ */
+export type MaybeFn<TValue> = TValue | ((model: any) => TValue);
 
 /**
  * Option for select or radio fields
@@ -26,7 +51,18 @@ export interface FieldOption extends Record<string, unknown> {
 }
 
 /**
- * Field definition for OForm
+ * Asynchronously resolves the options for a select/radio field from the
+ * current model (e.g. fetch a dependent list). Resolved on mount, and
+ * again on model change when `reloadOptionsOnChange` is set.
+ */
+export type OptionsLoader = (model: any) => Promise<FieldOption[]>;
+
+/**
+ * Field definition shared by every form renderer.
+ *
+ * DXForm and DXTable's edit modal honour `hint`, `span`, `when`,
+ * `readonly`, `disabledWhen`, function-valued `label`/`hint`, async
+ * options, the `component` escape hatch and nested `repeater` fields.
  */
 export interface FieldDefinition {
     /** Field key (must match form data key) */
@@ -35,8 +71,8 @@ export interface FieldDefinition {
     /** Field type */
     type: FieldType;
 
-    /** Field label (optional) */
-    label?: string;
+    /** Field label — string or a function of the form model */
+    label?: MaybeFn<string>;
 
     /** Placeholder text (optional) */
     placeholder?: string;
@@ -47,12 +83,40 @@ export interface FieldDefinition {
     /** Options for select or radio fields */
     options?: FieldOption[];
 
+    /**
+     * Asynchronously load options for select/radio fields. Takes
+     * precedence over `options` once resolved.
+     */
+    optionsLoader?: OptionsLoader;
+
+    /** Re-run `optionsLoader` whenever the form model changes. */
+    reloadOptionsOnChange?: boolean;
+
     /** Number of rows for textarea (default: 3) */
     rows?: number;
 
-    /** Help text displayed below field */
+    /** Step for numeric/currency/percentage inputs */
+    step?: number | string;
+
+    /** Min/max for numeric inputs */
+    min?: number | string;
+    max?: number | string;
+
+    /** Symbol shown for `currency` fields (default: the locale's, "£"). */
+    currencySymbol?: string;
+
+    /** `accept` attribute for `image`/`file` inputs (e.g. "image/*"). */
+    accept?: string;
+
+    /** Help text displayed below the field (always visible). */
     help?: string;
 
+    /**
+     * Hint text displayed below the field. Unlike `help`, may be a
+     * function of the model for dynamic hints.
+     */
+    hint?: MaybeFn<string>;
+
     /** CSS class for the form group */
     class?: string;
 
@@ -60,9 +124,82 @@ export interface FieldDefinition {
     inputProps?: Record<string, any>;
 
     /**
-     * Conditionally show or hide this field. When omitted, the field
-     * is always visible. The function is re-evaluated reactively, so
-     * it can depend on form state or other reactive sources.
+     * Render the field full-width with no label wrapper, delegating its
+     * content to the `#span(<key>)` slot. Useful for custom blocks.
+     */
+    span?: boolean;
+
+    /**
+     * Component rendered for `type: "component"` fields. Receives
+     * `modelValue`, `field`, `model` props and emits `update:modelValue`.
+     */
+    component?: Component;
+
+    /** Sub-field definitions for `type: "repeater"` fields. */
+    fields?: FieldDefinition[];
+
+    /**
+     * Default/initial value. Used by `defineForm` to seed form data and by
+     * repeaters to seed a freshly-added row's sub-fields. (`defineForm`'s
+     * `FormFieldDefinition` re-declares this as required for inference.)
+     */
+    default?: any;
+
+    /** Label for a repeater's "add row" button (default: "Add"). */
+    addLabel?: string;
+
+    /** Minimum / maximum number of repeater rows. */
+    minItems?: number;
+    maxItems?: number;
+
+    /** Disable the field (static or computed from the model). */
+    disabled?: MaybeFn<boolean>;
+
+    /**
+     * Disable the field based on the model. Retained for backwards
+     * compatibility with DXTable; prefer `disabled` with a function.
+     */
+    disabledWhen?: (model: any) => boolean;
+
+    /**
+     * Render the field read-only (static or computed). For controls
+     * without a native readonly state (select/checkbox/radio) this is
+     * applied as `disabled`.
+     */
+    readonly?: MaybeFn<boolean>;
+
+    /**
+     * Conditionally show or hide this field. When omitted the field is
+     * always visible. Boolean or a function of the form model; evaluated
+     * reactively for cross-field conditional fields.
+     */
+    when?: MaybeFn<boolean>;
+
+    /**
+     * Legacy no-argument visibility predicate. Retained for backwards
+     * compatibility; prefer `when`. When both are present, a field is
+     * visible only if both pass.
      */
     show?: () => boolean;
 }
+
+/**
+ * A tab in a tabbed form. Groups a subset of fields and can be shown
+ * conditionally or lazily mounted.
+ */
+export interface FormTab {
+    /** Unique key for this tab */
+    key: string;
+
+    /** Display label (optional, defaults to the key) */
+    label?: string;
+
+    /** Field keys (from the form's fields) to render in this tab */
+    fieldKeys: string[];
+
+    /** Conditional display — boolean or a function of the form model */
+    when?: MaybeFn<boolean>;
+
+    /** Lazily mount tab content until first activated */
+    lazy?: boolean;
+}

package/resources/js/utils/objectPath.ts

@@ -0,0 +1,59 @@
+/**
+ * Minimal dot-path get/set helpers used for nested form binding
+ * (e.g. repeater rows where a field value lives at `lines.0.price`).
+ *
+ * Paths are dot-separated; numeric segments index into arrays. Setting
+ * creates intermediate objects/arrays as needed so a fresh repeater row
+ * can be populated without pre-seeding the whole shape.
+ */
+
+type AnyRecord = Record<string, any>;
+
+/** Segments that could pollute Object.prototype if written through. */
+const BLOCKED_SEGMENTS = new Set(["__proto__", "prototype", "constructor"]);
+
+/** Split a dot path into segments, ignoring empty segments. */
+function splitPath(path: string): string[] {
+    return path.split(".").filter((segment) => segment.length > 0);
+}
+
+/** Read the value at `path` within `target`, or `undefined` if absent. */
+export function getByPath(target: AnyRecord, path: string): any {
+    const segments = splitPath(path);
+    let current: any = target;
+    for (const segment of segments) {
+        if (current === null || current === undefined) return undefined;
+        current = current[segment];
+    }
+    return current;
+}
+
+/**
+ * Write `value` at `path` within `target`, creating intermediate
+ * containers. A numeric next-segment creates an array; otherwise an
+ * object. Mutates `target` in place (form.data is reactive).
+ */
+export function setByPath(target: AnyRecord, path: string, value: any): void {
+    const segments = splitPath(path);
+    if (segments.length === 0) return;
+    // Never write through prototype-polluting segments.
+    if (segments.some((segment) => BLOCKED_SEGMENTS.has(segment))) return;
+
+    let current: any = target;
+    for (let index = 0; index < segments.length - 1; index += 1) {
+        const segment = segments[index];
+        const nextSegment = segments[index + 1];
+        const nextIsIndex = /^\d+$/.test(nextSegment);
+
+        if (
+            current[segment] === null ||
+            current[segment] === undefined ||
+            typeof current[segment] !== "object"
+        ) {
+            current[segment] = nextIsIndex ? [] : {};
+        }
+        current = current[segment];
+    }
+
+    current[segments[segments.length - 1]] = value;
+}