vant 3.2.6 → 3.3.1

package/es/divider/var.less

@@ -1,7 +1,7 @@
 @import '../style/var.less';
 
 @divider-margin: var(--van-padding-md) 0;
-@divider-text-color: var(--van-gray-6);
+@divider-text-color: var(--van-text-color-2);
 @divider-font-size: var(--van-font-size-md);
 @divider-line-height: 24px;
 @divider-border-color: var(--van-border-color);

package/es/dropdown-item/DropdownItem.d.ts

@@ -1,6 +1,6 @@
 import { PropType, ExtractPropTypes } from 'vue';
 import type { DropdownItemOption } from './types';
-declare const props: {
+declare const dropdownItemProps: {
     title: StringConstructor;
     options: {
         type: PropType<DropdownItemOption[]>;
@@ -15,7 +15,7 @@ declare const props: {
     modelValue: PropType<unknown>;
     titleClass: PropType<unknown>;
 };
-export declare type DropdownItemProps = ExtractPropTypes<typeof props>;
+export declare type DropdownItemProps = ExtractPropTypes<typeof dropdownItemProps>;
 declare const _default: import("vue").DefineComponent<{
     title: StringConstructor;
     options: {

package/es/dropdown-item/DropdownItem.js

@@ -12,7 +12,7 @@ import { Icon } from '../icon';
 import { Popup } from '../popup'; // Types
 
 var [name, bem] = createNamespace('dropdown-item');
-var props = {
+var dropdownItemProps = {
   title: String,
   options: makeArrayProp(),
   disabled: Boolean,
@@ -23,20 +23,22 @@ var props = {
 };
 export default defineComponent({
   name,
-  props,
+  props: dropdownItemProps,
   emits: ['open', 'opened', 'close', 'closed', 'change', 'update:modelValue'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      emit,
+      slots
+    } = _ref;
     var state = reactive({
       showPopup: false,
       transition: true,
       showWrapper: false
     });
     var {
-      parent
+      parent,
+      index
     } = useParent(DROPDOWN_KEY);
 
     if (!parent) {
@@ -65,7 +67,15 @@ export default defineComponent({
       }
     };
 
-    var toggle = (show = !state.showPopup, options = {}) => {
+    var toggle = function (show, options) {
+      if (show === void 0) {
+        show = !state.showPopup;
+      }
+
+      if (options === void 0) {
+        options = {};
+      }
+
       if (show === state.showPopup) {
         return;
       }
@@ -117,7 +127,7 @@ export default defineComponent({
       };
 
       return _createVNode(Cell, {
-        "clickable": true,
+        "role": "menuitem",
         "key": option.value,
         "icon": option.icon,
         "title": option.text,
@@ -127,6 +137,8 @@ export default defineComponent({
         "style": {
           color: active ? activeColor : ''
         },
+        "tabindex": active ? 0 : -1,
+        "clickable": true,
         "onClick": onClick
       }, {
         value: renderIcon
@@ -159,6 +171,7 @@ export default defineComponent({
       }, [_createVNode(Popup, {
         "show": state.showPopup,
         "onUpdate:show": $event => state.showPopup = $event,
+        "role": "menu",
         "class": bem('content'),
         "overlay": overlay,
         "position": direction === 'down' ? 'top' : 'bottom',
@@ -167,6 +180,7 @@ export default defineComponent({
         "overlayStyle": {
           position: 'absolute'
         },
+        "aria-labelledby": parent.id + "-" + index.value,
         "closeOnClickOverlay": closeOnClickOverlay,
         "onOpen": onOpen,
         "onClose": onClose,

package/es/dropdown-item/types.d.ts

@@ -9,17 +9,13 @@ export declare type DropdownItemExpose = {
     toggle: (show?: boolean, options?: {
         immediate?: boolean;
     }) => void;
-    /**
-     * @private
-     */
+    /** @private */
     state: {
         showPopup: boolean;
         transition: boolean;
         showWrapper: boolean;
     };
-    /**
-     * @private
-     */
+    /** @private */
     renderTitle: () => string | VNode[];
 };
 export declare type DropdownItemInstance = ComponentPublicInstance<DropdownItemProps, DropdownItemExpose>;

package/es/dropdown-menu/DropdownMenu.d.ts

@@ -1,6 +1,6 @@
 import { InjectionKey, ExtractPropTypes } from 'vue';
 import type { DropdownMenuProvide, DropdownMenuDirection } from './types';
-declare const props: {
+declare const dropdownMenuProps: {
     overlay: {
         type: BooleanConstructor;
         default: true;
@@ -24,7 +24,7 @@ declare const props: {
         default: true;
     };
 };
-export declare type DropdownMenuProps = ExtractPropTypes<typeof props>;
+export declare type DropdownMenuProps = ExtractPropTypes<typeof dropdownMenuProps>;
 export declare const DROPDOWN_KEY: InjectionKey<DropdownMenuProvide>;
 declare const _default: import("vue").DefineComponent<{
     overlay: {

package/es/dropdown-menu/DropdownMenu.js

@@ -1,12 +1,13 @@
 import { createVNode as _createVNode } from "vue";
 import { ref, computed, defineComponent } from 'vue'; // Utils
 
-import { isDef, truthProp, numericProp, makeStringProp, makeNumericProp, createNamespace } from '../utils'; // Composables
+import { isDef, truthProp, numericProp, windowHeight, makeStringProp, makeNumericProp, createNamespace, HAPTICS_FEEDBACK } from '../utils'; // Composables
 
+import { useId } from '../composables/use-id';
 import { useRect, useChildren, useClickAway, useScrollParent, useEventListener } from '@vant/use'; // Types
 
 var [name, bem] = createNamespace('dropdown-menu');
-var props = {
+var dropdownMenuProps = {
   overlay: truthProp,
   zIndex: numericProp,
   duration: makeNumericProp(0.2),
@@ -18,11 +19,13 @@ var props = {
 export var DROPDOWN_KEY = Symbol(name);
 export default defineComponent({
   name,
-  props,
+  props: dropdownMenuProps,
 
-  setup(props, {
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      slots
+    } = _ref;
+    var id = useId();
     var root = ref();
     var barRef = ref();
     var offset = ref(0);
@@ -55,7 +58,7 @@ export default defineComponent({
         if (props.direction === 'down') {
           offset.value = rect.bottom;
         } else {
-          offset.value = window.innerHeight - rect.top;
+          offset.value = windowHeight.value - rect.top;
         }
       }
     };
@@ -88,11 +91,14 @@ export default defineComponent({
         titleClass
       } = item;
       return _createVNode("div", {
+        "id": id + "-" + index,
         "role": "button",
-        "tabindex": disabled ? -1 : 0,
-        "class": bem('item', {
+        "tabindex": disabled ? undefined : 0,
+        "class": [bem('item', {
           disabled
-        }),
+        }), {
+          [HAPTICS_FEEDBACK]: !disabled
+        }],
         "onClick": () => {
           if (!disabled) {
             toggleItem(index);
@@ -112,6 +118,7 @@ export default defineComponent({
     };
 
     linkChildren({
+      id,
       props,
       offset
     });

package/es/dropdown-menu/index.css

@@ -1 +1 @@
-:root{--van-dropdown-menu-height:48px;--van-dropdown-menu-background-color:var(--van-white);--van-dropdown-menu-box-shadow:0 2px 12px rgba(100, 101, 102, 0.12);--van-dropdown-menu-title-font-size:15px;--van-dropdown-menu-title-text-color:var(--van-text-color);--van-dropdown-menu-title-active-text-color:var(--van-danger-color);--van-dropdown-menu-title-disabled-text-color:var(--van-gray-6);--van-dropdown-menu-title-padding:0 var(--van-padding-xs);--van-dropdown-menu-title-line-height:var(--van-line-height-lg);--van-dropdown-menu-option-active-color:var(--van-danger-color);--van-dropdown-menu-content-max-height:80%}.van-dropdown-menu{-webkit-user-select:none;user-select:none}.van-dropdown-menu__bar{position:relative;display:flex;height:var(--van-dropdown-menu-height);background:var(--van-dropdown-menu-background-color);box-shadow:var(--van-dropdown-menu-box-shadow)}.van-dropdown-menu__bar--opened{z-index:calc(var(--van-dropdown-item-z-index) + 1)}.van-dropdown-menu__item{display:flex;flex:1;align-items:center;justify-content:center;min-width:0;cursor:pointer}.van-dropdown-menu__item:active{opacity:var(--van-active-opacity)}.van-dropdown-menu__item--disabled:active{opacity:1}.van-dropdown-menu__item--disabled .van-dropdown-menu__title{color:var(--van-dropdown-menu-title-disabled-text-color)}.van-dropdown-menu__title{position:relative;box-sizing:border-box;max-width:100%;padding:var(--van-dropdown-menu-title-padding);color:var(--van-dropdown-menu-title-text-color);font-size:var(--van-dropdown-menu-title-font-size);line-height:var(--van-dropdown-menu-title-line-height)}.van-dropdown-menu__title::after{position:absolute;top:50%;right:-4px;margin-top:-5px;border:3px solid;border-color:transparent transparent var(--van-gray-4) var(--van-gray-4);transform:rotate(-45deg);opacity:.8;content:''}.van-dropdown-menu__title--active{color:var(--van-dropdown-menu-title-active-text-color)}.van-dropdown-menu__title--active::after{border-color:transparent transparent currentColor currentColor}.van-dropdown-menu__title--down::after{margin-top:-1px;transform:rotate(135deg)}
+:root{--van-dropdown-menu-height:48px;--van-dropdown-menu-background-color:var(--van-background-color-light);--van-dropdown-menu-box-shadow:0 2px 12px rgba(100, 101, 102, 0.12);--van-dropdown-menu-title-font-size:15px;--van-dropdown-menu-title-text-color:var(--van-text-color);--van-dropdown-menu-title-active-text-color:var(--van-danger-color);--van-dropdown-menu-title-disabled-text-color:var(--van-text-color-2);--van-dropdown-menu-title-padding:0 var(--van-padding-xs);--van-dropdown-menu-title-line-height:var(--van-line-height-lg);--van-dropdown-menu-option-active-color:var(--van-danger-color);--van-dropdown-menu-content-max-height:80%}.van-dropdown-menu{-webkit-user-select:none;user-select:none}.van-dropdown-menu__bar{position:relative;display:flex;height:var(--van-dropdown-menu-height);background:var(--van-dropdown-menu-background-color);box-shadow:var(--van-dropdown-menu-box-shadow)}.van-dropdown-menu__bar--opened{z-index:calc(var(--van-dropdown-item-z-index) + 1)}.van-dropdown-menu__item{display:flex;flex:1;align-items:center;justify-content:center;min-width:0;cursor:pointer}.van-dropdown-menu__item--disabled .van-dropdown-menu__title{color:var(--van-dropdown-menu-title-disabled-text-color)}.van-dropdown-menu__title{position:relative;box-sizing:border-box;max-width:100%;padding:var(--van-dropdown-menu-title-padding);color:var(--van-dropdown-menu-title-text-color);font-size:var(--van-dropdown-menu-title-font-size);line-height:var(--van-dropdown-menu-title-line-height)}.van-dropdown-menu__title::after{position:absolute;top:50%;right:-4px;margin-top:-5px;border:3px solid;border-color:transparent transparent var(--van-gray-4) var(--van-gray-4);transform:rotate(-45deg);opacity:.8;content:''}.van-dropdown-menu__title--active{color:var(--van-dropdown-menu-title-active-text-color)}.van-dropdown-menu__title--active::after{border-color:transparent transparent currentColor currentColor}.van-dropdown-menu__title--down::after{margin-top:-1px;transform:rotate(135deg)}

package/es/dropdown-menu/index.less

@@ -38,15 +38,7 @@
     min-width: 0; // hack for flex ellipsis
     cursor: pointer;
 
-    &:active {
-      opacity: var(--van-active-opacity);
-    }
-
     &--disabled {
-      &:active {
-        opacity: 1;
-      }
-
       .van-dropdown-menu__title {
         color: var(--van-dropdown-menu-title-disabled-text-color);
       }

package/es/dropdown-menu/types.d.ts

@@ -2,6 +2,7 @@ import type { Ref } from 'vue';
 import type { DropdownMenuProps } from './DropdownMenu';
 export declare type DropdownMenuDirection = 'up' | 'down';
 export declare type DropdownMenuProvide = {
+    id: string;
     props: DropdownMenuProps;
     offset: Ref<number>;
 };

package/es/dropdown-menu/var.less

@@ -1,12 +1,12 @@
 @import '../style/var.less';
 
 @dropdown-menu-height: 48px;
-@dropdown-menu-background-color: var(--van-white);
+@dropdown-menu-background-color: var(--van-background-color-light);
 @dropdown-menu-box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
 @dropdown-menu-title-font-size: 15px;
 @dropdown-menu-title-text-color: var(--van-text-color);
 @dropdown-menu-title-active-text-color: var(--van-danger-color);
-@dropdown-menu-title-disabled-text-color: var(--van-gray-6);
+@dropdown-menu-title-disabled-text-color: var(--van-text-color-2);
 @dropdown-menu-title-padding: 0 var(--van-padding-xs);
 @dropdown-menu-title-line-height: var(--van-line-height-lg);
 @dropdown-menu-option-active-color: var(--van-danger-color);

package/es/empty/Empty.d.ts

@@ -1,3 +1,13 @@
+import { ExtractPropTypes } from 'vue';
+declare const emptyProps: {
+    image: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    imageSize: (NumberConstructor | StringConstructor)[];
+    description: StringConstructor;
+};
+export declare type EmptyProps = ExtractPropTypes<typeof emptyProps>;
 declare const _default: import("vue").DefineComponent<{
     image: {
         type: import("vue").PropType<string>;

package/es/empty/Empty.js

@@ -4,17 +4,20 @@ import { numericProp, getSizeStyle, makeStringProp, createNamespace } from '../u
 import { Network } from './Network';
 var [name, bem] = createNamespace('empty');
 var PRESET_IMAGES = ['error', 'search', 'default'];
+var emptyProps = {
+  image: makeStringProp('default'),
+  imageSize: numericProp,
+  description: String
+};
 export default defineComponent({
   name,
-  props: {
-    image: makeStringProp('default'),
-    imageSize: numericProp,
-    description: String
-  },
+  props: emptyProps,
+
+  setup(props, _ref) {
+    var {
+      slots
+    } = _ref;
 
-  setup(props, {
-    slots
-  }) {
     var renderImage = () => {
       if (slots.image) {
         return slots.image();

package/es/empty/Network.js

@@ -11,71 +11,59 @@ export var Network = _createVNode("svg", {
   "viewBox": "0 0 160 160"
 }, [_createVNode("defs", null, [_createVNode("linearGradient", {
   "id": prefix + "1",
-  "x1": "64.022%",
+  "x1": "64%",
   "y1": "100%",
-  "x2": "64.022%"
+  "x2": "64%"
 }, [renderStop('#FFF', 0, 0.5), renderStop('#F2F3F5', 100)]), _createVNode("linearGradient", {
   "id": prefix + "2",
   "x1": "50%",
   "x2": "50%",
-  "y2": "84.459%"
+  "y2": "84%"
 }, [renderStop('#EBEDF0', 0), renderStop('#DCDEE0', 100, 0)]), _createVNode("linearGradient", {
   "id": prefix + "3",
   "x1": "100%",
   "x2": "100%",
   "y2": "100%"
-}, [renderStop('#EAEDF0', 0), renderStop('#DCDEE0', 100)]), _createVNode("linearGradient", {
-  "id": prefix + "4",
-  "x1": "100%",
-  "y1": "100%",
-  "x2": "100%"
 }, [renderStop('#EAEDF0', 0), renderStop('#DCDEE0', 100)]), _createVNode("radialGradient", {
-  "id": prefix + "5",
+  "id": prefix + "4",
   "cx": "50%",
   "cy": "0%",
   "fx": "50%",
   "fy": "0%",
   "r": "100%",
-  "gradientTransform": "matrix(0 1 -.54835 0 .5 -.5)"
+  "gradientTransform": "matrix(0 1 -.54 0 .5 -.5)"
 }, [renderStop('#EBEDF0', 0), renderStop('#FFF', 100, 0)])]), _createVNode("g", {
   "fill": "none"
 }, [_createVNode("g", {
   "opacity": ".8"
 }, [_createVNode("path", {
-  "d": "M0 124V46h20v20h14v58H0z",
-  "fill": "url(#" + prefix + "1)",
-  "transform": "matrix(-1 0 0 1 36 7)"
+  "d": "M36 131V53H16v20H2v58h34z",
+  "fill": "url(#" + prefix + "1)"
 }, null), _createVNode("path", {
-  "d": "M121 8h22.231v14H152v77.37h-31V8z",
-  "fill": "url(#" + prefix + "1)",
-  "transform": "translate(2 7)"
+  "d": "M123 15h22v14h9v77h-31V15z",
+  "fill": "url(#" + prefix + "1)"
 }, null)]), _createVNode("path", {
-  "fill": "url(#" + prefix + "5)",
+  "fill": "url(#" + prefix + "4)",
   "d": "M0 139h160v21H0z"
 }, null), _createVNode("path", {
-  "d": "M37 18a7 7 0 013 13.326v26.742c0 1.23-.997 2.227-2.227 2.227h-1.546A2.227 2.227 0 0134 58.068V31.326A7 7 0 0137 18z",
-  "fill": "url(#" + prefix + "2)",
-  "transform": "translate(43 36)"
+  "d": "M80 54a7 7 0 0 1 3 13v27l-2 2h-2a2 2 0 0 1-2-2V67a7 7 0 0 1 3-13z",
+  "fill": "url(#" + prefix + "2)"
 }, null), _createVNode("g", {
   "opacity": ".6",
   "stroke-linecap": "round",
   "stroke-width": "7"
 }, [_createVNode("path", {
-  "d": "M20.875 11.136a18.868 18.868 0 00-5.284 13.121c0 5.094 2.012 9.718 5.284 13.12",
-  "stroke": "url(#" + prefix + "3)",
-  "transform": "translate(43 36)"
+  "d": "M64 47a19 19 0 0 0-5 13c0 5 2 10 5 13",
+  "stroke": "url(#" + prefix + "3)"
 }, null), _createVNode("path", {
-  "d": "M9.849 0C3.756 6.225 0 14.747 0 24.146c0 9.398 3.756 17.92 9.849 24.145",
-  "stroke": "url(#" + prefix + "3)",
-  "transform": "translate(43 36)"
+  "d": "M53 36a34 34 0 0 0 0 48",
+  "stroke": "url(#" + prefix + "3)"
 }, null), _createVNode("path", {
-  "d": "M57.625 11.136a18.868 18.868 0 00-5.284 13.121c0 5.094 2.012 9.718 5.284 13.12",
-  "stroke": "url(#" + prefix + "4)",
-  "transform": "rotate(-180 76.483 42.257)"
+  "d": "M95 73a19 19 0 0 0 6-13c0-5-2-9-6-13",
+  "stroke": "url(#" + prefix + "3)"
 }, null), _createVNode("path", {
-  "d": "M73.216 0c-6.093 6.225-9.849 14.747-9.849 24.146 0 9.398 3.756 17.92 9.849 24.145",
-  "stroke": "url(#" + prefix + "4)",
-  "transform": "rotate(-180 89.791 42.146)"
+  "d": "M106 84a34 34 0 0 0 0-48",
+  "stroke": "url(#" + prefix + "3)"
 }, null)]), _createVNode("g", {
   "transform": "translate(31 105)"
 }, [_createVNode("rect", {
@@ -89,12 +77,12 @@ export var Network = _createVNode("svg", {
   "y": "8",
   "width": "80",
   "height": "18",
-  "rx": "1.114"
+  "rx": "1.1"
 }, null), _createVNode("rect", {
   "fill": "#EBEDF0",
   "x": "15",
   "y": "12",
   "width": "18",
   "height": "6",
-  "rx": "1.114"
+  "rx": "1.1"
 }, null)])])]);

package/es/empty/index.css

@@ -1 +1 @@
-:root{--van-empty-padding:var(--van-padding-xl) 0;--van-empty-image-size:160px;--van-empty-description-margin-top:var(--van-padding-md);--van-empty-description-padding:0 60px;--van-empty-description-color:var(--van-gray-6);--van-empty-description-font-size:var(--van-font-size-md);--van-empty-description-line-height:var(--van-line-height-md);--van-empty-bottom-margin-top:24px}.van-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;padding:var(--van-empty-padding)}.van-empty__image{width:var(--van-empty-image-size);height:var(--van-empty-image-size)}.van-empty__image img{width:100%;height:100%}.van-empty__description{margin-top:var(--van-empty-description-margin-top);padding:var(--van-empty-description-padding);color:var(--van-empty-description-color);font-size:var(--van-empty-description-font-size);line-height:var(--van-empty-description-line-height)}.van-empty__bottom{margin-top:var(--van-empty-bottom-margin-top)}
+:root{--van-empty-padding:var(--van-padding-xl) 0;--van-empty-image-size:160px;--van-empty-description-margin-top:var(--van-padding-md);--van-empty-description-padding:0 60px;--van-empty-description-color:var(--van-text-color-2);--van-empty-description-font-size:var(--van-font-size-md);--van-empty-description-line-height:var(--van-line-height-md);--van-empty-bottom-margin-top:24px}.van-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;padding:var(--van-empty-padding)}.van-empty__image{width:var(--van-empty-image-size);height:var(--van-empty-image-size)}.van-empty__image img{width:100%;height:100%}.van-empty__description{margin-top:var(--van-empty-description-margin-top);padding:var(--van-empty-description-padding);color:var(--van-empty-description-color);font-size:var(--van-empty-description-font-size);line-height:var(--van-empty-description-line-height)}.van-empty__bottom{margin-top:var(--van-empty-bottom-margin-top)}

package/es/empty/index.d.ts

@@ -18,3 +18,4 @@ export declare const Empty: import("../utils").WithInstall<import("vue").DefineC
     image: string;
 }>>;
 export default Empty;
+export type { EmptyProps } from './Empty';

package/es/empty/var.less

@@ -4,7 +4,7 @@
 @empty-image-size: 160px;
 @empty-description-margin-top: var(--van-padding-md);
 @empty-description-padding: 0 60px;
-@empty-description-color: var(--van-gray-6);
+@empty-description-color: var(--van-text-color-2);
 @empty-description-font-size: var(--van-font-size-md);
 @empty-description-line-height: var(--van-line-height-md);
 @empty-bottom-margin-top: 24px;

package/es/field/Field.d.ts

@@ -42,9 +42,9 @@ export declare const fieldSharedProps: {
         default: null;
     };
 };
-declare const props: {
+declare const fieldProps: {
     icon: StringConstructor;
-    size: PropType<"large">;
+    size: PropType<import("../cell").CellSize>;
     title: (NumberConstructor | StringConstructor)[];
     value: (NumberConstructor | StringConstructor)[];
     label: (NumberConstructor | StringConstructor)[];
@@ -124,10 +124,10 @@ declare const props: {
         default: null;
     };
 };
-export declare type FieldProps = ExtractPropTypes<typeof props>;
+export declare type FieldProps = ExtractPropTypes<typeof fieldProps>;
 declare const _default: import("vue").DefineComponent<{
     icon: StringConstructor;
-    size: PropType<"large">;
+    size: PropType<import("../cell").CellSize>;
     title: (NumberConstructor | StringConstructor)[];
     value: (NumberConstructor | StringConstructor)[];
     label: (NumberConstructor | StringConstructor)[];
@@ -277,13 +277,13 @@ declare const _default: import("vue").DefineComponent<{
     autocomplete?: string | undefined;
     value?: string | number | undefined;
     icon?: string | undefined;
-    size?: "large" | undefined;
+    size?: import("../cell").CellSize | undefined;
+    id?: string | undefined;
     valueClass?: unknown;
     labelClass?: unknown;
     titleClass?: unknown;
     titleStyle?: string | import("vue").CSSProperties | undefined;
     arrowDirection?: import("../cell").CellArrowDirection | undefined;
-    id?: string | undefined;
     leftIcon?: string | undefined;
     rightIcon?: string | undefined;
     maxlength?: string | number | undefined;