vue-intergrall-plugins 1.1.11 → 1.1.13

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

@@ -1,405 +1,405 @@
-<template>
-  <div class="sm-emoji-picker box-shadow" @click.stop>
-    <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
-                  v-if="
-                    allEmojis.emojis &&
-                    allEmojis.emojis[emojiKey] &&
-                    allEmojis.emojis[emojiKey].finalEmoji
-                  "
-                  @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 = [];
-      }
-    },
-  },
-};
-</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: 0.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: 0.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: 22px;
-}
-
-.sm-emoji-item {
-  cursor: pointer;
-  opacity: 0.8;
-  transition: opacity 200ms;
-  margin: 3.5px;
-}
-.sm-emoji-item:hover {
-  opacity: 1;
-}
-</style>
+<template>
+  <div class="sm-emoji-picker box-shadow" @click.stop>
+    <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
+                  v-if="
+                    allEmojis.emojis &&
+                    allEmojis.emojis[emojiKey] &&
+                    allEmojis.emojis[emojiKey].finalEmoji
+                  "
+                  @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 = [];
+      }
+    },
+  },
+};
+</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: 0.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: 0.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: 22px;
+}
+
+.sm-emoji-item {
+  cursor: pointer;
+  opacity: 0.8;
+  transition: opacity 200ms;
+  margin: 3.5px;
+}
+.sm-emoji-item:hover {
+  opacity: 1;
+}
+</style>