form-formatter
Version:
A comprehensive Vue 3 form formatter component with multiple field types and responsive design
2 lines (1 loc) • 19.6 kB
JavaScript
(function(i,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("vue"),require("fahad-select")):typeof define=="function"&&define.amd?define(["exports","vue","fahad-select"],l):(i=typeof globalThis<"u"?globalThis:i||self,l(i.FormFormatter={},i.Vue,i.FahadSelect))})(this,function(i,l,E){"use strict";const C=["required","disabled"],V={key:1,class:"text-red-500"},F={key:0,class:"items-center w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white"},$={class:"flex items-center ps-4"},U=["id","value","name","required","disabled"],D=["for"],z={key:1},R={class:"flex items-center ps-4"},S=["id","value","name","required","disabled"],N=["for"],M={key:2,class:"items-center w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white"},T={class:"flex items-center ps-4"},j=["value","id","required","disabled"],L=["for"],O={key:3},P={class:"flex items-center ps-4"},A=["value","id","required","disabled"],G=["for"],H={key:4,class:"inline-flex items-center me-5 cursor-pointer"},J=["value","disabled"],K={class:"ms-3 text-sm font-medium text-gray-900 dark:text-gray-300"},Q=["placeholder","minlength","maxlength","required","disabled"],W=["required","disabled"],X=["required","disabled"],Y=["placeholder","max","required","disabled"],Z=["multiple","accept","placeholder","required","disabled"],I=["placeholder","minlength","maxlength","rows","required","disabled"],p=["required","disabled"],v=["value"],_={key:9,class:"text-red-500"},k={__name:"FieldRenderer",props:{field:{type:Object,required:!0},form:{type:Object,required:!0},parameters:{type:Object,default:()=>({})},position:{type:Boolean,default:!1},color:{type:Object,required:!0},color_radio:{type:Object,required:!0},setSelectRef:{type:Function,required:!0},triggerCallback:{type:Function,required:!0},onChange:{type:Function,required:!0},handleFileUpload:{type:Function,required:!0}},setup(e){return(y,t)=>e.field.type==="hidden"?l.withDirectives((l.openBlock(),l.createElementBlock("input",{key:0,type:"hidden","onUpdate:modelValue":t[0]||(t[0]=r=>e.form[e.field.model]=r),required:e.field.required,disabled:e.field.disabled??!1},null,8,C)),[[l.vModelText,e.form[e.field.model]]]):e.field.type?(l.openBlock(),l.createElementBlock("div",{key:2,class:l.normalizeClass([{"flex items-center space-x-3":!e.position,"flex-col":e.position,"":e.field.type==="text"},"flex-1 flex"])},[l.createElementVNode("label",{class:l.normalizeClass([{"w-1/4":!e.position,"w-full mb-1":e.position},"text-sm font-medium text-black dark:text-white"])},l.toDisplayString(e.field.label),3),["radio","radio-group","checkbox","checkbox-group","toggle"].includes(e.field.type)?(l.openBlock(),l.createElementBlock("div",{key:0,class:l.normalizeClass([{"w-3/4":!e.position,"w-full":e.position},"bg-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white"])},[e.field.type==="radio"?(l.openBlock(),l.createElementBlock("ul",F,[(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(e.field.options,(r,d)=>(l.openBlock(),l.createElementBlock("li",{key:r.value,class:"w-full border-b border-gray-200 sm:border-b-0 sm:border-r dark:border-gray-600 p-2.5"},[l.createElementVNode("div",$,[l.withDirectives(l.createElementVNode("input",{id:`${e.field.model}-${d}`,type:"radio",value:r.value,"onUpdate:modelValue":t[1]||(t[1]=a=>e.form[e.field.model]=a),name:e.field.model,class:l.normalizeClass(e.color_radio[e.field.color||"default"]),required:e.field.required&&d===0,disabled:e.field.disabled??!1,onChange:t[2]||(t[2]=a=>e.field.callback?e.triggerCallback(e.field.callback):null)},null,42,U),[[l.vModelRadio,e.form[e.field.model]]]),l.createElementVNode("label",{for:`${e.field.model}-${d}`,class:"w-full ms-2 text-sm font-medium text-gray-900 dark:text-gray-300"},l.toDisplayString(r.text),9,D)])]))),128))])):e.field.type==="radio-group"?(l.openBlock(),l.createElementBlock("div",z,[(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(e.field.options,(r,d)=>(l.openBlock(),l.createElementBlock("div",{key:r.value,class:"flex items-center mb-2"},[l.createElementVNode("div",R,[l.withDirectives(l.createElementVNode("input",{id:`${e.field.model}-${d}`,type:"radio",value:r.value,"onUpdate:modelValue":t[3]||(t[3]=a=>e.form[e.field.model]=a),name:e.field.model,class:l.normalizeClass(e.color_radio[e.field.color||"default"]),required:e.field.required&&d===0,disabled:e.field.disabled??!1,onChange:t[4]||(t[4]=a=>e.field.callback?e.triggerCallback(e.field.callback):null)},null,42,S),[[l.vModelRadio,e.form[e.field.model]]]),l.createElementVNode("label",{for:`${e.field.model}-${d}`,class:"w-full ms-2 text-sm font-medium text-gray-900 dark:text-gray-300"},l.toDisplayString(r.text),9,N)])]))),128))])):e.field.type==="checkbox"?(l.openBlock(),l.createElementBlock("ul",M,[(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(e.field.options,(r,d)=>(l.openBlock(),l.createElementBlock("li",{key:r.value,class:"w-full border-b border-gray-200 sm:border-b-0 sm:border-r dark:border-gray-600 p-2.5"},[l.createElementVNode("div",T,[l.withDirectives(l.createElementVNode("input",{type:"checkbox",value:r.value,id:`${e.field.model}-${d}`,"onUpdate:modelValue":t[5]||(t[5]=a=>e.form[e.field.model]=a),class:l.normalizeClass([e.color_radio[e.field.color||"default"],"rounded-md"]),required:e.field.required&&d===0,disabled:e.field.disabled??!1,onChange:t[6]||(t[6]=a=>e.field.callback?e.triggerCallback(e.field.callback):null)},null,42,j),[[l.vModelCheckbox,e.form[e.field.model]]]),l.createElementVNode("label",{for:`${e.field.model}-${d}`,class:"w-full ms-2 text-sm font-medium text-gray-900 dark:text-gray-300"},l.toDisplayString(r.text),9,L)])]))),128))])):e.field.type==="checkbox-group"?(l.openBlock(),l.createElementBlock("div",O,[(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(e.field.options,(r,d)=>(l.openBlock(),l.createElementBlock("div",{key:r.value,class:"flex items-center mb-"},[l.createElementVNode("div",P,[l.withDirectives(l.createElementVNode("input",{type:"checkbox",value:r.value,"onUpdate:modelValue":t[7]||(t[7]=a=>e.form[e.field.model]=a),class:l.normalizeClass([e.color_radio[e.field.color||"default"],"rounded-md m-1"]),id:`${e.field.model}-${d}`,required:e.field.required&&d===0,disabled:e.field.disabled??!1,onChange:t[8]||(t[8]=a=>e.field.callback?e.triggerCallback(e.field.callback):null)},null,42,A),[[l.vModelCheckbox,e.form[e.field.model]]]),l.createElementVNode("label",{for:`${e.field.model}-${d}`,class:"w-full ms-2 text-sm font-medium text-gray-900 dark:text-gray-300"},l.toDisplayString(r.text),9,G)])]))),128))])):e.field.type==="toggle"?(l.openBlock(),l.createElementBlock("label",H,[l.withDirectives(l.createElementVNode("input",{type:"checkbox",class:"sr-only peer","onUpdate:modelValue":t[9]||(t[9]=r=>e.form[e.field.model]=r),value:e.field.value,disabled:e.field.disabled??!1},null,8,J),[[l.vModelCheckbox,e.form[e.field.model]]]),l.createElementVNode("div",{class:l.normalizeClass(e.color[e.field.color||"default"])},null,2),l.createElementVNode("span",K,l.toDisplayString(e.field.placeholder),1)])):l.createCommentVNode("",!0)],2)):e.field.type==="fahadselect"?(l.openBlock(),l.createBlock(l.unref(E),{key:1,ref:r=>e.setSelectRef(r,e.field.model),modelValue:e.form[e.field.model],"onUpdate:modelValue":t[10]||(t[10]=r=>e.form[e.field.model]=r),searchRoute:e.field.route,onTriggerChange:t[11]||(t[11]=r=>e.triggerCallback(e.field.callback)),param:e.parameters[e.field.model],placeholder:e.field.placeholder,label:"label",multiple:e.field.multiple??!1,class:l.normalizeClass({"w-3/4":!e.position,"w-full":e.position}),required:e.field.required,disabled:e.field.disabled??!1},null,8,["modelValue","searchRoute","param","placeholder","multiple","class","required","disabled"])):e.field.type==="text"?l.withDirectives((l.openBlock(),l.createElementBlock("input",{key:2,type:"text","onUpdate:modelValue":t[12]||(t[12]=r=>e.form[e.field.model]=r),placeholder:e.field.placeholder,minlength:e.field.min,maxlength:e.field.max,class:l.normalizeClass(["bg-white border border-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-800 dark:text-white disabled:bg-gray-100 disabled:cursor-not-allowed dark:disabled:bg-gray-700",{"w-3/4":!e.position,"w-full":e.position}]),required:e.field.required,disabled:e.field.disabled??!1},null,10,Q)),[[l.vModelText,e.form[e.field.model]]]):e.field.type==="date"?l.withDirectives((l.openBlock(),l.createElementBlock("input",{key:3,type:"date","onUpdate:modelValue":t[13]||(t[13]=r=>e.form[e.field.model]=r),class:l.normalizeClass(["bg-white border border-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-800 dark:text-white disabled:bg-gray-100 disabled:cursor-not-allowed dark:disabled:bg-gray-700",{"w-3/4":!e.position,"w-full":e.position}]),required:e.field.required,disabled:e.field.disabled??!1,onfocus:"this.showPicker()"},null,10,W)),[[l.vModelText,e.form[e.field.model]]]):e.field.type==="time"?l.withDirectives((l.openBlock(),l.createElementBlock("input",{key:4,type:"time","onUpdate:modelValue":t[14]||(t[14]=r=>e.form[e.field.model]=r),class:l.normalizeClass(["bg-white border border-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-800 dark:text-white disabled:bg-gray-100 disabled:cursor-not-allowed dark:disabled:bg-gray-700",{"w-3/4":!e.position,"w-full":e.position}]),required:e.field.required,disabled:e.field.disabled??!1,onfocus:"this.showPicker()"},null,10,X)),[[l.vModelText,e.form[e.field.model]]]):e.field.type==="number"?l.withDirectives((l.openBlock(),l.createElementBlock("input",{key:5,type:"number","onUpdate:modelValue":t[15]||(t[15]=r=>e.form[e.field.model]=r),placeholder:e.field.placeholder,max:e.field.max,class:l.normalizeClass(["bg-white border border-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-800 dark:text-white disabled:bg-gray-100 disabled:cursor-not-allowed dark:disabled:bg-gray-700",{"w-3/4":!e.position,"w-full":e.position}]),required:e.field.required,disabled:e.field.disabled??!1},null,10,Y)),[[l.vModelText,e.form[e.field.model]]]):e.field.type==="file"?(l.openBlock(),l.createElementBlock("input",{key:6,type:"file",multiple:e.field.multiple,accept:e.field.accept,onChange:t[16]||(t[16]=r=>e.handleFileUpload(r,e.field.model)),placeholder:e.field.placeholder,class:l.normalizeClass(["block text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed dark:disabled:bg-gray-700",{"w-3/4":!e.position,"w-full":e.position}]),required:e.field.required,disabled:e.field.disabled??!1},null,42,Z)):e.field.type==="textarea"?l.withDirectives((l.openBlock(),l.createElementBlock("textarea",{key:7,"onUpdate:modelValue":t[17]||(t[17]=r=>e.form[e.field.model]=r),placeholder:e.field.placeholder,minlength:e.field.min,maxlength:e.field.max,rows:e.field.rows,class:l.normalizeClass(["bg-white border border-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-800 dark:text-white disabled:bg-gray-100 disabled:cursor-not-allowed dark:disabled:bg-gray-700",{"w-3/4":!e.position,"w-full":e.position}]),required:e.field.required,disabled:e.field.disabled??!1},null,10,I)),[[l.vModelText,e.form[e.field.model]]]):e.field.type==="select"?l.withDirectives((l.openBlock(),l.createElementBlock("select",{key:8,"onUpdate:modelValue":t[18]||(t[18]=r=>e.form[e.field.model]=r),class:l.normalizeClass(["bg-white border border-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-800 dark:text-white disabled:bg-gray-100 disabled:cursor-not-allowed dark:disabled:bg-gray-700",{"w-3/4":!e.position,"w-full":e.position}]),required:e.field.required,disabled:e.field.disabled??!1,onChange:t[19]||(t[19]=()=>e.onChange(e.field.callback)),ref:r=>e.setSelectRef(r,e.field.model)},[(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(e.field.options,r=>(l.openBlock(),l.createElementBlock("option",{key:r.value,value:r.value},l.toDisplayString(r.text),9,v))),128))],42,p)),[[l.vModelSelect,e.form[e.field.model]]]):(l.openBlock(),l.createElementBlock("p",_,"Unknown field type: "+l.toDisplayString(e.field.type),1))],2)):(l.openBlock(),l.createElementBlock("p",V,"Unknown field type"))}},s={__name:"FormFormatter",props:{sampledata:{type:Array,required:!0},form:{type:Object,required:!0},parameters:{type:Object,default:()=>({})},position:{type:Boolean,default:!1}},emits:["selectRefsReady","triggerCallback"],setup(e,{emit:y}){const t=e,r={default:"w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 disabled:cursor-not-allowed",red:"w-5 h-5 text-red-600 bg-gray-100 border-gray-300 focus:ring-red-500 dark:focus:ring-red-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 disabled:cursor-not-allowed",green:"w-5 h-5 text-green-600 bg-gray-100 border-gray-300 focus:ring-green-500 dark:focus:ring-green-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 disabled:cursor-not-allowed",purple:"w-5 h-5 text-purple-600 bg-gray-100 border-gray-300 focus:ring-purple-500 dark:focus:ring-purple-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 disabled:cursor-not-allowed",teal:"w-5 h-5 text-teal-600 bg-gray-100 border-gray-300 focus:ring-teal-500 dark:focus:ring-teal-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 disabled:cursor-not-allowed",yellow:"w-5 h-5 text-yellow-400 bg-gray-100 border-gray-300 focus:ring-yellow-500 dark:focus:ring-yellow-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 disabled:cursor-not-allowed",orange:"w-5 h-5 text-orange-500 bg-gray-100 border-gray-300 focus:ring-orange-500 dark:focus:ring-orange-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 disabled:cursor-not-allowed"},d={default:"relative w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600 peer-disabled:cursor-not-allowed",red:"relative w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-red-300 dark:peer-focus:ring-red-800 dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-red-600 dark:peer-checked:bg-red-600 peer-disabled:cursor-not-allowed",green:"relative w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600 dark:peer-checked:bg-green-600 peer-disabled:cursor-not-allowed",purple:"relative w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600 dark:peer-checked:bg-purple-600 peer-disabled:cursor-not-allowed",yellow:"relative w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-yellow-400 dark:peer-checked:bg-yellow-400 peer-disabled:cursor-not-allowed",teal:"relative w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-teal-600 dark:peer-checked:bg-teal-600 peer-disabled:cursor-not-allowed",orange:"relative w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-orange-300 dark:peer-focus:ring-orange-800 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-orange-500 dark:peer-checked:bg-orange-500 peer-disabled:cursor-not-allowed"},a=y,h=l.ref({}),w=(o,c)=>{o&&(h[c]=o)};l.onMounted(()=>{l.nextTick(()=>a("selectRefsReady",h))});const x=o=>{o&&a("triggerCallback",o)},B=o=>{a("triggerCallback",o)},q=(o,c)=>{const f=o.target.files;if(!f.length)return;const g=Array.from(f).map(n=>new Promise(b=>{const m=new FileReader;m.onload=()=>b({name:n.name,size:n.size,type:n.type,content:m.result}),m.readAsDataURL(n)}));Promise.all(g).then(n=>{t.form[c]=n,t.form={...t.form},console.log("Updated form with file data:",t.form)})};return(o,c)=>(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(e.sampledata,(f,g)=>(l.openBlock(),l.createElementBlock(l.Fragment,{key:g},[Array.isArray(f)?(l.openBlock(),l.createElementBlock("div",{key:0,class:l.normalizeClass(`grid grid-cols-${f.length} gap-4`)},[(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(f,(n,b)=>(l.openBlock(),l.createBlock(k,{key:b,field:n,form:e.form,parameters:e.parameters,position:e.position,color:d,color_radio:r,setSelectRef:w,triggerCallback:B,onChange:x,handleFileUpload:q},null,8,["field","form","parameters","position"]))),128))],2)):(l.openBlock(),l.createBlock(k,{key:1,field:f,form:e.form,parameters:e.parameters,position:e.position,color:d,color_radio:r,setSelectRef:w,triggerCallback:B,onChange:x,handleFileUpload:q},null,8,["field","form","parameters","position"]))],64))),128))}},u=e=>{e.component("FormFormatter",s)};typeof window<"u"&&window.Vue&&window.Vue.use({install:u}),i.FormFormatter=s,i.default=s,i.install=u,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});