arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(components): improve props

Browse Source
This commit is contained in:
Benjamin Canac
2024-06-28 18:13:03 +02:00
parent c9f9a248b7
commit 673064dee5
38 changed files with 260 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/runtime/components/InputMenu.vue
View File

@@ -20,14 +20,19 @@ export interface InputMenuItem extends Pick<ComboboxItemProps, 'disabled'> {
chip?: ChipProps
/**
* The item type.
* @defaultValue `'item'`
* @defaultValue 'item'
*/
type?: 'label' | 'separator' | 'item'
}
type InputMenuVariants = VariantProps<typeof inputMenu>
export interface InputMenuProps<T> extends Omit<ComboboxRootProps<T>, 'asChild' | 'dir' | 'filterFunction' | 'displayValue'>, UseComponentIconsProps {
export interface InputMenuProps<T> extends Pick<ComboboxRootProps<T>, 'modelValue' | 'defaultValue' | 'open' | 'defaultOpen' | 'searchTerm' | 'multiple' | 'disabled' | 'name' | 'resetSearchTermOnBlur'>, UseComponentIconsProps {
/**
* The element or component this component should render as.
* @defaultValue 'div'
*/
as?: any
id?: string
type?: InputHTMLAttributes['type']
/** The placeholder text when the input is empty. */
@@ -40,39 +45,39 @@ export interface InputMenuProps<T> extends Omit<ComboboxRootProps<T>, 'asChild'
autofocusDelay?: number
/**
* The icon displayed to open the menu.
* @defaultValue `appConfig.ui.icons.chevronDown`
* @defaultValue appConfig.ui.icons.chevronDown
*/
trailingIcon?: string
/**
* The icon displayed when an item is selected.
* @defaultValue `appConfig.ui.icons.check`
* @defaultValue appConfig.ui.icons.check
*/
selectedIcon?: string
/**
* The icon displayed to delete a tag.
* Works only when `multiple` is `true`.
* @defaultValue `appConfig.ui.icons.close`
* @defaultValue appConfig.ui.icons.close
*/
deleteIcon?: string
/**
* The content of the menu.
* @defaultValue `{ side: 'bottom', sideOffset: 8, position: 'popper' }`
* @defaultValue { side: 'bottom', sideOffset: 8, position: 'popper' }
*/
content?: Omit<ComboboxContentProps, 'as' | 'asChild' | 'forceMount'>
/**
* Display an arrow alongside the menu.
* @defaultValue `false`
* @defaultValue false
*/
arrow?: boolean | Omit<ComboboxArrowProps, 'as' | 'asChild'>
/**
* Render the menu in a portal.
* @defaultValue `true`
* @defaultValue true
*/
portal?: boolean
/**
* Whether to filter items or not, can be an array of fields to filter.
* When `false`, items will not be filtered which is useful for custom filtering.
* @defaultValue `['label']`
* @defaultValue ['label']
*/
filter?: boolean | string[]
items?: T[] | T[][]
@@ -120,7 +125,7 @@ const slots = defineSlots<InputMenuSlots<T>>()
const searchTerm = defineModel<string>('searchTerm', { default: '' })
const appConfig = useAppConfig()
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'multiple'), emits)
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur'), emits)
const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as ComboboxContentProps)
const { emitFormBlur, emitFormChange, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)