tdesign-mobile-vue
Version:
tdesign-mobile-vue
247 lines (239 loc) • 10 kB
JavaScript
/**
* tdesign v1.7.0
* (c) 2024 TDesign Group
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var throttle = require('lodash/throttle');
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');
require('lodash/isFunction');
require('lodash/isString');
require('../config-provider/useConfig.js');
require('@babel/runtime/helpers/defineProperty');
require('lodash/cloneDeep');
require('../config-provider/context.js');
require('lodash/mergeWith');
require('lodash/merge');
require('lodash/isArray');
require('../_common/js/global-config/mobile/default-config.js');
require('../_common/js/global-config/mobile/locale/zh_CN.js');
require('../_chunks/dep-8d930798.js');
require('@babel/runtime/helpers/typeof');
require('../_chunks/dep-a20a5149.js');
require('dayjs');
require('lodash/camelCase');
require('lodash/kebabCase');
require('../hooks/render-tnode.js');
require('lodash/isEmpty');
require('lodash/isObject');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var throttle__default = /*#__PURE__*/_interopDefaultLegacy(throttle);
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__default["default"](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