Removes custom event firing since it can be directly listened for on the children elements

__tests__/VueTributeTest.js

@@ -1,26 +1,23 @@
-import { mount } from '@vue/test-utils'
+import { mount } from "@vue/test-utils"
-import VueTribute from '../src'
+import VueTribute from "../src"
 
-describe('VueTribute', () => {
+describe("VueTribute", () => {
   let testData = {
     options: {
-      values: [
+      values: [{ key: "Phil Heartman", value: "pheartman" }, { key: "Gordon Ramsey", value: "gramsey" }]
-        { key: 'Phil Heartman', value: 'pheartman' },
-        { key: 'Gordon Ramsey', value: 'gramsey' }
-      ]
     }
   }
-  it('has a name', () => {
+  it("has a name", () => {
     const wrapper = mount(VueTribute, {
       slots: {
         default: '<input type="text" placeholder="Testo" />'
       },
       propsData: testData
     })
-    expect(wrapper.name()).toBe('vue-tribute')
+    expect(wrapper.name()).toBe("vue-tribute")
   })
 
-  it('accepts an options prop', () => {
+  it("accepts an options prop", () => {
     const wrapper = mount(VueTribute, {
       slots: {
         default: '<input type="text" placeholder="Testo" />'
@@ -28,46 +25,6 @@ describe('VueTribute', () => {
       propsData: testData
     })
 
-    expect(wrapper.props()).toBe(testData)
+    expect(wrapper.props()).toEqual(testData)
   })
-
-  it('fires an event when there are no matches', () => {
-    const wrapper = mount(VueTribute, {
-      slots: {
-        default: '<input type="text" placeholder="Testo" />'
-      },
-      propsData: testData
-    })
-
-    const $input = wrapper.find('input[type=text]')
-    $input.element.value = '@foobar'
-    const evt = new CustomEvent('tribute-no-match')
-    $input.element.dispatchEvent(evt)
-
-    expect(wrapper.emitted('tribute-no-match')).toBeTruthy()
-  })
-
-  it('fires an event when when the target Tribute element has been updated', () => {
-    const wrapper = mount(VueTribute, {
-      slots: {
-        default: '<input type="text" placeholder="Testo" />'
-      },
-      propsData: testData
-    })
-
-    const $input = wrapper.find('input[type=text]')
-
-    const evt = new CustomEvent('tribute-replaced')
-
-    $input.element.dispatchEvent(evt)
-
-    expect(wrapper.emitted('tribute-replaced')).toBeTruthy()
-  })
-
-  function CustomEvent(event, params) {
-    params = params || { bubbles: false, cancelable: false, detail: undefined }
-    var evt = document.createEvent('CustomEvent')
-    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail)
-    return evt
-  }
 })

example/App.vue

@@ -3,24 +3,35 @@
     <h1>vue-tribute Demo</h1>
     <h3>Simple text input</h3>
     <vue-tribute :options="options">
-      <input type="text" placeholder="@...">
+      <input
+        type="text"
+        placeholder="@..."
+        @tribute-no-match="noMatchFound"
+      >
     </vue-tribute>
-    <br />
+    <br>
     <h3>Textarea</h3>
     <vue-tribute :options="options">
       <textarea placeholder="@..."></textarea>
     </vue-tribute>
-    <br />
+    <br>
     <h3>contenteditable element</h3>
     <vue-tribute :options="options">
-      <div class="content-editable" contenteditable="true" placeholder="@..."></div>
+      <div
+        class="content-editable"
+        contenteditable="true"
+        placeholder="@..."
+      ></div>
     </vue-tribute>
-    <br />
+    <br>
-    <button @click="append" class="btn">Append New Item</button>
+    <button
+      @click="append"
+      class="btn"
+    >Append New Item</button>
   </div>
 </template>
 <script>
-import VueTribute from '../src'
+import VueTribute from "../src";
 export default {
   components: {
     VueTribute
@@ -28,27 +39,31 @@ export default {
   data() {
     return {
       options: {
+        trigger: "@",
         values: [
-          { key: 'Collin Henderson', value: 'syropian' },
+          { key: "Collin Henderson", value: "syropian" },
-          { key: 'Sarah Drasner', value: 'sarah_edo' },
+          { key: "Sarah Drasner", value: "sarah_edo" },
-          { key: 'Evan You', value: 'youyuxi' },
+          { key: "Evan You", value: "youyuxi" },
-          { key: 'Adam Wathan', value: 'adamwathan' }
+          { key: "Adam Wathan", value: "adamwathan" }
         ]
       }
-    }
+    };
   },
   methods: {
+    noMatchFound() {
+      console.log("No matches found!");
+    },
     append() {
       let kv = Math.random()
         .toString(36)
-        .slice(2)
+        .slice(2);
       this.options.values.push({
         key: kv,
         value: kv
-      })
+      });
     }
   }
-}
+};
 </script>
 <style lang="scss">
 * {
@@ -67,6 +82,12 @@ body {
   color: #fff;
   font-family: 'Helvetica Neue', 'Arial', sans-serif;
 }
+.scroll {
+  width: 100%;
+  max-height: 300px;
+  overflow-y: auto;
+  position: relative;
+}
 .container {
   max-width: 500px;
   width: 100%;
@@ -175,4 +196,4 @@ textarea {
 .tribute-container .menu-highlighted {
   font-weight: bold;
 }
-</style>
+</style>

package.json

@@ -1,19 +1,20 @@
 {
   "name": "vue-tribute",
   "version": "1.0.1",
-  "description":
+  "description": "A Vue.js wrapper for Zurb's Tribute library for native @mentions",
-    "A Vue.js wrapper for Zurb's Tribute library for native @mentions",
   "main": "dist/vue-tribute.cjs.js",
   "module": "dist/vue-tribute.es.js",
   "unpkg": "dist/vue-tribute.min.js",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "repository": "https://github.com/syropian/vue-tribute",
   "author": "Collin Henderson <collin@syropia.net>",
   "license": "MIT",
   "scripts": {
     "build": "bili",
     "test": "jest",
-    "watch-test": "jest --watchAll",
+    "test:watch": "jest --watchAll",
     "example": "poi example/index.js",
     "example:build": "rm -rf example/dist && poi build",
     "example:deploy": "git subtree push --prefix example/dist origin gh-pages",
@@ -25,17 +26,21 @@
     "publicPath": "/vue-tribute/"
   },
   "bili": {
-    "format": ["cjs", "umd", "umd-min", "es"],
+    "format": [
+      "cjs",
+      "umd",
+      "umd-min",
+      "es"
+    ],
     "moduleName": "VueTribute"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0-beta.42",
+    "@babel/core": "^7.2.2",
-    "@vue/test-utils": "^1.0.0-beta.12",
+    "@babel/preset-env": "^7.3.1",
-    "babel-core": "^7.0.0-0",
+    "@vue/test-utils": "^1.0.0-beta.29",
-    "babel-jest": "^22.4.3",
+    "babel-jest": "^24.0.0",
-    "babel-preset-env": "^1.6.1",
     "bili": "^3.0.4",
-    "jest": "^22.4.2",
+    "jest": "^24.0.0",
     "node-sass": "^4.8.3",
     "poi": "^10.0.0-beta.6",
     "sass-loader": "^6.0.7",

src/index.js

@@ -1,44 +1,43 @@
-import Tribute from 'tributejs'
+import Tribute from "tributejs"
 
 const VueTribute = {
-  name: 'vue-tribute',
+  name: "vue-tribute",
   props: {
     options: {
       type: Object,
       required: true
     }
   },
-  data() {
-    return {
-      tribute: null
-    }
-  },
   mounted() {
+    if (typeof Tribute === "undefined") {
+      throw new Error("[vue-tribute] cannot locate tributejs!")
+    }
+
     const $el = this.$slots.default[0].elm
 
     this.tribute = new Tribute(this.options)
+
     this.tribute.attach($el)
+  },
+  beforeDestroy() {
+    const $el = this.$slots.default[0].elm
 
-    $el.addEventListener('tribute-replaced', e => {
+    if (this.tribute) {
-      this.$emit('tribute-replaced', e)
+      this.tribute.detach($el)
-    })
+    }
-
-    $el.addEventListener('tribute-no-match', e => {
-      this.$emit('tribute-no-match', e)
-    })
   },
   render(h) {
     return h(
-      'div',
+      "div",
       {
-        staticClass: 'v-tribute'
+        staticClass: "v-tribute"
       },
       this.$slots.default
     )
   }
 }
 
-if (typeof window !== 'undefined' && window.Vue) {
+if (typeof window !== "undefined" && window.Vue) {
   window.Vue.component(VueTribute.name, VueTribute)
 }