@fecp/mobile
Version:
208 lines (207 loc) • 6.88 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const index_esm = require("../../../../../../node_modules/.pnpm/@vant_use@1.6.0_vue@3.5.13_typescript@5.7.3_/node_modules/@vant/use/dist/index.esm.js");
const useTouch = require("../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/composables/use-touch.js");
const index = require("../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/icon/index.js");
const create = require("../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/utils/create.js");
const props = require("../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/utils/props.js");
const dom = require("../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/utils/dom.js");
const format = require("../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/utils/format.js");
const basic = require("../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/utils/basic.js");
const closest = require("../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/utils/closest.js");
const floatingBubbleProps = {
gapX: props.makeNumberProp(24),
gapY: props.makeNumberProp(24),
icon: String,
axis: props.makeStringProp("y"),
magnetic: String,
offset: {
type: Object,
default: () => ({
x: -1,
y: -1
})
},
teleport: {
type: [String, Object],
default: "body"
}
};
const [name, bem] = create.createNamespace("floating-bubble");
var stdin_default = vue.defineComponent({
name,
inheritAttrs: false,
props: floatingBubbleProps,
emits: ["click", "update:offset", "offsetChange"],
setup(props2, { slots, emit, attrs }) {
const rootRef = vue.ref();
const state = vue.ref({
x: 0,
y: 0,
width: 0,
height: 0
});
const boundary = vue.computed(() => ({
top: props2.gapY,
right: dom.windowWidth.value - state.value.width - props2.gapX,
bottom: dom.windowHeight.value - state.value.height - props2.gapY,
left: props2.gapX
}));
const dragging = vue.ref(false);
let initialized = false;
const rootStyle = vue.computed(() => {
const style = {};
const x = format.addUnit(state.value.x);
const y = format.addUnit(state.value.y);
style.transform = `translate3d(${x}, ${y}, 0)`;
if (dragging.value || !initialized) {
style.transition = "none";
}
return style;
});
const updateState = () => {
if (!show.value) return;
const { width, height } = index_esm.useRect(rootRef.value);
const { offset } = props2;
state.value = {
x: offset.x > -1 ? offset.x : dom.windowWidth.value - width - props2.gapX,
y: offset.y > -1 ? offset.y : dom.windowHeight.value - height - props2.gapY,
width,
height
};
};
const touch = useTouch.useTouch();
let prevX = 0;
let prevY = 0;
const onTouchStart = (e) => {
touch.start(e);
dragging.value = true;
prevX = state.value.x;
prevY = state.value.y;
};
const onTouchMove = (e) => {
e.preventDefault();
touch.move(e);
if (props2.axis === "lock") return;
if (!touch.isTap.value) {
if (props2.axis === "x" || props2.axis === "xy") {
let nextX = prevX + touch.deltaX.value;
if (nextX < boundary.value.left) nextX = boundary.value.left;
if (nextX > boundary.value.right) nextX = boundary.value.right;
state.value.x = nextX;
}
if (props2.axis === "y" || props2.axis === "xy") {
let nextY = prevY + touch.deltaY.value;
if (nextY < boundary.value.top) nextY = boundary.value.top;
if (nextY > boundary.value.bottom) nextY = boundary.value.bottom;
state.value.y = nextY;
}
const offset = basic.pick(state.value, ["x", "y"]);
emit("update:offset", offset);
}
};
index_esm.useEventListener("touchmove", onTouchMove, {
target: rootRef
});
const onTouchEnd = () => {
dragging.value = false;
vue.nextTick(() => {
if (props2.magnetic === "x") {
const nextX = closest.closest(
[boundary.value.left, boundary.value.right],
state.value.x
);
state.value.x = nextX;
}
if (props2.magnetic === "y") {
const nextY = closest.closest(
[boundary.value.top, boundary.value.bottom],
state.value.y
);
state.value.y = nextY;
}
if (!touch.isTap.value) {
const offset = basic.pick(state.value, ["x", "y"]);
emit("update:offset", offset);
if (prevX !== offset.x || prevY !== offset.y) {
emit("offsetChange", offset);
}
}
});
};
const onClick = (e) => {
if (touch.isTap.value) emit("click", e);
else e.stopPropagation();
};
vue.onMounted(() => {
updateState();
vue.nextTick(() => {
initialized = true;
});
});
vue.watch(
[
dom.windowWidth,
dom.windowHeight,
() => props2.gapX,
() => props2.gapY,
() => props2.offset
],
updateState,
{
deep: true
}
);
const show = vue.ref(true);
vue.onActivated(() => {
show.value = true;
});
vue.onDeactivated(() => {
if (props2.teleport) {
show.value = false;
}
});
return () => {
const Content = vue.withDirectives(
vue.createVNode(
"div",
vue.mergeProps(
{
class: bem(),
ref: rootRef,
onTouchstartPassive: onTouchStart,
onTouchend: onTouchEnd,
onTouchcancel: onTouchEnd,
onClickCapture: onClick,
style: rootStyle.value
},
attrs
),
[
slots.default ? slots.default() : vue.createVNode(
index.default,
{
name: props2.icon,
class: bem("icon")
},
null
)
]
),
[[vue.vShow, show.value]]
);
return props2.teleport ? vue.createVNode(
vue.Teleport,
{
to: props2.teleport
},
{
default: () => [Content]
}
) : Content;
};
}
});
exports.default = stdin_default;
exports.floatingBubbleProps = floatingBubbleProps;