feat(events) add suggestion as event @suggestion

- chore(eslint) add eslint vue/recommended configuration and have
autosuggest lib conform
- chore(rollup) uglify esm module for smaller lib size
- chore(storybook) add story for suggestion event
- test(events) add tests for suggestion event/deprecation warnings

Fixes #58 From #62

.eslintrc.js

@@ -1,19 +1,11 @@
 module.exports = {
-  extends: [
-    "eslint:recommended",
-    "plugin:vue/recommended" // or 'plugin:vue/base'
-  ],
+  env: {
+    browser: true
+  },
+  extends: ["plugin:vue/recommended"],
+  plugins: ["vue"],
   rules: {
-    // override/add rules' settings here
     "vue/valid-v-if": "error",
     "no-console": ["warn", { allow: ["warn", "error"] }]
-  },
-  parserOptions: {
-    parser: "babel-eslint",
-    ecmaVersion: 2017,
-    sourceType: "module"
-  },
-  env: {
-    amd: true
   }
 };

__tests__/__snapshots__/autosuggest.test.js.snap

@@ -1,5 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Autosuggest @click and @selected listener events works as expected 1`] = `
+
+<div id="autosuggest"
+     data-server-rendered="true"
+>
+  <input type="text"
+         autocomplete="off"
+         role="combobox"
+         aria-autocomplete="list"
+         aria-owns="autosuggest__results"
+         aria-activedescendant
+         aria-haspopup="false"
+         aria-expanded="false"
+         id="autosuggest__input"
+         initialvalue
+         oninputchange="function onInputChange() {}"
+         placeholder="Type 'G'"
+         name="q"
+         onblur="function blurred() {}"
+         onfocus="function focused() {
+                mockFn();
+              }"
+         value="clifford kits"
+         class="form-control"
+  >
+  <div class="autosuggest__results-container">
+  </div>
+</div>
+
+`;
+
 exports[`Autosuggest can click outside document to trigger close 1`] = `
 
 <div id="autosuggest"
@@ -709,8 +740,8 @@ exports[`Autosuggest onBlur and onFocus work as expected, including deprecation
          aria-autocomplete="list"
          aria-owns="autosuggest__results"
          aria-activedescendant
-         aria-haspopup="true"
-         aria-expanded="true"
+         aria-haspopup="false"
+         aria-expanded="false"
          id="autosuggest__input"
          initialvalue
          oninputchange="function onInputChange() {}"
@@ -722,58 +753,10 @@ exports[`Autosuggest onBlur and onFocus work as expected, including deprecation
          onfocus="function focused() {
                 mockFn();
               }"
-         value="G"
-         class="form-control autosuggest__input-open"
+         value="friendly chemistry"
+         class="form-control"
   >
   <div class="autosuggest__results-container">
-    <div aria-labelledby="autosuggest"
-         class="autosuggest__results"
-    >
-      <ul role="listbox"
-          aria-labelledby="autosuggest"
-      >
-        <li role="option"
-            data-suggestion-index="0"
-            data-section-name="default"
-            id="autosuggest__results_item-0"
-            class="autosuggest__results_item"
-        >
-          clifford kits
-        </li>
-        <li role="option"
-            data-suggestion-index="1"
-            data-section-name="default"
-            id="autosuggest__results_item-1"
-            class="autosuggest__results_item"
-        >
-          friendly chemistry
-        </li>
-        <li role="option"
-            data-suggestion-index="2"
-            data-section-name="default"
-            id="autosuggest__results_item-2"
-            class="autosuggest__results_item"
-        >
-          phonics
-        </li>
-        <li role="option"
-            data-suggestion-index="3"
-            data-section-name="default"
-            id="autosuggest__results_item-3"
-            class="autosuggest__results_item"
-        >
-          life of fred
-        </li>
-        <li role="option"
-            data-suggestion-index="4"
-            data-section-name="default"
-            id="autosuggest__results_item-4"
-            class="autosuggest__results_item"
-        >
-          life of fred math
-        </li>
-      </ul>
-    </div>
   </div>
 </div>
 

__tests__/autosuggest.test.js

@@ -347,9 +347,14 @@ describe("Autosuggest", () => {
     const focused = () => {
       mockFn();
     };
+    const selected = () => {
+      mockFn();
+    };
 
     props.inputProps.onBlur = blurred;
     props.inputProps.onFocus = focused;
+    delete props['sectionConfigs'];
+    props.onSelected = selected;
 
     const wrapper = mount(Autosuggest, {
       propsData: props,
@@ -365,6 +370,10 @@ describe("Autosuggest", () => {
     input.trigger("blur");
     input.trigger("focus");
 
+    input.trigger("keydown.down");
+    input.trigger("keydown.down");
+    input.trigger("keydown.enter");
+
     const renderer = createRenderer();
     renderer.renderToString(wrapper.vm, (err, str) => {
       if (err) {
@@ -373,8 +382,8 @@ describe("Autosuggest", () => {
       expect(str).toMatchSnapshot();
     });
 
-    expect(mockFn).toHaveBeenCalledTimes(2);
-    expect(mockConsole).toHaveBeenCalledTimes(2); // onBlur and onFocus deprecation warnings
+    expect(mockFn).toHaveBeenCalledTimes(3);
+    expect(mockConsole).toHaveBeenCalledTimes(3); // onBlur and onFocus deprecation warnings
   });
 
   it("can render default suggestion value by property name", async () => {
@@ -533,4 +542,51 @@ describe("Autosuggest", () => {
       expect(str).toMatchSnapshot();
     });
   });
+
+  it("@click and @selected listener events works as expected", async () => {
+    let props = Object.assign({}, defaultProps);
+
+    delete props['sectionConfigs']
+
+    const mockFn = jest.fn();
+    const mockConsole = jest.fn();
+
+    console.warn = mockConsole;
+
+    const wrapper = mount(Autosuggest, {
+      propsData: props,
+      listeners: {
+        click: e => {
+          mockFn(e);
+        },
+        selected: e => {
+          mockFn(e);
+        }
+      },
+      attachToDocument: true
+    });
+
+    await wrapper.vm.$nextTick(() => {});
+
+    const input = wrapper.find("input");
+    input.trigger("click");
+    wrapper.setData({ searchInput: "F" });
+
+    input.trigger("keydown.down");
+    input.trigger("keydown.enter");
+
+    expect(input.element.value).toBe("clifford kits");
+
+    expect(mockConsole).toHaveBeenCalledTimes(0);
+    expect(mockFn).toHaveBeenCalledTimes(2);
+
+    const renderer = createRenderer();
+
+    renderer.renderToString(wrapper.vm, (err, str) => {
+      if (err) {
+        return false;
+      }
+      expect(str).toMatchSnapshot();
+    });
+  });
 });

build/rollup.esm.config.js

@@ -1,6 +1,7 @@
 import vue from "rollup-plugin-vue";
 import buble from "rollup-plugin-buble";
 import filesize from "rollup-plugin-filesize";
+import uglify from "rollup-plugin-uglify";
 import json from "rollup-plugin-json";
 
 export default {
@@ -12,7 +13,8 @@ export default {
       objectAssign: "Object.assign",
       jsx: "h"
     }),
-    filesize()
+    filesize(),
+    uglify()
   ],
   output: [
     {