svelte-hook-form
Version:
A better version of form validation.
2 lines (1 loc) • 13.7 kB
JavaScript
var svelteHookForm=function(t){"use strict";function e(){}function n(t,e){for(const n in e)t[n]=e[n];return t}function r(t){return t()}function s(){return Object.create(null)}function o(t){t.forEach(r)}function i(t){return"function"==typeof t}function a(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}function u(t,...n){if(null==t)return e;const r=t.subscribe(...n);return r.unsubscribe?()=>r.unsubscribe():r}function l(t){let e;return u(t,(t=>e=t))(),e}function c(t,e,n){t.$$.on_destroy.push(u(e,n))}function d(t,e,n,r){if(t){const s=f(t,e,n,r);return t[0](s)}}function f(t,e,r,s){return t[1]&&s?n(r.ctx.slice(),t[1](s(e))):r.ctx}function h(t,e,n,r){if(t[2]&&r){const s=t[2](r(n));if(void 0===e.dirty)return s;if("object"==typeof s){const t=[],n=Math.max(e.dirty.length,s.length);for(let r=0;r<n;r+=1)t[r]=e.dirty[r]|s[r];return t}return e.dirty|s}return e.dirty}function p(t,e,n,r,s,o){if(s){const i=f(e,n,r,o);t.p(i,s)}}function g(t){if(t.ctx.length>32){const e=[],n=t.ctx.length/32;for(let t=0;t<n;t++)e[t]=-1;return e}return-1}function b(t,e){const n={};e=new Set(e);for(const r in t)e.has(r)||"$"===r[0]||(n[r]=t[r]);return n}function v(t){t.parentNode.removeChild(t)}function m(t,e,n){null==n?t.removeAttribute(e):t.getAttribute(e)!==n&&t.setAttribute(e,n)}function $(t,e){const n=Object.getOwnPropertyDescriptors(t.__proto__);for(const r in e)null==e[r]?t.removeAttribute(r):"style"===r?t.style.cssText=e[r]:"__value"===r?t.value=t[r]=e[r]:n[r]&&n[r].set?t[r]=e[r]:m(t,r,e[r])}let y;function O(t){y=t}function _(){if(!y)throw new Error("Function called outside component initialization");return y}function j(t){_().$$.on_destroy.push(t)}function w(){const t=_();return(e,n,{cancelable:r=!1}={})=>{const s=t.$$.callbacks[e];if(s){const o=function(t,e,{bubbles:n=!1,cancelable:r=!1}={}){const s=document.createEvent("CustomEvent");return s.initCustomEvent(t,n,r,e),s}(e,n,{cancelable:r});return s.slice().forEach((e=>{e.call(t,o)})),!o.defaultPrevented}return!0}}const x=[],A=[],E=[],S=[],V=Promise.resolve();let C=!1;function k(t){E.push(t)}const M=new Set;let P=0;function F(){const t=y;do{for(;P<x.length;){const t=x[P];P++,O(t),T(t.$$)}for(O(null),x.length=0,P=0;A.length;)A.pop()();for(let t=0;t<E.length;t+=1){const e=E[t];M.has(e)||(M.add(e),e())}E.length=0}while(x.length);for(;S.length;)S.pop()();C=!1,M.clear(),O(t)}function T(t){if(null!==t.fragment){t.update(),o(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(k)}}const z=new Set;function B(t,e){t&&t.i&&(z.delete(t),t.i(e))}function L(t,e,n,r){if(t&&t.o){if(z.has(t))return;z.add(t),undefined.c.push((()=>{z.delete(t),r&&(n&&t.d(1),r())})),t.o(e)}}function N(t,e){-1===t.$$.dirty[0]&&(x.push(t),C||(C=!0,V.then(F)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function I(t,n,a,u,l,c,d,f=[-1]){const h=y;O(t);const p=t.$$={fragment:null,ctx:null,props:c,update:e,not_equal:l,bound:s(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(n.context||(h?h.$$.context:[])),callbacks:s(),dirty:f,skip_bound:!1,root:n.target||h.$$.root};d&&d(p.root);let g=!1;if(p.ctx=a?a(t,n.props||{},((e,n,...r)=>{const s=r.length?r[0]:n;return p.ctx&&l(p.ctx[e],p.ctx[e]=s)&&(!p.skip_bound&&p.bound[e]&&p.bound[e](s),g&&N(t,e)),n})):[],p.update(),g=!0,o(p.before_update),p.fragment=!!u&&u(p.ctx),n.target){if(n.hydrate){const t=function(t){return Array.from(t.childNodes)}(n.target);p.fragment&&p.fragment.l(t),t.forEach(v)}else p.fragment&&p.fragment.c();n.intro&&B(t.$$.fragment),function(t,e,n,s){const{fragment:a,on_mount:u,on_destroy:l,after_update:c}=t.$$;a&&a.m(e,n),s||k((()=>{const e=u.map(r).filter(i);l?l.push(...e):o(e),t.$$.on_mount=[]})),c.forEach(k)}(t,n.target,n.anchor,n.customElement),F()}O(h)}class R{$destroy(){!function(t,e){const n=t.$$;null!==n.fragment&&(o(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}(this,1),this.$destroy=e}$on(t,e){const n=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return n.push(e),()=>{const t=n.indexOf(e);-1!==t&&n.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}const q=[];function D(t,n=e){let r;const s=new Set;function o(e){if(a(t,e)&&(t=e,r)){const e=!q.length;for(const e of s)e[1](),q.push(e,t);if(e){for(let t=0;t<q.length;t+=2)q[t][0](q[t+1]);q.length=0}}}return{set:o,update:function(e){o(e(t))},subscribe:function(i,a=e){const u=[i,a];return s.add(u),1===s.size&&(r=n(o)||e),i(t),()=>{s.delete(u),0===s.size&&(r(),r=null)}}}}const U=new Map;function H(t){return U.get(t)}const X=t=>function(...e){const n=t.apply(null,e);return(r=n)&&"object"==typeof r&&"function"==typeof r.then&&"function"==typeof r.catch?n:"function"==typeof n?Promise.resolve(n.apply(null,e)):Promise.resolve(n);var r},G=(t,e,n)=>{const r=Object.assign({},t);if(!e)return r;const s=e.match(/^\[(.*)\]$/),o=[[r,s?[s[1]]:e.split(".")]];for(;o.length>0;){const t=o.shift(),e=t[1],r=e.shift(),s=r.match(/^([a-z\_\.]+)((\[\d+\])+)/i);if(s&&s.length>2){const r=s[1];Array.isArray(t[0][r])||(t[0][r]=[]);let i=t[0][r];const a=s[2].replace(/^\[+|\]+$/g,"").split("][");for(;a.length>0;){const t=parseInt(a.shift(),10);0===a.length?0===e.length?i[t]=n:i[t]||(i[t]={}):i[t]||(i[t]=[]),i=i[t]}e.length>0&&o.push([i,e])}else 0===e.length?t[0][r]=n:(t[0][r]||(t[0][r]={}),o.push([t[0][r],e]))}return r};class J{store;rules;bail;constructor(t,e,n){this.store=t,this.rules=e,this.bail=n}get state(){return l(this.store)}get watch(){const{subscribe:t}=this.store;return{subscribe:t}}setState(t){this.store.update((e=>({...e,...t})))}validate=t=>{const e=[],n=this.rules.length;let r=Object.assign(this.state,{errors:[]});if(t=t||r.value,0==n)return r=Object.assign(r,{value:t,valid:!0}),this.setState(r),Promise.resolve(r);r=Object.assign(r,{pending:!0,value:t}),this.setState(r);let s=0;for(s=0;s<n;s++){const{validate:n,params:r}=this.rules[s];e.push(n(t,r))}return this.bail?new Promise((async t=>{for(s=0;s<n;s++){const n=await e[s];if(!0!==n)return r=Object.assign(r,{pending:!1,errors:[n],valid:!1}),this.setState(r),void t(r)}r=Object.assign(r,{pending:!1,valid:!1}),this.setState(r),t(r)})):Promise.all(e).then((t=>{const e=t.filter((t=>!0!==t));return r=Object.assign(r,{pending:!1,errors:e,valid:0===e.length}),this.setState(r),Promise.resolve(r)}))}}const K=["INPUT","SELECT","TEXTAREA"],Q=K.join(","),W={dirty:!1,submitCount:0,submitting:!1,touched:!1,pending:!1,valid:!0},Y={defaultValue:"",value:"",pending:!1,dirty:!1,touched:!1,valid:!0,errors:[]},Z=t=>{const e=t.split(/:/g),n=e.shift();return H(n),{name:n,validate:X(H(n)),params:e[0]?e[0].split(",").map((t=>decodeURIComponent(t))):[]}},tt=(t={validateOnChange:!0})=>{const e=new Map,n=D(Object.assign({},W)),r=new Map,s=new Map,o=new Map,i=new Map,a=D({}),u=()=>{n.update((t=>Object.assign(t,{valid:0===i.size,dirty:0===r.size,touched:0===o.size,pending:s.size>0})))},l=(t,n)=>{const{subscribe:a,set:l,update:c}=D(Object.assign({},Y,n));let d;const f=()=>{d&&d(),d=null};return{set:l,update:c,destroy(){e.delete(t),i.delete(t),r.delete(t),o.delete(t),s.delete(t),u(),f()},subscribe:(t,e)=>(d=a(t,e),f)}},c=(t,n={})=>{const r=l(t,n);e.set(t,new J(r,[],!1))},d=(n,a={})=>{const c=a.defaultValue,d=l(n,{defaultValue:c,value:c,dirty:null!=c});let f=[];const{bail:h=!1,rules:p=[]}=a,g=typeof p;"string"===g?f=(p.match(/[^\|]+/g)||[]).map((t=>Z(t))):Array.isArray(p)?f=p.reduce(((t,e)=>{const n=typeof e;return e?("string"===n?(e=e.trim())&&t.push(Z(e)):"function"===n&&(e.name,t.push({name:e.name,validate:X(e),params:[]})),t):t}),[]):null!==g&&"object"===g&&(f=Object.entries(p).reduce(((t,e)=>{const[n,r]=e;return t.push({name:n,validate:X(H(n)),params:Array.isArray(r)?r:[r]}),t}),[]));const b=new J(d,f,h);return e.set(n,b),t.validateOnChange&&d.subscribe((t=>{t.valid?i.delete(n):t.valid||i.set(n,!0),t.dirty?r.delete(n):t.dirty||r.set(n,!0),t.pending?t.pending&&s.set(n,!0):s.delete(n),t.touched?o.delete(n):t.touched||o.set(n,!0),u()})),{subscribe:d.subscribe}},f=t=>{e.has(t)},h=(n,r)=>{if(!e.has(n))return void c(n);if(r.target){r=r.target.value}else if(r.currentTarget){r=r.currentTarget.value}else r instanceof CustomEvent&&(r=r.detail);const s=e.get(n);t.validateOnChange?s.validate(r):s.setState({dirty:!0,value:r})},p=(t,n)=>{if(e.has(t)){const r=e.get(t);r.setState({touched:n}),n||r.validate()}},g=(e,n={})=>{for(n=Object.assign({rules:[],defaultValue:""},n);!K.includes(e.nodeName);){const t=e.querySelector(Q);if(e=t,t)break}const r=e.name||e.id,{rules:s}=n,o=e.defaultValue||e.value||n.defaultValue,i=d(r,{defaultValue:o,rules:s}),a=t=>{h(r,t.currentTarget.value)},u=t=>()=>{p(r,t)};o&&e.setAttribute("value",o);const l=[],c=(t,n,r)=>{e.addEventListener(t,n,r),l.push([t,n])};let g;return c("focus",u(!0)),c("blur",u(!1)),t.validateOnChange&&(c("input",a),c("change",a)),n.handleChange&&(g=i.subscribe((t=>{n.handleChange(t,e)}))),{destroy(){(()=>{for(let t=0,n=l.length;t<n;t++){const[n,r]=l[t];e.removeEventListener(n,r)}})(),f(r),g&&g()}}},b={register:d,unregister:f,setValue:h,getValue:t=>e.has(t)?e.get(t).state.value:null,setError:(t,n)=>{e.has(t)?e.get(t).setState({errors:n}):c(t,{errors:n})},setFocus:p,getValues:()=>{let t={};const n=e.entries();for(const[e,r]of n)t=G(t,e,r.state);return t},reset:(t,n)=>{(n=Object.assign({dirtyFields:!1,errors:!1},n||{})).errors&&a.set({});for(let t=0,n=Array.from(e.values()).length;t<n;t++);},watch:t=>(e.has(t)||c(t),e.get(t).watch),field:(t,e={})=>{let n=g(t,e);return{update(e={}){n.destroy(),n=g(t,e)},destroy(){n.destroy()}}}};return{...b,control:(v=b,{subscribe:D(v,m).subscribe}),errors:{subscribe:a.subscribe},validate:(t=Array.from(e.keys()))=>{Array.isArray(t)||(t=[t]);let n={};for(let n=0,r=t.length;n<r;n++)e.has(t[n]);return Promise.all([]).then((t=>({valid:t.every((t=>t.valid)),data:n})))},onSubmit:(r,s)=>async o=>{o.preventDefault(),o.stopPropagation(),n.update((t=>Object.assign(t,{valid:!1,submitCount:t.submitCount+1,submitting:!0})));let i={},u={},l=!0;a.set(u);const c=Array.from(e.keys());for(const[t,n]of e.entries()){const e=await n.validate();l=l&&e.valid,e.valid||(u[t]=e.errors),i=G(i,t,n.state.value)}const{elements:d=[]}=o.currentTarget||o.target;for(let e=0,n=d.length;e<n;e++){const n=d[e],r=n.name||n.id;let s=n.value||"";if(!r)continue;if(c.includes(r))continue;if(t.resolver){i=G(i,r,s);continue}const{type:o}=n;if("checkbox"===o)s=n.checked?s:"";i=G(i,r,s)}a.set(u),l?await X(r)(i,o):s&&s(u,o),n.update((t=>Object.assign(t,{valid:l,submitting:!1})))},subscribe(t,r){const s=n.subscribe(t,r);return()=>{s(),e.clear()}}};var v,m},et=t=>({errors:2&t}),nt=t=>({...t[0],errors:t[1],field:t[3]});function rt(t){let e,r,s,o;const i=t[7].default,a=d(i,t,t[6],nt);let u=[t[5]],l={};for(let t=0;t<u.length;t+=1)l=n(l,u[t]);return{c(){var t;t="form",e=document.createElement(t),a&&a.c(),$(e,l)},m(n,i){var u,l,c,d;!function(t,e,n){t.insertBefore(e,n||null)}(n,e,i),a&&a.m(e,null),r=!0,s||(u=e,l="submit",c=t[4],u.addEventListener(l,c,d),o=()=>u.removeEventListener(l,c,d),s=!0)},p(t,[n]){a&&a.p&&(!r||67&n)&&p(a,i,t,t[6],(t=>1&t)(n)||!r?g(t[6]):h(i,t[6],n,et),nt),$(e,l=function(t,e){const n={},r={},s={$$scope:1};let o=t.length;for(;o--;){const i=t[o],a=e[o];if(a){for(const t in i)t in a||(r[t]=1);for(const t in a)s[t]||(n[t]=a[t],s[t]=1);t[o]=a}else for(const t in i)s[t]=1}for(const t in r)t in n||(n[t]=void 0);return n}(u,[32&n&&t[5]]))},i(t){r||(B(a,t),r=!0)},o(t){L(a,t),r=!1},d(t){t&&v(e),a&&a.d(t),s=!1,o()}}}const st={};function ot(t,e,r){const s=[];let o,i=b(e,s),{$$slots:a={},$$scope:u}=e;const l=w(),d=(t,e={})=>{l(t,e)},f=tt();var h,p;h=st,p=f,_().$$.context.set(h,p);const{errors:g,onSubmit:v,field:m}=f;let $;c(t,g,(t=>r(1,o=t)));j(f.subscribe((t=>{r(0,$=t)})));const y=v((t=>{d("success",t)}),(t=>{d("failed",t)}));return t.$$set=t=>{e=n(n({},e),function(t){const e={};for(const n in t)"$"!==n[0]&&(e[n]=t[n]);return e}(t)),r(5,i=b(e,s)),"$$scope"in t&&r(6,u=t.$$scope)},[$,o,g,m,y,i,u,a]}const it=t=>({pending:1&t,valid:1&t,errors:1&t,dirty:1&t,touched:1&t,value:1&t}),at=t=>({pending:t[0].pending,valid:t[0].valid,errors:t[0].errors,dirty:t[0].dirty,touched:t[0].touched,value:t[0].value,field:t[5],onChange:t[2],onFocus:t[3],onBlur:t[4]});function ut(t){let e;const n=t[14].default,r=d(n,t,t[13],at);return{c(){r&&r.c()},m(t,n){r&&r.m(t,n),e=!0},p(t,[s]){r&&r.p&&(!e||8193&s)&&p(r,n,t,t[13],e?h(n,t[13],s,it):g(t[13]),at)},i(t){e||(B(r,t),e=!0)},o(t){L(r,t),e=!1},d(t){r&&r.d(t)}}}function lt(t,e,n){let r,s,{$$slots:o={},$$scope:i}=e,{name:a}=e,{defaultValue:u=""}=e,{bail:d=!1}=e,{validateOnBlur:f=!1}=e,{validateOnMount:h=!1}=e,{control:p=null}=e,{rules:g=""}=e;var b;p?s=l(p):(b=st,s=_().$$.context.get(b));const{register:v,unregister:m,setValue:$,setFocus:y,field:O}=s;let w=v(a,{defaultValue:u,rules:g,validateOnBlur:f,validateOnMount:h,bail:d});c(t,w,(t=>n(0,r=t)));return j((()=>{m(a)})),t.$$set=t=>{"name"in t&&n(6,a=t.name),"defaultValue"in t&&n(7,u=t.defaultValue),"bail"in t&&n(8,d=t.bail),"validateOnBlur"in t&&n(9,f=t.validateOnBlur),"validateOnMount"in t&&n(10,h=t.validateOnMount),"control"in t&&n(11,p=t.control),"rules"in t&&n(12,g=t.rules),"$$scope"in t&&n(13,i=t.$$scope)},[r,w,t=>{$(a,t)},()=>{y(a,!0)},()=>{y(a,!1)},t=>{t.setAttribute("name",a),u&&t.setAttribute("value",`${u}`),O(t,{rules:g,validateOnMount:h,defaultValue:u})},a,u,d,f,h,p,g,i,o]}return t.Field=class extends R{constructor(t){super(),I(this,t,lt,ut,a,{name:6,defaultValue:7,bail:8,validateOnBlur:9,validateOnMount:10,control:11,rules:12})}},t.Form=class extends R{constructor(t){super(),I(this,t,ot,rt,a,{})}},t.defineRule=function(t,e){"string"!=typeof t&&(t=(e=t).name),U.set(t,e)},t.useForm=tt,Object.defineProperty(t,"__esModule",{value:!0}),t}({});