@ghentcdh/json-forms-vue 0.8.5 → 1.0.1

package/form.store.d.ts

@@ -4,5 +4,5 @@ export declare class FormStore {
     delete<T>(data: T & {
         id?: string;
     }): Promise<void>;
-    save<T>(id: string | null, data: T): Promise<void>;
+    save<T>(id: string | null, data: T): Promise<any>;
 }

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,48 @@
+import { ExtractPublicPropTypes, PropType } from 'vue';
+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;
+    };
+    /** Current form data object. */
+    formData: {
+        type: PropType<Data>;
+        default: () => {};
+    };
+    /** When validation errors are shown (`'onBlur'`, `'onChange'`, `'onSubmit'`, `'always'`). */
+    errorMode: {
+        type: PropType<ErrorMode>;
+        default: "onChanges";
+    };
+};
+export type JsonFormComponentProp = ExtractPublicPropTypes<typeof JsonFormComponentProperties>;
+export declare const JsonFormComponentEmits: string[];

package/{form.component.vue.d.ts → forms/FormComponent.vue.d.ts}

@@ -1,8 +1,8 @@
-import { Data } from './form.component.properties';
+import { Data } from './FormComponent.properties';
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     id: {
         type: StringConstructor;
-        required: boolean;
+        required: true;
     };
     name: {
         type: StringConstructor;
@@ -10,15 +10,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
     schema: {
         type: import('vue').PropType<any>;
-        required: boolean;
+        required: true;
     };
     uiSchema: {
         type: import('vue').PropType<any>;
-        required: boolean;
-    };
-    renderers: {
-        type: import('vue').PropType<import('@jsonforms/core').JsonFormsRendererRegistryEntry[]>;
-        default: undefined;
+        required: true;
     };
     disabled: {
         type: BooleanConstructor;
@@ -28,10 +24,16 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: import('vue').PropType<Data>;
         default: () => {};
     };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    errorMode: {
+        type: import('vue').PropType<import('./errorMode').ErrorMode>;
+        default: "onChanges";
+    };
+}>, {
+    markSubmitted: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     id: {
         type: StringConstructor;
-        required: boolean;
+        required: true;
     };
     name: {
         type: StringConstructor;
@@ -39,15 +41,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
     schema: {
         type: import('vue').PropType<any>;
-        required: boolean;
+        required: true;
     };
     uiSchema: {
         type: import('vue').PropType<any>;
-        required: boolean;
-    };
-    renderers: {
-        type: import('vue').PropType<import('@jsonforms/core').JsonFormsRendererRegistryEntry[]>;
-        default: undefined;
+        required: true;
     };
     disabled: {
         type: BooleanConstructor;
@@ -57,10 +55,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: import('vue').PropType<Data>;
         default: () => {};
     };
+    errorMode: {
+        type: import('vue').PropType<import('./errorMode').ErrorMode>;
+        default: "onChanges";
+    };
 }>> & Readonly<{}>, {
+    errorMode: import('./errorMode').ErrorMode;
     disabled: boolean;
     name: string;
-    renderers: import('@jsonforms/core').JsonFormsRendererRegistryEntry[];
     formData: Data;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLFormElement>;
 export default _default;

package/forms/FormWithActions.properties.d.ts

@@ -0,0 +1,52 @@
+import { ExtractPublicPropTypes, PropType } from 'vue';
+import { ErrorMode } from './errorMode';
+export declare const FormWithActionsProperties: {
+    /** Unique identifier used to namespace the inner form element. */
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    /** Title shown when creating a new record. */
+    createTitle: {
+        type: StringConstructor;
+        required: true;
+    };
+    /** Title shown when editing an existing record. Falls back to `createTitle` when omitted. */
+    updateTitle: {
+        type: StringConstructor;
+    };
+    /** JSON schema describing the shape of the form data. */
+    schema: {
+        type: PropType<any>;
+    };
+    /** UI schema describing the layout and controls. */
+    uiSchema: {
+        type: PropType<any>;
+    };
+    /** REST endpoint used by `FormStore` to persist data. When omitted the form emits `submit` instead. */
+    uri: {
+        type: StringConstructor;
+    };
+    /** Enable vertical scrolling inside the form area. */
+    scrollable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Stretch the collapse wrapper to full height. */
+    fullHeight: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Two-way bound form data object. */
+    modelValue: {
+        type: PropType<any>;
+        default: () => {};
+    };
+    /** When validation errors are shown (`'onBlur'`, `'onChange'`, `'onSubmit'`, `'always'`). */
+    errorMode: {
+        type: PropType<ErrorMode>;
+        default: "onBlur";
+    };
+};
+export type FormWithActionsProp = ExtractPublicPropTypes<typeof FormWithActionsProperties>;
+export declare const FormWithActionsEmits: string[];

package/forms/FormWithActions.vue.d.ts

@@ -0,0 +1,258 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        actions?(_: {}): 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;
+            };
+            formData: {
+                type: import('vue').PropType<import('./FormComponent.properties').Data>;
+                default: () => {};
+            };
+            errorMode: {
+                type: import('vue').PropType<import('./errorMode').ErrorMode>;
+                default: "onChanges";
+            };
+        }>> & Readonly<{}>, {
+            markSubmitted: () => void;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+            errorMode: import('./errorMode').ErrorMode;
+            disabled: boolean;
+            name: string;
+            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;
+            };
+            formData: {
+                type: import('vue').PropType<import('./FormComponent.properties').Data>;
+                default: () => {};
+            };
+            errorMode: {
+                type: import('vue').PropType<import('./errorMode').ErrorMode>;
+                default: "onChanges";
+            };
+        }>> & Readonly<{}>, {
+            markSubmitted: () => void;
+        }, {}, {}, {}, {
+            errorMode: import('./errorMode').ErrorMode;
+            disabled: boolean;
+            name: string;
+            formData: import('./FormComponent.properties').Data;
+        }> | null;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    createTitle: {
+        type: StringConstructor;
+        required: true;
+    };
+    updateTitle: {
+        type: StringConstructor;
+    };
+    schema: {
+        type: import('vue').PropType<any>;
+    };
+    uiSchema: {
+        type: import('vue').PropType<any>;
+    };
+    uri: {
+        type: StringConstructor;
+    };
+    scrollable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fullHeight: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: {
+        type: import('vue').PropType<any>;
+        default: () => {};
+    };
+    errorMode: {
+        type: import('vue').PropType<import('./errorMode').ErrorMode>;
+        default: "onBlur";
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    createTitle: {
+        type: StringConstructor;
+        required: true;
+    };
+    updateTitle: {
+        type: StringConstructor;
+    };
+    schema: {
+        type: import('vue').PropType<any>;
+    };
+    uiSchema: {
+        type: import('vue').PropType<any>;
+    };
+    uri: {
+        type: StringConstructor;
+    };
+    scrollable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fullHeight: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: {
+        type: import('vue').PropType<any>;
+        default: () => {};
+    };
+    errorMode: {
+        type: import('vue').PropType<import('./errorMode').ErrorMode>;
+        default: "onBlur";
+    };
+}>> & Readonly<{}>, {
+    errorMode: import('./errorMode').ErrorMode;
+    modelValue: any;
+    scrollable: boolean;
+    fullHeight: boolean;
+}, {}, {}, {}, 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;
+        };
+        formData: {
+            type: import('vue').PropType<import('./FormComponent.properties').Data>;
+            default: () => {};
+        };
+        errorMode: {
+            type: import('vue').PropType<import('./errorMode').ErrorMode>;
+            default: "onChanges";
+        };
+    }>> & Readonly<{}>, {
+        markSubmitted: () => void;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        errorMode: import('./errorMode').ErrorMode;
+        disabled: boolean;
+        name: string;
+        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;
+        };
+        formData: {
+            type: import('vue').PropType<import('./FormComponent.properties').Data>;
+            default: () => {};
+        };
+        errorMode: {
+            type: import('vue').PropType<import('./errorMode').ErrorMode>;
+            default: "onChanges";
+        };
+    }>> & Readonly<{}>, {
+        markSubmitted: () => void;
+    }, {}, {}, {}, {
+        errorMode: import('./errorMode').ErrorMode;
+        disabled: boolean;
+        name: string;
+        formData: import('./FormComponent.properties').Data;
+    }> | null;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/forms/FormWithTable.properties.d.ts

@@ -0,0 +1,65 @@
+import { ExtractPublicPropTypes, PropType } from 'vue';
+import { JsonFormsLayout } from '../../../core/src/index.ts';
+import { TableAction } from '../../../../ui/src/index.ts';
+import { ErrorMode } from './errorMode';
+/** Generic record shape used by table rows. */
+export type Data = {
+    [key: string]: any;
+};
+export declare const FormWithTableProperties: {
+    /** Unique identifier used to namespace the inner table element. */
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    /** Heading displayed above the table. */
+    tableTitle: {
+        type: StringConstructor;
+        required: true;
+    };
+    /** Title shown in the modal when creating a new record. */
+    createTitle: {
+        type: StringConstructor;
+        required: true;
+    };
+    /** Title shown in the modal when editing a record. Falls back to `createTitle` when omitted. */
+    updateTitle: {
+        type: StringConstructor;
+    };
+    /** Override URI used to fetch table data. Defaults to `uri` when omitted. */
+    dataUri: {
+        type: StringConstructor;
+    };
+    /** Custom row actions rendered in the table. */
+    tableActions: {
+        type: PropType<TableAction[]>;
+    };
+    /** JSON Forms layout for the create/edit modal form. */
+    form: {
+        type: PropType<JsonFormsLayout>;
+    };
+    /** JSON Forms layout for the table. */
+    table: {
+        type: PropType<JsonFormsLayout>;
+    };
+    /** JSON Forms layout for the table filter. */
+    filter: {
+        type: PropType<JsonFormsLayout>;
+    };
+    /** REST endpoint used by `FormStore` for CRUD operations. */
+    uri: {
+        type: StringConstructor;
+    };
+    /** Default data pre-filled when creating a new record. */
+    initialData: {
+        type: PropType<Data>;
+        default: () => {};
+    };
+    /** When validation errors are shown in the modal form. */
+    errorMode: {
+        type: PropType<ErrorMode>;
+        default: "onBlur";
+    };
+};
+export type FormWithTableProp = ExtractPublicPropTypes<typeof FormWithTableProperties>;
+export declare const FormWithTableEmits: string[];

package/{form-with-table.component.vue.d.ts → forms/FormWithTable.vue.d.ts}

@@ -1,16 +1,16 @@
-import { Data } from './form-with-table.component.properties';
+import { Data } from './FormWithTable.properties';
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     id: {
         type: StringConstructor;
-        required: boolean;
+        required: true;
     };
     tableTitle: {
         type: StringConstructor;
-        required: boolean;
+        required: true;
     };
     createTitle: {
         type: StringConstructor;
-        required: boolean;
+        required: true;
     };
     updateTitle: {
         type: StringConstructor;
@@ -19,16 +19,16 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
     };
     tableActions: {
-        type: import('vue').PropType<import('../../../ui/src/index.ts').TableAction[]>;
+        type: import('vue').PropType<import('../../../../ui/src/index.ts').TableAction[]>;
     };
     form: {
-        type: import('vue').PropType<import('../../core/src/index.ts').JsonFormsLayout>;
+        type: import('vue').PropType<import('../../../core/src/index.ts').JsonFormsLayout>;
     };
     table: {
-        type: import('vue').PropType<import('../../core/src/index.ts').JsonFormsLayout>;
+        type: import('vue').PropType<import('../../../core/src/index.ts').JsonFormsLayout>;
     };
     filter: {
-        type: import('vue').PropType<import('../../core/src/index.ts').JsonFormsLayout>;
+        type: import('vue').PropType<import('../../../core/src/index.ts').JsonFormsLayout>;
     };
     uri: {
         type: StringConstructor;
@@ -37,18 +37,22 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: import('vue').PropType<Data>;
         default: () => {};
     };
+    errorMode: {
+        type: import('vue').PropType<import('./errorMode').ErrorMode>;
+        default: "onBlur";
+    };
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     id: {
         type: StringConstructor;
-        required: boolean;
+        required: true;
     };
     tableTitle: {
         type: StringConstructor;
-        required: boolean;
+        required: true;
     };
     createTitle: {
         type: StringConstructor;
-        required: boolean;
+        required: true;
     };
     updateTitle: {
         type: StringConstructor;
@@ -57,16 +61,16 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
     };
     tableActions: {
-        type: import('vue').PropType<import('../../../ui/src/index.ts').TableAction[]>;
+        type: import('vue').PropType<import('../../../../ui/src/index.ts').TableAction[]>;
     };
     form: {
-        type: import('vue').PropType<import('../../core/src/index.ts').JsonFormsLayout>;
+        type: import('vue').PropType<import('../../../core/src/index.ts').JsonFormsLayout>;
     };
     table: {
-        type: import('vue').PropType<import('../../core/src/index.ts').JsonFormsLayout>;
+        type: import('vue').PropType<import('../../../core/src/index.ts').JsonFormsLayout>;
     };
     filter: {
-        type: import('vue').PropType<import('../../core/src/index.ts').JsonFormsLayout>;
+        type: import('vue').PropType<import('../../../core/src/index.ts').JsonFormsLayout>;
     };
     uri: {
         type: StringConstructor;
@@ -75,7 +79,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: import('vue').PropType<Data>;
         default: () => {};
     };
+    errorMode: {
+        type: import('vue').PropType<import('./errorMode').ErrorMode>;
+        default: "onBlur";
+    };
 }>> & Readonly<{}>, {
+    errorMode: import('./errorMode').ErrorMode;
     initialData: Data;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 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,4 @@
+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>>;