@whitesev/pops 2.3.7 → 2.4.0

package/dist/index.esm.js

@@ -2524,6 +2524,36 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
             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();
 
@@ -10890,6 +10920,22 @@ const searchSuggestionConfig = () => {
         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 {
@@ -10899,14 +10945,6 @@ const searchSuggestionConfig = () => {
         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,
@@ -10924,20 +10962,10 @@ const searchSuggestionConfig = () => {
         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: "",
     };
 };
@@ -10997,33 +11025,49 @@ const PopsSearchSuggestion = {
                 /** 动态更新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
              */
@@ -11031,7 +11075,7 @@ const PopsSearchSuggestion = {
                 let $el = popsDOMUtils.createElement("div", {
                     className: `pops pops-${popsType}-search-suggestion`,
                     innerHTML: /*html*/ `
-						<style>
+						<style type="text/css">
 							.pops-${popsType}-animation{
 								-moz-animation: searchSelectFalIn 0.5s 1 linear;
 								-webkit-animation: searchSelectFalIn 0.5s 1 linear;
@@ -11039,7 +11083,7 @@ const PopsSearchSuggestion = {
 								-ms-animation: searchSelectFalIn 0.5s 1 linear;
 							}
 						</style>
-						<style>
+						<style type="text/css">
 							.pops-${popsType}-search-suggestion-arrow{
 								--suggestion-arrow-box-shadow-left-color: rgba(0, 0, 0, 0.24);
 								--suggestion-arrow-box-shadow-right-color: rgba(0, 0, 0, 0.12);
@@ -11105,8 +11149,8 @@ const PopsSearchSuggestion = {
 								content: "";
 							}
 						</style>
-						<style data-dynamic="true">
-							${this.getDynamicCSS()}
+						<style type="text/css" data-dynamic="true">
+							${SearchSuggestion.getDynamicCSS()}
 						</style>
 						<style>
 							.el-zoom-in-top-animation{
@@ -11127,6 +11171,9 @@ const PopsSearchSuggestion = {
 								transform: scaleY(1);
 							}
 						</style>
+						<style type="text/css" data-user-css>
+							${config.style || ""}
+						</style>
 						<ul class="pops-${popsType}-search-suggestion-hint ${PopsCommonCSSClassName.userSelectNone}">${config.toSearhNotResultHTML}</ul>
 						${config.useArrow ? /*html*/ `<div class="pops-${popsType}-search-suggestion-arrow"></div>` : ""}
          				 `,
@@ -11145,7 +11192,9 @@ const PopsSearchSuggestion = {
                 }
                 return $el;
             },
-            /** 动态获取CSS */
+            /**
+             * 动态获取CSS
+             */
             getDynamicCSS() {
                 return /*css*/ `
 				.pops-${popsType}-search-suggestion{
@@ -11210,53 +11259,82 @@ const PopsSearchSuggestion = {
 				}
 				`;
             },
+            /**
+             * 获取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,
@@ -11295,11 +11373,13 @@ const PopsSearchSuggestion = {
                 /* 禁用输入框自动提示 */
                 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);
             },
             /**
              * 移除输入框内容改变的监听
@@ -11307,7 +11387,12 @@ const PopsSearchSuggestion = {
             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--;
+                }
             },
             /**
              * 显示搜索建议框的事件
@@ -11433,23 +11518,24 @@ const PopsSearchSuggestion = {
             /**
              * 获取删除按钮的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);
             },
             /**
              * 移除正在搜索中的提示
@@ -11459,17 +11545,13 @@ const PopsSearchSuggestion = {
                     .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);
@@ -11493,6 +11575,7 @@ const PopsSearchSuggestion = {
                     // 需目标高度+搜索建议框高度大于文档高度，则显示在上面
                     let targetBottom = targetRect.bottom;
                     let searchSuggestionContainerHeight = popsDOMUtils.height(SearchSuggestion.$el.$hintULContainer);
+                    console.log(targetBottom, searchSuggestionContainerHeight, targetBottom + searchSuggestionContainerHeight, documentHeight);
                     if (targetBottom + searchSuggestionContainerHeight > documentHeight) {
                         // 在上面
                         position = "top";
@@ -11533,10 +11616,19 @@ const PopsSearchSuggestion = {
                     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();
@@ -11551,11 +11643,15 @@ const PopsSearchSuggestion = {
              * 动态更新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
@@ -11565,29 +11661,38 @@ const PopsSearchSuggestion = {
                 // 更新位置
                 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 {
                     /* 清空 */
@@ -11596,13 +11701,24 @@ const PopsSearchSuggestion = {
             },
             /**
              * 清空当前的搜索结果并显示无结果
+             * @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();
                 }
             },
             /**
@@ -11613,25 +11729,25 @@ const PopsSearchSuggestion = {
                 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");
                 }
             },
         };
@@ -11643,7 +11759,7 @@ class Pops {
     /** 配置 */
     config = {
         /** 版本号 */
-        version: "2025.8.30",
+        version: "2025.9.4",
         cssText: PopsCSS,
         /** icon图标的svg代码 */
         iconSVG: PopsIcon.$data,