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
drikusroor · Sep 25, 2022 · 2f5385d · 2f5385d
1 parent 75e70ec
commit 2f5385d
Show file tree

Hide file tree

Showing 11 changed files with 242 additions and 102 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,5 @@
+import { ToastPlugin } from "bootstrap-vue";
+
+export default ({ Vue, options, router, siteData, isServer }) => {
+  Vue.use(ToastPlugin);
+};