airopt-manager/adi-ui/.pnpm-store/v10/files/0b/a5f8be01431256b444a934c6de115b5553e5d9ff9c4de2a4a7d15f7358180d9490cf217d69e293880803fd984c74f8119f8bccf4f26bc57dc8b178d2dfb12c

<script>
  import { debounce, deepExtend, includes } from '../utils'
  import { MIN_INPUT_WIDTH, KEY_CODES, INPUT_DEBOUNCE_DELAY } from '../constants'

  const keysThatRequireMenuBeingOpen = [
    KEY_CODES.ENTER,
    KEY_CODES.END,
    KEY_CODES.HOME,
    KEY_CODES.ARROW_LEFT,
    KEY_CODES.ARROW_UP,
    KEY_CODES.ARROW_RIGHT,
    KEY_CODES.ARROW_DOWN,
  ]

  export default {
    name: 'vue-treeselect--input',
    inject: [ 'instance' ],

    data: () => ({
      inputWidth: MIN_INPUT_WIDTH,
      value: '',
    }),

    computed: {
      needAutoSize() {
        const { instance } = this

        return (
          instance.searchable &&
          !instance.disabled &&
          instance.multiple
        )
      },

      inputStyle() {
        return {
          width: this.needAutoSize ? `${this.inputWidth}px` : null,
        }
      },
    },

    watch: {
      'instance.trigger.searchQuery'(newValue) {
        this.value = newValue
      },

      value() {
        // istanbul ignore else
        if (this.needAutoSize) this.$nextTick(this.updateInputWidth)
      },
    },

    created() {
      this.debouncedCallback = debounce(
        this.updateSearchQuery,
        INPUT_DEBOUNCE_DELAY,
        { leading: true, trailing: true },
      )
    },

    methods: {
      clear() {
        this.onInput({
          target: { value: '' },
        })
      },

      focus() {
        const { instance } = this

        if (!instance.disabled) {
          this.$refs.input && this.$refs.input.focus()
        }
      },

      blur() {
        this.$refs.input && this.$refs.input.blur()
      },

      onFocus() {
        const { instance } = this

        instance.trigger.isFocused = true
        // istanbul ignore else
        if (instance.openOnFocus) instance.openMenu()
      },

      onBlur() {
        const { instance } = this
        const menu = instance.getMenu()

        // #15
        // istanbul ignore next
        if (menu && document.activeElement === menu) {
          return this.focus()
        }

        instance.trigger.isFocused = false
        instance.closeMenu()
      },

      onInput(evt) {
        const { value } = evt.target

        this.value = value

        if (value) {
          this.debouncedCallback()
        } else {
          this.debouncedCallback.cancel()
          this.updateSearchQuery()
        }
      },

      // 用 keyUp 事件存在一个问题，删除输入框最后一个字符也会导致取消选中最后一项
      onKeyDown(evt) {
        const { instance } = this
        // https://css-tricks.com/snippets/javascript/javascript-keycodes/
        // https://stackoverflow.com/questions/4471582/javascript-keycode-vs-which
        const key = 'which' in evt ? evt.which : /* istanbul ignore next */ evt.keyCode

        if (evt.ctrlKey || evt.shiftKey || evt.altKey || evt.metaKey)
          return

        if (!instance.menu.isOpen && includes(keysThatRequireMenuBeingOpen, key)) {
          evt.preventDefault()
          return instance.openMenu()
        }

        switch (key) {
        case KEY_CODES.BACKSPACE: {
          if (instance.backspaceRemoves && !this.value.length) {
            instance.removeLastValue()
          }
          break
        }
        case KEY_CODES.ENTER: {
          evt.preventDefault()
          if (instance.menu.current === null) return
          const current = instance.getNode(instance.menu.current)
          if (current.isBranch && instance.disableBranchNodes) return
          instance.select(current)
          break
        }
        case KEY_CODES.ESCAPE: {
          if (this.value.length) {
            this.clear()
          } else if (instance.menu.isOpen) {
            instance.closeMenu()
          }
          break
        }
        case KEY_CODES.END: {
          evt.preventDefault()
          instance.highlightLastOption()
          break
        }
        case KEY_CODES.HOME: {
          evt.preventDefault()
          instance.highlightFirstOption()
          break
        }
        case KEY_CODES.ARROW_LEFT: {
          const current = instance.getNode(instance.menu.current)
          if (current.isBranch && instance.shouldExpand(current)) {
            evt.preventDefault()
            instance.toggleExpanded(current)
          } else if (!current.isRootNode && (current.isLeaf || (current.isBranch && !(instance.shouldExpand(current))))) {
            evt.preventDefault()
            instance.setCurrentHighlightedOption(current.parentNode)
          }
          break
        }
        case KEY_CODES.ARROW_UP: {
          evt.preventDefault()
          instance.highlightPrevOption()
          break
        }
        case KEY_CODES.ARROW_RIGHT: {
          const current = instance.getNode(instance.menu.current)
          if (current.isBranch && !instance.shouldExpand(current)) {
            evt.preventDefault()
            instance.toggleExpanded(current)
          }
          break
        }
        case KEY_CODES.ARROW_DOWN: {
          evt.preventDefault()
          instance.highlightNextOption()
          break
        }
        case KEY_CODES.DELETE: {
          if (instance.deleteRemoves && !this.value.length) {
            instance.removeLastValue()
          }
          break
        }
        default: {
          // istanbul ignore else
          instance.openMenu()
        }
        }
      },

      onMouseDown(evt) {
        // istanbul ignore next
        if (this.value.length) {
          // Prevent it from bubbling to the top level and triggering `preventDefault()`
          // to make the textbox unselectable
          evt.stopPropagation()
        }
      },

      renderInputContainer() {
        const { instance } = this
        const props = {}
        const children = []

        if (instance.searchable && !instance.disabled) {
          children.push(this.renderInput())
          if (this.needAutoSize) children.push(this.renderSizer())
        }

        if (!instance.searchable) {
          deepExtend(props, {
            on: {
              focus: this.onFocus,
              blur: this.onBlur,
              keydown: this.onKeyDown,
            },
            ref: 'input',
          })
        }

        if (!instance.searchable && !instance.disabled) {
          deepExtend(props, {
            attrs: {
              tabIndex: instance.tabIndex,
            },
          })
        }

        return (
          <div class="vue-treeselect__input-container" {...props}>
            {children}
          </div>
        )
      },

      renderInput() {
        const { instance } = this

        return (
          <input ref="input"
            class="vue-treeselect__input"
            type="text"
            autocomplete="off"
            tabIndex={instance.tabIndex}
            required={instance.required && !instance.hasValue}
            value={this.value}
            style={this.inputStyle}
            onFocus={this.onFocus}
            onInput={this.onInput}
            onBlur={this.onBlur}
            onKeydown={this.onKeyDown}
            onMousedown={this.onMouseDown}
          />
        )
      },

      renderSizer() {
        return (
          <div ref="sizer" class="vue-treeselect__sizer">{this.value}</div>
        )
      },

      updateInputWidth() {
        this.inputWidth = Math.max(
          MIN_INPUT_WIDTH,
          this.$refs.sizer.scrollWidth + 15,
        )
      },

      updateSearchQuery() {
        const { instance } = this

        instance.trigger.searchQuery = this.value
      },
    },

    render() {
      return this.renderInputContainer()
    },
  }
</script>