@whitesev/pops 2.5.2 → 2.5.3

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

@@ -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;
@@ -21380,7 +21380,7 @@ 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;

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/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,18 +136,12 @@ export interface PopsPanelBottomContentConfig {
      * （可选）自定义元素属性.setAttribute、.getAttribute
      * @default {}
      */
-    attributes?: {
-        [key: string]: any;
-    };
+    attributes?: PopsPanelCommonDetails<any>["attributes"];
     /**
      * （可选）自定义元素内部的属性值
      * @default {}
      */
-    props?: {
-        [K in keyof HTMLElement]?: HTMLElement[K];
-    } | {
-        [key: string]: any;
-    };
+    props?: PopsPanelCommonDetails<any>["props"];
     /**
      * 该项的点击回调
      */
@@ -200,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

@@ -20944,7 +20944,7 @@ export declare const PopsRightClickMenu: {
             data: PopsRightClickMenuDataDetails[];
             chileMenuLeftOrRightDistance: number;
             childMenuTopOrBottomDistance: number;
-            className: string;
+            className: string | string[] | (() => string | string[]);
             isAnimation: boolean;
             useScaleAnimation: boolean;
             preventDefault: boolean;

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

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.2",
+  "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>

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

@@ -21,21 +21,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;
-      }[];
+  attributes?: {
+    [key: string]: any;
+  };
   /**
    * （可选）自定义属性
    * @default {}

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

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

package/src/components/rightClickMenu/types/index.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的右键菜单配置
@@ -71,10 +72,10 @@ export interface PopsRightClickMenuDetails
    */
   childMenuTopOrBottomDistance?: number;
   /**
-   * 自定义className，默认为空
+   * （可选）元素的className，值为空的话就不设置
    * @default ""
    */
-  className?: string;
+  className?: PopsPanelCommonDetails<any>["className"];
   /**
    * 是否启用动画，默认false
    *

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

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

package/src/components/tooltip/index.ts

@@ -82,9 +82,7 @@ export class ToolTip {
     const $toolTipArrow = $toolTipContainer.querySelector<HTMLElement>(".pops-tip-arrow")!;
 
     // 处理className
-    if (typeof this.$data.config.className === "string" && this.$data.config.className.trim() !== "") {
-      popsDOMUtils.addClassName($toolTipContainer, this.$data.config.className);
-    }
+    popsDOMUtils.addClassName($toolTipContainer, this.$data.config.className);
     // 添加z-index
     $toolTipContainer.style.zIndex = PopsHandler.handleZIndex(this.$data.config.zIndex).toString();
     if (this.$data.config.style != null) {

package/src/components/tooltip/types/index.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";
@@ -35,7 +36,7 @@ export interface PopsToolTipDetails
    * + `github-tooltip` github的样式
    * @default ""
    */
-  className?: string;
+  className?: PopsPanelCommonDetails<any>["className"];
   /**
    * 是否使用fixed定位，false则是absolute定位
    *