68395951dc
- Updated SelectTrigger and SelectItem components to use variant props for error handling, enhancing visual feedback. - Refactored styles in SelectContent and SelectItem for better alignment and responsiveness. - Added new variant handling in the SelectTrigger component to streamline class management. - Updated styleguide.vue to include examples of the Select component with error and disabled states for better documentation.
32 lines
1.2 KiB
TypeScript
32 lines
1.2 KiB
TypeScript
import type { VariantProps } from 'class-variance-authority'
|
|
import { cva } from 'class-variance-authority'
|
|
|
|
export { default as Select } from './Select.vue'
|
|
export { default as SelectTrigger } from './SelectTrigger.vue'
|
|
export { default as SelectValue } from './SelectValue.vue'
|
|
export { default as SelectContent } from './SelectContent.vue'
|
|
export { default as SelectItem } from './SelectItem.vue'
|
|
|
|
export const selectTriggerVariants = cva(
|
|
'flex w-full items-center justify-between rounded-xl border border-white/20 bg-white/10 px-4 py-3 text-base text-white ring-offset-transparent placeholder:text-white/50 transition-all duration-300 hover:bg-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default: '',
|
|
error: 'border-warning/50 focus-visible:ring-warning/50',
|
|
},
|
|
size: {
|
|
default: 'h-12',
|
|
sm: 'h-10 text-sm px-3 py-2',
|
|
lg: 'h-14 text-lg px-5 py-4',
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'default',
|
|
size: 'default',
|
|
},
|
|
}
|
|
)
|
|
|
|
export type SelectTriggerVariants = VariantProps<typeof selectTriggerVariants>
|