115 lines
3.3 KiB
JavaScript
115 lines
3.3 KiB
JavaScript
export default {
|
|
root: {
|
|
class: 'relative'
|
|
},
|
|
menu: {
|
|
class: 'p-0 m-0 list-none flex justify-center'
|
|
},
|
|
menuitem: {
|
|
class: [
|
|
// Flexbox and Position
|
|
'relative',
|
|
'flex',
|
|
'justify-center'
|
|
]
|
|
},
|
|
action: ({ props, context, state }) => ({
|
|
class: [
|
|
// Flexbox
|
|
'inline-flex items-start relative',
|
|
'flex-col',
|
|
|
|
// Transitions and Shape
|
|
'transition-shadow',
|
|
'rounded-md',
|
|
|
|
// Spacing
|
|
{ 'pr-4 min-[576px]:pr-32 md:pr-40': props.model.length !== context.index + 1 },
|
|
|
|
// Colors
|
|
'bg-surface-0',
|
|
'dark:bg-transparent',
|
|
|
|
// Misc
|
|
{ 'cursor-pointer': !props.readonly },
|
|
|
|
// After
|
|
'after:border-t-2',
|
|
{ 'after:border-surface-200 after:dark:border-surface-700': state.d_activeStep <= context.index },
|
|
{ 'after:border-primary-500 after:dark:border-primary-400': state.d_activeStep > context.index },
|
|
'after:w-full',
|
|
'after:absolute',
|
|
'after:top-1/2',
|
|
'after:left-0',
|
|
'after:transform',
|
|
'after:-mt-3',
|
|
{ 'after:hidden': props.model.length == context.index + 1 }
|
|
]
|
|
}),
|
|
step: ({ context, props, state }) => ({
|
|
class: [
|
|
// Flexbox
|
|
'flex items-center justify-center',
|
|
|
|
// Position
|
|
'z-40',
|
|
|
|
// Shape
|
|
'rounded-full',
|
|
'border-2',
|
|
|
|
// Size
|
|
'w-[2rem]',
|
|
'h-[2rem]',
|
|
'text-sm',
|
|
'leading-[2rem]',
|
|
|
|
// Colors
|
|
{
|
|
'text-surface-400 dark:text-white/60': !context.active && state.d_activeStep < context.index,
|
|
'border-surface-100 dark:border-surface-700': !context.active && state.d_activeStep < context.index,
|
|
'bg-surface-0 dark:bg-surface-800': state.d_activeStep <= context.index
|
|
},
|
|
{
|
|
'border-primary-500 dark:border-primary-400': context.active,
|
|
'text-primary-500 dark:text-primary-400': context.active
|
|
},
|
|
{
|
|
'bg-primary-500 dark:bg-primary-400': state.d_activeStep > context.index,
|
|
'text-surface-0 dark:text-surface-900': state.d_activeStep > context.index,
|
|
'border-primary-500 dark:border-primary-400': state.d_activeStep > context.index
|
|
},
|
|
|
|
// States
|
|
{
|
|
'hover:border-surface-300 dark:hover:border-surface-500': !context.active && !props.readonly
|
|
},
|
|
|
|
// Transition
|
|
'transition-colors duration-200 ease-in-out'
|
|
]
|
|
}),
|
|
label: ({ context }) => ({
|
|
class: [
|
|
'relative',
|
|
// Font
|
|
'text-sm leading-none',
|
|
{ 'font-medium': context.active },
|
|
|
|
// Display
|
|
'block',
|
|
|
|
// Spacing
|
|
'mt-2',
|
|
|
|
// Colors
|
|
{ 'text-surface-400 dark:text-white/60': !context.active, 'text-surface-800 dark:text-white/80': context.active },
|
|
|
|
// Text and Overflow
|
|
'whitespace-nowrap',
|
|
'overflow-ellipsis',
|
|
'max-w-full'
|
|
]
|
|
})
|
|
};
|