@whitesev/pops 2.5.1 → 2.5.3

package/dist/types/src/Pops.d.ts

@@ -34,16 +34,16 @@ declare class Pops {
         };
         /** icon图标的svg代码 */
         iconSVG: {
+            loading: string;
             min: string;
-            mise: string;
             max: string;
+            mise: string;
             close: string;
             edit: string;
             share: string;
             delete: string;
             search: string;
             upload: string;
-            loading: string;
             next: string;
             prev: string;
             eleme: string;
@@ -69,14 +69,14 @@ declare class Pops {
         };
         /** 存储已创建的元素 */
         instData: {
+            iframe: import("./types/inst").PopsInstCommonConfig[];
             loading: import("./types/inst").PopsInstCommonConfig[];
+            folder: import("./types/inst").PopsInstCommonConfig[];
             alert: import("./types/inst").PopsInstCommonConfig[];
             confirm: import("./types/inst").PopsInstCommonConfig[];
             prompt: import("./types/inst").PopsInstCommonConfig[];
-            iframe: import("./types/inst").PopsInstCommonConfig[];
             tooltip: import("./types/inst").PopsInstCommonConfig[];
             drawer: import("./types/inst").PopsInstCommonConfig[];
-            folder: import("./types/inst").PopsInstCommonConfig[];
             panel: import("./types/inst").PopsInstCommonConfig[];
             rightClickMenu: import("./types/inst").PopsInstCommonConfig[];
         };
@@ -112,7 +112,7 @@ declare class Pops {
             height(element: HTMLElement | string | Window | Document | typeof globalThis, isShow?: boolean, parent?: HTMLElement | ShadowRoot): number;
             outerWidth(element: HTMLElement | string | Window | Document, isShow?: boolean, parent?: HTMLElement | ShadowRoot): number;
             outerHeight(element: HTMLElement | string | Window, isShow?: boolean, parent?: HTMLElement | ShadowRoot): number;
-            addClassName($el: Element | undefined | null, className: string): void;
+            addClassName($el: Element | undefined | null | undefined, className: string | string[] | (() => string | string[]) | undefined | null): void;
             removeClassName($el: Element | undefined | null, className: string): void;
             containsClassName($el: HTMLElement | undefined | null, className: string): boolean;
             css(element: HTMLElement | string, property: keyof CSSStyleDeclaration): string;
@@ -257,7 +257,7 @@ declare class Pops {
             setAsideItemIsVisited($el: HTMLElement): void;
             setElementAttributes($el: HTMLElement, attributes?: any): void;
             setElementProps($el: HTMLElement, props?: any): void;
-            setElementClassName($el: HTMLElement, className?: string | string[] | (() => string | string[])): void;
+            setElementClassName($el: HTMLElement, className?: import("./components/panel/types/components-common").PopsPanelCommonDetails<any>["className"]): void;
             createBottomItem(bottomItemConfig: import("./components/panel/types").PopsPanelBottomContentConfig): HTMLLIElement;
             setBottomItemClickEvent($bottomItem: HTMLElement, bottomItemConfig: import("./components/panel/types").PopsPanelBottomContentConfig): void;
             createAsideItem(asideConfig: import("./components/panel/types").PopsPanelContentConfig): HTMLLIElement;
@@ -360,7 +360,7 @@ declare class Pops {
             content: string | (() => string);
             isDiffContent: boolean;
             position: import("./components/tooltip/types/index").PopsTooltipPosition;
-            className: string;
+            className: string | string[] | (() => string | string[]);
             isFixed: boolean;
             alwaysShow: boolean;
             delayCloseTime: number;
@@ -393,14 +393,14 @@ declare class Pops {
             showArrow: boolean;
             arrowDistance: number;
             otherDistance: number;
-            zIndex: number | (() => number);
-            style: string | null;
             useShadowRoot: boolean;
             only: boolean;
+            zIndex: number | (() => number);
+            style: string | null;
             beforeAppendToPageCallBack: ($shadowRoot: ShadowRoot | HTMLElement, $shadowContainer: HTMLDivElement) => void;
         };
         $shadowContainer: HTMLDivElement;
-        $shadowRoot: ShadowRoot | HTMLDivElement;
+        $shadowRoot: HTMLDivElement | ShadowRoot;
         toolTip: import("./components/tooltip").ToolTip;
     };
     /**
@@ -423,6 +423,7 @@ declare class Pops {
         close: () => Promise<void>;
         hide: () => Promise<void>;
         show: () => Promise<void>;
+        guid: string;
         $shadowContainer: HTMLDivElement;
         $shadowRoot: ShadowRoot | HTMLElement;
         element: HTMLDivElement;
@@ -430,7 +431,6 @@ declare class Pops {
         popsElement: HTMLDivElement;
         maskElement?: HTMLDivElement | undefined;
         mode: import("./types/main").PopsType;
-        guid: string;
     };
     /**
      * 右键菜单
@@ -439,7 +439,7 @@ declare class Pops {
     rightClickMenu: (details: PopsRightClickMenuDetails) => {
         guid: string;
         config: {
-            target: Node | HTMLElement | {
+            target: HTMLElement | Node | {
                 addEventListener: (type: string, callback: EventListenerOrEventListenerObject | null, options?: AddEventListenerOptions | boolean) => void;
                 dispatchEvent: (event: Event) => boolean;
                 removeEventListener: (type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean) => void;
@@ -21380,14 +21380,14 @@ declare class Pops {
             data: import("./components/rightClickMenu/types").PopsRightClickMenuDataDetails[];
             chileMenuLeftOrRightDistance: number;
             childMenuTopOrBottomDistance: number;
-            className: string;
+            className: string | string[] | (() => string | string[]);
             isAnimation: boolean;
             useScaleAnimation: boolean;
             preventDefault: boolean;
-            zIndex: number | (() => number);
-            style: string | null;
             useShadowRoot: boolean;
             only: boolean;
+            zIndex: number | (() => number);
+            style: string | null;
             beforeAppendToPageCallBack: ($shadowRoot: ShadowRoot | HTMLElement, $shadowContainer: HTMLDivElement) => void;
         };
         removeWindowCheckClickListener: () => void;
@@ -21413,7 +21413,7 @@ declare class Pops {
      * searchSuggestion.setAllEvent();
      */
     searchSuggestion: <T = any>(details: PopsSearchSuggestionDetails<T>) => {
-        selfDocument: ShadowRoot | Document | (ShadowRoot | Document)[];
+        selfDocument: Document | ShadowRoot | (Document | ShadowRoot)[];
         $el: {
             root: HTMLElement;
             $hintULContainer: HTMLUListElement;

package/dist/types/src/components/panel/handlerComponents.d.ts

@@ -1,5 +1,5 @@
 import type { PopsPanelButtonDetails } from "./types/components-button";
-import type { PopsPanelRightAsideContainerOptions } from "./types/components-common";
+import type { PopsPanelCommonDetails, PopsPanelRightAsideContainerOptions } from "./types/components-common";
 import type { PopsPanelDeepMenuDetails } from "./types/components-deepMenu";
 import type { PopsPanelFormsDetails } from "./types/components-forms";
 import type { PopsPanelBottomContentConfig, PopsPanelContentConfig, PopsPanelDetails, PopsPanelFormsTotalDetails } from "./types";
@@ -102,7 +102,7 @@ export declare const PanelHandlerComponents: () => {
      * @param $el 元素
      * @param className
      */
-    setElementClassName($el: HTMLElement, className?: string | string[] | (() => string | string[])): void;
+    setElementClassName($el: HTMLElement, className?: PopsPanelCommonDetails<any>["className"]): void;
     /**
      * 创建底部项元素<li>
      * @param bottomItemConfig 配置

package/dist/types/src/components/panel/index.d.ts

@@ -7,6 +7,7 @@ export declare const PopsPanel: {
         close: () => Promise<void>;
         hide: () => Promise<void>;
         show: () => Promise<void>;
+        guid: string;
         $shadowContainer: HTMLDivElement;
         $shadowRoot: ShadowRoot | HTMLElement;
         element: HTMLDivElement;
@@ -14,6 +15,5 @@ export declare const PopsPanel: {
         popsElement: HTMLDivElement;
         maskElement?: HTMLDivElement | undefined;
         mode: PopsType;
-        guid: string;
     };
 };

package/dist/types/src/components/panel/types/components-common.d.ts

@@ -20,19 +20,17 @@ export interface PopsPanelRightAsideContainerOptions {
  */
 export interface PopsPanelCommonDetails<T extends PopsPanelFormsTotalDetails | PopsPanelFormsDetails> {
     /**
-     * （可选）className属性
+     * （可选）元素的className，值为空的话就不设置
      * @default ""
      */
-    className?: string;
+    className?: string | string[] | (() => string | string[]);
     /**
      * （可选）自定义元素属性
      * @default {}
      */
     attributes?: {
         [key: string]: any;
-    } | {
-        [key: string]: any;
-    }[];
+    };
     /**
      * （可选）自定义属性
      * @default {}

package/dist/types/src/components/panel/types/index.d.ts

@@ -39,7 +39,7 @@ export interface PopsPanelContentConfig {
      * （可选）元素的className，值为空的话就不设置
      * @default ""
      */
-    className?: string | string[];
+    className?: PopsPanelCommonDetails<any>["className"];
     /**
      * 显示的文本，可以是html格式
      */
@@ -116,7 +116,7 @@ export interface PopsPanelBottomContentConfig {
      * （可选）元素的className，值为空的话就不设置
      * @default ""
      */
-    className?: string | string[];
+    className?: PopsPanelCommonDetails<any>["className"];
     /**
      * （可选）配置所在位置
      *
@@ -136,20 +136,12 @@ export interface PopsPanelBottomContentConfig {
      * （可选）自定义元素属性.setAttribute、.getAttribute
      * @default {}
      */
-    attributes?: {
-        [key: string]: any;
-    } | {
-        [key: string]: any;
-    }[];
+    attributes?: PopsPanelCommonDetails<any>["attributes"];
     /**
      * （可选）自定义元素内部的属性值
      * @default {}
      */
-    props?: {
-        [K in keyof HTMLElement]?: HTMLElement[K];
-    } | {
-        [key: string]: any;
-    };
+    props?: PopsPanelCommonDetails<any>["props"];
     /**
      * 该项的点击回调
      */
@@ -202,7 +194,7 @@ export interface PopsPanelDetails extends PopsTitleConfig, PopsDragConfig, PopsC
      *
      * @default "pops-panel-is-mobile"
      */
-    mobileClassName?: string;
+    mobileClassName?: PopsPanelCommonDetails<any>["className"];
     /**
      * 是否强制是移动端，默认false
      * + true 强制为移动端

package/dist/types/src/components/rightClickMenu/index.d.ts

@@ -3,7 +3,7 @@ export declare const PopsRightClickMenu: {
     init(details: PopsRightClickMenuDetails): {
         guid: string;
         config: {
-            target: Node | HTMLElement | {
+            target: HTMLElement | Node | {
                 addEventListener: (type: string, callback: EventListenerOrEventListenerObject | null, options?: AddEventListenerOptions | boolean) => void;
                 dispatchEvent: (event: Event) => boolean;
                 removeEventListener: (type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean) => void;
@@ -20944,14 +20944,14 @@ export declare const PopsRightClickMenu: {
             data: PopsRightClickMenuDataDetails[];
             chileMenuLeftOrRightDistance: number;
             childMenuTopOrBottomDistance: number;
-            className: string;
+            className: string | string[] | (() => string | string[]);
             isAnimation: boolean;
             useScaleAnimation: boolean;
             preventDefault: boolean;
-            zIndex: number | (() => number);
-            style: string | null;
             useShadowRoot: boolean;
             only: boolean;
+            zIndex: number | (() => number);
+            style: string | null;
             beforeAppendToPageCallBack: ($shadowRoot: ShadowRoot | HTMLElement, $shadowContainer: HTMLDivElement) => void;
         };
         removeWindowCheckClickListener: () => void;

package/dist/types/src/components/rightClickMenu/types/index.d.ts

@@ -1,5 +1,6 @@
 import type { PopsCommonConfig } from "../../../types/components";
 import type { PopsIconType } from "../../../types/icon";
+import type { PopsPanelCommonDetails } from "../../panel/types/components-common";
 /**
  * pops.rightClickMenu的右键菜单配置
  */
@@ -63,10 +64,10 @@ export interface PopsRightClickMenuDetails extends Pick<PopsCommonConfig, "useSh
      */
     childMenuTopOrBottomDistance?: number;
     /**
-     * 自定义className，默认为空
+     * （可选）元素的className，值为空的话就不设置
      * @default ""
      */
-    className?: string;
+    className?: PopsPanelCommonDetails<any>["className"];
     /**
      * 是否启用动画，默认false
      *

package/dist/types/src/components/searchSuggestion/index.d.ts

@@ -4,7 +4,7 @@ export declare const PopsSearchSuggestion: {
         /**
          * 当前的环境，可以是document，可以是shadowroot，默认是document
          */
-        selfDocument: ShadowRoot | Document | (ShadowRoot | Document)[];
+        selfDocument: Document | ShadowRoot | (Document | ShadowRoot)[];
         $el: {
             /** 根元素 */
             root: HTMLElement;

package/dist/types/src/components/searchSuggestion/types/index.d.ts

@@ -1,4 +1,5 @@
 import type { PopsCommonConfig } from "../../../types/components";
+import type { PopsPanelCommonDetails } from "../../panel/types/components-common";
 export type PopsSearchSuggestionData<T = any> = {
     /**
      * 值
@@ -120,10 +121,10 @@ export interface PopsSearchSuggestionDetails<T = any> extends Pick<PopsCommonCon
      */
     data: PopsSearchSuggestionData<T>[] | (() => PopsSearchSuggestionData<T>[]);
     /**
-     * 自定义的className
+     * （可选）元素的className，值为空的话就不设置
      * @default ""
      */
-    className?: string;
+    className?: PopsPanelCommonDetails<any>["className"];
     /**
      * 建议框的position位置
      *

package/dist/types/src/components/tooltip/index.d.ts

@@ -186,7 +186,7 @@ export declare const PopsTooltip: {
             content: string | (() => string);
             isDiffContent: boolean;
             position: import("./types/index").PopsTooltipPosition;
-            className: string;
+            className: string | string[] | (() => string | string[]);
             isFixed: boolean;
             alwaysShow: boolean;
             delayCloseTime: number;
@@ -219,14 +219,14 @@ export declare const PopsTooltip: {
             showArrow: boolean;
             arrowDistance: number;
             otherDistance: number;
-            zIndex: number | (() => number);
-            style: string | null;
             useShadowRoot: boolean;
             only: boolean;
+            zIndex: number | (() => number);
+            style: string | null;
             beforeAppendToPageCallBack: ($shadowRoot: ShadowRoot | HTMLElement, $shadowContainer: HTMLDivElement) => void;
         };
         $shadowContainer: HTMLDivElement;
-        $shadowRoot: ShadowRoot | HTMLDivElement;
+        $shadowRoot: HTMLDivElement | ShadowRoot;
         toolTip: ToolTip;
     };
 };

package/dist/types/src/components/tooltip/types/index.d.ts

@@ -1,4 +1,5 @@
 import type { PopsCommonConfig } from "../../../types/components";
+import type { PopsPanelCommonDetails } from "../../panel/types/components-common";
 /** tooltip的出现位置 */
 export type PopsTooltipPosition = "top" | "right" | "bottom" | "left" | "follow";
 /**
@@ -32,7 +33,7 @@ export interface PopsToolTipDetails extends Pick<PopsCommonConfig, "useShadowRoo
      * + `github-tooltip` github的样式
      * @default ""
      */
-    className?: string;
+    className?: PopsPanelCommonDetails<any>["className"];
     /**
      * 是否使用fixed定位，false则是absolute定位
      *

package/dist/types/src/utils/PopsDOMUtils.d.ts

@@ -502,7 +502,7 @@ declare class PopsDOMUtils extends PopsDOMUtilsEvent {
      * @param $el 目标元素
      * @param className className属性
      */
-    addClassName($el: Element | undefined | null, className: string): void;
+    addClassName($el: Element | undefined | null | undefined, className: string | string[] | (() => string | string[]) | undefined | null): void;
     /**
      * 删除className
      * @param $el 目标元素

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/pops",
-  "version": "2.5.1",
+  "version": "2.5.3",
   "description": "弹窗库",
   "type": "module",
   "homepage": "https://github.com/WhiteSevs/TamperMonkeyScript/tree/master/lib/pops#readme",

package/src/components/panel/config.ts

@@ -15,18 +15,16 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
         title: "菜单配置1",
         headerTitle: "菜单配置1",
         isDefault: false,
-        attributes: [
-          {
-            "data-test": "test",
-            "data-test-2": "test2",
-          },
-        ],
+        attributes: {
+          "data-test": "test",
+          "data-test-2": "test2",
+        },
         forms: [
           {
             className: "forms-1",
             text: "区域设置",
             type: "forms",
-            attributes: [],
+            attributes: {},
             forms: [
               {
                 className: "panel-switch",
@@ -38,7 +36,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
                   // TODO
                 },
                 props: {},
-                attributes: [],
+                attributes: {},
                 getValue() {
                   return true;
                 },
@@ -61,7 +59,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
                 isShowHoverTip: true,
                 step: 1,
                 props: {},
-                attributes: [],
+                attributes: {},
                 getValue() {
                   return 50;
                 },
@@ -82,7 +80,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
                 afterAddToUListCallBack() {
                   // TODO
                 },
-                attributes: [],
+                attributes: {},
                 buttonIcon: "view",
                 buttonIconIsLoading: true,
                 buttonType: "default",
@@ -96,7 +94,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
                 text: "button",
                 type: "button",
                 props: {},
-                attributes: [],
+                attributes: {},
                 buttonIcon: "eleme",
                 buttonIconIsLoading: true,
                 buttonType: "warning",
@@ -111,7 +109,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
                 // @ts-ignore
                 props: {},
                 type: "button",
-                attributes: [],
+                attributes: {},
                 buttonIcon: "chromeFilled",
                 buttonIconIsLoading: true,
                 buttonType: "danger",
@@ -124,7 +122,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
                 className: "panel-button",
                 text: "button",
                 type: "button",
-                attributes: [],
+                attributes: {},
                 // @ts-ignore
                 props: {},
                 buttonIcon: "upload",
@@ -144,12 +142,10 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
         title: "菜单配置2",
         headerTitle: "菜单配置2",
         isDefault: true,
-        attributes: [
-          {
-            "data-value": "value",
-            "data-value-2": "value2",
-          },
-        ],
+        attributes: {
+          "data-value": "value",
+          "data-value-2": "value2",
+        },
         forms: [
           {
             className: "panel-input",
@@ -157,7 +153,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
             type: "input",
             isNumber: false,
             props: {},
-            attributes: [],
+            attributes: {},
             getValue() {
               return "50";
             },
@@ -173,7 +169,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
             type: "input",
             // @ts-ignore
             props: {},
-            attributes: [],
+            attributes: {},
             getValue() {
               return "123456";
             },
@@ -190,7 +186,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
             type: "textarea",
             // @ts-ignore
             props: {},
-            attributes: [],
+            attributes: {},
             getValue() {
               return "50";
             },
@@ -207,7 +203,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
             disabled: true,
             // @ts-ignore
             props: {},
-            attributes: [],
+            attributes: {},
             getValue() {
               return 50;
             },
@@ -249,7 +245,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
             // @ts-ignore
             props: {},
 
-            attributes: [],
+            attributes: {},
             placeholder: "请至少选择一个选项",
             getValue() {
               return ["select-1", "select-2"];
@@ -332,7 +328,8 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
                     className: "forms-1",
                     text: "区域设置",
                     type: "forms",
-                    attributes: [],
+                    attributes: {},
+                    props: {},
                     forms: [
                       {
                         className: "panel-switch",
@@ -340,7 +337,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
                         type: "switch",
                         // @ts-ignore
                         props: {},
-                        attributes: [],
+                        attributes: {},
                         getValue() {
                           return true;
                         },
@@ -354,7 +351,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
                         // @ts-ignore
                         props: {},
                         type: "slider",
-                        attributes: [],
+                        attributes: {},
                         getValue() {
                           return 50;
                         },
@@ -370,7 +367,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
                         // @ts-ignore
                         props: {},
                         type: "button",
-                        attributes: [],
+                        attributes: {},
                         buttonIcon: "eleme",
                         buttonIconIsLoading: true,
                         buttonType: "warning",
@@ -385,7 +382,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
                         type: "button",
                         // @ts-ignore
                         props: {},
-                        attributes: [],
+                        attributes: {},
                         buttonIcon: "chromeFilled",
                         buttonIconIsLoading: true,
                         buttonType: "danger",
@@ -400,7 +397,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
                         // @ts-ignore
                         props: {},
                         type: "button",
-                        attributes: [],
+                        attributes: {},
                         buttonIcon: "upload",
                         buttonIconIsLoading: false,
                         buttonType: "info",
@@ -447,7 +444,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
                 // @ts-ignore
                 props: {},
                 type: "switch",
-                attributes: [],
+                attributes: {},
                 getValue() {
                   return true;
                 },
@@ -466,12 +463,10 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
 				`,
         isBottom: true,
         disableAsideItemHoverCSS: true,
-        attributes: [
-          {
-            "data-value": "value",
-            "data-value-2": "value2",
-          },
-        ],
+        attributes: {
+          "data-value": "value",
+          "data-value-2": "value2",
+        },
         // @ts-ignore
         props: {},
         forms: [],
@@ -483,12 +478,10 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
         id: "whitesev-panel-bottom-config-2",
         title: "版本：xxx.xx.xx",
         isBottom: true,
-        attributes: [
-          {
-            "data-value": "value",
-            "data-value-2": "value2",
-          },
-        ],
+        attributes: {
+          "data-value": "value",
+          "data-value-2": "value2",
+        },
         // @ts-ignore
         props: {},
         forms: [],

package/src/components/panel/handlerComponents.ts

@@ -9,7 +9,7 @@ import { PopsTooltip } from "../tooltip";
 import { PopsCommonCSSClassName } from "../../config/CommonCSSClassName";
 import type { PopsAlertDetails } from "../alert/types";
 import type { PopsPanelButtonDetails } from "./types/components-button";
-import type { PopsPanelRightAsideContainerOptions } from "./types/components-common";
+import type { PopsPanelCommonDetails, PopsPanelRightAsideContainerOptions } from "./types/components-common";
 import type { PopsPanelDeepMenuDetails } from "./types/components-deepMenu";
 import type { PopsPanelFormsDetails } from "./types/components-forms";
 import type {
@@ -238,10 +238,10 @@ export const PanelHandlerComponents = () => {
      * @param props 属性
      */
     setElementProps($el: HTMLElement, props?: any) {
-      if (props == null) {
-        return;
-      }
-      Object.keys(props).forEach((propName) => {
+      if (props == null) return;
+      if (typeof props !== "object") return;
+      const propsKeys = Object.keys(props);
+      propsKeys.forEach((propName) => {
         const value = props[propName];
         if (propName === "innerHTML") {
           PopsSafeUtils.setSafeHTML($el, value);
@@ -255,23 +255,8 @@ export const PanelHandlerComponents = () => {
      * @param $el 元素
      * @param className
      */
-    setElementClassName($el: HTMLElement, className?: string | string[] | (() => string | string[])) {
-      if (className == null) {
-        return;
-      }
-      if (typeof className === "function") {
-        className = className();
-      }
-      if (typeof className === "string") {
-        const splitClassName = className.split(" ");
-        splitClassName.forEach((classNameStr) => {
-          $el.classList.add(classNameStr);
-        });
-      } else if (Array.isArray(className)) {
-        className.forEach((classNameStr) => {
-          this.setElementClassName($el, classNameStr);
-        });
-      }
+    setElementClassName($el: HTMLElement, className?: PopsPanelCommonDetails<any>["className"]) {
+      popsDOMUtils.addClassName($el, className);
     },
     /**
      * 创建底部项元素<li>