@tagplus/components 4.7.12 → 5.0.0

package/src/components/Autosuggest/useSelect.js

@@ -0,0 +1,1133 @@
+import {
+  computed,
+  nextTick,
+  onMounted,
+  reactive,
+  ref,
+  watch,
+  watchEffect,
+  getCurrentInstance,
+} from 'vue'
+// eslint-disable-next-line vue/prefer-import-from-vue
+import { isArray, isObject, toRawType } from '@vue/shared'
+import {
+  findLastIndex,
+  get,
+  isEqual,
+  debounce as lodashDebounce,
+} from 'lodash-unified'
+import { useResizeObserver } from '@vueuse/core'
+const UPDATE_MODEL_EVENT = 'update:modelValue'
+const CHANGE_EVENT = 'change'
+const EVENT_CODE = {
+  tab: 'Tab',
+  enter: 'Enter',
+  space: 'Space',
+  left: 'ArrowLeft', // 37
+  up: 'ArrowUp', // 38
+  right: 'ArrowRight', // 39
+  down: 'ArrowDown', // 40
+  esc: 'Escape',
+  delete: 'Delete',
+  backspace: 'Backspace',
+  numpadEnter: 'NumpadEnter',
+  pageUp: 'PageUp',
+  pageDown: 'PageDown',
+  home: 'Home',
+  end: 'End',
+}
+import {
+  ValidateComponentsMap,
+  debugWarn,
+  isClient,
+  isFunction,
+  isNumber,
+  isString,
+  scrollIntoView,
+  useInput,
+  useFormItem,
+  useFormItemInputId,
+  useFormSize,
+} from '@/utils'
+import {
+  useFocusController,
+  useId,
+  useLocale,
+  useNamespace,
+} from 'element-plus/es/hooks/index'
+
+const MINIMUM_INPUT_WIDTH = 11
+
+export const useSelect = (props, { emit }) => {
+  const { t } = useLocale()
+  const contentId = useId()
+  const nsSelect = useNamespace('select')
+  const nsInput = useNamespace('input')
+
+  const states = reactive({
+    inputValue: '',
+    options: new Map(),
+    cachedOptions: new Map(),
+    disabledOptions: new Map(),
+    optionValues: [], // sorted value of options
+    selected: props.multiple ? [] : ({}),
+    selectionWidth: 0,
+    calculatorWidth: 0,
+    collapseItemWidth: 0,
+    selectedLabel: '',
+    hoveringIndex: -1,
+    previousQuery: null,
+    inputHovering: false,
+    menuVisibleOnFocus: false,
+    isBeforeHide: false,
+  })
+
+  // template refs
+  const selectRef = ref(null)
+  const selectionRef = ref(null)
+  const tooltipRef = ref(null)
+  const inputRef = ref(null)
+  const calculatorRef = ref(null)
+  const suffixRef = ref(null)
+  const menuRef = ref(null)
+  const collapseItemRef = ref(null)
+  const scrollbarRef = ref(null)
+
+  const { wrapperRef, isFocused, handleFocus, handleBlur } = useFocusController(
+    inputRef,
+    {
+      afterFocus () {
+        if (props.automaticDropdown && !expanded.value) {
+          expanded.value = true
+          states.menuVisibleOnFocus = true
+        }
+      },
+      beforeBlur (event) {
+        return (
+          tooltipRef.value?.isFocusInsideContent(event)
+        )
+      },
+      afterBlur () {
+        expanded.value = false
+        states.menuVisibleOnFocus = false
+      },
+    }
+  )
+
+  // the controller of the expanded popup
+  const expanded = ref(false)
+  const hoverOption = ref()
+
+  const { form, formItem } = useFormItem()
+  const { inputId } = useFormItemInputId(props, {
+    formItemContext: formItem,
+  })
+
+  const selectDisabled = computed(() => props.disabled || form?.disabled)
+
+  const hasModelValue = computed(() => {
+    return props.multiple
+      ? isArray(props.modelValue) && props.modelValue.length > 0
+      : props.modelValue !== undefined &&
+          props.modelValue !== null &&
+          props.modelValue !== ''
+  })
+
+  /**
+   * @tagplus
+   * Sobrescrito para mostrar o botão sem hover, para funcionar no mobile
+   */
+  const showClose = computed(() => {
+    const criteria =
+    props.clearable &&
+    !selectDisabled.value &&
+    hasModelValue.value
+    return criteria
+  })
+
+  /**
+   * @tagplus
+   * Sobrescrito para remover parâmetro suffixTransition
+   */
+  const iconReverse = computed(() => {
+    return expanded.value ? 'is-reverse' : ''
+  })
+
+  /**
+   * @tagplus
+   * Trata o caso que o autosuggest recebe um objeto com o valueKey e labelKey
+   */
+  const formattedValue = computed(() => {
+    let newVal = ''
+    if (typeof props.modelValue === 'boolean') {
+      newVal = ''
+    } else if (Array.isArray(props.modelValue)) {
+      newVal = props.modelValue
+    } else if (props.modelValue && typeof props.modelValue === 'object') {
+      if (!Object.keys(newVal).length) { return {} }
+      if (!props.modelValue[props.valueKey] && props.modelValue[props.valueKey] !== '') {
+        if (process.env.DEBUG === 'true') {
+          const instance = getCurrentInstance()
+          console.error(`Componente '${instance.type.componentName}'  option doesn't have a valueKey '${props.valueKey}' key` )
+        }
+      } else {
+        newVal = props.modelValue[props.valueKey]
+      }
+    }
+
+    return newVal
+  })
+
+  const validateState = computed(() => formItem?.validateState || '')
+  const validateIcon = computed(
+    () => ValidateComponentsMap[validateState.value]
+  )
+
+  /**
+   * @tagplus
+   * Sobrescrito porque é sempre remote
+   */
+  const debounce = 300
+
+  /**
+   * @tagplus
+   * Sobrescrito para remover parâmetro filterable e remote
+   * Altera a lang padrão de "Sem dados" para não ter que preencher a prop em todas instâncias do projeto 2.0
+   */
+  const emptyText = computed(() => {
+    if (props.loading) {
+      return props.loadingText || t('el.select.loading')
+    } else {
+      if (!states.inputValue && states.options.size === 0)
+        return false
+      if (
+        states.inputValue &&
+        states.options.size > 0 &&
+        filteredOptionsCount.value === 0
+      ) {
+        return props.noMatchText || t('el.select.noMatch')
+      }
+      if (states.options.size === 0) {
+        // @TODO Verificar se mostrará no projeto nuxt
+        return props.noDataText || t('autosuggests.sem_dados')
+      }
+    }
+    return null
+  })
+
+  const filteredOptionsCount = computed(
+    () => optionsArray.value.filter((option) => option.visible).length
+  )
+
+  const optionsArray = computed(() => {
+    const list = Array.from(states.options.values())
+    const newList = []
+    states.optionValues.forEach((item) => {
+      const index = list.findIndex((i) => i.value === item)
+      if (index > -1) {
+        newList.push(list[index])
+      }
+    })
+    return newList.length >= list.length ? newList : list
+  })
+
+  const cachedOptionsArray = computed(() =>
+    Array.from(states.cachedOptions.values())
+  )
+
+  /**
+   * @tagplus
+   * Sobrescrito para remover parâmetro filterable
+   */
+  const showNewOption = computed(() => {
+    const hasExistingOption = optionsArray.value
+      .filter((option) => {
+        return !option.created
+      })
+      .some((option) => {
+        return option.currentLabel === states.inputValue
+      })
+    return (
+      props.allowCreate &&
+      states.inputValue !== '' &&
+      !hasExistingOption
+    )
+  })
+
+  /**
+   * @tagplus
+   * Sobrescrito porque será sempre filterable com remoteMethod
+   */
+  const updateOptions = () => {
+    return
+  }
+
+  const selectSize = useFormSize()
+
+  const collapseTagSize = computed(() =>
+    ['small'].includes(selectSize.value) ? 'small' : 'default'
+  )
+
+  /**
+   * @tagplus
+   * Sobrescrito para alterar o doRequest
+   */
+  const dropdownMenuVisible = computed({
+    get () {
+      return expanded.value && emptyText.value !== false
+    },
+    set (val) {
+      states.doRequest = true
+      expanded.value = val
+    },
+  })
+
+  /**
+   * @tagplus
+   * Sobrescrito porque não tem mais filterable
+   */
+  const shouldShowPlaceholder = computed(() => {
+    if (isArray(props.modelValue)) {
+      return props.modelValue.length === 0 && !states.inputValue
+    }
+    return !states.inputValue
+  })
+
+  const currentPlaceholder = computed(() => {
+    const _placeholder = props.placeholder ?? t('el.select.placeholder')
+    return props.multiple || !hasModelValue.value
+      ? _placeholder
+      : states.selectedLabel
+  })
+
+  /**
+   * @tagplus
+   * Criado para montar a lista com ou sem "Cadastrar Novo Item"
+   */
+  const suggestionsList = computed(() => {
+    if (props.loading) return []
+
+    // transformando em Array
+    const list =
+        typeof props.suggestions === 'object'
+          ? Object.values(props.suggestions)
+          : props.suggestions
+
+    if (props.allowCreate) {
+      const createdSuggestion = { created: true }
+
+      createdSuggestion[props.labelKey] = states.inputValue !== '' ? states.inputValue : null
+      createdSuggestion[props.valueKey] = createdSuggestion[props.labelKey]
+      list.push(createdSuggestion)
+    }
+
+    return list
+  })
+
+  /**
+   * @tagplus
+   * Criado para formatar o newItem
+   */
+  const newItem = computed(() => {
+    const instance = getCurrentInstance()
+    // @todo rever se vai funcionar no nuxt
+    return states.inputValue
+      ? t('autosuggests.cadastrar', { nameItem: states.inputValue })
+      : t(`autosuggests.newItem.${instance.type.componentName}`)
+  })
+
+  /**
+   * @tagplus
+   * Criado para conseguir ter mais de um componente na mesma página com ids diferentes
+   */
+  const myId = computed(() => {
+    const instance = getCurrentInstance()
+    return props.id || instance.type.componentName
+  })
+
+  /**
+   * @tagplus
+   * Criado para formatar corretamente a option visível quando recebe number e carregou a lista
+   */
+  const firstValueStopHandle = watch(
+    () => props.suggestions,
+    (val, oldVal) => {
+      if (!isNumber(props.modelValue)) {
+        firstValueStopHandle()
+      }
+
+      if (val.length){
+        setSelected()
+      }
+
+      firstValueStopHandle()
+    }
+  )
+
+  /**
+   * @tagplus
+   * Sobrescrito para remover prop filterable
+   */
+  watch(
+    () => props.modelValue,
+    (val, oldVal) => {
+      if (props.multiple) {
+        if (!props.reserveKeyword) {
+          states.inputValue = ''
+          handleQueryChange('')
+        }
+      }
+      setSelected()
+      if (!isEqual(val, oldVal) && props.validateEvent) {
+        formItem?.validate('change').catch((err) => debugWarn(err))
+      }
+    },
+    {
+      flush: 'post',
+      deep: true,
+    }
+  )
+
+  watch(
+    () => expanded.value,
+    (val) => {
+      if (val) {
+        handleQueryChange(states.inputValue)
+      } else {
+        states.inputValue = ''
+        states.previousQuery = null
+        states.isBeforeHide = true
+      }
+      emit('visible-change', val)
+    }
+  )
+
+  /**
+   * @tagplus
+   * Sobrescrito para remover prop filterable e remote
+   */
+  watch(
+    // fix `Array.prototype.push/splice/..` cannot trigger non-deep watcher
+    // https://github.com/vuejs/vue-next/issues/2116
+    () => states.options.entries(),
+    () => {
+      if (!isClient) return
+
+      if (props.defaultFirstOption && filteredOptionsCount.value ) {
+        checkDefaultFirstOption()
+      }
+    },
+    {
+      flush: 'post',
+    }
+  )
+
+  watch(
+    () => states.hoveringIndex,
+    (val) => {
+      if (isNumber(val) && val > -1) {
+        hoverOption.value = optionsArray.value[val] || {}
+      } else {
+        hoverOption.value = {}
+      }
+      optionsArray.value.forEach((option) => {
+        option.hover = hoverOption.value === option
+      })
+    }
+  )
+
+  watchEffect(() => {
+    // Anything could cause options changed, then update options
+    // If you want to control it by condition, write here
+    if (states.isBeforeHide) return
+    updateOptions()
+  })
+
+  /**
+   * @tagplus
+   * Sobrescrito para remover parâmetro filterable e remote
+   * @param {String} val
+   */
+  const handleQueryChange = (val) => {
+    // Correção aqui para forçar primeeira request com createOnLoad = false
+    if (!states.doRequest && states.previousQuery === val) { return }
+    if (states.previousQuery === val) { return }
+
+    states.previousQuery = val
+    if (isFunction(props.remoteMethod)) {
+      props.remoteMethod(val)
+    }
+    if (props.defaultFirstOption) {
+      nextTick(checkDefaultFirstOption)
+    } else {
+      nextTick(updateHoveringIndex)
+    }
+  }
+
+  /**
+   * find and highlight first option as default selected
+   * @remark
+   * - if the first option in dropdown list is user-created,
+   *   it would be at the end of the optionsArray
+   *   so find it and set hover.
+   *   (NOTE: there must be only one user-created option in dropdown list with query)
+   * - if there's no user-created option in list, just find the first one as usual
+   *   (NOTE: exclude options that are disabled or in disabled-group)
+   */
+  const checkDefaultFirstOption = () => {
+    const optionsInDropdown = optionsArray.value.filter(
+      (n) => n.visible && !n.disabled && !n.states.groupDisabled
+    )
+    const userCreatedOption = optionsInDropdown.find((n) => n.created)
+    const firstOriginOption = optionsInDropdown[0]
+    states.hoveringIndex = getValueIndex(
+      optionsArray.value,
+      userCreatedOption || firstOriginOption
+    )
+  }
+
+  const setSelected = () => {
+    if (!props.multiple) {
+      const option = getOption(props.modelValue)
+      states.selectedLabel = option.currentLabel
+      states.selected = option
+      return
+    } else {
+      states.selectedLabel = ''
+    }
+    const result = []
+    if (isArray(props.modelValue)) {
+      props.modelValue.forEach((value) => {
+        result.push(getOption(value))
+      })
+    }
+    states.selected = result
+  }
+
+  /**
+   * @tagplus
+   * Criado para encontrar o objeto referente à value nas suggestions,
+   * comparando o value com o valor de item[valueKey]
+   * @param {String|Number} value
+   * @return {Object}
+   */
+  const getObjectFromSuggestions = (value) => {
+    // Tenta transformar modelVal Number em Object com valueKey
+    for (let i = 0; i < props.suggestions.length; i++) {
+      const item = props.suggestions[i]
+      if (item[props.valueKey] === value){
+        return {
+          ...item,
+          [props.valueKey]: JSON.parse(JSON.stringify(value)),
+          [props.labelKey]: item[props.labelKey]
+        }
+      }
+    }
+
+    return {
+      [props.valueKey]: value,
+      [props.labelKey]: value
+    }
+  }
+
+  /**
+   * @tagplus
+   * Criado para extrair dados da modelValue dos suggestions para criar a opção clicável e mostrar a label corretamente
+   * @param {Boolean, Object, Array, Number} modelValue
+   */
+  const getValueLabelForOption = (modelValue) => {
+    let value
+    let initialLabel = modelValue ?? false
+    if (typeof modelValue === 'boolean') {
+      value = ''
+    } else if (Array.isArray(modelValue)) {
+      value = modelValue
+    } else if (typeof modelValue === 'number' && props.suggestions.length && typeof props.suggestions[0] === 'object') {
+      const suggestionsValue = getObjectFromSuggestions(modelValue)
+      value = suggestionsValue[props.valueKey]
+      initialLabel = suggestionsValue[props.labelKey]
+    } else if (modelValue && typeof modelValue === 'object') {
+      if (!Object.keys(modelValue).length) { return {} }
+      if (!modelValue[props.valueKey] && modelValue[props.valueKey] !== '') {
+        const instance = getCurrentInstance()
+        console.error(`Componente '${instance.type.componentName}' option doesn't have a valueKey '${props.valueKey}' key`)
+      } else {
+        // Se mandou a label no objeto modelValue
+        if (modelValue[props.labelKey]) {
+          initialLabel = modelValue[props.labelKey]
+        }
+
+        value = modelValue[props.valueKey]
+      }
+    } else {
+      value = modelValue
+    }
+
+    return { value, initialLabel }
+  }
+
+  /**
+   * @tagplus
+   * Sobrescrito para permitir model com objeto, além de mostrar a label corretamente
+   * @param {*} val
+   */
+  const getOption = (val) => {
+    const { value, initialLabel } = getValueLabelForOption(val)
+
+    let option
+    if (value && initialLabel) {
+      option = {
+        value,
+        currentLabel: initialLabel
+      }
+    }
+
+    const isObjectValue = toRawType(value).toLowerCase() === 'object'
+    const isNull = toRawType(value).toLowerCase() === 'null'
+    const isUndefined = toRawType(value).toLowerCase() === 'undefined'
+    for (let i = states.cachedOptions.size - 1; i >= 0; i--) {
+      const cachedOption = cachedOptionsArray.value[i]
+      const isEqualValue = isObjectValue
+        ? get(cachedOption.value, props.valueKey) === get(value, props.valueKey)
+        : cachedOption.value === value
+      if (isEqualValue) {
+        option = {
+          value,
+          currentLabel: cachedOption.currentLabel,
+          isDisabled: cachedOption.isDisabled,
+        }
+        break
+      }
+    }
+    if (option) return option
+    const label = isObjectValue ? value.label : !isNull && !isUndefined ? value : ''
+
+    const newOption = {
+      value,
+      currentLabel: initialLabel || label,
+    }
+    return newOption
+  }
+
+  const updateHoveringIndex = () => {
+    if (!props.multiple) {
+      states.hoveringIndex = optionsArray.value.findIndex((item) => {
+        return getValueKey(item) === getValueKey(states.selected)
+      })
+    } else {
+      if (states.selected.length > 0) {
+        states.hoveringIndex = Math.min(
+          ...states.selected.map((selected) => {
+            return optionsArray.value.findIndex((item) => {
+              return getValueKey(item) === getValueKey(selected)
+            })
+          })
+        )
+      } else {
+        states.hoveringIndex = -1
+      }
+    }
+  }
+
+  const resetSelectionWidth = () => {
+    states.selectionWidth = selectionRef.value.getBoundingClientRect().width
+  }
+
+  const resetCalculatorWidth = () => {
+    states.calculatorWidth = calculatorRef.value.getBoundingClientRect().width
+  }
+
+  const resetCollapseItemWidth = () => {
+    states.collapseItemWidth =
+      collapseItemRef.value.getBoundingClientRect().width
+  }
+
+  const updateTooltip = () => {
+    tooltipRef.value?.updatePopper?.()
+  }
+
+  const onInputChange = () => {
+    if (states.inputValue.length > 0 && !expanded.value) {
+      expanded.value = true
+    }
+    handleQueryChange(states.inputValue)
+  }
+
+  /**
+   * @tagplus
+   * Sobrescrito porque é sempre remote
+   * @param {*} value
+   */
+  const onInput = (event) => {
+    states.inputValue = event.target.value
+    debouncedOnInputChange()
+  }
+
+  const debouncedOnInputChange = lodashDebounce(() => {
+    onInputChange()
+  // eslint-disable-next-line vue/no-ref-object-destructure
+  }, debounce.value)
+
+  /**
+   * @tagplus
+   * Sobrescrito para funcionar com model objeto e melhoria caso lista não tenha campos necessários
+   * @param {*} val
+   */
+  const emitChange = (val) => {
+    if (!isEqual(formattedValue, val)) {
+      emit(CHANGE_EVENT, val)
+    }
+  }
+
+  const getLastNotDisabledIndex = (value) =>
+    findLastIndex(value, (it) => !states.disabledOptions.has(it))
+
+  const deletePrevTag = (e) => {
+    if (!props.multiple) return
+    if (e.code === EVENT_CODE.delete) return
+    if (e.target.value.length <= 0) {
+      const value = props.modelValue.slice()
+      const lastNotDisabledIndex = getLastNotDisabledIndex(value)
+      if (lastNotDisabledIndex < 0) return
+      value.splice(lastNotDisabledIndex, 1)
+      emit(UPDATE_MODEL_EVENT, value)
+      emitChange(value)
+    }
+  }
+
+  const deleteTag = (event, tag) => {
+    const index = states.selected.indexOf(tag)
+    if (index > -1 && !selectDisabled.value) {
+      const value = props.modelValue.slice()
+      value.splice(index, 1)
+      emit(UPDATE_MODEL_EVENT, value)
+      emitChange(value)
+      emit('remove-tag', tag.value)
+    }
+    event.stopPropagation()
+    focus()
+  }
+
+  const deleteSelected = (event) => {
+    event.stopPropagation()
+    const value = props.multiple ? [] : ''
+    if (!isString(value)) {
+      for (const item of states.selected) {
+        if (item.isDisabled) value.push(item.value)
+      }
+    }
+    emit(UPDATE_MODEL_EVENT, value)
+    emitChange(value)
+    states.hoveringIndex = -1
+    expanded.value = false
+    emit('clear')
+    focus()
+  }
+
+  /**
+   * @tagplus
+   * Criado para emitir valores de acordo com a configuração da prop legacyModel,
+   * se recebeu um objeto ou array de objetos e legacyModel é true retornará o valor de valueKey ou array com valueKeys
+   * se recebeu um number/string ele será usado como valueKey para encontrar o objeto em suggestions ou retornar um objeto novo
+   * @param {String|Number|Object} value
+   * @returns {Object}
+   */
+  const normalizarValor = (value) => {
+    if (isObject(value) && props.legacyModel){
+      return value[props.valueKey]
+    } else if (!isObject(value) && !props.legacyModel){
+      return getObjectFromSuggestions(value)
+    }
+
+    return value
+  }
+
+  /**
+   * @tagplus
+   * Criado para emitir valores de acordo com a configuração da prop legacyModel
+   * @see normalizarValor
+   * @param {String|Number|Object} value
+   * @returns {Array|String|Number|Object}
+   */
+  const normalizarTipos = (value) => {
+    if (props.multiple){
+      return value.map(item => {
+        return normalizarValor(item)
+      })
+    }
+
+    return normalizarValor(value)
+  }
+
+  /**
+   * @tagplus
+   * Sobrescrito para corrigir a label no click
+   * @param {Object} option
+   */
+  const handleOptionSelect = (option) => {
+    if (props.multiple) {
+      const value = (props.modelValue || []).slice()
+      const optionIndex = getValueIndex(value, option.value)
+      if (optionIndex > -1) {
+        value.splice(optionIndex, 1)
+      } else if (props.multipleLimit <= 0 || value.length < props.multipleLimit) {
+        const emitValue = props.legacyModel ? option.value : option.item
+        value.push(emitValue)
+      }
+      // Configura o retorno do emit para objeto ou idValue
+      const formattedValue = normalizarTipos(value)
+      emit(UPDATE_MODEL_EVENT, formattedValue)
+      emitChange(formattedValue)
+      if (option.created) {
+        handleQueryChange('')
+      }
+      if (!props.reserveKeyword) {
+        states.inputValue = ''
+      }
+    } else {
+      // Configura o retorno do emit para objeto ou idValue
+      const emitValue = props.legacyModel ? option.value : option.item
+      const formattedValue = normalizarTipos(emitValue)
+      emit(UPDATE_MODEL_EVENT, formattedValue)
+      emitChange(formattedValue)
+      expanded.value = false
+    }
+    focus()
+    if (expanded.value) return
+    nextTick(() => {
+      scrollToOption(option)
+    })
+  }
+
+  /**
+   * @tagplus
+   * Sobrescrito para conseguir comparar itens tipo objeto dentro do array
+   * @param {Array} arr
+   * @param {*} value
+   * @return {Number}
+   */
+  const getValueIndex = (arr = [], value) => {
+    const compareValue = isObject(value) ? value[props.valueKey]: value
+    for (let i = 0; i < arr.length; i++) {
+      const el = arr[i]
+      const elCompareValue = isObject(el) ? el[props.valueKey] : el
+      if (compareValue === elCompareValue) {
+        return i
+      }
+    }
+
+    return -1
+  }
+
+  const scrollToOption = (option) => {
+    const targetOption = isArray(option) ? option[0] : option
+    let target = null
+
+    if (targetOption?.value) {
+      const options = optionsArray.value.filter(
+        (item) => item.value === targetOption.value
+      )
+      if (options.length > 0) {
+        target = options[0].$el
+      }
+    }
+
+    if (tooltipRef.value && target) {
+      const menu = tooltipRef.value?.popperRef?.contentRef?.querySelector?.(
+        `.${nsSelect.be('dropdown', 'wrap')}`
+      )
+      if (menu) {
+        scrollIntoView(menu, target)
+      }
+    }
+    scrollbarRef.value?.handleScroll()
+  }
+
+  const onOptionCreate = (vm) => {
+    states.options.set(vm.value, vm)
+    states.cachedOptions.set(vm.value, vm)
+    vm.disabled && states.disabledOptions.set(vm.value, vm)
+  }
+
+  const onOptionDestroy = (key, vm) => {
+    if (states.options.get(key) === vm) {
+      states.options.delete(key)
+    }
+  }
+
+  const {
+    handleCompositionStart,
+    handleCompositionUpdate,
+    handleCompositionEnd,
+  } = useInput((e) => onInput(e))
+
+  const popperRef = computed(() => {
+    return tooltipRef.value?.popperRef?.contentRef
+  })
+
+  const handleMenuEnter = () => {
+    nextTick(() => scrollToOption(states.selected))
+  }
+
+  const focus = () => {
+    inputRef.value?.focus()
+  }
+
+  const blur = () => {
+    handleClickOutside()
+  }
+
+  const handleClearClick = (event) => {
+    deleteSelected(event)
+  }
+
+  const handleClickOutside = (event) => {
+    expanded.value = false
+
+    if (isFocused.value) {
+      const _event = new FocusEvent('focus', event)
+      nextTick(() => handleBlur(_event))
+    }
+  }
+
+  const handleEsc = () => {
+    if (states.inputValue.length > 0) {
+      states.inputValue = ''
+    } else {
+      expanded.value = false
+    }
+  }
+
+  const toggleMenu = () => {
+    if (selectDisabled.value) return
+
+    if (states.menuVisibleOnFocus) {
+      // controlled by automaticDropdown
+      states.menuVisibleOnFocus = false
+    } else {
+      expanded.value = !expanded.value
+    }
+  }
+
+  const selectOption = () => {
+    if (!expanded.value) {
+      toggleMenu()
+    } else {
+      if (optionsArray.value[states.hoveringIndex]) {
+        handleOptionSelect(optionsArray.value[states.hoveringIndex])
+      }
+    }
+  }
+
+  const getValueKey = (item) => {
+    return isObject(item.value) ? get(item.value, props.valueKey) : item.value
+  }
+
+  const optionsAllDisabled = computed(() =>
+    optionsArray.value
+      .filter((option) => option.visible)
+      .every((option) => option.disabled)
+  )
+
+  const showTagList = computed(() => {
+    if (!props.multiple) {
+      return []
+    }
+    return props.collapseTags
+      ? states.selected.slice(0, props.maxCollapseTags)
+      : states.selected
+  })
+
+  const collapseTagList = computed(() => {
+    if (!props.multiple) {
+      return []
+    }
+    return props.collapseTags
+      ? states.selected.slice(props.maxCollapseTags)
+      : []
+  })
+
+  const navigateOptions = (direction) => {
+    if (!expanded.value) {
+      expanded.value = true
+      return
+    }
+    if (states.options.size === 0 || filteredOptionsCount.value === 0) return
+
+    if (!optionsAllDisabled.value) {
+      if (direction === 'next') {
+        states.hoveringIndex++
+        if (states.hoveringIndex === states.options.size) {
+          states.hoveringIndex = 0
+        }
+      } else if (direction === 'prev') {
+        states.hoveringIndex--
+        if (states.hoveringIndex < 0) {
+          states.hoveringIndex = states.options.size - 1
+        }
+      }
+      const option = optionsArray.value[states.hoveringIndex]
+      if (
+        option.disabled === true ||
+        option.states.groupDisabled === true ||
+        !option.visible
+      ) {
+        navigateOptions(direction)
+      }
+      nextTick(() => scrollToOption(hoverOption.value))
+    }
+  }
+
+  const getGapWidth = () => {
+    if (!selectionRef.value) return 0
+    const style = window.getComputedStyle(selectionRef.value)
+    return Number.parseFloat(style.gap || '6px')
+  }
+
+  // computed style
+  const tagStyle = computed(() => {
+    const gapWidth = getGapWidth()
+    const maxWidth =
+      collapseItemRef.value && props.maxCollapseTags === 1
+        ? states.selectionWidth - states.collapseItemWidth - gapWidth
+        : states.selectionWidth
+    return { maxWidth: `${maxWidth}px` }
+  })
+
+  const collapseTagStyle = computed(() => {
+    return { maxWidth: `${states.selectionWidth}px` }
+  })
+
+  const inputStyle = computed(() => ({
+    width: `${Math.max(states.calculatorWidth, MINIMUM_INPUT_WIDTH)}px`,
+  }))
+
+  if (props.multiple && !isArray(props.modelValue)) {
+    emit(UPDATE_MODEL_EVENT, [])
+  }
+  if (!props.multiple && isArray(props.modelValue)) {
+    emit(UPDATE_MODEL_EVENT, '')
+  }
+
+  /**
+   * @tagplus
+   * Criado para apagar os itens de forma simplificada
+   */
+  const clearTags = () => {
+    states.selectedLabel = ''
+    // Faz uma requisição limpa
+    states.doRequest = true
+    states.previousQuery = false
+    handleQueryChange('')
+
+    // Eventos ao limpar
+    emit(UPDATE_MODEL_EVENT, null)
+
+    if (typeof props.modelValue === 'undefined') {
+      emit('change', null, null)
+    } else {
+      emit('change', null, props.modelValue)
+    }
+  }
+
+  useResizeObserver(selectionRef, resetSelectionWidth)
+  useResizeObserver(calculatorRef, resetCalculatorWidth)
+  useResizeObserver(menuRef, updateTooltip)
+  useResizeObserver(wrapperRef, updateTooltip)
+  useResizeObserver(collapseItemRef, resetCollapseItemWidth)
+
+  onMounted(() => {
+    // INICIO @tagplus
+    states.doRequest = false
+
+    if (props.loadOnCreate) {
+      states.previousQuery = false
+      // Chama função do element-ui select que faz o remote method
+      handleQueryChange('')
+    } else {
+      // Marca para fazer a requisição no primeiro clique
+      states.doRequest = true
+    }
+    // FIM @tagplus
+
+    setSelected()
+  })
+
+  return {
+    inputId,
+    contentId,
+    nsSelect,
+    nsInput,
+    states,
+    isFocused,
+    expanded,
+    optionsArray,
+    hoverOption,
+    selectSize,
+    filteredOptionsCount,
+    resetCalculatorWidth,
+    updateTooltip,
+    debouncedOnInputChange,
+    onInput,
+    deletePrevTag,
+    deleteTag,
+    deleteSelected,
+    handleOptionSelect,
+    scrollToOption,
+    hasModelValue,
+    shouldShowPlaceholder,
+    currentPlaceholder,
+    showClose,
+    iconReverse,
+    validateState,
+    validateIcon,
+    showNewOption,
+    updateOptions,
+    collapseTagSize,
+    setSelected,
+    selectDisabled,
+    emptyText,
+    handleCompositionStart,
+    handleCompositionUpdate,
+    handleCompositionEnd,
+    onOptionCreate,
+    onOptionDestroy,
+    handleMenuEnter,
+    handleFocus,
+    focus,
+    blur,
+    handleBlur,
+    handleClearClick,
+    handleClickOutside,
+    handleEsc,
+    toggleMenu,
+    selectOption,
+    getValueKey,
+    navigateOptions,
+    dropdownMenuVisible,
+    showTagList,
+    collapseTagList,
+    clearTags,
+    suggestionsList,
+    newItem,
+    myId,
+
+    // computed style
+    tagStyle,
+    collapseTagStyle,
+    inputStyle,
+
+    // DOM ref
+    popperRef,
+    inputRef,
+    tooltipRef,
+    calculatorRef,
+    suffixRef,
+    selectRef,
+    wrapperRef,
+    selectionRef,
+    scrollbarRef,
+    menuRef,
+    collapseItemRef,
+  }
+}