Skip to content

Commit

Permalink
fix(docs): [autocomplete] [affix] (#10443)
Browse files Browse the repository at this point in the history 
* Replace jsx with customized API syntax

Co-authored-by: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
  • Loading branch information
@jw-foss
jw-foss and jw-foss committed Nov 5, 2022
1 parent 36c5aed commit 39faf4b
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 68 deletions.
28 changes: 14 additions & 14 deletions docs/en-US/component/affix.md
View file
Expand Up @@ -41,26 +41,26 @@ affix/fixed

### Affix Attributes

| Name | Description | Type | Default | Required |
| ---------- | -------------------------------- | ---------------------------------------- | ------- | -------- |
| `offset` | offset distance. | `number` | `0` | No |
| `position` | position of affix. | <EnumType :values="['top', 'bottom']" /> | `'top'` | No |
| `target` | target container. (CSS selector) | `string` | — | No |
| `z-index` | `z-index` of affix | `number` | `100` | No |
| Name | Description | Type | Default | Required |
| ---------- | -------------------------------- | -------------------------- | ------- | -------- |
| `offset` | offset distance. | ^[number] | `0` | No |
| `position` | position of affix. | ^[enum]`'top' \| 'bottom'` | `'top'` | No |
| `target` | target container. (CSS selector) | ^[string] | — | No |
| `z-index` | `z-index` of affix | ^[number] | `100` | No |

### Affix Events

| Name | Description | Type |
| -------- | ---------------------------------- | ------------------------------------------------------------------------------- |
| `change` | triggers when fixed state changed. | <FunctionType :params="[['fixed', 'boolean']]" /> |
| `scroll` | triggers when scrolling. | <FunctionType :params="[['value', '{ scrollTop: number, fixed: boolean }']]" /> |
| Name | Description | Type |
| -------- | ---------------------------------- | ------------------------------------------------------------------- |
| `change` | triggers when fixed state changed. | ^[Function]`(fixed: boolean) => void` |
| `scroll` | triggers when scrolling. | ^[Function]`(value: { scrollTop: number, fixed: boolean }) => void` |

### Affix Exposes

| Method | Description | Type |
| ------------ | --------------------------- | ---------------- |
| `update` | update affix state manually | <FunctionType /> |
| `updateRoot` | update rootRect info | <FunctionType /> |
| Method | Description | Type |
| ------------ | --------------------------- | ----------------------- |
| `update` | update affix state manually | ^[Function]`() => void` |
| `updateRoot` | update rootRect info | ^[Function]`() => void` |

### Affix Slots

Expand Down
92 changes: 38 additions & 54 deletions docs/en-US/component/autocomplete.md
View file
Expand Up @@ -41,35 +41,29 @@ autocomplete/remote-search

### Attributes

```api
| Name | Description | Type | Default |
| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------ |
| placeholder | the placeholder of Autocomplete | <StringType /> | — |
| clearable | whether to show clear button | <BooleanType /> | false |
| disabled | whether Autocomplete is disabled | <BooleanType /> | false |
| value-key | key name of the input suggestion object for display | <StringType /> | value |
| model-value / v-model | binding value | <StringType /> | — |
| debounce | debounce delay when typing, in milliseconds | <NumberType /> | 300 |
| placement | placement of the popup menu | <EnumType :values="['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end']" /> | bottom-start |
| fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | <FunctionType :params="[['queryString', 'string'], ['callback', 'CallbackFn']]" /> | — |
| popper-class | custom class name for autocomplete's dropdown | <StringType /> | — |
| trigger-on-focus | whether show suggestions when input focus | <BooleanType /> | true |
| name | same as `name` in native input | <StringType /> | — |
| select-when-unmatched | whether to emit a `select` event on enter when there is no autocomplete match | <BooleanType /> | false |
| label | label text | <StringType /> | — |
| hide-loading | whether to hide the loading icon in remote search | <BooleanType /> | false |
| popper-append-to-body(deprecated) | whether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to false | <BooleanType /> | false |
| teleported | whether select dropdown is teleported to the body | <BooleanType /> | true |
| highlight-first-item | whether to highlight first item in remote search suggestions by default | <BooleanType /> | false |
| fit-input-width | whether the width of the dropdown is the same as the input | <BooleanType /> | false |
```
| Name | Description | Type | Default |
| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ------------ |
| placeholder | the placeholder of Autocomplete | ^[string] | — |
| clearable | whether to show clear button | ^[boolean] | false |
| disabled | whether Autocomplete is disabled | ^[boolean] | false |
| value-key | key name of the input suggestion object for display | ^[string] | value |
| model-value / v-model | binding value | ^[string] | — |
| debounce | debounce delay when typing, in milliseconds | ^[number] | 300 |
| placement | placement of the popup menu | ^[enum]`'top' \| 'top- start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end'` | bottom-start |
| fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | ^[Function]`(queryString': string, callback: callbackfn) => void` | — |
| popper-class | custom class name for autocomplete's dropdown | ^[string] | — |
| trigger-on-focus | whether show suggestions when input focus | ^[boolean] | true |
| name | same as `name` in native input | ^[string] | — |
| select-when-unmatched | whether to emit a `select` event on enter when there is no autocomplete match | ^[boolean] | false |
| label | label text | ^[string] | — |
| hide-loading | whether to hide the loading icon in remote search | ^[boolean] | false |
| popper-append-to-body(deprecated) | whether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to false | ^[boolean] | false |
| teleported | whether select dropdown is teleported to the body | ^[boolean] | true |
| highlight-first-item | whether to highlight first item in remote search suggestions by default | ^[boolean] | false |
| fit-input-width | whether the width of the dropdown is the same as the input | ^[boolean] | false |

### Slots

```api
| Name | Description |
| ------- | --------------------------------------------------------------------- |
| default | Custom content for input suggestions. The scope parameter is { item } |
Expand All @@ -78,36 +72,26 @@ autocomplete/remote-search
| prepend | content to prepend before Input |
| append | content to append after Input |

```

### Events

```api
| Name | Description | Type |
| ------ | ------------------------------------------------ | ------------------------------------------------------------------------------ |
| select | triggers when a suggestion is clicked | <FunctionType :params="[['item', ['{ value: typeof modelValue }', 'any']]]" /> |
| change | triggers when the icon inside Input value change | <FunctionType :params="[['value', ['string', 'number']]]" /> |
```
| Name | Description | Type |
| ------ | ------------------------------------------------ | ----------------------------------------------------- |
| select | triggers when a suggestion is clicked | ^[Function]`(item: typeof modelValue \| any) => void` |
| change | triggers when the icon inside Input value change | ^[Function]`(value: string \| number) => void` |

### Instance Exposes

```api
| Name | Description | Type |
| ---------------- | ------------------------------------------- | -------------------------------------------------------------------- |
| activated | if autocomplete activated | <RefType type="boolean" /> |
| blur | blur the input element | <FunctionType /> |
| close | collapse suggestion list | <FunctionType /> |
| focus | focus the input element | <FunctionType /> |
| handleSelect | triggers when a suggestion is clicked | <FunctionType :params="[['item', 'any']]" returns="Promise<void>" /> |
| handleKeyEnter | handle keyboard enter event | <FunctionType returns="Promise<void>" /> |
| highlightedIndex | the index of the currently highlighted item | <RefType type="number" /> |
| highlight | highlight an item in a suggestion | <FunctionType :params="[['itemIndex', 'number']]" /> |
| inputRef | el-input component instance | <RefType type="ElInputInstance" /> |
| loading | remote search loading indicator | <RefType type="boolean" /> |
| popperRef | el-tooltip component instance | <RefType type="ElTooltipInstance" /> |
| suggestions | fetch suggestions result | <RefType type="Record<string, any>" /> |
```
| Name | Description | Type |
| ---------------- | ------------------------------------------- | ----------------------------------------- |
| activated | if autocomplete activated | ^[Object]`Ref<boolean>` |
| blur | blur the input element | ^[Function]`() => void` |
| close | collapse suggestion list | ^[Function]`() => void` |
| focus | focus the input element | ^[Function]`() => void` |
| handleSelect | triggers when a suggestion is clicked | ^[Function]`(item: any) => promise<void>` |
| handleKeyEnter | handle keyboard enter event | ^[Function]`() => promise<void>` |
| highlightedIndex | the index of the currently highlighted item | ^[Object]`Ref<number>` |
| highlight | highlight an item in a suggestion | ^[Function]`(itemIndex: number) => void` |
| inputRef | el-input component instance | ^[Object]`Ref<ElInputInstance>` |
| loading | remote search loading indicator | ^[Object]`Ref<boolean>` |
| popperRef | el-tooltip component instance | ^[Object]`Ref<ElTooltipInstance>` |
| suggestions | fetch suggestions result | ^[Object]`Ref<record<string, any>>` |

0 comments on commit 39faf4b

Please sign in to comment.