@tagplus/components 0.2.108 → 1.0.0

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@tagplus/components",
   "description": "Componentes customizados TagPlus Baseados no ElementUI",
+  "target": "web",
   "maintainers": [
     {
       "name": "Bruno Barbosa",
       "email": "bruno@tagplus.com.br"
     }
   ],
-  "version": "0.2.108",
+  "version": "1.0.0",
   "main": "./dist/tp.common.js",
   "directories": {
     "lib": "src/lib"
@@ -29,7 +30,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",
@@ -44,33 +45,38 @@
     "axios": "^0.27.0",
     "core-js": "^3.21.1",
     "element-theme-chalk": "^2.13",
-    "element-ui": "^2.13",
+    "element-ui": "^2.15.9",
     "js-cookie": "^3.0.1",
     "vue": "^2.6.14",
     "vue-axios": "^2.1.5",
     "vue-i18n": "^8.14.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.18.5",
+    "@babel/eslint-parser": "^7.17.0",
     "@vue/cli-plugin-babel": "^5.0.3",
-    "@vue/cli-plugin-eslint": "^5.0.3",
     "@vue/cli-plugin-unit-jest": "^5.0.3",
     "@vue/cli-service": "^5.0.3",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/test-utils": "1.0.0-beta.30",
+    "@vue/test-utils": "^1.0.0-beta.31",
     "@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",
-    "node-sass": "^4.9.0",
-    "nodemon": "^2.0.1",
-    "prettier": "^1.18.2",
+    "babel-plugin-require-context-hook": "^1.0.0",
+    "eslint": "^8.9.0",
+    "eslint-config-prettier": "^8.4.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-import-resolver-babel-module": "^5.3.1",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-n": "^15.0.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-vue": "^9.1.1",
+    "node-sass": "^4.14.1",
+    "nodemon": "^2.0.2",
+    "prettier": "^2.5.1",
     "sass-loader": "^7.1.0",
+    "vue": "^2.6.14",
     "vue-template-compiler": "^2.6.10",
-    "webpack": "^5.61.0",
-    "webpack-bundle-analyzer": "^3.5.0"
+    "webpack": "4.46.0"
   }
 }

package/src/components/Autosuggest/Autosuggest.vue

@@ -276,17 +276,17 @@ export default {
     }
   },
 
-  data() {
+  data () {
     return {
       tooltipVisible: false
     }
   },
 
   computed: {
-    _id() {
+    _id () {
       return this.id || this.$options.name
     },
-    newItem() {
+    newItem () {
       return this.query
         ? this.$tpI18n.t('autosuggests.cadastrar', { nameItem: this.query })
         : this.$tpI18n.t(`autosuggests.newItem.${this.$parent.$options.name}`)
@@ -295,7 +295,7 @@ export default {
     /**
      * Trata o caso que o autosuggest recebe um objeto com o valueKey e labelKey
      */
-    formatedValue() {
+    formatedValue () {
       let newVal = ''
       if (typeof this.value === 'boolean') {
         newVal = ''
@@ -315,25 +315,25 @@ export default {
 
       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)
@@ -341,12 +341,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')
         }
@@ -358,7 +359,7 @@ export default {
     }
   },
 
-  created() {
+  created () {
     this.debouncedOnInputChange = debounce(this.debounce, e => {
       // Correção para mobile ativar a busca enquanto digita
       if (e.isComposing) {
@@ -374,7 +375,7 @@ export default {
     })
   },
 
-  beforeMount() {
+  beforeMount () {
     this.doRequest = false
 
     if (this.loadOnCreate) {
@@ -387,10 +388,10 @@ export default {
     }
   },
 
-  mounted() {
+  mounted () {
     this.$nextTick(() => {
       // Componente tooltip -> autosuggest -> input
-      var componenteInputInterno = this.$children[1].$refs['input']
+      const componenteInputInterno = this.$children[1].$refs.input
       // Mostra o tooltip só quando
       this.createHandler(componenteInputInterno, 'mouseenter', () => {
         if (this.selectedLabel) {
@@ -406,7 +407,7 @@ export default {
     })
   },
 
-  beforeDestroy() {
+  beforeDestroy () {
     document.removeEventListener('focusin', this.fixElSelect, false)
     document.removeEventListener('click', this.fixElSelect, false)
     document.removeEventListener('touchstart', this.fixElSelect, false)
@@ -419,11 +420,11 @@ 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() {
+          function () {
             func()
           },
           false
@@ -431,14 +432,14 @@ export default {
       }
     },
 
-    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)
@@ -447,7 +448,7 @@ export default {
     },
 
     // eslint-disable-next-line no-unused-vars
-    clearTags(event) {
+    clearTags (event) {
       this.selectedLabel = ''
       // Faz uma requisição limpa
       this.query = ''
@@ -467,7 +468,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
 
@@ -514,16 +515,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
 
@@ -548,7 +549,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) {
@@ -564,7 +565,7 @@ export default {
       }
     },
 
-    handleClose() {
+    handleClose () {
       this.visible = false
       // Limpa busca quando fecha
       this.doRequest = true
@@ -573,14 +574,13 @@ export default {
     /**
      * Sobrescreve função do select
      */
-    handleQueryChange(val) {
-      var _this6 = this
+    handleQueryChange (val) {
+      const _this6 = this
       // Correção aqui para forçar primeeira request com createOnLoad = false
       if (
         (!this.doRequest && this.previousQuery === val) ||
         this.isOnComposition
-      )
-        return
+      ) { return }
       if (
         this.previousQuery === null &&
         (typeof this.filterMethod === 'function' ||
@@ -590,13 +590,13 @@ export default {
         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() {
-          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
@@ -625,11 +625,11 @@ export default {
     },
 
     // Correção para habilitar teclado mobile em iOS
-    fixElSelect() {
+    fixElSelect () {
       document
         .querySelectorAll('.el-select[data-is-search="true"]:hover')
         .forEach(() => {
-          let elInput = document.querySelector(
+          const elInput = document.querySelector(
             '.el-select[data-is-search="true"]:hover input[readonly]'
           )
           if (elInput) {

package/src/components/Inline/Inline.vue

@@ -73,39 +73,38 @@ export default {
     }
   },
 
-  data() {
+  data () {
     return {
-      hideInput: true,
+      hideInput: true
     }
   },
 
   computed: {
-    _id(){
+    _id () {
       return this.id || this.$options.name
     }
   },
 
-  mounted() {
+  mounted () {
     this.hideInput = this.inputHidden
   },
 
   methods: {
-    toggleInput() {
+    toggleInput () {
       const status = !this.hideInput
 
       if (this.readonly) {
         this.hideInput = true
-      }
-      else if (!this.readonly) {
+      } else if (!this.readonly) {
         this.hideInput = status
         if (!this.hideInput) {
-          this.$nextTick(function() {
+          this.$nextTick(function () {
             this.$refs.inlineInput.focus()
           })
         }
       }
     },
-    input(event){
+    input (event) {
       this.$emit('input', event)
     }
   }
@@ -137,4 +136,4 @@ export default {
     }
   }
 }
-</style>
+</style>

package/src/components/Inline/index.js

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

package/src/components/InputNumber/InputNumber.vue

@@ -14,7 +14,7 @@ export default {
   },
 
   computed: {
-    displayValue() {
+    displayValue () {
       if (this.userInput !== null) {
         return this.userInput
       }
@@ -44,12 +44,12 @@ export default {
   },
 
   methods: {
-    handleInput(value) {
+    handleInput (value) {
       this.userInput = value
       this.$emit('change', Number(value.replace(',', '.')))
     },
 
-    handleInputChange(value) {
+    handleInputChange (value) {
       let newVal
       if (value === '') {
         newVal = 0

package/src/components/InputNumber/index.js

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

package/src/components/Loader/Loader.vue

@@ -2,7 +2,7 @@
   <div class="tp-loader">
     <div class="wrapper">
       <svg xmlns="http://www.w3.org/2000/svg" width="150px" height="150px">
-        <mask id="mascara">    
+        <mask id="mascara">
           <rect x="0" y="0" width="100%" height="100%" fill="white" />
           <circle id="circulo-interno" class="circulo" cx="45" cy="50" r="40" fill="black" />
         </mask>
@@ -35,7 +35,7 @@
 </template>
 
 <script>
-/* 
+/*
     Cria componente de loader com overlayer em toda a página
     `<tp-loader />`
   */
@@ -65,7 +65,7 @@ export default {
         'fad fa-chart-pie-alt'
       ])
     }
-  },
+  }
 }
 </script>
 
@@ -166,7 +166,7 @@ export default {
         }
       }
     }
-    
+
     #bola {
       .residuo {
         animation-name: residuo;
@@ -179,7 +179,7 @@ export default {
         &.top {
           transform-origin: #{$oCenter} #{$oTop};
 
-          &.right { 
+          &.right {
             transform-origin: 45% 5%;
             transform: translate(#{$oTrans}, -#{$oTrans}) scale(0.1);
           }
@@ -224,4 +224,4 @@ export default {
 
   }
 }
-</style>
+</style>

package/src/components/Loader/index.js

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

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"
@@ -46,27 +46,27 @@ export default {
 
     // remove o simbolo em prepend
     removePrepend: {
-      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
     },
-    
+
     prepend () {
       return this.t('tp.money.currency')
     }

package/src/components/Money/index.js

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