@ghentcdh/json-forms-vue 1.0.4 → 1.1.0

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@ghentcdh/json-forms-vue",
-  "version": "1.0.4",
+  "version": "1.1.0",
+  "type": "module",
   "main": "./index.js",
   "module": "./index.mjs",
   "types": "./index.d.ts",
@@ -10,9 +11,27 @@
       "import": "./index.mjs",
       "require": "./index.js"
     },
+    "./testing": {
+      "types": "./testing/index.d.ts",
+      "import": "./testing.mjs",
+      "require": "./testing.js"
+    },
     "./index.css": "./index.css"
   },
+  "files": [
+    "*.js",
+    "*.mjs",
+    "*.d.ts",
+    "*.css",
+    "testing/**"
+  ],
+  "peerDependenciesMeta": {
+    "@playwright/test": {
+      "optional": true
+    }
+  },
   "peerDependencies": {
+    "@playwright/test": ">=1.50.0",
     "@ghentcdh/json-forms-core": ">=0.0.1",
     "@ghentcdh/tools-vue": ">=0.6.0",
     "@ghentcdh/ui": ">=0.6.0",
@@ -22,7 +41,8 @@
     "lodash-es": "^4.17.0",
     "vue": "^3.5.0",
     "vee-validate": ">=4.0.0",
-    "vue-router": "^5.0.0"
+    "vue-router": "^5.0.0",
+    "zod": "^4.0.0"
   },
   "devDependencies": {
     "@jsonforms/core": "3.7.0",
@@ -30,7 +50,8 @@
     "axios": "1.13.5",
     "lodash-es": "4.17.23",
     "vue": "3.5.29",
-    "vue-router": "5.0.3"
+    "vue-router": "5.0.3",
+    "zod": "4.3.6"
   },
   "publishConfig": {
     "access": "public"

package/testing.js

@@ -0,0 +1 @@
+"use strict";

package/testing.mjs

@@ -0,0 +1 @@
+

package/composables/useFormEvents.d.ts

@@ -1,32 +0,0 @@
-/**
- * Event names that renderers can dispatch up to the form host. Expand this
- * union as new events are needed.
- */
-export type FormEventName = 'create';
-/**
- * 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;
-    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/forms/Dispatch.vue.d.ts

@@ -1,10 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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/forms/FormComponent.vue.d.ts

@@ -1,68 +0,0 @@
-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;
-    };
-    formData: {
-        type: import('vue').PropType<Data>;
-        default: () => {};
-    };
-    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: 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<Data>;
-        default: () => {};
-    };
-    errorMode: {
-        type: import('vue').PropType<import('./errorMode').ErrorMode>;
-        default: "onChanges";
-    };
-}>> & Readonly<{}>, {
-    errorMode: import('./errorMode').ErrorMode;
-    disabled: boolean;
-    name: string;
-    formData: Data;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLFormElement>;
-export default _default;

package/forms/FormWithActions.properties.d.ts

@@ -1,52 +0,0 @@
-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

@@ -1,258 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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/forms/FormWithTable.vue.d.ts

@@ -1,90 +0,0 @@
-import { Data } from './FormWithTable.properties';
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    id: {
-        type: StringConstructor;
-        required: true;
-    };
-    tableTitle: {
-        type: StringConstructor;
-        required: true;
-    };
-    createTitle: {
-        type: StringConstructor;
-        required: true;
-    };
-    updateTitle: {
-        type: StringConstructor;
-    };
-    dataUri: {
-        type: StringConstructor;
-    };
-    tableActions: {
-        type: import('vue').PropType<import('../../../../ui/src/index.ts').TableAction[]>;
-    };
-    form: {
-        type: import('vue').PropType<import('../../../core/src/index.ts').JsonFormsLayout>;
-    };
-    table: {
-        type: import('vue').PropType<import('../../../core/src/index.ts').JsonFormsLayout>;
-    };
-    filter: {
-        type: import('vue').PropType<import('../../../core/src/index.ts').JsonFormsLayout>;
-    };
-    uri: {
-        type: StringConstructor;
-    };
-    initialData: {
-        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: true;
-    };
-    tableTitle: {
-        type: StringConstructor;
-        required: true;
-    };
-    createTitle: {
-        type: StringConstructor;
-        required: true;
-    };
-    updateTitle: {
-        type: StringConstructor;
-    };
-    dataUri: {
-        type: StringConstructor;
-    };
-    tableActions: {
-        type: import('vue').PropType<import('../../../../ui/src/index.ts').TableAction[]>;
-    };
-    form: {
-        type: import('vue').PropType<import('../../../core/src/index.ts').JsonFormsLayout>;
-    };
-    table: {
-        type: import('vue').PropType<import('../../../core/src/index.ts').JsonFormsLayout>;
-    };
-    filter: {
-        type: import('vue').PropType<import('../../../core/src/index.ts').JsonFormsLayout>;
-    };
-    uri: {
-        type: StringConstructor;
-    };
-    initialData: {
-        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;