Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(components): [select-v2] use new display tag #15329

Merged
merged 1 commit into from
Jan 12, 2024
Merged

docs(components): [select-v2] use new display tag #15329

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 18 additions & 16 deletions docs/en-US/component/select-v2.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,9 @@ select-v2/custom-tag

:::

## SelectV2 Attributes
## API

### Attributes

| Name | Description | Type | Default |
|-------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------|
Expand All @@ -177,7 +179,7 @@ select-v2/custom-tag
| multiple | is multiple | ^[boolean] | false |
| disabled | is disabled | ^[boolean] | false |
| value-key | unique identity key name for value, required when value is an object | ^[string] | value |
| size | size of component | ^[enum]`'' \| 'large' \| 'default' \| 'small'` | — |
| size | size of component | ^[enum]`'' \| 'large' \| 'default' \| 'small'` | '' |
| clearable | whether select can be cleared | ^[boolean] | false |
| clear-icon | custom clear icon | ^[string] / ^[object]`Component` | CircleClose |
| collapse-tags | whether to collapse tags to a text when multiple selecting | ^[boolean] | false |
Expand All @@ -194,7 +196,7 @@ select-v2/custom-tag
| reserve-keyword | whether reserve the keyword after select filtered option. | ^[boolean] | true |
| no-match-text | displayed text when no data matches the filtering query, you can also use slot `empty`, default is 'No matching data' | ^[string] | — |
| no-data-text | displayed text when there is no options, you can also use slot empty | ^[string] | No Data |
| popper-class | custom class name for Select's dropdown | ^[string] | — |
| popper-class | custom class name for Select's dropdown | ^[string] | '' |
| popper-append-to-body ^(deprecated) | whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | ^[boolean] | false |
| teleported | whether select dropdown is teleported to the body | ^[boolean] | true |
| persistent | when select dropdown is inactive and `persistent` is `false`, select dropdown will be destroyed | ^[boolean] | true |
Expand All @@ -204,15 +206,15 @@ select-v2/custom-tag
| item-height | The height of the dropdown item | ^[number] | 34 |
| scrollbar-always-on | Controls whether the scrollbar is always displayed | ^[boolean] | false |
| remote | whether search data from server | ^[boolean] | false |
| remote-method | function that gets called when the input value changes. Its parameter is the current input value. To use this, `filterable` must be true | ^[Function]`() => void` | — |
| remote-method | function that gets called when the input value changes. Its parameter is the current input value. To use this, `filterable` must be true | ^[Function]`(keyword: string) => void` | — |
| validate-event | whether to trigger form validation | ^[boolean] | true |
| placement | position of dropdown | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | bottom-start |
| collapse-tags-tooltip ^(2.3.0) | whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true | ^[boolean] | false |
| max-collapse-tags ^(2.3.0) | The max tags number to be shown. To use this, `collapse-tags` must be true | ^[number] | 1 |
| tag-type ^(2.5.0) | tag type | ^[enum]`'' \| 'success' \| 'info' \| 'warning' \| 'danger'` | info |
| aria-label ^(a11y) ^(2.5.0) | same as `aria-label` in native input | ^[string] | — |

## props
### props

| Attribute | Description | Type | Default |
|-----------|-----------------------------------------------------------------|-----------|----------|
Expand All @@ -221,18 +223,18 @@ select-v2/custom-tag
| options | specify which key of node object is used as the node's children | ^[string] | options |
| disabled | specify which key of node object is used as the node's disabled | ^[string] | disabled |

## SelectV2 Events
### Events

| Name | Description | Params |
|----------------|---------------------------------------------------------------|------------------------------------------|
| change | triggers when the selected value changes | ^[Function]`(value: any) => void` |
| visible-change | triggers when the dropdown appears/disappears | ^[Function]`(visible: boolean) => void` |
| remove-tag | triggers when a tag is removed in multiple mode | ^[Function]`(tagValue: any) => void` |
| clear | triggers when the clear icon is clicked in a clearable Select | ^[Function]`() => void` |
| blur | triggers when Input blurs | ^[Function]`(event: FocusEvent) => void` |
| focus | triggers when Input focuses | ^[Function]`(event: FocusEvent) => void` |
| Name | Description | Type |
| -------------- | ---------------------------------------------------------------------------------------------------------- | ---------------------------------------- |
| change | triggers when the selected value changes, the param is current selected value | ^[Function]`(val: any) => void` |
| visible-change | triggers when the dropdown appears/disappears, the param will be true when it appears, and false otherwise | ^[Function]`(visible: boolean) => void` |
| remove-tag | triggers when a tag is removed in multiple mode, the param is removed tag value | ^[Function]`(tagValue: any) => void` |
| clear | triggers when the clear icon is clicked in a clearable Select | ^[Function]`() => void` |
| blur | triggers when Input blurs | ^[Function]`(event: FocusEvent) => void` |
| focus | triggers when Input focuses | ^[Function]`(event: FocusEvent) => void` |

## SelectV2 Slots
### Slots

| Name | Description |
|--------------|-------------------------------|
Expand All @@ -241,7 +243,7 @@ select-v2/custom-tag
| prefix | prefix content of input |
| tag ^(2.5.0) | content as Select tag |

### SelectV2 Exposes
### Exposes

| Method | Description | Type |
|--------|-------------------------------------------------|-------------------------|
Expand Down
136 changes: 128 additions & 8 deletions packages/components/select-v2/src/defaults.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,111 +11,231 @@ import type { Props } from './useProps'
import type { Options, Placement } from '@element-plus/components/popper'

export const SelectProps = buildProps({
/**
* @description whether creating new items is allowed. To use this, `filterable` must be true
*/
allowCreate: Boolean,
/**
* @description autocomplete of select input
*/
autocomplete: {
type: definePropType<'none' | 'both' | 'list' | 'inline'>(String),
default: 'none',
},
/**
* @description for non-filterable Select, this prop decides if the option menu pops up when the input is focused
*/
automaticDropdown: Boolean,
/**
* @description whether select can be cleared
*/
clearable: Boolean,
/**
* @description custom clear icon
*/
clearIcon: {
type: iconPropType,
default: CircleClose,
},
/**
* @description tooltip theme, built-in theme: `dark` / `light`
*/
effect: {
type: definePropType<'light' | 'dark' | string>(String),
default: 'light',
},
/**
* @description whether to collapse tags to a text when multiple selecting
*/
collapseTags: Boolean,
collapseTagsTooltip: {
type: Boolean,
default: false,
},
/**
* @description whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true
*/
collapseTagsTooltip: Boolean,
/**
* @description The max tags number to be shown. To use this, `collapse-tags` must be true
*/
maxCollapseTags: {
type: Number,
default: 1,
},
/**
* @description
*/
defaultFirstOption: Boolean,
/**
* @description is disabled
*/
disabled: Boolean,
/**
* @description
*/
estimatedOptionHeight: {
type: Number,
default: undefined,
},
/**
* @description is filterable
*/
filterable: Boolean,
/**
* @description
*/
filterMethod: Function,
/**
* @description The height of the dropdown panel, 34px for each item
*/
height: {
type: Number,
default: 274, // same as select dropdown menu
},
/**
* @description The height of the dropdown item
*/
itemHeight: {
type: Number,
default: 34,
},
/**
* @description
*/
id: String,
/**
* @description whether Select is loading data from server
*/
loading: Boolean,
/**
* @description displayed text while loading data from server, default is 'Loading'
*/
loadingText: String,
/**
* @description biding value
*/
modelValue: {
type: definePropType<
any[] | string | number | boolean | Record<string, any> | any
>([Array, String, Number, Boolean, Object]),
},
/**
* @description is multiple
*/
multiple: Boolean,
/**
* @description maximum number of options user can select when multiple is true. No limit when set to 0
*/
multipleLimit: {
type: Number,
default: 0,
},
/**
* @description the name attribute of select input
*/
name: String,
/**
* @description displayed text when there is no options, you can also use slot empty, the default is 'No Data'
*/
noDataText: String,
/**
* @description displayed text when no data matches the filtering query, you can also use slot `empty`, default is 'No matching data'
*/
noMatchText: String,
/**
* @description function that gets called when the input value changes. Its parameter is the current input value. To use this, `filterable` must be true
*/
remoteMethod: Function,
/**
* @description whether reserve the keyword after select filtered option.
*/
reserveKeyword: {
type: Boolean,
default: true,
},
/**
* @description data of the options, the key of `value` and `label` can be customize by `props`
*/
options: {
type: definePropType<OptionType[]>(Array),
required: true,
},
/**
* @description placeholder, the default is 'Please select'
*/
placeholder: {
type: String,
},
/**
* @description whether select dropdown is teleported to the body
*/
teleported: useTooltipContentProps.teleported,
/**
* @description when select dropdown is inactive and `persistent` is `false`, select dropdown will be destroyed
*/
persistent: {
type: Boolean,
default: true,
},
/**
* @description custom class name for Select's dropdown
*/
popperClass: {
type: String,
default: '',
},
/**
* @description [popper.js](https://popper.js.org/docs/v2/) parameters
*/
popperOptions: {
type: definePropType<Partial<Options>>(Object),
default: () => ({} as Partial<Options>),
},
/**
* @description whether search data from server
*/
remote: Boolean,
/**
* @description size of component
*/
size: useSizeProp,
/**
* @description configuration options, see the following table
*/
props: {
type: definePropType<Props>(Object),
default: () => defaultProps,
},
/**
* @description unique identity key name for value, required when value is an object
*/
valueKey: {
type: String,
default: 'value',
},
scrollbarAlwaysOn: {
type: Boolean,
default: false,
},
/**
* @description Controls whether the scrollbar is always displayed
*/
scrollbarAlwaysOn: Boolean,
/**
* @description whether to trigger form validation
*/
validateEvent: {
type: Boolean,
default: true,
},
/**
* @description position of dropdown
*/
placement: {
type: definePropType<Placement>(String),
values: placements,
default: 'bottom-start',
},
/**
* @description tag type
*/
tagType: { ...tagProps.type, default: 'info' },
/**
* @description same as `aria-label` in native input
*/
ariaLabel: {
type: String,
default: undefined,
Expand Down