airopt-manager/adi-ui/.pnpm-store/v10/files/73/48dfed5352868902a0a3a1e7d6911fdd823c9e3a4d1c96d5ae8a162c756b2d5f7d20c1164f969bb62b787804305f5972d04c77d01e3d001964be5bd3571def-exec

<script>
  import { onLeftClick, isPromise } from '../utils'
  import SingleValue from './SingleValue'
  import MultiValue from './MultiValue'
  import DeleteIcon from './icons/Delete'
  import ArrowIcon from './icons/Arrow'

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

    computed: {
      /* eslint-disable valid-jsdoc */
      /**
       * Should show the "×" button that resets value?
       * @return {boolean}
       */
      shouldShowX() {
        const { instance } = this

        return (
          instance.clearable &&
          !instance.disabled &&
          instance.hasValue &&
          (this.hasUndisabledValue || instance.allowClearingDisabled)
        )
      },

      /**
       * Should show the arrow button that toggles menu?
       * @return {boolean}
       */
      shouldShowArrow() {
        const { instance } = this

        if (!instance.alwaysOpen) return true
        // Even with `alwaysOpen: true`, sometimes the menu is still closed,
        // e.g. when the control is disabled.
        return !instance.menu.isOpen
      },

      /**
       * Has any undisabled option been selected?
       * @type {boolean}
       */
      hasUndisabledValue() {
        const { instance } = this

        return (
          instance.hasValue &&
          instance.internalValue.some(id => !instance.getNode(id).isDisabled)
        )
      },
      /* eslint-enable valid-jsdoc */
    },

    methods: {
      renderX() {
        const { instance } = this
        const title = instance.multiple ? instance.clearAllText : instance.clearValueText

        if (!this.shouldShowX) return null

        return (
          <div class="vue-treeselect__x-container" title={title} onMousedown={this.handleMouseDownOnX}>
            <DeleteIcon class="vue-treeselect__x" />
          </div>
        )
      },

      renderArrow() {
        const { instance } = this
        const arrowClass = {
          'vue-treeselect__control-arrow': true,
          'vue-treeselect__control-arrow--rotated': instance.menu.isOpen,
        }

        if (!this.shouldShowArrow) return null

        return (
          <div class="vue-treeselect__control-arrow-container" onMousedown={this.handleMouseDownOnArrow}>
            <ArrowIcon class={arrowClass} />
          </div>
        )
      },

      handleMouseDownOnX: onLeftClick(function handleMouseDownOnX(evt) {
        /**
         * We don't use async/await here because we don't want
         * to rely on Babel polyfill or regenerator runtime.
         * See: https://babeljs.io/docs/plugins/transform-regenerator/
         * We also don't want to assume there is a global `Promise`
         * class, since we are targeting to support IE9 without the
         * need of any polyfill.
         */

        evt.stopPropagation()
        evt.preventDefault()

        const { instance } = this
        const result = instance.beforeClearAll()
        const handler = shouldClear => {
          if (shouldClear) instance.clear()
        }

        if (isPromise(result)) {
          // The handler will be called async.
          result.then(handler)
        } else {
          // Keep the same behavior here.
          setTimeout(() => handler(result), 0)
          // Also, note that IE9 requires:
          //   setTimeout(() => fn(...args), delay)
          // Instead of:
          //   setTimeout(fn, delay, ...args)
        }
      }),

      handleMouseDownOnArrow: onLeftClick(function handleMouseDownOnArrow(evt) {
        evt.preventDefault()
        evt.stopPropagation()

        const { instance } = this

        // Focus the input or prevent blurring.
        instance.focusInput()
        instance.toggleMenu()
      }),

      // This is meant to be called by child `<Value />` component.
      renderValueContainer(children) {
        return (
          <div class="vue-treeselect__value-container">
            {children}
          </div>
        )
      },
    },

    render() {
      const { instance } = this
      const ValueContainer = instance.single ? SingleValue : MultiValue

      return (
        <div class="vue-treeselect__control" onMousedown={instance.handleMouseDown}>
          <ValueContainer ref="value-container" />
          {this.renderX()}
          {this.renderArrow()}
        </div>
      )
    },
  }
</script>