@tagplus/components 4.7.12 → 5.0.0

package/src/components/Autosuggest/Multisuggest.vue

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

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

package/src/components/Autosuggest/autosuggest-style.scss

@@ -0,0 +1,127 @@
+.tp-autosuggest-clear-icon {
+  margin: 6px 6px 1px 6px;
+}
+
+:deep() {
+  .el-select__input-wrapper {
+    width: 100%;
+
+    .el-input {
+      .el-input__inner {
+        width: 100%;
+      }
+
+      .el-input-group__prepend {
+        padding: 0;
+      }
+
+      .el-input-group__prepend::after {
+        // esconde barra vertical duplicada no search
+        display: none;
+      }
+
+      .el-input__wrapper {
+        // "borda" do <input> top e bottom
+        box-shadow: none;
+        border-top: 1px solid var(--el-input-border-color);
+        border-bottom: 1px solid var(--el-input-border-color);
+        padding-left: 8px;
+
+        .el-select__placeholder {
+          padding-left: 16px !important;
+        }
+      }
+
+      &.is-disabled {
+
+        .el-input__wrapper,
+        .el-tag {
+          cursor: not-allowed;
+        }
+      }
+
+      .el-input-group__append {
+        padding: 0;
+
+        .el-input__close {
+          width: 40px;
+
+          .tp-btn-close {
+            margin: auto;
+          }
+        }
+      }
+
+      .el-input-group__prepend,
+      .el-input-group__append {
+        background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
+      }
+
+      .el-input-group__prepend,
+      .el-input-group__append,
+      .tp-autosuggest-clear-icon {
+        cursor: pointer;
+        color: #606266;
+      }
+    }
+  }
+}
+
+.tp-autosuggest-vertical-divider {
+  height: 33.59px;
+  margin: 0;
+}
+
+.tp-autosuggest-input-prepend-icon {
+  display: flex;
+  margin: 0 10px -2px 12px;
+}
+
+.tp-autosuggest-loading {
+  text-align: center;
+  font-size: 1.5em;
+  padding: 10px;
+  margin: 0;
+}
+
+.tp-select-dropdown__list.el-select-dropdown__list {
+  li.el-select-dropdown__item {
+    line-height: 1.5em;
+    height: auto;
+    padding: $--popover-padding;
+    position: relative;
+    transition: 100ms all linear;
+
+    &.hover {
+      padding-left: 20px;
+
+      &::before {
+        position: absolute;
+        display: inline-block;
+        width: 4px;
+        top: 5px;
+        bottom: 5px;
+        left: 5px;
+        background: $--color-primary;
+        border-radius: 2px;
+      }
+    }
+
+    &.selected {
+      color: $--color-text-regular;
+    }
+
+    &.created a {
+      color: $--color-primary;
+      font-weight: normal;
+      border-bottom: 1px solid $--color-primary;
+      line-height: 1.5em;
+      display: inline-block;
+    }
+
+    small {
+      font-size: $--font-size-base;
+      color: color-mix($--color-white, $--color-text-secondary, 40%);
+    }
+  }
+}

package/src/components/Autosuggest/core.js

@@ -0,0 +1,63 @@
+
+import { provide, reactive } from 'vue'
+import { ClickOutside } from 'element-plus'
+import { ArrowDown } from '@element-plus/icons-vue'
+import ElSelectMenu from '@/components/Autosuggest/select-dropdown.vue'
+import ElOption from '@/components/Autosuggest/option.vue'
+import { useSelect } from '@/components/Autosuggest/useSelect'
+
+export default function (component_name, propsDefinition) {
+  return {
+    name: component_name,
+    componentName: component_name,
+
+    directives: {
+      ClickOutside
+    },
+
+    components: {
+      ArrowDown,
+      ElOption,
+      ElSelectMenu
+    },
+
+    props: propsDefinition,
+
+    emits: [
+      'update:modelValue',
+      'change',
+      'remove-tag',
+      'clear',
+      'visible-change',
+      'focus',
+      'blur',
+    ],
+
+    setup (props, context) {
+      const API = useSelect(props, context)
+
+      provide(
+        'select',
+        reactive({
+          props,
+          states: API.states,
+          optionsArray: API.optionsArray,
+          handleOptionSelect: API.handleOptionSelect,
+          onOptionCreate: API.onOptionCreate,
+          onOptionDestroy: API.onOptionDestroy,
+          selectRef: API.selectRef,
+          setSelected: API.setSelected,
+        })
+      )
+
+      return API
+    },
+
+    data () {
+      return {
+        visible: false,
+        tooltipVisible: false
+      }
+    }
+  }
+}

package/src/components/Autosuggest/index.js

@@ -1,3 +1,5 @@
 import Autosuggest from './Autosuggest'
+import Multisuggest from './Multisuggest'
 
 export default Autosuggest
+export { Multisuggest, Autosuggest }

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

@@ -0,0 +1,9 @@
+import autosuggestProps from '@src/components/Autosuggest/autosuggest-props'
+
+export default {
+  ...autosuggestProps,
+  multiple: {
+    type: Boolean,
+    default: true
+  }
+}

package/src/components/Autosuggest/option.vue

@@ -0,0 +1,136 @@
+<template>
+  <li
+    v-show="visible"
+    :id="id"
+    :class="containerKls"
+    role="option"
+    :aria-disabled="isDisabled || undefined"
+    :aria-selected="itemSelected"
+    @mouseenter="hoverItem"
+    @click.stop="selectOptionClick"
+  >
+    <slot>
+      <span>{{ currentLabel }}</span>
+    </slot>
+  </li>
+</template>
+
+<script>
+// @ts-nocheck
+import {
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  nextTick,
+  onBeforeUnmount,
+  reactive,
+  toRefs,
+  unref,
+} from 'vue'
+import { useId, useNamespace } from 'element-plus/es/hooks/index'
+import { useOption } from '@/components/Autosuggest/useOption'
+
+export default defineComponent({
+  name: 'ElOption',
+  componentName: 'ElOption',
+
+  props: {
+    /**
+     * @description value of option
+     */
+    value: {
+      required: true,
+      type: [String, Number, Boolean, Object, null],
+    },
+    /**
+     * @description label of option, same as `value` if omitted
+     */
+    label: [String, Number],
+    created: Boolean,
+    /**
+     * @description whether option is disabled
+     */
+    disabled: Boolean,
+    /**
+     * @tagplus
+     * @description recebe o item inteiro para ser emitido, ao inves de somente key/value
+     */
+    item: {
+      type: [String, Number, Boolean, Object],
+      required: true
+    }
+  },
+
+  setup (props) {
+    const ns = useNamespace('select')
+    const id = useId()
+
+    const containerKls = computed(() => [
+      ns.be('dropdown', 'item'),
+      ns.is('disabled', unref(isDisabled)),
+      ns.is('selected', unref(itemSelected)),
+      ns.is('hovering', unref(hover)),
+    ])
+
+    const states = reactive({
+      index: -1,
+      groupDisabled: false,
+      visible: true,
+      hover: false,
+    })
+
+    const {
+      currentLabel,
+      itemSelected,
+      isDisabled,
+      select,
+      hoverItem,
+      updateOption,
+    } = useOption(props, states)
+
+    const { visible, hover } = toRefs(states)
+
+    const vm = getCurrentInstance().proxy
+
+    select.onOptionCreate(vm)
+
+    onBeforeUnmount(() => {
+      const key = vm.value
+      const { selected } = select.states
+      const selectedOptions = select.props.multiple ? selected : [selected]
+      const doesSelected = selectedOptions.some((item) => {
+        return item.value === vm.value
+      })
+      // if option is not selected, remove it from cache
+      nextTick(() => {
+        if (select.states.cachedOptions.get(key) === vm && !doesSelected) {
+          select.states.cachedOptions.delete(key)
+        }
+      })
+      select.onOptionDestroy(key, vm)
+    })
+
+    function selectOptionClick () {
+      if (props.disabled !== true && states.groupDisabled !== true) {
+        select.handleOptionSelect(vm)
+      }
+    }
+
+    return {
+      ns,
+      id,
+      containerKls,
+      currentLabel,
+      itemSelected,
+      isDisabled,
+      select,
+      hoverItem,
+      updateOption,
+      visible,
+      hover,
+      selectOptionClick,
+      states,
+    }
+  },
+})
+</script>

package/src/components/Autosuggest/select-dropdown.vue

@@ -0,0 +1,64 @@
+<template>
+  <div
+    :class="[ns.b('dropdown'), ns.is('multiple', isMultiple), popperClass]"
+    :style="{ [isFitInputWidth ? 'width' : 'minWidth']: minWidth }"
+  >
+    <div v-if="$slots.header" :class="ns.be('dropdown', 'header')">
+      <slot name="header" />
+    </div>
+    <slot />
+    <div v-if="$slots.footer" :class="ns.be('dropdown', 'footer')">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+import { useResizeObserver } from '@vueuse/core'
+import { useNamespace } from 'element-plus/es/hooks/index'
+
+export default defineComponent({
+  name: 'ElSelectDropdown',
+
+  componentName: 'ElSelectDropdown',
+
+  inject: ['select'],
+
+  setup () {
+    const ns = useNamespace('select')
+    const minWidth = ref('')
+
+    return {
+      ns,
+      minWidth,
+    }
+  },
+
+  computed: {
+    popperClass () {
+      return this.select.popperClass
+    },
+
+    isMultiple (){
+      return this.select.multiple
+    },
+
+    isFitInputWidth (){
+      return this.select.fitInputWidth
+    },
+
+  },
+
+  mounted () {
+    this.updateMinWidth()
+    useResizeObserver(this.select.selectRef, this.updateMinWidth)
+  },
+
+  methods: {
+    updateMinWidth () {
+      this.minWidth = `${this.select.selectRef?.offsetWidth}px`
+    }
+  },
+})
+</script>