1
0
mirror of synced 2024-11-26 23:36:02 +03:00
vue-formulario/dist/formulate.min.js
2020-01-28 12:12:08 -05:00

3208 lines
87 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
'use strict';
isUrl = isUrl && isUrl.hasOwnProperty('default') ? isUrl['default'] : isUrl;
nanoid = nanoid && nanoid.hasOwnProperty('default') ? nanoid['default'] : nanoid;
isPlainObject = isPlainObject && isPlainObject.hasOwnProperty('default') ? isPlainObject['default'] : isPlainObject;
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,
path: false,
removeFile: removeFile.bind(this$1),
previewData: false
});
};
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;
}
};
/**
* load image previews for all uploads.
*/
FileUpload.prototype.loadPreviews = function loadPreviews () {
this.files.map(function (file) {
console.log(file.type);
if (!file.previewData && window && window.FileReader && /^image\//.test(file.file.type)) {
var reader = new FileReader();
reader.onload = function (e) { return Object.assign(file, { previewData: e.target.result }); };
reader.readAsDataURL(file.file);
}
});
};
/**
* 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, force) {
if ( minimum === void 0 ) minimum = 1;
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
})())
},
/**
* 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 be 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();
/**
* Create a recursive timeout that advances the progress.
*/
var advance = function () { return setTimeout(function () {
var elapsed = performance.now() - start;
var currentProgress = Math.min(100, Math.round(elapsed / totalTime * 100));
progress(currentProgress);
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,
name: this.nameOrFallback,
classification: this.classification,
component: this.component,
id: this.id || this.defaultId,
hasLabel: (this.label && this.classification !== 'button'),
label: this.label,
labelPosition: this.logicalLabelPosition,
attributes: this.elementAttributes,
blurHandler: blurHandler.bind(this),
imageBehavior: this.imageBehavior,
uploadUrl: this.uploadUrl,
uploader: this.uploader || this.$formulate.getUploader(),
uploadBehavior: this.uploadBehavior,
preventWindowDrops: this.preventWindowDrops,
hasValidationErrors: this.hasValidationErrors},
this.typeContext))
},
nameOrFallback: nameOrFallback,
typeContext: typeContext,
elementAttributes: elementAttributes,
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
}
/**
* Return the elements name, or select a fallback.
*/
function nameOrFallback () {
if (this.name === true && this.classification !== 'button') {
return ((this.type) + "_" + (this.elementAttributes.id))
}
if (this.name === false || (this.classification === 'button' && this.name === true)) {
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
}
/**
* 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 () {
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 },
getFormValues: { default: function () { return function () { return ({}); }; } }
},
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
},
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
},
imageBehavior: {
type: String,
default: 'preview'
},
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 {
/**
* @todo consider swapping out nanoid for this._uid
*/
defaultId: nanoid(9),
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
},
internalModelProxy: function internalModelProxy (newValue, oldValue) {
this.performValidation();
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);
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) { 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.hasLabel && _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(
"element",
[
_c(
_vm.context.component,
{ tag: "component", attrs: { context: _vm.context } },
[_vm._t("default", null, null, _vm.context)],
2
)
],
null,
_vm.context
),
_vm._v(" "),
_vm.context.hasLabel && _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
);
//
var script$1 = {
provide: function provide () {
return {
formulateFormSetter: this.setFieldValue,
formulateFormRegister: this.register,
getFormValues: this.getFormValues
}
},
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: {}
}
},
computed: {
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]);
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);
}
},
methods: {
setFieldValue: function setFieldValue (field, value) {
var obj;
Object.assign(this.internalFormModelProxy, ( obj = {}, obj[field] = value, obj ));
this.$emit('input', Object.assign({}, this.internalFormModelProxy));
},
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);
},
getFormValues: function getFormValues () {
return this.internalFormModelProxy
}
}
};
/* 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
);
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
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 () {
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
},
imagePreview: {
type: Boolean,
default: false
}
},
computed: {
fileUploads: function fileUploads () {
return this.files.files || []
}
},
watch: {
files: function files () {
if (this.imagePreview) {
this.files.loadPreviews();
}
}
},
mounted: function mounted () {
if (this.imagePreview) {
this.files.loadPreviews();
}
}
};
/* 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,
"data-has-preview": _vm.imagePreview && file.previewData
}
},
[
_c("div", { staticClass: "formulate-file" }, [
_vm.imagePreview && file.previewData
? _c("div", { staticClass: "formulate-file-image-preview" }, [
_c("img", { attrs: { src: file.previewData } })
])
: _vm._e(),
_vm._v(" "),
_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) {
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,
"image-preview":
_vm.context.type === "image" &&
_vm.context.imageBehavior === "preview"
}
})
: _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: 'FormulateInputButton',
mixins: [FormulateInputMixin]
};
/* 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(
"button",
_vm._b({ attrs: { type: _vm.type } }, "button", _vm.attributes, false),
[
_vm._t("default", [
_c("span", {
class: "formulate-input-element--" + _vm.context.type + "--label",
domProps: {
textContent: _vm._s(
_vm.context.value ||
_vm.context.label ||
_vm.context.name ||
"Submit"
)
}
})
])
],
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 FormulateInputButton = 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: '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__$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 }
},
[
_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__$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 FormulateInputSelect = 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: 'FormulateInputSlider',
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",
{
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__$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 FormulateInputSlider = 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
);
//
var script$b = {
name: 'FormulateInputTextArea',
mixins: [FormulateInputMixin]
};
/* script */
var __vue_script__$b = script$b;
/* template */
var __vue_render__$b = 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__$b = [];
__vue_render__$b._withStripped = true;
/* style */
var __vue_inject_styles__$b = undefined;
/* scoped */
var __vue_scope_id__$b = undefined;
/* module identifier */
var __vue_module_identifier__$b = undefined;
/* functional template */
var __vue_is_functional_template__$b = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var FormulateInputTextArea = normalizeComponent(
{ render: __vue_render__$b, staticRenderFns: __vue_staticRenderFns__$b },
__vue_inject_styles__$b,
__vue_script__$b,
__vue_scope_id__$b,
__vue_is_functional_template__$b,
__vue_module_identifier__$b,
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,
FormulateInputButton: FormulateInputButton,
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();
exports.default = Formulate$1;
return exports;
}({}, isUrl, nanoid, isPlainObject));