@fesjs/fes-design/es/alert/alert.js

fes-design for PC

import { defineComponent, ref, computed, createVNode, Transition } from 'vue';
import getPrefixCls from '../_util/getPrefixCls';
import CloseCircleOutlined from '../icon/CloseCircleOutlined';
import { CLOSE_EVENT } from '../_util/constants';
import { iconComponentMap } from '../_util/noticeManager';
import { useTheme } from '../_theme/useTheme';

const prefixCls = getPrefixCls('alert');
const alertProps = {
  message: String,
  description: String,
  showIcon: Boolean,
  closable: Boolean,
  center: Boolean,
  type: {
    type: String,
    default: 'info'
  },
  beforeClose: {
    type: Function,
    default: () => true
  }
};
var alert = defineComponent({
  name: 'FAlert',
  props: alertProps,
  emits: [CLOSE_EVENT],
  setup(props, ctx) {
    useTheme();
    const visible = ref(true);
    function handleCloseClick(event) {
      var _props$beforeClose;
      Promise.resolve((_props$beforeClose = props.beforeClose) === null || _props$beforeClose === void 0 ? void 0 : _props$beforeClose.call(props, event)).then(res => {
        if (res) {
          visible.value = false;
          ctx.emit(CLOSE_EVENT);
        }
      });
    }
    const bodyClass = computed(() => [`${prefixCls}-body`, props.showIcon && !props.center && `${prefixCls}-icon-padding`]);
    const renderIcon = () => {
      var _iconComponentMap$pro;
      return ctx.slots.icon ? ctx.slots.icon() : (_iconComponentMap$pro = iconComponentMap[props.type]) === null || _iconComponentMap$pro === void 0 ? void 0 : _iconComponentMap$pro.call(iconComponentMap);
    };
    return () => {
      const {
        action: actionSlot,
        default: defaultSlot,
        description: descriptionSlot
      } = ctx.slots;
      const description = props.description || descriptionSlot ? createVNode("div", {
        "class": bodyClass.value
      }, [descriptionSlot ? descriptionSlot() : props.description]) : null;
      return createVNode(Transition, {
        "name": `${prefixCls}-fade-expand`
      }, {
        default: () => [!visible.value ? null : createVNode("div", {
          "class": `${prefixCls} ${props.center ? `${prefixCls}-message-center` : ''} ${prefixCls}-${props.type}`
        }, [createVNode("div", {
          "class": `${prefixCls}-head`
        }, [createVNode("div", {
          "class": `${prefixCls}-head-message`
        }, [props.showIcon ? createVNode("div", {
          "class": `${prefixCls}-head-message-icon`
        }, [renderIcon()]) : null, createVNode("div", null, [defaultSlot ? defaultSlot() : props.message])]), createVNode("div", {
          "class": `${prefixCls}-head-right`
        }, [actionSlot ? createVNode("div", {
          "class": `${prefixCls}-head-right-action`
        }, [actionSlot()]) : null, props.closable ? createVNode("div", {
          "class": `${prefixCls}-head-right-close`
        }, [createVNode(CloseCircleOutlined, {
          "onClick": handleCloseClick
        }, null)]) : null])]), description])]
      });
    };
  }
});

export { alertProps, alert as default };