Merge pull request #118 from shershen08/dev/vue3-support

add vue-demi and fixes for both versions

README.md

@@ -3,7 +3,7 @@
 ![DEPENDENCIES status](https://david-dm.org/shershen08/vue-masonry/status.svg)
 [![](https://data.jsdelivr.com/v1/package/npm/vue-masonry/badge)](https://www.jsdelivr.com/package/npm/vue-masonry)
 
-**Current version: 0.12.0**
+**Current version: 0.14.0**
 
 Vue.js directive for masonry blocks layouting. Original [masonry library](http://masonry.desandro.com/).
 
@@ -46,8 +46,12 @@ You can also clone the basic demo repository [vue-masonry + vue-cli webpack](htt
     ```
 
 ### Usage with Vue 3
-- Dependencies: [mitt](https://www.npmjs.com/package/mitt) package
-- In your Vue 3 app, you'll have the following code
+
+ - Use version >= `0.14.0` 
+
+ - or of using __earlier__ version:
+   Dependencies: [mitt](https://www.npmjs.com/package/mitt) package
+   In your Vue 3 app, you'll have the following code
 
     ```
     import { createApp } from 'vue'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-masonry",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "masonry layout for vue.js",
   "main": "src/masonry.plugin.js",
   "scripts": {
@@ -14,7 +14,17 @@
   "dependencies": {
     "imagesloaded": "4.1.4",
     "masonry-layout": "^4.2.2",
-    "vue": "^2.0.0"
+    "mitt": "^3.0.0",
+    "vue-demi": "^0.12.1"
+  },
+  "peerDependencies": {
+    "@vue/composition-api": "^1.0.0-rc.1",
+    "vue": "^2.0.0 || >=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
   },
   "keywords": [
     "masonry",
@@ -29,6 +39,7 @@
   },
   "homepage": "https://github.com/shershen08/vue-masonry#readme",
   "devDependencies": {
+    "vue": "^3.0.0",
     "@babel/core": "^7.1.2",
     "@babel/preset-env": "^7.1.0",
     "babel-eslint": "^10.0.1",

src/masonry.plugin.js

@@ -1,5 +1,7 @@
 import Masonry from 'masonry-layout'
 import ImageLoaded from 'imagesloaded'
+import { isVue2, Vue2, nextTick } from 'vue-demi'
+import mitt from 'mitt'
 
 const attributesMap = {
   'column-width': 'columnWidth',
@@ -41,16 +43,18 @@ const collectOptions = function (attrs) {
   return res
 }
 
-export const VueMasonryPlugin = function () {}
+export const VueMasonryPlugin = {}
 
-VueMasonryPlugin.install = function (Vue, options) {
-  const Events = new Vue({})
+VueMasonryPlugin.install = function (app, options) {
+  const Events = isVue2 ? new Vue2() : mitt()
   const defaultId = 'VueMasonry'
 
-  Vue.directive('masonry', {
+  const appOrVue2 = (isVue2 ? Vue2 : app)
+
+  appOrVue2.directive('masonry', {
     props: ['transitionDuration', ' itemSelector', 'destroyDelay'],
 
-    inserted: function (el, binding) {
+    [isVue2 ? 'inserted' : 'mounted']: function (el, binding) {
       if (!Masonry) {
         throw new Error('Masonry plugin is not defined. Please check it\'s connected and parsed correctly.')
       }
@@ -62,60 +66,76 @@ VueMasonryPlugin.install = function (Vue, options) {
         masonry.reloadItems()
         masonry.layout()
       }
-      Vue.nextTick(function () {
-        masonryDraw()
-      })
+
+      if (isVue2) {
+        Vue2.nextTick(function () {
+          masonryDraw()
+        })
+      } else {
+        nextTick(() => {
+          masonryDraw()
+        })
+      }
 
       const masonryRedrawHandler = function (eventData) {
         masonryDraw()
       }
 
       const masonryDestroyHandler = function (eventData) {
-        Events.$off(`${EVENT_ADD}__${masonryId}`, masonryRedrawHandler)
-        Events.$off(`${EVENT_REMOVE}__${masonryId}`, masonryRedrawHandler)
-        Events.$off(`${EVENT_IMAGE_LOADED}__${masonryId}`, masonryRedrawHandler)
-        Events.$off(`${EVENT_DESTROY}__${masonryId}`, masonryDestroyHandler)
+        Events[`${isVue2 ? '$' : ''}off`](`${EVENT_ADD}__${masonryId}`, masonryRedrawHandler)
+        Events[`${isVue2 ? '$' : ''}off`](`${EVENT_REMOVE}__${masonryId}`, masonryRedrawHandler)
+        Events[`${isVue2 ? '$' : ''}off`](`${EVENT_IMAGE_LOADED}__${masonryId}`, masonryRedrawHandler)
+        Events[`${isVue2 ? '$' : ''}off`](`${EVENT_DESTROY}__${masonryId}`, masonryDestroyHandler)
         const delay = destroyDelay && !Number.isNaN(destroyDelay) ? destroyDelay : 0
         setTimeout(function () {
           masonry.destroy()
         }, delay)
       }
 
-      Events.$on(`${EVENT_ADD}__${masonryId}`, masonryRedrawHandler)
-      Events.$on(`${EVENT_REMOVE}__${masonryId}`, masonryRedrawHandler)
-      Events.$on(`${EVENT_IMAGE_LOADED}__${masonryId}`, masonryRedrawHandler)
-      Events.$on(`${EVENT_DESTROY}__${masonryId}`, masonryDestroyHandler)
+      Events[`${isVue2 ? '$' : ''}on`](`${EVENT_ADD}__${masonryId}`, masonryRedrawHandler)
+      Events[`${isVue2 ? '$' : ''}on`](`${EVENT_REMOVE}__${masonryId}`, masonryRedrawHandler)
+      Events[`${isVue2 ? '$' : ''}on`](`${EVENT_IMAGE_LOADED}__${masonryId}`, masonryRedrawHandler)
+      Events[`${isVue2 ? '$' : ''}on`](`${EVENT_DESTROY}__${masonryId}`, masonryDestroyHandler)
     },
     unbind: function (el, binding) {
       const masonryId = binding.value || defaultId
-      Events.$emit(`${EVENT_DESTROY}__${masonryId}`)
+      Events.emit(`${EVENT_DESTROY}__${masonryId}`)
     }
   })
 
-  Vue.directive('masonryTile', {
+  appOrVue2.directive('masonryTile', {
 
-    inserted: function (el, binding) {
+    [isVue2 ? 'inserted' : 'mounted']: function (el, binding) {
       const masonryId = binding.value || defaultId
-      Events.$emit(`${EVENT_ADD}__${masonryId}`, {
+      Events[`${isVue2 ? '$' : ''}emit`](`${EVENT_ADD}__${masonryId}`, {
         'element': el
       })
       // eslint-disable-next-line
       new ImageLoaded(el, function () {
-        Events.$emit(`${EVENT_IMAGE_LOADED}__${masonryId}`, {
+        Events[`${isVue2 ? '$' : ''}emit`](`${EVENT_IMAGE_LOADED}__${masonryId}`, {
           'element': el
         })
       })
     },
     unbind: function (el, binding) {
       const masonryId = binding.value || defaultId
-      Events.$emit(`${EVENT_REMOVE}__${masonryId}`, {
+      Events[`${isVue2 ? '$' : ''}emit`](`${EVENT_REMOVE}__${masonryId}`, {
         'element': el
       })
     }
   })
 
-  Vue.prototype.$redrawVueMasonry = function (id) {
-    const masonryId = id || defaultId
-    Events.$emit(`${EVENT_ADD}__${masonryId}`)
+  if (isVue2) {
+    Vue2.prototype.$redrawVueMasonry = function (id) {
+      const masonryId = id || defaultId
+      Events[`${isVue2 ? '$' : ''}emit`](`${EVENT_ADD}__${masonryId}`)
+    }
+  } else {
+    const redraw = function (id) {
+      const masonryId = id || defaultId
+      Events[`${isVue2 ? '$' : ''}emit`](`${EVENT_ADD}__${masonryId}`)
+    }
+    app.config.globalProperties.$redrawVueMasonry = redraw
+    app.provide('redrawVueMasonry', redraw)
   }
 }