docs: add english document

one/docs/en-US/components/accordion.md

@@ -0,0 +1,104 @@
+# Accordion
+
+:::tip
+The `Accordion` component needs to be used by the inline [`Collapse`](./collapse) component.
+:::
+
+## Demos
+
+### Size
+
+Available size variants for the ui prop: `s` / `m`.
+
+[[ demo src="/demo/accordion/size.vue" ]]
+
+### Style
+
+Use the [`ui`](#props-ui) property to apply style variants.
+
+[[ demo src="/demo/accordion/variant.vue" ]]
+
+### Multiple
+
+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
+
+Use the [`toggle-position`](#props-toggle-position) property to set the position of the toggle icon.
+
+[[ demo src="/demo/accordion/position.vue" ]]
+
+## API
+
+### Props
+
+| Name | Type | Default | Description |
+| -- | -- | -- | -- |
+| ``ui`` | `string=` | - | [^ui] |
+| ``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<string>` | - | [^expanded] |
+| ``toggle-position`` | `string` | `'start'` | [^toggle-position] |
+
+^^^ui
+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` | 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. |
++++
+^^^
+
+^^^expanded
+:::badges
+`.sync`
+:::
+
+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
+The position of the toggle icon.
+
++++Enum
+| Value | Description |
+| -- | -- |
+| `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. |
++++
+^^^
+
+### Slots
+
+| Name | Description |
+| -- | -- |
+| ``default`` | The content area, which is used to place inline `Collapse` components. |
+
+### Events
+
+| Name | Description |
+| -- | -- |
+| ``toggle`` | [^toggle] |
+
+^^^toggle
+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` | Whether to expand the collapsible panel. |
+| `name` | `string` | The name of the collapsible panel. |
+| `expanded` | `string | Array<string>` | Identifiers of all currently expanded accordion panel. |
++++
+^^^

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.vue" ]]
+
+## API
+
+### Props
+
+| 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. |
+
+^^^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<Object>=` | Child node array of the node, Array item type is the same as the [`items`](#props-items) array item. |
++++
+^^^
+
+### 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.
+^^^

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<string | Object>=` | `[]` | [^datasource] |
+| ``value`` | `*` | - | [^prop-value] |
+| ``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<string>=` | `'input'` | Trigger the suggestion drop-down panel, the available values are: `'input'`, `'focus'`. |
+| ``expanded`` | `boolean=` | `false` | [^expanded] |
+| ``placeholder`` | `string=` | - | Placeholder. |
+| ``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. |
+| ``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<Object>=` | 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. 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<string | Object>` | 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.
+^^^

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` | 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}`.
+
++++Enum
+| Value | Description |
+| -- | -- |
+| `info` | Info style. |
+| `success` | Success style. |
+| `warning` | Warning style. |
+| `error` | Error style. |
+| `aux` | Aux style. |
++++
+^^^
+
+### Slots
+
+| Name | Description |
+| -- | -- |
+| ``default`` | The target content that the badge needs to display. |
+
+