CnStatsBlock

Statistics display card with icon, count, and optional breakdown. Used inside CnKpiGrid.

Wraps: NcLoadingIcon

Try it

Loading CnStatsBlock playground…

Props

Prop	Type	Default	Description
title	String	''	Card title
count	Number	0	Main count value (formatted with toLocaleString)
countLabel	String	'objects'	Unit label below count
breakdown	Object	null	Key-value pairs for breakdown display
loading	Boolean	false	Loading state
loadingLabel	String	'Loading...'
emptyLabel	String	'No items found'
icon	Component	null	MDI icon component
iconSize	Number	24	Icon pixel size
variant	String	'default'	'default', 'primary', 'success', 'warning', 'error'
horizontal	Boolean	false	Icon-left layout
clickable	Boolean	false	Enable click interaction
showZeroCount	Boolean	false	Display 0 as a count value instead of the empty label
route	Object	null	Vue Router location object ({ name, path, query, ... }). When set, the card renders as a <router-link> and clickable styles are applied automatically.

Events

Event	Payload	Description
click	event	Block clicked (only if clickable)

Slots

Slot	Description
#icon	Custom icon content

Usage

<CnStatsBlock
  title="Active Contacts"
  :count="150"
  count-label="contacts"
  variant="primary"
  :breakdown="{ 'This week': 12, 'This month': 43 }"
  :icon="AccountGroupOutline"
  :clickable="true"
  @click="navigateToContacts" />

Reference (auto-generated)

The tables below are generated from the SFC source via vue-docgen-cli. They reflect what's actually in CnStatsBlock.vue and update automatically whenever the component changes.

Props

Name	Type	Required	Default	Description
title	string		''	Block title
count	number		0	The main count number to display prominently
countLabel	string		() => t('nextcloud-vue', 'objects')	Label displayed next to the count
breakdown	object		null	Detailed breakdown object (key-value pairs)
loading	boolean		false	Whether data is currently loading
loadingLabel	string		() => t('nextcloud-vue', 'Loading...')	Text shown while loading
emptyLabel	string		() => t('nextcloud-vue', 'No items found')	Text shown when count is 0
icon	object|func		null	Icon component (e.g., imported MDI icon)
iconSize	number		24	Icon size in pixels
variant	string		'default'	Color variant: 'default', 'primary', 'success', 'warning', 'error'
horizontal	boolean		false	Use horizontal layout (icon left, content right)
clickable	boolean		false	Whether the card is clickable
showZeroCount	boolean		false	Whether to display 0 as a count value instead of the empty label
route	object		null	Vue Router location object for declarative navigation. When set, the card renders as a <router-link> and clickable styles are implied. { name: 'Cases', query: { status: 'open' } } { path: '/catalogi' }

Events

Name	Payload	Description
click	—

Slots

Name	Bindings	Description
icon	—