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

package/dist/packages/_es/Popup.js

@@ -0,0 +1,302 @@
+/*!
+* @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, onBeforeUnmount, onBeforeMount, onActivated, onDeactivated, watch, toRefs, resolveComponent, openBlock, createBlock, Teleport, normalizeClass, normalizeStyle, createCommentVNode, createVNode, Transition, withCtx, withDirectives, createElementVNode, renderSlot, createElementBlock, vShow } from "vue";
+import overlay, { overlayProps } from "./OverLay.js";
+import _sfc_main$1 from "./Icon.js";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import "../locale/lang";
+import "./pxCheck.js";
+let count = 0;
+const CLSNAME = "nut-overflow-hidden";
+const useLockScroll = (isLock) => {
+  const lock = () => {
+    if (isLock()) {
+      !count && document.body.classList.add(CLSNAME);
+      count++;
+    }
+  };
+  const unlock = () => {
+    if (isLock() && count) {
+      count--;
+      !count && document.body.classList.remove(CLSNAME);
+    }
+  };
+  return [lock, unlock];
+};
+const { componentName, create } = createComponent("popup");
+let _zIndex = 2e3;
+const popupProps = {
+  ...overlayProps,
+  position: {
+    type: String,
+    default: "center"
+  },
+  transition: String,
+  style: {
+    type: Object
+  },
+  popClass: {
+    type: String,
+    default: ""
+  },
+  closeable: {
+    type: Boolean,
+    default: false
+  },
+  closeIconPosition: {
+    type: String,
+    default: "top-right"
+  },
+  closeIcon: {
+    type: String,
+    default: "close"
+  },
+  destroyOnClose: {
+    type: Boolean,
+    default: true
+  },
+  teleport: {
+    type: [String, Element],
+    default: "body"
+  },
+  overlay: {
+    type: Boolean,
+    default: true
+  },
+  round: {
+    type: Boolean,
+    default: false
+  },
+  isWrapTeleport: {
+    type: Boolean,
+    default: true
+  },
+  safeAreaInsetBottom: {
+    type: Boolean,
+    default: false
+  }
+};
+const _sfc_main = create({
+  components: {
+    [overlay.name]: overlay,
+    [_sfc_main$1.name]: _sfc_main$1
+  },
+  props: {
+    ...popupProps
+  },
+  emits: ["click", "click-close-icon", "open", "close", "opend", "closed", "update:visible", "click-overlay"],
+  setup(props, { emit }) {
+    const popupRef = ref();
+    const state = reactive({
+      zIndex: props.zIndex,
+      showSlot: true,
+      transitionName: `popup-fade-${props.position}`,
+      overLayCount: 1,
+      keepAlive: false,
+      closed: props.closeable
+    });
+    const [lockScroll, unlockScroll] = useLockScroll(() => props.lockScroll);
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true,
+        ["round"]: props.round,
+        [`popup-${props.position}`]: true,
+        [`popup-${props.position}--safebottom`]: props.position === "bottom" && props.safeAreaInsetBottom,
+        [props.popClass]: true
+      };
+    });
+    const popStyle = computed(() => {
+      return {
+        zIndex: state.zIndex,
+        animationDuration: props.duration ? `${props.duration}s` : "initial",
+        ...props.style
+      };
+    });
+    const open = () => {
+      if (props.zIndex != 2e3) {
+        _zIndex = Number(props.zIndex);
+      }
+      emit("update:visible", true);
+      lockScroll();
+      state.zIndex = ++_zIndex;
+      if (props.destroyOnClose) {
+        state.showSlot = true;
+      }
+      emit("open");
+    };
+    const close = () => {
+      unlockScroll();
+      emit("update:visible", false);
+      if (props.destroyOnClose) {
+        setTimeout(() => {
+          state.showSlot = false;
+          emit("close");
+        }, +props.duration * 1e3);
+      }
+    };
+    const onClick = (e) => {
+      emit("click", e);
+    };
+    const onClickCloseIcon = (e) => {
+      emit("click-close-icon", e);
+      close();
+    };
+    const onClickOverlay = (e) => {
+      if (props.closeOnClickOverlay) {
+        emit("click-overlay", e);
+        close();
+      }
+    };
+    const onOpened = (e) => {
+      emit("opend", e);
+    };
+    const onClosed = (e) => {
+      emit("closed", e);
+    };
+    onMounted(() => {
+      props.transition ? state.transitionName = props.transition : state.transitionName = `popup-slide-${props.position}`;
+      props.visible && open();
+    });
+    onBeforeUnmount(() => {
+      props.visible && close();
+    });
+    onBeforeMount(() => {
+      if (props.visible) {
+        unlockScroll();
+      }
+    });
+    onActivated(() => {
+      if (state.keepAlive) {
+        emit("update:visible", true);
+        state.keepAlive = false;
+      }
+    });
+    onDeactivated(() => {
+      if (props.visible) {
+        close();
+        state.keepAlive = true;
+      }
+    });
+    watch(() => props.visible, (value) => {
+      if (value) {
+        open();
+      } else {
+        close();
+      }
+    });
+    watch(() => props.position, (value) => {
+      value === "center" ? state.transitionName = "popup-fade" : state.transitionName = `popup-slide-${value}`;
+    });
+    watch(() => props.closeable, (value) => {
+      state.closed = value;
+    });
+    return {
+      ...toRefs(state),
+      popStyle,
+      classes,
+      onClick,
+      onClickCloseIcon,
+      onClickOverlay,
+      onOpened,
+      onClosed,
+      popupRef
+    };
+  }
+});
+const _hoisted_1 = { key: 1 };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_overlay = resolveComponent("nut-overlay");
+  const _component_nut_icon = resolveComponent("nut-icon");
+  return _ctx.isWrapTeleport ? (openBlock(), createBlock(Teleport, {
+    key: 0,
+    to: _ctx.teleport
+  }, [
+    _ctx.overlay ? (openBlock(), createBlock(_component_nut_overlay, {
+      key: 0,
+      visible: _ctx.visible,
+      "close-on-click-overlay": _ctx.closeOnClickOverlay,
+      class: normalizeClass(_ctx.overlayClass),
+      style: normalizeStyle(_ctx.overlayStyle),
+      "z-index": _ctx.zIndex,
+      "lock-scroll": _ctx.lockScroll,
+      duration: _ctx.duration,
+      onClick: _ctx.onClickOverlay
+    }, null, 8, ["visible", "close-on-click-overlay", "class", "style", "z-index", "lock-scroll", "duration", "onClick"])) : createCommentVNode("", true),
+    createVNode(Transition, {
+      name: _ctx.transitionName,
+      onAfterEnter: _ctx.onOpened,
+      onAfterLeave: _ctx.onClosed
+    }, {
+      default: withCtx(() => [
+        withDirectives(createElementVNode("view", {
+          class: normalizeClass(_ctx.classes),
+          style: normalizeStyle(_ctx.popStyle),
+          onClick: _cache[1] || (_cache[1] = (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          ref: "popupRef"
+        }, [
+          _ctx.showSlot ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true),
+          _ctx.closed ? (openBlock(), createElementBlock("view", {
+            key: 1,
+            onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClickCloseIcon && _ctx.onClickCloseIcon(...args)),
+            class: normalizeClass(["nutui-popup__close-icon", "nutui-popup__close-icon--" + _ctx.closeIconPosition])
+          }, [
+            createVNode(_component_nut_icon, {
+              name: _ctx.closeIcon,
+              size: "12px"
+            }, null, 8, ["name"])
+          ], 2)) : createCommentVNode("", true)
+        ], 6), [
+          [vShow, _ctx.visible]
+        ])
+      ]),
+      _: 3
+    }, 8, ["name", "onAfterEnter", "onAfterLeave"])
+  ], 8, ["to"])) : (openBlock(), createElementBlock("view", _hoisted_1, [
+    _ctx.overlay ? (openBlock(), createBlock(_component_nut_overlay, {
+      key: 0,
+      visible: _ctx.visible,
+      "close-on-click-overlay": _ctx.closeOnClickOverlay,
+      class: normalizeClass(_ctx.overlayClass),
+      style: normalizeStyle(_ctx.overlayStyle),
+      "z-index": _ctx.zIndex,
+      "lock-scroll": _ctx.lockScroll,
+      duration: _ctx.duration,
+      onClick: _ctx.onClickOverlay
+    }, null, 8, ["visible", "close-on-click-overlay", "class", "style", "z-index", "lock-scroll", "duration", "onClick"])) : createCommentVNode("", true),
+    createVNode(Transition, {
+      name: _ctx.transitionName,
+      onAfterEnter: _ctx.onOpened,
+      onAfterLeave: _ctx.onClosed
+    }, {
+      default: withCtx(() => [
+        withDirectives(createElementVNode("view", {
+          class: normalizeClass(_ctx.classes),
+          style: normalizeStyle(_ctx.popStyle),
+          onClick: _cache[3] || (_cache[3] = (...args) => _ctx.onClick && _ctx.onClick(...args))
+        }, [
+          _ctx.showSlot ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true),
+          _ctx.closed ? (openBlock(), createElementBlock("view", {
+            key: 1,
+            onClick: _cache[2] || (_cache[2] = (...args) => _ctx.onClickCloseIcon && _ctx.onClickCloseIcon(...args)),
+            class: normalizeClass(["nutui-popup__close-icon", "nutui-popup__close-icon--" + _ctx.closeIconPosition])
+          }, [
+            createVNode(_component_nut_icon, {
+              name: _ctx.closeIcon,
+              size: "12px"
+            }, null, 8, ["name"])
+          ], 2)) : createCommentVNode("", true)
+        ], 6), [
+          [vShow, _ctx.visible]
+        ])
+      ]),
+      _: 3
+    }, 8, ["name", "onAfterEnter", "onAfterLeave"])
+  ]));
+}
+var Popup = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { Popup as default, popupProps };

package/dist/packages/_es/Price.js

@@ -0,0 +1,123 @@
+/*!
+* @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 { computed, openBlock, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, toDisplayString } 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 } = createComponent("price");
+const _sfc_main = create({
+  props: {
+    price: {
+      type: [Number, String],
+      default: 0
+    },
+    needSymbol: {
+      type: Boolean,
+      default: true
+    },
+    symbol: {
+      type: String,
+      default: "¥"
+    },
+    decimalDigits: {
+      type: [Number, String],
+      default: 2
+    },
+    thousands: {
+      type: Boolean,
+      default: false
+    },
+    position: {
+      type: String,
+      default: "before"
+    },
+    size: {
+      type: String,
+      default: "large"
+    }
+  },
+  setup(props) {
+    const classes = computed(() => {
+      return {
+        [componentName]: true
+      };
+    });
+    const showSymbol = computed(() => {
+      const symbol = props.needSymbol ? props.symbol : "";
+      return symbol;
+    });
+    const checkPoint = (price) => {
+      return String(price).indexOf(".") > 0;
+    };
+    const formatThousands = (num) => {
+      if (Number(num) == 0) {
+        num = 0;
+      }
+      if (checkPoint(num)) {
+        num = Number(num).toFixed(props.decimalDigits);
+        num = typeof num.split(".") === "string" ? num.split(".") : num.split(".")[0];
+      } else {
+        num = num.toString();
+      }
+      if (props.thousands) {
+        return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
+      } else {
+        return num;
+      }
+    };
+    const formatDecimal = (decimalNum) => {
+      if (Number(decimalNum) == 0) {
+        decimalNum = 0;
+      }
+      if (checkPoint(decimalNum)) {
+        decimalNum = Number(decimalNum).toFixed(props.decimalDigits);
+        decimalNum = typeof decimalNum.split(".") === "string" ? 0 : decimalNum.split(".")[1] ? decimalNum.split(".")[1] : 0;
+      } else {
+        decimalNum = 0;
+      }
+      const result = "0." + decimalNum;
+      const resultFixed = Number(result).toFixed(props.decimalDigits);
+      return String(resultFixed).substring(2, resultFixed.length);
+    };
+    return {
+      classes,
+      showSymbol,
+      checkPoint,
+      formatThousands,
+      formatDecimal
+    };
+  }
+});
+const _hoisted_1 = ["innerHTML"];
+const _hoisted_2 = ["innerHTML"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes)
+  }, [
+    _ctx.needSymbol && _ctx.position == "before" ? (openBlock(), createElementBlock("view", {
+      key: 0,
+      class: normalizeClass(["nut-price--symbol", `nut-price--symbol-${_ctx.size}`]),
+      innerHTML: _ctx.showSymbol
+    }, null, 10, _hoisted_1)) : createCommentVNode("", true),
+    createElementVNode("view", {
+      class: normalizeClass(`nut-price--${_ctx.size}`)
+    }, toDisplayString(_ctx.formatThousands(_ctx.price)), 3),
+    _ctx.decimalDigits != 0 ? (openBlock(), createElementBlock("view", {
+      key: 1,
+      class: normalizeClass(`nut-price--decimal-${_ctx.size}`)
+    }, ".", 2)) : createCommentVNode("", true),
+    createElementVNode("view", {
+      class: normalizeClass(`nut-price--decimal-${_ctx.size}`)
+    }, toDisplayString(_ctx.formatDecimal(_ctx.price)), 3),
+    _ctx.needSymbol && _ctx.position == "after" ? (openBlock(), createElementBlock("view", {
+      key: 2,
+      class: normalizeClass(["nut-price--symbol", `nut-price--symbol-${_ctx.size}`]),
+      innerHTML: _ctx.showSymbol
+    }, null, 10, _hoisted_2)) : createCommentVNode("", true)
+  ], 2);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/Progress.js

@@ -0,0 +1,151 @@
+/*!
+* @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 { useSlots, ref, computed, onMounted, resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, normalizeStyle, toDisplayString, createCommentVNode, renderSlot, createBlock } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import "../locale/lang";
+const { create } = createComponent("progress");
+const _sfc_main = create({
+  props: {
+    percentage: {
+      type: [Number, String],
+      default: 0,
+      required: true
+    },
+    size: {
+      type: String,
+      default: "base"
+    },
+    status: {
+      type: String,
+      default: ""
+    },
+    strokeWidth: {
+      type: [Number, String],
+      default: ""
+    },
+    textInside: {
+      type: Boolean,
+      default: false
+    },
+    showText: {
+      type: Boolean,
+      default: true
+    },
+    strokeColor: {
+      type: String,
+      default: ""
+    },
+    textColor: {
+      type: String,
+      default: ""
+    },
+    textBackground: {
+      type: String,
+      default: ""
+    },
+    iconName: {
+      type: String,
+      default: "checked"
+    },
+    iconColor: {
+      type: String,
+      default: "#439422"
+    },
+    isShowPercentage: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props, { emit }) {
+    const slotDefault = !!useSlots().default;
+    const height = ref(props.strokeWidth + "px");
+    const progressOuter = ref();
+    const insideText = ref();
+    const bgStyle = computed(() => {
+      return {
+        width: props.percentage + "%",
+        background: props.strokeColor || ""
+      };
+    });
+    const textStyle = computed(() => {
+      return {
+        color: props.textColor || ""
+      };
+    });
+    onMounted(() => {
+    });
+    return {
+      height,
+      bgStyle,
+      textStyle,
+      progressOuter,
+      insideText,
+      slotDefault
+    };
+  }
+});
+const _hoisted_1 = { class: "nut-progress" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_icon = resolveComponent("nut-icon");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("div", {
+      class: normalizeClass(["nut-progress-outer", [_ctx.showText && !_ctx.textInside ? "nut-progress-outer-part" : "", _ctx.size ? "nut-progress-" + _ctx.size : ""]]),
+      ref: "progressOuter",
+      style: normalizeStyle({ height: _ctx.height })
+    }, [
+      createElementVNode("div", {
+        class: normalizeClass(["nut-progress-inner", _ctx.status == "active" ? "nut-active" : ""]),
+        style: normalizeStyle(_ctx.bgStyle)
+      }, [
+        _ctx.showText && _ctx.textInside && !_ctx.slotDefault ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "nut-progress-text nut-progress-insidetext",
+          ref: "insideText",
+          style: normalizeStyle({
+            lineHeight: _ctx.height,
+            left: `${_ctx.percentage}%`,
+            transform: `translate(-${+_ctx.percentage}%,-50%)`,
+            background: _ctx.textBackground || _ctx.strokeColor
+          })
+        }, [
+          createElementVNode("span", {
+            style: normalizeStyle(_ctx.textStyle)
+          }, toDisplayString(_ctx.percentage) + toDisplayString(_ctx.isShowPercentage ? "%" : ""), 5)
+        ], 4)) : createCommentVNode("", true),
+        _ctx.showText && _ctx.textInside && _ctx.slotDefault ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          ref: "insideText",
+          style: normalizeStyle({
+            position: `absolute`,
+            top: `50%`,
+            left: `${_ctx.percentage}%`,
+            transform: `translate(-${+_ctx.percentage}%,-50%)`
+          })
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 4)) : createCommentVNode("", true)
+      ], 6)
+    ], 6),
+    _ctx.showText && !_ctx.textInside ? (openBlock(), createElementBlock("div", {
+      key: 0,
+      class: "nut-progress-text",
+      style: normalizeStyle({ lineHeight: _ctx.height })
+    }, [
+      _ctx.status == "active" || _ctx.status == "" ? (openBlock(), createElementBlock("span", {
+        key: 0,
+        style: normalizeStyle(_ctx.textStyle)
+      }, toDisplayString(_ctx.percentage) + toDisplayString(_ctx.isShowPercentage ? "%" : ""), 5)) : _ctx.status == "icon" ? (openBlock(), createBlock(_component_nut_icon, {
+        key: 1,
+        size: "16px",
+        name: _ctx.iconName,
+        color: _ctx.iconColor
+      }, null, 8, ["name", "color"])) : createCommentVNode("", true)
+    ], 4)) : createCommentVNode("", true)
+  ]);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };