feat(Dropdown): add support for item disabled state

gitsindonesia · Aug 3, 2023 · 62ad043 · 62ad043
1 parent e0c2846
commit 62ad043
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 23 deletions.
diff --git a/packages/dropdown/src/Dropdown.stories.ts b/packages/dropdown/src/Dropdown.stories.ts
@@ -6,13 +6,23 @@ import type {DropdownItemProps} from './types';
 import Button from '@morpheme/button';
 import DropdownBtn from './DropdownBtn.vue';
 
-const genItems = (length = 5): DropdownItemProps[] =>
-  Array.from({length}, (_, v) => ({
-    text: `Item ${v + 1}`,
-    icon: 'ri:home-line',
-  }));
-
-const items = [...genItems(2), {divider: true}, ...genItems(3)];
+const items = [
+  {
+    text: 'View',
+    icon: 'ic:round-visibility',
+  },
+  {
+    text: 'Edit',
+    icon: 'ic:round-edit',
+  },
+  {
+    divider: true,
+  },
+  {
+    text: 'Delete',
+    icon: 'ic:round-delete',
+  },
+];
 
 export default {
   title: 'Components/Dropdown',
@@ -54,6 +64,41 @@ PrefixIcon.args = {
   label: 'Account',
 };
 
+export const Disabled = Template.bind({});
+Disabled.args = {
+  items: [
+    {
+      text: 'Default',
+    },
+    {
+      text: 'Disabled',
+      disabled: true,
+    },
+    {
+      text: 'RouterLink',
+      to: '/home',
+      disabled: true,
+    },
+    {
+      text: 'NuxtLink',
+      to: '/nuxt',
+      nuxt: true,
+      disabled: true,
+    },
+    {
+      text: 'Go to Google',
+      href: 'https://google.com',
+      disabled: true,
+    },
+    {
+      text: 'Go to Google (New Tab)',
+      href: 'https://google.com',
+      disabled: true,
+      newTab: true,
+    },
+  ],
+};
+
 export const RouterLink = Template.bind({});
 RouterLink.args = {
   items: [
@@ -150,13 +195,17 @@ export const CustomActivator: Story = (args, {argTypes}) => ({
 });
 
 export const DarkMode: Story<{}> = (args) => ({
-  components: {Dropdown},
+  components: {Dropdown, DropdownItem},
   setup() {
     return {args};
   },
   template: `
 <main class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6 space-y-2">
-  <Dropdown v-bind="args"/>
+  <Dropdown v-bind="args">
+    <template #append>
+      <DropdownItem disabled>Disabled</DropdownItem>
+    </template>
+  </Dropdown>
 </main>
 `,
 });

diff --git a/packages/dropdown/src/Dropdown.vue b/packages/dropdown/src/Dropdown.vue
@@ -66,6 +66,8 @@ defineSlots<{
   default?: (props: {}) => any;
   activator?: (props: {btnProps: Record<string, any>; label: string}) => any;
   item?: (props: DropdownItemProps) => any;
+  prepend?: (props: {}) => any;
+  append?: (props: {}) => any;
 }>();
 </script>
 
@@ -118,9 +120,11 @@ defineSlots<{
           panelClass,
         ]"
       >
+        <slot name="prepend" />
         <slot>
           <DropdownItem v-for="item in items" :key="item.text" v-bind="item" />
         </slot>
+        <slot name="append" />
       </MenuItems>
     </Float>
   </Menu>

diff --git a/packages/dropdown/src/DropdownItem.vue b/packages/dropdown/src/DropdownItem.vue
@@ -43,10 +43,10 @@ const attributes = computed(() => {
   }
 
   if (props.href) {
-    attrs['href'] = props.href;
+    attrs['href'] = props.disabled ? 'javascript:void(0)' : props.href;
   }
 
-  if (props.newTab) {
+  if (props.newTab && !props.disabled) {
     attrs['rel'] = 'noopener';
     attrs['target'] = '_blank';
   }
@@ -57,24 +57,14 @@ const attributes = computed(() => {
   };
 });
 
-// const attributes = computed(() => {
-//   return {
-//     to: props.to ?? undefined,
-//     href: props.href ?? undefined,
-//     target: props.href && props.newTab ? '_blank' : undefined,
-//     rel: props.href && props.newTab ? 'noopener' : undefined,
-//     ...useAttrs(),
-//   };
-// });
-
 defineSlots<{
   default?: (props: {}) => any;
   icon?: (props: {}) => any;
 }>();
 </script>
 
 <template>
-  <MenuItem v-slot="{active}">
+  <MenuItem v-slot="{active}" :disabled="disabled">
     <div v-if="divider" class="dropdown-divider"></div>
     <component
       v-else
@@ -83,6 +73,7 @@ defineSlots<{
         'group dropdown-item',
         {
           'dropdown-item--active': active,
+          'dropdown-item--disabled': disabled,
         },
       ]"
       v-bind="attributes"

diff --git a/packages/themes/src/morpheme/_dropdown.dark.scss b/packages/themes/src/morpheme/_dropdown.dark.scss
@@ -26,5 +26,8 @@
     // button activator
     --dropdown-button-activator-border-color: var(--color-gray-true-700);
     --dropdown-button-activator-color: var(--color-gray-true-300);
+
+    // disabled
+    --dropdown-item-disabled-color: var(--color-gray-true-600);
   }
 }
diff --git a/packages/themes/src/morpheme/_dropdown.scss b/packages/themes/src/morpheme/_dropdown.scss
@@ -54,6 +54,9 @@
   --dropdown-button-activator-font-size: var(--size-font-sm);
   --dropdown-button-activator-font-weight: var(--font-weight-semibold);
   --dropdown-button-activator-line-height: 20px;
+
+  // disabled
+  --dropdown-item-disabled-color: var(--color-gray-400);
 }
 
 .dropdown {
@@ -121,7 +124,7 @@
     font-weight: var(--dropdown-item-font-weight);
     line-height: var(--dropdown-item-line-height);
 
-    &--active {
+    &--active:not(:disabled) {
       --dropdown-item-color: var(--dropdown-item-active-color);
       --dropdown-item-bg-color: var(--dropdown-item-active-bg-color);
     }
@@ -131,6 +134,13 @@
       height: var(--dropdown-item-icon-height) !important;
       color: var(--dropdown-item-icon-color);
     }
+
+    &--disabled,
+    :disabled,
+    [aria-disabled='true'] {
+      cursor: not-allowed;
+      --dropdown-item-color: var(--dropdown-item-disabled-color);
+    }
   }
 
   &-button-icon {