Bug/make chec-options-menu popout

package.json

@@ -11,6 +11,7 @@
     "storybook:serve": "vue-cli-service storybook:serve -p 6006 -c config/storybook"
   },
   "dependencies": {
+    "@popperjs/core": "^2.1.1",
     "@vue/eslint-config-airbnb": "^5.0.2",
     "autoprefixer": "^9.7.4",
     "core-js": "^3.4.4",
@@ -19,8 +20,7 @@
     "tailwindcss": "^1.2.0",
     "tailwindcss-plugins": "^0.3.0",
     "v-tooltip": "akryum/v-tooltip",
-    "vue": "^2.6.10",
-    "vuejs-paginate": "github:john-raymon/vuejs-paginate"
+    "vue": "^2.6.10"
   },
   "devDependencies": {
     "@storybook/addon-actions": ">=5.3.0",

src/components/BasePopover.vue

@@ -12,6 +12,6 @@ export default {
 
 <style lang="scss" scoped>
  .popover {
-  @apply absolute w-full bg-white border border-gray-300 rounded overflow-hidden z-50;
+  @apply absolute bg-white border border-gray-300 rounded overflow-hidden z-50 shadow-md;
  }
 </style>

src/components/ChecOptionsMenu.vue

@@ -1,18 +1,14 @@
 <template>
   <div class="options-menu" ref="menu-el">
-    <BaseButton @click="toggleMenu" :class="{'float-right': position === 'right'}">
+    <BaseButton @click="toggleMenu" slot="reference" ref="button-el">
       <template v-slot:icon>
         <ChecIcon :icon="isOpen ? 'up' : 'down'" />
       </template>
     </BaseButton>
     <BasePopover
-      v-if="isOpen"
-      :class="{
-        'left-0': position === 'left',
-        'mt-10': position === 'right',
-        'right-0': position === 'right',
-      }"
+      v-show="isOpen"
       @option-selected="handleSelectOption"
+      ref="popper-el"
     >
       <!--
         @slot Provide BaseOption instances here
@@ -22,6 +18,7 @@
   </div>
 </template>
 <script>
+import { createPopper } from '@popperjs/core';
 import BaseButton from './BaseButton.vue';
 import BasePopover from './BasePopover.vue';
 import ChecIcon from './ChecIcon.vue';
@@ -42,13 +39,28 @@ export default {
       default: false,
     },
     /**
-     * Whether to left or right align the menu button in its container
+     *  Describes the preferred placement of the options menu.
      */
-    position: {
+    menuPlacement: {
       type: String,
-      default: 'left',
-      validate(position) {
-        return ['left', 'right'].includes(position);
+      default: 'bottom',
+      validate(placement) {
+        return [
+          'auto',
+          'auto-start',
+          'auto-end',
+          'top',
+          'top-start',
+          'top-end',
+          'bottom',
+          'bottom-start',
+          'bottom-end',
+          'right',
+          'right-start',
+          'right-end',
+          'left',
+          'left-start',
+          'left-end'].includes(placement);
       },
     },
   },
@@ -57,15 +69,76 @@ export default {
       isOpen: this.open,
     };
   },
+  watch: {
+    isOpen(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        if (newVal) {
+          this.show();
+        } else {
+          this.hide();
+        }
+      }
+    },
+  },
   created() {
     // add event listener to listen to outside click events
     window.addEventListener('click', this.onOutsideClick);
   },
+  mounted() {
+    this.$nextTick(() => {
+      this.createPopper();
+    });
+  },
   beforeDestroy() {
     // remove event listeners
     window.removeEventListener('click', this.onOutsideClick);
   },
   methods: {
+    /**
+     * Show the popper.js
+     */
+    show() {
+      this.$refs['button-el'].$el.setAttribute('data-show', '');
+      this.createPopper();
+    },
+    /**
+     * Hide the popper
+     */
+    hide() {
+      this.$refs['popper-el'].$el.removeAttribute('data-show');
+      this.destroyPopper();
+    },
+    /**
+     * Create the popper.js instance
+     */
+    createPopper() {
+      this.$popper = createPopper(this.$refs['button-el'].$el, this.$refs['popper-el'].$el, {
+        placement: this.menuPlacement,
+        modifiers: [
+          {
+            name: 'flip',
+            options: {
+              fallbackPlacements: ['top', 'bottom'],
+            },
+          },
+          {
+            name: 'preventOverflow',
+            options: {
+              rootBoundary: 'document',
+            },
+          },
+        ],
+      });
+    },
+    /**
+     * Destroys the popper.js instance
+     */
+    destroyPopper() {
+      if (this.$popper) {
+        this.$popper.destroy();
+        this.$popper = null;
+      }
+    },
     /**
      * Toggles the menu between open and closed
      */
@@ -93,8 +166,7 @@ export default {
 </script>
 <style scoped lang="scss">
 .options-menu {
-  @apply relative;
-
+  @apply static;
   .button {
     @apply shadow-none bg-transparent;
   }

src/stories/components/ChecOptionsMenu.stories.mdx

@@ -30,7 +30,48 @@ import ChecOptionsMenu from '../../components/ChecOptionsMenu.vue';
       },
       template: `
       <div class="p-16 flex justify-center font-lato w-full text-gray-500">
-        <div class="w-64 relative">
+        <div class="w-full relative">
+          <table class="w-full">
+            <thead>
+              <tr>
+                <th class="webhooks__id">ID</th>
+                <th>Events</th>
+                <th>URL</th>
+                <th class="text-right">Options</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                class="webhook"
+              >
+                <td>
+                  stuff
+                </td>
+                <td class="webhook__events">
+                  other
+                </td>
+                <td>
+                  more
+                </td>
+                <td class="flex justify-end">
+                  <ChecOptionsMenu :open="true">
+                    <BaseOption @option-selected="action">
+                      Edit record
+                    </BaseOption>
+                    <BaseOption @option-selected="action">
+                      Check for changes
+                    </BaseOption>
+                    <BaseOption class="text-red-600" @option-selected="confirm('Are you sure?')">
+                      Delete record
+                    </BaseOption>
+                    <BaseOption :option="{ disabled: true }">
+                      Disabled action
+                    </BaseOption>
+                  </ChecOptionsMenu>
+                </td>
+              </tr>
+            </tbody>
+          </table>
           <ChecOptionsMenu :open="true">
             <BaseOption @option-selected="action">
               Edit record
@@ -45,7 +86,6 @@ import ChecOptionsMenu from '../../components/ChecOptionsMenu.vue';
               Disabled action
             </BaseOption>
           </ChecOptionsMenu>
-         </div>
         </div>
       </div>`
     }}

yarn.lock

@@ -1170,6 +1170,11 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
+"@popperjs/core@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.1.1.tgz#12c572ab88ef7345b43f21883fca26631c223085"
+  integrity sha512-sLqWxCzC5/QHLhziXSCAksBxHfOnQlhPRVgPK0egEw+ktWvG75T2k+aYWVjVh9+WKeT3tlG3ZNbZQvZLmfuOIw==
+
 "@reach/router@^1.2.1":
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.3.3.tgz#58162860dce6c9449d49be86b0561b5ef46d80db"