pxm-vue-components

Set of components useful for developing vuejs projects.

informations

Version Vuejs : 2.7.7

Available components

PxmAutocomplete

Props	Type	Default	Description
value	any	undefined	The value of the input
valueComparator	Function	undefined	Function which will be used if defined to find the correspondence in the data for value The function has as parameter an object array containing the index, the object itself and the label displayed It must return an object from the array provided as a parameter
items	Array	[]	Data list
label	String	''	The autocomplete label
itemText	String | Function	'text'	Allows you to define the text in the option Maybe a thong. It is possible to reach the deep value of an object via several attributes separated by "." A function can be used and receives as parameter an object with several values such as index and item.
itemValue	String | Function	undefined	Allows you to set the return value when an option is selected If not defined is undefined and therefore returns an object with the index of the element and the object itself Maybe a thong. It is possible to reach the deep value of an object via several attributes separated by "." A function can be used and receives as parameter an object with several values such as index and item. This is not taken into account if "returnObject" is active
returnObject	Boolean	false	If true returns object as value
hideSelected	Boolean	false	Allows you not to display items already selected in the selection menu
caseSensitive	Boolean	false	Allows you to make the options filter case sensitive
id	String	''	Sets the DOM identifier on the component
noItemsText	String	'No items'	Allows you to define the text to display when there is no data
hideNoItems	Boolean	false	Hides the menu when there are no options to display
disabled	Boolean	false	Disable the input field
hideItemsNoSearch	Boolean	false	Hides options if no search is performed This is not taken into account if numberStartingSearch > 0
numberStartingSearch	Number	0	Number from which the search begins to display information
classes	Object	{}}	Allows you to add/modify classes in the component labelClass => The classes that will be on the label. Default: pxm_autocomplete_label inputClass => The classes that will be on the input field. Default: pxm_autocomplete_input ulClass => The classes that will be on the ul. Default: pxm_autocomplete_ul allLiClass => The classes that will be on each link in the menu. Default: pxm_autocomplete_li itemClass => The classes that will be on each options link. Default: pxm_autocomplete_item noItemsClass => The classes which will be on the "no data" link. Default: pxm_autocomplete_no_items loadingClass => The classes that will be on the loading link. Default: pxm_autocomplete_loading
itemDisplayLimit	Number	0	Allows you to display only a certain number of options in the drop-down menu. If it is 0 then no limit
desabledArrows	Boolean	false	Allows you to disable navigation using the arrows in the drop-down menu. Also disables the enter key
clearable	Boolean	false	Add an icon to the field when a value is defined or if a search is defined Allows you to clean the field by emptying the search and/or the selected option if there is one
clearableIcon	String | Array	''	Allows you to modify the icon of the clearable option
fontAwesomeIconModule	Boolean	false	Allows you to define the display of icons with the FontAwesomeIcon module if it is active
notSaveOption	Boolean	false	Does not save the selected option and just returns the result The search will be cleaned after sending the result
itemSearch	String | Function	undefined	Allows you to define the actual label used for the search If set, overrides itemText for search Maybe a thong. It is possible to reach the deep value of an object via several attributes separated by "." A function can be used and receives as parameter an object with several values such as index and item.
tagList	String	'ul'	Allows you to change the html tags of the option list Available options: ul, div