@whitesev/pops 3.3.0 → 3.3.2

package/src/components/tooltip/index.ts

@@ -1,4 +1,5 @@
 import { GlobalConfig } from "../../config/GlobalConfig";
+import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";
 import type { PopsType } from "../../types/main";
@@ -85,14 +86,12 @@ export class ToolTip {
     popsDOMUtils.addClassName($toolTipContainer, this.$data.config.className);
     // 添加z-index
     $toolTipContainer.style.zIndex = PopsHandler.handleZIndex(this.$data.config.zIndex).toString();
-    if (this.$data.config.style != null) {
-      // 添加自定义style
-      const cssNode = popsDOMUtils.createElement("style", {
-        type: "text/css",
-        innerHTML: this.$data.config.style,
-      });
-      $toolTipContainer.appendChild(cssNode);
-    }
+    // 添加自定义style
+    PopsElementHandler.addStyle($toolTipContainer, this.$data.config.style);
+    // 添加自定义浅色style
+    PopsElementHandler.addLightStyle($toolTipContainer, this.$data.config.lightStyle);
+    // 添加自定义深色style
+    PopsElementHandler.addDarkStyle($toolTipContainer, this.$data.config.darkStyle);
     // 处理是否显示箭头元素
     if (!this.$data.config.showArrow) {
       $toolTipArrow.remove();

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

@@ -9,7 +9,7 @@ export type PopsTooltipPosition = "top" | "right" | "bottom" | "left" | "follow"
  */
 export interface PopsToolTipConfig extends Pick<
   PopsGeneralConfig,
-  "useShadowRoot" | "only" | "zIndex" | "style" | "beforeAppendToPageCallBack"
+  "useShadowRoot" | "only" | "zIndex" | "style" | "lightStyle" | "darkStyle" | "beforeAppendToPageCallBack"
 > {
   /**
    * 目标元素

package/src/css/index.css

@@ -28,6 +28,7 @@
   .pops {
     --pops-mask-bg-opacity: 0.8;
     --pops-color: #ffffff;
+    --pops-dark-color: #262626;
     --pops-bg-color: rgb(17, 17, 17, var(--pops-bg-opacity));
     --pops-bd-color: rgb(55, 55, 55, var(--pops-bd-opacity));
     --pops-box-shadow-color: rgba(81, 81, 81, 0.12);

package/src/handler/PopsElementHandler.ts

@@ -1,18 +1,18 @@
 import type { PopsAlertConfig } from "../components/alert/types";
 import type { PopsConfirmConfig } from "../components/confirm/types";
 import type { PopsIframeConfig } from "../components/iframe/types";
+import { PopsIcon } from "../PopsIcon";
 import type { PopsIconType } from "../types/icon";
 import type {
   PopsSupportAnimConfig,
-  PopsSupportBottomButtonConfig,
-  PopsSupportContentConfig,
-  PopsSupportHeaderTitleConfig,
   PopsSupportAnimConfigType,
+  PopsSupportBottomButtonConfig,
   PopsSupportBottomButtonConfigType,
+  PopsSupportContentConfig,
   PopsSupportContentConfigType,
+  PopsSupportHeaderTitleConfig,
   PopsSupportHeaderTitleConfigType,
 } from "../types/main";
-import { PopsIcon } from "../PopsIcon";
 import { popsDOMUtils } from "../utils/PopsDOMUtils";
 
 export const PopsElementHandler = {
@@ -46,25 +46,27 @@ export const PopsElementHandler = {
     bottomBtnHTML = "",
     zIndex: number
   ) {
-    const __config = config as PopsAlertConfig;
+    const __config__ = config as PopsAlertConfig;
     let popsAnimStyle = "";
     let popsStyle = "";
-    const popsPosition = __config.position || "";
+    const popsPosition = __config__.position || "";
     if (config.zIndex != null) {
       popsAnimStyle += `z-index: ${zIndex};`;
       popsStyle += `z-index: ${zIndex};`;
     }
-    if (__config.width != null) {
-      popsStyle += `width: ${__config.width};`;
+    if (__config__.width != null) {
+      popsStyle += `width: ${__config__.width};`;
     }
-    if (__config.height != null) {
-      popsStyle += `height: ${__config.height};`;
+    if (__config__.height != null) {
+      popsStyle += `height: ${__config__.height};`;
     }
     const hasBottomBtn = bottomBtnHTML.trim() === "" ? false : true;
     return /*html*/ `
-		<div class="pops-anim" anim="${__config.animation || ""}" style="${popsAnimStyle}" data-guid="${guid}">${
-      config.style != null ? `<style tyle="text/css">${config.style}</style>` : ""
+		<div class="pops-anim" anim="${__config__.animation || ""}" style="${popsAnimStyle}" data-guid="${guid}">${
+      config.style != null ? /*html*/ `<style tyle="text/css" data-name="style">${config.style}</style>` : ""
     }
+    ${config.lightStyle != null ? /*html*/ `<style tyle="text/css" data-name="lightStyle">@media (prefers-color-scheme: light) {${config.lightStyle}}</style>` : ""}
+    ${config.darkStyle != null ? /*html*/ `<style tyle="text/css" data-name="darkStyle">@media (prefers-color-scheme: dark) {${config.darkStyle}}</style>` : ""}
 			<div class="pops ${
         config.class || ""
       }" data-bottom-btn="${hasBottomBtn}" type-value="${type}" style="${popsStyle}" position="${popsPosition}" data-guid="${guid}">${html}</div>
@@ -300,4 +302,54 @@ export const PopsElementHandler = {
   parseElement<T extends HTMLElement>(html: string): T {
     return popsDOMUtils.parseTextToDOM(html);
   },
+  /**
+   * 添加样式元素
+   */
+  addStyle($parent: HTMLElement | ShadowRoot, style?: string | null) {
+    if (style == null) return;
+    const $css = popsDOMUtils.createElement(
+      "style",
+      {
+        innerHTML: style,
+      },
+      {
+        type: "text/css",
+        "data-name": "general",
+      }
+    );
+    $parent.appendChild($css);
+    return $css;
+  },
+  /**
+   * 添加在浅色模式下生效的style元素
+   */
+  addLightStyle($parent: HTMLElement | ShadowRoot, style?: string | null) {
+    const darkCSS = /*css*/ `
+      @media (prefers-color-scheme: light) {
+        ${style}
+      }
+    `;
+    const $css = this.addStyle($parent, darkCSS);
+    if (!$css) {
+      return;
+    }
+    $css.setAttribute("data-name", "light");
+    return $css;
+  },
+  /**
+   * 添加在深色模式下生效的style元素
+   */
+  addDarkStyle($parent: HTMLElement | ShadowRoot, style?: string | null) {
+    const darkCSS = /*css*/ `
+      @media (prefers-color-scheme: dark) {
+        ${style}
+      }
+    `;
+    const $css = this.addStyle($parent, darkCSS);
+    if (!$css) {
+      return;
+    }
+    $css.setAttribute("data-name", "dark");
+    return $css;
+  },
 };

package/src/handler/PopsHandler.ts

@@ -171,14 +171,14 @@ export const PopsHandler = {
         );
       }
       // 判断按下的元素是否是pops-anim
-      popsDOMUtils.on(config.animElement, ["touchstart", "mousedown"], (event) => {
+      popsDOMUtils.on(config.animElement, "pointerup", (event) => {
         const $click = event.composedPath()[0] as HTMLElement;
         isMaskClick = isAnimElement($click);
       });
       // 如果有动画层，在动画层上监听点击事件
       popsDOMUtils.on<MouseEvent | PointerEvent>(config.animElement, "click", (event) => {
         const $click = event.composedPath()[0] as HTMLElement;
-        if (isAnimElement($click) && isMaskClick) {
+        if (isMaskClick && isAnimElement($click)) {
           return clickEvent(event);
         }
       });

package/src/types/components.d.ts

@@ -202,6 +202,18 @@ export interface PopsGeneralConfig {
    * @default ""
    */
   style?: string | null;
+  /**
+   * （可选）自定义浅色模式的style
+   *
+   * 传入的css都在dark内
+   */
+  lightStyle?: string | null;
+  /**
+   * （可选）自定义深色模式的style
+   *
+   * 传入的css都在dark内
+   */
+  darkStyle?: string | null;
   /**
    * 在元素添加到页面前的事件
    * @param $shadowRoot 根元素

package/src/utils/PopsUtils.ts

@@ -1,6 +1,7 @@
+import AnyTouch from "any-touch";
+import doubletap from "@any-touch/doubletap";
 import { PopsCore } from "../PopsCore";
 import type { PopsUtilsOwnObject } from "../types/main";
-import AnyTouch from "any-touch";
 
 class PopsUtils {
   /**
@@ -336,9 +337,18 @@ class PopsUtils {
     result = addType ? result + resultType.toString() : (parseFloat(result.toString()) as any);
     return result;
   }
+  /**
+   * https://github.com/any86/any-touch/blob/master/README.CN.md
+   */
   AnyTouch = () => {
     return AnyTouch;
   };
+  /**
+   * `any-touch`的`doubletap`事件插件
+   */
+  AnyTouchDoubleTapPlugin = () => {
+    return doubletap;
+  };
   /**
    * 通过navigator.userAgent判断是否是手机访问
    * @param userAgent