@tagplus/components 5.2.7 → 5.2.9

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

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

@@ -1,63 +0,0 @@
-
-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,5 +0,0 @@
-import Autosuggest from './Autosuggest'
-import Multisuggest from './Multisuggest'
-
-export default Autosuggest
-export { Multisuggest, Autosuggest }

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

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

package/src/components/Autosuggest/option.vue

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

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

package/src/components/Autosuggest/useOption.js

@@ -1,120 +0,0 @@
-// @ts-nocheck
-import { computed, getCurrentInstance, inject, toRaw, watch } from 'vue'
-import { get, isEqual } from 'lodash-unified'
-import { escapeStringRegexp, isObject } from '@/utils'
-
-export function useOption (props, states) {
-  // inject
-  const select = inject('select')
-  const selectGroup = inject('ElSelectGroup', { disabled: false })
-
-  // computed
-  const itemSelected = computed(() => {
-    if (select.props.multiple) {
-      return contains(select.props.modelValue, props.value)
-    } else {
-      return contains([select.props.modelValue], props.value)
-    }
-  })
-
-  const limitReached = computed(() => {
-    if (select.props.multiple) {
-      const modelValue = (select.props.modelValue || [])
-      return (
-        !itemSelected.value &&
-        modelValue.length >= select.props.multipleLimit &&
-        select.props.multipleLimit > 0
-      )
-    } else {
-      return false
-    }
-  })
-
-  const currentLabel = computed(() => {
-    return props.label || (isObject(props.value) ? '' : props.value)
-  })
-
-  const currentValue = computed(() => {
-    return props.value || props.label || ''
-  })
-
-  const isDisabled = computed(() => {
-    return props.disabled || states.groupDisabled || limitReached.value
-  })
-
-  const instance = getCurrentInstance()
-
-  const contains = (arr = [], target) => {
-    if (!isObject(props.value)) {
-      return arr && arr.includes(target)
-    } else {
-      const valueKey = select.props.valueKey
-      return (
-        arr &&
-        arr.some((item) => {
-          return toRaw(get(item, valueKey)) === get(target, valueKey)
-        })
-      )
-    }
-  }
-
-  const hoverItem = () => {
-    if (!props.disabled && !selectGroup.disabled) {
-      select.states.hoveringIndex = select.optionsArray.indexOf(instance.proxy)
-    }
-  }
-
-  const updateOption = (query) => {
-    const regexp = new RegExp(escapeStringRegexp(query), 'i')
-    states.visible = regexp.test(currentLabel.value) || props.created
-  }
-
-  watch(
-    () => currentLabel.value,
-    () => {
-      if (!props.created && !select.props.remote) select.setSelected()
-    }
-  )
-
-  watch(
-    () => props.value,
-    (val, oldVal) => {
-      const { remote, valueKey } = select.props
-
-      if (!isEqual(val, oldVal)) {
-        select.onOptionDestroy(oldVal, instance.proxy)
-        select.onOptionCreate(instance.proxy)
-      }
-
-      if (!props.created && !remote) {
-        if (
-          valueKey &&
-          isObject(val) &&
-          isObject(oldVal) &&
-          val[valueKey] === oldVal[valueKey]
-        ) {
-          return
-        }
-        select.setSelected()
-      }
-    }
-  )
-
-  watch(
-    () => selectGroup.disabled,
-    () => {
-      states.groupDisabled = selectGroup.disabled
-    },
-    { immediate: true }
-  )
-
-  return {
-    select,
-    currentLabel,
-    currentValue,
-    itemSelected,
-    isDisabled,
-    hoverItem,
-    updateOption,
-  }
-}