From 4300707e1157fee48e77539355dd77d638e8f0f8 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 25 Jul 2024 14:44:08 +0200
Subject: [PATCH] fix(NcListItem): allow to pass custom NcActions component via
 scoped slot

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

diff --git a/src/components/NcListItem/NcListItem.vue b/src/components/NcListItem/NcListItem.vue
index 897eed4a1c..76e39f4faa 100644
--- a/src/components/NcListItem/NcListItem.vue
+++ b/src/components/NcListItem/NcListItem.vue
@@ -268,6 +268,58 @@
 	</template>
 </NcListItem>
 ```
+### NcListItem with `custom-actions` slot
+
+If there is a need to heavily customize the actions menu, the `custom-actions` slot can be used to pass the NcActions component.
+Remember to pass `primary`, `aria-label` and `update-open` props from the scoped slot props to ensure full functionality.
+```js static
+<template #custom-actions="slotProps">
+	<NcActions :primary="slotProps.primary"
+		:aria-label="slotProps.ariaLabel"
+		@update:open="slotProps.updateOpen" />
+</template>
+```
+```vue
+<template>
+	<NcListItem
+		:name="'This is an active element with custom actions slot'"
+		:bold="true"
+		:active="true"
+		:force-display-actions="true"
+		counterType="highlighted">
+		<template #icon>
+			<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
+		</template>
+		<template #custom-actions="slotProps">
+			<NcActions :primary="slotProps.primary"
+				:aria-label="slotProps.ariaLabel"
+				@update:open="slotProps.updateOpen">
+				<template #icon>
+					<IconNoteText :size="20" />
+				</template>
+				<NcActionButton>
+					Button one
+				</NcActionButton>
+				<NcActionButton>
+					Button two
+				</NcActionButton>
+				<NcActionButton>
+					Button three
+				</NcActionButton>
+			</NcActions>
+		</template>
+	</NcListItem>
+</template>
+<script>
+	import IconNoteText from 'vue-material-design-icons/NoteText.vue'
+
+	export default {
+		components: {
+			IconNoteText,
+		},
+	}
+</script>
+```
 ### NcListItem compact mode
 ```vue
 <template>
@@ -416,13 +468,20 @@
 				<div v-show="forceDisplayActions || displayActionsOnHoverFocus"
 					class="list-item-content__actions"
 					@focusout="handleBlur">
-					<NcActions ref="actions"
+					<!-- @slot Provide the whole NcActions for full customization -->
+					<slot name="custom-actions"
 						:primary="isActive || active"
 						:aria-label="computedActionsAriaLabel"
-						@update:open="handleActionsUpdateOpen">
-						<!-- @slot Provide the actions for the right side quick menu -->
-						<slot name="actions" />
-					</NcActions>
+						:update-open="handleActionsUpdateOpen">
+						<!-- Fallback content for the custom-actions slot -->
+						<NcActions ref="actions"
+							:primary="isActive || active"
+							:aria-label="computedActionsAriaLabel"
+							@update:open="handleActionsUpdateOpen">
+							<!-- @slot Provide the actions for the right side quick menu -->
+							<slot name="actions" />
+						</NcActions>
+					</slot>
 				</div>
 
 				<!-- @slot Extra elements below the item -->