Merge branch 'dev' into next

2025-04-05 19:41:42 +08:00 · 2022-08-24 22:04:34 +08:00 · 2022-08-24 22:04:34 +08:00 · 1d87343195
commit 1d87343195
parent dfdc27a755 aa1689fed8
39 changed files with 485 additions and 372 deletions
--- a/README.md
+++ b/README.md
@ -67,10 +67,14 @@ pnpm add vant

 ```js
 import { createApp } from 'vue';
+// 1. Import the components you need
 import { Button } from 'vant';
+// 2. Import the components style
 import 'vant/lib/index.css';

 const app = createApp();
+
+// 3. Register the components you need
 app.use(Button);
 ```

--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@ -71,10 +71,14 @@ pnpm add vant

 ```js
 import { createApp } from 'vue';
+// 1. 引入你需要的组件
 import { Button } from 'vant';
+// 2. 引入组件样式
 import 'vant/lib/index.css';

 const app = createApp();
+
+// 3. 注册你需要的组件
 app.use(Button);
 ```

--- a/packages/vant-cli/src/commands/build.ts
+++ b/packages/vant-cli/src/commands/build.ts
@ -12,7 +12,7 @@ import { compileBundles } from '../compiler/compile-bundles.js';
 import { genPackageEntry } from '../compiler/gen-package-entry.js';
 import { genStyleDepsMap } from '../compiler/gen-style-deps-map.js';
 import { genComponentStyle } from '../compiler/gen-component-style.js';
-import { SRC_DIR, LIB_DIR, ES_DIR } from '../common/constant.js';
+import { SRC_DIR, LIB_DIR, ES_DIR, getVantConfig } from '../common/constant.js';
 import { genPackageStyle } from '../compiler/gen-package-style.js';
 import { genWebStormTypes } from '../compiler/web-types/index.js';
 import {
@ -135,9 +135,10 @@ async function buildPackageStyleEntry() {
 }

 async function buildBundledOutputs() {
+  const config = getVantConfig();
  setModuleEnv('esmodule');
  await compileBundles();
-  genWebStormTypes();
+  genWebStormTypes(config.build?.tagPrefix);
 }

 const tasks = [
--- a/packages/vant-cli/src/compiler/web-types/index.ts
+++ b/packages/vant-cli/src/compiler/web-types/index.ts
@ -40,7 +40,7 @@ export async function parseAndWrite(options: Options) {
  );
 }

-export function genWebStormTypes() {
+export function genWebStormTypes(tagPrefix?: string) {
  const pkgJson = getPackageJson();
  const vantConfig = getVantConfig();

@ -50,5 +50,6 @@ export function genWebStormTypes() {
    test: /README\.md/,
    version: pkgJson.version,
    outputDir: LIB_DIR,
+    tagPrefix,
  });
 }
--- a/packages/vant-use/package.json
+++ b/packages/vant-use/package.json
@ -1,6 +1,6 @@
 {
  "name": "@vant/use",
-  "version": "1.4.1",
+  "version": "1.4.2",
  "description": "Vant Composition API",
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.mjs",
--- a/packages/vant-use/src/useClickAway/index.ts
+++ b/packages/vant-use/src/useClickAway/index.ts
@ -7,7 +7,10 @@ export type UseClickAwayOptions = {
 };

 export function useClickAway(
-  target: Element | Ref<Element | undefined>,
+  target:
+    | Element
+    | Ref<Element | undefined>
+    | Array<Element | Ref<Element | undefined>>,
  listener: EventListener,
  options: UseClickAwayOptions = {}
 ) {
@ -18,8 +21,13 @@ export function useClickAway(
  const { eventName = 'click' } = options;

  const onClick = (event: Event) => {
-    const element = unref(target);
-    if (element && !element.contains(event.target as Node)) {
+    const targets = Array.isArray(target) ? target : [target];
+    const isClickAway = targets.every((item) => {
+      const element = unref(item);
+      return element && !element.contains(event.target as Node);
+    });
+
+    if (isClickAway) {
      listener(event);
    }
  };
--- a/packages/vant-use/src/useEventListener/index.ts
+++ b/packages/vant-use/src/useEventListener/index.ts
@ -10,6 +10,16 @@ export type UseEventListenerOptions = {
  passive?: boolean;
 };

+export function useEventListener<K extends keyof DocumentEventMap>(
+  type: K,
+  listener: (event: DocumentEventMap[K]) => void,
+  options?: UseEventListenerOptions
+): void;
+export function useEventListener(
+  type: string,
+  listener: EventListener,
+  options?: UseEventListenerOptions
+): void;
 export function useEventListener(
  type: string,
  listener: EventListener,
@ -27,7 +37,10 @@ export function useEventListener(
    const element = unref(target);

    if (element && !attached) {
-      element.addEventListener(type, listener, { capture, passive });
+      element.addEventListener(type, listener, {
+        capture,
+        passive,
+      });
      attached = true;
    }
  };
--- a/packages/vant/docs/markdown/quickstart.en-US.md
+++ b/packages/vant/docs/markdown/quickstart.en-US.md
@ -26,7 +26,7 @@ pnpm add vant

 ### CDN

-The easiest way to use Vant is to include a CDN link in the html file, after which you can access all components via the global variable `vant`.
+The easiest way to use Vant is to include a CDN link in the HTML file, after which you can access all components via the global variable `vant`.

 ```html
 <!-- import style -->
@ -92,9 +92,28 @@ In the GUI, click on 'Dependencies' -> `Install Dependencies` and add `vant` to

 ## Usage

-### Import on demand (recommended)
+### Basic Usage

-If you are using vite, webpack or vue-cli, please use [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components).
+The basic usage of Vant components;
+
+```js
+import { createApp } from 'vue';
+// 1. Import the components you need
+import { Button } from 'vant';
+// 2. Import the components style
+import 'vant/lib/index.css';
+
+const app = createApp();
+
+// 3. Register the components you need
+app.use(Button);
+```
+
+> Tip: Vant supports Tree Shaking by default, so you don't need to configure any plugins, the unused JS code will be removed by Tree Shaking, but CSS styles cannot be optimized by it.
+
+### Import on demand
+
+If you are using vite, webpack or vue-cli, you can use [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components), this plugin can help you to auto importing components and reduce CSS file size.

 #### 1. Install Plugin

@ -160,16 +179,14 @@ module.exports = {
 };
 ```

-#### 3. Import Components
+#### 3. Using Components

-Then you can import components from Vant:
+Then you can using components from Vant in the template, the `unplugin-vue-components` will automatically import the corresponding Vant components.

-```js
-import { createApp } from 'vue';
-import { Button } from 'vant';
-
-const app = createApp();
-app.use(Button);
+```html
+<template>
+  <van-button type="primary" />
+</template>
 ```

 #### 4. Style of Function Components
@ -194,27 +211,4 @@ import { showImagePreview } from 'vant';
 import 'vant/es/image-preview/style';
 ```

-> Vant supports tree shaking by default, so you don't necessarily need the webpack plugin, if you can't accept the full import of css.
-
-### Import all components (not recommended)
-
-Import all components will **increase the bundle size**, so this is not recommended.
-
-```js
-import { createApp } from 'vue';
-import Vant from 'vant';
-import 'vant/lib/index.css';
-
-const app = createApp();
-app.use(Vant);
-```
-
-### Manually import (not recommended)
-
-```js
-// import script
-import Button from 'vant/es/button/index';
-// import style
-// if the component does not have a style file, there is no need to import
-import 'vant/es/button/style/index';
-```
+> Tip: "Full Import" and "On-demand Import" should not be used at the same time, otherwise it will lead to problems such as code duplication and style overrides.
--- a/packages/vant/docs/markdown/quickstart.zh-CN.md
+++ b/packages/vant/docs/markdown/quickstart.zh-CN.md
@ -30,7 +30,7 @@ pnpm add vant

 ### 通过 CDN 安装

-使用 Vant 最简单的方法是直接在 html 文件中引入 CDN 链接，之后你可以通过全局变量 `vant` 访问到所有组件。
+使用 Vant 最简单的方法是直接在 HTML 文件中引入 CDN 链接，之后你可以通过全局变量 `vant` 访问到所有组件。

 ```html
 <!-- 引入样式文件 -->
@ -93,9 +93,32 @@ pnpm add vant

 ## 引入组件

-### 按需引入组件（推荐）
+### 方法一. 基础用法

-在基于 `vite`、`webpack` 或 `vue-cli` 的项目中使用 Vant 时，推荐安装 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 插件，它可以自动按需引入组件。
+下面是使用 Vant 组件的基础用法示例：
+
+```js
+import { createApp } from 'vue';
+// 1. 引入你需要的组件
+import { Button } from 'vant';
+// 2. 引入组件样式
+import 'vant/lib/index.css';
+
+const app = createApp();
+
+// 3. 注册你需要的组件
+app.use(Button);
+```
+
+Vant 支持多种组件注册方式，除了在 app 上全局注册组件，你也可以选择其他的方式，详见 [组件注册](#/zh-CN/advanced-usage#zu-jian-zhu-ce) 章节。
+
+> 提示：Vant 默认支持 Tree Shaking，因此你不需要配置任何插件，通过 Tree Shaking 即可移除不需要的 JS 代码，但 CSS 样式无法通过这种方式优化，如果需要按需引入 CSS 样式，请参考下面的方法二。
+
+### 方法二. 按需引入组件
+
+在基于 `vite`、`webpack` 或 `vue-cli` 的项目中使用 Vant 时，可以使用 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 插件，它可以自动引入组件，并按需引入组件的样式。
+
+相比于基础用法，这种方式可以按需引入组件的 CSS 样式，从而减少一部分代码体积。

 #### 1. 安装插件

@ -161,16 +184,14 @@ module.exports = {
 };
 ```

-#### 3. 引入组件
+#### 3. 使用组件

-完成以上两步，就可以直接使用 Vant 组件了：
+完成以上两步，就可以直接在模板中使用 Vant 组件了，`unplugin-vue-components` 会解析模板并自动注册对应的组件。

-```js
-import { createApp } from 'vue';
-import { Button } from 'vant';
-
-const app = createApp();
-app.use(Button);
+```html
+<template>
+  <van-button type="primary" />
+</template>
 ```

 #### 4. 引入函数组件的样式
@ -195,29 +216,4 @@ import { showImagePreview } from 'vant';
 import 'vant/es/image-preview/style';
 ```

-> 注意：Vant 支持 Tree Shaking，因此你也可以不配置任何插件，通过 Tree Shaking 即可移除不需要的 JS 代码，但 CSS 无法通过这种方式优化。
-
-### 导入所有组件（不推荐）
-
-Vant 支持一次性导入所有组件，引入所有组件会**增加代码包体积**，因此不推荐这种做法。
-
-```js
-import { createApp } from 'vue';
-import Vant from 'vant';
-import 'vant/lib/index.css';
-
-const app = createApp();
-app.use(Vant);
-```
-
-### 手动按需引入组件（不推荐）
-
-在不使用任何构建插件的情况下，可以手动引入需要使用的组件和样式。
-
-```js
-// 引入组件脚本
-import Button from 'vant/es/button/index';
-// 引入组件样式
-// 若组件没有样式文件，则无须引入
-import 'vant/es/button/style/index';
-```
+> 提示：在单个项目中不应该同时使用「全量引入」和「按需引入」，否则会导致代码重复、样式错乱等问题。
--- a/packages/vant/docs/markdown/use-click-away.en-US.md
+++ b/packages/vant/docs/markdown/use-click-away.en-US.md
@ -74,7 +74,7 @@ function useClickAway(

 | Name | Description | Type | Default Value |
 | --- | --- | --- | --- |
-| target | Target element | _Element \| Ref\<Element>_ | - |
+| target | Target element, support multiple elements | _Element \| Ref\<Element> \| Array\<Element \| Ref\<Element>>_ | - |
 | listener | Callback function when the outside is clicked | _EventListener_ | - |
 | options | Options | _Options_ | `{ eventName: 'click' }` |

--- a/packages/vant/docs/markdown/use-click-away.zh-CN.md
+++ b/packages/vant/docs/markdown/use-click-away.zh-CN.md
@ -74,11 +74,11 @@ function useClickAway(

 ### 参数

-| 参数     | 说明                     | 类型                       | 默认值 |
-| -------- | ------------------------ | -------------------------- | ------ |
-| target   | 绑定事件的元素           | _Element \| Ref\<Element>_ | -      |
-| listener | 点击外部时触发的回调函数 | _EventListener_            | -      |
-| options  | 可选的配置项             | _Options_                  | 见下表 |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| target | 绑定事件的元素，支持传入数组来绑定多个元素 | _Element \| Ref\<Element> \| Array\<Element \| Ref\<Element>>_ | - |
+| listener | 点击外部时触发的回调函数 | _EventListener_ | - |
+| options | 可选的配置项 | _Options_ | 见下表 |

 ### Options

--- a/packages/vant/package.json
+++ b/packages/vant/package.json
@ -49,7 +49,7 @@
  "dependencies": {
    "@vant/icons": "^1.8.0",
    "@vant/popperjs": "^1.2.1",
-    "@vant/use": "^1.4.1"
+    "@vant/use": "^1.4.2"
  },
  "peerDependencies": {
    "vue": "^3.0.0"
--- a/packages/vant/src/composables/use-lock-scroll.ts
+++ b/packages/vant/src/composables/use-lock-scroll.ts
@ -12,11 +12,13 @@ export function useLockScroll(
  shouldLock: () => boolean
 ) {
  const touch = useTouch();
+  const DIRECTION_UP = '01';
+  const DIRECTION_DOWN = '10';

  const onTouchMove = (event: TouchEvent) => {
    touch.move(event);

-    const direction = touch.deltaY.value > 0 ? '10' : '01';
+    const direction = touch.deltaY.value > 0 ? DIRECTION_DOWN : DIRECTION_UP;
    const el = getScrollParent(
      event.target as Element,
      rootRef.value
--- a/packages/vant/src/dropdown-menu/DropdownMenu.tsx
+++ b/packages/vant/src/dropdown-menu/DropdownMenu.tsx
@ -145,7 +145,10 @@ export default defineComponent({

    linkChildren({ id, props, offset });
    useClickAway(root, onClickAway);
-    useEventListener('scroll', onScroll, { target: scrollParent });
+    useEventListener('scroll', onScroll, {
+      target: scrollParent,
+      passive: true,
+    });

    return () => (
      <div ref={root} class={bem()}>
--- a/packages/vant/src/empty/Empty.tsx
+++ b/packages/vant/src/empty/Empty.tsx
@ -1,26 +1,14 @@
-import { defineComponent, PropType, type ExtractPropTypes } from 'vue';
+import { defineComponent, type PropType, type ExtractPropTypes } from 'vue';
+import { useId } from '../composables/use-id';
 import {
  Numeric,
  getSizeStyle,
  makeStringProp,
  createNamespace,
 } from '../utils';
-import {
-  renderError,
-  renderSearch,
-  renderNetwork,
-  renderMaterial,
-} from './Images';

 const [name, bem] = createNamespace('empty');

-const PRESET_IMAGES: Record<string, () => JSX.Element> = {
-  error: renderError,
-  search: renderSearch,
-  network: renderNetwork,
-  default: renderMaterial,
-};
-
 const emptyProps = {
  image: makeStringProp('default'),
  imageSize: [Number, String, Array] as PropType<Numeric | [Numeric, Numeric]>,
@ -35,13 +23,6 @@ export default defineComponent({
  props: emptyProps,

  setup(props, { slots }) {
-    const renderImage = () => {
-      if (slots.image) {
-        return slots.image();
-      }
-      return PRESET_IMAGES[props.image]?.() || <img src={props.image} />;
-    };
-
    const renderDescription = () => {
      const description = slots.description
        ? slots.description()
@ -58,6 +39,259 @@ export default defineComponent({
      }
    };

+    const baseId = useId();
+    const getId = (num: number | string) => `${baseId}-${num}`;
+    const getUrlById = (num: number | string) => `url(#${getId(num)})`;
+
+    const renderStop = (color: string, offset: number, opacity?: number) => (
+      <stop stop-color={color} offset={`${offset}%`} stop-opacity={opacity} />
+    );
+
+    const renderStops = (fromColor: string, toColor: string) => [
+      renderStop(fromColor, 0),
+      renderStop(toColor, 100),
+    ];
+
+    const renderShadow = (id: string) => [
+      <defs>
+        <radialGradient
+          id={getId(id)}
+          cx="50%"
+          cy="54%"
+          fx="50%"
+          fy="54%"
+          r="297%"
+          gradientTransform="matrix(-.16 0 0 -.33 .58 .72)"
+        >
+          {renderStop('#EBEDF0', 0)}
+          {renderStop('#F2F3F5', 100, 0.3)}
+        </radialGradient>
+      </defs>,
+      <ellipse
+        fill={getUrlById(id)}
+        opacity=".8"
+        cx="80"
+        cy="140"
+        rx="46"
+        ry="8"
+      />,
+    ];
+
+    const renderBuilding = () => [
+      <defs>
+        <linearGradient id={getId('a')} x1="64%" y1="100%" x2="64%">
+          {renderStop('#FFF', 0, 0.5)}
+          {renderStop('#F2F3F5', 100)}
+        </linearGradient>
+      </defs>,
+      <g opacity=".8">
+        <path d="M36 131V53H16v20H2v58h34z" fill={getUrlById('a')} />
+        <path d="M123 15h22v14h9v77h-31V15z" fill={getUrlById('a')} />
+      </g>,
+    ];
+
+    const renderCloud = () => [
+      <defs>
+        <linearGradient id={getId('b')} x1="64%" y1="97%" x2="64%" y2="0%">
+          {renderStop('#F2F3F5', 0, 0.3)}
+          {renderStop('#F2F3F5', 100)}
+        </linearGradient>
+      </defs>,
+      <g opacity=".8">
+        <path
+          d="M87 6c3 0 7 3 8 6a8 8 0 1 1-1 16H80a7 7 0 0 1-8-6c0-4 3-7 6-7 0-5 4-9 9-9Z"
+          fill={getUrlById('b')}
+        />
+        <path
+          d="M19 23c2 0 3 1 4 3 2 0 4 2 4 4a4 4 0 0 1-4 3v1h-7v-1l-1 1c-2 0-3-2-3-4 0-1 1-3 3-3 0-2 2-4 4-4Z"
+          fill={getUrlById('b')}
+        />
+      </g>,
+    ];
+
+    const renderNetwork = () => (
+      <svg viewBox="0 0 160 160">
+        <defs>
+          <linearGradient id={getId(1)} x1="64%" y1="100%" x2="64%">
+            {renderStop('#FFF', 0, 0.5)}
+            {renderStop('#F2F3F5', 100)}
+          </linearGradient>
+          <linearGradient id={getId(2)} x1="50%" x2="50%" y2="84%">
+            {renderStop('#EBEDF0', 0)}
+            {renderStop('#DCDEE0', 100, 0)}
+          </linearGradient>
+          <linearGradient id={getId(3)} x1="100%" x2="100%" y2="100%">
+            {renderStops('#EAEDF0', '#DCDEE0')}
+          </linearGradient>
+          <radialGradient
+            id={getId(4)}
+            cx="50%"
+            cy="0%"
+            fx="50%"
+            fy="0%"
+            r="100%"
+            gradientTransform="matrix(0 1 -.54 0 .5 -.5)"
+          >
+            {renderStop('#EBEDF0', 0)}
+            {renderStop('#FFF', 100, 0)}
+          </radialGradient>
+        </defs>
+        <g fill="none">
+          {renderBuilding()}
+          <path fill={getUrlById(4)} d="M0 139h160v21H0z" />
+          <path
+            d="M80 54a7 7 0 0 1 3 13v27l-2 2h-2a2 2 0 0 1-2-2V67a7 7 0 0 1 3-13z"
+            fill={getUrlById(2)}
+          />
+          <g opacity=".6" stroke-linecap="round" stroke-width="7">
+            <path
+              d="M64 47a19 19 0 0 0-5 13c0 5 2 10 5 13"
+              stroke={getUrlById(3)}
+            />
+            <path d="M53 36a34 34 0 0 0 0 48" stroke={getUrlById(3)} />
+            <path
+              d="M95 73a19 19 0 0 0 6-13c0-5-2-9-6-13"
+              stroke={getUrlById(3)}
+            />
+            <path d="M106 84a34 34 0 0 0 0-48" stroke={getUrlById(3)} />
+          </g>
+          <g transform="translate(31 105)">
+            <rect fill="#EBEDF0" width="98" height="34" rx="2" />
+            <rect fill="#FFF" x="9" y="8" width="80" height="18" rx="1.1" />
+            <rect fill="#EBEDF0" x="15" y="12" width="18" height="6" rx="1.1" />
+          </g>
+        </g>
+      </svg>
+    );
+
+    const renderMaterial = () => (
+      <svg viewBox="0 0 160 160">
+        <defs>
+          <linearGradient x1="50%" x2="50%" y2="100%" id={getId(5)}>
+            {renderStops('#F2F3F5', '#DCDEE0')}
+          </linearGradient>
+          <linearGradient x1="95%" y1="48%" x2="5.5%" y2="51%" id={getId(6)}>
+            {renderStops('#EAEDF1', '#DCDEE0')}
+          </linearGradient>
+          <linearGradient y1="45%" x2="100%" y2="54%" id={getId(7)}>
+            {renderStops('#EAEDF1', '#DCDEE0')}
+          </linearGradient>
+        </defs>
+        {renderBuilding()}
+        {renderCloud()}
+        <g transform="translate(36 50)" fill="none">
+          <g transform="translate(8)">
+            <rect
+              fill="#EBEDF0"
+              opacity=".6"
+              x="38"
+              y="13"
+              width="36"
+              height="53"
+              rx="2"
+            />
+            <rect fill={getUrlById(5)} width="64" height="66" rx="2" />
+            <rect fill="#FFF" x="6" y="6" width="52" height="55" rx="1" />
+            <g transform="translate(15 17)" fill={getUrlById(6)}>
+              <rect width="34" height="6" rx="1" />
+              <path d="M0 14h34v6H0z" />
+              <rect y="28" width="34" height="6" rx="1" />
+            </g>
+          </g>
+          <rect fill={getUrlById(7)} y="61" width="88" height="28" rx="1" />
+          <rect fill="#F7F8FA" x="29" y="72" width="30" height="6" rx="1" />
+        </g>
+      </svg>
+    );
+
+    const renderError = () => (
+      <svg viewBox="0 0 160 160">
+        <defs>
+          <linearGradient x1="50%" x2="50%" y2="100%" id={getId(8)}>
+            {renderStops('#EAEDF1', '#DCDEE0')}
+          </linearGradient>
+        </defs>
+        {renderBuilding()}
+        {renderCloud()}
+        {renderShadow('c')}
+        <path
+          d="m59 60 21 21 21-21h3l9 9v3L92 93l21 21v3l-9 9h-3l-21-21-21 21h-3l-9-9v-3l21-21-21-21v-3l9-9h3Z"
+          fill={getUrlById(8)}
+        />
+      </svg>
+    );
+
+    const renderSearch = () => (
+      <svg viewBox="0 0 160 160">
+        <defs>
+          <linearGradient x1="50%" y1="100%" x2="50%" id={getId(9)}>
+            {renderStops('#EEE', '#D8D8D8')}
+          </linearGradient>
+          <linearGradient x1="100%" y1="50%" y2="50%" id={getId(10)}>
+            {renderStops('#F2F3F5', '#DCDEE0')}
+          </linearGradient>
+          <linearGradient x1="50%" x2="50%" y2="100%" id={getId(11)}>
+            {renderStops('#F2F3F5', '#DCDEE0')}
+          </linearGradient>
+          <linearGradient x1="50%" x2="50%" y2="100%" id={getId(12)}>
+            {renderStops('#FFF', '#F7F8FA')}
+          </linearGradient>
+        </defs>
+        {renderBuilding()}
+        {renderCloud()}
+        {renderShadow('d')}
+        <g transform="rotate(-45 113 -4)" fill="none">
+          <rect
+            fill={getUrlById(9)}
+            x="24"
+            y="52.8"
+            width="5.8"
+            height="19"
+            rx="1"
+          />
+          <rect
+            fill={getUrlById(10)}
+            x="22.1"
+            y="67.3"
+            width="9.9"
+            height="28"
+            rx="1"
+          />
+          <circle
+            stroke={getUrlById(11)}
+            stroke-width="8"
+            cx="27"
+            cy="27"
+            r="27"
+          />
+          <circle fill={getUrlById(12)} cx="27" cy="27" r="16" />
+          <path
+            d="M37 7c-8 0-15 5-16 12"
+            stroke={getUrlById(11)}
+            stroke-width="3"
+            opacity=".5"
+            stroke-linecap="round"
+            transform="rotate(45 29 13)"
+          />
+        </g>
+      </svg>
+    );
+
+    const renderImage = () => {
+      if (slots.image) {
+        return slots.image();
+      }
+
+      const PRESET_IMAGES: Record<string, () => JSX.Element> = {
+        error: renderError,
+        search: renderSearch,
+        network: renderNetwork,
+        default: renderMaterial,
+      };
+
+      return PRESET_IMAGES[props.image]?.() || <img src={props.image} />;
+    };
+
    return () => (
      <div class={bem()}>
        <div class={bem('image')} style={getSizeStyle(props.imageSize)}>
--- a/packages/vant/src/empty/Images.tsx
+++ b/packages/vant/src/empty/Images.tsx
@ -1,203 +0,0 @@
-const getId = (num: number | string) => `van-empty-${num}`;
-const useId = (num: number | string) => `url(#${getId(num)})`;
-
-const renderStop = (color: string, offset: number, opacity?: number) => (
-  <stop stop-color={color} offset={`${offset}%`} stop-opacity={opacity} />
-);
-
-const renderStops = (fromColor: string, toColor: string) => [
-  renderStop(fromColor, 0),
-  renderStop(toColor, 100),
-];
-
-const renderShadow = (id: string) => [
-  <defs>
-    <radialGradient
-      id={getId(id)}
-      cx="50%"
-      cy="54%"
-      fx="50%"
-      fy="54%"
-      r="297%"
-      gradientTransform="matrix(-.16 0 0 -.33 .58 .72)"
-    >
-      {renderStop('#EBEDF0', 0)}
-      {renderStop('#F2F3F5', 100, 0.3)}
-    </radialGradient>
-  </defs>,
-  <ellipse fill={useId(id)} opacity=".8" cx="80" cy="140" rx="46" ry="8" />,
-];
-
-const renderBuilding = () => [
-  <defs>
-    <linearGradient id={getId('a')} x1="64%" y1="100%" x2="64%">
-      {renderStop('#FFF', 0, 0.5)}
-      {renderStop('#F2F3F5', 100)}
-    </linearGradient>
-  </defs>,
-  <g opacity=".8">
-    <path d="M36 131V53H16v20H2v58h34z" fill={useId('a')} />
-    <path d="M123 15h22v14h9v77h-31V15z" fill={useId('a')} />
-  </g>,
-];
-
-const renderCloud = () => [
-  <defs>
-    <linearGradient id={getId('b')} x1="64%" y1="97%" x2="64%" y2="0%">
-      {renderStop('#F2F3F5', 0, 0.3)}
-      {renderStop('#F2F3F5', 100)}
-    </linearGradient>
-  </defs>,
-  <g opacity=".8">
-    <path
-      d="M87 6c3 0 7 3 8 6a8 8 0 1 1-1 16H80a7 7 0 0 1-8-6c0-4 3-7 6-7 0-5 4-9 9-9Z"
-      fill={useId('b')}
-    />
-    <path
-      d="M19 23c2 0 3 1 4 3 2 0 4 2 4 4a4 4 0 0 1-4 3v1h-7v-1l-1 1c-2 0-3-2-3-4 0-1 1-3 3-3 0-2 2-4 4-4Z"
-      fill={useId('b')}
-    />
-  </g>,
-];
-
-export const renderNetwork = () => (
-  <svg viewBox="0 0 160 160">
-    <defs>
-      <linearGradient id={getId(1)} x1="64%" y1="100%" x2="64%">
-        {renderStop('#FFF', 0, 0.5)}
-        {renderStop('#F2F3F5', 100)}
-      </linearGradient>
-      <linearGradient id={getId(2)} x1="50%" x2="50%" y2="84%">
-        {renderStop('#EBEDF0', 0)}
-        {renderStop('#DCDEE0', 100, 0)}
-      </linearGradient>
-      <linearGradient id={getId(3)} x1="100%" x2="100%" y2="100%">
-        {renderStops('#EAEDF0', '#DCDEE0')}
-      </linearGradient>
-      <radialGradient
-        id={getId(4)}
-        cx="50%"
-        cy="0%"
-        fx="50%"
-        fy="0%"
-        r="100%"
-        gradientTransform="matrix(0 1 -.54 0 .5 -.5)"
-      >
-        {renderStop('#EBEDF0', 0)}
-        {renderStop('#FFF', 100, 0)}
-      </radialGradient>
-    </defs>
-    <g fill="none">
-      {renderBuilding()}
-      <path fill={useId(4)} d="M0 139h160v21H0z" />
-      <path
-        d="M80 54a7 7 0 0 1 3 13v27l-2 2h-2a2 2 0 0 1-2-2V67a7 7 0 0 1 3-13z"
-        fill={useId(2)}
-      />
-      <g opacity=".6" stroke-linecap="round" stroke-width="7">
-        <path d="M64 47a19 19 0 0 0-5 13c0 5 2 10 5 13" stroke={useId(3)} />
-        <path d="M53 36a34 34 0 0 0 0 48" stroke={useId(3)} />
-        <path d="M95 73a19 19 0 0 0 6-13c0-5-2-9-6-13" stroke={useId(3)} />
-        <path d="M106 84a34 34 0 0 0 0-48" stroke={useId(3)} />
-      </g>
-      <g transform="translate(31 105)">
-        <rect fill="#EBEDF0" width="98" height="34" rx="2" />
-        <rect fill="#FFF" x="9" y="8" width="80" height="18" rx="1.1" />
-        <rect fill="#EBEDF0" x="15" y="12" width="18" height="6" rx="1.1" />
-      </g>
-    </g>
-  </svg>
-);
-
-export const renderMaterial = () => (
-  <svg viewBox="0 0 160 160">
-    <defs>
-      <linearGradient x1="50%" x2="50%" y2="100%" id={getId(5)}>
-        {renderStops('#F2F3F5', '#DCDEE0')}
-      </linearGradient>
-      <linearGradient x1="95%" y1="48%" x2="5.5%" y2="51%" id={getId(6)}>
-        {renderStops('#EAEDF1', '#DCDEE0')}
-      </linearGradient>
-      <linearGradient y1="45%" x2="100%" y2="54%" id={getId(7)}>
-        {renderStops('#EAEDF1', '#DCDEE0')}
-      </linearGradient>
-    </defs>
-    {renderBuilding()}
-    {renderCloud()}
-    <g transform="translate(36 50)" fill="none">
-      <g transform="translate(8)">
-        <rect
-          fill="#EBEDF0"
-          opacity=".6"
-          x="38"
-          y="13"
-          width="36"
-          height="53"
-          rx="2"
-        />
-        <rect fill={useId(5)} width="64" height="66" rx="2" />
-        <rect fill="#FFF" x="6" y="6" width="52" height="55" rx="1" />
-        <g transform="translate(15 17)" fill={useId(6)}>
-          <rect width="34" height="6" rx="1" />
-          <path d="M0 14h34v6H0z" />
-          <rect y="28" width="34" height="6" rx="1" />
-        </g>
-      </g>
-      <rect fill={useId(7)} y="61" width="88" height="28" rx="1" />
-      <rect fill="#F7F8FA" x="29" y="72" width="30" height="6" rx="1" />
-    </g>
-  </svg>
-);
-
-export const renderError = () => (
-  <svg viewBox="0 0 160 160">
-    <defs>
-      <linearGradient x1="50%" x2="50%" y2="100%" id={getId(8)}>
-        {renderStops('#EAEDF1', '#DCDEE0')}
-      </linearGradient>
-    </defs>
-    {renderBuilding()}
-    {renderCloud()}
-    {renderShadow('c')}
-    <path
-      d="m59 60 21 21 21-21h3l9 9v3L92 93l21 21v3l-9 9h-3l-21-21-21 21h-3l-9-9v-3l21-21-21-21v-3l9-9h3Z"
-      fill={useId(8)}
-    />
-  </svg>
-);
-
-export const renderSearch = () => (
-  <svg viewBox="0 0 160 160">
-    <defs>
-      <linearGradient x1="50%" y1="100%" x2="50%" id={getId(9)}>
-        {renderStops('#EEE', '#D8D8D8')}
-      </linearGradient>
-      <linearGradient x1="100%" y1="50%" y2="50%" id={getId(10)}>
-        {renderStops('#F2F3F5', '#DCDEE0')}
-      </linearGradient>
-      <linearGradient x1="50%" x2="50%" y2="100%" id={getId(11)}>
-        {renderStops('#F2F3F5', '#DCDEE0')}
-      </linearGradient>
-      <linearGradient x1="50%" x2="50%" y2="100%" id={getId(12)}>
-        {renderStops('#FFF', '#F7F8FA')}
-      </linearGradient>
-    </defs>
-    {renderBuilding()}
-    {renderCloud()}
-    {renderShadow('d')}
-    <g transform="rotate(-45 113 -4)" fill="none">
-      <rect fill={useId(9)} x="24" y="52.8" width="5.8" height="19" rx="1" />
-      <rect fill={useId(10)} x="22.1" y="67.3" width="9.9" height="28" rx="1" />
-      <circle stroke={useId(11)} stroke-width="8" cx="27" cy="27" r="27" />
-      <circle fill={useId(12)} cx="27" cy="27" r="16" />
-      <path
-        d="M37 7c-8 0-15 5-16 12"
-        stroke={useId(11)}
-        stroke-width="3"
-        opacity=".5"
-        stroke-linecap="round"
-        transform="rotate(45 29 13)"
-      />
-    </g>
-  </svg>
-);
--- a/packages/vant/src/image-preview/ImagePreviewItem.tsx
+++ b/packages/vant/src/image-preview/ImagePreviewItem.tsx
@ -279,7 +279,7 @@ export default defineComponent({
      return (
        <SwipeItem
          class={bem('swipe-item')}
-          onTouchstart={onTouchStart}
+          onTouchstartPassive={onTouchStart}
          onTouchmove={onTouchMove}
          onTouchend={onTouchEnd}
          onTouchcancel={onTouchEnd}
--- a/packages/vant/src/index-bar/IndexBar.tsx
+++ b/packages/vant/src/index-bar/IndexBar.tsx
@ -182,7 +182,10 @@ export default defineComponent({
      nextTick(onScroll);
    };

-    useEventListener('scroll', onScroll, { target: scrollParent });
+    useEventListener('scroll', onScroll, {
+      target: scrollParent,
+      passive: true,
+    });

    onMounted(init);

@ -272,7 +275,7 @@ export default defineComponent({
        class={bem('sidebar')}
        style={sidebarStyle.value}
        onClick={onClickSidebar}
-        onTouchstart={touch.start}
+        onTouchstartPassive={touch.start}
        onTouchmove={onTouchMove}
      >
        {renderIndexes()}
--- a/packages/vant/src/list/List.tsx
+++ b/packages/vant/src/list/List.tsx
@ -166,7 +166,10 @@ export default defineComponent({

    useExpose<ListExpose>({ check });

-    useEventListener('scroll', check, { target: scrollParent });
+    useEventListener('scroll', check, {
+      target: scrollParent,
+      passive: true,
+    });

    return () => {
      const Content = slots.default?.();
--- a/packages/vant/src/notice-bar/README.md
+++ b/packages/vant/src/notice-bar/README.md
@ -72,6 +72,7 @@ app.use(NoticeBar);
    vertical
    class="notice-swipe"
    :autoplay="3000"
+    :touchable="false"
    :show-indicators="false"
  >
    <van-swipe-item>Content 1</van-swipe-item>
--- a/packages/vant/src/notice-bar/README.zh-CN.md
+++ b/packages/vant/src/notice-bar/README.zh-CN.md
@ -88,6 +88,7 @@ app.use(NoticeBar);
    vertical
    class="notice-swipe"
    :autoplay="3000"
+    :touchable="false"
    :show-indicators="false"
  >
    <van-swipe-item>明月直入，无心可猜。</van-swipe-item>
--- a/packages/vant/src/notice-bar/demo/index.vue
+++ b/packages/vant/src/notice-bar/demo/index.vue
@ -69,6 +69,7 @@ const t = useTranslate({
        vertical
        class="notice-swipe"
        :autoplay="3000"
+        :touchable="false"
        :show-indicators="false"
      >
        <van-swipe-item>{{ t('poetry1') }}</van-swipe-item>
--- a/packages/vant/src/number-keyboard/NumberKeyboard.tsx
+++ b/packages/vant/src/number-keyboard/NumberKeyboard.tsx
@ -280,10 +280,8 @@ export default defineComponent({
              unfit: !props.safeAreaInsetBottom,
              'with-title': !!Title,
            })}
-            onTouchstart={stopPropagation}
            onAnimationend={onAnimationEnd}
-            // @ts-ignore
-            onWebkitAnimationEnd={onAnimationEnd}
+            onTouchstartPassive={stopPropagation}
          >
            {Title}
            <div class={bem('body')}>
--- a/packages/vant/src/number-keyboard/NumberKeyboardKey.tsx
+++ b/packages/vant/src/number-keyboard/NumberKeyboardKey.tsx
@ -88,8 +88,8 @@ export default defineComponent({
    return () => (
      <div
        class={bem('wrapper', { wider: props.wider })}
-        onTouchstart={onTouchStart}
-        onTouchmove={onTouchMove}
+        onTouchstartPassive={onTouchStart}
+        onTouchmovePassive={onTouchMove}
        onTouchend={onTouchEnd}
        onTouchcancel={onTouchEnd}
      >
--- a/packages/vant/src/password-input/PasswordInput.tsx
+++ b/packages/vant/src/password-input/PasswordInput.tsx
@ -78,7 +78,7 @@ export default defineComponent({
        <div class={bem()}>
          <ul
            class={[bem('security'), { [BORDER_SURROUND]: !props.gutter }]}
-            onTouchstart={onTouchStart}
+            onTouchstartPassive={onTouchStart}
          >
            {renderPoints()}
          </ul>
--- a/packages/vant/src/picker/PickerColumn.tsx
+++ b/packages/vant/src/picker/PickerColumn.tsx
@ -253,7 +253,7 @@ export default defineComponent({
    return () => (
      <div
        class={bem()}
-        onTouchstart={onTouchStart}
+        onTouchstartPassive={onTouchStart}
        onTouchmove={onTouchMove}
        onTouchend={onTouchEnd}
        onTouchcancel={onTouchEnd}
--- a/packages/vant/src/popover/Popover.tsx
+++ b/packages/vant/src/popover/Popover.tsx
@ -3,6 +3,7 @@ import {
  watch,
  nextTick,
  onMounted,
+  watchEffect,
  onBeforeUnmount,
  defineComponent,
  type PropType,
@ -90,6 +91,7 @@ export default defineComponent({
  setup(props, { emit, slots, attrs }) {
    let popper: Instance | null;

+    const popupRef = ref<HTMLElement>();
    const wrapperRef = ref<HTMLElement>();
    const popoverRef = ref<ComponentInstance>();

@ -144,11 +146,6 @@ export default defineComponent({
      }
    };

-    const onTouchstart = (event: TouchEvent) => {
-      event.stopPropagation();
-      emit('touchstart', event);
-    };
-
    const onClickAction = (action: PopoverAction, index: number) => {
      if (action.disabled) {
        return;
@ -163,6 +160,7 @@ export default defineComponent({

    const onClickAway = () => {
      if (
+        props.show &&
        props.closeOnClickOutside &&
        (!props.overlay || props.closeOnClickOverlay)
      ) {
@ -203,7 +201,13 @@ export default defineComponent({
      );
    };

-    onMounted(updateLocation);
+    onMounted(() => {
+      updateLocation();
+      watchEffect(() => {
+        popupRef.value = popoverRef.value?.popupRef.value;
+      });
+    });
+
    onBeforeUnmount(() => {
      if (popper) {
        popper.destroy();
@ -213,7 +217,9 @@ export default defineComponent({

    watch(() => [props.show, props.offset, props.placement], updateLocation);

-    useClickAway(wrapperRef, onClickAway, { eventName: 'touchstart' });
+    useClickAway([wrapperRef, popupRef], onClickAway, {
+      eventName: 'touchstart',
+    });

    return () => (
      <>
@ -226,7 +232,6 @@ export default defineComponent({
          position={''}
          transition="van-popover-zoom"
          lockScroll={false}
-          onTouchstart={onTouchstart}
          onUpdate:show={updateShow}
          {...attrs}
          {...pick(props, popupProps)}
--- a/packages/vant/src/pull-refresh/PullRefresh.tsx
+++ b/packages/vant/src/pull-refresh/PullRefresh.tsx
@ -221,12 +221,8 @@ export default defineComponent({
      }
    );

-    // add passive option to avoid Chrome warning
-    useEventListener('touchstart', onTouchStart as EventListener, {
-      target: track,
-      passive: true,
-    });
-    useEventListener('touchmove', onTouchMove as EventListener, {
+    // useEventListener will set passive to `false` to eliminate the warning of Chrome
+    useEventListener('touchmove', onTouchMove, {
      target: track,
    });

@ -244,6 +240,7 @@ export default defineComponent({
            ref={track}
            class={bem('track')}
            style={trackStyle}
+            onTouchstartPassive={onTouchStart}
            onTouchend={onTouchEnd}
            onTouchcancel={onTouchEnd}
          >
--- a/packages/vant/src/rate/Rate.tsx
+++ b/packages/vant/src/rate/Rate.tsx
@ -279,7 +279,7 @@ export default defineComponent({
        tabindex={props.disabled ? undefined : 0}
        aria-disabled={props.disabled}
        aria-readonly={props.readonly}
-        onTouchstart={onTouchStart}
+        onTouchstartPassive={onTouchStart}
        onTouchmove={onTouchMove}
      >
        {list.value.map(renderStar)}
--- a/packages/vant/src/slider/Slider.tsx
+++ b/packages/vant/src/slider/Slider.tsx
@ -299,7 +299,7 @@ export default defineComponent({
          aria-disabled={props.disabled || undefined}
          aria-readonly={props.readonly || undefined}
          aria-orientation={props.vertical ? 'vertical' : 'horizontal'}
-          onTouchstart={(event) => {
+          onTouchstartPassive={(event) => {
            if (typeof index === 'number') {
              // save index of current button
              buttonIndex = index;
--- a/packages/vant/src/stepper/Stepper.tsx
+++ b/packages/vant/src/stepper/Stepper.tsx
@ -259,7 +259,7 @@ export default defineComponent({
        actionType = type;
        onChange();
      },
-      onTouchstart: () => {
+      onTouchstartPassive: () => {
        actionType = type;
        onTouchStart();
      },
--- a/packages/vant/src/sticky/Sticky.tsx
+++ b/packages/vant/src/sticky/Sticky.tsx
@ -140,7 +140,10 @@ export default defineComponent({
      (value) => emit('change', value)
    );

-    useEventListener('scroll', onScroll, { target: scrollParent });
+    useEventListener('scroll', onScroll, {
+      target: scrollParent,
+      passive: true,
+    });
    useVisibilityChange(root, onScroll);

    return () => (
--- a/packages/vant/src/swipe-cell/SwipeCell.tsx
+++ b/packages/vant/src/swipe-cell/SwipeCell.tsx
@ -220,7 +220,7 @@ export default defineComponent({
          ref={root}
          class={bem()}
          onClick={getClickHandler('cell', lockClick)}
-          onTouchstart={onTouchStart}
+          onTouchstartPassive={onTouchStart}
          onTouchmove={onTouchMove}
          onTouchend={onTouchEnd}
          onTouchcancel={onTouchEnd}
--- a/packages/vant/src/swipe/Swipe.tsx
+++ b/packages/vant/src/swipe/Swipe.tsx
@ -440,7 +440,7 @@ export default defineComponent({
        <div
          style={trackStyle.value}
          class={bem('track', { vertical: props.vertical })}
-          onTouchstart={onTouchStart}
+          onTouchstartPassive={onTouchStart}
          onTouchmove={onTouchMove}
          onTouchend={onTouchEnd}
          onTouchcancel={onTouchEnd}
--- a/packages/vant/src/tabs/Tabs.tsx
+++ b/packages/vant/src/tabs/Tabs.tsx
@ -102,6 +102,7 @@ export default defineComponent({
    const root = ref<HTMLElement>();
    const navRef = ref<HTMLElement>();
    const wrapRef = ref<HTMLElement>();
+    const contentRef = ref<ComponentInstance>();

    const id = useId();
    const scroller = useScrollParent(root);
@ -446,15 +447,23 @@ export default defineComponent({
    const onRendered = (name: Numeric, title?: string) =>
      emit('rendered', name, title);

+    const resize = () => {
+      setLine();
+      nextTick(() => contentRef.value?.swipeRef.value?.resize());
+    };
+
    useExpose({
-      resize: setLine,
+      resize,
      scrollTo,
    });

    onActivated(setLine);
    onPopupReopen(setLine);
    onMountedOrActivated(init);
-    useEventListener('scroll', onScroll, { target: scroller });
+    useEventListener('scroll', onScroll, {
+      target: scroller,
+      passive: true,
+    });

    linkChildren({
      id,
@ -480,6 +489,7 @@ export default defineComponent({
          [renderHeader(), slots['nav-bottom']?.()]
        )}
        <TabsContent
+          ref={contentRef}
          count={children.length}
          inited={state.inited}
          animated={props.animated}
--- a/packages/vant/src/tabs/TabsContent.tsx
+++ b/packages/vant/src/tabs/TabsContent.tsx
@ -1,6 +1,7 @@
 import { ref, watch, onMounted, defineComponent } from 'vue';
 import { numericProp, makeRequiredProp, createNamespace } from '../utils';
 import { Swipe, SwipeInstance } from '../swipe';
+import { useExpose } from '../composables/use-expose';

 const [name, bem] = createNamespace('tabs');

@ -60,6 +61,8 @@ export default defineComponent({
      swipeToCurrentTab(props.currentIndex);
    });

+    useExpose({ swipeRef });
+
    return () => (
      <div
        class={bem('content', {
--- a/packages/vant/src/vue-tsx-shim.d.ts
+++ b/packages/vant/src/vue-tsx-shim.d.ts
@ -12,5 +12,12 @@ declare module 'vue' {
    onTouchmove?: EventHandler;
    onTouchstart?: EventHandler;
    onTouchcancel?: EventHandler;
+    onTouchmovePassive?: EventHandler;
+    onTouchstartPassive?: EventHandler;
+  }
+
+  interface HTMLAttributes {
+    onTouchmovePassive?: EventHandler;
+    onTouchstartPassive?: EventHandler;
  }
 }
--- a/packages/vant/vant.config.mjs
+++ b/packages/vant/vant.config.mjs
@ -2,6 +2,7 @@ export default {
  name: 'vant',
  build: {
    srcDir: 'src',
+    tagPrefix: 'van-',
    namedExport: true,
    skipInstall: ['lazyload'],
    packageManager: 'pnpm',
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -51,7 +51,7 @@ importers:
      '@vant/eslint-config': workspace:*
      '@vant/icons': ^1.8.0
      '@vant/popperjs': ^1.2.1
-      '@vant/use': ^1.4.1
+      '@vant/use': ^1.4.2
      '@vue/runtime-core': ^3.2.27
      '@vue/test-utils': ^2.0.1
      typescript: ^4.7.4
@ -215,7 +215,7 @@ importers:
      '@typescript-eslint/parser': 5.30.3_eslint@8.19.0+typescript@4.7.4
      eslint-config-airbnb-base: 15.0.0_86af6c937a18f7b068a2d4281b478827
      eslint-config-prettier: 8.5.0_eslint@8.19.0
-      eslint-plugin-import: 2.26.0_eslint@8.19.0
+      eslint-plugin-import: 2.26.0_b991b8cc37fbaea14375bc1442f912c5
      eslint-plugin-vue: 9.1.1_eslint@8.19.0
    devDependencies:
      enhanced-resolve: 5.10.0
@ -269,6 +269,9 @@ packages:
    peerDependencies:
      '@algolia/client-search': ^4.9.1
      algoliasearch: ^4.9.1
+    peerDependenciesMeta:
+      '@algolia/client-search':
+        optional: true
    dependencies:
      '@algolia/autocomplete-shared': 1.7.1
      algoliasearch: 4.13.1
@ -816,6 +819,13 @@ packages:
      '@types/react': '>= 16.8.0 < 19.0.0'
      react: '>= 16.8.0 < 19.0.0'
      react-dom: '>= 16.8.0 < 19.0.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
    dependencies:
      '@algolia/autocomplete-core': 1.7.1
      '@algolia/autocomplete-preset-algolia': 1.7.1_algoliasearch@4.13.1
@ -1617,14 +1627,12 @@ packages:
      '@vue/shared': 3.2.37
      estree-walker: 2.0.2
      source-map: 0.6.1
-    dev: true

  /@vue/compiler-dom/3.2.37:
    resolution: {integrity: sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==}
    dependencies:
      '@vue/compiler-core': 3.2.37
      '@vue/shared': 3.2.37
-    dev: true

  /@vue/compiler-sfc/3.2.37:
    resolution: {integrity: sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg==}
@ -1639,14 +1647,12 @@ packages:
      magic-string: 0.25.9
      postcss: 8.4.14
      source-map: 0.6.1
-    dev: true

  /@vue/compiler-ssr/3.2.37:
    resolution: {integrity: sha512-7mQJD7HdXxQjktmsWp/J67lThEIcxLemz1Vb5I6rYJHR5vI+lON3nPGOH3ubmbvYGt8xEUaAr1j7/tIFWiEOqw==}
    dependencies:
      '@vue/compiler-dom': 3.2.37
      '@vue/shared': 3.2.37
-    dev: true

  /@vue/devtools-api/6.2.0:
    resolution: {integrity: sha512-pF1G4wky+hkifDiZSWn8xfuLOJI1ZXtuambpBEYaf7Xaf6zC/pM29rvAGpd3qaGXnr4BAXU1Pxz/VfvBGwexGA==}
@ -1659,20 +1665,17 @@ packages:
      '@vue/shared': 3.2.37
      estree-walker: 2.0.2
      magic-string: 0.25.9
-    dev: true

  /@vue/reactivity/3.2.37:
    resolution: {integrity: sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==}
    dependencies:
      '@vue/shared': 3.2.37
-    dev: true

  /@vue/runtime-core/3.2.37:
    resolution: {integrity: sha512-JPcd9kFyEdXLl/i0ClS7lwgcs0QpUAWj+SKX2ZC3ANKi1U4DOtiEr6cRqFXsPwY5u1L9fAjkinIdB8Rz3FoYNQ==}
    dependencies:
      '@vue/reactivity': 3.2.37
      '@vue/shared': 3.2.37
-    dev: true

  /@vue/runtime-dom/3.2.37:
    resolution: {integrity: sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==}
@ -1680,7 +1683,6 @@ packages:
      '@vue/runtime-core': 3.2.37
      '@vue/shared': 3.2.37
      csstype: 2.6.20
-    dev: true

  /@vue/server-renderer/3.2.37_vue@3.2.37:
    resolution: {integrity: sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==}
@ -1690,11 +1692,9 @@ packages:
      '@vue/compiler-ssr': 3.2.37
      '@vue/shared': 3.2.37
      vue: 3.2.37
-    dev: true

  /@vue/shared/3.2.37:
    resolution: {integrity: sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw==}
-    dev: true

  /@vue/test-utils/2.0.1_vue@3.2.37:
    resolution: {integrity: sha512-4kt7Sw1gzXeQOsMqrwrQbmEiG8El4MP8P4hfxkmfXdUHf7yHa3xC5CQc0x2YyuhT41w2d4K4O0ZdRvZhGdZlow==}
@ -2553,7 +2553,6 @@ packages:

  /csstype/2.6.20:
    resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==}
-    dev: true

  /dargs/7.0.0:
    resolution: {integrity: sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==}
@ -2579,6 +2578,11 @@ packages:

  /debug/2.6.9:
    resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
    dependencies:
      ms: 2.0.0
    dev: false
@ -3151,7 +3155,7 @@ packages:
    dependencies:
      confusing-browser-globals: 1.0.11
      eslint: 8.19.0
-      eslint-plugin-import: 2.26.0_eslint@8.19.0
+      eslint-plugin-import: 2.26.0_b991b8cc37fbaea14375bc1442f912c5
      object.assign: 4.1.2
      object.entries: 1.1.5
      semver: 6.3.0
@ -3173,27 +3177,46 @@ packages:
      resolve: 1.22.1
    dev: false

-  /eslint-module-utils/2.7.3:
+  /eslint-module-utils/2.7.3_0e410f8f48e63a2eb2da71474b5e1cf0:
    resolution: {integrity: sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==}
    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
    dependencies:
-      debug: 3.2.7
-      find-up: 2.1.0
+      '@typescript-eslint/parser': 5.30.3_eslint@8.19.0+typescript@4.7.4
+      eslint-import-resolver-node: 0.3.6
    dev: false

-  /eslint-plugin-import/2.26.0_eslint@8.19.0:
+  /eslint-plugin-import/2.26.0_b991b8cc37fbaea14375bc1442f912c5:
    resolution: {integrity: sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==}
    engines: {node: '>=4'}
    peerDependencies:
+      '@typescript-eslint/parser': '*'
      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
    dependencies:
+      '@typescript-eslint/parser': 5.30.3_eslint@8.19.0+typescript@4.7.4
      array-includes: 3.1.5
      array.prototype.flat: 1.3.0
      debug: 2.6.9
      doctrine: 2.1.0
      eslint: 8.19.0
      eslint-import-resolver-node: 0.3.6
-      eslint-module-utils: 2.7.3
+      eslint-module-utils: 2.7.3_0e410f8f48e63a2eb2da71474b5e1cf0
      has: 1.0.3
      is-core-module: 2.9.0
      is-glob: 4.0.3
@ -3201,6 +3224,10 @@ packages:
      object.values: 1.1.5
      resolve: 1.22.1
      tsconfig-paths: 3.14.1
+    transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
    dev: false

  /eslint-plugin-vue/9.1.1_eslint@8.19.0:
@ -5079,7 +5106,6 @@ packages:
    hasBin: true
    dependencies:
      js-tokens: 4.0.0
-    dev: true

  /lower-case/2.0.2:
    resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
@ -5114,7 +5140,6 @@ packages:
    resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
    dependencies:
      sourcemap-codec: 1.4.8
-    dev: true

  /make-dir/2.1.0:
    resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
@ -5942,11 +5967,13 @@ packages:
    resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
    peerDependencies:
      react: ^18.2.0
+    peerDependenciesMeta:
+      react:
+        optional: true
    dependencies:
      loose-envify: 1.4.0
      react: 18.2.0
      scheduler: 0.23.0
-    dev: true

  /react-is/17.0.2:
    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
@ -5957,7 +5984,6 @@ packages:
    engines: {node: '>=0.10.0'}
    dependencies:
      loose-envify: 1.4.0
-    dev: true

  /read-pkg-up/3.0.0:
    resolution: {integrity: sha512-YFzFrVvpC6frF1sz8psoHDBGF7fLPc+llq/8NB43oagqWkx8ar5zYtsTORtOjw9W2RHLpWP+zTWwBvf1bCmcSw==}
@ -6220,7 +6246,6 @@ packages:
    resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
    dependencies:
      loose-envify: 1.4.0
-    dev: true

  /section-matter/1.0.0:
    resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
@ -6341,7 +6366,6 @@ packages:

  /sourcemap-codec/1.4.8:
    resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
-    dev: true

  /spdx-correct/3.1.1:
    resolution: {integrity: sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==}
@ -6943,7 +6967,6 @@ packages:
      '@vue/runtime-dom': 3.2.37
      '@vue/server-renderer': 3.2.37_vue@3.2.37
      '@vue/shared': 3.2.37
-    dev: true

  /w3c-hr-time/1.0.2:
    resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}