@ghentcdh/json-forms-vue 0.6.9 → 0.8.1

package/README.md

@@ -1,10 +1,9 @@
-# Vue json-forms frontend 
+# Vue json-forms frontend
 
 A json-forms library for Vue.js that allows you to create forms based on a JSON schema and a UI schema.
 
 It uses the components inside `@ghentcdh/ui` for styling
 
-
 ## Install the library
 
 ```ssh
@@ -35,9 +34,9 @@ A json form can be shown using the `FormComponent` component. The component requ
 import {FormComponent} from '@ghentcdh/json-forms-vue';
 
 <div>
-  <FormComponent 
+  <FormComponent
     :schema="schema"
-    :uischema="uischema"
+    :ui-schema="uischema"
     v-model="formData" />
   <pre>{{formData}}</pre>
 </div>

package/composables/useFormEvents.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 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/form-with-actions.component.properties.d.ts

@@ -0,0 +1,40 @@
+import { PropType } from 'vue';
+export declare const FormWithActionsProperties: {
+    /** Unique identifier; the inner form receives `form_${id}` as its id. */
+    id: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    /** Title shown when creating a new record (`formData.id` is falsy). */
+    createTitle: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    /** Title shown when editing an existing record. Falls back to `createTitle`. */
+    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>;
+    };
+    /** When provided, the component submits the form to this URI via `FormStore`. */
+    uri: {
+        type: StringConstructor;
+    };
+    /** When true, the form content scrolls and the action bar stays pinned. */
+    scrollable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** When true, the component takes the full height of its parent. */
+    fullHeight: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+export declare const FormWithActionsEmits: string[];

package/form-with-actions.component.vue.d.ts

@@ -1,13 +1,3 @@
-import { FormSchemaModel } from '../../core/src/index.ts';
-type __VLS_Props = {
-    id: string;
-    createTitle: string;
-    updateTitle?: string;
-    formSchema: Pick<FormSchemaModel, 'form' | 'uri'>;
-};
-type __VLS_PublicProps = {
-    modelValue?: any;
-} & __VLS_Props;
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -17,13 +7,78 @@ declare function __VLS_template(): {
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    success: (...args: any[]) => void;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    createTitle: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    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>;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: any) => void;
-}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onSuccess?: ((...args: any[]) => any) | undefined;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    createTitle: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    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>;
+    };
+}>> & Readonly<{
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+}>, {
+    scrollable: boolean;
+    fullHeight: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/form-with-table.component.properties.d.ts

@@ -0,0 +1,58 @@
+import { PropType } from 'vue';
+import { JsonFormsLayout } from '../../core/src/index.ts';
+import { TableAction } from '../../../ui/src/index.ts';
+/** Generic record type used for form/table data payloads. */
+export type Data = {
+    [key: string]: any;
+};
+export declare const FormWithTableProperties: {
+    /** Unique identifier used to generate the table form id (`form_table_${id}`). */
+    id: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    /** Heading displayed above the table. */
+    tableTitle: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    /** Title shown in the create modal. */
+    createTitle: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    /** Title shown in the edit modal. Falls back to `createTitle`. */
+    updateTitle: {
+        type: StringConstructor;
+    };
+    /** Overrides `uri` as the data source for the table. */
+    dataUri: {
+        type: StringConstructor;
+    };
+    /** Custom action buttons rendered in each table row. */
+    tableActions: {
+        type: PropType<TableAction[]>;
+    };
+    /** Layout for the create/edit modal form. */
+    form: {
+        type: PropType<JsonFormsLayout>;
+    };
+    /** Layout for the table columns. */
+    table: {
+        type: PropType<JsonFormsLayout>;
+    };
+    /** Layout for the table filter controls. */
+    filter: {
+        type: PropType<JsonFormsLayout>;
+    };
+    /** Base URI used by `FormStore` for CRUD operations and as the default table data source. */
+    uri: {
+        type: StringConstructor;
+    };
+    /** Default data used when opening the create modal. */
+    initialData: {
+        type: PropType<Data>;
+        default: () => {};
+    };
+};
+export declare const FormWithTableEmits: string[];

package/form-with-table.component.vue.d.ts

@@ -1,25 +1,81 @@
-import { FormSchemaModel } from '../../core/src/index.ts';
-import { TableAction } from '../../../ui/src/index.ts';
-import { FormEventListener } from './state/form.state';
-type Data = {
-    [key: string]: any;
-};
-type __VLS_Props = {
-    id: string;
-    tableTitle: string;
-    createTitle: string;
-    updateTitle?: string;
-    dataUri?: string;
-    tableActions?: TableAction[];
-    formSchema: FormSchemaModel;
-    initialData?: Data;
-    eventListener?: FormEventListener;
-};
-declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    editData: (args_0: Data) => any;
-}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onEditData?: ((args_0: Data) => any) | undefined;
-}>, {
+import { Data } from './form-with-table.component.properties';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    tableTitle: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    createTitle: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    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: () => {};
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    tableTitle: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    createTitle: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    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: () => {};
+    };
+}>> & Readonly<{}>, {
     initialData: Data;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/form.component.properties.d.ts

@@ -0,0 +1,45 @@
+import { JsonFormsRendererRegistryEntry } from '@jsonforms/core';
+import { PropType } from 'vue';
+/** Generic record type used for form data payloads. */
+export type Data = {
+    [key: string]: any;
+};
+/** Payload emitted by the `submit` event of `FormComponent`. */
+export type SubmitFormEvent = {
+    /** Current form data at the time of submission. */
+    data: Data;
+    /** Whether the form passed validation. */
+    valid: boolean;
+};
+export declare const FormComponentProperties: {
+    /** Unique id applied to the `<form>` element and used as `<json-forms>` key. */
+    id: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    /** JSON schema describing the shape of the form data. */
+    schema: {
+        type: PropType<any>;
+        required: boolean;
+    };
+    /** UI schema describing the layout and controls. */
+    uiSchema: {
+        type: PropType<any>;
+        required: boolean;
+    };
+    /** Extra renderer entries merged in front of the built-in tailwind renderers. */
+    renderers: {
+        type: PropType<JsonFormsRendererRegistryEntry[]>;
+        default: undefined;
+    };
+    /** Disables all controls inside the form. */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    formData: {
+        type: PropType<Data>;
+        default: () => {};
+    };
+};
+export declare const FormComponentEmits: string[];

package/form.component.vue.d.ts

@@ -1,38 +1,57 @@
-import { JsonFormsRendererRegistryEntry } from '@jsonforms/core';
-import { FormEventListener } from './state/form.state';
-type Data = {
-    [key: string]: any;
-};
-export type SubmitFormEvent = {
-    data: Data;
-    valid: boolean;
-};
-type __VLS_Props = {
-    id: string;
-    schema: any;
-    uischema: any;
-    renderers?: JsonFormsRendererRegistryEntry[];
-    eventListener?: FormEventListener;
-    disabled?: boolean;
-};
-type __VLS_PublicProps = {
-    modelValue?: any;
-} & __VLS_Props;
-declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    change: (...args: any[]) => void;
-    submit: (...args: any[]) => void;
-    errors: (...args: any[]) => void;
-    valid: (...args: any[]) => void;
-    "update:modelValue": (value: any) => void;
-}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onChange?: ((...args: any[]) => any) | undefined;
-    onSubmit?: ((...args: any[]) => any) | undefined;
-    onErrors?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
-    onValid?: ((...args: any[]) => any) | undefined;
-}>, {
+import { Data } from './form.component.properties';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    schema: {
+        type: import('vue').PropType<any>;
+        required: boolean;
+    };
+    uiSchema: {
+        type: import('vue').PropType<any>;
+        required: boolean;
+    };
+    renderers: {
+        type: import('vue').PropType<import('@jsonforms/core').JsonFormsRendererRegistryEntry[]>;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    formData: {
+        type: import('vue').PropType<Data>;
+        default: () => {};
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    schema: {
+        type: import('vue').PropType<any>;
+        required: boolean;
+    };
+    uiSchema: {
+        type: import('vue').PropType<any>;
+        required: boolean;
+    };
+    renderers: {
+        type: import('vue').PropType<import('@jsonforms/core').JsonFormsRendererRegistryEntry[]>;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    formData: {
+        type: import('vue').PropType<Data>;
+        default: () => {};
+    };
+}>> & Readonly<{}>, {
     disabled: boolean;
-    renderers: JsonFormsRendererRegistryEntry[];
-    eventListener: FormEventListener;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLFormElement>;
+    renderers: import('@jsonforms/core').JsonFormsRendererRegistryEntry[];
+    formData: Data;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLFormElement>;
 export default _default;

package/form.store.d.ts

@@ -1,8 +1,6 @@
-import { FormSchemaModel } from '../../core/src/index.ts';
 export declare class FormStore {
-    private readonly schema;
-    constructor(schema: Pick<FormSchemaModel, 'uri'>);
-    private get uri();
+    private readonly uri;
+    constructor(uri: string);
     delete<T>(data: T & {
         id?: string;
     }): Promise<void>;

package/index.d.ts

@@ -1,12 +1,15 @@
 export * from './form.store';
+export * from './form.component.properties';
+export * from './form-with-actions.component.properties';
+export * from './form-with-table.component.properties';
 export * from './renderes/controls';
 export * from './renderes/array';
 export * from './renderes/layouts';
 export * from './renderes/tester';
-export * from './state/form.state';
 export { default as FormWithTableComponent } from './form-with-table.component.vue';
 export { default as FormWithActions } from './form-with-actions.component.vue';
 export { default as FormComponent } from './form.component.vue';
 export * from './modal';
 export * from './table';
 export * from './repository';
+export * from './composables/useFormEvents';