@nutui/nutui 3.1.22-beta.5 → 3.1.23-beta.1

package/dist/packages/_es/Swipe.js

@@ -1,51 +1,188 @@
 /*!
-* @nutui/nutui v3.1.22-beta.5 Fri Jun 24 2022 15:10:09 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.1 Mon Jun 27 2022 21:39:05 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { u as e } from "./index4.js";
-import { computed as o, ref as t, reactive as a, openBlock as s, createElementBlock as n, normalizeClass as l, normalizeStyle as u, createElementVNode as c, renderSlot as f } from "vue";
-import { c as r } from "./component.js";
-import { _ as i } from "./plugin-vue_export-helper.js";
+import { u as useTouch } from "./index4.js";
+import { computed, ref, reactive, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
-const { componentName: h, create: p } = r("swipe"), v = p({ props: { name: { type: String, default: "" }, touchMoveStopPropagation: { type: Boolean, default: false }, touchMovePreventDefault: { type: Boolean, default: false }, disabled: { type: Boolean, default: false } }, emits: ["open", "close"], setup(s2, { emit: n2 }) {
-  const l2 = o(() => ({ [h]: true })), u2 = (e2) => {
-    var _a;
-    return ((_a = e2.value) == null ? void 0 : _a.clientWidth) || 0;
-  }, c2 = t(), f2 = o(() => u2(c2)), r2 = t(), i2 = o(() => u2(r2));
-  let p2 = false, v2 = "", m2 = "";
-  const d2 = a({ offset: 0, moving: false }), g2 = (e2 = "") => {
-    p2 = true, e2 && (d2.offset = e2 === "left" ? -i2.value : f2.value), n2("open", { name: s2.name, position: v2 || e2 });
-  }, T2 = () => {
-    d2.offset = 0, p2 = false, n2("close", { name: s2.name, position: v2 });
-  }, M = o(() => ({ transform: `translate3d(${d2.offset}px, 0, 0)` })), w = e();
-  return { classes: l2, touchStyle: M, ...{ onTouchStart(e2) {
-    s2.disabled || w.start(e2);
-  }, onTouchMove(e2) {
-    s2.disabled || (w.move(e2), w.isHorizontal() && (d2.moving = true, ((e3) => {
-      v2 = e3 > 0 ? "right" : "left";
-      let o2 = e3;
-      switch (v2) {
-        case "left":
-          o2 = p2 && m2 === v2 || Math.abs(e3) > i2.value ? -i2.value : e3;
-          break;
-        case "right":
-          o2 = p2 && m2 === v2 || Math.abs(e3) > f2.value ? f2.value : e3;
+const { componentName, create } = createComponent("swipe");
+const _sfc_main = create({
+  props: {
+    name: {
+      type: String,
+      default: ""
+    },
+    touchMoveStopPropagation: {
+      type: Boolean,
+      default: false
+    },
+    touchMovePreventDefault: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["open", "close"],
+  setup(props, { emit }) {
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+    const getRefWidth = (ref2) => {
+      var _a;
+      return ((_a = ref2.value) == null ? void 0 : _a.clientWidth) || 0;
+    };
+    const leftRef = ref(), leftRefWidth = computed(() => {
+      return getRefWidth(leftRef);
+    });
+    const rightRef = ref(), rightRefWidth = computed(() => {
+      return getRefWidth(rightRef);
+    });
+    let opened = false;
+    let position = "";
+    let oldPosition = "";
+    const state = reactive({
+      offset: 0,
+      moving: false
+    });
+    const open = (p = "") => {
+      opened = true;
+      if (p) {
+        state.offset = p === "left" ? -rightRefWidth.value : leftRefWidth.value;
       }
-      d2.offset = o2;
-    })(w.deltaX.value), s2.touchMovePreventDefault && e2.preventDefault(), s2.touchMoveStopPropagation && e2.stopPropagation()));
-  }, onTouchEnd() {
-    if (d2.moving)
-      switch (d2.moving = false, m2 = v2, v2) {
+      emit("open", {
+        name: props.name,
+        position: position || p
+      });
+    };
+    const close = () => {
+      state.offset = 0;
+      opened = false;
+      emit("close", {
+        name: props.name,
+        position
+      });
+    };
+    const touchStyle = computed(() => {
+      return {
+        transform: `translate3d(${state.offset}px, 0, 0)`
+      };
+    });
+    const setoffset = (deltaX) => {
+      position = deltaX > 0 ? "right" : "left";
+      let offset = deltaX;
+      switch (position) {
         case "left":
-          Math.abs(d2.offset) <= i2.value / 2 ? T2() : (d2.offset = -i2.value, g2());
+          if (opened && oldPosition === position) {
+            offset = -rightRefWidth.value;
+          } else {
+            offset = Math.abs(deltaX) > rightRefWidth.value ? -rightRefWidth.value : deltaX;
+          }
           break;
         case "right":
-          Math.abs(d2.offset) <= f2.value / 2 ? T2() : (d2.offset = f2.value, g2());
+          if (opened && oldPosition === position) {
+            offset = leftRefWidth.value;
+          } else {
+            offset = Math.abs(deltaX) > leftRefWidth.value ? leftRefWidth.value : deltaX;
+          }
+          break;
+      }
+      state.offset = offset;
+    };
+    const touch = useTouch();
+    const touchMethods = {
+      onTouchStart(event) {
+        if (props.disabled)
+          return;
+        touch.start(event);
+      },
+      onTouchMove(event) {
+        if (props.disabled)
+          return;
+        touch.move(event);
+        if (touch.isHorizontal()) {
+          state.moving = true;
+          setoffset(touch.deltaX.value);
+          if (props.touchMovePreventDefault) {
+            event.preventDefault();
+          }
+          if (props.touchMoveStopPropagation) {
+            event.stopPropagation();
+          }
+        }
+      },
+      onTouchEnd() {
+        if (state.moving) {
+          state.moving = false;
+          oldPosition = position;
+          switch (position) {
+            case "left":
+              if (Math.abs(state.offset) <= rightRefWidth.value / 2) {
+                close();
+              } else {
+                state.offset = -rightRefWidth.value;
+                open();
+              }
+              break;
+            case "right":
+              if (Math.abs(state.offset) <= leftRefWidth.value / 2) {
+                close();
+              } else {
+                state.offset = leftRefWidth.value;
+                open();
+              }
+              break;
+          }
+        }
       }
-  } }, leftRef: c2, rightRef: r2, open: g2, close: T2 };
-} }), m = { class: "nut-swipe__left", ref: "leftRef" }, d = { class: "nut-swipe__content" }, g = { class: "nut-swipe__right", ref: "rightRef" };
-var T = i(v, [["render", function(e2, o2, t2, a2, r2, i2) {
-  return s(), n("view", { class: l(e2.classes), style: u(e2.touchStyle), onTouchstart: o2[0] || (o2[0] = (...o3) => e2.onTouchStart && e2.onTouchStart(...o3)), onTouchmove: o2[1] || (o2[1] = (...o3) => e2.onTouchMove && e2.onTouchMove(...o3)), onTouchend: o2[2] || (o2[2] = (...o3) => e2.onTouchEnd && e2.onTouchEnd(...o3)), onTouchcancel: o2[3] || (o2[3] = (...o3) => e2.onTouchEnd && e2.onTouchEnd(...o3)) }, [c("view", m, [f(e2.$slots, "left")], 512), c("view", d, [f(e2.$slots, "default")]), c("view", g, [f(e2.$slots, "right")], 512)], 38);
-}]]);
-export { T as default };
+    };
+    return {
+      classes,
+      touchStyle,
+      ...touchMethods,
+      leftRef,
+      rightRef,
+      open,
+      close
+    };
+  }
+});
+const _hoisted_1 = {
+  class: "nut-swipe__left",
+  ref: "leftRef"
+};
+const _hoisted_2 = { class: "nut-swipe__content" };
+const _hoisted_3 = {
+  class: "nut-swipe__right",
+  ref: "rightRef"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes),
+    style: normalizeStyle(_ctx.touchStyle),
+    onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.onTouchStart && _ctx.onTouchStart(...args)),
+    onTouchmove: _cache[1] || (_cache[1] = (...args) => _ctx.onTouchMove && _ctx.onTouchMove(...args)),
+    onTouchend: _cache[2] || (_cache[2] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args)),
+    onTouchcancel: _cache[3] || (_cache[3] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args))
+  }, [
+    createElementVNode("view", _hoisted_1, [
+      renderSlot(_ctx.$slots, "left")
+    ], 512),
+    createElementVNode("view", _hoisted_2, [
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    createElementVNode("view", _hoisted_3, [
+      renderSlot(_ctx.$slots, "right")
+    ], 512)
+  ], 38);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };