@tagplus/components 0.2.108 → 1.0.0

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

@@ -57,7 +57,7 @@ export default {
     },
     checked: {
       type: Boolean,
-      default: false,
+      default: false
     },
     type: {
       type: String,
@@ -66,14 +66,14 @@ export default {
     active: {
       type: String,
       default: ''
-    },
+    }
   },
   methods: {
     updateOption () {
       this.$emit('updateValor', this.optValue)
       this.$emit('input', this.optValue)
-    },
-  },
+    }
+  }
 }
 </script>
 

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

@@ -0,0 +1,222 @@
+<template>
+  <div
+    class="el-step"
+    :style="style"
+    :class="[
+      !isSimple && `is-${$parent.direction}`,
+      isSimple && 'is-simple',
+      isLast && !space && !isCenter && 'is-flex',
+      isCenter && !isVertical && !isSimple && 'is-center']"
+  >
+    <!-- icon & line -->
+    <div
+      class="el-step__head"
+      :class="`is-${currentStatus === 'active' ? 'finish' : currentStatus}`"
+    >
+      <div
+        class="el-step__line"
+        :style="isLast ? '' : { marginRight: $parent.stepOffset + 'px' }"
+      >
+        <i class="el-step__line-inner" :style="lineStyle" />
+      </div>
+
+      <div class="el-step__icon" :class="`is-${icon ? 'icon' : 'text'}`">
+        <slot
+          v-if="currentStatus !== 'success' && currentStatus !== 'error'"
+          name="icon"
+        >
+          <i v-if="icon" class="el-step__icon-inner" :class="[icon]" />
+          <div v-if="!icon && !isSimple" class="el-step__icon-inner">
+            {{ index + 1 }}
+          </div>
+        </slot>
+        <i
+          v-else
+          :class="['el-icon-' + (currentStatus === 'success' ? 'check' : 'close')]"
+          class="el-step__icon-inner is-status"
+        />
+      </div>
+    </div>
+    <!-- title & description -->
+    <div class="el-step__main">
+      <div
+        ref="title"
+        class="el-step__title"
+        :class="['is-' + currentStatus]"
+      >
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </div>
+      <div v-if="isSimple" class="el-step__arrow" />
+      <div
+        v-else
+        class="el-step__description"
+        :class="['is-' + currentStatus]"
+      >
+        <slot name="description">
+          {{ description }}
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'TpStep',
+
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    status: {
+      type: String,
+      default: ''
+    }
+  },
+
+  data () {
+    return {
+      index: -1,
+      lineStyle: {},
+      internalStatus: ''
+    }
+  },
+
+  computed: {
+    currentStatus () {
+      return this.internalStatus
+    },
+    prevStatus () {
+      const prevStep = this.$parent.steps[this.index - 1]
+      return prevStep ? prevStep.currentStatus : 'wait'
+    },
+    isCenter () {
+      return this.$parent.alignCenter
+    },
+    isVertical () {
+      return this.$parent.direction === 'vertical'
+    },
+    isSimple () {
+      return this.$parent.simple
+    },
+    isLast () {
+      const parent = this.$parent
+      return parent.steps[parent.steps.length - 1] === this
+    },
+    stepsCount () {
+      return this.$parent.steps.length
+    },
+    space () {
+      const { isSimple, $parent: { space } } = this
+      return isSimple ? '' : space
+    },
+    style: function () {
+      const style = {}
+      const parent = this.$parent
+      const len = parent.steps.length
+
+      const space = (typeof this.space === 'number'
+        ? this.space + 'px'
+        : this.space
+          ? this.space
+          : 100 / (len - (this.isCenter ? 0 : 1)) + '%')
+      style.flexBasis = space
+      if (this.isVertical) return style
+      if (this.isLast) {
+        style.maxWidth = 100 / this.stepsCount + '%'
+      } else {
+        style.marginRight = -this.$parent.stepOffset + 'px'
+      }
+
+      return style
+    }
+  },
+
+  watch: {
+    status (newVal) {
+      if (newVal === 'process' || newVal === 'error') {
+        this.updateStatus(this.$parent.active)
+      }
+    }
+
+  },
+
+  beforeCreate () {
+    this.$parent.steps.push(this)
+  },
+
+  beforeDestroy () {
+    const steps = this.$parent.steps
+    const index = steps.indexOf(this)
+    if (index >= 0) {
+      steps.splice(index, 1)
+    }
+  },
+
+  mounted () {
+    const unwatch = this.$watch('index', () => {
+      this.$watch('$parent.active', this.updateStatus, { immediate: true })
+      this.$watch('$parent.processStatus', () => {
+        const activeIndex = this.$parent.active
+        this.updateStatus(activeIndex)
+      }, { immediate: true })
+      unwatch()
+    })
+  },
+
+  methods: {
+    updateStatus (val) {
+      const prevChild = this.$parent.$children[this.index - 1]
+
+      if (this.status === 'error') {
+        this.internalStatus = 'error'
+      } else if (val > this.index) {
+        this.internalStatus = this.$parent.finishStatus
+      } else if (val === this.index && this.prevStatus !== 'error') {
+        this.internalStatus = this.$parent.processStatus
+      } else if (this.$parent.newItem && this.prevStatus !== 'error') {
+        this.internalStatus = 'wait'
+      }
+
+      if (prevChild) prevChild.calcProgress(this.internalStatus)
+    },
+
+    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
+      if (status === 'wait') {
+        step = 0
+        style.transitionDelay = (-50 * this.index) + 'ms'
+      }
+
+      style.borderWidth = step && !this.isSimple ? '1px' : 0
+      this.$parent.direction === 'vertical'
+        ? style.height = step + '%'
+        : style.width = step + '%'
+
+      this.lineStyle = style
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.el-step__head.is-process {
+    color: #2d6eda;
+    border-color: #2d6eda;
+}
+</style>

package/src/components/Step/index.js

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

package/src/components/Steps/Steps.vue

@@ -0,0 +1,19 @@
+
+<script>
+import { Steps } from 'element-ui'
+
+export default {
+  name: 'TpSteps',
+  extends: Steps,
+  props: {
+    newItem: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+</style>

package/src/components/Steps/index.js

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