feat(Dropdown): support multi level dropdown

gitsindonesia · Aug 3, 2023 · 83e7cc3 · 83e7cc3
1 parent 7f47831
commit 83e7cc3
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 17 deletions.
diff --git a/packages/dropdown/src/Dropdown.stories.ts b/packages/dropdown/src/Dropdown.stories.ts
@@ -297,3 +297,52 @@ export const FloatingUI: Story = (args, {argTypes}) => ({
 FloatingUI.parameters = {
   layout: 'centered',
 };
+
+export const MultiLevel: Story = (args, {argTypes}) => ({
+  components: {Dropdown, DropdownItem, DropdownButton, DropdownHeader},
+  setup() {
+    return {args, argTypes, DropdownItem};
+  },
+  template: `
+    <Dropdown v-bind="args">
+      <DropdownHeader>Action</DropdownHeader>
+      <DropdownItem text="Calendar" icon="mdi:calendar"/>
+      <DropdownItem text="Files" icon="mdi:document" />
+      <DropdownItem divider/>
+      <Dropdown block placement="right-start" :offset="-4">
+        <template #activator>
+          <DropdownButton
+            :as="DropdownItem"
+            suffix-icon="heroicons:chevron-right"
+            text="Theme"
+          />
+        </template>
+        <DropdownItem text="System" />
+        <DropdownItem text="Light" />
+        <DropdownItem text="Dark" />
+      </Dropdown>
+      <Dropdown block placement="right-start" :offset="-4">
+        <template #activator>
+          <DropdownButton
+            :as="DropdownItem"
+            suffix-icon="heroicons:chevron-right"
+            text="More"
+          />
+        </template>
+        <DropdownItem text="Sub 1" />
+        <DropdownItem text="Sub 2" />
+        <Dropdown block placement="right-start" :offset="-4">
+          <template #activator>
+            <DropdownButton
+              :as="DropdownItem"
+              suffix-icon="heroicons:chevron-right"
+              text="More"
+            />
+          </template>
+          <DropdownItem text="Sub 1" />
+          <DropdownItem text="Sub 2" />
+        </Dropdown>
+      </Dropdown>
+    </Dropdown>
+  `,
+});
diff --git a/packages/dropdown/src/Dropdown.vue b/packages/dropdown/src/Dropdown.vue
@@ -34,6 +34,7 @@ export interface Props {
   offset?: number;
   shift?: boolean | number;
   flip?: boolean | number;
+  block?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
@@ -73,10 +74,9 @@ defineSlots<{
 </script>
 
 <template>
-  <Menu as="div" class="dropdown">
+  <Menu as="div" class="dropdown" :class="{'dropdown--block': block}">
     <Float
-      as="div"
-      class="relative"
+      as="template"
       floating-as="template"
       :placement="placement"
       :transition-name="transition"

diff --git a/packages/dropdown/src/DropdownItem.vue b/packages/dropdown/src/DropdownItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {MenuItem} from '@headlessui/vue';
-import {computed, resolveComponent, useAttrs} from 'vue';
+import {computed, resolveComponent} from 'vue';
 import VIcon from '@morpheme/icon';
 
 const props = withDefaults(
@@ -15,6 +15,9 @@ const props = withDefaults(
     divider?: boolean;
     nuxt?: boolean;
     disabled?: boolean;
+    suffixIcon?: string;
+    suffixIconSize?: string;
+    suffixIconClass?: string;
   }>(),
   {
     iconClass: '',
@@ -51,15 +54,13 @@ const attributes = computed(() => {
     attrs['target'] = '_blank';
   }
 
-  return {
-    ...attrs,
-    ...useAttrs(),
-  };
+  return attrs;
 });
 
 defineSlots<{
   default?: (props: {}) => any;
   icon?: (props: {}) => any;
+  suffixIcon?: (props: {}) => any;
 }>();
 </script>
 
@@ -79,21 +80,31 @@ defineSlots<{
       v-bind="attributes"
     >
       <slot name="icon">
-        <VIcon
-          v-if="typeof icon === 'string'"
+        <component
+          v-if="icon"
+          :is="typeof icon === 'string' ? VIcon : icon"
           :name="icon"
           :size="iconSize"
-          :class="iconClass"
-          class="dropdown-item-icon"
+          :class="['dropdown-item-icon', iconClass]"
         />
+      </slot>
+      <slot>
+        <div class="dropdown-item-content">
+          {{ text }}
+        </div>
+      </slot>
+      <slot name="suffixIcon">
         <component
-          v-else
-          :is="icon"
-          :class="iconClass"
-          class="dropdown-item-icon"
+          v-if="suffixIcon"
+          :is="typeof suffixIcon === 'string' ? VIcon : suffixIcon"
+          :name="suffixIcon"
+          :size="suffixIconSize"
+          :class="[
+            'dropdown-item-icon dropdown-item-icon--suffix',
+            suffixIconClass,
+          ]"
         />
       </slot>
-      <slot>{{ text }}</slot>
     </component>
   </MenuItem>
 </template>
diff --git a/packages/themes/src/morpheme/_dropdown.scss b/packages/themes/src/morpheme/_dropdown.scss
@@ -110,6 +110,14 @@
     margin-right: -4px;
   }
 
+  &--block {
+    width: 100%;
+  }
+
+  &-button-wrapper {
+    width: 100%;
+  }
+
   &-item {
     height: var(--dropdown-item-height);
     display: flex;
@@ -135,6 +143,11 @@
       color: var(--dropdown-item-icon-color);
     }
 
+    &-content {
+      flex-grow: 1;
+      text-align: left;
+    }
+
     &--disabled,
     :disabled,
     [aria-disabled='true'] {