vuejs-dynamic-forms/dist/vuejs-dynamic-forms.min.js

A simple Vue.js dynamic-forms component. Supports creating a dyanmic forms with a pretty design using Bootstrap classes

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("bootstrap-css-only"),require("verte/dist/verte.css")):"function"==typeof define&&define.amd?define(["exports","bootstrap-css-only","verte/dist/verte.css"],t):t((e=e||self).vuejsDynamicForms={})}(this,(function(e){"use strict";var t={name:"DynamicForms",props:{hidden:{default:""},values:{type:Object,default:function(){return{name:"This is my name",text:"This is my Text",editor:"<p>This is my HTML Editor Data</p>",tags:["this are my default tags","my subtags"]}}},form:{type:Array,default:function(){return[{name:"Name",placeholder:"Please Write Your Name...",class:"form-control",column:"name",type:"text",value:"test"},{name:"Name Two",placeholder:"Please Write Your Name...",class:"form-control",column:"text",type:"textarea",value:"Text Area"},{name:"Name Three",class:"form-control",column:"editor",type:"editor",value:"Text Area"},{name:"Tags",class:"form-control",type:"tag",column:"tags",subColumn:"tag",autocomplete:["text","and data",1,2,"and three","etcutra"],placeholder:"Write your tags",addOnlyFromAutocomplete:!1},{name:"Select One User",items:[{name:"User 1",id:1},{name:"User 2",id:2}],show:"name",value:"id",type:"selectbox",column:"user",placeholder:"Please Select Your Users"},{name:"Select Multiple Users",items:[{name:"User 1",id:1},{name:"User 2",id:2},{name:"User 3",id:3}],show:"name",value:"id",column:"users",type:"selectbox",placeholder:"Please Select Your Users",multipleSelect:!0,closeOnSelect:!1},{name:"Select Date",column:"date",type:"date",placeholder:"Select Date",class:"myClass"},{name:"Select Color",column:"color",type:"color",placeholder:"Select color",class:"myClass"}]}},title:{type:String,default:"Your Title"},button:{type:Object,default:function(){return{title:"My Button",class:"btn btn-success btn-block"}}},theme:{type:String,default:"dark"}},model:{prop:"hidden",event:"update"},components:{tinymce:function(){return import("vue-tinymce-editor")},VueTagsInput:function(){return import("@johmun/vue-tags-input")},Multiselect:function(){return import("vue-multiselect")},vuejsDatepicker:function(){return import("vuejs-datepicker")},verte:function(){return import("verte")}},data:function(){return{formBack:[],formData:this.form,normalInputs:["text","email","checkbox","radio","password","textarea","file"]}},created:function(){this.formBack=this.values,this.fixFormData()},methods:{action:function(){this.$emit("save",this.formBack)},fixFormData:function(){},filterData:function(e,t){var r=(t=String(t))?t.toLowerCase():"";return e.filter((function(e){return-1!==String(e).toLowerCase().indexOf(r)}))}},computed:{},watch:{formBack:{handler:function(){this.$emit("update",this.formBack)},deep:!0}}};function r(e,t,r,n,o,l,a,i,s,c){"boolean"!=typeof a&&(s=i,i=a,a=!1);var d,m="function"==typeof r?r.options:r;if(e&&e.render&&(m.render=e.render,m.staticRenderFns=e.staticRenderFns,m._compiled=!0,o&&(m.functional=!0)),n&&(m._scopeId=n),l?(d=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,s(e)),e&&e._registeredComponents&&e._registeredComponents.add(l)},m._ssrRegister=d):t&&(d=a?function(e){t.call(this,c(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,i(e))}),d)if(m.functional){var u=m.render;m.render=function(e,t){return d.call(t),u(e,t)}}else{var p=m.beforeCreate;m.beforeCreate=p?[].concat(p,d):[d]}return r}var n,o="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function l(e){return function(e,t){return function(e,t){var r=o?t.media||"default":e,l=a[r]||(a[r]={ids:new Set,styles:[]});if(!l.ids.has(e)){l.ids.add(e);var i=t.source;if(t.map&&(i+="\n/*# sourceURL="+t.map.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),l.element||(l.element=document.createElement("style"),l.element.type="text/css",t.media&&l.element.setAttribute("media",t.media),void 0===n&&(n=document.head||document.getElementsByTagName("head")[0]),n.appendChild(l.element)),"styleSheet"in l.element)l.styles.push(i),l.element.styleSheet.cssText=l.styles.filter(Boolean).join("\n");else{var s=l.ids.size-1,c=document.createTextNode(i),d=l.element.childNodes;d[s]&&l.element.removeChild(d[s]),d.length?l.element.insertBefore(c,d[s]):l.element.appendChild(c)}}}(e,t)}}var a={};var i=t,s=function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("div",{class:e.theme,attrs:{id:"VuejsDynamicForms"}},[r("div",{class:"card "+("dark"==e.theme?"text-white bg-dark":"text-black bg-white")},[r("div",{staticClass:"card-header",domProps:{innerHTML:e._s(e.title)}}),e._v(" "),r("div",{staticClass:"card-body"},[r("form",{on:{submit:function(t){return t.preventDefault(),e.action()}}},[e._l(e.formData,(function(t){return r("div",{key:t.name,staticClass:"form-group"},[e.normalInputs.includes(t.type)?r("div",{staticClass:"row",class:t.class+"-container"},[r("div",{staticClass:"col-md-3"},[r("label",{attrs:{for:t.column}},[e._v(e._s(t.name))])]),e._v(" "),r("div",{staticClass:"col-md-9"},["checkbox"===t.type&&"selectbox"!=t.type&&"textarea"!=t.type&&"editor"!=t.type?r("input",{directives:[{name:"model",rawName:"v-model",value:e.formBack[t.column],expression:"formBack[f.column]"}],class:t.class?t.class:"form-control",attrs:{required:!!t.required&&"",placeholder:t.placeholder,id:t.column,type:"checkbox"},domProps:{checked:Array.isArray(e.formBack[t.column])?e._i(e.formBack[t.column],null)>-1:e.formBack[t.column]},on:{change:function(r){var n=e.formBack[t.column],o=r.target,l=!!o.checked;if(Array.isArray(n)){var a=e._i(n,null);o.checked?a<0&&e.$set(e.formBack,t.column,n.concat([null])):a>-1&&e.$set(e.formBack,t.column,n.slice(0,a).concat(n.slice(a+1)))}else e.$set(e.formBack,t.column,l)}}}):"radio"===t.type&&"selectbox"!=t.type&&"textarea"!=t.type&&"editor"!=t.type?r("input",{directives:[{name:"model",rawName:"v-model",value:e.formBack[t.column],expression:"formBack[f.column]"}],class:t.class?t.class:"form-control",attrs:{required:!!t.required&&"",placeholder:t.placeholder,id:t.column,type:"radio"},domProps:{checked:e._q(e.formBack[t.column],null)},on:{change:function(r){return e.$set(e.formBack,t.column,null)}}}):"selectbox"!=t.type&&"textarea"!=t.type&&"editor"!=t.type?r("input",{directives:[{name:"model",rawName:"v-model",value:e.formBack[t.column],expression:"formBack[f.column]"}],class:t.class?t.class:"form-control",attrs:{required:!!t.required&&"",placeholder:t.placeholder,id:t.column,type:t.type},domProps:{value:e.formBack[t.column]},on:{input:function(r){r.target.composing||e.$set(e.formBack,t.column,r.target.value)}}}):"textarea"==t.type?r("textarea",{directives:[{name:"model",rawName:"v-model",value:e.formBack[t.column],expression:"formBack[f.column]"}],class:t.class?t.class:"form-control",attrs:{required:!!t.required&&"",placeholder:t.placeholder,id:t.column},domProps:{value:e.formBack[t.column]},on:{input:function(r){r.target.composing||e.$set(e.formBack,t.column,r.target.value)}}}):e._e()])]):"editor"==t.type?r("div",{class:t.class+"-container"},[r("label",{attrs:{for:t.column}},[e._v(e._s(t.name))]),e._v(" "),r("tinymce",{staticClass:"tinymce",attrs:{id:t.column},model:{value:e.formBack[t.column],callback:function(r){e.$set(e.formBack,t.column,r)},expression:"formBack[f.column]"}})],1):"tag"==t.type?r("div",{class:t.class+"-container"},[r("div",{staticClass:"row"},[r("div",{staticClass:"col-md-3"},[r("label",{attrs:{for:t.column}},[e._v(e._s(t.name))])]),e._v(" "),r("div",{staticClass:"col-md-9"},[r("VueTagsInput",{attrs:{placeholder:t.placeholder,tags:e.formBack[t.column],"allow-edit-tags":!0,"add-only-from-autocomplete":e.formData[t.addOnlyFromAutocomplete],"autocomplete-items":e.filterData(t.autocomplete,e.formData[t.subColumn])},on:{"tags-changed":function(r){return e.formBack[t.column]=r.map((function(e){return e.text}))}},model:{value:e.formData[t.subColumn],callback:function(r){e.$set(e.formData,t.subColumn,r)},expression:"formData[f.subColumn]"}})],1)])]):"selectbox"==t.type?r("div",{class:t.class+"-container"},[r("div",{staticClass:"row"},[r("div",{staticClass:"col-md-3"},[r("label",{attrs:{for:t.column}},[e._v(e._s(t.name))])]),e._v(" "),r("div",{staticClass:"col-md-9"},[r("Multiselect",{attrs:{"allow-empty":!t.required,searchable:!t.seachable||t.searchale,placeholder:t.placeholder,"track-by":t.value,label:t.show,"close-on-select":t.closeOnSelect,"preselect-first":t.selectFirst,multiple:t.multipleSelect,options:t.items},model:{value:e.formBack[t.column],callback:function(r){e.$set(e.formBack,t.column,r)},expression:"formBack[f.column]"}})],1)])]):"date"==t.type?r("div",{class:t.class+"-container"},[r("div",{staticClass:"row"},[r("div",{staticClass:"col-md-3"},[r("label",{attrs:{for:t.column}},[e._v(e._s(t.name))])]),e._v(" "),r("div",{staticClass:"col-md-9"},[r("vuejsDatepicker",{attrs:{required:t.required,"input-class":t.class,"bootstrap-styling":!0,placeholder:t.placeholder,language:t.language,format:t.format?t.format:"dd MMM yyyy"},model:{value:e.formBack[t.column],callback:function(r){e.$set(e.formBack,t.column,r)},expression:"formBack[f.column]"}})],1)])]):"color"==t.type?r("div",{class:t.class+"-container"},[r("div",{staticClass:"row"},[r("div",{staticClass:"col-md-3"},[r("label",{attrs:{for:t.column}},[e._v(e._s(t.name))])]),e._v(" "),r("div",{staticClass:"col-md-9"},[r("verte",{class:t.class,attrs:{required:t.required,placeholder:t.placeholder},model:{value:e.formBack[t.column],callback:function(r){e.$set(e.formBack,t.column,r)},expression:"formBack[f.column]"}},[[e._v("\n                    "+e._s(t.placeholder)+"\n                    "),r("svg",{staticClass:"verte__icon",staticStyle:{width:"auto"},attrs:{viewBox:"0 0 24 24"}},[r("pattern",{attrs:{id:"checkerboard",width:"6",height:"6",patternUnits:"userSpaceOnUse",fill:"FFF"}},[r("rect",{attrs:{fill:"#7080707f",x:"0",width:"3",height:"3",y:"0"}}),e._v(" "),r("rect",{attrs:{fill:"#7080707f",x:"3",width:"3",height:"3",y:"3"}})]),e._v(" "),r("circle",{attrs:{cx:"12",cy:"12",r:"12",fill:"url(#checkerboard)"}}),e._v(" "),r("circle",{attrs:{cx:"12",cy:"12",r:"12"}})])]],2)],1)])]):e._e()])})),e._v(" "),r("div",{staticClass:"form-group row mb-0"},[r("div",{staticClass:"col-md-6 offset-md-3"},[r("button",{class:e.button.class?e.button.class:"btn btn-success btn-block",attrs:{type:"submit"},domProps:{innerHTML:e._s(e.button.title)}})])])],2)])])])};s._withStripped=!0;var c=r({render:s,staticRenderFns:[]},(function(e){e&&(e("data-v-7001fc72_0",{source:'fieldset[disabled] .multiselect{pointer-events:none}.multiselect__spinner{position:absolute;right:1px;top:1px;width:48px;height:35px;background:#fff;display:block}.multiselect__spinner:after,.multiselect__spinner:before{position:absolute;content:"";top:50%;left:50%;margin:-8px 0 0 -8px;width:16px;height:16px;border-radius:100%;border:2px solid transparent;border-top-color:#41b883;box-shadow:0 0 0 1px transparent}.multiselect__spinner:before{animation:spinning 2.4s cubic-bezier(.41,.26,.2,.62);animation-iteration-count:infinite}.multiselect__spinner:after{animation:spinning 2.4s cubic-bezier(.51,.09,.21,.8);animation-iteration-count:infinite}.multiselect__loading-enter-active,.multiselect__loading-leave-active{transition:opacity .4s ease-in-out;opacity:1}.multiselect__loading-enter,.multiselect__loading-leave-active{opacity:0}.multiselect,.multiselect__input,.multiselect__single{font-family:inherit;font-size:16px;-ms-touch-action:manipulation;touch-action:manipulation}.multiselect{box-sizing:content-box;display:block;position:relative;width:100%;min-height:40px;text-align:left;color:#35495e}.multiselect *{box-sizing:border-box}.multiselect:focus{outline:none}.multiselect--disabled{background:#ededed;pointer-events:none;opacity:.6}.multiselect--active{z-index:50}.multiselect--active:not(.multiselect--above) .multiselect__current,.multiselect--active:not(.multiselect--above) .multiselect__input,.multiselect--active:not(.multiselect--above) .multiselect__tags{border-bottom-left-radius:0;border-bottom-right-radius:0}.multiselect--active .multiselect__select{transform:rotate(180deg)}.multiselect--above.multiselect--active .multiselect__current,.multiselect--above.multiselect--active .multiselect__input,.multiselect--above.multiselect--active .multiselect__tags{border-top-left-radius:0;border-top-right-radius:0}.multiselect__input,.multiselect__single{position:relative;display:inline-block;min-height:20px;line-height:20px;border:none;border-radius:5px;background:#fff;padding:0 0 0 5px;width:100%;transition:border .1s ease;box-sizing:border-box;margin-bottom:8px;vertical-align:top}.multiselect__input:-ms-input-placeholder{color:#35495e}.multiselect__input::placeholder{color:#35495e}.multiselect__tag~.multiselect__input,.multiselect__tag~.multiselect__single{width:auto}.multiselect__input:hover,.multiselect__single:hover{border-color:#cfcfcf}.multiselect__input:focus,.multiselect__single:focus{border-color:#a8a8a8;outline:none}.multiselect__single{padding-left:5px;margin-bottom:8px}.multiselect__tags-wrap{display:inline}.multiselect__tags{min-height:40px;display:block;padding:8px 40px 0 8px;border-radius:5px;border:1px solid #e8e8e8;background:#fff;font-size:14px}.multiselect__tag{position:relative;display:inline-block;padding:4px 26px 4px 10px;border-radius:5px;margin-right:10px;color:#fff;line-height:1;background:#41b883;margin-bottom:5px;white-space:nowrap;overflow:hidden;max-width:100%;text-overflow:ellipsis}.multiselect__tag-icon{cursor:pointer;margin-left:7px;position:absolute;right:0;top:0;bottom:0;font-weight:700;font-style:normal;width:22px;text-align:center;line-height:22px;transition:all .2s ease;border-radius:5px}.multiselect__tag-icon:after{content:"\\D7";color:#266d4d;font-size:14px}.multiselect__tag-icon:focus,.multiselect__tag-icon:hover{background:#369a6e}.multiselect__tag-icon:focus:after,.multiselect__tag-icon:hover:after{color:#fff}.multiselect__current{min-height:40px;overflow:hidden;padding:8px 30px 0 12px;white-space:nowrap;border-radius:5px;border:1px solid #e8e8e8}.multiselect__current,.multiselect__select{line-height:16px;box-sizing:border-box;display:block;margin:0;text-decoration:none;cursor:pointer}.multiselect__select{position:absolute;width:40px;height:38px;right:1px;top:1px;padding:4px 8px;text-align:center;transition:transform .2s ease}.multiselect__select:before{position:relative;right:0;top:65%;color:#999;margin-top:4px;border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 0;content:""}.multiselect__placeholder{color:#adadad;display:inline-block;margin-bottom:10px;padding-top:2px}.multiselect--active .multiselect__placeholder{display:none}.multiselect__content-wrapper{position:absolute;display:block;background:#fff;width:100%;max-height:240px;overflow:auto;border:1px solid #e8e8e8;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px;z-index:50;-webkit-overflow-scrolling:touch}.multiselect__content{list-style:none;display:inline-block;padding:0;margin:0;min-width:100%;vertical-align:top}.multiselect--above .multiselect__content-wrapper{bottom:100%;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:5px;border-top-right-radius:5px;border-bottom:none;border-top:1px solid #e8e8e8}.multiselect__content::webkit-scrollbar{display:none}.multiselect__element{display:block}.multiselect__option{display:block;padding:12px;min-height:40px;line-height:16px;text-decoration:none;text-transform:none;vertical-align:middle;position:relative;cursor:pointer;white-space:nowrap}.multiselect__option:after{top:0;right:0;position:absolute;line-height:40px;padding-right:12px;padding-left:20px;font-size:13px}.multiselect__option--highlight{background:#41b883;outline:none;color:#fff}.multiselect__option--highlight:after{content:attr(data-select);background:#41b883;color:#fff}.multiselect__option--selected{background:#f3f3f3;color:#35495e;font-weight:700}.multiselect__option--selected:after{content:attr(data-selected);color:silver}.multiselect__option--selected.multiselect__option--highlight{background:#ff6a6a;color:#fff}.multiselect__option--selected.multiselect__option--highlight:after{background:#ff6a6a;content:attr(data-deselect);color:#fff}.multiselect--disabled .multiselect__current,.multiselect--disabled .multiselect__select{background:#ededed;color:#a6a6a6}.multiselect__option--disabled{background:#ededed!important;color:#a6a6a6!important;cursor:text;pointer-events:none}.multiselect__option--group{background:#ededed;color:#35495e}.multiselect__option--group.multiselect__option--highlight{background:#35495e;color:#fff}.multiselect__option--group.multiselect__option--highlight:after{background:#35495e}.multiselect__option--disabled.multiselect__option--highlight{background:#dedede}.multiselect__option--group-selected.multiselect__option--highlight{background:#ff6a6a;color:#fff}.multiselect__option--group-selected.multiselect__option--highlight:after{background:#ff6a6a;content:attr(data-deselect);color:#fff}.multiselect-enter-active,.multiselect-leave-active{transition:all .15s ease}.multiselect-enter,.multiselect-leave-active{opacity:0}.multiselect__strong{margin-bottom:8px;line-height:20px;display:inline-block;vertical-align:top}[dir=rtl] .multiselect{text-align:right}[dir=rtl] .multiselect__select{right:auto;left:1px}[dir=rtl] .multiselect__tags{padding:8px 8px 0 40px}[dir=rtl] .multiselect__content{text-align:right}[dir=rtl] .multiselect__option:after{right:auto;left:0}[dir=rtl] .multiselect__clear{right:auto;left:12px}[dir=rtl] .multiselect__spinner{right:auto;left:1px}@keyframes spinning{0%{transform:rotate(0)}to{transform:rotate(2turn)}}',map:void 0,media:void 0}),e("data-v-7001fc72_1",{source:"#VuejsDynamicForms.dark .vdp-datepicker__calendar {\n  background: #343a40;\n  border: 1px solid #262a2e;\n}\n#VuejsDynamicForms.dark .vdp-datepicker__calendar header .prev:after {\n  border-right: 10px solid #fff;\n}\n#VuejsDynamicForms.dark .vdp-datepicker__calendar header .next:after {\n  border-left: 10px solid #fff;\n}\n#VuejsDynamicForms.dark .vdp-datepicker__calendar header > span:hover {\n  background: #000;\n}\n#VuejsDynamicForms.dark .vue-tags-input .ti-autocomplete ul li {\n  color: #000 !important;\n}\n#VuejsDynamicForms .vue-tags-input {\n  max-width: 100%;\n}\n#VuejsDynamicForms .verte > button {\n  width: 100%;\n}\n\n/*# sourceMappingURL=DynamicForms.vue.map */",map:{version:3,sources:["C:\\xampp\\htdocs\\vuejs-dynamic-forms\\src\\plugins\\dynamicForms\\DynamicForms.vue","DynamicForms.vue"],names:[],mappings:"AA2WA;EACA,mBAAA;EACA,yBAAA;AC1WA;AD8WA;EACA,6BAAA;AC5WA;ADgXA;EACA,4BAAA;AC9WA;ADmXA;EACA,gBAAA;ACjXA;AD0XA;EACA,sBAAA;ACxXA;AD8XA;EACA,eAAA;AC5XA;AD+XA;EACA,WAAA;AC7XA;;AAEA,2CAA2C",file:"DynamicForms.vue",sourcesContent:['<template>\r\n  <div id="VuejsDynamicForms" :class="theme">\r\n    <div :class="`card ${theme == \'dark\' ? \'text-white bg-dark\' : \'text-black bg-white\'}`">\r\n      <div class="card-header" v-html="title"></div>\r\n      <div class="card-body">\r\n        <form @submit.prevent="action()">\r\n          <div class="form-group" v-for="f in formData" v-bind:key="f.name">\r\n            <div class="row" v-if="normalInputs.includes(f.type)" :class="f.class+\'-container\'">\r\n              <div class="col-md-3">\r\n                <label :for="f.column">{{f.name}}</label>\r\n              </div>\r\n              <div class="col-md-9">\r\n                <input\r\n                  v-if="f.type != \'selectbox\' && f.type != \'textarea\' && f.type != \'editor\'"\r\n                  :type="f.type"\r\n                  :required="f.required ? \'\' : false"\r\n                  :placeholder="f.placeholder"\r\n                  v-model="formBack[f.column]"\r\n                  :id="f.column"\r\n                  :class="f.class ? f.class : \'form-control\'"\r\n                />\r\n\r\n                <textarea\r\n                  v-else-if="f.type == \'textarea\'"\r\n                  :required="f.required ? \'\' : false"\r\n                  :placeholder="f.placeholder"\r\n                  v-model="formBack[f.column]"\r\n                  :id="f.column"\r\n                  :class="f.class ? f.class : \'form-control\'"\r\n                ></textarea>\r\n              </div>\r\n            </div>\r\n\r\n            <div v-else-if="f.type == \'editor\'" :class="f.class+\'-container\'">\r\n              <label :for="f.column">{{f.name}}</label>\r\n              <tinymce v-model="formBack[f.column]" :id="f.column" class="tinymce"></tinymce>\r\n            </div>\r\n\r\n            <div v-else-if="f.type == \'tag\'" :class="f.class+\'-container\'">\r\n              <div class="row">\r\n                <div class="col-md-3">\r\n                  <label :for="f.column">{{f.name}}</label>\r\n                </div>\r\n                <div class="col-md-9">\r\n                  <VueTagsInput\r\n                    :placeholder="f.placeholder"\r\n                    v-model="formData[f.subColumn]"\r\n                    :tags="formBack[f.column]"\r\n                    :allow-edit-tags="true"\r\n                    :add-only-from-autocomplete="formData[f.addOnlyFromAutocomplete]"\r\n                    @tags-changed="newTags => formBack[f.column] = newTags.map(item => {\r\n                                        return item.text;\r\n                                    })"\r\n                    :autocomplete-items="filterData(f.autocomplete , formData[f.subColumn])"\r\n                  />\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <div v-else-if="f.type == \'selectbox\'" :class="f.class+\'-container\'">\r\n              <div class="row">\r\n                <div class="col-md-3">\r\n                  <label :for="f.column">{{f.name}}</label>\r\n                </div>\r\n                <div class="col-md-9">\r\n                  <Multiselect\r\n                    :allow-empty="!f.required"\r\n                    :searchable="f.seachable ? f.searchale : true"\r\n                    :placeholder="f.placeholder"\r\n                    v-model="formBack[f.column]"\r\n                    :track-by="f.value"\r\n                    :label="f.show"\r\n                    :close-on-select="f.closeOnSelect"\r\n                    :preselect-first="f.selectFirst"\r\n                    :multiple="f.multipleSelect"\r\n                    :options="f.items"\r\n                  ></Multiselect>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <div v-else-if="f.type == \'date\'" :class="f.class+\'-container\'">\r\n              <div class="row">\r\n                <div class="col-md-3">\r\n                  <label :for="f.column">{{f.name}}</label>\r\n                </div>\r\n                <div class="col-md-9">\r\n                  <vuejsDatepicker\r\n                    :required="f.required"\r\n                    :input-class="f.class"\r\n                    :bootstrap-styling="true"\r\n                    :placeholder="f.placeholder"\r\n                    :language="f.language"\r\n                    :format="f.format ? f.format : \'dd MMM yyyy\'"\r\n                    v-model="formBack[f.column]"\r\n                  ></vuejsDatepicker>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <div v-else-if="f.type == \'color\'" :class="f.class+\'-container\'">\r\n              <div class="row">\r\n                <div class="col-md-3">\r\n                  <label :for="f.column">{{f.name}}</label>\r\n                </div>\r\n                <div class="col-md-9">\r\n                  <verte\r\n                    :required="f.required"\r\n                    :class="f.class"\r\n                    :placeholder="f.placeholder"\r\n                    v-model="formBack[f.column]"\r\n                  >\r\n                    <template>\r\n                      {{f.placeholder}}\r\n                      <svg\r\n                        viewBox="0 0 24 24"\r\n                        style="width : auto;"\r\n                        class="verte__icon"\r\n                      >\r\n                        <pattern\r\n                          id="checkerboard"\r\n                          width="6"\r\n                          height="6"\r\n                          patternUnits="userSpaceOnUse"\r\n                          fill="FFF"\r\n                        >\r\n                          <rect fill="#7080707f" x="0" width="3" height="3" y="0" />\r\n                          <rect fill="#7080707f" x="3" width="3" height="3" y="3" />\r\n                        </pattern>\r\n                        <circle cx="12" cy="12" r="12" fill="url(#checkerboard)" />\r\n                        <circle cx="12" cy="12" r="12" />\r\n                      </svg>\r\n                    </template>\r\n                  </verte>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class="form-group row mb-0">\r\n            <div class="col-md-6 offset-md-3">\r\n              <button\r\n                type="submit"\r\n                :class="button.class ? button.class : \'btn btn-success btn-block\'"\r\n                v-html="button.title"\r\n              ></button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport "bootstrap-css-only";\r\nimport "verte/dist/verte.css";\r\n\r\nexport default {\r\n  name: "DynamicForms",\r\n  props: {\r\n    hidden: {\r\n      default: "",\r\n    },\r\n    values: {\r\n      type: Object,\r\n      default() {\r\n        return {\r\n          name: "This is my name",\r\n          text: "This is my Text",\r\n          editor: "<p>This is my HTML Editor Data</p>",\r\n          tags: ["this are my default tags", "my subtags"],\r\n        };\r\n      },\r\n    },\r\n    form: {\r\n      type: Array,\r\n      default() {\r\n        return [\r\n          {\r\n            name: "Name",\r\n            placeholder: "Please Write Your Name...",\r\n            class: "form-control",\r\n            column: "name",\r\n            type: "text",\r\n            value: "test",\r\n          },\r\n          {\r\n            name: "Name Two",\r\n            placeholder: "Please Write Your Name...",\r\n            class: "form-control",\r\n            column: "text",\r\n            type: "textarea",\r\n            value: "Text Area",\r\n          },\r\n          {\r\n            name: "Name Three",\r\n            class: "form-control",\r\n            column: "editor",\r\n            type: "editor",\r\n            value: "Text Area",\r\n          },\r\n          {\r\n            name: "Tags",\r\n            class: "form-control",\r\n            type: "tag",\r\n            column: "tags",\r\n            subColumn: "tag",\r\n            autocomplete: ["text", "and data", 1, 2, "and three", "etcutra"],\r\n            placeholder: "Write your tags",\r\n            addOnlyFromAutocomplete: false,\r\n          },\r\n          {\r\n            name: "Select One User",\r\n            items: [\r\n              {\r\n                name: "User 1",\r\n                id: 1,\r\n              },\r\n              {\r\n                name: "User 2",\r\n                id: 2,\r\n              },\r\n            ],\r\n            show: "name",\r\n            value: "id",\r\n            type: "selectbox",\r\n            column: "user",\r\n            placeholder: "Please Select Your Users",\r\n          },\r\n          {\r\n            name: "Select Multiple Users",\r\n            items: [\r\n              {\r\n                name: "User 1",\r\n                id: 1,\r\n              },\r\n              {\r\n                name: "User 2",\r\n                id: 2,\r\n              },\r\n              {\r\n                name: "User 3",\r\n                id: 3,\r\n              },\r\n            ],\r\n            show: "name",\r\n            value: "id",\r\n            column: "users",\r\n            type: "selectbox",\r\n            placeholder: "Please Select Your Users",\r\n            multipleSelect: true,\r\n            closeOnSelect: false,\r\n          },\r\n          {\r\n            name: "Select Date",\r\n            column: "date",\r\n            type: "date",\r\n            placeholder: "Select Date",\r\n            class: "myClass",\r\n          },\r\n          {\r\n            name: "Select Color",\r\n            column: "color",\r\n            type: "color",\r\n            placeholder: "Select color",\r\n            class: "myClass",\r\n          },\r\n        ];\r\n      },\r\n    },\r\n    title: {\r\n      type: String,\r\n      default: "Your Title",\r\n    },\r\n    button: {\r\n      type: Object,\r\n      default() {\r\n        return {\r\n          title: "My Button",\r\n          class: "btn btn-success btn-block",\r\n        };\r\n      },\r\n    },\r\n    theme: {\r\n      type: String,\r\n      default: "dark",\r\n    },\r\n  },\r\n  model: {\r\n    prop: "hidden",\r\n    event: "update",\r\n  },\r\n  components: {\r\n    tinymce: () => import("vue-tinymce-editor"),\r\n    VueTagsInput: () => import("@johmun/vue-tags-input"),\r\n    Multiselect: () => import("vue-multiselect"),\r\n    vuejsDatepicker: () => import("vuejs-datepicker"),\r\n    verte: () => import("verte"),\r\n  },\r\n  data() {\r\n    return {\r\n      formBack: [],\r\n      formData: this.form,\r\n      normalInputs: [\r\n        "text",\r\n        "email",\r\n        "checkbox",\r\n        "radio",\r\n        "password",\r\n        "textarea",\r\n        "file",\r\n      ],\r\n    };\r\n  },\r\n  created() {\r\n    this.formBack = this.values;\r\n    this.fixFormData();\r\n  },\r\n  methods: {\r\n    action() {\r\n      this.$emit("save", this.formBack);\r\n    },\r\n    /**\r\n     * fix form data to match our needs\r\n     */\r\n    fixFormData() {\r\n      // this.formData = this.formData.map(item => {\r\n      //     if(item.autocomplete != undefined){\r\n      //         item.autocomplete = item.autocomplete.map(i => {\r\n      //             return String(i);\r\n      //         });\r\n      //     }\r\n      //     return item;\r\n      // });\r\n    },\r\n    /**\r\n     * filter data for autocomplete\r\n     */\r\n    filterData(items, text) {\r\n      text = String(text);\r\n      let newText = text ? text.toLowerCase() : "";\r\n      return items.filter((item) => {\r\n        return String(item).toLowerCase().indexOf(newText) !== -1;\r\n      });\r\n    },\r\n  },\r\n  computed: {},\r\n  watch: {\r\n    formBack: {\r\n      handler() {\r\n        this.$emit("update", this.formBack);\r\n      },\r\n      deep: true,\r\n    },\r\n  },\r\n};\r\n<\/script>\r\n\r\n<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>\r\n\r\n<style lang="scss">\r\n#VuejsDynamicForms {\r\n  &.dark {\r\n    .vdp-datepicker__calendar {\r\n      background: #343a40;\r\n      border: 1px solid #262a2e;\r\n      // display : block !important;\r\n      header {\r\n        .prev {\r\n          &:after {\r\n            border-right: 10px solid #fff;\r\n          }\r\n        }\r\n        .next {\r\n          &:after {\r\n            border-left: 10px solid #fff;\r\n          }\r\n        }\r\n\r\n        & > span {\r\n          &:hover {\r\n            background: #000;\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    .vue-tags-input {\r\n      .ti-autocomplete {\r\n        ul {\r\n          li {\r\n            color: #000 !important;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n  .vue-tags-input {\r\n    max-width: 100%;\r\n  }\r\n  .verte {\r\n    & > button {\r\n      width: 100%;\r\n    }\r\n  }\r\n}\r\n</style>\r\n',"#VuejsDynamicForms.dark .vdp-datepicker__calendar {\n  background: #343a40;\n  border: 1px solid #262a2e;\n}\n#VuejsDynamicForms.dark .vdp-datepicker__calendar header .prev:after {\n  border-right: 10px solid #fff;\n}\n#VuejsDynamicForms.dark .vdp-datepicker__calendar header .next:after {\n  border-left: 10px solid #fff;\n}\n#VuejsDynamicForms.dark .vdp-datepicker__calendar header > span:hover {\n  background: #000;\n}\n#VuejsDynamicForms.dark .vue-tags-input .ti-autocomplete ul li {\n  color: #000 !important;\n}\n#VuejsDynamicForms .vue-tags-input {\n  max-width: 100%;\n}\n#VuejsDynamicForms .verte > button {\n  width: 100%;\n}\n\n/*# sourceMappingURL=DynamicForms.vue.map */"]},media:void 0}))}),i,void 0,!1,void 0,!1,l,void 0,void 0);function d(e){d.installed||(d.installed=!0,e.component("DynamicForms",c))}var m={install:d},u=null;"undefined"!=typeof window?u=window.Vue:"undefined"!=typeof global&&(u=global.Vue),u&&u.use(m),e.default=c,e.install=d,Object.defineProperty(e,"__esModule",{value:!0})}));