tdesign-vue/lib/slider/slider-button.js

tdesign-vue

/**
 * tdesign v1.14.1
 * (c) 2025 tdesign
 * @license MIT
 */

import { h as helper } from '../_chunks/dep-6a4dc7bb.js';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import Vue from 'vue';
import { Tooltip } from '../tooltip/index.js';
import { getIEVersion } from '../_common/js/utils/helper.js';
import { renderTNodeJSX } from '../utils/render-tnode.js';
import { getClassPrefixMixins } from '../config-provider/config-receiver.js';
import { formatLabel } from '../_common/js/slider/utils.js';
import mixins from '../utils/mixins.js';
import '../tooltip/tooltip.js';
import 'lodash-es';
import '../tooltip/props.js';
import '../popup/props.js';
import '../popup/popup.js';
import '@babel/runtime/helpers/typeof';
import '@popperjs/core';
import '../utils/dom.js';
import 'raf';
import '../utils/easing.js';
import '../utils/helper.js';
import '@babel/runtime/helpers/objectWithoutProperties';
import '@babel/runtime/helpers/slicedToArray';
import '../_common/js/utils/setStyle.js';
import '../popup/container.js';
import '../utils/event.js';
import '../popup/utils.js';
import '@babel/runtime/helpers/readOnlyError';
import '@vue/composition-api';
import '../config-provider/context.js';
import '../_common/js/global-config/default-config.js';
import '../_common/js/global-config/locale/zh_CN.js';
import '../_chunks/dep-ba613a02.js';
import '../_chunks/dep-fdb1b253.js';
import 'dayjs';
import '../_common/js/global-config/t.js';
import '../utils/map-props.js';
import '../utils/withInstall.js';
import '@babel/runtime/helpers/toConsumableArray';

var classPrefixMixins = getClassPrefixMixins("slider__button");
var TSliderButton = mixins(classPrefixMixins, Vue).extend({
  name: "TSliderButton",
  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: function placement() {
      if (this.tooltipProps instanceof Object) {
        var placement = this.tooltipProps.placement;
        if (placement) return placement;
      }
      return this.vertical ? "right" : "top";
    },
    rangeDiff: function rangeDiff() {
      return this.max - this.min;
    },
    disabled: function disabled() {
      return this.slider.disabled;
    },
    max: function max() {
      return this.slider.max;
    },
    min: function min() {
      return this.slider.min;
    },
    step: function step() {
      return this.slider.step;
    },
    precision: function precision() {
      return this.slider.precision;
    },
    currentPos: function currentPos() {
      return "".concat((this.value - this.min) / this.rangeDiff * 100, "%");
    },
    wrapperStyle: function wrapperStyle() {
      return this.vertical ? {
        bottom: this.currentPos
      } : {
        left: this.currentPos
      };
    }
  },
  data: function 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: function disabled() {
      this.handleIE();
    }
  },
  mounted: function mounted() {
    this.showTooltip = !this.tooltipProps === false;
    this.setTooltipProps();
    this.handleIE();
  },
  methods: {
    getTooltipContent: function getTooltipContent() {
      if (this.label === true) return String(this.value);
      if (typeof this.label === "string") return formatLabel(this.label, this.value);
      return renderTNodeJSX(this, "label", {
        params: this.range ? {
          value: this.value,
          position: this.position
        } : {
          value: this.value
        }
      });
    },
    setTooltipProps: function setTooltipProps() {
      if (this.tooltipProps instanceof Object) {
        var _this$tooltipProps = this.tooltipProps,
          trigger = _this$tooltipProps.trigger,
          destroyOnClose = _this$tooltipProps.destroyOnClose,
          showArrow = _this$tooltipProps.showArrow,
          overlayInnerStyle = _this$tooltipProps.overlayInnerStyle,
          overlayClassName = _this$tooltipProps.overlayClassName,
          attach = _this$tooltipProps.attach;
        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: function getTooltipProps() {
      if (this.tooltipProps instanceof Object) {
        return this.tooltipProps;
      }
      return {};
    },
    handleIE: function handleIE() {
      var _this = this;
      if (getIEVersion() <= 11) {
        this.$nextTick(function () {
          _this.$el.removeAttribute("disabled");
        });
      }
    },
    showTooltipComponent: function showTooltipComponent() {
      this.visible = true;
    },
    hideTooltipComponent: function hideTooltipComponent() {
      this.visible = false;
    },
    handleMouseEnter: function handleMouseEnter() {
      this.hovering = true;
      this.showTooltipComponent();
      this.$refs.button.focus();
    },
    handleMouseLeave: function handleMouseLeave() {
      this.hovering = false;
      if (!this.dragging) {
        this.hideTooltipComponent();
      }
    },
    onButtonDown: function 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: function onNativeKeyDown(e) {
      var code = e.code;
      e.preventDefault();
      if (code === "ArrowDown" || code === "ArrowLeft") {
        this.onKeyDown("sub");
      }
      if (code === "ArrowUp" || code === "ArrowRight") {
        this.onKeyDown("add");
      }
    },
    onLeftKeyDown: function onLeftKeyDown() {
      this.onKeyDown("sub");
    },
    onRightKeyDown: function onRightKeyDown() {
      this.onKeyDown("add");
    },
    onKeyDown: function onKeyDown(state) {
      if (this.disabled) {
        return;
      }
      var stepLength = this.step / this.rangeDiff * 100;
      if (state === "sub") {
        stepLength = -stepLength;
      }
      this.newPos = parseFloat(this.currentPos) + stepLength;
      this.setPosition(this.newPos);
    },
    onDragStart: function onDragStart(event) {
      this.dragging = true;
      this.isClick = true;
      var type = event.type;
      var clientY = event.clientY,
        clientX = event.clientX;
      if (type === "touchstart") {
        var touch = event.touches;
        var _ref = [touch[0].clientY, touch[0].clientX];
        clientY = _ref[0];
        clientX = _ref[1];
      }
      if (this.vertical) {
        this.startY = clientY;
      } else {
        this.startX = clientX;
      }
      this.startPos = parseFloat(this.currentPos);
      this.newPos = this.startPos;
    },
    onDragging: function onDragging(e) {
      var event = e;
      if (!this.dragging) {
        return;
      }
      this.isClick = false;
      this.showTooltipComponent();
      this.slider.resetSize();
      var diff = 0;
      var 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") {
        var touch = event.touches;
        var _ref2 = [touch[0].clientY, touch[0].clientX],
          clientY = _ref2[0],
          clientX = _ref2[1];
        this.clientY = clientY;
        this.clientX = clientX;
      }
      diff = diff / parentSliderSize * 100;
      this.newPos = this.startPos + diff;
      this.setPosition(this.newPos);
    },
    onDragEnd: function onDragEnd() {
      var _this2 = this;
      if (this.dragging) {
        setTimeout(function () {
          _this2.dragging = false;
          _this2.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);
        this.$emit("mouseup");
      }
    },
    setPosition: function setPosition(pos) {
      var _this3 = this;
      var newPos = pos;
      if (newPos === null || isNaN(newPos)) {
        return;
      }
      if (newPos > 100) {
        newPos = 100;
      } else if (newPos < 0) {
        newPos = 0;
      }
      var perStepLen = 100 * this.step / this.rangeDiff;
      var steps = Math.round(newPos / perStepLen);
      var value = steps * perStepLen * this.rangeDiff * 0.01;
      value += this.min;
      value = Number(parseFloat("".concat(value)).toFixed(this.precision));
      this.$emit("input", value);
      this.$nextTick(function () {
        _this3.showTooltipComponent();
        _this3.$refs.tooltip && _this3.$refs.tooltip.updatedTooltip();
      });
      if (!this.dragging && this.value !== this.prevValue) {
        this.prevValue = this.value;
      }
    },
    empty: function empty(str) {
      return str === void 0 || str === null;
    }
  },
  render: function render() {
    var h = arguments[0];
    return h("div", {
      "ref": "button",
      "class": "".concat(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(Tooltip, helper([{
      "ref": "tooltip",
      "attrs": {
        "hideEmptyPopup": true
      }
    }, {
      "props": this.getTooltipProps()
    }, {
      "attrs": {
        "visible": this.label && this.visible,
        "content": this.getTooltipContent
      }
    }]), [h("div", {
      "class": [this.componentName, _defineProperty({}, "".concat(this.componentName, "--dragging"), this.dragging)]
    })])]);
  }
});

export { TSliderButton as default };
//# sourceMappingURL=slider-button.js.map