fix: Popover

- hideArrow prop
- Use Popover in Dropdown
- Rename prop show to showPopup

src/components/Dropdown.vue

@@ -1,6 +1,14 @@
 <template>
-  <div class="relative" v-on-outside-click="() => (isShown = false)">
+  <Popover
-    <div class="h-full">
+    :show-popup="isShown"
+    :hide-arrow="true"
+    :placement="right ? 'bottom-end' : 'bottom-start'"
+  >
+    <div
+      slot="target"
+      class="h-full"
+      v-on-outside-click="() => (isShown = false)"
+    >
       <slot
         :toggleDropdown="toggleDropdown"
         :highlightItemUp="highlightItemUp"
@@ -8,12 +16,8 @@
         :selectHighlightedItem="selectHighlightedItem"
       ></slot>
     </div>
-    <div
+    <div slot="content" class="z-10 bg-white rounded w-full min-w-40">
-      :class="right ? 'right-0' : 'left-0'"
+      <div class="p-1 max-h-64 overflow-auto text-sm">
-      class="mt-1 absolute z-10 bg-white rounded border w-full min-w-40 shadow-md"
-      v-if="isShown"
-    >
-      <div class="p-1 max-h-64 overflow-auto">
         <div v-for="d in dropdownItems" :key="d.label">
           <div
             v-if="d.isGroup"
@@ -36,10 +40,11 @@
         </div>
       </div>
     </div>
-  </div>
+  </Popover>
 </template>
 
 <script>
+import Popover from './Popover';
 import uniq from 'lodash/uniq';
 
 export default {
@@ -58,6 +63,9 @@ export default {
       default: false
     }
   },
+  components: {
+    Popover
+  },
   data() {
     return {
       isShown: false,

src/components/Popover.vue

@@ -10,7 +10,7 @@
         class="bg-white rounded border min-w-40 shadow-md popover-container relative"
         v-show="isOpen"
       >
-        <div class="popover-arrow" ref="popover-arrow"></div>
+        <div v-if="!hideArrow" class="popover-arrow" ref="popover-arrow"></div>
         <slot name="content" :togglePopover="togglePopover"></slot>
       </div>
     </portal>
@@ -23,7 +23,11 @@ import { createPopper } from '@popperjs/core';
 export default {
   name: 'Popover',
   props: {
-    show: {
+    hideArrow: {
+      type: Boolean,
+      default: false
+    },
+    showPopup: {
       default: null
     },
     right: Boolean,
@@ -34,7 +38,7 @@ export default {
     popoverClass: [String, Object, Array]
   },
   watch: {
-    show(value) {
+    showPopup(value) {
       if (value === true) {
         this.open();
       }
@@ -74,20 +78,22 @@ export default {
       if (!this.popper) {
         this.popper = createPopper(this.$refs.reference, this.$refs.popover, {
           placement: this.placement,
-          modifiers: [
+          modifiers: !this.hideArrow
-            {
+            ? [
-              name: 'arrow',
+                {
-              options: {
+                  name: 'arrow',
-                element: this.$refs['popover-arrow']
+                  options: {
-              }
+                    element: this.$refs['popover-arrow']
-            },
+                  }
-            {
+                },
-              name: 'offset',
+                {
-              options: {
+                  name: 'offset',
-                offset: [0, 10]
+                  options: {
-              }
+                    offset: [0, 10]
-            }
+                  }
-          ]
+                }
+              ]
+            : []
         });
       } else {
         this.popper.update();

src/pages/SetupWizard/SetupWizard.vue

@@ -26,7 +26,7 @@
             "
             :autofocus="true"
           />
-          <Popover placement="auto" :show="Boolean(emailError)">
+          <Popover placement="auto" :show-popup="Boolean(emailError)">
             <template slot="target">
               <FormControl
                 :df="meta.getField('email')"