vue-intergrall-plugins 1.0.30 → 1.0.32

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/EmailItem.vue

@@ -28,7 +28,7 @@
           <span></span>
           <span></span>
         </span>
-        <ul class="email-actions-list box-shadow" v-if="actionsOpen" v-on-clickaway="() => actionsOpen = false">
+        <ul class="email-actions-list box-shadow" v-if="actionsOpen" v-clickaway="() => actionsOpen = false">
           <li class="email-action" @click="toggleOpenMessage()"
             v-text="`${!openMessage ? 'Visualizar' : 'Esconder'} texto do e-mail`"></li>
         </ul>
@@ -43,15 +43,17 @@
 </template>
 
 <script>
-// import sanitizeHtml from 'sanitize-html'
 import EmailFile from "./EmailFile.vue"
 import EmailTo from "./EmailTo.vue"
 import EmailFrom from "./EmailFrom.vue"
 import { textoLongo } from "@/mixins/formatarTexto"
-import * as VueClickAway from "vue-clickaway";
+import Clickaway from '@/directives/clickaway';
 
 export default {
-  mixins: [textoLongo, VueClickAway.mixin],
+  mixins: [textoLongo],
+  directives: {
+    clickaway: Clickaway
+  },
   components: { EmailFile, EmailTo, EmailFrom },
   props: {
     dominio: {

package/src/lib-components/Messages/ChatMessages.vue

@@ -125,13 +125,13 @@
           </span>
         </template>
       </div>
-      <div class="emoji-message-container" v-if="isEmojisOpen" v-on-clickaway="closeEmojis">
+      <div class="emoji-message-container" v-if="isEmojisOpen" v-clickaway="closeEmojis">
         <fa-icon :icon="['fas', 'times-circle']" class="sc-icone-fechar sc-icone-fechar--externo"
           @click="closeEmojis" />
         <Picker @insert-emoji="addReaction" />
       </div>
       <transition name="fade" mode="out-in" v-if="isMenuOpen">
-        <ul class="menu-flutuante" :class="origem" v-on-clickaway="closeMenu">
+        <ul class="menu-flutuante" :class="origem" v-clickaway="closeMenu">
           <li @click="responderMensagemHandler" v-if="showMenu.reply">
             <span> {{ dictionary.tit_responder_msg }} </span>
           </li>
@@ -156,7 +156,7 @@ import InteratividadeFormulario from "./InteratividadeFormulario";
 import Picker from "../Chat/Picker";
 import { formataTimezoneData } from "../../services/textFormatting";
 import LinkPreview from "./LinkPreview";
-import * as VueClickAway from "vue-clickaway";
+import Clickaway from '@/directives/clickaway';
 
 export default {
   components: {
@@ -214,7 +214,9 @@ export default {
   created() {
     if (!this.$root.$refs.chatMessages) this.$root.$refs.chatMessages = this;
   },
-  mixins: [VueClickAway.mixin],
+  directives: {
+    clickaway: Clickaway
+  },
   data() {
     return {
       strTooltipAux: "",
@@ -294,8 +296,8 @@ export default {
 
       if (this.tipo_origem) {
         tooltipStar += `${this.dictionary["tipo_origem"]}: ${this.dictionary[`tipo_origem_${this.tipo_origem}`]
-            ? this.dictionary[`tipo_origem_${this.tipo_origem}`]
-            : this.tipo_origem
+          ? this.dictionary[`tipo_origem_${this.tipo_origem}`]
+          : this.tipo_origem
           }<br/>`;
       }
 

package/src/lib-components/Messages/InteratividadePopup.vue

@@ -1,32 +1,16 @@
 <template>
-  <div class="interatividade-popup box-shadow" v-on-clickaway="away">
+  <div class="interatividade-popup box-shadow" v-clickaway="away">
     <div class="interatividade-popup-titulo" v-if="titulo">
       <h1>
         <span v-html="titulo"></span>
         <fa-icon :icon="['fas', 'times-circle']" @click="away" />
       </h1>
     </div>
-    <div
-      class="interatividade-popup-conteudo"
-      v-for="(objItem, index) in lista"
-      :key="index"
-    >
+    <div class="interatividade-popup-conteudo" v-for="(objItem, index) in lista" :key="index">
       <template v-if="objItem.items && objItem.items.length">
-        <div
-          class="interatividade-popup-item"
-          v-for="(item, indexItem) in objItem.items"
-          :key="`${index}${indexItem}`"
-        >
-          <p
-            v-if="item.title"
-            v-html="item.title"
-            class="interatividade-popup-item-titulo"
-          ></p>
-          <p
-            v-if="item.description"
-            v-html="item.description"
-            class="interatividade-popup-item-desc"
-          ></p>
+        <div class="interatividade-popup-item" v-for="(item, indexItem) in objItem.items" :key="`${index}${indexItem}`">
+          <p v-if="item.title" v-html="item.title" class="interatividade-popup-item-titulo"></p>
+          <p v-if="item.description" v-html="item.description" class="interatividade-popup-item-desc"></p>
         </div>
       </template>
     </div>
@@ -34,10 +18,12 @@
 </template>
 
 <script>
-import * as VueClickAway from "vue-clickaway";
+import Clickaway from '@/directives/clickaway';
 
 export default {
-  mixins: [VueClickAway.mixin],
+  directives: {
+    clickaway: Clickaway
+  },
   props: {
     lista: {
       type: [Array, Object],
@@ -90,6 +76,7 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
+
 .interatividade-popup-titulo h1 svg {
   color: #e74c3c;
   cursor: pointer;