npm - vanjs-jsf - Versions diffs - 0.0.2 → 0.0.4 - Mend

vanjs-jsf 0.0.2 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/vanjs-jsf.js ADDED Viewed

@@ -0,0 +1,267 @@
+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 ADDED Viewed

@@ -0,0 +1 @@

package/package.json CHANGED Viewed

@@ -1,19 +1,24 @@
 {
   "name": "vanjs-jsf",
-  "version": "0.0.2",
-  "description": "A JSON Schema Form Library for VanJS",
-  "main": "index.js",
-  "files": [ "dist", "README.md" ],
-  "keywords": ["vanjs", "json-schema", "form", "ui-library"],
+  "description": "A JSON Schema Form UI Library for VanJS",
+  "keywords": ["vanjs", "json", "schema", "form", "ui-library"],
+  "version": "0.0.4",
   "author": {
     "name": "Carlos Prados",
     "email": "carlos.prados@gmail.com"
   },
   "license": "Apache-2.0",
+  "type": "module",
+  "files": [ "dist", "README.md" ],
+  "main": "./dist/vanjs-jsf.umd.cjs",
+  "module": "./dist/vanjs-jsf.js",
   "scripts": {
     "dev": "vite",
     "test": "jest",
     "build": "tsc && vite build",
+    "tsc": "tsc",
     "preview": "vite preview"
   },
   "devDependencies": {