From 79288d43dd7616be2a7b3a9a087049a71acf6b81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Fri, 3 Mar 2017 15:19:21 +0800
Subject: [PATCH] support Poptip & clickoutside

support Poptip & clickoutside
---
 .eslintignore                      |  1 +
 README.md                          |  2 +-
 src/components/base/popper.js      |  2 +-
 src/components/poptip/poptip.vue   | 48 ++++++++++++++++--------------
 src/components/tooltip/tooltip.vue |  1 +
 src/directives/clickoutside.js     | 20 +++++++------
 src/index.js                       |  4 +--
 test/app.vue                       |  1 +
 test/main.js                       |  4 +++
 test/routers/card.vue              |  2 +-
 test/routers/poptip.vue            | 36 ++++++++++++++--------
 11 files changed, 72 insertions(+), 49 deletions(-)
 create mode 100644 .eslintignore

diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 00000000..dbdcd6b5
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1 @@
+src/directives
\ No newline at end of file
diff --git a/README.md b/README.md
index 1804c88f..806bedd9 100644
--- a/README.md
+++ b/README.md
@@ -46,7 +46,7 @@
 - [x] Timeline
 - [x] Tag
 - [x] Tooltip
-- [ ] Poptip
+- [x] Poptip
 - [x] Carousel
 - [x] Tree
 - [ ] Menu
diff --git a/src/components/base/popper.js b/src/components/base/popper.js
index 8373e1d3..8084ae12 100644
--- a/src/components/base/popper.js
+++ b/src/components/base/popper.js
@@ -40,7 +40,7 @@ export default {
     data () {
         return {
             visible: this.value
-        }
+        };
     },
     watch: {
         value: {
diff --git a/src/components/poptip/poptip.vue b/src/components/poptip/poptip.vue
index 9d333853..509003e5 100644
--- a/src/components/poptip/poptip.vue
+++ b/src/components/poptip/poptip.vue
@@ -6,33 +6,35 @@
         v-clickoutside="handleClose">
         <div
             :class="[prefixCls + '-rel']"
-            v-el:reference
+            ref="reference"
             @click="handleClick"
             @mousedown="handleFocus(false)"
             @mouseup="handleBlur(false)">
             <slot></slot>
         </div>
-        <div :class="[prefixCls + '-popper']" :style="styles" transition="fade" v-el:popper v-show="visible">
-            <div :class="[prefixCls + '-content']">
-                <div :class="[prefixCls + '-arrow']"></div>
-                <div :class="[prefixCls + '-inner']" v-if="confirm">
-                    <div :class="[prefixCls + '-body']">
-                        <i class="ivu-icon ivu-icon-help-circled"></i>
-                        <div :class="[prefixCls + '-body-message']"><slot name="title">{{ title }}</slot></div>
+        <transition name="fade">
+            <div :class="[prefixCls + '-popper']" :style="styles" ref="popper" v-show="visible">
+                <div :class="[prefixCls + '-content']">
+                    <div :class="[prefixCls + '-arrow']"></div>
+                    <div :class="[prefixCls + '-inner']" v-if="confirm">
+                        <div :class="[prefixCls + '-body']">
+                            <i class="ivu-icon ivu-icon-help-circled"></i>
+                            <div :class="[prefixCls + '-body-message']"><slot name="title">{{ title }}</slot></div>
+                        </div>
+                        <div :class="[prefixCls + '-footer']">
+                            <i-button type="text" size="small" @click.native="cancel">{{ cancelText }}</i-button>
+                            <i-button type="primary" size="small" @click.native="ok">{{ okText }}</i-button>
+                        </div>
                     </div>
-                    <div :class="[prefixCls + '-footer']">
-                        <i-button type="text" size="small" @click="cancel">{{ cancelText }}</i-button>
-                        <i-button type="primary" size="small" @click="ok">{{ okText }}</i-button>
-                    </div>
-                </div>
-                <div :class="[prefixCls + '-inner']" v-if="!confirm">
-                    <div :class="[prefixCls + '-title']" v-if="showTitle" v-el:title><slot name="title"><div :class="[prefixCls + '-title-inner']">{{ title }}</div></slot></div>
-                    <div :class="[prefixCls + '-body']">
-                        <div :class="[prefixCls + '-body-content']"><slot name="content"><div :class="[prefixCls + '-body-content-inner']">{{ content }}</div></slot></div>
+                    <div :class="[prefixCls + '-inner']" v-if="!confirm">
+                        <div :class="[prefixCls + '-title']" v-if="showTitle" ref="title"><slot name="title"><div :class="[prefixCls + '-title-inner']">{{ title }}</div></slot></div>
+                        <div :class="[prefixCls + '-body']">
+                            <div :class="[prefixCls + '-body-content']"><slot name="content"><div :class="[prefixCls + '-body-content-inner']">{{ content }}</div></slot></div>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
+        </transition>
     </div>
 </template>
 <script>
@@ -45,6 +47,7 @@
     const prefixCls = 'ivu-poptip';
 
     export default {
+        name: 'Poptip',
         mixins: [Popper],
         directives: { clickoutside },
         components: { iButton },
@@ -167,8 +170,8 @@
                 this.$emit('on-ok');
             },
             getInputChildren () {
-                const $input = this.$els.reference.querySelectorAll('input');
-                const $textarea = this.$els.reference.querySelectorAll('textarea');
+                const $input = this.$refs.reference.querySelectorAll('input');
+                const $textarea = this.$refs.reference.querySelectorAll('textarea');
                 let $children = null;
 
                 if ($input.length) {
@@ -180,9 +183,10 @@
                 return $children;
             }
         },
-        compiled () {
+        mounted () {
             if (!this.confirm) {
-                this.showTitle = this.$els.title.innerHTML != `<div class="${prefixCls}-title-inner"></div>`;
+//                this.showTitle = this.$refs.title.innerHTML != `<div class="${prefixCls}-title-inner"></div>`;
+                this.showTitle = this.$slots.title !== undefined;
             }
             // if trigger and children is input or textarea,listen focus & blur event
             if (this.trigger === 'focus') {
diff --git a/src/components/tooltip/tooltip.vue b/src/components/tooltip/tooltip.vue
index d064f7cb..1dc3429c 100644
--- a/src/components/tooltip/tooltip.vue
+++ b/src/components/tooltip/tooltip.vue
@@ -20,6 +20,7 @@
     const prefixCls = 'ivu-tooltip';
 
     export default {
+        name: 'Tooltip',
         mixins: [Popper],
         props: {
             placement: {
diff --git a/src/directives/clickoutside.js b/src/directives/clickoutside.js
index 8bb08512..6d75fc3d 100644
--- a/src/directives/clickoutside.js
+++ b/src/directives/clickoutside.js
@@ -1,19 +1,21 @@
 export default {
-    bind () {
-        this.documentHandler = (e) => {
-            if (this.el.contains(e.target)) {
+    bind (el, binding, vnode) {
+        function documentHandler (e) {
+            if (el.contains(e.target)) {
                 return false;
             }
-            if (this.expression) {
-                this.vm[this.expression]();
+            if (binding.expression) {
+                binding.value(e);
             }
-        };
-        document.addEventListener('click', this.documentHandler);
+        }
+        el.__vueClickOutside__ = documentHandler;
+        document.addEventListener('click', documentHandler);
     },
     update () {
 
     },
-    unbind () {
-        document.removeEventListener('click', this.documentHandler);
+    unbind (el, binding) {
+        document.removeEventListener('click', el.__vueClickOutside__);
+        delete el.__vueClickOutside__;
     }
 };
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index ce550a39..23b09330 100644
--- a/src/index.js
+++ b/src/index.js
@@ -25,7 +25,7 @@ import InputNumber from './components/input-number';
 // import Modal from './components/modal';
 // import Notice from './components/notice';
 // import Page from './components/page';
-// import Poptip from './components/poptip';
+import Poptip from './components/poptip';
 import Progress from './components/progress';
 import Radio from './components/radio';
 import Rate from './components/rate';
@@ -87,7 +87,7 @@ const iview = {
     // OptionGroup,
     // Page,
     Panel: Collapse.Panel,
-    // Poptip,
+    Poptip,
     Progress,
     Radio,
     RadioGroup: Radio.Group,
diff --git a/test/app.vue b/test/app.vue
index e043ef92..a7189dd0 100644
--- a/test/app.vue
+++ b/test/app.vue
@@ -36,6 +36,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
                 <li><router-link to="/circle">Circle</router-link></li>
                 <li><router-link to="/tabs">Tabs</router-link></li>
                 <li><router-link to="/tooltip">Tooltip</router-link></li>
+                <li><router-link to="/poptip">Poptip</router-link></li>
                 <li><router-link to="/slider">Slider</router-link></li>
             </ul>
         </nav>
diff --git a/test/main.js b/test/main.js
index f979d333..d987f382 100644
--- a/test/main.js
+++ b/test/main.js
@@ -109,6 +109,10 @@ const router = new VueRouter({
             path: '/tooltip',
             component: require('./routers/tooltip.vue')
         },
+        {
+            path: '/poptip',
+            component: require('./routers/poptip.vue')
+        },
         {
             path: '/slider',
             component: require('./routers/slider.vue')
diff --git a/test/routers/card.vue b/test/routers/card.vue
index c3edcbde..1a6e9223 100644
--- a/test/routers/card.vue
+++ b/test/routers/card.vue
@@ -12,7 +12,7 @@
             <li v-for="item in movieList">
                 <a :href="item.url" target="_blank">{{ item.name }}</a>
                 <span>
-                    <Icon type="ios-star" v-for="n in 4"></Icon><Icon type="ios-star" v-if="item.rate >= 9.5"></Icon><Icon type="ios-star-half" v-else></Icon>
+                    <!--<Icon type="ios-star" v-for="n in 4"></Icon><Icon type="ios-star" v-if="item.rate >= 9.5"></Icon><Icon type="ios-star-half" v-else></Icon>-->
                     {{ item.rate }}
                 </span>
             </li>
diff --git a/test/routers/poptip.vue b/test/routers/poptip.vue
index 8cf282b8..b0b93693 100644
--- a/test/routers/poptip.vue
+++ b/test/routers/poptip.vue
@@ -1,22 +1,32 @@
 <template>
-    <div style="margin: 100px">
-        <Poptip trigger="hover" placement="bottom" title="提示标题" content="提示内容">
-            <i-button>hover 激活</i-button>
+    <div style="margin: 100px;">
+        <Poptip
+                confirm
+                title="您确认删除这条内容吗？"
+                @on-ok="ok"
+                @on-cancel="cancel">
+            <Button>删除</Button>
         </Poptip>
-        <Poptip title="提示标题" placement="bottom" content="提示内容">
-            <i-button>click 激活</i-button>
-        </Poptip>
-        <Poptip trigger="focus" title="提示标题" content="提示内容">
-            <i-input type="textarea"></i-input>
-            <!--<i-button>focus 激活</i-button>-->
-        </Poptip>
-        <Poptip trigger="focus" placement="bottom" title="提示标题" content="提示内容">
-            <i-input></i-input>
+        <Poptip
+                confirm
+                title="Are you sure delete this task?"
+                @on-ok="ok"
+                @on-cancel="cancel"
+                ok-text="yes"
+                cancel-text="no">
+            <Button>国际化</Button>
         </Poptip>
     </div>
 </template>
 <script>
     export default {
-
+        methods: {
+            ok () {
+                this.$Message.info('点击了确定');
+            },
+            cancel () {
+                this.$Message.info('点击了取消');
+            }
+        }
     }
 </script>