voc-lib-js 1.0.8 → 1.0.10

package/README.md

@@ -1,19 +1,107 @@
 # Vocphone JavaScript Library
+
 This is a JavaScript library for [VocPhone](https://vocphone.com).
 
 ## Setup
+
 ```bash
 npm install
 ```
 
 ## Usage
+
+## CDN
+
+This is how to use the package from the CDN.
+
+### CommonJS
+
+```html
+<div id="render-form"></div>
+
+<script src="https://cdn.jsdelivr.net/npm/voc-lib-js@latest/dist/main.global.js"></script>
+<script>
+    VocLibJs.FormsLib.renderForm("#render-form", object);
+</script>
+```
+
+### Module
+
+```html
+<div id="the-form"></div>
+<script type="module">
+    import { FormsLib } from "https://cdn.jsdelivr.net/npm/voc-lib-js@latest/dist/main.mjs";
+
+    const form = FormsLib.renderForm("#the-form", jsonObject);
+</script>
+```
+
+## Node
+
+We can also use the package on any frontend framework like React, Angular, Vue, or vanilla.
+
 ### Installation
+
 ```bash
+
 npm install voc-lib-js
 ```
 
-### Import
-```javascript
-import { Vocphone } from "voc-lib-js";
-const vocphone = new Vocphone();
-```
+### Usage
+
+Example using Vue, this will work with any frontend framework
+
+```vue
+<script setup>
+import { onMounted, ref } from "vue";
+import { FormsLib } from "voc-lib-js";
+
+const form = ref(null);
+
+onMounted(() => {
+    // the jsonObject we fetch the schema from the database
+    form.value = FormsLib.renderForm("#render-form", jsonObject);
+
+    const values = form.value.getValues();
+    console.log("Initial form values:", values);
+});
+</script>
+
+<template>
+    <main>
+        <div id="render-form"></div>
+    </main>
+</template>
+```
+
+## EVENTS
+
+We have a onSubmit event that when user clicked on the submit button it will return the data from the form.
+
+```html
+<script src="./../../dist/main.global.js"></script>
+<script>
+    const formRendered = VocLibJs.FormsLib.renderForm("#render-form");
+
+    // Listen for the submit event
+    // the onSubmit will return the form data in object
+    formRendered.onSubmit((data) => {
+        console.log(data);
+        /**
+         * example output
+         * {
+         *  "first_name": "John",
+         *  "last_name": "Doe",
+         *  "username": "johndoe",
+         *  "password": "password123",
+         *  "text_area": "This is a text area",
+         *  "email": "3ZJ3f@example.com",
+         *  "gender": "male",
+         *  "country": "usa"
+         * }
+         */
+
+        // Do something with the data
+    });
+</script>
+```

package/dist/main.d.mts

@@ -17,11 +17,14 @@ type BaseField = {
     direction?: "horizontal" | "vertical";
     options?: Option[];
     default?: string;
+    description?: string;
 };
 type RowField = {
     label?: string;
     type: "row";
     items: BaseField[];
+    description?: string;
+    direction?: "horizontal" | "vertical";
 };
 type Field = BaseField | RowField;
 type FormData = {
@@ -36,15 +39,23 @@ interface RenderedForm {
         element: HTMLElement;
         message: string;
     }>;
-    submitForm: () => void;
     getValues: () => {
         [key: string]: FormDataEntryValue | FormDataEntryValue[];
     };
+    onSubmit: (callback: (data: any, event: Event) => void) => void;
 }
-declare function renderForm(element: string | HTMLElement, data: FormData): RenderedForm | null;
+declare function renderForm(element: string | HTMLElement, data: FormData, options?: {
+    onSubmit?: (result: any, error?: any) => void;
+    enableAutoSubmit?: boolean;
+}): RenderedForm | null;
 
 declare const FormsLib: {
     renderForm: typeof renderForm;
 };
+declare const _default: {
+    FormsLib: {
+        renderForm: typeof renderForm;
+    };
+};
 
-export { FormsLib };
+export { FormsLib, _default as default };

package/dist/main.d.ts

@@ -17,11 +17,14 @@ type BaseField = {
     direction?: "horizontal" | "vertical";
     options?: Option[];
     default?: string;
+    description?: string;
 };
 type RowField = {
     label?: string;
     type: "row";
     items: BaseField[];
+    description?: string;
+    direction?: "horizontal" | "vertical";
 };
 type Field = BaseField | RowField;
 type FormData = {
@@ -36,15 +39,23 @@ interface RenderedForm {
         element: HTMLElement;
         message: string;
     }>;
-    submitForm: () => void;
     getValues: () => {
         [key: string]: FormDataEntryValue | FormDataEntryValue[];
     };
+    onSubmit: (callback: (data: any, event: Event) => void) => void;
 }
-declare function renderForm(element: string | HTMLElement, data: FormData): RenderedForm | null;
+declare function renderForm(element: string | HTMLElement, data: FormData, options?: {
+    onSubmit?: (result: any, error?: any) => void;
+    enableAutoSubmit?: boolean;
+}): RenderedForm | null;
 
 declare const FormsLib: {
     renderForm: typeof renderForm;
 };
+declare const _default: {
+    FormsLib: {
+        renderForm: typeof renderForm;
+    };
+};
 
-export { FormsLib };
+export { FormsLib, _default as default };

package/dist/main.global.js

@@ -1 +1 @@
-"use strict";var FormsLib=(()=>{var y=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var T=(r,a)=>{for(var m in a)y(r,m,{get:a[m],enumerable:!0})},k=(r,a,m,E)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of L(a))!C.call(r,o)&&o!==m&&y(r,o,{get:()=>a[o],enumerable:!(E=f(a,o))||E.enumerable});return r};var M=r=>k(y({},"__esModule",{value:!0}),r);var v={};T(v,{FormsLib:()=>H});function b(r){console.log("Form submitted:",r)}function F(r,a){let m=[];if(typeof r=="string"?m=Array.from(document.querySelectorAll(r)):m=[r],m.length===0)return null;function E(){let l=document.createElement("form");l.id=a.id;let u=document.createElement("h2");u.textContent=a.form_name,l.appendChild(u);function c(e,n){n&&(n.min_length!==void 0&&(e.minLength=n.min_length),n.max_length!==void 0&&(e.maxLength=n.max_length),n.regex&&(e instanceof HTMLInputElement?e.pattern=n.regex:e.dataset.pattern=n.regex))}function p(e){if(!e.key&&!e.label)return null;let n=document.createElement("div");if(n.className="form-group",e.label){let t=document.createElement("label");t.htmlFor=e.key||"",t.textContent=e.label+(e.required?" *":""),n.appendChild(t)}let i=null;switch(e.type){case"textarea":{let t=document.createElement("textarea");e.key&&(t.name=e.key),e.required&&(t.required=!0),c(t,e.validation),i=t;break}case"select":{let t=document.createElement("select");e.key&&(t.name=e.key),e.required&&(t.required=!0),e.options&&e.options.forEach(d=>{let s=document.createElement("option");s.value=d.value,s.textContent=d.label,e.default===d.value&&(s.selected=!0),t.appendChild(s)}),i=t;break}case"radio":{let t=document.createElement("div");t.className="radio-group "+(e.direction||"vertical"),e.options&&e.options.forEach(d=>{let s=document.createElement("label");s.style.display=e.direction==="horizontal"?"inline-block":"block";let h=document.createElement("input");h.type="radio",h.name=e.key||"",h.value=d.value,s.appendChild(h),s.appendChild(document.createTextNode(d.label)),t.appendChild(s)}),i=t;break}default:{let t=document.createElement("input");t.type=e.type||"text",e.key&&(t.name=e.key),e.required&&(t.required=!0),c(t,e.validation),i=t;break}}if(i&&n.appendChild(i),e.hint_text){let t=document.createElement("small");t.className="hint",t.textContent=e.hint_text,n.appendChild(t)}return n}a.fields.forEach(e=>{if(e.type==="row"){let n=document.createElement("div");if(n.className="form-row",e.label){let i=document.createElement("h3");i.textContent=e.label,n.appendChild(i)}e.items.forEach(i=>{let t=p(i);t&&n.appendChild(t)}),l.appendChild(n)}else{let n=p(e);n&&l.appendChild(n)}});let g=document.createElement("button");return g.type="submit",g.textContent="Submit",l.appendChild(g),l}let o=E();return m[0].appendChild(o),{element:o,validate:()=>{let l=[];return o.querySelectorAll(":invalid").forEach(c=>{let p=c.validationMessage;l.push({element:c,message:p})}),l},submitForm:()=>{b(o)},getValues:()=>{let l=new FormData(o),u={};return l.forEach((c,p)=>{u[p]=c}),u}}}var x={renderForm:F};var H=x;return M(v);})();
+"use strict";var VocLibJs=(()=>{var k=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var T=(i,a)=>{for(var p in a)k(i,p,{get:a[p],enumerable:!0})},M=(i,a,p,d)=>{if(a&&typeof a=="object"||typeof a=="function")for(let u of F(a))!C.call(i,u)&&u!==p&&k(i,u,{get:()=>a[u],enumerable:!(d=L(a,u))||d.enumerable});return i};var H=i=>M(k({},"__esModule",{value:!0}),i);var N={};T(N,{FormsLib:()=>w,default:()=>q});function x(i){let a=new FormData(i),p={};return a.forEach((d,u)=>{p[u]=d}),p}function f(i,a,p){let d=[];if(typeof i=="string"?d=Array.from(document.querySelectorAll(i)):d=[i],d.length===0)return null;function u(){let s=document.createElement("form");s.classList.add("voc-form"),s.id=a.id;let y=document.createElement("h2");y.textContent=a.form_name,s.appendChild(y);function h(e,n){n&&(n.min_length!==void 0&&(e.minLength=n.min_length),n.max_length!==void 0&&(e.maxLength=n.max_length),n.regex&&(e instanceof HTMLInputElement?e.pattern=n.regex:e.dataset.pattern=n.regex))}function v(e){if(!e.key&&!e.label)return null;let n=document.createElement("div");if(n.className="voc-form-group",e.label){let t=document.createElement("label");t.classList.add("voc-form-label"),e.key?e.type==="radio"?t.htmlFor="":t.htmlFor=`voc-form-${e.key}`:t.htmlFor="",t.textContent=e.label+(e.required?" *":""),n.appendChild(t)}let l=null;switch(e.type){case"checkbox":{let t=document.createElement("div");if(t.className="voc-form-checkbox-group "+(e.direction||"vertical"),e.options)e.options.forEach((r,o)=>{let m=document.createElement("label");m.classList.add("voc-form-checkbox-label"),m.style.display=e.direction==="horizontal"?"inline-block":"block";let c=document.createElement("input");c.type="checkbox",c.classList.add("voc-form-checkbox"),c.name=e.key||"",c.value=r.value,e.key&&(c.id=`voc-form-${e.key}-${o}`),e.required&&(c.required=!0),e.default===r.value&&(c.checked=!0),m.appendChild(c),m.appendChild(document.createTextNode(r.label)),t.appendChild(m)});else{let r=document.createElement("label");r.classList.add("voc-form-checkbox-label");let o=document.createElement("input");o.type="checkbox",o.classList.add("voc-form-checkbox"),e.key&&(o.name=e.key,o.id=`voc-form-${e.key}`),e.required&&(o.required=!0),e.default&&(o.checked=!!e.default),r.appendChild(o),r.appendChild(document.createTextNode(e.label||"")),t.appendChild(r)}l=t;break}case"textarea":{let t=document.createElement("textarea");t.classList.add("voc-form-textarea"),e.key&&(t.name=e.key,t.id=`voc-form-${e.key}`),e.required&&(t.required=!0),h(t,e.validation),l=t;break}case"select":{let t=document.createElement("select");t.classList.add("voc-form-select"),e.key&&(t.name=e.key,t.id=`voc-form-${e.key}`),e.required&&(t.required=!0),e.options&&e.options.forEach(r=>{let o=document.createElement("option");o.value=r.value,o.textContent=r.label,e.default===r.value&&(o.selected=!0),t.appendChild(o)}),l=t;break}case"radio":{let t=document.createElement("div");t.className="voc-form-radio-group "+(e.direction||"vertical"),e.options&&e.options.forEach((r,o)=>{let m=document.createElement("label");m.classList.add("voc-form-radio-label"),m.style.display=e.direction==="horizontal"?"inline-block":"block";let c=document.createElement("input");c.type="radio",c.classList.add("voc-form-radio"),c.name=e.key||"",c.value=r.value,e.key&&(c.id=`voc-form-${e.key}-${o}`),m.appendChild(c),m.appendChild(document.createTextNode(r.label)),t.appendChild(m)}),l=t;break}default:{let t=document.createElement("input");t.type=e.type||"text",t.classList.add("voc-form-input"),e.key&&(t.name=e.key,t.id=`voc-form-${e.key}`),e.required&&(t.required=!0),h(t,e.validation),l=t;break}}if(l&&n.appendChild(l),e.hint_text){let t=document.createElement("small");t.className="voc-form-hint",t.textContent=e.hint_text,n.appendChild(t)}return n}a.fields.forEach(e=>{if(e.type==="row"&&"items"in e){let n=document.createElement("div");if(n.className="voc-form-row",e.label){let t=document.createElement("h3");t.className="voc-form-row-label",t.textContent=e.label,n.appendChild(t)}if(e.description){let t=document.createElement("p");t.className="voc-form-row-description",t.textContent=e.description,n.appendChild(t)}let l=document.createElement("div");l.className="voc-form-row-items "+(e.direction||"vertical"),n.appendChild(l),e.items.forEach(t=>{let r=v(t);r&&l.appendChild(r)}),s.appendChild(n)}else{let n=v(e);n&&s.appendChild(n)}});let E=document.createElement("button");return E.type="submit",E.className="voc-form-submit",E.textContent="Submit",s.appendChild(E),s}let b=u();return d[0].appendChild(b),{element:b,validate:()=>{let s=[];return b.querySelectorAll(":invalid").forEach(h=>{let v=h.validationMessage;s.push({element:h,message:v})}),s},getValues:()=>x(b),onSubmit:s=>{b.addEventListener("submit",y=>{y.preventDefault();let h=x(b);s(h,y)})}}}var g={renderForm:f};var w=g,q={FormsLib:g};return H(N);})();

package/dist/main.js

@@ -1 +1 @@
-"use strict";var y=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var T=(r,a)=>{for(var m in a)y(r,m,{get:a[m],enumerable:!0})},k=(r,a,m,E)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of L(a))!C.call(r,o)&&o!==m&&y(r,o,{get:()=>a[o],enumerable:!(E=f(a,o))||E.enumerable});return r};var M=r=>k(y({},"__esModule",{value:!0}),r);var v={};T(v,{FormsLib:()=>H});module.exports=M(v);function b(r){console.log("Form submitted:",r)}function F(r,a){let m=[];if(typeof r=="string"?m=Array.from(document.querySelectorAll(r)):m=[r],m.length===0)return null;function E(){let l=document.createElement("form");l.id=a.id;let u=document.createElement("h2");u.textContent=a.form_name,l.appendChild(u);function c(e,n){n&&(n.min_length!==void 0&&(e.minLength=n.min_length),n.max_length!==void 0&&(e.maxLength=n.max_length),n.regex&&(e instanceof HTMLInputElement?e.pattern=n.regex:e.dataset.pattern=n.regex))}function p(e){if(!e.key&&!e.label)return null;let n=document.createElement("div");if(n.className="form-group",e.label){let t=document.createElement("label");t.htmlFor=e.key||"",t.textContent=e.label+(e.required?" *":""),n.appendChild(t)}let i=null;switch(e.type){case"textarea":{let t=document.createElement("textarea");e.key&&(t.name=e.key),e.required&&(t.required=!0),c(t,e.validation),i=t;break}case"select":{let t=document.createElement("select");e.key&&(t.name=e.key),e.required&&(t.required=!0),e.options&&e.options.forEach(d=>{let s=document.createElement("option");s.value=d.value,s.textContent=d.label,e.default===d.value&&(s.selected=!0),t.appendChild(s)}),i=t;break}case"radio":{let t=document.createElement("div");t.className="radio-group "+(e.direction||"vertical"),e.options&&e.options.forEach(d=>{let s=document.createElement("label");s.style.display=e.direction==="horizontal"?"inline-block":"block";let h=document.createElement("input");h.type="radio",h.name=e.key||"",h.value=d.value,s.appendChild(h),s.appendChild(document.createTextNode(d.label)),t.appendChild(s)}),i=t;break}default:{let t=document.createElement("input");t.type=e.type||"text",e.key&&(t.name=e.key),e.required&&(t.required=!0),c(t,e.validation),i=t;break}}if(i&&n.appendChild(i),e.hint_text){let t=document.createElement("small");t.className="hint",t.textContent=e.hint_text,n.appendChild(t)}return n}a.fields.forEach(e=>{if(e.type==="row"){let n=document.createElement("div");if(n.className="form-row",e.label){let i=document.createElement("h3");i.textContent=e.label,n.appendChild(i)}e.items.forEach(i=>{let t=p(i);t&&n.appendChild(t)}),l.appendChild(n)}else{let n=p(e);n&&l.appendChild(n)}});let g=document.createElement("button");return g.type="submit",g.textContent="Submit",l.appendChild(g),l}let o=E();return m[0].appendChild(o),{element:o,validate:()=>{let l=[];return o.querySelectorAll(":invalid").forEach(c=>{let p=c.validationMessage;l.push({element:c,message:p})}),l},submitForm:()=>{b(o)},getValues:()=>{let l=new FormData(o),u={};return l.forEach((c,p)=>{u[p]=c}),u}}}var x={renderForm:F};var H=x;0&&(module.exports={FormsLib});
+"use strict";var k=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var T=(i,a)=>{for(var p in a)k(i,p,{get:a[p],enumerable:!0})},M=(i,a,p,d)=>{if(a&&typeof a=="object"||typeof a=="function")for(let u of F(a))!C.call(i,u)&&u!==p&&k(i,u,{get:()=>a[u],enumerable:!(d=L(a,u))||d.enumerable});return i};var H=i=>M(k({},"__esModule",{value:!0}),i);var N={};T(N,{FormsLib:()=>w,default:()=>q});module.exports=H(N);function x(i){let a=new FormData(i),p={};return a.forEach((d,u)=>{p[u]=d}),p}function f(i,a,p){let d=[];if(typeof i=="string"?d=Array.from(document.querySelectorAll(i)):d=[i],d.length===0)return null;function u(){let s=document.createElement("form");s.classList.add("voc-form"),s.id=a.id;let y=document.createElement("h2");y.textContent=a.form_name,s.appendChild(y);function h(e,n){n&&(n.min_length!==void 0&&(e.minLength=n.min_length),n.max_length!==void 0&&(e.maxLength=n.max_length),n.regex&&(e instanceof HTMLInputElement?e.pattern=n.regex:e.dataset.pattern=n.regex))}function v(e){if(!e.key&&!e.label)return null;let n=document.createElement("div");if(n.className="voc-form-group",e.label){let t=document.createElement("label");t.classList.add("voc-form-label"),e.key?e.type==="radio"?t.htmlFor="":t.htmlFor=`voc-form-${e.key}`:t.htmlFor="",t.textContent=e.label+(e.required?" *":""),n.appendChild(t)}let l=null;switch(e.type){case"checkbox":{let t=document.createElement("div");if(t.className="voc-form-checkbox-group "+(e.direction||"vertical"),e.options)e.options.forEach((r,o)=>{let m=document.createElement("label");m.classList.add("voc-form-checkbox-label"),m.style.display=e.direction==="horizontal"?"inline-block":"block";let c=document.createElement("input");c.type="checkbox",c.classList.add("voc-form-checkbox"),c.name=e.key||"",c.value=r.value,e.key&&(c.id=`voc-form-${e.key}-${o}`),e.required&&(c.required=!0),e.default===r.value&&(c.checked=!0),m.appendChild(c),m.appendChild(document.createTextNode(r.label)),t.appendChild(m)});else{let r=document.createElement("label");r.classList.add("voc-form-checkbox-label");let o=document.createElement("input");o.type="checkbox",o.classList.add("voc-form-checkbox"),e.key&&(o.name=e.key,o.id=`voc-form-${e.key}`),e.required&&(o.required=!0),e.default&&(o.checked=!!e.default),r.appendChild(o),r.appendChild(document.createTextNode(e.label||"")),t.appendChild(r)}l=t;break}case"textarea":{let t=document.createElement("textarea");t.classList.add("voc-form-textarea"),e.key&&(t.name=e.key,t.id=`voc-form-${e.key}`),e.required&&(t.required=!0),h(t,e.validation),l=t;break}case"select":{let t=document.createElement("select");t.classList.add("voc-form-select"),e.key&&(t.name=e.key,t.id=`voc-form-${e.key}`),e.required&&(t.required=!0),e.options&&e.options.forEach(r=>{let o=document.createElement("option");o.value=r.value,o.textContent=r.label,e.default===r.value&&(o.selected=!0),t.appendChild(o)}),l=t;break}case"radio":{let t=document.createElement("div");t.className="voc-form-radio-group "+(e.direction||"vertical"),e.options&&e.options.forEach((r,o)=>{let m=document.createElement("label");m.classList.add("voc-form-radio-label"),m.style.display=e.direction==="horizontal"?"inline-block":"block";let c=document.createElement("input");c.type="radio",c.classList.add("voc-form-radio"),c.name=e.key||"",c.value=r.value,e.key&&(c.id=`voc-form-${e.key}-${o}`),m.appendChild(c),m.appendChild(document.createTextNode(r.label)),t.appendChild(m)}),l=t;break}default:{let t=document.createElement("input");t.type=e.type||"text",t.classList.add("voc-form-input"),e.key&&(t.name=e.key,t.id=`voc-form-${e.key}`),e.required&&(t.required=!0),h(t,e.validation),l=t;break}}if(l&&n.appendChild(l),e.hint_text){let t=document.createElement("small");t.className="voc-form-hint",t.textContent=e.hint_text,n.appendChild(t)}return n}a.fields.forEach(e=>{if(e.type==="row"&&"items"in e){let n=document.createElement("div");if(n.className="voc-form-row",e.label){let t=document.createElement("h3");t.className="voc-form-row-label",t.textContent=e.label,n.appendChild(t)}if(e.description){let t=document.createElement("p");t.className="voc-form-row-description",t.textContent=e.description,n.appendChild(t)}let l=document.createElement("div");l.className="voc-form-row-items "+(e.direction||"vertical"),n.appendChild(l),e.items.forEach(t=>{let r=v(t);r&&l.appendChild(r)}),s.appendChild(n)}else{let n=v(e);n&&s.appendChild(n)}});let E=document.createElement("button");return E.type="submit",E.className="voc-form-submit",E.textContent="Submit",s.appendChild(E),s}let b=u();return d[0].appendChild(b),{element:b,validate:()=>{let s=[];return b.querySelectorAll(":invalid").forEach(h=>{let v=h.validationMessage;s.push({element:h,message:v})}),s},getValues:()=>x(b),onSubmit:s=>{b.addEventListener("submit",y=>{y.preventDefault();let h=x(b);s(h,y)})}}}var g={renderForm:f};var w=g,q={FormsLib:g};0&&(module.exports={FormsLib});

package/dist/main.mjs

@@ -1 +1 @@
-function g(c){console.log("Form submitted:",c)}function y(c,E){let p=[];if(typeof c=="string"?p=Array.from(document.querySelectorAll(c)):p=[c],p.length===0)return null;function F(){let r=document.createElement("form");r.id=E.id;let i=document.createElement("h2");i.textContent=E.form_name,r.appendChild(i);function l(e,n){n&&(n.min_length!==void 0&&(e.minLength=n.min_length),n.max_length!==void 0&&(e.maxLength=n.max_length),n.regex&&(e instanceof HTMLInputElement?e.pattern=n.regex:e.dataset.pattern=n.regex))}function m(e){if(!e.key&&!e.label)return null;let n=document.createElement("div");if(n.className="form-group",e.label){let t=document.createElement("label");t.htmlFor=e.key||"",t.textContent=e.label+(e.required?" *":""),n.appendChild(t)}let a=null;switch(e.type){case"textarea":{let t=document.createElement("textarea");e.key&&(t.name=e.key),e.required&&(t.required=!0),l(t,e.validation),a=t;break}case"select":{let t=document.createElement("select");e.key&&(t.name=e.key),e.required&&(t.required=!0),e.options&&e.options.forEach(s=>{let o=document.createElement("option");o.value=s.value,o.textContent=s.label,e.default===s.value&&(o.selected=!0),t.appendChild(o)}),a=t;break}case"radio":{let t=document.createElement("div");t.className="radio-group "+(e.direction||"vertical"),e.options&&e.options.forEach(s=>{let o=document.createElement("label");o.style.display=e.direction==="horizontal"?"inline-block":"block";let d=document.createElement("input");d.type="radio",d.name=e.key||"",d.value=s.value,o.appendChild(d),o.appendChild(document.createTextNode(s.label)),t.appendChild(o)}),a=t;break}default:{let t=document.createElement("input");t.type=e.type||"text",e.key&&(t.name=e.key),e.required&&(t.required=!0),l(t,e.validation),a=t;break}}if(a&&n.appendChild(a),e.hint_text){let t=document.createElement("small");t.className="hint",t.textContent=e.hint_text,n.appendChild(t)}return n}E.fields.forEach(e=>{if(e.type==="row"){let n=document.createElement("div");if(n.className="form-row",e.label){let a=document.createElement("h3");a.textContent=e.label,n.appendChild(a)}e.items.forEach(a=>{let t=m(a);t&&n.appendChild(t)}),r.appendChild(n)}else{let n=m(e);n&&r.appendChild(n)}});let h=document.createElement("button");return h.type="submit",h.textContent="Submit",r.appendChild(h),r}let u=F();return p[0].appendChild(u),{element:u,validate:()=>{let r=[];return u.querySelectorAll(":invalid").forEach(l=>{let m=l.validationMessage;r.push({element:l,message:m})}),r},submitForm:()=>{g(u)},getValues:()=>{let r=new FormData(u),i={};return r.forEach((l,m)=>{i[m]=l}),i}}}var b={renderForm:y};var M=b;export{M as FormsLib};
+function k(p){let h=new FormData(p),v={};return h.forEach((m,E)=>{v[E]=m}),v}function g(p,h,v){let m=[];if(typeof p=="string"?m=Array.from(document.querySelectorAll(p)):m=[p],m.length===0)return null;function E(){let c=document.createElement("form");c.classList.add("voc-form"),c.id=h.id;let u=document.createElement("h2");u.textContent=h.form_name,c.appendChild(u);function l(e,n){n&&(n.min_length!==void 0&&(e.minLength=n.min_length),n.max_length!==void 0&&(e.maxLength=n.max_length),n.regex&&(e instanceof HTMLInputElement?e.pattern=n.regex:e.dataset.pattern=n.regex))}function b(e){if(!e.key&&!e.label)return null;let n=document.createElement("div");if(n.className="voc-form-group",e.label){let t=document.createElement("label");t.classList.add("voc-form-label"),e.key?e.type==="radio"?t.htmlFor="":t.htmlFor=`voc-form-${e.key}`:t.htmlFor="",t.textContent=e.label+(e.required?" *":""),n.appendChild(t)}let i=null;switch(e.type){case"checkbox":{let t=document.createElement("div");if(t.className="voc-form-checkbox-group "+(e.direction||"vertical"),e.options)e.options.forEach((r,o)=>{let s=document.createElement("label");s.classList.add("voc-form-checkbox-label"),s.style.display=e.direction==="horizontal"?"inline-block":"block";let a=document.createElement("input");a.type="checkbox",a.classList.add("voc-form-checkbox"),a.name=e.key||"",a.value=r.value,e.key&&(a.id=`voc-form-${e.key}-${o}`),e.required&&(a.required=!0),e.default===r.value&&(a.checked=!0),s.appendChild(a),s.appendChild(document.createTextNode(r.label)),t.appendChild(s)});else{let r=document.createElement("label");r.classList.add("voc-form-checkbox-label");let o=document.createElement("input");o.type="checkbox",o.classList.add("voc-form-checkbox"),e.key&&(o.name=e.key,o.id=`voc-form-${e.key}`),e.required&&(o.required=!0),e.default&&(o.checked=!!e.default),r.appendChild(o),r.appendChild(document.createTextNode(e.label||"")),t.appendChild(r)}i=t;break}case"textarea":{let t=document.createElement("textarea");t.classList.add("voc-form-textarea"),e.key&&(t.name=e.key,t.id=`voc-form-${e.key}`),e.required&&(t.required=!0),l(t,e.validation),i=t;break}case"select":{let t=document.createElement("select");t.classList.add("voc-form-select"),e.key&&(t.name=e.key,t.id=`voc-form-${e.key}`),e.required&&(t.required=!0),e.options&&e.options.forEach(r=>{let o=document.createElement("option");o.value=r.value,o.textContent=r.label,e.default===r.value&&(o.selected=!0),t.appendChild(o)}),i=t;break}case"radio":{let t=document.createElement("div");t.className="voc-form-radio-group "+(e.direction||"vertical"),e.options&&e.options.forEach((r,o)=>{let s=document.createElement("label");s.classList.add("voc-form-radio-label"),s.style.display=e.direction==="horizontal"?"inline-block":"block";let a=document.createElement("input");a.type="radio",a.classList.add("voc-form-radio"),a.name=e.key||"",a.value=r.value,e.key&&(a.id=`voc-form-${e.key}-${o}`),s.appendChild(a),s.appendChild(document.createTextNode(r.label)),t.appendChild(s)}),i=t;break}default:{let t=document.createElement("input");t.type=e.type||"text",t.classList.add("voc-form-input"),e.key&&(t.name=e.key,t.id=`voc-form-${e.key}`),e.required&&(t.required=!0),l(t,e.validation),i=t;break}}if(i&&n.appendChild(i),e.hint_text){let t=document.createElement("small");t.className="voc-form-hint",t.textContent=e.hint_text,n.appendChild(t)}return n}h.fields.forEach(e=>{if(e.type==="row"&&"items"in e){let n=document.createElement("div");if(n.className="voc-form-row",e.label){let t=document.createElement("h3");t.className="voc-form-row-label",t.textContent=e.label,n.appendChild(t)}if(e.description){let t=document.createElement("p");t.className="voc-form-row-description",t.textContent=e.description,n.appendChild(t)}let i=document.createElement("div");i.className="voc-form-row-items "+(e.direction||"vertical"),n.appendChild(i),e.items.forEach(t=>{let r=b(t);r&&i.appendChild(r)}),c.appendChild(n)}else{let n=b(e);n&&c.appendChild(n)}});let y=document.createElement("button");return y.type="submit",y.className="voc-form-submit",y.textContent="Submit",c.appendChild(y),c}let d=E();return m[0].appendChild(d),{element:d,validate:()=>{let c=[];return d.querySelectorAll(":invalid").forEach(l=>{let b=l.validationMessage;c.push({element:l,message:b})}),c},getValues:()=>k(d),onSubmit:c=>{d.addEventListener("submit",u=>{u.preventDefault();let l=k(d);c(l,u)})}}}var x={renderForm:g};var H=x,w={FormsLib:x};export{H as FormsLib,w as default};

package/package.json

@@ -1,15 +1,14 @@
 {
   "name": "voc-lib-js",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "A JavaScript library for VocPhone",
   "main": "./dist/main.cjs",
   "module": "./dist/main.mjs",
-  "unpkg": "./dist/main.iife.js",
-  "jsdelivr": "./dist/main.iife.js",
   "types": "./dist/main.d.ts",
   "scripts": {
     "build": "tsup",
-    "up": "npm version patch && rimraf dist && npm run build && npm publish"
+    "up": "npm version patch && rimraf dist && npm run build && npm publish",
+    "del-dist": "rimraf dist"
   },
   "repository": {
     "type": "git",
@@ -31,6 +30,7 @@
   },
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "src/css"
   ]
 }