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:
Khafid Prayoga
2025-09-12 14:39:52 +07:00
parent 865bbbdce9
commit 41d87623e2
@@ -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,
)" )"