@tagplus/components 5.3.3 → 5.3.4

package/src/components/Multisuggest/Multisuggest.vue

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