@whitesev/pops 4.2.0 → 4.2.2

package/dist/index.umd.js

@@ -4,7 +4,7 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.pops = factory());
 })(this, (function () { 'use strict';
 
-  const version = "4.2.0";
+  const version = "4.2.2";
 
   const GlobalConfig = {
       config: {},
@@ -248,6 +248,24 @@
       },
   };
 
+  /**
+   * 通用的CSS类名
+   */
+  const PopsCommonCSSClassName = {
+      flexCenter: "pops-flex-items-center",
+      flexYCenter: "pops-flex-y-center",
+      flexXCenter: "pops-flex-x-center",
+      hide: "pops-hide",
+      hideImportant: "pops-hide-important",
+      noBorder: "pops-no-border",
+      noBorderImportant: "pops-no-border-important",
+      userSelectNone: "pops-user-select-none",
+      lineHeightCenter: "pops-line-height-center",
+      widthFill: "pops-width-fill",
+      textIsDisabled: "pops-text-is-disabled",
+      textIsDisabledImportant: "pops-text-is-disabled-important",
+  };
+
   const OriginPrototype = {
       Object: {
           defineProperty: Object.defineProperty,
@@ -297,6 +315,30 @@
       },
   };
 
+  const PopsSafeUtils = {
+      /**
+       * 获取安全的html
+       */
+      getSafeHTML(text) {
+          if (window.trustedTypes) {
+              const policy = window.trustedTypes.createPolicy("safe-innerHTML", {
+                  createHTML: (html) => html,
+              });
+              return policy.createHTML(text);
+          }
+          else {
+              return text;
+          }
+      },
+      /**
+       * 设置安全的html
+       */
+      setSafeHTML($el, text) {
+          // 创建 TrustedHTML 策略（需 CSP 允许）
+          $el.innerHTML = this.getSafeHTML(text);
+      },
+  };
+
   const n$1="clientX",e$2="clientY",t$1=16,c$3="start",o$1="move",s$1="cancel",u$3="end",a$2="left",i$3="right",r$4="up",d$1="down",m$2={4:"start",5:"move",1:"end",3:"cancel"};function v$1(n){return m$2[n]}function b(n,e,t){const c={1:{0:{move:4},4:{move:5,end:1,cancel:3},5:{move:5,end:1,cancel:3}},0:{4:{move:2,end:1,cancel:3},5:{start:2,move:2,end:1,cancel:3}}}[Number(n)][e];return void 0!==c&&c[t]||0}function g$1(n){[1,3,2].includes(n.state)&&(n.state=0);}function h$3(n){return [5,1,3].includes(n)}function j(n){if(n.disabled)return n.state=0,true}function O(n,e){return Object.assign(Object.assign(Object.assign({},n),e),{state:0,disabled:false})}function p$3(n){return Math.round(100*n)/100}
 
   var x=r=>Math.sqrt(r.x*r.x+r.y*r.y),y=(r,a)=>r.x*a.x+r.y*a.y,e$1=(r,a)=>{var t=x(r)*x(a);if(0===t)return 0;var h=y(r,a)/t;return h>1&&(h=1),Math.acos(h)},n=(r,a)=>r.x*a.y-a.x*r.y,o=r=>r/Math.PI*180,s=(r,a)=>{var t=e$1(r,a);return n(r,a)>0&&(t*=-1),o(t)},u$2=(x,y)=>{if(0!==x||0!==y)return Math.abs(x)>=Math.abs(y)?0<x?i$3:a$2:0<y?d$1:r$4};
@@ -766,48 +808,6 @@
   }
   const popsUtils = new PopsUtils();
 
-  const PopsSafeUtils = {
-      /**
-       * 获取安全的html
-       */
-      getSafeHTML(text) {
-          if (window.trustedTypes) {
-              const policy = window.trustedTypes.createPolicy("safe-innerHTML", {
-                  createHTML: (html) => html,
-              });
-              return policy.createHTML(text);
-          }
-          else {
-              return text;
-          }
-      },
-      /**
-       * 设置安全的html
-       */
-      setSafeHTML($el, text) {
-          // 创建 TrustedHTML 策略（需 CSP 允许）
-          $el.innerHTML = this.getSafeHTML(text);
-      },
-  };
-
-  /**
-   * 通用的CSS类名
-   */
-  const PopsCommonCSSClassName = {
-      flexCenter: "pops-flex-items-center",
-      flexYCenter: "pops-flex-y-center",
-      flexXCenter: "pops-flex-x-center",
-      hide: "pops-hide",
-      hideImportant: "pops-hide-important",
-      noBorder: "pops-no-border",
-      noBorderImportant: "pops-no-border-important",
-      userSelectNone: "pops-user-select-none",
-      lineHeightCenter: "pops-line-height-center",
-      widthFill: "pops-width-fill",
-      textIsDisabled: "pops-text-is-disabled",
-      textIsDisabledImportant: "pops-text-is-disabled-important",
-  };
-
   /**
    * 存储在元素属性上的事件名
    */
@@ -820,7 +820,7 @@
            * @param startIndex
            * @param option
            */
-          function getOption(args, startIndex, option) {
+          const getOption = function (args, startIndex, option) {
               const currentParam = args[startIndex];
               if (typeof currentParam === "boolean") {
                   option.capture = currentParam;
@@ -842,7 +842,7 @@
                   option.isComposedPath = currentParam.isComposedPath;
               }
               return option;
-          }
+          };
           const that = this;
           // eslint-disable-next-line prefer-rest-params
           const args = arguments;
@@ -857,8 +857,7 @@
           }
           let $elList = [];
           if (element instanceof NodeList || Array.isArray(element)) {
-              element = element;
-              $elList = [...element];
+              $elList = $elList.concat(Array.from(element));
           }
           else {
               $elList.push(element);
@@ -866,15 +865,15 @@
           // 事件名
           let eventTypeList = [];
           if (Array.isArray(eventType)) {
-              eventTypeList = eventTypeList.concat(eventType.filter((eventTypeItem) => typeof eventTypeItem === "string" && eventTypeItem.toString() !== ""));
+              eventTypeList = eventTypeList.concat(eventType.filter((it) => typeof it === "string" && it.toString() !== ""));
           }
           else if (typeof eventType === "string") {
-              eventTypeList = eventTypeList.concat(eventType.split(" ").filter((eventTypeItem) => eventTypeItem !== ""));
+              eventTypeList = eventTypeList.concat(eventType.split(" ").filter((it) => it !== ""));
           }
           // 子元素选择器
           let selectorList = [];
           if (Array.isArray(selector)) {
-              selectorList = selectorList.concat(selector.filter((selectorItem) => typeof selectorItem === "string" && selectorItem.toString() !== ""));
+              selectorList = selectorList.concat(selector.filter((it) => typeof it === "string" && it.toString() !== ""));
           }
           else if (typeof selector === "string") {
               selectorList.push(selector);
@@ -898,83 +897,105 @@
               // 这是存在selector的情况
               listenerOption = getOption(args, 4, listenerOption);
           }
-          /**
-           * 如果是once，那么删除该监听和元素上的事件和监听
-           */
-          function checkOptionOnceToRemoveEventListener() {
-              if (listenerOption.once) {
-                  that.off(element, eventType, selector, callback, option);
-              }
-          }
-          $elList.forEach((elementItem) => {
-              /**
-               * 事件回调
-               * @param event
-               */
-              function domUtilsEventCallBack(event) {
-                  if (selectorList.length) {
-                      // 存在子元素选择器
-                      // 这时候的this和target都是子元素选择器的元素
-                      let eventTarget = listenerOption.isComposedPath
-                          ? event.composedPath()[0]
-                          : event.target;
-                      let totalParent = elementItem;
-                      if (popsUtils.isWin(totalParent)) {
-                          if (totalParent === PopsCore.document) {
-                              totalParent = PopsCore.document.documentElement;
-                          }
-                      }
-                      const findValue = selectorList.find((selectorItem) => {
-                          // 判断目标元素是否匹配选择器
-                          if (that.matches(eventTarget, selectorItem)) {
-                              // 当前目标可以被selector所匹配到
-                              return true;
-                          }
-                          // 在上层与主元素之间寻找可以被selector所匹配到的
-                          const $closestMatches = that.closest(eventTarget, selectorItem);
-                          if ($closestMatches && totalParent?.contains($closestMatches)) {
-                              eventTarget = $closestMatches;
-                              return true;
-                          }
-                          return false;
-                      });
-                      if (findValue) {
-                          // 这里尝试使用defineProperty修改event的target值
-                          try {
-                              OriginPrototype.Object.defineProperty(event, "target", {
-                                  get() {
-                                      return eventTarget;
-                                  },
-                              });
+          $elList.forEach(($elItem) => {
+              // 遍历事件名设置元素事件
+              eventTypeList.forEach((eventName) => {
+                  /**
+                   * 如果是option.once，那么删除该监听和元素上的事件和监听
+                   */
+                  const checkOptionOnceToRemoveEventListener = () => {
+                      if (listenerOption.once) {
+                          this.off($elItem, eventName, selector, callback, option);
+                      }
+                  };
+                  /**
+                   * 事件回调
+                   * @param event
+                   */
+                  const handlerCallBack = function (event) {
+                      let call_this = void 0;
+                      let call_event = void 0;
+                      let call_$selector = void 0;
+                      let execCallback = false;
+                      if (selectorList.length) {
+                          // 存在子元素选择器
+                          // 这时候的this和target都是子元素选择器的元素
+                          let $target;
+                          if (listenerOption.isComposedPath) {
+                              // 可能为空
+                              const composedPath = event.composedPath();
+                              if (!composedPath.length && event.target) {
+                                  composedPath.push(event.target);
+                              }
+                              $target = composedPath[0];
                           }
-                          catch {
-                              // 忽略
+                          else {
+                              $target = event.target;
+                          }
+                          let $parent = $elItem;
+                          if (popsUtils.isWin($parent)) {
+                              // window和document共用一个对象
+                              // 这样就能处理子元素选择器无法匹配的问题
+                              $parent = PopsCore.document.documentElement;
+                          }
+                          const findValue = selectorList.find((selectors) => {
+                              // 判断目标元素是否匹配选择器
+                              if (that.matches($target, selectors)) {
+                                  // 当前目标可以被selector所匹配到
+                                  return true;
+                              }
+                              // 在上层与主元素之间寻找可以被selector所匹配到的
+                              const $closestMatches = that.closest($target, selectors);
+                              if ($closestMatches && $parent?.contains?.($closestMatches)) {
+                                  $target = $closestMatches;
+                                  return true;
+                              }
+                              return false;
+                          });
+                          if (findValue) {
+                              // 这里尝试使用defineProperty修改event的target值
+                              try {
+                                  OriginPrototype.Object.defineProperty(event, "target", {
+                                      get() {
+                                          return $target;
+                                      },
+                                  });
+                                  // oxlint-disable-next-line no-empty
+                              }
+                              catch { }
+                              execCallback = true;
+                              call_this = $target;
+                              call_event = event;
+                              call_$selector = $target;
                           }
-                          listenerCallBack.call(eventTarget, event, eventTarget);
+                      }
+                      else {
+                          execCallback = true;
+                          call_this = $elItem;
+                          call_event = event;
+                      }
+                      if (execCallback) {
+                          const result = listenerCallBack.call(call_this, call_event, call_$selector);
                           checkOptionOnceToRemoveEventListener();
+                          if (typeof result === "boolean" && !result) {
+                              return false;
+                          }
                       }
-                  }
-                  else {
-                      // 这时候的this指向监听的元素
-                      listenerCallBack.call(elementItem, event);
-                      checkOptionOnceToRemoveEventListener();
-                  }
-              }
-              // 遍历事件名设置元素事件
-              eventTypeList.forEach((eventName) => {
-                  elementItem.addEventListener(eventName, domUtilsEventCallBack, listenerOption);
+                  };
+                  // add listener
+                  $elItem.addEventListener(eventName, handlerCallBack, listenerOption);
                   // 获取对象上的事件
-                  const elementEvents = Reflect.get(elementItem, SymbolEvents) || {};
+                  const elementEvents = Reflect.get($elItem, SymbolEvents) || {};
                   // 初始化对象上的xx事件
                   elementEvents[eventName] = elementEvents[eventName] || [];
                   elementEvents[eventName].push({
                       selector: selectorList,
                       option: listenerOption,
-                      callback: domUtilsEventCallBack,
-                      originCallBack: listenerCallBack,
+                      handlerCallBack: handlerCallBack,
+                      callback: listenerCallBack,
                   });
                   // 覆盖事件
-                  Reflect.set(elementItem, SymbolEvents, elementEvents);
+                  Reflect.set($elItem, SymbolEvents, elementEvents);
               });
           });
           return {
@@ -987,11 +1008,11 @@
               },
               /**
                * 主动触发事件
-               * @param details 赋予触发的Event的额外属性，如果是Event类型，那么将自动代替默认new的Event对象
-               * @param useDispatchToEmit 是否使用dispatchEvent来触发事件，默认true，如果为false，则直接调用callback，但是这种会让使用了selectorTarget的没有值
+               * @param extraDetails 赋予触发的Event的额外属性，如果是Event类型，那么将自动代替默认new的Event对象
+               * @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件，默认true，如果为false，则直接调用callback，但是这种会让使用了`$selector`的没有值
                */
-              emit: (details, useDispatchToEmit) => {
-                  that.emit($elList, eventTypeList, details, useDispatchToEmit);
+              emit: (extraDetails, useDispatchToTriggerEvent) => {
+                  that.emit($elList, eventTypeList, extraDetails, useDispatchToTriggerEvent);
               },
           };
       }
@@ -1002,7 +1023,7 @@
            * @param startIndex
            * @param option
            */
-          function getOption(args1, startIndex, option) {
+          const getOption = function (args1, startIndex, option) {
               const currentParam = args1[startIndex];
               if (typeof currentParam === "boolean") {
                   option.capture = currentParam;
@@ -1011,12 +1032,12 @@
                   option.capture = currentParam.capture;
               }
               return option;
-          }
-          const DOMUtilsContext = this;
+          };
+          const that = this;
           // eslint-disable-next-line prefer-rest-params
           const args = arguments;
           if (typeof element === "string") {
-              element = DOMUtilsContext.selectorAll(element);
+              element = that.selectorAll(element);
           }
           if (element == null) {
               return;
@@ -1024,22 +1045,22 @@
           let $elList = [];
           if (element instanceof NodeList || Array.isArray(element)) {
               element = element;
-              $elList = $elList.concat(element);
+              $elList = $elList.concat(Array.from(element));
           }
           else {
               $elList.push(element);
           }
           let eventTypeList = [];
           if (Array.isArray(eventType)) {
-              eventTypeList = eventTypeList.concat(eventType.filter((eventTypeItem) => typeof eventTypeItem === "string" && eventTypeItem.toString() !== ""));
+              eventTypeList = eventTypeList.concat(eventType.filter((it) => typeof it === "string" && it.toString() !== ""));
           }
           else if (typeof eventType === "string") {
-              eventTypeList = eventTypeList.concat(eventType.split(" ").filter((eventTypeItem) => eventTypeItem !== ""));
+              eventTypeList = eventTypeList.concat(eventType.split(" ").filter((it) => it !== ""));
           }
           // 子元素选择器
           let selectorList = [];
           if (Array.isArray(selector)) {
-              selectorList = selectorList.concat(selector.filter((selectorItem) => typeof selectorItem === "string" && selectorItem.toString() !== ""));
+              selectorList = selectorList.concat(selector.filter((it) => typeof it === "string" && it.toString() !== ""));
           }
           else if (typeof selector === "string") {
               selectorList.push(selector);
@@ -1068,36 +1089,39 @@
               // 目标函数、事件名、回调函数、事件配置、过滤函数
               filter = option;
           }
-          $elList.forEach((elementItem) => {
+          $elList.forEach(($elItem) => {
               // 获取对象上的事件
-              const elementEvents = Reflect.get(elementItem, SymbolEvents) || {};
+              const elementEvents = Reflect.get($elItem, SymbolEvents) || {};
               eventTypeList.forEach((eventName) => {
                   const handlers = elementEvents[eventName] || [];
-                  const filterHandler = typeof filter === "function" ? handlers.filter(filter) : handlers;
-                  for (let index = 0; index < filterHandler.length; index++) {
-                      const handler = filterHandler[index];
+                  // 过滤出需要删除的事件
+                  const handlersFiltered = typeof filter === "function" ? handlers.filter(filter) : handlers;
+                  for (let index = 0; index < handlersFiltered.length; index++) {
+                      const handler = handlersFiltered[index];
+                      // 过滤出的事件再根据下面的条件进行判断处理移除
+                      // 1. callback内存地址必须相同
+                      // 2. selector必须相同
+                      // 3. option.capture必须相同
                       let flag = true;
-                      if (flag && listenerCallBack && handler.originCallBack !== listenerCallBack) {
-                          // callback不同
+                      if (flag && listenerCallBack && handler.callback !== listenerCallBack) {
                           flag = false;
                       }
                       if (flag && selectorList.length && Array.isArray(handler.selector)) {
                           if (JSON.stringify(handler.selector) !== JSON.stringify(selectorList)) {
-                              // 子元素选择器不同
                               flag = false;
                           }
                       }
                       if (flag &&
                           typeof handler.option.capture === "boolean" &&
                           listenerOption.capture !== handler.option.capture) {
-                          // 事件的配置项不同
                           flag = false;
                       }
                       if (flag) {
-                          elementItem.removeEventListener(eventName, handler.callback, handler.option);
-                          const findIndex = handlers.findIndex((item) => item === handler);
-                          if (findIndex !== -1) {
-                              handlers.splice(findIndex, 1);
+                          $elItem.removeEventListener(eventName, handler.handlerCallBack, handler.option);
+                          for (let i = handlers.length - 1; i >= 0; i--) {
+                              if (handlers[i] === handler) {
+                                  handlers.splice(i, 1);
+                              }
                           }
                       }
                   }
@@ -1106,7 +1130,7 @@
                       popsUtils.delete(elementEvents, eventType);
                   }
               });
-              Reflect.set(elementItem, SymbolEvents, elementEvents);
+              Reflect.set($elItem, SymbolEvents, elementEvents);
           });
       }
       /**
@@ -1490,11 +1514,11 @@
            * 阻止事件的默认行为发生，并阻止事件传播
            */
           const stopEvent = (event, onlyStopPropagation) => {
+              // 停止事件的传播，阻止它继续向更上层的元素冒泡，事件将不会再传播给其他的元素
+              event?.stopPropagation();
+              // 阻止事件传播，并且还能阻止元素上的其他事件处理程序被触发
+              event?.stopImmediatePropagation();
               if (typeof onlyStopPropagation === "boolean" && onlyStopPropagation) {
-                  // 停止事件的传播，阻止它继续向更上层的元素冒泡，事件将不会再传播给其他的元素
-                  event?.stopPropagation();
-                  // 阻止事件传播，并且还能阻止元素上的其他事件处理程序被触发
-                  event?.stopImmediatePropagation();
                   return;
               }
               // 阻止事件的默认行为发生。例如，当点击一个链接时，浏览器会默认打开链接的URL，或者在输入框内输入文字