added: auto detect placement

charliekassel · Aug 29, 2019 · 9c4ec25 · 9c4ec25
1 parent de0fc75
commit 9c4ec25
Show file tree

Hide file tree

Showing 11 changed files with 313 additions and 76 deletions.
diff --git a/__mocks__/popper.js.js b/__mocks__/popper.js.js
@@ -0,0 +1,13 @@
+import PopperJs from 'popper.js'
+
+export default class Popper {
+  static placements = PopperJs.placements;
+
+  constructor () {
+    return {
+      destroy: () => {},
+      update: () => {},
+      scheduleUpdate: () => {}
+    }
+  }
+}
diff --git a/babel.config.js b/babel.config.js
@@ -6,7 +6,7 @@ module.exports = {
   ],
   'env': {
     'test': {
-      'plugins': ['@babel/plugin-transform-modules-commonjs']
+      'plugins': ['@babel/plugin-transform-modules-commonjs', '@babel/plugin-proposal-class-properties']
     }
   }
 }
diff --git a/example/Demo.vue b/example/Demo.vue
@@ -206,6 +206,22 @@
       </code>
     </div>
 
+    <div class="example">
+      <h3>Placement</h3>
+      <datepicker :placement="placement"></datepicker>
+      <code>
+        &lt;datepicker :placement="{{ placement }}"&gt;&lt;/datepicker&gt;
+      </code>
+      <div class="settings">
+        <h5>Settings</h5>
+        <select v-model="placement">
+          <option value="auto">Auto</option>
+          <option value="top">Top</option>
+          <option value="bottom">Bottom</option>
+        </select>
+      </div>
+    </div>
+
     <div class="example">
       <h3>Day view only</h3>
       <datepicker :minimumView="'day'" :maximumView="'day'"></datepicker>
@@ -245,7 +261,6 @@
         &lt;datepicker :minimumView="'month'" :maximumView="'year'" :initialView="'year'"&gt;&lt;/datepicker&gt;
       </code>
     </div>
-
   </div>
 </template>
 
@@ -287,7 +302,8 @@ export default {
       state: state,
       vModelExample: null,
       languages: lang,
-      language: 'en'
+      language: 'en',
+      placement: 'auto',
     }
   },
   computed: {

diff --git a/example/main.js b/example/main.js
@@ -4,7 +4,7 @@ import Demo from './Demo.vue'
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */
-new Vue({
+window.app = new Vue({
   el: '#app',
   render: h => h(Demo)
 })
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,7 +36,9 @@
     "lint",
     "test"
   ],
-  "dependencies": {},
+  "dependencies": {
+    "popper.js": "^1.15.0"
+  },
   "peerDependencies": {
     "vue": "^2.6.10"
   },
@@ -45,6 +47,7 @@
     "@babel/core": "^7.4.5",
     "@babel/node": "^7.4.5",
     "@babel/plugin-external-helpers": "^7.2.0",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
     "@babel/plugin-transform-modules-commonjs": "^7.4.4",
     "@babel/plugin-transform-runtime": "^7.4.4",
     "@babel/preset-env": "^7.4.5",