From 10eed84904c3a82de667fab9c4157356b173026b Mon Sep 17 00:00:00 2001
From: Jeff <jeff.sagal@briteweb.com>
Date: Sat, 4 May 2019 11:12:42 -0700
Subject: [PATCH] WIP: Popper integration

- adds dropdown events: opening, opened, closing, closed
---
 docs/.vuepress/components/Popper.vue | 23 +++++++++++++++++++++++
 docs/README.md                       |  3 +++
 package.json                         |  1 +
 src/components/Select.vue            | 15 +++++++++++++--
 yarn.lock                            |  5 +++++
 5 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 docs/.vuepress/components/Popper.vue

diff --git a/docs/.vuepress/components/Popper.vue b/docs/.vuepress/components/Popper.vue
new file mode 100644
index 0000000..ffe6dae
--- /dev/null
+++ b/docs/.vuepress/components/Popper.vue
@@ -0,0 +1,23 @@
+<template>
+  <v-select :options="books" :position="position" label="title"/>
+</template>
+
+<script>
+import books from '../data/books';
+import Popper from 'popper.js';
+
+export default {
+  data: () => ({
+    books,
+  }),
+  methods: {
+    position ({$refs}) {
+      if ($refs.dropdownMenu) {
+        new Popper($refs.toggle, $refs.dropdownMenu, {
+          placement: 'top',
+        });
+      }
+    },
+  },
+};
+</script>
diff --git a/docs/README.md b/docs/README.md
index 945c897..22a8181 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -36,3 +36,6 @@ If you want to get a quick sense of what vue-select can do, check out
 - **[CodePen Template](http://codepen.io/sagalbot/pen/NpwrQO)**
 - **[GitHub](https://github.com/sagalbot/vue-select)**
 - **[Projects](https://github.com/sagalbot/vue-select/projects)**
+
+
+<Popper />
diff --git a/package.json b/package.json
index 2ab7197..d5f92b3 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "jest-transform-stub": "^2.0.0",
     "mini-css-extract-plugin": "^0.5.0",
     "node-sass": "^4.10.0",
+    "popper.js": "^1.15.0",
     "postcss-loader": "^3.0.0",
     "postcss-scss": "^2.0.0",
     "sass-loader": "^7.1.0",
diff --git a/src/components/Select.vue b/src/components/Select.vue
index 61b3f37..228180b 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -421,7 +421,12 @@
       searchInputQuerySelector: {
         type: String,
         default: '[type=search]'
-      }
+      },
+
+      position: {
+        type: Function,
+        default: (vm) => {},
+      },
     },
 
     data() {
@@ -454,6 +459,11 @@
       multiple() {
         this.clearSelection()
       },
+
+      open (open) {
+          this.$emit(`dropdown:${open ? 'opening' : 'closing'}`, this);
+          this.$nextTick(() => this.$emit(`dropdown:${open ? 'opened' : 'closed'}`, this));
+      },
     },
 
     created() {
@@ -467,7 +477,8 @@
         }
       }
 
-      this.$on('option:created', this.maybePushTag)
+      this.$on('option:created', this.maybePushTag);
+      this.$on('dropdown:opened', this.position);
     },
 
     methods: {
diff --git a/yarn.lock b/yarn.lock
index ee7efea..d5a4124 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7834,6 +7834,11 @@ pn@^1.1.0:
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
   integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==
 
+popper.js@^1.15.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.15.0.tgz#5560b99bbad7647e9faa475c6b8056621f5a4ff2"
+  integrity sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==
+
 portfinder@^1.0.13, portfinder@^1.0.20, portfinder@^1.0.9:
   version "1.0.20"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.20.tgz#bea68632e54b2e13ab7b0c4775e9b41bf270e44a"