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