[stable7] enh(emoji-picker): allow unselecting set emoji

Backport of #4381.

In collectives pages optionally have an emoji set.
Once this is set there is currently no way to remove it.

Enhance the emoji picker to show the currently selected emoji
and enable unselecting it to clear the previous selection.

See also:
* nextcloud/collectives#422
* serebrov/emoji-mart-vue#253 (comment)

Signed-off-by: Max <max@nextcloud.com>

l10n/messages.pot

@@ -200,6 +200,9 @@ msgstr ""
 msgid "Select provider"
 msgstr ""
 
+msgid "Selected"
+msgstr ""
+
 msgid "Settings"
 msgstr ""
 

src/components/NcEmojiPicker/NcEmojiPicker.vue

@@ -84,6 +84,43 @@ This component allows the user to pick an emoji.
 	}
 </script>
 ```
+
+* Allow unselecting a previously set emoji.
+
+```vue
+<template>
+	<div>
+		<NcEmojiPicker
+			:show-preview="true"
+			:allow-unselect="true"
+			:selected-emoji="emoji"
+			@select="select"
+			@unselect="unselect"
+			style="display: inline-block">
+			<NcButton> Click Me </NcButton>
+		</NcEmojiPicker>
+		<span>selected emoji: {{ emoji }}</span>
+	</div>
+</template>
+<script>
+	export default {
+		data() {
+			return {
+				emoji: '',
+			}
+		},
+		methods: {
+			select(emoji) {
+				this.emoji = emoji
+			},
+			unselect() {
+				this.emoji = ''
+			},
+		},
+	}
+</script>
+```
+
 </docs>
 
 <template>
@@ -123,6 +160,23 @@ This component allows the user to pick an emoji.
 					@trailing-button-click="clearSearch(); slotProps.onSearch(search);"
 					@update:value="slotProps.onSearch(search)" />
 			</template>
+			<template v-if="allowUnselect && selectedEmoji" #customCategory>
+				<div class="emoji-mart-category-label">
+					<h3 class="emoji-mart-category-label">
+						{{ t('Selected') }}
+					</h3>
+				</div>
+				<Emoji class="emoji-selected"
+					:data="emojiIndex"
+					:emoji="selectedEmoji"
+					:size="32"
+					@click="unselect" />
+				<Emoji class="emoji-delete"
+					:data="emojiIndex"
+					emoji=":x:"
+					:size="10"
+					@click="unselect" />
+			</template>
 		</Picker>
 	</NcPopover>
 </template>
@@ -132,14 +186,15 @@ import NcPopover from '../NcPopover/index.js'
 import NcTextField from '../NcTextField/index.js'
 import { t } from '../../l10n.js'
 
-import { Picker, EmojiIndex } from 'emoji-mart-vue-fast'
+import { Picker, Emoji, EmojiIndex } from 'emoji-mart-vue-fast'
 import data from 'emoji-mart-vue-fast/data/all.json'
 
 export default {
 	name: 'NcEmojiPicker',
 	components: {
 		NcPopover,
 		NcTextField,
+		Emoji,
 		Picker,
 	},
 	props: {
@@ -157,6 +212,20 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Allow unselecting the selected emoji
+		 */
+		allowUnselect: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Selected emoji to allow unselecting
+		 */
+		selectedEmoji: {
+			type: String,
+			default: '',
+		},
 		/**
 		 * The fallback emoji in the preview section
 		 */
@@ -190,6 +259,7 @@ export default {
 	emits: [
 		'select',
 		'select-data',
+		'unselect',
 	],
 	data() {
 		return {
@@ -248,6 +318,10 @@ export default {
 			}
 		},
 
+		unselect() {
+			this.$emit('unselect')
+		},
+
 		afterShow() {
 			// add focus trap in modal
 			const picker = this.$refs.picker
@@ -403,4 +477,21 @@ export default {
 		font-weight: 500;
 	}
 }
+
+</style>
+
+<style scoped>
+.row-selected span {
+	vertical-align: middle;
+}
+
+.row-selected button {
+	vertical-align: middle;
+}
+
+.emoji-delete {
+	vertical-align: top;
+	margin-left: -21px;
+	margin-top: -3px;
+}
 </style>