tdesign-mobile-vue
Version:
tdesign-mobile-vue
301 lines (293 loc) • 12.2 kB
JavaScript
/**
* tdesign v1.13.2
* (c) 2026 TDesign Group
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var Vue = require('vue');
var shared_dom = require('../shared/dom.js');
var config = require('../config.js');
var indexes_props = require('./props.js');
var hooks_useClass = require('../hooks/useClass.js');
var hooks_tnode = require('../hooks/tnode.js');
var hooks_useVModel = require('../hooks/useVModel.js');
var throttle = require('../_chunks/dep-a671dca3.js');
require('../_chunks/dep-abe9931d.js');
require('../_chunks/dep-d16bf091.js');
require('@babel/runtime/helpers/typeof');
require('../_chunks/dep-c041cd95.js');
require('../_chunks/dep-db763263.js');
require('../_chunks/dep-c6554877.js');
require('../_chunks/dep-a8725fec.js');
require('../_chunks/dep-ede0b0a5.js');
require('@babel/runtime/helpers/defineProperty');
require('../_chunks/dep-dafca6f5.js');
require('../_common/js/global-config/mobile/default-config.js');
require('../_common/js/global-config/mobile/locale/zh_CN.js');
require('../_chunks/dep-88b647f4.js');
require('../_chunks/dep-f339c931.js');
require('dayjs');
require('../_chunks/dep-89205991.js');
require('../_chunks/dep-082c7326.js');
require('../_chunks/dep-591548d1.js');
require('../_chunks/dep-a9fd9906.js');
require('../_chunks/dep-a837a88d.js');
require('../_chunks/dep-d2416277.js');
require('../_chunks/dep-4a0acbaa.js');
require('../_chunks/dep-f5894bc3.js');
require('../_chunks/dep-d404c733.js');
require('../_chunks/dep-bd009758.js');
require('../_chunks/dep-83213f5d.js');
require('../_chunks/dep-412d3c4b.js');
require('../_chunks/dep-644f5d6a.js');
require('../_chunks/dep-933759bc.js');
require('../_chunks/dep-a625ee7d.js');
require('../_chunks/dep-e49294a5.js');
require('../_chunks/dep-a1831458.js');
require('../hooks/render-tnode.js');
require('../_chunks/dep-88660f08.js');
require('../_chunks/dep-bcc78903.js');
require('../_chunks/dep-e1cc657b.js');
require('../_chunks/dep-a58ecafb.js');
require('../_chunks/dep-04cf2308.js');
require('../_chunks/dep-ea3a180f.js');
require('../_chunks/dep-016f6f84.js');
require('../_chunks/dep-671f1b66.js');
require('../_common/js/utils/general.js');
require('../_chunks/dep-d0d5a960.js');
require('../_chunks/dep-d48150eb.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
var prefix = config["default"].prefix;
var _Indexes = Vue.defineComponent({
name: "".concat(prefix, "-indexes"),
props: indexes_props["default"],
emits: ["select", "change", "update:current"],
setup: function setup(props) {
var _toRefs = Vue.toRefs(props),
current = _toRefs.current,
modelValue = _toRefs.modelValue;
var readerTNodeJSX = hooks_tnode.useTNodeJSX();
var indexesClass = hooks_useClass.usePrefixClass("indexes");
var _useVModel = hooks_useVModel["default"](current, modelValue, props.defaultCurrent, function () {}, "current"),
_useVModel2 = _slicedToArray__default["default"](_useVModel, 2),
currentIndex = _useVModel2[0],
setCurrentIndex = _useVModel2[1];
var timeOut;
var indexesRoot = Vue.ref();
var parentRect = Vue.ref();
var state = Vue.reactive({
showSidebarTip: false,
activeSidebar: "",
children: []
});
var groupTop = [];
var indexList = Vue.computed(function () {
if (!props.indexList) {
var start = "A".charCodeAt(0);
var alphabet = [];
for (var i = start, end = start + 26; i < end; i += 1) {
alphabet.push(String.fromCharCode(i));
}
return alphabet;
}
return props.indexList;
});
var setAnchorOnScroll = function setAnchorOnScroll(scrollTop) {
if (!groupTop.length) return;
var sticky = props.sticky,
stickyOffset = props.stickyOffset;
var stickyTop = stickyOffset + parentRect.value.top;
scrollTop += stickyTop;
var curIndex = groupTop.findIndex(function (group) {
return scrollTop >= group.top - group.height && scrollTop <= group.top + group.totalHeight - group.height;
});
state.activeSidebar = groupTop[0].anchor;
if (curIndex === -1) return;
state.activeSidebar = groupTop[curIndex].anchor;
var curGroup = groupTop[curIndex];
setCurrentIndex(curGroup.anchor);
if (sticky) {
var offset = curGroup.top - scrollTop;
var betwixt = offset < curGroup.height && offset > 0 && scrollTop > stickyTop;
state.children.forEach(function (child, index) {
var $el = child.$el;
var wrapperClass = "".concat(indexesClass.value, "-anchor__wrapper");
var headerClass = "".concat(indexesClass.value, "-anchor__header");
var wrapper = $el.querySelector(".".concat(wrapperClass));
var header = $el.querySelector(".".concat(headerClass));
if (index === curIndex) {
if (scrollTop - parentRect.value.top > stickyOffset) {
wrapper.classList.add("".concat(wrapperClass, "--sticky"));
} else {
wrapper.classList.remove("".concat(wrapperClass, "--sticky"));
}
wrapper.classList.add("".concat(wrapperClass, "--active"));
header.classList.add("".concat(headerClass, "--active"));
wrapper.style = "transform: translate3d(0, ".concat(betwixt ? offset : 0, "px, 0); top: ").concat(stickyTop, "px");
} else if (index + 1 === curIndex) {
wrapper.classList.add("".concat(wrapperClass, "--sticky"));
wrapper.classList.add("".concat(wrapperClass, "--active"));
header.classList.add("".concat(headerClass, "--active"));
wrapper.style = "transform: translate3d(0, ".concat(betwixt ? offset - groupTop[index].height : 0, "px, 0); top: ").concat(stickyTop, "px;");
} else {
wrapper.classList.remove("".concat(wrapperClass, "--sticky"));
wrapper.classList.remove("".concat(wrapperClass, "--active"));
header.classList.remove("".concat(headerClass, "--active"));
wrapper.style = "";
}
});
}
};
var scrollToByIndex = function scrollToByIndex(index) {
var curGroup = groupTop.find(function (item) {
return item.anchor === index;
});
if (indexesRoot.value && curGroup) {
var _indexesRoot$value$sc, _indexesRoot$value, _curGroup$top;
(_indexesRoot$value$sc = (_indexesRoot$value = indexesRoot.value).scrollTo) === null || _indexesRoot$value$sc === void 0 || _indexesRoot$value$sc.call(_indexesRoot$value, 0, (_curGroup$top = curGroup.top) !== null && _curGroup$top !== void 0 ? _curGroup$top : 0);
setCurrentIndex(index);
}
};
var setActiveSidebarAndTip = function setActiveSidebarAndTip(index) {
state.activeSidebar = index;
state.showSidebarTip = true;
};
var handleSidebarItemClick = function handleSidebarItemClick(index) {
var _props$onSelect;
(_props$onSelect = props.onSelect) === null || _props$onSelect === void 0 || _props$onSelect.call(props, index);
setActiveSidebarAndTip(index);
scrollToByIndex(index);
};
var handleRootScroll = throttle.throttle(function (e) {
var _indexesRoot$value$sc2, _indexesRoot$value2;
var scrollTop = (_indexesRoot$value$sc2 = (_indexesRoot$value2 = indexesRoot.value) === null || _indexesRoot$value2 === void 0 ? void 0 : _indexesRoot$value2.scrollTop) !== null && _indexesRoot$value$sc2 !== void 0 ? _indexesRoot$value$sc2 : 0;
setAnchorOnScroll(scrollTop);
}, 1e3 / 30);
var clearSidebarTip = function clearSidebarTip() {
if (state.showSidebarTip && state.activeSidebar) {
timeOut && clearTimeout(timeOut);
timeOut = window.setTimeout(function () {
state.showSidebarTip = false;
}, 1e3);
}
};
var getAnchorsRect = function getAnchorsRect() {
return Promise.all(state.children.map(function (child) {
var $el = child.$el,
index = child.index;
var rect = $el.getBoundingClientRect();
groupTop.push({
height: rect.height,
top: rect.top - parentRect.value.top,
anchor: index,
totalHeight: 0
});
return child;
}));
};
var handleSidebarTouchmove = function handleSidebarTouchmove(event) {
shared_dom.preventDefault(event, false);
var touches = event.touches;
var _touches$ = touches[0],
clientX = _touches$.clientX,
clientY = _touches$.clientY;
var target = document.elementFromPoint(clientX, clientY);
if (target && target.className === "".concat(indexesClass.value, "__sidebar-item") && target instanceof HTMLElement) {
var index = target.dataset.index;
var curIndex = indexList.value.find(function (idx) {
return String(idx) === index;
});
if (curIndex !== void 0 && state.activeSidebar !== curIndex) {
setActiveSidebarAndTip(curIndex);
scrollToByIndex(curIndex);
}
}
};
var relation = function relation(child) {
child && state.children.push(child);
};
var unRelation = function unRelation(child) {
var index = state.children.indexOf(child);
if (index > -1) {
state.children.splice(index, 1);
}
};
Vue.watchEffect(function () {
if (state.showSidebarTip) {
clearSidebarTip();
}
});
Vue.watch(function () {
return state.activeSidebar;
}, function (val, oldVal) {
if (val !== oldVal) {
var _props$onChange;
(_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, state.activeSidebar);
}
});
var init = function init() {
Vue.nextTick(function () {
var _indexesRoot$value3;
groupTop.length = 0;
parentRect.value = ((_indexesRoot$value3 = indexesRoot.value) === null || _indexesRoot$value3 === void 0 ? void 0 : _indexesRoot$value3.getBoundingClientRect()) || {
top: 0
};
getAnchorsRect().then(function () {
groupTop.forEach(function (item, index) {
var next = groupTop[index + 1];
item.totalHeight = ((next === null || next === void 0 ? void 0 : next.top) || Infinity) - item.top;
});
setAnchorOnScroll(0);
scrollToByIndex(currentIndex.value);
});
});
};
Vue.onMounted(init);
Vue.watch(function () {
return props.indexList;
}, init);
Vue.watch(function () {
return state.children.length;
}, init);
Vue.watch(function () {
return currentIndex.value;
}, function (val) {
scrollToByIndex(val);
}, {
immediate: true
});
Vue.onBeforeUnmount(function () {
timeOut && clearTimeout(timeOut);
});
Vue.provide("indexesProvide", {
relation: relation,
unRelation: unRelation
});
return function () {
return Vue.createVNode("div", {
"ref": indexesRoot,
"class": indexesClass.value,
"onScroll": handleRootScroll
}, [Vue.createVNode("div", {
"class": "".concat(indexesClass.value, "__sidebar")
}, [indexList.value.map(function (item) {
return Vue.createVNode("div", {
"class": ["".concat(indexesClass.value, "__sidebar-item"), state.activeSidebar === item ? "".concat(indexesClass.value, "__sidebar-item--active") : ""],
"data-index": item,
"onClick": function onClick(e) {
e.preventDefault();
handleSidebarItemClick(item);
},
"onTouchmove": handleSidebarTouchmove
}, [item, state.showSidebarTip && state.activeSidebar === item && Vue.createVNode("div", {
"class": "".concat(indexesClass.value, "__sidebar-tips")
}, [state.activeSidebar])]);
})]), readerTNodeJSX("default")]);
};
}
});
exports["default"] = _Indexes;
//# sourceMappingURL=indexes.js.map