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

breaking change: event name become camelCase

Browse Source
This commit is contained in:
chenjiahan 2022-02-10 16:49:45 +08:00
parent c9c312c4ba
commit 8ca9741845
35 changed files with 139 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/vant/src/address-edit/AddressEdit.tsx
View File

@ -102,11 +102,11 @@ export default defineComponent({
'save', 'save',
'focus', 'focus',
'delete', 'delete',
'click-area', 'clickArea',
'change-area', 'changeArea',
'change-detail', 'changeDetail',
'select-search', 'selectSearch',
'change-default', 'changeDefault',
], ],
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
@ -188,7 +188,7 @@ export default defineComponent({
const onChangeDetail = (val: string) => { const onChangeDetail = (val: string) => {
data.addressDetail = val; data.addressDetail = val;
emit('change-detail', val); emit('changeDetail', val);
}; };
const onAreaConfirm = (values: AreaColumnOption[]) => { const onAreaConfirm = (values: AreaColumnOption[]) => {
@ -199,7 +199,7 @@ export default defineComponent({
} else { } else {
showAreaPopup.value = false; showAreaPopup.value = false;
assignAreaValues(); assignAreaValues();
emit('change-area', values); emit('changeArea', values);
} }
}; };
@ -235,7 +235,7 @@ export default defineComponent({
<Switch <Switch
v-model={data.isDefault} v-model={data.isDefault}
size="24" size="24"
onChange={(event) => emit('change-default', event)} onChange={(event) => emit('changeDefault', event)}
/> />
), ),
}; };
@ -309,7 +309,7 @@ export default defineComponent({
placeholder={props.areaPlaceholder || t('area')} placeholder={props.areaPlaceholder || t('area')}
onFocus={() => onFocus('areaCode')} onFocus={() => onFocus('areaCode')}
onClick={() => { onClick={() => {
emit('click-area'); emit('clickArea');
showAreaPopup.value = !disableArea; showAreaPopup.value = !disableArea;
}} }}
/> />
@ -325,7 +325,7 @@ export default defineComponent({
onBlur={onDetailBlur} onBlur={onDetailBlur}
onFocus={() => onFocus('addressDetail')} onFocus={() => onFocus('addressDetail')}
onInput={onChangeDetail} onInput={onChangeDetail}
onSelect-search={(event: Event) => emit('select-search', event)} onSelectSearch={(event: Event) => emit('selectSearch', event)}
/> />
{props.showPostal && ( {props.showPostal && (
<Field <Field

4
packages/vant/src/address-edit/AddressEditDetail.tsx
View File

@ -28,7 +28,7 @@ export default defineComponent({
showSearchResult: Boolean, showSearchResult: Boolean,
}, },
emits: ['blur', 'focus', 'input', 'select-search'], emits: ['blur', 'focus', 'input', 'selectSearch'],
setup(props, { emit }) { setup(props, { emit }) {
const field = ref<FieldInstance>(); const field = ref<FieldInstance>();
@ -37,7 +37,7 @@ export default defineComponent({
props.focused && props.searchResult && props.showSearchResult; props.focused && props.searchResult && props.showSearchResult;
const onSelect = (express: AddressEditSearchItem) => { const onSelect = (express: AddressEditSearchItem) => {
emit('select-search', express); emit('selectSearch', express);
emit('input', `${express.address || ''} ${express.name || ''}`.trim()); emit('input', `${express.address || ''} ${express.name || ''}`.trim());
}; };

8
packages/vant/src/address-edit/test/index.legacy.js
View File

@ -112,13 +112,13 @@ test('should valid postal code and render error message correctly', async () =>
expect(fields[4].html()).toMatchSnapshot(); expect(fields[4].html()).toMatchSnapshot();
}); });
test('should emit change-detail event after changing address detail', () => { test('should emit changeDetail event after changing address detail', () => {
const wrapper = mount(AddressEdit); const wrapper = mount(AddressEdit);
const field = wrapper.findAll('.van-field__control')[3]; const field = wrapper.findAll('.van-field__control')[3];
field.element.value = '123'; field.element.value = '123';
field.trigger('input'); field.trigger('input');
expect(wrapper.emitted('change-detail')[0][0]).toEqual('123'); expect(wrapper.emitted('changeDetail')[0][0]).toEqual('123');
}); });
test('should return current areas after calling getArea method', () => { test('should return current areas after calling getArea method', () => {
@ -204,7 +204,7 @@ test('should update address detail after calling the setAddressDetail method', a
expect(textarea.element.value).toEqual('test'); expect(textarea.element.value).toEqual('test');
}); });
test('should emit click-area event after clicking the area field', () => { test('should emit clickArea event after clicking the area field', () => {
const wrapper = mount(AddressEdit, { const wrapper = mount(AddressEdit, {
props: { props: {
disableArea: true, disableArea: true,
@ -213,7 +213,7 @@ test('should emit click-area event after clicking the area field', () => {
const field = wrapper.findAll('.van-field')[2]; const field = wrapper.findAll('.van-field')[2];
field.trigger('click'); field.trigger('click');
expect(wrapper.emitted('click-area')[0]).toBeTruthy(); expect(wrapper.emitted('clickArea')[0]).toBeTruthy();
}); });
test('should limit tel maxlength when using tel-maxlength prop', () => { test('should limit tel maxlength when using tel-maxlength prop', () => {

12
packages/vant/src/address-list/AddressList.tsx
View File

@ -36,9 +36,9 @@ export default defineComponent({
'add', 'add',
'edit', 'edit',
'select', 'select',
'click-item', 'clickItem',
'edit-disabled', 'editDisabled',
'select-disabled', 'selectDisabled',
'update:modelValue', 'update:modelValue',
], ],
@ -49,12 +49,12 @@ export default defineComponent({
disabled?: boolean disabled?: boolean
) => { ) => {
const onEdit = () => const onEdit = () =>
emit(disabled ? 'edit-disabled' : 'edit', item, index); emit(disabled ? 'editDisabled' : 'edit', item, index);
const onClick = () => emit('click-item', item, index); const onClick = () => emit('clickItem', item, index);
const onSelect = () => { const onSelect = () => {
emit(disabled ? 'select-disabled' : 'select', item, index); emit(disabled ? 'selectDisabled' : 'select', item, index);
if (!disabled) { if (!disabled) {
emit('update:modelValue', item.id); emit('update:modelValue', item.id);

4
packages/vant/src/address-list/test/index.spec.ts
View File

@ -39,7 +39,7 @@ test('should emit select event after clicking radio icon', () => {
expect(wrapper.emitted('select')![0]).toEqual([list[0], 0]); expect(wrapper.emitted('select')![0]).toEqual([list[0], 0]);
}); });
test('should emit click-item event when item is clicked', () => { test('should emit clickItem event when item is clicked', () => {
const wrapper = mount(AddressList, { const wrapper = mount(AddressList, {
props: { props: {
list, list,
@ -48,7 +48,7 @@ test('should emit click-item event when item is clicked', () => {
wrapper.find('.van-address-item').trigger('click'); wrapper.find('.van-address-item').trigger('click');
expect(wrapper.emitted('click-item')![0]).toEqual([list[0], 0]); expect(wrapper.emitted('clickItem')![0]).toEqual([list[0], 0]);
}); });
test('should render tag slot correctly', () => { test('should render tag slot correctly', () => {

14
packages/vant/src/calendar/Calendar.tsx
View File

@ -111,10 +111,10 @@ export default defineComponent({
'select', 'select',
'confirm', 'confirm',
'unselect', 'unselect',
'month-show', 'monthShow',
'over-range', 'overRange',
'update:show', 'update:show',
'click-subtitle', 'clickSubtitle',
], ],
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
@ -243,7 +243,7 @@ export default defineComponent({
if (!monthRefs.value[i].showed) { if (!monthRefs.value[i].showed) {
monthRefs.value[i].showed = true; monthRefs.value[i].showed = true;
emit('month-show', { emit('monthShow', {
date: month.date, date: month.date,
title: month.getTitle(), title: month.getTitle(),
}); });
@ -323,7 +323,7 @@ export default defineComponent({
if (showRangePrompt) { if (showRangePrompt) {
Toast(rangePrompt || t('rangePrompt', maxRange)); Toast(rangePrompt || t('rangePrompt', maxRange));
} }
emit('over-range'); emit('overRange');
return false; return false;
} }
@ -522,9 +522,7 @@ export default defineComponent({
showTitle={props.showTitle} showTitle={props.showTitle}
showSubtitle={props.showSubtitle} showSubtitle={props.showSubtitle}
firstDayOfWeek={dayOffset.value} firstDayOfWeek={dayOffset.value}
onClick-subtitle={(event: MouseEvent) => onClickSubtitle={(event: MouseEvent) => emit('clickSubtitle', event)}
emit('click-subtitle', event)
}
/> />
<div ref={bodyRef} class={bem('body')} onScroll={onScroll}> <div ref={bodyRef} class={bem('body')} onScroll={onScroll}>
{months.value.map(renderMonth)} {months.value.map(renderMonth)}

5
packages/vant/src/calendar/CalendarHeader.tsx
View File

@ -15,7 +15,7 @@ export default defineComponent({
firstDayOfWeek: Number, firstDayOfWeek: Number,
}, },
emits: ['click-subtitle'], emits: ['clickSubtitle'],
setup(props, { slots, emit }) { setup(props, { slots, emit }) {
const renderTitle = () => { const renderTitle = () => {
@ -26,8 +26,7 @@ export default defineComponent({
} }
}; };
const onClickSubtitle = (event: MouseEvent) => const onClickSubtitle = (event: MouseEvent) => emit('clickSubtitle', event);
emit('click-subtitle', event);
const renderSubtitle = () => { const renderSubtitle = () => {
if (props.showSubtitle) { if (props.showSubtitle) {

2
packages/vant/src/calendar/CalendarMonth.tsx
View File

@ -62,7 +62,7 @@ export default defineComponent({
props: calendarMonthProps, props: calendarMonthProps,
emits: ['click', 'update-height'], emits: ['click'],
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
const [visible, setVisible] = useToggle(); const [visible, setVisible] = useToggle();

4
packages/vant/src/calendar/test/index.spec.ts
View File

@ -555,7 +555,7 @@ test('should render top-info and bottom-info slot correctly', async () => {
expect(wrapper.find('.van-calendar__day').html()).toMatchSnapshot(); expect(wrapper.find('.van-calendar__day').html()).toMatchSnapshot();
}); });
test('should emit click-subtitle event when clicking the subtitle', async () => { test('should emit clickSubtitle event when clicking the subtitle', async () => {
const wrapper = mount(Calendar, { const wrapper = mount(Calendar, {
props: { props: {
minDate, minDate,
@ -567,7 +567,7 @@ test('should emit click-subtitle event when clicking the subtitle', async () =>
await later(); await later();
wrapper.find('.van-calendar__header-subtitle').trigger('click'); wrapper.find('.van-calendar__header-subtitle').trigger('click');
expect(wrapper.emitted('click-subtitle')).toBeTruthy(); expect(wrapper.emitted('clickSubtitle')).toBeTruthy();
}); });
test('should render confirm-text slot correctly', async () => { test('should render confirm-text slot correctly', async () => {

6
packages/vant/src/calendar/test/prop.spec.ts
View File

@ -167,7 +167,7 @@ test('lazy-render prop', () => {
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
}); });
test('month-show event', async () => { test('monthShow event', async () => {
const wrapper = mount(Calendar, { const wrapper = mount(Calendar, {
props: { props: {
show: true, show: true,
@ -175,7 +175,7 @@ test('month-show event', async () => {
}); });
await later(200); await later(200);
expect(wrapper.emitted('month-show')).toBeTruthy(); expect(wrapper.emitted('monthShow')).toBeTruthy();
}); });
test('first day of week', async () => { test('first day of week', async () => {
@ -248,7 +248,7 @@ test('should disabled prompt when using show-range-prompt prop', async () => {
expect(document.querySelector('.van-toast')).toBeFalsy(); expect(document.querySelector('.van-toast')).toBeFalsy();
}); });
test('should emit over-range when exceeded max range', async () => { test('should emit overRange when exceeded max range', async () => {
const onOverRange = jest.fn(); const onOverRange = jest.fn();
const wrapper = mount(Calendar, { const wrapper = mount(Calendar, {
props: { props: {

4
packages/vant/src/card/Card.tsx
View File

@ -30,7 +30,7 @@ export default defineComponent({
props: cardProps, props: cardProps,
emits: ['click-thumb'], emits: ['clickThumb'],
setup(props, { slots, emit }) { setup(props, { slots, emit }) {
const renderTitle = () => { const renderTitle = () => {
@ -85,7 +85,7 @@ export default defineComponent({
<a <a
href={props.thumbLink} href={props.thumbLink}
class={bem('thumb')} class={bem('thumb')}
onClick={(event: MouseEvent) => emit('click-thumb', event)} onClick={(event: MouseEvent) => emit('clickThumb', event)}
> >
{renderThumbImage()} {renderThumbImage()}
{renderThumbTag()} {renderThumbTag()}

4
packages/vant/src/card/test/index.spec.ts
View File

@ -12,7 +12,7 @@ test('should emit click event after clicked', () => {
expect(onClick).toHaveBeenCalledTimes(1); expect(onClick).toHaveBeenCalledTimes(1);
}); });
test('should emit click-thumb event after clicking thumb', () => { test('should emit clickThumb event after clicking thumb', () => {
const wrapper = mount(Card, { const wrapper = mount(Card, {
props: { props: {
thumb: 'xx', thumb: 'xx',
@ -20,7 +20,7 @@ test('should emit click-thumb event after clicking thumb', () => {
}); });
wrapper.find('.van-card__thumb').trigger('click'); wrapper.find('.van-card__thumb').trigger('click');
expect(wrapper.emitted('click-thumb')!).toHaveLength(1); expect(wrapper.emitted('clickThumb')!).toHaveLength(1);
}); });
test('should render price and num slot correctly', () => { test('should render price and num slot correctly', () => {

6
packages/vant/src/cascader/Cascader.tsx
View File

@ -47,7 +47,7 @@ export default defineComponent({
props: cascaderProps, props: cascaderProps,
emits: ['close', 'change', 'finish', 'click-tab', 'update:modelValue'], emits: ['close', 'change', 'finish', 'clickTab', 'update:modelValue'],
setup(props, { slots, emit }) { setup(props, { slots, emit }) {
const tabs = ref<CascaderTab[]>([]); const tabs = ref<CascaderTab[]>([]);
@ -184,7 +184,7 @@ export default defineComponent({
const onClose = () => emit('close'); const onClose = () => emit('close');
const onClickTab = ({ name, title }: TabsClickTabEventParams) => const onClickTab = ({ name, title }: TabsClickTabEventParams) =>
emit('click-tab', name, title); emit('clickTab', name, title);
const renderHeader = () => const renderHeader = () =>
props.showHeader ? ( props.showHeader ? (
@ -276,7 +276,7 @@ export default defineComponent({
class={bem('tabs')} class={bem('tabs')}
color={props.activeColor} color={props.activeColor}
swipeable={props.swipeable} swipeable={props.swipeable}
onClick-tab={onClickTab} onClickTab={onClickTab}
> >
{tabs.value.map(renderTab)} {tabs.value.map(renderTab)}
</Tabs> </Tabs>

6
packages/vant/src/cascader/test/index.spec.ts
View File

@ -190,7 +190,7 @@ test('should allow to custom field names', async () => {
]); ]);
}); });
test('should emit click-tab event when a tab is clicked', async () => { test('should emit clickTab event when a tab is clicked', async () => {
const wrapper = mount(Cascader, { const wrapper = mount(Cascader, {
props: { props: {
options, options,
@ -209,10 +209,10 @@ test('should emit click-tab event when a tab is clicked', async () => {
const tabs = wrapper.findAll('.van-tab'); const tabs = wrapper.findAll('.van-tab');
tabs[0].trigger('click'); tabs[0].trigger('click');
expect(wrapper.emitted('click-tab')![0]).toEqual([0, options[0].text]); expect(wrapper.emitted('clickTab')![0]).toEqual([0, options[0].text]);
tabs[1].trigger('click'); tabs[1].trigger('click');
expect(wrapper.emitted('click-tab')![1]).toEqual([ expect(wrapper.emitted('clickTab')![1]).toEqual([
1, 1,
options[0].children[0].text, options[0].children[0].text,
]); ]);

4
packages/vant/src/contact-edit/ContactEdit.tsx
View File

@ -52,7 +52,7 @@ export default defineComponent({
props: contactEditProps, props: contactEditProps,
emits: ['save', 'delete', 'change-default'], emits: ['save', 'delete', 'changeDefault'],
setup(props, { emit }) { setup(props, { emit }) {
const contact = reactive(extend({}, DEFAULT_CONTACT, props.contactInfo)); const contact = reactive(extend({}, DEFAULT_CONTACT, props.contactInfo));
@ -93,7 +93,7 @@ export default defineComponent({
<Switch <Switch
v-model={contact.isDefault} v-model={contact.isDefault}
size={24} size={24}
onChange={(checked: boolean) => emit('change-default', checked)} onChange={(checked: boolean) => emit('changeDefault', checked)}
/> />
); );

13
packages/vant/src/field/Field.tsx
View File

@ -124,9 +124,9 @@ export default defineComponent({
'focus', 'focus',
'clear', 'clear',
'keypress', 'keypress',
'click-input', 'clickInput',
'click-left-icon', 'clickLeftIcon',
'click-right-icon', 'clickRightIcon',
'update:modelValue', 'update:modelValue',
], ],
@ -332,13 +332,12 @@ export default defineComponent({
resetScroll(); resetScroll();
}; };
const onClickInput = (event: MouseEvent) => emit('click-input', event); const onClickInput = (event: MouseEvent) => emit('clickInput', event);
const onClickLeftIcon = (event: MouseEvent) => const onClickLeftIcon = (event: MouseEvent) => emit('clickLeftIcon', event);
emit('click-left-icon', event);
const onClickRightIcon = (event: MouseEvent) => const onClickRightIcon = (event: MouseEvent) =>
emit('click-right-icon', event); emit('clickRightIcon', event);
const onClear = (event: MouseEvent) => { const onClear = (event: MouseEvent) => {
preventDefault(event); preventDefault(event);

16
packages/vant/src/field/test/index.spec.js
View File

@ -10,13 +10,13 @@ test('should emit "update:modelValue" event when after inputting', () => {
expect(wrapper.emitted('update:modelValue')[0][0]).toEqual('1'); expect(wrapper.emitted('update:modelValue')[0][0]).toEqual('1');
}); });
test('should emit click-input event when input is clicked', () => { test('should emit clickInput event when input is clicked', () => {
const wrapper = mount(Field); const wrapper = mount(Field);
wrapper.find('input').trigger('click'); wrapper.find('input').trigger('click');
expect(wrapper.emitted('click-input')[0][0]).toBeTruthy(); expect(wrapper.emitted('clickInput')[0][0]).toBeTruthy();
}); });
test('should emit click-input event when using input slot', () => { test('should emit clickInput event when using input slot', () => {
const wrapper = mount(Field, { const wrapper = mount(Field, {
slots: { slots: {
input: () => 'Custom Input', input: () => 'Custom Input',
@ -24,10 +24,10 @@ test('should emit click-input event when using input slot', () => {
}); });
wrapper.find('.van-field__control').trigger('click'); wrapper.find('.van-field__control').trigger('click');
expect(wrapper.emitted('click-input')[0][0]).toBeTruthy(); expect(wrapper.emitted('clickInput')[0][0]).toBeTruthy();
}); });
test('should emit click-left-icon event when left icon is clicked', () => { test('should emit clickLeftIcon event when left icon is clicked', () => {
const wrapper = mount(Field, { const wrapper = mount(Field, {
props: { props: {
leftIcon: 'contact', leftIcon: 'contact',
@ -35,10 +35,10 @@ test('should emit click-left-icon event when left icon is clicked', () => {
}); });
wrapper.find('.van-field__left-icon').trigger('click'); wrapper.find('.van-field__left-icon').trigger('click');
expect(wrapper.emitted('click-left-icon')[0][0]).toBeTruthy(); expect(wrapper.emitted('clickLeftIcon')[0][0]).toBeTruthy();
}); });
test('should emit click-right-icon event when right icon is clicked', () => { test('should emit clickRightIcon event when right icon is clicked', () => {
const wrapper = mount(Field, { const wrapper = mount(Field, {
props: { props: {
rightIcon: 'search', rightIcon: 'search',
@ -46,7 +46,7 @@ test('should emit click-right-icon event when right icon is clicked', () => {
}); });
wrapper.find('.van-field__right-icon').trigger('click'); wrapper.find('.van-field__right-icon').trigger('click');
expect(wrapper.emitted('click-right-icon')[0][0]).toBeTruthy(); expect(wrapper.emitted('clickRightIcon')[0][0]).toBeTruthy();
}); });
test('should format input value when type is number', () => { test('should format input value when type is number', () => {

6
packages/vant/src/nav-bar/NavBar.tsx
View File

@ -42,14 +42,14 @@ export default defineComponent({
props: navBarProps, props: navBarProps,
emits: ['click-left', 'click-right'], emits: ['clickLeft', 'clickRight'],
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
const navBarRef = ref<HTMLElement>(); const navBarRef = ref<HTMLElement>();
const renderPlaceholder = usePlaceholder(navBarRef, bem); const renderPlaceholder = usePlaceholder(navBarRef, bem);
const onClickLeft = (event: MouseEvent) => emit('click-left', event); const onClickLeft = (event: MouseEvent) => emit('clickLeft', event);
const onClickRight = (event: MouseEvent) => emit('click-right', event); const onClickRight = (event: MouseEvent) => emit('clickRight', event);
const renderLeft = () => { const renderLeft = () => {
if (slots.left) { if (slots.left) {

8
packages/vant/src/nav-bar/test/index.spec.ts
View File

@ -45,7 +45,7 @@ test('should render placeholder element when using placeholder prop', async () =
restore(); restore();
}); });
test('should emit click-left event when clicking left text', () => { test('should emit clickLeft event when clicking left text', () => {
const wrapper = mount(NavBar, { const wrapper = mount(NavBar, {
props: { props: {
leftText: 'left', leftText: 'left',
@ -53,10 +53,10 @@ test('should emit click-left event when clicking left text', () => {
}); });
wrapper.find('.van-nav-bar__left').trigger('click'); wrapper.find('.van-nav-bar__left').trigger('click');
expect(wrapper.emitted('click-left')).toBeTruthy(); expect(wrapper.emitted('clickLeft')).toBeTruthy();
}); });
test('should emit click-right event when clicking right text', () => { test('should emit clickRight event when clicking right text', () => {
const wrapper = mount(NavBar, { const wrapper = mount(NavBar, {
props: { props: {
rightText: 'right', rightText: 'right',
@ -64,7 +64,7 @@ test('should emit click-right event when clicking right text', () => {
}); });
wrapper.find('.van-nav-bar__right').trigger('click'); wrapper.find('.van-nav-bar__right').trigger('click');
expect(wrapper.emitted('click-right')).toBeTruthy(); expect(wrapper.emitted('clickRight')).toBeTruthy();
}); });
test('should have safe-area-inset-top class when using safe-area-inset-top prop', () => { test('should have safe-area-inset-top class when using safe-area-inset-top prop', () => {

2
packages/vant/src/popover/test/index.spec.tsx
View File

@ -147,7 +147,7 @@ test('should close popover when touch outside content', async () => {
expect(wrapper.emitted('update:show')![0]).toEqual([false]); expect(wrapper.emitted('update:show')![0]).toEqual([false]);
}); });
test('should emit click-overlay event when overlay is clicked', () => { test('should emit clickOverlay event when overlay is clicked', () => {
const onClickOverlay = jest.fn(); const onClickOverlay = jest.fn();
const wrapper = mount(Popover, { const wrapper = mount(Popover, {
props: { props: {

8
packages/vant/src/popup/Popup.tsx
View File

@ -69,8 +69,8 @@ export default defineComponent({
'opened', 'opened',
'closed', 'closed',
'update:show', 'update:show',
'click-overlay', 'clickOverlay',
'click-close-icon', 'clickCloseIcon',
], ],
setup(props, { emit, attrs, slots }) { setup(props, { emit, attrs, slots }) {
@ -124,7 +124,7 @@ export default defineComponent({
}; };
const onClickOverlay = (event: MouseEvent) => { const onClickOverlay = (event: MouseEvent) => {
emit('click-overlay', event); emit('clickOverlay', event);
if (props.closeOnClickOverlay) { if (props.closeOnClickOverlay) {
close(); close();
@ -148,7 +148,7 @@ export default defineComponent({
}; };
const onClickCloseIcon = (event: MouseEvent) => { const onClickCloseIcon = (event: MouseEvent) => {
emit('click-close-icon', event); emit('clickCloseIcon', event);
close(); close();
}; };

8
packages/vant/src/popup/test/index.spec.jsx
View File

@ -93,7 +93,7 @@ test('should not render overlay when overlay prop is false', () => {
expect(wrapper.find('.van-overlay').exists()).toBeFalsy(); expect(wrapper.find('.van-overlay').exists()).toBeFalsy();
}); });
test('should emit click-overlay event when overlay is clicked', async () => { test('should emit clickOverlay event when overlay is clicked', async () => {
wrapper = mount(Popup, { wrapper = mount(Popup, {
props: { props: {
show: true, show: true,
@ -101,7 +101,7 @@ test('should emit click-overlay event when overlay is clicked', async () => {
}); });
const overlay = wrapper.find('.van-overlay'); const overlay = wrapper.find('.van-overlay');
overlay.trigger('click'); overlay.trigger('click');
expect(wrapper.emitted('click-overlay')).toHaveLength(1); expect(wrapper.emitted('clickOverlay')).toHaveLength(1);
}); });
test('should emit open event when show prop is set to true', async () => { test('should emit open event when show prop is set to true', async () => {
@ -182,7 +182,7 @@ test('should render close icon when using closeable prop', () => {
expect(wrapper.emitted('update:show')[0][0]).toEqual(false); expect(wrapper.emitted('update:show')[0][0]).toEqual(false);
}); });
test('should emit click-close-icon event when close icon is clicked', () => { test('should emit clickCloseIcon event when close icon is clicked', () => {
wrapper = mount(Popup, { wrapper = mount(Popup, {
propsData: { propsData: {
show: true, show: true,
@ -191,7 +191,7 @@ test('should emit click-close-icon event when close icon is clicked', () => {
}); });
wrapper.find('.van-popup__close-icon').trigger('click'); wrapper.find('.van-popup__close-icon').trigger('click');
expect(wrapper.emitted('click-close-icon')).toHaveLength(1); expect(wrapper.emitted('clickCloseIcon')).toHaveLength(1);
}); });
test('should render correct close icon when using close-icon prop', () => { test('should render correct close icon when using close-icon prop', () => {

19
packages/vant/src/search/Search.tsx
View File

@ -46,9 +46,9 @@ export default defineComponent({
'clear', 'clear',
'search', 'search',
'cancel', 'cancel',
'click-input', 'clickInput',
'click-left-icon', 'clickLeftIcon',
'click-right-icon', 'clickRightIcon',
'update:modelValue', 'update:modelValue',
], ],
@ -104,11 +104,10 @@ export default defineComponent({
const onBlur = (event: Event) => emit('blur', event); const onBlur = (event: Event) => emit('blur', event);
const onFocus = (event: Event) => emit('focus', event); const onFocus = (event: Event) => emit('focus', event);
const onClear = (event: MouseEvent) => emit('clear', event); const onClear = (event: MouseEvent) => emit('clear', event);
const onClickInput = (event: MouseEvent) => emit('click-input', event); const onClickInput = (event: MouseEvent) => emit('clickInput', event);
const onClickLeftIcon = (event: MouseEvent) => const onClickLeftIcon = (event: MouseEvent) => emit('clickLeftIcon', event);
emit('click-left-icon', event);
const onClickRightIcon = (event: MouseEvent) => const onClickRightIcon = (event: MouseEvent) =>
emit('click-right-icon', event); emit('clickRightIcon', event);
const fieldPropNames = Object.keys(fieldSharedProps) as Array< const fieldPropNames = Object.keys(fieldSharedProps) as Array<
keyof typeof fieldSharedProps keyof typeof fieldSharedProps
@ -132,9 +131,9 @@ export default defineComponent({
onFocus={onFocus} onFocus={onFocus}
onClear={onClear} onClear={onClear}
onKeypress={onKeypress} onKeypress={onKeypress}
onClick-input={onClickInput} onClickInput={onClickInput}
onClick-left-icon={onClickLeftIcon} onClickLeftIcon={onClickLeftIcon}
onClick-right-icon={onClickRightIcon} onClickRightIcon={onClickRightIcon}
onUpdate:modelValue={onInput} onUpdate:modelValue={onInput}
{...fieldAttrs} {...fieldAttrs}
/> />

8
packages/vant/src/search/test/index.spec.ts
View File

@ -171,7 +171,7 @@ test('should render input name when using name prop', () => {
expect(wrapper.find('input').element.getAttribute('name')).toEqual('foo'); expect(wrapper.find('input').element.getAttribute('name')).toEqual('foo');
}); });
test('should emit click-left-icon event after clicking the left icon', async () => { test('should emit clickLeftIcon event after clicking the left icon', async () => {
const wrapper = mount(Search, { const wrapper = mount(Search, {
props: { props: {
leftIcon: 'foo', leftIcon: 'foo',
@ -179,10 +179,10 @@ test('should emit click-left-icon event after clicking the left icon', async ()
}); });
await wrapper.find('.van-field__left-icon').trigger('click'); await wrapper.find('.van-field__left-icon').trigger('click');
expect(wrapper.emitted('click-left-icon')).toHaveLength(1); expect(wrapper.emitted('clickLeftIcon')).toHaveLength(1);
}); });
test('should emit click-right-icon event after clicking the right icon', async () => { test('should emit clickRightIcon event after clicking the right icon', async () => {
const wrapper = mount(Search, { const wrapper = mount(Search, {
props: { props: {
rightIcon: 'foo', rightIcon: 'foo',
@ -190,5 +190,5 @@ test('should emit click-right-icon event after clicking the right icon', async (
}); });
await wrapper.find('.van-field__right-icon').trigger('click'); await wrapper.find('.van-field__right-icon').trigger('click');
expect(wrapper.emitted('click-right-icon')).toHaveLength(1); expect(wrapper.emitted('clickRightIcon')).toHaveLength(1);
}); });

2
packages/vant/src/share-sheet/test/index.spec.ts
View File

@ -86,7 +86,7 @@ test('should render title and description slot correctly', () => {
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
}); });
test('should emit click-overlay event when overlay is clicked', async () => { test('should emit clickOverlay event when overlay is clicked', async () => {
const root = document.createElement('div'); const root = document.createElement('div');
const onClickOverlay = jest.fn(); const onClickOverlay = jest.fn();
const wrapper = mount(ShareSheet, { const wrapper = mount(ShareSheet, {

6
packages/vant/src/slider/Slider.tsx
View File

@ -56,7 +56,7 @@ export default defineComponent({
props: sliderProps, props: sliderProps,
emits: ['change', 'drag-end', 'drag-start', 'update:modelValue'], emits: ['change', 'dragEnd', 'dragStart', 'update:modelValue'],
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
let buttonIndex: 0 | 1; let buttonIndex: 0 | 1;
@ -221,7 +221,7 @@ export default defineComponent({
} }
if (dragStatus.value === 'start') { if (dragStatus.value === 'start') {
emit('drag-start', event); emit('dragStart', event);
} }
preventDefault(event, true); preventDefault(event, true);
@ -253,7 +253,7 @@ export default defineComponent({
if (dragStatus.value === 'dragging') { if (dragStatus.value === 'dragging') {
updateValue(current, true); updateValue(current, true);
emit('drag-end', event); emit('dragEnd', event);
} }
dragStatus.value = ''; dragStatus.value = '';

10
packages/vant/src/slider/test/index.spec.ts
View File

@ -39,7 +39,7 @@ test('should emit "update:modelValue" event after clicking slider', () => {
expect(wrapper.emitted('update:modelValue')!.pop()).toEqual([100]); expect(wrapper.emitted('update:modelValue')!.pop()).toEqual([100]);
}); });
test('should emit drag-start event when start dragging', () => { test('should emit dragStart event when start dragging', () => {
const wrapper = mount(Slider, { const wrapper = mount(Slider, {
props: { props: {
modelValue: 50, modelValue: 50,
@ -49,10 +49,10 @@ test('should emit drag-start event when start dragging', () => {
const button = wrapper.find('.van-slider__button'); const button = wrapper.find('.van-slider__button');
trigger(button, 'touchstart'); trigger(button, 'touchstart');
trigger(button, 'touchmove'); trigger(button, 'touchmove');
expect(wrapper.emitted('drag-start')).toBeTruthy(); expect(wrapper.emitted('dragStart')).toBeTruthy();
}); });
test('should emit drag-end event when end dragging', () => { test('should emit dragEnd event when end dragging', () => {
const wrapper = mount(Slider, { const wrapper = mount(Slider, {
props: { props: {
modelValue: 50, modelValue: 50,
@ -62,9 +62,9 @@ test('should emit drag-end event when end dragging', () => {
const button = wrapper.find('.van-slider__button'); const button = wrapper.find('.van-slider__button');
trigger(button, 'touchstart'); trigger(button, 'touchstart');
trigger(button, 'touchmove'); trigger(button, 'touchmove');
expect(wrapper.emitted('drag-end')).toBeFalsy(); expect(wrapper.emitted('dragEnd')).toBeFalsy();
trigger(button, 'touchend'); trigger(button, 'touchend');
expect(wrapper.emitted('drag-end')).toBeTruthy(); expect(wrapper.emitted('dragEnd')).toBeTruthy();
}); });
test('should not allow to drag slider when disabled', async () => { test('should not allow to drag slider when disabled', async () => {

4
packages/vant/src/steps/Steps.tsx
View File

@ -31,12 +31,12 @@ export default defineComponent({
props: stepsProps, props: stepsProps,
emits: ['click-step'], emits: ['clickStep'],
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
const { linkChildren } = useChildren(STEPS_KEY); const { linkChildren } = useChildren(STEPS_KEY);
const onClickStep = (index: number) => emit('click-step', index); const onClickStep = (index: number) => emit('clickStep', index);
linkChildren({ linkChildren({
props, props,

4
packages/vant/src/steps/test/index.spec.tsx
View File

@ -18,12 +18,12 @@ test('should render icon slot correctly', () => {
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
}); });
test('should emit click-step event when step is clicked', () => { test('should emit clickStep event when step is clicked', () => {
const onClickStep = jest.fn(); const onClickStep = jest.fn();
const wrapper = mount({ const wrapper = mount({
setup() { setup() {
return () => ( return () => (
<Steps active={1} onClick-step={onClickStep}> <Steps active={1} onClickStep={onClickStep}>
<Step>A</Step> <Step>A</Step>
<Step>B</Step> <Step>B</Step>
<Step>C</Step> <Step>C</Step>

8
packages/vant/src/tab/test/index.spec.tsx
View File

@ -3,13 +3,13 @@ import { mount, later, triggerDrag, mockScrollTop } from '../../../test';
import { Tab } from '..'; import { Tab } from '..';
import { Tabs, TabsInstance } from '../../tabs'; import { Tabs, TabsInstance } from '../../tabs';
test('should emit click-tab event when tab is clicked', async () => { test('should emit clickTab event when tab is clicked', async () => {
const onClickTab = jest.fn(); const onClickTab = jest.fn();
const wrapper = mount({ const wrapper = mount({
render() { render() {
return ( return (
<Tabs onClick-tab={onClickTab}> <Tabs onClickTab={onClickTab}>
<Tab title="title1">1</Tab> <Tab title="title1">1</Tab>
<Tab title="title2">2</Tab> <Tab title="title2">2</Tab>
</Tabs> </Tabs>
@ -299,7 +299,7 @@ test('should allow to set name prop', async () => {
<Tabs <Tabs
v-model:active={this.active} v-model:active={this.active}
onChange={onChange} onChange={onChange}
onClick-tab={onClickTab} onClickTab={onClickTab}
> >
<Tab title="title1" name="a"> <Tab title="title1" name="a">
Text Text
@ -336,7 +336,7 @@ test('should allow name prop to be zero', async () => {
const wrapper = mount({ const wrapper = mount({
render() { render() {
return ( return (
<Tabs onClick-tab={onClickTab}> <Tabs onClickTab={onClickTab}>
<Tab title="title1" name={1}> <Tab title="title1" name={1}>
Text Text
</Tab> </Tab>

4
packages/vant/src/tabs/Tabs.tsx
View File

@ -91,7 +91,7 @@ export default defineComponent({
props: tabsProps, props: tabsProps,
emits: ['change', 'scroll', 'rendered', 'click-tab', 'update:active'], emits: ['change', 'scroll', 'rendered', 'clickTab', 'update:active'],
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
let tabHeight: number; let tabHeight: number;
@ -289,7 +289,7 @@ export default defineComponent({
route(item as ComponentPublicInstance<RouteProps>); route(item as ComponentPublicInstance<RouteProps>);
} }
emit('click-tab', { emit('clickTab', {
name, name,
title, title,
event, event,

11
packages/vant/src/tree-select/TreeSelect.tsx
View File

@ -52,12 +52,7 @@ export default defineComponent({
props: treeSelectProps, props: treeSelectProps,
emits: [ emits: ['clickNav', 'clickItem', 'update:activeId', 'update:mainActiveIndex'],
'click-nav',
'click-item',
'update:activeId',
'update:mainActiveIndex',
],
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
const isActiveItem = (id: number | string) => const isActiveItem = (id: number | string) =>
@ -87,7 +82,7 @@ export default defineComponent({
} }
emit('update:activeId', activeId); emit('update:activeId', activeId);
emit('click-item', item); emit('clickItem', item);
}; };
return ( return (
@ -114,7 +109,7 @@ export default defineComponent({
emit('update:mainActiveIndex', index); emit('update:mainActiveIndex', index);
}; };
const onClickSidebarItem = (index: number) => emit('click-nav', index); const onClickSidebarItem = (index: number) => emit('clickNav', index);
const renderSidebar = () => { const renderSidebar = () => {
const Items = props.items.map((item) => ( const Items = props.items.map((item) => (

18
packages/vant/src/tree-select/test/index.spec.tsx
View File

@ -42,7 +42,7 @@ test('should emit update:mainActiveIndex event when mainActiveIndex is changed',
expect(wrapper.emitted('update:mainActiveIndex')?.[0]).toEqual([1]); expect(wrapper.emitted('update:mainActiveIndex')?.[0]).toEqual([1]);
}); });
test('should emit click-nav event when nav item is clicked', async () => { test('should emit clickNav event when nav item is clicked', async () => {
const wrapper = mount(TreeSelect, { const wrapper = mount(TreeSelect, {
props: { props: {
items: mockItems, items: mockItems,
@ -51,12 +51,12 @@ test('should emit click-nav event when nav item is clicked', async () => {
const navItems = wrapper.findAll('.van-tree-select__nav-item'); const navItems = wrapper.findAll('.van-tree-select__nav-item');
await navItems[0].trigger('click'); await navItems[0].trigger('click');
expect(wrapper.emitted('click-nav')?.[0]).toEqual([0]); expect(wrapper.emitted('clickNav')?.[0]).toEqual([0]);
await navItems[0].trigger('click'); await navItems[0].trigger('click');
expect(wrapper.emitted('click-nav')?.[1]).toEqual([0]); expect(wrapper.emitted('clickNav')?.[1]).toEqual([0]);
}); });
test('should emit click-item event when item is clicked', () => { test('should emit clickItem event when item is clicked', () => {
const wrapper = mount(TreeSelect, { const wrapper = mount(TreeSelect, {
props: { props: {
items: mockItems, items: mockItems,
@ -66,10 +66,10 @@ test('should emit click-item event when item is clicked', () => {
const items = wrapper.findAll('.van-tree-select__item'); const items = wrapper.findAll('.van-tree-select__item');
items[0].trigger('click'); items[0].trigger('click');
expect(wrapper.emitted('update:activeId')?.[0]).toEqual([mockItem.id]); expect(wrapper.emitted('update:activeId')?.[0]).toEqual([mockItem.id]);
expect(wrapper.emitted('click-item')?.[0]).toEqual([mockItem]); expect(wrapper.emitted('clickItem')?.[0]).toEqual([mockItem]);
}); });
test('should not emit click-nav event when disabled nav item is clicked', () => { test('should not emit clickNav event when disabled nav item is clicked', () => {
const wrapper = mount(TreeSelect, { const wrapper = mount(TreeSelect, {
props: { props: {
items: [ items: [
@ -84,10 +84,10 @@ test('should not emit click-nav event when disabled nav item is clicked', () =>
const items = wrapper.findAll('.van-tree-select__nav-item'); const items = wrapper.findAll('.van-tree-select__nav-item');
items[0].trigger('click'); items[0].trigger('click');
expect(wrapper.emitted('click-nav')).toBeFalsy(); expect(wrapper.emitted('clickNav')).toBeFalsy();
}); });
test('should not emit click-item event when disabled item is clicked', () => { test('should not emit clickItem event when disabled item is clicked', () => {
const wrapper = mount(TreeSelect, { const wrapper = mount(TreeSelect, {
props: { props: {
items: [ items: [
@ -106,7 +106,7 @@ test('should not emit click-item event when disabled item is clicked', () => {
const items = wrapper.findAll('.van-tree-select__item'); const items = wrapper.findAll('.van-tree-select__item');
items[0].trigger('click'); items[0].trigger('click');
expect(wrapper.emitted('click-item')).toBeFalsy(); expect(wrapper.emitted('clickItem')).toBeFalsy();
}); });
test('should render content slot correctly', () => { test('should render content slot correctly', () => {

12
packages/vant/src/uploader/Uploader.tsx
View File

@ -90,9 +90,9 @@ export default defineComponent({
emits: [ emits: [
'delete', 'delete',
'oversize', 'oversize',
'click-upload', 'clickUpload',
'close-preview', 'closePreview',
'click-preview', 'clickPreview',
'update:modelValue', 'update:modelValue',
], ],
@ -221,7 +221,7 @@ export default defineComponent({
let imagePreview: ComponentInstance | undefined; let imagePreview: ComponentInstance | undefined;
const onClosePreview = () => emit('close-preview'); const onClosePreview = () => emit('closePreview');
const previewImage = (item: UploaderFileListItem) => { const previewImage = (item: UploaderFileListItem) => {
if (props.previewFullImage) { if (props.previewFullImage) {
@ -281,7 +281,7 @@ export default defineComponent({
v-slots={{ 'preview-cover': slots['preview-cover'] }} v-slots={{ 'preview-cover': slots['preview-cover'] }}
item={item} item={item}
index={index} index={index}
onClick={() => emit('click-preview', item, getDetail(index))} onClick={() => emit('clickPreview', item, getDetail(index))}
onDelete={() => deleteFile(item, index)} onDelete={() => deleteFile(item, index)}
onPreview={() => previewImage(item)} onPreview={() => previewImage(item)}
{...pick(props, ['name', 'lazyLoad'])} {...pick(props, ['name', 'lazyLoad'])}
@ -296,7 +296,7 @@ export default defineComponent({
} }
}; };
const onClickUpload = (event: MouseEvent) => emit('click-upload', event); const onClickUpload = (event: MouseEvent) => emit('clickUpload', event);
const renderUpload = () => { const renderUpload = () => {
if (props.modelValue.length >= props.maxCount || !props.showUpload) { if (props.modelValue.length >= props.maxCount || !props.showUpload) {

18
packages/vant/src/uploader/test/index.spec.ts
View File

@ -504,14 +504,14 @@ test('closeImagePreview method', async () => {
await nextTick(); await nextTick();
await (wrapper.vm as Record<string, any>).closeImagePreview(); await (wrapper.vm as Record<string, any>).closeImagePreview();
expect(wrapper.emitted('close-preview')).toBeFalsy(); expect(wrapper.emitted('closePreview')).toBeFalsy();
wrapper.find('.van-image').trigger('click'); wrapper.find('.van-image').trigger('click');
await (wrapper.vm as Record<string, any>).closeImagePreview(); await (wrapper.vm as Record<string, any>).closeImagePreview();
expect(wrapper.emitted('close-preview')).toBeTruthy(); expect(wrapper.emitted('closePreview')).toBeTruthy();
}); });
test('click-preview event', () => { test('clickPreview event', () => {
const wrapper = mount(Uploader, { const wrapper = mount(Uploader, {
props: { props: {
previewFullImage: false, previewFullImage: false,
@ -520,12 +520,12 @@ test('click-preview event', () => {
}); });
wrapper.find('.van-image').trigger('click'); wrapper.find('.van-image').trigger('click');
expect(wrapper.emitted<[File]>('click-preview')![0][0]).toEqual({ expect(wrapper.emitted<[File]>('clickPreview')![0][0]).toEqual({
url: IMAGE, url: IMAGE,
}); });
expect( expect(
wrapper.emitted<[File, { name: string; index: number }]>( wrapper.emitted<[File, { name: string; index: number }]>(
'click-preview' 'clickPreview'
)![0][1] )![0][1]
).toEqual({ ).toEqual({
name: '', name: '',
@ -533,7 +533,7 @@ test('click-preview event', () => {
}); });
}); });
test('close-preview event', async () => { test('closePreview event', async () => {
const wrapper = mount(Uploader, { const wrapper = mount(Uploader, {
props: { props: {
modelValue: [{ url: IMAGE }], modelValue: [{ url: IMAGE }],
@ -550,7 +550,7 @@ test('close-preview event', async () => {
triggerDrag(swipe, 0, 0); triggerDrag(swipe, 0, 0);
await later(300); await later(300);
expect(wrapper.emitted('close-preview')).toBeTruthy(); expect(wrapper.emitted('closePreview')).toBeTruthy();
}); });
test('show-upload prop', async () => { test('show-upload prop', async () => {
@ -626,8 +626,8 @@ test('should not render upload input when using readonly prop', async () => {
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
}); });
test('should emit click-upload event when upload area is clicked', async () => { test('should emit clickUpload event when upload area is clicked', async () => {
const wrapper = mount(Uploader); const wrapper = mount(Uploader);
wrapper.find('.van-uploader__upload').trigger('click'); wrapper.find('.van-uploader__upload').trigger('click');
expect(wrapper.emitted('click-upload')).toBeTruthy(); expect(wrapper.emitted('clickUpload')).toBeTruthy();
}); });