Refactor Select Component Variants and Styles for Improved Consistency
- 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.
This commit is contained in:
Bastian Masanek
@@ -113,10 +113,7 @@ const parseDateFromDisplay = (displayDate: string) => {
|
||||
>
|
||||
<SelectTrigger
|
||||
id="salutation"
|
||||
:class="cn(
|
||||
'bg-purple-dark border-white/20 text-white',
|
||||
getError('salutation') && 'border-red'
|
||||
)"
|
||||
:variant="getError('salutation') ? 'error' : 'default'"
|
||||
>
|
||||
<SelectValue placeholder="Bitte wählen" />
|
||||
</SelectTrigger>
|
||||
@@ -284,10 +281,7 @@ const parseDateFromDisplay = (displayDate: string) => {
|
||||
>
|
||||
<SelectTrigger
|
||||
id="countryCode"
|
||||
:class="cn(
|
||||
'bg-purple-dark border-white/20 text-white',
|
||||
getError('countryCode') && 'border-red'
|
||||
)"
|
||||
:variant="getError('countryCode') ? 'error' : 'default'"
|
||||
>
|
||||
<SelectValue placeholder="Bitte wählen" />
|
||||
</SelectTrigger>
|
||||
|
||||
@@ -147,7 +147,7 @@ function getError(field: string): string {
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium text-white">Anrede *</label>
|
||||
<Select v-model="form.salutation" :disabled="loading">
|
||||
<SelectTrigger :class="{ 'border-warning/50': hasError('salutation') }">
|
||||
<SelectTrigger :variant="hasError('salutation') ? 'error' : 'default'">
|
||||
<SelectValue placeholder="Bitte wählen" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@@ -272,7 +272,7 @@ function getError(field: string): string {
|
||||
<div class="space-y-2">
|
||||
<label for="countryCode" class="text-sm font-medium text-white">Land *</label>
|
||||
<Select v-model="form.countryCode" :disabled="loading">
|
||||
<SelectTrigger :class="{ 'border-warning/50': hasError('countryCode') }">
|
||||
<SelectTrigger :variant="hasError('countryCode') ? 'error' : 'default'">
|
||||
<SelectValue placeholder="Bitte wählen" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
|
||||
@@ -67,7 +67,7 @@ const areas: ProductArea[] = [
|
||||
},
|
||||
{
|
||||
id: 'labs',
|
||||
label: 'Labore',
|
||||
label: 'Kurse',
|
||||
icon: FlaskConical,
|
||||
enabled: false,
|
||||
visible: true,
|
||||
|
||||
@@ -24,7 +24,7 @@ const delegatedProps = computed(() => {
|
||||
v-bind="delegatedProps"
|
||||
:class="
|
||||
cn(
|
||||
'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
|
||||
'relative z-50 min-w-[8rem] overflow-hidden rounded-2xl border border-white/10 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-xl text-zinc-800 dark:text-zinc-100 shadow-glass data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
|
||||
props.position === 'popper' &&
|
||||
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
|
||||
props.class
|
||||
@@ -33,7 +33,7 @@ const delegatedProps = computed(() => {
|
||||
>
|
||||
<SelectViewport
|
||||
:class="
|
||||
cn('p-1', props.position === 'popper' && 'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)]')
|
||||
cn('p-2', props.position === 'popper' && 'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)]')
|
||||
"
|
||||
>
|
||||
<slot />
|
||||
|
||||
@@ -23,12 +23,12 @@ const delegatedProps = computed(() => {
|
||||
v-bind="delegatedProps"
|
||||
:class="
|
||||
cn(
|
||||
'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
||||
'relative flex w-full cursor-default select-none items-center rounded-xl gap-2 py-2.5 pl-8 pr-3 text-sm outline-none focus:outline-none focus-visible:outline-none transition-all duration-200 hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
||||
props.class
|
||||
)
|
||||
"
|
||||
>
|
||||
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<span class="absolute left-2 flex h-4 w-4 items-center justify-center">
|
||||
<SelectItemIndicator>
|
||||
<Check class="h-4 w-4" />
|
||||
</SelectItemIndicator>
|
||||
|
||||
@@ -3,16 +3,22 @@ import { type HTMLAttributes, computed } from 'vue'
|
||||
import { SelectTrigger as SelectTriggerPrimitive } from 'reka-ui'
|
||||
import { ChevronDown } from 'lucide-vue-next'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { selectTriggerVariants, type SelectTriggerVariants } from '.'
|
||||
|
||||
interface SelectTriggerProps {
|
||||
disabled?: boolean
|
||||
variant?: SelectTriggerVariants['variant']
|
||||
size?: SelectTriggerVariants['size']
|
||||
class?: HTMLAttributes['class']
|
||||
}
|
||||
|
||||
const props = defineProps<SelectTriggerProps>()
|
||||
const props = withDefaults(defineProps<SelectTriggerProps>(), {
|
||||
variant: 'default',
|
||||
size: 'default',
|
||||
})
|
||||
|
||||
const delegatedProps = computed(() => {
|
||||
const { class: _, ...delegated } = props
|
||||
const { class: _, variant: __, size: ___, ...delegated } = props
|
||||
return delegated
|
||||
})
|
||||
</script>
|
||||
@@ -22,7 +28,7 @@ const delegatedProps = computed(() => {
|
||||
v-bind="delegatedProps"
|
||||
:class="
|
||||
cn(
|
||||
'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
|
||||
selectTriggerVariants({ variant: props.variant, size: props.size }),
|
||||
props.class
|
||||
)
|
||||
"
|
||||
|
||||
@@ -1,5 +1,31 @@
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user