@connect-soft/form-generator 1.1.0-alpha2 → 1.1.0-alpha4

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.
@@ -1,7 +1,7 @@
1
- import { c } from 'react/compiler-runtime';
2
1
  import { jsx, jsxs } from 'react/jsx-runtime';
3
- import React, { createElement, memo } from 'react';
2
+ import React, { createElement, memo, useRef, useMemo, useCallback, useImperativeHandle } from 'react';
4
3
  import * as n$1 from 'zod/v4/core';
4
+ import { c } from 'react/compiler-runtime';
5
5
  import { z } from 'zod';
6
6
  export { z } from 'zod';
7
7
 
@@ -3110,6 +3110,105 @@ function clearAllRegistries() {
3110
3110
  clearLayoutRegistry();
3111
3111
  }
3112
3112
 
3113
+ const RESERVED_PROPS = new Set(['all', 'remaining', 'names', 'has', 'render']);
3114
+ function createTemplateFields(fieldEntries) {
3115
+ const accessedFields = new Set();
3116
+ const handler = {
3117
+ get(_, prop) {
3118
+ if (typeof prop === 'symbol') {
3119
+ return undefined;
3120
+ }
3121
+ if (prop === 'all') {
3122
+ return Array.from(fieldEntries.values()).map(entry => entry.element);
3123
+ }
3124
+ if (prop === 'remaining') {
3125
+ return Array.from(fieldEntries.entries()).filter(([name]) => !accessedFields.has(name)).map(([, entry]) => entry.element);
3126
+ }
3127
+ if (prop === 'names') {
3128
+ return Array.from(fieldEntries.keys());
3129
+ }
3130
+ if (prop === 'has') {
3131
+ return name => fieldEntries.has(name);
3132
+ }
3133
+ if (prop === 'render') {
3134
+ return (...names) => {
3135
+ return names.filter(name => fieldEntries.has(name)).map(name => {
3136
+ accessedFields.add(name);
3137
+ return fieldEntries.get(name).element;
3138
+ });
3139
+ };
3140
+ }
3141
+ if (fieldEntries.has(prop)) {
3142
+ accessedFields.add(prop);
3143
+ return fieldEntries.get(prop).element;
3144
+ }
3145
+ return undefined;
3146
+ },
3147
+ has(_, prop) {
3148
+ if (typeof prop === 'symbol') {
3149
+ return false;
3150
+ }
3151
+ return RESERVED_PROPS.has(prop) || fieldEntries.has(prop);
3152
+ },
3153
+ ownKeys() {
3154
+ return [...RESERVED_PROPS, ...fieldEntries.keys()];
3155
+ },
3156
+ getOwnPropertyDescriptor(_, prop) {
3157
+ if (typeof prop === 'symbol') {
3158
+ return undefined;
3159
+ }
3160
+ if (RESERVED_PROPS.has(prop) || fieldEntries.has(prop)) {
3161
+ return {
3162
+ configurable: true,
3163
+ enumerable: true,
3164
+ value: this.get(_, prop, {})
3165
+ };
3166
+ }
3167
+ return undefined;
3168
+ }
3169
+ };
3170
+ return new Proxy({}, handler);
3171
+ }
3172
+ function createTemplateLayouts(layoutEntries) {
3173
+ const handler = {
3174
+ get(_, prop) {
3175
+ if (typeof prop === 'symbol') {
3176
+ return undefined;
3177
+ }
3178
+ if (prop === 'all') {
3179
+ return Array.from(layoutEntries.values()).map(entry => entry.element);
3180
+ }
3181
+ if (layoutEntries.has(prop)) {
3182
+ return layoutEntries.get(prop).element;
3183
+ }
3184
+ return undefined;
3185
+ },
3186
+ has(_, prop) {
3187
+ if (typeof prop === 'symbol') {
3188
+ return false;
3189
+ }
3190
+ return prop === 'all' || layoutEntries.has(prop);
3191
+ },
3192
+ ownKeys() {
3193
+ return ['all', ...layoutEntries.keys()];
3194
+ },
3195
+ getOwnPropertyDescriptor(_, prop) {
3196
+ if (typeof prop === 'symbol') {
3197
+ return undefined;
3198
+ }
3199
+ if (prop === 'all' || layoutEntries.has(prop)) {
3200
+ return {
3201
+ configurable: true,
3202
+ enumerable: true,
3203
+ value: this.get(_, prop, {})
3204
+ };
3205
+ }
3206
+ return undefined;
3207
+ }
3208
+ };
3209
+ return new Proxy({}, handler);
3210
+ }
3211
+
3113
3212
  const FieldRenderer = /*#__PURE__*/memo(t0 => {
3114
3213
  const $ = c(5);
3115
3214
  const {
@@ -3355,8 +3454,9 @@ const defaultValidators = {
3355
3454
  tel: stringValidator,
3356
3455
  number: field => {
3357
3456
  let schema = z.coerce.number();
3358
- if (field.min !== undefined) schema = schema.min(field.min);
3359
- if (field.max !== undefined) schema = schema.max(field.max);
3457
+ const numberField = field;
3458
+ if (numberField.min !== undefined) schema = schema.min(numberField.min);
3459
+ if (numberField.max !== undefined) schema = schema.max(numberField.max);
3360
3460
  return schema;
3361
3461
  },
3362
3462
  checkbox: () => z.coerce.boolean(),
@@ -3442,117 +3542,222 @@ function getItemKey(item, index) {
3442
3542
  }
3443
3543
  return item.name;
3444
3544
  }
3545
+ function extractFields(items) {
3546
+ const fields = [];
3547
+ for (const item of items) {
3548
+ if (isLayoutBlock(item)) {
3549
+ let childItems = [];
3550
+ if (item.type === 'columns') {
3551
+ for (const column of item.columns) {
3552
+ childItems.push(...column.children);
3553
+ }
3554
+ } else if (item.type === 'section') {
3555
+ childItems = item.children;
3556
+ }
3557
+ fields.push(...extractFields(childItems));
3558
+ } else {
3559
+ fields.push(item);
3560
+ }
3561
+ }
3562
+ return fields;
3563
+ }
3564
+ function extractLayouts(items) {
3565
+ const layouts = [];
3566
+ items.forEach((item, index) => {
3567
+ if (isLayoutBlock(item)) {
3568
+ layouts.push({
3569
+ layout: item,
3570
+ index
3571
+ });
3572
+ }
3573
+ });
3574
+ return layouts;
3575
+ }
3576
+
3445
3577
  function hasSchema(props) {
3446
3578
  return props.schema !== undefined;
3447
3579
  }
3448
- function FormGenerator(props) {
3449
- const $ = c(20);
3580
+ function FormGeneratorImpl(props) {
3450
3581
  const {
3451
3582
  fields,
3452
3583
  defaultValues,
3453
3584
  className,
3454
- submitText: t0,
3585
+ submitText = 'Submit',
3455
3586
  disabled,
3456
- mode: t1
3587
+ mode = 'onChange',
3588
+ title,
3589
+ description,
3590
+ showReset = false,
3591
+ resetText = 'Reset',
3592
+ children,
3593
+ ref
3457
3594
  } = props;
3458
- const submitText = t0 === undefined ? "Submit" : t0;
3459
- const mode = t1 === undefined ? "onChange" : t1;
3460
3595
  const userSchema = hasSchema(props) ? props.schema : undefined;
3461
3596
  const onSubmit = props.onSubmit;
3462
- let t2;
3463
- bb0: {
3597
+ const formRef = useRef(null);
3598
+ const schema = useMemo(() => {
3464
3599
  if (userSchema) {
3465
- t2 = userSchema;
3466
- break bb0;
3467
- }
3468
- let t3;
3469
- if ($[0] !== fields) {
3470
- t3 = buildSchema(fields);
3471
- $[0] = fields;
3472
- $[1] = t3;
3473
- } else {
3474
- t3 = $[1];
3600
+ return userSchema;
3475
3601
  }
3476
- t2 = t3;
3477
- }
3478
- const schema = t2;
3479
- let t3;
3480
- if ($[2] !== defaultValues || $[3] !== fields) {
3602
+ return buildSchema(fields);
3603
+ }, [fields, userSchema]);
3604
+ const mergedDefaultValues = useMemo(() => {
3481
3605
  const builtDefaults = buildDefaultValues(fields);
3482
- t3 = defaultValues ? deepMerge(builtDefaults, defaultValues) : builtDefaults;
3483
- $[2] = defaultValues;
3484
- $[3] = fields;
3485
- $[4] = t3;
3486
- } else {
3487
- t3 = $[4];
3488
- }
3489
- const mergedDefaultValues = t3;
3490
- let t4;
3491
- if ($[5] !== schema) {
3492
- t4 = a(schema);
3493
- $[5] = schema;
3494
- $[6] = t4;
3495
- } else {
3496
- t4 = $[6];
3497
- }
3498
- let t5;
3499
- if ($[7] !== mergedDefaultValues || $[8] !== mode || $[9] !== t4) {
3500
- t5 = {
3501
- resolver: t4,
3502
- defaultValues: mergedDefaultValues,
3503
- mode
3504
- };
3505
- $[7] = mergedDefaultValues;
3506
- $[8] = mode;
3507
- $[9] = t4;
3508
- $[10] = t5;
3509
- } else {
3510
- t5 = $[10];
3511
- }
3512
- const form = useForm(t5);
3513
- let t6;
3514
- if ($[11] !== className || $[12] !== disabled || $[13] !== fields || $[14] !== form || $[15] !== onSubmit || $[16] !== submitText) {
3515
- let t7;
3516
- if ($[18] !== onSubmit) {
3517
- t7 = async data => {
3518
- await onSubmit(data);
3519
- };
3520
- $[18] = onSubmit;
3521
- $[19] = t7;
3522
- } else {
3523
- t7 = $[19];
3606
+ return defaultValues ? deepMerge(builtDefaults, defaultValues) : builtDefaults;
3607
+ }, [fields, defaultValues]);
3608
+ const form = useForm({
3609
+ resolver: a(schema),
3610
+ defaultValues: mergedDefaultValues,
3611
+ mode
3612
+ });
3613
+ const handleSubmit = form.handleSubmit(async data => {
3614
+ await onSubmit(data);
3615
+ });
3616
+ const handleReset = useCallback(() => {
3617
+ form.reset(mergedDefaultValues);
3618
+ }, [form, mergedDefaultValues]);
3619
+ useImperativeHandle(ref, () => ({
3620
+ setValues: values => {
3621
+ Object.entries(values).forEach(([key, value]) => {
3622
+ form.setValue(key, value, {
3623
+ shouldValidate: true,
3624
+ shouldDirty: true
3625
+ });
3626
+ });
3627
+ },
3628
+ getValues: () => form.getValues(),
3629
+ reset: values_0 => {
3630
+ if (values_0) {
3631
+ form.reset(deepMerge(mergedDefaultValues, values_0));
3632
+ } else {
3633
+ form.reset(mergedDefaultValues);
3634
+ }
3635
+ },
3636
+ submit: async () => {
3637
+ await handleSubmit();
3638
+ },
3639
+ clearErrors: () => form.clearErrors(),
3640
+ setError: (name, error) => form.setError(name, error),
3641
+ isValid: () => form.formState.isValid,
3642
+ isDirty: () => form.formState.isDirty,
3643
+ form: form
3644
+ }), [form, handleSubmit, mergedDefaultValues]);
3645
+ const SubmitButton = getFormComponent('SubmitButton');
3646
+ const fieldEntries = useMemo(() => {
3647
+ const entries = new Map();
3648
+ const allFields = extractFields(fields);
3649
+ allFields.forEach((field, index) => {
3650
+ if (!field.hidden) {
3651
+ const element = jsx(FieldRenderer, {
3652
+ field: field
3653
+ }, field.name || `field-${index}`);
3654
+ entries.set(field.name, {
3655
+ field,
3656
+ element,
3657
+ accessed: false
3658
+ });
3659
+ }
3660
+ });
3661
+ return entries;
3662
+ }, [fields]);
3663
+ const layoutEntries = useMemo(() => {
3664
+ const entries_0 = new Map();
3665
+ const allLayouts = extractLayouts(fields);
3666
+ allLayouts.forEach(({
3667
+ layout,
3668
+ index: index_0
3669
+ }) => {
3670
+ if (!layout.hidden) {
3671
+ const key_0 = layout.name || `layout-${layout.type}-${index_0}`;
3672
+ const element_0 = jsx(FormItemRenderer, {
3673
+ item: layout
3674
+ }, key_0);
3675
+ if (layout.name) {
3676
+ entries_0.set(layout.name, {
3677
+ layout,
3678
+ element: element_0
3679
+ });
3680
+ }
3681
+ }
3682
+ });
3683
+ return entries_0;
3684
+ }, [fields]);
3685
+ const templateFields = useMemo(() => createTemplateFields(fieldEntries), [fieldEntries]);
3686
+ const templateLayouts = useMemo(() => createTemplateLayouts(layoutEntries), [layoutEntries]);
3687
+ const buttons = useMemo(() => {
3688
+ const result = {
3689
+ submit: jsx(SubmitButton, {
3690
+ disabled: disabled || form.formState.isSubmitting,
3691
+ isSubmitting: form.formState.isSubmitting,
3692
+ children: submitText
3693
+ }, "submit")
3694
+ };
3695
+ if (showReset) {
3696
+ result.reset = jsx("button", {
3697
+ type: "button",
3698
+ onClick: handleReset,
3699
+ disabled: disabled,
3700
+ children: resetText
3701
+ }, "reset");
3524
3702
  }
3525
- const handleSubmit = form.handleSubmit(t7);
3526
- const SubmitButton = getFormComponent("SubmitButton");
3527
- t6 = jsx(FormProvider, {
3703
+ return result;
3704
+ }, [SubmitButton, disabled, form.formState.isSubmitting, submitText, showReset, resetText, handleReset]);
3705
+ const renderField = useCallback((field_0, options) => {
3706
+ return jsx(FieldRenderer, {
3707
+ field: field_0,
3708
+ namePrefix: options === null || options === void 0 ? void 0 : options.namePrefix
3709
+ });
3710
+ }, []);
3711
+ const renderLayout = useCallback((layout_0, options_0) => {
3712
+ return jsx(FormItemRenderer, {
3713
+ item: layout_0,
3714
+ namePrefix: options_0 === null || options_0 === void 0 ? void 0 : options_0.namePrefix
3715
+ });
3716
+ }, []);
3717
+ if (!children) {
3718
+ return jsx(FormProvider, {
3528
3719
  ...form,
3529
3720
  children: jsxs("form", {
3721
+ ref: formRef,
3530
3722
  onSubmit: handleSubmit,
3531
- className,
3532
- children: [fields.map(_temp), jsx(SubmitButton, {
3723
+ className: className,
3724
+ children: [fields.map((item, index_1) => jsx(FormItemRenderer, {
3725
+ item: item
3726
+ }, getItemKey(item, index_1))), jsx(SubmitButton, {
3533
3727
  disabled: disabled || form.formState.isSubmitting,
3534
3728
  isSubmitting: form.formState.isSubmitting,
3535
3729
  children: submitText
3536
3730
  })]
3537
3731
  })
3538
3732
  });
3539
- $[11] = className;
3540
- $[12] = disabled;
3541
- $[13] = fields;
3542
- $[14] = form;
3543
- $[15] = onSubmit;
3544
- $[16] = submitText;
3545
- $[17] = t6;
3546
- } else {
3547
- t6 = $[17];
3548
3733
  }
3549
- return t6;
3734
+ const renderProps = {
3735
+ fields: templateFields,
3736
+ layouts: templateLayouts,
3737
+ buttons,
3738
+ title,
3739
+ description,
3740
+ form: form,
3741
+ isSubmitting: form.formState.isSubmitting,
3742
+ isValid: form.formState.isValid,
3743
+ isDirty: form.formState.isDirty,
3744
+ renderField,
3745
+ renderLayout
3746
+ };
3747
+ const renderFn = children;
3748
+ return jsx(FormProvider, {
3749
+ ...form,
3750
+ children: jsx("form", {
3751
+ ref: formRef,
3752
+ onSubmit: handleSubmit,
3753
+ className: className,
3754
+ children: renderFn(renderProps)
3755
+ })
3756
+ });
3550
3757
  }
3551
- function _temp(item, index) {
3552
- return jsx(FormItemRenderer, {
3553
- item
3554
- }, getItemKey(item, index));
3758
+ function FormGenerator(props) {
3759
+ return FormGeneratorImpl(props);
3555
3760
  }
3556
3761
 
3557
3762
  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 };
3558
- //# sourceMappingURL=index.m.js.map
3763
+ //# sourceMappingURL=index.mjs.map