mtrl-addons 0.3.5 → 0.3.7
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/components/form/features/api.d.ts +2 -0
- package/dist/components/form/features/fields.d.ts +5 -0
- package/dist/components/form/features/index.d.ts +1 -1
- package/dist/components/form/features/submit.d.ts +9 -2
- package/dist/components/form/types.d.ts +17 -1
- package/dist/components/vlist/types.d.ts +2 -0
- package/dist/core/viewport/types.d.ts +6 -0
- package/dist/index.js +108 -9
- package/dist/index.mjs +108 -9
- package/dist/styles.css +2 -2
- package/package.json +1 -1
- package/src/styles/components/_form.scss +1 -1
- package/src/styles/components/_vlist.scss +1 -1
|
@@ -32,9 +32,11 @@ interface EnhancedFormComponent extends BaseFormComponent {
|
|
|
32
32
|
enableFields: () => void;
|
|
33
33
|
disableFields: () => void;
|
|
34
34
|
validate: () => FormValidationResult;
|
|
35
|
+
validateField: (fieldName: string) => string | undefined;
|
|
35
36
|
submit: (options?: FormSubmitOptions) => Promise<unknown>;
|
|
36
37
|
setValidationRules: (rules: import("../types").FormValidationRule[]) => void;
|
|
37
38
|
clearErrors: () => void;
|
|
39
|
+
clearFieldError: (field: string) => void;
|
|
38
40
|
setFieldError: (field: string, error: string) => void;
|
|
39
41
|
getFieldError: (field: string) => string | undefined;
|
|
40
42
|
on?: (event: string, handler: Function) => void;
|
|
@@ -33,6 +33,11 @@ export declare const updateTrackedFieldValue: (name: string, value: FieldValue)
|
|
|
33
33
|
* Called after silent setData to sync deduplication state
|
|
34
34
|
*/
|
|
35
35
|
export declare const syncTrackedFieldValues: (fields: FormFieldRegistry) => void;
|
|
36
|
+
/**
|
|
37
|
+
* Resets the field value tracker for a new form
|
|
38
|
+
* Should be called at the start of withFields before bindFieldEvents
|
|
39
|
+
*/
|
|
40
|
+
export declare const resetFieldValueTracker: () => void;
|
|
36
41
|
/**
|
|
37
42
|
* withFields feature
|
|
38
43
|
* Adds field extraction and registry management to the form
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Each feature adds specific capabilities to the form component
|
|
4
4
|
*/
|
|
5
5
|
export { withLayout } from "./layout";
|
|
6
|
-
export { withFields, getFieldValue, setFieldValue, updateTrackedFieldValue, syncTrackedFieldValues, } from "./fields";
|
|
6
|
+
export { withFields, getFieldValue, setFieldValue, updateTrackedFieldValue, syncTrackedFieldValues, resetFieldValueTracker, } from "./fields";
|
|
7
7
|
export { withData, flatToNested, getNestedValue, setNestedValue } from "./data";
|
|
8
8
|
export { withController } from "./controller";
|
|
9
9
|
export { withSubmit, validateData, performRequest } from "./submit";
|
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Submit feature for Form component
|
|
3
|
-
* Handles form validation and submission
|
|
3
|
+
* Handles form validation and submission with automatic field error display
|
|
4
4
|
*/
|
|
5
5
|
import type { FormConfig, BaseFormComponent, FormData, FormState, FormFieldRegistry, FormValidationRule, FormValidationResult, FormSubmitOptions } from "../types";
|
|
6
6
|
/**
|
|
7
7
|
* Validates form data against validation rules
|
|
8
8
|
*/
|
|
9
9
|
declare const validateData: (data: FormData, rules: FormValidationRule[]) => FormValidationResult;
|
|
10
|
+
/**
|
|
11
|
+
* Validates a single field against its validation rules
|
|
12
|
+
*/
|
|
13
|
+
declare const validateField: (fieldName: string, data: FormData, rules: FormValidationRule[]) => string | undefined;
|
|
10
14
|
/**
|
|
11
15
|
* Performs the actual HTTP request
|
|
12
16
|
*/
|
|
@@ -23,13 +27,16 @@ export declare const withSubmit: (config: FormConfig) => <T extends BaseFormComp
|
|
|
23
27
|
disableControls: () => void;
|
|
24
28
|
snapshot: () => void;
|
|
25
29
|
emit?: (event: string, data?: unknown) => void;
|
|
30
|
+
on?: (event: string, handler: (data: unknown) => void) => void;
|
|
26
31
|
}>(component: T) => T & {
|
|
27
32
|
validate: () => FormValidationResult;
|
|
33
|
+
validateField: (fieldName: string) => string | undefined;
|
|
28
34
|
submit: (options?: FormSubmitOptions) => Promise<unknown>;
|
|
29
35
|
setValidationRules: (rules: FormValidationRule[]) => void;
|
|
30
36
|
clearErrors: () => void;
|
|
37
|
+
clearFieldError: (field: string) => void;
|
|
31
38
|
setFieldError: (field: string, error: string) => void;
|
|
32
39
|
getFieldError: (field: string) => string | undefined;
|
|
33
40
|
};
|
|
34
|
-
export { validateData, performRequest };
|
|
41
|
+
export { validateData, validateField, performRequest };
|
|
35
42
|
export default withSubmit;
|
|
@@ -31,6 +31,10 @@ export interface FormField {
|
|
|
31
31
|
disable?: () => void;
|
|
32
32
|
/** Check if field is disabled */
|
|
33
33
|
isDisabled?: () => boolean;
|
|
34
|
+
/** Set error state with optional message */
|
|
35
|
+
setError?: (error: boolean, message?: string) => void;
|
|
36
|
+
/** Check if field has error */
|
|
37
|
+
isError?: () => boolean;
|
|
34
38
|
/** Add event listener */
|
|
35
39
|
on?: (event: string, handler: Function) => void;
|
|
36
40
|
/** Remove event listener */
|
|
@@ -157,6 +161,8 @@ export interface FormConfig {
|
|
|
157
161
|
data?: FormData;
|
|
158
162
|
/** Validation rules */
|
|
159
163
|
validation?: FormValidationRule[];
|
|
164
|
+
/** Whether to show error messages in field helper text (default: true) */
|
|
165
|
+
showFieldErrorMessages?: boolean;
|
|
160
166
|
/** Event handlers */
|
|
161
167
|
on?: FormEventHandlers;
|
|
162
168
|
/** Container element to append form to */
|
|
@@ -199,8 +205,18 @@ export interface FormAPI {
|
|
|
199
205
|
isModified: () => boolean;
|
|
200
206
|
/** Get current data state (pristine or dirty) */
|
|
201
207
|
getDataState: () => DataState;
|
|
202
|
-
/** Validate the form */
|
|
208
|
+
/** Validate the form (shows errors on fields automatically) */
|
|
203
209
|
validate: () => FormValidationResult;
|
|
210
|
+
/** Validate a single field */
|
|
211
|
+
validateField: (fieldName: string) => string | undefined;
|
|
212
|
+
/** Clear all validation errors */
|
|
213
|
+
clearErrors: () => FormComponent;
|
|
214
|
+
/** Clear error for a specific field */
|
|
215
|
+
clearFieldError: (field: string) => FormComponent;
|
|
216
|
+
/** Set error for a specific field */
|
|
217
|
+
setFieldError: (field: string, error: string) => FormComponent;
|
|
218
|
+
/** Get error for a specific field */
|
|
219
|
+
getFieldError: (field: string) => string | undefined;
|
|
204
220
|
/** Submit the form */
|
|
205
221
|
submit: (options?: FormSubmitOptions) => Promise<unknown>;
|
|
206
222
|
/** Reset form to initial data */
|
|
@@ -561,6 +561,8 @@ export interface VListConfig<T extends ListItem = ListItem> {
|
|
|
561
561
|
prefix?: string;
|
|
562
562
|
ariaLabel?: string;
|
|
563
563
|
debug?: boolean;
|
|
564
|
+
/** Automatically select first item after initial load (default: false) */
|
|
565
|
+
autoSelectFirst?: boolean;
|
|
564
566
|
initialScrollIndex?: number;
|
|
565
567
|
selectId?: string | number;
|
|
566
568
|
autoLoad?: boolean;
|
|
@@ -37,6 +37,12 @@ export interface ViewportConfig {
|
|
|
37
37
|
element?: HTMLElement;
|
|
38
38
|
className?: string;
|
|
39
39
|
debug?: boolean;
|
|
40
|
+
/** ID of item to select after initial load completes */
|
|
41
|
+
selectId?: string | number;
|
|
42
|
+
/** Whether to automatically load data on initialization (default: true) */
|
|
43
|
+
autoLoad?: boolean;
|
|
44
|
+
/** Automatically select first item after initial load (default: false) */
|
|
45
|
+
autoSelectFirst?: boolean;
|
|
40
46
|
template?: (item: any, index: number) => string | HTMLElement | any[] | Record<string, any>;
|
|
41
47
|
collection?: {
|
|
42
48
|
adapter?: any;
|