[improvement] rename suffixPx to addUnit

src/field/index.js

@@ -3,7 +3,7 @@ import Cell from '../cell';
 import { cellProps } from '../cell/shared';
 import { preventDefault } from '../utils/dom/event';
 import { getRootScrollTop } from '../utils/dom/scroll';
-import { createNamespace, isObj, isDef, suffixPx } from '../utils';
+import { createNamespace, isObj, isDef, addUnit } from '../utils';
 import { isIOS } from '../utils/validate/system';
 
 const [createComponent, bem] = createNamespace('field');
@@ -76,7 +76,7 @@ export default createComponent({
     labelStyle() {
       const { labelWidth } = this;
       if (labelWidth) {
-        return { width: suffixPx(labelWidth) };
+        return { width: addUnit(labelWidth) };
       }
     }
   },

src/grid-item/index.js

@@ -1,4 +1,4 @@
-import { createNamespace, suffixPx } from '../utils';
+import { createNamespace, addUnit } from '../utils';
 import { ChildrenMixin } from '../mixins/relation';
 import { route, routeProps } from '../utils/router';
 import Icon from '../icon';
@@ -26,7 +26,7 @@ export default createComponent({
       if (square) {
         style.paddingTop = percent;
       } else if (gutter) {
-        const gutterValue = suffixPx(gutter);
+        const gutterValue = addUnit(gutter);
         style.paddingRight = gutterValue;
 
         if (this.index >= columnNum) {
@@ -41,7 +41,7 @@ export default createComponent({
       const { square, gutter } = this.parent;
 
       if (square && gutter) {
-        const gutterValue = suffixPx(gutter);
+        const gutterValue = addUnit(gutter);
 
         return {
           right: gutterValue,

src/grid/index.js

@@ -1,4 +1,4 @@
-import { createNamespace, suffixPx } from '../utils';
+import { createNamespace, addUnit } from '../utils';
 import { ParentMixin } from '../mixins/relation';
 
 const [createComponent, bem] = createNamespace('grid');
@@ -30,7 +30,7 @@ export default createComponent({
 
       if (gutter) {
         return {
-          paddingLeft: suffixPx(gutter)
+          paddingLeft: addUnit(gutter)
         };
       }
     }

src/icon/index.tsx

@@ -1,4 +1,4 @@
-import { createNamespace, suffixPx } from '../utils';
+import { createNamespace, addUnit } from '../utils';
 import { inherit } from '../utils/functional';
 import Info from '../info';
 import Image from '../image';
@@ -39,7 +39,7 @@ function Icon(
       class={[props.classPrefix, imageIcon ? '' : `${props.classPrefix}-${props.name}`]}
       style={{
         color: props.color,
-        fontSize: suffixPx(props.size)
+        fontSize: addUnit(props.size)
       }}
       {...inherit(ctx, true)}
     >

src/image/index.js

@@ -1,4 +1,4 @@
-import { createNamespace, isDef, suffixPx } from '../utils';
+import { createNamespace, isDef, addUnit } from '../utils';
 import Icon from '../icon';
 
 const [createComponent, bem] = createNamespace('image');
@@ -32,11 +32,11 @@ export default createComponent({
       const style = {};
 
       if (isDef(this.width)) {
-        style.width = suffixPx(this.width);
+        style.width = addUnit(this.width);
       }
 
       if (isDef(this.height)) {
-        style.height = suffixPx(this.height);
+        style.height = addUnit(this.height);
       }
 
       return style;

src/loading/index.tsx

@@ -1,4 +1,4 @@
-import { createNamespace, suffixPx } from '../utils';
+import { createNamespace, addUnit } from '../utils';
 import { GRAY } from '../utils/color';
 import { inherit } from '../utils/functional';
 
@@ -37,7 +37,7 @@ function LoadingIcon(h: CreateElement, props: LoadingProps) {
 function LoadingText(h: CreateElement, props: LoadingProps, slots: DefaultSlots) {
   if (slots.default) {
     const style = props.textSize && {
-      fontSize: suffixPx(props.textSize)
+      fontSize: addUnit(props.textSize)
     };
 
     return (
@@ -58,7 +58,7 @@ function Loading(
 
   const style: { [key: string]: string } = { color };
   if (size) {
-    const iconSize = suffixPx(size) as string;
+    const iconSize = addUnit(size) as string;
     style.width = iconSize;
     style.height = iconSize;
   }

src/mixins/checkbox.js

@@ -3,7 +3,7 @@
  */
 import Icon from '../icon';
 import { ChildrenMixin } from './relation';
-import { suffixPx } from '../utils';
+import { addUnit } from '../utils';
 
 export const CheckboxMixin = ({ parent, bem, role }) => ({
   mixins: [ChildrenMixin(parent)],
@@ -65,7 +65,7 @@ export const CheckboxMixin = ({ parent, bem, role }) => ({
     const Children = [
       <div
         class={bem('icon', [this.shape, { disabled: this.isDisabled, checked }])}
-        style={{ fontSize: suffixPx(this.iconSize) }}
+        style={{ fontSize: addUnit(this.iconSize) }}
         onClick={this.onClickIcon}
       >
         {CheckIcon}

src/password-input/index.tsx

@@ -1,4 +1,4 @@
-import { createNamespace, suffixPx } from '../utils';
+import { createNamespace, addUnit } from '../utils';
 import { emit, inherit } from '../utils/functional';
 
 // Types
@@ -31,7 +31,7 @@ function PasswordInput(
 
     let style;
     if (i !== 0 && props.gutter) {
-      style = { marginLeft: suffixPx(props.gutter) };
+      style = { marginLeft: addUnit(props.gutter) };
     }
 
     Points.push(

src/rate/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable prefer-spread */
-import { createNamespace, suffixPx } from '../utils';
+import { createNamespace, addUnit } from '../utils';
 import { emit, inherit } from '../utils/functional';
 import { preventDefault } from '../utils/dom/event';
 import Icon from '../icon';
@@ -90,13 +90,13 @@ function Rate(
     }
   }
 
-  const gutter = suffixPx(props.gutter);
+  const gutter = addUnit(props.gutter);
 
   function renderStar(status: RateStatus, index: number) {
     const isFull = status === 'full';
     const isVoid = status === 'void';
     const score = index + 1;
-    const size = suffixPx(props.size);
+    const size = addUnit(props.size);
 
     let style;
     if (gutter && score !== count) {

src/skeleton/index.tsx

@@ -1,4 +1,4 @@
-import { createNamespace, suffixPx } from '../utils';
+import { createNamespace, addUnit } from '../utils';
 import { inherit } from '../utils/functional';
 
 // Types
@@ -33,7 +33,7 @@ function Skeleton(
 
   function Title() {
     if (props.title) {
-      return <h3 class={bem('title')} style={{ width: suffixPx(props.titleWidth) }} />;
+      return <h3 class={bem('title')} style={{ width: addUnit(props.titleWidth) }} />;
     }
   }
 
@@ -54,7 +54,7 @@ function Skeleton(
     }
 
     for (let i = 0; i < props.row; i++) {
-      Rows.push(<div class={bem('row')} style={{ width: suffixPx(getRowWidth(i)) }} />);
+      Rows.push(<div class={bem('row')} style={{ width: addUnit(getRowWidth(i)) }} />);
     }
 
     return Rows;
@@ -62,7 +62,7 @@ function Skeleton(
 
   function Avatar() {
     if (props.avatar) {
-      const size = suffixPx(props.avatarSize);
+      const size = addUnit(props.avatarSize);
       return (
         <div
           class={bem('avatar', props.avatarShape)}

src/stepper/index.js

@@ -1,4 +1,4 @@
-import { createNamespace, isDef, suffixPx } from '../utils';
+import { createNamespace, isDef, addUnit } from '../utils';
 
 const [createComponent, bem] = createNamespace('stepper');
 
@@ -56,11 +56,11 @@ export default createComponent({
       const style = {};
 
       if (this.inputWidth) {
-        style.width = suffixPx(this.inputWidth);
+        style.width = addUnit(this.inputWidth);
       }
 
       if (this.buttonSize) {
-        style.height = suffixPx(this.buttonSize);
+        style.height = addUnit(this.buttonSize);
       }
 
       return style;
@@ -70,7 +70,7 @@ export default createComponent({
       const style = {};
 
       if (this.buttonSize) {
-        const size = suffixPx(this.buttonSize);
+        const size = addUnit(this.buttonSize);
         style.width = size;
         style.height = size;
       }

src/tabs/index.js

@@ -1,4 +1,4 @@
-import { createNamespace, isDef, suffixPx } from '../utils';
+import { createNamespace, isDef, addUnit } from '../utils';
 import { scrollLeftTo } from './utils';
 import { on, off } from '../utils/dom/event';
 import { ParentMixin } from '../mixins/relation';
@@ -222,7 +222,7 @@ export default createComponent({
         const left = title.offsetLeft + title.offsetWidth / 2;
 
         const lineStyle = {
-          width: suffixPx(width),
+          width: addUnit(width),
           backgroundColor: this.color,
           transform: `translateX(${left}px) translateX(-50%)`
         };
@@ -232,7 +232,7 @@ export default createComponent({
         }
 
         if (isDef(lineHeight)) {
-          const height = suffixPx(lineHeight);
+          const height = addUnit(lineHeight);
           lineStyle.height = height;
           lineStyle.borderRadius = height;
         }

src/uploader/index.js

@@ -1,4 +1,4 @@
-import { createNamespace, suffixPx } from '../utils';
+import { createNamespace, addUnit } from '../utils';
 import { toArray, readFile, isOversize } from './utils';
 import Icon from '../icon';
 import Image from '../image';
@@ -226,7 +226,7 @@ export default createComponent({
 
       let style;
       if (this.previewSize) {
-        const size = suffixPx(this.previewSize);
+        const size = addUnit(this.previewSize);
         style = {
           width: size,
           height: size

src/utils/format/unit.ts

@@ -1,7 +1,7 @@
 import { isDef } from '..';
 import { isNumber } from '../validate/number';
 
-export function suffixPx(value?: string | number): string | undefined {
+export function addUnit(value?: string | number): string | undefined {
   if (!isDef(value)) {
     return undefined;
   }

src/utils/index.ts

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 
 export { createNamespace } from './create';
-export { suffixPx } from './format/unit';
+export { addUnit } from './format/unit';
 
 export const isServer: boolean = Vue.prototype.$isServer;