Merge branch 'dev' of https://github.com/youzan/vant into dev

src/action-sheet/README.md

@@ -120,7 +120,7 @@ export default {
 | description `v2.2.8` | Description above the options | *string* | - |
 | overlay | Whether to show overlay | *boolean* | `true` |
 | round `v2.0.9` | Whether to show round corner | *boolean* | `true` |
-| close-icon `v2.2.13` | Close icon name | *string* | `close` |
+| close-icon `v2.2.13` | Close icon name | *string* | `cross` |
 | close-on-click-action | Whether to close when click action | *boolean* | `false` |
 | close-on-click-overlay | Whether to close when click overlay | *boolean* | `true` |
 | lazy-render | Whether to lazy render util appeared | *boolean* | `true` |

src/action-sheet/README.zh-CN.md

@@ -130,7 +130,7 @@ export default {
 | description `v2.2.8` | 选项上方的描述信息 | *string* | - |
 | overlay | 是否显示遮罩层 | *boolean* | `true` |
 | round `v2.0.9` | 是否显示圆角 | *boolean* | `true` |
-| close-icon `v2.2.13` | 关闭图标名称或图片链接 | *string* | `close` |
+| close-icon `v2.2.13` | 关闭图标名称或图片链接 | *string* | `cross` |
 | close-on-click-action | 是否在点击选项后关闭 | *boolean* | `false` |
 | close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` |
 | lazy-render | 是否在显示弹层时才渲染节点 | *boolean* | `true` |

src/action-sheet/index.tsx

@@ -1,6 +1,6 @@
 import { createNamespace } from '../utils';
 import { emit, inherit } from '../utils/functional';
-import { BORDER_TOP, BORDER_BOTTOM } from '../utils/constant';
+import { BORDER_TOP } from '../utils/constant';
 import { popupMixinProps } from '../mixins/popup';
 import Icon from '../icon';
 import Popup from '../popup';
@@ -51,7 +51,7 @@ function ActionSheet(
   function Header() {
     if (title) {
       return (
-        <div class={[bem('header'), BORDER_BOTTOM]}>
+        <div class={bem('header')}>
           {title}
           <Icon
             name={props.closeIcon}
@@ -166,7 +166,7 @@ ActionSheet.props = {
   },
   closeIcon: {
     type: String,
-    default: 'close'
+    default: 'cross'
   },
   safeAreaInsetBottom: {
     type: Boolean,

src/action-sheet/test/__snapshots__/index.spec.js.snap

@@ -8,7 +8,7 @@ exports[`callback events 1`] = `
 
 exports[`close-icon prop 1`] = `
 <div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
-  <div class="van-action-sheet__header van-hairline--bottom">Title<i class="van-icon van-icon-cross van-action-sheet__close">
+  <div class="van-action-sheet__header">Title<i class="van-icon van-icon-cross van-action-sheet__close">
       <!----></i></div>
 </div>
 `;
@@ -25,7 +25,7 @@ exports[`disable lazy-render 1`] = `<div class="van-popup van-popup--round van-p
 
 exports[`render title and default slot 1`] = `
 <div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
-  <div class="van-action-sheet__header van-hairline--bottom">Title<i class="van-icon van-icon-close van-action-sheet__close">
+  <div class="van-action-sheet__header">Title<i class="van-icon van-icon-cross van-action-sheet__close">
       <!----></i></div>
   <div class="van-action-sheet__content">Default</div>
 </div>

src/goods-action-icon/index.js

@@ -12,6 +12,7 @@ export default createComponent({
     ...routeProps,
     text: String,
     icon: String,
+    color: String,
     info: [Number, String],
     iconClass: null
   },
@@ -20,22 +21,31 @@ export default createComponent({
     onClick(event) {
       this.$emit('click', event);
       route(this.$router, this);
+    },
+
+    genIcon() {
+      const slot = this.slots('icon');
+
+      if (slot) {
+        return <div class={bem('icon')}>{slot}</div>;
+      }
+
+      return (
+        <Icon
+          class={[bem('icon'), this.iconClass]}
+          tag="div"
+          info={this.info}
+          name={this.icon}
+          color={this.color}
+        />
+      );
     }
   },
 
   render() {
     return (
       <div role="button" tabindex="0" class={bem()} onClick={this.onClick}>
-        {this.slots('icon') ? (
+        {this.genIcon()}
-          <div class={bem('icon')}>{this.slots('icon')}</div>
-        ) : (
-          <Icon
-            class={[bem('icon'), this.iconClass]}
-            tag="div"
-            info={this.info}
-            name={this.icon}
-          />
-        )}
         {this.slots() || this.text}
       </div>
     );

src/goods-action/README.md

@@ -56,6 +56,18 @@ Use `info` prop to show badge in icon
 </van-goods-action>
 ```
 
+### Custom Icon Color
+
+```html
+<van-goods-action>
+  <van-goods-action-icon icon="chat-o" text="Icon1" color="#07c160" />
+  <van-goods-action-icon icon="cart-o" text="Icon2" />
+  <van-goods-action-icon icon="star" text="Collected" color="#ff5000" />
+  <van-goods-action-button type="warning" text="Button1" />
+  <van-goods-action-button type="danger" text="Button2" />
+</van-goods-action>
+```
+
 ### Custom Button Color
 
 ```html
@@ -81,6 +93,7 @@ Use `info` prop to show badge in icon
 |------|------|------|------|
 | text | Button text | *string* | - |
 | icon | Icon | *string* | - |
+| color `v2.4.2` | Icon color | *string* | `#323233` |
 | icon-class | Icon class name | *any* | `''` |
 | info | Content of the badge | *string \| number* | - |
 | url | Link | *string* | - |

src/goods-action/README.zh-CN.md

@@ -56,9 +56,23 @@ export default {
 </van-goods-action>
 ```
 
+### 自定义图标颜色
+
+通过 GoodsActionIcon 的`color`属性可以自定义图标的颜色
+
+```html
+<van-goods-action>
+  <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
+  <van-goods-action-icon icon="cart-o" text="购物车" />
+  <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
+  <van-goods-action-button type="warning" text="加入购物车" />
+  <van-goods-action-button type="danger" text="立即购买" />
+</van-goods-action>
+```
+
 ### 自定义按钮颜色
 
-通过`color`属性可以自定义按钮的颜色，支持传入`linear-gradient`渐变色
+通过 GoodsActionButton 的`color`属性可以自定义按钮的颜色，支持传入`linear-gradient`渐变色
 
 ```html
 <van-goods-action>
@@ -83,6 +97,7 @@ export default {
 |------|------|------|------|
 | text | 按钮文字 | *string* | - |
 | icon | 图标 | *string* | - |
+| color `v2.4.2` | 图标颜色 | *string* | `#323233` |
 | icon-class | 图标额外类名 | *any* | - |
 | info | 图标右上角徽标的内容 | *string \| number* | - |
 | url | 点击后跳转的链接地址 | *string* | - |

src/goods-action/demo/index.vue

@@ -10,7 +10,7 @@
       </van-goods-action>
     </demo-block>
 
-    <demo-block :title="$t('title2')">
+    <demo-block :title="$t('iconInfo')">
       <van-goods-action>
         <van-goods-action-icon icon="chat-o" :text="$t('icon1')" />
         <van-goods-action-icon icon="cart-o" info="5" :text="$t('icon2')" />
@@ -20,6 +20,16 @@
       </van-goods-action>
     </demo-block>
 
+    <demo-block v-if="!isWeapp" :title="$t('customIconColor')">
+      <van-goods-action>
+        <van-goods-action-icon icon="chat-o" :text="$t('icon1')" color="#07c160" />
+        <van-goods-action-icon icon="cart-o" :text="$t('icon2')" />
+        <van-goods-action-icon icon="star" :text="$t('collected')" color="#ff5000" />
+        <van-goods-action-button type="warning" :text="$t('button1')" />
+        <van-goods-action-button type="danger" :text="$t('button2')" />
+      </van-goods-action>
+    </demo-block>
+
     <demo-block :title="$t('customButtonColor')">
       <van-goods-action>
         <van-goods-action-icon icon="chat-o" :text="$t('icon1')" />
@@ -35,25 +45,29 @@
 export default {
   i18n: {
     'zh-CN': {
-      clickIcon: '点击图标',
-      clickButton: '点击按钮',
       icon1: '客服',
       icon2: '购物车',
       icon3: '店铺',
       button1: '加入购物车',
       button2: '立即购买',
-      title2: '徽标提示',
+      iconInfo: '徽标提示',
+      collected: '已收藏',
+      clickIcon: '点击图标',
+      clickButton: '点击按钮',
+      customIconColor: '自定义图标颜色',
       customButtonColor: '自定义按钮颜色'
     },
     'en-US': {
-      clickIcon: 'Click Icon',
-      clickButton: 'Click Button',
       icon1: 'Icon1',
       icon2: 'Icon2',
       icon3: 'Icon3',
       button1: 'Button1',
       button2: 'Button2',
-      title2: 'Icon info',
+      iconInfo: 'Icon info',
+      collected: 'Collected',
+      clickIcon: 'Click Icon',
+      clickButton: 'Click Button',
+      customIconColor: 'Custom Icon Color',
       customButtonColor: 'Custom Button Color'
     }
   },

src/goods-action/test/__snapshots__/demo.spec.js.snap

@@ -35,6 +35,25 @@ exports[`renders demo correctly 1`] = `
       </div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--warning"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button van-goods-action-button--last van-goods-action-button--danger"><span class="van-button__text">立即购买</span></button>
     </div>
   </div>
+  <div>
+    <div class="van-goods-action">
+      <div role="button" tabindex="0" class="van-goods-action-icon">
+        <div class="van-icon van-icon-chat-o van-goods-action-icon__icon" style="color: rgb(7, 193, 96);">
+          <!---->
+        </div>客服
+      </div>
+      <div role="button" tabindex="0" class="van-goods-action-icon">
+        <div class="van-icon van-icon-cart-o van-goods-action-icon__icon">
+          <!---->
+        </div>购物车
+      </div>
+      <div role="button" tabindex="0" class="van-goods-action-icon">
+        <div class="van-icon van-icon-star van-goods-action-icon__icon" style="color: rgb(255, 80, 0);">
+          <!---->
+        </div>已收藏
+      </div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--warning"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button van-goods-action-button--last van-goods-action-button--danger"><span class="van-button__text">立即购买</span></button>
+    </div>
+  </div>
   <div>
     <div class="van-goods-action">
       <div role="button" tabindex="0" class="van-goods-action-icon">

src/sku/README.md

@@ -142,6 +142,7 @@ export default {
 | get-container | Return the mount node for sku | *string \| () => Element* | - |
 | safe-area-inset-bottom `v2.2.1` | Whether to enable bottom safe area adaptation | *boolean* | `false` |
 | start-sale-num `v2.3.0` | Minimum quantity | *number* | `1` |
+| properties `2.4.0` | Goods properties | *array* | - |
 
 ### Events
 
@@ -151,6 +152,7 @@ export default {
 | buy-clicked | Triggered when click buy button | data: object |
 | stepper-change | Triggered when stepper value changed | value: number |
 | sku-selected | Triggered when select sku | { skuValue, selectedSku, selectedSkuComb } |
+| sku-prop-selected | Triggered when select property | { propValue, selectedProp, selectedSkuComb } |
 | open-preview | Triggered when open image preview | data: object |
 | close-preview | Triggered when close image preview | data: object |
 
@@ -161,7 +163,7 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Sku instance and call instance m
 | Name | Description | Attribute | Return value |
 |------|------|------|------|
 | getSkuData | Get current skuData | - | skuData |
-| resetSelectedSku | Reset selected sku to initial sku | - | - | 2.3.0 |
+| resetSelectedSku `2.3.0` | Reset selected sku to initial sku | - | - |
 
 ### Slots
 
@@ -226,8 +228,51 @@ sku: {
       placeholder: ''
     }
   ],
-  hide_stock: false
+  hide_stock: false,
+  properties: [
+    {
+      k_id: 123,
+      k: 'More',
+      is_multiple: true,
+      v: [
+        {
+          id: 1222,
+          name: 'Tea',
+          price: 1,
+        },
+        {
+          id: 1223,
+          name: 'Water',
+          price: 1,
         }
+      ],
+    }
+  ]
+}
+```
+
+### properties Data Structure
+
+```javascript
+  [
+    {
+      k_id: 123,
+      k: 'More',
+      is_multiple: true,
+      v: [
+        {
+          id: 1222,
+          name: 'Tea',
+          price: 1,
+        },
+        {
+          id: 1223,
+          name: 'Water',
+          price: 1,
+        }
+      ],
+    }
+  ]
 ```
 
 ### initialSku Data Structure
@@ -238,7 +283,10 @@ sku: {
   // Value：skuValueId
   s1: '30349',
   s2: '1193',
-  selectedNum: 3
+  selectedNum: 3,
+  selectedProp: {
+    123: [1222]
+  }
 }
 ```
 
@@ -324,7 +372,22 @@ skuData: {
     s1: '30349',
     s2: '1193',
     s3: '0',
-    stock_num: 111
+    stock_num: 111,
+    properties: [
+      {
+        k_id: 123,
+        k: 'More',
+        is_multiple: true,
+        v: [
+          {
+            id: 1223,
+            name: 'Water',
+            price: 1
+          }
+        ]
+      }
+    ],
+    property_price: 1
   }
 }
 ```

src/sku/README.zh-CN.md

@@ -146,6 +146,7 @@ export default {
 | show-soldout-sku | 是否展示售罄的 sku，默认展示并置灰 | *boolean* | `true` |
 | safe-area-inset-bottom `v2.2.1` | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` |
 | start-sale-num `v2.3.0` | 起售数量 | *number* | `1` |
+| properties `2.4.0` | 商品属性 | *array* | - |
 
 ### Events
 
@@ -155,6 +156,7 @@ export default {
 | buy-clicked | 点击购买回调 | skuData: object |
 | stepper-change | 购买数量变化时触发 | value: number |
 | sku-selected | 切换规格类目时触发 | { skuValue, selectedSku, selectedSkuComb } |
+| sku-prop-selected | 切换商品属性时触发 | { propValue, selectedProp, selectedSkuComb } |
 | open-preview | 打开商品图片预览时触发 | data: object |
 | close-preview | 关闭商品图片预览时触发 | data: object |
 
@@ -240,6 +242,30 @@ sku: {
 }
 ```
 
+### properties 对象结构
+
+```javascript
+  [ // 商品属性
+    {
+      k_id: 123, // 属性id
+      k: '加料', // 属性名
+      is_multiple: true, // 是否可多选
+      v: [
+        {
+          id: 1222, // 属性值id
+          name: '珍珠', // 属性值名
+          price: 1, // 属性值加价
+        },
+        {
+          id: 1223,
+          name: '椰果',
+          price: 1,
+        }
+      ],
+    }
+  ]
+```
+
 ### initialSku 对象结构
 
 ```javascript
@@ -249,7 +275,13 @@ sku: {
   s1: '30349',
   s2: '1193',
   // 初始选中数量
-  selectedNum: 3
+  selectedNum: 3,
+  // 初始选中的商品属性
+  // 键：属性id
+  // 值：属性值id列表
+  selectedProp: {
+    123: [1222]
+  }
 }
 ```
 
@@ -341,7 +373,22 @@ skuData: {
     s1: '30349',
     s2: '1193',
     s3: '0',
-    stock_num: 111
+    stock_num: 111,
+    properties: [
+      {
+        k_id: 123,
+        k: '加料',
+        is_multiple: true,
+        v: [
+          {
+            id: 1223,
+            name: '椰果',
+            price: 1
           }
+        ]
+      }
+    ],
+    property_price: 1
+  },
 }
 ```

src/sku/Sku.js

@@ -11,7 +11,14 @@ import SkuStepper from './components/SkuStepper';
 import SkuMessages from './components/SkuMessages';
 import SkuActions from './components/SkuActions';
 import { createNamespace, isDef } from '../utils';
-import { isAllSelected, isSkuChoosable, getSkuComb, getSelectedSkuValues, getSelectedPropValues } from './utils/skuHelper';
+import {
+  isAllSelected,
+  isSkuChoosable,
+  getSkuComb,
+  getSelectedSkuValues,
+  getSelectedPropValues,
+  getSelectedProperties,
+} from './utils/skuHelper';
 import { LIMIT_TYPE, UNSELECTED_SKU_VALUE_ID } from './constants';
 
 const namespace = createNamespace('sku');
@@ -38,6 +45,7 @@ export default createComponent({
     disableStepperInput: Boolean,
     safeAreaInsetBottom: Boolean,
     resetSelectedSkuOnHide: Boolean,
+    properties: Array,
     quota: {
       type: Number,
       default: 0
@@ -185,7 +193,7 @@ export default createComponent({
           };
         }
         if (skuComb) {
-          skuComb.properties = this.selectedPropValues;
+          skuComb.properties = getSelectedProperties(this.propList, this.selectedProp);
           skuComb.property_price = this.selectedPropValues.reduce((acc, cur) => acc + (cur.price || 0), 0);
         }
       }
@@ -220,7 +228,7 @@ export default createComponent({
     },
 
     propList() {
-      return this.sku.properties || [];
+      return this.properties || [];
     },
 
     imageList() {

src/sku/demo/data.ts

@@ -179,6 +179,7 @@ export const skuData = {
         required: 0
       }
     ],
+  },
   properties: [
     {
       k_id: 123,
@@ -198,11 +199,11 @@ export const skuData = {
     },
     {
       k_id: 133,
-        k: '不知道',
+      k: '打包',
       v: [
         {
           id: 1244,
-            name: '什么',
+          name: '分开打包',
           price: 9,
         }
       ],
@@ -230,7 +231,6 @@ export const skuData = {
       ],
     }
   ],
-  },
 };
 
 export const initialSku = {

src/sku/demo/index.vue

@@ -15,6 +15,7 @@
           :close-on-click-overlay="closeOnClickOverlay"
           :message-config="messageConfig"
           :custom-sku-validator="customSkuValidator"
+          :properties="skuData.properties"
           disable-stepper-input
           reset-stepper-on-hide
           safe-area-inset-bottom
@@ -46,6 +47,7 @@
           :start-sale-num="skuData.start_sale_num"
           :custom-stepper-config="customStepperConfig"
           :message-config="messageConfig"
+          :properties="skuData.properties"
           hide-quota-text
           safe-area-inset-bottom
           @buy-clicked="onBuyClicked"
@@ -76,6 +78,7 @@
           :custom-stepper-config="customStepperConfig"
           :message-config="messageConfig"
           :show-soldout-sku="false"
+          :properties="skuData.properties"
           hide-quota-text
           safe-area-inset-bottom
           @buy-clicked="onBuyClicked"
@@ -103,6 +106,7 @@
           :quota="skuData.quota"
           :quota-used="skuData.quota_used"
           :start-sale-num="skuData.start_sale_num"
+          :properties="skuData.properties"
           show-add-cart-btn
           reset-stepper-on-hide
           safe-area-inset-bottom

src/sku/utils/skuHelper.js

@@ -120,12 +120,33 @@ export const getSelectedPropValues = (propList, selectedProp) => {
   const normalizeProp = normalizePropList(propList);
   return Object.keys(selectedProp).reduce((acc, cur) => {
     selectedProp[cur].forEach(it => {
-      acc.push(normalizeProp[cur][it]);
+      acc.push({
+        ...normalizeProp[cur][it],
+      });
     });
     return acc;
   }, []);
 };
 
+export const getSelectedProperties = (propList, selectedProp) => {
+  const list = [];
+  (propList || []).forEach(prop => {
+    if (selectedProp[prop.k_id] && selectedProp[prop.k_id].length > 0) {
+      const v = [];
+      prop.v.forEach(it => {
+        if (selectedProp[prop.k_id].indexOf(it.id) > -1) {
+          v.push({ ...it });
+        }
+      });
+      list.push({
+        ...prop,
+        v,
+      });
+    }
+  });
+  return list;
+};
+
 export default {
   normalizeSkuTree,
   getSkuComb,
@@ -133,4 +154,5 @@ export default {
   isAllSelected,
   isSkuChoosable,
   getSelectedPropValues,
+  getSelectedProperties,
 };

src/style/var.less

@@ -72,7 +72,7 @@
 @action-sheet-subname-font-size: @font-size-sm;
 @action-sheet-close-icon-size: 18px;
 @action-sheet-close-icon-color: @gray-6;
-@action-sheet-close-icon-padding: 0 @padding-sm;
+@action-sheet-close-icon-padding: 0 @padding-md;
 @action-sheet-cancel-padding-top: @padding-xs;
 @action-sheet-cancel-padding-color: @background-color;
 

src/switch/README.md

@@ -78,6 +78,14 @@ export default {
 };  
 ```
 
+### Inside a Cell
+
+```html
+<van-cell center title="Title">
+  <van-switch v-model="checked" slot="right-icon" size="24" />
+</van-cell>
+```
+
 ## API
 
 ### Props

src/switch/README.zh-CN.md

@@ -90,6 +90,14 @@ export default {
 }; 
 ```
 
+### 搭配单元格使用
+
+```html
+<van-cell center title="标题">
+  <van-switch v-model="checked" slot="right-icon" size="24" />
+</van-cell>
+```
+
 ## API
 
 ### Props

src/switch/demo/index.vue

@@ -17,12 +17,22 @@
     </demo-block>
 
     <demo-block :title="$t('customColor')">
-      <van-switch v-model="checked3" active-color="#07c160" inactive-color="#ee0a24" />
+      <van-switch
+        v-model="checked3"
+        active-color="#07c160"
+        inactive-color="#ee0a24"
+      />
     </demo-block>
 
     <demo-block :title="$t('asyncControl')">
       <van-switch :value="checked4" @input="onInput" />
     </demo-block>
+
+    <demo-block :title="$t('withCell')">
+      <van-cell center :title="$t('title')">
+        <van-switch v-model="checked5" slot="right-icon" size="24" />
+      </van-cell>
+    </demo-block>
   </demo-section>
 </template>
 
@@ -30,15 +40,19 @@
 export default {
   i18n: {
     'zh-CN': {
-      title: '提醒',
+      title: '标题',
+      confirm: '提醒',
       message: '是否切换开关？',
+      withCell: '搭配单元格使用',
       customSize: '自定义大小',
       customColor: '自定义颜色',
       asyncControl: '异步控制'
     },
     'en-US': {
-      title: 'Confirm',
+      title: 'Title',
+      confirm: 'Confirm',
       message: 'Are you sure to toggle switch?',
+      withCell: 'Inside a Cell',
       customSize: 'Custom Size',
       customColor: 'Custom Color',
       asyncControl: 'Async Control'
@@ -50,7 +64,9 @@ export default {
       checked: true,
       checked2: true,
       checked3: true,
-      checked4: true
+      checked4: true,
+      checked5: true,
+      checked6: false
     };
   },
 
@@ -73,10 +89,8 @@ export default {
 @import '../../style/var';
 
 .demo-switch {
-  background: @white;
-
   .van-switch {
-    margin: 0 @padding-md;
+    margin-left: @padding-md;
   }
 }
 </style>

src/switch/test/__snapshots__/demo.spec.js.snap

@@ -34,5 +34,13 @@ exports[`renders demo correctly 1`] = `
       <div class="van-switch__node"></div>
     </div>
   </div>
+  <div>
+    <div class="van-cell van-cell--center">
+      <div class="van-cell__title"><span>标题</span></div>
+      <div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 24px;">
+        <div class="van-switch__node"></div>
+      </div>
+    </div>
+  </div>
 </div>
 `;