initial attempts at making emoji-picker somewhat extensible

src/components/emoji_picker/emoji_picker.js

@@ -6,7 +6,8 @@ const EmojiPicker = {
   data () {
     return {
       keyword: '',
-      activeGroup: 'standard'
+      activeGroup: 'standard',
+      showingAdditional: false
     }
   },
   methods: {
@@ -28,6 +29,9 @@ const EmojiPicker = {
           this.activeGroup = key
         }
       })
+    },
+    toggleAdditional (value) {
+      this.showingAdditional = value
     }
   },
   computed: {

src/components/emoji_picker/emoji_picker.scss

@@ -0,0 +1,83 @@
+@import '../../_variables.scss';
+
+.emoji-picker {
+  position: absolute;
+  z-index: 1;
+  right: 0;
+  width: 300px;
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+  margin: 0 !important;
+
+  .emoji {
+    &-tabs {
+      &-item {
+        padding: 0 5px;
+
+        &.active {
+          border-bottom: 4px solid;
+
+          i {
+            color: $fallback--lightText;
+            color: var(--lightText, $fallback--lightText);
+          }
+        }
+      }
+    }
+
+    &-content {
+      display: flex;
+      flex-direction: column;
+    }
+
+    &-search {
+      padding: 5px;
+      flex: 0 0 1px;
+
+      input {
+        width: 100%;
+      }
+    }
+
+    &-groups {
+      flex: 1 1 1px;
+      position: relative;
+      overflow: auto;
+    }
+
+    &-group {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      padding: 5px;
+      justify-content: space-between;
+
+      &-title {
+        font-size: 12px;
+        width: 100%;
+        margin: 0;
+      }
+    }
+
+    &-item {
+      width: 32px;
+      height: 32px;
+      box-sizing: border-box;
+      display: flex;
+      font-size: 32px;
+      align-items: center;
+      justify-content: center;
+      margin: 2px;
+
+      cursor: pointer;
+
+      img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
+
+  }
+
+}

src/components/emoji_picker/emoji_picker.vue

@@ -1,6 +1,7 @@
 <template>
-  <div class="emoji-dropdown-menu panel panel-default">
+  <div class="emoji-picker panel panel-default">
-    <div class="panel-heading emoji-tabs">
+    <div class="panel-heading">
+      <span class="emoji-tabs">
         <span
           v-for="(value, key) in emojis"
           :key="key"
@@ -11,8 +12,16 @@
         >
           <i :class="value.icon" />
         </span>
+      </span>
+      <span class="additional-tabs">
+        <slot name="tabs" />
+      </span>
     </div>
     <div class="panel-body emoji-dropdown-menu-content">
+      <div
+        v-if="!showingAdditional"
+        class="emoji-content"
+      >
         <div class="emoji-search">
           <input
             v-model="keyword"
@@ -52,110 +61,12 @@
           </div>
         </div>
       </div>
+      <div v-if="showingAdditional" class="additional-tabs-content">
+        <slot name="tab-content" />
+      </div>
+    </div>
 </div>
 </template>
 
 <script src="./emoji_picker.js"></script>
-
+<style lang="scss" src="./emoji_picker.scss"></style>
-<style lang="scss">
-@import '../../_variables.scss';
-
-.emoji {
-  &-dropdown {
-    position: absolute;
-    right: 0;
-    top: 28px;
-    z-index: 1;
-
-    &-toggle {
-      cursor: pointer;
-      position: absolute;
-      top: -23px;
-      right: 2px;
-      line-height: 1;
-
-      i {
-        font-size: 18px;
-      }
-    }
-
-    &-menu {
-      position: absolute;
-      z-index: 1;
-      right: 0;
-      width: 300px;
-      height: 300px;
-      display: flex;
-      flex-direction: column;
-      margin: 0 !important;
-
-      &-content {
-        flex: 1 1 1px;
-        display: flex;
-        flex-direction: column;
-      }
-    }
-  }
-
-  &-tabs {
-    &-item {
-      padding: 0 5px;
-
-      &.active {
-        border-bottom: 4px solid;
-
-        i {
-          color: $fallback--lightText;
-          color: var(--lightText, $fallback--lightText);
-        }
-      }
-    }
-  }
-
-  &-search {
-    padding: 5px;
-
-    input {
-      width: 100%;
-    }
-  }
-
-  &-groups {
-    flex: 1 1 1px;
-    overflow: auto;
-    position: relative;
-  }
-
-  &-group {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    width: 100%;
-
-    &-title {
-      font-size: 12px;
-      width: 100%;
-      margin: 0;
-      padding: 5px;
-    }
-  }
-
-  &-item {
-    width: 32px;
-    height: 32px;
-    box-sizing: border-box;
-    display: flex;
-    font-size: 32px;
-    align-items: center;
-    justify-content: center;
-    margin: 2px;
-    cursor: pointer;
-
-    img {
-      max-width: 100%;
-      max-height: 100%;
-    }
-  }
-
-}
-</style>