taolin/docs_vue2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: update search, refine docs

Browse Source
This commit is contained in:
Justineo
2021-08-23 19:37:43 +08:00
parent c3d26e6e80
commit 6fef8697a8
40 changed files with 5331 additions and 2199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
one/docs/en-US/components/alert-box.md
View File

@@ -23,7 +23,12 @@ You can customize the title of alert box with the `title` prop.
| `open` | `boolean` | `false` | [^open] |
| `type` | `string=` | `'success'` | [^type] |
| `title` | `string=` | - | The title of the alert box. |
| `overlay-class` | `string|Array|Object=` | - | See the `overlay-class` prop of [`Overlay`](./overlay). |
| `loading` | `boolean=` | `false` | Wehter the confirm box is in loading state. When loading, the OK button will enter loading state as well and become unclickable. |
| `disabled` | `boolean=` | `false` | Wehter the confirm box is disabled. When disabled, the OK button will be disabled as well and become unclickable. |
| `ok-label` | `string=` | - | The text content of the “OK” button. |
| `before-close` | `function(string): boolean=|Promise<boolean=>` | - | Executed when user interaction is about to trigger closing the alert box. See the [`before-close`](./dialog#props) prop of the [`Dialog`](./dialog) component. |
| `overlay-class` | `string|Array|Object=` | - | See the [`overlay-class`](./overlay#props) prop of the [`Overlay`](./overlay) component. |
| `overlay-style` | `string|Array|Object=` | - | See the [`overlay-style`](./overlay#props) prop of the [`Overlay`](./overlay) component. |
^^^open
:::badges

2
one/docs/en-US/components/breadcrumb-item.md
View File

@@ -6,7 +6,7 @@
## Demos
See [the demos of `Breadcrumb`](./grid-breadcrumb#demos).
See [the demos of `Breadcrumb`](./breadcrumb#demos).
## API

8
one/docs/en-US/components/confirm-box.md
View File

@@ -14,7 +14,13 @@ The title and content are both customizable.
| --- | --- | --- | --- |
| `open` | `boolean` | `false` | [^open] |
| `title` | `string=` | - | The title of the confirm box. |
| `overlay-class` | `string|Array|Object=` | - | See the `overlay-class` prop of [`Overlay`](./overlay). |
| `loading` | `boolean=` | `false` | Wehter the confirm box is in loading state. When loading, the OK button will enter loading state as well and become unclickable. |
| `disabled` | `boolean=` | `false` | Wehter the confirm box is disabled. When disabled, the OK button will be disabled as well and become unclickable. |
| `ok-label` | `string=` | - | The text content of the “OK” button. |
| `cancel-label` | `string=` | - | The text content of the “Cancel” button. |
| `before-close` | `function(string): boolean=|Promise<boolean=>` | - | Executed when user interaction is about to trigger closing the confirm box. See the [`before-close`](./dialog#props) prop of the [`Dialog`](./dialog) component. |
| `overlay-class` | `string|Array|Object=` | - | See the [`overlay-class`](./overlay#props) prop of the [`Overlay`](./overlay) component. |
| `overlay-style` | `string|Array|Object=` | - | See the [`overlay-style`](./overlay#props) prop of the [`Overlay`](./overlay) component. |
^^^open
:::badges

3
one/docs/en-US/components/dialog.md
View File

@@ -45,6 +45,9 @@ Available size/dimension variants for the `ui` prop: `s`/`m`/`narrow`/`medium`/`
| `inline` | `boolean=` | `false` | Whether the dialog is displayed inline thus takes up space. |
| `footless` | `boolean=` | `false` | Whether to hide the default footer. |
| `loading` | `boolean=` | `false` | Wehter the dialog is in loading state. When loading, the OK button will enter loading state as well and become unclickable. |
| `disabled` | `boolean=` | `false` | Wehter the dialog is disabled. When disabled, the OK button will be disabled as well and become unclickable. |
| `ok-label` | `string=` | - | The text content of the “OK” button. |
| `cancel-label` | `string=` | - | The text content of the “Cancel” button. |
| `priority` | `number=` | - | The stacking priority of the dialog overlay. See the [`priority`](./overlay#props) prop of [`Overlay`](./overlay) component. |
| `before-close` | `function(string): boolean=|Promise<boolean=>` | - | [^before-close] |
| `overlay-class` | `string|Object=` | - | The class expression applied to the root element of the dialog overlay. See the [`overlay-class`](./overlay#props) prop of [`Overlay`](./overlay) component. |

3
one/docs/en-US/components/dropdown.md
View File

@@ -55,7 +55,8 @@ Use the `trigger` prop to specify when to open the dropdown menu. Use the `split
| `split` | `boolean=` | `false` | Whether to split the dropdown button into a command button and a toggle button for the dropdown layer. |
| `expanded` | `boolean=` | `false` | [^expanded] |
| `disabled` | `boolean=` | `false` | Whether the dropdown is disabled. |
| `overlay-class` | `string|Array|Object=` | - | See the `overlay-class` prop of [`Overlay`](./overlay). |
| `overlay-class` | `string|Array|Object=` | - | See the [`overlay-class`](./overlay#props) prop of the [`Overlay`](./overlay) component. |
| `overlay-style` | `string|Array|Object=` | - | See the [`overlay-style`](./overlay#props) prop of the [`Overlay`](./overlay) component. |
^^^ui
Style variants.

12
one/docs/en-US/components/input.md
View File

@@ -36,6 +36,7 @@ Use the `disabled` prop to set an input to disabled state.
| `composition` | `boolean=` | `false` | Whether the input process should be aware of composition. |
| `select-on-focus` | `boolean=` | `false` | Whether to select text content when focused. |
| `get-length` | `function(string): number=` | Used to customize length calculation of the input. |
| `trim` | `boolean|string=` | `false` | [^trim] |
^^^ui
Style variants.
@@ -70,6 +71,17 @@ The type of the input. See the [`type`](https://developer.mozilla.org/en-US/docs
+++
^^^
^^^trim
Wether to trim the input value. If set to `true`, the input value will be trimmed from both ends. If set to `false`, the input value will not be trimmed. If set to a string, the input value will be trimmed from the specified side.
+++Enum
| Value | Description |
| -- | -- |
| `both` | Trim from both ends. Equivalent to `true`. |
| `start` | Trim from the start. |
| `end` | Trim from the end. |
+++
### Slots
| Name | Description |

3
one/docs/en-US/components/option-group.md
View File

@@ -17,7 +17,8 @@ See [the demos of `Select`](./select#demos) or [the demos of `Dropdown`](./dropd
| `label` | `string` | The descriptive label of the option group. |
| `options` | `Array<Object>` | `[]` | [^options] |
| `position` | `string` | `inline` | [^position] |
| `overlay-class` | `string|Array|Object=` | - | See the `overlay-class` prop of [`Overlay`](./overlay). |
| `overlay-class` | `string|Array|Object=` | - | See the [`overlay-class`](./overlay#props) prop of the [`Overlay`](./overlay) component. |
| `overlay-style` | `string|Array|Object=` | - | See the [`overlay-style`](./overlay#props) prop of the [`Overlay`](./overlay) component. |
^^^options
The list of options with the option type being `{label, value, disabled, ...}`.

4
one/docs/en-US/components/overlay.md
View File

@@ -43,6 +43,7 @@ The stacking order of child overlays a affected by their parent overlays.
| `inline` | `boolean` | `false` | Whether to render the overlay as inline content. |
| `local` | `boolean` | `false` | Whether to keep the overlay in it's original DOM location, instead of moving it to the global scope and participates in the [global overlay management](../advanced/overlay). |
| `overlay-class` | `string|Array|Object=` | - | [^overlay-class] |
| `overlay-style` | `string|Array|Object=` | - | [^overlay-style] |
| `options` | `Object` | Configuration object passed to the `modifiers` option of the underlying Popper.js implementation. See [here](https://popper.js.org/docs/v1/#modifiers) for more details. |
^^^open
@@ -81,6 +82,9 @@ As the root element of all overlays are placed as direct children of the `<body>
:::
^^^
^^^overlay-style
The style expression applied to the root element of the overlay. Supports all values defined by [Vue's `style` expressions](https://vuejs.org/v2/guide/class-and-style.html#Binding-Inline-Styles).
### Slots
| Name | Description |

3
one/docs/en-US/components/popover.md
View File

@@ -32,7 +32,8 @@ Use the `trigger` prop to specify when to show/hide the popover.
| `position` | `string` | `'top'` | [^position] |
| `trigger` | `string` | `'hover'` | [^trigger] |
| `hide-delay` | `number` | `tooltip.hideDelays` | Time (in milliseconds) to wait before hiding the popover after the close trigger is triggered. Can be used to prevent the popover being immediately closed after pointer leaves the `target` element and before it enters the popover itself. |
| `overlay-class` | `string|Array|Object=` | - | See the [`overlay-class` prop](./overlay#props) of the [`Overlay`](./overlay) component. |
| `overlay-class` | `string|Array|Object=` | - | See the [`overlay-class`](./overlay#props) prop of the [`Overlay`](./overlay) component. |
| `overlay-style` | `string|Array|Object=` | - | See the [`overlay-style`](./overlay#props) prop of the [`Overlay`](./overlay) component. |
^^^ui
Style variants.

8
one/docs/en-US/components/prompt-box.md
View File

@@ -14,7 +14,13 @@
| `title` | `string` | - | The title of the prompt box. |
| `content` | `string` | - | The description text above the text input. |
| `value` | `string` | `''` | [^value] |
| `overlay-class` | `string|Array|Object=` | - | See the `overlay-class` prop of [`Overlay`](./overlay). |
| `loading` | `boolean=` | `false` | Wehter the prompt box is in loading state. When loading, the OK button will enter loading state as well and become unclickable. |
| `disabled` | `boolean=` | `false` | Wehter the prompt box is disabled. When disabled, the OK button will be disabled as well and become unclickable. |
| `ok-label` | `string=` | - | The text content of the “OK” button. |
| `cancel-label` | `string=` | - | The text content of the “Cancel” button. |
| `before-close` | `function(string): boolean=|Promise<boolean=>` | - | Executed when user interaction is about to trigger closing the prompt box. See the [`before-close`](./dialog#props) prop of the [`Dialog`](./dialog) component. |
| `overlay-class` | `string|Array|Object=` | - | See the [`overlay-class`](./overlay#props) prop of the [`Overlay`](./overlay) component. |
| `overlay-style` | `string|Array|Object=` | - | See the [`overlay-style`](./overlay#props) prop of the [`Overlay`](./overlay) component. |
^^^open
:::badges

3
one/docs/en-US/components/select.md
View File

@@ -48,7 +48,8 @@ Use the `multiple` prop to enable multiple selections.
| `expanded` | `boolean=` | `false` | [^expanded] |
| `disabled` | `boolean=` | `false` | Whether the select is disabled. |
| `readonly` | `boolean=` | `false` | Whether the select is read-only. |
| `overlay-class` | `string|Array|Object=` | - | See the `overlay-class` prop of [`Overlay`](./overlay). |
| `overlay-class` | `string|Array|Object=` | - | See the [`overlay-class`](./overlay#props) prop of the [`Overlay`](./overlay) component. |
| `overlay-style` | `string|Array|Object=` | - | See the [`overlay-style`](./overlay#props) prop of the [`Overlay`](./overlay) component. |
^^^ui
Style variants.

3
one/docs/en-US/components/tooltip.md
View File

@@ -33,7 +33,8 @@ Use the `trigger` prop to specify when to show/hide the tooltip.
| `trigger` | `string` | `'hover'` | [^trigger] |
| `interactive` | `boolean` | `true` | Whether the tooltip content is interactive. When set to `false`, the tooltip will be automatically hidden after the event specified by `trigger` is triggered outside the `target`. |
| `hide-delay` | `number` | `tooltip.hideDelays` | Time (in milliseconds) to wait before hiding the tooltip after the close trigger is triggered. Can be used to prevent the tooltip being immediately closed after pointer leaves the `target` element and before it enters the tooltip itself. |
| `overlay-class` | `string|Array|Object=` | - | See the [`overlay-class` prop](./overlay#props) of the [`Overlay`](./overlay) component. |
| `overlay-class` | `string|Array|Object=` | - | See the [`overlay-class`](./overlay#props) prop of the [`Overlay`](./overlay) component. |
| `overlay-style` | `string|Array|Object=` | - | See the [`overlay-style`](./overlay#props) prop of the [`Overlay`](./overlay) component. |
^^^ui
Style variants.

57
one/docs/en-US/components/transfer.md
View File

@@ -28,13 +28,16 @@ Available size variants for the `ui` prop: `s`/`m`.
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `datasource` | `Array<Object>` | `[]` | [^datasource] |
| `searchable` | `boolean` | `true` | Whether to allow search. |
| `filter` | `function` | See description | [^filter] |
| `selected` | `Array` | `[]` | [^selected] |
| `candidate-placeholder` | `string` | - | The placeholder text in the search input of the candidate panel. |
| `selected-placeholder` | `string` | - | The placeholder text in the search input of the selected panel. |
| `selected-show-mode` | `string` | `'tree'` | [^selected-show-mode] |
| `keys` | `string|function` | `'value'` | The customized unique key for `datasource` items. String values can be used to specify which field value is used. Also a function can bu used to specify a customized key value. |
| `searchable` | `boolean=` | `true` | Whether to allow search. |
| `filter` | `function=` | See description | [^filter] |
| `selected` | `Array=` | `[]` | [^selected] |
| `candidate-placeholder` | `string=` | - | The placeholder text in the search input of the candidate panel. |
| `selected-placeholder` | `string=` | - | The placeholder text in the search input of the selected panel. |
| `candidate-label` | `string=` | - | The title of the candidates panel. |
| `selected-label` | `string=` | - | The title of the selected panel. |
| `selected-show-mode` | `string=` | `'tree'` | [^selected-show-mode] |
| `keys` | `string|function=` | `'value'` | The customized unique key for `datasource` items. String values can be used to specify which field value is used. Also a function can bu used to specify a customized key value. |
| `merge-checked` | `string=` | `keep-all` | [^merge-checked] |
^^^ui
Style variants.
@@ -102,14 +105,28 @@ To specify how should items inside selected panel be displayed.
+++
^^^
^^^merge-checked
Merge strategy for selected values. When all child nodes under a node are selected, you can choose to keep only the parent node, only the child nodes, or both.
+++Enumerated values
| Value | Description |
| --- | --- |
| `keep-all` | The parent and child nodes will both be in the selected value. |
| `upwards` | Merge selected values as far as possible in the ancestor direction. |
| `downwards` | Merge selected values in the direction of descendants if possible. |
+++
^^^
### Slots
| Name | Description |
| -- | -- |
| `candidate-head` | The head area of the candidate panel. |
| `selected-head` | The head area of the selected panel. |
| `candidate-title` | The title text of the candidate panel. |
| `selected-title` | The title text of the selected panel. |
| `candidate` | The candidate panel. |
| `candidate-head` | [^candidate-head] |
| `selected-head` | [^selected-head] |
| `candidate-title` | The title text of the candidate panel. Shares the same scope properties with slot `candidate-head`. |
| `selected-title` | The title text of the selected panel. Shares the same scope properties with slot `selected-head`. |
| `candidate-no-data` | The content displayed when there's no data inside the candidate panel. |
| `selected-no-data` | The content displayed when there's no data inside the selected panel. |
| `candidate-item` | [^candidate-item] |
@@ -117,6 +134,24 @@ To specify how should items inside selected panel be displayed.
| `candidate-item-label` | Label text of each item inside the candidate panel. Shares the same scope properties with slot `candidate-item`. |
| `selected-item-label` | Label text of each item inside the selected panel. Shares the same scope properties with slot `selected-item` when `selected-show-mode` is `'tree'`. Otherwise this slot specifies custom content for any item along the path for all selected leaf item and shares the same scope properties with slot `candidate-item`. |
^^^candidate-head
The head area of the candidate panel.
+++Scope properties
| Name | Type | Description |
| -- | -- | -- |
| `count` | `number` | The number of candidate items. |
^^^
^^^selected-head
The head area of the selected panel.
+++Scope properties
| Name | Type | Description |
| -- | -- | -- |
| `count` | `number` | The number of selected items. |
^^^
^^^candidate-item
The content of each item inside the candidate panel.

14
one/docs/en-US/components/tree.md
View File

@@ -29,6 +29,7 @@ Available size variants for the `ui` prop: `s`/`m`.
| `checked` | `Array` | `[]` | [^checked] |
| `selectable` | `boolean` | `false` | Whether the nodes are selectable. |
| `selected` | `string` | - | [^selected] |
| `merge-checked` | `string` | `keep-all` | [^merge-checked] |
^^^ui
Style variants.
@@ -77,6 +78,19 @@ An array consists of the `value` from datasource items that denotes the checked
An array consists of the `value` from datasource items that denotes the selected nodes.
^^^
^^^merge-checked
Merge strategy for selected values. When all child nodes under a node are selected, you can choose to keep only the parent node, only the child nodes, or both.
+++Enumerated values
| Value | Description |
| --- | --- |
| `keep-all` | The parent and child nodes will both be in the selected value. |
| `upwards` | Merge selected values as far as possible in the ancestor direction. |
| `downwards` | Merge selected values in the direction of descendants if possible. |
+++
^^^
### Slots
| Name | Description |

1
one/docs/en-US/components/uploader.md
View File

@@ -34,7 +34,6 @@ Set the `type` prop to `image` to use the image upload mode.
| `data-type`| `string` | `'json'` | [^data-type] |
| `convert-response` | `uploader.convertResponse` | - | [^convert-response] |
| `accept` | `string` | - | The same as the `accept` attribute of native `<input>` elements. Works as an extra layer of validation on top of browsers' file filter. Will skip validation when MIME type doesn't match file extension, eg. `application/msword`. |
| `extensions` | `Array<string>` | `['jpg', 'jpeg', 'gif', 'png', 'bmp', 'tif', 'tiff', 'webp', 'apng', 'svg']` | To specify all valid file extensions when `accept` is set to values like `'image/*'`. |
| `max-count` | `number` | - | The maximum file count. |
| `max-size` | `number|string` | - | The maximun size of a single file. When being a `number`, the unit will be `byte`. When being a `string`, units can be added after numbers, including `b`/`kb`/`mb`/`gb`/`tb`. |
| `payload` | `Object` | - | The extra data payload to be sent together with the file. |

33
one/docs/en-US/getting-started/focus-visible.md
View File

@@ -1,33 +0,0 @@
# `:focus-visible`
Usually we provide `:focus` styles for interactive elements to enhance (keyboard) accessibility. But when we click around with mouses, most browsers will activate `:focus` state of elements like `<button>`. This will easily cause misunderstanding that the button is “selected” especially when different types of buttons are placed together. [The draft of CSS Selector Level 4 provided a `:focus-visible` pseudo class selector](https://drafts.csswg.org/selectors-4/#the-focusvisible-pseudo) to help us targeting focused elements more accurately.
Actually Chrome is handling native `<button>`s in a similar way by default.
> [Details on `:focus-visible`](https://github.com/WICG/focus-visible/blob/master/explainer.md)
## Usage
VEUI's default style package `veui-theme-dls` uses a polyfill library for `:focus-visible` to provide optimized interactive experience. You need to import it yourself in your application code:
```js
import 'focus-visible'
```
Technically focus-visible isn't really a “polyfill” because we have to use the `.focus-visible` selector instead of directly using `:focus-visible`. This should also be noted when customizing styles.
### Browser compatibility
As the polyfill provided by WICG won't automatically import other polyfills, you need to import polyfill for `classList` when you need to support IE9 (requires to be installed by yourself as well).
```shell
$ npm i --save classlist-polyfill
```
```js
import 'classlist-polyfill'
```
## Demo
[[ demo src="/demo/focus-visible.vue" ]]