BaseResultBoxSection

A component to display rows of boxes with or without pagination

Props

Prop name	Description	Type	Values	Default
modelValue	actual entries list - if slot result-box is not used to use custom elements this object array should have the following properties to be displayed in a BaseImageBox: id string - a unique identifier title ?string - the title of the box subtext ?string - a subtitle description ?string - text displayed at the bottom of the box imageUrl ?string - url to display an image text ?string[] - an array with strings that will be displayed if no image is provided if a different schema is used please use the slot 'result-box' to create your own elements - only id and title should still be provided but can also be customized via identifierPropertyName and titlePropertyName	array	-	[]
showHeader	if false the header row (title and options) will not be available Caveat: for draggable functionality this needs to be true	boolean	-	true
headerText	title of section it is recommended to also set the headerText even if slot header is used for header for accessibility reasons	string	-	''
showOptions	define if options should be shown	boolean	-	true
optionsButtonText	set text for the options button if showOptions is true this needs to be an object with show (displayed when options are hidden) and hide (displayed when options are visible) attributes	object	-	{ show: 'edit', hide: 'editReturn' }
optionsButtonIcon	set the icon for the options button. if showOptions is true this needs to be an object with show (displayed when options are hidden) and hide (displayed when options are visible) attributes	object	-	{ show: 'edit', hide: 'remove' }
boxBreakpoints	specify how many boxes should be displayed in a row in an array with "tupples" (array with min-size and number of boxes). depending on the size of the container (not screen width - unless calcBoxNumberRelativeToWindow is set to true) like the following: [[0, [number of boxes]], [[min px size for this number of boxes], [number of boxes]], ...]	array	-	[[0, 2], [640, 4], [1024, 6]]
isLoading	set component loader active	boolean	-	false
editMode	flag if component should be in edit mode (dragging, deleting, other custom options visible) the v-model directive may be used on this prop	boolean	-	false
editModeWhiteBackground	set this variable true if background-color should be white in edit mode	boolean	-	false
selectedList	provide a list of selected entries for select options (can be entry objects or entry ids). the v-model directive may be used on this prop	array	-	[]
selectOptionsText	set a text for '[x] entries selected' and 'select all / none'	object	-	{ selectAll: 'select all', selectNone: 'select none', entriesSelected: 'entries selected' }
messageText	if slot options-message-area is not used this variable can be used to customize message text. this should be a string or an object with the actions needed (default: delete, if draggable is true than also a drag property with suiting text is needed). in case of a string the same text is used for all actions	string	-	'Drag or Select'
messageSubtext	if slot options-message-area is not used this variable can be used to customize message subtext. this should be a string or an object with the actions needed (default: delete, if draggable is true than also a drag property with suiting text is needed). in case of a string the same text is used for all actions	string	-	'Drag'n Drop to reorder or select the relevant items and choose an action'
draggable	determine if boxes can be dragged (only applicable if showHeader and showOptions is set to true)	boolean	-	false
usePagination	set true if pagination should be used	boolean	-	false
maxRows	if usePagination is set true this will determine the number of rows shown on one page (only applicable if usePagination is set true)	number	-	5
useExpandMode	set this true if only a limited number of boxes should be shown and rest can be displayed by clicking a "show more" button	boolean	-	false
expanded	if useExpandMode is true set the state of 'show more' from outside the v-model directive may be used on this prop	boolean	-	false
expandText	Provide text that should be shown within the button with the expand / collapse functionality. should be an object with props expand for text to expand and collapse for text to collapse	object	-	{ expand: 'more objects', collapse: 'collapse' }
total	add a number of total elements (needed for useExpandMode and usePagination)	number	-	null
currentPageNumber	set the current page number from outside if usePagination is true. the v-model directive may be used on this prop	number	-	1
maxShowMoreRows	how many rows should be shown with show more button (expandMode) (only applicable with useExpandMode true)	number	-	1
jumpToTop	define if the section should scroll to top on page change (only applicable with usePagination true)	boolean	-	false
showActionButtonBoxes	define if the big button box at the end of all attached items should be shown	boolean	-	false
actionButtonsConfig	set some config for each action used - needs to be an array of objects with the following properties: text string - the text displayed in the button icon string - the icon name to display (for available icons see BaseIcon ) value string - the value emitted on button click [display='all'] ?string - define where the action should be displayed: top: only in top row bottom: only in action button box at bottom of list all: on top as well as bottom disabled ?boolean - disable button	array	-	[{ text: 'delete', icon: 'waste-bin', value: 'delete', display: 'all', disabled: false, }]
identifierPropertyName	define a custom identifier property name for objects in your modelValue array. if relevant property is contained in a nested object the string can be in dot notation. e.g. nestedObject.id	string	-	'id'
titlePropertyName	define a custom title property name for objects in your modelValue array. if relevant property is contained in a nested object the string can be in dot notation. e.g. nestedObject.title	string	-	'title'
usePaginationLinkElement	specify if pagination elements should be a link element - if pagination element should be a link element - please specify the kind of element either as a string (e.g. 'RouterLink' or pass the component directly (currently only Vue components (e.g. RouterLink, NuxtLink) are supported) caveat: if you are using Nuxt the string 'NuxtLink' is not enough, but you need to import the component as import { NuxtLink } from '#components'; and pass the component to the prop!	string|boolean|object	-	false
fetchDataExternally	set this variable true if pagination is used and data fetching is done per page	boolean	-	false
scrollToOffset	specify an additional number of px for the position the page should jump to on page change	number	-	0
initialItemsPerRow	specify an initial number of items per row that should be assumed before rendering the page	number	-	6
assistiveText	add text for screen reader users that helps them navigate list and use edit mode functionalities. object should have the following properties: description: Text read on edit mode activation activated: Text read after item was activated for reordering (selected by enter key) property moved can contain variable {pos} which will be filled with current position moved: Text read after item was moved property moved can contain variables {pos} (new position) and {total} (total number of list items)	object	-	{ description: 'Select items via space bar to carry out actions or use enter ' + 'key to select an item for reordering. Use Tab key to navigate between items.', activated: 'Item at position {pos} selected for reordering. Use arrow keys to order item.', moved: 'Item moved to position {pos} of {total}', loaderActive: 'loading.' }
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' }
disableListElementFocus	BaseResultBoxSection is for example used to display search results - which contain a link to the entry - in this case the focus should be on the link element so that navigation to route link triggers on enter and focus on the list element itself is disabled (if not edit mode!)	boolean	-	false

Events

Event name	Properties	Description
entry-clicked	entryId string - the id of the clicked entry	event emitted from default image box when clicked
items-per-row-changed
submit-action	undefined string - the action type	event triggered when an action is triggered (after selecting boxes)
update:edit-mode	undefined Boolean - flag for edit mode active	emitted on edit mode toggle (options toggle). the v-model directive may be used on the corresponding prop
update:expanded	undefined Boolean - true if list is expanded	event emitted on expand toggle. the v-model directive may be used on the corresponding prop
update:current-page-number	undefined number - the new page number	emitted when pagination is used and page number was changed
update:selected-list	undefined Array - the list of selected entry ids	inform the parent of the changes in selectedList and provide the ids of all selected. the v-model directive may be used on the corresponding prop
update:model-value	undefined Object[] - the updated list of entries	event emitted when the list of entries changed internally (relevant if draggable is set true)

Slots

Name	Description	Bindings
header	add a custom header instead of headerText
optionButtons	add custom option/action elements in the header row	submit-action Function - the method that should be called after the action button was clicked
optionsMessageAreaAfter	add a custom element after the message area
result-box	for custom result boxes	item Object - one list item of boxes to be displayed index number - the index of the item select-active boolean - are items in select mode is-entry-selected boolean - is the particular item currently selected entry-selected Function - method that should be called when an entry was selected
actionButtons	add custom elements after result elements list use scoped slot prop itemsPerRow or dynamically adjusted css variable --items-per-row to adjust element width in accordance with other boxes	items-per-row number - items per row calculated from container or page width element-id string - add a class base-result-box-section__box-item-${elementId} to action button element to include it in box size and styling calculations

---

Demo

Test you component configuration on this example component! (Some settings only have an effect in edit mode or view mode respectively)

An example demonstrating slots