make chec-options-menu root elemenet static to allow for popping out …

…of basepopover, remove redundant code expecting left position prop
chec · Mar 17, 2020 · 2f57106 · 2f57106
1 parent d186930
commit 2f57106
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 6 deletions.
diff --git a/src/components/ChecOptionsMenu.vue b/src/components/ChecOptionsMenu.vue
@@ -8,7 +8,6 @@
     <BasePopover
       v-if="isOpen"
       :class="{
-        'left-0': position === 'left',
         'mt-10': position === 'right',
         'right-0': position === 'right',
       }"
@@ -46,9 +45,9 @@ export default {
      */
     position: {
       type: String,
-      default: 'left',
+      default: '',
       validate(position) {
-        return ['left', 'right'].includes(position);
+        return ['right'].includes(position);
       },
     },
   },
@@ -93,8 +92,7 @@ export default {
 </script>
 <style scoped lang="scss">
 .options-menu {
-  @apply relative;
-
+  @apply static;
   .button {
     @apply shadow-none bg-transparent;
   }

diff --git a/src/stories/components/ChecOptionsMenu.stories.mdx b/src/stories/components/ChecOptionsMenu.stories.mdx
@@ -31,6 +31,47 @@ 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">
+          <table>
+            <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="webhook__options">
+                  <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>`
     }}