@ghentcdh/json-forms-vue 0.0.2-22

package/README.md

@@ -0,0 +1,44 @@
+# 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
+pnpm add @ghentcdh/json-forms-vue
+```
+
+# Add the styling to your project
+
+## Install the libraries
+
+```ssh
+pnpm add @ghentcdh/auth/vue @ghentcdh/auth/backend
+```
+
+## Add the styling
+
+Add the styling to your project by importing the css file in your main.js or App.vue file:
+
+```scss 
+
+```
+
+## Show the form
+
+A json form can be shown using the `FormComponent` component. The component requires a schema and a ui schema to be passed as props, and it uses the `v-model` directive to bind the form data.
+
+```vue
+import {FormComponent} from '@ghentcdh/json-forms-vue';
+
+<div>
+  <FormComponent 
+    :schema="schema"
+    :uischema="uischema"
+    v-model="formData" />
+  <pre>{{formData}}</pre>
+</div>
+```

package/demo/owner.d.ts

@@ -0,0 +1,55 @@
+export declare const OwnerWithRelationsFormDetail: {
+    type: string;
+    properties: {
+        id: {
+            type: string;
+        };
+        createdAt: {
+            type: string;
+            format: string;
+        };
+        name: {
+            type: string;
+        };
+        firstname: {
+            type: string;
+        };
+        age: {
+            type: string;
+        };
+        total: {
+            type: string;
+        };
+        boolean: {
+            type: string;
+        };
+        comment: {
+            type: string;
+        };
+        autocomplete: {
+            type: string;
+        };
+        emails: {
+            type: string;
+            items: {
+                type: string;
+                properties: {
+                    id: {
+                        type: string;
+                    };
+                    createdAt: {
+                        type: string;
+                        format: string;
+                    };
+                    email: {
+                        type: string;
+                    };
+                };
+                required: string[];
+                additionalProperties: boolean;
+            };
+        };
+    };
+    required: string[];
+    additionalProperties: boolean;
+};

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

@@ -0,0 +1,18 @@
+import { FormSchemaModel } from '../../core/src/index.ts';
+type __VLS_Props = {
+    id: string;
+    createTitle: string;
+    updateTitle?: string;
+    formSchema: FormSchemaModel;
+};
+type __VLS_PublicProps = {
+    modelValue?: any;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    success: (...args: any[]) => void;
+    "update:modelValue": (value: any) => void;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSuccess?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

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

@@ -0,0 +1,25 @@
+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;
+}>, {
+    initialData: Data;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/form.component.vue.d.ts

@@ -0,0 +1,36 @@
+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, {
+    valid: (...args: any[]) => void;
+    change: (...args: any[]) => void;
+    submit: (...args: any[]) => void;
+    "update:modelValue": (value: any) => void;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onValid?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+    onSubmit?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {
+    disabled: boolean;
+    renderers: JsonFormsRendererRegistryEntry[];
+    eventListener: FormEventListener;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLFormElement>;
+export default _default;

package/form.store.d.ts

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