vanjs-jsf 0.0.5 → 0.0.8

package/dist/JsfUtils.d.ts

@@ -2,4 +2,3 @@ import { Fields } from "@remoteoss/json-schema-form";
 export declare class JsfUtils {
     static getJsfFieldByName(fields: Fields, name: string): Record<string, unknown> | null;
 }
-//# sourceMappingURL=JsfUtils.d.ts.map

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

@@ -1,4 +1,3 @@
 export declare abstract class VanJSComponent {
     abstract render(): Element;
 }
-//# sourceMappingURL=VanJSComponent.d.ts.map

package/dist/VanJSComponent.js

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

package/dist/VanJsfField.d.ts

@@ -16,6 +16,10 @@ export declare class VanJsfField extends VanJSComponent {
     constructor(field: Record<string, unknown>, initVal: string, handleChange: (field: VanJsfField, value: MultiType) => void);
     get inputType(): string;
     get label(): string;
+    get class(): string;
+    get containerClass(): string;
+    get titleClass(): string;
+    get descriptionClass(): string;
     get description(): string;
     get options(): Option[];
     get isVisible(): boolean;
@@ -23,5 +27,5 @@ export declare class VanJsfField extends VanJSComponent {
     get error(): string;
     set error(val: string);
     render(): Element;
+    isVanJsfFieldArray(fields: any): fields is VanJsfField[];
 }
-//# sourceMappingURL=VanJsfField.d.ts.map

package/dist/VanJsfField.js

@@ -0,0 +1,152 @@
+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;
+var FieldType;
+(function (FieldType) {
+    FieldType["text"] = "text";
+    FieldType["number"] = "number";
+    FieldType["textarea"] = "textarea";
+    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 containerClass() {
+        return this.field.containerClass;
+    }
+    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(() => 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),
+                }));
+                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, link({ rel: "stylesheet", type: "text/css", href: "https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css" }));
+                new pikaday({
+                    field: calendarInput,
+                    format: 'D/M/YYYY',
+                    toString(date, format) {
+                        // 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 `${day}/${month}/${year}`;
+                    },
+                });
+                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),
+                }));
+                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))));
+                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

@@ -1,2 +1 @@
 export declare function jsform(attributes: Record<string, any>, ...children: any[]): HTMLFormElement;
-//# sourceMappingURL=VanJsfForm.d.ts.map

package/dist/VanJsfForm.js

@@ -0,0 +1,117 @@
+import van from "vanjs-core";
+import { createHeadlessForm, } from "@remoteoss/json-schema-form";
+import { VanJsfField } from "./VanJsfField";
+const { form } = van.tags;
+class VanJsfForm {
+    schema;
+    config;
+    headlessForm;
+    formFields;
+    formValues;
+    constructor(jsonSchema, config) {
+        // 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;
+        // Working with parameters
+        this.headlessForm = createHeadlessForm(jsonSchema, config);
+        // 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;
+        console.log(fields);
+        const formValues = {};
+        const vanJsfFields = this.processFields(fields, initialValues, formValues);
+        return { vanJsfFields, formValues };
+    }
+    handleFieldChange(field, value) {
+        console.log(`Field ${field.name} changed to ${value}`);
+        this.formValues[field.name] = value;
+        const { formErrors } = this.headlessForm.handleValidation(this.formValues);
+        console.log("formErrors", formErrors);
+        this.formFields.forEach((f) => {
+            f.isVisible = f.field.isVisible;
+            f.error = formErrors?.[f.name] ?? "";
+        });
+    }
+    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;
+            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);
+            }
+            // 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;
+    if (!config) {
+        config = { initialValues: {}, formValues: {} };
+    }
+    else if (!config.initialValues) {
+        config.initialValues = {};
+    }
+    else if (!config.formValues) {
+        config.formValues = {};
+    }
+    const vanJsfForm = new VanJsfForm(attributes.schema, config);
+    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 handleChange = (e) => {
+        config.formValues = vanJsfForm.formValues;
+    };
+    attributes.onsubmit = handleSubmit;
+    attributes.onchange = handleChange;
+    return form(attributes, ...childrenWithFields);
+}

package/dist/index.d.ts

@@ -1,3 +1 @@
-import { jsform } from "./VanJsfForm";
-export { jsform };
-//# sourceMappingURL=index.d.ts.map
+export { jsform } from "./VanJsfForm";

package/dist/index.js

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