vant 4.0.0-alpha.3 → 4.0.0-beta.1

package/lib/config-provider/ConfigProvider.d.ts

@@ -5,6 +5,7 @@ export declare type ConfigProviderProvide = {
     iconPrefix?: string;
 };
 export declare const CONFIG_PROVIDER_KEY: InjectionKey<ConfigProviderProvide>;
+export declare type ThemeVars = PropType<Record<string, Numeric>>;
 declare const configProviderProps: {
     tag: {
         type: PropType<keyof HTMLElementTagNameMap>;
@@ -14,7 +15,10 @@ declare const configProviderProps: {
         type: PropType<ConfigProviderTheme>;
         default: ConfigProviderTheme;
     };
-    themeVars: PropType<Record<string, Numeric>>;
+    zIndex: NumberConstructor;
+    themeVars: ThemeVars;
+    themeVarsDark: ThemeVars;
+    themeVarsLight: ThemeVars;
     iconPrefix: StringConstructor;
 };
 export declare type ConfigProviderProps = ExtractPropTypes<typeof configProviderProps>;
@@ -27,7 +31,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<ConfigProviderTheme>;
         default: ConfigProviderTheme;
     };
-    themeVars: PropType<Record<string, Numeric>>;
+    zIndex: NumberConstructor;
+    themeVars: ThemeVars;
+    themeVarsDark: ThemeVars;
+    themeVarsLight: ThemeVars;
     iconPrefix: StringConstructor;
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     tag: {
@@ -38,7 +45,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<ConfigProviderTheme>;
         default: ConfigProviderTheme;
     };
-    themeVars: PropType<Record<string, Numeric>>;
+    zIndex: NumberConstructor;
+    themeVars: ThemeVars;
+    themeVarsDark: ThemeVars;
+    themeVarsLight: ThemeVars;
     iconPrefix: StringConstructor;
 }>>, {
     tag: keyof HTMLElementTagNameMap;

package/lib/config-provider/ConfigProvider.js

@@ -24,12 +24,16 @@ module.exports = __toCommonJS(stdin_exports);
 var import_vue = require("vue");
 var import_vue2 = require("vue");
 var import_utils = require("../utils");
+var import_use_global_z_index = require("../composables/use-global-z-index");
 const [name, bem] = (0, import_utils.createNamespace)("config-provider");
 const CONFIG_PROVIDER_KEY = Symbol(name);
 const configProviderProps = {
   tag: (0, import_utils.makeStringProp)("div"),
   theme: (0, import_utils.makeStringProp)("light"),
+  zIndex: Number,
   themeVars: Object,
+  themeVarsDark: Object,
+  themeVarsLight: Object,
   iconPrefix: String
 };
 function mapThemeVarsToCSSVars(themeVars) {
@@ -45,20 +49,32 @@ var stdin_default = (0, import_vue2.defineComponent)({
   setup(props, {
     slots
   }) {
-    const style = (0, import_vue2.computed)(() => {
-      if (props.themeVars) {
-        return mapThemeVarsToCSSVars(props.themeVars);
-      }
-    });
+    const style = (0, import_vue2.computed)(() => mapThemeVarsToCSSVars((0, import_utils.extend)({}, props.themeVars, props.theme === "dark" ? props.themeVarsDark : props.themeVarsLight)));
     if (import_utils.inBrowser) {
+      const addTheme = () => {
+        document.body.classList.add(`van-theme-${props.theme}`);
+      };
+      const removeTheme = (theme = props.theme) => {
+        document.body.classList.remove(`van-theme-${theme}`);
+      };
       (0, import_vue2.watch)(() => props.theme, (newVal, oldVal) => {
-        document.body.classList.remove(`van-theme-${oldVal}`);
-        document.body.classList.add(`van-theme-${newVal}`);
+        if (oldVal) {
+          removeTheme(oldVal);
+        }
+        addTheme();
       }, {
         immediate: true
       });
+      (0, import_vue2.onActivated)(addTheme);
+      (0, import_vue2.onDeactivated)(removeTheme);
+      (0, import_vue2.onBeforeUnmount)(removeTheme);
     }
     (0, import_vue2.provide)(CONFIG_PROVIDER_KEY, props);
+    (0, import_vue2.watchEffect)(() => {
+      if (props.zIndex !== void 0) {
+        (0, import_use_global_z_index.setGlobalZIndex)(props.zIndex);
+      }
+    });
     return () => (0, import_vue.createVNode)(props.tag, {
       "class": bem(),
       "style": style.value

package/lib/config-provider/index.d.ts

@@ -7,7 +7,10 @@ export declare const ConfigProvider: import("../utils").WithInstall<import("vue"
         type: import("vue").PropType<import("./ConfigProvider").ConfigProviderTheme>;
         default: import("./ConfigProvider").ConfigProviderTheme;
     };
-    themeVars: import("vue").PropType<Record<string, import("../utils").Numeric>>;
+    zIndex: NumberConstructor;
+    themeVars: import("./ConfigProvider").ThemeVars;
+    themeVarsDark: import("./ConfigProvider").ThemeVars;
+    themeVarsLight: import("./ConfigProvider").ThemeVars;
     iconPrefix: StringConstructor;
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     tag: {
@@ -18,7 +21,10 @@ export declare const ConfigProvider: import("../utils").WithInstall<import("vue"
         type: import("vue").PropType<import("./ConfigProvider").ConfigProviderTheme>;
         default: import("./ConfigProvider").ConfigProviderTheme;
     };
-    themeVars: import("vue").PropType<Record<string, import("../utils").Numeric>>;
+    zIndex: NumberConstructor;
+    themeVars: import("./ConfigProvider").ThemeVars;
+    themeVarsDark: import("./ConfigProvider").ThemeVars;
+    themeVarsLight: import("./ConfigProvider").ThemeVars;
     iconPrefix: StringConstructor;
 }>>, {
     tag: keyof HTMLElementTagNameMap;

package/lib/date-picker/utils.d.ts

@@ -39,5 +39,5 @@ export declare const sharedProps: {
 export declare const pickerInheritKeys: ("title" | "readonly" | "loading" | "allowHtml" | "optionHeight" | "showToolbar" | "swipeDuration" | "visibleOptionNum" | "cancelButtonText" | "confirmButtonText")[];
 export declare function times<T>(n: number, iteratee: (index: number) => T): T[];
 export declare const getMonthEndDay: (year: number, month: number) => number;
-export declare const genOptions: <T extends string>(min: number, max: number, type: T, formatter: Formatter, filter?: Filter | undefined) => PickerOption[];
+export declare const genOptions: <T extends string>(min: number, max: number, type: T, formatter: Formatter, filter?: Filter) => PickerOption[];
 export {};

package/lib/dialog/Dialog.d.ts

@@ -30,7 +30,7 @@ declare const dialogProps: {
     theme: PropType<DialogTheme>;
     width: (NumberConstructor | StringConstructor)[];
     message: PropType<DialogMessage>;
-    callback: PropType<(action?: DialogAction | undefined) => void>;
+    callback: PropType<(action?: DialogAction) => void>;
     allowHtml: BooleanConstructor;
     className: PropType<unknown>;
     transition: {
@@ -45,8 +45,10 @@ declare const dialogProps: {
     showCancelButton: BooleanConstructor;
     cancelButtonText: StringConstructor;
     cancelButtonColor: StringConstructor;
+    cancelButtonDisabled: BooleanConstructor;
     confirmButtonText: StringConstructor;
     confirmButtonColor: StringConstructor;
+    confirmButtonDisabled: BooleanConstructor;
     showConfirmButton: {
         type: BooleanConstructor;
         default: true;
@@ -99,8 +101,10 @@ declare const _default: import("vue").DefineComponent<{
     showCancelButton: BooleanConstructor;
     cancelButtonText: StringConstructor;
     cancelButtonColor: StringConstructor;
+    cancelButtonDisabled: BooleanConstructor;
     confirmButtonText: StringConstructor;
     confirmButtonColor: StringConstructor;
+    confirmButtonDisabled: BooleanConstructor;
     showConfirmButton: {
         type: BooleanConstructor;
         default: true;
@@ -151,8 +155,10 @@ declare const _default: import("vue").DefineComponent<{
     showCancelButton: BooleanConstructor;
     cancelButtonText: StringConstructor;
     cancelButtonColor: StringConstructor;
+    cancelButtonDisabled: BooleanConstructor;
     confirmButtonText: StringConstructor;
     confirmButtonColor: StringConstructor;
+    confirmButtonDisabled: BooleanConstructor;
     showConfirmButton: {
         type: BooleanConstructor;
         default: true;
@@ -174,6 +180,8 @@ declare const _default: import("vue").DefineComponent<{
     closeOnPopstate: boolean;
     allowHtml: boolean;
     showCancelButton: boolean;
+    cancelButtonDisabled: boolean;
+    confirmButtonDisabled: boolean;
     showConfirmButton: boolean;
 }>;
 export default _default;

package/lib/dialog/Dialog.js

@@ -43,8 +43,10 @@ const dialogProps = (0, import_utils.extend)({}, import_shared.popupSharedProps,
   showCancelButton: Boolean,
   cancelButtonText: String,
   cancelButtonColor: String,
+  cancelButtonDisabled: Boolean,
   confirmButtonText: String,
   confirmButtonColor: String,
+  confirmButtonDisabled: Boolean,
   showConfirmButton: import_utils.truthProp,
   closeOnClickOverlay: Boolean
 });
@@ -165,6 +167,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         color: props.cancelButtonColor
       },
       "loading": loading.cancel,
+      "disabled": props.cancelButtonDisabled,
       "onClick": onCancel
     }, null), props.showConfirmButton && (0, import_vue.createVNode)(import_button.Button, {
       "size": "large",
@@ -176,6 +179,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         color: props.confirmButtonColor
       },
       "loading": loading.confirm,
+      "disabled": props.confirmButtonDisabled,
       "onClick": onConfirm
     }, null)]);
     const renderRoundButtons = () => (0, import_vue.createVNode)(import_action_bar.ActionBar, {
@@ -187,6 +191,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "class": bem("cancel"),
         "color": props.cancelButtonColor,
         "loading": loading.cancel,
+        "disabled": props.cancelButtonDisabled,
         "onClick": onCancel
       }, null), props.showConfirmButton && (0, import_vue.createVNode)(import_action_bar_button.ActionBarButton, {
         "type": "danger",
@@ -194,6 +199,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "class": bem("confirm"),
         "color": props.confirmButtonColor,
         "loading": loading.confirm,
+        "disabled": props.confirmButtonDisabled,
         "onClick": onConfirm
       }, null)]
     });

package/lib/dialog/function-call.d.ts

@@ -1,184 +1,6 @@
-import { App } from 'vue';
-import type { DialogAction, DialogOptions } from './types';
-declare function Dialog(options: DialogOptions): Promise<unknown>;
-declare namespace Dialog {
-    var defaultOptions: {
-        title: string;
-        width: string;
-        theme: null;
-        message: string;
-        overlay: boolean;
-        callback: null;
-        teleport: string;
-        className: string;
-        allowHtml: boolean;
-        lockScroll: boolean;
-        transition: undefined;
-        beforeClose: null;
-        overlayClass: string;
-        overlayStyle: undefined;
-        messageAlign: string;
-        cancelButtonText: string;
-        cancelButtonColor: null;
-        confirmButtonText: string;
-        confirmButtonColor: null;
-        showConfirmButton: boolean;
-        showCancelButton: boolean;
-        closeOnPopstate: boolean;
-        closeOnClickOverlay: boolean;
-    };
-    var currentOptions: {
-        title: string;
-        width: string;
-        theme: null;
-        message: string;
-        overlay: boolean;
-        callback: null;
-        teleport: string;
-        className: string;
-        allowHtml: boolean;
-        lockScroll: boolean;
-        transition: undefined;
-        beforeClose: null;
-        overlayClass: string;
-        overlayStyle: undefined;
-        messageAlign: string;
-        cancelButtonText: string;
-        cancelButtonColor: null;
-        confirmButtonText: string;
-        confirmButtonColor: null;
-        showConfirmButton: boolean;
-        showCancelButton: boolean;
-        closeOnPopstate: boolean;
-        closeOnClickOverlay: boolean;
-    };
-    var alert: typeof Dialog;
-    var confirm: (options: DialogOptions) => Promise<unknown>;
-    var close: () => void;
-    var setDefaultOptions: (options: DialogOptions) => void;
-    var resetDefaultOptions: () => void;
-    var Component: import("../utils").WithInstall<import("vue").DefineComponent<{
-        show: BooleanConstructor;
-        zIndex: (NumberConstructor | StringConstructor)[];
-        overlay: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        duration: (NumberConstructor | StringConstructor)[];
-        teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
-        lockScroll: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        lazyRender: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        beforeClose: import("vue").PropType<import("../utils").Interceptor>;
-        overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
-        overlayClass: import("vue").PropType<unknown>;
-        transitionAppear: BooleanConstructor;
-        closeOnClickOverlay: {
-            type: BooleanConstructor;
-            default: true;
-        };
-    } & {
-        title: StringConstructor;
-        theme: import("vue").PropType<import("./types").DialogTheme>;
-        width: (NumberConstructor | StringConstructor)[];
-        message: import("vue").PropType<import("./types").DialogMessage>;
-        callback: import("vue").PropType<(action?: DialogAction | undefined) => void>;
-        allowHtml: BooleanConstructor;
-        className: import("vue").PropType<unknown>;
-        transition: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-        messageAlign: import("vue").PropType<import("./types").DialogMessageAlign>;
-        closeOnPopstate: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        showCancelButton: BooleanConstructor;
-        cancelButtonText: StringConstructor;
-        cancelButtonColor: StringConstructor;
-        confirmButtonText: StringConstructor;
-        confirmButtonColor: StringConstructor;
-        showConfirmButton: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        closeOnClickOverlay: BooleanConstructor;
-    }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("keydown" | "update:show" | "cancel" | "confirm")[], "keydown" | "update:show" | "cancel" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-        show: BooleanConstructor;
-        zIndex: (NumberConstructor | StringConstructor)[];
-        overlay: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        duration: (NumberConstructor | StringConstructor)[];
-        teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
-        lockScroll: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        lazyRender: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        beforeClose: import("vue").PropType<import("../utils").Interceptor>;
-        overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
-        overlayClass: import("vue").PropType<unknown>;
-        transitionAppear: BooleanConstructor;
-        closeOnClickOverlay: {
-            type: BooleanConstructor;
-            default: true;
-        };
-    } & {
-        title: StringConstructor;
-        theme: import("vue").PropType<import("./types").DialogTheme>;
-        width: (NumberConstructor | StringConstructor)[];
-        message: import("vue").PropType<import("./types").DialogMessage>;
-        callback: import("vue").PropType<(action?: DialogAction | undefined) => void>;
-        allowHtml: BooleanConstructor;
-        className: import("vue").PropType<unknown>;
-        transition: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-        messageAlign: import("vue").PropType<import("./types").DialogMessageAlign>;
-        closeOnPopstate: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        showCancelButton: BooleanConstructor;
-        cancelButtonText: StringConstructor;
-        cancelButtonColor: StringConstructor;
-        confirmButtonText: StringConstructor;
-        confirmButtonColor: StringConstructor;
-        showConfirmButton: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        closeOnClickOverlay: BooleanConstructor;
-    }>> & {
-        onKeydown?: ((...args: any[]) => any) | undefined;
-        "onUpdate:show"?: ((...args: any[]) => any) | undefined;
-        onCancel?: ((...args: any[]) => any) | undefined;
-        onConfirm?: ((...args: any[]) => any) | undefined;
-    }, {
-        overlay: boolean;
-        show: boolean;
-        lockScroll: boolean;
-        lazyRender: boolean;
-        transitionAppear: boolean;
-        closeOnClickOverlay: boolean;
-        transition: string;
-        closeOnPopstate: boolean;
-        allowHtml: boolean;
-        showCancelButton: boolean;
-        showConfirmButton: boolean;
-    }>>;
-    var install: (app: App<any>) => void;
-}
-export { Dialog };
+import type { DialogOptions } from './types';
+export declare function showDialog(options: DialogOptions): Promise<unknown>;
+export declare const setDialogDefaultOptions: (options: DialogOptions) => void;
+export declare const resetDialogDefaultOptions: () => void;
+export declare const showConfirmDialog: (options: DialogOptions) => Promise<unknown>;
+export declare const closeDialog: () => void;

package/lib/dialog/function-call.js

@@ -20,7 +20,11 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var stdin_exports = {};
 __export(stdin_exports, {
-  Dialog: () => Dialog
+  closeDialog: () => closeDialog,
+  resetDialogDefaultOptions: () => resetDialogDefaultOptions,
+  setDialogDefaultOptions: () => setDialogDefaultOptions,
+  showConfirmDialog: () => showConfirmDialog,
+  showDialog: () => showDialog
 });
 module.exports = __toCommonJS(stdin_exports);
 var import_vue = require("vue");
@@ -28,6 +32,34 @@ var import_utils = require("../utils");
 var import_mount_component = require("../utils/mount-component");
 var import_Dialog = __toESM(require("./Dialog"));
 let instance;
+const DEFAULT_OPTIONS = {
+  title: "",
+  width: "",
+  theme: null,
+  message: "",
+  overlay: true,
+  callback: null,
+  teleport: "body",
+  className: "",
+  allowHtml: false,
+  lockScroll: true,
+  transition: void 0,
+  beforeClose: null,
+  overlayClass: "",
+  overlayStyle: void 0,
+  messageAlign: "",
+  cancelButtonText: "",
+  cancelButtonColor: null,
+  cancelButtonDisabled: false,
+  confirmButtonText: "",
+  confirmButtonColor: null,
+  confirmButtonDisabled: false,
+  showConfirmButton: true,
+  showCancelButton: false,
+  closeOnPopstate: true,
+  closeOnClickOverlay: false
+};
+let currentOptions = (0, import_utils.extend)({}, DEFAULT_OPTIONS);
 function initInstance() {
   const Wrapper = {
     setup() {
@@ -44,7 +76,7 @@ function initInstance() {
     instance
   } = (0, import_mount_component.mountComponent)(Wrapper));
 }
-function Dialog(options) {
+function showDialog(options) {
   if (!import_utils.inBrowser) {
     return Promise.resolve();
   }
@@ -52,56 +84,24 @@ function Dialog(options) {
     if (!instance) {
       initInstance();
     }
-    instance.open((0, import_utils.extend)({}, Dialog.currentOptions, options, {
+    instance.open((0, import_utils.extend)({}, currentOptions, options, {
       callback: (action) => {
         (action === "confirm" ? resolve : reject)(action);
       }
     }));
   });
 }
-Dialog.defaultOptions = {
-  title: "",
-  width: "",
-  theme: null,
-  message: "",
-  overlay: true,
-  callback: null,
-  teleport: "body",
-  className: "",
-  allowHtml: false,
-  lockScroll: true,
-  transition: void 0,
-  beforeClose: null,
-  overlayClass: "",
-  overlayStyle: void 0,
-  messageAlign: "",
-  cancelButtonText: "",
-  cancelButtonColor: null,
-  confirmButtonText: "",
-  confirmButtonColor: null,
-  showConfirmButton: true,
-  showCancelButton: false,
-  closeOnPopstate: true,
-  closeOnClickOverlay: false
+const setDialogDefaultOptions = (options) => {
+  (0, import_utils.extend)(currentOptions, options);
+};
+const resetDialogDefaultOptions = () => {
+  currentOptions = (0, import_utils.extend)({}, DEFAULT_OPTIONS);
 };
-Dialog.currentOptions = (0, import_utils.extend)({}, Dialog.defaultOptions);
-Dialog.alert = Dialog;
-Dialog.confirm = (options) => Dialog((0, import_utils.extend)({
+const showConfirmDialog = (options) => showDialog((0, import_utils.extend)({
   showCancelButton: true
 }, options));
-Dialog.close = () => {
+const closeDialog = () => {
   if (instance) {
     instance.toggle(false);
   }
 };
-Dialog.setDefaultOptions = (options) => {
-  (0, import_utils.extend)(Dialog.currentOptions, options);
-};
-Dialog.resetDefaultOptions = () => {
-  Dialog.currentOptions = (0, import_utils.extend)({}, Dialog.defaultOptions);
-};
-Dialog.Component = (0, import_utils.withInstall)(import_Dialog.default);
-Dialog.install = (app) => {
-  app.use(Dialog.Component);
-  app.config.globalProperties.$dialog = Dialog;
-};

package/lib/dialog/index.css

@@ -1 +1 @@
-body{--van-dialog-width: 320px;--van-dialog-small-screen-width: 90%;--van-dialog-font-size: var(--van-font-size-lg);--van-dialog-transition: var(--van-duration-base);--van-dialog-radius: 16px;--van-dialog-background: var(--van-background-2);--van-dialog-header-font-weight: var(--van-font-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)}.van-dialog{top:45%;left:50%;width:var(--van-dialog-width);overflow:hidden;font-size:var(--van-dialog-font-size);background:var(--van-dialog-background);border-radius:var(--van-dialog-radius);-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:var(--van-dialog-transition);transition-property:transform,opacity}@media (max-width: 321px){.van-dialog{width:var(--van-dialog-small-screen-width)}}.van-dialog__header{color:var(--van-text-color);padding-top:var(--van-dialog-header-padding-top);font-weight:var(--van-dialog-header-font-weight);line-height:var(--van-dialog-header-line-height);text-align:center}.van-dialog__header--isolated{padding:var(--van-dialog-header-isolated-padding)}.van-dialog__content--isolated{display:flex;align-items:center;min-height:104px}.van-dialog__message{color:var(--van-text-color);flex:1;max-height:var(--van-dialog-message-max-height);padding:26px var(--van-dialog-message-padding);overflow-y:auto;font-size:var(--van-dialog-message-font-size);line-height:var(--van-dialog-message-line-height);white-space:pre-wrap;text-align:center;word-wrap:break-word;-webkit-overflow-scrolling:touch}.van-dialog__message--has-title{padding-top:var(--van-dialog-has-title-message-padding-top);color:var(--van-dialog-has-title-message-text-color)}.van-dialog__message--left{text-align:left}.van-dialog__message--right{text-align:right}.van-dialog__footer{display:flex;overflow:hidden;-webkit-user-select:none;user-select:none}.van-dialog__confirm,.van-dialog__cancel{flex:1;height:var(--van-dialog-button-height);margin:0;border:0}.van-dialog__confirm,.van-dialog__confirm:active{color:var(--van-dialog-confirm-button-text-color)}.van-dialog--round-button .van-dialog__footer{position:relative;height:auto;padding:var(--van-padding-xs) var(--van-padding-lg) var(--van-padding-md)}.van-dialog--round-button .van-dialog__message{padding-bottom:var(--van-padding-md);color:var(--van-text-color)}.van-dialog--round-button .van-dialog__confirm,.van-dialog--round-button .van-dialog__cancel{height:var(--van-dialog-round-button-height)}.van-dialog--round-button .van-dialog__confirm{color:var(--van-white)}.van-dialog-bounce-enter-from{transform:translate3d(-50%,-50%,0) scale(.7);opacity:0}.van-dialog-bounce-leave-active{transform:translate3d(-50%,-50%,0) scale(.9);opacity:0}
+body{--van-dialog-width: 320px;--van-dialog-small-screen-width: 90%;--van-dialog-font-size: var(--van-font-size-lg);--van-dialog-transition: var(--van-duration-base);--van-dialog-radius: 16px;--van-dialog-background: var(--van-background-2);--van-dialog-header-font-weight: var(--van-font-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)}.van-dialog{top:45%;width:var(--van-dialog-width);overflow:hidden;font-size:var(--van-dialog-font-size);background:var(--van-dialog-background);border-radius:var(--van-dialog-radius);-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:var(--van-dialog-transition);transition-property:transform,opacity}@media (max-width: 321px){.van-dialog{width:var(--van-dialog-small-screen-width)}}.van-dialog__header{color:var(--van-text-color);padding-top:var(--van-dialog-header-padding-top);font-weight:var(--van-dialog-header-font-weight);line-height:var(--van-dialog-header-line-height);text-align:center}.van-dialog__header--isolated{padding:var(--van-dialog-header-isolated-padding)}.van-dialog__content--isolated{display:flex;align-items:center;min-height:104px}.van-dialog__message{color:var(--van-text-color);flex:1;max-height:var(--van-dialog-message-max-height);padding:26px var(--van-dialog-message-padding);overflow-y:auto;font-size:var(--van-dialog-message-font-size);line-height:var(--van-dialog-message-line-height);white-space:pre-wrap;text-align:center;word-wrap:break-word;-webkit-overflow-scrolling:touch}.van-dialog__message--has-title{padding-top:var(--van-dialog-has-title-message-padding-top);color:var(--van-dialog-has-title-message-text-color)}.van-dialog__message--left{text-align:left}.van-dialog__message--right{text-align:right}.van-dialog__footer{display:flex;overflow:hidden;-webkit-user-select:none;user-select:none}.van-dialog__confirm,.van-dialog__cancel{flex:1;height:var(--van-dialog-button-height);margin:0;border:0}.van-dialog__confirm,.van-dialog__confirm:active{color:var(--van-dialog-confirm-button-text-color)}.van-dialog--round-button .van-dialog__footer{position:relative;height:auto;padding:var(--van-padding-xs) var(--van-padding-lg) var(--van-padding-md)}.van-dialog--round-button .van-dialog__message{padding-bottom:var(--van-padding-md);color:var(--van-text-color)}.van-dialog--round-button .van-dialog__confirm,.van-dialog--round-button .van-dialog__cancel{height:var(--van-dialog-round-button-height)}.van-dialog--round-button .van-dialog__confirm{color:var(--van-white)}.van-dialog-bounce-enter-from{transform:translate3d(-50%,-50%,0) scale(.7);opacity:0}.van-dialog-bounce-leave-active{transform:translate3d(-50%,-50%,0) scale(.9);opacity:0}