From 39faf4beaa32a3b2e2a8cb7020617111ce55e900 Mon Sep 17 00:00:00 2001 From: Jeremy <15975785+jw-foss@users.noreply.github.com> Date: Sat, 5 Nov 2022 15:50:20 +0800 Subject: [PATCH] fix(docs): [autocomplete] [affix] (#10443) * Replace jsx with customized API syntax Co-authored-by: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com> --- docs/en-US/component/affix.md | 28 ++++----- docs/en-US/component/autocomplete.md | 92 ++++++++++++---------------- 2 files changed, 52 insertions(+), 68 deletions(-) diff --git a/docs/en-US/component/affix.md b/docs/en-US/component/affix.md index 2465eea67c..e1cb234195 100644 --- a/docs/en-US/component/affix.md +++ b/docs/en-US/component/affix.md @@ -41,26 +41,26 @@ affix/fixed ### Affix Attributes -| Name | Description | Type | Default | Required | -| ---------- | -------------------------------- | ---------------------------------------- | ------- | -------- | -| `offset` | offset distance. | `number` | `0` | No | -| `position` | position of affix. | | `'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. | | -| `scroll` | triggers when scrolling. | | +| 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 | | -| `updateRoot` | update rootRect info | | +| Method | Description | Type | +| ------------ | --------------------------- | ----------------------- | +| `update` | update affix state manually | ^[Function]`() => void` | +| `updateRoot` | update rootRect info | ^[Function]`() => void` | ### Affix Slots diff --git a/docs/en-US/component/autocomplete.md b/docs/en-US/component/autocomplete.md index c6e573c752..a14bbd4c1b 100644 --- a/docs/en-US/component/autocomplete.md +++ b/docs/en-US/component/autocomplete.md @@ -41,35 +41,29 @@ autocomplete/remote-search ### Attributes -```api - -| Name | Description | Type | Default | -| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------ | -| placeholder | the placeholder of Autocomplete | | — | -| clearable | whether to show clear button | | false | -| disabled | whether Autocomplete is disabled | | false | -| value-key | key name of the input suggestion object for display | | value | -| model-value / v-model | binding value | | — | -| debounce | debounce delay when typing, in milliseconds | | 300 | -| placement | placement of the popup menu | | bottom-start | -| fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | | — | -| popper-class | custom class name for autocomplete's dropdown | | — | -| trigger-on-focus | whether show suggestions when input focus | | true | -| name | same as `name` in native input | | — | -| select-when-unmatched | whether to emit a `select` event on enter when there is no autocomplete match | | false | -| label | label text | | — | -| hide-loading | whether to hide the loading icon in remote search | | 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 | | false | -| teleported | whether select dropdown is teleported to the body | | true | -| highlight-first-item | whether to highlight first item in remote search suggestions by default | | false | -| fit-input-width | whether the width of the dropdown is the same as the input | | 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 } | @@ -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 | | -| change | triggers when the icon inside Input value change | | - -``` +| 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 | | -| blur | blur the input element | | -| close | collapse suggestion list | | -| focus | focus the input element | | -| handleSelect | triggers when a suggestion is clicked | | -| handleKeyEnter | handle keyboard enter event | | -| highlightedIndex | the index of the currently highlighted item | | -| highlight | highlight an item in a suggestion | | -| inputRef | el-input component instance | | -| loading | remote search loading indicator | | -| popperRef | el-tooltip component instance | | -| suggestions | fetch suggestions result | | - -``` +| Name | Description | Type | +| ---------------- | ------------------------------------------- | ----------------------------------------- | +| activated | if autocomplete activated | ^[Object]`Ref` | +| 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` | +| handleKeyEnter | handle keyboard enter event | ^[Function]`() => promise` | +| highlightedIndex | the index of the currently highlighted item | ^[Object]`Ref` | +| highlight | highlight an item in a suggestion | ^[Function]`(itemIndex: number) => void` | +| inputRef | el-input component instance | ^[Object]`Ref` | +| loading | remote search loading indicator | ^[Object]`Ref` | +| popperRef | el-tooltip component instance | ^[Object]`Ref` | +| suggestions | fetch suggestions result | ^[Object]`Ref>` |