persagy-vant 0.0.38 → 0.0.40

package/es/cell/Cell.mjs

@@ -5,42 +5,113 @@ import { Icon } from "../icon/index.mjs";
 import { Checkbox } from "../checkbox/index.mjs";
 import { Radio } from "../radio/index.mjs";
 import { Badge } from "../badge/index.mjs";
+import { Tag } from "../tag/index.mjs";
 import { CONFIG_PROVIDER_KEY } from "../config-provider/ConfigProvider.mjs";
 const [name, bem] = createNamespace("cell");
 const cellSharedProps = {
   icon: String,
   size: String,
+  background: String,
   title: numericProp,
   value: numericProp,
   label: numericProp,
+  labelClickable: Boolean,
+  labelIcon: String,
+  showLabelIcon: {
+    type: Boolean,
+    default: void 0
+  },
   description: numericProp,
+  descriptionClickable: Boolean,
+  multiLineNotes: Array,
+  showMultiLineNotes: {
+    type: Boolean,
+    default: void 0
+  },
+  showTitleCollapseIcon: Boolean,
+  defaultMultiLineNotesCollapsed: Boolean,
   threeLine: Boolean,
   labelSize: 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: 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: numericProp,
+  showNote: {
+    type: Boolean,
+    default: void 0
+  },
   noteBold: Boolean,
   noteClickable: Boolean,
   noteTo: routeProps.to,
   noteUrl: String,
   noteReplace: Boolean,
   badge: 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,
@@ -62,7 +133,7 @@ const cellProps = extend({}, cellSharedProps, routeProps);
 var stdin_default = 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
@@ -73,6 +144,8 @@ var stdin_default = defineComponent({
     const vm = getCurrentInstance().proxy;
     const leftSelectState = ref((_a = props.leftSelect) != null ? _a : false);
     const rightSelectState = ref((_b = props.rightSelect) != null ? _b : false);
+    const multiLineNotesCollapsed = ref(props.defaultMultiLineNotesCollapsed);
+    const isVisible = (show, hasContent) => show != null ? show : hasContent;
     watch(() => props.leftSelect, (value) => {
       if (isDef(value)) {
         leftSelectState.value = value;
@@ -83,7 +156,12 @@ var stdin_default = defineComponent({
         rightSelectState.value = value;
       }
     });
-    const hasSelect = (position) => 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`] || isDef(select));
+    };
+    const hasSelect = (position) => isSelectVisible(position) && isDef(position === "left" ? props.leftSelect : props.rightSelect);
     const getSelectState = (position) => position === "left" ? leftSelectState.value : rightSelectState.value;
     const updateSelectState = (position, value) => {
       if (position === "left") {
@@ -104,32 +182,95 @@ var stdin_default = defineComponent({
       return false;
     };
     const renderLabel = () => {
+      var _a2;
       const showLabel = slots.label || isDef(props.label);
+      const showLabelIcon = (_a2 = props.showLabelIcon) != null ? _a2 : !!(slots["label-icon"] || props.labelIcon);
       if (showLabel) {
         return _createVNode("div", {
-          "class": [bem("label"), props.labelClass],
+          "class": [bem("label", {
+            clickable: props.labelClickable
+          }), props.labelClass],
           "style": {
             fontSize: 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"] ? _createVNode("span", {
+          "class": bem("label-icon")
+        }, [slots["label-icon"]()]) : showLabelIcon ? _createVNode(Icon, {
+          "name": props.labelIcon || "location-o",
+          "class": bem("label-icon"),
+          "classPrefix": props.iconPrefix
+        }, null) : null, _createVNode("span", null, [slots.label ? slots.label() : props.label])]);
       }
     };
     const renderDescription = () => {
       const showDescription = slots.description || isDef(props.description);
       if (showDescription) {
         return _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 _createVNode("div", {
+          "class": bem("multi-line-notes")
+        }, [slots["multi-line-notes"]()]);
+      }
+      if ((_b2 = props.multiLineNotes) == null ? void 0 : _b2.length) {
+        return _createVNode("div", {
+          "class": bem("multi-line-notes")
+        }, [props.multiLineNotes.map((note, index) => _createVNode("div", {
+          "key": `${note}-${index}`,
+          "class": bem("multi-line-note")
+        }, [note]))]);
+      }
+    };
     const renderTitle = () => {
       if (slots.title || isDef(props.title)) {
         return _createVNode("div", {
           "class": [bem("title"), props.titleClass],
           "style": props.titleStyle
         }, [_createVNode("div", {
-          "class": bem("title-row")
-        }, [slots.title ? slots.title() : _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 && _createVNode("div", {
+          "class": bem("title-collapse-action")
+        }, [_createVNode(Icon, {
+          "name": "trangle-down",
+          "class": bem("title-collapse-icon", {
+            collapsed: multiLineNotesCollapsed.value
+          })
+        }, null)]), slots.title ? slots.title() : _createVNode("span", null, [props.title]), renderTitleTag(), renderTags(), renderTitleIcon()]), renderWrapTags(), renderLabel(), props.threeLine && renderDescription(), !multiLineNotesCollapsed.value && renderMultiLineNotes()]);
       }
     };
     const renderValue = () => {
@@ -145,6 +286,9 @@ var stdin_default = defineComponent({
       }
     };
     const renderLeftIcon = () => {
+      if (!isVisible(props.showIcon, !!slots.icon || !!props.icon)) {
+        return;
+      }
       if (slots.icon) {
         return slots.icon();
       }
@@ -160,6 +304,9 @@ var stdin_default = defineComponent({
       var _a2, _b2;
       const slot = slots[`${position}-select`];
       const selected = getSelectState(position);
+      if (!isSelectVisible(position)) {
+        return;
+      }
       if (slot) {
         return _createVNode("div", {
           "class": bem(`${position}-select`)
@@ -187,6 +334,10 @@ var stdin_default = 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 _createVNode("div", {
           "class": bem(`${position}-avatar`)
@@ -201,6 +352,9 @@ var stdin_default = defineComponent({
       }
     };
     const renderBlueMark = () => {
+      if (!isVisible(props.showBlueMark, !!slots["blue-mark"] || props.blueMark)) {
+        return;
+      }
       if (slots["blue-mark"]) {
         return _createVNode("div", {
           "class": bem("blue-mark")
@@ -213,13 +367,16 @@ var stdin_default = 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 _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 _createVNode("div", {
           "class": bem("tags")
         }, [props.tags.map((tag, index) => _createVNode("span", {
@@ -228,19 +385,71 @@ var stdin_default = defineComponent({
         }, [tag]))]);
       }
     };
-    const renderTitleIcon = () => {
-      if (slots["title-icon"]) {
+    const renderTitleTag = () => {
+      if (!isVisible(props.showTitleTag, !!slots["title-tag"] || isDef(props.titleTag))) {
+        return;
+      }
+      if (slots["title-tag"]) {
         return _createVNode("div", {
-          "class": bem("title-icon")
-        }, [slots["title-icon"]()]);
+          "class": bem("title-tag")
+        }, [slots["title-tag"]()]);
       }
-      if (props.titleIcon) {
-        return _createVNode(Icon, {
-          "name": props.titleIcon,
-          "class": bem("title-icon")
-        }, null);
+      if (isDef(props.titleTag)) {
+        return _createVNode("div", {
+          "class": bem("title-tag")
+        }, [_createVNode(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 _createVNode("div", {
+          "class": bem("wrap-tags")
+        }, [slots["wrap-tags"]()]);
+      }
+      if ((_b2 = props.wrapTags) == null ? void 0 : _b2.length) {
+        return _createVNode("div", {
+          "class": bem("wrap-tags")
+        }, [props.wrapTags.map((tag, index) => _createVNode(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 ? _createVNode(Icon, {
+        "name": props.titleIcon
+      }, null) : void 0;
+      if (!icon)
+        return;
+      if (props.titleIconClickable) {
+        return _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 _createVNode("div", {
+        "class": bem("title-icon")
+      }, [icon]);
+    };
     const renderNoteContent = (content) => {
       const clickable = props.noteClickable || props.noteTo || props.noteUrl;
       const classes = bem("note", {
@@ -268,6 +477,9 @@ var stdin_default = defineComponent({
       }, [content]);
     };
     const renderNote = () => {
+      if (!isVisible(props.showNote, !!slots.note || isDef(props.note))) {
+        return;
+      }
       if (slots.note) {
         return renderNoteContent(slots.note());
       }
@@ -276,6 +488,9 @@ var stdin_default = defineComponent({
       }
     };
     const renderBadge = () => {
+      if (!isVisible(props.showBadge, !!slots.badge || isDef(props.badge))) {
+        return;
+      }
       if (slots.badge) {
         return _createVNode("div", {
           "class": bem("badge")
@@ -291,25 +506,34 @@ var stdin_default = defineComponent({
       }
     };
     const renderRightIcon = () => {
+      if (!isVisible(props.showRightIcon, !!slots["right-icon"] || !!props.rightIcon || props.isLink)) {
+        return;
+      }
       if (slots["right-icon"]) {
-        return slots["right-icon"]();
+        return _createVNode("div", {
+          "class": bem("right-icon-action")
+        }, [slots["right-icon"]()]);
       }
       if (props.rightIcon) {
-        return _createVNode(Icon, {
+        return _createVNode("div", {
+          "class": bem("right-icon-action")
+        }, [_createVNode(Icon, {
           "name": props.rightIcon,
           "class": bem("right-icon")
-        }, null);
+        }, null)]);
       }
       if (props.isLink) {
         const name2 = props.arrowDirection && props.arrowDirection !== "right" ? `arrow-${props.arrowDirection}` : "arrow";
-        return _createVNode(Icon, {
+        return _createVNode("div", {
+          "class": bem("right-icon-action")
+        }, [_createVNode(Icon, {
           "name": name2,
           "class": bem("right-icon")
-        }, null);
+        }, null)]);
       }
     };
     return () => {
-      var _a2, _b2, _c;
+      var _a2, _b2, _c, _d;
       const {
         size,
         center,
@@ -321,15 +545,17 @@ var stdin_default = defineComponent({
         threeLine
       } = props;
       const clickable = (_a2 = props.clickable) != null ? _a2 : isLink || rightIcon === "arrow" || hasSelect("left") || hasSelect("right");
-      const hasBadge = !!slots.badge || isDef(props.badge);
-      const cellSize = (_b2 = size != null ? size : config == null ? void 0 : config.cellSize) != null ? _b2 : "normal";
+      const hasBadge = isVisible(props.showBadge, !!slots.badge || isDef(props.badge));
+      const hasMultiLineNotes = isVisible(props.showMultiLineNotes, !!slots["multi-line-notes"] || !!((_b2 = props.multiLineNotes) == null ? void 0 : _b2.length));
+      const cellSize = (_c = size != null ? size : config == null ? void 0 : config.cellSize) != null ? _c : "normal";
       const classes = {
         center: center || hasBadge,
         required,
         "title-bold": titleBold,
         clickable,
         borderless: !border,
-        "three-line": threeLine
+        "three-line": threeLine,
+        "multi-line-notes": hasMultiLineNotes
       };
       if (cellSize) {
         classes[cellSize] = !!cellSize;
@@ -342,10 +568,13 @@ var stdin_default = defineComponent({
       };
       return _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
-      }, [renderSelect("left"), renderAvatar("left"), renderLeftIcon(), renderBlueMark(), renderTitle(), renderValue(), renderNote(), renderAvatar("right"), renderBadge(), renderSelect("right"), renderRightIcon(), (_c = slots.extra) == null ? void 0 : _c.call(slots)]);
+      }, [renderSelect("left"), renderAvatar("left"), renderLeftIcon(), renderBlueMark(), renderTitle(), renderValue(), renderNote(), renderAvatar("right"), renderBadge(), renderSelect("right"), renderRightIcon(), (_d = slots.extra) == null ? void 0 : _d.call(slots)]);
     };
   }
 });

package/es/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-action,.van-cell__right-icon-action{align-self:flex-start;display:flex;flex:none;height:var(--van-cell-line-height);align-items:center}.van-cell__title-collapse-action{width:var(--van-cell-icon-size);margin-right:var(--van-padding-base);color:var(--van-text-color-2)}.van-cell__title-collapse-icon{width:var(--van-cell-icon-size);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{color:var(--van-cell-right-icon-color)}.van-cell__right-icon-action{margin-left:var(--van-padding-base);color:var(--van-cell-right-icon-color)}.van-cell--multi-line-notes{align-items:flex-start}.van-cell--multi-line-notes .van-cell__left-select,.van-cell--multi-line-notes .van-cell__right-select{align-self:flex-start}.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)}