auto-form-builder/dist/auto-form-builder.umd.js

🧱 Vue Auto Form Builder with schema-based generation, themes, validation and localization.

(function(d,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(d=typeof globalThis<"u"?globalThis:d||self,e(d.AutoFormBuilder={},d.Vue))})(this,function(d,e){"use strict";const f=["for"],z={key:0,class:"text-red-500"},M=["type","id","onUpdate:modelValue","required"],T=["id","onUpdate:modelValue","required"],F=["id","onChange","required"],L={key:4,class:"flex flex-col gap-1"},j=["id","value","name","onUpdate:modelValue","required"],O=["for"],$={key:5,class:"flex items-center gap-2"},A=["id","onUpdate:modelValue","required"],P=["for"],R=["id","onUpdate:modelValue","required"],J=["id","onUpdate:modelValue","required"],G=["id","onUpdate:modelValue","required"],H=["id","onUpdate:modelValue","required"],I=["value"],K={key:10,class:"flex items-center gap-2"},Q=["id","onUpdate:modelValue","required"],W=["for"],X={key:0,class:"text-red-500"},Y={key:11,class:"text-red-500 text-sm mt-1"},p="border rounded px-3 py-2 bg-white text-black dark:bg-gray-800 dark:text-white dark:border-gray-600 focus:outline-none focus:ring focus:border-blue-400",u=e.defineComponent({__name:"AutoForm",props:{schema:{},submitUrl:{},themeConfig:{}},emits:["submit"],setup(y,{emit:i}){const k=y,g=i,l=e.reactive({}),m=e.ref({});function v(a,o){var h;const s=o.target;(h=s==null?void 0:s.files)!=null&&h.length&&(l[a]=s.files[0])}k.schema.forEach(a=>{a.fields.forEach(o=>{l[o.name]=o.type==="checkbox"?!1:""})});function ee(){m.value={};for(const a of k.schema)for(const o of a.fields){const s=l[o.name],h=o.type==="checkbox"?!s:s==="";if(o.required&&h){m.value[o.name]=t("required");continue}if(o.type==="number"){const c=Number(s);o.min!==void 0&&c<o.min&&(m.value[o.name]=t("minValue",o.min)),o.max!==void 0&&c>o.max&&(m.value[o.name]=t("maxValue",o.max))}if(o.type==="text"||o.type==="email"||o.type==="textarea"||o.type==="password"){const c=String(s).length;o.min!==void 0&&c<o.min&&(m.value[o.name]=t("minLength",o.min)),o.max!==void 0&&c>o.max&&(m.value[o.name]=t("maxLength",o.max)),o.pattern&&(new RegExp(o.pattern).test(String(s))||(m.value[o.name]=t("pattern")))}}Object.keys(m.value).length===0&&(k.submitUrl?fetch(k.submitUrl,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(l)}).then(async a=>{if(!a.ok){const s=await a.text();throw new Error(s)}const o=await a.json();g("submit",o)}).catch(a=>{console.error("خطأ في الإرسال:",a),m.value.form=t("submitFailed")||"فشل إرسال البيانات. يرجى المحاولة لاحقًا."}):g("submit",l))}return(a,o)=>{var s,h;return e.openBlock(),e.createElementBlock("form",{onSubmit:e.withModifiers(ee,["prevent"]),class:e.normalizeClass(["max-w-md mx-auto space-y-4",(s=a.themeConfig)==null?void 0:s.form]),dir:"rtl"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.schema,c=>{var b;return e.openBlock(),e.createElementBlock("div",{key:c.section||Math.random(),class:"space-y-4"},[c.section?(e.openBlock(),e.createElementBlock("h2",{key:0,class:e.normalizeClass(((b=a.themeConfig)==null?void 0:b.sectionTitle)||"text-xl font-bold mb-2 dark:text-white border-b pb-1")},e.toDisplayString(c.section),3)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.fields,n=>{var x,B,C,V,E,q,w,_,U,D,N;return e.openBlock(),e.createElementBlock("div",{key:n.name,class:"flex flex-col gap-1"},[n.type!=="checkbox"&&n.type!=="radio"&&n.type!=="switch"?(e.openBlock(),e.createElementBlock("label",{key:0,for:n.name,class:e.normalizeClass(((x=a.themeConfig)==null?void 0:x.label)||"font-medium dark:text-white")},[e.createTextVNode(e.toDisplayString(n.label)+" ",1),n.required?(e.openBlock(),e.createElementBlock("span",z,"*")):e.createCommentVNode("",!0)],10,f)):e.createCommentVNode("",!0),n.type==="text"||n.type==="email"?e.withDirectives((e.openBlock(),e.createElementBlock("input",{key:1,type:n.type,id:n.name,"onUpdate:modelValue":r=>l[n.name]=r,required:n.required,class:e.normalizeClass(((B=a.themeConfig)==null?void 0:B.input)||p)},null,10,M)),[[e.vModelDynamic,l[n.name]]]):n.type==="password"?e.withDirectives((e.openBlock(),e.createElementBlock("input",{key:2,type:"password",id:n.name,"onUpdate:modelValue":r=>l[n.name]=r,required:n.required,class:e.normalizeClass(((C=a.themeConfig)==null?void 0:C.input)||p)},null,10,T)),[[e.vModelText,l[n.name]]]):n.type==="file"?(e.openBlock(),e.createElementBlock("input",{key:3,type:"file",id:n.name,onChange:r=>v(n.name,r),required:n.required,class:e.normalizeClass(((V=a.themeConfig)==null?void 0:V.input)||p)},null,42,F)):n.type==="radio"?(e.openBlock(),e.createElementBlock("div",L,[e.createElementVNode("label",{class:e.normalizeClass(((E=a.themeConfig)==null?void 0:E.label)||"font-medium dark:text-white mb-1")},e.toDisplayString(n.label),3),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.options,r=>{var S;return e.openBlock(),e.createElementBlock("div",{key:r,class:"flex items-center gap-2"},[e.withDirectives(e.createElementVNode("input",{type:"radio",id:`${n.name}-${r}`,value:r,name:n.name,"onUpdate:modelValue":te=>l[n.name]=te,required:n.required},null,8,j),[[e.vModelRadio,l[n.name]]]),e.createElementVNode("label",{for:`${n.name}-${r}`,class:e.normalizeClass(((S=a.themeConfig)==null?void 0:S.radioLabel)||"text-sm dark:text-white")},e.toDisplayString(r),11,O)])}),128))])):n.type==="switch"?(e.openBlock(),e.createElementBlock("div",$,[e.withDirectives(e.createElementVNode("input",{type:"checkbox",id:n.name,"onUpdate:modelValue":r=>l[n.name]=r,required:n.required,class:"accent-blue-600"},null,8,A),[[e.vModelCheckbox,l[n.name]]]),e.createElementVNode("label",{for:n.name,class:e.normalizeClass(((q=a.themeConfig)==null?void 0:q.switchLabel)||"text-sm dark:text-white")},e.toDisplayString(n.label),11,P)])):n.type==="textarea"?e.withDirectives((e.openBlock(),e.createElementBlock("textarea",{key:6,id:n.name,"onUpdate:modelValue":r=>l[n.name]=r,required:n.required,rows:"4",class:e.normalizeClass(((w=a.themeConfig)==null?void 0:w.textarea)||p+" resize-y")},null,10,R)),[[e.vModelText,l[n.name]]]):n.type==="number"?e.withDirectives((e.openBlock(),e.createElementBlock("input",{key:7,type:"number",id:n.name,"onUpdate:modelValue":r=>l[n.name]=r,required:n.required,class:e.normalizeClass(((_=a.themeConfig)==null?void 0:_.input)||p)},null,10,J)),[[e.vModelText,l[n.name]]]):n.type==="date"?e.withDirectives((e.openBlock(),e.createElementBlock("input",{key:8,type:"date",id:n.name,"onUpdate:modelValue":r=>l[n.name]=r,required:n.required,class:e.normalizeClass(((U=a.themeConfig)==null?void 0:U.input)||p)},null,10,G)),[[e.vModelText,l[n.name]]]):n.type==="select"?e.withDirectives((e.openBlock(),e.createElementBlock("select",{key:9,id:n.name,"onUpdate:modelValue":r=>l[n.name]=r,required:n.required,class:e.normalizeClass(((D=a.themeConfig)==null?void 0:D.input)||p)},[o[0]||(o[0]=e.createElementVNode("option",{disabled:"",value:""},"اختر...",-1)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.options,r=>(e.openBlock(),e.createElementBlock("option",{key:r,value:r},e.toDisplayString(r),9,I))),128))],10,H)),[[e.vModelSelect,l[n.name]]]):n.type==="checkbox"?(e.openBlock(),e.createElementBlock("div",K,[e.withDirectives(e.createElementVNode("input",{type:"checkbox",id:n.name,"onUpdate:modelValue":r=>l[n.name]=r,required:n.required,class:"accent-blue-600"},null,8,Q),[[e.vModelCheckbox,l[n.name]]]),e.createElementVNode("label",{for:n.name,class:e.normalizeClass(((N=a.themeConfig)==null?void 0:N.checkboxLabel)||"text-sm dark:text-white")},[e.createTextVNode(e.toDisplayString(n.label)+" ",1),n.required?(e.openBlock(),e.createElementBlock("span",X,"*")):e.createCommentVNode("",!0)],10,W)])):e.createCommentVNode("",!0),m.value[n.name]?(e.openBlock(),e.createElementBlock("p",Y,e.toDisplayString(m.value[n.name]),1)):e.createCommentVNode("",!0)])}),128))])}),128)),e.createElementVNode("button",{type:"submit",class:e.normalizeClass(((h=a.themeConfig)==null?void 0:h.submitButton)||"bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded dark:bg-blue-500 dark:hover:bg-blue-600")}," إرسال ",2)],34)}}});function Z(y){return y.map(i=>({name:i.name,label:i.label,type:i.type,required:i.required??!1,options:i.options??[],min:i.min,max:i.max,pattern:i.pattern}))}d.AutoForm=u,d.default=u,d.parseSchema=Z,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});