vant 3.2.5 → 3.3.0

package/lib/stepper/Stepper.js

@@ -17,37 +17,41 @@ var LONG_PRESS_START_TIME = 600;
 
 var isEqual = (value1, value2) => String(value1) === String(value2);
 
+var stepperProps = {
+  min: (0, _utils.makeNumericProp)(1),
+  max: (0, _utils.makeNumericProp)(Infinity),
+  name: (0, _utils.makeNumericProp)(''),
+  step: (0, _utils.makeNumericProp)(1),
+  theme: String,
+  integer: Boolean,
+  disabled: Boolean,
+  showPlus: _utils.truthProp,
+  showMinus: _utils.truthProp,
+  showInput: _utils.truthProp,
+  longPress: _utils.truthProp,
+  allowEmpty: Boolean,
+  modelValue: _utils.numericProp,
+  inputWidth: _utils.numericProp,
+  buttonSize: _utils.numericProp,
+  placeholder: String,
+  disablePlus: Boolean,
+  disableMinus: Boolean,
+  disableInput: Boolean,
+  beforeChange: Function,
+  defaultValue: (0, _utils.makeNumericProp)(1),
+  decimalLength: _utils.numericProp
+};
+
 var _default = (0, _vue.defineComponent)({
   name,
-  props: {
-    min: (0, _utils.makeNumericProp)(1),
-    max: (0, _utils.makeNumericProp)(Infinity),
-    name: (0, _utils.makeNumericProp)(''),
-    step: (0, _utils.makeNumericProp)(1),
-    theme: String,
-    integer: Boolean,
-    disabled: Boolean,
-    showPlus: _utils.truthProp,
-    showMinus: _utils.truthProp,
-    showInput: _utils.truthProp,
-    longPress: _utils.truthProp,
-    allowEmpty: Boolean,
-    modelValue: _utils.numericProp,
-    inputWidth: _utils.numericProp,
-    buttonSize: _utils.numericProp,
-    placeholder: String,
-    disablePlus: Boolean,
-    disableMinus: Boolean,
-    disableInput: Boolean,
-    beforeChange: Function,
-    defaultValue: (0, _utils.makeNumericProp)(1),
-    decimalLength: _utils.numericProp
-  },
+  props: stepperProps,
   emits: ['plus', 'blur', 'minus', 'focus', 'change', 'overlimit', 'update:modelValue'],
 
-  setup(props, {
-    emit
-  }) {
+  setup(props, _ref) {
+    var {
+      emit
+    } = _ref;
+
     var format = value => {
       var {
         min,
@@ -106,9 +110,8 @@ var _default = (0, _vue.defineComponent)({
 
     var setValue = value => {
       if (props.beforeChange) {
-        (0, _utils.callInterceptor)({
+        (0, _utils.callInterceptor)(props.beforeChange, {
           args: [value],
-          interceptor: props.beforeChange,
 
           done() {
             current.value = value;
@@ -216,14 +219,14 @@ var _default = (0, _vue.defineComponent)({
       // fix mobile safari page scroll down issue
       // see: https://github.com/youzan/vant/issues/7690
       if (props.disableInput) {
-        event.preventDefault();
+        (0, _utils.preventDefault)(event);
       }
     };
 
     var createListeners = type => ({
       onClick: event => {
         // disable double tap scrolling on mobile safari
-        event.preventDefault();
+        (0, _utils.preventDefault)(event);
         actionType = type;
         onChange();
       },
@@ -235,7 +238,7 @@ var _default = (0, _vue.defineComponent)({
       onTouchcancel: onTouchEnd
     });
 
-    (0, _vue.watch)([() => props.max, () => props.min, () => props.integer, () => props.decimalLength], check);
+    (0, _vue.watch)(() => [props.max, props.min, props.integer, props.decimalLength], check);
     (0, _vue.watch)(() => props.modelValue, value => {
       if (!isEqual(value, current.value)) {
         current.value = format(value);
@@ -249,13 +252,17 @@ var _default = (0, _vue.defineComponent)({
     });
     (0, _use.useCustomFieldValue)(() => props.modelValue);
     return () => (0, _vue.createVNode)("div", {
+      "role": "group",
       "class": bem([props.theme])
     }, [(0, _vue.withDirectives)((0, _vue.createVNode)("button", (0, _vue.mergeProps)({
       "type": "button",
       "style": buttonStyle.value,
-      "class": bem('minus', {
+      "class": [bem('minus', {
         disabled: minusDisabled.value
-      })
+      }), {
+        [_utils.HAPTICS_FEEDBACK]: !minusDisabled.value
+      }],
+      "aria-disabled": minusDisabled.value || undefined
     }, createListeners('minus')), null), [[_vue.vShow, props.showMinus]]), (0, _vue.withDirectives)((0, _vue.createVNode)("input", {
       "ref": inputRef,
       "type": props.integer ? 'tel' : 'text',
@@ -267,9 +274,9 @@ var _default = (0, _vue.defineComponent)({
       "readonly": props.disableInput,
       "inputmode": props.integer ? 'numeric' : 'decimal',
       "placeholder": props.placeholder,
-      "aria-valuemax": +props.max,
-      "aria-valuemin": +props.min,
-      "aria-valuenow": +current.value,
+      "aria-valuemax": props.max,
+      "aria-valuemin": props.min,
+      "aria-valuenow": current.value,
       "onBlur": onBlur,
       "onInput": onInput,
       "onFocus": onFocus,
@@ -277,9 +284,12 @@ var _default = (0, _vue.defineComponent)({
     }, null), [[_vue.vShow, props.showInput]]), (0, _vue.withDirectives)((0, _vue.createVNode)("button", (0, _vue.mergeProps)({
       "type": "button",
       "style": buttonStyle.value,
-      "class": bem('plus', {
+      "class": [bem('plus', {
         disabled: plusDisabled.value
-      })
+      }), {
+        [_utils.HAPTICS_FEEDBACK]: !plusDisabled.value
+      }],
+      "aria-disabled": plusDisabled.value || undefined
     }, createListeners('plus')), null), [[_vue.vShow, props.showPlus]])]);
   }
 

package/lib/stepper/index.css

@@ -1 +1 @@
-:root{--van-stepper-active-color:#e8e8e8;--van-stepper-background-color:var(--van-active-color);--van-stepper-button-icon-color:var(--van-text-color);--van-stepper-button-disabled-color:var(--van-background-color);--van-stepper-button-disabled-icon-color:var(--van-gray-5);--van-stepper-button-round-theme-color:var(--van-danger-color);--van-stepper-input-width:32px;--van-stepper-input-height:28px;--van-stepper-input-font-size:var(--van-font-size-md);--van-stepper-input-line-height:normal;--van-stepper-input-text-color:var(--van-text-color);--van-stepper-input-disabled-text-color:var(--van-gray-5);--van-stepper-input-disabled-background-color:var(--van-active-color);--van-stepper-border-radius:var(--van-border-radius-md)}.van-stepper{display:inline-block;-webkit-user-select:none;user-select:none}.van-stepper__minus,.van-stepper__plus{position:relative;box-sizing:border-box;width:var(--van-stepper-input-height);height:var(--van-stepper-input-height);margin:0;padding:0;color:var(--van-stepper-button-icon-color);vertical-align:middle;background-color:var(--van-stepper-background-color);border:0;cursor:pointer}.van-stepper__minus::before,.van-stepper__plus::before{width:50%;height:1px}.van-stepper__minus::after,.van-stepper__plus::after{width:1px;height:50%}.van-stepper__minus::after,.van-stepper__minus::before,.van-stepper__plus::after,.van-stepper__plus::before{position:absolute;top:50%;left:50%;background-color:currentColor;transform:translate(-50%,-50%);content:''}.van-stepper__minus:active,.van-stepper__plus:active{background-color:var(--van-stepper-active-color)}.van-stepper__minus--disabled,.van-stepper__plus--disabled{color:var(--van-stepper-button-disabled-icon-color);background-color:var(--van-stepper-button-disabled-color);cursor:not-allowed}.van-stepper__minus--disabled:active,.van-stepper__plus--disabled:active{background-color:var(--van-stepper-button-disabled-color)}.van-stepper__minus{border-radius:var(--van-stepper-border-radius) 0 0 var(--van-stepper-border-radius)}.van-stepper__minus::after{display:none}.van-stepper__plus{border-radius:0 var(--van-stepper-border-radius) var(--van-stepper-border-radius) 0}.van-stepper__input{box-sizing:border-box;width:var(--van-stepper-input-width);height:var(--van-stepper-input-height);margin:0 2px;padding:0;color:var(--van-stepper-input-text-color);font-size:var(--van-stepper-input-font-size);line-height:var(--van-stepper-input-line-height);text-align:center;vertical-align:middle;background-color:var(--van-stepper-background-color);border:0;border-width:1px 0;border-radius:0;-webkit-appearance:none}.van-stepper__input:disabled{color:var(--van-stepper-input-disabled-text-color);background-color:var(--van-stepper-input-disabled-background-color);-webkit-text-fill-color:var(--van-stepper-input-disabled-text-color);opacity:1}.van-stepper__input:read-only{cursor:default}.van-stepper--round .van-stepper__input{background-color:transparent}.van-stepper--round .van-stepper__minus,.van-stepper--round .van-stepper__plus{border-radius:100%}.van-stepper--round .van-stepper__minus:active,.van-stepper--round .van-stepper__plus:active{opacity:var(--van-active-opacity)}.van-stepper--round .van-stepper__minus--disabled,.van-stepper--round .van-stepper__minus--disabled:active,.van-stepper--round .van-stepper__plus--disabled,.van-stepper--round .van-stepper__plus--disabled:active{opacity:.3}.van-stepper--round .van-stepper__plus{color:var(--van-white);background-color:var(--van-stepper-button-round-theme-color)}.van-stepper--round .van-stepper__minus{color:var(--van-stepper-button-round-theme-color);background-color:var(--van-white);border:1px solid var(--van-stepper-button-round-theme-color)}
+:root{--van-stepper-background-color:var(--van-active-color);--van-stepper-button-icon-color:var(--van-text-color);--van-stepper-button-disabled-color:var(--van-background-color);--van-stepper-button-disabled-icon-color:var(--van-gray-5);--van-stepper-button-round-theme-color:var(--van-danger-color);--van-stepper-input-width:32px;--van-stepper-input-height:28px;--van-stepper-input-font-size:var(--van-font-size-md);--van-stepper-input-line-height:normal;--van-stepper-input-text-color:var(--van-text-color);--van-stepper-input-disabled-text-color:var(--van-text-color-3);--van-stepper-input-disabled-background-color:var(--van-active-color);--van-stepper-border-radius:var(--van-border-radius-md)}.van-stepper{display:inline-block;-webkit-user-select:none;user-select:none}.van-stepper__minus,.van-stepper__plus{position:relative;box-sizing:border-box;width:var(--van-stepper-input-height);height:var(--van-stepper-input-height);margin:0;padding:0;color:var(--van-stepper-button-icon-color);vertical-align:middle;background:var(--van-stepper-background-color);border:0;cursor:pointer}.van-stepper__minus::before,.van-stepper__plus::before{width:50%;height:1px}.van-stepper__minus::after,.van-stepper__plus::after{width:1px;height:50%}.van-stepper__minus::after,.van-stepper__minus::before,.van-stepper__plus::after,.van-stepper__plus::before{position:absolute;top:50%;left:50%;background-color:currentColor;transform:translate(-50%,-50%);content:''}.van-stepper__minus--disabled,.van-stepper__plus--disabled{color:var(--van-stepper-button-disabled-icon-color);background-color:var(--van-stepper-button-disabled-color);cursor:not-allowed}.van-stepper__minus{border-radius:var(--van-stepper-border-radius) 0 0 var(--van-stepper-border-radius)}.van-stepper__minus::after{display:none}.van-stepper__plus{border-radius:0 var(--van-stepper-border-radius) var(--van-stepper-border-radius) 0}.van-stepper__input{box-sizing:border-box;width:var(--van-stepper-input-width);height:var(--van-stepper-input-height);margin:0 2px;padding:0;color:var(--van-stepper-input-text-color);font-size:var(--van-stepper-input-font-size);line-height:var(--van-stepper-input-line-height);text-align:center;vertical-align:middle;background:var(--van-stepper-background-color);border:0;border-width:1px 0;border-radius:0;-webkit-appearance:none}.van-stepper__input:disabled{color:var(--van-stepper-input-disabled-text-color);background-color:var(--van-stepper-input-disabled-background-color);-webkit-text-fill-color:var(--van-stepper-input-disabled-text-color);opacity:1}.van-stepper__input:read-only{cursor:default}.van-stepper--round .van-stepper__input{background-color:transparent}.van-stepper--round .van-stepper__minus,.van-stepper--round .van-stepper__plus{border-radius:100%}.van-stepper--round .van-stepper__minus--disabled,.van-stepper--round .van-stepper__plus--disabled{opacity:.3;cursor:not-allowed}.van-stepper--round .van-stepper__plus{color:var(--van-white);background:var(--van-stepper-button-round-theme-color)}.van-stepper--round .van-stepper__minus{color:var(--van-stepper-button-round-theme-color);background-color:var(--van-background-color-light);border:1px solid var(--van-stepper-button-round-theme-color)}

package/lib/stepper/index.d.ts

@@ -1,4 +1,3 @@
-import { StepperTheme } from './Stepper';
 export declare const Stepper: import("../utils").WithInstall<import("vue").DefineComponent<{
     min: {
         type: (NumberConstructor | StringConstructor)[];
@@ -16,7 +15,7 @@ export declare const Stepper: import("../utils").WithInstall<import("vue").Defin
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    theme: import("vue").PropType<StepperTheme>;
+    theme: import("vue").PropType<import("./Stepper").StepperTheme>;
     integer: BooleanConstructor;
     disabled: BooleanConstructor;
     showPlus: {
@@ -91,8 +90,8 @@ export declare const Stepper: import("../utils").WithInstall<import("vue").Defin
 } & {
     modelValue?: string | number | undefined;
     placeholder?: string | undefined;
-    theme?: StepperTheme | undefined;
     beforeChange?: import("../utils").Interceptor | undefined;
+    theme?: import("./Stepper").StepperTheme | undefined;
     buttonSize?: string | number | undefined;
     inputWidth?: string | number | undefined;
     decimalLength?: string | number | undefined;
@@ -122,4 +121,4 @@ export declare const Stepper: import("../utils").WithInstall<import("vue").Defin
     defaultValue: string | number;
 }>>;
 export default Stepper;
-export type { StepperTheme };
+export type { StepperTheme, StepperProps } from './Stepper';

package/lib/stepper/index.less

@@ -1,7 +1,6 @@
 @import './var.less';
 
 :root {
-  --van-stepper-active-color: @stepper-active-color;
   --van-stepper-background-color: @stepper-background-color;
   --van-stepper-button-icon-color: @stepper-button-icon-color;
   --van-stepper-button-disabled-color: @stepper-button-disabled-color;
@@ -31,7 +30,7 @@
     padding: 0;
     color: var(--van-stepper-button-icon-color);
     vertical-align: middle;
-    background-color: var(--van-stepper-background-color);
+    background: var(--van-stepper-background-color);
     border: 0;
     cursor: pointer;
 
@@ -55,18 +54,10 @@
       content: '';
     }
 
-    &:active {
-      background-color: var(--van-stepper-active-color);
-    }
-
     &--disabled {
       color: var(--van-stepper-button-disabled-icon-color);
       background-color: var(--van-stepper-button-disabled-color);
       cursor: not-allowed;
-
-      &:active {
-        background-color: var(--van-stepper-button-disabled-color);
-      }
     }
   }
 
@@ -95,7 +86,7 @@
     line-height: var(--van-stepper-input-line-height);
     text-align: center;
     vertical-align: middle;
-    background-color: var(--van-stepper-background-color);
+    background: var(--van-stepper-background-color);
     border: 0;
     border-width: 1px 0;
     border-radius: 0;
@@ -123,26 +114,20 @@
     .van-stepper__minus {
       border-radius: 100%;
 
-      &:active {
-        opacity: var(--van-active-opacity);
-      }
-
       &--disabled {
-        &,
-        &:active {
-          opacity: 0.3;
-        }
+        opacity: 0.3;
+        cursor: not-allowed;
       }
     }
 
     .van-stepper__plus {
       color: var(--van-white);
-      background-color: var(--van-stepper-button-round-theme-color);
+      background: var(--van-stepper-button-round-theme-color);
     }
 
     .van-stepper__minus {
       color: var(--van-stepper-button-round-theme-color);
-      background-color: var(--van-white);
+      background-color: var(--van-background-color-light);
       border: 1px solid var(--van-stepper-button-round-theme-color);
     }
   }

package/lib/stepper/var.less

@@ -1,6 +1,5 @@
 @import '../style/var.less';
 
-@stepper-active-color: #e8e8e8;
 @stepper-background-color: var(--van-active-color);
 @stepper-button-icon-color: var(--van-text-color);
 @stepper-button-disabled-color: var(--van-background-color);
@@ -11,6 +10,6 @@
 @stepper-input-font-size: var(--van-font-size-md);
 @stepper-input-line-height: normal;
 @stepper-input-text-color: var(--van-text-color);
-@stepper-input-disabled-text-color: var(--van-gray-5);
+@stepper-input-disabled-text-color: var(--van-text-color-3);
 @stepper-input-disabled-background-color: var(--van-active-color);
 @stepper-border-radius: var(--van-border-radius-md);

package/lib/steps/Steps.d.ts

@@ -1,6 +1,6 @@
 import { ExtractPropTypes, InjectionKey } from 'vue';
 export declare type StepsDirection = 'horizontal' | 'vertical';
-declare const props: {
+declare const stepsProps: {
     active: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
@@ -19,8 +19,9 @@ declare const props: {
     inactiveIcon: StringConstructor;
     inactiveColor: StringConstructor;
 };
+export declare type StepsProps = ExtractPropTypes<typeof stepsProps>;
 export declare type StepsProvide = {
-    props: ExtractPropTypes<typeof props>;
+    props: StepsProps;
     onClickStep: (index: number) => void;
 };
 export declare const STEPS_KEY: InjectionKey<StepsProvide>;

package/lib/steps/Steps.js

@@ -10,7 +10,7 @@ var _utils = require("../utils");
 var _use = require("@vant/use");
 
 var [name, bem] = (0, _utils.createNamespace)('steps');
-var props = {
+var stepsProps = {
   active: (0, _utils.makeNumericProp)(0),
   direction: (0, _utils.makeStringProp)('horizontal'),
   activeIcon: (0, _utils.makeStringProp)('checked'),
@@ -25,13 +25,14 @@ exports.STEPS_KEY = STEPS_KEY;
 
 var _default = (0, _vue.defineComponent)({
   name,
-  props,
+  props: stepsProps,
   emits: ['click-step'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      emit,
+      slots
+    } = _ref;
     var {
       linkChildren
     } = (0, _use.useChildren)(STEPS_KEY);

package/lib/steps/index.css

@@ -1 +1 @@
-:root{--van-steps-background-color:var(--van-white)}.van-steps{overflow:hidden;background-color:var(--van-steps-background-color)}.van-steps--horizontal{padding:10px 10px 0}.van-steps--horizontal .van-steps__items{position:relative;display:flex;margin:0 0 10px;padding-bottom:22px}.van-steps--vertical{padding:0 0 0 var(--van-padding-xl)}
+:root{--van-steps-background-color:var(--van-background-color-light)}.van-steps{overflow:hidden;background-color:var(--van-steps-background-color)}.van-steps--horizontal{padding:10px 10px 0}.van-steps--horizontal .van-steps__items{position:relative;display:flex;margin:0 0 10px;padding-bottom:22px}.van-steps--vertical{padding:0 0 0 var(--van-padding-xl)}

package/lib/steps/index.d.ts

@@ -43,3 +43,4 @@ export declare const Steps: import("../utils").WithInstall<import("vue").DefineC
     activeIcon: string;
 }>>;
 export default Steps;
+export type { StepsProps, StepsDirection } from './Steps';

package/lib/steps/var.less

@@ -1,3 +1,3 @@
 @import '../style/var.less';
 
-@steps-background-color: var(--van-white);
+@steps-background-color: var(--van-background-color-light);

package/lib/sticky/Sticky.d.ts

@@ -1,5 +1,22 @@
-import { PropType } from 'vue';
+import { PropType, ExtractPropTypes } from 'vue';
 export declare type StickyPosition = 'top' | 'bottom';
+declare const stickyProps: {
+    zIndex: (NumberConstructor | StringConstructor)[];
+    position: {
+        type: PropType<StickyPosition>;
+        default: StickyPosition;
+    };
+    container: PropType<Element>;
+    offsetTop: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    offsetBottom: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+};
+export declare type StickyProps = ExtractPropTypes<typeof stickyProps>;
 declare const _default: import("vue").DefineComponent<{
     zIndex: (NumberConstructor | StringConstructor)[];
     position: {

package/lib/sticky/Sticky.js

@@ -14,22 +14,24 @@ var _useVisibilityChange = require("../composables/use-visibility-change");
 // Utils
 // Composables
 var [name, bem] = (0, _utils.createNamespace)('sticky');
+var stickyProps = {
+  zIndex: _utils.numericProp,
+  position: (0, _utils.makeStringProp)('top'),
+  container: Object,
+  offsetTop: (0, _utils.makeNumericProp)(0),
+  offsetBottom: (0, _utils.makeNumericProp)(0)
+};
 
 var _default = (0, _vue.defineComponent)({
   name,
-  props: {
-    zIndex: _utils.numericProp,
-    position: (0, _utils.makeStringProp)('top'),
-    container: Object,
-    offsetTop: (0, _utils.makeNumericProp)(0),
-    offsetBottom: (0, _utils.makeNumericProp)(0)
-  },
+  props: stickyProps,
   emits: ['scroll', 'change'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      emit,
+      slots
+    } = _ref;
     var root = (0, _vue.ref)();
     var scrollParent = (0, _use.useScrollParent)(root);
     var state = (0, _vue.reactive)({

package/lib/sticky/index.d.ts

@@ -35,4 +35,4 @@ export declare const Sticky: import("../utils").WithInstall<import("vue").Define
     offsetBottom: string | number;
 }>>;
 export default Sticky;
-export type { StickyPosition } from './Sticky';
+export type { StickyProps, StickyPosition } from './Sticky';

package/lib/style/base.css

@@ -1 +1 @@
-:root{--van-black:#000;--van-white:#fff;--van-gray-1:#f7f8fa;--van-gray-2:#f2f3f5;--van-gray-3:#ebedf0;--van-gray-4:#dcdee0;--van-gray-5:#c8c9cc;--van-gray-6:#969799;--van-gray-7:#646566;--van-gray-8:#323233;--van-red:#ee0a24;--van-blue:#1989fa;--van-orange:#ff976a;--van-orange-dark:#ed6a0c;--van-orange-light:#fffbe8;--van-green:#07c160;--van-gradient-red:linear-gradient(to right, #ff6034, #ee0a24);--van-gradient-orange:linear-gradient(to right, #ffd01e, #ff8917);--van-primary-color:var(--van-blue);--van-success-color:var(--van-green);--van-danger-color:var(--van-red);--van-warning-color:var(--van-orange);--van-text-color:var(--van-gray-8);--van-active-color:var(--van-gray-2);--van-active-opacity:0.7;--van-disabled-opacity:0.5;--van-background-color:var(--van-gray-1);--van-background-color-light:#fafafa;--van-text-link-color:#576b95;--van-padding-base:4px;--van-padding-xs:8px;--van-padding-sm:12px;--van-padding-md:16px;--van-padding-lg:24px;--van-padding-xl:32px;--van-font-size-xs:10px;--van-font-size-sm:12px;--van-font-size-md:14px;--van-font-size-lg:16px;--van-font-weight-bold:500;--van-line-height-xs:14px;--van-line-height-sm:18px;--van-line-height-md:20px;--van-line-height-lg:22px;--van-base-font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Segoe UI,Arial,Roboto,'PingFang SC','miui','Hiragino Sans GB','Microsoft Yahei',sans-serif;--van-price-integer-font-family:Avenir-Heavy,PingFang SC,Helvetica Neue,Arial,sans-serif;--van-animation-duration-base:0.3s;--van-animation-duration-fast:0.2s;--van-animation-timing-function-enter:ease-out;--van-animation-timing-function-leave:ease-in;--van-border-color:var(--van-gray-3);--van-border-width-base:1px;--van-border-radius-sm:2px;--van-border-radius-md:4px;--van-border-radius-lg:8px;--van-border-radius-max:999px}html{-webkit-tap-highlight-color:transparent}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Segoe UI,Arial,Roboto,'PingFang SC',miui,'Hiragino Sans GB','Microsoft Yahei',sans-serif}a{text-decoration:none}button,input,textarea{color:inherit;font:inherit}[class*=van-]:focus,a:focus,button:focus,input:focus,textarea:focus{outline:0}ol,ul{margin:0;padding:0;list-style:none}@keyframes van-slide-up-enter{from{transform:translate3d(0,100%,0)}}@keyframes van-slide-up-leave{to{transform:translate3d(0,100%,0)}}@keyframes van-slide-down-enter{from{transform:translate3d(0,-100%,0)}}@keyframes van-slide-down-leave{to{transform:translate3d(0,-100%,0)}}@keyframes van-slide-left-enter{from{transform:translate3d(-100%,0,0)}}@keyframes van-slide-left-leave{to{transform:translate3d(-100%,0,0)}}@keyframes van-slide-right-enter{from{transform:translate3d(100%,0,0)}}@keyframes van-slide-right-leave{to{transform:translate3d(100%,0,0)}}@keyframes van-fade-in{from{opacity:0}to{opacity:1}}@keyframes van-fade-out{from{opacity:1}to{opacity:0}}@keyframes van-rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}.van-fade-enter-active{animation:var(--van-animation-duration-base) van-fade-in both var(--van-animation-timing-function-enter)}.van-fade-leave-active{animation:var(--van-animation-duration-base) van-fade-out both var(--van-animation-timing-function-leave)}.van-slide-up-enter-active{animation:van-slide-up-enter var(--van-animation-duration-base) both var(--van-animation-timing-function-enter)}.van-slide-up-leave-active{animation:van-slide-up-leave var(--van-animation-duration-base) both var(--van-animation-timing-function-leave)}.van-slide-down-enter-active{animation:van-slide-down-enter var(--van-animation-duration-base) both var(--van-animation-timing-function-enter)}.van-slide-down-leave-active{animation:van-slide-down-leave var(--van-animation-duration-base) both var(--van-animation-timing-function-leave)}.van-slide-left-enter-active{animation:van-slide-left-enter var(--van-animation-duration-base) both var(--van-animation-timing-function-enter)}.van-slide-left-leave-active{animation:van-slide-left-leave var(--van-animation-duration-base) both var(--van-animation-timing-function-leave)}.van-slide-right-enter-active{animation:van-slide-right-enter var(--van-animation-duration-base) both var(--van-animation-timing-function-enter)}.van-slide-right-leave-active{animation:van-slide-right-leave var(--van-animation-duration-base) both var(--van-animation-timing-function-leave)}.van-clearfix::after{display:table;clear:both;content:''}.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-multi-ellipsis--l2{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical}.van-multi-ellipsis--l3{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;-webkit-box-orient:vertical}.van-safe-area-bottom{padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom)}[class*=van-hairline]::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid var(--van-gray-3);transform:scale(.5)}.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after,.van-hairline-unset--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}
+:root{--van-black:#000;--van-white:#fff;--van-gray-1:#f7f8fa;--van-gray-2:#f2f3f5;--van-gray-3:#ebedf0;--van-gray-4:#dcdee0;--van-gray-5:#c8c9cc;--van-gray-6:#969799;--van-gray-7:#646566;--van-gray-8:#323233;--van-red:#ee0a24;--van-blue:#1989fa;--van-orange:#ff976a;--van-orange-dark:#ed6a0c;--van-orange-light:#fffbe8;--van-green:#07c160;--van-gradient-red:linear-gradient(to right, #ff6034, #ee0a24);--van-gradient-orange:linear-gradient(to right, #ffd01e, #ff8917);--van-primary-color:var(--van-blue);--van-success-color:var(--van-green);--van-danger-color:var(--van-red);--van-warning-color:var(--van-orange);--van-text-color:var(--van-gray-8);--van-text-color-2:var(--van-gray-6);--van-text-color-3:var(--van-gray-5);--van-text-link-color:#576b95;--van-active-color:var(--van-gray-2);--van-active-opacity:0.6;--van-disabled-opacity:0.5;--van-background-color:var(--van-gray-1);--van-background-color-light:var(--van-white);--van-padding-base:4px;--van-padding-xs:8px;--van-padding-sm:12px;--van-padding-md:16px;--van-padding-lg:24px;--van-padding-xl:32px;--van-font-size-xs:10px;--van-font-size-sm:12px;--van-font-size-md:14px;--van-font-size-lg:16px;--van-font-weight-bold:500;--van-line-height-xs:14px;--van-line-height-sm:18px;--van-line-height-md:20px;--van-line-height-lg:22px;--van-base-font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Segoe UI,Arial,Roboto,'PingFang SC','miui','Hiragino Sans GB','Microsoft Yahei',sans-serif;--van-price-integer-font-family:Avenir-Heavy,PingFang SC,Helvetica Neue,Arial,sans-serif;--van-animation-duration-base:0.3s;--van-animation-duration-fast:0.2s;--van-animation-timing-function-enter:ease-out;--van-animation-timing-function-leave:ease-in;--van-border-color:var(--van-gray-3);--van-border-width-base:1px;--van-border-radius-sm:2px;--van-border-radius-md:4px;--van-border-radius-lg:8px;--van-border-radius-max:999px}html{-webkit-tap-highlight-color:transparent}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Segoe UI,Arial,Roboto,'PingFang SC',miui,'Hiragino Sans GB','Microsoft Yahei',sans-serif}a{text-decoration:none}button,input,textarea{color:inherit;font:inherit}[class*=van-]:focus,a:focus,button:focus,input:focus,textarea:focus{outline:0}ol,ul{margin:0;padding:0;list-style:none}@keyframes van-slide-up-enter{from{transform:translate3d(0,100%,0)}}@keyframes van-slide-up-leave{to{transform:translate3d(0,100%,0)}}@keyframes van-slide-down-enter{from{transform:translate3d(0,-100%,0)}}@keyframes van-slide-down-leave{to{transform:translate3d(0,-100%,0)}}@keyframes van-slide-left-enter{from{transform:translate3d(-100%,0,0)}}@keyframes van-slide-left-leave{to{transform:translate3d(-100%,0,0)}}@keyframes van-slide-right-enter{from{transform:translate3d(100%,0,0)}}@keyframes van-slide-right-leave{to{transform:translate3d(100%,0,0)}}@keyframes van-fade-in{from{opacity:0}to{opacity:1}}@keyframes van-fade-out{from{opacity:1}to{opacity:0}}@keyframes van-rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}.van-fade-enter-active{animation:var(--van-animation-duration-base) van-fade-in both var(--van-animation-timing-function-enter)}.van-fade-leave-active{animation:var(--van-animation-duration-base) van-fade-out both var(--van-animation-timing-function-leave)}.van-slide-up-enter-active{animation:van-slide-up-enter var(--van-animation-duration-base) both var(--van-animation-timing-function-enter)}.van-slide-up-leave-active{animation:van-slide-up-leave var(--van-animation-duration-base) both var(--van-animation-timing-function-leave)}.van-slide-down-enter-active{animation:van-slide-down-enter var(--van-animation-duration-base) both var(--van-animation-timing-function-enter)}.van-slide-down-leave-active{animation:van-slide-down-leave var(--van-animation-duration-base) both var(--van-animation-timing-function-leave)}.van-slide-left-enter-active{animation:van-slide-left-enter var(--van-animation-duration-base) both var(--van-animation-timing-function-enter)}.van-slide-left-leave-active{animation:van-slide-left-leave var(--van-animation-duration-base) both var(--van-animation-timing-function-leave)}.van-slide-right-enter-active{animation:van-slide-right-enter var(--van-animation-duration-base) both var(--van-animation-timing-function-enter)}.van-slide-right-leave-active{animation:van-slide-right-leave var(--van-animation-duration-base) both var(--van-animation-timing-function-leave)}.van-clearfix::after{display:table;clear:both;content:''}.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-multi-ellipsis--l2{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical}.van-multi-ellipsis--l3{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;-webkit-box-orient:vertical}.van-safe-area-bottom{padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom)}.van-haptics-feedback:active{opacity:var(--van-active-opacity)}[class*=van-hairline]::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid var(--van-border-color);transform:scale(.5)}.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after,.van-hairline-unset--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}

package/lib/style/base.less

@@ -31,6 +31,10 @@
   padding-bottom: env(safe-area-inset-bottom);
 }
 
+.van-haptics-feedback:active {
+  opacity: var(--van-active-opacity);
+}
+
 [class*='van-hairline'] {
   &::after {
     .hairline();

package/lib/style/css-variables.css

@@ -1 +1 @@
-:root{--van-black:#000;--van-white:#fff;--van-gray-1:#f7f8fa;--van-gray-2:#f2f3f5;--van-gray-3:#ebedf0;--van-gray-4:#dcdee0;--van-gray-5:#c8c9cc;--van-gray-6:#969799;--van-gray-7:#646566;--van-gray-8:#323233;--van-red:#ee0a24;--van-blue:#1989fa;--van-orange:#ff976a;--van-orange-dark:#ed6a0c;--van-orange-light:#fffbe8;--van-green:#07c160;--van-gradient-red:linear-gradient(to right, #ff6034, #ee0a24);--van-gradient-orange:linear-gradient(to right, #ffd01e, #ff8917);--van-primary-color:var(--van-blue);--van-success-color:var(--van-green);--van-danger-color:var(--van-red);--van-warning-color:var(--van-orange);--van-text-color:var(--van-gray-8);--van-active-color:var(--van-gray-2);--van-active-opacity:0.7;--van-disabled-opacity:0.5;--van-background-color:var(--van-gray-1);--van-background-color-light:#fafafa;--van-text-link-color:#576b95;--van-padding-base:4px;--van-padding-xs:8px;--van-padding-sm:12px;--van-padding-md:16px;--van-padding-lg:24px;--van-padding-xl:32px;--van-font-size-xs:10px;--van-font-size-sm:12px;--van-font-size-md:14px;--van-font-size-lg:16px;--van-font-weight-bold:500;--van-line-height-xs:14px;--van-line-height-sm:18px;--van-line-height-md:20px;--van-line-height-lg:22px;--van-base-font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Segoe UI,Arial,Roboto,'PingFang SC','miui','Hiragino Sans GB','Microsoft Yahei',sans-serif;--van-price-integer-font-family:Avenir-Heavy,PingFang SC,Helvetica Neue,Arial,sans-serif;--van-animation-duration-base:0.3s;--van-animation-duration-fast:0.2s;--van-animation-timing-function-enter:ease-out;--van-animation-timing-function-leave:ease-in;--van-border-color:var(--van-gray-3);--van-border-width-base:1px;--van-border-radius-sm:2px;--van-border-radius-md:4px;--van-border-radius-lg:8px;--van-border-radius-max:999px}
+:root{--van-black:#000;--van-white:#fff;--van-gray-1:#f7f8fa;--van-gray-2:#f2f3f5;--van-gray-3:#ebedf0;--van-gray-4:#dcdee0;--van-gray-5:#c8c9cc;--van-gray-6:#969799;--van-gray-7:#646566;--van-gray-8:#323233;--van-red:#ee0a24;--van-blue:#1989fa;--van-orange:#ff976a;--van-orange-dark:#ed6a0c;--van-orange-light:#fffbe8;--van-green:#07c160;--van-gradient-red:linear-gradient(to right, #ff6034, #ee0a24);--van-gradient-orange:linear-gradient(to right, #ffd01e, #ff8917);--van-primary-color:var(--van-blue);--van-success-color:var(--van-green);--van-danger-color:var(--van-red);--van-warning-color:var(--van-orange);--van-text-color:var(--van-gray-8);--van-text-color-2:var(--van-gray-6);--van-text-color-3:var(--van-gray-5);--van-text-link-color:#576b95;--van-active-color:var(--van-gray-2);--van-active-opacity:0.6;--van-disabled-opacity:0.5;--van-background-color:var(--van-gray-1);--van-background-color-light:var(--van-white);--van-padding-base:4px;--van-padding-xs:8px;--van-padding-sm:12px;--van-padding-md:16px;--van-padding-lg:24px;--van-padding-xl:32px;--van-font-size-xs:10px;--van-font-size-sm:12px;--van-font-size-md:14px;--van-font-size-lg:16px;--van-font-weight-bold:500;--van-line-height-xs:14px;--van-line-height-sm:18px;--van-line-height-md:20px;--van-line-height-lg:22px;--van-base-font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Segoe UI,Arial,Roboto,'PingFang SC','miui','Hiragino Sans GB','Microsoft Yahei',sans-serif;--van-price-integer-font-family:Avenir-Heavy,PingFang SC,Helvetica Neue,Arial,sans-serif;--van-animation-duration-base:0.3s;--van-animation-duration-fast:0.2s;--van-animation-timing-function-enter:ease-out;--van-animation-timing-function-leave:ease-in;--van-border-color:var(--van-gray-3);--van-border-width-base:1px;--van-border-radius-sm:2px;--van-border-radius-md:4px;--van-border-radius-lg:8px;--van-border-radius-max:999px}

package/lib/style/css-variables.less

@@ -29,12 +29,14 @@
   --van-danger-color: @danger-color;
   --van-warning-color: @warning-color;
   --van-text-color: @text-color;
+  --van-text-color-2: @text-color-2;
+  --van-text-color-3: @text-color-3;
+  --van-text-link-color: @text-link-color;
   --van-active-color: @active-color;
   --van-active-opacity: @active-opacity;
   --van-disabled-opacity: @disabled-opacity;
   --van-background-color: @background-color;
   --van-background-color-light: @background-color-light;
-  --van-text-link-color: @text-link-color;
 
   // Padding
   --van-padding-base: @padding-base;

package/lib/style/mixins/hairline.less

@@ -7,7 +7,7 @@
   pointer-events: none;
 }
 
-.hairline(@color: @border-color) {
+.hairline(@color: var(--van-border-color)) {
   .hairline-common();
 
   top: -50%;
@@ -18,7 +18,7 @@
   transform: scale(0.5);
 }
 
-.hairline-top(@color: @border-color, @left: 0, @right: 0) {
+.hairline-top(@color: var(--van-border-color), @left: 0, @right: 0) {
   .hairline-common();
 
   top: 0;
@@ -28,7 +28,7 @@
   transform: scaleY(0.5);
 }
 
-.hairline-bottom(@color: @border-color, @left: 0, @right: 0) {
+.hairline-bottom(@color: var(--van-border-color), @left: 0, @right: 0) {
   .hairline-common();
 
   right: @right;

package/lib/style/var.less

@@ -26,12 +26,14 @@
 @danger-color: var(--van-red);
 @warning-color: var(--van-orange);
 @text-color: var(--van-gray-8);
+@text-color-2: var(--van-gray-6);
+@text-color-3: var(--van-gray-5);
+@text-link-color: #576b95;
 @active-color: var(--van-gray-2);
-@active-opacity: 0.7;
+@active-opacity: 0.6;
 @disabled-opacity: 0.5;
 @background-color: var(--van-gray-1);
-@background-color-light: #fafafa;
-@text-link-color: #576b95;
+@background-color-light: var(--van-white);
 
 // Padding
 @padding-base: 4px;

package/lib/submit-bar/SubmitBar.d.ts

@@ -1,5 +1,35 @@
-import { PropType } from 'vue';
+import { PropType, ExtractPropTypes } from 'vue';
 import { ButtonType } from '../button';
+export declare type SubmitBarTextAlign = 'left' | 'right';
+declare const submitBarProps: {
+    tip: StringConstructor;
+    label: StringConstructor;
+    price: NumberConstructor;
+    tipIcon: StringConstructor;
+    loading: BooleanConstructor;
+    currency: {
+        type: PropType<string>;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+    textAlign: PropType<SubmitBarTextAlign>;
+    buttonText: StringConstructor;
+    buttonType: {
+        type: PropType<ButtonType>;
+        default: ButtonType;
+    };
+    buttonColor: StringConstructor;
+    suffixLabel: StringConstructor;
+    decimalLength: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    safeAreaInsetBottom: {
+        type: BooleanConstructor;
+        default: true;
+    };
+};
+export declare type SubmitBarProps = ExtractPropTypes<typeof submitBarProps>;
 declare const _default: import("vue").DefineComponent<{
     tip: StringConstructor;
     label: StringConstructor;
@@ -11,7 +41,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     disabled: BooleanConstructor;
-    textAlign: PropType<import("csstype").TextAlignProperty | undefined>;
+    textAlign: PropType<SubmitBarTextAlign>;
     buttonText: StringConstructor;
     buttonType: {
         type: PropType<ButtonType>;
@@ -52,7 +82,7 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     label?: string | undefined;
     price?: number | undefined;
-    textAlign?: import("csstype").TextAlignProperty | undefined;
+    textAlign?: SubmitBarTextAlign | undefined;
     tip?: string | undefined;
     tipIcon?: string | undefined;
     buttonText?: string | undefined;

package/lib/submit-bar/SubmitBar.js

@@ -13,31 +13,34 @@ var _button = require("../button");
 
 // Components
 var [name, bem, t] = (0, _utils.createNamespace)('submit-bar');
+var submitBarProps = {
+  tip: String,
+  label: String,
+  price: Number,
+  tipIcon: String,
+  loading: Boolean,
+  currency: (0, _utils.makeStringProp)('¥'),
+  disabled: Boolean,
+  textAlign: String,
+  buttonText: String,
+  buttonType: (0, _utils.makeStringProp)('danger'),
+  buttonColor: String,
+  suffixLabel: String,
+  decimalLength: (0, _utils.makeNumericProp)(2),
+  safeAreaInsetBottom: _utils.truthProp
+};
 
 var _default = (0, _vue.defineComponent)({
   name,
-  props: {
-    tip: String,
-    label: String,
-    price: Number,
-    tipIcon: String,
-    loading: Boolean,
-    currency: (0, _utils.makeStringProp)('¥'),
-    disabled: Boolean,
-    textAlign: String,
-    buttonText: String,
-    buttonType: (0, _utils.makeStringProp)('danger'),
-    buttonColor: String,
-    suffixLabel: String,
-    decimalLength: (0, _utils.makeNumericProp)(2),
-    safeAreaInsetBottom: _utils.truthProp
-  },
+  props: submitBarProps,
   emits: ['submit'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      emit,
+      slots
+    } = _ref;
+
     var renderText = () => {
       var {
         price,