vue-intergrall-plugins 1.1.89 → 1.2.0

package/src/lib-components/Cards/Card.vue

@@ -1,490 +1,490 @@
-<template>
-  <div v-if="origin" :class="[currentClasses]" :id="`card-${messageIndex ? messageIndex : randomizeValue}`">
-    <transition name="fade">
-      <span v-if="newMessage" class="new-messages" v-text="`Nova mensagem`"></span>
-    </transition>
-    <div class="card box-shadow">
-      <div class="card-header" :style="resizeHeaderCard">
-        <div class="card-author">
-          <fa-icon :icon="currentIcon" />
-          <p v-if="author" class="text-bold" v-text="`${tratarTextoLongo(author)}`" :title="author"></p>
-          <p v-if="origin === 'principal' && login" v-text="`| ${login}`" :title="login"></p>
-        </div>
-        <div class="card-right">
-          <div class="card-dates">
-            <div v-if="date" class="card-date" :title="`${dictionary.data_criacao}: ${origin === 'outros'
-              ? formataTimezoneData(date)
-              : returnFormataDataHora(date)
-              }`">
-              <span v-text="origin === 'outros'
-                ? formataTimezoneData(date)
-                : returnFormataDataHora(date)
-                "></span>
-            </div>
-          </div>
-          <div v-if="hasExpand" class="card-expand" @click="cardExpand()">
-            <fa-icon :icon="['fas', 'expand-alt']" />
-          </div>
-          <div class="card-actions" v-if="customButtons && customButtons.length">
-            <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']" />
-            </span>
-          </div>
-        </div>
-      </div>
-      <p v-if="chipInfos.cod && chipInfos.desc" class="card-chip" :class="[chipInfosClasses]"
-        v-text="`${chipInfos.desc} (${chipInfos.cod})`" :title="`${chipInfos.desc} (${chipInfos.cod})`"></p>
-      <p class="card-message" v-html="formattedMessage"></p>
-      <div class="card-footer">
-        <template v-if="files && files.length">
-          <div class="card-file" v-for="(file, index) in files" :key="`${index}`">
-            <CardFile :file="file" :dictionary="dictionary" :domain="domain" />
-          </div>
-        </template>
-        <CardCheck v-if="messageStatus" :messageStatus="messageStatus" :hasReply="hasReply" :replyMessage="replyMessage"
-          :tooltipContent="tooltipContent" @reply-msg="$emit('reply-msg')" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { textoLongo } from "@/mixins/formatarTexto";
-import { formataTimezoneData, formataDataHora } from "../../services/textFormatting";
-import CardFile from "./CardFile";
-import CardCheck from "./CardCheck";
-
-export default {
-  components: { CardFile, CardCheck },
-  props: {
-    customClass: {
-      type: String,
-      required: false,
-    },
-    dictionary: {
-      type: Object,
-      required: true,
-    },
-    messageIndex: {
-      type: [Number, String],
-      required: true,
-    },
-    domain: {
-      type: String,
-      required: true,
-    },
-    hasExpand: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    origin: {
-      type: String,
-      required: true,
-    },
-    author: {
-      type: String,
-    },
-    login: {
-      type: String,
-    },
-    message: {
-      type: String,
-    },
-    files: {
-      type: Array,
-    },
-    date: {
-      type: String,
-    },
-    chipInfos: {
-      type: Object,
-    },
-    newMessage: {
-      type: Boolean,
-    },
-    hasReply: {
-      type: Boolean,
-    },
-    replyMessage: {
-      type: String,
-    },
-    messageStatus: {
-      type: String,
-    },
-    tooltipContent: {
-      type: String,
-    },
-    resizeCard: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    customButtons: {
-      type: Array
-    }
-  },
-  data() {
-    return {
-      styleCard: "",
-    };
-  },
-  mixins: [textoLongo],
-  computed: {
-    randomizeValue() {
-      return `${Math.floor(Math.random() * 7770)}${Date.now()}`;
-    },
-    formattedMessage() {
-      if (this.message) {
-        const regex = /(\n|\r|&nbsp;)/g;
-        if (regex.test(this.message)) return this.message.replace(regex, "<br>");
-      }
-      return this.message;
-    },
-    currentIcon() {
-      return this.origin === "outros" ? ["fas", "user"] : ["fas", "headset"];
-    },
-    currentClasses() {
-      return `${this.origin === "outros" ? "card-cli" : "card-ope"} ${this.newMessage ? "newMessage" : ""
-        } ${this.customClass || ''}`;
-    },
-    chipInfosClasses() {
-      if (!this.chipInfos || !this.chipInfos.cod) return "";
-      const { cod } = this.chipInfos;
-      switch (cod) {
-        case 9:
-        case "9":
-        case 8:
-        case "8":
-        case "CANCELADA":
-          return "red";
-        case 3:
-        case "3":
-        case 6:
-        case "6":
-        case "AGENDADA":
-          return "yellow";
-        default:
-          return "";
-      }
-    },
-    resizeHeaderCard() {
-      if (this.resizeCard) {
-        this.styleCard = "flex-direction: column;";
-      } else {
-        this.styleCard = "flex-direction: row;";
-      }
-      return this.styleCard;
-    },
-  },
-  methods: {
-    formataTimezoneData(timezoneData) {
-      return formataTimezoneData(timezoneData);
-    },
-    returnFormataDataHora(dataHora) {
-      return formataDataHora(dataHora, false, false, this.dictionary);
-    },
-    cardExpand() {
-      this.$emit("card-expand", this.$props);
-    },
-    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;
-    }
-  },
-};
-</script>
-
-<style>
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 200ms;
-}
-
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.card-cli,
-.card-ope {
-  display: flex;
-  width: 95%;
-  margin: 5px 0;
-  position: relative;
-}
-
-.card-cli.newMessage,
-.card-ope.newMessage {
-  margin-top: 30px;
-}
-
-.new-messages {
-  position: absolute;
-  top: -30px;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 2.5px 0;
-  background-color: lighten(#fff249, 15);
-}
-
-.card-cli .card {
-  border-left: 3px solid #90b823;
-}
-
-.card-ope {
-  align-self: flex-end;
-  background-color: lighten(#007535, 72);
-}
-
-.card-ope .card {
-  border-right: 3px solid #007535;
-}
-
-.card {
-  background-color: rgba(255, 255, 255, 0.9);
-  overflow: hidden;
-  width: 100%;
-  padding: 2.5px 5px;
-}
-
-.card p {
-  word-break: break-all;
-}
-
-.card-header {
-  width: 100%;
-  border-bottom: 1px solid #ddd;
-  margin-bottom: 5px;
-  display: flex;
-  justify-content: space-between;
-}
-
-.card-header svg {
-  font-size: 16px;
-}
-
-.card-right {
-  margin-right: -20px;
-  display: flex;
-  flex-direction: row-reverse;
-  align-items: center;
-}
-
-.card-author {
-  display: flex;
-  align-items: center;
-  margin-right: 10px;
-  overflow: hidden;
-  min-width: 14px;
-  max-width: calc(100% - 215px);
-  gap: 5px;
-}
-
-.card-author svg {
-  margin-right: 5px;
-}
-
-.card-actions {
-  display: flex;
-  gap: 7px;
-}
-
-.menu-mensagem {
-  cursor: pointer;
-  padding: 1px;
-}
-
-.card-canal {
-  flex: 1;
-  margin-right: 10px;
-}
-
-.card-dates {
-  display: flex;
-  flex-direction: column;
-  margin-right: 10px;
-  padding: 5px 10px;
-  border-top-left-radius: 15px;
-  border-bottom-left-radius: 15px;
-  color: #fff;
-}
-
-.card-cli .card-dates {
-  background-color: #90b823;
-}
-
-.card-ope .card-dates {
-  background-color: #007535;
-}
-
-.card-date {
-  overflow: hidden;
-  display: flex;
-  align-content: center;
-}
-
-.card-date span {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.card-date svg {
-  margin-right: 5px;
-  color: #232323;
-}
-
-.card-expand {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 2.5px;
-  cursor: pointer;
-  opacity: 0.8;
-  transition: opacity 150ms;
-}
-
-.card-expand:hover {
-  opacity: 1;
-}
-
-.card-footer {
-  margin-top: 5px;
-  border-top: 1px solid #ddd;
-  display: flex;
-  flex-wrap: wrap;
-  min-height: 25px;
-}
-
-.card-chip {
-  font-size: 12.8px;
-  width: fit-content;
-  border-radius: 15px;
-  transition: all 150ms ease-in-out;
-  padding: 2.5px 7px;
-  color: rgb(31, 105, 193);
-  background-color: rgba(207, 216, 244, 0.6);
-  margin-bottom: 5px;
-}
-
-.card-chip:hover {
-  background-color: rgba(207, 216, 244, 1);
-}
-
-.card-chip.orange {
-  color: #e14924;
-  background-color: rgba(228, 92, 58, 0.15);
-}
-
-.card-chip.orange:hover {
-  background-color: rgba(228, 92, 58, 0.2);
-}
-
-.card-chip.yellow {
-  color: #f4a304;
-  background-color: rgba(252, 191, 73, 0.15);
-}
-
-.card-chip.yellow:hover {
-  background-color: rgba(252, 191, 73, 0.2);
-}
-
-.card-chip.red {
-  color: rgb(231, 76, 60);
-  background-color: rgba(231, 76, 60, 0.2);
-}
-
-.card-chip.red:hover {
-  background-color: rgba(231, 76, 60, 0.25);
-}
-
-.card-file {
-  width: 60px;
-  height: 50px;
-  margin-right: 5px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.card-reply {
-  cursor: pointer;
-  position: absolute;
-  right: 30px;
-  bottom: 5px;
-  font-size: 9.6px;
-  color: #67a332;
-  width: 14.4px;
-  height: 14.4px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  background-color: #fff;
-}
-
-.card-reply svg {
-  margin-top: -1px;
-  margin-right: -1px;
-}
-
-.card-check {
-  position: absolute;
-  bottom: 5px;
-  right: 5px;
-  cursor: pointer;
-  font-size: 11.2px;
-}
-
-.card-check svg {
-  font-size: 12.8px;
-}
-
-.card-check.seen,
-.card-check.seen svg {
-  color: #006daa;
-}
-
-.card-check.green,
-.card-check.green svg {
-  color: #4f772d;
-}
-
-.card-check.red,
-.card-check.red svg {
-  color: #ba181b;
-}
-
-.card-check.gray,
-.card-check.gray svg {
-  color: #999;
-}
-
-.card-check.black,
-.card-check.black svg {
-  color: #666;
-}
-</style>
+<template>
+  <div v-if="origin" :class="[currentClasses]" :id="`card-${messageIndex ? messageIndex : randomizeValue}`">
+    <transition name="fade">
+      <span v-if="newMessage" class="new-messages" v-text="`Nova mensagem`"></span>
+    </transition>
+    <div class="card box-shadow">
+      <div class="card-header" :style="resizeHeaderCard">
+        <div class="card-author">
+          <fa-icon :icon="currentIcon" />
+          <p v-if="author" class="text-bold" v-text="`${tratarTextoLongo(author)}`" :title="author"></p>
+          <p v-if="origin === 'principal' && login" v-text="`| ${login}`" :title="login"></p>
+        </div>
+        <div class="card-right">
+          <div class="card-dates">
+            <div v-if="date" class="card-date" :title="`${dictionary.data_criacao}: ${origin === 'outros'
+              ? formataTimezoneData(date)
+              : returnFormataDataHora(date)
+              }`">
+              <span v-text="origin === 'outros'
+                ? formataTimezoneData(date)
+                : returnFormataDataHora(date)
+                "></span>
+            </div>
+          </div>
+          <div v-if="hasExpand" class="card-expand" @click="cardExpand()">
+            <fa-icon :icon="['fas', 'expand-alt']" />
+          </div>
+          <div class="card-actions" v-if="customButtons && customButtons.length">
+            <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']" />
+            </span>
+          </div>
+        </div>
+      </div>
+      <p v-if="chipInfos.cod && chipInfos.desc" class="card-chip" :class="[chipInfosClasses]"
+        v-text="`${chipInfos.desc} (${chipInfos.cod})`" :title="`${chipInfos.desc} (${chipInfos.cod})`"></p>
+      <p class="card-message" v-html="formattedMessage"></p>
+      <div class="card-footer">
+        <template v-if="files && files.length">
+          <div class="card-file" v-for="(file, index) in files" :key="`${index}`">
+            <CardFile :file="file" :dictionary="dictionary" :domain="domain" />
+          </div>
+        </template>
+        <CardCheck v-if="messageStatus" :messageStatus="messageStatus" :hasReply="hasReply" :replyMessage="replyMessage"
+          :tooltipContent="tooltipContent" @reply-msg="$emit('reply-msg')" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { textoLongo } from "@/mixins/formatarTexto";
+import { formataTimezoneData, formataDataHora } from "../../services/textFormatting";
+import CardFile from "./CardFile";
+import CardCheck from "./CardCheck";
+
+export default {
+  components: { CardFile, CardCheck },
+  props: {
+    customClass: {
+      type: String,
+      required: false,
+    },
+    dictionary: {
+      type: Object,
+      required: true,
+    },
+    messageIndex: {
+      type: [Number, String],
+      required: true,
+    },
+    domain: {
+      type: String,
+      required: true,
+    },
+    hasExpand: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    origin: {
+      type: String,
+      required: true,
+    },
+    author: {
+      type: String,
+    },
+    login: {
+      type: String,
+    },
+    message: {
+      type: String,
+    },
+    files: {
+      type: Array,
+    },
+    date: {
+      type: String,
+    },
+    chipInfos: {
+      type: Object,
+    },
+    newMessage: {
+      type: Boolean,
+    },
+    hasReply: {
+      type: Boolean,
+    },
+    replyMessage: {
+      type: String,
+    },
+    messageStatus: {
+      type: String,
+    },
+    tooltipContent: {
+      type: String,
+    },
+    resizeCard: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    customButtons: {
+      type: Array
+    }
+  },
+  data() {
+    return {
+      styleCard: "",
+    };
+  },
+  mixins: [textoLongo],
+  computed: {
+    randomizeValue() {
+      return `${Math.floor(Math.random() * 7770)}${Date.now()}`;
+    },
+    formattedMessage() {
+      if (this.message) {
+        const regex = /(\n|\r|&nbsp;)/g;
+        if (regex.test(this.message)) return this.message.replace(regex, "<br>");
+      }
+      return this.message;
+    },
+    currentIcon() {
+      return this.origin === "outros" ? ["fas", "user"] : ["fas", "headset"];
+    },
+    currentClasses() {
+      return `${this.origin === "outros" ? "card-cli" : "card-ope"} ${this.newMessage ? "newMessage" : ""
+        } ${this.customClass || ''}`;
+    },
+    chipInfosClasses() {
+      if (!this.chipInfos || !this.chipInfos.cod) return "";
+      const { cod } = this.chipInfos;
+      switch (cod) {
+        case 9:
+        case "9":
+        case 8:
+        case "8":
+        case "CANCELADA":
+          return "red";
+        case 3:
+        case "3":
+        case 6:
+        case "6":
+        case "AGENDADA":
+          return "yellow";
+        default:
+          return "";
+      }
+    },
+    resizeHeaderCard() {
+      if (this.resizeCard) {
+        this.styleCard = "flex-direction: column;";
+      } else {
+        this.styleCard = "flex-direction: row;";
+      }
+      return this.styleCard;
+    },
+  },
+  methods: {
+    formataTimezoneData(timezoneData) {
+      return formataTimezoneData(timezoneData);
+    },
+    returnFormataDataHora(dataHora) {
+      return formataDataHora(dataHora, false, false, this.dictionary);
+    },
+    cardExpand() {
+      this.$emit("card-expand", this.$props);
+    },
+    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;
+    }
+  },
+};
+</script>
+
+<style>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 200ms;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.card-cli,
+.card-ope {
+  display: flex;
+  width: 95%;
+  margin: 5px 0;
+  position: relative;
+}
+
+.card-cli.newMessage,
+.card-ope.newMessage {
+  margin-top: 30px;
+}
+
+.new-messages {
+  position: absolute;
+  top: -30px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 2.5px 0;
+  background-color: lighten(#fff249, 15);
+}
+
+.card-cli .card {
+  border-left: 3px solid #90b823;
+}
+
+.card-ope {
+  align-self: flex-end;
+  background-color: lighten(#007535, 72);
+}
+
+.card-ope .card {
+  border-right: 3px solid #007535;
+}
+
+.card {
+  background-color: rgba(255, 255, 255, 0.9);
+  overflow: hidden;
+  width: 100%;
+  padding: 2.5px 5px;
+}
+
+.card p {
+  word-break: break-all;
+}
+
+.card-header {
+  width: 100%;
+  border-bottom: 1px solid #ddd;
+  margin-bottom: 5px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.card-header svg {
+  font-size: 16px;
+}
+
+.card-right {
+  margin-right: -20px;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+}
+
+.card-author {
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+  overflow: hidden;
+  min-width: 14px;
+  max-width: calc(100% - 215px);
+  gap: 5px;
+}
+
+.card-author svg {
+  margin-right: 5px;
+}
+
+.card-actions {
+  display: flex;
+  gap: 7px;
+}
+
+.menu-mensagem {
+  cursor: pointer;
+  padding: 1px;
+}
+
+.card-canal {
+  flex: 1;
+  margin-right: 10px;
+}
+
+.card-dates {
+  display: flex;
+  flex-direction: column;
+  margin-right: 10px;
+  padding: 5px 10px;
+  border-top-left-radius: 15px;
+  border-bottom-left-radius: 15px;
+  color: #fff;
+}
+
+.card-cli .card-dates {
+  background-color: #90b823;
+}
+
+.card-ope .card-dates {
+  background-color: #007535;
+}
+
+.card-date {
+  overflow: hidden;
+  display: flex;
+  align-content: center;
+}
+
+.card-date span {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.card-date svg {
+  margin-right: 5px;
+  color: #232323;
+}
+
+.card-expand {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 2.5px;
+  cursor: pointer;
+  opacity: 0.8;
+  transition: opacity 150ms;
+}
+
+.card-expand:hover {
+  opacity: 1;
+}
+
+.card-footer {
+  margin-top: 5px;
+  border-top: 1px solid #ddd;
+  display: flex;
+  flex-wrap: wrap;
+  min-height: 25px;
+}
+
+.card-chip {
+  font-size: 12.8px;
+  width: fit-content;
+  border-radius: 15px;
+  transition: all 150ms ease-in-out;
+  padding: 2.5px 7px;
+  color: rgb(31, 105, 193);
+  background-color: rgba(207, 216, 244, 0.6);
+  margin-bottom: 5px;
+}
+
+.card-chip:hover {
+  background-color: rgba(207, 216, 244, 1);
+}
+
+.card-chip.orange {
+  color: #e14924;
+  background-color: rgba(228, 92, 58, 0.15);
+}
+
+.card-chip.orange:hover {
+  background-color: rgba(228, 92, 58, 0.2);
+}
+
+.card-chip.yellow {
+  color: #f4a304;
+  background-color: rgba(252, 191, 73, 0.15);
+}
+
+.card-chip.yellow:hover {
+  background-color: rgba(252, 191, 73, 0.2);
+}
+
+.card-chip.red {
+  color: rgb(231, 76, 60);
+  background-color: rgba(231, 76, 60, 0.2);
+}
+
+.card-chip.red:hover {
+  background-color: rgba(231, 76, 60, 0.25);
+}
+
+.card-file {
+  width: 60px;
+  height: 50px;
+  margin-right: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.card-reply {
+  cursor: pointer;
+  position: absolute;
+  right: 30px;
+  bottom: 5px;
+  font-size: 9.6px;
+  color: #67a332;
+  width: 14.4px;
+  height: 14.4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  background-color: #fff;
+}
+
+.card-reply svg {
+  margin-top: -1px;
+  margin-right: -1px;
+}
+
+.card-check {
+  position: absolute;
+  bottom: 5px;
+  right: 5px;
+  cursor: pointer;
+  font-size: 11.2px;
+}
+
+.card-check svg {
+  font-size: 12.8px;
+}
+
+.card-check.seen,
+.card-check.seen svg {
+  color: #006daa;
+}
+
+.card-check.green,
+.card-check.green svg {
+  color: #4f772d;
+}
+
+.card-check.red,
+.card-check.red svg {
+  color: #ba181b;
+}
+
+.card-check.gray,
+.card-check.gray svg {
+  color: #999;
+}
+
+.card-check.black,
+.card-check.black svg {
+  color: #666;
+}
+</style>