chore(Dialog): rename unreleased API (#10783)

* refactor(Notify): redesign function-call API

* docs: update

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx --no-install lint-staged
+npx --no-install nano-staged

LICENSE

@@ -1,4 +1,7 @@
-Copyright 2016-present Youzan
+MIT License
+
+Copyright (c) Youzan
+Copyright (c) Chen Jiahan and other contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package.json

@@ -9,7 +9,7 @@
     "build": "pnpm --dir ./packages/vant build",
     "build:site": "pnpm --dir ./packages/vant build:site"
   },
-  "lint-staged": {
+  "nano-staged": {
     "*.md": "prettier --write",
     "*.{ts,tsx,js,vue,less}": "prettier --write",
     "*.{ts,tsx,js,vue}": "eslint --fix",
@@ -22,7 +22,7 @@
     "@vant/stylelint-config": "workspace:*",
     "eslint": "^8.2.0",
     "husky": "^8.0.1",
-    "lint-staged": "^12.1.2",
+    "nano-staged": "^0.8.0",
     "prettier": "^2.5.0",
     "rimraf": "^3.0.2",
     "stylelint": "^13.13.1"

packages/create-vant-cli-app/LICENSE

@@ -0,0 +1,10 @@
+MIT License
+
+Copyright (c) Youzan
+Copyright (c) Chen Jiahan and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/create-vant-cli-app/generators/vue2/package.json.tpl

@@ -20,11 +20,11 @@
   "author": "",
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged",
+      "pre-commit": "nano-staged",
       "commit-msg": "vant-cli commit-lint"
     }
   },
-  "lint-staged": {
+  "nano-staged": {
     "*.{ts,tsx,js,jsx,vue}": "eslint --fix",
     "*.{vue,css,less,scss}": "stylelint --fix"
   },

packages/create-vant-cli-app/generators/vue3/.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx --no-install lint-staged
+npx --no-install nano-staged

packages/create-vant-cli-app/generators/vue3/package.json.tpl

@@ -22,7 +22,7 @@
     "test:coverage": "open test/coverage/index.html"
   },
   "author": "",
-  "lint-staged": {
+  "nano-staged": {
     "*.md": "prettier --write",
     "*.{ts,tsx,js,vue,less,scss}": "prettier --write",
     "*.{ts,tsx,js,vue}": "eslint --fix",

packages/create-vant-cli-app/package.json

@@ -33,15 +33,15 @@
   "devDependencies": {
     "@types/fs-extra": "^9.0.13",
     "@types/inquirer": "^8.1.3",
-    "release-it": "^14.11.6",
-    "typescript": "~4.5.2"
+    "release-it": "^15.1.1",
+    "typescript": "^4.7.4"
   },
   "dependencies": {
-    "chalk": "^4.1.2",
     "consola": "^2.11.3",
     "fast-glob": "^3.2.4",
     "fs-extra": "^10.0.0",
-    "inquirer": "^8.0.0"
+    "inquirer": "^8.0.0",
+    "picocolors": "^1.0.0"
   },
   "release-it": {
     "git": {

packages/create-vant-cli-app/src/generator.ts

@@ -1,6 +1,6 @@
 import fs from 'fs-extra';
 import glob from 'fast-glob';
-import chalk from 'chalk';
+import color from 'picocolors';
 import consola from 'consola';
 import { prompt } from 'inquirer';
 import { sep, join } from 'path';
@@ -64,7 +64,7 @@ export class VanGenerator {
 
   writing() {
     console.log();
-    consola.info(`Creating project in ${chalk.green(this.outputDir)}\n`);
+    consola.info(`Creating project in ${color.green(this.outputDir)}\n`);
 
     // see https://github.com/mrmlnc/fast-glob#how-to-write-patterns-on-windows
     const templatePath = join(GENERATOR_DIR, this.inputs.vueVersion).replace(
@@ -99,16 +99,16 @@ export class VanGenerator {
     fs.writeFileSync(to, content);
 
     const name = to.replace(this.outputDir + sep, '');
-    consola.success(`${chalk.green('create')} ${name}`);
+    consola.success(`${color.green('create')} ${name}`);
   }
 
   end() {
     const { name } = this.inputs;
 
     console.log();
-    consola.success(`Successfully created ${chalk.yellow(name)}.`);
+    consola.success(`Successfully created ${color.yellow(name)}.`);
     consola.success(
-      `Run ${chalk.yellow(
+      `Run ${color.yellow(
         `cd ${name} && git init && yarn && yarn dev`
       )} to start development!`
     );

packages/vant-area-data/LICENSE

@@ -0,0 +1,10 @@
+MIT License
+
+Copyright (c) Youzan
+Copyright (c) Chen Jiahan and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/vant-area-data/package.json

@@ -37,8 +37,8 @@
   "license": "MIT",
   "devDependencies": {
     "esbuild": "^0.14.29",
-    "release-it": "^14.2.2",
-    "typescript": "~4.5.2"
+    "release-it": "^15.1.1",
+    "typescript": "^4.7.4"
   },
   "release-it": {
     "git": {

packages/vant-cli/LICENSE

@@ -0,0 +1,10 @@
+MIT License
+
+Copyright (c) Youzan
+Copyright (c) Chen Jiahan and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/vant-cli/README.md

@@ -47,7 +47,7 @@ Please add the followed config to `package.json` file.
     "release": "vant-cli release",
     "build-site": "vant-cli build-site"
   },
-  "lint-staged": {
+  "nano-staged": {
     "*.md": "prettier --write",
     "*.{ts,tsx,js,vue,less,scss}": "prettier --write",
     "*.{ts,tsx,js,vue}": "eslint --fix",

packages/vant-cli/README.zh-CN.md

@@ -43,7 +43,7 @@ pnpm add @vant/cli -D
     "release": "vant-cli release",
     "build-site": "vant-cli build-site"
   },
-  "lint-staged": {
+  "nano-staged": {
     "*.md": "prettier --write",
     "*.{ts,tsx,js,vue,less,scss}": "prettier --write",
     "*.{ts,tsx,js,vue}": "eslint --fix",

packages/vant-cli/changelog.md

@@ -1,5 +1,15 @@
 # 更新日志
 
+## v4.0.3
+
+`2022-07-02`
+
+- 新增 `build.bundleOptions` 配置项
+- 新增 `css.removeSourceFile` 配置项
+- 修复编译后的 script setup 中，引用的组件不生效的问题
+- 移除未使用的 esm bundle
+- 移除未使用的 ssr.js 文件
+
 ## v4.0.2
 
 `2022-05-14`

packages/vant-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vant/cli",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "type": "module",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -61,8 +61,7 @@
     "@vitejs/plugin-vue-jsx": "^1.3.3",
     "@vue/babel-plugin-jsx": "^1.1.1",
     "autoprefixer": "^10.4.0",
-    "chalk": "^4.1.2",
-    "commander": "^8.3.0",
+    "commander": "^9.3.0",
     "consola": "^2.15.3",
     "conventional-changelog": "^3.1.24",
     "esbuild": "^0.14.29",
@@ -78,17 +77,18 @@
     "jest-canvas-mock": "^2.3.1",
     "jest-serializer-html": "^7.1.0",
     "less": "^4.1.2",
-    "lint-staged": "^12.1.2",
     "markdown-it": "^12.2.0",
     "markdown-it-anchor": "^8.4.1",
-    "ora": "^6.0.1",
+    "nano-staged": "^0.8.0",
+    "nanospinner": "^1.1.0",
+    "picocolors": "^1.0.0",
     "postcss": "^8.3.11",
     "postcss-load-config": "^3.1.0",
     "prettier": "^2.5.0",
-    "release-it": "^14.11.6",
+    "release-it": "^15.1.1",
     "stylelint": "^13.0.0",
     "transliteration": "^2.2.0",
-    "typescript": "^4.5.2",
+    "typescript": "^4.7.4",
     "vite": "^2.9.0",
     "vite-plugin-html": "^2.1.1",
     "vite-plugin-md": "^0.11.4",

packages/vant-cli/src/cli.ts

@@ -1,25 +1,26 @@
 import { Command } from 'commander';
 
-import {
-  dev,
-  lint,
-  test,
-  clean,
-  build,
-  release,
-  changelog,
-  buildSite,
-  commitLint,
-  cliVersion,
-} from './index.js';
+import { cliVersion } from './index.js';
 
 const program = new Command();
 
 program.version(`@vant/cli ${cliVersion}`);
 
-program.command('dev').description('Run dev server').action(dev);
+program
+  .command('dev')
+  .description('Run dev server')
+  .action(async () => {
+    const { dev } = await import('./commands/dev.js');
+    return dev();
+  });
 
-program.command('lint').description('Run eslint and stylelint').action(lint);
+program
+  .command('lint')
+  .description('Run eslint and stylelint')
+  .action(async () => {
+    const { lint } = await import('./commands/lint.js');
+    return lint();
+  });
 
 program
   .command('test')
@@ -45,34 +46,58 @@ program
     'Run all tests serially in the current process, rather than creating a worker pool of child processes that run tests'
   )
   .option('--debug', 'Print debugging info about your Jest config')
-  .action(test);
+  .action(async (options) => {
+    const { test } = await import('./commands/jest.js');
+    return test(options);
+  });
 
-program.command('clean').description('Clean all dist files').action(clean);
+program
+  .command('clean')
+  .description('Clean all dist files')
+  .action(async () => {
+    const { clean } = await import('./commands/clean.js');
+    return clean();
+  });
 
 program
   .command('build')
   .description('Compile components in production mode')
-  .action(build);
+  .action(async () => {
+    const { build } = await import('./commands/build.js');
+    return build();
+  });
 
 program
   .command('release')
   .description('Compile components and release it')
   .option('--tag <tag>', 'Release tag')
-  .action(release);
+  .action(async (options) => {
+    const { release } = await import('./commands/release.js');
+    return release(options);
+  });
 
 program
   .command('build-site')
   .description('Compile site in production mode')
-  .action(buildSite);
+  .action(async () => {
+    const { buildSite } = await import('./commands/build-site.js');
+    return buildSite();
+  });
 
 program
   .command('changelog')
   .description('Generate changelog')
-  .action(changelog);
+  .action(async () => {
+    const { changelog } = await import('./commands/changelog.js');
+    return changelog();
+  });
 
 program
   .command('commit-lint <gitParams>')
   .description('Lint commit message')
-  .action(commitLint);
+  .action(async (gitParams) => {
+    const { commitLint } = await import('./commands/commit-lint.js');
+    return commitLint(gitParams);
+  });
 
 program.parse();

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

@@ -3,7 +3,7 @@ import execa from 'execa';
 import { join, relative } from 'path';
 import { clean } from './clean.js';
 import { CSS_LANG } from '../common/css.js';
-import { ora, consola } from '../common/logger.js';
+import { createSpinner, consola } from '../common/logger.js';
 import { installDependencies } from '../common/manager.js';
 import { compileSfc } from '../compiler/compile-sfc.js';
 import { compileStyle } from '../compiler/compile-style.js';
@@ -178,14 +178,14 @@ const tasks = [
 async function runBuildTasks() {
   for (let i = 0; i < tasks.length; i++) {
     const { task, text } = tasks[i];
-    const spinner = ora(text).start();
+    const spinner = createSpinner(text).start();
 
     try {
       /* eslint-disable no-await-in-loop */
       await task();
-      spinner.succeed(text);
+      spinner.success({ text });
     } catch (err) {
-      spinner.fail(text);
+      spinner.error({ text });
       console.log(err);
       throw err;
     }

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

@@ -1,7 +1,7 @@
 import { join, dirname } from 'path';
 import { fileURLToPath } from 'url';
 import { ROOT } from '../common/constant.js';
-import { ora, slimPath } from '../common/logger.js';
+import { createSpinner, slimPath } from '../common/logger.js';
 import { createWriteStream, readFileSync } from 'fs';
 import conventionalChangelog from 'conventional-changelog';
 
@@ -48,7 +48,7 @@ function transform(item: any) {
 }
 
 export async function changelog(): Promise<void> {
-  const spinner = ora('Generating changelog...').start();
+  const spinner = createSpinner('Generating changelog...').start();
 
   return new Promise((resolve) => {
     conventionalChangelog(
@@ -68,7 +68,9 @@ export async function changelog(): Promise<void> {
     )
       .pipe(createWriteStream(DIST_FILE))
       .on('close', () => {
-        spinner.succeed(`Changelog generated at ${slimPath(DIST_FILE)}`);
+        spinner.success({
+          text: `Changelog generated at ${slimPath(DIST_FILE)}`,
+        });
         resolve();
       });
   });

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

@@ -1,5 +1,5 @@
 import execa from 'execa';
-import { consola, ora } from '../common/logger.js';
+import { consola, createSpinner } from '../common/logger.js';
 import { SCRIPT_EXTS } from '../common/constant.js';
 
 type RunCommandMessages = {
@@ -13,7 +13,7 @@ function runCommand(
   options: string[],
   messages: RunCommandMessages
 ) {
-  const spinner = ora(messages.start).start();
+  const spinner = createSpinner(messages.start).start();
 
   return new Promise((resolve) => {
     execa(cmd, options, {
@@ -21,11 +21,11 @@ function runCommand(
       env: { FORCE_COLOR: true },
     })
       .then(() => {
-        spinner.succeed(messages.succeed);
+        spinner.success({ text: messages.succeed });
         resolve(true);
       })
       .catch((err: any) => {
-        spinner.fail(messages.failed);
+        spinner.error({ text: messages.failed });
         consola.error(err.stderr || err.stdout);
         resolve(false);
       });

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

@@ -4,7 +4,7 @@ import { join, dirname } from 'path';
 import { fileURLToPath } from 'url';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
-const PLUGIN_PATH = join(__dirname, '../../cjs/vant-cli-release-plugin.cjs');
+const PLUGIN_PATH = join(__dirname, '../compiler/vant-cli-release-plugin.js');
 
 export async function release(command: { tag?: string }) {
   await releaseIt({

packages/vant-cli/src/common/logger.ts

@@ -1,10 +1,10 @@
-import ora from 'ora';
-import chalk from 'chalk';
+import { createSpinner } from 'nanospinner';
+import color from 'picocolors';
 import consola from 'consola';
 import { ROOT } from '../common/constant.js';
 
 export function slimPath(path: string) {
-  return chalk.yellow(path.replace(ROOT, ''));
+  return color.yellow(path.replace(ROOT, ''));
 }
 
-export { ora, consola };
+export { createSpinner, consola };

packages/vant-cli/src/compiler/compile-sfc.ts

@@ -92,10 +92,13 @@ export async function compileSfc(filePath: string): Promise<any> {
           script += '// @ts-nocheck\n';
         }
 
+        let bindingMetadata;
         if (descriptor.scriptSetup) {
-          script += compileScript(descriptor, {
+          const { bindings, content } = compileScript(descriptor, {
             id: scopeId,
-          }).content;
+          });
+          script += content;
+          bindingMetadata = bindings;
         } else {
           script += descriptor.script!.content;
         }
@@ -108,6 +111,9 @@ export async function compileSfc(filePath: string): Promise<any> {
             id: scopeId,
             source: template.content,
             filename: filePath,
+            compilerOptions: {
+              bindingMetadata,
+            },
           }).code;
 
           script = injectRender(script, render);

packages/vant-cli/src/compiler/compile-site.ts

@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import color from 'picocolors';
 import { createRequire } from 'module';
 import { createServer, build } from 'vite';
 import {
@@ -38,8 +38,8 @@ export async function compileSite(production = false) {
 
     const require = createRequire(import.meta.url);
     const { version } = require('vite/package.json');
-    const viteInfo = chalk.cyan(`vite v${version}`);
-    console.log(`\n  ${viteInfo}` + chalk.green(` dev server running at:\n`));
+    const viteInfo = color.cyan(`vite v${version}`);
+    console.log(`\n  ${viteInfo}` + color.green(` dev server running at:\n`));
     server.printUrls();
   }
 }

packages/vant-cli/src/compiler/vant-cli-release-plugin.ts

@@ -1,7 +1,7 @@
-const releaseIt = require('release-it');
-const { execSync } = require('child_process');
+import { Plugin } from 'release-it';
+import { execSync } from 'child_process';
 
-class VantCliReleasePlugin extends releaseIt.Plugin {
+class VantCliReleasePlugin extends Plugin {
   async beforeRelease() {
     // log an empty line
     console.log('');
@@ -11,4 +11,4 @@ class VantCliReleasePlugin extends releaseIt.Plugin {
   }
 }
 
-module.exports = VantCliReleasePlugin;
+export default VantCliReleasePlugin;

packages/vant-cli/src/index.ts

@@ -1,30 +1,9 @@
 // @ts-ignore
 import fs from 'fs';
 import { URL, fileURLToPath } from 'url';
-import { dev } from './commands/dev.js';
-import { lint } from './commands/lint.js';
-import { test } from './commands/jest.js';
-import { clean } from './commands/clean.js';
-import { build } from './commands/build.js';
-import { release } from './commands/release.js';
-import { changelog } from './commands/changelog.js';
-import { buildSite } from './commands/build-site.js';
-import { commitLint } from './commands/commit-lint.js';
 
 const packagePath = fileURLToPath(new URL('../package.json', import.meta.url));
 const packageJson = JSON.parse(fs.readFileSync(packagePath, 'utf-8'));
 export const cliVersion: string = packageJson.version;
 
 process.env.VANT_CLI_VERSION = cliVersion;
-
-export {
-  dev,
-  lint,
-  test,
-  clean,
-  build,
-  release,
-  changelog,
-  buildSite,
-  commitLint,
-};

packages/vant-eslint-config/LICENSE

@@ -0,0 +1,10 @@
+MIT License
+
+Copyright (c) Youzan
+Copyright (c) Chen Jiahan and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/vant-eslint-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vant/eslint-config",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "eslint config of vant",
   "main": "index.js",
   "publishConfig": {
@@ -20,17 +20,17 @@
   "author": "chenjiahan",
   "license": "MIT",
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.10.0",
-    "@typescript-eslint/parser": "^5.10.0",
+    "@typescript-eslint/eslint-plugin": "^5.30.3",
+    "@typescript-eslint/parser": "^5.30.3",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-vue": "^8.4.0"
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-vue": "^9.1.1"
   },
   "devDependencies": {
-    "enhanced-resolve": "^5.8.3",
-    "eslint": "^8.7.0",
-    "typescript": "~4.5.5"
+    "enhanced-resolve": "^5.10.0",
+    "eslint": "^8.19.0",
+    "typescript": "^4.7.4"
   },
   "peerDependencies": {
     "eslint": "^7.32.0 || ^8.2.0"

packages/vant-icons/LICENSE

@@ -0,0 +1,10 @@
+MIT License
+
+Copyright (c) Youzan
+Copyright (c) Chen Jiahan and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/vant-icons/package.json

@@ -23,7 +23,7 @@
   "author": "chenjiahan",
   "license": "MIT",
   "devDependencies": {
-    "release-it": "^14.11.6"
+    "release-it": "^15.1.1"
   },
   "release-it": {
     "git": {

packages/vant-markdown-vetur/LICENSE

@@ -0,0 +1,10 @@
+MIT License
+
+Copyright (c) Youzan
+Copyright (c) Chen Jiahan and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/vant-popperjs/LICENSE

@@ -0,0 +1,10 @@
+MIT License
+
+Copyright (c) Youzan
+Copyright (c) Chen Jiahan and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/vant-popperjs/package.json

@@ -41,8 +41,8 @@
   },
   "devDependencies": {
     "esbuild": "^0.14.29",
-    "release-it": "^14.2.2",
-    "typescript": "~4.5.2"
+    "release-it": "^15.1.1",
+    "typescript": "^4.7.4"
   },
   "release-it": {
     "git": {

packages/vant-stylelint-config/LICENSE

@@ -0,0 +1,10 @@
+MIT License
+
+Copyright (c) Youzan
+Copyright (c) Chen Jiahan and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/vant-touch-emulator/LICENSE

@@ -0,0 +1,10 @@
+MIT License
+
+Copyright (c) Youzan
+Copyright (c) Chen Jiahan and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/vant-use/LICENSE

@@ -0,0 +1,10 @@
+MIT License
+
+Copyright (c) Youzan
+Copyright (c) Chen Jiahan and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/vant-use/package.json

@@ -38,8 +38,8 @@
   "license": "MIT",
   "devDependencies": {
     "esbuild": "^0.14.29",
-    "release-it": "^14.0.2",
-    "typescript": "~4.5.2",
+    "release-it": "^15.1.1",
+    "typescript": "^4.7.4",
     "vue": "^3.2.27"
   },
   "release-it": {

packages/vant/LICENSE

@@ -0,0 +1,10 @@
+MIT License
+
+Copyright (c) Youzan
+Copyright (c) Chen Jiahan and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/vant/docs/markdown/migrate-from-v3.zh-CN.md

@@ -62,6 +62,116 @@ Area 组件是基于 Picker 组件进行封装的，因此本次升级也对 Are
 
 ## API 调整
 
+### Dialog 调用方式调整
+
+在 Vant 3 中，`Dialog` 是一个函数，调用函数可以快速唤起全局的弹窗组件，而 `Dialog.Component` 才是 `Dialog` 组件对象，这与大部分组件的用法存在差异，容易导致使用错误。
+
+为了更符合直觉，我们在 Vant 4 中调整了 `Dialog` 的调用方式，将 `Dialog()` 函数重命名为 `showDialog()`。
+
+```js
+// Vant 3
+Dialog(); // 函数调用
+Dialog.Component; // 组件对象
+
+// Vant 4
+showDialog(); // 函数调用
+Dialog; // 组件对象
+```
+
+`Dialog` 上挂载的其他方法也进行了重命名，新旧 API 的映射关系如下：
+
+```js
+Dialog(); // -> showDialog()
+Dialog.alert(); // -> showDialog()
+Dialog.confirm(); // -> showConfirmDialog()
+Dialog.close(); // -> hideDialog();
+Dialog.setDefaultOptions(); // -> setDialogDefaultOptions()
+Dialog.resetDefaultOptions(); // -> resetDialogDefaultOptions()
+```
+
+同时，Vant 4 将不再在 `this` 对象上全局注册 `$dialog` 方法，这意味着 `this` 对象上将无法访问到 `$dialog`。
+
+```js
+export default {
+  mounted() {
+    // 无效代码
+    this.$dialog.alert({
+      message: '弹窗内容',
+    });
+  },
+};
+```
+
+大多数场景下，推荐通过 `import` 引入对应的函数进行使用。
+
+如果需要全局方法，可以手动在 `app` 对象上注册：
+
+```js
+import { showDialog } from 'vant';
+
+// 注册 $dialog 方法
+app.config.globalProperties.$dialog = showDialog;
+
+// 添加 TS 类型定义
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $dialog: typeof showDialog;
+  }
+}
+```
+
+### Notify 调用方式调整
+
+Vant 4 中，`Notify` 组件的调用方式也进行了调整，与 `Dialog` 组件的改动一致：
+
+```js
+// Vant 3
+Notify(); // 函数调用
+Notify.Component; // 组件对象
+
+// Vant 4
+showNotify(); // 函数调用
+Notify; // 组件对象
+```
+
+`Notify` 上挂载的其他方法也进行了重命名，新旧 API 的映射关系如下：
+
+```js
+Notify(); // -> showNotify()
+Notify.clear(); // -> hideNotify()
+Notify.setDefaultOptions(); // -> setNotifyDefaultOptions()
+Notify.resetDefaultOptions(); // -> resetNotifyDefaultOptions()
+```
+
+同时，Vant 4 将不再在 `this` 对象上全局注册 `$notify` 方法，这意味着 `this` 对象上将无法访问到 `$notify`。
+
+```js
+export default {
+  mounted() {
+    // 无效代码
+    this.$notify({
+      message: '内容',
+    });
+  },
+};
+```
+
+如果需要全局方法，可以手动在 `app` 对象上注册：
+
+```js
+import { showNotify } from 'vant';
+
+// 注册 $notify 方法
+app.config.globalProperties.$notify = showNotify;
+
+// 添加 TS 类型定义
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $notify: typeof showNotify;
+  }
+}
+```
+
 ### 事件命名调整
 
 从 Vant 4 开始，所有的事件均采用 Vue 官方推荐的**驼峰格式**进行命名。

packages/vant/package.json

@@ -61,8 +61,8 @@
     "@vant/cli": "workspace:*",
     "@vant/eslint-config": "workspace:*",
     "@vue/runtime-core": "^3.2.27",
-    "@vue/test-utils": "^2.0.0-rc.16",
-    "typescript": "~4.5.2",
+    "@vue/test-utils": "^2.0.1",
+    "typescript": "^4.7.4",
     "vue": "^3.2.27",
     "vue-router": "^4.0.12"
   },

packages/vant/src/composables/use-expose.ts

@@ -5,6 +5,6 @@ import { extend } from '../utils';
 export function useExpose<T = Record<string, any>>(apis: T) {
   const instance = getCurrentInstance();
   if (instance) {
-    extend(instance.proxy, apis);
+    extend(instance.proxy as object, apis);
   }
 }

packages/vant/src/dialog/README.md

@@ -2,7 +2,7 @@
 
 ### Intro
 
-A modal box pops up on the page, which is often used for message prompts, message confirmation, or to complete specific interactive operations in the current page. It supports two methods: function call and component call.
+A modal box pops up on the page, which is often used for message prompts, message confirmation, or to complete specific interactive operations in the current page. It supports two methods: component call and function call.
 
 ### Install
 
@@ -16,6 +16,18 @@ const app = createApp();
 app.use(Dialog);
 ```
 
+### Function Call
+
+Vant provides some utility functions that can quickly evoke global `Dialog` components.
+
+For example, calling the `showDialog` function will render a Dialog directly in the page.
+
+```js
+import { showDialog } from 'vant';
+
+showDialog({ message: 'Content' });
+```
+
 ## Usage
 
 ### Alert dialog
@@ -23,14 +35,14 @@ app.use(Dialog);
 Used to prompt for some messages, only including one confirm button.
 
 ```js
-Dialog.alert({
+showDialog({
   title: 'Title',
   message: 'Content',
 }).then(() => {
   // on close
 });
 
-Dialog.alert({
+showDialog({
   message: 'Content',
 }).then(() => {
   // on close
@@ -42,7 +54,7 @@ Dialog.alert({
 Used to confirm some messages, including a confirm button and a cancel button.
 
 ```js
-Dialog.confirm({
+showConfirmDialog({
   title: 'Title',
   message: 'Content',
 })
@@ -59,7 +71,7 @@ Dialog.confirm({
 Use round button style.
 
 ```js
-Dialog.alert({
+showDialog({
   title: 'Title',
   message: 'Content',
   theme: 'round-button',
@@ -67,7 +79,7 @@ Dialog.alert({
   // on close
 });
 
-Dialog.alert({
+showDialog({
   message: 'Content',
   theme: 'round-button',
 }).then(() => {
@@ -85,27 +97,13 @@ const beforeClose = (action) =>
     }, 1000);
   });
 
-Dialog.confirm({
+showConfirmDialog({
   title: 'Title',
   message: 'Content',
   beforeClose,
 });
 ```
 
-### Global Method
-
-After registering the Dialog component through `app.use`, the `$dialog` method will be automatically mounted on all subComponents of the app.
-
-```js
-export default {
-  mounted() {
-    this.$dialog.alert({
-      message: 'Content',
-    });
-  },
-};
-```
-
 ### Advanced Usage
 
 If you need to render vue components within a dialog, you can use dialog component.
@@ -133,12 +131,11 @@ export default {
 
 | Name | Description | Attribute | Return value |
 | --- | --- | --- | --- |
-| Dialog | Show dialog | _options: DialogOptions_ | `Promise<void>` |
-| Dialog.alert | Show alert dialog | _options: DialogOptions_ | `Promise<void>` |
-| Dialog.confirm | Show confirm dialog | _options: DialogOptions_ | `Promise<void>` |
-| Dialog.setDefaultOptions | Set default options of all dialogs | _options: DialogOptions_ | `void` |
-| Dialog.resetDefaultOptions | Reset default options of all dialogs | - | `void` |
-| Dialog.close | Close dialog | - | `void` |
+| showDialog | Show dialog | _options: DialogOptions_ | `Promise<void>` |
+| showConfirmDialog | Show confirm dialog | _options: DialogOptions_ | `Promise<void>` |
+| hideDialog | Close dialog | - | `void` |
+| setDialogDefaultOptions | Set default options of all dialogs | _options: DialogOptions_ | `void` |
+| resetDialogDefaultOptions | Reset default options of all dialogs | - | `void` |
 
 ### DialogOptions
 

packages/vant/src/dialog/README.zh-CN.md

@@ -2,51 +2,30 @@
 
 ### 介绍
 
-弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作，支持函数调用和组件调用两种方式。
+弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作。支持组件调用和函数调用两种方式。
 
-### 函数调用
+### 引入
 
-`Dialog` 是一个函数，调用后会直接在页面中弹出相应的模态框。
-
-```js
-import { Dialog } from 'vant';
-
-Dialog({ message: '提示' });
-```
-
-### 组件调用
-
-通过组件调用 Dialog 时，可以通过下面的方式进行注册：
+通过以下方式来全局注册组件，更多注册方式请参考[组件注册](#/zh-CN/advanced-usage#zu-jian-zhu-ce)。
 
 ```js
 import { createApp } from 'vue';
 import { Dialog } from 'vant';
 
-// 全局注册
 const app = createApp();
 app.use(Dialog);
-
-// 局部注册
-export default {
-  components: {
-    [Dialog.Component.name]: Dialog.Component,
-  },
-};
 ```
 
-在 `script setup` 中，可以通过以下方式使用：
+### 函数调用
 
-```html
-<script setup>
-  const VanDialog = Dialog.Component;
-</script>
+为了便于使用 `Dialog`，Vant 提供了一系列辅助函数，通过辅助函数可以快速唤起全局的弹窗组件。
 
-<template>
-  <!-- 中划线命名 -->
-  <van-dialog />
-  <!-- 也支持大驼峰命名 -->
-  <VanDialog>
-</template>
+比如使用 `showDialog` 函数，调用后会直接在页面中渲染对应的弹出框。
+
+```js
+import { showDialog } from 'vant';
+
+showDialog({ message: '提示' });
 ```
 
 ## 代码演示
@@ -56,14 +35,16 @@ export default {
 用于提示一些消息，只包含一个确认按钮。
 
 ```js
-Dialog.alert({
+import { showDialog } from 'vant';
+
+showDialog({
   title: '标题',
   message: '代码是写出来给人看的，附带能在机器上运行。',
 }).then(() => {
   // on close
 });
 
-Dialog.alert({
+showDialog({
   message: '生命远不止连轴转和忙到极限，人类的体验远比这辽阔、丰富得多。',
 }).then(() => {
   // on close
@@ -75,7 +56,9 @@ Dialog.alert({
 用于确认消息，包含取消和确认按钮。
 
 ```js
-Dialog.confirm({
+import { showConfirmDialog } from 'vant';
+
+showConfirmDialog({
   title: '标题',
   message:
     '如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。',
@@ -93,7 +76,9 @@ Dialog.confirm({
 将 theme 选项设置为 `round-button` 可以展示圆角按钮风格的弹窗。
 
 ```js
-Dialog.alert({
+import { showDialog } from 'vant';
+
+showDialog({
   title: '标题',
   message: '代码是写出来给人看的，附带能在机器上运行。',
   theme: 'round-button',
@@ -101,7 +86,7 @@ Dialog.alert({
   // on close
 });
 
-Dialog.alert({
+showDialog({
   message: '生命远不止连轴转和忙到极限，人类的体验远比这辽阔、丰富得多。',
   theme: 'round-button',
 }).then(() => {
@@ -114,6 +99,8 @@ Dialog.alert({
 通过 `beforeClose` 属性可以传入一个回调函数，在弹窗关闭前进行特定操作。
 
 ```js
+import { showConfirmDialog } from 'vant';
+
 const beforeClose = (action) =>
   new Promise((resolve) => {
     setTimeout(() => {
@@ -126,7 +113,7 @@ const beforeClose = (action) =>
     }, 1000);
   });
 
-Dialog.confirm({
+showConfirmDialog({
   title: '标题',
   message:
     '如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。',
@@ -134,22 +121,6 @@ Dialog.confirm({
 });
 ```
 
-### 全局方法
-
-通过 `app.use` 全局注册 Dialog 组件后，会自动在 app 的所有子组件上挂载 `$dialog` 方法，在所有组件内部都可以直接调用此方法。
-
-```js
-export default {
-  mounted() {
-    this.$dialog.alert({
-      message: '弹窗内容',
-    });
-  },
-};
-```
-
-> Tips: 由于 setup 选项中无法访问 this，因此不能使用上述方式，请通过 import 引入。
-
 ### 组件调用
 
 如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。
@@ -177,12 +148,11 @@ export default {
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| Dialog | 展示弹窗 | _options: DialogOptions_ | `Promise<void>` |
-| Dialog.alert | 展示消息提示弹窗 | _options: DialogOptions_ | `Promise<void>` |
-| Dialog.confirm | 展示消息确认弹窗 | _options: DialogOptions_ | `Promise<void>` |
-| Dialog.setDefaultOptions | 修改默认配置，对所有 Dialog 生效 | _options: DialogOptions_ | `void` |
-| Dialog.resetDefaultOptions | 重置默认配置，对所有 Dialog 生效 | - | `void` |
-| Dialog.close | 关闭弹窗 | - | `void` |
+| showDialog | 展示弹窗 | _options: DialogOptions_ | `Promise<void>` |
+| showConfirmDialog | 展示消息确认弹窗 | _options: DialogOptions_ | `Promise<void>` |
+| hideDialog | 关闭弹窗 | - | `void` |
+| setDialogDefaultOptions | 修改默认配置，影响所有的 `showDialog` 调用 | _options: DialogOptions_ | `void` |
+| resetDialogDefaultOptions | 重置默认配置，影响所有的 `showDialog` 调用 | - | `void` |
 
 ### DialogOptions
 

packages/vant/src/dialog/demo/index.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import VanCell from '../../cell';
-import { Dialog } from '..';
+import { showDialog, showConfirmDialog, Dialog as VanDialog } from '..';
 import { ref } from 'vue';
 import { cdnURL, useTranslate } from '../../../docs/site';
 import type { DialogAction } from '../types';
 
-const VanDialog = Dialog.Component;
-
 const t = useTranslate({
   'zh-CN': {
     title: '标题',
@@ -39,20 +37,20 @@ const show = ref(false);
 const image = cdnURL('apple-3.jpeg');
 
 const onClickAlert = () => {
-  Dialog.alert({
+  showDialog({
     title: t('title'),
     message: t('content1'),
   });
 };
 
 const onClickAlert2 = () => {
-  Dialog.alert({
+  showDialog({
     message: t('content2'),
   });
 };
 
 const onClickRound = () => {
-  Dialog.alert({
+  showDialog({
     theme: 'round-button',
     title: t('title'),
     message: t('content1'),
@@ -60,14 +58,14 @@ const onClickRound = () => {
 };
 
 const onClickRound2 = () => {
-  Dialog.alert({
+  showDialog({
     theme: 'round-button',
     message: t('content2'),
   });
 };
 
 const onClickConfirm = () => {
-  Dialog.confirm({
+  showConfirmDialog({
     title: t('title'),
     message: t('content3'),
   });
@@ -79,7 +77,7 @@ const onClickBeforeClose = () => {
       setTimeout(() => resolve(action === 'confirm'), 1000);
     });
 
-  Dialog.confirm({
+  showConfirmDialog({
     title: t('title'),
     message: t('content3'),
     beforeClose,

packages/vant/src/dialog/function-call.tsx

@@ -1,44 +1,11 @@
-import { App } from 'vue';
-import { extend, inBrowser, withInstall, ComponentInstance } from '../utils';
+import { extend, inBrowser, ComponentInstance } from '../utils';
 import { mountComponent, usePopupState } from '../utils/mount-component';
-import VanDialog from './Dialog';
+import Dialog from './Dialog';
 import type { DialogAction, DialogOptions } from './types';
 
 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(
-      extend({}, Dialog.currentOptions, options, {
-        callback: (action: DialogAction) => {
-          (action === 'confirm' ? resolve : reject)(action);
-        },
-      })
-    );
-  });
-}
-
-Dialog.defaultOptions = {
+const DEFAULT_OPTIONS = {
   title: '',
   width: '',
   theme: null,
@@ -64,34 +31,55 @@ Dialog.defaultOptions = {
   showCancelButton: false,
   closeOnPopstate: true,
   closeOnClickOverlay: false,
+} as const;
+
+let currentOptions = extend({}, DEFAULT_OPTIONS);
+
+function initInstance() {
+  const Wrapper = {
+    setup() {
+      const { state, toggle } = usePopupState();
+      return () => <Dialog {...state} onUpdate:show={toggle} />;
+    },
+  };
+
+  ({ instance } = mountComponent(Wrapper));
+}
+
+export function showDialog(options: DialogOptions) {
+  /* istanbul ignore if */
+  if (!inBrowser) {
+    return Promise.resolve();
+  }
+
+  return new Promise((resolve, reject) => {
+    if (!instance) {
+      initInstance();
+    }
+
+    instance.open(
+      extend({}, currentOptions, options, {
+        callback: (action: DialogAction) => {
+          (action === 'confirm' ? resolve : reject)(action);
+        },
+      })
+    );
+  });
+}
+
+export const setDialogDefaultOptions = (options: DialogOptions) => {
+  extend(currentOptions, options);
 };
 
-Dialog.currentOptions = extend({}, Dialog.defaultOptions);
+export const resetDialogDefaultOptions = () => {
+  currentOptions = extend({}, DEFAULT_OPTIONS);
+};
 
-Dialog.alert = Dialog;
+export const showConfirmDialog = (options: DialogOptions) =>
+  showDialog(extend({ showCancelButton: true }, options));
 
-Dialog.confirm = (options: DialogOptions) =>
-  Dialog(extend({ showCancelButton: true }, options));
-
-Dialog.close = () => {
+export const hideDialog = () => {
   if (instance) {
     instance.toggle(false);
   }
 };
-
-Dialog.setDefaultOptions = (options: DialogOptions) => {
-  extend(Dialog.currentOptions, options);
-};
-
-Dialog.resetDefaultOptions = () => {
-  Dialog.currentOptions = extend({}, Dialog.defaultOptions);
-};
-
-Dialog.Component = withInstall(VanDialog);
-
-Dialog.install = (app: App) => {
-  app.use(Dialog.Component);
-  app.config.globalProperties.$dialog = Dialog;
-};
-
-export { Dialog };

packages/vant/src/dialog/index.ts

@@ -1,7 +1,16 @@
-import { Dialog } from './function-call';
+import { withInstall } from '../utils';
+import _Dialog from './Dialog';
 
+export const Dialog = withInstall(_Dialog);
 export default Dialog;
-export { Dialog };
+export {
+  showDialog,
+  hideDialog,
+  showConfirmDialog,
+  setDialogDefaultOptions,
+  resetDialogDefaultOptions,
+} from './function-call';
+
 export type { DialogProps } from './Dialog';
 export type {
   DialogTheme,
@@ -12,6 +21,6 @@ export type {
 
 declare module 'vue' {
   export interface GlobalComponents {
-    VanDialog: typeof Dialog.Component;
+    VanDialog: typeof Dialog;
   }
 }

packages/vant/src/dialog/test/__snapshots__/funciton-call.spec.jsx.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>
-`;

packages/vant/src/dialog/test/function-call.jsx

@@ -1,28 +1,30 @@
-import { createApp } from 'vue';
 import { later } from '../../../test';
-import { Dialog } from '../function-call';
-import DialogComponent from '../Dialog';
+import {
+  showDialog,
+  hideDialog,
+  setDialogDefaultOptions,
+  resetDialogDefaultOptions,
+} from '../function-call';
 
 test('should update default options when calling setDefaultOptions method', () => {
-  Dialog.setDefaultOptions({ lockScroll: false });
-  expect(Dialog.currentOptions.lockScroll).toBeFalsy();
-  Dialog.resetDefaultOptions();
-  expect(Dialog.currentOptions.lockScroll).toBeTruthy();
-});
-
-test('should expose Dialog component', () => {
-  expect(Dialog.Component.name).toEqual('van-dialog');
-});
-
-test('should register component to app', () => {
-  const app = createApp();
-  app.use(Dialog);
-  expect(app.component(DialogComponent.name)).toBeTruthy();
-});
-
-test('should render dialog after calling Dialog', async () => {
   const wrapper = document.createElement('div');
-  Dialog.alert({
+
+  setDialogDefaultOptions({ message: 'foo', teleport: wrapper, });
+  showDialog();
+  await later();
+  const dialog = wrapper.querySelector('.van-dialog');
+  expect(dialog.innerHTML.includes('foo')).toBeTruthy();
+
+  resetDialogDefaultOptions();
+  showDialog({ teleport: wrapper });
+  await later();
+  const dialog2 = wrapper.querySelector('.van-dialog');
+  expect(dialog2.innerHTML.includes('foo')).toBeFalsy();
+});
+
+test('should render dialog after calling showDialog', async () => {
+  const wrapper = document.createElement('div');
+  showDialog({
     message: '1',
     teleport: wrapper,
   });
@@ -32,9 +34,9 @@ test('should render dialog after calling Dialog', async () => {
   expect(dialog).toBeTruthy();
 });
 
-test('should close dialog after calling Dialog.call', async () => {
+test('should close dialog after calling hideDialog', async () => {
   const wrapper = document.createElement('div');
-  Dialog.alert({
+  showDialog({
     message: '1',
     teleport: wrapper,
   });
@@ -43,7 +45,7 @@ test('should close dialog after calling Dialog.call', async () => {
   const dialog = wrapper.querySelector('.van-dialog');
   expect(dialog.style.display).toEqual('');
 
-  Dialog.close();
+  hideDialog();
   await later();
   expect(dialog.className.split(' ')).toContain(
     'van-dialog-bounce-leave-active'
@@ -52,7 +54,7 @@ test('should close dialog after calling Dialog.call', async () => {
 
 test('should allow to render JSX message', async () => {
   const wrapper = document.createElement('div');
-  Dialog.alert({
+  showDialog({
     message: () => <div>foo</div>,
     teleport: wrapper,
   });

packages/vant/src/dialog/types.ts

@@ -1,4 +1,3 @@
-import { Dialog } from './function-call';
 import type { CSSProperties, TeleportProps } from 'vue';
 import type { Interceptor, Numeric } from '../utils';
 
@@ -33,9 +32,3 @@ export type DialogOptions = {
   confirmButtonDisabled?: boolean;
   closeOnClickOverlay?: boolean;
 };
-
-declare module '@vue/runtime-core' {
-  interface ComponentCustomProperties {
-    $dialog: typeof Dialog;
-  }
-}

packages/vant/src/icon/demo/index.vue

@@ -7,7 +7,7 @@ import VanCol from '../../col';
 import icons from '@vant/icons';
 import { ref } from 'vue';
 import { cdnURL, useTranslate } from '../../../docs/site';
-import { Notify } from '../../notify';
+import { showNotify } from '../../notify';
 
 // from https://30secondsofcode.org
 function copyToClipboard(str: string) {
@@ -82,7 +82,7 @@ const copy = (icon: string, option: Record<string, unknown> = {}) => {
   tag = `${tag} />`;
   copyToClipboard(tag);
 
-  Notify({
+  showNotify({
     type: 'success',
     duration: 1500,
     className: 'demo-icon-notify',

packages/vant/src/lazyload/vue-lazyload/index.js

@@ -1,5 +1,6 @@
 /**
  * This is a fork of [vue-lazyload](https://github.com/hilongjw/vue-lazyload) with Vue 3 support.
+ * license at https://github.com/hilongjw/vue-lazyload/blob/master/LICENSE
  */
 
 import Lazy from './lazy';

packages/vant/src/lazyload/vue-lazyload/lazy-component.js

@@ -1,3 +1,8 @@
+/**
+ * This is a fork of [vue-lazyload](https://github.com/hilongjw/vue-lazyload) with Vue 3 support.
+ * license at https://github.com/hilongjw/vue-lazyload/blob/master/LICENSE
+ */
+
 import { h } from 'vue';
 import { inBrowser, useRect } from '@vant/use';
 

packages/vant/src/lazyload/vue-lazyload/lazy-container.js

@@ -1,3 +1,8 @@
+/**
+ * This is a fork of [vue-lazyload](https://github.com/hilongjw/vue-lazyload) with Vue 3 support.
+ * license at https://github.com/hilongjw/vue-lazyload/blob/master/LICENSE
+ */
+
 /* eslint-disable max-classes-per-file */
 /* eslint-disable prefer-object-spread */
 import { remove } from './util';

packages/vant/src/lazyload/vue-lazyload/lazy-image.js

@@ -1,3 +1,8 @@
+/**
+ * This is a fork of [vue-lazyload](https://github.com/hilongjw/vue-lazyload) with Vue 3 support.
+ * license at https://github.com/hilongjw/vue-lazyload/blob/master/LICENSE
+ */
+
 import { useRect } from '@vant/use';
 import { loadImageAsync } from './util';
 import { noop } from '../../utils';

packages/vant/src/lazyload/vue-lazyload/lazy.js

@@ -1,3 +1,8 @@
+/**
+ * This is a fork of [vue-lazyload](https://github.com/hilongjw/vue-lazyload) with Vue 3 support.
+ * license at https://github.com/hilongjw/vue-lazyload/blob/master/LICENSE
+ */
+
 import { nextTick } from 'vue';
 import { inBrowser, getScrollParent } from '@vant/use';
 import {

packages/vant/src/lazyload/vue-lazyload/listener.js

@@ -1,3 +1,8 @@
+/**
+ * This is a fork of [vue-lazyload](https://github.com/hilongjw/vue-lazyload) with Vue 3 support.
+ * license at https://github.com/hilongjw/vue-lazyload/blob/master/LICENSE
+ */
+
 import { useRect } from '@vant/use';
 import { loadImageAsync } from './util';
 import { noop } from '../../utils';

packages/vant/src/lazyload/vue-lazyload/util.js

@@ -1,3 +1,8 @@
+/**
+ * This is a fork of [vue-lazyload](https://github.com/hilongjw/vue-lazyload) with Vue 3 support.
+ * license at https://github.com/hilongjw/vue-lazyload/blob/master/LICENSE
+ */
+
 import { inBrowser } from '@vant/use';
 
 export const hasIntersectionObserver =

packages/vant/src/notify/README.md

@@ -2,7 +2,7 @@
 
 ### Intro
 
-The display message prompt is at the top of the page, and supports two methods: function call and component call.
+The display message prompt is at the top of the page, and supports two methods: component call and function call.
 
 ### Install
 
@@ -16,55 +16,65 @@ const app = createApp();
 app.use(Notify);
 ```
 
+### Function Call
+
+Vant provides some utility functions that can quickly evoke global `Notify` components.
+
+For example, calling the `showNotify` function will render a Dialog directly in the page.
+
+```js
+import { showNotify } from 'vant';
+
+showNotify('Notify Message');
+```
+
 ## Usage
 
 ### Basic Usage
 
 ```js
-Notify('Notify Message');
+import { showNotify, hideNotify } from 'vant';
+
+// auto close after 3s
+showNotify('Message');
+
+// manually close
+hideNotify();
 ```
 
 ### Notify Type
 
 ```js
-Notify({ type: 'primary', message: 'Notify Message' });
-Notify({ type: 'success', message: 'Notify Message' });
-Notify({ type: 'danger', message: 'Notify Message' });
-Notify({ type: 'warning', message: 'Notify Message' });
+import { showNotify } from 'vant';
+
+showNotify({ type: 'primary', message: 'Notify Message' });
+showNotify({ type: 'success', message: 'Notify Message' });
+showNotify({ type: 'danger', message: 'Notify Message' });
+showNotify({ type: 'warning', message: 'Notify Message' });
 ```
 
 ### Custom Notify
 
 ```js
-Notify({
+import { showNotify } from 'vant';
+
+showNotify({
   message: 'Custom Color',
   color: '#ad0000',
   background: '#ffe1e1',
 });
 
-Notify({
+showNotify({
   message: 'Custom Position',
   position: 'bottom',
 });
 
-Notify({
+showNotify({
   message: 'Custom Duration',
   duration: 1000,
 });
 ```
 
-### Global Method
-
-After registering the Notify component through `app.use`, the `$notify` method will be automatically mounted on all subcomponents of the app.
-
-```js
-export default {
-  mounted() {
-    this.$notify('Notify Message');
-  },
-};
-```
-
 ### Component Call
 
 ```html
@@ -103,10 +113,10 @@ export default {
 
 | Methods | Attribute | Return value | Description |
 | --- | --- | --- | --- |
-| Notify | `options \| message` | notify instance | Show notify |
-| Notify.clear | - | `void` | Close notify |
-| Notify.setDefaultOptions | `options` | `void` | Set default options of all notifies |
-| Notify.resetDefaultOptions | - | `void` | Reset default options of all notifies |
+| showNotify | `options \| message` | notify instance | Show notify |
+| hideNotify | - | `void` | Close notify |
+| setNotifyDefaultOptions | `options` | `void` | Set default options of all notifies |
+| resetNotifyDefaultOptions | - | `void` | Reset default options of all notifies |
 
 ### Options
 

packages/vant/src/notify/README.zh-CN.md

@@ -2,51 +2,30 @@
 
 ### 介绍
 
-在页面顶部展示消息提示，支持函数调用和组件调用两种方式。
+在页面顶部展示消息提示，支持组件调用和函数调用两种方式。
 
-### 函数调用
+### 引入
 
-Notify 是一个函数，调用后会直接在页面中弹出相应的消息提示。
-
-```js
-import { Notify } from 'vant';
-
-Notify('通知内容');
-```
-
-### 组件调用
-
-通过组件调用 Notify 时，可以通过下面的方式进行注册：
+通过以下方式来全局注册组件，更多注册方式请参考[组件注册](#/zh-CN/advanced-usage#zu-jian-zhu-ce)。
 
 ```js
 import { createApp } from 'vue';
 import { Notify } from 'vant';
 
-// 全局注册
 const app = createApp();
 app.use(Notify);
-
-// 局部注册
-export default {
-  components: {
-    [Notify.Component.name]: Notify.Component,
-  },
-};
 ```
 
-在 `script setup` 中，可以通过以下方式使用：
+### 函数调用
 
-```html
-<script setup>
-  const VanNotify = Notify.Component;
-</script>
+为了便于使用 `Notify`，Vant 提供了一系列辅助函数，通过辅助函数可以快速唤起全局的消息提示。
 
-<template>
-  <!-- 中划线命名 -->
-  <van-notify />
-  <!-- 也支持大驼峰命名 -->
-  <VanNotify>
-</template>
+比如使用 `showNotify` 函数，调用后会直接在页面中渲染对应的提示。
+
+```js
+import { showNotify } from 'vant';
+
+showNotify({ message: '提示' });
 ```
 
 ## 代码演示
@@ -54,7 +33,13 @@ export default {
 ### 基础用法
 
 ```js
-Notify('通知内容');
+import { showNotify, hideNotify } from 'vant';
+
+// 3 秒后自动关闭
+showNotify('通知内容');
+
+// 主动关闭
+hideNotify();
 ```
 
 ### 通知类型
@@ -62,17 +47,19 @@ Notify('通知内容');
 支持 `primary`、`success`、`warning`、`danger` 四种通知类型，默认为 `danger`。
 
 ```js
+import { showNotify } from 'vant';
+
 // 主要通知
-Notify({ type: 'primary', message: '通知内容' });
+showNotify({ type: 'primary', message: '通知内容' });
 
 // 成功通知
-Notify({ type: 'success', message: '通知内容' });
+showNotify({ type: 'success', message: '通知内容' });
 
 // 危险通知
-Notify({ type: 'danger', message: '通知内容' });
+showNotify({ type: 'danger', message: '通知内容' });
 
 // 警告通知
-Notify({ type: 'warning', message: '通知内容' });
+showNotify({ type: 'warning', message: '通知内容' });
 ```
 
 ### 自定义通知
@@ -80,37 +67,25 @@ Notify({ type: 'warning', message: '通知内容' });
 自定义消息通知的颜色、位置和展示时长。
 
 ```js
-Notify({
+import { showNotify } from 'vant';
+
+showNotify({
   message: '自定义颜色',
   color: '#ad0000',
   background: '#ffe1e1',
 });
 
-Notify({
+showNotify({
   message: '自定义位置',
   position: 'bottom',
 });
 
-Notify({
+showNotify({
   message: '自定义时长',
   duration: 1000,
 });
 ```
 
-### 全局方法
-
-通过 `app.use` 全局注册 Notify 组件后，会自动在 app 的所有子组件上挂载 `$notify` 方法，便于在组件内调用。
-
-```js
-export default {
-  mounted() {
-    this.$notify('提示文案');
-  },
-};
-```
-
-> Tips: 由于 setup 选项中无法访问 this，因此不能使用上述方式，请通过 import 引入。
-
 ### 组件调用
 
 如果需要在 Notify 内嵌入组件或其他自定义内容，可以使用组件调用的方式。
@@ -151,10 +126,10 @@ export default {
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| Notify | 展示提示 | `options \| message` | notify 实例 |
-| Notify.clear | 关闭提示 | - | `void` |
-| Notify.setDefaultOptions | 修改默认配置，对所有 Notify 生效 | `options` | `void` |
-| Notify.resetDefaultOptions | 重置默认配置，对所有 Notify 生效 | - | `void` |
+| showNotify | 展示提示 | `options \| message` | notify 实例 |
+| hideNotify | 关闭提示 | - | `void` |
+| setNotifyDefaultOptions | 修改默认配置，影响所有的 `showNotify` 调用 | `options` | `void` |
+| resetNotifyDefaultOptions | 重置默认配置，影响所有的 `showNotify` 调用 | - | `void` |
 
 ### Options
 

packages/vant/src/notify/demo/index.vue

@@ -2,11 +2,9 @@
 import VanCell from '../../cell';
 import VanIcon from '../../icon';
 import { ref } from 'vue';
-import { Notify, type NotifyType } from '..';
+import { showNotify, Notify as VanNotify, type NotifyType } from '..';
 import { useTranslate } from '../../../docs/site';
 
-const VanNotify = Notify.Component;
-
 const t = useTranslate({
   'zh-CN': {
     primary: '主要通知',
@@ -38,12 +36,12 @@ const t = useTranslate({
 
 const show = ref(false);
 
-const showNotify = () => {
-  Notify(t('content'));
+const showBasicNotify = () => {
+  showNotify(t('content'));
 };
 
 const showCustomColor = () => {
-  Notify({
+  showNotify({
     color: '#ad0000',
     message: t('customColor'),
     background: '#ffe1e1',
@@ -51,21 +49,21 @@ const showCustomColor = () => {
 };
 
 const showCustomDuration = () => {
-  Notify({
+  showNotify({
     message: t('customDuration'),
     duration: 1000,
   });
 };
 
 const showCustomPosition = () => {
-  Notify({
+  showNotify({
     message: t('customPosition'),
     position: 'bottom',
   });
 };
 
 const showType = (type: NotifyType) => {
-  Notify({
+  showNotify({
     message: t('content'),
     type,
   });
@@ -81,7 +79,7 @@ const showComponentCall = () => {
 
 <template>
   <demo-block card :title="t('basicUsage')">
-    <van-cell is-link :title="t('basicUsage')" @click="showNotify" />
+    <van-cell is-link :title="t('basicUsage')" @click="showBasicNotify" />
   </demo-block>
 
   <demo-block card :title="t('notifyType')">

packages/vant/src/notify/function-call.tsx

@@ -1,11 +1,4 @@
-import { App } from 'vue';
-import {
-  extend,
-  isObject,
-  inBrowser,
-  withInstall,
-  type ComponentInstance,
-} from '../utils';
+import { extend, isObject, inBrowser, type ComponentInstance } from '../utils';
 import { mountComponent, usePopupState } from '../utils/mount-component';
 import VanNotify from './Notify';
 import type { NotifyMessage, NotifyOptions } from './types';
@@ -25,27 +18,6 @@ function initInstance() {
   }));
 }
 
-function Notify(options: NotifyMessage | NotifyOptions) {
-  if (!inBrowser) {
-    return;
-  }
-
-  if (!instance) {
-    initInstance();
-  }
-
-  options = extend({}, Notify.currentOptions, parseOptions(options));
-
-  instance.open(options);
-  clearTimeout(timer);
-
-  if (options.duration! > 0) {
-    timer = window.setTimeout(Notify.clear, options.duration);
-  }
-
-  return instance;
-}
-
 const getDefaultOptions = (): NotifyOptions => ({
   type: 'danger',
   color: undefined,
@@ -60,27 +32,38 @@ const getDefaultOptions = (): NotifyOptions => ({
   background: undefined,
 });
 
-Notify.clear = () => {
+let currentOptions = getDefaultOptions();
+
+export const hideNotify = () => {
   if (instance) {
     instance.toggle(false);
   }
 };
 
-Notify.currentOptions = getDefaultOptions();
+export function showNotify(options: NotifyMessage | NotifyOptions) {
+  if (!inBrowser) {
+    return;
+  }
 
-Notify.setDefaultOptions = (options: NotifyOptions) => {
-  extend(Notify.currentOptions, options);
+  if (!instance) {
+    initInstance();
+  }
+
+  options = extend({}, currentOptions, parseOptions(options));
+
+  instance.open(options);
+  clearTimeout(timer);
+
+  if (options.duration! > 0) {
+    timer = window.setTimeout(hideNotify, options.duration);
+  }
+
+  return instance;
+}
+
+export const setNotifyDefaultOptions = (options: NotifyOptions) =>
+  extend(currentOptions, options);
+
+export const resetNotifyDefaultOptions = () => {
+  currentOptions = getDefaultOptions();
 };
-
-Notify.resetDefaultOptions = () => {
-  Notify.currentOptions = getDefaultOptions();
-};
-
-Notify.Component = withInstall(VanNotify);
-
-Notify.install = (app: App) => {
-  app.use(Notify.Component);
-  app.config.globalProperties.$notify = Notify;
-};
-
-export { Notify };

packages/vant/src/notify/index.ts

@@ -1,7 +1,15 @@
-import { Notify } from './function-call';
+import { withInstall } from '../utils';
+import _Notify from './Notify';
 
+export const Notify = withInstall(_Notify);
 export default Notify;
-export { Notify };
+export {
+  showNotify,
+  hideNotify,
+  setNotifyDefaultOptions,
+  resetNotifyDefaultOptions,
+} from './function-call';
+
 export type { NotifyProps } from './Notify';
 export type { NotifyType, NotifyOptions } from './types';
 

packages/vant/src/notify/test/index.spec.ts

@@ -1,20 +1,23 @@
-import { createApp } from 'vue';
 import { later } from '../../../test';
-import { Notify } from '../function-call';
-import NotifyComponent from '../Notify';
+import {
+  showNotify,
+  hideNotify,
+  setNotifyDefaultOptions,
+  resetNotifyDefaultOptions,
+} from '../function-call';
 
 test('should not throw error if calling clear method before render notify', () => {
-  Notify.clear();
+  hideNotify();
 });
 
 test('should render Notify correctly', async () => {
-  Notify('test');
+  showNotify('test');
   await later();
   expect(document.querySelector('.van-notify')).toMatchSnapshot();
 });
 
 test('should add "van-notify--success" class when type is success', async () => {
-  Notify({
+  showNotify({
     message: 'test',
     type: 'success',
   });
@@ -24,28 +27,23 @@ test('should add "van-notify--success" class when type is success', async () =>
   expect(notify.classList.contains('van-notify--success')).toBeTruthy();
 });
 
-test('should register component to app', () => {
-  const app = createApp({});
-  app.use(Notify);
-  expect(app.component(NotifyComponent.name)).toBeTruthy();
-});
+test('should change default options after calling setDefaultOptions method', async () => {
+  setNotifyDefaultOptions({ message: 'foo' });
+  showNotify({});
+  await later();
+  const notify = document.querySelector('.van-notify') as HTMLElement;
+  expect(notify.innerHTML.includes('foo')).toBeTruthy();
 
-test('should change default duration after calling setDefaultOptions method', () => {
-  Notify.setDefaultOptions({ duration: 1000 });
-  expect(Notify.currentOptions.duration).toEqual(1000);
-  Notify.resetDefaultOptions();
-  expect(Notify.currentOptions.duration).toEqual(3000);
-});
-
-test('should reset to default duration after calling resetDefaultOptions method', () => {
-  Notify.setDefaultOptions({ duration: 1000 });
-  Notify.resetDefaultOptions();
-  expect(Notify.currentOptions.duration).toEqual(3000);
+  resetNotifyDefaultOptions();
+  showNotify({});
+  await later();
+  const notify2 = document.querySelector('.van-notify') as HTMLElement;
+  expect(notify2.innerHTML.includes('foo')).toBeFalsy();
 });
 
 test('should call onClose option when closing', async () => {
   const onClose = jest.fn();
-  Notify({
+  showNotify({
     message: 'test',
     onClose,
     duration: 1,
@@ -57,7 +55,7 @@ test('should call onClose option when closing', async () => {
 
 test('should call onClick option when clicked', async () => {
   const onClick = jest.fn();
-  Notify({
+  showNotify({
     message: 'test',
     onClick,
   });
@@ -69,7 +67,7 @@ test('should call onClick option when clicked', async () => {
 });
 
 test('should align to bottom when position option is bottom', async () => {
-  Notify({
+  showNotify({
     message: 'test',
     position: 'bottom',
   });

packages/vant/src/notify/types.ts

@@ -1,4 +1,3 @@
-import { Notify } from './function-call';
 import type { Numeric } from '../utils';
 
 export type NotifyMessage = Numeric;
@@ -20,9 +19,3 @@ export type NotifyOptions = {
   onClose?: () => void;
   onOpened?: () => void;
 };
-
-declare module '@vue/runtime-core' {
-  interface ComponentCustomProperties {
-    $notify: typeof Notify;
-  }
-}

packages/vant/src/swipe-cell/README.md

@@ -77,7 +77,7 @@ app.use(SwipeCell);
 ```
 
 ```js
-import { Dialog } from 'vant';
+import { showConfirmDialog } from 'vant';
 
 export default {
   setup() {
@@ -89,7 +89,7 @@ export default {
           return true;
         case 'right':
           return new Promise((resolve) => {
-            Dialog.confirm({
+            showConfirmDialog({
               title: 'Are you sure to delete?',
             }).then(resolve);
           });

packages/vant/src/swipe-cell/README.zh-CN.md

@@ -83,7 +83,7 @@ app.use(SwipeCell);
 ```
 
 ```js
-import { Dialog } from 'vant';
+import { showConfirmDialog } from 'vant';
 
 export default {
   setup() {
@@ -96,7 +96,7 @@ export default {
           return true;
         case 'right':
           return new Promise((resolve) => {
-            Dialog.confirm({
+            showConfirmDialog({
               title: '确定删除吗？',
             }).then(resolve);
           });

packages/vant/src/swipe-cell/demo/index.vue

@@ -4,7 +4,7 @@ import VanButton from '../../button';
 import VanCell from '../../cell';
 import VanCard from '../../card';
 import { cdnURL, useTranslate } from '../../../docs/site';
-import { Dialog } from '../../dialog';
+import { showConfirmDialog } from '../../dialog';
 
 const t = useTranslate({
   'zh-CN': {
@@ -39,7 +39,7 @@ const beforeClose = ({ position }: { position: string }) => {
       return true;
     case 'right':
       return new Promise<boolean>((resolve) => {
-        Dialog.confirm({
+        showConfirmDialog({
           title: t('confirm'),
         }).then(() => {
           resolve(true);

packages/vant/src/switch/README.md

@@ -100,13 +100,13 @@ Using `node` slot to custom the content of the node.
 
 ```js
 import { ref } from 'vue';
-import { Dialog } from 'vant';
+import { showConfirmDialog } from 'vant';
 
 export default {
   setup() {
     const checked = ref(true);
     const onUpdateValue = (newValue) => {
-      Dialog.confirm({
+      showConfirmDialog({
         title: 'Confirm',
         message: 'Are you sure to toggle switch?',
       }).then(() => {

packages/vant/src/switch/README.zh-CN.md

@@ -112,13 +112,13 @@ export default {
 
 ```js
 import { ref } from 'vue';
-import { Dialog } from 'vant';
+import { showConfirmDialog } from 'vant';
 
 export default {
   setup() {
     const checked = ref(true);
     const onUpdateValue = (newValue) => {
-      Dialog.confirm({
+      showConfirmDialog({
         title: '提醒',
         message: '是否切换开关？',
       }).then(() => {

packages/vant/src/switch/demo/index.vue

@@ -4,7 +4,7 @@ import VanCell from '../../cell';
 import VanIcon from '../../icon';
 import { ref } from 'vue';
 import { useTranslate } from '../../../docs/site';
-import { Dialog } from '../../dialog';
+import { showConfirmDialog } from '../../dialog';
 
 const t = useTranslate({
   'zh-CN': {
@@ -36,7 +36,7 @@ const checked4 = ref(true);
 const checked5 = ref(true);
 
 const onUpdateValue = (checked: boolean) => {
-  Dialog.confirm({
+  showConfirmDialog({
     title: t('title'),
     message: t('message'),
   }).then(() => {