voc-lib-js 1.0.11 → 1.0.13
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/README.md +108 -20
- package/dist/main.d.mts +23 -5
- package/dist/main.d.ts +23 -5
- package/dist/main.global.js +1 -1
- package/dist/main.js +1 -1
- package/dist/main.mjs +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -76,32 +76,120 @@ onMounted(() => {
|
|
|
76
76
|
|
|
77
77
|
## EVENTS
|
|
78
78
|
|
|
79
|
-
|
|
79
|
+
The library emits an `onSubmit` event when the user submits the form. By default the library returns a `FormData` instance. If you prefer a plain object, call `getValues(false)` or convert the FormData yourself.
|
|
80
|
+
|
|
81
|
+
Basic example (FormData is returned by default):
|
|
80
82
|
|
|
81
83
|
```html
|
|
82
84
|
<script src="./../../dist/main.global.js"></script>
|
|
83
85
|
<script>
|
|
84
|
-
const formRendered = VocLibJs.FormsLib.renderForm("#render-form");
|
|
86
|
+
const formRendered = VocLibJs.FormsLib.renderForm("#render-form", jsonObject);
|
|
85
87
|
|
|
86
|
-
//
|
|
87
|
-
// the onSubmit will return the form data in object
|
|
88
|
+
// onSubmit receives the same type returned by getValues() — FormData by default
|
|
88
89
|
formRendered.onSubmit((data) => {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
*/
|
|
103
|
-
|
|
104
|
-
// Do something with the data
|
|
90
|
+
// `data` is a FormData instance
|
|
91
|
+
console.log(data.get('first_name'));
|
|
92
|
+
|
|
93
|
+
// Example: read all values for a multi-value field
|
|
94
|
+
console.log(data.getAll('hobbies'));
|
|
95
|
+
|
|
96
|
+
// For file inputs, FormData contains File objects
|
|
97
|
+
const file = data.get('upload'); // single File or null
|
|
98
|
+
const files = data.getAll('upload'); // array of File objects
|
|
99
|
+
|
|
100
|
+
// If you want a plain object instead of FormData, call getValues(false)
|
|
101
|
+
const obj = formRendered.getValues(false);
|
|
102
|
+
console.log(obj);
|
|
105
103
|
});
|
|
106
104
|
</script>
|
|
107
105
|
```
|
|
106
|
+
|
|
107
|
+
Example output (converted to a plain object for readability):
|
|
108
|
+
|
|
109
|
+
```js
|
|
110
|
+
{
|
|
111
|
+
first_name: 'John',
|
|
112
|
+
last_name: 'Doe',
|
|
113
|
+
username: 'johndoe',
|
|
114
|
+
email: 'john@example.com',
|
|
115
|
+
gender: 'male',
|
|
116
|
+
country: 'usa',
|
|
117
|
+
// file fields will contain File objects when using FormData
|
|
118
|
+
}
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
Notes
|
|
122
|
+
- FormData is convenient for uploads (it serializes files and other fields for multipart/form-data POSTs).
|
|
123
|
+
- Use `getValues(false)` to receive a plain object where repeated keys become arrays and File objects are left as File instances.
|
|
124
|
+
- Placeholders and default values are supported via the field schema (`placeholder` and `default`). File inputs cannot be prefilled by the browser for security reasons.
|
|
125
|
+
|
|
126
|
+
# Options
|
|
127
|
+
|
|
128
|
+
## Form Name (optional)
|
|
129
|
+
|
|
130
|
+
This will be the title of the form. If this property is provided it will show up in the top of the form as a title.
|
|
131
|
+
|
|
132
|
+
```json
|
|
133
|
+
{
|
|
134
|
+
"form_name": "User Registration",
|
|
135
|
+
...
|
|
136
|
+
}
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
This will generate a h2 tag inside the form as an h2 tag.
|
|
140
|
+
|
|
141
|
+
```html
|
|
142
|
+
<h2>User Registration</h2>
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
## Fields
|
|
146
|
+
|
|
147
|
+
This fields are the fields of the form. This is an array of objects.
|
|
148
|
+
|
|
149
|
+
example
|
|
150
|
+
|
|
151
|
+
```json
|
|
152
|
+
{
|
|
153
|
+
...
|
|
154
|
+
"fields": [
|
|
155
|
+
{
|
|
156
|
+
"label": "First Name",
|
|
157
|
+
"key": "first_name",
|
|
158
|
+
"type": "text",
|
|
159
|
+
"required": true
|
|
160
|
+
},
|
|
161
|
+
{
|
|
162
|
+
"label": "Last Name",
|
|
163
|
+
"key": "last_name",
|
|
164
|
+
"type": "text",
|
|
165
|
+
"required": true
|
|
166
|
+
},
|
|
167
|
+
...
|
|
168
|
+
]
|
|
169
|
+
}
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
### Field Options
|
|
173
|
+
|
|
174
|
+
- label: string - the label of the field
|
|
175
|
+
- key: string - the key of the field this will be used as the name of the input as well
|
|
176
|
+
- type: string - the type of the field
|
|
177
|
+
- text
|
|
178
|
+
- email
|
|
179
|
+
- password
|
|
180
|
+
- textarea
|
|
181
|
+
- radio
|
|
182
|
+
- select
|
|
183
|
+
- row - this will contain an array of fields. Row will be rendered in a horizontal layout.
|
|
184
|
+
- required: boolean
|
|
185
|
+
- validation: object
|
|
186
|
+
- hint_text: string - shows a small text just bellow the input field
|
|
187
|
+
- direction: string - horizontal or vertical - this mostly works when type is `row`, `radio`, or `checkbox` this will be the direction of the row.
|
|
188
|
+
- items: array - this will be used when type is `row`. the array contains object of fields.
|
|
189
|
+
- options: array - this will be used when type is `radio` or `select`. the array contains object of options.
|
|
190
|
+
- label: string - the label of the option
|
|
191
|
+
- value: string - the value of the option
|
|
192
|
+
- validation: object
|
|
193
|
+
- min_length: number
|
|
194
|
+
- max_length: number
|
|
195
|
+
- regex: string
|
package/dist/main.d.mts
CHANGED
|
@@ -9,7 +9,9 @@ type Option = {
|
|
|
9
9
|
};
|
|
10
10
|
type BaseField = {
|
|
11
11
|
label?: string;
|
|
12
|
-
key
|
|
12
|
+
key: string;
|
|
13
|
+
placeholder?: string;
|
|
14
|
+
name?: string;
|
|
13
15
|
type?: string;
|
|
14
16
|
required?: boolean;
|
|
15
17
|
validation?: Validation;
|
|
@@ -17,6 +19,9 @@ type BaseField = {
|
|
|
17
19
|
direction?: "horizontal" | "vertical";
|
|
18
20
|
options?: Option[];
|
|
19
21
|
default?: string;
|
|
22
|
+
width?: string;
|
|
23
|
+
accept?: string;
|
|
24
|
+
multiple?: boolean;
|
|
20
25
|
description?: string;
|
|
21
26
|
};
|
|
22
27
|
type RowField = {
|
|
@@ -31,23 +36,36 @@ type FormData = {
|
|
|
31
36
|
id: string;
|
|
32
37
|
code: string;
|
|
33
38
|
form_name: string;
|
|
39
|
+
default_values?: Record<string, any>;
|
|
34
40
|
fields: Field[];
|
|
35
41
|
};
|
|
42
|
+
type SubmitConfig = {
|
|
43
|
+
api_endpoint?: string;
|
|
44
|
+
method?: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
|
|
45
|
+
api_key?: string;
|
|
46
|
+
headers?: Record<string, string>;
|
|
47
|
+
body?: Record<string, any> | FormData;
|
|
48
|
+
contentType?: string | null;
|
|
49
|
+
credentials?: "omit" | "same-origin" | "include";
|
|
50
|
+
timeoutMs?: number;
|
|
51
|
+
signal?: AbortSignal;
|
|
52
|
+
responseType?: "json" | "text" | "blob" | "arrayBuffer";
|
|
53
|
+
retries?: number;
|
|
54
|
+
};
|
|
36
55
|
interface RenderedForm {
|
|
37
56
|
element: HTMLFormElement;
|
|
38
57
|
validate: () => Array<{
|
|
39
58
|
element: HTMLElement;
|
|
40
59
|
message: string;
|
|
41
60
|
}>;
|
|
42
|
-
getValues: () =>
|
|
43
|
-
|
|
44
|
-
};
|
|
45
|
-
onSubmit: (callback: (data: any, event: Event) => void) => void;
|
|
61
|
+
getValues: (asFormData?: boolean) => globalThis.FormData | Record<string, any>;
|
|
62
|
+
onSubmit: (callback: (data: globalThis.FormData | Record<string, any>, event: Event) => void) => void;
|
|
46
63
|
}
|
|
47
64
|
declare function renderForm(element: string | HTMLElement, data: FormData, options?: {
|
|
48
65
|
onSubmit?: (result: any, error?: any) => void;
|
|
49
66
|
enableAutoSubmit?: boolean;
|
|
50
67
|
style?: "bootstrap" | undefined | null;
|
|
68
|
+
submitConfig?: SubmitConfig;
|
|
51
69
|
}): RenderedForm | null;
|
|
52
70
|
|
|
53
71
|
declare const FormsLib: {
|
package/dist/main.d.ts
CHANGED
|
@@ -9,7 +9,9 @@ type Option = {
|
|
|
9
9
|
};
|
|
10
10
|
type BaseField = {
|
|
11
11
|
label?: string;
|
|
12
|
-
key
|
|
12
|
+
key: string;
|
|
13
|
+
placeholder?: string;
|
|
14
|
+
name?: string;
|
|
13
15
|
type?: string;
|
|
14
16
|
required?: boolean;
|
|
15
17
|
validation?: Validation;
|
|
@@ -17,6 +19,9 @@ type BaseField = {
|
|
|
17
19
|
direction?: "horizontal" | "vertical";
|
|
18
20
|
options?: Option[];
|
|
19
21
|
default?: string;
|
|
22
|
+
width?: string;
|
|
23
|
+
accept?: string;
|
|
24
|
+
multiple?: boolean;
|
|
20
25
|
description?: string;
|
|
21
26
|
};
|
|
22
27
|
type RowField = {
|
|
@@ -31,23 +36,36 @@ type FormData = {
|
|
|
31
36
|
id: string;
|
|
32
37
|
code: string;
|
|
33
38
|
form_name: string;
|
|
39
|
+
default_values?: Record<string, any>;
|
|
34
40
|
fields: Field[];
|
|
35
41
|
};
|
|
42
|
+
type SubmitConfig = {
|
|
43
|
+
api_endpoint?: string;
|
|
44
|
+
method?: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
|
|
45
|
+
api_key?: string;
|
|
46
|
+
headers?: Record<string, string>;
|
|
47
|
+
body?: Record<string, any> | FormData;
|
|
48
|
+
contentType?: string | null;
|
|
49
|
+
credentials?: "omit" | "same-origin" | "include";
|
|
50
|
+
timeoutMs?: number;
|
|
51
|
+
signal?: AbortSignal;
|
|
52
|
+
responseType?: "json" | "text" | "blob" | "arrayBuffer";
|
|
53
|
+
retries?: number;
|
|
54
|
+
};
|
|
36
55
|
interface RenderedForm {
|
|
37
56
|
element: HTMLFormElement;
|
|
38
57
|
validate: () => Array<{
|
|
39
58
|
element: HTMLElement;
|
|
40
59
|
message: string;
|
|
41
60
|
}>;
|
|
42
|
-
getValues: () =>
|
|
43
|
-
|
|
44
|
-
};
|
|
45
|
-
onSubmit: (callback: (data: any, event: Event) => void) => void;
|
|
61
|
+
getValues: (asFormData?: boolean) => globalThis.FormData | Record<string, any>;
|
|
62
|
+
onSubmit: (callback: (data: globalThis.FormData | Record<string, any>, event: Event) => void) => void;
|
|
46
63
|
}
|
|
47
64
|
declare function renderForm(element: string | HTMLElement, data: FormData, options?: {
|
|
48
65
|
onSubmit?: (result: any, error?: any) => void;
|
|
49
66
|
enableAutoSubmit?: boolean;
|
|
50
67
|
style?: "bootstrap" | undefined | null;
|
|
68
|
+
submitConfig?: SubmitConfig;
|
|
51
69
|
}): RenderedForm | null;
|
|
52
70
|
|
|
53
71
|
declare const FormsLib: {
|
package/dist/main.global.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var VocLibJs=(()=>{var
|
|
1
|
+
"use strict";var VocLibJs=(()=>{var x=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var M=Object.prototype.hasOwnProperty;var H=(p,c)=>{for(var h in c)x(p,h,{get:c[h],enumerable:!0})},q=(p,c,h,l)=>{if(c&&typeof c=="object"||typeof c=="function")for(let f of A(c))!M.call(p,f)&&f!==h&&x(p,f,{get:()=>c[f],enumerable:!(l=T(c,f))||l.enumerable});return p};var S=p=>q(x({},"__esModule",{value:!0}),p);var N={};H(N,{FormsLib:()=>_,default:()=>D});function L(p,c=!0){let h=new FormData(p);if(c)return h;let l={};return h.forEach((f,m)=>{let a=(f instanceof File,f);Object.prototype.hasOwnProperty.call(l,m)?Array.isArray(l[m])?l[m].push(a):l[m]=[l[m],a]:l[m]=a}),l}function C(p,c,h){let l=[];if(typeof p=="string"?l=Array.from(document.querySelectorAll(p)):l=[p],l.length===0)return null;function f(){let a=h?.style==="bootstrap",u=document.createElement("form");u.classList.add("voc-form"),a&&u.classList.add("needs-validation"),u.id=c.id;let v=document.createElement("h2");v.textContent=c.form_name,u.appendChild(v);function E(e,i){i&&(i.min_length!==void 0&&(e.minLength=i.min_length),i.max_length!==void 0&&(e.maxLength=i.max_length),i.regex&&(e instanceof HTMLInputElement?e.pattern=i.regex:e.dataset.pattern=i.regex))}function F(e){if(!e.key&&!e.label)return null;let i=c.default_values||{},g=e.name||e.key,r=g?i[g]:void 0,y=document.createElement("div");if(y.className="voc-form-group",a&&y.classList.add("mb-3"),e.label){let t=document.createElement("label");t.classList.add("voc-form-label"),a&&t.classList.add("form-label"),e.key?e.type==="radio"?t.htmlFor="":t.htmlFor=`voc-form-${e.key}`:t.htmlFor="",t.textContent=e.label+(e.required?" *":""),y.appendChild(t)}let b=null;switch(e.type){case"checkbox":{let t=document.createElement("div");if(t.className="voc-form-checkbox-group "+(e.direction||"vertical"),e.width&&(t.style.width=e.width),e.options)e.options.forEach((n,s)=>{let d=document.createElement("label");d.classList.add("voc-form-checkbox-label"),a&&d.classList.add("form-check"),d.style.display=e.direction==="horizontal"?"inline-block":"block",e.width&&(d.style.width=e.width);let o=document.createElement("input");o.type="checkbox",o.classList.add("voc-form-checkbox"),a&&o.classList.add("form-check-input"),o.name=e.name||e.key||"",o.value=n.value,e.key&&(o.id=`voc-form-${e.key}-${s}`),e.required&&(o.required=!0),Array.isArray(r)?r.includes(n.value)&&(o.checked=!0):r!==void 0?r===n.value&&(o.checked=!0):e.default===n.value&&(o.checked=!0),d.appendChild(o),d.appendChild(document.createTextNode(n.label)),t.appendChild(d)});else{let n=document.createElement("label");n.classList.add("voc-form-checkbox-label"),a&&n.classList.add("form-check"),e.width&&(n.style.width=e.width);let s=document.createElement("input");s.type="checkbox",s.classList.add("voc-form-checkbox"),(e.key||e.name)&&(s.name=e.name||e.key,e.key&&(s.id=`voc-form-${e.key}`)),a&&s.classList.add("form-check-input"),e.required&&(s.required=!0),r!==void 0?s.checked=!!r:e.default&&(s.checked=!!e.default),n.appendChild(s),n.appendChild(document.createTextNode(e.label||"")),t.appendChild(n)}b=t;break}case"textarea":{let t=document.createElement("textarea");t.classList.add("voc-form-textarea"),a&&t.classList.add("form-control"),(e.key||e.name)&&(t.name=e.name||e.key,e.key&&(t.id=`voc-form-${e.key}`)),e.placeholder&&(t.placeholder=e.placeholder),r!=null?t.value=String(r):e.default!==void 0&&e.default!==null&&(t.value=String(e.default)),e.width&&(t.style.width=e.width),e.required&&(t.required=!0),E(t,e.validation),b=t;break}case"select":{let t=document.createElement("select");if(t.classList.add("voc-form-select"),a&&t.classList.add("form-select"),(e.key||e.name)&&(t.name=e.name||e.key,e.key&&(t.id=`voc-form-${e.key}`)),e.placeholder){let n=document.createElement("option");n.value="",n.textContent=e.placeholder,n.disabled=!0,n.selected=!0,t.appendChild(n)}e.required&&(t.required=!0),e.options&&e.options.forEach(n=>{let s=document.createElement("option");s.value=n.value,s.textContent=n.label,Array.isArray(r)?r.includes(n.value)&&(s.selected=!0):r!==void 0?r===n.value&&(s.selected=!0):e.default===n.value&&(s.selected=!0),t.appendChild(s)}),e.width&&(t.style.width=e.width),b=t;break}case"radio":{let t=document.createElement("div");t.className="voc-form-radio-group "+(e.direction||"vertical"),e.width&&(t.style.width=e.width),e.options&&e.options.forEach((n,s)=>{let d=document.createElement("label");d.classList.add("voc-form-radio-label"),a&&d.classList.add("form-check"),d.style.display=e.direction==="horizontal"?"inline-block":"block",e.width&&(d.style.width=e.width);let o=document.createElement("input");o.type="radio",o.classList.add("voc-form-radio"),a&&o.classList.add("form-check-input"),o.name=e.name||e.key||"",o.value=n.value,e.key&&(o.id=`voc-form-${e.key}-${s}`),Array.isArray(r)?r.includes(n.value)&&(o.checked=!0):r!==void 0?r===n.value&&(o.checked=!0):e.default===n.value&&(o.checked=!0),d.appendChild(o),d.appendChild(document.createTextNode(n.label)),t.appendChild(d)}),b=t;break}case"file":{let t=document.createElement("div");t.className="voc-form-file-wrapper",e.width&&(t.style.width=e.width);let n=document.createElement("input");n.type="file",n.classList.add("voc-form-file"),a&&n.classList.add("form-control"),(e.key||e.name)&&(n.name=e.name||e.key,e.key&&(n.id=`voc-form-${e.key}`)),e.width&&(n.style.width=e.width),e.required&&(n.required=!0),e.accept&&(n.accept=e.accept),e.multiple&&(n.multiple=!0),t.appendChild(n),b=t;break}default:{let t=document.createElement("input");t.type=e.type||"text",t.classList.add("voc-form-input"),a&&t.classList.add("form-control"),(e.key||e.name)&&(t.name=e.name||e.key,e.key&&(t.id=`voc-form-${e.key}`)),e.placeholder&&(t.placeholder=e.placeholder),r!=null?t.value=String(r):e.default!==void 0&&e.default!==null&&(t.value=String(e.default)),e.width&&(t.style.width=e.width),e.required&&(t.required=!0),E(t,e.validation),b=t;break}}if(b&&y.appendChild(b),e.hint_text){let t=document.createElement("small");t.className="voc-form-hint",t.textContent=e.hint_text,y.appendChild(t)}return y}c.fields.forEach(e=>{if(e.type==="row"&&"items"in e){let i=document.createElement("div");if(i.className="voc-form-group voc-form-row",a&&i.classList.add("mb-3"),e.label){let r=document.createElement("h3");r.className="voc-form-row-label",r.textContent=e.label,i.appendChild(r)}if(e.description){let r=document.createElement("p");r.className="voc-form-row-description",r.textContent=e.description,i.appendChild(r)}let g=document.createElement("div");g.className="voc-form-row-items "+(e.direction||"horizontal"),i.appendChild(g),e.items.forEach(r=>{let y=F(r);y&&g.appendChild(y)}),u.appendChild(i)}else{let i=F(e);i&&u.appendChild(i)}});let k=document.createElement("button");return k.type="submit",k.className="voc-form-submit",k.textContent="Submit",a&&k.classList.add("btn","btn-primary"),u.appendChild(k),u}let m=f();return l[0].appendChild(m),h&&h.submitConfig&&m.addEventListener("submit",a=>{a.preventDefault();let u=L(m);console.log(u)}),{element:m,validate:()=>{let a=[];return m.querySelectorAll(":invalid").forEach(v=>{let E=v.validationMessage;a.push({element:v,message:E})}),a},getValues:()=>L(m),onSubmit:a=>{m.addEventListener("submit",u=>{u.preventDefault();let v=L(m);a(v,u)})}}}var w={renderForm:C};var _=w,D={FormsLib:w};return S(N);})();
|
package/dist/main.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var x=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var M=Object.prototype.hasOwnProperty;var H=(p,c)=>{for(var h in c)x(p,h,{get:c[h],enumerable:!0})},q=(p,c,h,l)=>{if(c&&typeof c=="object"||typeof c=="function")for(let f of A(c))!M.call(p,f)&&f!==h&&x(p,f,{get:()=>c[f],enumerable:!(l=T(c,f))||l.enumerable});return p};var S=p=>q(x({},"__esModule",{value:!0}),p);var N={};H(N,{FormsLib:()=>_,default:()=>D});module.exports=S(N);function L(p,c=!0){let h=new FormData(p);if(c)return h;let l={};return h.forEach((f,m)=>{let a=(f instanceof File,f);Object.prototype.hasOwnProperty.call(l,m)?Array.isArray(l[m])?l[m].push(a):l[m]=[l[m],a]:l[m]=a}),l}function C(p,c,h){let l=[];if(typeof p=="string"?l=Array.from(document.querySelectorAll(p)):l=[p],l.length===0)return null;function f(){let a=h?.style==="bootstrap",u=document.createElement("form");u.classList.add("voc-form"),a&&u.classList.add("needs-validation"),u.id=c.id;let v=document.createElement("h2");v.textContent=c.form_name,u.appendChild(v);function E(e,i){i&&(i.min_length!==void 0&&(e.minLength=i.min_length),i.max_length!==void 0&&(e.maxLength=i.max_length),i.regex&&(e instanceof HTMLInputElement?e.pattern=i.regex:e.dataset.pattern=i.regex))}function F(e){if(!e.key&&!e.label)return null;let i=c.default_values||{},g=e.name||e.key,r=g?i[g]:void 0,y=document.createElement("div");if(y.className="voc-form-group",a&&y.classList.add("mb-3"),e.label){let t=document.createElement("label");t.classList.add("voc-form-label"),a&&t.classList.add("form-label"),e.key?e.type==="radio"?t.htmlFor="":t.htmlFor=`voc-form-${e.key}`:t.htmlFor="",t.textContent=e.label+(e.required?" *":""),y.appendChild(t)}let b=null;switch(e.type){case"checkbox":{let t=document.createElement("div");if(t.className="voc-form-checkbox-group "+(e.direction||"vertical"),e.width&&(t.style.width=e.width),e.options)e.options.forEach((n,s)=>{let d=document.createElement("label");d.classList.add("voc-form-checkbox-label"),a&&d.classList.add("form-check"),d.style.display=e.direction==="horizontal"?"inline-block":"block",e.width&&(d.style.width=e.width);let o=document.createElement("input");o.type="checkbox",o.classList.add("voc-form-checkbox"),a&&o.classList.add("form-check-input"),o.name=e.name||e.key||"",o.value=n.value,e.key&&(o.id=`voc-form-${e.key}-${s}`),e.required&&(o.required=!0),Array.isArray(r)?r.includes(n.value)&&(o.checked=!0):r!==void 0?r===n.value&&(o.checked=!0):e.default===n.value&&(o.checked=!0),d.appendChild(o),d.appendChild(document.createTextNode(n.label)),t.appendChild(d)});else{let n=document.createElement("label");n.classList.add("voc-form-checkbox-label"),a&&n.classList.add("form-check"),e.width&&(n.style.width=e.width);let s=document.createElement("input");s.type="checkbox",s.classList.add("voc-form-checkbox"),(e.key||e.name)&&(s.name=e.name||e.key,e.key&&(s.id=`voc-form-${e.key}`)),a&&s.classList.add("form-check-input"),e.required&&(s.required=!0),r!==void 0?s.checked=!!r:e.default&&(s.checked=!!e.default),n.appendChild(s),n.appendChild(document.createTextNode(e.label||"")),t.appendChild(n)}b=t;break}case"textarea":{let t=document.createElement("textarea");t.classList.add("voc-form-textarea"),a&&t.classList.add("form-control"),(e.key||e.name)&&(t.name=e.name||e.key,e.key&&(t.id=`voc-form-${e.key}`)),e.placeholder&&(t.placeholder=e.placeholder),r!=null?t.value=String(r):e.default!==void 0&&e.default!==null&&(t.value=String(e.default)),e.width&&(t.style.width=e.width),e.required&&(t.required=!0),E(t,e.validation),b=t;break}case"select":{let t=document.createElement("select");if(t.classList.add("voc-form-select"),a&&t.classList.add("form-select"),(e.key||e.name)&&(t.name=e.name||e.key,e.key&&(t.id=`voc-form-${e.key}`)),e.placeholder){let n=document.createElement("option");n.value="",n.textContent=e.placeholder,n.disabled=!0,n.selected=!0,t.appendChild(n)}e.required&&(t.required=!0),e.options&&e.options.forEach(n=>{let s=document.createElement("option");s.value=n.value,s.textContent=n.label,Array.isArray(r)?r.includes(n.value)&&(s.selected=!0):r!==void 0?r===n.value&&(s.selected=!0):e.default===n.value&&(s.selected=!0),t.appendChild(s)}),e.width&&(t.style.width=e.width),b=t;break}case"radio":{let t=document.createElement("div");t.className="voc-form-radio-group "+(e.direction||"vertical"),e.width&&(t.style.width=e.width),e.options&&e.options.forEach((n,s)=>{let d=document.createElement("label");d.classList.add("voc-form-radio-label"),a&&d.classList.add("form-check"),d.style.display=e.direction==="horizontal"?"inline-block":"block",e.width&&(d.style.width=e.width);let o=document.createElement("input");o.type="radio",o.classList.add("voc-form-radio"),a&&o.classList.add("form-check-input"),o.name=e.name||e.key||"",o.value=n.value,e.key&&(o.id=`voc-form-${e.key}-${s}`),Array.isArray(r)?r.includes(n.value)&&(o.checked=!0):r!==void 0?r===n.value&&(o.checked=!0):e.default===n.value&&(o.checked=!0),d.appendChild(o),d.appendChild(document.createTextNode(n.label)),t.appendChild(d)}),b=t;break}case"file":{let t=document.createElement("div");t.className="voc-form-file-wrapper",e.width&&(t.style.width=e.width);let n=document.createElement("input");n.type="file",n.classList.add("voc-form-file"),a&&n.classList.add("form-control"),(e.key||e.name)&&(n.name=e.name||e.key,e.key&&(n.id=`voc-form-${e.key}`)),e.width&&(n.style.width=e.width),e.required&&(n.required=!0),e.accept&&(n.accept=e.accept),e.multiple&&(n.multiple=!0),t.appendChild(n),b=t;break}default:{let t=document.createElement("input");t.type=e.type||"text",t.classList.add("voc-form-input"),a&&t.classList.add("form-control"),(e.key||e.name)&&(t.name=e.name||e.key,e.key&&(t.id=`voc-form-${e.key}`)),e.placeholder&&(t.placeholder=e.placeholder),r!=null?t.value=String(r):e.default!==void 0&&e.default!==null&&(t.value=String(e.default)),e.width&&(t.style.width=e.width),e.required&&(t.required=!0),E(t,e.validation),b=t;break}}if(b&&y.appendChild(b),e.hint_text){let t=document.createElement("small");t.className="voc-form-hint",t.textContent=e.hint_text,y.appendChild(t)}return y}c.fields.forEach(e=>{if(e.type==="row"&&"items"in e){let i=document.createElement("div");if(i.className="voc-form-group voc-form-row",a&&i.classList.add("mb-3"),e.label){let r=document.createElement("h3");r.className="voc-form-row-label",r.textContent=e.label,i.appendChild(r)}if(e.description){let r=document.createElement("p");r.className="voc-form-row-description",r.textContent=e.description,i.appendChild(r)}let g=document.createElement("div");g.className="voc-form-row-items "+(e.direction||"horizontal"),i.appendChild(g),e.items.forEach(r=>{let y=F(r);y&&g.appendChild(y)}),u.appendChild(i)}else{let i=F(e);i&&u.appendChild(i)}});let k=document.createElement("button");return k.type="submit",k.className="voc-form-submit",k.textContent="Submit",a&&k.classList.add("btn","btn-primary"),u.appendChild(k),u}let m=f();return l[0].appendChild(m),h&&h.submitConfig&&m.addEventListener("submit",a=>{a.preventDefault();let u=L(m);console.log(u)}),{element:m,validate:()=>{let a=[];return m.querySelectorAll(":invalid").forEach(v=>{let E=v.validationMessage;a.push({element:v,message:E})}),a},getValues:()=>L(m),onSubmit:a=>{m.addEventListener("submit",u=>{u.preventDefault();let v=L(m);a(v,u)})}}}var w={renderForm:C};var _=w,D={FormsLib:w};0&&(module.exports={FormsLib});
|
package/dist/main.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
function
|
|
1
|
+
function L(v,f=!0){let y=new FormData(v);if(f)return y;let d={};return y.forEach((g,c)=>{let a=(g instanceof File,g);Object.prototype.hasOwnProperty.call(d,c)?Array.isArray(d[c])?d[c].push(a):d[c]=[d[c],a]:d[c]=a}),d}function F(v,f,y){let d=[];if(typeof v=="string"?d=Array.from(document.querySelectorAll(v)):d=[v],d.length===0)return null;function g(){let a=y?.style==="bootstrap",m=document.createElement("form");m.classList.add("voc-form"),a&&m.classList.add("needs-validation"),m.id=f.id;let h=document.createElement("h2");h.textContent=f.form_name,m.appendChild(h);function E(e,i){i&&(i.min_length!==void 0&&(e.minLength=i.min_length),i.max_length!==void 0&&(e.maxLength=i.max_length),i.regex&&(e instanceof HTMLInputElement?e.pattern=i.regex:e.dataset.pattern=i.regex))}function w(e){if(!e.key&&!e.label)return null;let i=f.default_values||{},b=e.name||e.key,r=b?i[b]:void 0,u=document.createElement("div");if(u.className="voc-form-group",a&&u.classList.add("mb-3"),e.label){let t=document.createElement("label");t.classList.add("voc-form-label"),a&&t.classList.add("form-label"),e.key?e.type==="radio"?t.htmlFor="":t.htmlFor=`voc-form-${e.key}`:t.htmlFor="",t.textContent=e.label+(e.required?" *":""),u.appendChild(t)}let p=null;switch(e.type){case"checkbox":{let t=document.createElement("div");if(t.className="voc-form-checkbox-group "+(e.direction||"vertical"),e.width&&(t.style.width=e.width),e.options)e.options.forEach((n,s)=>{let l=document.createElement("label");l.classList.add("voc-form-checkbox-label"),a&&l.classList.add("form-check"),l.style.display=e.direction==="horizontal"?"inline-block":"block",e.width&&(l.style.width=e.width);let o=document.createElement("input");o.type="checkbox",o.classList.add("voc-form-checkbox"),a&&o.classList.add("form-check-input"),o.name=e.name||e.key||"",o.value=n.value,e.key&&(o.id=`voc-form-${e.key}-${s}`),e.required&&(o.required=!0),Array.isArray(r)?r.includes(n.value)&&(o.checked=!0):r!==void 0?r===n.value&&(o.checked=!0):e.default===n.value&&(o.checked=!0),l.appendChild(o),l.appendChild(document.createTextNode(n.label)),t.appendChild(l)});else{let n=document.createElement("label");n.classList.add("voc-form-checkbox-label"),a&&n.classList.add("form-check"),e.width&&(n.style.width=e.width);let s=document.createElement("input");s.type="checkbox",s.classList.add("voc-form-checkbox"),(e.key||e.name)&&(s.name=e.name||e.key,e.key&&(s.id=`voc-form-${e.key}`)),a&&s.classList.add("form-check-input"),e.required&&(s.required=!0),r!==void 0?s.checked=!!r:e.default&&(s.checked=!!e.default),n.appendChild(s),n.appendChild(document.createTextNode(e.label||"")),t.appendChild(n)}p=t;break}case"textarea":{let t=document.createElement("textarea");t.classList.add("voc-form-textarea"),a&&t.classList.add("form-control"),(e.key||e.name)&&(t.name=e.name||e.key,e.key&&(t.id=`voc-form-${e.key}`)),e.placeholder&&(t.placeholder=e.placeholder),r!=null?t.value=String(r):e.default!==void 0&&e.default!==null&&(t.value=String(e.default)),e.width&&(t.style.width=e.width),e.required&&(t.required=!0),E(t,e.validation),p=t;break}case"select":{let t=document.createElement("select");if(t.classList.add("voc-form-select"),a&&t.classList.add("form-select"),(e.key||e.name)&&(t.name=e.name||e.key,e.key&&(t.id=`voc-form-${e.key}`)),e.placeholder){let n=document.createElement("option");n.value="",n.textContent=e.placeholder,n.disabled=!0,n.selected=!0,t.appendChild(n)}e.required&&(t.required=!0),e.options&&e.options.forEach(n=>{let s=document.createElement("option");s.value=n.value,s.textContent=n.label,Array.isArray(r)?r.includes(n.value)&&(s.selected=!0):r!==void 0?r===n.value&&(s.selected=!0):e.default===n.value&&(s.selected=!0),t.appendChild(s)}),e.width&&(t.style.width=e.width),p=t;break}case"radio":{let t=document.createElement("div");t.className="voc-form-radio-group "+(e.direction||"vertical"),e.width&&(t.style.width=e.width),e.options&&e.options.forEach((n,s)=>{let l=document.createElement("label");l.classList.add("voc-form-radio-label"),a&&l.classList.add("form-check"),l.style.display=e.direction==="horizontal"?"inline-block":"block",e.width&&(l.style.width=e.width);let o=document.createElement("input");o.type="radio",o.classList.add("voc-form-radio"),a&&o.classList.add("form-check-input"),o.name=e.name||e.key||"",o.value=n.value,e.key&&(o.id=`voc-form-${e.key}-${s}`),Array.isArray(r)?r.includes(n.value)&&(o.checked=!0):r!==void 0?r===n.value&&(o.checked=!0):e.default===n.value&&(o.checked=!0),l.appendChild(o),l.appendChild(document.createTextNode(n.label)),t.appendChild(l)}),p=t;break}case"file":{let t=document.createElement("div");t.className="voc-form-file-wrapper",e.width&&(t.style.width=e.width);let n=document.createElement("input");n.type="file",n.classList.add("voc-form-file"),a&&n.classList.add("form-control"),(e.key||e.name)&&(n.name=e.name||e.key,e.key&&(n.id=`voc-form-${e.key}`)),e.width&&(n.style.width=e.width),e.required&&(n.required=!0),e.accept&&(n.accept=e.accept),e.multiple&&(n.multiple=!0),t.appendChild(n),p=t;break}default:{let t=document.createElement("input");t.type=e.type||"text",t.classList.add("voc-form-input"),a&&t.classList.add("form-control"),(e.key||e.name)&&(t.name=e.name||e.key,e.key&&(t.id=`voc-form-${e.key}`)),e.placeholder&&(t.placeholder=e.placeholder),r!=null?t.value=String(r):e.default!==void 0&&e.default!==null&&(t.value=String(e.default)),e.width&&(t.style.width=e.width),e.required&&(t.required=!0),E(t,e.validation),p=t;break}}if(p&&u.appendChild(p),e.hint_text){let t=document.createElement("small");t.className="voc-form-hint",t.textContent=e.hint_text,u.appendChild(t)}return u}f.fields.forEach(e=>{if(e.type==="row"&&"items"in e){let i=document.createElement("div");if(i.className="voc-form-group voc-form-row",a&&i.classList.add("mb-3"),e.label){let r=document.createElement("h3");r.className="voc-form-row-label",r.textContent=e.label,i.appendChild(r)}if(e.description){let r=document.createElement("p");r.className="voc-form-row-description",r.textContent=e.description,i.appendChild(r)}let b=document.createElement("div");b.className="voc-form-row-items "+(e.direction||"horizontal"),i.appendChild(b),e.items.forEach(r=>{let u=w(r);u&&b.appendChild(u)}),m.appendChild(i)}else{let i=w(e);i&&m.appendChild(i)}});let k=document.createElement("button");return k.type="submit",k.className="voc-form-submit",k.textContent="Submit",a&&k.classList.add("btn","btn-primary"),m.appendChild(k),m}let c=g();return d[0].appendChild(c),y&&y.submitConfig&&c.addEventListener("submit",a=>{a.preventDefault();let m=L(c);console.log(m)}),{element:c,validate:()=>{let a=[];return c.querySelectorAll(":invalid").forEach(h=>{let E=h.validationMessage;a.push({element:h,message:E})}),a},getValues:()=>L(c),onSubmit:a=>{c.addEventListener("submit",m=>{m.preventDefault();let h=L(c);a(h,m)})}}}var x={renderForm:F};var S=x,_={FormsLib:x};export{S as FormsLib,_ as default};
|