@whitesev/pops 3.1.2 → 3.2.0

package/src/components/panel/handlerComponents.ts

@@ -1284,7 +1284,7 @@ export const PanelHandlerComponents = () => {
          * 监听输入框内容改变
          */
         onValueChange() {
-          popsDOMUtils.on<InputEvent>(this.$el.input, ["input", "propertychange"], void 0, (event) => {
+          popsDOMUtils.on<InputEvent>(this.$el.input, ["input", "propertychange"], (event) => {
             this.$data.value = this.$el.input.value;
             if (inputType !== "password") {
               // 不是密码框
@@ -1673,7 +1673,7 @@ export const PanelHandlerComponents = () => {
            * 监听点击事件
            */
           onClick() {
-            popsDOMUtils.on(this.$el.$select, "click", void 0, (event) => {
+            popsDOMUtils.on(this.$el.$select, "click", (event) => {
               this.setSelectOptionsDisableStatus();
               if (typeof viewConfig.clickCallBack === "function") {
                 const $isSelectedElement = this.$el.$select[this.$el.$select.selectedIndex] as HTMLOptionElement;
@@ -3461,7 +3461,7 @@ export const PanelHandlerComponents = () => {
          * 设置按钮的点击事件
          */
         onButtonClick() {
-          popsDOMUtils.on(this.$ele.button, "click", void 0, (event) => {
+          popsDOMUtils.on(this.$ele.button, "click", (event) => {
             if (typeof viewConfig.callback === "function") {
               viewConfig.callback(event);
             }
@@ -3533,13 +3533,13 @@ export const PanelHandlerComponents = () => {
         initContainerItem($container: HTMLElement, formItemConfig: PopsPanelViewConfig | PopsPanelContainerConfig) {
           const containerViewConfig = formItemConfig as PopsPanelContainerConfig;
           if (containerViewConfig.type === "container") {
-            const childForms = containerViewConfig["views"];
+            const childViewConfig = containerViewConfig["views"];
             // 每一项<li>元素
-            const formContainerListElement = popsDOMUtils.createElement("li");
+            const $itemLi = popsDOMUtils.createElement("li");
             // 每一项<li>内的子<ul>元素
-            const formContainerULElement = popsDOMUtils.createElement("ul");
-            formContainerULElement.classList.add("pops-panel-forms-container-item-formlist");
-            formContainerListElement.classList.add("pops-panel-forms-container-item");
+            const $itemUL = popsDOMUtils.createElement("ul");
+            $itemUL.classList.add("pops-panel-forms-container-item-formlist");
+            $itemLi.classList.add("pops-panel-forms-container-item");
             // 区域头部的文字
             const formHeaderDivElement = popsDOMUtils.createElement("div", {
               className: "pops-panel-forms-container-item-header-text",
@@ -3562,41 +3562,41 @@ export const PanelHandlerComponents = () => {
               );
               // 添加点击事件
               popsDOMUtils.on(formHeaderDivElement, "click", () => {
-                if (formContainerListElement.hasAttribute("data-fold-enable")) {
-                  formContainerListElement.removeAttribute("data-fold-enable");
+                if ($itemLi.hasAttribute("data-fold-enable")) {
+                  $itemLi.removeAttribute("data-fold-enable");
                 } else {
-                  formContainerListElement.setAttribute("data-fold-enable", "");
+                  $itemLi.setAttribute("data-fold-enable", "");
                 }
               });
               popsDOMUtils.addClassName(formHeaderDivElement, "pops-panel-forms-fold-container");
               popsDOMUtils.addClassName(formHeaderDivElement, PopsCommonCSSClassName.userSelectNone);
-              formContainerListElement.setAttribute("data-fold-enable", "");
+              $itemLi.setAttribute("data-fold-enable", "");
               popsDOMUtils.addClassName(formHeaderDivElement, "pops-panel-forms-fold");
-              formContainerListElement.appendChild(formHeaderDivElement);
+              $itemLi.appendChild(formHeaderDivElement);
             } else {
               // 加进容器内
-              formContainerListElement.appendChild(formHeaderDivElement);
+              $itemLi.appendChild(formHeaderDivElement);
             }
 
-            that.setElementClassName(formContainerListElement, formItemConfig.className);
-            that.setElementAttributes(formContainerListElement, formItemConfig.attributes);
-            that.setElementProps(formContainerListElement, formItemConfig.props);
-            childForms.forEach((childViewConfig) => {
+            that.setElementClassName($itemLi, formItemConfig.className);
+            that.setElementAttributes($itemLi, formItemConfig.attributes);
+            that.setElementProps($itemLi, formItemConfig.props);
+            $itemLi.appendChild($itemUL);
+            $container.appendChild($itemLi);
+            childViewConfig.forEach((childViewConfig) => {
               that.uListContainerAddItem(childViewConfig, {
-                ulElement: formContainerULElement,
+                ulElement: $itemUL,
                 sectionContainerULElement: that.sectionContainerULElement,
-                formContainerListElement: formContainerListElement,
+                formContainerListElement: $itemLi,
                 formHeaderDivElement: formHeaderDivElement,
               });
             });
-            formContainerListElement.appendChild(formContainerULElement);
-            $container.appendChild(formContainerListElement);
             if (typeof containerViewConfig.afterAddToUListCallBack === "function") {
               containerViewConfig.afterAddToUListCallBack(viewConfig as any as PopsPanelContainerConfig, {
-                target: formContainerListElement,
-                ulElement: formContainerULElement,
+                target: $itemLi,
+                ulElement: $itemUL,
                 sectionContainerULElement: that.sectionContainerULElement,
-                formContainerListElement: formContainerListElement,
+                formContainerListElement: $itemLi,
                 formHeaderDivElement: formHeaderDivElement,
               });
             }
@@ -3747,7 +3747,7 @@ export const PanelHandlerComponents = () => {
         },
         /** 设置项的点击事件 */
         onLiClick() {
-          popsDOMUtils.on($li, "click", void 0, async (event) => {
+          popsDOMUtils.on($li, "click", async (event) => {
             if (typeof viewConfig.clickCallBack === "function") {
               const result = await viewConfig.clickCallBack(event, viewConfig);
               if (result) {

package/src/components/panel/index.ts

@@ -146,6 +146,7 @@ export const PopsPanel = {
       $pops,
       $mask
     );
+    const result = PopsHandler.handleResultConfig(evtConfig);
     // 为顶部右边的关闭按钮添加点击事件
     PopsHandler.handleClickEvent("close", $headerBtnClose, evtConfig, config.btn?.close?.callback);
 
@@ -185,6 +186,8 @@ export const PopsPanel = {
       $mask: $mask!,
       $shadowContainer: $shadowContainer,
       $shadowRoot: $shadowRoot,
+      config: config,
+      destory: result.close,
     });
     // 拖拽
     if (config.drag) {
@@ -196,7 +199,6 @@ export const PopsPanel = {
         endCallBack: config.dragEndCallBack,
       });
     }
-    const result = PopsHandler.handleResultConfig(evtConfig);
 
     return {
       ...result,

package/src/components/prompt/index.ts

@@ -133,6 +133,7 @@ export const PopsPrompt = {
       $pops,
       $mask
     );
+    const result = PopsHandler.handleResultConfig(evtConfig);
     // 输入框赋值初始值
 
     $input.value = config.content.text;
@@ -188,6 +189,8 @@ export const PopsPrompt = {
       $mask: $mask!,
       $shadowContainer: $shadowContainer,
       $shadowRoot: $shadowRoot,
+      config: config,
+      destory: result.close,
     });
     // 拖拽
     if (config.drag) {
@@ -207,7 +210,6 @@ export const PopsPrompt = {
     if (config.content.select) {
       $input.select();
     }
-    const result = PopsHandler.handleResultConfig(evtConfig);
     return result;
   },
 };

package/src/components/rightClickMenu/defaultConfig.ts

@@ -98,5 +98,6 @@ export const PopsRightClickMenuDefaultConfig = (): DeepRequired<PopsRightClickMe
     beforeAppendToPageCallBack() {},
     limitPositionXInView: true,
     limitPositionYInView: true,
+    beforeShowCallBack() {},
   };
 };

package/src/components/rightClickMenu/index.ts

@@ -80,6 +80,8 @@ export const PopsRightClickMenu = {
           return;
         }
         if ($click.className && $click.className === "pops-shadow-container" && $click.shadowRoot != null) {
+          // pops的shadow-container
+          PopsContextMenu.shadowRootCheckClickEvent(event);
           return;
         }
         PopsContextMenu.closeAllMenu(PopsContextMenu.$el.$root);
@@ -92,7 +94,7 @@ export const PopsRightClickMenu = {
         if (!PopsContextMenu.$el.$root) {
           return;
         }
-        const $click = event.target as HTMLElement;
+        const $click = event.composedPath()[0] as HTMLElement;
         if ($click.closest(`.pops-${popsType}`)) {
           return;
         }
@@ -102,13 +104,13 @@ export const PopsRightClickMenu = {
        * 添加全局点击检测事件
        */
       addWindowCheckClickListener() {
-        popsDOMUtils.on(globalThis, "click touchstart", void 0, PopsContextMenu.windowCheckClickEvent, {
+        popsDOMUtils.on(globalThis, "click touchstart", PopsContextMenu.windowCheckClickEvent, {
           capture: true,
         });
         if (config.$target instanceof Node) {
           const $shadowRoot = config.$target.getRootNode();
           if ($shadowRoot instanceof ShadowRoot) {
-            popsDOMUtils.on($shadowRoot, "click touchstart", void 0, PopsContextMenu.shadowRootCheckClickEvent, {
+            popsDOMUtils.on($shadowRoot, "click touchstart", PopsContextMenu.shadowRootCheckClickEvent, {
               capture: true,
             });
           }
@@ -118,13 +120,13 @@ export const PopsRightClickMenu = {
        * 移除全局点击检测事件
        */
       removeWindowCheckClickListener() {
-        popsDOMUtils.off(globalThis, "click touchstart", void 0, PopsContextMenu.windowCheckClickEvent, {
+        popsDOMUtils.off(globalThis, "click touchstart", PopsContextMenu.windowCheckClickEvent, {
           capture: true,
         });
         if (config.$target instanceof Node) {
           const $shadowRoot = config.$target.getRootNode();
           if ($shadowRoot instanceof ShadowRoot) {
-            popsDOMUtils.off($shadowRoot, "click touchstart", void 0, PopsContextMenu.windowCheckClickEvent, {
+            popsDOMUtils.off($shadowRoot, "click touchstart", PopsContextMenu.windowCheckClickEvent, {
               capture: true,
             });
           }
@@ -135,7 +137,7 @@ export const PopsRightClickMenu = {
        * @param event
        * @param selectorTarget
        */
-      contextMenuEvent(event: PointerEvent, selectorTarget: NonNullable<PopsRightClickMenuConfig["$target"]>) {
+      async contextMenuEvent(event: PointerEvent, selectorTarget: NonNullable<PopsRightClickMenuConfig["$target"]>) {
         if (config.preventDefault) {
           popsDOMUtils.preventEvent(event);
         }
@@ -144,6 +146,10 @@ export const PopsRightClickMenu = {
           PopsContextMenu.closeAllMenu(PopsContextMenu.$el.$root);
         }
         selectorTarget = selectorTarget ?? config.$target;
+        const beforeShowCallBackResult = await config?.beforeShowCallBack(event);
+        if (typeof beforeShowCallBackResult === "boolean" && !beforeShowCallBackResult) {
+          return;
+        }
         const rootElement = PopsContextMenu.showMenu(event, config.data, selectorTarget);
         PopsContextMenu.$el.$root = rootElement;
         if (config.only) {
@@ -156,6 +162,10 @@ export const PopsRightClickMenu = {
             beforeRemoveCallBack(instCommonConfig) {
               PopsContextMenu.closeAllMenu(instCommonConfig.$pops);
             },
+            config: config,
+            destory: () => {
+              PopsContextMenu.closeAllMenu(rootElement);
+            },
           });
         }
       },
@@ -506,7 +516,8 @@ export const PopsRightClickMenu = {
             menuLiElement.appendChild(iconElement);
           }
           // 插入文字
-          menuLiElement.insertAdjacentHTML("beforeend", PopsSafeUtils.getSafeHTML(`<span>${item.text}</span>`));
+          const text = typeof item.text === "function" ? item.text() : item.text;
+          menuLiElement.insertAdjacentHTML("beforeend", PopsSafeUtils.getSafeHTML(`<span>${text}</span>`));
           // 如果存在子数据，显示
           if (item.item && Array.isArray(item.item)) {
             popsDOMUtils.addClassName(menuLiElement, `pops-${popsType}-item`);

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

@@ -41,7 +41,7 @@ export interface PopsRightClickMenuDataConfig {
   /**
    * 文字
    */
-  text: string | (() => string);
+  text: IFunction<string>;
   /**
    * 点击的回调函数
    * @param clickEvent 点击菜单的click事件
@@ -133,4 +133,11 @@ export interface PopsRightClickMenuConfig
    * @default true
    */
   limitPositionYInView?: boolean;
+  /**
+   * 菜单显示前的回调
+   * @returns
+   *
+   * + `false`：阻止默认行为（显示菜单）
+   */
+  beforeShowCallBack?(event: PointerEvent): IPromise<false | void>;
 }

package/src/components/searchSuggestion/index.ts

@@ -488,9 +488,9 @@ export const PopsSearchSuggestion = {
       setShowEvent(option: AddEventListenerOptions = defaultListenerOption) {
         /* 焦点|点击事件*/
         if (config.followPosition === "target") {
-          popsDOMUtils.on([config.$target], ["focus", "click"], void 0, SearchSuggestion.showEvent, option);
+          popsDOMUtils.on([config.$target], ["focus", "click"], SearchSuggestion.showEvent, option);
         } else if (config.followPosition === "input") {
-          popsDOMUtils.on([config.$inputTarget], ["focus", "click"], void 0, SearchSuggestion.showEvent, option);
+          popsDOMUtils.on([config.$inputTarget], ["focus", "click"], SearchSuggestion.showEvent, option);
         } else if (config.followPosition === "inputCursor") {
           popsDOMUtils.on([config.$inputTarget], ["focus", "click", "input"], SearchSuggestion.showEvent, option);
         } else {
@@ -502,15 +502,9 @@ export const PopsSearchSuggestion = {
        */
       removeShowEvent(option: AddEventListenerOptions = defaultListenerOption) {
         /* 焦点|点击事件*/
-        popsDOMUtils.off(
-          [config.$target, config.$inputTarget],
-          ["focus", "click"],
-          void 0,
-          SearchSuggestion.showEvent,
-          option
-        );
+        popsDOMUtils.off([config.$target, config.$inputTarget], ["focus", "click"], SearchSuggestion.showEvent, option);
         // 内容改变事件
-        popsDOMUtils.off([config.$inputTarget], ["input"], void 0, SearchSuggestion.showEvent, option);
+        popsDOMUtils.off([config.$inputTarget], ["input"], SearchSuggestion.showEvent, option);
       },
       /**
        * 隐藏搜索建议框的事件
@@ -541,7 +535,7 @@ export const PopsSearchSuggestion = {
         // 全局触摸屏点击事件
         if (Array.isArray(SearchSuggestion.selfDocument)) {
           SearchSuggestion.selfDocument.forEach(($checkParent) => {
-            popsDOMUtils.on($checkParent, ["click", "touchstart"], void 0, SearchSuggestion.hideEvent, option);
+            popsDOMUtils.on($checkParent, ["click", "touchstart"], SearchSuggestion.hideEvent, option);
           });
         } else {
           popsDOMUtils.on(SearchSuggestion.selfDocument, ["click", "touchstart"], SearchSuggestion.hideEvent, option);
@@ -553,16 +547,10 @@ export const PopsSearchSuggestion = {
       removeHideEvent(option: AddEventListenerOptions = defaultListenerOption) {
         if (Array.isArray(SearchSuggestion.selfDocument)) {
           SearchSuggestion.selfDocument.forEach(($checkParent) => {
-            popsDOMUtils.off($checkParent, ["click", "touchstart"], void 0, SearchSuggestion.hideEvent, option);
+            popsDOMUtils.off($checkParent, ["click", "touchstart"], SearchSuggestion.hideEvent, option);
           });
         } else {
-          popsDOMUtils.off(
-            SearchSuggestion.selfDocument,
-            ["click", "touchstart"],
-            void 0,
-            SearchSuggestion.hideEvent,
-            option
-          );
+          popsDOMUtils.off(SearchSuggestion.selfDocument, ["click", "touchstart"], SearchSuggestion.hideEvent, option);
         }
       },
       /**

package/src/components/tooltip/defaultConfig.ts

@@ -11,7 +11,7 @@ export const PopsTooltipDefaultConfig = (): DeepRequired<PopsToolTipConfig> => {
     isFixed: false,
     alwaysShow: false,
     onShowEventName: "mouseenter touchstart",
-    onCloseEventName: "mouseleave touchend",
+    onCloseEventName: "mouseleave touchend touchcancel",
     zIndex: 10000,
     only: false,
     eventOption: {

package/src/components/tooltip/index.ts

@@ -240,14 +240,14 @@ export class ToolTip {
       this.$data.config.otherDistance,
       event
     );
-    const positionKey = this.$data.config.position.toUpperCase() as any as keyof typeof positionInfo;
-    const positionDetail = positionInfo[positionKey];
-    if (positionDetail) {
-      this.$el.$toolTip.style.left = positionDetail.left + "px";
-      this.$el.$toolTip.style.top = positionDetail.top + "px";
-      this.$el.$toolTip.setAttribute("data-motion", positionDetail.motion);
+    const positionKey = this.$data.config.position.toUpperCase() as keyof typeof positionInfo;
+    const position = positionInfo[positionKey];
+    if (position) {
+      this.$el.$toolTip.style.left = position.left + "px";
+      this.$el.$toolTip.style.top = position.top + "px";
+      this.$el.$toolTip.setAttribute("data-motion", position.motion);
 
-      this.$el.$arrow.setAttribute("data-position", positionDetail.arrow);
+      this.$el.$arrow.setAttribute("data-position", position.arrow);
     } else {
       console.error("不存在该位置", this.$data.config.position);
     }
@@ -358,9 +358,12 @@ export class ToolTip {
    * 取消绑定 显示事件
    */
   offShowEvent() {
-    popsDOMUtils.off(this.$data.config.$target, this.$data.config.onShowEventName, this.show, {
-      capture: true,
-    });
+    popsDOMUtils.off(
+      this.$data.config.$target,
+      this.$data.config.onShowEventName,
+      this.show,
+      this.$data.config.eventOption
+    );
   }
   /**
    * 关闭提示框
@@ -428,22 +431,25 @@ export class ToolTip {
    * 取消绑定 关闭事件
    */
   offCloseEvent() {
-    popsDOMUtils.off(this.$data.config.$target, this.$data.config.onCloseEventName, this.close, {
-      capture: true,
-    });
+    popsDOMUtils.off(
+      this.$data.config.$target,
+      this.$data.config.onCloseEventName,
+      this.close,
+      this.$data.config.eventOption
+    );
   }
   /**
    * 销毁元素
    */
   destory() {
     if (this.$el.$toolTip) {
-      this.$el.$shadowRoot.removeChild(this.$el.$toolTip);
+      this.$el.$toolTip.remove();
     }
-    // @ts-ignore
+    // @ts-expect-error
     this.$el.$toolTip = null;
-    // @ts-ignore
+    // @ts-expect-error
     this.$el.$arrow = null;
-    // @ts-ignore
+    // @ts-expect-error
     this.$el.$content = null;
   }
   /**
@@ -496,7 +502,7 @@ export class ToolTip {
     );
   }
   /**
-   * 取消监听鼠标|触摸事件
+   * 取消监听事件 - 鼠标|触摸
    */
   offToolTipMouseEnterEvent() {
     popsDOMUtils.off(
@@ -507,30 +513,30 @@ export class ToolTip {
     );
   }
   /**
-   * 鼠标|触摸离开事件
+   * 离开事件 - 鼠标|触摸
    */
   toolTipMouseLeaveEvent(event: MouseEvent | PointerEvent) {
     this.close(event);
     // this.$el.$toolTip.style.animationPlayState = "running";
   }
   /**
-   * 监听鼠标|触摸离开事件
+   * 监听离开事件 - 鼠标|触摸
    */
   onToolTipMouseLeaveEvent() {
     popsDOMUtils.on(
       this.$el.$toolTip,
-      "mouseleave touchend",
+      "mouseleave touchend touchcancel",
       this.toolTipMouseLeaveEvent,
       this.$data.config.eventOption
     );
   }
   /**
-   * 取消监听鼠标|触摸离开事件
+   * 取消监听离开事件 - 鼠标|触摸
    */
   offToolTipMouseLeaveEvent() {
     popsDOMUtils.off(
       this.$el.$toolTip,
-      "mouseleave touchend",
+      "mouseleave touchend touchcancel",
       this.toolTipMouseLeaveEvent,
       this.$data.config.eventOption
     );
@@ -559,6 +565,15 @@ export const PopsTooltip = {
     }
     config = PopsHandler.handleOnly(popsType, config);
 
+    if (config.position === "follow") {
+      config.onShowEventName = config.onShowEventName.trim();
+      const showEventNameSplit = config.onShowEventName.split(" ");
+      ["mousemove", "touchmove"].forEach((it) => {
+        if (showEventNameSplit.includes(it)) return;
+        config.onShowEventName += ` ${it}`;
+      });
+    }
+
     const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
     PopsHandler.handleInit($shadowRoot, [
       {

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

@@ -18,35 +18,34 @@ export interface PopsToolTipConfig
    */
   content: string | (() => string);
   /**
-   * 是否比较获取到的content的内容是否改变
+   * 是否比较获取到的`content`的内容是否改变
    *
-   * 如果未改变，则在触发.show时不修改内容
+   * 如果未改变，则在触发`.show`时不修改内容
    * @default false
    */
   isDiffContent?: boolean;
   /**
    * 位置
-   * + `follow` 跟随鼠标|触摸位置移动
+   * + `follow` 跟随（鼠标|触摸）的位置而移动
    * @default "top"
    */
   position?: PopsTooltipPosition;
   /**
    * 自定义className
    *
-   * + `github-tooltip` github的样式
+   * + `github-tooltip`：github的样式
    * @default ""
    */
   className?: PopsPanelGeneralConfig<any>["className"];
   /**
-   * 是否使用fixed定位，false则是absolute定位
-   *
+   * 是否使用`fixed`定位，`false`则是`absolute`定位
    * @default false
    */
   isFixed?: boolean;
   /**
    * 是否总是显示，默认为false
-   * + true 设置的onShowEventName、onCloseEventName将无效
-   *        返回提供show和close函数，取消on和off
+   * + true 设置的`onShowEventName`、`onCloseEventName`将无效
+   *        返回提供`show`和`close`函数，取消`on`和`off`
    * + false 事件触发才显示
    */
   alwaysShow?: boolean;
@@ -56,13 +55,15 @@ export interface PopsToolTipConfig
    */
   delayCloseTime?: number;
   /**
-   * 触发显示事件的名称，默认mouseenter touchstart，如果是多个事件，按空格分割
+   * 触发显示事件的名称，默认`mouseenter`、`touchstart`，如果是多个事件，按空格分割
+   *
+   * 如果`position`为`follow`，则添加`mousemove`、`touchmove`事件监听
    * @default  "mouseenter touchstart"
    */
   onShowEventName?: string;
   /**
-   * 触发关闭事件的名称，默认mouseleave touchend，如果是多个事件，按空格分割
-   * @default  "mouseleave touchend"
+   * 触发关闭事件的名称，默认`mouseleave`、`touchend`、`touchcancel`，如果是多个事件，按空格分割
+   * @default  "mouseleave touchend touchcancel"
    */
   onCloseEventName?: string;
   /**
@@ -111,9 +112,9 @@ export interface PopsToolTipConfig
   arrowDistance?: number;
   /**
    * 其它的距离(px)
-   * + 当position为left或者right，这个距离是上、下距离
-   * + 当position为top或者bottom，这个距离是左、右距离
-   * + 当position为follow，这个距离是上、左距离
+   * + 当`position`为`left`或者`right`，这个距离是上、下距离
+   * + 当`position`为`top`或者`bottom`，这个距离是左、右距离
+   * + 当`position`为`follow`，这个距离是上、左距离
    * @default 0
    */
   otherDistance?: number;