tdesign-vue
Version:
435 lines (427 loc) • 13.5 kB
JavaScript
/**
* tdesign v1.11.2
* (c) 2025 tdesign
* @license MIT
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var helper = require('../_chunks/dep-ece3c062.js');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var Vue = require('vue');
var tooltip_index = require('../tooltip/index.js');
var _common_js_utils_helper = require('../_common/js/utils/helper.js');
var utils_renderTnode = require('../utils/render-tnode.js');
var configProvider_configReceiver = require('../config-provider/config-receiver.js');
var _common_js_slider_utils = require('../_common/js/slider/utils.js');
var utils_mixins = require('../utils/mixins.js');
require('../tooltip/tooltip.js');
require('../tooltip/props.js');
require('../popup/props.js');
require('../popup/popup.js');
require('@babel/runtime/helpers/typeof');
require('@popperjs/core');
require('../utils/dom.js');
require('raf');
require('../utils/easing.js');
require('../_chunks/dep-738b4f21.js');
require('../_chunks/dep-a4308f57.js');
require('../_chunks/dep-fcf0662d.js');
require('../_chunks/dep-e4278c54.js');
require('../utils/helper.js');
require('@babel/runtime/helpers/objectWithoutProperties');
require('@babel/runtime/helpers/slicedToArray');
require('../_chunks/dep-7c854ec6.js');
require('../_chunks/dep-eceed11d.js');
require('../_chunks/dep-201f7798.js');
require('../_chunks/dep-d3015b4c.js');
require('../_chunks/dep-f8a85d6a.js');
require('../_chunks/dep-5b117689.js');
require('../_chunks/dep-6478392e.js');
require('../_common/js/utils/setStyle.js');
require('../popup/container.js');
require('../_chunks/dep-ecccff93.js');
require('../_chunks/dep-a4cecac4.js');
require('../utils/event.js');
require('../popup/utils.js');
require('../_chunks/dep-f3761329.js');
require('../_chunks/dep-848a5a32.js');
require('@babel/runtime/helpers/readOnlyError');
require('@vue/composition-api');
require('../_chunks/dep-47bca35e.js');
require('../_chunks/dep-07fb8c0e.js');
require('../_common/js/global-config/default-config.js');
require('../_common/js/global-config/locale/zh_CN.js');
require('../_chunks/dep-a4a18104.js');
require('../_chunks/dep-27dd8cc6.js');
require('dayjs');
require('../_chunks/dep-87c765cc.js');
require('../_chunks/dep-75cd6d52.js');
require('../_chunks/dep-b1a02818.js');
require('../_chunks/dep-3d8ab37d.js');
require('../_chunks/dep-ab142eaf.js');
require('../_chunks/dep-6ad3de7c.js');
require('../_chunks/dep-8b1e056e.js');
require('../_chunks/dep-5db8defc.js');
require('../_chunks/dep-6e4c473c.js');
require('../_chunks/dep-234b7c02.js');
require('../_chunks/dep-a4747856.js');
require('../_chunks/dep-932dd69e.js');
require('../_chunks/dep-9f4caea4.js');
require('../_chunks/dep-dbd838d6.js');
require('../_chunks/dep-b3120c1b.js');
require('../_chunks/dep-68ba2357.js');
require('../_chunks/dep-173eb46c.js');
require('../utils/map-props.js');
require('../utils/withInstall.js');
require('@babel/runtime/helpers/toConsumableArray');
require('../_chunks/dep-62de1188.js');
require('../_chunks/dep-867c284e.js');
require('../_chunks/dep-aa0a4aac.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var Vue__default = /*#__PURE__*/_interopDefaultLegacy(Vue);
var classPrefixMixins = configProvider_configReceiver.getClassPrefixMixins("slider__button");
var TSliderButton = utils_mixins["default"](classPrefixMixins, Vue__default["default"]).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 _common_js_slider_utils.formatLabel(this.label, this.value);
return utils_renderTnode.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 (_common_js_utils_helper.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_index.Tooltip, helper.helper([{
"ref": "tooltip",
"attrs": {
"hideEmptyPopup": true
}
}, {
"props": this.getTooltipProps()
}, {
"attrs": {
"visible": this.label && this.visible,
"content": this.getTooltipContent
}
}]), [h("div", {
"class": [this.componentName, _defineProperty__default["default"]({}, "".concat(this.componentName, "--dragging"), this.dragging)]
})])]);
}
});
exports["default"] = TSliderButton;
//# sourceMappingURL=slider-button.js.map