@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.
- package/README.md +486 -28
- package/dist/index.js +292 -87
- package/dist/index.js.map +1 -1
- package/dist/{index.m.js → index.mjs} +294 -89
- package/dist/index.mjs.map +1 -0
- package/dist/types/components/form/create-template-fields.d.ts +4 -0
- package/dist/types/components/form/create-template-fields.d.ts.map +1 -0
- package/dist/types/components/form/form-generator.d.ts +33 -12
- package/dist/types/components/form/form-generator.d.ts.map +1 -1
- package/dist/types/components/form/form-utils.d.ts +13 -0
- package/dist/types/components/form/form-utils.d.ts.map +1 -0
- package/dist/types/components/form/index.d.ts +1 -1
- package/dist/types/components/form/index.d.ts.map +1 -1
- package/dist/types/index.d.ts +2 -1
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/lib/index.d.ts +1 -0
- package/dist/types/lib/index.d.ts.map +1 -1
- package/dist/types/lib/template-types.d.ts +54 -0
- package/dist/types/lib/template-types.d.ts.map +1 -0
- package/package.json +11 -25
- package/MIGRATION.md +0 -503
- package/dist/index.m.js.map +0 -1
- package/dist/styles/globals.css +0 -2
|
@@ -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
|
-
|
|
3359
|
-
if (
|
|
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
|
|
3449
|
-
const $ = c(20);
|
|
3580
|
+
function FormGeneratorImpl(props) {
|
|
3450
3581
|
const {
|
|
3451
3582
|
fields,
|
|
3452
3583
|
defaultValues,
|
|
3453
3584
|
className,
|
|
3454
|
-
submitText
|
|
3585
|
+
submitText = 'Submit',
|
|
3455
3586
|
disabled,
|
|
3456
|
-
mode
|
|
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
|
-
|
|
3463
|
-
|
|
3597
|
+
const formRef = useRef(null);
|
|
3598
|
+
const schema = useMemo(() => {
|
|
3464
3599
|
if (userSchema) {
|
|
3465
|
-
|
|
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
|
-
|
|
3477
|
-
}
|
|
3478
|
-
const
|
|
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
|
-
|
|
3483
|
-
|
|
3484
|
-
|
|
3485
|
-
|
|
3486
|
-
|
|
3487
|
-
|
|
3488
|
-
}
|
|
3489
|
-
const
|
|
3490
|
-
|
|
3491
|
-
|
|
3492
|
-
|
|
3493
|
-
|
|
3494
|
-
|
|
3495
|
-
|
|
3496
|
-
|
|
3497
|
-
|
|
3498
|
-
|
|
3499
|
-
|
|
3500
|
-
|
|
3501
|
-
|
|
3502
|
-
|
|
3503
|
-
|
|
3504
|
-
|
|
3505
|
-
|
|
3506
|
-
|
|
3507
|
-
|
|
3508
|
-
|
|
3509
|
-
|
|
3510
|
-
|
|
3511
|
-
|
|
3512
|
-
|
|
3513
|
-
|
|
3514
|
-
|
|
3515
|
-
|
|
3516
|
-
|
|
3517
|
-
|
|
3518
|
-
|
|
3519
|
-
|
|
3520
|
-
|
|
3521
|
-
|
|
3522
|
-
|
|
3523
|
-
|
|
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
|
-
|
|
3526
|
-
|
|
3527
|
-
|
|
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(
|
|
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
|
-
|
|
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
|
|
3552
|
-
return
|
|
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.
|
|
3763
|
+
//# sourceMappingURL=index.mjs.map
|