@nutui/nutui 3.1.0 → 3.1.2-3.beta-4

package/dist/packages/_es/Drag.js

@@ -0,0 +1,204 @@
+/*!
+* @nutui/nutui v3.1.23.beta-4 Mon Jul 25 2022 22:38:45 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
+* Released under the MIT License.
+*/
+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, 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 _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

@@ -0,0 +1,164 @@
+/*!
+* @nutui/nutui v3.1.23.beta-4 Mon Jul 25 2022 22:38:45 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
+* Released under the MIT License.
+*/
+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, 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 };

package/dist/packages/_es/Elevator.js

@@ -0,0 +1,262 @@
+/*!
+* @nutui/nutui v3.1.23.beta-4 Mon Jul 25 2022 22:38:45 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
+* Released under the MIT License.
+*/
+import { ref, reactive, computed, onMounted, watch, nextTick, toRefs, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, Fragment, renderList, toDisplayString, renderSlot, withDirectives, vShow, createCommentVNode, withModifiers } from "vue";
+import { c as createComponent } from "./component.js";
+import { u as useExpose } from "./index3.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import "../locale/lang";
+const { componentName, create } = createComponent("elevator");
+const _sfc_main = create({
+  props: {
+    height: {
+      type: [Number, String],
+      default: "200px"
+    },
+    acceptKey: {
+      type: [String],
+      default: "title"
+    },
+    indexList: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    isSticky: {
+      type: [Boolean],
+      default: false
+    },
+    spaceHeight: {
+      type: [Number],
+      default: 23
+    },
+    titleHeight: {
+      type: [Number],
+      default: 35
+    }
+  },
+  emits: ["click-item", "click-index"],
+  setup(props, context) {
+    const listview = ref(null);
+    const state = reactive({
+      anchorIndex: 0,
+      codeIndex: 0,
+      listHeight: [],
+      listGroup: [],
+      touchState: {
+        y1: 0,
+        y2: 0
+      },
+      scrollStart: false,
+      currentIndex: 0,
+      currentData: {},
+      currentKey: "",
+      scrollY: 0,
+      diff: -1,
+      fixedTop: 0
+    });
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+    const fixedStyle = computed(() => {
+      return {
+        transform: `translate3d(0, ${state.scrollY + state.fixedTop}px, 0)`
+      };
+    });
+    const clientHeight = computed(() => {
+      return listview.value.clientHeight;
+    });
+    const getData = (el, name) => {
+      const prefix = "data-";
+      return el.getAttribute(prefix + name);
+    };
+    const setListGroup = (el) => {
+      nextTick(() => {
+        if (!state.listGroup.includes(el) && el != null) {
+          state.listGroup.push(el);
+        }
+      });
+    };
+    const calculateHeight = () => {
+      let height = 0;
+      state.listHeight.push(height);
+      for (let i = 0; i < state.listGroup.length; i++) {
+        let item = state.listGroup[i];
+        height += item.clientHeight;
+        state.listHeight.push(height);
+      }
+    };
+    const scrollTo = (index2) => {
+      if (!index2 && index2 !== 0) {
+        return;
+      }
+      if (index2 < 0)
+        index2 = 0;
+      if (index2 > state.listHeight.length - 2)
+        index2 = state.listHeight.length - 2;
+      state.codeIndex = index2;
+      listview.value.scrollTo(0, state.listHeight[index2]);
+    };
+    const touchStart = (e) => {
+      state.scrollStart = true;
+      let index2 = getData(e.target, "index");
+      let firstTouch = e.touches[0];
+      state.touchState.y1 = firstTouch.pageY;
+      state.anchorIndex = +index2;
+      state.codeIndex = +index2;
+      scrollTo(+index2);
+    };
+    const touchMove = (e) => {
+      let firstTouch = e.touches[0];
+      state.touchState.y2 = firstTouch.pageY;
+      let delta = (state.touchState.y2 - state.touchState.y1) / props.spaceHeight | 0;
+      state.codeIndex = state.anchorIndex + delta;
+      scrollTo(state.codeIndex);
+    };
+    const touchEnd = () => {
+      state.scrollStart = false;
+    };
+    const handleClickItem = (key, item) => {
+      context.emit("click-item", key, item);
+      state.currentData = item;
+      state.currentKey = key;
+    };
+    const handleClickIndex = (key) => {
+      context.emit("click-index", key);
+    };
+    const listViewScroll = (e) => {
+      let target = e.target;
+      let scrollTop = target.scrollTop;
+      const listHeight = state.listHeight;
+      state.scrollY = scrollTop;
+      for (let i = 0; i < listHeight.length - 1; i++) {
+        let height1 = listHeight[i];
+        let height2 = listHeight[i + 1];
+        if (state.scrollY >= height1 && state.scrollY < height2) {
+          state.currentIndex = i;
+          state.diff = height2 - state.scrollY;
+          return;
+        }
+      }
+      state.currentIndex = listHeight.length - 2;
+    };
+    onMounted(() => {
+      listview.value.addEventListener("scroll", listViewScroll);
+    });
+    useExpose({
+      scrollTo
+    });
+    watch(() => state.listGroup.length, () => {
+      state.listHeight = [];
+      nextTick(calculateHeight);
+    });
+    watch(() => state.diff, (newVal) => {
+      const listHeight = state.listHeight;
+      let fixedTop = newVal > 0 && newVal < props.titleHeight ? newVal - props.titleHeight : 0;
+      if (state.scrollY + clientHeight.value === listHeight[listHeight.length - 1]) {
+        if (fixedTop !== 0)
+          fixedTop = 0;
+      }
+      if (state.fixedTop === fixedTop)
+        return;
+      state.fixedTop = fixedTop;
+    });
+    return {
+      classes,
+      ...toRefs(state),
+      fixedStyle,
+      clientHeight,
+      setListGroup,
+      listview,
+      touchStart,
+      touchMove,
+      touchEnd,
+      handleClickItem,
+      handleClickIndex
+    };
+  }
+});
+const _hoisted_1 = { class: "nut-elevator__list__item__code" };
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = ["innerHTML"];
+const _hoisted_4 = { class: "fixed-title" };
+const _hoisted_5 = { class: "nut-elevator__bars__inner" };
+const _hoisted_6 = ["data-index", "onClick"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes)
+  }, [
+    createElementVNode("view", {
+      class: "nut-elevator__list",
+      ref: "listview",
+      style: normalizeStyle({ height: isNaN(+_ctx.height) ? _ctx.height : `${_ctx.height}px` })
+    }, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.indexList, (item) => {
+        return openBlock(), createElementBlock("view", {
+          class: "nut-elevator__list__item",
+          key: item[_ctx.acceptKey],
+          ref: _ctx.setListGroup
+        }, [
+          createElementVNode("view", _hoisted_1, toDisplayString(item[_ctx.acceptKey]), 1),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(item.list, (subitem) => {
+            return openBlock(), createElementBlock("view", {
+              class: normalizeClass(["nut-elevator__list__item__name", {
+                "nut-elevator__list__item__name--highcolor": _ctx.currentData.id === subitem.id && _ctx.currentKey === item[_ctx.acceptKey]
+              }]),
+              key: subitem["id"],
+              onClick: ($event) => _ctx.handleClickItem(item[_ctx.acceptKey], subitem)
+            }, [
+              !_ctx.$slots.default ? (openBlock(), createElementBlock("span", {
+                key: 0,
+                innerHTML: subitem.name
+              }, null, 8, _hoisted_3)) : renderSlot(_ctx.$slots, "default", {
+                key: 1,
+                item: subitem
+              })
+            ], 10, _hoisted_2);
+          }), 128))
+        ], 512);
+      }), 128)),
+      _ctx.isSticky ? withDirectives((openBlock(), createElementBlock("view", {
+        key: 0,
+        class: "nut-elevator__list__fixed",
+        style: normalizeStyle(_ctx.fixedStyle)
+      }, [
+        createElementVNode("span", _hoisted_4, toDisplayString(_ctx.indexList[_ctx.currentIndex][_ctx.acceptKey]), 1)
+      ], 4)), [
+        [vShow, _ctx.scrollY > 0]
+      ]) : createCommentVNode("", true)
+    ], 4),
+    _ctx.indexList.length ? withDirectives((openBlock(), createElementBlock("view", {
+      key: 0,
+      class: "nut-elevator__code--current"
+    }, toDisplayString(_ctx.indexList[_ctx.codeIndex][_ctx.acceptKey]), 513)), [
+      [vShow, _ctx.scrollStart]
+    ]) : createCommentVNode("", true),
+    createElementVNode("view", {
+      class: "nut-elevator__bars",
+      onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.touchStart && _ctx.touchStart(...args)),
+      onTouchmove: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.touchMove && _ctx.touchMove(...args), ["stop", "prevent"])),
+      onTouchend: _cache[2] || (_cache[2] = (...args) => _ctx.touchEnd && _ctx.touchEnd(...args))
+    }, [
+      createElementVNode("view", _hoisted_5, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.indexList, (item, index2) => {
+          return openBlock(), createElementBlock("view", {
+            class: normalizeClass(["nut-elevator__bars__inner__item", { active: item[_ctx.acceptKey] === _ctx.indexList[_ctx.currentIndex][_ctx.acceptKey] }]),
+            "data-index": index2,
+            key: item[_ctx.acceptKey],
+            onClick: ($event) => _ctx.handleClickIndex(item[_ctx.acceptKey])
+          }, toDisplayString(item[_ctx.acceptKey]), 11, _hoisted_6);
+        }), 128))
+      ])
+    ], 32)
+  ], 2);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };