vue-intergrall-plugins 0.0.97 → 0.0.103

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-footer-container" v-on-clickaway="away" v-if="textId" @drop.stop="dropFile" @dragenter.prevent @dragover.prevent>
+  <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 
         v-show="buttons.hasEmojis && !audioFile"
@@ -59,6 +59,11 @@
           @set-file-vars="setFileVars"
           @open-image="openImage"
         />
+        <BtnExpand 
+          v-show="buttons.hasExpand && !audioFile"
+          @expand-textarea="$emit('expand-textarea')"
+          :dictionary="dictionary"
+        />
       </div>
     </div>
   </div>
@@ -74,19 +79,20 @@ import Loader from "../Loader/Loader"
 import RemainingCharacters from "./RemainingCharacters"
 import BtnMic from "./BtnMic"
 import BtnFiles from "./BtnFiles"
+import BtnExpand from "./BtnExpand"
 
 export default {
-  components: { EmojisTextFooter, Loader, BtnMic, BtnFiles, RemainingCharacters },
+  components: { EmojisTextFooter, Loader, BtnMic, BtnFiles, BtnExpand, RemainingCharacters },
   mixins: [ clickaway ],
   props: {
     buttons: {
       type: Object,
-      default: () => { return { hasEmojis: false, hasSendButton: false, hasFiles: false, hasAudio: false } },
+      default: () => { return { hasEmojis: false, hasSendButton: false, hasFiles: false, hasAudio: false, hasExpand: false } },
       required: false
     },
     cssStyle: {
       type: Object,
-      default: () => { return { width: "full", backgroundColor: "#FFF", outsideButtons: false } },
+      default: () => { return { height: false, width: "full", backgroundColor: "#FFF", outsideButtons: false } },
       required: false
     },
     textareaSettings: {
@@ -193,12 +199,12 @@ export default {
       if(this.textareaSettings.disabled) return false
 
       if(this.fileFormatError) {
-        this.$toasted.global.defaultError({ msg: this.dictionary.msg_formato_invalido })
+        if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError({ msg: this.dictionary.msg_formato_invalido })
         const str = {
           img: this.fileSettings.imagesExtensions.split("|").join(", "),
           doc: this.fileSettings.docsExtensions.split("|").join(", ")
         }
-        this.$toasted.global.showValidFormats({ msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}` })
+        if (!document.querySelector(".toasted.toasted-primary.info")) this.$toasted.global.showValidFormats({ msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}` })
         return false
       }
 
@@ -211,6 +217,7 @@ export default {
     },
     formatMessage(message) {
       if(!message) return ""
+      message = message.trim()
       message = message.replace(/\n$/, "", message)
       message = returnMessageWithHexa(message)
       message = this.removeHTMLElementsFromMessage(message)
@@ -312,7 +319,7 @@ export default {
         img: this.fileSettings.imagesExtensions.split("|").join(", "),
         doc: this.fileSettings.docsExtensions.split("|").join(", ")
       }
-      this.$toasted.global.showValidFormats({ msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}` })
+      if (!document.querySelector(".toasted.toasted-primary.info")) this.$toasted.global.showValidFormats({ msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}` })
       return false
     },
     filesHandler(files) {
@@ -337,12 +344,12 @@ export default {
       if(!invalidFile) {
         this.$refs[`${this.textId}-file`].fileUpload(files, fileType, true)
       }else {
-        this.$toasted.global.defaultError({ msg: this.dictionary.msg_formato_invalido })
+        if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError({ msg: this.dictionary.msg_formato_invalido })
         const str = {
           img: this.fileSettings.imagesExtensions.split("|").join(", "),
           doc: this.fileSettings.docsExtensions.split("|").join(", ")
         }
-        this.$toasted.global.showValidFormats({ msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}` })
+        if (!document.querySelector(".toasted.toasted-primary.info")) this.$toasted.global.showValidFormats({ msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}` })
       }
     },
     dropFile(e) {
@@ -414,6 +421,15 @@ ul {
       width: 95%; }
     .text-footer-container .text-footer.medium {
       width: 75%; }
+  .text-footer-container.bigger .text-footer {
+    height: 80px;
+  }
+  .text-footer-container.bigger .text-footer > textarea {
+    font-size: .875rem;
+    height: 75px;
+    max-height: 75px;
+    min-height: 75px;
+  }
   .text-footer-container textarea {
     margin: 0 5px;
     border: unset;
@@ -460,7 +476,7 @@ ul {
     color: #444;
     position: relative;
     top: 30px;
-    left: 5px; }
+    left: -30px; }
     .text-footer-container .max-characters.no-width {
       width: 0; }
   .text-footer-container .text-footer-actions {
@@ -589,7 +605,7 @@ ul {
     position: absolute;
     left: 0;
     background-color: #F1f1f1;
-    border: 2px solid #222;
+    border: 2px solid #CCC;
     border-bottom: unset;
     border-top-left-radius: 2.5px;
     border-top-right-radius: 2.5px; }
@@ -607,47 +623,7 @@ ul {
       top: -80px;
       width: 100%;
       height: 75px; }
-    .text-footer-container .text-footer-preview-container .text-footer-exclude-file {
-      position: absolute;
-      top: 5px;
-      right: 5px;
-      cursor: pointer; 
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-width: 1rem;
-      min-height: 1rem;
-      background-color: #FFF;
-      border-radius: 50%;
-      }
-      .text-footer-container .text-footer-preview-container .text-footer-exclude-file svg {
-        transition: color 200ms;
-        color: #e9594a; }
-        .text-footer-container .text-footer-preview-container .text-footer-exclude-file svg:hover {
-          color: #E74C3C; }
-    .text-footer-container .text-footer-preview-container .text-footer-preview-title {
-      font-size: 1rem;
-      padding: 10px 0 0 10px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis; }
-    .text-footer-container .text-footer-preview-container .text-footer-image-preview {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 100%; }
-      .text-footer-container .text-footer-preview-container .text-footer-image-preview img {
-        cursor: pointer;
-        max-width: 98%;
-        max-height: 98%;
-        padding: 2%; }
-    .text-footer-container .text-footer-preview-container .text-footer-invalid-format {
-      color: #222;
-      padding: 10px; }
-      .text-footer-container .text-footer-preview-container .text-footer-invalid-format h3 {
-        font-weight: 500; }
-      .text-footer-container .text-footer-preview-container .text-footer-invalid-format h4 {
-        font-size: .9rem; }
+    
   .text-footer-container .text-footer-alt {
     margin-top: -12px;
     width: 100%;

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;