vue-intergrall-plugins 1.0.31 → 1.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-intergrall-plugins",
-  "version": "1.0.31",
+  "version": "1.0.33",
   "description": "",
   "main": "dist/vue-intergrall-plugins.ssr.js",
   "browser": "dist/vue-intergrall-plugins.esm.js",
@@ -50,7 +50,6 @@
     "core-js": "^3.18.1",
     "postcss": "^8.3.8",
     "vue": "^2.6.14",
-    "vue-clickaway": "^2.2.2",
     "vue-select": "^3.13.0",
     "vue-tippy": "^4.12.0",
     "vue-toasted": "^1.1.28",
@@ -64,4 +63,4 @@
     "kind-of": "^6.0.3",
     "vue-sanitize": "^0.2.3"
   }
-}
+}

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

@@ -1,10 +1,6 @@
 <template>
-  <div class="emoji-text-container" v-on-clickaway="away">
-    <div
-      class="emoji-text-btn"
-      @click="toggleEmojiSelection()"
-      v-text="String.fromCodePoint(0x1f61c)"
-    ></div>
+  <div class="emoji-text-container" v-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>
@@ -13,11 +9,13 @@
 
 <script>
 import Picker from "./Picker";
-import * as VueClickAway from "vue-clickaway";
+import Clickaway from '@/directives/clickaway';
 
 export default {
   components: { Picker },
-  mixins: [VueClickAway.mixin],
+  directives: {
+    clickaway: Clickaway
+  },
   props: {
     emojiId: {
       type: String,
@@ -81,8 +79,8 @@ export default {
               ? this.$refs[refId].$el
               : this.$refs[refId]
             : this.$refs[refId]
-            ? this.$refs[refId]
-            : false;
+              ? this.$refs[refId]
+              : false;
           if (elem) {
             elem.style.position = "absolute";
             elem.style.top = `${this.top}px`;
@@ -112,6 +110,7 @@ export default {
 .emoji-text-container {
   position: relative;
 }
+
 .emoji-text-container .emoji-text-btn {
   font-size: 19.2px;
   cursor: pointer;

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

@@ -1,9 +1,6 @@
 <template>
-  <span
-    class="text-footer-actions--btn"
-    :class="{ 'files-activated': openFiles || file.name }"
-    @click="openFilesByClip()"
-  >
+  <span class="text-footer-actions--btn" :class="{ 'files-activated': openFiles || file.name }"
+    @click="openFilesByClip()">
     <!-- || file.length -->
     <!-- <transition name="fade">
       <span v-if="fileSize > 0" @click.stop="toggleFilePreview" v-tippy :content="`Visualizar ${fileSize} arquivo(s)`" class="files-counter">
@@ -12,19 +9,11 @@
     </transition> -->
     <fa-icon :icon="['fas', 'paperclip']" :title="dictionary.title_selecionar_anexo" />
     <transition name="fade">
-      <span
-        v-if="fileSize > 0"
-        @click.stop="toggleFilePreview"
-        v-tippy
-        :content="
-          !fileSettings.handleFilePreview
-            ? dictionary.msg_abrir_anexos
-            : `${file.length} anexo(s) selecionado(s)`
-        "
-        :class="`${
-          fileSettings.filePreviewStyle == 2 ? 'files-counter-2' : 'files-counter'
-        }`"
-      >
+      <span v-if="fileSize > 0" @click.stop="toggleFilePreview" v-tippy :content="!fileSettings.handleFilePreview
+          ? dictionary.msg_abrir_anexos
+          : `${file.length} anexo(s) selecionado(s)`
+        " :class="`${fileSettings.filePreviewStyle == 2 ? 'files-counter-2' : 'files-counter'
+          }`">
         <template v-if="fileSettings.filePreviewStyle == 1">
           {{ fileSize }}
         </template>
@@ -34,103 +23,45 @@
       </span>
     </transition>
     <transition name="show">
-      <div
-        v-if="openFiles && hasButtonFiles"
-        class="text-footer-files-container"
-        :class="{ horizontal: cssStyle.outsideButtons }"
-      >
+      <div v-if="openFiles && hasButtonFiles" class="text-footer-files-container"
+        :class="{ horizontal: cssStyle.outsideButtons }">
         <template v-if="!fileSettings.multiple">
-          <div
-            class="files-btn images"
-            :class="{ 'margin-bottom': cssStyle.outsideButtons }"
-            :title="dictionary.title_anexo_img"
-            @click="openSelectFileHandler('img')"
-          >
+          <div class="files-btn images" :class="{ 'margin-bottom': cssStyle.outsideButtons }"
+            :title="dictionary.title_anexo_img" @click="openSelectFileHandler('img')">
             <fa-icon :icon="['fas', 'image']" />
           </div>
-          <div
-            class="files-btn docs"
-            :title="dictionary.title_anexo_doc"
-            @click="openSelectFileHandler('doc')"
-          >
+          <div class="files-btn docs" :title="dictionary.title_anexo_doc" @click="openSelectFileHandler('doc')">
             <fa-icon :icon="['fas', 'file-alt']" />
           </div>
         </template>
-        <div
-          v-else
-          class="files-btn both"
-          :title="dictionary.title_anexo_arq"
-          @click="openSelectFileHandler('both')"
-        >
+        <div v-else class="files-btn both" :title="dictionary.title_anexo_arq" @click="openSelectFileHandler('both')">
           <fa-icon :icon="['fas', 'image']" />
           <fa-icon :icon="['fas', 'file-alt']" />
         </div>
-        <div
-          v-if="fileSettings.systemButton"
-          class="files-btn system"
-          :title="dictionary.title_anexo_sistema"
-          @click="openSelectFileHandler('system')"
-        >
+        <div v-if="fileSettings.systemButton" class="files-btn system" :title="dictionary.title_anexo_sistema"
+          @click="openSelectFileHandler('system')">
           <fa-icon :icon="['fas', 'server']" />
         </div>
       </div>
     </transition>
     <div class="files-pointers d-none">
-      <input
-        v-if="fileSettings.multiple"
-        type="file"
-        :id="`both-${textId}`"
-        :accept="acceptedExtensions"
-        multiple
-        @change="fileUpload($event, 'both')"
-      />
-      <input
-        v-if="!fileSettings.multiple"
-        type="file"
-        :id="`img-${textId}`"
-        :accept="acceptedExtensions"
-        @change="fileUpload($event, 'img')"
-      />
-      <input
-        v-if="!fileSettings.multiple"
-        type="file"
-        :id="`doc-${textId}`"
-        :accept="acceptedExtensions"
-        @change="fileUpload($event, 'doc')"
-      />
+      <input v-if="fileSettings.multiple" type="file" :id="`both-${textId}`" :accept="acceptedExtensions" multiple
+        @change="fileUpload($event, 'both')" />
+      <input v-if="!fileSettings.multiple" type="file" :id="`img-${textId}`" :accept="acceptedExtensions"
+        @change="fileUpload($event, 'img')" />
+      <input v-if="!fileSettings.multiple" type="file" :id="`doc-${textId}`" :accept="acceptedExtensions"
+        @change="fileUpload($event, 'doc')" />
     </div>
     <transition name="fade">
-      <div
-        class="text-footer-preview-container"
-        @click.stop
-        v-show="showFilePreview"
-        :class="[previewContainerClass]"
-        v-on-clickaway="away"
-      >
-        <SingleFilePreview
-          v-if="!fileSettings.multiple && showFilePreview"
-          :dictionary="dictionary"
-          :file="file"
-          :isDoc="isDoc"
-          :fileFormatError="fileFormatError"
-          :validFileFormats="validFileFormats"
-          :imagePreview="imagePreview"
-          :textId="textId"
-          @delete-file="deleteFile"
-          @open-image="openImage"
-          @close="away"
-        />
-        <MultipleFilePreview
-          v-else-if="fileSettings.multiple && showFilePreview"
-          :dictionary="dictionary"
-          :file="file"
-          :fileFormatError="fileFormatError"
-          :validFileFormats="validFileFormats"
-          @delete-file="deleteFile"
-          @delete-specific-file="deleteSpecificFile"
-          @open-image="openImage"
-          @close="away"
-        />
+      <div class="text-footer-preview-container" @click.stop v-show="showFilePreview" :class="[previewContainerClass]"
+        v-clickaway="away">
+        <SingleFilePreview v-if="!fileSettings.multiple && showFilePreview" :dictionary="dictionary" :file="file"
+          :isDoc="isDoc" :fileFormatError="fileFormatError" :validFileFormats="validFileFormats"
+          :imagePreview="imagePreview" :textId="textId" @delete-file="deleteFile" @open-image="openImage"
+          @close="away" />
+        <MultipleFilePreview v-else-if="fileSettings.multiple && showFilePreview" :dictionary="dictionary" :file="file"
+          :fileFormatError="fileFormatError" :validFileFormats="validFileFormats" @delete-file="deleteFile"
+          @delete-specific-file="deleteSpecificFile" @open-image="openImage" @close="away" />
       </div>
     </transition>
   </span>
@@ -141,6 +72,7 @@
 .fade-leave-active {
   transition: opacity 0.3s;
 }
+
 .fade-enter,
 .fade-leave-to {
   opacity: 0;
@@ -165,9 +97,11 @@
   color: #fff;
   font-weight: 900;
 }
+
 .files-counter:hover {
   opacity: 1;
 }
+
 .files-counter-2 {
   transform: translate(-15px, 28px);
   opacity: 0.9;
@@ -178,9 +112,11 @@
   color: #888;
   font-size: 12.8px;
 }
+
 .files-counter-2 svg {
   margin-left: 5px;
 }
+
 .files-counter-2:hover {
   opacity: 1;
   text-decoration: underline;
@@ -188,13 +124,15 @@
 </style>
 
 <script>
-import * as VueClickAway from "vue-clickaway";
+import Clickaway from '@/directives/clickaway';
 import MultipleFilePreview from "./MultipleFilePreview";
 import SingleFilePreview from "./SingleFilePreview";
 
 export default {
   components: { SingleFilePreview, MultipleFilePreview },
-  mixins: [VueClickAway.mixin],
+  directives: {
+    clickaway: Clickaway
+  },
   props: {
     textId: {
       type: String,
@@ -449,8 +387,8 @@ export default {
             this.validFileFormats = `Imagens: ${this.fileSettings.imagesExtensions
               .split("|")
               .join(", ")} - Documentos: ${this.fileSettings.docsExtensions
-              .split("|")
-              .join(", ")}`;
+                .split("|")
+                .join(", ")}`;
         }
       });
 

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

@@ -1,43 +1,17 @@
 <template>
-  <div
-    class="expand-textarea"
-    @drop.stop="dropFile"
-    @dragenter.prevent
-    @dragover.prevent
-    v-on-clickaway="away"
-  >
-    <fa-icon
-      :icon="['fas', 'times-circle']"
-      class="sc-icone-fechar sc-icone-fechar--externo"
-      @click="$emit('fechar-expand')"
-    />
+  <div class="expand-textarea" @drop.stop="dropFile" @dragenter.prevent @dragover.prevent v-clickaway="away">
+    <fa-icon :icon="['fas', 'times-circle']" class="sc-icone-fechar sc-icone-fechar--externo"
+      @click="$emit('fechar-expand')" />
     <div class="expand-textarea-content">
       <h1 class="expand-textarea-title" v-text="textareaSettings.title"></h1>
-      <textarea
-        :ref="identifier"
-        :placeholder="textareaSettings.placeholderMessage"
-        v-model="message"
-        @input="sendFinalMessage"
-        @paste="pasteImage"
-      >
+      <textarea :ref="identifier" :placeholder="textareaSettings.placeholderMessage" v-model="message"
+        @input="sendFinalMessage" @paste="pasteImage">
       </textarea>
       <div class="expand-textarea-footer">
-        <BtnEmojis
-          v-show="buttons.hasEmojis"
-          :ref="`${identifier}-emojis`"
-          :emojiId="`${identifier}-em`"
-          :left="false"
-          @insert-emoji="insertEmoji"
-        />
-        <BtnFiles
-          v-if="buttons.hasFiles"
-          :textId="identifier"
-          :dictionary="dictionary"
-          :fileSettings="fileSettings"
-          :ref="`${identifier}-file`"
-          @set-file-vars="setFileVars"
-          @open-image="openImage"
-        />
+        <BtnEmojis v-show="buttons.hasEmojis" :ref="`${identifier}-emojis`" :emojiId="`${identifier}-em`" :left="false"
+          @insert-emoji="insertEmoji" />
+        <BtnFiles v-if="buttons.hasFiles" :textId="identifier" :dictionary="dictionary" :fileSettings="fileSettings"
+          :ref="`${identifier}-file`" @set-file-vars="setFileVars" @open-image="openImage" />
         <slot name="btn-1"></slot>
         <slot name="btn-2"></slot>
         <!-- "expand-textarea-button" -->
@@ -47,14 +21,16 @@
 </template>
 
 <script>
-import * as VueClickAway from "vue-clickaway";
+import Clickaway from '@/directives/clickaway';
 import BtnEmojis from "./BtnEmojis";
 import BtnFiles from "./BtnFiles";
 import { returnMessageWithHexa } from "../../services/textFormatting";
 
 export default {
   components: { BtnEmojis, BtnFiles },
-  mixins: [VueClickAway.mixin],
+  directives: {
+    clickaway: Clickaway
+  },
   props: {
     identifier: {
       type: String,
@@ -313,6 +289,7 @@ export default {
   top: -10px;
   right: -10px;
 }
+
 .sc-icone-fechar.sc-icone-fechar--interno {
   top: 10px;
   right: 10px;
@@ -334,6 +311,7 @@ export default {
   display: flex;
   flex-direction: column;
 }
+
 .expand-textarea-title {
   padding: 2.5px 8px;
   min-height: 38px;
@@ -344,6 +322,7 @@ export default {
   background-color: #222;
   color: #fff;
 }
+
 .expand-textarea-content textarea {
   padding: 10px;
   flex: 1;
@@ -353,10 +332,12 @@ export default {
   outline: none;
   overflow-x: hidden;
 }
+
 .expand-textarea-content textarea:hover,
 .expand-textarea-content textarea:active {
   outline: none;
 }
+
 .expand-textarea-footer {
   display: flex;
   justify-content: flex-end;
@@ -365,6 +346,7 @@ export default {
   background-color: #f7f7f7;
   position: relative;
 }
+
 .expand-textarea-footer .text-footer-preview-container {
   position: absolute;
   top: -200px;
@@ -372,6 +354,7 @@ export default {
   height: 200px;
   background: #f7f7f7;
 }
+
 .expand-textarea-footer .text-footer-actions--btn {
   width: 36px;
   height: 36px;
@@ -388,6 +371,7 @@ export default {
   opacity: 0.9;
   transition: all 300ms;
 }
+
 .expand-textarea-footer .text-footer-actions--btn:hover {
   opacity: 1;
   background-color: rgba(30, 30, 30, 0.1);
@@ -411,18 +395,22 @@ export default {
   border-radius: 2.5px;
   position: relative;
 }
+
 .expand-textarea-button.green {
   background-color: #2a963a;
   color: #fff;
   margin-right: 10px;
 }
+
 .expand-textarea-button.red {
   background-color: #e74c3c;
   color: #fff;
 }
+
 .expand-textarea-button:hover {
   opacity: 1;
 }
+
 .expand-textarea-button:active {
   opacity: 1;
   box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
@@ -432,6 +420,7 @@ export default {
   -ms-transform: translateY(1px);
   transform: translateY(1px);
 }
+
 .expand-textarea-button.carregando {
   background-color: #777;
 }

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-footer-container" :class="{ bigger: cssStyle.height }" v-on-clickaway="away" v-if="textId"
+  <div class="text-footer-container" :class="{ bigger: cssStyle.height }" v-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}`">
@@ -79,7 +79,7 @@
 </template>
 
 <script>
-import * as VueClickAway from "vue-clickaway";
+import Clickaway from '@/directives/clickaway';
 import { resetTargets, setResizeListeners } from "../../services/autoResize";
 import { returnMessageWithHexa } from "../../services/textFormatting";
 
@@ -107,7 +107,9 @@ export default {
     BtnScreenShare,
     BtnDownloadAllFiles,
   },
-  mixins: [VueClickAway.mixin],
+  directives: {
+    clickaway: Clickaway
+  },
   props: {
     buttons: {
       type: Object,

package/src/lib-components/Email/EmailFrom.vue

@@ -2,15 +2,13 @@
   <div class="email-from">
     <p class="from" v-if="currentName" v-text="currentName" :title="currentName"></p>
     <div v-if="showMail" class="additional-container">
-      <span class="additional" v-text="`<${mail}>`" :title="mail"></span>
+      <span class="additional" v-text="`${mail}`" :title="mail"></span>
     </div>
   </div>
 </template>
 
 <style scoped>
 .email-from {
-  width: 100%;
-  flex: 1;
   display: flex;
   align-items: center;
 }
@@ -19,6 +17,8 @@
   font-size: .75rem;
   font-weight: bold;
   white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
   margin: 0;
 }
 
@@ -34,6 +34,7 @@
   margin-left: 5px;
   font-size: .75rem;
   color: gray;
+  text-overflow: ellipsis;
 }
 </style>
 
@@ -54,16 +55,6 @@ export default {
       type: Boolean,
       required: false,
       default: true
-    },
-    isLastIndex: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  computed: {
-    filteredName() {
-      return !this.isLastIndex ? `${this.currentName}, ` : this.currentName
     }
   }
 }