213 lines
6.5 KiB
JavaScript
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)])]);
|
|
};
|
|
}
|
|
});
|