tdesign-mobile-vue
Version:
tdesign-mobile-vue
371 lines (363 loc) • 18.6 kB
JavaScript
/**
* tdesign v1.7.0
* (c) 2024 TDesign Group
* @license MIT
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var vue = require('vue');
var isFunction = require('lodash/isFunction');
var core = require('@vueuse/core');
var config = require('../config.js');
var slider_props = require('./props.js');
var shared_useVModel_index = require('../shared/useVModel/index.js');
var slider_tool = require('./tool.js');
var form_hooks = require('../form/hooks.js');
var hooks_useClass = require('../hooks/useClass.js');
require('lodash/kebabCase');
require('lodash/isBoolean');
require('../config-provider/useConfig.js');
require('lodash/cloneDeep');
require('lodash/isString');
require('../config-provider/context.js');
require('lodash/mergeWith');
require('lodash/merge');
require('lodash/isArray');
require('../_common/js/global-config/mobile/default-config.js');
require('../_common/js/global-config/mobile/locale/zh_CN.js');
require('../_chunks/dep-8d930798.js');
require('@babel/runtime/helpers/typeof');
require('../_chunks/dep-a20a5149.js');
require('dayjs');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
var isFunction__default = /*#__PURE__*/_interopDefaultLegacy(isFunction);
var prefix = config["default"].prefix;
var _Slider = vue.defineComponent({
name: "".concat(prefix, "-slider"),
props: slider_props["default"],
setup: function setup(props2) {
var sliderClass = hooks_useClass.usePrefixClass("slider");
var isDisabled = form_hooks.useFormDisabled();
var sliderLine = vue.ref();
var leftDot = vue.ref();
var rightDot = vue.ref();
var state = vue.reactive({
initialLeft: 0,
initialRight: 0,
maxRange: 0,
lineLeft: 0,
lineRight: 0,
dotTopValue: [0, 0],
blockSize: 20,
isScale: false,
scaleArray: [],
scaleTextArray: []
});
var defaultValue = props2.defaultValue || props2.min;
var _toRefs = vue.toRefs(props2),
value = _toRefs.value,
modelValue = _toRefs.modelValue;
var _useVModel = shared_useVModel_index.useVModel(value, modelValue, defaultValue, props2.onChange),
_useVModel2 = _slicedToArray__default["default"](_useVModel, 2),
innerValue = _useVModel2[0],
setInnerValue = _useVModel2[1];
var scope = vue.computed(function () {
return Number(props2.max) - Number(props2.min);
});
vue.watch(function () {
return innerValue.value;
}, function (val) {
if (props2.range) {
var left = state.maxRange * (val[0] - props2.min) / scope.value;
var right = state.maxRange * (props2.max - val[1]) / scope.value;
setLineStyle(left, right);
} else {
setSingleBarWidth(val);
}
});
var rootRef = vue.ref();
var classes = vue.computed(function () {
return ["".concat(sliderClass.value), _defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"]({}, "".concat(sliderClass.value, "--top"), props2.label || state.scaleTextArray.length), "".concat(sliderClass.value, "--disabled"), isDisabled.value), "".concat(sliderClass.value, "--range"), props2.range)];
});
var sliderLineClasses = vue.computed(function () {
return ["".concat(sliderClass.value, "__bar"), "".concat(sliderClass.value, "__bar--").concat(props2.theme), _defineProperty__default["default"](_defineProperty__default["default"]({}, "".concat(sliderClass.value, "__bar--disabled"), isDisabled.value), "".concat(sliderClass.value, "__bar--marks"), state.isScale && props2.theme === "capsule")];
});
var precision = vue.computed(function () {
var precisions = [props2.min, props2.max, props2.step].map(function (item) {
var decimalArr = "".concat(item).split(".");
return decimalArr[1] ? decimalArr[1].length : 0;
});
return Math.max.apply(null, precisions);
});
var lineBarWidth = vue.ref();
var setSingleBarWidth = function setSingleBarWidth(value2) {
var halfBlock = props2.theme === "capsule" ? Number(state.blockSize) / 2 : 0;
var percentage = (Number(value2) - props2.min) / scope.value;
lineBarWidth.value = percentage * state.maxRange + halfBlock;
};
var setLineStyle = function setLineStyle(left, right) {
var halfBlock = props2.theme === "capsule" ? Number(state.blockSize) / 2 : 0;
var _innerValue$value = _slicedToArray__default["default"](innerValue.value, 2),
a = _innerValue$value[0],
b = _innerValue$value[1];
var cut = function cut(v) {
return parseInt(v, 10);
};
state.dotTopValue = [a, b];
if (left + right <= state.maxRange) {
state.lineLeft = cut(left + halfBlock);
state.lineRight = cut(right + halfBlock);
} else {
state.lineLeft = cut(state.maxRange + halfBlock - right);
state.lineRight = cut(state.maxRange - left + halfBlock * 1.5);
}
};
var getInitialStyle = function getInitialStyle() {
var _sliderLine$value;
var line = (_sliderLine$value = sliderLine.value) === null || _sliderLine$value === void 0 ? void 0 : _sliderLine$value.getBoundingClientRect();
var halfBlock = Number(state.blockSize) / 2;
var maxRange = line.right - line.left;
state.maxRange = maxRange;
state.initialLeft = line.left;
state.initialRight = line.right;
if (props2.theme === "capsule") {
state.maxRange = maxRange - Number(state.blockSize) - 6;
state.initialLeft -= halfBlock;
state.initialRight -= halfBlock;
}
};
var onTouchEnd = function onTouchEnd() {};
var onSingleDotMove = function onSingleDotMove(e) {
if (isDisabled.value) return;
var _e$changedTouches = _slicedToArray__default["default"](e.changedTouches, 1),
pageX = _e$changedTouches[0].pageX;
var value2 = convertPosToValue(pageX - state.initialLeft);
changeValue(calcByStep(value2));
};
var changeValue = function changeValue(value2) {
setInnerValue(slider_tool.trimValue(value2, props2));
};
var calcByStep = function calcByStep(value2) {
if (props2.step < 0 || props2.step > scope.value) return Number(parseFloat("".concat(value2)).toFixed(precision.value));
var closestStep = slider_tool.trimSingleValue(Math.round(value2 / props2.step) * props2.step, props2.min, props2.max);
return Number(parseFloat("".concat(closestStep)).toFixed(precision.value));
};
var getValue = function getValue(label, value2) {
var REGEXP = /[$][{value}]{7}/;
if (isFunction__default["default"](label)) return label(value2);
if (label && label === "true") return value2;
if (REGEXP.test(label)) return label.replace(REGEXP, value2);
};
var handleMask = function handleMask(marks) {
var calcPos = function calcPos(arr) {
var margin = props2.theme === "capsule" ? state.blockSize / 2 : 0;
return arr.map(function (item) {
return {
val: item,
left: Math.round((item - props2.min) / scope.value * state.maxRange) + margin
};
});
};
if (marks !== null && marks !== void 0 && marks.length && Array.isArray(marks)) {
state.isScale = true;
state.scaleArray = calcPos(marks);
state.scaleTextArray = [];
}
if (Object.prototype.toString.call(marks) === "[object Object]") {
var scaleArray = Object.keys(marks).map(function (item) {
return Number(item);
});
var scaleTextArray = scaleArray.map(function (item) {
return marks[item];
});
state.isScale = scaleArray.length > 0;
state.scaleArray = calcPos(scaleArray);
state.scaleTextArray = scaleTextArray;
}
};
var convertPosToValue = function convertPosToValue(posValue) {
var isLeft = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var raw = isLeft ? posValue / state.maxRange * scope.value + props2.min : props2.max - posValue / state.maxRange * scope.value;
return raw;
};
var onTouchMoveLeft = function onTouchMoveLeft(e) {
if (isDisabled.value) return;
var _e$changedTouches2 = _slicedToArray__default["default"](e.changedTouches, 1),
pageX = _e$changedTouches2[0].pageX;
var currentLeft = pageX - state.initialLeft;
var newData = _toConsumableArray__default["default"](innerValue.value);
var leftValue = convertPosToValue(currentLeft);
newData[0] = calcByStep(leftValue);
changeValue(newData);
};
var onTouchMoveRight = function onTouchMoveRight(e) {
if (isDisabled.value) return;
var _e$changedTouches3 = _slicedToArray__default["default"](e.changedTouches, 1),
pageX = _e$changedTouches3[0].pageX;
var currentRight = -(pageX - state.initialRight);
var newData = _toConsumableArray__default["default"](innerValue.value);
var rightValue = convertPosToValue(currentRight, false);
newData[1] = calcByStep(rightValue);
changeValue(newData);
};
var handleSingleClick = function handleSingleClick(e) {
e.stopPropagation();
if (isDisabled.value) return;
if (!sliderLine.value) return;
var currentLeft = e.clientX - state.initialLeft;
var value2 = convertPosToValue(currentLeft);
changeValue(calcByStep(value2));
};
var handleRangeClick = function handleRangeClick(e) {
var _leftDot$value, _rightDot$value;
e.stopPropagation();
if (isDisabled.value) return;
var halfBlock = props2.theme === "capsule" ? Number(state.blockSize) / 2 : 0;
var currentLeft = e.clientX - state.initialLeft;
if (currentLeft < 0 || currentLeft > state.maxRange + Number(state.blockSize)) return;
var leftDotValue = (_leftDot$value = leftDot.value) === null || _leftDot$value === void 0 ? void 0 : _leftDot$value.getBoundingClientRect();
var rightDotValue = (_rightDot$value = rightDot.value) === null || _rightDot$value === void 0 ? void 0 : _rightDot$value.getBoundingClientRect();
var distanceLeft = Math.abs(e.clientX - leftDotValue.left - halfBlock);
var distanceRight = Math.abs(rightDotValue.left - e.clientX + halfBlock);
var isMoveLeft = distanceLeft < distanceRight;
if (isMoveLeft) {
var _innerValue$value2;
var left = e.clientX - state.initialLeft;
var leftValue = convertPosToValue(left);
changeValue([calcByStep(leftValue), (_innerValue$value2 = innerValue.value) === null || _innerValue$value2 === void 0 ? void 0 : _innerValue$value2[1]]);
} else {
var _innerValue$value3;
var right = -(e.clientX - state.initialRight);
var rightValue = convertPosToValue(right, false);
changeValue([(_innerValue$value3 = innerValue.value) === null || _innerValue$value3 === void 0 ? void 0 : _innerValue$value3[0], calcByStep(rightValue)]);
}
};
vue.onMounted(function () {
init();
});
var _useIntersectionObser = core.useIntersectionObserver(rootRef, function (_ref3, observerElement) {
var _ref4 = _slicedToArray__default["default"](_ref3, 1),
isIntersecting = _ref4[0].isIntersecting;
if (isIntersecting) {
stop();
init();
}
}),
stop = _useIntersectionObser.stop;
var init = function init() {
getInitialStyle();
if (props2.range) {
var _innerValue$value$, _innerValue$value4;
var left = state.maxRange * ((_innerValue$value$ = (_innerValue$value4 = innerValue.value) === null || _innerValue$value4 === void 0 ? void 0 : _innerValue$value4[0]) !== null && _innerValue$value$ !== void 0 ? _innerValue$value$ : 0 - props2.min) / scope.value;
var right = state.maxRange * (props2.max - innerValue.value[1]) / scope.value;
setLineStyle(left, right);
} else {
setSingleBarWidth(innerValue.value);
}
if (props2.marks) {
handleMask(props2.marks);
}
};
var readerMinText = function readerMinText() {
if (!props2.showExtremeValue) {
return null;
}
var textClass = _defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"]({}, "".concat(sliderClass.value, "__value"), !props2.range), "".concat(sliderClass.value, "__value--min"), !props2.range), "".concat(sliderClass.value, "__range-extreme"), props2.range), "".concat(sliderClass.value, "__range-extreme--min"), props2.range);
if (props2.range) {
return vue.createVNode("text", {
"class": textClass
}, [props2.min]);
}
return vue.createVNode("text", {
"class": textClass
}, [props2.label ? getValue(props2.label, props2.min) : props2.min]);
};
var readerMaxText = function readerMaxText() {
if (!props2.showExtremeValue) {
return null;
}
var textClass = ["".concat(sliderClass.value, "__value"), "".concat(sliderClass.value, "__value--max")];
if (props2.range) {
return vue.createVNode("text", {
"class": textClass
}, [props2.max]);
}
return vue.createVNode("text", {
"class": textClass
}, [props2.label ? getValue(props2.label, props2.max) : props2.max]);
};
var readerScale = function readerScale() {
if (!state.isScale) {
return null;
}
return state.scaleArray.map(function (item, index) {
return vue.createVNode("div", {
"style": "left: ".concat(item.left, "px; transform: translateX(-50%);"),
"class": ["".concat(sliderClass.value, "__scale-item"), "".concat(sliderClass.value, "__scale-item--").concat(props2.theme), _defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"]({}, "".concat(sliderClass.value, "__scale-item--active"), !props2.range && Number(innerValue.value) >= item.val), "".concat(sliderClass.value, "__scale-item--active"), props2.range && state.dotTopValue[1] >= item.val && item.val >= state.dotTopValue[0]), "".concat(sliderClass.value, "__scale-item--disabled"), isDisabled.value), "".concat(sliderClass.value, "__scale-item--hidden"), (index === 0 || index === state.scaleArray.length - 1) && props2.theme === "capsule" || innerValue.value === item.val)]
}, [state.scaleTextArray.length && vue.createVNode("div", {
"class": ["".concat(sliderClass.value, "__scale-desc"), "".concat(sliderClass.value, "__scale-desc--").concat(props2.theme)]
}, [state.scaleTextArray[index]])]);
});
};
var readerLineSingle = function readerLineSingle() {
return vue.createVNode("div", {
"class": ["".concat(sliderClass.value, "__line"), "".concat(sliderClass.value, "__line--").concat(props2.theme), "".concat(sliderClass.value, "__line--single"), _defineProperty__default["default"]({}, "".concat(sliderClass.value, "__line--disabled"), isDisabled.value)],
"style": "width: ".concat(lineBarWidth.value, "px")
}, [vue.createVNode("div", {
"ref": "singleDot",
"class": "".concat(sliderClass.value, "__dot"),
"onTouchmove": onSingleDotMove,
"onTouchend": onTouchEnd,
"onTouchcancel": onTouchEnd
}, [props2.label && vue.createVNode("div", {
"class": ["".concat(sliderClass.value, "__dot-value"), _defineProperty__default["default"]({}, "".concat(sliderClass.value, "__dot-value--sr-only"), !props2.label)]
}, [getValue(props2.label, innerValue.value) || innerValue.value]), vue.createVNode("div", {
"class": "".concat(sliderClass.value, "__dot-slider")
}, null)])]);
};
var readerLineRange = function readerLineRange() {
return vue.createVNode("div", {
"class": ["".concat(sliderClass.value, "__line"), "".concat(sliderClass.value, "__line--").concat(props2.theme), _defineProperty__default["default"]({}, "".concat(sliderClass.value, "__line--disabled"), isDisabled.value)],
"style": "left: ".concat(state.lineLeft, "px; right: ").concat(state.lineRight, "px")
}, [vue.createVNode("div", {
"ref": leftDot,
"class": ["".concat(sliderClass.value, "__dot"), "".concat(sliderClass.value, "__dot--left")],
"onTouchmove": onTouchMoveLeft,
"onTouchend": onTouchEnd,
"onTouchcancel": onTouchEnd
}, [props2.label && vue.createVNode("div", {
"class": ["".concat(sliderClass.value, "__dot-value"), _defineProperty__default["default"]({}, "".concat(sliderClass.value, "__dot-value--sr-only"), !props2.label)]
}, [getValue(props2.label, state.dotTopValue[0]) || state.dotTopValue[0]]), vue.createVNode("div", {
"class": "".concat(sliderClass.value, "__dot-slider")
}, null)]), vue.createVNode("div", {
"ref": rightDot,
"class": ["".concat(sliderClass.value, "__dot"), "".concat(sliderClass.value, "__dot--right")],
"onTouchmove": onTouchMoveRight,
"onTouchend": onTouchEnd,
"onTouchcancel": onTouchEnd
}, [props2.label && vue.createVNode("div", {
"class": ["".concat(sliderClass.value, "__dot-value"), _defineProperty__default["default"]({}, "".concat(sliderClass.value, "__dot-value--sr-only"), !props2.label)]
}, [getValue(props2.label, state.dotTopValue[1]) || state.dotTopValue[1]]), vue.createVNode("div", {
"class": "".concat(sliderClass.value, "__dot-slider")
}, null)])]);
};
return function () {
return vue.createVNode("div", {
"ref": rootRef,
"class": classes.value
}, [readerMinText(), vue.createVNode("div", {
"ref": sliderLine,
"class": sliderLineClasses.value,
"onClick": props2.range ? handleRangeClick : handleSingleClick
}, [readerScale(), props2.range ? readerLineRange() : readerLineSingle()]), readerMaxText()]);
};
}
});
exports["default"] = _Slider;
//# sourceMappingURL=slider.js.map