@nutui/nutui 4.0.12-beta.1 → 4.0.12

package/dist/packages/_es/Backtop.js

@@ -1,12 +1,13 @@
-import { reactive as k, computed as u, onMounted as b, onUnmounted as y, onActivated as w, onDeactivated as x, resolveComponent as A, openBlock as I, createElementBlock as g, normalizeClass as h, normalizeStyle as z, withModifiers as L, renderSlot as N, createVNode as $ } from "vue";
-import { c as C } from "./component-234624bc.js";
-import { r as p, c as B } from "./raf-a74f1a06.js";
-import { Top as _ } from "@nutui/icons-vue";
-import { _ as D } from "./_plugin-vue_export-helper-dad06003.js";
+import { reactive, computed, onMounted, onUnmounted, onActivated, onDeactivated, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, withModifiers, renderSlot, createVNode } from "vue";
+import { c as createComponent } from "./component-81a4c1d0.js";
+import { r as requestAniFrame, c as cancelRaf } from "./raf-729dad54.js";
+import { Top } from "@nutui/icons-vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
 import "../locale/lang";
-const { componentName: M, create: S } = C("backtop"), W = S({
+const { componentName, create } = createComponent("backtop");
+const _sfc_main = create({
   components: {
-    Top: _
+    Top
   },
   props: {
     bottom: {
@@ -31,7 +32,7 @@ const { componentName: M, create: S } = C("backtop"), W = S({
     },
     isAnimation: {
       type: Boolean,
-      default: !0
+      default: true
     },
     duration: {
       type: Number,
@@ -39,70 +40,109 @@ const { componentName: M, create: S } = C("backtop"), W = S({
     }
   },
   emits: ["click"],
-  setup(t, { emit: n }) {
-    const e = k({
-      backTop: !1,
+  setup(props, { emit }) {
+    const state = reactive({
+      backTop: false,
       scrollTop: 0,
       scrollEl: window,
       startTime: 0,
-      keepAlive: !1
-    }), s = u(() => ({
-      [M]: !0,
-      show: e.backTop
-    })), c = u(() => ({
-      right: `${t.right}px`,
-      bottom: `${t.bottom}px`,
-      zIndex: t.zIndex
-    }));
-    function l() {
-      e.scrollEl instanceof Window ? e.scrollTop = e.scrollEl.pageYOffset : e.scrollTop = e.scrollEl.scrollTop, e.backTop = e.scrollTop >= t.distance;
+      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 i(o = 0) {
-      e.scrollEl instanceof Window ? window.scrollTo(0, o) : e.scrollEl.scrollTop = o;
+    function scroll(y = 0) {
+      if (state.scrollEl instanceof Window) {
+        window.scrollTo(0, y);
+      } else {
+        state.scrollEl.scrollTop = y;
+      }
     }
-    function r() {
-      let o = p(function T() {
-        var f = t.duration - Math.max(0, e.startTime - +/* @__PURE__ */ new Date() + t.duration), m = f * -e.scrollTop / t.duration + e.scrollTop;
-        i(m), o = p(T), (f == t.duration || m == 0) && B(o);
+    function scrollAnimation() {
+      let cid = requestAniFrame(function fn() {
+        var t = props.duration - Math.max(0, state.startTime - +/* @__PURE__ */ new Date() + props.duration);
+        var y = t * -state.scrollTop / props.duration + state.scrollTop;
+        scroll(y);
+        cid = requestAniFrame(fn);
+        if (t == props.duration || y == 0) {
+          cancelRaf(cid);
+        }
       });
     }
-    function v() {
-      e.scrollEl.addEventListener("scroll", l, !1), e.scrollEl.addEventListener("resize", l, !1);
+    function addEventListener() {
+      state.scrollEl.addEventListener("scroll", scrollListener, false);
+      state.scrollEl.addEventListener("resize", scrollListener, false);
     }
-    function a() {
-      e.scrollEl.removeEventListener("scroll", l, !1), e.scrollEl.removeEventListener("resize", l, !1);
+    function removeEventListener() {
+      state.scrollEl.removeEventListener("scroll", scrollListener, false);
+      state.scrollEl.removeEventListener("resize", scrollListener, false);
     }
-    function E(o) {
-      e.startTime = +/* @__PURE__ */ new Date(), t.isAnimation && t.duration > 0 ? r() : i(), n("click", o);
+    function click(e) {
+      state.startTime = +/* @__PURE__ */ new Date();
+      props.isAnimation && props.duration > 0 ? scrollAnimation() : scroll();
+      emit("click", e);
     }
-    function d() {
-      t.elId && document.getElementById(t.elId) && (e.scrollEl = document.getElementById(t.elId)), v();
+    function init() {
+      if (props.elId && document.getElementById(props.elId)) {
+        state.scrollEl = document.getElementById(props.elId);
+      }
+      addEventListener();
     }
-    return b(() => {
-      t.distance == 0 && (e.backTop = !0), d();
-    }), y(() => {
-      a();
-    }), w(() => {
-      e.keepAlive && (e.keepAlive = !1, d());
-    }), x(() => {
-      e.keepAlive = !0, a();
-    }), {
-      state: e,
-      classes: s,
-      style: c,
-      click: E
+    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 q(t, n, e, s, c, l) {
-  const i = A("Top");
-  return I(), g("div", {
-    class: h(t.classes),
-    style: z(t.style),
-    onClick: n[0] || (n[0] = L((...r) => t.click && t.click(...r), ["stop"]))
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Top = resolveComponent("Top");
+  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"]))
   }, [
-    N(t.$slots, "default", {}, () => [
-      $(i, {
+    renderSlot(_ctx.$slots, "default", {}, () => [
+      createVNode(_component_Top, {
         width: "19px",
         height: "19px",
         class: "nut-backtop-main"
@@ -110,7 +150,7 @@ function q(t, n, e, s, c, l) {
     ])
   ], 6);
 }
-const j = /* @__PURE__ */ D(W, [["render", q]]);
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  j as default
+  index as default
 };

package/dist/packages/_es/Badge.js

@@ -1,8 +1,9 @@
-import { reactive as f, computed as r, openBlock as b, createElementBlock as m, withDirectives as d, createElementVNode as s, normalizeStyle as u, renderSlot as i, vShow as c, toDisplayString as p, normalizeClass as g } from "vue";
-import { c as y } from "./component-234624bc.js";
-import { _ as h } from "./_plugin-vue_export-helper-dad06003.js";
+import { reactive, computed, openBlock, createElementBlock, withDirectives, createElementVNode, normalizeStyle, renderSlot, vShow, toDisplayString, normalizeClass } from "vue";
+import { c as createComponent } from "./component-81a4c1d0.js";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
 import "../locale/lang";
-const { create: $ } = y("badge"), v = $({
+const { create } = createComponent("badge");
+const _sfc_main = create({
   props: {
     value: {
       type: [String, Number]
@@ -13,15 +14,15 @@ const { create: $ } = y("badge"), v = $({
     },
     dot: {
       type: Boolean,
-      default: !1
+      default: false
     },
     bubble: {
       type: Boolean,
-      default: !1
+      default: false
     },
     hidden: {
       type: Boolean,
-      default: !1
+      default: false
     },
     top: {
       type: String,
@@ -40,46 +41,56 @@ const { create: $ } = y("badge"), v = $({
       default: ""
     }
   },
-  setup(e) {
-    const o = f({}), a = r(() => ({
-      top: `${e.top}px`,
-      right: `${e.right}px`,
-      zIndex: e.zIndex,
-      background: e.color
-    })), l = r(() => {
-      if (e.dot)
+  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 t = e.value, n = e.max;
-      return typeof t == "number" && typeof n == "number" && n < t ? `${n}+` : t;
+      const value = props.value;
+      const max = props.max;
+      if (typeof value === "number" && typeof max === "number") {
+        return max < value ? `${max}+` : value;
+      }
+      return value;
     });
     return {
-      state: o,
-      stl: a,
-      content: l
+      state,
+      stl,
+      content
     };
   }
-}), _ = { class: "nut-badge" }, S = ["textContent"];
-function B(e, o, a, l, t, n) {
-  return b(), m("view", _, [
-    d(s("view", {
+});
+const _hoisted_1 = { class: "nut-badge" };
+const _hoisted_2 = ["textContent"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", _hoisted_1, [
+    withDirectives(createElementVNode("view", {
       class: "nut-badge__icon",
-      style: u(e.stl)
+      style: normalizeStyle(_ctx.stl)
     }, [
-      i(e.$slots, "icon")
+      renderSlot(_ctx.$slots, "icon")
     ], 4), [
-      [c, !e.hidden && !e.dot && e.$slots.icon]
+      [vShow, !_ctx.hidden && !_ctx.dot && _ctx.$slots.icon]
     ]),
-    i(e.$slots, "default"),
-    d(s("view", {
-      textContent: p(e.content),
-      class: g(["nut-badge__content nut-badge__content--sup", { "nut-badge__content--dot": e.dot, "nut-badge__content--bubble": !e.dot && e.bubble }]),
-      style: u(e.stl)
-    }, null, 14, S), [
-      [c, !e.hidden && (e.content || e.dot)]
+    renderSlot(_ctx.$slots, "default"),
+    withDirectives(createElementVNode("view", {
+      textContent: toDisplayString(_ctx.content),
+      class: normalizeClass(["nut-badge__content nut-badge__content--sup", { "nut-badge__content--dot": _ctx.dot, "nut-badge__content--bubble": !_ctx.dot && _ctx.bubble }]),
+      style: normalizeStyle(_ctx.stl)
+    }, null, 14, _hoisted_2), [
+      [vShow, !_ctx.hidden && (_ctx.content || _ctx.dot)]
     ])
   ]);
 }
-const k = /* @__PURE__ */ h(v, [["render", B]]);
+const Badge = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  k as default
+  Badge as default
 };

package/dist/packages/_es/Barrage.js

@@ -1,8 +1,9 @@
-import { useSlots as w, computed as S, ref as s, onMounted as k, onUnmounted as D, watch as W, nextTick as q, openBlock as E, createElementBlock as _, normalizeClass as p, createElementVNode as A, renderSlot as H, createCommentVNode as M } from "vue";
-import { c as V } from "./component-234624bc.js";
-import { _ as j } from "./_plugin-vue_export-helper-dad06003.js";
+import { useSlots, computed, ref, onMounted, onUnmounted, watch, nextTick, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createCommentVNode } from "vue";
+import { c as createComponent } from "./component-81a4c1d0.js";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
 import "../locale/lang";
-const { componentName: z, create: P } = V("barrage"), U = P({
+const { componentName, create } = createComponent("barrage");
+const _sfc_main = create({
   name: "barrage",
   props: {
     danmu: {
@@ -27,90 +28,168 @@ const { componentName: z, create: P } = V("barrage"), U = P({
     },
     loop: {
       type: Boolean,
-      default: !0
+      default: true
     }
   },
-  setup(t) {
-    const v = (/* @__PURE__ */ new Date()).getTime(), o = !!w().default, h = S(() => ({
-      [z]: !0
-    }));
-    let c = s(document.createElement("div")), r = s(document.createElement("div")), m = null;
-    const a = s(t.danmu), B = s(t.rows), T = s(t.top), l = s(0), $ = t.speeds, g = s(0);
-    k(() => {
-      b(), o && document.addEventListener("visibilitychange", function() {
-        document.visibilityState === "hidden" ? (y(), l.value = 0, C("hidden")) : document.visibilityState === "visible" && b();
-      });
-    }), D(() => {
-      a.value = [], y();
+  setup(props) {
+    const classTime = (/* @__PURE__ */ new Date()).getTime();
+    const slotDefault = !!useSlots().default;
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+    let dmBody = ref(document.createElement("div"));
+    let dmContainer = ref(document.createElement("div"));
+    let timer = null;
+    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(() => {
+      init();
+      if (slotDefault) {
+        document.addEventListener("visibilitychange", function() {
+          if (document.visibilityState === "hidden") {
+            clearTime();
+            index2.value = 0;
+            eleSlot("hidden");
+          } else if (document.visibilityState === "visible") {
+            init();
+          }
+        });
+      }
     });
-    const b = () => {
-      g.value = c.value.offsetWidth, o && C("init"), setTimeout(() => {
-        var n;
-        (n = c.value) == null || n.style.setProperty("--move-distance", `-${g.value}px`), L();
+    onUnmounted(() => {
+      danmuList.value = [];
+      clearTime();
+    });
+    const init = () => {
+      danmuCWidth.value = dmBody.value.offsetWidth;
+      if (slotDefault) {
+        eleSlot("init");
+      }
+      setTimeout(() => {
+        var _a;
+        (_a = dmBody.value) == null ? void 0 : _a.style.setProperty("--move-distance", `-${danmuCWidth.value}px`);
+        run();
       }, 300);
-    }, C = (n) => {
-      var d;
-      const e = document.getElementsByClassName("slotBody" + v);
-      let u = ((d = e == null ? void 0 : e[0]) == null ? void 0 : d.children) || [];
-      const f = [];
-      u && Array.from(u).forEach((i) => {
-        n == "init" ? (i.style.opacity = "0", f.push(i)) : (i.classList = "", i.style = {});
-      }), n == "init" && (a.value = f);
-    }, y = () => {
-      m && (clearTimeout(m), m = null);
     };
-    W(
-      () => t.danmu,
-      (n) => {
-        t.danmu.length > 0 && (a.value = [...n]);
+    const eleSlot = (flag) => {
+      var _a;
+      const list = document.getElementsByClassName("slotBody" + classTime);
+      let childrens = ((_a = list == null ? void 0 : list[0]) == null ? void 0 : _a.children) || [];
+      const dmList = [];
+      if (childrens) {
+        Array.from(childrens).forEach((item) => {
+          if (flag == "init") {
+            item.style.opacity = "0";
+            dmList.push(item);
+          } else {
+            item.classList = "";
+            item.style = {};
+          }
+        });
+      }
+      if (flag == "init") {
+        danmuList.value = dmList;
+      }
+    };
+    const clearTime = () => {
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
+      }
+    };
+    watch(
+      () => props.danmu,
+      (newValue) => {
+        if (props.danmu.length > 0) {
+          danmuList.value = [...newValue];
+        }
       }
     );
-    const x = (n) => {
-      const e = l.value % a.value.length;
-      !t.loop && l.value === a.value.length ? a.value.splice(a.value.length, 0, n) : a.value.splice(e, 0, n);
-    }, L = () => {
-      y(), m = setTimeout(() => {
-        N();
-      }, t.frequency);
-    }, N = () => {
-      var u;
-      const n = t.loop ? l.value % a.value.length : l.value;
-      let e = document.createElement("view");
-      o && typeof a.value[n] == "object" ? (e = a.value[n], (u = e == null ? void 0 : e.classList) == null || u.add("nut-barrage__item")) : (e.innerHTML = a.value[n], e.classList.add("nut-barrage__item"), r.value.appendChild(e)), q(() => {
-        var d;
-        const f = e.offsetHeight;
-        if ((d = e == null ? void 0 : e.classList) == null || d.add("move"), e.style.animationDuration = `${$}ms`, e.style.top = n % B.value * (f + T.value) + 20 + "px", e.style.opacity = "1", !o) {
-          const i = e.offsetWidth;
-          e.style.width = i + 20 + "px";
+    const add = (word) => {
+      const _index = index2.value % danmuList.value.length;
+      if (!props.loop && index2.value === danmuList.value.length) {
+        danmuList.value.splice(danmuList.value.length, 0, word);
+      } else {
+        danmuList.value.splice(_index, 0, word);
+      }
+    };
+    const run = () => {
+      clearTime();
+      timer = setTimeout(() => {
+        play();
+      }, props.frequency);
+    };
+    const play = () => {
+      var _a;
+      const _index = props.loop ? index2.value % danmuList.value.length : index2.value;
+      let el = document.createElement(`view`);
+      if (slotDefault && typeof danmuList.value[_index] == "object") {
+        el = danmuList.value[_index];
+        (_a = el == null ? void 0 : el.classList) == null ? void 0 : _a.add("nut-barrage__item");
+      } else {
+        el.innerHTML = danmuList.value[_index];
+        el.classList.add("nut-barrage__item");
+        dmContainer.value.appendChild(el);
+      }
+      nextTick(() => {
+        var _a2;
+        const height = el.offsetHeight;
+        (_a2 = el == null ? void 0 : el.classList) == null ? void 0 : _a2.add("move");
+        el.style.animationDuration = `${speeds}ms`;
+        el.style.top = _index % rows.value * (height + top.value) + 20 + "px";
+        el.style.opacity = "1";
+        if (!slotDefault) {
+          const width = el.offsetWidth;
+          el.style.width = width + 20 + "px";
+        }
+        el.addEventListener("animationend", () => {
+          if (slotDefault) {
+            el.classList.remove("move");
+          } else {
+            dmContainer.value.removeChild(el);
+          }
+        });
+        if (!props.loop && index2.value >= danmuList.value.length - 1) {
+          return;
+        }
+        index2.value++;
+        if (index2.value >= danmuList.value.length) {
+          index2.value = 0;
         }
-        e.addEventListener("animationend", () => {
-          o ? e.classList.remove("move") : r.value.removeChild(e);
-        }), !(!t.loop && l.value >= a.value.length - 1) && (l.value++, l.value >= a.value.length && (l.value = 0), e.removeEventListener("animationend", () => {
-        }), L());
+        el.removeEventListener("animationend", () => {
+        });
+        run();
       });
     };
-    return { classTime: v, classes: h, danmuList: a, dmBody: c, dmContainer: r, add: x };
+    return { classTime, classes, danmuList, dmBody, dmContainer, add };
   }
 });
-function F(t, v, o, h, c, r) {
-  return E(), _("div", {
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
     ref: "dmBody",
-    class: p(t.classes)
+    class: normalizeClass(_ctx.classes)
   }, [
-    A("div", {
+    createElementVNode("div", {
       ref: "dmContainer",
-      class: p(["dmContainer", t.$slots.default && "slotContainer"])
+      class: normalizeClass(["dmContainer", _ctx.$slots.default && "slotContainer"])
     }, [
-      t.$slots.default ? (E(), _("div", {
+      _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
         key: 0,
-        class: p(["slotBody", "slotBody" + t.classTime])
+        class: normalizeClass(["slotBody", "slotBody" + _ctx.classTime])
       }, [
-        H(t.$slots, "default")
-      ], 2)) : M("", !0)
+        renderSlot(_ctx.$slots, "default")
+      ], 2)) : createCommentVNode("", true)
     ], 2)
   ], 2);
 }
-const O = /* @__PURE__ */ j(U, [["render", F]]);
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  O as default
+  index as default
 };