vue-intergrall-plugins 0.0.160 → 0.0.163

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-intergrall-plugins",
-  "version": "0.0.160",
+  "version": "0.0.163",
   "description": "",
   "main": "dist/vue-intergrall-plugins.ssr.js",
   "browser": "dist/vue-intergrall-plugins.esm.js",

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

@@ -112,6 +112,10 @@ export default {
     hasButtonFiles: {
       type: Boolean,
       required: false
+    },
+    externalFiles: {
+      type: Array,
+      required: false
     }
   },
   data() {
@@ -135,6 +139,13 @@ export default {
       return "isMsg"
     }
   },
+  watch: {
+    externalFiles() {
+      this.file = this.externalFiles
+      this.fileSize = this.externalFiles.length
+      this.multipleFileUpload()
+    }
+  },
   methods: {
     openFilesByClip(){
       if(this.fileSettings.multiple && !this.hasButtonFiles){
@@ -149,7 +160,7 @@ export default {
       this.openFiles = !this.openFiles
     },
     openSelectFileHandler(type) {
-      if(type == "system"){ this.$emit("open-file-system", true); return false }
+      if(type == "system") return this.$emit("open-file-system")
       if(this.fileSettings.multiple){ type = 'both' }
       const fileInput = document.querySelector(`#${type}-${this.textId}`)
       if(fileInput) fileInput.click()

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

@@ -13,46 +13,68 @@
       >
       <div slot="no-options"> {{ dictionary.msg_sem_resultados }} </div>
     </v-select>
-    <v-select
-      v-if="formatted_messages_2.length && key_1"
-      :style="`background-color: ${backgroundColor}`"
-      appendToBody
-      :calculatePosition="calculateSelectPosition"
-      class="text-footer-v-select"
-      :options="formatted_messages_2"
-      label="value"
-      v-model="key_2"
-      :reduce="formatted_messages_2 => formatted_messages_2.cod"
-      @input="inputSelectKey2"
-      >
-      <div slot="no-options"> {{ dictionary.msg_sem_resultados }} </div>
-    </v-select>
-     <div class="text-footer-select-03" v-if="formatted_messages_3.length && key_2">
-      <v-select
-        :style="`background-color: ${backgroundColor}`"
-        appendToBody
-        :calculatePosition="calculateSelectPosition"
-        class="text-footer-v-select"
-        :options="formatted_messages_3"
-        label="value"
-        :clearable="false"
-        @input="openMsg()"
-        v-model="key_3"
-        >
-        <div slot="no-options"> {{ dictionary.msg_sem_resultados }} </div>
-      </v-select>
-      <template v-if="key_3.cod">
-        <span class="text-footer--btn-select-03" v-if="messageType == 1" :title="dictionary.title_btn_preencher_msg_formatada" @click="insertFormattedMessage(key_3)">
-          <fa-icon :icon="['fas', 'level-up-alt']" />
-        </span>
-        <span class="text-footer--btn-select-03" v-else-if="messageType == 2" :title="dictionary.title_btn_abrir_msg_tipo_2" @click="openFormattedMsgType2(key_3)">
-          <fa-icon :icon="['fas', 'file-alt']" />
-        </span>
-      </template>
+    <div class="transition-selects">
+      <transition name="fade" mode="out-in">
+        <div v-if="formatted_messages_2.length && key_1">
+          <v-select
+            :style="`background-color: ${backgroundColor}`"
+            appendToBody
+            :calculatePosition="calculateSelectPosition"
+            class="text-footer-v-select"
+            :options="formatted_messages_2"
+            label="value"
+            v-model="key_2"
+            :reduce="formatted_messages_2 => formatted_messages_2.cod"
+            @input="inputSelectKey2"
+            >
+            <div slot="no-options"> {{ dictionary.msg_sem_resultados }} </div>
+          </v-select>
+        </div>
+        <div class="loader-select" v-else-if="key_1 && loadingReq">
+          <VueLoader />
+        </div>
+      </transition>
+      <transition name="fade" mode="out-in">
+        <div class="text-footer-select-03" v-if="formatted_messages_3.length && key_2">
+          <v-select
+            :style="`background-color: ${backgroundColor}`"
+            appendToBody
+            :calculatePosition="calculateSelectPosition"
+            class="text-footer-v-select"
+            :options="formatted_messages_3"
+            label="value"
+            :clearable="false"
+            @input="openMsg()"
+            v-model="key_3"
+            >
+            <div slot="no-options"> {{ dictionary.msg_sem_resultados }} </div>
+          </v-select>
+          <template v-if="key_3.cod">
+            <span class="text-footer--btn-select-03" v-if="messageType == 1" :title="dictionary.title_btn_preencher_msg_formatada" @click="insertFormattedMessage(key_3)">
+              <fa-icon :icon="['fas', 'level-up-alt']" />
+            </span>
+            <span class="text-footer--btn-select-03" v-else-if="messageType == 2" :title="dictionary.title_btn_abrir_msg_tipo_2" @click="openFormattedMsgType2(key_3)">
+              <fa-icon :icon="['fas', 'file-alt']" />
+            </span>
+          </template>
+        </div>
+        <div class="loader-select" v-else-if="key_2 && loadingReq">
+          <VueLoader />
+        </div>
+      </transition>
     </div>
   </div>
 </template>
 
+<style>
+.transition-selects {
+  min-height: 80px;display: flex; flex-direction: column; width: 100%;
+}
+.loader-select {
+  position: relative; min-height: 35px;background: #FFF;width: 100%; border: 1px solid #ccc;border-radius: 5px;z-index: 1;
+}
+</style>
+
 <script>
 
 import { createPopper } from "@popperjs/core"
@@ -95,7 +117,8 @@ export default {
       formatted_messages_2: [],
       key_2: "",
       formatted_messages_3: [],
-      key_3: ""
+      key_3: "",
+      loadingReq: false
     }
   },
   mounted() {
@@ -123,17 +146,25 @@ export default {
         if(this.key_3) this.key_3 = ""
         return
       }
+      if(this.formatted_messages_3.length) this.formatted_messages_3 = []
+      if(this.key_3) this.key_3 = ""
       this.receiveValueFormattedMessage(`T/${this.key_2}`, 3)
     },
     receiveValueFormattedMessage(cod, selectionIndex) {
       try {
         if(!this.token_cliente) throw new Error("Informe token_cliente como chave na propriedade formattedMessageSettings que ocorre na chamada componente TextFooter ")
+        this.loadingReq = true
         this.getStandardMessages(cod, this.token_cliente).then((data) => {
+          this.loadingReq = false
           if(data && typeof(data) == 'string') return this.$toasted.global.emConstrucao({msg: data})
           if(data) return this.showFormattedMessage(data, selectionIndex)
           this.$toasted.global.defaultError()
-        }).catch(e => { console.error("Error in getStandardMessages: ", e) })
+        }).catch(e => { 
+          this.loadingReq = false
+          console.error("Error in getStandardMessages: ", e) 
+        })
       }catch(e) {
+        this.loadingReq = false
         console.error("Error in receiveValueFormattedMessage: ", e)
       }
     },

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

@@ -64,6 +64,7 @@
           :cssStyle="cssStyle"
           :ref="`${textId}-file`"
           :hasButtonFiles="hasButtonFiles"
+          :externalFiles="externalFiles"
           @set-file-vars="setFileVars"
           @open-image="openImage"
           @open-file-system="openFileSystem"
@@ -165,6 +166,10 @@ export default {
     hasButtonFiles: {
       type: Boolean,
       required: false
+    },
+    externalFiles: {
+      type: Array,
+      require: false
     }
   },
   data() {
@@ -345,8 +350,8 @@ export default {
     openImage(imagePreview) {
       this.$emit("open-image", imagePreview)
     },
-    openFileSystem(status) {
-      this.$emit("open-file-system", status)
+    openFileSystem() {
+      this.$emit("open-file-system")
     },
     setAudio(audioObj) {
       const { audioFile, audioSource } = audioObj