@tagplus/components 0.2.97 → 0.2.101

package/package.json

@@ -7,7 +7,7 @@
       "email": "bruno@tagplus.com.br"
     }
   ],
-  "version": "0.2.97",
+  "version": "0.2.101",
   "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" /> {{ query ? `"${query}"` : msgNewItem }}</a>
+              <a :id="`${_id}-btn-create`"><i class="far fa-plus" /> {{ newItem }}</a>
             </template>
             <slot
               v-else
@@ -285,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
@@ -380,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
@@ -596,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/Multisuggest/Multisuggest.vue

@@ -611,6 +611,7 @@ export default {
     },
 
     handleClose() {
+      this.visible && this.$emit('closeSelect')
       this.visible = false
       // Limpa busca quando fecha
       this.doRequest = true

package/src/components/AutosuggestTest/AutosuggestTest.vue

@@ -1,45 +0,0 @@
-<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

@@ -1,291 +0,0 @@
-/**
- * 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)
-    }
-  }
-}
-}