Merge branch 'dev' of https://github.com/youzan/vant into dev

This commit is contained in:
陈嘉涵 2019-04-25 10:28:23 +08:00
commit 5889968f29
21 changed files with 89 additions and 101 deletions

View File

@ -5,11 +5,13 @@ The following is a set of guidelines for contributing to Vant. Please spend seve
Anyway, these are just guidelines, not rules, use your best judgment and feel free to propose changes to this document in a pull request.
## Opening an Issue
If you think you have found a bug, or have a new feature idea, please start by making sure it hasn't already been reported or fixed. You can search through existing issues and PRs to see if someone has reported one similar to yours.
Next, create a new issue that briefly explains the problem, and provides a bit of background as to the circumstances that triggered it, and steps to reproduce it.
## Submitting a Pull Request
It's welcomed to pull request, And there are some tips about that:
- Before working on a large change, it is best to open an issue first to discuss it with the maintainers.
@ -35,8 +37,3 @@ npm run dev
# open http://localhost:8080
```
## Component Developing Guidelines
- Create new directory under `packages` for a new component.
- Refer to `Sku` for nested components.
- Refer to `Button` for components that depend on other components.

View File

@ -1,39 +1,16 @@
### Before submitting a pull request, please make sure the following is done:
### 提交 PR 前请确保完成以下内容:
1. Fork [the repository](https://github.com/youzan/vant) and create your branch from `dev`.
2. Follow the [contributing guide](./CONTRIBUTING.md) to setup your develop environment.
2. If you've added code that should be tested, add tests!
2. If you've added code that should be tested, add tests.
3. If you've changed APIs, update the documentation.
4. Ensure the test suite passes (`npm test`).
5. Make sure your code lints (`npm run lint`).
6. Describe your pull request.
### 请认真写 PR 的标题,会用于生成 change log。
#### Title Format
#### 标题规则
[bug fix / breaking change / new feature] 组件名字:修改内容描述
[bugfix / new feature / improvement] ComponentNamecontent
说明:
* 前面方括号用来区分 Issue / PR 的 类型bug fix - 改 bugbreaking change: 不兼容的改动new feature新功能
* 修改内容尽可能言简意赅,总结 PR 的改动或者描述 Issue
* 描述请用中文
* 组件名字请用英文,首字母大写
示例:
* [bug fix] Button: 修改颜色
* [breaking change] Loading: 删除 `static` 属性
* [new feature] Form: 增加 `FormSelection` 支持
* [new feature] 新增 Abc 组件
### Please remove the above lines when you submit this pull request, also please fill in the changes you've made in this pull request.
### 提交 PR 前 请把以上内容删除,并填写以下内容。
Fixes #xx(issue number here), remove this line if no related issue.
Changes you made in this pull request:
- some change
- another change
Example
* [bugfix] Button: color prop not work
* [new feature] Button: add color prop
* [improvement] Button: optimize performance

View File

@ -141,4 +141,4 @@ Scan the qrcode to join our wechat discussion group, please note that you want t
## LICENSE
[MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89)
[MIT](https://en.wikipedia.org/wiki/MIT_License)

View File

@ -103,11 +103,11 @@ export default {
#### 5. API 说明
组件的 API 说明,请以表格的形式书写,表格包含以下列:
组件的 API 说明以表格的形式书写,表格包含以下列:
| 参数 | 说明 | 类型 | 默认值 |
| ------------ | ------------- | -------- | ---------- |
| visible | 是否可见 | bool | `false` |
| visible | 是否可见 | `Boolean` | `false` |
#### 6. Event 说明
@ -116,29 +116,3 @@ export default {
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| click | 点击按钮时触发 | event事件对象 |
### 实用技巧
#### 组件互相引用
比如说 `Dialog` 里面引用了 `Button` 组件,直接写相对路径引用即可。
```js
import Button from '../button';
```
#### 组件创建
Vant 中的组件会通过 `create` 方法统一创建,`create` 方法会在选项文件中注入基本的依赖和方法。
```js
import create from '../utils/create';
export default create({
name: 'button'
});
```
#### 样式
组件样式使用 `precss 3.0` 作为预处理器,具体语法请参考 [precss 文档](https://github.com/jonathantneal/precss).

View File

@ -59,7 +59,7 @@
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.4.3",
"@vant/icons": "1.1.5",
"@vant/icons": "1.1.6",
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0-beta.3",
"vue-lazyload": "1.2.3"
},

View File

@ -1,4 +1,4 @@
import { use, isObj, isDef } from '../utils';
import { use, isObj, isDef, isIOS } from '../utils';
import Icon from '../icon';
import Cell from '../cell';
import { cellProps } from '../cell/shared';
@ -102,6 +102,13 @@ export default sfc({
onBlur(event) {
this.focused = false;
this.$emit('blur', event);
// Hack for iOS12 page scroll
// https://developers.weixin.qq.com/community/develop/doc/00044ae90742f8c82fb78fcae56800
/* istanbul ignore next */
if (isIOS()) {
window.scrollTo(0, window.pageYOffset);
}
},
onClickLeftIcon() {

View File

@ -85,3 +85,9 @@ export default {
| blur | Triggered when click close button or blur keyboard | - |
| show | Triggered when keyboard is fully displayed. | - |
| hide | Triggered when keyboard is fully hidden. | - |
### Slot
| name | Description |
|------|------|
| title-left | Custom title left content |

View File

@ -133,8 +133,11 @@ export default sfc({
},
render(h) {
const { theme, onPress, closeButtonText } = this;
const { title, theme, onPress, closeButtonText } = this;
const titleLeftSlot = this.slots('title-left');
const showTitleClose = closeButtonText && theme === 'default';
const showTitle = title || showTitleClose || titleLeftSlot;
return (
<transition name={this.transition ? 'van-slide-up' : ''}>
@ -146,9 +149,14 @@ export default sfc({
onAnimationend={this.onAnimationEnd}
onWebkitAnimationEnd={this.onAnimationEnd}
>
{(this.title || showTitleClose) && (
{showTitle && (
<div class={[bem('title'), 'van-hairline--top']}>
<span>{this.title}</span>
{titleLeftSlot && (
<span class={bem('title-left')}>
{titleLeftSlot}
</span>
)}
{title && <span>{title}</span>}
{showTitleClose && (
<span class={bem('close')} onClick={this.onClose}>
{closeButtonText}

View File

@ -16,6 +16,11 @@
text-align: center;
position: relative;
color: @gray-darker;
&-left {
left: 0;
position: absolute;
}
}
&__body {

View File

@ -6,7 +6,7 @@ exports[`renders demo correctly 1`] = `
弹出默认键盘
</span></button>
<div name="van-slide-up" class="van-number-keyboard van-number-keyboard--default" style="z-index:100;">
<div class="van-number-keyboard__title van-hairline--top"><span></span><span class="van-number-keyboard__close">完成</span></div>
<div class="van-number-keyboard__title van-hairline--top"><span class="van-number-keyboard__close">完成</span></div>
<div class="van-number-keyboard__body"><i class="van-hairline van-key">1</i><i class="van-hairline van-key">2</i><i class="van-hairline van-key">3</i><i class="van-hairline van-key">4</i><i class="van-hairline van-key">5</i><i class="van-hairline van-key">6</i><i class="van-hairline van-key">7</i><i class="van-hairline van-key">8</i><i class="van-hairline van-key">9</i><i class="van-hairline van-key van-key--gray">.</i><i class="van-hairline van-key">0</i><i class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
</div>
</div>

View File

@ -0,0 +1,8 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`title-left slot 1`] = `
<div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100;" name="van-slide-up">
<div class="van-number-keyboard__title van-hairline--top"><span class="van-number-keyboard__title-left">Custom Title Left</span></div>
<div class="van-number-keyboard__body"><i class="van-hairline van-key">1</i><i class="van-hairline van-key">2</i><i class="van-hairline van-key">3</i><i class="van-hairline van-key">4</i><i class="van-hairline van-key">5</i><i class="van-hairline van-key">6</i><i class="van-hairline van-key">7</i><i class="van-hairline van-key">8</i><i class="van-hairline van-key">9</i><i class="van-hairline van-key van-key--gray"></i><i class="van-hairline van-key">0</i><i class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
</div>
`;

View File

@ -83,3 +83,19 @@ test('listen to show event when no transtion', () => {
expect(wrapper.emitted('show')).toBeTruthy();
expect(wrapper.emitted('hide')).toBeTruthy();
});
test('title-left slot', () => {
const wrapper = mount({
template: `
<number-keyboard show>
<template v-slot:title-left>Custom Title Left</template>
</number-keyboard>
`
}, {
components: {
NumberKeyboard
}
});
expect(wrapper).toMatchSnapshot();
});

View File

@ -85,3 +85,9 @@ export default {
| blur | 点击关闭按钮或非键盘区域时触发 | - |
| show | 键盘完全弹出时触发 | - |
| hide | 键盘完全收起时触发 | - |
### Slot
| 名称 | 说明 |
|------|------|
| title-left | 自定义标题栏左侧内容 |

View File

@ -38,7 +38,6 @@ Vue.use(Panel);
| desc | Description | `String` | - |
| status | Status | `String` | - |
### Slot
| name | Description |

View File

@ -36,6 +36,6 @@
}
&--align-bottom {
align-items: bottom;
align-items: flex-end;
}
}

View File

@ -1,4 +1,4 @@
import { use, isIOS } from '../../utils';
import { use } from '../../utils';
import Cell from '../../cell';
import CellGroup from '../../cell-group';
import Field from '../../field';
@ -118,15 +118,6 @@ export default sfc({
}
}
}
},
onBlur() {
// 修复 ios12 键盘弹起后点击错位的问题
// https://developers.weixin.qq.com/community/develop/doc/00044ae90742f8c82fb78fcae56800
/* istanbul ignore next */
if (isIOS()) {
window.scrollTo(0, 0);
}
}
},
@ -156,7 +147,6 @@ export default sfc({
required={String(message.required) === '1'}
placeholder={this.getPlaceholder(message)}
type={this.getType(message)}
onBlur={this.onBlur}
/>
)))}
</CellGroup>

View File

@ -48,12 +48,13 @@ export default sfc({
const total = this.vertical ? rect.height : rect.width;
const diff = (delta / total) * 100;
this.updateValue(this.startValue + diff);
this.newValue = this.startValue + diff;
this.updateValue(this.newValue);
},
onTouchEnd() {
if (this.disabled) return;
this.updateValue(this.value, true);
this.updateValue(this.newValue, true);
},
onClick(event) {

View File

@ -43,7 +43,9 @@ export default sfc({
{status !== 'process' ? (
<i class={bem('circle')} />
) : (
<Icon name={activeIcon} style={{ color: activeColor }} />
this.slots('active-icon') || (
<Icon name={activeIcon} style={{ color: activeColor }} />
)
)}
</div>
<div class={bem('line')} />

View File

@ -69,17 +69,13 @@ export default {
| Attribute | Description | Type | Default |
|------|------|------|------|
| active | Active step | `Number` | 0 |
| icon | Action step icon | `String` | - |
| icon-class | Icon class | `String` | - |
| title | Title | `String` | - |
| description | Description | `String` | - |
| direction | Can be set to `vertical` | `String` | `horizontal` |
| active-icon | Active icon name | `String` | `checked` |
| active-color | Active step color | `String` | `#07c160` |
### Steps Slot
### Step Slot
| Name | Description |
|------|------|
| icon | Custom icon |
| message-extra | Extra content |

View File

@ -74,16 +74,12 @@ export default {
|------|------|------|------|------|
| active | 当前步骤 | `Number` | 0 | - |
| title | 顶部描述栏标题 | `String` | - | - |
| description | 顶部描述栏文字 | `String` | - | - |
| icon | 顶部描述栏图标 | `String` | - | - |
| icon-class | 顶部描述栏图标额外类名 | `String` | - | - |
| direction | 显示方向,可选值为 `vertical` | `String` | `horizontal` | - |
| active-icon | 激活状态底部图标,可选值见 Icon 组件 | `String` | `checked` | 1.6.9 |
| active-color | 激活状态颜色 | `String` | `#07c160` | - |
### Steps Slot
### Step Slot
| 名称 | 说明 |
|------|------|
| icon | 自定义icon区域 |
| message-extra | 状态栏添加额外的元素 |
| active-icon | 自定义激活状态图标 |

View File

@ -1123,10 +1123,10 @@
eslint-plugin-import "^2.16.0"
eslint-plugin-vue "^5.2.1"
"@vant/icons@1.1.5":
version "1.1.5"
resolved "https://registry.yarnpkg.com/@vant/icons/-/icons-1.1.5.tgz#632e41138eca6482a65c3c9289bb78e55d1162a7"
integrity sha512-LfWD0RG8FuquHg6vMGZLoYWPJCb3W4mBt+fbgwGYgPPFLsFL7mNP3Hh13Dp7oYDpK7qkYYsyR/Tu/qTTzUWt6w==
"@vant/icons@1.1.6":
version "1.1.6"
resolved "https://registry.yarnpkg.com/@vant/icons/-/icons-1.1.6.tgz#6714656ca69d303936020a6b483e1ebaf5f0b1e8"
integrity sha512-gpdk+rPsbwjI23QmEnNumYVxwNgvgKKh1dBmkkcXPTlRDtsfrCE02FQn3CVijOdwTovUo4zGUCDKKMLyxl+hPA==
"@vant/markdown-loader@^1.0.3":
version "1.0.3"