Initial sources

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    ["es2015", { "modules": false }],
+    "stage-0"
+  ]
+}

.eslintignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

.eslintrc.js

@@ -0,0 +1,27 @@
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
+  extends: 'standard',
+  // required to lint *.vue files
+  plugins: [
+    'html'
+  ],
+  env: {
+    browser: true,
+  },
+  // add your custom rules here
+  'rules': {
+    // allow paren-less arrow functions
+    'arrow-parens': 0,
+    // allow async-await
+    'generator-star-spacing': 0,
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    // trailing comma
+    'comma-dangle': ['error', 'always-multiline'],
+  }
+}

.gitignore

@@ -0,0 +1 @@
+node_modules/

README.md

@@ -0,0 +1,72 @@
+# vue-resize
+
+[![npm](https://img.shields.io/npm/v/vue-resize.svg) ![npm](https://img.shields.io/npm/dm/vue-resize.svg)](https://www.npmjs.com/package/vue-resize)
+[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)
+
+Detect DOM element resizing
+
+# Installation
+
+```
+npm install --save vue-resize
+```
+
+# Usage
+
+```
+import Vue from 'vue'
+import VueResize from 'vue-resize'
+
+Vue.use(VueResize)
+```
+
+```
+import Vue from 'vue'
+import { ResizeObserver } from 'vue-resize'
+
+Vue.component('resize-observer', ResizeObserver)
+```
+
+```
+import 'vue-resize/dist/test.css'
+import VueResize from 'vue-resize/dist/test'
+
+Vue.use(VueResize)
+```
+
+Add the `<resize-observer>` inside a DOM element and make its position to something other than `'static'` (for example `'relative'`), so that the observer can fill it.
+
+Listen to the `notify` event that is fired when the above DOM element is resized.
+
+# Example
+
+```
+<template>
+  <div class="demo">
+    <h1>Hello world!</h1>
+    <resize-observer @notify="handleResize" />
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleResize () {
+      console.log('resized')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo {
+  position: relative;
+}
+</style>
+```
+
+---
+
+## License
+
+[MIT](http://opensource.org/licenses/MIT)

config/webpack.base.config.js

@@ -0,0 +1,49 @@
+var webpack = require('webpack')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+var outputFile = 'vue-resize'
+var globalName = 'VueResize'
+
+var config = require('../package.json')
+
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    path: './dist',
+    filename: outputFile + '.js',
+    library: globalName,
+    libraryTarget: 'umd',
+  },
+  module: {
+    rules: [
+      {
+        enforce: 'pre',
+        test: /\.(js|vue)$/,
+        loader: 'eslint-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /.js$/,
+        use: 'babel-loader',
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            css: ExtractTextPlugin.extract('css-loader'),
+          },
+        },
+      },
+    ],
+  },
+  externals: {
+    // Put external libraries like lodash here
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'VERSION': JSON.stringify(config.version),
+    }),
+    new ExtractTextPlugin(outputFile + '.css'),
+  ],
+}

config/webpack.dev.config.js

@@ -0,0 +1,6 @@
+var merge = require('webpack-merge')
+var base = require('./webpack.base.config')
+
+module.exports = merge(base, {
+  devtool: 'eval-source-map',
+})

config/webpack.prod.config.js

@@ -0,0 +1,14 @@
+var webpack = require('webpack')
+var merge = require('webpack-merge')
+var base = require('./webpack.base.config')
+
+module.exports = merge(base, {
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: true,
+      },
+      mangle: false,
+    }),
+  ],
+})

index.js

@@ -0,0 +1,3 @@
+export default from './dist/vue-resize'
+export * from './dist/vue-resize'
+import './dist/vue-resize.css'

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "vue-resize",
+  "description": "Detect DOM element resizing",
+  "version": "0.0.1",
+  "author": {
+    "name": "Guillaume Chau",
+    "email": "guillaume.b.chau@gmail.com"
+  },
+  "keywords": [
+    "vue",
+    "vuejs",
+    "plugin"
+  ],
+  "license": "MIT",
+  "main": "dist/vue-resize.js",
+  "module": "index.js",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development webpack --config config/webpack.dev.config.js --progress --watch",
+    "build": "cross-env NODE_ENV=production webpack --config config/webpack.prod.config.js --progress --hide-modules",
+    "prepublish": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Akryum/vue-resize.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Akryum/vue-resize/issues"
+  },
+  "homepage": "https://github.com/Akryum/vue-resize#readme",
+  "devDependencies": {
+    "babel-core": "^6.0.0",
+    "babel-eslint": "^7.1.1",
+    "babel-loader": "^6.0.0",
+    "babel-preset-es2015": "^6.14.0",
+    "babel-preset-stage-0": "^6.16.0",
+    "cross-env": "^3.1.3",
+    "css-loader": "^0.26.1",
+    "eslint": "^3.12.1",
+    "eslint-config-standard": "^6.2.1",
+    "eslint-loader": "^1.6.1",
+    "eslint-plugin-html": "^1.6.0",
+    "eslint-plugin-promise": "^3.4.0",
+    "eslint-plugin-standard": "^2.0.1",
+    "extract-text-webpack-plugin": "^2.0.0-beta.4",
+    "vue-loader": "^10.0.0",
+    "vue-template-compiler": "^2.1.6",
+    "webpack": "^2.1.0-beta.28",
+    "webpack-merge": "^1.1.2"
+  }
+}

src/components/ResizeObserver.vue

@@ -0,0 +1,62 @@
+<template>
+  <iframe class="resize-observer" tabindex="-1"></iframe>
+</template>
+
+<script>
+export default {
+  name: 'resize-observer',
+
+  methods: {
+    notify () {
+      this.$emit('notify')
+    },
+
+    addResizeHandlers () {
+      const iframe = this.$el
+      const w = iframe.contentWindow
+      // If the iframe is re-attached to the DOM, the resize listener is removed because the
+      // content is reloaded, so make sure to install the handler after the iframe is loaded.
+      iframe.addEventListener('load', this.refreshResizeHandlers)
+      if (w) {
+        w.addEventListener('resize', this.notify)
+        w.addEventListener('close', this.removeResizeHandlers)
+      }
+    },
+
+    removeResizeHandlers () {
+      const iframe = this.$el
+      const w = iframe.contentWindow
+      iframe.removeEventListener('load', this.refreshResizeHandlers)
+      if (w) {
+        w.removeEventListener('resize', this.notify)
+        w.removeEventListener('close', this.removeResizeHandlers)
+      }
+    },
+
+    refreshResizeHandlers () {
+      this.removeResizeHandlers()
+      this.addResizeHandlers()
+      // The iframe size might have changed while loading, which can also
+      // happen if the size has been changed while detached from the DOM.
+      this.notify()
+    },
+  },
+
+  mounted () {
+    this.addResizeHandlers()
+  },
+}
+</script>
+
+<style scoped>
+.resize-observer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: transparent;
+}
+</style>

src/index.js

@@ -0,0 +1,13 @@
+import _ResizeObserver from './components/ResizeObserver.vue'
+
+export function install (Vue) {
+  Vue.component('resize-observer', _ResizeObserver)
+}
+
+export const ResizeObserver = _ResizeObserver
+
+export default {
+  /* eslint-disable no-undef */
+  version: VERSION,
+  install,
+}