form-builder-vue3
Version:
A Vue 3 form builder component library with drag and drop functionality
397 lines (373 loc) • 95.4 kB
JavaScript
(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["form-builder-vue3"]={},D.Vue))})(this,function(D,e){"use strict";function Se(){return re().__VUE_DEVTOOLS_GLOBAL_HOOK__}function re(){return typeof navigator<"u"&&typeof window<"u"?window:typeof globalThis<"u"?globalThis:{}}const Ve=typeof Proxy=="function",Fe="devtools-plugin:setup",De="plugin:settings:set";let j,H;function Be(){var o;return j!==void 0||(typeof window<"u"&&window.performance?(j=!0,H=window.performance):typeof globalThis<"u"&&(!((o=globalThis.perf_hooks)===null||o===void 0)&&o.performance)?(j=!0,H=globalThis.perf_hooks.performance):j=!1),j}function Te(){return Be()?H.now():Date.now()}class ve{constructor(r,n){this.target=null,this.targetQueue=[],this.onQueue=[],this.plugin=r,this.hook=n;const t={};if(r.settings)for(const l in r.settings){const i=r.settings[l];t[l]=i.defaultValue}const c=`__vue-devtools-plugin-settings__${r.id}`;let s=Object.assign({},t);try{const l=localStorage.getItem(c),i=JSON.parse(l);Object.assign(s,i)}catch{}this.fallbacks={getSettings(){return s},setSettings(l){try{localStorage.setItem(c,JSON.stringify(l))}catch{}s=l},now(){return Te()}},n&&n.on(De,(l,i)=>{l===this.plugin.id&&this.fallbacks.setSettings(i)}),this.proxiedOn=new Proxy({},{get:(l,i)=>this.target?this.target.on[i]:(...m)=>{this.onQueue.push({method:i,args:m})}}),this.proxiedTarget=new Proxy({},{get:(l,i)=>this.target?this.target[i]:i==="on"?this.proxiedOn:Object.keys(this.fallbacks).includes(i)?(...m)=>(this.targetQueue.push({method:i,args:m,resolve:()=>{}}),this.fallbacks[i](...m)):(...m)=>new Promise(h=>{this.targetQueue.push({method:i,args:m,resolve:h})})})}async setRealTarget(r){this.target=r;for(const n of this.onQueue)this.target.on[n.method](...n.args);for(const n of this.targetQueue)n.resolve(await this.target[n.method](...n.args))}}function Oe(o,r){const n=o,t=re(),c=Se(),s=Ve&&n.enableEarlyProxy;if(c&&(t.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__||!s))c.emit(Fe,o,r);else{const l=s?new ve(n,c):null;(t.__VUE_DEVTOOLS_PLUGINS__=t.__VUE_DEVTOOLS_PLUGINS__||[]).push({pluginDescriptor:n,setupFn:r,proxy:l}),l&&r(l.proxiedTarget)}}/*!
* vuex v4.1.0
* (c) 2022 Evan You
* @license MIT
*/var ne="store";function le(o){return o===void 0&&(o=null),e.inject(o!==null?o:ne)}function $(o,r){Object.keys(o).forEach(function(n){return r(o[n],n)})}function Ie(o){return o!==null&&typeof o=="object"}function Me(o){return o&&typeof o.then=="function"}function B(o,r){if(!o)throw new Error("[vuex] "+r)}function $e(o,r){return function(){return o(r)}}function ie(o,r,n){return r.indexOf(o)<0&&(n&&n.prepend?r.unshift(o):r.push(o)),function(){var t=r.indexOf(o);t>-1&&r.splice(t,1)}}function ae(o,r){o._actions=Object.create(null),o._mutations=Object.create(null),o._wrappedGetters=Object.create(null),o._modulesNamespaceMap=Object.create(null);var n=o.state;P(o,n,[],o._modules.root,!0),K(o,n,r)}function K(o,r,n){var t=o._state,c=o._scope;o.getters={},o._makeLocalGettersCache=Object.create(null);var s=o._wrappedGetters,l={},i={},m=e.effectScope(!0);m.run(function(){$(s,function(h,g){l[g]=$e(h,o),i[g]=e.computed(function(){return l[g]()}),Object.defineProperty(o.getters,g,{get:function(){return i[g].value},enumerable:!0})})}),o._state=e.reactive({data:r}),o._scope=m,o.strict&&Le(o),t&&n&&o._withCommit(function(){t.data=null}),c&&c.stop()}function P(o,r,n,t,c){var s=!n.length,l=o._modules.getNamespace(n);if(t.namespaced&&(o._modulesNamespaceMap[l]&&process.env.NODE_ENV!=="production"&&console.error("[vuex] duplicate namespace "+l+" for the namespaced module "+n.join("/")),o._modulesNamespaceMap[l]=t),!s&&!c){var i=J(r,n.slice(0,-1)),m=n[n.length-1];o._withCommit(function(){process.env.NODE_ENV!=="production"&&m in i&&console.warn('[vuex] state field "'+m+'" was overridden by a module with the same name at "'+n.join(".")+'"'),i[m]=t.state})}var h=t.context=Re(o,l,n);t.forEachMutation(function(g,y){var _=l+y;qe(o,_,g,h)}),t.forEachAction(function(g,y){var _=g.root?y:l+y,b=g.handler||g;je(o,_,b,h)}),t.forEachGetter(function(g,y){var _=l+y;Ue(o,_,g,h)}),t.forEachChild(function(g,y){P(o,r,n.concat(y),g,c)})}function Re(o,r,n){var t=r==="",c={dispatch:t?o.dispatch:function(s,l,i){var m=z(s,l,i),h=m.payload,g=m.options,y=m.type;if((!g||!g.root)&&(y=r+y,process.env.NODE_ENV!=="production"&&!o._actions[y])){console.error("[vuex] unknown local action type: "+m.type+", global type: "+y);return}return o.dispatch(y,h)},commit:t?o.commit:function(s,l,i){var m=z(s,l,i),h=m.payload,g=m.options,y=m.type;if((!g||!g.root)&&(y=r+y,process.env.NODE_ENV!=="production"&&!o._mutations[y])){console.error("[vuex] unknown local mutation type: "+m.type+", global type: "+y);return}o.commit(y,h,g)}};return Object.defineProperties(c,{getters:{get:t?function(){return o.getters}:function(){return se(o,r)}},state:{get:function(){return J(o.state,n)}}}),c}function se(o,r){if(!o._makeLocalGettersCache[r]){var n={},t=r.length;Object.keys(o.getters).forEach(function(c){if(c.slice(0,t)===r){var s=c.slice(t);Object.defineProperty(n,s,{get:function(){return o.getters[c]},enumerable:!0})}}),o._makeLocalGettersCache[r]=n}return o._makeLocalGettersCache[r]}function qe(o,r,n,t){var c=o._mutations[r]||(o._mutations[r]=[]);c.push(function(l){n.call(o,t.state,l)})}function je(o,r,n,t){var c=o._actions[r]||(o._actions[r]=[]);c.push(function(l){var i=n.call(o,{dispatch:t.dispatch,commit:t.commit,getters:t.getters,state:t.state,rootGetters:o.getters,rootState:o.state},l);return Me(i)||(i=Promise.resolve(i)),o._devtoolHook?i.catch(function(m){throw o._devtoolHook.emit("vuex:error",m),m}):i})}function Ue(o,r,n,t){if(o._wrappedGetters[r]){process.env.NODE_ENV!=="production"&&console.error("[vuex] duplicate getter key: "+r);return}o._wrappedGetters[r]=function(s){return n(t.state,t.getters,s.state,s.getters)}}function Le(o){e.watch(function(){return o._state.data},function(){process.env.NODE_ENV!=="production"&&B(o._committing,"do not mutate vuex store state outside mutation handlers.")},{deep:!0,flush:"sync"})}function J(o,r){return r.reduce(function(n,t){return n[t]},o)}function z(o,r,n){return Ie(o)&&o.type&&(n=r,r=o,o=o.type),process.env.NODE_ENV!=="production"&&B(typeof o=="string","expects string as the type, but found "+typeof o+"."),{type:o,payload:r,options:n}}var Ae="vuex bindings",de="vuex:mutations",W="vuex:actions",U="vuex",Pe=0;function ze(o,r){Oe({id:"org.vuejs.vuex",app:o,label:"Vuex",homepage:"https://next.vuex.vuejs.org/",logo:"https://vuejs.org/images/icons/favicon-96x96.png",packageName:"vuex",componentStateTypes:[Ae]},function(n){n.addTimelineLayer({id:de,label:"Vuex Mutations",color:ce}),n.addTimelineLayer({id:W,label:"Vuex Actions",color:ce}),n.addInspector({id:U,label:"Vuex",icon:"storage",treeFilterPlaceholder:"Filter stores..."}),n.on.getInspectorTree(function(t){if(t.app===o&&t.inspectorId===U)if(t.filter){var c=[];ge(c,r._modules.root,t.filter,""),t.rootNodes=c}else t.rootNodes=[ue(r._modules.root,"")]}),n.on.getInspectorState(function(t){if(t.app===o&&t.inspectorId===U){var c=t.nodeId;se(r,c),t.state=Ke(We(r._modules,c),c==="root"?r.getters:r._makeLocalGettersCache,c)}}),n.on.editInspectorState(function(t){if(t.app===o&&t.inspectorId===U){var c=t.nodeId,s=t.path;c!=="root"&&(s=c.split("/").filter(Boolean).concat(s)),r._withCommit(function(){t.set(r._state.data,s,t.state.value)})}}),r.subscribe(function(t,c){var s={};t.payload&&(s.payload=t.payload),s.state=c,n.notifyComponentUpdate(),n.sendInspectorTree(U),n.sendInspectorState(U),n.addTimelineEvent({layerId:de,event:{time:Date.now(),title:t.type,data:s}})}),r.subscribeAction({before:function(t,c){var s={};t.payload&&(s.payload=t.payload),t._id=Pe++,t._time=Date.now(),s.state=c,n.addTimelineEvent({layerId:W,event:{time:t._time,title:t.type,groupId:t._id,subtitle:"start",data:s}})},after:function(t,c){var s={},l=Date.now()-t._time;s.duration={_custom:{type:"duration",display:l+"ms",tooltip:"Action duration",value:l}},t.payload&&(s.payload=t.payload),s.state=c,n.addTimelineEvent({layerId:W,event:{time:Date.now(),title:t.type,groupId:t._id,subtitle:"end",data:s}})}})})}var ce=8702998,Ge=6710886,He=16777215,me={label:"namespaced",textColor:He,backgroundColor:Ge};function fe(o){return o&&o!=="root"?o.split("/").slice(-2,-1)[0]:"Root"}function ue(o,r){return{id:r||"root",label:fe(r),tags:o.namespaced?[me]:[],children:Object.keys(o._children).map(function(n){return ue(o._children[n],r+n+"/")})}}function ge(o,r,n,t){t.includes(n)&&o.push({id:t||"root",label:t.endsWith("/")?t.slice(0,t.length-1):t||"Root",tags:r.namespaced?[me]:[]}),Object.keys(r._children).forEach(function(c){ge(o,r._children[c],n,t+c+"/")})}function Ke(o,r,n){r=n==="root"?r:r[n];var t=Object.keys(r),c={state:Object.keys(o.state).map(function(l){return{key:l,editable:!0,value:o.state[l]}})};if(t.length){var s=Je(r);c.getters=Object.keys(s).map(function(l){return{key:l.endsWith("/")?fe(l):l,editable:!1,value:Q(function(){return s[l]})}})}return c}function Je(o){var r={};return Object.keys(o).forEach(function(n){var t=n.split("/");if(t.length>1){var c=r,s=t.pop();t.forEach(function(l){c[l]||(c[l]={_custom:{value:{},display:l,tooltip:"Module",abstract:!0}}),c=c[l]._custom.value}),c[s]=Q(function(){return o[n]})}else r[n]=Q(function(){return o[n]})}),r}function We(o,r){var n=r.split("/").filter(function(t){return t});return n.reduce(function(t,c,s){var l=t[c];if(!l)throw new Error('Missing module "'+c+'" for path "'+r+'".');return s===n.length-1?l:l._children},r==="root"?o:o.root._children)}function Q(o){try{return o()}catch(r){return r}}var T=function(r,n){this.runtime=n,this._children=Object.create(null),this._rawModule=r;var t=r.state;this.state=(typeof t=="function"?t():t)||{}},he={namespaced:{configurable:!0}};he.namespaced.get=function(){return!!this._rawModule.namespaced},T.prototype.addChild=function(r,n){this._children[r]=n},T.prototype.removeChild=function(r){delete this._children[r]},T.prototype.getChild=function(r){return this._children[r]},T.prototype.hasChild=function(r){return r in this._children},T.prototype.update=function(r){this._rawModule.namespaced=r.namespaced,r.actions&&(this._rawModule.actions=r.actions),r.mutations&&(this._rawModule.mutations=r.mutations),r.getters&&(this._rawModule.getters=r.getters)},T.prototype.forEachChild=function(r){$(this._children,r)},T.prototype.forEachGetter=function(r){this._rawModule.getters&&$(this._rawModule.getters,r)},T.prototype.forEachAction=function(r){this._rawModule.actions&&$(this._rawModule.actions,r)},T.prototype.forEachMutation=function(r){this._rawModule.mutations&&$(this._rawModule.mutations,r)},Object.defineProperties(T.prototype,he);var R=function(r){this.register([],r,!1)};R.prototype.get=function(r){return r.reduce(function(n,t){return n.getChild(t)},this.root)},R.prototype.getNamespace=function(r){var n=this.root;return r.reduce(function(t,c){return n=n.getChild(c),t+(n.namespaced?c+"/":"")},"")},R.prototype.update=function(r){ye([],this.root,r)},R.prototype.register=function(r,n,t){var c=this;t===void 0&&(t=!0),process.env.NODE_ENV!=="production"&&xe(r,n);var s=new T(n,t);if(r.length===0)this.root=s;else{var l=this.get(r.slice(0,-1));l.addChild(r[r.length-1],s)}n.modules&&$(n.modules,function(i,m){c.register(r.concat(m),i,t)})},R.prototype.unregister=function(r){var n=this.get(r.slice(0,-1)),t=r[r.length-1],c=n.getChild(t);if(!c){process.env.NODE_ENV!=="production"&&console.warn("[vuex] trying to unregister module '"+t+"', which is not registered");return}c.runtime&&n.removeChild(t)},R.prototype.isRegistered=function(r){var n=this.get(r.slice(0,-1)),t=r[r.length-1];return n?n.hasChild(t):!1};function ye(o,r,n){if(process.env.NODE_ENV!=="production"&&xe(o,n),r.update(n),n.modules)for(var t in n.modules){if(!r.getChild(t)){process.env.NODE_ENV!=="production"&&console.warn("[vuex] trying to add a new module '"+t+"' on hot reloading, manual reload is needed");return}ye(o.concat(t),r.getChild(t),n.modules[t])}}var be={assert:function(o){return typeof o=="function"},expected:"function"},Qe={assert:function(o){return typeof o=="function"||typeof o=="object"&&typeof o.handler=="function"},expected:'function or object with "handler" function'},pe={getters:be,mutations:be,actions:Qe};function xe(o,r){Object.keys(pe).forEach(function(n){if(r[n]){var t=pe[n];$(r[n],function(c,s){B(t.assert(c),Ye(o,n,s,c,t.expected))})}})}function Ye(o,r,n,t,c){var s=r+" should be "+c+' but "'+r+"."+n+'"';return o.length>0&&(s+=' in module "'+o.join(".")+'"'),s+=" is "+JSON.stringify(t)+".",s}function Xe(o){return new S(o)}var S=function o(r){var n=this;r===void 0&&(r={}),process.env.NODE_ENV!=="production"&&(B(typeof Promise<"u","vuex requires a Promise polyfill in this browser."),B(this instanceof o,"store must be called with the new operator."));var t=r.plugins;t===void 0&&(t=[]);var c=r.strict;c===void 0&&(c=!1);var s=r.devtools;this._committing=!1,this._actions=Object.create(null),this._actionSubscribers=[],this._mutations=Object.create(null),this._wrappedGetters=Object.create(null),this._modules=new R(r),this._modulesNamespaceMap=Object.create(null),this._subscribers=[],this._makeLocalGettersCache=Object.create(null),this._scope=null,this._devtools=s;var l=this,i=this,m=i.dispatch,h=i.commit;this.dispatch=function(_,b){return m.call(l,_,b)},this.commit=function(_,b,O){return h.call(l,_,b,O)},this.strict=c;var g=this._modules.root.state;P(this,g,[],this._modules.root),K(this,g),t.forEach(function(y){return y(n)})},Y={state:{configurable:!0}};S.prototype.install=function(r,n){r.provide(n||ne,this),r.config.globalProperties.$store=this;var t=this._devtools!==void 0?this._devtools:process.env.NODE_ENV!=="production"||!1;t&&ze(r,this)},Y.state.get=function(){return this._state.data},Y.state.set=function(o){process.env.NODE_ENV!=="production"&&B(!1,"use store.replaceState() to explicit replace store state.")},S.prototype.commit=function(r,n,t){var c=this,s=z(r,n,t),l=s.type,i=s.payload,m=s.options,h={type:l,payload:i},g=this._mutations[l];if(!g){process.env.NODE_ENV!=="production"&&console.error("[vuex] unknown mutation type: "+l);return}this._withCommit(function(){g.forEach(function(_){_(i)})}),this._subscribers.slice().forEach(function(y){return y(h,c.state)}),process.env.NODE_ENV!=="production"&&m&&m.silent&&console.warn("[vuex] mutation type: "+l+". Silent option has been removed. Use the filter functionality in the vue-devtools")},S.prototype.dispatch=function(r,n){var t=this,c=z(r,n),s=c.type,l=c.payload,i={type:s,payload:l},m=this._actions[s];if(!m){process.env.NODE_ENV!=="production"&&console.error("[vuex] unknown action type: "+s);return}try{this._actionSubscribers.slice().filter(function(g){return g.before}).forEach(function(g){return g.before(i,t.state)})}catch(g){process.env.NODE_ENV!=="production"&&(console.warn("[vuex] error in before action subscribers: "),console.error(g))}var h=m.length>1?Promise.all(m.map(function(g){return g(l)})):m[0](l);return new Promise(function(g,y){h.then(function(_){try{t._actionSubscribers.filter(function(b){return b.after}).forEach(function(b){return b.after(i,t.state)})}catch(b){process.env.NODE_ENV!=="production"&&(console.warn("[vuex] error in after action subscribers: "),console.error(b))}g(_)},function(_){try{t._actionSubscribers.filter(function(b){return b.error}).forEach(function(b){return b.error(i,t.state,_)})}catch(b){process.env.NODE_ENV!=="production"&&(console.warn("[vuex] error in error action subscribers: "),console.error(b))}y(_)})})},S.prototype.subscribe=function(r,n){return ie(r,this._subscribers,n)},S.prototype.subscribeAction=function(r,n){var t=typeof r=="function"?{before:r}:r;return ie(t,this._actionSubscribers,n)},S.prototype.watch=function(r,n,t){var c=this;return process.env.NODE_ENV!=="production"&&B(typeof r=="function","store.watch only accepts a function."),e.watch(function(){return r(c.state,c.getters)},n,Object.assign({},t))},S.prototype.replaceState=function(r){var n=this;this._withCommit(function(){n._state.data=r})},S.prototype.registerModule=function(r,n,t){t===void 0&&(t={}),typeof r=="string"&&(r=[r]),process.env.NODE_ENV!=="production"&&(B(Array.isArray(r),"module path must be a string or an Array."),B(r.length>0,"cannot register the root module by using registerModule.")),this._modules.register(r,n),P(this,this.state,r,this._modules.get(r),t.preserveState),K(this,this.state)},S.prototype.unregisterModule=function(r){var n=this;typeof r=="string"&&(r=[r]),process.env.NODE_ENV!=="production"&&B(Array.isArray(r),"module path must be a string or an Array."),this._modules.unregister(r),this._withCommit(function(){var t=J(n.state,r.slice(0,-1));delete t[r[r.length-1]]}),ae(this)},S.prototype.hasModule=function(r){return typeof r=="string"&&(r=[r]),process.env.NODE_ENV!=="production"&&B(Array.isArray(r),"module path must be a string or an Array."),this._modules.isRegistered(r)},S.prototype.hotUpdate=function(r){this._modules.update(r),ae(this,!0)},S.prototype._withCommit=function(r){var n=this._committing;this._committing=!0,r(),this._committing=n},Object.defineProperties(S.prototype,Y);const N=[];for(let o=0;o<256;++o)N.push((o+256).toString(16).slice(1));function Ze(o,r=0){return(N[o[r+0]]+N[o[r+1]]+N[o[r+2]]+N[o[r+3]]+"-"+N[o[r+4]]+N[o[r+5]]+"-"+N[o[r+6]]+N[o[r+7]]+"-"+N[o[r+8]]+N[o[r+9]]+"-"+N[o[r+10]]+N[o[r+11]]+N[o[r+12]]+N[o[r+13]]+N[o[r+14]]+N[o[r+15]]).toLowerCase()}let X;const et=new Uint8Array(16);function tt(){if(!X){if(typeof crypto>"u"||!crypto.getRandomValues)throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");X=crypto.getRandomValues.bind(crypto)}return X(et)}const _e={randomUUID:typeof crypto<"u"&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function Ee(o,r,n){if(_e.randomUUID&&!o)return _e.randomUUID();o=o||{};const t=o.random??o.rng?.()??tt();if(t.length<16)throw new Error("Random bytes length must be >= 16");return t[6]=t[6]&15|64,t[8]=t[8]&63|128,Ze(t)}const Z=(o,r)=>{const n=o.__vccOpts||o;for(const[t,c]of r)n[t]=c;return n},ot={name:"NotificationModal",props:{modelValue:{type:Boolean,default:!1},title:{type:String,default:"Notification"},message:{type:String,required:!0},buttonText:{type:String,default:"OK"},timeout:{type:Number,default:0},color:{type:[String,Object],default:"indigo",validator:o=>{if(typeof o=="string")return["slate","gray","zinc","neutral","stone","red","orange","amber","yellow","lime","green","emerald","teal","cyan","sky","blue","indigo","violet","purple","fuchsia","pink","rose"].includes(o);if(typeof o=="object"&&o!==null){if(!o.name||typeof o.name!="string"||!o.colors||typeof o.colors!="object")return!1;const r=["50","100","200","300","400","500","600","700","800","900","950"],n=/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;for(const t of r)if(!o.colors[t]||!n.test(o.colors[t]))return!1;return!0}return!1}}},emits:["update:modelValue"],setup(o,{emit:r}){const n=e.ref(o.modelValue);e.watch(()=>o.modelValue,l=>{n.value=l,l&&o.timeout>0&&setTimeout(()=>{t()},o.timeout)});const t=()=>{n.value=!1,r("update:modelValue",!1)},c=l=>{const i=`custom-color-${l.name}`,m=document.getElementById(i);m&&m.remove();const h=[];Object.entries(l.colors).forEach(([y,_])=>{h.push(`.text-${l.name}-${y} { color: ${_} !important; }`),h.push(`.bg-${l.name}-${y} { background-color: ${_} !important; }`),h.push(`.border-${l.name}-${y} { border-color: ${_} !important; }`),h.push(`.focus\\:ring-${l.name}-${y}:focus { --tw-ring-color: ${_} !important; }`),h.push(`.focus\\:border-${l.name}-${y}:focus { border-color: ${_} !important; }`),h.push(`.hover\\:bg-${l.name}-${y}:hover { background-color: ${_} !important; }`),h.push(`.hover\\:text-${l.name}-${y}:hover { color: ${_} !important; }`)});const g=document.createElement("style");g.id=i,g.textContent=h.join(`
`),document.head.appendChild(g)},s=e.computed(()=>{const l=o.color;let i;return typeof l=="string"?i=l:typeof l=="object"&&l.name&&(i=l.name,c(l)),{bg600:`bg-${i}-600`,bg700:`bg-${i}-700`,hoverBg700:`hover:bg-${i}-700`,ringOffset:"focus:ring-offset-2",ring:"focus:ring-2",ringColor:`focus:ring-${i}-500`}});return{show:n,close:t,colorClasses:s}}},rt={key:0,class:"fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center p-4 z-50"},nt={class:"bg-white rounded-lg shadow-xl max-w-md w-full p-6"},lt={class:"text-lg font-medium text-gray-900 mb-4"},it={class:"mb-6"},at={class:"text-gray-700"},st={class:"flex justify-end"};function dt(o,r,n,t,c,s){return t.show?(e.openBlock(),e.createElementBlock("div",rt,[e.createElementVNode("div",nt,[e.createElementVNode("h3",lt,e.toDisplayString(n.title),1),e.createElementVNode("div",it,[e.createElementVNode("p",at,e.toDisplayString(n.message),1)]),e.createElementVNode("div",st,[e.createElementVNode("button",{onClick:r[0]||(r[0]=(...l)=>t.close&&t.close(...l)),class:e.normalizeClass(`inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white ${t.colorClasses.bg600} ${t.colorClasses.hoverBg700} focus:outline-none ${t.colorClasses.ring} ${t.colorClasses.ringOffset} ${t.colorClasses.ringColor}`)},e.toDisplayString(n.buttonText),3)])])])):e.createCommentVNode("",!0)}const ee=Z(ot,[["render",dt]]),ct={name:"FormBuilder",components:{NotificationModal:ee},props:{initialForm:{type:Object,default:()=>({id:null,name:"",fields:[],endpoint:"",method:"POST",headers:{}})},components:{type:Array,default:()=>[]},customFields:{type:Array,default:()=>[]},activeFieldKeys:{type:Array,default:()=>[]},requiredComponents:{type:Array,default:()=>[]},showComponentSelector:{type:Boolean,default:!0},showFormSettings:{type:Boolean,default:!0},showFormName:{type:Boolean,default:!0},showSaveButton:{type:Boolean,default:!0},showExportButton:{type:Boolean,default:!0},showHeaders:{type:Boolean,default:!0},componentSelectorTitle:{type:String,default:"Components"},formSettingsTitle:{type:String,default:"Form Settings"},exportFormatsTitle:{type:String,default:"Export Format"},formNameLabel:{type:String,default:"Form Name"},formNamePlaceholder:{type:String,default:"Enter form name"},saveButtonText:{type:String,default:"Save Form"},exportButtonText:{type:String,default:"Export Code"},editButtonText:{type:String,default:"Edit"},deleteButtonText:{type:String,default:"Delete"},emptyFormText:{type:String,default:"Drag and drop components here to build your form"},endpointLabel:{type:String,default:"Endpoint"},endpointPlaceholder:{type:String,default:"https://api.example.com/submit"},methodLabel:{type:String,default:"HTTP Method"},headersLabel:{type:String,default:"Headers"},headerKeyPlaceholder:{type:String,default:"Key"},headerValuePlaceholder:{type:String,default:"Value"},addHeaderButtonText:{type:String,default:"Add Header"},editModalTitle:{type:String,default:"Edit"},fieldLabelText:{type:String,default:"Label"},fieldKeyText:{type:String,default:"Key"},fieldPlaceholderText:{type:String,default:"Placeholder"},fieldRequiredText:{type:String,default:"Required"},fieldWidthText:{type:String,default:"Field Width"},fieldWidthFullText:{type:String,default:"Full Width"},fieldWidthHalfText:{type:String,default:"Half Width"},validationTitle:{type:String,default:"Validation"},minLengthText:{type:String,default:"Min Length"},maxLengthText:{type:String,default:"Max Length"},minValueText:{type:String,default:"Min Value"},maxValueText:{type:String,default:"Max Value"},patternText:{type:String,default:"Pattern (Regex)"},optionsTitle:{type:String,default:"Options"},optionValuePlaceholder:{type:String,default:"Value"},optionLabelPlaceholder:{type:String,default:"Label"},removeOptionText:{type:String,default:"Remove"},addOptionText:{type:String,default:"Add Option"},cancelButtonText:{type:String,default:"Cancel"},exportModalTitle:{type:String,default:"Export Form Code"},copyButtonText:{type:String,default:"Copy to Clipboard"},closeButtonText:{type:String,default:"Close"},deleteConfirmTitle:{type:String,default:"Confirm Delete"},deleteConfirmMessage:{type:String,default:"Are you sure you want to delete this field? This action cannot be undone."},httpMethods:{type:Array,default:()=>["GET","POST","PUT","PATCH","DELETE"]},exportFormats:{type:Array,default:()=>[{value:"vue",label:"Vue/Nuxt Component"},{value:"json",label:"JSON (Importable)"},{value:"html",label:"Embeddable HTML"}]},storeModuleName:{type:String,default:"formBuilder"},formNameId:{type:String,default:"form-name"},color:{type:[String,Object],default:"indigo",validator:o=>{if(typeof o=="string")return["slate","gray","zinc","neutral","stone","red","orange","amber","yellow","lime","green","emerald","teal","cyan","sky","blue","indigo","violet","purple","fuchsia","pink","rose"].includes(o);if(typeof o=="object"&&o!==null){if(!o.name||typeof o.name!="string"||!o.colors||typeof o.colors!="object")return!1;const r=["50","100","200","300","400","500","600","700","800","900","950"],n=/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;for(const t of r)if(!o.colors[t]||!n.test(o.colors[t]))return!1;return!0}return!1}}},emits:["save","export","field-added","field-updated","field-deleted","form-updated","get-form-code"],setup(o,{emit:r}){let n;try{n=le()}catch(a){console.warn("Vuex store not available:",a)}const t=a=>{try{return n&&n.getters&&n.getters[`${o.storeModuleName}/${a}`]!==void 0?n.getters[`${o.storeModuleName}/${a}`]:null}catch(d){return console.warn(`Error accessing store getter ${a}:`,d),null}},c=(a,d)=>{try{return n&&n.dispatch?n.dispatch(`${o.storeModuleName}/${a}`,d):Promise.resolve()}catch(p){return console.warn(`Error dispatching store action ${a}:`,p),Promise.resolve()}},s=e.ref({...o.initialForm});e.watch(()=>o.initialForm,a=>{s.value={...a}});const l=e.computed(()=>{let a=[];if(o.components&&o.components.length>0)a=[...o.components];else{const d=t("getAvailableComponents");d?a=[...d]:a=[{type:"text",label:"Text Input",icon:"text-fields"},{type:"textarea",label:"Text Area",icon:"subject"},{type:"number",label:"Number",icon:"filter-9-plus"},{type:"select",label:"Select",icon:"arrow-drop-down-circle"},{type:"radio",label:"Radio",icon:"radio-button-checked"},{type:"checkbox",label:"Checkbox",icon:"check-box"},{type:"date",label:"Date",icon:"date-range"},{type:"email",label:"Email",icon:"email"},{type:"password",label:"Password",icon:"vpn-key"}]}return o.customFields&&o.customFields.length>0&&(a=[...a,...o.customFields]),o.activeFieldKeys&&o.activeFieldKeys.length>0&&(a=a.filter(d=>o.activeFieldKeys.includes(d.type))),a}),i=e.computed(()=>{const a=[];return o.requiredComponents&&o.requiredComponents.length>0&&o.requiredComponents.forEach((d,p)=>{a.push({...d,required:!0,isRequiredComponent:!0,requiredIndex:p})}),s.value.fields&&s.value.fields.length>0&&s.value.fields.forEach((d,p)=>{a.push({...d,isRequiredComponent:!1,regularIndex:p})}),a}),m=e.computed(()=>{const a=o.color;let d;return typeof a=="string"?d=a:typeof a=="object"&&a.name&&(d=a.name,h(a)),{focusRing:`focus:ring-${d}-500`,focusBorder:`focus:border-${d}-500`,text600:`text-${d}-600`,text500:`text-${d}-500`,bg600:`bg-${d}-600`,bg700:`bg-${d}-700`,hoverBg700:`hover:bg-${d}-700`,ringOffset:"focus:ring-offset-2",ring:"focus:ring-2",ringColor:`focus:ring-${d}-500`}}),h=a=>{const d=`custom-color-${a.name}`,p=document.getElementById(d);p&&p.remove();const x=[];Object.entries(a.colors).forEach(([E,V])=>{x.push(`.text-${a.name}-${E} { color: ${V} !important; }`),x.push(`.bg-${a.name}-${E} { background-color: ${V} !important; }`),x.push(`.border-${a.name}-${E} { border-color: ${V} !important; }`),x.push(`.focus\\:ring-${a.name}-${E}:focus { --tw-ring-color: ${V} !important; }`),x.push(`.focus\\:border-${a.name}-${E}:focus { border-color: ${V} !important; }`),x.push(`.hover\\:bg-${a.name}-${E}:hover { background-color: ${V} !important; }`),x.push(`.hover\\:text-${a.name}-${E}:hover { color: ${V} !important; }`)});const C=document.createElement("style");C.id=d,C.textContent=x.join(`
`),document.head.appendChild(C)},g=e.ref({...s.value.headers}),y=e.ref({}),_=e.ref(!1),b=e.ref({}),O=e.ref(-1),M=e.ref({}),L=e.ref(!1),A=e.ref(!1),f=e.ref(""),u=e.ref("vue"),w=e.ref(!1),k=e.ref("Notification"),F=e.ref(""),v=e.ref("OK"),I=e.ref(3e3),G=e.ref(!1),q=e.ref(-1);e.onMounted(()=>{if(Object.keys(s.value.headers||{}).forEach(a=>{y.value[a]=a}),o.initialForm.id){const a=t("getFormById");if(a&&typeof a=="function"){const d=a(o.initialForm.id);d&&(s.value={...d})}}});const hn=(a,d)=>{a.dataTransfer.setData("componentType",d.type)},yn=a=>{const d=a.dataTransfer.getData("componentType");if(!d)return;const p=bn(d);s.value.fields.push(p),r("field-added",p),r("form-updated",s.value)},bn=a=>{const d=Ce(a),p=d.toLowerCase().replace(/\s+/g,""),x={id:Ee(),key:p,type:a,label:d,placeholder:"",required:!1,validation:{},width:"full",hidden:!1,defaultValue:""};return["select","radio","checkbox"].includes(a)&&(x.options=[{value:"option1",label:"Option 1"},{value:"option2",label:"Option 2"}]),x},Ce=a=>{const d=l.value.find(p=>p.type===a);return d?d.label:a},pn=a=>{O.value=a,b.value=JSON.parse(JSON.stringify(s.value.fields[a])),b.value.validation||(b.value.validation={}),b.value.hidden===void 0&&(b.value.hidden=!1),b.value.defaultValue===void 0&&(b.value.defaultValue=""),L.value=!1,_.value=!0},xn=()=>{if(M.value={},!b.value.key||b.value.key.trim()===""){M.value.key="Key cannot be empty";return}if(s.value.fields.findIndex((d,p)=>d.key===b.value.key&&p!==O.value)!==-1){M.value.key="This key is already used by another field";return}if(b.value.hidden&&(!b.value.defaultValue||b.value.defaultValue.trim()==="")){M.value.defaultValue="Default value is required for hidden fields";return}b.value.hidden&&(b.value.required=!1),s.value.fields.splice(O.value,1,b.value),r("field-updated",{index:O.value,field:b.value}),r("form-updated",s.value),Ne()},Ne=()=>{_.value=!1,b.value={},O.value=-1,M.value={},L.value=!1};e.watch(()=>b.value.label,a=>{if(_.value&&a&&!L.value){const d=a.toLowerCase().replace(/\s+/g,"");b.value.key=d}}),e.watch(()=>b.value.hidden,a=>{a&&(b.value.required=!1)});const _n=a=>{q.value=a,G.value=!0},En=()=>{q.value>=0&&(s.value.fields.splice(q.value,1),r("field-deleted",q.value),r("form-updated",s.value)),G.value=!1,q.value=-1},kn=()=>{G.value=!1,q.value=-1},wn=()=>{b.value.options||(b.value.options=[]),b.value.options.push({value:"",label:""})},Cn=a=>{b.value.options.splice(a,1)},Nn=()=>{const a=`header${Object.keys(g.value).length+1}`;g.value[a]="",y.value[a]=a},Sn=()=>{const a={};Object.keys(g.value).forEach(d=>{y.value[d]&&g.value[d]&&(a[y.value[d]]=g.value[d])}),s.value.headers=a;try{c("saveForm",{form:s.value})}catch(d){console.warn("Store not available or error saving form:",d)}r("save",s.value)},oe=()=>{const a=i.value.map(p=>vn(p)).join(`
`),d=i.value.reduce((p,x)=>((x.required||x.validation)&&(p[x.key||x.name||x.type+x.label.replace(/\s+/g,"")]=On(x)),p),{});return`<template>
<form @submit.prevent="submitForm" class="space-y-6">
`+a+`
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-`+o.color+"-600 hover:bg-"+o.color+"-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-"+o.color+`-500">
Submit
</button>
</div>
<!-- Notification Modal -->
<div v-if="showNotification" class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center p-4 z-50">
<div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
<h3 class="text-lg font-medium text-gray-900 mb-4">{{ notificationTitle }}</h3>
<div class="mb-6">
<p class="text-gray-700">{{ notificationMessage }}</p>
</div>
<div class="flex justify-end">
<button
@click="closeNotification"
class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-`+o.color+"-600 hover:bg-"+o.color+"-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-"+o.color+`-500"
>
OK
</button>
</div>
</div>
</div>
</form>
</template>
<script>
import { reactive, ref } from 'vue'
export default {
name: '`+(s.value.name||"GeneratedForm")+`',
setup() {
const formData = reactive({
`+i.value.map(p=>(p.key||p.name||p.type+p.label.replace(/\s+/g,""))+": "+In(p.type,p)).join(`,
`)+`
})
const errors = ref({})
// Notification state
const showNotification = ref(false)
const notificationTitle = ref('Notification')
const notificationMessage = ref('')
const closeNotification = () => {
showNotification.value = false
}
const showNotificationModal = (title, message) => {
notificationTitle.value = title
notificationMessage.value = message
showNotification.value = true
}
const rules = `+JSON.stringify(d,null,6).replace(/"([^"]+)":/g,"$1:")+`
const validate = () => {
const newErrors = {}
Object.keys(rules).forEach(field => {
const fieldRules = rules[field]
if (fieldRules.required && !formData[field]) {
newErrors[field] = 'This field is required'
} else if (fieldRules.min && formData[field].length < fieldRules.min) {
newErrors[field] = \`Minimum length is \${fieldRules.min}\`
} else if (fieldRules.max && formData[field].length > fieldRules.max) {
newErrors[field] = \`Maximum length is \${fieldRules.max}\`
} else if (fieldRules.pattern && !new RegExp(fieldRules.pattern).test(formData[field])) {
newErrors[field] = 'Invalid format'
}
})
errors.value = newErrors
return Object.keys(newErrors).length === 0
}
const submitForm = async () => {
if (!validate()) {
return
}
try {
const response = await fetch('`+(s.value.endpoint||"https://api.example.com/submit")+`', {
method: '`+(s.value.method||"POST")+`',
headers: {
'Content-Type': 'application/json',
`+Object.entries(s.value.headers||{}).map(([p,x])=>"'"+p+"': '"+x+"'").join(`,
`)+`
},
body: JSON.stringify(formData)
})
if (response.ok) {
showNotificationModal('Success', 'Form submitted successfully!')
// Reset form or redirect
} else {
showNotificationModal('Error', 'Error submitting form')
}
} catch (error) {
console.error('Error:', error)
showNotificationModal('Error', 'Error submitting form')
}
}
return {
formData,
errors,
submitForm,
showNotification,
notificationTitle,
notificationMessage,
closeNotification
}
}
}
<\/script>`},Vn=()=>{const a=oe();return r("get-form-code",a),a},Fn=()=>{switch(u.value){case"vue":f.value=oe();break;case"json":f.value=Dn();break;case"html":f.value=Bn();break;default:f.value=oe()}A.value=!0,r("export",f.value)},Dn=()=>{const a={...s.value,fields:i.value,requiredComponents:o.requiredComponents||[]};return JSON.stringify(a,null,2)},Bn=()=>{const a=i.value.map(d=>Tn(d)).join(`
`);return`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${s.value.name||"Generated Form"}</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.5;
color: #333;
max-width: 600px;
margin: 0 auto;
padding: 1rem;
}
.form-group {
margin-bottom: 1rem;
}
.form-group-half {
width: 48%;
display: inline-block;
vertical-align: top;
margin-right: 2%;
}
.form-group-full {
width: 100%;
clear: both;
}
label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
}
input, select, textarea {
width: 100%;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
}
input[type="checkbox"], input[type="radio"] {
width: auto;
margin-right: 0.5rem;
}
.checkbox-label, .radio-label {
display: flex;
align-items: center;
margin-bottom: 0.5rem;
}
button {
background-color: #4f46e5;
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
}
button:hover {
background-color: #4338ca;
}
.error {
color: #dc2626;
font-size: 0.875rem;
margin-top: 0.25rem;
}
</style>
</head>
<body>
<form id="generatedForm" action="${s.value.endpoint||""}" method="${s.value.method||"POST"}">
<h2>${s.value.name||"Generated Form"}</h2>
${a}
<div class="form-group">
<button type="submit">Submit</button>
</div>
</form>
<script>
document.getElementById('generatedForm').addEventListener('submit', function(e) {
e.preventDefault();
// Basic validation
let isValid = true;
const form = this;
const requiredFields = form.querySelectorAll('[required]');
requiredFields.forEach(function(field) {
const errorElement = document.getElementById(field.id + '-error');
if (!field.value) {
isValid = false;
if (errorElement) {
errorElement.textContent = 'This field is required';
}
} else if (errorElement) {
errorElement.textContent = '';
}
});
if (isValid) {
// You can add AJAX submission here if needed
form.submit();
}
});
<\/script>
</body>
</html>`},Tn=a=>{const d=a.key||a.name||a.type+a.label.replace(/\s+/g,""),p=a.required?" required":"",x=`<div id="${d}-error" class="error"></div>`,C=a.width==="half"?"form-group-half":"form-group-full";switch(a.type){case"text":case"email":case"password":case"number":case"date":return`<div class="form-group ${C}">
<label for="${d}">${a.label}${a.required?" *":""}</label>
<input
type="${a.type}"
id="${d}"
name="${d}"
placeholder="${a.placeholder||""}"${p}
>
${x}
</div>`;case"textarea":return`<div class="form-group ${C}">
<label for="${d}">${a.label}${a.required?" *":""}</label>
<textarea
id="${d}"
name="${d}"
placeholder="${a.placeholder||""}"${p}
></textarea>
${x}
</div>`;case"select":return`<div class="form-group ${C}">
<label for="${d}">${a.label}${a.required?" *":""}</label>
<select
id="${d}"
name="${d}"${p}
>
<option value="" disabled selected>Select an option</option>
${a.options.map(E=>`<option value="${E.value}">${E.label}</option>`).join(`
`)}
</select>
${x}
</div>`;case"radio":return`<div class="form-group ${C}">
<label>${a.label}${a.required?" *":""}</label>
${a.options.map((E,V)=>`
<div class="radio-label">
<input
type="radio"
id="${d}_${V}"
name="${d}"
value="${E.value}"${V===0&&a.required?p:""}
>
<label for="${d}_${V}">${E.label}</label>
</div>`).join("")}
${x}
</div>`;case"checkbox":return a.options&&a.options.length>1?`<div class="form-group ${C}">
<label>${a.label}${a.required?" *":""}</label>
${a.options.map((E,V)=>`
<div class="checkbox-label">
<input
type="checkbox"
id="${d}_${V}"
name="${d}[]"
value="${E.value}"
>
<label for="${d}_${V}">${E.label}</label>
</div>`).join("")}
${x}
</div>`:`<div class="form-group checkbox-label ${C}">
<input
type="checkbox"
id="${d}"
name="${d}"${p}
>
<label for="${d}">${a.label}${a.required?" *":""}</label>
${x}
</div>`;default:return`<div class="form-group ${C}">
<label for="${d}">${a.label}${a.required?" *":""}</label>
<input
type="text"
id="${d}"
name="${d}"
placeholder="${a.placeholder||""}"${p}
>
${x}
</div>`}},vn=a=>{const d=a.key||a.name||a.type+a.label.replace(/\s+/g,""),p=a.required?" required":"",x=`<p v-if="errors['${d}']" class="mt-2 text-sm text-red-600">{{ errors['${d}'] }}</p>`,C=a.width==="half"?"w-1/2 px-2":"w-full px-2";switch(a.type){case"text":case"email":case"password":case"number":case"date":return`<div class="${C} mb-4">
<label for="${d}" class="block text-sm font-medium text-gray-700">${a.label}${a.required?" *":""}</label>
<input
type="${a.type}"
id="${d}"
v-model="formData.${d}"
class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-${o.color}-500 focus:border-${o.color}-500 sm:text-sm"
placeholder="${a.placeholder||""}"${p}
>
${x}
</div>`;case"textarea":return`<div class="${C} mb-4">
<label for="${d}" class="block text-sm font-medium text-gray-700">${a.label}${a.required?" *":""}</label>
<textarea
id="${d}"
v-model="formData.${d}"
class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-${o.color}-500 focus:border-${o.color}-500 sm:text-sm"
placeholder="${a.placeholder||""}"${p}
></textarea>
${x}
</div>`;case"select":return`<div class="${C} mb-4">
<label for="${d}" class="block text-sm font-medium text-gray-700">${a.label}${a.required?" *":""}</label>
<select
id="${d}"
v-model="formData.${d}"
class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-${o.color}-500 focus:border-${o.color}-500 sm:text-sm"${p}
>
<option value="" disabled>Select an option</option>
${a.options.map(E=>`<option value="${E.value}">${E.label}</option>`).join(`
`)}
</select>
${x}
</div>`;case"radio":return`<div class="${C} mb-4">
<span class="block text-sm font-medium text-gray-700">${a.label}${a.required?" *":""}</span>
<div class="mt-2 space-y-2">
${a.options.map(E=>`
<div class="flex items-center">
<input
type="radio"
id="${d}_${E.value}"
name="${d}"
value="${E.value}"
v-model="formData.${d}"
class="h-4 w-4 text-${o.color}-600 focus:ring-${o.color}-500 border-gray-300"${p}
>
<label for="${d}_${E.value}" class="ml-3 block text-sm font-medium text-gray-700">
${E.label}
</label>
</div>`).join("")}
</div>
${x}
</div>`;case"checkbox":return a.options&&a.options.length>1?`<div class="${C} mb-4">
<span class="block text-sm font-medium text-gray-700">${a.label}${a.required?" *":""}</span>
<div class="mt-2 space-y-2">
${a.options.map(E=>`
<div class="flex items-center">
<input
type="checkbox"
id="${d}_${E.value}"
value="${E.value}"
v-model="formData.${d}"
class="h-4 w-4 text-${o.color}-600 focus:ring-${o.color}-500 border-gray-300 rounded"
>
<label for="${d}_${E.value}" class="ml-3 block text-sm font-medium text-gray-700">
${E.label}
</label>
</div>`).join("")}
</div>
${x}
</div>`:`<div class="${C} mb-4 flex items-center">
<input
type="checkbox"
id="${d}"
v-model="formData.${d}"
class="h-4 w-4 text-${o.color}-600 focus:ring-${o.color}-500 border-gray-300 rounded"${p}
>
<label for="${d}" class="ml-3 block text-sm font-medium text-gray-700">
${a.label}${a.required?" *":""}
</label>
${x}
</div>`;default:return`<div class="${C} mb-4">
<label for="${d}" class="block text-sm font-medium text-gray-700">${a.label}${a.required?" *":""}</label>
<input
type="text"
id="${d}"
v-model="formData.${d}"
class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-${o.color}-500 focus:border-${o.color}-500 sm:text-sm"
placeholder="${a.placeholder||""}"${p}
>
${x}
</div>`}},On=a=>{const d={};return a.required&&(d.required=!0),a.validation&&(a.validation.min!==void 0&&a.validation.min!==null&&a.validation.min!==""&&(d.min=parseInt(a.validation.min)),a.validation.max!==void 0&&a.validation.max!==null&&a.validation.max!==""&&(d.max=parseInt(a.validation.max)),a.validation.pattern&&(d.pattern=a.validation.pattern)),d},In=(a,d)=>{switch(a){case"checkbox":return d&&d.options&&d.options.length>1?"[]":"false";case"number":return"0";case"select":case"radio":return"''";default:return"''"}};return{currentForm:s,availableComponents:l,allFields:i,colorClasses:m,headers:g,headerKeys:y,showFieldModal:_,editingField:b,editingFieldIndex:O,fieldErrors:M,keyManuallyEdited:L,showExportModal:A,exportedCode:f,selectedExportFormat:u,showNotification:w,notificationTitle:k,notificationMessage:F,notificationButtonText:v,notificationTimeout:I,showDeleteConfirmModal:G,pendingDeleteIndex:q,onDragStart:hn,onDrop:yn,getComponentLabel:Ce,editField:pn,saveField:xn,closeFieldModal:Ne,deleteField:_n,confirmDeleteField:En,cancelDeleteField:kn,addOption:wn,removeOption:Cn,addHeader:Nn,saveForm:Sn,exportFormCode:Fn,getFormCode:Vn,closeExportModal:()=>{A.value=!1},copyCode:()=>{navigator.clipboard.writeText(f.value).then(()=>{k.value="Success",F.value="Code copied to clipboard!",v.value="OK",w.value=!0}).catch(a=>{console.error("Failed to copy code: ",a),k.value="Error",F.value="Failed to copy code to clipboard",v.value="OK",w.value=!0})}}}},mt={class:"form-builder"},ft={class:"grid grid-cols-1 md:grid-cols-4 gap-6"},ut={key:0,class:"md:col-span-1 bg-white shadow rounded-lg p-4"},gt={class:"text-lg font-medium text-gray-900 mb-4"},ht={class:"space-y-2"},yt=["onDragstart"],bt={class:"flex items-center"},pt={class:"text-gray-700"},xt={class:"md:col-span-2 bg-white shadow rounded-lg p-4"},_t={class:"flex justify-between items-center mb-4"},Et={key:0},kt=["for"],wt=["id","placeholder"],Ct={class:"flex space-x-2"},Nt={key:1,class:"flex space-x-2"},St=["value"],Vt={key:0,class:"text-center text-gray-500 py-8"},Ft={key:1,class:"grid grid-cols-2 gap-4"},Dt={class:"flex justify-between items-start"},Bt={class:"w-full"},Tt={class:"flex justify-between mb-2"},vt={class:"flex items-center"},Ot={class:"font-medium text-gray-700"},It={key:0,class:"ml-2 px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded-full"},Mt={key:0,class:"flex space-x-1"},$t=["onClick"],Rt=["onClick"],qt={class:"text-sm text-gray-500"},jt={key:0},Ut={key:1},Lt={key:2},At={key:3},Pt={key:4},zt={key:0},Gt={key:1},Ht={key:2},Kt={key:5},Jt={key:1,class:"md:col-span-1 bg-white shadow rounded-lg p-4"},Wt={class:"text-lg font-medium text-gray-900 mb-4"},Qt={class:"space-y-4"},Yt={for:"endpoint",class:"block text-sm font-medium text-gray-700"},Xt=["placeholder"],Zt={for:"method",class:"block text-sm font-medium text-gray-700"},eo=["value"],to={key:0},oo={class:"block text-sm font-medium text-gray-700 mb-2"},ro=["onUpdate:modelValue","placeholder"],no=["onUpdate:modelValue","placeholder"],lo={key:0,class:"fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center p-4"},io={class:"bg-white rounded-lg shadow-xl max-w-md w-full p-6"},ao={class:"text-lg font-medium text-gray-900 mb-4"},so={class:"space-y-4"},co={for:"field-label",class:"block text-sm font-medium text-gray-700"},mo={style:{display:"block !important"}},fo={for:"field-key",class:"block text-sm font-medium text-gray-700"},uo={key:0,class:"mt-1 text-sm text-red-600"},go={for:"field-placeholder",class:"block text-sm font-medium text-gray-700"},ho={class:"flex items-center"},yo=["disabled"],bo={class:"flex items-center"},po={key:0},xo={key:0,class:"mt-1 text-sm text-red-600"},_o={class:"block text-sm font-medium text-gray-700 mb-2"},Eo={class:"flex space-x-4"},ko={class:"flex items-center"},wo={for:"field-width-full",class:"ml-2 block text-sm text-gray-900"},Co={class:"flex items-center"},No={for:"field-width-half",class:"ml-2 block text-sm text-gray-900"},So={key:1},Vo={class:"text-sm font-medium text-gray-700 mb-2"},Fo={key:0,class:"grid grid-cols-2 gap-4"},Do={for:"field-min",class:"block text-sm font-medium text-gray-700"},Bo={for:"field-max",class:"block text-sm font-medium text-gray-700"},To={key:1,class:"grid grid-cols-2 gap-4"},vo={for:"field-min",class:"block text-sm font-medium text-gray-700"},Oo={for:"field-max",class:"block text-sm font-medium text-gray-700"},Io={key:2},Mo={for:"field-pattern",class:"block text-sm font-medium text-gray-700 mt-4"},$o={key:2},Ro={class:"text-sm font-medium text-gray-700 mb-2"},qo=["onUpdate:modelValue","placeholder"],jo=["onUpdate:modelValue","placeholder"],Uo=["onClick"],Lo={class:"mt-6 flex justify-end space-x-3"},Ao={key:1,class:"fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center p-4"},Po={class:"bg-white rounded-lg shadow-xl max-w-4xl w-full p-6"},zo={class:"text-lg font-medium text-gray-900 mb-4"},Go={class:"mb-4"},Ho={class:"bg-gray-100 p-4 rounded-md overflow-auto max-h-96"},Ko={class:"flex justify-end"},Jo={key:2,class:"fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center p-4"},Wo={class:"bg-white rounded-lg shadow-xl max-w-md w-full p-6"},Qo={class:"text-lg font-medium text-gray-900 mb-4"},Yo={class:"mb-6"},Xo={class:"text-gray-700"},Zo={class:"flex justify-end space-x-3"};