Skip to content

Commit

Permalink
docs(components): [select-v2] use new display tag
Browse files Browse the repository at this point in the history
  • Loading branch information
@wzc520pyfm
wzc520pyfm committed Jan 11, 2024
1 parent be2ac9b commit 436beb9
Show file tree
Hide file tree
Showing 2 changed files with 146 additions and 24 deletions.
34 changes: 18 additions & 16 deletions docs/en-US/component/select-v2.md
View file
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
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

0 comments on commit 436beb9

Please sign in to comment.