@whitesev/pops 2.5.5 → 2.6.0

package/src/components/drawer/index.ts

@@ -2,6 +2,7 @@ import { GlobalConfig } from "../../config/GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";
+import type { PopsHandlerEventConfig } from "../../types/event";
 import type { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { popsUtils } from "../../utils/PopsUtils";
@@ -99,32 +100,32 @@ export const PopsDrawer = {
     /**
      * 遮罩层元素
      */
-    let $mask: HTMLDivElement | null = null;
+    let $mask: HTMLDivElement | undefined = void 0;
     /**
      * 已创建的元素列表
      */
-    const elementList: HTMLElement[] = [$anim];
+    const $elList: HTMLElement[] = [$anim];
 
     if (config.mask.enable) {
-      const _handleMask_ = PopsHandler.handleMask({
+      const handleMask = PopsHandler.handleMask({
         type: popsType,
         guid: guid,
         config: config,
         animElement: $anim,
         maskHTML: maskHTML,
       });
-      $mask = _handleMask_.maskElement;
-      elementList.push($mask);
+      $mask = handleMask.maskElement;
+      $elList.push($mask);
     }
-    const eventDetails = PopsHandler.handleEventDetails(
+    const evtConfig = PopsHandler.handleEventConfig(
+      config,
       guid,
       $shadowContainer,
       $shadowRoot,
       popsType,
       $anim,
       $pops,
-      $mask!,
-      config
+      $mask
     );
     /* 处理方向 */
 
@@ -153,11 +154,14 @@ export const PopsDrawer = {
     /* 按下Esc键触发关闭 */
     if (config.closeOnPressEscape) {
       PopsHandler.handleKeyboardEvent("Escape", [], function () {
-        eventDetails.close();
+        evtConfig.close();
       });
     }
     /* 待处理的点击事件列表 */
-    const needHandleClickEventList = [
+    const needHandleClickEventList: {
+      type: PopsHandlerEventConfig["type"];
+      ele: HTMLElement;
+    }[] = [
       {
         type: "close",
         ele: $headerCloseBtn,
@@ -176,20 +180,16 @@ export const PopsDrawer = {
       },
     ];
     needHandleClickEventList.forEach((item) => {
-      PopsHandler.handleClickEvent(
-        item.type as "close" | "cancel" | "ok" | "other",
-        item.ele,
-        eventDetails,
-        (_eventDetails_) => {
-          if (typeof (config.btn as any)[item.type].callback === "function") {
-            (config.btn as any)[item.type].callback(_eventDetails_);
-          }
+      PopsHandler.handleClickEvent(item.type, item.ele, evtConfig, (details, event) => {
+        const callback = config.btn[item.type].callback;
+        if (typeof callback === "function") {
+          callback(details, event);
         }
-      );
+      });
     });
 
     /* 先隐藏，然后根据config.openDelay来显示 */
-    elementList.forEach((element) => {
+    $elList.forEach((element) => {
       element.style.setProperty("display", "none");
       if (["top"].includes(config.direction)) {
         $pops.style.setProperty("height", config.size.toString());
@@ -212,7 +212,7 @@ export const PopsDrawer = {
     });
     /* 创建到页面中 */
 
-    popsDOMUtils.append($shadowRoot, elementList);
+    popsDOMUtils.append($shadowRoot, $elList);
     if (typeof config.beforeAppendToPageCallBack === "function") {
       config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
     }
@@ -236,7 +236,7 @@ export const PopsDrawer = {
       $shadowContainer: $shadowContainer,
       $shadowRoot: $shadowRoot,
     });
-    const result = PopsHandler.handleResultDetails(eventDetails);
+    const result = PopsHandler.handleResultConfig(evtConfig);
     return result;
   },
 };

package/src/components/folder/index.ts

@@ -252,41 +252,41 @@ export const PopsFolder = {
     /**
      * 遮罩层元素
      */
-    let $mask: HTMLDivElement | null = null;
+    let $mask: HTMLDivElement | undefined = void 0;
     /**
      * 已创建的元素列表
      */
-    const elementList: HTMLElement[] = [$anim];
+    const $elList: HTMLElement[] = [$anim];
 
     if (config.mask.enable) {
-      const _handleMask_ = PopsHandler.handleMask({
+      const handleMask = PopsHandler.handleMask({
         type: popsType,
         guid: guid,
         config: config,
         animElement: $anim,
         maskHTML: maskHTML,
       });
-      $mask = _handleMask_.maskElement;
-      elementList.push($mask);
+      $mask = handleMask.maskElement;
+      $elList.push($mask);
     }
     /* 事件 */
-    const eventDetails = PopsHandler.handleEventDetails(
+    const evtConfig = PopsHandler.handleEventConfig(
+      config,
       guid,
       $shadowContainer,
       $shadowRoot,
       popsType,
       $anim,
       $pops,
-      $mask!,
-      config
+      $mask
     );
-    PopsHandler.handleClickEvent("close", $btnCloseBtn, eventDetails, config.btn.close!.callback!);
-    PopsHandler.handleClickEvent("ok", btnOkElement, eventDetails, config.btn.ok!.callback!);
-    PopsHandler.handleClickEvent("cancel", btnCancelElement, eventDetails, config.btn.cancel!.callback!);
-    PopsHandler.handleClickEvent("other", btnOtherElement, eventDetails, config.btn.other!.callback!);
+    PopsHandler.handleClickEvent("close", $btnCloseBtn, evtConfig, config.btn.close.callback);
+    PopsHandler.handleClickEvent("ok", btnOkElement, evtConfig, config.btn.ok.callback);
+    PopsHandler.handleClickEvent("cancel", btnCancelElement, evtConfig, config.btn.cancel.callback);
+    PopsHandler.handleClickEvent("other", btnOtherElement, evtConfig, config.btn.other.callback);
     /* 创建到页面中 */
 
-    popsDOMUtils.append($shadowRoot, elementList);
+    popsDOMUtils.append($shadowRoot, $elList);
     if (typeof config.beforeAppendToPageCallBack === "function") {
       config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
     }
@@ -923,7 +923,7 @@ export const PopsFolder = {
       $shadowContainer: $shadowContainer,
       $shadowRoot: $shadowRoot,
     });
-    const result = PopsHandler.handleResultDetails(eventDetails);
+    const result = PopsHandler.handleResultConfig(evtConfig);
     return result;
   },
 };

package/src/components/iframe/index.ts

@@ -4,7 +4,7 @@ import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";
 import { PopsInstData } from "../../PopsInst";
-import type { PopsEventDetails } from "../../types/event";
+import type { PopsEventConfig } from "../../types/event";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
@@ -115,14 +115,14 @@ export const PopsIframe = {
     /**
      * 遮罩层元素
      */
-    let $mask: HTMLDivElement | null = null;
+    let $mask: HTMLDivElement | undefined = void 0;
     /**
      * 已创建的元素列表
      */
-    const elementList: HTMLElement[] = [$anim];
+    const $elList: HTMLElement[] = [$anim];
 
     if (config.mask.enable) {
-      const _handleMask_ = PopsHandler.handleMask({
+      const handleMask = PopsHandler.handleMask({
         type: popsType,
         guid: guid,
 
@@ -130,25 +130,24 @@ export const PopsIframe = {
         animElement: $anim,
         maskHTML: maskHTML,
       });
-      $mask = _handleMask_.maskElement;
-      elementList.push($mask);
+      $mask = handleMask.maskElement;
+      $elList.push($mask);
     }
 
-    const eventDetails = PopsHandler.handleEventDetails(
+    const evtConfig = PopsHandler.handleEventConfig(
+      config,
       guid,
       $shadowContainer,
       $shadowRoot,
       popsType,
       $anim,
-
-      $pops!,
-      $mask!,
-      config
-    ) as any as PopsEventDetails & {
+      $pops,
+      $mask
+    ) as any as PopsEventConfig & {
       iframeElement: HTMLIFrameElement;
     };
 
-    eventDetails["iframeElement"] = $iframe!;
+    evtConfig["iframeElement"] = $iframe!;
 
     popsDOMUtils.on($anim, popsDOMUtils.getAnimationEndNameList(), function () {
       /* 动画加载完毕 */
@@ -170,11 +169,11 @@ export const PopsIframe = {
         $title!.querySelector<HTMLElement>("p")!.innerText = $iframe!.contentDocument.title;
       }
 
-      config.loadEndCallBack(eventDetails);
+      config.loadEndCallBack(evtConfig);
     });
     /* 创建到页面中 */
 
-    popsDOMUtils.append($shadowRoot, elementList);
+    popsDOMUtils.append($shadowRoot, $elList);
     if (typeof config.beforeAppendToPageCallBack === "function") {
       config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
     }
@@ -218,7 +217,7 @@ export const PopsIframe = {
         // 显示复位图标
         headerMiseBtnElement.style.setProperty("display", "");
         if (typeof config?.btn?.min?.callback === "function") {
-          config.btn.min.callback(eventDetails, event);
+          config.btn.min.callback(evtConfig, event);
         }
       },
       {
@@ -252,7 +251,7 @@ export const PopsIframe = {
         // 显示复位图标
         headerMiseBtnElement.style.setProperty("display", "");
         if (typeof config?.btn?.max?.callback === "function") {
-          config.btn.max.callback(eventDetails, event);
+          config.btn.max.callback(evtConfig, event);
         }
       },
       {
@@ -294,7 +293,7 @@ export const PopsIframe = {
           headerMiseBtnElement.style.setProperty("display", "none");
         }
         if (typeof config?.btn?.mise?.callback === "function") {
-          config.btn.mise.callback(eventDetails, event);
+          config.btn.mise.callback(evtConfig, event);
         }
       },
       {
@@ -310,7 +309,7 @@ export const PopsIframe = {
         event.stopPropagation();
         PopsInstanceUtils.removeInstance([PopsInstData.iframe], guid, false);
         if (typeof config?.btn?.close?.callback === "function") {
-          config.btn.close.callback(eventDetails, event);
+          config.btn.close.callback(evtConfig, event);
         }
       },
       {
@@ -329,7 +328,7 @@ export const PopsIframe = {
       $shadowRoot: $shadowRoot,
     });
 
-    const result = PopsHandler.handleResultDetails(eventDetails);
+    const result = PopsHandler.handleResultConfig(evtConfig);
     return result;
   },
 };

package/src/components/iframe/types/index.ts

@@ -1,6 +1,6 @@
 import type { PopsTitleConfig, PopsDragConfig, PopsCommonConfig } from "../../../types/components";
 
-import type { PopsEventDetails } from "../../../types/event";
+import type { PopsEventConfig } from "../../../types/event";
 
 /**
  * pops.iframe的按钮的点击回调参数event
@@ -65,7 +65,7 @@ export interface PopsIframeDetails extends PopsTitleConfig, PopsDragConfig, Pops
        * 点击的回调函数
        */
       callback: (
-        eventDetails: PopsEventDetails & {
+        eventConfig: PopsEventConfig & {
           iframeElement: HTMLIFrameElement;
         },
         event: MouseEvent | PointerEvent
@@ -79,7 +79,7 @@ export interface PopsIframeDetails extends PopsTitleConfig, PopsDragConfig, Pops
        * 点击的回调函数
        */
       callback: (
-        eventDetails: PopsEventDetails & {
+        eventConfig: PopsEventConfig & {
           iframeElement: HTMLIFrameElement;
         },
         event: MouseEvent | PointerEvent
@@ -93,7 +93,7 @@ export interface PopsIframeDetails extends PopsTitleConfig, PopsDragConfig, Pops
        * 点击的回调函数
        */
       callback: (
-        eventDetails: PopsEventDetails & {
+        eventConfig: PopsEventConfig & {
           iframeElement: HTMLIFrameElement;
         },
         event: MouseEvent | PointerEvent
@@ -107,7 +107,7 @@ export interface PopsIframeDetails extends PopsTitleConfig, PopsDragConfig, Pops
        * 点击的回调函数
        */
       callback: (
-        eventDetails: PopsEventDetails & {
+        eventConfig: PopsEventConfig & {
           iframeElement: HTMLIFrameElement;
         },
         event: MouseEvent | PointerEvent
@@ -132,7 +132,7 @@ export interface PopsIframeDetails extends PopsTitleConfig, PopsDragConfig, Pops
    * 加载完毕的回调
    */
   loadEndCallBack?: (
-    details: PopsEventDetails & {
+    details: PopsEventConfig & {
       iframeElement: HTMLIFrameElement;
     }
   ) => void;

package/src/components/loading/index.ts

@@ -56,15 +56,15 @@ export const PopsLoading = {
     /**
      * 遮罩层元素
      */
-    let $mask: HTMLDivElement | null = null;
+    let $mask: HTMLDivElement | undefined = void 0;
     /**
      * 已创建的元素列表
      */
-    const elementList: HTMLElement[] = [$anim];
+    const $elList: HTMLElement[] = [$anim];
 
     if (config.mask.enable) {
       // 创建遮罩层
-      const _handleMask_ = PopsHandler.handleMask({
+      const handleMask = PopsHandler.handleMask({
         type: PopsType,
         guid: guid,
 
@@ -72,11 +72,11 @@ export const PopsLoading = {
         animElement: $anim,
         maskHTML: maskHTML,
       });
-      $mask = _handleMask_.maskElement;
-      elementList.push($mask);
+      $mask = handleMask.maskElement;
+      $elList.push($mask);
     }
-    const eventDetails = PopsHandler.handleLoadingEventDetails(guid, PopsType, $anim, $pops!, $mask!, config);
-    popsDOMUtils.append(config.parent, elementList);
+    const evtConfig = PopsHandler.handleLoadingEventConfig(config, guid, PopsType, $anim, $pops, $mask);
+    popsDOMUtils.append(config.parent, $elList);
     if ($mask != null) {
       $anim.after($mask);
     }
@@ -93,7 +93,7 @@ export const PopsLoading = {
       popsDOMUtils.css($anim, "position", "absolute !important");
       $mask && popsDOMUtils.css($mask, "position", "absolute !important");
     }
-    const result = PopsHandler.handleResultDetails(eventDetails);
+    const result = PopsHandler.handleResultConfig(evtConfig);
     return result;
   },
 };

package/src/components/panel/index.css

@@ -278,6 +278,9 @@ section.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-container-
   .pops[type-value="panel"] section.pops-panel-container > ul > li div:nth-child(2) {
     max-width: 55%;
   }
+  .pops[type-value="panel"] section.pops-panel-container > ul > li .pops-panel-input span.pops-panel-input__suffix {
+    padding: 0 4px;
+  }
   .pops[type-value="panel"] section.pops-panel-container .pops-panel-select select {
     min-width: 88px !important;
     width: -webkit-fill-available;
@@ -668,6 +671,7 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
   background-color: var(--pops-panel-components-input-bg-color);
   position: relative;
   box-shadow: none;
+  width: 200px;
 }
 .pops-panel-input:hover {
   border: 1px solid var(--pops-panel-components-input-hover-bd-color);
@@ -724,7 +728,7 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
   transition: all 0.3s;
   pointer-events: none;
   padding: 0 8px;
-  position: absolute;
+  position: relative;
   right: 0px;
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
@@ -746,6 +750,13 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
 .pops-panel-input:active span.pops-panel-input__suffix:has(svg[data-type="circleClose"]) {
   display: inline-flex;
 }
+/* 当清空图标显示时，则隐藏输入框的padding-right */
+.pops-panel-input:hover:has(span.pops-panel-input__suffix svg[data-type="circleClose"]) input,
+.pops-panel-input:focus:has(span.pops-panel-input__suffix svg[data-type="circleClose"]) input,
+.pops-panel-input:focus-within:has(span.pops-panel-input__suffix svg[data-type="circleClose"]) input,
+.pops-panel-input:active:has(span.pops-panel-input__suffix svg[data-type="circleClose"]) input {
+  padding-right: 0;
+}
 .pops-panel-input .pops-panel-icon {
   cursor: pointer;
 }

package/src/components/panel/index.ts

@@ -129,41 +129,41 @@ export const PopsPanel = {
     /**
      * 遮罩层元素
      */
-    let $mask: HTMLDivElement | null = null;
+    let $mask: HTMLDivElement | undefined = void 0;
     /**
      * 已创建的元素列表
      */
-    const isCreatedElementList: HTMLElement[] = [$anim];
+    const $elList: HTMLElement[] = [$anim];
 
     /* 遮罩层元素 */
     if (config.mask.enable) {
-      const { maskElement } = PopsHandler.handleMask({
+      const handleMask = PopsHandler.handleMask({
         type: popsType,
         guid: guid,
         config: config,
         animElement: $anim,
         maskHTML: maskHTML,
       });
-      $mask = maskElement;
-      isCreatedElementList.push($mask);
+      $mask = handleMask.maskElement;
+      $elList.push($mask);
     }
 
     /* 处理返回的配置 */
-    const eventDetails = PopsHandler.handleEventDetails(
+    const evtConfig = PopsHandler.handleEventConfig(
+      config,
       guid,
       $shadowContainer,
       $shadowRoot,
       popsType,
       $anim,
       $pops,
-      $mask!,
-      config
+      $mask
     );
     /* 为顶部右边的关闭按钮添加点击事件 */
-    PopsHandler.handleClickEvent("close", $headerBtnClose, eventDetails, config.btn.close!.callback!);
+    PopsHandler.handleClickEvent("close", $headerBtnClose, evtConfig, config.btn?.close?.callback);
 
     /* 创建到页面中 */
-    popsDOMUtils.append($shadowRoot, isCreatedElementList);
+    popsDOMUtils.append($shadowRoot, $elList);
     if (typeof config.beforeAppendToPageCallBack === "function") {
       config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
     }
@@ -209,7 +209,7 @@ export const PopsPanel = {
         endCallBack: config.dragEndCallBack,
       });
     }
-    const result = PopsHandler.handleResultDetails(eventDetails);
+    const result = PopsHandler.handleResultConfig(evtConfig);
 
     return {
       ...result,

package/src/components/prompt/index.ts

@@ -104,76 +104,75 @@ export const PopsPrompt = {
     /**
      * 遮罩层元素
      */
-    let $mask: HTMLDivElement | null = null;
+    let $mask: HTMLDivElement | undefined = void 0;
 
     /**
      * 已创建的元素列表
      */
-    const elementList: HTMLElement[] = [$anim];
+    const $elList: HTMLElement[] = [$anim];
 
     if (config.mask.enable) {
       // 启用遮罩层
-      const _handleMask_ = PopsHandler.handleMask({
+      const handleMask = PopsHandler.handleMask({
         type: popsType,
         guid: guid,
         config: config,
         animElement: $anim,
         maskHTML: maskHTML,
       });
-      $mask = _handleMask_.maskElement;
-      elementList.push($mask);
+      $mask = handleMask.maskElement;
+      $elList.push($mask);
     }
-    const eventDetails = PopsHandler.handleEventDetails(
+    const evtConfig = PopsHandler.handleEventConfig(
+      config,
       guid,
       $shadowContainer,
       $shadowRoot,
       popsType,
       $anim,
-
-      $pops!,
-      $mask!,
-      config
+      $pops,
+      $mask
     );
     /* 输入框赋值初始值 */
 
-    $input!.value = config.content.text;
+    $input.value = config.content.text;
     PopsHandler.handlePromptClickEvent(
       "close",
-      $input!,
-      $btnClose!,
-      eventDetails,
+      $input,
+      $btnClose,
+      evtConfig,
 
-      config.btn.close!.callback!
+      config.btn.close.callback
     );
 
     PopsHandler.handlePromptClickEvent(
       "ok",
-      $input!,
-      $btnOk!,
-      eventDetails,
+      $input,
+      $btnOk,
+      evtConfig,
 
-      config.btn.ok!.callback!
+      config.btn.ok.callback
     );
     PopsHandler.handlePromptClickEvent(
       "cancel",
-      $input!,
-      $btnCancel!,
-      eventDetails,
+      $input,
+      $btnCancel,
+      evtConfig,
 
-      config.btn.cancel!.callback!
+      config.btn.cancel.callback
     );
 
     PopsHandler.handlePromptClickEvent(
       "other",
-      $input!,
-      $btnOther!,
-      eventDetails,
+      $input,
+      $btnOther,
+      evtConfig,
 
-      config.btn.other!.callback!
+      config.btn.other.callback
     );
     /* 创建到页面中 */
 
-    popsDOMUtils.append($shadowRoot, elementList);
+    popsDOMUtils.append($shadowRoot, $elList);
     if (typeof config.beforeAppendToPageCallBack === "function") {
       config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
     }
@@ -210,7 +209,7 @@ export const PopsPrompt = {
     if (config.content.select) {
       $input.select();
     }
-    const result = PopsHandler.handleResultDetails(eventDetails);
+    const result = PopsHandler.handleResultConfig(evtConfig);
     return result;
   },
 };