@tagplus/components 5.3.4 → 5.3.5

package/src/components/Autosuggest/Autosuggest.vue

@@ -1,791 +0,0 @@
-<template>
-  <div
-    v-clickoutside="handleClose"
-    class="el-select tp-autosuggest"
-    data-is-search="true"
-    :class="[selectSize ? 'el-select--' + selectSize : '']"
-    @click.stop="toggleMenu"
-  >
-    <el-tooltip
-      placement="top"
-      :manual="true"
-      :value="tooltipVisible"
-      :content="selectedLabel + ''"
-      :tabindex="-1"
-    >
-      <!-- Div é importante para funcionar o tooltip -->
-      <div />
-    </el-tooltip>
-    <el-input
-      :id="`${_id}-input`"
-      ref="reference"
-      v-model="selectedLabel"
-      type="text"
-      :placeholder="currentPlaceholder"
-      :name="name"
-      :autocomplete="autoComplete || autocomplete"
-      :size="selectSize"
-      :disabled="selectDisabled"
-      :readonly="readonly"
-      :validate-event="false"
-      :class="{ 'is-focus': visible }"
-      :tabindex="(multiple && filterable) ? '-1' : null"
-      popper-append-to-body="teste"
-      @focus="handleFocus"
-      @blur="handleBlur"
-      @keyup.native="debouncedOnInputChange"
-      @keydown.native.down.stop.prevent="navigateOptions('next')"
-      @keydown.native.up.stop.prevent="navigateOptions('prev')"
-      @keydown.native.enter.prevent="selectOption"
-      @keydown.native.esc.stop.prevent="visible = false"
-      @keydown.native.tab="visible = false"
-      @paste.native="debouncedOnInputChange"
-      @mouseenter.native="inputHovering = true"
-      @mouseleave.native="inputHovering = false"
-    >
-      <template v-if="prepend">
-        <template
-          v-if="$slots.prepend || typeof(prepend) == 'string'"
-          slot="prepend"
-        >
-          <slot name="prepend">
-            {{ prepend }}
-          </slot>
-        </template>
-        <template
-          v-else
-          slot="prepend"
-        >
-          <em class="far fa-search" />
-        </template>
-      </template>
-
-      <template
-        v-if="$slots.prefix"
-        slot="prefix"
-      >
-        <slot name="prefix" />
-      </template>
-
-      <template slot="append">
-        <el-row
-          type="flex"
-          :justify="selectedLabel ? 'space-between' : 'end'"
-          align="middle"
-        >
-          <em
-            v-if="selectedLabel && !selectDisabled"
-            :id="`${_id}-btn-clear`"
-            class="fa fa-times-circle icon-close"
-            @click.stop.prevent="clearTags"
-          />
-          <el-row
-            align="middle"
-            type="flex"
-            justify="space-around"
-            class="rightContent"
-          >
-            <el-divider
-              direction="vertical"
-              class="dividerSuggest"
-            />
-
-            <em
-              v-show="!showClose && !selectDisabled"
-              :id="`${_id}-btn-close`"
-              :class="['el-select__caret', 'el-input__icon', 'el-icon-' + iconClass]"
-            />
-          </el-row>
-        </el-row>
-      </template>
-    </el-input>
-    <transition
-      name="el-zoom-in-top"
-      @before-enter="handleMenuEnter"
-      @after-leave="doDestroy"
-    >
-      <el-select-menu
-        v-show="visible && emptyText !== false"
-        :id="`${_id}-select`"
-        ref="popper"
-        :append-to-body="popperAppendToBody"
-      >
-        <el-scrollbar
-          v-show="options.length > 0 && !loading"
-          :id="`${_id}-scrollbar`"
-          ref="scrollbar"
-          tag="ul"
-          wrap-class="tp-select-dropdown__wrap el-select-dropdown__wrap"
-          view-class="tp-select-dropdown__list el-select-dropdown__list"
-          :class="{ 'is-empty': !allowCreate && query && filteredOptionsCount === 0 }"
-        >
-          <el-option
-            v-for="(item, i) in suggestionsList"
-            :id="`${_id}-option-${i}`"
-            :key="i"
-            :label="item[labelKey]"
-            :value="item[valueKey]"
-            :created="item.created"
-            :class="{'created': item.created}"
-          >
-            <template v-if="item.created">
-              <a :id="`${_id}-btn-create`"><em class="far fa-plus" /> {{ newItem }}</a>
-            </template>
-            <slot
-              v-else
-              :item="item"
-            />
-          </el-option>
-        </el-scrollbar>
-        <template v-if="emptyText && (!allowCreate || loading || (allowCreate && options.length === 0 ))">
-          <slot
-            v-if="$slots.empty"
-            name="empty"
-          />
-          <p
-            v-else-if="loading"
-            class="tp-autosuggest-loading"
-          >
-            <tp-skeleton :count="4" />
-          </p>
-          <p
-            v-else
-            class="el-select-dropdown__empty"
-          >
-            {{ emptyText }}
-          </p>
-        </template>
-      </el-select-menu>
-    </transition>
-  </div>
-</template>
-
-<script>
-import debounce from 'throttle-debounce/debounce'
-import { Select } from 'element-ui'
-import { getValueByPath, valueEquals } from 'element-ui/src/utils/util'
-
-/**
- * Cria um select com opções obtidas de forma assíncrona e remota.
- * Basicamente um atalho de configurações
- * Vide documentação ElementUI: https://element.eleme.io/#/en-US/component/select
- */
-export default {
-  name: 'TpAutosuggest',
-
-  extends: Select,
-
-  props: {
-    value: {
-      type: [Boolean, String, Object, Number, Array],
-      required: false,
-      default: ''
-    },
-
-    /**
-     * Substituição do valor padrão em relação ao ElementUi
-     */
-    remote: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    /**
-     * Lista ou Objeto contendo conjunto de itens como opções ou sugestões do componente
-     */
-    suggestions: {
-      type: [Array, Object],
-      required: true
-    },
-    /**
-     * Informa o campo correspondente em cada item referente ao valor sendo selecionado
-     */
-    valueKey: {
-      type: String,
-      default: 'id'
-    },
-    /**
-     * Identificação do campo correspondente em cada item referente ao texto de exibição.
-     * Quando utilizado o slot de itens, este campo passa a não ser utilizado
-     */
-    labelKey: {
-      type: String,
-      default: 'label'
-    },
-    /**
-     * Indica quando o campo pode ser utilizado como filtro.
-     * Sobrescreve valor padrão do atributo no Select do ElementUI
-     */
-    filterable: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    /**
-     * Sobrescreve valor padrão do atributo no Select do ElementUI
-     */
-    reserveKeyword: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    /**
-     * Sobrescreve valor padrão do atributo no Select do ElementUI
-     */
-    defaultFirstOption: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    /**
-     * Sobrescreve valor padrão do atributo no Select do ElementUI
-     */
-    loadOnCreate: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-
-    /**
-     * Quando Boolean: identifica se exibe ou não o ícone de lupa. "False" oculta prepend.
-     * Quando String: Informa o texto a ser inserido no prepend
-     */
-    prepend: {
-      type: [Boolean, String],
-      required: false,
-      default: true
-    },
-
-    /**
-     * Método que realiza a busca dos registros remotos para as opções.
-     *
-     * *IMPORTANTE*: deve considerar o "valueKey" nas consultas
-     * pois o valor selecionado será baseado nas opções remotas carregadas ao criar o componente.
-     */
-    remoteMethod: {
-      type: Function,
-      required: true
-    },
-
-    /**
-     * Informa a mensagem de cadastrar novo item
-     */
-    msgNewItem: {
-      type: String,
-      required: false,
-      default: 'Cadastrar novo item'
-    }
-  },
-
-  data () {
-    return {
-      tooltipVisible: false,
-      modifiedLabel: null
-    }
-  },
-
-  computed: {
-    _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
-     */
-    formatedValue () {
-      let newVal = ''
-      if (typeof this.value === 'boolean') {
-        newVal = ''
-      } else if (Array.isArray(this.value)) {
-        newVal = this.value
-      } else if (this.value && typeof this.value === 'object') {
-        if (!Object.keys(newVal).length) { return {} }
-        if (!this.value[this.valueKey] && this.value[this.valueKey] !== '') {
-          if (process.env.DEBUG === 'true') {
-            console.error(
-              `Autosuggest '${this.$options.name}' option doesn't have a valueKey '${this.valueKey}' key`
-            )
-          }
-        } else {
-          newVal = this.value[this.valueKey]
-        }
-      }
-
-      return newVal
-    },
-    iconClass () {
-      return this.visible ? 'arrow-up is-reverse' : 'arrow-up'
-    },
-    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 () {
-      if (this.loading) return []
-
-      // transformando em Array
-      const list =
-        typeof this.suggestions === 'object'
-          ? Object.values(this.suggestions)
-          : this.suggestions
-
-      if (this.allowCreate) {
-        const createdSuggestion = { created: true }
-
-        createdSuggestion[this.valueKey] = this.query !== '' ? this.query : null
-        createdSuggestion[this.labelKey] = ''
-        list.push(createdSuggestion)
-      }
-
-      return list
-    },
-
-    emptyText () {
-      if (this.loading) {
-        return this.loadingText || this.t('el.select.loading')
-      }
-
-      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
-    }
-  },
-
-  created () {
-    this.debouncedOnInputChange = debounce(this.debounce, e => {
-      // Correção para mobile ativar a busca enquanto digita
-      if (e.isComposing) {
-        // Se está apagando
-        if (e.target.value === '') {
-          this.selectedLabel = this.selectedLabel.slice(0, -1)
-        } else {
-          // Pega valor ignorando composition mode
-          this.selectedLabel = e.target.value
-        }
-      }
-
-      this.onInputChange(e)
-    })
-  },
-
-  beforeMount () {
-    this.doRequest = false
-
-    if (this.loadOnCreate) {
-      this.previousQuery = false
-      // Chama função do element-ui select que faz o remote method
-      this.handleQueryChange('')
-    } else {
-      // Marca para fazer a requisição no primeiro clique
-      this.doRequest = true
-    }
-  },
-
-  mounted () {
-    this.$nextTick(() => {
-      // Componente tooltip -> autosuggest -> input
-      const componenteInputInterno = this.$children[1].$refs.input
-
-      // Mostra o tooltip só quando
-      this.createHandler(componenteInputInterno, 'mouseenter', () => {
-        if (this.selectedLabel) {
-          this.tooltipVisible = true
-        }
-      })
-      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
-     * @args el {Object} Elemento que tem o listener
-     * @args ev {String} Nome do listener (mouseenter, click, etc)
-     * @args func {Function} Função a ser executada
-     */
-    createHandler (el, ev, func) {
-      if (el) {
-        el.addEventListener(
-          ev,
-          () => {
-            func()
-          },
-          false
-        )
-      }
-    },
-
-    onInputChange () {
-      if (this.filterable && this.query !== this.selectedLabel) {
-        this.query = this.selectedLabel
-        this.handleQueryChange(this.query)
-      }
-    },
-
-    emitChange (val) {
-      if (!valueEquals(this.formatedValue, val)) {
-        this.$nextTick(() => {
-          this.$emit('change', val, this.createdSelected)
-        })
-      }
-    },
-
-    // eslint-disable-next-line no-unused-vars
-    clearTags (event) {
-      this.selectedLabel = ''
-      // Faz uma requisição limpa
-      this.query = ''
-      this.doRequest = true
-      this.previousQuery = ''
-      this.handleQueryChange(this.query)
-
-      // Eventos ao limpar
-      this.$emit('input', null)
-
-      if (typeof this.value === 'undefined') {
-        this.$emit('change', null, null)
-      } else {
-        this.$emit('change', null, this.value)
-      }
-    },
-
-    /**
-     * Sobrescreve o getOption do select para mostrar o labelValue em vez do idValue
-     */
-    getOption (val) {
-      let value = ''
-      let initialLabel = false
-      if (typeof this.value === 'boolean') {
-        value = ''
-      } else if (Array.isArray(val)) {
-        value = val
-      } else if (val && typeof val === 'object') {
-        if (!Object.keys(val).length) { return {} }
-        // Se val for Object converte para outro tipo
-        if (!this.value[this.valueKey] && this.value[this.valueKey] !== '') {
-          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]) {
-            initialLabel = this.value[this.labelKey]
-          }
-
-          value = this.value[this.valueKey]
-        }
-      } else {
-        value = val
-      }
-
-      let option
-      const isObject =
-        Object.prototype.toString.call(value).toLowerCase() ===
-        '[object object]'
-      const isNull =
-        Object.prototype.toString.call(value).toLowerCase() === '[object null]'
-      const isUndefined =
-        Object.prototype.toString.call(value).toLowerCase() ===
-        '[object undefined]'
-
-      for (let i = 0; i <= this.cachedOptions.length - 1; i++) {
-        const cachedOption = this.cachedOptions[i]
-        let isEqual = false
-        if (isObject) {
-          isEqual = getValueByPath(cachedOption.value, this.valueKey) === getValueByPath(value, this.valueKey)
-        } else {
-          isEqual = cachedOption.value === value
-          if (initialLabel) {
-            this.modifiedLabel = initialLabel
-          }
-        }
-
-        if (isEqual) {
-          option = cachedOption
-          break
-        }
-      }
-
-      if (option) return option
-
-      const label = !isObject && !isNull && !isUndefined ? value : ''
-      const newOption = {
-        value,
-        currentLabel: this.modifiedLabel || label
-      }
-
-      if (this.multiple) {
-        newOption.hitState = false
-      }
-
-      return newOption
-    },
-
-    checkDefaultFirstOption () {
-      this.$nextTick(() => {
-        this.hoverIndex = -1
-
-        for (let i = 0; i !== this.options.length; ++i) {
-          const option = this.options[i]
-
-          if (this.query) {
-            // highlight first options that passes the filter
-            if (!option.disabled && !option.groupDisabled && option.visible) {
-              this.hoverIndex = i
-              break
-            }
-          } else {
-            // highlight currently selected option
-            if (option.itemSelected) {
-              this.hoverIndex = i
-              break
-            }
-          }
-        }
-      })
-    },
-    /**
-     * Sobrescreve a função de abrir menu do select para fazer a busca quando loadOnCreate = false
-     */
-    toggleMenu () {
-      if (!this.selectDisabled) {
-        // Se mantem visivel quando clica nele aberto
-        if (this.menuVisibleOnFocus) {
-          this.menuVisibleOnFocus = false
-        } else {
-          this.visible = !this.visible
-        }
-
-        if (this.doRequest) {
-          this.handleQueryChange(this.query)
-          this.doRequest = false
-        }
-
-        (this.$refs.input || this.$refs.reference).focus()
-      }
-    },
-
-    handleClose () {
-      this.visible = false
-      // Limpa busca quando fecha
-      this.doRequest = true
-    },
-
-    /**
-     * Sobrescreve função do select
-     */
-    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 }
-
-      if (
-        this.previousQuery === null &&
-        (typeof this.filterMethod === 'function' ||
-          typeof this.remoteMethod === 'function')
-      ) {
-        this.previousQuery = val
-
-        return
-      }
-
-      this.previousQuery = val
-      this.$nextTick(() => {
-        if (_this6.visible) _this6.broadcast('ElSelectDropdown', 'updatePopper')
-      })
-      this.hoverIndex = -1
-
-      if (this.multiple && this.filterable) {
-        this.$nextTick(() => {
-          const length = _this6.$refs.input.value.length * 15 + 20
-
-          _this6.inputLength = _this6.collapseTags
-            ? Math.min(50, length)
-            : length
-          _this6.managePlaceholder()
-          _this6.resetInputHeight()
-        })
-      }
-
-      if (this.remote && typeof this.remoteMethod === 'function') {
-        this.hoverIndex = -1
-        this.remoteMethod(val)
-      } else if (typeof this.filterMethod === 'function') {
-        this.filterMethod(val)
-        this.broadcast('ElOptionGroup', 'queryChange')
-      } else {
-        this.filteredOptionsCount = this.optionsCount
-        this.broadcast('ElOption', 'queryChange', val)
-        this.broadcast('ElOptionGroup', 'queryChange')
-      }
-
-      if (
-        this.defaultFirstOption &&
-        (this.filterable || this.remote) &&
-        this.filteredOptionsCount
-      ) {
-        this.checkDefaultFirstOption()
-      }
-    },
-
-    // Correção para habilitar teclado mobile em iOS
-    fixElSelect () {
-      document
-        .querySelectorAll('.el-select[data-is-search="true"]:hover')
-        .forEach(() => {
-          const elInput = document.querySelector(
-            '.el-select[data-is-search="true"]:hover input[readonly]'
-          )
-
-          if (elInput) {
-            elInput.readOnly = false
-            elInput.blur()
-            elInput.focus()
-          }
-        })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-:deep(){
-  .el-input-group__append {
-    padding: 0px 6px 0px 0px;
-    border: 0;
-    width: 58px;
-    max-width: 58px;
-    .rightContent {
-      width: 40px;
-      max-width: 40px;
-    }
-  }
-}
-
-input.el-input__inner {
-  margin-right: 0px;
-}
-
-.el-input__icon {
-  width: auto;
-}
-
-.icon-close {
-  color: #606266;
-  cursor: pointer;
-}
-
-.el-select .el-input__inner {
-  padding-right: 15px;
-}
-
-.dividerSuggest {
-  height: 33.59px;
-  margin: 0px;
-}
-.tp-autosuggest.el-select {
-  > .el-input {
-    display: inline-table;
-  }
-  .el-input__suffix {
-    cursor: pointer;
-  }
-  .el-button.is-circle {
-    padding: 3px;
-    &:hover {
-      background-color: #c0c4cc25;
-      border: 1px solid #dcdfe6;
-    }
-  }
-
-  .el-icon-close {
-    color: #c0c4cc;
-  }
-}
-
-.padding-x {
-  padding-right: 2px;
-}
-
-.tp-autosuggest-loading {
-  text-align: center;
-  font-size: 1.5em;
-  padding: 10px;
-  margin: 0;
-}
-
-.tp-select-dropdown__list.el-select-dropdown__list {
-  li.el-select-dropdown__item {
-    line-height: 1.5em;
-    height: auto;
-    padding: $--popover-padding;
-    position: relative;
-    transition: 100ms all linear;
-
-    &.hover {
-      padding-left: 20px;
-
-      &::before {
-        position: absolute;
-        display: inline-block;
-        width: 4px;
-        top: 5px;
-        bottom: 5px;
-        left: 5px;
-        background: $--color-primary;
-        border-radius: 2px;
-      }
-    }
-
-    &.selected {
-      color: $--color-text-regular;
-    }
-    &.created a {
-      color: $--color-primary;
-      font-weight: normal;
-      border-bottom: 1px solid $--color-primary;
-      line-height: 1.5em;
-      display: inline-block;
-    }
-
-    small {
-      font-size: $--font-size-base;
-      color: mix($--color-white, $--color-text-secondary, 40%);
-    }
-  }
-}
-</style>