fix(Dropdown): better dynamic attributes for VDropdownItem

gitsindonesia · Aug 2, 2023 · d1f1a80 · d1f1a80
1 parent 07c6790
commit d1f1a80
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 6 deletions.
diff --git a/packages/dropdown/src/Dropdown.stories.ts b/packages/dropdown/src/Dropdown.stories.ts
@@ -58,9 +58,25 @@ export const RouterLink = Template.bind({});
 RouterLink.args = {
   items: [
     {
-      text: 'Link 1',
+      text: 'Home',
       to: '/home',
     },
+    {
+      text: 'Profile',
+      to: '/profile',
+    },
+    {
+      text: 'Settings',
+      to: '/settings',
+    },
+    {
+      divider: true,
+    },
+    {
+      text: 'Go to Google',
+      href: 'https://google.com',
+      newTab: true,
+    },
   ],
 };
 
@@ -179,4 +195,4 @@ export const FloatingUI: Story = (args, {argTypes}) => ({
 });
 FloatingUI.parameters = {
   layout: 'centered',
-};
+};
diff --git a/packages/dropdown/src/DropdownItem.vue b/packages/dropdown/src/DropdownItem.vue
@@ -14,6 +14,7 @@ const props = withDefaults(
     newTab?: boolean;
     divider?: boolean;
     nuxt?: boolean;
+    disabled?: boolean;
   }>(),
   {
     iconClass: '',
@@ -30,15 +31,42 @@ const computedComponent = computed(() => {
 });
 
 const attributes = computed(() => {
+  let attrs: Record<string, any> = {};
+
+  if (props.disabled) {
+    attrs['aria-disabled'] = true;
+    attrs['disabled'] = true;
+  }
+
+  if (props.to) {
+    attrs['to'] = props.to;
+  }
+
+  if (props.href) {
+    attrs['href'] = props.href;
+  }
+
+  if (props.newTab) {
+    attrs['rel'] = 'noopener';
+    attrs['target'] = '_blank';
+  }
+
   return {
-    to: props.to ?? undefined,
-    href: props.href ?? undefined,
-    target: props.href && props.newTab ? '_blank' : undefined,
-    rel: props.href && props.newTab ? 'noopener' : undefined,
+    ...attrs,
     ...useAttrs(),
   };
 });
 
+// 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;