Skip to content

Commit

Permalink
aria for progress
Browse files Browse the repository at this point in the history
  • Loading branch information
Justineo committed Apr 16, 2018
1 parent 9088f34 commit 0604f8b
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 9 deletions.
19 changes: 16 additions & 3 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,21 @@

### ⚠️ 非兼容性变更

* [^] `Uploader` 组件在 `maxCount` 的值是 `1` 的情况下,`value` 的默认类型从字符串改成对象,可以通过设置 prop `compat``true``value` 的类型设置为字符串兼容旧版本。
* [^] 修改了 `Radio` 组件的 `v-model` 语义,现在机制和 Vue.js 对原生 `<input type="radio">` 的处理保持一致。
* [^] `Uploader` 组件在 `maxCount` 的值是 1 的情况下,`value` 的默认类型从字符串改成对象,可以通过设置 prop `compat` 为 true 将 `value` 的类型设置为字符串兼容旧版本。

> #### 迁移指南
>
> ##### `Uploader` 组件
>
> `Uploader``max-count``1` 时的 `value` prop 数据类型修改为对象,和多文件时的数组项相同。需要兼容原字符串数据格式时,需要设置 `compat` prop 为 `true`
>
> ```html
> <veui-uploader compat .../>
> ```
>
> ##### `Radio` 组件
>
> 此版本前的 `Radio` 组件的 `v-model` 对应 `checked` 属性,但由于之前的版本中存在多个同 `name` 的 `Radio` 组件时,被取消选中的单选框并不会响应数据变化,导致实际 `v-model` 并不完全可用。新版本在使用 `v-model` 的场景下修复了这个问题,并把逻辑和 Vue.js 对原生元素的处理方式进行了对齐。
>
> ```html
Expand All @@ -24,11 +34,14 @@
* [+] `NumberInput` 新增 `max`/`min` prop,优先从直接父组件 `Field` 的 prop `rule` 中继承 `max`/`min` rule 的值。
* [^] `Uploader` 组件的事件 `success`、`failure`、`remove` 增加参数:当前处理文件的序号。
* [^] `Uploader` 组件在重新上传的时候不再触发 `remove` 事件。
* [^] 将 `Progress` 组件的 `precision` prop 重命名为和 `NumberInput` 一致的 `decimal-place`。`precision` 将在未来版本被移除。
* [^] 增加了 `Select`、`Dropdown`、`Carousel`、`Pagination` 及 `Progress` 等组件的 WAI-ARIA 支持。
### 🐞 问题修复
* [^] 修复了 `Textarea` 触发事件时没有正确处理 `this` 的问题。
* [^] 修复了 `NumberInput` 在只读状态下可以用键盘上下键调整值的问题。
* [^] 修复了 `outside` 指令设置 `delay` 时未清除定时器的问题。
## 1.0.0-alpha.11
Expand Down Expand Up @@ -171,7 +184,7 @@
* [+] 优化 `Column` 组件注册到 `Table` 的逻辑,支持在模板中通过 `v-for`、`v-if` 等动态配置,并且将注册过程移入 `created` 生命周期以支持服务端渲染。
* [^] `Breadcrumb` 组件 `routes` 数据项的文本域重命名为 `label`,保留了 `text` 的用法进行兼容。
* [+] `Uploader` 组件增加 `statuschange` 事件,用于表单提交的时候校验是否还有文件正在上传或上传失败。
* [+] `Uploader` 组件增加 prop `dataType`,用于指明回调的内容的格式。
* [+] `Uploader` 组件增加 prop `data-type`,用于指明回调的内容的格式。
* [+] `Uploader` 组件 prop `name` 现在有默认值 `file`。
* [+] `Field` 组件优化交互式校验规则显示顺序。
* [+] `Field` prop `rules` 校验规则的出错消息支持传入函数。
Expand Down Expand Up @@ -384,7 +397,7 @@
* [^] 修复了 `Table` 组件在选择时会修改未添加 `.sync` 的 `selected` prop 的问题。
* [+] 增加了 `Pager` 每页显示数和默认选项的全局配置。
* [+] 修复了 `Pager` 在没有数据时下一页按钮没有禁用的问题。
* [^] 重命名 `Pager` 的 `pageTotal` prop 为 `total`,旧名称仍然兼容,未来版本可能删除。
* [^] 重命名 `Pager` 的 `page-total` prop 为 `total`,旧名称仍然兼容,未来版本可能删除。
## 0.2.0
Expand Down
34 changes: 28 additions & 6 deletions packages/veui/src/components/Progress.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
<template>
<div class="veui-progress" :class="klass" :ui="ui">
<div
class="veui-progress"
role="progressbar"
:aria-valuemax="max"
:aria-valuemin="min"
:aria-valuenow="value"
:aria-valuetext="desc ? valueText : null"
:class="klass"
:ui="ui">
<div v-if="type === 'bar'" class="veui-progress-rail">
<div class="veui-progress-meter" :style="{
transform: `translateX(${percent}%)`
Expand All @@ -14,11 +22,7 @@
<div v-if="desc" class="veui-progress-desc">
<slot v-bind="{ percent, value, state }">
<veui-icon :name="icons.success" v-if="type === 'circular' && localState === 'success'"/>
<span class="veui-progress-desc-text">
<template v-if="localState === 'success'">完成</template>
<template v-else-if="localState === 'alert'">错误</template>
<template v-else>{{ percent.toFixed(precision) }}%</template>
</span>
<span class="veui-progress-desc-text">{{ valueText }}</span>
</slot>
</div>
</div>
Expand Down Expand Up @@ -48,10 +52,16 @@ export default {
type: Number,
default: 0
},
/**
* @deprecated
*/
precision: {
type: Number,
default: 0
},
decimalPlace: {
type: Number
},
min: {
type: Number,
default: 0
Expand Down Expand Up @@ -98,6 +108,18 @@ export default {
},
halfStroke () {
return this.stroke / 2
},
dm () {
return (this.decimalPlace != null ? this.decimalPlace : this.precision) || 0
},
valueText () {
if (this.localState === 'success') {
return '完成'
} else if (this.localState === 'alert') {
return '错误'
} else {
return this.percent.toFixed(this.decimalPlace) + '%'
}
}
},
watch: {
Expand Down

0 comments on commit 0604f8b

Please sign in to comment.