[improvement] add constant of border (#4078)

src/action-sheet/demo/index.vue

@@ -66,7 +66,7 @@
 </template>
 
 <script>
-import { GREEN } from '../../utils/color';
+import { GREEN } from '../../utils/constant';
 
 export default {
   i18n: {

src/action-sheet/index.tsx

@@ -1,5 +1,6 @@
 import { createNamespace } from '../utils';
 import { emit, inherit } from '../utils/functional';
+import { BORDER_TOP, BORDER_BOTTOM } from '../utils/constant';
 import { PopupMixin } from '../mixins/popup';
 import Icon from '../icon';
 import Popup from '../popup';
@@ -48,7 +49,7 @@ function ActionSheet(
   function Header() {
     if (title) {
       return (
-        <div class={[bem('header'), 'van-hairline--bottom']}>
+        <div class={[bem('header'), BORDER_BOTTOM]}>
           {title}
           <Icon name="close" class={bem('close')} onClick={onCancel} />
         </div>
@@ -96,7 +97,7 @@ function ActionSheet(
 
     return (
       <div
-        class={[bem('item', { disabled }), item.className, 'van-hairline--top']}
+        class={[bem('item', { disabled }), item.className, BORDER_TOP]}
         style={{ color: item.color }}
         onClick={onClickOption}
       >

src/address-list/Item.tsx

@@ -1,5 +1,5 @@
 import { createNamespace } from '../utils';
-import { RED } from '../utils/color';
+import { RED } from '../utils/constant';
 import { emit, inherit } from '../utils/functional';
 import Icon from '../icon';
 import Cell from '../cell';

src/button/index.tsx

@@ -1,5 +1,6 @@
 import { createNamespace } from '../utils';
 import { emit, inherit } from '../utils/functional';
+import { BORDER_SURROUND } from '../utils/constant';
 import { routeProps, RouteProps, functionalRoute } from '../utils/router';
 import Icon from '../icon';
 import Loading, { LoadingType } from '../loading';
@@ -69,7 +70,7 @@ function Button(
         square: props.square
       }
     ]),
-    { 'van-hairline--surround': hairline }
+    { [BORDER_SURROUND]: hairline }
   ];
 
   function Content() {

src/cell-group/index.tsx

@@ -1,5 +1,6 @@
 import { createNamespace } from '../utils';
 import { inherit } from '../utils/functional';
+import { BORDER_TOP_BOTTOM } from '../utils/constant';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
@@ -20,7 +21,7 @@ function CellGroup(
 ) {
   const Group = (
     <div
-      class={[bem(), { 'van-hairline--top-bottom': props.border }]}
+      class={[bem(), { [BORDER_TOP_BOTTOM]: props.border }]}
       {...inherit(ctx, true)}
     >
       {slots.default && slots.default()}

src/circle/index.js

@@ -1,6 +1,6 @@
 import { createNamespace } from '../utils';
 import { raf, cancelRaf } from '../utils/dom/raf';
-import { BLUE, WHITE } from '../utils/color';
+import { BLUE, WHITE } from '../utils/constant';
 
 const [createComponent, bem] = createNamespace('circle');
 const PERIMETER = 3140;

src/collapse-item/index.js

@@ -1,4 +1,5 @@
 import { createNamespace, isDef } from '../utils';
+import { BORDER_TOP } from '../utils/constant';
 import { raf, doubleRaf } from '../utils/dom/raf';
 import Cell from '../cell';
 import { cellProps } from '../cell/shared';
@@ -147,7 +148,7 @@ export default createComponent({
     );
 
     return (
-      <div class={[bem(), { 'van-hairline--top': this.index }]}>
+      <div class={[bem(), { [BORDER_TOP]: this.index }]}>
         {Title}
         {Content}
       </div>

src/collapse/index.js

@@ -1,5 +1,6 @@
 import { createNamespace } from '../utils';
 import { ParentMixin } from '../mixins/relation';
+import { BORDER_TOP_BOTTOM } from '../utils/constant';
 
 const [createComponent, bem] = createNamespace('collapse');
 
@@ -29,7 +30,7 @@ export default createComponent({
 
   render() {
     return (
-      <div class={[bem(), { 'van-hairline--top-bottom': this.border }]}>
+      <div class={[bem(), { [BORDER_TOP_BOTTOM]: this.border }]}>
         {this.slots()}
       </div>
     );

src/contact-list/index.tsx

@@ -1,5 +1,5 @@
 import { createNamespace } from '../utils';
-import { RED } from '../utils/color';
+import { RED } from '../utils/constant';
 import { emit, inherit } from '../utils/functional';
 import Icon from '../icon';
 import Cell from '../cell';

src/coupon/index.js

@@ -1,5 +1,5 @@
 import { createNamespace } from '../utils';
-import { RED } from '../utils/color';
+import { RED } from '../utils/constant';
 import { padZero } from '../utils/format/string';
 import Checkbox from '../checkbox';
 

src/dialog/Dialog.js

@@ -1,4 +1,5 @@
 import { createNamespace } from '../utils';
+import { BORDER_TOP, BORDER_LEFT } from '../utils/constant';
 import { PopupMixin } from '../mixins/popup';
 import { CloseOnPopstateMixin } from '../mixins/close-on-popstate';
 import Button from '../button';
@@ -99,7 +100,7 @@ export default createComponent({
 
     const hasButtons = this.showCancelButton && this.showConfirmButton;
     const ButtonGroup = (
-      <div class={['van-hairline--top', bem('footer', { buttons: hasButtons })]}>
+      <div class={[BORDER_TOP, bem('footer', { buttons: hasButtons })]}>
         {this.showCancelButton && (
           <Button
             size="large"
@@ -115,7 +116,7 @@ export default createComponent({
         {this.showConfirmButton && (
           <Button
             size="large"
-            class={[bem('confirm'), { 'van-hairline--left': hasButtons }]}
+            class={[bem('confirm'), { [BORDER_LEFT]: hasButtons }]}
             loading={this.loading.confirm}
             text={this.confirmButtonText || t('confirm')}
             style={{ color: this.confirmButtonColor }}

src/divider/demo/index.vue

@@ -38,7 +38,7 @@
 </template>
 
 <script>
-import { BLUE } from '../../utils/color';
+import { BLUE } from '../../utils/constant';
 
 export default {
   i18n: {

src/dropdown-menu/index.js

@@ -1,5 +1,5 @@
 import { createNamespace } from '../utils';
-import { BLUE } from '../utils/color';
+import { BLUE, BORDER_TOP_BOTTOM } from '../utils/constant';
 import { ParentMixin } from '../mixins/relation';
 import { ClickOutsideMixin } from '../mixins/click-outside';
 
@@ -103,7 +103,7 @@ export default createComponent({
     ));
 
     return (
-      <div ref="menu" class={[bem(), 'van-hairline--top-bottom']}>
+      <div ref="menu" class={[bem(), BORDER_TOP_BOTTOM]}>
         {Titles}
         {this.slots('default')}
       </div>

src/grid-item/index.js

@@ -1,4 +1,5 @@
 import { createNamespace, addUnit } from '../utils';
+import { BORDER } from '../utils/constant';
 import { ChildrenMixin } from '../mixins/relation';
 import { route, routeProps } from '../utils/router';
 import Icon from '../icon';
@@ -86,7 +87,7 @@ export default createComponent({
               clickable,
               surround: border && gutter
             }),
-            { 'van-hairline': border }
+            { [BORDER]: border }
           ]}
         >
           {this.renderContent()}

src/grid/index.js

@@ -1,5 +1,6 @@
 import { createNamespace, addUnit } from '../utils';
 import { ParentMixin } from '../mixins/relation';
+import { BORDER_TOP } from '../utils/constant';
 
 const [createComponent, bem] = createNamespace('grid');
 
@@ -40,7 +41,7 @@ export default createComponent({
     return (
       <div
         style={this.style}
-        class={[bem(), { 'van-hairline--top': this.border && !this.gutter }]}
+        class={[bem(), { [BORDER_TOP]: this.border && !this.gutter }]}
       >
         {this.slots()}
       </div>

src/icon/demo/index.vue

@@ -41,7 +41,7 @@
 
 <script>
 import icons from '@vant/icons';
-import { BLUE } from '../../utils/color';
+import { BLUE } from '../../utils/constant';
 
 export default {
   i18n: {

src/index-anchor/index.js

@@ -1,5 +1,6 @@
 import { createNamespace } from '../utils';
 import { ChildrenMixin } from '../mixins/relation';
+import { BORDER_BOTTOM } from '../utils/constant';
 
 const [createComponent, bem] = createNamespace('index-anchor');
 
@@ -50,7 +51,7 @@ export default createComponent({
       <div style={{ height: sticky ? `${this.height}px` : null }}>
         <div
           style={this.anchorStyle}
-          class={[bem({ sticky }), { 'van-hairline--bottom': sticky }]}
+          class={[bem({ sticky }), { [BORDER_BOTTOM]: sticky }]}
         >
           {this.slots('default') || this.index}
         </div>

src/index-bar/index.js

@@ -2,7 +2,7 @@ import { createNamespace } from '../utils';
 import { TouchMixin } from '../mixins/touch';
 import { ParentMixin } from '../mixins/relation';
 import { BindEventMixin } from '../mixins/bind-event';
-import { GREEN } from '../utils/color';
+import { GREEN } from '../utils/constant';
 import {
   getScrollTop,
   getElementTop,

src/loading/index.tsx

@@ -1,5 +1,5 @@
 import { createNamespace, addUnit } from '../utils';
-import { GRAY } from '../utils/color';
+import { GRAY } from '../utils/constant';
 import { inherit } from '../utils/functional';
 
 // Types

src/nav-bar/index.tsx

@@ -1,5 +1,6 @@
 import { createNamespace, noop } from '../utils';
 import { inherit } from '../utils/functional';
+import { BORDER_BOTTOM } from '../utils/constant';
 import Icon from '../icon';
 
 // Types
@@ -39,7 +40,7 @@ function NavBar(
     <div
       class={[
         bem({ fixed: props.fixed }),
-        { 'van-hairline--bottom': props.border }
+        { [BORDER_BOTTOM]: props.border }
       ]}
       style={{ zIndex: props.zIndex }}
       {...inherit(ctx)}

src/notify/Notify.tsx

@@ -1,5 +1,5 @@
 import { createNamespace } from '../utils';
-import { RED, WHITE } from '../utils/color';
+import { RED, WHITE } from '../utils/constant';
 import { inherit } from '../utils/functional';
 import { PopupMixin } from '../mixins/popup';
 import Popup from '../popup';

src/notify/index.ts

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import VanNotify from './Notify';
-import { RED, WHITE } from '../utils/color';
+import { RED, WHITE } from '../utils/constant';
 import { isObj, isServer } from '../utils';
 import { mount } from '../utils/functional';
 import { NotifyOptions } from 'types/notify';

src/number-keyboard/Key.js

@@ -1,4 +1,5 @@
 import { createNamespace } from '../utils';
+import { BORDER } from '../utils/constant';
 
 const [createComponent, bem] = createNamespace('key');
 
@@ -54,7 +55,7 @@ export default createComponent({
       <i
         role="button"
         tabindex="0"
-        class={['van-hairline', this.className]}
+        class={[BORDER, this.className]}
         onClick={this.onClick}
         onTouchstart={this.onFocus}
         onTouchmove={onBlur}

src/number-keyboard/index.js

@@ -1,5 +1,6 @@
 import { createNamespace } from '../utils';
 import { stopPropagation } from '../utils/dom/event';
+import { BORDER_TOP } from '../utils/constant';
 import { BindEventMixin } from '../mixins/bind-event';
 import Key from './Key';
 
@@ -137,7 +138,7 @@ export default createComponent({
     const showTitle = title || showTitleClose || titleLeftSlot;
 
     const Title = showTitle && (
-      <div class={[bem('title'), 'van-hairline--top']}>
+      <div class={[bem('title'), BORDER_TOP]}>
         {titleLeftSlot && <span class={bem('title-left')}>{titleLeftSlot}</span>}
         {title && <span>{title}</span>}
         {showTitleClose && (

src/pagination/index.js

@@ -1,4 +1,5 @@
 import { createNamespace } from '../utils';
+import { BORDER } from '../utils/constant';
 
 const [createComponent, bem, t] = createNamespace('pagination');
 
@@ -125,14 +126,14 @@ export default createComponent({
     return (
       <ul class={bem({ simple })}>
         <li
-          class={[bem('item', { disabled: value === 1 }), bem('prev'), 'van-hairline']}
+          class={[bem('item', { disabled: value === 1 }), bem('prev'), BORDER]}
           onClick={onSelect(value - 1)}
         >
           {this.prevText || t('prev')}
         </li>
         {this.pages.map(page => (
           <li
-            class={[bem('item', { active: page.active }), bem('page'), 'van-hairline']}
+            class={[bem('item', { active: page.active }), bem('page'), BORDER]}
             onClick={onSelect(page.number)}
           >
             {page.text}
@@ -142,7 +143,7 @@ export default createComponent({
           <li class={bem('page-desc')}>{this.slots('pageDesc') || `${value}/${this.count}`}</li>
         )}
         <li
-          class={[bem('item', { disabled: value === this.count }), bem('next'), 'van-hairline']}
+          class={[bem('item', { disabled: value === this.count }), bem('next'), BORDER]}
           onClick={onSelect(value + 1)}
         >
           {this.nextText || t('next')}

src/panel/index.tsx

@@ -1,7 +1,8 @@
 import { createNamespace } from '../utils';
+import { inherit } from '../utils/functional';
+import { BORDER_TOP } from '../utils/constant';
 import Cell from '../cell';
 import CellGroup from '../cell-group';
-import { inherit } from '../utils/functional';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
@@ -42,7 +43,7 @@ function Panel(
     ),
     <div class={bem('content')}>{slots.default && slots.default()}</div>,
     slots.footer && (
-      <div class={[bem('footer'), 'van-hairline--top']}>{slots.footer()}</div>
+      <div class={[bem('footer'), BORDER_TOP]}>{slots.footer()}</div>
     )
   ];
 

src/password-input/index.tsx

@@ -1,5 +1,6 @@
 import { createNamespace, addUnit } from '../utils';
 import { emit, inherit } from '../utils/functional';
+import { BORDER_LEFT, BORDER_SURROUND } from '../utils/constant';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
@@ -35,7 +36,7 @@ function PasswordInput(
     }
 
     Points.push(
-      <li class={{ 'van-hairline--left': showBorder }} style={style}>
+      <li class={{ [BORDER_LEFT]: showBorder }} style={style}>
         {props.mask ? <i style={{ visibility: char ? 'visible' : 'hidden' }} /> : char}
       </li>
     );
@@ -44,7 +45,7 @@ function PasswordInput(
   return (
     <div class={bem()}>
       <ul
-        class={[bem('security'), { 'van-hairline--surround': !props.gutter }]}
+        class={[bem('security'), { [BORDER_SURROUND]: !props.gutter }]}
         onTouchstart={(event: TouchEvent) => {
           event.stopPropagation();
           emit(ctx, 'focus', event);

src/picker/index.js

@@ -2,7 +2,7 @@ import { createNamespace } from '../utils';
 import { preventDefault } from '../utils/dom/event';
 import { deepClone } from '../utils/deep-clone';
 import { pickerProps } from './shared';
-import { BLUE } from '../utils/color';
+import { BLUE, BORDER_TOP_BOTTOM } from '../utils/constant';
 import Loading from '../loading';
 import PickerColumn from './PickerColumn';
 
@@ -163,7 +163,7 @@ export default createComponent({
     };
 
     const Toolbar = this.showToolbar && (
-      <div class={['van-hairline--top-bottom', bem('toolbar')]}>
+      <div class={[BORDER_TOP_BOTTOM, bem('toolbar')]}>
         {this.slots() || [
           <div role="button" tabindex="0" class={bem('cancel')} onClick={this.onCancel}>
             {this.cancelButtonText || t('cancel')}
@@ -198,7 +198,7 @@ export default createComponent({
             />
           ))}
           <div class={bem('mask')} style={maskStyle} />
-          <div class={['van-hairline--top-bottom', bem('frame')]} style={frameStyle} />
+          <div class={[BORDER_TOP_BOTTOM, bem('frame')]} style={frameStyle} />
         </div>
         {this.toolbarPosition === 'bottom' ? Toolbar : h()}
       </div>

src/progress/index.js

@@ -1,5 +1,5 @@
 import { createNamespace, isDef } from '../utils';
-import { BLUE, WHITE } from '../utils/color';
+import { BLUE, WHITE } from '../utils/constant';
 
 const [createComponent, bem] = createNamespace('progress');
 

src/sidebar-item/index.js

@@ -1,7 +1,8 @@
 import { createNamespace } from '../utils';
-import Info from '../info';
 import { ChildrenMixin } from '../mixins/relation';
 import { route, routeProps } from '../utils/router';
+import { BORDER } from '../utils/constant';
+import Info from '../info';
 
 const [createComponent, bem] = createNamespace('sidebar-item');
 
@@ -32,7 +33,7 @@ export default createComponent({
   render() {
     return (
       <a
-        class={[bem({ select: this.select }), 'van-hairline']}
+        class={[bem({ select: this.select }), BORDER]}
         onClick={this.onClick}
       >
         <div class={bem('text')}>

src/sidebar/index.js

@@ -1,5 +1,6 @@
 import { createNamespace } from '../utils';
 import { ParentMixin } from '../mixins/relation';
+import { BORDER_TOP_BOTTOM } from '../utils/constant';
 
 const [createComponent, bem] = createNamespace('sidebar');
 
@@ -18,6 +19,6 @@ export default createComponent({
   },
 
   render() {
-    return <div class={[bem(), 'van-hairline--top-bottom']}>{this.slots()}</div>;
+    return <div class={[bem(), BORDER_TOP_BOTTOM]}>{this.slots()}</div>;
   }
 });

src/sku/components/SkuHeader.tsx

@@ -1,5 +1,6 @@
 import { createNamespace } from '../../utils';
 import { inherit } from '../../utils/functional';
+import { BORDER_BOTTOM } from '../../utils/constant';
 import Icon from '../../icon';
 
 // Types
@@ -45,7 +46,7 @@ function SkuHeader(
   };
 
   return (
-    <div class={[bem(), 'van-hairline--bottom']} {...inherit(ctx)}>
+    <div class={[bem(), BORDER_BOTTOM]} {...inherit(ctx)}>
       <div class={bem('img-wrap')} onClick={previewImage}>
         <img src={goodsImg} />
       </div>

src/sku/components/SkuRow.tsx

@@ -1,5 +1,6 @@
 import { createNamespace } from '../../utils';
 import { inherit } from '../../utils/functional';
+import { BORDER_BOTTOM } from '../../utils/constant';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
@@ -19,7 +20,7 @@ function SkuRow(
   ctx: RenderContext<SkuRowProps>
 ) {
   return (
-    <div class={[bem(), 'van-hairline--bottom']} {...inherit(ctx)}>
+    <div class={[bem(), BORDER_BOTTOM]} {...inherit(ctx)}>
       <div class={bem('title')}>{props.skuRow.k}</div>
       {slots.default && slots.default()}
     </div>

src/step/index.js

@@ -1,4 +1,5 @@
 import { createNamespace } from '../utils';
+import { BORDER } from '../utils/constant';
 import Icon from '../icon';
 
 const [createComponent, bem] = createNamespace('step');
@@ -54,7 +55,7 @@ export default createComponent({
     }
 
     return (
-      <div class={['van-hairline', bem([direction, { [status]: status }])]}>
+      <div class={[BORDER, bem([direction, { [status]: status }])]}>
         <div class={bem('title')} style={titleStyle}>
           {this.slots()}
         </div>

src/steps/index.js

@@ -1,5 +1,5 @@
 import { createNamespace } from '../utils';
-import { GREEN } from '../utils/color';
+import { GREEN } from '../utils/constant';
 
 const [createComponent, bem] = createNamespace('steps');
 

src/switch/index.tsx

@@ -1,5 +1,5 @@
 import { createNamespace } from '../utils';
-import { BLUE, GRAY_DARK } from '../utils/color';
+import { BLUE, GRAY_DARK } from '../utils/constant';
 import { switchProps, SharedSwitchProps } from './shared';
 import { emit, inherit } from '../utils/functional';
 import Loading from '../loading';

src/tabbar/index.js

@@ -1,5 +1,6 @@
 import { createNamespace } from '../utils';
 import { ParentMixin } from '../mixins/relation';
+import { BORDER_TOP_BOTTOM } from '../utils/constant';
 
 const [createComponent, bem] = createNamespace('tabbar');
 
@@ -54,7 +55,7 @@ export default createComponent({
       <div
         style={{ zIndex: this.zIndex }}
         class={[
-          { 'van-hairline--top-bottom': this.border },
+          { [BORDER_TOP_BOTTOM]: this.border },
           bem({
             fixed: this.fixed,
             'safe-area-inset-bottom': this.safeAreaInsetBottom

src/tabs/index.js

@@ -3,6 +3,7 @@ import { scrollLeftTo } from './utils';
 import { isHidden } from '../utils/dom/style';
 import { ParentMixin } from '../mixins/relation';
 import { BindEventMixin } from '../mixins/bind-event';
+import { BORDER_TOP_BOTTOM } from '../utils/constant';
 import { setRootScrollTop, getElementTop } from '../utils/dom/scroll';
 import Title from './Title';
 import Content from './Content';
@@ -282,7 +283,7 @@ export default createComponent({
         ref="wrap"
         class={[
           bem('wrap', { scrollable }),
-          { 'van-hairline--top-bottom': type === 'line' && this.border }
+          { [BORDER_TOP_BOTTOM]: type === 'line' && this.border }
         ]}
       >
         <div ref="nav" role="tablist" class={bem('nav', [type])} style={this.navStyle}>

src/tag/index.tsx

@@ -1,5 +1,6 @@
 import { createNamespace } from '../utils';
 import { inherit } from '../utils/functional';
+import { BORDER_SURROUND } from '../utils/constant';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
@@ -46,9 +47,7 @@ function Tag(
       style={style}
       class={[
         bem([classes, type]),
-        {
+        { [BORDER_SURROUND]: plain }
-          'van-hairline--surround': plain
-        }
       ]}
       {...inherit(ctx, true)}
     >

src/utils/color.ts

@@ -1,6 +0,0 @@
-export const RED = '#f44';
-export const BLUE = '#1989fa';
-export const GREEN = '#07c160';
-export const WHITE = '#fff';
-export const GRAY = '#c9c9c9';
-export const GRAY_DARK = '#969799';

src/utils/constant.ts

@@ -0,0 +1,16 @@
+// color
+export const RED = '#f44';
+export const BLUE = '#1989fa';
+export const GREEN = '#07c160';
+export const WHITE = '#fff';
+export const GRAY = '#c9c9c9';
+export const GRAY_DARK = '#969799';
+
+// border
+export const BORDER = 'van-hairline';
+export const BORDER_TOP = `${BORDER}--top`;
+export const BORDER_LEFT = `${BORDER}--left`;
+export const BORDER_RIGHT = `${BORDER}--right`;
+export const BORDER_BOTTOM = `${BORDER}--bottom`;
+export const BORDER_SURROUND = `${BORDER}--surround`;
+export const BORDER_TOP_BOTTOM = `${BORDER}--top-bottom`;