v1.0.0

MopTym · Oct 20, 2016 · bb16cf5 · bb16cf5
1 parent e33e920
commit bb16cf5
Show file tree

Hide file tree

Showing 9 changed files with 81 additions and 67 deletions.
diff --git 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
@@ -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,18 +65,16 @@
             this.items.sort(function () {
               return Math.random() - 0.5
             })
-          }
-        },
-        events: {
-          'wf-reflowed': function () {
+          },
+          reflowed: function () {
             this.isBusy = false
           }
         }
       })
 
       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
@@ -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,18 +66,16 @@
                 this.items.sort(function () {
                   return Math.random() - 0.5
                 })
-              }
-            },
-            events: {
-              'wf-reflowed': function () {
+              },
+              reflowed: function () {
                 this.isBusy = false
               }
             }
           })
 
           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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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)
 }