@tagplus/components 4.7.12 → 5.0.0

package/src/components/Multisuggest/Multisuggest.vue

@@ -1,858 +0,0 @@
-<template>
-  <div
-    v-clickoutside="handleClose"
-    class="el-select tp-multisuggest"
-    :class="[selectSize ? 'el-select--' + selectSize : '']"
-    @click.stop="toggleMenu"
-  >
-    <div
-      ref="tags"
-      class="el-select__tags"
-    >
-      <div
-        style="visibility: hidden;"
-        class="el-input-group__prepend"
-      >
-        <em class="far fa-search" />
-      </div>
-      <span v-if="collapseTags && selected.length">
-        <el-tooltip placement="top">
-          <div slot="content">
-            {{ selectedLabels }}
-          </div>
-          <el-tag
-            :closable="false"
-            :size="collapseTagSize"
-            type="info"
-            disable-transitions
-          >
-            <span
-              :id="`${_id}-tags`"
-              class="el-select__tags-text"
-            >Itens: {{ selected.length }}
-            </span>
-          </el-tag>
-        </el-tooltip>
-      </span>
-
-      <transition-group
-        v-if="!collapseTags"
-        @after-leave="resetInputHeight"
-      >
-        <el-tag
-          v-for="item in selected"
-          :key="getValueKey(item)"
-          :closable="!selectDisabled"
-          :size="collapseTagSize"
-          :hit="item.hitState"
-          type="info"
-          disable-transitions
-          @close="deleteTag($event, item)"
-        >
-          <span
-            :id="`${_id}-tags`"
-            class="el-select__tags-text"
-          >{{ item.currentLabel }}
-          </span>
-        </el-tag>
-      </transition-group>
-
-      <input
-        v-if="filterable"
-        :id="`${_id}-input-search`"
-        ref="input"
-        v-model="query"
-        :for="name"
-        type="text"
-        class="el-select__input"
-        :class="selected.length ? 'tag' : ''"
-        :disabled="selectDisabled"
-        :autocomplete="autoComplete || autocomplete"
-        :style="{ 'flex-grow': '1', width: inputLength / (inputWidth - 32) + '%', 'max-width': inputWidth - 42 + 'px', 'padding-right':'10px' }"
-        @focus="handleFocus"
-        @blur="softFocus = false"
-        @keyup="managePlaceholder"
-        @keydown="resetInputState"
-        @keydown.down.prevent="navigateOptions('next')"
-        @keydown.up.prevent="navigateOptions('prev')"
-        @keydown.enter.prevent="selectOption"
-        @keydown.esc.stop.prevent="visible = false"
-        @keydown.delete="deletePrevTag"
-        @keydown.tab="visible = false"
-        @compositionstart="handleComposition"
-        @compositionupdate="handleComposition"
-        @compositionend="handleComposition"
-        @input="debouncedQueryChange"
-      >
-    </div>
-    <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"
-      @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="selected.length ? 'space-between' : 'end'"
-          align="middle"
-        >
-          <em
-            v-if="selected.length && !selectDisabled"
-            :id="`${_id}-btn-clear`"
-            class="fa fa-times-circle icon-close"
-            @click="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" /> Cadastrar {{ query ? `"${query}"` : "novo item" }}</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 { Select } from 'element-ui'
-import { getValueByPath, valueEquals } from 'element-ui/src/utils/util'
-import debounce from 'throttle-debounce/debounce'
-
-/**
- * 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: 'TpMultisuggest',
-
-  extends: Select,
-
-  props: {
-    collapseTags: {
-      type: Boolean,
-      default: true
-    },
-
-    multiple: {
-      type: Boolean,
-      default: true
-    },
-
-    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
-    }
-  },
-
-  data () {
-    return {
-      selectedLabelsArray: [],
-      selectedLabels: ''
-    }
-  },
-
-  computed: {
-    _id () {
-      return this.id || this.$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)) {
-        this.value.forEach((item) => {
-          if (!item[this.valueKey] && item[this.valueKey] !== '') {
-            if (process.env.DEBUG === 'true') {
-              console.error(`Multisuggest '${this.$options.name}' option doesn't have a valueKey '${this.valueKey}' key`)
-            }
-          }
-        })
-
-        newVal = this.value
-      }
-
-      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
-    }
-  },
-
-  watch: {
-    // eslint-disable-next-line no-unused-vars
-    value (newValue, oldValue) {
-      // Se limpou com o X
-      if (!Array.isArray(newValue)) {
-        this.selectedLabelsArray = []
-      } else if (newValue.length > oldValue.length) {
-        const novoItem = newValue.filter(x => !oldValue.includes(x))
-
-        this.suggestionsList.forEach(item => {
-          if (item[this.valueKey] === novoItem[0]) {
-            this.selectedLabelsArray.push(item)
-          }
-        })
-      } else if (newValue && Object.keys(oldValue).length) {
-        let itemApagado = []
-        if (Array.isArray(oldValue)) {
-          itemApagado = oldValue.filter(x => !newValue?.includes(x))
-        }
-
-        this.selectedLabelsArray.forEach((item, index) => {
-          if (item[this.valueKey] === itemApagado[0]) {
-            this.selectedLabelsArray.splice(index, 1)
-          }
-        })
-      }
-
-      this.selectedLabels = this.selectedLabelsArray
-        .map(item => {
-          return item[this.labelKey]
-        })
-        .join(', ')
-    },
-
-    suggestionsList (_newValue, _oldValue) {
-      this.setSelectedLabel()
-    }
-  },
-
-  created () {
-    this.debouncedQueryChange = debounce(this.debounce, e => {
-      if (e.isComposing) {
-        // Se está apagando
-        if (e.target.value === '') {
-          this.query = this.query.slice(0, -1)
-        } else {
-          // Pega valor ignorando composition mode
-          this.query = e.target.value
-        }
-
-        this.handleQueryChange(this.query)
-      } else {
-        let forceBusca = false
-
-        // Quando clica fora enquanto está editando refaz a busca
-        if (!this.query && !e.target.value) {
-          forceBusca = true
-        }
-
-        this.query = e.target.value
-        this.handleQueryChange(e.target.value, forceBusca)
-      }
-    })
-
-    this.setSelectedLabel()
-  },
-
-  beforeMount () {
-    this.doRequest = false
-
-    if (this.loadOnCreate) {
-      this.previousQuery = false
-      // Chama função do element-ui select que faz o remote method
-      this.handleQueryChange('', true)
-    } else {
-      // Marca para fazer a requisição no primeiro clique
-      this.doRequest = true
-    }
-  },
-
-  methods: {
-    emitChange (val) {
-      if (!valueEquals(this.formatedValue, val)) {
-        this.$nextTick(() => {
-          this.$emit('change', val, this.createdSelected)
-        })
-      }
-    },
-
-    setSelectedLabel () {
-      if (Array.isArray(this.value)) {
-        this.value.forEach((item, key) => {
-          this.suggestionsList.forEach(suggestion => {
-            // Valida se o item passado e o suggest são iguais e se a label ja nao foi adicionada
-            if (item === suggestion[this.valueKey] && !this.selectedLabelsArray.includes(suggestion)) {
-              this.selectedLabelsArray.push(suggestion)
-            }
-          })
-        })
-      } else if (process.env.DEBUG === 'true') {
-        console.log(`'${this.$options.name}' recebeu valor em formato inválido.`)
-      }
-
-      this.selectedLabels = this.selectedLabelsArray
-        .map(item => {
-          return item[this.labelKey]
-        })
-        .join(', ')
-    },
-
-    // eslint-disable-next-line no-unused-vars
-    clearTags (event) {
-      // Faz uma requisição limpa
-      this.query = ''
-      this.doRequest = true
-      this.previousQuery = ''
-      this.handleQueryChange(this.query)
-
-      this.selectedLabels = []
-      this.selectedLabelsArray = []
-      // Eventos ao limpar
-      this.$emit('input', [])
-      this.$emit('change', [], 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(this.value)) {
-        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(`Multisuggest '${this.$options.name}' option doesn't have a valueKey '${this.valueKey}' key`)
-        } else {
-          // Se mandou a label no objeto value
-          if (val[this.labelKey]) {
-            initialLabel = val[this.labelKey]
-          }
-
-          value = val
-        }
-      } 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]
-        const isEqual = isObject
-          ? getValueByPath(cachedOption.value, this.valueKey) ===
-            getValueByPath(value, this.valueKey)
-          : cachedOption.value === value
-
-        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, true)
-          this.doRequest = false
-        }
-
-        (this.$refs.input || this.$refs.reference).focus()
-      }
-    },
-
-    handleClose () {
-      this.selectedLabelsArray = []
-      this.visible && this.$emit('closeSelect')
-      this.visible = false
-      // Limpa busca quando fecha
-      this.doRequest = true
-    },
-
-    /**
-     * Sobrescreve função do select
-     */
-    handleQueryChange (val, forceBusca = false) {
-      const _this6 = this
-
-      // Correção aqui para forçar primeira request com createOnLoad = false
-      // Não considera isOnComposition mais
-      if (!this.doRequest && this.previousQuery === val) return
-
-      if (!forceBusca) {
-        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()
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-:deep(){
-  .el-input-group__append {
-    padding: 0px 6px 0px 0px;
-    border: 0px;
-    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-multisuggest.el-select {
-  > .el-input {
-    display: inline-table;
-  }
-  .el-input__suffix {
-    cursor: pointer;
-  }
-  .el-select__tags {
-    width: calc(100% - 64px);
-  }
-  .el-tag:hover {
-    cursor: pointer;
-  }
-  .el-tag.el-tag--info {
-    word-wrap: break-word;
-    white-space: -moz-pre-wrap;
-    white-space: pre-wrap;
-    height: auto;
-    margin-left: 30px;
-  }
-  .el-select__input {
-    margin-right: 0px;
-    width: 100%;
-    margin-left: 30px;
-    height: auto;
-    background: transparent;
-    padding-left: 0px;
-    &.tag {
-      margin-left: 5px;
-    }
-  }
-}
-
-.tp-multisuggest-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 {
-      background-color: #f5f7fa;
-      font-weight: bold;
-    }
-
-    &.selected {
-      color: #2d6eda;
-      padding-left: 30px;
-      background-color: #f0f3f9;
-      border-radius: 5px;
-      font-weight: none;
-
-      &::before {
-        position: absolute;
-        left: 7px;
-        font-family: element-icons;
-        content: "\e6da";
-        font-size: 15px;
-      }
-      &::after {
-        content: "";
-      }
-    }
-    &.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>