shadcn-zod-formkit 1.9.0 → 1.9.2
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/dist/index.cjs +77 -57
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.mjs +77 -57
- package/dist/index.mjs.map +1 -1
- package/dist/shadcn-zod-formkit-1.9.2.tgz +0 -0
- package/package.json +1 -1
- package/dist/shadcn-zod-formkit-1.9.0.tgz +0 -0
package/dist/index.d.mts
CHANGED
|
@@ -78,6 +78,7 @@ declare const inputFieldComp: InputTypes[];
|
|
|
78
78
|
interface FieldProps<T = Record<string, any>> {
|
|
79
79
|
name: keyof T;
|
|
80
80
|
label: string;
|
|
81
|
+
defaultValue?: any;
|
|
81
82
|
repeaterFields?: Array<FieldProps | FieldProps[]>;
|
|
82
83
|
minItems?: number;
|
|
83
84
|
maxItems?: number;
|
|
@@ -214,7 +215,7 @@ declare const getFieldLabel: <T extends FieldValues>(fieldErrorKey: string, fiel
|
|
|
214
215
|
declare class InputFactory {
|
|
215
216
|
static create<T extends Record<string, any> = Record<string, any>>(input: FieldProps<T>, form: UseFormReturn<T>, isSubmitting?: boolean): JSX.Element;
|
|
216
217
|
}
|
|
217
|
-
declare function getDefaultValues<T extends Record<string, any>>(entity?: Partial<T>): Record<string, any>;
|
|
218
|
+
declare function getDefaultValues<T extends Record<string, any>>(entity?: Partial<T>, fields?: Array<FieldProps<T> | FieldProps<T>[]>): Record<string, any>;
|
|
218
219
|
declare const getDynamicSchema: <T extends Record<string, any>>(fields: Array<FieldProps<T> | FieldProps<T>[]>, extraValidations?: ((schema: ZodObject<any>) => ZodObject<any>)[]) => ZodObject<Record<keyof T, ZodTypeAny>>;
|
|
219
220
|
|
|
220
221
|
declare class CheckListInput extends BaseInput {
|
package/dist/index.d.ts
CHANGED
|
@@ -78,6 +78,7 @@ declare const inputFieldComp: InputTypes[];
|
|
|
78
78
|
interface FieldProps<T = Record<string, any>> {
|
|
79
79
|
name: keyof T;
|
|
80
80
|
label: string;
|
|
81
|
+
defaultValue?: any;
|
|
81
82
|
repeaterFields?: Array<FieldProps | FieldProps[]>;
|
|
82
83
|
minItems?: number;
|
|
83
84
|
maxItems?: number;
|
|
@@ -214,7 +215,7 @@ declare const getFieldLabel: <T extends FieldValues>(fieldErrorKey: string, fiel
|
|
|
214
215
|
declare class InputFactory {
|
|
215
216
|
static create<T extends Record<string, any> = Record<string, any>>(input: FieldProps<T>, form: UseFormReturn<T>, isSubmitting?: boolean): JSX.Element;
|
|
216
217
|
}
|
|
217
|
-
declare function getDefaultValues<T extends Record<string, any>>(entity?: Partial<T>): Record<string, any>;
|
|
218
|
+
declare function getDefaultValues<T extends Record<string, any>>(entity?: Partial<T>, fields?: Array<FieldProps<T> | FieldProps<T>[]>): Record<string, any>;
|
|
218
219
|
declare const getDynamicSchema: <T extends Record<string, any>>(fields: Array<FieldProps<T> | FieldProps<T>[]>, extraValidations?: ((schema: ZodObject<any>) => ZodObject<any>)[]) => ZodObject<Record<keyof T, ZodTypeAny>>;
|
|
219
220
|
|
|
220
221
|
declare class CheckListInput extends BaseInput {
|
package/dist/index.mjs
CHANGED
|
@@ -4482,44 +4482,56 @@ var SelectInput = class extends BaseInput {
|
|
|
4482
4482
|
};
|
|
4483
4483
|
var FieldSelect = ({ form, input, isSubmitting }) => {
|
|
4484
4484
|
const mockInputOptions = [
|
|
4485
|
-
{ id: 1, name: "MOCK OPTION - PERMISO 1"
|
|
4486
|
-
{ id: 2, name: "MOCK OPTION - PERMISO 2"
|
|
4487
|
-
{ id: 3, name: "MOCK OPTION - PERMISO 3"
|
|
4488
|
-
{ id: 4, name: "MOCK OPTION - PERMISO 4"
|
|
4485
|
+
{ value: 1, id: 1, name: "MOCK OPTION - PERMISO 1" },
|
|
4486
|
+
{ value: 2, id: 2, name: "MOCK OPTION - PERMISO 2" },
|
|
4487
|
+
{ value: 3, id: 3, name: "MOCK OPTION - PERMISO 3" },
|
|
4488
|
+
{ value: 4, id: 4, name: "MOCK OPTION - PERMISO 4" }
|
|
4489
4489
|
];
|
|
4490
|
-
|
|
4491
|
-
if (lista == void 0) lista = [];
|
|
4492
|
-
const value = input.value ?? "";
|
|
4490
|
+
const lista = input?.listConfig?.list?.every((item) => "name" in item) ? input.listConfig.list : mockInputOptions;
|
|
4493
4491
|
const optionValue = input?.listConfig?.optionValue ?? input.optionValue ?? "id";
|
|
4492
|
+
const [value, setValue] = useState(
|
|
4493
|
+
input.value?.toString() ?? ""
|
|
4494
|
+
);
|
|
4495
|
+
useEffect(() => {
|
|
4496
|
+
const currentValue = form.getValues(input.name);
|
|
4497
|
+
if (!currentValue && input.value) {
|
|
4498
|
+
form.setValue(input.name, input.value);
|
|
4499
|
+
setValue(input.value.toString());
|
|
4500
|
+
}
|
|
4501
|
+
}, [form, input.name, input.value]);
|
|
4494
4502
|
const getValue = (item) => {
|
|
4495
|
-
|
|
4496
|
-
return item.value ?? item.id;
|
|
4503
|
+
return (optionValue === "name" ? item.name.toString() : item.value.toString() ?? item.id).toString();
|
|
4497
4504
|
};
|
|
4498
4505
|
return /* @__PURE__ */ jsx(
|
|
4499
4506
|
FormField,
|
|
4500
4507
|
{
|
|
4501
4508
|
control: form.control,
|
|
4502
4509
|
name: input.name,
|
|
4503
|
-
render: ({ field }) =>
|
|
4504
|
-
|
|
4505
|
-
|
|
4506
|
-
|
|
4507
|
-
|
|
4508
|
-
|
|
4509
|
-
|
|
4510
|
-
|
|
4511
|
-
{
|
|
4512
|
-
|
|
4513
|
-
|
|
4514
|
-
|
|
4515
|
-
|
|
4516
|
-
|
|
4517
|
-
|
|
4518
|
-
|
|
4519
|
-
|
|
4520
|
-
|
|
4521
|
-
|
|
4522
|
-
|
|
4510
|
+
render: ({ field }) => {
|
|
4511
|
+
const currentValue = field.value?.toString() ?? value;
|
|
4512
|
+
return /* @__PURE__ */ jsxs(FormItem, { className: "flex flex-row items-center justify-between rounded-lg border p-3 shadow-lg bg-blue-100/20", children: [
|
|
4513
|
+
/* @__PURE__ */ jsxs("div", { className: "space-y-0.5 pr-5", children: [
|
|
4514
|
+
/* @__PURE__ */ jsx(FormLabel, { children: /* @__PURE__ */ jsx("b", { children: input.label }) }),
|
|
4515
|
+
input.description && /* @__PURE__ */ jsx(FormDescription, { children: input.description }),
|
|
4516
|
+
/* @__PURE__ */ jsx(FormMessage, {})
|
|
4517
|
+
] }),
|
|
4518
|
+
/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs(
|
|
4519
|
+
Select,
|
|
4520
|
+
{
|
|
4521
|
+
disabled: input.disabled || isSubmitting,
|
|
4522
|
+
onValueChange: (val) => {
|
|
4523
|
+
field.onChange(val);
|
|
4524
|
+
setValue(val);
|
|
4525
|
+
},
|
|
4526
|
+
value: currentValue || void 0,
|
|
4527
|
+
children: [
|
|
4528
|
+
/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(SelectTrigger, { className: "w-[60%] bg-black/10 dark:bg-white/25", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: input.placeHolder }) }) }),
|
|
4529
|
+
/* @__PURE__ */ jsx(SelectContent, { children: lista.map((item) => /* @__PURE__ */ jsx(SelectItem, { value: getValue(item), children: item.name }, item.id)) })
|
|
4530
|
+
]
|
|
4531
|
+
}
|
|
4532
|
+
) })
|
|
4533
|
+
] });
|
|
4534
|
+
}
|
|
4523
4535
|
},
|
|
4524
4536
|
input.name
|
|
4525
4537
|
);
|
|
@@ -5026,34 +5038,40 @@ var InputFactory = class {
|
|
|
5026
5038
|
return /* @__PURE__ */ jsx(Card, { className: "p-4 space-y-3", children: instance.render() });
|
|
5027
5039
|
}
|
|
5028
5040
|
};
|
|
5029
|
-
function getDefaultValues(entity) {
|
|
5041
|
+
function getDefaultValues(entity, fields) {
|
|
5030
5042
|
const defaults = {};
|
|
5031
|
-
if (
|
|
5032
|
-
|
|
5033
|
-
|
|
5034
|
-
|
|
5035
|
-
|
|
5036
|
-
|
|
5037
|
-
|
|
5038
|
-
|
|
5039
|
-
|
|
5040
|
-
|
|
5041
|
-
|
|
5042
|
-
|
|
5043
|
-
|
|
5044
|
-
|
|
5045
|
-
|
|
5046
|
-
|
|
5047
|
-
|
|
5048
|
-
|
|
5049
|
-
|
|
5050
|
-
|
|
5051
|
-
|
|
5052
|
-
defaults[key] =
|
|
5053
|
-
|
|
5054
|
-
|
|
5055
|
-
|
|
5056
|
-
|
|
5043
|
+
if (entity) {
|
|
5044
|
+
for (const key in entity) {
|
|
5045
|
+
const value = entity[key];
|
|
5046
|
+
if (value === null || value === void 0) {
|
|
5047
|
+
defaults[key] = "";
|
|
5048
|
+
continue;
|
|
5049
|
+
}
|
|
5050
|
+
switch (typeof value) {
|
|
5051
|
+
case "string":
|
|
5052
|
+
defaults[key] = value;
|
|
5053
|
+
break;
|
|
5054
|
+
case "number":
|
|
5055
|
+
defaults[key] = value;
|
|
5056
|
+
break;
|
|
5057
|
+
case "boolean":
|
|
5058
|
+
defaults[key] = value;
|
|
5059
|
+
break;
|
|
5060
|
+
case "object":
|
|
5061
|
+
defaults[key] = Array.isArray(value) ? [...value] : { ...value };
|
|
5062
|
+
break;
|
|
5063
|
+
default:
|
|
5064
|
+
defaults[key] = value;
|
|
5065
|
+
}
|
|
5066
|
+
}
|
|
5067
|
+
}
|
|
5068
|
+
if (fields) {
|
|
5069
|
+
const flatFields = fields.flat();
|
|
5070
|
+
for (const field of flatFields) {
|
|
5071
|
+
const key = field.name;
|
|
5072
|
+
if (defaults[key] === void 0) {
|
|
5073
|
+
defaults[key] = field.value ?? field.defaultValue ?? "";
|
|
5074
|
+
}
|
|
5057
5075
|
}
|
|
5058
5076
|
}
|
|
5059
5077
|
return defaults;
|
|
@@ -5147,6 +5165,7 @@ var DynamicForm = ({
|
|
|
5147
5165
|
const schema = useMemo(() => getDynamicSchema(fields, extraValidations), [fields, extraValidations]);
|
|
5148
5166
|
const resolver = zodResolver(schema);
|
|
5149
5167
|
const initialValues = useMemo(() => getDefaultValues(record), [record]);
|
|
5168
|
+
console.log("initialValues", initialValues);
|
|
5150
5169
|
const form = useForm({
|
|
5151
5170
|
resolver,
|
|
5152
5171
|
defaultValues: initialValues
|
|
@@ -5190,7 +5209,8 @@ var DynamicForm = ({
|
|
|
5190
5209
|
] }) }) })
|
|
5191
5210
|
]
|
|
5192
5211
|
}
|
|
5193
|
-
) })
|
|
5212
|
+
) }),
|
|
5213
|
+
withErrorsAlert && errorAlertPosition === "down" && /* @__PURE__ */ jsx(FormErrorsAlert, { formState: form.formState, fields })
|
|
5194
5214
|
] });
|
|
5195
5215
|
if (!withCard) return formContent;
|
|
5196
5216
|
return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { children: formContent }) });
|