zartui 3.1.17 → 3.1.19

package/README.md

@@ -0,0 +1,23 @@
+# 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 一致）。

package/es/calendar/Calendar.mjs

@@ -474,8 +474,7 @@ var stdin_default = defineComponent({
     watch(() => props.show, init);
     watch(() => [props.type, props.minDate, props.maxDate], () => reset(getInitialDate(currentDate.value)));
     watch(() => props.defaultDate, (value = null) => {
-      currentDate.value = value;
-      scrollToCurrentDate();
+      reset(value);
     });
     watch(titleDate, (newValue) => {
       if (props.showType === "inline" && newValue) {

package/es/date-time-picker/DateTimePicker.mjs

@@ -146,6 +146,21 @@ var stdin_default = defineComponent({
         }
       }
     };
+    watch(() => props.modelValue, onOpen, {
+      deep: true
+    });
+    watch(() => props.startValue, () => {
+      currentStartValue.value = props.startValue;
+      currentStartText.value = genOriginValueText(props.startValue);
+    }, {
+      deep: true
+    });
+    watch(() => props.endValue, () => {
+      currentEndValue.value = props.endValue;
+      currentEndText.value = genOriginValueText(props.endValue);
+    }, {
+      deep: true
+    });
     const renderTitle = () => {
       if (!props.range) {
         return _createVNode("div", {

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-a6);--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);-webkit-backface-visibility:hidden;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-a8);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;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(-50%,-50%,0) scale(.7);opacity:0}.zt-dialog-bounce-leave-active{transform:translate3d(-50%,-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: 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-a6);--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);-webkit-backface-visibility:hidden;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-a8);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;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)}

package/es/drawer-select/DrawerSelect.d.ts

@@ -1,5 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { DrawerSelectFieldNames, DrawerSelectTreeNode } from './types';
+import { DrawerSelectFieldNames, DrawerSelectTreeNode, FlatTreeNode } from './types';
 declare const drawerSelectProps: {
     treeData: {
         type: PropType<DrawerSelectTreeNode[]>;
@@ -18,6 +18,11 @@ declare const drawerSelectProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    defaultSelectNode: PropType<FlatTreeNode>;
+    activeClassName: {
+        type: PropType<string>;
+        default: string;
+    };
 };
 export type DrawerSelectProps = ExtractPropTypes<typeof drawerSelectProps>;
 declare const _default: import("vue").DefineComponent<{
@@ -38,6 +43,11 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    defaultSelectNode: PropType<FlatTreeNode>;
+    activeClassName: {
+        type: PropType<string>;
+        default: string;
+    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "change")[], "select" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     treeData: {
         type: PropType<DrawerSelectTreeNode[]>;
@@ -56,6 +66,11 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    defaultSelectNode: PropType<FlatTreeNode>;
+    activeClassName: {
+        type: PropType<string>;
+        default: string;
+    };
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     onSelect?: ((...args: any[]) => any) | undefined;
@@ -64,5 +79,6 @@ declare const _default: import("vue").DefineComponent<{
     placeholder: string;
     treeData: DrawerSelectTreeNode[];
     expandAll: boolean;
+    activeClassName: string;
 }, {}>;
 export default _default;

package/es/drawer-select/DrawerSelect.mjs

@@ -18,7 +18,9 @@ const drawerSelectProps = {
   expandAll: {
     type: Boolean,
     default: false
-  }
+  },
+  defaultSelectNode: Object,
+  activeClassName: makeStringProp("")
 };
 var stdin_default = defineComponent({
   name,
@@ -29,7 +31,7 @@ var stdin_default = defineComponent({
   }) {
     const keyword = ref("");
     const expandNode = ref();
-    const selectNode = ref();
+    const selectNode = ref(props.defaultSelectNode);
     const flatArray = ref([]);
     const show = ref(false);
     const searchRef = ref();
@@ -228,6 +230,7 @@ var stdin_default = defineComponent({
     const renderItem = (item) => {
       var _a, _b;
       const empty = isEmpty(item);
+      const active = empty && ((_a = selectNode.value) == null ? void 0 : _a.value) == item[fields.value.value];
       return _createVNode("div", {
         "onClick": (e) => {
           e.stopPropagation();
@@ -246,8 +249,10 @@ var stdin_default = defineComponent({
         "size": "20"
       }, null)]), _createVNode("div", {
         "class": [bem("item--label", {
-          active: empty && ((_a = selectNode.value) == null ? void 0 : _a.value) == item[fields.value.value]
-        }), "zt-hairline--top"]
+          active
+        }), "zt-hairline--top", {
+          [props.activeClassName]: active
+        }]
       }, [item[fields.value.text]])]), _createVNode("div", {
         "class": [bem("item--child")]
       }, [!empty && item.checked && ((_b = item[fields.value.children]) == null ? void 0 : _b.map(renderItem))])]);

package/es/drawer-select/index.d.ts

@@ -16,6 +16,11 @@ export declare const DrawerSelect: import("../utils").WithInstall<import("vue").
         type: BooleanConstructor;
         default: boolean;
     };
+    defaultSelectNode: import("vue").PropType<import("./types").FlatTreeNode>;
+    activeClassName: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "change")[], "select" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     treeData: {
         type: import("vue").PropType<import("./types").DrawerSelectTreeNode[]>;
@@ -34,6 +39,11 @@ export declare const DrawerSelect: import("../utils").WithInstall<import("vue").
         type: BooleanConstructor;
         default: boolean;
     };
+    defaultSelectNode: import("vue").PropType<import("./types").FlatTreeNode>;
+    activeClassName: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     onSelect?: ((...args: any[]) => any) | undefined;
@@ -42,6 +52,7 @@ export declare const DrawerSelect: import("../utils").WithInstall<import("vue").
     placeholder: string;
     treeData: import("./types").DrawerSelectTreeNode[];
     expandAll: boolean;
+    activeClassName: string;
 }, {}>>;
 export default DrawerSelect;
 export type { DrawerSelectProps } from './DrawerSelect';

package/es/dropdown-item/DropdownItem.d.ts

@@ -22,6 +22,14 @@ export declare const dropdownItemProps: {
     titleClass: PropType<unknown>;
     multiSelect: BooleanConstructor;
     itemLabel: StringConstructor;
+    placeholder: {
+        type: PropType<string>;
+        default: string;
+    };
+    resetDefaultValue: {
+        type: PropType<any[]>;
+        default: () => any[];
+    };
 };
 export type DropdownItemProps = ExtractPropTypes<typeof dropdownItemProps>;
 declare const _default: import("vue").DefineComponent<{
@@ -45,6 +53,14 @@ declare const _default: import("vue").DefineComponent<{
     titleClass: PropType<unknown>;
     multiSelect: BooleanConstructor;
     itemLabel: StringConstructor;
+    placeholder: {
+        type: PropType<string>;
+        default: string;
+    };
+    resetDefaultValue: {
+        type: PropType<any[]>;
+        default: () => any[];
+    };
 }, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("reset" | "open" | "update:modelValue" | "change" | "close" | "opened" | "closed" | "confirm")[], "reset" | "open" | "update:modelValue" | "change" | "close" | "opened" | "closed" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     title: StringConstructor;
     options: {
@@ -66,6 +82,14 @@ declare const _default: import("vue").DefineComponent<{
     titleClass: PropType<unknown>;
     multiSelect: BooleanConstructor;
     itemLabel: StringConstructor;
+    placeholder: {
+        type: PropType<string>;
+        default: string;
+    };
+    resetDefaultValue: {
+        type: PropType<any[]>;
+        default: () => any[];
+    };
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     onReset?: ((...args: any[]) => any) | undefined;
@@ -77,9 +101,11 @@ declare const _default: import("vue").DefineComponent<{
     onConfirm?: ((...args: any[]) => any) | undefined;
 }, {
     disabled: boolean;
+    placeholder: string;
     lazyRender: boolean;
     options: DropdownItemOption[];
     modelValueArray: any[];
     multiSelect: boolean;
+    resetDefaultValue: any[];
 }, {}>;
 export default _default;

package/es/dropdown-item/DropdownItem.mjs

@@ -1,6 +1,6 @@
 import { mergeProps as _mergeProps, createTextVNode as _createTextVNode, withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
 import { reactive, Teleport, defineComponent, computed } from "vue";
-import { truthProp, unknownProp, getZIndexStyle, createNamespace, makeArrayProp, HAPTICS_FEEDBACK, extend } from "../utils/index.mjs";
+import { truthProp, unknownProp, getZIndexStyle, createNamespace, makeArrayProp, HAPTICS_FEEDBACK, extend, makeStringProp } from "../utils/index.mjs";
 import { DROPDOWN_KEY } from "../dropdown-menu/DropdownMenu.mjs";
 import { useParent } from "@zartui/use";
 import { useExpose } from "../composables/use-expose.mjs";
@@ -21,7 +21,9 @@ const dropdownItemProps = {
   modelValueArray: makeArrayProp(),
   titleClass: unknownProp,
   multiSelect: Boolean,
-  itemLabel: String
+  itemLabel: String,
+  placeholder: makeStringProp("\u672A\u9009\u62E9"),
+  resetDefaultValue: makeArrayProp()
 };
 var stdin_default = defineComponent({
   name,
@@ -78,10 +80,9 @@ var stdin_default = defineComponent({
       }
     };
     const onClickReset = () => {
-      props.options.forEach((item) => {
-        item.selected = false;
-      });
+      var _a;
       modelArray.splice(0);
+      modelArray.push(...(_a = props.resetDefaultValue) != null ? _a : []);
       state.showPopup = false;
       emit("reset");
     };
@@ -117,7 +118,7 @@ var stdin_default = defineComponent({
         if (title.length > 0) {
           title = title.substring(0, title.length - 1);
         }
-        return title || "\u672A\u9009\u62E9";
+        return title;
       }
       const match = props.options.find((option) => option[fields.value.value] === props.modelValue);
       return match ? match[fields.value.text] : "";
@@ -130,8 +131,11 @@ var stdin_default = defineComponent({
       const text = option[fields.value.text];
       let active = false;
       if (props.multiSelect) {
-        if (option.selected) {
+        if (modelArray == null ? void 0 : modelArray.includes(value)) {
           active = true;
+          option.selected = true;
+        } else {
+          option.selected = false;
         }
       } else {
         active = value === props.modelValue;
@@ -139,12 +143,10 @@ var stdin_default = defineComponent({
       const onClick = () => {
         if (props.multiSelect) {
           if (option.selected) {
-            option.selected = false;
             modelArray.splice(modelArray.indexOf(value), 1);
             emit("update:modelValue", -value);
             emit("change", -value);
           } else {
-            option.selected = true;
             modelArray.push(value);
             emit("update:modelValue", value);
             emit("change", value);

package/es/dropdown-item/index.d.ts

@@ -20,6 +20,14 @@ export declare const DropdownItem: import("../utils").WithInstall<import("vue").
     titleClass: import("vue").PropType<unknown>;
     multiSelect: BooleanConstructor;
     itemLabel: StringConstructor;
+    placeholder: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    resetDefaultValue: {
+        type: import("vue").PropType<any[]>;
+        default: () => any[];
+    };
 }, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("reset" | "open" | "update:modelValue" | "change" | "close" | "opened" | "closed" | "confirm")[], "reset" | "open" | "update:modelValue" | "change" | "close" | "opened" | "closed" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     title: StringConstructor;
     options: {
@@ -41,6 +49,14 @@ export declare const DropdownItem: import("../utils").WithInstall<import("vue").
     titleClass: import("vue").PropType<unknown>;
     multiSelect: BooleanConstructor;
     itemLabel: StringConstructor;
+    placeholder: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    resetDefaultValue: {
+        type: import("vue").PropType<any[]>;
+        default: () => any[];
+    };
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     onReset?: ((...args: any[]) => any) | undefined;
@@ -52,10 +68,12 @@ export declare const DropdownItem: import("../utils").WithInstall<import("vue").
     onConfirm?: ((...args: any[]) => any) | undefined;
 }, {
     disabled: boolean;
+    placeholder: string;
     lazyRender: boolean;
     options: import("./types").DropdownItemOption[];
     modelValueArray: any[];
     multiSelect: boolean;
+    resetDefaultValue: any[];
 }, {}>>;
 export default DropdownItem;
 export { dropdownItemProps } from './DropdownItem';

package/es/dropdown-menu/DropdownMenu.mjs

@@ -82,6 +82,7 @@ var stdin_default = defineComponent({
       if (item.$slots.header) {
         return item.$slots.header(item);
       }
+      const itemTitle = item.renderTitle();
       return _createVNode("div", {
         "id": `${id}-${index}`,
         "role": "button",
@@ -107,7 +108,9 @@ var stdin_default = defineComponent({
       }, [_createVNode("div", {
         "class": "zt-ellipsis",
         "style": "padding-right: 18px"
-      }, [slots.title || item.renderTitle(), slots.icon || _createVNode(ZtIcon, {
+      }, [slots.title || (itemTitle ? itemTitle : _createVNode("div", {
+        "class": [bem("placeholder")]
+      }, [item.placeholder])), slots.icon || _createVNode(ZtIcon, {
         "class": bem("icon"),
         "name": "spinner-expand"
       }, null)])])]);

package/es/dropdown-menu/index.css

@@ -1 +1 @@
-:root{--zt-dropdown-menu-background: var(--zt-background-popup);--zt-dropdown-menu-bar-padding: 0 12px;--zt-dropdown-menu-item-margin: 12px 4px;--zt-dropdown-menu-item-height: 36px;--zt-dropdown-menu-item-padding: 0 12px;--zt-dropdown-menu-title-text-color: var(--zt-text-color);--zt-dropdown-menu-title-active-text-color: var(--zt-primary-color);--zt-dropdown-menu-title-disabled-text-color: var(--zt-text-color-2);--zt-dropdown-menu-option-active-color: var(--zt-primary-color);--zt-dropdown-menu-content-max-height: 80%}:root[zt-theme-size=large]{--zt-dropdown-menu-item-height: 48px}.zt-dropdown-menu{-webkit-user-select:none;user-select:none}.zt-dropdown-menu__bar{position:relative;display:flex;padding:var(--zt-dropdown-menu-bar-padding);align-items:center}.zt-dropdown-menu__bar--opened{z-index:calc(var(--zt-dropdown-item-z-index) + 1)}.zt-dropdown-menu__item{display:flex;flex:1;align-items:center;justify-content:center;background:var(--zt-dropdown-menu-background);min-width:0;margin:var(--zt-dropdown-menu-item-margin);height:var(--zt-dropdown-menu-item-height);border-radius:calc(var(--zt-dropdown-menu-item-height) / 2);padding:var(--zt-dropdown-menu-item-padding);font-size:var(--zt-font-size-md);line-height:var(--zt-line-height-md);cursor:pointer}.zt-dropdown-menu__item:last-child{margin-right:0}.zt-dropdown-menu__item:active{opacity:.7}.zt-dropdown-menu__item--disabled:active{opacity:1}.zt-dropdown-menu__item--disabled .zt-dropdown-menu__title{color:var(--zt-dropdown-menu-title-disabled-text-color)}.zt-dropdown-menu__title{position:relative;box-sizing:border-box;width:100%;color:var(--zt-dropdown-menu-title-text-color);font-size:var(--zt-font-size-md)}.zt-dropdown-menu__title .zt-icon{position:absolute;right:0;top:3px;color:var(--zt-gray-4)}.zt-dropdown-menu__title--active{color:var(--zt-dropdown-menu-title-active-text-color)}.zt-dropdown-menu__title--active .zt-icon{color:currentColor}.zt-dropdown-menu__title--active .zt-dropdown-menu__icon{transform:rotate(180deg)}.zt-dropdown-menu__title--down:after{margin-top:-1px;transform:rotate(135deg)}
+:root{--zt-dropdown-menu-background: var(--zt-background-popup);--zt-dropdown-menu-bar-padding: 0 12px;--zt-dropdown-menu-item-margin: 12px 4px;--zt-dropdown-menu-item-height: 36px;--zt-dropdown-menu-item-padding: 0 12px;--zt-dropdown-menu-title-text-color: var(--zt-text-color);--zt-dropdown-menu-title-active-text-color: var(--zt-primary-color);--zt-dropdown-menu-title-disabled-text-color: var(--zt-text-color-2);--zt-dropdown-menu-option-active-color: var(--zt-primary-color);--zt-dropdown-menu-content-max-height: 80%}:root[zt-theme-size=large]{--zt-dropdown-menu-item-height: 48px}.zt-dropdown-menu{-webkit-user-select:none;user-select:none}.zt-dropdown-menu__bar{position:relative;display:flex;padding:var(--zt-dropdown-menu-bar-padding);align-items:center}.zt-dropdown-menu__bar--opened{z-index:calc(var(--zt-dropdown-item-z-index) + 1)}.zt-dropdown-menu__item{display:flex;flex:1;align-items:center;justify-content:center;background:var(--zt-dropdown-menu-background);min-width:0;margin:var(--zt-dropdown-menu-item-margin);height:var(--zt-dropdown-menu-item-height);border-radius:calc(var(--zt-dropdown-menu-item-height) / 2);padding:var(--zt-dropdown-menu-item-padding);font-size:var(--zt-font-size-md);line-height:var(--zt-line-height-md);cursor:pointer}.zt-dropdown-menu__item:last-child{margin-right:0}.zt-dropdown-menu__item:active{opacity:.7}.zt-dropdown-menu__item--disabled:active{opacity:1}.zt-dropdown-menu__item--disabled .zt-dropdown-menu__title{color:var(--zt-dropdown-menu-title-disabled-text-color)}.zt-dropdown-menu__title{position:relative;box-sizing:border-box;width:100%;color:var(--zt-dropdown-menu-title-text-color);font-size:var(--zt-font-size-md)}.zt-dropdown-menu__title .zt-icon{position:absolute;right:0;top:3px;color:var(--zt-gray-4)}.zt-dropdown-menu__title--active{color:var(--zt-dropdown-menu-title-active-text-color)}.zt-dropdown-menu__title--active .zt-icon{color:currentColor}.zt-dropdown-menu__title--active .zt-dropdown-menu__icon{transform:rotate(180deg)}.zt-dropdown-menu__title--down:after{margin-top:-1px;transform:rotate(135deg)}.zt-dropdown-menu__placeholder{color:var(--zt-gray-a2)}

package/es/empty/Empty.mjs

@@ -2,6 +2,7 @@ import { createVNode as _createVNode } from "vue";
 import { defineComponent } from "vue";
 import { getSizeStyle, makeStringProp, createNamespace } from "../utils/index.mjs";
 import { renderNotFound, renderServerError, renderAccessRestricted, renderDeveloping, renderNetworkError, renderEmptyResult, renderFindNull, renderEmptyInterface, renderReportSuccess, renderReportError, renderNoCollect } from "./Images.mjs";
+import { useId } from "../composables/use-id.mjs";
 const [name, bem] = createNamespace("empty");
 const PRESET_IMAGES = {
   default: renderNotFound,
@@ -28,12 +29,15 @@ var stdin_default = defineComponent({
   setup(props, {
     slots
   }) {
+    const baseId = useId();
+    const getId = (num) => `${baseId}-${num}`;
+    const getUrlById = (num) => `url(#${getId(num)})`;
     const renderImage = () => {
       var _a;
       if (slots.image) {
         return slots.image();
       }
-      return ((_a = PRESET_IMAGES[props.image]) == null ? void 0 : _a.call(PRESET_IMAGES, bem)) || _createVNode("img", {
+      return ((_a = PRESET_IMAGES[props.image]) == null ? void 0 : _a.call(PRESET_IMAGES, bem, getId, getUrlById)) || _createVNode("img", {
         "src": props.image
       }, null);
     };

package/es/empty/Images.d.ts

@@ -5,16 +5,19 @@
  * fill修改为class={bem('svg-defs-path-fill')}；
  * feColorMatrix需要调整内部value矩阵值，feOffset需要调整内部的in的值为SourceGraphic，具体可参考empty组件已有的svg元素。
  * 经过这些操作，svg图标就会随主色变换颜色
+ *
+ * linearGradient中使用到的id需要从getId方法中生成，避免多次使用zt-empty出现id重复
  */
 import { BEM } from '../utils';
-export declare const renderNotFound: (bem: BEM) => JSX.Element;
-export declare const renderServerError: (bem: BEM) => JSX.Element;
-export declare const renderAccessRestricted: (bem: BEM) => JSX.Element;
-export declare const renderDeveloping: (bem: BEM) => JSX.Element;
-export declare const renderNetworkError: (bem: BEM) => JSX.Element;
-export declare const renderEmptyResult: (bem: BEM) => JSX.Element;
-export declare const renderFindNull: (bem: BEM) => JSX.Element;
-export declare const renderEmptyInterface: (bem: BEM) => JSX.Element;
-export declare const renderReportSuccess: (bem: BEM) => JSX.Element;
-export declare const renderReportError: (bem: BEM) => JSX.Element;
-export declare const renderNoCollect: (bem: BEM) => JSX.Element;
+import type { EmptySvgIdFn } from './types';
+export declare const renderNotFound: (bem: BEM, getId: EmptySvgIdFn, getUrlById: EmptySvgIdFn) => JSX.Element;
+export declare const renderServerError: (bem: BEM, getId: EmptySvgIdFn, getUrlById: EmptySvgIdFn) => JSX.Element;
+export declare const renderAccessRestricted: (bem: BEM, getId: EmptySvgIdFn, getUrlById: EmptySvgIdFn) => JSX.Element;
+export declare const renderDeveloping: (bem: BEM, getId: EmptySvgIdFn, getUrlById: EmptySvgIdFn) => JSX.Element;
+export declare const renderNetworkError: (bem: BEM, getId: EmptySvgIdFn, getUrlById: EmptySvgIdFn) => JSX.Element;
+export declare const renderEmptyResult: (bem: BEM, getId: EmptySvgIdFn, getUrlById: EmptySvgIdFn) => JSX.Element;
+export declare const renderFindNull: (bem: BEM, getId: EmptySvgIdFn, getUrlById: EmptySvgIdFn) => JSX.Element;
+export declare const renderEmptyInterface: (bem: BEM, getId: EmptySvgIdFn, getUrlById: EmptySvgIdFn) => JSX.Element;
+export declare const renderReportSuccess: (bem: BEM, getId: EmptySvgIdFn, getUrlById: EmptySvgIdFn) => JSX.Element;
+export declare const renderReportError: (bem: BEM, getId: EmptySvgIdFn, getUrlById: EmptySvgIdFn) => JSX.Element;
+export declare const renderNoCollect: (bem: BEM, getId: EmptySvgIdFn, getUrlById: EmptySvgIdFn) => JSX.Element;