3364 lines
92 KiB
JavaScript
3364 lines
92 KiB
JavaScript
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 file’s 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) {
|
||
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
|
||
};
|
||
|
||
FileUpload.prototype.toString = function toString () {
|
||
var descriptor = this.files.length ? this.files.length + ' files' : 'empty';
|
||
return ("FileUpload(" + descriptor + ")")
|
||
};
|
||
|
||
/**
|
||
* 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))
|
||
}
|
||
|
||
/**
|
||
* Check if
|
||
* @param {mixed} data
|
||
*/
|
||
function isValueType (data) {
|
||
switch (typeof data) {
|
||
case 'symbol':
|
||
case 'number':
|
||
case 'string':
|
||
case 'boolean':
|
||
case 'undefined':
|
||
return true
|
||
default:
|
||
if (data === null) {
|
||
return true
|
||
}
|
||
return false
|
||
}
|
||
}
|
||
|
||
/**
|
||
* A simple (somewhat non-comprehensive) cloneDeep function, valid for our use
|
||
* case of needing to unbind reactive watchers.
|
||
*/
|
||
function cloneDeep (obj) {
|
||
var newObj = {};
|
||
for (var key in obj) {
|
||
if (obj[key] instanceof FileUpload || isValueType(obj[key])) {
|
||
newObj[key] = obj;
|
||
} else {
|
||
newObj[key] = cloneDeep(obj[key]);
|
||
}
|
||
}
|
||
return newObj
|
||
}
|
||
|
||
/**
|
||
* Library of rules
|
||
*/
|
||
var rules = {
|
||
/**
|
||
* Rule: the value must be "yes", "on", "1", or true
|
||
*/
|
||
accepted: function (ref) {
|
||
var value = ref.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 (ref, compare) {
|
||
var value = ref.value;
|
||
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 (ref, set) {
|
||
var value = ref.value;
|
||
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 (ref, set) {
|
||
var value = ref.value;
|
||
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 (ref, compare) {
|
||
var value = ref.value;
|
||
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 (ref, from, to) {
|
||
var value = ref.value;
|
||
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
|
||
})())
|
||
},
|
||
|
||
/**
|
||
* Confirm that the value of one field is the same as another, mostly used
|
||
* for password confirmations.
|
||
*/
|
||
confirm: function (ref, field) {
|
||
var value = ref.value;
|
||
var getFormValues = ref.getFormValues;
|
||
var name = ref.name;
|
||
|
||
return Promise.resolve((function () {
|
||
var formValues = getFormValues();
|
||
var confirmationFieldName = field;
|
||
if (!confirmationFieldName) {
|
||
confirmationFieldName = /_confirm$/.test(name) ? name.substr(0, name.length - 8) : (name + "_confirm");
|
||
}
|
||
return formValues[confirmationFieldName] === value
|
||
})())
|
||
},
|
||
|
||
/**
|
||
* Rule: ensures the value is a date according to Date.parse(), or a format
|
||
* regex.
|
||
*/
|
||
date: function (ref, format) {
|
||
var value = ref.value;
|
||
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 (ref) {
|
||
var value = ref.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 (ref) {
|
||
var value = ref.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 (ref) {
|
||
var value = ref.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 (ref, minimum, force) {
|
||
var value = ref.value;
|
||
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 (ref) {
|
||
var value = ref.value;
|
||
var types = [], len = arguments.length - 1;
|
||
while ( len-- > 0 ) types[ len ] = arguments[ len + 1 ];
|
||
|
||
return Promise.resolve((function () {
|
||
if (value instanceof FileUpload) {
|
||
var fileList = value.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 (ref, minimum, force) {
|
||
var value = ref.value;
|
||
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 (ref) {
|
||
var value = ref.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 (ref) {
|
||
var value = ref.value;
|
||
|
||
return Promise.resolve(!isNaN(value))
|
||
},
|
||
|
||
/**
|
||
* Rule: must be a value
|
||
*/
|
||
required: function (ref, isRequired) {
|
||
var value = ref.value;
|
||
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 (ref) {
|
||
var value = ref.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.")
|
||
},
|
||
|
||
/**
|
||
* The confirmation field does not match
|
||
*/
|
||
confirm: function (ref) {
|
||
var name = ref.name;
|
||
var args = ref.args;
|
||
|
||
return ((sentence(name)) + " does not match.")
|
||
},
|
||
|
||
/**
|
||
* 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 isn’t 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 || this.formShouldShowErrors) {
|
||
return true
|
||
}
|
||
return this.behavioralErrorVisibility
|
||
}
|
||
|
||
/**
|
||
* Return the element’s 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: [String, Boolean],
|
||
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 || this.value,
|
||
behavioralErrorVisibility: (this.errorBehavior === 'live'),
|
||
formShouldShowErrors: false,
|
||
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, [ {
|
||
value: this$1.context.model,
|
||
getFormValues: this$1.getFormValues.bind(this$1),
|
||
name: this$1.context.name
|
||
} ].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 __vue_component__ = 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 FormSubmission = function FormSubmission (form) {
|
||
this.form = form;
|
||
};
|
||
|
||
/**
|
||
* Determine if the form has any validation errors.
|
||
*
|
||
* @return {Promise} resolves a boolean
|
||
*/
|
||
FormSubmission.prototype.hasValidationErrors = function hasValidationErrors () {
|
||
return this.form.hasValidationErrors()
|
||
};
|
||
|
||
/**
|
||
* Asynchronously generate the values payload of this form.
|
||
* @return {Promise} resolves to json
|
||
*/
|
||
FormSubmission.prototype.values = function values () {
|
||
var this$1 = this;
|
||
|
||
return new Promise(function (resolve, reject) {
|
||
var pending = [];
|
||
var values = cloneDeep(this$1.form.internalModelProxy);
|
||
for (var key in values) {
|
||
if (typeof this$1.form.internalModelProxy[key] === 'object' && this$1.form.internalModelProxy[key] instanceof FileUpload) {
|
||
pending.push(this$1.form.internalModelProxy[key].upload());
|
||
}
|
||
}
|
||
/**
|
||
* @todo - how do we get these uploaded path values back into our data?
|
||
*/
|
||
Promise.all(pending)
|
||
// .then(file => file.path)
|
||
.then(function () { return resolve(values); })
|
||
.catch(function (err) { return reject(err); });
|
||
})
|
||
};
|
||
|
||
//
|
||
|
||
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: {},
|
||
formShouldShowErrors: false
|
||
}
|
||
},
|
||
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 () {
|
||
var this$1 = this;
|
||
|
||
// perform validation here
|
||
this.showErrors();
|
||
var submission = new FormSubmission(this);
|
||
this.$emit('submit-raw', submission);
|
||
submission.hasValidationErrors()
|
||
.then(function (hasErrors) { return hasErrors ? false : submission.values(); })
|
||
.then(function (json) { return json !== false ? this$1.$emit('submit', json) : null; });
|
||
},
|
||
showErrors: function showErrors () {
|
||
for (var fieldName in this.registry) {
|
||
this.registry[fieldName].formShouldShowErrors = true;
|
||
}
|
||
},
|
||
getFormValues: function getFormValues () {
|
||
return this.internalFormModelProxy
|
||
},
|
||
hasValidationErrors: function hasValidationErrors () {
|
||
var resolvers = [];
|
||
for (var fieldName in this.registry) {
|
||
if (typeof this.registry[fieldName].hasValidationErrors === 'function') {
|
||
resolvers.push(this.registry[fieldName].hasValidationErrors());
|
||
}
|
||
}
|
||
return Promise.all(resolvers).then(function (fields) { return !!fields.find(function (hasErrors) { return hasErrors; }); })
|
||
}
|
||
}
|
||
};
|
||
|
||
/* 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 __vue_component__$1 = 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 __vue_component__$2 = 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 __vue_component__$3 = 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 __vue_component__$4 = 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 __vue_component__$5 = 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 __vue_component__$6 = 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: __vue_component__$6
|
||
},
|
||
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 __vue_component__$7 = 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 __vue_component__$8 = 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 __vue_component__$9 = 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 __vue_component__$a = 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 __vue_component__$b = 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: __vue_component__$1,
|
||
FormulateInput: __vue_component__,
|
||
FormulateInputErrors: __vue_component__$2,
|
||
FormulateInputBox: __vue_component__$4,
|
||
FormulateInputText: __vue_component__$5,
|
||
FormulateInputFile: __vue_component__$7,
|
||
FormulateInputGroup: __vue_component__$3,
|
||
FormulateInputButton: __vue_component__$8,
|
||
FormulateInputSelect: __vue_component__$9,
|
||
FormulateInputSlider: __vue_component__$a,
|
||
FormulateInputTextArea: __vue_component__$b
|
||
},
|
||
library: library,
|
||
rules: rules,
|
||
locale: 'en',
|
||
uploader: fauxUploader,
|
||
uploadJustCompleteDuration: 1000,
|
||
locales: {
|
||
en: en
|
||
}
|
||
};
|
||
};
|
||
|
||
/**
|
||
* Install vue formulate, and register it’s components.
|
||
*/
|
||
Formulate.prototype.install = function install (Vue, options) {
|
||
Vue.prototype.$formulate = this;
|
||
this.options = this.extend(this.defaults, options || {});
|
||
for (var componentName in this.options.components) {
|
||
Vue.component(componentName, this.options.components[componentName]);
|
||
}
|
||
Object.freeze(this);
|
||
};
|
||
|
||
/**
|
||
* Create a new object by copying properties of base and extendWith.
|
||
* @param {Object} base
|
||
* @param {Object} extendWith
|
||
*/
|
||
Formulate.prototype.extend = function extend (base, extendWith) {
|
||
var merged = {};
|
||
for (var key in base) {
|
||
if (extendWith.hasOwnProperty(key)) {
|
||
merged[key] = isPlainObject(extendWith[key]) && isPlainObject(base[key])
|
||
? this.extend(base[key], extendWith[key])
|
||
: extendWith[key];
|
||
} else {
|
||
merged[key] = base[key];
|
||
}
|
||
}
|
||
for (var prop in extendWith) {
|
||
if (!merged.hasOwnProperty(prop)) {
|
||
merged[prop] = extendWith[prop];
|
||
}
|
||
}
|
||
return merged
|
||
};
|
||
|
||
/**
|
||
* Determine what "class" of input this element is given the "type".
|
||
* @param {string} type
|
||
*/
|
||
Formulate.prototype.classify = function classify (type) {
|
||
if (this.options.library.hasOwnProperty(type)) {
|
||
return this.options.library[type].classification
|
||
}
|
||
return 'unknown'
|
||
};
|
||
|
||
/**
|
||
* Determine what type of component to render given the "type".
|
||
* @param {string} type
|
||
*/
|
||
Formulate.prototype.component = function component (type) {
|
||
if (this.options.library.hasOwnProperty(type)) {
|
||
return this.options.library[type].component
|
||
}
|
||
return false
|
||
};
|
||
|
||
/**
|
||
* 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.FileUpload = FileUpload;
|
||
exports.default = Formulate$1;
|
||
|
||
return exports;
|
||
|
||
}({}, isUrl, nanoid, isPlainObject));
|