persagy-vant 0.0.39 → 0.0.40

package/es/cell/Cell.mjs

@@ -263,12 +263,14 @@ var stdin_default = defineComponent({
               emit("update:multiLineNotesCollapsed", multiLineNotesCollapsed.value);
             }
           }
-        }, [props.showTitleCollapseIcon && _createVNode(Icon, {
+        }, [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()]);
+        }, null)]), slots.title ? slots.title() : _createVNode("span", null, [props.title]), renderTitleTag(), renderTags(), renderTitleIcon()]), renderWrapTags(), renderLabel(), props.threeLine && renderDescription(), !multiLineNotesCollapsed.value && renderMultiLineNotes()]);
       }
     };
     const renderValue = () => {
@@ -508,24 +510,30 @@ var stdin_default = defineComponent({
         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,
@@ -538,14 +546,16 @@ var stdin_default = defineComponent({
       } = props;
       const clickable = (_a2 = props.clickable) != null ? _a2 : isLink || rightIcon === "arrow" || hasSelect("left") || hasSelect("right");
       const hasBadge = isVisible(props.showBadge, !!slots.badge || isDef(props.badge));
-      const cellSize = (_b2 = size != null ? size : config == null ? void 0 : config.cellSize) != null ? _b2 : "normal";
+      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;
@@ -564,7 +574,7 @@ var stdin_default = defineComponent({
         "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{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)}
+: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)}

package/es/cell/index.less

@@ -121,12 +121,23 @@
     }
   }
 
-  &__title-collapse-icon {
+  &__title-collapse-action,
+  &__right-icon-action {
+    align-self: flex-start;
+    display: flex;
     flex: none;
-    width: var(--van-cell-icon-size);
     height: var(--van-cell-line-height);
+    align-items: center;
+  }
+
+  &__title-collapse-action {
+    width: var(--van-cell-icon-size);
     margin-right: var(--van-padding-base);
     color: var(--van-text-color-2);
+  }
+
+  &__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);
@@ -173,10 +184,23 @@
   }
 
   &__right-icon {
+    color: var(--van-cell-right-icon-color);
+  }
+
+  &__right-icon-action {
     margin-left: var(--van-padding-base);
     color: var(--van-cell-right-icon-color);
   }
 
+  &--multi-line-notes {
+    align-items: flex-start;
+
+    .van-cell__left-select,
+    .van-cell__right-select {
+      align-self: flex-start;
+    }
+  }
+
   &__left-select {
     display: flex;
     flex: none;

package/es/field/Field.d.ts

@@ -225,6 +225,11 @@ declare const fieldProps: {
     labelClass: PropType<unknown>;
     labelAlign: PropType<FieldTextAlign>;
     labelPosition: PropType<FieldLabelPosition>;
+    unit: (NumberConstructor | StringConstructor)[];
+    showUnit: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
     showWordLimit: BooleanConstructor;
     errorMessageAlign: PropType<FieldTextAlign>;
     colon: {
@@ -418,6 +423,11 @@ declare const _default: import("vue").DefineComponent<{
     labelClass: PropType<unknown>;
     labelAlign: PropType<FieldTextAlign>;
     labelPosition: PropType<FieldLabelPosition>;
+    unit: (NumberConstructor | StringConstructor)[];
+    showUnit: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
     showWordLimit: BooleanConstructor;
     errorMessageAlign: PropType<FieldTextAlign>;
     colon: {
@@ -428,7 +438,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "clear" | "focus" | "blur" | "keypress" | "click-input" | "end-validate" | "start-validate" | "click-left-icon" | "click-right-icon")[], "update:modelValue" | "clear" | "focus" | "blur" | "keypress" | "click-input" | "end-validate" | "start-validate" | "click-left-icon" | "click-right-icon", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click-title-icon" | "update:modelValue" | "clear" | "focus" | "blur" | "keypress" | "click-input" | "end-validate" | "start-validate" | "click-left-icon" | "click-right-icon")[], "click-title-icon" | "update:modelValue" | "clear" | "focus" | "blur" | "keypress" | "click-input" | "end-validate" | "start-validate" | "click-left-icon" | "click-right-icon", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     icon: StringConstructor;
     size: PropType<CellSize>;
     background: StringConstructor;
@@ -609,6 +619,11 @@ declare const _default: import("vue").DefineComponent<{
     labelClass: PropType<unknown>;
     labelAlign: PropType<FieldTextAlign>;
     labelPosition: PropType<FieldLabelPosition>;
+    unit: (NumberConstructor | StringConstructor)[];
+    showUnit: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
     showWordLimit: BooleanConstructor;
     errorMessageAlign: PropType<FieldTextAlign>;
     colon: {
@@ -623,6 +638,7 @@ declare const _default: import("vue").DefineComponent<{
     onFocus?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
     onKeypress?: ((...args: any[]) => any) | undefined;
+    "onClick-title-icon"?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onClear?: ((...args: any[]) => any) | undefined;
     "onClick-input"?: ((...args: any[]) => any) | undefined;
@@ -677,6 +693,7 @@ declare const _default: import("vue").DefineComponent<{
     formatTrigger: FieldFormatTrigger;
     error: boolean;
     readonly: boolean;
+    showUnit: boolean | undefined;
     showWordLimit: boolean;
     colon: boolean;
 }>;

package/es/field/Field.mjs

@@ -49,6 +49,11 @@ const fieldProps = extend({}, cellSharedProps, fieldSharedProps, {
   labelClass: unknownProp,
   labelAlign: String,
   labelPosition: String,
+  unit: numericProp,
+  showUnit: {
+    type: Boolean,
+    default: void 0
+  },
   showWordLimit: Boolean,
   errorMessageAlign: String,
   colon: {
@@ -63,7 +68,7 @@ const fieldProps = extend({}, cellSharedProps, fieldSharedProps, {
 var stdin_default = defineComponent({
   name,
   props: fieldProps,
-  emits: ["blur", "focus", "clear", "keypress", "click-input", "end-validate", "start-validate", "click-left-icon", "click-right-icon", "update:modelValue"],
+  emits: ["blur", "focus", "clear", "keypress", "click-input", "end-validate", "start-validate", "click-left-icon", "click-right-icon", "click-title-icon", "update:modelValue"],
   setup(props, {
     emit,
     slots
@@ -396,6 +401,16 @@ var stdin_default = defineComponent({
         }, null)]);
       }
     };
+    const renderUnit = () => {
+      var _a;
+      const showUnit = (_a = props.showUnit) != null ? _a : isDef(props.unit);
+      if (!showUnit || !isDef(props.unit)) {
+        return;
+      }
+      return _createVNode("span", {
+        "class": bem("unit")
+      }, [props.unit]);
+    };
     const renderWordLimit = () => {
       if (props.showWordLimit && props.maxlength) {
         const count = getStringLength(getModelValue());
@@ -435,7 +450,7 @@ var stdin_default = defineComponent({
     };
     const renderFieldBody = () => [_createVNode("div", {
       "class": bem("body")
-    }, [renderInput(), showClear.value && _createVNode(Icon, {
+    }, [renderInput(), renderUnit(), showClear.value && _createVNode(Icon, {
       "ref": clearIconRef,
       "name": props.clearIcon,
       "class": bem("clear")
@@ -490,6 +505,10 @@ var stdin_default = defineComponent({
         "errorBorder": props.errorBorder,
         "isLink": props.isLink,
         "clickable": props.clickable,
+        "titleIcon": props.titleIcon,
+        "titleIconClickable": props.titleIconClickable,
+        "showTitleIcon": props.showTitleIcon,
+        "onClick-title-icon": (event) => emit("click-title-icon", event),
         "titleStyle": labelStyle.value,
         "valueClass": bem("value"),
         "titleClass": [bem("label", [labelAlign, {

package/es/field/index.css

@@ -1 +1 @@
-:root{--van-field-label-width: 6.2em;--van-field-label-color: var(--van-gray-8);--van-field-label-margin-right: var(--van-padding-sm);--van-field-input-font-size: var(--van-font-size-lg);--van-field-input-text-color: var(--van-text-color);--van-field-input-error-text-color: var(--van-danger-color);--van-field-input-disabled-text-color: var(--van-text-color-3);--van-field-placeholder-text-color: var(--van-text-color-3);--van-field-icon-size: 16px;--van-field-clear-icon-size: 16px;--van-field-clear-icon-color: var(--van-gray-5);--van-field-right-icon-color: var(--van-gray-6);--van-field-error-message-color: var(--van-danger-color);--van-field-error-message-font-size: 12px;--van-field-text-area-min-height: 60px;--van-field-word-limit-color: var(--van-gray-7);--van-field-word-limit-font-size: var(--van-font-size-sm);--van-field-word-limit-line-height: 16px;--van-field-disabled-text-color: var(--van-text-color-3);--van-field-required-mark-color: var(--van-red)}.van-field__label{flex:none;box-sizing:border-box;width:var(--van-field-label-width);margin-right:var(--van-field-label-margin-right);color:var(--van-field-label-color);text-align:left;word-wrap:break-word}.van-field__label--center{text-align:center}.van-field__label--right{text-align:right}.van-field__label--required{position:relative}.van-field__label--required:before{color:var(--van-field-required-mark-color);content:"*";position:absolute;left:-8px;font-size:14px}.van-field--disabled .van-field__label{color:var(--van-field-disabled-text-color)}.van-field--label-top{flex-direction:column;align-items:stretch}.van-field--label-top .van-cell__title,.van-field--label-top .van-cell__value{flex:none;width:100%}.van-field--label-top .van-field__label{width:auto;margin-right:0;margin-bottom:var(--van-padding-xs)}.van-field.van-cell--normal{--van-field-input-font-size: var(--van-font-size-md)}.van-field__value{overflow:visible}.van-field__body{display:flex;align-items:center}.van-field__control{display:block;box-sizing:border-box;width:100%;min-width:0;margin:0;padding:0;color:var(--van-field-input-text-color);font-size:var(--van-field-input-font-size);line-height:inherit;text-align:left;background-color:transparent;border:0;resize:none;-webkit-user-select:auto;-moz-user-select:auto;user-select:auto}.van-field__control::-moz-placeholder{color:var(--van-field-placeholder-text-color)}.van-field__control::placeholder{color:var(--van-field-placeholder-text-color)}.van-field__control:disabled{color:var(--van-field-input-disabled-text-color);cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--van-field-input-disabled-text-color)}.van-field__control:-moz-read-only{cursor:default}.van-field__control:read-only{cursor:default}.van-field__control--center{justify-content:center;text-align:center}.van-field__control--right{justify-content:flex-end;text-align:right}.van-field__control--custom{display:flex;align-items:center;min-height:var(--van-cell-line-height)}.van-field__control--error::-moz-placeholder{color:var(--van-field-input-error-text-color);-webkit-text-fill-color:currentColor}.van-field__control--error,.van-field__control--error::placeholder{color:var(--van-field-input-error-text-color);-webkit-text-fill-color:currentColor}.van-field__control--min-height{min-height:var(--van-field-text-area-min-height)}.van-field__control[type=date],.van-field__control[type=time],.van-field__control[type=datetime-local]{min-height:var(--van-cell-line-height)}.van-field__control[type=search]{-webkit-appearance:none}.van-field__clear,.van-field__icon,.van-field__button,.van-field__right-icon{flex-shrink:0}.van-field__clear,.van-field__right-icon{margin-right:calc(var(--van-padding-xs) * -1);padding:0 var(--van-padding-xs);line-height:inherit}.van-field__clear{color:var(--van-field-clear-icon-color);font-size:var(--van-field-clear-icon-size);cursor:pointer}.van-field__left-icon .van-icon,.van-field__right-icon .van-icon{display:block;font-size:var(--van-field-icon-size);line-height:inherit}.van-field__left-icon{margin-right:var(--van-padding-base)}.van-field__right-icon{color:var(--van-field-right-icon-color)}.van-field__button{padding-left:var(--van-padding-xs)}.van-field__error-message{color:var(--van-field-error-message-color);font-size:var(--van-field-error-message-font-size);text-align:left}.van-field__error-message--center{text-align:center}.van-field__error-message--right{text-align:right}.van-field__word-limit{margin-top:var(--van-padding-base);color:var(--van-field-word-limit-color);font-size:var(--van-field-word-limit-font-size);line-height:var(--van-field-word-limit-line-height);text-align:right}
+:root{--van-field-label-width: 6.2em;--van-field-label-color: var(--van-gray-8);--van-field-label-margin-right: var(--van-padding-sm);--van-field-input-font-size: var(--van-font-size-lg);--van-field-input-text-color: var(--van-text-color);--van-field-input-error-text-color: var(--van-danger-color);--van-field-input-disabled-text-color: var(--van-text-color-3);--van-field-placeholder-text-color: var(--van-text-color-3);--van-field-icon-size: 16px;--van-field-clear-icon-size: 16px;--van-field-clear-icon-color: var(--van-gray-5);--van-field-right-icon-color: var(--van-gray-6);--van-field-error-message-color: var(--van-danger-color);--van-field-error-message-font-size: 12px;--van-field-text-area-min-height: 60px;--van-field-word-limit-color: var(--van-gray-7);--van-field-word-limit-font-size: var(--van-font-size-sm);--van-field-word-limit-line-height: 16px;--van-field-disabled-text-color: var(--van-text-color-3);--van-field-required-mark-color: var(--van-red)}.van-field__label{flex:none;box-sizing:border-box;width:var(--van-field-label-width);margin-right:var(--van-field-label-margin-right);color:var(--van-field-label-color);text-align:left;word-wrap:break-word}.van-field__label--center{text-align:center}.van-field__label--right{text-align:right}.van-field__label--required{position:relative}.van-field__label--required:before{color:var(--van-field-required-mark-color);content:"*";position:absolute;left:-8px;font-size:14px}.van-field--disabled .van-field__label{color:var(--van-field-disabled-text-color)}.van-field--label-top{flex-direction:column;align-items:stretch}.van-field--label-top .van-cell__title,.van-field--label-top .van-cell__value{flex:none;width:100%}.van-field--label-top .van-cell__value{margin-left:0}.van-field--label-top .van-field__label{width:auto;margin-right:0;margin-bottom:var(--van-padding-xs)}.van-field.van-cell--normal{--van-field-input-font-size: var(--van-font-size-md)}.van-field__value{flex:1;min-width:0;overflow:visible}.van-field__body{display:flex;align-items:center}.van-field__control{display:block;box-sizing:border-box;width:100%;min-width:0;margin:0;padding:0;color:var(--van-field-input-text-color);font-size:var(--van-field-input-font-size);line-height:inherit;text-align:left;background-color:transparent;border:0;resize:none;-webkit-user-select:auto;-moz-user-select:auto;user-select:auto}.van-field__control::-moz-placeholder{color:var(--van-field-placeholder-text-color)}.van-field__control::placeholder{color:var(--van-field-placeholder-text-color)}.van-field__control:disabled{color:var(--van-field-input-disabled-text-color);cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--van-field-input-disabled-text-color)}.van-field__control:-moz-read-only{cursor:default}.van-field__control:read-only{cursor:default}.van-field__control--center{justify-content:center;text-align:center}.van-field__control--right{justify-content:flex-end;text-align:right}.van-field__control--custom{display:flex;align-items:center;min-height:var(--van-cell-line-height)}.van-field__control--error::-moz-placeholder{color:var(--van-field-input-error-text-color);-webkit-text-fill-color:currentColor}.van-field__control--error,.van-field__control--error::placeholder{color:var(--van-field-input-error-text-color);-webkit-text-fill-color:currentColor}.van-field__control--min-height{min-height:var(--van-field-text-area-min-height)}.van-field__control[type=date],.van-field__control[type=time],.van-field__control[type=datetime-local]{min-height:var(--van-cell-line-height)}.van-field__control[type=search]{-webkit-appearance:none}.van-field__clear,.van-field__icon,.van-field__button,.van-field__unit,.van-field__right-icon{flex-shrink:0}.van-field__clear,.van-field__right-icon{margin-right:calc(var(--van-padding-xs) * -1);padding:0 var(--van-padding-xs);line-height:inherit}.van-field__clear{color:var(--van-field-clear-icon-color);font-size:var(--van-field-clear-icon-size);cursor:pointer}.van-field__left-icon .van-icon,.van-field__right-icon .van-icon{display:block;font-size:var(--van-field-icon-size);line-height:inherit}.van-field__left-icon{margin-right:var(--van-padding-base)}.van-field__right-icon{color:var(--van-field-right-icon-color)}.van-field__button{padding-left:var(--van-padding-xs)}.van-field__unit{margin-left:var(--van-padding-base);color:var(--van-field-input-text-color);font-size:var(--van-field-input-font-size);line-height:inherit;white-space:nowrap}.van-field__error-message{color:var(--van-field-error-message-color);font-size:var(--van-field-error-message-font-size);text-align:left}.van-field__error-message--center{text-align:center}.van-field__error-message--right{text-align:right}.van-field__word-limit{margin-top:var(--van-padding-base);color:var(--van-field-word-limit-color);font-size:var(--van-field-word-limit-font-size);line-height:var(--van-field-word-limit-line-height);text-align:right}

package/es/field/index.d.ts

@@ -180,6 +180,11 @@ export declare const Field: import("../utils").WithInstall<import("vue").DefineC
     labelClass: import("vue").PropType<unknown>;
     labelAlign: import("vue").PropType<import("./types").FieldTextAlign>;
     labelPosition: import("vue").PropType<import("./types").FieldLabelPosition>;
+    unit: (NumberConstructor | StringConstructor)[];
+    showUnit: {
+        type: import("vue").PropType<boolean | undefined>;
+        default: undefined;
+    };
     showWordLimit: BooleanConstructor;
     errorMessageAlign: import("vue").PropType<import("./types").FieldTextAlign>;
     colon: {
@@ -190,7 +195,7 @@ export declare const Field: import("../utils").WithInstall<import("vue").DefineC
         type: BooleanConstructor;
         default: boolean;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "clear" | "focus" | "blur" | "keypress" | "click-input" | "end-validate" | "start-validate" | "click-left-icon" | "click-right-icon")[], "update:modelValue" | "clear" | "focus" | "blur" | "keypress" | "click-input" | "end-validate" | "start-validate" | "click-left-icon" | "click-right-icon", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click-title-icon" | "update:modelValue" | "clear" | "focus" | "blur" | "keypress" | "click-input" | "end-validate" | "start-validate" | "click-left-icon" | "click-right-icon")[], "click-title-icon" | "update:modelValue" | "clear" | "focus" | "blur" | "keypress" | "click-input" | "end-validate" | "start-validate" | "click-left-icon" | "click-right-icon", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     icon: StringConstructor;
     size: import("vue").PropType<import("..").CellSize>;
     background: StringConstructor;
@@ -371,6 +376,11 @@ export declare const Field: import("../utils").WithInstall<import("vue").DefineC
     labelClass: import("vue").PropType<unknown>;
     labelAlign: import("vue").PropType<import("./types").FieldTextAlign>;
     labelPosition: import("vue").PropType<import("./types").FieldLabelPosition>;
+    unit: (NumberConstructor | StringConstructor)[];
+    showUnit: {
+        type: import("vue").PropType<boolean | undefined>;
+        default: undefined;
+    };
     showWordLimit: BooleanConstructor;
     errorMessageAlign: import("vue").PropType<import("./types").FieldTextAlign>;
     colon: {
@@ -385,6 +395,7 @@ export declare const Field: import("../utils").WithInstall<import("vue").DefineC
     onFocus?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
     onKeypress?: ((...args: any[]) => any) | undefined;
+    "onClick-title-icon"?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onClear?: ((...args: any[]) => any) | undefined;
     "onClick-input"?: ((...args: any[]) => any) | undefined;
@@ -439,6 +450,7 @@ export declare const Field: import("../utils").WithInstall<import("vue").DefineC
     formatTrigger: import("./types").FieldFormatTrigger;
     error: boolean;
     readonly: boolean;
+    showUnit: boolean | undefined;
     showWordLimit: boolean;
     colon: boolean;
 }>>;

package/es/field/index.less

@@ -71,6 +71,10 @@
       width: 100%;
     }
 
+    .van-cell__value {
+      margin-left: 0;
+    }
+
     .van-field__label {
       width: auto;
       margin-right: 0;
@@ -83,6 +87,8 @@
   }
 
   &__value {
+    flex: 1;
+    min-width: 0;
     overflow: visible;
   }
 
@@ -166,6 +172,7 @@
   &__clear,
   &__icon,
   &__button,
+  &__unit,
   &__right-icon {
     flex-shrink: 0;
   }
@@ -202,6 +209,14 @@
     padding-left: var(--van-padding-xs);
   }
 
+  &__unit {
+    margin-left: var(--van-padding-base);
+    color: var(--van-field-input-text-color);
+    font-size: var(--van-field-input-font-size);
+    line-height: inherit;
+    white-space: nowrap;
+  }
+
   &__error-message {
     color: var(--van-field-error-message-color);
     font-size: var(--van-field-error-message-font-size);

package/es/index.d.ts

@@ -116,4 +116,4 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "0.0.39";
+export const version: "0.0.40";

package/es/index.mjs

@@ -109,7 +109,7 @@ import { Uploader } from "./uploader/index.mjs";
 import { VideoPreview } from "./video-preview/index.mjs";
 import { WorkOrderCard } from "./work-order-card/index.mjs";
 import { WorkOrderFilter } from "./work-order-filter/index.mjs";
-const version = "0.0.39";
+const version = "0.0.40";
 function install(app) {
   const components = [
     ActionBar,

package/es/material-display-bar/MaterialDisplayBar.d.ts

@@ -146,11 +146,11 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     replace: boolean;
     name: string;
+    unit: string;
     showArrow: boolean;
     fields: MaterialDisplayBarField[];
     divider: boolean;
     quantityLabel: string;
-    unit: string;
     rounded: boolean;
     stockInsufficient: boolean;
     stockInsufficientText: string;

package/es/material-display-bar/index.d.ts

@@ -88,11 +88,11 @@ export declare const MaterialPreviewList: import("../utils").WithInstall<import(
 }, {
     replace: boolean;
     name: string;
+    unit: string;
     showArrow: boolean;
     fields: import("./MaterialDisplayBar").MaterialDisplayBarField[];
     divider: boolean;
     quantityLabel: string;
-    unit: string;
     rounded: boolean;
     stockInsufficient: boolean;
     stockInsufficientText: string;
@@ -189,11 +189,11 @@ export declare const MaterialPreview: import("../utils").WithInstall<import("vue
 }, {
     replace: boolean;
     name: string;
+    unit: string;
     showArrow: boolean;
     fields: import("./MaterialDisplayBar").MaterialDisplayBarField[];
     divider: boolean;
     quantityLabel: string;
-    unit: string;
     rounded: boolean;
     stockInsufficient: boolean;
     stockInsufficientText: string;
@@ -290,11 +290,11 @@ export declare const MaterialDisplayBar: import("../utils").WithInstall<import("
 }, {
     replace: boolean;
     name: string;
+    unit: string;
     showArrow: boolean;
     fields: import("./MaterialDisplayBar").MaterialDisplayBarField[];
     divider: boolean;
     quantityLabel: string;
-    unit: string;
     rounded: boolean;
     stockInsufficient: boolean;
     stockInsufficientText: string;

package/es/uploader/Uploader.d.ts

@@ -45,6 +45,7 @@ declare const uploaderProps: {
         type: BooleanConstructor;
         default: true;
     };
+    uploadFirst: BooleanConstructor;
     modelValue: {
         type: PropType<UploaderFileListItem[]>;
         default: () => never[];
@@ -109,6 +110,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
+    uploadFirst: BooleanConstructor;
     modelValue: {
         type: PropType<UploaderFileListItem[]>;
         default: () => never[];
@@ -171,6 +173,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
+    uploadFirst: BooleanConstructor;
     modelValue: {
         type: PropType<UploaderFileListItem[]>;
         default: () => never[];
@@ -213,6 +216,7 @@ declare const _default: import("vue").DefineComponent<{
     uploadIcon: string;
     deletable: boolean;
     showUpload: boolean;
+    uploadFirst: boolean;
     previewImage: boolean;
     previewFullImage: boolean;
     maxSize: UploaderMaxSize;

package/es/uploader/Uploader.mjs

@@ -18,7 +18,7 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { ref, reactive, defineComponent, onBeforeUnmount, mergeProps as _mergeProps, createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
+import { ref, reactive, defineComponent, onBeforeUnmount, mergeProps as _mergeProps, createVNode as _createVNode, createTextVNode as _createTextVNode, Fragment as _Fragment } from "vue";
 import { pick, extend, toArray, isPromise, truthProp, getSizeStyle, makeArrayProp, makeStringProp, makeNumericProp } from "../utils/index.mjs";
 import { bem, name, isOversize, filterFiles, isImageFile, isVideoFile, readFileContent, createVideoThumbnail } from "./utils.mjs";
 import { useCustomFieldValue } from "@vant/use";
@@ -44,6 +44,7 @@ const uploaderProps = {
   deletable: truthProp,
   afterRead: Function,
   showUpload: truthProp,
+  uploadFirst: Boolean,
   modelValue: makeArrayProp(),
   beforeRead: Function,
   beforeDelete: Function,
@@ -264,7 +265,7 @@ var stdin_default = defineComponent({
       "class": bem("wrapper", {
         disabled: props.disabled
       })
-    }, [renderPreviewList(), renderUpload()])]);
+    }, [props.uploadFirst ? _createVNode(_Fragment, null, [renderUpload(), renderPreviewList()]) : _createVNode(_Fragment, null, [renderPreviewList(), renderUpload()])])]);
   }
 });
 export {

package/es/uploader/index.d.ts

@@ -41,6 +41,7 @@ export declare const Uploader: import("../utils").WithInstall<import("vue").Defi
         type: BooleanConstructor;
         default: true;
     };
+    uploadFirst: BooleanConstructor;
     modelValue: {
         type: import("vue").PropType<import("./types").UploaderFileListItem[]>;
         default: () => never[];
@@ -103,6 +104,7 @@ export declare const Uploader: import("../utils").WithInstall<import("vue").Defi
         type: BooleanConstructor;
         default: true;
     };
+    uploadFirst: BooleanConstructor;
     modelValue: {
         type: import("vue").PropType<import("./types").UploaderFileListItem[]>;
         default: () => never[];
@@ -145,6 +147,7 @@ export declare const Uploader: import("../utils").WithInstall<import("vue").Defi
     uploadIcon: string;
     deletable: boolean;
     showUpload: boolean;
+    uploadFirst: boolean;
     previewImage: boolean;
     previewFullImage: boolean;
     maxSize: import("./types").UploaderMaxSize;

package/lib/cell/Cell.js

@@ -286,12 +286,14 @@ var stdin_default = (0, import_vue.defineComponent)({
               emit("update:multiLineNotesCollapsed", multiLineNotesCollapsed.value);
             }
           }
-        }, [props.showTitleCollapseIcon && (0, import_vue.createVNode)(import_icon.Icon, {
+        }, [props.showTitleCollapseIcon && (0, import_vue.createVNode)("div", {
+          "class": bem("title-collapse-action")
+        }, [(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()]);
+        }, 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 = () => {
@@ -531,24 +533,30 @@ var stdin_default = (0, import_vue.defineComponent)({
         return;
       }
       if (slots["right-icon"]) {
-        return slots["right-icon"]();
+        return (0, import_vue.createVNode)("div", {
+          "class": bem("right-icon-action")
+        }, [slots["right-icon"]()]);
       }
       if (props.rightIcon) {
-        return (0, import_vue.createVNode)(import_icon.Icon, {
+        return (0, import_vue.createVNode)("div", {
+          "class": bem("right-icon-action")
+        }, [(0, import_vue.createVNode)(import_icon.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 (0, import_vue.createVNode)(import_icon.Icon, {
+        return (0, import_vue.createVNode)("div", {
+          "class": bem("right-icon-action")
+        }, [(0, import_vue.createVNode)(import_icon.Icon, {
           "name": name2,
           "class": bem("right-icon")
-        }, null);
+        }, null)]);
       }
     };
     return () => {
-      var _a2, _b2, _c;
+      var _a2, _b2, _c, _d;
       const {
         size,
         center,
@@ -561,14 +569,16 @@ var stdin_default = (0, import_vue.defineComponent)({
       } = props;
       const clickable = (_a2 = props.clickable) != null ? _a2 : isLink || rightIcon === "arrow" || hasSelect("left") || hasSelect("right");
       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 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;
@@ -587,7 +597,7 @@ var stdin_default = (0, import_vue.defineComponent)({
         "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)]);
     };
   }
 });