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" v-if="closable">
-            <a :class="[`${baseClass}-close`]" @click="close">
+            <i class="ivu-icon ivu-icon-ios-close-empty"></i>
-                <span :class="[`${baseClass}-close-x`]"></span>
+        </a>
-            </a>
-        </span>
     </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();
+    }
+}

index.js

@@ -21,6 +21,7 @@ import Alert from './components/alert';
 import Collapse from './components/collapse';
 import Card from './components/card';
 import Message from './components/message';
+import Notice from './components/notice';
 
 const iview = {
     Button,
@@ -46,7 +47,8 @@ const iview = {
     Alert,
     Collapse,
     Card,
-    Message
+    Message,
+    Notice
 };
 
 module.exports = iview;

local/main.js

@@ -50,6 +50,11 @@ router.map({
         component: function (resolve) {
             require(['./routers/msg.vue'], resolve);
         }
+    },
+    '/notice': {
+        component: function (resolve) {
+            require(['./routers/notice.vue'], resolve);
+        }
     }
 });
 

local/routers/notice.vue

@@ -0,0 +1,69 @@
+<template>
+    <Alert type="success" show-icon closable>
+        成功提示文案
+        <span slot="desc">成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案</span>
+    </Alert>
+    <Button @click="open">open</Button>
+    <Button @click="close">close key = key111</Button>
+    <Button @click="destroy">destroy</Button>
+</template>
+<script>
+    import { Notice, Button, Message, Alert } from 'iview';
+
+    export default {
+        components: { Notice, Button, Alert },
+        props: {
+        
+        },
+        data () {
+            return {
+                key: 'key111'
+            }
+        },
+        computed: {
+        
+        },
+        methods: {
+            open () {
+                const title = '这是通知的标题';
+                const desc = '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述';
+
+                Notice.open({
+                    title: title,
+                    desc: desc,
+                });
+                Notice.info({
+                    title: title,
+                    desc: desc,
+                });
+                Notice.success({
+                    title: title,
+                    desc: desc,
+                    key: this.key
+                });
+                Notice.warning({
+                    title: title,
+                    desc: desc,
+                });
+                Notice.error({
+                    title: title,
+                    desc: desc,
+                });
+                Message.info('放假海口市', 0);
+            },
+            close () {
+                Notice.close(this.key);
+            },
+            destroy () {
+                Notice.destroy();
+            }
+        },
+        ready () {
+//            this.open();
+            Notice.config({
+                top: 1,
+                duration: 0
+            })
+        }
+    }
+</script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iview",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "title": "iView",
   "description": "A high quality  UI components Library with Vue.js",
   "homepage": "http://www.iviewui.com",

styles/components/alert.less

@@ -26,6 +26,7 @@
         color: @legend-color;
         line-height: 21px;
         display: none;
+        text-align: justify;
     }
 
     &-success {
@@ -69,14 +70,7 @@
         cursor: pointer;
 
         .@{icon-prefix-cls}-ios-close-empty {
-            font-size: 22px;
+            .close-base(-3px);
-            color: @legend-color;
-            transition: color @transition-time ease;
-            position: relative;
-            top: -3px;
-            &:hover {
-                color: #444;
-            }
         }
     }
 

styles/components/index.less

@@ -7,4 +7,5 @@
 @import "alert";
 @import "collapse";
 @import "card";
-@import "message";
+@import "message";
+@import "notice";

styles/components/notice.less

@@ -0,0 +1,79 @@
+@notice-prefix-cls: ~"@{css-prefix}notice";
+@icon-prefix-cls: ~"@{css-prefix}icon";
+
+@notice-width: 335px;
+@notice-padding: 16px;
+@notice-margin-bottom: 10px;
+
+.@{notice-prefix-cls} {
+    position: fixed;
+    z-index: @zindex-notification;
+    width: @notice-width;
+    margin-right: 24px;
+
+    &-notice {
+        padding: @notice-padding;
+        border-radius: @border-radius-base;
+        box-shadow: @shadow-base;
+        border: 1px solid @border-color-base;
+        background: #fff;
+        line-height: 1.5;
+        position: relative;
+        margin-bottom: @notice-margin-bottom;
+        overflow: hidden;
+
+        &-close {
+            position: absolute;
+            right: 16px;
+            top: 10px;
+            color: #999;
+            outline: none;
+
+            i{
+                .close-base(-3px);
+            }
+        }
+    }
+
+    &-title {
+        font-size: 14px;
+        color: @text-color;
+        margin-bottom: 4px;
+    }
+
+    &-desc {
+        font-size: @font-size-base;
+        color: @legend-color;
+        text-align: justify;
+    }
+
+    &-with-icon &-title{
+        margin-left: 51px;
+        margin-bottom: 4px;
+    }
+
+    &-with-icon  &-desc {
+        margin-left: 51px;
+    }
+
+    &-icon {
+        position: absolute;
+        left: 21px;
+        top: 50%;
+        margin-top: -21px;
+        font-size: 28px;
+
+        &-success {
+            color: @success-color;
+        }
+        &-info {
+            color: @primary-color;
+        }
+        &-warning {
+            color: @warning-color;
+        }
+        &-error {
+            color: @error-color;
+        }
+    }
+}

styles/mixins/close.less

@@ -0,0 +1,10 @@
+.close-base(@top: 0) {
+    font-size: 22px;
+    color: @legend-color;
+    transition: color @transition-time ease;
+    position: relative;
+    top: @top;
+    &:hover {
+        color: #444;
+    }
+}

styles/mixins/index.less

@@ -6,4 +6,5 @@
 @import "button";
 @import "layout";
 @import "size";
-@import "loading";
+@import "loading";
+@import "close";

styles/themes/default/custom.less

@@ -50,6 +50,7 @@
 @zindex-back-top        : 10;
 @zindex-spin            : 8;
 @zindex-message         : 1010;
+@zindex-notification    : 1010;
 
 // Animation
 @animation-time         : .3s;