feat(vue-dropdown): add align-y-menu property

vuesion · Aug 11, 2021 · fa9809d · fa9809d
1 parent cb18815
commit fa9809d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 4 deletions.
diff --git a/src/components/input-and-actions/VueDropdown/VueDropdown.spec.ts b/src/components/input-and-actions/VueDropdown/VueDropdown.spec.ts
@@ -96,13 +96,14 @@ describe('VueDropdown.vue', () => {
   test('renders component with different menu alignment', async () => {
     const { getByText, getByTestId, updateProps } = harness;
 
-    await updateProps({ alignMenu: 'right' });
+    await updateProps({ alignMenu: 'right', alignYMenu: 'top' });
 
     getByText('Dropdown');
 
     await fireEvent.click(getByText('Dropdown'));
     const menu = getByTestId('menu');
 
     expect(menu.classList.contains('right')).toBeTruthy();
+    expect(menu.classList.contains('top')).toBeTruthy();
   });
 });
diff --git a/src/components/input-and-actions/VueDropdown/VueDropdown.stories.ts b/src/components/input-and-actions/VueDropdown/VueDropdown.stories.ts
@@ -13,7 +13,7 @@ story.add(
   'Default',
   () => ({
     components: { VueDropdown, ComponentDocs, VueStack, VueInline, VueSelect },
-    data(): { items: Array<IItem>; alignMenu: IItem; size: IItem } {
+    data(): { items: Array<IItem>; alignMenu: IItem; alignYMenu: IItem; size: IItem } {
       return {
         items: [
           { label: 'Save', value: 'save', leadingIcon: 'save' },
@@ -22,6 +22,7 @@ story.add(
           { label: 'Delete', value: 'delete', leadingIcon: 'trash' },
         ],
         alignMenu: { label: 'Left', value: 'left' },
+        alignYMenu: { label: 'Bottom', value: 'bottom' },
         size: { label: 'Medium', value: 'md' },
       };
     },
@@ -38,12 +39,23 @@ story.add(
               { label: 'Center', value: 'center' },
               { label: 'Right', value: 'right' },
               ]"
-          label="Align menu"
+          label="Align menu horizontally"
           name="alignMenu"
           id="alignMenu"
           hide-description
           v-model="alignMenu"
         />
+        <vue-select
+          :items="[
+              { label: 'Top', value: 'top' },
+              { label: 'Bottom', value: 'bottom' },
+              ]"
+          label="Align menu vertically"
+          name="alignYMenu"
+          id="alignYMenu"
+          hide-description
+          v-model="alignYMenu"
+        />
         <vue-select
           :items="[
               { label: 'Small', value: 'sm' },
@@ -62,6 +74,7 @@ story.add(
           button-text="Dropdown Button"
           :items="items"
           :align-menu="alignMenu.value"
+          :align-y-menu="alignYMenu.value"
           :size="size.value"
           @click="onClick"
           @item-click="onItemClick" />

diff --git a/src/components/input-and-actions/VueDropdown/VueDropdown.vue b/src/components/input-and-actions/VueDropdown/VueDropdown.vue
@@ -12,7 +12,7 @@
       <vue-menu
         ref="menuRef"
         :items="items"
-        :class="[$style.menu, $style[alignMenu], $style[size]]"
+        :class="[$style.menu, $style[alignMenu], $style[alignYMenu], $style[size]]"
         @click="onItemClick"
       />
     </vue-collapse>
@@ -37,6 +37,7 @@ export default defineComponent({
     items: { type: Array as new () => IItem[], required: true },
     duration: { type: Number, default: 250 },
     alignMenu: { type: String, validator: horizontalAlignmentValidator, default: 'left' },
+    alignYMenu: { type: String, validator: (value: string) => ['top', 'bottom'].includes(value), default: 'bottom' },
     size: { type: String, validator: shirtSizeValidator, default: 'md' },
   },
   setup(_, { emit }) {
@@ -122,6 +123,15 @@ export default defineComponent({
     &.right {
       right: 0;
     }
+
+    &.top {
+      top: -$dropdown-button-menu-gap;
+      transform: translateY(-100%);
+
+      &.center {
+        transform: translate(-50%, -100%);
+      }
+    }
   }
 }
 </style>