vant 3.4.5 → 4.0.0-alpha.1

package/es/button/index.less

@@ -1,40 +1,42 @@
-@import './var.less';
-
-:root {
-  --van-button-mini-height: @button-mini-height;
-  --van-button-mini-padding: @button-mini-padding;
-  --van-button-mini-font-size: @button-mini-font-size;
-  --van-button-small-height: @button-small-height;
-  --van-button-small-padding: @button-small-padding;
-  --van-button-small-font-size: @button-small-font-size;
-  --van-button-normal-padding: @button-normal-padding;
-  --van-button-normal-font-size: @button-normal-font-size;
-  --van-button-large-height: @button-large-height;
-  --van-button-default-height: @button-default-height;
-  --van-button-default-line-height: @button-default-line-height;
-  --van-button-default-font-size: @button-default-font-size;
-  --van-button-default-color: @button-default-color;
-  --van-button-default-background-color: @button-default-background-color;
-  --van-button-default-border-color: @button-default-border-color;
-  --van-button-primary-color: @button-primary-color;
-  --van-button-primary-background-color: @button-primary-background-color;
-  --van-button-primary-border-color: @button-primary-border-color;
-  --van-button-success-color: @button-success-color;
-  --van-button-success-background-color: @button-success-background-color;
-  --van-button-success-border-color: @button-success-border-color;
-  --van-button-danger-color: @button-danger-color;
-  --van-button-danger-background-color: @button-danger-background-color;
-  --van-button-danger-border-color: @button-danger-border-color;
-  --van-button-warning-color: @button-warning-color;
-  --van-button-warning-background-color: @button-warning-background-color;
-  --van-button-warning-border-color: @button-warning-border-color;
-  --van-button-border-width: @button-border-width;
-  --van-button-border-radius: @button-border-radius;
-  --van-button-round-border-radius: @button-round-border-radius;
-  --van-button-plain-background-color: @button-plain-background-color;
-  --van-button-disabled-opacity: @button-disabled-opacity;
-  --van-button-icon-size: @button-icon-size;
-  --van-button-loading-icon-size: @button-loading-icon-size;
+body {
+  --van-button-mini-height: 24px;
+  --van-button-mini-padding: 0 var(--van-padding-base);
+  --van-button-mini-font-size: var(--van-font-size-xs);
+  --van-button-small-height: 32px;
+  --van-button-small-padding: 0 var(--van-padding-xs);
+  --van-button-small-font-size: var(--van-font-size-sm);
+  --van-button-normal-padding: 0 15px;
+  --van-button-normal-font-size: var(--van-font-size-md);
+  --van-button-large-height: 50px;
+  --van-button-default-height: 44px;
+  --van-button-default-line-height: 1.2;
+  --van-button-default-font-size: var(--van-font-size-lg);
+  --van-button-default-color: var(--van-text-color);
+  --van-button-default-background: var(--van-background-2);
+  --van-button-default-border-color: var(--van-gray-4);
+  --van-button-primary-color: var(--van-white);
+  --van-button-primary-background: var(--van-primary-color);
+  --van-button-primary-border-color: var(--van-primary-color);
+  --van-button-success-color: var(--van-white);
+  --van-button-success-background: var(--van-success-color);
+  --van-button-success-border-color: var(--van-success-color);
+  --van-button-danger-color: var(--van-white);
+  --van-button-danger-background: var(--van-danger-color);
+  --van-button-danger-border-color: var(--van-danger-color);
+  --van-button-warning-color: var(--van-white);
+  --van-button-warning-background: var(--van-warning-color);
+  --van-button-warning-border-color: var(--van-warning-color);
+  --van-button-border-width: var(--van-border-width);
+  --van-button-radius: var(--van-radius-md);
+  --van-button-round-radius: var(--van-radius-max);
+  --van-button-plain-background: var(--van-white);
+  --van-button-disabled-opacity: var(--van-disabled-opacity);
+  --van-button-icon-size: 1.2em;
+  --van-button-loading-icon-size: 20px;
+}
+
+.van-theme-dark {
+  --van-button-plain-background: transparent;
 }
 
 .van-button {
@@ -47,10 +49,11 @@
   font-size: var(--van-button-default-font-size);
   line-height: var(--van-button-default-line-height);
   text-align: center;
-  border-radius: var(--van-button-border-radius);
+  border-radius: var(--van-button-radius);
   cursor: pointer;
-  transition: opacity var(--van-animation-duration-fast);
+  transition: opacity var(--van-duration-fast);
   -webkit-appearance: none;
+  -webkit-font-smoothing: auto;
 
   &::before {
     position: absolute;
@@ -80,56 +83,56 @@
 
   &--default {
     color: var(--van-button-default-color);
-    background: var(--van-button-default-background-color);
+    background: var(--van-button-default-background);
     border: var(--van-button-border-width) solid
       var(--van-button-default-border-color);
   }
 
   &--primary {
     color: var(--van-button-primary-color);
-    background: var(--van-button-primary-background-color);
+    background: var(--van-button-primary-background);
     border: var(--van-button-border-width) solid
       var(--van-button-primary-border-color);
   }
 
   &--success {
     color: var(--van-button-success-color);
-    background: var(--van-button-success-background-color);
+    background: var(--van-button-success-background);
     border: var(--van-button-border-width) solid
       var(--van-button-success-border-color);
   }
 
   &--danger {
     color: var(--van-button-danger-color);
-    background: var(--van-button-danger-background-color);
+    background: var(--van-button-danger-background);
     border: var(--van-button-border-width) solid
       var(--van-button-danger-border-color);
   }
 
   &--warning {
     color: var(--van-button-warning-color);
-    background: var(--van-button-warning-background-color);
+    background: var(--van-button-warning-background);
     border: var(--van-button-border-width) solid
       var(--van-button-warning-border-color);
   }
 
   &--plain {
-    background: var(--van-button-plain-background-color);
+    background: var(--van-button-plain-background);
 
     &.van-button--primary {
-      color: var(--van-button-primary-background-color);
+      color: var(--van-button-primary-background);
     }
 
     &.van-button--success {
-      color: var(--van-button-success-background-color);
+      color: var(--van-button-success-background);
     }
 
     &.van-button--danger {
-      color: var(--van-button-danger-background-color);
+      color: var(--van-button-danger-background);
     }
 
     &.van-button--warning {
-      color: var(--van-button-warning-background-color);
+      color: var(--van-button-warning-background);
     }
   }
 
@@ -185,7 +188,7 @@
   }
 
   &--round {
-    border-radius: var(--van-button-round-border-radius);
+    border-radius: var(--van-button-round-radius);
   }
 
   &--square {
@@ -224,11 +227,11 @@
 
     &::after {
       border-color: inherit;
-      border-radius: calc(var(--van-button-border-radius) * 2);
+      border-radius: calc(var(--van-button-radius) * 2);
     }
 
     &.van-button--round::after {
-      border-radius: var(--van-button-round-border-radius);
+      border-radius: var(--van-button-round-radius);
     }
 
     &.van-button--square::after {

package/es/calendar/Calendar.d.ts

@@ -66,6 +66,7 @@ declare const calendarProps: {
         type: BooleanConstructor;
         default: true;
     };
+    safeAreaInsetTop: BooleanConstructor;
     safeAreaInsetBottom: {
         type: BooleanConstructor;
         default: true;
@@ -152,6 +153,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
+    safeAreaInsetTop: BooleanConstructor;
     safeAreaInsetBottom: {
         type: BooleanConstructor;
         default: true;
@@ -171,7 +173,7 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
         validator: (val: number) => boolean;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "update:show" | "confirm" | "click-subtitle" | "unselect" | "month-show" | "over-range")[], "select" | "update:show" | "confirm" | "click-subtitle" | "unselect" | "month-show" | "over-range", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "update:show" | "confirm" | "clickSubtitle" | "unselect" | "monthShow" | "overRange")[], "select" | "update:show" | "confirm" | "clickSubtitle" | "unselect" | "monthShow" | "overRange", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     show: BooleanConstructor;
     type: {
         type: PropType<CalendarType>;
@@ -236,6 +238,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
+    safeAreaInsetTop: BooleanConstructor;
     safeAreaInsetBottom: {
         type: BooleanConstructor;
         default: true;
@@ -259,10 +262,10 @@ declare const _default: import("vue").DefineComponent<{
     onSelect?: ((...args: any[]) => any) | undefined;
     "onUpdate:show"?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
-    "onClick-subtitle"?: ((...args: any[]) => any) | undefined;
+    onClickSubtitle?: ((...args: any[]) => any) | undefined;
     onUnselect?: ((...args: any[]) => any) | undefined;
-    "onMonth-show"?: ((...args: any[]) => any) | undefined;
-    "onOver-range"?: ((...args: any[]) => any) | undefined;
+    onMonthShow?: ((...args: any[]) => any) | undefined;
+    onOverRange?: ((...args: any[]) => any) | undefined;
 }, {
     type: CalendarType;
     position: PopupPosition;
@@ -273,8 +276,7 @@ declare const _default: import("vue").DefineComponent<{
     lazyRender: boolean;
     closeOnClickOverlay: boolean;
     closeOnPopstate: boolean;
-    minDate: Date;
-    maxDate: Date;
+    safeAreaInsetTop: boolean;
     poppable: boolean;
     maxRange: string | number;
     showMark: boolean;
@@ -283,6 +285,8 @@ declare const _default: import("vue").DefineComponent<{
     allowSameDay: boolean;
     showSubtitle: boolean;
     showRangePrompt: boolean;
+    minDate: Date;
+    maxDate: Date;
     firstDayOfWeek: string | number;
 }>;
 export default _default;

package/es/calendar/Calendar.js

@@ -36,6 +36,7 @@ const calendarProps = {
   showRangePrompt: truthProp,
   confirmDisabledText: String,
   closeOnClickOverlay: truthProp,
+  safeAreaInsetTop: Boolean,
   safeAreaInsetBottom: truthProp,
   minDate: {
     type: Date,
@@ -59,7 +60,7 @@ const calendarProps = {
 var stdin_default = defineComponent({
   name,
   props: calendarProps,
-  emits: ["select", "confirm", "unselect", "month-show", "over-range", "update:show", "click-subtitle"],
+  emits: ["select", "confirm", "unselect", "monthShow", "overRange", "update:show", "clickSubtitle"],
   setup(props, {
     emit,
     slots
@@ -151,7 +152,7 @@ var stdin_default = defineComponent({
           }
           if (!monthRefs.value[i].showed) {
             monthRefs.value[i].showed = true;
-            emit("month-show", {
+            emit("monthShow", {
               date: month.date,
               title: month.getTitle()
             });
@@ -215,7 +216,7 @@ var stdin_default = defineComponent({
         if (showRangePrompt) {
           Toast(rangePrompt || t("rangePrompt", maxRange));
         }
-        emit("over-range");
+        emit("overRange");
         return false;
       }
       return true;
@@ -331,7 +332,7 @@ var stdin_default = defineComponent({
         return _createVNode(Button, {
           "round": true,
           "block": true,
-          "type": "danger",
+          "type": "primary",
           "color": props.color,
           "class": bem("confirm"),
           "disabled": disabled,
@@ -357,7 +358,7 @@ var stdin_default = defineComponent({
       "showTitle": props.showTitle,
       "showSubtitle": props.showSubtitle,
       "firstDayOfWeek": dayOffset.value,
-      "onClick-subtitle": (event) => emit("click-subtitle", event)
+      "onClickSubtitle": (event) => emit("clickSubtitle", event)
     }, pick(slots, ["title", "subtitle"])), _createVNode("div", {
       "ref": bodyRef,
       "class": bem("body"),
@@ -384,6 +385,7 @@ var stdin_default = defineComponent({
           "closeable": props.showTitle || props.showSubtitle,
           "teleport": props.teleport,
           "closeOnPopstate": props.closeOnPopstate,
+          "safeAreaInsetTop": props.safeAreaInsetTop,
           "closeOnClickOverlay": props.closeOnClickOverlay,
           "onUpdate:show": updateShow
         }, {

package/es/calendar/CalendarHeader.d.ts

@@ -4,14 +4,14 @@ declare const _default: import("vue").DefineComponent<{
     showTitle: BooleanConstructor;
     showSubtitle: BooleanConstructor;
     firstDayOfWeek: NumberConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click-subtitle"[], "click-subtitle", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "clickSubtitle"[], "clickSubtitle", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     title: StringConstructor;
     subtitle: StringConstructor;
     showTitle: BooleanConstructor;
     showSubtitle: BooleanConstructor;
     firstDayOfWeek: NumberConstructor;
 }>> & {
-    "onClick-subtitle"?: ((...args: any[]) => any) | undefined;
+    onClickSubtitle?: ((...args: any[]) => any) | undefined;
 }, {
     showTitle: boolean;
     showSubtitle: boolean;

package/es/calendar/CalendarHeader.js

@@ -12,7 +12,7 @@ var stdin_default = defineComponent({
     showSubtitle: Boolean,
     firstDayOfWeek: Number
   },
-  emits: ["click-subtitle"],
+  emits: ["clickSubtitle"],
   setup(props, {
     slots,
     emit
@@ -26,7 +26,7 @@ var stdin_default = defineComponent({
         }, [title]);
       }
     };
-    const onClickSubtitle = (event) => emit("click-subtitle", event);
+    const onClickSubtitle = (event) => emit("clickSubtitle", event);
     const renderSubtitle = () => {
       if (props.showSubtitle) {
         const title = slots.subtitle ? slots.subtitle() : props.subtitle;

package/es/calendar/CalendarMonth.d.ts

@@ -50,7 +50,7 @@ declare const _default: import("vue").DefineComponent<{
     showSubtitle: BooleanConstructor;
     showMonthTitle: BooleanConstructor;
     firstDayOfWeek: NumberConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "update-height")[], "click" | "update-height", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     date: {
         type: DateConstructor;
         required: true;
@@ -76,7 +76,6 @@ declare const _default: import("vue").DefineComponent<{
     firstDayOfWeek: NumberConstructor;
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
-    "onUpdate-height"?: ((...args: any[]) => any) | undefined;
 }, {
     lazyRender: boolean;
     showMark: boolean;

package/es/calendar/CalendarMonth.js

@@ -1,7 +1,7 @@
 import { createVNode as _createVNode } from "vue";
 import { ref, computed, defineComponent } from "vue";
 import { pick, addUnit, numericProp, setScrollTop, createNamespace, makeRequiredProp } from "../utils";
-import { getMonthEndDay } from "../datetime-picker/utils";
+import { getMonthEndDay } from "../date-picker/utils";
 import { t, bem, compareDay, getPrevDay, getNextDay, formatMonthTitle } from "./utils";
 import { useRect, useToggle } from "@vant/use";
 import { useExpose } from "../composables/use-expose";
@@ -27,7 +27,7 @@ const calendarMonthProps = {
 var stdin_default = defineComponent({
   name,
   props: calendarMonthProps,
-  emits: ["click", "update-height"],
+  emits: ["click"],
   setup(props, {
     emit,
     slots

package/es/calendar/index.css

@@ -1 +1 @@
-:root{--van-calendar-background-color: var(--van-background-color-light);--van-calendar-popup-height: 80%;--van-calendar-header-box-shadow: 0 2px 10px rgba(125, 126, 128, .16);--van-calendar-header-title-height: 44px;--van-calendar-header-title-font-size: var(--van-font-size-lg);--van-calendar-header-subtitle-font-size: var(--van-font-size-md);--van-calendar-weekdays-height: 30px;--van-calendar-weekdays-font-size: var(--van-font-size-sm);--van-calendar-month-title-font-size: var(--van-font-size-md);--van-calendar-month-mark-color: rgba(242, 243, 245, .8);--van-calendar-month-mark-font-size: 160px;--van-calendar-day-height: 64px;--van-calendar-day-font-size: var(--van-font-size-lg);--van-calendar-range-edge-color: var(--van-white);--van-calendar-range-edge-background-color: var(--van-danger-color);--van-calendar-range-middle-color: var(--van-danger-color);--van-calendar-range-middle-background-opacity: .1;--van-calendar-selected-day-size: 54px;--van-calendar-selected-day-color: var(--van-white);--van-calendar-info-font-size: var(--van-font-size-xs);--van-calendar-info-line-height: var(--van-line-height-xs);--van-calendar-selected-day-background-color: var(--van-danger-color);--van-calendar-day-disabled-color: var(--van-text-color-3);--van-calendar-confirm-button-height: 36px;--van-calendar-confirm-button-margin: 7px 0}.van-calendar{display:flex;flex-direction:column;height:100%;background:var(--van-calendar-background-color)}.van-calendar__popup.van-popup--top,.van-calendar__popup.van-popup--bottom{height:var(--van-calendar-popup-height)}.van-calendar__popup.van-popup--left,.van-calendar__popup.van-popup--right{height:100%}.van-calendar__popup .van-popup__close-icon{top:11px}.van-calendar__header{flex-shrink:0;box-shadow:var(--van-calendar-header-box-shadow)}.van-calendar__month-title,.van-calendar__header-title,.van-calendar__header-subtitle{height:var(--van-calendar-header-title-height);font-weight:var(--van-font-weight-bold);line-height:var(--van-calendar-header-title-height);text-align:center}.van-calendar__header-title{font-size:var(--van-calendar-header-title-font-size)}.van-calendar__header-subtitle{font-size:var(--van-calendar-header-subtitle-font-size)}.van-calendar__month-title{font-size:var(--van-calendar-month-title-font-size)}.van-calendar__weekdays{display:flex}.van-calendar__weekday{flex:1;font-size:var(--van-calendar-weekdays-font-size);line-height:var(--van-calendar-weekdays-height);text-align:center}.van-calendar__body{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}.van-calendar__days{position:relative;display:flex;flex-wrap:wrap;-webkit-user-select:none;user-select:none}.van-calendar__month-mark{position:absolute;top:50%;left:50%;z-index:0;color:var(--van-calendar-month-mark-color);font-size:var(--van-calendar-month-mark-font-size);transform:translate(-50%,-50%);pointer-events:none}.van-calendar__day,.van-calendar__selected-day{display:flex;align-items:center;justify-content:center;text-align:center}.van-calendar__day{position:relative;width:14.285%;height:var(--van-calendar-day-height);font-size:var(--van-calendar-day-font-size);cursor:pointer}.van-calendar__day--end,.van-calendar__day--start,.van-calendar__day--start-end,.van-calendar__day--multiple-middle,.van-calendar__day--multiple-selected{color:var(--van-calendar-range-edge-color);background:var(--van-calendar-range-edge-background-color)}.van-calendar__day--start{border-radius:var(--van-border-radius-md) 0 0 var(--van-border-radius-md)}.van-calendar__day--end{border-radius:0 var(--van-border-radius-md) var(--van-border-radius-md) 0}.van-calendar__day--start-end,.van-calendar__day--multiple-selected{border-radius:var(--van-border-radius-md)}.van-calendar__day--middle{color:var(--van-calendar-range-middle-color)}.van-calendar__day--middle:after{position:absolute;top:0;right:0;bottom:0;left:0;background-color:currentColor;opacity:var(--van-calendar-range-middle-background-opacity);content:""}.van-calendar__day--disabled{color:var(--van-calendar-day-disabled-color);cursor:default}.van-calendar__top-info,.van-calendar__bottom-info{position:absolute;right:0;left:0;font-size:var(--van-calendar-info-font-size);line-height:var(--van-calendar-info-line-height)}@media (max-width: 350px){.van-calendar__top-info,.van-calendar__bottom-info{font-size:9px}}.van-calendar__top-info{top:6px}.van-calendar__bottom-info{bottom:6px}.van-calendar__selected-day{width:var(--van-calendar-selected-day-size);height:var(--van-calendar-selected-day-size);color:var(--van-calendar-selected-day-color);background:var(--van-calendar-selected-day-background-color);border-radius:var(--van-border-radius-md)}.van-calendar__footer{flex-shrink:0;padding-left:var(--van-padding-md);padding-right:var(--van-padding-md)}.van-calendar__confirm{height:var(--van-calendar-confirm-button-height);margin:var(--van-calendar-confirm-button-margin)}
+body{--van-calendar-background: var(--van-background-2);--van-calendar-popup-height: 80%;--van-calendar-header-shadow: 0 2px 10px rgba(125, 126, 128, .16);--van-calendar-header-title-height: 44px;--van-calendar-header-title-font-size: var(--van-font-size-lg);--van-calendar-header-subtitle-font-size: var(--van-font-size-md);--van-calendar-weekdays-height: 30px;--van-calendar-weekdays-font-size: var(--van-font-size-sm);--van-calendar-month-title-font-size: var(--van-font-size-md);--van-calendar-month-mark-color: rgba(242, 243, 245, .8);--van-calendar-month-mark-font-size: 160px;--van-calendar-day-height: 64px;--van-calendar-day-font-size: var(--van-font-size-lg);--van-calendar-range-edge-color: var(--van-white);--van-calendar-range-edge-background: var(--van-primary-color);--van-calendar-range-middle-color: var(--van-primary-color);--van-calendar-range-middle-background-opacity: .1;--van-calendar-selected-day-size: 54px;--van-calendar-selected-day-color: var(--van-white);--van-calendar-info-font-size: var(--van-font-size-xs);--van-calendar-info-line-height: var(--van-line-height-xs);--van-calendar-selected-day-background: var(--van-primary-color);--van-calendar-day-disabled-color: var(--van-text-color-3);--van-calendar-confirm-button-height: 36px;--van-calendar-confirm-button-margin: 7px 0}.van-theme-dark{--van-calendar-month-mark-color: rgba(100, 101, 102, .2);--van-calendar-day-disabled-color: var(--van-gray-7)}.van-calendar{display:flex;flex-direction:column;height:100%;background:var(--van-calendar-background)}.van-calendar__popup.van-popup--top,.van-calendar__popup.van-popup--bottom{height:var(--van-calendar-popup-height)}.van-calendar__popup.van-popup--left,.van-calendar__popup.van-popup--right{height:100%}.van-calendar__popup .van-popup__close-icon{top:11px}.van-calendar__header{flex-shrink:0;box-shadow:var(--van-calendar-header-shadow)}.van-calendar__month-title,.van-calendar__header-title,.van-calendar__header-subtitle{color:var(--van-text-color);height:var(--van-calendar-header-title-height);font-weight:var(--van-font-bold);line-height:var(--van-calendar-header-title-height);text-align:center}.van-calendar__header-title{font-size:var(--van-calendar-header-title-font-size)}.van-calendar__header-subtitle{font-size:var(--van-calendar-header-subtitle-font-size)}.van-calendar__month-title{font-size:var(--van-calendar-month-title-font-size)}.van-calendar__weekdays{display:flex}.van-calendar__weekday{flex:1;font-size:var(--van-calendar-weekdays-font-size);line-height:var(--van-calendar-weekdays-height);text-align:center}.van-calendar__body{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}.van-calendar__days{position:relative;display:flex;flex-wrap:wrap;-webkit-user-select:none;user-select:none}.van-calendar__month-mark{position:absolute;top:50%;left:50%;z-index:0;color:var(--van-calendar-month-mark-color);font-size:var(--van-calendar-month-mark-font-size);transform:translate(-50%,-50%);pointer-events:none}.van-calendar__day,.van-calendar__selected-day{display:flex;align-items:center;justify-content:center;text-align:center}.van-calendar__day{position:relative;width:14.285%;height:var(--van-calendar-day-height);font-size:var(--van-calendar-day-font-size);cursor:pointer}.van-calendar__day--end,.van-calendar__day--start,.van-calendar__day--start-end,.van-calendar__day--multiple-middle,.van-calendar__day--multiple-selected{color:var(--van-calendar-range-edge-color);background:var(--van-calendar-range-edge-background)}.van-calendar__day--start{border-radius:var(--van-radius-md) 0 0 var(--van-radius-md)}.van-calendar__day--end{border-radius:0 var(--van-radius-md) var(--van-radius-md) 0}.van-calendar__day--start-end,.van-calendar__day--multiple-selected{border-radius:var(--van-radius-md)}.van-calendar__day--middle{color:var(--van-calendar-range-middle-color)}.van-calendar__day--middle:after{position:absolute;top:0;right:0;bottom:0;left:0;background-color:currentColor;opacity:var(--van-calendar-range-middle-background-opacity);content:""}.van-calendar__day--disabled{color:var(--van-calendar-day-disabled-color);cursor:default}.van-calendar__top-info,.van-calendar__bottom-info{position:absolute;right:0;left:0;font-size:var(--van-calendar-info-font-size);line-height:var(--van-calendar-info-line-height)}@media (max-width: 350px){.van-calendar__top-info,.van-calendar__bottom-info{font-size:9px}}.van-calendar__top-info{top:6px}.van-calendar__bottom-info{bottom:6px}.van-calendar__selected-day{width:var(--van-calendar-selected-day-size);height:var(--van-calendar-selected-day-size);color:var(--van-calendar-selected-day-color);background:var(--van-calendar-selected-day-background);border-radius:var(--van-radius-md)}.van-calendar__footer{flex-shrink:0;padding-left:var(--van-padding-md);padding-right:var(--van-padding-md)}.van-calendar__confirm{height:var(--van-calendar-confirm-button-height);margin:var(--van-calendar-confirm-button-margin)}

package/es/calendar/index.d.ts

@@ -63,6 +63,7 @@ export declare const Calendar: import("../utils").WithInstall<import("vue").Defi
         type: BooleanConstructor;
         default: true;
     };
+    safeAreaInsetTop: BooleanConstructor;
     safeAreaInsetBottom: {
         type: BooleanConstructor;
         default: true;
@@ -82,7 +83,7 @@ export declare const Calendar: import("../utils").WithInstall<import("vue").Defi
         default: number;
         validator: (val: number) => boolean;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "update:show" | "confirm" | "click-subtitle" | "unselect" | "month-show" | "over-range")[], "select" | "update:show" | "confirm" | "click-subtitle" | "unselect" | "month-show" | "over-range", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "update:show" | "confirm" | "clickSubtitle" | "unselect" | "monthShow" | "overRange")[], "select" | "update:show" | "confirm" | "clickSubtitle" | "unselect" | "monthShow" | "overRange", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     show: BooleanConstructor;
     type: {
         type: import("vue").PropType<import("./types").CalendarType>;
@@ -147,6 +148,7 @@ export declare const Calendar: import("../utils").WithInstall<import("vue").Defi
         type: BooleanConstructor;
         default: true;
     };
+    safeAreaInsetTop: BooleanConstructor;
     safeAreaInsetBottom: {
         type: BooleanConstructor;
         default: true;
@@ -170,10 +172,10 @@ export declare const Calendar: import("../utils").WithInstall<import("vue").Defi
     onSelect?: ((...args: any[]) => any) | undefined;
     "onUpdate:show"?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
-    "onClick-subtitle"?: ((...args: any[]) => any) | undefined;
+    onClickSubtitle?: ((...args: any[]) => any) | undefined;
     onUnselect?: ((...args: any[]) => any) | undefined;
-    "onMonth-show"?: ((...args: any[]) => any) | undefined;
-    "onOver-range"?: ((...args: any[]) => any) | undefined;
+    onMonthShow?: ((...args: any[]) => any) | undefined;
+    onOverRange?: ((...args: any[]) => any) | undefined;
 }, {
     type: import("./types").CalendarType;
     position: import("..").PopupPosition;
@@ -184,8 +186,7 @@ export declare const Calendar: import("../utils").WithInstall<import("vue").Defi
     lazyRender: boolean;
     closeOnClickOverlay: boolean;
     closeOnPopstate: boolean;
-    minDate: Date;
-    maxDate: Date;
+    safeAreaInsetTop: boolean;
     poppable: boolean;
     maxRange: string | number;
     showMark: boolean;
@@ -194,6 +195,8 @@ export declare const Calendar: import("../utils").WithInstall<import("vue").Defi
     allowSameDay: boolean;
     showSubtitle: boolean;
     showRangePrompt: boolean;
+    minDate: Date;
+    maxDate: Date;
     firstDayOfWeek: string | number;
 }>>;
 export default Calendar;

package/es/calendar/index.less

@@ -1,38 +1,41 @@
-@import './var.less';
-
-:root {
-  --van-calendar-background-color: @calendar-background-color;
-  --van-calendar-popup-height: @calendar-popup-height;
-  --van-calendar-header-box-shadow: @calendar-header-box-shadow;
-  --van-calendar-header-title-height: @calendar-header-title-height;
-  --van-calendar-header-title-font-size: @calendar-header-title-font-size;
-  --van-calendar-header-subtitle-font-size: @calendar-header-subtitle-font-size;
-  --van-calendar-weekdays-height: @calendar-weekdays-height;
-  --van-calendar-weekdays-font-size: @calendar-weekdays-font-size;
-  --van-calendar-month-title-font-size: @calendar-month-title-font-size;
-  --van-calendar-month-mark-color: @calendar-month-mark-color;
-  --van-calendar-month-mark-font-size: @calendar-month-mark-font-size;
-  --van-calendar-day-height: @calendar-day-height;
-  --van-calendar-day-font-size: @calendar-day-font-size;
-  --van-calendar-range-edge-color: @calendar-range-edge-color;
-  --van-calendar-range-edge-background-color: @calendar-range-edge-background-color;
-  --van-calendar-range-middle-color: @calendar-range-middle-color;
-  --van-calendar-range-middle-background-opacity: @calendar-range-middle-background-opacity;
-  --van-calendar-selected-day-size: @calendar-selected-day-size;
-  --van-calendar-selected-day-color: @calendar-selected-day-color;
-  --van-calendar-info-font-size: @calendar-info-font-size;
-  --van-calendar-info-line-height: @calendar-info-line-height;
-  --van-calendar-selected-day-background-color: @calendar-selected-day-background-color;
-  --van-calendar-day-disabled-color: @calendar-day-disabled-color;
-  --van-calendar-confirm-button-height: @calendar-confirm-button-height;
-  --van-calendar-confirm-button-margin: @calendar-confirm-button-margin;
+body {
+  --van-calendar-background: var(--van-background-2);
+  --van-calendar-popup-height: 80%;
+  --van-calendar-header-shadow: 0 2px 10px rgba(125, 126, 128, 0.16);
+  --van-calendar-header-title-height: 44px;
+  --van-calendar-header-title-font-size: var(--van-font-size-lg);
+  --van-calendar-header-subtitle-font-size: var(--van-font-size-md);
+  --van-calendar-weekdays-height: 30px;
+  --van-calendar-weekdays-font-size: var(--van-font-size-sm);
+  --van-calendar-month-title-font-size: var(--van-font-size-md);
+  --van-calendar-month-mark-color: rgba(242, 243, 245, 0.8);
+  --van-calendar-month-mark-font-size: 160px;
+  --van-calendar-day-height: 64px;
+  --van-calendar-day-font-size: var(--van-font-size-lg);
+  --van-calendar-range-edge-color: var(--van-white);
+  --van-calendar-range-edge-background: var(--van-primary-color);
+  --van-calendar-range-middle-color: var(--van-primary-color);
+  --van-calendar-range-middle-background-opacity: 0.1;
+  --van-calendar-selected-day-size: 54px;
+  --van-calendar-selected-day-color: var(--van-white);
+  --van-calendar-info-font-size: var(--van-font-size-xs);
+  --van-calendar-info-line-height: var(--van-line-height-xs);
+  --van-calendar-selected-day-background: var(--van-primary-color);
+  --van-calendar-day-disabled-color: var(--van-text-color-3);
+  --van-calendar-confirm-button-height: 36px;
+  --van-calendar-confirm-button-margin: 7px 0;
+}
+
+.van-theme-dark {
+  --van-calendar-month-mark-color: rgba(100, 101, 102, 0.2);
+  --van-calendar-day-disabled-color: var(--van-gray-7);
 }
 
 .van-calendar {
   display: flex;
   flex-direction: column;
   height: 100%;
-  background: var(--van-calendar-background-color);
+  background: var(--van-calendar-background);
 
   &__popup {
     &.van-popup--top,
@@ -52,14 +55,15 @@
 
   &__header {
     flex-shrink: 0;
-    box-shadow: var(--van-calendar-header-box-shadow);
+    box-shadow: var(--van-calendar-header-shadow);
   }
 
   &__month-title,
   &__header-title,
   &__header-subtitle {
+    color: var(--van-text-color);
     height: var(--van-calendar-header-title-height);
-    font-weight: var(--van-font-weight-bold);
+    font-weight: var(--van-font-bold);
     line-height: var(--van-calendar-header-title-height);
     text-align: center;
   }
@@ -132,20 +136,20 @@
     &--multiple-middle,
     &--multiple-selected {
       color: var(--van-calendar-range-edge-color);
-      background: var(--van-calendar-range-edge-background-color);
+      background: var(--van-calendar-range-edge-background);
     }
 
     &--start {
-      border-radius: var(--van-border-radius-md) 0 0 var(--van-border-radius-md);
+      border-radius: var(--van-radius-md) 0 0 var(--van-radius-md);
     }
 
     &--end {
-      border-radius: 0 var(--van-border-radius-md) var(--van-border-radius-md) 0;
+      border-radius: 0 var(--van-radius-md) var(--van-radius-md) 0;
     }
 
     &--start-end,
     &--multiple-selected {
-      border-radius: var(--van-border-radius-md);
+      border-radius: var(--van-radius-md);
     }
 
     &--middle {
@@ -194,8 +198,8 @@
     width: var(--van-calendar-selected-day-size);
     height: var(--van-calendar-selected-day-size);
     color: var(--van-calendar-selected-day-color);
-    background: var(--van-calendar-selected-day-background-color);
-    border-radius: var(--van-border-radius-md);
+    background: var(--van-calendar-selected-day-background);
+    border-radius: var(--van-radius-md);
   }
 
   &__footer {

package/es/card/Card.d.ts

@@ -31,7 +31,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     thumbLink: StringConstructor;
     originPrice: (NumberConstructor | StringConstructor)[];
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click-thumb"[], "click-thumb", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "clickThumb"[], "clickThumb", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     tag: StringConstructor;
     num: (NumberConstructor | StringConstructor)[];
     desc: StringConstructor;
@@ -47,7 +47,7 @@ declare const _default: import("vue").DefineComponent<{
     thumbLink: StringConstructor;
     originPrice: (NumberConstructor | StringConstructor)[];
 }>> & {
-    "onClick-thumb"?: ((...args: any[]) => any) | undefined;
+    onClickThumb?: ((...args: any[]) => any) | undefined;
 }, {
     lazyLoad: boolean;
     centered: boolean;

package/es/card/Card.js

@@ -20,7 +20,7 @@ const cardProps = {
 var stdin_default = defineComponent({
   name,
   props: cardProps,
-  emits: ["click-thumb"],
+  emits: ["clickThumb"],
   setup(props, {
     slots,
     emit
@@ -41,7 +41,7 @@ var stdin_default = defineComponent({
           "class": bem("tag")
         }, [slots.tag ? slots.tag() : _createVNode(Tag, {
           "mark": true,
-          "type": "danger"
+          "type": "primary"
         }, {
           default: () => [props.tag]
         })]);
@@ -64,7 +64,7 @@ var stdin_default = defineComponent({
         return _createVNode("a", {
           "href": props.thumbLink,
           "class": bem("thumb"),
-          "onClick": (event) => emit("click-thumb", event)
+          "onClick": (event) => emit("clickThumb", event)
         }, [renderThumbImage(), renderThumbTag()]);
       }
     };