vanjs-jsf 0.0.18 → 0.0.19

package/dist/JsfUtils.d.ts

@@ -0,0 +1,4 @@
+import { Fields } from "@remoteoss/json-schema-form";
+export declare class JsfUtils {
+    static getJsfFieldByName(fields: Fields, name: string): Record<string, unknown> | null;
+}

package/dist/JsfUtils.js

@@ -0,0 +1,10 @@
+export class JsfUtils {
+    static getJsfFieldByName(fields, name) {
+        for (const field of fields) {
+            if (typeof field["name"] === "string" && field["name"] === name) {
+                return field;
+            }
+        }
+        return null;
+    }
+}

package/dist/VanJSComponent.d.ts

@@ -0,0 +1,3 @@
+export declare abstract class VanJSComponent {
+    abstract render(): Element;
+}

package/dist/VanJSComponent.js

@@ -0,0 +1,2 @@
+export class VanJSComponent {
+}

package/dist/VanJsfField.d.ts

@@ -0,0 +1,36 @@
+import { State } from "vanjs-core";
+import { VanJSComponent } from "./VanJSComponent";
+import "van-ui-extended/dist/index.css";
+export interface Option {
+    label: string;
+    value: string;
+    description?: string;
+    img?: string;
+}
+export type MultiType = string | number | boolean;
+export declare class VanJsfField extends VanJSComponent {
+    name: string;
+    field: Record<string, unknown>;
+    iniVal: MultiType;
+    handleChange: (field: VanJsfField, value: MultiType) => void;
+    isVisibleState: State<boolean>;
+    errorState: State<string>;
+    constructor(field: Record<string, unknown>, initVal: string, handleChange: (field: VanJsfField, value: MultiType) => void);
+    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;
+    get options(): Option[];
+    get isVisible(): boolean;
+    set isVisible(val: boolean);
+    get error(): string;
+    set error(val: string);
+    render(): Element;
+    isVanJsfFieldArray(fields: any): fields is VanJsfField[];
+}

package/dist/VanJsfField.js

@@ -0,0 +1,399 @@
+import van from "vanjs-core";
+import { VanJSComponent } from "./VanJSComponent";
+import pikaday from "pikaday";
+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 { CronComponent } from "van-ui-extended";
+import { dracula } from "thememirror";
+import "van-ui-extended/dist/index.css";
+const { div, p, input, label, textarea, legend, link, fieldset, span, select, option, } = van.tags;
+import globals from "globals";
+var FieldType;
+(function (FieldType) {
+    FieldType["text"] = "text";
+    FieldType["code"] = "code";
+    FieldType["cron"] = "cron";
+    FieldType["number"] = "number";
+    FieldType["textarea"] = "textarea";
+    FieldType["select"] = "select";
+    FieldType["radio"] = "radio";
+    FieldType["date"] = "date";
+    FieldType["fieldset"] = "fieldset";
+})(FieldType || (FieldType = {}));
+export class VanJsfField extends VanJSComponent {
+    name;
+    field;
+    iniVal;
+    handleChange;
+    isVisibleState;
+    errorState;
+    constructor(field, initVal, handleChange) {
+        super();
+        this.field = field;
+        this.name = field.name;
+        this.iniVal = initVal;
+        this.handleChange = handleChange;
+        this.isVisibleState = van.state(this.field.isVisible);
+        this.errorState = van.state("");
+        van.derive(() => console.log(`Field ${this.name} isVisible: ${this.isVisibleState.val}`));
+    }
+    get inputType() {
+        return this.field.inputType;
+    }
+    get label() {
+        return this.field.label;
+    }
+    get class() {
+        return this.field.class;
+    }
+    get errorClass() {
+        return this.field.errorClass;
+    }
+    get codemirrorExtension() {
+        const fieldGlobals = this.field.globals && typeof this.field.globals === "object"
+            ? this.field.globals
+            : {};
+        const eslintConfig = {
+            // eslint configuration
+            languageOptions: {
+                globals: {
+                    ...fieldGlobals,
+                    ...globals.node,
+                },
+                parserOptions: {
+                    ecmaVersion: 2022,
+                    sourceType: "module",
+                },
+            },
+            rules: {
+                "constructor-super": "error",
+                "for-direction": "error",
+                "getter-return": "error",
+                "no-async-promise-executor": "error",
+                "no-case-declarations": "error",
+                "no-class-assign": "error",
+                "no-compare-neg-zero": "error",
+                "no-cond-assign": "error",
+                "no-const-assign": "error",
+                "no-constant-binary-expression": "error",
+                "no-constant-condition": "error",
+                "no-control-regex": "error",
+                "no-debugger": "error",
+                "no-delete-var": "error",
+                "no-dupe-args": "error",
+                "no-dupe-class-members": "error",
+                "no-dupe-else-if": "error",
+                "no-dupe-keys": "error",
+                "no-duplicate-case": "error",
+                "no-empty": "error",
+                "no-empty-character-class": "error",
+                "no-empty-pattern": "error",
+                "no-empty-static-block": "error",
+                "no-ex-assign": "error",
+                "no-extra-boolean-cast": "error",
+                "no-fallthrough": "error",
+                "no-func-assign": "error",
+                "no-global-assign": "error",
+                "no-import-assign": "error",
+                "no-invalid-regexp": "error",
+                "no-irregular-whitespace": "error",
+                "no-loss-of-precision": "error",
+                "no-misleading-character-class": "error",
+                "no-new-native-nonconstructor": "error",
+                "no-nonoctal-decimal-escape": "error",
+                "no-obj-calls": "error",
+                "no-octal": "error",
+                "no-prototype-builtins": "error",
+                "no-redeclare": "error",
+                "no-regex-spaces": "error",
+                "no-self-assign": "error",
+                "no-setter-return": "error",
+                "no-shadow-restricted-names": "error",
+                "no-sparse-arrays": "error",
+                "no-this-before-super": "error",
+                "no-undef": "error",
+                "no-unexpected-multiline": "error",
+                "no-unreachable": "error",
+                "no-unsafe-finally": "error",
+                "no-unsafe-negation": "error",
+                "no-unsafe-optional-chaining": "error",
+                "no-unused-labels": "error",
+                "no-unused-private-class-members": "error",
+                "no-unused-vars": "error",
+                "no-useless-backreference": "error",
+                "no-useless-catch": "error",
+                "no-useless-escape": "error",
+                "no-with": "error",
+                "require-yield": "error",
+                "use-isnan": "error",
+                "valid-typeof": "error",
+            },
+        };
+        const theme = EditorView.theme({
+            ".cm-content, .cm-gutter": {
+                minHeight: this.field["min-height"] &&
+                    typeof this.field["min-height"] === "string"
+                    ? this.field["min-height"]
+                    : "150px",
+            },
+            ".cm-gutters": {
+                margin: "1px",
+            },
+            ".cm-scroller": {
+                overflow: "auto",
+            },
+            ".cm-wrap": {
+                border: "1px solid silver",
+            },
+        }, {
+            dark: true,
+        });
+        const extensions = [
+            dracula,
+            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;
+    }
+    get descriptionClass() {
+        return this.field.descriptionClass;
+    }
+    get description() {
+        return this.field.description;
+    }
+    get options() {
+        return this.field.options;
+    }
+    get isVisible() {
+        return this.isVisibleState.val;
+    }
+    set isVisible(val) {
+        this.isVisibleState.val = val;
+    }
+    get error() {
+        return this.errorState.val;
+    }
+    set error(val) {
+        this.errorState.val = val;
+    }
+    render() {
+        let el;
+        const props = {
+            style: () => (this.isVisible ? "display: block" : "display: none"),
+            class: this.containerClass ? this.containerClass : "",
+        };
+        switch (this.inputType) {
+            case FieldType.text:
+                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), input({
+                    id: this.name,
+                    type: "text",
+                    class: this.class ? this.class : "",
+                    value: this.iniVal,
+                    oninput: (e) => this.handleChange(this, e.target.value),
+                }), 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 &&
+                    div({
+                        id: `${this.name}-description`,
+                        class: this.descriptionClass ? this.descriptionClass : "",
+                    }, this.description), textarea({
+                    id: this.name,
+                    name: this.name,
+                    class: this.class ? this.class : null,
+                    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({
+                    id: this.name,
+                    type: "text",
+                    class: this.class ? this.class : null,
+                    value: this.iniVal,
+                    onchange: (e) => this.handleChange(this, e.target.value),
+                });
+                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, 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,
+                        // but we will just return 'D/M/YYYY' for simplicity
+                        const day = date.getDate();
+                        const month = date.getMonth() + 1;
+                        const year = date.getFullYear();
+                        return `${year}-${("0" + month).slice(-2)}-${("0" + day).slice(-2)}`;
+                    },
+                    parse(dateString, format) {
+                        // dateString is the result of `toString` method
+                        const parts = dateString.split("/");
+                        const day = parseInt(parts[0], 10);
+                        const month = parseInt(parts[1], 10) - 1;
+                        const year = parseInt(parts[2], 10);
+                        return new Date(year, month, day);
+                    },
+                });
+                break;
+            case FieldType.cron:
+                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), p({ class: this.errorClass }, () => this.error), () => {
+                    let ele;
+                    if (CronComponent) {
+                        ele = new CronComponent() || null;
+                        ele.setAttribute("color", "d58512");
+                        ele.setAttribute("extraClass", this.class ? this.class : "");
+                        ele.setAttribute("value", this.iniVal.toString());
+                        ele.oninput = (e) => this.handleChange(this, e.detail.value);
+                    }
+                    return ele;
+                });
+                break;
+            case FieldType.number:
+                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), input({
+                    id: this.name,
+                    type: "number",
+                    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);
+                el = div(props, fieldset(legend({ class: this.titleClass ? this.titleClass : "" }, this.label), this.description &&
+                    span({
+                        id: `${this.name}-description`,
+                        class: this.descriptionClass ? this.descriptionClass : "",
+                    }, this.description), this.isVanJsfFieldArray(this.field.fields)
+                    ? this.field.fields.map((field) => field.render())
+                    : null));
+                break;
+            case FieldType.radio:
+                el = div(legend({ class: this.titleClass ? this.titleClass : "" }, this.label), this.description && div(this.description), div(this.options?.map((opt) => label(input({
+                    type: "radio",
+                    name: this.name,
+                    class: this.class ? this.class : null,
+                    value: opt.value,
+                    checked: this.iniVal === opt.value,
+                    onchange: (e) => this.handleChange(this, e.target.value),
+                }), 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.`);
+        }
+        return el;
+    }
+    isVanJsfFieldArray(fields) {
+        return (Array.isArray(fields) &&
+            fields.every((field) => field instanceof VanJsfField));
+    }
+}

package/dist/VanJsfForm.d.ts

@@ -0,0 +1 @@
+export declare function jsform(attributes: Record<string, any>, ...children: any[]): HTMLFormElement;

package/dist/VanJsfForm.js

@@ -0,0 +1,139 @@
+import van from "vanjs-core";
+import { createHeadlessForm, } from "@remoteoss/json-schema-form";
+import { VanJsfField } from "./VanJsfField";
+const { form } = van.tags;
+class VanJsfForm {
+    schema;
+    config;
+    isValid;
+    headlessForm;
+    formFields;
+    formValues;
+    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;
+        this.formValues = formValues;
+    }
+    /**
+     * Generates fields and their initial values from a headless JSON Schema Form (JSF).
+     * This method processes the fields provided by the headless form, maps them to `VanJsfField` instances,
+     * and initializes the corresponding form values.
+     *
+     * @param headlessForm - The output of the `createHeadlessForm` function, containing metadata and configuration for the form fields.
+     * @param initialValues - A record object where the keys represent field names, and the values are the initial values for the fields.
+     *
+     * @returns An object containing:
+     *  - `vanJsfFields`: An array of `VanJsfField` instances representing the fields in the form.
+     *  - `formValues`: A record object mapping field names to their respective initial values.
+     *
+     * @remarks
+     * - **Field Sets**: The method currently does not support field sets recursively. This needs to be implemented as part of future enhancements.
+     * - **Default Values**:
+     *   - The default values are determined based on the following precedence:
+     *     1. Value in `initialValues`.
+     *     2. The `field.default` property.
+     *     3. An empty string (`""`) if neither is present.
+     *   - Note: The `field.default` property is not clearly documented in the JSF API. The documentation mentions `defaultValue` instead, but this is not observed in practice.
+     *
+     * @example
+     * const { vanJsfFields, formValues } = getFieldsFromJsf(headlessForm, initialValues);
+     * console.log(vanJsfFields); // Array of VanJsfField instances
+     * console.log(formValues);   // Record of field names and their initial values
+     */
+    getFieldsAndValuesFromJsf(headlessForm, initialValues) {
+        const fields = headlessForm.fields;
+        const formValues = {};
+        const values = { ...initialValues };
+        console.log(values);
+        const vanJsfFields = this.processFields(fields, initialValues, formValues);
+        return { vanJsfFields, formValues };
+    }
+    handleFieldChange(field, value) {
+        console.log(value);
+        console.log(field.name);
+        this.formValues[field.name] = value;
+        this.config.formValues = this.formValues;
+        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) => {
+            // Construct the full path for the field
+            const fieldPath = parentPath ? `${parentPath}.${field.name}` : field.name;
+            // Determine the initial value for the field
+            const initVal = initialValues[fieldPath] || field.default || "";
+            // Store the initial value in the form values map
+            formValues[fieldPath] = initVal;
+            // 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);
+            }
+            // Create and return a new VanJsfField instance for this field
+            return new VanJsfField(field, initVal, this.handleFieldChange);
+        });
+    }
+}
+export function jsform(attributes, ...children) {
+    if (!attributes.schema) {
+        throw new Error("JSON Schema is required");
+    }
+    let config = attributes.config;
+    let isValid = attributes.isValid;
+    if (!config) {
+        config = { initialValues: {}, formValues: {} };
+    }
+    else if (!config.initialValues) {
+        config.initialValues = {};
+    }
+    else if (!config.formValues) {
+        config.formValues = {};
+    }
+    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
+    const originalOnSubmit = attributes.onsubmit;
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        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;
+    return form(attributes, ...childrenWithFields);
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { jsform } from "./VanJsfForm";