@tagplus/components 0.2.95 → 0.2.99

package/package.json

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

package/src/components/Autosuggest/Autosuggest.vue

@@ -2,6 +2,7 @@
   <div
     v-clickoutside="handleClose"
     class="el-select tp-autosuggest"
+    data-is-search="true"
     :class="[selectSize ? 'el-select--' + selectSize : '']"
     @click.stop="toggleMenu"
   >
@@ -127,7 +128,7 @@
             :class="{'created': item.created}"
           >
             <template v-if="item.created">
-              <a :id="`${_id}-btn-create`"><i class="far fa-plus" /> Cadastrar {{ query ? `"${query}"` : "novo item" }}</a>
+              <a :id="`${_id}-btn-create`"><i class="far fa-plus" /> {{ newItem }}</a>
             </template>
             <slot
               v-else
@@ -263,6 +264,15 @@ export default {
     remoteMethod: {
       type: Function,
       required: true
+    },
+
+    /**
+     * Informa a mensagem de cadastrar novo item
+     */
+    msgNewItem: {
+      type: String,
+      required: false,
+      default: 'Cadastrar novo item'
     }
   },
 
@@ -276,6 +286,9 @@ 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}`)
+    },
 
     /**
      * Trata o caso que o autosuggest recebe um objeto com o valueKey e labelKey
@@ -371,9 +384,18 @@ export default {
       this.createHandler(componenteInputInterno, 'mouseleave', () => {
         this.tooltipVisible = false
       })
+      document.addEventListener('focusin', this.fixElSelect)
+      document.addEventListener('click', this.fixElSelect)
+      document.addEventListener('touchstart', this.fixElSelect)
     })
   },
 
+  beforeDestroy() {
+    document.removeEventListener('focusin', this.fixElSelect, false)
+    document.removeEventListener('click', this.fixElSelect, false)
+    document.removeEventListener('touchstart', this.fixElSelect, false)
+  },
+
   methods: {
     /**
      * Adiciona um evento no elemento dinamicamente
@@ -587,8 +609,22 @@ export default {
       ) {
         this.checkDefaultFirstOption()
       }
+    },
+
+    // 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()
+        }
+      })
     }
   }
+
+
 }
 </script>
 

package/src/components/AutosuggestTest/AutosuggestTest.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <div>Autosuggest 1</div>
+    <tp-autosuggest
+      :id="_id"
+      :value="value"
+      :placeholder="$t($options.placeholder)"
+      :label-key="$options.labelKey"
+      :remote-method="autosuggestMixin_getList"
+      :suggestions="list"
+      :loading="loading"
+      :load-on-create="isLoadOnCreate"
+      :disabled="_disabled"
+      :allow-create="false"
+      @input="autosuggestMixin_input"
+      @handleOptionClick="autosuggestMixin_handleCreate"
+      @change="autosuggestMixin_handleChange"
+    />
+  </div>
+</template>
+
+<script>
+import AutosuggestsMixin from './autosuggest'
+
+export default {
+  valueKey: 'id',
+  labelKey: 'name',
+  placeholder: 'common.placeholder',
+
+  mixins: [AutosuggestsMixin],
+
+  data() {
+    return {
+      params: {
+        uri: 'https://jsonplaceholder.typicode.com/users',
+        suggestions: [],
+        loading: true
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

package/src/components/AutosuggestTest/autosuggest.js

@@ -0,0 +1,291 @@
+/**
+ * Mixin contendo metodos para autosuggests
+ */
+export default {
+  props: {
+    /**
+     * @vuese
+     * id do css para teste unitário
+     */
+    id: {
+      type: String
+    },
+
+    value: {
+      type: [Number, String, Object, Boolean, Array],
+      default: ''
+    },
+
+    // Desativa o loader global ao carregar lista
+    disableLoader: {
+      type: Boolean,
+      default: false
+    },
+
+    // Indica se primeiro item da lista deve ser retornado por padrão
+    noDefault: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Se a lista vai ser carregada no create ou o labelKey não venha por padrão na requisição loadOnCreate = true,
+     * caso deva ser carregada quando o usuário clica deixar vazio ou false.
+     */
+    loadOnCreate: {
+      type: Boolean,
+      default: null
+    },
+
+    // Indicia se o campo deve ser desabilitado
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+
+    // Se o valor desse autosuggest for obrigatório se o value for vazio o after get vai selecionar a primeira opção
+    isRequired: {
+      type: Boolean,
+      default: false
+    },
+
+    allowCreate: {
+      type: Boolean,
+      default: true
+    },
+    valueKey: {
+      type: String,
+      default: 'id'
+    }
+  },
+
+  data () {
+    return {
+      header: {
+        'X-Skip-Total-Pages': true
+      },
+      params: {}
+    },
+      doEmptyRequest: false,
+        list: [],
+          loading: true,
+            isLoadOnCreate: true,
+              modal: false,
+                autosuggest: false, // endpoint /autosuggest/*
+                  customEndpoint: false // buscar em qualquer endpoint
+  }
+},
+
+computed: {
+  _id() {
+    return this.id || this.$options.name
+  },
+
+  /** desabilita o componente quando recebe disable true ou não tem permissão no form de incluir ou alterar */
+  _disabled() {
+    if (this.disabled) {
+      return true
+    } else if (this.disableForm) {
+      return true
+    }
+    return false
+  },
+
+  /** @vuese
+   * Action para buscar em stores customizadas/dinâmicas, por padrão pega do $options.listAction
+   */
+  listAction() {
+    return this.customAction ? this.customAction : this.$options.listAction
+  },
+
+  /** @vuese
+   * Retorna a URL a ser usada para buscar a lista caso não esteja definida no $options
+   * Passam aqui as urls customizadas, do /autosuggests, /entidade/categorias etc
+   */
+  customUrl() {
+    if (this.customEndpoint) {
+      return this.customEndpoint
+    } else if (this.autosuggest) {
+      return `/autosuggests/${this.$options.autosuggest}`
+    } else {
+      return false
+    }
+  },
+
+  _valueKey() {
+    return this.$options.valueKey || 'id'
+  },
+
+  _labelKey() {
+    return this.$options.labelKey || 'descricao'
+  }
+},
+
+/**
+ * Ao montar componente, inicia o loading
+ */
+mounted() {
+  if (!this.disableLoader && this.isLoadOnCreate) {
+    this.startLoading(this.$options.name)
+  }
+},
+
+created() {
+  if (this.$parent.$options.name.substring(0, 6) === 'Filtro') {
+    this.isLoadOnCreate = false
+  } else if (this.loadOnCreate !== null) { // Se recebeu loadOnCreate via prop leva precedência
+    // Se for campo obrigatório e não vier o value inicial força a busca na api
+    if (this.isRequired && typeof this.value === 'undefined') {
+      this.isLoadOnCreate = true
+    } else {
+      this.isLoadOnCreate = this.loadOnCreate
+    }
+  } else if (this.$route && !isNaN(this.$route.params.id)) {
+    // Se está num form com ID só carrega lista quando clica
+    this.isLoadOnCreate = false
+  }
+
+  // Caso tenha value no created a primeira busca quando clica é vazia
+  this.doEmptyRequest = (typeof this.value !== 'undefined')
+},
+
+methods: {
+  /**
+   * HOOK executado quando getList é chamado
+   */
+  autosuggestMixin_beforeGet() { },
+
+  /**
+   * HOOK executado quando getList é chamado
+   */
+  autosuggestMixin_afterGet() { },
+
+  /**
+   * HOOK executado quando handleClose é chamado
+   */
+  autosuggestMixin_beforeHandleClose() { },
+
+    /**
+     * Realiza chamada da action no endpoint
+     * @param {*} busca valor recebido no autosuggest
+     */
+    async autosuggestMixin_getList(busca) {
+    busca ||= ''
+
+    if (!Array.isArray(busca) && (busca !== '' || this.config.params.q !== busca)) {
+      this.config.params.q = busca
+    }
+
+    // Tratamento caso clique no primeiro autosuggest daquele tipo com loadOnCreate false e tenha um valor padrão
+    if (this.doEmptyRequest) {
+      this.config.params.q = ''
+      this.doEmptyRequest = false
+    }
+
+    // Hook executado antes de recuperar a lista
+    this.autosuggestMixin_beforeGet()
+
+    this.loading = true
+
+    // Se buscar em /autosuggest ou url dinâmica/customizada pega a url aqui
+    this.config.customUrl = this.customUrl
+
+    try {
+      await this.axios
+        .get(`${this.params.uri}?q=${busca}`)
+        .then(res => {
+          this.list = res.data
+        })
+        // eslint-disable-next-line no-unused-vars
+        .catch(err => {
+          this.list = []
+        }).finally(() => {
+          this.loading = false
+        })
+    } catch (err) {
+      // this.$TpError(err)
+    } finally {
+      // this.finishLoading(this.$options.name)
+    }
+  },
+
+  /**
+     * Metodo para lidar com a criação de um novo registro
+     * Exibe o modal por padrão
+     * @param {*} evt Evento de criação
+     */
+  autosuggestMixin_handleCreate(evt) {
+    if (evt.created) {
+      this.modal = true
+    }
+  },
+
+    /**
+       * Método para lidar com o fechamento do modal
+       * Por padrão recarrega a lista e recupera o valor criado no modal, caso haja
+       * @param {*} val Valor recebido do modal
+       */
+    async autosuggestMixin_handleClose(val) {
+    // Fecha o modal primeiro para diminuir tempo de transição
+    this.modal = false
+
+    if (val.id !== 0) {
+      const id = val.id?.id !== undefined ? val.id.id : val.id
+
+      await this.autosuggestMixin_getList('')
+
+      this.$emit('input', val.id)
+
+      const item = this.list.filter((value) => {
+        return id === value.id
+      })
+
+      this.$emit('change', item[0])
+    }
+  },
+
+  /**
+     * Evento para tratamento do valor
+     * Devolve o valor recebido para o v-model no componente pai
+     * @param {*} evt
+     */
+  autosuggestMixin_input(evt) {
+    this.$emit('input', evt)
+    this.autosuggestMixin_inputFullItem(evt)
+  },
+
+  /**
+   * Evento Input com os dados completos do item selecionado
+   * @param {*} evt
+   */
+  autosuggestMixin_inputFullItem(evt) {
+    let res = []
+
+    if (Array.isArray(evt)) {
+      evt.map((idValue) => {
+        this.list.map((item2) => {
+          if (idValue === item2[this._valueKey]) {
+            res.push(item2)
+          }
+          return item2
+        })
+      })
+    } else {
+      res = evt
+    }
+    this.$emit('inputFullItem', res)
+  },
+
+  autosuggestMixin_handleChange(val) {
+    if (val !== null && val !== undefined) {
+      const item = this.list.filter((value) => {
+        return val === value.id
+      })
+
+      this.$emit('change', item[0])
+    } else {
+      this.$emit('change', val)
+    }
+  }
+}
+}

package/src/components/Multisuggest/Multisuggest.vue

@@ -459,8 +459,10 @@ export default {
 
     this.value.forEach((item,key) => {
       if (item[this.valueKey]) {
-        this.selectedLabelsArray.push(item)
         this.value[key] = item[this.valueKey]
+        if(item[this.labelKey]) {
+          this.selectedLabelsArray.push(item)
+        }
       }
     })
 
@@ -523,7 +525,7 @@ export default {
       else if (val && typeof val === 'object') {
         // Se val for Object converte para outro tipo 
         if (!val[this.valueKey]) {
-          throw new TypeError('Autosuggest this.value doesn\'t have a valueKey \'' + this.valueKey + '\' key')
+          throw new TypeError('Multisuggest option doesn\'t have a valueKey \'' + this.valueKey + '\' key')
         } else {
           // Se mandou a label no objeto value
           if (val[this.labelKey]) {