@aatulwork/customform-renderer 1.0.0 → 1.1.0
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.d.mts +21 -5
- package/dist/index.d.ts +21 -5
- package/dist/index.js +68 -43
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +68 -43
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -73,6 +73,7 @@ interface FormRendererProps {
|
|
|
73
73
|
allowResetOnValuesChange?: boolean;
|
|
74
74
|
mode?: 'edit' | 'view';
|
|
75
75
|
services?: FormServices;
|
|
76
|
+
colors?: FormColors;
|
|
76
77
|
}
|
|
77
78
|
interface FormServices {
|
|
78
79
|
fileUpload?: FileUploadService;
|
|
@@ -115,6 +116,19 @@ interface DateFormatterService {
|
|
|
115
116
|
datePickerMode?: 'date' | 'datetime' | 'time';
|
|
116
117
|
}) => string;
|
|
117
118
|
}
|
|
119
|
+
interface FormColors {
|
|
120
|
+
primary?: string;
|
|
121
|
+
secondary?: string;
|
|
122
|
+
error?: string;
|
|
123
|
+
success?: string;
|
|
124
|
+
warning?: string;
|
|
125
|
+
info?: string;
|
|
126
|
+
textPrimary?: string;
|
|
127
|
+
textSecondary?: string;
|
|
128
|
+
divider?: string;
|
|
129
|
+
background?: string;
|
|
130
|
+
backgroundPaper?: string;
|
|
131
|
+
}
|
|
118
132
|
interface FieldRendererProps {
|
|
119
133
|
field: FormField;
|
|
120
134
|
control: any;
|
|
@@ -131,9 +145,10 @@ interface FieldRendererProps {
|
|
|
131
145
|
}) => void;
|
|
132
146
|
clearErrors?: (name?: string) => void;
|
|
133
147
|
services?: FormServices;
|
|
148
|
+
colors?: FormColors;
|
|
134
149
|
}
|
|
135
150
|
|
|
136
|
-
declare const FormRenderer: ({ formSchema, onSubmit, onCancel, isLoading, onSuccess, initialValues, hideTitle, allowResetOnValuesChange, mode, services, }: FormRendererProps) => react_jsx_runtime.JSX.Element;
|
|
151
|
+
declare const FormRenderer: ({ formSchema, onSubmit, onCancel, isLoading, onSuccess, initialValues, hideTitle, allowResetOnValuesChange, mode, services, colors, }: FormRendererProps) => react_jsx_runtime.JSX.Element;
|
|
137
152
|
|
|
138
153
|
interface FieldRendererComponentProps extends Omit<FieldRendererProps, 'defaultValue' | 'rules'> {
|
|
139
154
|
formSchema: any;
|
|
@@ -152,8 +167,9 @@ interface FormViewModeProps {
|
|
|
152
167
|
initialValues?: Record<string, any>;
|
|
153
168
|
hideTitle?: boolean;
|
|
154
169
|
services?: FormServices;
|
|
170
|
+
colors?: FormColors;
|
|
155
171
|
}
|
|
156
|
-
declare const FormViewMode: ({ formSchema, initialValues, hideTitle, services }: FormViewModeProps) => react_jsx_runtime.JSX.Element;
|
|
172
|
+
declare const FormViewMode: ({ formSchema, initialValues, hideTitle, services, colors }: FormViewModeProps) => react_jsx_runtime.JSX.Element;
|
|
157
173
|
|
|
158
174
|
interface FieldViewProps {
|
|
159
175
|
field: FormField;
|
|
@@ -181,7 +197,7 @@ declare global {
|
|
|
181
197
|
ClassicEditor: any;
|
|
182
198
|
}
|
|
183
199
|
}
|
|
184
|
-
declare const CKEditorField: ({ field, control, defaultValue, rules, errors, setValue, formSchema, services }: FieldRendererProps) => react_jsx_runtime.JSX.Element;
|
|
200
|
+
declare const CKEditorField: ({ field, control, defaultValue, rules, errors, setValue, formSchema, services, colors }: FieldRendererProps) => react_jsx_runtime.JSX.Element;
|
|
185
201
|
|
|
186
202
|
interface FileFieldProps extends FieldRendererProps {
|
|
187
203
|
uploadingFiles?: Record<string, boolean>;
|
|
@@ -192,7 +208,7 @@ interface FileFieldProps extends FieldRendererProps {
|
|
|
192
208
|
}) => void;
|
|
193
209
|
clearErrors?: (name?: string) => void;
|
|
194
210
|
}
|
|
195
|
-
declare const FileField: ({ field, control, defaultValue, rules, errors, formSchema, uploadingFiles, setUploadingFiles, setError, clearErrors, services, }: FileFieldProps) => react_jsx_runtime.JSX.Element;
|
|
211
|
+
declare const FileField: ({ field, control, defaultValue, rules, errors, formSchema, uploadingFiles, setUploadingFiles, setError, clearErrors, services, colors, }: FileFieldProps) => react_jsx_runtime.JSX.Element;
|
|
196
212
|
|
|
197
213
|
declare const FormReferenceField: ({ field, control, defaultValue, rules, errors, services }: FieldRendererProps) => react_jsx_runtime.JSX.Element;
|
|
198
214
|
declare const ApiReferenceField: ({ field, control, defaultValue, rules, errors, services }: FieldRendererProps) => react_jsx_runtime.JSX.Element;
|
|
@@ -349,4 +365,4 @@ declare const defaultApiReferenceService: ApiReferenceService;
|
|
|
349
365
|
*/
|
|
350
366
|
declare const defaultDateFormatterService: DateFormatterService;
|
|
351
367
|
|
|
352
|
-
export { ApiReferenceField, type ApiReferenceService, CKEditorField, CheckboxField, ColorField, type DateFormatterService, DateTimePickerField, FieldRenderer, type FieldRendererProps, type FieldType, type FieldValidation, FieldView, FileField, type FileUploadService, type FormField, FormReferenceField, type FormReferenceService, FormRenderer, type FormRendererProps, type FormSchema, type FormSection, type FormServices, FormViewMode, type OptionItem, RadioField, SelectField, SimpleSelect, type SimpleSelectOption, type SimpleSelectProps, TextField, ToggleField, type UploadedFile, buildFieldRules, defaultApiReferenceService, defaultDateFormatterService, defaultFileUploadService, defaultFormReferenceService, formatFileSize, getAllFields, getDefaultValue, isCKEditorAvailable, loadCKEditor, normalizeInitialValues, normalizeOptions, transformFormValues, useCKEditor, validateFile, waitForCKEditor };
|
|
368
|
+
export { ApiReferenceField, type ApiReferenceService, CKEditorField, CheckboxField, ColorField, type DateFormatterService, DateTimePickerField, FieldRenderer, type FieldRendererProps, type FieldType, type FieldValidation, FieldView, FileField, type FileUploadService, type FormColors, type FormField, FormReferenceField, type FormReferenceService, FormRenderer, type FormRendererProps, type FormSchema, type FormSection, type FormServices, FormViewMode, type OptionItem, RadioField, SelectField, SimpleSelect, type SimpleSelectOption, type SimpleSelectProps, TextField, ToggleField, type UploadedFile, buildFieldRules, defaultApiReferenceService, defaultDateFormatterService, defaultFileUploadService, defaultFormReferenceService, formatFileSize, getAllFields, getDefaultValue, isCKEditorAvailable, loadCKEditor, normalizeInitialValues, normalizeOptions, transformFormValues, useCKEditor, validateFile, waitForCKEditor };
|
package/dist/index.d.ts
CHANGED
|
@@ -73,6 +73,7 @@ interface FormRendererProps {
|
|
|
73
73
|
allowResetOnValuesChange?: boolean;
|
|
74
74
|
mode?: 'edit' | 'view';
|
|
75
75
|
services?: FormServices;
|
|
76
|
+
colors?: FormColors;
|
|
76
77
|
}
|
|
77
78
|
interface FormServices {
|
|
78
79
|
fileUpload?: FileUploadService;
|
|
@@ -115,6 +116,19 @@ interface DateFormatterService {
|
|
|
115
116
|
datePickerMode?: 'date' | 'datetime' | 'time';
|
|
116
117
|
}) => string;
|
|
117
118
|
}
|
|
119
|
+
interface FormColors {
|
|
120
|
+
primary?: string;
|
|
121
|
+
secondary?: string;
|
|
122
|
+
error?: string;
|
|
123
|
+
success?: string;
|
|
124
|
+
warning?: string;
|
|
125
|
+
info?: string;
|
|
126
|
+
textPrimary?: string;
|
|
127
|
+
textSecondary?: string;
|
|
128
|
+
divider?: string;
|
|
129
|
+
background?: string;
|
|
130
|
+
backgroundPaper?: string;
|
|
131
|
+
}
|
|
118
132
|
interface FieldRendererProps {
|
|
119
133
|
field: FormField;
|
|
120
134
|
control: any;
|
|
@@ -131,9 +145,10 @@ interface FieldRendererProps {
|
|
|
131
145
|
}) => void;
|
|
132
146
|
clearErrors?: (name?: string) => void;
|
|
133
147
|
services?: FormServices;
|
|
148
|
+
colors?: FormColors;
|
|
134
149
|
}
|
|
135
150
|
|
|
136
|
-
declare const FormRenderer: ({ formSchema, onSubmit, onCancel, isLoading, onSuccess, initialValues, hideTitle, allowResetOnValuesChange, mode, services, }: FormRendererProps) => react_jsx_runtime.JSX.Element;
|
|
151
|
+
declare const FormRenderer: ({ formSchema, onSubmit, onCancel, isLoading, onSuccess, initialValues, hideTitle, allowResetOnValuesChange, mode, services, colors, }: FormRendererProps) => react_jsx_runtime.JSX.Element;
|
|
137
152
|
|
|
138
153
|
interface FieldRendererComponentProps extends Omit<FieldRendererProps, 'defaultValue' | 'rules'> {
|
|
139
154
|
formSchema: any;
|
|
@@ -152,8 +167,9 @@ interface FormViewModeProps {
|
|
|
152
167
|
initialValues?: Record<string, any>;
|
|
153
168
|
hideTitle?: boolean;
|
|
154
169
|
services?: FormServices;
|
|
170
|
+
colors?: FormColors;
|
|
155
171
|
}
|
|
156
|
-
declare const FormViewMode: ({ formSchema, initialValues, hideTitle, services }: FormViewModeProps) => react_jsx_runtime.JSX.Element;
|
|
172
|
+
declare const FormViewMode: ({ formSchema, initialValues, hideTitle, services, colors }: FormViewModeProps) => react_jsx_runtime.JSX.Element;
|
|
157
173
|
|
|
158
174
|
interface FieldViewProps {
|
|
159
175
|
field: FormField;
|
|
@@ -181,7 +197,7 @@ declare global {
|
|
|
181
197
|
ClassicEditor: any;
|
|
182
198
|
}
|
|
183
199
|
}
|
|
184
|
-
declare const CKEditorField: ({ field, control, defaultValue, rules, errors, setValue, formSchema, services }: FieldRendererProps) => react_jsx_runtime.JSX.Element;
|
|
200
|
+
declare const CKEditorField: ({ field, control, defaultValue, rules, errors, setValue, formSchema, services, colors }: FieldRendererProps) => react_jsx_runtime.JSX.Element;
|
|
185
201
|
|
|
186
202
|
interface FileFieldProps extends FieldRendererProps {
|
|
187
203
|
uploadingFiles?: Record<string, boolean>;
|
|
@@ -192,7 +208,7 @@ interface FileFieldProps extends FieldRendererProps {
|
|
|
192
208
|
}) => void;
|
|
193
209
|
clearErrors?: (name?: string) => void;
|
|
194
210
|
}
|
|
195
|
-
declare const FileField: ({ field, control, defaultValue, rules, errors, formSchema, uploadingFiles, setUploadingFiles, setError, clearErrors, services, }: FileFieldProps) => react_jsx_runtime.JSX.Element;
|
|
211
|
+
declare const FileField: ({ field, control, defaultValue, rules, errors, formSchema, uploadingFiles, setUploadingFiles, setError, clearErrors, services, colors, }: FileFieldProps) => react_jsx_runtime.JSX.Element;
|
|
196
212
|
|
|
197
213
|
declare const FormReferenceField: ({ field, control, defaultValue, rules, errors, services }: FieldRendererProps) => react_jsx_runtime.JSX.Element;
|
|
198
214
|
declare const ApiReferenceField: ({ field, control, defaultValue, rules, errors, services }: FieldRendererProps) => react_jsx_runtime.JSX.Element;
|
|
@@ -349,4 +365,4 @@ declare const defaultApiReferenceService: ApiReferenceService;
|
|
|
349
365
|
*/
|
|
350
366
|
declare const defaultDateFormatterService: DateFormatterService;
|
|
351
367
|
|
|
352
|
-
export { ApiReferenceField, type ApiReferenceService, CKEditorField, CheckboxField, ColorField, type DateFormatterService, DateTimePickerField, FieldRenderer, type FieldRendererProps, type FieldType, type FieldValidation, FieldView, FileField, type FileUploadService, type FormField, FormReferenceField, type FormReferenceService, FormRenderer, type FormRendererProps, type FormSchema, type FormSection, type FormServices, FormViewMode, type OptionItem, RadioField, SelectField, SimpleSelect, type SimpleSelectOption, type SimpleSelectProps, TextField, ToggleField, type UploadedFile, buildFieldRules, defaultApiReferenceService, defaultDateFormatterService, defaultFileUploadService, defaultFormReferenceService, formatFileSize, getAllFields, getDefaultValue, isCKEditorAvailable, loadCKEditor, normalizeInitialValues, normalizeOptions, transformFormValues, useCKEditor, validateFile, waitForCKEditor };
|
|
368
|
+
export { ApiReferenceField, type ApiReferenceService, CKEditorField, CheckboxField, ColorField, type DateFormatterService, DateTimePickerField, FieldRenderer, type FieldRendererProps, type FieldType, type FieldValidation, FieldView, FileField, type FileUploadService, type FormColors, type FormField, FormReferenceField, type FormReferenceService, FormRenderer, type FormRendererProps, type FormSchema, type FormSection, type FormServices, FormViewMode, type OptionItem, RadioField, SelectField, SimpleSelect, type SimpleSelectOption, type SimpleSelectProps, TextField, ToggleField, type UploadedFile, buildFieldRules, defaultApiReferenceService, defaultDateFormatterService, defaultFileUploadService, defaultFormReferenceService, formatFileSize, getAllFields, getDefaultValue, isCKEditorAvailable, loadCKEditor, normalizeInitialValues, normalizeOptions, transformFormValues, useCKEditor, validateFile, waitForCKEditor };
|
package/dist/index.js
CHANGED
|
@@ -136,6 +136,22 @@ var transformFormValues = (data, formSchema) => {
|
|
|
136
136
|
});
|
|
137
137
|
return transformedData;
|
|
138
138
|
};
|
|
139
|
+
var useFormColors = (customColors) => {
|
|
140
|
+
const theme = material.useTheme();
|
|
141
|
+
return {
|
|
142
|
+
primary: customColors?.primary || theme.palette.primary.main,
|
|
143
|
+
secondary: customColors?.secondary || theme.palette.secondary.main,
|
|
144
|
+
error: customColors?.error || theme.palette.error.main,
|
|
145
|
+
success: customColors?.success || theme.palette.success.main,
|
|
146
|
+
warning: customColors?.warning || theme.palette.warning.main,
|
|
147
|
+
info: customColors?.info || theme.palette.info.main,
|
|
148
|
+
textPrimary: customColors?.textPrimary || theme.palette.text.primary,
|
|
149
|
+
textSecondary: customColors?.textSecondary || theme.palette.text.secondary,
|
|
150
|
+
divider: customColors?.divider || theme.palette.divider,
|
|
151
|
+
background: customColors?.background || theme.palette.background.default,
|
|
152
|
+
backgroundPaper: customColors?.backgroundPaper || theme.palette.background.paper
|
|
153
|
+
};
|
|
154
|
+
};
|
|
139
155
|
var TextField = ({ field, control, defaultValue, rules, errors }) => {
|
|
140
156
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
141
157
|
reactHookForm.Controller,
|
|
@@ -631,8 +647,9 @@ var useCKEditor = (options = {}) => {
|
|
|
631
647
|
load
|
|
632
648
|
};
|
|
633
649
|
};
|
|
634
|
-
var CKEditorField = ({ field, control, defaultValue, rules, errors, setValue, formSchema, services }) => {
|
|
650
|
+
var CKEditorField = ({ field, control, defaultValue, rules, errors, setValue, formSchema, services, colors }) => {
|
|
635
651
|
const theme = material.useTheme();
|
|
652
|
+
const formColors = useFormColors(colors);
|
|
636
653
|
const editorContainerRef = react.useRef(null);
|
|
637
654
|
const fileUploadService = services?.fileUpload || defaultFileUploadService;
|
|
638
655
|
const fileBaseUrl = services?.fileBaseUrl || "";
|
|
@@ -684,13 +701,13 @@ var CKEditorField = ({ field, control, defaultValue, rules, errors, setValue, fo
|
|
|
684
701
|
if (isCKEditorLoading) {
|
|
685
702
|
return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
|
|
686
703
|
/* @__PURE__ */ jsxRuntime.jsx(material.FormLabel, { required: field.required, error: !!errors[field.name], children: field.label }),
|
|
687
|
-
/* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { p: 2, textAlign: "center", color:
|
|
704
|
+
/* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { p: 2, textAlign: "center", color: formColors.textSecondary }, children: "Loading editor..." })
|
|
688
705
|
] });
|
|
689
706
|
}
|
|
690
707
|
if (ckEditorError || !isCKEditorReady) {
|
|
691
708
|
return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
|
|
692
709
|
/* @__PURE__ */ jsxRuntime.jsx(material.FormLabel, { required: field.required, error: !!errors[field.name], children: field.label }),
|
|
693
|
-
/* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { p: 2, border: "1px solid", borderColor:
|
|
710
|
+
/* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { p: 2, border: "1px solid", borderColor: formColors.error, borderRadius: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { error: true, children: ckEditorError?.message || "CKEditor failed to load. Please ensure the CKEditor script is loaded." }) })
|
|
694
711
|
] });
|
|
695
712
|
}
|
|
696
713
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -736,11 +753,11 @@ var CKEditorField = ({ field, control, defaultValue, rules, errors, setValue, fo
|
|
|
736
753
|
minHeight: "100px"
|
|
737
754
|
},
|
|
738
755
|
"&:hover": {
|
|
739
|
-
borderColor: errors[field.name] ?
|
|
756
|
+
borderColor: errors[field.name] ? formColors.error : theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.87)" : formColors.primary
|
|
740
757
|
},
|
|
741
758
|
"& .ck-focused": {
|
|
742
|
-
border: errors[field.name] ? `1px solid ${
|
|
743
|
-
boxShadow: errors[field.name] ? `0 0 0 1px ${
|
|
759
|
+
border: errors[field.name] ? `1px solid ${formColors.error} !important` : `1px solid ${theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.23)" : formColors.primary} !important`,
|
|
760
|
+
boxShadow: errors[field.name] ? `0 0 0 1px ${formColors.error}` : `0 0 0 1px ${material.alpha(formColors.primary, 0.5)} !important`
|
|
744
761
|
}
|
|
745
762
|
}
|
|
746
763
|
},
|
|
@@ -803,10 +820,12 @@ var FileField = ({
|
|
|
803
820
|
setUploadingFiles,
|
|
804
821
|
setError,
|
|
805
822
|
clearErrors,
|
|
806
|
-
services
|
|
823
|
+
services,
|
|
824
|
+
colors
|
|
807
825
|
}) => {
|
|
808
826
|
const theme = material.useTheme();
|
|
809
827
|
const isMobile = material.useMediaQuery(theme.breakpoints.down("md"));
|
|
828
|
+
const formColors = useFormColors(colors);
|
|
810
829
|
const acceptTypes = field.validation?.allowedFileTypes ? field.validation.allowedFileTypes.map((type) => `.${type.replace(".", "")}`).join(",") : void 0;
|
|
811
830
|
const isMultiple = field.allowMultiple || false;
|
|
812
831
|
const fileUploadService = services?.fileUpload || defaultFileUploadService;
|
|
@@ -846,15 +865,15 @@ var FileField = ({
|
|
|
846
865
|
alignItems: "center",
|
|
847
866
|
justifyContent: "center",
|
|
848
867
|
border: "1px dashed",
|
|
849
|
-
borderColor: errors[field.name] ?
|
|
868
|
+
borderColor: errors[field.name] ? formColors.error : isUploading ? formColors.primary : hasFiles ? formColors.primary : formColors.divider,
|
|
850
869
|
p: 1,
|
|
851
870
|
cursor: isUploading ? "wait" : "pointer",
|
|
852
871
|
transition: "all 0.2s ease-in-out",
|
|
853
|
-
backgroundColor: isUploading || hasFiles ? "action.hover" :
|
|
872
|
+
backgroundColor: isUploading || hasFiles ? "action.hover" : formColors.backgroundPaper,
|
|
854
873
|
opacity: isUploading ? 0.7 : 1,
|
|
855
874
|
pointerEvents: isUploading ? "none" : "auto",
|
|
856
875
|
"&:hover": {
|
|
857
|
-
borderColor: isUploading ?
|
|
876
|
+
borderColor: isUploading ? formColors.primary : formColors.primary,
|
|
858
877
|
backgroundColor: "action.hover"
|
|
859
878
|
}
|
|
860
879
|
},
|
|
@@ -923,19 +942,19 @@ var FileField = ({
|
|
|
923
942
|
),
|
|
924
943
|
isUploading ? /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 1, py: 3, width: "100%" }, children: [
|
|
925
944
|
/* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 40 }),
|
|
926
|
-
/* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2",
|
|
927
|
-
/* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color:
|
|
945
|
+
/* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", sx: { fontWeight: 500, color: formColors.primary }, children: "Uploading files..." }),
|
|
946
|
+
/* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", sx: { color: formColors.textSecondary }, children: "Please wait while files are being uploaded" })
|
|
928
947
|
] }) : !hasFiles ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
929
|
-
/* @__PURE__ */ jsxRuntime.jsx(CloudUploadIcon__default.default, { sx: { fontSize: 40, color:
|
|
930
|
-
/* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption", color:
|
|
948
|
+
/* @__PURE__ */ jsxRuntime.jsx(CloudUploadIcon__default.default, { sx: { fontSize: 40, color: formColors.textSecondary, mb: 1 } }),
|
|
949
|
+
/* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption", sx: { color: formColors.textSecondary }, children: [
|
|
931
950
|
"Click to upload or drag and drop",
|
|
932
951
|
isMultiple && " (multiple files allowed)"
|
|
933
952
|
] }),
|
|
934
|
-
field.validation?.allowedFileTypes && field.validation.allowedFileTypes.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption",
|
|
953
|
+
field.validation?.allowedFileTypes && field.validation.allowedFileTypes.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption", sx: { mt: 0.5, color: formColors.textSecondary }, children: [
|
|
935
954
|
"Allowed: ",
|
|
936
955
|
field.validation.allowedFileTypes.join(", ")
|
|
937
956
|
] }),
|
|
938
|
-
field.validation?.maxFileSize && /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption",
|
|
957
|
+
field.validation?.maxFileSize && /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption", sx: { mt: 0.5, color: formColors.textSecondary }, children: [
|
|
939
958
|
"Max size: ",
|
|
940
959
|
formatFileSize(field.validation.maxFileSize),
|
|
941
960
|
" per file"
|
|
@@ -948,10 +967,10 @@ var FileField = ({
|
|
|
948
967
|
" uploaded"
|
|
949
968
|
] }),
|
|
950
969
|
files.length === 1 && !isMultiple ? /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 2, width: "100%" }, children: [
|
|
951
|
-
/* @__PURE__ */ jsxRuntime.jsx(InsertDriveFileIcon__default.default, { sx: { fontSize: 40, color:
|
|
970
|
+
/* @__PURE__ */ jsxRuntime.jsx(InsertDriveFileIcon__default.default, { sx: { fontSize: 40, color: formColors.primary } }),
|
|
952
971
|
/* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { flexGrow: 1, minWidth: 0 }, children: [
|
|
953
972
|
/* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", sx: { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", maxWidth: isMobile ? "200px" : "300px" }, children: files[0] instanceof File ? files[0].name : files[0].originalName || files[0].fileName }),
|
|
954
|
-
/* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color:
|
|
973
|
+
/* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", sx: { color: formColors.textSecondary }, children: formatFileSize(files[0].size || 0) })
|
|
955
974
|
] }),
|
|
956
975
|
/* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Remove file", placement: "bottom", arrow: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
957
976
|
material.IconButton,
|
|
@@ -966,7 +985,7 @@ var FileField = ({
|
|
|
966
985
|
fileInput.value = "";
|
|
967
986
|
}
|
|
968
987
|
},
|
|
969
|
-
sx: { color:
|
|
988
|
+
sx: { color: formColors.error },
|
|
970
989
|
children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, { fontSize: "small" })
|
|
971
990
|
}
|
|
972
991
|
) })
|
|
@@ -981,15 +1000,15 @@ var FileField = ({
|
|
|
981
1000
|
gap: 1.5,
|
|
982
1001
|
p: 1,
|
|
983
1002
|
borderRadius: 1,
|
|
984
|
-
backgroundColor:
|
|
1003
|
+
backgroundColor: formColors.background,
|
|
985
1004
|
border: "1px solid",
|
|
986
|
-
borderColor:
|
|
1005
|
+
borderColor: formColors.divider
|
|
987
1006
|
},
|
|
988
1007
|
children: [
|
|
989
|
-
/* @__PURE__ */ jsxRuntime.jsx(InsertDriveFileIcon__default.default, { sx: { fontSize: 32, color:
|
|
1008
|
+
/* @__PURE__ */ jsxRuntime.jsx(InsertDriveFileIcon__default.default, { sx: { fontSize: 32, color: formColors.primary } }),
|
|
990
1009
|
/* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { flexGrow: 1, minWidth: 0 }, children: [
|
|
991
1010
|
/* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", sx: { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis" }, children: fileName }),
|
|
992
|
-
/* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color:
|
|
1011
|
+
/* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", sx: { color: formColors.textSecondary }, children: formatFileSize(file.size || 0) })
|
|
993
1012
|
] }),
|
|
994
1013
|
/* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Remove file", placement: "bottom", arrow: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
995
1014
|
material.IconButton,
|
|
@@ -1005,7 +1024,7 @@ var FileField = ({
|
|
|
1005
1024
|
formField.onChange(null);
|
|
1006
1025
|
}
|
|
1007
1026
|
},
|
|
1008
|
-
sx: { color:
|
|
1027
|
+
sx: { color: formColors.error },
|
|
1009
1028
|
children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, { fontSize: "small" })
|
|
1010
1029
|
}
|
|
1011
1030
|
) })
|
|
@@ -1018,7 +1037,7 @@ var FileField = ({
|
|
|
1018
1037
|
]
|
|
1019
1038
|
}
|
|
1020
1039
|
),
|
|
1021
|
-
errors[field.name] && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption",
|
|
1040
|
+
errors[field.name] && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", sx: { mt: 1, display: "block", color: formColors.error }, children: errors[field.name]?.message })
|
|
1022
1041
|
] });
|
|
1023
1042
|
}
|
|
1024
1043
|
},
|
|
@@ -1220,7 +1239,8 @@ var FieldRenderer = (props) => {
|
|
|
1220
1239
|
errors: props.errors,
|
|
1221
1240
|
setValue: props.setValue,
|
|
1222
1241
|
formSchema,
|
|
1223
|
-
services
|
|
1242
|
+
services,
|
|
1243
|
+
colors: props.colors
|
|
1224
1244
|
};
|
|
1225
1245
|
switch (field.type) {
|
|
1226
1246
|
case "text":
|
|
@@ -1452,10 +1472,11 @@ var formatFieldValue = (field, value, dateFormatter, services) => {
|
|
|
1452
1472
|
return String(value);
|
|
1453
1473
|
}
|
|
1454
1474
|
};
|
|
1455
|
-
var FormViewMode = ({ formSchema, initialValues, hideTitle = false, services }) => {
|
|
1475
|
+
var FormViewMode = ({ formSchema, initialValues, hideTitle = false, services, colors }) => {
|
|
1456
1476
|
const fieldsToRender = getAllFields(formSchema);
|
|
1457
1477
|
const theme = material.useTheme();
|
|
1458
1478
|
const isMobile = material.useMediaQuery(theme.breakpoints.down("md"));
|
|
1479
|
+
const formColors = useFormColors(colors);
|
|
1459
1480
|
return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { maxWidth: 600, mx: "auto", width: "100%" }, children: [
|
|
1460
1481
|
!hideTitle && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", gutterBottom: true, sx: { mb: 2, fontWeight: 600 }, children: formSchema.title }),
|
|
1461
1482
|
formSchema.sections && formSchema.sections.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", flexDirection: "column", gap: 1.5 }, children: formSchema.sections.map((section, sectionIndex) => /* @__PURE__ */ jsxRuntime.jsxs(material.Accordion, { defaultExpanded: sectionIndex === 0, children: [
|
|
@@ -1466,13 +1487,13 @@ var FormViewMode = ({ formSchema, initialValues, hideTitle = false, services })
|
|
|
1466
1487
|
"aria-controls": `panel-${section.id}-content`,
|
|
1467
1488
|
id: `panel-${section.id}-header`,
|
|
1468
1489
|
children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
|
|
1469
|
-
/* @__PURE__ */ jsxRuntime.jsx(DoubleArrowOutlinedIcon__default.default, { fontSize: "small", color:
|
|
1470
|
-
/* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle1", sx: { fontWeight: 600
|
|
1490
|
+
/* @__PURE__ */ jsxRuntime.jsx(DoubleArrowOutlinedIcon__default.default, { fontSize: "small", sx: { color: formColors.primary } }),
|
|
1491
|
+
/* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle1", sx: { fontWeight: 600, color: formColors.primary }, children: section.title })
|
|
1471
1492
|
] })
|
|
1472
1493
|
}
|
|
1473
1494
|
),
|
|
1474
1495
|
/* @__PURE__ */ jsxRuntime.jsxs(material.AccordionDetails, { children: [
|
|
1475
|
-
section.description && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption",
|
|
1496
|
+
section.description && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", sx: { mb: 1.5, display: "block", color: formColors.textSecondary }, children: section.description }),
|
|
1476
1497
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1477
1498
|
material.Box,
|
|
1478
1499
|
{
|
|
@@ -1508,8 +1529,10 @@ var FormRenderer = ({
|
|
|
1508
1529
|
hideTitle = false,
|
|
1509
1530
|
allowResetOnValuesChange = false,
|
|
1510
1531
|
mode = "edit",
|
|
1511
|
-
services
|
|
1532
|
+
services,
|
|
1533
|
+
colors
|
|
1512
1534
|
}) => {
|
|
1535
|
+
const formColors = useFormColors(colors);
|
|
1513
1536
|
const {
|
|
1514
1537
|
control,
|
|
1515
1538
|
handleSubmit,
|
|
@@ -1590,7 +1613,7 @@ var FormRenderer = ({
|
|
|
1590
1613
|
}
|
|
1591
1614
|
};
|
|
1592
1615
|
if (mode === "view") {
|
|
1593
|
-
return /* @__PURE__ */ jsxRuntime.jsx(FormViewMode, { formSchema, initialValues, hideTitle, services });
|
|
1616
|
+
return /* @__PURE__ */ jsxRuntime.jsx(FormViewMode, { formSchema, initialValues, hideTitle, services, colors });
|
|
1594
1617
|
}
|
|
1595
1618
|
return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { component: "form", onSubmit: handleSubmit(handleFormSubmit), sx: { mx: "auto", width: "100%" }, children: [
|
|
1596
1619
|
!hideTitle && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", gutterBottom: true, sx: { mb: 2, fontWeight: 600 }, children: formSchema.title }),
|
|
@@ -1634,7 +1657,8 @@ var FormRenderer = ({
|
|
|
1634
1657
|
setUploadingFiles,
|
|
1635
1658
|
setError,
|
|
1636
1659
|
clearErrors,
|
|
1637
|
-
services
|
|
1660
|
+
services,
|
|
1661
|
+
colors
|
|
1638
1662
|
}
|
|
1639
1663
|
)
|
|
1640
1664
|
},
|
|
@@ -1644,7 +1668,7 @@ var FormRenderer = ({
|
|
|
1644
1668
|
}
|
|
1645
1669
|
);
|
|
1646
1670
|
if (sectionDisplayMode === "stepper") {
|
|
1647
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { border: "1px solid", borderColor:
|
|
1671
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { border: "1px solid", borderColor: formColors.divider, p: 5, backgroundColor: formColors.backgroundPaper }, children: [
|
|
1648
1672
|
/* @__PURE__ */ jsxRuntime.jsx(material.Stepper, { activeStep, orientation: "horizontal", children: formSchema.sections.map((section) => /* @__PURE__ */ jsxRuntime.jsx(material.Step, { children: /* @__PURE__ */ jsxRuntime.jsx(material.StepLabel, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle1", sx: { fontWeight: 600 }, children: section.title }) }) }, section.id)) }),
|
|
1649
1673
|
/* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mt: 5 }, children: formSchema.sections.map((section, sectionIndex) => {
|
|
1650
1674
|
const sectionsLength = formSchema.sections?.length || 0;
|
|
@@ -1655,15 +1679,15 @@ var FormRenderer = ({
|
|
|
1655
1679
|
display: activeStep === sectionIndex ? "block" : "none"
|
|
1656
1680
|
},
|
|
1657
1681
|
children: [
|
|
1658
|
-
section.description && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption",
|
|
1682
|
+
section.description && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", sx: { mb: 1.5, display: "block", color: formColors.textSecondary }, children: section.description }),
|
|
1659
1683
|
renderFieldsGrid(section),
|
|
1660
|
-
/* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { mt: 2, display: "flex", gap: 1, borderTop: "1px solid", pt: 2, borderColor:
|
|
1684
|
+
/* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { mt: 2, display: "flex", gap: 1, borderTop: "1px solid", pt: 2, borderColor: formColors.divider, justifyContent: "center" }, children: [
|
|
1661
1685
|
sectionIndex > 0 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1662
1686
|
material.Button,
|
|
1663
1687
|
{
|
|
1664
1688
|
size: "small",
|
|
1665
1689
|
variant: "outlined",
|
|
1666
|
-
color: "success
|
|
1690
|
+
sx: { borderColor: formColors.success, color: formColors.success, "&:hover": { borderColor: formColors.success, backgroundColor: `${formColors.success}15` } },
|
|
1667
1691
|
startIcon: /* @__PURE__ */ jsxRuntime.jsx(ArrowBackIcon__default.default, {}),
|
|
1668
1692
|
onClick: () => setActiveStep(sectionIndex - 1),
|
|
1669
1693
|
children: "Previous"
|
|
@@ -1674,7 +1698,7 @@ var FormRenderer = ({
|
|
|
1674
1698
|
{
|
|
1675
1699
|
variant: "outlined",
|
|
1676
1700
|
size: "small",
|
|
1677
|
-
color: "warning
|
|
1701
|
+
sx: { borderColor: formColors.warning, color: formColors.warning, "&:hover": { borderColor: formColors.warning, backgroundColor: `${formColors.warning}15` } },
|
|
1678
1702
|
endIcon: /* @__PURE__ */ jsxRuntime.jsx(ArrowForwardIcon__default.default, {}),
|
|
1679
1703
|
onClick: () => {
|
|
1680
1704
|
if (sectionIndex < sectionsLength - 1) {
|
|
@@ -1700,13 +1724,13 @@ var FormRenderer = ({
|
|
|
1700
1724
|
"aria-controls": `panel-${section.id}-content`,
|
|
1701
1725
|
id: `panel-${section.id}-header`,
|
|
1702
1726
|
children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
|
|
1703
|
-
/* @__PURE__ */ jsxRuntime.jsx(DoubleArrowOutlinedIcon__default.default, { fontSize: "small", color:
|
|
1704
|
-
/* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle1",
|
|
1727
|
+
/* @__PURE__ */ jsxRuntime.jsx(DoubleArrowOutlinedIcon__default.default, { fontSize: "small", sx: { color: formColors.primary } }),
|
|
1728
|
+
/* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle1", sx: { fontWeight: 600, color: formColors.primary }, children: section.title })
|
|
1705
1729
|
] })
|
|
1706
1730
|
}
|
|
1707
1731
|
),
|
|
1708
1732
|
/* @__PURE__ */ jsxRuntime.jsxs(material.AccordionDetails, { children: [
|
|
1709
|
-
section.description && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption",
|
|
1733
|
+
section.description && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", sx: { mb: 1.5, display: "block", color: formColors.textSecondary }, children: section.description }),
|
|
1710
1734
|
renderFieldsGrid(section)
|
|
1711
1735
|
] })
|
|
1712
1736
|
] }, section.id)) });
|
|
@@ -1748,7 +1772,8 @@ var FormRenderer = ({
|
|
|
1748
1772
|
setUploadingFiles,
|
|
1749
1773
|
setError,
|
|
1750
1774
|
clearErrors,
|
|
1751
|
-
services
|
|
1775
|
+
services,
|
|
1776
|
+
colors
|
|
1752
1777
|
}
|
|
1753
1778
|
)
|
|
1754
1779
|
},
|
|
@@ -1765,7 +1790,7 @@ var FormRenderer = ({
|
|
|
1765
1790
|
type: "submit",
|
|
1766
1791
|
variant: "contained",
|
|
1767
1792
|
size: "small",
|
|
1768
|
-
sx: { minWidth: 120 },
|
|
1793
|
+
sx: { minWidth: 120, backgroundColor: formColors.primary, "&:hover": { backgroundColor: formColors.primary } },
|
|
1769
1794
|
disabled: isLoading,
|
|
1770
1795
|
children: isLoading ? "Submitting..." : "Submit"
|
|
1771
1796
|
}
|