From 2f5385dbab84bf8f495fe54735921ddae36dd742 Mon Sep 17 00:00:00 2001
From: Drikus Roor <drikusroor@gmail.com>
Date: Sun, 25 Sep 2022 12:07:58 +0200
Subject: [PATCH] Emit paste event on paste (#3)

* Emit paste event on paste

Related to #1 #2

* Add paste event to reference.md

* Show events in toast as example

* Format examples

* Update package version and changelog
---
 CHANGELOG.md                                  |   4 +
 docs/.vuepress/components/APIExample.vue      |   4 +-
 .../.vuepress/components/CustomSuggestion.vue |   4 +-
 docs/.vuepress/components/EventsDemo.vue      |  53 ++++
 docs/.vuepress/components/HomePageDemo.vue    |   3 +-
 docs/.vuepress/enhanceApp.js                  |   5 +
 docs/examples/examples.md                     | 255 +++++++++++-------
 docs/guide/reference.md                       |   5 +-
 package.json                                  |   2 +-
 src/components/VueBootstrapAutocomplete.vue   |   3 +-
 tests/unit/VueTypeaheadBootstrap.spec.js      |   6 +
 11 files changed, 242 insertions(+), 102 deletions(-)
 create mode 100644 docs/.vuepress/components/EventsDemo.vue
 create mode 100644 docs/.vuepress/enhanceApp.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ae5654b..c983104 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 2.14.0 - 25 Sep 2022
+- Update docs with event examples
+- Emit paste event from input
+
 ## 2.13.0 - 22 Sep 2022
 - Update npm dependencies and replace node-sass by dart-sass
 - Update/vuepress dart sass
diff --git a/docs/.vuepress/components/APIExample.vue b/docs/.vuepress/components/APIExample.vue
index de395c8..5a32e06 100644
--- a/docs/.vuepress/components/APIExample.vue
+++ b/docs/.vuepress/components/APIExample.vue
@@ -26,7 +26,7 @@
   export default {
     name: "APIExample",
     components: {VueBootstrapAutocomplete},
-    data(){
+    data() {
       return {
         query: '',
         selecteduser: null,
@@ -35,7 +35,7 @@
     },
 
     methods: {
-      lookupUser: debounce(function(){
+      lookupUser: debounce(function() {
         // in practice this action should be debounced
         fetch(`https://api.github.com/search/users?q=${this.query}`)
           .then(response => {
diff --git a/docs/.vuepress/components/CustomSuggestion.vue b/docs/.vuepress/components/CustomSuggestion.vue
index 13e1c3b..487dd16 100644
--- a/docs/.vuepress/components/CustomSuggestion.vue
+++ b/docs/.vuepress/components/CustomSuggestion.vue
@@ -42,7 +42,7 @@
   export default {
     name: "APIExample",
     components: {VueBootstrapAutocomplete},
-    data(){
+    data() {
       return {
         query: '',
         selecteduser: null,
@@ -51,7 +51,7 @@
     },
 
     methods: {
-      lookupUser: debounce(function(){
+      lookupUser: debounce(function() {
         // in practice this action should be debounced
         fetch(`https://api.github.com/search/users?q=${this.query}`)
           .then(response => {
diff --git a/docs/.vuepress/components/EventsDemo.vue b/docs/.vuepress/components/EventsDemo.vue
new file mode 100644
index 0000000..ca4969a
--- /dev/null
+++ b/docs/.vuepress/components/EventsDemo.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <div class="pl-1 pb-2 pt-3">Selected Country: {{ query }}</div>
+    <vue-bootstrap-autocomplete
+      class="mb-4"
+      :data="[
+        'Canada',
+        'United Kingdom',
+        'United States',
+        'Mexico',
+        'Netherlands',
+      ]"
+      v-model="query"
+      showOnFocus
+      placeholder="Choose a country"
+      @blur="() => onEvent('blur')"
+      @focus="() => onEvent('focus')"
+      @hit="() => onEvent('hit')"
+      @input="() => onEvent('input')"
+      @keyup="() => onEvent('keyup')"
+      @paste="() => onEvent('paste')"
+    />
+  </div>
+</template>
+
+<script>
+import "bootstrap-vue/dist/bootstrap-vue.css";
+import VueBootstrapAutocomplete from "../../../src/components/VueBootstrapAutocomplete";
+
+export default {
+  name: "EventsDemo",
+  components: { VueBootstrapAutocomplete },
+  data() {
+    return {
+      query: "",
+    };
+  },
+  methods: {
+    onEvent(event) {
+      this.$bvToast.toast(event, {
+        title: "Event emitted",
+        autoHideDelay: 5000,
+        variant: "info",
+        solid: true,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "bootstrap/scss/bootstrap.scss";
+</style>
diff --git a/docs/.vuepress/components/HomePageDemo.vue b/docs/.vuepress/components/HomePageDemo.vue
index 42a533c..cccb9a1 100644
--- a/docs/.vuepress/components/HomePageDemo.vue
+++ b/docs/.vuepress/components/HomePageDemo.vue
@@ -2,6 +2,7 @@
   <div>
     <div class="pl-1 pb-2 pt-3">Selected Country: {{query}}</div>
     <vue-bootstrap-autocomplete
+      class="mb-4"
       :data="['Canada', 'United Kingdom', 'United States', 'Mexico', 'Netherlands']"
       v-model="query"
       showOnFocus
@@ -17,7 +18,7 @@
   export default {
     name: "HomePageDemo",
     components: {VueBootstrapAutocomplete},
-    data(){
+    data() {
       return {
         query: ''
       }
diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js
new file mode 100644
index 0000000..7989aaa
--- /dev/null
+++ b/docs/.vuepress/enhanceApp.js
@@ -0,0 +1,5 @@
+import { ToastPlugin } from "bootstrap-vue";
+
+export default ({ Vue, options, router, siteData, isServer }) => {
+  Vue.use(ToastPlugin);
+};
diff --git a/docs/examples/examples.md b/docs/examples/examples.md
index fc11c63..38d332d 100644
--- a/docs/examples/examples.md
+++ b/docs/examples/examples.md
@@ -1,11 +1,12 @@
 # Examples
 
-## Basic 
+## Basic
+
 <HomePageDemo/>
 
 ```vue
 <template>
-  <div class="pl-1 pb-2 pt-3">Selected Country: {{query}}</div>
+  <div class="pl-1 pb-2 pt-3">Selected Country: {{ query }}</div>
   <div>
     Options: `Canada, United States, Mexico, Netherlands`,
     <vue-bootstrap-autocomplete
@@ -17,70 +18,84 @@
 </template>
 
 <script>
-  export default {
-      data() {
-        return {
-          query: ''
-        }
-      }
-    }
+export default {
+  data() {
+    return {
+      query: "",
+    };
+  },
+};
 </script>
 ```
 
 ## API Example
+
 <APIExample/>
 
 ```vue
 <template>
   <div>
     <div class="pl-1 pb-2 pt-3">
-      Selected user: <span v-if="selecteduser">{{selecteduser.login}}</span>
+      Selected user: <span v-if="selecteduser">{{ selecteduser.login }}</span>
     </div>
     <vue-bootstrap-autocomplete
       class="mb-4"
       v-model="query"
       :ieCloseFix="false"
       :data="users"
-      :serializer="item => item.login"
+      :serializer="(item) => item.login"
       @hit="selecteduser = $event"
-      :disabledValues="(selecteduser ? [selecteduser.login] : [])"
+      :disabledValues="selecteduser ? [selecteduser.login] : []"
       placeholder="Search Github Users"
       @input="lookupUser"
-      #use a different background color for even or odd user ids
-      :background-variant-resolver="(user) => ((user.id % 2) == 0) ? 'light':'dark'"
+      #use
+      a
+      different
+      background
+      color
+      for
+      even
+      or
+      odd
+      user
+      ids
+      :background-variant-resolver="
+        (user) => (user.id % 2 == 0 ? 'light' : 'dark')
+      "
     />
   </div>
 </template>
 
 <script>
-  import {debounce} from 'lodash';
+import { debounce } from "lodash";
 
-  export default {
-  data(){
+export default {
+  data() {
     return {
-      query: '',
+      query: "",
       selecteduser: null,
-      users: []
-    }
+      users: [],
+    };
   },
 
   methods: {
-    lookupUser: debounce(function(){
+    lookupUser: debounce(function () {
       // in practice this action should be debounced
       fetch(`https://api.github.com/search/users?q=${this.query}`)
-        .then(response => {
+        .then((response) => {
           return response.json();
         })
-        .then(data => {
+        .then((data) => {
           this.users = data.items;
-        })
-    }, 500)
-  }  
-}
+        });
+    }, 500),
+  },
+};
 </script>
 ```
 
 ## Prepend/Append
+
 <PendingAppendingExample/>
 
 ```vue
@@ -91,71 +106,70 @@
       v-model="query"
       :data="users"
       @keydown.enter="search"
-      :serializer="item => item.login"
+      :serializer="(item) => item.login"
       placeholder="Search GitHub Users"
       prepend="Username:"
       @input="searchUsers"
       @keyup.enter="handleEnter"
     >
       <template slot="append">
-        <button  class="btn btn-primary">
-          Search
-        </button>
+        <button class="btn btn-primary">Search</button>
       </template>
     </VueBootstrapAutocomplete>
   </div>
 </template>
 
 <script>
-  import {debounce} from 'lodash';
-  export default {
-    data(){
-      return {
-        query: '',
-        userRepositories: {},
-        users: []
-      }
-    },
+import { debounce } from "lodash";
+export default {
+  data() {
+    return {
+      query: "",
+      userRepositories: {},
+      users: [],
+    };
+  },
 
-    methods: {
-      handleEnter: function(event){
-        alert('keyup.enter pressed!');
-      },
-      searchUsers: debounce(function() {
-        fetch(`https://api.github.com/search/users?q=${this.query}`)
-          .then(response => {
-            return response.json();
-          })
-          .then(data => {
-            this.users = data.items;
-          })
-      }, 500)
-    }
-  }
+  methods: {
+    handleEnter: function (event) {
+      alert("keyup.enter pressed!");
+    },
+    searchUsers: debounce(function () {
+      fetch(`https://api.github.com/search/users?q=${this.query}`)
+        .then((response) => {
+          return response.json();
+        })
+        .then((data) => {
+          this.users = data.items;
+        });
+    }, 500),
+  },
+};
 </script>
 ```
 
 ## Custom Suggestion Slot
+
 <CustomSuggestion/>
 
 ```vue
 <template>
   <div>
     <div class="pl-1 pb-2 pt-3">
-      Selected user: <span v-if="selecteduser">{{selecteduser.login}}</span>
+      Selected user: <span v-if="selecteduser">{{ selecteduser.login }}</span>
     </div>
     <vue-bootstrap-autocomplete
       class="mb-4"
       v-model="query"
       :data="users"
-      :serializer="item => item.login"
-      :screen-reader-text-serializer="item => `Github user ${item.login}`"
+      :serializer="(item) => item.login"
+      :screen-reader-text-serializer="(item) => `Github user ${item.login}`"
       highlightClass="special-highlight-class"
       @hit="selecteduser = $event"
       :minMatchingChars="3"
       placeholder="Search Github Users"
       inputClass="special-input-class"
-      :disabledValues="(selecteduser ? [selecteduser.login] : [])"
+      :disabledValues="selecteduser ? [selecteduser.login] : []"
       @input="lookupUser"
     >
       <template slot="suggestion" slot-scope="{ data, htmlText }">
@@ -163,7 +177,8 @@
           <img
             class="rounded-circle"
             :src="data.avatar_url"
-            style="width: 40px; height: 40px;" />
+            style="width: 40px; height: 40px;"
+          />
 
           <!-- Note: the v-html binding is used, as htmlText contains
                the suggestion text highlighted with <strong> tags -->
@@ -175,43 +190,97 @@
   </div>
 </template>
 
-
 <script>
-  import {debounce} from 'lodash';
-  export default {
-    data(){
-      return {
-        query: '',
-        selecteduser: null,
-        users: []
-      }
-    },
+import { debounce } from "lodash";
+export default {
+  data() {
+    return {
+      query: "",
+      selecteduser: null,
+      users: [],
+    };
+  },
 
-    methods: {
-      lookupUser: debounce(function(){
-        // in practice this action should be debounced
-        fetch(`https://api.github.com/search/users?q=${this.query}`)
-          .then(response => {
-            return response.json();
-          })
-          .then(data => {
-            this.users = data.items;
-          })
-      }, 500)
-    }
-  }
+  methods: {
+    lookupUser: debounce(function () {
+      // in practice this action should be debounced
+      fetch(`https://api.github.com/search/users?q=${this.query}`)
+        .then((response) => {
+          return response.json();
+        })
+        .then((data) => {
+          this.users = data.items;
+        });
+    }, 500),
+  },
+};
 </script>
 
 <style lang="scss">
-  @import 'bootstrap/scss/bootstrap.scss';
-
-  .special-input-class{
-    background-color: black !important;
-    color: white !important;
-  }
-  .special-highlight-class{
-    font-weight: 900;
-    color: #585656;
-  }
+@import "bootstrap/scss/bootstrap.scss";
+
+.special-input-class {
+  background-color: black !important;
+  color: white !important;
+}
+.special-highlight-class {
+  font-weight: 900;
+  color: #585656;
+}
 </style>
 ```
+
+## Events
+
+<EventsDemo/>
+
+```vue
+<template>
+  <div>
+    <div class="pl-1 pb-2 pt-3">Selected Country: {{ query }}</div>
+    <vue-bootstrap-autocomplete
+      :data="[
+        'Canada',
+        'United Kingdom',
+        'United States',
+        'Mexico',
+        'Netherlands',
+      ]"
+      v-model="query"
+      showOnFocus
+      placeholder="Choose a country"
+      @blur="() => onEvent('blur')"
+      @focus="() => onEvent('focus')"
+      @hit="() => onEvent('hit')"
+      @input="() => onEvent('input')"
+      @keyup="() => onEvent('keyup')"
+      @paste="() => onEvent('paste')"
+    />
+  </div>
+</template>
+
+<script>
+import "bootstrap-vue/dist/bootstrap-vue.css";
+import VueBootstrapAutocomplete from "../../../src/components/VueBootstrapAutocomplete";
+
+export default {
+  name: "EventsDemo",
+  components: { VueBootstrapAutocomplete },
+  data() {
+    return {
+      query: "",
+    };
+  },
+  methods: {
+    onEvent(event) {
+      this.$bvToast.toast(event, {
+        title: "Event emitted",
+        autoHideDelay: 5000,
+        variant: "info",
+        solid: true,
+      });
+    },
+  },
+};
+</script>
+```
diff --git a/docs/guide/reference.md b/docs/guide/reference.md
index 6b3d5f9..38c4f3a 100644
--- a/docs/guide/reference.md
+++ b/docs/guide/reference.md
@@ -30,11 +30,12 @@
 
 Name | Description
 | --- | --- |
+blur | Triggered when the input field loses focus, except when pressing the `tab` key to focus the dropdown list.
+focus | Triggered when the input element receives focus.
 hit | Triggered when an autocomplete item is selected. The entry in the input data array that was selected is returned. If no autocomplete item is selected, the first entry matching the query is selected and returned.
 input | The component can be used with `v-model`
 keyup | Triggered when any keyup event is fired in the input. Often used for catching `keyup.enter`.
-focus | Triggered when the input element receives focus.
-blur | Triggered when the input field loses focus, except when pressing the `tab` key to focus the dropdown list.
+paste | Triggered when the user pastes text into the input field.
 
 ## Slots
 
diff --git a/package.json b/package.json
index 4729e54..60f5139 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue-bootstrap-components/vue-bootstrap-autocomplete",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "private": false,
   "description": "A typeahead/autocomplete component for Vue 2 using Bootstrap 4",
   "keywords": [
diff --git a/src/components/VueBootstrapAutocomplete.vue b/src/components/VueBootstrapAutocomplete.vue
index 95202fa..8b61df3 100644
--- a/src/components/VueBootstrapAutocomplete.vue
+++ b/src/components/VueBootstrapAutocomplete.vue
@@ -33,6 +33,7 @@
         @input="handleInput($event.target.value)"
         @keydown.esc="handleEsc($event.target.value)"
         @keyup="$emit('keyup', $event)"
+        @paste="$emit('paste', $event)"
       />
       <div v-if="$slots.append || append" class="input-group-append">
         <slot name="append">
@@ -171,7 +172,7 @@ export default {
     highlightClass: String
   },
 
-  emits: ['hit', 'input', 'keyup', 'focus', 'blur'],
+  emits: ['hit', 'input', 'keyup', 'focus', 'blur', 'paste'],
 
   computed: {
     id() {
diff --git a/tests/unit/VueTypeaheadBootstrap.spec.js b/tests/unit/VueTypeaheadBootstrap.spec.js
index b3e959b..04f25af 100644
--- a/tests/unit/VueTypeaheadBootstrap.spec.js
+++ b/tests/unit/VueTypeaheadBootstrap.spec.js
@@ -193,5 +193,11 @@ describe('VueBootstrapAutocomplete', () => {
       await input.trigger('focus')
       expect(wrapper.emitted().focus).toBeTruthy()
     })
+
+    it('Emits a paste event when the underlying input field receives a paste event', async () => {
+      let input = wrapper.find('input')
+      await input.trigger('paste')
+      expect(wrapper.emitted().paste).toBeTruthy()
+    });
   })
 })