From fd29bfc70b7507c7676acf1455eee6a5ee155157 Mon Sep 17 00:00:00 2001 From: xiaoxunyao Date: Sun, 9 Jan 2022 11:50:33 +0800 Subject: [PATCH 01/21] chore: remove yarn.lock --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index a1ea5d9..3369634 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,4 @@ components/demos dist logs assets/data +yarn.lock From 9544d109803661bb4abdf59cc5b5258fd2203844 Mon Sep 17 00:00:00 2001 From: xiaoxunyao Date: Sun, 9 Jan 2022 11:51:05 +0800 Subject: [PATCH 02/21] docs: update docs --- one/docs/nav.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/one/docs/nav.json b/one/docs/nav.json index 0741bf2..abc7ccb 100644 --- a/one/docs/nav.json +++ b/one/docs/nav.json @@ -697,8 +697,7 @@ }, { "title": "Accordion", - "slug": "accordion", - "disabled": true + "slug": "accordion" }, { "title": "Lightbox", From 4b56b793567ad039ea829d4cd537741aa772c35e Mon Sep 17 00:00:00 2001 From: xiaoxunyao Date: Sun, 9 Jan 2022 11:52:58 +0800 Subject: [PATCH 03/21] feat: add english documentation for accordion --- one/docs/en-US/components/accordion.md | 105 +++++++++++++++++++++++++ 1 file changed, 105 insertions(+) create mode 100644 one/docs/en-US/components/accordion.md diff --git a/one/docs/en-US/components/accordion.md b/one/docs/en-US/components/accordion.md new file mode 100644 index 0000000..9550c3a --- /dev/null +++ b/one/docs/en-US/components/accordion.md @@ -0,0 +1,105 @@ +# Accordion + +:::tip +The `Accordion` component needs to be used by the inline [`Collapse`](./collapse) component. +::: + +## Demos + +### Size + +Optional size [`ui`](#props-ui) property value: `s` / `m`. + +[[ demo src="/demo/accordion/size.vue" ]] + +### Style + +You can use the [`ui`](#props-ui) property to set multiple styles. + +[[ demo src="/demo/accordion/variant.vue" ]] + +### Multiple + +You can use the [`multiple`](#props-multiple) properties to multiple panels to expand at the same time. + +[[ demo src="/demo/accordion/multiple.vue" ]] + +### Icon position + +You can use the [`toggle-position`](#props-toggle-position) property to set the position of the expand icon. + +[[ demo src="/demo/accordion/position.vue" ]] + +## API + +### Accordion Props + +| Name | Type | Default | Description | +| -- | -- | -- | -- | +| ``ui`` | `string=` | - | [^ui] | +| ``multiple`` | `boolean=` | `false` | Allow multiple sub-panels to expand at the same time. | +| ``disabled`` | `boolean=` | `false` | Disabled the accordion. | +| ``expanded`` | `string | Array` | - | [^expanded] | +| ``toggle-position`` | `string` | `'start'` | [^toggle-position] | + +^^^ui +Preset styles. A combination of a set of enumeration values separated by spaces. Among them, you can only choose one of `simple` / `basic` / `strong`. If you don't set it, it will be the default normal style. Only one of `bordered` / `borderless` can be selected. + + ++++Enum +| Value | Description | +| -- | -- | +| `simple` | Simple style. | +| `basic` | White background style. | +| `strong` | White background style. | +| `bordered` | There is an outer border. | +| `borderless` | No outer border. | +| `dull` | The title area does not change its style in response to mouse interaction. | +| `s` | Small size style. | +| `m` | Medium size style. | ++++ +^^^ + +^^^expanded +:::badges +`.sync` +::: + +Expanded accordion panel,Corresponds to the [`name`](./collapse#props-name) property of the inline `Collapse` component. When `multiple` is `true`, it is an array of accordion panel identification. +^^^ + +^^^toggle-position +Position of the expansion icon. + ++++Enum +| Value | Description | +| -- | -- | +| `start` | Expand icon is at the start position, is the default position. | +| `end` | expand icon is at the end position. | +| `none` | No expansion icon. | ++++ +^^^ + +### Accordion Slots + +| Name | Description | +| -- | -- | +| ``default`` | The content area is used to inline the `Collapse` component. | + +### Accordion Events + +| Name | Description | +| -- | -- | +| ``toggle`` | [^toggle] | + +^^^toggle +Triggered when the title area of the inner collapsible panel is clicked to trigger the expand/collapse. The callback parameter is `(expand: boolean, name: string, expanded)`. + ++++Props +| Name | Type | Description | +| -- | -- | -- | +| `expand` | `boolean` | Expand the accordion. | +| `name` | `string` | Switch expanded accordion panel. | +| `expanded` | `string | Array` | All currently expanded accordion panel. | ++++ +^^^ From 916dd9d0d8d6b70bd78c715c217a7348f00c1ee8 Mon Sep 17 00:00:00 2001 From: xiaoxunyao Date: Mon, 10 Jan 2022 16:30:29 +0800 Subject: [PATCH 04/21] docs:add anchor --- one/docs/en-US/components/anchor.md | 70 +++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 one/docs/en-US/components/anchor.md diff --git a/one/docs/en-US/components/anchor.md b/one/docs/en-US/components/anchor.md new file mode 100644 index 0000000..a6e4554 --- /dev/null +++ b/one/docs/en-US/components/anchor.md @@ -0,0 +1,70 @@ +# Anchor + +## Demo + +### Basic Anchor + +Use [`container`](#props-container) property to set the container in which scrolling occurs. When the `Anchor` component is not in the container (that is, it does not scroll with the container), you do not need to set [`sticky`](#props-sticky ) property. + +[[ demo src="/demo/anchor/normal.vue" ]] + +### Adsorption Anchor + +When `Anchor` component is in the container (rolling with the container), you can set [`sticky`](#props-sticky) property to control the adsorption of the component when it rolls out of the container. + +[[ demo src="/demo/anchor/sticky.vue" ]] + +### Specify Offset + +Use [`target-offset`](#props-target-offset) property to control where the anchor point scrolls to the container to start to be active. + +Use [`sticky-offset`](#props-sticky-offset) property to control where the `Anchor` is in the container to start the adsorption. + +[[ demo src="/demo/anchor/offset-en.vue" ]] + +## API + +### Anchor Props + +| Name | Types | Default | Description | +| -- | -- | -- | -- | +| ``items`` | `Array<{value, label, children}>` | `[]` | [^items] | +| ``sticky`` | `boolean=` | `false` | Produce adsorption effect. | +| ``container`` | `string | HTMLElement | Window=` | - | `Anchor` adsorption and determine the container referenced by the anchor point activation. | +| ``target-offset`` | `string | number=` | `0` | When an anchor point is in the `target-offset` position to the container, then the corresponding anchor point link is active. The numeric type value is a `px`, and a string such as `'10%'` can also be passed in. The calculation will be based on the proportion of the height of the container corresponding to the `container`. | +| ``sticky-offset`` | `string | number=` | `0` | sticky `Anchor`, when the container rolls to the position of `sticky-offset`, then the `Anchor` starts to adsorb. Different value types have the same meaning as [`target-offset`](#props-target-offset) property. | + +^^^items +Data source array, item type is `{label, value, children, ...}`. + ++++Field +| Name | Type | Description | +| -- | -- | -- | +| `label` | `string` | Text description of the node. | +| `value` | `string` | Value corresponding to the node is generally an in-page hash, such as `#button`. | +| `children` | `Array=` | Child node array of the node, Array item type is the same as the [`items`](#props-items) array item. | ++++ +^^^ + +### Anchor Slots + +| Name | Description | +| -- | -- | +| ``item`` | [^slot-item] | +| ``item-label`` | [^slot-item-label] | + +^^^slot-item +Render each anchor link. + +Default content: anchor link. + +Scope parameters, see [`items`](#props-items) property details. +^^^ + +^^^slot-item-label +Render the text of each anchor link. + +Default content: the description text `label` of the anchor link. + +Scope parameters, see [`item`](#slots-item) slots. +^^^ From b8dcf9e19a19d6f896a76fde6f20c17e35c82577 Mon Sep 17 00:00:00 2001 From: xiaoxunyao Date: Mon, 10 Jan 2022 16:30:55 +0800 Subject: [PATCH 05/21] docs: update docs --- one/docs/nav.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/one/docs/nav.json b/one/docs/nav.json index abc7ccb..33f5a23 100644 --- a/one/docs/nav.json +++ b/one/docs/nav.json @@ -678,7 +678,7 @@ { "title": "Anchor", "slug": "anchor", - "disabled": true + "disabled": false }, { "title": "Drawer", From 943fcbd4affb624a146a572a4f63e89eab584ac9 Mon Sep 17 00:00:00 2001 From: xiaoxunyao Date: Mon, 10 Jan 2022 16:31:24 +0800 Subject: [PATCH 06/21] docs: add offset en vue --- one/docs/demo/anchor/offset-en.vue | 143 +++++++++++++++++++++++++++++ 1 file changed, 143 insertions(+) create mode 100644 one/docs/demo/anchor/offset-en.vue diff --git a/one/docs/demo/anchor/offset-en.vue b/one/docs/demo/anchor/offset-en.vue new file mode 100644 index 0000000..e6f6311 --- /dev/null +++ b/one/docs/demo/anchor/offset-en.vue @@ -0,0 +1,143 @@ + + + + + + + + Dashed box marks the container, and the solid black line marks the top of the anchor item. + + When the black solid line coincides with the `tagetOffset` line, the trigger is activated. + + `Anchor` is attached to the line of `stickyOffset`. + From 3ac14b3289b19b01823ebef95abbf877400a8ed0 Mon Sep 17 00:00:00 2001 From: xiaoxunyao Date: Mon, 10 Jan 2022 17:13:26 +0800 Subject: [PATCH 07/21] docs: remove component name of api area --- one/docs/en-US/components/accordion.md | 6 +++--- one/docs/en-US/components/anchor.md | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/one/docs/en-US/components/accordion.md b/one/docs/en-US/components/accordion.md index 9550c3a..f6e6d37 100644 --- a/one/docs/en-US/components/accordion.md +++ b/one/docs/en-US/components/accordion.md @@ -32,7 +32,7 @@ You can use the [`toggle-position`](#props-toggle-position) property to set the ## API -### Accordion Props +### Props | Name | Type | Default | Description | | -- | -- | -- | -- | @@ -80,13 +80,13 @@ Position of the expansion icon. +++ ^^^ -### Accordion Slots +### Slots | Name | Description | | -- | -- | | ``default`` | The content area is used to inline the `Collapse` component. | -### Accordion Events +### Events | Name | Description | | -- | -- | diff --git a/one/docs/en-US/components/anchor.md b/one/docs/en-US/components/anchor.md index a6e4554..bc3cc56 100644 --- a/one/docs/en-US/components/anchor.md +++ b/one/docs/en-US/components/anchor.md @@ -24,7 +24,7 @@ Use [`sticky-offset`](#props-sticky-offset) property to control where the `Ancho ## API -### Anchor Props +### Props | Name | Types | Default | Description | | -- | -- | -- | -- | @@ -46,7 +46,7 @@ Data source array, item type is `{label, value, children, ...}`. +++ ^^^ -### Anchor Slots +### Slots | Name | Description | | -- | -- | From 59a95973848ed5a5f9297f6ffc80d488016b4a08 Mon Sep 17 00:00:00 2001 From: xiaoxunyao Date: Mon, 10 Jan 2022 20:48:47 +0800 Subject: [PATCH 08/21] docs: update docs --- one/docs/en-US/components/anchor.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/one/docs/en-US/components/anchor.md b/one/docs/en-US/components/anchor.md index bc3cc56..7bf5037 100644 --- a/one/docs/en-US/components/anchor.md +++ b/one/docs/en-US/components/anchor.md @@ -20,7 +20,7 @@ Use [`target-offset`](#props-target-offset) property to control where the anchor Use [`sticky-offset`](#props-sticky-offset) property to control where the `Anchor` is in the container to start the adsorption. -[[ demo src="/demo/anchor/offset-en.vue" ]] +[[ demo src="/demo/anchor/offset.vue" ]] ## API From 159e32c6cf884eae97d32485df6569d220ee85c3 Mon Sep 17 00:00:00 2001 From: xiaoxunyao Date: Mon, 10 Jan 2022 20:49:04 +0800 Subject: [PATCH 09/21] docs: remove offset --- one/docs/demo/anchor/offset-en.vue | 143 ----------------------------- 1 file changed, 143 deletions(-) delete mode 100644 one/docs/demo/anchor/offset-en.vue diff --git a/one/docs/demo/anchor/offset-en.vue b/one/docs/demo/anchor/offset-en.vue deleted file mode 100644 index e6f6311..0000000 --- a/one/docs/demo/anchor/offset-en.vue +++ /dev/null @@ -1,143 +0,0 @@ - - - - - - - - Dashed box marks the container, and the solid black line marks the top of the anchor item. - - When the black solid line coincides with the `tagetOffset` line, the trigger is activated. - - `Anchor` is attached to the line of `stickyOffset`. - From f8cfe228bd579725704ad731a85b6129410a86de Mon Sep 17 00:00:00 2001 From: xiaoxunyao Date: Mon, 10 Jan 2022 21:53:28 +0800 Subject: [PATCH 10/21] docs: update docs --- one/docs/nav.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/one/docs/nav.json b/one/docs/nav.json index 33f5a23..24e4709 100644 --- a/one/docs/nav.json +++ b/one/docs/nav.json @@ -673,7 +673,7 @@ { "title": "Autocomplete", "slug": "autocomplete", - "disabled": true + "disabled": false }, { "title": "Anchor", From 6d0b7e61e9351b4c51276a698268491602220d33 Mon Sep 17 00:00:00 2001 From: xiaoxunyao Date: Mon, 10 Jan 2022 21:53:40 +0800 Subject: [PATCH 11/21] docs: add autocomplete --- one/docs/en-US/components/autocomplete.md | 138 ++++++++++++++++++++++ 1 file changed, 138 insertions(+) create mode 100644 one/docs/en-US/components/autocomplete.md diff --git a/one/docs/en-US/components/autocomplete.md b/one/docs/en-US/components/autocomplete.md new file mode 100644 index 0000000..dd5bdce --- /dev/null +++ b/one/docs/en-US/components/autocomplete.md @@ -0,0 +1,138 @@ +# Autocomplete + +## Demo + +### Basic Trigger + +Set [`suggest-trigger`](#props-suggest-trigger) specify trigger suggestions. + +[[ demo src="/demo/autocomplete/normal.vue" ]] + +### Strict + +Set [`strict`](#props-strict) property to strict mode. If the input value does not exactly match the recommended value, the input value will be cleared when the focus is out of focus. + +[[ demo src="/demo/autocomplete/strict.vue" ]] + +### Custom Search + +Set [`match`](#props-match) property to customize the highlighting logic; Set [`filter`](#props-filter) property to customize the search hit logic. + +:::tip +`match` is used to highlight the logic of matching text; while `filter` is to control whether it is hit or not. By default, `filter` will filter out nodes are not matched by `match`, and will include non-leaf nodes. If you want all leaf nodes in the search results, you can filter out non-leaf nodes by rewriting `filter`. +::: + +[[ demo src="/demo/autocomplete/custom.vue" ]] + +## API + +### Props + +| Name | Type | Default | Description | +| -- | -- | -- | -- | +| ``datasource`` | `Array=` | `[]` | [^datasource] | +| ``value`` | `*` | - | [^prop-value] | +| ``disabled`` | `boolean=` | `false` | Disabled state. | +| ``readonly`` | `boolean=` | `false` | Read only status. | +| ``match`` | `(item, keyword, { ancestors }) => boolean | [number, number] | Array<[number, number]>` | - | Supports custom highlighting logic, and matches case-insensitive substrings by default. | +| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | Support custom search hit logic. | +| ``suggest-trigger`` | `string | Array=` | `'input'` | Trigger the suggestion drop-down panel, the available values are: `'input'`, `'focus'`. | +| ``expanded`` | `boolean=` | `false` | [^expanded] | +| ``placeholder`` | `string=` | - | Placeholder. | +| ``clearable`` | `boolean=` | `false` | Clear button is displayed. | +| ``composition`` | `boolean=` | `false` | Perceive value of input method input process. | +| ``select-on-focus`` | `boolean=` | `false` | The text in the input box is automatically selected. | +| ``maxlength`` | `number=` | - | The length of the input string is limited. | +| ``strict`` | `boolean=` | `false` | Maximum input length. | +| ``get-length`` | `function(string): number=` | Customize character length calculation function. | +| ``trim`` | `boolean | string=` | `false` | [^trim] | +| ``autofocus`` | `boolean=` | `false` | Focus automatically. | + +^^^datasource +Data source array, item is `Object`, field is `{label, value, children, ...}`. + ++++Field +| Name | Type | Description | +| -- | -- | -- | +| `label` | `string` | Text description of the node. | +| `value` | `string` | Value corresponding to the node is generally an in-page hash, such as `#button`. | +| `children` | `Array=` | Child node array of the node, Array item type is the same as the [`items`](#props-items) array item. | ++++ +^^^ + +^^^prop-value +:::badges +`v-model` +::: + +Selected value. +^^^ + +^^^expanded +:::badges +`.sync` +::: + +Whether the panel should be expanded (if there is no option in `suggestions`, panel will be closed even if it is `true`). +^^^ + +^^^trim +Remove before and after spaces. When it is `true`, the before and after spaces will be removed; when it is `false`, the before and after spaces will not be removed. When it is set to a string, it will be removed in the specified way. + ++++Enum +| Value | Description | +| -- | -- | +| `both` | Remove spaces at both ends. It is equivalent to the behavior when `true`. | +| `start` | Remove front space. | +| `end` | Remove end spaces. | ++++ +^^^ + +### Slots + +| Name | Description | +| -- | -- | +| ``suggestions`` | [^slot-suggestions] | +| ``option-label`` | [^slot-option-label] | + +^^^slot-suggestions + +Pull down to suggest the panel slot. + ++++Scopes +| Name | Type | Description | +| -- | -- | -- | +| `datasource` | `Array` | data source, type is the same as the [`datasource`](#props-datasource) property. | +| `keyword` | `string` | Search keyword. | ++++ +^^^ + +^^^slot-option-label + +Option slot in the drop down panel. + ++++Scopes +| Name | Type | Description | +| -- | -- | -- | +| `label` | `string` | Node copy used to display, if doesn't exist, it will take `value`. | +| `value` | `string` | Actually select the value. | +| `matches` | `Array<{text: string, matched: boolean}>` | Case of matching, a node may be divided into multiple texts, `text` indicates the text, and `matched` indicates whether the text matches. | ++++ +^^^ + +### Events + +| Name | Description | +| -- | -- | +| ``input`` | [^event-input] | +| ``select`` | Triggered when suggestion is adopted, the parameter is current value. | +| ``toggle`` | Triggered when expanded state of prompt panel is switched, callback parameter is `(expanded: boolean)`. `expanded` indicates whether operation will trigger prompt panel to expand or collapse. | +| ``clear`` | Triggers when current value is cleared. | + +^^^event-input +:::badges +`v-model` +::: + +Event will be triggered when inputting in `input` or selecting a value in drop down panel. Parameter is current input value or the `value` of selected item when selected. +^^^ From 28de4eb66288d24d2f7e7a708bb71117c56809e8 Mon Sep 17 00:00:00 2001 From: xiaoxunyao Date: Fri, 14 Jan 2022 16:11:49 +0800 Subject: [PATCH 12/21] docs: update docs --- one/docs/nav.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/one/docs/nav.json b/one/docs/nav.json index 24e4709..8c06eb6 100644 --- a/one/docs/nav.json +++ b/one/docs/nav.json @@ -500,7 +500,7 @@ { "title": "Badge", "slug": "badge", - "disabled": true + "disabled": false }, { "title": "Tag", From c38016a9a59f52313b3527b7fa4f22fceb6c49f3 Mon Sep 17 00:00:00 2001 From: xiaoxunyao Date: Fri, 14 Jan 2022 16:11:59 +0800 Subject: [PATCH 13/21] docs: add badge --- one/docs/en-US/components/badge.md | 58 ++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 one/docs/en-US/components/badge.md diff --git a/one/docs/en-US/components/badge.md b/one/docs/en-US/components/badge.md new file mode 100644 index 0000000..eecdc62 --- /dev/null +++ b/one/docs/en-US/components/badge.md @@ -0,0 +1,58 @@ +# Badge + +## Demo + +### Text Badge + +Badge content can be text. + +[[ demo src="/demo/badge/text.vue" ]] + +### Digital Badge + +Badge content can be number, When the maximum value is exceeded, it can be displayed as *Maximum+*. + +[[ demo src="/demo/badge/number.vue" ]] + +### Round Dots Badge + +No badge content is provided, The badge will be displayed in a dot style in the upper right corner. + +[[ demo src="/demo/badge/corner-dot.vue" ]] + +No slot content is provided, the badge will be displayed in a dot style. + +[[ demo src="/demo/badge/dot.vue" ]] + +## API + +### Props + +| Name | Type | Default | Description | +| -- | -- | -- | -- | +| ``type`` | `string=` | `'error'` | [^type] | +| ``value`` | `string | number` | - | Badge content value. When it is a value of type `number`, it is limited by the [`max`](#props-max) attribute. `max` is ignored when it is of type `string`. | +| ``max`` | `number=` | `badge.max` | The maximum value of the badge value, when `value` exceeds this value, the badge content will be displayed as `{max}+`. Ignored when `value` is `string`. | +| ``hidden`` | `boolean=` | `false` | hidden state. | + +^^^type +Badge state type. The optional values for the built-in style are as follows. When using other values, you need to define the style of `.veui-badge-{type}`. + ++++Enum +| Value | Description | +| -- | -- | +| `info` | Message notification. | +| `success` | Success. | +| `warning` | Warning. | +| `error` | Error | +| `aux` | Aux | ++++ +^^^ + +### Slots + +| Name | Description | +| -- | -- | +| ``default`` | The target content that the badge needs to display. | + + From ba9872d8d45f5ec90531df14ac4979eac514a785 Mon Sep 17 00:00:00 2001 From: xiaoxunyao Date: Fri, 14 Jan 2022 17:44:05 +0800 Subject: [PATCH 14/21] docs: remove yarn --- .gitignore | 1 - 1 file changed, 1 deletion(-) diff --git a/.gitignore b/.gitignore index 3369634..a1ea5d9 100644 --- a/.gitignore +++ b/.gitignore @@ -9,4 +9,3 @@ components/demos dist logs assets/data -yarn.lock From 0e148aa81f3b5473d340270bd6db7c876978e6d2 Mon Sep 17 00:00:00 2001 From: xiaoxunyao Date: Fri, 14 Jan 2022 18:04:29 +0800 Subject: [PATCH 15/21] docs: update docs --- one/docs/en-US/components/accordion.md | 45 +++++++++++------------ one/docs/en-US/components/anchor.md | 2 +- one/docs/en-US/components/autocomplete.md | 12 +++--- one/docs/en-US/components/badge.md | 12 +++--- 4 files changed, 35 insertions(+), 36 deletions(-) diff --git a/one/docs/en-US/components/accordion.md b/one/docs/en-US/components/accordion.md index f6e6d37..1f2ba3b 100644 --- a/one/docs/en-US/components/accordion.md +++ b/one/docs/en-US/components/accordion.md @@ -8,25 +8,25 @@ The `Accordion` component needs to be used by the inline [`Collapse`](./collapse ### Size -Optional size [`ui`](#props-ui) property value: `s` / `m`. +Available size variants for the ui prop: `s` / `m`. [[ demo src="/demo/accordion/size.vue" ]] ### Style -You can use the [`ui`](#props-ui) property to set multiple styles. +Use the [`ui`](#props-ui) property to apply style variants. [[ demo src="/demo/accordion/variant.vue" ]] ### Multiple -You can use the [`multiple`](#props-multiple) properties to multiple panels to expand at the same time. +Use the [`multiple`](#props-multiple) property to allow multiple panels to be expanded at the same time. [[ demo src="/demo/accordion/multiple.vue" ]] ### Icon position -You can use the [`toggle-position`](#props-toggle-position) property to set the position of the expand icon. +Use the [`toggle-position`](#props-toggle-position) property to set the position of the toggle icon. [[ demo src="/demo/accordion/position.vue" ]] @@ -37,24 +37,23 @@ You can use the [`toggle-position`](#props-toggle-position) property to set the | Name | Type | Default | Description | | -- | -- | -- | -- | | ``ui`` | `string=` | - | [^ui] | -| ``multiple`` | `boolean=` | `false` | Allow multiple sub-panels to expand at the same time. | -| ``disabled`` | `boolean=` | `false` | Disabled the accordion. | +| ``multiple`` | `boolean=` | `false` | Whether to allow multiple panels to be expanded at the same time. | +| ``disabled`` | `boolean=` | `false` | Whether accordion is disabled. | | ``expanded`` | `string | Array` | - | [^expanded] | | ``toggle-position`` | `string` | `'start'` | [^toggle-position] | ^^^ui -Preset styles. A combination of a set of enumeration values separated by spaces. Among them, you can only choose one of `simple` / `basic` / `strong`. If you don't set it, it will be the default normal style. Only one of `bordered` / `borderless` can be selected. - +Style variants. A space-separated enum list. Only one of `simple` / `basic` / `strong` can be used. The default style will be used if not set. Only one of `bordered` / `borderless` can be used. +++Enum | Value | Description | | -- | -- | | `simple` | Simple style. | -| `basic` | White background style. | -| `strong` | White background style. | -| `bordered` | There is an outer border. | -| `borderless` | No outer border. | -| `dull` | The title area does not change its style in response to mouse interaction. | +| `basic` | Basic style. | +| `strong` | Strong style. | +| `bordered` | Bordered style. | +| `borderless` | Borderless style. | +| `dull` | The title area does not change style in response to mouse interaction. | | `s` | Small size style. | | `m` | Medium size style. | +++ @@ -65,18 +64,18 @@ Preset styles. A combination of a set of enumeration values separated by spaces. `.sync` ::: -Expanded accordion panel,Corresponds to the [`name`](./collapse#props-name) property of the inline `Collapse` component. When `multiple` is `true`, it is an array of accordion panel identification. +The identifier of the expanded accordion panels, corresponding to the [`name`](./collapse#props-name) properties of the inline `Collapse` components. When `multiple` is `true`, it is an array of accordion panel identifiers. ^^^ ^^^toggle-position -Position of the expansion icon. +The position of the toggle icon. +++Enum | Value | Description | | -- | -- | -| `start` | Expand icon is at the start position, is the default position. | -| `end` | expand icon is at the end position. | -| `none` | No expansion icon. | +| `start` | The toggle icon is at the start position. Default value. | +| `end` | The toggle icon is at the end position. | +| `none` | Do not show the toggle icon. | +++ ^^^ @@ -84,7 +83,7 @@ Position of the expansion icon. | Name | Description | | -- | -- | -| ``default`` | The content area is used to inline the `Collapse` component. | +| ``default`` | The content area, which is used to place inline `Collapse` components. | ### Events @@ -93,13 +92,13 @@ Position of the expansion icon. | ``toggle`` | [^toggle] | ^^^toggle -Triggered when the title area of the inner collapsible panel is clicked to trigger the expand/collapse. The callback parameter is `(expand: boolean, name: string, expanded)`. +Triggered when clicking on the internal panel title to trigger expand/collapse. The callback parameters are `(expand: boolean, name: string, expanded)`. +++Props | Name | Type | Description | | -- | -- | -- | -| `expand` | `boolean` | Expand the accordion. | -| `name` | `string` | Switch expanded accordion panel. | -| `expanded` | `string | Array` | All currently expanded accordion panel. | +| `expand` | `boolean` | Whether to expand the collapsible panel. | +| `name` | `string` | The name of the collapsible panel. | +| `expanded` | `string | Array` | Identifiers of all currently expanded accordion panel. | +++ ^^^ diff --git a/one/docs/en-US/components/anchor.md b/one/docs/en-US/components/anchor.md index 7bf5037..241cd31 100644 --- a/one/docs/en-US/components/anchor.md +++ b/one/docs/en-US/components/anchor.md @@ -29,7 +29,7 @@ Use [`sticky-offset`](#props-sticky-offset) property to control where the `Ancho | Name | Types | Default | Description | | -- | -- | -- | -- | | ``items`` | `Array<{value, label, children}>` | `[]` | [^items] | -| ``sticky`` | `boolean=` | `false` | Produce adsorption effect. | +| ``sticky`` | `boolean=` | `false` | Whether produce adsorption effect. | | ``container`` | `string | HTMLElement | Window=` | - | `Anchor` adsorption and determine the container referenced by the anchor point activation. | | ``target-offset`` | `string | number=` | `0` | When an anchor point is in the `target-offset` position to the container, then the corresponding anchor point link is active. The numeric type value is a `px`, and a string such as `'10%'` can also be passed in. The calculation will be based on the proportion of the height of the container corresponding to the `container`. | | ``sticky-offset`` | `string | number=` | `0` | sticky `Anchor`, when the container rolls to the position of `sticky-offset`, then the `Anchor` starts to adsorb. Different value types have the same meaning as [`target-offset`](#props-target-offset) property. | diff --git a/one/docs/en-US/components/autocomplete.md b/one/docs/en-US/components/autocomplete.md index dd5bdce..c48d863 100644 --- a/one/docs/en-US/components/autocomplete.md +++ b/one/docs/en-US/components/autocomplete.md @@ -32,16 +32,16 @@ Set [`match`](#props-match) property to customize the highlighting logic; Set [` | -- | -- | -- | -- | | ``datasource`` | `Array=` | `[]` | [^datasource] | | ``value`` | `*` | - | [^prop-value] | -| ``disabled`` | `boolean=` | `false` | Disabled state. | -| ``readonly`` | `boolean=` | `false` | Read only status. | +| ``disabled`` | `boolean=` | `false` | Whether disabled state. | +| ``readonly`` | `boolean=` | `false` | Whether read only status. | | ``match`` | `(item, keyword, { ancestors }) => boolean | [number, number] | Array<[number, number]>` | - | Supports custom highlighting logic, and matches case-insensitive substrings by default. | | ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | Support custom search hit logic. | | ``suggest-trigger`` | `string | Array=` | `'input'` | Trigger the suggestion drop-down panel, the available values are: `'input'`, `'focus'`. | | ``expanded`` | `boolean=` | `false` | [^expanded] | | ``placeholder`` | `string=` | - | Placeholder. | -| ``clearable`` | `boolean=` | `false` | Clear button is displayed. | -| ``composition`` | `boolean=` | `false` | Perceive value of input method input process. | -| ``select-on-focus`` | `boolean=` | `false` | The text in the input box is automatically selected. | +| ``clearable`` | `boolean=` | `false` | Whether clear button is displayed. | +| ``composition`` | `boolean=` | `false` | Whether perceive value of input method input process. | +| ``select-on-focus`` | `boolean=` | `false` | Whether to automatically select the input box text when focused. | | ``maxlength`` | `number=` | - | The length of the input string is limited. | | ``strict`` | `boolean=` | `false` | Maximum input length. | | ``get-length`` | `function(string): number=` | Customize character length calculation function. | @@ -82,7 +82,7 @@ Remove before and after spaces. When it is `true`, the before and after spaces w +++Enum | Value | Description | | -- | -- | -| `both` | Remove spaces at both ends. It is equivalent to the behavior when `true`. | +| `both` | Remove spaces at both ends. Equivalent to the behavior when `true`. | | `start` | Remove front space. | | `end` | Remove end spaces. | +++ diff --git a/one/docs/en-US/components/badge.md b/one/docs/en-US/components/badge.md index eecdc62..ef13af3 100644 --- a/one/docs/en-US/components/badge.md +++ b/one/docs/en-US/components/badge.md @@ -33,7 +33,7 @@ No slot content is provided, the badge will be displayed in a dot style. | ``type`` | `string=` | `'error'` | [^type] | | ``value`` | `string | number` | - | Badge content value. When it is a value of type `number`, it is limited by the [`max`](#props-max) attribute. `max` is ignored when it is of type `string`. | | ``max`` | `number=` | `badge.max` | The maximum value of the badge value, when `value` exceeds this value, the badge content will be displayed as `{max}+`. Ignored when `value` is `string`. | -| ``hidden`` | `boolean=` | `false` | hidden state. | +| ``hidden`` | `boolean=` | `false` | Whether hidden state. | ^^^type Badge state type. The optional values for the built-in style are as follows. When using other values, you need to define the style of `.veui-badge-{type}`. @@ -41,11 +41,11 @@ Badge state type. The optional values for the built-in style are as follows. Whe +++Enum | Value | Description | | -- | -- | -| `info` | Message notification. | -| `success` | Success. | -| `warning` | Warning. | -| `error` | Error | -| `aux` | Aux | +| `info` | Info style. | +| `success` | Success style. | +| `warning` | Warning style. | +| `error` | Error style. | +| `aux` | Aux style. | +++ ^^^ From 7d9676222af8076d9fd0252f357870bbf4d60675 Mon Sep 17 00:00:00 2001 From: xiaoxunyao Date: Sat, 15 Jan 2022 18:42:40 +0800 Subject: [PATCH 16/21] docs: update docs --- one/docs/nav.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/one/docs/nav.json b/one/docs/nav.json index 3525bfe..2ca80f2 100644 --- a/one/docs/nav.json +++ b/one/docs/nav.json @@ -727,7 +727,7 @@ { "title": "Cascader", "slug": "cascader", - "disabled": true + "disabled": false }, { "title": "ConfigProvider", From 26d41bd20dd7e4e3bac092d3dfc2cd5a6c73138c Mon Sep 17 00:00:00 2001 From: xiaoxunyao Date: Sat, 15 Jan 2022 18:42:48 +0800 Subject: [PATCH 17/21] docs: add cascader --- one/docs/en-US/components/cascader.md | 298 ++++++++++++++++++++++++++ 1 file changed, 298 insertions(+) create mode 100644 one/docs/en-US/components/cascader.md diff --git a/one/docs/en-US/components/cascader.md b/one/docs/en-US/components/cascader.md new file mode 100644 index 0000000..f795599 --- /dev/null +++ b/one/docs/en-US/components/cascader.md @@ -0,0 +1,298 @@ +# Cascader + +## Demo + +### Size + +Available size variants for the ui prop:`xs` / `s` / `m` / `l`. + +[[ demo src="/demo/cascader/size.vue" ]] + +### Inline + +Use the [`inline`](#props-inline) property to enable inline. + +[[ demo src="/demo/cascader/inline.vue" ]] + +### Search + +Use the [`searchable`](#props-searchable) property to enable search. + +[[ demo src="/demo/cascader/searchable.vue" ]] + +### Multiple Choice + +Use the [`multiple`](#props-multiple) property to enable multiple choice. + +[[ demo src="/demo/cascader/multiple.vue" ]] + +### Select + +Use the [`select-mode`](#props-select-mode) property to control which items can be selected in single-select mode. + +[[ demo src="/demo/cascader/select-mode.vue" ]] + +### Column Trigger + +Use the [`column-trigger`](#props-column-trigger) property to control when the subordinates in the dropdown panel are expanded. + +[[ demo src="/demo/cascader/column-trigger.vue" ]] + +### Render Selected + +Use the [`value-display`](#props-value-display) property to control how the selected value is displayed. + +[[ demo src="/demo/cascader/value-display.vue" ]] + +## API + +### Props + +| Name | Type | Default | Description | +| -- | -- | -- | -- | +| ``ui`` | `string=` | - | [^ui] | +| ``options`` | `Array` | - | [^options] | +| ``value`` | `Array<*>|*` | - | [^value] | +| ``multiple`` | `boolean` | `false` | Allow multiple selections. | +| ``inline`` | `boolean` | `false` | Whether the drop-down panel is displayed inline. | +| ``max`` | `number` | - | The maximum number of items allowed to be selected when multiple selections are made. | +| ``placeholder`` | `string` | `cascader.placeholder` | Placeholder text when not selected. | +| ``clearable`` | `boolean` | `false` | Clear selections. | +| ``searchable`` | `boolean` | `false` | Search options. | +| ``expanded`` | `boolean=` | `false` | [^expanded] | +| ``column-trigger`` | `hover | click` | `click` | [^column-trigger] | +| ``select-mode`` | `'leaf-only' | 'any'` | `any` | [^select-mode] | +| ``column-width`` | `number | string` | - | [^column-width] | +| ``show-select-all`` | `boolean` | `false` | In multiple selection mode is there a select all button. | +| ``value-display`` | `'complete' | 'simple'` | `simple` | [^value-display] | +| ``disabled`` | `boolean=` | `false` | Whether is it disabled state. | +| ``readonly`` | `boolean=` | `false` | Whether is it readonly state. | +| ``overlay-class`` | `string | Array | Object=` | - | See the [`overlay`](./overlay) component's [`overlay-class`](./overlay#props-overlay-class) property. | +| ``overlay-style`` | `string | Array | Object=` | - | See the [`Overlay`](./overlay) component's [`overlay-style`](./overlay#props-overlay-style) property. | +| ``match`` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | Support custom highlighting logic, default case insensitive, refer to [`Autocomplete`](./Autocomplete#custom-search). | +| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | Support custom search hit logic, refer to [`Autocomplete`](./Autocomplete#custom-search). | + +^^^ui +preset style. + ++++Enum +| value | Description | +| -- | -- | +| `xs` | Ultra small size. | +| `s` | Small size. | +| `m` | Medium size. | +| `l` | Lage size. | ++++ +^^^ + +^^^options +Options list, items of type `{label, value, options, disabled, position, ...}`. + ++++Fields +| Name | Type | Description | +| -- | -- | -- | +| `label` | `string` | Textual description of the option. | +| `value` | `*` | The value corresponding to the option. | +| `position` | `string` | How to display subordinate nodes, pop up by default, set `inline` to display inline. | +| `options` | `Array=` | An array of options' sub-options, the array item type is the same as the [`options`](#props-options) property array item. | +| `disabled` | `boolean=` | Whether the option is disabled. | ++++ +^^^ + +^^^value +:::badges +`v-model` +::: + +Selected value. +^^^ + +^^^expanded +:::badges +`.sync` +::: + +Whether the drop-down menu is expanded. +^^^ + +^^^column-trigger +Drop-down panel lower-level to be expanded at the time. + ++++Enum +| Value | Description | +| -- | -- | +| `hover` | The cursor hovers to expand the next. | +| `click` | The cursor click to expand the next. | ++++ +^^^ + +^^^select-mode +Controls which items can be selected in single-select mode. + ++++Enum +| Value | Description | +| -- | -- | +| `leaf-only` | Only leaf nodes can be selected. | +| `any` | Each nodes can be selected. | ++++ +^^^ + +^^^column-width +When there are multiple columns in the drop-down panel, uniformly control the width of the columns except the last column. + +When there value is a numeric value or can be converted to a numeric value, it is treated as a pixel value. +^^^ + +^^^value-display +Controls how the selected value is displayed style. + ++++Enum +| Value | Description | +| -- | -- | +| `complete` | A path that fully displays the selected value, such as "Hollywood > Disneyland Park". | +| `simple` | Only display the selected value text. | ++++ +^^^ + +### Slots + +| Name | Description | +| -- | -- | +| ``trigger`` | [^slot-trigger] | +| ``pane`` | Content slot in drop-down panel. As [`trigger`](#slots-trigger) slot with domain parameter. | +| ``before`` | The content before the list of options. No default content. The scope parameter is the as the [`trigger`](#slots-trigger) slot. | +| ``after`` | The content after the option list. No default content. The scope parameter is the as the [`trigger`](#slots-trigger) slot. | +| ``column-before`` | [^slot-column-before] | +| ``column-after`` | The area after each column in the drop-down panel. No default content. The scope parameter is the as the [`column-before`](#slots-column-before) slot. | +| ``label`` | [^slot-label] | +| ``option-label`` | [^slot-option-label] | +| ``option`` | [^slot-option] | +| ``selected`` | [^slot-selected] | + +^^^slot-trigger +The entire pull down trigger area. + +Default content: drop-down button. + ++++Scopes +| Name | Type | Description | +| -- | -- | -- | +| `value` | `*` | Selected value. | +| `selected` | `Object` | Selected object. | +| `expanded` | `boolean` | Whether drop-down panel expane. | +| `keyword` | `string` | Search value. | +| `select` | `function(option: Object): void` | Use to set options. | +| `toggle` | `function(force: boolean): void` | Use to toggle the expanded state of the drop-down menu. | +| `clear` | `function(): void` | Use to clear selected options. | +| `remove` | `function(option: Object): void` | Use to remove a option, the parameter `option` is the option. | +| `updateKeyword` | `function(keyword: string): void` | Use to modify selected value. | ++++ +^^^ + +^^^slot-column-before +The area in front of each column in the drop-down panel. No default content. + ++++Scopes +| Name | Type | Description | +| -- | -- | -- | +| `option` | `Object` | This parent options of the column, where the `options` property can get the data of the current column. | ++++ +^^^ + +^^^slot-label +Drop-down button text area. + +Default content: the value of the `label` property corresponding to the selected option or the text content of the selected option in inline mode. + ++++Scopes +| Name | Type | Description | +| -- | -- | -- | +| `label` | `string` | Selected text. | +| `value` | `*` | Selected value. | +| `checked` | `boolean` | Whether selected a certain value。 | +| `disabled` | `boolean=` | Whether option is disabled. | ++++ + +PS. Fields other than the fields described above in the current options data are also automatically bound to scope parameters via `v-bind`. +^^^ + + +^^^slot-option-label +Text area for dropdown options (without `options`). + +Default content: The value of the option `label` property. + ++++Scopes +| Name | Type | Description | +| -- | -- | -- | +| `option` | `Object` | Current option. | +| `select` | `function(option: Object): void` | Selected current option. | +| `expand` | `function(option: Object): void` | Expand current option. | +| `click` | `function(option: Object): void` | Click current option content area, The current option is selected and/or expanded as appropriate. | ++++ +^^^ + +^^^slot-option +The entire area of drop-down options available for selection. + +Default content: Component default structure inside `Option`. + +The scope parameter is the same as the [`option-label`](#slots-option-label) slot. +^^^ + +^^^slot-selected +Selected value rendering area. + +Default content: render the tag of the selected item when single selected; render the tag of each selected item as `Tag` when multiple selected. + ++++Radio scopes +| Name | Type | Description | +| -- | -- | -- | +| `label` | `string` | Option text. | +| `value` | `*` | Option value. | +| `checked` | `boolean` | Whether already option. | +| `disabled` | `boolean=` | Whether option disable. | ++++ + ++++Multiple choice scopes +| Name | Type | Description | +| -- | -- | -- | +| `selected` | `Array` | Array of selected item data. | ++++ +^^^ + +### Events + +| Name | Description | +| -- | -- | +| ``input`` | Triggered when a search keyword is entered. The callback parameter is `(value: string)`, and `value` is the `value` value of the input box. | +| ``select`` | [^event-select] | +| ``afteropen`` | Fired when the drop-down menu is turned on. | +| ``afterclose`` | Fired when the drop-down menu is turned off. | + +^^^event-select +:::badges +`v-model` +::: + +Triggered after the selected state changes, the callback parameter is `(value: *)`. `value` is the value of the currently selected `value` field. +^^^ + +### Global config + +| Config item | Type | Default | Description | +| -- | -- | -- | -- | +| ``cascader.placeholder`` | `string` | `@@cascader.placeholder` | Placeholder content when not selected. | + +:::tip +A value starting with `@@` refers to the relevant field in the multilingual config. +::: + +### Icon + +| Name | Description | +| -- | -- | +| ``expand`` | Expand drop-down. | +| ``collapse`` | pack up drop-down. | +| ``clear`` | clear. | +| ``separator`` | separator. | From 1e3c07490ca2b926ff3ba87040582b4784a6e4fb Mon Sep 17 00:00:00 2001 From: GU Yiling Date: Wed, 19 Jan 2022 14:18:13 +0800 Subject: [PATCH 18/21] docs: refine english translation --- one/docs/en-US/components/anchor.md | 40 ++++++++++++++--------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/one/docs/en-US/components/anchor.md b/one/docs/en-US/components/anchor.md index 241cd31..6f8ca92 100644 --- a/one/docs/en-US/components/anchor.md +++ b/one/docs/en-US/components/anchor.md @@ -2,23 +2,23 @@ ## Demo -### Basic Anchor +### Basic anchor -Use [`container`](#props-container) property to set the container in which scrolling occurs. When the `Anchor` component is not in the container (that is, it does not scroll with the container), you do not need to set [`sticky`](#props-sticky ) property. +Use the [`container`](#props-container) prop to set the container where scrolling occurs. When the `Anchor` component is not in the container (i.e. it does not scroll with the container), there's no need to set the [`sticky`](#props-sticky ) prop. [[ demo src="/demo/anchor/normal.vue" ]] -### Adsorption Anchor +### Sticky anchor -When `Anchor` component is in the container (rolling with the container), you can set [`sticky`](#props-sticky) property to control the adsorption of the component when it rolls out of the container. +When the `Anchor` component is in the container (rolling with the container), the [`sticky`](#props-sticky) prop can be set to control the attachment of the component when it scrolls out of the container. [[ demo src="/demo/anchor/sticky.vue" ]] ### Specify Offset -Use [`target-offset`](#props-target-offset) property to control where the anchor point scrolls to the container to start to be active. +Use the [`target-offset`](#props-target-offset) prop to control where the anchor scrolls into the container and becomes active. -Use [`sticky-offset`](#props-sticky-offset) property to control where the `Anchor` is in the container to start the adsorption. +Use the [`sticky-offset`](#props-sticky-offset) prop to control where in the container the `Anchor` starts to attach. [[ demo src="/demo/anchor/offset.vue" ]] @@ -29,20 +29,20 @@ Use [`sticky-offset`](#props-sticky-offset) property to control where the `Ancho | Name | Types | Default | Description | | -- | -- | -- | -- | | ``items`` | `Array<{value, label, children}>` | `[]` | [^items] | -| ``sticky`` | `boolean=` | `false` | Whether produce adsorption effect. | -| ``container`` | `string | HTMLElement | Window=` | - | `Anchor` adsorption and determine the container referenced by the anchor point activation. | -| ``target-offset`` | `string | number=` | `0` | When an anchor point is in the `target-offset` position to the container, then the corresponding anchor point link is active. The numeric type value is a `px`, and a string such as `'10%'` can also be passed in. The calculation will be based on the proportion of the height of the container corresponding to the `container`. | -| ``sticky-offset`` | `string | number=` | `0` | sticky `Anchor`, when the container rolls to the position of `sticky-offset`, then the `Anchor` starts to adsorb. Different value types have the same meaning as [`target-offset`](#props-target-offset) property. | +| ``sticky`` | `boolean=` | `false` | Whether to apply sticky effect. | +| ``container`` | `string | HTMLElement | Window=` | - | The container which the `Anchor` component attaches to and checks active state against. | +| ``target-offset`` | `string | number=` | `0` | When an anchor is at the `target-offset` position of the container, then the corresponding anchor link is active. The numeric type value is a `px` value, or a percentage string such as `'10%'` can also be used, which will be calculated based on the height of the `container`. | +| ``sticky-offset`` | `string | number=` | `0` | For a sticky `Anchor`, when the container scrolls to the `sticky-offset` position, then the `Anchor` starts to attach. Different value types have the same meaning as the [`target-offset`](#props-target-offset) prop. | ^^^items -Data source array, item type is `{label, value, children, ...}`. +The datasource array. The type of each item is `{label, value, children, ...}`. -+++Field ++++Properties | Name | Type | Description | | -- | -- | -- | -| `label` | `string` | Text description of the node. | -| `value` | `string` | Value corresponding to the node is generally an in-page hash, such as `#button`. | -| `children` | `Array=` | Child node array of the node, Array item type is the same as the [`items`](#props-items) array item. | +| `label` | `string` | The descriptive labe of the item. | +| `value` | `string` | The value of the item, usually an in-page hash, such as `#button`. | +| `children` | `Array=` | The children array of the item, with the same type as the [`items`](#props-items) array item. | +++ ^^^ @@ -54,17 +54,17 @@ Data source array, item type is `{label, value, children, ...}`. | ``item-label`` | [^slot-item-label] | ^^^slot-item -Render each anchor link. +Renders each anchor link. Default content: anchor link. -Scope parameters, see [`items`](#props-items) property details. +See the [`items`](#props-items) prop for scope properties details. ^^^ ^^^slot-item-label -Render the text of each anchor link. +Renders the label of each anchor link. -Default content: the description text `label` of the anchor link. +Default content: the `label` of the anchor link. -Scope parameters, see [`item`](#slots-item) slots. +See the [`items`](#props-items) prop for scope properties details. ^^^ From 6d6cfc574a0f04e33162aabe3993f23f8bdb8104 Mon Sep 17 00:00:00 2001 From: xiaoxunyao Date: Fri, 21 Jan 2022 16:07:53 +0800 Subject: [PATCH 19/21] docs: docs update --- one/docs/en-US/components/accordion.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/one/docs/en-US/components/accordion.md b/one/docs/en-US/components/accordion.md index 1f2ba3b..267e9a2 100644 --- a/one/docs/en-US/components/accordion.md +++ b/one/docs/en-US/components/accordion.md @@ -6,9 +6,9 @@ The `Accordion` component needs to be used by the inline [`Collapse`](./collapse ## Demos -### Size +### Size variants -Available size variants for the ui prop: `s` / `m`. +Available size variants for the [`ui`](#props-ui) prop: `s` / `m`. [[ demo src="/demo/accordion/size.vue" ]] From 5dd4b0aad16edcdd8e7af624478cca661ae39cc6 Mon Sep 17 00:00:00 2001 From: xiaoxunyao Date: Fri, 21 Jan 2022 16:20:32 +0800 Subject: [PATCH 20/21] docs: docs update --- one/docs/en-US/components/anchor.md | 2 +- one/docs/en-US/components/badge.md | 6 +++--- one/docs/en-US/components/cascader.md | 30 +++++++++++++-------------- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/one/docs/en-US/components/anchor.md b/one/docs/en-US/components/anchor.md index 6f8ca92..56f9bda 100644 --- a/one/docs/en-US/components/anchor.md +++ b/one/docs/en-US/components/anchor.md @@ -14,7 +14,7 @@ When the `Anchor` component is in the container (rolling with the container), th [[ demo src="/demo/anchor/sticky.vue" ]] -### Specify Offset +### Specify offset Use the [`target-offset`](#props-target-offset) prop to control where the anchor scrolls into the container and becomes active. diff --git a/one/docs/en-US/components/badge.md b/one/docs/en-US/components/badge.md index ef13af3..2e4c416 100644 --- a/one/docs/en-US/components/badge.md +++ b/one/docs/en-US/components/badge.md @@ -2,19 +2,19 @@ ## Demo -### Text Badge +### Text badge Badge content can be text. [[ demo src="/demo/badge/text.vue" ]] -### Digital Badge +### Digital badge Badge content can be number, When the maximum value is exceeded, it can be displayed as *Maximum+*. [[ demo src="/demo/badge/number.vue" ]] -### Round Dots Badge +### Round Dots badge No badge content is provided, The badge will be displayed in a dot style in the upper right corner. diff --git a/one/docs/en-US/components/cascader.md b/one/docs/en-US/components/cascader.md index f795599..58268c2 100644 --- a/one/docs/en-US/components/cascader.md +++ b/one/docs/en-US/components/cascader.md @@ -10,37 +10,37 @@ Available size variants for the ui prop:`xs` / `s` / `m` / `l`. ### Inline -Use the [`inline`](#props-inline) property to enable inline. +Use the [`inline`](#props-inline) prop to enable inline. [[ demo src="/demo/cascader/inline.vue" ]] ### Search -Use the [`searchable`](#props-searchable) property to enable search. +Use the [`searchable`](#props-searchable) prop to enable search. [[ demo src="/demo/cascader/searchable.vue" ]] -### Multiple Choice +### Multiple choice -Use the [`multiple`](#props-multiple) property to enable multiple choice. +Use the [`multiple`](#props-multiple) prop to enable multiple choice. [[ demo src="/demo/cascader/multiple.vue" ]] ### Select -Use the [`select-mode`](#props-select-mode) property to control which items can be selected in single-select mode. +Use the [`select-mode`](#props-select-mode) prop to control which items can be selected in single-select mode. [[ demo src="/demo/cascader/select-mode.vue" ]] -### Column Trigger +### Column trigger -Use the [`column-trigger`](#props-column-trigger) property to control when the subordinates in the dropdown panel are expanded. +Use the [`column-trigger`](#props-column-trigger) prop to control when the subordinates in the dropdown panel are expanded. [[ demo src="/demo/cascader/column-trigger.vue" ]] -### Render Selected +### Render selected -Use the [`value-display`](#props-value-display) property to control how the selected value is displayed. +Use the [`value-display`](#props-value-display) prop to control how the selected value is displayed. [[ demo src="/demo/cascader/value-display.vue" ]] @@ -67,8 +67,8 @@ Use the [`value-display`](#props-value-display) property to control how the sele | ``value-display`` | `'complete' | 'simple'` | `simple` | [^value-display] | | ``disabled`` | `boolean=` | `false` | Whether is it disabled state. | | ``readonly`` | `boolean=` | `false` | Whether is it readonly state. | -| ``overlay-class`` | `string | Array | Object=` | - | See the [`overlay`](./overlay) component's [`overlay-class`](./overlay#props-overlay-class) property. | -| ``overlay-style`` | `string | Array | Object=` | - | See the [`Overlay`](./overlay) component's [`overlay-style`](./overlay#props-overlay-style) property. | +| ``overlay-class`` | `string | Array | Object=` | - | See the [`overlay`](./overlay) component's [`overlay-class`](./overlay#props-overlay-class) prop. | +| ``overlay-style`` | `string | Array | Object=` | - | See the [`Overlay`](./overlay) component's [`overlay-style`](./overlay#props-overlay-style) prop. | | ``match`` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | Support custom highlighting logic, default case insensitive, refer to [`Autocomplete`](./Autocomplete#custom-search). | | ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | Support custom search hit logic, refer to [`Autocomplete`](./Autocomplete#custom-search). | @@ -94,7 +94,7 @@ Options list, items of type `{label, value, options, disabled, position, ...}`. | `label` | `string` | Textual description of the option. | | `value` | `*` | The value corresponding to the option. | | `position` | `string` | How to display subordinate nodes, pop up by default, set `inline` to display inline. | -| `options` | `Array=` | An array of options' sub-options, the array item type is the same as the [`options`](#props-options) property array item. | +| `options` | `Array=` | An array of options' sub-options, the array item type is the same as the [`options`](#props-options) prop array item. | | `disabled` | `boolean=` | Whether the option is disabled. | +++ ^^^ @@ -195,14 +195,14 @@ The area in front of each column in the drop-down panel. No default content. +++Scopes | Name | Type | Description | | -- | -- | -- | -| `option` | `Object` | This parent options of the column, where the `options` property can get the data of the current column. | +| `option` | `Object` | This parent options of the column, where the `options` prop can get the data of the current column. | +++ ^^^ ^^^slot-label Drop-down button text area. -Default content: the value of the `label` property corresponding to the selected option or the text content of the selected option in inline mode. +Default content: the value of the `label` prop corresponding to the selected option or the text content of the selected option in inline mode. +++Scopes | Name | Type | Description | @@ -220,7 +220,7 @@ PS. Fields other than the fields described above in the current options data are ^^^slot-option-label Text area for dropdown options (without `options`). -Default content: The value of the option `label` property. +Default content: The value of the option `label` prop. +++Scopes | Name | Type | Description | From 0f7ef86edb988ec7ca8267fb9962b114b39593f3 Mon Sep 17 00:00:00 2001 From: xiaoxunyao Date: Fri, 28 Jan 2022 16:59:29 +0800 Subject: [PATCH 21/21] docs: update docs --- one/docs/en-US/components/anchor.md | 2 +- one/docs/en-US/components/autocomplete.md | 2 +- one/docs/en-US/components/badge.md | 26 +-- one/docs/en-US/components/cascader.md | 201 +++++++++++----------- 4 files changed, 116 insertions(+), 115 deletions(-) diff --git a/one/docs/en-US/components/anchor.md b/one/docs/en-US/components/anchor.md index 56f9bda..31c5b07 100644 --- a/one/docs/en-US/components/anchor.md +++ b/one/docs/en-US/components/anchor.md @@ -1,6 +1,6 @@ # Anchor -## Demo +## Demos ### Basic anchor diff --git a/one/docs/en-US/components/autocomplete.md b/one/docs/en-US/components/autocomplete.md index c48d863..2aca6a9 100644 --- a/one/docs/en-US/components/autocomplete.md +++ b/one/docs/en-US/components/autocomplete.md @@ -1,6 +1,6 @@ # Autocomplete -## Demo +## Demos ### Basic Trigger diff --git a/one/docs/en-US/components/badge.md b/one/docs/en-US/components/badge.md index 2e4c416..0f9a5ee 100644 --- a/one/docs/en-US/components/badge.md +++ b/one/docs/en-US/components/badge.md @@ -1,6 +1,6 @@ # Badge -## Demo +## Demos ### Text badge @@ -8,19 +8,21 @@ Badge content can be text. [[ demo src="/demo/badge/text.vue" ]] -### Digital badge +### Numeric badge -Badge content can be number, When the maximum value is exceeded, it can be displayed as *Maximum+*. +The content can also be a number and can be can be displayed as “max+” when exceeding the maximum value. [[ demo src="/demo/badge/number.vue" ]] -### Round Dots badge +### Corner badge -No badge content is provided, The badge will be displayed in a dot style in the upper right corner. +When no badge content is provided, the badge will be displayed in the upper right corner in a dot style. [[ demo src="/demo/badge/corner-dot.vue" ]] -No slot content is provided, the badge will be displayed in a dot style. +### Dot badge + +When no slot content is provided, the badge will be displayed in a dot style. [[ demo src="/demo/badge/dot.vue" ]] @@ -31,12 +33,12 @@ No slot content is provided, the badge will be displayed in a dot style. | Name | Type | Default | Description | | -- | -- | -- | -- | | ``type`` | `string=` | `'error'` | [^type] | -| ``value`` | `string | number` | - | Badge content value. When it is a value of type `number`, it is limited by the [`max`](#props-max) attribute. `max` is ignored when it is of type `string`. | -| ``max`` | `number=` | `badge.max` | The maximum value of the badge value, when `value` exceeds this value, the badge content will be displayed as `{max}+`. Ignored when `value` is `string`. | -| ``hidden`` | `boolean=` | `false` | Whether hidden state. | +| ``value`` | `string | number` | - | The badge content value. When it is of type `number`, it is limited by the [`max`](#props-max) prop. `max` is ignored when it is of type `string`. | +| ``max`` | `number=` | `badge.max` | The maximum value of the badge, when `value` exceeds this value, the badge content will be displayed as “max+”. Ignored when `value` is `string`. | +| ``hidden`` | `boolean=` | `false` | Whether the badge is hidden. | ^^^type -Badge state type. The optional values for the built-in style are as follows. When using other values, you need to define the style of `.veui-badge-{type}`. +The status type of the badge. The optional values for built-in styles are as follows. When using other values, you need to define the styles for `.veui-badge-{type}`. +++Enum | Value | Description | @@ -53,6 +55,4 @@ Badge state type. The optional values for the built-in style are as follows. Whe | Name | Description | | -- | -- | -| ``default`` | The target content that the badge needs to display. | - - +| ``default`` | The target content that the badge needs to display upon. | diff --git a/one/docs/en-US/components/cascader.md b/one/docs/en-US/components/cascader.md index 58268c2..1a2d5d6 100644 --- a/one/docs/en-US/components/cascader.md +++ b/one/docs/en-US/components/cascader.md @@ -1,34 +1,34 @@ # Cascader -## Demo +## Demos -### Size +### Size variants Available size variants for the ui prop:`xs` / `s` / `m` / `l`. [[ demo src="/demo/cascader/size.vue" ]] -### Inline +### Inline cascader -Use the [`inline`](#props-inline) prop to enable inline. +Use the [`inline`](#props-inline) prop to enable inline mode. [[ demo src="/demo/cascader/inline.vue" ]] -### Search +### Searchable options -Use the [`searchable`](#props-searchable) prop to enable search. +Use the [`searchable`](#props-searchable) prop to enable option searching. [[ demo src="/demo/cascader/searchable.vue" ]] -### Multiple choice +### Multiple selections -Use the [`multiple`](#props-multiple) prop to enable multiple choice. +Use the [`multiple`](#props-multiple) prop to enable multiple selections. [[ demo src="/demo/cascader/multiple.vue" ]] -### Select +### Select mode -Use the [`select-mode`](#props-select-mode) prop to control which items can be selected in single-select mode. +Use the [`column-trigger`](#props-column-trigger) prop to control when the option groups are expanded. [[ demo src="/demo/cascader/select-mode.vue" ]] @@ -38,7 +38,7 @@ Use the [`column-trigger`](#props-column-trigger) prop to control when the subor [[ demo src="/demo/cascader/column-trigger.vue" ]] -### Render selected +### Displaying values Use the [`value-display`](#props-value-display) prop to control how the selected value is displayed. @@ -53,46 +53,46 @@ Use the [`value-display`](#props-value-display) prop to control how the selected | ``ui`` | `string=` | - | [^ui] | | ``options`` | `Array` | - | [^options] | | ``value`` | `Array<*>|*` | - | [^value] | -| ``multiple`` | `boolean` | `false` | Allow multiple selections. | -| ``inline`` | `boolean` | `false` | Whether the drop-down panel is displayed inline. | -| ``max`` | `number` | - | The maximum number of items allowed to be selected when multiple selections are made. | -| ``placeholder`` | `string` | `cascader.placeholder` | Placeholder text when not selected. | -| ``clearable`` | `boolean` | `false` | Clear selections. | -| ``searchable`` | `boolean` | `false` | Search options. | +| ``multiple`` | `boolean` | `false` | Whether to allow multiple selections. | +| ``inline`` | `boolean` | `false` | Whether the dropdown panel is displayed in inline mode (expanding options will split the panel instead of expanding it outwards). | +| ``max`` | `number` | - | The maximum number of selectable options when performing multiple selections. | +| ``placeholder`` | `string` | `cascader.placeholder` | `cascader.placeholder` | Placeholder text when no option is selected. | +| ``clearable`` | `boolean` | `false` | Whether the cascader is clearable. | +| ``searchable`` | `boolean` | `false` | Whether the cascader is searchable. | | ``expanded`` | `boolean=` | `false` | [^expanded] | -| ``column-trigger`` | `hover | click` | `click` | [^column-trigger] | -| ``select-mode`` | `'leaf-only' | 'any'` | `any` | [^select-mode] | +| ``column-trigger`` | `'hover' | 'click'` | `'click'` | [^column-trigger] | +| ``select-mode`` | `'leaf-only' | 'any'` | `'any'` | [^select-mode] | | ``column-width`` | `number | string` | - | [^column-width] | | ``show-select-all`` | `boolean` | `false` | In multiple selection mode is there a select all button. | -| ``value-display`` | `'complete' | 'simple'` | `simple` | [^value-display] | -| ``disabled`` | `boolean=` | `false` | Whether is it disabled state. | -| ``readonly`` | `boolean=` | `false` | Whether is it readonly state. | -| ``overlay-class`` | `string | Array | Object=` | - | See the [`overlay`](./overlay) component's [`overlay-class`](./overlay#props-overlay-class) prop. | -| ``overlay-style`` | `string | Array | Object=` | - | See the [`Overlay`](./overlay) component's [`overlay-style`](./overlay#props-overlay-style) prop. | -| ``match`` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | Support custom highlighting logic, default case insensitive, refer to [`Autocomplete`](./Autocomplete#custom-search). | -| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | Support custom search hit logic, refer to [`Autocomplete`](./Autocomplete#custom-search). | +| ``value-display`` | `'complete' | 'simple'` | `'simple'` | [^value-display] | +| ``disabled`` | `boolean=` | `false` | Whether the cascader is disabled. | +| ``readonly`` | `boolean=` | `false` | Whether the cascader is read-only. | +| ``overlay-class`` | `string | Array | Object=` | - | See the [`overlay-class`](./overlay#props-overlay-class) prop of the [`Overlay`](./overlay) component. | +| ``overlay-style`` | `string | Array | Object=` | - | See the [`overlay-style`](./overlay#props-overlay-style) prop of the [`Overlay`](./overlay) component. | +| ``match`` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | To customize highlighting logic. Case insensitive by default, see [`Autocomplete`](./Autocomplete#custom-search). | +| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | To customize search hit logic, see [`Autocomplete`](./Autocomplete#custom-search). | ^^^ui -preset style. +Style variants. +++Enum -| value | Description | +| Value | Description | | -- | -- | -| `xs` | Ultra small size. | +| `xs` | Extra small size. | | `s` | Small size. | | `m` | Medium size. | -| `l` | Lage size. | +| `l` | Large size. | +++ ^^^ ^^^options -Options list, items of type `{label, value, options, disabled, position, ...}`. +The list of options with items of type `{label, value, options, disabled, position, ...}`. -+++Fields ++++Properties | Name | Type | Description | | -- | -- | -- | -| `label` | `string` | Textual description of the option. | -| `value` | `*` | The value corresponding to the option. | +| `label` | `string` | The descriptive label of the option. | +| `value` | `*` | The value of the option. | | `position` | `string` | How to display subordinate nodes, pop up by default, set `inline` to display inline. | | `options` | `Array=` | An array of options' sub-options, the array item type is the same as the [`options`](#props-options) prop array item. | | `disabled` | `boolean=` | Whether the option is disabled. | @@ -104,7 +104,7 @@ Options list, items of type `{label, value, options, disabled, position, ...}`. `v-model` ::: -Selected value. +The selected value / values. ^^^ ^^^expanded @@ -112,17 +112,17 @@ Selected value. `.sync` ::: -Whether the drop-down menu is expanded. +Whether the dropdown menu is expanded. ^^^ ^^^column-trigger -Drop-down panel lower-level to be expanded at the time. +The timing of expanding sub-options in the dropdown panel. +++Enum | Value | Description | | -- | -- | -| `hover` | The cursor hovers to expand the next. | -| `click` | The cursor click to expand the next. | +| `hover` | Expand on hover. | +| `click` | Expand on click.| +++ ^^^ @@ -132,25 +132,25 @@ Controls which items can be selected in single-select mode. +++Enum | Value | Description | | -- | -- | -| `leaf-only` | Only leaf nodes can be selected. | -| `any` | Each nodes can be selected. | +| `leaf-only` | Only leaf options can be selected. | +| `any` | Any option can be selected. | +++ ^^^ ^^^column-width -When there are multiple columns in the drop-down panel, uniformly control the width of the columns except the last column. +When there are multiple columns in the dropdown panel, uniformly control the width of the columns except the last one. -When there value is a numeric value or can be converted to a numeric value, it is treated as a pixel value. +When the value is a numeric value or can be converted to a numeric value, it is treated as a pixel value. ^^^ ^^^value-display -Controls how the selected value is displayed style. +Controls how the selected value is displayed. +++Enum | Value | Description | | -- | -- | -| `complete` | A path that fully displays the selected value, such as "Hollywood > Disneyland Park". | -| `simple` | Only display the selected value text. | +| `complete` | Displays a path that fully displays the selected value, such as “China > Shanghai”. | +| `simple` | Only displays the label of the selected value. | +++ ^^^ @@ -159,32 +159,32 @@ Controls how the selected value is displayed style. | Name | Description | | -- | -- | | ``trigger`` | [^slot-trigger] | -| ``pane`` | Content slot in drop-down panel. As [`trigger`](#slots-trigger) slot with domain parameter. | -| ``before`` | The content before the list of options. No default content. The scope parameter is the as the [`trigger`](#slots-trigger) slot. | -| ``after`` | The content after the option list. No default content. The scope parameter is the as the [`trigger`](#slots-trigger) slot. | +| ``pane`` | The content of the dropdown panel. Shares the same slot props with the [`trigger`](#slots-trigger) slot. | +| ``before`` | The content before the list of options. No default content. Shares the same slot props with the [`trigger`](#slots-trigger) slot. | +| ``after`` | The content after the option list. No default content. Shares the same slot props with the [`trigger`](#slots-trigger) slot. | | ``column-before`` | [^slot-column-before] | -| ``column-after`` | The area after each column in the drop-down panel. No default content. The scope parameter is the as the [`column-before`](#slots-column-before) slot. | +| ``column-after`` | The area after each column in the dropdown panel. No default content. Shares the same slot props with the [`before`](#slots-before) slot. | | ``label`` | [^slot-label] | | ``option-label`` | [^slot-option-label] | | ``option`` | [^slot-option] | | ``selected`` | [^slot-selected] | ^^^slot-trigger -The entire pull down trigger area. +The entire dropdown trigger area. -Default content: drop-down button. +Default content: the dropdown button. -+++Scopes ++++Slot props | Name | Type | Description | | -- | -- | -- | -| `value` | `*` | Selected value. | -| `selected` | `Object` | Selected object. | -| `expanded` | `boolean` | Whether drop-down panel expane. | -| `keyword` | `string` | Search value. | -| `select` | `function(option: Object): void` | Use to set options. | -| `toggle` | `function(force: boolean): void` | Use to toggle the expanded state of the drop-down menu. | -| `clear` | `function(): void` | Use to clear selected options. | -| `remove` | `function(option: Object): void` | Use to remove a option, the parameter `option` is the option. | +| `value` | `*` | The selected value. | +| `selected` | `Object` | The selected option object. | +| `expanded` | `boolean` | Whether the dropdown panel is expanded. | +| `keyword` | `string` | The search keyword. | +| `select` | `function(option: Object): void` | Selects the specified option. | +| `toggle` | `function(force: boolean): void` | Toggles the expanded state of the dropddown menu. | +| `clear` | `function(): void` | Clears selected options. | +| `remove` | `function(option: Object): void` | Removes the specified option from seletions. | | `updateKeyword` | `function(keyword: string): void` | Use to modify selected value. | +++ ^^^ @@ -192,72 +192,73 @@ Default content: drop-down button. ^^^slot-column-before The area in front of each column in the drop-down panel. No default content. -+++Scopes ++++Slot props | Name | Type | Description | | -- | -- | -- | -| `option` | `Object` | This parent options of the column, where the `options` prop can get the data of the current column. | +| `option` | `Object` | The parent option of the column, where the `options` property gets the data of the current column. | +++ ^^^ ^^^slot-label -Drop-down button text area. +The label of the dropdown button. -Default content: the value of the `label` prop corresponding to the selected option or the text content of the selected option in inline mode. +Displays the label of selected option or the text content of the selected embedded option by default. -+++Scopes ++++Slot props | Name | Type | Description | | -- | -- | -- | -| `label` | `string` | Selected text. | -| `value` | `*` | Selected value. | -| `checked` | `boolean` | Whether selected a certain value。 | -| `disabled` | `boolean=` | Whether option is disabled. | +| `label` | `string` | The descriptive label of the selected option. | +| `value` | `*` | The value of the selected option. | +| `checked` | `boolean` | Whether the cascader has a selected value. | +| `disabled` | `boolean=` | Whether the option is disabled. | +++ -PS. Fields other than the fields described above in the current options data are also automatically bound to scope parameters via `v-bind`. +Additionally, custom properties apart from the listed ones will also be passed into the slot props object via `v-bind`. ^^^ ^^^slot-option-label -Text area for dropdown options (without `options`). + +The label text of each option (option without `options` property). Displays the label of the option by default. Default content: The value of the option `label` prop. -+++Scopes ++++Slot props | Name | Type | Description | | -- | -- | -- | -| `option` | `Object` | Current option. | -| `select` | `function(option: Object): void` | Selected current option. | -| `expand` | `function(option: Object): void` | Expand current option. | -| `click` | `function(option: Object): void` | Click current option content area, The current option is selected and/or expanded as appropriate. | +| `option` | `Object` | The descriptive label of the option. | +| `select` | `function(option: Object): void` | Selects the current option. | +| `expand` | `function(option: Object): void` | Expands the current option. | +| `click` | `function(option: Object): void` | Clicks the content of the current option, will select/expand the current option as appropriate. | +++ ^^^ ^^^slot-option -The entire area of drop-down options available for selection. +The entire area of the option. -Default content: Component default structure inside `Option`. +Default content: default content of the internal `Option` component. -The scope parameter is the same as the [`option-label`](#slots-option-label) slot. +Shares the same slot props with the [`option-label`](#slots-option-label) slot. ^^^ ^^^slot-selected -Selected value rendering area. +The area that displays the selected value. -Default content: render the tag of the selected item when single selected; render the tag of each selected item as `Tag` when multiple selected. +Default content: the label of selected option for single selection, the tags of each selected option for multiple selection. -+++Radio scopes ++++Slot props (single selection) | Name | Type | Description | | -- | -- | -- | -| `label` | `string` | Option text. | +| `label` | `string` | Option label. | | `value` | `*` | Option value. | -| `checked` | `boolean` | Whether already option. | -| `disabled` | `boolean=` | Whether option disable. | +| `checked` | `boolean` | Whether the option is selected. | +| `disabled` | `boolean=` | Whether the option is disabled. | +++ -+++Multiple choice scopes ++++Slot props (multiple selections) | Name | Type | Description | | -- | -- | -- | -| `selected` | `Array` | Array of selected item data. | +| `selected` | `Array` | Array of the selected options. | +++ ^^^ @@ -265,34 +266,34 @@ Default content: render the tag of the selected item when single selected; rende | Name | Description | | -- | -- | -| ``input`` | Triggered when a search keyword is entered. The callback parameter is `(value: string)`, and `value` is the `value` value of the input box. | +| ``input`` | Triggered when a search keyword is entered. The callback parameter is `(value: string)`, and `value` is the value of the input box. | | ``select`` | [^event-select] | -| ``afteropen`` | Fired when the drop-down menu is turned on. | -| ``afterclose`` | Fired when the drop-down menu is turned off. | +| ``afteropen`` | Triggered after the dropdown panel is expanded. | +| ``afterclose`` | Triggered after the dropdown panel is collapsed. | ^^^event-select :::badges `v-model` ::: -Triggered after the selected state changes, the callback parameter is `(value: *)`. `value` is the value of the currently selected `value` field. +Triggered after the selected state changes, the callback parameter is `(value: *)`. `value` is the value of the currently selected option value. ^^^ -### Global config +### Global configs -| Config item | Type | Default | Description | +| Key | Type | Default | Description | | -- | -- | -- | -- | | ``cascader.placeholder`` | `string` | `@@cascader.placeholder` | Placeholder content when not selected. | :::tip -A value starting with `@@` refers to the relevant field in the multilingual config. +`@@` prefixed values denote corresponding properties in the locale settings. ::: -### Icon +### Icons | Name | Description | | -- | -- | -| ``expand`` | Expand drop-down. | -| ``collapse`` | pack up drop-down. | -| ``clear`` | clear. | -| ``separator`` | separator. | +| ``expand`` | Expand the dropdown. | +| ``collapse`` | Collapse the dropdown. | +| ``clear`` | Clear selected. | +| ``separator`` | Toggle icon. |