docs/markdown/changelog.en-US.md

@@ -16,24 +16,6 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
 
 ## Details
 
-### [v3.0.11](https://github.com/youzan/vant/compare/v3.0.10...v3.0.11)
-
-`2021-03-30`
-
-**Feature**
-
-- Cascader: add swipeable prop [#8383](https://github.com/youzan/vant/issues/8383)
-- Dialog: add footer slot [#8382](https://github.com/youzan/vant/issues/8382)
-- Dialog: allow to render JSX message [#8420](https://github.com/youzan/vant/issues/8420)
-- Image: add icon-size prop [#8395](https://github.com/youzan/vant/issues/8395)
-- Row: add wrap prop [#8393](https://github.com/youzan/vant/issues/8393)
-
-**Bug Fixes**
-
-- Field: should not reset validation after blured [#8409](https://github.com/youzan/vant/issues/8409)
-- Sticky: Element not exist during SSR [#8407](https://github.com/youzan/vant/issues/8407)
-- Tabs: incorrect horizontal slip judgment [#8388](https://github.com/youzan/vant/issues/8388)
-
 ### [v3.0.10](https://github.com/youzan/vant/compare/v3.0.9...v3.0.10)
 
 `2021-03-19`

docs/markdown/changelog.zh-CN.md

@@ -16,24 +16,6 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
 
 ## 更新内容
 
-### [v3.0.11](https://github.com/youzan/vant/compare/v3.0.10...v3.0.11)
-
-`2021-03-30`
-
-**Feature**
-
-- Cascader: 新增 swipeable 属性 [#8383](https://github.com/youzan/vant/issues/8383)
-- Dialog: 新增 footer 插槽 [#8382](https://github.com/youzan/vant/issues/8382)
-- Dialog: 支持在 message 中传入 render 函数 [#8420](https://github.com/youzan/vant/issues/8420)
-- Image: 新增 icon-size 属性 [#8395](https://github.com/youzan/vant/issues/8395)
-- Row: 新增 wrap 属性 [#8393](https://github.com/youzan/vant/issues/8393)
-
-**Bug Fixes**
-
-- Field: 修复在个别情况下错误地清除错误提示的问题 [#8409](https://github.com/youzan/vant/issues/8409)
-- Sticky: 修复在 SSR 时提示 Element 不存在的问题 [#8407](https://github.com/youzan/vant/issues/8407)
-- Tabs: 修复在 safari 上左滑退出页面时手势判断错误的问题 [#8388](https://github.com/youzan/vant/issues/8388)
-
 ### [v3.0.10](https://github.com/youzan/vant/compare/v3.0.9...v3.0.10)
 
 `2021-03-19`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vant",
-  "version": "3.0.11",
+  "version": "3.0.10",
   "description": "Mobile UI Components built on Vue",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -65,7 +65,7 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@vant/cli": "^3.8.0",
+    "@vant/cli": "^3.7.1",
     "@vue/compiler-sfc": "^3.0.6",
     "prettier": "2.1.0",
     "vue": "^3.0.6"

packages/vant-cli/changelog.md

@@ -1,11 +1,5 @@
 # 更新日志
 
-## v3.8.0
-
-`2021-04-02`
-
-- 修复生成 vetur 配置和 web-types 配置不正确的问题
-
 ## v3.7.1
 
 `2021-03-18`

packages/vant-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vant/cli",
-  "version": "3.8.0",
+  "version": "3.7.1",
   "description": "",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -50,7 +50,7 @@
     "@types/webpack-dev-server": "^3.11.1",
     "@vant/eslint-config": "^3.2.0",
     "@vant/markdown-loader": "^4.0.0",
-    "@vant/markdown-vetur": "^2.1.0",
+    "@vant/markdown-vetur": "^2.0.2",
     "@vant/stylelint-config": "^1.4.2",
     "@vant/touch-emulator": "^1.2.0",
     "@vue/babel-plugin-jsx": "^1.0.1",

packages/vant-cli/src/commands/jest.ts

@@ -15,18 +15,15 @@ export function test(command: any) {
     watch: command.watch,
     config: JEST_CONFIG_FILE,
     clearCache: command.clearCache,
-    // make jest tests faster
-    // see: https://ivantanev.com/make-jest-faster/
-    maxWorkers: '50%',
   } as any;
 
   runCLI(config, [ROOT])
-    .then((response) => {
+    .then(response => {
       if (!response.results.success && !command.watch) {
         process.exit(1);
       }
     })
-    .catch((err) => {
+    .catch(err => {
       console.log(err);
 
       if (!command.watch) {

packages/vant-cli/yarn.lock

@@ -1892,10 +1892,10 @@
     markdown-it-anchor "^6.0.0"
     transliteration "^2.1.11"
 
-"@vant/markdown-vetur@^2.1.0":
+"@vant/markdown-vetur@^2.0.2":
-  version "2.1.0"
+  version "2.0.2"
-  resolved "https://registry.npm.taobao.org/@vant/markdown-vetur/download/@vant/markdown-vetur-2.1.0.tgz?cache=0&sync_timestamp=1617347165035&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vant%2Fmarkdown-vetur%2Fdownload%2F%40vant%2Fmarkdown-vetur-2.1.0.tgz#cc49ad807dfcccca898562966d64b7a657ca3aad"
+  resolved "https://registry.npm.taobao.org/@vant/markdown-vetur/download/@vant/markdown-vetur-2.0.2.tgz#8e6be188952a2c4b0e1d626bf93f47f84ab0f22d"
-  integrity sha1-zEmtgH38zMqJhWKWbWS3plfKOq0=
+  integrity sha1-jmvhiJUqLEsOHWJr+T9H+Eqw8i0=
   dependencies:
     fast-glob "^3.2.2"
     fs-extra "^9.0.0"
@@ -10892,9 +10892,9 @@ xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
 y18n@^4.0.0:
-  version "4.0.1"
+  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.1.tgz#8db2b83c31c5d75099bb890b23f3094891e247d4"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
-  integrity sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ==
+  integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==
 
 yallist@^4.0.0:
   version "4.0.0"

packages/vant-icons/yarn.lock

@@ -5156,9 +5156,9 @@ xtend@~4.0.0, xtend@~4.0.1:
   integrity sha1-pcbVMr5lbiPbgg77lDofBJmNY68=
 
 y18n@^3.2.1:
-  version "3.2.2"
+  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.2.tgz#85c901bd6470ce71fc4bb723ad209b70f7f28696"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
-  integrity sha512-uGZHXkHnhF0XeeAPgnKfPv1bgKAYyVvmNL1xlKsPYZPaIHxGti2hHqvOCQv71XMsLxu1QjergkqogUnms5D3YQ==
+  integrity sha1-bRX7qITAhnnA136I53WegR4H+kE=
 
 yallist@^3.0.0, yallist@^3.0.3:
   version "3.0.3"

packages/vant-markdown-loader/yarn.lock

@@ -263,9 +263,9 @@ wrap-ansi@^6.2.0:
     strip-ansi "^6.0.0"
 
 y18n@^4.0.0:
-  version "4.0.1"
+  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.1.tgz#8db2b83c31c5d75099bb890b23f3094891e247d4"
+  resolved "https://registry.npm.taobao.org/y18n/download/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
-  integrity sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ==
+  integrity sha1-le+U+F7MgdAHwmThkKEg8KPIVms=
 
 yargs-parser@^18.1.2:
   version "18.1.3"

packages/vant-markdown-vetur/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vant/markdown-vetur",
-  "version": "2.1.0",
+  "version": "2.0.2",
   "description": "simple parse markdown to vue component description for vetur auto-completion",
   "main": "lib/index.js",
   "license": "MIT",

packages/vant-markdown-vetur/src/formatter.ts

@@ -1,54 +1,30 @@
 /* eslint-disable no-continue */
-import { Articals } from './parser';
+import { Artical, Articals } from './parser';
 import { formatType, removeVersion, toKebabCase } from './utils';
 import { VueTag } from './type';
 
-function formatComponentName(name: string, tagPrefix: string) {
+function getComponentName(artical: Artical, tagPrefix: string) {
-  return tagPrefix + toKebabCase(name);
+  if (artical.content) {
+    return tagPrefix + toKebabCase(artical.content.split(' ')[0]);
+  }
+  return '';
 }
 
-function getNameFromTableTitle(tableTitle: string, tagPrefix: string) {
+export function formatter(articals: Articals, tagPrefix: string = '') {
-  tableTitle = tableTitle.trim();
+  if (!articals.length) {
-  if (tableTitle.includes(' ')) {
+    return;
-    return formatComponentName(tableTitle, tagPrefix).split(' ')[0];
-  }
   }
 
-function findTag(vueTags: VueTag[], name: string) {
+  const tag: VueTag = {
-  const matched = vueTags.find((item) => item.name === name);
+    name: getComponentName(articals[0], tagPrefix),
-
-  if (matched) {
-    return matched;
-  }
-
-  const newTag: VueTag = {
-    name,
     slots: [],
     events: [],
     attributes: [],
   };
 
-  vueTags.push(newTag);
+  const tables = articals.filter(artical => artical.type === 'table');
 
-  return newTag;
+  tables.forEach(item => {
-}
-
-export function formatter(
-  vueTags: VueTag[],
-  articals: Articals,
-  tagPrefix = ''
-) {
-  if (!articals.length) {
-    return;
-  }
-
-  const mainTitle = articals[0].content;
-  const defaultName = mainTitle
-    ? formatComponentName(mainTitle.split(' ')[0], tagPrefix)
-    : '';
-  const tables = articals.filter((artical) => artical.type === 'table');
-
-  tables.forEach((item) => {
     const { table } = item;
     const prevIndex = articals.indexOf(item) - 1;
     const prevArtical = articals[prevIndex];
@@ -60,10 +36,7 @@ export function formatter(
     const tableTitle = prevArtical.content;
 
     if (tableTitle.includes('Props')) {
-      const name = getNameFromTableTitle(tableTitle, tagPrefix) || defaultName;
+      table.body.forEach(line => {
-      const tag = findTag(vueTags, name);
-
-      table.body.forEach((line) => {
         const [name, desc, type, defaultVal] = line;
         tag.attributes!.push({
           name: removeVersion(name),
@@ -79,10 +52,7 @@ export function formatter(
     }
 
     if (tableTitle.includes('Events')) {
-      const name = getNameFromTableTitle(tableTitle, tagPrefix) || defaultName;
+      table.body.forEach(line => {
-      const tag = findTag(vueTags, name);
-
-      table.body.forEach((line) => {
         const [name, desc] = line;
         tag.events!.push({
           name: removeVersion(name),
@@ -93,10 +63,7 @@ export function formatter(
     }
 
     if (tableTitle.includes('Slots')) {
-      const name = getNameFromTableTitle(tableTitle, tagPrefix) || defaultName;
+      table.body.forEach(line => {
-      const tag = findTag(vueTags, name);
-
-      table.body.forEach((line) => {
         const [name, desc] = line;
         tag.slots!.push({
           name: removeVersion(name),
@@ -105,4 +72,6 @@ export function formatter(
       });
     }
   });
+
+  return tag;
 }

packages/vant-markdown-vetur/src/index.ts

@@ -11,8 +11,8 @@ import { genVeturTags, genVeturAttributes } from './vetur';
 async function readMarkdown(options: Options) {
   const mds = await glob(normalizePath(`${options.path}/**/*.md`));
   return mds
-    .filter((md) => options.test.test(md))
+    .filter(md => options.test.test(md))
-    .map((path) => readFileSync(path, 'utf-8'));
+    .map(path => readFileSync(path, 'utf-8'));
 }
 
 export async function parseAndWrite(options: Options) {
@@ -21,16 +21,13 @@ export async function parseAndWrite(options: Options) {
   }
 
   const mds = await readMarkdown(options);
-  const vueTags: VueTag[] = [];
+  const datas = mds
+    .map(md => formatter(mdParser(md), options.tagPrefix))
+    .filter(item => !!item) as VueTag[];
 
-  mds.forEach((md) => {
+  const webTypes = genWebTypes(datas, options);
-    const parsedMd = mdParser(md);
+  const veturTags = genVeturTags(datas);
-    formatter(vueTags, parsedMd, options.tagPrefix);
+  const veturAttributes = genVeturAttributes(datas);
-  });
-
-  const webTypes = genWebTypes(vueTags, options);
-  const veturTags = genVeturTags(vueTags);
-  const veturAttributes = genVeturAttributes(vueTags);
 
   outputFileSync(
     join(options.outputDir, 'tags.json'),

src/address-edit/AddressEdit.tsx

@@ -381,15 +381,15 @@ export default defineComponent({
               onBlur={onDetailBlur}
               onFocus={() => onFocus('addressDetail')}
               onInput={onChangeDetail}
-              onSelectSearch={(event: Event) => emit('select-search', event)}
+              onSelect-search={(event: Event) => emit('select-search', event)}
             />
             {props.showPostal && (
               <Field
                 v-show={!hideBottomFields.value}
                 v-model={data.postalCode}
                 type="tel"
-                label={t('postal')}
                 maxlength="6"
+                label={t('postal')}
                 placeholder={t('postal')}
                 errorMessage={errorInfo.postalCode}
                 onFocus={() => onFocus('postalCode')}
@@ -402,9 +402,9 @@ export default defineComponent({
             <Button
               block
               round
+              loading={props.isSaving}
               type="danger"
               text={props.saveButtonText || t('save')}
-              loading={props.isSaving}
               onClick={onSave}
             />
             {props.showDelete && (

src/calendar/README.md

@@ -268,7 +268,7 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i
 | confirm-disabled-text | Confirm button text when disabled | _string_ | `Confirm` |
 | first-day-of-week | Set the start day of week | _0-6_ | `0` |
 
-### Calendar Poppable Props
+### Poppable Props
 
 Following props are supported when the poppable is true
 
@@ -282,7 +282,7 @@ Following props are supported when the poppable is true
 | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
 | teleport | Return the mount node for Calendar | _string \| Element_ | - |
 
-### Calendar Range Props
+### Range Props
 
 Following props are supported when the type is range
 
@@ -292,7 +292,7 @@ Following props are supported when the type is range
 | range-prompt | Error message when exceeded max range | _string_ | `Choose no more than xx days` |
 | allow-same-day | Whether the start and end time of the range is allowed on the same day | _boolean_ | `false` |
 
-### Calendar Multiple Props
+### Multiple Props
 
 Following props are supported when the type is multiple
 

src/calendar/README.zh-CN.md

@@ -272,7 +272,7 @@ export default {
 | confirm-disabled-text | 确认按钮处于禁用状态时的文字 | _string_ | `确定` |
 | first-day-of-week | 设置周起始日 | _0-6_ | `0` |
 
-### Calendar Poppable Props
+### Poppable Props
 
 当 Canlendar 的 `poppable` 为 `true` 时，支持以下 props:
 
@@ -286,7 +286,7 @@ export default {
 | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |
 | teleport | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| Element_ | - |
 
-### Calendar Range Props
+### Range Props
 
 当 Canlendar 的 `type` 为 `range` 时，支持以下 props:
 
@@ -296,7 +296,7 @@ export default {
 | range-prompt | 范围选择超过最多可选天数时的提示文案 | _string_ | `选择天数不能超过 xx 天` |
 | allow-same-day | 是否允许日期范围的起止时间为同一天 | _boolean_ | `false` |
 
-### Calendar Multiple Props
+### Multiple Props
 
 当 Canlendar 的 `type` 为 `multiple` 时，支持以下 props:
 

src/collapse-item/CollapseItem.tsx

@@ -2,7 +2,7 @@ import { ref, watch, computed, nextTick, defineComponent } from 'vue';
 
 // Utils
 import { cellProps } from '../cell/Cell';
-import { createNamespace, pick } from '../utils';
+import { createNamespace } from '../utils';
 import { COLLAPSE_KEY, CollapseProvide } from '../collapse/Collapse';
 
 // Composables
@@ -22,7 +22,6 @@ export default defineComponent({
     ...cellProps,
     name: [Number, String],
     disabled: Boolean,
-    readonly: Boolean,
     isLink: {
       type: Boolean,
       default: true,
@@ -95,24 +94,13 @@ export default defineComponent({
     };
 
     const onClickTitle = () => {
-      if (!props.disabled && !props.readonly) {
+      if (!props.disabled) {
         toggle();
       }
     };
 
     const renderTitle = () => {
-      const { border, disabled, readonly } = props;
+      const { border, disabled } = props;
-      const attrs = pick(
-        props,
-        Object.keys(cellProps) as Array<keyof typeof cellProps>
-      );
-
-      if (readonly) {
-        attrs.isLink = false;
-      }
-      if (disabled || readonly) {
-        attrs.clickable = false;
-      }
 
       return (
         <Cell
@@ -128,9 +116,10 @@ export default defineComponent({
             expanded: expanded.value,
             borderless: !border,
           })}
+          tabindex={disabled ? -1 : 0}
           aria-expanded={String(expanded.value)}
           onClick={onClickTitle}
-          {...attrs}
+          {...props}
         />
       );
     };

src/collapse-item/index.less

@@ -44,6 +44,10 @@
       & .van-cell__right-icon {
         color: @collapse-item-title-disabled-color;
       }
+
+      &:active {
+        background-color: @white;
+      }
     }
   }
 

src/collapse/README.md

@@ -132,7 +132,6 @@ export default {
 | label | Description below the title | _string_ | - |
 | border | Whether to show inner border | _boolean_ | `true` |
 | disabled | Whether to disabled collapse | _boolean_ | `false` |
-| readonly `v3.0.12` | Whether to be readonly | _boolean_ | `false` |
 | is-link | Whether to show link icon | _boolean_ | `true` |
 | title-class | Title className | _string_ | - |
 | value-class | Value className | _string_ | - |

src/collapse/README.zh-CN.md

@@ -135,7 +135,6 @@ export default {
 | border | 是否显示内边框 | _boolean_ | `true` |
 | is-link | 是否展示标题栏右侧箭头并开启点击反馈 | _boolean_ | `true` |
 | disabled | 是否禁用面板 | _boolean_ | `false` |
-| readonly `v3.0.12` | 是否为只读状态，只读状态下无法操作面板 | _boolean_ | `false` |
 | title-class | 左侧标题额外类名 | _string_ | - |
 | value-class | 右侧内容额外类名 | _string_ | - |
 | label-class | 描述信息额外类名 | _string_ | - |

src/collapse/test/__snapshots__/demo.spec.ts.snap

@@ -8,6 +8,7 @@ exports[`should render demo and match snapshot 1`] = `
            role="button"
            tabindex="0"
            aria-expanded="true"
+           disabled="false"
       >
         <div class="van-cell__title">
           <span>
@@ -28,6 +29,7 @@ exports[`should render demo and match snapshot 1`] = `
            role="button"
            tabindex="0"
            aria-expanded="false"
+           disabled="false"
       >
         <div class="van-cell__title">
           <span>
@@ -43,6 +45,7 @@ exports[`should render demo and match snapshot 1`] = `
            role="button"
            tabindex="0"
            aria-expanded="false"
+           disabled="false"
       >
         <div class="van-cell__title">
           <span>
@@ -62,6 +65,7 @@ exports[`should render demo and match snapshot 1`] = `
            role="button"
            tabindex="0"
            aria-expanded="true"
+           disabled="false"
       >
         <div class="van-cell__title">
           <span>
@@ -82,6 +86,7 @@ exports[`should render demo and match snapshot 1`] = `
            role="button"
            tabindex="0"
            aria-expanded="false"
+           disabled="false"
       >
         <div class="van-cell__title">
           <span>
@@ -97,6 +102,7 @@ exports[`should render demo and match snapshot 1`] = `
            role="button"
            tabindex="0"
            aria-expanded="false"
+           disabled="false"
       >
         <div class="van-cell__title">
           <span>
@@ -116,6 +122,7 @@ exports[`should render demo and match snapshot 1`] = `
            role="button"
            tabindex="0"
            aria-expanded="false"
+           disabled="false"
       >
         <div class="van-cell__title">
           <span>
@@ -127,9 +134,11 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
     </div>
     <div class="van-collapse-item van-collapse-item--border">
-      <div class="van-cell van-collapse-item__title van-collapse-item__title--disabled"
+      <div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled"
            role="button"
+           tabindex="-1"
            aria-expanded="false"
+           disabled="true"
       >
         <div class="van-cell__title">
           <span>
@@ -141,9 +150,11 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
     </div>
     <div class="van-collapse-item van-collapse-item--border">
-      <div class="van-cell van-collapse-item__title van-collapse-item__title--disabled"
+      <div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled"
            role="button"
+           tabindex="-1"
            aria-expanded="false"
+           disabled="true"
       >
         <div class="van-cell__title">
           <span>
@@ -163,6 +174,7 @@ exports[`should render demo and match snapshot 1`] = `
            role="button"
            tabindex="0"
            aria-expanded="false"
+           disabled="false"
       >
         <div class="van-cell__title">
           Title1
@@ -178,6 +190,7 @@ exports[`should render demo and match snapshot 1`] = `
            role="button"
            tabindex="0"
            aria-expanded="false"
+           disabled="false"
       >
         <i class="van-badge__wrapper van-icon van-icon-shop-o van-cell__left-icon">
         </i>

src/collapse/test/__snapshots__/index.spec.tsx.snap

@@ -7,6 +7,7 @@ exports[`should render slots of CollapseItem correctly 1`] = `
          role="button"
          tabindex="0"
          aria-expanded="false"
+         disabled="false"
     >
       this is icon
       <div class="van-cell__title">

src/collapse/test/index.spec.tsx

@@ -207,31 +207,3 @@ test('should toggle collapse after calling the toggle method in accordion mode',
   wrapper.vm.itemA.toggle();
   expect(wrapper.vm.active).toEqual('a');
 });
-
-test('should be readonly when using readonly prop', async () => {
-  const wrapper = mount({
-    data() {
-      return {
-        active: [],
-      };
-    },
-    render() {
-      return (
-        <Collapse v-model={this.active}>
-          <CollapseItem title="a" readonly>
-            content
-          </CollapseItem>
-        </Collapse>
-      );
-    },
-  });
-
-  const titles = wrapper.findAll('.van-collapse-item__title');
-  await titles[0].trigger('click');
-  expect(wrapper.vm.active).toEqual([]);
-  expect(wrapper.find('.van-collapse-item__title').classes()).not.toContain(
-    'van-cell--clickable'
-  );
-
-  wrapper.unmount();
-});

src/datetime-picker/README.md

@@ -35,7 +35,7 @@ import { ref } from 'vue';
 
 export default {
   setup() {
-    const currentDate = ref(new Date(2021, 0, 17));
+    const currentDate = ref(new Date());
     return {
       minDate: new Date(2020, 0, 1),
       maxDate: new Date(2025, 10, 1),

src/datetime-picker/README.zh-CN.md

@@ -37,7 +37,7 @@ import { ref } from 'vue';
 
 export default {
   setup() {
-    const currentDate = ref(new Date(2021, 0, 17));
+    const currentDate = ref(new Date());
     return {
       minDate: new Date(2020, 0, 1),
       maxDate: new Date(2025, 10, 1),

src/datetime-picker/demo/index.vue

@@ -120,7 +120,7 @@ export default {
   setup() {
     const t = useTranslate(i18n);
     const value = reactive({
-      date: new Date(2021, 0, 17),
+      date: null,
       time: '12:00',
       datetime: new Date(2020, 0, 1),
       datehour: new Date(2020, 0, 1),

src/datetime-picker/test/__snapshots__/demo.spec.ts.snap

@@ -22,13 +22,13 @@ exports[`should render demo and match snapshot 1`] = `
          style="height: 264px;"
     >
       <div class="van-picker-column">
-        <ul style="transform: translate3d(0, 66px, 0); transition-duration: 0ms; transition-property: none;"
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
             class="van-picker-column__wrapper"
         >
           <li role="button"
               style="height: 44px;"
               tabindex="0"
-              class="van-picker-column__item"
+              class="van-picker-column__item van-picker-column__item--selected"
           >
             <div class="van-ellipsis">
               2020
@@ -37,7 +37,7 @@ exports[`should render demo and match snapshot 1`] = `
           <li role="button"
               style="height: 44px;"
               tabindex="0"
-              class="van-picker-column__item van-picker-column__item--selected"
+              class="van-picker-column__item"
           >
             <div class="van-ellipsis">
               2021
@@ -196,13 +196,13 @@ exports[`should render demo and match snapshot 1`] = `
         </ul>
       </div>
       <div class="van-picker-column">
-        <ul style="transform: translate3d(0, -594px, 0); transition-duration: 0ms; transition-property: none;"
+        <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
             class="van-picker-column__wrapper"
         >
           <li role="button"
               style="height: 44px;"
               tabindex="0"
-              class="van-picker-column__item"
+              class="van-picker-column__item van-picker-column__item--selected"
           >
             <div class="van-ellipsis">
               01
@@ -346,7 +346,7 @@ exports[`should render demo and match snapshot 1`] = `
           <li role="button"
               style="height: 44px;"
               tabindex="0"
-              class="van-picker-column__item van-picker-column__item--selected"
+              class="van-picker-column__item"
           >
             <div class="van-ellipsis">
               17

src/dialog/Dialog.tsx

@@ -2,13 +2,7 @@ import { PropType, reactive, defineComponent } from 'vue';
 
 // Utils
 import { callInterceptor, Interceptor } from '../utils/interceptor';
-import {
+import { createNamespace, addUnit, pick, UnknownProp } from '../utils';
-  pick,
-  addUnit,
-  isFunction,
-  UnknownProp,
-  createNamespace,
-} from '../utils';
 import { BORDER_TOP, BORDER_LEFT } from '../utils/constant';
 import { popupSharedProps, popupSharedPropKeys } from '../popup/shared';
 
@@ -22,7 +16,6 @@ const [name, bem, t] = createNamespace('dialog');
 
 export type DialogTheme = 'default' | 'round-button';
 export type DialogAction = 'confirm' | 'cancel';
-export type DialogMessage = string | (() => JSX.Element);
 export type DialogMessageAlign = 'left' | 'center' | 'right';
 
 const popupKeys = [
@@ -39,7 +32,7 @@ export default defineComponent({
     title: String,
     theme: String as PropType<DialogTheme>,
     width: [Number, String],
-    message: [String, Function] as PropType<DialogMessage>,
+    message: String,
     callback: Function as PropType<(action?: DialogAction) => void>,
     allowHtml: Boolean,
     className: UnknownProp,
@@ -126,31 +119,15 @@ export default defineComponent({
       }
     };
 
-    const renderMessage = (hasTitle: boolean) => {
-      const { message, allowHtml, messageAlign } = props;
-      const classNames = bem('message', {
-        'has-title': hasTitle,
-        [messageAlign as string]: messageAlign,
-      });
-
-      if (allowHtml && typeof message === 'string') {
-        return <div class={classNames} innerHTML={message} />;
-      }
-      return (
-        <div class={classNames}>
-          {isFunction(message) ? message() : message}
-        </div>
-      );
-    };
-
     const renderContent = () => {
       if (slots.default) {
         return <div class={bem('content')}>{slots.default()}</div>;
       }
 
-      const { title, message, allowHtml } = props;
+      const { title, message, allowHtml, messageAlign } = props;
       if (message) {
-        const hasTitle = !!(title || slots.title);
+        const hasTitle = title || slots.title;
+
         return (
           <div
             // add key to force re-render
@@ -158,7 +135,15 @@ export default defineComponent({
             key={allowHtml ? 1 : 0}
             class={bem('content', { isolated: !hasTitle })}
           >
-            {renderMessage(hasTitle)}
+            <div
+              class={bem('message', {
+                'has-title': hasTitle,
+                [messageAlign as string]: messageAlign,
+              })}
+              {...{
+                [allowHtml ? 'innerHTML' : 'textContent']: message,
+              }}
+            />
           </div>
         );
       }

src/dialog/README.md

@@ -142,7 +142,7 @@ export default {
 | --- | --- | --- | --- |
 | title | Title | _string_ | - |
 | width | Dialog width | _number \| string_ | `320px` |
-| message | Message | _string \| () => JSX.ELement_ | - |
+| message | Message | _string_ | - |
 | messageAlign | Message text align，can be set to `left` `right` | _string_ | `center` |
 | theme | Theme style，can be set to `round-button` | _string_ | `default` |
 | className | Custom className | _string \| Array \| object_ | - |
@@ -170,7 +170,7 @@ export default {
 | v-model:show | Whether to show dialog | _boolean_ | - |
 | title | Title | _string_ | - |
 | width | Width | _number \| string_ | `320px` |
-| message | Message | _string \| () => JSX.ELement_ | - |
+| message | Message | _string_ | - |
 | message-align | Message align，can be set to `left` `right` | _string_ | `center` |
 | theme | Theme style，can be set to `round-button` | _string_ | `default` |
 | show-confirm-button | Whether to show confirm button | _boolean_ | `true` |

src/dialog/README.zh-CN.md

@@ -175,7 +175,7 @@ export default {
 | --- | --- | --- | --- |
 | title | 标题 | _string_ | - |
 | width | 弹窗宽度，默认单位为 `px` | _number \| string_ | `320px` |
-| message | 文本内容，支持通过 `\n` 换行 | _string \| () => JSX.ELement_ | - |
+| message | 文本内容，支持通过 `\n` 换行 | _string_ | - |
 | messageAlign | 内容对齐方式，可选值为 `left` `right` | _string_ | `center` |
 | theme | 样式风格，可选值为 `round-button` | _string_ | `default` |
 | className | 自定义类名 | _string \| Array \| object_ | - |
@@ -205,8 +205,8 @@ export default {
 | v-model:show | 是否显示弹窗 | _boolean_ | - |
 | title | 标题 | _string_ | - |
 | width | 弹窗宽度，默认单位为 `px` | _number \| string_ | `320px` |
-| message | 文本内容，支持通过 `\n` 换行 | _string \| () => JSX.ELement_ | - |
+| message | 文本内容，支持通过 `\n` 换行 | _string_ | - |
-| message-align | 内容水平对齐方式，可选值为 `left` `right` | _string_ | `center` |
+| message-align | 内容对齐方式，可选值为 `left` `right` | _string_ | `center` |
 | theme | 样式风格，可选值为 `round-button` | _string_ | `default` |
 | show-confirm-button | 是否展示确认按钮 | _boolean_ | `true` |
 | show-cancel-button | 是否展示取消按钮 | _boolean_ | `false` |

src/dialog/function-call.tsx

@@ -1,130 +0,0 @@
-import { App, CSSProperties, TeleportProps } from 'vue';
-import { inBrowser, ComponentInstance, withInstall } from '../utils';
-import { Interceptor } from '../utils/interceptor';
-import { mountComponent, usePopupState } from '../utils/mount-component';
-import VanDialog, {
-  DialogTheme,
-  DialogAction,
-  DialogMessage,
-  DialogMessageAlign,
-} from './Dialog';
-
-export type DialogOptions = {
-  title?: string;
-  width?: string | number;
-  theme?: DialogTheme;
-  message?: DialogMessage;
-  overlay?: boolean;
-  teleport?: TeleportProps['to'];
-  className?: unknown;
-  allowHtml?: boolean;
-  lockScroll?: boolean;
-  transition?: string;
-  beforeClose?: Interceptor;
-  messageAlign?: DialogMessageAlign;
-  overlayClass?: string;
-  overlayStyle?: CSSProperties;
-  closeOnPopstate?: boolean;
-  cancelButtonText?: string;
-  showCancelButton?: boolean;
-  showConfirmButton?: boolean;
-  cancelButtonColor?: string;
-  confirmButtonText?: string;
-  confirmButtonColor?: string;
-  closeOnClickOverlay?: boolean;
-};
-
-let instance: ComponentInstance;
-
-function initInstance() {
-  const Wrapper = {
-    setup() {
-      const { state, toggle } = usePopupState();
-      return () => <VanDialog {...{ ...state, 'onUpdate:show': toggle }} />;
-    },
-  };
-
-  ({ instance } = mountComponent(Wrapper));
-}
-
-function Dialog(options: DialogOptions) {
-  /* istanbul ignore if */
-  if (!inBrowser) {
-    return Promise.resolve();
-  }
-
-  return new Promise((resolve, reject) => {
-    if (!instance) {
-      initInstance();
-    }
-
-    instance.open({
-      ...Dialog.currentOptions,
-      ...options,
-      callback: (action: DialogAction) => {
-        (action === 'confirm' ? resolve : reject)(action);
-      },
-    });
-  });
-}
-
-Dialog.defaultOptions = {
-  title: '',
-  width: '',
-  theme: null,
-  message: '',
-  overlay: true,
-  callback: null,
-  teleport: 'body',
-  className: '',
-  allowHtml: false,
-  lockScroll: true,
-  transition: 'van-dialog-bounce',
-  beforeClose: null,
-  overlayClass: '',
-  overlayStyle: undefined,
-  messageAlign: '',
-  cancelButtonText: '',
-  cancelButtonColor: null,
-  confirmButtonText: '',
-  confirmButtonColor: null,
-  showConfirmButton: true,
-  showCancelButton: false,
-  closeOnPopstate: true,
-  closeOnClickOverlay: false,
-};
-
-Dialog.currentOptions = {
-  ...Dialog.defaultOptions,
-};
-
-Dialog.alert = Dialog;
-
-Dialog.confirm = (options: DialogOptions) =>
-  Dialog({
-    showCancelButton: true,
-    ...options,
-  });
-
-Dialog.close = () => {
-  if (instance) {
-    instance.toggle(false);
-  }
-};
-
-Dialog.setDefaultOptions = (options: DialogOptions) => {
-  Object.assign(Dialog.currentOptions, options);
-};
-
-Dialog.resetDefaultOptions = () => {
-  Dialog.currentOptions = { ...Dialog.defaultOptions };
-};
-
-Dialog.install = (app: App) => {
-  app.use(withInstall<typeof VanDialog>(VanDialog));
-  app.config.globalProperties.$dialog = Dialog;
-};
-
-Dialog.Component = withInstall<typeof VanDialog>(VanDialog);
-
-export { Dialog };

src/dialog/index.tsx

@@ -1,6 +1,131 @@
-import { Dialog, DialogOptions } from './function-call';
+import { App, CSSProperties, TeleportProps } from 'vue';
-import type { DialogTheme, DialogMessage, DialogMessageAlign } from './Dialog';
+import { inBrowser, ComponentInstance, withInstall } from '../utils';
+import { Interceptor } from '../utils/interceptor';
+import { mountComponent, usePopupState } from '../utils/mount-component';
+import VanDialog, {
+  DialogTheme,
+  DialogAction,
+  DialogMessageAlign,
+} from './Dialog';
+
+export type DialogOptions = {
+  title?: string;
+  width?: string | number;
+  theme?: DialogTheme;
+  message?: string;
+  overlay?: boolean;
+  teleport?: TeleportProps['to'];
+  className?: unknown;
+  allowHtml?: boolean;
+  lockScroll?: boolean;
+  transition?: string;
+  beforeClose?: Interceptor;
+  messageAlign?: DialogMessageAlign;
+  overlayClass?: string;
+  overlayStyle?: CSSProperties;
+  closeOnPopstate?: boolean;
+  cancelButtonText?: string;
+  showCancelButton?: boolean;
+  showConfirmButton?: boolean;
+  cancelButtonColor?: string;
+  confirmButtonText?: string;
+  confirmButtonColor?: string;
+  closeOnClickOverlay?: boolean;
+};
+
+let instance: ComponentInstance;
+
+function initInstance() {
+  const Wrapper = {
+    setup() {
+      const { state, toggle } = usePopupState();
+      return () => <VanDialog {...{ ...state, 'onUpdate:show': toggle }} />;
+    },
+  };
+
+  ({ instance } = mountComponent(Wrapper));
+}
+
+function Dialog(options: DialogOptions) {
+  /* istanbul ignore if */
+  if (!inBrowser) {
+    return Promise.resolve();
+  }
+
+  return new Promise((resolve, reject) => {
+    if (!instance) {
+      initInstance();
+    }
+
+    instance.open({
+      ...Dialog.currentOptions,
+      ...options,
+      callback: (action: DialogAction) => {
+        (action === 'confirm' ? resolve : reject)(action);
+      },
+    });
+  });
+}
+
+Dialog.defaultOptions = {
+  title: '',
+  width: '',
+  theme: null,
+  message: '',
+  overlay: true,
+  callback: null,
+  teleport: 'body',
+  className: '',
+  allowHtml: false,
+  lockScroll: true,
+  transition: 'van-dialog-bounce',
+  beforeClose: null,
+  overlayClass: '',
+  overlayStyle: undefined,
+  messageAlign: '',
+  cancelButtonText: '',
+  cancelButtonColor: null,
+  confirmButtonText: '',
+  confirmButtonColor: null,
+  showConfirmButton: true,
+  showCancelButton: false,
+  closeOnPopstate: true,
+  closeOnClickOverlay: false,
+};
+
+Dialog.currentOptions = {
+  ...Dialog.defaultOptions,
+};
+
+Dialog.alert = Dialog;
+
+Dialog.confirm = (options: DialogOptions) =>
+  Dialog({
+    showCancelButton: true,
+    ...options,
+  });
+
+Dialog.close = () => {
+  if (instance) {
+    instance.toggle(false);
+  }
+};
+
+Dialog.setDefaultOptions = (options: DialogOptions) => {
+  Object.assign(Dialog.currentOptions, options);
+};
+
+Dialog.resetDefaultOptions = () => {
+  Dialog.currentOptions = { ...Dialog.defaultOptions };
+};
+
+Dialog.install = (app: App) => {
+  app.use(withInstall<typeof VanDialog>(VanDialog));
+  app.config.globalProperties.$dialog = Dialog;
+};
+
+Dialog.Component = withInstall<typeof VanDialog>(VanDialog);
 
 export default Dialog;
 export { Dialog };
-export type { DialogTheme, DialogMessage, DialogOptions, DialogMessageAlign };
+export type { DialogTheme, DialogMessageAlign };

src/dialog/test/__snapshots__/funciton-call.spec.js.snap

@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should allow to render JSX message 1`] = `
-<div class="van-dialog__message">
-  <div>
-    foo
-  </div>
-</div>
-`;

src/dialog/test/funciton-call.spec.js

@@ -1,6 +1,6 @@
 import { createApp } from 'vue';
 import { later } from '../../../test';
-import { Dialog } from '../function-call';
+import { Dialog } from '..';
 import DialogComponent from '../Dialog';
 
 test('should update default options when calling setDefaultOptions method', () => {
@@ -49,17 +49,3 @@ test('should close dialog after calling Dialog.call', async () => {
     'van-dialog-bounce-leave-active'
   );
 });
-
-test('should allow to render JSX message', async () => {
-  const wrapper = document.createElement('div');
-  Dialog.alert({
-    message: () => <div>foo</div>,
-    teleport: wrapper,
-  });
-
-  await later();
-  const dialog = wrapper.querySelector('.van-dialog');
-  expect(
-    dialog.querySelector('.van-dialog__message').outerHTML
-  ).toMatchSnapshot();
-});

src/dropdown-menu/test/__snapshots__/index.legacy.js.snap

@@ -0,0 +1,345 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`click option 1`] = `
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
+  </div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
+      <div class="van-overlay" style="z-index: 2013; animation-duration: 0.2s; position: absolute;" name="van-fade"></div>
+      <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none; z-index: 2014;" name="van-popup-slide-top">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
+          <div class="van-cell__title"><span>A</span></div>
+        </div>
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
+          <div class="van-cell__title"><span>B</span></div>
+          <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
+              <!----></i></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
+      <!---->
+    </div>
+  </div>
+</div>
+`;
+
+exports[`close-on-click-outside 1`] = `
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+  </div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
+      <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
+          <div class="van-cell__title"><span>A</span></div>
+          <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
+              <!----></i></div>
+        </div>
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
+          <div class="van-cell__title"><span>B</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
+      <!---->
+    </div>
+  </div>
+</div>
+`;
+
+exports[`destroy one item 1`] = `
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar">
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+  </div>
+  <!---->
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
+      <!---->
+    </div>
+  </div>
+</div>
+`;
+
+exports[`didn\`t find matched option 1`] = `
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar">
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
+  </div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
+      <!---->
+    </div>
+  </div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
+      <!---->
+    </div>
+  </div>
+</div>
+`;
+
+exports[`direction up 1`] = `
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar">
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
+  </div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--up" style="bottom: 0px; display: none;">
+      <!---->
+    </div>
+  </div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--up" style="bottom: 0px; display: none;">
+      <!---->
+    </div>
+  </div>
+</div>
+`;
+
+exports[`direction up 2`] = `
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active"><div class="van-ellipsis">A</div></span></div>
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
+  </div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--up" style="bottom: 1000px;">
+      <div class="van-popup van-popup--bottom van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-bottom">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
+          <div class="van-cell__title"><span>A</span></div>
+          <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
+              <!----></i></div>
+        </div>
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
+          <div class="van-cell__title"><span>B</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--up" style="bottom: 1000px; display: none;">
+      <!---->
+    </div>
+  </div>
+</div>
+`;
+
+exports[`disable close-on-click-outside 1`] = `
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+  </div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
+      <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
+          <div class="van-cell__title"><span>A</span></div>
+          <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
+              <!----></i></div>
+        </div>
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
+          <div class="van-cell__title"><span>B</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
+      <!---->
+    </div>
+  </div>
+</div>
+`;
+
+exports[`disable dropdown item 1`] = `
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar">
+    <div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+  </div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
+      <!---->
+    </div>
+  </div>
+</div>
+`;
+
+exports[`render option icon 1`] = `
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+  </div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
+      <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"><i class="van-icon van-icon-success van-cell__left-icon">
+            <!----></i>
+          <div class="van-cell__title"><span>A</span></div>
+          <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
+              <!----></i></div>
+        </div>
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option"><i class="van-icon van-icon-success van-cell__left-icon">
+            <!----></i>
+          <div class="van-cell__title"><span>B</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
+      <!---->
+    </div>
+  </div>
+</div>
+`;
+
+exports[`show dropdown item 1`] = `
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+  </div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
+      <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
+          <div class="van-cell__title"><span>A</span></div>
+          <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
+              <!----></i></div>
+        </div>
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
+          <div class="van-cell__title"><span>B</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
+      <!---->
+    </div>
+  </div>
+</div>
+`;
+
+exports[`show dropdown item 2`] = `
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
+  </div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
+      <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
+          <div class="van-cell__title"><span>A</span></div>
+          <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
+              <!----></i></div>
+        </div>
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
+          <div class="van-cell__title"><span>B</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
+      <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
+          <div class="van-cell__title"><span>A</span></div>
+          <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
+              <!----></i></div>
+        </div>
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
+          <div class="van-cell__title"><span>B</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`show dropdown item 3`] = `
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+  </div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
+      <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
+          <div class="van-cell__title"><span>A</span></div>
+          <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
+              <!----></i></div>
+        </div>
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
+          <div class="van-cell__title"><span>B</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
+      <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
+          <div class="van-cell__title"><span>A</span></div>
+          <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
+              <!----></i></div>
+        </div>
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
+          <div class="van-cell__title"><span>B</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`title prop 1`] = `
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar">
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">Title</div></span></div>
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">Title</div></span></div>
+  </div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
+      <!---->
+    </div>
+  </div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
+      <!---->
+    </div>
+  </div>
+</div>
+`;
+
+exports[`title slot 1`] = `
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar">
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">
+            Custom Title
+          </div></span></div>
+  </div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
+      <!---->
+    </div>
+  </div>
+</div>
+`;

src/dropdown-menu/test/__snapshots__/index.spec.tsx.snap

@@ -1,850 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`click option 1`] = `
-<div class="van-dropdown-menu">
-  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
-    <div role="button"
-         tabindex="0"
-         class="van-dropdown-menu__item"
-    >
-      <span class="van-dropdown-menu__title">
-        <div class="van-ellipsis">
-          A
-        </div>
-      </span>
-    </div>
-    <div role="button"
-         tabindex="0"
-         class="van-dropdown-menu__item"
-    >
-      <span class="van-dropdown-menu__title">
-        <div class="van-ellipsis">
-          A
-        </div>
-      </span>
-    </div>
-  </div>
-  <div style="top: 0px;"
-       class="van-dropdown-item van-dropdown-item--down"
-  >
-    <transition-stub>
-      <div style="z-index: 2007; position: absolute; animation-duration: 0.2s; display: none;"
-           class="van-overlay"
-      >
-      </div>
-    </transition-stub>
-    <transition-stub>
-      <div style="z-index: 2007; transition-duration: 0.2s; display: none;"
-           class="van-popup van-popup--top van-dropdown-item__content"
-      >
-        <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
-             role="button"
-             tabindex="0"
-        >
-          <div class="van-cell__title">
-            <span>
-              A
-            </span>
-          </div>
-          <div class="van-cell__value">
-            <i class="van-badge__wrapper van-icon van-icon-success van-dropdown-item__icon">
-            </i>
-          </div>
-        </div>
-        <div class="van-cell van-cell--clickable van-dropdown-item__option"
-             role="button"
-             tabindex="0"
-        >
-          <div class="van-cell__title">
-            <span>
-              B
-            </span>
-          </div>
-          <div class="van-cell__value">
-          </div>
-        </div>
-      </div>
-    </transition-stub>
-  </div>
-  <div style="top: 0px; display: none;"
-       class="van-dropdown-item van-dropdown-item--down"
-  >
-    <transition-stub>
-    </transition-stub>
-    <transition-stub>
-    </transition-stub>
-  </div>
-</div>
-`;
-
-exports[`close-on-click-outside 1`] = `
-<div class="van-dropdown-menu">
-  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
-    <div role="button"
-         tabindex="0"
-         class="van-dropdown-menu__item"
-    >
-      <span class="van-dropdown-menu__title">
-        <div class="van-ellipsis">
-          A
-        </div>
-      </span>
-    </div>
-    <div role="button"
-         tabindex="0"
-         class="van-dropdown-menu__item"
-    >
-      <span class="van-dropdown-menu__title">
-        <div class="van-ellipsis">
-          A
-        </div>
-      </span>
-    </div>
-  </div>
-  <div style="top: 0px;"
-       class="van-dropdown-item van-dropdown-item--down"
-  >
-    <transition-stub>
-      <div style="z-index: 2004; position: absolute; animation-duration: 0.2s; display: none;"
-           class="van-overlay"
-      >
-      </div>
-    </transition-stub>
-    <transition-stub>
-      <div style="z-index: 2004; transition-duration: 0.2s; display: none;"
-           class="van-popup van-popup--top van-dropdown-item__content"
-      >
-        <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
-             role="button"
-             tabindex="0"
-        >
-          <div class="van-cell__title">
-            <span>
-              A
-            </span>
-          </div>
-          <div class="van-cell__value">
-            <i class="van-badge__wrapper van-icon van-icon-success van-dropdown-item__icon">
-            </i>
-          </div>
-        </div>
-        <div class="van-cell van-cell--clickable van-dropdown-item__option"
-             role="button"
-             tabindex="0"
-        >
-          <div class="van-cell__title">
-            <span>
-              B
-            </span>
-          </div>
-          <div class="van-cell__value">
-          </div>
-        </div>
-      </div>
-    </transition-stub>
-  </div>
-  <div style="top: 0px; display: none;"
-       class="van-dropdown-item van-dropdown-item--down"
-  >
-    <transition-stub>
-    </transition-stub>
-    <transition-stub>
-    </transition-stub>
-  </div>
-</div>
-`;
-
-exports[`destroy one item 1`] = `
-<div class="van-dropdown-menu">
-  <div class="van-dropdown-menu__bar">
-    <div role="button"
-         tabindex="0"
-         class="van-dropdown-menu__item"
-    >
-      <span class="van-dropdown-menu__title">
-        <div class="van-ellipsis">
-          A
-        </div>
-      </span>
-    </div>
-  </div>
-  <div style="top: 0px; display: none;"
-       class="van-dropdown-item van-dropdown-item--down"
-  >
-    <transition-stub>
-    </transition-stub>
-    <transition-stub>
-    </transition-stub>
-  </div>
-</div>
-`;
-
-exports[`direction up 1`] = `
-<div class="van-dropdown-menu">
-  <div class="van-dropdown-menu__bar">
-    <div role="button"
-         tabindex="0"
-         class="van-dropdown-menu__item"
-    >
-      <span class="van-dropdown-menu__title van-dropdown-menu__title--down">
-        <div class="van-ellipsis">
-          A
-        </div>
-      </span>
-    </div>
-    <div role="button"
-         tabindex="0"
-         class="van-dropdown-menu__item"
-    >
-      <span class="van-dropdown-menu__title van-dropdown-menu__title--down">
-        <div class="van-ellipsis">
-          A
-        </div>
-      </span>
-    </div>
-  </div>
-  <div style="bottom: 0px; display: none;"
-       class="van-dropdown-item van-dropdown-item--up"
-  >
-    <transition-stub>
-    </transition-stub>
-    <transition-stub>
-    </transition-stub>
-  </div>
-  <div style="bottom: 0px; display: none;"
-       class="van-dropdown-item van-dropdown-item--up"
-  >
-    <transition-stub>
-    </transition-stub>
-    <transition-stub>
-    </transition-stub>
-  </div>
-</div>
-`;
-
-exports[`direction up 2`] = `
-<div class="van-dropdown-menu">
-  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
-    <div role="button"
-         tabindex="0"
-         class="van-dropdown-menu__item"
-    >
-      <span class="van-dropdown-menu__title van-dropdown-menu__title--active">
-        <div class="van-ellipsis">
-          A
-        </div>
-      </span>
-    </div>
-    <div role="button"
-         tabindex="0"
-         class="van-dropdown-menu__item"
-    >
-      <span class="van-dropdown-menu__title van-dropdown-menu__title--down">
-        <div class="van-ellipsis">
-          A
-        </div>
-      </span>
-    </div>
-  </div>
-  <div style="bottom: 768px;"
-       class="van-dropdown-item van-dropdown-item--up"
-  >
-    <transition-stub>
-      <div style="z-index: 2006; position: absolute; animation-duration: 0.2s;"
-           class="van-overlay"
-      >
-      </div>
-    </transition-stub>
-    <transition-stub>
-      <div style="z-index: 2006; transition-duration: 0.2s;"
-           class="van-popup van-popup--bottom van-dropdown-item__content"
-      >
-        <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
-             role="button"
-             tabindex="0"
-        >
-          <div class="van-cell__title">
-            <span>
-              A
-            </span>
-          </div>
-          <div class="van-cell__value">
-            <i class="van-badge__wrapper van-icon van-icon-success van-dropdown-item__icon">
-            </i>
-          </div>
-        </div>
-        <div class="van-cell van-cell--clickable van-dropdown-item__option"
-             role="button"
-             tabindex="0"
-        >
-          <div class="van-cell__title">
-            <span>
-              B
-            </span>
-          </div>
-          <div class="van-cell__value">
-          </div>
-        </div>
-      </div>
-    </transition-stub>
-  </div>
-  <div style="bottom: 768px; display: none;"
-       class="van-dropdown-item van-dropdown-item--up"
-  >
-    <transition-stub>
-    </transition-stub>
-    <transition-stub>
-    </transition-stub>
-  </div>
-</div>
-`;
-
-exports[`disable close-on-click-outside 1`] = `
-<div class="van-dropdown-menu">
-  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
-    <div role="button"
-         tabindex="0"
-         class="van-dropdown-menu__item"
-    >
-      <span class="van-dropdown-menu__title van-dropdown-menu__title--down van-dropdown-menu__title--active">
-        <div class="van-ellipsis">
-          A
-        </div>
-      </span>
-    </div>
-    <div role="button"
-         tabindex="0"
-         class="van-dropdown-menu__item"
-    >
-      <span class="van-dropdown-menu__title">
-        <div class="van-ellipsis">
-          A
-        </div>
-      </span>
-    </div>
-  </div>
-  <div style="top: 0px;"
-       class="van-dropdown-item van-dropdown-item--down"
-  >
-    <transition-stub>
-      <div style="z-index: 2005; position: absolute; animation-duration: 0.2s;"
-           class="van-overlay"
-      >
-      </div>
-    </transition-stub>
-    <transition-stub>
-      <div style="z-index: 2005; transition-duration: 0.2s;"
-           class="van-popup van-popup--top van-dropdown-item__content"
-      >
-        <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
-             role="button"
-             tabindex="0"
-        >
-          <div class="van-cell__title">
-            <span>
-              A
-            </span>
-          </div>
-          <div class="van-cell__value">
-            <i class="van-badge__wrapper van-icon van-icon-success van-dropdown-item__icon">
-            </i>
-          </div>
-        </div>
-        <div class="van-cell van-cell--clickable van-dropdown-item__option"
-             role="button"
-             tabindex="0"
-        >
-          <div class="van-cell__title">
-            <span>
-              B
-            </span>
-          </div>
-          <div class="van-cell__value">
-          </div>
-        </div>
-      </div>
-    </transition-stub>
-  </div>
-  <div style="top: 0px; display: none;"
-       class="van-dropdown-item van-dropdown-item--down"
-  >
-    <transition-stub>
-    </transition-stub>
-    <transition-stub>
-    </transition-stub>
-  </div>
-</div>
-`;
-
-exports[`disable dropdown item 1`] = `
-<div class="van-dropdown-menu">
-  <div class="van-dropdown-menu__bar">
-    <div role="button"
-         tabindex="-1"
-         class="van-dropdown-menu__item van-dropdown-menu__item--disabled"
-    >
-      <span class="van-dropdown-menu__title">
-        <div class="van-ellipsis">
-          A
-        </div>
-      </span>
-    </div>
-  </div>
-  <div style="top: 0px; display: none;"
-       class="van-dropdown-item van-dropdown-item--down"
-  >
-    <transition-stub>
-    </transition-stub>
-    <transition-stub>
-    </transition-stub>
-  </div>
-</div>
-`;
-
-exports[`render option icon 1`] = `
-<div class="van-dropdown-menu">
-  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
-    <div role="button"
-         tabindex="0"
-         class="van-dropdown-menu__item"
-    >
-      <span class="van-dropdown-menu__title van-dropdown-menu__title--down van-dropdown-menu__title--active">
-        <div class="van-ellipsis">
-          A
-        </div>
-      </span>
-    </div>
-    <div role="button"
-         tabindex="0"
-         class="van-dropdown-menu__item"
-    >
-      <span class="van-dropdown-menu__title">
-        <div class="van-ellipsis">
-          A
-        </div>
-      </span>
-    </div>
-  </div>
-  <div style="top: 0px;"
-       class="van-dropdown-item van-dropdown-item--down"
-  >
-    <transition-stub>
-      <div style="z-index: 2003; position: absolute; animation-duration: 0.2s;"
-           class="van-overlay"
-      >
-      </div>
-    </transition-stub>
-    <transition-stub>
-      <div style="z-index: 2003; transition-duration: 0.2s;"
-           class="van-popup van-popup--top van-dropdown-item__content"
-      >
-        <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
-             role="button"
-             tabindex="0"
-        >
-          <i class="van-badge__wrapper van-icon van-icon-success van-cell__left-icon">
-          </i>
-          <div class="van-cell__title">
-            <span>
-              A
-            </span>
-          </div>
-          <div class="van-cell__value">
-            <i class="van-badge__wrapper van-icon van-icon-success van-dropdown-item__icon">
-            </i>
-          </div>
-        </div>
-        <div class="van-cell van-cell--clickable van-dropdown-item__option"
-             role="button"
-             tabindex="0"
-        >
-          <i class="van-badge__wrapper van-icon van-icon-success van-cell__left-icon">
-          </i>
-          <div class="van-cell__title">
-            <span>
-              B
-            </span>
-          </div>
-          <div class="van-cell__value">
-          </div>
-        </div>
-      </div>
-    </transition-stub>
-  </div>
-  <div style="top: 0px; display: none;"
-       class="van-dropdown-item van-dropdown-item--down"
-  >
-    <transition-stub>
-    </transition-stub>
-    <transition-stub>
-    </transition-stub>
-  </div>
-</div>
-`;
-
-exports[`show dropdown item 1`] = `
-<div class="van-dropdown-menu">
-  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
-    <div role="button"
-         tabindex="0"
-         class="van-dropdown-menu__item"
-    >
-      <span class="van-dropdown-menu__title van-dropdown-menu__title--down van-dropdown-menu__title--active">
-        <div class="van-ellipsis">
-          A
-        </div>
-      </span>
-    </div>
-    <div role="button"
-         tabindex="0"
-         class="van-dropdown-menu__item"
-    >
-      <span class="van-dropdown-menu__title">
-        <div class="van-ellipsis">
-          A
-        </div>
-      </span>
-    </div>
-  </div>
-  <div style="top: 0px;"
-       class="van-dropdown-item van-dropdown-item--down"
-  >
-    <transition-stub>
-      <div style="z-index: 2001; position: absolute; animation-duration: 0.2s;"
-           class="van-overlay"
-      >
-      </div>
-    </transition-stub>
-    <transition-stub>
-      <div style="z-index: 2001; transition-duration: 0.2s;"
-           class="van-popup van-popup--top van-dropdown-item__content"
-      >
-        <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
-             role="button"
-             tabindex="0"
-        >
-          <div class="van-cell__title">
-            <span>
-              A
-            </span>
-          </div>
-          <div class="van-cell__value">
-            <i class="van-badge__wrapper van-icon van-icon-success van-dropdown-item__icon">
-            </i>
-          </div>
-        </div>
-        <div class="van-cell van-cell--clickable van-dropdown-item__option"
-             role="button"
-             tabindex="0"
-        >
-          <div class="van-cell__title">
-            <span>
-              B
-            </span>
-          </div>
-          <div class="van-cell__value">
-          </div>
-        </div>
-      </div>
-    </transition-stub>
-  </div>
-  <div style="top: 0px; display: none;"
-       class="van-dropdown-item van-dropdown-item--down"
-  >
-    <transition-stub>
-    </transition-stub>
-    <transition-stub>
-    </transition-stub>
-  </div>
-</div>
-`;
-
-exports[`show dropdown item 2`] = `
-<div class="van-dropdown-menu">
-  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
-    <div role="button"
-         tabindex="0"
-         class="van-dropdown-menu__item"
-    >
-      <span class="van-dropdown-menu__title">
-        <div class="van-ellipsis">
-          A
-        </div>
-      </span>
-    </div>
-    <div role="button"
-         tabindex="0"
-         class="van-dropdown-menu__item"
-    >
-      <span class="van-dropdown-menu__title van-dropdown-menu__title--down van-dropdown-menu__title--active">
-        <div class="van-ellipsis">
-          A
-        </div>
-      </span>
-    </div>
-  </div>
-  <div style="top: 0px;"
-       class="van-dropdown-item van-dropdown-item--down"
-  >
-    <transition-stub>
-      <div style="z-index: 2001; position: absolute; animation-duration: 0s; display: none;"
-           class="van-overlay"
-      >
-      </div>
-    </transition-stub>
-    <transition-stub>
-      <div style="z-index: 2001; transition-duration: 0s; display: none;"
-           class="van-popup van-popup--top van-dropdown-item__content"
-      >
-        <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
-             role="button"
-             tabindex="0"
-        >
-          <div class="van-cell__title">
-            <span>
-              A
-            </span>
-          </div>
-          <div class="van-cell__value">
-            <i class="van-badge__wrapper van-icon van-icon-success van-dropdown-item__icon">
-            </i>
-          </div>
-        </div>
-        <div class="van-cell van-cell--clickable van-dropdown-item__option"
-             role="button"
-             tabindex="0"
-        >
-          <div class="van-cell__title">
-            <span>
-              B
-            </span>
-          </div>
-          <div class="van-cell__value">
-          </div>
-        </div>
-      </div>
-    </transition-stub>
-  </div>
-  <div style="top: 0px;"
-       class="van-dropdown-item van-dropdown-item--down"
-  >
-    <transition-stub>
-      <div style="z-index: 2002; position: absolute; animation-duration: 0.2s;"
-           class="van-overlay"
-      >
-      </div>
-    </transition-stub>
-    <transition-stub>
-      <div style="z-index: 2002; transition-duration: 0.2s;"
-           class="van-popup van-popup--top van-dropdown-item__content"
-      >
-        <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
-             role="button"
-             tabindex="0"
-        >
-          <div class="van-cell__title">
-            <span>
-              A
-            </span>
-          </div>
-          <div class="van-cell__value">
-            <i class="van-badge__wrapper van-icon van-icon-success van-dropdown-item__icon">
-            </i>
-          </div>
-        </div>
-        <div class="van-cell van-cell--clickable van-dropdown-item__option"
-             role="button"
-             tabindex="0"
-        >
-          <div class="van-cell__title">
-            <span>
-              B
-            </span>
-          </div>
-          <div class="van-cell__value">
-          </div>
-        </div>
-      </div>
-    </transition-stub>
-  </div>
-</div>
-`;
-
-exports[`show dropdown item 3`] = `
-<div class="van-dropdown-menu">
-  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
-    <div role="button"
-         tabindex="0"
-         class="van-dropdown-menu__item"
-    >
-      <span class="van-dropdown-menu__title">
-        <div class="van-ellipsis">
-          A
-        </div>
-      </span>
-    </div>
-    <div role="button"
-         tabindex="0"
-         class="van-dropdown-menu__item"
-    >
-      <span class="van-dropdown-menu__title">
-        <div class="van-ellipsis">
-          A
-        </div>
-      </span>
-    </div>
-  </div>
-  <div style="top: 0px;"
-       class="van-dropdown-item van-dropdown-item--down"
-  >
-    <transition-stub>
-      <div style="z-index: 2001; position: absolute; animation-duration: 0s; display: none;"
-           class="van-overlay"
-      >
-      </div>
-    </transition-stub>
-    <transition-stub>
-      <div style="z-index: 2001; transition-duration: 0s; display: none;"
-           class="van-popup van-popup--top van-dropdown-item__content"
-      >
-        <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
-             role="button"
-             tabindex="0"
-        >
-          <div class="van-cell__title">
-            <span>
-              A
-            </span>
-          </div>
-          <div class="van-cell__value">
-            <i class="van-badge__wrapper van-icon van-icon-success van-dropdown-item__icon">
-            </i>
-          </div>
-        </div>
-        <div class="van-cell van-cell--clickable van-dropdown-item__option"
-             role="button"
-             tabindex="0"
-        >
-          <div class="van-cell__title">
-            <span>
-              B
-            </span>
-          </div>
-          <div class="van-cell__value">
-          </div>
-        </div>
-      </div>
-    </transition-stub>
-  </div>
-  <div style="top: 0px;"
-       class="van-dropdown-item van-dropdown-item--down"
-  >
-    <transition-stub>
-      <div style="z-index: 2002; position: absolute; animation-duration: 0.2s; display: none;"
-           class="van-overlay"
-      >
-      </div>
-    </transition-stub>
-    <transition-stub>
-      <div style="z-index: 2002; transition-duration: 0.2s; display: none;"
-           class="van-popup van-popup--top van-dropdown-item__content"
-      >
-        <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
-             role="button"
-             tabindex="0"
-        >
-          <div class="van-cell__title">
-            <span>
-              A
-            </span>
-          </div>
-          <div class="van-cell__value">
-            <i class="van-badge__wrapper van-icon van-icon-success van-dropdown-item__icon">
-            </i>
-          </div>
-        </div>
-        <div class="van-cell van-cell--clickable van-dropdown-item__option"
-             role="button"
-             tabindex="0"
-        >
-          <div class="van-cell__title">
-            <span>
-              B
-            </span>
-          </div>
-          <div class="van-cell__value">
-          </div>
-        </div>
-      </div>
-    </transition-stub>
-  </div>
-</div>
-`;
-
-exports[`title prop 1`] = `
-<div class="van-dropdown-menu">
-  <div class="van-dropdown-menu__bar">
-    <div role="button"
-         tabindex="0"
-         class="van-dropdown-menu__item"
-    >
-      <span class="van-dropdown-menu__title">
-        <div class="van-ellipsis">
-          Title
-        </div>
-      </span>
-    </div>
-    <div role="button"
-         tabindex="0"
-         class="van-dropdown-menu__item"
-    >
-      <span class="van-dropdown-menu__title">
-        <div class="van-ellipsis">
-          Title
-        </div>
-      </span>
-    </div>
-  </div>
-  <div style="top: 0px; display: none;"
-       class="van-dropdown-item van-dropdown-item--down"
-  >
-    <transition-stub>
-    </transition-stub>
-    <transition-stub>
-    </transition-stub>
-  </div>
-  <div style="top: 0px; display: none;"
-       class="van-dropdown-item van-dropdown-item--down"
-  >
-    <transition-stub>
-    </transition-stub>
-    <transition-stub>
-    </transition-stub>
-  </div>
-</div>
-`;
-
-exports[`title slot 1`] = `
-<div class="van-dropdown-menu">
-  <div class="van-dropdown-menu__bar">
-    <div role="button"
-         tabindex="0"
-         class="van-dropdown-menu__item"
-    >
-      <span class="van-dropdown-menu__title">
-        <div class="van-ellipsis">
-          Custom Title
-        </div>
-      </span>
-    </div>
-  </div>
-  <div style="top: 0px; display: none;"
-       class="van-dropdown-item van-dropdown-item--down"
-  >
-    <transition-stub>
-    </transition-stub>
-    <transition-stub>
-    </transition-stub>
-  </div>
-</div>
-`;

src/dropdown-menu/test/index.legacy.js

@@ -0,0 +1,255 @@
+import { mount, later } from '../../../test';
+
+function renderWrapper(options = {}) {
+  return mount({
+    template: `
+      <van-dropdown-menu :direction="direction" :close-on-click-outside="closeOnClickOutside">
+        <van-dropdown-item v-model="value" :title="title" :options="options" />
+        <van-dropdown-item v-model="value" :title="title" :options="options" />
+      </van-dropdown-menu>
+    `,
+    data() {
+      return {
+        value: options.value || 0,
+        title: options.title || '',
+        direction: options.direction || 'down',
+        closeOnClickOutside: options.closeOnClickOutside,
+        options: [
+          { text: 'A', value: 0, icon: options.icon },
+          { text: 'B', value: 1, icon: options.icon },
+        ],
+      };
+    },
+  });
+}
+
+test('show dropdown item', async () => {
+  const wrapper = renderWrapper();
+
+  await later();
+
+  const titles = wrapper.findAll('.van-dropdown-menu__title');
+
+  titles[0].trigger('click');
+  expect(wrapper.html()).toMatchSnapshot();
+
+  titles[1].trigger('click');
+  expect(wrapper.html()).toMatchSnapshot();
+
+  titles[1].trigger('click');
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('render option icon', async () => {
+  const wrapper = renderWrapper({
+    icon: 'success',
+  });
+
+  await later();
+
+  const titles = wrapper.findAll('.van-dropdown-menu__title');
+
+  titles[0].trigger('click');
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('close-on-click-outside', async () => {
+  const wrapper = renderWrapper({
+    closeOnClickOutside: true,
+  });
+
+  await later();
+
+  const titles = wrapper.findAll('.van-dropdown-menu__title');
+
+  titles[0].trigger('click');
+  document.body.click();
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('disable close-on-click-outside', async () => {
+  const wrapper = renderWrapper({
+    closeOnClickOutside: false,
+  });
+
+  await later();
+
+  const titles = wrapper.findAll('.van-dropdown-menu__title');
+
+  titles[0].trigger('click');
+  document.body.click();
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('direction up', async () => {
+  const { innerHeight } = window;
+  window.innerHeight = 1000;
+
+  const wrapper = renderWrapper({
+    direction: 'up',
+  });
+
+  await later();
+  expect(wrapper.html()).toMatchSnapshot();
+
+  const titles = wrapper.findAll('.van-dropdown-menu__title');
+  titles[0].trigger('click');
+  expect(wrapper.html()).toMatchSnapshot();
+
+  window.innerHeight = innerHeight;
+});
+
+test('click option', async () => {
+  const wrapper = renderWrapper();
+
+  await later();
+
+  const titles = wrapper.findAll('.van-dropdown-menu__title');
+  titles[0].trigger('click');
+
+  const options = wrapper.findAll('.van-dropdown-item .van-cell');
+  options[1].trigger('click');
+
+  await later();
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('title prop', async () => {
+  const wrapper = renderWrapper({ title: 'Title' });
+  await later();
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('didn`t find matched option', async () => {
+  const wrapper = renderWrapper({ value: -1 });
+  await later();
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('destroy one item', async () => {
+  const wrapper = mount({
+    template: `
+      <van-dropdown-menu>
+        <van-dropdown-item v-if="render" v-model="value" :options="options" />
+        <van-dropdown-item v-model="value" :options="options" />
+      </van-dropdown-menu>
+    `,
+    data() {
+      return {
+        value: 0,
+        render: true,
+        options: [
+          { text: 'A', value: 0 },
+          { text: 'B', value: 1 },
+        ],
+      };
+    },
+  });
+
+  await later();
+  wrapper.setData({ render: false });
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('disable dropdown item', async () => {
+  const wrapper = mount({
+    template: `
+      <van-dropdown-menu>
+        <van-dropdown-item disabled v-model="value" :options="options" />
+      </van-dropdown-menu>
+    `,
+    data() {
+      return {
+        value: 0,
+        options: [
+          { text: 'A', value: 0 },
+          { text: 'B', value: 1 },
+        ],
+      };
+    },
+  });
+
+  const title = wrapper.find('.van-dropdown-menu__title');
+  title.trigger('click');
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('change event', async () => {
+  const onChange = jest.fn();
+
+  const wrapper = mount({
+    template: `
+      <van-dropdown-menu>
+        <van-dropdown-item v-model="value" :options="options" @change="onChange" />
+        <van-dropdown-item v-model="value" :options="options" />
+      </van-dropdown-menu>
+    `,
+    data() {
+      return {
+        value: 0,
+        options: [
+          { text: 'A', value: 0 },
+          { text: 'B', value: 1 },
+        ],
+      };
+    },
+    methods: {
+      onChange,
+    },
+  });
+
+  await later();
+
+  const titles = wrapper.findAll('.van-dropdown-menu__title');
+  titles[0].trigger('click');
+
+  const options = wrapper.findAll('.van-dropdown-item .van-cell');
+  options[0].trigger('click');
+
+  expect(onChange).toHaveBeenCalledTimes(0);
+
+  options[1].trigger('click');
+  expect(onChange).toHaveBeenCalledWith(1);
+  expect(onChange).toHaveBeenCalledTimes(1);
+});
+
+test('toggle method', async (done) => {
+  const wrapper = mount({
+    template: `
+      <van-dropdown-menu>
+        <van-dropdown-item ref="item" />
+      </van-dropdown-menu>
+    `,
+    async mounted() {
+      // show
+      this.$refs.item.toggle(true, { immediate: true });
+      await later();
+
+      const content = wrapper.find('.van-dropdown-item__content');
+      expect(content.style.display).toEqual('');
+
+      // hide
+      this.$refs.item.toggle(false, { immediate: true });
+      await later();
+      expect(content.style.display).toEqual('none');
+
+      done();
+    },
+  });
+});
+
+test('title slot', () => {
+  const wrapper = mount({
+    template: `
+      <van-dropdown-menu>
+        <van-dropdown-item>
+          <template #title>
+            Custom Title
+          </template>
+        </van-dropdown-item>
+      </van-dropdown-menu>
+    `,
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});

src/dropdown-menu/test/index.spec.tsx

@@ -1,280 +0,0 @@
-import { later, mount } from '../../../test';
-import { reactive, ref, onMounted } from 'vue';
-import DropdownItem from '../../dropdown-item';
-import DropdownMenu, { DropdownMenuDirection } from '..';
-
-function renderWrapper(
-  options: {
-    value?: number;
-    title?: string;
-    direction?: DropdownMenuDirection | undefined;
-    closeOnClickOutside?: boolean;
-    icon?: string;
-  } = {}
-) {
-  return mount({
-    setup() {
-      const state = reactive({
-        value: options.value || 0,
-        title: options.title || '',
-        direction: options.direction || 'down',
-        closeOnClickOutside: !!options.closeOnClickOutside,
-        options: [
-          { text: 'A', value: 0, icon: options.icon },
-          { text: 'B', value: 1, icon: options.icon },
-        ],
-      });
-
-      return () => (
-        <DropdownMenu
-          direction={state.direction}
-          closeOnClickOutside={state.closeOnClickOutside}
-        >
-          <DropdownItem
-            modelValue={state.value}
-            title={state.title}
-            options={state.options}
-          />
-          <DropdownItem
-            modelValue={state.value}
-            title={state.title}
-            options={state.options}
-          />
-        </DropdownMenu>
-      );
-    },
-  });
-}
-
-test('show dropdown item', async () => {
-  const wrapper = renderWrapper();
-
-  await later();
-
-  const titles = wrapper.findAll('.van-dropdown-menu__title');
-
-  await titles[0].trigger('click');
-  expect(wrapper.html()).toMatchSnapshot();
-
-  await titles[1].trigger('click');
-  expect(wrapper.html()).toMatchSnapshot();
-
-  await titles[1].trigger('click');
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('render option icon', async () => {
-  const wrapper = renderWrapper({
-    icon: 'success',
-  });
-
-  await later();
-
-  const titles = wrapper.findAll('.van-dropdown-menu__title');
-
-  await titles[0].trigger('click');
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('close-on-click-outside', async () => {
-  const wrapper = renderWrapper({
-    closeOnClickOutside: true,
-  });
-
-  await later();
-
-  const titles = wrapper.findAll('.van-dropdown-menu__title');
-
-  await titles[0].trigger('click');
-
-  document.body.click();
-  await later();
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('disable close-on-click-outside', async () => {
-  const wrapper = renderWrapper({
-    closeOnClickOutside: false,
-  });
-
-  await later();
-
-  const titles = wrapper.findAll('.van-dropdown-menu__title');
-
-  await titles[0].trigger('click');
-  document.body.click();
-  await later();
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('direction up', async () => {
-  const wrapper = renderWrapper({
-    direction: 'up',
-  });
-
-  await later();
-  expect(wrapper.html()).toMatchSnapshot();
-
-  const titles = wrapper.findAll('.van-dropdown-menu__title');
-  await titles[0].trigger('click');
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('click option', async () => {
-  const wrapper = renderWrapper();
-
-  await later();
-
-  const titles = wrapper.findAll('.van-dropdown-menu__title');
-  await titles[0].trigger('click');
-
-  const options = wrapper.findAll('.van-dropdown-item .van-cell');
-  await options[1].trigger('click');
-
-  await later();
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('title prop', async () => {
-  const wrapper = renderWrapper({ title: 'Title' });
-  await later();
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('destroy one item', async () => {
-  const wrapper = mount({
-    props: {
-      render: {
-        type: Boolean,
-        default: true,
-      },
-    },
-    setup(props) {
-      const options = [
-        { text: 'A', value: 0 },
-        { text: 'B', value: 1 },
-      ];
-      const value = 0;
-
-      return () => (
-        <DropdownMenu>
-          {props.render && (
-            <DropdownItem modelValue={value} options={options} />
-          )}
-          <DropdownItem modelValue={value} options={options} />
-        </DropdownMenu>
-      );
-    },
-  });
-
-  await later();
-  await wrapper.setProps({ render: false });
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('disable dropdown item', async () => {
-  const wrapper = mount({
-    setup() {
-      const options = [
-        { text: 'A', value: 0 },
-        { text: 'B', value: 1 },
-      ];
-
-      return () => (
-        <DropdownMenu>
-          <DropdownItem disabled modelValue={0} options={options} />
-        </DropdownMenu>
-      );
-    },
-  });
-
-  await later();
-  const title = wrapper.find('.van-dropdown-menu__title');
-  await title.trigger('click');
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('change event', async () => {
-  const onChange = jest.fn();
-
-  const wrapper = mount({
-    setup() {
-      const options = [
-        { text: 'A', value: 0 },
-        { text: 'B', value: 1 },
-      ];
-
-      return () => (
-        <DropdownMenu>
-          <DropdownItem modelValue={0} options={options} onChange={onChange} />
-          <DropdownItem modelValue={0} options={options} />
-        </DropdownMenu>
-      );
-    },
-  });
-
-  await later();
-
-  const titles = wrapper.findAll('.van-dropdown-menu__title');
-  await titles[0].trigger('click');
-
-  const options = wrapper.findAll('.van-dropdown-item .van-cell');
-  await options[0].trigger('click');
-
-  expect(onChange).toHaveBeenCalledTimes(0);
-
-  await options[1].trigger('click');
-  expect(onChange).toHaveBeenCalledWith(1);
-  expect(onChange).toHaveBeenCalledTimes(1);
-});
-
-test('toggle method', async (done) => {
-  const wrapper = mount({
-    setup() {
-      const item = ref();
-
-      onMounted(async () => {
-        // show
-        item.value.toggle(true, { immediate: true });
-        await later();
-
-        expect(
-          wrapper.find('.van-dropdown-item__content').style.display
-        ).toEqual('');
-
-        // hide
-        item.value.toggle(false, { immediate: true });
-        await later();
-        expect(
-          wrapper.find('.van-dropdown-item__content').style.display
-        ).toEqual('none');
-
-        done();
-      });
-
-      return () => (
-        <DropdownMenu>
-          <DropdownItem ref={item} />
-        </DropdownMenu>
-      );
-    },
-  });
-});
-
-test('title slot', async () => {
-  const wrapper = mount({
-    setup() {
-      return () => (
-        <DropdownMenu>
-          <DropdownItem>{{ title: () => 'Custom Title' }}</DropdownItem>
-        </DropdownMenu>
-      );
-    },
-  });
-
-  await later();
-  expect(wrapper.html()).toMatchSnapshot();
-});

src/field/Field.tsx

@@ -97,10 +97,6 @@ export default defineComponent({
       type: Boolean,
       default: null,
     },
-    clearIcon: {
-      type: String,
-      default: 'clear',
-    },
     modelValue: {
       type: [String, Number],
       default: '',
@@ -550,11 +546,7 @@ export default defineComponent({
           <div class={bem('body')}>
             {renderInput()}
             {showClear.value && (
-              <Icon
+              <Icon name="clear" class={bem('clear')} onTouchstart={onClear} />
-                name={props.clearIcon}
-                class={bem('clear')}
-                onTouchstart={onClear}
-              />
             )}
             {renderRightIcon()}
             {slots.button && <div class={bem('button')}>{slots.button()}</div>}

src/field/README.md

@@ -247,22 +247,21 @@ Use `input-align` prop to align the input value.
 | required | Whether to show required mark | _boolean_ | `false` |
 | center | Whether to center content vertically | _boolean_ | `true` |
 | clearable | Whether to be clearable | _boolean_ | `false` |
-| clear-icon `v3.0.12` | Clear icon name | _string_ | `clear` |
 | clear-trigger | When to display the clear icon, `always` means to display the icon when value is not empty, `focus` means to display the icon when input is focused | _string_ | `focus` |
 | clickable | Whether to show click feedback when clicked | _boolean_ | `false` |
 | is-link | Whether to show link icon | _boolean_ | `false` |
 | autofocus | Whether to auto focus, unsupported in iOS | _boolean_ | `false` |
 | show-word-limit | Whether to show word limit, need to set the `maxlength` prop | _boolean_ | `false` |
-| error | Whether to mark the input content in red | _boolean_ | `false` |
+| error | Whether to show error info | _boolean_ | `false` |
 | error-message | Error message | _string_ | - |
-| error-message-align | Error message align, can be set to `center` `right` | _string_ | `left` |
+| formatter | Input value formatter | _Function_ | - |
-| formatter | Input value formatter | _(val: string) => string_ | - |
 | format-trigger | When to format value，can be set to `onBlur` | _string_ | `onChange` |
 | arrow-direction | Can be set to `left` `up` `down` | _string_ | `right` |
 | label-class | Label className | _string \| Array \| object_ | - |
 | label-width | Label width | _number \| string_ | `6.2em` |
 | label-align | Label align, can be set to `center` `right` | _string_ | `left` |
 | input-align | Input align, can be set to `center` `right` | _string_ | `left` |
+| error-message-align | Error message align, can be set to `center` `right` | _string_ | `left` |
 | autosize | Textarea auto resize，can accpet an object,<br>e.g. { maxHeight: 100, minHeight: 50 } | _boolean \| object_ | `false` |
 | left-icon | Left side icon name | _string_ | - |
 | right-icon | Right side icon name | _string_ | - |

src/field/README.zh-CN.md

@@ -270,7 +270,6 @@ export default {
 | required | 是否显示表单必填星号 | _boolean_ | `false` |
 | center | 是否使内容垂直居中 | _boolean_ | `false` |
 | clearable | 是否启用清除图标，点击清除图标后会清空输入框 | _boolean_ | `false` |
-| clear-icon `v3.0.12` | 清除[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `clear` |
 | clear-trigger | 显示清除图标的时机，`always` 表示输入框不为空时展示，<br>`focus` 表示输入框聚焦且不为空时展示 | _string_ | `focus` |
 | clickable | 是否开启点击反馈 | _boolean_ | `false` |
 | is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` |
@@ -278,14 +277,14 @@ export default {
 | show-word-limit | 是否显示字数统计，需要设置`maxlength`属性 | _boolean_ | `false` |
 | error | 是否将输入内容标红 | _boolean_ | `false` |
 | error-message | 底部错误提示文案，为空时不展示 | _string_ | - |
-| error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | _string_ | `left` |
+| formatter | 输入内容格式化函数 | _Function_ | - |
-| formatter | 输入内容格式化函数 | _(val: string) => string_ | - |
 | format-trigger | 格式化函数触发的时机，可选值为 `onBlur` | _string_ | `onChange` |
 | arrow-direction | 箭头方向，可选值为 `left` `up` `down` | _string_ | `right` |
 | label-class | 左侧文本额外类名 | _string \| Array \| object_ | - |
 | label-width | 左侧文本宽度，默认单位为 `px` | _number \| string_ | `6.2em` |
 | label-align | 左侧文本对齐方式，可选值为 `center` `right` | _string_ | `left` |
 | input-align | 输入框对齐方式，可选值为 `center` `right` | _string_ | `left` |
+| error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | _string_ | `left` |
 | autosize | 是否自适应内容高度，只对 textarea 有效，<br>可传入对象,如 { maxHeight: 100, minHeight: 50 }，<br>单位为`px` | _boolean \| object_ | `false` |
 | left-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
 | right-icon | 右侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |

src/field/test/__snapshots__/index.spec.js.snap

@@ -1,10 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should change clear icon when using clear-icon prop 1`] = `
-<i class="van-badge__wrapper van-icon van-icon-cross van-field__clear">
-</i>
-`;
-
 exports[`should render colon when using colon prop 1`] = `
 <div class="van-cell__title van-field__label">
   <span>

src/field/test/index.spec.js

@@ -430,17 +430,3 @@ test('should allow to set autocomplete attribute', () => {
     'on'
   );
 });
-
-test('should change clear icon when using clear-icon prop', async () => {
-  const wrapper = mount(Field, {
-    props: {
-      clearable: true,
-      clearIcon: 'cross',
-      modelValue: 'test',
-    },
-  });
-
-  const input = wrapper.find('input');
-  await input.trigger('focus');
-  expect(wrapper.find('.van-field__clear').html()).toMatchSnapshot();
-});

src/image-preview/index.ts

@@ -1,5 +0,0 @@
-import { ImagePreview, ImagePreviewOptions } from './function-call';
-
-export default ImagePreview;
-export { ImagePreview };
-export type { ImagePreviewOptions };

src/image-preview/index.tsx

@@ -103,4 +103,5 @@ ImagePreview.install = (app: App) => {
   app.use(withInstall<typeof VanImagePreview>(VanImagePreview));
 };
 
+export default ImagePreview;
 export { ImagePreview };

src/image-preview/test/__snapshots__/index.spec.ts.snap

@@ -76,83 +76,113 @@ exports[`should swipe to currect index after calling the swipeTo method 1`] = `
 `;
 
 exports[`zoom in and drag image to move 1`] = `
-<div class="van-image van-image-preview__image"
+DOMWrapper {
+  "element": <div
+    class="van-image van-image-preview__image"
     style="transition-duration: .3s;"
   >
-  <img src="https://img.yzcdn.cn/1.png"
+    <img
       class="van-image__img"
+      src="https://img.yzcdn.cn/1.png"
       style="object-fit: contain;"
+    />
+    <div
+      class="van-image__loading"
     >
-  <div class="van-image__loading">
+      
-    <div class="van-loading van-loading--spinner">
+      <div
-      <span class="van-loading__spinner van-loading__spinner--spinner">
+        class="van-loading van-loading--spinner"
-        <i>
+      >
-        </i>
+        <span
-        <i>
+          class="van-loading__spinner van-loading__spinner--spinner"
-        </i>
+        >
-        <i>
+          
-        </i>
+          <i />
-        <i>
+          <i />
-        </i>
+          <i />
-        <i>
+          <i />
-        </i>
+          <i />
-        <i>
+          <i />
-        </i>
+          <i />
-        <i>
+          <i />
-        </i>
+          <i />
-        <i>
+          <i />
-        </i>
+          <i />
-        <i>
+          <i />
-        </i>
+          
-        <i>
-        </i>
-        <i>
-        </i>
-        <i>
-        </i>
         </span>
+        <!---->
       </div>
+      
     </div>
-</div>
+    <!---->
+  </div>,
+  "style": CSSStyleDeclaration {
+    "0": "transition-duration",
+    "_importants": Object {
+      "transition-duration": undefined,
+    },
+    "_length": 1,
+    "_onChange": [Function],
+    "_values": Object {
+      "transition-duration": ".3s",
+    },
+  },
+}
 `;
 
 exports[`zoom in and drag image to move 2`] = `
-<div class="van-image van-image-preview__image"
+DOMWrapper {
+  "element": <div
+    class="van-image van-image-preview__image"
     style="transition-duration: .3s;"
   >
-  <img src="https://img.yzcdn.cn/1.png"
+    <img
       class="van-image__img"
+      src="https://img.yzcdn.cn/1.png"
       style="object-fit: contain;"
+    />
+    <div
+      class="van-image__loading"
     >
-  <div class="van-image__loading">
+      
-    <div class="van-loading van-loading--spinner">
+      <div
-      <span class="van-loading__spinner van-loading__spinner--spinner">
+        class="van-loading van-loading--spinner"
-        <i>
+      >
-        </i>
+        <span
-        <i>
+          class="van-loading__spinner van-loading__spinner--spinner"
-        </i>
+        >
-        <i>
+          
-        </i>
+          <i />
-        <i>
+          <i />
-        </i>
+          <i />
-        <i>
+          <i />
-        </i>
+          <i />
-        <i>
+          <i />
-        </i>
+          <i />
-        <i>
+          <i />
-        </i>
+          <i />
-        <i>
+          <i />
-        </i>
+          <i />
-        <i>
+          <i />
-        </i>
+          
-        <i>
-        </i>
-        <i>
-        </i>
-        <i>
-        </i>
         </span>
+        <!---->
       </div>
+      
     </div>
-</div>
+    <!---->
+  </div>,
+  "style": CSSStyleDeclaration {
+    "0": "transition-duration",
+    "_importants": Object {
+      "transition-duration": undefined,
+    },
+    "_length": 1,
+    "_onChange": [Function],
+    "_values": Object {
+      "transition-duration": ".3s",
+    },
+  },
+}
 `;

src/image-preview/test/function.spec.ts

@@ -1,5 +1,5 @@
 import { createApp } from 'vue';
-import { ImagePreview } from '../function-call';
+import { ImagePreview } from '..';
 import ImagePreviewComponent from '../ImagePreview';
 
 test('should expose ImagePreviewComponent in ImagePreview.Component', () => {

src/image-preview/test/index.spec.ts

@@ -7,7 +7,7 @@ import {
   triggerDrag,
   mockGetBoundingClientRect,
 } from '../../../test';
-import { ImagePreview } from '../function-call';
+import { ImagePreview } from '..';
 import ImagePreviewComponent from '../ImagePreview';
 
 const images = [
@@ -328,12 +328,12 @@ test('zoom in and drag image to move', async () => {
 
   // drag image before load
   triggerDrag(image, 300, 300);
-  expect(wrapper.find('.van-image').html()).toMatchSnapshot();
+  expect(wrapper.find('.van-image')).toMatchSnapshot();
 
   // drag image after load
   image.trigger('load');
   triggerDrag(image, 300, 300);
-  expect(wrapper.find('.van-image').html()).toMatchSnapshot();
+  expect(wrapper.find('.van-image')).toMatchSnapshot();
 
   restore();
 });

src/notify/index.ts

@@ -1,6 +0,0 @@
-import { Notify, NotifyOptions } from './function-call';
-import type { NotifyType } from './Notify';
-
-export default Notify;
-export { Notify };
-export type { NotifyType, NotifyOptions };

src/notify/index.tsx

@@ -103,4 +103,5 @@ Notify.install = (app: App) => {
 
 Notify.Component = withInstall<typeof VanNotify>(VanNotify);
 
+export default Notify;
 export { Notify };

src/notify/test/index.spec.js

@@ -1,7 +1,7 @@
 import { createApp } from 'vue';
 import { later } from '../../../test';
 import { trigger } from '../../utils';
-import { Notify } from '../function-call';
+import { Notify } from '..';
 import NotifyComponent from '../Notify';
 
 test('should not throw error if calling clear method before render notify', () => {

src/search/README.md

@@ -120,17 +120,13 @@ Use `action` slot to custom right button, `cancel` event will no longer be Emitt
 | maxlength | Max length of value | _number \| string_ | - |
 | placeholder | Placeholder | _string_ | - |
 | clearable | Whether to be clearable | _boolean_ | `true` |
-| clear-icon `v3.0.12` | Clear icon name | _string_ | `clear` |
 | clear-trigger | When to display the clear icon, `always` means to display the icon when value is not empty, `focus` means to display the icon when input is focused | _string_ | `focus` |
 | autofocus | Whether to auto focus, unsupported in iOS | _boolean_ | `false` |
 | show-action | Whether to show right action button | _boolean_ | `false` |
 | action-text | Text of action button | _boolean_ | `Cancel` |
 | disabled | Whether to disable field | _boolean_ | `false` |
 | readonly | Whether to be readonly | _boolean_ | `false` |
-| error | Whether to mark the input content in red | _boolean_ | `false` |
+| error | Whether to show error info | _boolean_ | `false` |
-| error-message `v3.0.12` | Error message | _string_ | - |
-| formatter `v3.0.12` | Input value formatter | _(val: string) => string_ | - |
-| format-trigger `v3.0.12` | When to format value，can be set to `onBlur` | _string_ | `onChange` |
 | input-align | Text align of field, can be set to `center` `right` | _string_ | `left` |
 | left-icon | Left icon name | _string_ | `search` |
 | right-icon | Right icon name | _string_ | - |

src/search/README.zh-CN.md

@@ -136,7 +136,6 @@ export default {
 | maxlength | 输入的最大字符数 | _number \| string_ | - |
 | placeholder | 占位提示文字 | _string_ | - |
 | clearable | 是否启用清除图标，点击清除图标后会清空输入框 | _boolean_ | `true` |
-| clear-icon `v3.0.12` | 清除[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `clear` |
 | clear-trigger | 显示清除图标的时机，`always` 表示输入框不为空时展示，<br>`focus` 表示输入框聚焦且不为空时展示 | _string_ | `focus` |
 | autofocus | 是否自动聚焦，iOS 系统不支持该属性 | _boolean_ | `false` |
 | show-action | 是否在搜索框右侧显示取消按钮 | _boolean_ | `false` |
@@ -144,9 +143,6 @@ export default {
 | disabled | 是否禁用输入框 | _boolean_ | `false` |
 | readonly | 是否将输入框设为只读状态，只读状态下无法输入内容 | _boolean_ | `false` |
 | error | 是否将输入内容标红 | _boolean_ | `false` |
-| error-message | 底部错误提示文案，为空时不展示 | _string_ | - |
-| formatter `v3.0.12` | 输入内容格式化函数 | _(val: string) => string_ | - |
-| format-trigger `v3.0.12` | 格式化函数触发的时机，可选值为 `onBlur` | _string_ | `onChange` |
 | input-align | 输入框内容对齐方式，可选值为 `center` `right` | _string_ | `left` |
 | left-icon | 输入框左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `search` |
 | right-icon | 输入框右侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |

src/search/Search.tsx

@@ -15,7 +15,7 @@ import { useExpose } from '../composables/use-expose';
 import { Field } from '../field';
 
 // Types
-import type { FieldClearTrigger, FieldFormatTrigger } from '../field/types';
+import type { FieldClearTrigger } from '../field/types';
 
 const [name, bem, t] = createNamespace('search');
 
@@ -28,16 +28,12 @@ export default defineComponent({
 
   props: {
     label: String,
-    clearIcon: String,
     rightIcon: String,
-    formatter: Function as PropType<(value: string) => string>,
     modelValue: String,
     actionText: String,
     background: String,
     showAction: Boolean,
-    errorMessage: String,
     clearTrigger: String as PropType<FieldClearTrigger>,
-    formatTrigger: String as PropType<FieldFormatTrigger>,
     shape: {
       type: String as PropType<SearchShape>,
       default: 'square',
@@ -52,7 +48,7 @@ export default defineComponent({
     },
   },
 
-  emits: ['search', 'cancel', 'update:modelValue'],
+  emits: ['update:modelValue', 'search', 'cancel'],
 
   setup(props, { emit, slots, attrs }) {
     const filedRef = ref<ComponentInstance>();
@@ -103,14 +99,10 @@ export default defineComponent({
 
     const fieldPropNames = [
       'leftIcon',
-      'clearIcon',
       'rightIcon',
-      'formatter',
       'clearable',
       'modelValue',
       'clearTrigger',
-      'errorMessage',
-      'formatTrigger',
     ] as const;
 
     const renderField = () => {

src/sticky/test/index.spec.js

@@ -1,31 +1,20 @@
 import { nextTick, ref } from 'vue';
-import { VueWrapper } from '@vue/test-utils';
 import { mockScrollTop, mount } from '../../../test';
 import { Sticky } from '..';
-import { ComponentInstance } from '../../utils';
 
 Object.defineProperty(window.HTMLElement.prototype, 'clientHeight', {
   value: 640,
 });
 
-function mockStickyRect(
-  wrapper: VueWrapper<ComponentInstance>,
-  rect: Partial<DOMRect>
-) {
-  const mocked = jest
-    .spyOn(wrapper.element, 'getBoundingClientRect')
-    .mockReturnValue(rect as DOMRect);
-
-  return () => mocked.mockRestore();
-}
-
 test('should sticky to top after scrolling', async () => {
   const wrapper = mount({
     render() {
       return <Sticky style="height: 10px;">Content</Sticky>;
     },
   });
-  const restore = mockStickyRect(wrapper, {
+  const mockStickyRect = jest
+    .spyOn(wrapper.element, 'getBoundingClientRect')
+    .mockReturnValue({
       top: -100,
       bottom: -90,
     });
@@ -33,7 +22,7 @@ test('should sticky to top after scrolling', async () => {
   await mockScrollTop(100);
   expect(wrapper.html()).toMatchSnapshot();
 
-  restore();
+  mockStickyRect.mockRestore();
 });
 
 test('should sticky to bottom after scrolling', async () => {
@@ -46,7 +35,9 @@ test('should sticky to bottom after scrolling', async () => {
       );
     },
   });
-  const restore = mockStickyRect(wrapper, {
+  const mockStickyRect = jest
+    .spyOn(wrapper.element, 'getBoundingClientRect')
+    .mockReturnValue({
       top: 640,
       bottom: 650,
     });
@@ -54,7 +45,7 @@ test('should sticky to bottom after scrolling', async () => {
   await mockScrollTop(0);
   expect(wrapper.html()).toMatchSnapshot();
 
-  restore();
+  mockStickyRect.mockRestore();
 });
 
 test('should update z-index when using z-index prop', async () => {
@@ -68,7 +59,9 @@ test('should update z-index when using z-index prop', async () => {
     },
   });
 
-  const restore = mockStickyRect(wrapper, {
+  const mockStickyRect = jest
+    .spyOn(wrapper.element, 'getBoundingClientRect')
+    .mockReturnValue({
       top: -100,
       bottom: -90,
     });
@@ -76,7 +69,7 @@ test('should update z-index when using z-index prop', async () => {
   await mockScrollTop(100);
   expect(wrapper.html()).toMatchSnapshot();
 
-  restore();
+  mockStickyRect.mockRestore();
 });
 
 test('should add offset top when using offset-top prop', async () => {
@@ -90,7 +83,9 @@ test('should add offset top when using offset-top prop', async () => {
     },
   });
 
-  const restore = mockStickyRect(wrapper, {
+  const mockStickyRect = jest
+    .spyOn(wrapper.element, 'getBoundingClientRect')
+    .mockReturnValue({
       top: -100,
       bottom: -90,
     });
@@ -98,13 +93,13 @@ test('should add offset top when using offset-top prop', async () => {
   await mockScrollTop(100);
   expect(wrapper.html()).toMatchSnapshot();
 
-  restore();
+  mockStickyRect.mockRestore();
 });
 
 test('should allow to using offset-top prop with rem unit', async () => {
   const originGetComputedStyle = window.getComputedStyle;
 
-  window.getComputedStyle = () => ({ fontSize: '16px' } as CSSStyleDeclaration);
+  window.getComputedStyle = () => ({ fontSize: '16px' });
 
   const wrapper = mount({
     render() {
@@ -116,7 +111,9 @@ test('should allow to using offset-top prop with rem unit', async () => {
     },
   });
 
-  const restore = mockStickyRect(wrapper, {
+  const mockStickyRect = jest
+    .spyOn(wrapper.element, 'getBoundingClientRect')
+    .mockReturnValue({
       top: -100,
       bottom: -90,
     });
@@ -124,12 +121,12 @@ test('should allow to using offset-top prop with rem unit', async () => {
   await mockScrollTop(100);
   expect(wrapper.html()).toMatchSnapshot();
 
-  restore();
+  mockStickyRect.mockRestore();
   window.getComputedStyle = originGetComputedStyle;
 });
 
 test('should allow to using offset-top prop with vw unit', async () => {
-  Object.defineProperty(window, 'innerWidth', { value: 300 });
+  window.innerWidth = 300;
 
   const wrapper = mount({
     render() {
@@ -141,7 +138,9 @@ test('should allow to using offset-top prop with vw unit', async () => {
     },
   });
 
-  const restore = mockStickyRect(wrapper, {
+  const mockStickyRect = jest
+    .spyOn(wrapper.element, 'getBoundingClientRect')
+    .mockReturnValue({
       top: -100,
       bottom: -90,
     });
@@ -149,7 +148,7 @@ test('should allow to using offset-top prop with vw unit', async () => {
   await mockScrollTop(100);
   expect(wrapper.html()).toMatchSnapshot();
 
-  restore();
+  mockStickyRect.mockRestore();
 });
 
 test('should not trigger scroll event when hidden', () => {
@@ -188,19 +187,19 @@ test('should sticky inside container when using container prop', async () => {
   });
 
   const mockStickyRect = jest
-    .spyOn(wrapper.element.firstElementChild!, 'getBoundingClientRect')
+    .spyOn(wrapper.element.firstElementChild, 'getBoundingClientRect')
     .mockReturnValue({
       height: 44,
       width: 88,
       top: -100,
       bottom: -56,
-    } as DOMRect);
+    });
   const mockContainerRect = jest
     .spyOn(wrapper.element, 'getBoundingClientRect')
     .mockReturnValue({
       top: -100,
       bottom: 50,
-    } as DOMRect);
+    });
 
   await mockScrollTop(100);
   expect(wrapper.html()).toMatchSnapshot();
@@ -210,11 +209,11 @@ test('should sticky inside container when using container prop', async () => {
     width: 88,
     top: -120,
     bottom: -76,
-  } as DOMRect);
+  });
   mockContainerRect.mockReturnValue({
     top: -120,
     bottom: 30,
-  } as DOMRect);
+  });
   await mockScrollTop(120);
   expect(wrapper.html()).toMatchSnapshot();
   mockContainerRect.mockRestore();
@@ -253,13 +252,13 @@ test('should sticky inside container bottom when using container prop', async ()
       width: 88,
       top: 690,
       bottom: 734,
-    } as DOMRect);
+    });
   const mockContainerRect = jest
     .spyOn(wrapper.element, 'getBoundingClientRect')
     .mockReturnValue({
       top: 540,
       bottom: 734,
-    } as DOMRect);
+    });
 
   await mockScrollTop(100);
   expect(wrapper.html()).toMatchSnapshot();
@@ -269,11 +268,11 @@ test('should sticky inside container bottom when using container prop', async ()
     width: 88,
     top: 770,
     bottom: 814,
-  } as DOMRect);
+  });
   mockContainerRect.mockReturnValue({
     top: 620,
     bottom: 814,
-  } as DOMRect);
+  });
   await mockScrollTop(20);
   expect(wrapper.html()).toMatchSnapshot();
   mockContainerRect.mockRestore();
@@ -287,13 +286,10 @@ test('should emit scroll event when visibility changed', async () => {
   const unobserve = jest.fn();
   const onScroll = jest.fn();
 
-  type ObserverCallback = (
+  let observerCallback;
-    entries: Partial<IntersectionObserverEntry>[]
-  ) => void;
-  let observerCallback: ObserverCallback = () => {};
 
-  window.IntersectionObserver = class MockIntersectionObserver {
+  window.IntersectionObserver = class IntersectionObserver {
-    constructor(callback: ObserverCallback) {
+    constructor(callback) {
       observerCallback = callback;
     }
 
@@ -304,7 +300,7 @@ test('should emit scroll event when visibility changed', async () => {
     unobserve() {
       unobserve();
     }
-  } as any;
+  };
 
   const wrapper = mount({
     render() {
@@ -341,14 +337,15 @@ test('should emit change event when sticky status changed', async () => {
       style: 'height: 10px',
     },
   });
-
+  const mockStickyRect = jest
-  const restore = mockStickyRect(wrapper as any, {
+    .spyOn(wrapper.element, 'getBoundingClientRect')
+    .mockReturnValue({
       top: -100,
       bottom: -90,
     });
 
   await mockScrollTop(100);
-  expect(wrapper.emitted('change')![0]).toEqual([true]);
+  expect(wrapper.emitted('change')[0]).toEqual([true]);
 
-  restore();
+  mockStickyRect.mockRestore();
 });

src/swipe/Swipe.tsx

@@ -139,14 +139,14 @@ export default defineComponent({
     });
 
     const trackStyle = computed(() => {
+      const mainAxis = props.vertical ? 'height' : 'width';
+      const crossAxis = props.vertical ? 'width' : 'height';
       const style: CSSProperties = {
         transitionDuration: `${state.swiping ? 0 : props.duration}ms`,
         transform: `translate${props.vertical ? 'Y' : 'X'}(${state.offset}px)`,
       };
 
       if (size.value) {
-        const mainAxis = props.vertical ? 'height' : 'width';
-        const crossAxis = props.vertical ? 'width' : 'height';
         style[mainAxis] = `${trackSize.value}px`;
         style[crossAxis] = props[crossAxis] ? `${props[crossAxis]}px` : '';
       }
@@ -225,7 +225,8 @@ export default defineComponent({
 
       if (state.active <= -1) {
         move({ pace: count.value });
-      } else if (state.active >= count.value) {
+      }
+      if (state.active >= count.value) {
         move({ pace: -count.value });
       }
     };

src/tab/test/insert.spec.js

@@ -1,4 +1,3 @@
-import { defineComponent } from 'vue';
 import { mount, later } from '../../../test';
 import { Tab } from '..';
 import { Tabs } from '../../tabs';
@@ -65,11 +64,11 @@ test('should render correctly after inserting a tab with name', async () => {
 });
 
 test('should render Tab inside a component correctly', async () => {
-  const MyTab = defineComponent({
+  const MyTab = {
     render() {
       return <Tab title="2">2</Tab>;
     },
-  });
+  };
 
   const wrapper = mount({
     render() {

src/toast/index.ts

@@ -1,6 +0,0 @@
-import { Toast, ToastOptions } from './function-call';
-import type { ToastType, ToastPosition } from './Toast';
-
-export default Toast;
-export { Toast };
-export type { ToastType, ToastOptions, ToastPosition };

src/toast/index.tsx

@@ -185,4 +185,6 @@ Toast.install = (app: App) => {
   app.config.globalProperties.$toast = Toast;
 };
 
+export default Toast;
 export { Toast };
+export type { ToastType, ToastPosition };

src/toast/test/function.spec.ts

@@ -1,7 +1,7 @@
-import { createApp } from 'vue';
 import { later } from '../../../test';
-import { Toast } from '../function-call';
+import Toast from '../index';
 import ToastComponent from '../Toast';
+import { createApp } from 'vue';
 
 test('toast disappeared after duration', async () => {
   const onClose = jest.fn();

src/tree-select/test/__snapshots__/index.legacy.js.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`content slot 1`] = `
+<div class="van-tree-select" style="height: 300px;">
+  <div class="van-sidebar van-tree-select__nav"><a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
+      <div class="van-sidebar-item__text">group1
+        <!---->
+      </div>
+    </a></div>
+  <div class="van-tree-select__content">Custom Content</div>
+</div>
+`;
+
+exports[`empty list 1`] = `
+<div class="van-tree-select" style="height: 300px;">
+  <div class="van-sidebar van-tree-select__nav"></div>
+  <div class="van-tree-select__content"></div>
+</div>
+`;
+
+exports[`height prop 1`] = `
+<div class="van-tree-select" style="height: 100vh;">
+  <div class="van-sidebar van-tree-select__nav"></div>
+  <div class="van-tree-select__content"></div>
+</div>
+`;
+
+exports[`nav render badge 1`] = `
+<div class="van-tree-select" style="height: 300px;">
+  <div class="van-sidebar van-tree-select__nav"><a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
+      <div class="van-sidebar-item__text">group1<div class="van-badge van-sidebar-item__badge">3</div>
+      </div>
+    </a></div>
+  <div class="van-tree-select__content"></div>
+</div>
+`;
+
+exports[`selected-icon prop 1`] = `
+<div class="van-ellipsis van-tree-select__item van-tree-select__item--active">city1<i class="van-icon van-icon-foo van-tree-select__selected">
+    <!----></i></div>
+`;

src/tree-select/test/__snapshots__/index.spec.tsx.snap

@@ -1,56 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should change selected icon when using selected-icon prop 1`] = `
-<div class="van-ellipsis van-tree-select__item van-tree-select__item--active">
-  city1
-  <i class="van-badge__wrapper van-icon van-icon-foo van-tree-select__selected">
-  </i>
-</div>
-`;
-
-exports[`should render content slot correctly 1`] = `
-<div class="van-tree-select"
-     style="height: 300px;"
->
-  <div class="van-sidebar van-tree-select__nav">
-    <a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
-      <div class="van-badge__wrapper van-sidebar-item__text">
-        group1
-      </div>
-    </a>
-  </div>
-  <div class="van-tree-select__content">
-    Custom Content
-  </div>
-</div>
-`;
-
-exports[`should render empty TreeSelect correctly 1`] = `
-<div class="van-tree-select"
-     style="height: 300px;"
->
-  <div class="van-sidebar van-tree-select__nav">
-  </div>
-  <div class="van-tree-select__content">
-  </div>
-</div>
-`;
-
-exports[`should render nav badge correctly 1`] = `
-<div class="van-tree-select"
-     style="height: 300px;"
->
-  <div class="van-sidebar van-tree-select__nav">
-    <a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
-      <div class="van-badge__wrapper van-sidebar-item__text">
-        group1
-        <div class="van-badge van-badge--fixed">
-          3
-        </div>
-      </div>
-    </a>
-  </div>
-  <div class="van-tree-select__content">
-  </div>
-</div>
-`;

src/tree-select/test/index.legacy.js

@@ -0,0 +1,339 @@
+import { TreeSelect } from '..';
+import { mount } from '../../../test';
+
+test('empty list', () => {
+  expect(mount(TreeSelect)).toMatchSnapshot();
+});
+
+const mockItem = {
+  text: 'city1',
+  id: 1,
+};
+
+const mockItem2 = {
+  text: 'city2',
+  id: 2,
+};
+
+const mockItems = [
+  {
+    text: 'group1',
+    children: [mockItem],
+  },
+  {
+    text: 'group2',
+    children: [mockItem],
+  },
+];
+
+test('click-nav event', () => {
+  const onClickNav = jest.fn();
+
+  const wrapper = mount(TreeSelect, {
+    props: {
+      items: mockItems,
+    },
+    context: {
+      on: {
+        'click-nav': onClickNav,
+      },
+    },
+  });
+
+  const navItems = wrapper.findAll('.van-tree-select__nav-item');
+  navItems[1].trigger('click');
+
+  expect(onClickNav).toHaveBeenCalledWith(1);
+});
+
+test('click-item event', () => {
+  const onClickItem = jest.fn();
+
+  const wrapper = mount(TreeSelect, {
+    props: {
+      items: mockItems,
+    },
+    context: {
+      on: {
+        'click-item': onClickItem,
+      },
+    },
+  });
+
+  const items = wrapper.findAll('.van-tree-select__item');
+  items[0].trigger('click');
+  expect(onClickItem).toHaveBeenCalledWith(mockItem);
+});
+
+test('click disabled nav', () => {
+  const onClickNav = jest.fn();
+
+  const wrapper = mount(TreeSelect, {
+    props: {
+      items: [
+        {
+          text: 'group1',
+          children: [mockItem],
+          disabled: true,
+        },
+      ],
+    },
+    context: {
+      on: {
+        'click-nav': onClickNav,
+      },
+    },
+  });
+
+  const items = wrapper.findAll('.van-tree-select__nav-item');
+  items[0].trigger('click');
+  expect(onClickNav).toHaveBeenCalledTimes(0);
+});
+
+test('click disabled item', () => {
+  const onClickItem = jest.fn();
+  const wrapper = mount(TreeSelect, {
+    props: {
+      items: [
+        {
+          text: 'group1',
+          children: [
+            {
+              ...mockItem,
+              disabled: true,
+            },
+          ],
+        },
+      ],
+    },
+    context: {
+      on: {
+        'click-item': onClickItem,
+      },
+    },
+  });
+
+  const items = wrapper.findAll('.van-tree-select__item');
+  items[0].trigger('click');
+  expect(onClickItem).toHaveBeenCalledTimes(0);
+});
+
+test('content slot', () => {
+  const wrapper = mount(TreeSelect, {
+    props: {
+      items: [
+        {
+          text: 'group1',
+        },
+      ],
+    },
+    slots: {
+      content: () => 'Custom Content',
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('height prop', () => {
+  const wrapper = mount(TreeSelect, {
+    props: {
+      height: '100vh',
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('nav render badge', () => {
+  const wrapper = mount(TreeSelect, {
+    props: {
+      items: [
+        {
+          text: 'group1',
+          badge: 3,
+        },
+      ],
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('use sync modifier in main-active-index', () => {
+  const wrapper = mount({
+    template: `
+      <van-tree-select
+        :items="items"
+        :main-active-index.sync="mainActiveIndex"
+      />
+    `,
+    data() {
+      return {
+        mainActiveIndex: -1,
+        items: mockItems,
+      };
+    },
+  });
+
+  const navItems = wrapper.findAll('.van-tree-select__nav-item');
+  navItems[0].trigger('click');
+
+  expect(wrapper.vm.mainActiveIndex).toEqual(0);
+});
+
+test('use sync modifier in active-id', () => {
+  const wrapper = mount({
+    template: `
+      <van-tree-select
+        :items="items"
+        :main-active-index="0"
+        :active-id.sync="activeId"
+      />
+    `,
+    data() {
+      return {
+        activeId: mockItem.id,
+        mainActiveIndex: 0,
+        items: [
+          {
+            text: 'group1',
+            children: [mockItem, mockItem2],
+          },
+        ],
+      };
+    },
+  });
+
+  const items = wrapper.findAll('.van-tree-select__item');
+  items[1].trigger('click');
+
+  expect(wrapper.vm.activeId).toEqual(mockItem2.id);
+});
+
+test('multiple select', () => {
+  const wrapper = mount({
+    template: `
+      <van-tree-select
+        :items="items"
+        :main-active-index="0"
+        :active-id.sync="activeId"
+      />
+    `,
+    data() {
+      return {
+        activeId: [],
+        mainActiveIndex: 0,
+        items: [
+          {
+            text: 'group1',
+            children: [mockItem, mockItem2],
+          },
+        ],
+      };
+    },
+  });
+
+  const items = wrapper.findAll('.van-tree-select__item');
+  items[0].trigger('click');
+  items[1].trigger('click');
+  expect(wrapper.vm.activeId).toEqual([mockItem.id, mockItem2.id]);
+
+  items[0].trigger('click');
+  items[1].trigger('click');
+  expect(wrapper.vm.activeId).toEqual([]);
+});
+
+test('max prop', () => {
+  const wrapper = mount({
+    template: `
+      <van-tree-select
+        :max="1"
+        :items="items"
+        :main-active-index="0"
+        :active-id.sync="activeId"
+      />
+    `,
+    data() {
+      return {
+        activeId: [],
+        items: [
+          {
+            text: 'group1',
+            children: [mockItem, mockItem2],
+          },
+        ],
+      };
+    },
+  });
+
+  const items = wrapper.findAll('.van-tree-select__item');
+  items[0].trigger('click');
+  items[1].trigger('click');
+  expect(wrapper.vm.activeId).toEqual([mockItem.id]);
+});
+
+test('className of nav', () => {
+  const wrapper = mount(TreeSelect, {
+    props: {
+      mainActiveIndex: 0,
+      items: [
+        {
+          text: 'group1',
+          className: 'my-class',
+          children: [],
+        },
+      ],
+    },
+  });
+
+  const items = wrapper.findAll('.van-tree-select__nav-item');
+  expect(items[0].element.classList.contains('my-class')).toBeTruthy();
+});
+
+test('should sync value before trigger click-item event', (done) => {
+  const wrapper = mount({
+    template: `
+      <van-tree-select
+        :items="items"
+        :main-active-index="0"
+        :active-id.sync="activeId"
+        @click-item="onClickItem"
+      />
+    `,
+    data() {
+      return {
+        activeId: mockItem.id,
+        mainActiveIndex: 0,
+        items: [
+          {
+            text: 'group1',
+            children: [mockItem, mockItem2],
+          },
+        ],
+      };
+    },
+    methods: {
+      onClickItem() {
+        expect(wrapper.vm.activeId).toEqual(mockItem2.id);
+        done();
+      },
+    },
+  });
+
+  const items = wrapper.findAll('.van-tree-select__item');
+  items[1].trigger('click');
+});
+
+test('selected-icon prop', () => {
+  const wrapper = mount(TreeSelect, {
+    props: {
+      items: mockItems,
+      activeId: 1,
+      mainActiveIndex: 0,
+      selectedIcon: 'foo',
+    },
+  });
+
+  expect(wrapper.find('.van-tree-select__item')).toMatchSnapshot();
+});

src/tree-select/test/index.spec.tsx

@@ -1,232 +0,0 @@
-import { TreeSelect } from '..';
-import { mount } from '../../../test';
-
-const mockItem = {
-  text: 'city1',
-  id: 1,
-};
-
-const mockItem2 = {
-  text: 'city2',
-  id: 2,
-};
-
-const mockItems = [
-  {
-    text: 'group1',
-    children: [mockItem],
-  },
-  {
-    text: 'group2',
-    children: [mockItem],
-  },
-];
-
-test('should render empty TreeSelect correctly', () => {
-  expect(mount(TreeSelect).html()).toMatchSnapshot();
-});
-
-test('should emit click-nav event when nav item is clicked', () => {
-  const wrapper = mount(TreeSelect, {
-    props: {
-      items: mockItems,
-    },
-  });
-
-  const navItems = wrapper.findAll('.van-tree-select__nav-item');
-  navItems[1].trigger('click');
-  expect(wrapper.emitted('update:mainActiveIndex')?.[0]).toEqual([1]);
-  expect(wrapper.emitted('click-nav')?.[0]).toEqual([1]);
-});
-
-test('should emit click-item event when item is clicked', () => {
-  const wrapper = mount(TreeSelect, {
-    props: {
-      items: mockItems,
-    },
-  });
-
-  const items = wrapper.findAll('.van-tree-select__item');
-  items[0].trigger('click');
-  expect(wrapper.emitted('update:activeId')?.[0]).toEqual([mockItem.id]);
-  expect(wrapper.emitted('click-item')?.[0]).toEqual([mockItem]);
-});
-
-test('should not emit click-nav event when disabled nav item is clicked', () => {
-  const wrapper = mount(TreeSelect, {
-    props: {
-      items: [
-        {
-          text: 'group1',
-          children: [mockItem],
-          disabled: true,
-        },
-      ],
-    },
-  });
-
-  const items = wrapper.findAll('.van-tree-select__nav-item');
-  items[0].trigger('click');
-  expect(wrapper.emitted('click-nav')).toBeFalsy();
-});
-
-test('should not emit click-item event when disabled item is clicked', () => {
-  const wrapper = mount(TreeSelect, {
-    props: {
-      items: [
-        {
-          text: 'group1',
-          children: [
-            {
-              ...mockItem,
-              disabled: true,
-            },
-          ],
-        },
-      ],
-    },
-  });
-
-  const items = wrapper.findAll('.van-tree-select__item');
-  items[0].trigger('click');
-  expect(wrapper.emitted('click-item')).toBeFalsy();
-});
-
-test('should render content slot correctly', () => {
-  const wrapper = mount(TreeSelect, {
-    props: {
-      items: [
-        {
-          text: 'group1',
-        },
-      ],
-    },
-    slots: {
-      content: () => 'Custom Content',
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('should change height when using height prop', () => {
-  const wrapper = mount(TreeSelect, {
-    props: {
-      height: '100vh',
-    },
-  });
-
-  expect(wrapper.style.height).toEqual('100vh');
-});
-
-test('should render nav badge correctly', () => {
-  const wrapper = mount(TreeSelect, {
-    props: {
-      items: [
-        {
-          text: 'group1',
-          badge: 3,
-        },
-      ],
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('should allow to select multiple items when activeId is array', async () => {
-  const wrapper = mount({
-    data() {
-      return {
-        activeId: [],
-        mainActiveIndex: 0,
-        items: [
-          {
-            text: 'group1',
-            children: [mockItem, mockItem2],
-          },
-        ],
-      };
-    },
-    render() {
-      return (
-        <TreeSelect
-          v-model={[this.activeId, 'activeId']}
-          items={this.items}
-          mainActiveIndex={0}
-        />
-      );
-    },
-  });
-
-  const items = wrapper.findAll('.van-tree-select__item');
-  await items[0].trigger('click');
-  await items[1].trigger('click');
-  expect(wrapper.vm.activeId).toEqual([mockItem.id, mockItem2.id]);
-
-  await items[0].trigger('click');
-  await items[1].trigger('click');
-  expect(wrapper.vm.activeId).toEqual([]);
-});
-
-test('should limit the selected item number when using max prop', async () => {
-  const wrapper = mount({
-    data() {
-      return {
-        activeId: [],
-        items: [
-          {
-            text: 'group1',
-            children: [mockItem, mockItem2],
-          },
-        ],
-      };
-    },
-    render() {
-      return (
-        <TreeSelect
-          v-model={[this.activeId, 'activeId']}
-          max={1}
-          items={this.items}
-          mainActiveIndex={0}
-        />
-      );
-    },
-  });
-
-  const items = wrapper.findAll('.van-tree-select__item');
-  await items[0].trigger('click');
-  await items[1].trigger('click');
-  expect(wrapper.vm.activeId).toEqual([mockItem.id]);
-});
-
-test('should allow to custom nav item className', () => {
-  const wrapper = mount(TreeSelect, {
-    props: {
-      mainActiveIndex: 0,
-      items: [
-        {
-          text: 'group1',
-          className: 'my-class',
-          children: [],
-        },
-      ],
-    },
-  });
-
-  const items = wrapper.findAll('.van-tree-select__nav-item');
-  expect(items[0].classes()).toContain('my-class');
-});
-
-test('should change selected icon when using selected-icon prop', () => {
-  const wrapper = mount(TreeSelect, {
-    props: {
-      items: mockItems,
-      activeId: 1,
-      mainActiveIndex: 0,
-      selectedIcon: 'foo',
-    },
-  });
-
-  expect(wrapper.find('.van-tree-select__item').html()).toMatchSnapshot();
-});

src/utils/base.ts

@@ -38,8 +38,6 @@ export function get(object: any, path: string): any {
   return result;
 }
 
-type Writeable<T> = { -readonly [P in keyof T]: T[P] };
-
 export function pick<T, U extends keyof T>(
   obj: T,
   keys: ReadonlyArray<U>,
@@ -50,5 +48,5 @@ export function pick<T, U extends keyof T>(
       ret[key] = obj[key];
     }
     return ret;
-  }, {} as Writeable<Pick<T, U>>);
+  }, {} as Pick<T, U>);
 }

src/utils/deep-assign.ts

@@ -1,4 +1,4 @@
-import { isDef, isObject } from './base';
+import { isDef, isObject } from '.';
 
 type ObjectIndex = Record<string, any>;
 

src/vue-tsx-shim.d.ts

@@ -36,6 +36,5 @@ declare module 'vue' {
     onTouchmove?: EventHandler;
     onTouchstart?: EventHandler;
     onTouchcancel?: EventHandler;
-    onSelectSearch?: EventHandler;
   }
 }

yarn.lock

@@ -1867,10 +1867,10 @@
     "@typescript-eslint/types" "4.6.0"
     eslint-visitor-keys "^2.0.0"
 
-"@vant/cli@^3.8.0":
+"@vant/cli@^3.7.1":
-  version "3.8.0"
+  version "3.7.1"
-  resolved "https://registry.npm.taobao.org/@vant/cli/download/@vant/cli-3.8.0.tgz?cache=0&sync_timestamp=1617347573376&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vant%2Fcli%2Fdownload%2F%40vant%2Fcli-3.8.0.tgz#0a37cf5386359c5d08690c594ee641b0bac5c2d0"
+  resolved "https://registry.npm.taobao.org/@vant/cli/download/@vant/cli-3.7.1.tgz?cache=0&sync_timestamp=1616038598245&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vant%2Fcli%2Fdownload%2F%40vant%2Fcli-3.7.1.tgz#d79195fa6cc63fe3ba45aeba45330a4b0ed84b2b"
-  integrity sha1-CjfPU4Y1nF0IaQxZTuZBsLrFwtA=
+  integrity sha1-15GV+mzGP+O6Ra66RTMKSw7YSys=
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/plugin-transform-object-assign" "^7.12.1"
@@ -1884,7 +1884,7 @@
     "@types/webpack-dev-server" "^3.11.1"
     "@vant/eslint-config" "^3.2.0"
     "@vant/markdown-loader" "^4.0.0"
-    "@vant/markdown-vetur" "^2.1.0"
+    "@vant/markdown-vetur" "^2.0.2"
     "@vant/stylelint-config" "^1.4.2"
     "@vant/touch-emulator" "^1.2.0"
     "@vue/babel-plugin-jsx" "^1.0.1"
@@ -1971,10 +1971,10 @@
     markdown-it-anchor "^6.0.0"
     transliteration "^2.1.11"
 
-"@vant/markdown-vetur@^2.1.0":
+"@vant/markdown-vetur@^2.0.2":
-  version "2.1.0"
+  version "2.0.2"
-  resolved "https://registry.npm.taobao.org/@vant/markdown-vetur/download/@vant/markdown-vetur-2.1.0.tgz?cache=0&sync_timestamp=1617347165035&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vant%2Fmarkdown-vetur%2Fdownload%2F%40vant%2Fmarkdown-vetur-2.1.0.tgz#cc49ad807dfcccca898562966d64b7a657ca3aad"
+  resolved "https://registry.npm.taobao.org/@vant/markdown-vetur/download/@vant/markdown-vetur-2.0.2.tgz#8e6be188952a2c4b0e1d626bf93f47f84ab0f22d"
-  integrity sha1-zEmtgH38zMqJhWKWbWS3plfKOq0=
+  integrity sha1-jmvhiJUqLEsOHWJr+T9H+Eqw8i0=
   dependencies:
     fast-glob "^3.2.2"
     fs-extra "^9.0.0"
@@ -11217,9 +11217,9 @@ xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
 y18n@^4.0.0:
-  version "4.0.1"
+  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.1.tgz#8db2b83c31c5d75099bb890b23f3094891e247d4"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
-  integrity sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ==
+  integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==
 
 yallist@^3.0.2:
   version "3.1.1"