BaseEntrySelector

Component to select elements from a list, including search, options and pagination elements.

Props

Prop name	Description	Type	Values	Default
entries	list of entries to display. Unless the slot entries is used this should be an object with properties compatible with BaseMenuList list object array	array	-	[]
entriesTotal	provide the total number of entries for pagination calculations	number	-	null
entriesPerPage	number of entries per page (this does not steer the number of entries displayed. (the correct number needs to be provided by entries) but is solely needed for correct pagination calculations)	number	-	10
entriesSelectable	define if entries are selectable - thus if checkboxes are available	boolean	-	false
maxSelectedEntries	specify a maximum number of entries that can be selected. specify 0 if there should be no limit	number	-	0
height	specify a custom height - mainly useful if component is within a pop-up. Use a valid CSS height property value.	string	-	''
isLoading	flag to set if loader should be shown (for fetch requests)	boolean	-	false
activeEntry	specify the index of an entry to be marked active (color border on left side).	number	-	-1
language	specify a language (ISO 639-1) (used for label if label is language specific object e.g. { de: 'xxx', en: 'yyy' })	string	-	'en'
optionsHidden	hide options completely (necessary if only before or after slot elements should remain) if the complete options row should be hidden set showOptionsRow to false instead!	boolean	-	false
entryTypes	define options to filter entries structure e.g.: [{ label: { de: "Alle Typen", en: "All Types" }, source: "" }]	array	-	[]
entryTypesConfig	specify config options for your sorting drop down element (if sortOptions are provided). Needs to be an object with the following properties: label string - specify a label for the sort options drop down (purely for accessibility purposes) default ?Object - specify a default option that the dropdown is initialized with. this needs to have the same object structure as the objects in entryTypes. if no default is provided the first option in the list will be selected. valuePropertyName string - specify the name of the property that contains a unique value	object	-	{ label: 'filter by type', default: null, valuePropertyName: 'value' }
sortOptions	define options for sorting entries. structure e.g: [{ label: 'By Type', value: 'type_en' }]	array	-	[]
sortConfig	specify config options for your sorting drop down element (if sortOptions are provided). Needs to be an object with the following properties: label string - specify a label for the sort options drop down (purely for accessibility purposes) default ?Object - specify a default option that the dropdown is initialized with. this needs to have the same object structure as the objects in entryTypes. if no default is provided the first option in the list will be selected. valuePropertyName string - specify the name of the property that contains a unique value	object	-	{ label: 'sort entries', default: null, valuePropertyName: 'value' }
entrySelectorText	specify informational texts for the component (especially helpful to provide language specific text) - this needs to be an object with the following properties (if you don't want to display any text leave an empty string): noEntriesTitle: Header text shown if search for string returned no results. noEntriesSubtext: subtext shown if search for string returned no result. options: Text for title button. This needs to be an object containing a show and hide property that are shown when entriesSelectable is true or false respectively. search: placeholder in search input field. selectAll: Text for 'Select All' button. selectNone: Text for 'Select None' button. entriesSelected: Text for number of entries (x) selected. information displayed as x {provided text}. The values of this object might be plain string or a key for an i18n file (in case it is not an object that is required! - in that case the above applies to the values within that object)	object	-	{ noEntriesTitle: 'No matching entries found', noEntriesSubtext: 'Please adjust your search criteria.', options: { show: 'options', hide: 'options', }, search: 'Search', selectAll: 'Select All', selectNone: 'Select None', entriesSelected: 'entries selected', maxEntriesReached: 'Maximum Number Exceeded!' }
useSearch	define if search field should be shown. this will have no effect if head slot is used.	boolean	-	true
showOptionsRow	this will remove the complete row between search and entries list. This means also the slots options and afterOptions are not available anymore! (if only the options menu should be hidden use optionsHidden instead)	boolean	-	true
useDraggable	make the single menu list items draggable	boolean	-	false
assistiveText	this prop gives the option to add assistive text for screen readers. properties: loaderActive: text that is announced when results are being fetched (prop isLoading is set true) clearInput: text read for remove input icon if prop clearable is set true resultsFound: provide text that should be announced when the search has yielded results. Adding the string '{number}' will announce the total number of results found noResultsFound: provide text that should be announced when no search results were round	object	-	{ resultsFound: '{number} Results found.', noResultsFound: 'No results found.', loaderActive: 'Loading.', clearInput: 'Clear input' }
paginationAssistiveText	this prop gives the option to add assistive text for the pagination: currentPage: aria-label for the current page nextPage: aria-label for the next page pagination: aria-label for the pagination element description previousPage: aria-label for the previous page toPage: aria-label for all page buttons except the current one The values of this object might be plain text or a key for an i18n file	object	-	{ currentPage: 'Current Page, Page', nextPage: 'Go to next page', pagination: 'Pagination', previousPage: 'Go to previous page', toPage: 'Go to page' }

Methods

selectEntry

function to trigger from slot entries when an entry was selected

Params

Param name	Type	Description
obj	Object	selected entry

Events

Event name	Properties	Description
entry-clicked	undefined string - the id of the clicked entry	Triggered when the entry is clicked
fetch-entries	page string - current pagination page query string - the search string sort object - the sort filter type object - the type filter	Event emitted to fetch entries
selected-changed	undefined Object[] - array of updated selected entries	event emitted every time the selected entries change
update:entries-selectable	undefined boolean - are entries selectable	emit event to inform parent about toggle triggered and keep prop variable entriesSelectable in sync

Slots

Name	Description	Bindings
head	per default this element contains the search element of the component. Use this slot to replace it with your own elements
after-options	to add custom elements at the end of the options row, e.g. custom drop downs
option-actions	add custom action (buttons)
entries	the component BaseMenuList is used per default to display the list of entries - if something different is required use this slot.	entries Object[] - list of entries to display select-entry Function - function to trigger when entry was selected - takes two arguments: @property index number: the index of the element in the entries list. selected boolean: if element was selected or deselected
text-content	use this slot to individualize the displayed text per selector entry.	item Object - the data of one single selector entry provided with entries
entry-right-side-elements	use this slot to add elements to the right side of an entry. This slot content will be rendered in place of thumbnails and select checkbox so it will effectively disable the display of selection elements and if select mode is desired, custom elements should be provided	is-selected boolean - was item selected select-active boolean - is select mode of entry selector active item Object - the complete entry provided by list
thumbnails	add custom elements at the end of the item row (see also BaseMenuList). this slot can only be be used if the entries slot is not used	item Object - the data of one entry provided by entries prop

---

Demo