@ctsy/layui-vue/es/noticeBar/index.js

a component library for Vue 3 base on layui-vue

var __defProp = Object.defineProperty;
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;
};
import { defineComponent, ref, reactive, onMounted, toRefs, nextTick, resolveComponent, withDirectives, openBlock, createElementBlock, normalizeStyle, createElementVNode, createBlock, createCommentVNode, toDisplayString, vShow } from "vue";
import { _ as _export_sfc } from "../plugin-vue_export-helper.js";
var index_vue_vue_type_style_index_0_lang = "";
const _sfc_main = defineComponent({
  name: "LayNoticeBar",
  props: {
    mode: {
      type: String,
      default: () => ""
    },
    text: {
      type: String,
      default: () => ""
    },
    textlist: {
      type: Array,
      default: []
    },
    color: {
      type: String,
      default: () => "var(--color-warning)"
    },
    background: {
      type: String,
      default: () => "var(--color-warning-light-9)"
    },
    size: {
      type: [Number, String],
      default: () => 14
    },
    height: {
      type: Number,
      default: () => 40
    },
    delay: {
      type: Number,
      default: () => 1
    },
    speed: {
      type: Number,
      default: () => 100
    },
    scrollable: {
      type: Boolean,
      default: () => false
    },
    leftIcon: {
      type: String,
      default: () => ""
    },
    rightIcon: {
      type: String,
      default: () => ""
    }
  },
  setup(props, { emit }) {
    const noticeBarWarpRef = ref();
    const noticeBarTextRef = ref();
    const state = reactive({
      order: 1,
      oneTime: 0,
      twoTime: 0,
      warpOWidth: 0,
      textOWidth: 0,
      isMode: false
    });
    const initAnimation = () => {
      nextTick(() => {
        state.warpOWidth = noticeBarWarpRef.value.offsetWidth;
        state.textOWidth = noticeBarTextRef.value.offsetWidth;
        document.styleSheets[0].insertRule(`@keyframes oneAnimation {0% {left: 0px;} 100% {left: -${state.textOWidth}px;}}`);
        document.styleSheets[0].insertRule(`@keyframes twoAnimation {0% {left: ${state.warpOWidth}px;} 100% {left: -${state.textOWidth}px;}}`);
        computeAnimationTime();
        setTimeout(() => {
          changeAnimation();
        }, props.delay * 1e3);
      });
    };
    const computeAnimationTime = () => {
      state.oneTime = state.textOWidth / props.speed;
      state.twoTime = (state.textOWidth + state.warpOWidth) / props.speed;
    };
    const changeAnimation = () => {
      if (state.order === 1) {
        noticeBarTextRef.value.style.cssText = `animation: oneAnimation ${state.oneTime}s linear; opactity: 1;}`;
        state.order = 2;
      } else {
        noticeBarTextRef.value.style.cssText = `animation: twoAnimation ${state.twoTime}s linear infinite; opacity: 1;`;
      }
    };
    const listenerAnimationend = () => {
      noticeBarTextRef.value.addEventListener("animationend", () => {
        changeAnimation();
      }, false);
    };
    const onRightIconClick = () => {
      if (!props.mode)
        return false;
      if (props.mode === "closeable") {
        state.isMode = true;
        emit("close");
      } else if (props.mode === "link") {
        emit("link");
      }
    };
    onMounted(() => {
      if (props.scrollable)
        return false;
      initAnimation();
      listenerAnimationend();
    });
    return __spreadValues({
      noticeBarWarpRef,
      noticeBarTextRef,
      onRightIconClick
    }, toRefs(state));
  }
});
const _hoisted_1 = {
  class: "notice-bar-warp-text-box",
  ref: "noticeBarWarpRef"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_lay_icon = resolveComponent("lay-icon");
  return withDirectives((openBlock(), createElementBlock("div", {
    class: "notice-bar",
    style: normalizeStyle({ background: _ctx.background, height: `${_ctx.height}px` })
  }, [
    createElementVNode("div", {
      class: "notice-bar-warp",
      style: normalizeStyle({ color: _ctx.color, fontSize: `${_ctx.size}px` })
    }, [
      _ctx.leftIcon ? (openBlock(), createBlock(_component_lay_icon, {
        key: 0,
        class: "notice-bar-warp-left-icon",
        type: _ctx.leftIcon
      }, null, 8, ["type"])) : createCommentVNode("", true),
      createElementVNode("div", _hoisted_1, [
        !_ctx.scrollable ? (openBlock(), createElementBlock("div", {
          key: 0,
          class: "notice-bar-warp-text",
          ref: "noticeBarTextRef"
        }, toDisplayString(_ctx.text), 513)) : createCommentVNode("", true)
      ], 512),
      _ctx.rightIcon ? (openBlock(), createBlock(_component_lay_icon, {
        key: 1,
        type: _ctx.rightIcon,
        class: "notice-bar-warp-right-icon",
        onClick: _ctx.onRightIconClick
      }, null, 8, ["type", "onClick"])) : createCommentVNode("", true)
    ], 4)
  ], 4)), [
    [vShow, !_ctx.isMode]
  ]);
}
var Component = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
Component.install = (app) => {
  app.component(Component.name, Component);
};
export { Component as default };