vue-formulario/dist/formulate.esm.js

import isUrl from 'is-url';
import nanoid from 'nanoid';
import isPlainObject from 'is-plain-object';

var library = {
  // === SINGLE LINE TEXT STYLE INPUTS
  text: {
    classification: 'text',
    component: 'FormulateInputText'
  },
  email: {
    classification: 'text',
    component: 'FormulateInputText'
  },
  number: {
    classification: 'text',
    component: 'FormulateInputText'
  },
  color: {
    classification: 'text',
    component: 'FormulateInputText'
  },
  date: {
    classification: 'text',
    component: 'FormulateInputText'
  },
  hidden: {
    classification: 'text',
    component: 'FormulateInputText'
  },
  month: {
    classification: 'text',
    component: 'FormulateInputText'
  },
  password: {
    classification: 'text',
    component: 'FormulateInputText'
  },
  search: {
    classification: 'text',
    component: 'FormulateInputText'
  },
  tel: {
    classification: 'text',
    component: 'FormulateInputText'
  },
  time: {
    classification: 'text',
    component: 'FormulateInputText'
  },
  url: {
    classification: 'text',
    component: 'FormulateInputText'
  },
  week: {
    classification: 'text',
    component: 'FormulateInputText'
  },
  'datetime-local': {
    classification: 'text',
    component: 'FormulateInputText'
  },

  // === SLIDER INPUTS
  range: {
    classification: 'slider',
    component: 'FormulateInputSlider'
  },

  // === MULTI LINE TEXT INPUTS
  textarea: {
    classification: 'textarea',
    component: 'FormulateInputTextArea'
  },

  // === BOX STYLE INPUTS
  checkbox: {
    classification: 'box',
    component: 'FormulateInputBox'
  },
  radio: {
    classification: 'box',
    component: 'FormulateInputBox'
  },

  // === BUTTON STYLE INPUTS
  submit: {
    classification: 'button',
    component: 'FormulateInputButton'
  },
  button: {
    classification: 'button',
    component: 'FormulateInputButton'
  },

  // === SELECT STYLE INPUTS
  select: {
    classification: 'select',
    component: 'FormulateInputSelect'
  },

  // === FILE TYPE

  file: {
    classification: 'file',
    component: 'FormulateInputFile'
  },
  image: {
    classification: 'file',
    component: 'FormulateInputFile'
  }
};

/**
 * The file upload class holds and represents a file’s upload state durring
 * the upload flow.
 */
var FileUpload = function FileUpload (fileList, context, options) {
  this.fileList = fileList;
  this.files = [];
  this.options = options;
  this.setFileList(fileList);
  this.context = context;
};

/**
 * Produce an array of files and alert the callback.
 * @param {FileList}
 */
FileUpload.prototype.setFileList = function setFileList (fileList) {
  for (var i = 0; i < fileList.length; i++) {
    var file = fileList.item(i);
    this.files.push({
      progress: 0,
      name: file.name || 'file-upload',
      file: file,
      uuid: nanoid()
    });
  }
};

/**
 * Check if the file has an.
 */
FileUpload.prototype.hasUploader = function hasUploader () {
  return !!this.context.uploader
};

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 this$1.getUploader(
        file.file,
        function (progress) { file.progress = progress; },
        function (error) { return reject(new Error(error)); },
        this$1.options
      )
    }))
      .then(function (results) { return resolve(results); })
      .catch(function (err) { throw new Error(err) });
  })
};

/**
 * 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) {
        if (files.hasUploader()) {
          return false
        }
        files = files.getFiles();
      }
      if (typeof window !== 'undefined' && typeof FileReader !== 'undefined' && typeof Blob !== 'undefined') {
        for (var i in files) {
          if (!types.includes(files[i].type)) {
            return false
          }
        }
      }
      return true
    })())
  },

  /**
   * Check the minimum value of a particular.
   */
  min: function (value, minimum) {
    if ( minimum === void 0 ) minimum = 1;

    return Promise.resolve((function () {
      minimum = Number(minimum);
      if (!isNaN(value)) {
        value = Number(value);
        return value >= minimum
      }
      if (typeof value === 'string') {
        return value.length >= minimum
      }
      if (Array.isArray(value)) {
        return value.length >= minimum
      }
      return false
    })())
  },

  /**
   * Rule: Value is not in stack.
   */
  not: function (value) {
    var stack = [], len = arguments.length - 1;
    while ( len-- > 0 ) stack[ len ] = arguments[ len + 1 ];

    return Promise.resolve(stack.find(function (item) {
      if (typeof item === 'object') {
        return shallowEqualObjects(item, value)
      }
      return item === value
    }) === undefined)
  },

  /**
   * Rule: checks if the value is only alpha numeric
   */
  number: function (value) {
    return Promise.resolve(!isNaN(value))
  },

  /**
   * Rule: must be a value
   */
  required: function (value, isRequired) {
    if ( isRequired === void 0 ) isRequired = true;

    return Promise.resolve((function () {
      if (!isRequired || ['no', 'false'].includes(isRequired)) {
        return true
      }
      if (Array.isArray(value)) {
        return !!value.length
      }
      if (typeof value === 'string') {
        return !!value
      }
      if (typeof value === 'object') {
        return (!value) ? false : !!Object.keys(value).length
      }
      return true
    })())
  },

  /**
   * Rule: checks if a string is a valid url
   */
  url: function (value) {
    return Promise.resolve(isUrl(value))
  }
};

/**
 * Validation error message generators.
 */
var en = {

  /**
   * Valid accepted value.
   */
  accepted: function (ref) {
    var name = ref.name;

    return ("Please accept the " + name + ".")
  },

  /**
   * The date is not after.
   */
  after: function (ref) {
    var name = ref.name;
    var args = ref.args;

    if (Array.isArray(args) && args.length) {
      return ((sentence(name)) + " must be after " + (args[0]) + ".")
    }
    return ((sentence(name)) + " must be a later date.")
  },

  /**
   * The value is not a letter.
   */
  alpha: function (ref) {
    var name = ref.name;

    return ((sentence(name)) + " can only contain alphabetical characters.")
  },

  /**
   * Rule: checks if the value is alpha numeric
   */
  alphanumeric: function (ref) {
    var name = ref.name;

    return ((sentence(name)) + " can only contain letters and numbers.")
  },

  /**
   * The date is not before.
   */
  before: function (ref) {
    var name = ref.name;
    var args = ref.args;

    if (Array.isArray(args) && args.length) {
      return ((sentence(name)) + " must be before " + (args[0]) + ".")
    }
    return ((sentence(name)) + " must be an earlier date.")
  },

  /**
   * The value is not between two numbers or lengths
   */
  between: function (ref) {
    var name = ref.name;
    var value = ref.value;
    var args = ref.args;

    if (!isNaN(value)) {
      return ((sentence(name)) + " must be between " + (args[0]) + " and " + (args[1]) + ".")
    }
    return ((sentence(name)) + " must be between " + (args[0]) + " and " + (args[1]) + " characters long.")
  },

  /**
   * Is not a valid date.
   */
  date: function (ref) {
    var name = ref.name;
    var args = ref.args;

    if (Array.isArray(args) && args.length) {
      return ((sentence(name)) + " is not a valid, please use the format " + (args[0]))
    }
    return ((sentence(name)) + " is not a valid date.")
  },

  /**
   * The default render method for error messages.
   */
  default: function (ref) {
    var name = ref.name;

    return "This field 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 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;
    var start = performance.now();
    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) {
        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,
      label: this.label,
      labelPosition: this.logicalLabelPosition,
      attributes: this.elementAttributes,
      blurHandler: blurHandler.bind(this),
      showImage: this.showImage,
      uploadUrl: this.uploadUrl,
      uploader: this.uploader || this.$formulate.getUploader(),
      immediateUpload: this.immediateUpload},
      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 element’s name, or select a fallback.
 */
function nameOrFallback () {
  if (this.name === true) {
    return ((this.type) + "_" + (this.elementAttributes.id))
  }
  if (this.name === false) {
    return false
  }
  return this.name
}

/**
 * Determines if this formulate element is v-modeled or not.
 */
function isVmodeled () {
  return !!(this.$options.propsData.hasOwnProperty('formulateValue') &&
    this._events &&
    Array.isArray(this._events.input) &&
    this._events.input.length)
}

/**
 * Given an object or array of options, create an array of objects with label,
 * value, and id.
 * @param {array|object}
 * @return {array}
 */
function createOptionList (options) {
  if (!Array.isArray(options) && options && typeof options === 'object') {
    var optionList = [];
    var that = this;
    for (var value in options) {
      optionList.push({ value: value, label: options[value], id: ((that.elementAttributes.id) + "_" + value) });
    }
    return optionList
  } else if (Array.isArray(options) && !options.length) {
    return [{ value: this.value, label: (this.label || this.name), id: this.context.id || nanoid(9) }]
  }
  return options
}

/**
 * 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
    },
    showImage: {
      type: Boolean,
      default: true
    },
    uploadUrl: {
      type: [String, Boolean],
      default: false
    },
    uploader: {
      type: [Function, Object, Boolean],
      default: false
    },
    immediateUpload: {
      type: Boolean,
      default: true
    }
  },
  data: function data () {
    return {
      defaultId: nanoid(9),
      localAttributes: {},
      internalModelProxy: this.formulateValue,
      behavioralErrorVisibility: (this.errorBehavior === 'live'),
      validationErrors: []
    }
  },
  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());
      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; });
    }
  }
};

function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
    if (typeof shadowMode !== 'boolean') {
        createInjectorSSR = createInjector;
        createInjector = shadowMode;
        shadowMode = false;
    }
    // Vue.extend constructor export interop.
    var options = typeof script === 'function' ? script.options : script;
    // render functions
    if (template && template.render) {
        options.render = template.render;
        options.staticRenderFns = template.staticRenderFns;
        options._compiled = true;
        // functional template
        if (isFunctionalTemplate) {
            options.functional = true;
        }
    }
    // scopedId
    if (scopeId) {
        options._scopeId = scopeId;
    }
    var hook;
    if (moduleIdentifier) {
        // server build
        hook = function (context) {
            // 2.3 injection
            context =
                context || // cached call
                    (this.$vnode && this.$vnode.ssrContext) || // stateful
                    (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
            // 2.2 with runInNewContext: true
            if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
                context = __VUE_SSR_CONTEXT__;
            }
            // inject component styles
            if (style) {
                style.call(this, createInjectorSSR(context));
            }
            // register component module identifier for async chunk inference
            if (context && context._registeredComponents) {
                context._registeredComponents.add(moduleIdentifier);
            }
        };
        // used by ssr in case component is cached and beforeCreate
        // never gets called
        options._ssrRegister = hook;
    }
    else if (style) {
        hook = shadowMode
            ? function (context) {
                style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
            }
            : function (context) {
                style.call(this, createInjector(context));
            };
    }
    if (hook) {
        if (options.functional) {
            // register for functional component in vue file
            var originalRender = options.render;
            options.render = function renderWithStyleInjection(h, context) {
                hook.call(context);
                return originalRender(h, context);
            };
        }
        else {
            // inject component registration as beforeCreate hook
            var existing = options.beforeCreate;
            options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
        }
    }
    return script;
}

/* script */
var __vue_script__ = script;

/* template */
var __vue_render__ = function() {
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c(
    "div",
    {
      staticClass: "formulate-input",
      attrs: {
        "data-classification": _vm.classification,
        "data-has-errors": _vm.hasErrors,
        "data-is-showing-errors": _vm.hasErrors && _vm.showFieldErrors,
        "data-type": _vm.type
      }
    },
    [
      _c(
        "div",
        { staticClass: "formulate-input-wrapper" },
        [
          _vm.context.label && _vm.context.labelPosition === "before"
            ? _vm._t(
                "label",
                [
                  _c("label", {
                    staticClass:
                      "formulate-input-label formulate-input-label--before",
                    attrs: { for: _vm.context.attributes.id },
                    domProps: { textContent: _vm._s(_vm.context.label) }
                  })
                ],
                null,
                _vm.context
              )
            : _vm._e(),
          _vm._v(" "),
          _vm._t(
            "default",
            [
              _c(_vm.context.component, {
                tag: "component",
                attrs: { context: _vm.context }
              })
            ],
            null,
            _vm.context
          ),
          _vm._v(" "),
          _vm.context.label && _vm.context.labelPosition === "after"
            ? _vm._t(
                "label",
                [
                  _c("label", {
                    staticClass:
                      "formulate-input-label formulate-input-label--after",
                    attrs: { for: _vm.context.attributes.id },
                    domProps: { textContent: _vm._s(_vm.context.label) }
                  })
                ],
                null,
                _vm.context.label
              )
            : _vm._e()
        ],
        2
      ),
      _vm._v(" "),
      _vm.help
        ? _c("div", {
            staticClass: "formulate-input-help",
            domProps: { textContent: _vm._s(_vm.help) }
          })
        : _vm._e(),
      _vm._v(" "),
      _vm.showFieldErrors
        ? _c("FormulateInputErrors", { attrs: { errors: _vm.mergedErrors } })
        : _vm._e()
    ],
    1
  )
};
var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;

  /* style */
  var __vue_inject_styles__ = undefined;
  /* scoped */
  var __vue_scope_id__ = undefined;
  /* module identifier */
  var __vue_module_identifier__ = undefined;
  /* functional template */
  var __vue_is_functional_template__ = false;
  /* style inject */
  
  /* style inject SSR */
  
  /* style inject shadow dom */
  

  
  var FormulateInput = normalizeComponent(
    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
    __vue_inject_styles__,
    __vue_script__,
    __vue_scope_id__,
    __vue_is_functional_template__,
    __vue_module_identifier__,
    false,
    undefined,
    undefined,
    undefined
  );

//

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
    }
  },
  computed: {
    fileUploads: function fileUploads () {
      return this.files.files || []
    }
  }
};

/* script */
var __vue_script__$6 = script$6;

/* template */
var __vue_render__$6 = function() {
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _vm.fileUploads.length
    ? _c(
        "ul",
        { staticClass: "formulate-files" },
        _vm._l(_vm.fileUploads, function(file) {
          return _c("li", { key: file.uuid, staticClass: "formulate-file" }, [
            _c("span", {
              staticClass: "formualte-file-name",
              domProps: { textContent: _vm._s(file.name) }
            }),
            _vm._v(" "),
            file.progress > 0 && file.progress < 100
              ? _c("span", {
                  domProps: { textContent: _vm._s(file.progress + "%") }
                })
              : _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)
    }
  },
  methods: {
    handleFile: function handleFile () {
      var input = this.$refs.file;
      if (input.files.length) {
        this.context.model = this.$formulate.createUpload(input.files, this.context);
      }
      if (this.context.immediateUpload && this.context.model instanceof FileUpload) {
        this.context.model.upload();
      }
    },
    handleDragOver: function handleDragOver (e) {
      e.preventDefault();
      this.isOver = true;
    },
    handleDragLeave: function handleDragLeave (e) {
      e.preventDefault();
      this.isOver = false;
    }
  }
};

/* script */
var __vue_script__$7 = script$7;

/* template */
var __vue_render__$7 = function() {
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c(
    "div",
    {
      class:
        "formulate-input-element formulate-input-element--" + _vm.context.type,
      attrs: { "data-type": _vm.context.type, "data-has-files": _vm.hasFiles }
    },
    [
      _c(
        "div",
        {
          staticClass: "formulate-input-upload-area",
          attrs: { "data-has-files": _vm.hasFiles }
        },
        [
          _c(
            "input",
            _vm._b(
              {
                ref: "file",
                attrs: { "data-is-drag-hover": _vm.isOver, type: "file" },
                on: {
                  blur: _vm.context.blurHandler,
                  change: _vm.handleFile,
                  dragover: _vm.handleDragOver,
                  dragleave: _vm.handleDragLeave
                }
              },
              "input",
              _vm.attributes,
              false
            )
          ),
          _vm._v(" "),
          _c("div", {
            directives: [
              {
                name: "show",
                rawName: "v-show",
                value: !_vm.hasFiles,
                expression: "!hasFiles"
              }
            ],
            staticClass: "formulate-input-upload-area-mask"
          }),
          _vm._v(" "),
          _vm.hasFiles
            ? _c("FormulateFiles", { attrs: { files: _vm.context.model } })
            : _vm._e()
        ],
        1
      )
    ]
  )
};
var __vue_staticRenderFns__$7 = [];
__vue_render__$7._withStripped = true;

  /* style */
  var __vue_inject_styles__$7 = undefined;
  /* scoped */
  var __vue_scope_id__$7 = undefined;
  /* module identifier */
  var __vue_module_identifier__$7 = undefined;
  /* functional template */
  var __vue_is_functional_template__$7 = false;
  /* style inject */
  
  /* style inject SSR */
  
  /* style inject shadow dom */
  

  
  var FormulateInputFile = normalizeComponent(
    { render: __vue_render__$7, staticRenderFns: __vue_staticRenderFns__$7 },
    __vue_inject_styles__$7,
    __vue_script__$7,
    __vue_scope_id__$7,
    __vue_is_functional_template__$7,
    __vue_module_identifier__$7,
    false,
    undefined,
    undefined,
    undefined
  );

//

var script$8 = {
  name: 'FormulateInputSelect',
  mixins: [FormulateInputMixin],
  computed: {
    options: function options () {
      return this.context.options || {}
    },
    optionGroups: function optionGroups () {
      return this.context.optionGroups || false
    },
    placeholderSelected: function placeholderSelected () {
      return !!(!this.hasValue && this.context.attributes && this.context.attributes.placeholder)
    }
  }
};

/* script */
var __vue_script__$8 = script$8;

/* template */
var __vue_render__$8 = function() {
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c(
    "div",
    {
      class:
        "formulate-input-element formulate-input-element--" + _vm.context.type,
      attrs: { "data-type": _vm.context.type }
    },
    [
      _c(
        "select",
        _vm._b(
          {
            directives: [
              {
                name: "model",
                rawName: "v-model",
                value: _vm.context.model,
                expression: "context.model"
              }
            ],
            attrs: { "data-placeholder-selected": _vm.placeholderSelected },
            on: {
              blur: _vm.context.blurHandler,
              change: function($event) {
                var $$selectedVal = Array.prototype.filter
                  .call($event.target.options, function(o) {
                    return o.selected
                  })
                  .map(function(o) {
                    var val = "_value" in o ? o._value : o.value;
                    return val
                  });
                _vm.$set(
                  _vm.context,
                  "model",
                  $event.target.multiple ? $$selectedVal : $$selectedVal[0]
                );
              }
            }
          },
          "select",
          _vm.attributes,
          false
        ),
        [
          _vm.context.placeholder
            ? _c(
                "option",
                {
                  attrs: { value: "", disabled: "" },
                  domProps: { selected: !_vm.hasValue }
                },
                [
                  _vm._v(
                    "\n      " + _vm._s(_vm.context.placeholder) + "\n    "
                  )
                ]
              )
            : _vm._e(),
          _vm._v(" "),
          !_vm.optionGroups
            ? _vm._l(_vm.options, function(option) {
                return _c(
                  "option",
                  _vm._b(
                    {
                      key: option.id,
                      domProps: {
                        value: option.value,
                        textContent: _vm._s(option.label)
                      }
                    },
                    "option",
                    option.attributes || {},
                    false
                  )
                )
              })
            : _vm._l(_vm.optionGroups, function(subOptions, label) {
                return _c(
                  "optgroup",
                  { key: label, attrs: { label: label } },
                  _vm._l(subOptions, function(option) {
                    return _c(
                      "option",
                      _vm._b(
                        {
                          key: option.id,
                          domProps: {
                            value: option.value,
                            textContent: _vm._s(option.label)
                          }
                        },
                        "option",
                        option.attributes || {},
                        false
                      )
                    )
                  }),
                  0
                )
              })
        ],
        2
      )
    ]
  )
};
var __vue_staticRenderFns__$8 = [];
__vue_render__$8._withStripped = true;

  /* style */
  var __vue_inject_styles__$8 = undefined;
  /* scoped */
  var __vue_scope_id__$8 = undefined;
  /* module identifier */
  var __vue_module_identifier__$8 = undefined;
  /* functional template */
  var __vue_is_functional_template__$8 = false;
  /* style inject */
  
  /* style inject SSR */
  
  /* style inject shadow dom */
  

  
  var FormulateInputSelect = normalizeComponent(
    { render: __vue_render__$8, staticRenderFns: __vue_staticRenderFns__$8 },
    __vue_inject_styles__$8,
    __vue_script__$8,
    __vue_scope_id__$8,
    __vue_is_functional_template__$8,
    __vue_module_identifier__$8,
    false,
    undefined,
    undefined,
    undefined
  );

//

var script$9 = {
  name: 'FormulateInputSlider',
  mixins: [FormulateInputMixin]
};

/* script */
var __vue_script__$9 = script$9;

/* template */
var __vue_render__$9 = function() {
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c(
    "div",
    {
      class:
        "formulate-input-element formulate-input-element--" + _vm.context.type,
      attrs: { "data-type": _vm.context.type }
    },
    [
      _vm.type === "checkbox"
        ? _c(
            "input",
            _vm._b(
              {
                directives: [
                  {
                    name: "model",
                    rawName: "v-model",
                    value: _vm.context.model,
                    expression: "context.model"
                  }
                ],
                attrs: { type: "checkbox" },
                domProps: {
                  checked: Array.isArray(_vm.context.model)
                    ? _vm._i(_vm.context.model, null) > -1
                    : _vm.context.model
                },
                on: {
                  blur: _vm.context.blurHandler,
                  change: function($event) {
                    var $$a = _vm.context.model,
                      $$el = $event.target,
                      $$c = $$el.checked ? true : false;
                    if (Array.isArray($$a)) {
                      var $$v = null,
                        $$i = _vm._i($$a, $$v);
                      if ($$el.checked) {
                        $$i < 0 &&
                          _vm.$set(_vm.context, "model", $$a.concat([$$v]));
                      } else {
                        $$i > -1 &&
                          _vm.$set(
                            _vm.context,
                            "model",
                            $$a.slice(0, $$i).concat($$a.slice($$i + 1))
                          );
                      }
                    } else {
                      _vm.$set(_vm.context, "model", $$c);
                    }
                  }
                }
              },
              "input",
              _vm.attributes,
              false
            )
          )
        : _vm.type === "radio"
        ? _c(
            "input",
            _vm._b(
              {
                directives: [
                  {
                    name: "model",
                    rawName: "v-model",
                    value: _vm.context.model,
                    expression: "context.model"
                  }
                ],
                attrs: { type: "radio" },
                domProps: { checked: _vm._q(_vm.context.model, null) },
                on: {
                  blur: _vm.context.blurHandler,
                  change: function($event) {
                    return _vm.$set(_vm.context, "model", null)
                  }
                }
              },
              "input",
              _vm.attributes,
              false
            )
          )
        : _c(
            "input",
            _vm._b(
              {
                directives: [
                  {
                    name: "model",
                    rawName: "v-model",
                    value: _vm.context.model,
                    expression: "context.model"
                  }
                ],
                attrs: { type: _vm.type },
                domProps: { value: _vm.context.model },
                on: {
                  blur: _vm.context.blurHandler,
                  input: function($event) {
                    if ($event.target.composing) {
                      return
                    }
                    _vm.$set(_vm.context, "model", $event.target.value);
                  }
                }
              },
              "input",
              _vm.attributes,
              false
            )
          )
    ]
  )
};
var __vue_staticRenderFns__$9 = [];
__vue_render__$9._withStripped = true;

  /* style */
  var __vue_inject_styles__$9 = undefined;
  /* scoped */
  var __vue_scope_id__$9 = undefined;
  /* module identifier */
  var __vue_module_identifier__$9 = undefined;
  /* functional template */
  var __vue_is_functional_template__$9 = false;
  /* style inject */
  
  /* style inject SSR */
  
  /* style inject shadow dom */
  

  
  var FormulateInputSlider = normalizeComponent(
    { render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
    __vue_inject_styles__$9,
    __vue_script__$9,
    __vue_scope_id__$9,
    __vue_is_functional_template__$9,
    __vue_module_identifier__$9,
    false,
    undefined,
    undefined,
    undefined
  );

//

var script$a = {
  name: 'FormulateInputTextArea',
  mixins: [FormulateInputMixin]
};

/* script */
var __vue_script__$a = script$a;

/* template */
var __vue_render__$a = function() {
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c(
    "div",
    {
      staticClass: "formulate-input-element formulate-input-element--textarea",
      attrs: { "data-type": "textarea" }
    },
    [
      _c(
        "textarea",
        _vm._b(
          {
            directives: [
              {
                name: "model",
                rawName: "v-model",
                value: _vm.context.model,
                expression: "context.model"
              }
            ],
            domProps: { value: _vm.context.model },
            on: {
              blur: _vm.context.blurHandler,
              input: function($event) {
                if ($event.target.composing) {
                  return
                }
                _vm.$set(_vm.context, "model", $event.target.value);
              }
            }
          },
          "textarea",
          _vm.attributes,
          false
        )
      )
    ]
  )
};
var __vue_staticRenderFns__$a = [];
__vue_render__$a._withStripped = true;

  /* style */
  var __vue_inject_styles__$a = undefined;
  /* scoped */
  var __vue_scope_id__$a = undefined;
  /* module identifier */
  var __vue_module_identifier__$a = undefined;
  /* functional template */
  var __vue_is_functional_template__$a = false;
  /* style inject */
  
  /* style inject SSR */
  
  /* style inject shadow dom */
  

  
  var FormulateInputTextArea = normalizeComponent(
    { render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
    __vue_inject_styles__$a,
    __vue_script__$a,
    __vue_scope_id__$a,
    __vue_is_functional_template__$a,
    __vue_module_identifier__$a,
    false,
    undefined,
    undefined,
    undefined
  );

/**
 * The base formulate library.
 */
var Formulate = function Formulate () {
  this.defaults = {
    components: {
      FormulateForm: FormulateForm,
      FormulateInput: FormulateInput,
      FormulateInputErrors: FormulateInputErrors,
      FormulateInputBox: FormulateInputBox,
      FormulateInputText: FormulateInputText,
      FormulateInputFile: FormulateInputFile,
      FormulateInputGroup: FormulateInputGroup,
      FormulateInputSelect: FormulateInputSelect,
      FormulateInputSlider: FormulateInputSlider,
      FormulateInputTextArea: FormulateInputTextArea
    },
    library: library,
    rules: rules,
    locale: 'en',
    uploader: fauxUploader,
    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();

export default Formulate$1;