@coherent.js/forms 1.0.0 → 1.0.1

package/dist/index.js

@@ -1,4 +1,5 @@
 // src/form-builder.js
+import { render as renderToHTML } from "@coherent.js/core";
 var FormBuilder = class {
   constructor(options = {}) {
     this.options = {
@@ -286,17 +287,8 @@ var FormBuilder = class {
   /**
    * Convert form to HTML string
    */
-  toHTML() {
-    const fields = this.getFields();
-    let html = `<form name="${this.options.name}">`;
-    fields.forEach((field) => {
-      html += `<div class="form-field">`;
-      html += `<label for="${field.name}">${field.label}</label>`;
-      html += `<input type="${field.type}" name="${field.name}" id="${field.name}">`;
-      html += `</div>`;
-    });
-    html += `</form>`;
-    return html;
+  toHTML(options = {}) {
+    return renderToHTML(this.buildForm(options));
   }
   /**
    * Mark field as touched
@@ -335,6 +327,29 @@ var FormBuilder = class {
     if (validatorNames) {
       inputProps["data-validators"] = validatorNames;
     }
+    if (field.type === "textarea" || field.type === "select") {
+      const { type: _type, value: _value, ...rest } = inputProps;
+      const props = { ...rest };
+      if (field.type === "textarea") {
+        return { textarea: { ...props, text: String(value) } };
+      }
+      const { placeholder: _placeholder, ...selectProps } = props;
+      return {
+        select: {
+          ...selectProps,
+          children: (field.options ?? []).map((option) => {
+            const { value: optionValue, label = optionValue } = typeof option === "object" && option !== null ? option : { value: option };
+            return {
+              option: {
+                value: optionValue,
+                selected: String(optionValue) === String(value) || void 0,
+                text: String(label)
+              }
+            };
+          })
+        }
+      };
+    }
     return {
       input: inputProps
     };
@@ -398,22 +413,53 @@ var FormBuilder = class {
     for (const [name] of this.fields) {
       fields.push(this.buildField(name));
     }
-    if (options.submitButton !== false) {
+    const settings = { ...this.options, ...options };
+    if (settings.submitButton !== false) {
       fields.push({
         button: {
           type: "submit",
-          text: options.submitText || "Submit",
+          text: settings.submitText || "Submit",
           className: "submit-button"
         }
       });
     }
-    return {
-      form: {
-        onsubmit: "handleSubmit(event)",
-        novalidate: true,
-        children: fields
-      }
-    };
+    const form = {};
+    if (settings.action) form.action = settings.action;
+    if (settings.method) form.method = settings.method;
+    if (settings.name) form.name = settings.name;
+    if (settings.id) form.id = settings.id;
+    if (settings.className) form.className = settings.className;
+    if (settings.enctype) form.enctype = settings.enctype;
+    form.onsubmit = "handleSubmit(event)";
+    form.novalidate = true;
+    form.children = fields;
+    return { form };
+  }
+  /**
+   * Set the form action URL
+   */
+  setAction(action) {
+    this.options.action = action;
+    return this;
+  }
+  /**
+   * Set the form submission method
+   */
+  setMethod(method) {
+    this.options.method = method;
+    return this;
+  }
+  /**
+   * Build the form component (alias for buildForm)
+   */
+  build(options = {}) {
+    return this.buildForm(options);
+  }
+  /**
+   * Render the form to a component (alias for buildForm)
+   */
+  render(options = {}) {
+    return this.buildForm(options);
   }
   /**
    * Check if form is currently submitting
@@ -466,19 +512,199 @@ function createFormBuilder(options = {}) {
   }
   return form;
 }
-function buildForm(fields, options = {}) {
+function buildForm(config = {}) {
+  const { fields = [], ...options } = Array.isArray(config) ? { fields: config } : config;
   const builder = new FormBuilder(options);
-  for (const [name, config] of Object.entries(fields)) {
-    builder.field(name, config);
+  if (Array.isArray(fields)) {
+    for (const field of fields) {
+      if (field && field.name) builder.field(field.name, field);
+    }
+  } else {
+    for (const [name, field] of Object.entries(fields)) {
+      builder.field(name, field);
+    }
   }
-  return builder;
+  return builder.buildForm(options);
 }
 
-// src/validators.js
+// src/validation.js
 var validators = {
+  required: (message = "This field is required") => (value) => {
+    if (value === null || value === void 0 || value === "") {
+      return message;
+    }
+    return null;
+  },
+  minLength: (min, message = `Minimum length is ${min}`) => (value) => {
+    if (value && value.length < min) {
+      return message;
+    }
+    return null;
+  },
+  maxLength: (max, message = `Maximum length is ${max}`) => (value) => {
+    if (value && value.length > max) {
+      return message;
+    }
+    return null;
+  },
+  min: (min, message = `Minimum value is ${min}`) => (value) => {
+    if (value !== null && value !== void 0 && Number(value) < min) {
+      return message;
+    }
+    return null;
+  },
+  max: (max, message = `Maximum value is ${max}`) => (value) => {
+    if (value !== null && value !== void 0 && Number(value) > max) {
+      return message;
+    }
+    return null;
+  },
+  email: (message = "Invalid email address") => (value) => {
+    if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+      return message;
+    }
+    return null;
+  },
+  url: (message = "Invalid URL") => (value) => {
+    if (value) {
+      try {
+        new URL(value);
+      } catch {
+        return message;
+      }
+    }
+    return null;
+  },
+  pattern: (regex, message = "Invalid format") => (value) => {
+    if (value && !regex.test(value)) {
+      return message;
+    }
+    return null;
+  },
+  matches: (fieldName, message = "Fields do not match") => (value, formData) => {
+    if (value !== formData[fieldName]) {
+      return message;
+    }
+    return null;
+  },
+  oneOf: (options, message = "Invalid option") => (value) => {
+    if (value && !options.includes(value)) {
+      return message;
+    }
+    return null;
+  },
+  custom: (fn, message = "Validation failed") => (value, formData) => {
+    if (!fn(value, formData)) {
+      return message;
+    }
+    return null;
+  }
+};
+var FormValidator = class {
+  constructor(schema = {}) {
+    this.schema = schema;
+    this.errors = {};
+    this.touched = {};
+  }
+  /**
+   * Validate a single field
+   */
+  validateField(name, value, formData = {}) {
+    const fieldValidators = this.schema[name];
+    if (!fieldValidators) {
+      return null;
+    }
+    const validatorArray = Array.isArray(fieldValidators) ? fieldValidators : [fieldValidators];
+    for (const validator of validatorArray) {
+      const error = validator(value, formData);
+      if (error) {
+        return error;
+      }
+    }
+    return null;
+  }
+  /**
+   * Validate entire form
+   */
+  validate(formData) {
+    const errors = {};
+    let isValid = true;
+    for (const [name, value] of Object.entries(formData)) {
+      const error = this.validateField(name, value, formData);
+      if (error) {
+        errors[name] = error;
+        isValid = false;
+      }
+    }
+    for (const name of Object.keys(this.schema)) {
+      if (!(name in formData)) {
+        const error = this.validateField(name, void 0, formData);
+        if (error) {
+          errors[name] = error;
+          isValid = false;
+        }
+      }
+    }
+    this.errors = errors;
+    return { isValid, errors };
+  }
+  /**
+   * Mark field as touched
+   */
+  touch(name) {
+    this.touched[name] = true;
+  }
+  /**
+   * Check if field is touched
+   */
+  isTouched(name) {
+    return this.touched[name] || false;
+  }
+  /**
+   * Get error for field
+   */
+  getError(name) {
+    return this.errors[name] || null;
+  }
+  /**
+   * Check if field has error
+   */
+  hasError(name) {
+    return !!this.errors[name];
+  }
+  /**
+   * Clear errors
+   */
+  clearErrors() {
+    this.errors = {};
+  }
+  /**
+   * Clear touched state
+   */
+  clearTouched() {
+    this.touched = {};
+  }
+  /**
+   * Reset validator
+   */
+  reset() {
+    this.clearErrors();
+    this.clearTouched();
+  }
+};
+function createValidator(schema) {
+  return new FormValidator(schema);
+}
+function validate(formData, schema) {
+  const validator = new FormValidator(schema);
+  return validator.validate(formData);
+}
+
+// src/validators.js
+var validators2 = {
   required: (value, options = {}) => {
     if (value === null || value === void 0 || value === "") {
-      return options.message || validators.required.message || "This field is required";
+      return options.message || validators2.required.message || "This field is required";
     }
     return null;
   },
@@ -661,7 +887,7 @@ var validators = {
   },
   // Get a registered validator
   get: (name) => {
-    return validators[name];
+    return validators2[name];
   },
   // Compose multiple validators
   compose: (validatorList) => {
@@ -729,19 +955,19 @@ var validators = {
     const stopOnFirstError = options.stopOnFirstError !== false;
     const chain = {
       required: (opts) => {
-        validatorList.push((v, o, t, a) => validators.required(v, opts || o, t, a));
+        validatorList.push((v, o, t, a) => validators2.required(v, opts || o, t, a));
         return chain;
       },
       email: (opts) => {
-        validatorList.push((v, o, t, a) => validators.email(v, opts || o, t, a));
+        validatorList.push((v, o, t, a) => validators2.email(v, opts || o, t, a));
         return chain;
       },
       minLength: (opts) => {
-        validatorList.push((v, o, t, a) => validators.minLength(v, opts || o, t, a));
+        validatorList.push((v, o, t, a) => validators2.minLength(v, opts || o, t, a));
         return chain;
       },
       maxLength: (opts) => {
-        validatorList.push((v, o, t, a) => validators.maxLength(v, opts || o, t, a));
+        validatorList.push((v, o, t, a) => validators2.maxLength(v, opts || o, t, a));
         return chain;
       },
       custom: (fn, message) => {
@@ -796,6 +1022,7 @@ function validateForm(formData, fieldValidators) {
   return Object.keys(errors).length > 0 ? errors : null;
 }
 function registerValidator(name, validatorFn) {
+  validators2[name] = validatorFn;
   validators[name] = validatorFn;
 }
 function composeValidators(...validatorFns) {
@@ -842,8 +1069,8 @@ function hydrateForm(formSelector, options = {}) {
     return validatorString.split(",").map((v) => {
       const trimmed = v.trim();
       const [name, ...params] = trimmed.split(":");
-      if (validators[name]) {
-        return params.length > 0 ? validators[name](...params.map((p) => isNaN(p) ? p : Number(p))) : validators[name];
+      if (validators2[name]) {
+        return params.length > 0 ? validators2[name](...params.map((p) => isNaN(p) ? p : Number(p))) : validators2[name];
       }
       return null;
     }).filter(Boolean);
@@ -1067,179 +1294,6 @@ function hydrateForm(formSelector, options = {}) {
     })
   };
 }
-
-// src/validation.js
-var validators2 = {
-  required: (message = "This field is required") => (value) => {
-    if (value === null || value === void 0 || value === "") {
-      return message;
-    }
-    return null;
-  },
-  minLength: (min, message = `Minimum length is ${min}`) => (value) => {
-    if (value && value.length < min) {
-      return message;
-    }
-    return null;
-  },
-  maxLength: (max, message = `Maximum length is ${max}`) => (value) => {
-    if (value && value.length > max) {
-      return message;
-    }
-    return null;
-  },
-  min: (min, message = `Minimum value is ${min}`) => (value) => {
-    if (value !== null && value !== void 0 && Number(value) < min) {
-      return message;
-    }
-    return null;
-  },
-  max: (max, message = `Maximum value is ${max}`) => (value) => {
-    if (value !== null && value !== void 0 && Number(value) > max) {
-      return message;
-    }
-    return null;
-  },
-  email: (message = "Invalid email address") => (value) => {
-    if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
-      return message;
-    }
-    return null;
-  },
-  url: (message = "Invalid URL") => (value) => {
-    if (value) {
-      try {
-        new URL(value);
-      } catch {
-        return message;
-      }
-    }
-    return null;
-  },
-  pattern: (regex, message = "Invalid format") => (value) => {
-    if (value && !regex.test(value)) {
-      return message;
-    }
-    return null;
-  },
-  matches: (fieldName, message = "Fields do not match") => (value, formData) => {
-    if (value !== formData[fieldName]) {
-      return message;
-    }
-    return null;
-  },
-  oneOf: (options, message = "Invalid option") => (value) => {
-    if (value && !options.includes(value)) {
-      return message;
-    }
-    return null;
-  },
-  custom: (fn, message = "Validation failed") => (value, formData) => {
-    if (!fn(value, formData)) {
-      return message;
-    }
-    return null;
-  }
-};
-var FormValidator = class {
-  constructor(schema = {}) {
-    this.schema = schema;
-    this.errors = {};
-    this.touched = {};
-  }
-  /**
-   * Validate a single field
-   */
-  validateField(name, value, formData = {}) {
-    const fieldValidators = this.schema[name];
-    if (!fieldValidators) {
-      return null;
-    }
-    const validatorArray = Array.isArray(fieldValidators) ? fieldValidators : [fieldValidators];
-    for (const validator of validatorArray) {
-      const error = validator(value, formData);
-      if (error) {
-        return error;
-      }
-    }
-    return null;
-  }
-  /**
-   * Validate entire form
-   */
-  validate(formData) {
-    const errors = {};
-    let isValid = true;
-    for (const [name, value] of Object.entries(formData)) {
-      const error = this.validateField(name, value, formData);
-      if (error) {
-        errors[name] = error;
-        isValid = false;
-      }
-    }
-    for (const name of Object.keys(this.schema)) {
-      if (!(name in formData)) {
-        const error = this.validateField(name, void 0, formData);
-        if (error) {
-          errors[name] = error;
-          isValid = false;
-        }
-      }
-    }
-    this.errors = errors;
-    return { isValid, errors };
-  }
-  /**
-   * Mark field as touched
-   */
-  touch(name) {
-    this.touched[name] = true;
-  }
-  /**
-   * Check if field is touched
-   */
-  isTouched(name) {
-    return this.touched[name] || false;
-  }
-  /**
-   * Get error for field
-   */
-  getError(name) {
-    return this.errors[name] || null;
-  }
-  /**
-   * Check if field has error
-   */
-  hasError(name) {
-    return !!this.errors[name];
-  }
-  /**
-   * Clear errors
-   */
-  clearErrors() {
-    this.errors = {};
-  }
-  /**
-   * Clear touched state
-   */
-  clearTouched() {
-    this.touched = {};
-  }
-  /**
-   * Reset validator
-   */
-  reset() {
-    this.clearErrors();
-    this.clearTouched();
-  }
-};
-function createValidator(schema) {
-  return new FormValidator(schema);
-}
-function validate(formData, schema) {
-  const validator = new FormValidator(schema);
-  return validator.validate(formData);
-}
 export {
   FormBuilder,
   FormValidator,
@@ -1252,6 +1306,6 @@ export {
   validate,
   validateField,
   validateForm,
-  validators2 as validators
+  validators
 };
 //# sourceMappingURL=index.js.map