@tagplus/components 5.2.8 → 5.2.9

package/src/components/Autosuggest/Autosuggest.vue

@@ -1,362 +0,0 @@
-<template>
-  <div
-    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
-      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"
-    >
-      <template #default>
-        <div ref="wrapperRef"
-             :class="[
-               nsSelect.is('focused', isFocused),
-               nsSelect.is('hovering', states.inputHovering),
-               nsSelect.is('disabled', selectDisabled),
-             ]"
-        >
-          <div
-            ref="selectionRef"
-            class="el-select__selection"
-          >
-            <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>
-      <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"
-          >
-            <el-option
-              v-for="(item, i) in suggestionsList"
-              :id="`${myId}-option-${i}`"
-              :key="i"
-              :label="item[labelKey]"
-              :value="item[valueKey]"
-              :item="item"
-              :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"
-          >
-            <slot name="loading" />
-          </div>
-          <div
-            v-else-if="loading || filteredOptionsCount === 0"
-            class="el-select-dropdown__empty"
-          >
-            <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 { 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>
-@import "./autosuggest-style"
-</style>

package/src/components/Autosuggest/Multisuggest.vue

@@ -1,22 +0,0 @@
-<script>
-import { defineComponent } from 'vue'
-import Autosuggest from './Autosuggest.vue'
-import autosuggestCore from '@src/components/Autosuggest/core.js'
-import multisuggestProps from '@src/components/Autosuggest/multisuggest-props.js'
-
-const multisuggestDefinition = autosuggestCore('TpMultisuggest', multisuggestProps)
-/**
- * O Multisuggest é um atalho para o Autosuggest com a prop multiple default true
- * para manter o comportamento do multisuggest do element-ui que era um componente separado
- * */
-export default defineComponent(
-  {
-    ...multisuggestDefinition,
-    extends: Autosuggest
-  }
-)
-</script>
-
-<style lang="scss" scoped>
-@import "./autosuggest-style"
-</style>

package/src/components/Autosuggest/autosuggest-props.js

@@ -1,210 +0,0 @@
-import { placements } from '@popperjs/core'
-
-export default {
-  /**
-   * @deprecated
-   * Faz o retorno do input imitar o comportamento antigo que voltava idValue/[...idValues] se recebesse modelValue Object/[...Objects]
-   * na versão nova vai sempre devolver o Objeto completo quando possível
-   */
-  legacyModel: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-  * @description native input id
-  */
-  id: String,
-
-  /**
-  * @description the name attribute of select input
-  */
-  name: String,
-
-  modelValue: {
-    type: [Array, String, Number, Boolean, Object],
-    default: ''
-  },
-
-  /**
-   * 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'
-  },
-  /**
-  * @description placeholder, default is 'Select'
-  */
-  placeholder: {
-    type: String,
-  },
-  /**
-   * Sobrescreve valor padrão do atributo no Select do ElementUI
-   */
-  defaultFirstOption: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  /**
-   * Se a lista vai ser carregada no create ou o labelKey não venha por padrão na requisição loadOnCreate = true,
-   * caso deva ser carregada quando o usuário clica deixar vazio ou false.
-   */
-  loadOnCreate: {
-    type: Boolean,
-    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'
-  },
-
-  /**
-  * @description whether Select is disabled
-  */
-  disabled: Boolean,
-  /**
-  * @description whether creating new items is allowed. To use this, `filterable` must be true
-  */
-  allowCreate: Boolean,
-  /**
-  * @description whether Select is loading data from server
-  */
-  loading: Boolean,
-  /**
-  * @description custom class name for Select's dropdown
-  */
-  popperClass: {
-    type: String,
-    default: '',
-  },
-  /**
-  * @description [popper.js](https://popper.js.org/docs/v2/) parameters
-  */
-  popperOptions: {
-    type: Object,
-    default: () => ({}),
-  },
-  /**
-  * @description displayed text while loading data from server, default is 'Loading'
-  */
-  loadingText: String,
-  /**
-  * @description displayed text when no data matches the filtering query, you can also use slot `empty`, default is 'No matching data'
-  */
-  noMatchText: String,
-  /**
-  * @description displayed text when there is no options, you can also use slot `empty`, default is 'No data'
-  */
-  noDataText: String,
-  /**
-  * @description tooltip theme, built-in theme: `dark` / `light`
-  */
-  effect: {
-    type: String,
-    default: 'light',
-  },
-
-  /**
-  * @description tag type
-  */
-  tagType: { default: 'info' },
-  /**
-   * @description position of dropdown
-   */
-  placement: {
-    type: String,
-    values: placements,
-    default: 'bottom-start',
-  },
-
-  /**
-   * @tagplus
-   * Sobrescrito para ter o padrão true
-   * @description whether to collapse tags to a text when multiple selecting
-  */
-  collapseTags: {
-    type:Boolean,
-    default:true
-  },
-  /**
-   * @tagplus
-   * Sobrescrito para ter o padrão true
-   * @description whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true
-  */
-  collapseTagsTooltip: {
-    type:Boolean,
-    default:true
-  },
-  /**
-  * @description the max tags number to be shown. To use this, `collapse-tags` must be true
-  */
-  maxCollapseTags: {
-    type: Number,
-    default: 1,
-  },
-  /**
-  * @description whether select dropdown is teleported to the body
-  */
-  teleported: {
-    type: Boolean,
-    default: true
-  },
-  /**
-  * @description when select dropdown is inactive and `persistent` is `false`, select dropdown will be destroyed
-  */
-  persistent: {
-    type: Boolean,
-    default: true,
-  },
-  /**
-  * @description native input aria-label
-  */
-  ariaLabel: {
-    type: String,
-    default: undefined,
-  },
-  multiple: {
-    type: Boolean,
-    default: false
-  },
-  /**
-  * @description maximum number of options user can select when `multiple` is `true`. No limit when set to 0
-  */
-  multipleLimit: {
-    type: Number,
-    default: 0,
-  }
-}