@nutui/nutui 3.1.22 → 3.1.23-beta.0

package/dist/packages/_es/NoticeBar.js

@@ -1,81 +1,387 @@
 /*!
-* @nutui/nutui v3.1.22 Fri Jun 24 2022 18:11:16 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.0 Mon Jun 27 2022 17:55:50 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { h as e, ref as t, reactive as l, computed as o, watch as i, onMounted as n, onActivated as s, onDeactivated as a, onUnmounted as c, toRefs as r, resolveComponent as d, openBlock as p, createElementBlock as u, normalizeClass as m, withDirectives as h, normalizeStyle as y, renderSlot as f, createBlock as g, createCommentVNode as k, createElementVNode as w, createTextVNode as v, toDisplayString as C, withModifiers as b, createVNode as S, vShow as I, Fragment as L, renderList as x } from "vue";
-import { c as A } from "./component.js";
-import { _ as B } from "./plugin-vue_export-helper.js";
+import { h, ref, reactive, computed, watch, onMounted, onActivated, onDeactivated, onUnmounted, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, withDirectives, normalizeStyle, renderSlot, createBlock, createCommentVNode, createElementVNode, createTextVNode, toDisplayString, withModifiers, createVNode, vShow, Fragment, renderList } 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: N } = A("noticebar"), T = N({ props: { direction: { type: String, default: "across" }, list: { type: Array, default: () => [] }, standTime: { type: Number, default: 1e3 }, complexAm: { type: Boolean, default: false }, height: { type: Number, default: 40 }, text: { type: String, default: "" }, closeMode: { type: Boolean, default: false }, wrapable: { type: Boolean, default: false }, leftIcon: { type: String, default: "" }, rightIcon: { type: String, default: "" }, color: { type: String, default: "" }, background: { type: String, default: "" }, delay: { type: [String, Number], default: 1 }, scrollable: { type: Boolean, default: null }, speed: { type: Number, default: 50 } }, components: { ScrollItem: function(t2) {
-  return t2.item.props.style = t2.style, t2.item.key = t2.key, e(t2.item);
-} }, emits: ["click", "close"], setup(e2, { emit: d2, slots: p2 }) {
-  const u2 = t(null), m2 = t(null), h2 = l({ wrapWidth: 0, firstRound: true, duration: 0, offsetWidth: 0, showNoticeBar: true, animationClass: "", animate: false, scrollList: [], distance: 0, timer: null, keepAlive: false, isCanScroll: null }), y2 = o(() => ({ [$]: true })), f2 = o(() => h2.isCanScroll == null ? e2.wrapable : !h2.isCanScroll && !e2.wrapable), g2 = o(() => e2.leftIcon != "close"), k2 = o(() => {
-    let t2 = {};
-    return e2.color && (t2.color = e2.color), e2.background && (t2.background = e2.background), e2.direction == "vertical" && (t2.height = `${e2.height}px`), t2;
-  }), w2 = o(() => ({ animationDelay: (h2.firstRound ? e2.delay : 0) + "s", animationDuration: h2.duration + "s", transform: `translateX(${h2.firstRound ? 0 : h2.wrapWidth + "px"})` })), v2 = o(() => {
-    let t2 = "";
-    return e2.leftIcon && (t2 = e2.leftIcon), t2;
-  }), C2 = o(() => {
-    let t2 = {};
-    if (e2.complexAm)
-      t2 = { transform: `translateY(${h2.distance}px)` };
-    else if (h2.animate) {
-      let l2 = ~~(e2.height / e2.speed / 4);
-      t2 = { transition: `all ${l2 == 0 ? ~~(e2.height / e2.speed) : l2}s`, "margin-top": `-${e2.height}px` };
+const { componentName, create } = createComponent("noticebar");
+const _sfc_main = create({
+  props: {
+    direction: {
+      type: String,
+      default: "across"
+    },
+    list: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    standTime: {
+      type: Number,
+      default: 1e3
+    },
+    complexAm: {
+      type: Boolean,
+      default: false
+    },
+    height: {
+      type: Number,
+      default: 40
+    },
+    text: {
+      type: String,
+      default: ""
+    },
+    closeMode: {
+      type: Boolean,
+      default: false
+    },
+    wrapable: {
+      type: Boolean,
+      default: false
+    },
+    leftIcon: { type: String, default: "" },
+    rightIcon: { type: String, default: "" },
+    color: {
+      type: String,
+      default: ""
+    },
+    background: {
+      type: String,
+      default: ""
+    },
+    delay: {
+      type: [String, Number],
+      default: 1
+    },
+    scrollable: {
+      type: Boolean,
+      default: null
+    },
+    speed: {
+      type: Number,
+      default: 50
     }
-    return t2;
-  });
-  i(() => e2.text, (e3) => {
-    b2();
-  }), i(() => e2.list, (e3) => {
-    h2.scrollList = [].concat(e3);
-  });
-  const b2 = (t2) => {
-    h2.showNoticeBar != 0 && setTimeout(() => {
-      if (!u2.value || !m2.value)
+  },
+  components: {
+    ScrollItem: function(props) {
+      props.item.props.style = props.style;
+      props.item.key = props.key;
+      return h(props.item);
+    }
+  },
+  emits: ["click", "close"],
+  setup(props, { emit, slots }) {
+    const wrap = ref(null);
+    const content = ref(null);
+    const state = reactive({
+      wrapWidth: 0,
+      firstRound: true,
+      duration: 0,
+      offsetWidth: 0,
+      showNoticeBar: true,
+      animationClass: "",
+      animate: false,
+      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 iconShow = computed(() => {
+      if (props.leftIcon == "close") {
+        return false;
+      } else {
+        return 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 iconBg = computed(() => {
+      let iconBg2 = "";
+      if (props.leftIcon) {
+        iconBg2 = props.leftIcon;
+      }
+      return iconBg2;
+    });
+    const horseLampStyle = computed(() => {
+      let styles = {};
+      if (props.complexAm) {
+        styles = {
+          transform: `translateY(${state.distance}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;
+    });
+    watch(() => props.text, (value) => {
+      initScrollWrap();
+    });
+    watch(() => props.list, (value) => {
+      state.scrollList = [].concat(value);
+    });
+    const initScrollWrap = (value) => {
+      if (state.showNoticeBar == false) {
         return;
-      const t3 = u2.value.getBoundingClientRect().width, l2 = m2.value.getBoundingClientRect().width;
-      h2.isCanScroll = e2.scrollable == null ? l2 > t3 : e2.scrollable, h2.isCanScroll ? (h2.wrapWidth = t3, h2.offsetWidth = l2, h2.duration = l2 / e2.speed, h2.animationClass = "play") : h2.animationClass = "";
-    }, 0);
-  }, S2 = () => {
-    h2.animate = true, setTimeout(() => {
-      h2.scrollList.push(h2.scrollList[0]), h2.scrollList.shift(), h2.animate = false;
-    }, ~~(e2.height / e2.speed / 4 * 1e3));
-  }, I2 = (t2, l2) => {
-    setTimeout(() => {
-      h2.distance -= e2.height / 100, l2 && (h2.scrollList.push(h2.scrollList[0]), h2.scrollList.shift(), h2.distance = 0);
-    }, t2 * e2.speed);
-  };
-  return n(() => {
-    e2.direction == "vertical" ? (p2.default ? h2.scrollList = [].concat(p2.default()[0].children) : h2.scrollList = [].concat(e2.list), setTimeout(() => {
-      e2.complexAm ? h2.timer = setInterval(() => {
-        for (let e3 = 0; e3 < 100; e3++)
-          I2(e3, !(e3 < 99));
-      }, e2.standTime + 100 * e2.speed) : (S2(), h2.timer = setInterval(S2, ~~(e2.height / e2.speed / 4 * 1e3) + e2.standTime));
-    }, e2.standTime)) : b2(e2.text);
-  }), s(() => {
-    h2.keepAlive && (h2.keepAlive = false);
-  }), a(() => {
-    h2.keepAlive = true, clearInterval(h2.timer);
-  }), c(() => {
-    clearInterval(h2.timer);
-  }), { ...r(e2), ...r(h2), isEllipsis: f2, classes: y2, iconShow: g2, barStyle: k2, contentStyle: w2, iconBg: v2, horseLampStyle: C2, wrap: u2, content: m2, handleClick: (e3) => {
-    d2("click", e3);
-  }, onClickIcon: (t2) => {
-    e2.closeMode && (h2.showNoticeBar = !e2.closeMode), d2("close", t2);
-  }, onAnimationEnd: () => {
-    h2.firstRound = false, setTimeout(() => {
-      h2.duration = (h2.offsetWidth + h2.wrapWidth) / e2.speed, h2.animationClass = "play-infinite";
-    }, 0);
-  }, go: (e3) => {
-    d2("click", e3);
-  }, handleClickIcon: () => {
-    d2("close", h2.scrollList[0]);
-  }, slots: p2 };
-} }), E = { ref: "wrap", class: "wrap" }, W = ["onClick"];
-var M = B(T, [["render", function(e2, t2, l2, o2, i2, n2) {
-  const s2 = d("nut-icon"), a2 = d("ScrollItem");
-  return p(), u("view", { class: m(e2.classes) }, [e2.direction == "across" ? h((p(), u("view", { key: 0, class: m(["nut-noticebar-page", { withicon: e2.closeMode, close: e2.closeMode, wrapable: e2.wrapable }]), style: y(e2.barStyle), onClick: t2[3] || (t2[3] = (...t3) => e2.handleClick && e2.handleClick(...t3)) }, [e2.iconShow ? (p(), u("view", { key: 0, class: "left-icon", style: y({ "background-image": `url(${e2.iconBg})` }) }, [f(e2.$slots, "left-icon", {}, () => [e2.iconBg ? k("", true) : (p(), g(s2, { key: 0, name: "notice", size: "16", color: e2.color }, null, 8, ["color"]))])], 4)) : k("", true), w("view", E, [w("view", { ref: "content", class: m(["content", e2.animationClass, { "nut-ellipsis": e2.isEllipsis }]), style: y(e2.contentStyle), onAnimationend: t2[0] || (t2[0] = (...t3) => e2.onAnimationEnd && e2.onAnimationEnd(...t3)), onWebkitAnimationEnd: t2[1] || (t2[1] = (...t3) => e2.onAnimationEnd && e2.onAnimationEnd(...t3)) }, [f(e2.$slots, "default", {}, () => [v(C(e2.text), 1)])], 38)], 512), e2.closeMode || e2.rightIcon ? (p(), u("view", { key: 1, class: "right-icon", onClick: t2[2] || (t2[2] = b((...t3) => e2.onClickIcon && e2.onClickIcon(...t3), ["stop"])) }, [f(e2.$slots, "right-icon", {}, () => [S(s2, { name: e2.rightIcon ? e2.rightIcon : "close", color: e2.color }, null, 8, ["name", "color"])])])) : k("", true)], 6)), [[I, e2.showNoticeBar]]) : k("", true), e2.scrollList.length > 0 && e2.direction == "vertical" ? (p(), u("view", { key: 1, class: "nut-noticebar-vertical", style: y(e2.barStyle) }, [e2.slots.default ? (p(), u("view", { key: 0, class: "horseLamp_list", style: y(e2.horseLampStyle) }, [(p(true), u(L, null, x(e2.scrollList, (t3, l3) => (p(), g(a2, { key: l3, style: y({ height: e2.height + "px", "line-height": e2.height + "px" }), item: t3 }, null, 8, ["style", "item"]))), 128))], 4)) : (p(), u("ul", { key: 1, class: "horseLamp_list", style: y(e2.horseLampStyle) }, [(p(true), u(L, null, x(e2.scrollList, (t3, l3) => (p(), u("li", { class: "horseLamp_list_item", key: l3, style: y({ height: e2.height }), onClick: (l4) => e2.go(t3) }, C(t3), 13, W))), 128))], 4)), w("view", { class: "go", onClick: t2[4] || (t2[4] = (t3) => !e2.slots.rightIcon && e2.handleClickIcon()) }, [e2.slots.rightIcon ? f(e2.$slots, "rightIcon", { key: 0 }) : e2.closeMode ? (p(), g(s2, { key: 1, type: "cross", color: e2.color, size: "11px" }, null, 8, ["color"])) : k("", true)])], 4)) : k("", true)], 2);
-}]]);
-export { M as default };
+      }
+      setTimeout(() => {
+        if (!wrap.value || !content.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 = "";
+        }
+      }, 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";
+      }, 0);
+    };
+    const startRollEasy = () => {
+      showhorseLamp();
+      state.timer = setInterval(showhorseLamp, ~~(props.height / props.speed / 4 * 1e3) + props.standTime);
+    };
+    const showhorseLamp = () => {
+      state.animate = true;
+      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);
+    };
+    const scroll = (n, last) => {
+      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);
+    };
+    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;
+      }
+    });
+    onDeactivated(() => {
+      state.keepAlive = true;
+      clearInterval(state.timer);
+    });
+    onUnmounted(() => {
+      clearInterval(state.timer);
+    });
+    return {
+      ...toRefs(props),
+      ...toRefs(state),
+      isEllipsis,
+      classes,
+      iconShow,
+      barStyle,
+      contentStyle,
+      iconBg,
+      horseLampStyle,
+      wrap,
+      content,
+      handleClick,
+      onClickIcon,
+      onAnimationEnd,
+      go,
+      handleClickIcon,
+      slots
+    };
+  }
+});
+const _hoisted_1 = {
+  ref: "wrap",
+  class: "wrap"
+};
+const _hoisted_2 = ["onClick"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_icon = resolveComponent("nut-icon");
+  const _component_ScrollItem = resolveComponent("ScrollItem");
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes)
+  }, [
+    _ctx.direction == "across" ? withDirectives((openBlock(), createElementBlock("view", {
+      key: 0,
+      class: normalizeClass(["nut-noticebar-page", { withicon: _ctx.closeMode, close: _ctx.closeMode, wrapable: _ctx.wrapable }]),
+      style: normalizeStyle(_ctx.barStyle),
+      onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+    }, [
+      _ctx.iconShow ? (openBlock(), createElementBlock("view", {
+        key: 0,
+        class: "left-icon",
+        style: normalizeStyle({ "background-image": `url(${_ctx.iconBg})` })
+      }, [
+        renderSlot(_ctx.$slots, "left-icon", {}, () => [
+          !_ctx.iconBg ? (openBlock(), createBlock(_component_nut_icon, {
+            key: 0,
+            name: "notice",
+            size: "16",
+            color: _ctx.color
+          }, null, 8, ["color"])) : createCommentVNode("", true)
+        ])
+      ], 4)) : createCommentVNode("", true),
+      createElementVNode("view", _hoisted_1, [
+        createElementVNode("view", {
+          ref: "content",
+          class: normalizeClass(["content", _ctx.animationClass, { "nut-ellipsis": _ctx.isEllipsis }]),
+          style: normalizeStyle(_ctx.contentStyle),
+          onAnimationend: _cache[0] || (_cache[0] = (...args) => _ctx.onAnimationEnd && _ctx.onAnimationEnd(...args)),
+          onWebkitAnimationEnd: _cache[1] || (_cache[1] = (...args) => _ctx.onAnimationEnd && _ctx.onAnimationEnd(...args))
+        }, [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString(_ctx.text), 1)
+          ])
+        ], 38)
+      ], 512),
+      _ctx.closeMode || _ctx.rightIcon ? (openBlock(), createElementBlock("view", {
+        key: 1,
+        class: "right-icon",
+        onClick: _cache[2] || (_cache[2] = withModifiers((...args) => _ctx.onClickIcon && _ctx.onClickIcon(...args), ["stop"]))
+      }, [
+        renderSlot(_ctx.$slots, "right-icon", {}, () => [
+          createVNode(_component_nut_icon, {
+            name: _ctx.rightIcon ? _ctx.rightIcon : "close",
+            color: _ctx.color
+          }, null, 8, ["name", "color"])
+        ])
+      ])) : createCommentVNode("", true)
+    ], 6)), [
+      [vShow, _ctx.showNoticeBar]
+    ]) : createCommentVNode("", true),
+    _ctx.scrollList.length > 0 && _ctx.direction == "vertical" ? (openBlock(), createElementBlock("view", {
+      key: 1,
+      class: "nut-noticebar-vertical",
+      style: normalizeStyle(_ctx.barStyle)
+    }, [
+      _ctx.slots.default ? (openBlock(), createElementBlock("view", {
+        key: 0,
+        class: "horseLamp_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", {
+        key: 1,
+        class: "horseLamp_list",
+        style: normalizeStyle(_ctx.horseLampStyle)
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.scrollList, (item, index2) => {
+          return openBlock(), createElementBlock("li", {
+            class: "horseLamp_list_item",
+            key: index2,
+            style: normalizeStyle({ height: _ctx.height }),
+            onClick: ($event) => _ctx.go(item)
+          }, toDisplayString(item), 13, _hoisted_2);
+        }), 128))
+      ], 4)),
+      createElementVNode("view", {
+        class: "go",
+        onClick: _cache[4] || (_cache[4] = ($event) => !_ctx.slots.rightIcon && _ctx.handleClickIcon())
+      }, [
+        _ctx.slots.rightIcon ? renderSlot(_ctx.$slots, "rightIcon", { key: 0 }) : _ctx.closeMode ? (openBlock(), createBlock(_component_nut_icon, {
+          key: 1,
+          type: "cross",
+          color: _ctx.color,
+          size: "11px"
+        }, null, 8, ["color"])) : createCommentVNode("", true)
+      ])
+    ], 4)) : createCommentVNode("", true)
+  ], 2);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };