@foormjs/vue 0.1.0 → 0.2.1

package/dist/index.umd.cjs

@@ -1 +1,3 @@
-(function(V,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(V=typeof globalThis<"u"?globalThis:V||self,e(V.index={},V.Vue))})(this,function(V,e){"use strict";function B(c,r,o){if(typeof c=="function"){if(c.__deserialized)return c(r);{const n=o?[r.v,r.data,r.context,r.entry]:[r.data,r.context,r.entry];return c(...n)}}return c}function E(c,r){if(typeof c=="object"&&c!==null){const o={};for(const[n,l]of Object.entries(c))o[n]=B(l,r,!0);return o}return B(c,r,!0)}const A=e.defineComponent({__name:"VuilessField",props:e.mergeModels({rules:{}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(c){const r=c,o=e.useModel(c,"modelValue"),n=e.inject("vuiless"),l=e.ref(),f=e.ref(!1),u=e.ref(!1),C=e.computed(()=>{var d;if((d=n==null?void 0:n.value)!=null&&d.firstValidation)switch(n.value.firstValidation){case"on-change":return n.value.firstSubmitHappened||f.value;case"touched-on-blur":return n.value.firstSubmitHappened||u.value&&f.value;case"on-blur":return n.value.firstSubmitHappened||u.value;case"on-submit":return n.value.firstSubmitHappened;case"none":return!1}return!1}),y=e.computed(()=>{if(C.value||l.value)return b()});e.watch([o],()=>{l.value=void 0,f.value=!0}),e.onUnmounted(()=>{var d;(d=n==null?void 0:n.value)==null||d.unregister(e.getCurrentInstance())}),n!=null&&n.value&&n.value.register(e.getCurrentInstance(),{validate:()=>(l.value=b(),l.value||!0),clearErrors:()=>{f.value=!1,u.value=!1,l.value=void 0},reset:()=>{o.value=""}});function b(){var d,a,k;if((d=r.rules)!=null&&d.length)for(const m of r.rules){const p=m(o.value,(a=n==null?void 0:n.value)==null?void 0:a.formData,(k=n==null?void 0:n.value)==null?void 0:k.formContext);if(p!==!0)return p||"Wrong value"}}function i(){u.value=!0}const h={v:e.computed({get:()=>o.value,set:d=>o.value=d})};return(d,a)=>{var k,m;return e.renderSlot(d.$slots,"default",{onBlur:i,error:y.value,formData:(k=e.unref(n))==null?void 0:k.formData,formContext:(m=e.unref(n))==null?void 0:m.formContext,model:h.v})}}}),N=e.defineComponent({__name:"VuilessForm",props:{formData:{},formContext:{},firstValidation:{default:"on-change"}},emits:["submit"],setup(c,{emit:r}){const o=c,n=r,l=new Map,f=e.ref(!1),u=e.computed(()=>({firstSubmitHappened:f.value,firstValidation:o.firstValidation,register:(i,h)=>{l.set(i,h)},unregister:i=>l.delete(i),formData:o.formData,formContext:o.formContext}));e.provide("vuiless",u);function C(){f.value=!1;for(const{clearErrors:i}of l.values())i()}async function y(){for(const{reset:i}of l.values())i();await e.nextTick(),C()}function b(){f.value=!0;let i=!1;if(o.firstValidation!=="none")for(const{validate:h}of l.values())h()!==!0&&(i=!0);i||n("submit",o.formData)}return(i,h)=>(e.openBlock(),e.createElementBlock("form",{onSubmit:e.withModifiers(b,["prevent"])},[e.renderSlot(i.$slots,"default",{clearErrors:C,reset:y})],32))}}),_=e.defineComponent({__name:"oo-field",props:{field:{},altAction:{},label:{},description:{},hint:{},placeholder:{},classes:{},styles:{},type:{},component:{},autocomplete:{},name:{},value:{},options:{},attrs:{},optional:{},disabled:{},hidden:{},length:{},validators:{},error:{}},setup(c){const r=c,o=e.inject("vuiless"),n=e.computed(()=>({v:o.value.formData[r.field],data:o==null?void 0:o.value.formData,context:o==null?void 0:o.value.formContext,entry:r}));function l(s){return typeof s=="function"?e.computed(()=>B(s,n.value,!0)):e.ref(s)}const f=l(r.label),u=l(r.description),C=l(r.hint),y=l(r.placeholder),b=l(r.optional),i=l(r.disabled),h=l(r.hidden),d=l(r.options),a=e.computed(()=>{const s=E(r.classes,n.value);return typeof s=="string"?{[s]:!0,disabled:i.value,required:!b.value}:{...s||{},disabled:i.value,required:!b.value}}),k=e.computed(()=>E(r.styles,n.value)),m=e.computed(()=>E(r.attrs,n.value)),p=e.computed(()=>{var s;return(s=r.validators)==null?void 0:s.map(t=>(g,S,x)=>B(t,{v:g,data:S,context:x,entry:r},!0))});return(s,t)=>(e.openBlock(),e.createBlock(e.unref(A),{modelValue:e.unref(o).formData[r.field],"onUpdate:modelValue":t[0]||(t[0]=g=>e.unref(o).formData[r.field]=g),rules:p.value},{default:e.withCtx(g=>[e.renderSlot(s.$slots,"default",{onBlur:g.onBlur,error:s.error||g.error,model:g.model,formData:e.unref(o).formData,formContext:e.unref(o).formContext,label:e.unref(f),description:e.unref(u),hint:e.unref(C),placeholder:e.unref(y),classes:{...a.value,error:!!s.error||!!g.error},styles:k.value,optional:e.unref(b),disabled:e.unref(i),hidden:e.unref(h),type:s.type,altAction:s.altAction,component:s.component,vName:s.name,field:s.field,options:e.unref(d),length:s.length,required:!e.unref(b),autocomplete:s.autocomplete,attrs:m.value})]),_:3},8,["modelValue","rules"]))}}),$={key:0},q={key:1},w={key:0},j=["onUpdate:modelValue","onBlur","placeholder","autocomplete","name","type"],U={class:"oo-error-slot"},M={key:4},O={key:5},P=["disabled"],H=e.defineComponent({__name:"oo-form",props:{form:{},formData:{},formContext:{},firstValidation:{},components:{},types:{},errors:{}},emits:["submit","action","unsupported-action"],setup(c,{emit:r}){const o=c,n=e.computed(()=>o.form.executable()),l=e.computed(()=>({v:void 0,data:u.value,context:o.formContext,entry:o})),f=e.ref({}),u=e.computed(()=>o.formData||f.value);function C(a){return typeof a=="function"?e.computed(()=>B(a,l.value)):e.ref(a)}const y=C(n.value.submit.disabled),b=C(n.value.submit.text),i=C(n.value.title);function h(a){o.form.supportsAltAction(a)?d("action",a,u.value):d("unsupported-action",a,u.value)}const d=r;return(a,k)=>(e.openBlock(),e.createBlock(e.unref(N),{"first-validation":a.firstValidation,onSubmit:k[0]||(k[0]=m=>d("submit",m)),"form-data":u.value,"form-context":a.formContext},{default:e.withCtx(m=>[e.renderSlot(a.$slots,"form.header",{clearErrors:m.clearErrors,reset:m.reset,title:e.unref(i),formContext:a.formContext,disabled:e.unref(y)},()=>[e.unref(i)?(e.openBlock(),e.createElementBlock("h2",$,e.toDisplayString(e.unref(i)),1)):e.createCommentVNode("",!0)]),e.renderSlot(a.$slots,"form.before",{clearErrors:m.clearErrors,reset:m.reset}),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.value.entries,p=>{var s;return e.openBlock(),e.createBlock(_,e.mergeProps(p,{error:(s=a.errors)==null?void 0:s[p.field]}),{default:e.withCtx(t=>[e.renderSlot(a.$slots,`field:${t.type}`,e.normalizeProps(e.guardReactiveProps(t)),()=>{var g,S,x;return[p.component&&((g=o.components)!=null&&g[p.component])?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.components[p.component]),e.mergeProps({key:0,"on-blur":t.onBlur,error:t.error,model:t.model,"form-data":t.formData,"form-context":t.formContext,label:t.label,description:t.description,hint:t.hint,placeholder:t.placeholder,class:t.classes,style:t.styles,optional:t.optional,required:!t.required,disabled:t.disabled,hidden:t.hidden,type:t.type,"alt-action":t.altAction,name:t.vName,field:t,options:t.options,length:t.length,autocomplete:t.autocomplete,onAction:h},t.attrs,{modelValue:t.model.value,"onUpdate:modelValue":D=>t.model.value=D}),null,16,["on-blur","error","model","form-data","form-context","label","description","hint","placeholder","class","style","optional","required","disabled","hidden","type","alt-action","name","field","options","length","autocomplete","modelValue","onUpdate:modelValue"])):p.component&&!((S=o.components)!=null&&S[p.component])?(e.openBlock(),e.createElementBlock("div",q," ["+e.toDisplayString(t.label)+'] Component "'+e.toDisplayString(t.component)+'" not supplied ',1)):(x=o.types)!=null&&x[p.type]?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.types[p.type]),e.mergeProps({key:2,"on-blur":t.onBlur,error:t.error,model:t.model,"form-data":t.formData,"form-context":t.formContext,label:t.label,description:t.description,hint:t.hint,placeholder:t.placeholder,class:t.classes,style:t.styles,optional:t.optional,required:!t.required,disabled:t.disabled,hidden:t.hidden,type:t.type,"alt-action":t.altAction,name:t.vName,field:t,options:t.options,length:t.length,autocomplete:t.autocomplete,onAction:h},t.attrs,{modelValue:t.model.value,"onUpdate:modelValue":D=>t.model.value=D}),null,16,["on-blur","error","model","form-data","form-context","label","description","hint","placeholder","class","style","optional","required","disabled","hidden","type","alt-action","name","field","options","length","autocomplete","modelValue","onUpdate:modelValue"])):["text","password","number"].includes(t.type)?(e.openBlock(),e.createElementBlock("div",{key:3,class:e.normalizeClass(["oo-default-field",t.classes])},[e.createElementVNode("label",null,e.toDisplayString(t.label),1),t.description?(e.openBlock(),e.createElementBlock("span",w,e.toDisplayString(t.description),1)):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":D=>t.model.value=D,onBlur:t.onBlur,placeholder:t.placeholder,autocomplete:t.autocomplete,name:t.vName,type:t.type},null,40,j),[[e.vModelDynamic,t.model.value]]),e.createElementVNode("div",U,e.toDisplayString(t.error||t.hint),1)],2)):t.type==="paragraph"?(e.openBlock(),e.createElementBlock("p",M,e.toDisplayString(t.description),1)):(e.openBlock(),e.createElementBlock("div",O," ["+e.toDisplayString(t.label)+'] Not supported field type "'+e.toDisplayString(t.type)+'" '+e.toDisplayString(t.component),1))]})]),_:2},1040,["error"])}),256)),e.renderSlot(a.$slots,"form.after",{clearErrors:m.clearErrors,reset:m.reset,disabled:e.unref(y),formContext:a.formContext}),e.renderSlot(a.$slots,"form.submit",{disabled:e.unref(y),text:e.unref(b),clearErrors:m.clearErrors,reset:m.reset,formContext:a.formContext},()=>[e.createElementVNode("button",{disabled:e.unref(y)},e.toDisplayString(e.unref(b)),9,P)]),e.renderSlot(a.$slots,"form.footer",{disabled:e.unref(y),clearErrors:m.clearErrors,reset:m.reset,formContext:a.formContext})]),_:3},8,["first-validation","form-data","form-context"]))}});V.OoField=_,V.OoForm=H,Object.defineProperty(V,Symbol.toStringTag,{value:"Module"})});
+(function(k,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(k=typeof globalThis<"u"?globalThis:k||self,e(k.index={},k.Vue))})(this,function(k,e){"use strict";var ge=Object.defineProperty;var be=(k,e,y)=>e in k?ge(k,e,{enumerable:!0,configurable:!0,writable:!0,value:y}):k[e]=y;var w=(k,e,y)=>be(k,typeof e!="symbol"?e+"":e,y);function y(l,n){return typeof l=="function"?l(n):l}const v=new Set(["action","paragraph"]);function L(l){var n;const o={};for(const r of l)v.has(r.type)||(o[r.field]=(n=r.value)!==null&&n!==void 0?n:void 0);return o}function T(l,n){return l.fields.some(o=>o.altAction===n)}function q(l,n){if(!l)return;const o={};for(const[r,s]of Object.entries(l))o[r]=y(s,n);return o}const M=e.defineComponent({__name:"VuilessField",props:e.mergeModels({rules:{}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(l){const n=l,o=e.useModel(l,"modelValue"),r=e.inject("vuiless"),s=e.ref(),c=e.ref(!1),p=e.ref(!1),u=e.computed(()=>{var a;if((a=r==null?void 0:r.value)!=null&&a.firstValidation)switch(r.value.firstValidation){case"on-change":return r.value.firstSubmitHappened||c.value;case"touched-on-blur":return r.value.firstSubmitHappened||p.value&&c.value;case"on-blur":return r.value.firstSubmitHappened||p.value;case"on-submit":return r.value.firstSubmitHappened;case"none":return!1}return!1}),S=e.computed(()=>{if(u.value||s.value)return x()});e.watch([o],()=>{s.value=void 0,c.value=!0}),e.onUnmounted(()=>{var a;(a=r==null?void 0:r.value)==null||a.unregister(e.getCurrentInstance())}),r!=null&&r.value&&r.value.register(e.getCurrentInstance(),{validate:()=>(s.value=x(),s.value||!0),clearErrors:()=>{c.value=!1,p.value=!1,s.value=void 0},reset:()=>{o.value=""}});function x(){var a,i,B;if((a=n.rules)!=null&&a.length)for(const f of n.rules){const b=f(o.value,(i=r==null?void 0:r.value)==null?void 0:i.formData,(B=r==null?void 0:r.value)==null?void 0:B.formContext);if(b!==!0)return b||"Wrong value"}}function m(){p.value=!0}const h={v:e.computed({get:()=>o.value,set:a=>o.value=a})};return(a,i)=>{var B,f;return e.renderSlot(a.$slots,"default",{onBlur:m,error:S.value,formData:(B=e.unref(r))==null?void 0:B.formData,formContext:(f=e.unref(r))==null?void 0:f.formContext,model:h.v})}}}),O=e.defineComponent({__name:"VuilessForm",props:{formData:{},formContext:{},firstValidation:{default:"on-change"}},emits:["submit"],setup(l,{emit:n}){const o=l,r=n,s=new Map,c=e.ref(!1),p=e.computed(()=>({firstSubmitHappened:c.value,firstValidation:o.firstValidation,register:(m,h)=>{s.set(m,h)},unregister:m=>s.delete(m),formData:o.formData,formContext:o.formContext}));e.provide("vuiless",p);function u(){c.value=!1;for(const{clearErrors:m}of s.values())m()}async function S(){for(const{reset:m}of s.values())m();await e.nextTick(),u()}function x(){c.value=!0;let m=!1;if(o.firstValidation!=="none")for(const{validate:h}of s.values())h()!==!0&&(m=!0);m||r("submit",o.formData)}return(m,h)=>(e.openBlock(),e.createElementBlock("form",{onSubmit:e.withModifiers(x,["prevent"])},[e.renderSlot(m.$slots,"default",{clearErrors:u,reset:S})],32))}}),N=e.defineComponent({__name:"oo-field",props:{field:{},type:{},component:{},autocomplete:{},altAction:{},order:{},name:{},label:{type:[String,Function]},description:{type:[String,Function]},hint:{type:[String,Function]},placeholder:{type:[String,Function]},optional:{type:[Boolean,Function]},disabled:{type:[Boolean,Function]},hidden:{type:[Boolean,Function]},classes:{type:[String,Object,Function]},styles:{type:[String,Object,Function]},options:{type:[Array,Function]},attrs:{},value:{},validators:{},maxLength:{},minLength:{},min:{},max:{},error:{}},setup(l){const n=l,o=e.inject("vuiless"),r=e.computed(()=>({v:o.value.formData[n.field],data:o.value.formData,context:o.value.formContext??{},entry:void 0})),s=e.computed(()=>y(n.optional,r.value)),c=e.computed(()=>y(n.disabled,r.value)),p=e.computed(()=>y(n.hidden,r.value)),u=e.computed(()=>({...r.value,entry:{field:n.field,type:n.type,component:n.component,name:n.name||n.field,disabled:c.value,optional:s.value,hidden:p.value}})),S=e.computed(()=>y(n.label,u.value)),x=e.computed(()=>y(n.description,u.value)),m=e.computed(()=>y(n.hint,u.value)),h=e.computed(()=>y(n.placeholder,u.value)),a=e.computed(()=>y(n.options,u.value)),i=e.computed(()=>{const _=y(n.classes,u.value);return typeof _=="string"?{[_]:!0,disabled:c.value,required:!s.value}:{..._,disabled:c.value,required:!s.value}}),B=e.computed(()=>y(n.styles,u.value)),f=e.computed(()=>q(n.attrs,u.value)),b=e.computed(()=>n.validators.map(_=>(t,V,d)=>_({v:t,data:V,context:d??{},entry:u.value.entry})));return(_,t)=>(e.openBlock(),e.createBlock(e.unref(M),{modelValue:e.unref(o).formData[n.field],"onUpdate:modelValue":t[0]||(t[0]=V=>e.unref(o).formData[n.field]=V),rules:b.value},{default:e.withCtx(V=>[e.renderSlot(_.$slots,"default",{onBlur:V.onBlur,error:l.error||V.error,model:V.model,formData:e.unref(o).formData,formContext:e.unref(o).formContext,label:S.value,description:x.value,hint:m.value,placeholder:h.value,classes:{...i.value,error:!!l.error||!!V.error},styles:B.value,optional:s.value,disabled:c.value,hidden:p.value,type:l.type,altAction:l.altAction,component:l.component,vName:l.name,field:l.field,options:a.value,maxLength:l.maxLength,required:!s.value,autocomplete:l.autocomplete,attrs:f.value})]),_:3},8,["modelValue","rules"]))}}),$={key:0},j={key:1},U={key:0},I=["onUpdate:modelValue","onBlur","placeholder","autocomplete","name","type","disabled"],P={class:"oo-error-slot"},z={key:4},H={key:0},G=["onUpdate:modelValue","onBlur","name","disabled"],R={key:0,value:"",disabled:""},X=["value"],Y={class:"oo-error-slot"},K={class:"oo-field-label"},Q={key:0},W={class:"oo-radio-group"},J=["value","onUpdate:modelValue","onBlur","name","disabled"],Z={class:"oo-error-slot"},ee=["onUpdate:modelValue","onBlur","name","disabled"],te={key:0},oe={class:"oo-error-slot"},ne=["onClick"],le={key:9},re=["disabled"],ae=e.defineComponent({__name:"oo-form",props:{form:{},formData:{},formContext:{},firstValidation:{},components:{},types:{},errors:{}},emits:["submit","action","unsupported-action"],setup(l,{emit:n}){const o=l,r=e.ref({}),s=e.computed(()=>o.formData||r.value),c=e.computed(()=>({v:void 0,data:s.value,context:o.formContext??{},entry:void 0})),p=e.computed(()=>y(o.form.title,c.value)),u=e.computed(()=>y(o.form.submit.text,c.value)),S=e.computed(()=>y(o.form.submit.disabled,c.value));function x(i){T(o.form,i)?m("action",i,s.value):m("unsupported-action",i,s.value)}const m=n;function h(i){return typeof i=="string"?i:i.key}function a(i){return typeof i=="string"?i:i.label}return(i,B)=>(e.openBlock(),e.createBlock(e.unref(O),{"first-validation":l.firstValidation,onSubmit:B[0]||(B[0]=f=>m("submit",f)),"form-data":s.value,"form-context":l.formContext},{default:e.withCtx(f=>[e.renderSlot(i.$slots,"form.header",{clearErrors:f.clearErrors,reset:f.reset,title:p.value,formContext:l.formContext,disabled:S.value},()=>[p.value?(e.openBlock(),e.createElementBlock("h2",$,e.toDisplayString(p.value),1)):e.createCommentVNode("",!0)]),e.renderSlot(i.$slots,"form.before",{clearErrors:f.clearErrors,reset:f.reset}),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.form.fields,b=>{var _;return e.openBlock(),e.createBlock(N,e.mergeProps({key:b.field},{ref_for:!0},b,{error:(_=l.errors)==null?void 0:_[b.field]}),{default:e.withCtx(t=>[e.renderSlot(i.$slots,`field:${t.type}`,e.mergeProps({ref_for:!0},t),()=>{var V,d,E;return[b.component&&((V=o.components)!=null&&V[b.component])?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.components[b.component]),e.mergeProps({key:0,"on-blur":t.onBlur,error:t.error,model:t.model,"form-data":t.formData,"form-context":t.formContext,label:t.label,description:t.description,hint:t.hint,placeholder:t.placeholder,class:t.classes,style:t.styles,optional:t.optional,required:!t.required,disabled:t.disabled,hidden:t.hidden,type:t.type,"alt-action":t.altAction,name:t.vName,field:t,options:t.options,"max-length":t.maxLength,autocomplete:t.autocomplete,onAction:x},{ref_for:!0},t.attrs,{modelValue:t.model.value,"onUpdate:modelValue":g=>t.model.value=g}),null,16,["on-blur","error","model","form-data","form-context","label","description","hint","placeholder","class","style","optional","required","disabled","hidden","type","alt-action","name","field","options","max-length","autocomplete","modelValue","onUpdate:modelValue"])):b.component&&!((d=o.components)!=null&&d[b.component])?(e.openBlock(),e.createElementBlock("div",j," ["+e.toDisplayString(t.label)+'] Component "'+e.toDisplayString(t.component)+'" not supplied ',1)):(E=o.types)!=null&&E[b.type]?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.types[b.type]),e.mergeProps({key:2,"on-blur":t.onBlur,error:t.error,model:t.model,"form-data":t.formData,"form-context":t.formContext,label:t.label,description:t.description,hint:t.hint,placeholder:t.placeholder,class:t.classes,style:t.styles,optional:t.optional,required:!t.required,disabled:t.disabled,hidden:t.hidden,type:t.type,"alt-action":t.altAction,name:t.vName,field:t,options:t.options,"max-length":t.maxLength,autocomplete:t.autocomplete,onAction:x},{ref_for:!0},t.attrs,{modelValue:t.model.value,"onUpdate:modelValue":g=>t.model.value=g}),null,16,["on-blur","error","model","form-data","form-context","label","description","hint","placeholder","class","style","optional","required","disabled","hidden","type","alt-action","name","field","options","max-length","autocomplete","modelValue","onUpdate:modelValue"])):["text","password","number"].includes(t.type)?e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:3,class:e.normalizeClass(["oo-default-field",t.classes])},[e.createElementVNode("label",null,e.toDisplayString(t.label),1),t.description?(e.openBlock(),e.createElementBlock("span",U,e.toDisplayString(t.description),1)):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",e.mergeProps({"onUpdate:modelValue":g=>t.model.value=g,onBlur:t.onBlur,placeholder:t.placeholder,autocomplete:t.autocomplete,name:t.vName,type:t.type,disabled:t.disabled},{ref_for:!0},t.attrs),null,16,I),[[e.vModelDynamic,t.model.value]]),e.createElementVNode("div",P,e.toDisplayString(t.error||t.hint),1)],2)),[[e.vShow,!t.hidden]]):t.type==="paragraph"?(e.openBlock(),e.createElementBlock("p",z,e.toDisplayString(t.description),1)):t.type==="select"?e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:5,class:e.normalizeClass(["oo-default-field",t.classes])},[e.createElementVNode("label",null,e.toDisplayString(t.label),1),t.description?(e.openBlock(),e.createElementBlock("span",H,e.toDisplayString(t.description),1)):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("select",e.mergeProps({"onUpdate:modelValue":g=>t.model.value=g,onBlur:t.onBlur,name:t.vName,disabled:t.disabled},{ref_for:!0},t.attrs),[t.placeholder?(e.openBlock(),e.createElementBlock("option",R,e.toDisplayString(t.placeholder),1)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,g=>(e.openBlock(),e.createElementBlock("option",{key:h(g),value:h(g)},e.toDisplayString(a(g)),9,X))),128))],16,G),[[e.vModelSelect,t.model.value]]),e.createElementVNode("div",Y,e.toDisplayString(t.error||t.hint),1)],2)),[[e.vShow,!t.hidden]]):t.type==="radio"?e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:6,class:e.normalizeClass(["oo-default-field oo-radio-field",t.classes])},[e.createElementVNode("span",K,e.toDisplayString(t.label),1),t.description?(e.openBlock(),e.createElementBlock("span",Q,e.toDisplayString(t.description),1)):e.createCommentVNode("",!0),e.createElementVNode("div",W,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,g=>(e.openBlock(),e.createElementBlock("label",{key:h(g)},[e.withDirectives(e.createElementVNode("input",e.mergeProps({type:"radio",value:h(g),"onUpdate:modelValue":he=>t.model.value=he,onBlur:t.onBlur,name:t.vName,disabled:t.disabled},{ref_for:!0},t.attrs),null,16,J),[[e.vModelRadio,t.model.value]]),e.createTextVNode(" "+e.toDisplayString(a(g)),1)]))),128))]),e.createElementVNode("div",Z,e.toDisplayString(t.error||t.hint),1)],2)),[[e.vShow,!t.hidden]]):t.type==="checkbox"?e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:7,class:e.normalizeClass(["oo-default-field oo-checkbox-field",t.classes])},[e.createElementVNode("label",null,[e.withDirectives(e.createElementVNode("input",e.mergeProps({type:"checkbox","onUpdate:modelValue":g=>t.model.value=g,onBlur:t.onBlur,name:t.vName,disabled:t.disabled},{ref_for:!0},t.attrs),null,16,ee),[[e.vModelCheckbox,t.model.value]]),e.createTextVNode(" "+e.toDisplayString(t.label),1)]),t.description?(e.openBlock(),e.createElementBlock("span",te,e.toDisplayString(t.description),1)):e.createCommentVNode("",!0),e.createElementVNode("div",oe,e.toDisplayString(t.error||t.hint),1)],2)),[[e.vShow,!t.hidden]]):t.type==="action"?(e.openBlock(),e.createElementBlock("div",{key:8,class:e.normalizeClass(["oo-default-field oo-action-field",t.classes])},[e.createElementVNode("button",{type:"button",onClick:g=>x(t.altAction)},e.toDisplayString(t.label),9,ne)],2)):(e.openBlock(),e.createElementBlock("div",le," ["+e.toDisplayString(t.label)+'] Not supported field type "'+e.toDisplayString(t.type)+'" '+e.toDisplayString(t.component),1))]})]),_:2},1040,["error"])}),128)),e.renderSlot(i.$slots,"form.after",{clearErrors:f.clearErrors,reset:f.reset,disabled:S.value,formContext:l.formContext}),e.renderSlot(i.$slots,"form.submit",{disabled:S.value,text:u.value,clearErrors:f.clearErrors,reset:f.reset,formContext:l.formContext},()=>[e.createElementVNode("button",{disabled:S.value},e.toDisplayString(u.value),9,re)]),e.renderSlot(i.$slots,"form.footer",{disabled:S.value,clearErrors:f.clearErrors,reset:f.reset,formContext:l.formContext})]),_:3},8,["first-validation","form-data","form-context"]))}}),se={global:null,process:null,Buffer:null,require:null,__filename:null,__dirname:null,exports:null,module:null,setImmediate:null,clearImmediate:null,setTimeout:null,clearTimeout:null,setInterval:null,clearInterval:null,queueMicrotask:null,queueGlobalMicrotask:null,globalThis:null,window:null,self:null,document:null,localStorage:null,sessionStorage:null,indexedDB:null,caches:null,console:null,performance:null,fetch:null,XMLHttpRequest:null,Image:null,Audio:null,navigator:null,navigation:null,location:null,history:null,screen:null,requestAnimationFrame:null,cancelAnimationFrame:null,cancelIdleCallback:null,captureEvents:null,chrome:null,clientInformation:null,addEventListener:null,removeEventListener:null,blur:null,close:null,closed:null,confirm:null,alert:null,customElements:null,dispatchEvent:null,debug:null,focus:null,find:null,frames:null,getSelection:null,getScreenDetails:null,getEventListeners:null,keys:null,launchQueue:null,parent:null,postMessage:null,print:null,profile:null,profileEnd:null,prompt:null,queryLocalFonts:null,queryObjects:null,releaseEvents:null,reportError:null,resizeBy:null,resizeTo:null,scheduler:null,stop:null,scroll:null,scrollBy:null,scrollTo:null,scrollY:null,scrollX:null,top:null,eval:null,__ctx__:null};class ce{constructor(){w(this,"cache",new Map)}call(n,o){return this.getFn(n)(o)}getFn(n){let o=this.cache.get(n);return o||(o=ie(n),this.cache.set(n,o)),o}}function ie(l){const n=`with(__ctx__){
+${l}
+}`,o=new Function("__ctx__",n);return r=>{const s=Object.freeze(Object.assign({},se,r));return o(s)}}const A=new ce;function D(l){const n=`return (${l})(v, data, context, entry)`;return A.getFn(n)}function F(l){const n=`return (${l})(data, context)`;return A.getFn(n)}function me(l){const n=`return (${l})(v, data, context)`;return A.getFn(n)}const de=new Set(["action","paragraph","select","radio","checkbox"]);function ue(l){return(Array.isArray(l)?l:[l]).map(o=>{if(typeof o=="object"&&o!==null&&"label"in o){const{label:r,value:s}=o;return s!==void 0?{key:s,label:r}:r}return String(o)})}function C(l,n,o,r,s){const c=o.get(n);if(typeof c=="string")return r(c);const p=o.get(l);return p!==void 0?p:s}function pe(l){const n=l.get("foorm.attr"),o=l.get("foorm.fn.attr");if(!n&&!o)return;const r={};if(n){const s=Array.isArray(n)?n:[n];for(const c of s)if(typeof c=="object"&&c!==null&&"name"in c&&"value"in c){const{name:p,value:u}=c;r[p]=u}}if(o){const s=Array.isArray(o)?o:[o];for(const c of s)if(typeof c=="object"&&c!==null&&"name"in c&&"fn"in c){const{name:p,fn:u}=c;r[p]=D(u)}}return Object.keys(r).length>0?r:void 0}function fe(l){var n,o;const r=l.metadata,s=l.type.props,c=C("foorm.title","foorm.fn.title",r,F,""),p=C("foorm.submit.text","foorm.fn.submit.text",r,F,"Submit"),u=(()=>{const m=r.get("foorm.fn.submit.disabled");return typeof m=="string"?F(m):!1})(),S={text:p,disabled:u},x=[];for(const[m,h]of s.entries()){const a=h.metadata,i=(n=h.type)===null||n===void 0?void 0:n.tags,B=a.get("foorm.type"),f=i?[...i].find(d=>de.has(d)):void 0,b=(o=B??f)!==null&&o!==void 0?o:"text",_=[],t=a.get("foorm.validate");if(t){const d=Array.isArray(t)?t:[t];for(const E of d)typeof E=="string"&&_.push(me(E))}const V={field:m,type:b,component:a.get("foorm.component"),autocomplete:a.get("foorm.autocomplete"),altAction:a.get("foorm.altAction"),order:a.get("foorm.order"),name:m,label:C("meta.label","foorm.fn.label",a,D,m),description:C("meta.description","foorm.fn.description",a,D,""),hint:C("meta.hint","foorm.fn.hint",a,D,""),placeholder:C("meta.placeholder","foorm.fn.placeholder",a,D,""),optional:(()=>{var d;const E=a.get("foorm.fn.optional");return typeof E=="string"?D(E):(d=h.optional)!==null&&d!==void 0?d:!1})(),disabled:(()=>{const d=a.get("foorm.fn.disabled");return typeof d=="string"?D(d):a.get("foorm.disabled")!==void 0})(),hidden:(()=>{const d=a.get("foorm.fn.hidden");return typeof d=="string"?D(d):a.get("foorm.hidden")!==void 0})(),classes:(()=>{const d=a.get("foorm.fn.classes");if(typeof d=="string")return D(d)})(),styles:(()=>{const d=a.get("foorm.fn.styles");if(typeof d=="string")return D(d)})(),options:(()=>{const d=a.get("foorm.fn.options");if(typeof d=="string")return D(d);const E=a.get("foorm.options");if(E)return ue(E)})(),value:a.get("foorm.value"),validators:_,attrs:pe(a),maxLength:a.get("expect.maxLength"),minLength:a.get("expect.minLength"),min:a.get("expect.min"),max:a.get("expect.max")};x.push(V)}return x.sort((m,h)=>{var a,i;return((a=m.order)!==null&&a!==void 0?a:1/0)-((i=h.order)!==null&&i!==void 0?i:1/0)}),{title:c,submit:S,fields:x}}function ye(l){const n=fe(l),o=e.reactive(L(n.fields));return{form:n,formData:o}}k.OoField=N,k.OoForm=ae,k.useFoorm=ye,Object.defineProperty(k,Symbol.toStringTag,{value:"Module"})});

package/dist/style.css

@@ -1 +1 @@
-.oo-default-field{display:flex;flex-direction:column;gap:4px}.oo-default-field.required label:after{content:" *";color:red}.oo-default-field.error input{outline:1px solid red}.oo-default-field .oo-error-slot{height:14px;line-height:12px;font-size:12px}.oo-default-field.error .oo-error-slot{color:red}
+.oo-default-field{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.oo-default-field label{font-size:13px;font-weight:600;color:#374151}.oo-default-field.required label:after{content:" *";color:#ef4444}.oo-default-field span{font-size:12px;color:#6b7280}.oo-default-field input,.oo-default-field select{padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;color:#1d1d1f;background:#fff;transition:border-color .15s,box-shadow .15s;outline:none}.oo-default-field input::placeholder{color:#9ca3af}.oo-default-field input:focus,.oo-default-field select:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f126}.oo-default-field input:disabled,.oo-default-field select:disabled{background:#f3f4f6;color:#9ca3af;cursor:not-allowed}.oo-default-field.error input,.oo-default-field.error select{border-color:#ef4444}.oo-default-field.error input:focus,.oo-default-field.error select:focus{box-shadow:0 0 0 3px #ef444426}.oo-default-field .oo-field-label{font-size:13px;font-weight:600;color:#374151}.oo-radio-group{display:flex;flex-direction:column;gap:6px}.oo-radio-group label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:400;color:#1d1d1f;cursor:pointer}.oo-radio-group input[type=radio]{padding:0;border:none;box-shadow:none}.oo-checkbox-field>label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:400;color:#1d1d1f;cursor:pointer}.oo-checkbox-field>label input[type=checkbox]{padding:0;border:none;box-shadow:none}.oo-default-field .oo-error-slot{min-height:16px;line-height:16px;font-size:12px;color:#6b7280}.oo-default-field.error .oo-error-slot{color:#ef4444}.oo-default-field.oo-action-field button{padding:8px 16px;border:1px solid #d1d5db;border-radius:6px;background:#fff;font-size:13px;font-weight:500;color:#374151;cursor:pointer;transition:background .15s,border-color .15s}.oo-default-field.oo-action-field button:hover{background:#f9fafb;border-color:#9ca3af}h2{margin:0 0 8px;font-size:20px;font-weight:700;color:#111827}p{margin:0 0 4px;font-size:14px;color:#6b7280}button[type=submit],button:not([type]){margin-top:8px;padding:10px 20px;border:none;border-radius:6px;background:#6366f1;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s}button[type=submit]:hover,button:not([type]):hover{background:#4f46e5}button[type=submit]:disabled,button:not([type]):disabled{background:#c7d2fe;cursor:not-allowed}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foormjs/vue",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "@foormjs/vue",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -39,27 +39,38 @@
     "url": "https://github.com/foormjs/foormjs/issues"
   },
   "homepage": "https://github.com/foormjs/foormjs/tree/main/packages/vue#readme",
+  "dependencies": {
+    "vue": "^3.5.28",
+    "vuiless-forms": "^0.0.3",
+    "@foormjs/atscript": "^0.2.1",
+    "foorm": "^0.2.1"
+  },
+  "peerDependencies": {
+    "@atscript/core": "^0.1.7",
+    "@atscript/typescript": "^0.1.7"
+  },
+  "devDependencies": {
+    "@atscript/core": "^0.1.7",
+    "@atscript/typescript": "^0.1.7",
+    "@playwright/test": "^1.58.2",
+    "@tsconfig/node20": "^20.1.9",
+    "@types/node": "^20.19.33",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vue/tsconfig": "^0.5.1",
+    "npm-run-all2": "^6.2.6",
+    "typescript": "~5.4.5",
+    "unplugin-atscript": "^0.1.3",
+    "vite": "^5.4.21",
+    "vite-plugin-dts": "^3.9.1",
+    "vue-tsc": "^2.2.12"
+  },
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
     "build-only": "vite build",
-    "type-check": "vue-tsc --build --force"
-  },
-  "dependencies": {
-    "foorm": "0.1.0",
-    "vue": "^3.3.9",
-    "vuiless-forms": "^0.0.3"
-  },
-  "devDependencies": {
-    "@tsconfig/node20": "^20.1.2",
-    "@types/node": "^20.11.28",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "@vue/tsconfig": "^0.5.1",
-    "npm-run-all2": "^6.1.2",
-    "typescript": "~5.4.0",
-    "vite": "^5.1.6",
-    "vite-plugin-dts": "^3.8.1",
-    "vue-tsc": "^2.0.6"
+    "type-check": "vue-tsc --build --force",
+    "pub": "pnpm publish --access public --no-git-checks",
+    "test:e2e": "playwright test"
   }
-}
+}