vue-intergrall-plugins 0.0.102 → 0.0.108

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

@@ -0,0 +1,111 @@
+<template>
+  <div class="skeleton-picker">
+    <div class="skeleton-options">
+      <div class="opt box-shadow ov__skeleton--animation"></div>
+      <div class="opt box-shadow ov__skeleton--animation"></div>
+      <div class="opt box-shadow ov__skeleton--animation"></div>
+      <div class="opt box-shadow ov__skeleton--animation"></div>
+      <div class="opt box-shadow ov__skeleton--animation"></div>
+      <div class="opt box-shadow ov__skeleton--animation"></div>
+      <div class="opt box-shadow ov__skeleton--animation"></div>
+      <div class="opt box-shadow ov__skeleton--animation"></div>
+      <div class="opt box-shadow ov__skeleton--animation"></div>
+    </div>
+    <div class="skeleton-input box-shadow ov__skeleton--animation"></div>
+    <div class="skeleton-label box-shadow ov__skeleton--animation"></div>
+    <div class="skeleton-list">
+      <div class="opt box-shadow ov__skeleton--animation"></div>
+      <div class="opt box-shadow ov__skeleton--animation"></div>
+      <div class="opt box-shadow ov__skeleton--animation"></div>
+      <div class="opt box-shadow ov__skeleton--animation"></div>
+      <div class="opt box-shadow ov__skeleton--animation"></div>
+      <div class="opt box-shadow ov__skeleton--animation"></div>
+      <div class="opt box-shadow ov__skeleton--animation"></div>
+      <div class="opt box-shadow ov__skeleton--animation"></div>
+      <div class="opt box-shadow ov__skeleton--animation"></div>
+      <div class="opt box-shadow ov__skeleton--animation"></div>
+      <div class="opt box-shadow ov__skeleton--animation"></div>
+      <div class="opt box-shadow ov__skeleton--animation"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</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);
+  }
+
+  .ov__skeleton--animation {
+    animation: skeleton-loading 1s linear infinite alternate;  
+  } 
+  @keyframes skeleton-loading {
+    0% { 
+      background-color: #F7F7F7;
+    }
+    70% { 
+      background-color: #EDEDED;
+    }
+    100% { 
+      background-color: #EDEDED;
+    }
+  }
+
+  .skeleton-picker {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 91;
+    border-radius: 5px;
+    background-color: #FFF;
+    border: 1px solid #CCC;
+  }
+
+  .skeleton-options {
+    width: 100%;
+    height: 48px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 15px;
+    border-bottom: 1px solid #CCC;
+  }
+  .skeleton-options .opt {
+    width: 25px;
+    height: 50%;
+  }
+
+  .skeleton-input {
+    width: calc(100% - 30px);
+    height: 25px;
+    margin: 7px 15px;
+    border-radius: 2.5px;
+  }
+
+  .skeleton-label {
+    margin: 15px 0;
+    width: 100%;
+    height: 30px;
+  }
+  
+  .skeleton-list {
+    width: 100%;
+    padding-left: 7.5px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  .skeleton-list .opt {
+    margin: 0 5px 15px 6px;
+    width: 25px;
+    height: 25px;
+  }
+</style>

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

@@ -1,12 +1,13 @@
 <template>
   <div class="text-footer-container" :class="{'bigger' : cssStyle.height}" v-on-clickaway="away" v-if="textId" @drop.stop="dropFile" @dragenter.prevent @dragover.prevent>
     <div class="text-footer" :class="cssStyle.width ? cssStyle.width: ''" :style="`background-color: ${cssStyle.backgroundColor}`">
-      <EmojisTextFooter 
+      <BtnEmojis 
         v-show="buttons.hasEmojis && !audioFile"
         :ref="`${this.textId}`"
         :emojiId="`${this.textId}`"
         :down="emojiSettings.openEmojisFrom == 'top' ? false : true"
         :small="emojiSettings.smallEmojis"
+        :biggerTextarea="cssStyle.height ? true : false"
         @insert-emoji="insertEmoji"
       />
       <transition name="fade">
@@ -42,7 +43,7 @@
           <fa-icon :icon="['fas', 'paper-plane']" />
         </span>
       </div>
-      <div v-if="buttons.hasFiles || buttons.hasAudio" class="text-footer-actions" :class="{'outside-buttons' : cssStyle.outsideButtons && !audioFile}">
+      <div v-if="buttons.hasFiles || buttons.hasAudio || buttons.hasExpand" class="text-footer-actions" :class="{'outside-buttons' : cssStyle.outsideButtons && !audioFile}">
         <BtnMic 
           v-show="buttons.hasAudio && !audioFile"
           :dictionary="dictionary"
@@ -62,6 +63,7 @@
         <BtnExpand 
           v-show="buttons.hasExpand && !audioFile"
           @expand-textarea="$emit('expand-textarea')"
+          :dictionary="dictionary"
         />
       </div>
     </div>
@@ -73,7 +75,7 @@ import { setResizeListeners, resetTargets } from "@/services/autoResize"
 import { mixin as clickaway } from "vue-clickaway"
 import { returnMessageWithHexa } from "@/services/textFormatting"
 
-import EmojisTextFooter from "./EmojisTextFooter"
+import BtnEmojis from "./BtnEmojis"
 import Loader from "../Loader/Loader"
 import RemainingCharacters from "./RemainingCharacters"
 import BtnMic from "./BtnMic"
@@ -81,7 +83,7 @@ import BtnFiles from "./BtnFiles"
 import BtnExpand from "./BtnExpand"
 
 export default {
-  components: { EmojisTextFooter, Loader, BtnMic, BtnFiles, BtnExpand, RemainingCharacters },
+  components: { BtnEmojis, Loader, BtnMic, BtnFiles, BtnExpand, RemainingCharacters },
   mixins: [ clickaway ],
   props: {
     buttons: {
@@ -152,6 +154,8 @@ export default {
   mounted() {
     setResizeListeners(this.$el, ".js-autoresize", ".js-parentresize")
 
+    console.log(this.buttons)
+
     // this.$root.$on("drop-file", (file, type) => { if(this.buttons.hasFiles) this.fileUpload(file, type, true) })
     // this.$root.$on("toggle-msg-formatada", () => { this.toggleHSM() })
     // this.$root.$on("textarea-focus", () => { this.focusTextarea() })
@@ -176,13 +180,29 @@ export default {
       this.sendFinalMessage()
     },
     insertEmoji(emoji) {
-      const textarea = document.querySelector(`#text-footer-${this.textId}`)
-      if(textarea) {
-        this.focusTextarea()
-        const cursorStart = textarea.selectionStart
-        const cursorEnd = textarea.selectionEnd
-        this.message = this.message.slice(0, cursorStart) + emoji.native + this.message.slice(cursorEnd)
+      try {
+        const textarea = document.querySelector(`#text-footer-${this.textId}`)
+        console.log("emoji: ", emoji)
+        console.log(textarea)
+        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 ao inserir emoji")
+        console.error(e)
       }
     },
     verifyMessage() {
@@ -660,12 +680,6 @@ ul {
 .vs__dropdown-menu {
   font-size: 0.85rem !important; }
 
-.emoji-text-container {
-  position: relative; }
-  .emoji-text-container .emoji-text-btn {
-    font-size: 1.2rem;
-    cursor: pointer; }
-
 .emoji-mart-anchor, .emoji-mart-emoji span {
   cursor: pointer !important; }
 

package/src/lib-components/Templates/TemplateGenerator.vue

@@ -212,6 +212,7 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
 
 .tg-container {
   width: 100%;
+  max-width: 800px;
   display: flex;
   flex-direction: column;
   overflow-x: hidden;
@@ -250,6 +251,9 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   text-overflow: ellipsis;
   flex: 1;
 }
+.tg-select .vs__selected-options > input {
+  flex-grow: 0;
+}
 
 .vs__dropdown-option {
   transition: background-color 150ms;

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

@@ -1,116 +0,0 @@
-<template>
-  <div class="emoji-text-container" v-on-clickaway="away">
-    <div
-      class="emoji-text-btn"
-      @click="toggleEmojiSelection()"
-      v-text="String.fromCodePoint(0x1f61c)"
-    >
-    </div>
-    <picker
-      v-show="showEmojis"
-      :showPreview="false"
-      :skin="1"
-      :native="true"
-      :enableFrequentEmojiSort="true"
-      :i18n="emojiTexts"
-      :include="['recent', 'people', 'nature', 'foods', 'activity', 'places', 'objects']"
-      :perLine="7"
-      :title="'Smart Channel Emojis'"
-      :ref="emojiId"
-      :emojiTooltip="true"
-      @select="addEmoji" />
-  </div>
-</template>
-
-<script>
-
-import { Picker } from 'emoji-mart-vue'
-import { mixin as clickaway } from 'vue-clickaway'
-
-export default {
-  components: {
-    "picker" : Picker
-  },
-  mixins: [ clickaway ],
-  props: {
-    emojiId: {
-      type: String,
-      required: true
-    },
-    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 + 5)
-      return 40
-    }
-  },
-  data(){
-    return{
-      showEmojis: false,
-      emojiTexts: {
-        search: "Pesquisar",
-        notfound: "Nenhum emoji encontrado",
-        categories: {
-          search: "Resultados da pesquisa",
-          recent: "Recentes",
-          people: "Pessoas & Expressoes",
-          nature: "Animais & Natureza",
-          foods: "Comidas & Bebibas",
-          activity: "Atividades",
-          places: "Viagens & Lugares",
-          objects: "Objetos"
-        }
-      }
-    }
-  },
-  created() {
-    this.$root.$refs[`etf-${this.emojiId}`] = this
-  },
-  mounted() {
-    this.setPosition()
-  },
-  methods: {
-    setPosition() {
-      if(this.$refs[this.emojiId] && this.$refs[this.emojiId].$el){
-        this.$refs[this.emojiId].$el.style.position = "absolute"
-        this.$refs[this.emojiId].$el.style.top = `${this.top}px`
-        this.left ? this.$refs[this.emojiId].$el.style.left = "0" : this.$refs[this.emojiId].$el.style.right = "0"
-        this.$refs[this.emojiId].$el.style.height = `${this.height}px`
-      }
-    },
-    addEmoji(emoji){
-      this.$emit("insert-emoji", emoji)
-    },
-    toggleEmojiSelection() {
-      this.showEmojis = !this.showEmojis
-    },
-    away() {
-      this.showEmojis = false
-    }
-  }
-}
-</script>