index.js•2.64 kB
export default {
root: ({ props }) => ({
class: [
// Positioning
'absolute z-1',
{
'left-0 bottom-0 w-full': props.position == 'bottom',
'left-0 top-0 w-full': props.position == 'top',
'left-0 top-0 h-full': props.position == 'left',
'right-0 top-0 h-full': props.position == 'right'
},
// Flexbox & Alignment
'flex justify-center items-center',
// Interactivity
'pointer-events-none'
]
}),
container: {
class: [
// Flexbox
'flex',
// Shape & Border
'rounded-md',
// Color
'bg-surface-0/10 dark:bg-surface-900/20 border border-surface-0/20',
'backdrop-blur-sm',
// Spacing
'p-2',
// Misc
'pointer-events-auto'
]
},
menu: ({ props }) => ({
class: [
// Flexbox & Alignment
'flex items-center justify-center',
{
'flex-col': props.position == 'left' || props.position == 'right'
},
// List Style
'm-0 p-0 list-none',
// Shape
'outline-none'
]
}),
menuitem: ({ props, context, instance }) => ({
class: [
// Spacing & Shape
'p-2 rounded-md',
// Conditional Scaling
{
'hover:scale-150': instance.currentIndex === context.index,
'scale-125': instance.currentIndex - 1 === context.index || instance.currentIndex + 1 === context.index,
'scale-110': instance.currentIndex - 2 === context.index || instance.currentIndex + 2 === context.index
},
// Positioning & Hover States
{
'origin-bottom hover:mx-6': props.position == 'bottom',
'origin-top hover:mx-6': props.position == 'top',
'origin-left hover:my-6': props.position == 'left',
'origin-right hover:my-6': props.position == 'right'
},
// Transitions & Transform
'transition-all duration-200 ease-cubic-bezier-will-change-transform transform'
]
}),
action: {
class: [
// Flexbox & Alignment
'flex flex-col items-center justify-center',
// Position
'relative',
// Size
'w-16 h-16',
// Misc
'cursor-default overflow-hidden'
]
}
};