Skip to content

Commit

Permalink
feat: add button customization to dropdown component (#13)
Browse files Browse the repository at this point in the history
  • Loading branch information
driss-chelouati committed Jun 5, 2023
1 parent 0081cba commit 8b079d3
Showing 1 changed file with 24 additions and 4 deletions.
28 changes: 24 additions & 4 deletions components/base/BaseDropdown.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,20 @@ const props = withDefaults(
*/
flavor?: 'button' | 'context' | 'text'
/**
* The color of the button.
*/
buttonColor?:
| 'default'
| 'primary'
| 'info'
| 'success'
| 'warning'
| 'danger'
| 'light'
| 'muted'
| 'none'
/**
* The shape of the dropdown.
*/
Expand Down Expand Up @@ -35,6 +49,7 @@ const props = withDefaults(
}>(),
{
flavor: 'button',
buttonColor: 'default',
shape: undefined,
orientation: 'start',
label: '',
Expand Down Expand Up @@ -62,7 +77,7 @@ const shape = computed(
<div>
<BaseButton
v-if="props.flavor === 'button'"
color="default"
:color="props.buttonColor"
:shape="shape"
class="!pe-3 !ps-4"
>
Expand All @@ -71,8 +86,13 @@ const shape = computed(
</slot>
<Icon
name="lucide:chevron-down"
class="text-muted-400 h-4 w-4 transition-transform duration-300"
:class="open && 'rotate-180'"
class="h-4 w-4 transition-transform duration-300"
:class="[
open && 'rotate-180',
props.buttonColor === 'default'
? 'text-muted-400'
: 'text-white',
]"
/>
</BaseButton>
<button
Expand Down Expand Up @@ -124,7 +144,7 @@ const shape = computed(
: 'end-0 origin-top-right',
shape === 'rounded' && 'rounded-md',
shape === 'curved' && 'rounded-xl',
shape === 'full' && 'rounded-full',
shape === 'full' && 'rounded-xl',
props.condensed ? 'w-56' : 'w-72',
]"
>
Expand Down

0 comments on commit 8b079d3

Please sign in to comment.