@whitesev/pops 3.1.3 → 3.2.0

package/src/types/PopsDOMUtilsEventType.d.ts

@@ -272,3 +272,42 @@ export declare type PopsDOMUtilsEventListenerOption = AddEventListenerOptions &
    */
   isComposedPath?: boolean;
 };
+
+export type PopsDOMUtilsTargetElementType = HTMLElement | string | NodeList | HTMLElement[];
+
+/**
+ * 属性转驼峰
+ */
+export type PopsDOMUtilsCamelToKebabCSSProperty<S extends string> = S extends `webkit${infer U}`
+  ? `-${Lowercase<"webkit">}${U extends `${infer First}${infer Rest}`
+      ? First extends Uppercase<First>
+        ? `-${Uncapitalize<First>}${PopsDOMUtilsCamelToKebabCSSProperty<Rest>}`
+        : `${First}${PopsDOMUtilsCamelToKebabCSSProperty<Rest>}`
+      : U}`
+  : S extends `${infer T}${infer U}`
+    ? U extends Uncapitalize<U>
+      ? `${Uncapitalize<T>}${PopsDOMUtilsCamelToKebabCSSProperty<U>}`
+      : `${Uncapitalize<T>}-${PopsDOMUtilsCamelToKebabCSSProperty<U>}`
+    : S;
+
+export type PopsDOMUtilsCSSPropertyType = PopsDOMUtilsCamelToKebabCSSProperty<
+  Extract<
+    keyof Omit<
+      CSSStyleDeclaration,
+      | "cssFloat"
+      | "cssText"
+      | "length"
+      | "parentRule"
+      | "getPropertyPriority"
+      | "getPropertyValue"
+      | "item"
+      | "removeProperty"
+      | "setProperty"
+    >,
+    string
+  >
+>;
+
+export type PopsDOMUtilsCSSProperty = {
+  [P in PopsDOMUtilsCSSPropertyType]: string | number;
+};

package/src/types/components.d.ts

@@ -184,7 +184,7 @@ export interface PopsGeneralConfig {
    *
    * @default 10000
    */
-  zIndex?: number | (() => number);
+  zIndex?: IFunction<number>;
   /**
    * 遮罩层
    */
@@ -199,6 +199,7 @@ export interface PopsGeneralConfig {
   forbiddenScroll?: boolean;
   /**
    * （可选）自定义style
+   * @default ""
    */
   style?: string | null;
   /**

package/src/types/event.d.ts

@@ -18,10 +18,20 @@ export interface PopsEventConfig {
   $mask?: HTMLDivElement;
   /** 当前弹窗类型 */
   mode: PopsType;
+  /** 唯一id */
   guid: string;
-  close: () => Promise<void>;
-  hide: () => Promise<void>;
-  show: () => Promise<void>;
+  /**
+   * 关闭弹窗
+   */
+  close(): Promise<void>;
+  /**
+   * 隐藏弹窗
+   */
+  hide(): Promise<void>;
+  /**
+   * 显示弹出
+   */
+  show($parent?: HTMLElement | Document | ShadowRoot): Promise<void>;
 }
 
 /**

package/src/types/inst.d.ts

@@ -21,4 +21,8 @@ export interface PopsInstGeneralConfig extends PopsInstConfig {
   $shadowRoot: ShadowRoot | HTMLElement;
   /** 移除实例前的回调函数 */
   beforeRemoveCallBack?: (instCommonConfig: PopsInstGeneralConfig) => void;
+  /** 配置 */
+  config: any;
+  /** 销毁元素 */
+  destory(): void | Promise<void>;
 }

package/src/utils/PopsDOMUtils.ts

@@ -7,6 +7,9 @@ import type {
   PopsDOMUtils_Event,
   PopsDOMUtilsElementEventType,
   PopsDOMUtilsAddEventListenerResult,
+  PopsDOMUtilsCSSProperty,
+  PopsDOMUtilsCSSPropertyType,
+  PopsDOMUtilsTargetElementType,
 } from "../types/PopsDOMUtilsEventType";
 import { SymbolEvents } from "./PopsDOMUtilsEventsConfig";
 import { OriginPrototype, PopsCore } from "../PopsCore";
@@ -479,12 +482,12 @@ class PopsDOMUtilsEvent {
     if (element == null) {
       return;
     }
-    let elementList: HTMLElement[] = [];
+    let $elList: HTMLElement[] = [];
     if (element instanceof NodeList || Array.isArray(element)) {
       element = element as HTMLElement[];
-      elementList = [...element];
+      $elList = $elList.concat(element);
     } else {
-      elementList.push(element as HTMLElement);
+      $elList.push(element as HTMLElement);
     }
     let eventTypeList: string[] = [];
     if (Array.isArray(eventType)) {
@@ -540,7 +543,7 @@ class PopsDOMUtilsEvent {
         array: PopsDOMUtilsEventListenerOptionsAttribute[]
       ) => boolean;
     }
-    elementList.forEach((elementItem) => {
+    $elList.forEach((elementItem) => {
       // 获取对象上的事件
       const elementEvents: {
         [key: string]: PopsDOMUtilsEventListenerOptionsAttribute[];
@@ -606,17 +609,18 @@ class PopsDOMUtilsEvent {
     element: PopsDOMUtilsElementEventType,
     eventType?: PopsDOMUtils_EventType | PopsDOMUtils_EventType[] | string
   ) {
+    const that = this;
     if (typeof element === "string") {
-      element = PopsCore.document.querySelectorAll(element);
+      element = that.selectorAll(element);
     }
     if (element == null) {
       return;
     }
-    let elementList: HTMLElement[] = [];
+    let $elList: (Element | Document | Window | typeof globalThis | Node | ChildNode | EventTarget)[] = [];
     if (element instanceof NodeList || Array.isArray(element)) {
-      elementList = [...(element as HTMLElement[])];
+      $elList = $elList.concat(Array.from(element as HTMLElement[]));
     } else {
-      elementList.push(element as HTMLElement);
+      $elList.push(element);
     }
 
     let eventTypeList: string[] = [];
@@ -625,24 +629,28 @@ class PopsDOMUtilsEvent {
     } else if (typeof eventType === "string") {
       eventTypeList = eventTypeList.concat(eventType.split(" "));
     }
-    elementList.forEach((elementItem) => {
-      Object.getOwnPropertySymbols(elementItem).forEach((__symbolEvents) => {
-        if (!__symbolEvents.toString().startsWith("Symbol(events_")) {
+    $elList.forEach(($elItem) => {
+      const symbolList = [...new Set([...Object.getOwnPropertySymbols($elItem), SymbolEvents])];
+      symbolList.forEach((symbolItem) => {
+        if (!symbolItem.toString().startsWith("Symbol(events_")) {
           return;
         }
-        const elementEvents = (elementItem as any)[__symbolEvents] || {};
+        const elementEvents: {
+          [key: string]: PopsDOMUtilsEventListenerOptionsAttribute[];
+        } = Reflect.get($elItem, symbolItem) || {};
         const iterEventNameList = eventTypeList.length ? eventTypeList : Object.keys(elementEvents);
         iterEventNameList.forEach((eventName) => {
-          const handlers = elementEvents[eventName];
+          const handlers: PopsDOMUtilsEventListenerOptionsAttribute[] = elementEvents[eventName];
           if (!handlers) {
             return;
           }
           for (const handler of handlers) {
-            elementItem.removeEventListener(eventName, handler.callback, {
+            $elItem.removeEventListener(eventName, handler.callback, {
               capture: handler["option"]["capture"],
             });
           }
-          popsUtils.delete((elementItem as any)[__symbolEvents], eventName);
+          const events = Reflect.get($elItem, symbolItem);
+          popsUtils.delete(events, eventName);
         });
       });
     });
@@ -1666,7 +1674,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
   }
   /**
    * 获取元素的样式属性值
-   * @param element 目标元素
+   * @param $el 目标元素
    * @param property 样式属性名或包含多个属性名和属性值的对象
    * @example
    * // 获取元素a.xx的CSS属性display
@@ -1674,10 +1682,10 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
    * DOMUtils.css("a.xx","display");
    * > "none"
    * */
-  css(element: HTMLElement | string, property: keyof CSSStyleDeclaration): string;
+  css($el: PopsDOMUtilsTargetElementType, property: PopsDOMUtilsCSSPropertyType): string;
   /**
    * 获取元素的样式属性值
-   * @param element 目标元素
+   * @param $el 目标元素
    * @param property 样式属性名或包含多个属性名和属性值的对象
    * @example
    * // 获取元素a.xx的CSS属性display
@@ -1685,10 +1693,10 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
    * DOMUtils.css("a.xx","display");
    * > "none"
    * */
-  css(element: HTMLElement | string, property: string): string;
+  css($el: PopsDOMUtilsTargetElementType, property: string): string;
   /**
    * 设置元素的样式属性
-   * @param element 目标元素
+   * @param $el 目标元素
    * @param property 样式属性名或包含多个属性名和属性值的对象
    * @param value 样式属性值
    * @example
@@ -1702,10 +1710,14 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
    * DOMUtils.css(document.querySelector("a.xx"),"top","10px");
    * DOMUtils.css(document.querySelector("a.xx"),"top",10);
    * */
-  css(element: HTMLElement | string, property: keyof CSSStyleDeclaration & string, value: string | number): string;
+  css(
+    $el: PopsDOMUtilsTargetElementType,
+    property: PopsDOMUtilsCSSPropertyType & string,
+    value: string | number
+  ): string;
   /**
    * 设置元素的样式属性
-   * @param element 目标元素
+   * @param $el 目标元素
    * @param property 样式属性名或包含多个属性名和属性值的对象
    * @param value 样式属性值
    * @example
@@ -1718,25 +1730,20 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
    * DOMUtils.css(document.querySelector("a.xx"),{ top: 10 });
    * */
   css(
-    element: HTMLElement | string,
+    $el: PopsDOMUtilsTargetElementType,
     property:
-      | {
-          [P in keyof CSSStyleDeclaration]?: CSSStyleDeclaration[P];
-        }
+      | PopsDOMUtilsCSSProperty
       | {
           [key: string]: string | number;
         }
+      | string
   ): string;
   css(
-    element: HTMLElement | string,
-    property:
-      | keyof CSSStyleDeclaration
-      | string
-      | {
-          [P in keyof CSSStyleDeclaration]?: string | number | CSSStyleDeclaration[P];
-        },
+    $el: PopsDOMUtilsTargetElementType,
+    property: PopsDOMUtilsCSSPropertyType | string | PopsDOMUtilsCSSProperty,
     value?: string | number
   ) {
+    const that = this;
     /**
      * 把纯数字没有px的加上
      */
@@ -1750,10 +1757,31 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
       }
       return propertyValue;
     }
-    if (typeof element === "string") {
-      element = PopsCore.document.querySelector(element) as HTMLElement;
+    if (typeof $el === "string") {
+      $el = that.selectorAll($el);
     }
-    if (element == null) {
+    if ($el == null) {
+      return;
+    }
+    if (Array.isArray($el) || $el instanceof NodeList) {
+      if (typeof property === "string") {
+        if (value == null) {
+          // 获取属性
+          return that.css($el[0] as HTMLElement, property);
+        } else {
+          // 设置属性
+          $el.forEach(($elItem) => {
+            that.css($elItem as HTMLElement, property);
+          });
+          return;
+        }
+      } else if (typeof property === "object") {
+        // 设置属性
+        $el.forEach(($elItem) => {
+          that.css($elItem as HTMLElement, property as PopsDOMUtilsCSSProperty);
+        });
+        return;
+      }
       return;
     }
     const setStyleProperty = (propertyName: string, propertyValue: string | number) => {
@@ -1762,23 +1790,26 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
           .trim()
           .replace(/!important$/gi, "")
           .trim();
-        element.style.setProperty(propertyName, propertyValue, "important");
+        $el.style.setProperty(propertyName, propertyValue, "important");
       } else {
         propertyValue = handlePixe(propertyName, propertyValue);
-        element.style.setProperty(propertyName, propertyValue);
+        $el.style.setProperty(propertyName, propertyValue);
       }
     };
     if (typeof property === "string") {
       if (value == null) {
-        return getComputedStyle(element).getPropertyValue(property);
+        return PopsCore.globalThis.getComputedStyle($el).getPropertyValue(property);
       } else {
         setStyleProperty(property, value);
       }
     } else if (typeof property === "object") {
       for (const prop in property) {
-        const value = property[prop];
+        const value = property[prop as keyof typeof property];
         setStyleProperty(prop, value!);
       }
+    } else {
+      // 其他情况
+      throw new TypeError("property must be string or object");
     }
   }
   /**

package/src/utils/PopsInstanceUtils.ts

@@ -13,6 +13,8 @@ import { popsUtils } from "./PopsUtils";
 import { PopsCore } from "../PopsCore";
 import { PopsInstData } from "../PopsInst";
 import { PopsAnimation } from "../PopsAnimation";
+import type { PopsRightClickMenuConfig } from "../components/rightClickMenu/types";
+import type { PopsToolTipConfig } from "../components/tooltip/types";
 
 export const PopsInstanceUtils = {
   /**
@@ -155,16 +157,16 @@ export const PopsInstanceUtils = {
   },
   /**
    * 删除配置中对应的对象
-   * @param instConfigList 配置实例列表
+   * @param totalInstConfigList 配置实例列表
    * @param  guid 唯一标识
    * @param isAll 是否全部删除
    */
-  removeInstance(instConfigList: PopsInstGeneralConfig[][], guid: string, isAll = false) {
+  async removeInstance(totalInstConfigList: PopsInstGeneralConfig[][], guid?: string, isAll = false) {
     /**
      * 移除元素实例
      * @param instCommonConfig
      */
-    function removeItem(instCommonConfig: PopsInstGeneralConfig) {
+    const removeInst = function (instCommonConfig: PopsInstGeneralConfig) {
       if (typeof instCommonConfig.beforeRemoveCallBack === "function") {
         // 调用移除签的回调
         instCommonConfig.beforeRemoveCallBack(instCommonConfig);
@@ -173,43 +175,49 @@ export const PopsInstanceUtils = {
       instCommonConfig?.$pops?.remove();
       instCommonConfig?.$mask?.remove();
       instCommonConfig?.$shadowContainer?.remove();
-    }
+    };
+    const asyncInstTask: Promise<void>[] = [];
     // [ inst[], inst[],...]
-    instConfigList.forEach((instConfigList) => {
+    totalInstConfigList.forEach((instConfigList) => {
       //  inst[]
-      instConfigList.forEach((instConfigItem, index) => {
+      instConfigList.forEach(async (instConfigItem, index) => {
         // 移除全部或者guid相同
-        if (isAll || instConfigItem["guid"] === guid) {
+        if (isAll || (typeof guid === "string" && instConfigItem.guid === guid)) {
           // 判断是否有动画
           const animName = instConfigItem.$anim.getAttribute("anim")!;
           if (PopsAnimation.hasAnim(animName)) {
             const reverseAnimName = animName + "-reverse";
-            instConfigItem.$anim.style.width = "100%";
-            instConfigItem.$anim.style.height = "100%";
-            (instConfigItem.$anim.style as any)["animation-name"] = reverseAnimName;
-            if (PopsAnimation.hasAnim((instConfigItem.$anim.style as any)["animation-name"])) {
-              popsDOMUtils.on(
-                instConfigItem.$anim,
-                popsDOMUtils.getAnimationEndNameList(),
-                function () {
-                  removeItem(instConfigItem);
-                },
-                {
-                  capture: true,
-                }
+            popsDOMUtils.css(instConfigItem.$anim, "width", "100%");
+            popsDOMUtils.css(instConfigItem.$anim, "height", "100%");
+            popsDOMUtils.css(instConfigItem.$anim, "animation-name", reverseAnimName);
+            if (PopsAnimation.hasAnim(popsDOMUtils.css(instConfigItem.$anim, "animation-name"))) {
+              asyncInstTask.push(
+                new Promise<void>((resolve) => {
+                  popsDOMUtils.on(
+                    instConfigItem.$anim,
+                    popsDOMUtils.getAnimationEndNameList(),
+                    function () {
+                      removeInst(instConfigItem);
+                      resolve();
+                    },
+                    {
+                      capture: true,
+                    }
+                  );
+                })
               );
             } else {
-              removeItem(instConfigItem);
+              removeInst(instConfigItem);
             }
           } else {
-            removeItem(instConfigItem);
+            removeInst(instConfigItem);
           }
           instConfigList.splice(index, 1);
         }
       });
     });
-
-    return instConfigList;
+    await Promise.all(asyncInstTask);
+    return totalInstConfigList;
   },
   /**
    * 隐藏
@@ -385,7 +393,7 @@ export const PopsInstanceUtils = {
    * @param config
    * @param $anim
    */
-  close(
+  async close(
     config:
       | PopsAlertConfig
       | PopsDrawerConfig
@@ -400,7 +408,8 @@ export const PopsInstanceUtils = {
     guid: string,
     $anim: HTMLElement
   ) {
-    return new Promise<void>((resolve) => {
+    // eslint-disable-next-line no-async-promise-executor
+    await new Promise<void>(async (resolve) => {
       const $pops = $anim.querySelector<HTMLDivElement>(".pops[type-value]")!;
       const drawerConfig = config as Required<PopsDrawerConfig>;
       /**
@@ -410,12 +419,12 @@ export const PopsInstanceUtils = {
         /**
          * 弹窗已关闭的回调
          */
-        function closeCallBack(event: Event) {
+        async function closeCallBack(event: Event) {
           if ((event as TransitionEvent).propertyName !== "transform") {
             return;
           }
-          popsDOMUtils.off($pops, popsDOMUtils.getTransitionEndNameList(), void 0, closeCallBack);
-          PopsInstanceUtils.removeInstance([instConfigList], guid);
+          popsDOMUtils.off($pops, popsDOMUtils.getTransitionEndNameList(), closeCallBack);
+          await PopsInstanceUtils.removeInstance([instConfigList], guid);
           resolve();
         }
         // 监听过渡结束
@@ -443,10 +452,33 @@ export const PopsInstanceUtils = {
           transitionendEvent();
         }, drawerConfig.closeDelay);
       } else {
-        PopsInstanceUtils.removeInstance([instConfigList], guid);
+        await PopsInstanceUtils.removeInstance([instConfigList], guid);
         resolve();
       }
     });
+
+    // 判断组件内是否有rightClickMenu、tooltip、searchSuggestion组件
+    // 有的话也需要关闭
+    PopsInstData.rightClickMenu.forEach((itemConfig) => {
+      const config = itemConfig.config as PopsRightClickMenuConfig;
+      if (config.$target instanceof HTMLElement) {
+        const $root = config.$target.getRootNode();
+        if ($root instanceof HTMLElement && $root.parentElement == null) {
+          // 触发销毁元素
+          itemConfig.destory();
+        }
+      }
+    });
+    PopsInstData.tooltip.forEach((itemConfig) => {
+      const config = itemConfig.config as PopsToolTipConfig;
+      if (config.$target instanceof HTMLElement) {
+        const $root = config.$target.getRootNode();
+        if ($root instanceof HTMLElement && $root.parentElement == null) {
+          // 触发销毁元素
+          itemConfig.destory();
+        }
+      }
+    });
   },
   /**
    * 拖拽元素

package/src/utils/PopsUtils.ts

@@ -66,7 +66,7 @@ class PopsUtils {
    * @param propName
    */
   delete(target: any, propName: any) {
-    if (typeof Reflect === "object" && Reflect.deleteProperty) {
+    if (typeof Reflect === "object" && typeof Reflect.deleteProperty === "function") {
       Reflect.deleteProperty(target, propName);
     } else {
       delete target[propName];