add Tooltip component

add Tooltip component

components/base/popper.js

@@ -0,0 +1,136 @@
+import Popper from 'popper.js';
+
+/**
+* https://github.com/freeze-component/vue-popper
+* */
+export default {
+    props: {
+        placement: {
+            type: String,
+            default: 'bottom'
+        },
+        boundariesPadding: {
+            type: Number,
+            default: 5
+        },
+        reference: Object,
+        popper: Object,
+        offset: {
+            default: 0
+        },
+        value: Boolean,
+        visibleArrow: Boolean,
+        transition: String,
+        options: {
+            type: Object,
+            default () {
+                return {};
+            }
+        }
+    },
+    data() {
+        return {
+            showPopper: false
+        };
+    },
+    watch: {
+        value: {
+            immediate: true,
+            handler(val) {
+                this.showPopper = val;
+                this.$emit('input', val);
+            }
+        },
+        showPopper(val) {
+            val ? this.updatePopper() : this.destroyPopper();
+            this.$emit('input', val);
+        }
+    },
+    methods: {
+        createPopper() {
+            if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(this.placement)) {
+                return;
+            }
+
+            const options = this.options;
+            const popper = this.popper || this.$els.popper;
+            const reference = this.reference || this.$els.reference;
+
+            if (!popper || !reference) return;
+            if (this.visibleArrow) {
+                this.appendArrow(popper);
+            }
+
+            if (this.popperJS && this.popperJS.hasOwnProperty('destroy')) {
+                this.popperJS.destroy();
+            }
+
+            options.placement = this.placement;
+            options.offset = this.offset;
+
+            this.$nextTick(() => {
+                this.popperJS = new Popper(
+                    reference,
+                    popper,
+                    options
+                );
+                this.popperJS.onCreate(popper => {
+                    this.resetTransformOrigin(popper);
+                    this.$emit('created', this);
+                });
+            });
+        },
+        updatePopper() {
+            if (this.popperJS) {
+                this.popperJS.update();
+            } else {
+                this.createPopper();
+            }
+        },
+        doDestroy() {
+            if (this.showPopper) return;
+            this.popperJS.destroy();
+            this.popperJS = null;
+        },
+        destroyPopper() {
+            if (this.popperJS) {
+                this.resetTransformOrigin(this.popperJS);
+            }
+        },
+        resetTransformOrigin(popper) {
+            let placementMap = {top: 'bottom', bottom: 'top', left: 'right', right: 'left'};
+            let placement = popper._popper.getAttribute('x-placement').split('-')[0];
+            let origin = placementMap[placement];
+            popper._popper.style.transformOrigin = ['top', 'bottom'].indexOf(placement) > -1 ? `center ${ origin }` : `${ origin } center`;
+        },
+        appendArrow(element) {
+            let hash;
+            if (this.appended) {
+                return;
+            }
+
+            this.appended = true;
+
+            for (let item in element.attributes) {
+                if (/^_v-/.test(element.attributes[item].name)) {
+                    hash = element.attributes[item].name;
+                    break;
+                }
+            }
+
+            const arrow = document.createElement('div');
+
+            if (hash) {
+                arrow.setAttribute(hash, '');
+            }
+            arrow.setAttribute('x-arrow', '');
+            arrow.className = 'popper__arrow';
+            element.appendChild(arrow);
+        }
+    },
+    beforeDestroy() {
+        if (this.popperJS) {
+            this.popperJS.destroy();
+        }
+    }
+};

components/tooltip/index.js

@@ -0,0 +1,3 @@
+import Tooltip from './tooltip.vue';
+
+export default Tooltip;

components/tooltip/tooltip.vue

@@ -0,0 +1,67 @@
+<template>
+    <div :class="[`${prefixCls}`]" @mouseenter="handleShowPopper" @mouseleave="handleClosePopper">
+        <div :class="[`${prefixCls}-rel`]" v-el:reference>
+            <slot></slot>
+        </div>
+        <div :class="popperClasses" transition="fade" v-el:popper v-show="!disabled && showPopper">
+            <div :class="[`${prefixCls}-content`]">
+                <div :class="[`${prefixCls}-arrow`]"></div>
+                <div :class="[`${prefixCls}-inner`]"><slot name="content">{{ content }}</slot></div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import Popper from '../base/popper';
+    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-tooltip';
+
+    export default {
+        mixins: [Popper],
+        props: {
+            placement: {
+                validator (value) {
+                    return oneOf(value, ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']);
+                },
+                default: 'bottom'
+            },
+            content: {
+                type: [String, Number],
+                default: ''
+            },
+            delay: {
+                type: Number,
+                default: 0
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data () {
+            return {
+                prefixCls: prefixCls
+            }
+        },
+        computed: {
+            popperClasses () {
+                return [
+                    `${prefixCls}-popper`,
+                    `${prefixCls}-placement-${this.placement}`
+                ]
+            }
+        },
+        methods: {
+            handleShowPopper() {
+                this.timeout = setTimeout(() => {
+                    this.showPopper = true;
+                }, this.delay);
+            },
+            handleClosePopper() {
+                clearTimeout(this.timeout);
+                this.showPopper = false;
+            }
+        }
+    }
+</script>

index.js

@@ -25,6 +25,7 @@ import Notice from './components/notice';
 import LoadingBar from './components/loading-bar';
 import Modal from './components/modal';
 import { Select, Option, OptionGroup } from './components/select';
+import Tooltip from './components/tooltip';
 
 const iview = {
     Button,
@@ -63,7 +64,8 @@ const iview = {
     Modal,
     iSelect: Select,
     iOption: Option,
-    iOptionGroup: OptionGroup
+    iOptionGroup: OptionGroup,
+    Tooltip
 };
 
 module.exports = iview;

local/routers/notice.vue

@@ -1,69 +1,63 @@
 <template>
-    <Alert type="success" show-icon closable>
+    <Tooltip content="Top Left 提示文字" placement="top" disabled>
-        成功提示文案
+        <Button>上面的左面</Button>
-        <span slot="desc">成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案</span>
+        <div slot="content">
-    </Alert>
+            <p>附近的是否会可接受的</p>
-    <Button @click="open">open</Button>
+            <p>飞机史蒂夫</p>
-    <Button @click="close">close key = key111</Button>
+        </div>
-    <Button @click="destroy">destroy</Button>
+    </Tooltip>
+    <Tooltip content="Top Left 提示文字" placement="bottom">
+        仅仅是一段文字而已，this的回复看就是风刀霜剑
+    </Tooltip>
+    <Tooltip content="Top Left 提示文字" placement="left" delay="1000">
+        <Button>上面的左面</Button>
+    </Tooltip>
+    <Tooltip content="Top Left 提示文字" placement="right">
+        <Button>上面的左面</Button>
+    </Tooltip>
+    <Tooltip content="Top Left 提示文字" placement="top-start">
+        <Button>上面的左面</Button>
+    </Tooltip>
+    <Tooltip content="Top Left 提示文字" placement="top-end">
+        <Button>上面的左面</Button>
+    </Tooltip>
+    <Tooltip content="Top Left 提示文字" placement="bottom-start">
+        <Button>上面的左面</Button>
+    </Tooltip>
+    <Tooltip content="Top Left 提示文字" placement="bottom-end">
+        <Button>上面的左面</Button>
+    </Tooltip>
+    <Tooltip content="Top Left 提示文字" placement="left-start">
+        <Button>上面的左面</Button>
+    </Tooltip>
+    <Tooltip content="Top Left 提示文字" placement="left-end">
+        <Button>上面的左面</Button>
+    </Tooltip>
+    <Tooltip content="Top Left 提示文字" placement="right-start">
+        <Button>上面的左面</Button>
+    </Tooltip>
+    <Tooltip content="Top Left 提示文字" placement="right-end">
+        <Button>上面的左面</Button>
+    </Tooltip>
 </template>
 <script>
-    import { Notice, Button, Message, Alert } from 'iview';
+    import { Tooltip, Button } from 'iview';
 
     export default {
-        components: { Notice, Button, Alert },
+        components: { Tooltip, Button },
         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.9.4",
+  "version": "0.9.5-rc-1",
   "title": "iView",
   "description": "A high quality  UI components Library with Vue.js",
   "homepage": "http://www.iviewui.com",

styles/components/index.less

@@ -22,3 +22,4 @@
 @import "modal";
 @import "select";
 @import "select-dropdown";
+@import "tooltip";

styles/components/tooltip.less

@@ -0,0 +1,142 @@
+@tooltip-prefix-cls: ~"@{css-prefix}tooltip";
+@tooltip-max-width: 250px;
+@tooltip-arrow-width: 5px;
+@tooltip-distance: @tooltip-arrow-width - 1 + 4;
+
+.@{tooltip-prefix-cls} {
+    display: inline-block;
+
+    &-popper{
+        display: block;
+        visibility: visible;
+        font-size: @font-size-small;
+        line-height: @line-height-base;
+        position: absolute;
+        z-index: @zindex-tooltip;
+    }
+
+    &-inner{
+        max-width: @tooltip-max-width;
+        min-height: 34px;
+        padding: 8px 10px;
+        color: @tooltip-color;
+        text-align: left;
+        text-decoration: none;
+        background-color: @tooltip-bg;
+        border-radius: @border-radius-small;
+        box-shadow: @shadow-base;
+    }
+
+    &-arrow{
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-color: transparent;
+        border-style: solid;
+    }
+
+    &-placement-top,
+    &-placement-top-start,
+    &-placement-top-end {
+        padding: @tooltip-arrow-width 0 @tooltip-distance 0;
+    }
+    &-placement-right,
+    &-placement-right-start,
+    &-placement-right-end {
+        padding: 0 @tooltip-arrow-width 0 @tooltip-distance;
+    }
+    &-placement-bottom,
+    &-placement-bottom-start,
+    &-placement-bottom-end {
+        padding: @tooltip-distance 0 @tooltip-arrow-width 0;
+    }
+    &-placement-left,
+    &-placement-left-start,
+    &-placement-left-end {
+        padding: 0 @tooltip-distance 0 @tooltip-arrow-width;
+    }
+
+    &-placement-top &-arrow,
+    &-placement-top-start &-arrow,
+    &-placement-top-end &-arrow {
+        bottom: @tooltip-distance - @tooltip-arrow-width;
+        border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
+        border-top-color: @tooltip-bg;
+    }
+
+    &-placement-top &-arrow {
+        left: 50%;
+        margin-left: -@tooltip-arrow-width;
+    }
+
+    &-placement-top-start &-arrow {
+        left: 16px;
+    }
+
+    &-placement-top-end &-arrow {
+        right: 16px;
+    }
+
+    &-placement-right &-arrow,
+    &-placement-right-start &-arrow,
+    &-placement-right-end &-arrow {
+        left: @tooltip-distance - @tooltip-arrow-width;
+        border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
+        border-right-color: @tooltip-bg;
+    }
+
+    &-placement-right &-arrow {
+        top: 50%;
+        margin-top: -@tooltip-arrow-width;
+    }
+
+    &-placement-right-start &-arrow {
+        top: 8px;
+    }
+
+    &-placement-right-end &-arrow {
+        bottom: 8px;
+    }
+
+    &-placement-left &-arrow,
+    &-placement-left-start &-arrow,
+    &-placement-left-end &-arrow {
+        right: @tooltip-distance - @tooltip-arrow-width;
+        border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
+        border-left-color: @tooltip-bg;
+    }
+
+    &-placement-left &-arrow {
+        top: 50%;
+        margin-top: -@tooltip-arrow-width;
+    }
+
+    &-placement-left-start &-arrow {
+        top: 8px;
+    }
+
+    &-placement-left-end &-arrow {
+        bottom: 8px;
+    }
+
+    &-placement-bottom &-arrow,
+    &-placement-bottom-start &-arrow,
+    &-placement-bottom-end &-arrow {
+        top: @tooltip-distance - @tooltip-arrow-width;
+        border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
+        border-bottom-color: @tooltip-bg;
+    }
+
+    &-placement-bottom &-arrow {
+        left: 50%;
+        margin-left: -@tooltip-arrow-width;
+    }
+
+    &-placement-bottom-start &-arrow {
+        left: 16px;
+    }
+
+    &-placement-bottom-end &-arrow {
+        right: 16px;
+    }
+}

styles/themes/default/custom.less

@@ -11,6 +11,7 @@
 @link-hover-color       : tint(@link-color, 20%);
 @link-active-color      : shade(@link-color, 5%);
 @selected-color         : fade(@primary-color, 90%);
+@tooltip-color          : #fff;
 
 // Base
 @body-background        : #fff;
@@ -18,6 +19,7 @@
 @code-family            : Consolas,Menlo,Courier,monospace;
 @text-color             : #525558;
 @font-size-base         : 14px;
+@font-size-small        : 12px;
 @line-height-base       : 1.5;
 @line-height-computed   : floor((@font-size-base * @line-height-base));
 @border-radius-base     : 6px;
@@ -31,6 +33,7 @@
 // Background color
 @background-color-base        : #f7f7f7;  // base
 @background-color-select-hover: @input-disabled-bg;
+@tooltip-bg                   : #373737;
 
 // Shadow
 @shadow-color           : rgba(100, 100, 100, .2);
@@ -108,6 +111,7 @@
 @zindex-modal           : 1000;
 @zindex-message         : 1010;
 @zindex-notification    : 1010;
+@zindex-tooltip         : 1060;
 @zindex-loading-bar     : 2000;
 
 // Animation