WIP: Popper integration

- adds dropdown events: opening, opened, closing, closed

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>

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 />

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",

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: {

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"