fix(Tag): incorrect border color when using plain (#8602)

关联PR：#8588

docs/markdown/advanced-usage.en-US.md

@@ -48,11 +48,9 @@ Vant uses `px` unit by default，you can use tools such as [postcss--px-to-viewp
 PostCSS config example:
 
 ```js
+// postcss.config.js
 module.exports = {
   plugins: {
-    autoprefixer: {
-      browsers: ['Android >= 4.4', 'iOS >= 8'],
-    },
     'postcss-px-to-viewport': {
       viewportWidth: 375,
     },
@@ -72,11 +70,9 @@ You can use tools such as `postcss-pxtorem` to transform `px` unit to `rem` unit
 PostCSS config example:
 
 ```js
+// postcss.config.js
 module.exports = {
   plugins: {
-    autoprefixer: {
-      browsers: ['Android >= 4.0', 'iOS >= 8'],
-    },
     'postcss-pxtorem': {
       rootValue: 37.5,
       propList: ['*'],
@@ -85,6 +81,25 @@ module.exports = {
 };
 ```
 
+### Custom rootValue
+
+If the size of the design draft is 750 or other sizes, you can adjust the `rootValue` to:
+
+```js
+// postcss.config.js
+module.exports = {
+  plugins: {
+    // postcss-pxtorem version >= 5.0.0
+    'postcss-pxtorem': {
+      rootValue({ file }) {
+        return file.indexOf('vant') !== -1 ? 37.5 : 75;
+      },
+      propList: ['*'],
+    },
+  },
+};
+```
+
 ### Adapt to PC Browsers
 
 Vant is a mobile-first component library, if you want to use Vant in PC browsers, you can use the [@vant/touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) module. This module will automatically convert the mouse events of the PC browser into the touch events of the mobile browser.

docs/markdown/advanced-usage.zh-CN.md

@@ -105,11 +105,9 @@ Vant 默认使用 `px` 作为样式单位，如果需要使用 `viewport` 单位
 下面提供了一份基本的 PostCSS 示例配置，可以在此配置的基础上根据项目需求进行修改。
 
 ```js
+// postcss.config.js
 module.exports = {
   plugins: {
-    autoprefixer: {
-      browsers: ['Android >= 4.4', 'iOS >= 8'],
-    },
     'postcss-px-to-viewport': {
       viewportWidth: 375,
     },
@@ -131,11 +129,9 @@ module.exports = {
 下面提供了一份基本的 PostCSS 示例配置，可以在此配置的基础上根据项目需求进行修改。
 
 ```js
+// postcss.config.js
 module.exports = {
   plugins: {
-    autoprefixer: {
-      browsers: ['Android >= 4.0', 'iOS >= 8'],
-    },
     'postcss-pxtorem': {
       rootValue: 37.5,
       propList: ['*'],
@@ -144,6 +140,25 @@ module.exports = {
 };
 ```
 
+#### 其他设计稿尺寸
+
+如果设计稿的尺寸不是 375，而是 750 或其他大小，可以将 `rootValue` 配置调整为:
+
+```js
+// postcss.config.js
+module.exports = {
+  plugins: {
+    // postcss-pxtorem 插件的版本需要 >= 5.0.0
+    'postcss-pxtorem': {
+      rootValue({ file }) {
+        return file.indexOf('vant') !== -1 ? 37.5 : 75;
+      },
+      propList: ['*'],
+    },
+  },
+};
+```
+
 ### 桌面端适配
 
 Vant 是一个面向移动端的组件库，因此默认只适配了移动端设备，这意味着组件只监听了移动端的 `touch` 事件，没有监听桌面端的 `mouse` 事件。

docs/markdown/changelog.en-US.md

@@ -16,6 +16,15 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
 
 ## Details
 
+### [v2.12.14](https://github.com/youzan/vant/compare/v2.12.13...v2.12.14)
+
+`2021-04-18`
+
+**Bug Fixes**
+
+- Calendar: failed to update subtitle in some cases [#8513](https://github.com/youzan/vant/issues/8513)
+- ShareSheet: duration prop not work [#8542](https://github.com/youzan/vant/issues/8542)
+
 ### [v2.12.13](https://github.com/youzan/vant/compare/v2.12.12...v2.12.13)
 
 `2021-04-11`

docs/markdown/changelog.zh-CN.md

@@ -16,6 +16,20 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
 
 ## 更新内容
 
+### [v2.12.14](https://github.com/youzan/vant/compare/v2.12.13...v2.12.14)
+
+`2021-04-18`
+
+**Feature**
+
+- sku: 商品属性默认选中交互逻辑修改 [#8559](https://github.com/youzan/vant/issues/8559)
+- sku: 支持商品属性必选配置 [#8558](https://github.com/youzan/vant/issues/8558)
+
+**Bug Fixes**
+
+- Calendar: 修复在某些下副标题更新不正确的问题 [#8513](https://github.com/youzan/vant/issues/8513)
+- ShareSheet: 修复 duration 属性不生效的问题 [#8542](https://github.com/youzan/vant/issues/8542)
+
 ### [v2.12.13](https://github.com/youzan/vant/compare/v2.12.12...v2.12.13)
 
 `2021-04-11`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vant",
-  "version": "2.12.13",
+  "version": "2.12.14",
   "description": "Mobile UI Components built on Vue",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/vant-cli/site/desktop/components/index.vue

@@ -82,6 +82,10 @@ export default {
     },
 
     keyboardNav(direction) {
+      if (/win(32|64)/.test(navigator.userAgent.toLocaleLowerCase())) {
+        return;
+      }
+
       const nav = direction === 'prev' ? this.leftNav : this.rightNav;
       if (nav.path) {
         this.$router.push(this.base + nav.path);

src/calendar/README.zh-CN.md

@@ -252,7 +252,7 @@ export default {
 
 ### Poppable Props
 
-当 Canlendar 的 `poppable` 为 `true` 时，支持以下 props:
+当 Calendar 的 `poppable` 为 `true` 时，支持以下 props:
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
@@ -266,7 +266,7 @@ export default {
 
 ### Range Props
 
-当 Canlendar 的 `type` 为 `range` 时，支持以下 props:
+当 Calendar 的 `type` 为 `range` 时，支持以下 props:
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
@@ -276,7 +276,7 @@ export default {
 
 ### Multiple Props
 
-当 Canlendar 的 `type` 为 `multiple` 时，支持以下 props:
+当 Calendar 的 `type` 为 `multiple` 时，支持以下 props:
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |

src/dropdown-menu/README.zh-CN.md

@@ -203,3 +203,18 @@ export default {
 | @dropdown-menu-option-active-color | `@red` | - |
 | @dropdown-menu-content-max-height | `80%` | - |
 | @dropdown-item-z-index | `10` | - |
+
+## 常见问题
+
+### 父元素设置 transform 后，下拉菜单的位置错误？
+
+把 `DropdownMenu` 嵌套在 `Tabs` 等组件内部使用时，可能会遇到下拉菜单位置错误的问题。这是因为在 Chrome 浏览器中，transform 元素内部的 fixed 布局会降级成 absolute 布局，导致下拉菜单的布局异常。
+
+将 `DropdownItem` 的 `get-container` 属性设置为 `body` 即可避免此问题：
+
+```html
+<van-dropdown-menu>
+  <van-dropdown-item get-container="body" />
+  <van-dropdown-item get-container="body" />
+</van-dropdown-menu>
+```

src/list/README.zh-CN.md

@@ -253,3 +253,9 @@ body {
 ```
 
 这个问题的原因是当元素设置了`overflow-x: hidden`样式时，该元素的`overflow-y`会被浏览器设置为`auto`，而不是默认值`visible`，导致 List 无法正确地判断滚动容器。解决方法是去除该样式，或者在 html 和 body 标签上添加`height: 100%`样式。
+
+### direction 属性设置为 up 后一直触发加载？
+
+设置 `direction` 属性为 up 后，当滚动条处于页面顶部时，就会触发 List 组件的加载。
+
+因此在使用该属性时，建议在每次数据加载完成后，将滚动条滚动至页面底部或非顶部的位置。

src/locale/lang/zh-HK.ts

@@ -18,7 +18,7 @@ export default {
     title: '日期選擇',
     confirm: '確定',
     startEnd: '開始/結束',
-    weekdays: ['日', '壹', '二', '三', '四', '五', '六'],
+    weekdays: ['日', '一', '二', '三', '四', '五', '六'],
     monthTitle: (year: number, month: number) => `${year}年${month}月`,
     rangePrompt: (maxRange: number) => `選擇天數不能超過 ${maxRange} 天`,
   },

src/locale/lang/zh-TW.ts

@@ -18,7 +18,7 @@ export default {
     title: '日期選擇',
     confirm: '確定',
     startEnd: '開始/結束',
-    weekdays: ['日', '壹', '二', '三', '四', '五', '六'],
+    weekdays: ['日', '一', '二', '三', '四', '五', '六'],
     monthTitle: (year: number, month: number) => `${year}年${month}月`,
     rangePrompt: (maxRange: number) => `選擇天數不能超過 ${maxRange} 天`,
   },

src/sku/Sku.js

@@ -10,7 +10,7 @@ import SkuRowPropItem from './components/SkuRowPropItem';
 import SkuStepper from './components/SkuStepper';
 import SkuMessages from './components/SkuMessages';
 import SkuActions from './components/SkuActions';
-import { createNamespace } from '../utils';
+import { createNamespace, isEmpty } from '../utils';
 import {
   isAllSelected,
   isSkuChoosable,
@@ -183,9 +183,9 @@ export default createComponent({
       }
 
       // 属性未全选
-      return !this.propList.some(
-        (it) => (this.selectedProp[it.k_id] || []).length < 1
-      );
+      return !this.propList
+        .filter((i) => i.is_necessary !== false)
+        .some((i) => (this.selectedProp[i.k_id] || []).length === 0);
     },
 
     isSkuEmpty() {
@@ -413,14 +413,24 @@ export default createComponent({
       // 重置商品属性
       this.selectedProp = {};
       const { selectedProp = {} } = this.initialSku;
-      // 只有一个属性值时，默认选中，且选中外部传入信息
+      // 选中外部传入信息
       this.propList.forEach((item) => {
-        if (item.v && item.v.length === 1) {
-          this.selectedProp[item.k_id] = [item.v[0].id];
-        } else if (selectedProp[item.k_id]) {
+        if (selectedProp[item.k_id]) {
           this.selectedProp[item.k_id] = selectedProp[item.k_id];
         }
       });
+      if (isEmpty(this.selectedProp)) {
+        this.propList.forEach((item) => {
+          // 没有加价的属性，默认选中第一个
+          if (item?.v?.length > 0) {
+            const { v, k_id } = item;
+            const isHasConfigPrice = v.some((i) => +i.price !== 0);
+            if (!isHasConfigPrice) {
+              this.selectedProp[k_id] = [v[0].id];
+            }
+          }
+        });
+      }
 
       const propValues = this.selectedPropValues;
       if (propValues.length > 0) {

src/sku/demo/data.ts

@@ -179,6 +179,41 @@ export function getSkuData(largeImageMode = false) {
           },
         ],
       },
+      {
+        k: '非必选属性',
+        k_id: 125,
+        is_multiple: true,
+        is_necessary: false,
+        v: [
+          {
+            id: 1234,
+            name: '属性1',
+            price: 3,
+          },
+          {
+            id: 1235,
+            name: '属性2',
+            price: 4,
+          },
+        ],
+      },
+      {
+        k: '未加价的属性项',
+        k_id: 126,
+        is_multiple: true,
+        v: [
+          {
+            id: 1244,
+            name: '属性a',
+            price: 0,
+          },
+          {
+            id: 1245,
+            name: '属性b',
+            price: 0,
+          },
+        ],
+      },
     ],
   };
 }

src/tag/index.less

@@ -52,6 +52,7 @@
 
   &--plain {
     background-color: @tag-plain-background-color;
+    border-color: currentColor;
 
     &::before {
       position: absolute;
@@ -59,7 +60,8 @@
       right: 0;
       bottom: 0;
       left: 0;
-      border: 1px solid currentColor;
+      border: 1px solid;
+      border-color: inherit;
       border-radius: inherit;
       content: '';
       pointer-events: none;

src/tag/index.tsx

@@ -32,13 +32,17 @@ function Tag(
   slots: DefaultSlots,
   ctx: RenderContext<TagProps>
 ) {
-  const { type, mark, plain, color, round, size } = props;
+  const { type, mark, plain, color, round, size, textColor } = props;
 
   const key = plain ? 'color' : 'backgroundColor';
   const style = { [key]: color };
 
-  if (props.textColor) {
-    style.color = props.textColor;
+  if (plain) {
+    style.color = textColor || color;
+    style.borderColor = color;
+  } else {
+    style.color = textColor;
+    style.background = color;
   }
 
   const classes: { [key: string]: any } = { mark, plain, round };

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

@@ -57,15 +57,15 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-cell">
       <div class="van-cell__title"><span>背景颜色</span></div>
-      <div class="van-cell__value"><span class="van-tag van-tag--default" style="background-color: rgb(114, 50, 221);">标签</span></div>
+      <div class="van-cell__value"><span class="van-tag van-tag--default" style="background: rgb(114, 50, 221);">标签</span></div>
     </div>
     <div class="van-cell">
       <div class="van-cell__title"><span>文字颜色</span></div>
-      <div class="van-cell__value"><span class="van-tag van-tag--default" style="background-color: rgb(255, 225, 225); color: rgb(173, 0, 0);">标签</span></div>
+      <div class="van-cell__value"><span class="van-tag van-tag--default" style="color: rgb(173, 0, 0); background: rgb(255, 225, 225);">标签</span></div>
     </div>
     <div class="van-cell">
       <div class="van-cell__title"><span>空心颜色</span></div>
-      <div class="van-cell__value"><span class="van-tag van-tag--plain van-tag--default" style="color: rgb(114, 50, 221);">标签</span></div>
+      <div class="van-cell__value"><span class="van-tag van-tag--plain van-tag--default" style="color: rgb(114, 50, 221); border-color: #7232dd;">标签</span></div>
     </div>
   </div>
 </div>

src/utils/index.ts

@@ -35,3 +35,45 @@ export function get(object: any, path: string): any {
 
   return result;
 }
+
+/**
+ * Checks if `value` is an empty object, collection, map, or set.
+ *
+ * Objects are considered empty if they have no own enumerable string keyed
+ * properties.
+ *
+ * Array-like values such as `arguments` objects, arrays, buffers, strings, or
+ * jQuery-like collections are considered empty if they have a `length` of `0`.
+ * Similarly, maps and sets are considered empty if they have a `size` of `0`.
+ *
+ * @function isEmpty
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is empty, else `false`.
+ * @example
+ *
+ * _.isEmpty(null);
+ * // => true
+ *
+ * _.isEmpty(true);
+ * // => true
+ *
+ * _.isEmpty(1);
+ * // => true
+ *
+ * _.isEmpty([1, 2, 3]);
+ * // => false
+ *
+ * _.isEmpty({ 'a': 1 });
+ * // => false
+ */
+export function isEmpty(value: any): boolean {
+  if (value == null) {
+    return true;
+  }
+
+  if (typeof value !== 'object') {
+    return true;
+  }
+
+  return Object.keys(value).length === 0;
+}

types/sku.d.ts

@@ -32,6 +32,7 @@ export type SkuPropItemData = {
   v: SkuPropItemValueData[];
   k_id: number;
   is_multiple?: boolean;
+  is_necessary?: boolean;
 };
 
 export type SkuPropItemValueData = {