vue-intergrall-plugins 0.0.280 → 0.0.282

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

@@ -1,89 +1,89 @@
-<template>
-  <div class="interatividade-popup box-shadow" v-on-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">
-      <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>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mixin as clickaway } from 'vue-clickaway'
-
-export default {
-  mixins: [ clickaway ],
-  props: {
-    lista: {
-      type: [Array, Object],
-      required: true
-    },
-    titulo: {
-      type: String,
-      required: false
-    }
-  },
-  methods: {
-    away() {
-      this.$emit("close")
-    }
-  }
-}
-</script>
-
-<style>
-  .box-shadow {
-    -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-    -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-  }
-
-  .interatividade-popup {
-    position: absolute;
-    top: 15px;
-    right: 0;
-    width: 250px;
-    height: auto;
-    max-height: 300px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    background-color: #FFF;
-    border-radius: 15px;
-    color: #333;
-    font-size: .875rem;
-  }
-
-  .interatividade-popup-titulo h1 {    
-    padding: 4px 10px;
-    background-color: #333;
-    color: #FFF;
-    font-size: 1.2em;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .interatividade-popup-titulo h1 svg{
-    color: #E74C3C;
-    cursor: pointer;
-    font-size: .9em;
-  }
-  
-  .interatividade-popup-item {
-    padding: 10px;
-    border-bottom: 1px solid #D7D7D7;
-  }
-
-  .interatividade-popup-item-desc {
-    font-size: .9em;
-    color: #767676;
-  }
+<template>
+  <div class="interatividade-popup box-shadow" v-on-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">
+      <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>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mixin as clickaway } from 'vue-clickaway'
+
+export default {
+  mixins: [ clickaway ],
+  props: {
+    lista: {
+      type: [Array, Object],
+      required: true
+    },
+    titulo: {
+      type: String,
+      required: false
+    }
+  },
+  methods: {
+    away() {
+      this.$emit("close")
+    }
+  }
+}
+</script>
+
+<style>
+  .box-shadow {
+    -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+    -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  }
+
+  .interatividade-popup {
+    position: absolute;
+    top: 15px;
+    right: 0;
+    width: 250px;
+    height: auto;
+    max-height: 300px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background-color: #FFF;
+    border-radius: 15px;
+    color: #333;
+    font-size: .875rem;
+  }
+
+  .interatividade-popup-titulo h1 {    
+    padding: 4px 10px;
+    background-color: #333;
+    color: #FFF;
+    font-size: 1.2em;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .interatividade-popup-titulo h1 svg{
+    color: #E74C3C;
+    cursor: pointer;
+    font-size: .9em;
+  }
+  
+  .interatividade-popup-item {
+    padding: 10px;
+    border-bottom: 1px solid #D7D7D7;
+  }
+
+  .interatividade-popup-item-desc {
+    font-size: .9em;
+    color: #767676;
+  }
 </style>

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

@@ -1,164 +1,164 @@
-<template>
-  <div 
-    v-if="linkPreview.isValid" 
-    class="link-preview" 
-    @click="openUrl()" 
-    :title="`Abrir ${returnURL()} em uma nova guia`"
-  >
-    <div 
-      v-if="linkPreview.imageSource" 
-      :style="linkPreview.colorTheme ? `background-color: ${linkPreview.colorTheme}` : ''"
-      class="link-preview-image"
-    >
-      <img :src="linkPreview.imageSource" alt="Imagem referente ao link" />
-    </div>
-    <div class="link-preview-author" :class="{'mb-0' : linkPreview.description}" v-if="linkPreview.author">
-      <h1 v-text="linkPreview.author"></h1>
-    </div>
-    <div v-if="linkPreview.description" class="link-preview-infos">
-      <p v-if="linkPreview.description" v-text="linkPreview.description"></p>
-    </div>
-  </div>
-</template>
-
-<script>
-import { dev, baseURL } from '@/services/smartChannelAxios'
-
-export default {
-  props: {
-    message: {
-      type: String,
-      default: ""
-    }
-  },
-  data() {
-    return {
-      linkPreview: {
-        author: "",
-        description: "",
-        imageSource: "",
-        colorTheme: "",
-        isValid: false
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => { this.gerarPreview() })
-  },
-  methods: {
-    returnURL() {
-      if(!this.message) return ""
-        const isSticker = this.message.indexOf("KSTICKERK") < 0 ? false : true
-        if(isSticker) return ""
-        const regex = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/g
-        const url = regex.exec(this.message)
-        if(!url || !url[0]) {
-          console.warn("URL invalida para gerar preview")
-          return ""
-        }
-        const finalUrl = url[0].replace(/["'*]/g, "")
-        if(/((https?|ftp):\/\/.)?(www\.)?(?:([-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6})|(linux07|linux03))\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/gi.test(finalUrl)) return finalUrl
-        return false
-    },
-    async gerarPreview() {
-      try {
-        const url = this.returnURL() 
-        if(!url) return
-        const encodedURL = Buffer(url).toString("base64")
-        const response = await this.$httpRequest(
-        {
-          method: 'get',
-          url: `${baseURL}/preview?url=${encodedURL}${dev}`,
-          // headers: {
-          //   Authorization: "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdGQiOiJNS1VGWnBQeEV1UHc5UXdvN21HU2tWNEl4VHN0blM3MHNyZUJTTWt3d3hiNDRhd3dDcWwxd09jIiwibWFuYWdlciI6Ik1LVXRhd3dpbTRsNXd3WW1LMWFJYXd3aW00bDV3d3d3eGI0NGF3d0s0a2pveHBPMnl6TFZ3dXBud3d4YjQ0YXd3cmxNNHRqZ3FKTExsTjMiLCJoYXNfaW5mb3MiOnRydWUsIm5yb3MiOlsiMjczIl0sImF1dGgiOiJNS1VncmxDdkdRbElGbXZVTERCSGplV0wyOXFVUHdyOVlSMVMyeXdJanlLOUNteCIsImlhdCI6MTY0ODQ3MzYxNSwiZXhwIjoxNjQ4NTYwMDE1fQ.KSG_6_9NfQhk5br7hnXzeLyVZuT69XLaEYF9XkdgmmQ"
-          // }
-        })
-        if(typeof response != "object" || typeof response.data != "object") throw "Retorno incorreto"
-        const { data } = response
-        const { st_ret, msg_ret, raspagem } = data
-        if(st_ret != "OK") throw `${st_ret} - ${msg_ret}`
-        if(!raspagem) throw `${st_ret} - ${msg_ret} | (Raspagem nao encontrada no retorno)`
-        const { description, og, theme_color } = raspagem
-        if(description) this.linkPreview.description = description
-        if(raspagem.author) this.linkPreview.author = raspagem.author
-        if(og) {
-          const { image, site_name, title, author } = og
-          if(image) this.linkPreview.imageSource = image.url ? image.url : image.url == "" ? "" : image
-          if(author || site_name || title) this.linkPreview.author = title ? title : author ? author : site_name ? site_name : ""
-          if(og.description) this.linkPreview.description = og.description
-        }
-        if(theme_color) this.linkPreview.colorTheme = theme_color
-
-        if(this.linkPreview.description || this.linkPreview.imageSource) this.linkPreview.isValid = true
-      }catch(e) {
-        console.error("Erro ao gerar o preview do link: ", e)
-      }
-    },
-    openUrl() {
-      const url = this.returnURL()
-      if(!url) return
-      window.open(url, "_blank")
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .link-preview {
-    display: flex;
-    flex-direction: column;
-    background-color: #EEE;
-    color: #333;
-    cursor: pointer;
-    margin: 5px 0;
-    border-radius: 5px;
-    opacity: .95;
-    transition: opacity 300ms ease-in-out;
-    font-size: .85rem;
-  }
-
-  .link-preview-image {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 1px;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-  }
-
-  .link-preview-author {
-    margin: 5px;
-    font-size: .615em;
-    font-weight: bold;
-  }
-  .link-preview-author.mb-0 {
-    margin-bottom: 0;
-  }
-  .link-preview-author h1 {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .link-preview-image img {
-    min-width: 100px;
-    max-width: 200px;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-  }
-
-  .link-preview-infos {
-    background-color: #2626261a;
-    padding: 5px;
-    margin: 5px;
-    font-size: .83em;
-    border-radius: 5px;
-  }
-
-  .link-preview:hover {
-    opacity: 1;
-  }
-  .link-preview:hover .link-preview-infos p {
-    text-decoration: underline;
-  }
+<template>
+  <div 
+    v-if="linkPreview.isValid" 
+    class="link-preview" 
+    @click="openUrl()" 
+    :title="`Abrir ${returnURL()} em uma nova guia`"
+  >
+    <div 
+      v-if="linkPreview.imageSource" 
+      :style="linkPreview.colorTheme ? `background-color: ${linkPreview.colorTheme}` : ''"
+      class="link-preview-image"
+    >
+      <img :src="linkPreview.imageSource" alt="Imagem referente ao link" />
+    </div>
+    <div class="link-preview-author" :class="{'mb-0' : linkPreview.description}" v-if="linkPreview.author">
+      <h1 v-text="linkPreview.author"></h1>
+    </div>
+    <div v-if="linkPreview.description" class="link-preview-infos">
+      <p v-if="linkPreview.description" v-text="linkPreview.description"></p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { dev, baseURL } from '@/services/smartChannelAxios'
+
+export default {
+  props: {
+    message: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      linkPreview: {
+        author: "",
+        description: "",
+        imageSource: "",
+        colorTheme: "",
+        isValid: false
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => { this.gerarPreview() })
+  },
+  methods: {
+    returnURL() {
+      if(!this.message) return ""
+        const isSticker = this.message.indexOf("KSTICKERK") < 0 ? false : true
+        if(isSticker) return ""
+        const regex = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/g
+        const url = regex.exec(this.message)
+        if(!url || !url[0]) {
+          console.warn("URL invalida para gerar preview")
+          return ""
+        }
+        const finalUrl = url[0].replace(/["'*]/g, "")
+        if(/((https?|ftp):\/\/.)?(www\.)?(?:([-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6})|(linux07|linux03))\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/gi.test(finalUrl)) return finalUrl
+        return false
+    },
+    async gerarPreview() {
+      try {
+        const url = this.returnURL() 
+        if(!url) return
+        const encodedURL = Buffer(url).toString("base64")
+        const response = await this.$httpRequest(
+        {
+          method: 'get',
+          url: `${baseURL}/preview?url=${encodedURL}${dev}`,
+          // headers: {
+          //   Authorization: "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdGQiOiJNS1VGWnBQeEV1UHc5UXdvN21HU2tWNEl4VHN0blM3MHNyZUJTTWt3d3hiNDRhd3dDcWwxd09jIiwibWFuYWdlciI6Ik1LVXRhd3dpbTRsNXd3WW1LMWFJYXd3aW00bDV3d3d3eGI0NGF3d0s0a2pveHBPMnl6TFZ3dXBud3d4YjQ0YXd3cmxNNHRqZ3FKTExsTjMiLCJoYXNfaW5mb3MiOnRydWUsIm5yb3MiOlsiMjczIl0sImF1dGgiOiJNS1VncmxDdkdRbElGbXZVTERCSGplV0wyOXFVUHdyOVlSMVMyeXdJanlLOUNteCIsImlhdCI6MTY0ODQ3MzYxNSwiZXhwIjoxNjQ4NTYwMDE1fQ.KSG_6_9NfQhk5br7hnXzeLyVZuT69XLaEYF9XkdgmmQ"
+          // }
+        })
+        if(typeof response != "object" || typeof response.data != "object") throw "Retorno incorreto"
+        const { data } = response
+        const { st_ret, msg_ret, raspagem } = data
+        if(st_ret != "OK") throw `${st_ret} - ${msg_ret}`
+        if(!raspagem) throw `${st_ret} - ${msg_ret} | (Raspagem nao encontrada no retorno)`
+        const { description, og, theme_color } = raspagem
+        if(description) this.linkPreview.description = description
+        if(raspagem.author) this.linkPreview.author = raspagem.author
+        if(og) {
+          const { image, site_name, title, author } = og
+          if(image) this.linkPreview.imageSource = image.url ? image.url : image.url == "" ? "" : image
+          if(author || site_name || title) this.linkPreview.author = title ? title : author ? author : site_name ? site_name : ""
+          if(og.description) this.linkPreview.description = og.description
+        }
+        if(theme_color) this.linkPreview.colorTheme = theme_color
+
+        if(this.linkPreview.description || this.linkPreview.imageSource) this.linkPreview.isValid = true
+      }catch(e) {
+        console.error("Erro ao gerar o preview do link: ", e)
+      }
+    },
+    openUrl() {
+      const url = this.returnURL()
+      if(!url) return
+      window.open(url, "_blank")
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .link-preview {
+    display: flex;
+    flex-direction: column;
+    background-color: #EEE;
+    color: #333;
+    cursor: pointer;
+    margin: 5px 0;
+    border-radius: 5px;
+    opacity: .95;
+    transition: opacity 300ms ease-in-out;
+    font-size: .85rem;
+  }
+
+  .link-preview-image {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1px;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+  }
+
+  .link-preview-author {
+    margin: 5px;
+    font-size: .615em;
+    font-weight: bold;
+  }
+  .link-preview-author.mb-0 {
+    margin-bottom: 0;
+  }
+  .link-preview-author h1 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .link-preview-image img {
+    min-width: 100px;
+    max-width: 200px;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+  }
+
+  .link-preview-infos {
+    background-color: #2626261a;
+    padding: 5px;
+    margin: 5px;
+    font-size: .83em;
+    border-radius: 5px;
+  }
+
+  .link-preview:hover {
+    opacity: 1;
+  }
+  .link-preview:hover .link-preview-infos p {
+    text-decoration: underline;
+  }
 </style>