emoji panel changes and package updates.

package.json

@@ -10,7 +10,6 @@
   "dependencies": {
     "axios": "^0.18.0",
     "emojibase-data": "^3.2.1",
-    "emojibase-regex": "^2.0.1",
     "filesize": "^4.1.2",
     "futoji": "^0.2.4",
     "jquery": "^3.3.1",
@@ -26,13 +25,12 @@
     "vue-router": "^3.0.2",
     "vue-socket.io": "^3.0.4",
     "vue-socket.io-extended": "^3.2.0",
-    "vue-twemoji": "^1.0.1",
     "vuex": "^3.0.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.0.5",
     "@vue/cli-plugin-eslint": "^3.0.5",
-    "@vue/cli-service": "^3.0.5",
+    "@vue/cli-service": "^3.5.1",
     "@vue/eslint-plugin": "^4.2.0",
     "babel-eslint": "^10.0.1",
     "eslint": "^5.8.0",

src/components/app/GDriveLinkMenu.vue

@@ -1,141 +1,145 @@
 <template>
-	<div class="dark-background" @click="backgroundClick">
+  <div class="dark-background" @click="backgroundClick">
-		<div class="inner">
+    <div class="inner">
-			<div class="text">
+      <div
-				To upload files, images or set avatars, You must link your Google Drive account with your Nertivia account.
+        class="text"
-			</div>
+      >To upload files, images or set avatars, You must link your Google Drive account with your Nertivia account.</div>
-			<div class="images">
+      <div class="images">
-					<div class="image GDrive-img"></div>
+        <div class="image GDrive-img"></div>
-					<div class="arrow">></div>
+        <div class="arrow">></div>
-					<div class="image nertivia-img"></div>
+        <div class="image nertivia-img"></div>
-			</div>
+      </div>
-			<div class="buttons">
+      <div class="buttons">
-				<div class="button deny" @click="closeMenu">No thanks</div>
+        <div class="button deny" @click="closeMenu">No thanks</div>
-				<div class="button" @click="link">Link me</div>
+        <div class="button" @click="link">Link me</div>
-			</div>
+      </div>
-		</div>
+    </div>
-	</div>
+  </div>
 </template>
 
 <script>
-import {bus} from '@/main'
+import { bus } from "@/main";
-import settingsService from '@/services/settingsService';
+import settingsService from "@/services/settingsService";
 
 export default {
-	methods: {
+  methods: {
-		closeMenu() {
+    closeMenu() {
-			this.$store.dispatch('setPopoutVisibility', {name: 'GDLinkMenu', visibility: false})
+      this.$store.dispatch("setPopoutVisibility", {
-		},
+        name: "GDLinkMenu",
-		backgroundClick(e) {
+        visibility: false
-			if (e.target.classList.contains('dark-background')) {
+      });
-				this.closeMenu()
+    },
-			}
+    backgroundClick(e) {
-		},
+      if (e.target.classList.contains("dark-background")) {
-		async link() {
+        this.closeMenu();
-			const {ok, error, result} = await settingsService.GDriveURL();
+      }
-			if (ok) {
+    },
-				const {url} = result.data;
+    async link() {
-				//open a new window
+      const { ok, error, result } = await settingsService.GDriveURL();
-				const left = (screen.width/2)-(400/2);
+      if (ok) {
-				const top = (screen.height/2)-(500/2);
+        const { url } = result.data;
-				const consentWindow = window.open(url, "",
+        //open a new window
-					'width=400,height=500,top='+top+', left='+left
+        const left = screen.width / 2 - 400 / 2;
-				);
+        const top = screen.height / 2 - 500 / 2;
-				window.onmessage = async (e) => {
+        const consentWindow = window.open(
-					consentWindow.close();
+          url,
-					if (!e.data.code) return;
+          "",
-					const url = new URL(e.data.code);
+          "width=400,height=500,top=" + top + ", left=" + left
-					const code = url.searchParams.get("code");
+        );
-					await settingsService.GDriveAuth(code);
+        window.onmessage = async e => {
-				}
+          consentWindow.close();
-			}
+          if (!e.data.code) return;
-		}
+          const url = new URL(e.data.code);
-	}
+          const code = url.searchParams.get("code");
-}
+          await settingsService.GDriveAuth(code);
+        };
+      }
+    }
+  }
+};
 </script>
 
 
 <style scoped>
 .dark-background {
-    position: absolute;
+  position: absolute;
-    top: 0;
+  top: 0;
-    bottom: 0;
+  bottom: 0;
-    left: 0;
+  left: 0;
-    right: 0;
+  right: 0;
-    background: rgba(0, 0, 0, 0.781);
+  background: rgba(0, 0, 0, 0.781);
-    z-index: 111111;
+  z-index: 111111;
-    display: flex;
+  display: flex;
 }
 .inner {
-    margin: auto;
+  margin: auto;
-    height: 400px;
+  height: 400px;
-    width: 400px;
+  width: 400px;
-    background: rgb(32, 32, 32);
+  background: rgb(32, 32, 32);
-	display: flex;
+  display: flex;
-	flex-direction: column;
+  flex-direction: column;
-	color: white;
+  color: white;
-	border-radius: 3px;
+  border-radius: 3px;
 }
-.text{
+.text {
-	color: white;
+  color: white;
-	text-align: center;
+  text-align: center;
-	margin-top: 30px;
+  margin-top: 30px;
-	font-size: 17px;
+  font-size: 17px;
-	padding-left: 10px;
+  padding-left: 10px;
-	padding-right: 10px;
+  padding-right: 10px;
-	user-select: none;
+  user-select: none;
 }
-.images{
+.images {
-	display: flex;
+  display: flex;
-	margin: auto;
+  margin: auto;
-	margin-top: 40px;
+  margin-top: 40px;
 }
 .image {
-	width: 120px;
+  width: 120px;
-	height: 120px;
+  height: 120px;
-	background-position: center;
+  background-position: center;
-	background-size: 100%;
+  background-size: 100%;
-}
+	}
 .nertivia-img {
-	background-image: url(./../../assets/logo.png);
+  background-image: url(./../../assets/logo.png);
-	border-radius: 50%;
+  border-radius: 50%;
-	background-size: calc(100% + 34px);
+  background-size: calc(100% + 34px);
-  	box-shadow: 0px 0px 66px -4px rgba(69,212,255,1);
+  box-shadow: 0px 0px 66px -4px rgba(69, 212, 255, 1);
 }
-.arrow{
+.arrow {
-	font-size: 40px;
+  font-size: 40px;
-	margin: auto;
+  margin: auto;
-	padding: 20px;
+  padding: 20px;
-	user-select: none;
+  user-select: none;
 }
 .GDrive-img {
-	background-image: url(./../../assets/Google_Drive_logo.png);
+  background-image: url(./../../assets/Google_Drive_logo.png);
 }
-.buttons{
+.buttons {
-	margin: auto;
+  margin: auto;
-	display: flex;
+  display: flex;
 }
-.button{
+.button {
-	display: inline-block;
+  display: inline-block;
-	margin: auto;
+  margin: auto;
-	background: rgb(32, 118, 255);
+  background: rgb(32, 118, 255);
-	padding: 10px;
+  padding: 10px;
-	border-radius: 2px;
+  border-radius: 2px;
-	cursor: default;
+  cursor: default;
-	user-select: none;
+  user-select: none;
-	transition: 0.3s;
+  transition: 0.3s;
-	margin-left: 10px;
+  margin-left: 10px;
-	margin-right: 10px;
+  margin-right: 10px;
 }
 .button:hover {
-	background:rgb(58, 134, 255);
+  background: rgb(58, 134, 255);
 }
 .button.deny {
-	background: rgb(255, 32, 32);
+  background: rgb(255, 32, 32);
-
 }
 .button.deny:hover {
-	background: rgb(255, 53, 53);
+  background: rgb(255, 53, 53);
 }
 </style>
 

src/components/app/News.vue

@@ -3,7 +3,7 @@
     <div class="change-log">
       <span class="news-title">Changes in this release</span>
 
-      <div class="change" v-for="(change, index) in changelog" :key="change.title">
+      <div class="change" v-for="change in changelog" :key="change.title">
         <div class="heading" :style="change.headColor ? `background-color: ${change.headColor}` : ``">
           <div class="date">{{change.date}}</div>
           <div class="changes-title">{{change.title}}</div>

src/components/app/RightPanel.vue

@@ -266,6 +266,7 @@ export default {
       this.showEmojiPopout(event);
     },
     enterEmojiSuggestion(){
+      this.$store.dispatch('setLastEmoji', this.emojiArray[this.emojiIndex].shortcodes[0])
       this.$refs["input-box"].focus();
       const emojiShortCode = `:${this.emojiArray[this.emojiIndex].shortcodes[0]}:`
       const cursorPosition = this.$refs['input-box'].selectionStart;
@@ -281,6 +282,7 @@ export default {
       const target = this.$refs["input-box"];
       target.focus();
       document.execCommand('insertText', false, `:${shortcode}:`);
+      this.$store.dispatch('setLastEmoji', shortcode)
     },
     keyDown(event) {
       this.resize(event);

src/components/app/emojiPanel.vue

@@ -2,6 +2,19 @@
   <div class="emoji-panel" v-click-outside="closePanel">
     <div class="emoji-panel-inner">
       <div class="emojis-list">
+        <div class="category">
+          <div class="category-name">Recent</div>
+          <div class="list">
+            <div class="emoji-item" v-for="(recentEmoji, index) in recentEmojiList" :key="index" @click="clickEvent(recentEmoji)">
+              <img
+                class="panel emoji"
+                v-lazyload
+                :data-url="emojiShortcodeToPath(':' + recentEmoji + ':')"
+              >
+            </div>
+          </div>
+        </div>
+
         <div class="category" v-for="(group, index) in groups" :key="group">
           <div class="category-name">{{group.split('-')[0]}}</div>
           <div class="list">
@@ -17,8 +30,19 @@
         </div>
       </div>
       <div class="tabs">
-        <div class="tab" v-for="(emoji, index) in groupUnicodes" :key="index" @mouseenter="mouseHover(emoji, $event)" >
+        <div class="tab" @click="scrollToCategory(0)">
-          <img class="panel emoji" :src="selectRandom(emoji)" @click="scrollToCategory(index)">
+          <i class="material-icons">history</i>
+          <div class="tooltip">Recent</div>
+        </div>
+        <div
+          class="tab"
+          v-for="(emoji, index) in groupUnicodes"
+          :key="index"
+          @mouseenter="mouseHover(emoji, $event)"
+          @click="scrollToCategory(index + 1)"
+        >
+          <img class="panel-emoji" :src="selectRandom(emoji)">
+          <div class="tooltip">{{ groups[index].split('-')[0] }}</div>
         </div>
       </div>
     </div>
@@ -41,15 +65,256 @@ export default {
   data() {
     return {
       groupUnicodes: [
-        ["😀", "😅", "☺️", "😇", "😉", "😍", "🥰", "😚", "😝", "😏", "😣", "😭", "🥺", "😢", "🤔", "😳", "😡", "🤤", "🤠", "🥳", "😦", "👅", "👀", "🙏", "👍", "👌", "👠"],
+        [
-        ["🐱", "🐰", "🐷", "🐯", "🐸", "🐦", "🐧", "🐣", "🦋", "🐟", "🐿", "🌳", "🌴", "🌷", "🌹", "🌺", "🌻", "🌙", "🌍", "🌈", "🌦", "❄️", "💦", "☃️", "🔥", "💫", "☔️"],
+          "😀",
-        ["🍎", "🍌", "🍉", "🍇", "🍑", "🍒", "🍆", "🍕", "🍟", "🥞", "🍰", "🍪", "🍿", "🍩", "🥤", "🧁", "🍨", "🍭", "🥂", "🍹", "🍝", "🌮"],
+          "😅",
-        ["🏀", "🏈", "⚽️","🥏", "🎱", "🏓", "🏹", "🏆", "🥇", "🎨", "🎧", "🎹", "🎸", "🎮", "🎯", "🎳", "🏂"],
+          "☺️",
-        ["🚗", "🚕", "🚑", "🚒", "🛵", "🚔", "🚁", "✈️", "⛵️", "🚦", "🗺", "🏝", "🏜", "🏔", "🏕", "🏥", "🎢", "⛩", "🏞", "🌄", "🌃", "🌌", "🌉", "🌇", "🎆"],
+          "😇",
-        ["⌚️", "📱", "💻", "🖥", "🖨", "💾", "📀", "💿", "📸", "⏰", "⌛️", "💸", "💵", "💴", "💶", "💷", "🔫", "🔪", "💎", "💳", "🧻", "🚽", "🛁", "🧼", "🛏", "🛋", "🧸", "🎉", "🎀", "🎁", "🛒", "✉️", "💌", "✏️", "📝", "🖌", "📚", "📊", "📆", "📁", "📋", "🔒", "📏", "📌", "✂️"],
+          "😉",
-        ["❤️", "🧡", "💛", "💚", "💙", "💜", "🖤", "💕", "💖", "💘", "💔", "🔞", "📵", "🚭", "⚠️", "🔆", "✅", "♻️", "🚸", "⁉️", "💢", "💯", "🚾", "🏧", "🌐", "🔡", "🆒", "🆕", "🆓", "🆗", "🎵", "♾", "™️", "©️", "💬", "📢", "♉️", "♒️", "🆚", "🆘", "📛", "🚫", "🚯", "🕓"],
+          "😍",
-        ["🏁", "🏴‍☠️", "🇦🇶", "🇧🇷", "🇨🇦", "🇯🇵", "🇵🇰", "🇵🇱", "🇹🇷", "🇺🇸", "🇬🇧", "🇰🇷", "🇫🇷", "🇩🇪", "🇯🇲", "🇳🇵", "🇬🇷", "🇷🇺", "🇪🇸", "🇩🇰", "🇨🇿", "🇮🇹", "🇮🇳", "🇨🇭"]
+          "🥰",
+          "😚",
+          "😝",
+          "😏",
+          "😣",
+          "😭",
+          "🥺",
+          "😢",
+          "🤔",
+          "😳",
+          "😡",
+          "🤤",
+          "🤠",
+          "🥳",
+          "😦",
+          "👅",
+          "👀",
+          "🙏",
+          "👍",
+          "👌",
+          "👠"
+        ],
+        [
+          "🐱",
+          "🐰",
+          "🐷",
+          "🐯",
+          "🐸",
+          "🐦",
+          "🐧",
+          "🐣",
+          "🦋",
+          "🐟",
+          "🐿",
+          "🌳",
+          "🌴",
+          "🌷",
+          "🌹",
+          "🌺",
+          "🌻",
+          "🌙",
+          "🌍",
+          "🌈",
+          "🌦",
+          "❄️",
+          "💦",
+          "☃️",
+          "🔥",
+          "💫",
+          "☔️"
+        ],
+        [
+          "🍎",
+          "🍌",
+          "🍉",
+          "🍇",
+          "🍑",
+          "🍒",
+          "🍆",
+          "🍕",
+          "🍟",
+          "🥞",
+          "🍰",
+          "🍪",
+          "🍿",
+          "🍩",
+          "🥤",
+          "🧁",
+          "🍨",
+          "🍭",
+          "🥂",
+          "🍹",
+          "🍝",
+          "🌮"
+        ],
+        [
+          "🏀",
+          "🏈",
+          "⚽️",
+          "🥏",
+          "🎱",
+          "🏓",
+          "🏹",
+          "🏆",
+          "🥇",
+          "🎨",
+          "🎧",
+          "🎹",
+          "🎸",
+          "🎮",
+          "🎯",
+          "🎳",
+          "🏂"
+        ],
+        [
+          "🚗",
+          "🚕",
+          "🚑",
+          "🚒",
+          "🛵",
+          "🚔",
+          "🚁",
+          "✈️",
+          "⛵️",
+          "🚦",
+          "🗺",
+          "🏝",
+          "🏜",
+          "🏔",
+          "🏕",
+          "🏥",
+          "🎢",
+          "⛩",
+          "🏞",
+          "🌄",
+          "🌃",
+          "🌌",
+          "🌉",
+          "🌇",
+          "🎆"
+        ],
+        [
+          "⌚️",
+          "📱",
+          "💻",
+          "🖥",
+          "🖨",
+          "💾",
+          "📀",
+          "💿",
+          "📸",
+          "⏰",
+          "⌛️",
+          "💸",
+          "💵",
+          "💴",
+          "💶",
+          "💷",
+          "🔫",
+          "🔪",
+          "💎",
+          "💳",
+          "🧻",
+          "🚽",
+          "🛁",
+          "🧼",
+          "🛏",
+          "🛋",
+          "🧸",
+          "🎉",
+          "🎀",
+          "🎁",
+          "🛒",
+          "✉️",
+          "💌",
+          "✏️",
+          "📝",
+          "🖌",
+          "📚",
+          "📊",
+          "📆",
+          "📁",
+          "📋",
+          "🔒",
+          "📏",
+          "📌",
+          "✂️"
+        ],
+        [
+          "❤️",
+          "🧡",
+          "💛",
+          "💚",
+          "💙",
+          "💜",
+          "🖤",
+          "💕",
+          "💖",
+          "💘",
+          "💔",
+          "🔞",
+          "📵",
+          "🚭",
+          "⚠️",
+          "🔆",
+          "✅",
+          "♻️",
+          "🚸",
+          "⁉️",
+          "💢",
+          "💯",
+          "🚾",
+          "🏧",
+          "🌐",
+          "🔡",
+          "🆒",
+          "🆕",
+          "🆓",
+          "🆗",
+          "🎵",
+          "♾",
+          "™️",
+          "©️",
+          "💬",
+          "📢",
+          "♉️",
+          "♒️",
+          "🆚",
+          "🆘",
+          "📛",
+          "🚫",
+          "🚯",
+          "🕓"
+        ],
+        [
+          "🏁",
+          "🏴‍☠️",
+          "🇦🇶",
+          "🇧🇷",
+          "🇨🇦",
+          "🇯🇵",
+          "🇵🇰",
+          "🇵🇱",
+          "🇹🇷",
+          "🇺🇸",
+          "🇬🇧",
+          "🇰🇷",
+          "🇫🇷",
+          "🇩🇪",
+          "🇯🇲",
+          "🇳🇵",
+          "🇬🇷",
+          "🇷🇺",
+          "🇪🇸",
+          "🇩🇰",
+          "🇨🇿",
+          "🇮🇹",
+          "🇮🇳",
+          "🇨🇭"
         ]
+      ],
+      groups: groups,
+      recentEmojiList: this.$store.getters.recentEmojis
     };
   },
   methods: {
@@ -66,26 +331,27 @@ export default {
     parseEmojiPath(emoji) {
       return emojiParser.GetEmojiPath(emoji);
     },
-    selectRandom(array){
+    emojiShortcodeToPath(shortcode) {
-      const randomNum = Math.floor((Math.random() * array.length));
+      return this.parseEmojiPath(emojiParser.replaceShortcode(shortcode));
-      return this.parseEmojiPath(array[randomNum])
+    },
+    selectRandom(array) {
+      const randomNum = Math.floor(Math.random() * array.length);
+      return this.parseEmojiPath(array[randomNum]);
     },
     clickEvent(shortcode) {
       bus.$emit("emojiPanel:Selected", shortcode);
     },
-    mouseHover(emoji, event){
+    mouseHover(emoji, event) {
-      event.target.children[0].src = this.selectRandom(emoji)
+      event.target.children[0].src = this.selectRandom(emoji);
     },
     scrollToCategory(index) {
-      console.log("🏁 🏴‍☠️ 🇦🇶 🇧🇷 🇨🇦 🇯🇵 🇵🇰 🇵🇱  🇹🇷 🇺🇸 🇬🇧 🇰🇷 🇫🇷 🇩🇪 🇯🇲  🇳🇵 🇬🇷 🇷🇺 🇪🇸 🇩🇰 🇨🇿 🇮🇹 🇮🇳 🇨🇭".split(" "))
       const elements = document.querySelectorAll(".category-name");
       elements[index].scrollIntoView();
     }
   },
-  computed: {
+  mounted() {
-    groups() {
+    console.log("mounted")
-      return groups;
+    this.recentEmojiList = this.$store.getters.recentEmojis
-    }
   }
 };
 </script>
@@ -97,7 +363,6 @@ export default {
   bottom: 10px;
   right: 20px;
   width: 390px;
-  overflow-y: auto;
   display: flex;
   flex-direction: column;
   z-index: 99999;
@@ -111,7 +376,7 @@ export default {
   z-index: 99999;
 }
 .emoji-panel-inner:hover {
-  background: rgba(255, 255, 255, 0.781)
+  background: rgba(255, 255, 255, 0.685);
 }
 .emojis-list {
   color: white;
@@ -129,8 +394,8 @@ export default {
 }
 .category-name {
   padding: 10px;
-  text-transform:capitalize;
+  text-transform: capitalize;
-  color: rgb(143, 143, 143);
+  color: rgb(93, 93, 93);
 }
 .list {
 }
@@ -167,42 +432,68 @@ export default {
   height: 20px;
   width: 20px;
   margin: auto;
-  padding-right: 3px;
   filter: grayscale(100%);
   transition: 0.1s;
 }
+.tabs .material-icons {
+  margin: auto;
+  color: rgb(185, 185, 185);
+  transition: 0.1s;
+  user-select: none;
+}
 .tab {
   background: rgba(59, 59, 59, 0.521);
   border-radius: 5px;
-  margin-left: 7px;
+  margin-left: 5px;
-  margin-right: 7px;
+  margin-right: 5px;
   display: flex;
   flex-direction: column;
-  transition: 0.3s;
+  transition: 0.1s;
   height: 35px;
   width: 325px;
   overflow: hidden;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
 }
+
 .tab:hover {
-  background: rgba(73, 73, 73, 0.733);
+  background: rgb(73, 73, 73);
+}
+.tab:hover .tooltip {
+  display: flex;
 }
 .tab:hover img {
-  height: 29px;
+  transform: scale(1.3);
-  width: 29px;
+  filter: grayscale(0);
-  margin: auto;
-  padding-left: 2px;
-  filter: grayscale(0)
 }
+
+.tab:hover .material-icons {
+  transform: scale(1.3);
+  color: white;
+}
+
 .triangle {
   width: 0;
   height: 0;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
-  border-top: 15px solid rgba(32, 32, 32, 0.87);
+  border-top: 15px solid rgba(255, 255, 255, 0.61);
 
   align-self: flex-end;
   margin-right: 70px;
 }
+.tooltip{
+  display: none;
+  position: absolute;
+  margin: auto;
+  background: rgba(29, 29, 29, 0.664);
+  padding: 10px;
+  border-radius: 5px;
+  bottom: -20px;
+  text-transform: capitalize;
+  user-select: none;
+}
 </style>
 <style>
 img.panel.emoji {

src/store/modules/settingsModule.js

@@ -1,42 +1,64 @@
 import Vue from 'vue'
-import {bus} from '../../main'
+import {
+	bus
+} from '../../main'
 
 
 
 const state = {
-    settings: {
+	settings: {
-
+		recentEmojis: []
-    }
+	}
 }
 
 const getters = {
-    settings(state) {
+	settings(state) {
-        return state.settings;
+		return state.settings;
-    }
+	},
+	recentEmojis() {
+		return state.settings.recentEmojis || JSON.parse(localStorage.getItem('recentEmojis'))
+	}
 }
 
 const actions = {
-    setSettings(context, settings) {
+	setSettings(context, settings) {
-        context.commit('setSettings', settings)
+		context.commit('setSettings', settings)
-    },
+	},
-    setGDriveLinked(context, status) {
+	setGDriveLinked(context, status) {
-        context.commit('GoogleDriveLinked', status)
+		context.commit('GoogleDriveLinked', status)
-    }
+	},
+	setLastEmoji(context, shortcode) {
+		const recentEmojis = JSON.parse(localStorage.getItem('recentEmojis')) || [];
+
+		let filter = recentEmojis.filter(function (item) {
+			return item !== shortcode
+		})
+
+		filter.unshift(shortcode);
+		filter = filter.slice(0, 16)
+	
+		localStorage.setItem("recentEmojis", JSON.stringify(filter));
+		context.commit('setLastEmoji', filter)
+	}
+
 }
 
 const mutations = {
-    setSettings(state, settings) {
+	setSettings(state, settings) {
-        state.settings = settings;
+		state.settings = settings;
-    },
+	},
-    GoogleDriveLinked(state, status) {
+	GoogleDriveLinked(state, status) {
-        Vue.set(state.settings, 'GDriveLinked', status)
+		Vue.set(state.settings, 'GDriveLinked', status)
-    }
+	},
+	setLastEmoji(state, newEmojiList) {
+		Vue.set(state.settings, 'recentEmojis', newEmojiList)
+	},
 }
 
 export default {
-  namespace: true,
+	namespace: true,
-  state,
+	state,
-  getters,
+	getters,
-  actions,
+	actions,
-  mutations
+	mutations
 }

src/utils/changelog.js

@@ -1,4 +1,18 @@
 const config = [
+  {
+    title: 'Emoji tabs and recent emojis',
+    shortTitle: 'Emoji tabs and recent emojis',
+    date: '22/03/2019',
+    headColor: "rgba(244, 169, 65, 0.87)",
+    new: [
+      'Tabs in emoji panel',
+      'Recent Emojis now show in the emoji panel'
+    ],
+    fix: [
+      'Emoji panel closes when clicking outside the panel.',
+    ],
+    next: ['Custom emojis']
+  },
   {
     title: 'Emojis :D',
     shortTitle: 'Emojis',

src/utils/emojiData/groups.json

@@ -0,0 +1,190 @@
+{
+  "groups": {
+    "0": "smileys-people",
+    "1": "animals-nature",
+    "2": "food-drink",
+    "3": "travel-places",
+    "4": "activities",
+    "5": "objects",
+    "6": "symbols",
+    "7": "flags"
+  },
+  "hierarchy": {
+    "0": [
+      0,
+      1,
+      2,
+      3,
+      4,
+      5,
+      6,
+      7,
+      8,
+      9,
+      10,
+      11,
+      12,
+      13,
+      14,
+      15,
+      16,
+      17
+    ],
+    "1": [
+      18,
+      19,
+      20,
+      21,
+      22,
+      23,
+      24,
+      25
+    ],
+    "2": [
+      26,
+      27,
+      28,
+      29,
+      30,
+      31,
+      32
+    ],
+    "3": [
+      33,
+      34,
+      35,
+      36,
+      37,
+      38,
+      39,
+      40,
+      41,
+      42,
+      43
+    ],
+    "4": [
+      44,
+      45,
+      46,
+      47,
+      48
+    ],
+    "5": [
+      49,
+      50,
+      51,
+      52,
+      53,
+      54,
+      55,
+      56,
+      57,
+      58,
+      59,
+      60,
+      61,
+      62,
+      63,
+      64,
+      65
+    ],
+    "6": [
+      66,
+      67,
+      68,
+      69,
+      70,
+      71,
+      72,
+      73,
+      74,
+      75
+    ],
+    "7": [
+      76,
+      77,
+      78
+    ]
+  },
+  "subgroups": {
+    "0": "face-positive",
+    "1": "face-neutral",
+    "2": "face-negative",
+    "3": "face-sick",
+    "4": "face-role",
+    "5": "face-fantasy",
+    "6": "cat-face",
+    "7": "monkey-face",
+    "8": "person",
+    "9": "person-role",
+    "10": "person-fantasy",
+    "11": "person-gesture",
+    "12": "person-activity",
+    "13": "person-sport",
+    "14": "family",
+    "15": "body",
+    "16": "emotion",
+    "17": "clothing",
+    "18": "animal-mammal",
+    "19": "animal-bird",
+    "20": "animal-amphibian",
+    "21": "animal-reptile",
+    "22": "animal-marine",
+    "23": "animal-bug",
+    "24": "plant-flower",
+    "25": "plant-other",
+    "26": "food-fruit",
+    "27": "food-vegetable",
+    "28": "food-prepared",
+    "29": "food-asian",
+    "30": "food-sweet",
+    "31": "drink",
+    "32": "dishware",
+    "33": "place-map",
+    "34": "place-geographic",
+    "35": "place-building",
+    "36": "place-religious",
+    "37": "place-other",
+    "38": "transport-ground",
+    "39": "transport-water",
+    "40": "transport-air",
+    "41": "hotel",
+    "42": "time",
+    "43": "sky-weather",
+    "44": "event",
+    "45": "award-medal",
+    "46": "sport",
+    "47": "game",
+    "48": "arts-crafts",
+    "49": "sound",
+    "50": "music",
+    "51": "musical-instrument",
+    "52": "phone",
+    "53": "computer",
+    "54": "light-video",
+    "55": "book-paper",
+    "56": "money",
+    "57": "mail",
+    "58": "writing",
+    "59": "office",
+    "60": "lock",
+    "61": "tool",
+    "62": "science",
+    "63": "medical",
+    "64": "household",
+    "65": "other-object",
+    "66": "transport-sign",
+    "67": "warning",
+    "68": "arrow",
+    "69": "religion",
+    "70": "zodiac",
+    "71": "av-symbol",
+    "72": "other-symbol",
+    "73": "keycap",
+    "74": "alphanum",
+    "75": "geometric",
+    "76": "flag",
+    "77": "country-flag",
+    "78": "subdivision-flag"
+  }
+}