@tagplus/components 0.2.110 → 1.0.5

package/src/components/Multisuggest/Multisuggest.vue

@@ -344,7 +344,7 @@ export default {
     }
   },
 
-  data() {
+  data () {
     return {
       selectedLabelsArray: [],
       selectedLabels: ''
@@ -352,19 +352,18 @@ export default {
   },
 
   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)) {
         this.value.forEach((item) => {
           if (!item[this.valueKey]) {
             if (process.env.DEBUG === 'true') {
@@ -372,31 +371,31 @@ export default {
             }
           }
         })
-        
+
         newVal = this.value
       }
 
       return newVal
     },
-    iconClass() {
+    iconClass () {
       return this.visible ? 'arrow-up is-reverse' : 'arrow-up'
     },
-    showNewOption() {
-      let hasExistingOption = this.options
+    showNewOption () {
+      const 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 =
+      // transformando em Array
+      const list =
         typeof this.suggestions === 'object'
           ? Object.values(this.suggestions)
           : this.suggestions
       if (this.allowCreate) {
-        let createdSuggestion = { created: true }
+        const createdSuggestion = { created: true }
         createdSuggestion[this.valueKey] = this.query !== '' ? this.query : null
         createdSuggestion[this.labelKey] = ''
         list.push(createdSuggestion)
@@ -404,12 +403,13 @@ export default {
       return list
     },
 
-    emptyText() {
+    emptyText () {
       if (this.loading) {
         return this.loadingText || this.t('el.select.loading')
       } else {
         if (this.remote && this.query === '' && this.options.length === 0) {
-          return this.noDataText || this.$tpI18n.t('autosuggests.sem_dados')}
+          return this.noDataText || this.$tpI18n.t('autosuggests.sem_dados')
+        }
         if (this.filterable && this.query && this.options.length > 0 && this.filteredOptionsCount === 0) {
           return this.noMatchText || this.t('el.select.noMatch')
         }
@@ -423,19 +423,19 @@ export default {
 
   watch: {
     // eslint-disable-next-line no-unused-vars
-    value(newValue, oldValue) {
+    value (newValue, oldValue) {
       // Se limpou com o X
       if (!Array.isArray(newValue)) {
         this.selectedLabelsArray = []
       } else if (newValue.length > oldValue.length) {
-        let novoItem = newValue.filter(x => !oldValue.includes(x))
+        const novoItem = newValue.filter(x => !oldValue.includes(x))
         this.suggestionsList.forEach(item => {
           if (item[this.valueKey] === novoItem[0]) {
             this.selectedLabelsArray.push(item)
           }
         })
       } else {
-        let itemApagado = oldValue.filter(x => !newValue.includes(x))
+        const itemApagado = oldValue.filter(x => !newValue.includes(x))
         this.selectedLabelsArray.forEach((item, index) => {
           if (item.id === itemApagado[0]) {
             this.selectedLabelsArray.splice(index, 1)
@@ -451,7 +451,7 @@ export default {
     }
   },
 
-  created() {
+  created () {
     this.debouncedQueryChange = debounce(this.debounce, e => {
       if (e.isComposing) {
         // Se está apagando
@@ -473,16 +473,16 @@ export default {
       }
     })
 
-    if(Array.isArray(this.value)){
-      this.value.forEach((item,key) => {
+    if (Array.isArray(this.value)) {
+      this.value.forEach((item, key) => {
         if (item[this.valueKey]) {
           this.value[key] = item[this.valueKey]
-          if(item[this.labelKey]) {
+          if (item[this.labelKey]) {
             this.selectedLabelsArray.push(item)
           }
         }
       })
-    }else if(process.env.DEBUG === 'true'){
+    } else if (process.env.DEBUG === 'true') {
       console.log(`'${this.$options.name}' recebeu valor em formato inválido.`)
       console.log(this.value)
     }
@@ -508,7 +508,7 @@ export default {
   },
 
   methods: {
-    emitChange(val) {
+    emitChange (val) {
       if (!valueEquals(this.formatedValue, val)) {
         this.$nextTick(() => {
           this.$emit('change', val, this.createdSelected)
@@ -517,7 +517,7 @@ export default {
     },
 
     // eslint-disable-next-line no-unused-vars
-    clearTags(event) {
+    clearTags (event) {
       // Faz uma requisição limpa
       this.query = ''
       this.doRequest = true
@@ -534,7 +534,7 @@ export default {
     /**
      * Sobrescreve o getOption do select para mostrar o labelValue em vez do idValue
      */
-    getOption(val) {
+    getOption (val) {
       let value = ''
       let initialLabel = false
 
@@ -542,9 +542,8 @@ export default {
         value = ''
       } 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 (!val[this.valueKey]) {
           console.error(`Multisuggest '${this.$options.name}' option doesn't have a valueKey '${this.valueKey}' key`)
         } else {
@@ -581,16 +580,16 @@ export default {
       }
       if (option) return option
       const label = !isObject && !isNull && !isUndefined ? value : ''
-      let newOption = {
-        value: value,
-        currentLabel: initialLabel ? initialLabel : label
+      const newOption = {
+        value,
+        currentLabel: initialLabel || label
       }
       if (this.multiple) {
         newOption.hitState = false
       }
       return newOption
     },
-    checkDefaultFirstOption() {
+    checkDefaultFirstOption () {
       this.$nextTick(() => {
         this.hoverIndex = -1
 
@@ -615,7 +614,7 @@ 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) {
@@ -631,7 +630,7 @@ export default {
       }
     },
 
-    handleClose() {
+    handleClose () {
       this.visible && this.$emit('closeSelect')
       this.visible = false
       // Limpa busca quando fecha
@@ -641,8 +640,8 @@ export default {
     /**
      * Sobrescreve função do select
      */
-    handleQueryChange(val, forceBusca = false) {
-      var _this6 = this
+    handleQueryChange (val, forceBusca = false) {
+      const _this6 = this
       // Correção aqui para forçar primeira request com createOnLoad = false
       // Não considera isOnComposition mais
       if (!this.doRequest && this.previousQuery === val) return
@@ -657,13 +656,13 @@ export default {
         }
       }
       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() {
-          var length = _this6.$refs.input.value.length * 15 + 20
+        this.$nextTick(function () {
+          const length = _this6.$refs.input.value.length * 15 + 20
           _this6.inputLength = _this6.collapseTags
             ? Math.min(50, length)
             : length

package/src/components/OptionsList/OptionsList.vue

@@ -16,7 +16,7 @@ export default {
     justifyContent: {
       // 'space-between' / 'space-around' / (any flex property)
       type: String,
-      default: 'space-between',
+      default: 'space-between'
     },
     disabled: {
       type: Boolean,

package/src/components/OptionsList/index.js

@@ -1,3 +1,3 @@
 import OptionsList from './OptionsList'
 
-export default OptionsList
+export default OptionsList

package/src/components/OptionsListItem/OptionsListItem.vue

@@ -2,7 +2,9 @@
   <li
     :id="id"
     :class="['tp-options-list-item', itemType, active == optValue ? 'active' : '']"
+    tabindex="0"
     @click="updateOption"
+    @keyup.enter="updateOption"
   >
     <div :class="['icon', direction]">
       <i :class="[icon, 'options-icon']" />
@@ -57,7 +59,7 @@ export default {
     },
     checked: {
       type: Boolean,
-      default: false,
+      default: false
     },
     type: {
       type: String,
@@ -66,14 +68,14 @@ export default {
     active: {
       type: String,
       default: ''
-    },
+    }
   },
   methods: {
     updateOption () {
       this.$emit('updateValor', this.optValue)
       this.$emit('input', this.optValue)
-    },
-  },
+    }
+  }
 }
 </script>
 
@@ -171,6 +173,10 @@ export default {
 
 }
 
+  .tp-options-list-item:focus{
+    border: 1px solid #437cf9;
+  }
+
 .option-item-badge{
     background-color: #F56C6C;
     border: 1px solid #FFF;

package/src/components/OptionsListItem/index.js

@@ -1,3 +1,3 @@
 import OptionsListItem from './OptionsListItem'
 
-export default OptionsListItem
+export default OptionsListItem

package/src/components/Percent/Percent.vue

@@ -39,34 +39,34 @@ export default {
       required: false,
       default: null
     },
-    
+
     // remove o simbolo em prepend
     removePrepend: {
-      type:Boolean,
+      type: Boolean,
       default: false
-    }, 
+    },
 
     // coloca o simbolo no append
     showAppend: {
-      type:Boolean,
+      type: Boolean,
       default: false
-    }, 
+    },
 
-    //valor do campo. Pode ser usado como v-model também
+    // valor do campo. Pode ser usado como v-model também
     value: {
       type: [Number, String],
       default: 0
     },
 
-    //tamanho máximo do campo. limitado por padrão a 21 caracteres por limitações do JS
+    // tamanho máximo do campo. limitado por padrão a 21 caracteres por limitações do JS
     maxlength: {
       type: Number,
       default: 21
-    },
+    }
   },
 
   computed: {
-    _id(){
+    _id () {
       return this.id || this.$options.name
     }
   },

package/src/components/Percent/index.js

@@ -1,3 +1,3 @@
 import Percent from './Percent'
 
-export default Percent
+export default Percent

package/src/components/Skeleton/Skeleton.vue

@@ -40,7 +40,7 @@ export default {
 
     /**
      * Largura em "%"". Quando círculo, em "px"
-     * 
+     *
      */
     width: {
       type: Number,
@@ -68,15 +68,15 @@ export default {
   },
 
   computed: {
-    cWidth() {
-      if(this.circle && this.width){
+    cWidth () {
+      if (this.circle && this.width) {
         return `${this.width}px`
       }
       return `${this.width}%`
     },
 
-    cHeight() {
-      if(this.circle && this.width){
+    cHeight () {
+      if (this.circle && this.width) {
         return `${this.width}px`
       }
       return `${this.height}em`
@@ -98,7 +98,7 @@ export default {
 .tp-skeleton {
   display: block;
   height: 100%;
-  
+
   --baseColor: #ebeef2;
 
   span {
@@ -132,4 +132,4 @@ export default {
   }
 }
 
-</style>
+</style>

package/src/components/Skeleton/index.js

@@ -1,3 +1,3 @@
 import Skeleton from './Skeleton'
 
-export default Skeleton
+export default Skeleton

package/src/components/Step/Step.vue

@@ -84,7 +84,7 @@ export default {
     }
   },
 
-  data() {
+  data () {
     return {
       index: -1,
       lineStyle: {},
@@ -93,34 +93,34 @@ export default {
   },
 
   computed: {
-    currentStatus() {
+    currentStatus () {
       return this.internalStatus
     },
-    prevStatus() {
+    prevStatus () {
       const prevStep = this.$parent.steps[this.index - 1]
       return prevStep ? prevStep.currentStatus : 'wait'
     },
-    isCenter() {
+    isCenter () {
       return this.$parent.alignCenter
     },
-    isVertical() {
+    isVertical () {
       return this.$parent.direction === 'vertical'
     },
-    isSimple() {
+    isSimple () {
       return this.$parent.simple
     },
-    isLast() {
+    isLast () {
       const parent = this.$parent
       return parent.steps[parent.steps.length - 1] === this
     },
-    stepsCount() {
+    stepsCount () {
       return this.$parent.steps.length
     },
-    space() {
+    space () {
       const { isSimple, $parent: { space } } = this
-      return isSimple ? '' : space 
+      return isSimple ? '' : space
     },
-    style: function() {
+    style: function () {
       const style = {}
       const parent = this.$parent
       const len = parent.steps.length
@@ -143,19 +143,18 @@ export default {
   },
 
   watch: {
-    status (newVal) {
-      if(newVal === 'process' || newVal === 'error'){
-        this.updateStatus(this.$parent.active)
-      }
-    },
+    status () {
+      this.updateStatus(this.$parent.active)
+      this.internalStatus = this.status
+    }
 
   },
 
-  beforeCreate() {
+  beforeCreate () {
     this.$parent.steps.push(this)
   },
 
-  beforeDestroy() {
+  beforeDestroy () {
     const steps = this.$parent.steps
     const index = steps.indexOf(this)
     if (index >= 0) {
@@ -163,7 +162,7 @@ export default {
     }
   },
 
-  mounted() {
+  mounted () {
     const unwatch = this.$watch('index', () => {
       this.$watch('$parent.active', this.updateStatus, { immediate: true })
       this.$watch('$parent.processStatus', () => {
@@ -175,10 +174,10 @@ export default {
   },
 
   methods: {
-    updateStatus(val) {
+    updateStatus (val) {
       const prevChild = this.$parent.$children[this.index - 1]
 
-      if (this.status === 'error'){
+      if (this.status === 'error') {
         this.internalStatus = 'error'
       } else if (val > this.index) {
         this.internalStatus = this.$parent.finishStatus
@@ -191,14 +190,14 @@ export default {
       if (prevChild) prevChild.calcProgress(this.internalStatus)
     },
 
-    calcProgress(status) {
+    calcProgress (status) {
       let step = 100
       const style = {}
 
       style.transitionDelay = 150 * this.index + 'ms'
       // if (status === this.$parent.processStatus) {
       //   step = this.currentStatus !== 'error' ? 0 : 0
-      // } else 
+      // } else
       if (status === 'wait') {
         step = 0
         style.transitionDelay = (-50 * this.index) + 'ms'

package/src/components/Step/index.js

@@ -1,3 +1,3 @@
 import Step from './Step'
 
-export default Step
+export default Step

package/src/components/Steps/Steps.vue

@@ -10,10 +10,10 @@ export default {
       type: Boolean,
       default: false
     }
-  },
-}   
+  }
+}
 
 </script>
 
 <style lang="scss" scoped>
-</style>
+</style>

package/src/components/Steps/index.js

@@ -1,3 +1,3 @@
-import Steps  from './Steps'
+import Steps from './Steps'
 
-export default Steps
+export default Steps

package/src/components/Tip/Tip.vue

@@ -5,20 +5,24 @@
     align="middle"
     :class="tptipclasses"
   >
-    <el-col :sm="24" :lg="3">
+    <el-col
+      :sm="24"
+      :lg="3"
+    >
       <div style="display: flex; min-width:25px; justify-content: center; margin:15px; padding: auto">
         <em class="far fa-lightbulb-on" />
       </div>
     </el-col>
 
-    <el-col :sm="24" :lg="21">
+    <el-col
+      :sm="24"
+      :lg="21"
+    >
       <div
         :id="`${_id}-text`"
         style="margin:15px; margin-left:0px"
         v-html="text"
-      >
-        {{ text }}
-      </div>
+      />
     </el-col>
   </el-row>
 </template>
@@ -36,7 +40,7 @@ export default {
     text: {
       type: String,
       required: true,
-      default: '',
+      default: ''
     },
 
     type: {
@@ -81,7 +85,7 @@ export default {
   padding: 1rem;
   font-size: 14px;
   line-height: 24px;
-  color: #586D93;
+  color: #586d93;
 }
 
 .info-text {
@@ -106,26 +110,26 @@ export default {
 }
 
 .tp-tip-warning {
-  background: #FFF9EA 0% 0% no-repeat padding-box;
-  border: 1px solid #FFC437;
+  background: #fff9ea 0% 0% no-repeat padding-box;
+  border: 1px solid #ffc437;
   ::v-deep strong,
   ::v-deep b {
-  color: #FFC437;
+    color: #ffc437;
   }
   ::v-deep em {
-  color: #FFC437;
+    color: #ffc437;
   }
 }
 
 .tp-tip-success {
-  background: #F3FCFC 0% 0% no-repeat padding-box;
-  border: 1px solid #08A19E;
+  background: #f3fcfc 0% 0% no-repeat padding-box;
+  border: 1px solid #08a19e;
   ::v-deep strong,
   ::v-deep b {
-  color: #08A19E;
+    color: #08a19e;
   }
   ::v-deep em {
-  color: #08A19E;
+    color: #08a19e;
   }
 }
 </style>

package/src/components/Tip/index.js

@@ -1,3 +1,3 @@
-import Tip  from './Tip'
+import Tip from './Tip'
 
-export default Tip
+export default Tip

package/src/components/index.js

@@ -26,4 +26,4 @@ export {
   Step,
   Steps,
   InputNumber
-}
+}