(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('is-plain-object'), require('nanoid')) : typeof define === 'function' && define.amd ? define(['exports', 'is-plain-object', 'nanoid'], factory) : (global = global || self, factory(global.Formulate = {}, global.isPlainObject, global.nanoid)); }(this, (function (exports, isPlainObject, nanoid) { 'use strict'; isPlainObject = isPlainObject && isPlainObject.hasOwnProperty('default') ? isPlainObject['default'] : isPlainObject; nanoid = nanoid && nanoid.hasOwnProperty('default') ? nanoid['default'] : nanoid; var library = { // === SINGLE LINE TEXT STYLE INPUTS text: { classification: 'text', component: 'FormulateInputText' }, email: { classification: 'text', component: 'FormulateInputText' }, number: { classification: 'text', component: 'FormulateInputText' }, color: { classification: 'text', component: 'FormulateInputText' }, date: { classification: 'text', component: 'FormulateInputText' }, hidden: { classification: 'text', component: 'FormulateInputText' }, month: { classification: 'text', component: 'FormulateInputText' }, password: { classification: 'text', component: 'FormulateInputText' }, range: { classification: 'text', component: 'FormulateInputText' }, search: { classification: 'text', component: 'FormulateInputText' }, tel: { classification: 'text', component: 'FormulateInputText' }, time: { classification: 'text', component: 'FormulateInputText' }, url: { classification: 'text', component: 'FormulateInputText' }, week: { classification: 'text', component: 'FormulateInputText' }, 'datetime-local': { classification: 'text', component: 'FormulateInputText' }, // === MULTI LINE TEXT INPUTS textarea: { classification: 'textarea', component: 'FormulateInputTextArea' }, // === BOX STYLE INPUTS checkbox: { classification: 'box', component: 'FormulateInputBox' }, radio: { classification: 'box', component: 'FormulateInputBox' }, // === BUTTON STYLE INPUTS submit: { classification: 'button', component: 'FormulateInputButton' }, button: { classification: 'button', component: 'FormulateInputButton' }, // === SELECT STYLE INPUTS select: { classification: 'select', component: 'FormulateInputSelect' } }; /** * Function to map over an object. * @param {Object} obj An object to map over * @param {Function} callback */ function map (original, callback) { var obj = {}; for (var key in original) { obj[key] = callback(key, original[key]); } return obj } /** * Shallow equal. * @param {} objA * @param {*} objB */ function shallowEqualObjects (objA, objB) { if (objA === objB) { return true } if (!objA || !objB) { return false } var aKeys = Object.keys(objA); var bKeys = Object.keys(objB); var len = aKeys.length; if (bKeys.length !== len) { return false } for (var i = 0; i < len; i++) { var key = aKeys[i]; if (objA[key] !== objB[key]) { return false } } return true } /** * For a single instance of an input, export all of the context needed to fully * render that element. * @return {object} */ var context = { context: function context () { if (this.debug) { console.log(((this.type) + " re-context")); } return defineModel.call(this, Object.assign({}, {type: this.type, value: this.value, name: this.nameOrFallback, classification: this.classification, component: this.component, id: this.id || this.defaultId, label: this.label, labelPosition: this.logicalLabelPosition, attributes: this.elementAttributes}, this.typeContext)) }, nameOrFallback: nameOrFallback, typeContext: typeContext, elementAttributes: elementAttributes, logicalLabelPosition: logicalLabelPosition, isVmodeled: isVmodeled }; /** * Given (this.type), return an object to merge with the context * @return {object} * @return {object} */ function typeContext () { var this$1 = this; switch (this.classification) { case 'select': return { options: createOptionList.call(this, this.options), optionGroups: this.optionGroups ? map(this.optionGroups, function (k, v) { return createOptionList.call(this$1, v); }) : false, placeholder: this.$attrs.placeholder || false } case 'group': if (this.options) { return { options: createOptionList.call(this, this.options) } } break default: return {} } } /** * Reducer for attributes that will be applied to each core input element. * @return {object} */ function elementAttributes () { var attrs = Object.assign({}, this.localAttributes); if (this.id) { attrs.id = this.id; } else { attrs.id = this.defaultId; } return attrs } /** * Determine the a best-guess location for the label (before or after). * @return {string} before|after */ function logicalLabelPosition () { if (this.labelPosition) { return this.labelPosition } switch (this.classification) { case 'box': return 'after' default: return 'before' } } /** * Return the element’s name, or select a fallback. */ function nameOrFallback () { if (this.name === true) { return ((this.type) + "_" + (this.elementAttributes.id)) } if (this.name === false) { return false } return this.name } /** * Determines if this formulate element is v-modeled or not. */ function isVmodeled () { return !!(this.$options.propsData.hasOwnProperty('formulateValue') && this._events && Array.isArray(this._events.input) && this._events.input.length) } /** * Given an object or array of options, create an array of objects with label, * value, and id. * @param {array|object} * @return {array} */ function createOptionList (options) { if (!Array.isArray(options) && options && typeof options === 'object') { var optionList = []; var that = this; for (var value in options) { optionList.push({ value: value, label: options[value], id: ((that.elementAttributes.id) + "_" + value) }); } return optionList } else if (Array.isArray(options) && !options.length) { return [{ value: this.value, label: (this.label || this.name), id: this.context.id || nanoid(9) }] } return options } /** * Defines the model used throughout the existing context. * @param {object} context */ function defineModel (context) { return Object.defineProperty(context, 'model', { get: modelGetter.bind(this), set: modelSetter.bind(this) }) } /** * Get the value from a model. **/ function modelGetter () { var model = this.isVmodeled ? 'formulateValue' : 'internalModelProxy'; if (this.type === 'checkbox' && !Array.isArray(this[model]) && this.options) { return [] } if (!this[model]) { return '' } return this[model] } /** * Set the value from a model. **/ function modelSetter (value) { this.internalModelProxy = value; this.$emit('input', value); if (this.context.name && typeof this.formulateFormSetter === 'function') { this.formulateFormSetter(this.context.name, value); } } // var script = { name: 'FormulateInput', inheritAttrs: false, inject: { formulateFormSetter: { default: undefined }, formulateFormRegister: { default: undefined } }, model: { prop: 'formulateValue', event: 'input' }, props: { type: { type: String, default: 'text' }, name: { type: [Boolean, String], default: true }, /* eslint-disable */ formulateValue: { default: '' }, value: { default: false }, /* eslint-enable */ options: { type: [Object, Array, Boolean], default: false }, optionGroups: { type: [Object, Boolean], default: false }, id: { type: [String, Boolean, Number], default: false }, label: { type: [String, Boolean], default: false }, labelPosition: { type: [String, Boolean], default: false }, help: { type: [String, Boolean], default: false }, debug: { type: Boolean, default: false } }, data: function data () { return { defaultId: nanoid(9), localAttributes: {}, internalModelProxy: this.formulateValue } }, computed: Object.assign({}, context, {classification: function classification () { var classification = this.$formulate.classify(this.type); return (classification === 'box' && this.options) ? 'group' : classification }, component: function component () { return (this.classification === 'group') ? 'FormulateInputGroup' : this.$formulate.component(this.type) }}), watch: { '$attrs': { handler: function handler (value) { this.updateLocalAttributes(value); }, deep: true }, internalModelProxy: function internalModelProxy (newValue, oldValue) { if (!this.isVmodeled && !shallowEqualObjects(newValue, oldValue)) { this.context.model = newValue; } }, formulateValue: function formulateValue (newValue, oldValue) { if (this.isVmodeled && !shallowEqualObjects(newValue, oldValue)) { this.context.model = newValue; } } }, created: function created () { if (this.formulateFormRegister && typeof this.formulateFormRegister === 'function') { this.formulateFormRegister(this.nameOrFallback, this); } this.updateLocalAttributes(this.$attrs); }, methods: { updateLocalAttributes: function updateLocalAttributes (value) { if (!shallowEqualObjects(value, this.localAttributes)) { this.localAttributes = value; } } } }; 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; } /* 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", { staticClass: "formulate-input", attrs: { "data-classification": _vm.classification, "data-type": _vm.type } }, [ _c( "div", { staticClass: "formulate-input-wrapper" }, [ _vm.context.label && _vm.context.labelPosition === "before" ? _vm._t( "label", [ _c("label", { staticClass: "formulate-input-label formulate-input-label--before", attrs: { for: _vm.context.attributes.id }, domProps: { textContent: _vm._s(_vm.context.label) } }) ], null, _vm.context ) : _vm._e(), _vm._v(" "), _vm._t( "default", [ _c(_vm.context.component, { tag: "component", attrs: { context: _vm.context } }) ], null, _vm.context ), _vm._v(" "), _vm.context.label && _vm.context.labelPosition === "after" ? _vm._t( "label", [ _c("label", { staticClass: "formulate-input-label formulate-input-label--after", attrs: { for: _vm.context.attributes.id }, domProps: { textContent: _vm._s(_vm.context.label) } }) ], null, _vm.context.label ) : _vm._e() ], 2 ), _vm._v(" "), _vm.help ? _c("div", { staticClass: "formulate-input-help", domProps: { textContent: _vm._s(_vm.help) } }) : _vm._e() ] ) }; var __vue_staticRenderFns__ = []; __vue_render__._withStripped = true; /* style */ var __vue_inject_styles__ = undefined; /* scoped */ var __vue_scope_id__ = undefined; /* module identifier */ var __vue_module_identifier__ = undefined; /* functional template */ var __vue_is_functional_template__ = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ var FormulateInput = normalizeComponent( { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined ); // var script$1 = { provide: function provide () { return { formulateFormSetter: this.setFieldValue, formulateFormRegister: this.register } }, name: 'FormulateForm', model: { prop: 'formulateValue', event: 'input' }, props: { name: { type: [String, Boolean], default: false }, formulateValue: { type: Object, default: function () { return ({}); } } }, data: function data () { return { registry: {} } }, computed: { formModel: { get: function get () { return this.formulateValue }, set: function set (value) { this.$emit('input', value); } }, hasFormulateValue: function hasFormulateValue () { return this.formulateValue && typeof this.formulateValue === 'object' }, isVmodeled: function isVmodeled () { return !!(this.$options.propsData.hasOwnProperty('formulateValue') && this._events && Array.isArray(this._events.input) && this._events.input.length) } }, watch: { formulateValue: { handler: function handler (newValue, oldValue) { if (this.isVmodeled && newValue && typeof newValue === 'object' ) { for (var field in newValue) { if (this.registry.hasOwnProperty(field) && !shallowEqualObjects(newValue[field], this.registry[field].internalModelProxy)) { // If the value of the formulateValue changed (probably as a prop) // and it doesn't match the internal proxied value of the registered // component, we set it explicitly. Its important we check the // model proxy here since the model itself is not fully synchronous. this.registry[field].context.model = newValue[field]; } } } }, deep: true } }, methods: { setFieldValue: function setFieldValue (field, value) { var obj; this.formModel = Object.assign({}, this.formulateValue, ( obj = {}, obj[field] = value, obj )); }, register: function register (field, component) { this.registry[field] = component; if (!component.$options.propsData.hasOwnProperty('formulateValue') && this.hasFormulateValue && this.formulateValue[field]) { // In the case that the form is carrying an initial value and the // element is not, set it directly. component.context.model = this.formulateValue[field]; } else if (component.$options.propsData.hasOwnProperty('formulateValue') && !shallowEqualObjects(component.internalModelProxy, this.formulateValue[field])) { this.setFieldValue(field, component.internalModelProxy); } }, formSubmitted: function formSubmitted () { // perform validation here this.$emit('submit', this.formModel); } } }; /* script */ var __vue_script__$1 = script$1; /* template */ var __vue_render__$1 = function() { var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; return _c( "form", { on: { submit: function($event) { $event.preventDefault(); return _vm.formSubmitted($event) } } }, [_vm._t("default")], 2 ) }; var __vue_staticRenderFns__$1 = []; __vue_render__$1._withStripped = true; /* style */ var __vue_inject_styles__$1 = undefined; /* scoped */ var __vue_scope_id__$1 = undefined; /* module identifier */ var __vue_module_identifier__$1 = undefined; /* functional template */ var __vue_is_functional_template__$1 = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ var FormulateForm = normalizeComponent( { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 }, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined ); // // // // // // // // // // // // // function objectWithoutProperties (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; } var script$2 = { name: 'FormulateInputGroup', props: { context: { type: Object, required: true } }, computed: { options: function options () { return this.context.options || [] }, optionsWithContext: function optionsWithContext () { var this$1 = this; var ref = this.context; var options = ref.options; var labelPosition = ref.labelPosition; var attributes = ref.attributes; var classification = ref.classification; var rest = objectWithoutProperties( ref, ["options", "labelPosition", "attributes", "classification"] ); var context = rest; return this.options.map(function (option) { return this$1.groupItemContext(context, option); }) } }, methods: { groupItemContext: function groupItemContext () { var args = [], len = arguments.length; while ( len-- ) args[ len ] = arguments[ len ]; return Object.assign.apply(Object, [ {} ].concat( args, [{ component: 'FormulateInput' }] )) } } }; /* script */ var __vue_script__$2 = script$2; /* template */ var __vue_render__$2 = function() { var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; return _c( "div", { staticClass: "formulate-input-group" }, _vm._l(_vm.optionsWithContext, function(optionContext) { return _c( optionContext.component, _vm._b( { key: optionContext.id, tag: "component", staticClass: "formulate-input-group-item", model: { value: _vm.context.model, callback: function($$v) { _vm.$set(_vm.context, "model", $$v); }, expression: "context.model" } }, "component", optionContext, false ) ) }), 1 ) }; var __vue_staticRenderFns__$2 = []; __vue_render__$2._withStripped = true; /* style */ var __vue_inject_styles__$2 = undefined; /* scoped */ var __vue_scope_id__$2 = undefined; /* module identifier */ var __vue_module_identifier__$2 = undefined; /* functional template */ var __vue_is_functional_template__$2 = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ var FormulateInputGroup = normalizeComponent( { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 }, __vue_inject_styles__$2, __vue_script__$2, __vue_scope_id__$2, __vue_is_functional_template__$2, __vue_module_identifier__$2, false, undefined, undefined, undefined ); /** * Default base for input components. */ var FormulateInputMixin = { props: { context: { type: Object, required: true } }, computed: { type: function type () { return this.context.type }, id: function id () { return this.context.id }, attributes: function attributes () { return this.context.attributes || {} }, hasValue: function hasValue () { return !!this.context.model } } }; // var script$3 = { name: 'FormulateInputBox', mixins: [FormulateInputMixin] }; /* script */ var __vue_script__$3 = script$3; /* template */ var __vue_render__$3 = function() { var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; return _c( "div", { staticClass: "formulate-input-element formulate-input-element--box", attrs: { "data-type": _vm.context.type } }, [ _vm.type === "checkbox" ? _c( "input", _vm._b( { directives: [ { name: "model", rawName: "v-model", value: _vm.context.model, expression: "context.model" } ], attrs: { type: "checkbox" }, domProps: { value: _vm.context.value, checked: Array.isArray(_vm.context.model) ? _vm._i(_vm.context.model, _vm.context.value) > -1 : _vm.context.model }, on: { change: function($event) { var $$a = _vm.context.model, $$el = $event.target, $$c = $$el.checked ? true : false; if (Array.isArray($$a)) { var $$v = _vm.context.value, $$i = _vm._i($$a, $$v); if ($$el.checked) { $$i < 0 && _vm.$set(_vm.context, "model", $$a.concat([$$v])); } else { $$i > -1 && _vm.$set( _vm.context, "model", $$a.slice(0, $$i).concat($$a.slice($$i + 1)) ); } } else { _vm.$set(_vm.context, "model", $$c); } } } }, "input", _vm.attributes, false ) ) : _vm.type === "radio" ? _c( "input", _vm._b( { directives: [ { name: "model", rawName: "v-model", value: _vm.context.model, expression: "context.model" } ], attrs: { type: "radio" }, domProps: { value: _vm.context.value, checked: _vm._q(_vm.context.model, _vm.context.value) }, on: { change: function($event) { return _vm.$set(_vm.context, "model", _vm.context.value) } } }, "input", _vm.attributes, false ) ) : _c( "input", _vm._b( { directives: [ { name: "model", rawName: "v-model", value: _vm.context.model, expression: "context.model" } ], attrs: { type: _vm.type }, domProps: { value: _vm.context.value, value: _vm.context.model }, on: { input: function($event) { if ($event.target.composing) { return } _vm.$set(_vm.context, "model", $event.target.value); } } }, "input", _vm.attributes, false ) ), _vm._v(" "), _c("label", { staticClass: "formulate-input-element-decorator", attrs: { for: _vm.id } }) ] ) }; var __vue_staticRenderFns__$3 = []; __vue_render__$3._withStripped = true; /* style */ var __vue_inject_styles__$3 = undefined; /* scoped */ var __vue_scope_id__$3 = undefined; /* module identifier */ var __vue_module_identifier__$3 = undefined; /* functional template */ var __vue_is_functional_template__$3 = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ var FormulateInputBox = normalizeComponent( { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 }, __vue_inject_styles__$3, __vue_script__$3, __vue_scope_id__$3, __vue_is_functional_template__$3, __vue_module_identifier__$3, false, undefined, undefined, undefined ); // var script$4 = { name: 'FormulateInputText', mixins: [FormulateInputMixin] }; /* script */ var __vue_script__$4 = script$4; /* template */ var __vue_render__$4 = function() { var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; return _c( "div", { staticClass: "formulate-input-element formulate-input-element--textarea" }, [ _vm.type === "checkbox" ? _c( "input", _vm._b( { directives: [ { name: "model", rawName: "v-model", value: _vm.context.model, expression: "context.model" } ], attrs: { type: "checkbox" }, domProps: { checked: Array.isArray(_vm.context.model) ? _vm._i(_vm.context.model, null) > -1 : _vm.context.model }, on: { change: function($event) { var $$a = _vm.context.model, $$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.context, "model", $$a.concat([$$v])); } else { $$i > -1 && _vm.$set( _vm.context, "model", $$a.slice(0, $$i).concat($$a.slice($$i + 1)) ); } } else { _vm.$set(_vm.context, "model", $$c); } } } }, "input", _vm.attributes, false ) ) : _vm.type === "radio" ? _c( "input", _vm._b( { directives: [ { name: "model", rawName: "v-model", value: _vm.context.model, expression: "context.model" } ], attrs: { type: "radio" }, domProps: { checked: _vm._q(_vm.context.model, null) }, on: { change: function($event) { return _vm.$set(_vm.context, "model", null) } } }, "input", _vm.attributes, false ) ) : _c( "input", _vm._b( { directives: [ { name: "model", rawName: "v-model", value: _vm.context.model, expression: "context.model" } ], attrs: { type: _vm.type }, domProps: { value: _vm.context.model }, on: { input: function($event) { if ($event.target.composing) { return } _vm.$set(_vm.context, "model", $event.target.value); } } }, "input", _vm.attributes, false ) ) ] ) }; var __vue_staticRenderFns__$4 = []; __vue_render__$4._withStripped = true; /* style */ var __vue_inject_styles__$4 = undefined; /* scoped */ var __vue_scope_id__$4 = undefined; /* module identifier */ var __vue_module_identifier__$4 = undefined; /* functional template */ var __vue_is_functional_template__$4 = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ var FormulateInputText = normalizeComponent( { render: __vue_render__$4, staticRenderFns: __vue_staticRenderFns__$4 }, __vue_inject_styles__$4, __vue_script__$4, __vue_scope_id__$4, __vue_is_functional_template__$4, __vue_module_identifier__$4, false, undefined, undefined, undefined ); // var script$5 = { name: 'FormulateInputSelect', mixins: [FormulateInputMixin], computed: { options: function options () { return this.context.options || {} }, optionGroups: function optionGroups () { return this.context.optionGroups || false }, placeholderSelected: function placeholderSelected () { return !!(!this.hasValue && this.context.attributes && this.context.attributes.placeholder) } } }; /* script */ var __vue_script__$5 = script$5; /* template */ var __vue_render__$5 = function() { var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; return _c( "div", { staticClass: "formulate-input-element formulate-input-element--select" }, [ _c( "select", _vm._b( { directives: [ { name: "model", rawName: "v-model", value: _vm.context.model, expression: "context.model" } ], attrs: { "data-placeholder-selected": _vm.placeholderSelected }, on: { change: function($event) { var $$selectedVal = Array.prototype.filter .call($event.target.options, function(o) { return o.selected }) .map(function(o) { var val = "_value" in o ? o._value : o.value; return val }); _vm.$set( _vm.context, "model", $event.target.multiple ? $$selectedVal : $$selectedVal[0] ); } } }, "select", _vm.attributes, false ), [ _vm.context.placeholder ? _c( "option", { attrs: { value: "", disabled: "" }, domProps: { selected: !_vm.hasValue } }, [ _vm._v( "\n " + _vm._s(_vm.context.placeholder) + "\n " ) ] ) : _vm._e(), _vm._v(" "), !_vm.optionGroups ? _vm._l(_vm.options, function(option) { return _c( "option", _vm._b( { key: option.id, domProps: { value: option.value, textContent: _vm._s(option.label) } }, "option", option.attributes || {}, false ) ) }) : _vm._l(_vm.optionGroups, function(subOptions, label) { return _c( "optgroup", { key: label, attrs: { label: label } }, _vm._l(subOptions, function(option) { return _c( "option", _vm._b( { key: option.id, domProps: { value: option.value, textContent: _vm._s(option.label) } }, "option", option.attributes || {}, false ) ) }), 0 ) }) ], 2 ) ] ) }; var __vue_staticRenderFns__$5 = []; __vue_render__$5._withStripped = true; /* style */ var __vue_inject_styles__$5 = undefined; /* scoped */ var __vue_scope_id__$5 = undefined; /* module identifier */ var __vue_module_identifier__$5 = undefined; /* functional template */ var __vue_is_functional_template__$5 = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ var FormulateInputSelect = normalizeComponent( { render: __vue_render__$5, staticRenderFns: __vue_staticRenderFns__$5 }, __vue_inject_styles__$5, __vue_script__$5, __vue_scope_id__$5, __vue_is_functional_template__$5, __vue_module_identifier__$5, false, undefined, undefined, undefined ); // var script$6 = { name: 'FormulateInputTextArea', mixins: [FormulateInputMixin] }; /* script */ var __vue_script__$6 = script$6; /* template */ var __vue_render__$6 = function() { var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; return _c( "div", { staticClass: "formulate-input-element formulate-input-element--textarea" }, [ _c( "textarea", _vm._b( { directives: [ { name: "model", rawName: "v-model", value: _vm.context.model, expression: "context.model" } ], domProps: { value: _vm.context.model }, on: { input: function($event) { if ($event.target.composing) { return } _vm.$set(_vm.context, "model", $event.target.value); } } }, "textarea", _vm.attributes, false ) ) ] ) }; var __vue_staticRenderFns__$6 = []; __vue_render__$6._withStripped = true; /* style */ var __vue_inject_styles__$6 = undefined; /* scoped */ var __vue_scope_id__$6 = undefined; /* module identifier */ var __vue_module_identifier__$6 = undefined; /* functional template */ var __vue_is_functional_template__$6 = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ var FormulateInputTextArea = normalizeComponent( { render: __vue_render__$6, staticRenderFns: __vue_staticRenderFns__$6 }, __vue_inject_styles__$6, __vue_script__$6, __vue_scope_id__$6, __vue_is_functional_template__$6, __vue_module_identifier__$6, false, undefined, undefined, undefined ); /** * The base formulate library. */ var Formulate = function Formulate () { this.defaults = { components: { FormulateForm: FormulateForm, FormulateInput: FormulateInput, FormulateInputBox: FormulateInputBox, FormulateInputText: FormulateInputText, FormulateInputGroup: FormulateInputGroup, FormulateInputSelect: FormulateInputSelect, FormulateInputTextArea: FormulateInputTextArea }, library: library }; }; /** * Install vue formulate, and register it’s components. */ Formulate.prototype.install = function install (Vue, options) { Vue.prototype.$formulate = this; this.options = this.extend(this.defaults, options || {}); for (var componentName in this.options.components) { Vue.component(componentName, this.options.components[componentName]); } Object.freeze(this); }; /** * Create a new object by copying properties of base and extendWith. * @param {Object} base * @param {Object} extendWith */ Formulate.prototype.extend = function extend (base, extendWith) { var merged = {}; for (var key in base) { if (extendWith.hasOwnProperty(key)) { merged[key] = isPlainObject(extendWith[key]) && isPlainObject(base[key]) ? this.extend(base[key], extendWith[key]) : extendWith[key]; } else { merged[key] = base[key]; } } for (var prop in extendWith) { if (!merged.hasOwnProperty(prop)) { merged[prop] = extendWith[prop]; } } return merged }; /** * Determine what "class" of input this element is given the "type". * @param {string} type */ Formulate.prototype.classify = function classify (type) { if (this.options.library.hasOwnProperty(type)) { return this.options.library[type].classification } return 'unknown' }; /** * Determine what type of component to render given the "type". * @param {string} type */ Formulate.prototype.component = function component (type) { if (this.options.library.hasOwnProperty(type)) { return this.options.library[type].component } return false }; var Formulate$1 = new Formulate(); exports.default = Formulate$1; Object.defineProperty(exports, '__esModule', { value: true }); })));