@tagplus/components 0.2.107 → 0.2.110

package/package.json

@@ -7,7 +7,7 @@
       "email": "bruno@tagplus.com.br"
     }
   ],
-  "version": "0.2.107",
+  "version": "0.2.110",
   "main": "./dist/tp.common.js",
   "directories": {
     "lib": "src/lib"
@@ -29,7 +29,7 @@
     "doc": "yarn docs",
     "docs": "nodemon --exec \"vuese gen && vuese serve\" --watch ./src -e js,vue,scss",
     "docs:gen": "vuese gen",
-    "lint": "vue-cli-service lint",
+    "lint": "eslint --cache --ext .js,.vue --ignore-path .gitignore .",
     "pub": "yarn build && yarn publish --access public",
     "pub:beta": "yarn build && yarn publish --tag beta",
     "serve": "vue-cli-service serve --open ./examples/main.js",
@@ -41,30 +41,32 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "axios": "^0.19.0",
-    "core-js": "^3.4.8",
+    "axios": "^0.27.0",
+    "core-js": "^3.21.1",
     "element-theme-chalk": "^2.13",
     "element-ui": "^2.13",
-    "js-cookie": "^2.2.1",
-    "vue": "^2.6.10",
-    "vue-axios": "^2.1.4",
+    "js-cookie": "^3.0.1",
+    "vue": "^2.6.14",
+    "vue-axios": "^2.1.5",
     "vue-i18n": "^8.14.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.1.1",
-    "@vue/cli-plugin-eslint": "^4.1.1",
-    "@vue/cli-plugin-unit-jest": "^4.1.1",
-    "@vue/cli-service": "^4.1.1",
-    "@vue/eslint-config-prettier": "^6.0.0",
+    "@babel/eslint-parser": "^7.17.0",
+    "@nuxtjs/eslint-config": "^8.0.0",
+    "@nuxtjs/eslint-module": "^3.0.2",
+    "@vue/cli-plugin-babel": "^5.0.3",
+    "@vue/cli-plugin-unit-jest": "^5.0.3",
+    "@vue/cli-service": "^5.0.3",
     "@vue/test-utils": "1.0.0-beta.30",
     "@vuese/cli": "^2.10.0",
     "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.0.1",
     "babel-jest": "^24.9.0",
     "babel-plugin-module-resolver": "^3.2.0",
-    "eslint": "^6.2.2",
-    "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-vue": "^6.0.1",
+    "eslint": "^8.9.0",
+    "eslint-config-prettier": "^8.4.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-plugin-nuxt": ">=0.4.2",
+    "eslint-plugin-prettier": "^4.0.0",
     "node-sass": "^4.9.0",
     "nodemon": "^2.0.1",
     "prettier": "^1.18.2",

package/src/components/Autosuggest/Autosuggest.vue

@@ -286,8 +286,10 @@ export default {
     _id() {
       return this.id || this.$options.name
     },
-    newItem(){
-      return this.query ? this.$tpI18n.t('autosuggests.cadastrar', {nameItem: this.query}) : this.$tpI18n.t(`autosuggests.newItem.${this.$parent.$options.name}`)
+    newItem() {
+      return this.query
+        ? this.$tpI18n.t('autosuggests.cadastrar', { nameItem: this.query })
+        : this.$tpI18n.t(`autosuggests.newItem.${this.$parent.$options.name}`)
     },
 
     /**
@@ -302,7 +304,9 @@ export default {
       } else if (this.value && typeof this.value === 'object') {
         if (!this.value[this.valueKey]) {
           if (process.env.DEBUG === 'true') {
-            console.error(`Autosuggest '${this.$options.name}' option doesn't have a valueKey '${this.valueKey}' key`)
+            console.error(
+              `Autosuggest '${this.$options.name}' option doesn't have a valueKey '${this.valueKey}' key`
+            )
           }
         } else {
           newVal = this.value[this.valueKey]
@@ -335,6 +339,22 @@ export default {
         list.push(createdSuggestion)
       }
       return list
+    },
+
+    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')}
+        if (this.filterable && this.query && this.options.length > 0 && this.filteredOptionsCount === 0) {
+          return this.noMatchText || this.t('el.select.noMatch')
+        }
+        if (this.options.length === 0) {
+          return this.noDataText || this.$tpI18n.t('autosuggests.sem_dados')
+        }
+      }
+      return null
     }
   },
 
@@ -354,7 +374,7 @@ export default {
     })
   },
 
-  beforeMount () {
+  beforeMount() {
     this.doRequest = false
 
     if (this.loadOnCreate) {
@@ -458,7 +478,9 @@ export default {
       } else if (val && typeof val === 'object') {
         // Se val for Object converte para outro tipo
         if (!this.value[this.valueKey]) {
-          console.error(`Autosuggest '${this.$options.name}' option doesn't have a valueKey '${this.valueKey}' key`)
+          console.error(
+            `Autosuggest '${this.$options.name}' option doesn't have a valueKey '${this.valueKey}' key`
+          )
         } else {
           // Se mandou a label no objeto value
           if (this.value[this.labelKey]) {
@@ -604,18 +626,20 @@ export default {
 
     // Correção para habilitar teclado mobile em iOS
     fixElSelect() {
-      document.querySelectorAll('.el-select[data-is-search="true"]:hover').forEach(() => {
-        let elInput = document.querySelector('.el-select[data-is-search="true"]:hover input[readonly]')
-        if (elInput) {
-          elInput.readOnly = false
-          elInput.blur()
-          elInput.focus()
-        }
-      })
+      document
+        .querySelectorAll('.el-select[data-is-search="true"]:hover')
+        .forEach(() => {
+          let elInput = document.querySelector(
+            '.el-select[data-is-search="true"]:hover input[readonly]'
+          )
+          if (elInput) {
+            elInput.readOnly = false
+            elInput.blur()
+            elInput.focus()
+          }
+        })
     }
   }
-
-
 }
 </script>
 

package/src/components/Money/Money.vue

@@ -18,7 +18,7 @@
 
     <template
       v-for="(_, slot) of $scopedSlots"
-      v-slot:[slot]="scope"
+      #[slot]="scope"
     >
       <slot
         :name="slot"

package/src/components/Multisuggest/Multisuggest.vue

@@ -402,6 +402,22 @@ export default {
         list.push(createdSuggestion)
       }
       return list
+    },
+
+    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')}
+        if (this.filterable && this.query && this.options.length > 0 && this.filteredOptionsCount === 0) {
+          return this.noMatchText || this.t('el.select.noMatch')
+        }
+        if (this.options.length === 0) {
+          return this.noDataText || this.$tpI18n.t('autosuggests.sem_dados')
+        }
+      }
+      return null
     }
   },
 

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

package/src/components/index.js

@@ -8,6 +8,8 @@ import Loader from './Loader'
 import Skeleton from './Skeleton'
 import Tip from './Tip'
 import Multisuggest from './Multisuggest'
+import Step from './Step'
+import Steps from './Steps'
 import InputNumber from './InputNumber'
 
 export {
@@ -21,5 +23,7 @@ export {
   Skeleton,
   Tip,
   Multisuggest,
+  Step,
+  Steps,
   InputNumber
 }

package/src/utils/filters.js

@@ -21,10 +21,7 @@ import { t } from 'tp-ui/locale'
  * @param {Number} val 
  */
 export const toCurrency = (val) => {
-  return val.toLocaleString(t('locale.prefix'), {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2,
-  })
+  return (parseInt(val * 100) / 100).toLocaleString(t('locale.prefix'))
 }
 
 /**