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

feat: update docs

Browse Source
This commit is contained in:
Justineo 2020-09-22 11:06:13 +08:00
parent d64014f3b4
commit 468f6995c3
No known key found for this signature in database
GPG Key ID: B73F0979CF18A0EA
32 changed files with 1032 additions and 548 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
one/docs/components/autocomplete.md
View File

@ -12,7 +12,7 @@
| -- | -- | -- | -- |
| `datasource` | `Array<string|Object>=` | `[]` | [^datasource] |
| `value` | `*` | - | [^prop-value] |
| `match` | `function(string|Object, string)=: boolean` | - | 自定义搜索逻辑。 |
| `match` | `function(string|Object, string): boolean=` | - | 自定义搜索逻辑。 |
| `strict` | `boolean=` | `false` | 建议下拉面板关闭时，若输入值没有完全匹配建议值，那么会清空输入值。 |
| `suggest-trigger` | `string|Array<string>=` | `'input'` | 触发建议下拉面板的时机，可用值有：`'input'`、`'focus'`。 |
| `placeholder` | `string=` | | 输入占位符。 |

3
one/docs/components/button-group.md
View File

@ -4,7 +4,7 @@
### 风格
可选的 `ui` 属性值：`primary`/`strong`。
可选的 `ui` 属性值：`primary`/`strong`/`basic`。
[[ demo src="/demo/button-group/style.vue" ]]
@ -44,6 +44,7 @@
| -- | -- |
| `primary` | 主要按钮，背景显示为主题色。 |
| `strong` | 加强样式。 |
| `basic` | 基础样式。 |
| `xs` | 超小尺寸样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |

2
one/docs/components/calendar.md
View File

@ -35,7 +35,7 @@
| `week-start` | `number=` | `calendar.weekStart` | 一周的起始。可进行[全局配置](#全局配置)。 |
| `fill-month` | `boolean=` | `true` | 当只有一个面板时，是否要在当前月份面板显示非本月日期。 |
| `date-class` | `string|Array|Object|function=` | `{}` | 特定日期的自定义 HTML `class`。传非函数时，数据格式为所有 [Vue 支持的 `class` 表达式](https://cn.vuejs.org/v2/guide/class-and-style.html#%E7%BB%91%E5%AE%9A-HTML-Class)；传函数时，签名为 `function(Date): string|Array<string>|Object<string, boolean>`，返回值格式亦为所有 Vue 支持的 `class` 表达式。 |
| `disabled-date` | `function(Date)=: boolean` | `() => false` | 特定日期是否禁用。 |
| `disabled-date` | `function(Date, Date=): boolean=` | `() => false` | 第一个参数为需要判断是否禁用的日期。当处于范围选择过程中且已经选择了一个日期，会作为第二个参数传入。 |
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
| `readonly` | `boolean=` | `false` | 是否为只读状态。 |

16
one/docs/components/check-button-group.md
View File

@ -8,6 +8,12 @@
[[ demo src="/demo/check-button-group/default.vue" ]]
### 单复选共存
可以使用 `exclusive` 选项与 `empty-value` 实现一些单复选共存的场景。
[[ demo src="/demo/check-button-group/exclusive.vue" ]]
## API
### 属性
@ -19,6 +25,7 @@
| `value` | `Array` | `[]` | [^value] |
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
| `empty-value` | `*` | - | 当取消所有选择时组件需要默认选中的值，通常用于存在 `exclusive` 选项的场景。 |
^^^ui
预设样式。
@ -31,7 +38,7 @@
^^^
^^^items
复选按钮组数据源，项目类型为 `{label, value, disabled, ...}`。
复选按钮组数据源，项目类型为 `{label, value, disabled, exclusive, ...}`。
+++字段详情
| 名称 | 类型 | 描述 |
@ -39,6 +46,7 @@
| `label` | `string` | 选项的文字说明。 |
| `value` | `*` | 选项对应的值。 |
| `disabled` | `boolean=` | 选项是否为禁用。 |
| `exclusive` | `boolean=` | 选项是否为排它项。当选项为排它项时，选中该项将取消选中其它所有选项。 |
+++
^^^
@ -86,3 +94,9 @@
选中状态变化后触发，回调参数为 `(value: Array)`。`value` 为当前按钮组已选项内 `value` 字段组成的数组。
^^^
### 图标
| 名称 | 描述 |
| -- | -- |
| `check` | 已选标志。 |

12
one/docs/components/checkbox-group.md
View File

@ -8,6 +8,12 @@
[[ demo src="/demo/checkbox-group/default.vue" ]]
### 单复选共存
可以使用 `exclusive` 选项与 `empty-value` 实现一些单复选共存的场景。
[[ demo src="/demo/checkbox-group/exclusive.vue" ]]
## API
### 属性
@ -19,6 +25,7 @@
| `value` | `Array` | `[]` | [^value] |
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
| `empty-value` | `*` | - | 当取消所有选择时组件需要默认选中的值，通常用于存在 `exclusive` 选项的场景。 |
^^^ui
预设样式。
@ -26,12 +33,12 @@
+++枚举值
| 值 | 描述 |
| -- | -- |
| `m` | 中尺寸样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
^^^
^^^items
复选框组数据源，项目类型为 `{label, value, disabled, ...}`。
复选框组数据源，项目类型为 `{label, value, disabled, exclusive, ...}`。
+++字段详情
| 名称 | 类型 | 描述 |
@ -39,6 +46,7 @@
| `label` | `string` | 选项的文字说明。 |
| `value` | `*` | 选项对应的值。 |
| `disabled` | `boolean=` | 选项是否为禁用。 |
| `exclusive` | `boolean=` | 选项是否为排它项。 |
+++
^^^

2
one/docs/components/column.md
View File

@ -19,7 +19,7 @@
| `width` | `string=|number=` | - | 列宽，值为像素值。 |
| `sortable` | `boolean=` | `false` | [^sortable] |
| `align` | `string=` | - | 内容对齐方式，支持 `left`/`center`/`right`。 |
| `span` | `function(number)=: Object` | | [^span] |
| `span` | `function(number): Object=` | | [^span] |
^^^sortable
本列是否支持排序。

18
one/docs/components/date-picker.md
View File

@ -33,10 +33,11 @@
| `week-start` | `number` | `calendar.weekStart` | 一周的起始。可进行[全局配置](./calendar#全局配置)。 |
| `fill-month` | `boolean` | `true` | 当只有一个面板时，是否要在当前月份面板显示非本月日期。 |
| `date-class` | `string|Array|Object|function` | `{}` | 特定日期的自定义 HTML `class`。传非函数时，数据格式为所有 Vue 支持的 `class` 表达式；传函数时，签名为 `function(Date): string|Array<string>|Object<string, boolean>`，返回值格式亦为所有 Vue 支持的 `class` 表达式。 |
| `disabled-date` | `function(Date): boolean` | `() => false` | 特定日期是否禁用。 |
| `disabled-date` | `function(Date, Date=): boolean=` | `() => false` | 用于自定义指定日期是否禁用。第一个参数为需要判断是否禁用的日期。当处于范围选择过程中且已经选择了一个日期，会作为第二个参数传入。 |
| `clearable` | `boolean` | `false` | 已选值是否可以清除。 |
| `placeholder` | `string` | `range ? datepicker.rangePlaceholder : datepicker.placeholder` | 未选择时的占位文本。可进行[全局配置](#全局配置)。 |
| `format` | `string` | `'yyyy-MM-dd'`/`'yyyy-MM'`/`'yyyy'` | 用于格式化的字符串表达式，具体格式可以参见 [date-fns 的文档](https://date-fns.org/v2.12.0/docs/format)。 |
| `format` | `string|function(Date): string=` | `'yyyy-MM-dd'`/`'yyyy-MM'`/`'yyyy'` | 使用字符串时，表示用于格式化/解析的字符串表达式，具体格式可以参见 [date-fns 的文档](https://date-fns.org/v2.12.0/docs/format)。传入函数可自定义格式化逻辑。 |
| `parse` | `function(string): Date=` | - | 自定义将输入字符串解析为 `Date` 对象的函数。 |
| `shortcuts` | `Array<Object>` | `datepicker.shortcuts` | [^shortcuts] |
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
@ -181,6 +182,8 @@
| 名称 | 描述 |
| -- | -- |
| `select` | [^event-select] |
| `selectstart` | 选择日期范围时，选择完起始日期时触发，回调参数 `(picking: Date)`，表示已选的起始项日期。 |
| `selectprogress` | [^event-selectprogress] |
^^^event-select
:::badges
@ -190,6 +193,17 @@
选择修改后触发，回调参数为 `(selected)`。数据类型和 `selected` 属性一致。
^^^
^^^event-selectprogress
选择日期范围时，在已经选择开始日期后，通过鼠标或键盘交互标记到的结束日期变更时触发。回调参数为 `(picking)`，表示当前标记的日期范围，类型取决于 `multiple` 属性的值。
+++参数详请
| `multiple` | 类型 |
| -- | -- |
| `false` | `[Date, Date]` |
| `true` | `Array<[Date, Date]>` |
+++
^^^
### 全局配置
| 配置项 | 类型 | 默认值 | 描述 |

2
one/docs/components/dialog.md
View File

@ -40,7 +40,7 @@
| `footless` | `boolean=` | `false` | 是否不显示默认的底部操作栏。 |
| `loading` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态，无法点击。 |
| `priority` | `number=` | - | 对话框浮层层叠权重，参考 [`Overlay`](./overlay) 组件的 [`priority`](./overlay#props) 属性。 |
| `before-close` | `function(string)=: boolean=|Promise<boolean=>` | - | [^before-close] |
| `before-close` | `function(string): boolean=|Promise<boolean=>` | - | [^before-close] |
| `overlay-class` | `string|Object=` | - | 对话框浮层根元素类名，参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props) 属性。 |
^^^ui

2
one/docs/components/embedded.md
View File

@ -21,7 +21,7 @@
| `footless` | `boolean=` | `false` | 是否不显示默认的底部操作栏。 |
| `loading` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态，无法点击。 |
| `priority` | `number=` | - | 折叠式面板浮层层叠权重，参考 [`Overlay`](./overlay) 组件的 [`priority`](./overlay#props) 属性。 |
| `before-close` | `function(string)=: boolean=|Promise<boolean=>` | - | 在将触发折叠式面板关闭的操作发生后执行，参考 [`Dialog`](./dialog) 组件的 [`before-close`](./dialog#props) 属性。 |
| `before-close` | `function(string): boolean=|Promise<boolean=>` | - | 在将触发折叠式面板关闭的操作发生后执行，参考 [`Dialog`](./dialog) 组件的 [`before-close`](./dialog#props) 属性。 |
| `overlay-class` | `string|Object=` | - | 折叠式面板浮层根元素类名，参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props) 属性。 |
^^^ui

1
one/docs/components/input.md
View File

@ -35,6 +35,7 @@
| `clearable` | `boolean=` | `false` | 是否显示清除按钮。 |
| `composition` | `boolean=` | `false` | 是否感知输入法输入过程的值。 |
| `select-on-focus` | `boolean=` | `false` | 聚焦时是否自动选中输入框文本。 |
| `get-length` | `function(string): number=` | 自定义的字符长度计算函数。 |
^^^ui
预设样式。

1
one/docs/components/textarea.md
View File

@ -36,6 +36,7 @@
| `composition` | `boolean` | `false` | 是否感知输入法输入过程的值。 |
| `select-on-focus` | `boolean` | `false` | 聚焦时是否自动选中文本域文本。 |
| `autoresize` | `boolean` | `false` | 高度是否会被内容撑开。 |
| `get-length` | `function(string): number=` | 自定义的字符长度计算函数。 |
^^^ui
预设样式。

33
one/docs/components/uploader.md
View File

@ -168,15 +168,15 @@
| 字段 | 类型 | 描述 |
| -- | -- | -- |
| `onload` | `function` | 上传完成的回调函数，参数内容与 `convert-response` prop 返回值相同。 |
| `onprogress` | `function` | 上传进度发生变化的回调函数，参数为 `{ loaded: number, total: number }`，`loaded` 为已上传部分大小，`total` 为文件总大小。 |
| `onprogress` | `function` | 上传进度发生变化的回调函数，参数为 `{ loaded: number, total: number }`，`loaded` 为已上传部分字节数，`total` 为文件总字节数。 |
| `oncancel` | `function` | 自定义上传主动取消时对组件进行的回调，无参数。 |
| `onerror` | `function` | 上传出错的回调函数，参数为 `{ message: string }`，`message` 为错误提示信息。 |
该方法如果返回一个函数，该函数将在用户操作取消或上传组件销毁时被调用，用来中断自定义上传过程。
如果 `upload` 返回一个函数，该函数将在用户操作取消或上传组件销毁时被调用，用来中断自定义上传过程。
^^^
^^^controls
图片上传模式下，自定义配置图片遮罩浮层上的操作项，参数为 `(file: Object, defaultControls: Array<Object>)`，`file` 为文件相关信息，`defaultControls` 为包含默认的操作项的数组。该方法可根据文件状态的不同，返回包含不同的操作项的数组。每个操作项的具体字段如下：
图片上传模式下，用来自定义配置图片遮罩浮层上的操作项，参数为 `(file: Object, defaultControls: Array<Object>)`，`file` 为文件相关信息，`defaultControls` 为包含默认的操作项的数组。可根据文件状态的不同，返回包含不同的操作项的数组。每个操作项的具体字段如下：
+++字段详情
| 字段 | 类型 | 描述 |
@ -184,7 +184,6 @@
| `name` | `string` | 操作项的名称，点击该按钮后会抛出同名的事件，事件的回调参数为 `(file: Object, index: number)`， `file` 为触发事件的文件对象，`index` 为文件在列表中的序号。 |
| `icon` | `string` | 操作项使用的图标。 |
| `disabled` | `boolean=` | 操作项是否被禁用。如果该字段为空，则该操作项的禁用状态跟随组件整体的禁用状态。 |
^^^
### 插槽
@ -201,9 +200,9 @@
| `failure` | 图片上传模式下，上传失败的单个图片的区域。作用域参数与 `file` 作用域插槽相同。 |
^^^button-label
上传文件的按钮里的内容。
上传按钮里的内容。
默认内容：提示选择文件。
默认内容：文件上传为提示选择文件，图片上传则为上传图片图标。
^^^
^^^file
@ -263,10 +262,9 @@
^^^
^^^event-invalid
文件校验失败时触发，回调参数为 `(invalidInfo: Object)`。
文件校验失败时触发，回调参数为 `(validity: Object)`。
+++参数字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `file` | `Object` | 没有通过校验的文件信息，与 `remove` 事件的回调参数中的 `file` 相同。如果校验失败的原因是选择的文件数量超过最大数量 `max-count` 限制，则这个字段为空。 |
@ -274,24 +272,21 @@
+++
+++校验失败信息字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `type` | `string` | 校验失败的类型，类型可从 `Uploader` 组件 `export` 的 `(errors: Object)` 对象获取。 |
| `value` | `number|string|Object` | 没有通过校验的值，根绝 `type` 的不同有不同的类型。 |
| `type` | `string` | 校验失败的类型，类型枚举值可从 `Uploader.errors` 对象获取，如 `Uploader.errors.SIZE_INVALID`。 |
| `value` | `number|string|Object` | 没有通过校验的值，根据 `type` 的不同有不同的类型。 |
| `message` | `string` | 检验失败的提示信息。 |
+++
+++校验失败信息 type 和 value 对应关系
| 失败类型 | 失败描述 | value 的类型 | value 描述 |
+++校验失败类型与参数关系
| 类型 | 描述 | `value` 类型 | `value` 描述 |
| -- | -- | -- | -- |
| `TYPE_INVALID` | 文件类型校验失败。 | `string` | 文件名称。 |
| `SIZE_INVALID` | 文件大小校验失败。 | `number` | 文件大小。 |
| `TOO_MANY_FILES` | 选择的文件数量超过最大数量 `max-count` 限制。 | `number` | 已选择的文件数量。 |
| `CUSTOM_INVALID` | `validator` 自定义校验失败。 | `Object` | 文件对象。 |
| `SIZE_INVALID` | 文件大小校验失败。 | `number` | 文件大小字节数。 |
| `TOO_MANY_FILES` | 选择的文件数超过 `max-count` 限制。 | `number` | 已选择的文件数。 |
| `CUSTOM_INVALID` | `validator` 自定义校验失败。 | `Object` | 文件对象，字段同 `remove` 事件回调参数。 |
+++
^^^
^^^event-statuschange

6
one/docs/demo/button-group/style.vue
View File

@ -18,6 +18,12 @@
<veui-button>Redo</veui-button>
</veui-button-group>
</section>
<section>
<veui-button-group ui="basic">
<veui-button>Undo</veui-button>
<veui-button>Redo</veui-button>
</veui-button-group>
</section>
</article>
</template>

2
one/docs/demo/check-button-group/default.vue
View File

@ -12,7 +12,7 @@
<h4>Small size</h4>
<veui-check-button-group
v-model="selected"
ui="small"
ui="s"
:items="licenses"
/>
<p>Checked: {{ readable }}</p>

62
one/docs/demo/check-button-group/exclusive.vue Normal file
View File

@ -0,0 +1,62 @@
<template>
<article>
<section>
<h4>Select size</h4>
<veui-check-button-group
v-model="selected"
:items="licenses"
empty-value="any"
/>
<p>Checked: {{ readable }}</p>
</section>
</article>
</template>
<script>
import { CheckButtonGroup } from 'veui'
export default {
components: {
'veui-check-button-group': CheckButtonGroup
},
data () {
return {
selected: ['any'],
licenses: [
{
label: 'Any',
value: 'any',
exclusive: true
},
{
label: 'Small',
value: 'sm'
},
{
label: 'Medium',
value: 'md'
},
{
label: 'Large',
value: 'lg'
}
]
}
},
computed: {
readable () {
return (this.selected || []).join(', ') || '-'
}
}
}
</script>
<style lang="less" scoped docs>
section {
margin-bottom: 20px;
}
h4 {
margin-top: 0;
}
</style>

62
one/docs/demo/checkbox-group/exclusive.vue Normal file
View File

@ -0,0 +1,62 @@
<template>
<article>
<section>
<h4>Select size</h4>
<veui-checkbox-group
v-model="selected"
:items="licenses"
empty-value="any"
/>
<p>Checked: {{ readable }}</p>
</section>
</article>
</template>
<script>
import { CheckboxGroup } from 'veui'
export default {
components: {
'veui-checkbox-group': CheckboxGroup
},
data () {
return {
selected: ['any'],
licenses: [
{
label: 'Any',
value: 'any',
exclusive: true
},
{
label: 'Small',
value: 'sm'
},
{
label: 'Medium',
value: 'md'
},
{
label: 'Large',
value: 'lg'
}
]
}
},
computed: {
readable () {
return (this.selected || []).join(', ') || '-'
}
}
}
</script>
<style lang="less" scoped docs>
section {
margin-bottom: 20px;
}
h4 {
margin-top: 0;
}
</style>

6
one/docs/demo/form/disabled.vue
View File

@ -36,3 +36,9 @@ export default {
}
}
</script>
<style lang="less" scoped docs>
section {
margin-bottom: 20px;
}
</style>

6
one/docs/demo/form/readonly.vue
View File

@ -36,3 +36,9 @@ export default {
}
}
</script>
<style lang="less" scoped docs>
section {
margin-bottom: 20px;
}
</style>

10
one/docs/demo/form/validate.vue
View File

@ -22,10 +22,7 @@
:rules="ageRule"
label="年龄"
>
<veui-input
v-model="formData.age"
placeholder="错误提示优先出在右侧"
/>
<veui-input v-model="formData.age"/>
</veui-field>
<veui-field
@ -129,7 +126,7 @@
</veui-button>
<veui-button
:loading="isValidating"
@click="() => this.$refs.form.reset()"
@click="resetForm"
>
重置
</veui-button>
@ -320,6 +317,9 @@ export default {
},
handleInvalid () {
this.isValidating = false
},
resetForm () {
this.$refs.form.reset()
}
}
}

4
one/docs/demo/search-box/suggestion.vue
View File

@ -8,8 +8,8 @@
@select="handleSelect"
/>
<veui-search-box
ui="strong"
v-model="value1"
ui="strong"
clearable
:suggestions="suggestions1"
replace-on-select
@ -71,7 +71,7 @@ export default {
}
}
</script>
<style lang="less">
<style lang="less" scoped>
.veui-search-box {
margin-left: 1em;
}

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

@ -4,7 +4,7 @@
### Stylistic variants
Available style variants for the `ui` prop: `primary`/`strong`.
Available style variants for the `ui` prop: `primary`/`strong`/`basic`.
[[ demo src="/demo/button-group/style.vue" ]]
@ -44,6 +44,7 @@ Style variants. A space-separated list of enum values.
| -- | -- |
| `primary` | Primary buttons. |
| `strong` | Strong buttons. |
| `basic` | Basic buttons. |
| `xs` | Extra small. |
| `s` | Small. |
| `m` | Medium. |

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

@ -35,7 +35,7 @@ When `multiple` and `range` are both set to `true`, you can select multiple date
| `week-start` | `number=` | `calendar.weekStart` | The start of a week. Can be [globally configured](#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)=: boolean` | `() => false` | Whether the specified date is disabled and cannot be selected. |
| `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. |

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

@ -19,6 +19,7 @@ Available values for the `ui` prop: `s`/`m`.
| `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.
@ -26,12 +27,12 @@ Style variants.
+++Enum values
| Value | Description |
| -- | -- |
| `m` | Medium. |
| `s` | Small. |
| `m` | Medium. |
^^^
^^^items
The datasource of items with the item type being `{label, value, disabled, ...}`.
The datasource of items with the item type being `{label, value, disabled, exclusive ...}`.
+++Properties
| Name | Type | Description |

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

@ -19,6 +19,7 @@ Available size variant for the `ui` prop: `s`/`m`.
| `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.
@ -31,7 +32,7 @@ Style variants.
^^^
^^^items
The datasource of items with the item type being `{label, value, disabled, ...}`.
The datasource of items with the item type being `{label, value, disabled, exclusive ...}`.
+++Properties
| Name | Type | Description |
@ -39,6 +40,7 @@ The datasource of items with the item type being `{label, value, disabled, ...}`
| `label` | `string` | The descriptive label of the item. |
| `value` | `*` | The value of the item. |
| `disabled` | `boolean=` | Whether the item is disabled. |
| `exclusive` | `boolean=` | Whether the item is exclusive. |
+++
^^^

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

@ -19,7 +19,7 @@ See [the demos of `Table`](./table#demos).
| `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] |
| `span` | `function(number): Object=` | | [^span] |
^^^sortable
Whether current column is sortable.

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

@ -33,10 +33,11 @@ When selecting a date range, the `shortcuts` prop can be used to provide predefi
| `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)=: boolean` | `() => false` | Whether the specified date is disabled and cannot be selected. |
| `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=` | `'YYYY-MM-DD'` | 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). |
| `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). |
| `disabled` | `boolean=` | `false` | Whether the date picker is disabled. |
@ -182,6 +183,8 @@ 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] |
^^^event-select
:::badges
@ -191,6 +194,17 @@ The content of each date cell in the dropdown overlay. Displays the correspondin
Triggered when the selected date (range) is changed. The callback parameter list is `(selected)` with `selected` having the same type with the `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.
+++Parameters types
| `multiple` | Type |
| -- | -- |
| `false` | `[Date, Date]` |
| `true` | `Array<[Date, Date]>` |
+++
^^^
### Global config
| Key | Type | Default | Description |

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

@ -40,7 +40,7 @@
| `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. |
| `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] |
| `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

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

@ -35,6 +35,7 @@ Use the `disabled` prop to set an input to disabled state.
| `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. |
^^^ui
Style variants.

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

@ -36,6 +36,7 @@ Use the `disabled` prop to set a textarea to disabled state.
| `composition` | `boolean` | `false` | Whether the input process should be aware of composition. |
| `select-on-focus` | `boolean` | `false` | Whether to select text content when focused. |
| `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
预设样式。

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

@ -40,6 +40,8 @@ Set the `type` prop to `image` to use the image upload mode.
| `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] |
^^^type
The type of the uploader.
@ -144,6 +146,31 @@ The order of displaying uploaded files according to start time.
+++
^^^
^^^upload
Customizing the upload process in case the value of `request-mode` is `'custom'`, the first parameter is the native [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) object and the second parameter is the object that contains callback functions associated with the upload process, with the following properties.
+++Properties
| Property | Type | Description |
| -- | -- | -- |
| `onload` | `function` | The upload completion callback function whose arguments is the same as the `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. |
If `upload` returns a function, it will be called when the user cancelled proactively or the upload component is destroyed, to abort the custom upload process.
^^^
^^^controls
In image upload mode, it is used to customize the actions on the floating toolbar. The parameter types are `(file: Object, defaultControls: Array<Object>)`, where `file` is the file related information and `defaultControls` is the array containing the default actions. It can return an array of different actions depending on the file state. The specific properties for each action item are as follows.
+++Properties
| Property | Type | Description |
| -- | -- | -- |
| `name` | `string` | The name of the action item. When the button is clicked, an event with the same name will be emitted, with `(file: Object, index: number)` as the callback parameter, `file` is the file object that triggered the event, and `index` is the number of the file in the list. |
| `icon` | `string` | The icon of the action item. |
| `disabled` | `boolean=` | Whether the action item is disabled. If this property is undefined, the disabled state of the action item follows the disabled state of the component. |
^^^
### Slots
| Name | Description |
@ -162,7 +189,7 @@ The order of displaying uploaded files according to start time.
| `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
The content of the uploader button. Suggests to select a file by default.
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.
^^^
^^^type-invalid
@ -210,6 +237,7 @@ The content of each file.
| `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] |
@ -244,6 +272,34 @@ Fields added from `convert-response` are also available.
+++
^^^
^^^event-invalid
Triggered when file validation fails. The callback parameter list is `(validity: Object)`.
+++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. |
| `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. |
+++
+++Validation error properties
| 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. |
| `message` | `string` | The validation error message. |
+++
+++Relationship between validation failure types and parameters
| type | description | `value` type | `value` description |
| -- | -- | -- | -- |
| `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. |
+++
^^^
^^^event-statuschange
Triggered when the status of the entire uploader changes. The callback parameter list is `(status: string)`.

1213
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

17
package.json
View File

@ -19,7 +19,7 @@
},
"devDependencies": {
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-veui": "^2.0.0-beta.5",
"babel-plugin-veui": "^2.0.0-beta.11",
"eslint": "^5.15.1",
"eslint-config-prettier": "^4.1.0",
"eslint-config-standard": "^12.0.0",
@ -33,6 +33,7 @@
"esm": "^3.2.25",
"etpl": "^3.2.0",
"focus-visible": "^4.1.5",
"forever": "^3.0.2",
"hastscript": "^3.1.0",
"js-yaml": "^3.13.1",
"less": "^3.9.0",
@ -67,19 +68,15 @@
"stylus-loader": "^3.0.2",
"unist-util-remove": "^1.0.1",
"unist-util-visit": "^1.4.0",
"veui": "^2.0.0-beta.5",
"veui-loader": "^2.0.0-beta.5",
"veui-theme-dls": "^2.0.0-beta.5",
"veui-theme-dls-icons": "^2.0.0-beta.5",
"vue": "^2.6.12",
"veui": "^2.0.0-beta.10",
"veui-loader": "^2.0.0-beta.11",
"veui-theme-dls": "^2.0.0-beta.11",
"veui-theme-dls-icons": "^2.0.0-beta.11",
"vue-awesome": "^4.1.0",
"vue-i18n": "^8.16.0",
"vue-server-renderer": "^2.6.12",
"vue-template-compiler": "^2.6.12",
"vue-windows": "^0.2.4"
},
"dependencies": {
"express": "^4.16.2",
"forever": "^3.0.2"
"express": "^4.16.2"
}
}