Development

package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-emoji-picker",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "author": {
     "name": "João Eudes Lima",
     "email": "joaoeudes7@gmail.com",
@@ -33,21 +33,21 @@
     "vue": "^2.6.11"
   },
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^7.1.1",
+    "@rollup/plugin-node-resolve": "^7.1.3",
     "@types/chai": "^4.2.11",
     "@types/mocha": "^7.0.2",
-    "@typescript-eslint/eslint-plugin": "^2.26.0",
-    "@typescript-eslint/parser": "^2.26.0",
-    "@vue/cli-plugin-eslint": "^4.3.0",
-    "@vue/cli-plugin-typescript": "^4.3.0",
-    "@vue/cli-plugin-unit-mocha": "^4.3.0",
-    "@vue/cli-service": "^4.3.0",
+    "@typescript-eslint/eslint-plugin": "^2.28.0",
+    "@typescript-eslint/parser": "^2.28.0",
+    "@vue/cli-plugin-eslint": "^4.3.1",
+    "@vue/cli-plugin-typescript": "^4.3.1",
+    "@vue/cli-plugin-unit-mocha": "^4.3.1",
+    "@vue/cli-service": "^4.3.1",
     "@vue/eslint-config-typescript": "^5.0.2",
-    "@vue/test-utils": "^1.0.0-beta.32",
+    "@vue/test-utils": "^1.0.0-beta.33",
     "babel-eslint": "^10.1.0",
     "chai": "^4.2.0",
     "eslint": "^6.8.0",
-    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-vue": "^6.2.2",
     "rollup": "^1.27.8",
     "rollup-plugin-css-porter": "^1.0.2",
@@ -58,7 +58,7 @@
     "rollup-plugin-vue": "^5.1.4",
     "sass": "^1.26.3",
     "sass-loader": "^8.0.2",
-    "terser": "^4.6.10",
+    "terser": "^4.6.11",
     "typescript": "^3.8.3",
     "vue": "^2.6.11",
     "vue-template-compiler": "^2.6.11"

src/AppTestUi.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div>
+      <VEmojiPicker :customEmojis="emojis" />
+    </div>
+    <button @click="changeEmojis">Change</button>
+  </div>
+</template>
+
+<script lang='ts'>
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+import { VEmojiPicker, emojisDefault } from "./index";
+
+Vue.use(VEmojiPicker);
+
+@Component({})
+export default class AppTestUi extends Vue {
+  private emojis = emojisDefault;
+
+  changeEmojis() {
+    this.emojis = emojisDefault.slice(0, 8);
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+</style>

src/VEmojiPicker.vue

@@ -54,7 +54,8 @@ export default class VEmojiPicker extends Vue {
   @Prop({ default: true }) showCategories!: boolean;
   @Prop({ default: "Search" }) labelSearch!: string;
   @Prop({ default: "Peoples" }) initialCategory!: string;
-  @Prop({ default: () => [] as string[] }) exceptCategories!: string[];
+  @Prop({ default: () => [] as ICategory[] }) exceptCategories!: ICategory[];
+  @Prop({ default: () => [] as Emoji[] }) exceptEmojis!: IEmoji[];
 
   mapEmojis: MapEmojis = {};
   currentCategory = this.initialCategory;
@@ -90,26 +91,26 @@ export default class VEmojiPicker extends Vue {
   async mapperEmojisCategory(emojis: IEmoji[]) {
     this.$set(this.mapEmojis, "Frequently", []);
 
-    emojis.forEach((emoji: IEmoji) => {
-      const _category = emoji.category;
+    emojis
+      .filter(emoji => !this.exceptEmojis.includes(emoji))
+      .forEach(emoji => {
+        const _category = emoji.category;
+
+        if (!this.mapEmojis[_category]) {
+          this.$set(this.mapEmojis, _category, []);
+        }
 
-      if (!this.mapEmojis[_category]) {
-        this.$set(this.mapEmojis, _category, [emoji]);
-      } else {
         this.mapEmojis[_category].push(emoji);
-      }
-    });
+      });
   }
 
   async restoreFrequentlyEmojis() {
     const jsonMapIndexEmojis = localStorage.getItem("frequentlyEmojis");
 
-    if (jsonMapIndexEmojis) {
-      const mapIndexEmojis = JSON.parse(jsonMapIndexEmojis) as [];
-      const emojis = mapIndexEmojis.map(index => this.customEmojis[index]);
+    const mapIndexEmojis = JSON.parse(jsonMapIndexEmojis!!) || [];
+    const emojis = mapIndexEmojis.map(index => this.customEmojis[index]);
 
-      this.mapEmojis["Frequently"] = emojis;
-    }
+    this.mapEmojis["Frequently"] = emojis;
   }
 
   async saveFrequentlyEmojis(emojis: IEmoji[]) {
@@ -125,7 +126,9 @@ export default class VEmojiPicker extends Vue {
   get categoriesFiltered() {
     const { exceptCategories, customCategories } = this;
 
-    return customCategories.filter(c => !exceptCategories.includes(c.name));
+    return customCategories.filter(
+      category => !exceptCategories.includes(category)
+    );
   }
 
   @Emit("select")
@@ -140,9 +143,14 @@ export default class VEmojiPicker extends Vue {
     return category;
   }
 
-  @Watch("category")
-  watchCategory(newValue: string, old: string) {
-    this.currentCategory = newValue;
+  @Watch("customEmojis")
+  onChangeCustomEmojis(newEmojis: IEmoji[]) {
+    console.log(newEmojis == null);
+
+    if (newEmojis && newEmojis.length) {
+      this.mapEmojis = {};
+      this.mapperEmojisCategory(newEmojis);
+    }
   }
 }
 </script>

src/main.ts

@@ -1,8 +1,8 @@
 import Vue from "vue";
-import VEmojiPicker from "./index";
+import AppTest from "./AppTestUi.vue";
 
 Vue.config.productionTip = false;
 
 new Vue({
-  render: h => h(VEmojiPicker)
+  render: h => h(AppTest)
 }).$mount("#app");