persagy-vant 0.0.29 → 0.0.30

package/lib/dialog/README.zh-CN.md

@@ -1,365 +0,0 @@
-# 弹出框 Dialog
-
-### 介绍
-
-弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作，支持函数调用和组件调用两种方式。
-
-### 函数调用
-
-`Dialog` 是一个函数，调用后会直接在页面中弹出相应的模态框。
-
-```js
-import { Dialog } from 'vant';
-
-Dialog({ message: '提示' });
-```
-
-#### 手动引入样式
-
-Dialog 组件是以函数形式提供的，如果项目中使用 `unplugin-vue-components` 插件来自动引入组件样式，则无法正确识别 Dialog 组件，因此需要手动引入 Dialog 组件的样式：
-
-```js
-import 'vant/es/dialog/style';
-```
-
-你可以在项目的入口文件或公共模块中引入 Dialog 组件的样式，这样在业务代码中使用 Dialog 时，便不再需要重复引入样式了。
-
-### 组件调用
-
-通过组件调用 Dialog 时，可以通过下面的方式进行注册：
-
-```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>
-
-<template>
-  <!-- 中划线命名 -->
-  <van-dialog />
-  <!-- 也支持大驼峰命名 -->
-  <VanDialog>
-</template>
-```
-
-## 代码演示
-
-### 消息提示
-
-用于提示一些消息，只包含一个确认按钮。
-
-```js
-Dialog.alert({
-  title: '标题',
-  message: '代码是写出来给人看的，附带能在机器上运行。',
-}).then(() => {
-  // on close
-});
-
-Dialog.alert({
-  message: '生命远不止连轴转和忙到极限，人类的体验远比这辽阔、丰富得多。',
-}).then(() => {
-  // on close
-});
-```
-
-### 消息确认
-
-用于确认消息，包含取消和确认按钮。
-
-```js
-Dialog.confirm({
-  title: '标题',
-  message:
-    '如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。',
-})
-  .then(() => {
-    // on confirm
-  })
-  .catch(() => {
-    // on cancel
-  });
-```
-
-### 圆角按钮风格
-
-将 theme 选项设置为 `round-button` 可以展示圆角按钮风格的弹窗。
-
-```js
-Dialog.alert({
-  title: '标题',
-  message: '代码是写出来给人看的，附带能在机器上运行。',
-  theme: 'round-button',
-}).then(() => {
-  // on close
-});
-
-Dialog.alert({
-  message: '生命远不止连轴转和忙到极限，人类的体验远比这辽阔、丰富得多。',
-  theme: 'round-button',
-}).then(() => {
-  // on close
-});
-```
-
-### 异步关闭
-
-通过 `beforeClose` 属性可以传入一个回调函数，在弹窗关闭前进行特定操作。
-
-```js
-const beforeClose = (action) =>
-  new Promise((resolve) => {
-    setTimeout(() => {
-      if (action === 'confirm') {
-        resolve(true);
-      } else {
-        // 拦截取消操作
-        resolve(false);
-      }
-    }, 1000);
-  });
-
-Dialog.confirm({
-  title: '标题',
-  message:
-    '如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。',
-  beforeClose,
-});
-```
-
-### 全局方法
-
-通过 `app.use` 全局注册 Dialog 组件后，会自动在 app 的所有子组件上挂载 `$dialog` 方法，在所有组件内部都可以直接调用此方法。
-
-```js
-export default {
-  mounted() {
-    this.$dialog.alert({
-      message: '弹窗内容',
-    });
-  },
-};
-```
-
-> Tips: 由于 setup 选项中无法访问 this，因此不能使用上述方式，请通过 import 引入。
-
-### 组件调用
-
-如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。
-
-```html
-<van-dialog v-model:show="show" title="标题" show-cancel-button>
-  <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" />
-</van-dialog>
-```
-
-```js
-import { ref } from 'vue';
-
-export default {
-  setup() {
-    const show = ref(false);
-    return { show };
-  },
-};
-```
-
-## API
-
-### 方法
-
-| 方法名 | 说明 | 参数 | 返回值 |
-| --- | --- | --- | --- |
-| 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` |
-
-### DialogOptions
-
-通过函数调用 `Dialog` 时，支持传入以下选项：
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| title | 标题 | _string_ | - |
-| width | 弹窗宽度，默认单位为 `px` | _number \| string_ | `320px` |
-| message | 文本内容，支持通过 `\n` 换行 | _string \| () => JSX.ELement_ | - |
-| messageAlign | 内容对齐方式，可选值为 `left` `right` | _string_ | `center` |
-| theme | 样式风格，可选值为 `round-button` | _string_ | `default` |
-| className | 自定义类名 | _string \| Array \| object_ | - |
-| showConfirmButton | 是否展示确认按钮 | _boolean_ | `true` |
-| showCancelButton | 是否展示取消按钮 | _boolean_ | `false` |
-| showThirdButton | 是否展示第三个按钮，开启后按钮纵向排列 | _boolean_ | `false` |
-| showInput | 是否展示输入框样式 | _boolean_ | `false` |
-| inputValue | 输入框当前值 | _string_ | `''` |
-| inputPlaceholder | 输入框占位文本 | _string_ | `请输入` |
-| inputAutofocus | 是否在打开时自动聚焦输入框 | _boolean_ | `false` |
-| thirdButtonText | 第三个按钮文案 | _string_ | - |
-| thirdButtonColor | 第三个按钮颜色 | _string_ | - |
-| thirdButtonDisabled | 是否禁用第三个按钮 | _boolean_ | `false` |
-| confirmButtonText | 确认按钮文案 | _string_ | `确认` |
-| confirmButtonColor | 确认按钮颜色 | _string_ | `var(--van-primary-color)` |
-| confirmButtonDisabled `v3.5.0` | 是否禁用确认按钮 | _boolean_ | `false` |
-| cancelButtonText | 取消按钮文案 | _string_ | `取消` |
-| cancelButtonColor | 取消按钮颜色 | _string_ | `black` |
-| cancelButtonDisabled `v3.5.0` | 是否禁用取消按钮 | _boolean_ | `false` |
-| overlay | 是否展示遮罩层 | _boolean_ | `true` |
-| overlayClass | 自定义遮罩层类名 | _string \| Array \| object_ | - |
-| overlayStyle | 自定义遮罩层样式 | _object_ | - |
-| closeOnPopstate | 是否在页面回退时自动关闭 | _boolean_ | `true` |
-| closeOnClickOverlay | 是否在点击遮罩层后关闭弹窗 | _boolean_ | `false` |
-| lockScroll | 是否锁定背景滚动 | _boolean_ | `true` |
-| allowHtml | 是否允许 message 内容中渲染 HTML | _boolean_ | `false` |
-| beforeClose | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 Promise | _(action: string) => boolean \| Promise\<boolean\>_ | - |
-| transition | 动画类名，等价于 [transition](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的 `name` 属性 | _string_ | - |
-| teleport | 指定挂载的节点，等同于 Teleport 组件的 [to 属性](https://v3.cn.vuejs.org/api/built-in-components.html#teleport) | _string \| Element_ | `body` |
-
-### Props
-
-通过组件调用 `Dialog` 时，支持以下 Props：
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| v-model:show | 是否显示弹窗 | _boolean_ | - |
-| title | 标题 | _string_ | - |
-| width | 弹窗宽度，默认单位为 `px` | _number \| string_ | `320px` |
-| message | 文本内容，支持通过 `\n` 换行 | _string \| () => JSX.Element_ | - |
-| message-align | 内容水平对齐方式，可选值为 `left` `right` `justify` | _string_ | `center` |
-| theme | 样式风格，可选值为 `round-button` | _string_ | `default` |
-| show-confirm-button | 是否展示确认按钮 | _boolean_ | `true` |
-| show-cancel-button | 是否展示取消按钮 | _boolean_ | `false` |
-| show-input | 是否展示输入框样式 | _boolean_ | `false` |
-| v-model:input-value | 输入框当前值 | _string_ | `''` |
-| input-placeholder | 输入框占位文本 | _string_ | `请输入` |
-| input-autofocus | 是否在打开时自动聚焦输入框 | _boolean_ | `false` |
-| confirm-button-text | 确认按钮文案 | _string_ | `确认` |
-| confirm-button-color | 确认按钮颜色 | _string_ | `var(--van-primary-color)` |
-| confirm-button-disabled `v3.5.0` | 是否禁用确认按钮 | _boolean_ | `false` |
-| cancel-button-text | 取消按钮文案 | _string_ | `取消` |
-| cancel-button-color | 取消按钮颜色 | _string_ | `black` |
-| cancel-button-disabled `v3.5.0` | 是否禁用取消按钮 | _boolean_ | `false` |
-| overlay | 是否展示遮罩层 | _boolean_ | `true` |
-| overlay-class | 自定义遮罩层类名 | _string_ | - |
-| overlay-style | 自定义遮罩层样式 | _object_ | - |
-| close-on-popstate | 是否在页面回退时自动关闭 | _boolean_ | `true` |
-| close-on-click-overlay | 是否在点击遮罩层后关闭弹窗 | _boolean_ | `false` |
-| lazy-render | 是否在显示弹层时才渲染节点 | _boolean_ | `true` |
-| lock-scroll | 是否锁定背景滚动 | _boolean_ | `true` |
-| allow-html | 是否允许 message 内容中渲染 HTML | _boolean_ | `false` |
-| before-close | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 Promise | _(action: string) => boolean \| Promise\<boolean\>_ | - |
-| transition | 动画类名，等价于 [transition](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的 `name` 属性 | _string_ | - |
-| teleport | 指定挂载的节点，等同于 Teleport 组件的 [to 属性](https://v3.cn.vuejs.org/api/built-in-components.html#teleport) | _string \| Element_ | - |
-
-### Events
-
-通过组件调用 `Dialog` 时，支持以下事件：
-
-| 事件    | 说明                     | 回调参数 |
-| ------- | ------------------------ | -------- |
-| confirm | 点击确认按钮时触发       | -        |
-| cancel  | 点击取消按钮时触发       | -        |
-| input   | 输入框内容变化时触发     | _value: string_ |
-| open    | 打开弹窗时触发           | -        |
-| close   | 关闭弹窗时触发           | -        |
-| opened  | 打开弹窗且动画结束后触发 | -        |
-| closed  | 关闭弹窗且动画结束后触发 | -        |
-
-### Slots
-
-通过组件调用 `Dialog` 时，支持以下插槽：
-
-| 名称             | 说明               |
-| ---------------- | ------------------ |
-| default          | 自定义内容         |
-| title            | 自定义标题         |
-| footer `v3.0.11` | 自定义底部按钮区域 |
-
-### 类型定义
-
-组件导出以下类型定义：
-
-```ts
-import type {
-  DialogProps,
-  DialogTheme,
-  DialogMessage,
-  DialogOptions,
-  DialogMessageAlign,
-} from 'vant';
-```
-
-## 主题定制
-
-### 样式变量
-
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
-
-| 名称 | 默认值 | 描述 |
-| --- | --- | --- |
-| --van-dialog-width | _320px_ | - |
-| --van-dialog-small-screen-width | _90%_ | - |
-| --van-dialog-font-size | _var(--van-font-size-lg)_ | - |
-| --van-dialog-transition | _var(--van-animation-duration-base)_ | - |
-| --van-dialog-border-radius | _16px_ | - |
-| --van-dialog-background-color | _var(--van-background-color-light)_ | - |
-| --van-dialog-header-font-weight | _var(--van-font-weight-bold)_ | - |
-| --van-dialog-header-line-height | _24px_ | - |
-| --van-dialog-header-padding-top | _26px_ | - |
-| --van-dialog-header-isolated-padding | _var(--van-padding-lg) 0_ | - |
-| --van-dialog-message-padding | _var(--van-padding-lg)_ | - |
-| --van-dialog-message-font-size | _var(--van-font-size-md)_ | - |
-| --van-dialog-message-line-height | _var(--van-line-height-md)_ | - |
-| --van-dialog-message-max-height | _60vh_ | - |
-| --van-dialog-has-title-message-text-color | _var(--van-gray-7)_ | - |
-| --van-dialog-has-title-message-padding-top | _var(--van-padding-xs)_ | - |
-| --van-dialog-button-height | _48px_ | - |
-| --van-dialog-round-button-height | _36px_ | - |
-| --van-dialog-confirm-button-text-color | _var(--van-primary-color)_ | - |
-
-## 常见问题
-
-### 在 beforeRouteLeave 里调用 Dialog 无法展示？
-
-将 `closeOnPopstate` 属性设置为 false 即可。
-
-```js
-Dialog.alert({
-  title: '标题',
-  message: '弹窗内容',
-  closeOnPopstate: false,
-}).then(() => {
-  // on close
-});
-```
-
-### 在 JSX 中渲染 Dialog 组件无法展示？
-
-请注意 `Dialog` 是一个函数，`Dialog.Component` 才是 Dialog 对应的组件。JSX 调用弹窗的正确姿势如下：
-
-```jsx
-export default {
-  setup() {
-    const show = ref(false);
-    return () => <Dialog.Component v-model={[show, 'show']} />;
-  },
-};
-```

package/lib/dialog/function-call.tsx

@@ -1,97 +0,0 @@
-import { App } from 'vue';
-import { extend, inBrowser, withInstall, ComponentInstance } from '../utils';
-import { mountComponent, usePopupState } from '../utils/mount-component';
-import VanDialog 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 = {
-  title: '',
-  width: '',
-  theme: null,
-  message: '',
-  overlay: true,
-  callback: null,
-  teleport: 'body',
-  className: '',
-  allowHtml: false,
-  lockScroll: true,
-  transition: undefined,
-  beforeClose: null,
-  overlayClass: '',
-  overlayStyle: undefined,
-  messageAlign: '',
-  cancelButtonText: '',
-  cancelButtonColor: null,
-  cancelButtonDisabled: false,
-  confirmButtonText: '',
-  confirmButtonColor: null,
-  confirmButtonDisabled: false,
-  showConfirmButton: true,
-  showCancelButton: false,
-  closeOnPopstate: true,
-  closeOnClickOverlay: false,
-};
-
-Dialog.currentOptions = extend({}, Dialog.defaultOptions);
-
-Dialog.alert = Dialog;
-
-Dialog.confirm = (options: DialogOptions) =>
-  Dialog(extend({ showCancelButton: true }, options));
-
-Dialog.close = () => {
-  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 };

package/lib/dialog/index.ts

@@ -1,17 +0,0 @@
-import { Dialog } from './function-call';
-
-export default Dialog;
-export { Dialog };
-export type { DialogProps } from './Dialog';
-export type {
-  DialogTheme,
-  DialogMessage,
-  DialogOptions,
-  DialogMessageAlign,
-} from './types';
-
-declare module 'vue' {
-  export interface GlobalComponents {
-    VanDialog: typeof Dialog.Component;
-  }
-}

package/lib/dialog/types.ts

@@ -1,49 +0,0 @@
-import { Dialog } from './function-call';
-import type { CSSProperties, TeleportProps } from 'vue';
-import type { Interceptor, Numeric } from '../utils';
-
-export type DialogTheme = 'default' | 'round-button';
-export type DialogAction = 'confirm' | 'cancel' | 'third';
-export type DialogMessage = string | (() => JSX.Element);
-export type DialogMessageAlign = 'left' | 'center' | 'right' | 'justify';
-
-export type DialogOptions = {
-  title?: string;
-  width?: Numeric;
-  theme?: DialogTheme;
-  message?: DialogMessage;
-  overlay?: boolean;
-  teleport?: TeleportProps['to'];
-  className?: unknown;
-  allowHtml?: boolean;
-  lockScroll?: boolean;
-  transition?: string;
-  beforeClose?: Interceptor;
-  messageAlign?: DialogMessageAlign;
-  showInput?: boolean;
-  inputValue?: string;
-  inputPlaceholder?: string;
-  inputAutofocus?: boolean;
-  overlayClass?: string;
-  overlayStyle?: CSSProperties;
-  closeOnPopstate?: boolean;
-  showCancelButton?: boolean;
-  showThirdButton?: boolean;
-  showConfirmButton?: boolean;
-  cancelButtonText?: string;
-  cancelButtonColor?: string;
-  cancelButtonDisabled?: boolean;
-  thirdButtonText?: string;
-  thirdButtonColor?: string;
-  thirdButtonDisabled?: boolean;
-  confirmButtonText?: string;
-  confirmButtonColor?: string;
-  confirmButtonDisabled?: boolean;
-  closeOnClickOverlay?: boolean;
-};
-
-declare module '@vue/runtime-core' {
-  interface ComponentCustomProperties {
-    $dialog: typeof Dialog;
-  }
-}

package/lib/divider/Divider.tsx

@@ -1,35 +0,0 @@
-import { defineComponent, type ExtractPropTypes } from 'vue';
-import { truthProp, makeStringProp, createNamespace } from '../utils';
-
-const [name, bem] = createNamespace('divider');
-
-export type DividerContentPosition = 'left' | 'center' | 'right';
-
-const dividerProps = {
-  dashed: Boolean,
-  hairline: truthProp,
-  contentPosition: makeStringProp<DividerContentPosition>('center'),
-};
-
-export type DividerProps = ExtractPropTypes<typeof dividerProps>;
-
-export default defineComponent({
-  name,
-
-  props: dividerProps,
-
-  setup(props, { slots }) {
-    return () => (
-      <div
-        role="separator"
-        class={bem({
-          dashed: props.dashed,
-          hairline: props.hairline,
-          [`content-${props.contentPosition}`]: !!slots.default,
-        })}
-      >
-        {slots.default?.()}
-      </div>
-    );
-  },
-});

package/lib/divider/README.md

@@ -1,95 +0,0 @@
-# Divider
-
-### Intro
-
-Separate content into multiple areas.
-
-### Install
-
-Register component globally via `app.use`, refer to [Component Registration](#/en-US/advanced-usage#zu-jian-zhu-ce) for more registration ways.
-
-```js
-import { createApp } from 'vue';
-import { Divider } from 'vant';
-
-const app = createApp();
-app.use(Divider);
-```
-
-## Usage
-
-### Basic Usage
-
-```html
-<van-divider />
-```
-
-### With Text
-
-```html
-<van-divider>Text</van-divider>
-```
-
-### Content Position
-
-```html
-<van-divider content-position="left">Text</van-divider>
-<van-divider content-position="right">Text</van-divider>
-```
-
-### Dashed
-
-```html
-<van-divider dashed>Text</van-divider>
-```
-
-### Custom Style
-
-```html
-<van-divider
-  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
->
-  Text
-</van-divider>
-```
-
-## API
-
-### Props
-
-| Attribute | Description | Type | Default |
-| --- | --- | --- | --- |
-| dashed | Whether to use dashed border | _boolean_ | `false` |
-| hairline | Whether to use hairline | _boolean_ | `true` |
-| content-position | Content position, can be set to `left` `right` | _string_ | `center` |
-
-### Slots
-
-| Name    | Description |
-| ------- | ----------- |
-| default | content     |
-
-### Types
-
-The component exports the following type definitions:
-
-```ts
-import type { DividerProps, DividerContentPosition } from 'vant';
-```
-
-## Theming
-
-### CSS Variables
-
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
-
-| Name                              | Default Value             | Description |
-| --------------------------------- | ------------------------- | ----------- |
-| --van-divider-margin              | _var(--van-padding-md) 0_ | -           |
-| --van-divider-text-color          | _var(--van-text-color-2)_ | -           |
-| --van-divider-font-size           | _var(--van-font-size-md)_ | -           |
-| --van-divider-line-height         | _24px_                    | -           |
-| --van-divider-border-color        | _var(--van-border-color)_ | -           |
-| --van-divider-content-padding     | _var(--van-padding-md)_   | -           |
-| --van-divider-content-left-width  | _10%_                     | -           |
-| --van-divider-content-right-width | _10%_                     | -           |