/**
 * ldesign v0.2.14
 * (c) 2022/11/2 16:16 built by swimly
 * @license MIT
 */

import { h as helper } from '../../chunks/helper.js';
import Vue from 'vue';
import { g as getIEVersion } from '../../chunks/helper2.js';
import { Tooltip } from '../tooltip/index.js';
import { renderLNodeJSXDefault } from '../../utils/render-node.js';
import { getClassPrefixMixins } from '../config-provider/config-receiver.js';
import mixins from '../../utils/mixins.js';
import '../../chunks/_commonjsHelpers.js';
import '../../chunks/defineProperty-838e4192.js';
import '../../utils/map-props.js';
import '../../utils/with-install.js';
import 'lodash';
import '../../config.js';
import '../tooltip/tooltip.js';
import 'lodash/isFunction';
import '../popup/props.js';
import '../popup/popup.js';
import '@popperjs/core';
import '../../chunks/set-style.js';
import '../../utils/dom.js';
import 'raf';
import 'lodash/isString';
import '../../chunks/index.js';
import '../../chunks/log.js';
import '../../chunks/_commonjsHelpers-2e6815bd.js';
import '../../utils/easing.js';
import '../../utils/helper.js';
import 'lodash/camelCase';
import '../popup/container.js';
import 'lodash/mergeWith';
import '../config-provider/context.js';
import '../../chunks/zh_CN.js';
import '../config-provider/type.js';
import '../tooltip/props.js';
import '../tooltip/style';
import '../tooltip/type.js';

const classPrefixMixins = getClassPrefixMixins("slider__button");
var LSliderButton = mixins(classPrefixMixins, Vue).extend({
  name: "LSliderButton",
  components: {
    LTooltip: Tooltip
  },
  props: {
    value: {
      type: [Number, String],
      default: 0
    },
    vertical: {
      type: Boolean,
      default: false
    },
    popupClass: {
      type: String,
      default: ""
    },
    tooltipProps: {
      type: [Boolean, Object],
      default: true
    },
    label: {
      type: [String, Function, Boolean],
      default: true
    },
    range: {
      type: Boolean,
      default: false
    },
    position: {
      type: String
    }
  },
  inject: {
    slider: {
      default: void 0
    }
  },
  computed: {
    placement() {
      if (this.tooltipProps instanceof Object) {
        const {
          placement
        } = this.tooltipProps;
        if (placement) return placement;
      }
      return this.vertical ? "right" : "top";
    },
    rangeDiff() {
      return this.max - this.min;
    },
    disabled() {
      return this.slider.disabled;
    },
    max() {
      return this.slider.max;
    },
    min() {
      return this.slider.min;
    },
    step() {
      return this.slider.step;
    },
    precision() {
      return this.slider.precision;
    },
    currentPos() {
      return `${(this.value - this.min) / this.rangeDiff * 100}%`;
    },
    wrapperStyle() {
      return this.vertical ? {
        bottom: this.currentPos
      } : {
        left: this.currentPos
      };
    }
  },
  data() {
    return {
      visible: false,
      hovering: false,
      dragging: false,
      isClick: false,
      clientX: 0,
      clientY: 0,
      startX: 0,
      startY: 0,
      currentX: 0,
      currentY: 0,
      startPos: 0,
      newPos: null,
      prevValue: this.value,
      showTooltip: true,
      trigger: "hover",
      showArrow: true,
      overlayInnerStyle: void 0,
      overlayClassName: void 0,
      attach: "body",
      destroyOnClose: null
    };
  },
  watch: {
    disabled() {
      this.handleIE();
    }
  },
  mounted() {
    this.showTooltip = !this.tooltipProps === false;
    this.setTooltipProps();
    this.handleIE();
  },
  methods: {
    getTooltipContent() {
      if (typeof this.label === "boolean") return String(this.value);
      return renderLNodeJSXDefault(this, "label", {
        params: this.range ? {
          value: this.value,
          position: this.position
        } : {
          value: this.value
        }
      });
    },
    setTooltipProps() {
      if (this.tooltipProps instanceof Object) {
        const {
          trigger,
          destroyOnClose,
          showArrow,
          overlayInnerStyle,
          overlayClassName,
          attach
        } = this.tooltipProps;
        if (!this.empty(trigger)) this.trigger = trigger;
        this.destroyOnClose = destroyOnClose;
        if (!this.empty(showArrow)) this.showArrow = showArrow;
        this.overlayInnerStyle = overlayInnerStyle;
        this.overlayClassName = overlayClassName;
        if (!this.empty(attach)) this.attach = attach;
      }
    },
    getTooltipProps() {
      if (this.tooltipProps instanceof Object) return this.tooltipProps;
      return {};
    },
    handleIE() {
      if (getIEVersion() <= 11) {
        this.$nextTick(() => {
          this.$el.removeAttribute("disabled");
        });
      }
    },
    showTooltipComponent() {
      this.visible = true;
    },
    hideTooltipComponent() {
      this.visible = false;
    },
    handleMouseEnter() {
      this.hovering = true;
      this.showTooltipComponent();
      this.$refs.button.focus();
    },
    handleMouseLeave() {
      this.hovering = false;
      if (!this.dragging) this.hideTooltipComponent();
    },
    onButtonDown(event) {
      if (this.disabled) return;
      event.preventDefault();
      this.onDragStart(event);
      window.addEventListener("mousemove", this.onDragging);
      window.addEventListener("mouseup", this.onDragEnd);
      window.addEventListener("touchmove", this.onDragging);
      window.addEventListener("touchend", this.onDragEnd);
      window.addEventListener("contextmenu", this.onDragEnd);
    },
    onNativeKeyDown(e) {
      const {
        code
      } = e;
      e.preventDefault();
      if (code === "ArrowDown" || code === "ArrowLeft") this.onKeyDown("sub");
      if (code === "ArrowUp" || code === "ArrowRight") this.onKeyDown("add");
    },
    onLeftKeyDown() {
      this.onKeyDown("sub");
    },
    onRightKeyDown() {
      this.onKeyDown("add");
    },
    onKeyDown(state) {
      if (this.disabled) return;
      let stepLength = this.step / this.rangeDiff * 100;
      if (state === "sub") stepLength = -stepLength;
      this.newPos = parseFloat(this.currentPos) + stepLength;
      this.setPosition(this.newPos);
    },
    onDragStart(event) {
      this.dragging = true;
      this.isClick = true;
      const {
        type
      } = event;
      let {
        clientY,
        clientX
      } = event;
      if (type === "touchstart") {
        const touch = event.touches;
        [clientY, clientX] = [touch[0].clientY, touch[0].clientX];
      }
      if (this.vertical) this.startY = clientY;else this.startX = clientX;
      this.startPos = parseFloat(this.currentPos);
      this.newPos = this.startPos;
    },
    onDragging(e) {
      const event = e;
      if (!this.dragging) return;
      this.isClick = false;
      this.showTooltipComponent();
      this.slider.resetSize();
      let diff = 0;
      const parentSliderSize = this.slider.sliderSize;
      if (this.vertical) {
        this.currentY = event.clientY;
        diff = this.startY - this.currentY;
      } else {
        this.currentX = event.clientX;
        diff = this.currentX - this.startX;
      }
      if (event.type === "touchmove") {
        const touch = event.touches;
        const [clientY, clientX] = [touch[0].clientY, touch[0].clientX];
        this.clientY = clientY;
        this.clientX = clientX;
      }
      diff = diff / parentSliderSize * 100;
      this.newPos = this.startPos + diff;
      this.setPosition(this.newPos);
    },
    onDragEnd() {
      if (this.dragging) {
        setTimeout(() => {
          this.dragging = false;
          this.hideTooltipComponent();
        }, 0);
        window.removeEventListener("mousemove", this.onDragging);
        window.removeEventListener("touchmove", this.onDragging);
        window.removeEventListener("mouseup", this.onDragEnd);
        window.removeEventListener("touchend", this.onDragEnd);
        window.removeEventListener("contextmenu", this.onDragEnd);
      }
    },
    setPosition(pos) {
      let newPos = pos;
      if (newPos === null || isNaN(newPos)) return;
      if (newPos > 100) newPos = 100;else if (newPos < 0) newPos = 0;
      const perStepLen = 100 * this.step / this.rangeDiff;
      const steps = Math.round(newPos / perStepLen);
      let value = steps * perStepLen * this.rangeDiff * 0.01;
      value += this.min;
      value = Number(parseFloat(`${value}`).toFixed(this.precision));
      this.$emit("input", value);
      this.$nextTick(() => {
        this.showTooltipComponent();
        this.$refs.tooltip && this.$refs.tooltip.updatedTooltip();
      });
      if (!this.dragging && this.value !== this.prevValue) this.prevValue = this.value;
    },
    empty(str) {
      return str === void 0 || str === null;
    }
  },
  render() {
    const h = arguments[0];
    return h("div", {
      "ref": "button",
      "class": `${this.componentName}-wrapper`,
      "style": this.wrapperStyle,
      "attrs": {
        "tabindex": "0",
        "show-tooltip": this.showTooltip
      },
      "on": {
        "mouseenter": this.handleMouseEnter,
        "mouseleave": this.handleMouseLeave,
        "mousedown": this.onButtonDown,
        "touchstart": this.onButtonDown,
        "focus": this.handleMouseEnter,
        "blur": this.handleMouseLeave,
        "keydown": this.onNativeKeyDown
      }
    }, [h("l-tooltip", helper([{
      "ref": "tooltip"
    }, {
      "props": this.getTooltipProps()
    }, {
      "attrs": {
        "visible": this.label && this.visible,
        "content": this.getTooltipContent
      }
    }]), [h("div", {
      "class": [this.componentName, {
        [`${this.componentName}--dragging`]: this.dragging
      }]
    })])]);
  }
});

export { LSliderButton as default };
//# sourceMappingURL=button.js.map
