@nutui/nutui 4.0.0-beta.9 → 4.0.1-2.beta-1

package/dist/packages/_es/Noticebar.js

@@ -1,22 +1,31 @@
-import { h, ref, reactive, computed, watch, onMounted, onActivated, onDeactivated, onUnmounted, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, withDirectives, normalizeStyle, createElementVNode, renderSlot, createBlock, resolveDynamicComponent, createTextVNode, toDisplayString, withModifiers, createCommentVNode, vShow, Fragment, renderList } from "vue";
-import { Notice, CircleClose } from "@nutui/icons-vue";
-import { c as createComponent } from "./component-81a4c1d0.js";
-import { r as renderIcon } from "./renderIcon-3d0fd47c.js";
-import { p as pxCheck } from "./pxCheck-c6b9f6b7.js";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
+var J = Object.defineProperty, K = Object.defineProperties;
+var P = Object.getOwnPropertyDescriptors;
+var T = Object.getOwnPropertySymbols;
+var Q = Object.prototype.hasOwnProperty, Z = Object.prototype.propertyIsEnumerable;
+var B = (e, l, i) => l in e ? J(e, l, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[l] = i, S = (e, l) => {
+  for (var i in l || (l = {}))
+    Q.call(l, i) && B(e, i, l[i]);
+  if (T)
+    for (var i of T(l))
+      Z.call(l, i) && B(e, i, l[i]);
+  return e;
+}, E = (e, l) => K(e, P(l));
+import { h as _, ref as W, reactive as x, computed as d, watch as R, onMounted as ee, onActivated as te, onDeactivated as le, onUnmounted as ne, toRefs as D, resolveComponent as p, openBlock as a, createElementBlock as r, normalizeClass as N, withDirectives as ie, normalizeStyle as c, createElementVNode as u, renderSlot as h, createBlock as b, createCommentVNode as y, createTextVNode as oe, toDisplayString as z, withModifiers as se, vShow as ae, Fragment as L, renderList as V } from "vue";
+import { Notice as re, CircleClose as ce } from "@nutui/icons-vue";
+import { c as ue } from "./component-234624bc.js";
+import { p as de } from "./pxCheck-38173291.js";
+import { _ as me } from "./_plugin-vue_export-helper-dad06003.js";
 import "../locale/lang";
-const { componentName, create } = createComponent("noticebar");
-const _sfc_main = create({
+const { componentName: fe, create: he } = ue("noticebar"), ye = he({
   props: {
+    // 滚动方向  across 横向 vertical 纵向
     direction: {
       type: String,
       default: "across"
     },
     list: {
       type: Array,
-      default: () => {
-        return [];
-      }
+      default: () => []
     },
     standTime: {
       type: Number,
@@ -24,7 +33,7 @@ const _sfc_main = create({
     },
     complexAm: {
       type: Boolean,
-      default: false
+      default: !1
     },
     height: {
       type: Number,
@@ -36,14 +45,13 @@ const _sfc_main = create({
     },
     closeMode: {
       type: Boolean,
-      default: false
+      default: !1
     },
     wrapable: {
       type: Boolean,
-      default: false
+      default: !1
     },
-    leftIcon: { type: Object || String, default: () => Notice },
-    rightIcon: { type: Object || String, default: "" },
+    leftIcon: { type: Boolean, default: !0 },
     color: {
       type: String,
       default: ""
@@ -66,312 +74,247 @@ const _sfc_main = create({
     }
   },
   components: {
-    ScrollItem: function(props) {
-      props.item.props.style = props.style;
-      props.item.key = props.key;
-      return h(props.item);
+    ScrollItem: function(e) {
+      return e.item.props.style = e.style, e.item.key = e.key, _(e.item);
     },
-    Notice,
-    CircleClose
+    Notice: re,
+    CircleClose: ce
   },
-  emits: ["click", "close"],
-  setup(props, { emit, slots }) {
-    const wrap = ref(null);
-    const content = ref(null);
-    const state = reactive({
+  emits: ["click", "close", "across-end"],
+  setup(e, { emit: l, slots: i }) {
+    const g = W(null), w = W(null), t = x({
       wrapWidth: 0,
-      firstRound: true,
+      firstRound: !0,
       duration: 0,
       offsetWidth: 0,
-      showNoticebar: true,
+      showNoticebar: !0,
       animationClass: "",
-      animate: false,
+      animate: !1,
       scrollList: [],
       distance: 0,
       timer: null,
-      keepAlive: false,
-      isCanScroll: null
-    });
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-    const isEllipsis = computed(() => {
-      if (state.isCanScroll == null) {
-        return props.wrapable;
-      } else {
-        return !state.isCanScroll && !props.wrapable;
-      }
-    });
-    const wrapContentClass = computed(() => {
-      return {
-        "nut-noticebar__page-wrap-content": true,
-        "nut-ellipsis": isEllipsis.value,
-        [state.animationClass]: true
-      };
-    });
-    const barStyle = computed(() => {
-      let style = {};
-      props.color && (style.color = props.color);
-      props.background && (style.background = props.background);
-      if (props.direction == "vertical") {
-        style.height = `${props.height}px`;
-      }
-      return style;
-    });
-    const contentStyle = computed(() => {
-      return {
-        animationDelay: (state.firstRound ? props.delay : 0) + "s",
-        animationDuration: state.duration + "s",
-        transform: `translateX(${state.firstRound ? 0 : state.wrapWidth + "px"})`
-      };
-    });
-    const horseLampStyle = computed(() => {
-      let styles = {};
-      if (props.complexAm) {
-        styles = {
-          transform: `translateY(${state.distance}px)`
+      keepAlive: !1,
+      isCanScroll: null,
+      showNotica: !0
+    }), k = d(() => ({
+      [fe]: !0
+    })), m = d(() => t.isCanScroll == null ? e.wrapable : !t.isCanScroll && !e.wrapable), v = d(() => ({
+      "nut-noticebar__page-wrap-content": !0,
+      "nut-ellipsis": m.value,
+      [t.animationClass]: !0
+    })), o = d(() => {
+      let n = {};
+      return e.color && (n.color = e.color), e.background && (n.background = e.background), e.direction == "vertical" && (n.height = `${e.height}px`), n;
+    }), f = d(() => ({
+      animationDelay: (t.firstRound ? e.delay : 0) + "s",
+      animationDuration: t.duration + "s",
+      transform: `translateX(${t.firstRound ? 0 : t.wrapWidth + "px"})`
+    })), $ = d(() => {
+      let n = {};
+      if (e.complexAm)
+        n = {
+          transform: `translateY(${t.distance}px)`
+        };
+      else if (t.animate) {
+        let s = ~~(e.height / e.speed / 4);
+        n = {
+          transition: `all ${s == 0 ? ~~(e.height / e.speed) : s}s`,
+          "margin-top": `-${e.height}px`
         };
-      } else {
-        if (state.animate) {
-          let a = ~~(props.height / props.speed / 4);
-          styles = {
-            transition: `all ${a == 0 ? ~~(props.height / props.speed) : a}s`,
-            "margin-top": `-${props.height}px`
-          };
-        }
       }
-      return styles;
+      return n;
     });
-    watch(
-      () => props.text,
-      (value) => {
-        initScrollWrap();
+    R(
+      () => e.text,
+      (n) => {
+        A();
       }
-    );
-    watch(
-      () => props.list,
-      (value) => {
-        state.scrollList = [].concat(value);
+    ), R(
+      () => e.list,
+      (n) => {
+        t.scrollList = [].concat(n);
       }
     );
-    const initScrollWrap = (value) => {
-      if (state.showNoticebar == false) {
-        return;
-      }
-      setTimeout(() => {
-        if (!wrap.value || !content.value) {
+    const A = (n) => {
+      t.showNoticebar != !1 && setTimeout(() => {
+        if (!g.value || !w.value)
           return;
-        }
-        const wrapWidth = wrap.value.getBoundingClientRect().width;
-        const offsetWidth = content.value.getBoundingClientRect().width;
-        state.isCanScroll = props.scrollable == null ? offsetWidth > wrapWidth : props.scrollable;
-        console.log(111, state.isCanScroll);
-        if (state.isCanScroll) {
-          state.wrapWidth = wrapWidth;
-          state.offsetWidth = offsetWidth;
-          state.duration = offsetWidth / props.speed;
-          state.animationClass = "play";
-        } else {
-          state.animationClass = "";
-        }
+        const s = g.value.getBoundingClientRect().width, C = w.value.getBoundingClientRect().width;
+        t.isCanScroll = e.scrollable == null ? C > s : e.scrollable, t.isCanScroll ? (t.wrapWidth = s, t.offsetWidth = C, t.duration = C / e.speed, t.animationClass = "play") : t.animationClass = "";
       }, 0);
-    };
-    const handleClick = (event) => {
-      emit("click", event);
-    };
-    const onClickIcon = (event) => {
-      if (props.closeMode) {
-        state.showNoticebar = !props.closeMode;
-      }
-      emit("close", event);
-    };
-    const onAnimationEnd = () => {
-      state.firstRound = false;
-      setTimeout(() => {
-        state.duration = (state.offsetWidth + state.wrapWidth) / props.speed;
-        state.animationClass = "play-infinite";
+    }, F = (n) => {
+      l("click", n);
+    }, H = (n) => {
+      e.closeMode && (t.showNoticebar = !e.closeMode), l("close", n);
+    }, O = (n) => {
+      t.firstRound = !1, l("across-end", n), setTimeout(() => {
+        t.duration = (t.offsetWidth + t.wrapWidth) / e.speed, t.animationClass = "play-infinite";
       }, 0);
-    };
-    const startRollEasy = () => {
-      showhorseLamp();
-      state.timer = setInterval(showhorseLamp, ~~(props.height / props.speed / 4 * 1e3) + props.standTime);
-    };
-    const showhorseLamp = () => {
-      state.animate = true;
+    }, U = () => {
+      I(), t.timer = setInterval(I, ~~(e.height / e.speed / 4 * 1e3) + e.standTime);
+    }, I = () => {
+      t.animate = !0, setTimeout(() => {
+        t.scrollList.push(t.scrollList[0]), t.scrollList.shift(), t.animate = !1;
+      }, ~~(e.height / e.speed / 4 * 1e3));
+    }, X = () => {
+      t.timer = setInterval(() => {
+        let n = 100;
+        for (let s = 0; s < n; s++)
+          Y(s, !(s < n - 1));
+      }, e.standTime + 100 * e.speed);
+    }, Y = (n, s) => {
       setTimeout(() => {
-        state.scrollList.push(state.scrollList[0]);
-        state.scrollList.shift();
-        state.animate = false;
-      }, ~~(props.height / props.speed / 4 * 1e3));
-    };
-    const startRoll = () => {
-      state.timer = setInterval(() => {
-        let chunk = 100;
-        for (let i = 0; i < chunk; i++) {
-          scroll(i, i < chunk - 1 ? false : true);
-        }
-      }, props.standTime + 100 * props.speed);
+        t.distance -= e.height / 100, s && (t.scrollList.push(t.scrollList[0]), t.scrollList.shift(), t.distance = 0);
+      }, n * e.speed);
+    }, j = (n) => {
+      l("click", n);
+    }, q = () => {
+      e.closeMode && (t.showNoticebar = !e.closeMode), l("close", t.scrollList[0]);
     };
-    const scroll = (n, last) => {
+    ee(() => {
+      e.direction == "vertical" ? (i.default ? (M(), G()) : t.scrollList = [].concat(e.list), setTimeout(() => {
+        e.complexAm ? X() : U();
+      }, e.standTime)) : A(e.text);
+    });
+    const M = () => {
+      i.default && (t.scrollList = [].concat(i.default()[0].children));
+    }, G = () => {
       setTimeout(() => {
-        state.distance -= props.height / 100;
-        if (last) {
-          state.scrollList.push(state.scrollList[0]);
-          state.scrollList.shift();
-          state.distance = 0;
-        }
-      }, n * props.speed);
-    };
-    const go = (item) => {
-      emit("click", item);
+        var n = new MutationObserver((C) => {
+          t.showNotica = !1, setTimeout(() => {
+            t.showNotica = !0;
+          }), M();
+        });
+        const s = document.getElementsByClassName("nut-noticebar-custom-item")[0];
+        s && n.observe(s, {
+          childList: !0,
+          subtree: !0
+        });
+      }, 100);
     };
-    const handleClickIcon = () => {
-      emit("close", state.scrollList[0]);
-    };
-    onMounted(() => {
-      if (props.direction == "vertical") {
-        if (slots.default) {
-          state.scrollList = [].concat(slots.default()[0].children);
-        } else {
-          state.scrollList = [].concat(props.list);
-        }
-        setTimeout(() => {
-          props.complexAm ? startRoll() : startRollEasy();
-        }, props.standTime);
-      } else {
-        initScrollWrap(props.text);
-      }
-    });
-    onActivated(() => {
-      if (state.keepAlive) {
-        state.keepAlive = false;
-      }
+    return te(() => {
+      t.keepAlive && (t.keepAlive = !1);
+    }), le(() => {
+      t.keepAlive = !0, clearInterval(t.timer);
+    }), ne(() => {
+      clearInterval(t.timer);
+    }), E(S(S({}, D(e)), D(t)), {
+      isEllipsis: m,
+      classes: k,
+      barStyle: o,
+      contentStyle: f,
+      horseLampStyle: $,
+      wrap: g,
+      content: w,
+      handleClick: F,
+      onClickIcon: H,
+      onAnimationEnd: O,
+      go: j,
+      handleClickIcon: q,
+      slots: i,
+      pxCheck: de,
+      wrapContentClass: v
     });
-    onDeactivated(() => {
-      state.keepAlive = true;
-      clearInterval(state.timer);
-    });
-    onUnmounted(() => {
-      clearInterval(state.timer);
-    });
-    return {
-      ...toRefs(props),
-      ...toRefs(state),
-      isEllipsis,
-      classes,
-      barStyle,
-      contentStyle,
-      horseLampStyle,
-      wrap,
-      content,
-      handleClick,
-      onClickIcon,
-      onAnimationEnd,
-      go,
-      handleClickIcon,
-      slots,
-      pxCheck,
-      wrapContentClass,
-      renderIcon
-    };
   }
-});
-const _hoisted_1 = { class: "nut-noticebar__page-lefticon" };
-const _hoisted_2 = {
+}), ge = { class: "nut-noticebar__page-lefticon" }, we = {
   ref: "wrap",
   class: "nut-noticebar__page-wrap"
-};
-const _hoisted_3 = ["onClick"];
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_CircleClose = resolveComponent("CircleClose");
-  const _component_ScrollItem = resolveComponent("ScrollItem");
-  return openBlock(), createElementBlock("view", {
-    class: normalizeClass(_ctx.classes)
+}, Ce = { class: "showNotica" }, be = { class: "nut-noticebar-custom-item" }, ke = ["onClick"];
+function ve(e, l, i, g, w, t) {
+  const k = p("Notice"), m = p("CircleClose"), v = p("ScrollItem");
+  return a(), r("view", {
+    class: N(e.classes)
   }, [
-    _ctx.direction == "across" ? withDirectives((openBlock(), createElementBlock("view", {
+    e.direction == "across" ? ie((a(), r("view", {
       key: 0,
-      class: normalizeClass(["nut-noticebar__page", {
-        "nut-noticebar__page--withicon": _ctx.closeMode,
-        "nut-noticebar__page--close": _ctx.closeMode,
-        "nut-noticebar__page--wrapable": _ctx.wrapable
+      class: N(["nut-noticebar__page", {
+        "nut-noticebar__page--withicon": e.closeMode,
+        "nut-noticebar__page--close": e.closeMode,
+        "nut-noticebar__page--wrapable": e.wrapable
       }]),
-      style: normalizeStyle(_ctx.barStyle),
-      onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+      style: c(e.barStyle),
+      onClick: l[3] || (l[3] = (...o) => e.handleClick && e.handleClick(...o))
     }, [
-      createElementVNode("view", _hoisted_1, [
-        _ctx.$slots["left-icon"] ? renderSlot(_ctx.$slots, "left-icon", { key: 0 }) : (openBlock(), createBlock(resolveDynamicComponent(_ctx.renderIcon(_ctx.leftIcon)), { key: 1 }))
+      u("view", ge, [
+        h(e.$slots, "left-icon", {}, () => [
+          e.leftIcon ? (a(), b(k, {
+            key: 0,
+            size: "16px"
+          })) : y("", !0)
+        ])
       ]),
-      createElementVNode("view", _hoisted_2, [
-        createElementVNode("view", {
+      u("view", we, [
+        u("view", {
           ref: "content",
-          class: normalizeClass(_ctx.wrapContentClass),
-          style: normalizeStyle(_ctx.contentStyle),
-          onAnimationend: _cache[0] || (_cache[0] = (...args) => _ctx.onAnimationEnd && _ctx.onAnimationEnd(...args)),
-          "on:webkitAnimationEnd": _cache[1] || (_cache[1] = (...args) => _ctx.onAnimationEnd && _ctx.onAnimationEnd(...args))
+          class: N(e.wrapContentClass),
+          style: c(e.contentStyle),
+          onAnimationend: l[0] || (l[0] = (...o) => e.onAnimationEnd && e.onAnimationEnd(...o)),
+          "on:webkitAnimationEnd": l[1] || (l[1] = (...o) => e.onAnimationEnd && e.onAnimationEnd(...o))
         }, [
-          renderSlot(_ctx.$slots, "default", {}, () => [
-            createTextVNode(toDisplayString(_ctx.text), 1)
+          h(e.$slots, "default", {}, () => [
+            oe(z(e.text), 1)
           ])
         ], 38)
       ], 512),
-      _ctx.closeMode || _ctx.rightIcon ? (openBlock(), createElementBlock("view", {
+      e.closeMode || e.$slots["right-icon"] ? (a(), r("view", {
         key: 0,
         class: "nut-noticebar__page-righticon",
-        onClick: _cache[2] || (_cache[2] = withModifiers((...args) => _ctx.onClickIcon && _ctx.onClickIcon(...args), ["stop"]))
+        onClick: l[2] || (l[2] = se((...o) => e.onClickIcon && e.onClickIcon(...o), ["stop"]))
       }, [
-        _ctx.$slots["right-icon"] ? renderSlot(_ctx.$slots, "right-icon", { key: 0 }) : (openBlock(), createBlock(_component_CircleClose, { key: 1 }))
-      ])) : createCommentVNode("", true)
+        e.$slots["right-icon"] ? h(e.$slots, "right-icon", { key: 0 }) : (a(), b(m, { key: 1 }))
+      ])) : y("", !0)
     ], 6)), [
-      [vShow, _ctx.showNoticebar]
-    ]) : createCommentVNode("", true),
-    _ctx.scrollList.length > 0 && _ctx.direction == "vertical" ? (openBlock(), createElementBlock("view", {
+      [ae, e.showNoticebar]
+    ]) : y("", !0),
+    e.scrollList.length > 0 && e.direction == "vertical" && e.showNoticebar ? (a(), r("view", {
       key: 1,
       class: "nut-noticebar__vertical",
-      style: normalizeStyle(_ctx.barStyle)
+      style: c(e.barStyle)
     }, [
-      _ctx.slots.default ? (openBlock(), createElementBlock("view", {
-        key: 0,
-        class: "nut-noticebar__vertical-list",
-        style: normalizeStyle(_ctx.horseLampStyle)
-      }, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.scrollList, (item, index2) => {
-          return openBlock(), createBlock(_component_ScrollItem, {
-            key: index2,
-            style: normalizeStyle({ height: _ctx.height + "px", "line-height": _ctx.height + "px" }),
-            item
-          }, null, 8, ["style", "item"]);
-        }), 128))
-      ], 4)) : (openBlock(), createElementBlock("ul", {
+      e.slots.default ? (a(), r(L, { key: 0 }, [
+        u("view", {
+          class: "nut-noticebar__vertical-list",
+          style: c(e.horseLampStyle)
+        }, [
+          u("div", Ce, [
+            (a(!0), r(L, null, V(e.scrollList, (o, f) => (a(), b(v, {
+              key: f,
+              style: c({ height: e.height + "px", "line-height": e.height + "px" }),
+              item: o
+            }, null, 8, ["style", "item"]))), 128))
+          ])
+        ], 4),
+        u("view", be, [
+          h(e.$slots, "default")
+        ])
+      ], 64)) : (a(), r("ul", {
         key: 1,
         class: "nut-noticebar__vertical-list",
-        style: normalizeStyle(_ctx.horseLampStyle)
+        style: c(e.horseLampStyle)
       }, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.scrollList, (item, index2) => {
-          return openBlock(), createElementBlock("li", {
-            class: "nut-noticebar__vertical-item",
-            key: index2,
-            style: normalizeStyle({ height: _ctx.pxCheck(_ctx.height) }),
-            onClick: ($event) => _ctx.go(item)
-          }, toDisplayString(item), 13, _hoisted_3);
-        }), 128))
+        (a(!0), r(L, null, V(e.scrollList, (o, f) => (a(), r("li", {
+          class: "nut-noticebar__vertical-item",
+          key: f,
+          style: c({ height: e.pxCheck(e.height), lineHeight: e.pxCheck(e.height) }),
+          onClick: ($) => e.go(o)
+        }, z(o), 13, ke))), 128))
       ], 4)),
-      createElementVNode("view", {
+      u("view", {
         class: "go",
-        onClick: _cache[4] || (_cache[4] = ($event) => !_ctx.slots.rightIcon && _ctx.handleClickIcon())
+        onClick: l[4] || (l[4] = (o) => !e.slots.rightIcon && e.handleClickIcon())
       }, [
-        _ctx.slots.rightIcon ? renderSlot(_ctx.$slots, "rightIcon", { key: 0 }) : _ctx.closeMode ? (openBlock(), createBlock(_component_CircleClose, {
-          key: 1,
-          color: _ctx.color,
-          size: "11px"
-        }, null, 8, ["color"])) : createCommentVNode("", true)
+        h(e.$slots, "right-icon", {}, () => [
+          e.closeMode ? (a(), b(m, {
+            key: 0,
+            color: e.color,
+            size: "11px"
+          }, null, 8, ["color"])) : y("", !0)
+        ])
       ])
-    ], 4)) : createCommentVNode("", true)
+    ], 4)) : y("", !0)
   ], 2);
 }
-const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const Me = /* @__PURE__ */ me(ye, [["render", ve]]);
 export {
-  index as default
+  Me as default
 };