BaseExpandList

Props

Prop name	Description	Type	Values	Default
data	should be an object array with the following properties: label string - the displayed label id string - an identifier data Object[] - an object array with the property: * label string (renders component as expandable row) or * value string (renders component as entry row) optional properties: count number - used for the number shown in brackets (else the array length will be used) hidden boolean - used to set visibility and is set in edit mode to toggle item the v-model directive might be used on this prop	array	-	[]
edit	set edit mode from outside	boolean	-	false
minItems	specify number of minimal displayed items	number	-	3
multiple	expand multiple items	boolean	-	false
showMoreText	button text to show more content	string	-	'Show all'
showLessText	button text to show less content	string	-	'Show less'
editHideText	button text to hide item	string	-	'Hide'
editShowText	button text to show item	string	-	'Show'
assistiveText	additional texts for screen-reader users to order items. object that needs to have the following properties: activate: Text read when item is focused, use variable {state} to announce item visibility - specify text used in properties 'hidden' and 'visible' activated: Text read after item was activated (selected by enter key) description: Text read on initial list focus moved: Text read after item was moved; can contain variables {pos} (for new position) and {total} visible: string substituted to 'activate' text for state variable if item is visible hidden: string substituted to 'activate' text for state variable if item is hidden	object	-	{ activate: 'Use the Enter key to select item. Item is currently {state}', activated: 'Item selected. Use arrow keys to order item.', description: 'Use Tab key to navigate to item an order item.', moved: 'Item moved: {pos} of {total}', visible: 'visible', hidden: 'hidden' }
controlType	specify the type of visibility switch in edit mode button: a BaseButton without text toggle: a BaseToggle element without text	string	button, toggle	'button'
expanded	define which items are expanded v-model might be used on this property	array	-	[]
disabled	option to disable the edit functionalities of the element (toggle and draggable)	boolean	-	false

Methods

reset

reset list data - this always restores the state of the data on last save() triggered (=was triggered in parent)

save

save changed data

Events

Event name	Properties	Description
saved	undefined object - the data altered and ready for saving	triggered on button click
update:expanded	undefined Array - array with indices of the expanded item per level; eg: [0, 1]: level1 first item, level2 second item is expanded	event triggered when expanded state changes
update:data	undefined Object[] - the modified data (e.g. from sorting)	event emitted when data change internally (e.g. sorting, toggling hidden, etc.). the v-model directive may be used on the corresponding prop
update:edit-mode-is-ready	undefined boolean - the current loading state	triggered when async component is initialized

Slots

Name	Description	Bindings
content	a slot to provide customized entry row	data Object - an object in data array

---

Demo

Component to render list data