From 9d69bab6a6af96505a2b203baba4213be3e18829 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Mon, 12 Sep 2016 11:59:15 +0800
Subject: [PATCH] add Alert component

add Alert component
---
 components/alert/alert.vue        | 101 +++++++++++++++++++++++++++
 components/alert/index.js         |   2 +
 index.js                          |   4 +-
 local/routers/radio.vue           |  39 +++++++----
 package.json                      |   2 +-
 styles/components/alert.less      | 112 ++++++++++++++++++++++++++++++
 styles/components/index.less      |   3 +-
 styles/themes/default/custom.less |   3 +
 8 files changed, 250 insertions(+), 16 deletions(-)
 create mode 100644 components/alert/alert.vue
 create mode 100644 components/alert/index.js
 create mode 100644 styles/components/alert.less

diff --git a/components/alert/alert.vue b/components/alert/alert.vue
new file mode 100644
index 00000000..bc50cbe6
--- /dev/null
+++ b/components/alert/alert.vue
@@ -0,0 +1,101 @@
+<template>
+    <div v-if="!closed" :class="wrapClasses" transition="fade">
+        <slot name="icon" v-if="showIcon">
+            <span :class="iconClasses">
+                <Icon :type="iconType"></Icon>
+            </span>
+        </slot>
+        <span :class="messageClasses"><slot></slot></span>
+        <span :class="descClasses" v-el:desc><slot name="desc"></slot></span>
+        <a :class="closeClasses" v-if="closable" @click="close">
+            <slot name="close">
+                <Icon type="ios-close-empty"></Icon>
+            </slot>
+        </a>
+    </div>
+</template>
+<script>
+    import Icon from '../icon';
+    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-alert';
+
+    export default {
+        components: { Icon },
+        props: {
+            type: {
+                validator (value) {
+                    return oneOf(value, ['success', 'info', 'warning', 'error']);
+                },
+                default: 'info'
+            },
+            closable: {
+                type: Boolean,
+                default: false
+            },
+            showIcon: {
+                type: Boolean,
+                default: false
+            },
+        },
+        data () {
+            return {
+                closed: false,
+                desc: false
+            }
+        },
+        computed: {
+            wrapClasses () {
+                return [
+                    `${prefixCls}`,
+                    `${prefixCls}-${this.type}`,
+                    {
+                        [`${prefixCls}-with-icon`]: this.showIcon,
+                        [`${prefixCls}-with-desc`]: this.desc
+                    }
+                ]
+            },
+            messageClasses () {
+                return `${prefixCls}-message`;
+            },
+            descClasses () {
+                return `${prefixCls}-desc`;
+            },
+            closeClasses () {
+                return `${prefixCls}-close`;
+            },
+            iconClasses () {
+                return `${prefixCls}-icon`;
+            },
+            iconType () {
+                let type = '';
+
+                switch (this.type) {
+                    case 'success':
+                        type = 'checkmark-circled';
+                        break;
+                    case 'info':
+                        type = 'information-circled';
+                        break;
+                    case 'warning':
+                        type = 'android-alert';
+                        break;
+                    case 'error':
+                        type = 'close-circled';
+                        break;
+                }
+
+                return type;
+            }
+        },
+        methods: {
+            close (e) {
+                this.closed = true;
+                this.$emit('on-close', e);
+            }
+        },
+        compiled () {
+            this.desc = this.$els.desc.innerHTML != '';
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/components/alert/index.js b/components/alert/index.js
new file mode 100644
index 00000000..fa609b02
--- /dev/null
+++ b/components/alert/index.js
@@ -0,0 +1,2 @@
+import Alert from './alert.vue';
+export default Alert;
\ No newline at end of file
diff --git a/index.js b/index.js
index ee326562..6b3483fc 100644
--- a/index.js
+++ b/index.js
@@ -17,6 +17,7 @@ import BackTop from './components/back-top';
 import Spin from './components/spin';
 import Steps from './components/steps';
 import Breadcrumb from './components/breadcrumb';
+import Alert from './components/alert';
 
 const iview = {
     Button,
@@ -38,7 +39,8 @@ const iview = {
     BackTop,
     Spin,
     Steps,
-    Breadcrumb
+    Breadcrumb,
+    Alert
 };
 
 module.exports = iview;
\ No newline at end of file
diff --git a/local/routers/radio.vue b/local/routers/radio.vue
index e11d63d7..9463d178 100644
--- a/local/routers/radio.vue
+++ b/local/routers/radio.vue
@@ -1,27 +1,37 @@
 <template>
     <div>
-        <Radio :checked.sync="radio">梁灏</Radio>
-        {{ radio | json }}
-        <div @click="radio = false">单项切换</div>
-        <br><br><br>
-        <Radio-group :model.sync="radioGroup" size="large" type="button" @on-change="changeGroup">
-            <Radio value="梁灏"></Radio>
-            <Radio value="段模"></Radio>
-            <Radio value="倪斌"></Radio>
-        </Radio-group>
-        {{ radioGroup | json }}
-        <div @click="radioGroup = '梁灏'">多项切换</div>
+        <Alert show-icon>
+            成功的提示
+        </Alert>
+        <Alert closable show-icon>
+            成功的提示
+            <span slot="desc">这里是成功的内容</span>
+        </Alert>
+        <Alert type="warning" closable show-icon>
+            成功的提示
+            <span slot="desc">这里是成功的内容</span>
+        </Alert>
+        <Alert type="success" closable show-icon>
+            成功的提示
+            <span slot="desc">这里是成功的内容</span>
+        </Alert>
+        <Alert type="error" closable show-icon @on-close="closed">
+            成功的提示
+            <span slot="desc">这里是成功的内容</span>
+        </Alert>
     </div>
 </template>
 <script>
-    import { Radio } from 'iview';
+    import { Radio, Alert, Icon } from 'iview';
 
     const RadioGroup = Radio.Group;
 
     export default {
         components: {
             Radio,
-            RadioGroup
+            RadioGroup,
+            Alert,
+            Icon
         },
         props: {
         
@@ -38,6 +48,9 @@
         methods: {
             changeGroup (data) {
                 console.log(data);
+            },
+            closed (data) {
+                console.log(data)
             }
         }
     }
diff --git a/package.json b/package.json
index db02299f..0cf1f65f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "iview",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "title": "iView",
   "description": "An UI components Library with Vue.js",
   "homepage": "http://www.iviewui.com",
diff --git a/styles/components/alert.less b/styles/components/alert.less
new file mode 100644
index 00000000..b13d490c
--- /dev/null
+++ b/styles/components/alert.less
@@ -0,0 +1,112 @@
+@alert-prefix-cls: ~"@{css-prefix}alert";
+@icon--prefix-cls: ~"@{css-prefix}icon";
+
+.@{alert-prefix-cls}{
+    position: relative;
+    padding: 8px 48px 8px 16px;
+    border-radius: @border-radius-base;
+    color: @text-color;
+    font-size: 12px;
+    line-height: 16px;
+    margin-bottom: 10px;
+
+    &&-with-icon{
+        padding: 8px 48px 8px 38px;
+    }
+
+    &-icon {
+        font-size: 14px;
+        top: 8px;
+        left: 16px;
+        position: absolute;
+    }
+
+    &-desc {
+        font-size: 12px;
+        color: @legend-color;
+        line-height: 21px;
+        display: none;
+    }
+
+    &-success {
+        border: 1px solid tint(@success-color, 80%);
+        background-color: tint(@success-color, 90%);
+        .@{alert-prefix-cls}-icon {
+            color: @success-color;
+        }
+    }
+
+    &-info {
+        border: 1px solid tint(@primary-color, 80%);
+        background-color: tint(@primary-color, 90%);
+        .@{alert-prefix-cls}-icon {
+            color: @primary-color;
+        }
+    }
+
+    &-warning {
+        border: 1px solid tint(@warning-color, 80%);
+        background-color: tint(@warning-color, 90%);
+        .@{alert-prefix-cls}-icon {
+            color: @warning-color;
+        }
+    }
+
+    &-error {
+        border: 1px solid tint(@error-color, 80%);
+        background-color: tint(@error-color, 90%);
+        .@{alert-prefix-cls}-icon {
+            color: @error-color;
+        }
+    }
+
+    &-close {
+        font-size: 12px;
+        position: absolute;
+        right: 16px;
+        top: 8px;
+        overflow: hidden;
+        cursor: pointer;
+
+        .@{icon--prefix-cls}-ios-close-empty {
+            font-size: 22px;
+            color: @legend-color;
+            transition: color @transition-time ease;
+            position: relative;
+            top: -3px;
+            &:hover {
+                color: #444;
+            }
+        }
+    }
+
+    &-with-desc {
+        padding: 16px;
+        position: relative;
+        border-radius: @border-radius-base;
+        margin-bottom: 10px;
+        color: @text-color;
+        line-height: 1.5;
+    }
+
+    &-with-desc&-with-icon{
+        padding: 16px 16px 16px 69px;
+    }
+
+    &-with-desc &-desc{
+        display: block;
+    }
+
+    &-with-desc &-message {
+        font-size: 14px;
+        color: @text-color;
+        display: block;
+    }
+
+    &-with-desc &-icon {
+        top: 50%;
+        left: 24px;
+        margin-top: -21px;
+        font-size: 28px;
+    }
+}
\ No newline at end of file
diff --git a/styles/components/index.less b/styles/components/index.less
index 2a709f9a..4da78c70 100644
--- a/styles/components/index.less
+++ b/styles/components/index.less
@@ -3,4 +3,5 @@
 @import "back-top";
 @import "badge";
 @import "circle";
-@import "spin";
\ No newline at end of file
+@import "spin";
+@import "alert";
\ No newline at end of file
diff --git a/styles/themes/default/custom.less b/styles/themes/default/custom.less
index 1f94b18f..c2f1931c 100644
--- a/styles/themes/default/custom.less
+++ b/styles/themes/default/custom.less
@@ -26,6 +26,9 @@
 @grid-columns           : 24;
 @grid-gutter-width      : 0;
 
+// Legend
+@legend-color           : #999;
+
 // Z-index
 @zindex-affix           : 10;
 @zindex-back-top        : 10;