voc-lib-js 1.0.29 → 1.0.30

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/main.d.mts CHANGED
@@ -64,13 +64,14 @@ interface RenderedForm {
64
64
  getValues: (asFormData?: boolean) => globalThis.FormData | Record<string, any>;
65
65
  onSubmit: (callback: (data: globalThis.FormData | Record<string, any>, event: Event) => void) => void;
66
66
  }
67
- declare function renderForm(element: string | HTMLElement, data: FormData, options?: {
67
+ type RenderOptions = {
68
68
  onSubmit?: (result: any, error?: any) => void;
69
69
  onSubmitResult?: (response: any, error: Error | null) => void;
70
70
  enableAutoSubmit?: boolean;
71
71
  style?: "bootstrap" | undefined | null;
72
72
  submit_config?: SubmitConfig;
73
- }): RenderedForm | null;
73
+ };
74
+ declare function renderForm(element: string | HTMLElement, data: FormData, options?: RenderOptions): RenderedForm | null;
74
75
 
75
76
  declare const FormsLib: {
76
77
  renderForm: typeof renderForm;
package/dist/main.d.ts CHANGED
@@ -64,13 +64,14 @@ interface RenderedForm {
64
64
  getValues: (asFormData?: boolean) => globalThis.FormData | Record<string, any>;
65
65
  onSubmit: (callback: (data: globalThis.FormData | Record<string, any>, event: Event) => void) => void;
66
66
  }
67
- declare function renderForm(element: string | HTMLElement, data: FormData, options?: {
67
+ type RenderOptions = {
68
68
  onSubmit?: (result: any, error?: any) => void;
69
69
  onSubmitResult?: (response: any, error: Error | null) => void;
70
70
  enableAutoSubmit?: boolean;
71
71
  style?: "bootstrap" | undefined | null;
72
72
  submit_config?: SubmitConfig;
73
- }): RenderedForm | null;
73
+ };
74
+ declare function renderForm(element: string | HTMLElement, data: FormData, options?: RenderOptions): RenderedForm | null;
74
75
 
75
76
  declare const FormsLib: {
76
77
  renderForm: typeof renderForm;
@@ -1,2 +1,2 @@
1
- "use strict";var VocLibJs=(()=>{var F=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var H=Object.prototype.hasOwnProperty;var q=(y,d)=>{for(var p in d)F(y,p,{get:d[p],enumerable:!0})},B=(y,d,p,f)=>{if(d&&typeof d=="object"||typeof d=="function")for(let v of A(d))!H.call(y,v)&&v!==p&&F(y,v,{get:()=>d[v],enumerable:!(f=S(d,v))||f.enumerable});return y};var $=y=>B(F({},"__esModule",{value:!0}),y);var V={};q(V,{FormsLib:()=>z,default:()=>W});function C(y,d=!0){let p=new FormData(y);if(d)return p;let f={};return p.forEach((v,u)=>{let E=(v instanceof File,v);Object.prototype.hasOwnProperty.call(f,u)?Array.isArray(f[u])?f[u].push(E):f[u]=[f[u],E]:f[u]=E}),f}async function N(y,d,p){let f=d.url,v={"Content-Type":"application/json"};d?.api_token&&(v.Authorization=`Bearer ${d.api_token}`);let u=C(y);if(d?.additional_data)for(let[a,g]of Object.entries(d.additional_data))u.append(a,g);let E,s=u instanceof FormData;E={method:"POST",headers:{Authorization:`Bearer ${d.api_token}`,...s?{}:{"Content-Type":"application/json"},Accept:"application/json"},body:s?u:JSON.stringify(Object.fromEntries(u.entries()))};try{fetch(f,E).then(a=>{let g=a.headers.get("content-type");if(!a.ok){let w=a.text();throw new Error(`HTTP ${a.status}: ${w}`)}return g&&g.includes("application/json")?a.json():a.text()}).then(a=>{p&&p(a,null)}).catch(a=>{p&&p(null,a)})}catch(a){p&&p(null,a)}}function R(y,d,p){let f=[];if(typeof y=="string"?f=Array.from(document.querySelectorAll(y)):f=[y],f.length===0)return null;function v(){let s=p?.style==="bootstrap",a=document.createElement("form");a.classList.add("voc-form"),s&&a.classList.add("needs-validation"),a.id=d.id;let g=document.createElement("h2");g.textContent=d.form_name,a.appendChild(g);function w(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 k(e){if(!e.key&&!e.label)return null;let i=d.default_values||{},h=e.name||e.key,o=h?i[h]:void 0,b=document.createElement("div");if(b.className="voc-form-group",s&&b.classList.add("mb-3"),e.label){let t=document.createElement("label");t.classList.add("voc-form-label"),s&&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?" *":""),b.appendChild(t)}let m=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,c)=>{let l=document.createElement("label");l.classList.add("voc-form-checkbox-label"),s&&l.classList.add("form-check"),l.style.display=e.direction==="horizontal"?"inline-block":"block",e.width&&(l.style.width=e.width);let r=document.createElement("input");r.type="checkbox",r.classList.add("voc-form-checkbox"),s&&r.classList.add("form-check-input"),r.name=e.name||e.key||"",r.value=n.value,e.key&&(r.id=`voc-form-${e.key}-${c}`),e.required&&(r.required=!0),Array.isArray(o)?o.includes(n.value)&&(r.checked=!0):o!==void 0?o===n.value&&(r.checked=!0):e.default===n.value&&(r.checked=!0),l.appendChild(r),l.appendChild(document.createTextNode(n.label)),t.appendChild(l)});else{let n=document.createElement("label");n.classList.add("voc-form-checkbox-label"),s&&n.classList.add("form-check"),e.width&&(n.style.width=e.width);let c=document.createElement("input");c.type="checkbox",c.classList.add("voc-form-checkbox"),(e.key||e.name)&&(c.name=e.name||e.key,e.key&&(c.id=`voc-form-${e.key}`)),s&&c.classList.add("form-check-input"),e.required&&(c.required=!0),o!==void 0?c.checked=!!o:e.default&&(c.checked=!!e.default),n.appendChild(c),n.appendChild(document.createTextNode(e.label||"")),t.appendChild(n)}m=t;break}case"textarea":{let t=document.createElement("textarea");t.classList.add("voc-form-textarea"),s&&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),o!=null?t.value=String(o):e.default!==void 0&&e.default!==null&&(t.value=String(e.default));let n=e.default||o||"";if(n){let c=(n.match(/\n/g)||[]).length,l=80,r=n.split(`
2
- `).reduce((D,M)=>Math.max(D,M.length),0),L=Math.ceil(r/l)||1,_=Math.max(2,c+L);t.rows=_,t.style.resize="vertical"}e.width&&(t.style.width=e.width),e.required&&(t.required=!0),w(t,e.validation),m=t;break}case"select":{let t=document.createElement("select");if(t.classList.add("voc-form-select"),s&&t.classList.add("form-select"),s&&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){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 c=document.createElement("option");c.value=n.value,c.textContent=n.label,Array.isArray(o)?o.includes(n.value)&&(c.selected=!0):o!==void 0?o===n.value&&(c.selected=!0):e.default===n.value&&(c.selected=!0),t.appendChild(c)}),e.width&&(t.style.width=e.width),m=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,c)=>{let l=document.createElement("label");l.classList.add("voc-form-radio-label"),s&&l.classList.add("form-check"),l.style.display=e.direction==="horizontal"?"inline-block":"block",e.width&&(l.style.width=e.width);let r=document.createElement("input");r.type="radio",r.classList.add("voc-form-radio"),s&&r.classList.add("form-check-input"),r.name=e.name||e.key||"",r.value=n.value,e.key&&(r.id=`voc-form-${e.key}-${c}`),Array.isArray(o)?o.includes(n.value)&&(r.checked=!0):o!==void 0?o===n.value&&(r.checked=!0):e.default===n.value&&(r.checked=!0),l.appendChild(r),l.appendChild(document.createTextNode(n.label)),t.appendChild(l)}),m=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"),s&&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),m=t;break}default:{let t=document.createElement("input");t.type=e.type||"text",t.classList.add("voc-form-input"),s&&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),o!=null?t.value=String(o):e.default!==void 0&&e.default!==null&&(t.value=String(e.default)),e.width&&(t.style.width=e.width),e.required&&(t.required=!0),w(t,e.validation),m=t;break}}if(m&&b.appendChild(m),e.hint_text){let t=document.createElement("small");t.className="voc-form-hint",t.textContent=e.hint_text,b.appendChild(t)}return b}d.fields.forEach(e=>{if(e.type==="group"&&"items"in e){let i=e;if(s){let h=document.createElement("div");h.className="card voc-form-group-card mb-3";let o=i.label||i.header?.title,b=i.description||i.header?.description;if(o||b){let t=document.createElement("div");if(t.className="card-header voc-form-group-head",o){let n=document.createElement("h5");n.className="mb-0 voc-form-group-label",n.textContent=o,t.appendChild(n)}if(b){let n=document.createElement("p");n.className="mb-0 voc-form-group-description",n.textContent=b,t.appendChild(n)}h.appendChild(t)}let m=document.createElement("div");m.className="card-body voc-form-group-body",i.items.forEach(t=>{if(t.type==="row"&&"items"in t){let n=t,c=document.createElement("div");if(c.className="voc-form-group voc-form-row mb-3",n.label){let r=document.createElement("h6");r.className="voc-form-row-label",r.textContent=n.label,c.appendChild(r)}let l=document.createElement("div");l.className="voc-form-row-items "+(n.direction||"horizontal"),n.items.forEach(r=>{let L=k(r);L&&l.appendChild(L)}),c.appendChild(l),m.appendChild(c)}else{let n=k(t);n&&m.appendChild(n)}}),h.appendChild(m),a.appendChild(h)}else{let h=document.createElement("div");h.className="voc-form-group voc-form-group-wrapper",s&&h.classList.add("mb-3");let o=i.label||i.header?.title,b=i.description||i.header?.description;if(o||b){let m=document.createElement("div");if(m.className="voc-form-group-head",o){let t=document.createElement("h3");t.className="voc-form-group-label",t.textContent=o,m.appendChild(t)}if(b){let t=document.createElement("p");t.className="voc-form-group-description",t.textContent=b,m.appendChild(t)}h.appendChild(m)}i.items.forEach(m=>{if(m.type==="row"&&"items"in m){let t=m,n=document.createElement("div");if(n.className="voc-form-group voc-form-row",s&&n.classList.add("mb-3"),t.label){let l=document.createElement("h4");l.className="voc-form-row-label",l.textContent=t.label,n.appendChild(l)}let c=document.createElement("div");c.className="voc-form-row-items "+(t.direction||"horizontal"),t.items.forEach(l=>{let r=k(l);r&&c.appendChild(r)}),n.appendChild(c),h.appendChild(n)}else{let t=k(m);t&&h.appendChild(t)}}),a.appendChild(h)}return}if(e.type==="row"&&"items"in e){let i=document.createElement("div");if(i.className="voc-form-group voc-form-row",s&&i.classList.add("mb-3"),e.label){let o=document.createElement("h3");o.className="voc-form-row-label",o.textContent=e.label,i.appendChild(o)}if(e.description){let o=document.createElement("p");o.className="voc-form-row-description",o.textContent=e.description,i.appendChild(o)}let h=document.createElement("div");h.className="voc-form-row-items "+(e.direction||"horizontal"),i.appendChild(h),e.items.forEach(o=>{let b=k(o);b&&h.appendChild(b)}),a.appendChild(i)}else{let i=k(e);i&&a.appendChild(i)}});let x=document.createElement("button");return x.type="submit",x.className="voc-form-submit",x.textContent="Submit",s&&x.classList.add("btn","btn-primary"),a.appendChild(x),a}let u=v();f[0].appendChild(u);let E=d?.submit_config??p?.submit_config??null;return E&&u.addEventListener("submit",s=>{s.preventDefault(),N(u,E,(a,g)=>{p?.onSubmitResult&&p.onSubmitResult(a,g)})}),{element:u,validate:()=>{let s=[];return u.querySelectorAll(":invalid").forEach(g=>{let w=g.validationMessage;s.push({element:g,message:w})}),s},getValues:()=>C(u),onSubmit:s=>{u.addEventListener("submit",a=>{a.preventDefault();let g=C(u);s(g,a)})}}}var T={renderForm:R};var z=T,W={FormsLib:T};return $(V);})();
1
+ "use strict";var VocLibJs=(()=>{var F=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var q=Object.prototype.hasOwnProperty;var $=(o,y)=>{for(var f in y)F(o,f,{get:y[f],enumerable:!0})},O=(o,y,f,b)=>{if(y&&typeof y=="object"||typeof y=="function")for(let u of B(y))!q.call(o,u)&&u!==f&&F(o,u,{get:()=>y[u],enumerable:!(b=D(y,u))||b.enumerable});return o};var I=o=>O(F({},"__esModule",{value:!0}),o);var j={};$(j,{FormsLib:()=>W,default:()=>z});function A(o,y,f){let b=y?.style==="bootstrap",u=document.createElement("div");u.className="voc-form-avatar-wrapper",b&&u.classList.add("d-flex","align-items-center","gap-3");let d=document.createElement("img");d.className="voc-form-avatar-preview",d.alt=o.label||"avatar",b&&(d.classList.add("img-thumbnail","rounded-circle"),d.style.width=d.style.height="64px",d.style.objectFit="cover");let E=f!=null?String(f):o.default!==void 0&&o.default!==null?String(o.default):"";E?d.src=E:(d.src="",d.style.display="none");let a=document.createElement("input");a.type="file",a.accept=o.accept||"image/*",a.className="voc-form-avatar-input",b&&a.classList.add("form-control"),(o.key||o.name)&&(a.name=o.name||o.key,o.key&&(a.id=`voc-form-${o.key}`));let i=document.createElement("input");if(i.type="hidden",(o.key||o.name)&&(i.name=(o.name||o.key)+"_url"),i.value=E||"",a.addEventListener("change",p=>{let l=p.target;if(l.files&&l.files.length>0){let k=l.files[0],w=new FileReader;w.onload=()=>{d.src=String(w.result),d.style.display="",i.value=""},w.readAsDataURL(k)}}),b){let p=document.createElement("div");p.style.flex="1",p.appendChild(a),p.appendChild(i),u.appendChild(d),u.appendChild(p)}else u.appendChild(d),u.appendChild(a),u.appendChild(i);return u}function S(o,y,f){let b=y?.style==="bootstrap",u=document.createElement("div");if(u.className="voc-form-audio-select",u.style.display="flex",u.style.flexDirection="column",u.style.gap="8px",!o.options||o.options.length===0)return u;let d=o.name||o.key||`audio_select_${Math.random().toString(36).substr(2,6)}`,E;return Array.isArray(f)?E=f[0]:f!==void 0?E=f:o.default!==void 0&&(E=o.default),o.options.forEach((a,i)=>{let p=document.createElement("div");p.className="voc-form-audio-item",p.style.display="flex",p.style.alignItems="flex-start",p.style.gap="8px",b&&p.classList.add("form-check");let l=document.createElement("input");l.type="radio",l.name=d,l.value=a.value,l.className="voc-form-audio-radio",o.key&&(l.id=`voc-form-${o.key}-${i}`),o.required&&i===0&&(l.required=!0),l.style.position="absolute",l.style.width="1px",l.style.height="1px",l.style.margin="0",l.style.padding="0",l.style.clip="rect(0 0 0 0)",l.style.clipPath="inset(50%)",l.style.overflow="hidden",l.style.border="0",E!==void 0&&(Array.isArray(E)?l.checked=E.includes(a.value):l.checked=String(E)===String(a.value));let k=()=>{l.checked?p.classList.add("selected"):p.classList.remove("selected")};l.addEventListener("change",()=>{u.querySelectorAll(".voc-form-audio-item").forEach(n=>n.classList.remove("selected")),k()}),l.checked&&p.classList.add("selected");let w=document.createElement("label");w.className="voc-form-audio-label",b&&w.classList.add("form-check-label"),w.htmlFor=l.id||"",w.textContent=a.label||a.value,w.tabIndex=0;let e=document.createElement("div");e.className="voc-form-audio-control",e.style.display="flex",e.style.alignItems="flex-start",e.style.gap="8px";let s=null;if(a.audio_link){let t=document.createElement("button");t.type="button",t.className="voc-form-audio-play",b&&t.classList.add("btn","btn-sm","btn-outline-secondary"),t.setAttribute("aria-label",`Play ${a.label||a.value}`);let n="http://www.w3.org/2000/svg",c=document.createElementNS(n,"svg");c.setAttribute("viewBox","0 0 24 24"),c.setAttribute("width","16"),c.setAttribute("height","16"),c.setAttribute("aria-hidden","true");let h=document.createElementNS(n,"path");h.setAttribute("d","M8 5v14l11-7z"),h.setAttribute("fill","currentColor"),c.appendChild(h),t.appendChild(c),s=document.createElement("audio"),s.src=a.audio_link,s.preload="none",s.style.display="none",t.addEventListener("click",()=>{try{if(!s)return;u.querySelectorAll("audio").forEach(L=>{try{L.pause(),L.currentTime=0}catch{}}),s.play()}catch(m){console.warn("audio play failed",m)}}),e.appendChild(t),e.appendChild(s)}let g=document.createElement("div");g.className="voc-form-item-detail",g.style.display="flex",g.style.flexDirection="column",g.style.gap="4px";let r=document.createElement("div");r.className="voc-form-item-top",r.style.display="flex",r.style.alignItems="center",r.style.gap="8px",r.appendChild(l),r.appendChild(w);let x=document.createElement("div");x.className="voc-form-item-description";let v=a.description||a.hint_text||"";v&&(x.textContent=v),g.appendChild(r),g.appendChild(x),e.appendChild(g),p.appendChild(e),r.addEventListener("click",t=>{let n=t.target;n&&n.closest(".voc-form-audio-play")||(l.checked=!0,l.dispatchEvent(new Event("change",{bubbles:!0})))}),p.addEventListener("click",t=>{let n=t.target;n&&n.closest(".voc-form-audio-play")||(l.checked=!0,l.dispatchEvent(new Event("change",{bubbles:!0})))}),u.appendChild(p)}),u}function C(o,y=!0){let f=new FormData(o);if(y)return f;let b={};return f.forEach((u,d)=>{let E=(u instanceof File,u);Object.prototype.hasOwnProperty.call(b,d)?Array.isArray(b[d])?b[d].push(E):b[d]=[b[d],E]:b[d]=E}),b}async function R(o,y,f){let b=y.url,u={"Content-Type":"application/json"};y?.api_token&&(u.Authorization=`Bearer ${y.api_token}`);let d=C(o);if(y?.additional_data)for(let[i,p]of Object.entries(y.additional_data))d.append(i,p);let E,a=d instanceof FormData;E={method:"POST",headers:{Authorization:`Bearer ${y.api_token}`,...a?{}:{"Content-Type":"application/json"},Accept:"application/json"},body:a?d:JSON.stringify(Object.fromEntries(d.entries()))};try{fetch(b,E).then(i=>{let p=i.headers.get("content-type");if(!i.ok){let l=i.text();throw new Error(`HTTP ${i.status}: ${l}`)}return p&&p.includes("application/json")?i.json():i.text()}).then(i=>{f&&f(i,null)}).catch(i=>{f&&f(null,i)})}catch(i){f&&f(null,i)}}function M(o,y,f){let b=[];if(typeof o=="string"?b=Array.from(document.querySelectorAll(o)):b=[o],b.length===0)return null;function u(){let a=f?.style==="bootstrap",i=document.createElement("form");i.classList.add("voc-form"),a&&i.classList.add("needs-validation"),i.id=y.id;let p=document.createElement("h2");p.textContent=y.form_name,i.appendChild(p);function l(e,s){s&&(s.min_length!==void 0&&(e.minLength=s.min_length),s.max_length!==void 0&&(e.maxLength=s.max_length),s.regex&&(e instanceof HTMLInputElement?e.pattern=s.regex:e.dataset.pattern=s.regex))}function k(e){if(!e.key&&!e.label)return null;let s=y.default_values||{},g=e.name||e.key,r=g?s[g]:void 0,x=document.createElement("div");if(x.className="voc-form-group",a&&x.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?" *":""),x.appendChild(t)}let v=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,c)=>{let h=document.createElement("label");h.classList.add("voc-form-checkbox-label"),a&&h.classList.add("form-check"),h.style.display=e.direction==="horizontal"?"inline-block":"block",e.width&&(h.style.width=e.width);let m=document.createElement("input");m.type="checkbox",m.classList.add("voc-form-checkbox"),a&&m.classList.add("form-check-input"),m.name=e.name||e.key||"",m.value=n.value,e.key&&(m.id=`voc-form-${e.key}-${c}`),e.required&&(m.required=!0),Array.isArray(r)?r.includes(n.value)&&(m.checked=!0):r!==void 0?r===n.value&&(m.checked=!0):e.default===n.value&&(m.checked=!0),h.appendChild(m),h.appendChild(document.createTextNode(n.label)),t.appendChild(h)});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 c=document.createElement("input");c.type="checkbox",c.classList.add("voc-form-checkbox"),(e.key||e.name)&&(c.name=e.name||e.key,e.key&&(c.id=`voc-form-${e.key}`)),a&&c.classList.add("form-check-input"),e.required&&(c.required=!0),r!==void 0?c.checked=!!r:e.default&&(c.checked=!!e.default),n.appendChild(c),n.appendChild(document.createTextNode(e.label||"")),t.appendChild(n)}v=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));let n=e.default||r||"";if(n){let c=(n.match(/\n/g)||[]).length,h=80,m=n.split(`
2
+ `).reduce((_,H)=>Math.max(_,H.length),0),L=Math.ceil(m/h)||1,N=Math.max(2,c+L);t.rows=N,t.style.resize="vertical"}e.width&&(t.style.width=e.width),e.required&&(t.required=!0),l(t,e.validation),v=t;break}case"select":{let t=document.createElement("select");if(t.classList.add("voc-form-select"),a&&t.classList.add("form-select"),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){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 c=document.createElement("option");c.value=n.value,c.textContent=n.label,Array.isArray(r)?r.includes(n.value)&&(c.selected=!0):r!==void 0?r===n.value&&(c.selected=!0):e.default===n.value&&(c.selected=!0),t.appendChild(c)}),e.width&&(t.style.width=e.width),v=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,c)=>{let h=document.createElement("label");h.classList.add("voc-form-radio-label"),a&&h.classList.add("form-check"),h.style.display=e.direction==="horizontal"?"inline-block":"block",e.width&&(h.style.width=e.width);let m=document.createElement("input");m.type="radio",m.classList.add("voc-form-radio"),a&&m.classList.add("form-check-input"),m.name=e.name||e.key||"",m.value=n.value,e.key&&(m.id=`voc-form-${e.key}-${c}`),Array.isArray(r)?r.includes(n.value)&&(m.checked=!0):r!==void 0?r===n.value&&(m.checked=!0):e.default===n.value&&(m.checked=!0),h.appendChild(m),h.appendChild(document.createTextNode(n.label)),t.appendChild(h)}),v=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),v=t;break}case"avatar":{v=A(e,f||{},r);break}case"audio_select":{v=S(e,f||{},r);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),l(t,e.validation),v=t;break}}if(v&&x.appendChild(v),e.hint_text){let t=document.createElement("small");t.className="voc-form-hint",t.textContent=e.hint_text,x.appendChild(t)}return x}y.fields.forEach(e=>{if(e.type==="group"&&"items"in e){let s=e;if(a){let g=document.createElement("div");g.className="card voc-form-group-card mb-3";let r=s.label||s.header?.title,x=s.description||s.header?.description;if(r||x){let t=document.createElement("div");if(t.className="card-header voc-form-group-head",r){let n=document.createElement("h5");n.className="mb-0 voc-form-group-label",n.textContent=r,t.appendChild(n)}if(x){let n=document.createElement("p");n.className="mb-0 voc-form-group-description",n.textContent=x,t.appendChild(n)}g.appendChild(t)}let v=document.createElement("div");v.className="card-body voc-form-group-body",s.items.forEach(t=>{if(t.type==="row"&&"items"in t){let n=t,c=document.createElement("div");if(c.className="voc-form-group voc-form-row mb-3",n.label){let m=document.createElement("h6");m.className="voc-form-row-label",m.textContent=n.label,c.appendChild(m)}let h=document.createElement("div");h.className="voc-form-row-items "+(n.direction||"horizontal"),n.items.forEach(m=>{let L=k(m);L&&h.appendChild(L)}),c.appendChild(h),v.appendChild(c)}else{let n=k(t);n&&v.appendChild(n)}}),g.appendChild(v),i.appendChild(g)}else{let g=document.createElement("div");g.className="voc-form-group voc-form-group-wrapper",a&&g.classList.add("mb-3");let r=s.label||s.header?.title,x=s.description||s.header?.description;if(r||x){let v=document.createElement("div");if(v.className="voc-form-group-head",r){let t=document.createElement("h3");t.className="voc-form-group-label",t.textContent=r,v.appendChild(t)}if(x){let t=document.createElement("p");t.className="voc-form-group-description",t.textContent=x,v.appendChild(t)}g.appendChild(v)}s.items.forEach(v=>{if(v.type==="row"&&"items"in v){let t=v,n=document.createElement("div");if(n.className="voc-form-group voc-form-row",a&&n.classList.add("mb-3"),t.label){let h=document.createElement("h4");h.className="voc-form-row-label",h.textContent=t.label,n.appendChild(h)}let c=document.createElement("div");c.className="voc-form-row-items "+(t.direction||"horizontal"),t.items.forEach(h=>{let m=k(h);m&&c.appendChild(m)}),n.appendChild(c),g.appendChild(n)}else{let t=k(v);t&&g.appendChild(t)}}),i.appendChild(g)}return}if(e.type==="row"&&"items"in e){let s=document.createElement("div");if(s.className="voc-form-group voc-form-row",a&&s.classList.add("mb-3"),e.label){let r=document.createElement("h3");r.className="voc-form-row-label",r.textContent=e.label,s.appendChild(r)}if(e.description){let r=document.createElement("p");r.className="voc-form-row-description",r.textContent=e.description,s.appendChild(r)}let g=document.createElement("div");g.className="voc-form-row-items "+(e.direction||"horizontal"),s.appendChild(g),e.items.forEach(r=>{let x=k(r);x&&g.appendChild(x)}),i.appendChild(s)}else{let s=k(e);s&&i.appendChild(s)}});let w=document.createElement("button");return w.type="submit",w.className="voc-form-submit",w.textContent="Submit",a&&w.classList.add("btn","btn-primary"),i.appendChild(w),i}let d=u();b[0].appendChild(d);let E=y?.submit_config??f?.submit_config??null;return E&&d.addEventListener("submit",a=>{a.preventDefault(),R(d,E,(i,p)=>{f?.onSubmitResult&&f.onSubmitResult(i,p)})}),{element:d,validate:()=>{let a=[];return d.querySelectorAll(":invalid").forEach(p=>{let l=p.validationMessage;a.push({element:p,message:l})}),a},getValues:()=>C(d),onSubmit:a=>{d.addEventListener("submit",i=>{i.preventDefault();let p=C(d);a(p,i)})}}}var T={renderForm:M};var W=T,z={FormsLib:T};return I(j);})();
package/dist/main.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var F=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var H=Object.prototype.hasOwnProperty;var q=(y,d)=>{for(var p in d)F(y,p,{get:d[p],enumerable:!0})},B=(y,d,p,f)=>{if(d&&typeof d=="object"||typeof d=="function")for(let v of A(d))!H.call(y,v)&&v!==p&&F(y,v,{get:()=>d[v],enumerable:!(f=S(d,v))||f.enumerable});return y};var $=y=>B(F({},"__esModule",{value:!0}),y);var V={};q(V,{FormsLib:()=>z,default:()=>W});module.exports=$(V);function C(y,d=!0){let p=new FormData(y);if(d)return p;let f={};return p.forEach((v,u)=>{let E=(v instanceof File,v);Object.prototype.hasOwnProperty.call(f,u)?Array.isArray(f[u])?f[u].push(E):f[u]=[f[u],E]:f[u]=E}),f}async function N(y,d,p){let f=d.url,v={"Content-Type":"application/json"};d?.api_token&&(v.Authorization=`Bearer ${d.api_token}`);let u=C(y);if(d?.additional_data)for(let[a,g]of Object.entries(d.additional_data))u.append(a,g);let E,s=u instanceof FormData;E={method:"POST",headers:{Authorization:`Bearer ${d.api_token}`,...s?{}:{"Content-Type":"application/json"},Accept:"application/json"},body:s?u:JSON.stringify(Object.fromEntries(u.entries()))};try{fetch(f,E).then(a=>{let g=a.headers.get("content-type");if(!a.ok){let w=a.text();throw new Error(`HTTP ${a.status}: ${w}`)}return g&&g.includes("application/json")?a.json():a.text()}).then(a=>{p&&p(a,null)}).catch(a=>{p&&p(null,a)})}catch(a){p&&p(null,a)}}function R(y,d,p){let f=[];if(typeof y=="string"?f=Array.from(document.querySelectorAll(y)):f=[y],f.length===0)return null;function v(){let s=p?.style==="bootstrap",a=document.createElement("form");a.classList.add("voc-form"),s&&a.classList.add("needs-validation"),a.id=d.id;let g=document.createElement("h2");g.textContent=d.form_name,a.appendChild(g);function w(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 k(e){if(!e.key&&!e.label)return null;let i=d.default_values||{},h=e.name||e.key,o=h?i[h]:void 0,b=document.createElement("div");if(b.className="voc-form-group",s&&b.classList.add("mb-3"),e.label){let t=document.createElement("label");t.classList.add("voc-form-label"),s&&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?" *":""),b.appendChild(t)}let m=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,c)=>{let l=document.createElement("label");l.classList.add("voc-form-checkbox-label"),s&&l.classList.add("form-check"),l.style.display=e.direction==="horizontal"?"inline-block":"block",e.width&&(l.style.width=e.width);let r=document.createElement("input");r.type="checkbox",r.classList.add("voc-form-checkbox"),s&&r.classList.add("form-check-input"),r.name=e.name||e.key||"",r.value=n.value,e.key&&(r.id=`voc-form-${e.key}-${c}`),e.required&&(r.required=!0),Array.isArray(o)?o.includes(n.value)&&(r.checked=!0):o!==void 0?o===n.value&&(r.checked=!0):e.default===n.value&&(r.checked=!0),l.appendChild(r),l.appendChild(document.createTextNode(n.label)),t.appendChild(l)});else{let n=document.createElement("label");n.classList.add("voc-form-checkbox-label"),s&&n.classList.add("form-check"),e.width&&(n.style.width=e.width);let c=document.createElement("input");c.type="checkbox",c.classList.add("voc-form-checkbox"),(e.key||e.name)&&(c.name=e.name||e.key,e.key&&(c.id=`voc-form-${e.key}`)),s&&c.classList.add("form-check-input"),e.required&&(c.required=!0),o!==void 0?c.checked=!!o:e.default&&(c.checked=!!e.default),n.appendChild(c),n.appendChild(document.createTextNode(e.label||"")),t.appendChild(n)}m=t;break}case"textarea":{let t=document.createElement("textarea");t.classList.add("voc-form-textarea"),s&&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),o!=null?t.value=String(o):e.default!==void 0&&e.default!==null&&(t.value=String(e.default));let n=e.default||o||"";if(n){let c=(n.match(/\n/g)||[]).length,l=80,r=n.split(`
2
- `).reduce((D,M)=>Math.max(D,M.length),0),L=Math.ceil(r/l)||1,_=Math.max(2,c+L);t.rows=_,t.style.resize="vertical"}e.width&&(t.style.width=e.width),e.required&&(t.required=!0),w(t,e.validation),m=t;break}case"select":{let t=document.createElement("select");if(t.classList.add("voc-form-select"),s&&t.classList.add("form-select"),s&&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){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 c=document.createElement("option");c.value=n.value,c.textContent=n.label,Array.isArray(o)?o.includes(n.value)&&(c.selected=!0):o!==void 0?o===n.value&&(c.selected=!0):e.default===n.value&&(c.selected=!0),t.appendChild(c)}),e.width&&(t.style.width=e.width),m=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,c)=>{let l=document.createElement("label");l.classList.add("voc-form-radio-label"),s&&l.classList.add("form-check"),l.style.display=e.direction==="horizontal"?"inline-block":"block",e.width&&(l.style.width=e.width);let r=document.createElement("input");r.type="radio",r.classList.add("voc-form-radio"),s&&r.classList.add("form-check-input"),r.name=e.name||e.key||"",r.value=n.value,e.key&&(r.id=`voc-form-${e.key}-${c}`),Array.isArray(o)?o.includes(n.value)&&(r.checked=!0):o!==void 0?o===n.value&&(r.checked=!0):e.default===n.value&&(r.checked=!0),l.appendChild(r),l.appendChild(document.createTextNode(n.label)),t.appendChild(l)}),m=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"),s&&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),m=t;break}default:{let t=document.createElement("input");t.type=e.type||"text",t.classList.add("voc-form-input"),s&&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),o!=null?t.value=String(o):e.default!==void 0&&e.default!==null&&(t.value=String(e.default)),e.width&&(t.style.width=e.width),e.required&&(t.required=!0),w(t,e.validation),m=t;break}}if(m&&b.appendChild(m),e.hint_text){let t=document.createElement("small");t.className="voc-form-hint",t.textContent=e.hint_text,b.appendChild(t)}return b}d.fields.forEach(e=>{if(e.type==="group"&&"items"in e){let i=e;if(s){let h=document.createElement("div");h.className="card voc-form-group-card mb-3";let o=i.label||i.header?.title,b=i.description||i.header?.description;if(o||b){let t=document.createElement("div");if(t.className="card-header voc-form-group-head",o){let n=document.createElement("h5");n.className="mb-0 voc-form-group-label",n.textContent=o,t.appendChild(n)}if(b){let n=document.createElement("p");n.className="mb-0 voc-form-group-description",n.textContent=b,t.appendChild(n)}h.appendChild(t)}let m=document.createElement("div");m.className="card-body voc-form-group-body",i.items.forEach(t=>{if(t.type==="row"&&"items"in t){let n=t,c=document.createElement("div");if(c.className="voc-form-group voc-form-row mb-3",n.label){let r=document.createElement("h6");r.className="voc-form-row-label",r.textContent=n.label,c.appendChild(r)}let l=document.createElement("div");l.className="voc-form-row-items "+(n.direction||"horizontal"),n.items.forEach(r=>{let L=k(r);L&&l.appendChild(L)}),c.appendChild(l),m.appendChild(c)}else{let n=k(t);n&&m.appendChild(n)}}),h.appendChild(m),a.appendChild(h)}else{let h=document.createElement("div");h.className="voc-form-group voc-form-group-wrapper",s&&h.classList.add("mb-3");let o=i.label||i.header?.title,b=i.description||i.header?.description;if(o||b){let m=document.createElement("div");if(m.className="voc-form-group-head",o){let t=document.createElement("h3");t.className="voc-form-group-label",t.textContent=o,m.appendChild(t)}if(b){let t=document.createElement("p");t.className="voc-form-group-description",t.textContent=b,m.appendChild(t)}h.appendChild(m)}i.items.forEach(m=>{if(m.type==="row"&&"items"in m){let t=m,n=document.createElement("div");if(n.className="voc-form-group voc-form-row",s&&n.classList.add("mb-3"),t.label){let l=document.createElement("h4");l.className="voc-form-row-label",l.textContent=t.label,n.appendChild(l)}let c=document.createElement("div");c.className="voc-form-row-items "+(t.direction||"horizontal"),t.items.forEach(l=>{let r=k(l);r&&c.appendChild(r)}),n.appendChild(c),h.appendChild(n)}else{let t=k(m);t&&h.appendChild(t)}}),a.appendChild(h)}return}if(e.type==="row"&&"items"in e){let i=document.createElement("div");if(i.className="voc-form-group voc-form-row",s&&i.classList.add("mb-3"),e.label){let o=document.createElement("h3");o.className="voc-form-row-label",o.textContent=e.label,i.appendChild(o)}if(e.description){let o=document.createElement("p");o.className="voc-form-row-description",o.textContent=e.description,i.appendChild(o)}let h=document.createElement("div");h.className="voc-form-row-items "+(e.direction||"horizontal"),i.appendChild(h),e.items.forEach(o=>{let b=k(o);b&&h.appendChild(b)}),a.appendChild(i)}else{let i=k(e);i&&a.appendChild(i)}});let x=document.createElement("button");return x.type="submit",x.className="voc-form-submit",x.textContent="Submit",s&&x.classList.add("btn","btn-primary"),a.appendChild(x),a}let u=v();f[0].appendChild(u);let E=d?.submit_config??p?.submit_config??null;return E&&u.addEventListener("submit",s=>{s.preventDefault(),N(u,E,(a,g)=>{p?.onSubmitResult&&p.onSubmitResult(a,g)})}),{element:u,validate:()=>{let s=[];return u.querySelectorAll(":invalid").forEach(g=>{let w=g.validationMessage;s.push({element:g,message:w})}),s},getValues:()=>C(u),onSubmit:s=>{u.addEventListener("submit",a=>{a.preventDefault();let g=C(u);s(g,a)})}}}var T={renderForm:R};var z=T,W={FormsLib:T};0&&(module.exports={FormsLib});
1
+ "use strict";var F=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var q=Object.prototype.hasOwnProperty;var $=(o,y)=>{for(var f in y)F(o,f,{get:y[f],enumerable:!0})},O=(o,y,f,b)=>{if(y&&typeof y=="object"||typeof y=="function")for(let u of B(y))!q.call(o,u)&&u!==f&&F(o,u,{get:()=>y[u],enumerable:!(b=D(y,u))||b.enumerable});return o};var I=o=>O(F({},"__esModule",{value:!0}),o);var j={};$(j,{FormsLib:()=>W,default:()=>z});module.exports=I(j);function A(o,y,f){let b=y?.style==="bootstrap",u=document.createElement("div");u.className="voc-form-avatar-wrapper",b&&u.classList.add("d-flex","align-items-center","gap-3");let d=document.createElement("img");d.className="voc-form-avatar-preview",d.alt=o.label||"avatar",b&&(d.classList.add("img-thumbnail","rounded-circle"),d.style.width=d.style.height="64px",d.style.objectFit="cover");let E=f!=null?String(f):o.default!==void 0&&o.default!==null?String(o.default):"";E?d.src=E:(d.src="",d.style.display="none");let a=document.createElement("input");a.type="file",a.accept=o.accept||"image/*",a.className="voc-form-avatar-input",b&&a.classList.add("form-control"),(o.key||o.name)&&(a.name=o.name||o.key,o.key&&(a.id=`voc-form-${o.key}`));let i=document.createElement("input");if(i.type="hidden",(o.key||o.name)&&(i.name=(o.name||o.key)+"_url"),i.value=E||"",a.addEventListener("change",p=>{let l=p.target;if(l.files&&l.files.length>0){let k=l.files[0],w=new FileReader;w.onload=()=>{d.src=String(w.result),d.style.display="",i.value=""},w.readAsDataURL(k)}}),b){let p=document.createElement("div");p.style.flex="1",p.appendChild(a),p.appendChild(i),u.appendChild(d),u.appendChild(p)}else u.appendChild(d),u.appendChild(a),u.appendChild(i);return u}function S(o,y,f){let b=y?.style==="bootstrap",u=document.createElement("div");if(u.className="voc-form-audio-select",u.style.display="flex",u.style.flexDirection="column",u.style.gap="8px",!o.options||o.options.length===0)return u;let d=o.name||o.key||`audio_select_${Math.random().toString(36).substr(2,6)}`,E;return Array.isArray(f)?E=f[0]:f!==void 0?E=f:o.default!==void 0&&(E=o.default),o.options.forEach((a,i)=>{let p=document.createElement("div");p.className="voc-form-audio-item",p.style.display="flex",p.style.alignItems="flex-start",p.style.gap="8px",b&&p.classList.add("form-check");let l=document.createElement("input");l.type="radio",l.name=d,l.value=a.value,l.className="voc-form-audio-radio",o.key&&(l.id=`voc-form-${o.key}-${i}`),o.required&&i===0&&(l.required=!0),l.style.position="absolute",l.style.width="1px",l.style.height="1px",l.style.margin="0",l.style.padding="0",l.style.clip="rect(0 0 0 0)",l.style.clipPath="inset(50%)",l.style.overflow="hidden",l.style.border="0",E!==void 0&&(Array.isArray(E)?l.checked=E.includes(a.value):l.checked=String(E)===String(a.value));let k=()=>{l.checked?p.classList.add("selected"):p.classList.remove("selected")};l.addEventListener("change",()=>{u.querySelectorAll(".voc-form-audio-item").forEach(n=>n.classList.remove("selected")),k()}),l.checked&&p.classList.add("selected");let w=document.createElement("label");w.className="voc-form-audio-label",b&&w.classList.add("form-check-label"),w.htmlFor=l.id||"",w.textContent=a.label||a.value,w.tabIndex=0;let e=document.createElement("div");e.className="voc-form-audio-control",e.style.display="flex",e.style.alignItems="flex-start",e.style.gap="8px";let s=null;if(a.audio_link){let t=document.createElement("button");t.type="button",t.className="voc-form-audio-play",b&&t.classList.add("btn","btn-sm","btn-outline-secondary"),t.setAttribute("aria-label",`Play ${a.label||a.value}`);let n="http://www.w3.org/2000/svg",c=document.createElementNS(n,"svg");c.setAttribute("viewBox","0 0 24 24"),c.setAttribute("width","16"),c.setAttribute("height","16"),c.setAttribute("aria-hidden","true");let h=document.createElementNS(n,"path");h.setAttribute("d","M8 5v14l11-7z"),h.setAttribute("fill","currentColor"),c.appendChild(h),t.appendChild(c),s=document.createElement("audio"),s.src=a.audio_link,s.preload="none",s.style.display="none",t.addEventListener("click",()=>{try{if(!s)return;u.querySelectorAll("audio").forEach(L=>{try{L.pause(),L.currentTime=0}catch{}}),s.play()}catch(m){console.warn("audio play failed",m)}}),e.appendChild(t),e.appendChild(s)}let g=document.createElement("div");g.className="voc-form-item-detail",g.style.display="flex",g.style.flexDirection="column",g.style.gap="4px";let r=document.createElement("div");r.className="voc-form-item-top",r.style.display="flex",r.style.alignItems="center",r.style.gap="8px",r.appendChild(l),r.appendChild(w);let x=document.createElement("div");x.className="voc-form-item-description";let v=a.description||a.hint_text||"";v&&(x.textContent=v),g.appendChild(r),g.appendChild(x),e.appendChild(g),p.appendChild(e),r.addEventListener("click",t=>{let n=t.target;n&&n.closest(".voc-form-audio-play")||(l.checked=!0,l.dispatchEvent(new Event("change",{bubbles:!0})))}),p.addEventListener("click",t=>{let n=t.target;n&&n.closest(".voc-form-audio-play")||(l.checked=!0,l.dispatchEvent(new Event("change",{bubbles:!0})))}),u.appendChild(p)}),u}function C(o,y=!0){let f=new FormData(o);if(y)return f;let b={};return f.forEach((u,d)=>{let E=(u instanceof File,u);Object.prototype.hasOwnProperty.call(b,d)?Array.isArray(b[d])?b[d].push(E):b[d]=[b[d],E]:b[d]=E}),b}async function R(o,y,f){let b=y.url,u={"Content-Type":"application/json"};y?.api_token&&(u.Authorization=`Bearer ${y.api_token}`);let d=C(o);if(y?.additional_data)for(let[i,p]of Object.entries(y.additional_data))d.append(i,p);let E,a=d instanceof FormData;E={method:"POST",headers:{Authorization:`Bearer ${y.api_token}`,...a?{}:{"Content-Type":"application/json"},Accept:"application/json"},body:a?d:JSON.stringify(Object.fromEntries(d.entries()))};try{fetch(b,E).then(i=>{let p=i.headers.get("content-type");if(!i.ok){let l=i.text();throw new Error(`HTTP ${i.status}: ${l}`)}return p&&p.includes("application/json")?i.json():i.text()}).then(i=>{f&&f(i,null)}).catch(i=>{f&&f(null,i)})}catch(i){f&&f(null,i)}}function M(o,y,f){let b=[];if(typeof o=="string"?b=Array.from(document.querySelectorAll(o)):b=[o],b.length===0)return null;function u(){let a=f?.style==="bootstrap",i=document.createElement("form");i.classList.add("voc-form"),a&&i.classList.add("needs-validation"),i.id=y.id;let p=document.createElement("h2");p.textContent=y.form_name,i.appendChild(p);function l(e,s){s&&(s.min_length!==void 0&&(e.minLength=s.min_length),s.max_length!==void 0&&(e.maxLength=s.max_length),s.regex&&(e instanceof HTMLInputElement?e.pattern=s.regex:e.dataset.pattern=s.regex))}function k(e){if(!e.key&&!e.label)return null;let s=y.default_values||{},g=e.name||e.key,r=g?s[g]:void 0,x=document.createElement("div");if(x.className="voc-form-group",a&&x.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?" *":""),x.appendChild(t)}let v=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,c)=>{let h=document.createElement("label");h.classList.add("voc-form-checkbox-label"),a&&h.classList.add("form-check"),h.style.display=e.direction==="horizontal"?"inline-block":"block",e.width&&(h.style.width=e.width);let m=document.createElement("input");m.type="checkbox",m.classList.add("voc-form-checkbox"),a&&m.classList.add("form-check-input"),m.name=e.name||e.key||"",m.value=n.value,e.key&&(m.id=`voc-form-${e.key}-${c}`),e.required&&(m.required=!0),Array.isArray(r)?r.includes(n.value)&&(m.checked=!0):r!==void 0?r===n.value&&(m.checked=!0):e.default===n.value&&(m.checked=!0),h.appendChild(m),h.appendChild(document.createTextNode(n.label)),t.appendChild(h)});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 c=document.createElement("input");c.type="checkbox",c.classList.add("voc-form-checkbox"),(e.key||e.name)&&(c.name=e.name||e.key,e.key&&(c.id=`voc-form-${e.key}`)),a&&c.classList.add("form-check-input"),e.required&&(c.required=!0),r!==void 0?c.checked=!!r:e.default&&(c.checked=!!e.default),n.appendChild(c),n.appendChild(document.createTextNode(e.label||"")),t.appendChild(n)}v=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));let n=e.default||r||"";if(n){let c=(n.match(/\n/g)||[]).length,h=80,m=n.split(`
2
+ `).reduce((_,H)=>Math.max(_,H.length),0),L=Math.ceil(m/h)||1,N=Math.max(2,c+L);t.rows=N,t.style.resize="vertical"}e.width&&(t.style.width=e.width),e.required&&(t.required=!0),l(t,e.validation),v=t;break}case"select":{let t=document.createElement("select");if(t.classList.add("voc-form-select"),a&&t.classList.add("form-select"),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){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 c=document.createElement("option");c.value=n.value,c.textContent=n.label,Array.isArray(r)?r.includes(n.value)&&(c.selected=!0):r!==void 0?r===n.value&&(c.selected=!0):e.default===n.value&&(c.selected=!0),t.appendChild(c)}),e.width&&(t.style.width=e.width),v=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,c)=>{let h=document.createElement("label");h.classList.add("voc-form-radio-label"),a&&h.classList.add("form-check"),h.style.display=e.direction==="horizontal"?"inline-block":"block",e.width&&(h.style.width=e.width);let m=document.createElement("input");m.type="radio",m.classList.add("voc-form-radio"),a&&m.classList.add("form-check-input"),m.name=e.name||e.key||"",m.value=n.value,e.key&&(m.id=`voc-form-${e.key}-${c}`),Array.isArray(r)?r.includes(n.value)&&(m.checked=!0):r!==void 0?r===n.value&&(m.checked=!0):e.default===n.value&&(m.checked=!0),h.appendChild(m),h.appendChild(document.createTextNode(n.label)),t.appendChild(h)}),v=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),v=t;break}case"avatar":{v=A(e,f||{},r);break}case"audio_select":{v=S(e,f||{},r);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),l(t,e.validation),v=t;break}}if(v&&x.appendChild(v),e.hint_text){let t=document.createElement("small");t.className="voc-form-hint",t.textContent=e.hint_text,x.appendChild(t)}return x}y.fields.forEach(e=>{if(e.type==="group"&&"items"in e){let s=e;if(a){let g=document.createElement("div");g.className="card voc-form-group-card mb-3";let r=s.label||s.header?.title,x=s.description||s.header?.description;if(r||x){let t=document.createElement("div");if(t.className="card-header voc-form-group-head",r){let n=document.createElement("h5");n.className="mb-0 voc-form-group-label",n.textContent=r,t.appendChild(n)}if(x){let n=document.createElement("p");n.className="mb-0 voc-form-group-description",n.textContent=x,t.appendChild(n)}g.appendChild(t)}let v=document.createElement("div");v.className="card-body voc-form-group-body",s.items.forEach(t=>{if(t.type==="row"&&"items"in t){let n=t,c=document.createElement("div");if(c.className="voc-form-group voc-form-row mb-3",n.label){let m=document.createElement("h6");m.className="voc-form-row-label",m.textContent=n.label,c.appendChild(m)}let h=document.createElement("div");h.className="voc-form-row-items "+(n.direction||"horizontal"),n.items.forEach(m=>{let L=k(m);L&&h.appendChild(L)}),c.appendChild(h),v.appendChild(c)}else{let n=k(t);n&&v.appendChild(n)}}),g.appendChild(v),i.appendChild(g)}else{let g=document.createElement("div");g.className="voc-form-group voc-form-group-wrapper",a&&g.classList.add("mb-3");let r=s.label||s.header?.title,x=s.description||s.header?.description;if(r||x){let v=document.createElement("div");if(v.className="voc-form-group-head",r){let t=document.createElement("h3");t.className="voc-form-group-label",t.textContent=r,v.appendChild(t)}if(x){let t=document.createElement("p");t.className="voc-form-group-description",t.textContent=x,v.appendChild(t)}g.appendChild(v)}s.items.forEach(v=>{if(v.type==="row"&&"items"in v){let t=v,n=document.createElement("div");if(n.className="voc-form-group voc-form-row",a&&n.classList.add("mb-3"),t.label){let h=document.createElement("h4");h.className="voc-form-row-label",h.textContent=t.label,n.appendChild(h)}let c=document.createElement("div");c.className="voc-form-row-items "+(t.direction||"horizontal"),t.items.forEach(h=>{let m=k(h);m&&c.appendChild(m)}),n.appendChild(c),g.appendChild(n)}else{let t=k(v);t&&g.appendChild(t)}}),i.appendChild(g)}return}if(e.type==="row"&&"items"in e){let s=document.createElement("div");if(s.className="voc-form-group voc-form-row",a&&s.classList.add("mb-3"),e.label){let r=document.createElement("h3");r.className="voc-form-row-label",r.textContent=e.label,s.appendChild(r)}if(e.description){let r=document.createElement("p");r.className="voc-form-row-description",r.textContent=e.description,s.appendChild(r)}let g=document.createElement("div");g.className="voc-form-row-items "+(e.direction||"horizontal"),s.appendChild(g),e.items.forEach(r=>{let x=k(r);x&&g.appendChild(x)}),i.appendChild(s)}else{let s=k(e);s&&i.appendChild(s)}});let w=document.createElement("button");return w.type="submit",w.className="voc-form-submit",w.textContent="Submit",a&&w.classList.add("btn","btn-primary"),i.appendChild(w),i}let d=u();b[0].appendChild(d);let E=y?.submit_config??f?.submit_config??null;return E&&d.addEventListener("submit",a=>{a.preventDefault(),R(d,E,(i,p)=>{f?.onSubmitResult&&f.onSubmitResult(i,p)})}),{element:d,validate:()=>{let a=[];return d.querySelectorAll(":invalid").forEach(p=>{let l=p.validationMessage;a.push({element:p,message:l})}),a},getValues:()=>C(d),onSubmit:a=>{d.addEventListener("submit",i=>{i.preventDefault();let p=C(d);a(p,i)})}}}var T={renderForm:M};var W=T,z={FormsLib:T};0&&(module.exports={FormsLib});
package/dist/main.mjs CHANGED
@@ -1,2 +1,2 @@
1
- function C(v,h=!0){let f=new FormData(v);if(h)return f;let b={};return f.forEach((E,m)=>{let g=(E instanceof File,E);Object.prototype.hasOwnProperty.call(b,m)?Array.isArray(b[m])?b[m].push(g):b[m]=[b[m],g]:b[m]=g}),b}async function T(v,h,f){let b=h.url,E={"Content-Type":"application/json"};h?.api_token&&(E.Authorization=`Bearer ${h.api_token}`);let m=C(v);if(h?.additional_data)for(let[a,y]of Object.entries(h.additional_data))m.append(a,y);let g,s=m instanceof FormData;g={method:"POST",headers:{Authorization:`Bearer ${h.api_token}`,...s?{}:{"Content-Type":"application/json"},Accept:"application/json"},body:s?m:JSON.stringify(Object.fromEntries(m.entries()))};try{fetch(b,g).then(a=>{let y=a.headers.get("content-type");if(!a.ok){let w=a.text();throw new Error(`HTTP ${a.status}: ${w}`)}return y&&y.includes("application/json")?a.json():a.text()}).then(a=>{f&&f(a,null)}).catch(a=>{f&&f(null,a)})}catch(a){f&&f(null,a)}}function N(v,h,f){let b=[];if(typeof v=="string"?b=Array.from(document.querySelectorAll(v)):b=[v],b.length===0)return null;function E(){let s=f?.style==="bootstrap",a=document.createElement("form");a.classList.add("voc-form"),s&&a.classList.add("needs-validation"),a.id=h.id;let y=document.createElement("h2");y.textContent=h.form_name,a.appendChild(y);function w(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 k(e){if(!e.key&&!e.label)return null;let i=h.default_values||{},u=e.name||e.key,o=u?i[u]:void 0,p=document.createElement("div");if(p.className="voc-form-group",s&&p.classList.add("mb-3"),e.label){let t=document.createElement("label");t.classList.add("voc-form-label"),s&&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?" *":""),p.appendChild(t)}let d=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,c)=>{let l=document.createElement("label");l.classList.add("voc-form-checkbox-label"),s&&l.classList.add("form-check"),l.style.display=e.direction==="horizontal"?"inline-block":"block",e.width&&(l.style.width=e.width);let r=document.createElement("input");r.type="checkbox",r.classList.add("voc-form-checkbox"),s&&r.classList.add("form-check-input"),r.name=e.name||e.key||"",r.value=n.value,e.key&&(r.id=`voc-form-${e.key}-${c}`),e.required&&(r.required=!0),Array.isArray(o)?o.includes(n.value)&&(r.checked=!0):o!==void 0?o===n.value&&(r.checked=!0):e.default===n.value&&(r.checked=!0),l.appendChild(r),l.appendChild(document.createTextNode(n.label)),t.appendChild(l)});else{let n=document.createElement("label");n.classList.add("voc-form-checkbox-label"),s&&n.classList.add("form-check"),e.width&&(n.style.width=e.width);let c=document.createElement("input");c.type="checkbox",c.classList.add("voc-form-checkbox"),(e.key||e.name)&&(c.name=e.name||e.key,e.key&&(c.id=`voc-form-${e.key}`)),s&&c.classList.add("form-check-input"),e.required&&(c.required=!0),o!==void 0?c.checked=!!o:e.default&&(c.checked=!!e.default),n.appendChild(c),n.appendChild(document.createTextNode(e.label||"")),t.appendChild(n)}d=t;break}case"textarea":{let t=document.createElement("textarea");t.classList.add("voc-form-textarea"),s&&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),o!=null?t.value=String(o):e.default!==void 0&&e.default!==null&&(t.value=String(e.default));let n=e.default||o||"";if(n){let c=(n.match(/\n/g)||[]).length,l=80,r=n.split(`
2
- `).reduce((_,D)=>Math.max(_,D.length),0),L=Math.ceil(r/l)||1,R=Math.max(2,c+L);t.rows=R,t.style.resize="vertical"}e.width&&(t.style.width=e.width),e.required&&(t.required=!0),w(t,e.validation),d=t;break}case"select":{let t=document.createElement("select");if(t.classList.add("voc-form-select"),s&&t.classList.add("form-select"),s&&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){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 c=document.createElement("option");c.value=n.value,c.textContent=n.label,Array.isArray(o)?o.includes(n.value)&&(c.selected=!0):o!==void 0?o===n.value&&(c.selected=!0):e.default===n.value&&(c.selected=!0),t.appendChild(c)}),e.width&&(t.style.width=e.width),d=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,c)=>{let l=document.createElement("label");l.classList.add("voc-form-radio-label"),s&&l.classList.add("form-check"),l.style.display=e.direction==="horizontal"?"inline-block":"block",e.width&&(l.style.width=e.width);let r=document.createElement("input");r.type="radio",r.classList.add("voc-form-radio"),s&&r.classList.add("form-check-input"),r.name=e.name||e.key||"",r.value=n.value,e.key&&(r.id=`voc-form-${e.key}-${c}`),Array.isArray(o)?o.includes(n.value)&&(r.checked=!0):o!==void 0?o===n.value&&(r.checked=!0):e.default===n.value&&(r.checked=!0),l.appendChild(r),l.appendChild(document.createTextNode(n.label)),t.appendChild(l)}),d=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"),s&&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),d=t;break}default:{let t=document.createElement("input");t.type=e.type||"text",t.classList.add("voc-form-input"),s&&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),o!=null?t.value=String(o):e.default!==void 0&&e.default!==null&&(t.value=String(e.default)),e.width&&(t.style.width=e.width),e.required&&(t.required=!0),w(t,e.validation),d=t;break}}if(d&&p.appendChild(d),e.hint_text){let t=document.createElement("small");t.className="voc-form-hint",t.textContent=e.hint_text,p.appendChild(t)}return p}h.fields.forEach(e=>{if(e.type==="group"&&"items"in e){let i=e;if(s){let u=document.createElement("div");u.className="card voc-form-group-card mb-3";let o=i.label||i.header?.title,p=i.description||i.header?.description;if(o||p){let t=document.createElement("div");if(t.className="card-header voc-form-group-head",o){let n=document.createElement("h5");n.className="mb-0 voc-form-group-label",n.textContent=o,t.appendChild(n)}if(p){let n=document.createElement("p");n.className="mb-0 voc-form-group-description",n.textContent=p,t.appendChild(n)}u.appendChild(t)}let d=document.createElement("div");d.className="card-body voc-form-group-body",i.items.forEach(t=>{if(t.type==="row"&&"items"in t){let n=t,c=document.createElement("div");if(c.className="voc-form-group voc-form-row mb-3",n.label){let r=document.createElement("h6");r.className="voc-form-row-label",r.textContent=n.label,c.appendChild(r)}let l=document.createElement("div");l.className="voc-form-row-items "+(n.direction||"horizontal"),n.items.forEach(r=>{let L=k(r);L&&l.appendChild(L)}),c.appendChild(l),d.appendChild(c)}else{let n=k(t);n&&d.appendChild(n)}}),u.appendChild(d),a.appendChild(u)}else{let u=document.createElement("div");u.className="voc-form-group voc-form-group-wrapper",s&&u.classList.add("mb-3");let o=i.label||i.header?.title,p=i.description||i.header?.description;if(o||p){let d=document.createElement("div");if(d.className="voc-form-group-head",o){let t=document.createElement("h3");t.className="voc-form-group-label",t.textContent=o,d.appendChild(t)}if(p){let t=document.createElement("p");t.className="voc-form-group-description",t.textContent=p,d.appendChild(t)}u.appendChild(d)}i.items.forEach(d=>{if(d.type==="row"&&"items"in d){let t=d,n=document.createElement("div");if(n.className="voc-form-group voc-form-row",s&&n.classList.add("mb-3"),t.label){let l=document.createElement("h4");l.className="voc-form-row-label",l.textContent=t.label,n.appendChild(l)}let c=document.createElement("div");c.className="voc-form-row-items "+(t.direction||"horizontal"),t.items.forEach(l=>{let r=k(l);r&&c.appendChild(r)}),n.appendChild(c),u.appendChild(n)}else{let t=k(d);t&&u.appendChild(t)}}),a.appendChild(u)}return}if(e.type==="row"&&"items"in e){let i=document.createElement("div");if(i.className="voc-form-group voc-form-row",s&&i.classList.add("mb-3"),e.label){let o=document.createElement("h3");o.className="voc-form-row-label",o.textContent=e.label,i.appendChild(o)}if(e.description){let o=document.createElement("p");o.className="voc-form-row-description",o.textContent=e.description,i.appendChild(o)}let u=document.createElement("div");u.className="voc-form-row-items "+(e.direction||"horizontal"),i.appendChild(u),e.items.forEach(o=>{let p=k(o);p&&u.appendChild(p)}),a.appendChild(i)}else{let i=k(e);i&&a.appendChild(i)}});let x=document.createElement("button");return x.type="submit",x.className="voc-form-submit",x.textContent="Submit",s&&x.classList.add("btn","btn-primary"),a.appendChild(x),a}let m=E();b[0].appendChild(m);let g=h?.submit_config??f?.submit_config??null;return g&&m.addEventListener("submit",s=>{s.preventDefault(),T(m,g,(a,y)=>{f?.onSubmitResult&&f.onSubmitResult(a,y)})}),{element:m,validate:()=>{let s=[];return m.querySelectorAll(":invalid").forEach(y=>{let w=y.validationMessage;s.push({element:y,message:w})}),s},getValues:()=>C(m),onSubmit:s=>{m.addEventListener("submit",a=>{a.preventDefault();let y=C(m);s(y,a)})}}}var F={renderForm:N};var V=F,O={FormsLib:F};export{V as FormsLib,O as default};
1
+ function N(m,x,v){let b=x?.style==="bootstrap",f=document.createElement("div");f.className="voc-form-avatar-wrapper",b&&f.classList.add("d-flex","align-items-center","gap-3");let l=document.createElement("img");l.className="voc-form-avatar-preview",l.alt=m.label||"avatar",b&&(l.classList.add("img-thumbnail","rounded-circle"),l.style.width=l.style.height="64px",l.style.objectFit="cover");let g=v!=null?String(v):m.default!==void 0&&m.default!==null?String(m.default):"";g?l.src=g:(l.src="",l.style.display="none");let a=document.createElement("input");a.type="file",a.accept=m.accept||"image/*",a.className="voc-form-avatar-input",b&&a.classList.add("form-control"),(m.key||m.name)&&(a.name=m.name||m.key,m.key&&(a.id=`voc-form-${m.key}`));let o=document.createElement("input");if(o.type="hidden",(m.key||m.name)&&(o.name=(m.name||m.key)+"_url"),o.value=g||"",a.addEventListener("change",p=>{let c=p.target;if(c.files&&c.files.length>0){let k=c.files[0],w=new FileReader;w.onload=()=>{l.src=String(w.result),l.style.display="",o.value=""},w.readAsDataURL(k)}}),b){let p=document.createElement("div");p.style.flex="1",p.appendChild(a),p.appendChild(o),f.appendChild(l),f.appendChild(p)}else f.appendChild(l),f.appendChild(a),f.appendChild(o);return f}function A(m,x,v){let b=x?.style==="bootstrap",f=document.createElement("div");if(f.className="voc-form-audio-select",f.style.display="flex",f.style.flexDirection="column",f.style.gap="8px",!m.options||m.options.length===0)return f;let l=m.name||m.key||`audio_select_${Math.random().toString(36).substr(2,6)}`,g;return Array.isArray(v)?g=v[0]:v!==void 0?g=v:m.default!==void 0&&(g=m.default),m.options.forEach((a,o)=>{let p=document.createElement("div");p.className="voc-form-audio-item",p.style.display="flex",p.style.alignItems="flex-start",p.style.gap="8px",b&&p.classList.add("form-check");let c=document.createElement("input");c.type="radio",c.name=l,c.value=a.value,c.className="voc-form-audio-radio",m.key&&(c.id=`voc-form-${m.key}-${o}`),m.required&&o===0&&(c.required=!0),c.style.position="absolute",c.style.width="1px",c.style.height="1px",c.style.margin="0",c.style.padding="0",c.style.clip="rect(0 0 0 0)",c.style.clipPath="inset(50%)",c.style.overflow="hidden",c.style.border="0",g!==void 0&&(Array.isArray(g)?c.checked=g.includes(a.value):c.checked=String(g)===String(a.value));let k=()=>{c.checked?p.classList.add("selected"):p.classList.remove("selected")};c.addEventListener("change",()=>{f.querySelectorAll(".voc-form-audio-item").forEach(n=>n.classList.remove("selected")),k()}),c.checked&&p.classList.add("selected");let w=document.createElement("label");w.className="voc-form-audio-label",b&&w.classList.add("form-check-label"),w.htmlFor=c.id||"",w.textContent=a.label||a.value,w.tabIndex=0;let e=document.createElement("div");e.className="voc-form-audio-control",e.style.display="flex",e.style.alignItems="flex-start",e.style.gap="8px";let i=null;if(a.audio_link){let t=document.createElement("button");t.type="button",t.className="voc-form-audio-play",b&&t.classList.add("btn","btn-sm","btn-outline-secondary"),t.setAttribute("aria-label",`Play ${a.label||a.value}`);let n="http://www.w3.org/2000/svg",s=document.createElementNS(n,"svg");s.setAttribute("viewBox","0 0 24 24"),s.setAttribute("width","16"),s.setAttribute("height","16"),s.setAttribute("aria-hidden","true");let u=document.createElementNS(n,"path");u.setAttribute("d","M8 5v14l11-7z"),u.setAttribute("fill","currentColor"),s.appendChild(u),t.appendChild(s),i=document.createElement("audio"),i.src=a.audio_link,i.preload="none",i.style.display="none",t.addEventListener("click",()=>{try{if(!i)return;f.querySelectorAll("audio").forEach(L=>{try{L.pause(),L.currentTime=0}catch{}}),i.play()}catch(d){console.warn("audio play failed",d)}}),e.appendChild(t),e.appendChild(i)}let y=document.createElement("div");y.className="voc-form-item-detail",y.style.display="flex",y.style.flexDirection="column",y.style.gap="4px";let r=document.createElement("div");r.className="voc-form-item-top",r.style.display="flex",r.style.alignItems="center",r.style.gap="8px",r.appendChild(c),r.appendChild(w);let E=document.createElement("div");E.className="voc-form-item-description";let h=a.description||a.hint_text||"";h&&(E.textContent=h),y.appendChild(r),y.appendChild(E),e.appendChild(y),p.appendChild(e),r.addEventListener("click",t=>{let n=t.target;n&&n.closest(".voc-form-audio-play")||(c.checked=!0,c.dispatchEvent(new Event("change",{bubbles:!0})))}),p.addEventListener("click",t=>{let n=t.target;n&&n.closest(".voc-form-audio-play")||(c.checked=!0,c.dispatchEvent(new Event("change",{bubbles:!0})))}),f.appendChild(p)}),f}function C(m,x=!0){let v=new FormData(m);if(x)return v;let b={};return v.forEach((f,l)=>{let g=(f instanceof File,f);Object.prototype.hasOwnProperty.call(b,l)?Array.isArray(b[l])?b[l].push(g):b[l]=[b[l],g]:b[l]=g}),b}async function S(m,x,v){let b=x.url,f={"Content-Type":"application/json"};x?.api_token&&(f.Authorization=`Bearer ${x.api_token}`);let l=C(m);if(x?.additional_data)for(let[o,p]of Object.entries(x.additional_data))l.append(o,p);let g,a=l instanceof FormData;g={method:"POST",headers:{Authorization:`Bearer ${x.api_token}`,...a?{}:{"Content-Type":"application/json"},Accept:"application/json"},body:a?l:JSON.stringify(Object.fromEntries(l.entries()))};try{fetch(b,g).then(o=>{let p=o.headers.get("content-type");if(!o.ok){let c=o.text();throw new Error(`HTTP ${o.status}: ${c}`)}return p&&p.includes("application/json")?o.json():o.text()}).then(o=>{v&&v(o,null)}).catch(o=>{v&&v(null,o)})}catch(o){v&&v(null,o)}}function R(m,x,v){let b=[];if(typeof m=="string"?b=Array.from(document.querySelectorAll(m)):b=[m],b.length===0)return null;function f(){let a=v?.style==="bootstrap",o=document.createElement("form");o.classList.add("voc-form"),a&&o.classList.add("needs-validation"),o.id=x.id;let p=document.createElement("h2");p.textContent=x.form_name,o.appendChild(p);function c(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 k(e){if(!e.key&&!e.label)return null;let i=x.default_values||{},y=e.name||e.key,r=y?i[y]:void 0,E=document.createElement("div");if(E.className="voc-form-group",a&&E.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?" *":""),E.appendChild(t)}let h=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 u=document.createElement("label");u.classList.add("voc-form-checkbox-label"),a&&u.classList.add("form-check"),u.style.display=e.direction==="horizontal"?"inline-block":"block",e.width&&(u.style.width=e.width);let d=document.createElement("input");d.type="checkbox",d.classList.add("voc-form-checkbox"),a&&d.classList.add("form-check-input"),d.name=e.name||e.key||"",d.value=n.value,e.key&&(d.id=`voc-form-${e.key}-${s}`),e.required&&(d.required=!0),Array.isArray(r)?r.includes(n.value)&&(d.checked=!0):r!==void 0?r===n.value&&(d.checked=!0):e.default===n.value&&(d.checked=!0),u.appendChild(d),u.appendChild(document.createTextNode(n.label)),t.appendChild(u)});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)}h=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));let n=e.default||r||"";if(n){let s=(n.match(/\n/g)||[]).length,u=80,d=n.split(`
2
+ `).reduce((M,_)=>Math.max(M,_.length),0),L=Math.ceil(d/u)||1,T=Math.max(2,s+L);t.rows=T,t.style.resize="vertical"}e.width&&(t.style.width=e.width),e.required&&(t.required=!0),c(t,e.validation),h=t;break}case"select":{let t=document.createElement("select");if(t.classList.add("voc-form-select"),a&&t.classList.add("form-select"),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){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),h=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 u=document.createElement("label");u.classList.add("voc-form-radio-label"),a&&u.classList.add("form-check"),u.style.display=e.direction==="horizontal"?"inline-block":"block",e.width&&(u.style.width=e.width);let d=document.createElement("input");d.type="radio",d.classList.add("voc-form-radio"),a&&d.classList.add("form-check-input"),d.name=e.name||e.key||"",d.value=n.value,e.key&&(d.id=`voc-form-${e.key}-${s}`),Array.isArray(r)?r.includes(n.value)&&(d.checked=!0):r!==void 0?r===n.value&&(d.checked=!0):e.default===n.value&&(d.checked=!0),u.appendChild(d),u.appendChild(document.createTextNode(n.label)),t.appendChild(u)}),h=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),h=t;break}case"avatar":{h=N(e,v||{},r);break}case"audio_select":{h=A(e,v||{},r);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),c(t,e.validation),h=t;break}}if(h&&E.appendChild(h),e.hint_text){let t=document.createElement("small");t.className="voc-form-hint",t.textContent=e.hint_text,E.appendChild(t)}return E}x.fields.forEach(e=>{if(e.type==="group"&&"items"in e){let i=e;if(a){let y=document.createElement("div");y.className="card voc-form-group-card mb-3";let r=i.label||i.header?.title,E=i.description||i.header?.description;if(r||E){let t=document.createElement("div");if(t.className="card-header voc-form-group-head",r){let n=document.createElement("h5");n.className="mb-0 voc-form-group-label",n.textContent=r,t.appendChild(n)}if(E){let n=document.createElement("p");n.className="mb-0 voc-form-group-description",n.textContent=E,t.appendChild(n)}y.appendChild(t)}let h=document.createElement("div");h.className="card-body voc-form-group-body",i.items.forEach(t=>{if(t.type==="row"&&"items"in t){let n=t,s=document.createElement("div");if(s.className="voc-form-group voc-form-row mb-3",n.label){let d=document.createElement("h6");d.className="voc-form-row-label",d.textContent=n.label,s.appendChild(d)}let u=document.createElement("div");u.className="voc-form-row-items "+(n.direction||"horizontal"),n.items.forEach(d=>{let L=k(d);L&&u.appendChild(L)}),s.appendChild(u),h.appendChild(s)}else{let n=k(t);n&&h.appendChild(n)}}),y.appendChild(h),o.appendChild(y)}else{let y=document.createElement("div");y.className="voc-form-group voc-form-group-wrapper",a&&y.classList.add("mb-3");let r=i.label||i.header?.title,E=i.description||i.header?.description;if(r||E){let h=document.createElement("div");if(h.className="voc-form-group-head",r){let t=document.createElement("h3");t.className="voc-form-group-label",t.textContent=r,h.appendChild(t)}if(E){let t=document.createElement("p");t.className="voc-form-group-description",t.textContent=E,h.appendChild(t)}y.appendChild(h)}i.items.forEach(h=>{if(h.type==="row"&&"items"in h){let t=h,n=document.createElement("div");if(n.className="voc-form-group voc-form-row",a&&n.classList.add("mb-3"),t.label){let u=document.createElement("h4");u.className="voc-form-row-label",u.textContent=t.label,n.appendChild(u)}let s=document.createElement("div");s.className="voc-form-row-items "+(t.direction||"horizontal"),t.items.forEach(u=>{let d=k(u);d&&s.appendChild(d)}),n.appendChild(s),y.appendChild(n)}else{let t=k(h);t&&y.appendChild(t)}}),o.appendChild(y)}return}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 y=document.createElement("div");y.className="voc-form-row-items "+(e.direction||"horizontal"),i.appendChild(y),e.items.forEach(r=>{let E=k(r);E&&y.appendChild(E)}),o.appendChild(i)}else{let i=k(e);i&&o.appendChild(i)}});let w=document.createElement("button");return w.type="submit",w.className="voc-form-submit",w.textContent="Submit",a&&w.classList.add("btn","btn-primary"),o.appendChild(w),o}let l=f();b[0].appendChild(l);let g=x?.submit_config??v?.submit_config??null;return g&&l.addEventListener("submit",a=>{a.preventDefault(),S(l,g,(o,p)=>{v?.onSubmitResult&&v.onSubmitResult(o,p)})}),{element:l,validate:()=>{let a=[];return l.querySelectorAll(":invalid").forEach(p=>{let c=p.validationMessage;a.push({element:p,message:c})}),a},getValues:()=>C(l),onSubmit:a=>{l.addEventListener("submit",o=>{o.preventDefault();let p=C(l);a(p,o)})}}}var F={renderForm:R};var U=F,J={FormsLib:F};export{U as FormsLib,J as default};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "voc-lib-js",
3
- "version": "1.0.29",
3
+ "version": "1.0.30",
4
4
  "description": "A JavaScript library for VocPhone",
5
5
  "main": "./dist/main.cjs",
6
6
  "module": "./dist/main.mjs",