@akinon/akiform-builder 1.3.2 → 1.3.4
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/cjs/akiform-builder.d.ts.map +1 -1
- package/dist/cjs/akiform-builder.js +54 -33
- package/dist/cjs/constants.d.ts +15 -0
- package/dist/cjs/constants.d.ts.map +1 -0
- package/dist/cjs/constants.js +18 -0
- package/dist/cjs/field-builder.d.ts +3 -2
- package/dist/cjs/field-builder.d.ts.map +1 -1
- package/dist/cjs/field-builder.js +9 -5
- package/dist/cjs/i18n/translations/en.d.ts +3 -0
- package/dist/cjs/i18n/translations/en.d.ts.map +1 -1
- package/dist/cjs/i18n/translations/en.js +4 -1
- package/dist/cjs/i18n/translations/tr.d.ts +3 -0
- package/dist/cjs/i18n/translations/tr.d.ts.map +1 -1
- package/dist/cjs/i18n/translations/tr.js +4 -1
- package/dist/cjs/index.d.ts +1 -0
- package/dist/cjs/index.d.ts.map +1 -1
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/types.d.ts +27 -16
- package/dist/cjs/types.d.ts.map +1 -1
- package/dist/esm/akiform-builder.d.ts.map +1 -1
- package/dist/esm/akiform-builder.js +54 -33
- package/dist/esm/constants.d.ts +15 -0
- package/dist/esm/constants.d.ts.map +1 -0
- package/dist/esm/constants.js +15 -0
- package/dist/esm/field-builder.d.ts +3 -2
- package/dist/esm/field-builder.d.ts.map +1 -1
- package/dist/esm/field-builder.js +9 -5
- package/dist/esm/i18n/translations/en.d.ts +3 -0
- package/dist/esm/i18n/translations/en.d.ts.map +1 -1
- package/dist/esm/i18n/translations/en.js +4 -1
- package/dist/esm/i18n/translations/tr.d.ts +3 -0
- package/dist/esm/i18n/translations/tr.d.ts.map +1 -1
- package/dist/esm/i18n/translations/tr.js +4 -1
- package/dist/esm/index.d.ts +1 -0
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +1 -0
- package/dist/esm/types.d.ts +27 -16
- package/dist/esm/types.d.ts.map +1 -1
- package/package.json +21 -19
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"akiform-builder.d.ts","sourceRoot":"","sources":["../../src/akiform-builder.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"akiform-builder.d.ts","sourceRoot":"","sources":["../../src/akiform-builder.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAGrB,OAAO,EAOL,WAAW,EAMZ,MAAM,iBAAiB,CAAC;AAczB,OAAO,KAWN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EACV,mBAAmB,EACnB,iBAAiB,EASlB,MAAM,SAAS,CAAC;AAWjB,eAAO,MAAM,cAAc,MAAM,CAAC;AA6YlC,eAAO,MAAM,cAAc,yHAsW1B,CAAC"}
|
|
@@ -13,6 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
13
13
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
14
|
exports.AkiformBuilder = exports.THROTTLE_DELAY = void 0;
|
|
15
15
|
require("./index.css");
|
|
16
|
+
const akidate_1 = require("@akinon/akidate");
|
|
16
17
|
const akiform_1 = require("@akinon/akiform");
|
|
17
18
|
const akival_1 = require("@akinon/akival");
|
|
18
19
|
const icons_1 = require("@akinon/icons");
|
|
@@ -28,7 +29,13 @@ const ui_select_1 = require("@akinon/ui-select");
|
|
|
28
29
|
const ui_typography_1 = require("@akinon/ui-typography");
|
|
29
30
|
const clsx_1 = require("clsx");
|
|
30
31
|
const react_1 = require("react");
|
|
32
|
+
const constants_1 = require("./constants");
|
|
31
33
|
const i18n_1 = require("./i18n");
|
|
34
|
+
// Helper function to get API field error for a specific field
|
|
35
|
+
const getApiFieldError = (fieldKey, apiErrors) => {
|
|
36
|
+
const error = apiErrors.find(err => err.field === fieldKey);
|
|
37
|
+
return error === null || error === void 0 ? void 0 : error.message;
|
|
38
|
+
};
|
|
32
39
|
exports.THROTTLE_DELAY = 300; // ms
|
|
33
40
|
const checkIsDisabled = ({ field, formValues }) => {
|
|
34
41
|
var _a;
|
|
@@ -44,7 +51,7 @@ const checkIsVisible = ({ field, formValues }) => {
|
|
|
44
51
|
? configVisibleProperty(formValues)
|
|
45
52
|
: configVisibleProperty !== false;
|
|
46
53
|
};
|
|
47
|
-
const SectionComponent = ({ field, control, formValues, formState, layout, layoutOptions }) => {
|
|
54
|
+
const SectionComponent = ({ field, control, formValues, formState, layout, layoutOptions, fieldErrors = [] }) => {
|
|
48
55
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
49
56
|
const { errors } = formState;
|
|
50
57
|
if (field.collapsible) {
|
|
@@ -69,7 +76,8 @@ const SectionComponent = ({ field, control, formValues, formState, layout, layou
|
|
|
69
76
|
formValues,
|
|
70
77
|
formState,
|
|
71
78
|
layout,
|
|
72
|
-
layoutOptions
|
|
79
|
+
layoutOptions,
|
|
80
|
+
fieldErrors
|
|
73
81
|
});
|
|
74
82
|
})
|
|
75
83
|
}
|
|
@@ -85,12 +93,13 @@ const SectionComponent = ({ field, control, formValues, formState, layout, layou
|
|
|
85
93
|
formValues,
|
|
86
94
|
formState,
|
|
87
95
|
layout,
|
|
88
|
-
layoutOptions
|
|
96
|
+
layoutOptions,
|
|
97
|
+
fieldErrors
|
|
89
98
|
});
|
|
90
99
|
})));
|
|
91
100
|
}
|
|
92
101
|
};
|
|
93
|
-
const RowComponent = ({ field, control, formValues, formState, layout, layoutOptions }) => {
|
|
102
|
+
const RowComponent = ({ field, control, formValues, formState, layout, layoutOptions, fieldErrors = [] }) => {
|
|
94
103
|
const { columnFields, rowProps } = field;
|
|
95
104
|
if (!(columnFields === null || columnFields === void 0 ? void 0 : columnFields.length))
|
|
96
105
|
return;
|
|
@@ -103,10 +112,10 @@ const RowComponent = ({ field, control, formValues, formState, layout, layoutOpt
|
|
|
103
112
|
if (!isVisible)
|
|
104
113
|
return null;
|
|
105
114
|
return (react_1.default.createElement(ui_layout_1.Col, Object.assign({ key: columnField.key, flex: "1" }, columnProps),
|
|
106
|
-
react_1.default.createElement(ColumnComponent, { field: columnField, control: control, formValues: formValues, formState: formState, layout: layout, layoutOptions: layoutOptions })));
|
|
115
|
+
react_1.default.createElement(ColumnComponent, { field: columnField, control: control, formValues: formValues, formState: formState, layout: layout, layoutOptions: layoutOptions, fieldErrors: fieldErrors })));
|
|
107
116
|
})));
|
|
108
117
|
};
|
|
109
|
-
const ColumnComponent = ({ field, control, formValues, formState, layout, layoutOptions }) => {
|
|
118
|
+
const ColumnComponent = ({ field, control, formValues, formState, layout, layoutOptions, fieldErrors = [] }) => {
|
|
110
119
|
const { fields } = field;
|
|
111
120
|
if (!(fields === null || fields === void 0 ? void 0 : fields.length))
|
|
112
121
|
return;
|
|
@@ -117,59 +126,62 @@ const ColumnComponent = ({ field, control, formValues, formState, layout, layout
|
|
|
117
126
|
});
|
|
118
127
|
if (!isVisible)
|
|
119
128
|
return null;
|
|
120
|
-
const isRowField = rowField.type ===
|
|
129
|
+
const isRowField = rowField.type === constants_1.FieldType.ROW;
|
|
121
130
|
return isRowField
|
|
122
|
-
? renderField(rowField, control, formValues, formState, layout, layoutOptions)
|
|
131
|
+
? renderField(rowField, control, formValues, formState, layout, layoutOptions, fieldErrors)
|
|
123
132
|
: renderFormItem({
|
|
124
133
|
field: rowField,
|
|
125
134
|
control,
|
|
126
135
|
formValues,
|
|
127
136
|
formState,
|
|
128
137
|
layout,
|
|
129
|
-
layoutOptions
|
|
138
|
+
layoutOptions,
|
|
139
|
+
fieldErrors
|
|
130
140
|
});
|
|
131
141
|
});
|
|
132
142
|
};
|
|
133
143
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
134
144
|
const renderField = (field, control, formValues,
|
|
135
145
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
136
|
-
formState, layout, layoutOptions) => {
|
|
146
|
+
formState, layout, layoutOptions, fieldErrors = []) => {
|
|
137
147
|
const commonProps = {
|
|
138
148
|
'aria-required': field.validation ? true : false,
|
|
139
149
|
'aria-invalid': formState.errors[field.key] ? true : false
|
|
140
150
|
};
|
|
141
151
|
switch (field.type) {
|
|
142
|
-
case
|
|
152
|
+
case constants_1.FieldType.TEXT:
|
|
143
153
|
return (react_1.default.createElement(ui_input_1.Input, Object.assign({ placeholder: field.placeholder, size: "large" }, commonProps)));
|
|
144
|
-
case
|
|
154
|
+
case constants_1.FieldType.NUMBER:
|
|
145
155
|
return (react_1.default.createElement(ui_input_number_1.InputNumber, Object.assign({ placeholder: field.placeholder, size: "large" }, commonProps)));
|
|
146
|
-
case
|
|
156
|
+
case constants_1.FieldType.SELECT:
|
|
147
157
|
return (react_1.default.createElement(ui_select_1.Select, Object.assign({ placeholder: field.placeholder, options: field.options }, commonProps)));
|
|
148
|
-
case
|
|
158
|
+
case constants_1.FieldType.CHECKBOX:
|
|
149
159
|
return (react_1.default.createElement(ui_checkbox_1.Checkbox, Object.assign({ checked: formValues[field.key] }, commonProps), field.label));
|
|
150
|
-
case
|
|
151
|
-
return (react_1.default.createElement(ui_date_picker_1.DatePicker, Object.assign({ placeholder: field.placeholder, showTime: field.showTime, suffixIcon: "calendar", suffixIconColor: "var(--color-azure-500)", suffixIconSize: "16"
|
|
152
|
-
|
|
160
|
+
case constants_1.FieldType.DATE:
|
|
161
|
+
return (react_1.default.createElement(ui_date_picker_1.DatePicker, Object.assign({ placeholder: field.placeholder, showTime: field.showTime, suffixIcon: "calendar", suffixIconColor: "var(--color-azure-500)", suffixIconSize: "16", value: formValues[field.key]
|
|
162
|
+
? akidate_1.akidate.parse(formValues[field.key])
|
|
163
|
+
: undefined }, commonProps)));
|
|
164
|
+
case constants_1.FieldType.TEXTAREA:
|
|
153
165
|
return react_1.default.createElement(ui_input_1.InputTextArea, Object.assign({ placeholder: field.placeholder }, commonProps));
|
|
154
|
-
case
|
|
166
|
+
case constants_1.FieldType.FIELD_ARRAY:
|
|
155
167
|
return (react_1.default.createElement(FieldArrayComponent, { field: field, control: control, formValues: formValues, formState: formState, layout: layout, layoutOptions: layoutOptions }));
|
|
156
|
-
case
|
|
168
|
+
case constants_1.FieldType.CUSTOM:
|
|
157
169
|
if (typeof field.render === 'function') {
|
|
158
170
|
return field.render({ field, formValues, control, formState });
|
|
159
171
|
}
|
|
160
|
-
console.warn(
|
|
172
|
+
console.warn(i18n_1.i18n.t('custom_field_no_render', { fieldKey: field.key }));
|
|
161
173
|
return react_1.default.createElement(react_1.Fragment, null);
|
|
162
|
-
case
|
|
174
|
+
case constants_1.FieldType.SECTION:
|
|
163
175
|
return (react_1.default.createElement(SectionComponent, { field: field, control: control, formValues: formValues, formState: formState, layout: layout, layoutOptions: layoutOptions }));
|
|
164
|
-
case
|
|
165
|
-
return (react_1.default.createElement(RowComponent, { field: field, control: control, formValues: formValues, formState: formState, layout: layout, layoutOptions: layoutOptions }));
|
|
166
|
-
case
|
|
176
|
+
case constants_1.FieldType.ROW:
|
|
177
|
+
return (react_1.default.createElement(RowComponent, { field: field, control: control, formValues: formValues, formState: formState, layout: layout, layoutOptions: layoutOptions, fieldErrors: fieldErrors }));
|
|
178
|
+
case constants_1.FieldType.COLUMN:
|
|
167
179
|
return (react_1.default.createElement(ColumnComponent, { field: field, control: control, formValues: formValues, formState: formState, layout: layout, layoutOptions: layoutOptions }));
|
|
168
180
|
default:
|
|
169
181
|
return react_1.default.createElement(react_1.Fragment, null);
|
|
170
182
|
}
|
|
171
183
|
};
|
|
172
|
-
const renderFormItem = ({ field, control, formValues, formState, layout, layoutOptions, customVisibleCheck }) => {
|
|
184
|
+
const renderFormItem = ({ field, control, formValues, formState, layout, layoutOptions, customVisibleCheck, fieldErrors = [] }) => {
|
|
173
185
|
const isVisible = customVisibleCheck
|
|
174
186
|
? customVisibleCheck()
|
|
175
187
|
: checkIsVisible({
|
|
@@ -182,11 +194,15 @@ const renderFormItem = ({ field, control, formValues, formState, layout, layoutO
|
|
|
182
194
|
field,
|
|
183
195
|
formValues
|
|
184
196
|
});
|
|
185
|
-
|
|
197
|
+
const apiError = getApiFieldError(field.key, fieldErrors);
|
|
198
|
+
const combinedHelpText = apiError
|
|
199
|
+
? `${field.help ? field.help + ' ' : ''}${apiError}`
|
|
200
|
+
: field.help;
|
|
201
|
+
return (react_1.default.createElement(akiform_1.FormItem, { key: field.key, control: control, name: field.key, label: field.label, required: field.validation ? true : false, tooltip: field.tooltip, disabled: isDisabled, help: combinedHelpText, labelDescription: field.labelDescription }, renderField(field, control, formValues, formState, layout, layoutOptions)));
|
|
186
202
|
};
|
|
187
203
|
exports.AkiformBuilder = (0, react_1.forwardRef)((_a, ref) => {
|
|
188
204
|
var _b, _c;
|
|
189
|
-
var { fields, onSubmit, layout = 'vertical', layoutOptions, showResetButton = false, onReset, controlled = false, values, onValueChange, submitButtonProps, resetButtonProps } = _a, rest = __rest(_a, ["fields", "onSubmit", "layout", "layoutOptions", "showResetButton", "onReset", "controlled", "values", "onValueChange", "submitButtonProps", "resetButtonProps"]);
|
|
205
|
+
var { fields, onSubmit, layout = 'vertical', layoutOptions, showResetButton = false, onReset, controlled = false, values, onValueChange, submitButtonProps, resetButtonProps, fieldErrors = [], onFieldErrorsClear } = _a, rest = __rest(_a, ["fields", "onSubmit", "layout", "layoutOptions", "showResetButton", "onReset", "controlled", "values", "onValueChange", "submitButtonProps", "resetButtonProps", "fieldErrors", "onFieldErrorsClear"]);
|
|
190
206
|
const validationSchema = (0, react_1.useMemo)(() => {
|
|
191
207
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
192
208
|
const schema = {};
|
|
@@ -194,7 +210,7 @@ exports.AkiformBuilder = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
194
210
|
if (field.validation) {
|
|
195
211
|
schema[field.key] = field.validation;
|
|
196
212
|
}
|
|
197
|
-
if (field.type ===
|
|
213
|
+
if (field.type === constants_1.FieldType.FIELD_ARRAY) {
|
|
198
214
|
schema[field.key] = akival_1.akival.array().of(akival_1.akival.object().shape(field.fields.reduce((acc, nestedField) => {
|
|
199
215
|
if (nestedField.validation) {
|
|
200
216
|
acc[nestedField.key] = nestedField.validation;
|
|
@@ -263,7 +279,11 @@ exports.AkiformBuilder = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
263
279
|
if (controlled && onValueChange) {
|
|
264
280
|
onValueChange(formValues);
|
|
265
281
|
}
|
|
266
|
-
|
|
282
|
+
// Clear field errors when form values change
|
|
283
|
+
if (onFieldErrorsClear) {
|
|
284
|
+
onFieldErrorsClear();
|
|
285
|
+
}
|
|
286
|
+
}, [controlled, onValueChange, formValues, onFieldErrorsClear]);
|
|
267
287
|
const formItemLayout = (0, react_1.useMemo)(() => {
|
|
268
288
|
const defaultHorizontalLayout = {
|
|
269
289
|
labelCol: { span: 6 },
|
|
@@ -363,14 +383,14 @@ exports.AkiformBuilder = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
363
383
|
return null;
|
|
364
384
|
}
|
|
365
385
|
switch (field.type) {
|
|
366
|
-
case
|
|
386
|
+
case constants_1.FieldType.SECTION:
|
|
367
387
|
return (react_1.default.createElement(SectionComponent, { key: field.key, field: field, control: control, formValues: formValues, formState: formState, layout: layout, layoutOptions: layoutOptions }));
|
|
368
|
-
case
|
|
388
|
+
case constants_1.FieldType.FIELD_ARRAY:
|
|
369
389
|
return (react_1.default.createElement("div", { className: "akiform-builder-field-array", key: field.key },
|
|
370
390
|
react_1.default.createElement(ui_divider_1.Divider, { orientation: "left", plain: true, plainOffset: 40 },
|
|
371
391
|
react_1.default.createElement("span", { id: `${field.key}-label` }, field.label)),
|
|
372
392
|
renderField(field, control, formValues, formState, layout, layoutOptions)));
|
|
373
|
-
case
|
|
393
|
+
case constants_1.FieldType.ROW:
|
|
374
394
|
return renderField(field, control, formValues, formState, layout, layoutOptions);
|
|
375
395
|
default:
|
|
376
396
|
return renderFormItem({
|
|
@@ -379,7 +399,8 @@ exports.AkiformBuilder = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
379
399
|
formValues,
|
|
380
400
|
formState,
|
|
381
401
|
layout,
|
|
382
|
-
layoutOptions
|
|
402
|
+
layoutOptions,
|
|
403
|
+
fieldErrors
|
|
383
404
|
});
|
|
384
405
|
}
|
|
385
406
|
}),
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export declare enum FieldType {
|
|
2
|
+
TEXT = "text",
|
|
3
|
+
NUMBER = "number",
|
|
4
|
+
SELECT = "select",
|
|
5
|
+
CHECKBOX = "checkbox",
|
|
6
|
+
DATE = "date",
|
|
7
|
+
FIELD_ARRAY = "fieldArray",
|
|
8
|
+
TEXTAREA = "textarea",
|
|
9
|
+
CUSTOM = "custom",
|
|
10
|
+
SECTION = "section",
|
|
11
|
+
ROW = "row",
|
|
12
|
+
COLUMN = "column"
|
|
13
|
+
}
|
|
14
|
+
export declare const FIELD_TYPES: FieldType[];
|
|
15
|
+
//# sourceMappingURL=constants.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,WAAW,eAAe;IAC1B,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AAED,eAAO,MAAM,WAAW,EAA+B,SAAS,EAAE,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.FIELD_TYPES = exports.FieldType = void 0;
|
|
4
|
+
var FieldType;
|
|
5
|
+
(function (FieldType) {
|
|
6
|
+
FieldType["TEXT"] = "text";
|
|
7
|
+
FieldType["NUMBER"] = "number";
|
|
8
|
+
FieldType["SELECT"] = "select";
|
|
9
|
+
FieldType["CHECKBOX"] = "checkbox";
|
|
10
|
+
FieldType["DATE"] = "date";
|
|
11
|
+
FieldType["FIELD_ARRAY"] = "fieldArray";
|
|
12
|
+
FieldType["TEXTAREA"] = "textarea";
|
|
13
|
+
FieldType["CUSTOM"] = "custom";
|
|
14
|
+
FieldType["SECTION"] = "section";
|
|
15
|
+
FieldType["ROW"] = "row";
|
|
16
|
+
FieldType["COLUMN"] = "column";
|
|
17
|
+
})(FieldType || (exports.FieldType = FieldType = {}));
|
|
18
|
+
exports.FIELD_TYPES = Object.values(FieldType);
|
|
@@ -2,8 +2,9 @@ import { FieldPath, FieldValues } from '@akinon/akiform';
|
|
|
2
2
|
import { AnySchema } from '@akinon/akival';
|
|
3
3
|
import type { ColProps, RowProps } from '@akinon/ui-layout';
|
|
4
4
|
import type { TooltipProps } from '@akinon/ui-tooltip';
|
|
5
|
-
import
|
|
6
|
-
type
|
|
5
|
+
import { FieldType } from './constants';
|
|
6
|
+
import type { FieldConfig, FormField } from './types';
|
|
7
|
+
type FieldTypeToBuilder<T extends FieldType, TFieldValues extends FieldValues = FieldValues> = T extends FieldType.SELECT ? SelectFieldBuilder<TFieldValues> : T extends FieldType.DATE ? DateFieldBuilder<TFieldValues> : T extends FieldType.CUSTOM ? CustomFieldBuilder<TFieldValues> : T extends FieldType.SECTION ? SectionFieldBuilder<TFieldValues> : T extends FieldType.FIELD_ARRAY ? FieldArrayOrSectionFieldBuilder<TFieldValues> : T extends FieldType.ROW ? RowFieldBuilder<TFieldValues> : T extends FieldType.COLUMN ? ColumnFieldBuilder<TFieldValues> : BaseFieldBuilder<TFieldValues>;
|
|
7
8
|
declare class BaseFieldBuilder<TFieldValues extends FieldValues = FieldValues> {
|
|
8
9
|
field: Partial<FormField<TFieldValues>>;
|
|
9
10
|
key(key: FieldPath<TFieldValues>): this;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-builder.d.ts","sourceRoot":"","sources":["../../src/field-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,KAAK,EAGV,WAAW,EACX,SAAS,
|
|
1
|
+
{"version":3,"file":"field-builder.d.ts","sourceRoot":"","sources":["../../src/field-builder.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.field = field;
|
|
4
|
+
const constants_1 = require("./constants");
|
|
5
|
+
const i18n_1 = require("./i18n");
|
|
4
6
|
class BaseFieldBuilder {
|
|
5
7
|
constructor() {
|
|
6
8
|
this.field = {};
|
|
@@ -49,9 +51,10 @@ class BaseFieldBuilder {
|
|
|
49
51
|
}
|
|
50
52
|
build() {
|
|
51
53
|
if (!this.field.key || !this.field.type) {
|
|
52
|
-
throw new Error('
|
|
54
|
+
throw new Error(i18n_1.i18n.t('field_missing_key_type'));
|
|
53
55
|
}
|
|
54
|
-
|
|
56
|
+
const builtField = this.field;
|
|
57
|
+
return builtField;
|
|
55
58
|
}
|
|
56
59
|
}
|
|
57
60
|
class SelectFieldBuilder extends BaseFieldBuilder {
|
|
@@ -81,11 +84,12 @@ class FieldArrayOrSectionFieldBuilder extends BaseFieldBuilder {
|
|
|
81
84
|
return this;
|
|
82
85
|
}
|
|
83
86
|
fields(fields) {
|
|
84
|
-
if (this.field.type ===
|
|
87
|
+
if (this.field.type === constants_1.FieldType.FIELD_ARRAY ||
|
|
88
|
+
this.field.type === constants_1.FieldType.SECTION) {
|
|
85
89
|
this.field.fields = fields;
|
|
86
90
|
}
|
|
87
91
|
else {
|
|
88
|
-
console.warn(
|
|
92
|
+
console.warn(i18n_1.i18n.t('fields_only_for_array_section', { fieldType: this.field.type }));
|
|
89
93
|
}
|
|
90
94
|
return this;
|
|
91
95
|
}
|
|
@@ -131,7 +135,7 @@ function field() {
|
|
|
131
135
|
return FieldArrayOrSectionFieldBuilder.prototype.defaultExpanded;
|
|
132
136
|
case 'fields': {
|
|
133
137
|
const fieldType = target.field.type;
|
|
134
|
-
if (fieldType ===
|
|
138
|
+
if (fieldType === constants_1.FieldType.COLUMN) {
|
|
135
139
|
return ColumnFieldBuilder.prototype.fields;
|
|
136
140
|
}
|
|
137
141
|
return FieldArrayOrSectionFieldBuilder.prototype.fields;
|
|
@@ -9,6 +9,9 @@ declare const translations: {
|
|
|
9
9
|
readonly itemof_ordinal_few: "{{count}}rd Item of {{label}}";
|
|
10
10
|
readonly itemof_ordinal_other: "{{count}}th Item of {{label}}";
|
|
11
11
|
readonly an_error_occurred: "An error occurred in here";
|
|
12
|
+
readonly custom_field_no_render: "Custom field \"{{fieldKey}}\" has no render function";
|
|
13
|
+
readonly field_missing_key_type: "Field must have at least a key and type";
|
|
14
|
+
readonly fields_only_for_array_section: "Fields can only be set for 'fieldArray' or 'section' types. Current type: {{fieldType}}";
|
|
12
15
|
};
|
|
13
16
|
export default translations;
|
|
14
17
|
//# sourceMappingURL=en.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/en.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY
|
|
1
|
+
{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/en.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;CAeR,CAAC;AAEX,eAAe,YAAY,CAAC"}
|
|
@@ -10,6 +10,9 @@ const translations = {
|
|
|
10
10
|
itemof_ordinal_two: '{{count}}nd Item of {{label}}',
|
|
11
11
|
itemof_ordinal_few: '{{count}}rd Item of {{label}}',
|
|
12
12
|
itemof_ordinal_other: '{{count}}th Item of {{label}}',
|
|
13
|
-
an_error_occurred: 'An error occurred in here'
|
|
13
|
+
an_error_occurred: 'An error occurred in here',
|
|
14
|
+
custom_field_no_render: 'Custom field "{{fieldKey}}" has no render function',
|
|
15
|
+
field_missing_key_type: 'Field must have at least a key and type',
|
|
16
|
+
fields_only_for_array_section: "Fields can only be set for 'fieldArray' or 'section' types. Current type: {{fieldType}}"
|
|
14
17
|
};
|
|
15
18
|
exports.default = translations;
|
|
@@ -9,6 +9,9 @@ declare const translations: {
|
|
|
9
9
|
readonly itemof_ordinal_few: "{{label}} için {{count}}. Öğe";
|
|
10
10
|
readonly itemof_ordinal_other: "{{label}} için {{count}}. Öğe";
|
|
11
11
|
readonly an_error_occurred: "Burada bir hata oluştu";
|
|
12
|
+
readonly custom_field_no_render: "\"{{fieldKey}}\" özel alanının render fonksiyonu bulunamadı";
|
|
13
|
+
readonly field_missing_key_type: "Alan en azından key ve type özelliklerine sahip olmalıdır";
|
|
14
|
+
readonly fields_only_for_array_section: "Fields sadece 'fieldArray' veya 'section' tipleri için ayarlanabilir. Mevcut tip: {{fieldType}}";
|
|
12
15
|
};
|
|
13
16
|
export default translations;
|
|
14
17
|
//# sourceMappingURL=tr.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tr.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/tr.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY
|
|
1
|
+
{"version":3,"file":"tr.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/tr.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;CAiBR,CAAC;AAEX,eAAe,YAAY,CAAC"}
|
|
@@ -10,6 +10,9 @@ const translations = {
|
|
|
10
10
|
itemof_ordinal_two: '{{label}} için {{count}}. Öğe',
|
|
11
11
|
itemof_ordinal_few: '{{label}} için {{count}}. Öğe',
|
|
12
12
|
itemof_ordinal_other: '{{label}} için {{count}}. Öğe',
|
|
13
|
-
an_error_occurred: 'Burada bir hata oluştu'
|
|
13
|
+
an_error_occurred: 'Burada bir hata oluştu',
|
|
14
|
+
custom_field_no_render: '"{{fieldKey}}" özel alanının render fonksiyonu bulunamadı',
|
|
15
|
+
field_missing_key_type: 'Alan en azından key ve type özelliklerine sahip olmalıdır',
|
|
16
|
+
fields_only_for_array_section: "Fields sadece 'fieldArray' veya 'section' tipleri için ayarlanabilir. Mevcut tip: {{fieldType}}"
|
|
14
17
|
};
|
|
15
18
|
exports.default = translations;
|
package/dist/cjs/index.d.ts
CHANGED
package/dist/cjs/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,cAAc,SAAS,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,cAAc,SAAS,CAAC"}
|
package/dist/cjs/index.js
CHANGED
|
@@ -16,6 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
17
|
exports.field = void 0;
|
|
18
18
|
__exportStar(require("./akiform-builder"), exports);
|
|
19
|
+
__exportStar(require("./constants"), exports);
|
|
19
20
|
var field_builder_1 = require("./field-builder");
|
|
20
21
|
Object.defineProperty(exports, "field", { enumerable: true, get: function () { return field_builder_1.field; } });
|
|
21
22
|
__exportStar(require("./types"), exports);
|
package/dist/cjs/types.d.ts
CHANGED
|
@@ -4,7 +4,11 @@ import type { IButtonProps } from '@akinon/ui-button';
|
|
|
4
4
|
import type { ColProps, RowProps } from '@akinon/ui-layout';
|
|
5
5
|
import type { TooltipProps } from '@akinon/ui-tooltip';
|
|
6
6
|
import type { FormEventHandler, ReactElement } from 'react';
|
|
7
|
-
|
|
7
|
+
import { FieldType } from './constants';
|
|
8
|
+
export interface FieldConfig<TFieldValues extends FieldValues = FieldValues> {
|
|
9
|
+
disabled?: boolean | ((formValues: TFieldValues) => boolean);
|
|
10
|
+
visible?: boolean | ((formValues: TFieldValues) => boolean);
|
|
11
|
+
}
|
|
8
12
|
export interface BaseField<TFieldValues extends FieldValues = FieldValues> {
|
|
9
13
|
key: FieldPath<TFieldValues>;
|
|
10
14
|
label?: string;
|
|
@@ -12,41 +16,41 @@ export interface BaseField<TFieldValues extends FieldValues = FieldValues> {
|
|
|
12
16
|
placeholder?: string;
|
|
13
17
|
defaultValue?: unknown;
|
|
14
18
|
validation?: AnySchema;
|
|
15
|
-
config?: FieldConfig
|
|
19
|
+
config?: FieldConfig<TFieldValues>;
|
|
16
20
|
tooltip?: TooltipProps | string;
|
|
17
21
|
help?: string;
|
|
18
22
|
labelDescription?: string;
|
|
19
23
|
}
|
|
20
24
|
export interface TextField<TFieldValues extends FieldValues = FieldValues> extends BaseField<TFieldValues> {
|
|
21
|
-
type:
|
|
25
|
+
type: FieldType.TEXT;
|
|
22
26
|
}
|
|
23
27
|
export interface NumberField<TFieldValues extends FieldValues = FieldValues> extends BaseField<TFieldValues> {
|
|
24
|
-
type:
|
|
28
|
+
type: FieldType.NUMBER;
|
|
25
29
|
}
|
|
26
30
|
export interface SelectField<TFieldValues extends FieldValues = FieldValues> extends BaseField<TFieldValues> {
|
|
27
|
-
type:
|
|
31
|
+
type: FieldType.SELECT;
|
|
28
32
|
options: Array<{
|
|
29
33
|
value: string | number;
|
|
30
34
|
label: string;
|
|
31
35
|
}>;
|
|
32
36
|
}
|
|
33
37
|
export interface CheckboxField<TFieldValues extends FieldValues = FieldValues> extends BaseField<TFieldValues> {
|
|
34
|
-
type:
|
|
38
|
+
type: FieldType.CHECKBOX;
|
|
35
39
|
}
|
|
36
40
|
export interface DateField<TFieldValues extends FieldValues = FieldValues> extends BaseField<TFieldValues> {
|
|
37
|
-
type:
|
|
41
|
+
type: FieldType.DATE;
|
|
38
42
|
showTime?: boolean;
|
|
39
43
|
}
|
|
40
44
|
export interface FieldArrayField<TFieldValues extends FieldValues = FieldValues> extends BaseField<TFieldValues> {
|
|
41
|
-
type:
|
|
45
|
+
type: FieldType.FIELD_ARRAY;
|
|
42
46
|
fields: FormField<TFieldValues>[];
|
|
43
47
|
defaultExpanded?: boolean;
|
|
44
48
|
}
|
|
45
49
|
export interface TextareaField<TFieldValues extends FieldValues = FieldValues> extends BaseField<TFieldValues> {
|
|
46
|
-
type:
|
|
50
|
+
type: FieldType.TEXTAREA;
|
|
47
51
|
}
|
|
48
52
|
export interface CustomField<TFieldValues extends FieldValues = FieldValues> extends BaseField<TFieldValues> {
|
|
49
|
-
type:
|
|
53
|
+
type: FieldType.CUSTOM;
|
|
50
54
|
render: (props: {
|
|
51
55
|
field: BaseField<TFieldValues>;
|
|
52
56
|
formValues: TFieldValues;
|
|
@@ -55,18 +59,18 @@ export interface CustomField<TFieldValues extends FieldValues = FieldValues> ext
|
|
|
55
59
|
}) => ReactElement;
|
|
56
60
|
}
|
|
57
61
|
export interface SectionField<TFieldValues extends FieldValues = FieldValues> extends BaseField<TFieldValues> {
|
|
58
|
-
type:
|
|
62
|
+
type: FieldType.SECTION;
|
|
59
63
|
fields: FormField<TFieldValues>[];
|
|
60
64
|
defaultExpanded?: boolean;
|
|
61
65
|
collapsible?: boolean;
|
|
62
66
|
}
|
|
63
67
|
export interface RowField<TFieldValues extends FieldValues = FieldValues> extends BaseField<TFieldValues> {
|
|
64
|
-
type:
|
|
68
|
+
type: FieldType.ROW;
|
|
65
69
|
columnFields: ColumnField<TFieldValues>[];
|
|
66
70
|
rowProps?: RowProps;
|
|
67
71
|
}
|
|
68
72
|
export interface ColumnField<TFieldValues extends FieldValues = FieldValues> extends BaseField<TFieldValues> {
|
|
69
|
-
type:
|
|
73
|
+
type: FieldType.COLUMN;
|
|
70
74
|
fields: FormField<TFieldValues>[];
|
|
71
75
|
columnProps?: ColProps;
|
|
72
76
|
}
|
|
@@ -83,6 +87,11 @@ export interface LayoutOptions {
|
|
|
83
87
|
export type AkiformActionButtonType = Omit<IButtonProps, 'htmlType'> & {
|
|
84
88
|
block?: boolean;
|
|
85
89
|
};
|
|
90
|
+
export interface ApiFieldError {
|
|
91
|
+
field: string;
|
|
92
|
+
message: string;
|
|
93
|
+
code?: string;
|
|
94
|
+
}
|
|
86
95
|
export interface AkiformBuilderProps<TFieldValues extends FieldValues = FieldValues> extends Omit<AkiformProps, 'fields' | 'onReset' | 'onChange' | 'labelCol' | 'wrapperCol'> {
|
|
87
96
|
fields: FormField<TFieldValues>[];
|
|
88
97
|
onSubmit?: (values: TFieldValues) => void;
|
|
@@ -95,12 +104,14 @@ export interface AkiformBuilderProps<TFieldValues extends FieldValues = FieldVal
|
|
|
95
104
|
onValueChange?: (values: TFieldValues) => void;
|
|
96
105
|
submitButtonProps?: AkiformActionButtonType;
|
|
97
106
|
resetButtonProps?: AkiformActionButtonType;
|
|
107
|
+
fieldErrors?: ApiFieldError[];
|
|
108
|
+
onFieldErrorsClear?: () => void;
|
|
98
109
|
}
|
|
99
110
|
export interface AkiformBuilderRef<TFieldValues extends FieldValues = FieldValues> {
|
|
100
111
|
reset: (values?: Partial<TFieldValues>) => void;
|
|
101
112
|
}
|
|
102
|
-
export interface FieldConfig<
|
|
103
|
-
disabled?: boolean | ((
|
|
104
|
-
visible?: boolean | ((
|
|
113
|
+
export interface FieldConfig<TFieldValues extends FieldValues = FieldValues> {
|
|
114
|
+
disabled?: boolean | ((formValues: TFieldValues) => boolean);
|
|
115
|
+
visible?: boolean | ((formValues: TFieldValues) => boolean);
|
|
105
116
|
}
|
|
106
117
|
//# sourceMappingURL=types.d.ts.map
|
package/dist/cjs/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE5D,MAAM,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,WAAW,WAAW,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW;IACzE,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,UAAU,EAAE,YAAY,KAAK,OAAO,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,UAAU,EAAE,YAAY,KAAK,OAAO,CAAC,CAAC;CAC7D;AAED,MAAM,WAAW,SAAS,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW;IACvE,GAAG,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,WAAW,CAAC,YAAY,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,SAAS,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,CACvE,SAAQ,SAAS,CAAC,YAAY,CAAC;IAC/B,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,WAAW,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,CACzE,SAAQ,SAAS,CAAC,YAAY,CAAC;IAC/B,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,WAAW,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,CACzE,SAAQ,SAAS,CAAC,YAAY,CAAC;IAC/B,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC;IACvB,OAAO,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC3D;AAED,MAAM,WAAW,aAAa,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,CAC3E,SAAQ,SAAS,CAAC,YAAY,CAAC;IAC/B,IAAI,EAAE,SAAS,CAAC,QAAQ,CAAC;CAC1B;AAED,MAAM,WAAW,SAAS,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,CACvE,SAAQ,SAAS,CAAC,YAAY,CAAC;IAC/B,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,CAC7E,SAAQ,SAAS,CAAC,YAAY,CAAC;IAC/B,IAAI,EAAE,SAAS,CAAC,WAAW,CAAC;IAC5B,MAAM,EAAE,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAa,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,CAC3E,SAAQ,SAAS,CAAC,YAAY,CAAC;IAC/B,IAAI,EAAE,SAAS,CAAC,QAAQ,CAAC;CAC1B;AAED,MAAM,WAAW,WAAW,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,CACzE,SAAQ,SAAS,CAAC,YAAY,CAAC;IAC/B,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC;IACvB,MAAM,EAAE,CAAC,KAAK,EAAE;QACd,KAAK,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;QAC/B,UAAU,EAAE,YAAY,CAAC;QACzB,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;QAE/B,SAAS,EAAE,GAAG,CAAC;KAChB,KAAK,YAAY,CAAC;CACpB;AAED,MAAM,WAAW,YAAY,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,CAC1E,SAAQ,SAAS,CAAC,YAAY,CAAC;IAC/B,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC;IACxB,MAAM,EAAE,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,QAAQ,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,CACtE,SAAQ,SAAS,CAAC,YAAY,CAAC;IAC/B,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC;IACpB,YAAY,EAAE,WAAW,CAAC,YAAY,CAAC,EAAE,CAAC;IAC1C,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED,MAAM,WAAW,WAAW,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,CACzE,SAAQ,SAAS,CAAC,YAAY,CAAC;IAC/B,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC;IACvB,MAAM,EAAE,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC;IAClC,WAAW,CAAC,EAAE,QAAQ,CAAC;CACxB;AAED,MAAM,MAAM,SAAS,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,IAChE,SAAS,CAAC,YAAY,CAAC,GACvB,WAAW,CAAC,YAAY,CAAC,GACzB,WAAW,CAAC,YAAY,CAAC,GACzB,aAAa,CAAC,YAAY,CAAC,GAC3B,SAAS,CAAC,YAAY,CAAC,GACvB,eAAe,CAAC,YAAY,CAAC,GAC7B,aAAa,CAAC,YAAY,CAAC,GAC3B,WAAW,CAAC,YAAY,CAAC,GACzB,YAAY,CAAC,YAAY,CAAC,GAC1B,QAAQ,CAAC,YAAY,CAAC,GACtB,WAAW,CAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,YAAY,GAAG,QAAQ,CAAC;AAE9D,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5B,UAAU,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;CAC/B;AAED,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,GAAG;IACrE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB,CAClC,YAAY,SAAS,WAAW,GAAG,WAAW,CAC9C,SAAQ,IAAI,CACV,YAAY,EACZ,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,YAAY,CAC9D;IACD,MAAM,EAAE,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC/C,iBAAiB,CAAC,EAAE,uBAAuB,CAAC;IAC5C,gBAAgB,CAAC,EAAE,uBAAuB,CAAC;IAC3C,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;IAC9B,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC;AAED,MAAM,WAAW,iBAAiB,CAChC,YAAY,SAAS,WAAW,GAAG,WAAW;IAE9C,KAAK,EAAE,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;CACjD;AAED,MAAM,WAAW,WAAW,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW;IACzE,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,UAAU,EAAE,YAAY,KAAK,OAAO,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,UAAU,EAAE,YAAY,KAAK,OAAO,CAAC,CAAC;CAC7D"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"akiform-builder.d.ts","sourceRoot":"","sources":["../../src/akiform-builder.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"akiform-builder.d.ts","sourceRoot":"","sources":["../../src/akiform-builder.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAGrB,OAAO,EAOL,WAAW,EAMZ,MAAM,iBAAiB,CAAC;AAczB,OAAO,KAWN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EACV,mBAAmB,EACnB,iBAAiB,EASlB,MAAM,SAAS,CAAC;AAWjB,eAAO,MAAM,cAAc,MAAM,CAAC;AA6YlC,eAAO,MAAM,cAAc,yHAsW1B,CAAC"}
|
|
@@ -10,6 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import './index.css';
|
|
13
|
+
import { akidate } from '@akinon/akidate';
|
|
13
14
|
import { Akiform, akivalResolver, FormItem, useFieldArray, useForm, useWatch } from '@akinon/akiform';
|
|
14
15
|
import { akival } from '@akinon/akival';
|
|
15
16
|
import { Icon } from '@akinon/icons';
|
|
@@ -25,7 +26,13 @@ import { Select } from '@akinon/ui-select';
|
|
|
25
26
|
import { Text } from '@akinon/ui-typography';
|
|
26
27
|
import clsx from 'clsx';
|
|
27
28
|
import React, { forwardRef, Fragment, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
|
|
29
|
+
import { FieldType } from './constants';
|
|
28
30
|
import { i18n } from './i18n';
|
|
31
|
+
// Helper function to get API field error for a specific field
|
|
32
|
+
const getApiFieldError = (fieldKey, apiErrors) => {
|
|
33
|
+
const error = apiErrors.find(err => err.field === fieldKey);
|
|
34
|
+
return error === null || error === void 0 ? void 0 : error.message;
|
|
35
|
+
};
|
|
29
36
|
export const THROTTLE_DELAY = 300; // ms
|
|
30
37
|
const checkIsDisabled = ({ field, formValues }) => {
|
|
31
38
|
var _a;
|
|
@@ -41,7 +48,7 @@ const checkIsVisible = ({ field, formValues }) => {
|
|
|
41
48
|
? configVisibleProperty(formValues)
|
|
42
49
|
: configVisibleProperty !== false;
|
|
43
50
|
};
|
|
44
|
-
const SectionComponent = ({ field, control, formValues, formState, layout, layoutOptions }) => {
|
|
51
|
+
const SectionComponent = ({ field, control, formValues, formState, layout, layoutOptions, fieldErrors = [] }) => {
|
|
45
52
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
46
53
|
const { errors } = formState;
|
|
47
54
|
if (field.collapsible) {
|
|
@@ -66,7 +73,8 @@ const SectionComponent = ({ field, control, formValues, formState, layout, layou
|
|
|
66
73
|
formValues,
|
|
67
74
|
formState,
|
|
68
75
|
layout,
|
|
69
|
-
layoutOptions
|
|
76
|
+
layoutOptions,
|
|
77
|
+
fieldErrors
|
|
70
78
|
});
|
|
71
79
|
})
|
|
72
80
|
}
|
|
@@ -82,12 +90,13 @@ const SectionComponent = ({ field, control, formValues, formState, layout, layou
|
|
|
82
90
|
formValues,
|
|
83
91
|
formState,
|
|
84
92
|
layout,
|
|
85
|
-
layoutOptions
|
|
93
|
+
layoutOptions,
|
|
94
|
+
fieldErrors
|
|
86
95
|
});
|
|
87
96
|
})));
|
|
88
97
|
}
|
|
89
98
|
};
|
|
90
|
-
const RowComponent = ({ field, control, formValues, formState, layout, layoutOptions }) => {
|
|
99
|
+
const RowComponent = ({ field, control, formValues, formState, layout, layoutOptions, fieldErrors = [] }) => {
|
|
91
100
|
const { columnFields, rowProps } = field;
|
|
92
101
|
if (!(columnFields === null || columnFields === void 0 ? void 0 : columnFields.length))
|
|
93
102
|
return;
|
|
@@ -100,10 +109,10 @@ const RowComponent = ({ field, control, formValues, formState, layout, layoutOpt
|
|
|
100
109
|
if (!isVisible)
|
|
101
110
|
return null;
|
|
102
111
|
return (React.createElement(Col, Object.assign({ key: columnField.key, flex: "1" }, columnProps),
|
|
103
|
-
React.createElement(ColumnComponent, { field: columnField, control: control, formValues: formValues, formState: formState, layout: layout, layoutOptions: layoutOptions })));
|
|
112
|
+
React.createElement(ColumnComponent, { field: columnField, control: control, formValues: formValues, formState: formState, layout: layout, layoutOptions: layoutOptions, fieldErrors: fieldErrors })));
|
|
104
113
|
})));
|
|
105
114
|
};
|
|
106
|
-
const ColumnComponent = ({ field, control, formValues, formState, layout, layoutOptions }) => {
|
|
115
|
+
const ColumnComponent = ({ field, control, formValues, formState, layout, layoutOptions, fieldErrors = [] }) => {
|
|
107
116
|
const { fields } = field;
|
|
108
117
|
if (!(fields === null || fields === void 0 ? void 0 : fields.length))
|
|
109
118
|
return;
|
|
@@ -114,59 +123,62 @@ const ColumnComponent = ({ field, control, formValues, formState, layout, layout
|
|
|
114
123
|
});
|
|
115
124
|
if (!isVisible)
|
|
116
125
|
return null;
|
|
117
|
-
const isRowField = rowField.type ===
|
|
126
|
+
const isRowField = rowField.type === FieldType.ROW;
|
|
118
127
|
return isRowField
|
|
119
|
-
? renderField(rowField, control, formValues, formState, layout, layoutOptions)
|
|
128
|
+
? renderField(rowField, control, formValues, formState, layout, layoutOptions, fieldErrors)
|
|
120
129
|
: renderFormItem({
|
|
121
130
|
field: rowField,
|
|
122
131
|
control,
|
|
123
132
|
formValues,
|
|
124
133
|
formState,
|
|
125
134
|
layout,
|
|
126
|
-
layoutOptions
|
|
135
|
+
layoutOptions,
|
|
136
|
+
fieldErrors
|
|
127
137
|
});
|
|
128
138
|
});
|
|
129
139
|
};
|
|
130
140
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
131
141
|
const renderField = (field, control, formValues,
|
|
132
142
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
133
|
-
formState, layout, layoutOptions) => {
|
|
143
|
+
formState, layout, layoutOptions, fieldErrors = []) => {
|
|
134
144
|
const commonProps = {
|
|
135
145
|
'aria-required': field.validation ? true : false,
|
|
136
146
|
'aria-invalid': formState.errors[field.key] ? true : false
|
|
137
147
|
};
|
|
138
148
|
switch (field.type) {
|
|
139
|
-
case
|
|
149
|
+
case FieldType.TEXT:
|
|
140
150
|
return (React.createElement(Input, Object.assign({ placeholder: field.placeholder, size: "large" }, commonProps)));
|
|
141
|
-
case
|
|
151
|
+
case FieldType.NUMBER:
|
|
142
152
|
return (React.createElement(InputNumber, Object.assign({ placeholder: field.placeholder, size: "large" }, commonProps)));
|
|
143
|
-
case
|
|
153
|
+
case FieldType.SELECT:
|
|
144
154
|
return (React.createElement(Select, Object.assign({ placeholder: field.placeholder, options: field.options }, commonProps)));
|
|
145
|
-
case
|
|
155
|
+
case FieldType.CHECKBOX:
|
|
146
156
|
return (React.createElement(Checkbox, Object.assign({ checked: formValues[field.key] }, commonProps), field.label));
|
|
147
|
-
case
|
|
148
|
-
return (React.createElement(DatePicker, Object.assign({ placeholder: field.placeholder, showTime: field.showTime, suffixIcon: "calendar", suffixIconColor: "var(--color-azure-500)", suffixIconSize: "16"
|
|
149
|
-
|
|
157
|
+
case FieldType.DATE:
|
|
158
|
+
return (React.createElement(DatePicker, Object.assign({ placeholder: field.placeholder, showTime: field.showTime, suffixIcon: "calendar", suffixIconColor: "var(--color-azure-500)", suffixIconSize: "16", value: formValues[field.key]
|
|
159
|
+
? akidate.parse(formValues[field.key])
|
|
160
|
+
: undefined }, commonProps)));
|
|
161
|
+
case FieldType.TEXTAREA:
|
|
150
162
|
return React.createElement(InputTextArea, Object.assign({ placeholder: field.placeholder }, commonProps));
|
|
151
|
-
case
|
|
163
|
+
case FieldType.FIELD_ARRAY:
|
|
152
164
|
return (React.createElement(FieldArrayComponent, { field: field, control: control, formValues: formValues, formState: formState, layout: layout, layoutOptions: layoutOptions }));
|
|
153
|
-
case
|
|
165
|
+
case FieldType.CUSTOM:
|
|
154
166
|
if (typeof field.render === 'function') {
|
|
155
167
|
return field.render({ field, formValues, control, formState });
|
|
156
168
|
}
|
|
157
|
-
console.warn(
|
|
169
|
+
console.warn(i18n.t('custom_field_no_render', { fieldKey: field.key }));
|
|
158
170
|
return React.createElement(Fragment, null);
|
|
159
|
-
case
|
|
171
|
+
case FieldType.SECTION:
|
|
160
172
|
return (React.createElement(SectionComponent, { field: field, control: control, formValues: formValues, formState: formState, layout: layout, layoutOptions: layoutOptions }));
|
|
161
|
-
case
|
|
162
|
-
return (React.createElement(RowComponent, { field: field, control: control, formValues: formValues, formState: formState, layout: layout, layoutOptions: layoutOptions }));
|
|
163
|
-
case
|
|
173
|
+
case FieldType.ROW:
|
|
174
|
+
return (React.createElement(RowComponent, { field: field, control: control, formValues: formValues, formState: formState, layout: layout, layoutOptions: layoutOptions, fieldErrors: fieldErrors }));
|
|
175
|
+
case FieldType.COLUMN:
|
|
164
176
|
return (React.createElement(ColumnComponent, { field: field, control: control, formValues: formValues, formState: formState, layout: layout, layoutOptions: layoutOptions }));
|
|
165
177
|
default:
|
|
166
178
|
return React.createElement(Fragment, null);
|
|
167
179
|
}
|
|
168
180
|
};
|
|
169
|
-
const renderFormItem = ({ field, control, formValues, formState, layout, layoutOptions, customVisibleCheck }) => {
|
|
181
|
+
const renderFormItem = ({ field, control, formValues, formState, layout, layoutOptions, customVisibleCheck, fieldErrors = [] }) => {
|
|
170
182
|
const isVisible = customVisibleCheck
|
|
171
183
|
? customVisibleCheck()
|
|
172
184
|
: checkIsVisible({
|
|
@@ -179,11 +191,15 @@ const renderFormItem = ({ field, control, formValues, formState, layout, layoutO
|
|
|
179
191
|
field,
|
|
180
192
|
formValues
|
|
181
193
|
});
|
|
182
|
-
|
|
194
|
+
const apiError = getApiFieldError(field.key, fieldErrors);
|
|
195
|
+
const combinedHelpText = apiError
|
|
196
|
+
? `${field.help ? field.help + ' ' : ''}${apiError}`
|
|
197
|
+
: field.help;
|
|
198
|
+
return (React.createElement(FormItem, { key: field.key, control: control, name: field.key, label: field.label, required: field.validation ? true : false, tooltip: field.tooltip, disabled: isDisabled, help: combinedHelpText, labelDescription: field.labelDescription }, renderField(field, control, formValues, formState, layout, layoutOptions)));
|
|
183
199
|
};
|
|
184
200
|
export const AkiformBuilder = forwardRef((_a, ref) => {
|
|
185
201
|
var _b, _c;
|
|
186
|
-
var { fields, onSubmit, layout = 'vertical', layoutOptions, showResetButton = false, onReset, controlled = false, values, onValueChange, submitButtonProps, resetButtonProps } = _a, rest = __rest(_a, ["fields", "onSubmit", "layout", "layoutOptions", "showResetButton", "onReset", "controlled", "values", "onValueChange", "submitButtonProps", "resetButtonProps"]);
|
|
202
|
+
var { fields, onSubmit, layout = 'vertical', layoutOptions, showResetButton = false, onReset, controlled = false, values, onValueChange, submitButtonProps, resetButtonProps, fieldErrors = [], onFieldErrorsClear } = _a, rest = __rest(_a, ["fields", "onSubmit", "layout", "layoutOptions", "showResetButton", "onReset", "controlled", "values", "onValueChange", "submitButtonProps", "resetButtonProps", "fieldErrors", "onFieldErrorsClear"]);
|
|
187
203
|
const validationSchema = useMemo(() => {
|
|
188
204
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
189
205
|
const schema = {};
|
|
@@ -191,7 +207,7 @@ export const AkiformBuilder = forwardRef((_a, ref) => {
|
|
|
191
207
|
if (field.validation) {
|
|
192
208
|
schema[field.key] = field.validation;
|
|
193
209
|
}
|
|
194
|
-
if (field.type ===
|
|
210
|
+
if (field.type === FieldType.FIELD_ARRAY) {
|
|
195
211
|
schema[field.key] = akival.array().of(akival.object().shape(field.fields.reduce((acc, nestedField) => {
|
|
196
212
|
if (nestedField.validation) {
|
|
197
213
|
acc[nestedField.key] = nestedField.validation;
|
|
@@ -260,7 +276,11 @@ export const AkiformBuilder = forwardRef((_a, ref) => {
|
|
|
260
276
|
if (controlled && onValueChange) {
|
|
261
277
|
onValueChange(formValues);
|
|
262
278
|
}
|
|
263
|
-
|
|
279
|
+
// Clear field errors when form values change
|
|
280
|
+
if (onFieldErrorsClear) {
|
|
281
|
+
onFieldErrorsClear();
|
|
282
|
+
}
|
|
283
|
+
}, [controlled, onValueChange, formValues, onFieldErrorsClear]);
|
|
264
284
|
const formItemLayout = useMemo(() => {
|
|
265
285
|
const defaultHorizontalLayout = {
|
|
266
286
|
labelCol: { span: 6 },
|
|
@@ -360,14 +380,14 @@ export const AkiformBuilder = forwardRef((_a, ref) => {
|
|
|
360
380
|
return null;
|
|
361
381
|
}
|
|
362
382
|
switch (field.type) {
|
|
363
|
-
case
|
|
383
|
+
case FieldType.SECTION:
|
|
364
384
|
return (React.createElement(SectionComponent, { key: field.key, field: field, control: control, formValues: formValues, formState: formState, layout: layout, layoutOptions: layoutOptions }));
|
|
365
|
-
case
|
|
385
|
+
case FieldType.FIELD_ARRAY:
|
|
366
386
|
return (React.createElement("div", { className: "akiform-builder-field-array", key: field.key },
|
|
367
387
|
React.createElement(Divider, { orientation: "left", plain: true, plainOffset: 40 },
|
|
368
388
|
React.createElement("span", { id: `${field.key}-label` }, field.label)),
|
|
369
389
|
renderField(field, control, formValues, formState, layout, layoutOptions)));
|
|
370
|
-
case
|
|
390
|
+
case FieldType.ROW:
|
|
371
391
|
return renderField(field, control, formValues, formState, layout, layoutOptions);
|
|
372
392
|
default:
|
|
373
393
|
return renderFormItem({
|
|
@@ -376,7 +396,8 @@ export const AkiformBuilder = forwardRef((_a, ref) => {
|
|
|
376
396
|
formValues,
|
|
377
397
|
formState,
|
|
378
398
|
layout,
|
|
379
|
-
layoutOptions
|
|
399
|
+
layoutOptions,
|
|
400
|
+
fieldErrors
|
|
380
401
|
});
|
|
381
402
|
}
|
|
382
403
|
}),
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export declare enum FieldType {
|
|
2
|
+
TEXT = "text",
|
|
3
|
+
NUMBER = "number",
|
|
4
|
+
SELECT = "select",
|
|
5
|
+
CHECKBOX = "checkbox",
|
|
6
|
+
DATE = "date",
|
|
7
|
+
FIELD_ARRAY = "fieldArray",
|
|
8
|
+
TEXTAREA = "textarea",
|
|
9
|
+
CUSTOM = "custom",
|
|
10
|
+
SECTION = "section",
|
|
11
|
+
ROW = "row",
|
|
12
|
+
COLUMN = "column"
|
|
13
|
+
}
|
|
14
|
+
export declare const FIELD_TYPES: FieldType[];
|
|
15
|
+
//# sourceMappingURL=constants.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,WAAW,eAAe;IAC1B,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AAED,eAAO,MAAM,WAAW,EAA+B,SAAS,EAAE,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export var FieldType;
|
|
2
|
+
(function (FieldType) {
|
|
3
|
+
FieldType["TEXT"] = "text";
|
|
4
|
+
FieldType["NUMBER"] = "number";
|
|
5
|
+
FieldType["SELECT"] = "select";
|
|
6
|
+
FieldType["CHECKBOX"] = "checkbox";
|
|
7
|
+
FieldType["DATE"] = "date";
|
|
8
|
+
FieldType["FIELD_ARRAY"] = "fieldArray";
|
|
9
|
+
FieldType["TEXTAREA"] = "textarea";
|
|
10
|
+
FieldType["CUSTOM"] = "custom";
|
|
11
|
+
FieldType["SECTION"] = "section";
|
|
12
|
+
FieldType["ROW"] = "row";
|
|
13
|
+
FieldType["COLUMN"] = "column";
|
|
14
|
+
})(FieldType || (FieldType = {}));
|
|
15
|
+
export const FIELD_TYPES = Object.values(FieldType);
|
|
@@ -2,8 +2,9 @@ import { FieldPath, FieldValues } from '@akinon/akiform';
|
|
|
2
2
|
import { AnySchema } from '@akinon/akival';
|
|
3
3
|
import type { ColProps, RowProps } from '@akinon/ui-layout';
|
|
4
4
|
import type { TooltipProps } from '@akinon/ui-tooltip';
|
|
5
|
-
import
|
|
6
|
-
type
|
|
5
|
+
import { FieldType } from './constants';
|
|
6
|
+
import type { FieldConfig, FormField } from './types';
|
|
7
|
+
type FieldTypeToBuilder<T extends FieldType, TFieldValues extends FieldValues = FieldValues> = T extends FieldType.SELECT ? SelectFieldBuilder<TFieldValues> : T extends FieldType.DATE ? DateFieldBuilder<TFieldValues> : T extends FieldType.CUSTOM ? CustomFieldBuilder<TFieldValues> : T extends FieldType.SECTION ? SectionFieldBuilder<TFieldValues> : T extends FieldType.FIELD_ARRAY ? FieldArrayOrSectionFieldBuilder<TFieldValues> : T extends FieldType.ROW ? RowFieldBuilder<TFieldValues> : T extends FieldType.COLUMN ? ColumnFieldBuilder<TFieldValues> : BaseFieldBuilder<TFieldValues>;
|
|
7
8
|
declare class BaseFieldBuilder<TFieldValues extends FieldValues = FieldValues> {
|
|
8
9
|
field: Partial<FormField<TFieldValues>>;
|
|
9
10
|
key(key: FieldPath<TFieldValues>): this;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-builder.d.ts","sourceRoot":"","sources":["../../src/field-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,KAAK,EAGV,WAAW,EACX,SAAS,
|
|
1
|
+
{"version":3,"file":"field-builder.d.ts","sourceRoot":"","sources":["../../src/field-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,OAAO,KAAK,EAGV,WAAW,EACX,SAAS,EAGV,MAAM,SAAS,CAAC;AAEjB,KAAK,kBAAkB,CACrB,CAAC,SAAS,SAAS,EACnB,YAAY,SAAS,WAAW,GAAG,WAAW,IAC5C,CAAC,SAAS,SAAS,CAAC,MAAM,GAC1B,kBAAkB,CAAC,YAAY,CAAC,GAChC,CAAC,SAAS,SAAS,CAAC,IAAI,GACtB,gBAAgB,CAAC,YAAY,CAAC,GAC9B,CAAC,SAAS,SAAS,CAAC,MAAM,GACxB,kBAAkB,CAAC,YAAY,CAAC,GAChC,CAAC,SAAS,SAAS,CAAC,OAAO,GACzB,mBAAmB,CAAC,YAAY,CAAC,GACjC,CAAC,SAAS,SAAS,CAAC,WAAW,GAC7B,+BAA+B,CAAC,YAAY,CAAC,GAC7C,CAAC,SAAS,SAAS,CAAC,GAAG,GACrB,eAAe,CAAC,YAAY,CAAC,GAC7B,CAAC,SAAS,SAAS,CAAC,MAAM,GACxB,kBAAkB,CAAC,YAAY,CAAC,GAChC,gBAAgB,CAAC,YAAY,CAAC,CAAC;AAE/C,cAAM,gBAAgB,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW;IACnE,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAM;IAE7C,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,YAAY,CAAC,GAAG,IAAI;IAKvC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,IAAI,CAAC,CAAC,SAAS,SAAS,EAAE,IAAI,EAAE,CAAC,GAAG,kBAAkB,CAAC,CAAC,EAAE,YAAY,CAAC;IAKvE,WAAW,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI;IAMtC,YAAY,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI;IAK9B,UAAU,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI;IAKnC,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,YAAY,CAAC,GAAG,IAAI;IAM/C,OAAO,CAAC,YAAY,EAAE,YAAY,GAAG,MAAM,GAAG,IAAI;IAKlD,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAKxB,gBAAgB,CAAC,gBAAgB,EAAE,MAAM,GAAG,IAAI;IAKhD,KAAK,IAAI,SAAS,CAAC,YAAY,CAAC;CAQjC;AAED,cAAM,kBAAkB,CACtB,YAAY,SAAS,WAAW,GAAG,WAAW,CAC9C,SAAQ,gBAAgB,CAAC,YAAY,CAAC;IACtC,OAAO,CAAC,OAAO,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,IAAI;CAKzE;AAED,cAAM,gBAAgB,CACpB,YAAY,SAAS,WAAW,GAAG,WAAW,CAC9C,SAAQ,gBAAgB,CAAC,YAAY,CAAC;IACtC,QAAQ,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;CAKlC;AAED,cAAM,kBAAkB,CACtB,YAAY,SAAS,WAAW,GAAG,WAAW,CAC9C,SAAQ,gBAAgB,CAAC,YAAY,CAAC;IACtC,MAAM,CACJ,QAAQ,EAAE,CAAC,KAAK,EAAE;QAChB,KAAK,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;QAC/B,UAAU,EAAE,YAAY,CAAC;QAEzB,OAAO,EAAE,GAAG,CAAC;KACd,KAAK,KAAK,CAAC,YAAY,GACvB,IAAI;CAKR;AAED,cAAM,+BAA+B,CACnC,YAAY,SAAS,WAAW,GAAG,WAAW,CAC9C,SAAQ,gBAAgB,CAAC,YAAY,CAAC;IACtC,eAAe,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAKxC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,YAAY,CAAC,EAAE,GAAG,IAAI;CAehD;AAED,cAAM,mBAAmB,CACvB,YAAY,SAAS,WAAW,GAAG,WAAW,CAC9C,SAAQ,+BAA+B,CAAC,YAAY,CAAC;IACrD,WAAW,CAAC,WAAW,EAAE,OAAO,GAAG,IAAI;CAIxC;AAED,cAAM,eAAe,CACnB,YAAY,SAAS,WAAW,GAAG,WAAW,CAC9C,SAAQ,gBAAgB,CAAC,YAAY,CAAC;IACtC,YAAY,CAAC,YAAY,EAAE,SAAS,CAAC,YAAY,CAAC,EAAE,GAAG,IAAI;IAM3D,QAAQ,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI;CAInC;AAED,cAAM,kBAAkB,CACtB,YAAY,SAAS,WAAW,GAAG,WAAW,CAC9C,SAAQ,gBAAgB,CAAC,YAAY,CAAC;IACtC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,YAAY,CAAC,EAAE,GAAG,IAAI;IAK/C,WAAW,CAAC,WAAW,EAAE,QAAQ,GAAG,IAAI;CAIzC;AAED,wBAAgB,KAAK,CACnB,YAAY,SAAS,WAAW,GAAG,WAAW,KAC3C,gBAAgB,CAAC,YAAY,CAAC,GACjC,kBAAkB,CAAC,YAAY,CAAC,GAChC,gBAAgB,CAAC,YAAY,CAAC,GAC9B,kBAAkB,CAAC,YAAY,CAAC,GAChC,mBAAmB,CAAC,YAAY,CAAC,GACjC,+BAA+B,CAAC,YAAY,CAAC,CAyC9C"}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { FieldType } from './constants';
|
|
2
|
+
import { i18n } from './i18n';
|
|
1
3
|
class BaseFieldBuilder {
|
|
2
4
|
constructor() {
|
|
3
5
|
this.field = {};
|
|
@@ -46,9 +48,10 @@ class BaseFieldBuilder {
|
|
|
46
48
|
}
|
|
47
49
|
build() {
|
|
48
50
|
if (!this.field.key || !this.field.type) {
|
|
49
|
-
throw new Error('
|
|
51
|
+
throw new Error(i18n.t('field_missing_key_type'));
|
|
50
52
|
}
|
|
51
|
-
|
|
53
|
+
const builtField = this.field;
|
|
54
|
+
return builtField;
|
|
52
55
|
}
|
|
53
56
|
}
|
|
54
57
|
class SelectFieldBuilder extends BaseFieldBuilder {
|
|
@@ -78,11 +81,12 @@ class FieldArrayOrSectionFieldBuilder extends BaseFieldBuilder {
|
|
|
78
81
|
return this;
|
|
79
82
|
}
|
|
80
83
|
fields(fields) {
|
|
81
|
-
if (this.field.type ===
|
|
84
|
+
if (this.field.type === FieldType.FIELD_ARRAY ||
|
|
85
|
+
this.field.type === FieldType.SECTION) {
|
|
82
86
|
this.field.fields = fields;
|
|
83
87
|
}
|
|
84
88
|
else {
|
|
85
|
-
console.warn(
|
|
89
|
+
console.warn(i18n.t('fields_only_for_array_section', { fieldType: this.field.type }));
|
|
86
90
|
}
|
|
87
91
|
return this;
|
|
88
92
|
}
|
|
@@ -128,7 +132,7 @@ export function field() {
|
|
|
128
132
|
return FieldArrayOrSectionFieldBuilder.prototype.defaultExpanded;
|
|
129
133
|
case 'fields': {
|
|
130
134
|
const fieldType = target.field.type;
|
|
131
|
-
if (fieldType ===
|
|
135
|
+
if (fieldType === FieldType.COLUMN) {
|
|
132
136
|
return ColumnFieldBuilder.prototype.fields;
|
|
133
137
|
}
|
|
134
138
|
return FieldArrayOrSectionFieldBuilder.prototype.fields;
|
|
@@ -9,6 +9,9 @@ declare const translations: {
|
|
|
9
9
|
readonly itemof_ordinal_few: "{{count}}rd Item of {{label}}";
|
|
10
10
|
readonly itemof_ordinal_other: "{{count}}th Item of {{label}}";
|
|
11
11
|
readonly an_error_occurred: "An error occurred in here";
|
|
12
|
+
readonly custom_field_no_render: "Custom field \"{{fieldKey}}\" has no render function";
|
|
13
|
+
readonly field_missing_key_type: "Field must have at least a key and type";
|
|
14
|
+
readonly fields_only_for_array_section: "Fields can only be set for 'fieldArray' or 'section' types. Current type: {{fieldType}}";
|
|
12
15
|
};
|
|
13
16
|
export default translations;
|
|
14
17
|
//# sourceMappingURL=en.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/en.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY
|
|
1
|
+
{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/en.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;CAeR,CAAC;AAEX,eAAe,YAAY,CAAC"}
|
|
@@ -8,6 +8,9 @@ const translations = {
|
|
|
8
8
|
itemof_ordinal_two: '{{count}}nd Item of {{label}}',
|
|
9
9
|
itemof_ordinal_few: '{{count}}rd Item of {{label}}',
|
|
10
10
|
itemof_ordinal_other: '{{count}}th Item of {{label}}',
|
|
11
|
-
an_error_occurred: 'An error occurred in here'
|
|
11
|
+
an_error_occurred: 'An error occurred in here',
|
|
12
|
+
custom_field_no_render: 'Custom field "{{fieldKey}}" has no render function',
|
|
13
|
+
field_missing_key_type: 'Field must have at least a key and type',
|
|
14
|
+
fields_only_for_array_section: "Fields can only be set for 'fieldArray' or 'section' types. Current type: {{fieldType}}"
|
|
12
15
|
};
|
|
13
16
|
export default translations;
|
|
@@ -9,6 +9,9 @@ declare const translations: {
|
|
|
9
9
|
readonly itemof_ordinal_few: "{{label}} için {{count}}. Öğe";
|
|
10
10
|
readonly itemof_ordinal_other: "{{label}} için {{count}}. Öğe";
|
|
11
11
|
readonly an_error_occurred: "Burada bir hata oluştu";
|
|
12
|
+
readonly custom_field_no_render: "\"{{fieldKey}}\" özel alanının render fonksiyonu bulunamadı";
|
|
13
|
+
readonly field_missing_key_type: "Alan en azından key ve type özelliklerine sahip olmalıdır";
|
|
14
|
+
readonly fields_only_for_array_section: "Fields sadece 'fieldArray' veya 'section' tipleri için ayarlanabilir. Mevcut tip: {{fieldType}}";
|
|
12
15
|
};
|
|
13
16
|
export default translations;
|
|
14
17
|
//# sourceMappingURL=tr.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tr.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/tr.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY
|
|
1
|
+
{"version":3,"file":"tr.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/tr.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;CAiBR,CAAC;AAEX,eAAe,YAAY,CAAC"}
|
|
@@ -8,6 +8,9 @@ const translations = {
|
|
|
8
8
|
itemof_ordinal_two: '{{label}} için {{count}}. Öğe',
|
|
9
9
|
itemof_ordinal_few: '{{label}} için {{count}}. Öğe',
|
|
10
10
|
itemof_ordinal_other: '{{label}} için {{count}}. Öğe',
|
|
11
|
-
an_error_occurred: 'Burada bir hata oluştu'
|
|
11
|
+
an_error_occurred: 'Burada bir hata oluştu',
|
|
12
|
+
custom_field_no_render: '"{{fieldKey}}" özel alanının render fonksiyonu bulunamadı',
|
|
13
|
+
field_missing_key_type: 'Alan en azından key ve type özelliklerine sahip olmalıdır',
|
|
14
|
+
fields_only_for_array_section: "Fields sadece 'fieldArray' veya 'section' tipleri için ayarlanabilir. Mevcut tip: {{fieldType}}"
|
|
12
15
|
};
|
|
13
16
|
export default translations;
|
package/dist/esm/index.d.ts
CHANGED
package/dist/esm/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,cAAc,SAAS,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,cAAc,SAAS,CAAC"}
|
package/dist/esm/index.js
CHANGED
package/dist/esm/types.d.ts
CHANGED
|
@@ -4,7 +4,11 @@ import type { IButtonProps } from '@akinon/ui-button';
|
|
|
4
4
|
import type { ColProps, RowProps } from '@akinon/ui-layout';
|
|
5
5
|
import type { TooltipProps } from '@akinon/ui-tooltip';
|
|
6
6
|
import type { FormEventHandler, ReactElement } from 'react';
|
|
7
|
-
|
|
7
|
+
import { FieldType } from './constants';
|
|
8
|
+
export interface FieldConfig<TFieldValues extends FieldValues = FieldValues> {
|
|
9
|
+
disabled?: boolean | ((formValues: TFieldValues) => boolean);
|
|
10
|
+
visible?: boolean | ((formValues: TFieldValues) => boolean);
|
|
11
|
+
}
|
|
8
12
|
export interface BaseField<TFieldValues extends FieldValues = FieldValues> {
|
|
9
13
|
key: FieldPath<TFieldValues>;
|
|
10
14
|
label?: string;
|
|
@@ -12,41 +16,41 @@ export interface BaseField<TFieldValues extends FieldValues = FieldValues> {
|
|
|
12
16
|
placeholder?: string;
|
|
13
17
|
defaultValue?: unknown;
|
|
14
18
|
validation?: AnySchema;
|
|
15
|
-
config?: FieldConfig
|
|
19
|
+
config?: FieldConfig<TFieldValues>;
|
|
16
20
|
tooltip?: TooltipProps | string;
|
|
17
21
|
help?: string;
|
|
18
22
|
labelDescription?: string;
|
|
19
23
|
}
|
|
20
24
|
export interface TextField<TFieldValues extends FieldValues = FieldValues> extends BaseField<TFieldValues> {
|
|
21
|
-
type:
|
|
25
|
+
type: FieldType.TEXT;
|
|
22
26
|
}
|
|
23
27
|
export interface NumberField<TFieldValues extends FieldValues = FieldValues> extends BaseField<TFieldValues> {
|
|
24
|
-
type:
|
|
28
|
+
type: FieldType.NUMBER;
|
|
25
29
|
}
|
|
26
30
|
export interface SelectField<TFieldValues extends FieldValues = FieldValues> extends BaseField<TFieldValues> {
|
|
27
|
-
type:
|
|
31
|
+
type: FieldType.SELECT;
|
|
28
32
|
options: Array<{
|
|
29
33
|
value: string | number;
|
|
30
34
|
label: string;
|
|
31
35
|
}>;
|
|
32
36
|
}
|
|
33
37
|
export interface CheckboxField<TFieldValues extends FieldValues = FieldValues> extends BaseField<TFieldValues> {
|
|
34
|
-
type:
|
|
38
|
+
type: FieldType.CHECKBOX;
|
|
35
39
|
}
|
|
36
40
|
export interface DateField<TFieldValues extends FieldValues = FieldValues> extends BaseField<TFieldValues> {
|
|
37
|
-
type:
|
|
41
|
+
type: FieldType.DATE;
|
|
38
42
|
showTime?: boolean;
|
|
39
43
|
}
|
|
40
44
|
export interface FieldArrayField<TFieldValues extends FieldValues = FieldValues> extends BaseField<TFieldValues> {
|
|
41
|
-
type:
|
|
45
|
+
type: FieldType.FIELD_ARRAY;
|
|
42
46
|
fields: FormField<TFieldValues>[];
|
|
43
47
|
defaultExpanded?: boolean;
|
|
44
48
|
}
|
|
45
49
|
export interface TextareaField<TFieldValues extends FieldValues = FieldValues> extends BaseField<TFieldValues> {
|
|
46
|
-
type:
|
|
50
|
+
type: FieldType.TEXTAREA;
|
|
47
51
|
}
|
|
48
52
|
export interface CustomField<TFieldValues extends FieldValues = FieldValues> extends BaseField<TFieldValues> {
|
|
49
|
-
type:
|
|
53
|
+
type: FieldType.CUSTOM;
|
|
50
54
|
render: (props: {
|
|
51
55
|
field: BaseField<TFieldValues>;
|
|
52
56
|
formValues: TFieldValues;
|
|
@@ -55,18 +59,18 @@ export interface CustomField<TFieldValues extends FieldValues = FieldValues> ext
|
|
|
55
59
|
}) => ReactElement;
|
|
56
60
|
}
|
|
57
61
|
export interface SectionField<TFieldValues extends FieldValues = FieldValues> extends BaseField<TFieldValues> {
|
|
58
|
-
type:
|
|
62
|
+
type: FieldType.SECTION;
|
|
59
63
|
fields: FormField<TFieldValues>[];
|
|
60
64
|
defaultExpanded?: boolean;
|
|
61
65
|
collapsible?: boolean;
|
|
62
66
|
}
|
|
63
67
|
export interface RowField<TFieldValues extends FieldValues = FieldValues> extends BaseField<TFieldValues> {
|
|
64
|
-
type:
|
|
68
|
+
type: FieldType.ROW;
|
|
65
69
|
columnFields: ColumnField<TFieldValues>[];
|
|
66
70
|
rowProps?: RowProps;
|
|
67
71
|
}
|
|
68
72
|
export interface ColumnField<TFieldValues extends FieldValues = FieldValues> extends BaseField<TFieldValues> {
|
|
69
|
-
type:
|
|
73
|
+
type: FieldType.COLUMN;
|
|
70
74
|
fields: FormField<TFieldValues>[];
|
|
71
75
|
columnProps?: ColProps;
|
|
72
76
|
}
|
|
@@ -83,6 +87,11 @@ export interface LayoutOptions {
|
|
|
83
87
|
export type AkiformActionButtonType = Omit<IButtonProps, 'htmlType'> & {
|
|
84
88
|
block?: boolean;
|
|
85
89
|
};
|
|
90
|
+
export interface ApiFieldError {
|
|
91
|
+
field: string;
|
|
92
|
+
message: string;
|
|
93
|
+
code?: string;
|
|
94
|
+
}
|
|
86
95
|
export interface AkiformBuilderProps<TFieldValues extends FieldValues = FieldValues> extends Omit<AkiformProps, 'fields' | 'onReset' | 'onChange' | 'labelCol' | 'wrapperCol'> {
|
|
87
96
|
fields: FormField<TFieldValues>[];
|
|
88
97
|
onSubmit?: (values: TFieldValues) => void;
|
|
@@ -95,12 +104,14 @@ export interface AkiformBuilderProps<TFieldValues extends FieldValues = FieldVal
|
|
|
95
104
|
onValueChange?: (values: TFieldValues) => void;
|
|
96
105
|
submitButtonProps?: AkiformActionButtonType;
|
|
97
106
|
resetButtonProps?: AkiformActionButtonType;
|
|
107
|
+
fieldErrors?: ApiFieldError[];
|
|
108
|
+
onFieldErrorsClear?: () => void;
|
|
98
109
|
}
|
|
99
110
|
export interface AkiformBuilderRef<TFieldValues extends FieldValues = FieldValues> {
|
|
100
111
|
reset: (values?: Partial<TFieldValues>) => void;
|
|
101
112
|
}
|
|
102
|
-
export interface FieldConfig<
|
|
103
|
-
disabled?: boolean | ((
|
|
104
|
-
visible?: boolean | ((
|
|
113
|
+
export interface FieldConfig<TFieldValues extends FieldValues = FieldValues> {
|
|
114
|
+
disabled?: boolean | ((formValues: TFieldValues) => boolean);
|
|
115
|
+
visible?: boolean | ((formValues: TFieldValues) => boolean);
|
|
105
116
|
}
|
|
106
117
|
//# sourceMappingURL=types.d.ts.map
|
package/dist/esm/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE5D,MAAM,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@akinon/akiform-builder",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.4",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Form builder library for form operations.",
|
|
6
6
|
"type": "module",
|
|
@@ -11,30 +11,32 @@
|
|
|
11
11
|
],
|
|
12
12
|
"dependencies": {
|
|
13
13
|
"clsx": "^2.1.1",
|
|
14
|
-
"@akinon/
|
|
15
|
-
"@akinon/
|
|
16
|
-
"@akinon/akilocale": "1.2.
|
|
17
|
-
"@akinon/
|
|
18
|
-
"@akinon/ui-button": "1.3.
|
|
19
|
-
"@akinon/
|
|
20
|
-
"@akinon/ui-
|
|
21
|
-
"@akinon/ui-
|
|
22
|
-
"@akinon/ui-
|
|
23
|
-
"@akinon/ui-input
|
|
24
|
-
"@akinon/ui-select": "1.3.
|
|
25
|
-
"@akinon/ui-layout": "1.
|
|
26
|
-
"@akinon/ui-
|
|
27
|
-
"@akinon/ui-
|
|
28
|
-
"@akinon/ui-
|
|
14
|
+
"@akinon/akidate": "1.1.2",
|
|
15
|
+
"@akinon/akiform": "1.1.2",
|
|
16
|
+
"@akinon/akilocale": "1.2.1",
|
|
17
|
+
"@akinon/akival": "1.1.1",
|
|
18
|
+
"@akinon/ui-button": "1.3.2",
|
|
19
|
+
"@akinon/icons": "1.1.1",
|
|
20
|
+
"@akinon/ui-checkbox": "1.3.2",
|
|
21
|
+
"@akinon/ui-collapse": "1.3.1",
|
|
22
|
+
"@akinon/ui-date-picker": "1.3.2",
|
|
23
|
+
"@akinon/ui-input": "1.1.2",
|
|
24
|
+
"@akinon/ui-select": "1.3.3",
|
|
25
|
+
"@akinon/ui-layout": "1.6.1",
|
|
26
|
+
"@akinon/ui-input-number": "1.3.2",
|
|
27
|
+
"@akinon/ui-divider": "1.3.2",
|
|
28
|
+
"@akinon/ui-tooltip": "1.3.2",
|
|
29
|
+
"@akinon/ui-typography": "1.1.1"
|
|
29
30
|
},
|
|
30
31
|
"devDependencies": {
|
|
32
|
+
"@types/node": "^24.5.0",
|
|
31
33
|
"clean-package": "2.2.0",
|
|
32
34
|
"copyfiles": "^2.4.1",
|
|
33
35
|
"rimraf": "^5.0.5",
|
|
34
36
|
"typescript": "*",
|
|
35
|
-
"@akinon/typescript-config": "1.1.
|
|
36
|
-
"@akinon/utils": "1.1.
|
|
37
|
-
"@akinon/vitest-config": "1.1.
|
|
37
|
+
"@akinon/typescript-config": "1.1.1",
|
|
38
|
+
"@akinon/utils": "1.1.3",
|
|
39
|
+
"@akinon/vitest-config": "1.1.1"
|
|
38
40
|
},
|
|
39
41
|
"peerDependencies": {
|
|
40
42
|
"react": "^18 || ^19",
|