@whitesev/pops 3.0.2 → 3.1.0

package/dist/index.system.js

@@ -875,22 +875,25 @@ System.register('pops', [], (function (exports) {
                         }
                         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 = [];
@@ -932,10 +935,10 @@ System.register('pops', [], (function (exports) {
                      */
                     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
@@ -955,12 +958,12 @@ System.register('pops', [], (function (exports) {
                                 }
                                 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;
@@ -1006,6 +1009,23 @@ System.register('pops', [], (function (exports) {
                             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) {
                     /**
@@ -1183,11 +1203,11 @@ System.register('pops', [], (function (exports) {
                  * 等待文档加载完成后执行指定的函数
                  * @param callback 需要执行的函数
                  * @example
-                 * DOMUtils.ready(function(){
+                 * DOMUtils.onReady(function(){
                  *   console.log("文档加载完毕")
                  * })
                  */
-                ready(callback) {
+                onReady(callback) {
                     const that = this;
                     if (typeof callback !== "function") {
                         return;
@@ -1260,16 +1280,16 @@ System.register('pops', [], (function (exports) {
                  * @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);
                     }
@@ -1307,7 +1327,7 @@ System.register('pops', [], (function (exports) {
                                     });
                                 }
                             }
-                            if (useDispatchToTriggerEvent == false && _eventType_ in events) {
+                            if (useDispatchToEmitEvent == false && _eventType_ in events) {
                                 events[_eventType_].forEach((eventsItem) => {
                                     eventsItem.callback(event);
                                 });
@@ -1323,7 +1343,7 @@ System.register('pops', [], (function (exports) {
                  * @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"))
@@ -1332,7 +1352,7 @@ System.register('pops', [], (function (exports) {
                  *  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);
@@ -1341,7 +1361,7 @@ System.register('pops', [], (function (exports) {
                         return;
                     }
                     if (handler == null) {
-                        DOMUtilsContext.trigger(element, "click", details, useDispatchToTriggerEvent);
+                        DOMUtilsContext.emit(element, "click", details, useDispatchToEmitEvent);
                     }
                     else {
                         DOMUtilsContext.on(element, "click", null, handler);
@@ -1352,7 +1372,7 @@ System.register('pops', [], (function (exports) {
                  * @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"))
@@ -1361,7 +1381,7 @@ System.register('pops', [], (function (exports) {
                  *  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);
@@ -1370,7 +1390,7 @@ System.register('pops', [], (function (exports) {
                         return;
                     }
                     if (handler === null) {
-                        DOMUtilsContext.trigger(element, "blur", details, useDispatchToTriggerEvent);
+                        DOMUtilsContext.emit(element, "blur", details, useDispatchToEmitEvent);
                     }
                     else {
                         DOMUtilsContext.on(element, "blur", null, handler);
@@ -1381,7 +1401,7 @@ System.register('pops', [], (function (exports) {
                  * @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"))
@@ -1390,7 +1410,7 @@ System.register('pops', [], (function (exports) {
                  *  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);
@@ -1399,7 +1419,7 @@ System.register('pops', [], (function (exports) {
                         return;
                     }
                     if (handler == null) {
-                        DOMUtilsContext.trigger(element, "focus", details, useDispatchToTriggerEvent);
+                        DOMUtilsContext.emit(element, "focus", details, useDispatchToEmitEvent);
                     }
                     else {
                         DOMUtilsContext.on(element, "focus", null, handler);
@@ -1419,7 +1439,7 @@ System.register('pops', [], (function (exports) {
                  *   console.log("移入/移除");
                  * })
                  */
-                hover(element, handler, option) {
+                onHover(element, handler, option) {
                     const DOMUtilsContext = this;
                     if (typeof element === "string") {
                         element = PopsCore.document.querySelector(element);
@@ -1445,7 +1465,7 @@ System.register('pops', [], (function (exports) {
                  *   console.log("按键松开");
                  * })
                  */
-                keyup(target, handler, option) {
+                onKeyup(target, handler, option) {
                     const DOMUtilsContext = this;
                     if (target == null) {
                         return;
@@ -1470,7 +1490,7 @@ System.register('pops', [], (function (exports) {
                  *   console.log("按键按下");
                  * })
                  */
-                keydown(target, handler, option) {
+                onKeydown(target, handler, option) {
                     const DOMUtilsContext = this;
                     if (target == null) {
                         return;
@@ -1495,7 +1515,7 @@ System.register('pops', [], (function (exports) {
                  *   console.log("按键按下");
                  * })
                  */
-                keypress(target, handler, option) {
+                onKeypress(target, handler, option) {
                     const DOMUtilsContext = this;
                     if (target == null) {
                         return;
@@ -2554,6 +2574,9 @@ System.register('pops', [], (function (exports) {
                  * 监input、textarea的输入框值改变的事件
                  */
                 onInput($el, callback, option) {
+                    /**
+                     * 是否正在输入中
+                     */
                     let isComposite = false;
                     const __callback = async (event) => {
                         if (isComposite)
@@ -2565,18 +2588,18 @@ System.register('pops', [], (function (exports) {
                     };
                     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();
                         },
                     };
                 }
@@ -3313,7 +3336,7 @@ System.register('pops', [], (function (exports) {
                             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)) {
@@ -3356,7 +3379,7 @@ System.register('pops', [], (function (exports) {
                         limit: true,
                         extraDistance: 3,
                         container: PopsCore.globalThis,
-                        triggerClick: true,
+                        emitClick: true,
                     }, options);
                     let isMove = false;
                     // 点击元素，left偏移
@@ -3507,11 +3530,11 @@ System.register('pops', [], (function (exports) {
                             }
                         }
                     });
-                    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);
                             });
                         });
                     }
@@ -5247,17 +5270,17 @@ System.register('pops', [], (function (exports) {
                             });
                             // 设置默认触发的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,
                                 });
                             }
@@ -7053,8 +7076,8 @@ System.register('pops', [], (function (exports) {
                     className: "",
                     isFixed: false,
                     alwaysShow: false,
-                    triggerShowEventName: "mouseenter touchstart",
-                    triggerCloseEventName: "mouseleave touchend",
+                    onShowEventName: "mouseenter touchstart",
+                    onCloseEventName: "mouseleave touchend",
                     zIndex: 10000,
                     only: false,
                     eventOption: {
@@ -7385,13 +7408,13 @@ System.register('pops', [], (function (exports) {
                  * 绑定 显示事件
                  */
                 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,
                     });
                 }
@@ -7446,13 +7469,13 @@ System.register('pops', [], (function (exports) {
                  * 绑定 关闭事件
                  */
                 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,
                     });
                 }
@@ -8861,7 +8884,7 @@ System.register('pops', [], (function (exports) {
                             /**
                              * 主动触发输入框改变事件
                              */
-                            triggerValueChange() {
+                            emitValueChange() {
                                 this.$el.input.dispatchEvent(new Event("input"));
                             },
                             /**
@@ -9631,7 +9654,6 @@ System.register('pops', [], (function (exports) {
                                 /**
                                  * 添加选中信息
                                  * @param data 选择项的数据
-                                 * @param [triggerValueChangeCallBack=true] 主动触发值改变回调
                                  */
                                 addSelectedItemInfo(data) {
                                     this.resetCurrentSelectedInfo();
@@ -10041,7 +10063,6 @@ System.register('pops', [], (function (exports) {
                                 /**
                                  * 添加选中信息
                                  * @param data 选择项的数据
-                                 * @param [triggerValueChangeCallBack=true] 主动触发值改变回调
                                  */
                                 addSelectedItemInfo(data) {
                                     this.resetCurrentSelectedInfo();
@@ -10752,11 +10773,11 @@ System.register('pops', [], (function (exports) {
                             /**
                              * 从保存的已选中的信息列表中移除目标信息
                              * @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) {
@@ -10764,7 +10785,7 @@ System.register('pops', [], (function (exports) {
                                         break;
                                     }
                                 }
-                                triggerValueChangeCallBack && this.onValueChange();
+                                emitValueChangeCallBack && this.onValueChange();
                             },
                             /** 显示输入框 */
                             showInputWrapper() {
@@ -11181,7 +11202,7 @@ System.register('pops', [], (function (exports) {
                                         else {
                                             leaveViewTransition();
                                         }
-                                        that.triggerRenderRightContainer($currentSection);
+                                        that.emitRenderRightContainer($currentSection);
                                     }, {
                                         once: true,
                                     });
@@ -11223,7 +11244,7 @@ System.register('pops', [], (function (exports) {
                                         $sectionBodyContainer: $deepMenuMain,
                                     });
                                 }
-                                that.triggerRenderRightContainer($deepMenuSection);
+                                that.emitRenderRightContainer($deepMenuSection);
                             },
                             /** 设置项的点击事件 */
                             onLiClick() {
@@ -11384,7 +11405,7 @@ System.register('pops', [], (function (exports) {
                      * 主动触发触发渲染右侧容器的事件
                      * @param $container 容器
                      */
-                    triggerRenderRightContainer($container) {
+                    emitRenderRightContainer($container) {
                         const dataViewConfig = Reflect.get($container, this.$data.nodeStoreConfigKey);
                         this.$el.$pops.dispatchEvent(new CustomEvent("pops:renderRightContainer", {
                             detail: {
@@ -11449,7 +11470,7 @@ System.register('pops', [], (function (exports) {
                                     return;
                                 }
                             }
-                            this.triggerRenderRightContainer(this.$el.$panelContentSectionContainer);
+                            this.emitRenderRightContainer(this.$el.$panelContentSectionContainer);
                         });
                     },
                 };
@@ -12383,15 +12404,15 @@ System.register('pops', [], (function (exports) {
                                 }
                                 // 鼠标|触摸 移入事件
                                 // 在移动端会先触发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) => {
@@ -13343,7 +13364,7 @@ System.register('pops', [], (function (exports) {
                 },
             };
 
-            const version = "3.0.2";
+            const version = "3.1.0";
 
             class Pops {
                 /** 配置 */