vant 3.2.5 → 3.3.0

package/es/utils/format.js

@@ -1,11 +1,12 @@
 import { inBrowser } from './basic';
+import { windowWidth, windowHeight } from './dom';
 import { isDef, isNumeric } from './validate';
 export function addUnit(value) {
-  if (!isDef(value)) {
-    return undefined;
+  if (isDef(value)) {
+    return isNumeric(value) ? value + "px" : String(value);
   }
 
-  return isNumeric(value) ? value + "px" : String(value);
+  return undefined;
 }
 export function getSizeStyle(originSize) {
   if (isDef(originSize)) {
@@ -45,12 +46,12 @@ function convertRem(value) {
 
 function convertVw(value) {
   value = value.replace(/vw/g, '');
-  return +value * window.innerWidth / 100;
+  return +value * windowWidth.value / 100;
 }
 
 function convertVh(value) {
   value = value.replace(/vh/g, '');
-  return +value * window.innerHeight / 100;
+  return +value * windowHeight.value / 100;
 }
 
 export function unitToPx(value) {
@@ -77,7 +78,11 @@ export function unitToPx(value) {
 var camelizeRE = /-(\w)/g;
 export var camelize = str => str.replace(camelizeRE, (_, c) => c.toUpperCase());
 export var kebabCase = str => str.replace(/([A-Z])/g, '-$1').toLowerCase().replace(/^-/, '');
-export function padZero(num, targetLength = 2) {
+export function padZero(num, targetLength) {
+  if (targetLength === void 0) {
+    targetLength = 2;
+  }
+
   var str = num + '';
 
   while (str.length < targetLength) {
@@ -104,7 +109,15 @@ function trimExtraChar(value, char, regExp) {
   return value.slice(0, index + 1) + value.slice(index).replace(regExp, '');
 }
 
-export function formatNumber(value, allowDot = true, allowMinus = true) {
+export function formatNumber(value, allowDot, allowMinus) {
+  if (allowDot === void 0) {
+    allowDot = true;
+  }
+
+  if (allowMinus === void 0) {
+    allowMinus = true;
+  }
+
   if (allowDot) {
     value = trimExtraChar(value, '.', /\./g);
   } else {

package/es/utils/interceptor.d.ts

@@ -1,7 +1,6 @@
-export declare type Interceptor = (...args: any[]) => Promise<boolean> | boolean;
-export declare function callInterceptor(options: {
-    interceptor?: Interceptor;
-    args?: any[];
+export declare type Interceptor = (...args: any[]) => Promise<boolean> | boolean | undefined;
+export declare function callInterceptor(interceptor: Interceptor | undefined, { args, done, canceled, }: {
+    args?: unknown[];
     done: () => void;
     canceled?: () => void;
 }): void;

package/es/utils/interceptor.js

@@ -1,16 +1,15 @@
 import { noop } from './basic';
 import { isPromise } from './validate';
-export function callInterceptor(options) {
+export function callInterceptor(interceptor, _ref) {
   var {
-    interceptor,
-    args,
+    args = [],
     done,
     canceled
-  } = options;
+  } = _ref;
 
   if (interceptor) {
     // eslint-disable-next-line prefer-spread
-    var returnVal = interceptor.apply(null, args || []);
+    var returnVal = interceptor.apply(null, args);
 
     if (isPromise(returnVal)) {
       returnVal.then(value => {

package/es/vue-tsx-shim.d.ts

@@ -4,6 +4,7 @@ type EventHandler = (...args: any[]) => void;
 
 declare module 'vue' {
   interface ComponentCustomProps {
+    id?: string;
     role?: string;
     tabindex?: number;
     onClick?: EventHandler;

package/lib/action-bar/ActionBar.d.ts

@@ -1,4 +1,12 @@
+import { ExtractPropTypes } from 'vue';
 export declare const ACTION_BAR_KEY: unique symbol;
+declare const actionBarProps: {
+    safeAreaInsetBottom: {
+        type: BooleanConstructor;
+        default: true;
+    };
+};
+export declare type ActionBarProps = ExtractPropTypes<typeof actionBarProps>;
 declare const _default: import("vue").DefineComponent<{
     safeAreaInsetBottom: {
         type: BooleanConstructor;

package/lib/action-bar/ActionBar.js

@@ -12,16 +12,18 @@ var _use = require("@vant/use");
 var [name, bem] = (0, _utils.createNamespace)('action-bar');
 var ACTION_BAR_KEY = Symbol(name);
 exports.ACTION_BAR_KEY = ACTION_BAR_KEY;
+var actionBarProps = {
+  safeAreaInsetBottom: _utils.truthProp
+};
 
 var _default = (0, _vue.defineComponent)({
   name,
-  props: {
-    safeAreaInsetBottom: _utils.truthProp
-  },
+  props: actionBarProps,
 
-  setup(props, {
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      slots
+    } = _ref;
     var {
       linkChildren
     } = (0, _use.useChildren)(ACTION_BAR_KEY);

package/lib/action-bar/index.css

@@ -1 +1 @@
-:root{--van-action-bar-background-color:var(--van-white);--van-action-bar-height:50px}.van-action-bar{position:fixed;right:0;bottom:0;left:0;display:flex;align-items:center;box-sizing:content-box;height:var(--van-action-bar-height);background-color:var(--van-action-bar-background-color)}
+:root{--van-action-bar-background-color:var(--van-background-color-light);--van-action-bar-height:50px}.van-action-bar{position:fixed;right:0;bottom:0;left:0;display:flex;align-items:center;box-sizing:content-box;height:var(--van-action-bar-height);background:var(--van-action-bar-background-color)}

package/lib/action-bar/index.d.ts

@@ -11,3 +11,4 @@ export declare const ActionBar: import("../utils").WithInstall<import("vue").Def
     safeAreaInsetBottom: boolean;
 }>>;
 export default ActionBar;
+export type { ActionBarProps } from './ActionBar';

package/lib/action-bar/index.less

@@ -14,5 +14,5 @@
   align-items: center;
   box-sizing: content-box;
   height: var(--van-action-bar-height);
-  background-color: var(--van-action-bar-background-color);
+  background: var(--van-action-bar-background-color);
 }

package/lib/action-bar/var.less

@@ -1,4 +1,4 @@
 @import '../style/var.less';
 
-@action-bar-background-color: var(--van-white);
+@action-bar-background-color: var(--van-background-color-light);
 @action-bar-height: 50px;

package/lib/action-bar-button/ActionBarButton.d.ts

@@ -1,5 +1,18 @@
-import { PropType } from 'vue';
+import { PropType, ExtractPropTypes } from 'vue';
 import { ButtonType } from '../button';
+declare const actionBarButtonProps: {
+    to: PropType<import("vue-router").RouteLocationRaw>;
+    url: StringConstructor;
+    replace: BooleanConstructor;
+} & {
+    type: PropType<ButtonType>;
+    text: StringConstructor;
+    icon: StringConstructor;
+    color: StringConstructor;
+    loading: BooleanConstructor;
+    disabled: BooleanConstructor;
+};
+export declare type ActionBarButtonProps = ExtractPropTypes<typeof actionBarButtonProps>;
 declare const _default: import("vue").DefineComponent<{
     to: PropType<import("vue-router").RouteLocationRaw>;
     url: StringConstructor;

package/lib/action-bar-button/ActionBarButton.js

@@ -20,21 +20,23 @@ var _button = require("../button");
 // Composables
 // Components
 var [name, bem] = (0, _utils.createNamespace)('action-bar-button');
+var actionBarButtonProps = (0, _utils.extend)({}, _useRoute.routeProps, {
+  type: String,
+  text: String,
+  icon: String,
+  color: String,
+  loading: Boolean,
+  disabled: Boolean
+});
 
 var _default = (0, _vue.defineComponent)({
   name,
-  props: (0, _utils.extend)({}, _useRoute.routeProps, {
-    type: String,
-    text: String,
-    icon: String,
-    color: String,
-    loading: Boolean,
-    disabled: Boolean
-  }),
+  props: actionBarButtonProps,
 
-  setup(props, {
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      slots
+    } = _ref;
     var route = (0, _useRoute.useRoute)();
     var {
       parent,

package/lib/action-bar-button/index.d.ts

@@ -36,3 +36,4 @@ export declare const ActionBarButton: import("../utils").WithInstall<import("vue
     loading: boolean;
 }>>;
 export default ActionBarButton;
+export type { ActionBarButtonProps } from './ActionBarButton';

package/lib/action-bar-icon/ActionBarIcon.d.ts

@@ -1,3 +1,18 @@
+import { ExtractPropTypes } from 'vue';
+declare const actionBarIconProps: {
+    to: import("vue").PropType<import("vue-router").RouteLocationRaw>;
+    url: StringConstructor;
+    replace: BooleanConstructor;
+} & {
+    dot: BooleanConstructor;
+    text: StringConstructor;
+    icon: StringConstructor;
+    color: StringConstructor;
+    badge: (NumberConstructor | StringConstructor)[];
+    iconClass: import("vue").PropType<unknown>;
+    iconPrefix: StringConstructor;
+};
+export declare type ActionBarIconProps = ExtractPropTypes<typeof actionBarIconProps>;
 declare const _default: import("vue").DefineComponent<{
     to: import("vue").PropType<import("vue-router").RouteLocationRaw>;
     url: StringConstructor;

package/lib/action-bar-icon/ActionBarIcon.js

@@ -20,22 +20,24 @@ var _badge = require("../badge");
 // Composables
 // Components
 var [name, bem] = (0, _utils.createNamespace)('action-bar-icon');
+var actionBarIconProps = (0, _utils.extend)({}, _useRoute.routeProps, {
+  dot: Boolean,
+  text: String,
+  icon: String,
+  color: String,
+  badge: _utils.numericProp,
+  iconClass: _utils.unknownProp,
+  iconPrefix: String
+});
 
 var _default = (0, _vue.defineComponent)({
   name,
-  props: (0, _utils.extend)({}, _useRoute.routeProps, {
-    dot: Boolean,
-    text: String,
-    icon: String,
-    color: String,
-    badge: _utils.numericProp,
-    iconClass: _utils.unknownProp,
-    iconPrefix: String
-  }),
-
-  setup(props, {
-    slots
-  }) {
+  props: actionBarIconProps,
+
+  setup(props, _ref) {
+    var {
+      slots
+    } = _ref;
     var route = (0, _useRoute.useRoute)();
     (0, _use.useParent)(_ActionBar.ACTION_BAR_KEY);
 
@@ -55,7 +57,7 @@ var _default = (0, _vue.defineComponent)({
           "content": badge,
           "class": bem('icon')
         }, {
-          default: () => [slots.icon()]
+          default: slots.icon
         });
       }
 

package/lib/action-bar-icon/index.css

@@ -1 +1 @@
-:root{--van-action-bar-icon-width:48px;--van-action-bar-icon-height:100%;--van-action-bar-icon-color:var(--van-text-color);--van-action-bar-icon-size:18px;--van-action-bar-icon-font-size:var(--van-font-size-xs);--van-action-bar-icon-active-color:var(--van-active-color);--van-action-bar-icon-text-color:var(--van-gray-7);--van-action-bar-icon-background-color:var(--van-white)}.van-action-bar-icon{display:flex;flex-direction:column;justify-content:center;min-width:var(--van-action-bar-icon-width);height:var(--van-action-bar-icon-height);color:var(--van-action-bar-icon-text-color);font-size:var(--van-action-bar-icon-font-size);line-height:1;text-align:center;background-color:var(--van-action-bar-icon-background-color);cursor:pointer}.van-action-bar-icon:active{background-color:var(--van-action-bar-icon-active-color)}.van-action-bar-icon__icon{margin:0 auto var(--van-padding-base);color:var(--van-action-bar-icon-color);font-size:var(--van-action-bar-icon-size)}
+:root{--van-action-bar-icon-width:48px;--van-action-bar-icon-height:100%;--van-action-bar-icon-color:var(--van-text-color);--van-action-bar-icon-size:18px;--van-action-bar-icon-font-size:var(--van-font-size-xs);--van-action-bar-icon-active-color:var(--van-active-color);--van-action-bar-icon-text-color:var(--van-gray-7);--van-action-bar-icon-background-color:var(--van-background-color-light)}.van-action-bar-icon{display:flex;flex-direction:column;justify-content:center;min-width:var(--van-action-bar-icon-width);height:var(--van-action-bar-icon-height);color:var(--van-action-bar-icon-text-color);font-size:var(--van-action-bar-icon-font-size);line-height:1;text-align:center;background:var(--van-action-bar-icon-background-color);cursor:pointer}.van-action-bar-icon:active{background-color:var(--van-action-bar-icon-active-color)}.van-action-bar-icon__icon{margin:0 auto var(--van-padding-base);color:var(--van-action-bar-icon-color);font-size:var(--van-action-bar-icon-size)}

package/lib/action-bar-icon/index.d.ts

@@ -38,3 +38,4 @@ export declare const ActionBarIcon: import("../utils").WithInstall<import("vue")
     dot: boolean;
 }>>;
 export default ActionBarIcon;
+export type { ActionBarIconProps } from './ActionBarIcon';

package/lib/action-bar-icon/index.less

@@ -21,7 +21,7 @@
   font-size: var(--van-action-bar-icon-font-size);
   line-height: 1;
   text-align: center;
-  background-color: var(--van-action-bar-icon-background-color);
+  background: var(--van-action-bar-icon-background-color);
   cursor: pointer;
 
   &:active {

package/lib/action-bar-icon/var.less

@@ -7,4 +7,4 @@
 @action-bar-icon-font-size: var(--van-font-size-xs);
 @action-bar-icon-active-color: var(--van-active-color);
 @action-bar-icon-text-color: var(--van-gray-7);
-@action-bar-icon-background-color: var(--van-white);
+@action-bar-icon-background-color: var(--van-background-color-light);

package/lib/action-sheet/ActionSheet.d.ts

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { ExtractPropTypes } from 'vue';
 export declare type ActionSheetAction = {
     name?: string;
     color?: string;
@@ -8,6 +8,62 @@ export declare type ActionSheetAction = {
     callback?: (action: ActionSheetAction) => void;
     className?: unknown;
 };
+declare const actionSheetProps: {
+    show: BooleanConstructor;
+    zIndex: (NumberConstructor | StringConstructor)[];
+    overlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    duration: (NumberConstructor | StringConstructor)[];
+    teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
+    lockScroll: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    beforeClose: import("vue").PropType<import("../utils").Interceptor>;
+    overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
+    overlayClass: import("vue").PropType<unknown>;
+    transitionAppear: BooleanConstructor;
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+} & {
+    title: StringConstructor;
+    round: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    actions: {
+        type: import("vue").PropType<ActionSheetAction[]>;
+        default: () => never[];
+    };
+    closeIcon: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    closeable: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    cancelText: StringConstructor;
+    description: StringConstructor;
+    closeOnPopstate: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeOnClickAction: BooleanConstructor;
+    safeAreaInsetBottom: {
+        type: BooleanConstructor;
+        default: true;
+    };
+};
+export declare type ActionSheetProps = ExtractPropTypes<typeof actionSheetProps>;
 declare const _default: import("vue").DefineComponent<{
     show: BooleanConstructor;
     zIndex: (NumberConstructor | StringConstructor)[];
@@ -16,7 +72,7 @@ declare const _default: import("vue").DefineComponent<{
         default: true;
     };
     duration: (NumberConstructor | StringConstructor)[];
-    teleport: PropType<string | import("vue").RendererElement | null | undefined>;
+    teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
     lockScroll: {
         type: BooleanConstructor;
         default: true;
@@ -25,9 +81,9 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
-    beforeClose: PropType<import("../utils").Interceptor>;
-    overlayStyle: PropType<import("vue").CSSProperties>;
-    overlayClass: PropType<unknown>;
+    beforeClose: import("vue").PropType<import("../utils").Interceptor>;
+    overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
+    overlayClass: import("vue").PropType<unknown>;
     transitionAppear: BooleanConstructor;
     closeOnClickOverlay: {
         type: BooleanConstructor;
@@ -39,9 +95,12 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
-    actions: PropType<ActionSheetAction[]>;
+    actions: {
+        type: import("vue").PropType<ActionSheetAction[]>;
+        default: () => never[];
+    };
     closeIcon: {
-        type: PropType<string>;
+        type: import("vue").PropType<string>;
         default: string;
     };
     closeable: {
@@ -50,7 +109,10 @@ declare const _default: import("vue").DefineComponent<{
     };
     cancelText: StringConstructor;
     description: StringConstructor;
-    closeOnPopstate: BooleanConstructor;
+    closeOnPopstate: {
+        type: BooleanConstructor;
+        default: true;
+    };
     closeOnClickAction: BooleanConstructor;
     safeAreaInsetBottom: {
         type: BooleanConstructor;
@@ -91,6 +153,7 @@ declare const _default: import("vue").DefineComponent<{
     closeIcon: string;
     closeable: boolean;
     closeOnPopstate: boolean;
+    actions: ActionSheetAction[];
     closeOnClickAction: boolean;
 } & {
     description?: string | undefined;
@@ -101,7 +164,6 @@ declare const _default: import("vue").DefineComponent<{
     beforeClose?: import("../utils").Interceptor | undefined;
     overlayStyle?: import("vue").CSSProperties | undefined;
     overlayClass?: unknown;
-    actions?: ActionSheetAction[] | undefined;
     cancelText?: string | undefined;
 }> & {
     onSelect?: ((...args: any[]) => any) | undefined;
@@ -119,6 +181,7 @@ declare const _default: import("vue").DefineComponent<{
     closeIcon: string;
     closeable: boolean;
     closeOnPopstate: boolean;
+    actions: ActionSheetAction[];
     closeOnClickAction: boolean;
 }>;
 export default _default;

package/lib/action-sheet/ActionSheet.js

@@ -18,27 +18,31 @@ var _shared = require("../popup/shared");
 // Utils
 // Components
 var [name, bem] = (0, _utils.createNamespace)('action-sheet');
+var actionSheetProps = (0, _utils.extend)({}, _shared.popupSharedProps, {
+  title: String,
+  round: _utils.truthProp,
+  actions: (0, _utils.makeArrayProp)(),
+  closeIcon: (0, _utils.makeStringProp)('cross'),
+  closeable: _utils.truthProp,
+  cancelText: String,
+  description: String,
+  closeOnPopstate: _utils.truthProp,
+  closeOnClickAction: Boolean,
+  safeAreaInsetBottom: _utils.truthProp
+});
+var popupInheritKeys = [..._shared.popupSharedPropKeys, 'round', 'closeOnPopstate', 'safeAreaInsetBottom'];
 
 var _default = (0, _vue.defineComponent)({
   name,
-  props: (0, _utils.extend)({}, _shared.popupSharedProps, {
-    title: String,
-    round: _utils.truthProp,
-    actions: Array,
-    closeIcon: (0, _utils.makeStringProp)('cross'),
-    closeable: _utils.truthProp,
-    cancelText: String,
-    description: String,
-    closeOnPopstate: Boolean,
-    closeOnClickAction: Boolean,
-    safeAreaInsetBottom: _utils.truthProp
-  }),
+  props: actionSheetProps,
   emits: ['select', 'cancel', 'update:show'],
 
-  setup(props, {
-    slots,
-    emit
-  }) {
+  setup(props, _ref) {
+    var {
+      slots,
+      emit
+    } = _ref;
+
     var updateShow = show => emit('update:show', show);
 
     var onCancel = () => {
@@ -52,7 +56,7 @@ var _default = (0, _vue.defineComponent)({
           "class": bem('header')
         }, [props.title, props.closeable && (0, _vue.createVNode)(_icon.Icon, {
           "name": props.closeIcon,
-          "class": bem('close'),
+          "class": [bem('close'), _utils.HAPTICS_FEEDBACK],
           "onClick": onCancel
         }, null)]);
       }
@@ -126,23 +130,14 @@ var _default = (0, _vue.defineComponent)({
       }
     };
 
-    var renderOptions = () => {
-      if (props.actions) {
-        return props.actions.map(renderOption);
-      }
-    };
-
     return () => (0, _vue.createVNode)(_popup.Popup, (0, _vue.mergeProps)({
       "class": bem(),
-      "round": props.round,
       "position": "bottom",
-      "safeAreaInsetBottom": props.safeAreaInsetBottom
-    }, (0, _utils.pick)(props, _shared.popupSharedPropKeys), {
-      'onUpdate:show': updateShow
-    }), {
+      "onUpdate:show": updateShow
+    }, (0, _utils.pick)(props, popupInheritKeys)), {
       default: () => [renderHeader(), renderDescription(), (0, _vue.createVNode)("div", {
         "class": bem('content')
-      }, [renderOptions(), slots.default == null ? void 0 : slots.default()]), renderCancel()]
+      }, [props.actions.map(renderOption), slots.default == null ? void 0 : slots.default()]), renderCancel()]
     });
   }
 

package/lib/action-sheet/index.css

@@ -1 +1 @@
-:root{--van-action-sheet-max-height:80%;--van-action-sheet-header-height:48px;--van-action-sheet-header-font-size:var(--van-font-size-lg);--van-action-sheet-description-color:var(--van-gray-6);--van-action-sheet-description-font-size:var(--van-font-size-md);--van-action-sheet-description-line-height:var(--van-line-height-md);--van-action-sheet-item-background:var(--van-white);--van-action-sheet-item-font-size:var(--van-font-size-lg);--van-action-sheet-item-line-height:var(--van-line-height-lg);--van-action-sheet-item-text-color:var(--van-text-color);--van-action-sheet-item-disabled-text-color:var(--van-gray-5);--van-action-sheet-subname-color:var(--van-gray-6);--van-action-sheet-subname-font-size:var(--van-font-size-sm);--van-action-sheet-subname-line-height:var(--van-line-height-sm);--van-action-sheet-close-icon-size:22px;--van-action-sheet-close-icon-color:var(--van-gray-5);--van-action-sheet-close-icon-active-color:var(--van-gray-6);--van-action-sheet-close-icon-padding:0 var(--van-padding-md);--van-action-sheet-cancel-text-color:var(--van-gray-7);--van-action-sheet-cancel-padding-top:var(--van-padding-xs);--van-action-sheet-cancel-padding-color:var(--van-background-color);--van-action-sheet-loading-icon-size:22px}.van-action-sheet{display:flex;flex-direction:column;max-height:var(--van-action-sheet-max-height);overflow:hidden;color:var(--van-action-sheet-item-text-color)}.van-action-sheet__content{flex:1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch}.van-action-sheet__cancel,.van-action-sheet__item{display:block;width:100%;padding:14px var(--van-padding-md);font-size:var(--van-action-sheet-item-font-size);background-color:var(--van-action-sheet-item-background);border:none;cursor:pointer}.van-action-sheet__cancel:active,.van-action-sheet__item:active{background-color:var(--van-active-color)}.van-action-sheet__item{line-height:var(--van-action-sheet-item-line-height)}.van-action-sheet__item--disabled,.van-action-sheet__item--loading{color:var(--van-action-sheet-item-disabled-text-color)}.van-action-sheet__item--disabled:active,.van-action-sheet__item--loading:active{background-color:var(--van-action-sheet-item-background)}.van-action-sheet__item--disabled{cursor:not-allowed}.van-action-sheet__item--loading{cursor:default}.van-action-sheet__cancel{flex-shrink:0;box-sizing:border-box;color:var(--van-action-sheet-cancel-text-color)}.van-action-sheet__subname{margin-top:var(--van-padding-xs);color:var(--van-action-sheet-subname-color);font-size:var(--van-action-sheet-subname-font-size);line-height:var(--van-action-sheet-subname-line-height)}.van-action-sheet__gap{display:block;height:var(--van-action-sheet-cancel-padding-top);background-color:var(--van-action-sheet-cancel-padding-color)}.van-action-sheet__header{flex-shrink:0;font-weight:var(--van-font-weight-bold);font-size:var(--van-action-sheet-header-font-size);line-height:var(--van-action-sheet-header-height);text-align:center}.van-action-sheet__description{position:relative;flex-shrink:0;padding:20px var(--van-padding-md);color:var(--van-action-sheet-description-color);font-size:var(--van-action-sheet-description-font-size);line-height:var(--van-action-sheet-description-line-height);text-align:center}.van-action-sheet__description::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:var(--van-padding-md);bottom:0;left:var(--van-padding-md);border-bottom:1px solid var(--van-border-color);transform:scaleY(.5)}.van-action-sheet__loading-icon .van-loading__spinner{width:var(--van-action-sheet-loading-icon-size);height:var(--van-action-sheet-loading-icon-size)}.van-action-sheet__close{position:absolute;top:0;right:0;padding:var(--van-action-sheet-close-icon-padding);color:var(--van-action-sheet-close-icon-color);font-size:var(--van-action-sheet-close-icon-size);line-height:inherit}.van-action-sheet__close:active{color:var(--van-action-sheet-close-icon-active-color)}
+:root{--van-action-sheet-max-height:80%;--van-action-sheet-header-height:48px;--van-action-sheet-header-font-size:var(--van-font-size-lg);--van-action-sheet-description-color:var(--van-text-color-2);--van-action-sheet-description-font-size:var(--van-font-size-md);--van-action-sheet-description-line-height:var(--van-line-height-md);--van-action-sheet-item-background:var(--van-background-color-light);--van-action-sheet-item-font-size:var(--van-font-size-lg);--van-action-sheet-item-line-height:var(--van-line-height-lg);--van-action-sheet-item-text-color:var(--van-text-color);--van-action-sheet-item-disabled-text-color:var(--van-text-color-3);--van-action-sheet-subname-color:var(--van-text-color-2);--van-action-sheet-subname-font-size:var(--van-font-size-sm);--van-action-sheet-subname-line-height:var(--van-line-height-sm);--van-action-sheet-close-icon-size:22px;--van-action-sheet-close-icon-color:var(--van-gray-5);--van-action-sheet-close-icon-padding:0 var(--van-padding-md);--van-action-sheet-cancel-text-color:var(--van-gray-7);--van-action-sheet-cancel-padding-top:var(--van-padding-xs);--van-action-sheet-cancel-padding-color:var(--van-background-color);--van-action-sheet-loading-icon-size:22px}.van-action-sheet{display:flex;flex-direction:column;max-height:var(--van-action-sheet-max-height);overflow:hidden;color:var(--van-action-sheet-item-text-color)}.van-action-sheet__content{flex:1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch}.van-action-sheet__cancel,.van-action-sheet__item{display:block;width:100%;padding:14px var(--van-padding-md);font-size:var(--van-action-sheet-item-font-size);background:var(--van-action-sheet-item-background);border:none;cursor:pointer}.van-action-sheet__cancel:active,.van-action-sheet__item:active{background-color:var(--van-active-color)}.van-action-sheet__item{line-height:var(--van-action-sheet-item-line-height)}.van-action-sheet__item--disabled,.van-action-sheet__item--loading{color:var(--van-action-sheet-item-disabled-text-color)}.van-action-sheet__item--disabled:active,.van-action-sheet__item--loading:active{background-color:var(--van-action-sheet-item-background)}.van-action-sheet__item--disabled{cursor:not-allowed}.van-action-sheet__item--loading{cursor:default}.van-action-sheet__cancel{flex-shrink:0;box-sizing:border-box;color:var(--van-action-sheet-cancel-text-color)}.van-action-sheet__subname{margin-top:var(--van-padding-xs);color:var(--van-action-sheet-subname-color);font-size:var(--van-action-sheet-subname-font-size);line-height:var(--van-action-sheet-subname-line-height)}.van-action-sheet__gap{display:block;height:var(--van-action-sheet-cancel-padding-top);background:var(--van-action-sheet-cancel-padding-color)}.van-action-sheet__header{flex-shrink:0;font-weight:var(--van-font-weight-bold);font-size:var(--van-action-sheet-header-font-size);line-height:var(--van-action-sheet-header-height);text-align:center}.van-action-sheet__description{position:relative;flex-shrink:0;padding:20px var(--van-padding-md);color:var(--van-action-sheet-description-color);font-size:var(--van-action-sheet-description-font-size);line-height:var(--van-action-sheet-description-line-height);text-align:center}.van-action-sheet__description::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:var(--van-padding-md);bottom:0;left:var(--van-padding-md);border-bottom:1px solid var(--van-border-color);transform:scaleY(.5)}.van-action-sheet__loading-icon .van-loading__spinner{width:var(--van-action-sheet-loading-icon-size);height:var(--van-action-sheet-loading-icon-size)}.van-action-sheet__close{position:absolute;top:0;right:0;padding:var(--van-action-sheet-close-icon-padding);color:var(--van-action-sheet-close-icon-color);font-size:var(--van-action-sheet-close-icon-size);line-height:inherit}

package/lib/action-sheet/index.d.ts

@@ -29,7 +29,10 @@ export declare const ActionSheet: import("../utils").WithInstall<import("vue").D
         type: BooleanConstructor;
         default: true;
     };
-    actions: import("vue").PropType<import("./ActionSheet").ActionSheetAction[]>;
+    actions: {
+        type: import("vue").PropType<import("./ActionSheet").ActionSheetAction[]>;
+        default: () => never[];
+    };
     closeIcon: {
         type: import("vue").PropType<string>;
         default: string;
@@ -40,7 +43,10 @@ export declare const ActionSheet: import("../utils").WithInstall<import("vue").D
     };
     cancelText: StringConstructor;
     description: StringConstructor;
-    closeOnPopstate: BooleanConstructor;
+    closeOnPopstate: {
+        type: BooleanConstructor;
+        default: true;
+    };
     closeOnClickAction: BooleanConstructor;
     safeAreaInsetBottom: {
         type: BooleanConstructor;
@@ -81,6 +87,7 @@ export declare const ActionSheet: import("../utils").WithInstall<import("vue").D
     closeIcon: string;
     closeable: boolean;
     closeOnPopstate: boolean;
+    actions: import("./ActionSheet").ActionSheetAction[];
     closeOnClickAction: boolean;
 } & {
     description?: string | undefined;
@@ -91,7 +98,6 @@ export declare const ActionSheet: import("../utils").WithInstall<import("vue").D
     beforeClose?: import("../utils").Interceptor | undefined;
     overlayStyle?: import("vue").CSSProperties | undefined;
     overlayClass?: unknown;
-    actions?: import("./ActionSheet").ActionSheetAction[] | undefined;
     cancelText?: string | undefined;
 }> & {
     onSelect?: ((...args: any[]) => any) | undefined;
@@ -109,7 +115,8 @@ export declare const ActionSheet: import("../utils").WithInstall<import("vue").D
     closeIcon: string;
     closeable: boolean;
     closeOnPopstate: boolean;
+    actions: import("./ActionSheet").ActionSheetAction[];
     closeOnClickAction: boolean;
 }>>;
 export default ActionSheet;
-export type { ActionSheetAction } from './ActionSheet';
+export type { ActionSheetProps, ActionSheetAction } from './ActionSheet';

package/lib/action-sheet/index.less

@@ -18,7 +18,6 @@
   --van-action-sheet-subname-line-height: @action-sheet-subname-line-height;
   --van-action-sheet-close-icon-size: @action-sheet-close-icon-size;
   --van-action-sheet-close-icon-color: @action-sheet-close-icon-color;
-  --van-action-sheet-close-icon-active-color: @action-sheet-close-icon-active-color;
   --van-action-sheet-close-icon-padding: @action-sheet-close-icon-padding;
   --van-action-sheet-cancel-text-color: @action-sheet-cancel-text-color;
   --van-action-sheet-cancel-padding-top: @action-sheet-cancel-padding-top;
@@ -45,7 +44,7 @@
     width: 100%;
     padding: 14px var(--van-padding-md);
     font-size: var(--van-action-sheet-item-font-size);
-    background-color: var(--van-action-sheet-item-background);
+    background: var(--van-action-sheet-item-background);
     border: none;
     cursor: pointer;
 
@@ -91,7 +90,7 @@
   &__gap {
     display: block;
     height: var(--van-action-sheet-cancel-padding-top);
-    background-color: var(--van-action-sheet-cancel-padding-color);
+    background: var(--van-action-sheet-cancel-padding-color);
   }
 
   &__header {
@@ -129,9 +128,5 @@
     color: var(--van-action-sheet-close-icon-color);
     font-size: var(--van-action-sheet-close-icon-size);
     line-height: inherit;
-
-    &:active {
-      color: var(--van-action-sheet-close-icon-active-color);
-    }
   }
 }