@whitesev/pops 2.3.8 → 2.4.0

package/dist/index.system.js

@@ -2529,6 +2529,36 @@ System.register('pops', [], (function (exports) {
                         transformTop: transform_top,
                     };
                 }
+                /**
+                 * 监input、textarea的输入框值改变的事件
+                 */
+                onInput($el, callback, option) {
+                    let isComposite = false;
+                    let __callback = async (event) => {
+                        if (isComposite)
+                            return;
+                        await callback(event);
+                    };
+                    let __composition_start_callback = () => {
+                        isComposite = true;
+                    };
+                    let __composition_end_callback = () => {
+                        isComposite = false;
+                        this.trigger($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);
+                    return {
+                        off: () => {
+                            this.off($el, "input", __callback, option);
+                            this.off($el, "compositionstart", __composition_start_callback, option);
+                            this.off($el, "compositionend", __composition_end_callback, option);
+                        },
+                    };
+                }
             }
             const popsDOMUtils = new PopsDOMUtils();
 
@@ -10895,6 +10925,22 @@ System.register('pops', [], (function (exports) {
                     data.push({
                         value: `测试${index}`,
                         text: `测试${index}-html`,
+                        enableDeleteButton: true,
+                        deleteButtonClickCallback(event, $dataItem, dataItem, config) {
+                            console.log("删除当前项", [event, $dataItem, dataItem, config]);
+                            return true;
+                        },
+                        itemView(dateItem, $parent) {
+                            return dateItem.text;
+                        },
+                        clickCallback(event, $dataItem, dataItem, config) {
+                            console.log("item项的点击回调", [event, $dataItem, data, config]);
+                            // config.inputTarget!.value = dataItem.value;
+                            return index % 2 === 0 ? true : false;
+                        },
+                        selectCallback(event, $dataItem, dataItem, config) {
+                            console.log("item项的选中回调", [event, $dataItem, data, config]);
+                        },
                     });
                 }
                 return {
@@ -10904,14 +10950,6 @@ System.register('pops', [], (function (exports) {
                     inputTarget: null,
                     selfDocument: document,
                     data: data,
-                    deleteIcon: {
-                        enable: true,
-                        callback(event, liElement, dataItem) {
-                            console.log("删除当前项", [event, liElement, dataItem]);
-                            data.splice(data.indexOf(dataItem), 1);
-                            liElement.remove();
-                        },
-                    },
                     useShadowRoot: true,
                     className: "",
                     isAbsolute: true,
@@ -10929,20 +10967,10 @@ System.register('pops', [], (function (exports) {
                     toSearhNotResultHTML: '<li data-none="true">暂无其它数据</li>',
                     toHideWithNotResult: false,
                     followPosition: "target",
-                    getItemHTML(item) {
-                        return item.text ?? item;
-                    },
-                    async getData(value, data) {
+                    async inputTargetChangeRefreshShowDataCallback(value, data) {
                         console.log("当前输入框的值是：", value);
                         return data.filter((it) => it.value.includes(value));
                     },
-                    itemClickCallBack(event, liElement, data) {
-                        console.log("item项的点击回调", [event, liElement, data]);
-                        this.inputTarget.value = data.value;
-                    },
-                    selectCallBack(event, liElement, data) {
-                        console.log("item项的选中回调", [event, liElement, data]);
-                    },
                     style: "",
                 };
             };
@@ -11002,33 +11030,49 @@ System.register('pops', [], (function (exports) {
                             /** 动态更新CSS */
                             $dynamicCSS: null,
                         },
+                        $evt: {
+                            offInputChangeEvtHandler: [],
+                        },
                         $data: {
                             /** 是否结果为空 */
                             isEmpty: true,
                         },
-                        /** 初始化元素变量 */
-                        initEl() {
-                            this.$el.root = SearchSuggestion.createSearchSelectElement();
-                            this.$el.$dynamicCSS = this.$el.root.querySelector("style[data-dynamic]");
-                            this.$el.$hintULContainer = SearchSuggestion.$el.root.querySelector("ul");
-                        },
                         /**
                          * 初始化
+                         * @param parentElement 父元素
                          */
                         init(parentElement = document.body || document.documentElement) {
-                            this.initEl();
-                            SearchSuggestion.update(this.getData());
+                            SearchSuggestion.initEl();
+                            SearchSuggestion.update(SearchSuggestion.getData());
                             SearchSuggestion.updateStyleSheet();
                             SearchSuggestion.hide();
                             $shadowRoot.appendChild(SearchSuggestion.$el.root);
                             parentElement.appendChild($shadowContainer);
                         },
+                        /**
+                         * 初始化元素变量
+                         */
+                        initEl() {
+                            SearchSuggestion.$el.root = SearchSuggestion.createSearchSelectElement();
+                            Reflect.set(SearchSuggestion.$el.root, "data-SearchSuggestion", SearchSuggestion);
+                            SearchSuggestion.$el.$dynamicCSS =
+                                SearchSuggestion.$el.root.querySelector("style[data-dynamic]");
+                            SearchSuggestion.$el.$hintULContainer =
+                                SearchSuggestion.$el.root.querySelector("ul");
+                        },
                         /**
                          * 获取数据
                          */
                         getData() {
                             return typeof config.data === "function" ? config.data() : config.data;
                         },
+                        /**
+                         * 更新数据
+                         * @param data 数据
+                         */
+                        setData(data) {
+                            config.data = data;
+                        },
                         /**
                          * 获取显示出搜索建议框的html
                          */
@@ -11111,7 +11155,7 @@ System.register('pops', [], (function (exports) {
 							}
 						</style>
 						<style type="text/css" data-dynamic="true">
-							${this.getDynamicCSS()}
+							${SearchSuggestion.getDynamicCSS()}
 						</style>
 						<style>
 							.el-zoom-in-top-animation{
@@ -11153,7 +11197,9 @@ System.register('pops', [], (function (exports) {
                             }
                             return $el;
                         },
-                        /** 动态获取CSS */
+                        /**
+                         * 动态获取CSS
+                         */
                         getDynamicCSS() {
                             return /*css*/ `
 				.pops-${popsType}-search-suggestion{
@@ -11218,53 +11264,82 @@ System.register('pops', [], (function (exports) {
 				}
 				`;
                         },
+                        /**
+                         * 获取data-value值
+                         * @param data 数据项
+                         */
+                        getItemDataValue(data) {
+                            return data;
+                        },
                         /**
                          * 获取显示出搜索建议框的每一项的html
-                         * @param data 当前项的值
-                         * @param index 当前项的下标
+                         * @param dataItem 当前项的值
+                         * @param dateItemIndex 当前项的下标
                          */
-                        createSearchItemLiElement(data, index) {
+                        createSearchItemLiElement(dataItem, dateItemIndex) {
+                            const dataValue = SearchSuggestion.getItemDataValue(dataItem);
                             let $li = popsDOMUtils.createElement("li", {
                                 className: `pops-${popsType}-search-suggestion-hint-item`,
-                                "data-index": index,
-                                "data-value": SearchSuggestion.getItemDataValue(data),
-                                innerHTML: `${config.getItemHTML(data)}${config.deleteIcon.enable ? SearchSuggestion.getDeleteIconHTML() : ""}`,
+                                "data-index": dateItemIndex,
+                                "data-value": dataValue,
                             });
+                            Reflect.set($li, "data-index", dateItemIndex);
+                            Reflect.set($li, "data-value", dataValue);
+                            // 项内容
+                            let $itemInner = dataItem.itemView(dataItem, $li, config);
+                            if (typeof $itemInner === "string") {
+                                PopsSafeUtils.setSafeHTML($li, $itemInner);
+                            }
+                            else {
+                                popsDOMUtils.append($li, $itemInner);
+                            }
+                            // 删除按钮
+                            const enableDeleteButton = dataItem.enableDeleteButton;
+                            if (typeof enableDeleteButton === "boolean" && enableDeleteButton) {
+                                let $deleteIcon = SearchSuggestion.createItemDeleteIcon();
+                                popsDOMUtils.append($li, $deleteIcon);
+                            }
                             popsDOMUtils.addClassName($li, PopsCommonCSSClassName.flexCenter);
                             popsDOMUtils.addClassName($li, PopsCommonCSSClassName.flexYCenter);
                             return $li;
                         },
-                        /**
-                         * 获取data-value值
-                         * @param data
-                         */
-                        getItemDataValue(data) {
-                            return data;
-                        },
                         /**
                          * 设置搜索建议框每一项的点击事件
-                         * @param $searchItem
+                         * @param $searchItem 当前项的元素
                          */
                         setSearchItemClickEvent($searchItem) {
-                            popsDOMUtils.on($searchItem, "click", (event) => {
+                            popsDOMUtils.on($searchItem, "click", async (event) => {
                                 popsDOMUtils.preventEvent(event);
                                 let $click = event.target;
-                                let dataValue = Reflect.get($searchItem, "data-value");
+                                const data = SearchSuggestion.getData();
+                                const dataItem = Reflect.get($searchItem, "data-value");
                                 let isDelete = Boolean($click.closest(`.pops-${popsType}-delete-icon`));
                                 if (isDelete) {
                                     // 删除
-                                    if (typeof config.deleteIcon.callback === "function") {
-                                        config.deleteIcon.callback(event, $searchItem, dataValue);
+                                    if (typeof dataItem.deleteButtonClickCallback === "function") {
+                                        let result = await dataItem.deleteButtonClickCallback(event, $searchItem, dataItem, config);
+                                        if (typeof result === "boolean" && result) {
+                                            data.splice(data.indexOf(dataItem), 1);
+                                            $searchItem.remove();
+                                        }
                                     }
-                                    if (!this.$el.$hintULContainer.children.length) {
+                                    if (!SearchSuggestion.$el.$hintULContainer.children.length) {
                                         /* 全删完了 */
-                                        this.clear();
+                                        SearchSuggestion.clear();
                                     }
                                     SearchSuggestion.updateStyleSheet();
                                 }
                                 else {
                                     // 点击选择项
-                                    config.itemClickCallBack(event, $searchItem, dataValue);
+                                    if (typeof dataItem.clickCallback === "function") {
+                                        let result = await dataItem.clickCallback(event, $searchItem, dataItem, config);
+                                        if (typeof result === "boolean" && result) {
+                                            if (config.inputTarget instanceof HTMLInputElement ||
+                                                config.inputTarget instanceof HTMLTextAreaElement) {
+                                                config.inputTarget.value = String(dataItem.value);
+                                            }
+                                        }
+                                    }
                                 }
                             }, {
                                 capture: true,
@@ -11303,11 +11378,13 @@ System.register('pops', [], (function (exports) {
                             /* 禁用输入框自动提示 */
                             config.inputTarget.setAttribute("autocomplete", "off");
                             /* 内容改变事件 */
-                            popsDOMUtils.on(config.inputTarget, "input", void 0, async (event) => {
-                                let getListResult = await config.getData(config.inputTarget.value, this.getData());
-                                SearchSuggestion.update(getListResult);
+                            const listenerHandler = popsDOMUtils.onInput(config.inputTarget, async (event) => {
+                                const data = SearchSuggestion.getData();
+                                let queryDataResult = await config.inputTargetChangeRefreshShowDataCallback(config.inputTarget.value, data, config);
+                                SearchSuggestion.update(queryDataResult);
                                 SearchSuggestion.updateStyleSheet();
                             }, option);
+                            SearchSuggestion.$evt.offInputChangeEvtHandler.push(listenerHandler.off);
                         },
                         /**
                          * 移除输入框内容改变的监听
@@ -11315,7 +11392,12 @@ System.register('pops', [], (function (exports) {
                         removeInputChangeEvent(option = {
                             capture: true,
                         }) {
-                            popsDOMUtils.off(config.inputTarget, "input", void 0, void 0, option);
+                            for (let index = 0; index < SearchSuggestion.$evt.offInputChangeEvtHandler.length; index++) {
+                                const handler = SearchSuggestion.$evt.offInputChangeEvtHandler[index];
+                                handler();
+                                SearchSuggestion.$evt.offInputChangeEvtHandler.splice(index, 1);
+                                index--;
+                            }
                         },
                         /**
                          * 显示搜索建议框的事件
@@ -11441,23 +11523,24 @@ System.register('pops', [], (function (exports) {
                         /**
                          * 获取删除按钮的html
                          */
-                        getDeleteIconHTML(size = 16, fill = "#bababa") {
-                            return /*html*/ `
-				<svg class="pops-${popsType}-delete-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
-					<path d="M512 883.2A371.2 371.2 0 1 0 140.8 512 371.2 371.2 0 0 0 512 883.2z m0 64a435.2 435.2 0 1 1 435.2-435.2 435.2 435.2 0 0 1-435.2 435.2z"></path>
-					<path d="M557.056 512l122.368 122.368a31.744 31.744 0 1 1-45.056 45.056L512 557.056l-122.368 122.368a31.744 31.744 0 1 1-45.056-45.056L466.944 512 344.576 389.632a31.744 31.744 0 1 1 45.056-45.056L512 466.944l122.368-122.368a31.744 31.744 0 1 1 45.056 45.056z"></path>
-				</svg>
-        	`;
+                        createItemDeleteIcon(size = 16, fill = "#bababa") {
+                            let $svg = popsDOMUtils.parseTextToDOM(/*html*/ `
+					<svg class="pops-${popsType}-delete-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
+						<path d="M512 883.2A371.2 371.2 0 1 0 140.8 512 371.2 371.2 0 0 0 512 883.2z m0 64a435.2 435.2 0 1 1 435.2-435.2 435.2 435.2 0 0 1-435.2 435.2z"></path>
+						<path d="M557.056 512l122.368 122.368a31.744 31.744 0 1 1-45.056 45.056L512 557.056l-122.368 122.368a31.744 31.744 0 1 1-45.056-45.056L466.944 512 344.576 389.632a31.744 31.744 0 1 1 45.056-45.056L512 466.944l122.368-122.368a31.744 31.744 0 1 1 45.056 45.056z"></path>
+					</svg>
+        			`);
+                            return $svg;
                         },
                         /**
                          * 设置当前正在搜索中的提示
                          */
                         setPromptsInSearch() {
-                            let isSearchingElement = popsDOMUtils.createElement("li", {
+                            let $isSearching = popsDOMUtils.createElement("li", {
                                 className: `pops-${popsType}-search-suggestion-hint-searching-item`,
                                 innerHTML: config.searchingTip,
                             });
-                            SearchSuggestion.$el.$hintULContainer.appendChild(isSearchingElement);
+                            SearchSuggestion.addItem($isSearching);
                         },
                         /**
                          * 移除正在搜索中的提示
@@ -11467,17 +11550,13 @@ System.register('pops', [], (function (exports) {
                                 .querySelector(`li.pops-${popsType}-search-suggestion-hint-searching-item`)
                                 ?.remove();
                         },
-                        /**
-                         * 清空所有的搜索结果
-                         */
-                        clearAllSearchItemLi() {
-                            PopsSafeUtils.setSafeHTML(SearchSuggestion.$el.$hintULContainer, "");
-                        },
                         /**
                          * 更新搜索建议框的位置(top、left)
                          * 因为目标元素可能是动态隐藏的
+                         * @param target 目标元素
+                         * @param checkPositonAgain 是否在更新位置信息后检测更新位置信息，默认true
                          */
-                        changeHintULElementPosition(target = config.target ?? config.inputTarget) {
+                        changeHintULElementPosition(target = config.target ?? config.inputTarget, checkPositonAgain = true) {
                             let targetRect = null;
                             if (config.followPosition === "inputCursor") {
                                 targetRect = popsDOMUtils.getTextBoundingRect(config.inputTarget, config.inputTarget.selectionStart || 0, config.inputTarget.selectionEnd || 0, false);
@@ -11501,6 +11580,7 @@ System.register('pops', [], (function (exports) {
                                 // 需目标高度+搜索建议框高度大于文档高度，则显示在上面
                                 let targetBottom = targetRect.bottom;
                                 let searchSuggestionContainerHeight = popsDOMUtils.height(SearchSuggestion.$el.$hintULContainer);
+                                console.log(targetBottom, searchSuggestionContainerHeight, targetBottom + searchSuggestionContainerHeight, documentHeight);
                                 if (targetBottom + searchSuggestionContainerHeight > documentHeight) {
                                     // 在上面
                                     position = "top";
@@ -11541,10 +11621,19 @@ System.register('pops', [], (function (exports) {
                                 left = left + documentWidth - hintUIWidth;
                             }
                             SearchSuggestion.$el.root.style.left = left + "px";
+                            // 如果更新前在下面的话且高度超出了屏幕
+                            // 这时候会有滚动条，会造成位置偏移
+                            // 更新后的位置却在上面，这时候的位置信息不对齐
+                            // 需重新更新位置
+                            // 此情况一般是config.position === "auto"
+                            if (checkPositonAgain) {
+                                SearchSuggestion.changeHintULElementPosition(target, !checkPositonAgain);
+                            }
                         },
                         /**
                          * 更新搜索建议框的width
                          * 因为目标元素可能是动态隐藏的
+                         * @param target 目标元素
                          */
                         changeHintULElementWidth(target = config.target ?? config.inputTarget) {
                             let targetRect = target.getBoundingClientRect();
@@ -11559,11 +11648,15 @@ System.register('pops', [], (function (exports) {
                          * 动态更新CSS
                          */
                         updateDynamicCSS() {
-                            let cssText = this.getDynamicCSS();
-                            PopsSafeUtils.setSafeHTML(this.$el.$dynamicCSS, cssText);
+                            let cssText = SearchSuggestion.getDynamicCSS();
+                            PopsSafeUtils.setSafeHTML(SearchSuggestion.$el.$dynamicCSS, cssText);
                         },
                         /**
                          * 数据项的数量改变时调用
+                         *
+                         * - 更新css
+                         * - 更新建议框的宽度
+                         * - 更新建议框的位置
                          */
                         updateStyleSheet() {
                             // 更新z-index
@@ -11573,29 +11666,38 @@ System.register('pops', [], (function (exports) {
                             // 更新位置
                             SearchSuggestion.changeHintULElementPosition();
                         },
+                        /**
+                         * 添加搜索结果元素
+                         * @param $item 项元素
+                         */
+                        addItem($item) {
+                            SearchSuggestion.$el.$hintULContainer.appendChild($item);
+                        },
                         /**
                          * 更新页面显示的搜索结果
-                         * @param data
+                         * @param updateData
                          */
-                        update(data = []) {
-                            if (!Array.isArray(data)) {
+                        update(updateData = []) {
+                            if (!Array.isArray(updateData)) {
                                 throw new TypeError("传入的数据不是数组");
                             }
-                            config.data = data;
+                            const data = updateData;
                             /* 清空已有的搜索结果 */
-                            if (config.data.length) {
+                            if (data.length) {
                                 SearchSuggestion.$data.isEmpty = false;
                                 if (config.toHideWithNotResult) {
                                     SearchSuggestion.show();
                                 }
-                                SearchSuggestion.clearAllSearchItemLi();
+                                SearchSuggestion.clear(true);
                                 /* 添加进ul中 */
-                                config.data.forEach((item, index) => {
-                                    let itemElement = SearchSuggestion.createSearchItemLiElement(item, index);
-                                    SearchSuggestion.setSearchItemClickEvent(itemElement);
-                                    SearchSuggestion.setSearchItemSelectEvent(itemElement);
-                                    SearchSuggestion.$el.$hintULContainer.appendChild(itemElement);
+                                let fragment = document.createDocumentFragment();
+                                data.forEach((item, index) => {
+                                    let $item = SearchSuggestion.createSearchItemLiElement(item, index);
+                                    SearchSuggestion.setSearchItemClickEvent($item);
+                                    SearchSuggestion.setSearchItemSelectEvent($item);
+                                    fragment.appendChild($item);
                                 });
+                                SearchSuggestion.addItem(fragment);
                             }
                             else {
                                 /* 清空 */
@@ -11604,13 +11706,24 @@ System.register('pops', [], (function (exports) {
                         },
                         /**
                          * 清空当前的搜索结果并显示无结果
+                         * @param [onlyClearView=false] 是否仅清空元素，默认false
                          */
-                        clear() {
-                            this.$data.isEmpty = true;
-                            this.clearAllSearchItemLi();
-                            this.$el.$hintULContainer.appendChild(popsDOMUtils.parseTextToDOM(config.toSearhNotResultHTML));
+                        clear(onlyClearView = false) {
+                            PopsSafeUtils.setSafeHTML(SearchSuggestion.$el.$hintULContainer, "");
+                            if (onlyClearView) {
+                                return;
+                            }
+                            SearchSuggestion.$data.isEmpty = true;
+                            let $noResult;
+                            if (typeof config.toSearhNotResultHTML === "string") {
+                                $noResult = popsDOMUtils.parseTextToDOM(config.toSearhNotResultHTML);
+                            }
+                            else {
+                                $noResult = config.toSearhNotResultHTML();
+                            }
+                            SearchSuggestion.addItem($noResult);
                             if (config.toHideWithNotResult) {
-                                this.hide();
+                                SearchSuggestion.hide();
                             }
                         },
                         /**
@@ -11621,25 +11734,25 @@ System.register('pops', [], (function (exports) {
                             if (config.useFoldAnimation) {
                                 if (!useAnimationToHide) {
                                     // 去掉动画
-                                    popsDOMUtils.removeClassName(this.$el.root, "el-zoom-in-top-animation");
+                                    popsDOMUtils.removeClassName(SearchSuggestion.$el.root, "el-zoom-in-top-animation");
                                 }
-                                popsDOMUtils.addClassName(this.$el.root, "el-zoom-in-top-animation");
-                                popsDOMUtils.addClassName(this.$el.root, "el-zoom-in-top-animation-hide");
-                                popsDOMUtils.removeClassName(this.$el.root, "el-zoom-in-top-animation-show");
+                                popsDOMUtils.addClassName(SearchSuggestion.$el.root, "el-zoom-in-top-animation");
+                                popsDOMUtils.addClassName(SearchSuggestion.$el.root, "el-zoom-in-top-animation-hide");
+                                popsDOMUtils.removeClassName(SearchSuggestion.$el.root, "el-zoom-in-top-animation-show");
                             }
                             else {
-                                this.$el.root.style.display = "none";
+                                SearchSuggestion.$el.root.style.display = "none";
                             }
                         },
                         /**
                          * 显示搜索建议框
                          */
                         show() {
-                            this.$el.root.style.display = "";
+                            SearchSuggestion.$el.root.style.display = "";
                             if (config.useFoldAnimation) {
-                                popsDOMUtils.addClassName(this.$el.root, "el-zoom-in-top-animation");
-                                popsDOMUtils.removeClassName(this.$el.root, "el-zoom-in-top-animation-hide");
-                                popsDOMUtils.addClassName(this.$el.root, "el-zoom-in-top-animation-show");
+                                popsDOMUtils.addClassName(SearchSuggestion.$el.root, "el-zoom-in-top-animation");
+                                popsDOMUtils.removeClassName(SearchSuggestion.$el.root, "el-zoom-in-top-animation-hide");
+                                popsDOMUtils.addClassName(SearchSuggestion.$el.root, "el-zoom-in-top-animation-show");
                             }
                         },
                     };
@@ -11651,7 +11764,7 @@ System.register('pops', [], (function (exports) {
                 /** 配置 */
                 config = {
                     /** 版本号 */
-                    version: "2025.9.2",
+                    version: "2025.9.4",
                     cssText: PopsCSS,
                     /** icon图标的svg代码 */
                     iconSVG: PopsIcon.$data,