BaseTextList

Component to render different types of text content depending on the data type of prop data

Props

Prop name	Description	Type	Values	Default
data	specify a list of array objects to render different types of text content single object structure: { label: {string, Object}, data: {string, Object, string[], Object[]} } label - a heading for the list section data property variants and their output (see readme.md for examples): - {string} - renders as simple text - {Object} - depending on object properties (see below) renders as chip | external ink | internal link | text | text with tooltip - {string[]} - renders as unordered list - {Object[]} - renders multiple objects (see above) Possible object properties for { data : {Object, Object[]} }: - value string - the displayed text for all types - label string? - an optional pretext in style of 'label:' - altTitle string? - if interpretTextAsHtml is set true, add a html-free version of the label here that can be used for hover title and assistive technologies (needed for type 'chip') - [identifierPropertyName] string? - specify the id of a chip or the path for internal link - specify the object property name with prop identifierPropertyName - id string? - for type chip - an identifier for the chip type (used in link generation) - path string? - for type chip (used in link generation) - url string? - for external link - the url to link to - additional Object? - used for tooltip content generation - an array of objects with properties: label, value optionally altTitle (if interpretTextAsHtml is set true) and url (in case the item should render as link) caveat: even if tooltip content is created via slot this property (tooltip) needs to be present and filled in order for the tooltip to show Note: objects wrapped in an extra array are rendered as columns respecting the cols property.	array	-	[]
identifierPropertyName	specify the object property that should be used as identifier Note: only applies for chips and internal links: - chip: to build the link query data e.g.: query: path?chip-link={[identifierPropertyName]:'keywordId',type:'dataObject.id',value:'keywordValue'} - internal: to set the link path	string	-	'source'
chipQueryName	specify a query parameter name for type chip links	string	-	'chip-link'
renderLabelAs	render component as e.g.: 'h2' | 'h3'	string	-	'div'
labelMarginBottom	set margin-bottom for the label	boolean	-	false
cols	specify the number of columns to render array nested objects	number	-	2
colsSingleTextObject	specify the number of columns to render a single object typeof string	number	-	1
renderLinkAs	specify how a link element should be rendered this needs to be a valid vue link component string (e.g. 'RouterLink') or a component directly and vue-router is necessary if no routing plugin is found the element will be rendered as <a> tag 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|object	-	'RouterLink'
listType	specify how data-list (label, value) should be rendered Note: Only applies to { data: {Object[]} }.	string	horizontal, vertical	'horizontal'
rowGap	specify the gap between content rows	string	large, small	'large'
tooltipThresholdTop	specify a threshold value in px for the BaseTooltipBox top position calculation Note: The value can also be set globally with the CSS variable --base-tooltip-box-threshold-top. The property will be overwritten by the CSS variable.	number	-	0
interpretTextAsHtml	set true to render data or value content as html caveat: setting this variable true can lead to XSS attacks. Only use this prop on trusted content and never on user-provided content.	boolean	-	false

Slots

Name	Description	Bindings
tooltip	slot for tooltip content	data array - the tooltip data that were provided with the data object property additional

---

Demo

Example of different content types and multiple columns based on the data structure.

Note: The column elements are defined via the data structure wrapped by an array. The number of columns can be defined with the cols prop.

Example of a single data object rendered in two columns, where the data property is typeof string.

Note: The number of columns can be defined with the colsSingleTextContent prop.

Example of a list of chips.

Note: The properties id and path are specified once for all chips in that object and processed internally to prepare the structure for a single chip from BaseLink.