vue-intergrall-plugins 1.0.27 → 1.0.28

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

@@ -1,44 +1,18 @@
 <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}`"
-    >
-      <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"
-      />
+  <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}`">
+      <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">
         <Loader v-if="isSending" />
       </transition>
-      <textarea
-        class="js-autoresize"
-        v-if="!audioFile"
-        v-model="message"
-        :id="`text-footer-${this.textId}`"
-        :disabled="textareaSettings.disabled"
-        :placeholder="textareaSettings.placeholderMessage"
-        @input="sendFinalMessage"
-        @keydown.up="toggleStandardMessages"
-        @keydown.down="toggleStandardMessages"
-        @keydown.esc="closeEmojis"
-        @keydown.enter="sendMessageHandler"
-        @paste="pasteImage"
-      ></textarea>
+      <textarea class="js-autoresize" v-if="!audioFile" v-model="message" :id="`text-footer-${this.textId}`"
+        :disabled="textareaSettings.disabled" :placeholder="textareaSettings.placeholderMessage"
+        @input="sendFinalMessage" @keydown.up="toggleStandardMessages" @keydown.down="toggleStandardMessages"
+        @keydown.esc="closeEmojis" @keydown.enter="sendMessageHandler" @paste="pasteImage"></textarea>
       <div class="text-footer-audio" v-else>
         <div>
           <audio :src="audioSource" controls="controls"></audio>
@@ -48,111 +22,58 @@
           <fa-icon :icon="['fas', 'times']" />
         </span>
       </div>
-      <RemainingCharacters
-        :class="{ 'd-none': audioFile }"
-        :message="message"
-        :maxCharacters="textareaSettings.maxCharacters"
-      />
-      <div
-        v-if="
-          buttons.hasFiles ||
-          buttons.hasAudio ||
-          buttons.hasExpand ||
-          formattedMessageSettings.hasStandardMessages ||
-          buttons.hasScreenShare ||
-          buttons.hasDownloadAll ||
-          buttons.hasCustomButtom
-        "
-        class="text-footer-actions"
-        :class="{ 'outside-buttons': cssStyle.outsideButtons && !audioFile }"
-      >
-        <BtnDownloadAllFiles
-          v-show="buttons.hasDownloadAll && !audioFile"
-          @click-trigger="$emit('handle-download-files')"
-          :dictionary="dictionary"
-          :ref="`${textId}-download-files`"
-        />
-        <BtnScreenShare
-          v-show="buttons.hasScreenShare && !audioFile"
-          @handle-screen-share="handleScreenShare"
-          :dictionary="dictionary"
-          :ref="`${textId}-screen-share`"
-        />
-        <BtnMic
-          v-show="buttons.hasAudio && !audioFile"
-          :dictionary="dictionary"
-          @set-audio="setAudio"
-          :ref="`${textId}-mic`"
-        />
-        <BtnStandardMessages
-          v-show="formattedMessageSettings.hasStandardMessages && !audioFile"
-          :dictionary="dictionary"
-          :ref="`${textId}-standard-messages`"
-          @toggle-standard-messages="toggleStandardMessages"
-        />
-        <BtnFiles
-          v-show="buttons.hasFiles && !audioFile"
-          :textId="textId"
-          :dictionary="dictionary"
-          :fileSettings="fileSettings"
-          :cssStyle="cssStyle"
-          :ref="`${textId}-file`"
-          :hasButtonFiles="hasButtonFiles"
-          :externalFiles="externalFiles"
-          @set-file-vars="setFileVars"
-          @open-image="openImage"
-          @open-file-system="openFileSystem"
-          @reset-file-system="resetFileSystem"
-          @handle-file-preview="$emit('handle-file-preview')"
-          @handle-file-click="$emit('handle-file-click')"
-        />
-        <BtnExpand
-          v-show="buttons.hasExpand && !audioFile"
-          :ref="`${textId}-expand`"
-          @expand-textarea="$emit('expand-textarea')"
-          :dictionary="dictionary"
-        />
-        <div v-if="buttons.customButtom && buttons.customButtom.use" class="text-footer-actions--btn" @click="() => {
-          if(buttons.customButtom.callback) buttons.customButtom.callback()
-          if(buttons.customButtom.emiter) $emit(buttons.customButtom.emiter)
-        }" :title="buttons.customButtom.title">
-          <fa-icon :icon="buttons.customButtom.icon" />
-        </div>
+      <RemainingCharacters :class="{ 'd-none': audioFile }" :message="message"
+        :maxCharacters="textareaSettings.maxCharacters" />
+      <div v-if="
+        buttons.hasFiles ||
+        buttons.hasAudio ||
+        buttons.hasExpand ||
+        formattedMessageSettings.hasStandardMessages ||
+        buttons.hasScreenShare ||
+        buttons.hasDownloadAll ||
+        (customButtons && customButtons.length)
+      " class="text-footer-actions" :class="{ 'outside-buttons': cssStyle.outsideButtons && !audioFile }">
+        <BtnDownloadAllFiles v-show="buttons.hasDownloadAll && !audioFile"
+          @click-trigger="$emit('handle-download-files')" :dictionary="dictionary" :ref="`${textId}-download-files`" />
+        <BtnScreenShare v-show="buttons.hasScreenShare && !audioFile" @handle-screen-share="handleScreenShare"
+          :dictionary="dictionary" :ref="`${textId}-screen-share`" />
+        <BtnMic v-show="buttons.hasAudio && !audioFile" :dictionary="dictionary" @set-audio="setAudio"
+          :ref="`${textId}-mic`" />
+        <BtnStandardMessages v-show="formattedMessageSettings.hasStandardMessages && !audioFile"
+          :dictionary="dictionary" :ref="`${textId}-standard-messages`"
+          @toggle-standard-messages="toggleStandardMessages" />
+        <BtnFiles v-show="buttons.hasFiles && !audioFile" :textId="textId" :dictionary="dictionary"
+          :fileSettings="fileSettings" :cssStyle="cssStyle" :ref="`${textId}-file`" :hasButtonFiles="hasButtonFiles"
+          :externalFiles="externalFiles" @set-file-vars="setFileVars" @open-image="openImage"
+          @open-file-system="openFileSystem" @reset-file-system="resetFileSystem"
+          @handle-file-preview="$emit('handle-file-preview')" @handle-file-click="$emit('handle-file-click')" />
+        <BtnExpand v-show="buttons.hasExpand && !audioFile" :ref="`${textId}-expand`"
+          @expand-textarea="$emit('expand-textarea')" :dictionary="dictionary" />
+        <template v-if="customButtons && customButtons.length">
+          <div v-for="(button, index) in customButtons" :key="button.id || index" class="text-footer-actions--btn"
+            @click="button.callback(returnParams(button.params))" :title="button.title">
+            <fa-icon :icon="['fas', button.icon || 'question-circle']" v-if="!button.svgIcon" />
+            <span v-else v-html="button.svgIcon" :class="button.svgClass ? button.svgClass : ''"></span>
+          </div>
+        </template>
       </div>
       <div class="text-footer-actions" v-if="buttons.hasSendButton">
-        <span
-          class="text-footer-actions--btn"
-          :title="dictionary.title_enviar_msg"
-          @click="sendMessageHandler"
-        >
+        <span class="text-footer-actions--btn" :title="dictionary.title_enviar_msg" @click="sendMessageHandler">
           <fa-icon :icon="['fas', 'paper-plane']" />
         </span>
       </div>
     </div>
     <transition name="fade">
-      <StandardMessages
-        v-if="showStandardMessages"
-        :class="cssStyle.width ? cssStyle.width : ''"
-        :dictionary="dictionary"
-        :backgroundColor="cssStyle.backgroundColor"
-        :token_cliente="
-          formattedMessageSettings.token_cliente
-            ? formattedMessageSettings.token_cliente
-            : ''
-        "
-        :message="message"
-        :messageType="messageType"
-        :hasStandardMessages="
-          formattedMessageSettings.hasStandardMessages && showStandardMessages
-        "
-        @close-standard-messages="closeStandardMessages"
+      <StandardMessages v-if="showStandardMessages" :class="cssStyle.width ? cssStyle.width : ''"
+        :dictionary="dictionary" :backgroundColor="cssStyle.backgroundColor" :token_cliente="formattedMessageSettings.token_cliente
+          ? formattedMessageSettings.token_cliente
+          : ''
+          " :message="message" :messageType="messageType" :hasStandardMessages="formattedMessageSettings.hasStandardMessages && showStandardMessages
+            " @close-standard-messages="closeStandardMessages"
         @open-blocker-standard-message="openBlockerStandardMessage"
-        @close-blocker-standard-message="closeBlockerStandardMessage"
-        @set-message-type="setMessageType"
-        @set-standard-infos="setStandardInfos"
-        @add-standard-message="addStandardMessage"
-        @error-standard-message="$emit('error-standard-message')"
-      />
+        @close-blocker-standard-message="closeBlockerStandardMessage" @set-message-type="setMessageType"
+        @set-standard-infos="setStandardInfos" @add-standard-message="addStandardMessage"
+        @error-standard-message="$emit('error-standard-message')" />
     </transition>
   </div>
 </template>
@@ -283,6 +204,10 @@ export default {
       type: Array,
       required: false,
     },
+    customButtons: {
+      type: Array,
+      required: false
+    }
   },
   data() {
     return {
@@ -635,6 +560,28 @@ export default {
     closeStandardMessages() {
       this.showStandardMessages = false;
     },
+    returnParams(params) {
+      const defaultParams = {
+        message: this.message,
+      };
+
+      if (!params) return defaultParams;
+
+      const keys = params.instanceKeys.split("|");
+      if (!keys || !keys.length)
+        return {
+          defaultParams,
+          ...params.values,
+        };
+
+      const customParams = { ...params.values };
+      keys.forEach((key) => {
+        if (this[key]) customParams[key] = this[key];
+        else console.warn(`Cant find ${key} on 'this' instance`);
+      });
+
+      return Object.keys(customParams).length ? customParams : defaultParams;
+    }
   },
   destroyed() {
     // this.$root.$off("drop-file")
@@ -657,6 +604,7 @@ export default {
   width: 100%;
   position: relative;
 }
+
 .text-footer-container .text-footer {
   min-height: 48px;
   box-shadow: 0px 3px 7px -2px rgba(0, 0, 0, 0.45);
@@ -668,24 +616,30 @@ export default {
   padding: 5px 2px 5px 5px;
   border-radius: 5px;
 }
+
 .text-footer-container .text-footer.full {
   width: 100%;
 }
+
 .text-footer-container .text-footer.almostFull {
   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 {
+
+.text-footer-container.bigger .text-footer>textarea {
   font-size: 14px;
   height: 75px;
   max-height: 75px;
   min-height: 75px;
 }
+
 .text-footer-container textarea {
   margin: 0 5px;
   border: unset;
@@ -697,24 +651,29 @@ export default {
   font-family: inherit;
   background: inherit;
 }
+
 .text-footer-container textarea:focus {
   outline: unset;
 }
+
 .text-footer-container textarea::placeholder {
   font-size: 12px;
 }
+
 .text-footer-container .text-footer-audio {
   flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
 }
+
 .text-footer-container audio {
   flex: 1;
   outline: unset;
   width: auto;
   height: 38px;
 }
+
 .text-footer-container .delete-audio {
   display: flex;
   justify-content: center;
@@ -729,9 +688,11 @@ export default {
   width: 31px;
   height: 31px;
 }
+
 .text-footer-container .delete-audio:hover {
   background-color: rgba(208, 0, 0, 0.2);
 }
+
 .text-footer-container .max-characters {
   font-size: 9.2px;
   z-index: 1;
@@ -740,12 +701,15 @@ export default {
   top: 30px;
   left: -30px;
 }
+
 .text-footer-container .max-characters.no-width {
   width: 0;
 }
+
 .text-footer-container .text-footer-actions {
   display: flex;
 }
+
 .text-footer-container .text-footer-actions.outside-buttons {
   display: flex;
   align-items: center;
@@ -755,6 +719,7 @@ export default {
   right: 35px;
   background-color: #fafafa;
 }
+
 .text-footer-container .text-footer-actions .text-footer-actions--btn {
   display: flex;
   justify-content: center;
@@ -769,55 +734,62 @@ export default {
   cursor: pointer;
   margin-right: 2.5px;
 }
+
 .text-footer-container .text-footer-actions .text-footer-actions--btn:last-child {
   margin-right: unset;
 }
+
 .text-footer-container .text-footer-actions .text-footer-actions--btn:hover {
   background-color: rgba(0, 0, 0, 0.1);
 }
+
 .text-footer-container .text-footer-actions .text-footer-actions--btn.files-activated {
   background-color: rgba(0, 0, 0, 0.1);
 }
+
 .text-footer-container .text-footer-actions .text-footer-actions--btn.audio-activated {
   background-color: rgba(208, 0, 0, 0.7);
   color: #fff;
 }
+
 .text-footer-container .text-footer-actions .text-footer-actions--btn.left-button {
   position: absolute;
   left: 0;
 }
+
 .text-footer-container .text-footer-hsm-container {
   margin: 12px 0 7px 0;
 }
+
 .text-footer-container .text-footer-hsm-container.full {
   width: 100%;
 }
+
 .text-footer-container .text-footer-hsm-container.almostFull {
   width: 95%;
 }
+
 .text-footer-container .text-footer-hsm-container.medium {
   width: 75%;
 }
+
 .text-footer-container .text-footer-hsm-container .text-footer-v-select {
   border-radius: 5px;
   margin-bottom: 5px;
 }
+
 .text-footer-container .text-footer-hsm-container .text-footer-select-03 {
   display: flex;
   align-items: center;
   flex: 1;
   width: 100%;
 }
-.text-footer-container
-  .text-footer-hsm-container
-  .text-footer-select-03
-  .text-footer-v-select {
+
+.text-footer-container .text-footer-hsm-container .text-footer-select-03 .text-footer-v-select {
   flex: 1;
 }
-.text-footer-container
-  .text-footer-hsm-container
-  .text-footer-select-03
-  .text-footer--btn-select-03 {
+
+.text-footer-container .text-footer-hsm-container .text-footer-select-03 .text-footer--btn-select-03 {
   transition-duration: 300ms;
   user-select: none;
   cursor: pointer;
@@ -833,16 +805,12 @@ export default {
   width: 32px;
   height: 32px;
 }
-.text-footer-container
-  .text-footer-hsm-container
-  .text-footer-select-03
-  .text-footer--btn-select-03:hover {
+
+.text-footer-container .text-footer-hsm-container .text-footer-select-03 .text-footer--btn-select-03:hover {
   opacity: 1;
 }
-.text-footer-container
-  .text-footer-hsm-container
-  .text-footer-select-03
-  .text-footer--btn-select-03:active {
+
+.text-footer-container .text-footer-hsm-container .text-footer-select-03 .text-footer--btn-select-03:active {
   opacity: 1;
   box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
   -webkit-transform: translateY(1px);
@@ -851,13 +819,11 @@ export default {
   -ms-transform: translateY(1px);
   transform: translateY(1px);
 }
-.text-footer-container
-  .text-footer-hsm-container
-  .text-footer-select-03
-  .text-footer--btn-select-03
-  svg {
+
+.text-footer-container .text-footer-hsm-container .text-footer-select-03 .text-footer--btn-select-03 svg {
   font-size: 16px;
 }
+
 .text-footer-container .text-footer-files-container {
   position: absolute;
   right: 0;
@@ -870,10 +836,12 @@ export default {
   justify-content: space-between;
   z-index: 1;
 }
+
 .text-footer-container .text-footer-files-container.horizontal {
   right: -55px;
   flex-direction: column;
 }
+
 .text-footer-container .text-footer-files-container .files-btn {
   transition-duration: 300ms;
   transition-property: opacity;
@@ -889,35 +857,44 @@ export default {
   font-size: 16px;
   color: #fff;
 }
+
 .text-footer-container .text-footer-files-container .files-btn:hover {
   opacity: 1;
 }
+
 .text-footer-container .text-footer-files-container .files-btn svg {
   color: #fff;
 }
+
 .text-footer-container .text-footer-files-container .files-btn.images {
   background-color: #9575cd;
   margin-right: 5px;
 }
+
 .text-footer-container .text-footer-files-container .files-btn.images.margin-bottom {
   margin-right: unset;
   margin-bottom: 5px;
 }
+
 .text-footer-container .text-footer-files-container .files-btn.docs {
   background-color: #7986cb;
 }
+
 .text-footer-container .text-footer-files-container .files-btn.system {
   background-color: #49a349;
   margin-left: 5px;
 }
+
 .text-footer-container .text-footer-files-container .files-btn.both {
   font-size: 15.2px;
   background-color: rgb(85, 85, 236);
   flex-direction: column;
 }
+
 .text-footer-container .text-footer-files-container .files-btn.both svg:nth-child(1) {
   transform: translateX(5px);
 }
+
 .text-footer-container .text-footer-files-container .files-btn.both svg:nth-child(2) {
   transform: translateX(-5px);
 }
@@ -933,11 +910,13 @@ export default {
   border-top-left-radius: 2.5px;
   border-top-right-radius: 2.5px;
 }
+
 .text-footer-container .text-footer-preview-container.isDoc {
   top: -50px;
   width: 100%;
   height: 45px;
 }
+
 .text-footer-container .text-footer-preview-container.isImg,
 .text-footer-container .text-footer-preview-container.isMultiple {
   top: -205px;
@@ -945,9 +924,11 @@ export default {
   height: 200px;
   min-width: 200px;
 }
+
 .text-footer-container .text-footer-preview-container.isImg .text-footer-image-preview {
   height: 170px;
 }
+
 .text-footer-container .text-footer-preview-container.isError {
   top: -80px;
   width: 100%;
@@ -959,9 +940,11 @@ export default {
   width: 100%;
   padding: 0 10px;
 }
+
 .text-footer-container .text-footer-alt .text-footer-out-session {
   margin-top: 12px;
 }
+
 .text-footer-container .text-footer-alt .text-footer-sem-24h {
   font-size: 12.8px;
   text-align: right;
@@ -972,6 +955,7 @@ export default {
   position: absolute;
   right: 0;
 }
+
 .text-footer-container .text-footer-alt .sem-templates {
   margin-top: 10px;
   font-size: 12.8px;
@@ -980,30 +964,23 @@ export default {
   letter-spacing: -0.5px;
   color: #921e12;
 }
+
 .text-footer-container .text-footer-alt .text-footer-templates {
   position: relative;
   width: 100%;
 }
-.text-footer-container
-  .text-footer-alt
-  .text-footer-templates
-  .text-footer-group-selection {
+
+.text-footer-container .text-footer-alt .text-footer-templates .text-footer-group-selection {
   width: 100%;
   display: flex;
   align-items: center;
 }
-.text-footer-container
-  .text-footer-alt
-  .text-footer-templates
-  .text-footer-group-selection
-  h4 {
+
+.text-footer-container .text-footer-alt .text-footer-templates .text-footer-group-selection h4 {
   margin-right: 5px;
 }
-.text-footer-container
-  .text-footer-alt
-  .text-footer-templates
-  .text-footer-group-selection
-  .sm__select {
+
+.text-footer-container .text-footer-alt .text-footer-templates .text-footer-group-selection .sm__select {
   flex: 1;
 }
 

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

@@ -40,7 +40,8 @@
             <span v-for="(button, index) in customButtons" :key="button.id || index" v-show="button.use"
               @click="button.callback(returnParams(button.params))" :class="`${button.customClass || 'menu-mensagem'}`"
               v-tippy :content="button.tippyContent">
-              <fa-icon :icon="['fas', button.icon || 'question-circle']" />
+              <fa-icon :icon="['fas', button.icon || 'question-circle']" v-if="!button.svgIcon" />
+              <span v-else v-html="button.svgIcon" :class="button.svgClass ? button.svgClass : ''"></span>
             </span>
           </div>
         </div>