Extract SelectedEmoji component, add unselect button to it.

css/emoji-mart.css

@@ -468,3 +468,8 @@
   display: none;
   visibility: hidden;
 }
+.emoji-delete {
+  vertical-align: top;
+  margin-left: -21px;
+  margin-top: -3px;
+}

docs/app.vue

@@ -77,14 +77,6 @@
         :size="32"
       />
       <emoji v-else :data="index" emoji=":dotted_line_face:" :size="32" />
-      <emoji
-        v-if="selectedEmoji"
-        @click="selectableUnselectEmoji"
-        class="emoji-delete"
-        :data="index"
-        emoji=":x:"
-        :size="16"
-      />
     </div>
     <div class="row">
       <picker
@@ -476,8 +468,4 @@ h2 {
   width: 12px;
   height: 12px;
 }
-.emoji-delete {
-  vertical-align: top;
-  margin-left: -10px;
-}
 </style>

spec/__snapshots__/picker-spec.js.snap

@@ -352,6 +352,8 @@ exports[`Picker renders correctly 1`] = `
       id="emoji-mart-list"
       role="listbox"
     >
+      <!---->
+
       <section
         aria-label="Frequently Used"
         class="emoji-mart-category"

src/components/Picker.vue

@@ -47,12 +47,13 @@
         role="listbox"
         aria-expanded="true"
       >
-        <emoji
+        <SelectedEmoji
           v-if="selectedEmoji"
           :data="data"
+          :i18n="mergedI18n"
           :emoji="selectedEmoji"
-          :size="32"
-          @click="onUnselectEmoji"
+          @click="onEmojiClick"
+          @remove="onUnselectEmoji"
         />
 
         <category
@@ -110,10 +111,12 @@ import Category from './category.vue'
 import Preview from './preview.vue'
 import Search from './search.vue'
 import Emoji from './emoji.vue'
+import SelectedEmoji from './selectedEmoji.vue'
 
 const I18N = {
   search: 'Search',
   notfound: 'No Emoji Found',
+  selected: 'Selected',
   categories: {
     search: 'Search Results',
     recent: 'Frequently Used',
@@ -186,9 +189,6 @@ export default {
       return Object.freeze(deepMerge(I18N, this.i18n))
     },
     idleEmoji() {
-      if (this.selectedEmoji) {
-        return this.selectedEmoji
-      }
       try {
         return this.data.emoji(this.emoji)
       } catch (e) {
@@ -251,6 +251,8 @@ export default {
         return
       }
       if (this.selectable) {
+        // When 'selectable' mode is on, selecting the same emoji
+        // will uneslect it.
         if (this.selectedEmoji == this.view.previewEmoji) {
           this.$emit('unselect', this.view.previewEmoji)
           this.selectedEmoji = undefined
@@ -306,6 +308,7 @@ export default {
     Preview,
     Search,
     Emoji,
+    SelectedEmoji,
   },
 }
 </script>

src/components/selectedEmoji.vue

@@ -0,0 +1,51 @@
+<template>
+  <section class="emoji-mart-category" :aria-label="i18n.selected">
+    <div class="emoji-mart-category-label">
+      <h3 class="emoji-mart-category-label">{{ i18n.selected }}</h3>
+    </div>
+
+    <emoji :data="data" :emoji="emoji" :size="32" @click="onClick" />
+    <emoji
+      @click="onRemove"
+      class="emoji-delete"
+      :data="data"
+      emoji=":x:"
+      :size="10"
+    />
+  </section>
+</template>
+
+<script>
+import Emoji from './emoji.vue'
+
+export default {
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+    i18n: {
+      type: Object,
+      required: true,
+    },
+    emoji: {
+      type: Object,
+      required: true,
+    },
+  },
+  emits: ['click', 'remove'],
+  computed: {},
+  created() {},
+  methods: {
+    onClick() {
+      this.$emit('click', this.emoji)
+    },
+    onRemove() {
+      this.$emit('remove', this.emoji)
+    },
+  },
+  components: {
+    Emoji,
+  },
+}
+</script>