From bb16cf5b23166d79571c6010cd984e75e30bbe68 Mon Sep 17 00:00:00 2001
From: MopTym <moptym@163.com>
Date: Thu, 20 Oct 2016 23:55:27 +0800
Subject: [PATCH] v1.0.0

---
 README.md                 | 20 ++++++++++++++++----
 demo/horizontal-line.html | 18 +++++++++---------
 demo/vertical-line.html   | 18 +++++++++---------
 lib/vue-waterfall.min.js  |  4 ++--
 lib/waterfall-slot.vue    | 14 ++++++++------
 lib/waterfall.vue         | 26 +++++++++++++-------------
 package.json              |  8 +++-----
 src/waterfall-slot.vue    | 14 ++++++++------
 src/waterfall.vue         | 26 +++++++++++++-------------
 9 files changed, 81 insertions(+), 67 deletions(-)

diff --git a/README.md b/README.md
index bbfb931..3deb1c8 100644
--- a/README.md
+++ b/README.md
@@ -8,6 +8,8 @@
 
 A waterfall layout component for Vue.js .
 
+Branch [0.x (version 0.x.x)](https://github.com/MopTym/vue-waterfall/tree/0.x) is compatible with Vue 1 .
+
 ## Demo
 
 - [Vertical line](http://app.moptym.com/vue-waterfall/demo/vertical-line.html)
@@ -187,7 +189,12 @@ new Vue({
         <tr>
             <td>order</td>
             <td><code>0</code></td>
-            <td>The order of slot, often be set to <code>$index</code> in <code>v-for</code> .</td>
+            <td>The order of slot, often be set to <code>index</code> in <code>v-for</code> .</td>
+        </tr>
+        <tr>
+            <td>key</td>
+            <td><code>''</code></td>
+            <td>The unique identification of slot, required for transition.</td>
         </tr>
         <tr>
             <td>move-class</td>
@@ -201,23 +208,28 @@ new Vue({
 
 Inspired by [vue-animated-list](https://github.com/vuejs/vue-animated-list) , vue-waterfall supports moving elements with `translate` in transition, click on the [demo](http://app.moptym.com/vue-waterfall/demo/vertical-line.html) page to see it.
 
+vue-waterfall has not supported `<transition-group>` in Vue 2 ( [#10](https://github.com/MopTym/vue-waterfall/issues/10) ) .
+
 ![preview](shuffle.gif)
 
 ## Events
 
 ```js
-ON ( 'wf-reflow' ) { /* use 'wf-reflow' event to trigger reflow action */
+ON ( 'reflow' ) {
   reflow
 }
+// trigger reflow action: waterfallVm.$emit('reflow')
 ```
 
 ```js
 AFTER ( reflow ) {
-  broadcast 'wf-reflowed'
-  dispatch 'wf-reflowed'
+  emit 'reflowed'
 }
+// waterfallVm.$on('reflowed', () => { console.log('reflowed') })
 ```
 
+To
+
 ## Reactivity
 
 ```js
diff --git a/demo/horizontal-line.html b/demo/horizontal-line.html
index 6d70e03..9911d51 100644
--- a/demo/horizontal-line.html
+++ b/demo/horizontal-line.html
@@ -22,21 +22,23 @@
         :min-line-gap="180"
         :max-line-gap="220"
         :watch="items"
+        @reflowed="reflowed"
+        ref="waterfall"
       >
         <!-- each component is wrapped by a waterfall slot -->
         <waterfall-slot
-          v-for="item in items"
+          v-for="(item, index) in items"
           :width="item.width"
           :height="item.height"
-          :order="$index"
+          :order="index"
+          :key="item.index"
           move-class="item-move"
-          transition="wf"
         >
           <div class="item" :style="item.style" :index="item.index"></div>
         </waterfall-slot>
       </waterfall>
     </div>
-    <script src="https://cdn.jsdelivr.net/vue/1.0.25/vue.js"></script>
+    <script src="https://cdn.jsdelivr.net/vue/2.0.3/vue.min.js"></script>
     <script src="http://app.moptym.com/cdn/vue-waterfall/vue-waterfall.min.js"></script>
     <script src="./common/js/item-factory.js"></script>
     <script>
@@ -63,10 +65,8 @@
             this.items.sort(function () {
               return Math.random() - 0.5
             })
-          }
-        },
-        events: {
-          'wf-reflowed': function () {
+          },
+          reflowed: function () {
             this.isBusy = false
           }
         }
@@ -74,7 +74,7 @@
 
       document.body.addEventListener('click', function () {
         app.shuffle()
-        // app.$broadcast('wf-reflow') // manually trigger reflow action
+        // app.$refs.waterfall.$emit('reflow') // manually trigger reflow action
       }, false)
 
       window.addEventListener('scroll', function () {
diff --git a/demo/vertical-line.html b/demo/vertical-line.html
index fde3d92..cff0702 100644
--- a/demo/vertical-line.html
+++ b/demo/vertical-line.html
@@ -23,21 +23,23 @@
         :max-line-gap="220"
         :single-max-width="300"
         :watch="items"
+        @reflowed="reflowed"
+        ref="waterfall"
       >
         <!-- each component is wrapped by a waterfall slot -->
         <waterfall-slot
-          v-for="item in items"
+          v-for="(item, index) in items"
           :width="item.width"
           :height="item.height"
-          :order="$index"
+          :order="index"
+          :key="item.index"
           move-class="item-move"
-          transition="wf"
         >
           <div class="item" :style="item.style" :index="item.index"></div>
         </waterfall-slot>
       </waterfall>
     </div>
-    <script src="https://cdn.jsdelivr.net/vue/1.0.25/vue.js"></script>
+    <script src="https://cdn.jsdelivr.net/vue/2.0.3/vue.min.js"></script>
     <script src="http://app.moptym.com/cdn/vue-waterfall/vue-waterfall.min.js"></script>
     <script src="./common/js/item-factory.js"></script>
     <script>
@@ -64,10 +66,8 @@
                 this.items.sort(function () {
                   return Math.random() - 0.5
                 })
-              }
-            },
-            events: {
-              'wf-reflowed': function () {
+              },
+              reflowed: function () {
                 this.isBusy = false
               }
             }
@@ -75,7 +75,7 @@
 
           document.body.addEventListener('click', function () {
             app.shuffle()
-            // app.$broadcast('wf-reflow') // manually trigger reflow action
+            // app.$refs.waterfall.$emit('reflow') // manually trigger reflow action
           }, false)
 
           window.addEventListener('scroll', function () {
diff --git a/lib/vue-waterfall.min.js b/lib/vue-waterfall.min.js
index 42f8f22..a25b61e 100644
--- a/lib/vue-waterfall.min.js
+++ b/lib/vue-waterfall.min.js
@@ -1,6 +1,6 @@
 /*!
- * vue-waterfall v0.2.3
+ * vue-waterfall v1.0.0
  * (c) 2016 MopTym <moptym@163.com>
  * https://github.com/MopTym/vue-waterfall
  */
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Waterfall=e():t.Waterfall=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var r=n[i]={exports:{},id:i,loaded:!1};return t[i].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}var r=n(1),o=i(r),a=n(8),s=i(a);t.exports={Waterfall:o["default"],WaterfallSlot:s["default"],waterfall:o["default"],waterfallSlot:s["default"]}},function(t,e,n){var i,r;n(2),i=n(6),r=n(7),t.exports=i||{},t.exports.__esModule&&(t.exports=t.exports["default"]),r&&(("function"==typeof t.exports?t.exports.options||(t.exports.options={}):t.exports).template=r)},function(t,e,n){var i=n(3);"string"==typeof i&&(i=[[t.id,i,""]]);n(5)(i,{});i.locals&&(t.exports=i.locals)},function(t,e,n){e=t.exports=n(4)(),e.push([t.id,".vue-waterfall{position:relative}",""])},function(t,e){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],e=0;e<this.length;e++){var n=this[e];n[2]?t.push("@media "+n[2]+"{"+n[1]+"}"):t.push(n[1])}return t.join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var i={},r=0;r<this.length;r++){var o=this[r][0];"number"==typeof o&&(i[o]=!0)}for(r=0;r<e.length;r++){var a=e[r];"number"==typeof a[0]&&i[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),t.push(a))}},t}},function(t,e,n){function i(t,e){for(var n=0;n<t.length;n++){var i=t[n],r=c[i.id];if(r){r.refs++;for(var o=0;o<r.parts.length;o++)r.parts[o](i.parts[o]);for(;o<i.parts.length;o++)r.parts.push(u(i.parts[o],e))}else{for(var a=[],o=0;o<i.parts.length;o++)a.push(u(i.parts[o],e));c[i.id]={id:i.id,refs:1,parts:a}}}}function r(t){for(var e=[],n={},i=0;i<t.length;i++){var r=t[i],o=r[0],a=r[1],s=r[2],u=r[3],l={css:a,media:s,sourceMap:u};n[o]?n[o].parts.push(l):e.push(n[o]={id:o,parts:[l]})}return e}function o(t,e){var n=p(),i=m[m.length-1];if("top"===t.insertAt)i?i.nextSibling?n.insertBefore(e,i.nextSibling):n.appendChild(e):n.insertBefore(e,n.firstChild),m.push(e);else{if("bottom"!==t.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");n.appendChild(e)}}function a(t){t.parentNode.removeChild(t);var e=m.indexOf(t);e>=0&&m.splice(e,1)}function s(t){var e=document.createElement("style");return e.type="text/css",o(t,e),e}function u(t,e){var n,i,r;if(e.singleton){var o=g++;n=v||(v=s(e)),i=l.bind(null,n,o,!1),r=l.bind(null,n,o,!0)}else n=s(e),i=f.bind(null,n),r=function(){a(n)};return i(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;i(t=e)}else r()}}function l(t,e,n,i){var r=n?"":i.css;if(t.styleSheet)t.styleSheet.cssText=x(e,r);else{var o=document.createTextNode(r),a=t.childNodes;a[e]&&t.removeChild(a[e]),a.length?t.insertBefore(o,a[e]):t.appendChild(o)}}function f(t,e){var n=e.css,i=e.media,r=e.sourceMap;if(i&&t.setAttribute("media",i),r&&(n+="\n/*# sourceURL="+r.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}var c={},d=function(t){var e;return function(){return"undefined"==typeof e&&(e=t.apply(this,arguments)),e}},h=d(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),p=d(function(){return document.head||document.getElementsByTagName("head")[0]}),v=null,g=0,m=[];t.exports=function(t,e){e=e||{},"undefined"==typeof e.singleton&&(e.singleton=h()),"undefined"==typeof e.insertAt&&(e.insertAt="bottom");var n=r(t);return i(n,e),function(t){for(var o=[],a=0;a<n.length;a++){var s=n[a],u=c[s.id];u.refs--,o.push(u)}if(t){var l=r(t);i(l,e)}for(var a=0;a<o.length;a++){var u=o[a];if(0===u.refs){for(var f=0;f<u.parts.length;f++)u.parts[f]();delete c[u.id]}}}};var x=function(){var t=[];return function(e,n){return t[e]=n,t.filter(Boolean).join("\n")}}()},function(t,e){"use strict";function n(t){t!==!1&&this.autoResize?y(window,"resize",this.reflowHandler,!1):b(window,"resize",this.reflowHandler,!1)}function i(t){var e=t.target,n=e[L];n&&m(e,n)}function r(t){return function(){clearTimeout(t),t=setTimeout(this.reflow,this.interval)}}function o(){var t=this;if(this.$el){var e=this.$el.clientWidth,n=this.$children.map(function(t){return t.getMeta()});n.sort(function(t,e){return t.order-e.order}),this.virtualRects=n.map(function(){return{}}),s(this,n,this.virtualRects),setTimeout(function(){a(t.$el,e)&&s(t,n,t.virtualRects),t.style.overflow="hidden",f(t.virtualRects,n),t.$broadcast("wf-reflowed",[t]),t.$dispatch("wf-reflowed",[t])},0)}}function a(t,e){return e!==t.clientWidth}function s(t,e,n){var i=u(t),r="h"===t.line?W:C;r.calculate(t,i,e,n)}function u(t){return{align:~["left","right","center"].indexOf(t.align)?t.align:"left",line:~["v","h"].indexOf(t.line)?t.line:"v",lineGap:+t.lineGap,minLineGap:t.minLineGap?+t.minLineGap:t.lineGap,maxLineGap:t.maxLineGap?+t.maxLineGap:t.lineGap,singleMaxWidth:Math.max(t.singleMaxWidth||0,t.maxLineGap),fixedHeight:!!t.fixedHeight}}function l(t,e,n){switch(n){case"right":return t-e;case"center":return(t-e)/2;default:return 0}}function f(t,e){var n=e.filter(function(t){return t.moveClass}),i=c(n);d(t,e);var r=c(n);n.forEach(function(t,e){t.node[L]=t.moveClass,h(t.node,i[e],r[e])}),document.body.clientWidth,n.forEach(function(t){g(t.node,t.moveClass),p(t.node)})}function c(t){return t.map(function(t){return t.vm.rect})}function d(t,e){t.forEach(function(t,n){var i=e[n].node.style;e[n].vm.rect=t;for(var r in t)i[r]=t[r]+"px"})}function h(t,e,n){var i=e.left-n.left,r=e.top-n.top,o=e.width/n.width,a=e.height/n.height;t.style.transform=t.style.WebkitTransform="translate("+i+"px,"+r+"px) scale("+o+","+a+")",t.style.transitionDuration="0s"}function p(t){t.style.transform=t.style.WebkitTransform="",t.style.transitionDuration=""}function v(t,e){for(var n="function"==typeof t?function(){return t()}:function(){return t},i=[],r=0;e>r;r++)i[r]=n();return i}function g(t,e){if(!x(t,e)){var n=w(t,"class").trim(),i=(n+" "+e).trim();w(t,"class",i)}}function m(t,e){var n=new RegExp("\\s*\\b"+e+"\\b\\s*","g"),i=w(t,"class").replace(n," ").trim();w(t,"class",i)}function x(t,e){return new RegExp("\\b"+e+"\\b").test(w(t,"class"))}function w(t,e,n){return"undefined"==typeof n?t.getAttribute(e)||"":void t.setAttribute(e,n)}function y(t,e,n){var i=arguments.length<=3||void 0===arguments[3]?!1:arguments[3];t.addEventListener(e,n,i)}function b(t,e,n){var i=arguments.length<=3||void 0===arguments[3]?!1:arguments[3];t.removeEventListener(e,n,i)}Object.defineProperty(e,"__esModule",{value:!0});var G=void 0===window.ontransitionend&&void 0!==window.onwebkittransitionend,M=G?"webkitTransitionEnd":"transitionend",L="_wfMoveClass";e["default"]={props:{autoResize:{"default":!0},interval:{"default":200,validator:function(t){return t>=0}},align:{"default":"left",validator:function(t){return~["left","right","center"].indexOf(t)}},line:{"default":"v",validator:function(t){return~["v","h"].indexOf(t)}},lineGap:{required:!0,validator:function(t){return t>=0}},minLineGap:{validator:function(t){return t>=0}},maxLineGap:{validator:function(t){return t>=0}},singleMaxWidth:{validator:function(t){return t>=0}},fixedHeight:{"default":!1},watch:{"default":{}}},data:function(){return{style:{height:"",overflow:""}}},methods:{autoResizeHandler:n,reflowHandler:r(),reflow:o},events:{"wf-reflow":function(){this.reflowHandler()}},compiled:function(){this.virtualRects=[]},ready:function(){var t=this;this.autoResizeHandler(),this.$watch("autoResize",this.autoResizeHandler),this.$watch(function(){return t.align,t.line,t.lineGap,t.minLineGap,t.maxLineGap,t.singleMaxWidth,t.fixedHeight,t.watch},this.reflowHandler),y(this.$el,M,i,!0)},beforeDestroy:function(){this.autoResizeHandler(!1),b(this.$el,M,i,!0)}};var C=function(){function t(t,n,i,r){var o=t.$el.clientWidth,a=e(o,n),s=v(0,a.count);i.forEach(function(t,e){var i=s.reduce(function(t,e,n){return e<s[t]?n:t},0),o=r[e];o.top=s[i],o.left=a.left+a.width*i,o.width=a.width,o.height=t.height*(n.fixedHeight?1:a.width/t.width),s[i]=s[i]+o.height}),t.style.height=Math.max.apply(null,s)+"px"}function e(t,e){var n=t/e.lineGap,i=void 0;if(e.singleMaxWidth>=t)n=1,i=Math.max(t,e.minLineGap);else{var r=e.maxLineGap*~~n,o=e.minLineGap*~~(n+1),a=r>=t,s=t>=o;a&&s?(n=Math.round(n),i=t/n):a?(n=~~n,i=t/n):s?(n=~~(n+1),i=t/n):(n=~~n,i=e.maxLineGap),1===n&&(i=Math.min(t,e.singleMaxWidth),i=Math.max(i,e.minLineGap))}return{width:i,count:n,left:l(t,i*n,e.align)}}return{calculate:t}}(),W=function(){function t(t,n,i,r){for(var o=t.$el.clientWidth,a=i.length,s=0,u=0;a>u;){for(var l,f,c=e(o,n,i,u),d=0,h=0;d<c.count;d++)l=i[u+d],f=r[u+d],f.top=s,f.left=c.left+h,f.width=l.width*c.height/l.height,f.height=c.height,h+=f.width;u+=c.count,s+=c.height}t.style.height=s+"px"}function e(t,e,o,a){var s=n(t,e.lineGap,o,a),u=Math.max(s-1,1),f=i(t,e,o,a,s),c=i(t,e,o,a,u),d=r(c,f,t),h=d.height,p=d.width;return 1===d.count&&(p=Math.min(e.singleMaxWidth,t),h=o[a].height*p/o[a].width),{left:l(t,p,e.align),count:d.count,height:h}}function n(t,e,n,i){for(var r=0,o=i,a=0;o<n.length&&t>=a;o++)a+=n[o].width*e/n[o].height,r++;return r}function i(t,e,n,i,r){for(var o=0,a=r-1;a>=0;a--){var s=n[i+a];o+=s.width*e.lineGap/s.height}var u=e.lineGap*t/o,l=u<=e.maxLineGap&&u>=e.minLineGap;if(l)return{cost:Math.abs(e.lineGap-u),count:r,width:t,height:u};var f=o>t?e.minLineGap:e.maxLineGap;return{cost:1/0,count:r,width:o*f/e.lineGap,height:f}}function r(t,e,n){return t.cost===1/0&&e.cost===1/0?e.width<n?e:t:e.cost>=t.cost?t:e}return{calculate:t}}()},function(t,e){t.exports="<div class=vue-waterfall :style=style><slot></slot></div>"},function(t,e,n){var i,r;n(9),i=n(11),r=n(12),t.exports=i||{},t.exports.__esModule&&(t.exports=t.exports["default"]),r&&(("function"==typeof t.exports?t.exports.options||(t.exports.options={}):t.exports).template=r)},function(t,e,n){var i=n(10);"string"==typeof i&&(i=[[t.id,i,""]]);n(5)(i,{});i.locals&&(t.exports=i.locals)},function(t,e,n){e=t.exports=n(4)(),e.push([t.id,".vue-waterfall-slot{position:absolute;margin:0;padding:0;box-sizing:border-box}",""])},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]={data:function(){return{isShow:!1}},props:{width:{required:!0,validator:function(t){return t>=0}},height:{required:!0,validator:function(t){return t>=0}},order:{"default":0},moveClass:{"default":""}},methods:{notify:function(){this.$dispatch("wf-reflow",[this])},getMeta:function(){return{vm:this,node:this.$el,order:this.order,width:this.width,height:this.height,moveClass:this.moveClass}}},compiled:function(){var t=this;this.$watch("width, height",this.notify),this.$once("wf-reflowed",function(){return t.isShow=!0}),this.rect={top:0,left:0,width:0,height:0}},attached:function(){this.notify()},detached:function(){this.notify()}}},function(t,e){t.exports="<div class=vue-waterfall-slot v-show=isShow><slot></slot></div>"}])});
\ No newline at end of file
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Waterfall=e():t.Waterfall=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var r=n[i]={exports:{},id:i,loaded:!1};return t[i].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}var r=n(1),o=i(r),a=n(8),s=i(a);t.exports={Waterfall:o["default"],WaterfallSlot:s["default"],waterfall:o["default"],waterfallSlot:s["default"]}},function(t,e,n){var i,r;n(2),i=n(6);var o=n(7);r=i=i||{},("object"==typeof i["default"]||"function"==typeof i["default"])&&(r=i=i["default"]),"function"==typeof r&&(r=r.options),r.render=o.render,r.staticRenderFns=o.staticRenderFns,t.exports=i},function(t,e,n){var i=n(3);"string"==typeof i&&(i=[[t.id,i,""]]);n(5)(i,{});i.locals&&(t.exports=i.locals)},function(t,e,n){e=t.exports=n(4)(),e.push([t.id,".vue-waterfall{position:relative}",""])},function(t,e){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],e=0;e<this.length;e++){var n=this[e];n[2]?t.push("@media "+n[2]+"{"+n[1]+"}"):t.push(n[1])}return t.join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var i={},r=0;r<this.length;r++){var o=this[r][0];"number"==typeof o&&(i[o]=!0)}for(r=0;r<e.length;r++){var a=e[r];"number"==typeof a[0]&&i[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),t.push(a))}},t}},function(t,e,n){function i(t,e){for(var n=0;n<t.length;n++){var i=t[n],r=d[i.id];if(r){r.refs++;for(var o=0;o<r.parts.length;o++)r.parts[o](i.parts[o]);for(;o<i.parts.length;o++)r.parts.push(u(i.parts[o],e))}else{for(var a=[],o=0;o<i.parts.length;o++)a.push(u(i.parts[o],e));d[i.id]={id:i.id,refs:1,parts:a}}}}function r(t){for(var e=[],n={},i=0;i<t.length;i++){var r=t[i],o=r[0],a=r[1],s=r[2],u=r[3],l={css:a,media:s,sourceMap:u};n[o]?n[o].parts.push(l):e.push(n[o]={id:o,parts:[l]})}return e}function o(t,e){var n=p(),i=g[g.length-1];if("top"===t.insertAt)i?i.nextSibling?n.insertBefore(e,i.nextSibling):n.appendChild(e):n.insertBefore(e,n.firstChild),g.push(e);else{if("bottom"!==t.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");n.appendChild(e)}}function a(t){t.parentNode.removeChild(t);var e=g.indexOf(t);e>=0&&g.splice(e,1)}function s(t){var e=document.createElement("style");return e.type="text/css",o(t,e),e}function u(t,e){var n,i,r;if(e.singleton){var o=m++;n=v||(v=s(e)),i=l.bind(null,n,o,!1),r=l.bind(null,n,o,!0)}else n=s(e),i=f.bind(null,n),r=function(){a(n)};return i(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;i(t=e)}else r()}}function l(t,e,n,i){var r=n?"":i.css;if(t.styleSheet)t.styleSheet.cssText=w(e,r);else{var o=document.createTextNode(r),a=t.childNodes;a[e]&&t.removeChild(a[e]),a.length?t.insertBefore(o,a[e]):t.appendChild(o)}}function f(t,e){var n=e.css,i=e.media,r=e.sourceMap;if(i&&t.setAttribute("media",i),r&&(n+="\n/*# sourceURL="+r.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}var d={},c=function(t){var e;return function(){return"undefined"==typeof e&&(e=t.apply(this,arguments)),e}},h=c(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),p=c(function(){return document.head||document.getElementsByTagName("head")[0]}),v=null,m=0,g=[];t.exports=function(t,e){e=e||{},"undefined"==typeof e.singleton&&(e.singleton=h()),"undefined"==typeof e.insertAt&&(e.insertAt="bottom");var n=r(t);return i(n,e),function(t){for(var o=[],a=0;a<n.length;a++){var s=n[a],u=d[s.id];u.refs--,o.push(u)}if(t){var l=r(t);i(l,e)}for(var a=0;a<o.length;a++){var u=o[a];if(0===u.refs){for(var f=0;f<u.parts.length;f++)u.parts[f]();delete d[u.id]}}}};var w=function(){var t=[];return function(e,n){return t[e]=n,t.filter(Boolean).join("\n")}}()},function(t,e){"use strict";function n(t){t!==!1&&this.autoResize?y(window,"resize",this.reflowHandler,!1):b(window,"resize",this.reflowHandler,!1)}function i(t){var e=t.target,n=e[L];n&&g(e,n)}function r(t){return function(){clearTimeout(t),t=setTimeout(this.reflow,this.interval)}}function o(){var t=this;if(this.$el){var e=this.$el.clientWidth,n=this.$children.map(function(t){return t.getMeta()});n.sort(function(t,e){return t.order-e.order}),this.virtualRects=n.map(function(){return{}}),s(this,n,this.virtualRects),setTimeout(function(){a(t.$el,e)&&s(t,n,t.virtualRects),t.style.overflow="hidden",f(t.virtualRects,n),t.$emit("reflowed",t)},0)}}function a(t,e){return e!==t.clientWidth}function s(t,e,n){var i=u(t),r="h"===t.line?C:R;r.calculate(t,i,e,n)}function u(t){return{align:~["left","right","center"].indexOf(t.align)?t.align:"left",line:~["v","h"].indexOf(t.line)?t.line:"v",lineGap:+t.lineGap,minLineGap:t.minLineGap?+t.minLineGap:t.lineGap,maxLineGap:t.maxLineGap?+t.maxLineGap:t.lineGap,singleMaxWidth:Math.max(t.singleMaxWidth||0,t.maxLineGap),fixedHeight:!!t.fixedHeight}}function l(t,e,n){switch(n){case"right":return t-e;case"center":return(t-e)/2;default:return 0}}function f(t,e){var n=e.filter(function(t){return t.moveClass}),i=d(n);c(t,e);var r=d(n);n.forEach(function(t,e){t.node[L]=t.moveClass,h(t.node,i[e],r[e])}),document.body.clientWidth,n.forEach(function(t){m(t.node,t.moveClass),p(t.node)})}function d(t){return t.map(function(t){return t.vm.rect})}function c(t,e){t.forEach(function(t,n){var i=e[n].node.style;e[n].vm.rect=t;for(var r in t)i[r]=t[r]+"px"})}function h(t,e,n){var i=e.left-n.left,r=e.top-n.top,o=e.width/n.width,a=e.height/n.height;t.style.transform=t.style.WebkitTransform="translate("+i+"px,"+r+"px) scale("+o+","+a+")",t.style.transitionDuration="0s"}function p(t){t.style.transform=t.style.WebkitTransform="",t.style.transitionDuration=""}function v(t,e){for(var n="function"==typeof t?function(){return t()}:function(){return t},i=[],r=0;e>r;r++)i[r]=n();return i}function m(t,e){if(!w(t,e)){var n=x(t,"class").trim(),i=(n+" "+e).trim();x(t,"class",i)}}function g(t,e){var n=new RegExp("\\s*\\b"+e+"\\b\\s*","g"),i=x(t,"class").replace(n," ").trim();x(t,"class",i)}function w(t,e){return new RegExp("\\b"+e+"\\b").test(x(t,"class"))}function x(t,e,n){return"undefined"==typeof n?t.getAttribute(e)||"":void t.setAttribute(e,n)}function y(t,e,n){var i=arguments.length<=3||void 0===arguments[3]?!1:arguments[3];t.addEventListener(e,n,i)}function b(t,e,n){var i=arguments.length<=3||void 0===arguments[3]?!1:arguments[3];t.removeEventListener(e,n,i)}Object.defineProperty(e,"__esModule",{value:!0});var G=void 0===window.ontransitionend&&void 0!==window.onwebkittransitionend,M=G?"webkitTransitionEnd":"transitionend",L="_wfMoveClass";e["default"]={props:{autoResize:{"default":!0},interval:{"default":200,validator:function(t){return t>=0}},align:{"default":"left",validator:function(t){return~["left","right","center"].indexOf(t)}},line:{"default":"v",validator:function(t){return~["v","h"].indexOf(t)}},lineGap:{required:!0,validator:function(t){return t>=0}},minLineGap:{validator:function(t){return t>=0}},maxLineGap:{validator:function(t){return t>=0}},singleMaxWidth:{validator:function(t){return t>=0}},fixedHeight:{"default":!1},watch:{"default":{}},emitter:{"default":{}}},data:function(){return{style:{height:"",overflow:""}}},methods:{reflowHandler:r(),autoResizeHandler:n,reflow:o},created:function(){var t=this;this.virtualRects=[],this.$on("reflow",function(){t.reflowHandler()}),this.$watch("autoResize",this.autoResizeHandler),this.$watch(function(){return t.align,t.line,t.lineGap,t.minLineGap,t.maxLineGap,t.singleMaxWidth,t.fixedHeight,t.watch},this.reflowHandler)},mounted:function(){y(this.$el,M,i,!0),this.autoResizeHandler(this.autoResize)},beforeDestroy:function(){this.autoResizeHandler(!1),b(this.$el,M,i,!0)}};var R=function(){function t(t,n,i,r){var o=t.$el.clientWidth,a=e(o,n),s=v(0,a.count);i.forEach(function(t,e){var i=s.reduce(function(t,e,n){return e<s[t]?n:t},0),o=r[e];o.top=s[i],o.left=a.left+a.width*i,o.width=a.width,o.height=t.height*(n.fixedHeight?1:a.width/t.width),s[i]=s[i]+o.height}),t.style.height=Math.max.apply(null,s)+"px"}function e(t,e){var n=t/e.lineGap,i=void 0;if(e.singleMaxWidth>=t)n=1,i=Math.max(t,e.minLineGap);else{var r=e.maxLineGap*~~n,o=e.minLineGap*~~(n+1),a=r>=t,s=t>=o;a&&s?(n=Math.round(n),i=t/n):a?(n=~~n,i=t/n):s?(n=~~(n+1),i=t/n):(n=~~n,i=e.maxLineGap),1===n&&(i=Math.min(t,e.singleMaxWidth),i=Math.max(i,e.minLineGap))}return{width:i,count:n,left:l(t,i*n,e.align)}}return{calculate:t}}(),C=function(){function t(t,n,i,r){for(var o=t.$el.clientWidth,a=i.length,s=0,u=0;a>u;){for(var l,f,d=e(o,n,i,u),c=0,h=0;c<d.count;c++)l=i[u+c],f=r[u+c],f.top=s,f.left=d.left+h,f.width=l.width*d.height/l.height,f.height=d.height,h+=f.width;u+=d.count,s+=d.height}t.style.height=s+"px"}function e(t,e,o,a){var s=n(t,e.lineGap,o,a),u=Math.max(s-1,1),f=i(t,e,o,a,s),d=i(t,e,o,a,u),c=r(d,f,t),h=c.height,p=c.width;return 1===c.count&&(p=Math.min(e.singleMaxWidth,t),h=o[a].height*p/o[a].width),{left:l(t,p,e.align),count:c.count,height:h}}function n(t,e,n,i){for(var r=0,o=i,a=0;o<n.length&&t>=a;o++)a+=n[o].width*e/n[o].height,r++;return r}function i(t,e,n,i,r){for(var o=0,a=r-1;a>=0;a--){var s=n[i+a];o+=s.width*e.lineGap/s.height}var u=e.lineGap*t/o,l=u<=e.maxLineGap&&u>=e.minLineGap;if(l)return{cost:Math.abs(e.lineGap-u),count:r,width:t,height:u};var f=o>t?e.minLineGap:e.maxLineGap;return{cost:1/0,count:r,width:o*f/e.lineGap,height:f}}function r(t,e,n){return t.cost===1/0&&e.cost===1/0?e.width<n?e:t:e.cost>=t.cost?t:e}return{calculate:t}}()},function(module,exports){module.exports={render:function(){with(this)return _h("div",{staticClass:"vue-waterfall",style:style},[_t("default")])},staticRenderFns:[]}},function(t,e,n){var i,r;n(9),i=n(11);var o=n(12);r=i=i||{},("object"==typeof i["default"]||"function"==typeof i["default"])&&(r=i=i["default"]),"function"==typeof r&&(r=r.options),r.render=o.render,r.staticRenderFns=o.staticRenderFns,t.exports=i},function(t,e,n){var i=n(10);"string"==typeof i&&(i=[[t.id,i,""]]);n(5)(i,{});i.locals&&(t.exports=i.locals)},function(t,e,n){e=t.exports=n(4)(),e.push([t.id,".vue-waterfall-slot{position:absolute;margin:0;padding:0;box-sizing:border-box}",""])},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]={data:function(){return{isShow:!1}},props:{width:{required:!0,validator:function(t){return t>=0}},height:{required:!0,validator:function(t){return t>=0}},order:{"default":0},moveClass:{"default":""}},methods:{notify:function(){this.$parent.$emit("reflow",this)},getMeta:function(){return{vm:this,node:this.$el,order:this.order,width:this.width,height:this.height,moveClass:this.moveClass}}},created:function(){this.rect={top:0,left:0,width:0,height:0},this.$watch("width, height",this.notify)},mounted:function(){var t=this;this.$parent.$once("reflowed",function(){t.isShow=!0}),this.notify()},destroyed:function(){this.notify()}}},function(module,exports){module.exports={render:function(){with(this)return _h("div",{directives:[{name:"show",value:isShow,expression:"isShow"}],staticClass:"vue-waterfall-slot"},[_t("default")])},staticRenderFns:[]}}])});
\ No newline at end of file
diff --git a/lib/waterfall-slot.vue b/lib/waterfall-slot.vue
index d58d1a0..66e345f 100644
--- a/lib/waterfall-slot.vue
+++ b/lib/waterfall-slot.vue
@@ -37,7 +37,7 @@ export default {
   },
   methods: {
     notify () {
-      this.$dispatch('wf-reflow', [this])
+      this.$parent.$emit('reflow', this)
     },
     getMeta () {
       return {
@@ -50,20 +50,22 @@ export default {
       }
     }
   },
-  compiled () {
-    this.$watch('width, height', this.notify)
-    this.$once('wf-reflowed', () => this.isShow = true)
+  created () {
     this.rect = {
       top: 0,
       left: 0,
       width: 0,
       height: 0
     }
+    this.$watch('width, height', this.notify)
   },
-  attached () {
+  mounted () {
+    this.$parent.$once('reflowed', () => {
+      this.isShow = true
+    })
     this.notify()
   },
-  detached () {
+  destroyed () {
     this.notify()
   }
 }
diff --git a/lib/waterfall.vue b/lib/waterfall.vue
index 7117910..dfb1174 100644
--- a/lib/waterfall.vue
+++ b/lib/waterfall.vue
@@ -60,6 +60,9 @@ export default {
     },
     watch: {
       default: {}
+    },
+    emitter: {
+      default: {}
     }
   },
   data: () => ({
@@ -69,20 +72,15 @@ export default {
     }
   }),
   methods: {
-    autoResizeHandler: autoResizeHandler,
     reflowHandler: getReflowHandler(),
-    reflow: reflow
-  },
-  events: {
-    'wf-reflow': function () {
-      this.reflowHandler()
-    }
+    autoResizeHandler,
+    reflow
   },
-  compiled () {
+  created () {
     this.virtualRects = []
-  },
-  ready () {
-    this.autoResizeHandler()
+    this.$on('reflow', () => {
+      this.reflowHandler()
+    })
     this.$watch('autoResize', this.autoResizeHandler)
     this.$watch(() => (
       this.align,
@@ -94,7 +92,10 @@ export default {
       this.fixedHeight,
       this.watch
     ), this.reflowHandler)
+  },
+  mounted () {
     on(this.$el, transitionEndEvent, tidyUpAnimations, true)
+    this.autoResizeHandler(this.autoResize)
   },
   beforeDestroy () {
     this.autoResizeHandler(false)
@@ -138,8 +139,7 @@ function reflow () {
     }
     this.style.overflow = 'hidden'
     render(this.virtualRects, metas)
-    this.$broadcast('wf-reflowed', [this])
-    this.$dispatch('wf-reflowed', [this])
+    this.$emit('reflowed', this)
   }, 0)
 }
 
diff --git a/package.json b/package.json
index 0f6efac..5d9dc78 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-waterfall",
-  "version": "0.2.3",
+  "version": "1.0.0",
   "description": "A waterfall layout component for Vue.js",
   "main": "lib/vue-waterfall.min.js",
   "files": [
@@ -32,11 +32,9 @@
     "babel-plugin-transform-runtime": "^6.5.2",
     "babel-preset-es2015": "^6.3.13",
     "babel-runtime": "^5.8.35",
-    "copy-webpack-plugin": "^1.1.1",
+    "copy-webpack-plugin": "^3.0.1",
     "css-loader": "^0.23.1",
-    "vue-html-loader": "^1.1.0",
-    "vue-loader": "^8.1.1",
-    "vue-style-loader": "^1.0.0",
+    "vue-loader": "^9.5.1",
     "webpack": "^1.12.13"
   }
 }
diff --git a/src/waterfall-slot.vue b/src/waterfall-slot.vue
index d58d1a0..66e345f 100644
--- a/src/waterfall-slot.vue
+++ b/src/waterfall-slot.vue
@@ -37,7 +37,7 @@ export default {
   },
   methods: {
     notify () {
-      this.$dispatch('wf-reflow', [this])
+      this.$parent.$emit('reflow', this)
     },
     getMeta () {
       return {
@@ -50,20 +50,22 @@ export default {
       }
     }
   },
-  compiled () {
-    this.$watch('width, height', this.notify)
-    this.$once('wf-reflowed', () => this.isShow = true)
+  created () {
     this.rect = {
       top: 0,
       left: 0,
       width: 0,
       height: 0
     }
+    this.$watch('width, height', this.notify)
   },
-  attached () {
+  mounted () {
+    this.$parent.$once('reflowed', () => {
+      this.isShow = true
+    })
     this.notify()
   },
-  detached () {
+  destroyed () {
     this.notify()
   }
 }
diff --git a/src/waterfall.vue b/src/waterfall.vue
index 7117910..dfb1174 100644
--- a/src/waterfall.vue
+++ b/src/waterfall.vue
@@ -60,6 +60,9 @@ export default {
     },
     watch: {
       default: {}
+    },
+    emitter: {
+      default: {}
     }
   },
   data: () => ({
@@ -69,20 +72,15 @@ export default {
     }
   }),
   methods: {
-    autoResizeHandler: autoResizeHandler,
     reflowHandler: getReflowHandler(),
-    reflow: reflow
-  },
-  events: {
-    'wf-reflow': function () {
-      this.reflowHandler()
-    }
+    autoResizeHandler,
+    reflow
   },
-  compiled () {
+  created () {
     this.virtualRects = []
-  },
-  ready () {
-    this.autoResizeHandler()
+    this.$on('reflow', () => {
+      this.reflowHandler()
+    })
     this.$watch('autoResize', this.autoResizeHandler)
     this.$watch(() => (
       this.align,
@@ -94,7 +92,10 @@ export default {
       this.fixedHeight,
       this.watch
     ), this.reflowHandler)
+  },
+  mounted () {
     on(this.$el, transitionEndEvent, tidyUpAnimations, true)
+    this.autoResizeHandler(this.autoResize)
   },
   beforeDestroy () {
     this.autoResizeHandler(false)
@@ -138,8 +139,7 @@ function reflow () {
     }
     this.style.overflow = 'hidden'
     render(this.virtualRects, metas)
-    this.$broadcast('wf-reflowed', [this])
-    this.$dispatch('wf-reflowed', [this])
+    this.$emit('reflowed', this)
   }, 0)
 }