persagy-vant 0.0.35 → 0.0.37

package/es/uploader/index.less

@@ -28,12 +28,42 @@
   --van-uploader-loading-icon-size: @uploader-loading-icon-size;
   --van-uploader-loading-icon-color: @uploader-loading-icon-color;
   --van-uploader-disabled-opacity: @uploader-disabled-opacity;
+  --van-uploader-required-color: @uploader-required-color;
+  --van-uploader-label-color: @uploader-label-color;
+  --van-uploader-label-font-size: @uploader-label-font-size;
+  --van-uploader-label-line-height: @uploader-label-line-height;
+  --van-uploader-label-margin-bottom: @uploader-label-margin-bottom;
 }
 
 .van-uploader {
   position: relative;
   display: inline-block;
 
+  &--required::before {
+    position: absolute;
+    top: 0;
+    left: calc(-1 * var(--van-padding-sm));
+    color: var(--van-uploader-required-color);
+    font-size: var(--van-font-size-md);
+    line-height: var(--van-line-height-md);
+    content: '*';
+  }
+
+  &__label {
+    position: relative;
+    margin-bottom: var(--van-uploader-label-margin-bottom);
+    color: var(--van-uploader-label-color);
+    font-size: var(--van-uploader-label-font-size);
+    line-height: var(--van-uploader-label-line-height);
+  }
+
+  &__required {
+    position: absolute;
+    top: 0;
+    left: calc(-1 * (var(--van-padding-md) - var(--van-padding-xs)));
+    color: var(--van-uploader-required-color);
+  }
+
   &__wrapper {
     display: flex;
     flex-wrap: wrap;

package/es/uploader/types.d.ts

@@ -8,6 +8,7 @@ export declare type UploaderFileListItem = {
     file?: File;
     content?: string;
     isImage?: boolean;
+    videoThumbnail?: string;
     status?: '' | 'uploading' | 'done' | 'failed';
     message?: string;
     imageFit?: ImageFit;

package/es/uploader/utils.d.ts

@@ -9,3 +9,5 @@ export declare function filterFiles(items: UploaderFileListItem[], maxSize: Uplo
 };
 export declare const isImageUrl: (url: string) => boolean;
 export declare function isImageFile(item: UploaderFileListItem): boolean;
+export declare function isVideoFile(item: UploaderFileListItem): boolean;
+export declare function createVideoThumbnail(file: File): Promise<string | undefined>;

package/es/uploader/utils.mjs

@@ -41,6 +41,7 @@ function filterFiles(items, maxSize) {
   return { valid, invalid };
 }
 const IMAGE_REGEXP = /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg)/i;
+const VIDEO_REGEXP = /\.(mp4|webm|ogg|mov)(?:$|\?)/i;
 const isImageUrl = (url) => IMAGE_REGEXP.test(url);
 function isImageFile(item) {
   if (item.isImage) {
@@ -57,12 +58,85 @@ function isImageFile(item) {
   }
   return false;
 }
+function isVideoFile(item) {
+  var _a;
+  if ((_a = item.file) == null ? void 0 : _a.type) {
+    return item.file.type.indexOf("video/") === 0;
+  }
+  if (item.url) {
+    return VIDEO_REGEXP.test(item.url);
+  }
+  return typeof item.content === "string" && item.content.indexOf("data:video") === 0;
+}
+function createVideoThumbnail(file) {
+  if (typeof document === "undefined" || typeof URL === "undefined" || typeof URL.createObjectURL !== "function") {
+    return Promise.resolve(void 0);
+  }
+  return new Promise((resolve) => {
+    const video = document.createElement("video");
+    const objectUrl = URL.createObjectURL(file);
+    let settled = false;
+    let timeout;
+    const cleanup = () => {
+      if (timeout !== void 0) {
+        window.clearTimeout(timeout);
+      }
+      URL.revokeObjectURL(objectUrl);
+      video.removeAttribute("src");
+      try {
+        video.load();
+      } catch (e) {
+      }
+    };
+    const done = (thumbnail) => {
+      if (settled)
+        return;
+      settled = true;
+      cleanup();
+      resolve(thumbnail);
+    };
+    const captureFrame = () => {
+      if (!video.videoWidth || !video.videoHeight) {
+        done();
+        return;
+      }
+      const canvas = document.createElement("canvas");
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      const context = canvas.getContext("2d");
+      if (!context) {
+        done();
+        return;
+      }
+      context.drawImage(video, 0, 0, canvas.width, canvas.height);
+      done(canvas.toDataURL("image/jpeg", 0.8));
+    };
+    video.muted = true;
+    video.playsInline = true;
+    video.preload = "auto";
+    video.onloadedmetadata = () => {
+      const duration = Number.isFinite(video.duration) ? video.duration : 0.1;
+      const frameTime = Math.min(0.1, Math.max(duration - 0.01, 0));
+      if (frameTime) {
+        video.currentTime = frameTime;
+      } else {
+        captureFrame();
+      }
+    };
+    video.onseeked = captureFrame;
+    video.onerror = () => done();
+    video.src = objectUrl;
+    timeout = window.setTimeout(() => done(), 3e3);
+  });
+}
 export {
   bem,
+  createVideoThumbnail,
   filterFiles,
   isImageFile,
   isImageUrl,
   isOversize,
+  isVideoFile,
   name,
   readFileContent,
   t

package/es/uploader/var.less

@@ -27,3 +27,8 @@
 @uploader-loading-icon-size: 22px;
 @uploader-loading-icon-color: var(--van-white);
 @uploader-disabled-opacity: var(--van-disabled-opacity);
+@uploader-required-color: var(--van-danger-color);
+@uploader-label-color: var(--van-text-color);
+@uploader-label-font-size: var(--van-font-size-md);
+@uploader-label-line-height: var(--van-line-height-md);
+@uploader-label-margin-bottom: var(--van-padding-sm);

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;

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;

package/lib/field/Field.d.ts

@@ -50,6 +50,8 @@ declare const fieldProps: {
     title: (NumberConstructor | StringConstructor)[];
     value: (NumberConstructor | StringConstructor)[];
     label: (NumberConstructor | StringConstructor)[];
+    description: (NumberConstructor | StringConstructor)[];
+    threeLine: BooleanConstructor;
     labelSize: (NumberConstructor | StringConstructor)[];
     avatar: StringConstructor;
     rightAvatar: StringConstructor;
@@ -171,6 +173,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;
@@ -290,6 +294,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;
@@ -419,6 +425,7 @@ declare const _default: import("vue").DefineComponent<{
     required: boolean;
     size: CellSize;
     center: boolean;
+    threeLine: boolean;
     noteBold: boolean;
     noteClickable: boolean;
     noteReplace: boolean;

package/lib/field/index.d.ts

@@ -5,6 +5,8 @@ export declare const Field: import("../utils").WithInstall<import("vue").DefineC
     title: (NumberConstructor | StringConstructor)[];
     value: (NumberConstructor | StringConstructor)[];
     label: (NumberConstructor | StringConstructor)[];
+    description: (NumberConstructor | StringConstructor)[];
+    threeLine: BooleanConstructor;
     labelSize: (NumberConstructor | StringConstructor)[];
     avatar: StringConstructor;
     rightAvatar: StringConstructor;
@@ -124,6 +126,8 @@ export declare const Field: import("../utils").WithInstall<import("vue").DefineC
     title: (NumberConstructor | StringConstructor)[];
     value: (NumberConstructor | StringConstructor)[];
     label: (NumberConstructor | StringConstructor)[];
+    description: (NumberConstructor | StringConstructor)[];
+    threeLine: BooleanConstructor;
     labelSize: (NumberConstructor | StringConstructor)[];
     avatar: StringConstructor;
     rightAvatar: StringConstructor;
@@ -253,6 +257,7 @@ export declare const Field: import("../utils").WithInstall<import("vue").DefineC
     required: boolean;
     size: import("..").CellSize;
     center: boolean;
+    threeLine: boolean;
     noteBold: boolean;
     noteClickable: boolean;
     noteReplace: boolean;