[new feature] Loading: add text-size prop

docs/markdown/v2-progress-tracking.md

@@ -54,6 +54,7 @@
 ## Loading
 
 - 新增`default`插槽
+- 新增`text-size`属性
 
 ## NoticeBar
 

packages/checkbox/zh-CN.md

@@ -170,7 +170,7 @@ export default {
 |------|------|------|
 | change | 当绑定值变化时触发的事件 | 当前组件的值 |
 
-### Checkbox Slots
+### Checkbox Slot
 
 | 名称 | 说明 | slot-scope |
 |------|------|------|

packages/field/index.js

@@ -1,9 +1,8 @@
 import Icon from '../icon';
 import Cell from '../cell';
 import { cellProps } from '../cell/shared';
-import { use, isObj, isDef, isIOS } from '../utils';
 import { getRootScrollTop } from '../utils/scroll';
-import { isNumber } from '../utils/validate/number';
+import { use, isObj, isDef, isIOS, suffixPx } from '../utils';
 
 const [sfc, bem] = use('field');
 
@@ -66,8 +65,7 @@ export default sfc({
     labelStyle() {
       const { labelWidth } = this;
       if (labelWidth) {
-        const width = isNumber(String(labelWidth)) ? `${labelWidth}px` : labelWidth;
-        return { width };
+        return { width: suffixPx(labelWidth) };
       }
     }
   },

packages/loading/en-US.md

@@ -35,7 +35,8 @@ Vue.use(Loading);
 |------|------|------|------|
 | color | Loading color | `String` | `#c9c9c9` |  |
 | type | Can be set to `spinner` | `String` | `circular` |
-| size | Size | `String` | `30px` |
+| size | Icon size | `String` | `30px` |
+| text-size | Text font size | `String | Number` | `14px` |
 
 ### Slot
 

packages/loading/index.tsx

@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { use, suffixPx } from '../utils';
 import { inherit } from '../utils/functional';
 
 // Types
@@ -6,9 +6,10 @@ import { CreateElement, RenderContext } from 'vue/types';
 import { DefaultSlots } from '../utils/use/sfc';
 
 export type LoadingProps = {
-  size?: string;
   type: string;
+  size?: string;
   color: string;
+  textSize?: string | number;
 };
 
 const [sfc, bem] = use('loading');
@@ -41,19 +42,34 @@ function Loading(
     </svg>
   );
 
+  function Text() {
+    if (slots.default) {
+      const style = props.textSize && {
+        fontSize: suffixPx(props.textSize)
+      };
+
+      return (
+        <span class={bem('text')} style={style}>
+          {slots.default()}
+        </span>
+      );
+    }
+  }
+
   return (
     <div class={bem([type])} {...inherit(ctx, true)}>
       <span class={bem('spinner', type)} style={style}>
         {Spin}
         {Circular}
       </span>
-      {slots.default && <span class={bem('text')}>{slots.default()}</span>}
+      {Text()}
     </div>
   );
 }
 
 Loading.props = {
   size: String,
+  textSize: [String, Number],
   type: {
     type: String,
     default: 'circular'

packages/loading/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`text-size prop 1`] = `<div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span><span class="van-loading__text" style="font-size: 20px;">Text</span></div>`;

packages/loading/test/index.spec.js

@@ -0,0 +1,15 @@
+import { mount } from '../../../test/utils';
+import Loading from '..';
+
+test('text-size prop', () => {
+  const wrapper = mount(Loading, {
+    propsData: {
+      textSize: 20
+    },
+    scopedSlots: {
+      default: () => 'Text'
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});

packages/loading/zh-CN.md

@@ -35,7 +35,8 @@ Vue.use(Loading);
 |------|------|------|------|------|
 | color | 颜色 | `String` | `#c9c9c9` | - |
 | type | 类型，可选值为 `spinner` | `String` | `circular` | - |
-| size | 大小 | `String` | `30px` | - |
+| size | 加载图标大小 | `String` | `30px` | - |
+| text-size | 文字大小 | `String | Number` | `14px` | 2.0.0 |
 
 ### Slot
 

packages/radio/zh-CN.md

@@ -122,7 +122,7 @@ export default {
 |------|------|------|
 | change | 当绑定值变化时触发的事件 | 当前选中项的 name |
 
-### Radio Slots
+### Radio Slot
 
 | 名称 | 说明 | slot-scope |
 |------|------|------|

packages/skeleton/index.tsx

@@ -1,6 +1,5 @@
-import { use } from '../utils';
+import { use, suffixPx } from '../utils';
 import { inherit } from '../utils/functional';
-import { isNumber } from '../utils/validate/number';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
@@ -22,11 +21,6 @@ const [sfc, bem] = use('skeleton');
 const DEFAULT_ROW_WIDTH = '100%';
 const DEFAULT_LAST_ROW_WIDTH = '60%';
 
-function suffixPx(value: string | number): string {
-  value = String(value);
-  return isNumber(value) ? `${value}px` : value;
-}
-
 function Skeleton(
   h: CreateElement,
   props: SkeletonProps,

packages/utils/index.ts

@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import { isNumber } from './validate/number';
 
 export { use } from './use';
 
@@ -48,3 +49,8 @@ export function range(num: number, min: number, max: number): number {
 export function isInDocument(element: HTMLElement): boolean {
   return document.body.contains(element);
 }
+
+export function suffixPx(value: string | number): string {
+  value = String(value);
+  return isNumber(value) ? `${value}px` : value;
+}