vuejs-dynamic-forms
Version:
A simple Vue.js dynamic-forms component. Supports creating a dyanmic forms with a pretty design using Bootstrap classes
817 lines (810 loc) • 58.6 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('bootstrap-css-only'), require('verte/dist/verte.css')) :
typeof define === 'function' && define.amd ? define(['exports', 'bootstrap-css-only', 'verte/dist/verte.css'], factory) :
(global = global || self, factory(global.vuejsDynamicForms = {}));
}(this, (function (exports) { 'use strict';
//
var script = {
name: "DynamicForms",
props: {
hidden: {
default: "",
},
values: {
type: Object,
default: function default$1() {
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 default$2() {
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: false,
},
{
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: true,
closeOnSelect: false,
},
{
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 default$3() {
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 data() {
return {
formBack: [],
formData: this.form,
normalInputs: [
"text",
"email",
"checkbox",
"radio",
"password",
"textarea",
"file" ],
};
},
created: function created() {
this.formBack = this.values;
this.fixFormData();
},
methods: {
action: function action() {
this.$emit("save", this.formBack);
},
/**
* fix form data to match our needs
*/
fixFormData: function fixFormData() {
// this.formData = this.formData.map(item => {
// if(item.autocomplete != undefined){
// item.autocomplete = item.autocomplete.map(i => {
// return String(i);
// });
// }
// return item;
// });
},
/**
* filter data for autocomplete
*/
filterData: function filterData(items, text) {
text = String(text);
var newText = text ? text.toLowerCase() : "";
return items.filter(function (item) {
return String(item).toLowerCase().indexOf(newText) !== -1;
});
},
},
computed: {},
watch: {
formBack: {
handler: function handler() {
this.$emit("update", this.formBack);
},
deep: true,
},
},
};
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
}
// Vue.extend constructor export interop.
var options = typeof script === 'function' ? script.options : script;
// render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true;
// functional template
if (isFunctionalTemplate) {
options.functional = true;
}
}
// scopedId
if (scopeId) {
options._scopeId = scopeId;
}
var hook;
if (moduleIdentifier) {
// server build
hook = function (context) {
// 2.3 injection
context =
context || // cached call
(this.$vnode && this.$vnode.ssrContext) || // stateful
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
}
// inject component styles
if (style) {
style.call(this, createInjectorSSR(context));
}
// register component module identifier for async chunk inference
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
};
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
}
else if (style) {
hook = shadowMode
? function (context) {
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
}
: function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
var originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
}
else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
var isOldIE = typeof navigator !== 'undefined' &&
/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
function createInjector(context) {
return function (id, style) { return addStyle(id, style); };
}
var HEAD;
var styles = {};
function addStyle(id, css) {
var group = isOldIE ? css.media || 'default' : id;
var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
if (!style.ids.has(id)) {
style.ids.add(id);
var code = css.source;
if (css.map) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
// http://stackoverflow.com/a/26603875
code +=
'\n/*# sourceMappingURL=data:application/json;base64,' +
btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
' */';
}
if (!style.element) {
style.element = document.createElement('style');
style.element.type = 'text/css';
if (css.media)
{ style.element.setAttribute('media', css.media); }
if (HEAD === undefined) {
HEAD = document.head || document.getElementsByTagName('head')[0];
}
HEAD.appendChild(style.element);
}
if ('styleSheet' in style.element) {
style.styles.push(code);
style.element.styleSheet.cssText = style.styles
.filter(Boolean)
.join('\n');
}
else {
var index = style.ids.size - 1;
var textNode = document.createTextNode(code);
var nodes = style.element.childNodes;
if (nodes[index])
{ style.element.removeChild(nodes[index]); }
if (nodes.length)
{ style.element.insertBefore(textNode, nodes[index]); }
else
{ style.element.appendChild(textNode); }
}
}
}
/* script */
var __vue_script__ = script;
/* template */
var __vue_render__ = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { class: _vm.theme, attrs: { id: "VuejsDynamicForms" } }, [
_c(
"div",
{
class:
"card " +
(_vm.theme == "dark" ? "text-white bg-dark" : "text-black bg-white")
},
[
_c("div", {
staticClass: "card-header",
domProps: { innerHTML: _vm._s(_vm.title) }
}),
_vm._v(" "),
_c("div", { staticClass: "card-body" }, [
_c(
"form",
{
on: {
submit: function($event) {
$event.preventDefault();
return _vm.action()
}
}
},
[
_vm._l(_vm.formData, function(f) {
return _c("div", { key: f.name, staticClass: "form-group" }, [
_vm.normalInputs.includes(f.type)
? _c(
"div",
{ staticClass: "row", class: f.class + "-container" },
[
_c("div", { staticClass: "col-md-3" }, [
_c("label", { attrs: { for: f.column } }, [
_vm._v(_vm._s(f.name))
])
]),
_vm._v(" "),
_c("div", { staticClass: "col-md-9" }, [
f.type === "checkbox" &&
f.type != "selectbox" &&
f.type != "textarea" &&
f.type != "editor"
? _c("input", {
directives: [
{
name: "model",
rawName: "v-model",
value: _vm.formBack[f.column],
expression: "formBack[f.column]"
}
],
class: f.class ? f.class : "form-control",
attrs: {
required: f.required ? "" : false,
placeholder: f.placeholder,
id: f.column,
type: "checkbox"
},
domProps: {
checked: Array.isArray(
_vm.formBack[f.column]
)
? _vm._i(_vm.formBack[f.column], null) >
-1
: _vm.formBack[f.column]
},
on: {
change: function($event) {
var $$a = _vm.formBack[f.column],
$$el = $event.target,
$$c = $$el.checked ? true : false;
if (Array.isArray($$a)) {
var $$v = null,
$$i = _vm._i($$a, $$v);
if ($$el.checked) {
$$i < 0 &&
_vm.$set(
_vm.formBack,
f.column,
$$a.concat([$$v])
);
} else {
$$i > -1 &&
_vm.$set(
_vm.formBack,
f.column,
$$a
.slice(0, $$i)
.concat($$a.slice($$i + 1))
);
}
} else {
_vm.$set(_vm.formBack, f.column, $$c);
}
}
}
})
: f.type === "radio" &&
f.type != "selectbox" &&
f.type != "textarea" &&
f.type != "editor"
? _c("input", {
directives: [
{
name: "model",
rawName: "v-model",
value: _vm.formBack[f.column],
expression: "formBack[f.column]"
}
],
class: f.class ? f.class : "form-control",
attrs: {
required: f.required ? "" : false,
placeholder: f.placeholder,
id: f.column,
type: "radio"
},
domProps: {
checked: _vm._q(
_vm.formBack[f.column],
null
)
},
on: {
change: function($event) {
return _vm.$set(
_vm.formBack,
f.column,
null
)
}
}
})
: f.type != "selectbox" &&
f.type != "textarea" &&
f.type != "editor"
? _c("input", {
directives: [
{
name: "model",
rawName: "v-model",
value: _vm.formBack[f.column],
expression: "formBack[f.column]"
}
],
class: f.class ? f.class : "form-control",
attrs: {
required: f.required ? "" : false,
placeholder: f.placeholder,
id: f.column,
type: f.type
},
domProps: { value: _vm.formBack[f.column] },
on: {
input: function($event) {
if ($event.target.composing) {
return
}
_vm.$set(
_vm.formBack,
f.column,
$event.target.value
);
}
}
})
: f.type == "textarea"
? _c("textarea", {
directives: [
{
name: "model",
rawName: "v-model",
value: _vm.formBack[f.column],
expression: "formBack[f.column]"
}
],
class: f.class ? f.class : "form-control",
attrs: {
required: f.required ? "" : false,
placeholder: f.placeholder,
id: f.column
},
domProps: { value: _vm.formBack[f.column] },
on: {
input: function($event) {
if ($event.target.composing) {
return
}
_vm.$set(
_vm.formBack,
f.column,
$event.target.value
);
}
}
})
: _vm._e()
])
]
)
: f.type == "editor"
? _c(
"div",
{ class: f.class + "-container" },
[
_c("label", { attrs: { for: f.column } }, [
_vm._v(_vm._s(f.name))
]),
_vm._v(" "),
_c("tinymce", {
staticClass: "tinymce",
attrs: { id: f.column },
model: {
value: _vm.formBack[f.column],
callback: function($$v) {
_vm.$set(_vm.formBack, f.column, $$v);
},
expression: "formBack[f.column]"
}
})
],
1
)
: f.type == "tag"
? _c("div", { class: f.class + "-container" }, [
_c("div", { staticClass: "row" }, [
_c("div", { staticClass: "col-md-3" }, [
_c("label", { attrs: { for: f.column } }, [
_vm._v(_vm._s(f.name))
])
]),
_vm._v(" "),
_c(
"div",
{ staticClass: "col-md-9" },
[
_c("VueTagsInput", {
attrs: {
placeholder: f.placeholder,
tags: _vm.formBack[f.column],
"allow-edit-tags": true,
"add-only-from-autocomplete":
_vm.formData[f.addOnlyFromAutocomplete],
"autocomplete-items": _vm.filterData(
f.autocomplete,
_vm.formData[f.subColumn]
)
},
on: {
"tags-changed": function(newTags) {
return (_vm.formBack[
f.column
] = newTags.map(function(item) {
return item.text
}))
}
},
model: {
value: _vm.formData[f.subColumn],
callback: function($$v) {
_vm.$set(_vm.formData, f.subColumn, $$v);
},
expression: "formData[f.subColumn]"
}
})
],
1
)
])
])
: f.type == "selectbox"
? _c("div", { class: f.class + "-container" }, [
_c("div", { staticClass: "row" }, [
_c("div", { staticClass: "col-md-3" }, [
_c("label", { attrs: { for: f.column } }, [
_vm._v(_vm._s(f.name))
])
]),
_vm._v(" "),
_c(
"div",
{ staticClass: "col-md-9" },
[
_c("Multiselect", {
attrs: {
"allow-empty": !f.required,
searchable: f.seachable ? f.searchale : true,
placeholder: f.placeholder,
"track-by": f.value,
label: f.show,
"close-on-select": f.closeOnSelect,
"preselect-first": f.selectFirst,
multiple: f.multipleSelect,
options: f.items
},
model: {
value: _vm.formBack[f.column],
callback: function($$v) {
_vm.$set(_vm.formBack, f.column, $$v);
},
expression: "formBack[f.column]"
}
})
],
1
)
])
])
: f.type == "date"
? _c("div", { class: f.class + "-container" }, [
_c("div", { staticClass: "row" }, [
_c("div", { staticClass: "col-md-3" }, [
_c("label", { attrs: { for: f.column } }, [
_vm._v(_vm._s(f.name))
])
]),
_vm._v(" "),
_c(
"div",
{ staticClass: "col-md-9" },
[
_c("vuejsDatepicker", {
attrs: {
required: f.required,
"input-class": f.class,
"bootstrap-styling": true,
placeholder: f.placeholder,
language: f.language,
format: f.format ? f.format : "dd MMM yyyy"
},
model: {
value: _vm.formBack[f.column],
callback: function($$v) {
_vm.$set(_vm.formBack, f.column, $$v);
},
expression: "formBack[f.column]"
}
})
],
1
)
])
])
: f.type == "color"
? _c("div", { class: f.class + "-container" }, [
_c("div", { staticClass: "row" }, [
_c("div", { staticClass: "col-md-3" }, [
_c("label", { attrs: { for: f.column } }, [
_vm._v(_vm._s(f.name))
])
]),
_vm._v(" "),
_c(
"div",
{ staticClass: "col-md-9" },
[
_c(
"verte",
{
class: f.class,
attrs: {
required: f.required,
placeholder: f.placeholder
},
model: {
value: _vm.formBack[f.column],
callback: function($$v) {
_vm.$set(_vm.formBack, f.column, $$v);
},
expression: "formBack[f.column]"
}
},
[
[
_vm._v(
"\n " +
_vm._s(f.placeholder) +
"\n "
),
_c(
"svg",
{
staticClass: "verte__icon",
staticStyle: { width: "auto" },
attrs: { viewBox: "0 0 24 24" }
},
[
_c(
"pattern",
{
attrs: {
id: "checkerboard",
width: "6",
height: "6",
patternUnits: "userSpaceOnUse",
fill: "FFF"
}
},
[
_c("rect", {
attrs: {
fill: "#7080707f",
x: "0",
width: "3",
height: "3",
y: "0"
}
}),
_vm._v(" "),
_c("rect", {
attrs: {
fill: "#7080707f",
x: "3",
width: "3",
height: "3",
y: "3"
}
})
]
),
_vm._v(" "),
_c("circle", {
attrs: {
cx: "12",
cy: "12",
r: "12",
fill: "url(#checkerboard)"
}
}),
_vm._v(" "),
_c("circle", {
attrs: { cx: "12", cy: "12", r: "12" }
})
]
)
]
],
2
)
],
1
)
])
])
: _vm._e()
])
}),
_vm._v(" "),
_c("div", { staticClass: "form-group row mb-0" }, [
_c("div", { staticClass: "col-md-6 offset-md-3" }, [
_c("button", {
class: _vm.button.class
? _vm.button.class
: "btn btn-success btn-block",
attrs: { type: "submit" },
domProps: { innerHTML: _vm._s(_vm.button.title) }
})
])
])
],
2
)
])
]
)
])
};
var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;
/* style */
var __vue_inject_styles__ = function (inject) {
if (!inject) { return }
inject("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: undefined, media: undefined })
,inject("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