@qundus/qform
Version:
The only form library you'll ever need :)
1 lines • 16.9 kB
JavaScript
import{__spreadValues as e,__spreadProps as l}from"./chunk-3465SI5N.mjs";import{hooksInUse as t}from"@qundus/qstate/hooks";import{map as n,onMount as o,task as u,onSet as r}from"@qundus/qstate";import{isServerSide as s}from"@qundus/qstate/checks";import{updateAddon as i,deriveAddon as a}from"@qundus/qstate/addons";var d={get select(){return{value:"",disabled:!0,selected:!0}},get selectButton(){return{value:"$$button$$"}}};function c(e,l,t){return l in e||("warn"===t.onUpdateKeyNotFound&&console.warn("form: key ",l," was not found in form keys!"),!1)}function v(e){const{value:l,condition:t,field:n}=e;let o=!1;return t.hidden||t.element.disabled||!t.element.required||""!==l&&(n.valueNullable||void 0!==l&&null!=l)&&(!n.mandatory||null!=l&&l)||(o=!0),o}function f(e,l){const t=new FileReader;t.onload=e=>{var t;l(null==(t=e.target)?void 0:t.result)},t.readAsDataURL(e)}function p(e){return{get checkbox(){return(e,l)=>{let t=l;try{const n=Boolean(e);t=null==l||"on"===l?n:n?null!=l?l:n:null}catch(e){t=null}return t}},get file(){return function(e){const{key:l,$form:t}=e;return e=>{let n=0,o=0;const u=[];for(const r of e)n++,r instanceof File&&f(r,e=>{const s={buffer:e,placeholder:"string"==typeof e?e:e[0],file:r,name:r.name};u.push(s),o++,o===n&&(t.extras[l]=u)});return e}}(e)},get select(){return function(e){const{event:l,field:t}=e;return e=>{var n,o;const u=l;let r=null;if(null!=(n=t.multiple)&&n){r=[];const e=null!=u&&(null==(o=null==u?void 0:u.target)?void 0:o.options);for(let l=0,t=e.length;l<t;l++){const t=e[l];if(t.selected){let e=t.value;e!==d.selectButton.value&&e!==d.select.value&&(e=t.text,r.push(e))}}}else e!==d.selectButton.value&&e!==d.select.value&&(r=e);return r}}(e)},get number(){return e=>{let l=null;try{l=Number(e),Number.isNaN(l)&&(l=e)}catch(t){l=e}return l}}}}function m(t){var n,o;const{key:u,field:r,options:s,$form:i,event:a}=t,d=null==a,c=d&&null!=(o=null!=(n=s.vmcm)?n:r.vmcm)?o:"normal",f=i.conditions[u],m=function(t){var n;const{key:o,$form:u,event:r,field:s}=t;let{value:i}=t;const a=null==r?void 0:r.target,d=null==r,c=null!=(n=t.preprocessValue)?n:s.preprocessValue,v={key:o,event:r,value:i,field:s,manualUpdate:d,getValueOf:e=>u.values[e],getConditionOf:e=>u.conditions[e]},f=p(l(e({},v),{$form:u}));if("select"===s.type)i=d?i:null==a?void 0:a.value,c&&(i=f.select(i));else if("checkbox"===s.type){const e=!!d||(null==a?void 0:a.checked);i=d?i:null==a?void 0:a.value,c&&(i=f.checkbox(e,i))}else"file"===s.type?(i=d?i:null==a?void 0:a.files,c&&(i=f.file(i))):"number"===s.type||"tel"===s.type?(i=d?i:null==a?void 0:a.value,c&&(i=f.number(i))):i=d?i:null==a?void 0:a.value;if(""===i&&"checkbox"!==s.type&&(i=null),null!=s.processValue){const t="function"==typeof s.processValue?[s.processValue]:s.processValue;for(const n of t)i=n(l(e({},v),{value:i,$condition:u.conditions[o],processors:f}))}return i}(t);i.conditions[u].value.updated=!0,i.conditions[u].value.lastUpdate=d?"manual":"user";let g=null;if(null!=r.validate&&(!d||d&&"normal"===c)){g=[];const e=Array.isArray(r.validate)?r.validate:[r.validate];for(const l of e){const e=l(m,{$values:i.values});if(Array.isArray(e)){if(e.length<0)continue;for(const l of e)null!=l&&g.push(l)}else null!=e&&g.push(e)}g.length<=0&&(g=null)}if(null!=g?i.errors=l(e({},i.errors),{[u]:g}):null!=i.errors&&u in i.errors&&delete i.errors[u],null!=g)f.element.required?f.value.error="validation":f.value.error="optional";else if(f.element.disabled)f.value.error=!1;else if(f.element.required)if("force-valid"===c)f.value.error=!1;else{const e=v({value:m,condition:f,field:r});f.value.error=!!e&&"incomplete"}else f.value.error=!1;s.preventErroredValues?null==g&&(i.values[u]=m):i.values[u]=m}function g(e,l="_",t=!1){const n=t?/[A-Z]/g:/[A-Z]+/g;return e.replace(n,(e,t)=>0===t?e.toLowerCase():`${l}${e.toLowerCase()}`)}function y(e,l="same"){return"snake"===l?g(e,"_"):"snake_aggressive"===l?g(e,"_",!0):"kebab"===l?g(e,"-"):"kebab_aggressive"===l?g(e,"-",!0):"lowercase"===l?e.toLowerCase():"uppercase"===l?e.toUpperCase():e}function b(e){var l,t;const n={},o=e.$store.get().values;for(const u in e.fields){const r=e.fields[u],s=y(u,null!=(t=null==(l=e.special)?void 0:l[u])?t:e.defaultCase);let i=o[u];"select"===r.type&&i===d.select.value&&(i=null),n[s]=i}return n}function h(t,n){return l(e(e({},t),n),{value:e(e({},t.value),n.value),element:e(e({},t.element),n.element)})}function $(e,l){const t=l.split("."),n=t.length;for(let l=0;l<n;l++)e=e[t[l]];return e}function k(t){const{fields:n,$store:o,options:u}=t;function r(){const e=o.get().status;return"submit"!==e&&"valid"===e}return l(e({},function(e){const{fields:l,$store:t}=e;return{getValues:e=>b({fields:l,$store:t,defaultCase:"same",special:e}),getValuesLowercase:e=>b({fields:l,$store:t,defaultCase:"lowercase",special:e}),getValuesUppercase:e=>b({fields:l,$store:t,defaultCase:"uppercase",special:e}),getValuesSnakecase:e=>b({fields:l,$store:t,defaultCase:"snake",special:e}),getValuesSnakecaseAggressive:e=>b({fields:l,$store:t,defaultCase:"snake_aggressive",special:e}),getValuesKebabcase:e=>b({fields:l,$store:t,defaultCase:"kebab",special:e}),getValuesKebabcaseAggressive:e=>b({fields:l,$store:t,defaultCase:"kebab_aggressive",special:e})}}(t)),{canSubmit:r,startSubmitting:()=>r()?(o.update(({$next:e})=>(e.status="submit",e)),()=>{"submit"===o.get().status&&o.update(({$next:e})=>(e.status="valid",e))}):null,submit:async e=>{const{runner:l,cannotSubmit:t,error:n}=e;if(r())try{o.update(({$next:e})=>(e.status="submit",e)),await(null==l?void 0:l())}catch(e){null==n||n(e)}finally{o.update(({$next:e})=>(e.status="valid",e))}else null==t||t()},updateValues:(e,l)=>{null!=e&&o.update(({$next:t})=>{var o;for(const r in e){let s=null==l?void 0:l[r],i=r;if(null!=s&&"string"!=typeof s&&(i=null!=(o=s.key)?o:r,s=s.value),!c(n,i,u))continue;const a=n[i],d=null==s?e[i]:$(e,s);m({key:i,field:a,options:u,$form:t,event:null,value:d})}return t})},updateConditions:e=>{null!=e&&o.update(({$next:l})=>{for(const t in e){const o=e[t];c(n,t,u)&&null!=o&&(l.conditions[t]=h(l.conditions[t],o))}return l})}})}function C(t){const{key:n,$store:o,field:u,options:r}=t;return(n,r,s)=>{const i="function"==typeof s?s():s;return{id:u.label,["vdom"!==n?"autocomplete":"autoComplete"]:"off",required:null==i?void 0:i.condition.element.required,disabled:null==i?void 0:i.condition.element.disabled,["vdom"!==n?"onfocus":"onFocus"]:n=>{n.preventDefault(),n.stopImmediatePropagation(),n.stopPropagation(),o.update(({$next:o})=>(function(t){var n;const{key:o,field:u,$form:r,event:s}=t;r.conditions[o].element.state="focus",r.conditions[o].element.visited=!0;const i={key:o,field:u,event:s,value:r.values[o],manualUpdate:!1,$condition:r.conditions[o],getValueOf:e=>r.values[e],getConditionOf:e=>r.conditions[e]};null==(n=u.processCondition)||n.call(u,l(e({},i),{get processors(){return p(l(e({},i),{$form:r}))}}))}(l(e({},t),{$form:o,event:n,value:null})),o))},["vdom"!==n?"onblur":"onBlur"]:n=>{n.preventDefault(),n.stopImmediatePropagation(),n.stopPropagation(),o.update(({$next:o})=>(function(t){var n;const{key:o,field:u,$form:r,event:s}=t;r.conditions[o].element.state="blur";const i={key:o,field:u,event:s,value:r.values[o],manualUpdate:!1,$condition:r.conditions[o],getValueOf:e=>r.values[e],getConditionOf:e=>r.conditions[e]};null==(n=u.processCondition)||n.call(u,l(e({},i),{get processors(){return p(l(e({},i),{$form:r}))}})),u.incompleteStatus&&v({value:r.values[o],condition:r.conditions[o],field:u})&&(r.conditions[o].value.error="incomplete")}(l(e({},t),{$form:o,event:n,value:null})),o))}}}}function V(e,l){var t,n;return[null!=(t=null==l?void 0:l.dType)?t:e,null!=(n=null==l?void 0:l.kType)?n:"all"]}function x(n){const{derived:o,key:u,field:r,$store:s,options:i}=n,a="select"===r.type?function(t){const{key:n,field:o,$store:u,options:r}=t,s=String(n),i=C(t);return(a,d,c)=>{var v,f,p,g;const y="function"==typeof c?c():c;let b={};"special"!==d&&(b=i(a,d,y)),"base"!==d&&(b=l(e({},b),{name:s,value:null==y?void 0:y.value,multiple:null!=(v=o.multiple)&&v}),"input"===o.validateOn&&(b[a?"oninput":"onInput"]=n=>{u.update(({$next:o})=>(m(l(e({},t),{$form:o,event:n,value:null})),o))}),"change"===o.validateOn&&(b[a?"onchange":"onChange"]=n=>{u.update(({$next:o})=>(m(l(e({},t),{$form:o,event:n,value:null})),o))}));const h={key:n,isVdom:"vdom"===a,kType:d,value:y,element:b};return"before"===r.processElementOrder&&(null==(f=null==r?void 0:r.processElement)||f.call(r,h)),null==(p=o.processElement)||p.call(o,h),"after"===r.processElementOrder&&(null==(g=null==r?void 0:r.processElement)||g.call(r,h)),b}}({field:r,key:u,$store:s,options:i}):function(t){const{key:n,field:o,$store:u,options:r}=t,s=String(n),i=C(t);return(a,d,c)=>{var v,f,p,g;const y="function"==typeof c?c():c;let b={};"special"!==d&&(b=i(a,d,y)),"base"!==d&&(b=l(e({},b),{type:y.condition.hidden?"hidden":o.type,name:s,multiple:o.multiple}),"checkbox"!==o.type&&"radio"!==o.type&&"file"!==o.type&&(b.value=null!=(v=null==y?void 0:y.value)?v:""),"input"===o.validateOn&&(b["vdom"!==a?"oninput":"onInput"]=n=>{n.preventDefault(),u.update(({$next:o})=>(m(l(e({},t),{$form:o,event:n,value:null})),o))}),"change"===o.validateOn&&(b["vdom"!==a?"onchange":"onChange"]=n=>{n.preventDefault(),u.update(({$next:o})=>(m(l(e({},t),{$form:o,event:n,value:null})),o))}));const h={key:n,isVdom:"vdom"===a,kType:d,value:y,element:b};return"before"===r.processElementOrder&&(null==(f=null==r?void 0:r.processElement)||f.call(r,h)),null==(p=o.processElement)||p.call(o,h),"after"===r.processElementOrder&&(null==(g=null==r?void 0:r.processElement)||g.call(r,h)),b}}({field:r,key:u,$store:s,options:i}),{getHook:d,getHooks:c,hookNames:v}=t(o),f=d(v.preact),p=d(v.react),g=c(v.solid,v.solid_unwrapped,v.solid_from,v.solid_from_unwrapped);let y=!1;return g&&(y=g[0]),{get dom(){return e=>{const l=o.get(),[t,n]=V("dom",e);return a(t,n,l)}},get preact(){return e=>{if(!f)throw new Error("qform: preact hook does not exist, please add it to options.hooks option!");const l=o.hooks[f](),[t,n]=V("vdom",e);return a(t,n,l)}},get react(){return e=>{if(!p)throw new Error("qform: react hook does not exist, please add it to options.hooks option!");const l=o.hooks[p](),[t,n]=V("vdom",e);return a(t,n,l)}},get solid(){return e=>{if(!y)throw new Error("qform: solid hook does not exist, please add it to options.hooks option!");const l=o.hooks[y](),[t,n]=V("dom",e);return a(t,n,l)}},get svelte(){const e=o.get(),[l,t]=V("dom");return a(l,t,e)},ref:(e,l)=>{if(null==e||e.name===u)return;const t=o.get(),[n,r]=V("dom",l),s=a(n,r,t);for(const l in s)e[l]=s[l]}}}function w(t){const{fields:n,$store:o,options:u}=t,r={};function s(t){let s=r[t];if(null==s){s=function(t){var n,o;const{key:u,field:r,$store:s}=t,i=function(e){const{key:l,field:t,$store:n}=e;return n.derive(e=>{var n,o,u,r;const s={value:null==(n=e.values)?void 0:n[l],condition:null==(o=e.conditions)?void 0:o[l],errors:null==(u=e.errors)?void 0:u[l],extras:null==(r=e.extras)?void 0:r[l]};return null!=t.onChange&&"function"==typeof t.onChange&&t.onChange({$value:s,form:e}),s})}(t);return{key:u,type:r.type,label:null!=(n=r.label)?n:u,$store:i,get element(){return x(l(e({},t),{derived:i}))},get placeholders(){return d},getOptions:null!=(o=r.options)?o:null,get addValidation(){return e=>{if(null==e||"function"!=typeof e)return null;let l=null;return null==r.validate?r.validate=e:Array.isArray(r.validate)?(l=r.validate.push(e),l--):(r.validate=[r.validate,e],l=1),()=>{"function"==typeof r.validate?r.validate=null:null!=r.validate&&(r.validate=r.validate.filter((e,t)=>t!==l),r.validate.length<=0&&(r.validate=null))}}},updateValue:(n,o)=>{const r=s.get().values[u],i="function"==typeof n?n(r):n;s.update(({$next:n})=>(m(e(l(e({},t),{$form:n,event:null,value:i}),o)),n))},clearValue:()=>{s.update(({$next:n})=>(m(l(e({},t),{$form:n,event:null,value:null,preprocessValue:!1})),n))},updateCondition:e=>{const l=s.get().values[u],t="function"==typeof e?e(l):e;s.update(({$next:e})=>(e.conditions[u]=h(e.conditions[u],t),e))}}}({key:t,field:n[t],options:u,$store:o}),r[t]=s}return s}return{get atoms(){return e=>s(e)},get elements(){return e=>s(e).element}}}function O(e){var l,t,n,o,u,r,s,i,a;const{key:c,basic:v,options:f}=e;let p={};if(null==v?p={type:"text",value:null}:"string"==typeof v?p={type:v}:(p=v,null==p.type&&(p.type="text")),p.required=null!=(l=p.required)?l:f.allFieldsRequired,p.disabled=null!=(t=p.disabled)?t:f.allFieldsDisabled,p.valueNullable=null!=(n=p.valueNullable)&&n,p.preprocessValue=null==(u=null!=(o=p.preprocessValue)?o:null==f?void 0:f.preprocessValues)||u,p.validateOn=null!=(r=p.validateOn)?r:f.validateOn,p.incompleteStatus=null==(s=p.incompleteStatus)||s,p.multiple=null!=(i=p.multiple)&&i,null==p.label){const e=f.flatObjectKeysChar;if(p.label=c,null!=e&&c.includes(e)){const l=f.flatLabelJoinChar;p.label=c.split(e).join(l)}}if("select"===p.type&&(p.multiple?null!=p.value&&(Array.isArray(p.value)||(p.value=[p.value])):p.value=null!=(a=p.value)?a:d.select.value),"boolean"!=typeof p.preprocessValue)throw new Error("form: preprocessValue of "+c+" must be boolean!");return p}function q(e){var l,t;const{field:n}=e,o={valid:!0,hidden:!0===n.hidden,value:{updated:!1,error:!1,lastUpdate:!1},element:{state:!1,visited:!1,required:null==(l=null==n?void 0:n.required)||l,disabled:null!=(t=null==n?void 0:n.disabled)&&t}};if(!o.hidden){v({field:n,value:n.value,condition:o})&&(o.valid=!1)}return o}function E(t,f){!function(e){const l=new Error("form: fields is not in proper format");if(null==e)throw l;if("object"!=typeof e)throw l;if(Object.keys(e).length<=0)throw l}(t);const p=function(l){var t,n,o,u,r,s,i,a,d,c;const v=e({},l);return v.vmcm=null!=(t=v.vmcm)?t:"normal",v.preventErroredValues=null!=(n=v.preventErroredValues)&&n,v.allFieldsRequired=null==(o=v.allFieldsRequired)||o,v.allFieldsDisabled=null!=(u=v.allFieldsDisabled)&&u,v.preprocessValues=null==(r=v.preprocessValues)||r,v.onUpdateKeyNotFound=null!=(s=v.onUpdateKeyNotFound)?s:"silent",v.incompleteListCount=null!=(i=v.incompleteListCount)&&i,v.validateOn=null!=(a=v.validateOn)?a:"input",v.processElementOrder=null!=(d=v.processElementOrder)?d:"after",v.flatObjectKeysChar=".",v.flatLabelJoinChar=null!=(c=v.flatLabelJoinChar)?c:" ",v}(f),{fields:g,form_init:y}=function(e){const{basics:l,options:t}=e,n={},o={values:{},conditions:{},errors:null,extras:{},incomplete:[],status:"valid"};for(const e in l){const u=O({key:e,basic:l[e],options:t}),r=q({field:u});n[e]=u,o.values[e]=u.value,o.conditions[e]=r,r.valid||(o.status="idle")}return{fields:n,form_init:o}}({basics:t,options:p}),b=function(t){const{fields:d,form_init:f,options:p}=t,g=n(f,{hooks:p.hooks,addons:{derive:a,update:i}});return o(g,()=>{const n=u(async()=>{var n,o;if(!s())return null!=(o=await(null==(n=null==p?void 0:p.onMount)?void 0:n.call(p,l(e({},t),{init:f,update:l=>{if(void 0===l)return;const t=e({},g.get());for(const e in l){const n=l[e],o=d[e];c(d,e,p)&&m({key:e,field:o,options:p,$form:t,value:n,event:null})}g.set(t)}}))))?o:null});return()=>{null!=n&&"function"==typeof n&&(null==n||n())}}),r(g,e=>{var l,t;null==(l=null==p?void 0:p.onChange)||l.call(p,e);const n=e.newValue;if("submit"===n.status)return;n.status="valid",n.incomplete=[];let o=0,u=0;for(const e in d){const l=n.values[e],r=d[e],s=n.conditions[e];let i=!1;null!=(null==(t=n.errors)?void 0:t[e])?s.hidden||"optional"===s.value.error?s.valid=!0:(o++,s.valid=!1):i="incomplete"===s.value.error||!!r.incompleteStatus&&v({value:l,condition:s,field:r}),i?(u++,s.valid=!1,p.incompleteListCount&&("boolean"==typeof p.incompleteListCount||n.incomplete.length<p.incompleteListCount)&&n.incomplete.push(e)):s.valid="validation"!==s.value.error}u>0&&(n.status="incomplete"),o<=0?n.errors=null:n.status="error"}),g}({fields:g,form_init:y,options:p}),{atoms:h,elements:$}=w({fields:g,options:p,$store:b}),C=k({fields:g,options:p,$store:b}),V=function(e){const{$store:l}=e;return{$store:l.derive(e=>{const l=e.status;return{status:l,disabled:"valid"!==l,canSubmit:"valid"===l,submitting:"submit"===l}})}}({$store:b}),x=b.derive(e=>e);let E=null;return{$store:x,atoms:h,elements:$,actions:C,button:V,placeholders:d,get keys(){return()=>(null==E&&(E=Object.keys(null!=g?g:{})),E)}}}function _(l){const t=function(l){const t=Object.assign({},null!=l?l:{});return l=>{if(null==l)return null==t?null:t;const n=e(e({},t),l);return(null==t?void 0:t.hooks)&&(n.hooks=e(e({},t.hooks),l.hooks)),null==(null==t?void 0:t.onMount)&&null==(null==l?void 0:l.onMount)||(n.onMount=async e=>{var n,o,u,r;const s=null!=(o=await(null==(n=null==t?void 0:t.onMount)?void 0:n.call(t,e)))?o:void 0;return(null!=(r=await(null==(u=null==l?void 0:l.onMount)?void 0:u.call(l,e)))?r:void 0)||s}),null==(null==t?void 0:t.onChange)&&null==(null==l?void 0:l.onChange)||(n.onChange=e=>{var n,o;null==(n=null==t?void 0:t.onChange)||n.call(t,e),null==(o=null==l?void 0:l.onChange)||o.call(l,e)}),n}}(l);return(e,l)=>E(e,t(l))}export{E as form,_ as formSetup};//# sourceMappingURL=index.mjs.map