vant 3.4.5 → 4.0.0-alpha.1

package/lib/number-keyboard/index.less

@@ -1,21 +1,25 @@
-@import './var.less';
-
-:root {
-  --van-number-keyboard-background-color: @number-keyboard-background-color;
-  --van-number-keyboard-key-height: @number-keyboard-key-height;
-  --van-number-keyboard-key-font-size: @number-keyboard-key-font-size;
-  --van-number-keyboard-key-active-color: @number-keyboard-key-active-color;
-  --van-number-keyboard-key-background-color: @number-keyboard-key-background-color;
-  --van-number-keyboard-delete-font-size: @number-keyboard-delete-font-size;
-  --van-number-keyboard-title-color: @number-keyboard-title-color;
-  --van-number-keyboard-title-height: @number-keyboard-title-height;
-  --van-number-keyboard-title-font-size: @number-keyboard-title-font-size;
-  --van-number-keyboard-close-padding: @number-keyboard-close-padding;
-  --van-number-keyboard-close-color: @number-keyboard-close-color;
-  --van-number-keyboard-close-font-size: @number-keyboard-close-font-size;
-  --van-number-keyboard-button-text-color: @number-keyboard-button-text-color;
-  --van-number-keyboard-button-background-color: @number-keyboard-button-background-color;
-  --van-number-keyboard-z-index: @number-keyboard-z-index;
+body {
+  --van-number-keyboard-background: var(--van-gray-2);
+  --van-number-keyboard-key-height: 48px;
+  --van-number-keyboard-key-font-size: 28px;
+  --van-number-keyboard-key-active-color: var(--van-gray-3);
+  --van-number-keyboard-key-background: var(--van-background-2);
+  --van-number-keyboard-delete-font-size: var(--van-font-size-lg);
+  --van-number-keyboard-title-color: var(--van-gray-7);
+  --van-number-keyboard-title-height: 34px;
+  --van-number-keyboard-title-font-size: var(--van-font-size-lg);
+  --van-number-keyboard-close-padding: 0 var(--van-padding-md);
+  --van-number-keyboard-close-color: var(--van-link-color);
+  --van-number-keyboard-close-font-size: var(--van-font-size-md);
+  --van-number-keyboard-button-text-color: var(--van-white);
+  --van-number-keyboard-button-background: var(--van-primary-color);
+  --van-number-keyboard-z-index: 100;
+}
+
+.van-theme-dark {
+  --van-number-keyboard-background: var(--van-gray-8);
+  --van-number-keyboard-key-background: var(--van-gray-7);
+  --van-number-keyboard-key-active-color: var(--van-gray-6);
 }
 
 .van-number-keyboard {
@@ -25,7 +29,7 @@
   z-index: var(--van-number-keyboard-z-index);
   width: 100%;
   padding-bottom: 22px;
-  background: var(--van-number-keyboard-background-color);
+  background: var(--van-number-keyboard-background);
   user-select: none;
 
   &--with-title {
@@ -94,8 +98,8 @@
   height: var(--van-number-keyboard-key-height);
   font-size: var(--van-number-keyboard-key-font-size);
   line-height: 1.5;
-  background: var(--van-number-keyboard-key-background-color);
-  border-radius: var(--van-border-radius-lg);
+  background: var(--van-number-keyboard-key-background);
+  border-radius: var(--van-radius-lg);
   cursor: pointer;
 
   &--large {
@@ -120,7 +124,7 @@
 
   &--blue {
     color: var(--van-number-keyboard-button-text-color);
-    background: var(--van-number-keyboard-button-background-color);
+    background: var(--van-number-keyboard-button-background);
 
     &.van-key--active {
       opacity: var(--van-active-opacity);

package/lib/overlay/index.css

@@ -1 +1 @@
-:root{--van-overlay-z-index: 1;--van-overlay-background-color: rgba(0, 0, 0, .7)}.van-overlay{position:fixed;top:0;left:0;z-index:var(--van-overlay-z-index);width:100%;height:100%;background:var(--van-overlay-background-color)}
+body{--van-overlay-z-index: 1;--van-overlay-background: rgba(0, 0, 0, .7)}.van-overlay{position:fixed;top:0;left:0;z-index:var(--van-overlay-z-index);width:100%;height:100%;background:var(--van-overlay-background)}

package/lib/overlay/index.less

@@ -1,8 +1,6 @@
-@import './var.less';
-
-:root {
-  --van-overlay-z-index: @overlay-z-index;
-  --van-overlay-background-color: @overlay-background-color;
+body {
+  --van-overlay-z-index: 1;
+  --van-overlay-background: rgba(0, 0, 0, 0.7);
 }
 
 .van-overlay {
@@ -12,5 +10,5 @@
   z-index: var(--van-overlay-z-index);
   width: 100%;
   height: 100%;
-  background: var(--van-overlay-background-color);
+  background: var(--van-overlay-background);
 }

package/lib/pagination/index.css

@@ -1 +1 @@
-:root{--van-pagination-height: 40px;--van-pagination-font-size: var(--van-font-size-md);--van-pagination-item-width: 36px;--van-pagination-item-default-color: var(--van-primary-color);--van-pagination-item-disabled-color: var(--van-gray-7);--van-pagination-item-disabled-background-color: var(--van-background-color);--van-pagination-background-color: var(--van-background-color-light);--van-pagination-desc-color: var(--van-gray-7);--van-pagination-disabled-opacity: var(--van-disabled-opacity)}.van-pagination{font-size:var(--van-pagination-font-size)}.van-pagination__items{display:flex}.van-pagination__item,.van-pagination__page-desc{display:flex;align-items:center;justify-content:center}.van-pagination__item{flex:1;box-sizing:border-box;min-width:var(--van-pagination-item-width);height:var(--van-pagination-height);color:var(--van-pagination-item-default-color);background:var(--van-pagination-background-color);cursor:pointer;-webkit-user-select:none;user-select:none}.van-pagination__item button{flex:1;height:100%;border:none;padding:0;background:transparent}.van-pagination__item button[disabled]{cursor:not-allowed}.van-pagination__item:active{color:var(--van-white);background-color:var(--van-pagination-item-default-color)}.van-pagination__item:not(:last-child):after{border-right-width:0}.van-pagination__item--active{color:var(--van-white);background-color:var(--van-pagination-item-default-color)}.van-pagination__item--page{flex-grow:0}.van-pagination__item--prev,.van-pagination__item--next{padding:0 var(--van-padding-base);cursor:pointer}.van-pagination__item--border:after{border-width:var(--van-border-width-base)}.van-pagination__item--disabled{color:var(--van-pagination-item-disabled-color);background-color:var(--van-pagination-item-disabled-background-color);opacity:var(--van-pagination-disabled-opacity)}.van-pagination__page-desc{flex:1;height:var(--van-pagination-height);color:var(--van-pagination-desc-color)}
+body{--van-pagination-height: 40px;--van-pagination-font-size: var(--van-font-size-md);--van-pagination-item-width: 36px;--van-pagination-item-default-color: var(--van-primary-color);--van-pagination-item-disabled-color: var(--van-gray-7);--van-pagination-item-disabled-background: var(--van-background);--van-pagination-background: var(--van-background-2);--van-pagination-desc-color: var(--van-gray-7);--van-pagination-disabled-opacity: var(--van-disabled-opacity)}.van-pagination{font-size:var(--van-pagination-font-size)}.van-pagination__items{display:flex}.van-pagination__item,.van-pagination__page-desc{display:flex;align-items:center;justify-content:center}.van-pagination__item{flex:1;box-sizing:border-box;min-width:var(--van-pagination-item-width);height:var(--van-pagination-height);color:var(--van-pagination-item-default-color);background:var(--van-pagination-background);cursor:pointer;-webkit-user-select:none;user-select:none}.van-pagination__item button{flex:1;height:100%;border:none;padding:0;background:transparent}.van-pagination__item button[disabled]{cursor:not-allowed}.van-pagination__item:active{color:var(--van-white);background-color:var(--van-pagination-item-default-color)}.van-pagination__item:not(:last-child):after{border-right-width:0}.van-pagination__item--active{color:var(--van-white);background-color:var(--van-pagination-item-default-color)}.van-pagination__item--page{flex-grow:0}.van-pagination__item--prev,.van-pagination__item--next{padding:0 var(--van-padding-base);cursor:pointer}.van-pagination__item--border:after{border-width:var(--van-border-width)}.van-pagination__item--disabled{color:var(--van-pagination-item-disabled-color);background-color:var(--van-pagination-item-disabled-background);opacity:var(--van-pagination-disabled-opacity)}.van-pagination__page-desc{flex:1;height:var(--van-pagination-height);color:var(--van-pagination-desc-color)}

package/lib/pagination/index.less

@@ -1,15 +1,13 @@
-@import './var.less';
-
-:root {
-  --van-pagination-height: @pagination-height;
-  --van-pagination-font-size: @pagination-font-size;
-  --van-pagination-item-width: @pagination-item-width;
-  --van-pagination-item-default-color: @pagination-item-default-color;
-  --van-pagination-item-disabled-color: @pagination-item-disabled-color;
-  --van-pagination-item-disabled-background-color: @pagination-item-disabled-background-color;
-  --van-pagination-background-color: @pagination-background-color;
-  --van-pagination-desc-color: @pagination-desc-color;
-  --van-pagination-disabled-opacity: @pagination-disabled-opacity;
+body {
+  --van-pagination-height: 40px;
+  --van-pagination-font-size: var(--van-font-size-md);
+  --van-pagination-item-width: 36px;
+  --van-pagination-item-default-color: var(--van-primary-color);
+  --van-pagination-item-disabled-color: var(--van-gray-7);
+  --van-pagination-item-disabled-background: var(--van-background);
+  --van-pagination-background: var(--van-background-2);
+  --van-pagination-desc-color: var(--van-gray-7);
+  --van-pagination-disabled-opacity: var(--van-disabled-opacity);
 }
 
 .van-pagination {
@@ -32,7 +30,7 @@
     min-width: var(--van-pagination-item-width);
     height: var(--van-pagination-height);
     color: var(--van-pagination-item-default-color);
-    background: var(--van-pagination-background-color);
+    background: var(--van-pagination-background);
     cursor: pointer;
     user-select: none;
 
@@ -73,12 +71,12 @@
     }
 
     &--border::after {
-      border-width: var(--van-border-width-base);
+      border-width: var(--van-border-width);
     }
 
     &--disabled {
       color: var(--van-pagination-item-disabled-color);
-      background-color: var(--van-pagination-item-disabled-background-color);
+      background-color: var(--van-pagination-item-disabled-background);
       opacity: var(--van-pagination-disabled-opacity);
     }
   }

package/lib/password-input/index.css

@@ -1 +1 @@
-:root{--van-password-input-height: 50px;--van-password-input-margin: 0 var(--van-padding-md);--van-password-input-font-size: 20px;--van-password-input-border-radius: 6px;--van-password-input-background-color: var(--van-background-color-light);--van-password-input-info-color: var(--van-text-color-2);--van-password-input-info-font-size: var(--van-font-size-md);--van-password-input-error-info-color: var(--van-danger-color);--van-password-input-dot-size: 10px;--van-password-input-dot-color: var(--van-text-color);--van-password-input-text-color: var(--van-text-color);--van-password-input-cursor-color: var(--van-text-color);--van-password-input-cursor-width: 1px;--van-password-input-cursor-height: 40%;--van-password-input-cursor-animation-duration: 1s}.van-password-input{position:relative;margin:var(--van-password-input-margin);-webkit-user-select:none;user-select:none}.van-password-input__info,.van-password-input__error-info{margin-top:var(--van-padding-md);font-size:var(--van-password-input-info-font-size);text-align:center}.van-password-input__info{color:var(--van-password-input-info-color)}.van-password-input__error-info{color:var(--van-password-input-error-info-color)}.van-password-input__security{display:flex;width:100%;height:var(--van-password-input-height);cursor:pointer}.van-password-input__security:after{border-radius:var(--van-password-input-border-radius)}.van-password-input__security li{position:relative;display:flex;flex:1;align-items:center;justify-content:center;height:100%;color:var(--van-password-input-text-color);font-size:var(--van-password-input-font-size);line-height:1.2;background:var(--van-password-input-background-color)}.van-password-input__security i{position:absolute;top:50%;left:50%;width:var(--van-password-input-dot-size);height:var(--van-password-input-dot-size);background:var(--van-password-input-dot-color);border-radius:100%;transform:translate(-50%,-50%);visibility:hidden}.van-password-input__cursor{position:absolute;top:50%;left:50%;width:var(--van-password-input-cursor-width);height:var(--van-password-input-cursor-height);background:var(--van-password-input-cursor-color);transform:translate(-50%,-50%);animation:var(--van-password-input-cursor-animation-duration) van-cursor-flicker infinite}@keyframes van-cursor-flicker{0%{opacity:0}50%{opacity:1}to{opacity:0}}
+body{--van-password-input-height: 50px;--van-password-input-margin: 0 var(--van-padding-md);--van-password-input-font-size: 20px;--van-password-input-radius: 6px;--van-password-input-background: var(--van-background-2);--van-password-input-info-color: var(--van-text-color-2);--van-password-input-info-font-size: var(--van-font-size-md);--van-password-input-error-info-color: var(--van-danger-color);--van-password-input-dot-size: 10px;--van-password-input-dot-color: var(--van-text-color);--van-password-input-text-color: var(--van-text-color);--van-password-input-cursor-color: var(--van-text-color);--van-password-input-cursor-width: 1px;--van-password-input-cursor-height: 40%;--van-password-input-cursor-duration: 1s}.van-password-input{position:relative;margin:var(--van-password-input-margin);-webkit-user-select:none;user-select:none}.van-password-input__info,.van-password-input__error-info{margin-top:var(--van-padding-md);font-size:var(--van-password-input-info-font-size);text-align:center}.van-password-input__info{color:var(--van-password-input-info-color)}.van-password-input__error-info{color:var(--van-password-input-error-info-color)}.van-password-input__security{display:flex;width:100%;height:var(--van-password-input-height);cursor:pointer}.van-password-input__security:after{border-radius:var(--van-password-input-radius)}.van-password-input__security li{position:relative;display:flex;flex:1;align-items:center;justify-content:center;height:100%;color:var(--van-password-input-text-color);font-size:var(--van-password-input-font-size);line-height:1.2;background:var(--van-password-input-background)}.van-password-input__security i{position:absolute;top:50%;left:50%;width:var(--van-password-input-dot-size);height:var(--van-password-input-dot-size);background:var(--van-password-input-dot-color);border-radius:100%;transform:translate(-50%,-50%);visibility:hidden}.van-password-input__cursor{position:absolute;top:50%;left:50%;width:var(--van-password-input-cursor-width);height:var(--van-password-input-cursor-height);background:var(--van-password-input-cursor-color);transform:translate(-50%,-50%);animation:var(--van-password-input-cursor-duration) van-cursor-flicker infinite}@keyframes van-cursor-flicker{0%{opacity:0}50%{opacity:1}to{opacity:0}}

package/lib/password-input/index.less

@@ -1,21 +1,19 @@
-@import './var.less';
-
-:root {
-  --van-password-input-height: @password-input-height;
-  --van-password-input-margin: @password-input-margin;
-  --van-password-input-font-size: @password-input-font-size;
-  --van-password-input-border-radius: @password-input-border-radius;
-  --van-password-input-background-color: @password-input-background-color;
-  --van-password-input-info-color: @password-input-info-color;
-  --van-password-input-info-font-size: @password-input-info-font-size;
-  --van-password-input-error-info-color: @password-input-error-info-color;
-  --van-password-input-dot-size: @password-input-dot-size;
-  --van-password-input-dot-color: @password-input-dot-color;
-  --van-password-input-text-color: @password-input-text-color;
-  --van-password-input-cursor-color: @password-input-cursor-color;
-  --van-password-input-cursor-width: @password-input-cursor-width;
-  --van-password-input-cursor-height: @password-input-cursor-height;
-  --van-password-input-cursor-animation-duration: @password-input-cursor-animation-duration;
+body {
+  --van-password-input-height: 50px;
+  --van-password-input-margin: 0 var(--van-padding-md);
+  --van-password-input-font-size: 20px;
+  --van-password-input-radius: 6px;
+  --van-password-input-background: var(--van-background-2);
+  --van-password-input-info-color: var(--van-text-color-2);
+  --van-password-input-info-font-size: var(--van-font-size-md);
+  --van-password-input-error-info-color: var(--van-danger-color);
+  --van-password-input-dot-size: 10px;
+  --van-password-input-dot-color: var(--van-text-color);
+  --van-password-input-text-color: var(--van-text-color);
+  --van-password-input-cursor-color: var(--van-text-color);
+  --van-password-input-cursor-width: 1px;
+  --van-password-input-cursor-height: 40%;
+  --van-password-input-cursor-duration: 1s;
 }
 
 .van-password-input {
@@ -45,7 +43,7 @@
     cursor: pointer;
 
     &::after {
-      border-radius: var(--van-password-input-border-radius);
+      border-radius: var(--van-password-input-radius);
     }
 
     li {
@@ -58,7 +56,7 @@
       color: var(--van-password-input-text-color);
       font-size: var(--van-password-input-font-size);
       line-height: 1.2;
-      background: var(--van-password-input-background-color);
+      background: var(--van-password-input-background);
     }
 
     i {
@@ -82,8 +80,8 @@
     height: var(--van-password-input-cursor-height);
     background: var(--van-password-input-cursor-color);
     transform: translate(-50%, -50%);
-    animation: var(--van-password-input-cursor-animation-duration)
-      van-cursor-flicker infinite;
+    animation: var(--van-password-input-cursor-duration) van-cursor-flicker
+      infinite;
   }
 }
 

package/lib/picker/Picker.d.ts

@@ -5,7 +5,7 @@ export declare const pickerSharedProps: {
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    itemHeight: {
+    optionHeight: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -17,7 +17,7 @@ export declare const pickerSharedProps: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    visibleItemCount: {
+    visibleOptionNum: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -29,7 +29,7 @@ declare const pickerProps: {
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    itemHeight: {
+    optionHeight: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -41,7 +41,7 @@ declare const pickerProps: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    visibleItemCount: {
+    visibleOptionNum: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -49,13 +49,12 @@ declare const pickerProps: {
     confirmButtonText: StringConstructor;
 } & {
     columns: {
-        type: PropType<(PickerOption | PickerColumn)[]>;
+        type: PropType<(PickerColumn | PickerOption)[]>;
         default: () => never[];
     };
-    valueKey: StringConstructor;
-    defaultIndex: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
+    modelValue: {
+        type: PropType<(string | number)[]>;
+        default: () => never[];
     };
     toolbarPosition: {
         type: PropType<PickerToolbarPosition>;
@@ -69,7 +68,7 @@ declare const _default: import("vue").DefineComponent<{
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    itemHeight: {
+    optionHeight: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -81,7 +80,7 @@ declare const _default: import("vue").DefineComponent<{
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    visibleItemCount: {
+    visibleOptionNum: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -89,25 +88,24 @@ declare const _default: import("vue").DefineComponent<{
     confirmButtonText: StringConstructor;
 } & {
     columns: {
-        type: PropType<(PickerOption | PickerColumn)[]>;
+        type: PropType<(PickerColumn | PickerOption)[]>;
         default: () => never[];
     };
-    valueKey: StringConstructor;
-    defaultIndex: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
+    modelValue: {
+        type: PropType<(string | number)[]>;
+        default: () => never[];
     };
     toolbarPosition: {
         type: PropType<PickerToolbarPosition>;
         default: PickerToolbarPosition;
     };
     columnsFieldNames: PropType<PickerFieldNames>;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "cancel" | "confirm")[], "change" | "cancel" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "cancel" | "confirm")[], "update:modelValue" | "change" | "cancel" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     title: StringConstructor;
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    itemHeight: {
+    optionHeight: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -119,7 +117,7 @@ declare const _default: import("vue").DefineComponent<{
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    visibleItemCount: {
+    visibleOptionNum: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -127,13 +125,12 @@ declare const _default: import("vue").DefineComponent<{
     confirmButtonText: StringConstructor;
 } & {
     columns: {
-        type: PropType<(PickerOption | PickerColumn)[]>;
+        type: PropType<(PickerColumn | PickerOption)[]>;
         default: () => never[];
     };
-    valueKey: StringConstructor;
-    defaultIndex: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
+    modelValue: {
+        type: PropType<(string | number)[]>;
+        default: () => never[];
     };
     toolbarPosition: {
         type: PropType<PickerToolbarPosition>;
@@ -142,18 +139,19 @@ declare const _default: import("vue").DefineComponent<{
     columnsFieldNames: PropType<PickerFieldNames>;
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
 }, {
+    modelValue: (string | number)[];
     readonly: boolean;
     loading: boolean;
-    defaultIndex: string | number;
     allowHtml: boolean;
-    itemHeight: string | number;
+    optionHeight: string | number;
     showToolbar: boolean;
     swipeDuration: string | number;
-    visibleItemCount: string | number;
-    columns: (PickerOption | PickerColumn)[];
+    visibleOptionNum: string | number;
+    columns: (PickerColumn | PickerOption)[];
     toolbarPosition: PickerToolbarPosition;
 }>;
 export default _default;