[improvement] 部分组件边框实现修改 (#87)

* 使用超细边框

* 部分组件切换为 hairline

* 文档 边框替换

example/app.wxss

@@ -18,12 +18,12 @@
   z-index: 5;
 }
 .doc-title {
-  font-size: 25px;
-  line-height: 25px;
-  color: #666;
+  position: relative;
   padding: 15px 0;
   margin: 10px 15px;
-  border-bottom: 1rpx solid #e5e5e5;
+  line-height: 25px;
+  font-size: 25px;
+  color: #666;
 }
 .doc-description {
   margin: 14px 0;

example/pages/badge/index.wxml

@@ -1,6 +1,6 @@
 <view class="container">
 
-  <view class="doc-title">BADGE</view>
+  <view class="doc-title zan-hairline--bottom zan-hairline--bottom">BADGE</view>
 
   <view class="demo">
     <view class="demo__item">

example/pages/btn/index.wxml

@@ -1,6 +1,6 @@
 <view class="container">
 
-  <view class="doc-title">BUTTON</view>
+  <view class="doc-title zan-hairline--bottom">BUTTON</view>
 
   <view class="zan-panel-title">普通按钮</view>
   <view class="zan-panel">

example/pages/capsule/index.wxml

@@ -2,7 +2,7 @@
 
 <view class="container">
 
-  <view class="doc-title">CAPSULE</view>
+  <view class="doc-title zan-hairline--bottom">CAPSULE</view>
 
   <view class="zan-panel-title">基本用法</view>
   <view class="zan-panel">

example/pages/card/index.wxml

@@ -1,6 +1,6 @@
 <view class="container">
 
-  <view class="doc-title">CARD</view>
+  <view class="doc-title zan-hairline--bottom">CARD</view>
 
   <view class="zan-panel">
     <view class="zan-card">

example/pages/cell/index.wxml

@@ -2,7 +2,7 @@
 
 <view class="container">
 
-  <view class="doc-title">CELL</view>
+  <view class="doc-title zan-hairline--bottom">CELL</view>
 
   <view class="zan-panel">
     <view class="zan-cell">

example/pages/dialog/index.wxml

@@ -2,7 +2,7 @@
 
 <view class="container">
 
-  <view class="doc-title">DIALOG</view>
+  <view class="doc-title zan-hairline--bottom">DIALOG</view>
 
   <view class="zan-btns" style="margin-top: 30vh;">
     <button class="zan-btn" bindtap="toggleBaseDialog">

example/pages/field/index.wxml

@@ -1,7 +1,7 @@
 <import src="/dist/field/index.wxml" />
 
 <view class="container">
-  <view class="doc-title">Field</view>
+  <view class="doc-title zan-hairline--bottom">Field</view>
 
   <!-- Field 基础用法 -->
   <view class="zan-panel-title">基础用法</view>

example/pages/icon/index.wxml

@@ -1,6 +1,6 @@
 <view class="container">
 
-  <view class="doc-title">ICON</view>
+  <view class="doc-title zan-hairline--bottom">ICON</view>
 
   <view class="zan-panel">
     <view wx:for="{{ icons }}" wx:for-item="icon" class="icon-wrap">

example/pages/layout/index.wxml

@@ -1,6 +1,6 @@
 <view class="container">
 
-  <view class="doc-title">LAYOUT</view>
+  <view class="doc-title zan-hairline--bottom">LAYOUT</view>
 
   <view class="zan-panel-title">基础用法</view>
   <view class="doc-description">Layout 组件提供了24列栅格，添加 zan-col-x 可以设置元素所占宽度</view>

example/pages/loadmore/index.wxml

@@ -1,7 +1,7 @@
 <import src="/dist/loadmore/index.wxml" />
 <view class="container">
 
-  <view class="doc-title">LOADMORE</view>
+  <view class="doc-title zan-hairline--bottom">LOADMORE</view>
 
   <template is="zan-loadmore" data="{{loading: true}}" />
   <template is="zan-loadmore" data="{{nodata: true}}" />

example/pages/noticebar/index.wxml

@@ -1,7 +1,7 @@
 <import src="/dist/noticebar/index.wxml" />
 <view class="container">
 
-  <view class="doc-title">NOTICEBAR</view>
+  <view class="doc-title zan-hairline--bottom">NOTICEBAR</view>
 
   <view class="zan-panel-title">滚动通告栏</view>
   <view class="zan-panel">

example/pages/panel/index.wxml

@@ -1,6 +1,6 @@
 <view class="container">
 
-  <view class="doc-title">PANEL</view>
+  <view class="doc-title zan-hairline--bottom">PANEL</view>
 
   <view class="zan-panel-title">标题</view>
   <view class="zan-panel">

example/pages/popup/index.wxml

@@ -1,6 +1,6 @@
 <view class="container">
 
-  <view class="doc-title">POPUP</view>
+  <view class="doc-title zan-hairline--bottom">POPUP</view>
 
   <view class="zan-btns" style="margin-top: 30vh;">
     <button class="zan-btn" bindtap="togglePopup">

example/pages/select/index.wxml

@@ -2,7 +2,7 @@
 
 <view class="container">
 
-  <view class="doc-title">SELECT</view>
+  <view class="doc-title zan-hairline--bottom">SELECT</view>
 
   <view class="zan-panel-title">基础用法</view>
   <view class="zan-panel">

example/pages/stepper/index.wxml

@@ -2,7 +2,7 @@
 
 <view class="container">
 
-  <view class="doc-title">Stepper</view>
+  <view class="doc-title zan-hairline--bottom">Stepper</view>
 
   <view style="padding: 40px 15px">
     <template is="zan-stepper" data="{{ ...stepper1, componentId: 'stepper1' }}" />

example/pages/steps/index.wxml

@@ -2,7 +2,7 @@
 
 <view class="container">
 
-  <view class="doc-title">STEPS</view>
+  <view class="doc-title zan-hairline--bottom">STEPS</view>
 
   <view class="zan-panel">
     <view class="zan-cell">

example/pages/switch/index.wxml

@@ -2,7 +2,7 @@
 
 <view class="container">
 
-  <view class="doc-title">SWITCH</view>
+  <view class="doc-title zan-hairline--bottom">SWITCH</view>
 
   <view class="zan-panel-title">同步开关</view>
   <view class="zan-panel">

example/pages/tab/index.wxml

@@ -2,7 +2,7 @@
 
 <view class="container">
 
-  <view class="doc-title">TAB</view>
+  <view class="doc-title zan-hairline--bottom">TAB</view>
 
   <view style="margin: 20px 0">
     <template

example/pages/tag/index.wxml

@@ -1,6 +1,6 @@
 <view class="container">
 
-  <view class="doc-title">Tag</view>
+  <view class="doc-title zan-hairline--bottom">Tag</view>
 
   <view class="zan-panel">
     <view class="zan-cell zan-cell--last-child">

example/pages/toast/index.wxml

@@ -2,7 +2,7 @@
 
 <view class="container">
 
-  <view class="doc-title">TOAST</view>
+  <view class="doc-title zan-hairline--bottom">TOAST</view>
 
   <view class="zan-btns" style="margin-top: 30vh;">
     <button class="zan-btn" bindtap="showToast">

example/pages/toptips/index.wxml

@@ -2,7 +2,7 @@
 
 <view class="container">
 
-  <view class="doc-title">TOPTIPS</view>
+  <view class="doc-title zan-hairline--bottom">TOPTIPS</view>
 
   <view class="zan-btns" style="margin-top: 30vh;">
     <button class="zan-btn" bindtap="showTopTips">

packages/btn/index.pcss

@@ -1,3 +1,5 @@
+@import "../common/_mixins";
+
 .zan-btn {
   position: relative;
   color: #333;
@@ -6,7 +8,6 @@
   padding-left: 15px;
   padding-right: 15px;
   border-radius: 2px;
-  border: 1rpx solid #e5e5e5;
   font-size: 16px;
   line-height: 45px;
   height: 45px;
@@ -16,7 +17,9 @@
   vertical-align: middle;
 }
 .zan-btn::after {
-  display: none;
+  @mixin hairline;
+  border-width: 1px;
+  border-radius: 4px;
 }
 .zan-btns {
   margin: 15px;
@@ -26,20 +29,29 @@
 .zan-btn--primary {
   color: #fff;
   background-color: #4b0;
+
+  &::after {
     border-color: #0a0;
   }
+}
 
 .zan-btn--warn {
   color: #fff;
   background-color: #f85;
+
+  &::after {
     border-color: #f85;
   }
+}
 
 .zan-btn--danger {
   color: #fff;
   background-color: #f44;
+
+  &::after {
     border-color: #e33;
   }
+}
 
 /* size */
 .zan-btn--small {
@@ -131,6 +143,10 @@
   border-color: #e5e5e5 ! important;
   cursor: not-allowed ! important;
   opacity: 1 ! important;
+
+  &::after {
+    border-color: #e5e5e5 ! important;
+  }
 }
 
 /* :last-child */

packages/cell/index.pcss

@@ -1,3 +1,5 @@
+@import "../common/_mixins";
+
 .zan-cell {
   position: relative;
   padding: 12px 15px;
@@ -8,14 +10,12 @@
 }
 
 .zan-cell::after {
-  position: absolute;
+  @mixin hairline;
+  border-bottom-width: 1px;
   left: 15px;
   right: 0;
-  bottom: 0;
-  border-top: 1rpx solid #e5e5e5;
-  background: #e5e5e5;
-  content: ' ';
 }
+
 .zan-cell__icon {
   margin-right: 5px;
 }

packages/color/index.pcss

@@ -1,27 +1,29 @@
+@import '../common/_var';
+
 .zan-c-red {
-  color: #f44 !important;
+  color: $red !important;
 }
 
 .zan-c-gray {
-  color: #c9c9c9 !important;
+  color: $gray !important;
 }
 
 .zan-c-gray-dark {
-  color: #999 !important;
+  color: $gray-dark !important;
 }
 
 .zan-c-gray-darker {
-  color: #666 !important;
+  color: $gray-darker !important;
 }
 
 .zan-c-black {
-  color: #333 !important;
+  color: $text-color !important;
 }
 
 .zan-c-blue {
-  color: #3283fa !important;
+  color: $blue !important;
 }
 
 .zan-c-green {
-  color: #44BB00 !important;
+  color: $green !important;
 }

packages/common/_mixins.pcss

@@ -0,0 +1,15 @@
+@import './_var';
+
+@define-mixin hairline $border-retina-color: $gray-light {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 200%;
+  height: 200%;
+  transform: scale(.5);
+  transform-origin: 0 0;
+  pointer-events: none;
+  box-sizing: border-box;
+  border: 0 solid $border-retina-color;
+}

packages/common/_var.pcss

@@ -0,0 +1,35 @@
+/* color variables */
+$black: #000;
+$white: #fff;
+$red: #f44;
+$blue: #38f;
+$orange: #f60;
+$green: #06bf04;
+$gray: #c9c9c9;
+$gray-light: #e5e5e5;
+$gray-darker: #666;
+$gray-dark: #999;
+
+/* default colors */
+$text-color: #333;
+$border-color: #ccc;
+$active-color: #e8e8e8;
+$background-color: #f8f8f8;
+
+/* button */
+$button-default-color: $text-color;
+$button-default-background-color: $white;
+$button-default-border-color: $gray-light;
+$button-primary-color: $white;
+$button-primary-background-color: #4b0;
+$button-primary-border-color: #0a0;
+$button-danger-color: $white;
+$button-danger-background-color: $red;
+$button-danger-border-color: #e33;
+$button-disabled-color: $gray-dark;
+$button-disabled-background-color: $gray-light;
+$button-disabled-border-color: $border-color;
+$button-bottom-action-default-color: $white;
+$button-bottom-action-default-background-color: #f85;
+$button-bottom-action-primary-color: $white;
+$button-bottom-action-primary-background-color: $red;

packages/dialog/index.pcss

@@ -1,3 +1,5 @@
+@import "../common/_mixins";
+
 /* 基础样式 */
 .zan-dialog--container {
   position: fixed;
@@ -33,10 +35,15 @@
 }
 
 .zan-dialog__content {
+  position: relative;
   padding: 15px 20px;
   line-height: 1.5;
   min-height: 40px;
-  border-bottom: 1rpx solid #e5e5e5;
+
+  &::after {
+    @mixin hairline;
+    border-bottom-width: 1px;
+  }
 }
 
 /* 在有标题时，需要减弱内容的存在感 */
@@ -53,9 +60,13 @@
   line-height: 50px;
   height: 50px;
   padding: 0 5px;
-  border: 0px none;
   border-radius: 0;
   margin-bottom: 0;
+
+  &::after {
+    border-width: 0;
+    border-radius: 0;
+  }
 }
 
 /* 展示时，样式重置 */
@@ -75,18 +86,25 @@
 
 .zan-dialog__footer--horizon .zan-dialog__button {
   flex: 1;
-  border-right: 1rpx solid #e5e5e5;
+
+  &::after {
+    border-right-width: 1px;
   }
 
-.zan-dialog__footer--horizon .zan-dialog__button:last-child {
-  border-right: 0px none;
+  &:last-child::after {
+    border-right-width: 0;
   }
+}
+
 
 .zan-dialog__footer--vertical .zan-dialog__button {
   flex: 1;
-  border-bottom: 1rpx solid #e5e5e5;
+
+  &::after {
+    border-bottom-width: 1px;
   }
 
-.zan-dialog__footer--vertical .zan-dialog__button:last-child {
-  border-bottom: 0px none;
+  &:last-child::after {
+    border-bottom-width: 0;
+  }
 }

packages/field/index.js

@@ -1,4 +1,4 @@
-const { extractComponentId } = require('../utils/index');
+const { extractComponentId } = require('../common/helper');
 
 module.exports = {
   _handleZanFieldChange(event) {

packages/field/index.pcss

@@ -1,4 +1,4 @@
-@import '../cell/index.pcss';
+@import '../cell/index';
 
 .zan-field {
   padding: 7px 15px;
@@ -7,13 +7,13 @@
 
 .zan-field--wrapped {
   margin: 0 15px;
-  border: 1rpx solid #e5e5e5;
-  border-radius: 8rpx;
   background-color: #fff;
-}
 
-.zan-field--wrapped::after {
-  border: 0rpx;
+  &::after {
+    left: 0;
+    border-width: 1px;
+    border-radius: 4px;
+  }
 }
 
 .zan-field--wrapped + .zan-field--wrapped {
@@ -21,11 +21,14 @@
 }
 
 .zan-field--error {
-  /* 圆角输入框时，将边框也置红 */
-  border-color: #f40;
   color: #f40;
 }
 
+/* 圆角输入框时，将边框也置红 */
+.zan-field--wrapped.zan-field--error::after {
+  border-color: #f40;
+}
+
 .zan-field__title {
   color: #333;
   min-width: 65px;

packages/helper/index.pcss

@@ -1,3 +1,5 @@
+@import "../common/_mixins";
+
 .zan-pull-left {
   float: left;
 }
@@ -99,3 +101,44 @@
   display: table;
   clear: both;
 }
+
+/* 超细边框 */
+.zan-hairline {
+  &,
+  &--top,
+  &--left,
+  &--right,
+  &--bottom,
+  &--top-bottom,
+  &--surround {
+    position: relative;
+
+    &::after {
+      @mixin hairline;
+    }
+  }
+
+  &--top::after {
+    border-top-width: 1px;
+  }
+
+  &--left::after {
+    border-left-width: 1px;
+  }
+
+  &--right::after {
+    border-right-width: 1px;
+  }
+
+  &--bottom::after {
+    border-bottom-width: 1px;
+  }
+
+  &--top-bottom::after {
+    border-width: 1px 0;
+  }
+
+  &--surround::after {
+    border-width: 1px;
+  }
+}

packages/loadmore/index.pcss

@@ -1,3 +1,5 @@
+@import "../common/_mixins";
+
 .zan-loadmore {
   position: relative;
   width: 65%;
@@ -32,8 +34,12 @@
 
 .zan-loadmore--nodata,
 .zan-loadmore--nomore {
-  border-top: 1rpx solid #e5e5e5;
   color: #999;
+
+  &::after {
+    @mixin hairline;
+    border-top-width: 1px;
+  }
 }
 
 .zan-loadmore--nodata {
@@ -45,6 +51,7 @@
   top: -11px;
   background: #f9f9f9;
   padding: 0 6px;
+  z-index: 1;
 }
 
 .zan-loadmore--nomore .zan-loadmore__tips {
@@ -52,6 +59,7 @@
   top: -11px;
   background: #f9f9f9;
   padding: 0 6px;
+  z-index: 1;
 }
 
 .zan-loadmore__dot {

packages/noticebar/index.js

@@ -1,5 +1,5 @@
 var ZanNoticeBar = {
-  initZanNoticeBarScroll: function (componentId) {
+  initZanNoticeBarScroll(componentId) {
     this.zanNoticeBarNode = this.zanNoticeBarNode || {};
     this.zanNoticeBarNode[`${componentId}`] = {
       width: undefined,
@@ -8,11 +8,10 @@ var ZanNoticeBar = {
       resetAnimation: null
     };
     var currentComponent = this.zanNoticeBarNode[`${componentId}`];
-    var _this = this;
-    wx.createSelectorQuery().select(`#${componentId}__content`).boundingClientRect(function (rect) {
+    wx.createSelectorQuery().select(`#${componentId}__content`).boundingClientRect((rect) => {
       if (rect.width) {
         currentComponent.width = rect.width;
-        wx.createSelectorQuery().select(`#${componentId}__content-wrap`).boundingClientRect(function (rect) {
+        wx.createSelectorQuery().select(`#${componentId}__content-wrap`).boundingClientRect((rect) => {
           currentComponent.wrapWidth = rect.width;
           if (currentComponent.wrapWidth < currentComponent.width) {
             var mstime = currentComponent.width / 40 * 1000;
@@ -24,7 +23,7 @@ var ZanNoticeBar = {
               duration: 0,
               timingFunction: 'linear'
             });
-            _this.scrollZanNoticeBar(componentId, mstime);
+            this.scrollZanNoticeBar(componentId, mstime);
           }
         }).exec();
       } else {
@@ -32,22 +31,22 @@ var ZanNoticeBar = {
       }
     }).exec();
   },
-  scrollZanNoticeBar: function (componentId, mstime) {
+
+  scrollZanNoticeBar(componentId, mstime) {
     var currentComponent = this.zanNoticeBarNode[`${componentId}`];
     var resetAnimationData = currentComponent.resetAnimation.translateX(currentComponent.wrapWidth).step();
     this.setData({
       [`${componentId}.animationData`]: resetAnimationData.export()
     });
     var aninationData = currentComponent.animation.translateX(-mstime * 40 / 1000).step();
-    var _this = this;
-    setTimeout(function () {
-      _this.setData({
+    setTimeout(() => {
+      this.setData({
         [`${componentId}.animationData`]: aninationData.export()
       });
     }, 100);
 
-    setTimeout(function () {
-      _this.scrollZanNoticeBar(componentId, mstime);
+    setTimeout(() => {
+      this.scrollZanNoticeBar(componentId, mstime);
     }, mstime);
   }
 };

packages/panel/index.pcss

@@ -1,9 +1,16 @@
+@import "../common/_mixins";
+
 .zan-panel {
+  position: relative;
   background: #fff;
-  border-top: 1rpx solid #e5e5e5;
-  border-bottom: 1rpx solid #e5e5e5;
   margin-top: 10px;
   overflow: hidden;
+
+  &::after {
+    @mixin hairline;
+    border-top-width: 1px;
+    border-bottom-width: 1px;
+  }
 }
 
 .zan-panel-title {

packages/select/index.js

@@ -1,13 +1,14 @@
+const { extractComponentId } = require('../common/helper');
+
 function handle(e) {
-  var dataset = e.currentTarget.dataset;
-  var componentId = dataset.componentId;
-  var value = e.detail.value;
+  const componentId = extractComponentId(e);
+  const value = e.detail.value;
 
   callback.call(this, componentId, value);
 }
 
 function callback(componentId, value) {
-  var e = { componentId, value };
+  const e = { componentId, value };
   console.info('[zan:Select:change]', e);
 
   if (this.handleZanSelectChange) {
@@ -17,10 +18,8 @@ function callback(componentId, value) {
   }
 }
 
-var Select = {
+module.exports = {
   _handleZanSelectChange(e) {
     handle.call(this, e);
-  },
+  }
 };
-
-module.exports = Select;

packages/tab/index.js

@@ -1,9 +1,11 @@
+const { extractComponentId } = require('../common/helper');
+
 var Tab = {
   _handleZanTabChange(e) {
-    var dataset = e.currentTarget.dataset;
-    var componentId = dataset.componentId;
-    var selectedId = dataset.itemId;
-    var data = { componentId, selectedId };
+    const componentId = extractComponentId(e);
+    const dataset = e.currentTarget.dataset;
+    const selectedId = dataset.itemId;
+    const data = { componentId, selectedId };
 
     console.info('[zan:tab:change]', data);
     if (this.handleZanTabChange) {

packages/tag/index.pcss

@@ -1,60 +1,83 @@
+@import '../common/_var';
+@import "../common/_mixins";
+
 .zan-tag {
   display: inline-block;
+  position: relative;
   box-sizing: border-box;
   line-height: 16px;
   padding: 0 5px;
   border-radius: 2px;
   font-size: 11px;
-  background: #c9c9c9;
-  border: 1rpx solid #e5e5e5;
+  background: $gray;
   text-align: center;
-  color: #fff;
+  color: $white;
+
+  &::after {
+    @mixin hairline;
+    border-width: 1px;
+    border-radius: 4px;
+  }
 }
 
 .zan-tag--plain {
-  color: #c9c9c9;
-  background: #fff;
+  color: $gray;
+  background: $white;
 }
 
 /* 各种主题代码 */
 .zan-tag--primary {
-  color: #fff;
-  background-color: #4b0;
-  border: 1rpx solid #4b0;
+  color: $button-primary-color;
+  background-color: $button-primary-background-color;
+
+  &::after {
+    border-color: $button-primary-background-color;
+  }
 
   /* 空心形式 */
   &.zan-tag--plain {
-    color: #4b0;
-    background: #fff;
+    color: $button-primary-background-color;
+    background: $white;
   }
 }
+
 .zan-tag--danger {
-  color: #fff;
-  background: #f44;
-  border: 1rpx solid #f44;
+  color: $button-danger-color;
+  background: $button-danger-background-color;
+
+  &::after {
+    border-color: $button-danger-background-color;
+  }
 
   /* 空心形式 */
   &.zan-tag--plain {
-    color: #f44;
-    background: #fff;
+    color: $button-danger-background-color;
+    background: $button-danger-color;
   }
 }
+
 .zan-tag--warn {
-  color: #fff;
+  color: $white;
   background: #f85;
-  border: 1rpx solid #f85;
+
+  &::after {
+    border-color: #f85;
+  }
 
   /* 空心形式 */
   &.zan-tag--plain {
     color: #f85;
-    background: #fff;
+    background: $white;
   }
 }
 
 
 /* disabled tag */
 .zan-tag--disabled {
-  color: #cacaca !important;
-  background: #eee;
-  border: 1rpx solid #e5e5e5;
+  color: $button-disabled-color !important;
+  background: $button-disabled-background-color;
+
+  &::after {
+    border-color: $button-disabled-border-color;
+  }
 }

postcss.config.js

@@ -5,7 +5,7 @@ const postcssCalc = require('postcss-calc');
 module.exports = {
   plugins: [
     postcssEasyImport({
-      extensions: ['wxss', 'css']
+      extensions: ['.wxss', '.css', '.pcss']
     }),
     precss(),
     postcssCalc()

scripts/utils/build-css.js

@@ -1,17 +1,17 @@
 const gulp = require('gulp');
 const postcss = require('gulp-postcss');
 const cssmin = require('gulp-clean-css');
-const rename = require("gulp-rename");
+const rename = require('gulp-rename');
 const gutil = require('gulp-util');
 
 const options = gutil.env;
 
 gulp.task('compile', () => {
-  return gulp.src('../../packages/**/*.pcss')
+  return gulp.src(['../../packages/**/*.pcss', '!../../packages/**/_*.pcss'])
     .pipe(postcss())
     .pipe(cssmin())
-    .pipe(rename(function (path) {
-      path.extname = ".wxss"
+    .pipe(rename((path) => {
+      path.extname = '.wxss';
     }))
     .pipe(gulp.dest(options.dist));
 });