@connect-soft/form-generator 1.1.0-alpha3 → 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 +112 -0
- package/dist/index.js +251 -13
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +252 -14
- package/dist/index.mjs.map +1 -1
- 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 +15 -8
- 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/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 +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import React, { createElement, memo, useRef, useMemo, useImperativeHandle } from 'react';
|
|
2
|
+
import React, { createElement, memo, useRef, useMemo, useCallback, useImperativeHandle } from 'react';
|
|
3
3
|
import * as n$1 from 'zod/v4/core';
|
|
4
|
+
import { c } from 'react/compiler-runtime';
|
|
4
5
|
import { z } from 'zod';
|
|
5
6
|
export { z } from 'zod';
|
|
6
|
-
import { c } from 'react/compiler-runtime';
|
|
7
7
|
|
|
8
8
|
var isCheckBoxInput = (element) => element.type === 'checkbox';
|
|
9
9
|
|
|
@@ -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,6 +3542,38 @@ 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
|
}
|
|
@@ -3453,6 +3585,11 @@ function FormGeneratorImpl(props) {
|
|
|
3453
3585
|
submitText = 'Submit',
|
|
3454
3586
|
disabled,
|
|
3455
3587
|
mode = 'onChange',
|
|
3588
|
+
title,
|
|
3589
|
+
description,
|
|
3590
|
+
showReset = false,
|
|
3591
|
+
resetText = 'Reset',
|
|
3592
|
+
children,
|
|
3456
3593
|
ref
|
|
3457
3594
|
} = props;
|
|
3458
3595
|
const userSchema = hasSchema(props) ? props.schema : undefined;
|
|
@@ -3476,6 +3613,9 @@ function FormGeneratorImpl(props) {
|
|
|
3476
3613
|
const handleSubmit = form.handleSubmit(async data => {
|
|
3477
3614
|
await onSubmit(data);
|
|
3478
3615
|
});
|
|
3616
|
+
const handleReset = useCallback(() => {
|
|
3617
|
+
form.reset(mergedDefaultValues);
|
|
3618
|
+
}, [form, mergedDefaultValues]);
|
|
3479
3619
|
useImperativeHandle(ref, () => ({
|
|
3480
3620
|
setValues: values => {
|
|
3481
3621
|
Object.entries(values).forEach(([key, value]) => {
|
|
@@ -3500,26 +3640,124 @@ function FormGeneratorImpl(props) {
|
|
|
3500
3640
|
setError: (name, error) => form.setError(name, error),
|
|
3501
3641
|
isValid: () => form.formState.isValid,
|
|
3502
3642
|
isDirty: () => form.formState.isDirty,
|
|
3503
|
-
form
|
|
3643
|
+
form: form
|
|
3504
3644
|
}), [form, handleSubmit, mergedDefaultValues]);
|
|
3505
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");
|
|
3702
|
+
}
|
|
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, {
|
|
3719
|
+
...form,
|
|
3720
|
+
children: jsxs("form", {
|
|
3721
|
+
ref: formRef,
|
|
3722
|
+
onSubmit: handleSubmit,
|
|
3723
|
+
className: className,
|
|
3724
|
+
children: [fields.map((item, index_1) => jsx(FormItemRenderer, {
|
|
3725
|
+
item: item
|
|
3726
|
+
}, getItemKey(item, index_1))), jsx(SubmitButton, {
|
|
3727
|
+
disabled: disabled || form.formState.isSubmitting,
|
|
3728
|
+
isSubmitting: form.formState.isSubmitting,
|
|
3729
|
+
children: submitText
|
|
3730
|
+
})]
|
|
3731
|
+
})
|
|
3732
|
+
});
|
|
3733
|
+
}
|
|
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;
|
|
3506
3748
|
return jsx(FormProvider, {
|
|
3507
3749
|
...form,
|
|
3508
|
-
children:
|
|
3750
|
+
children: jsx("form", {
|
|
3509
3751
|
ref: formRef,
|
|
3510
3752
|
onSubmit: handleSubmit,
|
|
3511
3753
|
className: className,
|
|
3512
|
-
children:
|
|
3513
|
-
item: item
|
|
3514
|
-
}, getItemKey(item, index))), jsx(SubmitButton, {
|
|
3515
|
-
disabled: disabled || form.formState.isSubmitting,
|
|
3516
|
-
isSubmitting: form.formState.isSubmitting,
|
|
3517
|
-
children: submitText
|
|
3518
|
-
})]
|
|
3754
|
+
children: renderFn(renderProps)
|
|
3519
3755
|
})
|
|
3520
3756
|
});
|
|
3521
3757
|
}
|
|
3522
|
-
|
|
3758
|
+
function FormGenerator(props) {
|
|
3759
|
+
return FormGeneratorImpl(props);
|
|
3760
|
+
}
|
|
3523
3761
|
|
|
3524
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 };
|
|
3525
3763
|
//# sourceMappingURL=index.mjs.map
|