@connect-soft/form-generator 1.1.0-alpha3 → 1.1.0-alpha5

package/dist/index.mjs

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React, { createElement, memo, useRef, useMemo, useImperativeHandle } from 'react';
+import React, { createElement, memo, useRef, useMemo, useCallback, useImperativeHandle } from 'react';
 import * as n$1 from 'zod/v4/core';
+import { c } from 'react/compiler-runtime';
 import { z } from 'zod';
 export { z } from 'zod';
-import { c } from 'react/compiler-runtime';
 
 var isCheckBoxInput = (element) => element.type === 'checkbox';
 
@@ -3110,6 +3110,105 @@ function clearAllRegistries() {
   clearLayoutRegistry();
 }
 
+const RESERVED_PROPS = new Set(['all', 'remaining', 'names', 'has', 'render']);
+function createTemplateFields(fieldEntries) {
+  const accessedFields = new Set();
+  const handler = {
+    get(_, prop) {
+      if (typeof prop === 'symbol') {
+        return undefined;
+      }
+      if (prop === 'all') {
+        return Array.from(fieldEntries.values()).map(entry => entry.element);
+      }
+      if (prop === 'remaining') {
+        return Array.from(fieldEntries.entries()).filter(([name]) => !accessedFields.has(name)).map(([, entry]) => entry.element);
+      }
+      if (prop === 'names') {
+        return Array.from(fieldEntries.keys());
+      }
+      if (prop === 'has') {
+        return name => fieldEntries.has(name);
+      }
+      if (prop === 'render') {
+        return (...names) => {
+          return names.filter(name => fieldEntries.has(name)).map(name => {
+            accessedFields.add(name);
+            return fieldEntries.get(name).element;
+          });
+        };
+      }
+      if (fieldEntries.has(prop)) {
+        accessedFields.add(prop);
+        return fieldEntries.get(prop).element;
+      }
+      return undefined;
+    },
+    has(_, prop) {
+      if (typeof prop === 'symbol') {
+        return false;
+      }
+      return RESERVED_PROPS.has(prop) || fieldEntries.has(prop);
+    },
+    ownKeys() {
+      return [...RESERVED_PROPS, ...fieldEntries.keys()];
+    },
+    getOwnPropertyDescriptor(_, prop) {
+      if (typeof prop === 'symbol') {
+        return undefined;
+      }
+      if (RESERVED_PROPS.has(prop) || fieldEntries.has(prop)) {
+        return {
+          configurable: true,
+          enumerable: true,
+          value: this.get(_, prop, {})
+        };
+      }
+      return undefined;
+    }
+  };
+  return new Proxy({}, handler);
+}
+function createTemplateLayouts(layoutEntries) {
+  const handler = {
+    get(_, prop) {
+      if (typeof prop === 'symbol') {
+        return undefined;
+      }
+      if (prop === 'all') {
+        return Array.from(layoutEntries.values()).map(entry => entry.element);
+      }
+      if (layoutEntries.has(prop)) {
+        return layoutEntries.get(prop).element;
+      }
+      return undefined;
+    },
+    has(_, prop) {
+      if (typeof prop === 'symbol') {
+        return false;
+      }
+      return prop === 'all' || layoutEntries.has(prop);
+    },
+    ownKeys() {
+      return ['all', ...layoutEntries.keys()];
+    },
+    getOwnPropertyDescriptor(_, prop) {
+      if (typeof prop === 'symbol') {
+        return undefined;
+      }
+      if (prop === 'all' || layoutEntries.has(prop)) {
+        return {
+          configurable: true,
+          enumerable: true,
+          value: this.get(_, prop, {})
+        };
+      }
+      return undefined;
+    }
+  };
+  return new Proxy({}, handler);
+}
+
 const FieldRenderer = /*#__PURE__*/memo(t0 => {
   const $ = c(5);
   const {
@@ -3120,6 +3219,10 @@ const FieldRenderer = /*#__PURE__*/memo(t0 => {
   if (field.hidden) {
     return null;
   }
+  if (!field.name) {
+    console.error(`Field is missing required "name" property. Field type: "${field.type}". ` + "Every field must have a unique name for form state management.");
+    return null;
+  }
   let t1;
   let t2;
   if ($[0] !== field || $[1] !== form || $[2] !== namePrefix) {
@@ -3355,8 +3458,9 @@ const defaultValidators = {
   tel: stringValidator,
   number: field => {
     let schema = z.coerce.number();
-    if (field.min !== undefined) schema = schema.min(field.min);
-    if (field.max !== undefined) schema = schema.max(field.max);
+    const numberField = field;
+    if (numberField.min !== undefined) schema = schema.min(numberField.min);
+    if (numberField.max !== undefined) schema = schema.max(numberField.max);
     return schema;
   },
   checkbox: () => z.coerce.boolean(),
@@ -3442,6 +3546,38 @@ function getItemKey(item, index) {
   }
   return item.name;
 }
+function extractFields(items) {
+  const fields = [];
+  for (const item of items) {
+    if (isLayoutBlock(item)) {
+      let childItems = [];
+      if (item.type === 'columns') {
+        for (const column of item.columns) {
+          childItems.push(...column.children);
+        }
+      } else if (item.type === 'section') {
+        childItems = item.children;
+      }
+      fields.push(...extractFields(childItems));
+    } else {
+      fields.push(item);
+    }
+  }
+  return fields;
+}
+function extractLayouts(items) {
+  const layouts = [];
+  items.forEach((item, index) => {
+    if (isLayoutBlock(item)) {
+      layouts.push({
+        layout: item,
+        index
+      });
+    }
+  });
+  return layouts;
+}
+
 function hasSchema(props) {
   return props.schema !== undefined;
 }
@@ -3453,6 +3589,11 @@ function FormGeneratorImpl(props) {
     submitText = 'Submit',
     disabled,
     mode = 'onChange',
+    title,
+    description,
+    showReset = false,
+    resetText = 'Reset',
+    children,
     ref
   } = props;
   const userSchema = hasSchema(props) ? props.schema : undefined;
@@ -3476,6 +3617,9 @@ function FormGeneratorImpl(props) {
   const handleSubmit = form.handleSubmit(async data => {
     await onSubmit(data);
   });
+  const handleReset = useCallback(() => {
+    form.reset(mergedDefaultValues);
+  }, [form, mergedDefaultValues]);
   useImperativeHandle(ref, () => ({
     setValues: values => {
       Object.entries(values).forEach(([key, value]) => {
@@ -3500,26 +3644,124 @@ function FormGeneratorImpl(props) {
     setError: (name, error) => form.setError(name, error),
     isValid: () => form.formState.isValid,
     isDirty: () => form.formState.isDirty,
-    form
+    form: form
   }), [form, handleSubmit, mergedDefaultValues]);
   const SubmitButton = getFormComponent('SubmitButton');
+  const fieldEntries = useMemo(() => {
+    const entries = new Map();
+    const allFields = extractFields(fields);
+    allFields.forEach((field, index) => {
+      if (!field.hidden) {
+        const element = jsx(FieldRenderer, {
+          field: field
+        }, field.name || `field-${index}`);
+        entries.set(field.name, {
+          field,
+          element,
+          accessed: false
+        });
+      }
+    });
+    return entries;
+  }, [fields]);
+  const layoutEntries = useMemo(() => {
+    const entries_0 = new Map();
+    const allLayouts = extractLayouts(fields);
+    allLayouts.forEach(({
+      layout,
+      index: index_0
+    }) => {
+      if (!layout.hidden) {
+        const key_0 = layout.name || `layout-${layout.type}-${index_0}`;
+        const element_0 = jsx(FormItemRenderer, {
+          item: layout
+        }, key_0);
+        if (layout.name) {
+          entries_0.set(layout.name, {
+            layout,
+            element: element_0
+          });
+        }
+      }
+    });
+    return entries_0;
+  }, [fields]);
+  const templateFields = useMemo(() => createTemplateFields(fieldEntries), [fieldEntries]);
+  const templateLayouts = useMemo(() => createTemplateLayouts(layoutEntries), [layoutEntries]);
+  const buttons = useMemo(() => {
+    const result = {
+      submit: jsx(SubmitButton, {
+        disabled: disabled || form.formState.isSubmitting,
+        isSubmitting: form.formState.isSubmitting,
+        children: submitText
+      }, "submit")
+    };
+    if (showReset) {
+      result.reset = jsx("button", {
+        type: "button",
+        onClick: handleReset,
+        disabled: disabled,
+        children: resetText
+      }, "reset");
+    }
+    return result;
+  }, [SubmitButton, disabled, form.formState.isSubmitting, submitText, showReset, resetText, handleReset]);
+  const renderField = useCallback((field_0, options) => {
+    return jsx(FieldRenderer, {
+      field: field_0,
+      namePrefix: options === null || options === void 0 ? void 0 : options.namePrefix
+    });
+  }, []);
+  const renderLayout = useCallback((layout_0, options_0) => {
+    return jsx(FormItemRenderer, {
+      item: layout_0,
+      namePrefix: options_0 === null || options_0 === void 0 ? void 0 : options_0.namePrefix
+    });
+  }, []);
+  if (!children) {
+    return jsx(FormProvider, {
+      ...form,
+      children: jsxs("form", {
+        ref: formRef,
+        onSubmit: handleSubmit,
+        className: className,
+        children: [fields.map((item, index_1) => jsx(FormItemRenderer, {
+          item: item
+        }, getItemKey(item, index_1))), jsx(SubmitButton, {
+          disabled: disabled || form.formState.isSubmitting,
+          isSubmitting: form.formState.isSubmitting,
+          children: submitText
+        })]
+      })
+    });
+  }
+  const renderProps = {
+    fields: templateFields,
+    layouts: templateLayouts,
+    buttons,
+    title,
+    description,
+    form: form,
+    isSubmitting: form.formState.isSubmitting,
+    isValid: form.formState.isValid,
+    isDirty: form.formState.isDirty,
+    renderField,
+    renderLayout
+  };
+  const renderFn = children;
   return jsx(FormProvider, {
     ...form,
-    children: jsxs("form", {
+    children: jsx("form", {
       ref: formRef,
       onSubmit: handleSubmit,
       className: className,
-      children: [fields.map((item, index) => jsx(FormItemRenderer, {
-        item: item
-      }, getItemKey(item, index))), jsx(SubmitButton, {
-        disabled: disabled || form.formState.isSubmitting,
-        isSubmitting: form.formState.isSubmitting,
-        children: submitText
-      })]
+      children: renderFn(renderProps)
     })
   });
 }
-const FormGenerator = FormGeneratorImpl;
+function FormGenerator(props) {
+  return FormGeneratorImpl(props);
+}
 
 export { Controller, FieldRenderer, FormGenerator, FormProvider, clearAllRegistries, clearFieldRegistry, clearFormComponentRegistry, clearLayoutRegistry, getFieldComponent, getFormComponent, getFormComponents, getLayoutComponent, getRegisteredFieldTypes, hasFieldType, hasFormComponent, hasLayoutComponent, isLayoutBlock, registerField, registerFields, registerFormComponent, registerFormComponents, registerLayoutComponent, registerLayoutComponents, resetFormComponentRegistry, unregisterField, useFieldArray, useForm, useFormContext, useWatch };
 //# sourceMappingURL=index.mjs.map