fix: merge dev

docs/markdown/design.zh-CN.md

@@ -12,6 +12,8 @@
 
 <a class="design-download" href="https://github.com/youzan/vant/blob/dev/docs/assets/design.sketch?raw=true">下载</a>
 
+> 提示：目前 Sketch 中部分组件仍为旧版样式，我们正在梳理新版设计规范，尽请期待！
+
 ### 图标
 
 包含 Sketch 格式的图标库资源。

src/dropdown-item/index.js

@@ -40,6 +40,14 @@ export default createComponent({
     }
   },
 
+  beforeCreate() {
+    const createEmitter = eventName => () => this.$emit(eventName);
+
+    this.onOpen = createEmitter('open');
+    this.onClose = createEmitter('close');
+    this.onOpened = createEmitter('opened');
+  },
+
   methods: {
     toggle(show = !this.showPopup, options = {}) {
       if (show === this.showPopup) {
@@ -53,17 +61,16 @@ export default createComponent({
         this.parent.updateOffset();
         this.showWrapper = true;
       }
+    },
+
+    onClickWrapper(event) {
+      // prevent being identified as clicking outside and closed when use get-contaienr
+      if (this.getContainer) {
+        event.stopPropagation();
+      }
     }
   },
 
-  beforeCreate() {
-    const createEmitter = eventName => () => this.$emit(eventName);
-
-    this.onOpen = createEmitter('open');
-    this.onClose = createEmitter('close');
-    this.onOpened = createEmitter('opened');
-  },
-
   render() {
     const {
       zIndex,
@@ -113,6 +120,7 @@ export default createComponent({
           ref="wrapper"
           style={style}
           class={bem([direction])}
+          onClick={this.onClickWrapper}
         >
           <Popup
             vModel={this.showPopup}

src/field/demo/index.vue

@@ -2,10 +2,7 @@
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <van-cell-group>
-        <van-field
+        <van-field v-model="value" :placeholder="$t('usernamePlaceholder')" />
-          v-model="value"
-          :placeholder="$t('usernamePlaceholder')"
-        />
       </van-cell-group>
     </demo-block>
 
@@ -69,10 +66,7 @@
           :placeholder="$t('smsPlaceholder')"
         >
           <template #button>
-            <van-button
+            <van-button size="small" type="primary">
-              size="small"
-              type="primary"
-            >
               {{ $t('sendSMS') }}
             </van-button>
           </template>

src/field/index.js

@@ -18,8 +18,9 @@ export default createComponent({
     leftIcon: String,
     rightIcon: String,
     clearable: Boolean,
-    labelClass: null,
+    maxlength: [Number, String],
     labelWidth: [Number, String],
+    labelClass: null,
     labelAlign: String,
     inputAlign: String,
     errorMessage: String,
@@ -101,9 +102,9 @@ export default createComponent({
       }
 
       let { value } = target;
-      const { maxlength } = this.$attrs;
+      const { maxlength } = this;
 
-      if (this.type === 'number' && isDef(maxlength) && value.length > maxlength) {
+      if (isDef(maxlength) && value.length > maxlength) {
         value = value.slice(0, maxlength);
         target.value = value;
       }
@@ -264,10 +265,10 @@ export default createComponent({
     },
 
     genWordLimit() {
-      if (this.showWordLimit && this.$attrs.maxlength) {
+      if (this.showWordLimit && this.maxlength) {
         return (
           <div class={bem('word-limit')}>
-            {this.value.length}/{this.$attrs.maxlength}
+            {this.value.length}/{this.maxlength}
           </div>
         );
       }

src/tab/README.md

@@ -200,6 +200,7 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content
 |------|------|------|------|------|
 | name | Identifier | *string \| number* | Index of tab | - |
 | title | Title | *string* | - | - |
+| title-style | Custom title style | *any*  | - | 2.2.14 |
 | disabled | Whether to disable tab | *boolean* | `false` | - |
 | url | Link | *string* | - | 2.2.1 |
 | to | Target route of the link, same as to of vue-router | *string \| object* | - | 2.2.1 |

src/tab/README.zh-CN.md

@@ -204,6 +204,7 @@ export default {
 |------|------|------|------|------|
 | name | 标签名称，作为匹配的标识符 | *string \| number* | 标签的索引值 | 2.0.6 |
 | title | 标题 | *string* | - | - |
+| title-style | 自定义标题样式 | *any*  | - | 2.2.14 |
 | disabled | 是否禁用标签 | *boolean* | `false` | - |
 | url | 点击后跳转的链接地址 | *string* | - | 2.2.1 |
 | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | 2.2.1 |

src/tab/demo/index.vue

@@ -2,11 +2,7 @@
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <van-tabs v-model="active">
-        <van-tab
+        <van-tab :title="$t('tab') + index" v-for="index in tabs" :key="index">
-          :title="$t('tab') + index"
-          v-for="index in tabs"
-          :key="index"
-        >
           {{ $t('content') }} {{ index }}
         </van-tab>
       </van-tabs>
@@ -14,22 +10,13 @@
 
     <demo-block :title="$t('matchByName')">
       <van-tabs v-model="activeName">
-        <van-tab
+        <van-tab name="a" :title="$t('tab') + 1">
-          name="a"
-          :title="$t('tab') + 1"
-        >
           {{ $t('content') }} 1
         </van-tab>
-        <van-tab
+        <van-tab name="b" :title="$t('tab') + 2">
-          name="b"
-          :title="$t('tab') + 2"
-        >
           {{ $t('content') }} 2
         </van-tab>
-        <van-tab
+        <van-tab name="c" :title="$t('tab') + 3">
-          name="c"
-          :title="$t('tab') + 3"
-        >
           {{ $t('content') }} 3
         </van-tab>
       </van-tabs>
@@ -37,11 +24,7 @@
 
     <demo-block :title="$t('title2')">
       <van-tabs>
-        <van-tab
+        <van-tab v-for="index in 8" :title="$t('tab') + index" :key="index">
-          v-for="index in 8"
-          :title="$t('tab') + index"
-          :key="index"
-        >
           {{ $t('content') }} {{ index }}
         </van-tab>
       </van-tabs>
@@ -62,11 +45,7 @@
 
     <demo-block :title="$t('title4')">
       <van-tabs type="card">
-        <van-tab
+        <van-tab v-for="index in 3" :title="$t('tab') + index" :key="index">
-          v-for="index in 3"
-          :title="$t('tab') + index"
-          :key="index"
-        >
           {{ $t('content') }} {{ index }}
         </van-tab>
       </van-tabs>
@@ -74,26 +53,15 @@
 
     <demo-block :title="$t('title5')">
       <van-tabs @click="onClick">
-        <van-tab
+        <van-tab v-for="index in 2" :title="$t('tab') + index" :key="index">
-          v-for="index in 2"
-          :title="$t('tab') + index"
-          :key="index"
-        >
           {{ $t('content') }} {{ index }}
         </van-tab>
       </van-tabs>
     </demo-block>
 
     <demo-block :title="$t('title6')">
-      <van-tabs
+      <van-tabs :active="active" sticky>
-        :active="active"
+        <van-tab :title="$t('tab') + index" v-for="index in tabs" :key="index">
-        sticky
-      >
-        <van-tab
-          :title="$t('tab') + index"
-          v-for="index in tabs"
-          :key="index"
-        >
           {{ $t('content') }} {{ index }}
         </van-tab>
       </van-tabs>
@@ -101,10 +69,7 @@
 
     <demo-block v-if="!$attrs.weapp" :title="$t('title7')">
       <van-tabs :active="active">
-        <van-tab
+        <van-tab v-for="index in 2" :key="index">
-          v-for="index in 2"
-          :key="index"
-        >
           <template #title>
             <van-icon name="more-o" />{{ $t('tab') }}
           </template>
@@ -115,26 +80,15 @@
 
     <demo-block :title="$t('title8')">
       <van-tabs animated>
-        <van-tab
+        <van-tab :title="$t('tab') + index" v-for="index in tabs" :key="index">
-          :title="$t('tab') + index"
-          v-for="index in tabs"
-          :key="index"
-        >
           {{ $t('content') }} {{ index }}
         </van-tab>
       </van-tabs>
     </demo-block>
 
     <demo-block :title="$t('title9')">
-      <van-tabs
+      <van-tabs :active="active" swipeable>
-        :active="active"
+        <van-tab :title="$t('tab') + index" v-for="index in tabs" :key="index">
-        swipeable
-      >
-        <van-tab
-          :title="$t('tab') + index"
-          v-for="index in tabs"
-          :key="index"
-        >
           {{ $t('content') }} {{ index }}
         </van-tab>
       </van-tabs>

src/tab/index.js

@@ -11,6 +11,7 @@ export default createComponent({
     ...routeProps,
     name: [Number, String],
     title: String,
+    titleStyle: null,
     disabled: Boolean
   },
 

src/tab/test/index.spec.js

@@ -227,3 +227,15 @@ test('set name to zero', async () => {
   tabs.at(1).trigger('click');
   expect(onClick).toHaveBeenCalledWith(0, 'title2');
 });
+
+test('title-style prop', () => {
+  const wrapper = mount({
+    template: `
+      <van-tabs>
+        <van-tab title="title1" title-style="color: red;">Text</van-tab>
+      </van-tabs>
+    `
+  });
+
+  expect(wrapper.find('.van-tab').element.style.color).toEqual('red');
+});

src/tabs/index.js

@@ -266,6 +266,7 @@ export default createComponent({
         type={type}
         title={item.title}
         color={this.color}
+        style={item.titleStyle}
         isActive={index === this.currentIndex}
         ellipsis={ellipsis}
         disabled={item.disabled}