persagy-vant 0.0.35 → 0.0.36

package/es/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/es/title-bar/TitleBar.mjs

@@ -1,4 +1,5 @@
 import { defineComponent, createVNode as _createVNode } from "vue";
+import { Button } from "../button/index.mjs";
 import { Icon } from "../icon/index.mjs";
 import { createNamespace, makeStringProp, truthProp } from "../utils/index.mjs";
 const [name, bem] = createNamespace("title-bar");
@@ -9,6 +10,8 @@ const titleBarProps = {
   showIcon: Boolean,
   showDescription: Boolean,
   showArrow: Boolean,
+  actionText: makeStringProp("\u64CD\u4F5C"),
+  showAction: Boolean,
   size: makeStringProp("default"),
   expandable: Boolean,
   modelValue: truthProp
@@ -16,7 +19,7 @@ const titleBarProps = {
 var stdin_default = defineComponent({
   name,
   props: titleBarProps,
-  emits: ["update:modelValue", "change", "click"],
+  emits: ["update:modelValue", "change", "click", "click-action"],
   setup(props, {
     slots,
     emit
@@ -28,6 +31,21 @@ var stdin_default = 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 _createVNode("section", {
@@ -35,20 +53,32 @@ var stdin_default = defineComponent({
           mini: props.size === "mini",
           expandable: props.expandable
         })
-      }, [_createVNode("button", {
-        "type": "button",
+      }, [_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 && _createVNode(Icon, {
         "name": props.icon,
         "class": bem("icon")
       }, null), _createVNode("span", {
         "class": bem("text")
-      }, [_createVNode("strong", null, [((_a = slots.title) == null ? void 0 : _a.call(slots)) || props.title]), props.size !== "mini" && props.showDescription && props.description && _createVNode("span", null, [((_b = slots.description) == null ? void 0 : _b.call(slots)) || props.description])]), (props.showArrow || props.expandable) && _createVNode(Icon, {
+      }, [_createVNode("span", {
+        "class": bem("title-row")
+      }, [_createVNode("strong", null, [((_a = slots.title) == null ? void 0 : _a.call(slots)) || props.title]), props.showAction && props.actionText && _createVNode("span", {
+        "class": bem("action")
+      }, [_createVNode("i", {
+        "class": bem("action-divider")
+      }, null), _createVNode(Button, {
+        "type": "text",
+        "size": "small",
+        "text": props.actionText,
+        "onClick": onActionClick
+      }, null)])]), props.size !== "mini" && props.showDescription && props.description && _createVNode("span", {
+        "class": bem("description")
+      }, [((_b = slots.description) == null ? void 0 : _b.call(slots)) || props.description])]), (props.showArrow || props.expandable) && _createVNode(Icon, {
         "name": "arrow-up",
         "class": bem("arrow", {
           expanded: props.expandable && props.modelValue

package/es/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/es/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/es/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/es/title-bar/style/index.mjs

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

package/es/title-bar/style/less.mjs

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

package/es/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;