Merge pull request #4383 from nextcloud-libraries/backport/stable7/43…

…81-remove-selected-emoji

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

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>