tdesign-mobile-vue
Version:
tdesign-mobile-vue
239 lines (235 loc) • 9.71 kB
JavaScript
/**
* tdesign v1.7.0
* (c) 2024 TDesign Group
* @license MIT
*/
import { defineComponent, ref, reactive, computed, watchEffect, watch, onMounted, onBeforeUnmount, provide, createVNode, nextTick } from 'vue';
import throttle from 'lodash/throttle';
import { preventDefault } from '../shared/dom.js';
import config from '../config.js';
import IndexesProps from './props.js';
import { usePrefixClass } from '../hooks/useClass.js';
import { useTNodeJSX } from '../hooks/tnode.js';
import 'lodash/isFunction';
import 'lodash/isString';
import '../config-provider/useConfig.js';
import '@babel/runtime/helpers/defineProperty';
import 'lodash/cloneDeep';
import '../config-provider/context.js';
import 'lodash/mergeWith';
import 'lodash/merge';
import 'lodash/isArray';
import '../_common/js/global-config/mobile/default-config.js';
import '../_common/js/global-config/mobile/locale/zh_CN.js';
import '../_chunks/dep-d5364bc4.js';
import '@babel/runtime/helpers/typeof';
import '../_chunks/dep-eb734424.js';
import 'dayjs';
import 'lodash/camelCase';
import 'lodash/kebabCase';
import '../hooks/render-tnode.js';
import 'lodash/isEmpty';
import 'lodash/isObject';
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(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.js.map