From eff954fec4633cd8a7b46830134d1416f4907323 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 26 Jan 2024 12:38:48 +0100
Subject: [PATCH] feat(NcListItem): introduce 'details' slot

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/NcListItem/NcListItem.vue | 26 ++++++++++++++++--------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/NcListItem/NcListItem.vue b/src/components/NcListItem/NcListItem.vue
index 4d626230f8..74e324cf76 100644
--- a/src/components/NcListItem/NcListItem.vue
+++ b/src/components/NcListItem/NcListItem.vue
@@ -87,7 +87,6 @@
 			:name="'This is an active element with normal counter'"
 			:bold="false"
 			:active="true"
-			:details="'1h'"
 			:counter-number="44">
 			<template #icon>
 				<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
@@ -95,6 +94,9 @@
 			<template #subname>
 				In this slot you can put both text and other components such as icons
 			</template>
+			<template #details>
+				<LinkIcon :size="16"/>
+			</template>
 			<template #indicator>
 				<!-- Color dot -->
 				<CheckboxBlankCircle :size="16" fill-color="#fff" />
@@ -194,6 +196,9 @@
 			<template #subname>
 				In this slot you can put both text and other components such as icons
 			</template>
+			<template #details>
+				<LinkIcon :size="16"/>
+			</template>
 			<template #indicator>
 				<!-- Color dot -->
 				<CheckboxBlankCircle :size="16" fill-color="#0082c9"/>
@@ -230,10 +235,12 @@
 
 <script>
 	import CheckboxBlankCircle from 'vue-material-design-icons/CheckboxBlankCircle'
+	import LinkIcon from 'vue-material-design-icons/Link'
 
 	export default {
 		components: {
 			CheckboxBlankCircle,
+			LinkIcon,
 		}
 	}
 </script>
@@ -344,7 +351,8 @@
 								</span>
 								<span v-if="showDetails"
 									class="line-one__details">
-									{{ details }}
+									<!-- @slot This slot is used for some details in form of icon (prop `details` as a fallback) -->
+									<slot name="details">{{ details }}</slot>
 								</span>
 							</div>
 
@@ -558,15 +566,11 @@ export default {
 			displayActionsOnHoverFocus: false,
 			menuOpen: false,
 			hasIndicator: false,
+			hasDetails: false,
 		}
 	},
 
 	computed: {
-
-		hasDetails() {
-			return this.details !== ''
-		},
-
 		oneLine() {
 			return !this.hasSubname && !this.showDetails
 		},
@@ -576,7 +580,8 @@ export default {
 		},
 
 		showDetails() {
-			return this.hasDetails && (!this.displayActionsOnHoverFocus || this.forceDisplayActions)
+			return (this.details !== '' || this.hasDetails)
+				&& (!this.displayActionsOnHoverFocus || this.forceDisplayActions)
 		},
 
 		computedActionsAriaLabel() {
@@ -694,6 +699,9 @@ export default {
 			if (this.hasIndicator !== !!this.$slots.indicator) {
 				this.hasIndicator = !!this.$slots.indicator
 			}
+			if (this.hasDetails !== !!this.$slots.details) {
+				this.hasDetails = !!this.$slots.details
+			}
 		},
 	},
 }
@@ -814,7 +822,7 @@ export default {
 
 	&__details {
 		color: var(--color-text-maxcontrast);
-		margin: 0 8px;
+		margin: 0 9px;
 		font-weight: normal;
 	}
 }