vant 3.2.0 → 3.2.4

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

@@ -1,30 +1,5 @@
-import { App, CSSProperties, TeleportProps } from 'vue';
-import { Interceptor } from '../utils';
-import { DialogTheme, DialogAction, DialogMessage, DialogMessageAlign } from './Dialog';
-export declare type DialogOptions = {
-    title?: string;
-    width?: string | number;
-    theme?: DialogTheme;
-    message?: DialogMessage;
-    overlay?: boolean;
-    teleport?: TeleportProps['to'];
-    className?: unknown;
-    allowHtml?: boolean;
-    lockScroll?: boolean;
-    transition?: string;
-    beforeClose?: Interceptor;
-    messageAlign?: DialogMessageAlign;
-    overlayClass?: string;
-    overlayStyle?: CSSProperties;
-    closeOnPopstate?: boolean;
-    cancelButtonText?: string;
-    showCancelButton?: boolean;
-    showConfirmButton?: boolean;
-    cancelButtonColor?: string;
-    confirmButtonText?: string;
-    confirmButtonColor?: string;
-    closeOnClickOverlay?: boolean;
-};
+import { App } from 'vue';
+import type { DialogAction, DialogOptions } from './types';
 declare function Dialog(options: DialogOptions): Promise<unknown>;
 declare namespace Dialog {
     var defaultOptions: {
@@ -82,7 +57,6 @@ declare namespace Dialog {
     var close: () => void;
     var setDefaultOptions: (options: DialogOptions) => void;
     var resetDefaultOptions: () => void;
-    var install: (app: App<any>) => void;
     var Component: import("../utils").WithInstall<import("vue").DefineComponent<{
         show: BooleanConstructor;
         zIndex: (NumberConstructor | StringConstructor)[];
@@ -100,8 +74,8 @@ declare namespace Dialog {
             type: BooleanConstructor;
             default: true;
         };
-        beforeClose: import("vue").PropType<Interceptor>;
-        overlayStyle: import("vue").PropType<CSSProperties>;
+        beforeClose: import("vue").PropType<import("../utils").Interceptor>;
+        overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
         overlayClass: import("vue").PropType<unknown>;
         transitionAppear: BooleanConstructor;
         closeOnClickOverlay: {
@@ -110,13 +84,13 @@ declare namespace Dialog {
         };
     } & {
         title: StringConstructor;
-        theme: import("vue").PropType<DialogTheme>;
+        theme: import("vue").PropType<import("./types").DialogTheme>;
         width: (NumberConstructor | StringConstructor)[];
-        message: import("vue").PropType<DialogMessage>;
+        message: import("vue").PropType<import("./types").DialogMessage>;
         callback: import("vue").PropType<(action?: DialogAction | undefined) => void>;
         allowHtml: BooleanConstructor;
         className: import("vue").PropType<unknown>;
-        messageAlign: import("vue").PropType<DialogMessageAlign>;
+        messageAlign: import("vue").PropType<import("./types").DialogMessageAlign>;
         closeOnPopstate: {
             type: BooleanConstructor;
             default: true;
@@ -135,7 +109,7 @@ declare namespace Dialog {
             type: StringConstructor;
             default: string;
         };
-    }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("cancel" | "update:show" | "confirm")[], "cancel" | "update:show" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
+    }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:show" | "cancel" | "confirm")[], "update:show" | "cancel" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
         show?: unknown;
         zIndex?: unknown;
         overlay?: unknown;
@@ -177,21 +151,21 @@ declare namespace Dialog {
         showCancelButton: boolean;
         showConfirmButton: boolean;
     } & {
-        message?: DialogMessage | undefined;
+        message?: import("./types").DialogMessage | undefined;
         title?: string | undefined;
+        width?: string | number | undefined;
         zIndex?: string | number | undefined;
         duration?: string | number | undefined;
         teleport?: string | import("vue").RendererElement | null | undefined;
-        beforeClose?: Interceptor | undefined;
-        overlayStyle?: CSSProperties | undefined;
+        beforeClose?: import("../utils").Interceptor | undefined;
+        overlayStyle?: import("vue").CSSProperties | undefined;
         overlayClass?: unknown;
         className?: unknown;
         callback?: ((action?: DialogAction | undefined) => void) | undefined;
         cancelButtonText?: string | undefined;
         confirmButtonText?: string | undefined;
-        theme?: DialogTheme | undefined;
-        width?: string | number | undefined;
-        messageAlign?: DialogMessageAlign | undefined;
+        theme?: import("./types").DialogTheme | undefined;
+        messageAlign?: import("./types").DialogMessageAlign | undefined;
         cancelButtonColor?: string | undefined;
         confirmButtonColor?: string | undefined;
     }> & {
@@ -211,5 +185,6 @@ declare namespace Dialog {
         showCancelButton: boolean;
         showConfirmButton: boolean;
     }>>;
+    var install: (app: App<any>) => void;
 }
 export { Dialog };

package/es/dialog/function-call.js

@@ -87,10 +87,11 @@ Dialog.resetDefaultOptions = () => {
   Dialog.currentOptions = extend({}, Dialog.defaultOptions);
 };
 
+Dialog.Component = withInstall(VanDialog);
+
 Dialog.install = app => {
-  app.use(withInstall(VanDialog));
+  app.use(Dialog.Component);
   app.config.globalProperties.$dialog = Dialog;
 };
 
-Dialog.Component = withInstall(VanDialog);
 export { Dialog };

package/es/dialog/index.d.ts

@@ -1,5 +1,4 @@
-import { Dialog, DialogOptions } from './function-call';
-import type { DialogTheme, DialogMessage, DialogMessageAlign } from './Dialog';
+import { Dialog } from './function-call';
 export default Dialog;
 export { Dialog };
-export type { DialogTheme, DialogMessage, DialogOptions, DialogMessageAlign };
+export type { DialogTheme, DialogMessage, DialogOptions, DialogMessageAlign, } from './types';

package/es/dialog/types.d.ts

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

package/es/dialog/types.js

@@ -0,0 +1 @@
+export {};

package/es/divider/Divider.d.ts

@@ -18,7 +18,7 @@ declare const _default: import("vue").DefineComponent<{
     dashed: boolean;
     hairline: boolean;
     contentPosition: DividerContentPosition;
-} & {}> & {}, {
+} & {}>, {
     dashed: boolean;
     hairline: boolean;
     contentPosition: DividerContentPosition;

package/es/divider/index.d.ts

@@ -1,4 +1,4 @@
-declare const Divider: import("../utils").WithInstall<import("vue").DefineComponent<{
+export declare const Divider: import("../utils").WithInstall<import("vue").DefineComponent<{
     dashed: BooleanConstructor;
     hairline: {
         type: BooleanConstructor;
@@ -16,11 +16,10 @@ declare const Divider: import("../utils").WithInstall<import("vue").DefineCompon
     dashed: boolean;
     hairline: boolean;
     contentPosition: import("./Divider").DividerContentPosition;
-} & {}> & {}, {
+} & {}>, {
     dashed: boolean;
     hairline: boolean;
     contentPosition: import("./Divider").DividerContentPosition;
 }>>;
 export default Divider;
-export { Divider };
 export type { DividerContentPosition } from './Divider';

package/es/divider/index.js

@@ -1,5 +1,4 @@
 import { withInstall } from '../utils';
 import _Divider from './Divider';
-var Divider = withInstall(_Divider);
-export default Divider;
-export { Divider };
+export var Divider = withInstall(_Divider);
+export default Divider;

package/es/dropdown-item/DropdownItem.d.ts

@@ -30,7 +30,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<DropdownItemOption[]>;
         default: () => never[];
     };
-}, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "open" | "change" | "close" | "opened" | "closed")[], "update:modelValue" | "open" | "change" | "close" | "opened" | "closed", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
+}, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "open" | "change" | "close" | "opened" | "closed")[], "open" | "update:modelValue" | "change" | "close" | "opened" | "closed", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
     title?: unknown;
     disabled?: unknown;
     teleport?: unknown;

package/es/dropdown-item/index.d.ts

@@ -1,4 +1,5 @@
-declare const DropdownItem: import("../utils").WithInstall<import("vue").DefineComponent<{
+import { DropdownItemProps } from './DropdownItem';
+export declare const DropdownItem: import("../utils").WithInstall<import("vue").DefineComponent<{
     title: StringConstructor;
     disabled: BooleanConstructor;
     teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
@@ -12,7 +13,7 @@ declare const DropdownItem: import("../utils").WithInstall<import("vue").DefineC
         type: import("vue").PropType<import("./types").DropdownItemOption[]>;
         default: () => never[];
     };
-}, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "open" | "change" | "close" | "opened" | "closed")[], "update:modelValue" | "open" | "change" | "close" | "opened" | "closed", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
+}, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "open" | "change" | "close" | "opened" | "closed")[], "open" | "update:modelValue" | "change" | "close" | "opened" | "closed", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
     title?: unknown;
     disabled?: unknown;
     teleport?: unknown;
@@ -42,5 +43,5 @@ declare const DropdownItem: import("../utils").WithInstall<import("vue").DefineC
     options: import("./types").DropdownItemOption[];
 }>>;
 export default DropdownItem;
-export { DropdownItem };
+export type { DropdownItemProps };
 export type { DropdownItemInstance, DropdownItemOption } from './types';

package/es/dropdown-item/index.js

@@ -1,5 +1,4 @@
 import { withInstall } from '../utils';
 import _DropdownItem from './DropdownItem';
-var DropdownItem = withInstall(_DropdownItem);
-export default DropdownItem;
-export { DropdownItem };
+export var DropdownItem = withInstall(_DropdownItem);
+export default DropdownItem;

package/es/dropdown-menu/DropdownMenu.d.ts

@@ -66,7 +66,7 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     zIndex?: string | number | undefined;
     activeColor?: string | undefined;
-}> & {}, {
+}>, {
     overlay: boolean;
     duration: string | number;
     closeOnClickOverlay: boolean;

package/es/dropdown-menu/index.d.ts

@@ -1,4 +1,5 @@
-declare const DropdownMenu: import("../utils").WithInstall<import("vue").DefineComponent<{
+import { DropdownMenuProps } from './DropdownMenu';
+export declare const DropdownMenu: import("../utils").WithInstall<import("vue").DefineComponent<{
     overlay: {
         type: BooleanConstructor;
         default: true;
@@ -38,7 +39,7 @@ declare const DropdownMenu: import("../utils").WithInstall<import("vue").DefineC
 } & {
     zIndex?: string | number | undefined;
     activeColor?: string | undefined;
-}> & {}, {
+}>, {
     overlay: boolean;
     duration: string | number;
     closeOnClickOverlay: boolean;
@@ -46,5 +47,5 @@ declare const DropdownMenu: import("../utils").WithInstall<import("vue").DefineC
     closeOnClickOutside: boolean;
 }>>;
 export default DropdownMenu;
-export { DropdownMenu };
+export type { DropdownMenuProps };
 export type { DropdownMenuDirection } from './types';

package/es/dropdown-menu/index.js

@@ -1,5 +1,4 @@
 import { withInstall } from '../utils';
 import _DropdownMenu from './DropdownMenu';
-var DropdownMenu = withInstall(_DropdownMenu);
-export default DropdownMenu;
-export { DropdownMenu };
+export var DropdownMenu = withInstall(_DropdownMenu);
+export default DropdownMenu;

package/es/empty/Empty.d.ts

@@ -14,7 +14,7 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     description?: string | undefined;
     imageSize?: string | number | undefined;
-}> & {}, {
+}>, {
     image: string;
 }>;
 export default _default;

package/es/empty/index.d.ts

@@ -1,4 +1,4 @@
-declare const Empty: import("../utils").WithInstall<import("vue").DefineComponent<{
+export declare const Empty: import("../utils").WithInstall<import("vue").DefineComponent<{
     imageSize: (NumberConstructor | StringConstructor)[];
     description: StringConstructor;
     image: {
@@ -14,8 +14,7 @@ declare const Empty: import("../utils").WithInstall<import("vue").DefineComponen
 } & {
     description?: string | undefined;
     imageSize?: string | number | undefined;
-}> & {}, {
+}>, {
     image: string;
 }>>;
 export default Empty;
-export { Empty };

package/es/empty/index.js

@@ -1,5 +1,4 @@
 import { withInstall } from '../utils';
 import _Empty from './Empty';
-var Empty = withInstall(_Empty);
-export default Empty;
-export { Empty };
+export var Empty = withInstall(_Empty);
+export default Empty;

package/es/field/Field.d.ts

@@ -1,6 +1,8 @@
 import { PropType, ExtractPropTypes } from 'vue';
 import type { FieldRule, FieldType, FieldTextAlign, FieldClearTrigger, FieldFormatTrigger, FieldAutosizeConfig } from './types';
 export declare const fieldSharedProps: {
+    id: StringConstructor;
+    name: StringConstructor;
     formatter: PropType<(value: string) => string>;
     leftIcon: StringConstructor;
     rightIcon: StringConstructor;
@@ -9,6 +11,7 @@ export declare const fieldSharedProps: {
     maxlength: (NumberConstructor | StringConstructor)[];
     inputAlign: PropType<FieldTextAlign>;
     placeholder: StringConstructor;
+    autocomplete: StringConstructor;
     errorMessage: StringConstructor;
     error: {
         type: BooleanConstructor;
@@ -63,6 +66,8 @@ declare const props: {
         default: null;
     };
 } & {
+    id: StringConstructor;
+    name: StringConstructor;
     formatter: PropType<(value: string) => string>;
     leftIcon: StringConstructor;
     rightIcon: StringConstructor;
@@ -71,6 +76,7 @@ declare const props: {
     maxlength: (NumberConstructor | StringConstructor)[];
     inputAlign: PropType<FieldTextAlign>;
     placeholder: StringConstructor;
+    autocomplete: StringConstructor;
     errorMessage: StringConstructor;
     error: {
         type: BooleanConstructor;
@@ -102,13 +108,11 @@ declare const props: {
     };
 } & {
     rows: (NumberConstructor | StringConstructor)[];
-    name: StringConstructor;
     rules: PropType<FieldRule[]>;
     autosize: PropType<boolean | FieldAutosizeConfig>;
     labelWidth: (NumberConstructor | StringConstructor)[];
     labelClass: PropType<unknown>;
     labelAlign: PropType<FieldTextAlign>;
-    autocomplete: StringConstructor;
     showWordLimit: BooleanConstructor;
     errorMessageAlign: PropType<FieldTextAlign>;
     type: {
@@ -145,6 +149,8 @@ declare const _default: import("vue").DefineComponent<{
         default: null;
     };
 } & {
+    id: StringConstructor;
+    name: StringConstructor;
     formatter: PropType<(value: string) => string>;
     leftIcon: StringConstructor;
     rightIcon: StringConstructor;
@@ -153,6 +159,7 @@ declare const _default: import("vue").DefineComponent<{
     maxlength: (NumberConstructor | StringConstructor)[];
     inputAlign: PropType<FieldTextAlign>;
     placeholder: StringConstructor;
+    autocomplete: StringConstructor;
     errorMessage: StringConstructor;
     error: {
         type: BooleanConstructor;
@@ -184,13 +191,11 @@ declare const _default: import("vue").DefineComponent<{
     };
 } & {
     rows: (NumberConstructor | StringConstructor)[];
-    name: StringConstructor;
     rules: PropType<FieldRule[]>;
     autosize: PropType<boolean | FieldAutosizeConfig>;
     labelWidth: (NumberConstructor | StringConstructor)[];
     labelClass: PropType<unknown>;
     labelAlign: PropType<FieldTextAlign>;
-    autocomplete: StringConstructor;
     showWordLimit: BooleanConstructor;
     errorMessageAlign: PropType<FieldTextAlign>;
     type: {
@@ -218,6 +223,8 @@ declare const _default: import("vue").DefineComponent<{
     titleStyle?: unknown;
     arrowDirection?: unknown;
     clickable?: unknown;
+    id?: unknown;
+    name?: unknown;
     formatter?: unknown;
     leftIcon?: unknown;
     rightIcon?: unknown;
@@ -226,6 +233,7 @@ declare const _default: import("vue").DefineComponent<{
     maxlength?: unknown;
     inputAlign?: unknown;
     placeholder?: unknown;
+    autocomplete?: unknown;
     errorMessage?: unknown;
     error?: unknown;
     disabled?: unknown;
@@ -235,12 +243,10 @@ declare const _default: import("vue").DefineComponent<{
     clearTrigger?: unknown;
     formatTrigger?: unknown;
     rows?: unknown;
-    name?: unknown;
     rules?: unknown;
     autosize?: unknown;
     labelWidth?: unknown;
     labelAlign?: unknown;
-    autocomplete?: unknown;
     showWordLimit?: unknown;
     errorMessageAlign?: unknown;
     type?: unknown;
@@ -248,14 +254,14 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     type: FieldType;
     center: boolean;
+    autofocus: boolean;
+    disabled: boolean;
     isLink: boolean;
     border: boolean;
     required: boolean;
     clickable: boolean | null;
-    autofocus: boolean;
     clearable: boolean;
     error: boolean;
-    disabled: boolean;
     readonly: boolean;
     clearIcon: string;
     modelValue: string | number;
@@ -268,14 +274,16 @@ declare const _default: import("vue").DefineComponent<{
     label?: string | number | undefined;
     title?: string | number | undefined;
     iconPrefix?: string | undefined;
+    autocomplete?: string | undefined;
+    value?: string | number | undefined;
     icon?: string | undefined;
     size?: "large" | undefined;
-    value?: string | number | undefined;
     valueClass?: unknown;
     labelClass?: unknown;
     titleClass?: unknown;
     titleStyle?: string | import("vue").CSSProperties | undefined;
     arrowDirection?: import("../cell").CellArrowDirection | undefined;
+    id?: string | undefined;
     formatter?: ((value: string) => string) | undefined;
     leftIcon?: string | undefined;
     rightIcon?: string | undefined;
@@ -288,7 +296,6 @@ declare const _default: import("vue").DefineComponent<{
     autosize?: boolean | FieldAutosizeConfig | undefined;
     labelWidth?: string | number | undefined;
     labelAlign?: FieldTextAlign | undefined;
-    autocomplete?: string | undefined;
     errorMessageAlign?: FieldTextAlign | undefined;
 }> & {
     onFocus?: ((...args: any[]) => any) | undefined;
@@ -302,14 +309,14 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     type: FieldType;
     center: boolean;
+    autofocus: boolean;
+    disabled: boolean;
     isLink: boolean;
     border: boolean;
     required: boolean;
     clickable: boolean | null;
-    autofocus: boolean;
     clearable: boolean;
     error: boolean;
-    disabled: boolean;
     readonly: boolean;
     clearIcon: string;
     modelValue: string | number;

package/es/field/Field.js

@@ -14,6 +14,8 @@ import { Cell } from '../cell'; // Types
 var [name, bem] = createNamespace('field'); // provide to Search component to inherit
 
 export var fieldSharedProps = {
+  id: String,
+  name: String,
   formatter: Function,
   leftIcon: String,
   rightIcon: String,
@@ -22,6 +24,7 @@ export var fieldSharedProps = {
   maxlength: [Number, String],
   inputAlign: String,
   placeholder: String,
+  autocomplete: String,
   errorMessage: String,
   error: {
     type: Boolean,
@@ -54,13 +57,11 @@ export var fieldSharedProps = {
 };
 var props = extend({}, cellProps, fieldSharedProps, {
   rows: [Number, String],
-  name: String,
   rules: Array,
   autosize: [Boolean, Object],
   labelWidth: [Number, String],
   labelClass: unknownProp,
   labelAlign: String,
-  autocomplete: String,
   showWordLimit: Boolean,
   errorMessageAlign: String,
   type: {
@@ -354,6 +355,7 @@ export default defineComponent({
       }
 
       var inputAttrs = {
+        id: props.id,
         ref: inputRef,
         name: props.name,
         rows: props.rows !== undefined ? +props.rows : undefined,
@@ -443,7 +445,9 @@ export default defineComponent({
       }
 
       if (props.label) {
-        return _createVNode("span", null, [props.label + colon]);
+        return _createVNode("label", {
+          "for": props.id
+        }, [props.label + colon]);
       }
     };
 
@@ -488,6 +492,7 @@ export default defineComponent({
         "size": props.size,
         "icon": props.leftIcon,
         "class": bem({
+          error: showError.value,
           disabled,
           ["label-" + labelAlign]: labelAlign
         }),

package/es/field/index.css

@@ -1 +1 @@
-:root{--van-field-label-width:6.2em;--van-field-label-color:var(--van-gray-7);--van-field-label-margin-right:var(--van-padding-sm);--van-field-input-text-color:var(--van-text-color);--van-field-input-error-text-color:var(--van-danger-color);--van-field-input-disabled-text-color:var(--van-gray-5);--van-field-placeholder-text-color:var(--van-gray-5);--van-field-icon-size:16px;--van-field-clear-icon-size:16px;--van-field-clear-icon-color:var(--van-gray-5);--van-field-right-icon-color:var(--van-gray-6);--van-field-error-message-color:var(--van-danger-color);--van-field-error-message-text-color:12px;--van-field-text-area-min-height:60px;--van-field-word-limit-color:var(--van-gray-7);--van-field-word-limit-font-size:var(--van-font-size-sm);--van-field-word-limit-line-height:16px;--van-field-disabled-text-color:var(--van-gray-5);--van-field-required-mark-color:var(--van-red)}.van-field__label{flex:none;box-sizing:border-box;width:var(--van-field-label-width);margin-right:var(--van-field-label-margin-right);color:var(--van-field-label-color);text-align:left;word-wrap:break-word}.van-field__label--center{text-align:center}.van-field__label--right{text-align:right}.van-field__label--required::before{margin-right:2px;color:var(--van-field-required-mark-color);content:'*'}.van-field--disabled .van-field__label{color:var(--van-field-disabled-text-color)}.van-field__value{overflow:visible}.van-field__body{display:flex;align-items:center}.van-field__control{display:block;box-sizing:border-box;width:100%;min-width:0;margin:0;padding:0;color:var(--van-field-input-text-color);line-height:inherit;text-align:left;background-color:transparent;border:0;resize:none}.van-field__control::-webkit-input-placeholder{color:var(--van-field-placeholder-text-color)}.van-field__control::placeholder{color:var(--van-field-placeholder-text-color)}.van-field__control:disabled{color:var(--van-field-input-disabled-text-color);cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--van-field-input-disabled-text-color)}.van-field__control:read-only{cursor:default}.van-field__control--center{justify-content:center;text-align:center}.van-field__control--right{justify-content:flex-end;text-align:right}.van-field__control--custom{display:flex;align-items:center;min-height:var(--van-cell-line-height)}.van-field__control--error::-webkit-input-placeholder{color:var(--van-field-input-error-text-color);-webkit-text-fill-color:currentColor}.van-field__control--error,.van-field__control--error::placeholder{color:var(--van-field-input-error-text-color);-webkit-text-fill-color:currentColor}.van-field__control--min-height{min-height:var(--van-field-text-area-min-height)}.van-field__control[type=date],.van-field__control[type=datetime-local],.van-field__control[type=time]{min-height:var(--van-cell-line-height)}.van-field__control[type=search]{-webkit-appearance:none}.van-field__button,.van-field__clear,.van-field__icon,.van-field__right-icon{flex-shrink:0}.van-field__clear,.van-field__right-icon{margin-right:-var(--van-padding-xs);padding:0 var(--van-padding-xs);line-height:inherit}.van-field__clear{color:var(--van-field-clear-icon-color);font-size:var(--van-field-clear-icon-size);cursor:pointer}.van-field__left-icon .van-icon,.van-field__right-icon .van-icon{display:block;font-size:var(--van-field-icon-size);line-height:inherit}.van-field__left-icon{margin-right:var(--van-padding-base)}.van-field__right-icon{color:var(--van-field-right-icon-color)}.van-field__button{padding-left:var(--van-padding-xs)}.van-field__error-message{color:var(--van-field-error-message-color);font-size:var(--van-field-error-message-text-color);text-align:left}.van-field__error-message--center{text-align:center}.van-field__error-message--right{text-align:right}.van-field__word-limit{margin-top:var(--van-padding-base);color:var(--van-field-word-limit-color);font-size:var(--van-field-word-limit-font-size);line-height:var(--van-field-word-limit-line-height);text-align:right}
+:root{--van-field-label-width:6.2em;--van-field-label-color:var(--van-gray-7);--van-field-label-margin-right:var(--van-padding-sm);--van-field-input-text-color:var(--van-text-color);--van-field-input-error-text-color:var(--van-danger-color);--van-field-input-disabled-text-color:var(--van-gray-5);--van-field-placeholder-text-color:var(--van-gray-5);--van-field-icon-size:16px;--van-field-clear-icon-size:16px;--van-field-clear-icon-color:var(--van-gray-5);--van-field-right-icon-color:var(--van-gray-6);--van-field-error-message-color:var(--van-danger-color);--van-field-error-message-font-size:12px;--van-field-text-area-min-height:60px;--van-field-word-limit-color:var(--van-gray-7);--van-field-word-limit-font-size:var(--van-font-size-sm);--van-field-word-limit-line-height:16px;--van-field-disabled-text-color:var(--van-gray-5);--van-field-required-mark-color:var(--van-red)}.van-field__label{flex:none;box-sizing:border-box;width:var(--van-field-label-width);margin-right:var(--van-field-label-margin-right);color:var(--van-field-label-color);text-align:left;word-wrap:break-word}.van-field__label--center{text-align:center}.van-field__label--right{text-align:right}.van-field__label--required::before{margin-right:2px;color:var(--van-field-required-mark-color);content:'*'}.van-field--disabled .van-field__label{color:var(--van-field-disabled-text-color)}.van-field__value{overflow:visible}.van-field__body{display:flex;align-items:center}.van-field__control{display:block;box-sizing:border-box;width:100%;min-width:0;margin:0;padding:0;color:var(--van-field-input-text-color);line-height:inherit;text-align:left;background-color:transparent;border:0;resize:none;-webkit-user-select:auto;user-select:auto}.van-field__control::-webkit-input-placeholder{color:var(--van-field-placeholder-text-color)}.van-field__control::placeholder{color:var(--van-field-placeholder-text-color)}.van-field__control:disabled{color:var(--van-field-input-disabled-text-color);cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--van-field-input-disabled-text-color)}.van-field__control:read-only{cursor:default}.van-field__control--center{justify-content:center;text-align:center}.van-field__control--right{justify-content:flex-end;text-align:right}.van-field__control--custom{display:flex;align-items:center;min-height:var(--van-cell-line-height)}.van-field__control--error::-webkit-input-placeholder{color:var(--van-field-input-error-text-color);-webkit-text-fill-color:currentColor}.van-field__control--error,.van-field__control--error::placeholder{color:var(--van-field-input-error-text-color);-webkit-text-fill-color:currentColor}.van-field__control--min-height{min-height:var(--van-field-text-area-min-height)}.van-field__control[type=date],.van-field__control[type=datetime-local],.van-field__control[type=time]{min-height:var(--van-cell-line-height)}.van-field__control[type=search]{-webkit-appearance:none}.van-field__button,.van-field__clear,.van-field__icon,.van-field__right-icon{flex-shrink:0}.van-field__clear,.van-field__right-icon{margin-right:calc(var(--van-padding-xs) * -1);padding:0 var(--van-padding-xs);line-height:inherit}.van-field__clear{color:var(--van-field-clear-icon-color);font-size:var(--van-field-clear-icon-size);cursor:pointer}.van-field__left-icon .van-icon,.van-field__right-icon .van-icon{display:block;font-size:var(--van-field-icon-size);line-height:inherit}.van-field__left-icon{margin-right:var(--van-padding-base)}.van-field__right-icon{color:var(--van-field-right-icon-color)}.van-field__button{padding-left:var(--van-padding-xs)}.van-field__error-message{color:var(--van-field-error-message-color);font-size:var(--van-field-error-message-font-size);text-align:left}.van-field__error-message--center{text-align:center}.van-field__error-message--right{text-align:right}.van-field__word-limit{margin-top:var(--van-padding-base);color:var(--van-field-word-limit-color);font-size:var(--van-field-word-limit-font-size);line-height:var(--van-field-word-limit-line-height);text-align:right}