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

feat: add link for individual props/events/slots/configs/icons

Browse Source
This commit is contained in:
Justineo
2021-10-20 01:11:27 +08:00
parent df2b6892d2
commit b0dcdbb873
162 changed files with 2176 additions and 2073 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,13 +4,13 @@
### Types
`AlertBox` component has 3 contextual types, which are `success`, `info`, ` and `error`. Types are specified with the `type` prop.
`AlertBox` component has 3 contextual types, which are `success`, `info`, ` and `error`. Types are specified with the [`type`](#props-type) prop.
[[ demo src="/demo/alert-box/type.vue" ]]
### With title
You can customize the title of alert box with the `title` prop.
You can customize the title of alert box with the [`title`](#props-title) prop.
[[ demo src="/demo/alert-box/title.vue" ]]
@@ -20,15 +20,15 @@ You can customize the title of alert box with the `title` prop.
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `open` | `boolean` | `false` | [^open] |
| `type` | `string=` | `'success'` | [^type] |
| `title` | `string=` | - | The title of the alert box. |
| `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`` | `boolean` | `false` | [^open] |
| ``type`` | `string=` | `'success'` | [^type] |
| ``title`` | `string=` | - | The title of the alert box. |
| ``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-before-close) prop of the [`Dialog`](./dialog) component. |
| ``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. |
^^^open
:::badges
@@ -54,21 +54,21 @@ The contextual type of the alert box.
| Name | Description |
| -- | -- |
| `default` | The content of the alert box. |
| `title` | The title of the alert box. Will ignore the `title` prop when specified. |
| `foot` | The foot area of the alert box. Displays an “OK” button by default. |
| ``default`` | The content of the alert box. |
| ``title`` | The title of the alert box. Will ignore the [`title`](#props-title) prop when specified. |
| ``foot`` | The foot area of the alert box. Displays an “OK” button by default. |
### Events
| Name | Description |
| -- | -- |
| `ok` | Triggered when the “OK” button is clicked. |
| `afterclose` | Triggered after the box overlay is closed. If leaving transition is provided by the theme, the event will be triggered after the transition completes. |
| ``ok`` | Triggered when the “OK” button is clicked. |
| ``afterclose`` | Triggered after the box overlay is closed. If leaving transition is provided by the theme, the event will be triggered after the transition completes. |
### Icons
| Name | Description |
| -- | -- |
| `info` | Information alert. |
| `success` | Success alert. |
| `error` | Error alert. |
| ``info`` | Information alert. |
| ``success`` | Success alert. |
| ``error`` | Error alert. |

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

@@ -4,13 +4,13 @@
### Types
`Alert` component has 4 contextual types, which are `success`, `info`, `warning` and `error`. Types are specified with the `type` prop.
`Alert` component has 4 contextual types, which are `success`, `info`, `warning` and `error`. Types are specified with the [`type`](#props-type) prop.
[[ demo src="/demo/alert/type.vue" ]]
### Multiple messages
The `message` prop can be an array to display multiple switchable messages.
The [`message`](#props-message) prop can be an array to display multiple switchable messages.
[[ demo src="/demo/alert/multiple.vue" ]]
@@ -20,12 +20,12 @@ The `message` prop can be an array to display multiple switchable messages.
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `type` | `string=` | `'success'` | [^type] |
| `title` | `string` | - | The alert title. |
| `message` | `string|Array<string>` | - | The alert message. When specified as an array, multiple messages will be displayed with previous/next navigation. |
| `closable` | `boolean=` | `false` | Whether the alert is allowed to be closed by users. |
| `open` | `boolean=` | `true` | [^open] |
| `index` | `number=` | `0` | [^index] |
| ``type`` | `string=` | `'success'` | [^type] |
| ``title`` | `string` | - | The alert title. |
| ``message`` | `string | Array<string>` | - | The alert message. When specified as an array, multiple messages will be displayed with previous/next navigation. |
| ``closable`` | `boolean=` | `false` | Whether the alert is allowed to be closed by users. |
| ``open`` | `boolean=` | `true` | [^open] |
| ``index`` | `number=` | `0` | [^index] |
^^^type
The contextual type of the alert message.
@@ -60,10 +60,10 @@ The index of current message displayed when having multiple messages.
| Name | Description |
| -- | -- |
| `default` | [^slot-default] |
| `title` | The content area of the alert title. |
| `extra` | The extra content after the alert message. |
| `content` | The content of the whole component, including message text, status icon, previous/next navigation and close button. |
| ``default`` | [^slot-default] |
| ``title`` | The content area of the alert title. |
| ``extra`` | The extra content after the alert message. |
| ``content`` | The content of the whole component, including message text, status icon, previous/next navigation and close button. |
^^^slot-default
The content of the message.
@@ -82,10 +82,10 @@ Default: message text.
| Name | Description |
| -- | -- |
| `success` | Success message. |
| `warning` | Warning message. |
| `info` | Information message. |
| `error` | Error message. |
| `prev` | Previous message. |
| `next` | Next message. |
| `close` | Close alert. |
| ``success`` | Success message. |
| ``warning`` | Warning message. |
| ``info`` | Information message. |
| ``error`` | Error message. |
| ``prev`` | Previous message. |
| ``next`` | Next message. |
| ``close`` | Close alert. |

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

@@ -14,9 +14,9 @@ See [the demos of `Breadcrumb`](./breadcrumb#demos).
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `to` | `string|Object` | - | The target location. See [`Link`](./link#Props)'s the `to` prop. |
| `type` | `string` | `'link'` | [^link] |
| `native` | `boolean` | `false` | When set to `true` and `to` is specified, native `<a>` element will be used and `to` will be set as the `href` attribute to this `<a>` element. |
| ``to`` | `string | Object` | - | The target location. See [`Link`](./link)'s the [`to`](./link#props-to) prop. |
| ``type`` | `string` | `'link'` | [^link] |
| ``native`` | `boolean` | `false` | When set to `true` and `to` is specified, native `<a>` element will be used and `to` will be set as the `href` attribute to this `<a>` element. |
^^^link
The type of the item.
@@ -33,16 +33,16 @@ The type of the item.
| Name | Description |
| -- | -- |
| `default` | The content of the breadcrumb item. |
| ``default`` | The content of the breadcrumb item. |
### Events
| Name | Description |
| -- | -- |
| `redirect` | Triggered when clicking the item with `type` value `link`. The callback parameter list is `(event: Event)`. `event` is a [native click event object](https://developer.mozilla.org/en-US/docs/Web/Events/click). |
| ``redirect`` | Triggered when clicking the item with `type` value `link`. The callback parameter list is `(event: Event)`. `event` is a [native click event object](https://developer.mozilla.org/en-US/docs/Web/Events/click). |
### Icons
| Name | Description |
| -- | -- |
| `separator` | The separator between adjacent breadcrumb items. |
| ``separator`` | The separator between adjacent breadcrumb items. |

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

@@ -8,13 +8,13 @@
### Stylistic variants
Available style variants for the `ui` prop: `strong`.
Available style variants for the [`ui`](#props-ui) prop: `strong`.
[[ demo src="/demo/breadcrumb/style.vue" ]]
### 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/breadcrumb/size.vue" ]]
@@ -26,7 +26,7 @@ Can be used with embedded `BreadcrumbItem`s.
### Using datasource
Can be used with the `routes` prop as well.
Can be used with the [`routes`](#props-routes) prop as well.
[[ demo src="/demo/breadcrumb/datasource.vue" ]]
@@ -38,7 +38,7 @@ Separators can be customized.
### Events mode
Handling `redirect` event instead of redirect with router.
Handling [`redirect`](#events-redirect) event instead of redirect with router.
[[ demo src="/demo/breadcrumb/redirect.vue" ]]
@@ -48,8 +48,8 @@ Handling `redirect` event instead of redirect with router.
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `ui` | `string=` | - | [^ui] |
| `routes` | `Array<Object>` | `[]` | [^routes] |
| ``ui`` | `string=` | - | [^ui] |
| ``routes`` | `Array<Object>` | `[]` | [^routes] |
^^^ui
Style variants.
@@ -63,7 +63,7 @@ Style variants.
^^^
^^^routes
The datasource for breadcrumb items. The type of items is `{label: string, type: string, to: string|Object=, native: boolean=}`. Properties apart from `label` can be referred to the props of [`BreadcrumbItem`](./breadcrumb-item) component.
The datasource for breadcrumb items. The type of items is `{label: string, type: string, to: string | Object=, native: boolean=}`. Properties apart from `label` can be referred to the props of [`BreadcrumbItem`](./breadcrumb-item) component.
:::warning
The last item will always be displayed as plain text by default.
@@ -74,9 +74,9 @@ The last item will always be displayed as plain text by default.
| Name | Description |
| -- | -- |
| `default` | The items of the breadcrumb. Can only have [`BreadcrumbItem`](./breadcrumb-item) components as direct children. The `routes` prop will be ignored when this slot is specified. |
| `item` | [^slot-item] |
| `separator` | [^slot-separator] |
| ``default`` | The items of the breadcrumb. Can only have [`BreadcrumbItem`](./breadcrumb-item) components as direct children. The [`routes`](#props-routes) prop will be ignored when this slot is specified. |
| ``item`` | [^slot-item] |
| ``separator`` | [^slot-separator] |
^^^slot-item
The content of each breadcrumb item. Default to the `label` properties of each item within `routes`, or the default slot content of [`BreadcrumbItem`]('./breadcrumb-item) components.
@@ -100,7 +100,7 @@ When using Vue.js version `2.5.17` and below, it's required to bind a `slot-scop
| Name | Description |
| -- | -- |
| `redirect` | [^redirect] |
| ``redirect`` | [^redirect] |
^^^redirect

24
one/docs/en-US/components/button-group.md
View File

@@ -4,25 +4,25 @@
### Stylistic variants
Available style variants for the `ui` prop: `primary`/`strong`/`basic`.
Available style variants for the [`ui`](#props-ui) prop: `primary` / `strong` / `basic`.
[[ demo src="/demo/button-group/style.vue" ]]
### Size variants
Available size variants for the `ui` prop: `xs`/`s`/`m`/`l`/`xl`.
Available size variants for the [`ui`](#props-ui) prop: `xs` / `s` / `m` / `l` / `xl`.
[[ demo src="/demo/button-group/size.vue" ]]
### Use datasource via `items`
Use the `items` prop to provide content with a datasource.
Use the [`items`](#props-items) prop to provide content with a datasource.
[[ demo src="/demo/button-group/items.vue" ]]
### Disabled state
Use the `disabled` prop to set the button group to disabled state.
Use the [`disabled`](#props-disabled) prop to set the button group to disabled state.
[[ demo src="/demo/button-group/disabled.vue" ]]
@@ -32,9 +32,9 @@ Use the `disabled` prop to set the button group to disabled state.
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `items` | `Array<Object>` | - | [^items] |
| `disabled` | `boolean=` | `false` | Whether the button is disabled. |
| ``ui`` | `string=` | - | [^ui] |
| ``items`` | `Array<Object>` | - | [^items] |
| ``disabled`` | `boolean=` | `false` | Whether the button is disabled. |
^^^ui
Style variants. A space-separated list of enum values.
@@ -68,13 +68,13 @@ The datasource array for buttons in the group. The type of each item is `{label,
| Name | Description |
| -- | -- |
| `default` | Button group's content. |
| `item` | [^slot-item] |
| ``default`` | Button group's content. |
| ``item`` | [^slot-item] |
^^^slot-item
The content of each button.
Shows the text specified by the `label` prop by default.
Shows the text specified by the `label` property by default.
+++Scope properties
| Name | Type | Description |
@@ -92,7 +92,7 @@ Additionally, custom properties apart from the listed ones will also be passes i
| Name | Description |
| -- | -- |
| `click` | [^click-event] |
| ``click`` | [^click-event] |
| <var>&lt;value&gt;</var> | [^value-var-event] |
^^^click-event
@@ -107,5 +107,5 @@ Triggered upon clicks. The callback parameter list is `(item, index)`.
^^^
^^^value-var-event
If the corresponding item has a string `value` property, an event with the name of `value` value will be emitted each time the button is clicked. It shares the same parameters with the `click` event.
If the corresponding item has a string `value` property, an event with the name of `value` value will be emitted each time the button is clicked. It shares the same parameters with the [`click`](#events-click) event.
^^^

24
one/docs/en-US/components/button.md
View File

@@ -4,25 +4,25 @@
### Stylistic variants
Available style variants for the `ui` prop: `primary`/`strong`/`translucent`/`text`/`icon`.
Available style variants for the [`ui`](#props-ui) prop: `primary` / `strong` / `translucent` / `text` / `icon`.
[[ demo src="/demo/button/style.vue" ]]
### Size variants
Available size variants for the `ui` prop: `xs`/`s`/`m`/`l`/`xl`.
Available size variants for the [`ui`](#props-ui) prop: `xs` / `s` / `m` / `l` / `xl`.
[[ demo src="/demo/button/size.vue" ]]
### Disabled state
Use the `disabled` prop to set a button to disabled state.
Use the [`disabled`](#props-disabled) prop to set a button to disabled state.
[[ demo src="/demo/button/disabled.vue" ]]
### Loading state
Use the `loading` prop to set a button to loading state (which will not respond upon clicks).
Use the [`loading`](#props-loading) prop to set a button to loading state (which will not respond upon clicks).
[[ demo src="/demo/button/loading.vue" ]]
@@ -32,10 +32,10 @@ Use the `loading` prop to set a button to loading state (which will not respond
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `disabled` | `boolean=` | `false` | Whether the button is disabled. |
| `type` | `string=` | `'button'` | [^type] |
| `loading` | `boolean=` | `false` | Whether the button is in loading state. Loading buttons won't respond to user interactions. |
| ``ui`` | `string=` | - | [^ui] |
| ``disabled`` | `boolean=` | `false` | Whether the button is disabled. |
| ``type`` | `string=` | `'button'` | [^type] |
| ``loading`` | `boolean=` | `false` | Whether the button is in loading state. Loading buttons won't respond to user interactions. |
^^^ui
Style variants. A space-separated list of enum values.
@@ -46,11 +46,11 @@ Style variants. A space-separated list of enum values.
| `normal` | Normal button. Default style. |
| `primary` | Primary button. |
| `basic` | Basic button. |
| `strong` | Strong button. Can be used alone or together with `text`/`icon`. |
| `strong` | Strong button. Can be used alone or together with `text` / `icon`. |
| `translucent` | Translucent button, typically used on dark background. |
| `text` | Text button. |
| `icon` | Icon button. |
| `aux` | Auxilary button. Need to be used with `text`/`icon` styles. |
| `aux` | Auxilary button. Need to be used with `text` / `icon` styles. |
| `square` | Square button. Can be used with other styles. |
| `xs` | Extra small. |
| `s` | Small. |
@@ -80,7 +80,7 @@ Note that the default value is different from the native `<button>` element. You
| Name | Description |
| -- | -- |
| `default` | Content of the button. |
| ``default`` | Content of the button. |
### Events
@@ -90,4 +90,4 @@ Additionally, `Button` exposes all native events available for native `<button>`
| Name | Description |
| -- | -- |
| `loading` | The loading spinner. |
| ``loading`` | The loading spinner. |

18
one/docs/en-US/components/calendar.md
View File

@@ -10,13 +10,13 @@ Click to select a single date by default.
### Selecting multiple dates or a date range
You can select multiple date with the `multiple` prop set to `true` and can select a date range with the `range` prop set to `true`.
You can select multiple date with the [`multiple`](#props-multiple) prop set to `true` and can select a date range with the [`range`](#props-range) prop set to `true`.
[[ demo src="/demo/calendar/range-multiple.vue" ]]
### Selecting multiple date ranges
When `multiple` and `range` are both set to `true`, you can select multiple date ranges. You can configure the number of month panels with the `panel` prop. The way we merge newly selected ranges into those are already select are that, if you start select on a unselected date, the range will be selected and if start on a selected one, the range will be unselected.
When `multiple` and `range` are both set to `true`, you can select multiple date ranges. You can configure the number of month panels with the [`panel`](#props-panel) prop. The way we merge newly selected ranges into those are already select are that, if you start select on a unselected date, the range will be selected and if start on a selected one, the range will be unselected.
[[ demo src="/demo/calendar/multiple-ranges.vue" ]]
@@ -26,15 +26,15 @@ When `multiple` and `range` are both set to `true`, you can select multiple date
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `type` | `string=` | `'date'` | The type of the calendar. Available values include `'date'`/`'month'`/`'year'`, denoting date/month/year view respectively. When the value is not `'date'`, `multiple` and `range` will be ignored. |
| `type` | `string=` | `'date'` | The type of the calendar. Available values include `'date'` / `'month'` / `'year'`, denoting date/month/year view respectively. When the value is not `'date'`, `multiple` and `range` will be ignored. |
| `multiple` | `boolean=` | `false` | Whether users can select multiple dates (date ranges). |
| `range` | `boolean=` | `false` | Whether users can select a date range (date ranges). |
| `selected` | `Date|Array=` | - | [^selected] |
| `selected` | `Date | Array=` | - | [^selected] |
| `panel` | `number=` | `1` | The number of month panel displayed. |
| `today` | `Date=` | `new Date()` | The date of “today”. |
| `week-start` | `number=` | `calendar.weekStart` | The start of a week. Can be [globally configured](#global-config). |
| `week-start` | `number=` | `calendar.weekStart` | The start of a week. Can be [globally configured](#configs-calendar-weekStart). |
| `fill-month` | `boolean=` | `true` | Whether to show dates of previous and next month in current panel when there's only one month panel. |
| `date-class` | `string|Array|Object|function=` | `{}` | Custom HTML `class` for specified date. All [`class` expressions supported by Vue](https://vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes) are available for non-function values. When specified as a function, whose signature is `function(Date): string|Array<string>|Object<string, boolean>`, the return value is also `class` expressions suppported by Vue. |
| `date-class` | `string | Array | Object | function=` | `{}` | Custom HTML `class` for specified date. All [`class` expressions supported by Vue](https://vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes) are available for non-function values. When specified as a function, whose signature is `function(Date): string | Array<string>|Object<string, boolean>`, the return value is also `class` expressions suppported by Vue. |
| `disabled-date` | `function(Date, Date=): boolean=` | `() => false` | Used to customize whether the specified date is disabled or not. The first parameter is the date to be used to determine if the date is disabled. When in the range selection process and a date is already selected, it is passed as the second parameter. |
| `disabled` | `boolean=` | `false` | Whether the calendar is disabled. |
| `readonly` | `boolean=` | `false` | Whether the calendar is read-only. |
@@ -90,11 +90,11 @@ The content of each date cell. Displays the corresponding day of month by defaul
`v-model`
:::
Triggered when selection change. The callback parameter list is `(selected)`. The type of `selected` is the same as the `selected` prop.
Triggered when selection change. The callback parameter list is `(selected)`. The type of `selected` is the same as the [`selected`](#props-selected) prop.
^^^
^^^event-selectprogress
Triggered when selecting a date range and an end date is marked with pointer/keyboard interaction, and for each time the end date changes. The callback parameter list is `(picking)`, with `picking` being the marked date range. The type of `picking` depends on the value of the `multiple` prop.
Triggered when selecting a date range and an end date is marked with pointer/keyboard interaction, and for each time the end date changes. The callback parameter list is `(picking)`, with `picking` being the marked date range. The type of `picking` depends on the value of the [`multiple`](#props-multiple) prop.
+++Parameters types
| `multiple` | Type |
@@ -104,7 +104,7 @@ Triggered when selecting a date range and an end date is marked with pointer/key
+++
^^^
### Global config
### Configs
| Key | Type | Default | Description |
| -- | -- | -- | -- |

28
one/docs/en-US/components/carousel.md
View File

@@ -10,13 +10,13 @@ Use the `index` to control the current item to be displayed.
### Indicator type
Use the `indicator` prop to specify the type of step indicators.
Use the [`indicator`](#props-indicator) prop to specify the type of step indicators.
[[ demo src="/demo/carousel/indicator.vue" ]]
### Autoplay
Use the `autoplay` prop to enable autoplay.
Use the [`autoplay`](#props-autoplay) prop to enable autoplay.
[[ demo src="/demo/carousel/autoplay.vue" ]]
@@ -26,14 +26,14 @@ Use the `autoplay` prop to enable autoplay.
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `datasource` | `Array<Object>` | `[]` | [^datasource] |
| `index` | `number=` | `0` | [^index] |
| `indicator` | `string=` | `'radio'` | [^indicator] |
| `switch-trigger` | `string=` | `'click'` | [^switch-trigger] |
| `autoplay` | `boolean=` | `false` | Whether to autoplay the carousel. |
| `pause-on-hover` | `boolean=` | `false` | Whether to pause the cycling on hover when autoplaying. |
| `interval` | `number=` | `3000` | The amount of time to delay between automatically cycling an item. |
| `wrap` | `boolean=` | `false` | Whether the carousel should cycle continuously or have hard stops. |
| ``datasource`` | `Array<Object>` | `[]` | [^datasource] |
| ``index`` | `number=` | `0` | [^index] |
| ``indicator`` | `string=` | `'radio'` | [^indicator] |
| ``switch-trigger`` | `string=` | `'click'` | [^switch-trigger] |
| ``autoplay`` | `boolean=` | `false` | Whether to autoplay the carousel. |
| ``pause-on-hover`` | `boolean=` | `false` | Whether to pause the cycling on hover when autoplaying. |
| ``interval`` | `number=` | `3000` | The amount of time to delay between automatically cycling an item. |
| ``wrap`` | `boolean=` | `false` | Whether the carousel should cycle continuously or have hard stops. |
^^^datasource
The media datasource for the carousel, with the item type being `{src, alt, label}`.
@@ -81,7 +81,7 @@ The behavior triggers item switch when radio indicator is displayed.
| Name | Description |
| -- | -- |
| `item` | [^slot-item] |
| ``item`` | [^slot-item] |
^^^slot-item
The content of each carousel item. Displays the corresponding image by default.
@@ -93,7 +93,7 @@ The slot scope properties are the same as each item inside `datasource` (includi
| Name | Description |
| -- | -- |
| `change` | [^event-change] |
| ``change`` | [^event-change] |
^^^event-change
Triggered the current item changed. The callback argument list is `(to: number, from: number)`. `to` and `from` denote the new index and the old index respectively.
@@ -103,5 +103,5 @@ Triggered the current item changed. The callback argument list is `(to: number,
| Name | Description |
| -- | -- |
| `prev` | Previous item. |
| `next` | Next item. |
| ``prev`` | Previous item. |
| ``next`` | Next item. |

22
one/docs/en-US/components/check-button-group.md
View File

@@ -4,7 +4,7 @@
### Size variants
Available values for the `ui` prop: `s`/`m`.
Available values for the [`ui`](#props-ui) prop: `s` / `m`.
[[ demo src="/demo/check-button-group/default.vue" ]]
@@ -14,12 +14,12 @@ Available values for the `ui` prop: `s`/`m`.
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `items` | `Array<Object>` | `[]` | [^items] |
| `value` | `Array` | `[]` | [^value] |
| `disabled` | `boolean=` | `false` | Whether the check button group is disabled. |
| `readonly` | `boolean=` | `false` | Whether the check button group is read-only. |
| `empty-value` | `*` | - | The value to be selected when all selected values are deselected. Used when `exclusive` items are present. |
| ``ui`` | `string=` | - | [^ui] |
| ``items`` | `Array<Object>` | `[]` | [^items] |
| ``value`` | `Array` | `[]` | [^value] |
| ``disabled`` | `boolean=` | `false` | Whether the check button group is disabled. |
| ``readonly`` | `boolean=` | `false` | Whether the check button group is read-only. |
| ``empty-value`` | `*` | - | The value to be selected when all selected values are deselected. Used when `exclusive` items are present. |
^^^ui
Style variants.
@@ -55,10 +55,10 @@ The `value`s of the selected items.
| Name | Description |
| -- | -- |
| `item` | [^slot-item] |
| ``item`` | [^slot-item] |
^^^slot-item
The label content of each button. Displays the value of the `label` prop by default.
The label content of each button. Displays the value of the `label` property by default.
+++Scope properties
| Name | Type | Description |
@@ -76,7 +76,7 @@ Additionally, custom properties apart from the listed ones will also be passes i
| Name | Description |
| -- | -- |
| `change` | [^event-change] |
| ``change`` | [^event-change] |
^^^event-change
:::badges
@@ -90,4 +90,4 @@ Triggers when the selected item changed. The callback parameter list is `(value:
| Name | Description |
| -- | -- |
| `check` | The loading spinner. |
| ``check`` | The loading spinner. |

20
one/docs/en-US/components/checkbox-group.md
View File

@@ -4,7 +4,7 @@
### Size variants
Available size variant for the `ui` prop: `s`/`m`.
Available size variant for the [`ui`](#props-ui) prop: `s` / `m`.
[[ demo src="/demo/checkbox-group/default.vue" ]]
@@ -14,12 +14,12 @@ Available size variant for the `ui` prop: `s`/`m`.
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `items` | `Array<Object>` | `[]` | [^items] |
| `value` | `Array` | `[]` | [^value] |
| `disabled` | `boolean=` | `false` | Whether the checkbox group is disabled. |
| `readonly` | `boolean=` | `false` | Whether the checkbox group is read-only. |
| `empty-value` | `*` | - | The value to be selected when all selected values are deselected. Used when `exclusive` items are present. |
| ``ui`` | `string=` | - | [^ui] |
| ``items`` | `Array<Object>` | `[]` | [^items] |
| ``value`` | `Array` | `[]` | [^value] |
| ``disabled`` | `boolean=` | `false` | Whether the checkbox group is disabled. |
| ``readonly`` | `boolean=` | `false` | Whether the checkbox group is read-only. |
| ``empty-value`` | `*` | - | The value to be selected when all selected values are deselected. Used when `exclusive` items are present. |
^^^ui
Style variants.
@@ -56,10 +56,10 @@ The `value`s of the selected items.
| Name | Description |
| -- | -- |
| `item` | [^slot-item] |
| ``item`` | [^slot-item] |
^^^slot-item
The label content of each checkbox. Displays the value of the `label` prop by default.
The label content of each checkbox. Displays the value of the `label` property by default.
+++Scope properties
| Name | Type | Description |
@@ -77,7 +77,7 @@ Additionally, custom properties apart from the listed ones will also be passes i
| Name | Description |
| -- | -- |
| `change` | [^event-change] |
| ``change`` | [^event-change] |
^^^event-change
:::badges

32
one/docs/en-US/components/checkbox.md
View File

@@ -4,13 +4,13 @@
### Size variants
Available size variant for the `ui` prop: `s`/`m`.
Available size variant for the [`ui`](#props-ui) prop: `s` / `m`.
[[ demo src="/demo/checkbox/size.vue" ]]
### True/false values
Use the `true-value` and `false-value` props to customize the `model` value (used in its `v-model`) of the checkbox in checked/unchecked state.
Use the [`true-value`](#props-true-value) and [`false-value`](#props-false-value) props to customize the `model` value (used in its `v-model`) of the checkbox in checked/unchecked state.
[[ demo src="/demo/checkbox/value.vue" ]]
@@ -20,14 +20,14 @@ Use the `true-value` and `false-value` props to customize the `model` value (use
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `checked` | `boolean` | `false` | [^checked] |
| `value` | `*` | - | Denotes the value of current checkbox when `v-model` is bound to an array. |
| `true-value` | `*=` | `true` | The value for checked state. |
| `false-value` | `*=` | `false` | The value for unchecked state. |
| `indeterminate` | `boolean=` | `false` | Whether the checkbox is in an indeterminate state. |
| `disabled` | `boolean=` | `false` | Whether the checkbox is disabled. |
| `readonly` | `boolean=` | `false` | Whether the checkbox is read-only. |
| ``ui`` | `string=` | - | [^ui] |
| ``checked`` | `boolean` | `false` | [^checked] |
| ``value`` | `*` | - | Denotes the value of current checkbox when `v-model` is bound to an array. |
| ``true-value`` | `*=` | `true` | The value for checked state. |
| ``false-value`` | `*=` | `false` | The value for unchecked state. |
| ``indeterminate`` | `boolean=` | `false` | Whether the checkbox is in an indeterminate state. |
| ``disabled`` | `boolean=` | `false` | Whether the checkbox is disabled. |
| ``readonly`` | `boolean=` | `false` | Whether the checkbox is read-only. |
^^^ui
Style variants.
@@ -52,21 +52,21 @@ Whether the checkbox is checked.
| Name | Description |
| -- | -- |
| `default` | The label text of the checkbox. The checkbox is toggled when the label is clicked. Displays nothing by default. |
| ``default`` | The label text of the checkbox. The checkbox is toggled when the label is clicked. Displays nothing by default. |
### Events
| Name | Description |
| -- | -- |
| `change` | Triggered when user toggles the state of the checkbox. The callback parameter list is `(checked: boolean)`. `checked` denotes whether the checkbox is checked. |
| `input` | [^event-input] |
| ``change`` | Triggered when user toggles the state of the checkbox. The callback parameter list is `(checked: boolean)`. `checked` denotes whether the checkbox is checked. |
| ``input`` | [^event-input] |
^^^event-input
:::badges
`v-model`
:::
Triggered when the check state is changed. The callback parameter list is `(val: *)`, with `val` being the current value of `v-model`. Unlike the `change` event, `input` is triggered even without user interaction.
Triggered when the check state is changed. The callback parameter list is `(val: *)`, with `val` being the current value of `v-model`. Unlike the [`change`](#events-change) event, `input` is triggered even without user interaction.
^^^
Additionally, `Checkbox` exposes the following native events:
@@ -79,5 +79,5 @@ The callback parameter is the corresponding native event object for all events a
| Name | Description |
| -- | -- |
| `checked` | Checked state. |
| `indeterminate` | Indeterminate state. |
| ``checked`` | Checked state. |
| ``indeterminate`` | Indeterminate state. |

50
one/docs/en-US/components/column.md
View File

@@ -14,28 +14,28 @@ See [the demos of `Table`](./table#demos).
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `title` | `string` | - | The column title. |
| `field` | `string` | - | The field name as a key of items in the `data` prop of the parent `Table` component. |
| `width` | `string=|number=` | - | The column width in `px` value. |
| `sortable` | `boolean=` | `false` | [^sortable] |
| `align` | `string=` | - | The alignment of cell content in the column. Supports `left`/`center`/`right`. |
| `span` | `function(number): Object=` | | [^span] |
| `desc` | `string` | - | The description of the column head. |
| `filter-value` | `*` | - | [^filter-value] |
| `filter-multiple` | `boolean=` | `false` | Whether the built-in filter is multi-select or not. |
| `filter-options` | `Array<Object>` | - | The list of filter options, with items of type `{label, value, options, disabled, ...}`, see the `options` prop of the [`Select`](./select) component. |
| `filter-title` | `string=` | - | The title of the filter dropdown. |
| ``title`` | `string` | - | The column title. |
| ``field`` | `string` | - | The field name as a key of items in the [`data`](./table#props-data) prop of the parent `Table` component. |
| ``width`` | `string=|number=` | - | The column width in `px` value. |
| ``sortable`` | `boolean=` | `false` | [^sortable] |
| ``align`` | `string=` | - | The alignment of cell content in the column. Supports `left` / `center` / `right`. |
| ``span`` | `function(number): Object=` | | [^span] |
| ``desc`` | `string` | - | The description of the column head. |
| ``filter-value`` | `*` | - | [^filter-value] |
| ``filter-multiple`` | `boolean=` | `false` | Whether the built-in filter is multi-select or not. |
| ``filter-options`` | `Array<Object>` | - | The list of filter options, with items of type `{label, value, options, disabled, ...}`, see the [`options`](./select#options) prop of the [`Select`](./select) component. |
| ``filter-title`` | `string=` | - | The title of the filter dropdown. |
^^^sortable
Whether current column is sortable.
:::warning
`Table` and `Column` do not handle sorting. They only emit a `sort` event when the sorter is clicked so users need handle sorting themselves.
`Column` does not handle sorting itself. It only emits a [`sort`](./table#events-sort) event on `Table` when the sorter is clicked so users need handle sorting themselves.
:::
^^^
^^^span
A function that defines how cells should span across rows/columns. The type is `function(index: number): { row: number, col: number }`, where `index` being the index of current row inside the `data` prop of the parent `Table`. The `row`/`col` of the return value correspond to table cell's `rowspan`/`colspan` attribut, with a default value of `1`.
A function that defines how cells should span across rows/columns. The type is `function(index: number): { row: number, col: number }`, where `index` being the index of current row inside the [`data`](./table#props-data) prop of the parent `Table`. The `row` / `col` of the return value correspond to table cell's `rowspan` / `colspan` attribut, with a default value of `1`.
:::tip
You can learn more abut how to use this in `Table` component's [Demos › Advanced](./table#advanced).
@@ -54,41 +54,41 @@ The value of current filter condition. `null` means not filtered. When `filter-m
| Name | Description |
| -- | -- |
| `head` | The table head. |
| `foot` | [^slot-foot] |
| `default` | [^slot-default] |
| `sub-row` | [^slot-sub-row] |
| `desc` | [^slot-desc] |
| `filter` | [^slot-filter] |
| ``head`` | The table head. |
| ``foot`` | [^slot-foot] |
| ``default`` | [^slot-default] |
| ``sub-row`` | [^slot-sub-row] |
| ``desc`` | [^slot-desc] |
| ``filter`` | [^slot-filter] |
^^^slot-foot
The table foot.
:::warning
`Column`'s `foot` slot will be ignored if users provide content for `Table`'s `foot` slot.
`Column`'s `foot` slot will be ignored if users provide content for `Table`'s [`foot`](./table#slots-foot) slot.
:::
^^^
^^^slot-default
The content of the table cell. Displays the property value corresponds to the `field` property in table's `data` prop.
The content of the table cell. Displays the property value corresponds to the [`field`](#props-field) prop in table's [`data`](./table#props-data) prop.
The slot scope properties are the same as each item inside `data`, with an extra `index: number`, which denotes the index within the row data.
^^^
^^^slot-sub-row
The content of cells in a sub row. Sub row data comes from the `children` array inside the row data in `Table`s `data` prop. The number of sub rows are determined by the length of the `children` array and the sub rows share the same column configuration with the table.
The content of cells in a sub row. Sub row data comes from the `children` array inside the row data in `Table`s [`data`](./table#props-data) prop. The number of sub rows are determined by the length of the `children` array and the sub rows share the same column configuration with the table.
Displays the value keyed by the `field` prop inside the sub row data, which is `data[i].children[j]` of the parent table.
Displays the value keyed by the [`field`](#props-field) prop inside the sub row data, which is `data[i].children[j]` of the parent table.
The slot scope properties are the same as each item inside `children`, with an extra `index: number`, which denotes the index within the row data.
:::warning
The `sub-row` slot of `Column` will be ignored when content is provided for `Table`'s `sub-row` slot.
The `sub-row` slot of `Column` will be ignored when content is provided for `Table`'s [`sub-row`](./table#slots-sub-row) slot.
:::
^^^
^^^slot-desc
The content of the description overlay. Will override the `desc` prop when set.
The content of the description overlay. Will override the [`desc`](#props-desc) prop when set.
+++Scope properties
| Name | Type | Description |

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

@@ -12,15 +12,15 @@ The title and content are both customizable.
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `open` | `boolean` | `false` | [^open] |
| `title` | `string=` | - | The title of the confirm box. |
| `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`` | `boolean` | `false` | [^open] |
| ``title`` | `string=` | - | The title of the confirm box. |
| ``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-before-close) prop of the [`Dialog`](./dialog) component. |
| ``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. |
^^^open
:::badges
@@ -35,7 +35,7 @@ Whether the confirm box is displayed.
| Name | Description |
| -- | -- |
| `default` | The content of the confirm box. |
| `title` | The title of the confirm box. Will ignore the `title` prop when specified. |
| `title` | The title of the confirm box. Will ignore the [`title`](#props-title) prop when specified. |
| `foot` | The foot area of the confirm box. Displays an “OK” and a “Cancel” button by default. |
### Events

76
one/docs/en-US/components/date-picker.md
View File

@@ -4,7 +4,7 @@
### Selecting a single date
By default, you can click a date cell in the dropdown overlay to select a single date. Use the `clearable` prop to make selected values clearable. Use the `placeholder` prop to customize the description text displayed when nothing is selected yet.
By default, you can click a date cell in the dropdown overlay to select a single date. Use the [`clearable`](#props-clearable) prop to make selected values clearable. Use the [`placeholder`](#props-placeholder) prop to customize the description text displayed when nothing is selected yet.
[[ demo src="/demo/date-picker/default.vue" ]]
@@ -16,7 +16,7 @@ When `range` is `true`, you can select a date range in the dropdown overlay.
### Setting selection shortcuts
When selecting a date range, the `shortcuts` prop can be used to provide predefined date range shortcuts to be selected from.
When selecting a date range, the [`shortcuts`](#props-shortcuts) prop can be used to provide predefined date range shortcuts to be selected from.
[[ demo src="/demo/date-picker/shortcuts.vue" ]]
@@ -26,23 +26,23 @@ When selecting a date range, the `shortcuts` prop can be used to provide predefi
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `range` | `boolean=` | `false` | Whether users can select a date range. When the value is not `'date'`, `range` will be ignored. |
| `selected` | `Date|Array=` | - | [^selected] |
| `panel` | `number=` | `1` | The number of month panel displayed in the dropdown overlay. |
| `today` | `Date=` | `new Date()` | The date of “today”. |
| `week-start` | `number=` | `calendar.weekStart` | The start of a week. Can be [globally configured](./calendar#global-config). |
| `fill-month` | `boolean=` | `true` | Whether to show dates of previous and next month in current panel when there's only one month panel. |
| `date-class` | `string|Array|Object|function=` | `{}` | Custom HTML `class` for specified date. All [`class` expressions supported by Vue](https://vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes) are available for non-function values. When specified as a function, whose signature is `function(Date): string|Array<string>|Object<string, boolean>`, the return value is also `class` expressions suppported by Vue. |
| `disabled-date` | `function(Date, Date=): boolean=` | `() => false` | Used to customize whether the specified date is disabled or not. The first parameter is the date to be used to determine if the date is disabled. When in the range selection process and a date is already selected, it is passed as the second parameter. |
| `clearable` | `boolean=` | `false` | Whether selected date (ranges) can be cleared. |
| `placeholder` | `string=` | `range ? datepicker.rangePlaceholder : datepicker.placeholder` | The placeholder text displayed when nothing is selected. Can be [globally configured](./calendar#global-config). |
| `format` | `string|function(Date): string=` | `'YYYY-MM-DD'` | When being string type, denotes the format expression for displaying final selected date (ranges). See details at [the documentation of date-fns](https://date-fns.org/v1.29.0/docs/format). Can also be a function to customize the formatting logic. |
| `parse` | `function(string): Date=` | Custom function to parse the input string expressions into `Date` objects. |
| `shortcuts` | `Array<Object>=` | `datepicker.shortcuts` | [^shortcuts] |
| `shortcuts-position` | `string=` | `datepicker.shortcutsPosition` | The position of shortcuts. Can be either `'before'` or `'after'`, corresponding to the before or after the content of the month panel respectively. Can be [globally configured](./calendar#global-config). |
| `expanded` | `boolean=` | `false` | [^expanded] |
| `disabled` | `boolean=` | `false` | Whether the date picker is disabled. |
| `readonly` | `boolean=` | `false` | Whether the date picker is read-only. |
| ``range`` | `boolean=` | `false` | Whether users can select a date range. When the value is not `'date'`, `range` will be ignored. |
| ``selected`` | `Date | Array=` | - | [^selected] |
| ``panel`` | `number=` | `1` | The number of month panel displayed in the dropdown overlay. |
| ``today`` | `Date=` | `new Date()` | The date of “today”. |
| ``week-start`` | `number=` | `calendar.weekStart` | The start of a week. Can be [globally configured](./calendar#configs-calendar-weekStart). |
| ``fill-month`` | `boolean=` | `true` | Whether to show dates of previous and next month in current panel when there's only one month panel. |
| ``date-class`` | `string | Array | Object | function=` | `{}` | Custom HTML `class` for specified date. All [`class` expressions supported by Vue](https://vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes) are available for non-function values. When specified as a function, whose signature is `function(Date): string | Array<string>|Object<string, boolean>`, the return value is also `class` expressions suppported by Vue. |
| ``disabled-date`` | `function(Date, Date=): boolean=` | `() => false` | Used to customize whether the specified date is disabled or not. The first parameter is the date to be used to determine if the date is disabled. When in the range selection process and a date is already selected, it is passed as the second parameter. |
| ``clearable`` | `boolean=` | `false` | Whether selected date (ranges) can be cleared. |
| ``placeholder`` | `string=` | `range ? datepicker.rangePlaceholder : datepicker.placeholder` | The placeholder text displayed when nothing is selected. Can be globally configured respectively for both [range](#configs-datepicker-rangePlaceholder) and [single date](#configs-datepicker-placeholder). |
| ``format`` | `string | function(Date): string=` | `'YYYY-MM-DD'` | When being string type, denotes the format expression for displaying final selected date (ranges). See details at [the documentation of date-fns](https://date-fns.org/v1.29.0/docs/format). Can also be a function to customize the formatting logic. |
| ``parse`` | `function(string): Date=` | Custom function to parse the input string expressions into `Date` objects. |
| ``shortcuts`` | `Array<Object>=` | `datepicker.shortcuts` | [^shortcuts] |
(#configs-datepicker-shortcutsPosition). |
| ``expanded`` | `boolean=` | `false` | [^expanded] |
| ``disabled`` | `boolean=` | `false` | Whether the date picker is disabled. |
| ``readonly`` | `boolean=` | `false` | Whether the date picker is read-only. |
^^^selected
:::badges
@@ -60,7 +60,7 @@ The selected date (range). Value type is determined by whether `range` is `true`
^^^
^^^shortcuts
Selection shortcuts can be custmized when selecting a date range. The data type is `Array<{label, from, to}>`. Can be [globally configured](./calendar#global-config).
Selection shortcuts can be custmized when selecting a date range. The data type is `Array<{label, from, to}>`. Can be [globally configured](#configs-datepicker-shortcuts).
+++Properties
<table>
@@ -92,7 +92,7 @@ Selection shortcuts can be custmized when selecting a date range. The data type
#### Date offset format for shortcut option
The `from` and `to` property in `shortcuts` options, which are used to calculate the start/end date of an shortcut option, share the same format which is `number|Object` and default to `0`.
The `from` and `to` property in `shortcuts` options, which are used to calculate the start/end date of an shortcut option, share the same format which is `number | Object` and default to `0`.
* `number` values are the offset in days calculated against “today”. eg. `-1` means `{ startOf: 'day', days: -1 }`, which is “yesterday”.
* `Object` values have the type of `{startOf: string=, days: number=, weeks: number=, months: number=, }`.
@@ -100,7 +100,7 @@ The `from` and `to` property in `shortcuts` options, which are used to calculate
+++Properties
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `startOf` | `string=` | `'day'` | The base date. Supported values include `'day'`/`'week'`/`'month'`/`'quarter'`/`'year'`. |
| `startOf` | `string=` | `'day'` | The base date. Supported values include `'day'` / `'week'` / `'month'` / `'quarter'` / `'year'`. |
| `day` | `number=` | - | Offset in days. |
| `week` | `number=` | - | Offset in weeks. |
| `month` | `number=` | - | Offset in months. |
@@ -173,7 +173,7 @@ Whether the dropdown overlay is expanded.
| Name | Description |
| -- | -- |
| `date` | [^slot-date] |
| ``date`` | [^slot-date] |
^^^slot-date
The content of each date cell in the dropdown overlay. Displays the corresponding day of month by default.
@@ -191,21 +191,21 @@ The content of each date cell in the dropdown overlay. Displays the correspondin
| Name | Description |
| -- | -- |
| `select` | [^event-select] |
| `selectstart` | Triggered when selecting a date range and a start date is selected. The callback parameter list is `(picking: Date)`, being the selected start date. |
| `selectprogress` | [^event-selectprogress] |
| `toggle` | Triggered when the expanded state is going to change. The callback parameter list is `(expanded: boolean)`. `expanded` denotes whether the dropdown overlay is to be expanded or collapsed. |
| ``select`` | [^event-select] |
| ``selectstart`` | Triggered when selecting a date range and a start date is selected. The callback parameter list is `(picking: Date)`, being the selected start date. |
| ``selectprogress`` | [^event-selectprogress] |
| ``toggle`` | Triggered when the expanded state is going to change. The callback parameter list is `(expanded: boolean)`. `expanded` denotes whether the dropdown overlay is to be expanded or collapsed. |
^^^event-select
:::badges
`v-model`
:::
Triggered when the selected date (range) is changed. The callback parameter list is `(selected)` with `selected` having the same type with the `selected` prop.
Triggered when the selected date (range) is changed. The callback parameter list is `(selected)` with `selected` having the same type with the [`selected`](#props-selected) prop.
^^^
^^^event-selectprogress
Triggered when selecting a date range and an end date is marked with pointer/keyboard interaction, and for each time the end date changes. The callback parameter list is `(picking)`, with `picking` being the marked date range. The type of `picking` depends on the value of the `multiple` prop.
Triggered when selecting a date range and an end date is marked with pointer/keyboard interaction, and for each time the end date changes. The callback parameter list is `(picking)`, with `picking` being the marked date range. The type of `picking` depends on the value of the [`multiple`](#props-multiple) prop.
+++Parameters types
| `multiple` | Type |
@@ -215,16 +215,16 @@ Triggered when selecting a date range and an end date is marked with pointer/key
+++
^^^
### Global config
### Configs
| Key | Type | Default | Description |
| -- | -- | -- | -- |
| `datepicker.shortcuts` | `Array` | `[]` | Default shortcut options. |
| `datepicker.shortcutsPosition` | `string` | `'before'` | Shows the shortcut options before or after month panels. Corresponds to `'before'` and `'after'` respectively. |
| `datepicker.placeholder` | `string` | `@@datepicker.selectDate` | Placeholder text displayed when selecting a single date. |
| `datepicker.monthPlaceholder` | `string` | `@@datepicker.selectMonth` | Placeholder text displayed when selecting a month. |
| `datepicker.yearPlaceholder` | `string` | `@@datepicker.selectYear` | Placeholder text displayed when selecting a year. |
| `datepicker.rangePlaceholder` | `string` | `@@datepicker.selectRange` | Placeholder text displayed when selecting a date range. |
| ``datepicker.shortcuts`` | `Array` | `[]` | Default shortcut options. |
| ``datepicker.shortcutsPosition`` | `string` | `'before'` | Shows the shortcut options before or after month panels. Corresponds to `'before'` and `'after'` respectively. |
| ``datepicker.placeholder`` | `string` | `@@datepicker.selectDate` | Placeholder text displayed when selecting a single date. |
| ``datepicker.monthPlaceholder`` | `string` | `@@datepicker.selectMonth` | Placeholder text displayed when selecting a month. |
| ``datepicker.yearPlaceholder`` | `string` | `@@datepicker.selectYear` | Placeholder text displayed when selecting a year. |
| ``datepicker.rangePlaceholder`` | `string` | `@@datepicker.selectRange` | Placeholder text displayed when selecting a date range. |
:::tip
`@@` prefixed values denote corresponding properties in the locale settings.
@@ -234,5 +234,5 @@ Triggered when selecting a date range and an end date is marked with pointer/key
| Name | Description |
| -- | -- |
| `calendar` | Calendar. |
| `clear` | Clear selection. |
| ``calendar`` | Calendar. |
| ``clear`` | Clear selection. |

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

@@ -4,7 +4,7 @@
### Sizes and fullscreen
Available size/dimension variants for the `ui` prop: `s`/`m`/`narrow`/`medium`/`wide`/`auto`.
Available size/dimension variants for the [`ui`](#props-ui) prop: `s` / `m` / `narrow` / `medium` / `wide` / `auto`.
[[ demo src="/demo/dialog/size.vue" ]]
@@ -34,23 +34,24 @@ Available size/dimension variants for the `ui` prop: `s`/`m`/`narrow`/`medium`/`
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `modal` | `boolean=` | `true` | Whether to display a backdrop to block interactions with the content underneath. Modal dialogs preempt focus by default (will return focus when closed). |
| `title` | `string=` | - | The title of the dialog. Will be ignored if `title` slot is specified. |
| `open` | `boolean=` | `false` | [^open] |
| `closable` | `boolean=` | `true` | Whether to display a close button at the top right corner. |
| `outside-closable` | `boolean=` | `false` | Wether to close the dialog when user click outside. |
| `draggable` | `boolean=` | `false` | Whether the dialog is draggable. |
| `escapable` | `boolean=` | `false` | Whether to allow closing the dialog after pressing <kbd>esc</kbd>. Only works when `closable` is set to `true`. |
| `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. |
| ``ui`` | `string=` | - | [^ui] |
| ``modal`` | `boolean=` | `true` | Whether to display a backdrop to block interactions with the content underneath. Modal dialogs preempt focus by default (will return focus when closed). |
| ``title`` | `string=` | - | The title of the dialog. Will be ignored if [`title`](#slots-title) slot is specified. |
| ``open`` | `boolean=` | `false` | [^open] |
| ``closable`` | `boolean=` | `true` | Whether to display a close button at the top right corner. |
| ``outside-closable`` | `boolean=` | `false` | Wether to close the dialog when user click outside. |
| ``draggable`` | `boolean=` | `false` | Whether the dialog is draggable. |
| ``escapable`` | `boolean=` | `false` | Whether to allow closing the dialog after pressing <kbd>esc</kbd>. Only works when `closable` is set to `true`. |
| ``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-priority) 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-overlay-class) prop of [`Overlay`](./overlay) component. |
| ``overlay-style`` | `string | Array | Object=` | - | See the [`overlay-style`](./overlay#props-overlay-style) prop of the [`Overlay`](./overlay) component. |
^^^ui
Style variants.
@@ -109,7 +110,7 @@ methods: {
| Name | Description |
| -- | -- |
| `default` | The content of the dialog. |
| `title` | The title of the dialog. Will ignore the `title` prop if this slot is specified. |
| `title` | The title of the dialog. Will ignore the [`title`](#props-title) prop if this slot is specified. |
| `foot` | [^slot-foot] |
^^^slot-foot

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

@@ -8,13 +8,13 @@
### Style variants
Available style variants for the `ui` prop: `primary`/`text`.
Available style variants for the [`ui`](#props-ui) prop: `primary` / `text`.
[[ demo src="/demo/dropdown/style.vue" ]]
### Size variants
Available size values for the `ui` prop: `xs`/`s`/`m`/`l`.
Available size values for the [`ui`](#props-ui) prop: `xs` / `s` / `m` / `l`.
[[ demo src="/demo/dropdown/size.vue" ]]
@@ -26,7 +26,7 @@ Can be used with embedded `OptionGroup`s & `Option`s.
### Searchable dropdown
Using`searchable` prop to make the component support search functionality.
Using[`searchable`](#props-searchable) prop to make the component support search functionality.
[[ demo src="/demo/dropdown/searchable.vue" ]]
@@ -38,7 +38,7 @@ Use the `disabled` property in `options` items to disable single option.
### Trigger and split
Use the `trigger` prop to specify when to open the dropdown menu. Use the `split` prop to separate command button and dropdown button.
Use the [`trigger`](#props-trigger) prop to specify when to open the dropdown menu. Use the [`split`](#props-split) prop to separate command button and dropdown button.
[[ demo src="/demo/dropdown/other.vue" ]]
@@ -48,15 +48,15 @@ Use the `trigger` prop to specify when to open the dropdown menu. Use the `split
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `options` | `Array<Object>=` | `[]` | [^options] |
| `label` | `string` | - | The descriptive label of the dropdown button. |
| `trigger` | `string=` | `'click'` | When to trigger the dropdown to open. Available values are `'click'`/`'hover'`. |
| `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`](./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`` | `string=` | - | [^ui] |
| ``options`` | `Array<Object>=` | `[]` | [^options] |
| ``label`` | `string` | - | The descriptive label of the dropdown button. |
| ``trigger`` | `string=` | `'click'` | When to trigger the dropdown to open. Available values are `'click'` / `'hover'`. |
| ``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`](./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. |
^^^ui
Style variants.
@@ -80,7 +80,7 @@ The list of options with the option type being `{label, value, dropdown, disable
| -- | -- | -- |
| `label` | `string` | The descriptive label of the option. |
| `value` | `*` | The value of the option. |
| `options` | `Array<Object>=` | The child options of current option. The item type is the same as the items of the `options` prop. |
| `options` | `Array<Object>=` | The child options of current option. The item type is the same as the items of the [`options`](#props-options) prop. |
| `disabled` | `boolean=` | Whether the option is disabled. |
+++
^^^
@@ -97,17 +97,17 @@ Whether the dropdown menu is expanded.
| Name | Description |
| -- | -- |
| `default` | The content of the options dropdown layer. Can be used to place `Option`s or `OptionGroups`s when the `options` prop is not specified. |
| `before` | The content before the options in the dropdown layer. |
| `after` | The content after the options in the dropdown layer. |
| `label` | [^slot-label] |
| `group-label` | [^slot-group-label] |
| `option-label` | [^slot-option-label] |
| `option` | [^slot-option] |
| `trigger` | [^slot-trigger] |
| ``default`` | The content of the options dropdown layer. Can be used to place `Option`s or `OptionGroups`s when the [`options`](#props-options) prop is not specified. |
| ``before`` | The content before the options in the dropdown layer. |
| ``after`` | The content after the options in the dropdown layer. |
| ``label`` | [^slot-label] |
| ``group-label`` | [^slot-group-label] |
| ``option-label`` | [^slot-option-label] |
| ``option`` | [^slot-option] |
| ``trigger`` | [^slot-trigger] |
^^^slot-label
The content of the select button. Displays the `label` prop by default.
The content of the select button. Displays the [`label`](#props-label) prop by default.
+++Scope properties
| Name | Type | Description |
@@ -165,7 +165,7 @@ The entire drop-down trigger area. Displays the dropdown button by default.
+++Scope properties
| Name | Type | Description |
| --- | --- | --- |
| `attrs` | `Object` | Attributes that need to be output to the trigger element, including `aria-*`/`disabled`, etc., can be output using `v-bind="attrs"`. |
| `attrs` | `Object` | Attributes that need to be output to the trigger element, including `aria-*` / `disabled`, etc., can be output using `v-bind="attrs"`. |
| `handlers` | `Object` | [^handlers-desc] |
| `expanded` | `boolean` | Whether the dropdown menu is expanded or not. |
| `toggle` | `function(force?: boolean): void` | Used to toggle the expanded state of the dropdown menu. |
@@ -184,12 +184,12 @@ The element used to bind `handlers` needs to support focus acquisition so that v
| Name | Description |
| -- | -- |
| `click` | Triggered when an option is clicked. The callback parameter list is `(value: *=)`. `value` is the `value` property of the option being clicked. Also triggered when `split` is `true` and the command button is clicked, in this case there won't be a `value` argument. |
| `toggle` | Triggered when the expanded state is going to change. The callback parameter list is `(expanded: boolean)`. `expanded` denotes whether the dropdown menu is to be expanded or collapsed. |
| ``click`` | Triggered when an option is clicked. The callback parameter list is `(value: *=)`. `value` is the `value` property of the option being clicked. Also triggered when `split` is `true` and the command button is clicked, in this case there won't be a `value` argument. |
| ``toggle`` | Triggered when the expanded state is going to change. The callback parameter list is `(expanded: boolean)`. `expanded` denotes whether the dropdown menu is to be expanded or collapsed. |
### Icons
| Name | Description |
| -- | -- |
| `expand` | Expand the dropdown layer. |
| `collapse` | Collapse the dropdown layer. |
| ``expand`` | Expand the dropdown layer. |
| ``collapse`` | Collapse the dropdown layer. |

20
one/docs/en-US/components/filter-panel.md
View File

@@ -10,11 +10,11 @@
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `datasource` | `Array<Object>` | `[]` | Datasource of the filter with the type being `{label: string, ...}`. |
| `searchable` | `boolean=` | `true` | Whether to allow search. |
| `filter` | `function=` | See description. | [^filter] |
| `search-on-input` | `boolean=` | `true` | Whether to trigger search while typing. |
| `placeholder` | `string=` | - | The placeholder text of the search input. |
| ``datasource`` | `Array<Object>` | `[]` | Datasource of the filter with the type being `{label: string, ...}`. |
| ``searchable`` | `boolean=` | `true` | Whether to allow search. |
| ``filter`` | `function=` | See description. | [^filter] |
| ``search-on-input`` | `boolean=` | `true` | Whether to trigger search while typing. |
| ``placeholder`` | `string=` | - | The placeholder text of the search input. |
^^^filter
The filter function. The function signature is `function(keyword, item, index, datasource): boolean`. Items that make filter function returns `false` will be hidden.
@@ -25,7 +25,7 @@ The filter function. The function signature is `function(keyword, item, index, d
| `keyword` | `string` | The search keyword. |
| `item` | `Object` | Each item in `datasource`. |
| `index` | `number` | The index of each item among its siblings. |
| `datasource` | `Array<{label: string, ...}>` | Same as the `datasource` prop. |
| `datasource` | `Array<{label: string, ...}>` | same as the [`datasource`](#props-datasource) prop. |
+++
+++Default value
@@ -43,9 +43,9 @@ function (keyword, { label }) {
| Name | Description |
| -- | -- |
| `head` | The head area of the filter panel. Displays the `title` prop by default. |
| `no-data` | Content to be displayed when `datasource` is empty. |
| `default` | [^default] |
| ``head`` | The head area of the filter panel. Displays the [`title`](#props-title) prop by default. |
| ``no-data`` | Content to be displayed when `datasource` is empty. |
| ``default`` | [^default] |
^^^default
The content of the filter panel.
@@ -53,6 +53,6 @@ The content of the filter panel.
+++Scope properties
| Name | Type | Description |
| -- | -- | -- |
| `items` | `Array<Object>` | The filtered items from the `datasource` prop and shares the same type with `datasource`. |
| `items` | `Array<Object>` | The filtered items from the [`datasource`](#props-datasource) prop and shares the same type with `datasource`. |
+++
^^^

10
one/docs/en-US/components/grid-column.md
View File

@@ -14,13 +14,13 @@ See [the demos of `GridContainer`](./grid-container#demos).
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `span` | `number=` | - | The number of original grid columns to span. If not specified it will span across the whole row. |
| `offset` | `number=` | `0` | The number of original grid columns to move current column to the right. Will affect the position of following columns. |
| `pull` | `number=` | `0` | The number of original grid columns to move current column to the left. Will *not* affect the position of following columns. |
| `push` | `number=` | `0` | The number of original grid columns to move current column to the right. Will *not* affect the position of following columns. |
| ``span`` | `number=` | - | The number of original grid columns to span. If not specified it will span across the whole row. |
| ``offset`` | `number=` | `0` | The number of original grid columns to move current column to the right. Will affect the position of following columns. |
| ``pull`` | `number=` | `0` | The number of original grid columns to move current column to the left. Will *not* affect the position of following columns. |
| ``push`` | `number=` | `0` | The number of original grid columns to move current column to the right. Will *not* affect the position of following columns. |
### Slots
| Name | Description |
| -- | -- |
| `default` | The content of the grid column. |
| ``default`` | The content of the grid column. |

18
one/docs/en-US/components/grid-container.md
View File

@@ -20,24 +20,24 @@
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `columns` | `number` | `gridcontainer.columns` | The number of columns. |
| `margin` | `number` | `gridcontainer.margin` | Margin around both sides of the grid container in `px`. |
| `gutter` | `number` | `gridcontainer.gutter` | Gutter between adjacent grid columns in `px`. |
| `width` | `number` | - | The width of the grid container in `px` when creating fixed-width grids. |
| ``columns`` | `number` | `gridcontainer.columns` | The number of columns. |
| ``margin`` | `number` | `gridcontainer.margin` | Margin around both sides of the grid container in `px`. |
| ``gutter`` | `number` | `gridcontainer.gutter` | Gutter between adjacent grid columns in `px`. |
| ``width`` | `number` | - | The width of the grid container in `px` when creating fixed-width grids. |
### Slots
| Name | Description |
| -- | -- |
| `default` | The content of the grid. Can only have [`GridRow`](./grid-row) components as direct children. |
| ``default`` | The content of the grid. Can only have [`GridRow`](./grid-row) components as direct children. |
### Global config
### Configs
| Key | Type | Default | Description |
| -- | -- | -- | -- |
| `gridcontainer.columns` | `number` | `12` | The number of columns. |
| `gridcontainer.gutter` | `number` | `30` | Gutter between adjacent grid columns in `px`. |
| `gridcontainer.margin` | `number` | `0` | Margin around both sides of the grid container in `px`. |
| ``gridcontainer.columns`` | `number` | `12` | The number of columns. |
| ``gridcontainer.gutter`` | `number` | `30` | Gutter between adjacent grid columns in `px`. |
| ``gridcontainer.margin`` | `number` | `0` | Margin around both sides of the grid container in `px`. |
#### Default config in `veui-theme-dls`

2
one/docs/en-US/components/grid-row.md
View File

@@ -14,4 +14,4 @@ See [the demos of `GridContainer`](./grid-container#demos).
| Name | Description |
| -- | -- |
| `default` | The content of the grid row. Can only have [`GridColumn`](./grid-column) components as direct children. |
| ``default`` | The content of the grid row. Can only have [`GridColumn`](./grid-column) components as direct children. |

20
one/docs/en-US/components/icon.md
View File

@@ -1,7 +1,7 @@
# Icon
:::tip
VEUI's `Icon` component is compatible with [Vue-Awesome](https://github.com/Justineo/vue-awesome), including icon registration and specifying icon with a string-typed `name` prop. The `name` prop also accept a component definition directly.
VEUI's `Icon` component is compatible with [Vue-Awesome](https://github.com/Justineo/vue-awesome), including icon registration and specifying icon with a string-typed [`name`](#props-name) prop. The [`name`](#props-name) prop also accept a component definition directly.
:::
## Demos
@@ -14,20 +14,20 @@ VEUI's `Icon` component is compatible with [Vue-Awesome](https://github.com/Just
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `name` | `string|Object` | - | The name of the icon or its component definition. |
| `label` | `string` | - | The descriptive label for the icon, which is accessible to assistive devices. The icon is hidden for assistive devices if `label` doesn't exist. |
| `scale` | `number` | - | The size scale of the icon. Doesn't scale by default. |
| `spin` | `boolean` | `false` | Whether the icon should be spinning. |
| `pulse` | `boolean` | `false` | Whether the icon should be pulsing. |
| `inverse` | `boolean` | `false` | Whether to inverse the color. (Having a white foreground to be used against dark backgrounds.) |
| `flip` | `string` | - | How to flip an icon. Can be either `'horizontal'` or `'vertical'`. |
| ``name`` | `string | Object` | - | The name of the icon or its component definition. |
| ``label`` | `string` | - | The descriptive label for the icon, which is accessible to assistive devices. The icon is hidden for assistive devices if `label` doesn't exist. |
| ``scale`` | `number` | - | The size scale of the icon. Doesn't scale by default. |
| ``spin`` | `boolean` | `false` | Whether the icon should be spinning. |
| ``pulse`` | `boolean` | `false` | Whether the icon should be pulsing. |
| ``inverse`` | `boolean` | `false` | Whether to inverse the color. (Having a white foreground to be used against dark backgrounds.) |
| ``flip`` | `string` | - | How to flip an icon. Can be either `'horizontal'` or `'vertical'`. |
:::warning
When specifying a component definition for the `name` prop, only `spin` prop is supported.
When specifying a component definition for the [`name`](#props-name) prop, only [`spin`](#props-spin) prop is supported.
:::
### Slots
| Name | Description |
| -- | -- |
| `default` | Can be used to implement a stacked icon. The embedded `Icon` components will be stacked together, being centered. The wrapper `Icon` doesn't require the `name` prop. |
| ``default`` | Can be used to implement a stacked icon. The embedded `Icon` components will be stacked together, being centered. The wrapper `Icon` doesn't require the [`name`](#props-name) prop. |

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

@@ -4,19 +4,19 @@
### Size variants
Available size variants for the `ui` prop: `xs`/`s`/`m`/`l`.
Available size variants for the [`ui`](#props-ui) prop: `xs` / `s` / `m` / `l`.
[[ demo src="/demo/input/size.vue" ]]
### Read-only state
Use the `readonly` prop to set an input to read-only state.
Use the [`readonly`](#props-readonly) prop to set an input to read-only state.
[[ demo src="/demo/input/readonly.vue" ]]
### Disabled state
Use the `disabled` prop to set an input to disabled state.
Use the [`disabled`](#props-disabled) prop to set an input to disabled state.
[[ demo src="/demo/input/disabled.vue" ]]
@@ -26,17 +26,17 @@ Use the `disabled` prop to set an input to disabled state.
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `value` | `string` | '' | [^value] |
| `disabled` | `boolean=` | `false` | Whether the input is disabled. |
| `readonly` | `boolean=` | `false` | Whether the input is read-only. |
| `type` | `string=` | `'text'` | [^type] |
| `placeholder` | `string=` | - | The placeholder text of the input. |
| `clearable` | `boolean=` | `false` | Whether to show a clear button. |
| `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`` | `string=` | - | [^ui] |
| ``value`` | `string` | '' | [^value] |
| ``disabled`` | `boolean=` | `false` | Whether the input is disabled. |
| ``readonly`` | `boolean=` | `false` | Whether the input is read-only. |
| ``type`` | `string=` | `'text'` | [^type] |
| ``placeholder`` | `string=` | - | The placeholder text of the input. |
| ``clearable`` | `boolean=` | `false` | Whether to show a clear button. |
| ``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.
@@ -86,8 +86,8 @@ Wether to trim the input value. If set to `true`, the input value will be trimme
| Name | Description |
| -- | -- |
| `before` | The content before the input area inside the component. |
| `after` | The content after the input area inside the component. |
| ``before`` | The content before the input area inside the component. |
| ``after`` | The content after the input area inside the component. |
:::warning
Slots will squeeze the width of the input area.
@@ -97,8 +97,8 @@ Slots will squeeze the width of the input area.
| Name | Description |
| -- | -- |
| `change` | [^event-change] |
| `input` | [^event-input] |
| ``change`` | [^event-change] |
| ``input`` | [^event-input] |
^^^event-change
Triggered when the input value is changed like the native `change` event. The callback parameter list is `(value, event)`.
@@ -116,7 +116,7 @@ Triggered when the input value is changed like the native `change` event. The ca
`v-model`
:::
Triggered when inputting into the input. Affected by the `composition` prop. The callback parameter list is `(value: string)`, where `value` is the current value of the input.
Triggered when inputting into the input. Affected by the [`composition`](#props-composition) prop. The callback parameter list is `(value: string)`, where `value` is the current value of the input.
^^^
Additionally, `Input` exposes the following native events:
@@ -129,4 +129,4 @@ The callback parameter is the corresponding native event object for all events a
| Name | Description |
| -- | -- |
| `remove` | Remove button. |
| ``remove`` | Remove button. |

18
one/docs/en-US/components/link.md
View File

@@ -10,13 +10,13 @@
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `to` | `string|Object` | - | Denotes the target route of the link. When used with Vue Router, the value will be passed to a [`<router-link>`](https://router.vuejs.org/api/#router-link)'s [`to`](https://router.vuejs.org/api/#to) prop. Otherwise only `string` type is supported, and the value will output to the `href` attribute of an `<a>` element. |
| `rel` | `string` | - | Specifies the relationship of the target object to the link object. Refer to [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) for more details. |
| `target` | `string` | - | [^target] |
| `native` | `boolean` | `false` | Whether to enforce the use of native `<a>` element (instead of `<router-link>`). |
| `fallback` | `string` | `'span'` | Specifies the fallback element type when no `to` prop is specified. |
| `disabled` | `boolean=` | `false` | Whether the link is disabled. |
| ``ui`` | `string=` | - | [^ui] |
| ``to`` | `string | Object` | - | Denotes the target route of the link. When used with Vue Router, the value will be passed to a [`<router-link>`](https://router.vuejs.org/api/#router-link)'s [`to`](https://router.vuejs.org/api/#to) prop. Otherwise only `string` type is supported, and the value will output to the `href` attribute of an `<a>` element. |
| ``rel`` | `string` | - | Specifies the relationship of the target object to the link object. Refer to [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) for more details. |
| ``target`` | `string` | - | [^target] |
| ``native`` | `boolean` | `false` | Whether to enforce the use of native `<a>` element (instead of `<router-link>`). |
| ``fallback`` | `string` | `'span'` | Specifies the fallback element type when no [`to`](#props-to) prop is specified. |
| ``disabled`` | `boolean=` | `false` | Whether the link is disabled. |
^^^ui
Style variants.
@@ -42,10 +42,10 @@ When `target` has a value of `_blank`, a `noopener` token will be automatically
| Name | Description |
| -- | -- |
| `default` | The content of the link. |
| ``default`` | The content of the link. |
### Events
| Name | Description |
| -- | -- |
| `click` | Triggered upon clicks when the `to` prop is falsy or the `native` prop is `true`. The callback parameter list is `(event)`, where the type of `event` is HTML's native [`Event`](https://developer.mozilla.org/en-US/docs/Web/Events/click). |
| ``click`` | Triggered upon clicks when the [`to`](#props-to) prop is falsy or the [`native`](#props-native) prop is `true`. The callback parameter list is `(event)`, where the type of `event` is HTML's native [`Event`](https://developer.mozilla.org/en-US/docs/Web/Events/click). |

16
one/docs/en-US/components/loading.md
View File

@@ -4,25 +4,25 @@
### Stylistic variants
Available style variants for the `ui` prop: `normal`/`strong`/`reverse`.
Available style variants for the [`ui`](#props-ui) prop: `normal` / `strong` / `reverse`.
[[demo src="/demo/loading/style.vue"]]
### Size variants
Available size variants for the `ui` prop: `s`/`m`/`l`.
Available size variants for the [`ui`](#props-ui) prop: `s` / `m` / `l`.
[[demo src="/demo/loading/size.vue"]]
### Layout variants
Available layout variants for the `ui` prop: `vertical`.
Available layout variants for the [`ui`](#props-ui) prop: `vertical`.
[[demo src="/demo/loading/layout.vue"]]
### Custom loading icons
Using `spinner` slot to replace default loading icon.
Using [`spinner`](#slots-spinner) slot to replace default loading icon.
[[demo src="/demo/loading/slot.vue"]]
@@ -30,8 +30,8 @@ Using `spinner` slot to replace default loading icon.
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `loading` | `boolean` | `false` | Whether the component is in loading state. |
| ``ui`` | `string=` | - | [^ui] |
| ``loading`` | `boolean` | `false` | Whether the component is in loading state. |
^^^ui
Style variants. A space-separated list of enum values.
@@ -52,5 +52,5 @@ Style variants. A space-separated list of enum values.
| Name | Description |
| -- | -- |
| `spinner` | Loading icon. |
| `default` | Loading description. |
| ``spinner`` | Loading icon. |
| ``default`` | Loading description. |

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

@@ -14,11 +14,11 @@ See [the demos of `Select`](./select#demos) or [the demos of `Dropdown`](./dropd
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `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`](./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. |
| ``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`](./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. |
^^^options
The list of options with the option type being `{label, value, disabled, ...}`.
@@ -47,14 +47,14 @@ The way to display child options.
| Name | Description |
| -- | -- |
| `default` | The content of the options dropdown. Can be used to place `Option`s or `OptionGroups`s when the `options` prop is not specified. |
| `label` | [^slot-label] |
| `group-label` | [^slot-group-label] |
| `option-label` | [^slot-option-label] |
| `option` | [^slot-option] |
| ``default`` | The content of the options dropdown. Can be used to place `Option`s or `OptionGroups`s when the [`options`](#props-options) prop is not specified. |
| ``label`` | [^slot-label] |
| ``group-label`` | [^slot-group-label] |
| ``option-label`` | [^slot-option-label] |
| ``option`` | [^slot-option] |
^^^slot-label
The label of the option group. Displays the `label` prop by default.
The label of the option group. Displays the [`label`](#props-label) prop by default.
+++Scope properties
| Name | Type | Description |
@@ -111,4 +111,4 @@ Additionally, custom properties in current option, apart from the listed ones, w
| Name | Description |
| -- | -- |
| `expandable` | Expandable options. |
| ``expandable`` | Expandable options. |

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

@@ -14,17 +14,17 @@ See [the demos of `Select`](./select#demos) or [the demos of `Dropdown`](./dropd
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `label` | `string` | The descriptive label of the option. |
| `value` | `*` | The value of the option. |
| `disabled` | `boolean=` | Whether the option is disabled. |
| `hidden` | `boolean=` | `false` | Whether the option is hidden. |
| ``label`` | `string` | The descriptive label of the option. |
| ``value`` | `*` | The value of the option. |
| ``disabled`` | `boolean=` | Whether the option is disabled. |
| ``hidden`` | `boolean=` | `false` | Whether the option is hidden. |
### Slots
| Name | Description |
| -- | -- |
| `default` | The entire content area of the option. Displays the label and potential check icon by default.
| `label` | The content of the option label. Displays the `label` prop by default. |
| ``default`` | The entire content area of the option. Displays the label and potential check icon by default.
| ``label`` | The content of the option label. Displays the [`label`](#props-label) prop by default. |
### Events
@@ -34,4 +34,4 @@ The `click` event is triggered upon clicks without callback parameters.
| Name | Description |
| -- | -- |
| `checked` | Checked state. |
| ``checked`` | Checked state. |

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

@@ -34,17 +34,17 @@ The stacking order of child overlays a affected by their parent overlays.
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `ui` | `string=` | - | Style variants. Not defined by `veui-theme-dls` but can be customized. |
| `open` | `boolean` | `false` | [^open] |
| `target` | `string|Vue|HTMLElement` | - | [^target] |
| `priority` | `number` | - | [^priority] |
| `autofocus` | `boolean` | - | Whether to automatically focus the first focusable element in the overlay. |
| `modal` | `boolean` | `false` | Whether the overlay will preempt focus and trap focus upon keyboard navigation (will return focus when closed). |
| `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. |
| ``ui`` | `string=` | - | Style variants. Not defined by `veui-theme-dls` but can be customized. |
| ``open`` | `boolean` | `false` | [^open] |
| ``target`` | `string | Vue | HTMLElement` | - | [^target] |
| ``priority`` | `number` | - | [^priority] |
| ``autofocus`` | `boolean` | - | Whether to automatically focus the first focusable element in the overlay. |
| ``modal`` | `boolean` | `false` | Whether the overlay will preempt focus and trap focus upon keyboard navigation (will return focus when closed). |
| ``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
:::badges
@@ -89,18 +89,18 @@ The style expression applied to the root element of the overlay. Supports all va
| Name | Description |
| -- | -- |
| `default` | The content of the overlay. |
| ``default`` | The content of the overlay. |
### Events
| Name | Description |
| -- | -- |
| `locate` | Triggered when the overlay updated its location. |
| `afteropen` | Triggered after the overlay is opened. If leave transition is provided by theme, then `afteropen` will be triggered when the transition finishes. |
| `afterclose` | Triggered after the overlay is closed. If leave transition is provided by theme, then `afterclose` will be triggered when the transition finishes. |
| ``locate`` | Triggered when the overlay updated its location. |
| ``afteropen`` | Triggered after the overlay is opened. If leave transition is provided by theme, then `afteropen` will be triggered when the transition finishes. |
| ``afterclose`` | Triggered after the overlay is closed. If leave transition is provided by theme, then `afterclose` will be triggered when the transition finishes. |
### Global config
### Configs
| Key | Type | Default | Description |
| -- | -- | -- | -- |
| `overlay.overlayClass` | `string|Array|Object=` | `[]` | The class name to be applied to every overlay. Supports all values defined by [Vue's `class` expressions](https://vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes). |
| ``overlay.overlayClass`` | `string | Array | Object=` | `[]` | The class name to be applied to every overlay. Supports all values defined by [Vue's `class` expressions](https://vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes). |

30
one/docs/en-US/components/pagination.md
View File

@@ -8,7 +8,7 @@
### Go to a specific page
Use the `goto` prop to enable the go to page section.
Use the [`goto`](#props-goto) prop to enable the go to page section.
[[ demo src="/demo/pagination/goto.vue" ]]
@@ -18,14 +18,14 @@ Use the `goto` prop to enable the go to page section.
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `page` | `number` | `1` | Current page index (starts from `1`). |
| `total` | `number` | - | Total page count. |
| `to` | `string|Object` | `''` | [^to] |
| `native` | `boolean` | `false` | Use native links for navigation. |
| `page-size` | `number` | `pagination.pageSize` | [^page-size] |
| `page-sizes` | `Array` | `pagination.pageSizes` | The predefined available page sizes for users to select. |
| `goto` | `boolean` | `false` | Whether to show “goto page number” section. |
| ``ui`` | `string=` | - | [^ui] |
| ``page`` | `number` | `1` | Current page index (starts from `1`). |
| ``total`` | `number` | - | Total page count. |
| ``to`` | `string | Object` | `''` | [^to] |
| ``native`` | `boolean` | `false` | Use native links for navigation. |
| ``page-size`` | `number` | `pagination.pageSize` | [^page-size] |
| ``page-sizes`` | `Array` | `pagination.pageSizes` | The predefined available page sizes for users to select. |
| ``goto`` | `boolean` | `false` | Whether to show “goto page number” section. |
^^^ui
Style variants.
@@ -40,7 +40,7 @@ Style variants.
^^^
^^^to
The page path template. The type is the same as the `to` prop of [`Link`](./link#props) component. When being `string`, the `:page` placeholder will be replaced with the actual page number. When being `Object`, the value will be resolved to string first and be go through the same placeholder replacement process.
The page path template. The type is the same as the [`to`](./link#props-to) prop of [`Link`](./link) component. When being `string`, the `:page` placeholder will be replaced with the actual page number. When being `Object`, the value will be resolved to string first and be go through the same placeholder replacement process.
^^^
^^^page-size
@@ -55,13 +55,13 @@ The count of item in each page.
| Name | Description |
| -- | -- |
| `pagesizechange` | Triggered when `page-size` is changed. The callback parameter list is `(size: number)`, with `size` being the new `page-size` value. |
| `redirect` | Triggered when page links are activated. The callback parameter list is `(page: number, event: Object)`. `page` is the number of the targe page. `event` is the native event object, calling `event.preventDefault` will stop navigation when `native` is `true`. |
| ``pagesizechange`` | Triggered when `page-size` is changed. The callback parameter list is `(size: number)`, with `size` being the new `page-size` value. |
| ``redirect`` | Triggered when page links are activated. The callback parameter list is `(page: number, event: Object)`. `page` is the number of the targe page. `event` is the native event object, calling `event.preventDefault` will stop navigation when `native` is `true`. |
### Global config
### Configs
| Key | Type | Default | Description |
| -- | -- | -- | -- |
| `pagination.pageSize` | `number` | `30` | The count of item in each page. |
| `pagination.pageSizes` | `Array<number>` | `[30, 50, 100]` | The predefined available page sizes for users to select. |
| ``pagination.pageSize`` | `number` | `30` | The count of item in each page. |
| ``pagination.pageSizes`` | `Array<number>` | `[30, 50, 100]` | The predefined available page sizes for users to select. |

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

@@ -4,19 +4,19 @@
### Style variants
Available size variants for the `ui` prop: `s`/`m`.
Available size variants for the [`ui`](#props-ui) prop: `s` / `m`.
[[ demo src="/demo/popover/ui.vue" ]]
### Position
Use the `position` prop to specify the placement of the popover.
Use the [`position`](#props-position) prop to specify the placement of the popover.
[[ demo src="/demo/popover/position.vue" ]]
### Triggers
Use the `trigger` prop to specify when to show/hide the popover.
Use the [`trigger`](#props-trigger) prop to specify when to show/hide the popover.
[[ demo src="/demo/popover/trigger.vue" ]]
@@ -26,14 +26,14 @@ Use the `trigger` prop to specify when to show/hide the popover.
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `open` | `boolean` | `false` | [^open] |
| `target` | `string|Vue|Node` | - | See the [`target` prop](./overlay#props) of thh [`Overlay`](./overlay) component. |
| `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`](./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`` | `string=` | - | [^ui] |
| ``open`` | `boolean` | `false` | [^open] |
| ``target`` | `string | Vue | Node` | - | See the [`target`](./overlay#props-target) prop of thh [`Overlay`](./overlay) component. |
| ``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`](./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. |
^^^ui
Style variants.
@@ -68,4 +68,4 @@ eg. `click` denotes showing the popover after clicking the `target` and hiding i
| Name | Description |
| -- | -- |
| `default` | The content of the popover. |
| ``default`` | The content of the popover. |

28
one/docs/en-US/components/progress.md
View File

@@ -10,16 +10,16 @@
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `type` | `string` | `'bar'` | The type of the progress. Available values are `bar`/`circular`, denoting progress bar and progress circle respectively. |
| `desc` | `boolean` | `false` | The description of the progress. |
| `value` | `number` | `0` | Progress value. |
| `min` | `number` | `0` | Minimum value. |
| `max` | `number` | `1` | Max value. |
| `decimal-place` | `number` | `0` | Decimal place for the progress value. |
| `status` | `string` | - | [^status] |
| `autosucceed` | `boolean|number` | - | Whether automatically enter the `success` status when the progress reaches the maximum value. `true` denotes entering immediately, while `number` values denotes the delay in milliseconds before entering the `success` status. |
| `indeterminate` | `boolean` | `false` | Whether the progress is indeterminate. Currently only works when `type` is `bar`. |
| ``ui`` | `string=` | - | [^ui] |
| ``type`` | `string` | `'bar'` | The type of the progress. Available values are `bar` / `circular`, denoting progress bar and progress circle respectively. |
| ``desc`` | `boolean` | `false` | The description of the progress. |
| ``value`` | `number` | `0` | Progress value. |
| ``min`` | `number` | `0` | Minimum value. |
| ``max`` | `number` | `1` | Max value. |
| ``decimal-place`` | `number` | `0` | Decimal place for the progress value. |
| ``status`` | `string` | - | [^status] |
| ``autosucceed`` | `boolean | number` | - | Whether automatically enter the `success` status when the progress reaches the maximum value. `true` denotes entering immediately, while `number` values denotes the delay in milliseconds before entering the `success` status. |
| ``indeterminate`` | `boolean` | `false` | Whether the progress is indeterminate. Currently only works when `type` is `bar`. |
^^^ui
Style variants.
@@ -37,14 +37,14 @@ Style variants.
`.sync`
:::
The status of the progress. Available values are `success`/`alert`, denoting success and alert status respectively.
The status of the progress. Available values are `success` / `alert`, denoting success and alert status respectively.
^^^
### Slots
| Name | Description |
| -- | -- |
| `default` | [^slot-default] |
| ``default`` | [^slot-default] |
^^^slot-default
The description content. Displays the percentage value of the progress by default.
@@ -53,7 +53,7 @@ The description content. Displays the percentage value of the progress by defaul
| Name | Type | Description |
| -- | -- | -- |
| `percent` | `number` | The percentage value of the progress. |
| `value` | `number` | The value of the progress, same as the `value` prop. |
| `status` | `string` | The status of the progress, same as the `status` prop. |
| `value` | `number` | The value of the progress, same as the [`value`](#props-value) prop. |
| `status` | `string` | The status of the progress, same as the [`status`](#props-status) prop. |
+++
^^^

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

@@ -10,17 +10,17 @@
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `open` | `boolean` | `false` | [^open] |
| `title` | `string` | - | The title of the prompt box. |
| `content` | `string` | - | The description text above the text input. |
| `value` | `string` | `''` | [^value] |
| `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`` | `boolean` | `false` | [^open] |
| ``title`` | `string` | - | The title of the prompt box. |
| ``content`` | `string` | - | The description text above the text input. |
| ``value`` | `string` | `''` | [^value] |
| ``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-before-close) prop of the [`Dialog`](./dialog) component. |
| ``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. |
^^^open
:::badges
@@ -42,18 +42,18 @@ The value of the prompt input.
| Name | Description |
| -- | -- |
| `default` | The content of the prompt box. |
| `title` | The title of the prompt box. Will ignore the `title` prop when specified. |
| `foot` | The foot area of the prompt box. Displays an “OK” and a “Cancel” button by default. |
| ``default`` | The content of the prompt box. |
| ``title`` | The title of the prompt box. Will ignore the [`title`](#props-title) prop when specified. |
| ``foot`` | The foot area of the prompt box. Displays an “OK” and a “Cancel” button by default. |
### Events
| Name | Description |
| -- | -- |
| `input` | [^event-input] |
| `ok` | Triggered when the “OK” button is clicked. |
| `cancel` | Triggered when the “Cancel” button is clicked. |
| `afterclose` | Triggered after the box overlay is closed. If leaving transition is provided by the theme, the event will be triggered after the transition completes. |
| ``input`` | [^event-input] |
| ``ok`` | Triggered when the “OK” button is clicked. |
| ``cancel`` | Triggered when the “Cancel” button is clicked. |
| ``afterclose`` | Triggered after the box overlay is closed. If leaving transition is provided by the theme, the event will be triggered after the transition completes. |
^^^event-input
:::badges

18
one/docs/en-US/components/radio-button-group.md
View File

@@ -4,7 +4,7 @@
### Size variants
Available values for the `ui` prop: `s`/`m`.
Available values for the [`ui`](#props-ui) prop: `s` / `m`.
[[ demo src="/demo/radio-button-group/default.vue" ]]
@@ -14,11 +14,11 @@ Available values for the `ui` prop: `s`/`m`.
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `items` | `Array<Object>` | `[]` | [^items] |
| `value` | `*` | - | [^value] |
| `disabled` | `boolean=` | `false` | Whether the radio button group is disabled. |
| `readonly` | `boolean=` | `false` | Whether the radio button group is read-only. |
| ``ui`` | `string=` | - | [^ui] |
| ``items`` | `Array<Object>` | `[]` | [^items] |
| ``value`` | `*` | - | [^value] |
| ``disabled`` | `boolean=` | `false` | Whether the radio button group is disabled. |
| ``readonly`` | `boolean=` | `false` | Whether the radio button group is read-only. |
^^^ui
Style variants.
@@ -54,10 +54,10 @@ The `value`s of the selected items.
| Name | Description |
| -- | -- |
| `item` | [^slot-item] |
| ``item`` | [^slot-item] |
^^^slot-item
The label content of each button. Displays the value of the `label` prop by default.
The label content of each button. Displays the value of the `label` property by default.
+++Scope properties
| Name | Type | Description |
@@ -75,7 +75,7 @@ Additionally, custom properties apart from the listed ones will also be passes i
| Name | Description |
| -- | -- |
| `change` | [^event-change] |
| ``change`` | [^event-change] |
^^^event-change
:::badges

18
one/docs/en-US/components/radio-group.md
View File

@@ -4,7 +4,7 @@
### Sizes
Available size variant for the `ui` prop: `s`/`m`.
Available size variant for the [`ui`](#props-ui) prop: `s` / `m`.
[[ demo src="/demo/radio-group/default.vue" ]]
@@ -14,11 +14,11 @@ Available size variant for the `ui` prop: `s`/`m`.
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `items` | `Array<Object>` | `[]` | [^items] |
| `value` | `*` | - | [^value] |
| `disabled` | `boolean=` | `false` | Whether the radio group is disabled. |
| `readonly` | `boolean=` | `false` | Whether the radio group is read-only. |
| ``ui`` | `string=` | - | [^ui] |
| ``items`` | `Array<Object>` | `[]` | [^items] |
| ``value`` | `*` | - | [^value] |
| ``disabled`` | `boolean=` | `false` | Whether the radio group is disabled. |
| ``readonly`` | `boolean=` | `false` | Whether the radio group is read-only. |
^^^ui
Style variants.
@@ -54,10 +54,10 @@ The `value` of the selected item.
| Name | Description |
| -- | -- |
| `item` | [^slot-item] |
| ``item`` | [^slot-item] |
^^^slot-item
The label content of each radio. Displays the value of the `label` prop by default.
The label content of each radio. Displays the value of the `label` property by default.
+++Scope properties
| Name | Type | Description |
@@ -75,7 +75,7 @@ Additionally, custom properties apart from the listed ones will also be passes i
| Name | Description |
| -- | -- |
| `change` | [^event-change] |
| ``change`` | [^event-change] |
^^^event-change
:::badges

22
one/docs/en-US/components/radio.md
View File

@@ -4,13 +4,13 @@
### Sizes
Available size variant for the `ui` prop: `s`/`m`.
Available size variant for the [`ui`](#props-ui) prop: `s` / `m`.
[[ demo src="/demo/radio/size.vue" ]]
### Setting value
Use the `value` prop to specify the value bound to the `model` prop (used for `v-model`).
Use the [`value`](#props-value) prop to specify the value bound to `v-model`.
[[ demo src="/demo/radio/model.vue" ]]
@@ -20,11 +20,11 @@ Use the `value` prop to specify the value bound to the `model` prop (used for `v
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `checked` | `boolean` | `false` | [^checked] |
| `value` | `*` | `true` | The value of the radio. |
| `disabled` | `boolean=` | `false` | Whether the radio is disabled. |
| `readonly` | `boolean=` | `false` | Whether the radio is read-only. |
| ``ui`` | `string=` | - | [^ui] |
| ``checked`` | `boolean` | `false` | [^checked] |
| ``value`` | `*` | `true` | The value of the radio. |
| ``disabled`` | `boolean=` | `false` | Whether the radio is disabled. |
| ``readonly`` | `boolean=` | `false` | Whether the radio is read-only. |
^^^ui
Style variants.
@@ -49,21 +49,21 @@ Whether the checkbox is checked.
| Name | Description |
| -- | -- |
| `default` | The label text of the radio. The radio is selected when the label is clicked. Displays nothing by default. |
| ``default`` | The label text of the radio. The radio is selected when the label is clicked. Displays nothing by default. |
### Events
| Name | Description |
| -- | -- |
| `change` | Triggered when user checks the radio. The callback parameter list is `(checked: boolean)`. `checked` denotes whether the radio is checked. |
| `input` | [^event-input] |
| ``change`` | Triggered when user checks the radio. The callback parameter list is `(checked: boolean)`. `checked` denotes whether the radio is checked. |
| ``input`` | [^event-input] |
^^^event-input
:::badges
`v-model`
:::
Triggered when the check state is changed. The callback parameter list is `(val: *)`, with `val` being the current value of `v-model`. Unlike the `change` event, `input` is triggered even without user interaction.
Triggered when the check state is changed. The callback parameter list is `(val: *)`, with `val` being the current value of `v-model`. Unlike the [`change`](#events-change) event, `input` is triggered even without user interaction.
^^^
Additionally, `Radio` exposes the following native events:

16
one/docs/en-US/components/region-picker.md
View File

@@ -10,11 +10,11 @@
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `datasource` | `Array<Object>` | `[]` | [^datasource] |
| `selected` | `Array<string>` | - | [^selected] |
| `include-indeterminate` | `boolean` | `false` | Whether to include indeterminate node into selected nodes. Non-leaf nodes inside `datasource` will be in indeterminate state if their descendant nodes are partially selected. |
| `disabled` | `boolean=` | `false` | Whether the region picker is disabled. |
| `readonly` | `boolean=` | `false` | Whether the region picker is read-only. |
| ``datasource`` | `Array<Object>` | `[]` | [^datasource] |
| ``selected`` | `Array<string>` | - | [^selected] |
| ``include-indeterminate`` | `boolean` | `false` | Whether to include indeterminate node into selected nodes. Non-leaf nodes inside `datasource` will be in indeterminate state if their descendant nodes are partially selected. |
| ``disabled`` | `boolean=` | `false` | Whether the region picker is disabled. |
| ``readonly`` | `boolean=` | `false` | Whether the region picker is read-only. |
^^^datasource
The datasource of the region picker. The type of node item is `{label, value, disabled, children, ...}`.
@@ -41,7 +41,7 @@ The array of selected `value`s.
| Name | Description |
| -- | -- |
| `label` | [^slot-label] |
| ``label`` | [^slot-label] |
^^^slot-label
The label content of each node. Displays the `label` property of each item by default.
@@ -68,12 +68,12 @@ When `level` is `2` and `overlay` is `true`, the information of selected node co
| Name | Description |
| -- | -- |
| `select` | [^event-select] |
| ``select`` | [^event-select] |
^^^event-select
:::badges
`v-model`
:::
Triggered when the selection changed. The callback parameter list is `(value: Array)`. The type of `value` is the same as the `selected` prop.
Triggered when the selection changed. The callback parameter list is `(value: Array)`. The type of `value` is the same as the [`selected`](#props-selected) prop.
^^^

44
one/docs/en-US/components/schedule.md
View File

@@ -10,14 +10,14 @@
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `selected` | `Object` | - | [^selected] |
| `hour-class` | `string|Array|Object|function` | `{}` | The customized HTML `class` for the hour cell. When not being a function, supports all values defined by [Vue's `class` expressions](https://vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes). If it's a function, the signature is `function(day: number, hour: number): string|Array<string>|Object<string, boolean>`. The return value is also a Vue `class` expression. |
| `disabled-date` | `function(number, number): boolean` | `() => false` | Whether the hour cell is disabled. Parameter list is `(day: number, hour: number)`. `day` and `hour` denote the day of week and the hour respectively. Return value specifies whether the hour cell is disabled from selection. |
| `shortcuts` | `Array` | `schedule.shortcuts` | [^shortcuts] |
| `shortcuts-display` | `string` | `'inline'` | The display mode of the shortcuts. Supported values are `inline`/`popup`, which denote inline button groups and dropdown select, respectively. |
| `statuses` | `Array<{label: string, value: string}>` | `schedule.statuses` | The datasource of the legends. Legend items will have a `class` value of <code>&#0096;veui-schedule-legend-${value}&#0096;</code> and the `label` property will be the text label of each status. |
| `disabled` | `boolean=` | `false` | Whether the schedule component is disabled. |
| `readonly` | `boolean=` | `false` | Whether the schedule component is read-only. |
| ``selected`` | `Object` | - | [^selected] |
| ``hour-class`` | `string | Array | Object | function` | `{}` | The customized HTML `class` for the hour cell. When not being a function, supports all values defined by [Vue's `class` expressions](https://vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes). If it's a function, the signature is `function(day: number, hour: number): string | Array<string>|Object<string, boolean>`. The return value is also a Vue `class` expression. |
| ``disabled-date`` | `function(number, number): boolean` | `() => false` | Whether the hour cell is disabled. Parameter list is `(day: number, hour: number)`. `day` and `hour` denote the day of week and the hour respectively. Return value specifies whether the hour cell is disabled from selection. |
| ``shortcuts`` | `Array` | `schedule.shortcuts` | [^shortcuts] |
| ``shortcuts-display`` | `string` | `'inline'` | The display mode of the shortcuts. Supported values are `inline` / `popup`, which denote inline button groups and dropdown select, respectively. |
| ``statuses`` | `Array<{label: string, value: string}>` | `schedule.statuses` | The datasource of the legends. Legend items will have a `class` value of <code>&#0096;veui-schedule-legend-${value}&#0096;</code> and the `label` property will be the text label of each status. |
| ``disabled`` | `boolean=` | `false` | Whether the schedule component is disabled. |
| ``readonly`` | `boolean=` | `false` | Whether the schedule component is read-only. |
^^^selected
:::badges
@@ -46,23 +46,23 @@ This sample stands for 9:00–18:00 of Monday and 0:00–3:00 & 18:00–21:00 of
^^^
^^^shortcuts
Shortcut selection list. The type is `{label: string, selected: boolean|Array}`.
Shortcut selection list. The type is `{label: string, selected: boolean | Array}`.
`label` denotes the text label of each item. `selected` denotes the predefined time ranges. When being an array, it shares the same data type with the `selected` prop. When being `true`, it's same as `[[0, 23]]`.
`label` denotes the text label of each item. `selected` denotes the predefined time ranges. When being an array, it shares the same data type with the [`selected`](#props-selected) prop. When being `true`, it's same as `[[0, 23]]`.
^^^
### Slots
| Name | Description |
| -- | -- |
| `header` | The entire header section. |
| `header-content` | The content of the header section, not including the container. |
| `shortcuts` | The shortcuts section of the header section. |
| `legend` | The legends section of the header section. |
| `legend-label` | [^slot-legend-label] |
| `hour` | [^slot-hour] |
| `label` | [^slot-label] |
| `tooltip` | [^slot-tooltip] |
| ``header`` | The entire header section. |
| ``header-content`` | The content of the header section, not including the container. |
| ``shortcuts`` | The shortcuts section of the header section. |
| ``legend`` | The legends section of the header section. |
| ``legend-label`` | [^slot-legend-label] |
| ``hour`` | [^slot-hour] |
| ``label`` | [^slot-label] |
| ``tooltip`` | [^slot-tooltip] |
^^^slot-legend-label
The text label of each legend. Displays the `label` property of each legend by default.
@@ -114,21 +114,21 @@ The tooltip for each hour cell. Displays <code>&#0096;${hour}:00–${hour + 1}:0
| Name | Description |
| -- | -- |
| `select` | [^event-select] |
| ``select`` | [^event-select] |
^^^event-select
:::badges
`v-model`
:::
Triggered when selection changed. The callback parameter list is `(value: Object)`. `value` shares the same type with the `selected` prop.
Triggered when selection changed. The callback parameter list is `(value: Object)`. `value` shares the same type with the [`selected`](#props-selected) prop.
^^^
### Global config
### Configs
| Key | Type | Default | Description |
| -- | -- | -- | -- |
| `schedule.statuses` | Array<{name, label}> | See description. | [^config-statuses] |
| ``schedule.statuses`` | Array<{name, label}> | See description. | [^config-statuses] |
^^^config-statuses
The default status list with item type being `{name: string, label: string}`. The default value is:

54
one/docs/en-US/components/search-box.md
View File

@@ -4,13 +4,13 @@
### Stylistic variants
Available stylistic values for the `ui` prop: `strong`.
Available stylistic values for the [`ui`](#props-ui) prop: `strong`.
[[ demo src="/demo/search-box/style.vue" ]]
### Size variants
Available size values for the `ui` prop: `xs`/`s`/`m`/`l`.
Available size values for the [`ui`](#props-ui) prop: `xs` / `s` / `m` / `l`.
[[ demo src="/demo/search-box/size.vue" ]]
@@ -28,19 +28,19 @@ Available size values for the `ui` prop: `xs`/`s`/`m`/`l`.
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `placeholder` | `string` | - | The placeholder text of the search box. |
| `value` | `string` | - | [^value] |
| `autofocus` | `boolean` | `false` | Whether the search box gains focus automatically. |
| `clearable` | `boolean` | `false` | Whether the clear button is displayed. |
| `select-on-focus` | `boolean` | `false` | Whether to select all content upon focus. |
| `composition` | `boolean` | `false` | Whether the search box triggers value change upon composition of IME. |
| `suggestions` | `Array<string>|Array<Object>` | - | [^suggestions] |
| `replace-on-select` | `boolean` | `true` | Whether to replace the content with suggestion item value when it's selected. |
| `suggest-trigger` | `Array<string>|string` | `input` | [^suggest-trigger] |
| `expanded` | `boolean=` | `false` | [^expanded] |
| `disabled` | `boolean=` | `false` | Whether the search box is disabled. |
| `readonly` | `boolean=` | `false` | Whether the search box is read-only. |
| ``ui`` | `string=` | - | [^ui] |
| ``placeholder`` | `string` | - | The placeholder text of the search box. |
| ``value`` | `string` | - | [^value] |
| ``autofocus`` | `boolean` | `false` | Whether the search box gains focus automatically. |
| ``clearable`` | `boolean` | `false` | Whether the clear button is displayed. |
| ``select-on-focus`` | `boolean` | `false` | Whether to select all content upon focus. |
| ``composition`` | `boolean` | `false` | Whether the search box triggers value change upon composition of IME. |
| ``suggestions`` | `Array<string>|Array<Object>` | - | [^suggestions] |
| ``replace-on-select`` | `boolean` | `true` | Whether to replace the content with suggestion item value when it's selected. |
| ``suggest-trigger`` | `Array<string>|string` | `input` | [^suggest-trigger] |
| ``expanded`` | `boolean=` | `false` | [^expanded] |
| ``disabled`` | `boolean=` | `false` | Whether the search box is disabled. |
| ``readonly`` | `boolean=` | `false` | Whether the search box is read-only. |
^^^ui
Style variants.
@@ -83,7 +83,7 @@ Specifies when the suggestion list is displayed. Can be either an event name or
| Value | Description |
| -- | -- |
| `focus` | When the search box is focused. |
| `input` | When the input triggers `input` event. |
| `input` | When the input triggers [`input`](#events-input) event. |
| `submit` | When the submit button is activated. |
+++
^^^
@@ -100,10 +100,10 @@ Whether the suggestion list is expanded (if there are no items in `suggestions`,
| Name | Description |
| -- | -- |
| `suggestions` | [^slot-suggestions] |
| `suggestions-before` | The content before the suggestion list. |
| `suggestions-after` | The content after the suggestion list. |
| `suggestion` | [^slot-suggestion] |
| ``suggestions`` | [^slot-suggestions] |
| ``suggestions-before`` | The content before the suggestion list. |
| ``suggestions-after`` | The content after the suggestion list. |
| ``suggestion`` | [^slot-suggestion] |
^^^slot-suggestions
The content of the entire suggestion list.
@@ -111,7 +111,7 @@ The content of the entire suggestion list.
+++Scope properties
| Name | Type | Description |
| -- | -- | -- |
| `suggestions` | `Array<{value: string, label: string}>` | The normalized suggestions from the `suggestions` prop. |
| `suggestions` | `Array<{value: string, label: string}>` | The normalized suggestions from the [`suggestions`](#props-suggestions) prop. |
| `select` | `function(suggestion: {value: string, label: string}): void` | Select the specified suggestion. |
^^^slot-suggestion
@@ -133,11 +133,11 @@ When `suggestions` is an `Array<string>`, the `label` and `value` of the suggest
| Name | Description |
| -- | -- |
| `input` | [^event-input] |
| `suggest` | [^event-suggest] |
| `select` | [^event-select] |
| `search` | [^event-search] |
| `toggle` | Triggered when the expanded state is going to change. The callback parameter list is `(expanded: boolean)`. `expanded` denotes whether the suggestion list is to be expanded or collapsed. |
| ``input`` | [^event-input] |
| ``suggest`` | [^event-suggest] |
| ``select`` | [^event-select] |
| ``search`` | [^event-search] |
| ``toggle`` | Triggered when the expanded state is going to change. The callback parameter list is `(expanded: boolean)`. `expanded` denotes whether the suggestion list is to be expanded or collapsed. |
^^^event-input
Triggers when the input value changes. The callback parameter list is `(value: string)`.
@@ -184,4 +184,4 @@ Triggered when the input value is submitted. The callback parameter list is `(va
| Name | Description |
| -- | -- |
| `search` | Search. |
| ``search`` | Search. |

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

@@ -8,7 +8,7 @@
### Size variants
Available size variants for the `ui` prop: `xs`/`s`/`m`/`l`.
Available size variants for the [`ui`](#props-ui) prop: `xs` / `s` / `m` / `l`.
[[ demo src="/demo/select/size.vue" ]]
@@ -20,13 +20,13 @@ Can be used with embedded `OptionGroup`s & `Option`s.
### Searchable options
Use the `searchable` prop to make options searchable.
Use the [`searchable`](#props-searchable) prop to make options searchable.
[[ demo src="/demo/select/searchable.vue" ]]
### Multiple selections
Use the `multiple` prop to enable multiple selections.
Use the [`multiple`](#props-multiple) prop to enable multiple selections.
[[ demo src="/demo/select/multiple.vue" ]]
@@ -36,20 +36,20 @@ Use the `multiple` prop to enable multiple selections.
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `options` | `Array<Object>` | `-` | [^options] |
| `value` | `Array<*>|*` | - | [^value] |
| `multiple` | `boolean` | `false` | Whether users can select multiple items. |
| `max` | `number` | - | The max items users can select. |
| `placeholder` | `string` | `select.placeholder` | Placeholder text when no option is selected. |
| `clearable` | `boolean` | `false` | Whether the select is clearable. |
| `searchable` | `boolean` | `false` | Whether the options are searchable. |
| `filter` | `function` | - | Filter function for the options. The type is `function(option: Object): boolean`. The type of `option` is the same as the `options` prop. The return value denotes whether the option is shown inside the options dropdown. |
| `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`](./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`` | `string=` | - | [^ui] |
| ``options`` | `Array<Object>` | `-` | [^options] |
| ``value`` | `Array<*>|*` | - | [^value] |
| ``multiple`` | `boolean` | `false` | Whether users can select multiple items. |
| ``max`` | `number` | - | The max items users can select. |
| ``placeholder`` | `string` | `select.placeholder` | Placeholder text when no option is selected. |
| ``clearable`` | `boolean` | `false` | Whether the select is clearable. |
| ``searchable`` | `boolean` | `false` | Whether the options are searchable. |
| ``filter`` | `function` | - | Filter function for the options. The type is `function(option: Object): boolean`. The type of `option` is the same as the [`options`](#props-options) prop. The return value denotes whether the option is shown inside the options dropdown. |
| ``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`](./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. |
^^^ui
Style variants.
@@ -71,7 +71,7 @@ The list of options with the option type being `{label, value, options, disabled
| -- | -- | -- |
| `label` | `string` | The descriptive label of the option. |
| `value` | `*` | The value of the option. |
| `options` | `Array<Object>=` | The child options of current option. The item type is the same as the items of the `options` prop. |
| `options` | `Array<Object>=` | The child options of current option. The item type is the same as the items of the [`options`](#props-options) prop. |
| `disabled` | `boolean=` | Whether the option is disabled. |
+++
^^^
@@ -96,14 +96,14 @@ Whether the dropdown menu is expanded.
| Name | Description |
| -- | -- |
| `default` | The content of the options dropdown layer. Can be used to place `Option`s or `OptionGroups`s when the `options` prop is not specified. |
| `before` | [^slot-before] |
| `after` | The content after the options in the dropdown layer. No default content. |
| `label` | [^slot-label] |
| `group-label` | [^slot-group-label] |
| `option-label` | [^slot-option-label] |
| `option` | [^slot-option] |
| `trigger` | [^slot-trigger] |
| ``default`` | The content of the options dropdown layer. Can be used to place `Option`s or `OptionGroups`s when the [`options`](#props-options) prop is not specified. |
| ``before`` | [^slot-before] |
| ``after`` | The content after the options in the dropdown layer. No default content. |
| ``label`` | [^slot-label] |
| ``group-label`` | [^slot-group-label] |
| ``option-label`` | [^slot-option-label] |
| ``option`` | [^slot-option] |
| ``trigger`` | [^slot-trigger] |
^^^slot-before
The content before the options in the dropdown layer. No default content.
@@ -182,7 +182,7 @@ The entire drop-down trigger area. Displays the select input by default.
+++Scope properties
| Name | Type | Description |
| --- | --- | --- |
| `attrs` | `Object` | Attributes that need to be output to the trigger element, including `aria-*`/`disabled`, etc., can be output using `v-bind="attrs"`. |
| `attrs` | `Object` | Attributes that need to be output to the trigger element, including `aria-*` / `disabled`, etc., can be output using `v-bind="attrs"`. |
| `value` | `*` | The value of the selected option. |
| `select` | `function(value: *): void` | To select a specified value. |
| `handlers` | `Object` | [^handlers-desc] |
@@ -203,8 +203,8 @@ The element used to bind `handlers` needs to support focus acquisition so that v
| Name | Description |
| -- | -- |
| `change` | [^event-change] |
| `toggle` | Triggered when the expanded state is going to change. The callback parameter list is `(expanded: boolean)`. `expanded` denotes whether the dropdown menu is to be expanded or collapsed. |
| ``change`` | [^event-change] |
| ``toggle`` | Triggered when the expanded state is going to change. The callback parameter list is `(expanded: boolean)`. `expanded` denotes whether the dropdown menu is to be expanded or collapsed. |
^^^event-change
:::badges
@@ -214,11 +214,11 @@ The element used to bind `handlers` needs to support focus acquisition so that v
Triggers when the selected option changed. The callback parameter list is `(value: *)` and `value` is the value of the selected option.
^^^
### Global config
### Configs
| Key | Type | Default | Description |
| -- | -- | -- | -- |
| `select.placeholder` | `string` | `@@select.placeholder` | The placeholder text when no option is selected. |
| ``select.placeholder`` | `string` | `@@select.placeholder` | The placeholder text when no option is selected. |
:::tip
`@@` prefixed values denote corresponding properties in the locale settings.
@@ -228,5 +228,5 @@ Triggers when the selected option changed. The callback parameter list is `(valu
| Name | Description |
| -- | -- |
| `expand` | Expand the dropdown layer. |
| `collapse` | Collapse the dropdown layer. |
| ``expand`` | Expand the dropdown layer. |
| ``collapse`` | Collapse the dropdown layer. |

40
one/docs/en-US/components/slider.md
View File

@@ -4,13 +4,13 @@
### 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/slider/size.vue" ]]
### Read-only/disabled
Use the `readonly` prop to set a slider read-only. Use the `disabled` prop to set a slider disabled.
Use the [`readonly`](#props-readonly) prop to set a slider read-only. Use the [`disabled`](#props-disabled) prop to set a slider disabled.
[[ demo src="/demo/slider/editable.vue" ]]
@@ -22,19 +22,19 @@ Use the `step` to make value change by specified step value when clicking spinne
### Range
Use the `max`/`min` props to specify the values at both ends of the slider.
Use the [`max`](#props-max) / [`min`](#props-min) props to specify the values at both ends of the slider.
[[ demo src="/demo/slider/range.vue" ]]
### Secondary bar
Use the `secondary-progress` prop to specify a secondary progress bar.
Use the [`secondary-progress`](#props-secondary-progress) prop to specify a secondary progress bar.
[[ demo src="/demo/slider/buffer.vue" ]]
### Customization
Use the `thumb`/`tip` slots to customize the content of slider thumb and tooltip.
Use the [`thumb`](#slots-thumb) / [`tip`](#slots-tip) slots to customize the content of slider thumb and tooltip.
[[ demo src="/demo/slider/variant.vue" ]]
@@ -44,15 +44,15 @@ Use the `thumb`/`tip` slots to customize the content of slider thumb and tooltip
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `value` | `*|Array<*>` | - | [^value] |
| `secondary-progress` | `number|Array<number>` | `0` | Secondary progress value. |
| `min` | `number` | `0` | The minimun value after `value` is processed by the `parse` function. |
| `max` | `number` | `1` | The maximum value after `value` is processed by the `parse` function. |
| `step` | `number` | `0` | The step value after `value` is processed by the `parse` function. |
| `mark` | `boolean` | `false` | Whether to display step marks. |
| `parse` | `function` | `val => val` | The parse function to transform input value. |
| `format` | `function` | `val => val` | The format function to transform output value. |
| ``ui`` | `string=` | - | [^ui] |
| ``value`` | `*|Array<*>` | - | [^value] |
| ``secondary-progress`` | `number | Array<number>` | `0` | Secondary progress value. |
| ``min`` | `number` | `0` | The minimun value after `value` is processed by the `parse` function. |
| ``max`` | `number` | `1` | The maximum value after `value` is processed by the `parse` function. |
| ``step`` | `number` | `0` | The step value after `value` is processed by the `parse` function. |
| ``mark`` | `boolean` | `false` | Whether to display step marks. |
| ``parse`` | `function` | `val => val` | The parse function to transform input value. |
| ``format`` | `function` | `val => val` | The format function to transform output value. |
^^^ui
Style variants.
@@ -73,7 +73,7 @@ By default the type is `number` and the value should between `min` and `max` aft
When being the type of `Array<number>`, multiple thumbs will be rendered corresponding to each value.
:::tip
When `parse` and `format` are specified, values can be of any type, and `parse` should transform the value to `number` and `format` should transform the value to the same type as the `value` prop. `parse` and `format` only need to take care of single values instead of arrays and the component itself will apply transformation on multiple values if necessary.
When `parse` and `format` are specified, values can be of any type, and `parse` should transform the value to `number` and `format` should transform the value to the same type as the [`value`](#props-value) prop. `parse` and `format` only need to take care of single values instead of arrays and the component itself will apply transformation on multiple values if necessary.
:::
^^^
@@ -81,10 +81,10 @@ When `parse` and `format` are specified, values can be of any type, and `parse`
| Name | Description |
| -- | -- |
| `track` | The track of the slider. Displays a bar by default. |
| `tip-label` | The tooltip content. Displays the current `value` or its item by default. |
| `thumb` | [^slot-thumb] |
| `tip` | [^slot-tip] |
| ``track`` | The track of the slider. Displays a bar by default. |
| ``tip-label`` | The tooltip content. Displays the current `value` or its item by default. |
| ``thumb`` | [^slot-thumb] |
| ``tip`` | [^slot-tip] |
^^^slot-thumb
The thumb(s) of the slider. Displays a round button by default.
@@ -115,7 +115,7 @@ The entire tooltip for each thumb. Displays a `Tooltip` component with `value` a
| Name | Description |
| -- | -- |
| `input` | [^event-input] |
| ``input`` | [^event-input] |
^^^event-input
:::badges

32
one/docs/en-US/components/steps.md
View File

@@ -4,7 +4,7 @@
### Size and direction variants
Available style variants for the `ui` prop: `s`/`m`/`vertical`/`label-vertical`.
Available style variants for the [`ui`](#props-ui) prop: `s` / `m` / `vertical` / `label-vertical`.
[[ demo src="/demo/steps/default.vue" ]]
@@ -20,9 +20,9 @@ Set `status` property of the `step` to `error`, if the step fails.
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `steps` | `Array` | - | [^steps] |
| `current` | `number` | - | The index of current step. |
| ``ui`` | `string=` | - | [^ui] |
| ``steps`` | `Array` | - | [^steps] |
| ``current`` | `number` | - | The index of current step. |
^^^ui
Style variants.
@@ -45,7 +45,7 @@ The datasource of steps with item type being `{ label, desc, to, status }`.
| -- | -- | -- |
| `label` | `string` | The label of the step. |
| `desc` | `string` | The description of the step. |
| `to` | `string|Object` | The target link of the step. The type is the same as the `to` prop of [`Link`](./link#props) component. |
| `to` | `string | Object` | The target link of the step. The type is the same as the [`to`](./link#props-to) prop of [`Link`](./link) component. |
| `status` | `string` | The statue of the step. Available variants are default normal and `error`. |
+++
^^^
@@ -54,10 +54,10 @@ The datasource of steps with item type being `{ label, desc, to, status }`.
| Name | Description |
| -- | -- |
| `default` | [^slot-default] |
| `index` | The step index. Displays an index value starts from `1`, a success icon for finished steps by default and an error icon for error steps. Resides inside the default slot and share the same scope properties. |
| `label` | The step label. Displays the `label` prop by default. Resides inside the default slot and share the same scope properties. |
| `desc` | The step description. Displays the `desc` prop by default. Resides inside the default slot and share the same scope properties. |
| ``default`` | [^slot-default] |
| ``index`` | The step index. Displays an index value starts from `1`, a success icon for finished steps by default and an error icon for error steps. Resides inside the [`default`](#slots-default) slot and share the same scope properties. |
| ``label`` | The step label. Displays the `label` property by default. Resides inside the [`default`](#slots-default) slot and share the same scope properties. |
| ``desc`` | The step description. Displays the `desc` property by default. Resides inside the [`default`](#slots-default) slot and share the same scope properties. |
^^^slot-default
The content of each step. Displays the step index/completed icon, label and description by default.
@@ -65,10 +65,10 @@ The content of each step. Displays the step index/completed icon, label and desc
+++Scope properties
| Name | Type | Description |
| -- | -- | -- |
| `label` | `string` | The label of the step. Same as the `label` property from items of `steps`. |
| `desc` | `string` | The description of the step. Same as the `desc` property from items of `steps`. |
| `to` | `string|Object` | The target link of the step. Same as the `to` property from items of `steps`. |
| `status` | `string` | The status of the step. Same as the `status` property from items of `steps`. |
| `label` | `string` | The label of the step. Same as the `label` property from items of the [`steps`](#props-steps) prop. |
| `desc` | `string` | The description of the step. Same as the `desc` property from items of the [`steps`](#props-steps) prop. |
| `to` | `string | Object` | The target link of the step. Same as the `to` property from items of the [`steps`](#props-steps) prop. |
| `status` | `string` | The status of the step. Same as the `status` property from items of the [`steps`](#props-steps) prop. |
| `index` | `number` | The index of the step. (Starts from `0`.) |
Additionally, custom properties in current step, apart from the listed ones, will also be passes into the scope object via `v-bind`.
@@ -79,11 +79,11 @@ Additionally, custom properties in current step, apart from the listed ones, wil
| Name | Description |
| -- | -- |
| `click` | Triggered when any step is clicked. The callback parameter type is `(index: number, event: Event)`, where `index` is the index of the clicked step and `event` is the corresponding native event object. |
| ``click`` | Triggered when any step is clicked. The callback parameter type is `(index: number, event: Event)`, where `index` is the index of the clicked step and `event` is the corresponding native event object. |
### Icons
| Name | Description |
| -- | -- |
| `success` | Steps finished successfully. |
| `error` | Steps with error. |
| ``success`` | Steps finished successfully. |
| ``error`` | Steps with error. |

24
one/docs/en-US/components/switch.md
View File

@@ -4,13 +4,13 @@
### Size variants
Available size variants for the `ui` prop: `xs`/`s`/`m`.
Available size variants for the [`ui`](#props-ui) prop: `xs` / `s` / `m`.
[[ demo src="/demo/switch/size.vue" ]]
### True/false values
Use the `true-value` and `false-value` props to customize the `model` value (used in its `v-model`) of the checkbox in checked/unchecked state.
Use the [`true-value`](#props-true-value) and [`false-value`](#props-false-value) props to customize the `v-model` value of the checkbox in checked/unchecked state.
[[ demo src="/demo/switch/value.vue" ]]
@@ -20,12 +20,12 @@ Use the `true-value` and `false-value` props to customize the `model` value (use
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `checked` | `boolean` | `false` | [^checked] |
| `true-value` | `*` | `true` | The value for checked state. |
| `false-value` | `*` | `false` | The value for unchecked state. |
| `disabled` | `boolean=` | `false` | Whether the switch is disabled. |
| `readonly` | `boolean=` | `false` | Whether the switch is read-only. |
| ``ui`` | `string=` | - | [^ui] |
| ``checked`` | `boolean` | `false` | [^checked] |
| ``true-value`` | `*` | `true` | The value for checked state. |
| ``false-value`` | `*` | `false` | The value for unchecked state. |
| ``disabled`` | `boolean=` | `false` | Whether the switch is disabled. |
| ``readonly`` | `boolean=` | `false` | Whether the switch is read-only. |
^^^ui
Style variants.
@@ -51,21 +51,21 @@ Whether the checkbox is on.
| Name | Description |
| -- | -- |
| `default` | The label text of the switch. The switch is toggled when the label is clicked. Displays nothing by default. |
| ``default`` | The label text of the switch. The switch is toggled when the label is clicked. Displays nothing by default. |
### Events
| Name | Description |
| -- | -- |
| `change` | Triggered when user toggles the state of the switch. The callback parameter list is `(checked: boolean)`. `checked` denotes whether the switch is on. |
| `input` | [^event-input] |
| ``change`` | Triggered when user toggles the state of the switch. The callback parameter list is `(checked: boolean)`. `checked` denotes whether the switch is on. |
| ``input`` | [^event-input] |
^^^event-input
:::badges
`v-model`
:::
Triggered when the check state is changed. The callback parameter list is `(val: *)`, with `val` being the current value of `v-model`. Unlike the `change` event, `input` is triggered even without user interaction.
Triggered when the check state is changed. The callback parameter list is `(val: *)`, with `val` being the current value of `v-model`. Unlike the [`change`](#events-change) event, `input` is triggered even without user interaction.
^^^
Additionally, `Switch` exposes the following native events:

64
one/docs/en-US/components/table.md
View File

@@ -8,7 +8,7 @@
### Content density
Available density variants for the `ui` prop: `compact`/`loose`.
Available density variants for the [`ui`](#props-ui) prop: `compact` / `loose`.
[[ demo src="/demo/table/basic.vue" ]]
@@ -20,7 +20,7 @@ Supports specifying row keys, mode of selection, and sorting by values of specif
### Filter
Use the `filter` slot to enable custom column filter dropdown.
Use the [`filter`](.column#slots-filter) slot of the `Column` component to enable custom column filter dropdown.
[[ demo src="/demo/table/filter.vue" ]]
@@ -32,7 +32,7 @@ Allow table content to be scrollable inside the table body, i.e. the effect of f
### Fixed columns
Use the `scroll` of `Table` and the `fixed` prop of `Column` to enable fixed columns.
Use the `scroll` of `Table` and the [`fixed`](./column#props-fixed) prop of `Column` to enable fixed columns.
[[ demo src="/demo/table/fixed.vue" ]]
@@ -42,24 +42,30 @@ Rows can be expanded into sub-rows.
[[ demo src="/demo/table/expandable.vue" ]]
### Header descriptions
Use the [`desc`](./column#props-desc) prop or the [`desc`](./column#slots-desc) slot to provide description for the column header.
[[ demo src="/demo/table/desc.vue" ]]
## API
### Props
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `data` | `Array<Object>` | - | Table data in rows. |
| `key-field` | `string` | - | Denotes the unique key of the table data. The value should be a key defined in the data object of each row. The corresponding field will be regarded as the [`key` attribute](https://vuejs.org/v2/guide/list.html#key) for each row element. When `selectable` is `true`, it also indicates the rows of which column should be selected from (and in this occasion the value should be defined as the `field` prop for one of the children `Column` components). |
| `selectable` | `boolean` | `false` | Whether the rows are selectable. |
| `select-mode` | `string` | `'multiple'` | The mode of row selection. Available values are `single`/`multiple`, which denote single selection and multiple selection respectively. |
| `selected` | `Array<*>|*` | `[]` | [^selected] |
| `expandable` | `boolean` | `false` | Whether the rows can be expanded into sub-rows. |
| `expanded` | `Array<*>` | `[]` | [^expanded] |
| `order` | `string|boolean` | `false` | The order for sorting the specified column. `false` denotes no specific order, while string values of `'asc'`/`'desc'` denote ascending/descending order respectively. |
| `order-by` | `string` | - | The column which is currently sorted by. The value should be defined as the `field` prop for one of the children `Column` components. |
| `scroll` | `number` | - | The maximun height of the scrollable area inside the table body. When table content exceeds the specified height, internal scroll will be enabled and the head/foot will become fixed. |
| `loading` | `boolean` | `false` | Whether table data is being loaded. |
| ``ui`` | `string=` | - | [^ui] |
| ``data`` | `Array<Object>` | - | Table data in rows. |
| ``key-field`` | `string` | - | Denotes the unique key of the table data. The value should be a key defined in the data object of each row. The corresponding field will be regarded as the [`key` attribute](https://vuejs.org/v2/guide/list.html#key) for each row element. When `selectable` is `true`, it also indicates the rows of which column should be selected from (and in this occasion the value should be defined as the [`field`](./column#props-field) prop for one of the children `Column` components). |
| ``selectable`` | `boolean` | `false` | Whether the rows are selectable. |
| ``select-mode`` | `string` | `'multiple'` | The mode of row selection. Available values are `single` / `multiple`, which denote single selection and multiple selection respectively. |
| ``selected`` | `Array<*>|*` | `[]` | [^selected] |
| ``expandable`` | `boolean` | `false` | Whether the rows can be expanded into sub-rows. |
| ``expanded`` | `Array<*>` | `[]` | [^expanded] |
| ``order`` | `string | boolean` | `false` | The order for sorting the specified column. `false` denotes no specific order, while string values of `'asc'` / `'desc'` denote ascending/descending order respectively. |
| ``order-by`` | `string` | - | The column which is currently sorted by. The value should be defined as the [`field`](./column#props-field) prop for one of the children `Column` components. |
| ``scroll`` | `number` | - | The maximun height of the scrollable area inside the table body. When table content exceeds the specified height, internal scroll will be enabled and the head/foot will become fixed. |
| ``loading`` | `boolean` | `false` | Whether table data is being loaded. |
^^^ui
Style variants.
@@ -79,7 +85,7 @@ Style variants.
`.sync`
:::
The value(s) of selected rows. When `select-mode` is `'multiple'`, the value is an array of values keyed by the `key-field` prop from the row data . When `select-mode` is `'single'`, the value is such key value of the selected row.
The value(s) of selected rows. When [`select-mode`](#props-select-mode) is `'multiple'`, the value is an array of values keyed by the [`key-field` p](#props-key-field)rop from the row data . When [`select-mode`](#props-select-mode) is `'single'`, the value is such key value of the selected row.
^^^
^^^expanded
@@ -87,30 +93,30 @@ The value(s) of selected rows. When `select-mode` is `'multiple'`, the value is
`.sync`
:::
The values of expanded rows. Each item is the value keyed by the `key-field` prop from the row data.
The values of expanded rows. Each item is the value keyed by the [`key-field`](#props-key-field) prop from the row data.
^^^
### Slots
| Name | Description |
| -- | -- |
| `default` | The columns of the table. Can only have `Column` components as children. |
| `no-data` | The content to be displayed when there's no data to show. |
| `foot` | The content of the table foot. Will span across all columns when defined. |
| `sub-row` | [^slot-sub-row] |
| ``default`` | The columns of the table. Can only have `Column` components as children. |
| ``no-data`` | The content to be displayed when there's no data to show. |
| ``foot`` | The content of the table foot. Will span across all columns when defined. |
| ``sub-row`` | [^slot-sub-row] |
^^^slot-sub-row
The content of the expanded sub-row. Will span across all columns and override the `sub-row` slot of the `Column` components inside the table.
The content of the expanded sub-row. Will span across all columns and override the [`sub-row`](./column#slots-sub-row) slot of the `Column` components inside the table.
The slot scope properties are the same as each item inside `datasource`, with an extra `index: number`, which denotes the index within the datasource.
The slot scope properties are the same as each item inside [`data`](#props-data), with an extra `index: number`, which denotes the index within the datasource.
^^^
### Events
| Name | Description |
| -- | -- |
| `select` | [^event-select] |
| `sort` | [^event-sort] |
| ``select`` | [^event-select] |
| ``sort`` | [^event-sort] |
^^^event-select
Triggered when the selected item(s) are changed. The callback parameter list is `(selected, item, selectedItems)`.
@@ -119,8 +125,8 @@ Triggered when the selected item(s) are changed. The callback parameter list is
| Name | Type | Description |
| -- | -- | -- |
| `selected` | `boolean` | Whether the item is selected after change. |
| `item` | `Object` | The item in the `data` prop that is being selected/unselected. When it involves row span for the `key-field` mapped column, the data of the first related row is returned. |
| `selectedItems` | `Object<string, Object|Array>` | All selected items as an object. The key is `key-field` mapped value for the selected row and the value is the row data. When it involves row span for the `key-field` mapped column, returns an array of row data of all related rows. |
| `item` | `Object` | The item in the [`data`](#props-data) prop that is being selected/unselected. When it involves row span for the `key-field` mapped column, the data of the first related row is returned. |
| `selectedItems` | `Object<string, Object | Array>` | All selected items as an object. The key is [`key-field`](#props-key-field) mapped value for the selected row and the value is the row data. When it involves row span for the `key-field` mapped column, returns an array of row data of all related rows. |
+++
^^^
@@ -130,7 +136,7 @@ Triggered when users sort a specific column. The callback parameter list is `(fi
+++Parameters
| Name | Type | Description |
| -- | -- | -- |
| `field` | `string` | Which column to be sort by. The value should be defined as the `field` prop for one of the children `Column` components. |
| `order` | `string|boolean` | Same as the [`order` prop](#props). |
| `field` | `string` | Which column to be sort by. The value should be defined as the [`field`](./column#props-field) prop for one of the children `Column` components. |
| `order` | `string | boolean` | Same as the [`order`](#props-order) prop. |
+++
^^^

34
one/docs/en-US/components/textarea.md
View File

@@ -4,19 +4,19 @@
### 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/textarea/size.vue" ]]
### Read-only state
Use the `readonly` prop to set a textarea to read-only state.
Use the [`readonly`](#props-readonly) prop to set a textarea to read-only state.
[[ demo src="/demo/textarea/readonly.vue" ]]
### Disabled state
Use the `disabled` prop to set a textarea to disabled state.
Use the [`disabled`](#props-disabled) prop to set a textarea to disabled state.
[[ demo src="/demo/textarea/disabled.vue" ]]
@@ -26,17 +26,17 @@ Use the `disabled` prop to set a textarea to disabled state.
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `value` | `string` | '' | [^value] |
| `disabled` | `boolean=` | `false` | Whether the textarea is disabled. |
| `readonly` | `boolean=` | `false` | Whether the textarea is read-only. |
| `line-number` | `boolean` | `false` | Whether to show line numbers. |
| `rows` | `number|string` | - | The default visible rows of the textarea. |
| `placeholder` | `string` | - | The placeholder text of the textarea. |
| `composition` | `boolean` | `false` | Whether the input process should be aware of composition. |
| `select-on-focus` | `boolean` | `false` | Whether to select text content when focused. |
| `autoresize` | `boolean` | `false` | Whether the textarea should automatically expand when the content exceeds default height. |
| `get-length` | `function(string): number=` | Used to customize length calculation of the input. |
| ``ui`` | `string=` | - | [^ui] |
| ``value`` | `string` | '' | [^value] |
| ``disabled`` | `boolean=` | `false` | Whether the textarea is disabled. |
| ``readonly`` | `boolean=` | `false` | Whether the textarea is read-only. |
| ``line-number`` | `boolean` | `false` | Whether to show line numbers. |
| ``rows`` | `number | string` | - | The default visible rows of the textarea. |
| ``placeholder`` | `string` | - | The placeholder text of the textarea. |
| ``composition`` | `boolean` | `false` | Whether the input process should be aware of composition. |
| ``select-on-focus`` | `boolean` | `false` | Whether to select text content when focused. |
| ``autoresize`` | `boolean` | `false` | Whether the textarea should automatically expand when the content exceeds default height. |
| ``get-length`` | `function(string): number=` | Used to customize length calculation of the input. |
^^^ui
预设样式。
@@ -61,8 +61,8 @@ Use the `disabled` prop to set a textarea to disabled state.
| 名称 | 描述 |
| -- | -- |
| `change` | [^event-change] |
| `input` | [^event-input] |
| ``change`` | [^event-change] |
| ``input`` | [^event-input] |
^^^event-change
输入框内容变化时触发，即原生 `change` 事件触发时。回调参数为 `(value, event)`。
@@ -80,7 +80,7 @@ Use the `disabled` prop to set a textarea to disabled state.
`v-model`
:::
有效输入时触发，受 `composition` 属性影响。回调参数为 `(value: string)`，`value` 为输入框的 `value` 值。
有效输入时触发，受 [`composition`](#props-composition) 属性影响。回调参数为 `(value: string)`，`value` 为输入框的 `value` 值。
^^^
此外，`Textarea` 支持如下的原生事件：

26
one/docs/en-US/components/toast.md
View File

@@ -4,7 +4,7 @@
### Types
`Toast` component has 4 contextual types, which are `success`, `info`, `warning` and `error`. Types are specified with the `type` prop.
`Toast` component has 4 contextual types, which are `success`, `info`, `warning` and `error`. Types are specified with the [`type`](#props-type) prop.
[[ demo src="/demo/toast/default.vue" ]]
@@ -20,10 +20,10 @@ Use `veui/plugins/toast` to enable [`toast` plugin](../plugins/toast) and invoke
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `open` | `boolean` | `false` | [^open] |
| `type` | `string` | `'success'` | [^type] |
| `message` | `string` | - | The toast message. |
| `duration` | `number` | `toast.duration` | Time (in milliseconds) to wait until the toast is automatically closed. |
| ``open`` | `boolean` | `false` | [^open] |
| ``type`` | `string` | `'success'` | [^type] |
| ``message`` | `string` | - | The toast message. |
| ``duration`` | `number` | `toast.duration` | Time (in milliseconds) to wait until the toast is automatically closed. |
^^^open
:::badges
@@ -50,25 +50,25 @@ The contextual type of the toast.
| Name | Description |
| -- | -- |
| `default` | The content of the toast. Displays the `message` prop by default. |
| ``default`` | The content of the toast. Displays the [`message`](#props-message) prop by default. |
### Events
| Name | Description |
| -- | -- |
| `close` | Triggered when the toast is closed. |
| ``close`` | Triggered when the toast is closed. |
### Global config
### Configs
| Key | Type | Default | Description |
| -- | -- | -- | -- |
| `toast.duration` | `number` | `3000` | The duration of the toast in milliseconds. |
| ``toast.duration`` | `number` | `3000` | The duration of the toast in milliseconds. |
### Icons
| Name | Description |
| -- | -- |
| `info` | Information toast. |
| `success` | Success toast. |
| `warning` | Warning toast. |
| `error` | Error toast. |
| ``info`` | Information toast. |
| ``success`` | Success toast. |
| ``warning`` | Warning toast. |
| ``error`` | Error toast. |

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

@@ -4,19 +4,19 @@
### Style variants
Available style variant for the `ui` prop: `alt`.
Available style variant for the [`ui`](#props-ui) prop: `alt`.
[[ demo src="/demo/tooltip/style.vue" ]]
### Position
Use the `position` prop to specify the placement of the tooltip.
Use the [`position`](#props-position) prop to specify the placement of the tooltip.
[[ demo src="/demo/tooltip/position.vue" ]]
### Triggers
Use the `trigger` prop to specify when to show/hide the tooltip.
Use the [`trigger`](#props-trigger) prop to specify when to show/hide the tooltip.
[[ demo src="/demo/tooltip/trigger.vue" ]]
@@ -26,16 +26,16 @@ Use the `trigger` prop to specify when to show/hide the tooltip.
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `open` | `boolean` | `false` | [^open] |
| `target` | `string|Vue|Node` | - | See the [`target` prop](./overlay#props) of thh [`Overlay`](./overlay) component. |
| `position` | `string` | `'top'` | [^position] |
| `aim-center` | `boolean` | `false` | Whether the tooltip arrow always points to the center of the target element. |
| `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`](./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`` | `string=` | - | [^ui] |
| ``open`` | `boolean` | `false` | [^open] |
| ``target`` | `string | Vue | Node` | - | See the [`target`](./overlay#props-to) prop of thh [`Overlay`](./overlay) component. |
| ``position`` | `string` | `'top'` | [^position] |
| ``aim-center`` | `boolean` | `false` | Whether the tooltip arrow always points to the center of the target element. |
| ``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`](./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. |
^^^ui
Style variants.
@@ -71,10 +71,10 @@ eg. `click` denotes showing the tooltip after clicking the `target` and hiding i
| Name | Description |
| -- | -- |
| `default` | The content of the tooltip. |
| ``default`` | The content of the tooltip. |
### Global config
### Configs
| Key | Type | Default | Description |
| -- | -- | -- | -- |
| `tooltip.hideDelay` | `number` | `300` | See the [`hide-delay` prop](#props). |
| ``tooltip.hideDelay`` | `number` | `300` | See the [`hide-delay`](#props-hide-delay) prop. |

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

@@ -4,7 +4,7 @@
### 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/transfer/size.vue" ]]
@@ -26,18 +26,18 @@ Available size variants for the `ui` prop: `s`/`m`.
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `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. |
| `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`` | `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. |
| ``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.
@@ -68,11 +68,11 @@ The filter function. The function signature is `function(from, keyword, item, in
+++Parameters
| Name | Type | Description |
| -- | -- | -- |
| `from` | `string` | The source of search. Available values are `'candidate'`/`'selected'`. `'candidate'` means search is triggered from the candidate panel, `'selected'` means from the selected panel. |
| `from` | `string` | The source of search. Available values are `'candidate'` / `'selected'`. `'candidate'` means search is triggered from the candidate panel, `'selected'` means from the selected panel. |
| `keyword` | `string` | The search keyword. |
| `item` | `Object` | Each item in `datasource`. |
| `index` | `number` | The index of each item among its siblings. |
| `datasource` | `Array<{label: string, ...}>` | Same as the `datasource` prop. |
| `datasource` | `Array<{label: string, ...}>` | same as the [`datasource`](#props-datasource) prop. |
+++
+++Default value
@@ -91,7 +91,7 @@ function (keyword, { label }) {
`v-model`
:::
The selected values which is the `value` array of `datasource` items (affected by the `keys` prop).
The selected values which is the `value` array of `datasource` items (affected by the [`keys`](#props-keys) prop).
^^^
^^^selected-show-mode
@@ -122,17 +122,17 @@ Merge strategy for selected values. When all child nodes under a node are select
| Name | Description |
| -- | -- |
| `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] |
| `selected-item` | [^selected-item] |
| `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`` | 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] |
| ``selected-item`` | [^selected-item] |
| ``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.
@@ -183,15 +183,15 @@ The scope properties will be the same as slot `candidate-item` when `selected-sh
| Name | Description |
| -- | -- |
| `select` | Triggered when user changes selection. The callback parameter list is `(selected: Array<string>)` and `selected` is the array of `value` properties of selected items.
| ``select`` | Triggered when user changes selection. The callback parameter list is `(selected: Array<string>)` and `selected` is the array of `value` properties of selected items.
### Icons
| Name | Description |
| -- | -- |
| `checked` | The checked state. |
| `select` | Select items. |
| `remove` | Remove items. |
| `expand` | Click to expand (currently being collapsed). |
| `collapse` | Click to collapse (currently being expanded). |
| `separator` | The separator between level labels when `selected-show-mode` is `'flat'`. |
| ``checked`` | The checked state. |
| ``select`` | Select items. |
| ``remove`` | Remove items. |
| ``expand`` | Click to expand (currently being collapsed). |
| ``collapse`` | Click to collapse (currently being expanded). |
| ``separator`` | The separator between level labels when `selected-show-mode` is `'flat'`. |

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

@@ -4,7 +4,7 @@
### 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/tree/size.vue" ]]
@@ -22,14 +22,14 @@ Available size variants for the `ui` prop: `s`/`m`.
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `datasource` | `Array<Object>` | `[]` | [^datasource] |
| `expanded` | `Array` | `[]` | [^expanded] |
| `checkable` | `boolean` | `false` | Whether the rows are checkable. |
| `checked` | `Array` | `[]` | [^checked] |
| `selectable` | `boolean` | `false` | Whether the nodes are selectable. |
| `selected` | `string` | - | [^selected] |
| `merge-checked` | `string` | `keep-all` | [^merge-checked] |
| ``ui`` | `string=` | - | [^ui] |
| ``datasource`` | `Array<Object>` | `[]` | [^datasource] |
| ``expanded`` | `Array` | `[]` | [^expanded] |
| ``checkable`` | `boolean` | `false` | Whether the rows are checkable. |
| ``checked`` | `Array` | `[]` | [^checked] |
| ``selectable`` | `boolean` | `false` | Whether the nodes are selectable. |
| ``selected`` | `string` | - | [^selected] |
| ``merge-checked`` | `string` | `keep-all` | [^merge-checked] |
^^^ui
Style variants.
@@ -95,10 +95,10 @@ Merge strategy for selected values. When all child nodes under a node are select
| Name | Description |
| -- | -- |
| `item` | [^item] |
| `item-label` | The label of each node. Shares the same scope properties with the `item` slot. |
| `item-before` | The area before the label of each node. Shares the same scope properties with the `item` slot. |
| `item-after` | The area after the label of each node. Shares the same scope properties with the `item` slot. |
| ``item`` | [^item] |
| ``item-label`` | The label of each node. Shares the same scope properties with the [`item`](#slots-item) slot. |
| ``item-before`` | The area before the label of each node. Shares the same scope properties with the [`item`](#slots-item) slot. |
| ``item-after`` | The area after the label of each node. Shares the same scope properties with the [`item`](#slots-item) slot. |
^^^item
The content of each entire node.
@@ -120,9 +120,9 @@ Additionally, custom properties apart from the listed ones will also be passes i
| Name | Description |
| -- | -- |
| `click` | [^click] |
| `expand` | [^expand] |
| `collapse` | [^collapse] |
| ``click`` | [^click] |
| ``expand`` | [^expand] |
| ``collapse`` | [^collapse] |
^^^click
Triggered when the node is clicked. The callback parameter list is `(item, parents, index, depth)`.
@@ -165,5 +165,5 @@ Triggered when the node is collapsed. The callback parameter list is `(item, ind
| Name | Description |
| -- | -- |
| `expand` | Click to expand (currently being collapsed). |
| `collapse` | Click to collapse (currently being expanded). |
| ``expand`` | Click to expand (currently being collapsed). |
| ``collapse`` | Click to collapse (currently being expanded). |

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

@@ -4,13 +4,13 @@
### File upload
Set the `type` prop to `file` to use the file upload mode.
Set the [`type`](#props-type) prop to `file` to use the file upload mode.
[[ demo src="/demo/uploader/file.vue" ]]
### Image upload
Set the `type` prop to `image` to use the image upload mode.
Set the [`type`](#props-type) prop to `image` to use the image upload mode.
[[ demo src="/demo/uploader/image.vue" ]]
@@ -20,28 +20,28 @@ Set the `type` prop to `image` to use the image upload mode.
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `ui` | `string=` | - | [^ui] |
| `type` | `string` | `'file'` | [^type] |
| `value` | `Object|Array<Object>` | - | [^value] |
| `key-field` | `string` | `'key'` | Used to specify a unique key for the file object, as a basis for correctly handling the order of the file list when the data changes. |
| `name` | `string` | `'file'` | The `name` of native `<input>` elements. |
| `action` | `string` | - | Upload URL. |
| `headers` | `Object` | `uploader.headers` | Extra [HTTP headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers). Can be globally configured. |
| `with-credentials` | `boolean` | `true` | The same as the `with-credentials` option of `XMLHttpRequest`. |
| `request-mode` | `string` | `uploader.requestMode` | [^request-mode] |
| `iframe-mode` | `string` | `uploader.iframeMode` | [^iframe-mode] |
| `callback-namespace` | `string` | `uploader.callbackNamespace` | The namespace of the callback function when `request-mode` is `'iframe'` and `iframe-mode` is `'callback'`, will be placed under the `window` object. Can be globally configured. |
| `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`. |
| `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. |
| `progress` | `string` | `'text'` | [^progress] |
| `autoupload` | `boolean` | `true` | Whether to start upload as soon as a file is selected. |
| `order` | `string` | `asc` | [^order] |
| `upload` | `function(Object, Object): function` | - | [^upload] |
| `controls` | `function(Object, Array<Object>): Array<Object>` | - | [^controls] |
| ``ui`` | `string=` | - | [^ui] |
| ``type`` | `string` | `'file'` | [^type] |
| ``value`` | `Object | Array<Object>` | - | [^value] |
| ``key-field`` | `string` | `'key'` | Used to specify a unique key for the file object, as a basis for correctly handling the order of the file list when the data changes. |
| ``name`` | `string` | `'file'` | The `name` of native `<input>` elements. |
| ``action`` | `string` | - | Upload URL. |
| ``headers`` | `Object` | `uploader.headers` | Extra [HTTP headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers). Can be [globally configured](#configs-uploader-headers). |
| ``with-credentials`` | `boolean` | `true` | The same as the [`withCredentials`](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/withCredentials) option of `XMLHttpRequest`. |
| ``request-mode`` | `string` | `uploader.requestMode` | [^request-mode] |
| ``iframe-mode`` | `string` | `uploader.iframeMode` | [^iframe-mode] |
| ``callback-namespace`` | `string` | `uploader.callbackNamespace` | The namespace of the callback function when [`request-mode`](#props-request-mode) is `'iframe'` and `iframe-mode` is `'callback'`, will be placed under the `window` object. Can be [globally configured](#configs-uploader-callbackNamespace). |
| ``data-type``| `string` | `'json'` | [^data-type] |
| ``convert-response`` | `uploader.convertResponse` | - | [^convert-response] |
| ``accept`` | `string` | - | The same as the [`accept`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/file#limiting_accepted_file_types) 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`. |
| ``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. |
| ``progress`` | `string` | `'text'` | [^progress] |
| ``autoupload`` | `boolean` | `true` | Whether to start upload as soon as a file is selected. |
| ``order`` | `string` | `asc` | [^order] |
| ``upload`` | `function(Object, Object): function` | - | [^upload] |
| ``controls`` | `function(Object, Array<Object>): Array<Object>` | - | [^controls] |
^^^ui
Style variants.
@@ -68,12 +68,12 @@ The type of the uploader.
^^^value
Returns an array of file objects when `multiple` is `true`. When `max-count` is set to a value greater than `1`, then `multiple` treated as `true`.
The type of single file is `{name: string, src: string, ...}`, and fields added inside `convert-response`.
The type of single file is `{name: string, src: string, ...}`, and fields added inside [`convert-response`](#props-convert-response).
+++
^^^
^^^request-mode
The request mode of the uploader. Can be globally customized.
The request mode of the uploader. Can be [globally configured](#configs-uploader-request-mode).
+++Enum values
| Value | Description |
@@ -84,13 +84,13 @@ The request mode of the uploader. Can be globally customized.
^^^
^^^iframe-mode
To specify the callback mode when `request-mode` is `iframe`. Can be globally customized.
To specify the callback mode when [`request-mode`](#props-request-mode) is `iframe`. Can be [globally configured](#configs-uploader-iframe-mode).
+++Enum values
| Value | Description |
| -- | -- |
| `postmessage` | Callback with `PostMessage`. |
| `callback` | Callback with callback functions registered according to `callback-namespace` on `window`. |
| `callback` | Callback with callback functions registered according to [`callback-namespace`](#props-callback-namespace) on `window`. |
+++
^^^
@@ -116,7 +116,7 @@ Converts response data to standard format that can be consumed by the uploader,
| `src` | `string=` | The location of the file. Required when `success` is `true`. |
| `message` | `string=` | Error message when upload fails. Required when `success` is `false`. |
Additional fields can be added to the response data. These data fields will be included in the `value` prop and parameter of callbacks `change`, `success`, `failure`, `remove` and `progress` events. Can be globally configured.
Additional fields can be added to the response data. These data fields will be included in the [`value`](#props-value) prop and parameter of callbacks [`change`](#events-change), [`success`](#events-success), [`failure`](#events-failure), [`remove`](#events-remove) and [`progress`](#events-progress) events. Can be [globally configured](#configs-uploader-convert-response).
+++
^^^
@@ -149,7 +149,7 @@ Customizing the upload process in case the value of `request-mode` is `'custom'`
+++Properties
| Property | Type | Description |
| -- | -- | -- |
| `onload` | `function` | The upload completion callback function whose arguments is the same as the `convert-response` prop's return value. |
| `onload` | `function` | The upload completion callback function whose arguments is the same as the [`convert-response`](#props-convert-response) prop's return value. |
| `onprogress` | `function` | The callback function for upload progress, the parameter type being `{ loaded: number, total: number }`, `loaded` is the number of bytes that have been uploaded, and `total` is the total number of bytes in the file. |
| `oncancel` | `function` | The callback to the component when the custom upload is actively cancelled, no parameters. |
| `onerror` | `function` | The callback for upload error, the parameter type is `{ message: string }` and `message` is the error message. |
@@ -171,58 +171,32 @@ In image upload mode, it is used to customize the actions on the floating toolba
### Slots
| Name | Description |
| -- | -- |
| `button-label` | [^button-label] |
| `desc` | Descriptions of th uploader, usually maximum file count, size or valid formats. |
| `type-invalid` | [^type-invalid] |
| `size-invalid` | [^size-invalid] |
| `count-overflow` | [^count-overflow] |
| `success-label` | [^success-label] |
| `failure-label` | [^failure-label] |
| `uploading-label` | [^uploading-label] |
| `file` | [^file] |
| `file-before` | The content before each file. Shares the same slot properties with slot `file'. |
| `file-after` | The content after each file. Shares the same slot properties with slot `file'. |
| `extra-operation` | The content of extra operatins when under image upload mode, eg. custom buttons. Shares the same slot properties with slot `file'. |
| --- | --- |
| ``button-label`` | [^button-label] |
| ``upload`` | The area of the upload button in image upload mode. |
| ``desc`` | The content of the prompt for the number, format, size, etc. of files. |
| ``file`` | [^file] |
| ``file-before`` | The area before the contents of a single file. The scope argument is the same as the [`file`](#slots-file) slot. |
| ``file-after`` | The area after the contents of a single file. The scope argument is the same as the [`file`](#slots-file) slot. |
| ``uploading`` | The area of a single image being uploaded in image upload mode. The scope argument is the same as the [`file`](#slots-file) slot. |
| ``failure`` | The area of a single image that failed to upload in image upload mode. The scope argument is the same as the [`file`](#slots-file) slot. |
^^^button-label
The content of the uploader button. By default, it suggests to select a file for file uploaders and shows an upload icon for image uploaders.
^^^^button-label
The content in the upload button.
Default content: file upload for prompt to select a file, and image upload for upload image icon.
^^^
^^^type-invalid
The content of invalid type error message. Suggests the type being invalid by default.
^^^
^^^^file
Single file area to customize the file content.
^^^size-invalid
The content of invalid size error message. Suggests the size being invalid by default.
^^^
^^^count-overflow
The content displayed when file count exceeds limit. Suggests too many files by default.
^^^
^^^success-label
The content of upload success message. Suggests upload succeeded by default.
^^^
^^^failure-label
The content of upload failure message. Suggests upload failed by default.
^^^
^^^uploading-label
The content displayed during upload when the `progress` prop is set to `text`. Suggests uploading by default.
^^^
^^^file
The content of each file.
+++Scope properties
| Name | Type | Description |
| -- | -- | -- |
+++ scope parameters
| name | type | description |
| --- | --- | --- |
| `name` | `string` | The name of the file. |
| `src` | `string` | The location of the file. |
| `status` | `string` | The status of the file. Can be one of `'success'`/`'uploading'`/`'failure'`. |
| `index` | `number` | The index of the file within the file list. |
| `src` | `string` | The address of the file. |
| `status` | `string` | The status of the file. `'success'` means the upload was successful; `'uploading'` means the upload is in progress; `'failure'` means the upload failed. |
| `index` | `number` | The number of the file in the list. |
+++
^^^
@@ -230,13 +204,13 @@ The content of each file.
| Name | Description |
| -- | -- |
| `change` | [^event-change] |
| `remove` | [^event-remove] |
| `success` | Triggers when upload succeeded. Shares the same callback parameter list with the `remove` event. |
| `failure` | Triggers when upload failed. Shares the same callback parameter list with the `remove` event. |
| `invalid` | [^event-invalid] |
| `statuschange` | [^event-statuschange] |
| `progress` | [^event-progress] |
| ``change`` | [^event-change] |
| ``remove`` | [^event-remove] |
| ``success`` | Triggers when upload succeeded. Shares the same callback parameter list with the [`remove`](#events-remove) event. |
| ``failure`` | Triggers when upload failed. Shares the same callback parameter list with the [`remove`](#events-remove) event. |
| ``invalid`` | [^event-invalid] |
| ``statuschange`` | [^event-statuschange] |
| ``progress`` | [^event-progress] |
^^^event-change
Triggers when upload succeeded or a file is removed. The callback parameter list is `(value)`.
@@ -244,7 +218,7 @@ Triggers when upload succeeded or a file is removed. The callback parameter list
+++Parameters
| Name | Type | Description |
| -- | -- | -- |
| `value` | `Object|Array<Object>` | The `value` of the component. |
| `value` | `Object | Array<Object>` | The `value` of the component. |
+++
^^^
@@ -263,7 +237,7 @@ Triggered when a file is removed. The callback parameter list is `(file, index)`
| -- | -- | -- |
| `name` | `string` | The name of the file. |
| `src` | `string` | The location of the file. |
| `status` | `string` | The status of the upload process. Can be one of `'success'`/`'uploading'`/`'failure'`. |
| `status` | `string` | The status of the upload process. Can be one of `'success'` / `'uploading'` / `'failure'`. |
Fields added from `convert-response` are also available.
+++
@@ -275,7 +249,7 @@ Triggered when file validation fails. The callback parameter list is `(validity:
+++Parameter properties
| Name | Type | Description |
| -- | -- | -- |
| `file` | `Object` | The information about the file that failed the validation, being the same type as `file` in the callback parameter of the `remove` event. This property is empty if the validation fails because the number of files selected exceeds the `max-count` limit. |
| `file` | `Object` | The information about the file that failed the validation, being the same type as `file` in the callback parameter of the [`remove`](#events-remove) event. This property is empty if the validation fails because the number of files selected exceeds the `max-count` limit. |
| `errors` | `Array<Object>` | Array of all the validation error messages of the file, each item in it is an object that contains validation failure information. |
+++
@@ -283,7 +257,7 @@ Triggered when file validation fails. The callback parameter list is `(validity:
| Name | Type | Description |
| -- | -- | -- |
| `type` | `string` | The type of validation error, whose enum value can be accessed from the `Uploader.errors` object, eg. `Uploader.errors.SIZE_INVALID`. |
| `value` | `number|string|Object` | The value that doesn't pass validation, can be different types depending on the `type` property. |
| `value` | `number | string | Object` | The value that doesn't pass validation, can be different types depending on the `type` property. |
| `message` | `string` | The validation error message. |
+++
@@ -293,7 +267,7 @@ Triggered when file validation fails. The callback parameter list is `(validity:
| `TYPE_INVALID` | File type validation failure. | `string` | File name. |
| `SIZE_INVALID` | File size validation failure. | `number` | File size in bytes. |
| `TOO_MANY_FILES` | The number of selected files exceeds the `max-count` limit. | `number` | Number of files selected. |
| `CUSTOM_INVALID` | Custom validation failure returned by `validator` prop. | `Object` | File object, same as `remove` event callback parameter. |
| `CUSTOM_INVALID` | Custom validation failure returned by [`validator`](#props-validator) prop. | `Object` | File object, same as [`remove`](#events-remove) event callback parameter. |
+++
^^^
@@ -316,30 +290,30 @@ Triggered when upload progress updated, when `request-mode` is `'xhr'`. The call
+++Parameters
| Name | Type | Description |
| -- | -- | -- |
| `file` | `Object` | Same as the file parameter of the callback for the `remove` event. |
| `file` | `Object` | Same as the file parameter of the callback for the [`remove`](#events-remove) event. |
| `index` | `number` | The index of the file being uploaded. |
| `event` | [`Event`](https://developer.mozilla.org/en-US/docs/Web/Events/progress) | Native upload progress event object. |
+++
^^^
### Global config
### Configs
| Key | Type | Default | Description |
| -- | -- | -- | -- |
| `uploader.requestMode` | `string` | `'xhr'` | Same as the [`request-mode`](#props) prop. |
| `uploader.iframeMode` | `string` | `'xhr'` | Same as the [`iframe-mode`](#props) prop. |
| `uploader.callbackNamespace` | `string` | `'veuiUploadResult'` | Same as the [`callback-namespace`](#props) prop. |
| `uploader.headers` | `Object` | - | Same as the [`headers`](#props) prop. |
| `uploader.convertResponse` | `function(Object): Object` | - | Same as the [`convert-response`](#props) prop. |
| ``uploader.requestMode`` | `string` | `'xhr'` | Same as the [`request-mode`](#props-request-mode) prop. |
| ``uploader.iframeMode`` | `string` | `'xhr'` | Same as the [`iframe-mode`](#props-iframe-mode) prop. |
| ``uploader.callbackNamespace`` | `string` | `'veuiUploadResult'` | Same as the [`callback-namespace`](#props-callback-namespace) prop. |
| ``uploader.headers`` | `Object` | - | Same as the [`headers`](#props-headers) prop. |
| ``uploader.convertResponse`` | `function(Object): Object` | - | Same as the [`convert-response`](#props-convert-response) prop. |
### Icons
| Name | Description |
| -- | -- |
| `upload` | Upload file. |
| `clear` | Remove file. |
| `success` | Upload succeeded. |
| `redo` | Retry upload. |
| `file` | File. |
| `add` | Add file. |
| `alert` | Validation failure alert. |
| ``upload`` | Upload file. |
| ``clear`` | Remove file. |
| ``success`` | Upload succeeded. |
| ``redo`` | Retry upload. |
| ``file`` | File. |
| ``add`` | Add file. |
| ``alert`` | Validation failure alert. |

2
one/docs/en-US/getting-started/style-variants.md
View File

@@ -11,7 +11,7 @@ The `ui` prop takes a string consists of a list of whitespace-separated tokens,
```
:::tip
As we know, most component libraries provide style variants via enum props like `shape`/`size`/`type`/... .
As we know, most component libraries provide style variants via enum props like `shape` / `size` / `type`/... .
While our design goal is that VEUI should not be bound to a specific design language tightly (though it's hard to completely decouple component structure/behavior and design languages). If we use enum props, once we need to create a completely new theme package but some of the new style variants cannot be described with the preserved enum props, we'll have to use something like `class` to attach style hooks to implement these style variants.

4
one/docs/en-US/getting-started/veui-loader.md
View File

@@ -43,11 +43,11 @@ As we know, in popular component libraries like Ant Design and Element, theme pa
| `package` | `string` | - | The name of the injected package. It's generally the name of the theme package, like `'veui-theme-dls'`. |
| `path` | `string` | `'components'` | The path of the directory containing the injected module. |
| `fileName` | `string` | `'{module}.css'` | The file name template corresponds to the component name. Must include the placeholder `{module}`. |
| `transform` | `string|boolean` | `'kebab-case'` | Transformation applied for component names. The `{module}` part within `fileName` will be replaced with the transformed name. Provide `false` to prevent transformation. All possible values are `'kebab-case'`, `'camleCase'` and `'PascalCase'`. |
| `transform` | `string | boolean` | `'kebab-case'` | Transformation applied for component names. The `{module}` part within `fileName` will be replaced with the transformed name. Provide `false` to prevent transformation. All possible values are `'kebab-case'`, `'camleCase'` and `'PascalCase'`. |
* `locale`
Type: `boolean|string=|Array<string>=`
Type: `boolean | string=|Array<string>=`
The ID of the locale modules to be injected. Array values indicate to inject multiple locale packages. Defaults to `zh-Hans`. Current available values are `zh-Hans` and `en-US`.