zartui 3.1.17 → 3.1.19

package/lib/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/lib/dropdown-menu/DropdownMenu.js

@@ -116,6 +116,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       if (item.$slots.header) {
         return item.$slots.header(item);
       }
+      const itemTitle = item.renderTitle();
       return (0, import_vue.createVNode)("div", {
         "id": `${id}-${index}`,
         "role": "button",
@@ -141,7 +142,9 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }, [(0, import_vue.createVNode)("div", {
         "class": "zt-ellipsis",
         "style": "padding-right: 18px"
-      }, [slots.title || item.renderTitle(), slots.icon || (0, import_vue.createVNode)(import_icon.default, {
+      }, [slots.title || (itemTitle ? itemTitle : (0, import_vue.createVNode)("div", {
+        "class": [bem("placeholder")]
+      }, [item.placeholder])), slots.icon || (0, import_vue.createVNode)(import_icon.default, {
         "class": bem("icon"),
         "name": "spinner-expand"
       }, null)])])]);

package/lib/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/lib/empty/Empty.js

@@ -24,6 +24,7 @@ var import_vue = require("vue");
 var import_vue2 = require("vue");
 var import_utils = require("../utils");
 var import_Images = require("./Images");
+var import_use_id = require("../composables/use-id");
 const [name, bem] = (0, import_utils.createNamespace)("empty");
 const PRESET_IMAGES = {
   default: import_Images.renderNotFound,
@@ -50,12 +51,15 @@ var stdin_default = (0, import_vue2.defineComponent)({
   setup(props, {
     slots
   }) {
+    const baseId = (0, import_use_id.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)) || (0, import_vue.createVNode)("img", {
+      return ((_a = PRESET_IMAGES[props.image]) == null ? void 0 : _a.call(PRESET_IMAGES, bem, getId, getUrlById)) || (0, import_vue.createVNode)("img", {
         "src": props.image
       }, null);
     };

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