@whitesev/pops 3.0.2 → 3.1.0

package/dist/index.esm.js

@@ -870,22 +870,25 @@ class PopsDOMUtilsEvent {
             }
             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;
+            return {
+                off() { },
+                emit() { },
+            };
         }
-        let elementList = [];
+        let $elList = [];
         if (element instanceof NodeList || Array.isArray(element)) {
             element = element;
-            elementList = [...element];
+            $elList = [...element];
         }
         else {
-            elementList.push(element);
+            $elList.push(element);
         }
         // 事件名
         let eventTypeList = [];
@@ -927,10 +930,10 @@ class PopsDOMUtilsEvent {
          */
         function checkOptionOnceToRemoveEventListener() {
             if (listenerOption.once) {
-                DOMUtilsContext.off(element, eventType, selector, callback, option);
+                that.off(element, eventType, selector, callback, option);
             }
         }
-        elementList.forEach((elementItem) => {
+        $elList.forEach((elementItem) => {
             /**
              * 事件回调
              * @param event
@@ -950,12 +953,12 @@ class PopsDOMUtilsEvent {
                     }
                     const findValue = selectorList.find((selectorItem) => {
                         // 判断目标元素是否匹配选择器
-                        if (DOMUtilsContext.matches(eventTarget, selectorItem)) {
+                        if (that.matches(eventTarget, selectorItem)) {
                             // 当前目标可以被selector所匹配到
                             return true;
                         }
                         // 在上层与主元素之间寻找可以被selector所匹配到的
-                        const $closestMatches = DOMUtilsContext.closest(eventTarget, selectorItem);
+                        const $closestMatches = that.closest(eventTarget, selectorItem);
                         if ($closestMatches && totalParent?.contains($closestMatches)) {
                             eventTarget = $closestMatches;
                             return true;
@@ -1001,6 +1004,23 @@ class PopsDOMUtilsEvent {
                 Reflect.set(elementItem, SymbolEvents, elementEvents);
             });
         });
+        return {
+            /**
+             * 取消绑定的监听事件
+             * @param filter (可选)过滤函数，对元素属性上的事件进行过滤出想要删除的事件
+             */
+            off: (filter) => {
+                that.off($elList, eventTypeList, selectorList, listenerCallBack, listenerOption, filter);
+            },
+            /**
+             * 主动触发事件
+             * @param details 赋予触发的Event的额外属性，如果是Event类型，那么将自动代替默认new的Event对象
+             * @param useDispatchToEmit 是否使用dispatchEvent来触发事件，默认true，如果为false，则直接调用callback，但是这种会让使用了selectorTarget的没有值
+             */
+            emit: (details, useDispatchToEmit) => {
+                that.emit($elList, eventTypeList, details, useDispatchToEmit);
+            },
+        };
     }
     off(element, eventType, selector, callback, option, filter) {
         /**
@@ -1178,11 +1198,11 @@ class PopsDOMUtilsEvent {
      * 等待文档加载完成后执行指定的函数
      * @param callback 需要执行的函数
      * @example
-     * DOMUtils.ready(function(){
+     * DOMUtils.onReady(function(){
      *   console.log("文档加载完毕")
      * })
      */
-    ready(callback) {
+    onReady(callback) {
         const that = this;
         if (typeof callback !== "function") {
             return;
@@ -1255,16 +1275,16 @@ class PopsDOMUtilsEvent {
      * @param element 需要触发的元素|元素数组|window
      * @param eventType 需要触发的事件
      * @param details 赋予触发的Event的额外属性，如果是Event类型，那么将自动代替默认new的Event对象
-     * @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件,默认true
+     * @param useDispatchToEmitEvent 是否使用dispatchEvent来触发事件,默认true
      * @example
      * // 触发元素a.xx的click事件
-     * DOMUtils.trigger(document.querySelector("a.xx"),"click")
-     * DOMUtils.trigger("a.xx","click")
+     * DOMUtils.emit(document.querySelector("a.xx"),"click")
+     * DOMUtils.emit("a.xx","click")
      * // 触发元素a.xx的click、tap、hover事件
-     * DOMUtils.trigger(document.querySelector("a.xx"),"click tap hover")
-     * DOMUtils.trigger("a.xx",["click","tap","hover"])
+     * DOMUtils.emit(document.querySelector("a.xx"),"click tap hover")
+     * DOMUtils.emit("a.xx",["click","tap","hover"])
      */
-    trigger(element, eventType, details, useDispatchToTriggerEvent = true) {
+    emit(element, eventType, details, useDispatchToEmitEvent = true) {
         if (typeof element === "string") {
             element = PopsCore.document.querySelector(element);
         }
@@ -1302,7 +1322,7 @@ class PopsDOMUtilsEvent {
                         });
                     }
                 }
-                if (useDispatchToTriggerEvent == false && _eventType_ in events) {
+                if (useDispatchToEmitEvent == false && _eventType_ in events) {
                     events[_eventType_].forEach((eventsItem) => {
                         eventsItem.callback(event);
                     });
@@ -1318,7 +1338,7 @@ class PopsDOMUtilsEvent {
      * @param element 目标元素
      * @param handler （可选）事件处理函数
      * @param details （可选）赋予触发的Event的额外属性
-     * @param useDispatchToTriggerEvent （可选）是否使用dispatchEvent来触发事件,默认true
+     * @param useDispatchToEmitEvent （可选）是否使用dispatchEvent来触发事件,默认true
      * @example
      * // 触发元素a.xx的click事件
      * DOMUtils.click(document.querySelector("a.xx"))
@@ -1327,7 +1347,7 @@ class PopsDOMUtilsEvent {
      *  console.log("触发click事件成功")
      * })
      * */
-    click(element, handler, details, useDispatchToTriggerEvent) {
+    click(element, handler, details, useDispatchToEmitEvent) {
         const DOMUtilsContext = this;
         if (typeof element === "string") {
             element = PopsCore.document.querySelector(element);
@@ -1336,7 +1356,7 @@ class PopsDOMUtilsEvent {
             return;
         }
         if (handler == null) {
-            DOMUtilsContext.trigger(element, "click", details, useDispatchToTriggerEvent);
+            DOMUtilsContext.emit(element, "click", details, useDispatchToEmitEvent);
         }
         else {
             DOMUtilsContext.on(element, "click", null, handler);
@@ -1347,7 +1367,7 @@ class PopsDOMUtilsEvent {
      * @param element 目标元素
      * @param handler （可选）事件处理函数
      * @param details （可选）赋予触发的Event的额外属性
-     * @param useDispatchToTriggerEvent （可选）是否使用dispatchEvent来触发事件,默认true
+     * @param useDispatchToEmitEvent （可选）是否使用dispatchEvent来触发事件,默认true
      * @example
      * // 触发元素a.xx的blur事件
      * DOMUtils.blur(document.querySelector("a.xx"))
@@ -1356,7 +1376,7 @@ class PopsDOMUtilsEvent {
      *  console.log("触发blur事件成功")
      * })
      * */
-    blur(element, handler, details, useDispatchToTriggerEvent) {
+    blur(element, handler, details, useDispatchToEmitEvent) {
         const DOMUtilsContext = this;
         if (typeof element === "string") {
             element = PopsCore.document.querySelector(element);
@@ -1365,7 +1385,7 @@ class PopsDOMUtilsEvent {
             return;
         }
         if (handler === null) {
-            DOMUtilsContext.trigger(element, "blur", details, useDispatchToTriggerEvent);
+            DOMUtilsContext.emit(element, "blur", details, useDispatchToEmitEvent);
         }
         else {
             DOMUtilsContext.on(element, "blur", null, handler);
@@ -1376,7 +1396,7 @@ class PopsDOMUtilsEvent {
      * @param element 目标元素
      * @param handler （可选）事件处理函数
      * @param details （可选）赋予触发的Event的额外属性
-     * @param useDispatchToTriggerEvent （可选）是否使用dispatchEvent来触发事件,默认true
+     * @param useDispatchToEmitEvent （可选）是否使用dispatchEvent来触发事件,默认true
      * @example
      * // 触发元素a.xx的focus事件
      * DOMUtils.focus(document.querySelector("a.xx"))
@@ -1385,7 +1405,7 @@ class PopsDOMUtilsEvent {
      *  console.log("触发focus事件成功")
      * })
      * */
-    focus(element, handler, details, useDispatchToTriggerEvent) {
+    focus(element, handler, details, useDispatchToEmitEvent) {
         const DOMUtilsContext = this;
         if (typeof element === "string") {
             element = PopsCore.document.querySelector(element);
@@ -1394,7 +1414,7 @@ class PopsDOMUtilsEvent {
             return;
         }
         if (handler == null) {
-            DOMUtilsContext.trigger(element, "focus", details, useDispatchToTriggerEvent);
+            DOMUtilsContext.emit(element, "focus", details, useDispatchToEmitEvent);
         }
         else {
             DOMUtilsContext.on(element, "focus", null, handler);
@@ -1414,7 +1434,7 @@ class PopsDOMUtilsEvent {
      *   console.log("移入/移除");
      * })
      */
-    hover(element, handler, option) {
+    onHover(element, handler, option) {
         const DOMUtilsContext = this;
         if (typeof element === "string") {
             element = PopsCore.document.querySelector(element);
@@ -1440,7 +1460,7 @@ class PopsDOMUtilsEvent {
      *   console.log("按键松开");
      * })
      */
-    keyup(target, handler, option) {
+    onKeyup(target, handler, option) {
         const DOMUtilsContext = this;
         if (target == null) {
             return;
@@ -1465,7 +1485,7 @@ class PopsDOMUtilsEvent {
      *   console.log("按键按下");
      * })
      */
-    keydown(target, handler, option) {
+    onKeydown(target, handler, option) {
         const DOMUtilsContext = this;
         if (target == null) {
             return;
@@ -1490,7 +1510,7 @@ class PopsDOMUtilsEvent {
      *   console.log("按键按下");
      * })
      */
-    keypress(target, handler, option) {
+    onKeypress(target, handler, option) {
         const DOMUtilsContext = this;
         if (target == null) {
             return;
@@ -2549,6 +2569,9 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
      * 监input、textarea的输入框值改变的事件
      */
     onInput($el, callback, option) {
+        /**
+         * 是否正在输入中
+         */
         let isComposite = false;
         const __callback = async (event) => {
             if (isComposite)
@@ -2560,18 +2583,18 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
         };
         const __composition_end_callback = () => {
             isComposite = false;
-            this.trigger($el, "input", {
+            this.emit($el, "input", {
                 isComposite,
             });
         };
-        this.on($el, "input", __callback, option);
-        this.on($el, "compositionstart", __composition_start_callback, option);
-        this.on($el, "compositionend", __composition_end_callback, option);
+        const inputListener = this.on($el, "input", __callback, option);
+        const compositionStartListener = this.on($el, "compositionstart", __composition_start_callback, option);
+        const compositionEndListener = this.on($el, "compositionend", __composition_end_callback, option);
         return {
             off: () => {
-                this.off($el, "input", __callback, option);
-                this.off($el, "compositionstart", __composition_start_callback, option);
-                this.off($el, "compositionend", __composition_end_callback, option);
+                inputListener.off();
+                compositionStartListener.off();
+                compositionEndListener.off();
             },
         };
     }
@@ -3308,7 +3331,7 @@ const PopsInstanceUtils = {
                 popsDOMUtils.on($pops, popsDOMUtils.getTransitionEndNameList(), closeCallBack);
                 const popsTransForm = getComputedStyle($pops).transform;
                 if (popsTransForm !== "none") {
-                    popsDOMUtils.trigger($pops, popsDOMUtils.getTransitionEndNameList(), void 0, true);
+                    popsDOMUtils.emit($pops, popsDOMUtils.getTransitionEndNameList(), void 0, true);
                     return;
                 }
                 if (["top"].includes(drawerConfig.direction)) {
@@ -3351,7 +3374,7 @@ const PopsInstanceUtils = {
             limit: true,
             extraDistance: 3,
             container: PopsCore.globalThis,
-            triggerClick: true,
+            emitClick: true,
         }, options);
         let isMove = false;
         // 点击元素，left偏移
@@ -3502,11 +3525,11 @@ const PopsInstanceUtils = {
                 }
             }
         });
-        if (options.triggerClick) {
+        if (options.emitClick) {
             // 因为会覆盖上面的点击事件，主动触发一下
             anyTouchElement.on(["tap"], function (event) {
                 event.changedPoints.forEach((item) => {
-                    popsDOMUtils.trigger(item.target, "click", void 0, true);
+                    popsDOMUtils.emit(item.target, "click", void 0, true);
                 });
             });
         }
@@ -5242,17 +5265,17 @@ const PopsFolder = {
                 });
                 // 设置默认触发的arrow
                 if (config.sort.name === "fileName") {
-                    popsDOMUtils.trigger(folderListSortFileNameElement, "click", {
+                    popsDOMUtils.emit(folderListSortFileNameElement, "click", {
                         notChangeSortRule: true,
                     });
                 }
                 else if (config.sort.name === "latestTime") {
-                    popsDOMUtils.trigger(folderListSortLatestTimeElement, "click", {
+                    popsDOMUtils.emit(folderListSortLatestTimeElement, "click", {
                         notChangeSortRule: true,
                     });
                 }
                 else if (config.sort.name === "fileSize") {
-                    popsDOMUtils.trigger(folderListSortFileSizeElement, "click", {
+                    popsDOMUtils.emit(folderListSortFileSizeElement, "click", {
                         notChangeSortRule: true,
                     });
                 }
@@ -7048,8 +7071,8 @@ const PopsTooltipDefaultConfig = () => {
         className: "",
         isFixed: false,
         alwaysShow: false,
-        triggerShowEventName: "mouseenter touchstart",
-        triggerCloseEventName: "mouseleave touchend",
+        onShowEventName: "mouseenter touchstart",
+        onCloseEventName: "mouseleave touchend",
         zIndex: 10000,
         only: false,
         eventOption: {
@@ -7380,13 +7403,13 @@ class ToolTip {
      * 绑定 显示事件
      */
     onShowEvent() {
-        popsDOMUtils.on(this.$data.config.$target, this.$data.config.triggerShowEventName, this.show, this.$data.config.eventOption);
+        popsDOMUtils.on(this.$data.config.$target, this.$data.config.onShowEventName, this.show, this.$data.config.eventOption);
     }
     /**
      * 取消绑定 显示事件
      */
     offShowEvent() {
-        popsDOMUtils.off(this.$data.config.$target, this.$data.config.triggerShowEventName, this.show, {
+        popsDOMUtils.off(this.$data.config.$target, this.$data.config.onShowEventName, this.show, {
             capture: true,
         });
     }
@@ -7441,13 +7464,13 @@ class ToolTip {
      * 绑定 关闭事件
      */
     onCloseEvent() {
-        popsDOMUtils.on(this.$data.config.$target, this.$data.config.triggerCloseEventName, this.close, this.$data.config.eventOption);
+        popsDOMUtils.on(this.$data.config.$target, this.$data.config.onCloseEventName, this.close, this.$data.config.eventOption);
     }
     /**
      * 取消绑定 关闭事件
      */
     offCloseEvent() {
-        popsDOMUtils.off(this.$data.config.$target, this.$data.config.triggerCloseEventName, this.close, {
+        popsDOMUtils.off(this.$data.config.$target, this.$data.config.onCloseEventName, this.close, {
             capture: true,
         });
     }
@@ -8856,7 +8879,7 @@ const PanelHandlerComponents = () => {
                 /**
                  * 主动触发输入框改变事件
                  */
-                triggerValueChange() {
+                emitValueChange() {
                     this.$el.input.dispatchEvent(new Event("input"));
                 },
                 /**
@@ -9626,7 +9649,6 @@ const PanelHandlerComponents = () => {
                     /**
                      * 添加选中信息
                      * @param data 选择项的数据
-                     * @param [triggerValueChangeCallBack=true] 主动触发值改变回调
                      */
                     addSelectedItemInfo(data) {
                         this.resetCurrentSelectedInfo();
@@ -10036,7 +10058,6 @@ const PanelHandlerComponents = () => {
                     /**
                      * 添加选中信息
                      * @param data 选择项的数据
-                     * @param [triggerValueChangeCallBack=true] 主动触发值改变回调
                      */
                     addSelectedItemInfo(data) {
                         this.resetCurrentSelectedInfo();
@@ -10747,11 +10768,11 @@ const PanelHandlerComponents = () => {
                 /**
                  * 从保存的已选中的信息列表中移除目标信息
                  * @param data 需要移除的信息
-                 * @param [triggerValueChangeCallBack=true] 是否触发值改变的回调
+                 * @param [emitValueChangeCallBack=true] 是否触发值改变的回调
                  * + true （默认）触发值改变的回调
                  * + false 不触发值改变的回调
                  */
-                removeSelectedInfo(data, triggerValueChangeCallBack = true) {
+                removeSelectedInfo(data, emitValueChangeCallBack = true) {
                     for (let index = 0; index < this.$data.selectedDataList.length; index++) {
                         const selectInfo = this.$data.selectedDataList[index];
                         if (selectInfo.value === data.value) {
@@ -10759,7 +10780,7 @@ const PanelHandlerComponents = () => {
                             break;
                         }
                     }
-                    triggerValueChangeCallBack && this.onValueChange();
+                    emitValueChangeCallBack && this.onValueChange();
                 },
                 /** 显示输入框 */
                 showInputWrapper() {
@@ -11176,7 +11197,7 @@ const PanelHandlerComponents = () => {
                             else {
                                 leaveViewTransition();
                             }
-                            that.triggerRenderRightContainer($currentSection);
+                            that.emitRenderRightContainer($currentSection);
                         }, {
                             once: true,
                         });
@@ -11218,7 +11239,7 @@ const PanelHandlerComponents = () => {
                             $sectionBodyContainer: $deepMenuMain,
                         });
                     }
-                    that.triggerRenderRightContainer($deepMenuSection);
+                    that.emitRenderRightContainer($deepMenuSection);
                 },
                 /** 设置项的点击事件 */
                 onLiClick() {
@@ -11379,7 +11400,7 @@ const PanelHandlerComponents = () => {
          * 主动触发触发渲染右侧容器的事件
          * @param $container 容器
          */
-        triggerRenderRightContainer($container) {
+        emitRenderRightContainer($container) {
             const dataViewConfig = Reflect.get($container, this.$data.nodeStoreConfigKey);
             this.$el.$pops.dispatchEvent(new CustomEvent("pops:renderRightContainer", {
                 detail: {
@@ -11444,7 +11465,7 @@ const PanelHandlerComponents = () => {
                         return;
                     }
                 }
-                this.triggerRenderRightContainer(this.$el.$panelContentSectionContainer);
+                this.emitRenderRightContainer(this.$el.$panelContentSectionContainer);
             });
         },
     };
@@ -12378,15 +12399,15 @@ const PopsRightClickMenu = {
                     }
                     // 鼠标|触摸 移入事件
                     // 在移动端会先触发touchstart再然后mouseenter
-                    let isTriggerTouchEvent = false;
+                    let isEmitTouchEvent = false;
                     /**
                      * 鼠标|触摸 移入事件
                      */
                     function liElementHoverEvent(event) {
                         if (event.type === "touchstart") {
-                            isTriggerTouchEvent = true;
+                            isEmitTouchEvent = true;
                         }
-                        if (isTriggerTouchEvent && event.type === "mouseenter") {
+                        if (isEmitTouchEvent && event.type === "mouseenter") {
                             return;
                         }
                         Array.from(menuULElement.children).forEach((liElement) => {
@@ -13338,7 +13359,7 @@ const PopsSearchSuggestion = {
     },
 };
 
-const version = "3.0.2";
+const version = "3.1.0";
 
 class Pops {
     /** 配置 */