feat: added extra doc to show slot usage

Signed-off-by: Eduardo Morales <emoral435@gmail.com>

src/components/NcListItem/NcListItem.vue

@@ -35,6 +35,11 @@
 			<template #icon>
 				<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
 			</template>
+			<template #name>
+				<span style="display: flex; color: var(--color-primary);">
+					Name of the element with content
+				</span>
+			</template>
 			<template #subname>
 				In this slot you can put both text and other components such as icons
 			</template>
@@ -193,6 +198,14 @@
 			<template #icon>
 				<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
 			</template>
+			<template #name>
+				<span style="display: flex; gap: 0.5rem; color: var(--color-primary);">
+					Flexible styling within the first line of the component
+					<div style="color: var(--color-secondary);">
+						like this.
+					</div>
+				</span>
+			</template>
 			<template #subname>
 				In this slot you can put both text and other components such as icons
 			</template>
@@ -356,7 +369,8 @@
 							<!-- First line, name and details -->
 							<div class="line-one">
 								<span class="line-one__name">
-									{{ name }}
+									<!-- @slot Slot for the first line of the component. prop 'name' is used as a fallback is no slots are provided -->
+									<slot name="name">{{ name }}</slot>
 								</span>
 								<span v-if="showDetails"
 									class="line-one__details">
@@ -558,7 +572,6 @@ export default {
 			hovered: false,
 			hasActions: false,
 			hasSubname: false,
-			hasNameSideContent: false,
 			displayActionsOnHoverFocus: false,
 			menuOpen: false,
 			hasIndicator: false,
@@ -679,9 +692,6 @@ export default {
 			if (this.hasSubname !== !!this.$slots.subname) {
 				this.hasSubname = !!this.$slots.subname
 			}
-			if (this.hasNameSideContent !== !!this.$slots.namesidecontent) {
-				this.hasNameSideContent = !!this.$slots.namesidecontent
-			}
 			if (this.hasIndicator !== !!this.$slots.indicator) {
 				this.hasIndicator = !!this.$slots.indicator
 			}