Initial commit

README.md

@@ -0,0 +1,68 @@
+vue-passthrough
+=================
+vue-passthrough passthrough the event listener from parent to child component,
+so its made a convenient way to create wrapper component.
+
+# Example
+## Mixin
+```
+import PassthroughMixin from 'vue-passthrough';
+
+Vue.component('awesome-form', {
+  template: `<awesome-input @keypress.enter="onEnterPress" @change="onChange" />`,
+  methods: {
+    // hit enter and you'll got "enter pressed" on console
+    onEnterPress(e) {
+      console.log('awesome-form: enter pressed', e);
+    },
+    // onChange won't executed cuz we've handled it in awesome-input internal
+    onChange(e) {
+      console.log("awesome-form: onChange", e);
+    },
+  },
+});
+
+Vue.component('awesome-input', {
+  template: `<input ref="inner" @change="onChange" />`,
+  mixins: [PassthroughMixin],
+  methods: {
+    // you'll got "awesome-input: onChange" on console
+    onChange(e) {
+      console.log("awesome-input: onChange", e);
+    },
+  },
+});
+```
+## Decorator
+```
+import Passthrough from 'vue-passthrough/decorator';
+
+@Passthrough
+@Component
+export default class {
+  ...
+}
+```
+or
+```
+export default Passthrough({
+  ...
+})
+
+```
+
+# Custom inner reference
+```
+import PassthroughMixin from 'vue-passthrough';
+
+export default {
+   mixins: [PassthroughMixin.create('custom-inner')],
+   ...
+}
+
+@Passthrough('custom-inner')
+@Component
+export default class {
+  ...
+}
+```

decorator.js

@@ -0,0 +1,18 @@
+import createMixin from './src/mixin';
+import defaultMixin from './';
+
+export default function Passthrough(refNameOrTarget) {
+  let mixin;
+  function decorator(target) {
+    if (!target.mixins) target.mixins = [];
+    target.mixins.push(mixin);
+    return target;
+  }
+  if (typeof refNameOrTarget === 'string') {
+    mixin = createMixin(refNameOrTarget);
+    return decorator;
+  } else {
+    mixin = defaultMixin;
+    return decorator(refNameOrTarget);
+  }
+}

index.js

@@ -0,0 +1,6 @@
+import createMixin from './src/mixin';
+
+const defaultMixin = createMixin('inner');
+defaultMixin.create = createMixin;
+
+export default defaultMixin;

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "vue-passthrough",
+  "version": "1.0.0",
+  "description": "vue-passthrough passthrough the event listener from parent to child component, so its made an convenient way to create wrapper component.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rikuayanokozy/vue-passthrough.git"
+  },
+  "author": "Riku Ayanokoji",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/rikuayanokozy/vue-passthrough/issues"
+  },
+  "homepage": "https://github.com/rikuayanokozy/vue-passthrough#readme"
+}

src/mixin.js

@@ -0,0 +1,36 @@
+function getVnodeByRef(vnode, refName) {
+  const { data, children } = vnode;
+  if (data && data.ref == refName) {
+    return vnode;
+  }
+  if (!children) {
+    return null;
+  }
+  for (let i = 0; i < children.length; i++) {
+    const node = getVnodeByRef(children[i], refName);
+    if (node) {
+      return node;
+    }
+  }
+  return null;
+}
+
+export default function createMixin(innerRefName) {
+  return {
+    mounted() {
+      const inner = getVnodeByRef(this._vnode, innerRefName);
+      if (!inner) {
+        throw new Error(`ref "${innerRefName}" not found`);
+      }
+      let listeners = this.$options._parentListeners;
+      if (!listeners) {
+        return;
+      }
+      const interceptedEvents = inner.data.on || {};
+      Object.keys(listeners)
+        .filter(eventName => !interceptedEvents[eventName])
+        .forEach(eventName =>
+          inner.elm.addEventListener(eventName, listeners[eventName].invoker));
+    },
+  };
+}