diff --git a/l10n/messages.pot b/l10n/messages.pot index 3777dab333..47ffa24798 100644 --- a/l10n/messages.pot +++ b/l10n/messages.pot @@ -200,6 +200,9 @@ msgstr "" msgid "Select provider" msgstr "" +msgid "Selected" +msgstr "" + msgid "Settings" msgstr "" diff --git a/src/components/NcEmojiPicker/NcEmojiPicker.vue b/src/components/NcEmojiPicker/NcEmojiPicker.vue index 6df762c30e..603dc2d50b 100644 --- a/src/components/NcEmojiPicker/NcEmojiPicker.vue +++ b/src/components/NcEmojiPicker/NcEmojiPicker.vue @@ -84,6 +84,43 @@ This component allows the user to pick an emoji. } ``` + +* Allow unselecting a previously set emoji. + +```vue + + +``` + + @@ -132,7 +186,7 @@ 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 { @@ -140,6 +194,7 @@ export default { 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; } } + + + +