@nutui/nutui 3.1.22-beta.0 → 3.1.22

package/dist/packages/_es/NoticeBar.js

@@ -1,404 +1,81 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 /*!
-* @nutui/nutui v3.1.22-beta.0 Tue May 31 2022 21:47:10 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.22 Fri Jun 24 2022 18:11:16 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-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 { 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 "../locale/lang";
-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
-    }
-  },
-  components: {
-    ScrollItem: function(props) {
-      props.item.props.style = props.style;
-      props.item.key = props.key;
-      return h(props.item);
+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` };
     }
-  },
-  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(value);
-    });
-    watch(() => props.list, (value) => {
-      state.scrollList = [].concat(value);
-    });
-    const initScrollWrap = (value) => {
-      if (state.showNoticeBar == false) {
+    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)
         return;
-      }
-      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 __spreadProps(__spreadValues(__spreadValues({}, 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 };
+      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 };