hongluan-business-ui/lib/components/banner/src/index.js

Hongluan Business Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var core = require('@vueuse/core');
var hongluanUi = require('hongluan-ui');
var util = require('../../../utils/util.js');
var isServer = require('../../../utils/isServer.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');

const _sfc_main = vue.defineComponent({
  name: "Banner",
  components: {
    HlAlert: hongluanUi.HlAlert
  },
  inheritAttrs: false,
  props: {
    modelValue: {
      type: Boolean,
      required: true
    },
    title: {
      type: String,
      default: ""
    },
    description: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: "info"
    },
    closable: {
      type: Boolean,
      default: true
    },
    closeText: {
      type: String,
      default: ""
    },
    showIcon: Boolean,
    dashed: Boolean,
    effect: {
      type: String,
      default: ""
    },
    placement: {
      type: String,
      default: "top"
    },
    animationName: {
      type: String,
      default: ""
    },
    to: {
      type: String,
      default: "body"
    },
    zIndex: Number,
    height: String,
    position: String,
    timeout: Number
  },
  emits: ["update:modelValue", "close"],
  setup(props, { emit }) {
    const { prefix } = util.usePrefix();
    const { nextZIndex } = hongluanUi.useZIndex();
    const visible = vue.ref(false);
    const realZIndex = vue.ref(props.zIndex || nextZIndex());
    let autoCloseTimer = void 0;
    const realPosition = vue.computed(() => {
      let position = props.position;
      if (!position) {
        if (props.to === "body") {
          position = "fixed";
        } else {
          position = "absolute";
        }
      }
      return position;
    });
    const animName = vue.computed(() => {
      let name = props.animationName;
      if (!name) {
        switch (props.placement) {
          case "bottom":
            name = "slideTop";
            break;
          case "top":
            name = "slideDown";
            break;
        }
      }
      return name;
    });
    const doOpen = () => {
      if (isServer["default"]) {
        return;
      }
      visible.value = true;
    };
    const doClose = () => {
      autoCloseTimer == null ? void 0 : autoCloseTimer();
      visible.value = false;
      emit("update:modelValue", false);
      emit("close");
    };
    vue.watch(() => props.modelValue, (val) => {
      if (val) {
        doOpen();
        if (props.timeout && !isNaN(+props.timeout)) {
          ({ stop: autoCloseTimer } = core.useTimeoutFn(() => doClose(), +props.timeout));
        }
        realZIndex.value = props.zIndex ? realZIndex.value++ : nextZIndex();
      } else {
        if (visible.value) {
          doClose();
        }
      }
    }, {
      immediate: true
    });
    return {
      prefix,
      visible,
      animName,
      realZIndex,
      realPosition,
      doClose
    };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_hl_alert = vue.resolveComponent("hl-alert");
  return vue.openBlock(), vue.createBlock(vue.Teleport, { to: _ctx.to }, [
    vue.createVNode(vue.Transition, { name: _ctx.animName }, {
      default: vue.withCtx(() => [
        _ctx.visible ? (vue.openBlock(), vue.createBlock(_component_hl_alert, vue.mergeProps({
          key: 0,
          title: _ctx.title,
          description: _ctx.description,
          type: _ctx.type,
          closable: _ctx.closable,
          "close-text": _ctx.closeText,
          "show-icon": _ctx.showIcon,
          dashed: _ctx.dashed,
          effect: _ctx.effect,
          class: [_ctx.prefix + "-banner", "at-" + _ctx.placement],
          style: {
            height: _ctx.height,
            position: _ctx.realPosition,
            zIndex: _ctx.realZIndex
          }
        }, _ctx.$attrs, { onClose: _ctx.doClose }), {
          default: vue.withCtx(() => [
            vue.renderSlot(_ctx.$slots, "default")
          ]),
          title: vue.withCtx(() => [
            vue.renderSlot(_ctx.$slots, "title")
          ]),
          icon: vue.withCtx(() => [
            vue.renderSlot(_ctx.$slots, "icon")
          ]),
          _: 3
        }, 16, ["title", "description", "type", "closable", "close-text", "show-icon", "dashed", "effect", "class", "style", "onClose"])) : vue.createCommentVNode("v-if", true)
      ]),
      _: 3
    }, 8, ["name"])
  ], 8, ["to"]);
}
var Banner = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);

exports["default"] = Banner;
//# sourceMappingURL=index.js.map