fix: Popover arrow

- Use popper.js 2.x
- placement prop for uh, placement
- show prop for explicit show/hide

package.json

@@ -17,6 +17,7 @@
   },
   "main": "background.js",
   "dependencies": {
+    "@popperjs/core": "^2.0.3",
     "core-js": "^3.4.3",
     "electron-store": "^5.1.0",
     "frappe-charts": "^1.3.0",
@@ -24,7 +25,6 @@
     "knex": "^0.20.4",
     "lodash": "^4.17.15",
     "luxon": "^1.21.3",
-    "popper.js": "^1.16.0",
     "portal-vue": "^2.1.6",
     "sqlite3": "^4.1.1",
     "tailwindcss": "^1.1.4",

src/components/FilterDropdown.vue

@@ -1,5 +1,5 @@
 <template>
-  <Popover @close="emitFilterChange" right>
+  <Popover @close="emitFilterChange" placement="bottom-end">
     <template v-slot:target="{ togglePopover }">
       <Button :icon="true" @click="togglePopover()">
         <span class="flex items-center">

src/components/Popover.vue

@@ -7,9 +7,10 @@
       <div
         ref="popover"
         :class="popoverClass"
-        class="mt-1 bg-white rounded border min-w-40 shadow-md"
+        class="bg-white rounded border min-w-40 shadow-md popover-container relative"
         v-show="isOpen"
       >
+        <div class="popover-arrow" ref="popover-arrow"></div>
         <slot name="content" :togglePopover="togglePopover"></slot>
       </div>
     </portal>
@@ -17,14 +18,31 @@
 </template>
 
 <script>
-import Popper from 'popper.js';
+import { createPopper } from '@popperjs/core';
 
 export default {
   name: 'Popover',
   props: {
+    show: {
+      default: null
+    },
     right: Boolean,
+    placement: {
+      type: String,
+      default: 'bottom-start'
+    },
     popoverClass: [String, Object, Array]
   },
+  watch: {
+    show(value) {
+      if (value === true) {
+        this.open();
+      }
+      if (value === false) {
+        this.close();
+      }
+    }
+  },
   data() {
     return {
       isOpen: false
@@ -41,10 +59,12 @@ export default {
       }
       this.close();
     };
-    document.addEventListener('click', listener);
-    this.$once('hook:beforeDestroy', () => {
-      document.removeEventListener('click', listener);
-    });
+    if (this.show == null) {
+      document.addEventListener('click', listener);
+      this.$once('hook:beforeDestroy', () => {
+        document.removeEventListener('click', listener);
+      });
+    }
   },
   beforeDestroy() {
     this.popper && this.popper.destroy();
@@ -52,11 +72,25 @@ export default {
   methods: {
     setupPopper() {
       if (!this.popper) {
-        this.popper = new Popper(this.$refs.reference, this.$refs.popover, {
-          placement: this.right ? 'bottom-end' : 'bottom-start'
+        this.popper = createPopper(this.$refs.reference, this.$refs.popover, {
+          placement: this.placement,
+          modifiers: [
+            {
+              name: 'arrow',
+              options: {
+                element: this.$refs['popover-arrow']
+              }
+            },
+            {
+              name: 'offset',
+              options: {
+                offset: [0, 10]
+              }
+            }
+          ]
         });
       } else {
-        this.popper.scheduleUpdate();
+        this.popper.update();
       }
     },
     togglePopover(flag) {
@@ -90,3 +124,36 @@ export default {
   }
 };
 </script>
+<style scoped>
+.popover-arrow,
+.popover-arrow::after {
+  position: absolute;
+  width: theme('spacing.3');
+  height: theme('spacing.3');
+  z-index: -1;
+}
+
+.popover-arrow::after {
+  content: '';
+  background: white;
+  transform: rotate(45deg);
+  border-top: 1px solid theme('borderColor.gray.400');
+  border-left: 1px solid theme('borderColor.gray.400');
+}
+
+.popover-container[data-popper-placement^='top'] > .popover-arrow {
+  bottom: -6px;
+}
+
+.popover-container[data-popper-placement^='bottom'] > .popover-arrow {
+  top: -6px;
+}
+
+.popover-container[data-popper-placement^='left'] > .popover-arrow {
+  right: -6px;
+}
+
+.popover-container[data-popper-placement^='right'] > .popover-arrow {
+  left: -6px;
+}
+</style>

yarn.lock

@@ -803,6 +803,11 @@
     "@nodelib/fs.scandir" "2.1.3"
     fastq "^1.6.0"
 
+"@popperjs/core@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.0.3.tgz#e18b505eb2ac5aeb4df4b41d69b324149f1bb9fd"
+  integrity sha512-LruFy9VJw+RdsvWXUCmqmCFBb5Q0YrbJ8qMDnjoXxTuOSwsmDgXw3sIgEIy0eRnKpdHMV8UOPnRRJNDRcidlCA==
+
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"
@@ -8248,7 +8253,7 @@ please-upgrade-node@^3.1.1:
   dependencies:
     semver-compare "^1.0.0"
 
-popper.js@^1.14.3, popper.js@^1.16.0:
+popper.js@^1.14.3:
   version "1.16.0"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.0.tgz#2e1816bcbbaa518ea6c2e15a466f4cb9c6e2fbb3"
   integrity sha512-+G+EkOPoE5S/zChTpmBSSDYmhXJ5PsW8eMhH8cP/CQHMFPBG/kC9Y5IIw6qNYgdJ+/COf0ddY2li28iHaZRSjw==