@tagplus/components 0.2.80 → 0.2.84

package/package.json

@@ -7,7 +7,7 @@
       "email": "bruno@tagplus.com.br"
     }
   ],
-  "version": "0.2.80",
+  "version": "0.2.84",
   "main": "./dist/tp.common.js",
   "directories": {
     "lib": "src/lib"

package/src/components/Autosuggest/Autosuggest.vue

@@ -256,8 +256,8 @@ export default {
 
     /**
      * Método que realiza a busca dos registros remotos para as opções.
-     * 
-     * *IMPORTANTE*: deve considerar o "valueKey" nas consultas 
+     *
+     * *IMPORTANTE*: deve considerar o "valueKey" nas consultas
      * pois o valor selecionado será baseado nas opções remotas carregadas ao criar o componente.
      */
     remoteMethod: {
@@ -266,32 +266,34 @@ export default {
     }
   },
 
-  data () {
+  data() {
     return {
       tooltipVisible: false
     }
   },
 
   computed: {
-    _id () {
+    _id() {
       return this.id || this.$options.name
     },
 
     /**
      * Trata o caso que o autosuggest recebe um objeto com o valueKey e labelKey
      */
-    formatedValue () {
+    formatedValue() {
       let newVal = ''
       if (typeof this.value === 'boolean') {
         newVal = ''
-      }
-      else if (Array.isArray(this.value)) {
+      } else if (Array.isArray(this.value)) {
         newVal = this.value
-      }
-      else if (this.value && typeof this.value === 'object') {
+      } else if (this.value && typeof this.value === 'object') {
         if (!this.value[this.valueKey]) {
           if (process.env.DEBUG === 'true') {
-            throw new TypeError('Autosuggest this.value doesn\'t have a valueKey \'' + this.valueKey + '\' key')
+            throw new TypeError(
+              'Autosuggest this.value doesn\'t have a valueKey \'' +
+                this.valueKey +
+                '\' key'
+            )
           }
         } else {
           newVal = this.value[this.valueKey]
@@ -300,22 +302,26 @@ export default {
 
       return newVal
     },
-    iconClass () {
-      return (this.visible ? 'arrow-up is-reverse' : 'arrow-up')
+    iconClass() {
+      return this.visible ? 'arrow-up is-reverse' : 'arrow-up'
     },
-    showNewOption () {
-      let hasExistingOption = this.options.filter(option => !option.created)
+    showNewOption() {
+      let hasExistingOption = this.options
+        .filter(option => !option.created)
         .some(option => option.currentLabel === this.query)
       return this.filterable && this.allowCreate && !hasExistingOption
     },
     // Monta a lista com ou sem "Cadastrar Novo Item"
-    suggestionsList () {
+    suggestionsList() {
       if (this.loading) return []
       //transformando em Array
-      let list = typeof (this.suggestions) === 'object' ? Object.values(this.suggestions) : this.suggestions
+      let list =
+        typeof this.suggestions === 'object'
+          ? Object.values(this.suggestions)
+          : this.suggestions
       if (this.allowCreate) {
         let createdSuggestion = { created: true }
-        createdSuggestion[this.valueKey] = (this.query !== '') ? this.query : null
+        createdSuggestion[this.valueKey] = this.query !== '' ? this.query : null
         createdSuggestion[this.labelKey] = ''
         list.push(createdSuggestion)
       }
@@ -323,19 +329,19 @@ export default {
     }
   },
 
-  created () {
+  created() {
     this.doRequest = false
 
     if (this.loadOnCreate) {
       this.previousQuery = false
       // Chama função do element-ui select que faz o remote method
-      this.handleQueryChange(this.formatedValue)
+      this.handleQueryChange('')
     } else {
       // Marca para fazer a requisição no primeiro clique
       this.doRequest = true
     }
 
-    this.debouncedOnInputChange = debounce(this.debounce, (e) => {
+    this.debouncedOnInputChange = debounce(this.debounce, e => {
       // Correção para mobile ativar a busca enquanto digita
       if (e.isComposing) {
         // Se está apagando
@@ -350,7 +356,7 @@ export default {
     })
   },
 
-  mounted () {
+  mounted() {
     this.$nextTick(() => {
       // Componente tooltip -> autosuggest -> input
       var componenteInputInterno = this.$children[1].$refs['input']
@@ -366,7 +372,6 @@ export default {
     })
   },
 
-
   methods: {
     /**
      * Adiciona um evento no elemento dinamicamente
@@ -374,22 +379,26 @@ export default {
      * @args ev {String} Nome do listener (mouseenter, click, etc)
      * @args func {Function} Função a ser executada
      */
-    createHandler (el, ev, func) {
+    createHandler(el, ev, func) {
       if (el) {
-        el.addEventListener(ev, function () {
-          func()
-        }, false)
+        el.addEventListener(
+          ev,
+          function() {
+            func()
+          },
+          false
+        )
       }
     },
 
-    onInputChange () {
+    onInputChange() {
       if (this.filterable && this.query !== this.selectedLabel) {
         this.query = this.selectedLabel
         this.handleQueryChange(this.query)
       }
     },
 
-    emitChange (val) {
+    emitChange(val) {
       if (!valueEquals(this.formatedValue, val)) {
         this.$nextTick(() => {
           this.$emit('change', val, this.createdSelected)
@@ -398,7 +407,7 @@ export default {
     },
 
     // eslint-disable-next-line no-unused-vars
-    clearTags (event) {
+    clearTags(event) {
       this.selectedLabel = ''
       // Faz uma requisição limpa
       this.query = ''
@@ -418,21 +427,23 @@ export default {
     /**
      * Sobrescreve o getOption do select para mostrar o labelValue em vez do idValue
      */
-    getOption (val) {
+    getOption(val) {
       let value = ''
       let initialLabel = false
 
       if (typeof this.value === 'boolean') {
         value = ''
-      }
-      else if (Array.isArray(val)) {
+      } else if (Array.isArray(val)) {
         value = val
-      }
-      else if (val && typeof val === 'object') {
-        // Se val for Object converte para outro tipo 
+      } else if (val && typeof val === 'object') {
+        // Se val for Object converte para outro tipo
         if (!this.value[this.valueKey]) {
           // eslint-disable-next-line
-          console.log('Autosuggest this.value doesn\'t have a valueKey \'' + this.valueKey + '\' key')
+          console.log(
+            'Autosuggest this.value doesn\'t have a valueKey \'' +
+              this.valueKey +
+              '\' key'
+          )
         } else {
           // Se mandou a label no objeto value
           if (this.value[this.labelKey]) {
@@ -445,13 +456,19 @@ export default {
       }
 
       let option
-      const isObject = Object.prototype.toString.call(value).toLowerCase() === '[object object]'
-      const isNull = Object.prototype.toString.call(value).toLowerCase() === '[object null]'
-      const isUndefined = Object.prototype.toString.call(value).toLowerCase() === '[object undefined]'
+      const isObject =
+        Object.prototype.toString.call(value).toLowerCase() ===
+        '[object object]'
+      const isNull =
+        Object.prototype.toString.call(value).toLowerCase() === '[object null]'
+      const isUndefined =
+        Object.prototype.toString.call(value).toLowerCase() ===
+        '[object undefined]'
       for (let i = 0; i <= this.cachedOptions.length - 1; i++) {
         const cachedOption = this.cachedOptions[i]
         const isEqual = isObject
-          ? getValueByPath(cachedOption.value, this.valueKey) === getValueByPath(value, this.valueKey)
+          ? getValueByPath(cachedOption.value, this.valueKey) ===
+            getValueByPath(value, this.valueKey)
           : cachedOption.value === value
         if (isEqual) {
           option = cachedOption
@@ -459,8 +476,7 @@ export default {
         }
       }
       if (option) return option
-      const label = (!isObject && !isNull && !isUndefined)
-        ? value : ''
+      const label = !isObject && !isNull && !isUndefined ? value : ''
       let newOption = {
         value: value,
         currentLabel: initialLabel ? initialLabel : label
@@ -470,7 +486,7 @@ export default {
       }
       return newOption
     },
-    checkDefaultFirstOption () {
+    checkDefaultFirstOption() {
       this.$nextTick(() => {
         this.hoverIndex = -1
 
@@ -495,8 +511,9 @@ export default {
     /**
      * Sobrescreve a função de abrir menu do select para fazer a busca quando loadOnCreate = false
      */
-    toggleMenu () {
+    toggleMenu() {
       if (!this.selectDisabled) {
+        // Se mantem visivel quando clica nele aberto
         if (this.menuVisibleOnFocus) {
           this.menuVisibleOnFocus = false
         } else {
@@ -505,7 +522,7 @@ export default {
         // Se está visivel
         if (this.visible) {
           if (this.doRequest) {
-            this.handleQueryChange(this.formatedValue)
+            this.handleQueryChange(this.query)
             this.doRequest = false
           }
           (this.$refs.input || this.$refs.reference).focus()
@@ -513,26 +530,42 @@ export default {
       }
     },
 
+    handleClose() {
+      this.visible = false
+      // Limpa busca quando fecha
+      this.doRequest = true
+    },
+
     /**
      * Sobrescreve função do select
      */
-    handleQueryChange (val) {
+    handleQueryChange(val) {
       var _this6 = this
       // Correção aqui para forçar primeeira request com createOnLoad = false
-      if (!this.doRequest && this.previousQuery === val || this.isOnComposition) return
-      if (this.previousQuery === null && (typeof this.filterMethod === 'function' || typeof this.remoteMethod === 'function')) {
+      if (
+        (!this.doRequest && this.previousQuery === val) ||
+        this.isOnComposition
+      )
+        return
+      if (
+        this.previousQuery === null &&
+        (typeof this.filterMethod === 'function' ||
+          typeof this.remoteMethod === 'function')
+      ) {
         this.previousQuery = val
         return
       }
       this.previousQuery = val
-      this.$nextTick(function () {
+      this.$nextTick(function() {
         if (_this6.visible) _this6.broadcast('ElSelectDropdown', 'updatePopper')
       })
       this.hoverIndex = -1
       if (this.multiple && this.filterable) {
-        this.$nextTick(function () {
+        this.$nextTick(function() {
           var length = _this6.$refs.input.value.length * 15 + 20
-          _this6.inputLength = _this6.collapseTags ? Math.min(50, length) : length
+          _this6.inputLength = _this6.collapseTags
+            ? Math.min(50, length)
+            : length
           _this6.managePlaceholder()
           _this6.resetInputHeight()
         })
@@ -548,7 +581,11 @@ export default {
         this.broadcast('ElOption', 'queryChange', val)
         this.broadcast('ElOptionGroup', 'queryChange')
       }
-      if (this.defaultFirstOption && (this.filterable || this.remote) && this.filteredOptionsCount) {
+      if (
+        this.defaultFirstOption &&
+        (this.filterable || this.remote) &&
+        this.filteredOptionsCount
+      ) {
         this.checkDefaultFirstOption()
       }
     }

package/src/components/OptionsList/OptionsList.vue

@@ -36,6 +36,10 @@ export default {
     justify-content: space-between;
   }
 
+  &.center {
+    justify-content: center;
+  }
+
   &.disabled {
     pointer-events: none;
     cursor: default;
@@ -43,8 +47,7 @@ export default {
   }
 
   li {
-    flex: 1;
-    margin: 15px 0 0 15px;
+    margin-right: 15px;
 
     &:last-child {
       margin-right: 0;

package/src/components/OptionsListItem/OptionsListItem.vue

@@ -5,16 +5,7 @@
     @click="updateOption"
   >
     <div :class="['icon', direction]">
-      <el-row class="icon__wrapper">
-        <el-col :xs="16" :sm="18" :md="20">
-          <i :class="[icon, 'options-icon']" />
-        </el-col>
-        <el-col :xs="8" :sm="6" :md="4">
-          <div v-if="miniIcon !== ''" class="mini-icon-wrapper">
-            <i :class="[miniIcon, 'options-mini-icon']" />
-          </div>
-        </el-col>
-      </el-row>
+      <i :class="[icon, 'options-icon']" />
       <p class="text">
         <span
           v-for="(text, index) in texts"
@@ -24,6 +15,7 @@
         </span>
       </p>
     </div>
+    <sup v-if="badge" class="option-item-badge" />
   </li>
 </template>
 
@@ -47,9 +39,9 @@ export default {
       type: String,
       default: ''
     },
-    miniIcon: {
-      type: String,
-      default: ''
+    badge: {
+      type: Boolean,
+      default: false
     },
     direction: {
       type: String,
@@ -88,20 +80,19 @@ export default {
 <style lang="scss" scoped>
 .tp-options-list-item {
   position: relative;
+  height: 84px;
   border: 1px solid #dde5ee;
   border-radius: 6px;
   cursor: pointer;
+  white-space: nowrap;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #fff;
   transition: border-color 150ms ease-in-out;
-  min-width: 95px;
-  max-width: 165px;
+  margin-right: 15px;
+  margin-top: 15px;
 
-  li{
-    height: 84px;
-  }
   &.entrada {
     @include option-list-item-hover(#67c23a);
     @include option-list-item-checked(#67c23a);
@@ -128,10 +119,10 @@ export default {
     color: #565b66;
     display: flex;
     align-items: center;
-    text-align: center;
-    flex: 1;
+    // text-align: center;
     transition: color 150ms ease-in-out;
     line-height: 1.75em;
+    min-width: 120px;
 
     &.horizontal {
       justify-content: space-around;
@@ -155,21 +146,15 @@ export default {
 
     &.vertical {
       flex-direction: column;
-      .icon__wrapper{
-        width: 100%;
-        flex-wrap:no-wrap;
-
-        .options-icon {
-          padding-top: 1rem;
-          padding-left: 2rem;
-          font-size: 24px;
-        }
-      }
       .text {
         span {
           font-size: 14px;
         }
       }
+
+      .options-icon {
+        font-size: 24px;
+      }
     }
 
     .text {
@@ -177,20 +162,24 @@ export default {
         display: block;
       }
     }
-  }
-
-  .mini-icon-wrapper{
-    margin-top: 0.3rem;
-    display: flex;
-    height: 100%;
-    width: 25px;
-    transition: color 150ms ease-in-out;
 
-    .options-mini-icon{
-      margin: 10px 0 0 5px;
-      font-size: 14px;
-      align-self: flex-start;
+    .options-icon {
+      padding-top: 1rem;
+      font-size: 24px;
     }
   }
+
 }
+
+.option-item-badge{
+    background-color: #F56C6C;
+    border: 1px solid #FFF;
+    position: absolute;
+    top: 0;
+    transform: translateY(-50%) translateX(100%);
+    height: 12px;
+    width: 12px;
+    right: 5px;
+    border-radius: 50%;
+  }
 </style>