123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162 |
- import { createVNode as _createVNode } from "vue";
- import { ref, reactive, computed, defineComponent } from "vue";
- import { clamp, isDef, numericProp, preventDefault, callInterceptor, createNamespace, makeNumericProp } from "../utils/index.mjs";
- import { useRect, useClickAway, useEventListener } from "@vant/use";
- import { useTouch } from "../composables/use-touch.mjs";
- import { useExpose } from "../composables/use-expose.mjs";
- const [name, bem] = createNamespace("swipe-cell");
- const swipeCellProps = {
- name: makeNumericProp(""),
- disabled: Boolean,
- leftWidth: numericProp,
- rightWidth: numericProp,
- beforeClose: Function,
- stopPropagation: Boolean
- };
- var stdin_default = defineComponent({
- name,
- props: swipeCellProps,
- emits: ["open", "close", "click"],
- setup(props, {
- emit,
- slots
- }) {
- let opened;
- let lockClick;
- let startOffset;
- const root = ref();
- const leftRef = ref();
- const rightRef = ref();
- const state = reactive({
- offset: 0,
- dragging: false
- });
- const touch = useTouch();
- const getWidthByRef = (ref2) => ref2.value ? useRect(ref2).width : 0;
- const leftWidth = computed(() => isDef(props.leftWidth) ? +props.leftWidth : getWidthByRef(leftRef));
- const rightWidth = computed(() => isDef(props.rightWidth) ? +props.rightWidth : getWidthByRef(rightRef));
- const open = (side) => {
- state.offset = side === "left" ? leftWidth.value : -rightWidth.value;
- if (!opened) {
- opened = true;
- emit("open", {
- name: props.name,
- position: side
- });
- }
- };
- const close = (position) => {
- state.offset = 0;
- if (opened) {
- opened = false;
- emit("close", {
- name: props.name,
- position
- });
- }
- };
- const toggle = (side) => {
- const offset = Math.abs(state.offset);
- const THRESHOLD = 0.15;
- const threshold = opened ? 1 - THRESHOLD : THRESHOLD;
- const width = side === "left" ? leftWidth.value : rightWidth.value;
- if (width && offset > width * threshold) {
- open(side);
- } else {
- close(side);
- }
- };
- const onTouchStart = (event) => {
- if (!props.disabled) {
- startOffset = state.offset;
- touch.start(event);
- }
- };
- const onTouchMove = (event) => {
- if (props.disabled) {
- return;
- }
- const {
- deltaX
- } = touch;
- touch.move(event);
- if (touch.isHorizontal()) {
- lockClick = true;
- state.dragging = true;
- const isEdge = !opened || deltaX.value * startOffset < 0;
- if (isEdge) {
- preventDefault(event, props.stopPropagation);
- }
- state.offset = clamp(deltaX.value + startOffset, -rightWidth.value, leftWidth.value);
- }
- };
- const onTouchEnd = () => {
- if (state.dragging) {
- state.dragging = false;
- toggle(state.offset > 0 ? "left" : "right");
- setTimeout(() => {
- lockClick = false;
- }, 0);
- }
- };
- const onClick = (position = "outside") => {
- emit("click", position);
- if (opened && !lockClick) {
- callInterceptor(props.beforeClose, {
- args: [{
- name: props.name,
- position
- }],
- done: () => close(position)
- });
- }
- };
- const getClickHandler = (position, stop) => (event) => {
- if (stop) {
- event.stopPropagation();
- }
- onClick(position);
- };
- const renderSideContent = (side, ref2) => {
- const contentSlot = slots[side];
- if (contentSlot) {
- return _createVNode("div", {
- "ref": ref2,
- "class": bem(side),
- "onClick": getClickHandler(side, true)
- }, [contentSlot()]);
- }
- };
- useExpose({
- open,
- close
- });
- useClickAway(root, () => onClick("outside"), {
- eventName: "touchstart"
- });
- useEventListener("touchmove", onTouchMove, {
- target: root
- });
- return () => {
- var _a;
- const wrapperStyle = {
- transform: `translate3d(${state.offset}px, 0, 0)`,
- transitionDuration: state.dragging ? "0s" : ".6s"
- };
- return _createVNode("div", {
- "ref": root,
- "class": bem(),
- "onClick": getClickHandler("cell", lockClick),
- "onTouchstartPassive": onTouchStart,
- "onTouchend": onTouchEnd,
- "onTouchcancel": onTouchEnd
- }, [_createVNode("div", {
- "class": bem("wrapper"),
- "style": wrapperStyle
- }, [renderSideContent("left", leftRef), (_a = slots.default) == null ? void 0 : _a.call(slots), renderSideContent("right", rightRef)])]);
- };
- }
- });
- export {
- stdin_default as default
- };
|