[improvement] unify mixin name (#2795)

packages/actionsheet/index.js

@@ -1,7 +1,7 @@
 import { use } from '../utils';
+import { PopupMixin } from '../mixins/popup';
 import Icon from '../icon';
 import Loading from '../loading';
-import PopupMixin from '../mixins/popup';
 
 const [sfc, bem] = use('actionsheet');
 

packages/address-edit/index.js

@@ -1,4 +1,5 @@
 import { use, isObj } from '../utils';
+import { isMobile } from '../utils/validate/mobile';
 import Area from '../area';
 import Field from '../field';
 import Popup from '../popup';
@@ -7,7 +8,6 @@ import Button from '../button';
 import Dialog from '../dialog';
 import Detail from './Detail';
 import SwitchCell from '../switch-cell';
-import validateMobile from '../utils/validate/mobile';
 
 const [sfc, bem, t] = use('address-edit');
 
@@ -55,7 +55,7 @@ export default sfc({
     },
     telValidator: {
       type: Function,
-      default: validateMobile
+      default: isMobile
     }
   },
 

packages/area/index.js

@@ -1,6 +1,6 @@
 import { use } from '../utils';
 import Picker from '../picker';
-import PickerMixin from '../mixins/picker';
+import { PickerMixin } from '../mixins/picker';
 
 const [sfc, bem] = use('area');
 

packages/button/index.tsx

@@ -1,6 +1,6 @@
 import { use } from '../utils';
 import { emit, inherit } from '../utils/functional';
-import { routeProps, RouteProps, functionalRoute } from '../mixins/router';
+import { routeProps, RouteProps, functionalRoute } from '../utils/router';
 import Loading from '../loading';
 
 // Types

packages/cell/index.tsx

@@ -1,7 +1,7 @@
 import { use, isDef } from '../utils';
 import { cellProps, SharedCellProps } from './shared';
 import { emit, inherit } from '../utils/functional';
-import { routeProps, RouteProps, functionalRoute } from '../mixins/router';
+import { routeProps, RouteProps, functionalRoute } from '../utils/router';
 import Icon from '../icon';
 
 // Types

packages/checkbox/index.js

@@ -1,5 +1,5 @@
 import { use } from '../utils';
-import CheckboxMixin from '../mixins/checkbox';
+import { CheckboxMixin } from '../mixins/checkbox';
 
 const [sfc, bem] = use('checkbox');
 

packages/collapse-item/index.js

@@ -2,13 +2,13 @@ import { use, isDef } from '../utils';
 import { raf } from '../utils/raf';
 import Cell from '../cell';
 import { cellProps } from '../cell/shared';
-import FindParent from '../mixins/find-parent';
+import { FindParentMixin } from '../mixins/find-parent';
 
 const [sfc, bem] = use('collapse-item');
 const CELL_SLOTS = ['title', 'icon', 'right-icon'];
 
 export default sfc({
-  mixins: [FindParent],
+  mixins: [FindParentMixin],
 
   props: {
     ...cellProps,

packages/contact-edit/index.js

@@ -3,7 +3,7 @@ import Button from '../button';
 import Field from '../field';
 import Toast from '../toast';
 import Dialog from '../dialog';
-import validateMobile from '../utils/validate/mobile';
+import { isMobile } from '../utils/validate/mobile';
 
 const [sfc, bem, t] = use('contact-edit');
 
@@ -23,7 +23,7 @@ export default sfc({
     },
     telValidator: {
       type: Function,
-      default: validateMobile
+      default: isMobile
     }
   },
 

packages/datetime-picker/index.js

@@ -1,7 +1,13 @@
 import { use, range } from '../utils';
 import Picker from '../picker';
-import PickerMixin from '../mixins/picker';
-import { times, padZero, isValidDate, getTrueValue, getMonthEndDay } from './utils';
+import { PickerMixin } from '../mixins/picker';
+import {
+  times,
+  padZero,
+  isValidDate,
+  getTrueValue,
+  getMonthEndDay
+} from './utils';
 
 const [sfc, bem] = use('datetime-picker');
 const currentYear = new Date().getFullYear();
@@ -96,14 +102,21 @@ export default sfc({
         ];
       }
 
-      const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = this.getBoundary(
-        'max',
-        this.innerValue
-      );
-      const { minYear, minDate, minMonth, minHour, minMinute } = this.getBoundary(
-        'min',
-        this.innerValue
-      );
+      const {
+        maxYear,
+        maxDate,
+        maxMonth,
+        maxHour,
+        maxMinute
+      } = this.getBoundary('max', this.innerValue);
+
+      const {
+        minYear,
+        minDate,
+        minMonth,
+        minHour,
+        minMinute
+      } = this.getBoundary('min', this.innerValue);
 
       const result = [
         {

packages/dialog/Dialog.js

@@ -1,11 +1,11 @@
 import { use } from '../utils';
+import { PopupMixin } from '../mixins/popup';
 import Button from '../button';
-import Popup from '../mixins/popup';
 
 const [sfc, bem, t] = use('dialog');
 
 export default sfc({
-  mixins: [Popup],
+  mixins: [PopupMixin],
 
   props: {
     title: String,

packages/goods-action-big-btn/index.tsx

@@ -1,7 +1,7 @@
 import { use } from '../utils';
 import Button, { ButtonEvents } from '../button';
 import { emit, inherit } from '../utils/functional';
-import { functionalRoute, routeProps, RouteProps } from '../mixins/router';
+import { functionalRoute, routeProps, RouteProps } from '../utils/router';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';

packages/goods-action-mini-btn/index.tsx

@@ -1,7 +1,7 @@
 import { use } from '../utils';
 import Icon, { IconEvents } from '../icon';
 import { emit, inherit } from '../utils/functional';
-import { functionalRoute, routeProps, RouteProps } from '../mixins/router';
+import { functionalRoute, routeProps, RouteProps } from '../utils/router';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';

packages/icon/index.tsx

@@ -1,7 +1,7 @@
 import { use } from '../utils';
 import { inherit } from '../utils/functional';
 import Info from '../info';
-import isSrc from '../utils/validate/src';
+import { isSrc } from '../utils/validate/src';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';

packages/image-preview/ImagePreview.js

@@ -1,6 +1,6 @@
 import { use, range } from '../utils';
-import Popup from '../mixins/popup';
-import Touch from '../mixins/touch';
+import { PopupMixin } from '../mixins/popup';
+import { TouchMixin } from '../mixins/touch';
 import Swipe from '../swipe';
 import SwipeItem from '../swipe-item';
 
@@ -15,7 +15,7 @@ function getDistance(touches) {
 }
 
 export default sfc({
-  mixins: [Popup, Touch],
+  mixins: [PopupMixin, TouchMixin],
 
   props: {
     images: Array,

packages/locale/index.ts

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import deepAssign from '../utils/deep-assign';
+import { deepAssign } from '../utils/deep-assign';
 import defaultMessages from './lang/zh-CN';
 
 declare module 'vue' {

packages/mixins/checkbox.js

@@ -2,10 +2,10 @@
  * Common part of Checkbox & Radio
  */
 import Icon from '../icon';
-import findParent from './find-parent';
+import { FindParentMixin } from './find-parent';
 
-export default (parent, bem) => ({
-  mixins: [findParent],
+export const CheckboxMixin = (parent, bem) => ({
+  mixins: [FindParentMixin],
 
   props: {
     name: null,

packages/mixins/click-outside.js

@@ -1,6 +1,6 @@
 import { on, off } from '../utils/event';
 
-export default config => ({
+export const ClickOutsideMixin = config => ({
   mounted() {
     config.handler = event => {
       if (!this.$el.contains(event.target)) {

packages/mixins/find-parent.js

@@ -2,7 +2,7 @@
  * find parent component by name
  */
 
-export default {
+export const FindParentMixin = {
   data() {
     return {
       parent: null

packages/mixins/picker.js

@@ -2,7 +2,7 @@
  * Common Picker Props
  */
 
-export default {
+export const PickerMixin = {
   props: {
     title: String,
     loading: Boolean,

packages/mixins/popup/index.js

@@ -1,11 +1,11 @@
 import manager from './manager';
 import context from './context';
-import Touch from '../touch';
+import { TouchMixin } from '../touch';
 import { on, off } from '../../utils/event';
 import { getScrollEventTarget } from '../../utils/scroll';
 
-export default {
-  mixins: [Touch],
+export const PopupMixin = {
+  mixins: [TouchMixin],
 
   props: {
     // whether to show popup

packages/mixins/slots.js

@@ -3,7 +3,7 @@
  * downgrade to slots in lower version
  */
 
-export default {
+export const SlotsMixin = {
   methods: {
     slots(name = 'default', props) {
       const { $slots, $scopedSlots } = this;

packages/mixins/switch.js

@@ -1,25 +0,0 @@
-/**
- * Common Switch Props
- */
-
-export default {
-  props: {
-    value: null,
-    loading: Boolean,
-    disabled: Boolean,
-    activeColor: String,
-    inactiveColor: String,
-    activeValue: {
-      type: null,
-      default: true
-    },
-    inactiveValue: {
-      type: null,
-      default: false
-    },
-    size: {
-      type: String,
-      default: '30px'
-    }
-  }
-};

packages/mixins/touch.js

@@ -9,7 +9,7 @@ function getDirection(x, y) {
   return '';
 }
 
-export default {
+export const TouchMixin = {
   data() {
     return {
       direction: ''

packages/notify/Notify.js

@@ -1,6 +1,6 @@
 import { use } from '../utils';
-import PopupMixin from '../mixins/popup';
 import { RED, WHITE } from '../utils/color';
+import { PopupMixin } from '../mixins/popup';
 
 const [sfc, bem] = use('notify');
 

packages/picker/PickerColumn.js

@@ -1,4 +1,4 @@
-import deepClone from '../utils/deep-clone';
+import { deepClone } from '../utils/deep-clone';
 import { use, isObj, range } from '../utils';
 
 const DEFAULT_DURATION = 200;

packages/picker/index.js

@@ -1,9 +1,9 @@
 import { use } from '../utils';
 import { prevent } from '../utils/event';
+import { deepClone } from '../utils/deep-clone';
+import { PickerMixin } from '../mixins/picker';
 import Loading from '../loading';
 import PickerColumn from './PickerColumn';
-import deepClone from '../utils/deep-clone';
-import PickerMixin from '../mixins/picker';
 
 const [sfc, bem, t] = use('picker');
 

packages/popup/index.js

@@ -1,10 +1,10 @@
 import { use } from '../utils';
-import Popup from '../mixins/popup';
+import { PopupMixin } from '../mixins/popup';
 
 const [sfc, bem] = use('popup');
 
 export default sfc({
-  mixins: [Popup],
+  mixins: [PopupMixin],
 
   props: {
     position: String,

packages/pull-refresh/index.js

@@ -1,13 +1,13 @@
 import { use } from '../utils';
 import Loading from '../loading';
-import Touch from '../mixins/touch';
+import { TouchMixin } from '../mixins/touch';
 import { getScrollTop, getScrollEventTarget } from '../utils/scroll';
 
 const [sfc, bem, t] = use('pull-refresh');
 const TEXT_STATUS = ['pulling', 'loosing', 'success'];
 
 export default sfc({
-  mixins: [Touch],
+  mixins: [TouchMixin],
 
   props: {
     disabled: Boolean,

packages/radio/index.js

@@ -1,5 +1,5 @@
 import { use } from '../utils';
-import CheckboxMixin from '../mixins/checkbox';
+import { CheckboxMixin } from '../mixins/checkbox';
 
 const [sfc, bem] = use('radio');
 

packages/sku/components/SkuMessages.js

@@ -2,8 +2,8 @@ import { use, isIOS } from '../../utils';
 import Cell from '../../cell';
 import CellGroup from '../../cell-group';
 import Field from '../../field';
-import validateEmail from '../../utils/validate/email';
-import validateNumber from '../../utils/validate/number';
+import { isEmail } from '../../utils/validate/email';
+import { isNumber } from '../../utils/validate/number';
 import SkuImgUploader from './SkuImgUploader';
 
 const [sfc, bem] = use('sku-messages');
@@ -104,13 +104,13 @@ export default sfc({
             return textType + message.name;
           }
         } else {
-          if (message.type === 'tel' && !validateNumber(value)) {
+          if (message.type === 'tel' && !isNumber(value)) {
             return '请填写正确的数字格式留言';
           }
           if (message.type === 'mobile' && !/^\d{6,20}$/.test(value)) {
             return '手机号长度为6-20位数字';
           }
-          if (message.type === 'email' && !validateEmail(value)) {
+          if (message.type === 'email' && !isEmail(value)) {
             return '请填写正确的邮箱';
           }
           if (message.type === 'id_no' && (value.length < 15 || value.length > 18)) {

packages/slider/index.js

@@ -1,10 +1,10 @@
 import { use } from '../utils';
-import Touch from '../mixins/touch';
+import { TouchMixin } from '../mixins/touch';
 
 const [sfc, bem] = use('slider');
 
 export default sfc({
-  mixins: [Touch],
+  mixins: [TouchMixin],
 
   props: {
     min: Number,

packages/swipe-cell/index.js

@@ -1,12 +1,12 @@
 import { use, range } from '../utils';
-import Touch from '../mixins/touch';
-import ClickOutside from '../mixins/click-outside';
+import { TouchMixin } from '../mixins/touch';
+import { ClickOutsideMixin } from '../mixins/click-outside';
 
 const [sfc, bem] = use('swipe-cell');
 const THRESHOLD = 0.15;
 
 export default sfc({
-  mixins: [Touch, ClickOutside({
+  mixins: [TouchMixin, ClickOutsideMixin({
     event: 'touchstart',
     method: 'onClick'
   })],

packages/swipe/index.js

@@ -1,11 +1,11 @@
 import { use } from '../utils';
-import Touch from '../mixins/touch';
 import { on, off } from '../utils/event';
+import { TouchMixin } from '../mixins/touch';
 
 const [sfc, bem] = use('swipe');
 
 export default sfc({
-  mixins: [Touch],
+  mixins: [TouchMixin],
 
   props: {
     width: Number,

packages/tab/index.js

@@ -1,11 +1,11 @@
 /* eslint-disable object-shorthand */
 import { use } from '../utils';
-import findParent from '../mixins/find-parent';
+import { FindParentMixin } from '../mixins/find-parent';
 
 const [sfc, bem] = use('tab');
 
 export default sfc({
-  mixins: [findParent],
+  mixins: [FindParentMixin],
 
   props: {
     title: String,

packages/tabbar-item/index.js

@@ -1,7 +1,7 @@
 import { use } from '../utils';
 import Icon from '../icon';
 import Info from '../info';
-import { route, routeProps } from '../mixins/router';
+import { route, routeProps } from '../utils/router';
 
 const [sfc, bem] = use('tabbar-item');
 

packages/tabs/index.js

@@ -1,14 +1,14 @@
 import { use, isDef } from '../utils';
-import Touch from '../mixins/touch';
 import { raf } from '../utils/raf';
 import { on, off } from '../utils/event';
+import { TouchMixin } from '../mixins/touch';
 import { setScrollTop, getScrollTop, getElementTop, getScrollEventTarget } from '../utils/scroll';
 
 const [sfc, bem] = use('tabs');
 const tabBem = use('tab')[1];
 
 export default sfc({
-  mixins: [Touch],
+  mixins: [TouchMixin],
 
   model: {
     prop: 'active'

packages/toast/Toast.js

@@ -1,13 +1,13 @@
 import { use, isDef } from '../utils';
+import { PopupMixin } from '../mixins/popup';
 import Icon from '../icon';
 import Loading from '../loading';
-import Popup from '../mixins/popup';
 
 const [sfc, bem] = use('toast');
 const STYLE = ['success', 'fail', 'loading'];
 
 export default sfc({
-  mixins: [Popup],
+  mixins: [PopupMixin],
 
   props: {
     className: null,

packages/utils/deep-assign.ts

@@ -17,11 +17,11 @@ function assignKey(to: Object, from: Object, key: string) {
   if (!hasOwnProperty.call(to, key) || !isObj(val)) {
     to[key] = val;
   } else {
-    to[key] = assign(Object(to[key]), from[key]);
+    to[key] = deepAssign(Object(to[key]), from[key]);
   }
 }
 
-export default function assign(to: Object, from: Object) {
+export function deepAssign(to: Object, from: Object) {
   Object.keys(from).forEach(key => {
     assignKey(to, from, key);
   });

packages/utils/deep-clone.ts

@@ -1,6 +1,6 @@
-import deepAssign from './deep-assign';
+import { deepAssign } from './deep-assign';
 
-export default function deepClone(obj: object): object {
+export function deepClone(obj: object): object {
   if (Array.isArray(obj)) {
     return obj.map(item => deepClone(item));
   }

packages/utils/test/index.spec.js

@@ -1,11 +1,11 @@
-import deepClone from '../deep-clone';
+import { deepClone } from '../deep-clone';
 import { isAndroid, isDef, camelize, get } from '..';
 import { raf, cancel } from '../raf';
 import { later } from '../../../test/utils';
-import isSrc from '../validate/src';
-import isEmail from '../validate/email';
-import isMobile from '../validate/mobile';
-import isNumber from '../validate/number';
+import { isSrc } from '../validate/src';
+import { isEmail } from '../validate/email';
+import { isMobile } from '../validate/mobile';
+import { isNumber } from '../validate/number';
 
 test('deepClone', () => {
   const a = { foo: 0 };

packages/utils/use/bem.ts

@@ -36,7 +36,7 @@ function prefix(name: string, mods: Mods): Mods {
   return ret;
 }
 
-export default (name: string) => (el?: Mods, mods?: Mods): Mods => {
+export const useBEM = (name: string) => (el?: Mods, mods?: Mods): Mods => {
   if (el && typeof el !== 'string') {
     mods = el;
     el = '';

packages/utils/use/i18n.ts

@@ -1,7 +1,7 @@
 import { get, camelize } from '..';
 import locale from '../../locale';
 
-export default (name: string) => {
+export const useI18N = (name: string) => {
   const prefix = camelize(name) + '.';
   return (path: string, ...args: any[]): string => {
     const message = get(locale.messages(), prefix + path) || get(locale.messages(), path);

packages/utils/use/index.ts

@@ -1,14 +1,14 @@
-import useBem from './bem';
-import useSfc from './sfc';
-import useI18n from './i18n';
+import { useBEM } from './bem';
+import { useSFC } from './sfc';
+import { useI18N } from './i18n';
 
 type UseReturn = [
-  ReturnType<typeof useSfc>,
-  ReturnType<typeof useBem>,
-  ReturnType<typeof useI18n>
+  ReturnType<typeof useSFC>,
+  ReturnType<typeof useBEM>,
+  ReturnType<typeof useI18N>
 ];
 
 export function use(name: string): UseReturn {
   name = 'van-' + name;
-  return [useSfc(name), useBem(name), useI18n(name)];
+  return [useSFC(name), useBEM(name), useI18N(name)];
 }

packages/utils/use/sfc.ts

@@ -3,7 +3,7 @@
  */
 import '../../locale';
 import { camelize } from '..';
-import SlotsMixin from '../../mixins/slots';
+import { SlotsMixin } from '../../mixins/slots';
 import Vue, {
   VueConstructor,
   ComponentOptions,
@@ -35,7 +35,7 @@ export interface VantComponentOptions extends ComponentOptions<Vue> {
 
 export type DefaultProps = Record<string, any>;
 
-export type FunctionalComponent<
+export type FunctionComponent<
   Props = DefaultProps,
   PropDefs = PropsDefinition<Props>
 > = {
@@ -93,6 +93,7 @@ function install(this: ComponentOptions<Vue>, Vue: VueConstructor) {
 
 // unify slots & scopedSlots
 export function unifySlots(context: RenderContext) {
+  // use data.scopedSlots in lower Vue version
   const scopedSlots = context.scopedSlots || context.data.scopedSlots || {};
   const slots = context.slots();
 
@@ -105,8 +106,9 @@ export function unifySlots(context: RenderContext) {
   return scopedSlots;
 }
 
-function transformFunctionalComponent(
-  pure: FunctionalComponent
+// should be removed after Vue 3
+function transformFunctionComponent(
+  pure: FunctionComponent
 ): VantComponentOptions {
   return {
     functional: true,
@@ -117,11 +119,11 @@ function transformFunctionalComponent(
   };
 }
 
-export default (name: string) => <Props = DefaultProps, Events = {}, Slots = {}>(
-  sfc: VantComponentOptions | FunctionalComponent
+export const useSFC = (name: string) => <Props = DefaultProps, Events = {}, Slots = {}>(
+  sfc: VantComponentOptions | FunctionComponent
 ): TsxComponent<Props, Events, Slots> => {
   if (typeof sfc === 'function') {
-    sfc = transformFunctionalComponent(sfc);
+    sfc = transformFunctionComponent(sfc);
   }
 
   if (!sfc.functional) {

packages/utils/validate/email.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-export default function email(value: string): boolean {
+export function isEmail(value: string): boolean {
   const reg = /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i;
   return reg.test(value);
 }

packages/utils/validate/mobile.ts

@@ -1,4 +1,4 @@
-export default function mobile(value: string): boolean {
+export function isMobile(value: string): boolean {
   value = value.replace(/[^-|\d]/g, '');
   return /^((\+86)|(86))?(1)\d{10}$/.test(value) || /^0[0-9-]{10,13}$/.test(value);
 }

packages/utils/validate/number.ts

@@ -1,3 +1,3 @@
-export default function number(value: string): boolean {
+export function isNumber(value: string): boolean {
   return /^\d+$/.test(value);
 }

packages/utils/validate/src.ts

@@ -1,6 +1,6 @@
 /**
  * Is image source
  */
-export default function src(url: string): boolean {
+export function isSrc(url: string): boolean {
   return /^(https?:)?\/\/|data:image/.test(url);
 }