@king-design/vue 3.6.2 → 3.7.0

package/components/notification/index.spec.js

@@ -0,0 +1,317 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import TypesDemo from '~/components/notification/demos/types';
+import EventDemo from '~/components/notification/demos/events';
+import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
+import { Notification } from './';
+import { createVNode as h } from 'intact-vue-next';
+describe('Notification', function () {
+  afterEach(function () {
+    unmount();
+  });
+  it('show basic notification', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var notification;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          Notification.notice({
+            title: 'Hello, Kingcloud Design!',
+            content: '这是一条基础用法的通知'
+          });
+          _context.next = 3;
+          return wait();
+        case 3:
+          notification = getElement('.k-notification');
+          expect(notification.outerHTML).to.matchSnapshot();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it('show notifications with different types', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mount, instance, element, _element$querySelecto, info, error, warning, success, notification;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _mount = mount(TypesDemo), instance = _mount[0], element = _mount[1];
+          _element$querySelecto = element.querySelectorAll('.k-btn'), info = _element$querySelecto[0], error = _element$querySelecto[1], warning = _element$querySelecto[2], success = _element$querySelecto[3];
+          info.click();
+          _context2.next = 5;
+          return wait();
+        case 5:
+          notification = getElement('.k-notification');
+          expect(notification.outerHTML).to.matchSnapshot();
+          error.click();
+          _context2.next = 10;
+          return wait();
+        case 10:
+          expect(getElement('.k-notification').outerHTML).to.matchSnapshot();
+          warning.click();
+          _context2.next = 14;
+          return wait();
+        case 14:
+          expect(getElement('.k-notification').outerHTML).to.matchSnapshot();
+          success.click();
+          _context2.next = 18;
+          return wait();
+        case 18:
+          expect(getElement('.k-notification').outerHTML).to.matchSnapshot();
+        case 19:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+  it('set duration', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var notification, notification1;
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          this.timeout(0);
+          Notification.info({
+            title: '测试标题',
+            content: '测试内容',
+            duration: 500
+          });
+          _context3.next = 4;
+          return wait();
+        case 4:
+          notification = getElement('.k-notification');
+          expect(notification.outerHTML).to.matchSnapshot();
+          // should not remove when mouseenter
+          dispatchEvent(notification, 'mouseenter');
+          _context3.next = 9;
+          return wait(1000);
+        case 9:
+          notification1 = getElement('.k-notification');
+          expect(notification1).eql(notification);
+          dispatchEvent(notification, 'mouseleave');
+          _context3.next = 14;
+          return wait(500);
+        case 14:
+          notification1 = getElement('.k-notification');
+          expect(notification1).eql(notification);
+          _context3.next = 18;
+          return wait(700);
+        case 18:
+          notification1 = getElement('.k-notification');
+          expect(notification1).not.eql(notification);
+        case 20:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3, this);
+  })));
+  it('set duration to 0 should not auto close', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var notification, notification1;
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          this.timeout(0);
+          Notification.warning({
+            title: '不会自动关闭',
+            content: '这条通知不会自动关闭',
+            duration: 0
+          });
+          _context4.next = 4;
+          return wait();
+        case 4:
+          notification = getElement('.k-notification'); // wait for a long time, should still exist
+          _context4.next = 7;
+          return wait(2000);
+        case 7:
+          notification1 = getElement('.k-notification');
+          expect(notification1).eql(notification);
+        case 9:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4, this);
+  })));
+  it('hide close button when closable is false', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var notification, closeButton;
+    return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          Notification.info({
+            title: '隐藏关闭按钮',
+            content: '这条通知隐藏了关闭按钮',
+            closable: false
+          });
+          _context5.next = 3;
+          return wait();
+        case 3:
+          notification = getElement('.k-notification');
+          closeButton = notification.querySelector('.k-notification-close');
+          expect(closeButton).to.be.null;
+          expect(notification.outerHTML).to.matchSnapshot();
+        case 7:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  })));
+  it('should not show icon when type is empty string and icon is not provided', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var notification, icon;
+    return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          Notification.notice({
+            title: '无类型通知',
+            content: '这条通知没有类型，不应该显示图标',
+            type: ''
+          });
+          _context6.next = 3;
+          return wait();
+        case 3:
+          notification = getElement('.k-notification');
+          icon = notification.querySelector('.k-notification-icon');
+          expect(icon).to.be.null;
+          expect(notification.outerHTML).to.matchSnapshot();
+        case 7:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee6);
+  })));
+  it('show notification at different positions', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var positions, _i, _positions, position, containers, container, notification;
+    return _regeneratorRuntime.wrap(function _callee7$(_context7) {
+      while (1) switch (_context7.prev = _context7.next) {
+        case 0:
+          positions = ['topRight', 'topLeft', 'bottomRight', 'bottomLeft', 'top', 'bottom'];
+          _i = 0, _positions = positions;
+        case 2:
+          if (!(_i < _positions.length)) {
+            _context7.next = 16;
+            break;
+          }
+          position = _positions[_i];
+          Notification.info({
+            title: '位置测试',
+            content: "\u901A\u77E5\u51FA\u73B0\u5728" + position + "\u4F4D\u7F6E",
+            position: position
+          });
+          _context7.next = 7;
+          return wait();
+        case 7:
+          containers = document.querySelectorAll(".k-notifications");
+          container = containers[containers.length - 1];
+          expect(container).to.exist;
+          notification = container == null ? void 0 : container.querySelector(".k-notification.k-position-" + position);
+          expect(notification).to.exist;
+          expect(notification.outerHTML).to.matchSnapshot();
+        case 13:
+          _i++;
+          _context7.next = 2;
+          break;
+        case 16:
+        case "end":
+          return _context7.stop();
+      }
+    }, _callee7);
+  })));
+  it('should trigger onClose callback when notification auto closes', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var onCloseSpy, notification;
+    return _regeneratorRuntime.wrap(function _callee8$(_context8) {
+      while (1) switch (_context8.prev = _context8.next) {
+        case 0:
+          this.timeout(0);
+          onCloseSpy = sinon.spy();
+          Notification.info({
+            title: '自动关闭测试',
+            content: '这条通知会自动关闭',
+            onClose: onCloseSpy,
+            duration: 500
+          });
+          _context8.next = 5;
+          return wait();
+        case 5:
+          notification = getElement('.k-notification');
+          expect(notification).to.exist;
+          // 等待自动关闭
+          _context8.next = 9;
+          return wait(700);
+        case 9:
+          expect(onCloseSpy.callCount).to.eql(1);
+          expect(onCloseSpy.calledOnce).to.be.true;
+        case 11:
+        case "end":
+          return _context8.stop();
+      }
+    }, _callee8, this);
+  })));
+  it('test notification click and close event', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+    var _mount2, instance, element, _element$querySelecto2, btn, notification, message1, closeButton, message2;
+    return _regeneratorRuntime.wrap(function _callee9$(_context9) {
+      while (1) switch (_context9.prev = _context9.next) {
+        case 0:
+          _mount2 = mount(EventDemo), instance = _mount2[0], element = _mount2[1];
+          _element$querySelecto2 = element.querySelectorAll('.k-btn'), btn = _element$querySelecto2[0];
+          btn.click();
+          _context9.next = 5;
+          return wait();
+        case 5:
+          notification = document.querySelector('.event-test');
+          dispatchEvent(notification, 'click');
+          _context9.next = 9;
+          return wait(500);
+        case 9:
+          message1 = document.querySelector('.k-info');
+          expect(message1.outerHTML).to.matchSnapshot();
+          _context9.next = 13;
+          return wait(500);
+        case 13:
+          closeButton = notification.querySelector('.k-notification-close');
+          closeButton.click();
+          _context9.next = 17;
+          return wait(500);
+        case 17:
+          message2 = document.querySelector('.k-warning');
+          expect(message2.outerHTML).to.matchSnapshot();
+        case 19:
+        case "end":
+          return _context9.stop();
+      }
+    }, _callee9);
+  })));
+  it('should support VNode as title and content', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+    var notification, titleContainer, title, contentContainer, content;
+    return _regeneratorRuntime.wrap(function _callee10$(_context10) {
+      while (1) switch (_context10.prev = _context10.next) {
+        case 0:
+          Notification.info({
+            title: h('div', {
+              class: 'custom-title'
+            }, '自定义标题'),
+            content: h('div', {
+              class: 'custom-content'
+            }, [h('span', {
+              style: 'color: red;'
+            }, '这是'), '一段', h('strong', null, '自定义内容')]),
+            className: 'custom-notification'
+          });
+          _context10.next = 3;
+          return wait(100);
+        case 3:
+          notification = document.querySelector('.custom-notification');
+          expect(notification.outerHTML).to.matchSnapshot();
+          titleContainer = notification.querySelector('.k-notification-title');
+          expect(titleContainer).to.exist;
+          title = titleContainer.querySelector('.custom-title');
+          expect(title).to.exist;
+          expect(title.textContent).to.eql('自定义标题');
+          contentContainer = notification.querySelector('.k-notification-body');
+          expect(contentContainer).to.exist;
+          content = contentContainer.querySelector('.custom-content');
+          expect(content).to.exist;
+          expect(content.querySelector('span')).to.exist;
+          expect(content.querySelector('strong')).to.exist;
+        case 16:
+        case "end":
+          return _context10.stop();
+      }
+    }, _callee10);
+  })));
+});

package/components/notification/notification.d.ts

@@ -0,0 +1,39 @@
+import { Component, VNode, TypeDefs, Children } from 'intact-vue-next';
+export interface NotificationProps {
+    title?: Children;
+    content?: Children;
+    duration?: number;
+    type?: 'info' | 'error' | 'success' | 'warning' | '';
+    closable?: boolean;
+    icon?: string | VNode;
+    position?: 'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft' | 'top' | 'bottom';
+    className?: string;
+    onClick?: (e: MouseEvent) => void;
+    onClose?: () => void;
+}
+export declare class Notification extends Component<NotificationProps> {
+    static template: string | import('intact-vue-next').Template<any>;
+    static typeDefs: Required<TypeDefs<NotificationProps>>;
+    static defaults: () => Partial<NotificationProps>;
+    static classNamePrefix: string;
+    /**
+     * 显示通知
+     * @param props 通知配置对象
+     * @returns 返回通知的唯一 ID，可用于调用 close 方法关闭通知
+     */
+    static notice(props: Partial<NotificationProps>): number;
+    /**
+     * 关闭指定 ID 的通知
+     * @param id 通知的唯一 ID，由 notice 方法返回
+     */
+    static close(id: number): void;
+    static info(props: Partial<NotificationProps>): number;
+    static error(props: Partial<NotificationProps>): number;
+    static success(props: Partial<NotificationProps>): number;
+    static warning(props: Partial<NotificationProps>): number;
+    private delayClose;
+    private config;
+    onClick(e: MouseEvent): void;
+    onCloseClick(e: MouseEvent): void;
+    close(): void;
+}

package/components/notification/notification.js

@@ -0,0 +1,183 @@
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
+import _Symbol from "@babel/runtime-corejs3/core-js/symbol";
+import _getIteratorMethod from "@babel/runtime-corejs3/core-js/get-iterator-method";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof _Symbol !== "undefined" && _getIteratorMethod(o) || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { var _context2; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context2 = Object.prototype.toString.call(o)).call(_context2, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import _Map from "@babel/runtime-corejs3/core-js/map";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _entriesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/entries";
+import { __decorate } from "tslib";
+import { Component, VNode, render, createVNode as h } from 'intact-vue-next';
+import template from './notification.vdt';
+import { Notifications } from './notifications';
+import { useDelayClose } from '../../hooks/useDelayClose';
+import { bind } from '../utils';
+import { useConfigContext } from '../config';
+var typeDefs = {
+  title: [String, VNode],
+  content: [String, VNode],
+  duration: Number,
+  type: ['info', 'error', 'success', 'warning', ''],
+  closable: Boolean,
+  icon: [String, VNode],
+  position: ['topRight', 'topLeft', 'bottomRight', 'bottomLeft', 'top', 'bottom'],
+  className: String,
+  onClick: Function,
+  onClose: Function
+};
+var id = 0;
+var defaults = function defaults() {
+  return {
+    duration: 4500,
+    type: '',
+    closable: true,
+    position: 'topRight'
+  };
+};
+// 按位置维护多个容器实例
+var notificationsMap = new _Map();
+// 存储 notificationId -> { position, key } 的映射，用于通过 id 关闭通知
+var notificationIdMap = new _Map();
+export var Notification = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Notification, _Component);
+  function Notification() {
+    var _context;
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.delayClose = useDelayClose(_this.close, _this.get('duration'));
+    _this.config = useConfigContext();
+    return _this;
+  }
+  /**
+   * 显示通知
+   * @param props 通知配置对象
+   * @returns 返回通知的唯一 ID，可用于调用 close 方法关闭通知
+   */
+  Notification.notice = function notice(props) {
+    var _props$type, _props$duration;
+    var notificationId = id++;
+    var key = notificationId;
+    var finalProps = _extends({}, props, {
+      key: key,
+      type: (_props$type = props.type) != null ? _props$type : '',
+      duration: (_props$duration = props.duration) != null ? _props$duration : 4500,
+      position: props.position || 'topRight'
+    });
+    var position = finalProps.position;
+    // 存储 notificationId 到 position 和 key 的映射
+    notificationIdMap.set(notificationId, {
+      position: position,
+      key: key
+    });
+    // 如果该位置的容器不存在，创建并挂载
+    if (!notificationsMap.has(position)) {
+      var container = document.createElement('div');
+      document.body.append(container);
+      // @ts-ignore 类型实例化过深
+      render(h(Notifications, {
+        ref: function ref(i) {
+          if (i) {
+            notificationsMap.set(position, i);
+            // 设置清理回调
+            i.__cleanup = function () {
+              notificationsMap.delete(position);
+              render(null, container);
+              container.remove();
+            };
+          }
+        },
+        classNamePrefix: Notification.classNamePrefix,
+        position: position
+      }), container);
+    }
+    // @ts-ignore 类型实例化过深
+    notificationsMap.get(position).notice(h(Notification, finalProps));
+    return notificationId;
+  }
+  /**
+   * 关闭指定 ID 的通知
+   * @param id 通知的唯一 ID，由 notice 方法返回
+   */;
+  Notification.close = function close(id) {
+    var notificationInfo = notificationIdMap.get(id);
+    if (!notificationInfo) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.warn("Notification with id " + id + " does not exist.");
+      }
+      return;
+    }
+    var position = notificationInfo.position,
+      key = notificationInfo.key;
+    var notifications = notificationsMap.get(position);
+    if (notifications) {
+      notifications.delete(key);
+    }
+    // 从映射中移除
+    notificationIdMap.delete(id);
+  };
+  Notification.info = function info(props) {
+    return Notification.notice(_extends({}, props, {
+      type: 'info'
+    }));
+  };
+  Notification.error = function error(props) {
+    return Notification.notice(_extends({}, props, {
+      type: 'error'
+    }));
+  };
+  Notification.success = function success(props) {
+    return Notification.notice(_extends({}, props, {
+      type: 'success'
+    }));
+  };
+  Notification.warning = function warning(props) {
+    return Notification.notice(_extends({}, props, {
+      type: 'warning'
+    }));
+  };
+  var _proto = Notification.prototype;
+  _proto.onClick = function onClick(e) {
+    var onClick = this.get('onClick');
+    if (onClick) {
+      onClick(e);
+    }
+  };
+  _proto.onCloseClick = function onCloseClick(e) {
+    e.stopPropagation(); // 阻止事件冒泡，避免触发外层的 onClick
+    this.close();
+  };
+  _proto.close = function close() {
+    var onClose = this.get('onClose');
+    if (onClose) {
+      onClose();
+    }
+    var position = this.get('position') || 'topRight';
+    var key = this.get('key');
+    // 从 notificationIdMap 中移除对应的映射
+    for (var _iterator = _createForOfIteratorHelperLoose(_entriesInstanceProperty(notificationIdMap).call(notificationIdMap)), _step; !(_step = _iterator()).done;) {
+      var _step$value = _step.value,
+        notificationId = _step$value[0],
+        info = _step$value[1];
+      if (info.position === position && info.key === key) {
+        notificationIdMap.delete(notificationId);
+        break;
+      }
+    }
+    notificationsMap.get(position).delete(key);
+  };
+  return Notification;
+}(Component);
+Notification.template = template;
+Notification.typeDefs = typeDefs;
+Notification.defaults = defaults;
+Notification.classNamePrefix = void 0;
+__decorate([bind], Notification.prototype, "onClick", null);
+__decorate([bind], Notification.prototype, "onCloseClick", null);
+__decorate([bind], Notification.prototype, "close", null);

package/components/notification/notification.vdt.js

@@ -0,0 +1,56 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, createUnknownComponentVNode as _$cc } from 'intact-vue-next';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { getRestProps } from '../utils';
+import { makeNotificationStyles } from './styles';
+import { theme } from '../../styles/theme';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj, _$cn2;
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _this$get = this.get(),
+    type = _this$get.type,
+    title = _this$get.title,
+    content = _this$get.content,
+    children = _this$get.children,
+    closable = _this$get.closable,
+    icon = _this$get.icon,
+    classNamePrefix = _this$get.classNamePrefix,
+    position = _this$get.position,
+    className = _this$get.className;
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-notification"] = true, _classNameObj[className] = className, _classNameObj[k + "-" + type] = type && (type === 'info' || type === 'error' || type === 'success' || type === 'warning'), _classNameObj[k + "-position-" + (position || 'topRight')] = true, _classNameObj[makeNotificationStyles(k)] = true, _classNameObj);
+  var iconMap = {
+    info: k + "-icon-information-fill",
+    warning: k + "-icon-warning-fill",
+    success: k + "-icon-success-fill",
+    error: k + "-icon-error-fill"
+  };
+
+  // type 优先级大于 icon，如果 type 存在且是四种类型之一，使用 type 对应的 icon
+  // 否则如果 icon 有值，使用自定义 icon
+  var hasIcon = type && iconMap[type] || icon;
+  var iconName = type && iconMap[type] ? iconMap[type] : typeof icon === 'string' ? icon : null;
+  var iconColor = type ? theme.color[type === 'error' ? 'danger' : type] : 'default';
+  return _$cv('div', _extends({}, getRestProps(this), {
+    'className': _$cn(classNameObj),
+    'ev-mouseenter': this.delayClose.onMouseEnter,
+    'ev-mouseleave': this.delayClose.onMouseLeave,
+    'ev-click': this.onClick
+  }), _$ce(2, 'div', [_$ce(2, 'div', [hasIcon && iconName ? _$ce(2, 'div', _$cc(Icon, {
+    'className': _$cn(iconName),
+    'color': iconColor
+  }), 2, _$cn(k + "-notification-icon")) : hasIcon && !iconName ? _$ce(2, 'div', icon, 0, _$cn(k + "-notification-icon")) : undefined, _$ce(2, 'div', [title ? _$ce(2, 'div', title, 0, _$cn(k + "-notification-title")) : undefined, content || children ? _$ce(2, 'div', content || children, 0, _$cn(k + "-notification-body")) : undefined], 0, _$cn(k + "-notification-content"))], 0, _$cn((_$cn2 = {}, _$cn2[k + "-notification-wrapper"] = true, _$cn2[k + "-with-icon"] = hasIcon, _$cn2))), closable ? _$cc(Button, {
+    'type': 'none',
+    'icon': true,
+    'className': _$cn(k + "-notification-close"),
+    'ev-click': this.onCloseClick,
+    'children': _$cc(Icon, {
+      'className': _$cn(k + "-icon-close"),
+      'hoverable': true
+    })
+  }) : undefined], 0, _$cn(k + "-notification-container")));
+}
+;

package/components/notification/notifications.d.ts

@@ -0,0 +1,16 @@
+import { Component, VNodeComponentClass, TypeDefs } from 'intact-vue-next';
+import type { Notification } from './notification';
+export interface NotificationsProps {
+    classNamePrefix?: string;
+    position?: 'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft' | 'top' | 'bottom';
+}
+export declare class Notifications extends Component {
+    static template: string | import('intact-vue-next').Template<any>;
+    static typeDefs: Required<TypeDefs<NotificationsProps>>;
+    private notifications;
+    private config;
+    __cleanup?: () => void;
+    notice(notification: VNodeComponentClass<Notification>): void;
+    delete(key: number | string): void;
+    onAfterLeave(): void;
+}

package/components/notification/notifications.js

@@ -0,0 +1,51 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js/instance/find-index";
+import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
+import { Component } from 'intact-vue-next';
+import template from './notifications.vdt';
+import { useConfigContext } from '../config';
+var typeDefs = {
+  classNamePrefix: String,
+  position: ['topRight', 'topLeft', 'bottomRight', 'bottomLeft', 'top', 'bottom']
+};
+export var Notifications = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Notifications, _Component);
+  function Notifications() {
+    var _context;
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.notifications = [];
+    _this.config = useConfigContext();
+    _this.__cleanup = void 0;
+    return _this;
+  }
+  var _proto = Notifications.prototype;
+  _proto.notice = function notice(notification) {
+    this.notifications.push(notification);
+    this.forceUpdate();
+  };
+  _proto.delete = function _delete(key) {
+    var notifications = this.notifications;
+    var index = _findIndexInstanceProperty(notifications).call(notifications, function (notification) {
+      return notification.key === key;
+    });
+    if (process.env.NODE_ENV !== 'production' && !~index) {
+      throw new Error('You are removing a notification that does not exist.');
+    }
+    _spliceInstanceProperty(notifications).call(notifications, index, 1);
+    this.forceUpdate();
+  };
+  _proto.onAfterLeave = function onAfterLeave() {
+    // 当离开动画完成后，如果该位置 通知列表为空，则清理容器
+    if (this.notifications.length === 0 && this.__cleanup) {
+      this.__cleanup();
+    }
+  };
+  return Notifications;
+}(Component);
+Notifications.template = template;
+Notifications.typeDefs = typeDefs;