'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../utils/index.cjs');
var vueTypes = require('../../../utils/vue/vueTypes.cjs');
var addEventListener = require('../../../utils/event/addEventListener.cjs');
var _class = require('../../../utils/dom/class.cjs');

var VcHandle = /* @__PURE__ */ vue.defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "Handle",
  inheritAttrs: false,
  props: {
    prefixCls: String,
    vertical: {
      type: Boolean,
      default: void 0
    },
    offset: Number,
    disabled: {
      type: Boolean,
      default: void 0
    },
    min: Number,
    max: Number,
    value: Number,
    tabindex: vueTypes.default.oneOfType([vueTypes.default.number, vueTypes.default.string]),
    reverse: {
      type: Boolean,
      default: void 0
    },
    ariaLabel: String,
    ariaLabelledBy: String,
    ariaValueTextFormatter: Function,
    onMouseenter: {
      type: Function
    },
    onMouseleave: {
      type: Function
    },
    onMousedown: {
      type: Function
    }
  },
  setup(props, {
    attrs,
    emit,
    expose
  }) {
    const clickFocused = vue.shallowRef(false);
    const handle = vue.shallowRef();
    const handleMouseUp = () => {
      if (document.activeElement === handle.value)
        clickFocused.value = true;
    };
    const handleBlur = (e) => {
      clickFocused.value = false;
      emit("blur", e);
    };
    const handleKeyDown = () => {
      clickFocused.value = false;
    };
    const focus = () => {
      var _a;
      (_a = handle.value) == null ? void 0 : _a.focus();
    };
    const blur = () => {
      var _a;
      (_a = handle.value) == null ? void 0 : _a.blur();
    };
    const clickFocus = () => {
      clickFocused.value = true;
      focus();
    };
    const handleMousedown = (e) => {
      e.preventDefault();
      focus();
      emit("mousedown", e);
    };
    expose({
      focus,
      blur,
      clickFocus,
      ref: handle
    });
    let onMouseUpListener = null;
    vue.onMounted(() => {
      onMouseUpListener = addEventListener.addEventListenerWrap(document, "mouseup", handleMouseUp);
    });
    vue.onBeforeUnmount(() => {
      onMouseUpListener == null ? void 0 : onMouseUpListener.remove();
    });
    const positionStyle = vue.computed(() => {
      const {
        vertical,
        offset,
        reverse
      } = props;
      return vertical ? {
        [reverse ? "top" : "bottom"]: `${offset}%`,
        [reverse ? "bottom" : "top"]: "auto",
        transform: reverse ? null : `translateY(+50%)`
      } : {
        [reverse ? "right" : "left"]: `${offset}%`,
        [reverse ? "left" : "right"]: "auto",
        transform: `translateX(${reverse ? "+" : "-"}50%)`
      };
    });
    return () => {
      const {
        prefixCls,
        disabled,
        min,
        max,
        value,
        tabindex,
        ariaLabel,
        ariaLabelledBy,
        ariaValueTextFormatter,
        onMouseenter,
        onMouseleave
      } = props;
      const className = _class.classNames(attrs.class, {
        [`${prefixCls}-handle-click-focused`]: clickFocused.value
      });
      const ariaProps = {
        "aria-valuemin": min,
        "aria-valuemax": max,
        "aria-valuenow": value,
        "aria-disabled": !!disabled
      };
      const elStyle = [attrs.style, positionStyle.value];
      let mergedTabIndex = tabindex || 0;
      if (disabled || tabindex === null)
        mergedTabIndex = null;
      let ariaValueText;
      if (ariaValueTextFormatter)
        ariaValueText = ariaValueTextFormatter(value);
      const handleProps = {
        ...attrs,
        role: "slider",
        tabindex: mergedTabIndex,
        ...ariaProps,
        class: className,
        onBlur: handleBlur,
        onKeydown: handleKeyDown,
        onMousedown: handleMousedown,
        onMouseenter,
        onMouseleave,
        ref: handle,
        style: elStyle
      };
      return vue.createVNode("div", {
        ...handleProps,
        "aria-label": ariaLabel,
        "aria-labelledby": ariaLabelledBy,
        "aria-valuetext": ariaValueText
      }, null);
    };
  }
});

exports.default = VcHandle;
//# sourceMappingURL=Handle.cjs.map
