persagy-vant 0.0.36 → 0.0.38

package/es/work-order-card/WorkOrderCard.mjs

@@ -3,6 +3,7 @@ import { Button } from "../button/index.mjs";
 import { createNamespace, makeArrayProp, makeStringProp, truthProp } from "../utils/index.mjs";
 import { Divider } from "../divider/index.mjs";
 import { Icon } from "../icon/index.mjs";
+import { Label } from "../label/index.mjs";
 import { Tag } from "../tag/index.mjs";
 const [name, bem] = createNamespace("work-order-card");
 const props = {
@@ -48,12 +49,39 @@ var stdin_default = defineComponent({
         innerExpanded.value = value;
       emit("update:expanded", value);
     };
-    const renderInfo = (info) => _createVNode("div", {
-      "class": bem("info")
-    }, [info.icon && _createVNode(Icon, {
-      "name": info.icon,
-      "size": "12"
-    }, null), _createVNode("span", null, [info.text])]);
+    const resolveInfo = (info) => {
+      if (info.label !== void 0 || info.content !== void 0) {
+        return {
+          label: info.label || "",
+          content: info.content || ""
+        };
+      }
+      const text = info.text || "";
+      const separatorIndex = text.search(/[:：]/);
+      return separatorIndex < 0 ? {
+        label: "",
+        content: text
+      } : {
+        label: text.slice(0, separatorIndex),
+        content: text.slice(separatorIndex + 1)
+      };
+    };
+    const renderInfo = (info) => {
+      const {
+        label,
+        content
+      } = resolveInfo(info);
+      return _createVNode("div", {
+        "class": bem("info")
+      }, [_createVNode(Label, {
+        "sameColor": true,
+        "showLeftIcon": Boolean(info.icon),
+        "leftIcon": info.icon,
+        "showLabel": Boolean(label),
+        "label": label,
+        "content": content
+      }, null)]);
+    };
     const renderAction = (action, index) => _createVNode(Button, {
       "type": "text",
       "disabled": action.disabled,
@@ -90,16 +118,29 @@ var stdin_default = defineComponent({
     }, null)]), _createVNode("div", {
       "class": bem("tags")
     }, [slots.tags ? slots.tags() : props2.tags.map((tag) => _createVNode(Tag, {
+      "type": tag.type,
+      "size": tag.size,
       "color": tag.color,
-      "textColor": tag.textColor
+      "textColor": tag.textColor,
+      "plain": tag.plain,
+      "round": tag.round,
+      "mark": tag.mark,
+      "rightIcon": tag.rightIcon,
+      "number": tag.number,
+      "showNumber": tag.showNumber,
+      "numberColor": tag.numberColor
     }, {
       default: () => [tag.text]
     }))]), props2.showLocation && props2.location && _createVNode("div", {
       "class": bem("location")
-    }, [_createVNode(Icon, {
-      "name": "location-o",
-      "size": "12"
-    }, null), _createVNode("span", null, [props2.location])]), _createVNode("div", {
+    }, [_createVNode(Label, {
+      "sameColor": true,
+      "ellipsis": true,
+      "showLeftIcon": true,
+      "leftIcon": "location-o",
+      "showLabel": false,
+      "content": props2.location
+    }, null)]), _createVNode("div", {
       "class": bem("infos")
     }, [slots.info ? slots.info() : props2.primaryInfos.map(renderInfo)]), hasExpandedContent() && _createVNode("div", {
       "class": bem("expanded-wrapper", {

package/es/work-order-card/index.css

@@ -1 +1 @@
-:root{--van-work-order-card-padding: var(--van-padding-md);--van-work-order-card-radius: var(--van-border-radius-lg);--van-work-order-card-title-font-size: 15px;--van-work-order-card-title-color: var(--van-gray-8);--van-work-order-card-info-color: var(--van-gray-7)}.van-work-order-card{position:relative;overflow:hidden;background:var(--van-white);border-radius:var(--van-work-order-card-radius)}.van-work-order-card__header{display:flex;align-items:flex-start;padding:var(--van-work-order-card-padding) var(--van-work-order-card-padding) 0;cursor:pointer}.van-work-order-card__title{flex:1;min-width:0;overflow:hidden;color:var(--van-work-order-card-title-color);font-size:var(--van-work-order-card-title-font-size);font-weight:var(--van-font-weight-bold);line-height:23px;text-overflow:ellipsis;white-space:nowrap}.van-work-order-card__arrow{flex:none;margin:4px 0 0 2px;color:var(--van-gray-6);transition:transform .2s}.van-work-order-card--expanded .van-work-order-card__title{overflow:visible;white-space:normal}.van-work-order-card:not(.van-work-order-card--expandable) .van-work-order-card__title{overflow:visible;white-space:normal}.van-work-order-card--expanded .van-work-order-card__arrow{color:var(--van-black);transform:rotate(180deg)}.van-work-order-card__tags{display:flex;flex-wrap:wrap;gap:4px;padding:8px var(--van-work-order-card-padding) 0}.van-work-order-card__location{display:flex;gap:4px;align-items:center;margin:8px 10px 0;padding:0 6px;overflow:hidden;color:var(--van-gray-8);font-size:13px;line-height:21px;white-space:nowrap;background:linear-gradient(90deg,rgba(223,232,243,.7),rgba(223,232,243,0));border-radius:4px}.van-work-order-card__location span{overflow:hidden;text-overflow:ellipsis}.van-work-order-card__infos{padding:8px var(--van-work-order-card-padding) 0}.van-work-order-card:not(.van-work-order-card--actions):not(.van-work-order-card--expanded-content) .van-work-order-card__infos{padding-bottom:8px}.van-work-order-card__info{display:flex;gap:4px;align-items:center;min-height:21px;color:var(--van-work-order-card-info-color);font-size:13px;line-height:21px}.van-work-order-card__expanded-wrapper{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .24s cubic-bezier(.2,.8,.2,1),opacity .18s ease}.van-work-order-card__expanded-wrapper--visible{grid-template-rows:1fr;opacity:1}.van-work-order-card__expanded-content{min-height:0;padding:0 var(--van-work-order-card-padding);overflow:hidden}.van-work-order-card:not(.van-work-order-card--actions) .van-work-order-card__expanded-content{padding-bottom:8px}.van-work-order-card__expanded-content .van-divider{margin:4px 0;border-color:var(--van-gray-4)}.van-work-order-card__overdue{position:absolute;top:0;right:0;padding:2px 8px;color:var(--van-white);font-size:10px;line-height:12px;background:var(--van-danger-color);border-radius:0 2px 0 8px}.van-work-order-card__actions{position:relative;display:flex;margin-top:8px;padding-top:1px;--van-button-default-height: 38px;--van-button-default-font-size: var(--van-font-size-md);--van-button-default-line-height: 22px;--van-button-border-radius: 0;--van-button-plain-background-color: transparent}.van-work-order-card__actions:before{position:absolute;top:0;right:var(--van-work-order-card-padding);left:var(--van-work-order-card-padding);height:.5px;background:var(--van-gray-2);content:""}.van-work-order-card__actions .van-button{flex:1}.van-work-order-card__actions .van-button+.van-button{position:relative}.van-work-order-card__actions .van-button+.van-button:after{position:absolute;top:50%;left:0;width:.5px;height:12px;background:var(--van-gray-2);transform:translateY(-50%);content:""}
+:root{--van-work-order-card-padding: var(--van-padding-md);--van-work-order-card-radius: var(--van-border-radius-lg);--van-work-order-card-title-font-size: 15px;--van-work-order-card-title-color: var(--van-gray-8);--van-work-order-card-info-color: var(--van-gray-7)}.van-work-order-card{position:relative;overflow:hidden;background:var(--van-white);border-radius:var(--van-work-order-card-radius)}.van-work-order-card__header{display:flex;align-items:flex-start;padding:var(--van-work-order-card-padding) var(--van-work-order-card-padding) 0;cursor:pointer}.van-work-order-card__title{flex:1;min-width:0;overflow:hidden;color:var(--van-work-order-card-title-color);font-size:var(--van-work-order-card-title-font-size);font-weight:var(--van-font-weight-bold);line-height:23px;text-overflow:ellipsis;white-space:nowrap}.van-work-order-card__arrow{flex:none;margin:4px 0 0 2px;color:var(--van-gray-6);transition:transform .2s}.van-work-order-card--expanded .van-work-order-card__title{overflow:visible;white-space:normal}.van-work-order-card:not(.van-work-order-card--expandable) .van-work-order-card__title{overflow:visible;white-space:normal}.van-work-order-card--expanded .van-work-order-card__arrow{color:var(--van-black);transform:rotate(180deg)}.van-work-order-card__tags{display:flex;flex-wrap:wrap;gap:4px;padding:8px var(--van-work-order-card-padding) 0}.van-work-order-card__location{margin:8px 10px 0;padding:0 6px;overflow:hidden;background:linear-gradient(90deg,rgba(223,232,243,.7),rgba(223,232,243,0));border-radius:4px}.van-work-order-card__infos{display:flex;flex-direction:column;gap:2px;padding:8px var(--van-work-order-card-padding) 0}.van-work-order-card:not(.van-work-order-card--actions):not(.van-work-order-card--expanded-content) .van-work-order-card__infos{padding-bottom:8px}.van-work-order-card__info{min-width:0}.van-work-order-card__expanded-wrapper{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .24s cubic-bezier(.2,.8,.2,1),opacity .18s ease}.van-work-order-card__expanded-wrapper--visible{grid-template-rows:1fr;opacity:1}.van-work-order-card__expanded-content{min-height:0;padding:0 var(--van-work-order-card-padding);overflow:hidden}.van-work-order-card:not(.van-work-order-card--actions) .van-work-order-card__expanded-content{padding-bottom:8px}.van-work-order-card__expanded-content .van-divider{margin:4px 0;border-color:var(--van-gray-4)}.van-work-order-card__overdue{position:absolute;top:0;right:0;padding:2px 8px;color:var(--van-white);font-size:10px;line-height:12px;background:var(--van-danger-color);border-radius:0 2px 0 8px}.van-work-order-card__actions{position:relative;display:flex;margin-top:8px;padding-top:1px;--van-button-default-height: 38px;--van-button-default-font-size: var(--van-font-size-md);--van-button-default-line-height: 22px;--van-button-border-radius: 0;--van-button-plain-background-color: transparent}.van-work-order-card__actions:before{position:absolute;top:0;right:var(--van-work-order-card-padding);left:var(--van-work-order-card-padding);height:.5px;background:var(--van-gray-2);content:""}.van-work-order-card__actions .van-button{flex:1}.van-work-order-card__actions .van-button+.van-button{position:relative}.van-work-order-card__actions .van-button+.van-button:after{position:absolute;top:50%;left:0;width:.5px;height:12px;background:var(--van-gray-2);transform:translateY(-50%);content:""}

package/es/work-order-card/index.less

@@ -16,11 +16,10 @@
 .van-work-order-card:not(.van-work-order-card--expandable) .van-work-order-card__title { overflow: visible; white-space: normal; }
 .van-work-order-card--expanded .van-work-order-card__arrow { color: var(--van-black); transform: rotate(180deg); }
 .van-work-order-card__tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px var(--van-work-order-card-padding) 0; }
-.van-work-order-card__location { display: flex; gap: 4px; align-items: center; margin: 8px 10px 0; padding: 0 6px; overflow: hidden; color: var(--van-gray-8); font-size: 13px; line-height: 21px; white-space: nowrap; background: linear-gradient(90deg, rgb(223 232 243 / 70%), rgb(223 232 243 / 0%)); border-radius: 4px; }
-.van-work-order-card__location span { overflow: hidden; text-overflow: ellipsis; }
-.van-work-order-card__infos { padding: 8px var(--van-work-order-card-padding) 0; }
+.van-work-order-card__location { margin: 8px 10px 0; padding: 0 6px; overflow: hidden; background: linear-gradient(90deg, rgb(223 232 243 / 70%), rgb(223 232 243 / 0%)); border-radius: 4px; }
+.van-work-order-card__infos { display: flex; flex-direction: column; gap: 2px; padding: 8px var(--van-work-order-card-padding) 0; }
 .van-work-order-card:not(.van-work-order-card--actions):not(.van-work-order-card--expanded-content) .van-work-order-card__infos { padding-bottom: 8px; }
-.van-work-order-card__info { display: flex; gap: 4px; align-items: center; min-height: 21px; color: var(--van-work-order-card-info-color); font-size: 13px; line-height: 21px; }
+.van-work-order-card__info { min-width: 0; }
 .van-work-order-card__expanded-wrapper { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .24s cubic-bezier(.2, .8, .2, 1), opacity .18s ease; }
 .van-work-order-card__expanded-wrapper--visible { grid-template-rows: 1fr; opacity: 1; }
 .van-work-order-card__expanded-content { min-height: 0; padding: 0 var(--van-work-order-card-padding); overflow: hidden; }

package/es/work-order-card/style/index.mjs

@@ -1,7 +1,9 @@
 import "../../style/base.css";
 import "../../badge/index.css";
 import "../../icon/index.css";
+import "../../image/index.css";
 import "../../tag/index.css";
+import "../../label/index.css";
 import "../../loading/index.css";
 import "../../button/index.css";
 import "../../divider/index.css";

package/es/work-order-card/style/less.mjs

@@ -1,7 +1,9 @@
 import "../../style/base.less";
 import "../../badge/index.less";
 import "../../icon/index.less";
+import "../../image/index.less";
 import "../../tag/index.less";
+import "../../label/index.less";
 import "../../loading/index.less";
 import "../../button/index.less";
 import "../../divider/index.less";

package/es/work-order-card/types.d.ts

@@ -1,12 +1,25 @@
+import type { TagSize, TagType } from '../tag';
 import type { Numeric } from '../utils';
 export declare type WorkOrderCardTag = {
     text: string;
+    type?: TagType;
+    size?: TagSize;
     color?: string;
     textColor?: string;
+    plain?: boolean;
+    round?: boolean;
+    mark?: boolean;
+    rightIcon?: string;
+    number?: string | number;
+    showNumber?: boolean;
+    numberColor?: string;
 };
 export declare type WorkOrderCardInfo = {
     icon?: string;
-    text: string;
+    /** @deprecated Prefer label and content for structured field display. */
+    text?: string;
+    label?: string;
+    content?: string;
 };
 export declare type WorkOrderCardAction = {
     text: string;

package/lib/area/style/index.js

@@ -1,3 +1,5 @@
 require("../../style/base.css");
+require("../../badge/index.css");
+require("../../icon/index.css");
 require("../../loading/index.css");
 require("../../picker/index.css");

package/lib/area/style/less.js

@@ -1,3 +1,5 @@
 require("../../style/base.less");
+require("../../badge/index.less");
+require("../../icon/index.less");
 require("../../loading/index.less");
 require("../../picker/index.less");

package/lib/cell/Cell.d.ts

@@ -9,6 +9,8 @@ export declare const cellSharedProps: {
     title: (NumberConstructor | StringConstructor)[];
     value: (NumberConstructor | StringConstructor)[];
     label: (NumberConstructor | StringConstructor)[];
+    description: (NumberConstructor | StringConstructor)[];
+    threeLine: BooleanConstructor;
     labelSize: (NumberConstructor | StringConstructor)[];
     avatar: StringConstructor;
     rightAvatar: StringConstructor;
@@ -61,6 +63,8 @@ declare const cellProps: {
     title: (NumberConstructor | StringConstructor)[];
     value: (NumberConstructor | StringConstructor)[];
     label: (NumberConstructor | StringConstructor)[];
+    description: (NumberConstructor | StringConstructor)[];
+    threeLine: BooleanConstructor;
     labelSize: (NumberConstructor | StringConstructor)[];
     avatar: StringConstructor;
     rightAvatar: StringConstructor;
@@ -118,6 +122,8 @@ declare const _default: import("vue").DefineComponent<{
     title: (NumberConstructor | StringConstructor)[];
     value: (NumberConstructor | StringConstructor)[];
     label: (NumberConstructor | StringConstructor)[];
+    description: (NumberConstructor | StringConstructor)[];
+    threeLine: BooleanConstructor;
     labelSize: (NumberConstructor | StringConstructor)[];
     avatar: StringConstructor;
     rightAvatar: StringConstructor;
@@ -173,6 +179,8 @@ declare const _default: import("vue").DefineComponent<{
     title: (NumberConstructor | StringConstructor)[];
     value: (NumberConstructor | StringConstructor)[];
     label: (NumberConstructor | StringConstructor)[];
+    description: (NumberConstructor | StringConstructor)[];
+    threeLine: BooleanConstructor;
     labelSize: (NumberConstructor | StringConstructor)[];
     avatar: StringConstructor;
     rightAvatar: StringConstructor;
@@ -231,6 +239,7 @@ declare const _default: import("vue").DefineComponent<{
     replace: boolean;
     required: boolean;
     center: boolean;
+    threeLine: boolean;
     noteBold: boolean;
     noteClickable: boolean;
     noteReplace: boolean;

package/lib/cell/Cell.js

@@ -36,6 +36,8 @@ const cellSharedProps = {
   title: import_utils.numericProp,
   value: import_utils.numericProp,
   label: import_utils.numericProp,
+  description: import_utils.numericProp,
+  threeLine: Boolean,
   labelSize: import_utils.numericProp,
   avatar: String,
   rightAvatar: String,
@@ -135,6 +137,14 @@ var stdin_default = (0, import_vue.defineComponent)({
         }, [slots.label ? slots.label() : props.label]);
       }
     };
+    const renderDescription = () => {
+      const showDescription = slots.description || (0, import_utils.isDef)(props.description);
+      if (showDescription) {
+        return (0, import_vue.createVNode)("div", {
+          "class": bem("description")
+        }, [slots.description ? slots.description() : props.description]);
+      }
+    };
     const renderTitle = () => {
       if (slots.title || (0, import_utils.isDef)(props.title)) {
         return (0, import_vue.createVNode)("div", {
@@ -142,7 +152,7 @@ var stdin_default = (0, import_vue.defineComponent)({
           "style": props.titleStyle
         }, [(0, import_vue.createVNode)("div", {
           "class": bem("title-row")
-        }, [slots.title ? slots.title() : (0, import_vue.createVNode)("span", null, [props.title]), renderTags(), renderTitleIcon()]), renderLabel()]);
+        }, [slots.title ? slots.title() : (0, import_vue.createVNode)("span", null, [props.title]), renderTags(), renderTitleIcon()]), renderLabel(), props.threeLine && renderDescription()]);
       }
     };
     const renderValue = () => {
@@ -330,7 +340,8 @@ var stdin_default = (0, import_vue.defineComponent)({
         isLink,
         required,
         rightIcon,
-        titleBold
+        titleBold,
+        threeLine
       } = props;
       const clickable = (_a2 = props.clickable) != null ? _a2 : isLink || rightIcon === "arrow" || hasSelect("left") || hasSelect("right");
       const hasBadge = !!slots.badge || (0, import_utils.isDef)(props.badge);
@@ -340,7 +351,8 @@ var stdin_default = (0, import_vue.defineComponent)({
         required,
         "title-bold": titleBold,
         clickable,
-        borderless: !border
+        borderless: !border,
+        "three-line": threeLine
       };
       if (cellSize) {
         classes[cellSize] = !!cellSize;

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-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: 2px;--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-large-value-font-size: 16px;--van-cell-blue-mark-width: 2px}.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:last-child:after,.van-cell--borderless:after{display:none}.van-cell-error-border: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-field-input-error-text-color);transform:scaleY(.5)}.van-cell-error-border:last-child:after{display:inline-block}.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;min-width:0}.van-cell__title-row{display:flex;align-items:center;min-width:0}.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,.van-cell__left-select,.van-cell__right-select,.van-cell__title-icon{flex:none;height:var(--van-cell-line-height);font-size:var(--van-cell-icon-size);line-height:var(--van-cell-line-height);display:flex!important;align-items:center;justify-content:center}.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__left-select{display:flex;flex:none;align-items:center;align-self:center;margin-right:var(--van-padding-base)}.van-cell__right-select{display:flex;flex:none;align-items:center;align-self:center;margin-left:var(--van-padding-base)}.van-cell__left-avatar,.van-cell__right-avatar{flex:none;width:var(--van-cell-line-height);height:var(--van-cell-line-height);-o-object-fit:cover;object-fit:cover;border:var(--van-border-width-base) solid var(--van-gray-1);border-radius:var(--van-border-radius-md)}.van-cell__left-avatar{margin-right:var(--van-padding-base)}.van-cell__right-avatar{margin-left:var(--van-padding-base)}.van-cell__blue-mark{flex:none;align-self:center;width:var(--van-cell-blue-mark-width);height:var(--van-font-size-sm);margin-right:var(--van-padding-base);background:var(--van-primary-color)}.van-cell__tags{display:flex;flex:none;gap:var(--van-padding-base);margin-left:var(--van-padding-base)}.van-cell__tag{padding:0 var(--van-padding-base);color:var(--van-text-color);font-size:var(--van-font-size-sm);line-height:var(--van-line-height-sm);background:var(--van-gray-2);border-radius:var(--van-border-radius-sm)}.van-cell__title-icon{margin-left:var(--van-padding-base);color:var(--van-text-color-2)}.van-cell__note{align-self:flex-start;flex:none;margin-left:var(--van-padding-base);color:var(--van-text-color-2);font-size:var(--van-font-size-md);line-height:var(--van-cell-line-height);white-space:nowrap}.van-cell__note--bold{font-weight:var(--van-font-weight-bold)}.van-cell__note--clickable{padding:0;color:var(--van-primary-color);font-family:inherit;font-size:inherit;line-height:inherit;background:transparent;border:0;cursor:pointer}.van-cell__badge{display:flex;flex:none;align-items:center;align-self:center;margin-left:var(--van-padding-base)}.van-cell__badge>.van-badge{position:static;transform:none}.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);margin-top:var(--van-padding-base)}.van-cell--large .van-cell__value{font-size:var(--van-cell-large-value-font-size)}.van-cell--title-bold .van-cell__title{font-weight:var(--van-font-weight-bold)}
+: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: 2px;--van-cell-title-value-gap: var(--van-padding-xs);--van-cell-description-color: var(--van-text-color-2);--van-cell-description-font-size: var(--van-font-size-sm);--van-cell-description-line-height: var(--van-line-height-sm);--van-cell-description-margin-top: 2px;--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-large-description-font-size: var(--van-font-size-md);--van-cell-large-value-font-size: 16px;--van-cell-blue-mark-width: 2px}.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:last-child:after,.van-cell--borderless:after{display:none}.van-cell-error-border: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-field-input-error-text-color);transform:scaleY(.5)}.van-cell-error-border:last-child:after{display:inline-block}.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__description{margin-top:var(--van-cell-description-margin-top);color:var(--van-cell-description-color);font-size:var(--van-cell-description-font-size);line-height:var(--van-cell-description-line-height)}.van-cell__title{flex:1;min-width:0}.van-cell__title-row{display:flex;align-items:center;min-width:0}.van-cell__value{flex:none;min-width:0;margin-left:var(--van-cell-title-value-gap);position:relative;overflow:hidden;color:var(--van-cell-value-color);text-align:right;vertical-align:middle;word-wrap:break-word}.van-cell__value--alone{margin-left:0;color:var(--van-text-color);text-align:left}.van-cell__left-icon,.van-cell__right-icon,.van-cell__left-select,.van-cell__right-select,.van-cell__title-icon{flex:none;height:var(--van-cell-line-height);font-size:var(--van-cell-icon-size);line-height:var(--van-cell-line-height);display:flex!important;align-items:center;justify-content:center}.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__left-select{display:flex;flex:none;align-items:center;align-self:center;margin-right:var(--van-padding-base)}.van-cell__right-select{display:flex;flex:none;align-items:center;align-self:center;margin-left:var(--van-padding-base)}.van-cell__left-avatar,.van-cell__right-avatar{flex:none;width:var(--van-cell-line-height);height:var(--van-cell-line-height);-o-object-fit:cover;object-fit:cover;border:var(--van-border-width-base) solid var(--van-gray-1);border-radius:var(--van-border-radius-md)}.van-cell__left-avatar{margin-right:var(--van-padding-base)}.van-cell__right-avatar{margin-left:var(--van-padding-base)}.van-cell__blue-mark{flex:none;align-self:center;width:var(--van-cell-blue-mark-width);height:var(--van-font-size-sm);margin-right:var(--van-padding-base);background:var(--van-primary-color)}.van-cell__tags{display:flex;flex:none;gap:var(--van-padding-base);margin-left:var(--van-padding-base)}.van-cell__tag{padding:0 var(--van-padding-base);color:var(--van-text-color);font-size:var(--van-font-size-sm);line-height:var(--van-line-height-sm);background:var(--van-gray-2);border-radius:var(--van-border-radius-sm)}.van-cell__title-icon{margin-left:var(--van-padding-base);color:var(--van-text-color-2)}.van-cell__note{align-self:flex-start;flex:none;margin-left:var(--van-padding-base);color:var(--van-text-color-2);font-size:var(--van-font-size-md);line-height:var(--van-cell-line-height);white-space:nowrap}.van-cell__note--bold{font-weight:var(--van-font-weight-bold)}.van-cell__note--clickable{padding:0;color:var(--van-primary-color);font-family:inherit;font-size:inherit;line-height:inherit;background:transparent;border:0;cursor:pointer}.van-cell__badge{display:flex;flex:none;align-items:center;align-self:center;margin-left:var(--van-padding-base)}.van-cell__badge>.van-badge{position:static;transform:none}.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);margin-top:var(--van-padding-base)}.van-cell--large .van-cell__description{font-size:var(--van-cell-large-description-font-size);margin-top:var(--van-padding-base)}.van-cell--large .van-cell__value{font-size:var(--van-cell-large-value-font-size)}.van-cell--title-bold .van-cell__title{font-weight:var(--van-font-weight-bold)}

package/lib/cell/index.d.ts

@@ -4,6 +4,8 @@ export declare const Cell: import("../utils").WithInstall<import("vue").DefineCo
     title: (NumberConstructor | StringConstructor)[];
     value: (NumberConstructor | StringConstructor)[];
     label: (NumberConstructor | StringConstructor)[];
+    description: (NumberConstructor | StringConstructor)[];
+    threeLine: BooleanConstructor;
     labelSize: (NumberConstructor | StringConstructor)[];
     avatar: StringConstructor;
     rightAvatar: StringConstructor;
@@ -59,6 +61,8 @@ export declare const Cell: import("../utils").WithInstall<import("vue").DefineCo
     title: (NumberConstructor | StringConstructor)[];
     value: (NumberConstructor | StringConstructor)[];
     label: (NumberConstructor | StringConstructor)[];
+    description: (NumberConstructor | StringConstructor)[];
+    threeLine: BooleanConstructor;
     labelSize: (NumberConstructor | StringConstructor)[];
     avatar: StringConstructor;
     rightAvatar: StringConstructor;
@@ -117,6 +121,7 @@ export declare const Cell: import("../utils").WithInstall<import("vue").DefineCo
     replace: boolean;
     required: boolean;
     center: boolean;
+    threeLine: boolean;
     noteBold: boolean;
     noteClickable: boolean;
     noteReplace: boolean;
@@ -131,7 +136,7 @@ export declare const Cell: import("../utils").WithInstall<import("vue").DefineCo
     clickable: boolean | null;
 }>>;
 export default Cell;
-export type { CellSize, CellProps, CellArrowDirection, CellSelectType } from './Cell';
+export type { CellSize, CellProps, CellArrowDirection, CellSelectType, } from './Cell';
 declare module 'vue' {
     interface GlobalComponents {
         VanCell: typeof Cell;

package/lib/cell/index.less

@@ -15,12 +15,18 @@
   --van-cell-label-font-size: @cell-label-font-size;
   --van-cell-label-line-height: @cell-label-line-height;
   --van-cell-label-margin-top: @cell-label-margin-top;
+  --van-cell-title-value-gap: @cell-title-value-gap;
+  --van-cell-description-color: @cell-description-color;
+  --van-cell-description-font-size: @cell-description-font-size;
+  --van-cell-description-line-height: @cell-description-line-height;
+  --van-cell-description-margin-top: @cell-description-margin-top;
   --van-cell-value-color: @cell-value-color;
   --van-cell-icon-size: @cell-icon-size;
   --van-cell-right-icon-color: @cell-right-icon-color;
   --van-cell-large-vertical-padding: @cell-large-vertical-padding;
   --van-cell-large-title-font-size: @cell-large-title-font-size;
   --van-cell-large-label-font-size: @cell-large-label-font-size;
+  --van-cell-large-description-font-size: @cell-large-description-font-size;
   --van-cell-large-value-font-size: @cell-large-value-font-size;
   --van-cell-blue-mark-width: @cell-blue-mark-width;
 }
@@ -59,8 +65,14 @@
     line-height: var(--van-cell-label-line-height);
   }
 
-  &__title,
-  &__value {
+  &__description {
+    margin-top: var(--van-cell-description-margin-top);
+    color: var(--van-cell-description-color);
+    font-size: var(--van-cell-description-font-size);
+    line-height: var(--van-cell-description-line-height);
+  }
+
+  &__title {
     flex: 1;
     min-width: 0;
   }
@@ -72,6 +84,9 @@
   }
 
   &__value {
+    flex: none;
+    min-width: 0;
+    margin-left: var(--van-cell-title-value-gap);
     position: relative;
     overflow: hidden;
     color: var(--van-cell-value-color);
@@ -80,6 +95,7 @@
     word-wrap: break-word;
 
     &--alone {
+      margin-left: 0;
       color: var(--van-text-color);
       text-align: left;
     }
@@ -245,6 +261,11 @@
       margin-top: var(--van-padding-base);
     }
 
+    .van-cell__description {
+      font-size: var(--van-cell-large-description-font-size);
+      margin-top: var(--van-padding-base);
+    }
+
     .van-cell__value {
       font-size: var(--van-cell-large-value-font-size);
     }
@@ -253,4 +274,5 @@
   &--title-bold {
     .van-cell__title { font-weight: var(--van-font-weight-bold); }
   }
+
 }

package/lib/cell/var.less

@@ -13,11 +13,17 @@
 @cell-label-font-size: var(--van-font-size-sm);
 @cell-label-line-height: var(--van-line-height-sm);
 @cell-label-margin-top: 2px;
+@cell-title-value-gap: var(--van-padding-xs);
+@cell-description-color: var(--van-text-color-2);
+@cell-description-font-size: var(--van-font-size-sm);
+@cell-description-line-height: var(--van-line-height-sm);
+@cell-description-margin-top: 2px;
 @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);
 @cell-large-title-font-size: var(--van-font-size-lg);
 @cell-large-label-font-size: var(--van-font-size-md);
+@cell-large-description-font-size: var(--van-font-size-md);
 @cell-large-value-font-size: 16px;
 @cell-blue-mark-width: 2px;

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

@@ -2,6 +2,7 @@ import { type ExtractPropTypes } from 'vue';
 declare const cellGroupProps: {
     title: StringConstructor;
     inset: BooleanConstructor;
+    grayCard: BooleanConstructor;
     border: {
         type: BooleanConstructor;
         default: true;
@@ -11,6 +12,7 @@ export declare type CellGroupProps = ExtractPropTypes<typeof cellGroupProps>;
 declare const _default: import("vue").DefineComponent<{
     title: StringConstructor;
     inset: BooleanConstructor;
+    grayCard: BooleanConstructor;
     border: {
         type: BooleanConstructor;
         default: true;
@@ -18,6 +20,7 @@ declare const _default: import("vue").DefineComponent<{
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     title: StringConstructor;
     inset: BooleanConstructor;
+    grayCard: BooleanConstructor;
     border: {
         type: BooleanConstructor;
         default: true;
@@ -25,5 +28,6 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     border: boolean;
     inset: boolean;
+    grayCard: boolean;
 }>;
 export default _default;

package/lib/cell-group/CellGroup.js

@@ -26,6 +26,7 @@ const [name, bem] = (0, import_utils.createNamespace)("cell-group");
 const cellGroupProps = {
   title: String,
   inset: Boolean,
+  grayCard: Boolean,
   border: import_utils.truthProp
 };
 var stdin_default = (0, import_vue.defineComponent)({
@@ -40,9 +41,10 @@ var stdin_default = (0, import_vue.defineComponent)({
       var _a;
       return (0, import_vue.createVNode)("div", (0, import_vue.mergeProps)({
         "class": [bem({
-          inset: props.inset
+          inset: props.inset,
+          "gray-card": props.grayCard
         }), {
-          [import_utils.BORDER_TOP_BOTTOM]: props.border && !props.inset
+          [import_utils.BORDER_TOP_BOTTOM]: props.border && !props.inset && !props.grayCard
         }]
       }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };

package/lib/cell-group/index.css

@@ -1 +1 @@
-: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)}
+: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-gray-card-padding: var(--van-padding-xs);--van-cell-group-gray-card-background: var(--van-gradient-gray);--van-cell-group-gray-card-cell-background: var(--van-white)}.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--gray-card{margin:var(--van-cell-group-inset-padding);padding:var(--van-cell-group-gray-card-padding);overflow:hidden;background:var(--van-cell-group-gray-card-background);border-radius:var(--van-cell-group-inset-border-radius)}.van-cell-group--gray-card>.van-cell{background:var(--van-cell-group-gray-card-cell-background)}.van-cell-group--gray-card>.van-cell:first-child{border-radius:var(--van-border-radius-md) var(--van-border-radius-md) 0 0}.van-cell-group--gray-card>.van-cell:last-child{border-radius:0 0 var(--van-border-radius-md) var(--van-border-radius-md)}.van-cell-group--gray-card>.van-cell:only-child{border-radius:var(--van-border-radius-md)}.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)}

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

@@ -1,6 +1,7 @@
 export declare const CellGroup: import("../utils").WithInstall<import("vue").DefineComponent<{
     title: StringConstructor;
     inset: BooleanConstructor;
+    grayCard: BooleanConstructor;
     border: {
         type: BooleanConstructor;
         default: true;
@@ -8,6 +9,7 @@ export declare const CellGroup: import("../utils").WithInstall<import("vue").Def
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     title: StringConstructor;
     inset: BooleanConstructor;
+    grayCard: BooleanConstructor;
     border: {
         type: BooleanConstructor;
         default: true;
@@ -15,6 +17,7 @@ export declare const CellGroup: import("../utils").WithInstall<import("vue").Def
 }>>, {
     border: boolean;
     inset: boolean;
+    grayCard: boolean;
 }>>;
 export default CellGroup;
 export type { CellGroupProps } from './CellGroup';

package/lib/cell-group/index.less

@@ -9,6 +9,9 @@
   --van-cell-group-inset-padding: @cell-group-inset-padding;
   --van-cell-group-inset-border-radius: @cell-group-inset-border-radius;
   --van-cell-group-inset-title-padding: @cell-group-inset-title-padding;
+  --van-cell-group-gray-card-padding: @cell-group-gray-card-padding;
+  --van-cell-group-gray-card-background: @cell-group-gray-card-background;
+  --van-cell-group-gray-card-cell-background: @cell-group-gray-card-cell-background;
 }
 
 .van-cell-group {
@@ -20,6 +23,30 @@
     overflow: hidden;
   }
 
+  &--gray-card {
+    margin: var(--van-cell-group-inset-padding);
+    padding: var(--van-cell-group-gray-card-padding);
+    overflow: hidden;
+    background: var(--van-cell-group-gray-card-background);
+    border-radius: var(--van-cell-group-inset-border-radius);
+
+    > .van-cell {
+      background: var(--van-cell-group-gray-card-cell-background);
+
+      &:first-child {
+        border-radius: var(--van-border-radius-md) var(--van-border-radius-md) 0 0;
+      }
+
+      &:last-child {
+        border-radius: 0 0 var(--van-border-radius-md) var(--van-border-radius-md);
+      }
+
+      &:only-child {
+        border-radius: var(--van-border-radius-md);
+      }
+    }
+  }
+
   &__title {
     padding: var(--van-cell-group-title-padding);
     color: var(--van-cell-group-title-color);

package/lib/cell-group/var.less

@@ -10,3 +10,6 @@
 @cell-group-inset-border-radius: var(--van-border-radius-lg);
 @cell-group-inset-title-padding: var(--van-padding-md) var(--van-padding-md)
   var(--van-padding-xs) var(--van-padding-xl);
+@cell-group-gray-card-padding: var(--van-padding-xs);
+@cell-group-gray-card-background: var(--van-gradient-gray);
+@cell-group-gray-card-cell-background: var(--van-white);

package/lib/collapse-item/CollapseItem.d.ts

@@ -5,6 +5,8 @@ declare const collapseItemProps: {
     title: (NumberConstructor | StringConstructor)[];
     value: (NumberConstructor | StringConstructor)[];
     label: (NumberConstructor | StringConstructor)[];
+    description: (NumberConstructor | StringConstructor)[];
+    threeLine: BooleanConstructor;
     labelSize: (NumberConstructor | StringConstructor)[];
     avatar: StringConstructor;
     rightAvatar: StringConstructor;
@@ -70,6 +72,8 @@ declare const _default: import("vue").DefineComponent<{
     title: (NumberConstructor | StringConstructor)[];
     value: (NumberConstructor | StringConstructor)[];
     label: (NumberConstructor | StringConstructor)[];
+    description: (NumberConstructor | StringConstructor)[];
+    threeLine: BooleanConstructor;
     labelSize: (NumberConstructor | StringConstructor)[];
     avatar: StringConstructor;
     rightAvatar: StringConstructor;
@@ -133,6 +137,8 @@ declare const _default: import("vue").DefineComponent<{
     title: (NumberConstructor | StringConstructor)[];
     value: (NumberConstructor | StringConstructor)[];
     label: (NumberConstructor | StringConstructor)[];
+    description: (NumberConstructor | StringConstructor)[];
+    threeLine: BooleanConstructor;
     labelSize: (NumberConstructor | StringConstructor)[];
     avatar: StringConstructor;
     rightAvatar: StringConstructor;
@@ -193,6 +199,7 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     required: boolean;
     center: boolean;
+    threeLine: boolean;
     noteBold: boolean;
     noteClickable: boolean;
     noteReplace: boolean;

package/lib/collapse-item/index.d.ts

@@ -4,6 +4,8 @@ export declare const CollapseItem: import("../utils").WithInstall<import("vue").
     title: (NumberConstructor | StringConstructor)[];
     value: (NumberConstructor | StringConstructor)[];
     label: (NumberConstructor | StringConstructor)[];
+    description: (NumberConstructor | StringConstructor)[];
+    threeLine: BooleanConstructor;
     labelSize: (NumberConstructor | StringConstructor)[];
     avatar: StringConstructor;
     rightAvatar: StringConstructor;
@@ -67,6 +69,8 @@ export declare const CollapseItem: import("../utils").WithInstall<import("vue").
     title: (NumberConstructor | StringConstructor)[];
     value: (NumberConstructor | StringConstructor)[];
     label: (NumberConstructor | StringConstructor)[];
+    description: (NumberConstructor | StringConstructor)[];
+    threeLine: BooleanConstructor;
     labelSize: (NumberConstructor | StringConstructor)[];
     avatar: StringConstructor;
     rightAvatar: StringConstructor;
@@ -127,6 +131,7 @@ export declare const CollapseItem: import("../utils").WithInstall<import("vue").
 }>>, {
     required: boolean;
     center: boolean;
+    threeLine: boolean;
     noteBold: boolean;
     noteClickable: boolean;
     noteReplace: boolean;