zartui 3.2.0 → 3.2.2

package/README.md

@@ -1,27 +1,27 @@
-# ZartUI
-
-[ZartUI](https://zartui.egova.com.cn) 是数字政通基于 Vue 研发的一款面向政务场景的移动端组件库。
-
-Zart（读音 /zɑːt/）的命名，灵感源自数字政通秉承的理念：让城市治理变得更智慧。Zart = zt + smart， zt是政通的首字母缩写，smart代表公司理念中的“智慧”，将smart中间的“ar”字母包裹于zt之间，体现了ZartUI的核心目标：追求极致的用户体验，致力于做灵活智能的组件库。
-
-## 特性
-
-1）【组件重构】【组件审核】提供50多个高质量组件，覆盖移动端各类场景；
-
-2）【UI重构】基于全新的视觉规范；
-
-3）【在线网站】完善的文档、示例、演示效果；
-
-4）支持主题定制、按需引入；
-
-5）支持Vue3.0、TypeScript；
-
-6）性能佳，组件平均体积小(min+gzip);
-
-## 浏览器支持
-
-ZartUI 3 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一致）。
-
-## 本地开发
-
-推荐`node`版本 `>=18`。执行 `pnpm install` 安装依赖，然后进入 `packages/zartui` 执行 `pnpm dev` 启动本地开发环境。
+# ZartUI
+
+[ZartUI](https://zartui.egova.com.cn) 是数字政通基于 Vue 研发的一款面向政务场景的移动端组件库。
+
+Zart（读音 /zɑːt/）的命名，灵感源自数字政通秉承的理念：让城市治理变得更智慧。Zart = zt + smart， zt是政通的首字母缩写，smart代表公司理念中的“智慧”，将smart中间的“ar”字母包裹于zt之间，体现了ZartUI的核心目标：追求极致的用户体验，致力于做灵活智能的组件库。
+
+## 特性
+
+1）【组件重构】【组件审核】提供50多个高质量组件，覆盖移动端各类场景；
+
+2）【UI重构】基于全新的视觉规范；
+
+3）【在线网站】完善的文档、示例、演示效果；
+
+4）支持主题定制、按需引入；
+
+5）支持Vue3.0、TypeScript；
+
+6）性能佳，组件平均体积小(min+gzip);
+
+## 浏览器支持
+
+ZartUI 3 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一致）。
+
+## 本地开发
+
+推荐`node`版本 `>=18`。执行 `pnpm install` 安装依赖，然后进入 `packages/zartui` 执行 `pnpm dev` 启动本地开发环境。

package/es/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/es/action-sheet/ActionSheet.mjs

@@ -1,15 +1,15 @@
 import { nextTick, defineComponent, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
-import { pick, extend, truthProp, makeArrayProp, makeStringProp, createNamespace, HAPTICS_FEEDBACK, BORDER_BOTTOM } from "../utils/index.mjs";
+import { pick, extend, truthProp, makeArrayProp, makeStringProp, createNamespace, HAPTICS_FEEDBACK } from "../utils/index.mjs";
 import { Icon } from "../icon/index.mjs";
 import { Popup } from "../popup/index.mjs";
 import { Loading } from "../loading/index.mjs";
 import { popupSharedProps, popupSharedPropKeys } from "../popup/shared.mjs";
 const [name, bem] = createNamespace("action-sheet");
 const actionSheetProps = extend({}, popupSharedProps, {
-  title: String,
+  title: makeStringProp("\u8BF7\u9009\u62E9"),
   round: truthProp,
   actions: makeArrayProp(),
-  closeIcon: makeStringProp("cross"),
+  closeIcon: makeStringProp("clear"),
   closeable: truthProp,
   cancelText: String,
   description: String,
@@ -37,22 +37,12 @@ var stdin_default = defineComponent({
           "class": bem("header")
         }, [props.title, props.closeable && _createVNode(Icon, {
           "name": props.closeIcon,
+          "size": "16",
           "class": [bem("close"), HAPTICS_FEEDBACK],
           "onClick": onCancel
         }, null)]);
       }
     };
-    const renderCancel = () => {
-      if (slots.cancel || props.cancelText) {
-        return [_createVNode("div", {
-          "class": bem("cancel")
-        }, [_createVNode("button", {
-          "type": "button",
-          "class": bem("cancel-btn"),
-          "onClick": onCancel
-        }, [slots.cancel ? slots.cancel() : props.cancelText])])];
-      }
-    };
     const renderActionContent = (action, index) => {
       if (action.loading) {
         return _createVNode(Loading, {
@@ -65,15 +55,26 @@ var stdin_default = defineComponent({
           index
         });
       }
+      const {
+        color,
+        subNameColor
+      } = action;
       return [_createVNode("span", {
-        "class": bem("name")
+        "class": bem("name"),
+        "style": {
+          color
+        }
       }, [action.name]), action.subname && _createVNode("div", {
-        "class": bem("subname")
+        "class": bem("subname"),
+        "style": {
+          color: subNameColor
+        }
       }, [action.subname])];
     };
     const renderAction = (action, index) => {
       const {
-        color,
+        bgColor,
+        border,
         loading,
         callback,
         disabled,
@@ -99,15 +100,18 @@ var stdin_default = defineComponent({
       return _createVNode("button", {
         "type": "button",
         "style": {
-          color
+          background: bgColor,
+          border
         },
-        "class": [bem("item", {
-          loading,
-          disabled,
-          "with-sub": action.subname
-        }), className, {
-          [BORDER_BOTTOM]: showBorder
-        }],
+        "class": [
+          bem("item", {
+            loading,
+            disabled,
+            "with-sub": action.subname
+          }),
+          className
+          //  { [BORDER_BOTTOM]: showBorder },
+        ],
         "onClick": onClick
       }, [renderActionContent(action, index)]);
     };
@@ -130,7 +134,7 @@ var stdin_default = defineComponent({
         var _a;
         return [renderHeader(), renderDescription(), _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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/dialog/Dialog.mjs

@@ -19,9 +19,11 @@ const dialogProps = extend({}, popupSharedProps, {
   showCancelButton: Boolean,
   cancelButtonText: String,
   cancelButtonColor: String,
+  cancelButtonBgColor: String,
   cancelButtonDisabled: Boolean,
   confirmButtonText: String,
   confirmButtonColor: String,
+  confirmButtonBgColor: String,
   confirmButtonDisabled: Boolean,
   showConfirmButton: truthProp,
   closeOnClickOverlay: Boolean
@@ -156,7 +158,8 @@ var stdin_default = 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,
@@ -168,7 +171,8 @@ var stdin_default = defineComponent({
         "with-cancel": props.showCancelButton
       }),
       "style": {
-        color: props.confirmButtonColor
+        color: props.confirmButtonColor,
+        background: props.confirmButtonBgColor
       },
       "loading": loading.confirm,
       "disabled": props.confirmButtonDisabled,

package/es/dialog/function-call.mjs

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

package/es/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/es/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/es/dropdown-item/DropdownItem.mjs

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

package/es/index.d.ts

@@ -57,6 +57,7 @@ export * from "./search";
 export * from "./signature";
 export * from "./skeleton";
 export * from "./slider";
+export * from "./speech-recognizer";
 export * from "./step";
 export * from "./stepper";
 export * from "./steps";

package/es/index.mjs

@@ -56,6 +56,7 @@ import { Search } from "./search/index.mjs";
 import { Signature } from "./signature/index.mjs";
 import { Skeleton } from "./skeleton/index.mjs";
 import { Slider } from "./slider/index.mjs";
+import { SpeechRecognizer } from "./speech-recognizer/index.mjs";
 import { Step } from "./step/index.mjs";
 import { Stepper } from "./stepper/index.mjs";
 import { Steps } from "./steps/index.mjs";
@@ -137,6 +138,7 @@ function install(app) {
     Signature,
     Skeleton,
     Slider,
+    SpeechRecognizer,
     Step,
     Stepper,
     Steps,
@@ -225,6 +227,7 @@ export * from "./search/index.mjs";
 export * from "./signature/index.mjs";
 export * from "./skeleton/index.mjs";
 export * from "./slider/index.mjs";
+export * from "./speech-recognizer/index.mjs";
 export * from "./step/index.mjs";
 export * from "./stepper/index.mjs";
 export * from "./steps/index.mjs";