@coherent.js/forms 1.0.0-beta.8 → 1.0.0-rc.1

package/dist/index.js

@@ -458,7 +458,13 @@ var FormBuilder = class {
   }
 };
 function createFormBuilder(options = {}) {
-  return new FormBuilder(options);
+  const form = new FormBuilder(options);
+  if (options.fields) {
+    options.fields.forEach((fieldConfig) => {
+      form.addField(fieldConfig.name, fieldConfig);
+    });
+  }
+  return form;
 }
 function buildForm(fields, options = {}) {
   const builder = new FormBuilder(options);
@@ -941,8 +947,8 @@ function hydrateForm(formSelector, options = {}) {
     }
     return isValid;
   }
-  function handleChange(event2) {
-    const input = event2.target;
+  function handleChange(event) {
+    const input = event.target;
     const name = input.getAttribute("name");
     if (!state.fields.has(name)) return;
     state.values[name] = getFieldValue(input);
@@ -957,8 +963,8 @@ function hydrateForm(formSelector, options = {}) {
       debounceTimers.set(name, timer);
     }
   }
-  function handleBlur(event2) {
-    const input = event2.target;
+  function handleBlur(event) {
+    const input = event.target;
     const name = input.getAttribute("name");
     if (!state.fields.has(name)) return;
     state.touched[name] = true;
@@ -966,8 +972,8 @@ function hydrateForm(formSelector, options = {}) {
       validateField2(name);
     }
   }
-  function handleSubmit(event2) {
-    event2.preventDefault();
+  function handleSubmit(event) {
+    event.preventDefault();
     for (const name of state.fields.keys()) {
       state.touched[name] = true;
     }
@@ -985,7 +991,7 @@ function hydrateForm(formSelector, options = {}) {
     state.isSubmitting = true;
     const submitData = { ...state.values };
     if (options.onSubmit) {
-      const result = options.onSubmit(submitData, event2);
+      const result = options.onSubmit(submitData, event);
       if (result === false) {
         state.isSubmitting = false;
         return;
@@ -1234,627 +1240,18 @@ function validate(formData, schema) {
   const validator = new FormValidator(schema);
   return validator.validate(formData);
 }
-
-// src/forms.js
-function createForm(options = {}) {
-  const opts = {
-    fields: {},
-    validation: {
-      strategy: "blur",
-      debounce: 300,
-      async: true,
-      stopOnFirstError: false,
-      revalidateOn: ["change", "blur"],
-      ...options.validation
-    },
-    errors: {
-      format: "detailed",
-      display: "inline",
-      customFormatter: null,
-      ...options.errors
-    },
-    submission: {
-      preventDefault: true,
-      validateBeforeSubmit: true,
-      disableOnSubmit: true,
-      resetOnSuccess: false,
-      onSuccess: null,
-      onError: null,
-      ...options.submission
-    },
-    state: {
-      trackDirty: true,
-      trackTouched: true,
-      trackVisited: true,
-      initialValues: {},
-      resetValues: null,
-      ...options.state
-    },
-    middleware: options.middleware || [],
-    ...options
-  };
-  const state = {
-    values: { ...opts.state.initialValues },
-    errors: {},
-    touched: {},
-    dirty: {},
-    visited: {},
-    isSubmitting: false,
-    isValidating: false,
-    submitCount: 0,
-    asyncValidations: /* @__PURE__ */ new Map()
-  };
-  const fields = /* @__PURE__ */ new Map();
-  const stats = {
-    validations: 0,
-    asyncValidations: 0,
-    submissions: 0,
-    successfulSubmissions: 0,
-    failedSubmissions: 0,
-    middlewareExecutions: 0
-  };
-  function registerField(name, config) {
-    fields.set(name, {
-      name,
-      type: config.type || "text",
-      validators: config.validators || [],
-      transform: config.transform || {},
-      validateWhen: config.validateWhen,
-      required: config.required || false,
-      defaultValue: config.defaultValue,
-      ...config
-    });
-    if (!(name in state.values)) {
-      state.values[name] = config.defaultValue !== void 0 ? config.defaultValue : "";
-    }
-    state.errors[name] = [];
-    state.touched[name] = false;
-    state.dirty[name] = false;
-    state.visited[name] = false;
-  }
-  function getField(name) {
-    return fields.get(name);
-  }
-  function setFieldValue(name, value, shouldValidate = true) {
-    const field = fields.get(name);
-    if (!field) {
-      console.warn(`Field ${name} not registered`);
-      return;
-    }
-    if (field.transform?.input) {
-      value = field.transform.input(value);
-    }
-    state.values[name] = value;
-    if (opts.state.trackDirty) {
-      const initialValue = opts.state.initialValues[name];
-      state.dirty[name] = value !== initialValue;
-    }
-    if (shouldValidate && opts.validation.revalidateOn.includes("change")) {
-      validateField2(name);
-    }
-  }
-  function getFieldValue(name) {
-    return state.values[name];
-  }
-  function setFieldTouched(name, touched = true) {
-    if (!opts.state.trackTouched) return;
-    state.touched[name] = touched;
-    if (touched && opts.validation.revalidateOn.includes("blur")) {
-      validateField2(name);
-    }
-  }
-  function setFieldVisited(name, visited = true) {
-    if (!opts.state.trackVisited) return;
-    state.visited[name] = visited;
-  }
-  async function validateField2(name) {
-    const field = fields.get(name);
-    if (!field) return { valid: true, errors: [] };
-    stats.validations++;
-    if (field.validateWhen && !field.validateWhen(state.values)) {
-      state.errors[name] = [];
-      return { valid: true, errors: [] };
-    }
-    const value = state.values[name];
-    const errors = [];
-    if (state.asyncValidations.has(name)) {
-      clearTimeout(state.asyncValidations.get(name));
-    }
-    if (field.required && (value === "" || value === null || value === void 0)) {
-      errors.push({
-        field: name,
-        type: "required",
-        message: `${name} is required`
-      });
-      state.errors[name] = errors;
-      return { valid: false, errors };
-    }
-    for (const validator of field.validators) {
-      try {
-        let result;
-        if (validator.validate.constructor.name === "AsyncFunction" || opts.validation.async) {
-          stats.asyncValidations++;
-          if (validator.debounce || opts.validation.debounce) {
-            await new Promise((resolve) => {
-              const timeoutId = setTimeout(resolve, validator.debounce || opts.validation.debounce);
-              state.asyncValidations.set(name, timeoutId);
-            });
-          }
-          result = await validator.validate(value, state.values);
-        } else {
-          result = validator.validate(value, state.values);
-        }
-        if (result !== true && result !== void 0 && result !== null) {
-          errors.push({
-            field: name,
-            type: validator.name || "custom",
-            message: validator.message || result || "Validation failed"
-          });
-          if (opts.validation.stopOnFirstError) {
-            break;
-          }
-        }
-      } catch (error) {
-        errors.push({
-          field: name,
-          type: "error",
-          message: error.message || "Validation error"
-        });
-        if (opts.validation.stopOnFirstError) {
-          break;
-        }
-      }
-    }
-    state.errors[name] = errors;
-    return { valid: errors.length === 0, errors };
-  }
-  async function validateForm2() {
-    state.isValidating = true;
-    const validationPromises = Array.from(fields.keys()).map(
-      (name) => validateField2(name)
-    );
-    const results = await Promise.all(validationPromises);
-    state.isValidating = false;
-    const allErrors = results.reduce((acc, result, index) => {
-      const fieldName = Array.from(fields.keys())[index];
-      if (result.errors.length > 0) {
-        acc[fieldName] = result.errors;
-      }
-      return acc;
-    }, {});
-    const isValid2 = Object.keys(allErrors).length === 0;
-    return {
-      valid: isValid2,
-      errors: allErrors
-    };
-  }
-  async function executeMiddleware(action, data) {
-    if (opts.middleware.length === 0) return data;
-    stats.middlewareExecutions++;
-    let result = data;
-    for (const middleware of opts.middleware) {
-      try {
-        const next = () => result;
-        result = await middleware(action, result, next, state);
-      } catch (error) {
-        console.error("Middleware error:", error);
-        throw error;
-      }
-    }
-    return result;
-  }
-  function applyTransformations(values) {
-    const transformed = { ...values };
-    fields.forEach((field, name) => {
-      if (field.transform?.output && name in transformed) {
-        transformed[name] = field.transform.output(transformed[name]);
-      }
-    });
-    return transformed;
-  }
-  async function handleSubmit(onSubmit) {
-    stats.submissions++;
-    try {
-      if (opts.submission.preventDefault && typeof event !== "undefined") {
-        event.preventDefault();
-      }
-      if (opts.submission.disableOnSubmit) {
-        state.isSubmitting = true;
-      }
-      let values = { ...state.values };
-      values = await executeMiddleware("beforeSubmit", values);
-      if (opts.submission.validateBeforeSubmit) {
-        const validation = await validateForm2();
-        if (!validation.valid) {
-          if (opts.submission.onError) {
-            opts.submission.onError(validation.errors);
-          }
-          stats.failedSubmissions++;
-          return { success: false, errors: validation.errors };
-        }
-      }
-      values = applyTransformations(values);
-      values = await executeMiddleware("afterValidation", values);
-      const result = await onSubmit(values);
-      await executeMiddleware("afterSubmit", result);
-      state.submitCount++;
-      stats.successfulSubmissions++;
-      if (opts.submission.resetOnSuccess) {
-        reset();
-      }
-      if (opts.submission.onSuccess) {
-        opts.submission.onSuccess(result);
-      }
-      return { success: true, data: result };
-    } catch (error) {
-      stats.failedSubmissions++;
-      if (opts.submission.onError) {
-        opts.submission.onError(error);
-      }
-      await executeMiddleware("onError", error);
-      return { success: false, error };
-    } finally {
-      state.isSubmitting = false;
-    }
-  }
-  function reset(values) {
-    const resetValues = values || opts.state.resetValues || opts.state.initialValues;
-    state.values = { ...resetValues };
-    state.errors = {};
-    state.touched = {};
-    state.dirty = {};
-    state.visited = {};
-    state.submitCount = 0;
-    fields.forEach((field, name) => {
-      if (!(name in state.values)) {
-        state.values[name] = field.defaultValue !== void 0 ? field.defaultValue : "";
-      }
-      state.errors[name] = [];
-      state.touched[name] = false;
-      state.dirty[name] = false;
-      state.visited[name] = false;
-    });
-  }
-  function getErrors(fieldName) {
-    if (fieldName) {
-      return state.errors[fieldName] || [];
-    }
-    if (opts.errors.customFormatter) {
-      return opts.errors.customFormatter(state.errors);
-    }
-    if (opts.errors.format === "simple") {
-      return Object.values(state.errors).flat().map((e) => e.message);
-    }
-    return state.errors;
-  }
-  function isValid() {
-    return Object.values(state.errors).every((errors) => errors.length === 0);
-  }
-  function isDirty(fieldName) {
-    if (fieldName) {
-      return state.dirty[fieldName] || false;
-    }
-    return Object.values(state.dirty).some((dirty) => dirty);
-  }
-  function isTouched(fieldName) {
-    if (fieldName) {
-      return state.touched[fieldName] || false;
-    }
-    return Object.values(state.touched).some((touched) => touched);
-  }
-  function getValues() {
-    return { ...state.values };
-  }
-  function setValues(values, shouldValidate = false) {
-    Object.entries(values).forEach(([name, value]) => {
-      setFieldValue(name, value, shouldValidate);
-    });
-  }
-  function getState() {
-    return {
-      values: { ...state.values },
-      errors: { ...state.errors },
-      touched: { ...state.touched },
-      dirty: { ...state.dirty },
-      visited: { ...state.visited },
-      isSubmitting: state.isSubmitting,
-      isValidating: state.isValidating,
-      submitCount: state.submitCount,
-      isValid: isValid(),
-      isDirty: isDirty(),
-      isTouched: isTouched()
-    };
-  }
-  function getStats() {
-    return {
-      ...stats,
-      fieldsRegistered: fields.size,
-      activeAsyncValidations: state.asyncValidations.size
-    };
-  }
-  Object.entries(opts.fields).forEach(([name, config]) => {
-    registerField(name, config);
-  });
-  return {
-    registerField,
-    getField,
-    setFieldValue,
-    getFieldValue,
-    setFieldTouched,
-    setFieldVisited,
-    validateField: validateField2,
-    validateForm: validateForm2,
-    handleSubmit,
-    reset,
-    getErrors,
-    isValid,
-    isDirty,
-    isTouched,
-    getValues,
-    setValues,
-    getState,
-    getStats,
-    // Expose state for testing
-    _state: state
-  };
-}
-var formValidators = {
-  required: {
-    name: "required",
-    validate: (value) => {
-      return value !== "" && value !== null && value !== void 0;
-    },
-    message: "This field is required"
-  },
-  email: {
-    name: "email",
-    validate: (value) => {
-      if (!value) return true;
-      const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-      return regex.test(value);
-    },
-    message: "Please enter a valid email address"
-  },
-  minLength: (min) => ({
-    name: "minLength",
-    validate: (value) => {
-      if (!value) return true;
-      return String(value).length >= min;
-    },
-    message: `Must be at least ${min} characters`
-  }),
-  maxLength: (max) => ({
-    name: "maxLength",
-    validate: (value) => {
-      if (!value) return true;
-      return String(value).length <= max;
-    },
-    message: `Must be no more than ${max} characters`
-  }),
-  pattern: (regex, message) => ({
-    name: "pattern",
-    validate: (value) => {
-      if (!value) return true;
-      return regex.test(value);
-    },
-    message: message || "Invalid format"
-  }),
-  asyncEmail: {
-    name: "asyncEmail",
-    validate: async (value) => {
-      if (!value) return true;
-      await new Promise((resolve) => setTimeout(resolve, 100));
-      const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-      return regex.test(value);
-    },
-    message: "Please enter a valid email address",
-    debounce: 500
-  },
-  asyncUnique: (checkFn) => ({
-    name: "asyncUnique",
-    validate: async (value) => {
-      if (!value) return true;
-      return await checkFn(value);
-    },
-    message: "This value is already taken",
-    debounce: 500
-  })
-};
-var enhancedForm = createForm();
-
-// src/advanced-validation.js
-import { ReactiveState, observable, computed } from "@coherent.js/state/src/reactive-state.js";
-import { globalErrorHandler } from "@coherent.js/core/src/utils/error-handler.js";
-var validationRules = {
-  required: (value, params = true) => {
-    if (!params) return true;
-    const isEmpty = value === null || value === void 0 || value === "" || Array.isArray(value) && value.length === 0;
-    return !isEmpty || "This field is required";
-  },
-  min: (value, minValue) => {
-    if (value === null || value === void 0 || value === "") return true;
-    const num = Number(value);
-    return isNaN(num) || num >= minValue || `Value must be at least ${minValue}`;
-  },
-  max: (value, maxValue) => {
-    if (value === null || value === void 0 || value === "") return true;
-    const num = Number(value);
-    return isNaN(num) || num <= maxValue || `Value must be no more than ${maxValue}`;
-  },
-  minLength: (value, minLen) => {
-    if (value === null || value === void 0) return true;
-    const str = String(value);
-    return str.length >= minLen || `Must be at least ${minLen} characters`;
-  },
-  maxLength: (value, maxLen) => {
-    if (value === null || value === void 0) return true;
-    const str = String(value);
-    return str.length <= maxLen || `Must be no more than ${maxLen} characters`;
-  },
-  pattern: (value, regex, message = "Invalid format") => {
-    if (value === null || value === void 0 || value === "") return true;
-    const pattern = typeof regex === "string" ? new RegExp(regex) : regex;
-    return pattern.test(String(value)) || message;
-  },
-  email: (value) => {
-    if (value === null || value === void 0 || value === "") return true;
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    return emailRegex.test(String(value)) || "Please enter a valid email address";
-  },
-  url: (value) => {
-    if (value === null || value === void 0 || value === "") return true;
-    try {
-      new URL(String(value));
-      return true;
-    } catch {
-      return "Please enter a valid URL";
-    }
-  },
-  numeric: (value) => {
-    if (value === null || value === void 0 || value === "") return true;
-    return !isNaN(Number(value)) || "Must be a valid number";
-  },
-  integer: (value) => {
-    if (value === null || value === void 0 || value === "") return true;
-    const num = Number(value);
-    return Number.isInteger(num) || "Must be a whole number";
-  },
-  alpha: (value) => {
-    if (value === null || value === void 0 || value === "") return true;
-    return /^[a-zA-Z]+$/.test(String(value)) || "Must contain only letters";
-  },
-  alphanumeric: (value) => {
-    if (value === null || value === void 0 || value === "") return true;
-    return /^[a-zA-Z0-9]+$/.test(String(value)) || "Must contain only letters and numbers";
-  },
-  equals: (value, otherValue, fieldName = "other field") => {
-    return value === otherValue || `Must match ${fieldName}`;
-  },
-  oneOf: (value, options, message = "Invalid selection") => {
-    if (value === null || value === void 0 || value === "") return true;
-    return options.includes(value) || message;
-  },
-  custom: (value, validator, ...args) => {
-    if (typeof validator !== "function") {
-      throw new Error("Custom validator must be a function");
-    }
-    return validator(value, ...args);
-  }
-};
-var binding = {
-  /**
-   * Two-way data binding for input elements
-   */
-  model(form, fieldName, options = {}) {
-    return {
-      value: form.getField(fieldName),
-      oninput: (event2) => {
-        const value = options.number ? Number(event2.target.value) : event2.target.value;
-        form.setField(fieldName, value);
-      },
-      onblur: () => {
-        form.handleBlur(fieldName);
-      }
-    };
-  },
-  /**
-   * Checkbox binding
-   */
-  checkbox(form, fieldName) {
-    return {
-      checked: Boolean(form.getField(fieldName)),
-      onchange: (event2) => {
-        form.setField(fieldName, event2.target.checked);
-      },
-      onblur: () => {
-        form.handleBlur(fieldName);
-      }
-    };
-  },
-  /**
-   * Select dropdown binding
-   */
-  select(form, fieldName, options = {}) {
-    return {
-      value: form.getField(fieldName),
-      onchange: (event2) => {
-        const value = options.multiple ? Array.from(event2.target.selectedOptions, (opt) => opt.value) : event2.target.value;
-        form.setField(fieldName, value);
-      },
-      onblur: () => {
-        form.handleBlur(fieldName);
-      }
-    };
-  },
-  /**
-   * Radio button binding
-   */
-  radio(form, fieldName, value) {
-    return {
-      checked: form.getField(fieldName) === value,
-      value,
-      onchange: (event2) => {
-        if (event2.target.checked) {
-          form.setField(fieldName, value);
-        }
-      }
-    };
-  }
-};
-var formComponents = {
-  /**
-   * Validation _error display
-   */
-  ValidationError({ form, field, className = "validation-_error" }) {
-    const validator = form.getValidator(field);
-    if (!validator || validator.errors.value.length === 0) {
-      return null;
-    }
-    return {
-      div: {
-        className,
-        children: validator.errors.value.map((_error) => ({
-          span: { text: _error, className: "_error-message" }
-        }))
-      }
-    };
-  },
-  /**
-   * Form field wrapper with validation
-   */
-  FormField({ form, field, label, children, showErrors = true }) {
-    const validator = form.getValidator(field);
-    const state = validator ? validator.getState() : {};
-    return {
-      div: {
-        className: `form-field ${state.hasError ? "has-_error" : ""} ${state.isTouched ? "touched" : ""}`,
-        children: [
-          label ? { label: { text: label, htmlFor: field } } : null,
-          children,
-          showErrors && state.hasError ? formComponents.ValidationError({ form, field }) : null
-        ].filter(Boolean)
-      }
-    };
-  }
-};
 export {
   FormBuilder,
   FormValidator,
-  binding,
   buildForm,
   composeValidators,
-  createForm,
   createFormBuilder,
   createValidator,
-  enhancedForm,
-  formComponents,
-  formValidators,
   hydrateForm,
   registerValidator,
   validate,
   validateField,
   validateForm,
-  validationRules,
   validators2 as validators
 };
 //# sourceMappingURL=index.js.map