@ghentcdh/json-forms-vue 1.1.0 → 2.0.0

package/composables/useFormEvents.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Event names that renderers can dispatch up to the form host. Expand this
+ * union as new events are needed.
+ */
+export type FormEventName = 'create' | 'view';
+/**
+ * Payload passed along with every form event. `type` is user-defined (e.g.
+ * `'author'`, `'keyword'`) so the host can decide what entity to act on.
+ */
+export type FormEventPayload<TData = any, TResult = any> = {
+    event: FormEventName;
+    type: string;
+    data?: TData;
+    id?: string | number;
+    options?: Record<string, any>;
+    onSuccess?: (result: TResult) => void;
+    onError?: (error: unknown) => void;
+};
+export type FormEventDispatch = <TData = any, TResult = any>(payload: FormEventPayload<TData, TResult>) => void;
+export type FormEvents = {
+    dispatch: FormEventDispatch;
+};
+/**
+ * Bootstraps the form event helper and provides it to descendant renderers.
+ * Call this in the component that hosts `<JsonForms>`, passing a dispatch
+ * function (typically a wrapper around the component's Vue `emit`) so events
+ * bubble up to the parent.
+ */
+export declare const provideFormEvents: (dispatch: FormEventDispatch) => FormEvents;
+/**
+ * Inject the form events helper inside a custom control renderer. Returns a
+ * no-op when no provider is found, so renderers stay safe to use standalone.
+ */
+export declare const useFormEvents: () => FormEvents;

package/composables/useHttpClient.d.ts

@@ -0,0 +1,12 @@
+import { HttpClient } from '../http-client';
+/**
+ * Provide an HttpClient instance to all descendant renderers.
+ * Call this in the component that hosts `<JsonForm>`.
+ */
+export declare const provideHttpClient: (http: HttpClient) => void;
+/**
+ * Inject the HttpClient inside a renderer.
+ * Throws if no provider is found — consumers must provide one via `provideHttpClient`
+ * or the `http` prop on `<JsonForm>` when using HTTP-dependent renderers.
+ */
+export declare const useHttpClient: () => HttpClient;

package/forms/Dispatch.vue.d.ts

@@ -0,0 +1,10 @@
+import { JsonSchema, UISchemaElement } from '@jsonforms/core';
+type __VLS_Props = {
+    uischema: UISchemaElement;
+    schema: JsonSchema;
+    pathPrefix?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    pathPrefix: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/forms/FormComponent.properties.d.ts

@@ -0,0 +1,64 @@
+import { ExtractPublicPropTypes, PropType } from 'vue';
+import { HttpClient } from '../http-client';
+import { ErrorMode } from './errorMode';
+export type Data = {
+    [key: string]: any;
+};
+export type SubmitFormEvent = {
+    data: Data;
+    valid: boolean;
+};
+export declare const JsonFormComponentProperties: {
+    /** Unique identifier used to namespace the form element. */
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    /** HTML name attribute for the form. */
+    name: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** JSON schema describing the shape of the form data. */
+    schema: {
+        type: PropType<any>;
+        required: true;
+    };
+    /** UI schema describing the layout and controls. */
+    uiSchema: {
+        type: PropType<any>;
+        required: true;
+    };
+    /** Disable all form controls. */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Make all form controls readonly. */
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Current form data object. */
+    formData: {
+        type: PropType<Data>;
+        default: () => {};
+    };
+    /** When validation errors are shown (`'onBlur'`, `'onChange'`, `'onSubmit'`, `'always'`). */
+    errorMode: {
+        type: PropType<ErrorMode>;
+        default: "onChanges";
+    };
+    /** HTTP client used by renderers that fetch remote data (e.g. autocomplete). */
+    http: {
+        type: PropType<HttpClient>;
+        default: null;
+    };
+    /** Custom renderer registry. Overrides the default `customRenderers` when provided. */
+    renderers: {
+        type: PropType<any[]>;
+        default: null;
+    };
+};
+export type JsonFormComponentProp = ExtractPublicPropTypes<typeof JsonFormComponentProperties>;
+export declare const JsonFormComponentEmits: string[];

package/forms/FormComponent.vue.d.ts

@@ -0,0 +1,95 @@
+import { Data } from './FormComponent.properties';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    name: {
+        type: StringConstructor;
+        default: string;
+    };
+    schema: {
+        type: import('vue').PropType<any>;
+        required: true;
+    };
+    uiSchema: {
+        type: import('vue').PropType<any>;
+        required: true;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    formData: {
+        type: import('vue').PropType<Data>;
+        default: () => {};
+    };
+    errorMode: {
+        type: import('vue').PropType<import('./errorMode').ErrorMode>;
+        default: "onChanges";
+    };
+    http: {
+        type: import('vue').PropType<import('..').HttpClient>;
+        default: null;
+    };
+    renderers: {
+        type: import('vue').PropType<any[]>;
+        default: null;
+    };
+}>, {
+    markSubmitted: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    name: {
+        type: StringConstructor;
+        default: string;
+    };
+    schema: {
+        type: import('vue').PropType<any>;
+        required: true;
+    };
+    uiSchema: {
+        type: import('vue').PropType<any>;
+        required: true;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    formData: {
+        type: import('vue').PropType<Data>;
+        default: () => {};
+    };
+    errorMode: {
+        type: import('vue').PropType<import('./errorMode').ErrorMode>;
+        default: "onChanges";
+    };
+    http: {
+        type: import('vue').PropType<import('..').HttpClient>;
+        default: null;
+    };
+    renderers: {
+        type: import('vue').PropType<any[]>;
+        default: null;
+    };
+}>> & Readonly<{}>, {
+    disabled: boolean;
+    name: string;
+    readonly: boolean;
+    http: import('..').HttpClient;
+    errorMode: import('./errorMode').ErrorMode;
+    renderers: any[];
+    formData: Data;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLFormElement>;
+export default _default;

package/forms/errorMessages.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Transforms raw Zod error messages into human-readable ones.
+ * Returns original message if no pattern matches.
+ */
+export declare const formatError: (message: string | undefined) => string | undefined;
+/**
+ * Registers a global Zod error map for friendlier default messages.
+ * Call once at app startup or in FormComponent setup.
+ */
+export declare const registerZodErrorMap: () => void;

package/forms/errorMode.d.ts

@@ -0,0 +1,5 @@
+import { InjectionKey, Ref } from 'vue';
+export type ErrorMode = 'onBlur' | 'onChange' | 'onSubmit' | 'always';
+export declare const ERROR_MODE_KEY: InjectionKey<Ref<ErrorMode>>;
+export declare const FORM_SUBMITTED_KEY: InjectionKey<Ref<boolean>>;
+export declare const FORM_READONLY_KEY: InjectionKey<Ref<boolean>>;

package/forms/modal/FormModal.properties.d.ts

@@ -0,0 +1,75 @@
+import { ExtractPublicPropTypes, PropType } from 'vue';
+import { SizeType } from '../../../../core/src/index.ts';
+import { FormEventPayload } from '../../composables/useFormEvents';
+import { HttpClient } from '../../http-client';
+import { ErrorMode } from '../errorMode';
+export declare const FormModalProperties: {
+    /** Title displayed in the modal header. */
+    modalTitle: {
+        type: StringConstructor;
+        required: true;
+    };
+    /** Label for the save button. */
+    saveLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Label for the cancel button. */
+    cancelLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** JSON schema describing the shape of the form data. */
+    schema: {
+        type: PropType<any>;
+        required: true;
+    };
+    /** UI schema describing the layout and controls. */
+    uiSchema: {
+        type: PropType<any>;
+        required: true;
+    };
+    /** Modal width (`'xs'`, `'sm'`, `'md'`, `'lg'`, `'xl'`). */
+    modalSize: {
+        type: PropType<SizeType>;
+        default: string;
+    };
+    /** Callback invoked when the modal closes (with result or `null` on cancel). */
+    onClose: {
+        type: PropType<(result: any) => void>;
+        required: true;
+    };
+    /** Callback for form events dispatched by custom renderers. */
+    onEvents: {
+        type: PropType<(payload: FormEventPayload) => void>;
+    };
+    /** Initial form data to populate the form with. */
+    data: {
+        type: PropType<any>;
+        required: true;
+    };
+    /** When validation errors are shown. */
+    errorMode: {
+        type: PropType<ErrorMode>;
+        default: "onBlur";
+    };
+    /** HTTP client passed through to the inner JsonForm for remote renderers (e.g. autocomplete). */
+    http: {
+        type: PropType<HttpClient>;
+        default: null;
+    };
+    /** Custom renderer registry passed to the inner JsonForm. */
+    renderers: {
+        type: PropType<any[]>;
+        default: null;
+    };
+};
+export type FormModalProp = ExtractPublicPropTypes<typeof FormModalProperties>;
+export declare const FormModalEmits: string[];
+/** Result payload returned when the modal is submitted. */
+export type FormModalResult<DATA = any> = {
+    /** The form data at the time of submission. */
+    data: DATA;
+    /** Whether the form passed validation. */
+    valid: boolean;
+};

package/forms/modal/FormModal.vue.d.ts

@@ -0,0 +1,353 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        'content-before'?(_: {}): any;
+        'content-after'?(_: {}): any;
+    };
+    refs: {
+        formRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+            id: {
+                type: StringConstructor;
+                required: true;
+            };
+            name: {
+                type: StringConstructor;
+                default: string;
+            };
+            schema: {
+                type: import('vue').PropType<any>;
+                required: true;
+            };
+            uiSchema: {
+                type: import('vue').PropType<any>;
+                required: true;
+            };
+            disabled: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            readonly: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            formData: {
+                type: import('vue').PropType<import('../FormComponent.properties').Data>;
+                default: () => {};
+            };
+            errorMode: {
+                type: import('vue').PropType<import('../errorMode').ErrorMode>;
+                default: "onChanges";
+            };
+            http: {
+                type: import('vue').PropType<import('../..').HttpClient>;
+                default: null;
+            };
+            renderers: {
+                type: import('vue').PropType<any[]>;
+                default: null;
+            };
+        }>> & Readonly<{}>, {
+            markSubmitted: () => void;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+            disabled: boolean;
+            name: string;
+            readonly: boolean;
+            http: import('../..').HttpClient;
+            errorMode: import('../errorMode').ErrorMode;
+            renderers: any[];
+            formData: import('../FormComponent.properties').Data;
+        }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLFormElement, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import('vue').ExtractPropTypes<{
+            id: {
+                type: StringConstructor;
+                required: true;
+            };
+            name: {
+                type: StringConstructor;
+                default: string;
+            };
+            schema: {
+                type: import('vue').PropType<any>;
+                required: true;
+            };
+            uiSchema: {
+                type: import('vue').PropType<any>;
+                required: true;
+            };
+            disabled: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            readonly: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            formData: {
+                type: import('vue').PropType<import('../FormComponent.properties').Data>;
+                default: () => {};
+            };
+            errorMode: {
+                type: import('vue').PropType<import('../errorMode').ErrorMode>;
+                default: "onChanges";
+            };
+            http: {
+                type: import('vue').PropType<import('../..').HttpClient>;
+                default: null;
+            };
+            renderers: {
+                type: import('vue').PropType<any[]>;
+                default: null;
+            };
+        }>> & Readonly<{}>, {
+            markSubmitted: () => void;
+        }, {}, {}, {}, {
+            disabled: boolean;
+            name: string;
+            readonly: boolean;
+            http: import('../..').HttpClient;
+            errorMode: import('../errorMode').ErrorMode;
+            renderers: any[];
+            formData: import('../FormComponent.properties').Data;
+        }> | null;
+    };
+    rootEl: HTMLDialogElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    modalTitle: {
+        type: StringConstructor;
+        required: true;
+    };
+    saveLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    cancelLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    schema: {
+        type: import('vue').PropType<any>;
+        required: true;
+    };
+    uiSchema: {
+        type: import('vue').PropType<any>;
+        required: true;
+    };
+    modalSize: {
+        type: import('vue').PropType<import('../../../../core/src/index.ts').SizeType>;
+        default: string;
+    };
+    onClose: {
+        type: import('vue').PropType<(result: any) => void>;
+        required: true;
+    };
+    onEvents: {
+        type: import('vue').PropType<(payload: import('../..').FormEventPayload) => void>;
+    };
+    data: {
+        type: import('vue').PropType<any>;
+        required: true;
+    };
+    errorMode: {
+        type: import('vue').PropType<import('../errorMode').ErrorMode>;
+        default: "onBlur";
+    };
+    http: {
+        type: import('vue').PropType<import('../..').HttpClient>;
+        default: null;
+    };
+    renderers: {
+        type: import('vue').PropType<any[]>;
+        default: null;
+    };
+    modelValue: {
+        type: import('vue').PropType<any>;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modalTitle: {
+        type: StringConstructor;
+        required: true;
+    };
+    saveLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    cancelLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    schema: {
+        type: import('vue').PropType<any>;
+        required: true;
+    };
+    uiSchema: {
+        type: import('vue').PropType<any>;
+        required: true;
+    };
+    modalSize: {
+        type: import('vue').PropType<import('../../../../core/src/index.ts').SizeType>;
+        default: string;
+    };
+    onClose: {
+        type: import('vue').PropType<(result: any) => void>;
+        required: true;
+    };
+    onEvents: {
+        type: import('vue').PropType<(payload: import('../..').FormEventPayload) => void>;
+    };
+    data: {
+        type: import('vue').PropType<any>;
+        required: true;
+    };
+    errorMode: {
+        type: import('vue').PropType<import('../errorMode').ErrorMode>;
+        default: "onBlur";
+    };
+    http: {
+        type: import('vue').PropType<import('../..').HttpClient>;
+        default: null;
+    };
+    renderers: {
+        type: import('vue').PropType<any[]>;
+        default: null;
+    };
+    modelValue: {
+        type: import('vue').PropType<any>;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {
+    cancelLabel: string;
+    http: import('../..').HttpClient;
+    errorMode: import('../errorMode').ErrorMode;
+    saveLabel: string;
+    modalSize: "xs" | "sm" | "lg" | "xl";
+    renderers: any[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    formRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+        id: {
+            type: StringConstructor;
+            required: true;
+        };
+        name: {
+            type: StringConstructor;
+            default: string;
+        };
+        schema: {
+            type: import('vue').PropType<any>;
+            required: true;
+        };
+        uiSchema: {
+            type: import('vue').PropType<any>;
+            required: true;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        readonly: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        formData: {
+            type: import('vue').PropType<import('../FormComponent.properties').Data>;
+            default: () => {};
+        };
+        errorMode: {
+            type: import('vue').PropType<import('../errorMode').ErrorMode>;
+            default: "onChanges";
+        };
+        http: {
+            type: import('vue').PropType<import('../..').HttpClient>;
+            default: null;
+        };
+        renderers: {
+            type: import('vue').PropType<any[]>;
+            default: null;
+        };
+    }>> & Readonly<{}>, {
+        markSubmitted: () => void;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        disabled: boolean;
+        name: string;
+        readonly: boolean;
+        http: import('../..').HttpClient;
+        errorMode: import('../errorMode').ErrorMode;
+        renderers: any[];
+        formData: import('../FormComponent.properties').Data;
+    }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLFormElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        id: {
+            type: StringConstructor;
+            required: true;
+        };
+        name: {
+            type: StringConstructor;
+            default: string;
+        };
+        schema: {
+            type: import('vue').PropType<any>;
+            required: true;
+        };
+        uiSchema: {
+            type: import('vue').PropType<any>;
+            required: true;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        readonly: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        formData: {
+            type: import('vue').PropType<import('../FormComponent.properties').Data>;
+            default: () => {};
+        };
+        errorMode: {
+            type: import('vue').PropType<import('../errorMode').ErrorMode>;
+            default: "onChanges";
+        };
+        http: {
+            type: import('vue').PropType<import('../..').HttpClient>;
+            default: null;
+        };
+        renderers: {
+            type: import('vue').PropType<any[]>;
+            default: null;
+        };
+    }>> & Readonly<{}>, {
+        markSubmitted: () => void;
+    }, {}, {}, {}, {
+        disabled: boolean;
+        name: string;
+        readonly: boolean;
+        http: import('../..').HttpClient;
+        errorMode: import('../errorMode').ErrorMode;
+        renderers: any[];
+        formData: import('../FormComponent.properties').Data;
+    }> | null;
+}, HTMLDialogElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};