feat(combobox): add disabled prop and improve styling
- Add disabled prop to combobox component to support disabled state - Update styling to include better focus states and border color
This commit is contained in:
@@ -15,6 +15,7 @@ const props = defineProps<{
|
|||||||
searchPlaceholder?: string
|
searchPlaceholder?: string
|
||||||
emptyMessage?: string
|
emptyMessage?: string
|
||||||
class?: string
|
class?: string
|
||||||
|
disabled?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
@@ -63,13 +64,14 @@ function onSelect(item: Item) {
|
|||||||
<PopoverTrigger as-child>
|
<PopoverTrigger as-child>
|
||||||
<Button
|
<Button
|
||||||
:id="props.id"
|
:id="props.id"
|
||||||
|
:disabled="props.disabled"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
role="combobox"
|
role="combobox"
|
||||||
:aria-expanded="open"
|
:aria-expanded="open"
|
||||||
:aria-controls="`${props.id}-list`"
|
:aria-controls="`${props.id}-list`"
|
||||||
:aria-describedby="`${props.id}-search`"
|
:aria-describedby="`${props.id}-search`"
|
||||||
:class="cn(
|
:class="cn(
|
||||||
'w-full justify-between border-black bg-white hover:bg-gray-50 text-sm font-normal',
|
'w-full justify-between border-1 border-gray-400 bg-white hover:bg-gray-50 text-sm font-normal focus:outline-none focus:ring-1 focus:ring-black',
|
||||||
!modelValue && 'text-muted-foreground',
|
!modelValue && 'text-muted-foreground',
|
||||||
props.class,
|
props.class,
|
||||||
)"
|
)"
|
||||||
|
|||||||
Reference in New Issue
Block a user