tdesign-mobile-vue
Version:
tdesign-mobile-vue
331 lines (324 loc) • 13.5 kB
JavaScript
/**
* 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