# BaseExpandList
# Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| data | should be an object array with the following properties: label string - the displayed labelid string - an identifierdata Object[] - an object array with the property:* label string (renders component asexpandable 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 itemthe .sync modifier 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' |
| supportiveText | 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 | 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 |
|---|---|---|
| update:data | undefined Object[] - the modified data (e.g. from sorting) | event emitted when data change internally (e.g. sorting, toggling hidden, etc.). the .sync modifier may be used on the corresponding prop |
| expanded-state | 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 |
| saved | undefined object - the data altered and ready for saving | triggered on button click |
# 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