add Notice component

add Notice component

components/base/notification/notice.vue

@@ -1,11 +1,9 @@
 <template>
-    <div :class="classes" :style="style" transition="move-up">
+    <div :class="classes" :style="style" :transition="transitionName">
         <div :class="[`${baseClass}-content`]" v-el:content>{{{ content }}}</div>
-        <span v-if="closable">
-            <a :class="[`${baseClass}-close`]" @click="close">
-                <span :class="[`${baseClass}-close-x`]"></span>
-            </a>
-        </span>
+        <a :class="[`${baseClass}-close`]" @click="close" v-if="closable">
+            <i class="ivu-icon ivu-icon-ios-close-empty"></i>
+        </a>
     </div>
 </template>
 <script>
@@ -44,6 +42,9 @@
             },
             onClose: {
                 type: Function
+            },
+            transitionName: {
+                type: String
             }
         },
         computed: {

components/base/notification/notification.vue

@@ -7,6 +7,7 @@
             :duration="notice.duration"
             :closable="notice.closable"
             :key="notice.key"
+            :transition-name="notice.transitionName"
             :on-close="notice.onClose">
         </Notice>
     </div>
@@ -43,8 +44,7 @@
             },
             className: {
                 type: String
-            },
-            transitionName: String
+            }
         },
         data () {
             return {

components/message/index.js

@@ -5,7 +5,6 @@ const iconPrefixCls = 'ivu-icon';
 const prefixKey = 'ivu_message_key_';
 
 let defaultDuration = 1.5;
-
 let top;
 let messageInstance;
 let key = 1;
@@ -21,7 +20,6 @@ const iconTypes = {
 function getMessageInstance () {
     messageInstance = messageInstance || Notification.newInstance({
         prefixCls: prefixCls,
-        transitionName: 'slide',
         style: {
             top: `${top}px`
         }
@@ -36,7 +34,7 @@ function notice (content, duration = defaultDuration, type, onClose) {
 
         }
     }
-    let iconType = iconTypes[type];
+    const iconType = iconTypes[type];
 
     // if loading
     const loadCls = type === 'loading' ? ' ivu-load-loop' : '';
@@ -47,6 +45,7 @@ function notice (content, duration = defaultDuration, type, onClose) {
         key: `${prefixKey}${key}`,
         duration: duration,
         style: {},
+        transitionName: 'move-up',
         content: `
             <div class="${prefixCls}-custom-content ${prefixCls}-${type}">
                 <i class="${iconPrefixCls} ${iconPrefixCls}-${iconType}${loadCls}"></i>

components/notice/index.js

@@ -0,0 +1,115 @@
+import Notification from '../base/notification';
+
+const prefixCls = 'ivu-notice';
+const iconPrefixCls = 'ivu-icon';
+const prefixKey = 'ivu_notice_key_';
+
+let top = 24;
+let defaultDuration = 4.5;
+let noticeInstance;
+let key = 1;
+
+const iconTypes = {
+    'info': 'information-circled',
+    'success': 'checkmark-circled',
+    'warning': 'android-alert',
+    'error': 'close-circled'
+};
+
+function getNoticeInstance () {
+    noticeInstance = noticeInstance || Notification.newInstance({
+        prefixCls: prefixCls,
+        style: {
+            top: `${top}px`,
+            right: 0
+        }
+    });
+
+    return noticeInstance;
+}
+
+function notice (type, options) {
+    const title = options.title || '';
+    const desc = options.desc || '';
+    const noticeKey = options.key || `${prefixKey}${key}`;
+    const onClose = options.onClose || function () {};
+    // todo const btn = options.btn || null;
+    const duration = (options.duration === 0) ? 0 : options.duration || defaultDuration;
+
+    key++;
+
+    let instance = getNoticeInstance();
+
+    let content;
+
+    if (type == 'normal') {
+        content = `
+            <div class="${prefixCls}-custom-content">
+                <div class="${prefixCls}-title">${title}</div>
+                <div class="${prefixCls}-desc">${desc}</div>
+            </div>
+        `;
+    } else {
+        const iconType = iconTypes[type];
+        content = `
+            <div class="${prefixCls}-custom-content ${prefixCls}-with-icon">
+                <span class="${prefixCls}-icon ${prefixCls}-icon-${type}">
+                    <i class="${iconPrefixCls} ${iconPrefixCls}-${iconType}"></i>
+                </span>
+                <div class="${prefixCls}-title">${title}</div>
+                <div class="${prefixCls}-desc">${desc}</div>
+            </div>
+        `;
+    }
+
+    instance.notice({
+        key: noticeKey.toString(),
+        duration: duration,
+        style: {},
+        transitionName: 'move-right',
+        content: content,
+        onClose: onClose,
+        closable: true
+    });
+}
+
+export default {
+    open (options) {
+        return notice('normal', options);
+    },
+    info (options) {
+        return notice('info', options);
+    },
+    success (options) {
+        return notice('success', options);
+    },
+    warning (options) {
+        return notice('warning', options);
+    },
+    error (options) {
+        return notice('error', options);
+    },
+    config (options) {
+        if (options.top) {
+            top = options.top;
+        }
+        if (options.duration || options.duration === 0) {
+            defaultDuration = options.duration;
+        }
+    },
+    close (key) {
+        if (key) {
+            key = key.toString();
+            if (noticeInstance) {
+                noticeInstance.remove(key);
+            }
+        } else {
+            return false;
+        }
+    },
+    destroy () {
+        let instance = getNoticeInstance();
+        noticeInstance = null;
+        instance.destroy();
+    }
+}