vue-intergrall-plugins 0.0.4 → 0.0.8

package/src/lib-components/Templates/TemplateGenerator.vue

@@ -1,35 +1,32 @@
 <template>
-  <div class="templates-container" :class="{'text-footer-template' : footerStyle}" v-if="templates && identifier">
-    <div class="options-container">
+  <div class="tg-container" v-if="templates && identifier">
+    <div class="tg-options" :class="{'column' : columnSelect}">
       <h4> Template: </h4>
-      <div class="select-container">
-        <v-select
-          :class="{'template-select' : !smartStyle, 'sm__select' : smartStyle}"
-          appendToBody
-          :calculatePosition="calculateSelectPosition"
-          :options="templateOptions"
-          :value="codTemplate"
-          :reduce="template => template.cod"
-          :clearable="false"
-          @input="setTemplate"
-          :getOptionLabel="template => template.label">
-          <div slot="no-options" v-text="dictionary.msg_sem_resultados"></div>
-        </v-select>
-      </div>
+      <v-select
+        class="tg-select"
+        appendToBody
+        :calculatePosition="calculateSelectPosition"
+        :options="templateOptions"
+        :value="codTemplate"
+        :reduce="template => template.cod"
+        :clearable="false"
+        @input="setTemplate"
+        :getOptionLabel="template => template.label">
+        <div slot="no-options" v-text="dictionary.msg_sem_resultados"></div>
+      </v-select>
     </div>
     <template v-if="selectedTemplate">
-      <div class="template-field" v-if="selectedTemplate.components">
-        <TemplateSingle :template="selectedTemplate" @set-vars="setFinalMessage" :hasButton="hasButton" :iconButton="iconButton" @click-trigger="$emit('click-trigger')" :smartStyle="smartStyle" :identifier="identifier" :allVariables="allVariables" :dictionary="dictionary" />
+      <div class="tg-component" v-if="selectedTemplate.components">
+        <TemplateSingle :template="selectedTemplate" @set-vars="setFinalMessage" :hasButton="hasButton" :iconButton="iconButton" @click-trigger="$emit('click-trigger')"  :identifier="identifier" :allVariables="allVariables" :dictionary="dictionary" />
       </div>
-      <div class="template-field" v-else>
-        <TemplateMessage  @final-message="setMessage" :smartStyle="smartStyle" :hasButton="hasButton" :iconButton="iconButton" @click-trigger="$emit('click-trigger', true)" :dictionary="dictionary" />
+      <div class="tg-component" v-else>
+        <TemplateMessage  @final-message="setMessage" :hasButton="hasButton" :iconButton="iconButton" @click-trigger="$emit('click-trigger', true)" :dictionary="dictionary" />
       </div>
     </template> 
   </div> 
 </template>
 
 <script>
-  /*eslint no-mixed-spaces-and-tabs: ["error", "smart-tabs"]*/
   import { createPopper } from "@popperjs/core"
   import TemplateSingle from "./TemplateSingle"
   import TemplateMessage from "./TemplateMessage"
@@ -46,19 +43,11 @@
         required: false,
         default: true
       },
-      smartStyle: {
-        type: Boolean,
-        required: false
-      },
-      adjustBoxOnSelect: {
-        type: Boolean,
-        required: false
-      },
-      adjustChatOnSelect: {
+      columnSelect: {
         type: Boolean,
         required: false
       },
-      footerStyle: {
+      resizeParentOnSelect: {
         type: Boolean,
         required: false
       },
@@ -164,8 +153,7 @@
         }
       },
       adjustOnSelect() {
-        if(this.adjustBoxOnSelect) if(this.$root.$refs.boxFlutuante) this.$root.$refs.boxFlutuante.setBoxPosition()
-        if(this.adjustChatOnSelect) this.$emit("adjust-chat")
+        if(this.resizeParentOnSelect) this.$emit("resize-parent")
       },
       setFinalMessage(vars) {
         const keys   = Object.keys(vars),
@@ -205,6 +193,7 @@
             })
           }
         }
+
         this.$emit("template-data", this.selectedTemplate)
       },
       setMessage(message) {
@@ -215,180 +204,137 @@
 </script>
 
 <style>
-.toasted svg {
-  margin-right: 10px; }
-
-.d-none {
-  display: none; }
+* { box-sizing: border-box; }
+.toasted svg { margin-right: 10px }
+.d-none { display: none }
+ul { list-style-type: none }
+h1, h2, h3, h4, p { margin: 0; padding: 0 }
 
-ul {
-  list-style-type: none; }
-
-.templates-container {
+.tg-container {
+  width: 100%;
   display: flex;
   flex-direction: column;
   overflow-x: hidden;
   overflow-y: auto;
-  padding: 0 5px;
+}
+
+.tg-options {
+  width: 100%;
+  display: flex;
+}
+.tg-options.column {
+  flex-direction: column;
+}
+.tg-options h4 {
+  margin-right: 5px;
+}
+
+.tg-select {
+  flex: 1;
+  height: 34px;
+  overflow: hidden;
+}
+.tg-select .vs__dropdown-toggle {
+  background-color: #FFF;
+  height: 34px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+.tg-select .vs__selected-options {
+  height: 34px;
+  overflow: hidden;
+}
+.tg-select .vs__selected-options > span {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+
+.vs__dropdown-option {
+  transition: background-color 150ms;
+  white-space: normal;
+}
+.vs__dropdown-option:nth-child(odd) {
+  background-color: #F1F1F1;
+}
+.vs__dropdown-option:hover, .vs__dropdown-option:focus, .vs__dropdown-option:active, .vs__dropdown-option:focus, .vs__dropdown-option--selected, .vs__dropdown-option--highlight {
+  background-color: #5897fb!important;
+  color: #FFF;
+}
+
+.tg-component {
   width: 100%;
-  height: auto;
-  min-height: 50%;
-  max-height: calc(100% - 24px); }
-  .templates-container.text-footer-template {
-    padding: 0;
-    margin-top: 10px; }
-    .templates-container.text-footer-template .options-container {
-      display: flex;
-      flex-wrap: wrap;
-      font-size: .8rem; }
-      .templates-container.text-footer-template .options-container h4 {
-        width: 100%;
-        margin-left: 0;
-        padding: 5px 0 0 0; }
-    .templates-container.text-footer-template .template-content {
-      flex: 2 !important;
-      padding-bottom: 0 !important; }
-  .templates-container .options-container {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-    padding: 3px 0;
-    min-height: 35px; }
-    .templates-container .options-container h4 {
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      margin: 0 5px 0 0;
-      z-index: 1; }
-  .templates-container hr {
-    border: unset;
-    height: 1px;
-    background-color: #CCC;
-    margin: 2.5px 0; }
-  .templates-container .template-field {
-    width: 100%; }
-    .templates-container .template-field .template-single {
-      width: 100%;
-      display: flex;
-      justify-content: space-between; }
-    .templates-container .template-field .template-content {
-      font-size: .7rem;
-      padding: 10px 0;
-      flex: 1; }
-      .templates-container .template-field .template-content header {
-        padding: 3px 5px;
-        border-top-left-radius: 5px;
-        border-top-right-radius: 5px;
-        background-color: #dff0d8;
-        border-top: 1px solid #CCC;
-        border-right: 1px solid #CCC;
-        border-left: 1px solid #CCC; }
-        .templates-container .template-field .template-content header p {
-          font-weight: 600; }
-      .templates-container .template-field .template-content section {
-        line-height: 25px;
-        padding: 3px 5px;
-        border-left: 1px solid #CCC;
-        border-right: 1px solid #CCC;
-        background-color: #dff0d8; }
-        .templates-container .template-field .template-content section.margin-bottom {
-          border-bottom-left-radius: 5px;
-          border-bottom-right-radius: 5px;
-          border-bottom: 1px solid #CCC; }
-      .templates-container .template-field .template-content footer {
-        padding: 3px 5px;
-        background-color: #dff0d8;
-        border: 1px solid #CCC;
-        border-top: unset;
-        border-bottom-left-radius: 5px;
-        border-bottom-right-radius: 5px; }
-      .templates-container .template-field .template-content input {
-        border: 1px solid transparent;
-        outline: 0;
-        font-size: .8rem;
-        padding: 2.5px 5px;
-        background-color: #FFF; }
-        .templates-container .template-field .template-content input::placeholder {
-          color: #bbb; }
-        .templates-container .template-field .template-content input.active {
-          border: 1px solid #007bff; }
-        .templates-container .template-field .template-content input.invalid {
-          border: 1px solid #E74C3C !important; }
-      .templates-container .template-field .template-content .text-footer {
-        height: 4rem;
-        width: 90%; }
-        .templates-container .template-field .template-content .text-footer textarea {
-          height: 3rem;
-          min-height: auto;
-          max-height: 4rem;
-          width: 90%; }
-      .templates-container .template-field .template-content .emoji-mart {
-        top: -30px !important;
-        left: 30px !important; }
-      .templates-container .template-field .template-content .sm__template {
-        display: flex; }
-    .templates-container .template-field .template-btn {
-      width: 40%;
-      display: flex;
-      justify-content: center;
-      align-items: center; }
-      .templates-container .template-field .template-btn button {
-        outline: unset;
-        border: unset;
-        display: block;
-        min-width: 180px;
-        height: 35px;
-        padding: 0 10px;
-        font-weight: 500;
-        background-color: #007bff;
-        color: #FFF;
-        transition-duration: 300ms;
-        user-select: none;
-        cursor: pointer;
-        box-shadow: inset 0 -2px rgba(0, 0, 0, 0.2);
-        opacity: 0.9;
-        border-radius: 25px; }
-        .templates-container .template-field .template-btn button:hover {
-          opacity: 1; }
-        .templates-container .template-field .template-btn button:active {
-          opacity: 1;
-          box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
-          -webkit-transform: translateY(1px);
-          -moz-transform: translateY(1px);
-          -o-transform: translateY(1px);
-          -ms-transform: translateY(1px);
-          transform: translateY(1px); }
-        .templates-container .template-field .template-btn button:focus, .templates-container .template-field .template-btn button:active {
-          outline: unset; }
-      .templates-container .template-field .template-btn.small-btn {
-        width: auto;
-        margin-left: 5px; }
-        .templates-container .template-field .template-btn.small-btn button {
-          min-width: 35px;
-          width: 35px;
-          padding: 0;
-          display: flex;
-          justify-content: center;
-          align-items: center; }
+}
 
-.select-container {
+.ts-container {
+  width: 100%;
   display: flex;
-  flex: 1; }
-  .select-container .template-select {
-    flex: 1; }
+  justify-content: space-between;
+}
 
-.vs__dropdown-menu {
-  overflow-x: hidden;
-  overflow-y: auto; }
-  .vs__dropdown-menu .vs__dropdown-option {
-    white-space: normal; }
+.ts-content {
+  --border-color: #CCC;
+  --background-color: #DFF0D8;
+  --input-background-color: #FFF;
+  --input-border-default: #007BFF;
+  --input-border-error: #E74C3C;
+  --placeholder-color: #BBB;
 
-.template-var {
-  display: inline;
-  position: relative; }
+  flex: 2;
+  font-size: .7rem;
+  padding: 10px 0;
+}
+.ts-content header, .ts-content section, .ts-content footer {
+  padding: 3px 5px;
+  background-color: var(--background-color);
+}
+.ts-content header, .ts-content section {
+  border-right: 1px solid var(--border-color);
+  border-left: 1px solid var(--border-color);
+}
+.ts-content header {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  border-top: 1px solid var(--border-color);
+}
+.ts-content header { font-weight: 550 }
+.ts-content section {
+  line-height: 25px;
+}
+.ts-content section.margin-bottom {
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  border-bottom: 1px solid var(--border-color);
+}
+.ts-content footer {
+  border: 1px solid var(--border-color);
+  border-top: unset;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+.ts-content input {
+  border: 1px solid transparent;
+  outline: 0;
+  font-size: .8rem;
+  padding: 2.5px 5px;
+  background-color: var(--input-background-color); 
+}
+.ts-content input::placeholder {
+  color: var(--placeholder-color); 
+}
+.ts-content input.active, .ts-content input:focus{
+  border: 1px solid var(--input-border-default); 
+}
+.ts-content input.invalid {
+  border: 1px solid var(--input-border-error)!important; 
+}
+.ts-content__var {
+  display: inline-block;
+  position: relative;
+}
 
-.var-list-dropdown {
+.ts-dropdown {
   margin: 0;
   padding: 0;
   position: absolute;
@@ -402,21 +348,89 @@ ul {
   opacity: 0;
   list-style-type: none;
   border: 1px solid #444;
-  border-top: unset; }
-  .var-list-dropdown li {
-    width: 100%;
-    opacity: .9;
-    cursor: pointer;
-    font-weight: 550;
-    padding: 2px 5px;
-    transition: background-color 150ms; }
-    .var-list-dropdown li:hover, .var-list-dropdown li:focus-within, .var-list-dropdown li:focus {
-      opacity: 1;
-      background-color: #555;
-      color: #FFF; }
-
-.var-list-dropdown.visible {
+  border-top: unset;
+}
+.ts-dropdown li {
+  width: 100%;
+  opacity: .9;
+  cursor: pointer;
+  font-weight: 550;
+  padding: 2px 5px;
+  transition: background-color 150ms;
+}
+.ts-dropdown li:hover, .ts-dropdown li:focus-within, .ts-dropdown li:focus {
+  opacity: 1;
+  background-color: #555;
+  color: #FFF;
+}
+.ts-dropdown.visible {
   visibility: visible;
-  opacity: 1; }
+  opacity: 1; 
+}
+.tg-btn {
+  width: 40%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.tg-btn button {
+  outline: unset;
+  border: unset;
+  display: block;
+  min-width: 180px;
+  height: 35px;
+  padding: 0 10px;
+  font-weight: 500;
+  background-color: #007bff;
+  color: #FFF;
+  transition-duration: 300ms;
+  user-select: none;
+  cursor: pointer;
+  box-shadow: inset 0 -2px rgba(0, 0, 0, 0.2);
+  opacity: 0.9;
+  border-radius: 25px;
+}
+.tg-btn button:hover {
+  opacity: 1; 
+}
+.tg-btn button:active {
+  opacity: 1;
+  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
+  -webkit-transform: translateY(1px);
+  -moz-transform: translateY(1px);
+  -o-transform: translateY(1px);
+  -ms-transform: translateY(1px);
+  transform: translateY(1px);
+}
+.tg-btn button:active {
+  opacity: 1;
+  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
+  -webkit-transform: translateY(1px);
+  -moz-transform: translateY(1px);
+  -o-transform: translateY(1px);
+  -ms-transform: translateY(1px);
+  transform: translateY(1px); 
+}
+.tg-btn button:focus, .tg-btn button:active {
+  outline: unset; 
+}
+.tg-btn.small-btn {
+  width: auto;
+  margin-left: 5px;
+}
+.tg-btn.small-btn button {
+  min-width: 35px;
+  width: 35px;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.tm-container {
+  border: 1px solid var(--border-color);
+  border-radius: 5px;
+  display: flex;
+}
 
 </style>

package/src/lib-components/Templates/TemplateMessage.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="template-single">
-    <div class="template-content">
-      <section :class="{ 'sm__template': smartStyle }">
+  <div class="ts-container">
+    <div class="ts-content">
+      <section :class="{'tm-container' : hasButton}">
         <TextFooter
           :textId="'var_1'"
           width="full"
@@ -10,11 +10,12 @@
           @final-message="preencherMensagem"
           :placeholderMessage="'Escreva sua mensagem'"
           :ignoreHideTextarea="true"
+          :dictionary="dictionary"
         ></TextFooter>
-        <div class="template-btn" :class="{'small-btn' : iconButton}" v-if="hasButton">
+        <div class="tg-btn" :class="{'small-btn' : iconButton}" v-if="hasButton">
           <button @click="sendMessage">
             <template v-if="!iconButton"> {{ dictionary.btn_contatar_clientes }} </template>
-            <font-awesome-icon v-else :icon="['fas', 'paper-plane']"></font-awesome-icon>
+            <fa-icon v-else :icon="['fas', 'paper-plane']" />
           </button>
         </div>
       </section>
@@ -33,10 +34,6 @@ export default {
     };
   },
   props: {
-    smartStyle: {
-      type: Boolean,
-      required: false,
-    },
     hasButton: {
       type: Boolean,
       required: false
@@ -69,13 +66,6 @@ export default {
           elem.classList.toggle("active");
         }
       }
-    },
-    isValid(textValue) {
-      const regex =
-        /^[ ?????�����??��?���?��??????�������?���?��???��??\w?-�\r\n()[\]{}.,:;@??�????!&?�`�=%^*+\-$|/]+$/;
-      const value = textValue ? textValue.trim("") : "";
-
-      return regex.test(value);
     }
   }
 };