vanjs-jsf 0.0.10 → 0.0.12

package/README.md

@@ -15,6 +15,16 @@ This library aims to provide a robust and flexible solution for dynamically gene
 - [ ] **Validation Support**: Easily integrate JSON Schema-based validation for seamless user input handling.
 - [ ] **Extensible Architecture**: Add custom widgets, field types, and behaviours as needed.
 
+### Available components
+The currently supported form element types are:
+ - text = "text",
+ - number = "number",
+ - textarea = "textarea",
+ - select = "select",
+ - radio = "radio",
+ - date = "date",
+ - fieldset = "fieldset"
+
 ### Use Cases
 
 - Quickly generate forms for dashboards, admin panels, and dynamic web applications.

package/dist/VanJsfField.d.ts

@@ -3,7 +3,8 @@ import { VanJSComponent } from "./VanJSComponent";
 export interface Option {
     label: string;
     value: string;
-    description: string;
+    description?: string;
+    img?: string;
 }
 export type MultiType = string | number | boolean;
 export declare class VanJsfField extends VanJSComponent {
@@ -17,7 +18,10 @@ export declare class VanJsfField extends VanJSComponent {
     get inputType(): string;
     get label(): string;
     get class(): string;
+    get errorClass(): string;
+    get codemirrorExtension(): Array<any>;
     get containerClass(): string;
+    get containerId(): string;
     get titleClass(): string;
     get descriptionClass(): string;
     get description(): string;

package/dist/VanJsfField.js

@@ -1,16 +1,39 @@
 import van from "vanjs-core";
 import { VanJSComponent } from "./VanJSComponent";
 import pikaday from "pikaday";
-const { div, p, input, label, textarea, legend, link, fieldset, span } = van.tags;
+import { basicSetup, EditorView } from "codemirror";
+import { javascript, esLint } from "@codemirror/lang-javascript";
+import { json, jsonParseLinter } from "@codemirror/lang-json";
+import { lintGutter, linter, forEachDiagnostic } from "@codemirror/lint";
+import * as eslint from "eslint-linter-browserify";
+import globals from "globals";
+const { div, p, input, label, textarea, legend, link, fieldset, span, select, option } = van.tags;
 var FieldType;
 (function (FieldType) {
     FieldType["text"] = "text";
+    FieldType["code"] = "code";
     FieldType["number"] = "number";
     FieldType["textarea"] = "textarea";
+    FieldType["select"] = "select";
     FieldType["radio"] = "radio";
     FieldType["date"] = "date";
     FieldType["fieldset"] = "fieldset";
 })(FieldType || (FieldType = {}));
+const eslintConfig = {
+    // eslint configuration
+    languageOptions: {
+        globals: {
+            ...globals.node,
+        },
+        parserOptions: {
+            ecmaVersion: 2022,
+            sourceType: "module",
+        },
+    },
+    rules: {
+        semi: ["error", "never"],
+    },
+};
 export class VanJsfField extends VanJSComponent {
     name;
     field;
@@ -37,9 +60,58 @@ export class VanJsfField extends VanJSComponent {
     get class() {
         return this.field.class;
     }
+    get errorClass() {
+        return this.field.errorClass;
+    }
+    get codemirrorExtension() {
+        const theme = EditorView.theme({
+            '.cm-content, .cm-gutter': {
+                "min-height": "150px",
+            },
+            '.cm-content': {
+                "min-height": "150px",
+            },
+            '.cm-gutters': {
+                margin: '1px',
+            },
+            '.cm-scroller': {
+                overflow: 'auto',
+            },
+            '.cm-wrap': {
+                border: '1px solid silver',
+            },
+        });
+        const extensions = [theme, EditorView.updateListener.of((e) => {
+                this.field.error = null;
+                forEachDiagnostic(e.state, (diag) => {
+                    if (diag.severity === "error") {
+                        this.field.error = diag.message;
+                    }
+                });
+                this.handleChange(this, e.state.doc.toString());
+            }), basicSetup, lintGutter()];
+        switch (this.field.codemirrorType) {
+            case "json":
+                extensions.push(json(), linter(jsonParseLinter()));
+                break;
+            case "javascript":
+                extensions.push(javascript(), linter(esLint(new eslint.Linter(), eslintConfig)));
+                break;
+            case "typescript":
+                extensions.push(javascript({ typescript: true }), linter(esLint(new eslint.Linter(), eslintConfig)));
+                break;
+            default:
+                extensions.push(javascript(), linter(esLint(new eslint.Linter(), eslintConfig)));
+                break;
+        }
+        return extensions;
+    }
     get containerClass() {
         return this.field.containerClass;
     }
+    get containerId() {
+        return this.field.containerId;
+    }
     get titleClass() {
         return this.field.titleClass;
     }
@@ -79,7 +151,7 @@ export class VanJsfField extends VanJSComponent {
                     class: this.class ? this.class : '',
                     value: this.iniVal,
                     oninput: (e) => this.handleChange(this, e.target.value),
-                }), p(() => this.error));
+                }), p({ class: this.errorClass }, () => this.error));
                 break;
             case FieldType.textarea:
                 el = div(props, label({ for: this.name, style: "margin-right: 5px;", class: this.titleClass ? this.titleClass : '' }, this.label), this.description &&
@@ -90,7 +162,25 @@ export class VanJsfField extends VanJSComponent {
                     rows: this.field.rows,
                     cols: this.field.columns,
                     oninput: (e) => this.handleChange(this, e.target.value),
-                }));
+                }), p({ class: this.errorClass }, () => this.error));
+                break;
+            case FieldType.code:
+                el = div(props, label({ for: this.name, style: "margin-right: 5px;", class: this.titleClass ? this.titleClass : '' }, this.label), this.description &&
+                    div({ id: `${this.name}-description`, class: this.descriptionClass ? this.descriptionClass : '' }, this.description));
+                new EditorView({
+                    doc: new String(this.iniVal).toString(),
+                    parent: el,
+                    extensions: this.codemirrorExtension
+                });
+                break;
+            case FieldType.select:
+                el = div(props, label({ for: this.name, style: "margin-right: 5px;", class: this.titleClass ? this.titleClass : '' }, this.label), this.description &&
+                    div({ id: `${this.name}-description`, class: this.descriptionClass ? this.descriptionClass : '' }, this.description), select({
+                    id: this.name,
+                    name: this.name,
+                    class: this.class ? this.class : null,
+                    oninput: (e) => this.handleChange(this, e.target.value),
+                }, this.options?.map((opt) => option({ class: this.class ? this.class : null, value: opt.value }, opt.label, opt.description))), p({ class: this.errorClass }, () => this.error));
                 break;
             case FieldType.date:
                 const calendarInput = input({
@@ -102,10 +192,11 @@ export class VanJsfField extends VanJSComponent {
                 });
                 el =
                     div(props, label({ for: this.name, style: "margin-right: 5px;", class: this.titleClass ? this.titleClass : '' }, this.label), this.description &&
-                        div({ id: `${this.name}-description`, class: this.descriptionClass ? this.descriptionClass : '' }, this.description), calendarInput, link({ rel: "stylesheet", type: "text/css", href: "https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css" }));
+                        div({ id: `${this.name}-description`, class: this.descriptionClass ? this.descriptionClass : '' }, this.description), calendarInput, p({ class: this.errorClass }, () => this.error), link({ rel: "stylesheet", type: "text/css", href: "https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css" }));
                 new pikaday({
                     field: calendarInput,
                     format: 'YYYY/MM/DD',
+                    container: el,
                     firstDay: 1,
                     toString(date) {
                         // you should do formatting based on the passed format,
@@ -133,7 +224,7 @@ export class VanJsfField extends VanJSComponent {
                     class: this.class ? this.class : null,
                     value: this.iniVal,
                     oninput: (e) => this.handleChange(this, e.target.value),
-                }));
+                }), p({ class: this.errorClass }, () => this.error));
                 break;
             case FieldType.fieldset:
                 console.log(this.field);
@@ -148,7 +239,7 @@ export class VanJsfField extends VanJSComponent {
                     value: opt.value,
                     checked: this.iniVal === opt.value,
                     onchange: (e) => this.handleChange(this, e.target.value),
-                }), opt.label, opt.description))));
+                }), opt.label, opt.description), p({ class: this.errorClass }, () => this.error))));
                 break;
             default:
                 el = div({ style: "border: 1px dashed gray; padding: 8px;" }, `Field "${this.name}" unsupported: The type "${this.inputType}" has no UI component built yet.`);

package/dist/VanJsfForm.js

@@ -5,18 +5,22 @@ const { form } = van.tags;
 class VanJsfForm {
     schema;
     config;
+    isValid;
     headlessForm;
     formFields;
     formValues;
-    constructor(jsonSchema, config) {
+    constructor(jsonSchema, config, isValid) {
         // Bind methods to instance. Needed to pass functions as props to child components
         //this.handleSubmit = this.handleSubmit.bind(this);
         this.handleFieldChange = this.handleFieldChange.bind(this);
         // Receive parameters
         this.schema = jsonSchema;
         this.config = config;
+        this.isValid = isValid || undefined;
         // Working with parameters
+        const initialValues = { ...config?.initialValues };
         this.headlessForm = createHeadlessForm(jsonSchema, config);
+        this.config.initialValues = initialValues;
         // Read documentation about `getFieldsAndValuedFromJsf` method below
         const { vanJsfFields, formValues } = this.getFieldsAndValuesFromJsf(this.headlessForm, this.config.initialValues);
         this.formFields = vanJsfFields;
@@ -50,20 +54,35 @@ class VanJsfForm {
      */
     getFieldsAndValuesFromJsf(headlessForm, initialValues) {
         const fields = headlessForm.fields;
-        console.log(fields);
         const formValues = {};
+        const values = { ...initialValues };
+        console.log(values);
         const vanJsfFields = this.processFields(fields, initialValues, formValues);
         return { vanJsfFields, formValues };
     }
     handleFieldChange(field, value) {
-        console.log(`Field ${field.name} changed to ${value}`);
+        console.log(value);
+        console.log(field.name);
         this.formValues[field.name] = value;
         const { formErrors } = this.headlessForm.handleValidation(this.formValues);
+        let extraError = false;
         console.log("formErrors", formErrors);
         this.formFields.forEach((f) => {
             f.isVisible = f.field.isVisible;
             f.error = formErrors?.[f.name] ?? "";
+            console.log(f.field.error);
+            if (f.field.error) {
+                extraError = true;
+            }
         });
+        if (this.isValid) {
+            if (formErrors || extraError) {
+                this.isValid.val = false;
+            }
+            else {
+                this.isValid.val = true;
+            }
+        }
     }
     processFields(fields, initialValues, formValues, parentPath = "") {
         return fields.map((field) => {
@@ -73,8 +92,6 @@ class VanJsfForm {
             const initVal = initialValues[fieldPath] || field.default || "";
             // Store the initial value in the form values map
             formValues[fieldPath] = initVal;
-            console.log(formValues);
-            console.log(initialValues);
             // Check if the field has nested fields and process them recursively
             if (field.fields && field.fields.length > 0) {
                 field.fields = this.processFields(field.fields, initialValues, formValues, fieldPath);
@@ -89,6 +106,7 @@ export function jsform(attributes, ...children) {
         throw new Error("JSON Schema is required");
     }
     let config = attributes.config;
+    let isValid = attributes.isValid;
     if (!config) {
         config = { initialValues: {}, formValues: {} };
     }
@@ -98,7 +116,7 @@ export function jsform(attributes, ...children) {
     else if (!config.formValues) {
         config.formValues = {};
     }
-    const vanJsfForm = new VanJsfForm(attributes.schema, config);
+    const vanJsfForm = new VanJsfForm(attributes.schema, config, isValid);
     console.log(vanJsfForm);
     const fields = vanJsfForm.formFields.map((field) => field.render());
     const childrenWithFields = [...fields, ...children]; // Concatenate fields with other children
@@ -108,8 +126,11 @@ export function jsform(attributes, ...children) {
         config.formValues = vanJsfForm.formValues;
         originalOnSubmit && originalOnSubmit(e);
     };
+    const originalOnChange = attributes.onchange;
     const handleChange = (e) => {
+        e.preventDefault();
         config.formValues = vanJsfForm.formValues;
+        originalOnChange && originalOnChange(vanJsfForm, e);
     };
     attributes.onsubmit = handleSubmit;
     attributes.onchange = handleChange;