vue-intergrall-plugins 0.0.138 → 0.0.142

package/package.json

@@ -1,63 +1,63 @@
-{
-  "name": "vue-intergrall-plugins",
-  "version": "0.0.138",
-  "description": "",
-  "main": "dist/vue-intergrall-plugins.ssr.js",
-  "browser": "dist/vue-intergrall-plugins.esm.js",
-  "module": "dist/vue-intergrall-plugins.esm.js",
-  "unpkg": "dist/vue-intergrall-plugins.min.js",
-  "files": [
-    "dist/*",
-    "src/**/*.vue"
-  ],
-  "sideEffects": false,
-  "scripts": {
-    "serve": "vue-cli-service serve dev/serve.js",
-    "prebuild": "rimraf ./dist",
-    "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
-    "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
-    "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
-    "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"
-  },
-  "dependencies": {},
-  "devDependencies": {
-    "@babel/core": "^7.15.5",
-    "@babel/preset-env": "^7.15.6",
-    "@rollup/plugin-alias": "^3.1.2",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^14.0.0",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
-    "@rollup/plugin-replace": "^2.4.2",
-    "@vue/cli-plugin-babel": "^4.5.13",
-    "@vue/cli-service": "^4.5.13",
-    "autoprefixer": "^10.3.6",
-    "cross-env": "^7.0.3",
-    "cssnano": "^5.0.8",
-    "minimist": "^1.2.5",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.58.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-vue": "^5.1.9",
-    "vue": "^2.6.14",
-    "vue-template-compiler": "^2.6.14"
-  },
-  "peerDependencies": {
-    "vue": "^2.6.14",
-    "@fortawesome/fontawesome-free": "^5.15.4",
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/vue-fontawesome": "^2.0.2",
-    "@popperjs/core": "^2.10.2",
-    "core-js": "^3.18.1",
-    "postcss": "^8.3.8",
-    "vue-clickaway": "^2.2.2",
-    "vue-select": "^3.13.0",
-    "vue-tippy": "^4.12.0",
-    "vue-toasted": "^1.1.28",
-    "vue2-google-maps": "^0.10.7"
-  },
-  "engines": {
-    "node": ">=12"
-  }
-}
+{
+  "name": "vue-intergrall-plugins",
+  "version": "0.0.142",
+  "description": "",
+  "main": "dist/vue-intergrall-plugins.ssr.js",
+  "browser": "dist/vue-intergrall-plugins.esm.js",
+  "module": "dist/vue-intergrall-plugins.esm.js",
+  "unpkg": "dist/vue-intergrall-plugins.min.js",
+  "files": [
+    "dist/*",
+    "src/**/*.vue"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "serve": "vue-cli-service serve dev/serve.js",
+    "prebuild": "rimraf ./dist",
+    "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
+    "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
+    "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
+    "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.6",
+    "@rollup/plugin-alias": "^3.1.2",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^14.0.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@rollup/plugin-replace": "^2.4.2",
+    "@vue/cli-plugin-babel": "^4.5.13",
+    "@vue/cli-service": "^4.5.13",
+    "autoprefixer": "^10.3.6",
+    "cross-env": "^7.0.3",
+    "cssnano": "^5.0.8",
+    "minimist": "^1.2.5",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.58.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-vue": "^5.1.9",
+    "vue": "^2.6.14",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "peerDependencies": {
+    "vue": "^2.6.14",
+    "@fortawesome/fontawesome-free": "^5.15.4",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/vue-fontawesome": "^2.0.2",
+    "@popperjs/core": "^2.10.2",
+    "core-js": "^3.18.1",
+    "postcss": "^8.3.8",
+    "vue-clickaway": "^2.2.2",
+    "vue-select": "^3.13.0",
+    "vue-tippy": "^4.12.0",
+    "vue-toasted": "^1.1.28",
+    "vue2-google-maps": "^0.10.7"
+  },
+  "engines": {
+    "node": ">=12"
+  }
+}

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

@@ -0,0 +1,394 @@
+<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">
+        <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>
+      </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: {
+    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
+    }
+  },
+  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" : ""}`
+    },
+    chipInfosClasses() {
+      if(!this.chipInfos || !this.chipInfos.cod) return ""
+      const { cod } = this.chipInfos
+      switch(cod) {
+        case 9:
+        case "9":
+        case 8:
+        case "8":
+          return "red"
+        case 3:
+        case "3":
+        case 6:
+        case "6":
+          return "yellow"
+        default:
+          return ""
+      }
+    }
+  },
+  methods: {
+    formataTimezoneData(timezoneData) {
+      return formataTimezoneData(timezoneData)
+    },
+    returnFormataDataHora(dataHora) {
+      return formataDataHora(dataHora, false, false, this.dictionary)
+    },
+    cardExpand() {
+      this.$emit("card-expand", this.$props)
+    }
+  }
+}
+</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, .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: 1rem
+}
+
+.card-author {
+  display: flex;
+  align-items: center;
+}
+.card-author svg {
+  margin-right: 5px;
+}
+
+.card-canal {
+  flex: 1;
+  margin-right: 10px;
+}
+
+.card-dates {
+  display: flex;
+  flex-direction: column;
+  margin-right: 10px;
+  font-size: .9rem
+}
+
+.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: .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: .8rem;
+  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, .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, .15);
+}
+.card-chip.orange:hover {
+  background-color: rgba(228, 92, 58, .2);
+}
+.card-chip.yellow {
+  color: #f4a304;
+  background-color: rgba(252, 191, 73, .15);
+}
+.card-chip.yellow:hover {
+  background-color: rgba(252, 191, 73, .2);
+}
+.card-chip.red {
+  color: rgb(231, 76, 60);
+  background-color: rgba(231, 76, 60, .2);
+}
+.card-chip.red:hover {
+  background-color: rgba(231, 76, 60, .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: .6rem;
+  color: #67a332;
+  width: .9rem;
+  height: .9rem;
+  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: 0.7rem;
+}
+.card-check svg {
+  font-size: 0.8rem;
+}
+.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>

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

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <transition name="fade" mode="out-in">
+      <span class="card-reply" v-if="hasReply && (messageStatus == 'C' || messageStatus == 'T')" v-tippy :content="replyMessage ? replyMessage : 'Fazer reenvio da mensagem'" @click="$emit('reply-msg')"> <fa-icon :icon="['fas', 'reply']" /> </span> 
+    </transition>
+    <transition name="fade" mode="out-in">
+      <span class="card-check" v-if="messageStatus == 'D'" :content="tooltipContent" v-tippy key="check-padrao"> <fa-icon :icon="['fas', 'check']" /> </span>
+      <span class="card-check gray" v-else-if="messageStatus == 'Q'" :content="tooltipContent" v-tippy key="check-gray"> <fa-icon :icon="['fas', 'check']" /> </span>
+      <span class="card-check black" v-else-if="messageStatus == 'G'" :content="tooltipContent" v-tippy key="check-black"> <fa-icon :icon="['fas', 'check']" /> </span>
+      <span class="card-check black" v-else-if="messageStatus == 'E'" :content="tooltipContent" v-tippy key="double-check-black"> <fa-icon :icon="['fas', 'check-double']" /> </span>
+      <span class="card-check seen" v-else-if="messageStatus == 'L'" :content="tooltipContent" v-tippy key="double-check-seen"> <fa-icon :icon="['fas', 'check-double']" /> </span> <!-- messageStatus finalizador -->
+      <span class="card-check red" v-else-if="messageStatus == 'C'" :content="tooltipContent" v-tippy key="times-circle"> <fa-icon :icon="['fas', 'times-circle']" /> </span> <!-- messageStatus finalizador -->
+      <span class="card-check red" v-else-if="messageStatus == 'T'" :content="tooltipContent" v-tippy key="hourglass"> <fa-icon :icon="['fas', 'hourglass']" /> </span> <!-- Status finalizador -->
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    hasReply: {
+      type: Boolean
+    },
+    messageStatus: {
+      type: String
+    },
+    replyMessage: {
+      type: String
+    },
+    tooltipContent: {
+      type: String
+    }
+  }
+}
+</script>