2019-11-08 01:03:34 +03:00
import isUrl from 'is-url' ;
2019-10-07 17:24:30 +03:00
import isPlainObject from 'is-plain-object' ;
import nanoid from 'nanoid' ;
var library = {
// === SINGLE LINE TEXT STYLE INPUTS
text : {
classification : 'text' ,
component : 'FormulateInputText'
} ,
email : {
classification : 'text' ,
component : 'FormulateInputText'
} ,
number : {
classification : 'text' ,
component : 'FormulateInputText'
} ,
color : {
classification : 'text' ,
component : 'FormulateInputText'
} ,
date : {
classification : 'text' ,
component : 'FormulateInputText'
} ,
hidden : {
classification : 'text' ,
component : 'FormulateInputText'
} ,
month : {
classification : 'text' ,
component : 'FormulateInputText'
} ,
password : {
classification : 'text' ,
component : 'FormulateInputText'
} ,
range : {
classification : 'text' ,
component : 'FormulateInputText'
} ,
search : {
classification : 'text' ,
component : 'FormulateInputText'
} ,
tel : {
classification : 'text' ,
component : 'FormulateInputText'
} ,
time : {
classification : 'text' ,
component : 'FormulateInputText'
} ,
url : {
classification : 'text' ,
component : 'FormulateInputText'
} ,
week : {
classification : 'text' ,
component : 'FormulateInputText'
} ,
'datetime-local' : {
classification : 'text' ,
component : 'FormulateInputText'
} ,
// === MULTI LINE TEXT INPUTS
textarea : {
classification : 'textarea' ,
component : 'FormulateInputTextArea'
} ,
// === BOX STYLE INPUTS
checkbox : {
classification : 'box' ,
component : 'FormulateInputBox'
} ,
radio : {
classification : 'box' ,
component : 'FormulateInputBox'
} ,
// === BUTTON STYLE INPUTS
submit : {
classification : 'button' ,
component : 'FormulateInputButton'
} ,
button : {
classification : 'button' ,
component : 'FormulateInputButton'
} ,
// === SELECT STYLE INPUTS
select : {
classification : 'select' ,
component : 'FormulateInputSelect'
}
} ;
/ * *
* Function to map over an object .
* @ param { Object } obj An object to map over
* @ param { Function } callback
* /
function map ( original , callback ) {
var obj = { } ;
for ( var key in original ) {
obj [ key ] = callback ( key , original [ key ] ) ;
}
return obj
}
/ * *
2019-10-08 20:50:53 +03:00
* Shallow equal .
* @ param { } objA
* @ param { * } objB
2019-10-07 17:24:30 +03:00
* /
2019-10-08 20:50:53 +03:00
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
2019-10-07 17:24:30 +03:00
}
2019-10-08 20:50:53 +03:00
for ( var i = 0 ; i < len ; i ++ ) {
var key = aKeys [ i ] ;
if ( objA [ key ] !== objB [ key ] ) {
return false
}
}
return true
2019-10-07 17:24:30 +03:00
}
2019-11-07 01:17:19 +03:00
/ * *
* 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 [ ]
}
2019-11-14 00:10:17 +03:00
/ * *
* How to add an item .
* @ param { string } item
* /
function sentence ( item ) {
if ( typeof item === 'string' ) {
return item [ 0 ] . toUpperCase ( ) + item . substr ( 1 )
}
return item
}
2019-11-08 01:03:34 +03:00
/ * *
* 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 ) {
2019-11-14 00:10:17 +03:00
rule = rule . map ( function ( r ) { return r ; } ) ; // light clone
2019-11-08 01:03:34 +03:00
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
}
/ * *
* 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 ) )
} ,
/ * *
2019-11-14 00:10:17 +03:00
* Rule : checks if the value is only alpha
2019-11-08 01:03:34 +03:00
* /
alpha : function ( value , set ) {
if ( set === void 0 ) set = 'default' ;
var sets = {
default : /^[a-zA-ZÀ-ÖØ-öø-ÿ]+$/ ,
2019-11-14 00:10:17 +03:00
latin : /^[a-zA-Z]+$/
2019-11-08 01:03:34 +03:00
} ;
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À-ÖØ-öø-ÿ]+$/ ,
2019-11-14 00:10:17 +03:00
latin : /^[a-zA-Z0-9]+$/
2019-11-08 01:03:34 +03:00
} ;
var selectedSet = sets . hasOwnProperty ( set ) ? set : 'default' ;
return Promise . resolve ( sets [ selectedSet ] . test ( value ) )
} ,
2019-11-14 00:10:17 +03:00
/ * *
* 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 ) )
} ,
2019-11-08 01:03:34 +03:00
/ * *
* Rule : checks if the value is between two other values
* /
between : function ( value , from , to ) {
2019-11-14 00:10:17 +03:00
if ( from === void 0 ) from = 0 ;
if ( to === void 0 ) to = 10 ;
2019-11-08 01:03:34 +03:00
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
} ) ( ) )
} ,
2019-11-14 00:10:17 +03:00
/ * *
* Rule : ensures the value is a date according to Date . parse ( )
* /
date : function ( value ) {
return Promise . resolve ( ! isNaN ( Date . parse ( value ) ) )
} ,
2019-11-08 01:03:34 +03:00
/ * *
* Rule : tests
* /
email : function ( value ) {
// eslint-disable-next-line
var isEmail = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i ;
return Promise . resolve ( isEmail . test ( value ) )
} ,
2019-11-14 00:10:17 +03:00
/ * *
* 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 ) {
if ( minimum === void 0 ) minimum = 10 ;
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
} ) ( ) )
} ,
2019-11-08 01:03:34 +03:00
/ * *
* 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 ( 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 ) {
2019-11-14 00:10:17 +03:00
if ( minimum === void 0 ) minimum = 1 ;
2019-11-08 01:03:34 +03:00
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
} ) ( ) )
} ,
/ * *
2019-11-14 00:10:17 +03:00
* Rule : Value is not in stack .
2019-11-08 01:03:34 +03:00
* /
2019-11-14 00:10:17 +03:00
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 ;
2019-11-08 01:03:34 +03:00
return Promise . resolve ( ( function ( ) {
2019-11-14 00:10:17 +03:00
if ( ! isRequired || [ 'no' , 'false' ] . includes ( isRequired ) ) {
return true
}
if ( Array . isArray ( value ) ) {
return ! ! value . length
2019-11-08 01:03:34 +03:00
}
if ( typeof value === 'string' ) {
2019-11-14 00:10:17 +03:00
return ! ! value
2019-11-08 01:03:34 +03:00
}
2019-11-14 00:10:17 +03:00
if ( typeof value === 'object' ) {
return ( ! value ) ? false : ! ! Object . keys ( value ) . length
2019-11-08 01:03:34 +03:00
}
2019-11-14 00:10:17 +03:00
return true
2019-11-08 01:03:34 +03:00
} ) ( ) )
2019-11-14 00:10:17 +03:00
} ,
/ * *
* 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 ;
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 ;
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' ) {
return ( "“" + ( sentence ( value ) ) + "” is not an allowed " + name + "." )
}
return ( ( sentence ( name ) ) + " is not an allowed value." )
} ,
/ * *
* 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 ( ! isNaN ( value ) ) {
return ( name + " must be less than " + ( args [ 0 ] ) + "." )
}
return ( 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 ( ! isNaN ( value ) ) {
return ( name + " must be more than " + ( args [ 0 ] ) + "." )
}
return ( 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."
2019-11-08 01:03:34 +03:00
}
} ;
2019-10-07 17:24:30 +03:00
/ * *
* For a single instance of an input , export all of the context needed to fully
* render that element .
* @ return { object }
* /
2019-10-08 20:50:53 +03:00
var context = {
context : function context ( ) {
return defineModel . call ( this , Object . assign ( { } , { type : this . type ,
value : this . value ,
2019-10-09 06:54:16 +03:00
name : this . nameOrFallback ,
2019-10-08 20:50:53 +03:00
classification : this . classification ,
component : this . component ,
id : this . id || this . defaultId ,
label : this . label ,
labelPosition : this . logicalLabelPosition ,
2019-11-14 00:10:17 +03:00
attributes : this . elementAttributes ,
blurHandler : blurHandler . bind ( this ) } ,
2019-10-08 20:50:53 +03:00
this . typeContext ) )
} ,
2019-10-09 06:54:16 +03:00
nameOrFallback : nameOrFallback ,
2019-10-08 20:50:53 +03:00
typeContext : typeContext ,
elementAttributes : elementAttributes ,
2019-10-30 06:33:31 +03:00
logicalLabelPosition : logicalLabelPosition ,
2019-11-07 01:17:19 +03:00
isVmodeled : isVmodeled ,
2019-11-08 01:03:34 +03:00
mergedErrors : mergedErrors ,
2019-11-14 00:10:17 +03:00
hasErrors : hasErrors ,
showFieldErrors : showFieldErrors ,
mergedValidationName : mergedValidationName
2019-10-08 20:50:53 +03:00
} ;
2019-10-07 17:24:30 +03:00
/ * *
* Given ( this . type ) , return an object to merge with the context
* @ return { object }
2019-10-08 20:50:53 +03:00
* @ return { object }
2019-10-07 17:24:30 +03:00
* /
function typeContext ( ) {
2019-10-08 20:50:53 +03:00
var this $1 = this ;
2019-10-07 17:24:30 +03:00
switch ( this . classification ) {
case 'select' :
return {
2019-10-08 20:50:53 +03:00
options : createOptionList . call ( this , this . options ) ,
optionGroups : this . optionGroups ? map ( this . optionGroups , function ( k , v ) { return createOptionList . call ( this $1 , v ) ; } ) : false ,
2019-10-07 17:24:30 +03:00
placeholder : this . $attrs . placeholder || false
}
case 'group' :
if ( this . options ) {
return {
2019-10-08 20:50:53 +03:00
options : createOptionList . call ( this , this . options )
2019-10-07 17:24:30 +03:00
}
}
break
default :
return { }
}
}
/ * *
* Reducer for attributes that will be applied to each core input element .
* @ return { object }
* /
2019-10-08 20:50:53 +03:00
function elementAttributes ( ) {
var attrs = Object . assign ( { } , this . localAttributes ) ;
2019-10-07 17:24:30 +03:00
if ( this . id ) {
2019-10-08 20:50:53 +03:00
attrs . id = this . id ;
} else {
attrs . id = this . defaultId ;
2019-10-07 17:24:30 +03:00
}
2019-10-08 20:50:53 +03:00
return attrs
2019-10-07 17:24:30 +03:00
}
/ * *
* Determine the a best - guess location for the label ( before or after ) .
* @ return { string } before | after
* /
2019-10-08 20:50:53 +03:00
function logicalLabelPosition ( ) {
2019-10-07 17:24:30 +03:00
if ( this . labelPosition ) {
return this . labelPosition
}
switch ( this . classification ) {
case 'box' :
return 'after'
default :
return 'before'
}
}
2019-11-14 00:10:17 +03:00
/ * *
* The validation label to use .
* /
function mergedValidationName ( ) {
if ( this . validationName ) {
return this . validationName
}
if ( typeof this . name === 'string' ) {
return this . name
}
if ( this . label ) {
return this . label
}
return this . type
}
/ * *
* Determines if the field should show it ' s error ( if it has one )
* @ return { boolean }
* /
function showFieldErrors ( ) {
if ( this . showErrors ) {
return this . showErrors
}
return this . behavioralErrorVisibility
}
2019-10-09 06:54:16 +03:00
/ * *
* Return the 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
}
2019-10-30 06:33:31 +03:00
/ * *
* Determines if this formulate element is v - modeled or not .
* /
function isVmodeled ( ) {
return ! ! ( this . $options . propsData . hasOwnProperty ( 'formulateValue' ) &&
this . _events &&
Array . isArray ( this . _events . input ) &&
this . _events . input . length )
}
2019-10-07 17:24:30 +03:00
/ * *
* 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 ) {
2019-10-08 20:50:53 +03:00
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
2019-10-07 17:24:30 +03:00
} else if ( Array . isArray ( options ) && ! options . length ) {
2019-10-08 20:50:53 +03:00
return [ { value : this . value , label : ( this . label || this . name ) , id : this . context . id || nanoid ( 9 ) } ]
2019-10-07 17:24:30 +03:00
}
return options
}
2019-11-07 01:17:19 +03:00
/ * *
* 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 ; } , [ ] )
}
2019-11-08 01:03:34 +03:00
/ * *
* Does this computed property have errors .
* /
function hasErrors ( ) {
return ! ! this . mergedErrors . length
}
2019-11-14 00:10:17 +03:00
/ * *
* Bound into the context object .
* /
function blurHandler ( ) {
if ( this . errorBehavior === 'blur' ) {
this . behavioralErrorVisibility = true ;
}
}
2019-10-07 17:24:30 +03:00
/ * *
2019-10-08 20:50:53 +03:00
* Defines the model used throughout the existing context .
* @ param { object } context
2019-10-07 17:24:30 +03:00
* /
function defineModel ( context ) {
return Object . defineProperty ( context , 'model' , {
get : modelGetter . bind ( this ) ,
set : modelSetter . bind ( this )
} )
}
/ * *
* Get the value from a model .
* * /
function modelGetter ( ) {
2019-10-30 06:33:31 +03:00
var model = this . isVmodeled ? 'formulateValue' : 'internalModelProxy' ;
if ( this . type === 'checkbox' && ! Array . isArray ( this [ model ] ) && this . options ) {
2019-10-07 17:24:30 +03:00
return [ ]
}
2019-10-30 06:33:31 +03:00
if ( ! this [ model ] ) {
2019-10-07 17:24:30 +03:00
return ''
}
2019-10-30 06:33:31 +03:00
return this [ model ]
2019-10-07 17:24:30 +03:00
}
/ * *
* Set the value from a model .
* * /
function modelSetter ( value ) {
2019-10-30 06:33:31 +03:00
this . internalModelProxy = value ;
2019-10-07 17:24:30 +03:00
this . $emit ( 'input' , value ) ;
2019-10-09 06:54:16 +03:00
if ( this . context . name && typeof this . formulateFormSetter === 'function' ) {
this . formulateFormSetter ( this . context . name , value ) ;
}
2019-10-07 17:24:30 +03:00
}
//
var script = {
name : 'FormulateInput' ,
inheritAttrs : false ,
2019-10-09 06:54:16 +03:00
inject : {
formulateFormSetter : { default : undefined } ,
2019-11-14 00:10:17 +03:00
formulateFormRegister : { default : undefined } ,
getFormValues : { default : function ( ) { return function ( ) { return ( { } ) ; } ; } }
2019-10-09 06:54:16 +03:00
} ,
2019-10-07 17:24:30 +03:00
model : {
prop : 'formulateValue' ,
event : 'input'
} ,
props : {
type : {
type : String ,
default : 'text'
} ,
2019-10-09 06:54:16 +03:00
name : {
type : [ Boolean , String ] ,
default : true
} ,
/* eslint-disable */
2019-10-07 17:24:30 +03:00
formulateValue : {
2019-10-30 06:33:31 +03:00
default : ''
2019-10-07 17:24:30 +03:00
} ,
value : {
default : false
} ,
2019-10-09 06:54:16 +03:00
/* eslint-enable */
2019-10-07 17:24:30 +03:00
options : {
type : [ Object , Array , Boolean ] ,
default : false
} ,
optionGroups : {
type : [ Object , Boolean ] ,
default : false
} ,
id : {
type : [ String , Boolean , Number ] ,
2019-10-08 20:50:53 +03:00
default : false
2019-10-07 17:24:30 +03:00
} ,
label : {
type : [ String , Boolean ] ,
default : false
} ,
labelPosition : {
type : [ String , Boolean ] ,
default : false
} ,
help : {
type : [ String , Boolean ] ,
default : false
2019-10-08 20:50:53 +03:00
} ,
debug : {
type : Boolean ,
default : false
2019-11-07 01:17:19 +03:00
} ,
errors : {
type : [ String , Array , Boolean ] ,
default : false
} ,
2019-11-08 01:03:34 +03:00
validation : {
type : [ String , Boolean , Array ] ,
default : false
} ,
2019-11-14 00:10:17 +03:00
validationName : {
type : [ String , Boolean ] ,
default : false
} ,
error : {
type : [ String , Boolean ] ,
default : false
} ,
errorBehavior : {
2019-11-08 01:03:34 +03:00
type : String ,
default : 'blur' ,
validator : function ( value ) {
return [ 'blur' , 'live' ] . includes ( value )
}
} ,
2019-11-14 00:10:17 +03:00
showErrors : {
type : Boolean ,
2019-11-07 01:17:19 +03:00
default : false
2019-10-07 17:24:30 +03:00
}
} ,
2019-10-08 20:50:53 +03:00
data : function data ( ) {
return {
defaultId : nanoid ( 9 ) ,
2019-10-30 06:33:31 +03:00
localAttributes : { } ,
2019-11-08 01:03:34 +03:00
internalModelProxy : this . formulateValue ,
2019-11-14 00:10:17 +03:00
behavioralErrorVisibility : ( this . errorBehavior === 'live' ) ,
2019-11-08 01:03:34 +03:00
validationErrors : [ ]
2019-10-08 20:50:53 +03:00
}
} ,
computed : Object . assign ( { } , context ,
{ classification : function classification ( ) {
2019-10-07 17:24:30 +03:00
var classification = this . $formulate . classify ( this . type ) ;
return ( classification === 'box' && this . options ) ? 'group' : classification
} ,
component : function component ( ) {
2019-10-08 20:50:53 +03:00
return ( this . classification === 'group' ) ? 'FormulateInputGroup' : this . $formulate . component ( this . type )
} } ) ,
watch : {
'$attrs' : {
handler : function handler ( value ) {
this . updateLocalAttributes ( value ) ;
} ,
deep : true
2019-10-30 06:33:31 +03:00
} ,
internalModelProxy : function internalModelProxy ( newValue , oldValue ) {
2019-11-08 01:03:34 +03:00
this . performValidation ( ) ;
2019-10-30 06:33:31 +03:00
if ( ! this . isVmodeled && ! shallowEqualObjects ( newValue , oldValue ) ) {
this . context . model = newValue ;
}
} ,
formulateValue : function formulateValue ( newValue , oldValue ) {
if ( this . isVmodeled && ! shallowEqualObjects ( newValue , oldValue ) ) {
this . context . model = newValue ;
}
2019-10-08 20:50:53 +03:00
}
} ,
created : function created ( ) {
2019-10-09 06:54:16 +03:00
if ( this . formulateFormRegister && typeof this . formulateFormRegister === 'function' ) {
2019-10-30 06:33:31 +03:00
this . formulateFormRegister ( this . nameOrFallback , this ) ;
2019-10-09 06:54:16 +03:00
}
2019-10-08 20:50:53 +03:00
this . updateLocalAttributes ( this . $attrs ) ;
2019-11-08 01:03:34 +03:00
this . performValidation ( ) ;
2019-10-08 20:50:53 +03:00
} ,
methods : {
updateLocalAttributes : function updateLocalAttributes ( value ) {
if ( ! shallowEqualObjects ( value , this . localAttributes ) ) {
this . localAttributes = value ;
}
2019-11-08 01:03:34 +03:00
} ,
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 ) )
2019-11-14 00:10:17 +03:00
. 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 ( )
} ) ; } )
2019-11-08 01:03:34 +03:00
} )
)
. then ( function ( result ) { return result . filter ( function ( result ) { return result ; } ) ; } )
. then ( function ( errorMessages ) { this $1 . validationErrors = errorMessages ; } ) ;
2019-10-07 17:24:30 +03:00
}
}
} ;
2019-11-01 21:03:48 +03:00
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 ;
2019-10-07 17:24:30 +03:00
}
/* 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 ,
2019-11-08 01:03:34 +03:00
"data-has-errors" : _vm . hasErrors ,
2019-11-14 00:10:17 +03:00
"data-is-showing-errors" : _vm . hasErrors && _vm . showFieldErrors ,
2019-10-07 17:24:30 +03:00
"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" ,
2019-10-08 20:50:53 +03:00
attrs : { for : _vm . context . attributes . id } ,
2019-10-07 17:24:30 +03:00
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" ,
2019-10-08 20:50:53 +03:00
attrs : { for : _vm . context . attributes . id } ,
2019-10-07 17:24:30 +03:00
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 ) }
} )
2019-11-07 01:17:19 +03:00
: _vm . _e ( ) ,
_vm . _v ( " " ) ,
2019-11-14 00:10:17 +03:00
_vm . showFieldErrors
? _c ( "FormulateInputErrors" , { attrs : { errors : _vm . mergedErrors } } )
: _vm . _e ( )
2019-11-07 01:17:19 +03:00
] ,
1
2019-10-07 17:24:30 +03:00
)
} ;
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 */
2019-11-01 21:03:48 +03:00
/* style inject shadow dom */
2019-10-07 17:24:30 +03:00
2019-11-01 21:03:48 +03:00
var FormulateInput = normalizeComponent (
2019-10-07 17:24:30 +03:00
{ render : _ _vue _render _ _ , staticRenderFns : _ _vue _staticRenderFns _ _ } ,
_ _vue _inject _styles _ _ ,
_ _vue _script _ _ ,
_ _vue _scope _id _ _ ,
_ _vue _is _functional _template _ _ ,
_ _vue _module _identifier _ _ ,
2019-11-01 21:03:48 +03:00
false ,
undefined ,
2019-10-07 17:24:30 +03:00
undefined ,
undefined
) ;
2019-10-09 06:54:16 +03:00
//
var script$1 = {
provide : function provide ( ) {
return {
formulateFormSetter : this . setFieldValue ,
2019-11-14 00:10:17 +03:00
formulateFormRegister : this . register ,
getFormValues : this . getFormValues
2019-10-09 06:54:16 +03:00
}
} ,
name : 'FormulateForm' ,
model : {
prop : 'formulateValue' ,
event : 'input'
} ,
props : {
name : {
type : [ String , Boolean ] ,
default : false
} ,
formulateValue : {
type : Object ,
default : function ( ) { return ( { } ) ; }
}
} ,
data : function data ( ) {
return {
2019-11-05 18:52:05 +03:00
registry : { } ,
internalFormModelProxy : { }
2019-10-09 06:54:16 +03:00
}
} ,
computed : {
2019-10-30 06:33:31 +03:00
hasFormulateValue : function hasFormulateValue ( ) {
return this . formulateValue && typeof this . formulateValue === 'object'
} ,
isVmodeled : function isVmodeled ( ) {
return ! ! ( this . $options . propsData . hasOwnProperty ( 'formulateValue' ) &&
this . _events &&
Array . isArray ( this . _events . input ) &&
this . _events . input . length )
}
} ,
watch : {
formulateValue : {
handler : function handler ( newValue , oldValue ) {
if ( this . isVmodeled &&
newValue &&
typeof newValue === 'object'
) {
for ( var field in newValue ) {
2019-11-05 18:52:05 +03:00
if ( this . registry . hasOwnProperty ( field ) &&
! shallowEqualObjects ( newValue [ field ] , this . internalFormModelProxy [ field ] ) &&
! shallowEqualObjects ( newValue [ field ] , this . registry [ field ] . internalModelProxy [ field ] )
) {
this . setFieldValue ( field , newValue [ field ] ) ;
2019-10-30 06:33:31 +03:00
this . registry [ field ] . context . model = newValue [ field ] ;
}
}
}
} ,
2019-11-05 18:52:05 +03:00
deep : true ,
immediate : false
}
} ,
created : function created ( ) {
if ( this . $options . propsData . hasOwnProperty ( 'formulateValue' ) ) {
this . internalFormModelProxy = Object . assign ( { } , this . formulateValue ) ;
2019-10-09 06:54:16 +03:00
}
} ,
methods : {
setFieldValue : function setFieldValue ( field , value ) {
var obj ;
2019-11-05 18:52:05 +03:00
Object . assign ( this . internalFormModelProxy , ( obj = { } , obj [ field ] = value , obj ) ) ;
this . $emit ( 'input' , Object . assign ( { } , this . internalFormModelProxy ) ) ;
2019-10-09 06:54:16 +03:00
} ,
register : function register ( field , component ) {
this . registry [ field ] = component ;
2019-10-30 06:33:31 +03:00
if ( ! component . $options . propsData . hasOwnProperty ( 'formulateValue' ) && this . hasFormulateValue && this . formulateValue [ field ] ) {
// In the case that the form is carrying an initial value and the
// element is not, set it directly.
component . context . model = this . formulateValue [ field ] ;
2019-11-01 21:03:48 +03:00
} else if ( component . $options . propsData . hasOwnProperty ( 'formulateValue' ) && ! shallowEqualObjects ( component . internalModelProxy , this . formulateValue [ field ] ) ) {
this . setFieldValue ( field , component . internalModelProxy ) ;
2019-10-30 06:33:31 +03:00
}
2019-10-31 17:24:18 +03:00
} ,
formSubmitted : function formSubmitted ( ) {
// perform validation here
this . $emit ( 'submit' , this . formModel ) ;
2019-11-14 00:10:17 +03:00
} ,
getFormValues : function getFormValues ( ) {
return this . internalFormModelProxy
2019-10-09 06:54:16 +03:00
}
}
} ;
2019-10-07 17:24:30 +03:00
/* script */
2019-10-09 06:54:16 +03:00
var _ _vue _script _ _$1 = script$1 ;
2019-10-07 17:24:30 +03:00
/* template */
var _ _vue _render _ _$1 = function ( ) {
var _vm = this ;
var _h = _vm . $createElement ;
var _c = _vm . _self . _c || _h ;
2019-10-09 06:54:16 +03:00
return _c (
"form" ,
{
on : {
submit : function ( $event ) {
$event . preventDefault ( ) ;
return _vm . formSubmitted ( $event )
}
}
} ,
[ _vm . _t ( "default" ) ] ,
2
)
2019-10-07 17:24:30 +03:00
} ;
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 */
2019-11-01 21:03:48 +03:00
/* style inject shadow dom */
2019-10-07 17:24:30 +03:00
2019-11-01 21:03:48 +03:00
var FormulateForm = normalizeComponent (
2019-10-07 17:24:30 +03:00
{ render : _ _vue _render _ _$1 , staticRenderFns : _ _vue _staticRenderFns _ _$1 } ,
_ _vue _inject _styles _ _$1 ,
2019-10-09 06:54:16 +03:00
_ _vue _script _ _$1 ,
2019-10-07 17:24:30 +03:00
_ _vue _scope _id _ _$1 ,
_ _vue _is _functional _template _ _$1 ,
_ _vue _module _identifier _ _$1 ,
2019-11-01 21:03:48 +03:00
false ,
undefined ,
2019-10-07 17:24:30 +03:00
undefined ,
undefined
) ;
//
//
//
//
//
//
//
//
//
//
//
//
//
2019-11-07 01:17:19 +03:00
//
//
//
2019-10-07 17:24:30 +03:00
2019-10-09 06:54:16 +03:00
var script$2 = {
2019-11-07 01:17:19 +03:00
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 = {
2019-10-07 17:24:30 +03:00
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 ;
2019-10-08 20:50:53 +03:00
var classification = ref . classification ;
var rest = objectWithoutProperties ( ref , [ "options" , "labelPosition" , "attributes" , "classification" ] ) ;
2019-10-07 17:24:30 +03:00
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 */
2019-11-07 01:17:19 +03:00
var _ _vue _script _ _$3 = script$3 ;
2019-10-07 17:24:30 +03:00
/* template */
2019-11-07 01:17:19 +03:00
var _ _vue _render _ _$3 = function ( ) {
2019-10-07 17:24:30 +03:00
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
)
} ;
2019-11-07 01:17:19 +03:00
var _ _vue _staticRenderFns _ _$3 = [ ] ;
_ _vue _render _ _$3 . _withStripped = true ;
2019-10-07 17:24:30 +03:00
/* style */
2019-11-07 01:17:19 +03:00
var _ _vue _inject _styles _ _$3 = undefined ;
2019-10-07 17:24:30 +03:00
/* scoped */
2019-11-07 01:17:19 +03:00
var _ _vue _scope _id _ _$3 = undefined ;
2019-10-07 17:24:30 +03:00
/* module identifier */
2019-11-07 01:17:19 +03:00
var _ _vue _module _identifier _ _$3 = undefined ;
2019-10-07 17:24:30 +03:00
/* functional template */
2019-11-07 01:17:19 +03:00
var _ _vue _is _functional _template _ _$3 = false ;
2019-10-07 17:24:30 +03:00
/* style inject */
/* style inject SSR */
2019-11-01 21:03:48 +03:00
/* style inject shadow dom */
2019-10-07 17:24:30 +03:00
2019-11-01 21:03:48 +03:00
var FormulateInputGroup = normalizeComponent (
2019-11-07 01:17:19 +03:00
{ 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 ,
2019-11-01 21:03:48 +03:00
false ,
undefined ,
2019-10-07 17:24:30 +03:00
undefined ,
undefined
) ;
/ * *
* Default base for input components .
* /
var FormulateInputMixin = {
props : {
context : {
type : Object ,
required : true
}
} ,
computed : {
type : function type ( ) {
return this . context . type
} ,
id : function id ( ) {
return this . context . id
} ,
attributes : function attributes ( ) {
return this . context . attributes || { }
} ,
hasValue : function hasValue ( ) {
2019-10-09 06:54:16 +03:00
return ! ! this . context . model
2019-10-07 17:24:30 +03:00
}
}
} ;
//
2019-11-07 01:17:19 +03:00
var script$4 = {
2019-10-07 17:24:30 +03:00
name : 'FormulateInputBox' ,
mixins : [ FormulateInputMixin ]
} ;
/* script */
2019-11-07 01:17:19 +03:00
var _ _vue _script _ _$4 = script$4 ;
2019-10-07 17:24:30 +03:00
/* template */
2019-11-07 01:17:19 +03:00
var _ _vue _render _ _$4 = function ( ) {
2019-10-07 17:24:30 +03:00
var _vm = this ;
var _h = _vm . $createElement ;
var _c = _vm . _self . _c || _h ;
return _c (
"div" ,
{
staticClass : "formulate-input-element formulate-input-element--box" ,
attrs : { "data-type" : _vm . context . type }
} ,
[
_vm . type === "checkbox"
? _c (
"input" ,
_vm . _b (
{
directives : [
{
name : "model" ,
rawName : "v-model" ,
value : _vm . context . model ,
expression : "context.model"
}
] ,
attrs : { type : "checkbox" } ,
domProps : {
value : _vm . context . value ,
checked : Array . isArray ( _vm . context . model )
? _vm . _i ( _vm . context . model , _vm . context . value ) > - 1
: _vm . context . model
} ,
on : {
2019-11-14 00:10:17 +03:00
blur : _vm . context . blurHandler ,
2019-10-07 17:24:30 +03:00
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 : {
2019-11-14 00:10:17 +03:00
blur : _vm . context . blurHandler ,
2019-10-07 17:24:30 +03:00
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 : {
2019-11-14 00:10:17 +03:00
blur : _vm . context . blurHandler ,
2019-10-07 17:24:30 +03:00
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 }
} )
]
)
} ;
2019-11-07 01:17:19 +03:00
var _ _vue _staticRenderFns _ _$4 = [ ] ;
_ _vue _render _ _$4 . _withStripped = true ;
2019-10-07 17:24:30 +03:00
/* style */
2019-11-07 01:17:19 +03:00
var _ _vue _inject _styles _ _$4 = undefined ;
2019-10-07 17:24:30 +03:00
/* scoped */
2019-11-07 01:17:19 +03:00
var _ _vue _scope _id _ _$4 = undefined ;
2019-10-07 17:24:30 +03:00
/* module identifier */
2019-11-07 01:17:19 +03:00
var _ _vue _module _identifier _ _$4 = undefined ;
2019-10-07 17:24:30 +03:00
/* functional template */
2019-11-07 01:17:19 +03:00
var _ _vue _is _functional _template _ _$4 = false ;
2019-10-07 17:24:30 +03:00
/* style inject */
/* style inject SSR */
2019-11-01 21:03:48 +03:00
/* style inject shadow dom */
2019-10-07 17:24:30 +03:00
2019-11-01 21:03:48 +03:00
var FormulateInputBox = normalizeComponent (
2019-11-07 01:17:19 +03:00
{ 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 ,
2019-11-01 21:03:48 +03:00
false ,
undefined ,
2019-10-07 17:24:30 +03:00
undefined ,
undefined
) ;
//
2019-11-07 01:17:19 +03:00
var script$5 = {
2019-10-07 17:24:30 +03:00
name : 'FormulateInputText' ,
mixins : [ FormulateInputMixin ]
} ;
/* script */
2019-11-07 01:17:19 +03:00
var _ _vue _script _ _$5 = script$5 ;
2019-10-07 17:24:30 +03:00
/* template */
2019-11-07 01:17:19 +03:00
var _ _vue _render _ _$5 = function ( ) {
2019-10-07 17:24:30 +03:00
var _vm = this ;
var _h = _vm . $createElement ;
var _c = _vm . _self . _c || _h ;
return _c (
"div" ,
{
staticClass : "formulate-input-element formulate-input-element--textarea"
} ,
[
_vm . type === "checkbox"
? _c (
"input" ,
_vm . _b (
{
directives : [
{
name : "model" ,
rawName : "v-model" ,
value : _vm . context . model ,
expression : "context.model"
}
] ,
attrs : { type : "checkbox" } ,
domProps : {
checked : Array . isArray ( _vm . context . model )
? _vm . _i ( _vm . context . model , null ) > - 1
: _vm . context . model
} ,
on : {
2019-11-14 00:10:17 +03:00
blur : _vm . context . blurHandler ,
2019-10-07 17:24:30 +03:00
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 : {
2019-11-14 00:10:17 +03:00
blur : _vm . context . blurHandler ,
2019-10-07 17:24:30 +03:00
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 : {
2019-11-14 00:10:17 +03:00
blur : _vm . context . blurHandler ,
2019-10-07 17:24:30 +03:00
input : function ( $event ) {
if ( $event . target . composing ) {
return
}
_vm . $set ( _vm . context , "model" , $event . target . value ) ;
}
}
} ,
"input" ,
_vm . attributes ,
false
)
)
]
)
} ;
2019-11-07 01:17:19 +03:00
var _ _vue _staticRenderFns _ _$5 = [ ] ;
_ _vue _render _ _$5 . _withStripped = true ;
2019-10-07 17:24:30 +03:00
/* style */
2019-11-07 01:17:19 +03:00
var _ _vue _inject _styles _ _$5 = undefined ;
2019-10-07 17:24:30 +03:00
/* scoped */
2019-11-07 01:17:19 +03:00
var _ _vue _scope _id _ _$5 = undefined ;
2019-10-07 17:24:30 +03:00
/* module identifier */
2019-11-07 01:17:19 +03:00
var _ _vue _module _identifier _ _$5 = undefined ;
2019-10-07 17:24:30 +03:00
/* functional template */
2019-11-07 01:17:19 +03:00
var _ _vue _is _functional _template _ _$5 = false ;
2019-10-07 17:24:30 +03:00
/* style inject */
/* style inject SSR */
2019-11-01 21:03:48 +03:00
/* style inject shadow dom */
2019-10-07 17:24:30 +03:00
2019-11-01 21:03:48 +03:00
var FormulateInputText = normalizeComponent (
2019-11-07 01:17:19 +03:00
{ 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 ,
2019-11-01 21:03:48 +03:00
false ,
undefined ,
2019-10-07 17:24:30 +03:00
undefined ,
undefined
) ;
//
2019-11-07 01:17:19 +03:00
var script$6 = {
2019-10-07 17:24:30 +03:00
name : 'FormulateInputSelect' ,
mixins : [ FormulateInputMixin ] ,
computed : {
options : function options ( ) {
return this . context . options || { }
} ,
optionGroups : function optionGroups ( ) {
return this . context . optionGroups || false
} ,
placeholderSelected : function placeholderSelected ( ) {
2019-10-08 20:50:53 +03:00
return ! ! ( ! this . hasValue && this . context . attributes && this . context . attributes . placeholder )
2019-10-07 17:24:30 +03:00
}
}
} ;
/* script */
2019-11-07 01:17:19 +03:00
var _ _vue _script _ _$6 = script$6 ;
2019-10-07 17:24:30 +03:00
/* template */
2019-11-07 01:17:19 +03:00
var _ _vue _render _ _$6 = function ( ) {
2019-10-07 17:24:30 +03:00
var _vm = this ;
var _h = _vm . $createElement ;
var _c = _vm . _self . _c || _h ;
return _c (
"div" ,
{ staticClass : "formulate-input-element formulate-input-element--select" } ,
[
_c (
"select" ,
_vm . _b (
{
directives : [
{
name : "model" ,
rawName : "v-model" ,
value : _vm . context . model ,
expression : "context.model"
}
] ,
attrs : { "data-placeholder-selected" : _vm . placeholderSelected } ,
on : {
2019-11-14 00:10:17 +03:00
blur : _vm . context . blurHandler ,
2019-10-07 17:24:30 +03:00
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
)
]
)
} ;
2019-11-07 01:17:19 +03:00
var _ _vue _staticRenderFns _ _$6 = [ ] ;
_ _vue _render _ _$6 . _withStripped = true ;
2019-10-07 17:24:30 +03:00
/* style */
2019-11-07 01:17:19 +03:00
var _ _vue _inject _styles _ _$6 = undefined ;
2019-10-07 17:24:30 +03:00
/* scoped */
2019-11-07 01:17:19 +03:00
var _ _vue _scope _id _ _$6 = undefined ;
2019-10-07 17:24:30 +03:00
/* module identifier */
2019-11-07 01:17:19 +03:00
var _ _vue _module _identifier _ _$6 = undefined ;
2019-10-07 17:24:30 +03:00
/* functional template */
2019-11-07 01:17:19 +03:00
var _ _vue _is _functional _template _ _$6 = false ;
2019-10-07 17:24:30 +03:00
/* style inject */
/* style inject SSR */
2019-11-01 21:03:48 +03:00
/* style inject shadow dom */
2019-10-07 17:24:30 +03:00
2019-11-01 21:03:48 +03:00
var FormulateInputSelect = normalizeComponent (
2019-11-07 01:17:19 +03:00
{ 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 ,
2019-11-01 21:03:48 +03:00
false ,
undefined ,
2019-10-07 17:24:30 +03:00
undefined ,
undefined
) ;
//
2019-11-07 01:17:19 +03:00
var script$7 = {
2019-10-07 17:24:30 +03:00
name : 'FormulateInputTextArea' ,
mixins : [ FormulateInputMixin ]
} ;
/* script */
2019-11-07 01:17:19 +03:00
var _ _vue _script _ _$7 = script$7 ;
2019-10-07 17:24:30 +03:00
/* template */
2019-11-07 01:17:19 +03:00
var _ _vue _render _ _$7 = function ( ) {
2019-10-07 17:24:30 +03:00
var _vm = this ;
var _h = _vm . $createElement ;
var _c = _vm . _self . _c || _h ;
return _c (
"div" ,
{
staticClass : "formulate-input-element formulate-input-element--textarea"
} ,
[
_c (
"textarea" ,
_vm . _b (
{
directives : [
{
name : "model" ,
rawName : "v-model" ,
value : _vm . context . model ,
expression : "context.model"
}
] ,
domProps : { value : _vm . context . model } ,
on : {
2019-11-14 00:10:17 +03:00
blur : _vm . context . blurHandler ,
2019-10-07 17:24:30 +03:00
input : function ( $event ) {
if ( $event . target . composing ) {
return
}
_vm . $set ( _vm . context , "model" , $event . target . value ) ;
}
}
} ,
"textarea" ,
_vm . attributes ,
false
)
)
]
)
} ;
2019-11-07 01:17:19 +03:00
var _ _vue _staticRenderFns _ _$7 = [ ] ;
_ _vue _render _ _$7 . _withStripped = true ;
2019-10-07 17:24:30 +03:00
/* style */
2019-11-07 01:17:19 +03:00
var _ _vue _inject _styles _ _$7 = undefined ;
2019-10-07 17:24:30 +03:00
/* scoped */
2019-11-07 01:17:19 +03:00
var _ _vue _scope _id _ _$7 = undefined ;
2019-10-07 17:24:30 +03:00
/* module identifier */
2019-11-07 01:17:19 +03:00
var _ _vue _module _identifier _ _$7 = undefined ;
2019-10-07 17:24:30 +03:00
/* functional template */
2019-11-07 01:17:19 +03:00
var _ _vue _is _functional _template _ _$7 = false ;
2019-10-07 17:24:30 +03:00
/* style inject */
/* style inject SSR */
2019-11-01 21:03:48 +03:00
/* style inject shadow dom */
2019-10-07 17:24:30 +03:00
2019-11-01 21:03:48 +03:00
var FormulateInputTextArea = normalizeComponent (
2019-11-07 01:17:19 +03:00
{ 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 ,
2019-11-01 21:03:48 +03:00
false ,
undefined ,
2019-10-07 17:24:30 +03:00
undefined ,
undefined
) ;
/ * *
* The base formulate library .
* /
var Formulate = function Formulate ( ) {
this . defaults = {
components : {
FormulateForm : FormulateForm ,
FormulateInput : FormulateInput ,
2019-11-07 01:17:19 +03:00
FormulateInputErrors : FormulateInputErrors ,
2019-10-07 17:24:30 +03:00
FormulateInputBox : FormulateInputBox ,
FormulateInputText : FormulateInputText ,
FormulateInputGroup : FormulateInputGroup ,
FormulateInputSelect : FormulateInputSelect ,
FormulateInputTextArea : FormulateInputTextArea
} ,
2019-11-08 01:03:34 +03:00
library : library ,
2019-11-14 00:10:17 +03:00
rules : rules ,
locale : 'en' ,
locales : {
en : en
}
2019-10-07 17:24:30 +03:00
} ;
} ;
/ * *
* 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 ] ) ;
}
2019-10-08 20:50:53 +03:00
Object . freeze ( this ) ;
2019-10-07 17:24:30 +03:00
} ;
/ * *
* 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
} ;
2019-11-08 01:03:34 +03:00
/ * *
* Get validation rules .
* @ return { object } object of validation functions
* /
Formulate . prototype . rules = function rules ( ) {
return this . options . rules
} ;
2019-11-14 00:10:17 +03:00
/ * *
* 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 )
}
if ( generators . hasOwnProperty ( 'default' ) ) {
return generators . default ( validationContext )
}
return 'This field does not have a valid value'
} ;
2019-10-07 17:24:30 +03:00
var Formulate$1 = new Formulate ( ) ;
export default Formulate$1 ;