Merge branch 'dev' into next

2021-11-10 15:31:33 +08:00
parent 26fa234026 d65714601e
commit e713e8eade
76 changed files with 9086 additions and 20526 deletions
@@ -16,6 +16,23 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).

 ## Details

+### [v3.2.8](https://github.com/compare/v3.2.7...v3.2.8)
+
+`2021-11-09`
+
+**Feature**
+
+- Cascader: add options-bottom slot [#9804](https://github.com/issues/9804)
+- SubmitBar: add SubmitBarTextAlign type [f95567](https://github.com/commit/f95567ade758d453f4acad8a40d8ae717035476a)
+- PasswordInput: add PasswordInputProps type [#9820](https://github.com/issues/9820)
+
+**Bug Fixes**
+
+- NavBar: fix NavBarProps spelling [#9818](https://github.com/issues/9818)
+- Progress: incorrect border-radius [#9826](https://github.com/issues/9826)
+- SubmitBar: fix missing SubmitBarProps export [#9819](https://github.com/issues/9819)
+- Tabs: should emit click-tab after before-change [#9805](https://github.com/issues/9805)
+
 ### [v3.2.7](https://github.com/youzan/vant/compare/v3.2.6...v3.2.7)

 `2021-11-04`
@@ -16,6 +16,23 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。

 ## 更新内容

+### [v3.2.8](https://github.com/compare/v3.2.7...v3.2.8)
+
+`2021-11-09`
+
+**Feature**
+
+- Cascader: 新增 options-bottom 插槽 [#9804](https://github.com/issues/9804)
+- SubmitBar: 新增 SubmitBarTextAlign 类型 [f95567](https://github.com/commit/f95567ade758d453f4acad8a40d8ae717035476a)
+- PasswordInput: 新增 PasswordInputProps 类型 [#9820](https://github.com/issues/9820)
+
+**Bug Fixes**
+
+- NavBar: 修复 NavBarProps 拼写错误的问题 [#9818](https://github.com/issues/9818)
+- Progress: 修复圆角大小错误的问题 [#9826](https://github.com/issues/9826)
+- SubmitBar: 修复未导出 SubmitBarProps 的问题 [#9819](https://github.com/issues/9819)
+- Tabs: 修复 click-tab 触发顺序早于 before-change 的问题 [#9805](https://github.com/issues/9805)
+
 ### [v3.2.7](https://github.com/youzan/vant/compare/v3.2.6...v3.2.7)

 `2021-11-04`
@@ -15,6 +15,8 @@

 ### 本地开发

+在进行本地开发前，请先确保你的开发环境中安装了 [Node.js >= 14](https://nodejs.org) 和 [pnpm](https://pnpm.io).
+
 按照下面的步骤操作，即可在本地开发 Vant 组件。

 ```bash
@@ -24,10 +26,10 @@
 git clone git@github.com:youzan/vant.git

 # 安装依赖
-yarn
+pnpm i

 # 进入开发模式，浏览器访问 localhost
-yarn dev
+pnpm dev
 ```

 ### 目录结构
@@ -1,6 +1,6 @@
 {
  "name": "vant",
-  "version": "3.2.7",
+  "version": "3.2.8",
  "description": "Mobile UI Components built on Vue",
  "main": "lib/index.js",
  "module": "es/index.js",
@@ -21,7 +21,7 @@
    "build": "vant-cli build",
    "build:site": "vant-cli build-site",
    "release": "vant-cli release --tag next",
-    "release:site": "yarn build:site && gh-pages -d site-dist --add --dest v3",
+    "release:site": "pnpm build:site && gh-pages -d site-dist --add --dest v3",
    "test:watch": "vant-cli test --watch",
    "test:coverage": "open test/coverage/index.html"
  },
@@ -55,8 +55,11 @@
  "devDependencies": {
    "@vant/area-data": "^1.1.3",
    "@vant/cli": "^4.0.0-beta.5",
-    "@vue/compiler-sfc": "^3.2.19",
-    "vue": "^3.2.20"
+    "@vue/compiler-sfc": "^3.2.20",
+    "@vue/runtime-core": "^3.2.20",
+    "typescript": "4.x",
+    "vue": "^3.2.20",
+    "vue-router": "^4.0.12"
  },
  "sideEffects": [
    "es/**/style/*",
@@ -259,10 +259,9 @@ export default defineComponent({
            unselected: !selected,
          })}
        >
-          {slots['options-top']
-            ? slots['options-top']({ tabIndex: activeTab.value })
-            : null}
+          {slots['options-top']?.({ tabIndex })}
          {renderOptions(options, selected, tabIndex)}
+          {slots['options-bottom']?.({ tabIndex })}
        </Tab>
      );
    };
@@ -282,7 +282,8 @@ export default {
 | --- | --- | --- |
 | title | Custom title | - |
 | option `v3.1.4` | Custom option text | _{ option: Option, selected: boolean }_ |
-| options-top `v3.2.7` | Custom the content above options | _{ tabIndex: number }_ |
+| options-top `v3.2.7` | Custom the content above the options | _{ tabIndex: number }_ |
+| options-bottom `v3.2.8` | Custom the content below the options | _{ tabIndex: number }_ |

 ### Types

@@ -295,6 +295,7 @@ export default {
 | title | 自定义顶部标题 | - |
 | option `v3.1.4` | 自定义选项文字 | _{ option: Option, selected: boolean }_ |
 | options-top `v3.2.7` | 自定义选项上方的内容 | _{ tabIndex: number }_ |
+| options-bottom `v3.2.8` | 自定义选项下方的内容 | _{ tabIndex: number }_ |

 ### 类型定义

@@ -1,8 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[` should allow more custom content 1`] = `
+exports[`should change close icon when using close-icon prop 1`] = `
+<i class="van-badge__wrapper van-icon van-icon-success van-cascader__close-icon van-haptics-feedback">
+</i>
+`;
+
+exports[`should render option slot correctly 1`] = `
+<li class="van-cascader__option">
+  Custom Option foo
+</li>
+`;
+
+exports[`should render options-top、options-bottom slots correctly 1`] = `
 <div class="van-tab__pane">
-  tab index: 1
+  Top, tab index: 0
  <ul class="van-cascader__options">
    <li class="van-cascader__option van-cascader__option--selected">
      <span>
@@ -17,20 +28,10 @@ exports[` should allow more custom content 1`] = `
      </span>
    </li>
  </ul>
+  Bottom, tab index: 0
 </div>
 `;

-exports[`should change close icon when using close-icon prop 1`] = `
-<i class="van-badge__wrapper van-icon van-icon-success van-cascader__close-icon van-haptics-feedback">
-</i>
-`;
-
-exports[`should render option slot correctly 1`] = `
-<li class="van-cascader__option">
-  Custom Option foo
-</li>
-`;
-
 exports[`should render title slot correctly 1`] = `
 <h2 class="van-cascader__title">
  Custom Title
@@ -242,10 +242,11 @@ test('should allow to custom the color of option', async () => {
  expect(option.style.color).toEqual('red');
 });

-test(' should allow more custom content', async () => {
+test('should render options-top、options-bottom slots correctly', async () => {
  const wrapper = mount(Cascader, {
    slots: {
-      'options-top': ({ tabIndex }) => `tab index: ${tabIndex}`,
+      'options-top': ({ tabIndex }) => `Top, tab index: ${tabIndex}`,
+      'options-bottom': ({ tabIndex }) => `Bottom, tab index: ${tabIndex}`,
    },
    props: {
      options,
@@ -30,7 +30,7 @@ const navBarProps = {
  safeAreaInsetTop: Boolean,
 };

-export type NavbarProps = ExtractPropTypes<typeof navBarProps>;
+export type NavBarProps = ExtractPropTypes<typeof navBarProps>;

 export default defineComponent({
  name,
@@ -120,7 +120,7 @@ export default {
 The component exports the following type definitions:

 ```ts
-import type { NavbarProps } from 'vant';
+import type { NavBarProps } from 'vant';
 ```

 ## Theming
@@ -128,7 +128,7 @@ export default {
 组件导出以下类型定义：

 ```ts
-import type { NavbarProps } from 'vant';
+import type { NavBarProps } from 'vant';
 ```

 ## 主题定制
@@ -3,4 +3,4 @@ import _NavBar from './NavBar';

 export const NavBar = withInstall(_NavBar);
 export default NavBar;
-export type { NavbarProps } from './NavBar';
+export type { NavBarProps } from './NavBar';
@@ -91,8 +91,8 @@ app.use(NoticeBar);
 | --- | --- | --- | --- |
 | mode | Mode, can be set to `closeable` `link` | _string_ | `''` |
 | text | Notice text content | _string_ | `''` |
-| color | Text color | _string_ | `#f60` |
-| background | Background color | _string_ | `#fff7cc` |
+| color | Text color | _string_ | `#ed6a0c` |
+| background | Background color | _string_ | `#fffbe8` |
 | left-icon | Left Icon | _string_ | - |
 | delay | Animation delay (s) | _number \| string_ | `1` |
 | speed | Scroll speed (px/s) | _number \| string_ | `60` |
@@ -112,8 +112,8 @@ app.use(NoticeBar);
 | --- | --- | --- | --- |
 | mode | 通知栏模式，可选值为 `closeable` `link` | _string_ | `''` |
 | text | 通知文本内容 | _string_ | `''` |
-| color | 通知文本颜色 | _string_ | `#f60` |
-| background | 滚动条背景 | _string_ | `#fff7cc` |
+| color | 通知文本颜色 | _string_ | `#ed6a0c` |
+| background | 滚动条背景 | _string_ | `#fffbe8` |
 | left-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
 | delay | 动画延迟时间 (s) | _number \| string_ | `1` |
 | speed | 滚动速率 (px/s) | _number \| string_ | `60` |
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { defineComponent, ExtractPropTypes } from 'vue';
 import {
  addUnit,
  truthProp,
@@ -12,18 +12,22 @@ import {

 const [name, bem] = createNamespace('password-input');

+const passwordInputProps = {
+  info: String,
+  mask: truthProp,
+  value: makeStringProp(''),
+  gutter: numericProp,
+  length: makeNumericProp(6),
+  focused: Boolean,
+  errorInfo: String,
+};
+
+export type PasswordInputProps = ExtractPropTypes<typeof passwordInputProps>;
+
 export default defineComponent({
  name,

-  props: {
-    info: String,
-    mask: truthProp,
-    value: makeStringProp(''),
-    gutter: numericProp,
-    length: makeNumericProp(6),
-    focused: Boolean,
-    errorInfo: String,
-  },
+  props: passwordInputProps,

  emits: ['focus'],

@@ -2,7 +2,7 @@

 ### Intro

-The passwordinput component is usually used with [NumberKeyboard](#/en-US/number-keyboard) Component.
+The PasswordInput component is usually used with [NumberKeyboard](#/en-US/number-keyboard) Component.

 ### Install

@@ -148,6 +148,14 @@ export default {
 | ----- | ----------------------------- | --------- |
 | focus | Emitted when input is focused | -         |

+### Types
+
+The component exports the following type definitions:
+
+```ts
+import type { PasswordInputProps } from 'vant';
+```
+
 ## Theming

 ### CSS Variables
@@ -158,6 +158,14 @@ export default {
 | ------ | ---------------- | -------- |
 | focus  | 输入框聚焦时触发 | -        |

+### 类型定义
+
+组件导出以下类型定义：
+
+```ts
+import type { PasswordInputProps } from 'vant';
+```
+
 ## 主题定制

 ### 样式变量
@@ -3,3 +3,4 @@ import _PasswordInput from './PasswordInput';

 export const PasswordInput = withInstall(_PasswordInput);
 export default PasswordInput;
+export type { PasswordInputProps } from './PasswordInput';
@@ -61,8 +61,8 @@ export default defineComponent({
        height: addUnit(strokeWidth),
      };
      const portionStyle = {
+        width: `${percentage}%`,
        background: background.value,
-        transform: `scaleX(${+percentage / 100})`,
      };

      return (
@@ -4,7 +4,7 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
  <div class="van-progress">
    <span class="van-progress__portion"
-          style="transform: scaleX(0.5);"
+          style="width: 50%;"
    >
    </span>
    <span style="left: 50%; transform: translate(-50%,-50%);"
@@ -19,7 +19,7 @@ exports[`should render demo and match snapshot 1`] = `
       style="height: 8px;"
  >
    <span class="van-progress__portion"
-          style="transform: scaleX(0.5);"
+          style="width: 50%;"
    >
    </span>
    <span style="left: 50%; transform: translate(-50%,-50%);"
@@ -32,7 +32,7 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
  <div class="van-progress">
    <span class="van-progress__portion van-progress__portion--inactive"
-          style="transform: scaleX(0.5);"
+          style="width: 50%;"
    >
    </span>
    <span style="left: 50%; transform: translate(-50%,-50%);"
@@ -45,7 +45,7 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
  <div class="van-progress">
    <span class="van-progress__portion"
-          style="background: rgb(242, 130, 106); transform: scaleX(0.25);"
+          style="width: 25%; background: rgb(242, 130, 106);"
    >
    </span>
    <span style="left: 25%; transform: translate(-25%,-50%); background: rgb(242, 130, 106);"
@@ -56,7 +56,7 @@ exports[`should render demo and match snapshot 1`] = `
  </div>
  <div class="van-progress">
    <span class="van-progress__portion"
-          style="background: rgb(238, 10, 36); transform: scaleX(0.5);"
+          style="width: 50%; background: rgb(238, 10, 36);"
    >
    </span>
    <span style="left: 50%; transform: translate(-50%,-50%); background: rgb(238, 10, 36);"
@@ -67,7 +67,7 @@ exports[`should render demo and match snapshot 1`] = `
  </div>
  <div class="van-progress">
    <span class="van-progress__portion"
-          style="transform: scaleX(0.75);"
+          style="width: 75%;"
    >
    </span>
    <span style="left: 75%; transform: translate(-75%,-50%); background: rgb(114, 50, 221);"
@@ -80,7 +80,7 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
  <div class="van-progress">
    <span class="van-progress__portion"
-          style="transform: scaleX(0.5);"
+          style="width: 50%;"
    >
    </span>
    <span style="left: 50%; transform: translate(-50%,-50%);"
@@ -3,7 +3,7 @@
 exports[`should re-calc width if showing pivot dynamically 1`] = `
 <div class="van-progress">
  <span class="van-progress__portion"
-        style="transform: scaleX(1);"
+        style="width: 100%;"
  >
  </span>
 </div>
@@ -12,7 +12,7 @@ exports[`should re-calc width if showing pivot dynamically 1`] = `
 exports[`should re-calc width if showing pivot dynamically 2`] = `
 <div class="van-progress">
  <span class="van-progress__portion"
-        style="transform: scaleX(1);"
+        style="width: 100%;"
  >
  </span>
  <span style="left: 100%; transform: translate(-100%,-50%);"
@@ -127,7 +127,7 @@ export default {
 The component exports the following type definitions:

 ```ts
-import type { SubmitBarProps } from 'vant';
+import type { SubmitBarProps, SubmitBarTextAlign } from 'vant';
 ```

 ## Theming
@@ -134,7 +134,7 @@ export default {
 组件导出以下类型定义：

 ```ts
-import type { SubmitBarProps } from 'vant';
+import type { SubmitBarProps, SubmitBarTextAlign } from 'vant';
 ```

 ## 主题定制
@@ -1,9 +1,4 @@
-import {
-  PropType,
-  CSSProperties,
-  defineComponent,
-  ExtractPropTypes,
-} from 'vue';
+import { PropType, defineComponent, ExtractPropTypes } from 'vue';
 import {
  truthProp,
  makeStringProp,
@@ -17,6 +12,8 @@ import { Button, ButtonType } from '../button';

 const [name, bem, t] = createNamespace('submit-bar');

+export type SubmitBarTextAlign = 'left' | 'right';
+
 const submitBarProps = {
  tip: String,
  label: String,
@@ -25,7 +22,7 @@ const submitBarProps = {
  loading: Boolean,
  currency: makeStringProp('¥'),
  disabled: Boolean,
-  textAlign: String as PropType<CSSProperties['textAlign']>,
+  textAlign: String as PropType<SubmitBarTextAlign>,
  buttonText: String,
  buttonType: makeStringProp<ButtonType>('danger'),
  buttonColor: String,
@@ -3,3 +3,4 @@ import _SubmitBar from './SubmitBar';

 export const SubmitBar = withInstall(_SubmitBar);
 export default SubmitBar;
+export type { SubmitBarProps, SubmitBarTextAlign } from './SubmitBar';
@@ -272,13 +272,6 @@ export default defineComponent({
      const { title, disabled } = children[index];
      const name = getTabName(children[index], index);

-      emit('click-tab', {
-        name,
-        title,
-        event,
-        disabled,
-      });
-
      if (!disabled) {
        callInterceptor(props.beforeChange, {
          args: [name],
@@ -290,6 +283,13 @@ export default defineComponent({

        route(item as ComponentPublicInstance<RouteProps>);
      }
+
+      emit('click-tab', {
+        name,
+        title,
+        event,
+        disabled,
+      });
    };

    const onStickyScroll = (params: {
@@ -4,6 +4,7 @@ export default {
    srcDir: 'src',
    namedExport: true,
    skipInstall: ['lazyload'],
+    packageManager: 'pnpm',
    site: {
      publicPath:
        (typeof window === 'undefined' && process.env.PUBLIC_PATH) ||