tdesign-mobile-vue
Version:
tdesign-mobile-vue
317 lines (313 loc) • 11.7 kB
JavaScript
/**
* tdesign v1.7.0
* (c) 2024 TDesign Group
* @license MIT
*/
import { _ as _slicedToArray } from '../_chunks/dep-cd74809c.mjs';
import { defineComponent, ref, toRefs, computed, watch, onMounted, onUnmounted, createVNode, resolveComponent, mergeProps } from 'vue';
import { useElementSize } from '@vueuse/core';
import { d as debounce_1 } from '../_chunks/dep-decfd417.mjs';
import PullDownRefreshProps from './props.mjs';
import '../shared/index.mjs';
import { preventDefault } from '../shared/dom.mjs';
import config from '../config.mjs';
import { Loading } from '../loading/index.mjs';
import { useContent } from '../hooks/tnode.mjs';
import { useTouch, isReachTop, easeDistance } from './useTouch.mjs';
import { usePrefixClass } from '../hooks/useClass.mjs';
import { u as useConfig } from '../_chunks/dep-b9b8ead5.mjs';
import { useVModel } from '../shared/useVModel/index.mjs';
import { reconvertUnit, convertUnit } from '../shared/util.mjs';
import '../_chunks/dep-8d37dbf8.mjs';
import '../_chunks/dep-8bf3054e.mjs';
import '../_chunks/dep-e6c129ab.mjs';
import '../_chunks/dep-620d73f7.mjs';
import '../_chunks/dep-91d696ea.mjs';
import '../_chunks/dep-3d249f65.mjs';
import '../_chunks/dep-00c8e011.mjs';
import '../_chunks/dep-a836a38c.mjs';
import '../_chunks/dep-9b2de386.mjs';
import '../shared/functions.mjs';
import '../shared/component.mjs';
import '../shared/constants.mjs';
import '../shared/render.mjs';
import '../_chunks/dep-60cadef8.mjs';
import '../_chunks/dep-8140c29b.mjs';
import '../_chunks/dep-0d52e58f.mjs';
import '../_chunks/dep-019e292f.mjs';
import '../_chunks/dep-32364550.mjs';
import '../_chunks/dep-0ea7bbde.mjs';
import '../_chunks/dep-b437ef0b.mjs';
import '../shared/render-tnode.mjs';
import '../shared/useToggle/index.mjs';
import '../shared/useCountDown/index.mjs';
import '../_chunks/dep-80e4de18.mjs';
import '../shared/useCountDown/utils.mjs';
import '../shared/useDefault/index.mjs';
import '../shared/useChildSlots/index.mjs';
import '../_chunks/dep-f0f403be.mjs';
import '../shared/useTouch/index.mjs';
import '../shared/useScrollParent/index.mjs';
import '../shared/useExpose/index.mjs';
import '../shared/useTest/index.mjs';
import '../_chunks/dep-219bb5a7.mjs';
import '../shared/useClickAway/index.mjs';
import '../shared/useGesture/index.mjs';
import '@use-gesture/vanilla';
import '../shared/hover.mjs';
import '../_chunks/dep-52fdc8e1.mjs';
import '../_chunks/dep-6303c50c.mjs';
import '../_chunks/dep-6917b9bc.mjs';
import '../loading/loading.mjs';
import '../loading/icon/gradient.mjs';
import '../_common/js/loading/circle-adapter.mjs';
import '../_common/js/utils/set-style.mjs';
import '../_common/js/utils/helper.mjs';
import '../_chunks/dep-8ece47c6.mjs';
import '../_chunks/dep-74a5dff9.mjs';
import '../_chunks/dep-1bbfa76e.mjs';
import '../loading/icon/spinner.mjs';
import '../loading/props.mjs';
import '../hooks/render-tnode.mjs';
import '../_chunks/dep-40507aac.mjs';
import '../_chunks/dep-2bce42ea.mjs';
import '../_chunks/dep-e57d46f3.mjs';
import '../_chunks/dep-4f44985d.mjs';
import '../_chunks/dep-6bc862af.mjs';
import '../_chunks/dep-b84be35c.mjs';
import '../_chunks/dep-08bc7a4c.mjs';
import '../_chunks/dep-6c53a3e4.mjs';
import '../_chunks/dep-d2161895.mjs';
import '../_chunks/dep-89951f45.mjs';
import '../_chunks/dep-4931819d.mjs';
import '../_chunks/dep-10f4d030.mjs';
import '../_chunks/dep-8ee6f5cd.mjs';
import '../_chunks/dep-933f3a85.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 './style/css.mjs';
import '../loading/type.mjs';
import '../loading/plugin.mjs';
var prefix = config.prefix;
var statusName = ["pulling", "loosing", "loading", "success", "initial"];
var _PullDownRefresh = defineComponent({
name: "".concat(prefix, "-pull-down-refresh"),
components: {
TLoading: Loading
},
props: PullDownRefreshProps,
emits: ["refresh", "timeout", "scrolltolower", "update:value", "update:modelValue"],
setup: function setup(props) {
var pullDownRefreshClass = usePrefixClass("pull-down-refresh");
var _useConfig = useConfig("pullDownRefresh"),
globalConfig = _useConfig.globalConfig;
var renderContent = useContent();
var timer = null;
var distance = ref(0);
var afterLoading = ref(false);
var _toRefs = toRefs(props),
value = _toRefs.value,
modelValue = _toRefs.modelValue;
var _useVModel = useVModel(value, modelValue, props.defaultValue, props.onChange),
_useVModel2 = _slicedToArray(_useVModel, 2),
loading = _useVModel2[0],
setLoading = _useVModel2[1];
var loadingText = computed(function () {
var _props$loadingTexts;
var index = statusName.indexOf(status.value);
var loadingTexts = ((_props$loadingTexts = props.loadingTexts) === null || _props$loadingTexts === void 0 ? void 0 : _props$loadingTexts.length) > 0 ? props.loadingTexts : globalConfig.value.loadingTexts;
return index >= 0 ? loadingTexts[index] : "";
});
var touch = useTouch();
var loadingBar = ref();
var maxBar = ref();
var _useElementSize = useElementSize(loadingBar),
loadingBarHeight = _useElementSize.height;
var _useElementSize2 = useElementSize(maxBar),
maxBarHeight = _useElementSize2.height;
var actualLoadingBarHeight = ref(0);
var touchDir;
var touchThreshold = 5;
watch([loading, loadingBarHeight], function (_ref, _ref2) {
var _ref3 = _slicedToArray(_ref, 1),
val = _ref3[0];
var _ref4 = _slicedToArray(_ref2, 1),
prevVal = _ref4[0];
if (val) {
distance.value = loadingBarHeight.value;
}
if (!val && prevVal) {
afterLoading.value = true;
}
}, {
immediate: true
});
var status = computed(function () {
if (afterLoading.value) {
return "success";
}
if (!loading.value && distance.value === 0) {
return "initial";
}
if (distance.value < loadingBarHeight.value) {
return "pulling";
}
if (loading.value) {
return "loading";
}
return "loosing";
});
watch(status, function (newVal) {
if (newVal === "success") {
setTimeout(function () {
distance.value = 0;
}, 300);
}
});
var onTouchStart = function onTouchStart(e) {
e.stopPropagation();
if (!isReachTop(e) || loading.value) return;
clearTimeout(timer);
timer = null;
distance.value = 0;
touch.start(e);
touchDir = 0;
};
var onTouchMove = function onTouchMove(e) {
e.stopPropagation();
if (!isReachTop(e) || loading.value) return;
touch.move(e);
var diffY = touch.diffY,
diffX = touch.diffX;
var absX = Math.abs(diffX.value);
var absY = Math.abs(diffY.value);
if (!touchDir && absX < touchThreshold && absY < touchThreshold) {
return;
}
if (!touchDir && absX < absY) {
touchDir = -1;
} else if (!touchDir && absX >= absY) {
touchDir = 1;
}
if (touchDir === 1) return;
actualLoadingBarHeight.value = diffY.value;
var nextDistance = easeDistance(diffY.value, loadingBarHeight.value);
if (diffY.value > 0) {
preventDefault(e, false);
}
if (nextDistance >= 0 && nextDistance < maxBarHeight.value) {
distance.value = nextDistance;
}
};
var onTouchEnd = function onTouchEnd(e) {
e.stopPropagation();
if (!isReachTop(e) || loading.value) return;
if (status.value === "loosing") {
var _props$onRefresh;
distance.value = loadingBarHeight.value;
setLoading(true);
(_props$onRefresh = props.onRefresh) === null || _props$onRefresh === void 0 || _props$onRefresh.call(props);
timer = setTimeout(function () {
if (loading.value) {
var _props$onTimeout;
(_props$onTimeout = props.onTimeout) === null || _props$onTimeout === void 0 || _props$onTimeout.call(props);
setLoading(false);
}
}, props.refreshTimeout);
} else {
distance.value = 0;
}
};
var onReachBottom = debounce_1(function () {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var _document$documentEle = document.documentElement,
clientHeight = _document$documentEle.clientHeight,
scrollHeight = _document$documentEle.scrollHeight;
var distance2 = 20;
if (scrollTop + clientHeight >= scrollHeight - distance2) {
var _props$onScrolltolowe;
(_props$onScrolltolowe = props.onScrolltolower) === null || _props$onScrolltolowe === void 0 || _props$onScrolltolowe.call(props);
}
}, 300, {
leading: true,
trailing: false
});
var onTransitionEnd = function onTransitionEnd() {
if (afterLoading.value) {
afterLoading.value = false;
}
};
var trackStyle = computed(function () {
return {
transform: "translate3d(0, ".concat(distance.value, "px, 0)")
};
});
var heightDiff = (reconvertUnit(props.maxBarHeight) - reconvertUnit(props.loadingBarHeight)) / 2;
var loadingBarStyles = computed(function () {
return {
transform: "translateY(".concat(heightDiff, "px)"),
height: "".concat(actualLoadingBarHeight.value, "px"),
maxHeight: convertUnit(props.loadingBarHeight)
};
});
var maxBarStyles = computed(function () {
return {
height: convertUnit(props.maxBarHeight)
};
});
onMounted(function () {
window.addEventListener("scroll", onReachBottom);
});
onUnmounted(function () {
clearTimeout(timer);
window.removeEventListener("scroll", onReachBottom);
});
var renderLoading = function renderLoading() {
if (status.value === "loading") {
return createVNode(resolveComponent("t-loading"), mergeProps({
"size": "24px",
"text": loadingText.value
}, props.loadingProps), null);
}
return createVNode("div", {
"class": "".concat(pullDownRefreshClass.value, "__text")
}, [loadingText.value]);
};
return function () {
var content = renderContent("default", "content");
var className = "".concat(pullDownRefreshClass.value, "__track");
if (status.value !== "pulling") {
className = "".concat(className, " ").concat(pullDownRefreshClass.value, "__track--loosing");
}
return createVNode("div", {
"class": pullDownRefreshClass.value
}, [createVNode("div", {
"class": className,
"style": trackStyle.value,
"onTouchstart": onTouchStart,
"onTouchmove": onTouchMove,
"onTouchend": onTouchEnd,
"onTouchcancel": onTouchEnd,
"onTransitionend": onTransitionEnd
}, [createVNode("div", {
"ref": maxBar,
"class": "".concat(pullDownRefreshClass.value, "__tips"),
"style": maxBarStyles.value
}, [createVNode("div", {
"ref": loadingBar,
"class": "".concat(pullDownRefreshClass.value, "__loading"),
"style": loadingBarStyles.value
}, [renderLoading()])]), content])]);
};
}
});
export { _PullDownRefresh as default };
//# sourceMappingURL=pull-down-refresh.mjs.map