Improvement

Author: pc-david\david.desmaisons

build/webpack.base.conf.js

@@ -24,8 +24,7 @@ module.exports = {
       'src': path.resolve(__dirname, '../src'),
       'assets': path.resolve(__dirname, '../src/assets'),
       'components': path.resolve(__dirname, '../src/components'),
-      'masonry': 'masonry-layout',
-      'isotope': 'isotope-layout'
+      'resizeSensor': path.resolve(__dirname, '../node_modules/css-element-queries/src/ResizeSensor.js')
     }
   },
   resolveLoader: {

build/webpack.prod.conf.js

@@ -29,11 +29,11 @@ var webpackConfig = merge(baseWebpackConfig, {
       commonjs: 'vue',
       amd: 'vue'
     },
-    "imagesLoaded": {
-      root: 'imagesLoaded',
-      commonjs2: 'imagesLoaded',
-      commonjs: 'imagesLoaded',
-      amd: 'imagesLoaded'
+    "resizeSensor": {
+      root: 'ResizeSensor',
+      commonjs2: 'css-element-queries/src/ResizeSensor.js',
+      commonjs: 'css-element-queries/src/ResizeSensor.js',
+      amd: 'css-element-queries/src/ResizeSensor.js'
     }
   },
   vue: {

config/index.js

@@ -11,7 +11,7 @@ module.exports = {
   },
   dev: {
     env: require('./dev.env'),
-    port: 8080,
+    port: 9000,
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
     proxyTable: {},

dist/Vueresize.js

@@ -1,6 +1,9 @@
 <template>
   <div class="hello">
-    <div v-resize="onResize">
+    <div> 
+      <b>Resize count : {{resizeCount}} </b>  
+    </div>
+    <div class="resizable ui-widget-content" v-resize="onResize">
         <div v-for="element in list" :key="element.id">
           {{element.name}} <br>
           {{element.id}}
@@ -12,6 +15,8 @@
 
 <script>
 import resize from '../../src/Vueresize'
+import $ from 'jquery'
+import jquery_ui from 'jquery-ui/ui/widgets/resizable.js'
 
 const names= ['John', 'Ringo', 'Paul', 'George']
 let count =5
@@ -20,8 +25,12 @@ export default {
   directives: {
     resize
   },
+  mounted() {
+    $('.resizable').resizable()
+  },
   data () {
     return {
+      resizeCount: 0,
       list: names.map((name, id)=>{ return {name, id}})
     }
   },
@@ -30,7 +39,7 @@ export default {
       this.list.push({name: 'Jimmy', id: count++})
     },
     onResize () {
-      alert('Element resize'+ this.list.length)
+      this.resizeCount++;
     }
   }
 }
@@ -45,4 +54,8 @@ export default {
   color: #333;
   border: 2px solid #b6b5b4;
 }
+
+.resizable {
+  overflow: hidden;
+}
 </style>

dist/Vueresize.js.map

@@ -2,6 +2,7 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
+import 'jquery-ui/themes/base/all.css'
 
 /* eslint-disable no-new */
 new Vue({

example/components/Hello.vue

@@ -39,6 +39,8 @@
     "function-bind": "^1.0.2",
     "html-webpack-plugin": "^2.8.1",
     "http-proxy-middleware": "^0.17.2",
+    "jquery": "^3.1.1",
+    "jquery-ui": "^1.12.1",
     "json-loader": "^0.5.4",
     "opn": "^4.0.2",
     "ora": "^0.3.0",

example/main.js

@@ -1,7 +1,7 @@
-import {ResizeSensor} from 'css-element-queries'
+import resizeSensor from 'resizeSensor'
 
 export default {
     inserted (el, {value}) {
-        ResizeSensor(el, () => value(el))
+        resizeSensor(el, () => value(el))
     }
 }