@whitesev/pops 3.0.2 → 3.1.0

package/dist/index.umd.js

@@ -876,22 +876,25 @@
                 }
                 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 = [];
@@ -933,10 +936,10 @@
              */
             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
@@ -956,12 +959,12 @@
                         }
                         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;
@@ -1007,6 +1010,23 @@
                     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) {
             /**
@@ -1184,11 +1204,11 @@
          * 等待文档加载完成后执行指定的函数
          * @param callback 需要执行的函数
          * @example
-         * DOMUtils.ready(function(){
+         * DOMUtils.onReady(function(){
          *   console.log("文档加载完毕")
          * })
          */
-        ready(callback) {
+        onReady(callback) {
             const that = this;
             if (typeof callback !== "function") {
                 return;
@@ -1261,16 +1281,16 @@
          * @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);
             }
@@ -1308,7 +1328,7 @@
                             });
                         }
                     }
-                    if (useDispatchToTriggerEvent == false && _eventType_ in events) {
+                    if (useDispatchToEmitEvent == false && _eventType_ in events) {
                         events[_eventType_].forEach((eventsItem) => {
                             eventsItem.callback(event);
                         });
@@ -1324,7 +1344,7 @@
          * @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"))
@@ -1333,7 +1353,7 @@
          *  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);
@@ -1342,7 +1362,7 @@
                 return;
             }
             if (handler == null) {
-                DOMUtilsContext.trigger(element, "click", details, useDispatchToTriggerEvent);
+                DOMUtilsContext.emit(element, "click", details, useDispatchToEmitEvent);
             }
             else {
                 DOMUtilsContext.on(element, "click", null, handler);
@@ -1353,7 +1373,7 @@
          * @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"))
@@ -1362,7 +1382,7 @@
          *  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);
@@ -1371,7 +1391,7 @@
                 return;
             }
             if (handler === null) {
-                DOMUtilsContext.trigger(element, "blur", details, useDispatchToTriggerEvent);
+                DOMUtilsContext.emit(element, "blur", details, useDispatchToEmitEvent);
             }
             else {
                 DOMUtilsContext.on(element, "blur", null, handler);
@@ -1382,7 +1402,7 @@
          * @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"))
@@ -1391,7 +1411,7 @@
          *  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);
@@ -1400,7 +1420,7 @@
                 return;
             }
             if (handler == null) {
-                DOMUtilsContext.trigger(element, "focus", details, useDispatchToTriggerEvent);
+                DOMUtilsContext.emit(element, "focus", details, useDispatchToEmitEvent);
             }
             else {
                 DOMUtilsContext.on(element, "focus", null, handler);
@@ -1420,7 +1440,7 @@
          *   console.log("移入/移除");
          * })
          */
-        hover(element, handler, option) {
+        onHover(element, handler, option) {
             const DOMUtilsContext = this;
             if (typeof element === "string") {
                 element = PopsCore.document.querySelector(element);
@@ -1446,7 +1466,7 @@
          *   console.log("按键松开");
          * })
          */
-        keyup(target, handler, option) {
+        onKeyup(target, handler, option) {
             const DOMUtilsContext = this;
             if (target == null) {
                 return;
@@ -1471,7 +1491,7 @@
          *   console.log("按键按下");
          * })
          */
-        keydown(target, handler, option) {
+        onKeydown(target, handler, option) {
             const DOMUtilsContext = this;
             if (target == null) {
                 return;
@@ -1496,7 +1516,7 @@
          *   console.log("按键按下");
          * })
          */
-        keypress(target, handler, option) {
+        onKeypress(target, handler, option) {
             const DOMUtilsContext = this;
             if (target == null) {
                 return;
@@ -2555,6 +2575,9 @@
          * 监input、textarea的输入框值改变的事件
          */
         onInput($el, callback, option) {
+            /**
+             * 是否正在输入中
+             */
             let isComposite = false;
             const __callback = async (event) => {
                 if (isComposite)
@@ -2566,18 +2589,18 @@
             };
             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();
                 },
             };
         }
@@ -3314,7 +3337,7 @@
                     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)) {
@@ -3357,7 +3380,7 @@
                 limit: true,
                 extraDistance: 3,
                 container: PopsCore.globalThis,
-                triggerClick: true,
+                emitClick: true,
             }, options);
             let isMove = false;
             // 点击元素，left偏移
@@ -3508,11 +3531,11 @@
                     }
                 }
             });
-            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);
                     });
                 });
             }
@@ -5248,17 +5271,17 @@
                     });
                     // 设置默认触发的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,
                         });
                     }
@@ -7054,8 +7077,8 @@
             className: "",
             isFixed: false,
             alwaysShow: false,
-            triggerShowEventName: "mouseenter touchstart",
-            triggerCloseEventName: "mouseleave touchend",
+            onShowEventName: "mouseenter touchstart",
+            onCloseEventName: "mouseleave touchend",
             zIndex: 10000,
             only: false,
             eventOption: {
@@ -7386,13 +7409,13 @@
          * 绑定 显示事件
          */
         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,
             });
         }
@@ -7447,13 +7470,13 @@
          * 绑定 关闭事件
          */
         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,
             });
         }
@@ -8862,7 +8885,7 @@
                     /**
                      * 主动触发输入框改变事件
                      */
-                    triggerValueChange() {
+                    emitValueChange() {
                         this.$el.input.dispatchEvent(new Event("input"));
                     },
                     /**
@@ -9632,7 +9655,6 @@
                         /**
                          * 添加选中信息
                          * @param data 选择项的数据
-                         * @param [triggerValueChangeCallBack=true] 主动触发值改变回调
                          */
                         addSelectedItemInfo(data) {
                             this.resetCurrentSelectedInfo();
@@ -10042,7 +10064,6 @@
                         /**
                          * 添加选中信息
                          * @param data 选择项的数据
-                         * @param [triggerValueChangeCallBack=true] 主动触发值改变回调
                          */
                         addSelectedItemInfo(data) {
                             this.resetCurrentSelectedInfo();
@@ -10753,11 +10774,11 @@
                     /**
                      * 从保存的已选中的信息列表中移除目标信息
                      * @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) {
@@ -10765,7 +10786,7 @@
                                 break;
                             }
                         }
-                        triggerValueChangeCallBack && this.onValueChange();
+                        emitValueChangeCallBack && this.onValueChange();
                     },
                     /** 显示输入框 */
                     showInputWrapper() {
@@ -11182,7 +11203,7 @@
                                 else {
                                     leaveViewTransition();
                                 }
-                                that.triggerRenderRightContainer($currentSection);
+                                that.emitRenderRightContainer($currentSection);
                             }, {
                                 once: true,
                             });
@@ -11224,7 +11245,7 @@
                                 $sectionBodyContainer: $deepMenuMain,
                             });
                         }
-                        that.triggerRenderRightContainer($deepMenuSection);
+                        that.emitRenderRightContainer($deepMenuSection);
                     },
                     /** 设置项的点击事件 */
                     onLiClick() {
@@ -11385,7 +11406,7 @@
              * 主动触发触发渲染右侧容器的事件
              * @param $container 容器
              */
-            triggerRenderRightContainer($container) {
+            emitRenderRightContainer($container) {
                 const dataViewConfig = Reflect.get($container, this.$data.nodeStoreConfigKey);
                 this.$el.$pops.dispatchEvent(new CustomEvent("pops:renderRightContainer", {
                     detail: {
@@ -11450,7 +11471,7 @@
                             return;
                         }
                     }
-                    this.triggerRenderRightContainer(this.$el.$panelContentSectionContainer);
+                    this.emitRenderRightContainer(this.$el.$panelContentSectionContainer);
                 });
             },
         };
@@ -12384,15 +12405,15 @@
                         }
                         // 鼠标|触摸 移入事件
                         // 在移动端会先触发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) => {
@@ -13344,7 +13365,7 @@
         },
     };
 
-    const version = "3.0.2";
+    const version = "3.1.0";
 
     class Pops {
         /** 配置 */