chore: prefer arrow function shorthand

src/action-sheet/index.tsx

@@ -51,9 +51,7 @@ export default createComponent({
   emits: ['select', 'cancel', 'update:show'],
 
   setup(props, { slots, emit }) {
-    const onUpdateShow = (show: boolean) => {
+    const onUpdateShow = (show: boolean) => emit('update:show', show);
-      emit('update:show', show);
-    };
 
     const onCancel = () => {
       onUpdateShow(false);

src/address-edit/Detail.tsx

@@ -83,24 +83,14 @@ export default createComponent({
           label={express.address}
           class={bem('search-item')}
           border={false}
-          onClick={() => {
+          onClick={() => onSelect(express)}
-            onSelect(express);
-          }}
         />
       ));
     };
 
-    const onFocus = (event: Event) => {
+    const onBlur = (event: Event) => emit('blur', event);
-      emit('focus', event);
+    const onFocus = (event: Event) => emit('focus', event);
-    };
+    const onInput = (value: string) => emit('input', value);
-
-    const onBlur = (event: Event) => {
-      emit('blur', event);
-    };
-
-    const onInput = (value: string) => {
-      emit('input', value);
-    };
 
     return () => {
       if (props.show) {

src/address-edit/index.tsx

@@ -239,12 +239,8 @@ export default createComponent({
       Dialog.confirm({
         title: t('confirmDelete'),
       })
-        .then(() => {
+        .then(() => emit('delete', state.data))
-          emit('delete', state.data);
+        .catch(() => emit('cancel-delete', state.data));
-        })
-        .catch(() => {
-          emit('cancel-delete', state.data);
-        });
     };
 
     // get values of area component
@@ -277,9 +273,7 @@ export default createComponent({
             <Switch
               v-model={state.data.isDefault}
               size="24"
-              onChange={(event) => {
+              onChange={(event) => emit('change-default', event)}
-                emit('change-default', event);
-              }}
             />
           ),
         };
@@ -306,9 +300,7 @@ export default createComponent({
 
     watch(
       () => props.areaList,
-      () => {
+      () => setAreaCode(state.data.areaCode)
-        setAreaCode(state.data.areaCode);
-      }
     );
 
     watch(
@@ -378,9 +370,7 @@ export default createComponent({
               onBlur={onDetailBlur}
               onFocus={() => onFocus('addressDetail')}
               onInput={onChangeDetail}
-              onSelect-search={(event: Event) => {
+              onSelect-search={(event: Event) => emit('select-search', event)}
-                emit('select-search', event);
-              }}
             />
             {props.showPostal && (
               <Field

src/address-list/index.tsx

@@ -51,9 +51,7 @@ export default createComponent({
         emit(name, item, index);
       };
 
-      const onClick = () => {
+      const onClick = () => emit('click-item', item, index);
-        emit('click-item', item, index);
-      };
 
       const onSelect = () => {
         const name = disabled ? 'select-disabled' : 'select';
@@ -87,12 +85,7 @@ export default createComponent({
       }
     };
 
-    const renderBottom = () => {
+    const renderBottom = () => (
-      const onClick = () => {
-        emit('add');
-      };
-
-      return (
       <div class={bem('bottom')}>
         <Button
           round
@@ -100,11 +93,10 @@ export default createComponent({
           type="danger"
           text={props.addButtonText || t('add')}
           class={bem('add')}
-            onClick={onClick}
+          onClick={() => emit('add')}
         />
       </div>
     );
-    };
 
     return () => {
       const List = renderList(props.list);

src/area/index.tsx

@@ -294,9 +294,7 @@ export default createComponent({
 
     watch(
       () => props.columnsNum,
-      () => {
+      () => nextTick(setValues)
-        nextTick(setValues);
-      }
     );
 
     useExpose({ reset, getArea, getValues });

src/calendar/components/Month.tsx

@@ -237,9 +237,7 @@ export default createComponent({
         color={props.color}
         offset={offset.value}
         rowHeight={rowHeight.value}
-        onClick={(item) => {
+        onClick={(item) => emit('click', item)}
-          emit('click', item);
-        }}
       />
     );
 

src/calendar/index.tsx

@@ -332,9 +332,7 @@ export default createComponent({
       return true;
     };
 
-    const onConfirm = () => {
+    const onConfirm = () => emit('confirm', copyDates(state.currentDate));
-      emit('confirm', copyDates(state.currentDate));
-    };
 
     const select = (date: Date | Date[], complete?: boolean) => {
       const setCurrentDate = (date: Date | Date[]) => {
@@ -426,9 +424,7 @@ export default createComponent({
       }
     };
 
-    const togglePopup = (value: boolean) => {
+    const togglePopup = (value: boolean) => emit('update:show', value);
-      emit('update:show', value);
-    };
 
     const renderMonth = (date: Date, index: number) => {
       const showMonthTitle = index !== 0 || !props.showSubtitle;

src/card/index.tsx

@@ -80,9 +80,7 @@ export default createComponent({
           <a
             href={props.thumbLink}
             class={bem('thumb')}
-            onClick={(event) => {
+            onClick={(event: MouseEvent) => emit('click-thumb', event)}
-              emit('click-thumb', event);
-            }}
           >
             {renderThumbImage()}
             {renderThumbTag()}

src/cascader/index.tsx

@@ -172,9 +172,7 @@ export default createComponent({
       }
     };
 
-    const onClose = () => {
+    const onClose = () => emit('close');
-      emit('close');
-    };
 
     const renderHeader = () => (
       <div class={bem('header')}>
@@ -200,9 +198,7 @@ export default createComponent({
           <li
             class={bem('option', { selected: isSelected })}
             style={{ color: isSelected ? props.activeColor : undefined }}
-            onClick={() => {
+            onClick={() => onSelect(option, tabIndex)}
-              onSelect(option, tabIndex);
-            }}
           >
             <span>{option[textKey]}</span>
             {isSelected ? (

src/checkbox-group/index.tsx

@@ -69,9 +69,7 @@ export default createComponent({
 
     watch(
       () => props.modelValue,
-      (value) => {
+      (value) => emit('change', value)
-        emit('change', value);
-      }
     );
 
     useExpose({ toggleAll });

src/checkbox/index.tsx

@@ -67,9 +67,7 @@ export default createComponent({
 
     watch(
       () => props.modelValue,
-      (value) => {
+      (value) => emit('change', value)
-        emit('change', value);
-      }
     );
 
     useExpose({ toggle, props, checked });

src/contact-edit/index.tsx

@@ -59,9 +59,7 @@ export default createComponent({
     const onDelete = () => {
       Dialog.confirm({
         title: t('confirmDelete'),
-      }).then(() => {
+      }).then(() => emit('delete', contact));
-        emit('delete', contact);
-      });
     };
 
     const renderButtons = () => (
@@ -90,9 +88,7 @@ export default createComponent({
       <Switch
         v-model={contact.isDefault}
         size={24}
-        onChange={(checked: boolean) => {
+        onChange={(checked: boolean) => emit('change-default', checked)}
-          emit('change-default', checked);
-        }}
       />
     );
 

src/contact-list/index.tsx

@@ -96,9 +96,7 @@ export default createComponent({
             type="danger"
             class={bem('add')}
             text={props.addText || t('addText')}
-            onClick={() => {
+            onClick={() => emit('add')}
-              emit('add');
-            }}
           />
         </div>
       </div>

src/coupon-list/index.tsx

@@ -207,9 +207,7 @@ export default createComponent({
 
     watch(
       () => state.code,
-      (value) => {
+      (value) => emit('update:code', value)
-        emit('update:code', value);
-      }
     );
 
     watch(() => props.displayedCouponIndex, scrollToCoupon);
@@ -233,9 +231,7 @@ export default createComponent({
             type="danger"
             class={bem('close')}
             text={props.closeButtonText || t('close')}
-            onClick={() => {
+            onClick={() => emit('change', -1)}
-              emit('change', -1);
-            }}
           />
         </div>
       </div>

src/datetime-picker/DatePicker.tsx

@@ -270,16 +270,12 @@ export default createComponent({
       emit('confirm', currentDate.value);
     };
 
-    const onCancel = () => {
+    const onCancel = () => emit('cancel');
-      emit('cancel');
-    };
 
     const onChange = () => {
       updateInnerValue();
       nextTick(() => {
-        nextTick(() => {
+        nextTick(() => emit('change', currentDate.value));
-          emit('change', currentDate.value);
-        });
       });
     };
 
@@ -290,9 +286,9 @@ export default createComponent({
 
     watch(columns, updateColumnValue);
 
-    watch(currentDate, (value, oldValue) => {
+    watch(currentDate, (value, oldValue) =>
-      emit('update:modelValue', oldValue ? value : null);
+      emit('update:modelValue', oldValue ? value : null)
-    });
+    );
 
     watch(
       [() => props.filter, () => props.minDate, () => props.maxDate],

src/datetime-picker/TimePicker.tsx

@@ -119,21 +119,13 @@ export default createComponent({
       updateColumnValue();
     };
 
-    const onConfirm = () => {
+    const onConfirm = () => emit('confirm', currentDate.value);
-      emit('confirm', currentDate.value);
+    const onCancel = () => emit('cancel');
-    };
-
-    const onCancel = () => {
-      emit('cancel');
-    };
 
     const onChange = () => {
       updateInnerValue();
-
       nextTick(() => {
-        nextTick(() => {
+        nextTick(() => emit('change', currentDate.value));
-          emit('change', currentDate.value);
-        });
       });
     };
 
@@ -155,9 +147,7 @@ export default createComponent({
       updateInnerValue
     );
 
-    watch(currentDate, (value) => {
+    watch(currentDate, (value) => emit('update:modelValue', value));
-      emit('update:modelValue', value);
-    });
 
     watch(
       () => props.modelValue,

src/dialog/Dialog.tsx

@@ -64,9 +64,7 @@ export default createComponent({
       cancel: false,
     });
 
-    const onUpdateShow = (value: boolean) => {
+    const onUpdateShow = (value: boolean) => emit('update:show', value);
-      emit('update:show', value);
-    };
 
     const close = (action: DialogAction) => {
       onUpdateShow(false);

src/dropdown-item/index.tsx

@@ -64,11 +64,10 @@ export default createComponent({
       return;
     }
 
-    const createEmitter = (eventName: 'open' | 'close' | 'opened') => () =>
+    const getEmitter = (name: 'open' | 'close' | 'opened') => () => emit(name);
-      emit(eventName);
+    const onOpen = getEmitter('open');
-    const onOpen = createEmitter('open');
+    const onClose = getEmitter('close');
-    const onClose = createEmitter('close');
+    const onOpened = getEmitter('opened');
-    const onOpened = createEmitter('opened');
 
     const onClosed = () => {
       state.showWrapper = false;

src/field/index.tsx

@@ -330,17 +330,13 @@ export default createComponent({
       resetScroll();
     };
 
-    const onClickInput = (event: MouseEvent) => {
+    const onClickInput = (event: MouseEvent) => emit('click-input', event);
-      emit('click-input', event);
-    };
 
-    const onClickLeftIcon = (event: MouseEvent) => {
+    const onClickLeftIcon = (event: MouseEvent) =>
       emit('click-left-icon', event);
-    };
 
-    const onClickRightIcon = (event: MouseEvent) => {
+    const onClickRightIcon = (event: MouseEvent) =>
       emit('click-right-icon', event);
-    };
 
     const onClear = (event: MouseEvent) => {
       preventDefault(event);

src/form/index.tsx

@@ -156,9 +156,7 @@ export default createComponent({
       const values = getValues();
 
       validate()
-        .then(() => {
+        .then(() => emit('submit', values))
-          emit('submit', values);
-        })
         .catch((errors: FieldValidateError[]) => {
           emit('failed', { values, errors });
 

src/image-preview/ImagePreview.tsx

@@ -16,6 +16,11 @@ import ImagePreviewItem from './ImagePreviewItem';
 
 const [createComponent, bem] = createNamespace('image-preview');
 
+export type ImagePreviewScaleEventParams = {
+  scale: number;
+  index: number;
+};
+
 export default createComponent({
   props: {
     show: Boolean,
@@ -90,21 +95,16 @@ export default createComponent({
       }
     };
 
-    const emitScale = (args: { scale: number; index: number }) => {
+    const emitScale = (args: ImagePreviewScaleEventParams) =>
       emit('scale', args);
-    };
 
-    const toggle = (show: boolean) => {
+    const toggle = (show: boolean) => emit('update:show', show);
-      emit('update:show', show);
-    };
 
     const emitClose = () => {
       callInterceptor({
         interceptor: props.beforeClose,
         args: [state.active],
-        done: () => {
+        done: () => toggle(false),
-          toggle(false);
-        },
       });
     };
 
@@ -174,9 +174,7 @@ export default createComponent({
       }
     };
 
-    const onClosed = () => {
+    const onClosed = () => emit('closed');
-      emit('closed');
-    };
 
     const swipeTo = (index: number, options?: SwipeToOptions) => {
       if (swipeRef.value) {

src/index-bar/index.tsx

@@ -173,9 +173,7 @@ export default createComponent({
       }
     };
 
-    const init = () => {
+    const init = () => nextTick(onScroll);
-      nextTick(onScroll);
-    };
 
     useEventListener('scroll', onScroll, { target: scrollParent });
 

src/nav-bar/index.tsx

@@ -34,13 +34,8 @@ export default createComponent({
     const navBarRef = ref<HTMLElement>();
     const renderPlaceholder = usePlaceholder(navBarRef, bem);
 
-    const onClickLeft = (event: MouseEvent) => {
+    const onClickLeft = (event: MouseEvent) => emit('click-left', event);
-      emit('click-left', event);
+    const onClickRight = (event: MouseEvent) => emit('click-right', event);
-    };
-
-    const onClickRight = (event: MouseEvent) => {
-      emit('click-right', event);
-    };
 
     const renderLeft = () => {
       if (slots.left) {

src/number-keyboard/index.tsx

@@ -146,9 +146,7 @@ export default createComponent({
       }
     };
 
-    const onAnimationEnd = () => {
+    const onAnimationEnd = () => emit(props.show ? 'show' : 'hide');
-      emit(props.show ? 'show' : 'hide');
-    };
 
     const onPress = (text: string, type: KeyType) => {
       if (text === '') {

src/pagination/index.tsx

@@ -144,9 +144,7 @@ export default createComponent({
       const value = props.modelValue;
       const simple = props.mode !== 'multi';
 
-      const onSelect = (value: number) => () => {
+      const onSelect = (value: number) => () => select(value, true);
-        select(value, true);
-      };
 
       return (
         <ul class={bem({ simple })}>

src/picker/PickerColumn.tsx

@@ -289,9 +289,7 @@ export default createComponent({
             disabled,
             selected: index === state.index,
           }),
-          onClick: () => {
+          onClick: () => onClickItem(index),
-            onClickItem(index);
-          },
         };
 
         const childData = {

src/picker/index.tsx

@@ -286,9 +286,7 @@ export default createComponent({
       emitAction('confirm');
     };
 
-    const cancel = () => {
+    const cancel = () => emitAction('cancel');
-      emitAction('cancel');
-    };
 
     const renderTitle = () => {
       if (slots.title) {
@@ -342,9 +340,7 @@ export default createComponent({
           swipeDuration={props.swipeDuration}
           initialOptions={item[valuesKey]}
           visibleItemCount={props.visibleItemCount}
-          onChange={() => {
+          onChange={() => onChange(columnIndex)}
-            onChange(columnIndex);
-          }}
         />
       ));
 

src/popover/index.tsx

@@ -125,9 +125,7 @@ export default createComponent({
       });
     };
 
-    const toggle = (value: boolean) => {
+    const toggle = (value: boolean) => emit('update:show', value);
-      emit('update:show', value);
-    };
 
     const onClickWrapper = () => {
       if (props.trigger === 'click') {
@@ -152,9 +150,7 @@ export default createComponent({
       }
     };
 
-    const onClickAway = () => {
+    const onClickAway = () => toggle(false);
-      toggle(false);
-    };
 
     const renderAction = (action: PopoverAction, index: number) => {
       const { icon, text, color, disabled, className } = action;

src/pull-refresh/index.tsx

@@ -179,9 +179,7 @@ export default createComponent({
           emit('update:modelValue', true);
 
           // ensure value change can be watched
-          nextTick(() => {
+          nextTick(() => emit('refresh'));
-            emit('refresh');
-          });
         } else {
           setStatus(0);
         }

src/radio-group/index.tsx

@@ -29,15 +29,12 @@ export default createComponent({
   setup(props, { emit, slots }) {
     const { linkChildren } = useChildren(RADIO_KEY);
 
-    const updateModelValue = (value: unknown) => {
+    const updateModelValue = (value: unknown) =>
       emit('update:modelValue', value);
-    };
 
     watch(
       () => props.modelValue,
-      (value) => {
+      (value) => emit('change', value)
-        emit('change', value);
-      }
     );
 
     linkChildren({

src/search/index.tsx

@@ -120,9 +120,7 @@ export default createComponent({
         class: null,
       };
 
-      const onInput = (value: string) => {
+      const onInput = (value: string) => emit('update:modelValue', value);
-        emit('update:modelValue', value);
-      };
 
       return (
         <Field

src/share-sheet/index.tsx

@@ -65,18 +65,15 @@ export default createComponent({
   emits: ['cancel', 'select', 'update:show'],
 
   setup(props, { emit, slots }) {
-    const toggle = (value: boolean) => {
+    const toggle = (value: boolean) => emit('update:show', value);
-      emit('update:show', value);
-    };
 
     const onCancel = () => {
       toggle(false);
       emit('cancel');
     };
 
-    const onSelect = (option: ShareSheetOption, index: number) => {
+    const onSelect = (option: ShareSheetOption, index: number) =>
       emit('select', option, index);
-    };
 
     const renderHeader = () => {
       const title = slots.title ? slots.title() : props.title;
@@ -103,9 +100,7 @@ export default createComponent({
           role="button"
           tabindex={0}
           class={[bem('option'), className]}
-          onClick={() => {
+          onClick={() => onSelect(option, index)}
-            onSelect(option, index);
-          }}
         >
           <img src={getIconURL(icon)} class={bem('icon')} />
           {name && <span class={bem('name')}>{name}</span>}

src/step/index.tsx

@@ -52,9 +52,7 @@ export default createComponent({
       }
     });
 
-    const onClickStep = () => {
+    const onClickStep = () => parent.onClickStep(index.value);
-      parent.onClickStep(index.value);
-    };
 
     const renderCircle = () => {
       const { finishIcon, activeIcon, activeColor, inactiveIcon } = parentProps;

src/steps/index.tsx

@@ -46,9 +46,7 @@ export default createComponent({
   setup(props, { emit, slots }) {
     const { linkChildren } = useChildren(STEPS_KEY);
 
-    const onClickStep = (index: number) => {
+    const onClickStep = (index: number) => emit('click-step', index);
-      emit('click-step', index);
-    };
 
     linkChildren({
       props,

src/submit-bar/index.tsx

@@ -83,9 +83,7 @@ export default createComponent({
       }
     };
 
-    const onClickButton = () => {
+    const onClickButton = () => emit('submit');
-      emit('submit');
-    };
 
     const renderButton = () => {
       if (slots.button) {

src/swipe-cell/index.tsx

@@ -147,9 +147,7 @@ export default createComponent({
               position,
             },
           ],
-          done: () => {
+          done: () => close(position),
-            close(position);
-          },
         });
       }
     };
@@ -186,13 +184,7 @@ export default createComponent({
       close,
     });
 
-    useClickAway(
+    useClickAway(root, () => onClick('outside'), { eventName: 'touchstart' });
-      root,
-      () => {
-        onClick('outside');
-      },
-      { eventName: 'touchstart' }
-    );
 
     return () => {
       const wrapperStyle = {

src/swipe/index.tsx

@@ -297,9 +297,7 @@ export default createComponent({
       autoplay();
     };
 
-    const resize = () => {
+    const resize = () => initialize(state.active);
-      initialize(state.active);
-    };
 
     let touchStartTime: number;
 
@@ -454,9 +452,7 @@ export default createComponent({
     });
 
     onMounted(initialize);
-    onActivated(() => {
+    onActivated(() => initialize(state.active));
-      initialize(state.active);
-    });
     onDeactivated(stopAutoplay);
     onBeforeUnmount(stopAutoplay);
 

src/tabs/TabsContent.tsx

@@ -29,9 +29,7 @@ export default createComponent({
   setup(props, { emit, slots }) {
     const swipeRef = ref<ComponentInstance>();
 
-    const onChange = (index: number) => {
+    const onChange = (index: number) => emit('change', index);
-      emit('change', index);
-    };
 
     const renderChildren = () => {
       const Content = slots.default?.();

src/tabs/index.tsx

@@ -438,9 +438,8 @@ export default createComponent({
       });
     };
 
-    const onRendered = (name: string | number, title?: string) => {
+    const onRendered = (name: string | number, title?: string) =>
       emit('rendered', name, title);
-    };
 
     useExpose({
       resize: setLine,

src/toast/Toast.tsx

@@ -70,9 +70,7 @@ export default createComponent({
       clearTimeout(timer);
     };
 
-    const toggle = (show: boolean) => {
+    const toggle = (show: boolean) => emit('update:show', show);
-      emit('update:show', show);
-    };
 
     const renderIcon = () => {
       const { icon, type, iconPrefix, loadingType } = props;

src/uploader/PreviewItem.tsx

@@ -56,15 +56,11 @@ export default defineComponent({
       callInterceptor({
         interceptor: beforeDelete,
         args: [item, { name, index }],
-        done() {
+        done: () => emit('delete'),
-          emit('delete');
-        },
       });
     };
 
-    const onPreview = () => {
+    const onPreview = () => emit('preview');
-      emit('preview');
-    };
 
     const renderDeleteIcon = () => {
       if (props.deletable && props.item.status !== 'uploading') {

src/uploader/index.tsx

@@ -233,9 +233,7 @@ export default createComponent({
 
     let imagePreview: ComponentInstance | undefined;
 
-    const onClosePreview = () => {
+    const onClosePreview = () => emit('close-preview');
-      emit('close-preview');
-    };
 
     const previewImage = (item: FileListItem) => {
       if (props.previewFullImage) {
@@ -285,15 +283,9 @@ export default createComponent({
           v-slots={{ 'preview-cover': slots['preview-cover'] }}
           item={item}
           index={index}
-          onClick={() => {
+          onClick={() => emit('click-preview', item, getDetail(index))}
-            emit('click-preview', item, getDetail(index));
+          onDelete={() => deleteFile(item, index)}
-          }}
+          onPreview={() => previewImage(item)}
-          onDelete={() => {
-            deleteFile(item, index);
-          }}
-          onPreview={() => {
-            previewImage(item);
-          }}
           {...pick(props, ['name', 'lazyLoad'])}
           {...previewData}
         />