@omnitend/dashboard-for-laravel 0.4.14 → 0.5.0

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

@@ -1,189 +1,40 @@
-<template>
-    <BForm @submit.prevent="handleSubmit">
-        <!-- Form-level error message -->
-        <DAlert
-            v-if="form.shouldShowMessage"
-            :model-value="form.shouldShowMessage"
-            variant="danger"
-            class="mb-3"
-        >
-            {{ form.message }}
-        </DAlert>
-
-        <!-- Render each field -->
-        <template v-for="field in visibleFields" :key="field.key">
-            <!-- Custom slot for this field -->
-            <slot :name="`field-${field.key}`" :field="field" :form="form">
-                <!-- Default field rendering -->
-                <DFormGroup
-                    :label="field.label"
-                    :label-for="field.key"
-                    :class="field.class || 'mb-3'"
-                >
-                    <!-- Text-based inputs -->
-                    <DFormInput
-                        v-if="isTextInput(field.type)"
-                        :id="field.key"
-                        v-model="form.data[field.key]"
-                        :type="field.type"
-                        :required="field.required"
-                        :placeholder="field.placeholder"
-                        :state="form.getState(field.key)"
-                        v-bind="field.inputProps"
-                        @input="form.clearError(field.key)"
-                    />
-
-                    <!-- Textarea -->
-                    <DFormTextarea
-                        v-else-if="field.type === 'textarea'"
-                        :id="field.key"
-                        v-model="form.data[field.key]"
-                        :required="field.required"
-                        :placeholder="field.placeholder"
-                        :rows="field.rows || 3"
-                        :state="form.getState(field.key)"
-                        v-bind="field.inputProps"
-                        @input="form.clearError(field.key)"
-                    />
-
-                    <!-- Select -->
-                    <DFormSelect
-                        v-else-if="field.type === 'select'"
-                        :id="field.key"
-                        v-model="form.data[field.key]"
-                        :required="field.required"
-                        :options="field.options"
-                        :state="form.getState(field.key)"
-                        v-bind="field.inputProps"
-                        @change="form.clearError(field.key)"
-                    />
-
-                    <!-- Checkbox -->
-                    <DFormCheckbox
-                        v-else-if="field.type === 'checkbox'"
-                        :id="field.key"
-                        v-model="form.data[field.key]"
-                        v-bind="field.inputProps"
-                    >
-                        {{ field.label }}
-                    </DFormCheckbox>
-
-                    <!-- Radio group -->
-                    <BFormRadioGroup
-                        v-else-if="field.type === 'radio'"
-                        :id="field.key"
-                        v-model="form.data[field.key]"
-                        :options="field.options"
-                        :required="field.required"
-                        :state="form.getState(field.key)"
-                        v-bind="field.inputProps"
-                        @change="form.clearError(field.key)"
-                    />
-
-                    <!-- Validation error -->
-                    <DFormInvalidFeedback v-if="form.hasError(field.key)">
-                        {{ form.getError(field.key) }}
-                    </DFormInvalidFeedback>
-
-                    <!-- Help text -->
-                    <DFormText v-if="field.help">
-                        {{ field.help }}
-                    </DFormText>
-                </DFormGroup>
-            </slot>
-        </template>
-
-        <!-- Submit button -->
-        <DButton
-            v-if="showSubmit"
-            type="submit"
-            variant="primary"
-            :disabled="form.processing"
-            class="w-100"
-        >
-            <span v-if="form.processing">{{ submitLoadingText }}</span>
-            <span v-else>{{ submitText }}</span>
-        </DButton>
-
-        <!-- Footer slot -->
-        <slot name="footer"></slot>
-    </BForm>
-</template>
+<!--
+  DXBasicForm — deprecated alias of DXForm.
+
+  A flat form is just DXForm without a `tabs` prop. This wrapper forwards
+  everything to DXForm and logs a one-time deprecation warning so existing
+  callers keep working while they migrate. Remove in a future major.
+-->
+<script lang="ts">
+// Module scope: warn at most once per session, not once per instance.
+let hasWarned = false;
+</script>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import { BForm, BFormRadioGroup } from "bootstrap-vue-next";
-import DAlert from "../base/DAlert.vue";
-import DFormGroup from "../base/DFormGroup.vue";
-import DFormInput from "../base/DFormInput.vue";
-import DFormTextarea from "../base/DFormTextarea.vue";
-import DFormSelect from "../base/DFormSelect.vue";
-import DFormCheckbox from "../base/DFormCheckbox.vue";
-import DFormInvalidFeedback from "../base/DFormInvalidFeedback.vue";
-import DFormText from "../base/DFormText.vue";
-import DButton from "../base/DButton.vue";
-import type { UseFormReturn } from "../../composables/useForm";
-import type { FieldDefinition, FieldType } from "../../types";
-
-interface Props {
-    /** Form instance from useForm composable */
-    form: UseFormReturn<any>;
-
-    /** Field definitions */
-    fields: FieldDefinition[];
-
-    /** Submit button text */
-    submitText?: string;
-
-    /** Submit button loading text */
-    submitLoadingText?: string;
-
-    /** Show submit button */
-    showSubmit?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    submitText: "Submit",
-    submitLoadingText: "Submitting...",
-    showSubmit: true,
-});
-
-/**
- * Fields whose `show()` predicate evaluates to true (or omits the
- * predicate entirely). Computed so the form re-renders when reactive
- * sources used inside `show` change.
- */
-const visibleFields = computed(() => {
-    return props.fields.filter((field) =>
-        field.show ? field.show() : true,
+import { onMounted } from "vue";
+import DXForm from "./DXForm.vue";
+
+defineOptions({ inheritAttrs: false });
+
+onMounted(() => {
+    if (hasWarned) return;
+    hasWarned = true;
+    console.warn(
+        "[dashboard-for-laravel] DXBasicForm is deprecated and will be " +
+            "removed in a future major version. Use DXForm instead " +
+            "(a flat form is DXForm without a `tabs` prop).",
     );
 });
-
-const emit = defineEmits<{
-    submit: [];
-}>();
-
-/**
- * Check if field type is a text-based input
- */
-const isTextInput = (type: FieldType): boolean => {
-    return [
-        "text",
-        "email",
-        "password",
-        "number",
-        "url",
-        "tel",
-        "date",
-        "datetime-local",
-        "time",
-    ].includes(type);
-};
-
-/**
- * Handle form submission
- */
-const handleSubmit = () => {
-    emit("submit");
-};
 </script>
+
+<template>
+    <!-- `form`/`fields`/etc. arrive via $attrs (inheritAttrs: false) and are
+         forwarded to DXForm. Cast because the type-checker can't see the
+         required `form` prop inside the untyped attrs spread. -->
+    <DXForm v-bind="($attrs as any)">
+        <!-- Forward all slots (#value(<key>), #footer, etc.) to DXForm. -->
+        <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
+            <slot :name="name" v-bind="slotProps" />
+        </template>
+    </DXForm>
+</template>

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

@@ -0,0 +1,402 @@
+<template>
+    <!-- Full-width span field: delegate entirely to the #span slot -->
+    <div v-if="field.span" :class="field.class || 'mb-3'">
+        <slot
+            name="span"
+            :field="field"
+            :model="model"
+            :value="fieldValue"
+            :update="setValue"
+        />
+    </div>
+
+    <!-- Checkbox: no label wrapper, label sits beside the control -->
+    <div v-else-if="field.type === 'checkbox'" :class="field.class || 'mb-3'">
+        <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"
+        >
+            {{ 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" class="text-muted">
+            <slot name="hint" :field="field" :model="model">{{ resolvedHint }}</slot>
+        </DFormText>
+        <DFormText v-if="field.help">{{ field.help }}</DFormText>
+    </div>
+
+    <!-- Repeater: nested, repeatable sub-form -->
+    <div v-else-if="field.type === 'repeater'" :class="field.class || 'mb-3'">
+        <DFormGroup :label="resolvedLabel">
+            <DXRepeater
+                :form="form"
+                :field="field"
+                :key-path="keyPath"
+                :model="model"
+            >
+                <!-- Forward repeater row slot for custom row layouts -->
+                <template v-if="$slots['repeater-row']" #row="rowProps">
+                    <slot name="repeater-row" v-bind="rowProps" />
+                </template>
+            </DXRepeater>
+        </DFormGroup>
+        <slot name="info" :field="field" :model="model" />
+        <DFormText v-if="resolvedHint" class="text-muted">
+            <slot name="hint" :field="field" :model="model">{{ resolvedHint }}</slot>
+        </DFormText>
+        <DFormText v-if="field.help">{{ field.help }}</DFormText>
+    </div>
+
+    <!-- Standard labelled field -->
+    <DFormGroup v-else :label="resolvedLabel" :class="field.class || 'mb-3'">
+        <!-- Custom value slot overrides the built-in control -->
+        <slot
+            v-if="$slots.value"
+            name="value"
+            :field="field"
+            :model="model"
+            :value="fieldValue"
+            :update="setValue"
+        />
+
+        <!-- Component escape hatch -->
+        <component
+            :is="field.component"
+            v-else-if="field.type === 'component' && field.component"
+            v-model="fieldValue"
+            :field="field"
+            :model="model"
+            :disabled="isDisabled || isReadonly"
+            v-bind="field.inputProps"
+        />
+
+        <!-- Textarea. Error clearing happens in the v-model setter. -->
+        <DFormTextarea
+            v-else-if="field.type === 'textarea'"
+            v-model="fieldValue"
+            :required="field.required"
+            :placeholder="field.placeholder"
+            :rows="field.rows || 3"
+            :state="fieldState"
+            :disabled="isDisabled"
+            :readonly="isReadonly"
+            v-bind="field.inputProps"
+        />
+
+        <!-- Select (sync or async options) -->
+        <DFormSelect
+            v-else-if="field.type === 'select'"
+            v-model="fieldValue"
+            :required="field.required"
+            :options="resolvedOptions"
+            :state="fieldState"
+            :disabled="isDisabled || isReadonly"
+            v-bind="field.inputProps"
+        />
+
+        <!-- Radio group -->
+        <DFormRadioGroup
+            v-else-if="field.type === 'radio'"
+            v-model="fieldValue"
+            :options="resolvedOptions"
+            :required="field.required"
+            :state="fieldState"
+            :disabled="isDisabled || isReadonly"
+            v-bind="field.inputProps"
+        />
+
+        <!-- File / image upload -->
+        <div v-else-if="field.type === 'image' || field.type === 'file'">
+            <DFormInput
+                type="file"
+                :accept="field.accept || (field.type === 'image' ? 'image/*' : undefined)"
+                :required="field.required"
+                :state="fieldState"
+                :disabled="isDisabled || isReadonly"
+                v-bind="field.inputProps"
+                @change="handleFileChange"
+            />
+            <img
+                v-if="field.type === 'image' && imagePreview"
+                :src="imagePreview"
+                alt="Preview"
+                class="dx-field-image-preview mt-2"
+            />
+        </div>
+
+        <!-- Currency / percentage: numeric input with an affix -->
+        <DInputGroup v-else-if="field.type === 'currency' || field.type === 'percentage'">
+            <template v-if="field.type === 'currency'" #prepend>
+                <span class="input-group-text">{{ field.currencySymbol || "£" }}</span>
+            </template>
+            <DFormInput
+                v-model="fieldValue"
+                type="number"
+                :required="field.required"
+                :placeholder="field.placeholder"
+                :step="field.step ?? (field.type === 'currency' ? '0.01' : undefined)"
+                :min="field.min"
+                :max="field.max"
+                :state="fieldState"
+                :disabled="isDisabled"
+                :readonly="isReadonly"
+                v-bind="field.inputProps"
+            />
+            <template v-if="field.type === 'percentage'" #append>
+                <span class="input-group-text">%</span>
+            </template>
+        </DInputGroup>
+
+        <!-- Text-based inputs (text/email/password/number/url/tel/date/time/datetime) -->
+        <DFormInput
+            v-else
+            v-model="fieldValue"
+            :type="inputType"
+            :required="field.required"
+            :placeholder="field.placeholder"
+            :step="field.step"
+            :min="field.min"
+            :max="field.max"
+            :state="fieldState"
+            :disabled="isDisabled"
+            :readonly="isReadonly"
+            v-bind="field.inputProps"
+        />
+
+        <!-- Validation error -->
+        <DFormInvalidFeedback v-if="form.hasError(errorKey)" force-show>
+            {{ form.getError(errorKey) }}
+        </DFormInvalidFeedback>
+
+        <!-- Optional rich info block -->
+        <slot name="info" :field="field" :model="model" />
+
+        <!-- Hint (dynamic, slot-overridable) -->
+        <DFormText v-if="resolvedHint || $slots.hint" class="text-muted">
+            <slot name="hint" :field="field" :model="model">{{ resolvedHint }}</slot>
+        </DFormText>
+
+        <!-- Static help text -->
+        <DFormText v-if="field.help">{{ field.help }}</DFormText>
+    </DFormGroup>
+</template>
+
+<script setup lang="ts">
+import {
+    computed,
+    defineAsyncComponent,
+    onBeforeUnmount,
+    onMounted,
+    ref,
+    watch,
+} from "vue";
+import DFormGroup from "../base/DFormGroup.vue";
+import DFormInput from "../base/DFormInput.vue";
+import DFormTextarea from "../base/DFormTextarea.vue";
+import DFormSelect from "../base/DFormSelect.vue";
+import DFormRadioGroup from "../base/DFormRadioGroup.vue";
+import DFormCheckbox from "../base/DFormCheckbox.vue";
+import DFormInvalidFeedback from "../base/DFormInvalidFeedback.vue";
+import DFormText from "../base/DFormText.vue";
+import DInputGroup from "../base/DInputGroup.vue";
+import type { UseFormReturn } from "../../composables/useForm";
+import type { FieldDefinition, FieldOption, FieldType } from "../../types";
+import { getByPath, setByPath } from "../../utils/objectPath";
+
+// Async to break the DXField <-> DXRepeater circular import.
+const DXRepeater = defineAsyncComponent(() => import("./DXRepeater.vue"));
+
+interface Props {
+    /** Field definition to render */
+    field: FieldDefinition;
+
+    /** Form instance owning the field's data and errors */
+    form: UseFormReturn<any>;
+
+    /**
+     * Model passed to predicates (label/hint/when/disabled/readonly).
+     * Defaults to the live form data; a parent may widen it (e.g. a table
+     * merging the original row).
+     */
+    model?: any;
+
+    /** Dot path into form.data for the value (defaults to field.key). */
+    keyPath?: string;
+
+    /** Error key for validation lookups (defaults to keyPath/field.key). */
+    errorKey?: string;
+}
+
+const props = defineProps<Props>();
+
+const effectiveModel = computed(() => props.model ?? props.form.data);
+
+// 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
+// a dot (e.g. "user.email") still maps to form.data["user.email"].
+const usePathSemantics = computed(() => props.keyPath !== undefined);
+const valuePath = computed(() => props.keyPath ?? props.field.key);
+const errorKey = computed(
+    () => props.errorKey ?? props.keyPath ?? props.field.key,
+);
+
+/** Resolve a value-or-function against the current model. */
+function resolveMaybe<TValue>(
+    value: TValue | ((model: any) => TValue) | undefined,
+): TValue | undefined {
+    if (typeof value === "function") {
+        return (value as (model: any) => TValue)(effectiveModel.value);
+    }
+    return value;
+}
+
+const fieldValue = computed({
+    get: () =>
+        usePathSemantics.value
+            ? getByPath(props.form.data, valuePath.value)
+            : (props.form.data as Record<string, any>)[props.field.key],
+    set: (value: any) => setValue(value),
+});
+
+const NUMERIC_TYPES: ReadonlySet<FieldType> = new Set([
+    "number",
+    "currency",
+    "percentage",
+]);
+
+function setValue(value: any): void {
+    let next = value;
+    // Native number inputs emit strings; keep numeric field types numeric so
+    // the API and any client-side maths see numbers, not "12.50".
+    if (
+        NUMERIC_TYPES.has(props.field.type) &&
+        typeof value === "string" &&
+        value.trim() !== ""
+    ) {
+        const parsed = Number(value);
+        if (Number.isFinite(parsed)) next = parsed;
+    }
+    if (usePathSemantics.value) {
+        setByPath(props.form.data, valuePath.value, next);
+    } else {
+        (props.form.data as Record<string, any>)[props.field.key] = next;
+    }
+    props.form.clearError(errorKey.value);
+}
+
+const fieldState = computed(() => props.form.getState(errorKey.value));
+
+const resolvedLabel = computed(
+    () => resolveMaybe(props.field.label) ?? props.field.key,
+);
+
+const resolvedHint = computed(() => resolveMaybe(props.field.hint));
+
+const isDisabled = computed(() => {
+    if (props.field.disabledWhen) {
+        return props.field.disabledWhen(effectiveModel.value);
+    }
+    return resolveMaybe(props.field.disabled) ?? false;
+});
+
+const isReadonly = computed(() => resolveMaybe(props.field.readonly) ?? false);
+
+const inputType = computed<string>(() => {
+    const type: FieldType = props.field.type;
+    if (type === "datetime") return "datetime-local";
+    return type;
+});
+
+// ————————————————— async options
+
+const loadedOptions = ref<FieldOption[] | null>(null);
+
+const resolvedOptions = computed<FieldOption[] | undefined>(
+    () => loadedOptions.value ?? props.field.options,
+);
+
+// Monotonic token so out-of-order async responses can't clobber newer ones.
+let optionsRequestToken = 0;
+
+async function loadOptions(): Promise<void> {
+    if (!props.field.optionsLoader) return;
+    const token = ++optionsRequestToken;
+    try {
+        const options = await props.field.optionsLoader(effectiveModel.value);
+        // Ignore a stale response superseded by a newer load.
+        if (token === optionsRequestToken) loadedOptions.value = options;
+    } catch (error) {
+        // Swallow loader failures: keep the last successfully loaded options
+        // (or the static `field.options` fallback when none have loaded yet).
+        if (token === optionsRequestToken) {
+            // eslint-disable-next-line no-console
+            console.error(
+                `optionsLoader failed for field "${props.field.key}"`,
+                error,
+            );
+        }
+    }
+}
+
+onMounted(() => {
+    void loadOptions();
+});
+
+if (props.field.reloadOptionsOnChange) {
+    watch(effectiveModel, () => void loadOptions(), { deep: true });
+}
+
+// ————————————————— image preview
+
+const objectUrl = ref<string | null>(null);
+
+const imagePreview = computed<string | null>(() => {
+    if (objectUrl.value) return objectUrl.value;
+    const value = fieldValue.value;
+    // Existing value may be a URL string from the server.
+    return typeof value === "string" && value.length > 0 ? value : null;
+});
+
+function handleFileChange(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    const file = input.files?.[0] ?? null;
+
+    if (objectUrl.value) {
+        URL.revokeObjectURL(objectUrl.value);
+        objectUrl.value = null;
+    }
+    if (file && props.field.type === "image" && typeof URL !== "undefined") {
+        objectUrl.value = URL.createObjectURL(file);
+    }
+    setValue(file);
+}
+
+onBeforeUnmount(() => {
+    if (objectUrl.value) URL.revokeObjectURL(objectUrl.value);
+});
+</script>
+
+<style scoped>
+.dx-field-image-preview {
+    max-width: 160px;
+    max-height: 160px;
+    object-fit: cover;
+    border: 1px solid var(--bs-border-color);
+    border-radius: var(--bs-border-radius);
+}
+</style>