persagy-vant 0.0.35 → 0.0.36

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;