vanjs-jsf 0.0.5 → 0.0.7

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

@@ -24,4 +24,3 @@ export declare class VanJsfField extends VanJSComponent {
     set error(val: string);
     render(): Element;
 }
-//# sourceMappingURL=VanJsfField.d.ts.map

package/dist/VanJsfField.js

@@ -0,0 +1,100 @@
+import van from "vanjs-core";
+import { VanJSComponent } from "./VanJSComponent";
+const { div, p, input, label, textarea, legend } = van.tags;
+var FieldType;
+(function (FieldType) {
+    FieldType["text"] = "text";
+    FieldType["number"] = "number";
+    FieldType["textarea"] = "textarea";
+    FieldType["radio"] = "radio";
+})(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 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"),
+        };
+        switch (this.inputType) {
+            case FieldType.text:
+                el = div(props, label({ for: this.name }, this.label), this.description &&
+                    div({ id: `${this.name}-description` }, this.description), input({
+                    id: this.name,
+                    type: "text",
+                    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 }, this.label), this.description &&
+                    div({ id: `${this.name}-description` }, this.description), textarea({
+                    id: this.name,
+                    name: this.name,
+                    rows: this.field.rows,
+                    cols: this.field.columns,
+                    oninput: (e) => this.handleChange(this, e.target.value),
+                }));
+                break;
+            case FieldType.number:
+                el = div(props, label({ for: this.name }, this.label), this.description &&
+                    div({ id: `${this.name}-description` }, this.description), input({
+                    id: this.name,
+                    type: "number",
+                    value: this.iniVal,
+                    oninput: (e) => this.handleChange(this, e.target.value),
+                }));
+                break;
+            case FieldType.radio:
+                el = div(legend(this.label), this.description && div(this.description), div(this.options?.map((opt) => label(input({
+                    type: "radio",
+                    name: this.name,
+                    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;
+    }
+}

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,106 @@
+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;
+        const formValues = {};
+        const vanJsfFields = fields.map((field) => {
+            // TODO needs to support field sets recursively
+            // Extract the field name as a string
+            const fieldName = field.name;
+            // Determine the initial value for the field
+            // **Important**!: `field.default` is not properly documented in
+            // https://json-schema-form.vercel.app/?path=/docs/api-reference-api--docs
+            // They say the property for default values is `defaultValue` but it's not
+            const initVal = initialValues[fieldName] || field.default || "";
+            // Store the initial value in the form values map
+            formValues[fieldName] = initVal;
+            // Create and return a new VanJsfField instance for this field
+            return new VanJsfField(field, initVal, this.handleFieldChange);
+        });
+        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] ?? "";
+        });
+    }
+}
+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);
+    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);
+    };
+    attributes.onsubmit = handleSubmit;
+    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";

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../lib/VanJsfForm.ts", "../lib/VanJsfField.ts", "../lib/VanJSComponent.ts"],
+  "sourcesContent": ["import van from \"vanjs-core\";\n\nimport {\n  createHeadlessForm,\n  HeadlessFormOutput,\n  Fields,\n  JSONSchemaObjectType,\n} from \"@remoteoss/json-schema-form\";\n\nimport { VanJsfField, MultiType } from \"./VanJsfField\";\n\nconst { form } = van.tags;\n\nclass VanJsfForm {\n  schema: JSONSchemaObjectType;\n  config: Record<string, any>;\n  headlessForm: HeadlessFormOutput;\n  formFields: VanJsfField[];\n  formValues: Record<string, any>;\n\n  constructor(jsonSchema: JSONSchemaObjectType, config: Record<string, any>) {\n    // Bind methods to instance. Needed to pass functions as props to child components\n    //this.handleSubmit = this.handleSubmit.bind(this);\n    this.handleFieldChange = this.handleFieldChange.bind(this);\n    // Receive parameters\n    this.schema = jsonSchema;\n    this.config = config;\n    // Working with parameters\n    this.headlessForm = createHeadlessForm(jsonSchema, config);\n    // Read documentation about `getFieldsAndValuedFromJsf` method below\n    const { vanJsfFields, formValues } = this.getFieldsAndValuesFromJsf(\n      this.headlessForm,\n      this.config.initialValues\n    );\n    this.formFields = vanJsfFields;\n    this.formValues = formValues;\n  }\n\n  /**\n   * Generates fields and their initial values from a headless JSON Schema Form (JSF).\n   * This method processes the fields provided by the headless form, maps them to `VanJsfField` instances,\n   * and initializes the corresponding form values.\n   *\n   * @param headlessForm - The output of the `createHeadlessForm` function, containing metadata and configuration for the form fields.\n   * @param initialValues - A record object where the keys represent field names, and the values are the initial values for the fields.\n   *\n   * @returns An object containing:\n   *  - `vanJsfFields`: An array of `VanJsfField` instances representing the fields in the form.\n   *  - `formValues`: A record object mapping field names to their respective initial values.\n   *\n   * @remarks\n   * - **Field Sets**: The method currently does not support field sets recursively. This needs to be implemented as part of future enhancements.\n   * - **Default Values**:\n   *   - The default values are determined based on the following precedence:\n   *     1. Value in `initialValues`.\n   *     2. The `field.default` property.\n   *     3. An empty string (`\"\"`) if neither is present.\n   *   - 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.\n   *\n   * @example\n   * const { vanJsfFields, formValues } = getFieldsFromJsf(headlessForm, initialValues);\n   * console.log(vanJsfFields); // Array of VanJsfField instances\n   * console.log(formValues);   // Record of field names and their initial values\n   */\n  getFieldsAndValuesFromJsf(\n    headlessForm: HeadlessFormOutput,\n    initialValues: Record<string, any>\n  ): { vanJsfFields: VanJsfField[]; formValues: Record<string, any> } {\n    const fields: Fields = headlessForm.fields;\n    const formValues: Record<string, any> = {};\n    const vanJsfFields: VanJsfField[] = fields.map((field) => {\n      // TODO needs to support field sets recursively\n      // Extract the field name as a string\n      const fieldName: string = field.name as string;\n      // Determine the initial value for the field\n      // **Important**!: `field.default` is not properly documented in\n      // https://json-schema-form.vercel.app/?path=/docs/api-reference-api--docs\n      // They say the property for default values is `defaultValue` but it's not\n      const initVal = initialValues[fieldName] || field.default || \"\";\n      // Store the initial value in the form values map\n      formValues[fieldName] = initVal;\n      // Create and return a new VanJsfField instance for this field\n      return new VanJsfField(field, initVal, this.handleFieldChange);\n    });\n    return { vanJsfFields, formValues };\n  }\n\n  handleFieldChange(field: VanJsfField, value: MultiType) {\n    console.log(`Field ${field.name} changed to ${value}`);\n    this.formValues[field.name] = value;\n    const { formErrors } = this.headlessForm.handleValidation(this.formValues);\n    console.log(\"formErrors\", formErrors);\n    this.formFields.forEach((f) => {\n      f.isVisible = f.field.isVisible as boolean;\n      f.error = formErrors?.[f.name] ?? \"\";\n    });\n  }\n}\n\nexport function jsform(\n  attributes: Record<string, any>,\n  ...children: any[]\n): HTMLFormElement {\n  if (!attributes.schema) {\n    throw new Error(\"JSON Schema is required\");\n  }\n  let config = attributes.config;\n  if (!config) {\n    config = { initialValues: {}, formValues: {} };\n  } else if (!config.initialValues) {\n    config.initialValues = {};\n  } else if (!config.formValues) {\n    config.formValues = {};\n  }\n  const vanJsfForm: VanJsfForm = new VanJsfForm(attributes.schema, config);\n  const fields: Element[] = vanJsfForm.formFields.map((field: VanJsfField) =>\n    field.render()\n  );\n\n  const childrenWithFields = [...fields, ...children]; // Concatenate fields with other children\n\n  const originalOnSubmit = attributes.onsubmit;\n  const handleSubmit = (e: Event) => {\n    e.preventDefault();\n    config.formValues = vanJsfForm.formValues;\n    originalOnSubmit && originalOnSubmit(e);\n  };\n  attributes.onsubmit = handleSubmit;\n  return form(attributes, ...childrenWithFields);\n}\n", "import van, { State } from \"vanjs-core\";\nimport { VanJSComponent } from \"./VanJSComponent\";\n\nconst { div, p, input, label, textarea, legend } = van.tags;\n\nenum FieldType {\n  text = \"text\",\n  number = \"number\",\n  textarea = \"textarea\",\n  radio = \"radio\",\n}\n\nexport interface Option {\n  label: string;\n  value: string;\n  description: string;\n}\n\nexport type MultiType = string | number | boolean;\n\nexport class VanJsfField extends VanJSComponent {\n  name: string;\n  field: Record<string, unknown>;\n  iniVal: MultiType;\n  handleChange: (field: VanJsfField, value: MultiType) => void;\n  isVisibleState: State<boolean>;\n  errorState: State<string>;\n\n  constructor(\n    field: Record<string, unknown>,\n    initVal: string,\n    handleChange: (field: VanJsfField, value: MultiType) => void\n  ) {\n    super();\n    this.field = field;\n    this.name = field.name as string;\n    this.iniVal = initVal;\n    this.handleChange = handleChange;\n    this.isVisibleState = van.state(this.field.isVisible as boolean);\n    this.errorState = van.state(\"\");\n    van.derive(() =>\n      console.log(`Field ${this.name} isVisible: ${this.isVisibleState.val}`)\n    );\n  }\n\n  get inputType(): string {\n    return this.field.inputType as string;\n  }\n  get label(): string {\n    return this.field.label as string;\n  }\n  get description(): string {\n    return this.field.description as string;\n  }\n  get options(): Option[] {\n    return this.field.options as Option[];\n  }\n  get isVisible(): boolean {\n    return this.isVisibleState.val;\n  }\n\n  set isVisible(val: boolean) {\n    this.isVisibleState.val = val;\n  }\n\n  get error(): string {\n    return this.errorState.val;\n  }\n\n  set error(val: string) {\n    this.errorState.val = val;\n  }\n\n  render(): Element {\n    let el: Element;\n    const props: Record<string, any> = {\n      style: () => (this.isVisible ? \"display: block\" : \"display: none\"),\n    };\n    switch (this.inputType) {\n      case FieldType.text:\n        el = div(\n          props,\n          label({ for: this.name }, this.label),\n          this.description &&\n            div({ id: `${this.name}-description` }, this.description),\n          input({\n            id: this.name,\n            type: \"text\",\n            value: this.iniVal,\n            oninput: (e: any) => this.handleChange(this, e.target.value),\n          }),\n          p(() => this.error)\n        );\n        break;\n\n      case FieldType.textarea:\n        el = div(\n          props,\n          label({ for: this.name }, this.label),\n          this.description &&\n            div({ id: `${this.name}-description` }, this.description),\n          textarea({\n            id: this.name,\n            name: this.name,\n            rows: this.field.rows as number,\n            cols: this.field.columns as number,\n            oninput: (e: any) => this.handleChange(this, e.target.value),\n          })\n        );\n        break;\n      case FieldType.number:\n        el = div(\n          props,\n          label({ for: this.name }, this.label),\n          this.description &&\n            div({ id: `${this.name}-description` }, this.description),\n          input({\n            id: this.name,\n            type: \"number\",\n            value: this.iniVal,\n            oninput: (e: any) => this.handleChange(this, e.target.value),\n          })\n        );\n        break;\n      case FieldType.radio:\n        el = div(\n          legend(this.label),\n          this.description && div(this.description),\n          div(\n            this.options?.map((opt: any) =>\n              label(\n                input({\n                  type: \"radio\",\n                  name: this.name,\n                  value: opt.value,\n                  checked: this.iniVal === opt.value,\n                  onchange: (e: any) => this.handleChange(this, e.target.value),\n                }),\n                opt.label,\n                opt.description\n              )\n            )\n          )\n        );\n        break;\n      default:\n        el = div(\n          { style: \"border: 1px dashed gray; padding: 8px;\" },\n          `Field \"${this.name}\" unsupported: The type \"${this.inputType}\" has no UI component built yet.`\n        );\n    }\n    return el;\n  }\n}\n", "export abstract class VanJSComponent {\n  abstract render(): Element;\n}\n"],
+  "mappings": ";AAAA,OAAOA,UAAS;AAEhB;AAAA,EACE;AAAA,OAIK;;;ACPP,OAAO,SAAoB;;;ACApB,IAAe,iBAAf,MAA8B;AAErC;;;ADCA,IAAM,EAAE,KAAK,GAAG,OAAO,OAAO,UAAU,OAAO,IAAI,IAAI;AAiBhD,IAAM,cAAN,cAA0B,eAAe;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA,YACE,OACA,SACA,cACA;AACA,UAAM;AACN,SAAK,QAAQ;AACb,SAAK,OAAO,MAAM;AAClB,SAAK,SAAS;AACd,SAAK,eAAe;AACpB,SAAK,iBAAiB,IAAI,MAAM,KAAK,MAAM,SAAoB;AAC/D,SAAK,aAAa,IAAI,MAAM,EAAE;AAC9B,QAAI;AAAA,MAAO,MACT,QAAQ,IAAI,SAAS,KAAK,IAAI,eAAe,KAAK,eAAe,GAAG,EAAE;AAAA,IACxE;AAAA,EACF;AAAA,EAEA,IAAI,YAAoB;AACtB,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA,EACA,IAAI,QAAgB;AAClB,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA,EACA,IAAI,cAAsB;AACxB,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA,EACA,IAAI,UAAoB;AACtB,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA,EACA,IAAI,YAAqB;AACvB,WAAO,KAAK,eAAe;AAAA,EAC7B;AAAA,EAEA,IAAI,UAAU,KAAc;AAC1B,SAAK,eAAe,MAAM;AAAA,EAC5B;AAAA,EAEA,IAAI,QAAgB;AAClB,WAAO,KAAK,WAAW;AAAA,EACzB;AAAA,EAEA,IAAI,MAAM,KAAa;AACrB,SAAK,WAAW,MAAM;AAAA,EACxB;AAAA,EAEA,SAAkB;AAChB,QAAI;AACJ,UAAM,QAA6B;AAAA,MACjC,OAAO,MAAO,KAAK,YAAY,mBAAmB;AAAA,IACpD;AACA,YAAQ,KAAK,WAAW;AAAA,MACtB,KAAK;AACH,aAAK;AAAA,UACH;AAAA,UACA,MAAM,EAAE,KAAK,KAAK,KAAK,GAAG,KAAK,KAAK;AAAA,UACpC,KAAK,eACH,IAAI,EAAE,IAAI,GAAG,KAAK,IAAI,eAAe,GAAG,KAAK,WAAW;AAAA,UAC1D,MAAM;AAAA,YACJ,IAAI,KAAK;AAAA,YACT,MAAM;AAAA,YACN,OAAO,KAAK;AAAA,YACZ,SAAS,CAAC,MAAW,KAAK,aAAa,MAAM,EAAE,OAAO,KAAK;AAAA,UAC7D,CAAC;AAAA,UACD,EAAE,MAAM,KAAK,KAAK;AAAA,QACpB;AACA;AAAA,MAEF,KAAK;AACH,aAAK;AAAA,UACH;AAAA,UACA,MAAM,EAAE,KAAK,KAAK,KAAK,GAAG,KAAK,KAAK;AAAA,UACpC,KAAK,eACH,IAAI,EAAE,IAAI,GAAG,KAAK,IAAI,eAAe,GAAG,KAAK,WAAW;AAAA,UAC1D,SAAS;AAAA,YACP,IAAI,KAAK;AAAA,YACT,MAAM,KAAK;AAAA,YACX,MAAM,KAAK,MAAM;AAAA,YACjB,MAAM,KAAK,MAAM;AAAA,YACjB,SAAS,CAAC,MAAW,KAAK,aAAa,MAAM,EAAE,OAAO,KAAK;AAAA,UAC7D,CAAC;AAAA,QACH;AACA;AAAA,MACF,KAAK;AACH,aAAK;AAAA,UACH;AAAA,UACA,MAAM,EAAE,KAAK,KAAK,KAAK,GAAG,KAAK,KAAK;AAAA,UACpC,KAAK,eACH,IAAI,EAAE,IAAI,GAAG,KAAK,IAAI,eAAe,GAAG,KAAK,WAAW;AAAA,UAC1D,MAAM;AAAA,YACJ,IAAI,KAAK;AAAA,YACT,MAAM;AAAA,YACN,OAAO,KAAK;AAAA,YACZ,SAAS,CAAC,MAAW,KAAK,aAAa,MAAM,EAAE,OAAO,KAAK;AAAA,UAC7D,CAAC;AAAA,QACH;AACA;AAAA,MACF,KAAK;AACH,aAAK;AAAA,UACH,OAAO,KAAK,KAAK;AAAA,UACjB,KAAK,eAAe,IAAI,KAAK,WAAW;AAAA,UACxC;AAAA,YACE,KAAK,SAAS;AAAA,cAAI,CAAC,QACjB;AAAA,gBACE,MAAM;AAAA,kBACJ,MAAM;AAAA,kBACN,MAAM,KAAK;AAAA,kBACX,OAAO,IAAI;AAAA,kBACX,SAAS,KAAK,WAAW,IAAI;AAAA,kBAC7B,UAAU,CAAC,MAAW,KAAK,aAAa,MAAM,EAAE,OAAO,KAAK;AAAA,gBAC9D,CAAC;AAAA,gBACD,IAAI;AAAA,gBACJ,IAAI;AAAA,cACN;AAAA,YACF;AAAA,UACF;AAAA,QACF;AACA;AAAA,MACF;AACE,aAAK;AAAA,UACH,EAAE,OAAO,yCAAyC;AAAA,UAClD,UAAU,KAAK,IAAI,4BAA4B,KAAK,SAAS;AAAA,QAC/D;AAAA,IACJ;AACA,WAAO;AAAA,EACT;AACF;;;AD9IA,IAAM,EAAE,KAAK,IAAIC,KAAI;AAErB,IAAM,aAAN,MAAiB;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA,YAAY,YAAkC,QAA6B;AAGzE,SAAK,oBAAoB,KAAK,kBAAkB,KAAK,IAAI;AAEzD,SAAK,SAAS;AACd,SAAK,SAAS;AAEd,SAAK,eAAe,mBAAmB,YAAY,MAAM;AAEzD,UAAM,EAAE,cAAc,WAAW,IAAI,KAAK;AAAA,MACxC,KAAK;AAAA,MACL,KAAK,OAAO;AAAA,IACd;AACA,SAAK,aAAa;AAClB,SAAK,aAAa;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA4BA,0BACE,cACA,eACkE;AAClE,UAAM,SAAiB,aAAa;AACpC,UAAM,aAAkC,CAAC;AACzC,UAAM,eAA8B,OAAO,IAAI,CAAC,UAAU;AAGxD,YAAM,YAAoB,MAAM;AAKhC,YAAM,UAAU,cAAc,SAAS,KAAK,MAAM,WAAW;AAE7D,iBAAW,SAAS,IAAI;AAExB,aAAO,IAAI,YAAY,OAAO,SAAS,KAAK,iBAAiB;AAAA,IAC/D,CAAC;AACD,WAAO,EAAE,cAAc,WAAW;AAAA,EACpC;AAAA,EAEA,kBAAkB,OAAoB,OAAkB;AACtD,YAAQ,IAAI,SAAS,MAAM,IAAI,eAAe,KAAK,EAAE;AACrD,SAAK,WAAW,MAAM,IAAI,IAAI;AAC9B,UAAM,EAAE,WAAW,IAAI,KAAK,aAAa,iBAAiB,KAAK,UAAU;AACzE,YAAQ,IAAI,cAAc,UAAU;AACpC,SAAK,WAAW,QAAQ,CAAC,MAAM;AAC7B,QAAE,YAAY,EAAE,MAAM;AACtB,QAAE,QAAQ,aAAa,EAAE,IAAI,KAAK;AAAA,IACpC,CAAC;AAAA,EACH;AACF;AAEO,SAAS,OACd,eACG,UACc;AACjB,MAAI,CAAC,WAAW,QAAQ;AACtB,UAAM,IAAI,MAAM,yBAAyB;AAAA,EAC3C;AACA,MAAI,SAAS,WAAW;AACxB,MAAI,CAAC,QAAQ;AACX,aAAS,EAAE,eAAe,CAAC,GAAG,YAAY,CAAC,EAAE;AAAA,EAC/C,WAAW,CAAC,OAAO,eAAe;AAChC,WAAO,gBAAgB,CAAC;AAAA,EAC1B,WAAW,CAAC,OAAO,YAAY;AAC7B,WAAO,aAAa,CAAC;AAAA,EACvB;AACA,QAAM,aAAyB,IAAI,WAAW,WAAW,QAAQ,MAAM;AACvE,QAAM,SAAoB,WAAW,WAAW;AAAA,IAAI,CAAC,UACnD,MAAM,OAAO;AAAA,EACf;AAEA,QAAM,qBAAqB,CAAC,GAAG,QAAQ,GAAG,QAAQ;AAElD,QAAM,mBAAmB,WAAW;AACpC,QAAM,eAAe,CAAC,MAAa;AACjC,MAAE,eAAe;AACjB,WAAO,aAAa,WAAW;AAC/B,wBAAoB,iBAAiB,CAAC;AAAA,EACxC;AACA,aAAW,WAAW;AACtB,SAAO,KAAK,YAAY,GAAG,kBAAkB;AAC/C;",
+  "names": ["van", "van"]
+}

package/dist/main.d.ts

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=main.d.ts.map

package/dist/main.js

@@ -0,0 +1,78 @@
+import van from "vanjs-core";
+import { jsform } from "./index";
+const { div, p, h1, button } = van.tags;
+const jsonSchemaDemo = {
+    type: "object",
+    additionalProperties: false,
+    properties: {
+        has_pet: {
+            title: "Has Pet",
+            description: "Do you have a pet?",
+            oneOf: [
+                { title: "Yes", const: "yes" },
+                { title: "No", const: "no" },
+            ],
+            "x-jsf-presentation": { inputType: "radio" },
+            type: "string",
+        },
+        pet_name: {
+            title: "Pet's name",
+            description: "What's your pet's name?",
+            "x-jsf-presentation": { inputType: "text" },
+            type: "string",
+        },
+        pet_age: {
+            title: "Pet's age",
+            description: "What's your pet's age? With more than 5 years, we need to know more about your pet.",
+            "x-jsf-presentation": { inputType: "number" },
+            type: "number",
+            default: 1,
+        },
+        dietary_needs: {
+            title: "Dietary needs",
+            description: "What are your pet's dietary needs?",
+            "x-jsf-presentation": { inputType: "textarea", rows: 15, columns: 50 },
+            type: "string",
+        },
+    },
+    required: ["has_pet"],
+    "x-jsf-order": ["has_pet", "pet_name", "pet_age", "dietary_needs"],
+    allOf: [
+        {
+            if: { properties: { has_pet: { const: "yes" } }, required: ["has_pet"] },
+            then: { required: ["pet_age", "pet_name"] },
+            else: { properties: { pet_age: false, pet_name: false } },
+        },
+        {
+            if: {
+                properties: { has_pet: { const: "yes" }, pet_age: { minimum: 5 } },
+                required: ["pet_age"],
+            },
+            then: { required: ["dietary_needs"] },
+            else: { properties: { dietary_needs: false } },
+        },
+    ],
+};
+// App
+const App = () => {
+    const initialValues = { pet_name: "Simon" };
+    const jsfConfig = {
+        strictInputType: false,
+        initialValues: initialValues,
+        formValues: initialValues,
+    };
+    const handleOnSubmit = (e) => {
+        e.preventDefault();
+        const values = jsfConfig.formValues;
+        alert(`Submitted successfully: ${JSON.stringify(values, null, 2)}`);
+        console.log("Submitted!", values);
+    };
+    return div(h1("json-schema-form + VanJS"), p("This demo uses VanJS without any other form library."), jsform({
+        name: "my-jsf-form",
+        schema: jsonSchemaDemo,
+        config: jsfConfig,
+        onsubmit: handleOnSubmit,
+    }, button({ type: "submit" }, "Submit")));
+};
+// Render the app
+van.add(document.body, App());

package/package.json

@@ -1,36 +1,44 @@
 {
   "name": "vanjs-jsf",
   "description": "A JSON Schema Form UI Library for VanJS",
-  "keywords": ["vanjs", "json", "schema", "form", "ui-library"],
-  "version": "0.0.5",
+  "keywords": [
+    "vanjs",
+    "json",
+    "schema",
+    "form",
+    "ui-library"
+  ],
+  "version": "0.0.7",
   "author": {
     "name": "Carlos Prados",
     "email": "carlos.prados@gmail.com"
   },
   "license": "Apache-2.0",
 
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "type": "module",
-  "files": [ "dist", "README.md" ],
-  "main": "./dist/vanjs-jsf.umd.cjs",
-  "module": "./dist/vanjs-jsf.js",
-  
+  "files": [
+    "dist",
+    "README.md"
+  ],
+
   "scripts": {
-    "dev": "vite",
-    "test": "jest",
-    "build": "tsc && vite build && tsc",
-    "tsc": "tsc",
-    "preview": "vite preview"
+    "build": "node build.js",
+    "types": "tsc",
+    "dev": "node build.js --watch & vite"
   },
-  "devDependencies": {
-    "@types/jest": "^29.5.14",
-    "jest": "^29.7.0",
-    "ts-jest": "^29.2.5",
-    "typescript": "^5.7.2",
-    "vite": "^6.0.3"
+  "peerDependencies": {
+    "esbuild": "^0.24.2",
+    "typescript": "^5.7.3"
   },
   "dependencies": {
-    "@remoteoss/json-schema-form": "^0.11.8-beta.0",
-    "vanjs-core": "^1.5.2",
-    "vanjs-ext": "^0.6.1"
+    "@remoteoss/json-schema-form": "^0.11.9-beta.0",
+    "vanjs-core": "^1.5.3",
+    "vanjs-ext": "^0.6.2"
+  },
+  "devDependencies": {
+    "vite": "^6.0.9"
   }
 }

package/dist/JsfUtils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"JsfUtils.d.ts","sourceRoot":"","sources":["../lib/JsfUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,qBAAa,QAAQ;IACnB,MAAM,CAAC,iBAAiB,CACtB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,GACX,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;CAQlC"}

package/dist/VanJSComponent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"VanJSComponent.d.ts","sourceRoot":"","sources":["../lib/VanJSComponent.ts"],"names":[],"mappings":"AAAA,8BAAsB,cAAc;IAClC,QAAQ,CAAC,MAAM,IAAI,OAAO;CAC3B"}

package/dist/VanJsfField.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"VanJsfField.d.ts","sourceRoot":"","sources":["../lib/VanJsfField.ts"],"names":[],"mappings":"AAAA,OAAY,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAWlD,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAElD,qBAAa,WAAY,SAAQ,cAAc;IAC7C,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,MAAM,EAAE,SAAS,CAAC;IAClB,YAAY,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC7D,cAAc,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAC/B,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;gBAGxB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,OAAO,EAAE,MAAM,EACf,YAAY,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI;IAc9D,IAAI,SAAS,IAAI,MAAM,CAEtB;IACD,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,WAAW,IAAI,MAAM,CAExB;IACD,IAAI,OAAO,IAAI,MAAM,EAAE,CAEtB;IACD,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,SAAS,CAAC,GAAG,EAAE,OAAO,EAEzB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAEpB;IAED,MAAM,IAAI,OAAO;CAgFlB"}

package/dist/VanJsfForm.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"VanJsfForm.d.ts","sourceRoot":"","sources":["../lib/VanJsfForm.ts"],"names":[],"mappings":"AAmGA,wBAAgB,MAAM,CACpB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC/B,GAAG,QAAQ,EAAE,GAAG,EAAE,GACjB,eAAe,CA2BjB"}

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/main.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../lib/main.ts"],"names":[],"mappings":""}

package/dist/vanjs-jsf.js

@@ -1,267 +0,0 @@
-var c = Object.defineProperty;
-var f = (i, t, e) => t in i ? c(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
-var r = (i, t, e) => f(i, typeof t != "symbol" ? t + "" : t, e);
-import d from "vanjs-core";
-import { createHeadlessForm as g } from "@remoteoss/json-schema-form";
-class y {
-}
-const { div: o, p: V, input: u, label: m, textarea: b, legend: F } = d.tags;
-class v extends y {
-  constructor(e, s, n) {
-    super();
-    r(this, "name");
-    r(this, "field");
-    r(this, "iniVal");
-    r(this, "handleChange");
-    r(this, "isVisibleState");
-    r(this, "errorState");
-    this.field = e, this.name = e.name, this.iniVal = s, this.handleChange = n, this.isVisibleState = d.state(this.field.isVisible), this.errorState = d.state(""), d.derive(
-      () => console.log(`Field ${this.name} isVisible: ${this.isVisibleState.val}`)
-    );
-  }
-  get inputType() {
-    return this.field.inputType;
-  }
-  get label() {
-    return this.field.label;
-  }
-  get description() {
-    return this.field.description;
-  }
-  get options() {
-    return this.field.options;
-  }
-  get isVisible() {
-    return this.isVisibleState.val;
-  }
-  set isVisible(e) {
-    this.isVisibleState.val = e;
-  }
-  get error() {
-    return this.errorState.val;
-  }
-  set error(e) {
-    this.errorState.val = e;
-  }
-  render() {
-    var n;
-    let e;
-    const s = {
-      style: () => this.isVisible ? "display: block" : "display: none"
-    };
-    switch (this.inputType) {
-      case "text":
-        e = o(
-          s,
-          m({ for: this.name }, this.label),
-          this.description && o({ id: `${this.name}-description` }, this.description),
-          u({
-            id: this.name,
-            type: "text",
-            value: this.iniVal,
-            oninput: (a) => this.handleChange(this, a.target.value)
-          }),
-          V(() => this.error)
-        );
-        break;
-      case "textarea":
-        e = o(
-          s,
-          m({ for: this.name }, this.label),
-          this.description && o({ id: `${this.name}-description` }, this.description),
-          b({
-            id: this.name,
-            name: this.name,
-            rows: this.field.rows,
-            cols: this.field.columns,
-            oninput: (a) => this.handleChange(this, a.target.value)
-          })
-        );
-        break;
-      case "number":
-        e = o(
-          s,
-          m({ for: this.name }, this.label),
-          this.description && o({ id: `${this.name}-description` }, this.description),
-          u({
-            id: this.name,
-            type: "number",
-            value: this.iniVal,
-            oninput: (a) => this.handleChange(this, a.target.value)
-          })
-        );
-        break;
-      case "radio":
-        e = o(
-          F(this.label),
-          this.description && o(this.description),
-          o(
-            (n = this.options) == null ? void 0 : n.map(
-              (a) => m(
-                u({
-                  type: "radio",
-                  name: this.name,
-                  value: a.value,
-                  checked: this.iniVal === a.value,
-                  onchange: (l) => this.handleChange(this, l.target.value)
-                }),
-                a.label,
-                a.description
-              )
-            )
-          )
-        );
-        break;
-      default:
-        e = o(
-          { style: "border: 1px dashed gray; padding: 8px;" },
-          `Field "${this.name}" unsupported: The type "${this.inputType}" has no UI component built yet.`
-        );
-    }
-    return e;
-  }
-}
-const { form: S } = d.tags;
-class _ {
-  constructor(t, e) {
-    r(this, "schema");
-    r(this, "config");
-    r(this, "headlessForm");
-    r(this, "formFields");
-    r(this, "formValues");
-    this.handleFieldChange = this.handleFieldChange.bind(this), this.schema = t, this.config = e, this.headlessForm = g(t, e);
-    const { vanJsfFields: s, formValues: n } = this.getFieldsAndValuesFromJsf(
-      this.headlessForm,
-      this.config.initialValues
-    );
-    this.formFields = s, this.formValues = n;
-  }
-  /**
-   * 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(t, e) {
-    const s = t.fields, n = {};
-    return { vanJsfFields: s.map((l) => {
-      const p = l.name, h = e[p] || l.default || "";
-      return n[p] = h, new v(l, h, this.handleFieldChange);
-    }), formValues: n };
-  }
-  handleFieldChange(t, e) {
-    console.log(`Field ${t.name} changed to ${e}`), this.formValues[t.name] = e;
-    const { formErrors: s } = this.headlessForm.handleValidation(this.formValues);
-    console.log("formErrors", s), this.formFields.forEach((n) => {
-      n.isVisible = n.field.isVisible, n.error = (s == null ? void 0 : s[n.name]) ?? "";
-    });
-  }
-}
-function x(i, ...t) {
-  if (!i.schema)
-    throw new Error("JSON Schema is required");
-  let e = i.config;
-  e ? e.initialValues ? e.formValues || (e.formValues = {}) : e.initialValues = {} : e = { initialValues: {}, formValues: {} };
-  const s = new _(i.schema, e), a = [...s.formFields.map(
-    (h) => h.render()
-  ), ...t], l = i.onsubmit, p = (h) => {
-    h.preventDefault(), e.formValues = s.formValues, l && l(h);
-  };
-  return i.onsubmit = p, S(i, ...a);
-}
-const { div: J, p: C, h1: $, button: w } = d.tags, T = {
-  type: "object",
-  additionalProperties: !1,
-  properties: {
-    has_pet: {
-      title: "Has Pet",
-      description: "Do you have a pet?",
-      oneOf: [
-        { title: "Yes", const: "yes" },
-        { title: "No", const: "no" }
-      ],
-      "x-jsf-presentation": { inputType: "radio" },
-      type: "string"
-    },
-    pet_name: {
-      title: "Pet's name",
-      description: "What's your pet's name?",
-      "x-jsf-presentation": { inputType: "text" },
-      type: "string"
-    },
-    pet_age: {
-      title: "Pet's age",
-      description: "What's your pet's age? With more than 5 years, we need to know more about your pet.",
-      "x-jsf-presentation": { inputType: "number" },
-      type: "number",
-      default: 1
-    },
-    dietary_needs: {
-      title: "Dietary needs",
-      description: "What are your pet's dietary needs?",
-      "x-jsf-presentation": { inputType: "textarea", rows: 15, columns: 50 },
-      type: "string"
-    }
-  },
-  required: ["has_pet"],
-  "x-jsf-order": ["has_pet", "pet_name", "pet_age", "dietary_needs"],
-  allOf: [
-    {
-      if: { properties: { has_pet: { const: "yes" } }, required: ["has_pet"] },
-      then: { required: ["pet_age", "pet_name"] },
-      else: { properties: { pet_age: !1, pet_name: !1 } }
-    },
-    {
-      if: {
-        properties: { has_pet: { const: "yes" }, pet_age: { minimum: 5 } },
-        required: ["pet_age"]
-      },
-      then: { required: ["dietary_needs"] },
-      else: { properties: { dietary_needs: !1 } }
-    }
-  ]
-}, j = () => {
-  const i = { pet_name: "Simon" }, t = {
-    strictInputType: !1,
-    initialValues: i,
-    formValues: i
-  }, e = (s) => {
-    s.preventDefault();
-    const n = t.formValues;
-    alert(`Submitted successfully: ${JSON.stringify(n, null, 2)}`), console.log("Submitted!", n);
-  };
-  return J(
-    $("json-schema-form + VanJS"),
-    C("This demo uses VanJS without any other form library."),
-    x(
-      {
-        name: "my-jsf-form",
-        schema: T,
-        config: t,
-        onsubmit: e
-      },
-      w({ type: "submit" }, "Submit")
-    )
-  );
-};
-d.add(document.body, j());

package/dist/vanjs-jsf.umd.cjs

@@ -1 +0,0 @@
-(function(s,n){typeof exports=="object"&&typeof module<"u"?n(require("vanjs-core"),require("@remoteoss/json-schema-form")):typeof define=="function"&&define.amd?define(["vanjs-core","@remoteoss/json-schema-form"],n):(s=typeof globalThis<"u"?globalThis:s||self,n(s.van,s.jsonSchemaForm))})(this,function(s,n){"use strict";var $=Object.defineProperty;var w=(s,n,m)=>n in s?$(s,n,{enumerable:!0,configurable:!0,writable:!0,value:m}):s[n]=m;var l=(s,n,m)=>w(s,typeof n!="symbol"?n+"":n,m);class m{}const{div:h,p:g,input:f,label:u,textarea:y,legend:V}=s.tags;class b extends m{constructor(e,t,i){super();l(this,"name");l(this,"field");l(this,"iniVal");l(this,"handleChange");l(this,"isVisibleState");l(this,"errorState");this.field=e,this.name=e.name,this.iniVal=t,this.handleChange=i,this.isVisibleState=s.state(this.field.isVisible),this.errorState=s.state(""),s.derive(()=>console.log(`Field ${this.name} isVisible: ${this.isVisibleState.val}`))}get inputType(){return this.field.inputType}get label(){return this.field.label}get description(){return this.field.description}get options(){return this.field.options}get isVisible(){return this.isVisibleState.val}set isVisible(e){this.isVisibleState.val=e}get error(){return this.errorState.val}set error(e){this.errorState.val=e}render(){var i;let e;const t={style:()=>this.isVisible?"display: block":"display: none"};switch(this.inputType){case"text":e=h(t,u({for:this.name},this.label),this.description&&h({id:`${this.name}-description`},this.description),f({id:this.name,type:"text",value:this.iniVal,oninput:r=>this.handleChange(this,r.target.value)}),g(()=>this.error));break;case"textarea":e=h(t,u({for:this.name},this.label),this.description&&h({id:`${this.name}-description`},this.description),y({id:this.name,name:this.name,rows:this.field.rows,cols:this.field.columns,oninput:r=>this.handleChange(this,r.target.value)}));break;case"number":e=h(t,u({for:this.name},this.label),this.description&&h({id:`${this.name}-description`},this.description),f({id:this.name,type:"number",value:this.iniVal,oninput:r=>this.handleChange(this,r.target.value)}));break;case"radio":e=h(V(this.label),this.description&&h(this.description),h((i=this.options)==null?void 0:i.map(r=>u(f({type:"radio",name:this.name,value:r.value,checked:this.iniVal===r.value,onchange:d=>this.handleChange(this,d.target.value)}),r.label,r.description))));break;default:e=h({style:"border: 1px dashed gray; padding: 8px;"},`Field "${this.name}" unsupported: The type "${this.inputType}" has no UI component built yet.`)}return e}}const{form:F}=s.tags;class S{constructor(a,e){l(this,"schema");l(this,"config");l(this,"headlessForm");l(this,"formFields");l(this,"formValues");this.handleFieldChange=this.handleFieldChange.bind(this),this.schema=a,this.config=e,this.headlessForm=n.createHeadlessForm(a,e);const{vanJsfFields:t,formValues:i}=this.getFieldsAndValuesFromJsf(this.headlessForm,this.config.initialValues);this.formFields=t,this.formValues=i}getFieldsAndValuesFromJsf(a,e){const t=a.fields,i={};return{vanJsfFields:t.map(d=>{const c=d.name,p=e[c]||d.default||"";return i[c]=p,new b(d,p,this.handleFieldChange)}),formValues:i}}handleFieldChange(a,e){console.log(`Field ${a.name} changed to ${e}`),this.formValues[a.name]=e;const{formErrors:t}=this.headlessForm.handleValidation(this.formValues);console.log("formErrors",t),this.formFields.forEach(i=>{i.isVisible=i.field.isVisible,i.error=(t==null?void 0:t[i.name])??""})}}function v(o,...a){if(!o.schema)throw new Error("JSON Schema is required");let e=o.config;e?e.initialValues?e.formValues||(e.formValues={}):e.initialValues={}:e={initialValues:{},formValues:{}};const t=new S(o.schema,e),r=[...t.formFields.map(p=>p.render()),...a],d=o.onsubmit,c=p=>{p.preventDefault(),e.formValues=t.formValues,d&&d(p)};return o.onsubmit=c,F(o,...r)}const{div:_,p:j,h1:x,button:J}=s.tags,T={type:"object",additionalProperties:!1,properties:{has_pet:{title:"Has Pet",description:"Do you have a pet?",oneOf:[{title:"Yes",const:"yes"},{title:"No",const:"no"}],"x-jsf-presentation":{inputType:"radio"},type:"string"},pet_name:{title:"Pet's name",description:"What's your pet's name?","x-jsf-presentation":{inputType:"text"},type:"string"},pet_age:{title:"Pet's age",description:"What's your pet's age? With more than 5 years, we need to know more about your pet.","x-jsf-presentation":{inputType:"number"},type:"number",default:1},dietary_needs:{title:"Dietary needs",description:"What are your pet's dietary needs?","x-jsf-presentation":{inputType:"textarea",rows:15,columns:50},type:"string"}},required:["has_pet"],"x-jsf-order":["has_pet","pet_name","pet_age","dietary_needs"],allOf:[{if:{properties:{has_pet:{const:"yes"}},required:["has_pet"]},then:{required:["pet_age","pet_name"]},else:{properties:{pet_age:!1,pet_name:!1}}},{if:{properties:{has_pet:{const:"yes"},pet_age:{minimum:5}},required:["pet_age"]},then:{required:["dietary_needs"]},else:{properties:{dietary_needs:!1}}}]},C=()=>{const o={pet_name:"Simon"},a={strictInputType:!1,initialValues:o,formValues:o},e=t=>{t.preventDefault();const i=a.formValues;alert(`Submitted successfully: ${JSON.stringify(i,null,2)}`),console.log("Submitted!",i)};return _(x("json-schema-form + VanJS"),j("This demo uses VanJS without any other form library."),v({name:"my-jsf-form",schema:T,config:a,onsubmit:e},J({type:"submit"},"Submit")))};s.add(document.body,C())});