winbox-ui-next/lib/message/message-list.js

We Design Vue 2.0: A Vue.js 3 UI Library

"use strict";
var vue = require("vue");
var globalConfig = require("../_utils/global-config.js");
var is = require("../_utils/is.js");
var message = require("./message.js");
var _interface = require("./interface.js");
var usePopupManager = require("../_hooks/use-popup-manager.js");
function _isSlot(s) {
  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
}
var MessageList = vue.defineComponent({
  name: "MessageList",
  props: {
    messages: {
      type: Array,
      default: () => []
    },
    position: {
      type: String,
      default: "top",
      validator: (value) => {
        return _interface.MESSAGE_POSITION.includes(value);
      }
    }
  },
  emits: ["close", "afterClose"],
  setup(props, context) {
    const prefixCls = globalConfig.getPrefixCls("message-list");
    const {
      zIndex
    } = usePopupManager("message", {
      runOnMounted: true
    });
    return () => {
      let _slot;
      return vue.createVNode(vue.TransitionGroup, {
        "class": [prefixCls, `${prefixCls}-${props.position}`],
        "name": "fade-message",
        "tag": "ul",
        "style": {
          zIndex: zIndex.value
        },
        "onAfterLeave": () => context.emit("afterClose")
      }, _isSlot(_slot = props.messages.map((item) => {
        const slots = {
          default: () => is.isFunction(item.content) ? item.content() : item.content,
          icon: () => is.isFunction(item.icon) ? item.icon() : item.icon
        };
        return vue.createVNode(message, {
          "key": item.id,
          "type": item.type,
          "duration": item.duration,
          "closable": item.closable,
          "resetOnUpdate": item.resetOnUpdate,
          "onClose": () => context.emit("close", item.id)
        }, slots);
      })) ? _slot : {
        default: () => [_slot]
      });
    };
  }
});
module.exports = MessageList;