feat(Dropdown): add new DropdownBtn component

gitsindonesia · Jun 14, 2023 · 39b156d · 39b156d
1 parent ca56b1a
commit 39b156d
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 8 deletions.
diff --git a/packages/dropdown/src/Dropdown.stories.ts b/packages/dropdown/src/Dropdown.stories.ts
@@ -4,6 +4,7 @@ import DropdownItem from './DropdownItem.vue';
 import DropdownButton from './DropdownButton.vue';
 import type {DropdownItemProps} from './types';
 import Button from '@morpheme/button';
+import DropdownBtn from './DropdownBtn.vue';
 
 const genItems = (length = 5): DropdownItemProps[] =>
   Array.from({length}, (_, v) => ({
@@ -96,7 +97,7 @@ export const Slots: Story = (args, {argTypes}) => ({
 });
 
 export const CustomActivator: Story = (args, {argTypes}) => ({
-  components: {Dropdown, DropdownItem, DropdownButton},
+  components: {Dropdown, DropdownItem, DropdownButton, DropdownBtn},
   setup() {
     return {args, argTypes, Button};
   },
@@ -109,6 +110,20 @@ export const CustomActivator: Story = (args, {argTypes}) => ({
           </DropdownButton>
         </template>
 
+        <DropdownItem text="Calendar" icon="mdi:calendar"/>
+        <DropdownItem text="Files" icon="mdi:document" />
+        <DropdownItem divider/>
+        <DropdownItem text="Timer" icon="mdi:clock"/>
+      </Dropdown>
+    </div>
+    <div class="flex justify-center mt-20">
+      <Dropdown v-bind="args" top top-class="bottom-12">
+        <template #activator>
+          <DropdownBtn color="success" outlined>
+            Custom Button
+          </DropdownBtn>
+        </template>
+
         <DropdownItem text="Calendar" icon="mdi:calendar"/>
         <DropdownItem text="Files" icon="mdi:document" />
         <DropdownItem divider/>

diff --git a/packages/dropdown/src/DropdownBtn.vue b/packages/dropdown/src/DropdownBtn.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { MenuButton } from "@headlessui/vue";
+import { VBtn } from "@morpheme/button";
+</script>
+
+<template>
+  <MenuButton v-slot="props" :as="VBtn">
+    <slot v-bind="props" />
+  </MenuButton>
+</template>
diff --git a/packages/dropdown/src/index.ts b/packages/dropdown/src/index.ts
@@ -1,7 +1,8 @@
-import './Dropdown.dark.scss';
-
-export {default} from './Dropdown.vue';
-export {default as Dropdown} from './Dropdown.vue';
-export {default as DropdownItem} from './DropdownItem.vue';
-export {default as DropdownButton} from './DropdownButton.vue';
-export * from './types';
+import './Dropdown.dark.scss';
+
+export {default} from './Dropdown.vue';
+export {default as Dropdown} from './Dropdown.vue';
+export {default as DropdownItem} from './DropdownItem.vue';
+export {default as DropdownButton} from './DropdownButton.vue';
+export {default as DropdownBtn} from './DropdownBtn.vue';
+export * from './types';