@conduction/nextcloud-vue 2.98.0 → 2.99.0

package/l10n/en.json

@@ -1604,7 +1604,97 @@
     "Suspended": "Suspended",
     "Deprovisioning": "Deprovisioning",
     "Archived": "Archived",
-    "Retained": "Retained"
+    "Retained": "Retained",
+    "A flow runs a series of steps when something happens — an object changes, a schedule fires, or you run it yourself.": "A flow runs a series of steps when something happens — an object changes, a schedule fires, or you run it yourself.",
+    "Schedule": "Schedule",
+    "Enabled, but has no owner — it will not start": "Enabled, but has no owner — it will not start",
+    "Enabled": "Enabled",
+    "{context}, step {step} of {total}": "{context}, step {step} of {total}",
+    "completed": "completed",
+    "Runs": "Runs",
+    "Save the flow first — an unsaved flow has never run.": "Save the flow first — an unsaved flow has never run.",
+    "This flow has never run.": "This flow has never run.",
+    "Create draft version": "Create draft version",
+    "Deprecate": "Deprecate",
+    "Published": "Published",
+    "Arrange steps automatically": "Arrange steps automatically",
+    "Undo the last change": "Undo the last change",
+    "Opening the run": "Opening the run",
+    "Zoom out": "Zoom out",
+    "Reset zoom": "Reset zoom",
+    "Zoom in": "Zoom in",
+    "Show the flow controls": "Show the flow controls",
+    "A field this step asks for is no longer available in the schema.": "A field this step asks for is no longer available in the schema.",
+    "Form out of date": "Form out of date",
+    "The engine does not know this node type, so this step will fail when the flow runs.": "The engine does not know this node type, so this step will fail when the flow runs.",
+    "Unknown step": "Unknown step",
+    "No steps yet": "No steps yet",
+    "Add a step from the sidebar to start building this flow.": "Add a step from the sidebar to start building this flow.",
+    "Flow run": "Flow run",
+    "Flow editor": "Flow editor",
+    "Loading the flow": "Loading the flow",
+    "Reading the run and the graph it used.": "Reading the run and the graph it used.",
+    "Reading the steps of this flow.": "Reading the steps of this flow.",
+    "You are looking at a stored version. Go back to the flow to edit and save it.": "You are looking at a stored version. Go back to the flow to edit and save it.",
+    "A published flow cannot be edited. Create a draft to change it.": "A published flow cannot be edited. Create a draft to change it.",
+    "This line is already drawn this way.": "This line is already drawn this way.",
+    "Edit label": "Edit label",
+    "Paste style": "Paste style",
+    "This flow cannot run yet.": "This flow cannot run yet.",
+    "This flow can run, with warnings.": "This flow can run, with warnings.",
+    "This flow looks runnable.": "This flow looks runnable.",
+    "The last action failed.": "The last action failed.",
+    "This flow has no trigger and no end step, so it cannot start or finish.": "This flow has no trigger and no end step, so it cannot start or finish.",
+    "This flow has no trigger, so nothing will start it.": "This flow has no trigger, so nothing will start it.",
+    "This flow has no end step, so a run can never finish.": "This flow has no end step, so a run can never finish.",
+    "This version is published and cannot be changed. Create a draft to make changes; the published version keeps running until you publish the draft.": "This version is published and cannot be changed. Create a draft to make changes; the published version keeps running until you publish the draft.",
+    "Only a draft version can be published.": "Only a draft version can be published.",
+    "Only a published version can be deprecated.": "Only a published version can be deprecated.",
+    "This flow has no published version, so it cannot run. Publish a version first.": "This flow has no published version, so it cannot run. Publish a version first.",
+    "This version cannot be published while a step has nowhere to send its work.": "This version cannot be published while a step has nowhere to send its work.",
+    "This version cannot be removed while a run is still using it.": "This version cannot be removed while a run is still using it.",
+    "That change was refused by the flow's current state.": "That change was refused by the flow's current state.",
+    "This flow could not be found. It may have been deleted, or you may not have access to it.": "This flow could not be found. It may have been deleted, or you may not have access to it.",
+    "This version is read-only. Create a draft to change its steps; the published version keeps running until you publish the draft.": "This version is read-only. Create a draft to change its steps; the published version keeps running until you publish the draft.",
+    "The list of available steps could not be read, so no steps can be added. This does not mean the instance has none.": "The list of available steps could not be read, so no steps can be added. This does not mean the instance has none.",
+    "This flow has no owner yet, so a trigger will not start it. Saving it makes you its owner.": "This flow has no owner yet, so a trigger will not start it. Saving it makes you its owner.",
+    "This flow has unsaved changes.": "This flow has unsaved changes.",
+    "This is version {version} of the flow, the graph this run used. Go back to the flow to edit it.": "This is version {version} of the flow, the graph this run used. Go back to the flow to edit it.",
+    "This run used version {version} of the flow. You have unsaved changes, so it is replayed over your current graph instead. Save or undo your changes to see the graph it used.": "This run used version {version} of the flow. You have unsaved changes, so it is replayed over your current graph instead. Save or undo your changes to see the graph it used.",
+    "Version {version} of this flow could not be read, so the run is replayed over the current graph. Read the run steps in the sidebar for what actually ran.": "Version {version} of this flow could not be read, so the run is replayed over the current graph. Read the run steps in the sidebar for what actually ran.",
+    "Some steps of this run belong to nodes that are no longer on the canvas, so they were skipped: {nodes}": "Some steps of this run belong to nodes that are no longer on the canvas, so they were skipped: {nodes}",
+    "The form of step \"{step}\" asks for fields the schema no longer offers: {fields}": "The form of step \"{step}\" asks for fields the schema no longer offers: {fields}",
+    "is no longer in the schema": "is no longer in the schema",
+    "is read-only in the schema": "is read-only in the schema",
+    "is hidden in the schema": "is hidden in the schema",
+    "not configured": "not configured",
+    "Objects this run is about": "Objects this run is about",
+    "Changed by this run": "Changed by this run",
+    "at {node}": "at {node}",
+    "The flows could not be loaded. This does not mean there are none.": "The flows could not be loaded. This does not mean there are none.",
+    "No flows yet": "No flows yet",
+    "App": "App",
+    "Set up this app": "Set up this app",
+    "Finish": "Finish",
+    "Setup complete.": "Setup complete.",
+    "Select \"{step}\" first.": "Select \"{step}\" first.",
+    "Please make a selection to continue.": "Please make a selection to continue.",
+    "Please run this step before continuing.": "Please run this step before continuing.",
+    "Stored. Type a new value to replace it.": "Stored. Type a new value to replace it.",
+    "Unsaved changes": "Unsaved changes",
+    "The settings could not be loaded: {reason}": "The settings could not be loaded: {reason}",
+    "{field} is required.": "{field} is required.",
+    "{field} is not in the right form.": "{field} is not in the right form.",
+    "{field} must be a number.": "{field} must be a number.",
+    "{field} must be at least {min}.": "{field} must be at least {min}.",
+    "{field} must be at most {max}.": "{field} must be at most {max}.",
+    "Check the marked fields.": "Check the marked fields.",
+    "The settings could not be saved: {reason}": "The settings could not be saved: {reason}",
+    "This value could not be loaded: {reason}": "This value could not be loaded: {reason}",
+    "{fields}: {reason}": "{fields}: {reason}",
+    "Current {name}": "Current {name}",
+    "Upload {name}": "Upload {name}",
+    "The image could not be uploaded: {reason}": "The image could not be uploaded: {reason}"
   },
   "plurals": {
     "{count} selected": [
@@ -1698,6 +1788,10 @@
     "And %n more type in this group.": [
       "And %n more type in this group.",
       "And %n more types in this group."
+    ],
+    "Showing %n flow": [
+      "Showing %n flow",
+      "Showing %n flows"
     ]
   }
 }

package/l10n/nl.json

@@ -1805,7 +1805,111 @@
     "Suspended": "Opgeschort",
     "Deprovisioning": "Wordt opgeheven",
     "Archived": "Gearchiveerd",
-    "Retained": "Bewaard"
+    "Retained": "Bewaard",
+    "A flow runs a series of steps when something happens — an object changes, a schedule fires, or you run it yourself.": "Een flow voert een reeks stappen uit als er iets gebeurt: een object verandert, een schema gaat af of je start hem zelf.",
+    "Schedule": "Schema",
+    "Enabled, but has no owner — it will not start": "Aan, maar zonder eigenaar: hij start niet",
+    "Enabled": "Aan",
+    "{context}, step {step} of {total}": "{context}, stap {step} van {total}",
+    "completed": "afgerond",
+    "Runs": "Uitvoeringen",
+    "Save the flow first — an unsaved flow has never run.": "Sla de flow eerst op. Een flow die niet is opgeslagen, heeft nooit gedraaid.",
+    "This flow has never run.": "Deze flow heeft nog nooit gedraaid.",
+    "Create draft version": "Conceptversie maken",
+    "Deprecate": "Uitfaseren",
+    "Published": "Gepubliceerd",
+    "Arrange steps automatically": "Stappen automatisch ordenen",
+    "Undo the last change": "Laatste wijziging ongedaan maken",
+    "Opening the run": "De uitvoering openen",
+    "Zoom out": "Uitzoomen",
+    "Reset zoom": "Zoom herstellen",
+    "Zoom in": "Inzoomen",
+    "Show the flow controls": "Toon de knoppen van de flow",
+    "A field this step asks for is no longer available in the schema.": "Een veld dat deze stap vraagt, staat niet meer in het schema.",
+    "Form out of date": "Formulier verouderd",
+    "The engine does not know this node type, so this step will fail when the flow runs.": "De engine kent dit soort stap niet. Deze stap mislukt dus als de flow draait.",
+    "Unknown step": "Onbekende stap",
+    "No steps yet": "Nog geen stappen",
+    "Add a step from the sidebar to start building this flow.": "Voeg een stap toe vanuit de zijbalk om deze flow te bouwen.",
+    "Flow run": "Uitvoering van de flow",
+    "Flow editor": "Flow-editor",
+    "Loading the flow": "De flow laden",
+    "Reading the run and the graph it used.": "De uitvoering en de gebruikte stappen worden gelezen.",
+    "Reading the steps of this flow.": "De stappen van deze flow worden gelezen.",
+    "You are looking at a stored version. Go back to the flow to edit and save it.": "Je bekijkt een opgeslagen versie. Ga terug naar de flow om te wijzigen en op te slaan.",
+    "A published flow cannot be edited. Create a draft to change it.": "Een gepubliceerde flow kun je niet wijzigen. Maak een concept om hem te veranderen.",
+    "This line is already drawn this way.": "Deze lijn is al zo getekend.",
+    "Edit label": "Label bewerken",
+    "Paste style": "Stijl plakken",
+    "This flow cannot run yet.": "Deze flow kan nog niet draaien.",
+    "This flow can run, with warnings.": "Deze flow kan draaien, met waarschuwingen.",
+    "This flow looks runnable.": "Deze flow lijkt klaar om te draaien.",
+    "The last action failed.": "De laatste actie is mislukt.",
+    "This flow has no trigger and no end step, so it cannot start or finish.": "Deze flow heeft geen start en geen eindstap. Hij kan dus niet beginnen of eindigen.",
+    "This flow has no trigger, so nothing will start it.": "Deze flow heeft geen start, dus niets zet hem in gang.",
+    "This flow has no end step, so a run can never finish.": "Deze flow heeft geen eindstap, dus een uitvoering wordt nooit afgerond.",
+    "This version is published and cannot be changed. Create a draft to make changes; the published version keeps running until you publish the draft.": "Deze versie is gepubliceerd en kan niet veranderen. Maak een concept om te wijzigen. De gepubliceerde versie blijft draaien tot je het concept publiceert.",
+    "Only a draft version can be published.": "Alleen een conceptversie kun je publiceren.",
+    "Only a published version can be deprecated.": "Alleen een gepubliceerde versie kun je uitfaseren.",
+    "This flow has no published version, so it cannot run. Publish a version first.": "Deze flow heeft geen gepubliceerde versie en kan dus niet draaien. Publiceer eerst een versie.",
+    "This version cannot be published while a step has nowhere to send its work.": "Je kunt deze versie niet publiceren zolang een stap zijn werk nergens heen kan sturen.",
+    "This version cannot be removed while a run is still using it.": "Je kunt deze versie niet verwijderen zolang een uitvoering hem nog gebruikt.",
+    "That change was refused by the flow's current state.": "De flow staat die wijziging in zijn huidige toestand niet toe.",
+    "This flow could not be found. It may have been deleted, or you may not have access to it.": "Deze flow is niet gevonden. Misschien is hij verwijderd, of heb je er geen toegang toe.",
+    "This version is read-only. Create a draft to change its steps; the published version keeps running until you publish the draft.": "Deze versie is alleen-lezen. Maak een concept om de stappen te wijzigen. De gepubliceerde versie blijft draaien tot je het concept publiceert.",
+    "The list of available steps could not be read, so no steps can be added. This does not mean the instance has none.": "De lijst met beschikbare stappen kon niet worden gelezen, dus je kunt geen stappen toevoegen. Dat betekent niet dat er geen zijn.",
+    "This flow has no owner yet, so a trigger will not start it. Saving it makes you its owner.": "Deze flow heeft nog geen eigenaar, dus een start zet hem niet in gang. Als je hem opslaat, word jij de eigenaar.",
+    "This flow has unsaved changes.": "Deze flow heeft wijzigingen die nog niet zijn opgeslagen.",
+    "This is version {version} of the flow, the graph this run used. Go back to the flow to edit it.": "Dit is versie {version} van de flow, de stappen die deze uitvoering gebruikte. Ga terug naar de flow om hem te wijzigen.",
+    "This run used version {version} of the flow. You have unsaved changes, so it is replayed over your current graph instead. Save or undo your changes to see the graph it used.": "Deze uitvoering gebruikte versie {version} van de flow. Je hebt wijzigingen die nog niet zijn opgeslagen. Daarom wordt hij over je huidige stappen afgespeeld. Sla je wijzigingen op of maak ze ongedaan om de gebruikte stappen te zien.",
+    "Version {version} of this flow could not be read, so the run is replayed over the current graph. Read the run steps in the sidebar for what actually ran.": "Versie {version} van deze flow kon niet worden gelezen. Daarom wordt de uitvoering over de huidige stappen afgespeeld. Wat echt draaide, lees je in de stappen in de zijbalk.",
+    "Some steps of this run belong to nodes that are no longer on the canvas, so they were skipped: {nodes}": "Sommige stappen van deze uitvoering horen bij stappen die niet meer op het canvas staan. Die zijn overgeslagen: {nodes}",
+    "The form of step \"{step}\" asks for fields the schema no longer offers: {fields}": "Het formulier van stap \"{step}\" vraagt velden die niet meer in het schema staan: {fields}",
+    "is no longer in the schema": "staat niet meer in het schema",
+    "is read-only in the schema": "is alleen-lezen in het schema",
+    "is hidden in the schema": "is verborgen in het schema",
+    "not configured": "niet ingesteld",
+    "Objects this run is about": "Objecten waar deze uitvoering over gaat",
+    "Changed by this run": "Gewijzigd door deze uitvoering",
+    "at {node}": "bij {node}",
+    "The flows could not be loaded. This does not mean there are none.": "De flows konden niet worden geladen. Dat betekent niet dat er geen zijn.",
+    "No flows yet": "Nog geen flows",
+    "App": "App",
+    "Set up this app": "Deze app instellen",
+    "Setup complete.": "Instellen is klaar.",
+    "Select \"{step}\" first.": "Kies eerst \"{step}\".",
+    "Please make a selection to continue.": "Maak een keuze om verder te gaan.",
+    "Please run this step before continuing.": "Voer deze stap uit voor je verdergaat.",
+    "Stored. Type a new value to replace it.": "Opgeslagen. Typ een nieuwe waarde om die te vervangen.",
+    "Unsaved changes": "Niet-opgeslagen wijzigingen",
+    "The settings could not be loaded: {reason}": "De instellingen konden niet worden geladen: {reason}",
+    "{field} is required.": "{field} is verplicht.",
+    "{field} is not in the right form.": "{field} heeft niet de juiste vorm.",
+    "{field} must be a number.": "{field} moet een getal zijn.",
+    "{field} must be at least {min}.": "{field} moet minstens {min} zijn.",
+    "{field} must be at most {max}.": "{field} mag hoogstens {max} zijn.",
+    "Check the marked fields.": "Controleer de gemarkeerde velden.",
+    "The settings could not be saved: {reason}": "De instellingen konden niet worden opgeslagen: {reason}",
+    "This value could not be loaded: {reason}": "Deze waarde kon niet worden geladen: {reason}",
+    "{fields}: {reason}": "{fields}: {reason}",
+    "Current {name}": "Huidige {name}",
+    "Upload {name}": "{name} uploaden",
+    "The image could not be uploaded: {reason}": "De afbeelding kon niet worden geüpload: {reason}",
+    "Previous month": "Vorige maand",
+    "Next month": "Volgende maand",
+    "Add day": "Dag toevoegen",
+    "No working calendar found.": "Geen werkkalender gevonden.",
+    "Holidays could not be read. Only the days added by hand are shown.": "De feestdagen konden niet worden gelezen. Alleen de met de hand toegevoegde dagen staan erin.",
+    "The working calendar could not be loaded.": "De werkkalender kon niet worden geladen.",
+    "{date}, closed: {name}": "{date}, gesloten: {name}",
+    "{date}, closed": "{date}, gesloten",
+    "{date}, working day": "{date}, werkdag",
+    "{date}, not a working day": "{date}, geen werkdag",
+    "Day added by hand": "Met de hand toegevoegde dag",
+    "Day added.": "Dag toegevoegd.",
+    "Only an administrator can change the working calendar.": "Alleen een beheerder kan de werkkalender wijzigen.",
+    "The day could not be added. Try again.": "De dag kon niet worden toegevoegd. Probeer het opnieuw.",
+    "Loading …": "Laden …"
   },
   "plurals": {
     "{count} selected": [
@@ -1899,6 +2003,10 @@
     "And %n more type in this group.": [
       "En nog %n soort in deze groep.",
       "En nog %n soorten in deze groep."
+    ],
+    "Showing %n flow": [
+      "%n flow",
+      "%n flows"
     ]
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.98.0",
+  "version": "2.99.0",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/src/components/CnActionsMenu/CnActionsMenu.vue

@@ -30,7 +30,8 @@
 			:data-testid="`${testidBase}-actions`"
 			@update:open="menuOpen = $event">
 			<template #icon>
-				<DotsHorizontal :size="20" />
+				<ChevronDown v-if="trailingChevron" :size="14" />
+				<DotsHorizontal v-else :size="20" />
 			</template>
 			<!-- @slot lead-items Items rendered at the very top of the menu, above Refresh: the tabs a board strip lists here instead of drawing them (CnTabsWidget). The caller owns any separator after them. -->
 			<slot name="lead-items" />
@@ -127,6 +128,7 @@ import { translate as t } from '@nextcloud/l10n'
 import { NcActionButton, NcActionLink, NcActions, NcLoadingIcon } from '@nextcloud/vue'
 import BookOpenVariant from 'vue-material-design-icons/BookOpenVariant.vue'
 import BugOutline from 'vue-material-design-icons/BugOutline.vue'
+import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 import LightbulbOutline from 'vue-material-design-icons/LightbulbOutline.vue'
 import Refresh from 'vue-material-design-icons/Refresh.vue'
@@ -248,6 +250,7 @@ export default {
 		NcActionButton,
 		NcActionLink,
 		NcLoadingIcon,
+		ChevronDown,
 		DotsHorizontal,
 		Refresh,
 		LightbulbOutline,
@@ -487,6 +490,16 @@ export default {
 			default: () => t('nextcloud-vue', 'Request a feature'),
 		},
 
+		/**
+		 * Draw a 14px chevron after the label instead of the dots before it:
+		 * the board's "Meer" menu in a detail header (DqZaak). The board look
+		 * puts the icon after the label; the Nextcloud look keeps it first.
+		 */
+		trailingChevron: {
+			type: Boolean,
+			default: false,
+		},
+
 		/** Pre-translated aria-label / tooltip for the overflow trigger. */
 		actionsMenuLabel: {
 			type: String,

package/src/components/CnBreadcrumbs/CnBreadcrumbs.vue

@@ -19,6 +19,7 @@
 		v-if="crumbs.length > 0"
 		:aria-label="ariaLabel"
 		:rootIcon="rootText ? '' : undefined"
+		class="cn-breadcrumbs"
 		:class="{ 'cn-breadcrumbs--text-separator': separator !== '' }"
 		:style="separatorStyle"
 		data-testid="cn-breadcrumbs">

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -379,6 +379,7 @@
 					:showDocumentation="showDocumentation && menuShowsHelpLinks"
 					:actionsMenuLabel="boardMenuLabel"
 					:variant="isBoard ? 'secondary' : undefined"
+					:trailingChevron="isBoard"
 					:hasPrimaryItems="headerMenuGroups.length > 0 || showMarkUnread || showOpenSidebar"
 					:documentationUrl="documentationUrl"
 					:docsAnchor="resolvedPageId"

package/src/components/CnOrderedListField/CnOrderedListField.vue

@@ -19,7 +19,16 @@
 				class="cn-ordered-list-field__row"
 				:data-testid="`cn-ordered-list-row-${row.value}`">
 				<span class="cn-ordered-list-field__position" aria-hidden="true">{{ index + 1 }}</span>
-				<span class="cn-ordered-list-field__text">{{ row.label }}</span>
+				<span v-if="row.icon" class="cn-ordered-list-field__tile" aria-hidden="true">
+					<CnIcon :name="row.icon" :size="18" />
+				</span>
+				<span class="cn-ordered-list-field__text">
+					<span class="cn-ordered-list-field__name">{{ row.label }}</span>
+					<span v-if="row.description"
+						:id="descriptionId(row)"
+						class="cn-ordered-list-field__description"
+						:data-testid="`cn-ordered-list-description-${row.value}`">{{ row.description }}</span>
+				</span>
 				<span class="cn-ordered-list-field__actions">
 					<button
 						type="button"
@@ -27,6 +36,7 @@
 						:disabled="disabled || index === 0"
 						:aria-label="t('nextcloud-vue', 'Move {item} up', { item: row.label })"
 						:data-testid="`cn-ordered-list-up-${row.value}`"
+						:aria-describedby="row.description ? descriptionId(row) : null"
 						@click="move(index, index - 1)">
 						<ChevronUp :size="20" />
 					</button>
@@ -36,6 +46,7 @@
 						:disabled="disabled || index === rows.length - 1"
 						:aria-label="t('nextcloud-vue', 'Move {item} down', { item: row.label })"
 						:data-testid="`cn-ordered-list-down-${row.value}`"
+						:aria-describedby="row.description ? descriptionId(row) : null"
 						@click="move(index, index + 1)">
 						<ChevronDown :size="20" />
 					</button>
@@ -45,6 +56,7 @@
 						:disabled="disabled"
 						:aria-label="t('nextcloud-vue', 'Remove {item}', { item: row.label })"
 						:data-testid="`cn-ordered-list-remove-${row.value}`"
+						:aria-describedby="row.description ? descriptionId(row) : null"
 						@click="remove(index)">
 						<Close :size="20" />
 					</button>
@@ -66,7 +78,19 @@
 				:filterable="!searchable"
 				data-testid="cn-ordered-list-add"
 				@search="onSearch"
-				@update:modelValue="add" />
+				@update:modelValue="add">
+				<template #option="option">
+					<span class="cn-ordered-list-field__option">
+						<span v-if="option.icon" class="cn-ordered-list-field__tile" aria-hidden="true">
+							<CnIcon :name="option.icon" :size="18" />
+						</span>
+						<span class="cn-ordered-list-field__text">
+							<span class="cn-ordered-list-field__name">{{ option.label }}</span>
+							<span v-if="option.description" class="cn-ordered-list-field__description">{{ option.description }}</span>
+						</span>
+					</span>
+				</template>
+			</NcSelect>
 		</div>
 		<p class="hidden-visually" aria-live="polite" data-testid="cn-ordered-list-live">
 			{{ announcement }}
@@ -80,6 +104,7 @@ import { NcSelect } from '@nextcloud/vue'
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 import Close from 'vue-material-design-icons/Close.vue'
+import CnIcon from '../CnIcon/CnIcon.vue'
 
 let orderedListUid = 0
 
@@ -109,7 +134,7 @@ let orderedListUid = 0
 export default {
 	name: 'CnOrderedListField',
 
-	components: { ChevronDown, ChevronUp, Close, NcSelect },
+	components: { ChevronDown, ChevronUp, Close, CnIcon, NcSelect },
 
 	props: {
 		/** The values in their order. */
@@ -119,8 +144,11 @@ export default {
 		},
 
 		/**
-		 * The choices, `{ value, label }` (a plain string is its own label).
-		 * A value in `modelValue` without a choice shows the value itself.
+		 * The choices, `{ value, label, description?, icon? }` (a plain string
+		 * is its own label). `description` is a muted second line ("19 open
+		 * cases"), in the row and in the picker; `icon` an MDI name drawn in a
+		 * small tile before the label. A value in `modelValue` without a
+		 * choice shows the value itself.
 		 */
 		options: {
 			type: Array,
@@ -185,17 +213,22 @@ export default {
 		choices() {
 			return (Array.isArray(this.options) ? this.options : [])
 				.map((option) => (option && typeof option === 'object'
-					? { value: String(option.value ?? option.id ?? ''), label: String(option.label ?? option.title ?? option.value ?? '') }
-					: { value: String(option), label: String(option) }))
+					? {
+							value: String(option.value ?? option.id ?? ''),
+							label: String(option.label ?? option.title ?? option.value ?? ''),
+							description: typeof option.description === 'string' ? option.description : '',
+							icon: typeof option.icon === 'string' ? option.icon : '',
+						}
+					: { value: String(option), label: String(option), description: '', icon: '' }))
 				.filter((option) => option.value !== '')
 		},
 
-		/** @return {Array<{value: string, label: string}>} The rows, in order. */
+		/** @return {Array<{value: string, label: string, description: string, icon: string}>} The rows, in order. */
 		rows() {
 			return (Array.isArray(this.modelValue) ? this.modelValue : []).map((value) => {
 				const key = String(value)
 				const choice = this.choices.find((option) => option.value === key)
-				return { value: key, label: choice ? choice.label : key }
+				return choice || { value: key, label: key, description: '', icon: '' }
 			})
 		},
 
@@ -214,6 +247,16 @@ export default {
 	methods: {
 		t,
 
+		/**
+		 * The id of a row's description, which its buttons name as their description.
+		 *
+		 * @param {{value: string}} row The row.
+		 * @return {string}
+		 */
+		descriptionId(row) {
+			return `${this.labelId}-desc-${String(row.value).replace(/[^\w-]/g, '-')}`
+		},
+
 		/**
 		 * Emit the new order.
 		 *
@@ -383,4 +426,33 @@ export default {
 	margin: 0;
 	color: var(--color-text-maxcontrast);
 }
+
+.cn-ordered-list-field__tile {
+	display: inline-flex;
+	flex: none;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	border-radius: var(--border-radius-element, 8px);
+	background: var(--color-background-dark);
+	color: var(--color-main-text);
+}
+
+.cn-ordered-list-field__name {
+	display: block;
+}
+
+.cn-ordered-list-field__description {
+	display: block;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
+.cn-ordered-list-field__option {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	min-width: 0;
+}
 </style>