blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

chore: add trailingComma

Browse Source
This commit is contained in:
陈嘉涵 2020-01-19 11:57:09 +08:00
parent e841175fe8
commit 389d68884d
269 changed files with 2706 additions and 2702 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
babel.config.js
View File

@ -1,3 +1,3 @@
module.exports = { module.exports = {
presets: ['@vant/cli/preset'] presets: ['@vant/cli/preset'],
}; };

18
src/action-sheet/demo/index.vue
View File

@ -53,7 +53,7 @@ export default {
showTitle: '展示标题栏', showTitle: '展示标题栏',
showCancel: '展示取消按钮', showCancel: '展示取消按钮',
showDescription: '展示描述信息', showDescription: '展示描述信息',
description: '这是一段描述信息' description: '这是一段描述信息',
}, },
'en-US': { 'en-US': {
buttonText: 'Show ActionSheet', buttonText: 'Show ActionSheet',
@ -63,8 +63,8 @@ export default {
showTitle: 'ActionSheet with title', showTitle: 'ActionSheet with title',
showCancel: 'ActionSheet with cancel button', showCancel: 'ActionSheet with cancel button',
showDescription: 'ActionSheet with description', showDescription: 'ActionSheet with description',
description: 'Description' description: 'Description',
} },
}, },
data() { data() {
@ -73,7 +73,7 @@ export default {
show2: false, show2: false,
show3: false, show3: false,
show4: false, show4: false,
show5: false show5: false,
}; };
}, },
@ -82,7 +82,7 @@ export default {
return [ return [
{ name: this.$t('option') }, { name: this.$t('option') },
{ name: this.$t('option') }, { name: this.$t('option') },
{ name: this.$t('option'), subname: this.$t('subname') } { name: this.$t('option'), subname: this.$t('subname') },
]; ];
}, },
@ -90,9 +90,9 @@ export default {
return [ return [
{ name: this.$t('option'), color: GREEN }, { name: this.$t('option'), color: GREEN },
{ loading: true }, { loading: true },
{ name: this.$t('disabledOption'), disabled: true } { name: this.$t('disabledOption'), disabled: true },
]; ];
} },
}, },
methods: { methods: {
@ -103,8 +103,8 @@ export default {
onCancel() { onCancel() {
this.$toast('cancel'); this.$toast('cancel');
} },
} },
}; };
</script> </script>

14
src/action-sheet/index.tsx
View File

@ -97,7 +97,7 @@ function ActionSheet(
return [ return [
<span class={bem('name')}>{item.name}</span>, <span class={bem('name')}>{item.name}</span>,
item.subname && <span class={bem('subname')}>{item.subname}</span> item.subname && <span class={bem('subname')}>{item.subname}</span>,
]; ];
} }
@ -162,24 +162,24 @@ ActionSheet.props = {
closeOnClickAction: Boolean, closeOnClickAction: Boolean,
round: { round: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
closeIcon: { closeIcon: {
type: String, type: String,
default: 'cross' default: 'cross',
}, },
safeAreaInsetBottom: { safeAreaInsetBottom: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
overlay: { overlay: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
closeOnClickOverlay: { closeOnClickOverlay: {
type: Boolean, type: Boolean,
default: true default: true,
} },
}; };
export default createComponent<ActionSheetProps>(ActionSheet); export default createComponent<ActionSheetProps>(ActionSheet);

56
src/action-sheet/test/index.spec.js
View File

@ -18,15 +18,15 @@ test('callback events', () => {
propsData: { propsData: {
value: true, value: true,
actions, actions,
cancelText: 'Cancel' cancelText: 'Cancel',
}, },
context: { context: {
on: { on: {
input: onInput, input: onInput,
cancel: onCancel, cancel: onCancel,
select: onSelect select: onSelect,
} },
} },
}); });
const options = wrapper.findAll('.van-action-sheet__item'); const options = wrapper.findAll('.van-action-sheet__item');
@ -58,17 +58,17 @@ test('click overlay and close', async () => {
</div> </div>
`, `,
components: { components: {
ActionSheet ActionSheet,
}, },
data() { data() {
return { return {
getContainer: () => div getContainer: () => div,
}; };
}, },
methods: { methods: {
onInput, onInput,
onClickOverlay onClickOverlay,
} },
}); });
await later(); await later();
@ -84,10 +84,10 @@ test('disable lazy-render', () => {
lazyRender: false, lazyRender: false,
actions: [ actions: [
{ name: 'Option' }, { name: 'Option' },
{ name: 'Option' } { name: 'Option' },
], ],
cancelText: 'Cancel' cancelText: 'Cancel',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -97,13 +97,13 @@ test('render title and default slot', () => {
const wrapper = mount(ActionSheet, { const wrapper = mount(ActionSheet, {
propsData: { propsData: {
value: true, value: true,
title: 'Title' title: 'Title',
}, },
scopedSlots: { scopedSlots: {
default() { default() {
return 'Default'; return 'Default';
} },
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -113,8 +113,8 @@ test('get container', () => {
const wrapper = mount(ActionSheet, { const wrapper = mount(ActionSheet, {
propsData: { propsData: {
value: true, value: true,
getContainer: 'body' getContainer: 'body',
} },
}); });
expect(wrapper.vm.$el.parentNode).toEqual(document.body); expect(wrapper.vm.$el.parentNode).toEqual(document.body);
@ -126,13 +126,13 @@ test('close-on-click-action prop', () => {
propsData: { propsData: {
value: true, value: true,
actions: [{ name: 'Option' }], actions: [{ name: 'Option' }],
closeOnClickAction: true closeOnClickAction: true,
}, },
context: { context: {
on: { on: {
input: onInput input: onInput,
} },
} },
}); });
const option = wrapper.find('.van-action-sheet__item'); const option = wrapper.find('.van-action-sheet__item');
@ -146,8 +146,8 @@ test('round prop', () => {
propsData: { propsData: {
value: true, value: true,
round: true, round: true,
actions: [{ name: 'Option' }] actions: [{ name: 'Option' }],
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -157,8 +157,8 @@ test('color option', () => {
const wrapper = mount(ActionSheet, { const wrapper = mount(ActionSheet, {
propsData: { propsData: {
value: true, value: true,
actions: [{ name: 'Option', color: 'red' }] actions: [{ name: 'Option', color: 'red' }],
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -169,8 +169,8 @@ test('description prop', () => {
propsData: { propsData: {
value: true, value: true,
description: 'This is a description', description: 'This is a description',
actions: [{ name: 'Option' }] actions: [{ name: 'Option' }],
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -181,8 +181,8 @@ test('close-icon prop', () => {
propsData: { propsData: {
value: true, value: true,
title: 'Title', title: 'Title',
closeIcon: 'cross' closeIcon: 'cross',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();

10
src/address-edit/Detail.js
View File

@ -14,13 +14,13 @@ export default createComponent({
detailRows: Number, detailRows: Number,
searchResult: Array, searchResult: Array,
detailMaxlength: Number, detailMaxlength: Number,
showSearchResult: Boolean showSearchResult: Boolean,
}, },
computed: { computed: {
shouldShowSearchResult() { shouldShowSearchResult() {
return this.focused && this.searchResult && this.showSearchResult; return this.focused && this.searchResult && this.showSearchResult;
} },
}, },
methods: { methods: {
@ -71,12 +71,12 @@ export default createComponent({
return <div domPropsInnerHTML={text} />; return <div domPropsInnerHTML={text} />;
} }
} },
}} }}
/> />
)); ));
} }
} },
}, },
render() { render() {
@ -100,5 +100,5 @@ export default createComponent({
{this.genSearchResult()} {this.genSearchResult()}
</Cell> </Cell>
); );
} },
}); });

24
src/address-edit/demo/index.vue
View File

@ -26,32 +26,32 @@ export default {
areaColumnsPlaceholder: ['请选择', '请选择', '请选择'], areaColumnsPlaceholder: ['请选择', '请选择', '请选择'],
searchResult: [{ searchResult: [{
name: '黄龙万科中心', name: '黄龙万科中心',
address: '杭州市西湖区' address: '杭州市西湖区',
}, { }, {
name: '黄龙万科中心G座' name: '黄龙万科中心G座',
}, { }, {
name: '黄龙万科中心H座', name: '黄龙万科中心H座',
address: '杭州市西湖区' address: '杭州市西湖区',
}] }],
}, },
'en-US': { 'en-US': {
areaColumnsPlaceholder: ['Choose', 'Choose', 'Choose'], areaColumnsPlaceholder: ['Choose', 'Choose', 'Choose'],
searchResult: [{ searchResult: [{
name: 'Name1', name: 'Name1',
address: 'Address' address: 'Address',
}, { }, {
name: 'Name2' name: 'Name2',
}, { }, {
name: 'Name3', name: 'Name3',
address: 'Address' address: 'Address',
}] }],
} },
}, },
data() { data() {
return { return {
areaList, areaList,
searchResult: [] searchResult: [],
}; };
}, },
@ -66,8 +66,8 @@ export default {
onChangeDetail(val) { onChangeDetail(val) {
this.searchResult = val ? this.$t('searchResult') : []; this.searchResult = val ? this.$t('searchResult') : [];
} },
} },
}; };
</script> </script>

38
src/address-edit/index.js
View File

@ -21,7 +21,7 @@ const defaultData = {
areaCode: '', areaCode: '',
postalCode: '', postalCode: '',
addressDetail: '', addressDetail: '',
isDefault: false isDefault: false,
}; };
function isPostal(value) { function isPostal(value) {
@ -43,36 +43,36 @@ export default createComponent({
deleteButtonText: String, deleteButtonText: String,
showArea: { showArea: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
showDetail: { showDetail: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
detailRows: { detailRows: {
type: Number, type: Number,
default: 1 default: 1,
}, },
detailMaxlength: { detailMaxlength: {
type: Number, type: Number,
default: 200 default: 200,
}, },
addressInfo: { addressInfo: {
type: Object, type: Object,
default: () => ({ ...defaultData }) default: () => ({ ...defaultData }),
}, },
telValidator: { telValidator: {
type: Function, type: Function,
default: isMobile default: isMobile,
}, },
postalValidator: { postalValidator: {
type: Function, type: Function,
default: isPostal default: isPostal,
}, },
areaColumnsPlaceholder: { areaColumnsPlaceholder: {
type: Array, type: Array,
default: () => [] default: () => [],
} },
}, },
data() { data() {
@ -85,8 +85,8 @@ export default createComponent({
name: '', name: '',
areaCode: '', areaCode: '',
postalCode: '', postalCode: '',
addressDetail: '' addressDetail: '',
} },
}; };
}, },
@ -105,7 +105,7 @@ export default createComponent({
return arr.filter(text => text).join('/'); return arr.filter(text => text).join('/');
} }
return ''; return '';
} },
}, },
watch: { watch: {
@ -113,18 +113,18 @@ export default createComponent({
handler(val) { handler(val) {
this.data = { this.data = {
...defaultData, ...defaultData,
...val ...val,
}; };
this.setAreaCode(val.areaCode); this.setAreaCode(val.areaCode);
}, },
deep: true, deep: true,
immediate: true immediate: true,
}, },
areaList() { areaList() {
this.setAreaCode(this.data.areaCode); this.setAreaCode(this.data.areaCode);
} },
}, },
methods: { methods: {
@ -209,7 +209,7 @@ export default createComponent({
onDelete() { onDelete() {
Dialog.confirm({ Dialog.confirm({
title: t('confirmDelete') title: t('confirmDelete'),
}) })
.then(() => { .then(() => {
this.$emit('delete', this.data); this.$emit('delete', this.data);
@ -243,7 +243,7 @@ export default createComponent({
setTimeout(() => { setTimeout(() => {
this.detailFocused = false; this.detailFocused = false;
}); });
} },
}, },
render() { render() {
@ -368,5 +368,5 @@ export default createComponent({
</Popup> </Popup>
</div> </div>
); );
} },
}); });

40
src/address-edit/test/index.spec.js
View File

@ -11,7 +11,7 @@ const addressInfo = {
addressDetail: '详细地址', addressDetail: '详细地址',
areaCode: '110101', areaCode: '110101',
postalCode: '10000', postalCode: '10000',
isDefault: true isDefault: true,
}; };
const createComponent = () => { const createComponent = () => {
@ -20,8 +20,8 @@ const createComponent = () => {
areaList, areaList,
addressInfo, addressInfo,
showPostal: true, showPostal: true,
showSetDefault: true showSetDefault: true,
} },
}); });
const button = wrapper.find('.van-button'); const button = wrapper.find('.van-button');
@ -33,7 +33,7 @@ const createComponent = () => {
field, field,
button, button,
wrapper, wrapper,
errorInfo errorInfo,
}; };
}; };
@ -48,8 +48,8 @@ test('create a AddressEdit with props', () => {
addressInfo, addressInfo,
showPostal: true, showPostal: true,
showSetDefault: true, showSetDefault: true,
showSearchResult: true showSearchResult: true,
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -60,7 +60,7 @@ test('valid area placeholder confirm', async () => {
propsData: { propsData: {
areaList, areaList,
areaColumnsPlaceholder: ['请选择', '请选择', '请选择'], areaColumnsPlaceholder: ['请选择', '请选择', '请选择'],
} },
}); });
const { data } = wrapper.vm; const { data } = wrapper.vm;
@ -100,8 +100,8 @@ test('validator props', async () => {
areaList, areaList,
validator(key, value) { validator(key, value) {
return `${key}${value}`; return `${key}${value}`;
} },
} },
}); });
const { errorInfo, data } = wrapper.vm; const { errorInfo, data } = wrapper.vm;
@ -192,13 +192,13 @@ test('watch address info', () => {
test('set/get area code', async () => { test('set/get area code', async () => {
const wrapper = mount(AddressEdit, { const wrapper = mount(AddressEdit, {
propsData: { areaList } propsData: { areaList },
}); });
expect(wrapper.vm.getArea()).toEqual([ expect(wrapper.vm.getArea()).toEqual([
{ code: '110000', name: '北京市' }, { code: '110000', name: '北京市' },
{ code: '110100', name: '北京市' }, { code: '110100', name: '北京市' },
{ code: '110101', name: '东城区' } { code: '110101', name: '东城区' },
]); ]);
wrapper.vm.setAreaCode('110102'); wrapper.vm.setAreaCode('110102');
@ -208,7 +208,7 @@ test('set/get area code', async () => {
expect(wrapper.vm.getArea()).toEqual([ expect(wrapper.vm.getArea()).toEqual([
{ code: '110000', name: '北京市' }, { code: '110000', name: '北京市' },
{ code: '110100', name: '北京市' }, { code: '110100', name: '北京市' },
{ code: '110102', name: '西城区' } { code: '110102', name: '西城区' },
]); ]);
wrapper.vm.$refs = []; wrapper.vm.$refs = [];
@ -221,9 +221,9 @@ test('watch area code', async () => {
propsData: { propsData: {
areaList: {}, areaList: {},
addressInfo: { addressInfo: {
areaCode: '110101' areaCode: '110101',
} },
} },
}); });
expect(wrapper.vm.data.city).toEqual(''); expect(wrapper.vm.data.city).toEqual('');
@ -240,9 +240,9 @@ test('show search result', async () => {
searchResult: [ searchResult: [
{ name: 'name1', address: 'address1' }, { name: 'name1', address: 'address1' },
{ name: 'name2' }, { name: 'name2' },
{ address: 'address2' } { address: 'address2' },
] ],
} },
}); });
const field = wrapper.findAll('.van-field__control').at(3); const field = wrapper.findAll('.van-field__control').at(3);
@ -266,8 +266,8 @@ test('delete address', async () => {
const wrapper = mount(AddressEdit, { const wrapper = mount(AddressEdit, {
attachToDocument: true, attachToDocument: true,
propsData: { propsData: {
showDelete: true showDelete: true,
} },
}); });
const deleteButton = wrapper.findAll('.van-button').at(1); const deleteButton = wrapper.findAll('.van-button').at(1);

6
src/address-list/Item.tsx
View File

@ -77,7 +77,7 @@ function AddressItem(
{`${data.name} ${data.tel}`} {`${data.name} ${data.tel}`}
{genTag()} {genTag()}
</div>, </div>,
<div class={bem('address')}>{data.address}</div> <div class={bem('address')}>{data.address}</div>,
]; ];
if (switchable && !disabled) { if (switchable && !disabled) {
@ -99,7 +99,7 @@ function AddressItem(
clickable={switchable && !disabled} clickable={switchable && !disabled}
scopedSlots={{ scopedSlots={{
default: genContent, default: genContent,
'right-icon': genRightIcon 'right-icon': genRightIcon,
}} }}
onClick={onClick} onClick={onClick}
{...inherit(ctx)} {...inherit(ctx)}
@ -111,7 +111,7 @@ AddressItem.props = {
data: Object, data: Object,
disabled: Boolean, disabled: Boolean,
switchable: Boolean, switchable: Boolean,
defaultTagText: String defaultTagText: String,
}; };
export default createComponent<AddressItemProps, AddressItemEvents>( export default createComponent<AddressItemProps, AddressItemEvents>(

32
src/address-list/demo/index.vue
View File

@ -24,27 +24,27 @@ export default {
name: '张三', name: '张三',
tel: '13000000000', tel: '13000000000',
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室', address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
isDefault: true isDefault: true,
}, },
{ {
id: '2', id: '2',
name: '李四', name: '李四',
tel: '1310000000', tel: '1310000000',
address: '浙江省杭州市拱墅区莫干山路 50 号' address: '浙江省杭州市拱墅区莫干山路 50 号',
} },
], ],
disabledList: [ disabledList: [
{ {
id: '3', id: '3',
name: '王五', name: '王五',
tel: '1320000000', tel: '1320000000',
address: '浙江省杭州市滨江区江南大道 15 号' address: '浙江省杭州市滨江区江南大道 15 号',
} },
], ],
add: '新增地址', add: '新增地址',
edit: '编辑地址', edit: '编辑地址',
disabledText: '以下地址超出配送范围', disabledText: '以下地址超出配送范围',
defaultTagText: '默认' defaultTagText: '默认',
}, },
'en-US': { 'en-US': {
list: [ list: [
@ -53,33 +53,33 @@ export default {
name: 'John Snow', name: 'John Snow',
tel: '13000000000', tel: '13000000000',
address: 'Somewhere', address: 'Somewhere',
isDefault: true isDefault: true,
}, },
{ {
id: '2', id: '2',
name: 'Ned Stark', name: 'Ned Stark',
tel: '1310000000', tel: '1310000000',
address: 'Somewhere' address: 'Somewhere',
} },
], ],
disabledList: [ disabledList: [
{ {
id: '3', id: '3',
name: 'Tywin', name: 'Tywin',
tel: '1320000000', tel: '1320000000',
address: 'Somewhere' address: 'Somewhere',
} },
], ],
add: 'Add', add: 'Add',
edit: 'Edit', edit: 'Edit',
disabledText: 'The following address is out of range', disabledText: 'The following address is out of range',
defaultTagText: 'Default' defaultTagText: 'Default',
} },
}, },
data() { data() {
return { return {
chosenAddressId: '1' chosenAddressId: '1',
}; };
}, },
@ -90,8 +90,8 @@ export default {
onEdit(item, index) { onEdit(item, index) {
this.$toast(`${this.$t('edit')}:${index}`); this.$toast(`${this.$t('edit')}:${index}`);
} },
} },
}; };
</script> </script>

4
src/address-list/index.tsx
View File

@ -94,8 +94,8 @@ AddressList.props = {
defaultTagText: String, defaultTagText: String,
switchable: { switchable: {
type: Boolean, type: Boolean,
default: true default: true,
} },
}; };
export default createComponent<AddressListProps>(AddressList); export default createComponent<AddressListProps>(AddressList);

26
src/address-list/test/index.spec.js
View File

@ -6,22 +6,22 @@ const list = [
id: '1', id: '1',
name: '张三', name: '张三',
tel: '13000000000', tel: '13000000000',
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室' address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
}, },
{ {
id: '2', id: '2',
name: '李四', name: '李四',
tel: '1310000000', tel: '1310000000',
address: '浙江省杭州市拱墅区莫干山路 50 号' address: '浙江省杭州市拱墅区莫干山路 50 号',
} },
]; ];
test('unswitchable', () => { test('unswitchable', () => {
const wrapper = mount(AddressList, { const wrapper = mount(AddressList, {
propsData: { propsData: {
list, list,
switchable: false switchable: false,
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -31,13 +31,13 @@ test('select event', () => {
const onSelect = jest.fn(); const onSelect = jest.fn();
const wrapper = mount(AddressList, { const wrapper = mount(AddressList, {
propsData: { propsData: {
list list,
}, },
context: { context: {
on: { on: {
select: onSelect select: onSelect,
} },
} },
}); });
wrapper.find('.van-radio__icon').trigger('click'); wrapper.find('.van-radio__icon').trigger('click');
@ -49,13 +49,13 @@ test('click-item event', () => {
const onClickItem = jest.fn(); const onClickItem = jest.fn();
const wrapper = mount(AddressList, { const wrapper = mount(AddressList, {
propsData: { propsData: {
list list,
}, },
context: { context: {
on: { on: {
'click-item': onClickItem 'click-item': onClickItem,
} },
} },
}); });
wrapper.find('.van-address-item').trigger('click'); wrapper.find('.van-address-item').trigger('click');

8
src/area/demo/area-en.js
View File

@ -2,7 +2,7 @@ export default {
province_list: { province_list: {
110000: 'Beijing', 110000: 'Beijing',
330000: 'Zhejiang', 330000: 'Zhejiang',
810000: 'Hong Kong' 810000: 'Hong Kong',
}, },
city_list: { city_list: {
110100: 'Beijing City', 110100: 'Beijing City',
@ -13,7 +13,7 @@ export default {
331100: 'Lishui', 331100: 'Lishui',
810100: 'Hong Kong Island', 810100: 'Hong Kong Island',
810200: 'Kowloon', 810200: 'Kowloon',
810300: 'New Territories' 810300: 'New Territories',
}, },
county_list: { county_list: {
110101: 'Dongcheng', 110101: 'Dongcheng',
@ -66,6 +66,6 @@ export default {
810305: 'Yuen Long', 810305: 'Yuen Long',
810306: 'Tuen Mun', 810306: 'Tuen Mun',
810307: 'Tsuen Wan', 810307: 'Tsuen Wan',
810309: 'Lantau Island' 810309: 'Lantau Island',
} },
}; };

8
src/area/demo/area.js
View File

@ -34,7 +34,7 @@ export default {
710000: '台湾省', 710000: '台湾省',
810000: '香港特别行政区', 810000: '香港特别行政区',
820000: '澳门特别行政区', 820000: '澳门特别行政区',
900000: '海外' 900000: '海外',
}, },
city_list: { city_list: {
110100: '北京市', 110100: '北京市',
@ -648,7 +648,7 @@ export default {
987600: '瓦利斯和富图纳', 987600: '瓦利斯和富图纳',
988200: '萨摩亚', 988200: '萨摩亚',
988700: '也门', 988700: '也门',
989400: '赞比亚' 989400: '赞比亚',
}, },
county_list: { county_list: {
110101: '东城区', 110101: '东城区',
@ -4035,6 +4035,6 @@ export default {
810308: '葵青区', 810308: '葵青区',
810309: '离岛区', 810309: '离岛区',
820101: '澳门半岛', 820101: '澳门半岛',
820201: '离岛' 820201: '离岛',
} },
}; };

8
src/area/demo/area.simple.js
View File

@ -1,13 +1,13 @@
export default { export default {
province_list: { province_list: {
110000: '北京市', 110000: '北京市',
120000: '天津市' 120000: '天津市',
}, },
city_list: { city_list: {
110100: '北京市', 110100: '北京市',
110200: '县', 110200: '县',
120100: '天津市', 120100: '天津市',
120200: '县' 120200: '县',
}, },
county_list: { county_list: {
110101: '东城区', 110101: '东城区',
@ -16,6 +16,6 @@ export default {
110229: '延庆县', 110229: '延庆县',
120101: '和平区', 120101: '和平区',
120102: '河东区', 120102: '河东区',
120225: '蓟县' 120225: '蓟县',
} },
}; };

6
src/area/demo/index.vue
View File

@ -48,13 +48,13 @@ export default {
title4: 'Columns Placeholder', title4: 'Columns Placeholder',
columnsPlaceholder: ['Choose', 'Choose', 'Choose'], columnsPlaceholder: ['Choose', 'Choose', 'Choose'],
areaList: AreaListEn, areaList: AreaListEn,
} },
}, },
data() { data() {
return { return {
value: '330302' value: '330302',
}; };
} },
}; };
</script> </script>

34
src/area/index.js
View File

@ -16,26 +16,26 @@ export default createComponent({
value: String, value: String,
areaList: { areaList: {
type: Object, type: Object,
default: () => ({}) default: () => ({}),
}, },
columnsNum: { columnsNum: {
type: [Number, String], type: [Number, String],
default: 3 default: 3,
}, },
isOverseaCode: { isOverseaCode: {
type: Function, type: Function,
default: isOverseaCode default: isOverseaCode,
}, },
columnsPlaceholder: { columnsPlaceholder: {
type: Array, type: Array,
default: () => [] default: () => [],
} },
}, },
data() { data() {
return { return {
code: this.value, code: this.value,
columns: [{ values: [] }, { values: [] }, { values: [] }] columns: [{ values: [] }, { values: [] }, { values: [] }],
}; };
}, },
@ -60,9 +60,9 @@ export default createComponent({
return { return {
province: this.columnsPlaceholder[0] || '', province: this.columnsPlaceholder[0] || '',
city: this.columnsPlaceholder[1] || '', city: this.columnsPlaceholder[1] || '',
county: this.columnsPlaceholder[2] || '' county: this.columnsPlaceholder[2] || '',
}; };
} },
}, },
watch: { watch: {
@ -73,14 +73,14 @@ export default createComponent({
areaList: { areaList: {
deep: true, deep: true,
handler: 'setValues' handler: 'setValues',
}, },
columnsNum() { columnsNum() {
this.$nextTick(() => { this.$nextTick(() => {
this.setValues(); this.setValues();
}); });
} },
}, },
mounted() { mounted() {
@ -98,7 +98,7 @@ export default createComponent({
const list = this[type]; const list = this[type];
result = Object.keys(list).map(listCode => ({ result = Object.keys(list).map(listCode => ({
code: listCode, code: listCode,
name: list[listCode] name: list[listCode],
})); }));
if (code) { if (code) {
@ -121,7 +121,7 @@ export default createComponent({
result.unshift({ result.unshift({
code: `${code}${codeFill}`, code: `${code}${codeFill}`,
name: this.placeholderMap[type] name: this.placeholderMap[type],
}); });
} }
@ -218,7 +218,7 @@ export default createComponent({
picker.setIndexes([ picker.setIndexes([
this.getIndex('province', code), this.getIndex('province', code),
this.getIndex('city', code), this.getIndex('city', code),
this.getIndex('county', code) this.getIndex('county', code),
]); ]);
}, },
@ -236,7 +236,7 @@ export default createComponent({
country: '', country: '',
province: '', province: '',
city: '', city: '',
county: '' county: '',
}; };
if (!values.length) { if (!values.length) {
@ -266,14 +266,14 @@ export default createComponent({
reset(code) { reset(code) {
this.code = code || ''; this.code = code || '';
this.setValues(); this.setValues();
} },
}, },
render() { render() {
const on = { const on = {
...this.$listeners, ...this.$listeners,
change: this.onChange, change: this.onChange,
confirm: this.onConfirm confirm: this.onConfirm,
}; };
return ( return (
@ -293,5 +293,5 @@ export default createComponent({
{...{ on }} {...{ on }}
/> />
); );
} },
}); });

36
src/area/test/index.spec.js
View File

@ -5,13 +5,13 @@ import { mount, later, triggerDrag } from '../../../test';
const firstOption = [ const firstOption = [
{ code: '110000', name: '北京市' }, { code: '110000', name: '北京市' },
{ code: '110100', name: '北京市' }, { code: '110100', name: '北京市' },
{ code: '110101', name: '东城区' } { code: '110101', name: '东城区' },
]; ];
const secondOption = [ const secondOption = [
{ code: '120000', name: '天津市' }, { code: '120000', name: '天津市' },
{ code: '120100', name: '天津市' }, { code: '120100', name: '天津市' },
{ code: '120101', name: '和平区' } { code: '120101', name: '和平区' },
]; ];
test('confirm & cancel event', async () => { test('confirm & cancel event', async () => {
@ -19,12 +19,12 @@ test('confirm & cancel event', async () => {
const onCancel = jest.fn(); const onCancel = jest.fn();
const wrapper = mount(Area, { const wrapper = mount(Area, {
propsData: { propsData: {
areaList areaList,
}, },
listeners: { listeners: {
confirm: onConfirm, confirm: onConfirm,
cancel: onCancel cancel: onCancel,
} },
}); });
await later(); await later();
@ -39,8 +39,8 @@ test('confirm & cancel event', async () => {
test('watch areaList & code', async () => { test('watch areaList & code', async () => {
const wrapper = mount(Area, { const wrapper = mount(Area, {
propsData: { propsData: {
areaList areaList,
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -50,7 +50,7 @@ test('watch areaList & code', async () => {
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
wrapper.setProps({ wrapper.setProps({
value: '' value: '',
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
@ -59,11 +59,11 @@ test('change option', () => {
const onChange = jest.fn(); const onChange = jest.fn();
const wrapper = mount(Area, { const wrapper = mount(Area, {
propsData: { propsData: {
areaList areaList,
}, },
listeners: { listeners: {
change: onChange change: onChange,
} },
}); });
const columns = wrapper.findAll('.van-picker-column'); const columns = wrapper.findAll('.van-picker-column');
@ -83,11 +83,11 @@ test('change option', () => {
test('getValues method', () => { test('getValues method', () => {
const wrapper = mount(Area, { const wrapper = mount(Area, {
propsData: { propsData: {
areaList areaList,
}, },
created() { created() {
expect(this.getValues()).toEqual([]); expect(this.getValues()).toEqual([]);
} },
}); });
expect(wrapper.vm.getValues()).toEqual(firstOption); expect(wrapper.vm.getValues()).toEqual(firstOption);
@ -97,8 +97,8 @@ test('reset method', async () => {
const wrapper = mount(Area, { const wrapper = mount(Area, {
propsData: { propsData: {
areaList, areaList,
value: '120225' value: '120225',
} },
}); });
await later(); await later();
@ -111,12 +111,12 @@ test('columns-num prop', async () => {
const wrapper = mount(Area, { const wrapper = mount(Area, {
propsData: { propsData: {
areaList, areaList,
columnsNum: 3 columnsNum: 3,
} },
}); });
wrapper.setProps({ wrapper.setProps({
columnsNum: 2 columnsNum: 2,
}); });
await later(); await later();

8
src/button/demo/index.vue
View File

@ -101,7 +101,7 @@ export default {
customColor: '自定义颜色', customColor: '自定义颜色',
pure: '单色按钮', pure: '单色按钮',
gradient: '渐变色按钮', gradient: '渐变色按钮',
blockElement: '块级元素' blockElement: '块级元素',
}, },
'en-US': { 'en-US': {
type: 'Type', type: 'Type',
@ -130,9 +130,9 @@ export default {
customColor: 'Custom Color', customColor: 'Custom Color',
pure: 'Pure', pure: 'Pure',
gradient: 'Gradient', gradient: 'Gradient',
blockElement: 'Block Element' blockElement: 'Block Element',
} },
} },
}; };
</script> </script>

18
src/button/index.tsx
View File

@ -54,7 +54,7 @@ function Button(
disabled, disabled,
loading, loading,
hairline, hairline,
loadingText loadingText,
} = props; } = props;
const style: Record<string, string | number> = {}; const style: Record<string, string | number> = {};
@ -97,10 +97,10 @@ function Button(
hairline, hairline,
block: props.block, block: props.block,
round: props.round, round: props.round,
square: props.square square: props.square,
} },
]), ]),
{ [BORDER_SURROUND]: hairline } { [BORDER_SURROUND]: hairline },
]; ];
function Content() { function Content() {
@ -165,20 +165,20 @@ Button.props = {
loadingType: String, loadingType: String,
tag: { tag: {
type: String, type: String,
default: 'button' default: 'button',
}, },
type: { type: {
type: String, type: String,
default: 'default' default: 'default',
}, },
size: { size: {
type: String, type: String,
default: 'normal' default: 'normal',
}, },
loadingSize: { loadingSize: {
type: String, type: String,
default: '20px' default: '20px',
} },
}; };
export default createComponent<ButtonProps, ButtonEvents>(Button); export default createComponent<ButtonProps, ButtonEvents>(Button);

36
src/button/test/index.spec.js
View File

@ -5,8 +5,8 @@ test('loading size', () => {
const wrapper = mount(Button, { const wrapper = mount(Button, {
propsData: { propsData: {
loading: true, loading: true,
loadingSize: '10px' loadingSize: '10px',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
@ -16,9 +16,9 @@ test('click event', () => {
const wrapper = mount(Button, { const wrapper = mount(Button, {
context: { context: {
on: { on: {
click: onClick click: onClick,
} },
} },
}); });
wrapper.trigger('click'); wrapper.trigger('click');
@ -29,13 +29,13 @@ test('not trigger click event when disabled', () => {
const onClick = jest.fn(); const onClick = jest.fn();
const wrapper = mount(Button, { const wrapper = mount(Button, {
propsData: { propsData: {
disabled: true disabled: true,
}, },
context: { context: {
on: { on: {
click: onClick click: onClick,
} },
} },
}); });
wrapper.trigger('click'); wrapper.trigger('click');
@ -46,13 +46,13 @@ test('not trigger click event when loading', () => {
const onClick = jest.fn(); const onClick = jest.fn();
const wrapper = mount(Button, { const wrapper = mount(Button, {
propsData: { propsData: {
loading: true loading: true,
}, },
context: { context: {
on: { on: {
click: onClick click: onClick,
} },
} },
}); });
wrapper.trigger('click'); wrapper.trigger('click');
@ -64,9 +64,9 @@ test('touchstart event', () => {
const wrapper = mount(Button, { const wrapper = mount(Button, {
context: { context: {
on: { on: {
touchstart: onTouchstart touchstart: onTouchstart,
} },
} },
}); });
wrapper.trigger('touchstart'); wrapper.trigger('touchstart');
@ -76,8 +76,8 @@ test('touchstart event', () => {
test('hide border when color is gradient', () => { test('hide border when color is gradient', () => {
const wrapper = mount(Button, { const wrapper = mount(Button, {
propsData: { propsData: {
color: 'linear-gradient(#000, #fff)' color: 'linear-gradient(#000, #fff)',
} },
}); });
expect(wrapper.element.style.border).toEqual('0px'); expect(wrapper.element.style.border).toEqual('0px');

6
src/calendar/components/Header.js
View File

@ -6,7 +6,7 @@ const [createComponent] = createNamespace('calendar-header');
export default createComponent({ export default createComponent({
props: { props: {
title: String, title: String,
monthTitle: String monthTitle: String,
}, },
methods: { methods: {
@ -29,7 +29,7 @@ export default createComponent({
))} ))}
</div> </div>
); );
} },
}, },
render() { render() {
@ -40,5 +40,5 @@ export default createComponent({
{this.genWeekDays()} {this.genWeekDays()}
</div> </div>
); );
} },
}); });

14
src/calendar/components/Month.js
View File

@ -15,12 +15,12 @@ export default createComponent({
showTitle: Boolean, showTitle: Boolean,
rowHeight: Number, rowHeight: Number,
formatter: Function, formatter: Function,
currentDate: [Date, Array] currentDate: [Date, Array],
}, },
data() { data() {
return { return {
visible: false visible: false,
}; };
}, },
@ -43,7 +43,7 @@ export default createComponent({
Math.ceil((this.totalDay + this.offset) / 7) * this.rowHeight; Math.ceil((this.totalDay + this.offset) / 7) * this.rowHeight;
return { return {
paddingBottom: `${padding}px` paddingBottom: `${padding}px`,
}; };
} }
}, },
@ -61,7 +61,7 @@ export default createComponent({
date, date,
type, type,
text: day, text: day,
bottomInfo: this.getBottomInfo(type) bottomInfo: this.getBottomInfo(type),
}; };
if (this.formatter) { if (this.formatter) {
@ -72,7 +72,7 @@ export default createComponent({
} }
return days; return days;
} },
}, },
mounted() { mounted() {
@ -219,7 +219,7 @@ export default createComponent({
{BottomInfo} {BottomInfo}
</div> </div>
); );
} },
}, },
render() { render() {
@ -229,5 +229,5 @@ export default createComponent({
{this.genDays()} {this.genDays()}
</div> </div>
); );
} },
}); });

12
src/calendar/demo/index.vue
View File

@ -129,7 +129,7 @@ export default {
customPosition: '自定义弹出位置', customPosition: '自定义弹出位置',
customCalendar: '自定义日历', customCalendar: '自定义日历',
confirmDisabledText: '请选择结束时间', confirmDisabledText: '请选择结束时间',
tiledDisplay: '平铺展示' tiledDisplay: '平铺展示',
}, },
'en-US': { 'en-US': {
in: 'In', in: 'In',
@ -150,8 +150,8 @@ export default {
customPosition: 'Custom Position', customPosition: 'Custom Position',
customCalendar: 'Custom Calendar', customCalendar: 'Custom Calendar',
confirmDisabledText: 'Select End Time', confirmDisabledText: 'Select End Time',
tiledDisplay: 'Tiled display' tiledDisplay: 'Tiled display',
} },
}, },
data() { data() {
@ -166,7 +166,7 @@ export default {
customConfirm: [], customConfirm: [],
customRange: null, customRange: null,
customDayText: [], customDayText: [],
customPosition: null customPosition: null,
}, },
type: 'single', type: 'single',
round: true, round: true,
@ -281,7 +281,7 @@ export default {
onConfirm(date) { onConfirm(date) {
this.showCalendar = false; this.showCalendar = false;
this.date[this.id] = date; this.date[this.id] = date;
} },
} },
}; };
</script> </script>

42
src/calendar/index.js
View File

@ -8,7 +8,7 @@ import {
compareMonth, compareMonth,
createComponent, createComponent,
calcDateNum, calcDateNum,
ROW_HEIGHT ROW_HEIGHT,
} from './utils'; } from './utils';
import Popup from '../popup'; import Popup from '../popup';
@ -29,12 +29,12 @@ export default createComponent({
confirmDisabledText: String, confirmDisabledText: String,
type: { type: {
type: String, type: String,
default: 'single' default: 'single',
}, },
minDate: { minDate: {
type: Date, type: Date,
validator: isDate, validator: isDate,
default: () => new Date() default: () => new Date(),
}, },
maxDate: { maxDate: {
type: Date, type: Date,
@ -42,50 +42,50 @@ export default createComponent({
default() { default() {
const now = new Date(); const now = new Date();
return new Date(now.getFullYear(), now.getMonth() + 6, now.getDate()); return new Date(now.getFullYear(), now.getMonth() + 6, now.getDate());
} },
}, },
position: { position: {
type: String, type: String,
default: 'bottom' default: 'bottom',
}, },
rowHeight: { rowHeight: {
type: Number, type: Number,
default: ROW_HEIGHT default: ROW_HEIGHT,
}, },
round: { round: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
poppable: { poppable: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
showMark: { showMark: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
showConfirm: { showConfirm: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
safeAreaInsetBottom: { safeAreaInsetBottom: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
closeOnClickOverlay: { closeOnClickOverlay: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
maxRange: { maxRange: {
type: Number, type: Number,
default: null default: null,
} },
}, },
data() { data() {
return { return {
monthTitle: '', monthTitle: '',
currentDate: this.getInitialDate() currentDate: this.getInitialDate(),
}; };
}, },
@ -114,7 +114,7 @@ export default createComponent({
} }
return !this.currentDate; return !this.currentDate;
} },
}, },
watch: { watch: {
@ -129,7 +129,7 @@ export default createComponent({
defaultDate(val) { defaultDate(val) {
this.currentDate = val; this.currentDate = val;
} },
}, },
mounted() { mounted() {
@ -331,7 +331,7 @@ export default createComponent({
return ( return (
<div <div
class={bem('footer', { class={bem('footer', {
'safe-area-inset-bottom': this.safeAreaInsetBottom 'safe-area-inset-bottom': this.safeAreaInsetBottom,
})} })}
> >
{this.genFooterContent()} {this.genFooterContent()}
@ -346,7 +346,7 @@ export default createComponent({
title={this.title} title={this.title}
monthTitle={this.monthTitle} monthTitle={this.monthTitle}
scopedSlots={{ scopedSlots={{
title: () => this.slots('title') title: () => this.slots('title'),
}} }}
/> />
<div ref="body" class={bem('body')} onScroll={this.onScroll}> <div ref="body" class={bem('body')} onScroll={this.onScroll}>
@ -355,7 +355,7 @@ export default createComponent({
{this.genFooter()} {this.genFooter()}
</div> </div>
); );
} },
}, },
render() { render() {
@ -377,5 +377,5 @@ export default createComponent({
} }
return this.genCalendar(); return this.genCalendar();
} },
}); });

88
src/calendar/test/index.spec.js
View File

@ -23,8 +23,8 @@ test('select event when type is single', async () => {
propsData: { propsData: {
minDate, minDate,
maxDate, maxDate,
poppable: false poppable: false,
} },
}); });
await later(); await later();
@ -43,8 +43,8 @@ test('select event when type is range', async () => {
type: 'range', type: 'range',
minDate, minDate,
maxDate, maxDate,
poppable: false poppable: false,
} },
}); });
await later(); await later();
@ -68,8 +68,8 @@ test('should not trigger select event when click disabled day', async () => {
propsData: { propsData: {
minDate, minDate,
maxDate, maxDate,
poppable: false poppable: false,
} },
}); });
await later(); await later();
@ -87,8 +87,8 @@ test('confirm event when type is single', async () => {
propsData: { propsData: {
minDate, minDate,
maxDate, maxDate,
poppable: false poppable: false,
} },
}); });
await later(); await later();
@ -110,8 +110,8 @@ test('confirm event when type is range', async () => {
type: 'range', type: 'range',
minDate, minDate,
maxDate, maxDate,
poppable: false poppable: false,
} },
}); });
await later(); await later();
@ -131,8 +131,8 @@ test('confirm event when type is range', async () => {
test('default single date', async () => { test('default single date', async () => {
const wrapper = mount(Calendar, { const wrapper = mount(Calendar, {
propsData: { propsData: {
poppable: false poppable: false,
} },
}); });
await later(); await later();
@ -145,8 +145,8 @@ test('default range date', async () => {
const wrapper = mount(Calendar, { const wrapper = mount(Calendar, {
propsData: { propsData: {
type: 'range', type: 'range',
poppable: false poppable: false,
} },
}); });
await later(); await later();
@ -163,8 +163,8 @@ test('reset method', async () => {
minDate, minDate,
maxDate, maxDate,
type: 'range', type: 'range',
poppable: false poppable: false,
} },
}); });
await later(); await later();
@ -188,8 +188,8 @@ test('set show-confirm to false', async () => {
maxDate, maxDate,
type: 'range', type: 'range',
poppable: false, poppable: false,
showConfirm: false showConfirm: false,
} },
}); });
await later(); await later();
@ -209,8 +209,8 @@ test('row-height prop', async () => {
minDate, minDate,
maxDate, maxDate,
poppable: false, poppable: false,
rowHeight: 50 rowHeight: 50,
} },
}); });
await later(); await later();
@ -243,8 +243,8 @@ test('formatter prop', async () => {
} }
return day; return day;
} },
} },
}); });
await later(); await later();
@ -257,12 +257,12 @@ test('title & footer slot', async () => {
propsData: { propsData: {
minDate, minDate,
maxDate, maxDate,
poppable: false poppable: false,
}, },
scopedSlots: { scopedSlots: {
title: () => 'Custom Title', title: () => 'Custom Title',
footer: () => 'Custom Footer' footer: () => 'Custom Footer',
} },
}); });
await later(); await later();
@ -275,8 +275,8 @@ test('should reset when type changed', async () => {
propsData: { propsData: {
minDate, minDate,
maxDate, maxDate,
poppable: false poppable: false,
} },
}); });
await later(); await later();
@ -297,8 +297,8 @@ test('default-date prop in single type', async () => {
minDate, minDate,
maxDate, maxDate,
defaultDate: getNextDay(minDate), defaultDate: getNextDay(minDate),
poppable: false poppable: false,
} },
}); });
await later(); await later();
@ -317,8 +317,8 @@ test('default-date prop in range type', async () => {
type: 'range', type: 'range',
minDate, minDate,
maxDate, maxDate,
poppable: false poppable: false,
} },
}); });
await later(); await later();
@ -340,13 +340,13 @@ test('popup wrapper', async () => {
const wrapper = mount(Calendar, { const wrapper = mount(Calendar, {
propsData: { propsData: {
minDate, minDate,
maxDate maxDate,
}, },
listeners: { listeners: {
input(value) { input(value) {
wrapper.setProps({ value }); wrapper.setProps({ value });
} },
} },
}); });
await later(); await later();
@ -367,8 +367,8 @@ test('set show-mark prop to false', async () => {
minDate, minDate,
maxDate, maxDate,
showMark: false, showMark: false,
poppable: false poppable: false,
} },
}); });
await later(); await later();
@ -382,8 +382,8 @@ test('color prop when type is single', async () => {
minDate, minDate,
maxDate, maxDate,
color: 'blue', color: 'blue',
poppable: false poppable: false,
} },
}); });
await later(); await later();
@ -399,8 +399,8 @@ test('color prop when type is range', async () => {
minDate, minDate,
maxDate, maxDate,
color: 'blue', color: 'blue',
poppable: false poppable: false,
} },
}); });
await later(); await later();
@ -414,8 +414,8 @@ test('should scroll to current month when show', async done => {
type: 'range', type: 'range',
minDate: new Date(2010, 0, 10), minDate: new Date(2010, 0, 10),
maxDate: new Date(2010, 11, 10), maxDate: new Date(2010, 11, 10),
defaultDate: [new Date(2010, 3, 1), new Date(2010, 5, 1)] defaultDate: [new Date(2010, 3, 1), new Date(2010, 5, 1)],
} },
}); });
Element.prototype.scrollIntoView = function() { Element.prototype.scrollIntoView = function() {
@ -435,8 +435,8 @@ test('max-range prop', async () => {
minDate, minDate,
maxDate, maxDate,
maxRange: 1, maxRange: 1,
poppable: false poppable: false,
} },
}); });
await later(); await later();

10
src/card/demo/index.vue
View File

@ -75,19 +75,19 @@ export default {
'zh-CN': { 'zh-CN': {
title: '商品名称', title: '商品名称',
discountInfo: '营销信息', discountInfo: '营销信息',
customContent: '自定义内容' customContent: '自定义内容',
}, },
'en-US': { 'en-US': {
discountInfo: 'Discount Info', discountInfo: 'Discount Info',
customContent: 'Custom Content' customContent: 'Custom Content',
} },
}, },
data() { data() {
return { return {
imageURL: 'https://img.yzcdn.cn/vant/t-thirt.jpg' imageURL: 'https://img.yzcdn.cn/vant/t-thirt.jpg',
}; };
} },
}; };
</script> </script>

4
src/card/index.tsx
View File

@ -206,8 +206,8 @@ Card.props = {
originPrice: [Number, String], originPrice: [Number, String],
currency: { currency: {
type: String, type: String,
default: '¥' default: '¥',
} },
}; };
export default createComponent<CardProps, CardEvents>(Card); export default createComponent<CardProps, CardEvents>(Card);

42
src/card/test/index.spec.js
View File

@ -6,16 +6,16 @@ test('click event', () => {
const wrapper = mount(Card, { const wrapper = mount(Card, {
context: { context: {
on: { on: {
click: onClick click: onClick,
} },
} },
}); });
wrapper.trigger('click'); wrapper.trigger('click');
expect(onClick).toHaveBeenCalledWith( expect(onClick).toHaveBeenCalledWith(
expect.objectContaining({ expect.objectContaining({
isTrusted: expect.any(Boolean) isTrusted: expect.any(Boolean),
}) })
); );
}); });
@ -24,20 +24,20 @@ test('click-thumb event', () => {
const onClickThumb = jest.fn(); const onClickThumb = jest.fn();
const wrapper = mount(Card, { const wrapper = mount(Card, {
propsData: { propsData: {
thumb: 'xx' thumb: 'xx',
}, },
context: { context: {
on: { on: {
'click-thumb': onClickThumb 'click-thumb': onClickThumb,
} },
} },
}); });
wrapper.find('.van-card__thumb').trigger('click'); wrapper.find('.van-card__thumb').trigger('click');
expect(onClickThumb).toHaveBeenCalledWith( expect(onClickThumb).toHaveBeenCalledWith(
expect.objectContaining({ expect.objectContaining({
isTrusted: expect.any(Boolean) isTrusted: expect.any(Boolean),
}) })
); );
}); });
@ -46,8 +46,8 @@ test('render price & num slot', () => {
const wrapper = mount(Card, { const wrapper = mount(Card, {
scopedSlots: { scopedSlots: {
num: () => 'Custom Num', num: () => 'Custom Num',
price: () => 'Custom Price' price: () => 'Custom Price',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -56,8 +56,8 @@ test('render price & num slot', () => {
test('render origin-price slot', () => { test('render origin-price slot', () => {
const wrapper = mount(Card, { const wrapper = mount(Card, {
scopedSlots: { scopedSlots: {
'origin-price': () => 'Custom Origin Price' 'origin-price': () => 'Custom Origin Price',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -66,8 +66,8 @@ test('render origin-price slot', () => {
test('render bottom slot', () => { test('render bottom slot', () => {
const wrapper = mount(Card, { const wrapper = mount(Card, {
scopedSlots: { scopedSlots: {
bottom: () => 'Custom Bottom' bottom: () => 'Custom Bottom',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -77,8 +77,8 @@ test('render thumb & tag slot', () => {
const wrapper = mount(Card, { const wrapper = mount(Card, {
scopedSlots: { scopedSlots: {
tag: () => 'Custom Tag', tag: () => 'Custom Tag',
thumb: () => 'Custom Thumb' thumb: () => 'Custom Thumb',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -88,8 +88,8 @@ test('render title & desc slot', () => {
const wrapper = mount(Card, { const wrapper = mount(Card, {
scopedSlots: { scopedSlots: {
title: () => 'Custom Title', title: () => 'Custom Title',
desc: () => 'Custom desc' desc: () => 'Custom desc',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -99,8 +99,8 @@ test('render price & price-top slot', () => {
const wrapper = mount(Card, { const wrapper = mount(Card, {
scopedSlots: { scopedSlots: {
price: () => 'Custom Price', price: () => 'Custom Price',
'price-top': () => 'Custom Price-top' 'price-top': () => 'Custom Price-top',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();

4
src/cell-group/index.tsx
View File

@ -45,8 +45,8 @@ CellGroup.props = {
title: String, title: String,
border: { border: {
type: Boolean, type: Boolean,
default: true default: true,
} },
}; };
export default createComponent<CellGroupProps>(CellGroup); export default createComponent<CellGroupProps>(CellGroup);

8
src/cell/demo/index.vue
View File

@ -76,7 +76,7 @@ export default {
urlRoute: 'URL 跳转', urlRoute: 'URL 跳转',
vueRoute: '路由跳转', vueRoute: '路由跳转',
useSlots: '使用插槽', useSlots: '使用插槽',
verticalCenter: '垂直居中' verticalCenter: '垂直居中',
}, },
'en-US': { 'en-US': {
cell: 'Cell title', cell: 'Cell title',
@ -90,9 +90,9 @@ export default {
urlRoute: 'URL', urlRoute: 'URL',
vueRoute: 'Vue Router', vueRoute: 'Vue Router',
useSlots: 'Use Slots', useSlots: 'Use Slots',
verticalCenter: 'Vertical center' verticalCenter: 'Vertical center',
} },
} },
}; };
</script> </script>

4
src/cell/index.tsx
View File

@ -109,7 +109,7 @@ function Cell(
clickable, clickable,
center: props.center, center: props.center,
required: props.required, required: props.required,
borderless: !props.border borderless: !props.border,
}; };
if (size) { if (size) {
@ -135,7 +135,7 @@ function Cell(
Cell.props = { Cell.props = {
...cellProps, ...cellProps,
...routeProps ...routeProps,
}; };
export default createComponent<CellProps, CellEvents, CellSlots>(Cell); export default createComponent<CellProps, CellEvents, CellSlots>(Cell);

4
src/cell/shared.ts
View File

@ -33,6 +33,6 @@ export const cellProps = {
arrowDirection: String, arrowDirection: String,
border: { border: {
type: Boolean, type: Boolean,
default: true default: true,
} },
}; };

24
src/cell/test/index.spec.js
View File

@ -7,9 +7,9 @@ test('click event', () => {
const wrapper = mount(Cell, { const wrapper = mount(Cell, {
context: { context: {
on: { on: {
click click,
} },
} },
}); });
wrapper.trigger('click'); wrapper.trigger('click');
@ -20,8 +20,8 @@ test('arrow direction', () => {
const wrapper = mount(Cell, { const wrapper = mount(Cell, {
propsData: { propsData: {
isLink: true, isLink: true,
arrowDirection: 'down' arrowDirection: 'down',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -38,8 +38,8 @@ test('render slot', () => {
</cell> </cell>
`, `,
components: { components: {
Cell Cell,
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -50,9 +50,9 @@ test('title-style prop', () => {
propsData: { propsData: {
title: 'title', title: 'title',
titleStyle: { titleStyle: {
color: 'red' color: 'red',
} },
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -61,8 +61,8 @@ test('title-style prop', () => {
test('CellGroup title slot', () => { test('CellGroup title slot', () => {
const wrapper = mount(CellGroup, { const wrapper = mount(CellGroup, {
scopedSlots: { scopedSlots: {
title: () => 'CustomTitle' title: () => 'CustomTitle',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();

10
src/checkbox-group/index.js
View File

@ -13,14 +13,14 @@ export default createComponent({
checkedColor: String, checkedColor: String,
value: { value: {
type: Array, type: Array,
default: () => [] default: () => [],
} },
}, },
watch: { watch: {
value(val) { value(val) {
this.$emit('change', val); this.$emit('change', val);
} },
}, },
methods: { methods: {
@ -38,10 +38,10 @@ export default createComponent({
const names = children.map(item => item.name); const names = children.map(item => item.name);
this.$emit('input', names); this.$emit('input', names);
} },
}, },
render() { render() {
return <div class={bem()}>{this.slots()}</div>; return <div class={bem()}>{this.slots()}</div>;
} },
}); });

16
src/checkbox/demo/index.vue
View File

@ -41,7 +41,7 @@
<van-checkbox v-model="checkbox3"> <van-checkbox v-model="checkbox3">
{{ $t('customIcon') }} {{ $t('customIcon') }}
<template #icon="{ checked }"> <template #icon="{ checked }">
<img :src="checked ? activeIcon : inactiveIcon"> <img :src="checked ? activeIcon : inactiveIcon" />
</template> </template>
</van-checkbox> </van-checkbox>
</demo-block> </demo-block>
@ -110,7 +110,7 @@ export default {
toggleAll: '全选与反选', toggleAll: '全选与反选',
checkAll: '全选', checkAll: '全选',
inverse: '反选', inverse: '反选',
disabledLabelClick: '禁用文本点击' disabledLabelClick: '禁用文本点击',
}, },
'en-US': { 'en-US': {
checkbox: 'Checkbox', checkbox: 'Checkbox',
@ -124,8 +124,8 @@ export default {
toggleAll: 'Toggle All', toggleAll: 'Toggle All',
checkAll: 'Check All', checkAll: 'Check All',
inverse: 'Inverse', inverse: 'Inverse',
disabledLabelClick: 'Disable the click event of label' disabledLabelClick: 'Disable the click event of label',
} },
}, },
data() { data() {
@ -139,14 +139,14 @@ export default {
list: [ list: [
'a', 'a',
'b', 'b',
'c' 'c',
], ],
result: ['a', 'b'], result: ['a', 'b'],
result2: [], result2: [],
result3: [], result3: [],
checkAllResult: [], checkAllResult: [],
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png', activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png' inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
}; };
}, },
@ -161,8 +161,8 @@ export default {
toggleAll() { toggleAll() {
this.$refs.group.toggleAll(); this.$refs.group.toggleAll();
} },
} },
}; };
</script> </script>

12
src/checkbox/index.js
View File

@ -7,7 +7,7 @@ export default createComponent({
mixins: [CheckboxMixin({ mixins: [CheckboxMixin({
bem, bem,
role: 'checkbox', role: 'checkbox',
parent: 'vanCheckbox' parent: 'vanCheckbox',
})], })],
computed: { computed: {
@ -22,14 +22,14 @@ export default createComponent({
} else { } else {
this.$emit('input', val); this.$emit('input', val);
} }
} },
} },
}, },
watch: { watch: {
value(val) { value(val) {
this.$emit('change', val); this.$emit('change', val);
} },
}, },
methods: { methods: {
@ -67,6 +67,6 @@ export default createComponent({
parent.$emit('input', value); parent.$emit('input', value);
} }
} }
} },
} },
}); });

38
src/checkbox/test/index.spec.js
View File

@ -20,8 +20,8 @@ test('switch checkbox', async () => {
test('disabled', () => { test('disabled', () => {
const wrapper = mount(Checkbox, { const wrapper = mount(Checkbox, {
propsData: { propsData: {
disabled: true disabled: true,
} },
}); });
wrapper.find('.van-checkbox__icon').trigger('click'); wrapper.find('.van-checkbox__icon').trigger('click');
@ -31,11 +31,11 @@ test('disabled', () => {
test('label disabled', () => { test('label disabled', () => {
const wrapper = mount(Checkbox, { const wrapper = mount(Checkbox, {
scopedSlots: { scopedSlots: {
default: () => 'Label' default: () => 'Label',
}, },
propsData: { propsData: {
labelDisabled: true labelDisabled: true,
} },
}); });
wrapper.find('.van-checkbox__label').trigger('click'); wrapper.find('.van-checkbox__label').trigger('click');
@ -54,9 +54,9 @@ test('checkbox group', async () => {
`, `,
data() { data() {
return { return {
result: [] result: [],
}; };
} },
}); });
const icons = wrapper.findAll('.van-checkbox__icon'); const icons = wrapper.findAll('.van-checkbox__icon');
@ -77,8 +77,8 @@ test('click event', () => {
const onClick = jest.fn(); const onClick = jest.fn();
const wrapper = mount(Checkbox, { const wrapper = mount(Checkbox, {
listeners: { listeners: {
click: onClick click: onClick,
} },
}); });
wrapper.trigger('click'); wrapper.trigger('click');
@ -92,11 +92,11 @@ test('click event', () => {
test('label-position prop', () => { test('label-position prop', () => {
const wrapper = mount(Checkbox, { const wrapper = mount(Checkbox, {
scopedSlots: { scopedSlots: {
default: () => 'Label' default: () => 'Label',
}, },
propsData: { propsData: {
labelPosition: 'left' labelPosition: 'left',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -109,7 +109,7 @@ test('icon-size prop', () => {
<van-checkbox>label</van-checkbox> <van-checkbox>label</van-checkbox>
<van-checkbox icon-size="5rem">label</van-checkbox> <van-checkbox icon-size="5rem">label</van-checkbox>
</van-checkbox-group> </van-checkbox-group>
` `,
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -122,7 +122,7 @@ test('checked-color prop', () => {
<van-checkbox name="a" :value="true">label</van-checkbox> <van-checkbox name="a" :value="true">label</van-checkbox>
<van-checkbox name="b" :value="true" checked-color="white">label</van-checkbox> <van-checkbox name="b" :value="true" checked-color="white">label</van-checkbox>
</van-checkbox-group> </van-checkbox-group>
` `,
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -140,9 +140,9 @@ test('bind-group prop', async () => {
return { return {
value: false, value: false,
result: [], result: [],
list: ['a', 'b', 'c'] list: ['a', 'b', 'c'],
}; };
} },
}); });
const icons = wrapper.findAll('.van-checkbox__icon'); const icons = wrapper.findAll('.van-checkbox__icon');
@ -163,14 +163,14 @@ test('toggleAll method', async () => {
`, `,
data() { data() {
return { return {
result: ['a'] result: ['a'],
}; };
}, },
methods: { methods: {
toggleAll(checked) { toggleAll(checked) {
this.$refs.group.toggleAll(checked); this.$refs.group.toggleAll(checked);
} },
} },
}); });
wrapper.vm.toggleAll(); wrapper.vm.toggleAll();

14
src/circle/demo/index.vue
View File

@ -85,7 +85,7 @@ export default {
customStyle: '样式定制', customStyle: '样式定制',
customColor: '颜色定制', customColor: '颜色定制',
customWidth: '宽度定制', customWidth: '宽度定制',
counterClockwise: '逆时针' counterClockwise: '逆时针',
}, },
'en-US': { 'en-US': {
gradient: 'Gradient', gradient: 'Gradient',
@ -93,8 +93,8 @@ export default {
customStyle: 'Custom Style', customStyle: 'Custom Style',
customColor: 'Custom Color', customColor: 'Custom Color',
customWidth: 'Custom Width', customWidth: 'Custom Width',
counterClockwise: 'Counter Clockwise' counterClockwise: 'Counter Clockwise',
} },
}, },
data() { data() {
@ -106,8 +106,8 @@ export default {
currentRate4: 70, currentRate4: 70,
gradientColor: { gradientColor: {
'0%': '#3fecff', '0%': '#3fecff',
'100%': '#6149f6' '100%': '#6149f6',
} },
}; };
}, },
@ -118,8 +118,8 @@ export default {
reduce() { reduce() {
this.rate = format(this.rate - 20); this.rate = format(this.rate - 20);
} },
} },
}; };
</script> </script>

36
src/circle/index.js
View File

@ -24,40 +24,40 @@ export default createComponent({
strokeLinecap: String, strokeLinecap: String,
value: { value: {
type: Number, type: Number,
default: 0 default: 0,
}, },
speed: { speed: {
type: Number, type: Number,
default: 0 default: 0,
}, },
size: { size: {
type: [String, Number], type: [String, Number],
default: 100 default: 100,
}, },
fill: { fill: {
type: String, type: String,
default: 'none' default: 'none',
}, },
rate: { rate: {
type: Number, type: Number,
default: 100 default: 100,
}, },
layerColor: { layerColor: {
type: String, type: String,
default: WHITE default: WHITE,
}, },
color: { color: {
type: [String, Object], type: [String, Object],
default: BLUE default: BLUE,
}, },
strokeWidth: { strokeWidth: {
type: Number, type: Number,
default: 40 default: 40,
}, },
clockwise: { clockwise: {
type: Boolean, type: Boolean,
default: true default: true,
} },
}, },
beforeCreate() { beforeCreate() {
@ -69,7 +69,7 @@ export default createComponent({
const size = addUnit(this.size); const size = addUnit(this.size);
return { return {
width: size, width: size,
height: size height: size,
}; };
}, },
@ -88,7 +88,7 @@ export default createComponent({
stroke: `${this.color}`, stroke: `${this.color}`,
strokeWidth: `${this.strokeWidth + 1}px`, strokeWidth: `${this.strokeWidth + 1}px`,
strokeLinecap: this.strokeLinecap, strokeLinecap: this.strokeLinecap,
strokeDasharray: `${offset}px ${PERIMETER}px` strokeDasharray: `${offset}px ${PERIMETER}px`,
}; };
}, },
@ -96,7 +96,7 @@ export default createComponent({
return { return {
fill: `${this.fill}`, fill: `${this.fill}`,
stroke: `${this.layerColor}`, stroke: `${this.layerColor}`,
strokeWidth: `${this.strokeWidth}px` strokeWidth: `${this.strokeWidth}px`,
}; };
}, },
@ -122,7 +122,7 @@ export default createComponent({
</linearGradient> </linearGradient>
</defs> </defs>
); );
} },
}, },
watch: { watch: {
@ -143,8 +143,8 @@ export default createComponent({
this.$emit('input', this.endRate); this.$emit('input', this.endRate);
} }
}, },
immediate: true immediate: true,
} },
}, },
methods: { methods: {
@ -158,7 +158,7 @@ export default createComponent({
if (this.increase ? rate < this.endRate : rate > this.endRate) { if (this.increase ? rate < this.endRate : rate > this.endRate) {
this.rafId = raf(this.animate); this.rafId = raf(this.animate);
} }
} },
}, },
render() { render() {
@ -178,5 +178,5 @@ export default createComponent({
(this.text && <div class={bem('text')}>{this.text}</div>)} (this.text && <div class={bem('text')}>{this.text}</div>)}
</div> </div>
); );
} },
}); });

20
src/circle/test/index.spec.js
View File

@ -6,15 +6,15 @@ test('speed is 0', async () => {
const wrapper = mount(Circle, { const wrapper = mount(Circle, {
propsData: { propsData: {
rate: 50, rate: 50,
value: 0 value: 0,
}, },
listeners: { listeners: {
input(value) { input(value) {
Vue.nextTick(() => { Vue.nextTick(() => {
wrapper.setProps({ value }); wrapper.setProps({ value });
}); });
} },
} },
}); });
await later(); await later();
@ -26,11 +26,11 @@ test('animate', async () => {
mount(Circle, { mount(Circle, {
propsData: { propsData: {
rate: 50, rate: 50,
speed: 100 speed: 100,
}, },
listeners: { listeners: {
input: onInput input: onInput,
} },
}); });
await later(50); await later(50);
@ -41,8 +41,8 @@ test('animate', async () => {
test('size prop', () => { test('size prop', () => {
const wrapper = mount(Circle, { const wrapper = mount(Circle, {
propsData: { propsData: {
size: 100 size: 100,
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -51,8 +51,8 @@ test('size prop', () => {
test('stroke-linecap prop', () => { test('stroke-linecap prop', () => {
const wrapper = mount(Circle, { const wrapper = mount(Circle, {
propsData: { propsData: {
strokeLinecap: 'square' strokeLinecap: 'square',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();

8
src/col/demo/index.vue
View File

@ -89,13 +89,13 @@ export default {
i18n: { i18n: {
'zh-CN': { 'zh-CN': {
title2: '在列元素之间增加间距', title2: '在列元素之间增加间距',
title3: 'Flex 布局' title3: 'Flex 布局',
}, },
'en-US': { 'en-US': {
title2: 'Column Spacing', title2: 'Column Spacing',
title3: 'Flex Layout' title3: 'Flex Layout',
} },
} },
}; };
</script> </script>

10
src/col/index.js
View File

@ -8,8 +8,8 @@ export default createComponent({
offset: [Number, String], offset: [Number, String],
tag: { tag: {
type: String, type: String,
default: 'div' default: 'div',
} },
}, },
computed: { computed: {
@ -20,13 +20,13 @@ export default createComponent({
style() { style() {
const padding = `${this.gutter / 2}px`; const padding = `${this.gutter / 2}px`;
return this.gutter ? { paddingLeft: padding, paddingRight: padding } : {}; return this.gutter ? { paddingLeft: padding, paddingRight: padding } : {};
} },
}, },
methods: { methods: {
onClick(event) { onClick(event) {
this.$emit('click', event); this.$emit('click', event);
} },
}, },
render() { render() {
@ -40,5 +40,5 @@ export default createComponent({
{this.slots()} {this.slots()}
</this.tag> </this.tag>
); );
} },
}); });

14
src/collapse-item/index.js
View File

@ -18,14 +18,14 @@ export default createComponent({
disabled: Boolean, disabled: Boolean,
isLink: { isLink: {
type: Boolean, type: Boolean,
default: true default: true,
} },
}, },
data() { data() {
return { return {
show: null, show: null,
inited: null inited: null,
}; };
}, },
@ -53,7 +53,7 @@ export default createComponent({
return accordion return accordion
? value === this.currentName ? value === this.currentName
: value.some(name => name === this.currentName); : value.some(name => name === this.currentName);
} },
}, },
created() { created() {
@ -96,7 +96,7 @@ export default createComponent({
this.onTransitionEnd(); this.onTransitionEnd();
} }
}); });
} },
}, },
methods: { methods: {
@ -162,7 +162,7 @@ export default createComponent({
</div> </div>
); );
} }
} },
}, },
render() { render() {
@ -172,5 +172,5 @@ export default createComponent({
{this.genContent()} {this.genContent()}
</div> </div>
); );
} },
}); });

10
src/collapse/demo/index.vue
View File

@ -50,22 +50,22 @@ export default {
'zh-CN': { 'zh-CN': {
accordion: '手风琴', accordion: '手风琴',
titleSlot: '自定义标题内容', titleSlot: '自定义标题内容',
text: '代码是写出来给人看的，附带能在机器上运行' text: '代码是写出来给人看的，附带能在机器上运行',
}, },
'en-US': { 'en-US': {
accordion: 'Accordion', accordion: 'Accordion',
titleSlot: 'Custom title', titleSlot: 'Custom title',
text: 'Content' text: 'Content',
} },
}, },
data() { data() {
return { return {
active1: [0], active1: [0],
active2: 0, active2: 0,
active3: [] active3: [],
}; };
} },
}; };
</script> </script>

8
src/collapse/index.js
View File

@ -12,8 +12,8 @@ export default createComponent({
value: [String, Number, Array], value: [String, Number, Array],
border: { border: {
type: Boolean, type: Boolean,
default: true default: true,
} },
}, },
methods: { methods: {
@ -25,7 +25,7 @@ export default createComponent({
} }
this.$emit('change', name); this.$emit('change', name);
this.$emit('input', name); this.$emit('input', name);
} },
}, },
render() { render() {
@ -34,5 +34,5 @@ export default createComponent({
{this.slots()} {this.slots()}
</div> </div>
); );
} },
}); });

30
src/collapse/test/index.spec.js
View File

@ -14,14 +14,14 @@ const component = {
accordion: Boolean, accordion: Boolean,
border: { border: {
type: Boolean, type: Boolean,
default: true default: true,
} },
}, },
data() { data() {
return { return {
active: this.accordion ? '' : [] active: this.accordion ? '' : [],
}; };
} },
}; };
test('basic mode', async () => { test('basic mode', async () => {
@ -45,8 +45,8 @@ test('basic mode', async () => {
test('accordion', async () => { test('accordion', async () => {
const wrapper = mount(component, { const wrapper = mount(component, {
propsData: { propsData: {
accordion: true accordion: true,
} },
}); });
const titles = wrapper.findAll('.van-collapse-item__title'); const titles = wrapper.findAll('.van-collapse-item__title');
@ -78,9 +78,9 @@ test('render collapse-item slot', () => {
`, `,
data() { data() {
return { return {
active: [] active: [],
}; };
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -89,8 +89,8 @@ test('render collapse-item slot', () => {
test('disable border', () => { test('disable border', () => {
const wrapper = mount(component, { const wrapper = mount(component, {
propsData: { propsData: {
border: false border: false,
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -106,14 +106,14 @@ test('lazy render collapse content', async () => {
`, `,
components: { components: {
Collapse, Collapse,
CollapseItem CollapseItem,
}, },
data() { data() {
return { return {
content: '', content: '',
active: [] active: [],
}; };
} },
}); });
const titles = wrapper.findAll('.van-collapse-item__title'); const titles = wrapper.findAll('.van-collapse-item__title');
@ -136,9 +136,9 @@ test('warn when value type is incorrect', () => {
`, `,
data() { data() {
return { return {
active: 0 active: 0,
}; };
} },
}); });
expect(error).toHaveBeenCalledTimes(1); expect(error).toHaveBeenCalledTimes(1);

16
src/contact-card/demo/index.vue
View File

@ -56,13 +56,13 @@ export default {
'zh-CN': { 'zh-CN': {
name: '张三', name: '张三',
defaultLabel: '设为默认联系人', defaultLabel: '设为默认联系人',
defaultTagText: '默认' defaultTagText: '默认',
}, },
'en-US': { 'en-US': {
name: 'John Snow', name: 'John Snow',
defaultLabel: 'Set as the default contact', defaultLabel: 'Set as the default contact',
defaultTagText: 'default' defaultTagText: 'default',
} },
}, },
data() { data() {
@ -72,7 +72,7 @@ export default {
showList: false, showList: false,
showEdit: false, showEdit: false,
isEdit: false, isEdit: false,
list: [] list: [],
}; };
}, },
@ -82,7 +82,7 @@ export default {
name: this.$t('name'), name: this.$t('name'),
tel: '13000000000', tel: '13000000000',
id: 0, id: 0,
isDefault: 1 isDefault: 1,
}; };
}, },
@ -93,7 +93,7 @@ export default {
currentContact() { currentContact() {
const id = this.chosenContactId; const id = this.chosenContactId;
return id !== null ? this.list.filter(item => item.id === id)[0] : {}; return id !== null ? this.list.filter(item => item.id === id)[0] : {};
} },
}, },
created() { created() {
@ -135,8 +135,8 @@ export default {
if (this.chosenContactId === info.id) { if (this.chosenContactId === info.id) {
this.chosenContactId = null; this.chosenContactId = null;
} }
} },
} },
}; };
</script> </script>

8
src/contact-card/index.tsx
View File

@ -37,7 +37,7 @@ function ContactCard(
return [ return [
<div>{`${t('name')}：${props.name}`}</div>, <div>{`${t('name')}：${props.name}`}</div>,
<div>{`${t('tel')}：${props.tel}`}</div> <div>{`${t('tel')}：${props.tel}`}</div>,
]; ];
} }
@ -63,12 +63,12 @@ ContactCard.props = {
addText: String, addText: String,
editable: { editable: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
type: { type: {
type: String, type: String,
default: 'add' default: 'add',
} },
}; };
export default createComponent<ContactCardProps>(ContactCard); export default createComponent<ContactCardProps>(ContactCard);

40
src/contact-card/test/index.spec.js
View File

@ -5,7 +5,7 @@ import { mount, later } from '../../../test';
const contactInfo = { const contactInfo = {
name: 'test', name: 'test',
tel: '123123213' tel: '123123213',
}; };
describe('ContactCard', () => { describe('ContactCard', () => {
@ -14,9 +14,9 @@ describe('ContactCard', () => {
const wrapper = mount(ContactCard, { const wrapper = mount(ContactCard, {
context: { context: {
on: { on: {
click click,
} },
} },
}); });
wrapper.trigger('click'); wrapper.trigger('click');
@ -27,13 +27,13 @@ describe('ContactCard', () => {
const click = jest.fn(); const click = jest.fn();
const wrapper = mount(ContactCard, { const wrapper = mount(ContactCard, {
propsData: { propsData: {
editable: false editable: false,
}, },
context: { context: {
on: { on: {
click click,
} },
} },
}); });
wrapper.trigger('click'); wrapper.trigger('click');
@ -45,8 +45,8 @@ describe('ContactList', () => {
test('render', () => { test('render', () => {
const wrapper = mount(ContactList, { const wrapper = mount(ContactList, {
propsData: { propsData: {
list: [contactInfo] list: [contactInfo],
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
@ -55,13 +55,13 @@ describe('ContactList', () => {
const onSelect = jest.fn(); const onSelect = jest.fn();
const wrapper = mount(ContactList, { const wrapper = mount(ContactList, {
propsData: { propsData: {
list: [contactInfo] list: [contactInfo],
}, },
context: { context: {
on: { on: {
select: onSelect select: onSelect,
} },
} },
}); });
wrapper.find('.van-radio__icon').trigger('click'); wrapper.find('.van-radio__icon').trigger('click');
@ -74,8 +74,8 @@ describe('ContactEdit', () => {
const createComponent = () => { const createComponent = () => {
const wrapper = mount(ContactEdit, { const wrapper = mount(ContactEdit, {
propsData: { propsData: {
contactInfo contactInfo,
} },
}); });
const button = wrapper.find('.van-button'); const button = wrapper.find('.van-button');
@ -86,7 +86,7 @@ describe('ContactEdit', () => {
data, data,
field, field,
button, button,
errorInfo errorInfo,
}; };
}; };
@ -114,7 +114,7 @@ describe('ContactEdit', () => {
expect(errorInfo.tel).toBeFalsy(); expect(errorInfo.tel).toBeFalsy();
expect(wrapper.emitted('save')[0][0]).toEqual({ expect(wrapper.emitted('save')[0][0]).toEqual({
name: 'test', name: 'test',
tel: '13000000000' tel: '13000000000',
}); });
}); });
@ -127,8 +127,8 @@ describe('ContactEdit', () => {
test('delete contact', async () => { test('delete contact', async () => {
const wrapper = mount(ContactEdit, { const wrapper = mount(ContactEdit, {
propsData: { propsData: {
isEdit: true isEdit: true,
} },
}); });
const deleteButton = wrapper.findAll('.van-button').at(1); const deleteButton = wrapper.findAll('.van-button').at(1);

24
src/contact-edit/index.js
View File

@ -10,7 +10,7 @@ const [createComponent, bem, t] = createNamespace('contact-edit');
const defaultContact = { const defaultContact = {
tel: '', tel: '',
name: '' name: '',
}; };
export default createComponent({ export default createComponent({
@ -22,24 +22,24 @@ export default createComponent({
setDefaultLabel: String, setDefaultLabel: String,
contactInfo: { contactInfo: {
type: Object, type: Object,
default: () => ({ ...defaultContact }) default: () => ({ ...defaultContact }),
}, },
telValidator: { telValidator: {
type: Function, type: Function,
default: isMobile default: isMobile,
} },
}, },
data() { data() {
return { return {
data: { data: {
...defaultContact, ...defaultContact,
...this.contactInfo ...this.contactInfo,
}, },
errorInfo: { errorInfo: {
name: '', name: '',
tel: '' tel: '',
} },
}; };
}, },
@ -47,9 +47,9 @@ export default createComponent({
contactInfo(val) { contactInfo(val) {
this.data = { this.data = {
...defaultContact, ...defaultContact,
...val ...val,
}; };
} },
}, },
methods: { methods: {
@ -83,11 +83,11 @@ export default createComponent({
onDelete() { onDelete() {
Dialog.confirm({ Dialog.confirm({
message: t('confirmDelete') message: t('confirmDelete'),
}).then(() => { }).then(() => {
this.$emit('delete', this.data); this.$emit('delete', this.data);
}); });
} },
}, },
render() { render() {
@ -152,5 +152,5 @@ export default createComponent({
</div> </div>
</div> </div>
); );
} },
}); });

2
src/contact-list/index.tsx
View File

@ -122,7 +122,7 @@ ContactList.props = {
value: null as any, value: null as any,
list: Array, list: Array,
addText: String, addText: String,
defaultTagText: String defaultTagText: String,
}; };
export default createComponent(ContactList); export default createComponent(ContactList);

12
src/count-down/demo/index.vue
View File

@ -60,7 +60,7 @@ export default {
reset: '重置', reset: '重置',
pause: '暂停', pause: '暂停',
start: '开始', start: '开始',
finished: '倒计时结束' finished: '倒计时结束',
}, },
'en-US': { 'en-US': {
millisecond: 'Millisecond', millisecond: 'Millisecond',
@ -71,13 +71,13 @@ export default {
reset: 'Reset', reset: 'Reset',
pause: 'Pause', pause: 'Pause',
start: 'Start', start: 'Start',
finished: 'Finished' finished: 'Finished',
} },
}, },
data() { data() {
return { return {
time: 30 * 60 * 60 * 1000 time: 30 * 60 * 60 * 1000,
}; };
}, },
@ -92,8 +92,8 @@ export default {
reset() { reset() {
this.$refs.countDown.reset(); this.$refs.countDown.reset();
} },
} },
}; };
</script> </script>

20
src/count-down/index.js
View File

@ -9,21 +9,21 @@ export default createComponent({
millisecond: Boolean, millisecond: Boolean,
time: { time: {
type: Number, type: Number,
default: 0 default: 0,
}, },
format: { format: {
type: String, type: String,
default: 'HH:mm:ss' default: 'HH:mm:ss',
}, },
autoStart: { autoStart: {
type: Boolean, type: Boolean,
default: true default: true,
} },
}, },
data() { data() {
return { return {
remain: 0 remain: 0,
}; };
}, },
@ -34,14 +34,14 @@ export default createComponent({
formattedTime() { formattedTime() {
return parseFormat(this.format, this.timeData); return parseFormat(this.format, this.timeData);
} },
}, },
watch: { watch: {
time: { time: {
immediate: true, immediate: true,
handler: 'reset' handler: 'reset',
} },
}, },
activated() { activated() {
@ -146,7 +146,7 @@ export default createComponent({
this.pause(); this.pause();
this.$emit('finish'); this.$emit('finish');
} }
} },
}, },
render() { render() {
@ -155,5 +155,5 @@ export default createComponent({
{this.slots('default', this.timeData) || this.formattedTime} {this.slots('default', this.timeData) || this.formattedTime}
</div> </div>
); );
} },
}); });

54
src/count-down/test/index.spec.js
View File

@ -4,8 +4,8 @@ import { mount, later } from '../../../test';
test('macro task finish event', async () => { test('macro task finish event', async () => {
const wrapper = mount(CountDown, { const wrapper = mount(CountDown, {
propsData: { propsData: {
time: 1 time: 1,
} },
}); });
expect(wrapper.emitted('finish')).toBeFalsy(); expect(wrapper.emitted('finish')).toBeFalsy();
@ -17,8 +17,8 @@ test('micro task finish event', async () => {
const wrapper = mount(CountDown, { const wrapper = mount(CountDown, {
propsData: { propsData: {
time: 1, time: 1,
millisecond: true millisecond: true,
} },
}); });
expect(wrapper.emitted('finish')).toBeFalsy(); expect(wrapper.emitted('finish')).toBeFalsy();
@ -30,8 +30,8 @@ test('macro task re-render', async () => {
const wrapper = mount(CountDown, { const wrapper = mount(CountDown, {
propsData: { propsData: {
time: 1000, time: 1000,
format: 'SSS' format: 'SSS',
} },
}); });
const prevSnapShot = wrapper.html(); const prevSnapShot = wrapper.html();
@ -46,8 +46,8 @@ test('micro task re-render', async () => {
propsData: { propsData: {
time: 100, time: 100,
format: 'SSS', format: 'SSS',
millisecond: true millisecond: true,
} },
}); });
const prevSnapShot = wrapper.html(); const prevSnapShot = wrapper.html();
@ -62,8 +62,8 @@ test('disable auto-start prop', async () => {
propsData: { propsData: {
time: 100, time: 100,
format: 'SSS', format: 'SSS',
autoStart: false autoStart: false,
} },
}); });
await later(50); await later(50);
@ -76,8 +76,8 @@ test('start method', async () => {
time: 100, time: 100,
format: 'SSS', format: 'SSS',
autoStart: false, autoStart: false,
millisecond: true millisecond: true,
} },
}); });
const prevSnapShot = wrapper.html(); const prevSnapShot = wrapper.html();
@ -97,8 +97,8 @@ test('pause method', async () => {
propsData: { propsData: {
time: 100, time: 100,
format: 'SSS', format: 'SSS',
millisecond: true millisecond: true,
} },
}); });
const prevSnapShot = wrapper.html(); const prevSnapShot = wrapper.html();
@ -114,8 +114,8 @@ test('reset method', async () => {
propsData: { propsData: {
time: 100, time: 100,
format: 'SSS', format: 'SSS',
millisecond: true millisecond: true,
} },
}); });
const prevSnapShot = wrapper.html(); const prevSnapShot = wrapper.html();
@ -131,8 +131,8 @@ test('complete format prop', () => {
propsData: { propsData: {
time: 30 * 60 * 60 * 1000 - 1, time: 30 * 60 * 60 * 1000 - 1,
autoStart: false, autoStart: false,
format: 'DD-HH-mm-ss-SSS' format: 'DD-HH-mm-ss-SSS',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -143,8 +143,8 @@ test('milliseconds format SS', () => {
propsData: { propsData: {
time: 1500, time: 1500,
autoStart: false, autoStart: false,
format: 'ss-SS' format: 'ss-SS',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -155,8 +155,8 @@ test('milliseconds format S', () => {
propsData: { propsData: {
time: 1500, time: 1500,
autoStart: false, autoStart: false,
format: 'ss-S' format: 'ss-S',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -167,8 +167,8 @@ test('incomplate format prop', () => {
propsData: { propsData: {
time: 30 * 60 * 60 * 1000 - 1, time: 30 * 60 * 60 * 1000 - 1,
autoStart: false, autoStart: false,
format: 'HH-mm-ss-SSS' format: 'HH-mm-ss-SSS',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -190,14 +190,14 @@ test('pause when deactivated', async () => {
`, `,
data() { data() {
return { return {
render: true render: true,
}; };
}, },
methods: { methods: {
getCountDown() { getCountDown() {
return this.$refs.countDown; return this.$refs.countDown;
} },
} },
}); });
const countDown = wrapper.vm.getCountDown(); const countDown = wrapper.vm.getCountDown();

2
src/count-down/utils.ts
View File

@ -25,7 +25,7 @@ export function parseTimeData(time: number): TimeData {
hours, hours,
minutes, minutes,
seconds, seconds,
milliseconds milliseconds,
}; };
} }

14
src/coupon-cell/index.tsx
View File

@ -55,31 +55,31 @@ function CouponCell(
} }
CouponCell.model = { CouponCell.model = {
prop: 'chosenCoupon' prop: 'chosenCoupon',
}; };
CouponCell.props = { CouponCell.props = {
title: String, title: String,
coupons: { coupons: {
type: Array, type: Array,
default: () => [] default: () => [],
}, },
currency: { currency: {
type: String, type: String,
default: '¥' default: '¥',
}, },
border: { border: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
editable: { editable: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
chosenCoupon: { chosenCoupon: {
type: Number, type: Number,
default: -1 default: -1,
} },
}; };
export default createComponent<CouponCellProps>(CouponCell); export default createComponent<CouponCellProps>(CouponCell);

28
src/coupon-list/demo/index.vue
View File

@ -33,25 +33,25 @@ export default {
coupon: { coupon: {
name: '优惠券名称', name: '优惠券名称',
reason: '优惠券不可用原因', reason: '优惠券不可用原因',
description: '描述信息' description: '描述信息',
}, },
exchange: '兑换成功' exchange: '兑换成功',
}, },
'en-US': { 'en-US': {
coupon: { coupon: {
name: 'Coupon name', name: 'Coupon name',
reason: 'Coupon unavailable reason', reason: 'Coupon unavailable reason',
description: 'Description' description: 'Description',
},
exchange: 'Success',
}, },
exchange: 'Success'
}
}, },
data() { data() {
return { return {
showList: false, showList: false,
chosenCoupon: -1, chosenCoupon: -1,
exchangedCoupons: [] exchangedCoupons: [],
}; };
}, },
@ -75,7 +75,7 @@ export default {
startAt: 1489104000, startAt: 1489104000,
endAt: 1514592000, endAt: 1514592000,
valueDesc: '1.5', valueDesc: '1.5',
unitDesc: '元' unitDesc: '元',
}; };
}, },
@ -85,7 +85,7 @@ export default {
id: 2, id: 2,
value: 12, value: 12,
valueDesc: '8.8', valueDesc: '8.8',
unitDesc: '折' unitDesc: '折',
}; };
}, },
@ -93,7 +93,7 @@ export default {
return { return {
...this.coupon, ...this.coupon,
id: 3, id: 3,
reason: this.$t('coupon.reason') reason: this.$t('coupon.reason'),
}; };
}, },
@ -103,9 +103,9 @@ export default {
valueDesc: '1', valueDesc: '1',
unitDesc: '折', unitDesc: '折',
id: 4, id: 4,
reason: this.$t('coupon.reason') reason: this.$t('coupon.reason'),
}; };
} },
}, },
methods: { methods: {
@ -117,12 +117,12 @@ export default {
this.$toast(this.$t('exchange')); this.$toast(this.$t('exchange'));
this.exchangedCoupons.push({ this.exchangedCoupons.push({
...this.coupon, ...this.coupon,
id: this.randomId() id: this.randomId(),
}); });
}, },
randomId(max = 999999) { randomId(max = 999999) {
return Math.floor(Math.random() * max) + 1; return Math.floor(Math.random() * max) + 1;
} },
} },
}; };
</script> </script>

36
src/coupon-list/index.js
View File

@ -10,7 +10,7 @@ const EMPTY_IMAGE = 'https://img.yzcdn.cn/vant/coupon-empty.png';
export default createComponent({ export default createComponent({
model: { model: {
prop: 'code' prop: 'code',
}, },
props: { props: {
@ -24,51 +24,51 @@ export default createComponent({
exchangeButtonDisabled: Boolean, exchangeButtonDisabled: Boolean,
exchangeMinLength: { exchangeMinLength: {
type: Number, type: Number,
default: 1 default: 1,
}, },
chosenCoupon: { chosenCoupon: {
type: Number, type: Number,
default: -1 default: -1,
}, },
coupons: { coupons: {
type: Array, type: Array,
default: () => [] default: () => [],
}, },
disabledCoupons: { disabledCoupons: {
type: Array, type: Array,
default: () => [] default: () => [],
}, },
displayedCouponIndex: { displayedCouponIndex: {
type: Number, type: Number,
default: -1 default: -1,
}, },
showExchangeBar: { showExchangeBar: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
showCloseButton: { showCloseButton: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
showCount: { showCount: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
currency: { currency: {
type: String, type: String,
default: '¥' default: '¥',
}, },
emptyImage: { emptyImage: {
type: String, type: String,
default: EMPTY_IMAGE default: EMPTY_IMAGE,
} },
}, },
data() { data() {
return { return {
tab: 0, tab: 0,
winHeight: window.innerHeight, winHeight: window.innerHeight,
currentCode: this.code || '' currentCode: this.code || '',
}; };
}, },
@ -84,9 +84,9 @@ export default createComponent({
listStyle() { listStyle() {
return { return {
height: this.winHeight - (this.showExchangeBar ? 140 : 94) + 'px' height: this.winHeight - (this.showExchangeBar ? 140 : 94) + 'px',
}; };
} },
}, },
watch: { watch: {
@ -98,7 +98,7 @@ export default createComponent({
this.$emit('input', code); this.$emit('input', code);
}, },
displayedCouponIndex: 'scrollToShowCoupon' displayedCouponIndex: 'scrollToShowCoupon',
}, },
mounted() { mounted() {
@ -152,7 +152,7 @@ export default createComponent({
onClick={this.onClickExchangeButton} onClick={this.onClickExchangeButton}
/> />
); );
} },
}, },
render() { render() {
@ -234,5 +234,5 @@ export default createComponent({
</div> </div>
</div> </div>
); );
} },
}); });

44
src/coupon-list/test/index.spec.js
View File

@ -13,17 +13,17 @@ const coupon = {
name: 'name', name: 'name',
description: 'description', description: 'description',
startAt: 1489104000, startAt: 1489104000,
endAt: 1514592000 endAt: 1514592000,
}; };
const coupon2 = { const coupon2 = {
...coupon, ...coupon,
denominations: 100 denominations: 100,
}; };
const coupon3 = { const coupon3 = {
...coupon, ...coupon,
denominations: 123 denominations: 123,
}; };
const emptyCoupon = { const emptyCoupon = {
@ -32,7 +32,7 @@ const emptyCoupon = {
denominations: 0, denominations: 0,
originCondition: 0, originCondition: 0,
startAt: 1489104000, startAt: 1489104000,
endAt: 1514592000 endAt: 1514592000,
}; };
const discountCoupon = { const discountCoupon = {
@ -42,7 +42,7 @@ const discountCoupon = {
denominations: 0, denominations: 0,
originCondition: 50, originCondition: 50,
value: 12, value: 12,
description: '' description: '',
}; };
const discountCoupon2 = { const discountCoupon2 = {
@ -52,28 +52,28 @@ const discountCoupon2 = {
denominations: 0, denominations: 0,
originCondition: 50, originCondition: 50,
value: 12, value: 12,
description: '' description: '',
}; };
const disabledCoupon = { const disabledCoupon = {
...coupon, ...coupon,
id: 3, id: 3,
reason: 'reason' reason: 'reason',
}; };
const disabledDiscountCoupon = { const disabledDiscountCoupon = {
...discountCoupon, ...discountCoupon,
discount: 10, discount: 10,
id: 4, id: 4,
reason: '' reason: '',
}; };
test('render disabled coupon', () => { test('render disabled coupon', () => {
const wrapper = mount(Coupon, { const wrapper = mount(Coupon, {
propsData: { propsData: {
coupon: disabledCoupon, coupon: disabledCoupon,
disabled: true disabled: true,
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -84,8 +84,8 @@ test('render coupon list', async () => {
propsData: { propsData: {
chosenCoupon: 1, chosenCoupon: 1,
coupons: [emptyCoupon, coupon, coupon2, coupon3, discountCoupon, discountCoupon2], coupons: [emptyCoupon, coupon, coupon2, coupon3, discountCoupon, discountCoupon2],
disabledCoupons: [disabledCoupon, disabledDiscountCoupon] disabledCoupons: [disabledCoupon, disabledDiscountCoupon],
} },
}); });
await later(); await later();
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -95,8 +95,8 @@ test('render empty coupon list', () => {
const wrapper = mount(CouponList, { const wrapper = mount(CouponList, {
propsData: { propsData: {
coupons: [], coupons: [],
disabledCoupons: [] disabledCoupons: [],
} },
}); });
wrapper.findAll('.van-tab').at(1).trigger('click'); wrapper.findAll('.van-tab').at(1).trigger('click');
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -105,8 +105,8 @@ test('render empty coupon list', () => {
test('empty-image prop', () => { test('empty-image prop', () => {
const wrapper = mount(CouponList, { const wrapper = mount(CouponList, {
propsData: { propsData: {
emptyImage: 'https://img.yzcdn.com/xxx.png' emptyImage: 'https://img.yzcdn.com/xxx.png',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -118,7 +118,7 @@ test('exchange coupon', () => {
wrapper.setData({ wrapper.setData({
currentCode: '1', currentCode: '1',
displayedCouponIndex: 1 displayedCouponIndex: 1,
}); });
exchange.trigger('click'); exchange.trigger('click');
wrapper.setProps({ code: '2' }); wrapper.setProps({ code: '2' });
@ -136,9 +136,9 @@ test('render coupon cell', () => {
const wrapper = mount(CouponCell, { const wrapper = mount(CouponCell, {
context: { context: {
on: { on: {
click: onClick click: onClick,
} },
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -150,8 +150,8 @@ test('render coupon cell with coupon', () => {
const wrapper = mount(CouponCell, { const wrapper = mount(CouponCell, {
propsData: { propsData: {
coupons: [{ value: 100 }], coupons: [{ value: 100 }],
chosenCoupon: 0 chosenCoupon: 0,
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });

8
src/coupon/index.js
View File

@ -27,8 +27,8 @@ export default createComponent({
disabled: Boolean, disabled: Boolean,
currency: { currency: {
type: String, type: String,
default: '¥' default: '¥',
} },
}, },
computed: { computed: {
@ -58,7 +58,7 @@ export default createComponent({
conditionMessage() { conditionMessage() {
const condition = formatAmount(this.coupon.originCondition); const condition = formatAmount(this.coupon.originCondition);
return condition === '0' ? t('unlimited') : t('condition', condition); return condition === '0' ? t('unlimited') : t('condition', condition);
} },
}, },
render() { render() {
@ -83,5 +83,5 @@ export default createComponent({
{description && <p class={bem('description')}>{description}</p>} {description && <p class={bem('description')}>{description}</p>}
</div> </div>
); );
} },
}); });

32
src/datetime-picker/DatePicker.js
View File

@ -14,18 +14,18 @@ export default createComponent({
...sharedProps, ...sharedProps,
type: { type: {
type: String, type: String,
default: 'datetime' default: 'datetime',
}, },
minDate: { minDate: {
type: Date, type: Date,
default: () => new Date(currentYear - 10, 0, 1), default: () => new Date(currentYear - 10, 0, 1),
validator: isDate validator: isDate,
}, },
maxDate: { maxDate: {
type: Date, type: Date,
default: () => new Date(currentYear + 10, 11, 31), default: () => new Date(currentYear + 10, 11, 31),
validator: isDate validator: isDate,
} },
}, },
watch: { watch: {
@ -39,7 +39,7 @@ export default createComponent({
if (val.valueOf() !== this.innerValue.valueOf()) { if (val.valueOf() !== this.innerValue.valueOf()) {
this.innerValue = val; this.innerValue = val;
} }
} },
}, },
computed: { computed: {
@ -57,30 +57,30 @@ export default createComponent({
const result = [ const result = [
{ {
type: 'year', type: 'year',
range: [minYear, maxYear] range: [minYear, maxYear],
}, },
{ {
type: 'month', type: 'month',
range: [minMonth, maxMonth] range: [minMonth, maxMonth],
}, },
{ {
type: 'day', type: 'day',
range: [minDate, maxDate] range: [minDate, maxDate],
}, },
{ {
type: 'hour', type: 'hour',
range: [minHour, maxHour] range: [minHour, maxHour],
}, },
{ {
type: 'minute', type: 'minute',
range: [minMinute, maxMinute] range: [minMinute, maxMinute],
} },
]; ];
if (this.type === 'date') result.splice(3, 2); if (this.type === 'date') result.splice(3, 2);
if (this.type === 'year-month') result.splice(2, 3); if (this.type === 'year-month') result.splice(2, 3);
return result; return result;
} },
}, },
methods: { methods: {
@ -128,7 +128,7 @@ export default createComponent({
[`${type}Month`]: month, [`${type}Month`]: month,
[`${type}Date`]: date, [`${type}Date`]: date,
[`${type}Hour`]: hour, [`${type}Hour`]: hour,
[`${type}Minute`]: minute [`${type}Minute`]: minute,
}; };
}, },
@ -179,7 +179,7 @@ export default createComponent({
let values = [ let values = [
formatter('year', `${value.getFullYear()}`), formatter('year', `${value.getFullYear()}`),
formatter('month', padZero(value.getMonth() + 1)), formatter('month', padZero(value.getMonth() + 1)),
formatter('day', padZero(value.getDate())) formatter('day', padZero(value.getDate())),
]; ];
if (this.type === 'datetime') { if (this.type === 'datetime') {
@ -196,6 +196,6 @@ export default createComponent({
this.$nextTick(() => { this.$nextTick(() => {
this.getPicker().setValues(values); this.getPicker().setValues(values);
}); });
} },
} },
}); });

24
src/datetime-picker/TimePicker.js
View File

@ -12,20 +12,20 @@ export default createComponent({
...sharedProps, ...sharedProps,
minHour: { minHour: {
type: Number, type: Number,
default: 0 default: 0,
}, },
maxHour: { maxHour: {
type: Number, type: Number,
default: 23 default: 23,
}, },
minMinute: { minMinute: {
type: Number, type: Number,
default: 0 default: 0,
}, },
maxMinute: { maxMinute: {
type: Number, type: Number,
default: 59 default: 59,
} },
}, },
computed: { computed: {
@ -33,14 +33,14 @@ export default createComponent({
return [ return [
{ {
type: 'hour', type: 'hour',
range: [this.minHour, this.maxHour] range: [this.minHour, this.maxHour],
}, },
{ {
type: 'minute', type: 'minute',
range: [this.minMinute, this.maxMinute] range: [this.minMinute, this.maxMinute],
} },
]; ];
} },
}, },
watch: { watch: {
@ -57,7 +57,7 @@ export default createComponent({
this.innerValue = val; this.innerValue = val;
this.updateColumnValue(val); this.updateColumnValue(val);
} }
} },
}, },
methods: { methods: {
@ -100,6 +100,6 @@ export default createComponent({
this.$nextTick(() => { this.$nextTick(() => {
this.getPicker().setValues(values); this.getPicker().setValues(values);
}); });
} },
} },
}); });

10
src/datetime-picker/demo/index.vue
View File

@ -57,7 +57,7 @@ export default {
title4: '选择时间', title4: '选择时间',
year: '年', year: '年',
month: '月', month: '月',
optionFilter: '选项过滤器' optionFilter: '选项过滤器',
}, },
'en-US': { 'en-US': {
title1: 'Choose DateTime', title1: 'Choose DateTime',
@ -66,8 +66,8 @@ export default {
title4: 'Choose Time', title4: 'Choose Time',
year: ' Year', year: ' Year',
month: ' Month', month: ' Month',
optionFilter: 'Option Filter' optionFilter: 'Option Filter',
} },
}, },
data() { data() {
@ -99,7 +99,7 @@ export default {
} }
return values; return values;
} },
} },
}; };
</script> </script>

6
src/datetime-picker/index.js
View File

@ -7,7 +7,7 @@ const [createComponent, bem] = createNamespace('datetime-picker');
export default createComponent({ export default createComponent({
props: { props: {
...TimePicker.props, ...TimePicker.props,
...DatePicker.props ...DatePicker.props,
}, },
render() { render() {
@ -18,9 +18,9 @@ export default createComponent({
class={bem()} class={bem()}
{...{ {...{
props: this.$props, props: this.$props,
on: this.$listeners on: this.$listeners,
}} }}
/> />
); );
} },
}); });

20
src/datetime-picker/shared.js
View File

@ -9,18 +9,18 @@ export const sharedProps = {
filter: Function, filter: Function,
showToolbar: { showToolbar: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
formatter: { formatter: {
type: Function, type: Function,
default: (type, value) => value default: (type, value) => value,
} },
}; };
export const TimePickerMixin = { export const TimePickerMixin = {
data() { data() {
return { return {
innerValue: this.formatValue(this.value) innerValue: this.formatValue(this.value),
}; };
}, },
@ -38,16 +38,16 @@ export const TimePickerMixin = {
return { return {
type, type,
values values,
}; };
}); });
}, },
columns() { columns() {
return this.originColumns.map(column => ({ return this.originColumns.map(column => ({
values: column.values.map(value => this.formatter(column.type, value)) values: column.values.map(value => this.formatter(column.type, value)),
})); }));
} },
}, },
watch: { watch: {
@ -55,7 +55,7 @@ export const TimePickerMixin = {
innerValue(val) { innerValue(val) {
this.$emit('input', val); this.$emit('input', val);
} },
}, },
mounted() { mounted() {
@ -78,7 +78,7 @@ export const TimePickerMixin = {
onCancel() { onCancel() {
this.$emit('cancel'); this.$emit('cancel');
} },
}, },
render() { render() {
@ -97,5 +97,5 @@ export const TimePickerMixin = {
{...{ props }} {...{ props }}
/> />
); );
} },
}; };

30
src/datetime-picker/test/date-picker.spec.js
View File

@ -16,8 +16,8 @@ test('filter prop', () => {
filter, filter,
minDate: new Date(2020, 0, 1), minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1), maxDate: new Date(2025, 10, 1),
value: new Date(2020, 10, 1, 0, 0) value: new Date(2020, 10, 1, 0, 0),
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -30,8 +30,8 @@ test('formatter prop', async () => {
formatter, formatter,
minDate: new Date(2010, 0, 1), minDate: new Date(2010, 0, 1),
maxDate: new Date(2025, 10, 1), maxDate: new Date(2025, 10, 1),
value: new Date(2020, 10, 1, 0, 0) value: new Date(2020, 10, 1, 0, 0),
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -45,7 +45,7 @@ test('formatter prop', async () => {
'05 month', '05 month',
'05 day', '05 day',
'00 hour', '00 hour',
'00 minute' '00 minute',
]); ]);
}); });
@ -56,8 +56,8 @@ test('confirm event', () => {
propsData: { propsData: {
value: date, value: date,
minDate: new Date(2020, 0, 1), minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1) maxDate: new Date(2025, 10, 1),
} },
}); });
wrapper.find('.van-picker__confirm').trigger('click'); wrapper.find('.van-picker__confirm').trigger('click');
@ -80,8 +80,8 @@ test('max-date prop', () => {
const wrapper = mount(DatePicker, { const wrapper = mount(DatePicker, {
propsData: { propsData: {
value: new Date(2020, 10, 30, 30, 30), value: new Date(2020, 10, 30, 30, 30),
maxDate maxDate,
} },
}); });
wrapper.find('.van-picker__confirm').trigger('click'); wrapper.find('.van-picker__confirm').trigger('click');
@ -93,8 +93,8 @@ test('min-date prop', () => {
const wrapper = mount(DatePicker, { const wrapper = mount(DatePicker, {
propsData: { propsData: {
value: new Date(2020, 0, 0, 0, 0), value: new Date(2020, 0, 0, 0, 0),
minDate minDate,
} },
}); });
wrapper.find('.van-picker__confirm').trigger('click'); wrapper.find('.van-picker__confirm').trigger('click');
@ -104,8 +104,8 @@ test('min-date prop', () => {
test('dynamic set value', () => { test('dynamic set value', () => {
const wrapper = mount(DatePicker, { const wrapper = mount(DatePicker, {
propsData: { propsData: {
value: new Date(2019, 1, 1) value: new Date(2019, 1, 1),
} },
}); });
wrapper.setProps({ value: new Date(2019, 1, 1) }); wrapper.setProps({ value: new Date(2019, 1, 1) });
@ -132,8 +132,8 @@ test('use min-date with filter', async () => {
} }
return values; return values;
} },
} },
}); });
await later(); await later();

8
src/datetime-picker/test/datetime-picker.spec.js
View File

@ -8,8 +8,8 @@ test('confirm & cancel event', () => {
const wrapper = mount(DatetimePicker, { const wrapper = mount(DatetimePicker, {
listeners: { listeners: {
confirm: onConfirm, confirm: onConfirm,
cancel: onCancel cancel: onCancel,
} },
}); });
wrapper.find('.van-picker__confirm').trigger('click'); wrapper.find('.van-picker__confirm').trigger('click');
@ -24,8 +24,8 @@ test('time type', () => {
propsData: { propsData: {
type: 'time', type: 'time',
minHour: 22, minHour: 22,
minMinute: 58 minMinute: 58,
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();

26
src/datetime-picker/test/time-picker.spec.js
View File

@ -14,8 +14,8 @@ test('format initial value', () => {
const wrapper = mount(TimePicker, { const wrapper = mount(TimePicker, {
propsData: { propsData: {
minHour: 22, minHour: 22,
minMinute: 58 minMinute: 58,
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -26,8 +26,8 @@ test('max-hour & max-minute', () => {
propsData: { propsData: {
value: '23:59', value: '23:59',
maxHour: 2, maxHour: 2,
maxMinute: 2 maxMinute: 2,
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -37,8 +37,8 @@ test('filter prop', () => {
const wrapper = mount(TimePicker, { const wrapper = mount(TimePicker, {
propsData: { propsData: {
filter, filter,
value: '12:00' value: '12:00',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -49,8 +49,8 @@ test('formatter prop', async () => {
propsData: { propsData: {
filter, filter,
formatter, formatter,
value: '12:00' value: '12:00',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -65,8 +65,8 @@ test('formatter prop', async () => {
test('confirm event', () => { test('confirm event', () => {
const wrapper = mount(TimePicker, { const wrapper = mount(TimePicker, {
propsData: { propsData: {
value: '12:00' value: '12:00',
} },
}); });
triggerDrag(wrapper.find('.van-picker-column'), 0, -100); triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
@ -97,8 +97,8 @@ test('change min-minute and emit correct value', async () => {
const wrapper = mount(TimePicker, { const wrapper = mount(TimePicker, {
propsData: { propsData: {
value: '12:00', value: '12:00',
minMinute: 0 minMinute: 0,
} },
}); });
await later(); await later();
@ -112,7 +112,7 @@ test('set max-hour & max-minute smaller than current then emit correct value', a
const wrapper = mount(TimePicker, { const wrapper = mount(TimePicker, {
propsData: { propsData: {
value: '23:59', value: '23:59',
} },
}); });
await later(); await later();
wrapper.setProps({ wrapper.setProps({

18
src/dialog/Dialog.js
View File

@ -23,28 +23,28 @@ export default createComponent({
showCancelButton: Boolean, showCancelButton: Boolean,
transition: { transition: {
type: String, type: String,
default: 'van-dialog-bounce' default: 'van-dialog-bounce',
}, },
showConfirmButton: { showConfirmButton: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
overlay: { overlay: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
closeOnClickOverlay: { closeOnClickOverlay: {
type: Boolean, type: Boolean,
default: false default: false,
} },
}, },
data() { data() {
return { return {
loading: { loading: {
confirm: false, confirm: false,
cancel: false cancel: false,
} },
}; };
}, },
@ -90,7 +90,7 @@ export default createComponent({
onClosed() { onClosed() {
this.$emit('closed'); this.$emit('closed');
} },
}, },
render() { render() {
@ -166,5 +166,5 @@ export default createComponent({
</div> </div>
</transition> </transition>
); );
} },
}); });

22
src/dialog/demo/index.vue
View File

@ -16,7 +16,7 @@
<demo-block :title="$t('componentCall')"> <demo-block :title="$t('componentCall')">
<van-button type="primary" @click="show = true">{{ $t('componentCall') }}</van-button> <van-button type="primary" @click="show = true">{{ $t('componentCall') }}</van-button>
<van-dialog v-model="show" :title="$t('title')" show-cancel-button :lazy-render="false"> <van-dialog v-model="show" :title="$t('title')" show-cancel-button :lazy-render="false">
<img :src="image"> <img :src="image" />
</van-dialog> </van-dialog>
</demo-block> </demo-block>
</demo-section> </demo-section>
@ -31,22 +31,22 @@ export default {
confirm: '确认弹窗', confirm: '确认弹窗',
asyncClose: '异步关闭', asyncClose: '异步关闭',
componentCall: '组件调用', componentCall: '组件调用',
content: '代码是写出来给人看的，附带能在机器上运行' content: '代码是写出来给人看的，附带能在机器上运行',
}, },
'en-US': { 'en-US': {
alert1: 'Alert', alert1: 'Alert',
alert2: 'Alert without title', alert2: 'Alert without title',
confirm: 'Confirm dialog', confirm: 'Confirm dialog',
asyncClose: 'Async Close', asyncClose: 'Async Close',
componentCall: 'Component Call' componentCall: 'Component Call',
} },
}, },
data() { data() {
return { return {
show: false, show: false,
currentRate: 0, currentRate: 0,
image: 'https://img.yzcdn.cn/vant/apple-3.jpg' image: 'https://img.yzcdn.cn/vant/apple-3.jpg',
}; };
}, },
@ -54,20 +54,20 @@ export default {
onClickAlert() { onClickAlert() {
this.$dialog.alert({ this.$dialog.alert({
title: this.$t('title'), title: this.$t('title'),
message: this.$t('content') message: this.$t('content'),
}); });
}, },
onClickAlert2() { onClickAlert2() {
this.$dialog.alert({ this.$dialog.alert({
message: this.$t('content') message: this.$t('content'),
}); });
}, },
onClickConfirm() { onClickConfirm() {
this.$dialog.confirm({ this.$dialog.confirm({
title: this.$t('title'), title: this.$t('title'),
message: this.$t('content') message: this.$t('content'),
}); });
}, },
@ -83,10 +83,10 @@ export default {
this.$dialog.confirm({ this.$dialog.confirm({
title: this.$t('title'), title: this.$t('title'),
message: this.$t('content'), message: this.$t('content'),
beforeClose beforeClose,
}); });
} },
} },
}; };
</script> </script>

10
src/dialog/index.js
View File

@ -17,8 +17,8 @@ function initInstance() {
el: document.createElement('div'), el: document.createElement('div'),
// avoid missing animation when first rendered // avoid missing animation when first rendered
propsData: { propsData: {
lazyRender: false lazyRender: false,
} },
}); });
instance.$on('input', value => { instance.$on('input', value => {
@ -39,7 +39,7 @@ function Dialog(options) {
Object.assign(instance, Dialog.currentOptions, options, { Object.assign(instance, Dialog.currentOptions, options, {
resolve, resolve,
reject reject,
}); });
}); });
} }
@ -68,14 +68,14 @@ Dialog.defaultOptions = {
closeOnClickOverlay: false, closeOnClickOverlay: false,
callback: action => { callback: action => {
instance[action === 'confirm' ? 'resolve' : 'reject'](action); instance[action === 'confirm' ? 'resolve' : 'reject'](action);
} },
}; };
Dialog.alert = Dialog; Dialog.alert = Dialog;
Dialog.confirm = options => Dialog({ Dialog.confirm = options => Dialog({
showCancelButton: true, showCancelButton: true,
...options ...options,
}); });
Dialog.close = () => { Dialog.close = () => {

32
src/dialog/test/index.spec.js
View File

@ -7,7 +7,7 @@ test('Dialog function call', async () => {
Dialog.close(); Dialog.close();
Dialog.alert({ Dialog.alert({
message: '1', message: '1',
showCancelButton: true showCancelButton: true,
}); });
await later(); await later();
@ -38,8 +38,8 @@ test('before close', () => {
value: true, value: true,
showCancelButton: true, showCancelButton: true,
closeOnClickOverlay: true, closeOnClickOverlay: true,
beforeClose: (action, done) => done(false) beforeClose: (action, done) => done(false),
} },
}); });
const cancel = wrapper.find('.van-dialog__cancel'); const cancel = wrapper.find('.van-dialog__cancel');
@ -52,7 +52,7 @@ test('before close', () => {
if (action === 'cancel') { if (action === 'cancel') {
done(); done();
} }
} },
}); });
const overlay = document.querySelector('.van-overlay'); const overlay = document.querySelector('.van-overlay');
@ -81,8 +81,8 @@ test('button color', () => {
value: true, value: true,
showCancelButton: true, showCancelButton: true,
cancelButtonColor: 'white', cancelButtonColor: 'white',
confirmButtonColor: 'red' confirmButtonColor: 'red',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
@ -93,8 +93,8 @@ test('button text', () => {
value: true, value: true,
showCancelButton: true, showCancelButton: true,
cancelButtonText: 'Custom cancel', cancelButtonText: 'Custom cancel',
confirmButtonText: 'Custom confirm' confirmButtonText: 'Custom confirm',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
@ -106,11 +106,11 @@ test('dialog component', () => {
test('default slot', () => { test('default slot', () => {
const wrapper = mount(DialogComponent, { const wrapper = mount(DialogComponent, {
propsData: { propsData: {
value: true value: true,
}, },
scopedSlots: { scopedSlots: {
default: () => 'Custom Message' default: () => 'Custom Message',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
@ -118,11 +118,11 @@ test('default slot', () => {
test('title slot', () => { test('title slot', () => {
const wrapper = mount(DialogComponent, { const wrapper = mount(DialogComponent, {
propsData: { propsData: {
value: true value: true,
}, },
scopedSlots: { scopedSlots: {
title: () => 'Custom Title' title: () => 'Custom Title',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
@ -139,8 +139,8 @@ test('width prop', () => {
const wrapper = mount(DialogComponent, { const wrapper = mount(DialogComponent, {
propsData: { propsData: {
value: true, value: true,
width: 200 width: 200,
} },
}); });
expect(wrapper.element.style.width).toEqual('200px'); expect(wrapper.element.style.width).toEqual('200px');

10
src/divider/demo/index.vue
View File

@ -47,22 +47,22 @@ export default {
dashed: '虚线', dashed: '虚线',
withText: '展示文本', withText: '展示文本',
contentPosition: '内容位置', contentPosition: '内容位置',
customStyle: '自定义样式' customStyle: '自定义样式',
}, },
'en-US': { 'en-US': {
text: 'Text', text: 'Text',
dashed: 'Dashed', dashed: 'Dashed',
withText: 'With Text', withText: 'With Text',
contentPosition: 'Content Position', contentPosition: 'Content Position',
customStyle: 'Custom Style' customStyle: 'Custom Style',
} },
}, },
data() { data() {
return { return {
BLUE BLUE,
}; };
} },
}; };
</script> </script>

8
src/divider/index.tsx
View File

@ -27,7 +27,7 @@ function Divider(
class={bem({ class={bem({
dashed: props.dashed, dashed: props.dashed,
hairline: props.hairline, hairline: props.hairline,
[`content-${props.contentPosition}`]: slots.default [`content-${props.contentPosition}`]: slots.default,
})} })}
{...inherit(ctx, true)} {...inherit(ctx, true)}
> >
@ -40,12 +40,12 @@ Divider.props = {
dashed: Boolean, dashed: Boolean,
hairline: { hairline: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
contentPosition: { contentPosition: {
type: String, type: String,
default: 'center' default: 'center',
} },
}; };
export default createComponent<DividerProps>(Divider); export default createComponent<DividerProps>(Divider);

16
src/dropdown-item/index.js
View File

@ -18,15 +18,15 @@ export default createComponent({
titleClass: String, titleClass: String,
options: { options: {
type: Array, type: Array,
default: () => [] default: () => [],
} },
}, },
data() { data() {
return { return {
transition: true, transition: true,
showPopup: false, showPopup: false,
showWrapper: false showWrapper: false,
}; };
}, },
@ -38,13 +38,13 @@ export default createComponent({
const match = this.options.filter(option => option.value === this.value); const match = this.options.filter(option => option.value === this.value);
return match.length ? match[0].text : ''; return match.length ? match[0].text : '';
} },
}, },
watch: { watch: {
showPopup(val) { showPopup(val) {
this.bindScroll(val); this.bindScroll(val);
} },
}, },
beforeCreate() { beforeCreate() {
@ -86,7 +86,7 @@ export default createComponent({
if (this.getContainer) { if (this.getContainer) {
event.stopPropagation(); event.stopPropagation();
} }
} },
}, },
render() { render() {
@ -97,7 +97,7 @@ export default createComponent({
duration, duration,
direction, direction,
activeColor, activeColor,
closeOnClickOverlay closeOnClickOverlay,
} = this.parent; } = this.parent;
const Options = this.options.map(option => { const Options = this.options.map(option => {
@ -164,5 +164,5 @@ export default createComponent({
</div> </div>
</div> </div>
); );
} },
}); });

22
src/dropdown-menu/demo/index.vue
View File

@ -55,13 +55,13 @@ export default {
option1: [ option1: [
{ text: '全部商品', value: 0 }, { text: '全部商品', value: 0 },
{ text: '新款商品', value: 1 }, { text: '新款商品', value: 1 },
{ text: '活动商品', value: 2 } { text: '活动商品', value: 2 },
], ],
option2: [ option2: [
{ text: '默认排序', value: 'a' }, { text: '默认排序', value: 'a' },
{ text: '好评排序', value: 'b' }, { text: '好评排序', value: 'b' },
{ text: '销量排序', value: 'c' } { text: '销量排序', value: 'c' },
] ],
}, },
'en-US': { 'en-US': {
disableMenu: 'Disable Menu', disableMenu: 'Disable Menu',
@ -74,14 +74,14 @@ export default {
option1: [ option1: [
{ text: 'Option1', value: 0 }, { text: 'Option1', value: 0 },
{ text: 'Option2', value: 1 }, { text: 'Option2', value: 1 },
{ text: 'Option3', value: 2 } { text: 'Option3', value: 2 },
], ],
option2: [ option2: [
{ text: 'Option A', value: 'a' }, { text: 'Option A', value: 'a' },
{ text: 'Option B', value: 'b' }, { text: 'Option B', value: 'b' },
{ text: 'Option C', value: 'c' } { text: 'Option C', value: 'c' },
] ],
} },
}, },
data() { data() {
@ -89,7 +89,7 @@ export default {
switch1: true, switch1: true,
switch2: false, switch2: false,
value1: 0, value1: 0,
value2: 'a' value2: 'a',
}; };
}, },
@ -100,13 +100,13 @@ export default {
option2() { option2() {
return this.$t('option2'); return this.$t('option2');
} },
}, },
methods: { methods: {
onConfirm() { onConfirm() {
this.$refs.item.toggle(); this.$refs.item.toggle();
} },
} },
}; };
</script> </script>

28
src/dropdown-menu/index.js
View File

@ -11,44 +11,44 @@ export default createComponent({
ParentMixin('vanDropdownMenu'), ParentMixin('vanDropdownMenu'),
ClickOutsideMixin({ ClickOutsideMixin({
event: 'click', event: 'click',
method: 'onClickOutside' method: 'onClickOutside',
}) }),
], ],
props: { props: {
activeColor: String, activeColor: String,
overlay: { overlay: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
zIndex: { zIndex: {
type: Number, type: Number,
default: 10 default: 10,
}, },
duration: { duration: {
type: Number, type: Number,
default: 0.2 default: 0.2,
}, },
direction: { direction: {
type: String, type: String,
default: 'down' default: 'down',
}, },
closeOnClickOverlay: { closeOnClickOverlay: {
type: Boolean, type: Boolean,
default: true default: true,
} },
}, },
data() { data() {
return { return {
offset: 0 offset: 0,
}; };
}, },
computed: { computed: {
scroller() { scroller() {
return getScroller(this.$el); return getScroller(this.$el);
} },
}, },
methods: { methods: {
@ -77,7 +77,7 @@ export default createComponent({
this.children.forEach(item => { this.children.forEach(item => {
item.toggle(false); item.toggle(false);
}); });
} },
}, },
render() { render() {
@ -96,9 +96,9 @@ export default createComponent({
class={[ class={[
bem('title', { bem('title', {
active: item.showPopup, active: item.showPopup,
down: item.showPopup === (this.direction === 'down') down: item.showPopup === (this.direction === 'down'),
}), }),
item.titleClass item.titleClass,
]} ]}
style={{ color: item.showPopup ? this.activeColor : '' }} style={{ color: item.showPopup ? this.activeColor : '' }}
> >
@ -113,5 +113,5 @@ export default createComponent({
{this.slots('default')} {this.slots('default')}
</div> </div>
); );
} },
}); });

38
src/dropdown-menu/test/index.spec.js
View File

@ -16,10 +16,10 @@ function renderWrapper(options = {}) {
closeOnClickOutside: options.closeOnClickOutside, closeOnClickOutside: options.closeOnClickOutside,
options: [ options: [
{ text: 'A', value: 0, icon: options.icon }, { text: 'A', value: 0, icon: options.icon },
{ text: 'B', value: 1, icon: options.icon } { text: 'B', value: 1, icon: options.icon },
] ],
}; };
} },
}); });
} }
@ -42,7 +42,7 @@ test('show dropdown item', async () => {
test('render option icon', async () => { test('render option icon', async () => {
const wrapper = renderWrapper({ const wrapper = renderWrapper({
icon: 'success' icon: 'success',
}); });
await later(); await later();
@ -55,7 +55,7 @@ test('render option icon', async () => {
test('close-on-click-outside', async () => { test('close-on-click-outside', async () => {
const wrapper = renderWrapper({ const wrapper = renderWrapper({
closeOnClickOutside: true closeOnClickOutside: true,
}); });
await later(); await later();
@ -69,7 +69,7 @@ test('close-on-click-outside', async () => {
test('disable close-on-click-outside', async () => { test('disable close-on-click-outside', async () => {
const wrapper = renderWrapper({ const wrapper = renderWrapper({
closeOnClickOutside: false closeOnClickOutside: false,
}); });
await later(); await later();
@ -86,7 +86,7 @@ test('direction up', async () => {
window.innerHeight = 1000; window.innerHeight = 1000;
const wrapper = renderWrapper({ const wrapper = renderWrapper({
direction: 'up' direction: 'up',
}); });
await later(); await later();
@ -140,10 +140,10 @@ test('destroy one item', async () => {
render: true, render: true,
options: [ options: [
{ text: 'A', value: 0 }, { text: 'A', value: 0 },
{ text: 'B', value: 1 } { text: 'B', value: 1 },
] ],
}; };
} },
}); });
await later(); await later();
@ -163,10 +163,10 @@ test('disable dropdown item', async () => {
value: 0, value: 0,
options: [ options: [
{ text: 'A', value: 0 }, { text: 'A', value: 0 },
{ text: 'B', value: 1 } { text: 'B', value: 1 },
] ],
}; };
} },
}); });
const title = wrapper.find('.van-dropdown-menu__title'); const title = wrapper.find('.van-dropdown-menu__title');
@ -189,13 +189,13 @@ test('change event', async () => {
value: 0, value: 0,
options: [ options: [
{ text: 'A', value: 0 }, { text: 'A', value: 0 },
{ text: 'B', value: 1 } { text: 'B', value: 1 },
] ],
}; };
}, },
methods: { methods: {
onChange onChange,
} },
}); });
await later(); await later();
@ -232,7 +232,7 @@ test('toggle method', async done => {
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
done(); done();
} },
}); });
}); });
@ -246,7 +246,7 @@ test('title slot', () => {
</template> </template>
</van-dropdown-item> </van-dropdown-item>
</van-dropdown-menu> </van-dropdown-menu>
` `,
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();

8
src/field/demo/index.vue
View File

@ -221,7 +221,7 @@ export default {
numberPlaceholder: 'Number', numberPlaceholder: 'Number',
messagePlaceholder: 'Message', messagePlaceholder: 'Message',
alignPlaceHolder: 'Input Align Right', alignPlaceHolder: 'Input Align Right',
} },
}, },
data() { data() {
@ -240,15 +240,15 @@ export default {
message2: '', message2: '',
phone: '', phone: '',
phone2: '12345', phone2: '12345',
formatValue: '' formatValue: '',
}; };
}, },
methods: { methods: {
formatter(value) { formatter(value) {
return value.replace(/\d/g, ''); return value.replace(/\d/g, '');
} },
} },
}; };
</script> </script>

30
src/field/index.js
View File

@ -33,20 +33,20 @@ export default createComponent({
showWordLimit: Boolean, showWordLimit: Boolean,
type: { type: {
type: String, type: String,
default: 'text' default: 'text',
} },
}, },
data() { data() {
return { return {
focused: false focused: false,
}; };
}, },
watch: { watch: {
value() { value() {
this.$nextTick(this.adjustSize); this.$nextTick(this.adjustSize);
} },
}, },
mounted() { mounted() {
@ -71,7 +71,7 @@ export default createComponent({
input: this.onInput, input: this.onInput,
keypress: this.onKeypress, keypress: this.onKeypress,
focus: this.onFocus, focus: this.onFocus,
blur: this.onBlur blur: this.onBlur,
}; };
delete listeners.click; delete listeners.click;
@ -84,7 +84,7 @@ export default createComponent({
if (labelWidth) { if (labelWidth) {
return { width: addUnit(labelWidth) }; return { width: addUnit(labelWidth) };
} }
} },
}, },
methods: { methods: {
@ -230,22 +230,22 @@ export default createComponent({
ref: 'input', ref: 'input',
class: bem('control', this.inputAlign), class: bem('control', this.inputAlign),
domProps: { domProps: {
value: this.value value: this.value,
}, },
attrs: { attrs: {
...this.$attrs, ...this.$attrs,
disabled: this.disabled, disabled: this.disabled,
readonly: this.readonly, readonly: this.readonly,
placeholder: this.placeholder placeholder: this.placeholder,
}, },
on: this.listeners, on: this.listeners,
// add model directive to skip IME composition // add model directive to skip IME composition
directives: [ directives: [
{ {
name: 'model', name: 'model',
value: this.value value: this.value,
} },
] ],
}; };
if (type === 'textarea') { if (type === 'textarea') {
@ -306,14 +306,14 @@ export default createComponent({
</div> </div>
); );
} }
} },
}, },
render() { render() {
const { slots, labelAlign } = this; const { slots, labelAlign } = this;
const scopedSlots = { const scopedSlots = {
icon: this.genLeftIcon icon: this.genLeftIcon,
}; };
if (slots('label')) { if (slots('label')) {
@ -336,7 +336,7 @@ export default createComponent({
class={bem({ class={bem({
error: this.error, error: this.error,
[`label-${labelAlign}`]: labelAlign, [`label-${labelAlign}`]: labelAlign,
'min-height': this.type === 'textarea' && !this.autosize 'min-height': this.type === 'textarea' && !this.autosize,
})} })}
scopedSlots={scopedSlots} scopedSlots={scopedSlots}
onClick={this.onClick} onClick={this.onClick}
@ -363,5 +363,5 @@ export default createComponent({
)} )}
</Cell> </Cell>
); );
} },
}); });

68
src/field/test/index.spec.js
View File

@ -22,8 +22,8 @@ test('click icon event', () => {
propsData: { propsData: {
value: 'a', value: 'a',
leftIcon: 'contact', leftIcon: 'contact',
rightIcon: 'search' rightIcon: 'search',
} },
}); });
wrapper.find('.van-field__left-icon').trigger('click'); wrapper.find('.van-field__left-icon').trigger('click');
@ -37,8 +37,8 @@ test('number type', () => {
const wrapper = mount(Field, { const wrapper = mount(Field, {
propsData: { propsData: {
value: '', value: '',
type: 'number' type: 'number',
} },
}); });
const input = wrapper.find('input'); const input = wrapper.find('input');
@ -60,8 +60,8 @@ test('digit type', () => {
const wrapper = mount(Field, { const wrapper = mount(Field, {
propsData: { propsData: {
value: '', value: '',
type: 'digit' type: 'digit',
} },
}); });
const input = wrapper.find('input'); const input = wrapper.find('input');
@ -83,8 +83,8 @@ test('render textarea', async () => {
const wrapper = mount(Field, { const wrapper = mount(Field, {
propsData: { propsData: {
type: 'textarea', type: 'textarea',
autosize: true autosize: true,
} },
}); });
await later(); await later();
@ -95,8 +95,8 @@ test('autosize textarea field', () => {
const wrapper = mount(Field, { const wrapper = mount(Field, {
propsData: { propsData: {
type: 'textarea', type: 'textarea',
autosize: {} autosize: {},
} },
}); });
const value = '1'.repeat(20); const value = '1'.repeat(20);
@ -112,9 +112,9 @@ test('autosize object', async () => {
type: 'textarea', type: 'textarea',
autosize: { autosize: {
maxHeight: 100, maxHeight: 100,
minHeight: 50 minHeight: 50,
} },
} },
}); });
const textarea = wrapper.find('.van-field__control'); const textarea = wrapper.find('.van-field__control');
@ -147,12 +147,12 @@ test('focus method', () => {
test('maxlength', async () => { test('maxlength', async () => {
const wrapper = mount(Field, { const wrapper = mount(Field, {
attrs: { attrs: {
maxlength: 3 maxlength: 3,
}, },
propsData: { propsData: {
value: 1234, value: 1234,
type: 'number' type: 'number',
} },
}); });
const input = wrapper.find('input'); const input = wrapper.find('input');
@ -170,8 +170,8 @@ test('clearable', () => {
const wrapper = mount(Field, { const wrapper = mount(Field, {
propsData: { propsData: {
value: 'test', value: 'test',
clearable: true clearable: true,
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -192,8 +192,8 @@ test('render input slot', () => {
</field> </field>
`, `,
components: { components: {
Field Field,
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -207,8 +207,8 @@ test('render label slot', () => {
</field> </field>
`, `,
components: { components: {
Field Field,
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -217,8 +217,8 @@ test('render label slot', () => {
test('size prop', () => { test('size prop', () => {
const wrapper = mount(Field, { const wrapper = mount(Field, {
propsData: { propsData: {
size: 'large' size: 'large',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
@ -227,8 +227,8 @@ test('label-width prop with unit', () => {
const wrapper = mount(Field, { const wrapper = mount(Field, {
propsData: { propsData: {
label: 'Label', label: 'Label',
labelWidth: '10rem' labelWidth: '10rem',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
@ -237,8 +237,8 @@ test('label-width prop without unit', () => {
const wrapper = mount(Field, { const wrapper = mount(Field, {
propsData: { propsData: {
label: 'Label', label: 'Label',
labelWidth: 100 labelWidth: 100,
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
@ -247,8 +247,8 @@ test('label-class prop', () => {
const wrapper = mount(Field, { const wrapper = mount(Field, {
propsData: { propsData: {
label: 'Label', label: 'Label',
labelClass: 'custom-label-class' labelClass: 'custom-label-class',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
@ -257,8 +257,8 @@ test('arrow-direction prop', () => {
const wrapper = mount(Field, { const wrapper = mount(Field, {
propsData: { propsData: {
isLink: true, isLink: true,
arrowDirection: 'up' arrowDirection: 'up',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
@ -267,8 +267,8 @@ test('formatter prop', () => {
const wrapper = mount(Field, { const wrapper = mount(Field, {
propsData: { propsData: {
value: 'abc123', value: 'abc123',
formatter: (value) => value.replace(/\d/g, '') formatter: (value) => value.replace(/\d/g, ''),
} },
}); });
const input = wrapper.find('input'); const input = wrapper.find('input');

12
src/goods-action-button/index.js
View File

@ -14,7 +14,7 @@ export default createComponent({
text: String, text: String,
color: String, color: String,
loading: Boolean, loading: Boolean,
disabled: Boolean disabled: Boolean,
}, },
computed: { computed: {
@ -26,14 +26,14 @@ export default createComponent({
isLast() { isLast() {
const next = this.parent && this.parent.children[this.index + 1]; const next = this.parent && this.parent.children[this.index + 1];
return !next || next.$options.name !== this.$options.name; return !next || next.$options.name !== this.$options.name;
} },
}, },
methods: { methods: {
onClick(event) { onClick(event) {
this.$emit('click', event); this.$emit('click', event);
route(this.$router, this); route(this.$router, this);
} },
}, },
render() { render() {
@ -42,9 +42,9 @@ export default createComponent({
class={bem([ class={bem([
{ {
first: this.isFirst, first: this.isFirst,
last: this.isLast last: this.isLast,
}, },
this.type this.type,
])} ])}
square square
size="large" size="large"
@ -57,5 +57,5 @@ export default createComponent({
{this.slots() || this.text} {this.slots() || this.text}
</Button> </Button>
); );
} },
}); });

6
src/goods-action-icon/index.js
View File

@ -14,7 +14,7 @@ export default createComponent({
icon: String, icon: String,
color: String, color: String,
info: [Number, String], info: [Number, String],
iconClass: null iconClass: null,
}, },
methods: { methods: {
@ -39,7 +39,7 @@ export default createComponent({
color={this.color} color={this.color}
/> />
); );
} },
}, },
render() { render() {
@ -49,5 +49,5 @@ export default createComponent({
{this.slots() || this.text} {this.slots() || this.text}
</div> </div>
); );
} },
}); });

10
src/goods-action/demo/index.vue
View File

@ -55,7 +55,7 @@ export default {
clickIcon: '点击图标', clickIcon: '点击图标',
clickButton: '点击按钮', clickButton: '点击按钮',
customIconColor: '自定义图标颜色', customIconColor: '自定义图标颜色',
customButtonColor: '自定义按钮颜色' customButtonColor: '自定义按钮颜色',
}, },
'en-US': { 'en-US': {
icon1: 'Icon1', icon1: 'Icon1',
@ -68,8 +68,8 @@ export default {
clickIcon: 'Click Icon', clickIcon: 'Click Icon',
clickButton: 'Click Button', clickButton: 'Click Button',
customIconColor: 'Custom Icon Color', customIconColor: 'Custom Icon Color',
customButtonColor: 'Custom Button Color' customButtonColor: 'Custom Button Color',
} },
}, },
methods: { methods: {
onClickIcon() { onClickIcon() {
@ -77,8 +77,8 @@ export default {
}, },
onClickButton() { onClickButton() {
this.$toast(this.$t('clickButton')); this.$toast(this.$t('clickButton'));
} },
} },
}; };
</script> </script>

4
src/goods-action/index.js
View File

@ -7,7 +7,7 @@ export default createComponent({
mixins: [ParentMixin('vanGoodsAction')], mixins: [ParentMixin('vanGoodsAction')],
props: { props: {
safeAreaInsetBottom: Boolean safeAreaInsetBottom: Boolean,
}, },
render() { render() {
@ -16,5 +16,5 @@ export default createComponent({
{this.slots()} {this.slots()}
</div> </div>
); );
} },
}); });

10
src/goods-action/test/index.spec.js
View File

@ -18,7 +18,7 @@ test('Button render default slot', () => {
const wrapper = mount({ const wrapper = mount({
render(h) { render(h) {
return h(Button, null, ['Default Content']); return h(Button, null, ['Default Content']);
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -28,7 +28,7 @@ test('Icon render default slot', () => {
const wrapper = mount({ const wrapper = mount({
render(h) { render(h) {
return h(Icon, null, ['Default Content']); return h(Icon, null, ['Default Content']);
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -40,10 +40,10 @@ test('Icon render icon slot', () => {
return h(Icon, { return h(Icon, {
scopedSlots: { scopedSlots: {
default: () => 'Text', default: () => 'Text',
icon: () => 'Custom Icon' icon: () => 'Custom Icon',
} },
}); });
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();

18
src/grid-item/index.js
View File

@ -15,7 +15,7 @@ export default createComponent({
dot: Boolean, dot: Boolean,
text: String, text: String,
icon: String, icon: String,
info: [Number, String] info: [Number, String],
}, },
computed: { computed: {
@ -24,7 +24,7 @@ export default createComponent({
const percent = `${100 / columnNum}%`; const percent = `${100 / columnNum}%`;
const style = { const style = {
flexBasis: percent flexBasis: percent,
}; };
if (square) { if (square) {
@ -50,10 +50,10 @@ export default createComponent({
return { return {
right: gutterValue, right: gutterValue,
bottom: gutterValue, bottom: gutterValue,
height: 'auto' height: 'auto',
}; };
} }
} },
}, },
methods: { methods: {
@ -96,9 +96,9 @@ export default createComponent({
return [ return [
this.genIcon(), this.genIcon(),
this.slots('text') || (this.text && <span class={bem('text')}>{this.text}</span>) this.slots('text') || (this.text && <span class={bem('text')}>{this.text}</span>),
]; ];
} },
}, },
render() { render() {
@ -115,9 +115,9 @@ export default createComponent({
center, center,
square, square,
clickable, clickable,
surround: border && gutter surround: border && gutter,
}), }),
{ [BORDER]: border } { [BORDER]: border },
]} ]}
onClick={this.onClick} onClick={this.onClick}
> >
@ -125,5 +125,5 @@ export default createComponent({
</div> </div>
</div> </div>
); );
} },
}); });

8
src/grid/demo/index.vue
View File

@ -66,7 +66,7 @@ export default {
customContent: '自定义内容', customContent: '自定义内容',
urlRoute: 'URL 跳转', urlRoute: 'URL 跳转',
vueRoute: '路由跳转', vueRoute: '路由跳转',
showInfo: '提示信息' showInfo: '提示信息',
}, },
'en-US': { 'en-US': {
text: 'Text', text: 'Text',
@ -77,9 +77,9 @@ export default {
customContent: 'Custom Content', customContent: 'Custom Content',
urlRoute: 'URL', urlRoute: 'URL',
vueRoute: 'Vue Router', vueRoute: 'Vue Router',
showInfo: 'Show Info' showInfo: 'Show Info',
} },
} },
}; };
</script> </script>

14
src/grid/index.js
View File

@ -14,16 +14,16 @@ export default createComponent({
clickable: Boolean, clickable: Boolean,
columnNum: { columnNum: {
type: Number, type: Number,
default: 4 default: 4,
}, },
center: { center: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
border: { border: {
type: Boolean, type: Boolean,
default: true default: true,
} },
}, },
computed: { computed: {
@ -32,10 +32,10 @@ export default createComponent({
if (gutter) { if (gutter) {
return { return {
paddingLeft: addUnit(gutter) paddingLeft: addUnit(gutter),
}; };
} }
} },
}, },
render() { render() {
@ -47,5 +47,5 @@ export default createComponent({
{this.slots()} {this.slots()}
</div> </div>
); );
} },
}); });

10
src/grid/test/index.spec.js
View File

@ -9,8 +9,8 @@ test('click grid item', () => {
</van-grid> </van-grid>
`, `,
methods: { methods: {
onClick onClick,
} },
}); });
const Item = wrapper.find('.van-grid-item__content'); const Item = wrapper.find('.van-grid-item__content');
@ -27,7 +27,7 @@ test('sqaure and set gutter', () => {
<van-grid-item /> <van-grid-item />
<van-grid-item /> <van-grid-item />
</van-grid> </van-grid>
` `,
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -39,7 +39,7 @@ test('icon-size prop', () => {
<van-grid icon-size="10"> <van-grid icon-size="10">
<van-grid-item icon="success" /> <van-grid-item icon="success" />
</van-grid> </van-grid>
` `,
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -53,7 +53,7 @@ test('render icon-slot', () => {
<div slot="icon" /> <div slot="icon" />
</van-grid-item> </van-grid-item>
</van-grid> </van-grid>
` `,
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();

14
src/icon/demo/index.vue
View File

@ -120,7 +120,7 @@ export default {
filled: '实底风格', filled: '实底风格',
demo: '用法示例', demo: '用法示例',
color: '图标颜色', color: '图标颜色',
size: '图标大小' size: '图标大小',
}, },
'en-US': { 'en-US': {
title: 'Icon List', title: 'Icon List',
@ -131,8 +131,8 @@ export default {
filled: 'Filled', filled: 'Filled',
demo: 'Demo', demo: 'Demo',
color: 'Icon Color', color: 'Icon Color',
size: 'Icon Size' size: 'Icon Size',
} },
}, },
data() { data() {
@ -142,7 +142,7 @@ export default {
return { return {
tab: 0, tab: 0,
demoIcon: 'chat-o', demoIcon: 'chat-o',
demoImage: 'https://b.yzcdn.cn/vant/icon-demo-1126.png' demoImage: 'https://b.yzcdn.cn/vant/icon-demo-1126.png',
}; };
}, },
@ -168,10 +168,10 @@ export default {
type: 'success', type: 'success',
duration: 1500, duration: 1500,
className: 'demo-icon-notify', className: 'demo-icon-notify',
message: `${this.$t('copied')}：${tag}` message: `${this.$t('copied')}：${tag}`,
}); });
} },
} },
}; };
</script> </script>

12
src/icon/index.tsx
View File

@ -29,7 +29,7 @@ function isImage(name?: string): boolean {
// compatible with legacy usage, should be removed in next major version // compatible with legacy usage, should be removed in next major version
const LEGACY_MAP: Record<string, string> = { const LEGACY_MAP: Record<string, string> = {
medel: 'medal', medel: 'medal',
'medel-o': 'medal-o' 'medel-o': 'medal-o',
}; };
function correctName(name?: string) { function correctName(name?: string) {
@ -49,11 +49,11 @@ function Icon(
<props.tag <props.tag
class={[ class={[
props.classPrefix, props.classPrefix,
imageIcon ? '' : `${props.classPrefix}-${name}` imageIcon ? '' : `${props.classPrefix}-${name}`,
]} ]}
style={{ style={{
color: props.color, color: props.color,
fontSize: addUnit(props.size) fontSize: addUnit(props.size),
}} }}
{...inherit(ctx, true)} {...inherit(ctx, true)}
> >
@ -72,12 +72,12 @@ Icon.props = {
color: String, color: String,
tag: { tag: {
type: String, type: String,
default: 'i' default: 'i',
}, },
classPrefix: { classPrefix: {
type: String, type: String,
default: bem() default: bem(),
} },
}; };
export default createComponent<IconProps, IconEvents>(Icon); export default createComponent<IconProps, IconEvents>(Icon);

26
src/icon/test/index.spec.js
View File

@ -4,8 +4,8 @@ import { mount } from '../../../test';
test('render icon with builtin icon name', () => { test('render icon with builtin icon name', () => {
const wrapper = mount(Icon, { const wrapper = mount(Icon, {
propsData: { propsData: {
name: 'success' name: 'success',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
@ -13,8 +13,8 @@ test('render icon with builtin icon name', () => {
test('render icon with url name', () => { test('render icon with url name', () => {
const wrapper = mount(Icon, { const wrapper = mount(Icon, {
propsData: { propsData: {
name: 'https://img.yzcdn.com/icon.jpg' name: 'https://img.yzcdn.com/icon.jpg',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
@ -22,8 +22,8 @@ test('render icon with url name', () => {
test('render icon with local image', () => { test('render icon with local image', () => {
const wrapper = mount(Icon, { const wrapper = mount(Icon, {
propsData: { propsData: {
name: '/assets/icon.jpg' name: '/assets/icon.jpg',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
@ -32,7 +32,7 @@ test('render icon default slot', () => {
const wrapper = mount({ const wrapper = mount({
render(h) { render(h) {
return h(Icon, { props: { name: 'success' } }, ['Default slot']); return h(Icon, { props: { name: 'success' } }, ['Default slot']);
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
@ -40,8 +40,8 @@ test('render icon default slot', () => {
test('tag prop', () => { test('tag prop', () => {
const wrapper = mount(Icon, { const wrapper = mount(Icon, {
propsData: { propsData: {
tag: 'div' tag: 'div',
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
@ -49,8 +49,8 @@ test('tag prop', () => {
test('dot prop', () => { test('dot prop', () => {
const wrapper = mount(Icon, { const wrapper = mount(Icon, {
propsData: { propsData: {
dot: true dot: true,
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
@ -58,8 +58,8 @@ test('dot prop', () => {
test('size without unit', () => { test('size without unit', () => {
const wrapper = mount(Icon, { const wrapper = mount(Icon, {
propsData: { propsData: {
size: 20 size: 20,
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });

42
src/image-preview/ImagePreview.js
View File

@ -20,9 +20,9 @@ function getDistance(touches) {
export default createComponent({ export default createComponent({
mixins: [ mixins: [
PopupMixin({ PopupMixin({
skipToggleEvent: true skipToggleEvent: true,
}), }),
TouchMixin TouchMixin,
], ],
props: { props: {
@ -32,40 +32,40 @@ export default createComponent({
showIndicators: Boolean, showIndicators: Boolean,
images: { images: {
type: Array, type: Array,
default: () => [] default: () => [],
}, },
loop: { loop: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
swipeDuration: { swipeDuration: {
type: Number, type: Number,
default: 500 default: 500,
}, },
overlay: { overlay: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
showIndex: { showIndex: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
startPosition: { startPosition: {
type: Number, type: Number,
default: 0 default: 0,
}, },
minZoom: { minZoom: {
type: Number, type: Number,
default: 1 / 3 default: 1 / 3,
}, },
maxZoom: { maxZoom: {
type: Number, type: Number,
default: 3 default: 3,
}, },
overlayClass: { overlayClass: {
type: String, type: String,
default: bem('overlay') default: bem('overlay'),
} },
}, },
data() { data() {
@ -76,7 +76,7 @@ export default createComponent({
active: 0, active: 0,
moving: false, moving: false,
zooming: false, zooming: false,
doubleClickTimer: null doubleClickTimer: null,
}; };
}, },
@ -84,7 +84,7 @@ export default createComponent({
imageStyle() { imageStyle() {
const { scale } = this; const { scale } = this;
const style = { const style = {
transitionDuration: this.zooming || this.moving ? '0s' : '.3s' transitionDuration: this.zooming || this.moving ? '0s' : '.3s',
}; };
if (scale !== 1) { if (scale !== 1) {
@ -93,7 +93,7 @@ export default createComponent({
} }
return style; return style;
} },
}, },
watch: { watch: {
@ -106,7 +106,7 @@ export default createComponent({
} else { } else {
this.$emit('close', { this.$emit('close', {
index: this.active, index: this.active,
url: this.images[this.active] url: this.images[this.active],
}); });
} }
}, },
@ -127,8 +127,8 @@ export default createComponent({
}); });
} }
}, },
immediate: true immediate: true,
} },
}, },
methods: { methods: {
@ -288,7 +288,7 @@ export default createComponent({
genImages() { genImages() {
const imageSlots = { const imageSlots = {
loading: () => <Loading type="spinner" /> loading: () => <Loading type="spinner" />,
}; };
return ( return (
@ -320,7 +320,7 @@ export default createComponent({
))} ))}
</Swipe> </Swipe>
); );
} },
}, },
render() { render() {
@ -337,5 +337,5 @@ export default createComponent({
</div> </div>
</transition> </transition>
); );
} },
}); });

16
src/image-preview/demo/index.vue
View File

@ -41,7 +41,7 @@ const images = [
'https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-1.jpg',
'https://img.yzcdn.cn/vant/apple-2.jpg', 'https://img.yzcdn.cn/vant/apple-2.jpg',
'https://img.yzcdn.cn/vant/apple-3.jpg', 'https://img.yzcdn.cn/vant/apple-3.jpg',
'https://img.yzcdn.cn/vant/apple-4.jpg' 'https://img.yzcdn.cn/vant/apple-4.jpg',
]; ];
export default { export default {
@ -51,22 +51,22 @@ export default {
button2: '指定初始位置', button2: '指定初始位置',
button3: '异步关闭', button3: '异步关闭',
componentCall: '组件调用', componentCall: '组件调用',
index: index => `第${index + 1}页` index: index => `第${index + 1}页`,
}, },
'en-US': { 'en-US': {
button1: 'Show Images', button1: 'Show Images',
button2: 'Custom Start Position', button2: 'Custom Start Position',
button3: 'Async Close', button3: 'Async Close',
componentCall: 'Component Call', componentCall: 'Component Call',
index: index => `Page: ${index}` index: index => `Page: ${index}`,
} },
}, },
data() { data() {
return { return {
show: false, show: false,
images, images,
index: 0 index: 0,
}; };
}, },
@ -86,7 +86,7 @@ export default {
swipeDuration: 300, swipeDuration: 300,
asyncClose: !!timer, asyncClose: !!timer,
closeOnPopstate: true, closeOnPopstate: true,
startPosition: typeof position === 'number' ? position : 0 startPosition: typeof position === 'number' ? position : 0,
}); });
if (timer) { if (timer) {
@ -94,8 +94,8 @@ export default {
instance.close(); instance.close();
}, timer); }, timer);
} }
} },
} },
}; };
</script> </script>

4
src/image-preview/index.js
View File

@ -19,12 +19,12 @@ const defaultConfig = {
startPosition: 0, startPosition: 0,
swipeDuration: 500, swipeDuration: 500,
showIndicators: false, showIndicators: false,
closeOnPopstate: false closeOnPopstate: false,
}; };
const initInstance = () => { const initInstance = () => {
instance = new (Vue.extend(VueImagePreview))({ instance = new (Vue.extend(VueImagePreview))({
el: document.createElement('div') el: document.createElement('div'),
}); });
document.body.appendChild(instance.$el); document.body.appendChild(instance.$el);

36
src/image-preview/test/index.spec.js
View File

@ -15,12 +15,12 @@ function triggerZoom(el, x, y) {
const images = [ const images = [
'https://img.yzcdn.cn/1.png', 'https://img.yzcdn.cn/1.png',
'https://img.yzcdn.cn/2.png', 'https://img.yzcdn.cn/2.png',
'https://img.yzcdn.cn/3.png' 'https://img.yzcdn.cn/3.png',
]; ];
test('render image', async () => { test('render image', async () => {
const wrapper = mount(ImagePreviewVue, { const wrapper = mount(ImagePreviewVue, {
propsData: { images, value: true } propsData: { images, value: true },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -43,13 +43,13 @@ test('async close prop', async () => {
propsData: { propsData: {
images, images,
value: true, value: true,
asyncClose: true asyncClose: true,
}, },
listeners: { listeners: {
input(value) { input(value) {
wrapper.setProps({ value }); wrapper.setProps({ value });
} },
} },
}); });
const swipe = wrapper.find('.van-swipe__track'); const swipe = wrapper.find('.van-swipe__track');
@ -99,7 +99,7 @@ test('onClose option', () => {
const instance = ImagePreview({ const instance = ImagePreview({
images, images,
startPostion: 1, startPostion: 1,
onClose onClose,
}); });
instance.close(); instance.close();
@ -115,7 +115,7 @@ test('onChange option', async done => {
onChange(index) { onChange(index) {
expect(index).toEqual(2); expect(index).toEqual(2);
done(); done();
} },
}); });
const swipe = instance.$el.querySelector('.van-swipe__track'); const swipe = instance.$el.querySelector('.van-swipe__track');
@ -132,7 +132,7 @@ test('zoom', async () => {
Element.prototype.getBoundingClientRect = jest.fn(() => ({ width: 100 })); Element.prototype.getBoundingClientRect = jest.fn(() => ({ width: 100 }));
const wrapper = mount(ImagePreviewVue, { const wrapper = mount(ImagePreviewVue, {
propsData: { images, value: true } propsData: { images, value: true },
}); });
const image = wrapper.find('img'); const image = wrapper.find('img');
@ -146,8 +146,8 @@ test('set show-index prop to false', () => {
const wrapper = mount(ImagePreviewVue, { const wrapper = mount(ImagePreviewVue, {
propsData: { propsData: {
value: true, value: true,
showIndex: false showIndex: false,
} },
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -159,7 +159,7 @@ test('index slot', () => {
<van-image-preview :value="true"> <van-image-preview :value="true">
<template #index>Custom Index</template> <template #index>Custom Index</template>
</van-image-preview> </van-image-preview>
` `,
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -171,7 +171,7 @@ test('cover slot', () => {
<van-image-preview :value="true"> <van-image-preview :value="true">
<template #cover>Custom Cover Content</template> <template #cover>Custom Cover Content</template>
</van-image-preview> </van-image-preview>
` `,
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
@ -182,8 +182,8 @@ test('closeOnPopstate', () => {
propsData: { propsData: {
images, images,
value: true, value: true,
closeOnPopstate: true closeOnPopstate: true,
} },
}); });
trigger(window, 'popstate'); trigger(window, 'popstate');
@ -191,7 +191,7 @@ test('closeOnPopstate', () => {
wrapper.setProps({ wrapper.setProps({
value: true, value: true,
closeOnPopstate: false closeOnPopstate: false,
}); });
trigger(window, 'popstate'); trigger(window, 'popstate');
@ -202,12 +202,12 @@ test('lazy-load prop', () => {
const wrapper = mount(ImagePreviewVue, { const wrapper = mount(ImagePreviewVue, {
propsData: { propsData: {
images, images,
lazyLoad: true lazyLoad: true,
} },
}); });
wrapper.setProps({ wrapper.setProps({
value: true value: true,
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();

10
src/image/demo/index.vue
View File

@ -70,7 +70,7 @@ export default {
error: '加载失败提示', error: '加载失败提示',
defaultTip: '默认提示', defaultTip: '默认提示',
customTip: '自定义提示', customTip: '自定义提示',
loadFail: '加载失败' loadFail: '加载失败',
}, },
'en-US': { 'en-US': {
fitMode: 'Fit Mode', fitMode: 'Fit Mode',
@ -79,16 +79,16 @@ export default {
error: 'Error', error: 'Error',
defaultTip: 'Default Tip', defaultTip: 'Default Tip',
customTip: 'Custom Tip', customTip: 'Custom Tip',
loadFail: 'Load failed' loadFail: 'Load failed',
} },
}, },
data() { data() {
return { return {
image: 'https://img.yzcdn.cn/vant/cat.jpeg', image: 'https://img.yzcdn.cn/vant/cat.jpeg',
fits: ['contain', 'cover', 'fill', 'none', 'scale-down'] fits: ['contain', 'cover', 'fill', 'none', 'scale-down'],
}; };
} },
}; };
</script> </script>

26
src/image/index.js
View File

@ -15,26 +15,26 @@ export default createComponent({
lazyLoad: Boolean, lazyLoad: Boolean,
showError: { showError: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
showLoading: { showLoading: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
errorIcon: { errorIcon: {
type: String, type: String,
default: 'warning-o' default: 'warning-o',
}, },
loadingIcon: { loadingIcon: {
type: String, type: String,
default: 'photo-o' default: 'photo-o',
} },
}, },
data() { data() {
return { return {
loading: true, loading: true,
error: false error: false,
}; };
}, },
@ -42,7 +42,7 @@ export default createComponent({
src() { src() {
this.loading = true; this.loading = true;
this.error = false; this.error = false;
} },
}, },
computed: { computed: {
@ -63,7 +63,7 @@ export default createComponent({
} }
return style; return style;
} },
}, },
created() { created() {
@ -138,11 +138,11 @@ export default createComponent({
const imgData = { const imgData = {
class: bem('img'), class: bem('img'),
attrs: { attrs: {
alt: this.alt alt: this.alt,
}, },
style: { style: {
objectFit: this.fit objectFit: this.fit,
} },
}; };
if (this.error) { if (this.error) {
@ -161,7 +161,7 @@ export default createComponent({
{...imgData} {...imgData}
/> />
); );
} },
}, },
render() { render() {
@ -175,5 +175,5 @@ export default createComponent({
{this.genPlaceholder()} {this.genPlaceholder()}
</div> </div>
); );
} },
}); });

Some files were not shown because too many files have changed in this diff Show More