@code-gorilla-au/vue-forms/dist/index.cjs

form authoring light weight framework

"use strict";var e=require("vue");function t({debug:e}={debug:!1}){return{log(...t){e&&console.log(...t)},warn(...t){e&&console.warn(...t)},error(...t){e&&console.error(...t)}}}let a;const n=new Uint8Array(16);function o(){if(!a&&(a="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!a))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return a(n)}const i=[];for(let e=0;e<256;++e)i.push((e+256).toString(16).slice(1));var r={randomUUID:"undefined"!=typeof crypto&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function l(e,t,a){if(r.randomUUID&&!t&&!e)return r.randomUUID();const n=(e=e||{}).random||(e.rng||o)();if(n[6]=15&n[6]|64,n[8]=63&n[8]|128,t){a=a||0;for(let e=0;e<16;++e)t[a+e]=n[e];return t}return function(e,t=0){return(i[e[t+0]]+i[e[t+1]]+i[e[t+2]]+i[e[t+3]]+"-"+i[e[t+4]]+i[e[t+5]]+"-"+i[e[t+6]]+i[e[t+7]]+"-"+i[e[t+8]]+i[e[t+9]]+"-"+i[e[t+10]]+i[e[t+11]]+i[e[t+12]]+i[e[t+13]]+i[e[t+14]]+i[e[t+15]]).toLowerCase()}(n)}const u="|",d=":",s=",",c="ruleNotFound",v={email:{handler:function(e){const t=e.match(p);return null!==t&&(null==t?void 0:t.length)>0},validationMessage:()=>"Email must be valid"},not:{handler:function(e,...t){return t.some((t=>!e.includes(t)))},validationMessage:e=>`${e} is not allowed`},is:{handler:function(e,...t){return t.some((t=>e===t))},validationMessage:e=>`Input does not match ${e}`},contains:{handler:function(e,...t){return t.some((t=>e.includes(t)))},validationMessage:e=>`Does not contain ${e}`},prefix:{handler:function(e,...t){return t.some((t=>e.startsWith(t)))},validationMessage:e=>`Does not contain prefix ${e}`},suffix:{handler:function(e,...t){return t.some((t=>e.endsWith(t)))},validationMessage:e=>`Does not contain suffix ${e}`},[c]:{handler:(e,...t)=>!1,validationMessage:()=>"Rule not found"}};Object.freeze(v);const p=new RegExp(/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/);function f(){const e={rules:v,get:e=>v[e]||v[c]};return{availableRules:()=>Object.keys(e.rules),evaluate(t,a){const n=function(e,t){return t.split(u).map((t=>{const[a,n]=t.split(d);let o=[];return n&&(o=n.split(s).map((e=>e.trim()))),{rule:a.trim(),value:e,ruleArgs:o}}))}(t,a);for(let t=0;t<n.length;t+=1){const a=n[t],o=e.get(a.rule);if(o&&!o.handler(a.value,...a.ruleArgs))return o.validationMessage(a.value)}}}}const m="internal.update.data";function g(e){return""===e.name?e.id:e.name}function y(e){return e.valid}function h(a={}){if("object"!=typeof a)throw new Error("initFormData is not valid");const n=e.reactive({}),o=e.reactive({}),i=e.reactive(JSON.parse(JSON.stringify(a))),r=t(),u=f();const d=function(e={debug:!1}){var a;const n=t({debug:null!==(a=e.debug)&&void 0!==a&&a}),o={};return{topics:()=>Object.keys(o),subscribe(e,t){if(!o[e])return n.log(`registering new topic: ${e}`),void(o[e]=[t]);n.log(`adding subscriber for topic: ${e}`),o[e]=[...o[e],t]},dispatch:async(t,a)=>new Promise(((i,r)=>{try{o[t].forEach((t=>{t(e,a)})),n.log(`event dispatched for topic: ${t}`),i(null)}catch(e){n.error(`${t} dispatch error `,e),r(e)}}))}}();function s(e){return{...n[e]}}d.subscribe(m,(function(e,t){n[t.payload.id]=t.payload;const a=g(t.payload),r=""===(l=t.payload).validationMessage?void 0:l.validationMessage;var l;const u=t.payload.namespace;if(!u)return i[a]=t.payload.value,void(o[a]=r);const d={__id:t.payload.id,[a]:t.payload.value};i[u]||(i[u]=[]);const s=i[u].findIndex((e=>e.__id===d.__id));-1!==s?i[u].splice(s,1,d):i[u].push(d)}));const c=e.computed((()=>Object.values(n).every(y)));return{nodes:e.readonly(n),data:e.readonly(i),formValid:c,validations:e.readonly(o),registerNode(e){if(s(e.id))return void r.error(`${e.id} already exists`);r.log(`${e.id} registered`),n[e.id]=e;const t=g(e);i[t]=""},getNode:s,validate:u.evaluate,async dispatch(e,t){const a={id:l(),timestamp:Date.now(),payload:{...t}};return await d.dispatch(e,a),await Promise.resolve()}}}const M=Symbol("--v-form-context");var V=e.defineComponent({name:"VForm",emits:{submit:null},props:{initFormData:{type:Object,required:!1,default:()=>({})}},setup(t,{emit:a,slots:n}){const o=function(t={}){const a=h(t);return e.provide(M,a),a}(t.initFormData);return()=>e.h("form",{onSubmit(e){e.preventDefault(),e.stopPropagation(),a("submit",{...o.data})}},{default:()=>n.default&&n.default({formData:o.data,validations:o.validations,formValid:o.formValid})})}});const b=Symbol("--v-list-context");function w(t,a={initModelValue:void 0,validationRules:void 0,customValidation:!1}){const n=e.inject(M,void 0),o=e.inject(b,void 0),i=e.reactive({id:"",name:"",type:"",required:!1,readonly:!1,disabled:!1,focused:!1,dirty:!1,valid:!0,validationMessage:"",value:"",namespace:void 0});function r(e){var t,o;if(i.valid=(t=i.required,o=e.validity,t?o.valid&&!o.typeMismatch&&!o.valueMissing:o.valid&&!o.typeMismatch),i.valid&&(i.validationMessage=""),(null==a?void 0:a.customValidation)||!(null==a?void 0:a.validationRules))return;if(!n||"string"!=typeof i.value)return;const r=n.validate(i.value,a.validationRules);r&&(i.valid=!1,i.validationMessage=r)}function u(e){const t=e.target;var a;i.value="checkbox"===(a=t).type?a.checked:"radio"===a.type?a.checked?a.value:"":a.value,r(t)}function d(e){u(e)}function s(){const a=function(t){var a;const n=e.unref(t);return null!==(a=null==n?void 0:n.$el)&&void 0!==a?a:n}(t);a&&a.focus()}return e.onMounted((()=>{!async function(e){if(!e)return;const t=e;i.id=l(),i.value=a.initModelValue||"",i.dirty=""!==i.value,i.type=t.type,i.name=t.name,i.readonly=t.readOnly,i.required=t.required,r(t),o&&(i.namespace=o.namespace),n&&(n.getNode(i.name)||n.registerNode(i))}(t.value)})),e.watch(i,(async e=>{n&&await n.dispatch(m,e)})),a.customValidation?{state:i,onInput:u,onChange:d,focusInputRef:s}:{state:e.readonly(i),onInput:u,onChange:d,onBlur:function(e){const t=e.target;i.focused=!1,i.dirty=""!==(null==t?void 0:t.value),(null==a?void 0:a.customValidation)||(i.valid=t.checkValidity(),r(t))},onFocus:function(){i.focused=!0,i.dirty=!0},onInvalid:function(e){const t=e.target;i.valid=!1,i.validationMessage=t.validationMessage},focusInputRef:s}}var I=e.defineComponent({name:"VInput",props:{type:{type:String,required:!1,default:"text"},name:{type:String,required:!0},modelValue:{type:String,required:!1,default:void 0},value:{type:String,required:!1},validationRules:{type:String,required:!1}},emits:{"update:modelValue":null,"update:validationMessage":null},setup(t,{emit:a,attrs:n,slots:o}){const i=e.ref(null),r=w(i,{initModelValue:t.modelValue,validationRules:t.validationRules}),l=e.computed((()=>{var e;return i.value&&"radio"===(null===(e=i.value)||void 0===e?void 0:e.type)?t.value:r.state.value})),u=e.computed((()=>o.default&&o.default({validationMessage:r.state.validationMessage})));return e.watch((()=>r.state.value),(e=>{a("update:modelValue",e)})),e.watch((()=>r.state.validationMessage),(e=>{a("update:validationMessage",e)})),()=>[e.h("input",{...n,ref:i,type:t.type,name:t.name,value:l.value,onInput:r.onInput,onChange:r.onChange,onBlur:r.onBlur,onFocus:r.onFocus,onInvalid:r.onInvalid}),u.value]}}),S=e.defineComponent({name:"VList",props:{namespace:{type:String,required:!0}},setup:(t,{slots:a})=>(function({namespace:t}){e.provide(b,{namespace:t})}({namespace:t.namespace}),()=>e.h(e.Fragment,a.default&&a.default()))}),R=e.defineComponent({name:"VSelect",props:{name:{type:String,required:!0},modelValue:{type:String,required:!1,default:void 0},validationRules:{type:String,required:!1}},emits:{"update:modelValue":null,"update:validationMessage":null},setup(t,{emit:a,attrs:n,slots:o}){const i=e.ref(null),r=w(i,{initModelValue:t.modelValue,validationRules:t.validationRules}),l=e.computed((()=>o.default&&o.default())),u=e.computed((()=>o.validation&&o.validation({validationMessage:r.state.validationMessage})));return e.watch((()=>r.state.value),(e=>{a("update:modelValue",e)})),e.watch((()=>r.state.validationMessage),(e=>{a("update:validationMessage",e)})),()=>[e.h("select",{...n,ref:i,name:t.name,onInput:r.onInput,onChange:r.onChange,onFocus:r.onFocus,onInvalid:r.onInvalid},[l.value]),u.value]}});exports.VForm=V,exports.VInput=I,exports.VList=S,exports.VSelect=R;