UNPKG

tdesign-mobile-vue

Version:
328 lines (320 loc) 13.4 kB
/** * tdesign v1.9.3 * (c) 2025 TDesign Group * @license MIT */ 'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); 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 debounce = require('../_chunks/dep-f7e5ed5b.js'); var isObject = require('../_chunks/dep-ef223206.js'); require('../_chunks/dep-88fe047a.js'); require('../_chunks/dep-2f809ed9.js'); require('@babel/runtime/helpers/typeof'); require('../_chunks/dep-c3cb976c.js'); require('../_chunks/dep-757b152c.js'); require('../_chunks/dep-5be9198d.js'); require('../_chunks/dep-21f18d3b.js'); require('@babel/runtime/helpers/defineProperty'); require('../_chunks/dep-b9642a56.js'); require('../_common/js/global-config/mobile/default-config.js'); require('../_common/js/global-config/mobile/locale/zh_CN.js'); require('../_chunks/dep-28b1e09d.js'); require('../_chunks/dep-57aa1aa0.js'); require('dayjs'); require('../_chunks/dep-85204fa0.js'); require('../_chunks/dep-f6b14f80.js'); require('../_chunks/dep-a8d60643.js'); require('../_chunks/dep-7c911ba3.js'); require('../_chunks/dep-49f0a63e.js'); require('../_chunks/dep-d950aa21.js'); require('../_chunks/dep-a697b1b9.js'); require('../_chunks/dep-4dfb9b9c.js'); require('../_chunks/dep-c65deed7.js'); require('../_chunks/dep-94eeec5a.js'); require('../_chunks/dep-060bf1cf.js'); require('../_chunks/dep-0e05e959.js'); require('../_chunks/dep-324da301.js'); require('../_chunks/dep-da6dc2cf.js'); require('../_chunks/dep-ccc9ad3d.js'); require('../hooks/render-tnode.js'); require('../_chunks/dep-a7319409.js'); require('../_chunks/dep-afa9f3f2.js'); require('../_chunks/dep-ae809b86.js'); require('../_chunks/dep-2b08c0a6.js'); require('../_chunks/dep-288156c7.js'); require('../_chunks/dep-3d4c38f1.js'); require('../_chunks/dep-6df33aaf.js'); require('../_chunks/dep-675798b4.js'); require('../_common/js/utils/general.js'); require('../_chunks/dep-b7c281c3.js'); /** Error message constants. */ var FUNC_ERROR_TEXT = 'Expected a function'; /** * Creates a throttled function that only invokes `func` at most once per * every `wait` milliseconds. The throttled function comes with a `cancel` * method to cancel delayed `func` invocations and a `flush` method to * immediately invoke them. Provide `options` to indicate whether `func` * should be invoked on the leading and/or trailing edge of the `wait` * timeout. The `func` is invoked with the last arguments provided to the * throttled function. Subsequent calls to the throttled function return the * result of the last `func` invocation. * * **Note:** If `leading` and `trailing` options are `true`, `func` is * invoked on the trailing edge of the timeout only if the throttled function * is invoked more than once during the `wait` timeout. * * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred * until to the next tick, similar to `setTimeout` with a timeout of `0`. * * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/) * for details over the differences between `_.throttle` and `_.debounce`. * * @static * @memberOf _ * @since 0.1.0 * @category Function * @param {Function} func The function to throttle. * @param {number} [wait=0] The number of milliseconds to throttle invocations to. * @param {Object} [options={}] The options object. * @param {boolean} [options.leading=true] * Specify invoking on the leading edge of the timeout. * @param {boolean} [options.trailing=true] * Specify invoking on the trailing edge of the timeout. * @returns {Function} Returns the new throttled function. * @example * * // Avoid excessively updating the position while scrolling. * jQuery(window).on('scroll', _.throttle(updatePosition, 100)); * * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes. * var throttled = _.throttle(renewToken, 300000, { 'trailing': false }); * jQuery(element).on('click', throttled); * * // Cancel the trailing throttled invocation. * jQuery(window).on('popstate', throttled.cancel); */ function throttle(func, wait, options) { var leading = true, trailing = true; if (typeof func != 'function') { throw new TypeError(FUNC_ERROR_TEXT); } if (isObject.isObject(options)) { leading = 'leading' in options ? !!options.leading : leading; trailing = 'trailing' in options ? !!options.trailing : trailing; } return debounce.debounce(func, wait, { 'leading': leading, 'maxWait': wait, 'trailing': trailing }); } var prefix = config["default"].prefix; var _Indexes = vue.defineComponent({ name: "".concat(prefix, "-indexes"), props: indexes_props["default"], emits: ["select", "change"], setup: function setup(props) { var readerTNodeJSX = hooks_tnode.useTNodeJSX(); var indexesClass = hooks_useClass.usePrefixClass("indexes"); 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]; 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) { 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); } }; 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(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); }; 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; 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); }); }); }; vue.onMounted(init); vue.watch(function () { return props.indexList; }, init); vue.onBeforeUnmount(function () { timeOut && clearTimeout(timeOut); }); vue.provide("indexesProvide", { relation: relation }); 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