vant 3.2.4 → 3.2.8

package/lib/cascader/Cascader.js

@@ -15,36 +15,30 @@ var _icon = require("../icon");
 
 // Components
 var [name, bem, t] = (0, _utils.createNamespace)('cascader');
+var cascaderProps = {
+  title: String,
+  options: (0, _utils.makeArrayProp)(),
+  closeable: _utils.truthProp,
+  swipeable: _utils.truthProp,
+  closeIcon: (0, _utils.makeStringProp)('cross'),
+  modelValue: _utils.numericProp,
+  fieldNames: Object,
+  placeholder: String,
+  activeColor: String
+};
 
 var _default = (0, _vue.defineComponent)({
   name,
-  props: {
-    title: String,
-    closeable: _utils.truthProp,
-    swipeable: _utils.truthProp,
-    modelValue: [Number, String],
-    fieldNames: Object,
-    placeholder: String,
-    activeColor: String,
-    options: {
-      type: Array,
-      default: () => []
-    },
-    closeIcon: {
-      type: String,
-      default: 'cross'
-    }
-  },
-  emits: ['close', 'change', 'finish', 'update:modelValue', 'click-tab'],
-
-  setup(props, {
-    slots,
-    emit
-  }) {
-    var state = (0, _vue.reactive)({
-      tabs: [],
-      activeTab: 0
-    });
+  props: cascaderProps,
+  emits: ['close', 'change', 'finish', 'click-tab', 'update:modelValue'],
+
+  setup(props, _ref) {
+    var {
+      slots,
+      emit
+    } = _ref;
+    var tabs = (0, _vue.ref)([]);
+    var activeTab = (0, _vue.ref)(0);
     var {
       text: textKey,
       value: valueKey,
@@ -56,9 +50,7 @@ var _default = (0, _vue.defineComponent)({
     }, props.fieldNames);
 
     var getSelectedOptionsByValue = (options, value) => {
-      for (var i = 0; i < options.length; i++) {
-        var option = options[i];
-
+      for (var option of options) {
         if (option[valueKey] === value) {
           return [option];
         }
@@ -74,15 +66,20 @@ var _default = (0, _vue.defineComponent)({
     };
 
     var updateTabs = () => {
-      if (props.modelValue || props.modelValue === 0) {
-        var selectedOptions = getSelectedOptionsByValue(props.options, props.modelValue);
+      var {
+        options,
+        modelValue
+      } = props;
+
+      if (modelValue !== undefined) {
+        var selectedOptions = getSelectedOptionsByValue(options, modelValue);
 
         if (selectedOptions) {
-          var optionsCursor = props.options;
-          state.tabs = selectedOptions.map(option => {
+          var optionsCursor = options;
+          tabs.value = selectedOptions.map(option => {
             var tab = {
               options: optionsCursor,
-              selectedOption: option
+              selected: option
             };
             var next = optionsCursor.find(item => item[valueKey] === option[valueKey]);
 
@@ -94,22 +91,22 @@ var _default = (0, _vue.defineComponent)({
           });
 
           if (optionsCursor) {
-            state.tabs.push({
+            tabs.value.push({
               options: optionsCursor,
-              selectedOption: null
+              selected: null
             });
           }
 
           (0, _vue.nextTick)(() => {
-            state.activeTab = state.tabs.length - 1;
+            activeTab.value = tabs.value.length - 1;
           });
           return;
         }
       }
 
-      state.tabs = [{
-        options: props.options,
-        selectedOption: null
+      tabs.value = [{
+        options,
+        selected: null
       }];
     };
 
@@ -118,49 +115,52 @@ var _default = (0, _vue.defineComponent)({
         return;
       }
 
-      state.tabs[tabIndex].selectedOption = option;
+      tabs.value[tabIndex].selected = option;
 
-      if (state.tabs.length > tabIndex + 1) {
-        state.tabs = state.tabs.slice(0, tabIndex + 1);
+      if (tabs.value.length > tabIndex + 1) {
+        tabs.value = tabs.value.slice(0, tabIndex + 1);
       }
 
       if (option[childrenKey]) {
         var nextTab = {
           options: option[childrenKey],
-          selectedOption: null
+          selected: null
         };
 
-        if (state.tabs[tabIndex + 1]) {
-          state.tabs[tabIndex + 1] = nextTab;
+        if (tabs.value[tabIndex + 1]) {
+          tabs.value[tabIndex + 1] = nextTab;
         } else {
-          state.tabs.push(nextTab);
+          tabs.value.push(nextTab);
         }
 
         (0, _vue.nextTick)(() => {
-          state.activeTab++;
+          activeTab.value++;
         });
       }
 
-      var selectedOptions = state.tabs.map(tab => tab.selectedOption).filter(Boolean);
-      var eventParams = {
+      var selectedOptions = tabs.value.map(tab => tab.selected).filter(Boolean);
+      emit('update:modelValue', option[valueKey]);
+      var params = {
         value: option[valueKey],
         tabIndex,
         selectedOptions
       };
-      emit('update:modelValue', option[valueKey]);
-      emit('change', eventParams);
+      emit('change', params);
 
       if (!option[childrenKey]) {
-        emit('finish', eventParams);
+        emit('finish', params);
       }
     };
 
     var onClose = () => emit('close');
 
-    var onClickTab = ({
-      name,
-      title
-    }) => emit('click-tab', name, title);
+    var onClickTab = _ref2 => {
+      var {
+        name,
+        title
+      } = _ref2;
+      return emit('click-tab', name, title);
+    };
 
     var renderHeader = () => (0, _vue.createVNode)("div", {
       "class": bem('header')
@@ -168,7 +168,7 @@ var _default = (0, _vue.defineComponent)({
       "class": bem('title')
     }, [slots.title ? slots.title() : props.title]), props.closeable ? (0, _vue.createVNode)(_icon.Icon, {
       "name": props.closeIcon,
-      "class": bem('close-icon'),
+      "class": [bem('close-icon'), _utils.HAPTICS_FEEDBACK],
       "onClick": onClose
     }, null) : null]);
 
@@ -199,24 +199,31 @@ var _default = (0, _vue.defineComponent)({
     }, [options.map(option => renderOption(option, selectedOption, tabIndex))]);
 
     var renderTab = (tab, tabIndex) => {
+      var _slots$optionsTop, _slots$optionsBottom;
+
       var {
         options,
-        selectedOption
+        selected
       } = tab;
-      var title = selectedOption ? selectedOption[textKey] : props.placeholder || t('select');
+      var placeholder = props.placeholder || t('select');
+      var title = selected ? selected[textKey] : placeholder;
       return (0, _vue.createVNode)(_tab.Tab, {
         "title": title,
         "titleClass": bem('tab', {
-          unselected: !selectedOption
+          unselected: !selected
         })
       }, {
-        default: () => [renderOptions(options, selectedOption, tabIndex)]
+        default: () => [(_slots$optionsTop = slots['options-top']) == null ? void 0 : _slots$optionsTop.call(slots, {
+          tabIndex
+        }), renderOptions(options, selected, tabIndex), (_slots$optionsBottom = slots['options-bottom']) == null ? void 0 : _slots$optionsBottom.call(slots, {
+          tabIndex
+        })]
       });
     };
 
     var renderTabs = () => (0, _vue.createVNode)(_tabs.Tabs, {
-      'active': state.activeTab,
-      "onUpdate:active": $event => state.activeTab = $event,
+      "active": activeTab.value,
+      "onUpdate:active": $event => activeTab.value = $event,
       "animated": true,
       "class": bem('tabs'),
       "color": props.activeColor,
@@ -224,7 +231,7 @@ var _default = (0, _vue.defineComponent)({
       "swipeable": props.swipeable,
       "onClick-tab": onClickTab
     }, {
-      default: () => [state.tabs.map(renderTab)]
+      default: () => [tabs.value.map(renderTab)]
     });
 
     updateTabs();
@@ -232,11 +239,11 @@ var _default = (0, _vue.defineComponent)({
       deep: true
     });
     (0, _vue.watch)(() => props.modelValue, value => {
-      if (value || value === 0) {
-        var values = state.tabs.map(tab => {
-          var _tab$selectedOption;
+      if (value !== undefined) {
+        var values = tabs.value.map(tab => {
+          var _tab$selected;
 
-          return (_tab$selectedOption = tab.selectedOption) == null ? void 0 : _tab$selectedOption[valueKey];
+          return (_tab$selected = tab.selected) == null ? void 0 : _tab$selected[valueKey];
         });
 
         if (values.includes(value)) {

package/lib/cascader/index.css

@@ -1 +1 @@
-:root{--van-cascader-header-height:48px;--van-cascader-header-padding:0 var(--van-padding-md);--van-cascader-title-font-size:var(--van-font-size-lg);--van-cascader-title-line-height:20px;--van-cascader-close-icon-size:22px;--van-cascader-close-icon-color:var(--van-gray-5);--van-cascader-close-icon-active-color:var(--van-gray-6);--van-cascader-selected-icon-size:18px;--van-cascader-tabs-height:48px;--van-cascader-active-color:var(--van-danger-color);--van-cascader-options-height:384px;--van-cascader-option-disabled-color:var(--van-gray-5);--van-cascader-tab-color:var(--van-text-color);--van-cascader-unselected-tab-color:var(--van-gray-6)}.van-cascader__header{display:flex;align-items:center;justify-content:space-between;height:var(--van-cascader-header-height);padding:var(--van-cascader-header-padding)}.van-cascader__title{font-weight:var(--van-font-weight-bold);font-size:var(--van-cascader-title-font-size);line-height:var(--van-cascader-title-line-height)}.van-cascader__close-icon{color:var(--van-cascader-close-icon-color);font-size:var(--van-cascader-close-icon-size)}.van-cascader__close-icon:active{color:var(--van-cascader-close-icon-active-color)}.van-cascader__tabs .van-tab{flex:none;padding:0 10px}.van-cascader__tabs.van-tabs--line .van-tabs__wrap{height:var(--van-cascader-tabs-height)}.van-cascader__tabs .van-tabs__nav--complete{padding-right:6px;padding-left:6px}.van-cascader__tab{color:var(--van-cascader-tab-color);font-weight:var(--van-font-weight-bold)}.van-cascader__tab--unselected{color:var(--van-cascader-unselected-tab-color);font-weight:400}.van-cascader__option{display:flex;align-items:center;justify-content:space-between;padding:10px var(--van-padding-md);font-size:var(--van-font-size-md);line-height:var(--van-line-height-md);cursor:pointer}.van-cascader__option:active{background-color:var(--van-active-color)}.van-cascader__option--selected{color:var(--van-cascader-active-color);font-weight:var(--van-font-weight-bold)}.van-cascader__option--disabled{color:var(--van-cascader-option-disabled-color);cursor:not-allowed}.van-cascader__option--disabled:active{background-color:transparent}.van-cascader__selected-icon{font-size:var(--van-cascader-selected-icon-size)}.van-cascader__options{box-sizing:border-box;height:var(--van-cascader-options-height);padding-top:6px;overflow-y:auto;-webkit-overflow-scrolling:touch}
+:root{--van-cascader-header-height:48px;--van-cascader-header-padding:0 var(--van-padding-md);--van-cascader-title-font-size:var(--van-font-size-lg);--van-cascader-title-line-height:20px;--van-cascader-close-icon-size:22px;--van-cascader-close-icon-color:var(--van-gray-5);--van-cascader-selected-icon-size:18px;--van-cascader-tabs-height:48px;--van-cascader-active-color:var(--van-danger-color);--van-cascader-options-height:384px;--van-cascader-option-disabled-color:var(--van-text-color-3);--van-cascader-tab-color:var(--van-text-color);--van-cascader-unselected-tab-color:var(--van-text-color-2)}.van-cascader__header{display:flex;align-items:center;justify-content:space-between;height:var(--van-cascader-header-height);padding:var(--van-cascader-header-padding)}.van-cascader__title{font-weight:var(--van-font-weight-bold);font-size:var(--van-cascader-title-font-size);line-height:var(--van-cascader-title-line-height)}.van-cascader__close-icon{color:var(--van-cascader-close-icon-color);font-size:var(--van-cascader-close-icon-size)}.van-cascader__tabs .van-tab{flex:none;padding:0 10px}.van-cascader__tabs.van-tabs--line .van-tabs__wrap{height:var(--van-cascader-tabs-height)}.van-cascader__tabs .van-tabs__nav--complete{padding-right:6px;padding-left:6px}.van-cascader__tab{color:var(--van-cascader-tab-color);font-weight:var(--van-font-weight-bold)}.van-cascader__tab--unselected{color:var(--van-cascader-unselected-tab-color);font-weight:400}.van-cascader__option{display:flex;align-items:center;justify-content:space-between;padding:10px var(--van-padding-md);font-size:var(--van-font-size-md);line-height:var(--van-line-height-md);cursor:pointer}.van-cascader__option:active{background-color:var(--van-active-color)}.van-cascader__option--selected{color:var(--van-cascader-active-color);font-weight:var(--van-font-weight-bold)}.van-cascader__option--disabled{color:var(--van-cascader-option-disabled-color);cursor:not-allowed}.van-cascader__option--disabled:active{background-color:transparent}.van-cascader__selected-icon{font-size:var(--van-cascader-selected-icon-size)}.van-cascader__options{box-sizing:border-box;height:var(--van-cascader-options-height);padding-top:6px;overflow-y:auto;-webkit-overflow-scrolling:touch}

package/lib/cascader/index.d.ts

@@ -1,5 +1,9 @@
 export declare const Cascader: import("../utils").WithInstall<import("vue").DefineComponent<{
     title: StringConstructor;
+    options: {
+        type: import("vue").PropType<import("./types").CascaderOption[]>;
+        default: () => never[];
+    };
     closeable: {
         type: BooleanConstructor;
         default: true;
@@ -8,39 +12,35 @@ export declare const Cascader: import("../utils").WithInstall<import("vue").Defi
         type: BooleanConstructor;
         default: true;
     };
-    modelValue: (NumberConstructor | StringConstructor)[];
-    fieldNames: import("vue").PropType<import("./Cascader").CascaderFieldNames>;
-    placeholder: StringConstructor;
-    activeColor: StringConstructor;
-    options: {
-        type: import("vue").PropType<import("./Cascader").CascaderOption[]>;
-        default: () => never[];
-    };
     closeIcon: {
-        type: StringConstructor;
+        type: import("vue").PropType<string>;
         default: string;
     };
+    modelValue: (NumberConstructor | StringConstructor)[];
+    fieldNames: import("vue").PropType<import("./types").CascaderFieldNames>;
+    placeholder: StringConstructor;
+    activeColor: StringConstructor;
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "close" | "click-tab" | "finish")[], "update:modelValue" | "change" | "close" | "click-tab" | "finish", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
     title?: unknown;
+    options?: unknown;
     closeable?: unknown;
     swipeable?: unknown;
+    closeIcon?: unknown;
     modelValue?: unknown;
     fieldNames?: unknown;
     placeholder?: unknown;
     activeColor?: unknown;
-    options?: unknown;
-    closeIcon?: unknown;
 } & {
-    closeable: boolean;
     closeIcon: string;
-    options: import("./Cascader").CascaderOption[];
+    closeable: boolean;
+    options: import("./types").CascaderOption[];
     swipeable: boolean;
 } & {
     title?: string | undefined;
-    placeholder?: string | undefined;
     modelValue?: string | number | undefined;
+    placeholder?: string | undefined;
     activeColor?: string | undefined;
-    fieldNames?: import("./Cascader").CascaderFieldNames | undefined;
+    fieldNames?: import("./types").CascaderFieldNames | undefined;
 }> & {
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -48,10 +48,11 @@ export declare const Cascader: import("../utils").WithInstall<import("vue").Defi
     "onClick-tab"?: ((...args: any[]) => any) | undefined;
     onFinish?: ((...args: any[]) => any) | undefined;
 }, {
-    closeable: boolean;
     closeIcon: string;
-    options: import("./Cascader").CascaderOption[];
+    closeable: boolean;
+    options: import("./types").CascaderOption[];
     swipeable: boolean;
 }>>;
 export default Cascader;
-export type { CascaderOption, CascaderFieldNames } from './Cascader';
+export type { CascaderProps } from './Cascader';
+export type { CascaderOption, CascaderFieldNames } from './types';

package/lib/cascader/index.less

@@ -7,7 +7,6 @@
   --van-cascader-title-line-height: @cascader-title-line-height;
   --van-cascader-close-icon-size: @cascader-close-icon-size;
   --van-cascader-close-icon-color: @cascader-close-icon-color;
-  --van-cascader-close-icon-active-color: @cascader-close-icon-active-color;
   --van-cascader-selected-icon-size: @cascader-selected-icon-size;
   --van-cascader-tabs-height: @cascader-tabs-height;
   --van-cascader-active-color: @cascader-active-color;
@@ -35,10 +34,6 @@
   &__close-icon {
     color: var(--van-cascader-close-icon-color);
     font-size: var(--van-cascader-close-icon-size);
-
-    &:active {
-      color: var(--van-cascader-close-icon-active-color);
-    }
   }
 
   &__tabs {

package/lib/cascader/types.d.ts

@@ -0,0 +1,18 @@
+export declare type CascaderOption = {
+    text?: string;
+    value?: string | number;
+    color?: string;
+    disabled?: boolean;
+    children?: CascaderOption[];
+    className?: unknown;
+    [key: PropertyKey]: any;
+};
+export declare type CascaderTab = {
+    options: CascaderOption[];
+    selected: CascaderOption | null;
+};
+export declare type CascaderFieldNames = {
+    text?: string;
+    value?: string;
+    children?: string;
+};

package/lib/cascader/types.js

@@ -0,0 +1,3 @@
+"use strict";
+
+exports.__esModule = true;

package/lib/cascader/var.less

@@ -6,11 +6,10 @@
 @cascader-title-line-height: 20px;
 @cascader-close-icon-size: 22px;
 @cascader-close-icon-color: var(--van-gray-5);
-@cascader-close-icon-active-color: var(--van-gray-6);
 @cascader-selected-icon-size: 18px;
 @cascader-tabs-height: 48px;
 @cascader-active-color: var(--van-danger-color);
 @cascader-options-height: 384px;
-@cascader-option-disabled-color: var(--van-gray-5);
+@cascader-option-disabled-color: var(--van-text-color-3);
 @cascader-tab-color: var(--van-text-color);
-@cascader-unselected-tab-color: var(--van-gray-6);
+@cascader-unselected-tab-color: var(--van-text-color-2);

package/lib/cell/Cell.d.ts

@@ -1,8 +1,9 @@
-import { PropType, CSSProperties } from 'vue';
+import { PropType, CSSProperties, ExtractPropTypes } from 'vue';
+export declare type CellSize = 'normal' | 'large';
 export declare type CellArrowDirection = 'up' | 'down' | 'left' | 'right';
-export declare const cellProps: {
+export declare const cellSharedProps: {
     icon: StringConstructor;
-    size: PropType<"large">;
+    size: PropType<CellSize>;
     title: (NumberConstructor | StringConstructor)[];
     value: (NumberConstructor | StringConstructor)[];
     label: (NumberConstructor | StringConstructor)[];
@@ -24,9 +25,38 @@ export declare const cellProps: {
         default: null;
     };
 };
+declare const cellProps: {
+    icon: StringConstructor;
+    size: PropType<CellSize>;
+    title: (NumberConstructor | StringConstructor)[];
+    value: (NumberConstructor | StringConstructor)[];
+    label: (NumberConstructor | StringConstructor)[];
+    center: BooleanConstructor;
+    isLink: BooleanConstructor;
+    border: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    required: BooleanConstructor;
+    iconPrefix: StringConstructor;
+    valueClass: PropType<unknown>;
+    labelClass: PropType<unknown>;
+    titleClass: PropType<unknown>;
+    titleStyle: PropType<string | CSSProperties>;
+    arrowDirection: PropType<CellArrowDirection>;
+    clickable: {
+        type: PropType<boolean | null>;
+        default: null;
+    };
+} & {
+    to: PropType<import("vue-router").RouteLocationRaw>;
+    url: StringConstructor;
+    replace: BooleanConstructor;
+};
+export declare type CellProps = ExtractPropTypes<typeof cellProps>;
 declare const _default: import("vue").DefineComponent<{
     icon: StringConstructor;
-    size: PropType<"large">;
+    size: PropType<CellSize>;
     title: (NumberConstructor | StringConstructor)[];
     value: (NumberConstructor | StringConstructor)[];
     label: (NumberConstructor | StringConstructor)[];
@@ -86,7 +116,7 @@ declare const _default: import("vue").DefineComponent<{
     iconPrefix?: string | undefined;
     value?: string | number | undefined;
     icon?: string | undefined;
-    size?: "large" | undefined;
+    size?: CellSize | undefined;
     valueClass?: unknown;
     labelClass?: unknown;
     titleClass?: unknown;

package/lib/cell/Cell.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = exports.cellProps = void 0;
+exports.default = exports.cellSharedProps = void 0;
 
 var _vue = require("vue");
 
@@ -15,12 +15,12 @@ var _icon = require("../icon");
 // Composables
 // Components
 var [name, bem] = (0, _utils.createNamespace)('cell');
-var cellProps = {
+var cellSharedProps = {
   icon: String,
   size: String,
-  title: [Number, String],
-  value: [Number, String],
-  label: [Number, String],
+  title: _utils.numericProp,
+  value: _utils.numericProp,
+  label: _utils.numericProp,
   center: Boolean,
   isLink: Boolean,
   border: _utils.truthProp,
@@ -36,21 +36,17 @@ var cellProps = {
     default: null
   }
 };
-exports.cellProps = cellProps;
+exports.cellSharedProps = cellSharedProps;
+var cellProps = (0, _utils.extend)({}, cellSharedProps, _useRoute.routeProps);
 
 var _default = (0, _vue.defineComponent)({
   name,
-  props: (0, _utils.extend)({}, cellProps, _useRoute.routeProps),
-
-  setup(props, {
-    slots
-  }) {
-    if (process.env.NODE_ENV !== 'production') {
-      if (slots.default) {
-        console.warn('[Vant] Cell: "default" slot is deprecated, please use "value" slot instead.');
-      }
-    }
+  props: cellProps,
 
+  setup(props, _ref) {
+    var {
+      slots
+    } = _ref;
     var route = (0, _useRoute.useRoute)();
 
     var renderLabel = () => {
@@ -73,8 +69,7 @@ var _default = (0, _vue.defineComponent)({
     };
 
     var renderValue = () => {
-      // default slot is deprecated
-      // should be removed in next major version
+      // slots.default is an alias of slots.value
       var slot = slots.value || slots.default;
       var hasValue = slot || (0, _utils.isDef)(props.value);
 

package/lib/cell/index.css

@@ -1 +1 @@
-:root{--van-cell-font-size:var(--van-font-size-md);--van-cell-line-height:24px;--van-cell-vertical-padding:10px;--van-cell-horizontal-padding:var(--van-padding-md);--van-cell-text-color:var(--van-text-color);--van-cell-background-color:var(--van-white);--van-cell-border-color:var(--van-border-color);--van-cell-active-color:var(--van-active-color);--van-cell-required-color:var(--van-danger-color);--van-cell-label-color:var(--van-gray-6);--van-cell-label-font-size:var(--van-font-size-sm);--van-cell-label-line-height:var(--van-line-height-sm);--van-cell-label-margin-top:var(--van-padding-base);--van-cell-value-color:var(--van-gray-6);--van-cell-icon-size:16px;--van-cell-right-icon-color:var(--van-gray-6);--van-cell-large-vertical-padding:var(--van-padding-sm);--van-cell-large-title-font-size:var(--van-font-size-lg);--van-cell-large-label-font-size:var(--van-font-size-md)}.van-cell{position:relative;display:flex;box-sizing:border-box;width:100%;padding:var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);overflow:hidden;color:var(--van-cell-text-color);font-size:var(--van-cell-font-size);line-height:var(--van-cell-line-height);background-color:var(--van-cell-background-color)}.van-cell::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-cell-border-color);transform:scaleY(.5)}.van-cell--borderless::after,.van-cell:last-child::after{display:none}.van-cell__label{margin-top:var(--van-cell-label-margin-top);color:var(--van-cell-label-color);font-size:var(--van-cell-label-font-size);line-height:var(--van-cell-label-line-height)}.van-cell__title,.van-cell__value{flex:1}.van-cell__value{position:relative;overflow:hidden;color:var(--van-cell-value-color);text-align:right;vertical-align:middle;word-wrap:break-word}.van-cell__value--alone{color:var(--van-text-color);text-align:left}.van-cell__left-icon,.van-cell__right-icon{height:var(--van-cell-line-height);font-size:var(--van-cell-icon-size);line-height:var(--van-cell-line-height)}.van-cell__left-icon{margin-right:var(--van-padding-base)}.van-cell__right-icon{margin-left:var(--van-padding-base);color:var(--van-cell-right-icon-color)}.van-cell--clickable{cursor:pointer}.van-cell--clickable:active{background-color:var(--van-cell-active-color)}.van-cell--required{overflow:visible}.van-cell--required::before{position:absolute;left:var(--van-padding-xs);color:var(--van-cell-required-color);font-size:var(--van-cell-font-size);content:'*'}.van-cell--center{align-items:center}.van-cell--large{padding-top:var(--van-cell-large-vertical-padding);padding-bottom:var(--van-cell-large-vertical-padding)}.van-cell--large .van-cell__title{font-size:var(--van-cell-large-title-font-size)}.van-cell--large .van-cell__label{font-size:var(--van-cell-large-label-font-size)}
+:root{--van-cell-font-size:var(--van-font-size-md);--van-cell-line-height:24px;--van-cell-vertical-padding:10px;--van-cell-horizontal-padding:var(--van-padding-md);--van-cell-text-color:var(--van-text-color);--van-cell-background-color:var(--van-background-color-light);--van-cell-border-color:var(--van-border-color);--van-cell-active-color:var(--van-active-color);--van-cell-required-color:var(--van-danger-color);--van-cell-label-color:var(--van-text-color-2);--van-cell-label-font-size:var(--van-font-size-sm);--van-cell-label-line-height:var(--van-line-height-sm);--van-cell-label-margin-top:var(--van-padding-base);--van-cell-value-color:var(--van-text-color-2);--van-cell-icon-size:16px;--van-cell-right-icon-color:var(--van-gray-6);--van-cell-large-vertical-padding:var(--van-padding-sm);--van-cell-large-title-font-size:var(--van-font-size-lg);--van-cell-large-label-font-size:var(--van-font-size-md)}.van-cell{position:relative;display:flex;box-sizing:border-box;width:100%;padding:var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);overflow:hidden;color:var(--van-cell-text-color);font-size:var(--van-cell-font-size);line-height:var(--van-cell-line-height);background:var(--van-cell-background-color)}.van-cell::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-cell-border-color);transform:scaleY(.5)}.van-cell--borderless::after,.van-cell:last-child::after{display:none}.van-cell__label{margin-top:var(--van-cell-label-margin-top);color:var(--van-cell-label-color);font-size:var(--van-cell-label-font-size);line-height:var(--van-cell-label-line-height)}.van-cell__title,.van-cell__value{flex:1}.van-cell__value{position:relative;overflow:hidden;color:var(--van-cell-value-color);text-align:right;vertical-align:middle;word-wrap:break-word}.van-cell__value--alone{color:var(--van-text-color);text-align:left}.van-cell__left-icon,.van-cell__right-icon{height:var(--van-cell-line-height);font-size:var(--van-cell-icon-size);line-height:var(--van-cell-line-height)}.van-cell__left-icon{margin-right:var(--van-padding-base)}.van-cell__right-icon{margin-left:var(--van-padding-base);color:var(--van-cell-right-icon-color)}.van-cell--clickable{cursor:pointer}.van-cell--clickable:active{background-color:var(--van-cell-active-color)}.van-cell--required{overflow:visible}.van-cell--required::before{position:absolute;left:var(--van-padding-xs);color:var(--van-cell-required-color);font-size:var(--van-cell-font-size);content:'*'}.van-cell--center{align-items:center}.van-cell--large{padding-top:var(--van-cell-large-vertical-padding);padding-bottom:var(--van-cell-large-vertical-padding)}.van-cell--large .van-cell__title{font-size:var(--van-cell-large-title-font-size)}.van-cell--large .van-cell__label{font-size:var(--van-cell-large-label-font-size)}

package/lib/cell/index.d.ts

@@ -1,6 +1,6 @@
 export declare const Cell: import("../utils").WithInstall<import("vue").DefineComponent<{
     icon: StringConstructor;
-    size: import("vue").PropType<"large">;
+    size: import("vue").PropType<import("./Cell").CellSize>;
     title: (NumberConstructor | StringConstructor)[];
     value: (NumberConstructor | StringConstructor)[];
     label: (NumberConstructor | StringConstructor)[];
@@ -60,7 +60,7 @@ export declare const Cell: import("../utils").WithInstall<import("vue").DefineCo
     iconPrefix?: string | undefined;
     value?: string | number | undefined;
     icon?: string | undefined;
-    size?: "large" | undefined;
+    size?: import("./Cell").CellSize | undefined;
     valueClass?: unknown;
     labelClass?: unknown;
     titleClass?: unknown;
@@ -75,4 +75,4 @@ export declare const Cell: import("../utils").WithInstall<import("vue").DefineCo
     clickable: boolean | null;
 }>>;
 export default Cell;
-export type { CellArrowDirection } from './Cell';
+export type { CellSize, CellProps, CellArrowDirection } from './Cell';

package/lib/cell/index.less

@@ -33,7 +33,7 @@
   color: var(--van-cell-text-color);
   font-size: var(--van-cell-font-size);
   line-height: var(--van-cell-line-height);
-  background-color: var(--van-cell-background-color);
+  background: var(--van-cell-background-color);
 
   &::after {
     .hairline-bottom(var(--van-cell-border-color), var(--van-padding-md), var(--van-padding-md));

package/lib/cell/var.less

@@ -5,15 +5,15 @@
 @cell-vertical-padding: 10px;
 @cell-horizontal-padding: var(--van-padding-md);
 @cell-text-color: var(--van-text-color);
-@cell-background-color: var(--van-white);
+@cell-background-color: var(--van-background-color-light);
 @cell-border-color: var(--van-border-color);
 @cell-active-color: var(--van-active-color);
 @cell-required-color: var(--van-danger-color);
-@cell-label-color: var(--van-gray-6);
+@cell-label-color: var(--van-text-color-2);
 @cell-label-font-size: var(--van-font-size-sm);
 @cell-label-line-height: var(--van-line-height-sm);
 @cell-label-margin-top: var(--van-padding-base);
-@cell-value-color: var(--van-gray-6);
+@cell-value-color: var(--van-text-color-2);
 @cell-icon-size: 16px;
 @cell-right-icon-color: var(--van-gray-6);
 @cell-large-vertical-padding: var(--van-padding-sm);

package/lib/cell-group/CellGroup.d.ts

@@ -1,3 +1,13 @@
+import { ExtractPropTypes } from 'vue';
+declare const cellGroupProps: {
+    title: StringConstructor;
+    inset: BooleanConstructor;
+    border: {
+        type: BooleanConstructor;
+        default: true;
+    };
+};
+export declare type CellGroupProps = ExtractPropTypes<typeof cellGroupProps>;
 declare const _default: import("vue").DefineComponent<{
     title: StringConstructor;
     inset: BooleanConstructor;

package/lib/cell-group/CellGroup.js

@@ -8,20 +8,23 @@ var _vue = require("vue");
 var _utils = require("../utils");
 
 var [name, bem] = (0, _utils.createNamespace)('cell-group');
+var cellGroupProps = {
+  title: String,
+  inset: Boolean,
+  border: _utils.truthProp
+};
 
 var _default = (0, _vue.defineComponent)({
   name,
   inheritAttrs: false,
-  props: {
-    title: String,
-    inset: Boolean,
-    border: _utils.truthProp
-  },
-
-  setup(props, {
-    slots,
-    attrs
-  }) {
+  props: cellGroupProps,
+
+  setup(props, _ref) {
+    var {
+      slots,
+      attrs
+    } = _ref;
+
     var renderGroup = () => (0, _vue.createVNode)("div", (0, _vue.mergeProps)({
       "class": [bem({
         inset: props.inset

package/lib/cell-group/index.css

@@ -1 +1 @@
-:root{--van-cell-group-background-color:var(--van-white);--van-cell-group-title-color:var(--van-gray-6);--van-cell-group-title-padding:var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs);--van-cell-group-title-font-size:var(--van-font-size-md);--van-cell-group-title-line-height:16px;--van-cell-group-inset-padding:0 var(--van-padding-md);--van-cell-group-inset-border-radius:var(--van-border-radius-lg);--van-cell-group-inset-title-padding:var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs) var(--van-padding-xl)}.van-cell-group{background-color:var(--van-cell-group-background-color)}.van-cell-group--inset{margin:var(--van-cell-group-inset-padding);border-radius:var(--van-cell-group-inset-border-radius);overflow:hidden}.van-cell-group__title{padding:var(--van-cell-group-title-padding);color:var(--van-cell-group-title-color);font-size:var(--van-cell-group-title-font-size);line-height:var(--van-cell-group-title-line-height)}.van-cell-group__title--inset{padding:var(--van-cell-group-inset-title-padding)}
+:root{--van-cell-group-background-color:var(--van-background-color-light);--van-cell-group-title-color:var(--van-text-color-2);--van-cell-group-title-padding:var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs);--van-cell-group-title-font-size:var(--van-font-size-md);--van-cell-group-title-line-height:16px;--van-cell-group-inset-padding:0 var(--van-padding-md);--van-cell-group-inset-border-radius:var(--van-border-radius-lg);--van-cell-group-inset-title-padding:var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs) var(--van-padding-xl)}.van-cell-group{background:var(--van-cell-group-background-color)}.van-cell-group--inset{margin:var(--van-cell-group-inset-padding);border-radius:var(--van-cell-group-inset-border-radius);overflow:hidden}.van-cell-group__title{padding:var(--van-cell-group-title-padding);color:var(--van-cell-group-title-color);font-size:var(--van-cell-group-title-font-size);line-height:var(--van-cell-group-title-line-height)}.van-cell-group__title--inset{padding:var(--van-cell-group-inset-title-padding)}