@nutui/nutui 3.1.21-beta.0 → 3.1.21-beta.1

package/dist/packages/_es/BackTop.js

@@ -0,0 +1,163 @@
+/*!
+* @nutui/nutui v3.1.21-beta.0 Fri Apr 29 2022 13:06:00 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
+* Released under the MIT License.
+*/
+import { reactive, computed, onMounted, onUnmounted, onActivated, onDeactivated, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, withModifiers, renderSlot, 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 } = createComponent("backtop");
+const _sfc_main = create({
+  props: {
+    bottom: {
+      type: Number,
+      default: 20
+    },
+    right: {
+      type: Number,
+      default: 10
+    },
+    elId: {
+      type: [String, Element],
+      default: "body"
+    },
+    distance: {
+      type: Number,
+      default: 200
+    },
+    zIndex: {
+      type: Number,
+      default: 10
+    },
+    isAnimation: {
+      type: Boolean,
+      default: true
+    },
+    duration: {
+      type: Number,
+      default: 1e3
+    }
+  },
+  emits: ["click"],
+  setup(props, { emit }) {
+    const state = reactive({
+      backTop: false,
+      scrollTop: 0,
+      scrollEl: window,
+      startTime: 0,
+      keepAlive: false
+    });
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true,
+        show: state.backTop
+      };
+    });
+    const style = computed(() => {
+      return {
+        right: `${props.right}px`,
+        bottom: `${props.bottom}px`,
+        zIndex: props.zIndex
+      };
+    });
+    function scrollListener() {
+      if (state.scrollEl instanceof Window) {
+        state.scrollTop = state.scrollEl.pageYOffset;
+      } else {
+        state.scrollTop = state.scrollEl.scrollTop;
+      }
+      state.backTop = state.scrollTop >= props.distance;
+    }
+    function scroll(y = 0) {
+      if (state.scrollEl instanceof Window) {
+        window.scrollTo(0, y);
+      } else {
+        state.scrollEl.scrollTop = y;
+      }
+    }
+    function scrollAnimation() {
+      let cid = requestAniFrame()(function fn() {
+        var t = props.duration - Math.max(0, state.startTime - +new Date() + props.duration);
+        var y = t * -state.scrollTop / props.duration + state.scrollTop;
+        scroll(y);
+        cid = requestAniFrame()(fn);
+        if (t == props.duration || y == 0) {
+          window.cancelAnimationFrame(cid);
+        }
+      });
+    }
+    function addEventListener() {
+      state.scrollEl.addEventListener("scroll", scrollListener, false);
+      state.scrollEl.addEventListener("resize", scrollListener, false);
+    }
+    function removeEventListener() {
+      state.scrollEl.removeEventListener("scroll", scrollListener, false);
+      state.scrollEl.removeEventListener("resize", scrollListener, false);
+    }
+    function initCancelAniFrame() {
+      window.cancelAnimationFrame = window.webkitCancelAnimationFrame;
+    }
+    function requestAniFrame() {
+      return window.requestAnimationFrame || window.webkitRequestAnimationFrame || function(callback) {
+        window.setTimeout(callback, 1e3 / 60);
+      };
+    }
+    function click(e) {
+      state.startTime = +new Date();
+      props.isAnimation && props.duration > 0 ? scrollAnimation() : scroll();
+      emit("click", e);
+    }
+    function init() {
+      if (props.elId && document.getElementById(props.elId)) {
+        state.scrollEl = document.getElementById(props.elId);
+      }
+      addEventListener();
+      initCancelAniFrame();
+    }
+    onMounted(() => {
+      if (props.distance == 0) {
+        state.backTop = true;
+      }
+      init();
+    });
+    onUnmounted(() => {
+      removeEventListener();
+    });
+    onActivated(() => {
+      if (state.keepAlive) {
+        state.keepAlive = false;
+        init();
+      }
+    });
+    onDeactivated(() => {
+      state.keepAlive = true;
+      removeEventListener();
+    });
+    return {
+      state,
+      classes,
+      style,
+      click
+    };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_icon = resolveComponent("nut-icon");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.classes),
+    style: normalizeStyle(_ctx.style),
+    onClick: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.click && _ctx.click(...args), ["stop"]))
+  }, [
+    renderSlot(_ctx.$slots, "default", {}, () => [
+      createVNode(_component_nut_icon, {
+        size: "19px",
+        class: "nut-backtop-main",
+        name: "top"
+      })
+    ])
+  ], 6);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/Badge.js

@@ -0,0 +1,91 @@
+/*!
+* @nutui/nutui v3.1.21-beta.0 Fri Apr 29 2022 13:06:00 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
+* Released under the MIT License.
+*/
+import { reactive, computed, openBlock, createElementBlock, createElementVNode, renderSlot, withDirectives, toDisplayString, normalizeClass, normalizeStyle, vShow } 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("badge");
+const _sfc_main = create({
+  props: {
+    value: {
+      type: [String, Number]
+    },
+    max: {
+      type: Number,
+      default: 1e4
+    },
+    dot: {
+      type: Boolean,
+      default: false
+    },
+    hidden: {
+      type: Boolean,
+      default: false
+    },
+    top: {
+      type: String,
+      default: "0"
+    },
+    right: {
+      type: String,
+      default: "0"
+    },
+    zIndex: {
+      type: Number,
+      default: 9
+    },
+    color: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(props) {
+    const state = reactive({});
+    const stl = computed(() => {
+      return {
+        top: `${props.top}px`,
+        right: `${props.right}px`,
+        zIndex: props.zIndex,
+        background: props.color
+      };
+    });
+    const content = computed(() => {
+      if (props.dot)
+        return;
+      const value = props.value;
+      const max = props.max;
+      if (typeof value === "number" && typeof max === "number") {
+        return max < value ? `${max}+` : value;
+      }
+      return value;
+    });
+    return {
+      state,
+      stl,
+      content
+    };
+  }
+});
+const _hoisted_1 = { class: "nut-badge" };
+const _hoisted_2 = { class: "slot-icons" };
+const _hoisted_3 = ["textContent"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", _hoisted_1, [
+    createElementVNode("view", _hoisted_2, [
+      renderSlot(_ctx.$slots, "icons")
+    ]),
+    renderSlot(_ctx.$slots, "default"),
+    withDirectives(createElementVNode("view", {
+      textContent: toDisplayString(_ctx.content),
+      class: normalizeClass(["nut-badge__content sup", { "is-dot": _ctx.dot }]),
+      style: normalizeStyle(_ctx.stl)
+    }, null, 14, _hoisted_3), [
+      [vShow, !_ctx.hidden && (_ctx.content || _ctx.dot)]
+    ])
+  ]);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/Barrage.js

@@ -0,0 +1,119 @@
+/*!
+* @nutui/nutui v3.1.21-beta.0 Fri Apr 29 2022 13:06:00 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
+* Released under the MIT License.
+*/
+import { computed, ref, onMounted, onUnmounted, onDeactivated, watch, nextTick, openBlock, createElementBlock, normalizeClass, createElementVNode } 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("barrage");
+const _sfc_main = create({
+  props: {
+    danmu: {
+      type: Array,
+      default: () => []
+    },
+    frequency: {
+      type: Number,
+      default: 500
+    },
+    speeds: {
+      type: Number,
+      default: 2e3
+    },
+    rows: {
+      type: Number,
+      default: 3
+    },
+    top: {
+      type: Number,
+      default: 10
+    },
+    loop: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ["click"],
+  setup(props, { emit }) {
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+    let dmBody = ref(document.createElement("div"));
+    let dmContainer = ref(document.createElement("div"));
+    let timer = 0;
+    const danmuList = ref(props.danmu);
+    const rows = ref(props.rows);
+    const top = ref(props.top);
+    const index2 = ref(0);
+    const speeds = props.speeds;
+    const danmuCWidth = ref(0);
+    onMounted(() => {
+      danmuCWidth.value = dmBody.value.offsetWidth;
+      run();
+    });
+    onUnmounted(() => {
+      clearInterval(timer);
+      timer = 0;
+    });
+    onDeactivated(() => {
+      clearInterval(timer);
+      timer = 0;
+    });
+    watch(() => props.danmu, (newValue, oldVlaue) => {
+      danmuList.value = [...newValue];
+    });
+    const add = (word) => {
+      const _index = index2.value % danmuList.value.length;
+      danmuList.value.splice(_index, 0, word);
+    };
+    const run = () => {
+      clearInterval(timer);
+      timer = 0;
+      timer = setInterval(() => {
+        play();
+        run();
+      }, props.frequency);
+    };
+    const play = () => {
+      const _index = props.loop ? index2.value % danmuList.value.length : index2.value;
+      let el = document.createElement(`view`);
+      el.innerHTML = danmuList.value[_index];
+      el.classList.add("dmitem");
+      dmContainer.value.appendChild(el);
+      nextTick(() => {
+        const width = el.offsetWidth;
+        const height = el.offsetHeight;
+        el.classList.add("move");
+        el.style.animationDuration = `${speeds}ms`;
+        el.style.top = _index % rows.value * (height + top.value) + 20 + "px";
+        el.style.width = width + 20 + "px";
+        el.style.setProperty("--move-distance", `-${danmuCWidth.value}px`);
+        el.dataset.index = `${_index}`;
+        el.addEventListener("animationend", () => {
+          dmContainer.value.removeChild(el);
+        });
+        index2.value++;
+      });
+    };
+    return { classes, danmuList, dmBody, dmContainer, add };
+  }
+});
+const _hoisted_1 = {
+  ref: "dmContainer",
+  class: "dmContainer"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
+    ref: "dmBody",
+    class: normalizeClass(_ctx.classes)
+  }, [
+    createElementVNode("view", _hoisted_1, null, 512)
+  ], 2);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/Button.js

@@ -0,0 +1,134 @@
+/*!
+* @nutui/nutui v3.1.21-beta.0 Fri Apr 29 2022 13:06:00 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
+* Released under the MIT License.
+*/
+import { toRefs, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, createBlock, createCommentVNode, renderSlot } from "vue";
+import { c as createComponent } from "./component.js";
+import _sfc_main$1 from "./Icon.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import "../locale/lang";
+import "./pxCheck.js";
+const { componentName, create } = createComponent("button");
+const _sfc_main = create({
+  components: {
+    [_sfc_main$1.name]: _sfc_main$1
+  },
+  props: {
+    color: String,
+    shape: {
+      type: String,
+      default: "round"
+    },
+    plain: {
+      type: Boolean,
+      default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      default: "default"
+    },
+    size: {
+      type: String,
+      default: "normal"
+    },
+    block: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: String,
+      default: ""
+    },
+    iconClassPrefix: {
+      type: String,
+      default: "nut-icon"
+    },
+    iconFontClassName: {
+      type: String,
+      default: "nutui-iconfont"
+    }
+  },
+  emits: ["click"],
+  setup(props, { emit, slots }) {
+    const { type, size, shape, disabled, loading, color, plain, block } = toRefs(props);
+    const handleClick = (event) => {
+      if (!loading.value && !disabled.value) {
+        emit("click", event);
+      }
+    };
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true,
+        [`${prefixCls}--${type.value}`]: type.value,
+        [`${prefixCls}--${size.value}`]: size.value,
+        [`${prefixCls}--${shape.value}`]: shape.value,
+        [`${prefixCls}--plain`]: plain.value,
+        [`${prefixCls}--block`]: block.value,
+        [`${prefixCls}--disabled`]: disabled.value,
+        [`${prefixCls}--loading`]: loading.value
+      };
+    });
+    const getStyle = computed(() => {
+      var _a;
+      const style = {};
+      if (color == null ? void 0 : color.value) {
+        if (plain.value) {
+          style.color = color.value;
+          style.background = "#fff";
+          if (!((_a = color.value) == null ? void 0 : _a.includes("gradient"))) {
+            style.borderColor = color.value;
+          }
+        } else {
+          style.color = "#fff";
+          style.background = color.value;
+        }
+      }
+      return style;
+    });
+    return {
+      handleClick,
+      classes,
+      getStyle
+    };
+  }
+});
+const _hoisted_1 = { class: "nut-button__warp" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_icon = resolveComponent("nut-icon");
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes),
+    style: normalizeStyle(_ctx.getStyle),
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+  }, [
+    createElementVNode("view", _hoisted_1, [
+      _ctx.loading ? (openBlock(), createBlock(_component_nut_icon, {
+        key: 0,
+        class: "nut-icon-loading"
+      })) : createCommentVNode("", true),
+      _ctx.icon && !_ctx.loading ? (openBlock(), createBlock(_component_nut_icon, {
+        key: 1,
+        name: _ctx.icon,
+        "class-prefix": _ctx.iconClassPrefix,
+        "font-class-name": _ctx.iconFontClassName
+      }, null, 8, ["name", "class-prefix", "font-class-name"])) : createCommentVNode("", true),
+      _ctx.$slots.default ? (openBlock(), createElementBlock("view", {
+        key: 2,
+        class: normalizeClass({ text: _ctx.icon || _ctx.loading })
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 2)) : createCommentVNode("", true)
+    ])
+  ], 6);
+}
+var Button = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { Button as default };