zartui 3.2.0 → 3.2.2

package/es/time-picker/TimePicker.d.ts

@@ -30,6 +30,10 @@ export declare const timePickerProps: {
         default: string;
     };
 } & {
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {
@@ -117,6 +121,10 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         default: string;
     };
 } & {
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {
@@ -202,6 +210,10 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         default: string;
     };
 } & {
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {

package/es/time-picker/index.d.ts

@@ -28,6 +28,10 @@ export declare const TimePicker: import("../utils").WithInstall<import("vue").De
         default: string;
     };
 } & {
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {
@@ -113,6 +117,10 @@ export declare const TimePicker: import("../utils").WithInstall<import("vue").De
         default: string;
     };
 } & {
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {

package/es/vue-sfc-shim.d.ts

@@ -1,6 +1,6 @@
-declare module '*.vue' {
-  // eslint-disable-next-line
-  import { DefineComponent } from 'vue';
-  const Component: DefineComponent;
-  export default Component;
-}
+declare module '*.vue' {
+  // eslint-disable-next-line
+  import { DefineComponent } from 'vue';
+  const Component: DefineComponent;
+  export default Component;
+}

package/es/vue-tsx-shim.d.ts

@@ -1,23 +1,23 @@
-import 'vue';
-
-type EventHandler = (...args: any[]) => void;
-
-declare module 'vue' {
-  interface ComponentCustomProps {
-    id?: string;
-    role?: string;
-    tabindex?: number;
-    onClick?: EventHandler;
-    onTouchend?: EventHandler;
-    onTouchmove?: EventHandler;
-    onTouchstart?: EventHandler;
-    onTouchcancel?: EventHandler;
-    onTouchmovePassive?: EventHandler;
-    onTouchstartPassive?: EventHandler;
-  }
-
-  interface HTMLAttributes {
-    onTouchmovePassive?: EventHandler;
-    onTouchstartPassive?: EventHandler;
-  }
-}
+import 'vue';
+
+type EventHandler = (...args: any[]) => void;
+
+declare module 'vue' {
+  interface ComponentCustomProps {
+    id?: string;
+    role?: string;
+    tabindex?: number;
+    onClick?: EventHandler;
+    onTouchend?: EventHandler;
+    onTouchmove?: EventHandler;
+    onTouchstart?: EventHandler;
+    onTouchcancel?: EventHandler;
+    onTouchmovePassive?: EventHandler;
+    onTouchstartPassive?: EventHandler;
+  }
+
+  interface HTMLAttributes {
+    onTouchmovePassive?: EventHandler;
+    onTouchstartPassive?: EventHandler;
+  }
+}

package/lib/action-sheet/ActionSheet.d.ts

@@ -2,6 +2,9 @@ import type { ExtractPropTypes } from 'vue';
 export type ActionSheetAction = {
     name?: string;
     color?: string;
+    subNameColor?: string;
+    bgColor?: string;
+    border?: string;
     subname?: string;
     loading?: boolean;
     disabled?: boolean;
@@ -34,7 +37,10 @@ export declare const actionSheetProps: {
         default: true;
     };
 } & {
-    title: StringConstructor;
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     round: {
         type: BooleanConstructor;
         default: true;
@@ -90,7 +96,10 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         default: true;
     };
 } & {
-    title: StringConstructor;
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     round: {
         type: BooleanConstructor;
         default: true;
@@ -144,7 +153,10 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         default: true;
     };
 } & {
-    title: StringConstructor;
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     round: {
         type: BooleanConstructor;
         default: true;
@@ -177,6 +189,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     "onUpdate:show"?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
 }>, {
+    title: string;
     overlay: boolean;
     round: boolean;
     show: boolean;

package/lib/action-sheet/ActionSheet.js

@@ -29,10 +29,10 @@ var import_loading = require("../loading");
 var import_shared = require("../popup/shared");
 const [name, bem] = (0, import_utils.createNamespace)("action-sheet");
 const actionSheetProps = (0, import_utils.extend)({}, import_shared.popupSharedProps, {
-  title: String,
+  title: (0, import_utils.makeStringProp)("\u8BF7\u9009\u62E9"),
   round: import_utils.truthProp,
   actions: (0, import_utils.makeArrayProp)(),
-  closeIcon: (0, import_utils.makeStringProp)("cross"),
+  closeIcon: (0, import_utils.makeStringProp)("clear"),
   closeable: import_utils.truthProp,
   cancelText: String,
   description: String,
@@ -60,22 +60,12 @@ var stdin_default = (0, import_vue.defineComponent)({
           "class": bem("header")
         }, [props.title, props.closeable && (0, import_vue.createVNode)(import_icon.Icon, {
           "name": props.closeIcon,
+          "size": "16",
           "class": [bem("close"), import_utils.HAPTICS_FEEDBACK],
           "onClick": onCancel
         }, null)]);
       }
     };
-    const renderCancel = () => {
-      if (slots.cancel || props.cancelText) {
-        return [(0, import_vue.createVNode)("div", {
-          "class": bem("cancel")
-        }, [(0, import_vue.createVNode)("button", {
-          "type": "button",
-          "class": bem("cancel-btn"),
-          "onClick": onCancel
-        }, [slots.cancel ? slots.cancel() : props.cancelText])])];
-      }
-    };
     const renderActionContent = (action, index) => {
       if (action.loading) {
         return (0, import_vue.createVNode)(import_loading.Loading, {
@@ -88,15 +78,26 @@ var stdin_default = (0, import_vue.defineComponent)({
           index
         });
       }
+      const {
+        color,
+        subNameColor
+      } = action;
       return [(0, import_vue.createVNode)("span", {
-        "class": bem("name")
+        "class": bem("name"),
+        "style": {
+          color
+        }
       }, [action.name]), action.subname && (0, import_vue.createVNode)("div", {
-        "class": bem("subname")
+        "class": bem("subname"),
+        "style": {
+          color: subNameColor
+        }
       }, [action.subname])];
     };
     const renderAction = (action, index) => {
       const {
-        color,
+        bgColor,
+        border,
         loading,
         callback,
         disabled,
@@ -122,15 +123,18 @@ var stdin_default = (0, import_vue.defineComponent)({
       return (0, import_vue.createVNode)("button", {
         "type": "button",
         "style": {
-          color
+          background: bgColor,
+          border
         },
-        "class": [bem("item", {
-          loading,
-          disabled,
-          "with-sub": action.subname
-        }), className, {
-          [import_utils.BORDER_BOTTOM]: showBorder
-        }],
+        "class": [
+          bem("item", {
+            loading,
+            disabled,
+            "with-sub": action.subname
+          }),
+          className
+          //  { [BORDER_BOTTOM]: showBorder },
+        ],
         "onClick": onClick
       }, [renderActionContent(action, index)]);
     };
@@ -153,7 +157,7 @@ var stdin_default = (0, import_vue.defineComponent)({
         var _a;
         return [renderHeader(), renderDescription(), (0, import_vue.createVNode)("div", {
           "class": bem("content")
-        }, [props.actions.map(renderAction), (_a = slots.default) == null ? void 0 : _a.call(slots)]), renderCancel()];
+        }, [props.actions.map(renderAction), (_a = slots.default) == null ? void 0 : _a.call(slots)])];
       }
     });
   }

package/lib/action-sheet/index.css

@@ -1 +1 @@
-:root{--zt-action-sheet-max-height: 80%;--zt-action-sheet-header-height: 44px;--zt-action-sheet-description-color: var(--zt-gray-40);--zt-action-sheet-item-background: var(--zt-background-popup);--zt-action-sheet-item-text-color: var(--zt-text-color);--zt-action-sheet-item-disabled-text-color: var(--zt-gray-20);--zt-action-sheet-subname-color: var(--zt-gray-40);--zt-action-sheet-close-icon-color: var(--zt-gray-30);--zt-action-sheet-close-icon-padding: 0 var(--zt-padding-md);--zt-action-sheet-cancel-text-color: var(--zt-text-color);--zt-action-sheet-loading-icon-size: 16px;--zt-action-sheet-description-background: var(--zt-background-popup)}:root[zt-theme-size=large]{--zt-action-sheet-header-height: 56px}.zt-action-sheet{display:flex;flex-direction:column;max-height:var(--zt-action-sheet-max-height);overflow:hidden;color:var(--zt-action-sheet-item-text-color)}.zt-action-sheet__content{flex:1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch}.zt-action-sheet__item,.zt-action-sheet__cancel{display:block;width:100%;padding:10px var(--zt-padding-md);font-size:var(--zt-font-size-lg);line-height:var(--zt-line-height-lg);background:var(--zt-action-sheet-item-background);border:none;cursor:pointer}.zt-action-sheet__item:active{background-color:var(--zt-gray-10)}.zt-action-sheet__item--loading,.zt-action-sheet__item--disabled{color:var(--zt-action-sheet-item-disabled-text-color)}.zt-action-sheet__item--loading:active,.zt-action-sheet__item--disabled:active{background-color:var(--zt-action-sheet-item-background)}.zt-action-sheet__item--disabled{cursor:not-allowed}.zt-action-sheet__item--loading{cursor:default}.zt-action-sheet__item--with-sub{padding-top:8px;padding-bottom:8px}.zt-action-sheet__cancel{padding:8px 16px;flex-shrink:0;box-sizing:border-box;color:var(--zt-action-sheet-cancel-text-color)}.zt-action-sheet__cancel-btn{width:100%;border:none;cursor:pointer;background-color:var(--zt-gray-10);border-radius:20px;height:var(--zt-button-default-height);font-size:var(--zt-font-size-lg);color:var(--zt-text-color);line-height:var(--zt-line-height-lg)}.zt-action-sheet__cancel-btn:active{opacity:var(--zt-active-opacity)}.zt-action-sheet__subname{margin-top:var(--zt-padding-xxs);color:var(--zt-action-sheet-subname-color);font-size:var(--zt-font-size-sm);line-height:var(--zt-line-height-sm)}.zt-action-sheet__header{flex-shrink:0;font-weight:var(--zt-font-bold);font-size:var(--zt-font-size-lg);line-height:var(--zt-action-sheet-header-height);text-align:center}.zt-action-sheet__description{background:var(--zt-action-sheet-description-background);position:relative;flex-shrink:0;padding:12px var(--zt-padding-md);color:var(--zt-action-sheet-description-color);font-size:var(--zt-font-size-md);line-height:var(--zt-line-height-md);text-align:center}.zt-action-sheet__description:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid var(--zt-border-color);transform:scaleY(.5)}.zt-action-sheet__description--custom{padding:0}.zt-action-sheet__loading-icon .zt-loading__spinner{width:var(--zt-action-sheet-loading-icon-size);height:var(--zt-action-sheet-loading-icon-size)}.zt-action-sheet__close{position:absolute;top:0;right:0;padding:var(--zt-action-sheet-close-icon-padding);color:var(--zt-action-sheet-close-icon-color);font-size:var(--zt-font-size-xxxl);line-height:inherit}
+:root{--zt-action-sheet-max-height: 80%;--zt-action-sheet-header-height: 44px;--zt-action-sheet-description-color: var(--zt-gray-40);--zt-action-sheet-item-background: var(--zt-background-popup);--zt-action-sheet-item-border-color: var(--zt-border-color);--zt-action-sheet-item-border-radius: 24px;--zt-action-sheet-item-margin-left: 16px;--zt-action-sheet-item-margin: 8px var(--zt-action-sheet-item-margin-left);--zt-action-sheet-item-text-color: var(--zt-text-color);--zt-action-sheet-item-disabled-text-color: var(--zt-gray-20);--zt-action-sheet-subname-color: var(--zt-gray-40);--zt-action-sheet-close-icon-color: var(--zt-gray-40);--zt-action-sheet-close-icon-padding: 0 20px;--zt-action-sheet-cancel-text-color: var(--zt-text-color);--zt-action-sheet-loading-icon-size: 16px;--zt-action-sheet-description-background: var(--zt-background-popup)}:root[zt-theme-size=large]{--zt-action-sheet-header-height: 56px}.zt-action-sheet{display:flex;flex-direction:column;max-height:var(--zt-action-sheet-max-height);overflow:hidden;color:var(--zt-action-sheet-item-text-color)}.zt-action-sheet__content{flex:1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch}.zt-action-sheet__item,.zt-action-sheet__cancel{display:block;width:calc(100% - var(--zt-action-sheet-item-margin-left) * 2);padding:10px var(--zt-padding-md);font-size:var(--zt-font-size-lg);line-height:var(--zt-line-height-lg);background:var(--zt-action-sheet-item-background);border:1px solid var(--zt-action-sheet-item-border-color);border-radius:var(--zt-action-sheet-item-border-radius);margin:var(--zt-action-sheet-item-margin);cursor:pointer}.zt-action-sheet__item:active{background-color:var(--zt-gray-10)}.zt-action-sheet__item--loading,.zt-action-sheet__item--disabled{color:var(--zt-action-sheet-item-disabled-text-color)}.zt-action-sheet__item--loading:active,.zt-action-sheet__item--disabled:active{background-color:var(--zt-action-sheet-item-background)}.zt-action-sheet__item--disabled{cursor:not-allowed}.zt-action-sheet__item--loading{cursor:default}.zt-action-sheet__item--with-sub{padding-top:8px;padding-bottom:8px}.zt-action-sheet__cancel{padding:8px 16px;flex-shrink:0;box-sizing:border-box;color:var(--zt-action-sheet-cancel-text-color)}.zt-action-sheet__cancel-btn{width:100%;border:none;cursor:pointer;background-color:var(--zt-gray-10);border-radius:20px;height:var(--zt-button-default-height);font-size:var(--zt-font-size-lg);color:var(--zt-text-color);line-height:var(--zt-line-height-lg)}.zt-action-sheet__cancel-btn:active{opacity:var(--zt-active-opacity)}.zt-action-sheet__subname{margin-top:var(--zt-padding-xxs);color:var(--zt-action-sheet-subname-color);font-size:var(--zt-font-size-md);line-height:var(--zt-line-height-sm)}.zt-action-sheet__header{position:relative;flex-shrink:0;font-weight:var(--zt-font-bold);font-size:var(--zt-font-size-xl);line-height:var(--zt-action-sheet-header-height);text-align:center}.zt-action-sheet__header:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid var(--zt-border-color);transform:scaleY(.5)}.zt-action-sheet__description{background:var(--zt-action-sheet-description-background);position:relative;flex-shrink:0;padding:12px var(--zt-padding-md);color:var(--zt-action-sheet-description-color);font-size:var(--zt-font-size-md);line-height:var(--zt-line-height-md);text-align:center}.zt-action-sheet__description:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid var(--zt-border-color);transform:scaleY(.5)}.zt-action-sheet__description--custom{padding:0}.zt-action-sheet__loading-icon .zt-loading__spinner{width:var(--zt-action-sheet-loading-icon-size);height:var(--zt-action-sheet-loading-icon-size)}.zt-action-sheet__close{position:absolute;top:0;left:0;padding:var(--zt-action-sheet-close-icon-padding);color:var(--zt-action-sheet-close-icon-color);font-size:var(--zt-font-size-xxxl);line-height:inherit}

package/lib/action-sheet/index.d.ts

@@ -24,7 +24,10 @@ export declare const ActionSheet: import("../utils").WithInstall<import("vue").D
         default: true;
     };
 } & {
-    title: StringConstructor;
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     round: {
         type: BooleanConstructor;
         default: true;
@@ -78,7 +81,10 @@ export declare const ActionSheet: import("../utils").WithInstall<import("vue").D
         default: true;
     };
 } & {
-    title: StringConstructor;
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     round: {
         type: BooleanConstructor;
         default: true;
@@ -111,6 +117,7 @@ export declare const ActionSheet: import("../utils").WithInstall<import("vue").D
     "onUpdate:show"?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
 }>, {
+    title: string;
     overlay: boolean;
     round: boolean;
     show: boolean;

package/lib/button/index.css

@@ -1 +1 @@
-:root{--zt-button-mini-height: 24px;--zt-button-mini-padding: 0 var(--zt-padding-sm);--zt-button-small-height: 28px;--zt-button-small-padding: 0 var(--zt-padding-sm);--zt-button-medium-height: 36px;--zt-button-medium-padding: 0 30px;--zt-button-normal-padding: 0 var(--zt-padding-lg);--zt-button-large-height: 50px;--zt-button-default-height: 44px;--zt-button-default-color: var(--zt-text-color);--zt-button-default-background: var(--zt-button-plain-background);--zt-button-default-border-color: var(--zt-gray-10);--zt-button-primary-color: var(--zt-white);--zt-button-primary-background: linear-gradient(-90deg, var(--zt-darkblue-40) 0%, var(--zt-darkblue-60) 100%);--zt-button-primary-light-background: var(--zt-darkblue-20);--zt-button-primary-border-color: var(--zt-primary-color);--zt-button-success-color: var(--zt-white);--zt-button-success-background: var(--zt-success-color);--zt-button-success-border-color: var(--zt-success-color);--zt-button-danger-color: var(--zt-white);--zt-button-danger-background: var(--zt-danger-color);--zt-button-danger-border-color: var(--zt-danger-color);--zt-button-warning-color: var(--zt-white);--zt-button-warning-background: var(--zt-warning-color);--zt-button-warning-border-color: var(--zt-warning-color);--zt-button-border-width: var(--zt-border-width);--zt-button-radius: 22px;--zt-button-round-radius: var(--zt-radius-max);--zt-button-plain-background: transparent;--zt-button-disabled-opacity: var(--zt-disabled-opacity);--zt-button-loading-icon-size: 20px;--zt-button-inner-block-horizontal-margin: 16px;--zt-button-icon-font-size: 24px}:root[zt-theme-size=large]{--zt-button-icon-font-size: 30px}.zt-button{position:relative;display:inline-block;box-sizing:border-box;height:var(--zt-button-default-height);margin:0;padding:0;font-size:var(--zt-font-size-lg);line-height:var(--zt-line-height-lg);text-align:center;border-radius:var(--zt-button-radius);cursor:pointer;transition:opacity var(--zt-duration-fast);-webkit-appearance:none;-webkit-font-smoothing:auto}.zt-button:before{position:absolute;top:50%;left:50%;width:100%;height:100%;background:var(--zt-black);border:inherit;border-color:var(--zt-black);border-radius:inherit;transform:translate(-50%,-50%);opacity:0;content:" "}.zt-button:active:before{opacity:.1}.zt-button--loading:before,.zt-button--disabled:before{display:none}.zt-button--default{color:var(--zt-button-default-color);background:var(--zt-button-default-background);border:var(--zt-button-border-width) solid var(--zt-button-default-border-color)}.zt-button--primary{color:var(--zt-button-primary-color);background:var(--zt-button-primary-background);border:none}.zt-button--primary-light{color:var(--zt-primary-color);background:var(--zt-button-primary-light-background);border:none}.zt-button--success{color:var(--zt-button-success-color);background:var(--zt-button-success-background);border:var(--zt-button-border-width) solid var(--zt-button-success-border-color)}.zt-button--danger{color:var(--zt-button-danger-color);background:var(--zt-button-danger-background);border:var(--zt-button-border-width) solid var(--zt-button-danger-border-color)}.zt-button--warning{color:var(--zt-button-warning-color);background:var(--zt-button-warning-background);border:var(--zt-button-border-width) solid var(--zt-button-warning-border-color)}.zt-button--plain{background:var(--zt-button-plain-background)}.zt-button--plain.zt-button--primary{color:var(--zt-primary-color);border:var(--zt-button-border-width) solid var(--zt-button-primary-border-color)}.zt-button--plain.zt-button--success{color:var(--zt-button-success-background)}.zt-button--plain.zt-button--danger{color:var(--zt-button-danger-background)}.zt-button--plain.zt-button--warning{color:var(--zt-button-warning-background)}.zt-button--large{width:100%;height:var(--zt-button-large-height)}.zt-button--normal{padding:var(--zt-button-normal-padding);font-size:var(--zt-font-size-lg);line-height:var(--zt-line-height-lg)}.zt-button--medium{height:var(--zt-button-medium-height);padding:var(--zt-button-medium-padding);font-size:var(--zt-font-size-md);line-height:var(--zt-line-height-md)}.zt-button--small{height:var(--zt-button-small-height);padding:var(--zt-button-small-padding);font-size:var(--zt-font-size-md);line-height:var(--zt-line-height-md)}.zt-button--mini{height:var(--zt-button-mini-height);padding:var(--zt-button-mini-padding);font-size:var(--zt-font-size-sm);line-height:var(--zt-line-height-sm)}.zt-button--mini+.zt-button--mini{margin-left:var(--zt-padding-base)}.zt-button__loading{color:inherit;font-size:inherit}.zt-button__loading .zt-loading__spinner{color:currentColor;width:var(--zt-button-loading-icon-size);height:var(--zt-button-loading-icon-size)}.zt-button--block{display:block;width:100%}.zt-button--block-inner{display:block;width:calc(100% - 2 * var(--zt-button-inner-block-horizontal-margin));margin:0 var(--zt-button-inner-block-horizontal-margin)}.zt-button--disabled{cursor:not-allowed;opacity:var(--zt-button-disabled-opacity)}.zt-button--loading{cursor:default}.zt-button--round{border-radius:var(--zt-button-round-radius);padding:0}.zt-button--round.zt-button--mini{width:var(--zt-button-mini-height)}.zt-button--round.zt-button--small{width:var(--zt-button-small-height)}.zt-button--round.zt-button--medium{width:var(--zt-button-medium-height)}.zt-button--round.zt-button--normal{width:var(--zt-button-default-height)}.zt-button--square{border-radius:0}.zt-button__content{display:flex;align-items:center;justify-content:center;height:100%}.zt-button__content:before{content:" "}.zt-button__text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.zt-button__icon{font-size:var(--zt-button-icon-font-size)}.zt-button__icon--mini{font-size:var(--zt-font-size-lg)}.zt-button__icon--small{font-size:var(--zt-font-size-xxl)}.zt-button__icon--medium{font-size:var(--zt-font-size-xxxl)}.zt-button__icon+.zt-button__text,.zt-button__loading+.zt-button__text,.zt-button__text+.zt-button__icon,.zt-button__text+.zt-button__loading{margin-left:var(--zt-padding-xxs)}.zt-button--hairline{border-width:0}.zt-button--hairline:after{border-color:inherit;border-radius:calc(var(--zt-button-radius) * 2)}.zt-button--hairline.zt-button--round:after{border-radius:var(--zt-button-round-radius)}.zt-button--hairline.zt-button--square:after{border-radius:0}
+:root{--zt-button-mini-height: 24px;--zt-button-mini-padding: 0 var(--zt-padding-sm);--zt-button-small-height: 28px;--zt-button-small-padding: 0 var(--zt-padding-sm);--zt-button-medium-height: 36px;--zt-button-medium-padding: 0 30px;--zt-button-normal-padding: 0 var(--zt-padding-lg);--zt-button-large-height: 50px;--zt-button-default-height: 44px;--zt-button-default-color: var(--zt-text-color);--zt-button-default-background: var(--zt-button-plain-background);--zt-button-default-border-color: var(--zt-gray-10);--zt-button-primary-color: var(--zt-white);--zt-button-primary-background: linear-gradient(-70deg, var(--zt-darkblue-50) 0%, var(--zt-darkblue-60) 100%);--zt-button-primary-light-background: var(--zt-darkblue-20);--zt-button-primary-border-color: var(--zt-primary-color);--zt-button-success-color: var(--zt-white);--zt-button-success-background: var(--zt-success-color);--zt-button-success-border-color: var(--zt-success-color);--zt-button-danger-color: var(--zt-white);--zt-button-danger-background: var(--zt-danger-color);--zt-button-danger-border-color: var(--zt-danger-color);--zt-button-warning-color: var(--zt-white);--zt-button-warning-background: var(--zt-warning-color);--zt-button-warning-border-color: var(--zt-warning-color);--zt-button-border-width: var(--zt-border-width);--zt-button-radius: 22px;--zt-button-round-radius: var(--zt-radius-max);--zt-button-plain-background: transparent;--zt-button-disabled-opacity: var(--zt-disabled-opacity);--zt-button-loading-icon-size: 20px;--zt-button-inner-block-horizontal-margin: 16px;--zt-button-icon-font-size: 24px}:root[zt-theme-size=large]{--zt-button-icon-font-size: 30px}.zt-button{position:relative;display:inline-block;box-sizing:border-box;height:var(--zt-button-default-height);margin:0;padding:0;font-size:var(--zt-font-size-lg);line-height:var(--zt-line-height-lg);text-align:center;border-radius:var(--zt-button-radius);cursor:pointer;transition:opacity var(--zt-duration-fast);-webkit-appearance:none;-webkit-font-smoothing:auto}.zt-button:before{position:absolute;top:50%;left:50%;width:100%;height:100%;background:var(--zt-black);border:inherit;border-color:var(--zt-black);border-radius:inherit;transform:translate(-50%,-50%);opacity:0;content:" "}.zt-button:active:before{opacity:.1}.zt-button--loading:before,.zt-button--disabled:before{display:none}.zt-button--default{color:var(--zt-button-default-color);background:var(--zt-button-default-background);border:var(--zt-button-border-width) solid var(--zt-button-default-border-color)}.zt-button--primary{color:var(--zt-button-primary-color);background:var(--zt-button-primary-background);border:none}.zt-button--primary-light{color:var(--zt-primary-color);background:var(--zt-button-primary-light-background);border:none}.zt-button--success{color:var(--zt-button-success-color);background:var(--zt-button-success-background);border:var(--zt-button-border-width) solid var(--zt-button-success-border-color)}.zt-button--danger{color:var(--zt-button-danger-color);background:var(--zt-button-danger-background);border:var(--zt-button-border-width) solid var(--zt-button-danger-border-color)}.zt-button--warning{color:var(--zt-button-warning-color);background:var(--zt-button-warning-background);border:var(--zt-button-border-width) solid var(--zt-button-warning-border-color)}.zt-button--plain{background:var(--zt-button-plain-background)}.zt-button--plain.zt-button--primary{color:var(--zt-primary-color);border:var(--zt-button-border-width) solid var(--zt-button-primary-border-color)}.zt-button--plain.zt-button--success{color:var(--zt-button-success-background)}.zt-button--plain.zt-button--danger{color:var(--zt-button-danger-background)}.zt-button--plain.zt-button--warning{color:var(--zt-button-warning-background)}.zt-button--large{width:100%;height:var(--zt-button-large-height)}.zt-button--normal{padding:var(--zt-button-normal-padding);font-size:var(--zt-font-size-lg);line-height:var(--zt-line-height-lg)}.zt-button--medium{height:var(--zt-button-medium-height);padding:var(--zt-button-medium-padding);font-size:var(--zt-font-size-md);line-height:var(--zt-line-height-md)}.zt-button--small{height:var(--zt-button-small-height);padding:var(--zt-button-small-padding);font-size:var(--zt-font-size-md);line-height:var(--zt-line-height-md)}.zt-button--mini{height:var(--zt-button-mini-height);padding:var(--zt-button-mini-padding);font-size:var(--zt-font-size-sm);line-height:var(--zt-line-height-sm)}.zt-button--mini+.zt-button--mini{margin-left:var(--zt-padding-base)}.zt-button__loading{color:inherit;font-size:inherit}.zt-button__loading .zt-loading__spinner{color:currentColor;width:var(--zt-button-loading-icon-size);height:var(--zt-button-loading-icon-size)}.zt-button--block{display:block;width:100%}.zt-button--block-inner{display:block;width:calc(100% - 2 * var(--zt-button-inner-block-horizontal-margin));margin:0 var(--zt-button-inner-block-horizontal-margin)}.zt-button--disabled{cursor:not-allowed;opacity:var(--zt-button-disabled-opacity)}.zt-button--loading{cursor:default}.zt-button--round{border-radius:var(--zt-button-round-radius);padding:0}.zt-button--round.zt-button--mini{width:var(--zt-button-mini-height)}.zt-button--round.zt-button--small{width:var(--zt-button-small-height)}.zt-button--round.zt-button--medium{width:var(--zt-button-medium-height)}.zt-button--round.zt-button--normal{width:var(--zt-button-default-height)}.zt-button--square{border-radius:0}.zt-button__content{display:flex;align-items:center;justify-content:center;height:100%}.zt-button__content:before{content:" "}.zt-button__text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.zt-button__icon{font-size:var(--zt-button-icon-font-size)}.zt-button__icon--mini{font-size:var(--zt-font-size-lg)}.zt-button__icon--small{font-size:var(--zt-font-size-xxl)}.zt-button__icon--medium{font-size:var(--zt-font-size-xxxl)}.zt-button__icon+.zt-button__text,.zt-button__loading+.zt-button__text,.zt-button__text+.zt-button__icon,.zt-button__text+.zt-button__loading{margin-left:var(--zt-padding-xxs)}.zt-button--hairline{border-width:0}.zt-button--hairline:after{border-color:inherit;border-radius:calc(var(--zt-button-radius) * 2)}.zt-button--hairline.zt-button--round:after{border-radius:var(--zt-button-round-radius)}.zt-button--hairline.zt-button--square:after{border-radius:0}

package/lib/date-time-picker/DateTimePicker.d.ts

@@ -31,6 +31,10 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         default: string;
     };
 } & {
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {
@@ -131,6 +135,10 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         default: string;
     };
 } & {
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {

package/lib/date-time-picker/DateTimePickerWrapper.d.ts

@@ -29,6 +29,10 @@ export declare const dateTimePickerProps: {
         default: string;
     };
 } & {
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {
@@ -130,6 +134,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: string;
     };
 } & {
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {
@@ -230,6 +238,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: string;
     };
 } & {
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {

package/lib/date-time-picker/index.d.ts

@@ -28,6 +28,10 @@ export declare const DateTimePicker: import("../utils").WithInstall<import("vue"
         default: string;
     };
 } & {
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {
@@ -128,6 +132,10 @@ export declare const DateTimePicker: import("../utils").WithInstall<import("vue"
         default: string;
     };
 } & {
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {

package/lib/date-time-picker/utils.d.ts

@@ -31,6 +31,10 @@ export declare const sharedProps: {
         default: string;
     };
 } & {
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {

package/lib/dialog/Dialog.d.ts

@@ -46,9 +46,11 @@ export declare const dialogProps: {
     showCancelButton: BooleanConstructor;
     cancelButtonText: StringConstructor;
     cancelButtonColor: StringConstructor;
+    cancelButtonBgColor: StringConstructor;
     cancelButtonDisabled: BooleanConstructor;
     confirmButtonText: StringConstructor;
     confirmButtonColor: StringConstructor;
+    confirmButtonBgColor: StringConstructor;
     confirmButtonDisabled: BooleanConstructor;
     showConfirmButton: {
         type: BooleanConstructor;
@@ -103,9 +105,11 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     showCancelButton: BooleanConstructor;
     cancelButtonText: StringConstructor;
     cancelButtonColor: StringConstructor;
+    cancelButtonBgColor: StringConstructor;
     cancelButtonDisabled: BooleanConstructor;
     confirmButtonText: StringConstructor;
     confirmButtonColor: StringConstructor;
+    confirmButtonBgColor: StringConstructor;
     confirmButtonDisabled: BooleanConstructor;
     showConfirmButton: {
         type: BooleanConstructor;
@@ -158,9 +162,11 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     showCancelButton: BooleanConstructor;
     cancelButtonText: StringConstructor;
     cancelButtonColor: StringConstructor;
+    cancelButtonBgColor: StringConstructor;
     cancelButtonDisabled: BooleanConstructor;
     confirmButtonText: StringConstructor;
     confirmButtonColor: StringConstructor;
+    confirmButtonBgColor: StringConstructor;
     confirmButtonDisabled: BooleanConstructor;
     showConfirmButton: {
         type: BooleanConstructor;

package/lib/dialog/Dialog.js

@@ -42,9 +42,11 @@ const dialogProps = (0, import_utils.extend)({}, import_shared.popupSharedProps,
   showCancelButton: Boolean,
   cancelButtonText: String,
   cancelButtonColor: String,
+  cancelButtonBgColor: String,
   cancelButtonDisabled: Boolean,
   confirmButtonText: String,
   confirmButtonColor: String,
+  confirmButtonBgColor: String,
   confirmButtonDisabled: Boolean,
   showConfirmButton: import_utils.truthProp,
   closeOnClickOverlay: Boolean
@@ -179,7 +181,8 @@ var stdin_default = (0, import_vue.defineComponent)({
       "text": props.cancelButtonText || t("cancel"),
       "class": bem("cancel"),
       "style": {
-        color: props.cancelButtonColor
+        color: props.cancelButtonColor,
+        background: props.cancelButtonBgColor
       },
       "loading": loading.cancel,
       "disabled": props.cancelButtonDisabled,
@@ -191,7 +194,8 @@ var stdin_default = (0, import_vue.defineComponent)({
         "with-cancel": props.showCancelButton
       }),
       "style": {
-        color: props.confirmButtonColor
+        color: props.confirmButtonColor,
+        background: props.confirmButtonBgColor
       },
       "loading": loading.confirm,
       "disabled": props.confirmButtonDisabled,

package/lib/dialog/function-call.js

@@ -57,9 +57,11 @@ const DEFAULT_OPTIONS = {
   messageAlign: "",
   cancelButtonText: "",
   cancelButtonColor: null,
+  cancelButtonBgColor: null,
   cancelButtonDisabled: false,
   confirmButtonText: "",
   confirmButtonColor: null,
+  confirmButtonBgColor: null,
   confirmButtonDisabled: false,
   showConfirmButton: true,
   showCancelButton: false,

package/lib/dialog/index.css

@@ -1 +1 @@
-:root{--zt-dialog-width: 350px;--zt-dialog-max-width: 90%;--zt-dialog-transition: var(--zt-duration-base);--zt-dialog-radius: 12px;--zt-dialog-background: var(--zt-background-popup);--zt-dialog-header-font-weight: var(--zt-font-bold);--zt-dialog-header-padding-top: 24px;--zt-dialog-header-isolated-padding: var(--zt-padding-lg) 0;--zt-dialog-header-primary-padding: 10px;--zt-dialog-message-padding: var(--zt-padding-lg) var(--zt-padding-md);--zt-dialog-message-max-height: 60vh;--zt-dialog-has-title-message-text-color: var(--zt-gray-40);--zt-dialog-has-title-message-padding-top: var(--zt-padding-xs);--zt-dialog-has-title-message-primary-header: var(--zt-padding-lg);--zt-dialog-confirm-button-text-color: var(--zt-white);--zt-dialog-cancel-button-background-color: var(--zt-white)}.zt-dialog{top:45%;width:var(--zt-dialog-width);max-width:var(--zt-dialog-max-width);overflow:hidden;font-size:var(--zt-font-size-lg);background:var(--zt-dialog-background);border-radius:var(--zt-dialog-radius);backface-visibility:hidden;transition:var(--zt-dialog-transition);transition-property:transform,opacity}.zt-dialog__header{color:var(--zt-text-color);padding-top:var(--zt-dialog-header-padding-top);font-weight:var(--zt-dialog-header-font-weight);line-height:var(--zt-line-height-lg);text-align:center}.zt-dialog__header--isolated{padding:var(--zt-dialog-header-isolated-padding)}.zt-dialog__header--custom-title{padding-left:0;padding-right:0;padding-top:0}.zt-dialog__header--primary{padding:var(--zt-dialog-header-primary-padding);background:var(--zt-primary-color);color:var(--zt-white)}.zt-dialog__content{text-align:center;font-size:0}.zt-dialog__message{display:inline-block;color:var(--zt-gray-60);max-height:var(--zt-dialog-message-max-height);padding:var(--zt-dialog-message-padding);overflow-y:auto;font-size:var(--zt-font-size-lg);line-height:var(--zt-line-height-md);white-space:pre-wrap;text-align:left;word-wrap:break-word;-webkit-overflow-scrolling:touch}.zt-dialog__message--has-title{padding-top:var(--zt-dialog-has-title-message-padding-top);color:var(--zt-dialog-has-title-message-text-color);font-size:var(--zt-font-size-md)}.zt-dialog__message--primary-header{padding-top:var(--zt-dialog-has-title-message-primary-header)}.zt-dialog__message--left{text-align:left}.zt-dialog__message--right{text-align:right}.zt-dialog__message--justify{text-align:justify}.zt-dialog__footer{display:flex;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin:0 var(--zt-padding-xl) var(--zt-padding-lg)}.zt-dialog__confirm,.zt-dialog__cancel{flex:1;margin:0;background-color:var(--zt-dialog-cancel-button-background-color)}.zt-dialog__confirm,.zt-dialog__confirm:active{color:var(--zt-dialog-confirm-button-text-color)}.zt-dialog__confirm--with-cancel{margin-left:8px}.zt-dialog--round-button .zt-dialog__footer{position:relative;height:auto;padding:var(--zt-padding-xs) var(--zt-padding-lg) var(--zt-padding-md)}.zt-dialog--round-button .zt-dialog__message{padding-bottom:var(--zt-padding-md);color:var(--zt-text-color)}.zt-dialog--round-button .zt-dialog__confirm,.zt-dialog--round-button .zt-dialog__cancel{height:var(--zt-dialog-round-button-height)}.zt-dialog--round-button .zt-dialog__confirm{color:var(--zt-white)}.zt-dialog-bounce-enter-from{transform:translate3d(0,-50%,0) scale(.7);opacity:0}.zt-dialog-bounce-leave-active{transform:translate3d(0,-50%,0) scale(.9);opacity:0}.zt-theme-dark{--zt-dialog-cancel-button-background-color: rbga(255, 255, 255, .2)}
+:root{--zt-dialog-width: 350px;--zt-dialog-max-width: 90%;--zt-dialog-transition: var(--zt-duration-base);--zt-dialog-radius: 16px;--zt-dialog-background: var(--zt-background-popup);--zt-dialog-header-font-weight: var(--zt-font-bold);--zt-dialog-header-padding-top: 24px;--zt-dialog-header-isolated-padding: var(--zt-padding-lg) 0;--zt-dialog-header-primary-padding: 10px;--zt-dialog-message-padding: var(--zt-padding-lg) var(--zt-padding-md);--zt-dialog-message-max-height: 60vh;--zt-dialog-has-title-message-text-color: var(--zt-gray-40);--zt-dialog-has-title-message-padding-top: var(--zt-padding-xs);--zt-dialog-has-title-message-primary-header: var(--zt-padding-lg);--zt-dialog-confirm-button-text-color: var(--zt-primary-color);--zt-dialog-cancel-button-background-color: var(--zt-white)}.zt-dialog{top:45%;width:var(--zt-dialog-width);max-width:var(--zt-dialog-max-width);overflow:hidden;font-size:var(--zt-font-size-lg);background:var(--zt-dialog-background);border-radius:var(--zt-dialog-radius);backface-visibility:hidden;transition:var(--zt-dialog-transition);transition-property:transform,opacity}.zt-dialog__header{color:var(--zt-text-color);padding-top:var(--zt-dialog-header-padding-top);font-size:var(--zt-font-size-xl);font-weight:var(--zt-dialog-header-font-weight);line-height:var(--zt-line-height-lg);text-align:center}.zt-dialog__header--isolated{padding:var(--zt-dialog-header-isolated-padding)}.zt-dialog__header--custom-title{padding-left:0;padding-right:0;padding-top:0}.zt-dialog__header--primary{padding:var(--zt-dialog-header-primary-padding);background:var(--zt-primary-color);color:var(--zt-white)}.zt-dialog__content{text-align:center;font-size:0}.zt-dialog__message{display:inline-block;color:var(--zt-gray-60);max-height:var(--zt-dialog-message-max-height);padding:var(--zt-dialog-message-padding);overflow-y:auto;font-size:var(--zt-font-size-lg);line-height:var(--zt-line-height-md);white-space:pre-wrap;text-align:left;word-wrap:break-word;-webkit-overflow-scrolling:touch}.zt-dialog__message--has-title{padding-top:var(--zt-dialog-has-title-message-padding-top)}.zt-dialog__message--primary-header{padding-top:var(--zt-dialog-has-title-message-primary-header)}.zt-dialog__message--left{text-align:left}.zt-dialog__message--right{text-align:right}.zt-dialog__message--justify{text-align:justify}.zt-dialog__footer{display:flex;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin:0;position:relative}.zt-dialog__footer:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;top:0;right:0;left:0;border-top:1px solid var(--zt-border-color);transform:scaleY(.5)}.zt-dialog__confirm,.zt-dialog__cancel{flex:1;margin:0;background:var(--zt-dialog-cancel-button-background-color);border-radius:0}.zt-dialog__confirm:before,.zt-dialog__cancel:before,.zt-dialog__confirm:after,.zt-dialog__cancel:after{border-width:0}.zt-dialog__confirm,.zt-dialog__confirm:active{color:var(--zt-dialog-confirm-button-text-color)}.zt-dialog__confirm--with-cancel :after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;top:0;bottom:0;left:0;border-left:1px solid var(--zt-border-color);transform:scaleX(.5)}.zt-dialog--round-button .zt-dialog__footer{padding:var(--zt-padding-sm) var(--zt-padding-md)}.zt-dialog--round-button .zt-dialog__footer:after{border-top:none}.zt-dialog--round-button .zt-dialog__confirm{background:var(--zt-button-primary-background);color:var(--zt-button-primary-color)}.zt-dialog--round-button .zt-dialog__confirm--with-cancel{margin-left:8px}.zt-dialog--round-button .zt-dialog__confirm,.zt-dialog--round-button .zt-dialog__cancel{border-radius:var(--zt-button-radius)}.zt-dialog--round-button .zt-dialog__confirm:after,.zt-dialog--round-button .zt-dialog__cancel:after{border-width:var(--zt-border-width)}.zt-dialog--round-button .zt-dialog__confirm--with-cancel :after{border-left:none}.zt-dialog-bounce-enter-from{transform:translate3d(0,-50%,0) scale(.7);opacity:0}.zt-dialog-bounce-leave-active{transform:translate3d(0,-50%,0) scale(.9);opacity:0}.zt-theme-dark{--zt-dialog-cancel-button-background-color: rbga(255, 255, 255, .2)}

package/lib/dialog/index.d.ts

@@ -44,9 +44,11 @@ export declare const Dialog: import("../utils").WithInstall<import("vue").Define
     showCancelButton: BooleanConstructor;
     cancelButtonText: StringConstructor;
     cancelButtonColor: StringConstructor;
+    cancelButtonBgColor: StringConstructor;
     cancelButtonDisabled: BooleanConstructor;
     confirmButtonText: StringConstructor;
     confirmButtonColor: StringConstructor;
+    confirmButtonBgColor: StringConstructor;
     confirmButtonDisabled: BooleanConstructor;
     showConfirmButton: {
         type: BooleanConstructor;
@@ -99,9 +101,11 @@ export declare const Dialog: import("../utils").WithInstall<import("vue").Define
     showCancelButton: BooleanConstructor;
     cancelButtonText: StringConstructor;
     cancelButtonColor: StringConstructor;
+    cancelButtonBgColor: StringConstructor;
     cancelButtonDisabled: BooleanConstructor;
     confirmButtonText: StringConstructor;
     confirmButtonColor: StringConstructor;
+    confirmButtonBgColor: StringConstructor;
     confirmButtonDisabled: BooleanConstructor;
     showConfirmButton: {
         type: BooleanConstructor;

package/lib/dropdown-item/DropdownItem.js

@@ -178,6 +178,7 @@ var stdin_default = (0, import_vue.defineComponent)({
         } else {
           state.showPopup = false;
           if (option.value !== props.modelValue) {
+            emit("update:modelValue", value);
             emit("change", value);
           }
           emit("item-select", value);