vue-intergrall-plugins 1.1.11 → 1.1.13

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

@@ -1,95 +1,95 @@
-<template>
-  <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">
-      <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 Clickaway from '@/directives/clickaway';
-
-export default {
-  directives: {
-    clickaway: 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: 14px;
-}
-
-.interatividade-popup-titulo h1 {
-  padding: 4px 10px;
-  background-color: #333;
-  color: #fff;
-  font-size: 19.2px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.interatividade-popup-titulo h1 svg {
-  color: #e74c3c;
-  cursor: pointer;
-  font-size: 14.4px;
-}
-
-.interatividade-popup-item {
-  padding: 10px;
-  border-bottom: 1px solid #d7d7d7;
-}
-
-.interatividade-popup-item-desc {
-  font-size: 14.4px;
-  color: #767676;
-}
-</style>
+<template>
+  <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">
+      <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 Clickaway from '@/directives/clickaway';
+
+export default {
+  directives: {
+    clickaway: 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: 14px;
+}
+
+.interatividade-popup-titulo h1 {
+  padding: 4px 10px;
+  background-color: #333;
+  color: #fff;
+  font-size: 19.2px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.interatividade-popup-titulo h1 svg {
+  color: #e74c3c;
+  cursor: pointer;
+  font-size: 14.4px;
+}
+
+.interatividade-popup-item {
+  padding: 10px;
+  border-bottom: 1px solid #d7d7d7;
+}
+
+.interatividade-popup-item-desc {
+  font-size: 14.4px;
+  color: #767676;
+}
+</style>

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

@@ -1,176 +1,176 @@
-<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;
-        if (!this.$root.$httpRequest) return
-        const encodedURL = Buffer(url).toString("base64");
-        const response = await this.$root.$httpRequest.get(`${baseURL}/preview?url=${encodedURL}${dev}`);
-        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>
-.link-preview {
-  display: flex;
-  flex-direction: column;
-  background-color: #eee;
-  color: #333;
-  cursor: pointer;
-  margin: 5px 0;
-  border-radius: 5px;
-  opacity: 0.95;
-  transition: opacity 300ms ease-in-out;
-  font-size: 13.6px;
-}
-
-.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: 9.84px;
-  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: 13.28px;
-  border-radius: 5px;
-}
-
-.link-preview:hover {
-  opacity: 1;
-}
-
-.link-preview:hover .link-preview-infos p {
-  text-decoration: underline;
-}
-</style>
+<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;
+        if (!this.$root.$httpRequest) return
+        const encodedURL = Buffer(url).toString("base64");
+        const response = await this.$root.$httpRequest.get(`${baseURL}/preview?url=${encodedURL}${dev}`);
+        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>
+.link-preview {
+  display: flex;
+  flex-direction: column;
+  background-color: #eee;
+  color: #333;
+  cursor: pointer;
+  margin: 5px 0;
+  border-radius: 5px;
+  opacity: 0.95;
+  transition: opacity 300ms ease-in-out;
+  font-size: 13.6px;
+}
+
+.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: 9.84px;
+  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: 13.28px;
+  border-radius: 5px;
+}
+
+.link-preview:hover {
+  opacity: 1;
+}
+
+.link-preview:hover .link-preview-infos p {
+  text-decoration: underline;
+}
+</style>