vue-intergrall-plugins 0.0.102 → 0.0.108

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-intergrall-plugins",
-  "version": "0.0.102",
+  "version": "0.0.108",
   "description": "",
   "main": "dist/vue-intergrall-plugins.ssr.js",
   "browser": "dist/vue-intergrall-plugins.esm.js",
@@ -24,30 +24,30 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/vue-fontawesome": "^2.0.2",
-    "@popperjs/core": "^2.9.3",
-    "core-js": "^3.16.3",
-    "emoji-mart-vue": "^2.6.6",
-    "postcss": "^8.3.6",
+    "@popperjs/core": "^2.10.2",
+    "core-js": "^3.18.1",
+    "postcss": "^8.3.8",
     "vue-clickaway": "^2.2.2",
-    "vue-select": "^3.12.3",
+    "vue-select": "^3.13.0",
     "vue-toasted": "^1.1.28"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.6",
-    "@babel/preset-env": "^7.14.7",
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.6",
     "@rollup/plugin-alias": "^3.1.2",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^14.0.0",
+    "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-replace": "^2.4.2",
     "@vue/cli-plugin-babel": "^4.5.13",
     "@vue/cli-service": "^4.5.13",
-    "autoprefixer": "^10.2.4",
+    "autoprefixer": "^10.3.6",
     "cross-env": "^7.0.3",
     "cssnano": "^4.1.10",
     "minimist": "^1.2.5",
     "rimraf": "^3.0.2",
-    "rollup": "^2.52.8",
+    "rollup": "^2.58.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-vue": "^5.1.9",
     "vue": "^2.6.14",

package/src/lib-components/Chat/BtnEmojis.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="emoji-text-container" v-on-clickaway="away">
+    <div
+      class="emoji-text-btn"
+      @click="toggleEmojiSelection()"
+      v-text="String.fromCodePoint(0x1f61c)"
+    >
+    </div>
+    <transition name="show-y">
+      <Picker v-show="showEmojis" ref="sm-emoji-picker" @insert-emoji="insertEmoji" />
+    </transition>
+  </div>
+</template>
+
+<script>
+
+import Picker from "./Picker"
+import { mixin as clickaway } from 'vue-clickaway'
+
+export default {
+  components: { Picker },
+  mixins: [ clickaway ],
+  props: {
+    emojiId: {
+      type: String,
+      required: true
+    },
+    biggerTextarea: {
+      type: Boolean,
+      default: true,
+      required: false
+    },
+    small: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    up: {
+      type: Boolean,
+      default: true,
+      required: false
+    },
+    down: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    left: {
+      type: Boolean,
+      default: true,
+      required: false
+    }
+  },
+  computed: {
+    height() {
+      if(this.small) return 225
+      return 325
+    },
+    top() {
+      if(!this.down) return -(this.height + (!this.biggerTextarea ? 5 : 30) )
+      return 40
+    }
+  },
+  data(){
+    return{
+      showEmojis: false
+    }
+  },
+  created() {
+    this.$root.$refs[`etf-${this.emojiId}`] = this
+  },
+  watch: {
+    showEmojis() {
+      if(this.showEmojis) this.setPosition("sm-emoji-picker")
+    }
+  },
+  methods: {
+    setPosition(refId) {
+      try {
+        this.$nextTick(() => {
+          const elem = this.$refs[refId] ? this.$refs[refId].$el ? this.$refs[refId].$el : this.$refs[refId] : this.$refs[refId] ? this.$refs[refId] : false
+          if(elem){
+            elem.style.position = "absolute"
+            elem.style.top = `${this.top}px`
+            elem.style.left = "0"
+            elem.style.height = `${this.height}px`
+          }
+        })
+      }catch(e) {
+        console.error("Erro ao setar a posicao dos emojis")
+        console.error(e)
+      }
+    },
+    insertEmoji(emoji) {
+      this.$emit("insert-emoji", emoji)
+    },
+    toggleEmojiSelection() {
+      this.showEmojis = !this.showEmojis
+    },
+    away() {
+      this.showEmojis = false
+    }
+  }
+}
+</script>
+
+<style>
+.show-y-enter-active,
+.show-y-leave-enter {
+  opacity: 1;
+  transform: translateY(0);
+  transition: all 200ms linear;
+}
+.show-y-enter,
+.show-y-leave-to {
+  opacity: 0;
+  transform: translateY(5%);
+}
+
+.emoji-text-container {
+  position: relative; }
+.emoji-text-container .emoji-text-btn {
+  font-size: 1.2rem;
+  cursor: pointer; }
+</style>

package/src/lib-components/Chat/BtnExpand.vue

@@ -1,11 +1,17 @@
 <template>
-  <div class="text-footer-actions--btn" @click="$emit('expand-textarea')">
+  <div class="text-footer-actions--btn" @click="$emit('expand-textarea')" :title="dictionary.title_expandir_textarea">
     <fa-icon :icon="['fas', 'expand-alt']" />
   </div>
 </template>
 
 <script>
 export default {
-
+  props: {
+    dictionary: {
+      type: Object,
+      default: {},
+      required: false
+    }
+  }
 }
 </script>

package/src/lib-components/Chat/ExpandTextarea.vue

@@ -12,7 +12,7 @@
       >
       </textarea>
       <div class="expand-textarea-footer">
-        <EmojisTextFooter 
+        <BtnEmojis 
           v-show="buttons.hasEmojis"
           :ref="`${identifier}-emojis`"
           :emojiId="`${identifier}-em`"
@@ -38,12 +38,12 @@
 
 <script>
 import { mixin as clickaway } from "vue-clickaway"
-import EmojisTextFooter from "./EmojisTextFooter"
+import BtnEmojis from "./BtnEmojis"
 import BtnFiles from "./BtnFiles"
 import { returnMessageWithHexa } from "@/services/textFormatting"
 
 export default {
-  components: { EmojisTextFooter, BtnFiles },
+  components: { BtnEmojis, BtnFiles },
   mixins: [ clickaway ],
   props: {
     identifier: {
@@ -245,14 +245,26 @@ export default {
     insertEmoji(emoji) {
       try {
         const textarea = this.$refs[`${this.identifier}`]
+        console.log("emoji: ", emoji)
         console.log(textarea)
-        this.focusTextarea()
-        const cursorStart = textarea.selectionStart
-        const cursorEnd = textarea.selectionEnd
-        this.message = this.message.slice(0, cursorStart) + emoji.native + this.message.slice(cursorEnd)
+        if (document.activeElement === textarea) {
+          const cursorStart = textarea.selectionStart
+          const cursorEnd = textarea.selectionEnd
+          if (cursorEnd == textarea.value.length) {
+            this.message += emoji.finalEmoji
+            textarea.setSelectionRange(textarea.value.length, textarea.value.length);
+          } else {
+            const initValue = textarea.value.slice(0, cursorStart) + emoji.finalEmoji;
+            const endValue = textarea.value.slice(cursorEnd)
+            this.message = initValue + endValue
+            textarea.setSelectionRange(initValue.length, initValue.length);
+          }
+        } else {
+          this.message += emoji.finalEmoji
+        }
         this.sendFinalMessage()
       }catch(e) {
-        console.error("Erro na insercao de emojis")
+        console.error("Erro ao inserir emoji")
         console.error(e)
       }
     }

package/src/lib-components/Chat/Picker.vue

@@ -0,0 +1,369 @@
+<template>
+  <div class="sm-emoji-picker box-shadow">
+    <SkeletonPicker v-if="loading" />
+    <div class="sm-emoji-header">
+      <span 
+        class="sm-emoji-link"
+        v-for="(category, indexCategoryHeader) in allEmojis.categories" 
+        :key="`ich-${indexCategoryHeader}`" 
+        :title="category.name"
+        :class="{'active' : categoriaSelecionada == category.id}"
+        @click="pickerHeaderHandler($event, category.id)"
+        v-html="`<a href='#${category.id}'>${category.svg}</a>`" 
+      ></span>
+    </div>
+    <div class="sm-emoji-scroll" ref="sm-scroll">
+      <div class="sm-emoji-search" ref="sm-search">
+        <input type="text" name="emoji-search" @input="filterEmojis" v-model="search" />
+      </div>
+      <template v-if="!filteredList.length">
+        <div v-for="(category, indexCategory) in allEmojis.categories" :key="`ic-${indexCategory}`">
+        <div class="sm-emoji-selection">
+          <span class="sm-emoji-title" :id="category.id" v-html="`${category.svg} ${category.name}`" :title="category.name"></span>
+          <div class="sm-emoji-group">
+            <div class="sm-emoji-item" v-for="(emojiKey, key) in category.emojis" :key="`ee-${key}-${category.id}`">
+              <span @click="addEmoji(allEmojis.emojis[emojiKey], emojiKey)"> {{ allEmojis.emojis[emojiKey].finalEmoji }} </span>
+            </div>
+          </div>
+        </div>        
+        </div>
+      </template>
+      <template v-else>
+        <div class="sm-emoji-group">
+          <div class="sm-emoji-item" v-for="(emoji, key) in filteredList" :key="`ees-${key}`">
+            <span @click="addEmoji(emoji)"> {{ emoji.finalEmoji }} </span>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import allEmojis from "@/services/emojis/all.json"
+import SkeletonPicker from "./SkeletonPicker"
+
+export default {
+  components: { SkeletonPicker },
+  data() {
+    return {
+      allEmojis: {},
+      categoriaSelecionada: "",
+      search: "",
+      filteredList: [],
+      loading: true,
+      isSticky: false
+    }
+  },
+  mounted() {
+    this.allEmojis = allEmojis
+    this.loadEmojis()
+  },
+  methods: {
+    addEmojiToArray() {
+      try {
+        for(let key in this.allEmojis.emojis) {
+          const keyCode = this.allEmojis.emojis[key]
+          if(keyCode && keyCode.hasOwnProperty("finalEmoji")) continue
+          const { b } = keyCode
+          const hexPoints = b.split(/\s|-/)
+          const codePoints = hexPoints.map(hex => {
+            return parseInt(hex, 16)
+          })
+          const finalEmoji = String.fromCodePoint.apply(null, codePoints)
+          this.$set(this.allEmojis.emojis[key], "hexa", hexPoints.join(""))
+          this.$set(this.allEmojis.emojis[key], "finalEmoji", finalEmoji)
+        }
+      }catch(e) {
+        console.error("Erro ao gerar os emojis")
+        console.error(e)
+      }
+    },
+    emojiHeaders() {
+      try {
+        const emojis = {
+          recent: { 
+            name: "Recentes",
+            svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M13 4h-2l-.001 7H9v2h2v2h2v-2h4v-2h-4z"></path><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10"></path></svg>` 
+          },
+          people: { 
+            name: "Pessoas & Expressoes",
+            svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10"></path><path d="M8 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 8 7M16 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 16 7M15.232 15c-.693 1.195-1.87 2-3.349 2-1.477 0-2.655-.805-3.347-2H15m3-2H6a6 6 0 1 0 12 0"></path></svg>` 
+          },
+          nature: { 
+            name: "Animais & Natureza",
+            svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M15.5 8a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 15.5 8M8.5 8a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 8.5 8"></path><path d="M18.933 0h-.027c-.97 0-2.138.787-3.018 1.497-1.274-.374-2.612-.51-3.887-.51-1.285 0-2.616.133-3.874.517C7.245.79 6.069 0 5.093 0h-.027C3.352 0 .07 2.67.002 7.026c-.039 2.479.276 4.238 1.04 5.013.254.258.882.677 1.295.882.191 3.177.922 5.238 2.536 6.38.897.637 2.187.949 3.2 1.102C8.04 20.6 8 20.795 8 21c0 1.773 2.35 3 4 3 1.648 0 4-1.227 4-3 0-.201-.038-.393-.072-.586 2.573-.385 5.435-1.877 5.925-7.587.396-.22.887-.568 1.104-.788.763-.774 1.079-2.534 1.04-5.013C23.929 2.67 20.646 0 18.933 0M3.223 9.135c-.237.281-.837 1.155-.884 1.238-.15-.41-.368-1.349-.337-3.291.051-3.281 2.478-4.972 3.091-5.031.256.015.731.27 1.265.646-1.11 1.171-2.275 2.915-2.352 5.125-.133.546-.398.858-.783 1.313M12 22c-.901 0-1.954-.693-2-1 0-.654.475-1.236 1-1.602V20a1 1 0 1 0 2 0v-.602c.524.365 1 .947 1 1.602-.046.307-1.099 1-2 1m3-3.48v.02a4.752 4.752 0 0 0-1.262-1.02c1.092-.516 2.239-1.334 2.239-2.217 0-1.842-1.781-2.195-3.977-2.195-2.196 0-3.978.354-3.978 2.195 0 .883 1.148 1.701 2.238 2.217A4.8 4.8 0 0 0 9 18.539v-.025c-1-.076-2.182-.281-2.973-.842-1.301-.92-1.838-3.045-1.853-6.478l.023-.041c.496-.826 1.49-1.45 1.804-3.102 0-2.047 1.357-3.631 2.362-4.522C9.37 3.178 10.555 3 11.948 3c1.447 0 2.685.192 3.733.57 1 .9 2.316 2.465 2.316 4.48.313 1.651 1.307 2.275 1.803 3.102.035.058.068.117.102.178-.059 5.967-1.949 7.01-4.902 7.19m6.628-8.202c-.037-.065-.074-.13-.113-.195a7.587 7.587 0 0 0-.739-.987c-.385-.455-.648-.768-.782-1.313-.076-2.209-1.241-3.954-2.353-5.124.531-.376 1.004-.63 1.261-.647.636.071 3.044 1.764 3.096 5.031.027 1.81-.347 3.218-.37 3.235"></path></svg>` 
+          },
+          foods: { 
+            name: "Comidas & Bebibas",
+            svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M17 4.978c-1.838 0-2.876.396-3.68.934.513-1.172 1.768-2.934 4.68-2.934a1 1 0 0 0 0-2c-2.921 0-4.629 1.365-5.547 2.512-.064.078-.119.162-.18.244C11.73 1.838 10.798.023 9.207.023 8.579.022 7.85.306 7 .978 5.027 2.54 5.329 3.902 6.492 4.999 3.609 5.222 0 7.352 0 12.969c0 4.582 4.961 11.009 9 11.009 1.975 0 2.371-.486 3-1 .629.514 1.025 1 3 1 4.039 0 9-6.418 9-11 0-5.953-4.055-8-7-8M8.242 2.546c.641-.508.943-.523.965-.523.426.169.975 1.405 1.357 3.055-1.527-.629-2.741-1.352-2.98-1.846.059-.112.241-.356.658-.686M15 21.978c-1.08 0-1.21-.109-1.559-.402l-.176-.146c-.367-.302-.816-.452-1.266-.452s-.898.15-1.266.452l-.176.146c-.347.292-.477.402-1.557.402-2.813 0-7-5.389-7-9.009 0-5.823 4.488-5.991 5-5.991 1.939 0 2.484.471 3.387 1.251l.323.276a1.995 1.995 0 0 0 2.58 0l.323-.276c.902-.78 1.447-1.251 3.387-1.251.512 0 5 .168 5 6 0 3.617-4.187 9-7 9"></path></svg>` 
+          },
+          activity: { 
+            name: "Atividades",
+            svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12 0C5.373 0 0 5.372 0 12c0 6.627 5.373 12 12 12 6.628 0 12-5.373 12-12 0-6.628-5.372-12-12-12m9.949 11H17.05c.224-2.527 1.232-4.773 1.968-6.113A9.966 9.966 0 0 1 21.949 11M13 11V2.051a9.945 9.945 0 0 1 4.432 1.564c-.858 1.491-2.156 4.22-2.392 7.385H13zm-2 0H8.961c-.238-3.165-1.536-5.894-2.393-7.385A9.95 9.95 0 0 1 11 2.051V11zm0 2v8.949a9.937 9.937 0 0 1-4.432-1.564c.857-1.492 2.155-4.221 2.393-7.385H11zm4.04 0c.236 3.164 1.534 5.893 2.392 7.385A9.92 9.92 0 0 1 13 21.949V13h2.04zM4.982 4.887C5.718 6.227 6.726 8.473 6.951 11h-4.9a9.977 9.977 0 0 1 2.931-6.113M2.051 13h4.9c-.226 2.527-1.233 4.771-1.969 6.113A9.972 9.972 0 0 1 2.051 13m16.967 6.113c-.735-1.342-1.744-3.586-1.968-6.113h4.899a9.961 9.961 0 0 1-2.931 6.113"></path></svg>` 
+          },
+          places: { 
+            name: "Viagens & Lugares",
+            svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M6.5 12C5.122 12 4 13.121 4 14.5S5.122 17 6.5 17 9 15.879 9 14.5 7.878 12 6.5 12m0 3c-.275 0-.5-.225-.5-.5s.225-.5.5-.5.5.225.5.5-.225.5-.5.5M17.5 12c-1.378 0-2.5 1.121-2.5 2.5s1.122 2.5 2.5 2.5 2.5-1.121 2.5-2.5-1.122-2.5-2.5-2.5m0 3c-.275 0-.5-.225-.5-.5s.225-.5.5-.5.5.225.5.5-.225.5-.5.5"></path><path d="M22.482 9.494l-1.039-.346L21.4 9h.6c.552 0 1-.439 1-.992 0-.006-.003-.008-.003-.008H23c0-1-.889-2-1.984-2h-.642l-.731-1.717C19.262 3.012 18.091 2 16.764 2H7.236C5.909 2 4.738 3.012 4.357 4.283L3.626 6h-.642C1.889 6 1 7 1 8h.003S1 8.002 1 8.008C1 8.561 1.448 9 2 9h.6l-.043.148-1.039.346a2.001 2.001 0 0 0-1.359 2.097l.751 7.508a1 1 0 0 0 .994.901H3v1c0 1.103.896 2 2 2h2c1.104 0 2-.897 2-2v-1h6v1c0 1.103.896 2 2 2h2c1.104 0 2-.897 2-2v-1h1.096a.999.999 0 0 0 .994-.901l.751-7.508a2.001 2.001 0 0 0-1.359-2.097M6.273 4.857C6.402 4.43 6.788 4 7.236 4h9.527c.448 0 .834.43.963.857L19.313 9H4.688l1.585-4.143zM7 21H5v-1h2v1zm12 0h-2v-1h2v1zm2.189-3H2.811l-.662-6.607L3 11h18l.852.393L21.189 18z"></path></svg>` 
+          },
+          objects: { 
+            name: "Objetos",
+            svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12 0a9 9 0 0 0-5 16.482V21s2.035 3 5 3 5-3 5-3v-4.518A9 9 0 0 0 12 0zm0 2c3.86 0 7 3.141 7 7s-3.14 7-7 7-7-3.141-7-7 3.14-7 7-7zM9 17.477c.94.332 1.946.523 3 .523s2.06-.19 3-.523v.834c-.91.436-1.925.689-3 .689a6.924 6.924 0 0 1-3-.69v-.833zm.236 3.07A8.854 8.854 0 0 0 12 21c.965 0 1.888-.167 2.758-.451C14.155 21.173 13.153 22 12 22c-1.102 0-2.117-.789-2.764-1.453z"></path><path d="M14.745 12.449h-.004c-.852-.024-1.188-.858-1.577-1.824-.421-1.061-.703-1.561-1.182-1.566h-.009c-.481 0-.783.497-1.235 1.537-.436.982-.801 1.811-1.636 1.791l-.276-.043c-.565-.171-.853-.691-1.284-1.794-.125-.313-.202-.632-.27-.913-.051-.213-.127-.53-.195-.634C7.067 9.004 7.039 9 6.99 9A1 1 0 0 1 7 7h.01c1.662.017 2.015 1.373 2.198 2.134.486-.981 1.304-2.058 2.797-2.075 1.531.018 2.28 1.153 2.731 2.141l.002-.008C14.944 8.424 15.327 7 16.979 7h.032A1 1 0 1 1 17 9h-.011c-.149.076-.256.474-.319.709a6.484 6.484 0 0 1-.311.951c-.429.973-.79 1.789-1.614 1.789"></path></svg>` 
+          },
+          symbols: {
+            name: "Simbolos",
+            svg: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z"></path></svg>`
+          },
+          flags: {
+            name: "Bandeiras",
+            svg: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path><line x1="4" y1="22" x2="4" y2="15"></line></svg>`
+          }
+        }
+
+        if(this.allEmojis.categories[0].id != "recent") this.allEmojis.categories.unshift({ emojis: this.getRecentEmojis(), id: "recent", name: "" })
+        this.allEmojis.categories = this.allEmojis.categories.filter(cat => {
+          const { id } = cat
+          if(emojis[id]) {
+            cat.name = emojis[id].name
+            cat.svg = emojis[id].svg
+            return cat
+          }
+        })
+
+
+      }catch(e) {
+        console.error("Erro ao gerar os emojis headers")
+        console.error(e)
+      }
+
+    },
+    loadEmojis() {
+      try {
+        this.emojiHeaders() 
+        this.addEmojiToArray()
+        setTimeout(() => { this.loading = false; }, 1500)
+      }catch(e) {
+        console.error("Erro ao carregar os emojis")
+        console.error(e)
+      }
+    },
+    getRecentEmojis() {
+      const recentEmojis = localStorage.getItem("recent-emojis")
+      if(recentEmojis) return recentEmojis.split(",")
+      return []
+    },
+    setEmojiOnLocalStorage(emojiKey) {
+      try {
+        let finalStr = ""
+        const recentEmojis = localStorage.getItem("recent-emojis")
+        if(recentEmojis) {
+          const arrRecent = recentEmojis.split(",")
+          if(!arrRecent.includes(emojiKey)) {
+            if(arrRecent.length < 20) {
+              finalStr =  `${emojiKey},${recentEmojis}`
+            }else {
+              arrRecent.pop()
+              finalStr = `${emojiKey},${arrRecent.join(",")}`
+            }
+          }
+        }else {
+          finalStr = `${emojiKey}`
+        }
+        if(finalStr) {
+          localStorage.setItem("recent-emojis", finalStr)
+          const finalArr = finalStr.split(",").filter(str => { return str ? str : false })
+          this.allEmojis.categories[0].emojis = finalArr
+        }
+      }catch(e) {
+        console.error("Erro ao setar o emoji no localStorage")
+        console.error(e)
+      }
+
+    },
+    addEmoji(emoji, emojiKey){
+      this.setEmojiOnLocalStorage(emojiKey)
+      this.$emit("insert-emoji", emoji)
+    },
+    pickerHeaderHandler(e, id) {
+      try {
+        const { target } = e
+        const { children } = target
+        if(children.length) {
+          const tag = children[0]
+          tag.getAttribute("href") ? tag.click() : ""
+        }
+        this.categoriaSelecionada = id
+      }catch(e) {
+        console.error("Erro ao mudar de categoria")
+        console.error(e)
+      }
+    },
+    filterEmojis() {
+      if(!this.search.trim("")) return this.filteredList = []
+
+      const rawList = []
+      for(let key in this.allEmojis.emojis) {
+        const emoji = this.allEmojis.emojis[key]
+        const { a } = emoji
+        const search = this.search.toUpperCase()
+        const upperA = a.toUpperCase()
+        if(upperA.indexOf(search) >= 0) rawList.push(emoji) 
+      }
+      if(rawList.length) {
+        this.filteredList = rawList
+      }else {
+        this.filteredList = []
+      }
+      console.log("this.filteredList: ", this.filteredList)
+    }
+  }
+}
+</script>
+
+<style>
+.box-shadow {
+  -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+}
+
+.sm-emoji-picker {
+  width: 310px;
+  z-index: 2;
+  border: 1px solid #CCC;
+  border-radius: 5px;
+  background-color: #FFF;
+  display: flex;
+  flex-direction: column;
+}
+
+.sm-emoji-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 10px 0;
+  border-bottom: 1px solid #CCC;
+}
+
+.sm-emoji-link {
+  padding: 0 5px 5px 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  opacity: .9;
+  transition: all 200ms;
+  border-bottom: 2px solid transparent;
+}
+.sm-emoji-link a {
+  margin: 0;
+  padding: 0;
+  fill: #999;
+}
+.sm-emoji-link:hover a > svg, .sm-emoji-link.active a > svg {
+  opacity: 1;
+  fill: #666;
+}
+.sm-emoji-link:hover a > svg[stroke-linecap], .sm-emoji-link.active a > svg[stroke-linecap] {
+  opacity: 1;
+  fill: transparent;
+  stroke: #666;
+}
+.sm-emoji-link.active {
+  border-bottom: 2px solid #666
+}
+
+.sm-emoji-scroll {
+  width: 100%;
+  height: calc(100% - 52px);
+  max-height: calc(100% - 52px);
+  scroll-behavior: smooth;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-color: #888 rgba(0, 0, 0, 0.2);
+  scrollbar-width: 8px;
+  position: relative;
+}
+.sm-emoji-scroll::-webkit-scrollbar{
+  width: 8px;
+}
+
+.sm-emoji-scroll::-webkit-scrollbar-track{
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.sm-emoji-scroll::-webkit-scrollbar-thumb{
+  transition-duration: .5s;
+  background-color: #666
+}
+
+.sm-emoji-scroll::-webkit-scrollbar-thumb:hover{
+  background-color: #555
+}
+
+.sm-emoji-search {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: #FFF;
+  padding-bottom: 10px;
+}
+.sm-emoji-search > input {
+  width: 90%;
+  outline: none;
+  border: 1px solid #CCC;
+  border-radius: 2.5px;
+  padding: 5px 10px;
+  transition: border 200ms;
+}
+.sm-emoji-search > input:focus, .sm-emoji-search > input:active, .sm-emoji-search > input:hover {
+  outline: none;
+  border: 1px solid #999;
+}
+.sm-emoji-search.sticky {
+  position: fixed;
+  width: 310px;
+  background-color: #FFF;
+}
+
+.sm-emoji-selection {
+  width: 100%;
+  margin-bottom: 10px;
+}
+.sm-emoji-title {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  background-color: #F7F7F7;
+  padding: 5px 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.sm-emoji-title svg {
+  margin: 0 5px;
+}
+
+.sm-emoji-group {
+  width: 100%;
+  display: flex; 
+  flex-wrap: wrap; 
+  font-size: 1.375rem
+}
+
+.sm-emoji-item {
+  cursor: pointer;
+  opacity: .8;
+  transition: opacity 200ms;
+  margin: 3.5px;
+}
+.sm-emoji-item:hover {
+  opacity: 1;
+}
+</style>