winbox-ui-next/es/notification/notification-list.js

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

import { defineComponent, createVNode, TransitionGroup, isVNode } from "vue";
import { getPrefixCls } from "../_utils/global-config.js";
import { toKebabCase } from "../_utils/convert-case.js";
import Notification from "./notification.js";
import { isFunction } from "../_utils/is.js";
import { NOTIFICATION_POSITION } from "./interface.js";
import usePopupManager from "../_hooks/use-popup-manager.js";
function _isSlot(s) {
  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
}
var NotificationList = defineComponent({
  name: "NotificationList",
  props: {
    notifications: {
      type: Array,
      default: () => []
    },
    position: {
      type: String,
      default: "topRight",
      validator: (value) => {
        return NOTIFICATION_POSITION.includes(value);
      }
    }
  },
  emits: ["close", "afterClose"],
  setup(props, context) {
    const prefixCls = getPrefixCls("notification-list");
    const kebabPosition = toKebabCase(props.position);
    const {
      zIndex
    } = usePopupManager("message", {
      runOnMounted: true
    });
    const isRight = props.position.includes("Right");
    return () => {
      let _slot;
      return createVNode(TransitionGroup, {
        "class": [prefixCls, `${prefixCls}-${kebabPosition}`],
        "style": {
          zIndex: zIndex.value
        },
        "name": `slide-${isRight ? "right" : "left"}-notification`,
        "onAfterLeave": () => context.emit("afterClose"),
        "tag": "ul"
      }, _isSlot(_slot = props.notifications.map((item) => {
        const slots = {
          default: () => isFunction(item.title) ? item.title() : item.title,
          content: () => isFunction(item.content) ? item.content() : item.content,
          icon: () => isFunction(item.icon) ? item.icon() : item.icon
        };
        return createVNode(Notification, {
          "key": item.id,
          "type": item.type,
          "duration": item.duration,
          "closable": item.closable,
          "onClose": () => context.emit("close", item.id)
        }, slots);
      })) ? _slot : {
        default: () => [_slot]
      });
    };
  }
});
export { NotificationList as default };