persagy-vant 0.0.34 → 0.0.36

package/lib/tag/index.css

@@ -1 +1 @@
-:root{--van-tag-padding: 0 var(--van-padding-base);--van-tag-text-color: var(--van-white);--van-tag-font-size: var(--van-font-size-sm);--van-tag-border-radius: 2px;--van-tag-line-height: 16px;--van-tag-medium-padding: 2px 6px;--van-tag-large-padding: var(--van-padding-base) var(--van-padding-xs);--van-tag-large-border-radius: var(--van-border-radius-md);--van-tag-large-font-size: var(--van-font-size-md);--van-tag-round-border-radius: var(--van-border-radius-max);--van-tag-danger-color: var(--van-red-700);--van-tag-danger-background-color: var(--van-red-100);--van-tag-primary-color: var(--van-blue-700);--van-tag-primary-background-color: var(--van-blue-100);--van-tag-success-color: var(--van-green-700);--van-tag-success-background-color: var(--van-green-100);--van-tag-warning-color: var(--van-orange-700);--van-tag-warning-background-color: var(--van-orange-100);--van-tag-gray-color: var(--van-gray-8);--van-tag-gray-background-color: var(--van-gray-3);--van-tag-default-color: var(--van-gray-6);--van-tag-plain-background-color: transparent}.van-tag{position:relative;display:inline-flex;align-items:center;padding:var(--van-tag-padding);color:var(--van-tag-text-color);font-size:var(--van-tag-font-size);line-height:var(--van-tag-line-height);border-radius:var(--van-tag-border-radius)}.van-tag--default{background:var(--van-tag-default-color)}.van-tag--default.van-tag--plain{color:var(--van-tag-default-color)}.van-tag--danger{background:var(--van-tag-danger-background-color);color:var(--van-tag-danger-color)}.van-tag--primary{background:var(--van-tag-primary-background-color);color:var(--van-tag-primary-color)}.van-tag--success{background:var(--van-tag-success-background-color);color:var(--van-tag-success-color)}.van-tag--warning{background:var(--van-tag-warning-background-color);color:var(--van-tag-warning-color)}.van-tag--gray{background:var(--van-tag-gray-background-color);color:var(--van-tag-gray-color)}.van-tag--plain{background:var(--van-tag-plain-background-color);border-color:currentColor}.van-tag--plain:before{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-color:inherit;border-radius:inherit;content:"";pointer-events:none}.van-tag--medium{padding:var(--van-tag-medium-padding)}.van-tag--large{padding:var(--van-tag-large-padding);font-size:var(--van-tag-large-font-size);border-radius:var(--van-tag-large-border-radius)}.van-tag--mark{border-radius:0 var(--van-tag-round-border-radius) var(--van-tag-round-border-radius) 0}.van-tag--mark:after{display:block;width:2px;content:""}.van-tag--round{border-radius:var(--van-tag-round-border-radius)}.van-tag__close{margin-left:2px}
+:root{--van-tag-padding: 0 var(--van-padding-base);--van-tag-text-color: var(--van-white);--van-tag-font-size: var(--van-font-size-sm);--van-tag-border-radius: 2px;--van-tag-line-height: 16px;--van-tag-medium-padding: 2px 6px;--van-tag-small-padding: 1px 4px;--van-tag-small-font-size: var(--van-font-size-xs);--van-tag-large-padding: var(--van-padding-base) var(--van-padding-xs);--van-tag-large-border-radius: var(--van-border-radius-md);--van-tag-large-font-size: var(--van-font-size-md);--van-tag-round-border-radius: var(--van-border-radius-max);--van-tag-icon-gap: 2px;--van-tag-right-icon-size: 12px;--van-tag-small-right-icon-size: 10px;--van-tag-large-right-icon-size: 14px;--van-tag-danger-color: var(--van-red-700);--van-tag-danger-background-color: var(--van-red-100);--van-tag-primary-color: var(--van-blue-700);--van-tag-primary-background-color: var(--van-blue-100);--van-tag-success-color: var(--van-green-700);--van-tag-success-background-color: var(--van-green-100);--van-tag-warning-color: var(--van-orange-700);--van-tag-warning-background-color: var(--van-orange-100);--van-tag-gray-color: var(--van-gray-8);--van-tag-gray-background-color: var(--van-gray-3);--van-tag-turquoise-color: #0f766e;--van-tag-turquoise-background-color: #ccfbf1;--van-tag-purple-color: #7e22ce;--van-tag-purple-background-color: #f3e8ff;--van-tag-violet-color: #6d28d9;--van-tag-violet-background-color: #ede9fe;--van-tag-default-color: var(--van-gray-6);--van-tag-plain-background-color: transparent}.van-tag{position:relative;display:inline-flex;align-items:center;padding:var(--van-tag-padding);color:var(--van-tag-text-color);font-size:var(--van-tag-font-size);line-height:var(--van-tag-line-height);border-radius:var(--van-tag-border-radius)}.van-tag--default{background:var(--van-tag-default-color)}.van-tag--default.van-tag--plain{color:var(--van-tag-default-color)}.van-tag--danger{background:var(--van-tag-danger-background-color);color:var(--van-tag-danger-color)}.van-tag--primary{background:var(--van-tag-primary-background-color);color:var(--van-tag-primary-color)}.van-tag--success{background:var(--van-tag-success-background-color);color:var(--van-tag-success-color)}.van-tag--warning{background:var(--van-tag-warning-background-color);color:var(--van-tag-warning-color)}.van-tag--gray{background:var(--van-tag-gray-background-color);color:var(--van-tag-gray-color)}.van-tag--turquoise{background:var(--van-tag-turquoise-background-color);color:var(--van-tag-turquoise-color)}.van-tag--purple{background:var(--van-tag-purple-background-color);color:var(--van-tag-purple-color)}.van-tag--violet{background:var(--van-tag-violet-background-color);color:var(--van-tag-violet-color)}.van-tag--plain{background:var(--van-tag-plain-background-color);border-color:currentColor}.van-tag--plain:before{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-color:inherit;border-radius:inherit;content:"";pointer-events:none}.van-tag--medium{padding:var(--van-tag-medium-padding)}.van-tag--small{padding:var(--van-tag-small-padding);font-size:var(--van-tag-small-font-size);--van-tag-right-icon-size: var(--van-tag-small-right-icon-size)}.van-tag--large{padding:var(--van-tag-large-padding);font-size:var(--van-tag-large-font-size);border-radius:var(--van-tag-large-border-radius);--van-tag-right-icon-size: var(--van-tag-large-right-icon-size)}.van-tag--mark{border-radius:0 var(--van-tag-round-border-radius) var(--van-tag-round-border-radius) 0}.van-tag--mark:after{display:block;width:2px;content:""}.van-tag--round{border-radius:var(--van-tag-round-border-radius)}.van-tag__close{margin-left:var(--van-tag-icon-gap)}.van-tag__right-icon{margin-left:var(--van-tag-icon-gap);font-size:var(--van-tag-right-icon-size)}.van-tag__number{margin-right:2px;font-weight:600}

package/lib/tag/index.d.ts

@@ -17,6 +17,10 @@ export declare const Tag: import("../utils").WithInstall<import("vue").DefineCom
     round: BooleanConstructor;
     textColor: StringConstructor;
     closeable: BooleanConstructor;
+    rightIcon: StringConstructor;
+    number: (NumberConstructor | StringConstructor)[];
+    showNumber: BooleanConstructor;
+    numberColor: StringConstructor;
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     size: {
         type: import("vue").PropType<import("./Tag").TagSize>;
@@ -36,6 +40,10 @@ export declare const Tag: import("../utils").WithInstall<import("vue").DefineCom
     round: BooleanConstructor;
     textColor: StringConstructor;
     closeable: BooleanConstructor;
+    rightIcon: StringConstructor;
+    number: (NumberConstructor | StringConstructor)[];
+    showNumber: BooleanConstructor;
+    numberColor: StringConstructor;
 }>> & {
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
@@ -46,6 +54,7 @@ export declare const Tag: import("../utils").WithInstall<import("vue").DefineCom
     show: boolean;
     plain: boolean;
     closeable: boolean;
+    showNumber: boolean;
 }>>;
 export default Tag;
 export type { TagSize, TagType, TagProps } from './Tag';

package/lib/tag/index.less

@@ -7,10 +7,16 @@
   --van-tag-border-radius: @tag-border-radius;
   --van-tag-line-height: @tag-line-height;
   --van-tag-medium-padding: @tag-medium-padding;
+  --van-tag-small-padding: @tag-small-padding;
+  --van-tag-small-font-size: @tag-small-font-size;
   --van-tag-large-padding: @tag-large-padding;
   --van-tag-large-border-radius: @tag-large-border-radius;
   --van-tag-large-font-size: @tag-large-font-size;
   --van-tag-round-border-radius: @tag-round-border-radius;
+  --van-tag-icon-gap: @tag-icon-gap;
+  --van-tag-right-icon-size: @tag-right-icon-size;
+  --van-tag-small-right-icon-size: @tag-small-right-icon-size;
+  --van-tag-large-right-icon-size: @tag-large-right-icon-size;
   --van-tag-danger-color: @tag-danger-color;
   --van-tag-danger-background-color: @tag-danger-background-color;
   --van-tag-primary-color: @tag-primary-color;
@@ -21,6 +27,12 @@
   --van-tag-warning-background-color: @tag-warning-background-color;
   --van-tag-gray-color: @tag-gray-color;
   --van-tag-gray-background-color: @tag-gray-background-color;
+  --van-tag-turquoise-color: @tag-turquoise-color;
+  --van-tag-turquoise-background-color: @tag-turquoise-background-color;
+  --van-tag-purple-color: @tag-purple-color;
+  --van-tag-purple-background-color: @tag-purple-background-color;
+  --van-tag-violet-color: @tag-violet-color;
+  --van-tag-violet-background-color: @tag-violet-background-color;
   --van-tag-default-color: @tag-default-color;
   --van-tag-plain-background-color: @tag-plain-background-color;
 }
@@ -68,6 +80,21 @@
     color: var(--van-tag-gray-color);
   }
 
+  &--turquoise {
+    background: var(--van-tag-turquoise-background-color);
+    color: var(--van-tag-turquoise-color);
+  }
+
+  &--purple {
+    background: var(--van-tag-purple-background-color);
+    color: var(--van-tag-purple-color);
+  }
+
+  &--violet {
+    background: var(--van-tag-violet-background-color);
+    color: var(--van-tag-violet-color);
+  }
+
   &--plain {
     background: var(--van-tag-plain-background-color);
     border-color: currentColor;
@@ -90,10 +117,17 @@
     padding: var(--van-tag-medium-padding);
   }
 
+  &--small {
+    padding: var(--van-tag-small-padding);
+    font-size: var(--van-tag-small-font-size);
+    --van-tag-right-icon-size: var(--van-tag-small-right-icon-size);
+  }
+
   &--large {
     padding: var(--van-tag-large-padding);
     font-size: var(--van-tag-large-font-size);
     border-radius: var(--van-tag-large-border-radius);
+    --van-tag-right-icon-size: var(--van-tag-large-right-icon-size);
   }
 
   &--mark {
@@ -112,6 +146,16 @@
   }
 
   &__close {
-    margin-left: 2px;
+    margin-left: var(--van-tag-icon-gap);
+  }
+
+  &__right-icon {
+    margin-left: var(--van-tag-icon-gap);
+    font-size: var(--van-tag-right-icon-size);
+  }
+
+  &__number {
+    margin-right: 2px;
+    font-weight: 600;
   }
 }

package/lib/tag/var.less

@@ -6,10 +6,16 @@
 @tag-border-radius: 2px;
 @tag-line-height: 16px;
 @tag-medium-padding: 2px 6px;
+@tag-small-padding: 1px 4px;
+@tag-small-font-size: var(--van-font-size-xs);
 @tag-large-padding: var(--van-padding-base) var(--van-padding-xs);
 @tag-large-border-radius: var(--van-border-radius-md);
 @tag-large-font-size: var(--van-font-size-md);
 @tag-round-border-radius: var(--van-border-radius-max);
+@tag-icon-gap: 2px;
+@tag-right-icon-size: 12px;
+@tag-small-right-icon-size: 10px;
+@tag-large-right-icon-size: 14px;
 
 @tag-danger-color: var(--van-red-700);
 @tag-danger-background-color: var(--van-red-100);
@@ -26,6 +32,13 @@
 @tag-gray-color: var(--van-gray-8);
 @tag-gray-background-color: var(--van-gray-3);
 
+@tag-turquoise-color: #0f766e;
+@tag-turquoise-background-color: #ccfbf1;
+@tag-purple-color: #7e22ce;
+@tag-purple-background-color: #f3e8ff;
+@tag-violet-color: #6d28d9;
+@tag-violet-background-color: #ede9fe;
+
 @tag-default-color: var(--van-gray-6);
 
 @tag-plain-background-color: transparent;

package/lib/title-bar/TitleBar.d.ts

@@ -1,20 +1,25 @@
-import { type ExtractPropTypes, type PropType } from 'vue';
+import { type ExtractPropTypes } from 'vue';
 export declare type TitleBarSize = 'default' | 'mini';
 declare const titleBarProps: {
     title: {
-        type: PropType<string>;
+        type: import("vue").PropType<string>;
         default: string;
     };
     description: {
-        type: PropType<string>;
+        type: import("vue").PropType<string>;
         default: string;
     };
     icon: StringConstructor;
     showIcon: BooleanConstructor;
     showDescription: BooleanConstructor;
     showArrow: BooleanConstructor;
+    actionText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    showAction: BooleanConstructor;
     size: {
-        type: PropType<TitleBarSize>;
+        type: import("vue").PropType<TitleBarSize>;
         default: TitleBarSize;
     };
     expandable: BooleanConstructor;
@@ -26,19 +31,24 @@ declare const titleBarProps: {
 export declare type TitleBarProps = ExtractPropTypes<typeof titleBarProps>;
 declare const _default: import("vue").DefineComponent<{
     title: {
-        type: PropType<string>;
+        type: import("vue").PropType<string>;
         default: string;
     };
     description: {
-        type: PropType<string>;
+        type: import("vue").PropType<string>;
         default: string;
     };
     icon: StringConstructor;
     showIcon: BooleanConstructor;
     showDescription: BooleanConstructor;
     showArrow: BooleanConstructor;
+    actionText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    showAction: BooleanConstructor;
     size: {
-        type: PropType<TitleBarSize>;
+        type: import("vue").PropType<TitleBarSize>;
         default: TitleBarSize;
     };
     expandable: BooleanConstructor;
@@ -46,21 +56,26 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "change" | "update:modelValue")[], "click" | "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "change" | "update:modelValue" | "click-action")[], "click" | "change" | "update:modelValue" | "click-action", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     title: {
-        type: PropType<string>;
+        type: import("vue").PropType<string>;
         default: string;
     };
     description: {
-        type: PropType<string>;
+        type: import("vue").PropType<string>;
         default: string;
     };
     icon: StringConstructor;
     showIcon: BooleanConstructor;
     showDescription: BooleanConstructor;
     showArrow: BooleanConstructor;
+    actionText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    showAction: BooleanConstructor;
     size: {
-        type: PropType<TitleBarSize>;
+        type: import("vue").PropType<TitleBarSize>;
         default: TitleBarSize;
     };
     expandable: BooleanConstructor;
@@ -72,13 +87,16 @@ declare const _default: import("vue").DefineComponent<{
     onChange?: ((...args: any[]) => any) | undefined;
     onClick?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onClick-action"?: ((...args: any[]) => any) | undefined;
 }, {
     title: string;
     size: TitleBarSize;
     modelValue: boolean;
     description: string;
+    actionText: string;
     expandable: boolean;
     showArrow: boolean;
+    showAction: boolean;
     showDescription: boolean;
     showIcon: boolean;
 }>;

package/lib/title-bar/TitleBar.js

@@ -21,6 +21,7 @@ __export(stdin_exports, {
 });
 module.exports = __toCommonJS(stdin_exports);
 var import_vue = require("vue");
+var import_button = require("../button");
 var import_icon = require("../icon");
 var import_utils = require("../utils");
 const [name, bem] = (0, import_utils.createNamespace)("title-bar");
@@ -31,6 +32,8 @@ const titleBarProps = {
   showIcon: Boolean,
   showDescription: Boolean,
   showArrow: Boolean,
+  actionText: (0, import_utils.makeStringProp)("\u64CD\u4F5C"),
+  showAction: Boolean,
   size: (0, import_utils.makeStringProp)("default"),
   expandable: Boolean,
   modelValue: import_utils.truthProp
@@ -38,7 +41,7 @@ const titleBarProps = {
 var stdin_default = (0, import_vue.defineComponent)({
   name,
   props: titleBarProps,
-  emits: ["update:modelValue", "change", "click"],
+  emits: ["update:modelValue", "change", "click", "click-action"],
   setup(props, {
     slots,
     emit
@@ -50,6 +53,21 @@ var stdin_default = (0, import_vue.defineComponent)({
       emit("update:modelValue", value);
       emit("change", value);
     };
+    const onHeaderClick = (event) => {
+      emit("click", event);
+      toggle();
+    };
+    const onActionClick = (event) => {
+      event.stopPropagation();
+      emit("click-action", event);
+    };
+    const onHeaderKeydown = (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        emit("click", event);
+        toggle();
+      }
+    };
     return () => {
       var _a, _b, _c;
       return (0, import_vue.createVNode)("section", {
@@ -57,20 +75,32 @@ var stdin_default = (0, import_vue.defineComponent)({
           mini: props.size === "mini",
           expandable: props.expandable
         })
-      }, [(0, import_vue.createVNode)("button", {
-        "type": "button",
+      }, [(0, import_vue.createVNode)("div", {
         "class": bem("header"),
+        "role": "button",
+        "tabindex": "0",
         "aria-expanded": props.expandable ? props.modelValue : void 0,
-        "onClick": (event) => {
-          emit("click", event);
-          toggle();
-        }
+        "onClick": onHeaderClick,
+        "onKeydown": onHeaderKeydown
       }, [props.showIcon && props.icon && (0, import_vue.createVNode)(import_icon.Icon, {
         "name": props.icon,
         "class": bem("icon")
       }, null), (0, import_vue.createVNode)("span", {
         "class": bem("text")
-      }, [(0, import_vue.createVNode)("strong", null, [((_a = slots.title) == null ? void 0 : _a.call(slots)) || props.title]), props.size !== "mini" && props.showDescription && props.description && (0, import_vue.createVNode)("span", null, [((_b = slots.description) == null ? void 0 : _b.call(slots)) || props.description])]), (props.showArrow || props.expandable) && (0, import_vue.createVNode)(import_icon.Icon, {
+      }, [(0, import_vue.createVNode)("span", {
+        "class": bem("title-row")
+      }, [(0, import_vue.createVNode)("strong", null, [((_a = slots.title) == null ? void 0 : _a.call(slots)) || props.title]), props.showAction && props.actionText && (0, import_vue.createVNode)("span", {
+        "class": bem("action")
+      }, [(0, import_vue.createVNode)("i", {
+        "class": bem("action-divider")
+      }, null), (0, import_vue.createVNode)(import_button.Button, {
+        "type": "text",
+        "size": "small",
+        "text": props.actionText,
+        "onClick": onActionClick
+      }, null)])]), props.size !== "mini" && props.showDescription && props.description && (0, import_vue.createVNode)("span", {
+        "class": bem("description")
+      }, [((_b = slots.description) == null ? void 0 : _b.call(slots)) || props.description])]), (props.showArrow || props.expandable) && (0, import_vue.createVNode)(import_icon.Icon, {
         "name": "arrow-up",
         "class": bem("arrow", {
           expanded: props.expandable && props.modelValue

package/lib/title-bar/index.css

@@ -1 +1 @@
-:root{--van-title-bar-padding: 12px var(--van-padding-md) 4px;--van-title-bar-gap: 4px;--van-title-bar-title-color: var(--van-gray-8);--van-title-bar-description-color: var(--van-gray-6)}.van-title-bar{color:var(--van-title-bar-title-color)}.van-title-bar__header{display:flex;align-items:flex-start;width:100%;padding:var(--van-title-bar-padding);color:inherit;font:inherit;text-align:left;background:transparent;border:0}.van-title-bar--expandable .van-title-bar__header{cursor:pointer}.van-title-bar--expandable .van-title-bar__header:active{background:var(--van-active-color)}.van-title-bar__icon{flex:none;margin:3px 4px 0 0;font-size:16px}.van-title-bar__text{display:flex;flex:1;flex-direction:column;min-width:0}.van-title-bar__text strong{overflow:hidden;font-size:var(--van-font-size-md);font-weight:var(--van-font-weight-bold);line-height:var(--van-line-height-lg);text-overflow:ellipsis;white-space:nowrap}.van-title-bar__text>span{overflow:hidden;color:var(--van-title-bar-description-color);font-size:var(--van-font-size-sm);font-weight:400;line-height:var(--van-line-height-md);text-overflow:ellipsis;white-space:nowrap}.van-title-bar__arrow{flex:none;margin:4px 0 0 8px;color:var(--van-gray-6);font-size:14px;transition:transform var(--van-animation-duration-fast);transform:rotate(180deg)}.van-title-bar__arrow--expanded{transform:rotate(0)}.van-title-bar--mini .van-title-bar__header{padding-top:12px;padding-bottom:4px}.van-title-bar--mini .van-title-bar__text strong{font-size:var(--van-font-size-sm);line-height:var(--van-line-height-md)}.van-title-bar--mini .van-title-bar__icon{margin-top:3px;font-size:14px}.van-title-bar--mini .van-title-bar__arrow{margin-top:3px}
+:root{--van-title-bar-padding: 12px var(--van-padding-md) 4px;--van-title-bar-gap: 4px;--van-title-bar-title-color: var(--van-gray-8);--van-title-bar-description-color: var(--van-gray-6);--van-title-bar-action-divider-before-gap: 8px;--van-title-bar-action-divider-after-gap: 2px;--van-title-bar-action-divider-color: var(--van-gray-4);--van-title-bar-action-divider-height: 12px}.van-title-bar{color:var(--van-title-bar-title-color)}.van-title-bar__header{display:flex;align-items:flex-start;width:100%;padding:var(--van-title-bar-padding);color:inherit;font:inherit;text-align:left;background:transparent;border:0}.van-title-bar--expandable .van-title-bar__header{cursor:pointer}.van-title-bar--expandable .van-title-bar__header:active{background:var(--van-active-color)}.van-title-bar__icon{flex:none;margin:3px 4px 0 0;font-size:16px}.van-title-bar__text{display:flex;flex:1;flex-direction:column;min-width:0}.van-title-bar__title-row{display:flex;align-items:center;min-width:0}.van-title-bar__text strong{flex:0 1 auto;min-width:0;overflow:hidden;font-size:var(--van-font-size-md);font-weight:var(--van-font-weight-bold);line-height:var(--van-line-height-lg);text-overflow:ellipsis;white-space:nowrap}.van-title-bar__description{overflow:hidden;color:var(--van-title-bar-description-color);font-size:var(--van-font-size-sm);font-weight:400;line-height:var(--van-line-height-md);text-overflow:ellipsis;white-space:nowrap}.van-title-bar__action{display:flex;flex:none;align-items:center;margin-left:var(--van-title-bar-action-divider-before-gap)}.van-title-bar__action-divider{width:1px;height:var(--van-title-bar-action-divider-height);margin-right:var(--van-title-bar-action-divider-after-gap);background:var(--van-title-bar-action-divider-color)}.van-title-bar__action .van-button{flex:none}.van-title-bar__arrow{flex:none;margin:4px 0 0 8px;color:var(--van-gray-6);font-size:14px;transition:transform var(--van-animation-duration-fast);transform:rotate(180deg)}.van-title-bar__arrow--expanded{transform:rotate(0)}.van-title-bar--mini .van-title-bar__header{padding-top:12px;padding-bottom:4px}.van-title-bar--mini .van-title-bar__text strong{font-size:var(--van-font-size-sm);line-height:var(--van-line-height-md)}.van-title-bar--mini .van-title-bar__icon{margin-top:3px;font-size:14px}.van-title-bar--mini .van-title-bar__arrow{margin-top:3px}

package/lib/title-bar/index.d.ts

@@ -11,6 +11,11 @@ export declare const TitleBar: import("../utils").WithInstall<import("vue").Defi
     showIcon: BooleanConstructor;
     showDescription: BooleanConstructor;
     showArrow: BooleanConstructor;
+    actionText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    showAction: BooleanConstructor;
     size: {
         type: import("vue").PropType<import("./TitleBar").TitleBarSize>;
         default: import("./TitleBar").TitleBarSize;
@@ -20,7 +25,7 @@ export declare const TitleBar: import("../utils").WithInstall<import("vue").Defi
         type: BooleanConstructor;
         default: true;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "change" | "update:modelValue")[], "click" | "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "change" | "update:modelValue" | "click-action")[], "click" | "change" | "update:modelValue" | "click-action", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     title: {
         type: import("vue").PropType<string>;
         default: string;
@@ -33,6 +38,11 @@ export declare const TitleBar: import("../utils").WithInstall<import("vue").Defi
     showIcon: BooleanConstructor;
     showDescription: BooleanConstructor;
     showArrow: BooleanConstructor;
+    actionText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    showAction: BooleanConstructor;
     size: {
         type: import("vue").PropType<import("./TitleBar").TitleBarSize>;
         default: import("./TitleBar").TitleBarSize;
@@ -46,13 +56,16 @@ export declare const TitleBar: import("../utils").WithInstall<import("vue").Defi
     onChange?: ((...args: any[]) => any) | undefined;
     onClick?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onClick-action"?: ((...args: any[]) => any) | undefined;
 }, {
     title: string;
     size: import("./TitleBar").TitleBarSize;
     modelValue: boolean;
     description: string;
+    actionText: string;
     expandable: boolean;
     showArrow: boolean;
+    showAction: boolean;
     showDescription: boolean;
     showIcon: boolean;
 }>>;

package/lib/title-bar/index.less

@@ -5,6 +5,10 @@
   --van-title-bar-gap: @title-bar-gap;
   --van-title-bar-title-color: @title-bar-title-color;
   --van-title-bar-description-color: @title-bar-description-color;
+  --van-title-bar-action-divider-before-gap: @title-bar-action-divider-before-gap;
+  --van-title-bar-action-divider-after-gap: @title-bar-action-divider-after-gap;
+  --van-title-bar-action-divider-color: @title-bar-action-divider-color;
+  --van-title-bar-action-divider-height: @title-bar-action-divider-height;
 }
 
 .van-title-bar {
@@ -14,8 +18,12 @@
   &--expandable &__header { cursor: pointer; &:active { background: var(--van-active-color); } }
   &__icon { flex: none; margin: 3px 4px 0 0; font-size: 16px; }
   &__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
-  &__text strong { overflow: hidden; font-size: var(--van-font-size-md); font-weight: var(--van-font-weight-bold); line-height: var(--van-line-height-lg); text-overflow: ellipsis; white-space: nowrap; }
-  &__text > span { overflow: hidden; color: var(--van-title-bar-description-color); font-size: var(--van-font-size-sm); font-weight: 400; line-height: var(--van-line-height-md); text-overflow: ellipsis; white-space: nowrap; }
+  &__title-row { display: flex; align-items: center; min-width: 0; }
+  &__text strong { flex: 0 1 auto; min-width: 0; overflow: hidden; font-size: var(--van-font-size-md); font-weight: var(--van-font-weight-bold); line-height: var(--van-line-height-lg); text-overflow: ellipsis; white-space: nowrap; }
+  &__description { overflow: hidden; color: var(--van-title-bar-description-color); font-size: var(--van-font-size-sm); font-weight: 400; line-height: var(--van-line-height-md); text-overflow: ellipsis; white-space: nowrap; }
+  &__action { display: flex; flex: none; align-items: center; margin-left: var(--van-title-bar-action-divider-before-gap); }
+  &__action-divider { width: 1px; height: var(--van-title-bar-action-divider-height); margin-right: var(--van-title-bar-action-divider-after-gap); background: var(--van-title-bar-action-divider-color); }
+  &__action .van-button { flex: none; }
   &__arrow { flex: none; margin: 4px 0 0 8px; color: var(--van-gray-6); font-size: 14px; transition: transform var(--van-animation-duration-fast); transform: rotate(180deg); }
   &__arrow--expanded { transform: rotate(0); }
   &--mini &__header { padding-top: 12px; padding-bottom: 4px; }

package/lib/title-bar/style/index.js

@@ -1,4 +1,6 @@
 require("../../style/base.css");
 require("../../badge/index.css");
 require("../../icon/index.css");
+require("../../loading/index.css");
+require("../../button/index.css");
 require("../index.css");

package/lib/title-bar/style/less.js

@@ -1,4 +1,6 @@
 require("../../style/base.less");
 require("../../badge/index.less");
 require("../../icon/index.less");
+require("../../loading/index.less");
+require("../../button/index.less");
 require("../index.less");

package/lib/title-bar/var.less

@@ -4,3 +4,7 @@
 @title-bar-gap: 4px;
 @title-bar-title-color: var(--van-gray-8);
 @title-bar-description-color: var(--van-gray-6);
+@title-bar-action-divider-before-gap: 8px;
+@title-bar-action-divider-after-gap: 2px;
+@title-bar-action-divider-color: var(--van-gray-4);
+@title-bar-action-divider-height: 12px;