@whitesev/pops 2.5.1 → 2.5.3

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,24 +158,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"];
   /**
    * 该项的点击回调
    */
@@ -231,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定位
    *

package/src/utils/PopsDOMUtils.ts

@@ -1575,18 +1575,31 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
    * @param $el 目标元素
    * @param className className属性
    */
-  addClassName($el: Element | undefined | null, className: string) {
-    if ($el == null) {
-      return;
+  addClassName(
+    $el: Element | undefined | null | undefined,
+    className: string | string[] | (() => string | string[]) | undefined | null
+  ) {
+    if ($el == null) return;
+    if (className == null) return;
+
+    if (typeof className === "function") {
+      className = className();
     }
-    if (typeof className !== "string") {
-      return;
+    if (!Array.isArray(className)) {
+      className = [className];
     }
-    if (className.trim() === "") {
-      return;
-    }
-    const classNameList = className.split(" ").filter((item) => item.trim() !== "");
-    $el.classList.add(...classNameList);
+    className.forEach((classNameStrItem) => {
+      if (typeof classNameStrItem !== "string") {
+        // 不是字符串
+        return;
+      }
+      if (classNameStrItem.trim() === "") {
+        // 空字符串
+        return;
+      }
+      const classNameList = classNameStrItem.split(" ").filter((item) => item.trim() !== "");
+      $el?.classList?.add?.(...classNameList);
+    });
   }
   /**
    * 删除className