form-generator-vue/dist/form-generator-vue.min.js

Create beautiful forms using any component library for vue. ## Features * reactive schema based form. * compatible with third party component libraries like vuetify, element etc and custom components. * customizable form layout. ## [Demo](https://divijbha

var FormGeneratorVue=function(e){"use strict";function t(e){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function n(e,t,n,r,o,i,l){try{var s=e[i](l),a=s.value}catch(e){return void n(e)}s.done?t(a):Promise.resolve(a).then(r,o)}function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var n=[],r=!0,o=!1,i=void 0;try{for(var l,s=e[Symbol.iterator]();!(r=(l=s.next()).done)&&(n.push(l.value),!t||n.length!==t);r=!0);}catch(e){o=!0,i=e}finally{try{r||null==s.return||s.return()}finally{if(o)throw i}}return n}(e,t)||s(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function s(e,t){if(e){if("string"==typeof e)return a(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?a(e,t):void 0}}function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function u(e,t){var n;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(n=s(e))||t&&e&&"number"==typeof e.length){n&&(e=n);var r=0,o=function(){};return{s:o,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,l=!0,a=!1;return{s:function(){n=e[Symbol.iterator]()},n:function(){var e=n.next();return l=e.done,e},e:function(e){a=!0,i=e},f:function(){try{l||null==n.return||n.return()}finally{if(a)throw i}}}}var d,f={props:{value:{type:Object,default:null,required:!1},onSubmit:{type:Function,required:!1,default:function(){console.error("submit handler not present")}},components:{type:Array,required:!1,default:function(){return[]}},disabled:{type:Boolean,required:!1,default:!1},schema:{type:Object,default:function(){return{}}},classes:{type:Object,required:!1,default:function(){return{}}},onSubmitFail:{type:Function,required:!1,default:function(){console.warn("Form submit fail")}},activeValidation:{type:Boolean,required:!1,default:!1},activeValidationDelay:{type:Number,required:!1,default:0},logs:{type:Boolean,required:!1,default:!1}}},c={isUndef:function(e){return void 0===e},isObjNotArr:function(e){return c.isArr(e)?e.every((function(e){return c.isObj(e)&&!c.isArr(e)})):c.isObj(e)&&!c.isArr(e)},isObj:function(e){return c.isArr(e)?e.every((function(e){return"object"===t(e)})):"object"===t(e)},isArr:function(e){return Array.isArray(e)},isFunc:function(e){return"function"==typeof e},isBool:function(e){return"boolean"==typeof e},isStr:function(e){return"string"==typeof e},throwError:function(e){throw new Error(e)},warn:function(e){console.warn(e)},hasProperty:function(e,t){return c.isArr(e)?e.every((function(e){return e in t})):e in t},handleFunc:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0;if(c.isFunc(e))return e(t)},handleFuncOrBool:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,n=Boolean(e);return c.isFunc(e)&&(n=e(t)),n},debounce:function(e){return function(t){return function(n){clearTimeout(d),d=setTimeout((function(){clearTimeout(d),e(n)}),t)}}}},m={form:"fgv-form",header:"fgv-form__header",body:"fgv-form__body",footer:"fgv-form__footer",row:"fgv-form__body__row",col:"fgv-form__body__row__col"},h={header:"header",footer:"footer",beforeComponent:function(e){return"before-".concat(e)},afterComponent:function(e){return"after-".concat(e)},beforeRow:"before-row",afterRow:"after-row",beforeCol:"before-col",afterCol:"after-col"},v="fields",p="values",b="errors",y="activeValidation",S="activeValidationDelay",_="v-on",w="component",O="hide",g={text:"text",number:"number"},C={required:"required",disabled:"disabled"};function A(e,t,n,r,o,i,l,s,a,u){"boolean"!=typeof l&&(a=s,s=l,l=!1);const d="function"==typeof n?n.options:n;let f;if(e&&e.render&&(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,o&&(d.functional=!0)),r&&(d._scopeId=r),i?(f=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,a(e)),e&&e._registeredComponents&&e._registeredComponents.add(i)},d._ssrRegister=f):t&&(f=l?function(e){t.call(this,u(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),f)if(d.functional){const e=d.render;d.render=function(t,n){return f.call(n),e(t,n)}}else{const e=d.beforeCreate;d.beforeCreate=e?[].concat(e,f):[f]}return n}var j=A({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("form",{class:[e.CLASS.form],on:{submit:function(t){return t.preventDefault(),e.handleSubmit(t)}}},[n("div",{class:[e.CLASS.header]},[e._t(e.SLOT.header)],2),e._v(" "),n("div",{class:[e.CLASS.body]},[e._l(e.fieldsSchema,(function(t,r){return[e.showRow(t)?e._t(e.SLOT.beforeRow,null,{model:e.slotProps(t)}):e._e(),e._v(" "),e.showRow(t)?n("div",{key:r,class:[e.CLASS.row,e.classes.row]},[e.UTILS.isArr(t)?[e._l(t,(function(t){return[e.showCol(t)?e._t(e.SLOT.beforeCol,null,{model:e.slotProps(t)}):e._e(),e._v(" "),e.showCol(t)?n("div",{key:t.model,class:[e.CLASS.col,t.model,e.classes.col]},[e._t(e.SLOT.beforeComponent(t.model)),e._v(" "),n(e.componentToRender(t),e._g(e._b({tag:"component",model:{value:e.fields[t.model],callback:function(n){e.$set(e.fields,t.model,n)},expression:"fields[s.model]"}},"component",e.componentProps(t),!1),e.componentEvents(t)),[e._t(t.model)],2),e._v(" "),e._t(e.SLOT.afterComponent(t.model))],2):e._e(),e._v(" "),e.showCol(t)?e._t(e.SLOT.afterCol,null,{model:e.slotProps(t)}):e._e()]}))]:[e.showCol(t)?e._t(e.SLOT.beforeCol,null,{model:e.slotProps(t)}):e._e(),e._v(" "),e.showCol(t)?n("div",{key:t.model,class:[e.CLASS.col,t.model,e.classes.col]},[e._t(e.SLOT.beforeComponent(t.model)),e._v(" "),n(e.componentToRender(t),e._g(e._b({tag:"component",model:{value:e.fields[t.model],callback:function(n){e.$set(e.fields,t.model,n)},expression:"fields[schema.model]"}},"component",e.componentProps(t),!1),e.componentEvents(t)),[e._t(t.model)],2),e._v(" "),e._t(e.SLOT.afterComponent(t.model))],2):e._e(),e._v(" "),e.showCol(t)?e._t(e.SLOT.afterCol,null,{model:e.slotProps(t)}):e._e()]],2):e._e(),e._v(" "),e.showRow(t)?e._t(e.SLOT.afterRow,null,{model:e.slotProps(t)}):e._e()]}))],2),e._v(" "),n("div",{class:e.CLASS.footer},[e._t(e.SLOT.footer)],2)])},staticRenderFns:[]},void 0,{mixins:[f],data:function(){var e=this,t={},n={},r=function(r){t[r]=e.vModelValid(!0)&&p in e.value&&e.value[p][r]||"",n[r]=e.vModelValid(!0)&&b in e.value&&e.value[b][r]||""};if(v in this.schema&&c.isArr(this.schema.fields)&&this.schema.fields.length){var o,i=u(this.schema.fields);try{for(i.s();!(o=i.n()).done;){var l=o.value;if(c.isArr(l)){var s,a=u(l);try{for(a.s();!(s=a.n()).done;){r(s.value.model)}}catch(e){a.e(e)}finally{a.f()}}else r(l.model)}}catch(e){i.e(e)}finally{i.f()}}return{fields:t,errors:n,submit:!1}},computed:{SLOT:function(){return h},CLASS:function(){return m},UTILS:function(){return c},avGlobal:function(){return this.activeValidation||!1},avDelayGlobal:function(){return this.activeValidationDelay||0},fieldsSchema:function(){return v in this.schema&&c.isArr(this.schema[v])?this.schema[v]:[]},fieldsSchemaFlat:function(){var e,t=[],n=u(this.fieldsSchema);try{for(n.s();!(e=n.n()).done;){var r=e.value;if(c.isArr(r)){var o,i=u(r);try{for(i.s();!(o=i.n()).done;){var l=o.value;t.push(l)}}catch(e){i.e(e)}finally{i.f()}}else t.push(r)}}catch(e){n.e(e)}finally{n.f()}return t},fieldsSchemaMap:function(){var e=this.fieldsSchemaFlat.map((function(e){return[e.model,e]}));return Object.fromEntries(e)},deValidateField:function(){var e=this;return c.debounce((function(t){e.validateField(t)}))}},watch:{disabled:{handler:function(e){e&&this.removeAllErrors()}},value:{handler:function(){if(this.vModelValid())for(var e in this.value[p])this.fields[e]=this.value[p][e],this.errors[e]=this.value[b][e]},deep:!0},fields:{handler:function(){this.rmUnwantedModels(),this.$emit("input",{values:this.fields,errors:this.errors})},deep:!0,immediate:!0}},created:function(){var e=this,n=function(n){var r=e.findSchema(n);e.$watch("fields.".concat(n),(function(e,n){this.typeCoercion(r),e==n&&t(e)!==t(n)||this.validate(r,!0)}),{deep:!0})};for(var r in this.fields)n(r)},methods:{slotProps:function(e){return c.isArr()?e.map((function(e){return e.model})):e.model},validate:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:void 0,n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(!t||!n){var r={};Object.values(this.fieldsSchemaMap).forEach((function(t){var n=e.validateField(t);r[t.model]=!n||!e.fieldRequired(t)}));var o=Object.keys(r).find((function(e){return!r[e]}));return[r,o]}var i=Boolean(t[y])||this.avGlobal,l=t&&t[S]||this.avDelayGlobal;i&&l?this.deValidateField(l)(t):this.validateField(t)},showRow:function(e){return this.hasFieldsToRender(e)||this.showCol(e)},hasFieldsToRender:function(e){var t=this;return c.isArr(e)&&e.length&&e.some((function(e){return!t.fieldHidden(e)}))},showCol:function(e){return this.componentToRender(e)&&!this.fieldHidden(e)},vModelValid:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=this.value&&c.isObjNotArr(this.value),n=p in this.value&&c.isObjNotArr(this.value[p]),r=b in this.value&&c.isObjNotArr(this.value[b]);return e?t&&n:t&&n&&r},resetFormState:function(){this.submit=!1},removeAllErrors:function(){for(var e in this.errors)this.errors[e]=""},setError:function(e,t){var n=this.errors[e];n===t||c.isObj(t,n)&&JSON.stringify(t)===JSON.stringify(n)||(this.errors[e]=t)},findComponentData:function(e){return this.components.find((function(t){return t&&t.name===e}))},componentProps:function(e){var t,n=this.componentToRender(e),o=this.findComponentData(n),l=e&&e.errorProp||o&&o.errorProp||"errorMessages";return i(i({},e.props),{},(r(t={},l,this.errors[e.model]),r(t,"ref",e.model),r(t,"type",e.type||g.text),r(t,"disabled",this.fieldDisabled(e)),r(t,"required",this.fieldRequired(e)),t))},typeCoercion:function(e){isNaN(this.fields[e.model])&&e&&e.type===g.number&&this.fields[e.model]&&(this.fields[e.model]=Number(this.fields[e.model]))},componentEvents:function(e){return _ in e&&c.isObj(e[_])?e[_]:{}},componentToRender:function(e){var t=e.type||g.text;if(w in e&&e[w]&&c.isStr(e[w]))return e.component;var n=this.components.find((function(e){return e.type.includes(t)})),r=n&&n.name;return!r&&console.error('Component cannot be rendered. Component for type "'.concat(t,'" is not found in form-components.')),r},findSchema:function(e){return this.fieldsSchemaMap[e]},fieldDisabled:function(e){var t=!!(e&&e.props&&C.disabled in e.props)&&c.handleFuncOrBool(e.props[C.disabled]);return!(!this.disabled&&!t)},fieldRequired:function(e){var t=e&&e.props&&C.required in e.props?c.handleFuncOrBool(e.props[C.required]):"validator"in e;return!(!e||this.fieldDisabled(e)||this.fieldHidden(e))&&t},rmUnwantedModels:function(){var e=this;Object.keys(this.fields).filter((function(t){return!e.fieldsSchemaFlat.find((function(e){var n=e.model;return t===n}))})).forEach((function(t){delete e.fields[t],delete e.errors[t]}))},fieldHidden:function(e){var t=O in e&&c.handleFuncOrBool(e[O]);return t},validateField:function(e){var n=this.fieldRequired(e),r=e&&e.validator,o=Boolean(e[y])||this.avGlobal,i=(this.submit||o)&&c.handleFunc(r)||"",l=i?Boolean(i):"";return(n||!this.submit)&&this.setError(e.model,i),this.logs&&console.log({model:e.model,value:this.fields[e.model],type:t(this.fields[e.model]),valid:l,required:n,error:i}),l},handleSubmit:function(){var e,t=this;return(e=regeneratorRuntime.mark((function e(){var n,r,o,i;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(t.submit=!0,t.rmUnwantedModels(),n=t.validate(),r=l(n,2),o=r[0],i=r[1],t.logs&&console.log("form validations:",o),!i){e.next=9;break}return t.resetFormState(),e.next=8,t.onSubmitFail();case 8:return e.abrupt("return");case 9:return e.next=11,t.onSubmit();case 11:t.resetFormState();case 12:case"end":return e.stop()}}),e)})),function(){var t=this,r=arguments;return new Promise((function(o,i){var l=e.apply(t,r);function s(e){n(l,o,i,s,a,"next",e)}function a(e){n(l,o,i,s,a,"throw",e)}s(void 0)}))})()}}},void 0,!1,void 0,!1,void 0,void 0,void 0),F=function(e){F.installed||(F.installed=!0,e.component("FormGeneratorVue",j))},T={install:F},R=null;return"undefined"!=typeof window?R=window.Vue:"undefined"!=typeof global&&(R=global.Vue),R&&R.use(T),j.install=F,e.default=j,e}({});