ckgl/node_modules/vant/lib/pull-refresh/PullRefresh.js
2024-12-21 13:52:42 +08:00

213 lines
6.5 KiB
JavaScript

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name2 in all)
__defProp(target, name2, { get: all[name2], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var stdin_exports = {};
__export(stdin_exports, {
default: () => stdin_default,
pullRefreshProps: () => pullRefreshProps
});
module.exports = __toCommonJS(stdin_exports);
var import_vue = require("vue");
var import_utils = require("../utils");
var import_use = require("@vant/use");
var import_use_touch = require("../composables/use-touch");
var import_loading = require("../loading");
const [name, bem, t] = (0, import_utils.createNamespace)("pull-refresh");
const DEFAULT_HEAD_HEIGHT = 50;
const TEXT_STATUS = ["pulling", "loosing", "success"];
const pullRefreshProps = {
disabled: Boolean,
modelValue: Boolean,
headHeight: (0, import_utils.makeNumericProp)(DEFAULT_HEAD_HEIGHT),
successText: String,
pullingText: String,
loosingText: String,
loadingText: String,
pullDistance: import_utils.numericProp,
successDuration: (0, import_utils.makeNumericProp)(500),
animationDuration: (0, import_utils.makeNumericProp)(300)
};
var stdin_default = (0, import_vue.defineComponent)({
name,
props: pullRefreshProps,
emits: ["change", "refresh", "update:modelValue"],
setup(props, {
emit,
slots
}) {
let reachTop;
const root = (0, import_vue.ref)();
const track = (0, import_vue.ref)();
const scrollParent = (0, import_use.useScrollParent)(root);
const state = (0, import_vue.reactive)({
status: "normal",
distance: 0,
duration: 0
});
const touch = (0, import_use_touch.useTouch)();
const getHeadStyle = () => {
if (props.headHeight !== DEFAULT_HEAD_HEIGHT) {
return {
height: `${props.headHeight}px`
};
}
};
const isTouchable = () => state.status !== "loading" && state.status !== "success" && !props.disabled;
const ease = (distance) => {
const pullDistance = +(props.pullDistance || props.headHeight);
if (distance > pullDistance) {
if (distance < pullDistance * 2) {
distance = pullDistance + (distance - pullDistance) / 2;
} else {
distance = pullDistance * 1.5 + (distance - pullDistance * 2) / 4;
}
}
return Math.round(distance);
};
const setStatus = (distance, isLoading) => {
const pullDistance = +(props.pullDistance || props.headHeight);
state.distance = distance;
if (isLoading) {
state.status = "loading";
} else if (distance === 0) {
state.status = "normal";
} else if (distance < pullDistance) {
state.status = "pulling";
} else {
state.status = "loosing";
}
emit("change", {
status: state.status,
distance
});
};
const getStatusText = () => {
const {
status
} = state;
if (status === "normal") {
return "";
}
return props[`${status}Text`] || t(status);
};
const renderStatus = () => {
const {
status,
distance
} = state;
if (slots[status]) {
return slots[status]({
distance
});
}
const nodes = [];
if (TEXT_STATUS.includes(status)) {
nodes.push((0, import_vue.createVNode)("div", {
"class": bem("text")
}, [getStatusText()]));
}
if (status === "loading") {
nodes.push((0, import_vue.createVNode)(import_loading.Loading, {
"class": bem("loading")
}, {
default: getStatusText
}));
}
return nodes;
};
const showSuccessTip = () => {
state.status = "success";
setTimeout(() => {
setStatus(0);
}, +props.successDuration);
};
const checkPosition = (event) => {
reachTop = (0, import_utils.getScrollTop)(scrollParent.value) === 0;
if (reachTop) {
state.duration = 0;
touch.start(event);
}
};
const onTouchStart = (event) => {
if (isTouchable()) {
checkPosition(event);
}
};
const onTouchMove = (event) => {
if (isTouchable()) {
if (!reachTop) {
checkPosition(event);
}
const {
deltaY
} = touch;
touch.move(event);
if (reachTop && deltaY.value >= 0 && touch.isVertical()) {
(0, import_utils.preventDefault)(event);
setStatus(ease(deltaY.value));
}
}
};
const onTouchEnd = () => {
if (reachTop && touch.deltaY.value && isTouchable()) {
state.duration = +props.animationDuration;
if (state.status === "loosing") {
setStatus(+props.headHeight, true);
emit("update:modelValue", true);
(0, import_vue.nextTick)(() => emit("refresh"));
} else {
setStatus(0);
}
}
};
(0, import_vue.watch)(() => props.modelValue, (value) => {
state.duration = +props.animationDuration;
if (value) {
setStatus(+props.headHeight, true);
} else if (slots.success || props.successText) {
showSuccessTip();
} else {
setStatus(0, false);
}
});
(0, import_use.useEventListener)("touchmove", onTouchMove, {
target: track
});
return () => {
var _a;
const trackStyle = {
transitionDuration: `${state.duration}ms`,
transform: state.distance ? `translate3d(0,${state.distance}px, 0)` : ""
};
return (0, import_vue.createVNode)("div", {
"ref": root,
"class": bem()
}, [(0, import_vue.createVNode)("div", {
"ref": track,
"class": bem("track"),
"style": trackStyle,
"onTouchstartPassive": onTouchStart,
"onTouchend": onTouchEnd,
"onTouchcancel": onTouchEnd
}, [(0, import_vue.createVNode)("div", {
"class": bem("head"),
"style": getHeadStyle()
}, [renderStatus()]), (_a = slots.default) == null ? void 0 : _a.call(slots)])]);
};
}
});