vue-intergrall-plugins 0.0.142 → 0.0.143

package/dist/vue-intergrall-plugins.ssr.js

@@ -6523,6 +6523,9 @@ var script$3 = {
     return {
       strTooltipAux: "",
       linkAux: "",
+      urlSticker: "",
+      urlFileName: "",
+      message: "",
       reply: "reply",
       center: {},
       marker: {},
@@ -6582,8 +6585,39 @@ var script$3 = {
     if (this.mapa) this.setMap();
     if (this.corMsg) this.setCorMsg();
     this.setClasses();
+    this.validadeUrlToMsg();
   },
   methods: {
+    validadeUrlToMsg: function validadeUrlToMsg() {
+      this.message = this.msg;
+
+      if (this.validadeIfExistsSticker()) {
+        this.urlSticker = this.getUrlSticker();
+        this.urlFileName = this.getUrlFileName();
+        this.message = this.removeUrlStickerByString(this.urlSticker);
+      }
+    },
+    getUrlFileName: function getUrlFileName() {
+      var urlRegex = /(?<=\/)[^\/\?#]+(?=[^\/]*$)/;
+      var urlName = this.urlSticker.match(urlRegex)[0];
+      return urlName;
+    },
+    removeUrlStickerByString: function removeUrlStickerByString(url) {
+      var msg = this.message.replace("STICKER ".concat(url), '');
+      return msg;
+    },
+    getUrlSticker: function getUrlSticker() {
+      var urlRegex = /(https?:\/\/[^ ]*)/;
+      var url = this.message.match(urlRegex)[1];
+      return url;
+    },
+    validadeIfExistsSticker: function validadeIfExistsSticker() {
+      if (this.message && this.message.includes("STICKER https://smarters")) {
+        return true;
+      }
+
+      return false;
+    },
     setClasses: function setClasses() {
       if (this.hasReply && (this.status == "C" || this.status == "T") && this.iniDialogo == 0) {
         this.reply = "reply reply-with-2-icons";
@@ -6665,7 +6699,7 @@ var __vue_render__$3 = function __vue_render__() {
         "abrir-imagem": _vm.abrirImagem
       }
     })], 1);
-  }) : _vm._e(), _vm._ssrNode(" "), _vm.mapa ? _vm._ssrNode("<div class=\"mensagem-div-mapa\">", "</div>", [_c('GmapMap', {
+  }) : _vm._e(), _vm._ssrNode(" " + (_vm.urlSticker ? "<img" + _vm._ssrAttr("src", _vm.urlSticker) + _vm._ssrAttr("title", _vm.urlFileName) + " class=\"default-stick-size\">" : "<!---->") + " "), _vm.mapa ? _vm._ssrNode("<div class=\"mensagem-div-mapa\">", "</div>", [_c('GmapMap', {
     staticClass: "msg-mapa",
     attrs: {
       "id": "mapa_" + _vm.seq,
@@ -6683,7 +6717,7 @@ var __vue_render__$3 = function __vue_render__() {
         "icon": ['fas', 'map-marker-alt']
       }
     })], 2)], 2);
-  }), 0) : _vm._e()], 2) : _vm._e(), _vm._ssrNode(" <p>" + _vm._s(_vm.formatMsg(_vm.msg)) + "</p> "), _vm.interatividade ? _c('InteratividadeBotoes', {
+  }), 0) : _vm._e()], 2) : _vm._e(), _vm._ssrNode(" <p>" + _vm._s(_vm.formatMsg(_vm.message)) + "</p> "), _vm.interatividade ? _c('InteratividadeBotoes', {
     attrs: {
       "interatividade": _vm.interatividade
     }
@@ -6840,8 +6874,8 @@ var __vue_staticRenderFns__$3 = [];
 
 var __vue_inject_styles__$3 = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-c1e72e34_0", {
-    source: ":root{--message-color:#373737}.fade-enter-active,.fade-leave-active{transition:opacity .5s}.fade-enter,.fade-leave-to{opacity:0}.mensagem{padding:14px 7px;border-radius:2.5px;min-width:150px;min-height:60px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;position:relative;max-width:80%;margin-bottom:10px;font-size:.85rem;word-break:break-word}.mensagem.mapa{width:100%}.mensagem.hist-msg{animation:show 1s}.mensagem a{margin-right:5px;font-weight:550;color:inherit;text-decoration:none}.mensagem a:hover{text-decoration:underline}.message p{white-space:pre-wrap}.mensagem-anexo a,.mensagem-div-mapa a{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.reply{cursor:pointer;position:absolute;right:53px;bottom:5px;font-size:.6rem;color:#67a332;width:.9rem;height:.9rem;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:#fff}.reply svg{margin-top:-1px;margin-right:-1px}.reply-with-2-icons{right:30px}.check{cursor:pointer;position:absolute;right:10px;bottom:2px;font-size:.7rem}.check.visualizado,.check.visualizado svg{color:#006daa}.check.verde,.check.verde svg{color:#4f772d}.check.vermelho,.check.vermelho svg{color:#ba181b}.check.cinza,.check.cinza svg{color:#999}.check.preto,.check.preto svg{color:#666}.star{cursor:pointer;position:absolute;right:30px;bottom:3px;font-size:.7rem}.star.dourado svg{color:gold}.horario-envio{margin-right:15px;font-size:.7rem;position:absolute;left:10px;bottom:2px}.autor-mensagem{position:absolute;font-size:.6rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:90%;font-weight:700;top:2px}.mensagem__principal{width:100%;display:flex;justify-content:flex-end}.mensagem__principal>.mensagem::after{content:\"\";width:0;height:0;position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid var(--message-color);bottom:5px;right:-10px;transform:rotate(-90deg)}.mensagem__principal>.mensagem{background-color:var(--message-color);color:#fff}.mensagem__principal>.mensagem .horario-envio{color:#fff}.mensagem__principal>.mensagem .autor-mensagem{right:5px;color:#fff}.mensagem__outros{width:100%;display:flex}.mensagem__outros>.mensagem{background-color:#fff;color:#333}.mensagem__outros>.mensagem::after{content:\"\";width:0;height:0;position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #fff;bottom:5px;left:-10px;transform:rotate(90deg)}.mensagem__outros .check{display:none}.mensagem__outros>.autor-mensagem{left:5px;color:#333}.mensagem-div-mapa{width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;margin-bottom:5px}.msg-mapa{width:100%;min-height:225px;height:100%;box-sizing:initial}.msg-mapa img{max-width:none!important}.info-mapa{list-style-type:none}.info-mapa li.title{font-size:.85em}.info-mapa li.address,.info-mapa li.url{font-size:.7em}.info-mapa li.url{font-size:.7em}.tooltip-list{margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}",
+  inject("data-v-fc5d5b50_0", {
+    source: ":root{--message-color:#373737}.fade-enter-active,.fade-leave-active{transition:opacity .5s}.fade-enter,.fade-leave-to{opacity:0}.mensagem{padding:14px 7px;border-radius:2.5px;min-width:150px;min-height:60px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;position:relative;max-width:80%;margin-bottom:10px;font-size:.85rem;word-break:break-word}.mensagem.mapa{width:100%}.mensagem.hist-msg{animation:show 1s}.mensagem a{margin-right:5px;font-weight:550;color:inherit;text-decoration:none}.mensagem a:hover{text-decoration:underline}.message p{white-space:pre-wrap}.mensagem-anexo a,.mensagem-div-mapa a{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.reply{cursor:pointer;position:absolute;right:53px;bottom:5px;font-size:.6rem;color:#67a332;width:.9rem;height:.9rem;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:#fff}.reply svg{margin-top:-1px;margin-right:-1px}.reply-with-2-icons{right:30px}.check{cursor:pointer;position:absolute;right:10px;bottom:2px;font-size:.7rem}.check.visualizado,.check.visualizado svg{color:#006daa}.check.verde,.check.verde svg{color:#4f772d}.check.vermelho,.check.vermelho svg{color:#ba181b}.check.cinza,.check.cinza svg{color:#999}.check.preto,.check.preto svg{color:#666}.star{cursor:pointer;position:absolute;right:30px;bottom:3px;font-size:.7rem}.star.dourado svg{color:gold}.default-stick-size{width:250px;height:auto}.horario-envio{margin-right:15px;font-size:.7rem;position:absolute;left:10px;bottom:2px}.autor-mensagem{position:absolute;font-size:.6rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:90%;font-weight:700;top:2px}.mensagem__principal{width:100%;display:flex;justify-content:flex-end}.mensagem__principal>.mensagem::after{content:\"\";width:0;height:0;position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid var(--message-color);bottom:5px;right:-10px;transform:rotate(-90deg)}.mensagem__principal>.mensagem{background-color:var(--message-color);color:#fff}.mensagem__principal>.mensagem .horario-envio{color:#fff}.mensagem__principal>.mensagem .autor-mensagem{right:5px;color:#fff}.mensagem__outros{width:100%;display:flex}.mensagem__outros>.mensagem{background-color:#fff;color:#333}.mensagem__outros>.mensagem::after{content:\"\";width:0;height:0;position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #fff;bottom:5px;left:-10px;transform:rotate(90deg)}.mensagem__outros .check{display:none}.mensagem__outros>.autor-mensagem{left:5px;color:#333}.mensagem-div-mapa{width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;margin-bottom:5px}.msg-mapa{width:100%;min-height:225px;height:100%;box-sizing:initial}.msg-mapa img{max-width:none!important}.info-mapa{list-style-type:none}.info-mapa li.title{font-size:.85em}.info-mapa li.address,.info-mapa li.url{font-size:.7em}.info-mapa li.url{font-size:.7em}.tooltip-list{margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}",
     map: undefined,
     media: undefined
   });
@@ -6852,7 +6886,7 @@ var __vue_inject_styles__$3 = function __vue_inject_styles__(inject) {
 var __vue_scope_id__$3 = undefined;
 /* module identifier */
 
-var __vue_module_identifier__$3 = "data-v-c1e72e34";
+var __vue_module_identifier__$3 = "data-v-fc5d5b50";
 /* functional template */
 
 var __vue_is_functional_template__$3 = false;

package/package.json

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

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

@@ -6,6 +6,7 @@
           <AnexoMensagem :dictionary="dictionary" :anexo="anexo" :origemExterna="origemExterna" :dominio="dominio" @abrir-imagem="abrirImagem"/>
         </div>
       </template>
+      <img class="default-stick-size" v-if="urlSticker" :src="urlSticker" :title="urlFileName">
       <div v-if="mapa" class="mensagem-div-mapa">
         <GmapMap
           :id="`mapa_${seq}`"
@@ -23,7 +24,7 @@
           </li>
         </ul>
       </div>
-      <p v-html="formatMsg(msg)"></p>
+      <p v-html="formatMsg(message)"></p>
       <InteratividadeBotoes 
         v-if="interatividade"
         :interatividade="interatividade"
@@ -62,6 +63,9 @@ export default {
     return{
       strTooltipAux: "",
       linkAux: "",
+      urlSticker: "",
+      urlFileName: "",
+      message: "",
       reply: "reply",
       center: {},
       marker: {},
@@ -119,8 +123,37 @@ export default {
     if(this.mapa) this.setMap()
     if(this.corMsg) this.setCorMsg()
     this.setClasses()
+    this.validadeUrlToMsg()
   },
   methods: {
+    validadeUrlToMsg(){
+      this.message = this.msg
+      if(this.validadeIfExistsSticker()){
+        this.urlSticker = this.getUrlSticker()
+        this.urlFileName = this.getUrlFileName()
+        this.message = this.removeUrlStickerByString(this.urlSticker)
+      }
+    },
+    getUrlFileName(){
+      let urlRegex = /(?<=\/)[^\/\?#]+(?=[^\/]*$)/;
+      let urlName = this.urlSticker.match(urlRegex)[0];
+      return urlName;
+    },
+    removeUrlStickerByString(url){
+      let msg = this.message.replace(`STICKER ${url}`, '')
+      return msg;
+    },
+    getUrlSticker(){
+      let urlRegex = /(https?:\/\/[^ ]*)/;
+      let url = this.message.match(urlRegex)[1];
+      return url;
+    },
+    validadeIfExistsSticker(){
+      if(this.message && this.message.includes("STICKER https://smarters")){
+        return true;
+      }
+      return false;
+    },
     setClasses(){
       if(this.hasReply && (this.status == "C" || this.status == "T") && this.iniDialogo == 0){
         this.reply = "reply reply-with-2-icons"
@@ -275,6 +308,10 @@ export default {
   .star.dourado svg{
     color: gold
   }
+  .default-stick-size{
+    width: 250px;
+    height: auto;
+  }
   .horario-envio {
     margin-right: 15px;
     font-size: 0.7rem;