1
0
mirror of synced 2024-11-23 05:46:05 +03:00
vue-formulario/dist/formulate.esm.js

3075 lines
78 KiB
JavaScript
Raw Normal View History

import isUrl from 'is-url';
import nanoid from 'nanoid';
import isPlainObject from 'is-plain-object';
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'
},
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'
},
// === SLIDER INPUTS
range: {
classification: 'slider',
component: 'FormulateInputSlider'
},
// === 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'
},
// === FILE TYPE
file: {
classification: 'file',
component: 'FormulateInputFile'
},
image: {
classification: 'file',
component: 'FormulateInputFile'
}
};
/**
* The file upload class holds and represents a files upload state durring
* the upload flow.
*/
var FileUpload = function FileUpload (input, context, options) {
this.input = input;
this.fileList = input.files;
this.files = [];
this.options = options;
this.addFileList(this.fileList);
this.context = context;
};
/**
* Produce an array of files and alert the callback.
* @param {FileList}
*/
FileUpload.prototype.addFileList = function addFileList (fileList) {
var this$1 = this;
var loop = function ( i ) {
var file = fileList[i];
var uuid = nanoid();
var removeFile = function () {
this.removeFile(uuid);
};
this$1.files.push({
progress: false,
error: false,
complete: false,
justFinished: false,
name: file.name || 'file-upload',
file: file,
uuid: uuid,
removeFile: removeFile.bind(this$1)
});
};
for (var i = 0; i < fileList.length; i++) loop( i );
};
/**
* Check if the file has an.
*/
FileUpload.prototype.hasUploader = function hasUploader () {
return !!this.context.uploader
};
/**
* Check if the given uploader is axios instance.
*/
FileUpload.prototype.uploaderIsAxios = function uploaderIsAxios () {
if (
this.hasUploader &&
typeof this.hasUploader.request === 'function' &&
typeof this.hasUploader.get === 'function' &&
typeof this.hasUploader.delete === 'function' &&
typeof this.hasUploader.post === 'function'
) {
return true
}
return false
};
/**
* Get a new uploader function.
*/
FileUpload.prototype.getUploader = function getUploader () {
var ref;
var args = [], len = arguments.length;
while ( len-- ) args[ len ] = arguments[ len ];
if (this.uploaderIsAxios()) {
var formData = new FormData();
formData.append(this.context.name || 'file', args[0]);
return this.uploader.post(this.context.uploadUrl, formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: function (progressEvent) {
args[1](Math.round((progressEvent.loaded * 100) / progressEvent.total));
}
})
.catch(function (err) { return args[2](err); })
}
return (ref = this.context).uploader.apply(ref, args)
};
/**
* Perform the file upload.
*/
FileUpload.prototype.upload = function upload () {
var this$1 = this;
return new Promise(function (resolve, reject) {
if (!this$1.hasUploader) {
return reject(new Error('No uploader has been defined'))
}
Promise.all(this$1.files.map(function (file) {
return file.path ? Promise.resolve(file.path) : this$1.getUploader(
file.file,
function (progress) {
file.progress = progress;
if (progress >= 100) {
if (!file.complete) {
file.justFinished = true;
setTimeout(function () { file.justFinished = false; }, this$1.options.uploadJustCompleteDuration);
}
file.complete = true;
}
},
function (error) {
file.progress = 0;
file.error = error;
file.complete = true;
},
this$1.options
)
}))
.then(function (results) { return resolve(results); })
.catch(function (err) { throw new Error(err) });
})
};
/**
* Remove a file from the uploader (and the file list)
* @param {string} uuid
*/
FileUpload.prototype.removeFile = function removeFile (uuid) {
this.files = this.files.filter(function (file) { return file.uuid !== uuid; });
if (window) {
var transfer = new DataTransfer();
this.files.map(function (file) { return transfer.items.add(file.file); });
this.fileList = transfer.files;
this.input.files = this.fileList;
}
};
/**
* Get the files.
*/
FileUpload.prototype.getFileList = function getFileList () {
return this.fileList
};
/**
* Get the files.
*/
FileUpload.prototype.getFiles = function getFiles () {
return this.files
};
/**
* 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
}
/**
* Given a string, object, falsey, or array - return an array.
* @param {mixed} item
*/
function arrayify (item) {
if (!item) {
return []
}
if (typeof item === 'string') {
return [item]
}
if (Array.isArray(item)) {
return item
}
if (typeof item === 'object') {
return Object.values(item)
}
return []
}
/**
* How to add an item.
* @param {string} item
*/
function sentence (item) {
if (typeof item === 'string') {
return item[0].toUpperCase() + item.substr(1)
}
return item
}
/**
* Given an array or string return an array of callables.
* @param {array|string} validation
* @param {array} rules and array of functions
* @return {array} an array of functions
*/
function parseRules (validation, rules) {
if (typeof validation === 'string') {
return parseRules(validation.split('|'), rules)
}
if (!Array.isArray(validation)) {
return []
}
return validation.map(function (rule) { return parseRule(rule, rules); }).filter(function (f) { return !!f; })
}
/**
* Given a string or function, parse it and return the an array in the format
* [fn, [...arguments]]
* @param {string|function} rule
*/
function parseRule (rule, rules) {
if (typeof rule === 'function') {
return [rule, []]
}
if (Array.isArray(rule) && rule.length) {
rule = rule.map(function (r) { return r; }); // light clone
if (typeof rule[0] === 'string' && rules.hasOwnProperty(rule[0])) {
return [rules[rule.shift()], rule]
}
if (typeof rule[0] === 'function') {
return [rule.shift(), rule]
}
}
if (typeof rule === 'string') {
var segments = rule.split(':');
var functionName = segments.shift();
if (rules.hasOwnProperty(functionName)) {
return [rules[functionName], segments.length ? segments.join(':').split(',') : []]
} else {
throw new Error(("Unknown validation rule " + rule))
}
}
return false
}
/**
* Escape a string for use in regular expressions.
* @param {string} string
*/
function escapeRegExp (string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') // $& means the whole matched string
}
/**
* Given a string format (date) return a regex to match against.
* @param {string} format
*/
function regexForFormat (format) {
var escaped = "^" + (escapeRegExp(format)) + "$";
var formats = {
MM: '(0[1-9]|1[012])',
M: '([1-9]|1[012])',
DD: '([012][1-9]|3[01])',
D: '([012]?[1-9]|3[01])',
YYYY: '\\d{4}',
YY: '\\d{2}'
};
return new RegExp(Object.keys(formats).reduce(function (regex, format) {
return regex.replace(format, formats[format])
}, escaped))
}
/**
* Library of rules
*/
var rules = {
/**
* Rule: the value must be "yes", "on", "1", or true
*/
accepted: function (value) {
return Promise.resolve(['yes', 'on', '1', 1, true, 'true'].includes(value))
},
/**
* Rule: checks if a value is after a given date. Defaults to current time
*/
after: function (value, compare) {
if ( compare === void 0 ) compare = false;
var timestamp = Date.parse(compare || new Date());
var fieldValue = Date.parse(value);
return Promise.resolve(isNaN(fieldValue) ? false : (fieldValue > timestamp))
},
/**
* Rule: checks if the value is only alpha
*/
alpha: function (value, set) {
if ( set === void 0 ) set = 'default';
var sets = {
default: /^[a-zA-ZÀ-ÖØ-öø-ÿ]+$/,
latin: /^[a-zA-Z]+$/
};
var selectedSet = sets.hasOwnProperty(set) ? set : 'default';
return Promise.resolve(sets[selectedSet].test(value))
},
/**
* Rule: checks if the value is alpha numeric
*/
alphanumeric: function (value, set) {
if ( set === void 0 ) set = 'default';
var sets = {
default: /^[a-zA-Z0-9À-ÖØ-öø-ÿ]+$/,
latin: /^[a-zA-Z0-9]+$/
};
var selectedSet = sets.hasOwnProperty(set) ? set : 'default';
return Promise.resolve(sets[selectedSet].test(value))
},
/**
* Rule: checks if a value is after a given date. Defaults to current time
*/
before: function (value, compare) {
if ( compare === void 0 ) compare = false;
var timestamp = Date.parse(compare || new Date());
var fieldValue = Date.parse(value);
return Promise.resolve(isNaN(fieldValue) ? false : (fieldValue < timestamp))
},
/**
* Rule: checks if the value is between two other values
*/
between: function (value, from, to) {
if ( from === void 0 ) from = 0;
if ( to === void 0 ) to = 10;
return Promise.resolve((function () {
if (from === null || to === null || isNaN(from) || isNaN(to)) {
return false
}
from = Number(from);
to = Number(to);
if (!isNaN(value)) {
value = Number(value);
return (value > from && value < to)
}
if (typeof value === 'string') {
return value.length > from && value.length < to
}
return false
})())
},
/**
* Rule: ensures the value is a date according to Date.parse(), or a format
* regex.
*/
date: function (value, format) {
if ( format === void 0 ) format = false;
return Promise.resolve((function () {
if (format && typeof format === 'string') {
return regexForFormat(format).test(value)
}
return !isNaN(Date.parse(value))
})())
},
/**
* Rule: tests
*/
email: function (value) {
// eslint-disable-next-line
var isEmail = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
return Promise.resolve(isEmail.test(value))
},
/**
* Rule: Value is in an array (stack).
*/
in: function (value) {
var stack = [], len = arguments.length - 1;
while ( len-- > 0 ) stack[ len ] = arguments[ len + 1 ];
return Promise.resolve(stack.find(function (item) {
if (typeof item === 'object') {
return shallowEqualObjects(item, value)
}
return item === value
}) !== undefined)
},
/**
* Rule: Match the value against a (stack) of patterns or strings
*/
matches: function (value) {
var stack = [], len = arguments.length - 1;
while ( len-- > 0 ) stack[ len ] = arguments[ len + 1 ];
return Promise.resolve(!!stack.find(function (pattern) {
if (pattern instanceof RegExp) {
return pattern.test(value)
}
return pattern === value
}))
},
/**
* Check the maximum value of a particular.
*/
max: function (value, minimum, force) {
if ( minimum === void 0 ) minimum = 10;
return Promise.resolve((function () {
if (Array.isArray(value)) {
minimum = !isNaN(minimum) ? Number(minimum) : minimum;
return value.length <= minimum
}
if ((!isNaN(value) && force !== 'length') || force === 'value') {
value = !isNaN(value) ? Number(value) : value;
return value <= minimum
}
if (typeof value === 'string' || (force === 'length')) {
value = !isNaN(value) ? value.toString() : value;
return value.length <= minimum
}
return false
})())
},
/**
* Check the file type is correct.
*/
mime: function (files) {
var types = [], len = arguments.length - 1;
while ( len-- > 0 ) types[ len ] = arguments[ len + 1 ];
return Promise.resolve((function () {
if (files instanceof FileUpload) {
var fileList = files.getFileList();
for (var i = 0; i < fileList.length; i++) {
var file = fileList[i];
if (!types.includes(file.type)) {
return false
}
}
}
return true
})())
},
/**
* Check the minimum value of a particular.
*/
min: function (value, minimum) {
if ( minimum === void 0 ) minimum = 1;
return Promise.resolve((function () {
minimum = Number(minimum);
if (!isNaN(value)) {
value = Number(value);
return value >= minimum
}
if (typeof value === 'string') {
return value.length >= minimum
}
if (Array.isArray(value)) {
return value.length >= minimum
}
return false
})())
},
/**
* Rule: Value is not in stack.
*/
not: function (value) {
var stack = [], len = arguments.length - 1;
while ( len-- > 0 ) stack[ len ] = arguments[ len + 1 ];
return Promise.resolve(stack.find(function (item) {
if (typeof item === 'object') {
return shallowEqualObjects(item, value)
}
return item === value
}) === undefined)
},
/**
* Rule: checks if the value is only alpha numeric
*/
number: function (value) {
return Promise.resolve(!isNaN(value))
},
/**
* Rule: must be a value
*/
required: function (value, isRequired) {
if ( isRequired === void 0 ) isRequired = true;
return Promise.resolve((function () {
if (!isRequired || ['no', 'false'].includes(isRequired)) {
return true
}
if (Array.isArray(value)) {
return !!value.length
}
if (typeof value === 'string') {
return !!value
}
if (typeof value === 'object') {
return (!value) ? false : !!Object.keys(value).length
}
return true
})())
},
/**
* Rule: checks if a string is a valid url
*/
url: function (value) {
return Promise.resolve(isUrl(value))
}
};
/**
* Validation error message generators.
*/
var en = {
/**
* Valid accepted value.
*/
accepted: function (ref) {
var name = ref.name;
return ("Please accept the " + name + ".")
},
/**
* The date is not after.
*/
after: function (ref) {
var name = ref.name;
var args = ref.args;
if (Array.isArray(args) && args.length) {
return ((sentence(name)) + " must be after " + (args[0]) + ".")
}
return ((sentence(name)) + " must be a later date.")
},
/**
* The value is not a letter.
*/
alpha: function (ref) {
var name = ref.name;
return ((sentence(name)) + " can only contain alphabetical characters.")
},
/**
* Rule: checks if the value is alpha numeric
*/
alphanumeric: function (ref) {
var name = ref.name;
return ((sentence(name)) + " can only contain letters and numbers.")
},
/**
* The date is not before.
*/
before: function (ref) {
var name = ref.name;
var args = ref.args;
if (Array.isArray(args) && args.length) {
return ((sentence(name)) + " must be before " + (args[0]) + ".")
}
return ((sentence(name)) + " must be an earlier date.")
},
/**
* The value is not between two numbers or lengths
*/
between: function (ref) {
var name = ref.name;
var value = ref.value;
var args = ref.args;
if (!isNaN(value)) {
return ((sentence(name)) + " must be between " + (args[0]) + " and " + (args[1]) + ".")
}
return ((sentence(name)) + " must be between " + (args[0]) + " and " + (args[1]) + " characters long.")
},
/**
* Is not a valid date.
*/
date: function (ref) {
var name = ref.name;
var args = ref.args;
if (Array.isArray(args) && args.length) {
return ((sentence(name)) + " is not a valid, please use the format " + (args[0]))
}
return ((sentence(name)) + " is not a valid date.")
},
/**
* The default render method for error messages.
*/
default: function (ref) {
var name = ref.name;
return "This field isnt valid."
},
/**
* Is not a valid email address.
*/
email: function (ref) {
var name = ref.name;
var value = ref.value;
if (!value) {
return 'Please enter a valid email address.'
}
return ("“" + value + "” is not a valid email address.")
},
/**
* Value is an allowed value.
*/
in: function (ref) {
var name = ref.name;
var value = ref.value;
if (typeof value === 'string' && value) {
return ("“" + (sentence(value)) + "” is not an allowed " + name + ".")
}
return ("This is not an allowed " + name + ".")
},
/**
* Value is not a match.
*/
matches: function (ref) {
var name = ref.name;
return ((sentence(name)) + " is not an allowed value.")
},
/**
* The maximum value allowed.
*/
max: function (ref) {
var name = ref.name;
var value = ref.value;
var args = ref.args;
if (Array.isArray(value)) {
return ("You may only select " + (args[0]) + " " + name + ".")
}
var force = Array.isArray(args) && args[1] ? args[1] : false;
if ((!isNaN(value) && force !== 'length') || force === 'value') {
return ((sentence(name)) + " must be less than " + (args[0]) + ".")
}
return ((sentence(name)) + " must be less than " + (args[0]) + " characters long.")
},
/**
* The (field-level) error message for mime errors.
*/
mime: function (ref) {
var name = ref.name;
var args = ref.args;
return ((sentence(name)) + " must of the the type: " + (args[0] || 'No file formats allowed.'))
},
/**
* The maximum value allowed.
*/
min: function (ref) {
var name = ref.name;
var value = ref.value;
var args = ref.args;
if (Array.isArray(value)) {
return ("You must select at least " + (args[0]) + " " + name + ".")
}
var force = Array.isArray(args) && args[1] ? args[1] : false;
if ((!isNaN(value) && force !== 'length') || force === 'value') {
return ((sentence(name)) + " must be more than " + (args[0]) + ".")
}
return ((sentence(name)) + " must be more than " + (args[0]) + " characters long.")
},
/**
* The field is not an allowed value
*/
not: function (ref) {
var name = ref.name;
var value = ref.value;
return ("“" + value + "” is not an allowed " + name + ".")
},
/**
* The field is not a number
*/
number: function (ref) {
var name = ref.name;
return ((sentence(name)) + " must be a number.")
},
/**
* Required field.
*/
required: function (ref) {
var name = ref.name;
return ((sentence(name)) + " is required.")
},
/**
* Value is not a url.
*/
url: function (ref) {
var name = ref.name;
return "Please include a valid url."
}
};
/**
* A fake uploader used by default.
*
* @param {File} file
* @param {function} progress
* @param {function} error
* @param {object} options
*/
function fauxUploader (file, progress, error, options) {
return new Promise(function (resolve, reject) {
var totalTime = (options.fauxUploaderDuration || 2000) * (0.5 + Math.random());
var start = performance.now();
/**
* @todo - remove, intentional failure
*/
var fail = (Math.random() > 0.5);
var advance = function () { return setTimeout(function () {
var elapsed = performance.now() - start;
var currentProgress = Math.min(100, Math.round(elapsed / totalTime * 100));
progress(currentProgress);
/**
* @todo - remove, intentional failure
*/
if (fail && currentProgress > 50) {
return error('There was an error uploading the file.')
}
if (currentProgress >= 100) {
return resolve({
url: 'http://via.placeholder.com/350x150.png',
name: file.name
})
} else {
advance();
}
}, 20); };
advance();
})
}
/**
* 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 () {
return defineModel.call(this, Object.assign({}, {type: this.type,
value: this.value,
2019-10-09 06:54:16 +03:00
name: this.nameOrFallback,
classification: this.classification,
component: this.component,
id: this.id || this.defaultId,
label: this.label,
labelPosition: this.logicalLabelPosition,
attributes: this.elementAttributes,
blurHandler: blurHandler.bind(this),
showImage: this.showImage,
uploadUrl: this.uploadUrl,
uploader: this.uploader || this.$formulate.getUploader(),
uploadBehavior: this.uploadBehavior,
preventWindowDrops: this.preventWindowDrops,
hasValidationErrors: this.hasValidationErrors},
this.typeContext))
},
2019-10-09 06:54:16 +03:00
nameOrFallback: nameOrFallback,
typeContext: typeContext,
elementAttributes: elementAttributes,
2019-10-30 06:33:31 +03:00
logicalLabelPosition: logicalLabelPosition,
isVmodeled: isVmodeled,
mergedErrors: mergedErrors,
hasErrors: hasErrors,
showFieldErrors: showFieldErrors,
mergedValidationName: mergedValidationName
};
/**
* 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'
}
}
/**
* The validation label to use.
*/
function mergedValidationName () {
if (this.validationName) {
return this.validationName
}
if (typeof this.name === 'string') {
return this.name
}
if (this.label) {
return this.label
}
return this.type
}
/**
* Determines if the field should show it's error (if it has one)
* @return {boolean}
*/
function showFieldErrors () {
if (this.showErrors) {
return this.showErrors
}
return this.behavioralErrorVisibility
}
2019-10-09 06:54:16 +03:00
/**
* Return the elements 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
}
2019-10-30 06:33:31 +03:00
/**
* 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
}
/**
* The merged errors computed property.
*/
function mergedErrors () {
return arrayify(this.errors)
.concat(arrayify(this.error))
.concat(arrayify(this.validationErrors))
.reduce(function (errors, err) { return !errors.includes(err) ? errors.concat(err) : errors; }, [])
}
/**
* Does this computed property have errors.
*/
function hasErrors () {
return !!this.mergedErrors.length
}
/**
* Bound into the context object.
*/
function blurHandler () {
if (this.errorBehavior === 'blur') {
this.behavioralErrorVisibility = true;
}
}
/**
* 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 () {
2019-10-30 06:33:31 +03:00
var model = this.isVmodeled ? 'formulateValue' : 'internalModelProxy';
if (this.type === 'checkbox' && !Array.isArray(this[model]) && this.options) {
return []
}
2019-10-30 06:33:31 +03:00
if (!this[model]) {
return ''
}
2019-10-30 06:33:31 +03:00
return this[model]
}
/**
* Set the value from a model.
**/
function modelSetter (value) {
2019-10-30 06:33:31 +03:00
this.internalModelProxy = value;
this.$emit('input', value);
2019-10-09 06:54:16 +03:00
if (this.context.name && typeof this.formulateFormSetter === 'function') {
this.formulateFormSetter(this.context.name, value);
}
}
//
var script = {
name: 'FormulateInput',
inheritAttrs: false,
2019-10-09 06:54:16 +03:00
inject: {
formulateFormSetter: { default: undefined },
formulateFormRegister: { default: undefined },
getFormValues: { default: function () { return function () { return ({}); }; } }
2019-10-09 06:54:16 +03:00
},
model: {
prop: 'formulateValue',
event: 'input'
},
props: {
type: {
type: String,
default: 'text'
},
2019-10-09 06:54:16 +03:00
name: {
type: [Boolean, String],
default: true
},
/* eslint-disable */
formulateValue: {
2019-10-30 06:33:31 +03:00
default: ''
},
value: {
default: false
},
2019-10-09 06:54:16 +03:00
/* 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
},
errors: {
type: [String, Array, Boolean],
default: false
},
validation: {
type: [String, Boolean, Array],
default: false
},
validationName: {
type: [String, Boolean],
default: false
},
error: {
type: [String, Boolean],
default: false
},
errorBehavior: {
type: String,
default: 'blur',
validator: function (value) {
return ['blur', 'live'].includes(value)
}
},
showErrors: {
type: Boolean,
default: false
},
showImage: {
type: Boolean,
default: true
},
uploadUrl: {
type: [String, Boolean],
default: false
},
uploader: {
type: [Function, Object, Boolean],
default: false
},
uploadBehavior: {
type: String,
default: 'live'
},
preventWindowDrops: {
type: Boolean,
default: true
}
},
data: function data () {
return {
defaultId: nanoid(9),
2019-10-30 06:33:31 +03:00
localAttributes: {},
internalModelProxy: this.formulateValue,
behavioralErrorVisibility: (this.errorBehavior === 'live'),
validationErrors: [],
pendingValidation: Promise.resolve()
}
},
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
2019-10-30 06:33:31 +03:00
},
internalModelProxy: function internalModelProxy (newValue, oldValue) {
this.performValidation();
2019-10-30 06:33:31 +03:00
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 () {
2019-10-09 06:54:16 +03:00
if (this.formulateFormRegister && typeof this.formulateFormRegister === 'function') {
2019-10-30 06:33:31 +03:00
this.formulateFormRegister(this.nameOrFallback, this);
2019-10-09 06:54:16 +03:00
}
this.updateLocalAttributes(this.$attrs);
this.performValidation();
},
methods: {
updateLocalAttributes: function updateLocalAttributes (value) {
if (!shallowEqualObjects(value, this.localAttributes)) {
this.localAttributes = value;
}
},
performValidation: function performValidation () {
var this$1 = this;
var rules = parseRules(this.validation, this.$formulate.rules());
this.pendingValidation = Promise.all(
rules.map(function (ref) {
var rule = ref[0];
var args = ref[1];
return rule.apply(void 0, [ this$1.context.model ].concat( args ))
.then(function (res) { return res ? false : this$1.$formulate.validationMessage(rule.name, {
args: args,
name: this$1.mergedValidationName,
value: this$1.context.model,
vm: this$1,
formValues: this$1.getFormValues()
}); })
})
)
.then(function (result) { return result.filter(function (result) { return result; }); })
.then(function (errorMessages) {
console.log('setting validation errors');
this$1.validationErrors = errorMessages;
});
return this.pendingValidation
},
hasValidationErrors: function hasValidationErrors () {
var this$1 = this;
return new Promise(function (resolve) {
this$1.$nextTick(function () {
this$1.pendingValidation.then(function () { return resolve(!!this$1.validationErrors.length); });
});
})
}
}
};
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-has-errors": _vm.hasErrors,
"data-is-showing-errors": _vm.hasErrors && _vm.showFieldErrors,
"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(),
_vm._v(" "),
_vm.showFieldErrors
? _c("FormulateInputErrors", { attrs: { errors: _vm.mergedErrors } })
: _vm._e()
],
1
)
};
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
);
2019-10-09 06:54:16 +03:00
//
var script$1 = {
provide: function provide () {
return {
formulateFormSetter: this.setFieldValue,
formulateFormRegister: this.register,
getFormValues: this.getFormValues
2019-10-09 06:54:16 +03:00
}
},
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: {},
internalFormModelProxy: {}
2019-10-09 06:54:16 +03:00
}
},
computed: {
2019-10-30 06:33:31 +03:00
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.internalFormModelProxy[field]) &&
!shallowEqualObjects(newValue[field], this.registry[field].internalModelProxy[field])
) {
this.setFieldValue(field, newValue[field]);
2019-10-30 06:33:31 +03:00
this.registry[field].context.model = newValue[field];
}
}
}
},
deep: true,
immediate: false
}
},
created: function created () {
if (this.$options.propsData.hasOwnProperty('formulateValue')) {
this.internalFormModelProxy = Object.assign({}, this.formulateValue);
2019-10-09 06:54:16 +03:00
}
},
methods: {
setFieldValue: function setFieldValue (field, value) {
var obj;
Object.assign(this.internalFormModelProxy, ( obj = {}, obj[field] = value, obj ));
this.$emit('input', Object.assign({}, this.internalFormModelProxy));
2019-10-09 06:54:16 +03:00
},
register: function register (field, component) {
this.registry[field] = component;
2019-10-30 06:33:31 +03:00
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);
2019-10-30 06:33:31 +03:00
}
},
formSubmitted: function formSubmitted () {
// perform validation here
this.$emit('submit', this.formModel);
},
getFormValues: function getFormValues () {
return this.internalFormModelProxy
2019-10-09 06:54:16 +03:00
}
}
};
/* script */
2019-10-09 06:54:16 +03:00
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;
2019-10-09 06:54:16 +03:00
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,
2019-10-09 06:54:16 +03:00
__vue_script__$1,
__vue_scope_id__$1,
__vue_is_functional_template__$1,
__vue_module_identifier__$1,
false,
undefined,
undefined,
undefined
);
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
2019-10-09 06:54:16 +03:00
var script$2 = {
props: {
errors: {
type: [Boolean, Array],
required: true
}
}
};
/* 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 _vm.errors.length
? _c(
"ul",
{ staticClass: "formulate-input-errors" },
_vm._l(_vm.errors, function(error) {
return _c("li", {
key: error,
staticClass: "formulate-input-error",
domProps: { innerHTML: _vm._s(error) }
})
}),
0
)
: _vm._e()
};
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 FormulateInputErrors = 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
);
//
//
//
//
//
//
//
//
//
//
//
//
//
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$3 = {
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__$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-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__$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 FormulateInputGroup = 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
);
/**
* 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 () {
2019-10-09 06:54:16 +03:00
return !!this.context.model
}
}
};
//
var script$4 = {
name: 'FormulateInputBox',
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",
{
class:
"formulate-input-element formulate-input-element--" + _vm.context.type,
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: {
blur: _vm.context.blurHandler,
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: {
blur: _vm.context.blurHandler,
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: {
blur: _vm.context.blurHandler,
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__$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 FormulateInputBox = 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: 'FormulateInputText',
mixins: [FormulateInputMixin]
};
/* 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",
{
class:
"formulate-input-element formulate-input-element--" + _vm.context.type,
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: {
checked: Array.isArray(_vm.context.model)
? _vm._i(_vm.context.model, null) > -1
: _vm.context.model
},
on: {
blur: _vm.context.blurHandler,
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: {
blur: _vm.context.blurHandler,
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: {
blur: _vm.context.blurHandler,
input: function($event) {
if ($event.target.composing) {
return
}
_vm.$set(_vm.context, "model", $event.target.value);
}
}
},
"input",
_vm.attributes,
false
)
)
]
)
};
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 FormulateInputText = 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: 'FormulateFiles',
props: {
files: {
type: FileUpload,
required: true
}
},
computed: {
fileUploads: function fileUploads () {
return this.files.files || []
}
}
};
/* 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 _vm.fileUploads.length
? _c(
"ul",
{ staticClass: "formulate-files" },
_vm._l(_vm.fileUploads, function(file) {
return _c(
"li",
{ key: file.uuid, attrs: { "data-has-error": !!file.error } },
[
_c("div", { staticClass: "formulate-file" }, [
_c("div", {
staticClass: "formualte-file-name",
domProps: { textContent: _vm._s(file.name) }
}),
_vm._v(" "),
file.progress !== false
? _c(
"div",
{
staticClass: "formulate-file-progress",
attrs: {
"data-just-finished": file.justFinished,
"data-is-finished":
!file.justFinished && file.complete
}
},
[
_c("div", {
staticClass: "formulate-file-progress-inner",
style: { width: file.progress + "%" }
})
]
)
: _vm._e(),
_vm._v(" "),
(file.complete && !file.justFinished) || file.progress === false
? _c("div", {
staticClass: "formulate-file-remove",
on: { click: file.removeFile }
})
: _vm._e()
]),
_vm._v(" "),
file.error
? _c("div", {
staticClass: "formulate-file-upload-error",
domProps: { textContent: _vm._s(file.error) }
})
: _vm._e()
]
)
}),
0
)
: _vm._e()
};
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 FormulateFiles = 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
);
//
var script$7 = {
name: 'FormulateInputFile',
components: {
FormulateFiles: FormulateFiles
},
mixins: [FormulateInputMixin],
data: function data () {
return {
isOver: false
}
},
computed: {
hasFiles: function hasFiles () {
return !!(this.context.model instanceof FileUpload && this.context.model.files.length)
}
},
mounted: function mounted () {
// Add a listener to the window to prevent drag/drops that miss the dropzone
// from opening the file and navigating the user away from the page.
if (window && this.context.preventWindowDrops) {
window.addEventListener('dragover', this.preventDefault);
window.addEventListener('drop', this.preventDefault);
}
},
destroyed: function destroyed () {
if (window && this.context.preventWindowDrops) {
window.removeEventListener('dragover', this.preventDefault);
window.removeEventListener('drop', this.preventDefault);
}
},
methods: {
preventDefault: function preventDefault (e) {
if (e.target.tagName !== 'INPUT' && e.target.getAttribute('type') !== 'file') {
e = e || event;
e.preventDefault();
}
},
handleFile: function handleFile () {
this.isOver = false;
var input = this.$refs.file;
if (input.files.length) {
this.context.model = this.$formulate.createUpload(input, this.context);
}
this.attemptImmediateUpload();
},
attemptImmediateUpload: function attemptImmediateUpload () {
var this$1 = this;
if (this.context.uploadBehavior === 'live' &&
this.context.model instanceof FileUpload) {
this.context.hasValidationErrors().then(function (errors) {
console.log('validation errors', errors);
if (!errors) {
this$1.context.model.upload();
}
});
}
},
handleDragOver: function handleDragOver (e) {
e.preventDefault();
this.isOver = true;
},
handleDragLeave: function handleDragLeave (e) {
e.preventDefault();
this.isOver = false;
}
}
};
/* script */
var __vue_script__$7 = script$7;
/* template */
var __vue_render__$7 = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
"div",
{
class:
"formulate-input-element formulate-input-element--" + _vm.context.type,
attrs: { "data-type": _vm.context.type, "data-has-files": _vm.hasFiles }
},
[
_c(
"div",
{
staticClass: "formulate-input-upload-area",
attrs: { "data-has-files": _vm.hasFiles }
},
[
_c(
"input",
_vm._b(
{
ref: "file",
attrs: { "data-is-drag-hover": _vm.isOver, type: "file" },
on: {
blur: _vm.context.blurHandler,
change: _vm.handleFile,
dragover: _vm.handleDragOver,
dragleave: _vm.handleDragLeave
}
},
"input",
_vm.attributes,
false
)
),
_vm._v(" "),
_c("div", {
directives: [
{
name: "show",
rawName: "v-show",
value: !_vm.hasFiles,
expression: "!hasFiles"
}
],
staticClass: "formulate-input-upload-area-mask"
}),
_vm._v(" "),
_vm.hasFiles
? _c("FormulateFiles", { attrs: { files: _vm.context.model } })
: _vm._e()
],
1
)
]
)
};
var __vue_staticRenderFns__$7 = [];
__vue_render__$7._withStripped = true;
/* style */
var __vue_inject_styles__$7 = undefined;
/* scoped */
var __vue_scope_id__$7 = undefined;
/* module identifier */
var __vue_module_identifier__$7 = undefined;
/* functional template */
var __vue_is_functional_template__$7 = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var FormulateInputFile = normalizeComponent(
{ render: __vue_render__$7, staticRenderFns: __vue_staticRenderFns__$7 },
__vue_inject_styles__$7,
__vue_script__$7,
__vue_scope_id__$7,
__vue_is_functional_template__$7,
__vue_module_identifier__$7,
false,
undefined,
undefined,
undefined
);
//
var script$8 = {
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__$8 = script$8;
/* template */
var __vue_render__$8 = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
"div",
{
class:
"formulate-input-element formulate-input-element--" + _vm.context.type,
attrs: { "data-type": _vm.context.type }
},
[
_c(
"select",
_vm._b(
{
directives: [
{
name: "model",
rawName: "v-model",
value: _vm.context.model,
expression: "context.model"
}
],
attrs: { "data-placeholder-selected": _vm.placeholderSelected },
on: {
blur: _vm.context.blurHandler,
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__$8 = [];
__vue_render__$8._withStripped = true;
/* style */
var __vue_inject_styles__$8 = undefined;
/* scoped */
var __vue_scope_id__$8 = undefined;
/* module identifier */
var __vue_module_identifier__$8 = undefined;
/* functional template */
var __vue_is_functional_template__$8 = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var FormulateInputSelect = normalizeComponent(
{ render: __vue_render__$8, staticRenderFns: __vue_staticRenderFns__$8 },
__vue_inject_styles__$8,
__vue_script__$8,
__vue_scope_id__$8,
__vue_is_functional_template__$8,
__vue_module_identifier__$8,
false,
undefined,
undefined,
undefined
);
//
var script$9 = {
name: 'FormulateInputSlider',
mixins: [FormulateInputMixin]
};
/* script */
var __vue_script__$9 = script$9;
/* template */
var __vue_render__$9 = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
"div",
{
class:
"formulate-input-element formulate-input-element--" + _vm.context.type,
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: {
checked: Array.isArray(_vm.context.model)
? _vm._i(_vm.context.model, null) > -1
: _vm.context.model
},
on: {
blur: _vm.context.blurHandler,
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: {
blur: _vm.context.blurHandler,
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: {
blur: _vm.context.blurHandler,
input: function($event) {
if ($event.target.composing) {
return
}
_vm.$set(_vm.context, "model", $event.target.value);
}
}
},
"input",
_vm.attributes,
false
)
)
]
)
};
var __vue_staticRenderFns__$9 = [];
__vue_render__$9._withStripped = true;
/* style */
var __vue_inject_styles__$9 = undefined;
/* scoped */
var __vue_scope_id__$9 = undefined;
/* module identifier */
var __vue_module_identifier__$9 = undefined;
/* functional template */
var __vue_is_functional_template__$9 = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var FormulateInputSlider = normalizeComponent(
{ render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
__vue_inject_styles__$9,
__vue_script__$9,
__vue_scope_id__$9,
__vue_is_functional_template__$9,
__vue_module_identifier__$9,
false,
undefined,
undefined,
undefined
);
//
var script$a = {
name: 'FormulateInputTextArea',
mixins: [FormulateInputMixin]
};
/* script */
var __vue_script__$a = script$a;
/* template */
var __vue_render__$a = 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",
attrs: { "data-type": "textarea" }
},
[
_c(
"textarea",
_vm._b(
{
directives: [
{
name: "model",
rawName: "v-model",
value: _vm.context.model,
expression: "context.model"
}
],
domProps: { value: _vm.context.model },
on: {
blur: _vm.context.blurHandler,
input: function($event) {
if ($event.target.composing) {
return
}
_vm.$set(_vm.context, "model", $event.target.value);
}
}
},
"textarea",
_vm.attributes,
false
)
)
]
)
};
var __vue_staticRenderFns__$a = [];
__vue_render__$a._withStripped = true;
/* style */
var __vue_inject_styles__$a = undefined;
/* scoped */
var __vue_scope_id__$a = undefined;
/* module identifier */
var __vue_module_identifier__$a = undefined;
/* functional template */
var __vue_is_functional_template__$a = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var FormulateInputTextArea = normalizeComponent(
{ render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
__vue_inject_styles__$a,
__vue_script__$a,
__vue_scope_id__$a,
__vue_is_functional_template__$a,
__vue_module_identifier__$a,
false,
undefined,
undefined,
undefined
);
/**
* The base formulate library.
*/
var Formulate = function Formulate () {
this.defaults = {
components: {
FormulateForm: FormulateForm,
FormulateInput: FormulateInput,
FormulateInputErrors: FormulateInputErrors,
FormulateInputBox: FormulateInputBox,
FormulateInputText: FormulateInputText,
FormulateInputFile: FormulateInputFile,
FormulateInputGroup: FormulateInputGroup,
FormulateInputSelect: FormulateInputSelect,
FormulateInputSlider: FormulateInputSlider,
FormulateInputTextArea: FormulateInputTextArea
},
library: library,
rules: rules,
locale: 'en',
uploader: fauxUploader,
uploadJustCompleteDuration: 1000,
locales: {
en: en
}
};
};
/**
* Install vue formulate, and register its 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
};
/**
* Get validation rules.
* @return {object} object of validation functions
*/
Formulate.prototype.rules = function rules () {
return this.options.rules
};
/**
* Get the validation message for a particular error.
*/
Formulate.prototype.validationMessage = function validationMessage (rule, validationContext) {
var generators = this.options.locales[this.options.locale];
if (generators.hasOwnProperty(rule)) {
return generators[rule](validationContext)
} else if (rule[0] === '_' && generators.hasOwnProperty(rule.substr(1))) {
return generators[rule.substr(1)](validationContext)
}
if (generators.hasOwnProperty('default')) {
return generators.default(validationContext)
}
return 'This field does not have a valid value'
};
/**
* Get the file uploader.
*/
Formulate.prototype.getUploader = function getUploader () {
return this.options.uploader || false
};
/**
* Create a new instance of an upload.
*/
Formulate.prototype.createUpload = function createUpload (fileList, context) {
return new FileUpload(fileList, context, this.options)
};
var Formulate$1 = new Formulate();
export default Formulate$1;