@king-design/vue 3.6.2 → 3.8.0-beta.0

package/components/media/useMediaViewer.js

@@ -0,0 +1,129 @@
+import { onMounted, onUnmounted, useInstance } from 'intact-vue-next';
+import { useFixBody } from '../../hooks/useFixBody';
+import { mediaAudioCardUrl } from './mediaAssets';
+export function useMediaViewer() {
+  var instance = useInstance();
+  var fixBody = useFixBody();
+  var isListening = false;
+  function close() {
+    var onClose = instance.get('onClose');
+    if (onClose) onClose();
+  }
+  function prev() {
+    var onPrev = instance.get('onPrev');
+    if (onPrev && instance.get('hasPrev')) onPrev();
+  }
+  function next() {
+    var onNext = instance.get('onNext');
+    if (onNext && instance.get('hasNext')) onNext();
+  }
+  // 预览层支持 Esc 关闭和左右方向键切换。
+  function onKeydown(e) {
+    switch (e.keyCode) {
+      case 27:
+        close();
+        break;
+      case 37:
+        prev();
+        break;
+      case 39:
+        next();
+        break;
+    }
+  }
+  // 避免重复绑定全局键盘事件。
+  function addKeydownListener() {
+    if (isListening) return;
+    document.addEventListener('keydown', onKeydown);
+    isListening = true;
+  }
+  // Viewer 不可见或卸载时及时移除全局监听。
+  function removeKeydownListener() {
+    if (!isListening) return;
+    document.removeEventListener('keydown', onKeydown);
+    isListening = false;
+  }
+  onMounted(function () {
+    if (instance.get('value')) {
+      fixBody.onOpen();
+      addKeydownListener();
+    }
+  });
+  onUnmounted(function () {
+    removeKeydownListener();
+    fixBody.onClose();
+  });
+  instance.watch('value', function (value) {
+    if (value) {
+      fixBody.onOpen();
+      addKeydownListener();
+    } else {
+      removeKeydownListener();
+    }
+  });
+  // 点击遮罩关闭，内容区域在模板中会阻止冒泡。
+  function onMaskClick() {
+    close();
+  }
+  function onCloseClick(e) {
+    e.stopPropagation();
+    close();
+  }
+  function onPrevClick(e) {
+    e.stopPropagation();
+    prev();
+  }
+  function onNextClick(e) {
+    e.stopPropagation();
+    next();
+  }
+  function isImage() {
+    var _instance$get;
+    return ((_instance$get = instance.get('item')) == null ? void 0 : _instance$get.resolvedType) === 'image';
+  }
+  function isVideo() {
+    var _instance$get2;
+    return ((_instance$get2 = instance.get('item')) == null ? void 0 : _instance$get2.resolvedType) === 'video';
+  }
+  function isAudio() {
+    var _instance$get3;
+    return ((_instance$get3 = instance.get('item')) == null ? void 0 : _instance$get3.resolvedType) === 'audio';
+  }
+  function getTitle() {
+    var _instance$get4;
+    return ((_instance$get4 = instance.get('item')) == null ? void 0 : _instance$get4.name) || '';
+  }
+  function getCounterText() {
+    var total = instance.get('total') || 0;
+    if (total <= 1) return '';
+    return (instance.get('index') || 0) + 1 + " / " + total;
+  }
+  function shouldShowNavigation() {
+    return (instance.get('total') || 0) > 1;
+  }
+  function getAudioCardAssetSrc() {
+    return mediaAudioCardUrl;
+  }
+  // 离场动画完成后释放滚动锁并通知外层卸载。
+  function onAfterLeave() {
+    if (!instance.get('value')) {
+      fixBody.onClose();
+    }
+    var onAfterClose = instance.get('onAfterClose');
+    if (onAfterClose) onAfterClose();
+  }
+  return {
+    onMaskClick: onMaskClick,
+    onCloseClick: onCloseClick,
+    onPrevClick: onPrevClick,
+    onNextClick: onNextClick,
+    onAfterLeave: onAfterLeave,
+    isImage: isImage,
+    isVideo: isVideo,
+    isAudio: isAudio,
+    getTitle: getTitle,
+    getCounterText: getCounterText,
+    shouldShowNavigation: shouldShowNavigation,
+    getAudioCardAssetSrc: getAudioCardAssetSrc
+  };
+}

package/components/media/viewer.d.ts

@@ -0,0 +1,24 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+import type { Container } from '../portal';
+import type { MediaViewerItem } from './types';
+export interface MediaViewerProps {
+    className?: string;
+    value?: boolean;
+    item?: MediaViewerItem | null;
+    index?: number;
+    total?: number;
+    hasPrev?: boolean;
+    hasNext?: boolean;
+    container?: Container;
+    onClose?: () => void;
+    onAfterClose?: () => void;
+    onPrev?: () => void;
+    onNext?: () => void;
+}
+export declare class MediaViewer extends Component<MediaViewerProps> {
+    static template: string | import('intact-vue-next').Template<any>;
+    static typeDefs: Required<TypeDefs<MediaViewerProps>>;
+    static defaults: () => Partial<MediaViewerProps>;
+    private config;
+    private viewer;
+}

package/components/media/viewer.js

@@ -0,0 +1,54 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component } from 'intact-vue-next';
+import template from './viewer.vdt';
+import { useConfigContext } from '../config';
+import { useMediaViewer } from './useMediaViewer';
+var typeDefs = {
+  className: String,
+  value: Boolean,
+  item: Object,
+  index: Number,
+  total: Number,
+  hasPrev: Boolean,
+  hasNext: Boolean,
+  container: [String, Function],
+  onClose: Function,
+  onAfterClose: Function,
+  onPrev: Function,
+  onNext: Function
+};
+var defaults = function defaults() {
+  return {
+    className: undefined,
+    value: false,
+    item: null,
+    index: 0,
+    total: 0,
+    hasPrev: false,
+    hasNext: false,
+    container: undefined,
+    onClose: undefined,
+    onAfterClose: undefined,
+    onPrev: undefined,
+    onNext: undefined
+  };
+};
+export var MediaViewer = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(MediaViewer, _Component);
+  function MediaViewer() {
+    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.config = useConfigContext();
+    _this.viewer = useMediaViewer();
+    return _this;
+  }
+  return MediaViewer;
+}(Component);
+MediaViewer.template = template;
+MediaViewer.typeDefs = typeDefs;
+MediaViewer.defaults = defaults;

package/components/media/viewer.vdt.js

@@ -0,0 +1,100 @@
+import { createUnknownComponentVNode as _$cc, createElementVNode as _$ce, className as _$cn } from 'intact-vue-next';
+import { Portal } from '../portal';
+import { Icon } from '../icon';
+import { Transition } from 'intact-vue-next';
+import { stopPropagation } from '../utils';
+export default function ($props, $blocks, $__proto__) {
+  var _$cn2;
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _this$viewer = this.viewer,
+    onMaskClick = _this$viewer.onMaskClick,
+    onCloseClick = _this$viewer.onCloseClick,
+    onPrevClick = _this$viewer.onPrevClick,
+    onNextClick = _this$viewer.onNextClick,
+    onAfterLeave = _this$viewer.onAfterLeave,
+    isImage = _this$viewer.isImage,
+    isVideo = _this$viewer.isVideo,
+    isAudio = _this$viewer.isAudio,
+    getTitle = _this$viewer.getTitle,
+    getCounterText = _this$viewer.getCounterText,
+    shouldShowNavigation = _this$viewer.shouldShowNavigation,
+    getAudioCardAssetSrc = _this$viewer.getAudioCardAssetSrc;
+  var _this$get = this.get(),
+    item = _this$get.item,
+    hasPrev = _this$get.hasPrev,
+    hasNext = _this$get.hasNext,
+    container = _this$get.container,
+    value = _this$get.value;
+  var k = this.config.k;
+  var currentItem = item || {
+    name: '',
+    src: '',
+    poster: ''
+  };
+  return _$cc(Portal, {
+    'container': container,
+    'children': _$cc(Transition, {
+      'show': value,
+      'appear': value,
+      'name': 'k-fade',
+      'onAfterLeave': onAfterLeave,
+      'children': value ? _$ce(2, 'div', [_$ce(2, 'div', [_$ce(2, 'div', [_$ce(2, 'div', getTitle(), 0, _$cn(k + "-media-viewer-title"), {
+        'title': getTitle()
+      }), getCounterText() ? _$ce(2, 'div', getCounterText(), 0, _$cn(k + "-media-viewer-counter")) : undefined], 0, _$cn(k + "-media-viewer-heading")), _$ce(2, 'button', _$cc(Icon, {
+        'className': _$cn(k + "-icon-close-bold")
+      }), 2, _$cn(k + "-media-viewer-close"), {
+        'type': 'button',
+        'title': '关闭预览',
+        'aria-label': '关闭预览',
+        'ev-click': onCloseClick
+      })], 4, _$cn(k + "-media-viewer-header"), {
+        'ev-click': stopPropagation
+      }), shouldShowNavigation() ? _$ce(2, 'button', _$cc(Icon, {
+        'className': _$cn(k + "-icon-left")
+      }), 2, _$cn(k + "-media-viewer-prev"), {
+        'type': 'button',
+        'title': '上一个',
+        'aria-label': '上一个',
+        'disabled': !hasPrev,
+        'ev-click': onPrevClick
+      }) : undefined, shouldShowNavigation() ? _$ce(2, 'button', _$cc(Icon, {
+        'className': _$cn(k + "-icon-right")
+      }), 2, _$cn(k + "-media-viewer-next"), {
+        'type': 'button',
+        'title': '下一个',
+        'aria-label': '下一个',
+        'disabled': !hasNext,
+        'ev-click': onNextClick
+      }) : undefined, _$ce(2, 'div', isImage() ? _$ce(2, 'img', null, 1, _$cn(k + "-media-viewer-image"), {
+        'src': currentItem.src,
+        'alt': currentItem.name,
+        'draggable': false,
+        'ev-click': stopPropagation
+      }) : isVideo() ? _$ce(2, 'video', null, 1, _$cn(k + "-media-viewer-video"), {
+        'src': currentItem.src,
+        'poster': currentItem.poster || undefined,
+        'controls': true,
+        'autoplay': true,
+        'preload': 'metadata',
+        'playsinline': true,
+        'ev-click': stopPropagation
+      }) : isAudio() ? _$ce(2, 'div', [_$ce(2, 'div', _$ce(2, 'img', null, 1, _$cn(k + "-media-viewer-audio-cover-image"), {
+        'src': getAudioCardAssetSrc(),
+        'alt': '',
+        'draggable': false
+      }), 2, _$cn(k + "-media-viewer-audio-cover")), _$ce(2, 'div', currentItem.name, 0, _$cn(k + "-media-viewer-audio-title")), _$ce(2, 'audio', null, 1, _$cn(k + "-media-viewer-audio-player"), {
+        'src': currentItem.src,
+        'controls': true,
+        'autoplay': true,
+        'preload': 'metadata'
+      })], 4, _$cn(k + "-media-viewer-audio"), {
+        'ev-click': stopPropagation
+      }) : undefined, 0, _$cn(k + "-media-viewer-stage"))], 0, _$cn((_$cn2 = {}, _$cn2[k + "-media-viewer"] = true, _$cn2[this.get('className')] = this.get('className'), _$cn2)), {
+        'ev-click': onMaskClick
+      }) : undefined
+    })
+  });
+}
+;

package/components/menu/styles.d.ts

@@ -38,6 +38,7 @@ declare const defaults: {
         readonly border: string;
         item: {
             readonly color: string;
+            readonly arrowColor: string;
             readonly hoverColor: string;
             readonly hoverBg: string;
             disabledColor: string;

package/components/menu/styles.js

@@ -58,6 +58,9 @@ var defaults = {
       get color() {
         return theme.color.text;
       },
+      get arrowColor() {
+        return theme.color.lightBlack;
+      },
       get hoverColor() {
         return theme.color.primary;
       },
@@ -112,7 +115,7 @@ export { menu };
 export var makeMenuStyles = cache(function makeMenuStyles(k) {
   // we must increase the priority by adding &.${k}-menu
   // to override the css of dropdownMenu
-  return /*#__PURE__*/css("&.", k, "-menu{width:", menu.width, ";transition:width ", menu.transition, ";background:", menu.bgColor, ";font-size:", menu.fontSize, ";position:relative;}.", k, "-icon{width:", menu.icon.width, ";margin-right:", menu.icon.gap, ";text-align:center;flex-shrink:0;}.", k, "-menu-header{height:", menu.header.height, ";padding:0 16px;color:", menu.header.color, ";font-size:", menu.header.fontSize, ";font-weight:bold;}.", k, "-menu-body{padding:", menu.item.bodyPadding, ";max-height:calc(100% - ", menu.header.height, ");overflow-y:auto;overflow-x:hidden;scrollbar-width:none;}.", k, "-menu-title{height:", menu.title.height, ";border-top:", menu.border, ";margin-top:4px;.", k, "-menu-name{transition:all ", menu.transition, ";height:", menu.title.height, ";color:", menu.title.color, ";font-weight:bold;}}.", k, "-menu-arrow-box{width:14px;height:60px;cursor:pointer;background:", menu.bgColor, ";border-radius:0 8px 8px 0;position:absolute;display:flex;align-items:center;justify-content:center;top:50%;left:calc(", menu.width, " - 2px);transition:left ", menu.transition, ";transform:translateY(-50%);border:", menu.border, ";border-left:none;.", k, "-icon{margin-right:0;}&:hover{.", k, "-menu-arrow:before{color:", menu.item.activeBgColor, ";}}}&.", k, "-light{border-right:1px solid ", theme.color.disabledBg, ";background:", menu.light.bgColor, ";.", k, "-menu-header{color:", menu.light.title.color, ";}.", k, "-menu-item{.", k, "-menu-item-title{color:", menu.light.item.color, ";&:hover{background:", menu.light.item.hoverBg, ";}}.", k, "-menu-item-arrow{color:", menu.light.item.color, ";}&.", k, "-highlighted{>.", k, "-menu-item-title{color:", menu.light.item.hoverColor, ";}}&.", k, "-disabled{>.", k, "-menu-item-title{color:", menu.light.item.disabledColor, "!important;}}}.", k, "-menu-title{border-top:", menu.light.border, ";.", k, "-menu-name{color:", menu.light.title.color, ";}}.", k, "-menu-arrow-box{background:", menu.light.bgColor, ";border:", menu.light.border, ";border-left:none;&:hover{.", k, "-menu-arrow:before{color:", menu.light.active.color, ";}}}.", k, "-menu:not(.", k, "-dropdown-menu){background:", menu.light.bgColor, ";}&.", k, "-horizontal{.", k, "-menu-header{border-right:", menu.light.border, ";}.", k, "-menu-body>.", k, "-menu-title{border-right:", menu.light.border, ";}}.", k, "-menu-item.", k, "-active{>.", k, "-menu-item-title{color:", menu.light.active.color, "!important;background:", menu.light.active.bgColor, ";}}.", k, "-sub-menu{.", k, "-menu-item-title,.", k, "-menu-item-arrow{color:", menu.light.item.subTitleColor, "!important;}}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("&.", k, "-menu{width:", menu.width, ";transition:width ", menu.transition, ";background:", menu.bgColor, ";font-size:", menu.fontSize, ";position:relative;}.", k, "-icon{width:", menu.icon.width, ";margin-right:", menu.icon.gap, ";text-align:center;flex-shrink:0;}.", k, "-menu-header{height:", menu.header.height, ";padding:0 16px;color:", menu.header.color, ";font-size:", menu.header.fontSize, ";font-weight:bold;}.", k, "-menu-body{padding:", menu.item.bodyPadding, ";max-height:calc(100% - ", menu.header.height, ");overflow-y:auto;overflow-x:hidden;scrollbar-width:none;}.", k, "-menu-title{height:", menu.title.height, ";border-top:", menu.border, ";margin-top:4px;.", k, "-menu-name{transition:all ", menu.transition, ";height:", menu.title.height, ";color:", menu.title.color, ";font-weight:bold;}}.", k, "-menu-arrow-box{width:14px;height:60px;cursor:pointer;background:", menu.bgColor, ";border-radius:0 8px 8px 0;position:absolute;display:flex;align-items:center;justify-content:center;top:50%;left:calc(", menu.width, " - 2px);transition:left ", menu.transition, ";transform:translateY(-50%);border:", menu.border, ";border-left:none;.", k, "-icon{margin-right:0;}&:hover{.", k, "-menu-arrow:before{color:", menu.item.activeBgColor, ";}}}&.", k, "-light{border-right:1px solid ", theme.color.disabledBg, ";background:", menu.light.bgColor, ";.", k, "-menu-header{color:", menu.light.title.color, ";}.", k, "-menu-item{.", k, "-menu-item-title{color:", menu.light.item.color, ";&:hover{background:", menu.light.item.hoverBg, ";}}.", k, "-menu-item-arrow{color:", menu.light.item.arrowColor, ";}&.", k, "-highlighted{>.", k, "-menu-item-title{color:", menu.light.item.hoverColor, ";}}&.", k, "-disabled{>.", k, "-menu-item-title{color:", menu.light.item.disabledColor, "!important;}}}.", k, "-menu-title{border-top:", menu.light.border, ";.", k, "-menu-name{color:", menu.light.title.color, ";}}.", k, "-menu-arrow-box{background:", menu.light.bgColor, ";border:", menu.light.border, ";border-left:none;&:hover{.", k, "-menu-arrow:before{color:", menu.light.active.color, ";}}}.", k, "-menu:not(.", k, "-dropdown-menu){background:", menu.light.bgColor, ";}&.", k, "-horizontal{.", k, "-menu-header{border-right:", menu.light.border, ";}.", k, "-menu-body>.", k, "-menu-title{border-right:", menu.light.border, ";}}.", k, "-menu-item.", k, "-active{>.", k, "-menu-item-title{color:", menu.light.active.color, "!important;background:", menu.light.active.bgColor, ";}}.", k, "-sub-menu{.", k, "-menu-item-title{color:", menu.light.item.subTitleColor, "!important;}.", k, "-menu-item-arrow{color:", menu.light.item.arrowColor, "!important;}}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = menu[size];
     return /*#__PURE__*/css("&.", k, "-", size, "{width:", styles.width, ";font-size:", styles.fontSize, ";.", k, "-menu{font-size:", styles.fontSize, ";}.", k, "-menu-arrow-box{left:calc(", styles.width, " - 2px);}}");
   }), "&.", k, "-collapsed{width:calc(", menu.icon.width, " + (", getLeft(menu.item.padding), " + ", getLeft(menu.item.bodyPadding), ") * 2);.", k, "-icon{margin-right:0;}.", k, "-menu-item-arrow{display:none;}}&.", k, "-collapsed-arrow{width:0px;border-left:none;.", k, "-menu-header{padding:0;}.", k, "-menu-body{overflow:hidden;padding:0;}.", k, "-menu-arrow-box{left:0;.", k, "-menu-arrow:before{transform:rotateY(180deg);}}}&.", k, "-dropdown-menu{width:fit-content;min-width:", menu.dropdown.minWidth, ";position:absolute;.", k, "-menu-item-arrow{transform:rotate(-90deg);}}&.", k, "-horizontal{width:auto;display:flex;.", k, "-menu-body{display:flex;align-items:center;.", k, "-menu-title{border-top:none;border-right:", menu.border, ";}}}");

package/components/notification/index.d.ts

@@ -0,0 +1 @@
+export * from './notification';

package/components/notification/index.js

@@ -0,0 +1 @@
+export * from './notification';

package/components/notification/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

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);
+  })));
+});