[improvement] adjust utils

docs/src/demo-common.js

@@ -7,7 +7,7 @@ import VueRouter from 'vue-router';
 import VantDoc, { DemoBlock, DemoSection } from '@vant/doc';
 import i18n from './utils/i18n';
 import Vant, { Lazyload, Locale } from '../../packages';
-import { camelize } from '../../packages/utils';
+import { camelize } from '../../packages/utils/format/string';
 
 Vue
   .use(Vant)

docs/src/utils/i18n.js

@@ -1,5 +1,6 @@
 // component mixin
-import { get, camelize } from '../../../packages/utils';
+import { get } from '../../../packages/utils';
+import { camelize } from '../../../packages/utils/format/string';
 
 export default {
   computed: {

packages/address-edit/Detail.js

@@ -1,4 +1,5 @@
-import { use, isAndroid } from '../utils';
+import { use } from '../utils';
+import { isAndroid } from '../utils/validate/system';
 import Cell from '../cell';
 import Field from '../field';
 

packages/circle/index.js

@@ -1,5 +1,5 @@
 import { use } from '../utils';
-import { raf, cancel } from '../utils/raf';
+import { raf, cancelRaf } from '../utils/dom/raf';
 import { BLUE, WHITE } from '../utils/color';
 
 const [sfc, bem] = use('circle');
@@ -81,7 +81,7 @@ export default sfc({
         this.increase = this.endRate > this.startRate;
         this.duration = Math.abs(((this.startRate - this.endRate) * 1000) / this.speed);
         if (this.speed) {
-          cancel(this.rafId);
+          cancelRaf(this.rafId);
           this.rafId = raf(this.animate);
         } else {
           this.$emit('input', this.endRate);

packages/collapse-item/index.js

@@ -1,5 +1,5 @@
 import { use, isDef } from '../utils';
-import { raf } from '../utils/raf';
+import { raf } from '../utils/dom/raf';
 import Cell from '../cell';
 import { cellProps } from '../cell/shared';
 import { ChildrenMixin } from '../mixins/relation';

packages/coupon/index.js

@@ -1,5 +1,6 @@
-import { use, padZero } from '../utils';
+import { use } from '../utils';
 import { RED } from '../utils/color';
+import { padZero } from '../utils/format/string';
 import Checkbox from '../checkbox';
 
 const [sfc, bem, t] = use('coupon');

packages/datetime-picker/index.js

@@ -1,4 +1,6 @@
-import { use, range, padZero } from '../utils';
+import { use } from '../utils';
+import { range } from '../utils/format/number';
+import { padZero } from '../utils/format/string';
 import Picker from '../picker';
 import { pickerProps } from '../picker/shared';
 import {

packages/dialog/index.js

@@ -1,9 +1,13 @@
 import Vue from 'vue';
 import VanDialog from './Dialog';
-import { isServer, isInDocument } from '../utils';
+import { isServer } from '../utils';
 
 let instance;
 
+function isInDocument(element) {
+  return document.body.contains(element);
+}
+
 function initInstance() {
   if (instance) {
     instance.$destroy();

packages/field/index.js

@@ -1,9 +1,10 @@
 import Icon from '../icon';
 import Cell from '../cell';
 import { cellProps } from '../cell/shared';
-import { preventDefault } from '../utils/event';
-import { getRootScrollTop } from '../utils/scroll';
-import { use, isObj, isDef, isIOS, suffixPx } from '../utils';
+import { preventDefault } from '../utils/dom/event';
+import { getRootScrollTop } from '../utils/dom/scroll';
+import { use, isObj, isDef, suffixPx } from '../utils';
+import { isIOS } from '../utils/validate/system';
 
 const [sfc, bem] = use('field');
 

packages/image-preview/ImagePreview.js

@@ -1,5 +1,6 @@
-import { use, range, isServer } from '../utils';
-import { preventDefault } from '../utils/event';
+import { use, isServer } from '../utils';
+import { range } from '../utils/format/number';
+import { preventDefault } from '../utils/dom/event';
 import { PopupMixin } from '../mixins/popup';
 import { TouchMixin } from '../mixins/touch';
 import Swipe from '../swipe';

packages/index-bar/index.js

@@ -3,7 +3,7 @@ import { TouchMixin } from '../mixins/touch';
 import { ParentMixin } from '../mixins/relation';
 import { BindEventMixin } from '../mixins/bind-event';
 import { GREEN } from '../utils/color';
-import { getScrollTop, getElementTop, getScrollEventTarget } from '../utils/scroll';
+import { getScrollTop, getElementTop, getScrollEventTarget } from '../utils/dom/scroll';
 
 const [sfc, bem] = use('index-bar');
 

packages/list/index.js

@@ -6,7 +6,7 @@ import {
   getElementTop,
   getVisibleHeight,
   getScrollEventTarget
-} from '../utils/scroll';
+} from '../utils/dom/scroll';
 
 const [sfc, bem, t] = use('list');
 

packages/mixins/bind-event.js

@@ -1,4 +1,4 @@
-import { on, off } from '../utils/event';
+import { on, off } from '../utils/dom/event';
 
 export function BindEventMixin(handler) {
   function bind() {

packages/mixins/click-outside.js

@@ -1,4 +1,4 @@
-import { on, off } from '../utils/event';
+import { on, off } from '../utils/dom/event';
 
 export const ClickOutsideMixin = config => ({
   mounted() {

packages/mixins/popup/index.js

@@ -1,8 +1,8 @@
 import { context } from './context';
 import { TouchMixin } from '../touch';
-import { on, off, preventDefault } from '../../utils/event';
+import { on, off, preventDefault } from '../../utils/dom/event';
 import { openOverlay, closeOverlay, updateOverlay } from './overlay';
-import { getScrollEventTarget } from '../../utils/scroll';
+import { getScrollEventTarget } from '../../utils/dom/scroll';
 
 export const PopupMixin = {
   mixins: [TouchMixin],

packages/number-keyboard/index.js

@@ -1,5 +1,5 @@
 import { use } from '../utils';
-import { stopPropagation } from '../utils/event';
+import { stopPropagation } from '../utils/dom/event';
 import { BindEventMixin } from '../mixins/bind-event';
 import Key from './Key';
 

packages/overlay/index.tsx

@@ -1,6 +1,6 @@
 import { use } from '../utils';
 import { inherit } from '../utils/functional';
-import { preventDefault } from '../utils/event';
+import { preventDefault } from '../utils/dom/event';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';

packages/picker/PickerColumn.js

@@ -1,6 +1,7 @@
 import { deepClone } from '../utils/deep-clone';
-import { use, isObj, range } from '../utils';
-import { preventDefault } from '../utils/event';
+import { use, isObj } from '../utils';
+import { range } from '../utils/format/number';
+import { preventDefault } from '../utils/dom/event';
 import { TouchMixin } from '../mixins/touch';
 
 const DEFAULT_DURATION = 200;

packages/picker/index.js

@@ -1,5 +1,5 @@
 import { use } from '../utils';
-import { preventDefault } from '../utils/event';
+import { preventDefault } from '../utils/dom/event';
 import { deepClone } from '../utils/deep-clone';
 import { pickerProps } from './shared';
 import { BLUE } from '../utils/color';

packages/pull-refresh/index.js

@@ -1,7 +1,7 @@
 import { use } from '../utils';
-import { preventDefault } from '../utils/event';
+import { preventDefault } from '../utils/dom/event';
 import { TouchMixin } from '../mixins/touch';
-import { getScrollTop, getScrollEventTarget } from '../utils/scroll';
+import { getScrollTop, getScrollEventTarget } from '../utils/dom/scroll';
 import Loading from '../loading';
 
 const [sfc, bem, t] = use('pull-refresh');

packages/rate/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable prefer-spread */
 import { use, suffixPx } from '../utils';
 import { emit, inherit } from '../utils/functional';
-import { preventDefault } from '../utils/event';
+import { preventDefault } from '../utils/dom/event';
 import Icon from '../icon';
 
 // Types

packages/search/index.tsx

@@ -1,6 +1,6 @@
 import { use } from '../utils';
 import { inherit, emit } from '../utils/functional';
-import { preventDefault } from '../utils/event';
+import { preventDefault } from '../utils/dom/event';
 import Field from '../field';
 
 // Types

packages/slider/index.js

@@ -1,6 +1,6 @@
 import { use, isDef } from '../utils';
 import { TouchMixin } from '../mixins/touch';
-import { preventDefault } from '../utils/event';
+import { preventDefault } from '../utils/dom/event';
 
 const [sfc, bem] = use('slider');
 

packages/swipe-cell/index.js

@@ -1,5 +1,6 @@
-import { use, range } from '../utils';
-import { preventDefault } from '../utils/event';
+import { use } from '../utils';
+import { range } from '../utils/format/number';
+import { preventDefault } from '../utils/dom/event';
 import { TouchMixin } from '../mixins/touch';
 import { ClickOutsideMixin } from '../mixins/click-outside';
 

packages/swipe/index.js

@@ -1,5 +1,5 @@
 import { use } from '../utils';
-import { on, off, preventDefault } from '../utils/event';
+import { on, off, preventDefault } from '../utils/dom/event';
 import { TouchMixin } from '../mixins/touch';
 
 const [sfc, bem] = use('swipe');

packages/tabs/index.js

@@ -1,6 +1,6 @@
 import { use, isDef } from '../utils';
-import { raf } from '../utils/raf';
-import { on, off } from '../utils/event';
+import { raf } from '../utils/dom/raf';
+import { on, off } from '../utils/dom/event';
 import { TouchMixin } from '../mixins/touch';
 import { ParentMixin } from '../mixins/relation';
 import {
@@ -8,7 +8,7 @@ import {
   getScrollTop,
   getElementTop,
   getScrollEventTarget
-} from '../utils/scroll';
+} from '../utils/dom/scroll';
 
 const [sfc, bem] = use('tabs');
 const tabBem = use('tab')[1];

packages/utils/dom/event.ts

@@ -1,8 +1,8 @@
 /* eslint-disable no-empty */
 /* eslint-disable getter-return */
 /* eslint-disable import/no-mutable-exports */
-import { isServer } from '.';
-import { EventHanlder } from './types';
+import { isServer } from '..';
+import { EventHanlder } from '../types';
 
 export let supportsPassive = false;
 

packages/utils/dom/raf.ts

@@ -2,7 +2,7 @@
  * requestAnimationFrame polyfill
  */
 
-import { isServer } from './index';
+import { isServer } from '..';
 
 let prev = Date.now();
 
@@ -28,6 +28,6 @@ export function raf(fn: FrameRequestCallback): number {
   return iRaf.call(root, fn);
 }
 
-export function cancel(id: number) {
+export function cancelRaf(id: number) {
   iCancel.call(root, id);
 }

packages/utils/format/number.ts

@@ -0,0 +1,3 @@
+export function range(num: number, min: number, max: number): number {
+  return Math.min(Math.max(num, min), max);
+}

packages/utils/format/string.ts

@@ -0,0 +1,9 @@
+const camelizeRE = /-(\w)/g;
+
+export function camelize(str: string): string {
+  return str.replace(camelizeRE, (_, c) => c.toUpperCase());
+}
+
+export function padZero(num: number | string): string {
+  return (num < 10 ? '0' : '') + num;
+}

packages/utils/format/unit.ts

@@ -0,0 +1,11 @@
+import { isDef } from '..';
+import { isNumber } from '../validate/number';
+
+export function suffixPx(value?: string | number): string | undefined {
+  if (!isDef(value)) {
+    return undefined;
+  }
+
+  value = String(value);
+  return isNumber(value) ? `${value}px` : value;
+}

packages/utils/index.ts

@@ -1,7 +1,7 @@
 import Vue from 'vue';
-import { isNumber } from './validate/number';
 
 export { use } from './use';
+export { suffixPx } from './format/unit';
 
 export const isServer: boolean = Vue.prototype.$isServer;
 
@@ -26,39 +26,3 @@ export function get(object: any, path: string): any {
 
   return result;
 }
-
-const camelizeRE = /-(\w)/g;
-export function camelize(str: string): string {
-  return str.replace(camelizeRE, (_, c) => c.toUpperCase());
-}
-
-export function isAndroid(): boolean {
-  /* istanbul ignore next */
-  return isServer ? false : /android/.test(navigator.userAgent.toLowerCase());
-}
-
-export function isIOS(): boolean {
-  /* istanbul ignore next */
-  return isServer ? false : /ios|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase());
-}
-
-export function range(num: number, min: number, max: number): number {
-  return Math.min(Math.max(num, min), max);
-}
-
-export function isInDocument(element: HTMLElement): boolean {
-  return document.body.contains(element);
-}
-
-export function suffixPx(value?: string | number): string | undefined {
-  if (!isDef(value)) {
-    return undefined;
-  }
-
-  value = String(value);
-  return isNumber(value) ? `${value}px` : value;
-}
-
-export function padZero(num: number | string): string {
-  return (num < 10 ? '0' : '') + num;
-}

packages/utils/test/index.spec.js

@@ -1,10 +1,12 @@
 import { deepClone } from '../deep-clone';
-import { isAndroid, isDef, camelize, get } from '..';
-import { raf, cancel } from '../raf';
+import { isDef, get } from '..';
+import { raf, cancelRaf } from '../dom/raf';
 import { later } from '../../../test/utils';
 import { isEmail } from '../validate/email';
 import { isMobile } from '../validate/mobile';
 import { isNumber } from '../validate/number';
+import { isAndroid } from '../validate/system';
+import { camelize } from '../format/string';
 
 test('deepClone', () => {
   const a = { foo: 0 };
@@ -53,7 +55,7 @@ test('raf', async () => {
 
   await later(50);
   expect(spy).toHaveBeenCalledTimes(1);
-  cancel(1);
+  cancelRaf(1);
 });
 
 test('is-email', () => {

packages/utils/use/i18n.ts

@@ -1,4 +1,5 @@
-import { get, camelize } from '..';
+import { get } from '..';
+import { camelize } from '../format/string';
 import locale from '../../locale';
 
 export function useI18N(name: string) {

packages/utils/use/sfc.ts

@@ -2,7 +2,7 @@
  * Create a basic component with common options
  */
 import '../../locale';
-import { camelize } from '..';
+import { camelize } from '../format/string';
 import { SlotsMixin } from '../../mixins/slots';
 import Vue, { VNode, VueConstructor, ComponentOptions, RenderContext } from 'vue';
 import { DefaultProps, FunctionComponent } from '../types';

packages/utils/validate/system.ts

@@ -0,0 +1,11 @@
+import { isServer } from '..';
+
+export function isAndroid(): boolean {
+  /* istanbul ignore next */
+  return isServer ? false : /android/.test(navigator.userAgent.toLowerCase());
+}
+
+export function isIOS(): boolean {
+  /* istanbul ignore next */
+  return isServer ? false : /ios|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase());
+}