Merge remote-tracking branch 'upstream/main'

2026-08-26 09:31:34 +08:00
parent 9b8c4bfab6
commit 394eb0285d
34137 changed files with 3589424 additions and 0 deletions
@@ -0,0 +1,153 @@
+<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>