tdesign-mobile-vue
Version:
tdesign-mobile-vue
446 lines (442 loc) • 19.7 kB
JavaScript
/**
* tdesign v1.13.2
* (c) 2026 TDesign Group
* @license MIT
*/
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
import _createClass from '@babel/runtime/helpers/createClass';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { preventDefault } from '../shared/dom.js';
import { usePrefixClass } from '../hooks/useClass.js';
import { findIndexOfEnabledOption, limitNumberInRange } from './utils.js';
import 'lodash-es';
import 'vue';
import '../config-provider/useConfig.js';
import '../config-provider/context.js';
import '../_common/js/global-config/mobile/default-config.js';
import '../_common/js/global-config/mobile/locale/zh_CN.js';
import '../_chunks/dep-4412ff17.js';
import '@babel/runtime/helpers/typeof';
import '../_chunks/dep-8e82f508.js';
import 'dayjs';
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
var classPrefix = usePrefixClass();
var quartEaseOut = function quartEaseOut(t, b, c, d) {
var tempT = t;
return -c * ((tempT = tempT / d - 1) * tempT * tempT * tempT - 1) + b;
};
var DEFAULT_ITEM_HEIGHT = 40;
var DEFAULT_HOLDER_HEIGHT = 200;
var Picker = /*#__PURE__*/function () {
function Picker(options) {
_classCallCheck(this, Picker);
_defineProperty(this, "holder", void 0);
_defineProperty(this, "options", void 0);
_defineProperty(this, "list", null);
_defineProperty(this, "elementItems", []);
_defineProperty(this, "curIndex", 0);
_defineProperty(this, "itemClassName", "");
_defineProperty(this, "itemSelectedClassName", "");
_defineProperty(this, "itemHeight", DEFAULT_ITEM_HEIGHT);
_defineProperty(this, "lastMoveTime", 0);
_defineProperty(this, "lastMoveStart", 0);
_defineProperty(this, "stopInertiaMove", false);
_defineProperty(this, "startY", 0);
_defineProperty(this, "isPicking", false);
_defineProperty(this, "offsetYOfStartBound", 0);
_defineProperty(this, "offsetYOfEndBound", 0);
_defineProperty(this, "offsetY", 0);
_defineProperty(this, "offsetYOfStart", 0);
_defineProperty(this, "offsetYOfEnd", 0);
_defineProperty(this, "curValue", "");
_defineProperty(this, "onChange", void 0);
_defineProperty(this, "itemGroupHeight", DEFAULT_HOLDER_HEIGHT);
_defineProperty(this, "indicatorOffset", 0);
_defineProperty(this, "pickerColumns", void 0);
_defineProperty(this, "inertiaDuration", void 0);
_defineProperty(this, "bounceDuration", void 0);
_defineProperty(this, "transitionDuration", void 0);
_defineProperty(this, "inertiaTimeThreshold", void 0);
_defineProperty(this, "inertiaDistanceThreshold", void 0);
_defineProperty(this, "boundOffset", void 0);
_defineProperty(this, "clickDistanceThreshold", void 0);
_defineProperty(this, "clickTimeThreshold", void 0);
_defineProperty(this, "resizeObserver", null);
_defineProperty(this, "heightInitialized", false);
if (!options.el) throw new Error("options el needed!");
this.holder = options.el;
this.pickerColumns = options.defaultPickerColumns;
this.options = options;
this.onChange = options.onChange;
var wheelConfig = options.wheelConfig;
this.inertiaDuration = wheelConfig.inertiaDuration;
this.bounceDuration = wheelConfig.bounceDuration;
this.transitionDuration = wheelConfig.transitionDuration;
this.inertiaTimeThreshold = wheelConfig.inertiaTimeThreshold;
this.inertiaDistanceThreshold = wheelConfig.inertiaDistanceThreshold;
this.boundOffset = wheelConfig.boundOffset;
this.clickDistanceThreshold = wheelConfig.clickDistanceThreshold;
this.clickTimeThreshold = wheelConfig.clickTimeThreshold;
this.init();
}
return _createClass(Picker, [{
key: "init",
value: function init() {
this.initScrollParams();
this.setSelectedClassName();
this.bindEvent();
this.observeResize();
}
}, {
key: "observeResize",
value: function observeResize() {
var _this = this;
if (typeof ResizeObserver === "undefined") return;
this.resizeObserver = new ResizeObserver(function (entries) {
var _iterator = _createForOfIteratorHelper(entries),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var entry = _step.value;
var height = entry.contentRect.height;
if (height > 0) {
var _this$holder$parentEl;
var newItemHeight = _this.getFirstItemHeight();
var newGroupHeight = ((_this$holder$parentEl = _this.holder.parentElement) === null || _this$holder$parentEl === void 0 ? void 0 : _this$holder$parentEl.offsetHeight) || DEFAULT_HOLDER_HEIGHT;
if (newItemHeight > 0 && newGroupHeight > 0 && (newItemHeight !== _this.itemHeight || newGroupHeight !== _this.itemGroupHeight || !_this.heightInitialized)) {
_this.heightInitialized = true;
_this.recalculateHeights();
_this.updateIndex(_this.curIndex, {
isChange: false,
duration: 0
});
}
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
});
this.resizeObserver.observe(this.holder);
if (this.holder.parentElement) {
this.resizeObserver.observe(this.holder.parentElement);
}
}
}, {
key: "getFirstItemHeight",
value: function getFirstItemHeight() {
var firstItem = this.elementItems[0] || this.holder.querySelector("li");
return (firstItem === null || firstItem === void 0 ? void 0 : firstItem.offsetHeight) || DEFAULT_ITEM_HEIGHT;
}
}, {
key: "updateItems",
value: function updateItems() {
this.elementItems = _toConsumableArray(this.holder.querySelectorAll("li"));
this.recalculateHeights();
}
}, {
key: "recalculateHeights",
value: function recalculateHeights() {
var _this$holder$parentEl2;
var newItemHeight = this.getFirstItemHeight();
var newGroupHeight = ((_this$holder$parentEl2 = this.holder.parentElement) === null || _this$holder$parentEl2 === void 0 ? void 0 : _this$holder$parentEl2.offsetHeight) || DEFAULT_HOLDER_HEIGHT;
if (newItemHeight !== this.itemHeight || newGroupHeight !== this.itemGroupHeight) {
this.itemHeight = newItemHeight;
this.itemGroupHeight = newGroupHeight;
this.indicatorOffset = this.itemGroupHeight / 2 - this.itemHeight / 2;
}
var itemLen = this.elementItems.length;
if (itemLen > 0) {
this.offsetYOfStart = this.indicatorOffset;
this.offsetYOfEnd = this.indicatorOffset - (itemLen - 1) * this.itemHeight;
this.offsetYOfStartBound = this.indicatorOffset + this.boundOffset;
this.offsetYOfEndBound = this.indicatorOffset - (itemLen - 1) * this.itemHeight - this.boundOffset;
}
}
}, {
key: "initScrollParams",
value: function initScrollParams() {
var _this$holder$parentEl3,
_this$elementItems$cu,
_this2 = this;
this.list = this.holder;
this.elementItems = _toConsumableArray(this.holder.querySelectorAll("li"));
this.itemGroupHeight = ((_this$holder$parentEl3 = this.holder.parentElement) === null || _this$holder$parentEl3 === void 0 ? void 0 : _this$holder$parentEl3.offsetHeight) || DEFAULT_HOLDER_HEIGHT;
this.itemHeight = this.getFirstItemHeight();
this.indicatorOffset = this.itemGroupHeight / 2 - this.itemHeight / 2;
this.itemClassName = "".concat(classPrefix.value, "-picker-item__item");
this.itemSelectedClassName = "".concat(classPrefix.value, "-picker-item__item--active");
var curIndex = findIndexOfEnabledOption(this.pickerColumns, this.options.defaultIndex || 0, this.options.keys);
if (curIndex !== (this.options.defaultIndex || 0)) {
this.onChange(curIndex);
}
this.curValue = (_this$elementItems$cu = this.elementItems[curIndex]) === null || _this$elementItems$cu === void 0 ? void 0 : _this$elementItems$cu.textContent;
Object.defineProperty(this, "curIndex", {
set: function set(value) {
var _this2$elementItems$v;
curIndex = value;
_this2.curValue = (_this2$elementItems$v = _this2.elementItems[value]) === null || _this2$elementItems$v === void 0 ? void 0 : _this2$elementItems$v.textContent;
},
get: function get() {
return curIndex;
}
});
var itemLen = this.elementItems.length;
var startOffsetY = this.indicatorOffset - this.curIndex * this.itemHeight;
this.setOffsetY(startOffsetY);
this.offsetYOfStart = this.indicatorOffset;
this.offsetYOfEnd = this.indicatorOffset - (itemLen - 1) * this.itemHeight;
this.offsetYOfStartBound = this.indicatorOffset + this.boundOffset;
this.offsetYOfEndBound = this.indicatorOffset - (itemLen - 1) * this.itemHeight - this.boundOffset;
}
}, {
key: "bindEvent",
value: function bindEvent() {
var _this3 = this;
this.holder.addEventListener("touchstart", function (e) {
return _this3.touchStartHandler(e);
}, false);
this.holder.addEventListener("touchmove", function (e) {
return _this3.touchMoveHandler(e);
}, false);
this.holder.addEventListener("touchend", function (e) {
return _this3.touchEndHandler(e);
}, false);
this.holder.addEventListener("touchcancel", function (e) {
return _this3.touchEndHandler(e);
}, false);
}
}, {
key: "touchStartHandler",
value: function touchStartHandler(event) {
preventDefault(event, false);
this.isPicking = true;
if (!this.holder) return;
if (this.list) this.list.style.transition = "";
this.startY = event.changedTouches[0].pageY;
this.offsetYOfStart = this.offsetY;
this.updateInertiaParams(event, true);
}
}, {
key: "getCount",
value: function getCount() {
return this.pickerColumns.length;
}
}, {
key: "getRange",
value: function getRange() {
var thresholdA = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var thresholdB = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
var min = -(this.getCount() - thresholdA) * this.itemHeight;
var max = thresholdB * this.itemHeight;
return {
min: min,
max: max
};
}
}, {
key: "touchMoveHandler",
value: function touchMoveHandler(event) {
preventDefault(event, false);
if (!this.isPicking || !this.holder) return;
var endY = event.changedTouches[0].pageY;
var dragRange = endY - this.startY;
this.updateInertiaParams(event, false);
var _this$getRange = this.getRange(0, 5),
min = _this$getRange.min,
max = _this$getRange.max;
var moveOffsetY = limitNumberInRange(this.offsetYOfStart + dragRange, min, max);
this.setOffsetY(moveOffsetY);
}
}, {
key: "touchEndHandler",
value: function touchEndHandler(event) {
preventDefault(event, false);
this.isPicking = false;
if (!this.holder) return;
var point = event.changedTouches[0];
var nowTime = event.timeStamp || Date.now();
var moveTime = nowTime - this.lastMoveTime;
var distance = point.pageY - this.lastMoveStart;
var absDistance = Math.abs(distance);
if (absDistance < this.clickDistanceThreshold && moveTime < this.clickTimeThreshold) {
var _this$list;
var li = event.target.closest("li");
if (li && (_this$list = this.list) !== null && _this$list !== void 0 && _this$list.contains(li)) {
var childElements = this.list.children;
var rawIndex = Array.from(childElements).indexOf(li);
var enabledIndex = findIndexOfEnabledOption(this.pickerColumns, rawIndex, this.options.keys);
this.updateIndex(enabledIndex, {
isChange: true
});
return;
}
}
if (moveTime > this.inertiaTimeThreshold || absDistance < this.inertiaDistanceThreshold || !this.inertiaDuration) {
this.stopInertiaMove = false;
this.endScroll();
return;
}
var speed = Math.abs(distance / moveTime);
var dist = this.offsetY + speed / 5e-3 * (distance < 0 ? -1 : 1);
var _this$getRange2 = this.getRange(3, 2),
min = _this$getRange2.min,
max = _this$getRange2.max;
dist = limitNumberInRange(dist, min, max);
if (dist === 0) {
this.stopInertiaMove = false;
this.endScroll();
return;
}
this.scrollDist(this.offsetY, dist, this.inertiaDuration);
}
}, {
key: "updateInertiaParams",
value: function updateInertiaParams(event, isStart) {
var point = event.changedTouches[0];
if (isStart) {
this.lastMoveStart = point.pageY;
this.lastMoveTime = event.timeStamp || Date.now();
}
this.stopInertiaMove = true;
}
}, {
key: "scrollDist",
value: function scrollDist(startOffsetY, dist, duration) {
var _this4 = this;
this.stopInertiaMove = false;
var start = null;
var _inertiaMove = function inertiaMove(timestamp) {
if (_this4.stopInertiaMove) {
return;
}
if (!start) start = timestamp;
var progress = timestamp - start;
var newOffsetY = quartEaseOut(progress, startOffsetY, dist - startOffsetY, duration);
_this4.setOffsetY(newOffsetY);
if (progress > duration || newOffsetY > _this4.offsetYOfStartBound || newOffsetY < _this4.offsetYOfEndBound) {
_this4.endScroll();
} else {
window.requestAnimationFrame(_inertiaMove);
}
};
window.requestAnimationFrame(_inertiaMove);
}
}, {
key: "update",
value: function update(options) {
var _this5 = this;
this.updateItems();
var targetIndex = this.elementItems.findIndex(function (el) {
return el.textContent === _this5.curValue;
});
var updateIndex = targetIndex === -1 ? 0 : targetIndex;
this.updateIndex(updateIndex, options);
}
}, {
key: "updateIndex",
value: function updateIndex(index, options) {
var realOptions = _objectSpread({
duration: this.transitionDuration,
isChange: true
}, options);
this.curIndex = index;
this.setSelectedClassName();
var moveOffsetY = this.indicatorOffset - index * this.itemHeight;
if (this.list) {
this.list.style.transform = "translate(0,".concat(moveOffsetY, "px) translateZ(0)");
this.list.style.transitionDuration = "".concat(realOptions.duration, "ms");
this.list.style.transitionTimingFunction = "ease-out";
}
this.offsetY = moveOffsetY;
this.offsetYOfStart = moveOffsetY;
realOptions.isChange && this.onChange(index);
}
}, {
key: "updateOptions",
value: function updateOptions() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
this.pickerColumns = options;
}
}, {
key: "getCurIndex",
value: function getCurIndex() {
return this.curIndex;
}
}, {
key: "setSelectedClassName",
value: function setSelectedClassName() {
var _this6 = this;
var regClass = new RegExp(this.itemClassName, "i");
var regSelected = new RegExp(this.itemSelectedClassName, "i");
this.elementItems.forEach(function (item, i) {
var tempItem = item;
var itemClass = tempItem.className;
if (itemClass === "" || !itemClass) {
tempItem.className = _this6.itemClassName;
} else {
if (!regClass.test(itemClass)) {
tempItem.classList.add(_this6.itemClassName);
}
if (regSelected.test(itemClass)) {
tempItem.classList.remove(_this6.itemSelectedClassName);
}
}
if (_this6.curIndex === i) {
tempItem.classList.add(_this6.itemSelectedClassName);
}
});
}
}, {
key: "setOffsetY",
value: function setOffsetY(offsetY) {
this.offsetY = offsetY;
if (this.list) {
this.list.style.transform = "translate3d(0, ".concat(offsetY, "px, 0)");
}
}
}, {
key: "endScroll",
value: function endScroll() {
if (this.stopInertiaMove) return;
if (this.list) {
this.list.style.transition = "".concat(this.bounceDuration, "ms ease-out");
}
var curIndex = 0;
if (this.offsetY > this.offsetYOfStartBound) {
curIndex = 0;
} else if (this.offsetY < this.offsetYOfEndBound) {
curIndex = this.elementItems.length - 1;
} else {
curIndex = -Math.round((this.offsetY - this.indicatorOffset) / this.itemHeight);
curIndex = Math.max(0, Math.min(curIndex, this.elementItems.length - 1));
}
curIndex = findIndexOfEnabledOption(this.pickerColumns, curIndex, this.options.keys);
var offsetY = this.indicatorOffset - curIndex * this.itemHeight;
this.setOffsetY(offsetY);
if (curIndex !== this.curIndex) {
this.curIndex = curIndex;
this.setSelectedClassName();
this.onChange(this.curIndex);
}
}
}, {
key: "destroy",
value: function destroy() {
if (this.resizeObserver) {
this.resizeObserver.disconnect();
this.resizeObserver = null;
}
delete this.holder;
}
}]);
}();
export { DEFAULT_ITEM_HEIGHT, Picker as default };
//# sourceMappingURL=picker.class.js.map