@tagplus/components 4.7.12 → 5.1.0

package/src/components/Autosuggest/Autosuggest.vue

@@ -1,789 +1,362 @@
 <template>
   <div
-    v-clickoutside="handleClose"
-    class="el-select tp-autosuggest"
-    data-is-search="true"
-    :class="[selectSize ? 'el-select--' + selectSize : '']"
+    ref="selectRef"
+    v-click-outside:[popperRef]="handleClickOutside"
+    :class="['tp-autosuggest', nsSelect.b(), nsSelect.m(selectSize)]"
+    @mouseenter="states.inputHovering = true"
+    @mouseleave="states.inputHovering = false"
     @click.stop="toggleMenu"
   >
     <el-tooltip
-      placement="top"
-      :manual="true"
-      :value="tooltipVisible"
-      :content="selectedLabel + ''"
-      :tabindex="-1"
+      ref="tooltipRef"
+      :visible="dropdownMenuVisible"
+      :placement="placement"
+      :teleported="teleported"
+      :popper-options="popperOptions"
+      :popper-class="['el-select__popper', popperClass]"
+      :fallback-placements="['bottom-start', 'top-start', 'right', 'left']"
+      :effect="effect"
+      pure
+      trigger="click"
+      :transition="`${nsSelect.namespace.value}-zoom-in-top`"
+      :stop-popper-mouse-event="false"
+      :gpu-acceleration="false"
+      :persistent="persistent"
+      @before-show="handleMenuEnter"
+      @hide="states.isBeforeHide = false"
     >
-      <!-- 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"
+      <template #default>
+        <div ref="wrapperRef"
+             :class="[
+               nsSelect.is('focused', isFocused),
+               nsSelect.is('hovering', states.inputHovering),
+               nsSelect.is('disabled', selectDisabled),
+             ]"
         >
-          <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"
+          <div
+            ref="selectionRef"
+            class="el-select__selection"
           >
-            <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>
+            <div :class="['el-select__input-wrapper']" >
+              <div
+                v-if="!selectDisabled"
+                class="el-input el-input-group el-input-group--append el-input-group--prepend el-select__input">
+                <div class="el-input-group__prepend">
+                  <div class="tp-autosuggest-input-prepend-icon">
+                    <em class="far fa-search" />
+                  </div>
+                  <el-divider
+                    direction="vertical"
+                    class="tp-autosuggest-vertical-divider"
+                  />
+                </div>
+                <div class="el-input__wrapper">
+                  <slot v-if="multiple" name="tag">
+                    <div
+                      v-for="item in showTagList"
+                      :key="getValueKey(item)"
+                      :class="nsSelect.e('selected-item')"
+                    >
+                      <el-tag
+                        :closable="!selectDisabled && !item.isDisabled"
+                        :size="collapseTagSize"
+                        :type="tagType"
+                        disable-transitions
+                        :style="tagStyle"
+                        @close="deleteTag($event, item)"
+                      >
+                        <span :class="nsSelect.e('tags-text')">
+                          {{ item.currentLabel }}
+                        </span>
+                      </el-tag>
+                    </div>
+
+                    <el-tooltip
+                      v-if="collapseTags && states.selected.length > maxCollapseTags"
+                      ref="tagTooltipRef"
+                      :disabled="dropdownMenuVisible || !collapseTagsTooltip"
+                      :fallback-placements="['bottom', 'top', 'right', 'left']"
+                      :effect="effect"
+                      placement="bottom"
+                      :teleported="teleported"
+                    >
+                      <template #default>
+                        <div
+                          ref="collapseItemRef"
+                          :class="nsSelect.e('selected-item')"
+                        >
+                          <el-tag
+                            :closable="false"
+                            :size="collapseTagSize"
+                            :type="tagType"
+                            disable-transitions
+                            :style="collapseTagStyle"
+                          >
+                            <span :class="nsSelect.e('tags-text')">
+                              + {{ states.selected.length - maxCollapseTags }}
+                            </span>
+                          </el-tag>
+                        </div>
+                      </template>
+                      <template #content>
+                        <div ref="tagMenuRef" :class="nsSelect.e('selection')">
+                          <div
+                            v-for="item in collapseTagList"
+                            :key="getValueKey(item)"
+                            :class="nsSelect.e('selected-item')"
+                          >
+                            <el-tag
+                              class="in-tooltip"
+                              :closable="!selectDisabled && !item.isDisabled"
+                              :size="collapseTagSize"
+                              :type="tagType"
+                              disable-transitions
+                              @close="deleteTag($event, item)"
+                            >
+                              <span :class="nsSelect.e('tags-text')">
+                                {{ item.currentLabel }}
+                              </span>
+                            </el-tag>
+                          </div>
+                        </div>
+                      </template>
+                    </el-tooltip>
+                  </slot>
+                  <input
+                    :id="`${myId}-input`"
+                    ref="inputRef"
+                    v-model="states.inputValue"
+                    type="text"
+                    class="el-select__input el-input__inner"
+                    :class="[nsSelect.is(selectSize)]"
+                    autocomplete="off"
+                    :size="selectSize"
+                    :style="inputStyle"
+                    role="combobox"
+                    spellcheck="false"
+                    :aria-activedescendant="hoverOption?.id || ''"
+                    :aria-controls="contentId"
+                    :aria-expanded="dropdownMenuVisible"
+                    :aria-label="ariaLabel"
+                    aria-autocomplete="none"
+                    aria-haspopup="listbox"
+                    :name="name"
+                    @focus="handleFocus"
+                    @blur="handleBlur"
+                    @keydown.down.stop.prevent="navigateOptions('next')"
+                    @keydown.up.stop.prevent="navigateOptions('prev')"
+                    @keydown.esc.stop.prevent="handleEsc"
+                    @keydown.enter.stop.prevent="selectOption"
+                    @keydown.delete.stop="deletePrevTag"
+                    @compositionstart="handleCompositionStart"
+                    @compositionupdate="handleCompositionUpdate"
+                    @compositionend="handleCompositionEnd"
+                    @input="onInput"
+                    @click.stop="toggleMenu"
+                  />
+
+                  <div
+                    v-if="shouldShowPlaceholder"
+                    :class="[
+                      nsSelect.e('selected-item'),
+                      nsSelect.e('placeholder'),
+                      nsSelect.is('transparent', !hasModelValue || (expanded && !states.inputValue)),
+                    ]"
+                  >
+                    <span>{{ currentPlaceholder }}</span>
+                  </div>
+                </div>
+                <div class="el-input-group__append">
+                  <el-icon
+                    v-if="states.selectedLabel"
+                    :id="`${myId}-btn-clear`"
+                    class="tp-autosuggest-clear-icon fa fa-times-circle"
+                    @click.stop.prevent="clearTags"
+                  >
+                  </el-icon>
+                  <el-row
+                    :justify="states.selectedLabel ? 'space-between' : 'end'"
+                    align="middle"
+                  >
+                    <el-row
+                      align="middle"
+                      justify="space-around"
+                      class="el-input__close"
+                    >
+                      <el-divider
+                        direction="vertical"
+                        class="tp-autosuggest-vertical-divider"
+                      />
+                      <div
+                        v-if="!showClose"
+                        :id="`${myId}-btn-close`"
+                        class="tp-btn-close"
+                      >
+                        <el-icon
+                          :class="['el-select__caret', 'el-select__icon', iconReverse]"
+                        >
+                          <ArrowDown />
+                        </el-icon>
+                      </div>
+                    </el-row>
+                  </el-row>
+                </div>
+              </div>
+              <!-- DISABLED -->
+              <div
+                v-else
+                class="el-input el-select__input is-disabled"
+              >
+                <div class="el-input__wrapper">
+                  <slot v-if="multiple" name="tag">
+                    <div
+                      v-for="item in showTagList"
+                      :key="getValueKey(item)"
+                      :class="nsSelect.e('selected-item')"
+                    >
+                      <el-tag
+                        :closable="false"
+                        :size="collapseTagSize"
+                        :type="tagType"
+                        disable-transitions
+                        :style="tagStyle"
+                      >
+                        <span :class="nsSelect.e('tags-text')">
+                          {{ item.currentLabel }}
+                        </span>
+                      </el-tag>
+                    </div>
+
+                    <el-tooltip
+                      v-if="collapseTags && states.selected.length > maxCollapseTags"
+                      ref="tagTooltipRef"
+                      :disabled="dropdownMenuVisible || !collapseTagsTooltip"
+                      :fallback-placements="['bottom', 'top', 'right', 'left']"
+                      :effect="effect"
+                      placement="bottom"
+                      :teleported="teleported"
+                    >
+                      <template #default>
+                        <div
+                          ref="collapseItemRef"
+                          :class="nsSelect.e('selected-item')"
+                        >
+                          <el-tag
+                            :closable="false"
+                            :size="collapseTagSize"
+                            :type="tagType"
+                            disable-transitions
+                            :style="collapseTagStyle"
+                          >
+                            <span :class="nsSelect.e('tags-text')">
+                              + {{ states.selected.length - maxCollapseTags }}
+                            </span>
+                          </el-tag>
+                        </div>
+                      </template>
+                      <template #content>
+                        <div ref="tagMenuRef" :class="nsSelect.e('selection')">
+                          <div
+                            v-for="item in collapseTagList"
+                            :key="getValueKey(item)"
+                            :class="nsSelect.e('selected-item')"
+                          >
+                            <el-tag
+                              class="in-tooltip"
+                              :closable="false"
+                              :size="collapseTagSize"
+                              :type="tagType"
+                              disable-transitions
+                            >
+                              <span :class="nsSelect.e('tags-text')">
+                                {{ item.currentLabel }}
+                              </span>
+                            </el-tag>
+                          </div>
+                        </div>
+                      </template>
+                    </el-tooltip>
+                  </slot>
+                  <div
+                    v-if="shouldShowPlaceholder"
+                    :class="[
+                      nsSelect.e('selected-item'),
+                      nsSelect.e('placeholder'),
+                      nsSelect.is('transparent', !hasModelValue || (expanded && !states.inputValue)),
+                    ]"
+                  >
+                    <span>{{ currentPlaceholder }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </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 #content>
+        <el-select-menu ref="menuRef">
+          <el-scrollbar
+            v-show="states.options.size > 0 && !loading"
+            :id="contentId"
+            ref="scrollbarRef"
+            tag="ul"
+            wrap-class="el-select-dropdown__wrap"
+            view-class="el-select-dropdown__list"
+            :class="[nsSelect.is('empty', filteredOptionsCount === 0)]"
+            role="listbox"
+            :aria-label="ariaLabel"
+            aria-orientation="vertical"
           >
-            <template v-if="item.created">
-              <a :id="`${_id}-btn-create`"><em class="far fa-plus" /> {{ newItem }}</a>
-            </template>
-            <slot
-              v-else
+            <el-option
+              v-for="(item, i) in suggestionsList"
+              :id="`${myId}-option-${i}`"
+              :key="i"
+              :label="item[labelKey]"
+              :value="item[valueKey]"
               :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"
+              :created="item.created"
+              :class="{'created': item.created}"
+            >
+              <template v-if="item.created">
+                <a :id="`${myId}-btn-create`"><em class="far fa-plus" /> {{ newItem }}</a>
+              </template>
+              <slot
+                v-else
+                :item="item"
+              />
+            </el-option>
+          </el-scrollbar>
+          <div
+            v-if="$slots.loading && loading"
+            class="el-select-dropdown__loading"
           >
-            <tp-skeleton :count="4" />
-          </p>
-          <p
-            v-else
+            <slot name="loading" />
+          </div>
+          <div
+            v-else-if="loading || filteredOptionsCount === 0"
             class="el-select-dropdown__empty"
           >
-            {{ emptyText }}
-          </p>
-        </template>
-      </el-select-menu>
-    </transition>
+            <slot name="empty">
+              <span>{{ emptyText }}</span>
+            </slot>
+          </div>
+          <div v-if="$slots.footer" class="el-select-dropdown__footer">
+            <slot name="footer" />
+          </div>
+        </el-select-menu>
+      </template>
+    </el-tooltip>
   </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
-    }
-  },
-
-  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) {
-            cachedOption.label = initialLabel
-          }
-        }
-
-        if (isEqual) {
-          option = cachedOption
-          break
-        }
-      }
-
-      if (option) return option
-
-      const label = !isObject && !isNull && !isUndefined ? value : ''
-      const newOption = {
-        value,
-        currentLabel: initialLabel || 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()
-          }
-        })
-    }
-  }
-}
+import { defineComponent } from 'vue'
+import autosuggestCore from '@src/components/Autosuggest/core.js'
+import autosuggestProps from '@src/components/Autosuggest/autosuggest-props.js'
+const autosuggestDefinition = autosuggestCore('TpAutosuggest', autosuggestProps)
+export default defineComponent(autosuggestDefinition)
 </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%);
-    }
-  }
-}
+@import "./autosuggest-style"
 </style>