persagy-vant 0.0.37 → 0.0.39

package/lib/cell/Cell.js

@@ -28,42 +28,113 @@ var import_icon = require("../icon");
 var import_checkbox = require("../checkbox");
 var import_radio = require("../radio");
 var import_badge = require("../badge");
+var import_tag = require("../tag");
 var import_ConfigProvider = require("../config-provider/ConfigProvider");
 const [name, bem] = (0, import_utils.createNamespace)("cell");
 const cellSharedProps = {
   icon: String,
   size: String,
+  background: String,
   title: import_utils.numericProp,
   value: import_utils.numericProp,
   label: import_utils.numericProp,
+  labelClickable: Boolean,
+  labelIcon: String,
+  showLabelIcon: {
+    type: Boolean,
+    default: void 0
+  },
   description: import_utils.numericProp,
+  descriptionClickable: Boolean,
+  multiLineNotes: Array,
+  showMultiLineNotes: {
+    type: Boolean,
+    default: void 0
+  },
+  showTitleCollapseIcon: Boolean,
+  defaultMultiLineNotesCollapsed: Boolean,
   threeLine: Boolean,
   labelSize: import_utils.numericProp,
   avatar: String,
+  showAvatar: {
+    type: Boolean,
+    default: void 0
+  },
   rightAvatar: String,
+  showRightAvatar: {
+    type: Boolean,
+    default: void 0
+  },
   tags: Array,
+  showTags: {
+    type: Boolean,
+    default: void 0
+  },
+  titleTag: import_utils.numericProp,
+  showTitleTag: {
+    type: Boolean,
+    default: void 0
+  },
+  wrapTags: Array,
+  showWrapTags: {
+    type: Boolean,
+    default: void 0
+  },
   titleIcon: String,
+  titleIconClickable: Boolean,
+  showTitleIcon: {
+    type: Boolean,
+    default: void 0
+  },
   rightIcon: String,
+  showIcon: {
+    type: Boolean,
+    default: void 0
+  },
+  showRightIcon: {
+    type: Boolean,
+    default: void 0
+  },
   note: import_utils.numericProp,
+  showNote: {
+    type: Boolean,
+    default: void 0
+  },
   noteBold: Boolean,
   noteClickable: Boolean,
   noteTo: import_use_route.routeProps.to,
   noteUrl: String,
   noteReplace: Boolean,
   badge: import_utils.numericProp,
+  showBadge: {
+    type: Boolean,
+    default: void 0
+  },
   leftSelect: {
     type: Boolean,
     default: void 0
   },
+  showLeftSelect: {
+    type: Boolean,
+    default: void 0
+  },
   rightSelect: {
     type: Boolean,
     default: void 0
   },
+  showRightSelect: {
+    type: Boolean,
+    default: void 0
+  },
   selectType: {
     type: String,
     default: "checkbox"
   },
   blueMark: Boolean,
+  showBlueMark: {
+    type: Boolean,
+    default: void 0
+  },
   titleBold: Boolean,
   center: Boolean,
   isLink: Boolean,
@@ -85,7 +156,7 @@ const cellProps = (0, import_utils.extend)({}, cellSharedProps, import_use_route
 var stdin_default = (0, import_vue.defineComponent)({
   name,
   props: cellProps,
-  emits: ["click", "click-note", "update:leftSelect", "update:rightSelect"],
+  emits: ["click", "click-label", "click-description", "click-note", "click-title-icon", "update:leftSelect", "update:rightSelect", "update:multiLineNotesCollapsed"],
   setup(props, {
     slots,
     emit
@@ -96,6 +167,8 @@ var stdin_default = (0, import_vue.defineComponent)({
     const vm = (0, import_vue.getCurrentInstance)().proxy;
     const leftSelectState = (0, import_vue.ref)((_a = props.leftSelect) != null ? _a : false);
     const rightSelectState = (0, import_vue.ref)((_b = props.rightSelect) != null ? _b : false);
+    const multiLineNotesCollapsed = (0, import_vue.ref)(props.defaultMultiLineNotesCollapsed);
+    const isVisible = (show, hasContent) => show != null ? show : hasContent;
     (0, import_vue.watch)(() => props.leftSelect, (value) => {
       if ((0, import_utils.isDef)(value)) {
         leftSelectState.value = value;
@@ -106,7 +179,12 @@ var stdin_default = (0, import_vue.defineComponent)({
         rightSelectState.value = value;
       }
     });
-    const hasSelect = (position) => (0, import_utils.isDef)(position === "left" ? props.leftSelect : props.rightSelect);
+    const isSelectVisible = (position) => {
+      const show = position === "left" ? props.showLeftSelect : props.showRightSelect;
+      const select = position === "left" ? props.leftSelect : props.rightSelect;
+      return isVisible(show, !!slots[`${position}-select`] || (0, import_utils.isDef)(select));
+    };
+    const hasSelect = (position) => isSelectVisible(position) && (0, import_utils.isDef)(position === "left" ? props.leftSelect : props.rightSelect);
     const getSelectState = (position) => position === "left" ? leftSelectState.value : rightSelectState.value;
     const updateSelectState = (position, value) => {
       if (position === "left") {
@@ -127,32 +205,93 @@ var stdin_default = (0, import_vue.defineComponent)({
       return false;
     };
     const renderLabel = () => {
+      var _a2;
       const showLabel = slots.label || (0, import_utils.isDef)(props.label);
+      const showLabelIcon = (_a2 = props.showLabelIcon) != null ? _a2 : !!(slots["label-icon"] || props.labelIcon);
       if (showLabel) {
         return (0, import_vue.createVNode)("div", {
-          "class": [bem("label"), props.labelClass],
+          "class": [bem("label", {
+            clickable: props.labelClickable
+          }), props.labelClass],
           "style": {
             fontSize: (0, import_utils.addUnit)(props.labelSize)
+          },
+          "role": props.labelClickable ? "button" : void 0,
+          "tabindex": props.labelClickable ? 0 : void 0,
+          "onClick": (event) => {
+            if (!props.labelClickable)
+              return;
+            event.stopPropagation();
+            emit("click-label", event);
           }
-        }, [slots.label ? slots.label() : props.label]);
+        }, [showLabelIcon && slots["label-icon"] ? (0, import_vue.createVNode)("span", {
+          "class": bem("label-icon")
+        }, [slots["label-icon"]()]) : showLabelIcon ? (0, import_vue.createVNode)(import_icon.Icon, {
+          "name": props.labelIcon || "location-o",
+          "class": bem("label-icon"),
+          "classPrefix": props.iconPrefix
+        }, null) : null, (0, import_vue.createVNode)("span", null, [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")
+          "class": bem("description", {
+            clickable: props.descriptionClickable
+          }),
+          "role": props.descriptionClickable ? "button" : void 0,
+          "tabindex": props.descriptionClickable ? 0 : void 0,
+          "onClick": (event) => {
+            if (!props.descriptionClickable)
+              return;
+            event.stopPropagation();
+            emit("click-description", event);
+          }
         }, [slots.description ? slots.description() : props.description]);
       }
     };
+    const renderMultiLineNotes = () => {
+      var _a2, _b2;
+      if (!isVisible(props.showMultiLineNotes, !!slots["multi-line-notes"] || !!((_a2 = props.multiLineNotes) == null ? void 0 : _a2.length))) {
+        return;
+      }
+      if (slots["multi-line-notes"]) {
+        return (0, import_vue.createVNode)("div", {
+          "class": bem("multi-line-notes")
+        }, [slots["multi-line-notes"]()]);
+      }
+      if ((_b2 = props.multiLineNotes) == null ? void 0 : _b2.length) {
+        return (0, import_vue.createVNode)("div", {
+          "class": bem("multi-line-notes")
+        }, [props.multiLineNotes.map((note, index) => (0, import_vue.createVNode)("div", {
+          "key": `${note}-${index}`,
+          "class": bem("multi-line-note")
+        }, [note]))]);
+      }
+    };
     const renderTitle = () => {
       if (slots.title || (0, import_utils.isDef)(props.title)) {
         return (0, import_vue.createVNode)("div", {
           "class": [bem("title"), props.titleClass],
           "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(), props.threeLine && renderDescription()]);
+          "class": bem("title-row", {
+            collapsible: props.showTitleCollapseIcon
+          }),
+          "onClick": (event) => {
+            if (props.showTitleCollapseIcon) {
+              event.stopPropagation();
+              multiLineNotesCollapsed.value = !multiLineNotesCollapsed.value;
+              emit("update:multiLineNotesCollapsed", multiLineNotesCollapsed.value);
+            }
+          }
+        }, [props.showTitleCollapseIcon && (0, import_vue.createVNode)(import_icon.Icon, {
+          "name": "trangle-down",
+          "class": bem("title-collapse-icon", {
+            collapsed: multiLineNotesCollapsed.value
+          })
+        }, null), slots.title ? slots.title() : (0, import_vue.createVNode)("span", null, [props.title]), renderTitleTag(), renderTags(), renderTitleIcon()]), renderWrapTags(), renderLabel(), props.threeLine && renderDescription(), !multiLineNotesCollapsed.value && renderMultiLineNotes()]);
       }
     };
     const renderValue = () => {
@@ -168,6 +307,9 @@ var stdin_default = (0, import_vue.defineComponent)({
       }
     };
     const renderLeftIcon = () => {
+      if (!isVisible(props.showIcon, !!slots.icon || !!props.icon)) {
+        return;
+      }
       if (slots.icon) {
         return slots.icon();
       }
@@ -183,6 +325,9 @@ var stdin_default = (0, import_vue.defineComponent)({
       var _a2, _b2;
       const slot = slots[`${position}-select`];
       const selected = getSelectState(position);
+      if (!isSelectVisible(position)) {
+        return;
+      }
       if (slot) {
         return (0, import_vue.createVNode)("div", {
           "class": bem(`${position}-select`)
@@ -210,6 +355,10 @@ var stdin_default = (0, import_vue.defineComponent)({
     const renderAvatar = (position) => {
       const slot = slots[`${position}-avatar`];
       const avatar = position === "left" ? props.avatar : props.rightAvatar;
+      const show = position === "left" ? props.showAvatar : props.showRightAvatar;
+      if (!isVisible(show, !!slot || !!avatar)) {
+        return;
+      }
       if (slot) {
         return (0, import_vue.createVNode)("div", {
           "class": bem(`${position}-avatar`)
@@ -224,6 +373,9 @@ var stdin_default = (0, import_vue.defineComponent)({
       }
     };
     const renderBlueMark = () => {
+      if (!isVisible(props.showBlueMark, !!slots["blue-mark"] || props.blueMark)) {
+        return;
+      }
       if (slots["blue-mark"]) {
         return (0, import_vue.createVNode)("div", {
           "class": bem("blue-mark")
@@ -236,13 +388,16 @@ var stdin_default = (0, import_vue.defineComponent)({
       }
     };
     const renderTags = () => {
-      var _a2;
+      var _a2, _b2;
+      if (!isVisible(props.showTags, !!slots.tags || !!((_a2 = props.tags) == null ? void 0 : _a2.length))) {
+        return;
+      }
       if (slots.tags) {
         return (0, import_vue.createVNode)("div", {
           "class": bem("tags")
         }, [slots.tags()]);
       }
-      if ((_a2 = props.tags) == null ? void 0 : _a2.length) {
+      if ((_b2 = props.tags) == null ? void 0 : _b2.length) {
         return (0, import_vue.createVNode)("div", {
           "class": bem("tags")
         }, [props.tags.map((tag, index) => (0, import_vue.createVNode)("span", {
@@ -251,19 +406,71 @@ var stdin_default = (0, import_vue.defineComponent)({
         }, [tag]))]);
       }
     };
-    const renderTitleIcon = () => {
-      if (slots["title-icon"]) {
+    const renderTitleTag = () => {
+      if (!isVisible(props.showTitleTag, !!slots["title-tag"] || (0, import_utils.isDef)(props.titleTag))) {
+        return;
+      }
+      if (slots["title-tag"]) {
         return (0, import_vue.createVNode)("div", {
-          "class": bem("title-icon")
-        }, [slots["title-icon"]()]);
+          "class": bem("title-tag")
+        }, [slots["title-tag"]()]);
       }
-      if (props.titleIcon) {
-        return (0, import_vue.createVNode)(import_icon.Icon, {
-          "name": props.titleIcon,
-          "class": bem("title-icon")
-        }, null);
+      if ((0, import_utils.isDef)(props.titleTag)) {
+        return (0, import_vue.createVNode)("div", {
+          "class": bem("title-tag")
+        }, [(0, import_vue.createVNode)(import_tag.Tag, {
+          "size": "small"
+        }, {
+          default: () => [props.titleTag]
+        })]);
       }
     };
+    const renderWrapTags = () => {
+      var _a2, _b2;
+      if (!isVisible(props.showWrapTags, !!slots["wrap-tags"] || !!((_a2 = props.wrapTags) == null ? void 0 : _a2.length))) {
+        return;
+      }
+      if (slots["wrap-tags"]) {
+        return (0, import_vue.createVNode)("div", {
+          "class": bem("wrap-tags")
+        }, [slots["wrap-tags"]()]);
+      }
+      if ((_b2 = props.wrapTags) == null ? void 0 : _b2.length) {
+        return (0, import_vue.createVNode)("div", {
+          "class": bem("wrap-tags")
+        }, [props.wrapTags.map((tag, index) => (0, import_vue.createVNode)(import_tag.Tag, {
+          "key": `${tag}-${index}`
+        }, {
+          default: () => [tag]
+        }))]);
+      }
+    };
+    const renderTitleIcon = () => {
+      if (!isVisible(props.showTitleIcon, !!slots["title-icon"] || !!props.titleIcon)) {
+        return;
+      }
+      const icon = slots["title-icon"] ? slots["title-icon"]() : props.titleIcon ? (0, import_vue.createVNode)(import_icon.Icon, {
+        "name": props.titleIcon
+      }, null) : void 0;
+      if (!icon)
+        return;
+      if (props.titleIconClickable) {
+        return (0, import_vue.createVNode)("button", {
+          "type": "button",
+          "class": bem("title-icon", {
+            clickable: true
+          }),
+          "aria-label": `\u64CD\u4F5C${props.title || ""}`,
+          "onClick": (event) => {
+            event.stopPropagation();
+            emit("click-title-icon", event);
+          }
+        }, [icon]);
+      }
+      return (0, import_vue.createVNode)("div", {
+        "class": bem("title-icon")
+      }, [icon]);
+    };
     const renderNoteContent = (content) => {
       const clickable = props.noteClickable || props.noteTo || props.noteUrl;
       const classes = bem("note", {
@@ -291,6 +498,9 @@ var stdin_default = (0, import_vue.defineComponent)({
       }, [content]);
     };
     const renderNote = () => {
+      if (!isVisible(props.showNote, !!slots.note || (0, import_utils.isDef)(props.note))) {
+        return;
+      }
       if (slots.note) {
         return renderNoteContent(slots.note());
       }
@@ -299,6 +509,9 @@ var stdin_default = (0, import_vue.defineComponent)({
       }
     };
     const renderBadge = () => {
+      if (!isVisible(props.showBadge, !!slots.badge || (0, import_utils.isDef)(props.badge))) {
+        return;
+      }
       if (slots.badge) {
         return (0, import_vue.createVNode)("div", {
           "class": bem("badge")
@@ -314,6 +527,9 @@ var stdin_default = (0, import_vue.defineComponent)({
       }
     };
     const renderRightIcon = () => {
+      if (!isVisible(props.showRightIcon, !!slots["right-icon"] || !!props.rightIcon || props.isLink)) {
+        return;
+      }
       if (slots["right-icon"]) {
         return slots["right-icon"]();
       }
@@ -344,7 +560,7 @@ var stdin_default = (0, import_vue.defineComponent)({
         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);
+      const hasBadge = isVisible(props.showBadge, !!slots.badge || (0, import_utils.isDef)(props.badge));
       const cellSize = (_b2 = size != null ? size : config == null ? void 0 : config.cellSize) != null ? _b2 : "normal";
       const classes = {
         center: center || hasBadge,
@@ -365,6 +581,9 @@ var stdin_default = (0, import_vue.defineComponent)({
       };
       return (0, import_vue.createVNode)("div", {
         "class": [bem(classes), props.errorBorder ? "van-cell-error-border" : ""],
+        "style": props.background ? {
+          background: props.background
+        } : void 0,
         "role": clickable ? "button" : void 0,
         "tabindex": clickable ? 0 : void 0,
         "onClick": onClick

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-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)}
+: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{display:flex;align-items:center;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__label--clickable{color:var(--van-primary-color);font-weight:var(--van-font-weight-bold);cursor:pointer}.van-cell__label-icon{flex:none;width:12px;height:12px;margin-right:2px;color:inherit;font-size:12px;line-height:12px}.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__description--clickable{color:var(--van-primary-color);cursor:pointer}.van-cell__multi-line-notes{margin-top:var(--van-padding-base);color:var(--van-cell-label-color);font-size:var(--van-cell-label-font-size);line-height:var(--van-cell-label-line-height)}.van-cell__multi-line-note+.van-cell__multi-line-note{margin-top:2px}.van-cell__title{flex:1;min-width:0}.van-cell__title-row{display:flex;align-items:center;min-width:0}.van-cell__title-row--collapsible{cursor:pointer}.van-cell__title-collapse-icon{flex:none;width:var(--van-cell-icon-size);height:var(--van-cell-line-height);margin-right:var(--van-padding-base);color:var(--van-text-color-2);font-size:var(--van-cell-icon-size);line-height:var(--van-cell-line-height);transition:transform var(--van-animation-duration-fast)}.van-cell__title-collapse-icon--collapsed{transform:rotate(-90deg)}.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__wrap-tags{display:flex;flex-wrap:wrap;gap:var(--van-padding-base);margin-top:var(--van-padding-base)}.van-cell__title-icon{margin-left:var(--van-padding-base);color:var(--van-text-color-2)}.van-cell__title-icon--clickable{display:inline-flex;align-items:center;padding:0;color:inherit;line-height:inherit;background:transparent;border:0;cursor:pointer}.van-cell__title-tag{display:flex;flex:none;margin-left:var(--van-padding-base)}.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)}