UNPKG

tdesign-mobile-vue

Version:
331 lines (324 loc) 13.5 kB
/** * tdesign v1.7.0 * (c) 2024 TDesign Group * @license MIT */ import { defineComponent, ref, reactive, computed, watchEffect, watch, nextTick, onMounted, onBeforeUnmount, provide, createVNode } from 'vue'; import '../_chunks/dep-8bf3054e.mjs'; import { d as debounce_1 } from '../_chunks/dep-decfd417.mjs'; import { i as isObject_1 } from '../_chunks/dep-e6c129ab.mjs'; import '../_chunks/dep-91d696ea.mjs'; import { preventDefault } from '../shared/dom.mjs'; import config from '../config.mjs'; import IndexesProps from './props.mjs'; import { usePrefixClass } from '../hooks/useClass.mjs'; import { useTNodeJSX } from '../hooks/tnode.mjs'; import '../_chunks/dep-3d249f65.mjs'; import '../_chunks/dep-620d73f7.mjs'; import '../_chunks/dep-00c8e011.mjs'; import '../_chunks/dep-a836a38c.mjs'; import '../_chunks/dep-9b2de386.mjs'; import '../_chunks/dep-6303c50c.mjs'; import '../_chunks/dep-019e292f.mjs'; import '../_chunks/dep-32364550.mjs'; import '../_chunks/dep-b9b8ead5.mjs'; import '../_chunks/dep-219bb5a7.mjs'; import '../_chunks/dep-6c53a3e4.mjs'; import '../_chunks/dep-d2161895.mjs'; import '../_chunks/dep-89951f45.mjs'; import '../_chunks/dep-08bc7a4c.mjs'; import '../_chunks/dep-6bc862af.mjs'; import '../_chunks/dep-4931819d.mjs'; import '../_chunks/dep-10f4d030.mjs'; import '../_chunks/dep-8ee6f5cd.mjs'; import '../_chunks/dep-e57d46f3.mjs'; import '../_chunks/dep-4f44985d.mjs'; import '../_chunks/dep-b84be35c.mjs'; import '../_chunks/dep-933f3a85.mjs'; import '../_chunks/dep-2bce42ea.mjs'; import '../_chunks/dep-ac139980.mjs'; import '../_chunks/dep-154c1925.mjs'; import '../_chunks/dep-ba131d9c.mjs'; import '../_chunks/dep-007f294e.mjs'; import '../_common/js/global-config/mobile/default-config.mjs'; import '../_common/js/global-config/mobile/locale/zh_CN.mjs'; import '../_chunks/dep-161f0c44.mjs'; import '../_chunks/dep-5fd0eaa4.mjs'; import '../_chunks/dep-3c59bf72.mjs'; import '../config-provider/type.mjs'; import '../_chunks/dep-60cadef8.mjs'; import '../_chunks/dep-8140c29b.mjs'; import '../_chunks/dep-0d52e58f.mjs'; import '../_chunks/dep-0ea7bbde.mjs'; import '../_chunks/dep-b437ef0b.mjs'; import '../_chunks/dep-6917b9bc.mjs'; import '../hooks/render-tnode.mjs'; import '../_chunks/dep-40507aac.mjs'; var debounce = debounce_1, isObject = isObject_1; /** 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(options)) { leading = 'leading' in options ? !!options.leading : leading; trailing = 'trailing' in options ? !!options.trailing : trailing; } return debounce(func, wait, { 'leading': leading, 'maxWait': wait, 'trailing': trailing }); } var throttle_1 = throttle; var prefix = config.prefix; var _Indexes = defineComponent({ name: "".concat(prefix, "-indexes"), props: IndexesProps, emits: ["select", "change"], setup: function setup(props) { var readerTNodeJSX = useTNodeJSX(); var indexesClass = usePrefixClass("indexes"); var timeOut; var indexesRoot = ref(); var parentRect = ref(); var state = reactive({ showSidebarTip: false, activeSidebar: "", children: [] }); var groupTop = []; var indexList = 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_1(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) { 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); }; watchEffect(function () { if (state.showSidebarTip) { clearSidebarTip(); } }); 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() { 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); }); }); }; onMounted(init); watch(function () { return props.indexList; }, init); onBeforeUnmount(function () { timeOut && clearTimeout(timeOut); }); provide("indexesProvide", { relation: relation }); return function () { return createVNode("div", { "ref": indexesRoot, "class": indexesClass.value, "onScroll": handleRootScroll }, [createVNode("div", { "class": "".concat(indexesClass.value, "__sidebar") }, [indexList.value.map(function (item) { return 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 && createVNode("div", { "class": "".concat(indexesClass.value, "__sidebar-tips") }, [state.activeSidebar])]); })]), readerTNodeJSX("default")]); }; } }); export { _Indexes as default }; //# sourceMappingURL=indexes.mjs.map