@cjdevstudios/bumblevue-forms 1.0.0-beta.1
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/LICENSE.md +22 -0
- package/README.md +1 -0
- package/form/BaseForm.vue +42 -0
- package/form/Form.vue +54 -0
- package/form/index.d.ts +339 -0
- package/form/index.mjs +115 -0
- package/form/index.mjs.map +1 -0
- package/form/package.json +11 -0
- package/form/style/index.d.ts +17 -0
- package/form/style/index.mjs +12 -0
- package/form/style/index.mjs.map +1 -0
- package/form/style/package.json +6 -0
- package/formfield/BaseFormField.vue +54 -0
- package/formfield/FormField.vue +51 -0
- package/formfield/index.d.ts +224 -0
- package/formfield/index.mjs +122 -0
- package/formfield/index.mjs.map +1 -0
- package/formfield/package.json +11 -0
- package/formfield/style/index.d.ts +17 -0
- package/formfield/style/index.mjs +12 -0
- package/formfield/style/index.mjs.map +1 -0
- package/formfield/style/package.json +6 -0
- package/index.d.ts +11 -0
- package/index.mjs +9 -0
- package/index.mjs.map +1 -0
- package/package.json +50 -0
- package/resolvers/joi/index.d.ts +1 -0
- package/resolvers/joi/index.mjs +2 -0
- package/resolvers/joi/index.mjs.map +1 -0
- package/resolvers/joi/package.json +5 -0
- package/resolvers/superstruct/index.d.ts +1 -0
- package/resolvers/superstruct/index.mjs +2 -0
- package/resolvers/superstruct/index.mjs.map +1 -0
- package/resolvers/superstruct/package.json +5 -0
- package/resolvers/valibot/index.d.ts +1 -0
- package/resolvers/valibot/index.mjs +2 -0
- package/resolvers/valibot/index.mjs.map +1 -0
- package/resolvers/valibot/package.json +5 -0
- package/resolvers/yup/index.d.ts +1 -0
- package/resolvers/yup/index.mjs +2 -0
- package/resolvers/yup/index.mjs.map +1 -0
- package/resolvers/yup/package.json +5 -0
- package/resolvers/zod/index.d.ts +1 -0
- package/resolvers/zod/index.mjs +2 -0
- package/resolvers/zod/index.mjs.map +1 -0
- package/resolvers/zod/package.json +5 -0
- package/types.d.ts +9 -0
- package/useform/index.d.ts +73 -0
- package/useform/index.mjs +420 -0
- package/useform/index.mjs.map +1 -0
- package/useform/package.json +5 -0
package/LICENSE.md
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
The MIT License (MIT)
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 CJ Development Studios
|
|
4
|
+
Copyright (c) 2018-2026 PrimeTek
|
|
5
|
+
|
|
6
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
7
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
8
|
+
in the Software without restriction, including without limitation the rights
|
|
9
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
10
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
11
|
+
furnished to do so, subject to the following conditions:
|
|
12
|
+
|
|
13
|
+
The above copyright notice and this permission notice shall be included in
|
|
14
|
+
all copies or substantial portions of the Software.
|
|
15
|
+
|
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
17
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
18
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
19
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
20
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
21
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
22
|
+
THE SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
# BumbleVue Forms
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import BaseComponent from '@primevue/core/basecomponent';
|
|
3
|
+
import FormStyle from '@primevue/forms/form/style';
|
|
4
|
+
|
|
5
|
+
export default {
|
|
6
|
+
name: 'BaseForm',
|
|
7
|
+
extends: BaseComponent,
|
|
8
|
+
style: FormStyle,
|
|
9
|
+
props: {
|
|
10
|
+
resolver: {
|
|
11
|
+
type: Function,
|
|
12
|
+
default: null
|
|
13
|
+
},
|
|
14
|
+
initialValues: {
|
|
15
|
+
type: Object,
|
|
16
|
+
default: null
|
|
17
|
+
},
|
|
18
|
+
validateOnValueUpdate: {
|
|
19
|
+
type: [Boolean, Array],
|
|
20
|
+
default: true
|
|
21
|
+
},
|
|
22
|
+
validateOnBlur: {
|
|
23
|
+
type: [Boolean, Array],
|
|
24
|
+
default: false
|
|
25
|
+
},
|
|
26
|
+
validateOnMount: {
|
|
27
|
+
type: [Boolean, Array],
|
|
28
|
+
default: false
|
|
29
|
+
},
|
|
30
|
+
validateOnSubmit: {
|
|
31
|
+
type: [Boolean, Array],
|
|
32
|
+
default: true
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
provide() {
|
|
36
|
+
return {
|
|
37
|
+
$pcForm: this,
|
|
38
|
+
$parentInstance: this
|
|
39
|
+
};
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
</script>
|
package/form/Form.vue
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<form ref="formRef" @submit.prevent="onSubmit" @reset.prevent="onReset" :class="cx('root')" v-bind="ptmi('root')">
|
|
3
|
+
<slot :register :valid :reset v-bind="states" />
|
|
4
|
+
</form>
|
|
5
|
+
</template>
|
|
6
|
+
|
|
7
|
+
<script>
|
|
8
|
+
import { omit } from '@primeuix/utils';
|
|
9
|
+
import { useForm } from '@primevue/forms/useform';
|
|
10
|
+
import { ref } from 'vue';
|
|
11
|
+
import BaseForm from './BaseForm.vue';
|
|
12
|
+
|
|
13
|
+
export default {
|
|
14
|
+
name: 'Form',
|
|
15
|
+
extends: BaseForm,
|
|
16
|
+
inheritAttrs: false,
|
|
17
|
+
emits: ['submit', 'reset'],
|
|
18
|
+
setup(props, { emit }) {
|
|
19
|
+
const formRef = ref(null);
|
|
20
|
+
const $form = useForm(props);
|
|
21
|
+
|
|
22
|
+
const submit = () => {
|
|
23
|
+
formRef.value?.requestSubmit();
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
const register = (field, options) => {
|
|
27
|
+
if (!options?.novalidate) {
|
|
28
|
+
const [, fieldProps] = $form.defineField(field, options);
|
|
29
|
+
|
|
30
|
+
return fieldProps;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
return {};
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
const onSubmit = $form.handleSubmit((e) => {
|
|
37
|
+
emit('submit', e);
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
const onReset = $form.handleReset((e) => {
|
|
41
|
+
emit('reset', e);
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
return {
|
|
45
|
+
formRef,
|
|
46
|
+
submit,
|
|
47
|
+
register,
|
|
48
|
+
onSubmit,
|
|
49
|
+
onReset,
|
|
50
|
+
...omit($form, ['handleSubmit', 'handleReset'])
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
</script>
|
package/form/index.d.ts
ADDED
|
@@ -0,0 +1,339 @@
|
|
|
1
|
+
/**
|
|
2
|
+
*
|
|
3
|
+
* Form provides validation functionality and manages form state.
|
|
4
|
+
*
|
|
5
|
+
* [Live Demo](https://www.primevue.org/forms/)
|
|
6
|
+
*
|
|
7
|
+
* @module form
|
|
8
|
+
*
|
|
9
|
+
*/
|
|
10
|
+
import type { DefineComponent, DesignToken, EmitFn, PassThrough } from '@primevue/core';
|
|
11
|
+
import type { ComponentHooks } from '@primevue/core/basecomponent';
|
|
12
|
+
import { VNode } from 'vue';
|
|
13
|
+
import type { PassThroughOptions } from '../types';
|
|
14
|
+
import { useFormFieldState } from '../useform';
|
|
15
|
+
|
|
16
|
+
export declare type FormPassThroughOptionType = FormPassThroughAttributes | ((options: FormPassThroughMethodOptions) => FormPassThroughAttributes | string) | string | null | undefined;
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* Custom passthrough(pt) option method.
|
|
20
|
+
*/
|
|
21
|
+
export interface FormPassThroughMethodOptions {
|
|
22
|
+
/**
|
|
23
|
+
* Defines instance.
|
|
24
|
+
*/
|
|
25
|
+
instance: any;
|
|
26
|
+
/**
|
|
27
|
+
* Defines valid properties.
|
|
28
|
+
*/
|
|
29
|
+
props: FormProps;
|
|
30
|
+
/**
|
|
31
|
+
* Defines valid attributes.
|
|
32
|
+
*/
|
|
33
|
+
attrs: any;
|
|
34
|
+
/**
|
|
35
|
+
* Defines parent options.
|
|
36
|
+
*/
|
|
37
|
+
parent: any;
|
|
38
|
+
/**
|
|
39
|
+
* Defines passthrough(pt) options in global config.
|
|
40
|
+
*/
|
|
41
|
+
global: object | undefined;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* Custom passthrough(pt) options.
|
|
46
|
+
* @see {@link FormProps.pt}
|
|
47
|
+
*/
|
|
48
|
+
export interface FormPassThroughOptions {
|
|
49
|
+
/**
|
|
50
|
+
* Used to pass attributes to the root's DOM element.
|
|
51
|
+
*/
|
|
52
|
+
root?: FormPassThroughOptionType;
|
|
53
|
+
/**
|
|
54
|
+
* Used to manage all lifecycle hooks.
|
|
55
|
+
* @see {@link BaseComponent.ComponentHooks}
|
|
56
|
+
*/
|
|
57
|
+
hooks?: ComponentHooks;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* Custom passthrough attributes for each DOM elements
|
|
62
|
+
*/
|
|
63
|
+
export interface FormPassThroughAttributes {
|
|
64
|
+
[key: string]: any;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/**
|
|
68
|
+
* Resolver options for Form component.
|
|
69
|
+
*/
|
|
70
|
+
export interface FormResolverOptions {
|
|
71
|
+
/**
|
|
72
|
+
* The values of the form fields.
|
|
73
|
+
*/
|
|
74
|
+
values: Record<string, any>;
|
|
75
|
+
/**
|
|
76
|
+
* The names of the form fields.
|
|
77
|
+
*/
|
|
78
|
+
names: string[] | undefined;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/**
|
|
82
|
+
* Submit events
|
|
83
|
+
*/
|
|
84
|
+
export interface FormSubmitEvent<T extends Record<string, any> = Record<string, any>> {
|
|
85
|
+
/**
|
|
86
|
+
* The original DOM event.
|
|
87
|
+
*/
|
|
88
|
+
originalEvent: Event;
|
|
89
|
+
/**
|
|
90
|
+
* The form values.
|
|
91
|
+
*/
|
|
92
|
+
values: T;
|
|
93
|
+
/**
|
|
94
|
+
* The form state.
|
|
95
|
+
*/
|
|
96
|
+
states: Record<string, FormFieldState>;
|
|
97
|
+
/**
|
|
98
|
+
* Whether the form is valid.
|
|
99
|
+
*/
|
|
100
|
+
valid: boolean;
|
|
101
|
+
/**
|
|
102
|
+
* The form errors.
|
|
103
|
+
*/
|
|
104
|
+
errors: any[];
|
|
105
|
+
/**
|
|
106
|
+
* Resets the form.
|
|
107
|
+
*/
|
|
108
|
+
reset: () => void;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/**
|
|
112
|
+
* Reset events
|
|
113
|
+
*/
|
|
114
|
+
export interface FormResetEvent {
|
|
115
|
+
/**
|
|
116
|
+
* The original DOM event.
|
|
117
|
+
*/
|
|
118
|
+
originalEvent: Event;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/**
|
|
122
|
+
* The state of a form field.
|
|
123
|
+
*/
|
|
124
|
+
export interface FormFieldState {
|
|
125
|
+
/**
|
|
126
|
+
* The value of the form field.
|
|
127
|
+
*/
|
|
128
|
+
value: any;
|
|
129
|
+
/**
|
|
130
|
+
* Whether the form field has been touched.
|
|
131
|
+
* @defaultValue false
|
|
132
|
+
*/
|
|
133
|
+
touched: boolean;
|
|
134
|
+
/**
|
|
135
|
+
* Whether the form field has been modified.
|
|
136
|
+
* @defaultValue false
|
|
137
|
+
*/
|
|
138
|
+
dirty: boolean;
|
|
139
|
+
/**
|
|
140
|
+
* Whether the form field has not been modified.
|
|
141
|
+
* @defaultValue true
|
|
142
|
+
*/
|
|
143
|
+
pristine: boolean;
|
|
144
|
+
/**
|
|
145
|
+
* Whether the form field is valid.
|
|
146
|
+
* @defaultValue true
|
|
147
|
+
*/
|
|
148
|
+
valid: boolean;
|
|
149
|
+
/**
|
|
150
|
+
* Whether the form field is invalid.
|
|
151
|
+
* @defaultValue false
|
|
152
|
+
*/
|
|
153
|
+
invalid: boolean;
|
|
154
|
+
/**
|
|
155
|
+
* The first error message of the form field.
|
|
156
|
+
*/
|
|
157
|
+
error: any;
|
|
158
|
+
/**
|
|
159
|
+
* All error messages of the form field.
|
|
160
|
+
* @defaultValue []
|
|
161
|
+
*/
|
|
162
|
+
errors: any[];
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
/**
|
|
166
|
+
* Defines valid properties in Form component.
|
|
167
|
+
*/
|
|
168
|
+
export interface FormProps {
|
|
169
|
+
/**
|
|
170
|
+
* A function that resolves validation logic.
|
|
171
|
+
* @param {FormResolverOptions} e - Resolver options
|
|
172
|
+
*/
|
|
173
|
+
resolver?: (e: FormResolverOptions) => Promise<Record<string, any>> | Record<string, any> | undefined;
|
|
174
|
+
/**
|
|
175
|
+
* The initial values for the form fields.
|
|
176
|
+
*/
|
|
177
|
+
initialValues?: Record<string, any> | undefined;
|
|
178
|
+
/**
|
|
179
|
+
* Whether to validate the form fields when the values change.
|
|
180
|
+
* @defaultValue true
|
|
181
|
+
*/
|
|
182
|
+
validateOnValueUpdate?: boolean | string[] | undefined;
|
|
183
|
+
/**
|
|
184
|
+
* Whether to validate the form fields when they lose focus (on blur).
|
|
185
|
+
* @defaultValue false
|
|
186
|
+
*/
|
|
187
|
+
validateOnBlur?: boolean | string[] | undefined;
|
|
188
|
+
/**
|
|
189
|
+
* Whether to validate the form fields immediately after the form is mounted.
|
|
190
|
+
* @defaultValue false
|
|
191
|
+
*/
|
|
192
|
+
validateOnMount?: boolean | string[] | undefined;
|
|
193
|
+
/**
|
|
194
|
+
* Whether to validate the form fields when the form is submitted.
|
|
195
|
+
* @defaultValue true
|
|
196
|
+
*/
|
|
197
|
+
validateOnSubmit?: boolean | string[] | undefined;
|
|
198
|
+
/**
|
|
199
|
+
* It generates scoped CSS variables using design tokens for the component.
|
|
200
|
+
*/
|
|
201
|
+
dt?: DesignToken<any>;
|
|
202
|
+
/**
|
|
203
|
+
* Used to pass attributes to DOM elements inside the component.
|
|
204
|
+
* @type {FormPassThroughOptions}
|
|
205
|
+
*/
|
|
206
|
+
pt?: PassThrough<FormPassThroughOptions>;
|
|
207
|
+
/**
|
|
208
|
+
* Used to configure passthrough(pt) options of the component.
|
|
209
|
+
* @type {PassThroughOptions}
|
|
210
|
+
*/
|
|
211
|
+
ptOptions?: PassThroughOptions;
|
|
212
|
+
/**
|
|
213
|
+
* When enabled, it removes component related styles in the core.
|
|
214
|
+
* @defaultValue false
|
|
215
|
+
*/
|
|
216
|
+
unstyled?: boolean;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
/**
|
|
220
|
+
* Defines valid slots in Form component.
|
|
221
|
+
*/
|
|
222
|
+
export interface FormSlots {
|
|
223
|
+
/**
|
|
224
|
+
* Default content slot.
|
|
225
|
+
* @param {Object} scope - default slot's params.
|
|
226
|
+
*/
|
|
227
|
+
default: (
|
|
228
|
+
scope: {
|
|
229
|
+
/**
|
|
230
|
+
* Registers a form field for validation and tracking.
|
|
231
|
+
* @param field - The name of the form field to register.
|
|
232
|
+
* @param options - Configuration options for the field, such as validation rules.
|
|
233
|
+
* @returns - Returns an object or value representing the registered field.
|
|
234
|
+
*/
|
|
235
|
+
register: (field: string, options: any) => any;
|
|
236
|
+
/**
|
|
237
|
+
* Resets the entire form state, clearing values and validation statuses.
|
|
238
|
+
*/
|
|
239
|
+
reset: () => void;
|
|
240
|
+
/**
|
|
241
|
+
* Indicates whether the form is valid, returning `true` if all fields pass validation.
|
|
242
|
+
*/
|
|
243
|
+
valid: boolean;
|
|
244
|
+
} & {
|
|
245
|
+
/**
|
|
246
|
+
* Stores the state of each form field, with the field name as the key and its state as the value.
|
|
247
|
+
*/
|
|
248
|
+
[key: string]: FormFieldState;
|
|
249
|
+
}
|
|
250
|
+
) => VNode[];
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
/**
|
|
254
|
+
* Defines valid emits in Form component.
|
|
255
|
+
*/
|
|
256
|
+
export interface FormEmitsOptions {
|
|
257
|
+
/**
|
|
258
|
+
* Emitted when the form is submitted.
|
|
259
|
+
* @param {FormSubmitEvent} event - Custom submit event.
|
|
260
|
+
*/
|
|
261
|
+
submit: (event: FormSubmitEvent) => void;
|
|
262
|
+
/**
|
|
263
|
+
* Emitted when the form is reset.
|
|
264
|
+
* @param {FormResetEvent} event - Custom reset event.
|
|
265
|
+
*/
|
|
266
|
+
reset: (event: FormResetEvent) => void;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
export declare type FormEmits = EmitFn<FormEmitsOptions>;
|
|
270
|
+
|
|
271
|
+
export interface FormFieldState extends useFormFieldState {}
|
|
272
|
+
|
|
273
|
+
export interface FormInstance {
|
|
274
|
+
/**
|
|
275
|
+
* Set the value of a form field.
|
|
276
|
+
* @param field field name
|
|
277
|
+
* @param value field value
|
|
278
|
+
*/
|
|
279
|
+
setFieldValue: (field: string, value: any) => void;
|
|
280
|
+
/**
|
|
281
|
+
* Get the state of a form field.
|
|
282
|
+
* @param field field name
|
|
283
|
+
* @returns field state
|
|
284
|
+
*/
|
|
285
|
+
getFieldState: (field: string) => FormFieldState | undefined;
|
|
286
|
+
/**
|
|
287
|
+
* Validates the form or a specific field.
|
|
288
|
+
* @param field
|
|
289
|
+
* @returns
|
|
290
|
+
*/
|
|
291
|
+
validate: (field?: string | string[]) => Promise<{
|
|
292
|
+
values?: any;
|
|
293
|
+
errors: any;
|
|
294
|
+
}>;
|
|
295
|
+
/**
|
|
296
|
+
* Sets the values of the form fields.
|
|
297
|
+
* @param values
|
|
298
|
+
*/
|
|
299
|
+
setValues: (values: Record<string, any>) => void;
|
|
300
|
+
/**
|
|
301
|
+
* Resets the entire form state, clearing values and validation statuses.
|
|
302
|
+
*/
|
|
303
|
+
reset: () => void;
|
|
304
|
+
/**
|
|
305
|
+
* Submits the form.
|
|
306
|
+
* @returns
|
|
307
|
+
*/
|
|
308
|
+
submit: () => void;
|
|
309
|
+
/**
|
|
310
|
+
* Whether the form is valid.
|
|
311
|
+
*/
|
|
312
|
+
valid: boolean;
|
|
313
|
+
/**
|
|
314
|
+
* The state of each form field, with the field name as the key and its state as the value.
|
|
315
|
+
*/
|
|
316
|
+
states: Record<string, FormFieldState>;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
/**
|
|
320
|
+
* **PrimeVue - Form**
|
|
321
|
+
*
|
|
322
|
+
* _Form provides validation functionality and manages form state._
|
|
323
|
+
*
|
|
324
|
+
* [Live Demo](https://www.primevue.org/forms/)
|
|
325
|
+
* --- ---
|
|
326
|
+
* 
|
|
327
|
+
*
|
|
328
|
+
* @group Component
|
|
329
|
+
*
|
|
330
|
+
*/
|
|
331
|
+
declare const Form: DefineComponent<FormProps, FormSlots, FormEmits>;
|
|
332
|
+
|
|
333
|
+
declare module 'vue' {
|
|
334
|
+
export interface GlobalComponents {
|
|
335
|
+
Form: DefineComponent<FormProps, FormSlots, FormEmits>;
|
|
336
|
+
}
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
export default Form;
|
package/form/index.mjs
ADDED
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
import { omit } from '@primeuix/utils';
|
|
2
|
+
import { useForm } from '@primevue/forms/useform';
|
|
3
|
+
import { ref, openBlock, createElementBlock, mergeProps, withModifiers, renderSlot } from 'vue';
|
|
4
|
+
import BaseComponent from '@primevue/core/basecomponent';
|
|
5
|
+
import FormStyle from '@primevue/forms/form/style';
|
|
6
|
+
|
|
7
|
+
var script$1 = {
|
|
8
|
+
name: 'BaseForm',
|
|
9
|
+
"extends": BaseComponent,
|
|
10
|
+
style: FormStyle,
|
|
11
|
+
props: {
|
|
12
|
+
resolver: {
|
|
13
|
+
type: Function,
|
|
14
|
+
"default": null
|
|
15
|
+
},
|
|
16
|
+
initialValues: {
|
|
17
|
+
type: Object,
|
|
18
|
+
"default": null
|
|
19
|
+
},
|
|
20
|
+
validateOnValueUpdate: {
|
|
21
|
+
type: [Boolean, Array],
|
|
22
|
+
"default": true
|
|
23
|
+
},
|
|
24
|
+
validateOnBlur: {
|
|
25
|
+
type: [Boolean, Array],
|
|
26
|
+
"default": false
|
|
27
|
+
},
|
|
28
|
+
validateOnMount: {
|
|
29
|
+
type: [Boolean, Array],
|
|
30
|
+
"default": false
|
|
31
|
+
},
|
|
32
|
+
validateOnSubmit: {
|
|
33
|
+
type: [Boolean, Array],
|
|
34
|
+
"default": true
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
provide: function provide() {
|
|
38
|
+
return {
|
|
39
|
+
$pcForm: this,
|
|
40
|
+
$parentInstance: this
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
46
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
47
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
48
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
|
|
49
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
50
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
51
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
52
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
53
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
54
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
55
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = true, o = false; try { if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = true, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
56
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
57
|
+
var script = {
|
|
58
|
+
name: 'Form',
|
|
59
|
+
"extends": script$1,
|
|
60
|
+
inheritAttrs: false,
|
|
61
|
+
emits: ['submit', 'reset'],
|
|
62
|
+
setup: function setup(props, _ref) {
|
|
63
|
+
var emit = _ref.emit;
|
|
64
|
+
var formRef = ref(null);
|
|
65
|
+
var $form = useForm(props);
|
|
66
|
+
var submit = function submit() {
|
|
67
|
+
var _formRef$value;
|
|
68
|
+
(_formRef$value = formRef.value) === null || _formRef$value === void 0 || _formRef$value.requestSubmit();
|
|
69
|
+
};
|
|
70
|
+
var register = function register(field, options) {
|
|
71
|
+
if (!(options !== null && options !== void 0 && options.novalidate)) {
|
|
72
|
+
var _$form$defineField = $form.defineField(field, options),
|
|
73
|
+
_$form$defineField2 = _slicedToArray(_$form$defineField, 2),
|
|
74
|
+
fieldProps = _$form$defineField2[1];
|
|
75
|
+
return fieldProps;
|
|
76
|
+
}
|
|
77
|
+
return {};
|
|
78
|
+
};
|
|
79
|
+
var onSubmit = $form.handleSubmit(function (e) {
|
|
80
|
+
emit('submit', e);
|
|
81
|
+
});
|
|
82
|
+
var onReset = $form.handleReset(function (e) {
|
|
83
|
+
emit('reset', e);
|
|
84
|
+
});
|
|
85
|
+
return _objectSpread({
|
|
86
|
+
formRef: formRef,
|
|
87
|
+
submit: submit,
|
|
88
|
+
register: register,
|
|
89
|
+
onSubmit: onSubmit,
|
|
90
|
+
onReset: onReset
|
|
91
|
+
}, omit($form, ['handleSubmit', 'handleReset']));
|
|
92
|
+
}
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
96
|
+
return openBlock(), createElementBlock("form", mergeProps({
|
|
97
|
+
ref: "formRef",
|
|
98
|
+
onSubmit: _cache[0] || (_cache[0] = withModifiers(function () {
|
|
99
|
+
return $setup.onSubmit && $setup.onSubmit.apply($setup, arguments);
|
|
100
|
+
}, ["prevent"])),
|
|
101
|
+
onReset: _cache[1] || (_cache[1] = withModifiers(function () {
|
|
102
|
+
return $setup.onReset && $setup.onReset.apply($setup, arguments);
|
|
103
|
+
}, ["prevent"])),
|
|
104
|
+
"class": _ctx.cx('root')
|
|
105
|
+
}, _ctx.ptmi('root')), [renderSlot(_ctx.$slots, "default", mergeProps({
|
|
106
|
+
register: $setup.register,
|
|
107
|
+
valid: _ctx.valid,
|
|
108
|
+
reset: _ctx.reset
|
|
109
|
+
}, _ctx.states))], 16);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
script.render = render;
|
|
113
|
+
|
|
114
|
+
export { script as default };
|
|
115
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/form/BaseForm.vue","../../src/form/Form.vue","../../src/form/Form.vue?vue&type=template&id=26f63129&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport FormStyle from '@primevue/forms/form/style';\n\nexport default {\n name: 'BaseForm',\n extends: BaseComponent,\n style: FormStyle,\n props: {\n resolver: {\n type: Function,\n default: null\n },\n initialValues: {\n type: Object,\n default: null\n },\n validateOnValueUpdate: {\n type: [Boolean, Array],\n default: true\n },\n validateOnBlur: {\n type: [Boolean, Array],\n default: false\n },\n validateOnMount: {\n type: [Boolean, Array],\n default: false\n },\n validateOnSubmit: {\n type: [Boolean, Array],\n default: true\n }\n },\n provide() {\n return {\n $pcForm: this,\n $parentInstance: this\n };\n }\n};\n</script>\n","<template>\n <form ref=\"formRef\" @submit.prevent=\"onSubmit\" @reset.prevent=\"onReset\" :class=\"cx('root')\" v-bind=\"ptmi('root')\">\n <slot :register :valid :reset v-bind=\"states\" />\n </form>\n</template>\n\n<script>\nimport { omit } from '@primeuix/utils';\nimport { useForm } from '@primevue/forms/useform';\nimport { ref } from 'vue';\nimport BaseForm from './BaseForm.vue';\n\nexport default {\n name: 'Form',\n extends: BaseForm,\n inheritAttrs: false,\n emits: ['submit', 'reset'],\n setup(props, { emit }) {\n const formRef = ref(null);\n const $form = useForm(props);\n\n const submit = () => {\n formRef.value?.requestSubmit();\n };\n\n const register = (field, options) => {\n if (!options?.novalidate) {\n const [, fieldProps] = $form.defineField(field, options);\n\n return fieldProps;\n }\n\n return {};\n };\n\n const onSubmit = $form.handleSubmit((e) => {\n emit('submit', e);\n });\n\n const onReset = $form.handleReset((e) => {\n emit('reset', e);\n });\n\n return {\n formRef,\n submit,\n register,\n onSubmit,\n onReset,\n ...omit($form, ['handleSubmit', 'handleReset'])\n };\n }\n};\n</script>\n","<template>\n <form ref=\"formRef\" @submit.prevent=\"onSubmit\" @reset.prevent=\"onReset\" :class=\"cx('root')\" v-bind=\"ptmi('root')\">\n <slot :register :valid :reset v-bind=\"states\" />\n </form>\n</template>\n\n<script>\nimport { omit } from '@primeuix/utils';\nimport { useForm } from '@primevue/forms/useform';\nimport { ref } from 'vue';\nimport BaseForm from './BaseForm.vue';\n\nexport default {\n name: 'Form',\n extends: BaseForm,\n inheritAttrs: false,\n emits: ['submit', 'reset'],\n setup(props, { emit }) {\n const formRef = ref(null);\n const $form = useForm(props);\n\n const submit = () => {\n formRef.value?.requestSubmit();\n };\n\n const register = (field, options) => {\n if (!options?.novalidate) {\n const [, fieldProps] = $form.defineField(field, options);\n\n return fieldProps;\n }\n\n return {};\n };\n\n const onSubmit = $form.handleSubmit((e) => {\n emit('submit', e);\n });\n\n const onReset = $form.handleReset((e) => {\n emit('reset', e);\n });\n\n return {\n formRef,\n submit,\n register,\n onSubmit,\n onReset,\n ...omit($form, ['handleSubmit', 'handleReset'])\n };\n }\n};\n</script>\n"],"names":["name","BaseComponent","style","FormStyle","props","resolver","type","Function","initialValues","Object","validateOnValueUpdate","Boolean","Array","validateOnBlur","validateOnMount","validateOnSubmit","provide","$pcForm","$parentInstance","BaseForm","inheritAttrs","emits","setup","_ref","emit","formRef","ref","$form","useForm","submit","_formRef$value","value","requestSubmit","register","field","options","novalidate","_$form$defineField","defineField","_$form$defineField2","_slicedToArray","fieldProps","onSubmit","handleSubmit","e","onReset","handleReset","_objectSpread","omit","_openBlock","_createElementBlock","_mergeProps","$setup","apply","arguments","_ctx","cx","ptmi","_renderSlot","valid","reset","states"],"mappings":"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"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
*
|
|
3
|
+
* [Live Demo](https://www.primevue.org/forms/)
|
|
4
|
+
*
|
|
5
|
+
* @module formstyle
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
import type { BaseStyle } from '@primevue/core/base/style';
|
|
9
|
+
|
|
10
|
+
export enum FormClasses {
|
|
11
|
+
/**
|
|
12
|
+
* The class of root element
|
|
13
|
+
*/
|
|
14
|
+
root = 'p-form'
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export interface FormStyle extends BaseStyle {}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import BaseStyle from '@primevue/core/base/style';
|
|
2
|
+
|
|
3
|
+
var classes = {
|
|
4
|
+
root: 'p-form p-component'
|
|
5
|
+
};
|
|
6
|
+
var FormStyle = BaseStyle.extend({
|
|
7
|
+
name: 'form',
|
|
8
|
+
classes: classes
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
export { FormStyle as default };
|
|
12
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../../src/form/style/FormStyle.js"],"sourcesContent":["import BaseStyle from '@primevue/core/base/style';\n\nconst classes = {\n root: 'p-form p-component'\n};\n\nexport default BaseStyle.extend({\n name: 'form',\n classes\n});\n"],"names":["classes","root","BaseStyle","extend","name"],"mappings":";;AAEA,IAAMA,OAAO,GAAG;AACZC,EAAAA,IAAI,EAAE;AACV,CAAC;AAED,gBAAeC,SAAS,CAACC,MAAM,CAAC;AAC5BC,EAAAA,IAAI,EAAE,MAAM;AACZJ,EAAAA,OAAO,EAAPA;AACJ,CAAC,CAAC;;;;"}
|