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

package/dist/packages/_es/Drag.js

@@ -1,63 +1,204 @@
 /*!
-* @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 { ref as t, reactive as e, computed as o, onMounted as n, onActivated as r, onDeactivated as s, openBlock as i, createElementBlock as l, normalizeClass as u, renderSlot as c } from "vue";
-import { c as a } from "./component.js";
-import { r as p } from "./raf.js";
-import { _ as y } from "./plugin-vue_export-helper.js";
+import { ref, reactive, computed, onMounted, onActivated, onDeactivated, openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
+import { c as createComponent } from "./component.js";
+import { r as requestAniFrame } from "./raf.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
-const { componentName: f, create: d } = a("drag");
-var h = y(d({ props: { attract: { type: Boolean, default: false }, direction: { type: String, default: "all" }, boundary: { type: Object, default: () => ({ top: 0, left: 0, right: 0, bottom: 0 }) } }, setup(i2, { emit: l2 }) {
-  const u2 = t(), c2 = e({ keepAlive: false, elWidth: 0, elHeight: 0, screenWidth: 0, screenHeight: 0, startTop: 0, startLeft: 0, nx: 0, ny: 0, xPum: 0, yPum: 0, position: { x: 0, y: 0 }, boundary: { top: 0, left: 0, right: 0, bottom: 0 } }), a2 = o(() => ({ [f]: true }));
-  function y2(t2) {
-    c2.boundary.left ? +t2.style.left.split("px")[0] > c2.boundary.left ? (t2.style.left = +t2.style.left.split("px")[0] - 10 + "px", p(() => {
-      y2(t2);
-    })) : t2.style.left = `${c2.boundary.left}px` : +t2.style.left.split("px")[0] > 10 ? (t2.style.left = +t2.style.left.split("px")[0] - 10 + "px", p(() => {
-      y2(t2);
-    })) : t2.style.left = "0px";
-  }
-  function d2(t2, e2) {
-    e2 - parseInt(t2.style.left.split("px")[0]) > 10 ? (t2.style.left = parseInt(t2.style.left.split("px")[0]) + 10 + "px", p(() => {
-      d2(t2, e2);
-    })) : t2.style.left = e2 + "px";
-  }
-  function h2(t2) {
-    t2.preventDefault();
-    const e2 = t2.currentTarget;
-    if (t2.targetTouches.length === 1) {
-      const o2 = t2.targetTouches[0];
-      c2.nx = o2.clientX - c2.position.x, c2.ny = o2.clientY - c2.position.y, c2.xPum = c2.startLeft + c2.nx, c2.yPum = c2.startTop + c2.ny;
-      const n2 = c2.screenWidth - c2.elWidth - c2.boundary.right;
-      Math.abs(c2.xPum) > n2 ? c2.xPum = n2 : c2.xPum <= c2.boundary.left && (c2.xPum = c2.boundary.left), c2.yPum < c2.boundary.top ? c2.yPum = c2.boundary.top : c2.yPum > c2.screenHeight - c2.elHeight - c2.boundary.bottom && (c2.yPum = c2.screenHeight - c2.elHeight - c2.boundary.bottom), i2.direction != "y" && (e2.style.left = c2.xPum + "px"), i2.direction != "x" && (e2.style.top = c2.yPum + "px");
+const { componentName, create } = createComponent("drag");
+const _sfc_main = create({
+  props: {
+    attract: {
+      type: Boolean,
+      default: false
+    },
+    direction: {
+      type: String,
+      default: "all"
+    },
+    boundary: {
+      type: Object,
+      default: () => {
+        return {
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0
+        };
+      }
     }
+  },
+  setup(props, { emit }) {
+    const myDrag = ref();
+    const state = reactive({
+      keepAlive: false,
+      elWidth: 0,
+      elHeight: 0,
+      screenWidth: 0,
+      screenHeight: 0,
+      startTop: 0,
+      startLeft: 0,
+      nx: 0,
+      ny: 0,
+      xPum: 0,
+      yPum: 0,
+      position: { x: 0, y: 0 },
+      boundary: {
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+      }
+    });
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+    function getInfo() {
+      const domElem = document.documentElement;
+      state.elWidth = myDrag.value.offsetWidth;
+      state.elHeight = myDrag.value.offsetHeight;
+      state.screenWidth = domElem.clientWidth || 375;
+      state.screenHeight = domElem.clientHeight || 667;
+    }
+    function goLeft(target) {
+      if (state.boundary.left) {
+        if (+target.style.left.split("px")[0] > state.boundary.left) {
+          target.style.left = +target.style.left.split("px")[0] - 10 + "px";
+          requestAniFrame(() => {
+            goLeft(target);
+          });
+        } else {
+          target.style.left = `${state.boundary.left}px`;
+        }
+      } else {
+        if (+target.style.left.split("px")[0] > 10) {
+          target.style.left = +target.style.left.split("px")[0] - 10 + "px";
+          requestAniFrame(() => {
+            goLeft(target);
+          });
+        } else {
+          target.style.left = "0px";
+        }
+      }
+    }
+    function goRight(target, rightLocation) {
+      if (rightLocation - parseInt(target.style.left.split("px")[0]) > 10) {
+        target.style.left = parseInt(target.style.left.split("px")[0]) + 10 + "px";
+        requestAniFrame(() => {
+          goRight(target, rightLocation);
+        });
+      } else {
+        target.style.left = rightLocation + "px";
+      }
+    }
+    function touchMove(e) {
+      e.preventDefault();
+      const target = e.currentTarget;
+      if (e.targetTouches.length === 1) {
+        const touch = e.targetTouches[0];
+        state.nx = touch.clientX - state.position.x;
+        state.ny = touch.clientY - state.position.y;
+        state.xPum = state.startLeft + state.nx;
+        state.yPum = state.startTop + state.ny;
+        const rightLocation = state.screenWidth - state.elWidth - state.boundary.right;
+        if (Math.abs(state.xPum) > rightLocation) {
+          state.xPum = rightLocation;
+        } else if (state.xPum <= state.boundary.left) {
+          state.xPum = state.boundary.left;
+        }
+        if (state.yPum < state.boundary.top) {
+          state.yPum = state.boundary.top;
+        } else if (state.yPum > state.screenHeight - state.elHeight - state.boundary.bottom) {
+          state.yPum = state.screenHeight - state.elHeight - state.boundary.bottom;
+        }
+        if (props.direction != "y") {
+          target.style.left = state.xPum + "px";
+        }
+        if (props.direction != "x") {
+          target.style.top = state.yPum + "px";
+        }
+      }
+    }
+    function touchEnd(e) {
+      const target = e.currentTarget;
+      const touch = e.changedTouches[0];
+      let currX = touch.clientX;
+      const rightLocation = state.screenWidth - state.elWidth - state.boundary.right;
+      if (currX > rightLocation) {
+        currX = rightLocation;
+      } else if (currX < state.boundary.left) {
+        currX = state.boundary.left;
+      } else {
+        currX = currX < state.screenWidth / 2 ? state.boundary.left : rightLocation;
+      }
+      if (props.direction != "y" && props.attract) {
+        if (currX < state.screenWidth / 2) {
+          requestAniFrame(() => {
+            goLeft(target);
+          });
+        } else {
+          requestAniFrame(() => {
+            goRight(target, rightLocation);
+          });
+        }
+      }
+      if (props.direction != "x") {
+        target.style.top = state.yPum + "px";
+      }
+    }
+    function touchStart(e) {
+      const target = e.currentTarget;
+      const touches = e.touches[0];
+      const touch = e.targetTouches[0];
+      state.startTop = target.offsetTop;
+      state.startLeft = target.offsetLeft;
+      state.position.x = touches.clientX;
+      state.position.y = touches.clientY;
+      state.nx = touch.clientX - state.position.x;
+      state.ny = touch.clientY - state.position.y;
+      state.xPum = state.startLeft + state.nx;
+      state.yPum = state.startTop + state.ny;
+    }
+    onMounted(() => {
+      getInfo();
+      state.boundary = props.boundary;
+    });
+    onActivated(() => {
+      if (state.keepAlive) {
+        state.keepAlive = false;
+      }
+    });
+    onDeactivated(() => {
+      state.keepAlive = true;
+      myDrag.removeEventListener("touchstart", touchStart);
+      myDrag.removeEventListener("touchmove", touchMove);
+      myDrag.removeEventListener("touchend", touchEnd);
+    });
+    return {
+      classes,
+      myDrag,
+      touchStart,
+      touchMove,
+      touchEnd
+    };
   }
-  function m(t2) {
-    const e2 = t2.currentTarget;
-    let o2 = t2.changedTouches[0].clientX;
-    const n2 = c2.screenWidth - c2.elWidth - c2.boundary.right;
-    o2 = o2 > n2 ? n2 : o2 < c2.boundary.left || o2 < c2.screenWidth / 2 ? c2.boundary.left : n2, i2.direction != "y" && i2.attract && (o2 < c2.screenWidth / 2 ? p(() => {
-      y2(e2);
-    }) : p(() => {
-      d2(e2, n2);
-    })), i2.direction != "x" && (e2.style.top = c2.yPum + "px");
-  }
-  function x(t2) {
-    const e2 = t2.currentTarget, o2 = t2.touches[0], n2 = t2.targetTouches[0];
-    c2.startTop = e2.offsetTop, c2.startLeft = e2.offsetLeft, c2.position.x = o2.clientX, c2.position.y = o2.clientY, c2.nx = n2.clientX - c2.position.x, c2.ny = n2.clientY - c2.position.y, c2.xPum = c2.startLeft + c2.nx, c2.yPum = c2.startTop + c2.ny;
-  }
-  return n(() => {
-    !function() {
-      const t2 = document.documentElement;
-      c2.elWidth = u2.value.offsetWidth, c2.elHeight = u2.value.offsetHeight, c2.screenWidth = t2.clientWidth || 375, c2.screenHeight = t2.clientHeight || 667;
-    }(), c2.boundary = i2.boundary;
-  }), r(() => {
-    c2.keepAlive && (c2.keepAlive = false);
-  }), s(() => {
-    c2.keepAlive = true, u2.removeEventListener("touchstart", x), u2.removeEventListener("touchmove", h2), u2.removeEventListener("touchend", m);
-  }), { classes: a2, myDrag: u2, touchStart: x, touchMove: h2, touchEnd: m };
-} }), [["render", function(t2, e2, o2, n2, r2, s2) {
-  return i(), l("view", { class: u(t2.classes), ref: "myDrag", onTouchstart: e2[0] || (e2[0] = (e3) => t2.touchStart(e3)), onTouchmove: e2[1] || (e2[1] = (e3) => t2.touchMove(e3)), onTouchend: e2[2] || (e2[2] = (e3) => t2.touchEnd(e3)) }, [c(t2.$slots, "default")], 34);
-}]]);
-export { h as default };
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes),
+    ref: "myDrag",
+    onTouchstart: _cache[0] || (_cache[0] = ($event) => _ctx.touchStart($event)),
+    onTouchmove: _cache[1] || (_cache[1] = ($event) => _ctx.touchMove($event)),
+    onTouchend: _cache[2] || (_cache[2] = ($event) => _ctx.touchEnd($event))
+  }, [
+    renderSlot(_ctx.$slots, "default")
+  ], 34);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/Ecard.js

@@ -1,29 +1,164 @@
 /*!
-* @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 { ref as e, watch as a, resolveComponent as t, openBlock as u, createElementBlock as l, createElementVNode as n, toDisplayString as r, Fragment as c, renderList as i, normalizeClass as d, withDirectives as o, vModelText as p, createTextVNode as m, createVNode as s } from "vue";
-import { c as v } from "./component.js";
-import { _ as h } from "./plugin-vue_export-helper.js";
+import { ref, watch, resolveComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, Fragment, renderList, normalizeClass, withDirectives, vModelText, createTextVNode, createVNode } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
-const { componentName: _, create: x, translate: g } = v("ecard"), f = x({ props: { chooseText: { type: String, default: "" }, otherValueText: { type: String, default: "" }, dataList: { type: [Object, Array], default: () => [] }, cardAmountMin: { type: Number, default: 1 }, cardAmountMax: { type: Number, default: 9999 }, cardBuyMin: { type: Number, default: 1 }, cardBuyMax: { type: Number, default: 9999 }, modelValue: { type: [Number, String], default: 0 }, placeholder: { type: String, default: "" }, suffix: { type: String, default: "\xA5" } }, emits: ["inputChange", "changeStep", "inputClick", "change", "update:modelValue"], setup(t2, { emit: u2 }) {
-  const l2 = e(null), n2 = e(null), r2 = e(""), c2 = e(t2.cardAmountMin), i2 = e(t2.modelValue);
-  return a(() => t2.modelValue, (e2) => {
-    i2.value = e2;
-  }), { handleClick: (e2, a2) => {
-    l2.value = a2, c2.value = t2.cardAmountMin, n2.value = e2.price, u2("change", e2), u2("update:modelValue", e2.price);
-  }, changeStep: (e2) => {
-    c2.value = e2, u2("changeStep", c2.value, n2.value);
-  }, change: (e2) => {
-    let a2 = e2.target.value.replace(/[^\d]/g, "");
-    r2.value = a2, n2.value = a2, Number(a2) > t2.cardAmountMax && (r2.value = t2.cardAmountMax, n2.value = t2.cardAmountMax), Number(a2) < t2.cardAmountMin && (r2.value = t2.cardAmountMin, n2.value = t2.cardAmountMin), u2("inputChange", Number(r2.value)), u2("update:modelValue", Number(r2.value));
-  }, inputClick: () => {
-    l2.value = "input", c2.value = t2.cardAmountMin, n2.value = r2.value, u2("update:modelValue", r2.value), u2("inputClick");
-  }, stepValue: c2, currentIndex: l2, inputValue: r2, money: i2, translate: g };
-} }), V = { class: "nut-ecard" }, y = { class: "nut-ecard__title" }, M = { class: "nut-ecard__list" }, C = ["onClick"], A = { class: "nut-ecard__list__input--con" }, b = ["placeholder"], k = { class: "nut-ecard__list__step" };
-var N = h(f, [["render", function(e2, a2, v2, h2, _2, x2) {
-  const g2 = t("nut-inputnumber");
-  return u(), l("view", V, [n("view", y, r(e2.chooseText || e2.translate("chooseText")), 1), n("view", M, [(u(true), l(c, null, i(e2.dataList, (a3, t2) => (u(), l("view", { key: t2, class: d(["nut-ecard__list__item", e2.currentIndex == t2 ? "active" : ""]), onClick: (u2) => e2.handleClick(a3, t2) }, r(a3.price), 11, C))), 128)), n("view", { class: d(["nut-ecard__list__input", e2.currentIndex == "input" ? "active" : ""]), onClick: a2[2] || (a2[2] = (...a3) => e2.inputClick && e2.inputClick(...a3)) }, [n("view", null, r(e2.otherValueText || e2.translate("otherValueText")), 1), n("view", A, [o(n("input", { class: "nut-ecard__list__input--input", type: "text", "onUpdate:modelValue": a2[0] || (a2[0] = (a3) => e2.inputValue = a3), onInput: a2[1] || (a2[1] = (...a3) => e2.change && e2.change(...a3)), placeholder: e2.placeholder || e2.translate("placeholder") }, null, 40, b), [[p, e2.inputValue]]), m(" " + r(e2.suffix), 1)])], 2), n("view", k, [n("view", null, r(e2.suffix) + r(e2.money), 1), s(g2, { modelValue: e2.stepValue, "onUpdate:modelValue": a2[3] || (a2[3] = (a3) => e2.stepValue = a3), min: e2.cardBuyMin, max: e2.cardBuyMax, onChange: e2.changeStep }, null, 8, ["modelValue", "min", "max", "onChange"])])])]);
-}]]);
-export { N as default };
+const { componentName, create, translate } = createComponent("ecard");
+const _sfc_main = create({
+  props: {
+    chooseText: {
+      type: String,
+      default: ""
+    },
+    otherValueText: {
+      type: String,
+      default: ""
+    },
+    dataList: {
+      type: [Object, Array],
+      default: () => {
+        return [];
+      }
+    },
+    cardAmountMin: {
+      type: Number,
+      default: 1
+    },
+    cardAmountMax: {
+      type: Number,
+      default: 9999
+    },
+    cardBuyMin: {
+      type: Number,
+      default: 1
+    },
+    cardBuyMax: {
+      type: Number,
+      default: 9999
+    },
+    modelValue: {
+      type: [Number, String],
+      default: 0
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    suffix: {
+      type: String,
+      default: "\xA5"
+    }
+  },
+  emits: ["inputChange", "changeStep", "inputClick", "change", "update:modelValue"],
+  setup(props, { emit }) {
+    const currentIndex = ref(null);
+    const currentValue = ref(null);
+    const inputValue = ref("");
+    const stepValue = ref(props.cardAmountMin);
+    const money = ref(props.modelValue);
+    const handleClick = (item, index2) => {
+      currentIndex.value = index2;
+      stepValue.value = props.cardAmountMin;
+      currentValue.value = item.price;
+      emit("change", item);
+      emit("update:modelValue", item.price);
+    };
+    const change = (event) => {
+      let input = event.target;
+      let val = input.value.replace(/[^\d]/g, "");
+      inputValue.value = val;
+      currentValue.value = val;
+      if (Number(val) > props.cardAmountMax) {
+        inputValue.value = props.cardAmountMax;
+        currentValue.value = props.cardAmountMax;
+      }
+      if (Number(val) < props.cardAmountMin) {
+        inputValue.value = props.cardAmountMin;
+        currentValue.value = props.cardAmountMin;
+      }
+      emit("inputChange", Number(inputValue.value));
+      emit("update:modelValue", Number(inputValue.value));
+    };
+    const inputClick = () => {
+      currentIndex.value = "input";
+      stepValue.value = props.cardAmountMin;
+      currentValue.value = inputValue.value;
+      emit("update:modelValue", inputValue.value);
+      emit("inputClick");
+    };
+    const changeStep = (value) => {
+      stepValue.value = value;
+      emit("changeStep", stepValue.value, currentValue.value);
+    };
+    watch(() => props.modelValue, (value) => {
+      money.value = value;
+    });
+    return {
+      handleClick,
+      changeStep,
+      change,
+      inputClick,
+      stepValue,
+      currentIndex,
+      inputValue,
+      money,
+      translate
+    };
+  }
+});
+const _hoisted_1 = { class: "nut-ecard" };
+const _hoisted_2 = { class: "nut-ecard__title" };
+const _hoisted_3 = { class: "nut-ecard__list" };
+const _hoisted_4 = ["onClick"];
+const _hoisted_5 = { class: "nut-ecard__list__input--con" };
+const _hoisted_6 = ["placeholder"];
+const _hoisted_7 = { class: "nut-ecard__list__step" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_inputnumber = resolveComponent("nut-inputnumber");
+  return openBlock(), createElementBlock("view", _hoisted_1, [
+    createElementVNode("view", _hoisted_2, toDisplayString(_ctx.chooseText || _ctx.translate("chooseText")), 1),
+    createElementVNode("view", _hoisted_3, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.dataList, (item, index2) => {
+        return openBlock(), createElementBlock("view", {
+          key: index2,
+          class: normalizeClass(["nut-ecard__list__item", _ctx.currentIndex == index2 ? "active" : ""]),
+          onClick: ($event) => _ctx.handleClick(item, index2)
+        }, toDisplayString(item.price), 11, _hoisted_4);
+      }), 128)),
+      createElementVNode("view", {
+        class: normalizeClass(["nut-ecard__list__input", _ctx.currentIndex == "input" ? "active" : ""]),
+        onClick: _cache[2] || (_cache[2] = (...args) => _ctx.inputClick && _ctx.inputClick(...args))
+      }, [
+        createElementVNode("view", null, toDisplayString(_ctx.otherValueText || _ctx.translate("otherValueText")), 1),
+        createElementVNode("view", _hoisted_5, [
+          withDirectives(createElementVNode("input", {
+            class: "nut-ecard__list__input--input",
+            type: "text",
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.inputValue = $event),
+            onInput: _cache[1] || (_cache[1] = (...args) => _ctx.change && _ctx.change(...args)),
+            placeholder: _ctx.placeholder || _ctx.translate("placeholder")
+          }, null, 40, _hoisted_6), [
+            [vModelText, _ctx.inputValue]
+          ]),
+          createTextVNode(" " + toDisplayString(_ctx.suffix), 1)
+        ])
+      ], 2),
+      createElementVNode("view", _hoisted_7, [
+        createElementVNode("view", null, toDisplayString(_ctx.suffix) + toDisplayString(_ctx.money), 1),
+        createVNode(_component_nut_inputnumber, {
+          modelValue: _ctx.stepValue,
+          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => _ctx.stepValue = $event),
+          min: _ctx.cardBuyMin,
+          max: _ctx.cardBuyMax,
+          onChange: _ctx.changeStep
+        }, null, 8, ["modelValue", "min", "max", "onChange"])
+      ])
+    ])
+  ]);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };