vant 3.4.5 → 4.0.0-alpha.1

package/lib/popover/index.css

@@ -1 +1 @@
-:root{--van-popover-arrow-size: 6px;--van-popover-border-radius: var(--van-border-radius-lg);--van-popover-action-width: 128px;--van-popover-action-height: 44px;--van-popover-action-font-size: var(--van-font-size-md);--van-popover-action-line-height: var(--van-line-height-md);--van-popover-action-icon-size: 20px;--van-popover-light-text-color: var(--van-text-color);--van-popover-light-background-color: var(--van-background-color-light);--van-popover-light-action-disabled-text-color: var(--van-text-color-3);--van-popover-dark-text-color: var(--van-white);--van-popover-dark-background-color: #4a4a4a;--van-popover-dark-action-disabled-text-color: var(--van-text-color-2)}.van-popover{position:absolute;overflow:visible;background-color:transparent;transition:opacity .15s,transform .15s}.van-popover__wrapper{display:inline-block}.van-popover__arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid;border-width:var(--van-popover-arrow-size)}.van-popover__content{overflow:hidden;border-radius:var(--van-popover-border-radius)}.van-popover__action{position:relative;display:flex;align-items:center;box-sizing:border-box;width:var(--van-popover-action-width);height:var(--van-popover-action-height);padding:0 var(--van-padding-md);font-size:var(--van-popover-action-font-size);line-height:var(--van-line-height-md);cursor:pointer}.van-popover__action:last-child .van-popover__action-text:after{display:none}.van-popover__action-text{display:flex;flex:1;align-items:center;justify-content:center;height:100%}.van-popover__action-icon{margin-right:var(--van-padding-xs);font-size:var(--van-popover-action-icon-size)}.van-popover__action--with-icon .van-popover__action-text{justify-content:flex-start}.van-popover[data-popper-placement^=top] .van-popover__arrow{bottom:0;border-top-color:currentColor;border-bottom-width:0;transform:translate(-50%);margin-bottom:calc(var(--van-popover-arrow-size) * -1)}.van-popover[data-popper-placement=top]{transform-origin:50% 100%}.van-popover[data-popper-placement=top] .van-popover__arrow{left:50%}.van-popover[data-popper-placement=top-start]{transform-origin:0 100%}.van-popover[data-popper-placement=top-start] .van-popover__arrow{left:var(--van-padding-md)}.van-popover[data-popper-placement=top-end]{transform-origin:100% 100%}.van-popover[data-popper-placement=top-end] .van-popover__arrow{right:var(--van-padding-md)}.van-popover[data-popper-placement^=left] .van-popover__arrow{right:0;border-right-width:0;border-left-color:currentColor;transform:translateY(-50%);margin-right:calc(var(--van-popover-arrow-size) * -1)}.van-popover[data-popper-placement=left]{transform-origin:100% 50%}.van-popover[data-popper-placement=left] .van-popover__arrow{top:50%}.van-popover[data-popper-placement=left-start]{transform-origin:100% 0}.van-popover[data-popper-placement=left-start] .van-popover__arrow{top:var(--van-padding-md)}.van-popover[data-popper-placement=left-end]{transform-origin:100% 100%}.van-popover[data-popper-placement=left-end] .van-popover__arrow{bottom:var(--van-padding-md)}.van-popover[data-popper-placement^=right] .van-popover__arrow{left:0;border-right-color:currentColor;border-left-width:0;transform:translateY(-50%);margin-left:calc(var(--van-popover-arrow-size) * -1)}.van-popover[data-popper-placement=right]{transform-origin:0 50%}.van-popover[data-popper-placement=right] .van-popover__arrow{top:50%}.van-popover[data-popper-placement=right-start]{transform-origin:0 0}.van-popover[data-popper-placement=right-start] .van-popover__arrow{top:var(--van-padding-md)}.van-popover[data-popper-placement=right-end]{transform-origin:0 100%}.van-popover[data-popper-placement=right-end] .van-popover__arrow{bottom:var(--van-padding-md)}.van-popover[data-popper-placement^=bottom] .van-popover__arrow{top:0;border-top-width:0;border-bottom-color:currentColor;transform:translate(-50%);margin-top:calc(var(--van-popover-arrow-size) * -1)}.van-popover[data-popper-placement=bottom]{transform-origin:50% 0}.van-popover[data-popper-placement=bottom] .van-popover__arrow{left:50%}.van-popover[data-popper-placement=bottom-start]{transform-origin:0 0}.van-popover[data-popper-placement=bottom-start] .van-popover__arrow{left:var(--van-padding-md)}.van-popover[data-popper-placement=bottom-end]{transform-origin:100% 0}.van-popover[data-popper-placement=bottom-end] .van-popover__arrow{right:var(--van-padding-md)}.van-popover--light{color:var(--van-popover-light-text-color)}.van-popover--light .van-popover__content{background:var(--van-popover-light-background-color);box-shadow:0 2px 12px rgba(50,50,51,.12)}.van-popover--light .van-popover__arrow{color:var(--van-popover-light-background-color)}.van-popover--light .van-popover__action:active{background-color:var(--van-active-color)}.van-popover--light .van-popover__action--disabled{color:var(--van-popover-light-action-disabled-text-color);cursor:not-allowed}.van-popover--light .van-popover__action--disabled:active{background-color:transparent}.van-popover--dark{color:var(--van-popover-dark-text-color)}.van-popover--dark .van-popover__content{background:var(--van-popover-dark-background-color)}.van-popover--dark .van-popover__arrow{color:var(--van-popover-dark-background-color)}.van-popover--dark .van-popover__action:active{background-color:rgba(0,0,0,.2)}.van-popover--dark .van-popover__action--disabled{color:var(--van-popover-dark-action-disabled-text-color)}.van-popover--dark .van-popover__action--disabled:active{background-color:transparent}.van-popover--dark .van-popover__action-text:after{border-color:var(--van-gray-7)}.van-popover-zoom-enter-from,.van-popover-zoom-leave-active{transform:scale(.8);opacity:0}.van-popover-zoom-enter-active{transition-timing-function:var(--van-animation-timing-function-enter)}.van-popover-zoom-leave-active{transition-timing-function:var(--van-animation-timing-function-leave)}
+body{--van-popover-arrow-size: 6px;--van-popover-radius: var(--van-radius-lg);--van-popover-action-width: 128px;--van-popover-action-height: 44px;--van-popover-action-font-size: var(--van-font-size-md);--van-popover-action-line-height: var(--van-line-height-md);--van-popover-action-icon-size: 20px;--van-popover-light-text-color: var(--van-text-color);--van-popover-light-background: var(--van-background-2);--van-popover-light-action-disabled-text-color: var(--van-text-color-3);--van-popover-dark-text-color: var(--van-white);--van-popover-dark-background: #4a4a4a;--van-popover-dark-action-disabled-text-color: var(--van-text-color-2)}.van-popover{position:absolute;overflow:visible;background-color:transparent;transition:opacity .15s,transform .15s}.van-popover__wrapper{display:inline-block}.van-popover__arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid;border-width:var(--van-popover-arrow-size)}.van-popover__content{overflow:hidden;border-radius:var(--van-popover-radius)}.van-popover__action{position:relative;display:flex;align-items:center;box-sizing:border-box;width:var(--van-popover-action-width);height:var(--van-popover-action-height);padding:0 var(--van-padding-md);font-size:var(--van-popover-action-font-size);line-height:var(--van-line-height-md);cursor:pointer}.van-popover__action:last-child .van-popover__action-text:after{display:none}.van-popover__action-text{display:flex;flex:1;align-items:center;justify-content:center;height:100%}.van-popover__action-icon{margin-right:var(--van-padding-xs);font-size:var(--van-popover-action-icon-size)}.van-popover__action--with-icon .van-popover__action-text{justify-content:flex-start}.van-popover[data-popper-placement^=top] .van-popover__arrow{bottom:0;border-top-color:currentColor;border-bottom-width:0;transform:translate(-50%);margin-bottom:calc(var(--van-popover-arrow-size) * -1)}.van-popover[data-popper-placement=top]{transform-origin:50% 100%}.van-popover[data-popper-placement=top] .van-popover__arrow{left:50%}.van-popover[data-popper-placement=top-start]{transform-origin:0 100%}.van-popover[data-popper-placement=top-start] .van-popover__arrow{left:var(--van-padding-md)}.van-popover[data-popper-placement=top-end]{transform-origin:100% 100%}.van-popover[data-popper-placement=top-end] .van-popover__arrow{right:var(--van-padding-md)}.van-popover[data-popper-placement^=left] .van-popover__arrow{right:0;border-right-width:0;border-left-color:currentColor;transform:translateY(-50%);margin-right:calc(var(--van-popover-arrow-size) * -1)}.van-popover[data-popper-placement=left]{transform-origin:100% 50%}.van-popover[data-popper-placement=left] .van-popover__arrow{top:50%}.van-popover[data-popper-placement=left-start]{transform-origin:100% 0}.van-popover[data-popper-placement=left-start] .van-popover__arrow{top:var(--van-padding-md)}.van-popover[data-popper-placement=left-end]{transform-origin:100% 100%}.van-popover[data-popper-placement=left-end] .van-popover__arrow{bottom:var(--van-padding-md)}.van-popover[data-popper-placement^=right] .van-popover__arrow{left:0;border-right-color:currentColor;border-left-width:0;transform:translateY(-50%);margin-left:calc(var(--van-popover-arrow-size) * -1)}.van-popover[data-popper-placement=right]{transform-origin:0 50%}.van-popover[data-popper-placement=right] .van-popover__arrow{top:50%}.van-popover[data-popper-placement=right-start]{transform-origin:0 0}.van-popover[data-popper-placement=right-start] .van-popover__arrow{top:var(--van-padding-md)}.van-popover[data-popper-placement=right-end]{transform-origin:0 100%}.van-popover[data-popper-placement=right-end] .van-popover__arrow{bottom:var(--van-padding-md)}.van-popover[data-popper-placement^=bottom] .van-popover__arrow{top:0;border-top-width:0;border-bottom-color:currentColor;transform:translate(-50%);margin-top:calc(var(--van-popover-arrow-size) * -1)}.van-popover[data-popper-placement=bottom]{transform-origin:50% 0}.van-popover[data-popper-placement=bottom] .van-popover__arrow{left:50%}.van-popover[data-popper-placement=bottom-start]{transform-origin:0 0}.van-popover[data-popper-placement=bottom-start] .van-popover__arrow{left:var(--van-padding-md)}.van-popover[data-popper-placement=bottom-end]{transform-origin:100% 0}.van-popover[data-popper-placement=bottom-end] .van-popover__arrow{right:var(--van-padding-md)}.van-popover--light{color:var(--van-popover-light-text-color)}.van-popover--light .van-popover__content{background:var(--van-popover-light-background);box-shadow:0 2px 12px rgba(50,50,51,.12)}.van-popover--light .van-popover__arrow{color:var(--van-popover-light-background)}.van-popover--light .van-popover__action:active{background-color:var(--van-active-color)}.van-popover--light .van-popover__action--disabled{color:var(--van-popover-light-action-disabled-text-color);cursor:not-allowed}.van-popover--light .van-popover__action--disabled:active{background-color:transparent}.van-popover--dark{color:var(--van-popover-dark-text-color)}.van-popover--dark .van-popover__content{background:var(--van-popover-dark-background)}.van-popover--dark .van-popover__arrow{color:var(--van-popover-dark-background)}.van-popover--dark .van-popover__action:active{background-color:rgba(0,0,0,.2)}.van-popover--dark .van-popover__action--disabled{color:var(--van-popover-dark-action-disabled-text-color)}.van-popover--dark .van-popover__action--disabled:active{background-color:transparent}.van-popover--dark .van-popover__action-text:after{border-color:var(--van-gray-7)}.van-popover-zoom-enter-from,.van-popover-zoom-leave-active{transform:scale(.8);opacity:0}.van-popover-zoom-enter-active{transition-timing-function:var(--van-ease-out)}.van-popover-zoom-leave-active{transition-timing-function:var(--van-ease-in)}

package/lib/popover/index.d.ts

@@ -98,13 +98,13 @@ export declare const Popover: import("../utils").WithInstall<import("vue").Defin
     "onUpdate:show"?: ((...args: any[]) => any) | undefined;
 }, {
     offset: [number, number];
+    theme: import("./types").PopoverTheme;
     overlay: boolean;
     show: boolean;
     teleport: string | import("vue").RendererElement | null | undefined;
     closeOnClickOverlay: boolean;
     actions: import("./types").PopoverAction[];
     closeOnClickAction: boolean;
-    theme: import("./types").PopoverTheme;
     closeOnClickOutside: boolean;
     trigger: import("./types").PopoverTrigger;
     showArrow: boolean;

package/lib/popover/index.less

@@ -1,19 +1,17 @@
-@import './var.less';
-
-:root {
-  --van-popover-arrow-size: @popover-arrow-size;
-  --van-popover-border-radius: @popover-border-radius;
-  --van-popover-action-width: @popover-action-width;
-  --van-popover-action-height: @popover-action-height;
-  --van-popover-action-font-size: @popover-action-font-size;
-  --van-popover-action-line-height: @popover-action-line-height;
-  --van-popover-action-icon-size: @popover-action-icon-size;
-  --van-popover-light-text-color: @popover-light-text-color;
-  --van-popover-light-background-color: @popover-light-background-color;
-  --van-popover-light-action-disabled-text-color: @popover-light-action-disabled-text-color;
-  --van-popover-dark-text-color: @popover-dark-text-color;
-  --van-popover-dark-background-color: @popover-dark-background-color;
-  --van-popover-dark-action-disabled-text-color: @popover-dark-action-disabled-text-color;
+body {
+  --van-popover-arrow-size: 6px;
+  --van-popover-radius: var(--van-radius-lg);
+  --van-popover-action-width: 128px;
+  --van-popover-action-height: 44px;
+  --van-popover-action-font-size: var(--van-font-size-md);
+  --van-popover-action-line-height: var(--van-line-height-md);
+  --van-popover-action-icon-size: 20px;
+  --van-popover-light-text-color: var(--van-text-color);
+  --van-popover-light-background: var(--van-background-2);
+  --van-popover-light-action-disabled-text-color: var(--van-text-color-3);
+  --van-popover-dark-text-color: var(--van-white);
+  --van-popover-dark-background: #4a4a4a;
+  --van-popover-dark-action-disabled-text-color: var(--van-text-color-2);
 }
 
 .van-popover {
@@ -37,7 +35,7 @@
 
   &__content {
     overflow: hidden;
-    border-radius: var(--van-popover-border-radius);
+    border-radius: var(--van-popover-radius);
   }
 
   &__action {
@@ -218,12 +216,12 @@
     color: var(--van-popover-light-text-color);
 
     .van-popover__content {
-      background: var(--van-popover-light-background-color);
+      background: var(--van-popover-light-background);
       box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12);
     }
 
     .van-popover__arrow {
-      color: var(--van-popover-light-background-color);
+      color: var(--van-popover-light-background);
     }
 
     .van-popover__action {
@@ -246,11 +244,11 @@
     color: var(--van-popover-dark-text-color);
 
     .van-popover__content {
-      background: var(--van-popover-dark-background-color);
+      background: var(--van-popover-dark-background);
     }
 
     .van-popover__arrow {
-      color: var(--van-popover-dark-background-color);
+      color: var(--van-popover-dark-background);
     }
 
     .van-popover__action {
@@ -281,10 +279,10 @@
   }
 
   &-zoom-enter-active {
-    transition-timing-function: var(--van-animation-timing-function-enter);
+    transition-timing-function: var(--van-ease-out);
   }
 
   &-zoom-leave-active {
-    transition-timing-function: var(--van-animation-timing-function-leave);
+    transition-timing-function: var(--van-ease-in);
   }
 }

package/lib/popup/Popup.d.ts

@@ -43,6 +43,7 @@ declare const popupProps: {
         type: import("vue").PropType<PopupCloseIconPosition>;
         default: PopupCloseIconPosition;
     };
+    safeAreaInsetTop: BooleanConstructor;
     safeAreaInsetBottom: BooleanConstructor;
 };
 export declare type PopupProps = ExtractPropTypes<typeof popupProps>;
@@ -89,8 +90,9 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<PopupCloseIconPosition>;
         default: PopupCloseIconPosition;
     };
+    safeAreaInsetTop: BooleanConstructor;
     safeAreaInsetBottom: BooleanConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("open" | "close" | "keydown" | "opened" | "closed" | "update:show" | "click-overlay" | "click-close-icon")[], "open" | "close" | "keydown" | "opened" | "closed" | "update:show" | "click-overlay" | "click-close-icon", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("open" | "close" | "keydown" | "opened" | "closed" | "update:show" | "clickOverlay" | "clickCloseIcon")[], "open" | "close" | "keydown" | "opened" | "closed" | "update:show" | "clickOverlay" | "clickCloseIcon", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     show: BooleanConstructor;
     zIndex: (NumberConstructor | StringConstructor)[];
     overlay: {
@@ -133,6 +135,7 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<PopupCloseIconPosition>;
         default: PopupCloseIconPosition;
     };
+    safeAreaInsetTop: BooleanConstructor;
     safeAreaInsetBottom: BooleanConstructor;
 }>> & {
     onKeydown?: ((...args: any[]) => any) | undefined;
@@ -141,8 +144,8 @@ declare const _default: import("vue").DefineComponent<{
     onOpened?: ((...args: any[]) => any) | undefined;
     onClosed?: ((...args: any[]) => any) | undefined;
     "onUpdate:show"?: ((...args: any[]) => any) | undefined;
-    "onClick-overlay"?: ((...args: any[]) => any) | undefined;
-    "onClick-close-icon"?: ((...args: any[]) => any) | undefined;
+    onClickOverlay?: ((...args: any[]) => any) | undefined;
+    onClickCloseIcon?: ((...args: any[]) => any) | undefined;
 }, {
     position: PopupPosition;
     round: boolean;
@@ -157,5 +160,6 @@ declare const _default: import("vue").DefineComponent<{
     closeable: boolean;
     closeOnPopstate: boolean;
     closeIconPosition: PopupCloseIconPosition;
+    safeAreaInsetTop: boolean;
 }>;
 export default _default;

package/lib/popup/Popup.js

@@ -44,6 +44,7 @@ const popupProps = (0, import_utils.extend)({}, import_shared.popupSharedProps,
   iconPrefix: String,
   closeOnPopstate: Boolean,
   closeIconPosition: (0, import_utils.makeStringProp)("top-right"),
+  safeAreaInsetTop: Boolean,
   safeAreaInsetBottom: Boolean
 });
 const [name, bem] = (0, import_utils.createNamespace)("popup");
@@ -52,7 +53,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
   name,
   inheritAttrs: false,
   props: popupProps,
-  emits: ["open", "close", "opened", "closed", "keydown", "update:show", "click-overlay", "click-close-icon"],
+  emits: ["open", "close", "opened", "closed", "keydown", "update:show", "clickOverlay", "clickCloseIcon"],
   setup(props, {
     emit,
     attrs,
@@ -95,7 +96,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
     };
     const onClickOverlay = (event) => {
-      emit("click-overlay", event);
+      emit("clickOverlay", event);
       if (props.closeOnClickOverlay) {
         close();
       }
@@ -115,7 +116,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
     };
     const onClickCloseIcon = (event) => {
-      emit("click-close-icon", event);
+      emit("clickCloseIcon", event);
       close();
     };
     const renderCloseIcon = () => {
@@ -138,6 +139,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       const {
         round,
         position,
+        safeAreaInsetTop,
         safeAreaInsetBottom
       } = props;
       return (0, import_vue.withDirectives)((0, import_vue.createVNode)("div", (0, import_vue.mergeProps)({
@@ -147,6 +149,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
           round,
           [position]: position
         }), {
+          "van-safe-area-top": safeAreaInsetTop,
           "van-safe-area-bottom": safeAreaInsetBottom
         }],
         "onKeydown": onKeydown

package/lib/popup/index.css

@@ -1 +1 @@
-:root{--van-popup-background-color: var(--van-background-color-light);--van-popup-transition: transform var(--van-animation-duration-base);--van-popup-round-border-radius: 16px;--van-popup-close-icon-size: 22px;--van-popup-close-icon-color: var(--van-gray-5);--van-popup-close-icon-margin: 16px;--van-popup-close-icon-z-index: 1}.van-overflow-hidden{overflow:hidden!important}.van-popup{position:fixed;max-height:100%;overflow-y:auto;background:var(--van-popup-background-color);transition:var(--van-popup-transition);-webkit-overflow-scrolling:touch}.van-popup--center{top:50%;left:50%;transform:translate(-50%,-50%)}.van-popup--center.van-popup--round{border-radius:var(--van-popup-round-border-radius)}.van-popup--top{top:0;left:0;width:100%}.van-popup--top.van-popup--round{border-radius:0 0 var(--van-popup-round-border-radius) var(--van-popup-round-border-radius)}.van-popup--right{top:50%;right:0;transform:translateY(-50%)}.van-popup--right.van-popup--round{border-radius:var(--van-popup-round-border-radius) 0 0 var(--van-popup-round-border-radius)}.van-popup--bottom{bottom:0;left:0;width:100%}.van-popup--bottom.van-popup--round{border-radius:var(--van-popup-round-border-radius) var(--van-popup-round-border-radius) 0 0}.van-popup--left{top:50%;left:0;transform:translateY(-50%)}.van-popup--left.van-popup--round{border-radius:0 var(--van-popup-round-border-radius) var(--van-popup-round-border-radius) 0}.van-popup-slide-top-enter-active,.van-popup-slide-left-enter-active,.van-popup-slide-right-enter-active,.van-popup-slide-bottom-enter-active{transition-timing-function:var(--van-animation-timing-function-enter)}.van-popup-slide-top-leave-active,.van-popup-slide-left-leave-active,.van-popup-slide-right-leave-active,.van-popup-slide-bottom-leave-active{transition-timing-function:var(--van-animation-timing-function-leave)}.van-popup-slide-top-enter-from,.van-popup-slide-top-leave-active{transform:translateY(-100%)}.van-popup-slide-right-enter-from,.van-popup-slide-right-leave-active{transform:translate(100%,-50%)}.van-popup-slide-bottom-enter-from,.van-popup-slide-bottom-leave-active{transform:translateY(100%)}.van-popup-slide-left-enter-from,.van-popup-slide-left-leave-active{transform:translate(-100%,-50%)}.van-popup__close-icon{position:absolute;z-index:var(--van-popup-close-icon-z-index);color:var(--van-popup-close-icon-color);font-size:var(--van-popup-close-icon-size)}.van-popup__close-icon--top-left{top:var(--van-popup-close-icon-margin);left:var(--van-popup-close-icon-margin)}.van-popup__close-icon--top-right{top:var(--van-popup-close-icon-margin);right:var(--van-popup-close-icon-margin)}.van-popup__close-icon--bottom-left{bottom:var(--van-popup-close-icon-margin);left:var(--van-popup-close-icon-margin)}.van-popup__close-icon--bottom-right{right:var(--van-popup-close-icon-margin);bottom:var(--van-popup-close-icon-margin)}
+body{--van-popup-background: var(--van-background-2);--van-popup-transition: transform var(--van-duration-base);--van-popup-round-radius: 16px;--van-popup-close-icon-size: 22px;--van-popup-close-icon-color: var(--van-gray-5);--van-popup-close-icon-margin: 16px;--van-popup-close-icon-z-index: 1}.van-overflow-hidden{overflow:hidden!important}.van-popup{position:fixed;max-height:100%;overflow-y:auto;background:var(--van-popup-background);transition:var(--van-popup-transition);-webkit-overflow-scrolling:touch}.van-popup--center{top:50%;left:50%;transform:translate(-50%,-50%)}.van-popup--center.van-popup--round{border-radius:var(--van-popup-round-radius)}.van-popup--top{top:0;left:0;width:100%}.van-popup--top.van-popup--round{border-radius:0 0 var(--van-popup-round-radius) var(--van-popup-round-radius)}.van-popup--right{top:50%;right:0;transform:translateY(-50%)}.van-popup--right.van-popup--round{border-radius:var(--van-popup-round-radius) 0 0 var(--van-popup-round-radius)}.van-popup--bottom{bottom:0;left:0;width:100%}.van-popup--bottom.van-popup--round{border-radius:var(--van-popup-round-radius) var(--van-popup-round-radius) 0 0}.van-popup--left{top:50%;left:0;transform:translateY(-50%)}.van-popup--left.van-popup--round{border-radius:0 var(--van-popup-round-radius) var(--van-popup-round-radius) 0}.van-popup-slide-top-enter-active,.van-popup-slide-left-enter-active,.van-popup-slide-right-enter-active,.van-popup-slide-bottom-enter-active{transition-timing-function:var(--van-ease-out)}.van-popup-slide-top-leave-active,.van-popup-slide-left-leave-active,.van-popup-slide-right-leave-active,.van-popup-slide-bottom-leave-active{transition-timing-function:var(--van-ease-in)}.van-popup-slide-top-enter-from,.van-popup-slide-top-leave-active{transform:translateY(-100%)}.van-popup-slide-right-enter-from,.van-popup-slide-right-leave-active{transform:translate(100%,-50%)}.van-popup-slide-bottom-enter-from,.van-popup-slide-bottom-leave-active{transform:translateY(100%)}.van-popup-slide-left-enter-from,.van-popup-slide-left-leave-active{transform:translate(-100%,-50%)}.van-popup__close-icon{position:absolute;z-index:var(--van-popup-close-icon-z-index);color:var(--van-popup-close-icon-color);font-size:var(--van-popup-close-icon-size)}.van-popup__close-icon--top-left{top:var(--van-popup-close-icon-margin);left:var(--van-popup-close-icon-margin)}.van-popup__close-icon--top-right{top:var(--van-popup-close-icon-margin);right:var(--van-popup-close-icon-margin)}.van-popup__close-icon--bottom-left{bottom:var(--van-popup-close-icon-margin);left:var(--van-popup-close-icon-margin)}.van-popup__close-icon--bottom-right{right:var(--van-popup-close-icon-margin);bottom:var(--van-popup-close-icon-margin)}

package/lib/popup/index.d.ts

@@ -41,8 +41,9 @@ export declare const Popup: import("../utils").WithInstall<import("vue").DefineC
         type: import("vue").PropType<import("./types").PopupCloseIconPosition>;
         default: import("./types").PopupCloseIconPosition;
     };
+    safeAreaInsetTop: BooleanConstructor;
     safeAreaInsetBottom: BooleanConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("open" | "close" | "keydown" | "opened" | "closed" | "update:show" | "click-overlay" | "click-close-icon")[], "open" | "close" | "keydown" | "opened" | "closed" | "update:show" | "click-overlay" | "click-close-icon", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("open" | "close" | "keydown" | "opened" | "closed" | "update:show" | "clickOverlay" | "clickCloseIcon")[], "open" | "close" | "keydown" | "opened" | "closed" | "update:show" | "clickOverlay" | "clickCloseIcon", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     show: BooleanConstructor;
     zIndex: (NumberConstructor | StringConstructor)[];
     overlay: {
@@ -85,6 +86,7 @@ export declare const Popup: import("../utils").WithInstall<import("vue").DefineC
         type: import("vue").PropType<import("./types").PopupCloseIconPosition>;
         default: import("./types").PopupCloseIconPosition;
     };
+    safeAreaInsetTop: BooleanConstructor;
     safeAreaInsetBottom: BooleanConstructor;
 }>> & {
     onKeydown?: ((...args: any[]) => any) | undefined;
@@ -93,8 +95,8 @@ export declare const Popup: import("../utils").WithInstall<import("vue").DefineC
     onOpened?: ((...args: any[]) => any) | undefined;
     onClosed?: ((...args: any[]) => any) | undefined;
     "onUpdate:show"?: ((...args: any[]) => any) | undefined;
-    "onClick-overlay"?: ((...args: any[]) => any) | undefined;
-    "onClick-close-icon"?: ((...args: any[]) => any) | undefined;
+    onClickOverlay?: ((...args: any[]) => any) | undefined;
+    onClickCloseIcon?: ((...args: any[]) => any) | undefined;
 }, {
     position: import("./types").PopupPosition;
     round: boolean;
@@ -109,6 +111,7 @@ export declare const Popup: import("../utils").WithInstall<import("vue").DefineC
     closeable: boolean;
     closeOnPopstate: boolean;
     closeIconPosition: import("./types").PopupCloseIconPosition;
+    safeAreaInsetTop: boolean;
 }>>;
 export default Popup;
 export type { PopupProps } from './Popup';

package/lib/popup/index.less

@@ -1,13 +1,11 @@
-@import './var.less';
-
-:root {
-  --van-popup-background-color: @popup-background-color;
-  --van-popup-transition: @popup-transition;
-  --van-popup-round-border-radius: @popup-round-border-radius;
-  --van-popup-close-icon-size: @popup-close-icon-size;
-  --van-popup-close-icon-color: @popup-close-icon-color;
-  --van-popup-close-icon-margin: @popup-close-icon-margin;
-  --van-popup-close-icon-z-index: @popup-close-icon-z-index;
+body {
+  --van-popup-background: var(--van-background-2);
+  --van-popup-transition: transform var(--van-duration-base);
+  --van-popup-round-radius: 16px;
+  --van-popup-close-icon-size: 22px;
+  --van-popup-close-icon-color: var(--van-gray-5);
+  --van-popup-close-icon-margin: 16px;
+  --van-popup-close-icon-z-index: 1;
 }
 
 .van {
@@ -19,7 +17,7 @@
     position: fixed;
     max-height: 100%;
     overflow-y: auto;
-    background: var(--van-popup-background-color);
+    background: var(--van-popup-background);
     transition: var(--van-popup-transition);
     -webkit-overflow-scrolling: touch;
 
@@ -29,7 +27,7 @@
       transform: translate3d(-50%, -50%, 0);
 
       &.van-popup--round {
-        border-radius: var(--van-popup-round-border-radius);
+        border-radius: var(--van-popup-round-radius);
       }
     }
 
@@ -39,8 +37,8 @@
       width: 100%;
 
       &.van-popup--round {
-        border-radius: 0 0 var(--van-popup-round-border-radius)
-          var(--van-popup-round-border-radius);
+        border-radius: 0 0 var(--van-popup-round-radius)
+          var(--van-popup-round-radius);
       }
     }
 
@@ -50,8 +48,8 @@
       transform: translate3d(0, -50%, 0);
 
       &.van-popup--round {
-        border-radius: var(--van-popup-round-border-radius) 0 0
-          var(--van-popup-round-border-radius);
+        border-radius: var(--van-popup-round-radius) 0 0
+          var(--van-popup-round-radius);
       }
     }
 
@@ -61,8 +59,8 @@
       width: 100%;
 
       &.van-popup--round {
-        border-radius: var(--van-popup-round-border-radius)
-          var(--van-popup-round-border-radius) 0 0;
+        border-radius: var(--van-popup-round-radius)
+          var(--van-popup-round-radius) 0 0;
       }
     }
 
@@ -72,8 +70,8 @@
       transform: translate3d(0, -50%, 0);
 
       &.van-popup--round {
-        border-radius: 0 var(--van-popup-round-border-radius)
-          var(--van-popup-round-border-radius) 0;
+        border-radius: 0 var(--van-popup-round-radius)
+          var(--van-popup-round-radius) 0;
       }
     }
 
@@ -81,14 +79,14 @@
     &-slide-left-enter-active,
     &-slide-right-enter-active,
     &-slide-bottom-enter-active {
-      transition-timing-function: var(--van-animation-timing-function-enter);
+      transition-timing-function: var(--van-ease-out);
     }
 
     &-slide-top-leave-active,
     &-slide-left-leave-active,
     &-slide-right-leave-active,
     &-slide-bottom-leave-active {
-      transition-timing-function: var(--van-animation-timing-function-leave);
+      transition-timing-function: var(--van-ease-in);
     }
 
     &-slide-top-enter-from,

package/lib/progress/index.css

@@ -1 +1 @@
-:root{--van-progress-height: 4px;--van-progress-color: var(--van-primary-color);--van-progress-inactive-color: var(--van-gray-5);--van-progress-background-color: var(--van-gray-3);--van-progress-pivot-padding: 0 5px;--van-progress-pivot-text-color: var(--van-white);--van-progress-pivot-font-size: var(--van-font-size-xs);--van-progress-pivot-line-height: 1.6;--van-progress-pivot-background-color: var(--van-primary-color)}.van-progress{position:relative;height:var(--van-progress-height);background:var(--van-progress-background-color);border-radius:var(--van-progress-height)}.van-progress__portion{position:absolute;left:0;width:100%;height:100%;background:var(--van-progress-color);border-radius:inherit;transform-origin:0;transition:all var(--van-animation-duration-base) var(--van-animation-timing-function-enter)}.van-progress__portion--inactive{background:var(--van-progress-inactive-color)}.van-progress__pivot{position:absolute;top:50%;box-sizing:border-box;min-width:3.6em;padding:var(--van-progress-pivot-padding);color:var(--van-progress-pivot-text-color);font-size:var(--van-progress-pivot-font-size);line-height:var(--van-progress-pivot-line-height);text-align:center;word-break:keep-all;background:var(--van-progress-pivot-background-color);border-radius:1em;transition:all var(--van-animation-duration-base) var(--van-animation-timing-function-enter)}.van-progress__pivot--inactive{background:var(--van-progress-inactive-color)}
+body{--van-progress-height: 4px;--van-progress-color: var(--van-primary-color);--van-progress-inactive-color: var(--van-gray-5);--van-progress-background: var(--van-gray-3);--van-progress-pivot-padding: 0 5px;--van-progress-pivot-text-color: var(--van-white);--van-progress-pivot-font-size: var(--van-font-size-xs);--van-progress-pivot-line-height: 1.6;--van-progress-pivot-background: var(--van-primary-color)}.van-progress{position:relative;height:var(--van-progress-height);background:var(--van-progress-background);border-radius:var(--van-progress-height)}.van-progress__portion{position:absolute;left:0;width:100%;height:100%;background:var(--van-progress-color);border-radius:inherit;transform-origin:0;transition:all var(--van-duration-base) var(--van-ease-out)}.van-progress__portion--inactive{background:var(--van-progress-inactive-color)}.van-progress__pivot{position:absolute;top:50%;box-sizing:border-box;min-width:3.6em;padding:var(--van-progress-pivot-padding);color:var(--van-progress-pivot-text-color);font-size:var(--van-progress-pivot-font-size);line-height:var(--van-progress-pivot-line-height);text-align:center;word-break:keep-all;background:var(--van-progress-pivot-background);border-radius:1em;transition:all var(--van-duration-base) var(--van-ease-out)}.van-progress__pivot--inactive{background:var(--van-progress-inactive-color)}

package/lib/progress/index.less

@@ -1,21 +1,19 @@
-@import './var.less';
-
-:root {
-  --van-progress-height: @progress-height;
-  --van-progress-color: @progress-color;
-  --van-progress-inactive-color: @progress-inactive-color;
-  --van-progress-background-color: @progress-background-color;
-  --van-progress-pivot-padding: @progress-pivot-padding;
-  --van-progress-pivot-text-color: @progress-pivot-text-color;
-  --van-progress-pivot-font-size: @progress-pivot-font-size;
-  --van-progress-pivot-line-height: @progress-pivot-line-height;
-  --van-progress-pivot-background-color: @progress-pivot-background-color;
+body {
+  --van-progress-height: 4px;
+  --van-progress-color: var(--van-primary-color);
+  --van-progress-inactive-color: var(--van-gray-5);
+  --van-progress-background: var(--van-gray-3);
+  --van-progress-pivot-padding: 0 5px;
+  --van-progress-pivot-text-color: var(--van-white);
+  --van-progress-pivot-font-size: var(--van-font-size-xs);
+  --van-progress-pivot-line-height: 1.6;
+  --van-progress-pivot-background: var(--van-primary-color);
 }
 
 .van-progress {
   position: relative;
   height: var(--van-progress-height);
-  background: var(--van-progress-background-color);
+  background: var(--van-progress-background);
   border-radius: var(--van-progress-height);
 
   &__portion {
@@ -26,8 +24,7 @@
     background: var(--van-progress-color);
     border-radius: inherit;
     transform-origin: 0;
-    transition: all var(--van-animation-duration-base)
-      var(--van-animation-timing-function-enter);
+    transition: all var(--van-duration-base) var(--van-ease-out);
 
     &--inactive {
       background: var(--van-progress-inactive-color);
@@ -45,10 +42,9 @@
     line-height: var(--van-progress-pivot-line-height);
     text-align: center;
     word-break: keep-all;
-    background: var(--van-progress-pivot-background-color);
+    background: var(--van-progress-pivot-background);
     border-radius: 1em;
-    transition: all var(--van-animation-duration-base)
-      var(--van-animation-timing-function-enter);
+    transition: all var(--van-duration-base) var(--van-ease-out);
 
     &--inactive {
       background: var(--van-progress-inactive-color);

package/lib/pull-refresh/index.css

@@ -1 +1 @@
-:root{--van-pull-refresh-head-height: 50px;--van-pull-refresh-head-font-size: var(--van-font-size-md);--van-pull-refresh-head-text-color: var(--van-text-color-2);--van-pull-refresh-loading-icon-size: 16px}.van-pull-refresh{overflow:hidden}.van-pull-refresh__track{position:relative;height:100%;transition-property:transform}.van-pull-refresh__head{position:absolute;left:0;width:100%;height:var(--van-pull-refresh-head-height);overflow:hidden;color:var(--van-pull-refresh-head-text-color);font-size:var(--van-pull-refresh-head-font-size);line-height:var(--van-pull-refresh-head-height);text-align:center;transform:translateY(-100%)}.van-pull-refresh__loading .van-loading__spinner{width:var(--van-pull-refresh-loading-icon-size);height:var(--van-pull-refresh-loading-icon-size)}
+body{--van-pull-refresh-head-height: 50px;--van-pull-refresh-head-font-size: var(--van-font-size-md);--van-pull-refresh-head-text-color: var(--van-text-color-2);--van-pull-refresh-loading-icon-size: 16px}.van-pull-refresh{overflow:hidden}.van-pull-refresh__track{position:relative;height:100%;transition-property:transform}.van-pull-refresh__head{position:absolute;left:0;width:100%;height:var(--van-pull-refresh-head-height);overflow:hidden;color:var(--van-pull-refresh-head-text-color);font-size:var(--van-pull-refresh-head-font-size);line-height:var(--van-pull-refresh-head-height);text-align:center;transform:translateY(-100%)}.van-pull-refresh__loading .van-loading__spinner{width:var(--van-pull-refresh-loading-icon-size);height:var(--van-pull-refresh-loading-icon-size)}

package/lib/pull-refresh/index.less

@@ -1,10 +1,8 @@
-@import './var.less';
-
-:root {
-  --van-pull-refresh-head-height: @pull-refresh-head-height;
-  --van-pull-refresh-head-font-size: @pull-refresh-head-font-size;
-  --van-pull-refresh-head-text-color: @pull-refresh-head-text-color;
-  --van-pull-refresh-loading-icon-size: @pull-refresh-loading-icon-size;
+body {
+  --van-pull-refresh-head-height: 50px;
+  --van-pull-refresh-head-font-size: var(--van-font-size-md);
+  --van-pull-refresh-head-text-color: var(--van-text-color-2);
+  --van-pull-refresh-loading-icon-size: 16px;
 }
 
 .van-pull-refresh {

package/lib/radio/index.css

@@ -1 +1 @@
-:root{--van-radio-size: 20px;--van-radio-border-color: var(--van-gray-5);--van-radio-transition-duration: var(--van-animation-duration-fast);--van-radio-label-margin: var(--van-padding-xs);--van-radio-label-color: var(--van-text-color);--van-radio-checked-icon-color: var(--van-primary-color);--van-radio-disabled-icon-color: var(--van-gray-5);--van-radio-disabled-label-color: var(--van-text-color-3);--van-radio-disabled-background-color: var(--van-border-color)}.van-radio{display:flex;align-items:center;overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none}.van-radio--disabled{cursor:not-allowed}.van-radio--label-disabled{cursor:default}.van-radio--horizontal{margin-right:var(--van-padding-sm)}.van-radio__icon{flex:none;height:1em;font-size:var(--van-radio-size);line-height:1em;cursor:pointer}.van-radio__icon .van-icon{display:block;box-sizing:border-box;width:1.25em;height:1.25em;color:transparent;font-size:.8em;line-height:1.25;text-align:center;border:1px solid var(--van-radio-border-color);transition-duration:var(--van-radio-transition-duration);transition-property:color,border-color,background-color}.van-radio__icon--round .van-icon{border-radius:100%}.van-radio__icon--checked .van-icon{color:var(--van-white);background-color:var(--van-radio-checked-icon-color);border-color:var(--van-radio-checked-icon-color)}.van-radio__icon--disabled{cursor:not-allowed}.van-radio__icon--disabled .van-icon{background-color:var(--van-radio-disabled-background-color);border-color:var(--van-radio-disabled-icon-color)}.van-radio__icon--disabled.van-radio__icon--checked .van-icon{color:var(--van-radio-disabled-icon-color)}.van-radio__label{margin-left:var(--van-radio-label-margin);color:var(--van-radio-label-color);line-height:var(--van-radio-size)}.van-radio__label--left{margin:0 var(--van-radio-label-margin) 0 0}.van-radio__label--disabled{color:var(--van-radio-disabled-label-color)}
+body{--van-radio-size: 20px;--van-radio-border-color: var(--van-gray-5);--van-radio-duration: var(--van-duration-fast);--van-radio-label-margin: var(--van-padding-xs);--van-radio-label-color: var(--van-text-color);--van-radio-checked-icon-color: var(--van-primary-color);--van-radio-disabled-icon-color: var(--van-gray-5);--van-radio-disabled-label-color: var(--van-text-color-3);--van-radio-disabled-background: var(--van-border-color)}.van-radio{display:flex;align-items:center;overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none}.van-radio--disabled{cursor:not-allowed}.van-radio--label-disabled{cursor:default}.van-radio--horizontal{margin-right:var(--van-padding-sm)}.van-radio__icon{flex:none;height:1em;font-size:var(--van-radio-size);line-height:1em;cursor:pointer}.van-radio__icon .van-icon{display:block;box-sizing:border-box;width:1.25em;height:1.25em;color:transparent;font-size:.8em;line-height:1.25;text-align:center;border:1px solid var(--van-radio-border-color);transition-duration:var(--van-radio-duration);transition-property:color,border-color,background-color}.van-radio__icon--round .van-icon{border-radius:100%}.van-radio__icon--checked .van-icon{color:var(--van-white);background-color:var(--van-radio-checked-icon-color);border-color:var(--van-radio-checked-icon-color)}.van-radio__icon--disabled{cursor:not-allowed}.van-radio__icon--disabled .van-icon{background-color:var(--van-radio-disabled-background);border-color:var(--van-radio-disabled-icon-color)}.van-radio__icon--disabled.van-radio__icon--checked .van-icon{color:var(--van-radio-disabled-icon-color)}.van-radio__label{margin-left:var(--van-radio-label-margin);color:var(--van-radio-label-color);line-height:var(--van-radio-size)}.van-radio__label--left{margin:0 var(--van-radio-label-margin) 0 0}.van-radio__label--disabled{color:var(--van-radio-disabled-label-color)}

package/lib/radio/index.less

@@ -1,15 +1,13 @@
-@import './var.less';
-
-:root {
-  --van-radio-size: @radio-size;
-  --van-radio-border-color: @radio-border-color;
-  --van-radio-transition-duration: @radio-transition-duration;
-  --van-radio-label-margin: @radio-label-margin;
-  --van-radio-label-color: @radio-label-color;
-  --van-radio-checked-icon-color: @radio-checked-icon-color;
-  --van-radio-disabled-icon-color: @radio-disabled-icon-color;
-  --van-radio-disabled-label-color: @radio-disabled-label-color;
-  --van-radio-disabled-background-color: @radio-disabled-background-color;
+body {
+  --van-radio-size: 20px;
+  --van-radio-border-color: var(--van-gray-5);
+  --van-radio-duration: var(--van-duration-fast);
+  --van-radio-label-margin: var(--van-padding-xs);
+  --van-radio-label-color: var(--van-text-color);
+  --van-radio-checked-icon-color: var(--van-primary-color);
+  --van-radio-disabled-icon-color: var(--van-gray-5);
+  --van-radio-disabled-label-color: var(--van-text-color-3);
+  --van-radio-disabled-background: var(--van-border-color);
 }
 
 .van-radio {
@@ -48,7 +46,7 @@
       line-height: 1.25;
       text-align: center;
       border: 1px solid var(--van-radio-border-color);
-      transition-duration: var(--van-radio-transition-duration);
+      transition-duration: var(--van-radio-duration);
       transition-property: color, border-color, background-color;
     }
 
@@ -70,7 +68,7 @@
       cursor: not-allowed;
 
       .van-icon {
-        background-color: var(--van-radio-disabled-background-color);
+        background-color: var(--van-radio-disabled-background);
         border-color: var(--van-radio-disabled-icon-color);
       }
     }

package/lib/rate/index.css

@@ -1 +1 @@
-:root{--van-rate-icon-size: 20px;--van-rate-icon-gutter: var(--van-padding-base);--van-rate-icon-void-color: var(--van-gray-5);--van-rate-icon-full-color: var(--van-danger-color);--van-rate-icon-disabled-color: var(--van-gray-5)}.van-rate{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap}.van-rate__item{position:relative}.van-rate__item:not(:last-child){padding-right:var(--van-rate-icon-gutter)}.van-rate__icon{display:block;width:1em;color:var(--van-rate-icon-void-color);font-size:var(--van-rate-icon-size)}.van-rate__icon--half{position:absolute;top:0;left:0;overflow:hidden}.van-rate__icon--full{color:var(--van-rate-icon-full-color)}.van-rate__icon--disabled{color:var(--van-rate-icon-disabled-color)}.van-rate--disabled{cursor:not-allowed}.van-rate--readonly{cursor:default}
+body{--van-rate-icon-size: 20px;--van-rate-icon-gutter: var(--van-padding-base);--van-rate-icon-void-color: var(--van-gray-5);--van-rate-icon-full-color: var(--van-danger-color);--van-rate-icon-disabled-color: var(--van-gray-5)}.van-rate{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap}.van-rate__item{position:relative}.van-rate__item:not(:last-child){padding-right:var(--van-rate-icon-gutter)}.van-rate__icon{display:block;width:1em;color:var(--van-rate-icon-void-color);font-size:var(--van-rate-icon-size)}.van-rate__icon--half{position:absolute;top:0;left:0;overflow:hidden}.van-rate__icon--full{color:var(--van-rate-icon-full-color)}.van-rate__icon--disabled{color:var(--van-rate-icon-disabled-color)}.van-rate--disabled{cursor:not-allowed}.van-rate--readonly{cursor:default}

package/lib/rate/index.less

@@ -1,11 +1,9 @@
-@import './var.less';
-
-:root {
-  --van-rate-icon-size: @rate-icon-size;
-  --van-rate-icon-gutter: @rate-icon-gutter;
-  --van-rate-icon-void-color: @rate-icon-void-color;
-  --van-rate-icon-full-color: @rate-icon-full-color;
-  --van-rate-icon-disabled-color: @rate-icon-disabled-color;
+body {
+  --van-rate-icon-size: 20px;
+  --van-rate-icon-gutter: var(--van-padding-base);
+  --van-rate-icon-void-color: var(--van-gray-5);
+  --van-rate-icon-full-color: var(--van-danger-color);
+  --van-rate-icon-disabled-color: var(--van-gray-5);
 }
 
 .van-rate {

package/lib/search/Search.d.ts

@@ -118,7 +118,7 @@ declare const _default: import("vue").DefineComponent<{
     actionText: StringConstructor;
     background: StringConstructor;
     showAction: BooleanConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("search" | "clear" | "focus" | "blur" | "click-input" | "click-left-icon" | "click-right-icon" | "update:modelValue" | "cancel")[], "search" | "clear" | "focus" | "blur" | "click-input" | "click-left-icon" | "click-right-icon" | "update:modelValue" | "cancel", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("search" | "clear" | "focus" | "blur" | "clickInput" | "clickLeftIcon" | "clickRightIcon" | "update:modelValue" | "cancel")[], "search" | "clear" | "focus" | "blur" | "clickInput" | "clickLeftIcon" | "clickRightIcon" | "update:modelValue" | "cancel", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     id: StringConstructor;
     name: StringConstructor;
     leftIcon: StringConstructor;
@@ -180,9 +180,9 @@ declare const _default: import("vue").DefineComponent<{
     onFocus?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
     onClear?: ((...args: any[]) => any) | undefined;
-    "onClick-input"?: ((...args: any[]) => any) | undefined;
-    "onClick-left-icon"?: ((...args: any[]) => any) | undefined;
-    "onClick-right-icon"?: ((...args: any[]) => any) | undefined;
+    onClickInput?: ((...args: any[]) => any) | undefined;
+    onClickLeftIcon?: ((...args: any[]) => any) | undefined;
+    onClickRightIcon?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
     onSearch?: ((...args: any[]) => any) | undefined;

package/lib/search/Search.js

@@ -44,7 +44,7 @@ const searchProps = (0, import_utils.extend)({}, import_Field.fieldSharedProps,
 var stdin_default = (0, import_vue2.defineComponent)({
   name,
   props: searchProps,
-  emits: ["blur", "focus", "clear", "search", "cancel", "click-input", "click-left-icon", "click-right-icon", "update:modelValue"],
+  emits: ["blur", "focus", "clear", "search", "cancel", "clickInput", "clickLeftIcon", "clickRightIcon", "update:modelValue"],
   setup(props, {
     emit,
     slots,
@@ -96,9 +96,9 @@ var stdin_default = (0, import_vue2.defineComponent)({
     const onBlur = (event) => emit("blur", event);
     const onFocus = (event) => emit("focus", event);
     const onClear = (event) => emit("clear", event);
-    const onClickInput = (event) => emit("click-input", event);
-    const onClickLeftIcon = (event) => emit("click-left-icon", event);
-    const onClickRightIcon = (event) => emit("click-right-icon", event);
+    const onClickInput = (event) => emit("clickInput", event);
+    const onClickLeftIcon = (event) => emit("clickLeftIcon", event);
+    const onClickRightIcon = (event) => emit("clickRightIcon", event);
     const fieldPropNames = Object.keys(import_Field.fieldSharedProps);
     const renderField = () => {
       const fieldAttrs = (0, import_utils.extend)({}, attrs, (0, import_utils.pick)(props, fieldPropNames), {
@@ -114,9 +114,9 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "onFocus": onFocus,
         "onClear": onClear,
         "onKeypress": onKeypress,
-        "onClick-input": onClickInput,
-        "onClick-left-icon": onClickLeftIcon,
-        "onClick-right-icon": onClickRightIcon,
+        "onClickInput": onClickInput,
+        "onClickLeftIcon": onClickLeftIcon,
+        "onClickRightIcon": onClickRightIcon,
         "onUpdate:modelValue": onInput
       }, fieldAttrs), (0, import_utils.pick)(slots, ["left-icon", "right-icon"]));
     };

package/lib/search/index.css

@@ -1 +1 @@
-:root{--van-search-padding: 10px var(--van-padding-sm);--van-search-background-color: var(--van-background-color-light);--van-search-content-background-color: var(--van-gray-1);--van-search-input-height: 34px;--van-search-label-padding: 0 5px;--van-search-label-color: var(--van-text-color);--van-search-label-font-size: var(--van-font-size-md);--van-search-left-icon-color: var(--van-gray-6);--van-search-action-padding: 0 var(--van-padding-xs);--van-search-action-text-color: var(--van-text-color);--van-search-action-font-size: var(--van-font-size-md)}.van-search{display:flex;align-items:center;box-sizing:border-box;padding:var(--van-search-padding);background:var(--van-search-background-color)}.van-search__content{display:flex;flex:1;padding-left:var(--van-padding-sm);background:var(--van-search-content-background-color);border-radius:var(--van-border-radius-sm)}.van-search__content--round{border-radius:var(--van-border-radius-max)}.van-search__label{padding:var(--van-search-label-padding);color:var(--van-search-label-color);font-size:var(--van-search-label-font-size);line-height:var(--van-search-input-height)}.van-search__field{flex:1;padding:5px var(--van-padding-xs) 5px 0;background-color:transparent}.van-search__field .van-field__left-icon{color:var(--van-search-left-icon-color)}.van-search--show-action{padding-right:0}.van-search input::-webkit-search-decoration,.van-search input::-webkit-search-cancel-button,.van-search input::-webkit-search-results-button,.van-search input::-webkit-search-results-decoration{display:none}.van-search__action{padding:var(--van-search-action-padding);color:var(--van-search-action-text-color);font-size:var(--van-search-action-font-size);line-height:var(--van-search-input-height);cursor:pointer;-webkit-user-select:none;user-select:none}.van-search__action:active{background-color:var(--van-active-color)}
+body{--van-search-padding: 10px var(--van-padding-sm);--van-search-background: var(--van-background-2);--van-search-content-background: var(--van-gray-1);--van-search-input-height: 34px;--van-search-label-padding: 0 5px;--van-search-label-color: var(--van-text-color);--van-search-label-font-size: var(--van-font-size-md);--van-search-left-icon-color: var(--van-gray-6);--van-search-action-padding: 0 var(--van-padding-xs);--van-search-action-text-color: var(--van-text-color);--van-search-action-font-size: var(--van-font-size-md)}.van-search{display:flex;align-items:center;box-sizing:border-box;padding:var(--van-search-padding);background:var(--van-search-background)}.van-search__content{display:flex;flex:1;padding-left:var(--van-padding-sm);background:var(--van-search-content-background);border-radius:var(--van-radius-sm)}.van-search__content--round{border-radius:var(--van-radius-max)}.van-search__label{padding:var(--van-search-label-padding);color:var(--van-search-label-color);font-size:var(--van-search-label-font-size);line-height:var(--van-search-input-height)}.van-search__field{flex:1;padding:5px var(--van-padding-xs) 5px 0;background-color:transparent}.van-search__field .van-field__left-icon{color:var(--van-search-left-icon-color)}.van-search--show-action{padding-right:0}.van-search input::-webkit-search-decoration,.van-search input::-webkit-search-cancel-button,.van-search input::-webkit-search-results-button,.van-search input::-webkit-search-results-decoration{display:none}.van-search__action{padding:var(--van-search-action-padding);color:var(--van-search-action-text-color);font-size:var(--van-search-action-font-size);line-height:var(--van-search-input-height);cursor:pointer;-webkit-user-select:none;user-select:none}.van-search__action:active{background-color:var(--van-active-color)}