@whitesev/pops 3.2.2 → 3.3.1

package/src/components/searchSuggestion/index.ts

@@ -1,13 +1,14 @@
+import { PopsCommonCSSClassName } from "../../config/CommonCSSClassName";
+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";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
+import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsSearchSuggestionDefaultConfig } from "./defaultConfig";
-import { GlobalConfig } from "../../config/GlobalConfig";
-import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
-import type { PopsSearchSuggestionData, PopsSearchSuggestionConfig } from "./types/index";
-import { PopsCSS } from "../../PopsCSS";
-import type { PopsType } from "../../types/main";
-import { PopsCommonCSSClassName } from "../../config/CommonCSSClassName";
+import type { PopsSearchSuggestionConfig, PopsSearchSuggestionData } from "./types/index";
 
 export const PopsSearchSuggestion = {
   init<T>(__config__: PopsSearchSuggestionConfig<T>) {
@@ -39,13 +40,12 @@ export const PopsSearchSuggestion = {
       },
     ]);
 
-    if (config.style != null) {
-      const $css = popsDOMUtils.createElement("style", {
-        type: "text/css",
-        innerHTML: config.style,
-      });
-      $shadowRoot.appendChild($css);
-    }
+    // 添加自定义style
+    PopsElementHandler.addStyle($shadowRoot, config.style);
+    // 添加自定义浅色style
+    PopsElementHandler.addLightStyle($shadowRoot, config.lightStyle);
+    // 添加自定义深色style
+    PopsElementHandler.addDarkStyle($shadowRoot, config.darkStyle);
     /**
      * 监听器的默认配置
      */

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

@@ -106,7 +106,7 @@ export type PopsSearchSuggestionData<T> = {
  */
 export interface PopsSearchSuggestionConfig<T = any> extends Pick<
   PopsGeneralConfig,
-  "useShadowRoot" | "zIndex" | "style"
+  "useShadowRoot" | "zIndex" | "style" | "lightStyle" | "darkStyle"
 > {
   /**
    * 当前的环境，可以是document，可以是shadowroot，默认是document

package/src/components/tooltip/defaultConfig.ts

@@ -28,6 +28,8 @@ export const PopsTooltipDefaultConfig = (): DeepRequired<PopsToolTipConfig> => {
     arrowDistance: 12.5,
     otherDistance: 0,
     style: "",
+    lightStyle: null,
+    darkStyle: null,
     beforeAppendToPageCallBack() {},
   };
 };

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/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,12 +1,6 @@
+import AnyTouch from "any-touch";
 import { PopsCore } from "../PopsCore";
 import type { PopsUtilsOwnObject } from "../types/main";
-import {
-  clearInterval as WorkerClearInterval,
-  clearTimeout as WorkerClearTimeout,
-  setInterval as WorkerSetInterval,
-  setTimeout as WorkerSetTimeout,
-} from "worker-timers";
-import AnyTouch from "any-touch";
 
 class PopsUtils {
   /**
@@ -356,49 +350,25 @@ class PopsUtils {
    * 自动使用 Worker 执行 setTimeout
    */
   setTimeout(callback: (...args: any[]) => any, timeout: number = 0) {
-    try {
-      return WorkerSetTimeout(callback, timeout);
-    } catch {
-      return setTimeout(callback, timeout);
-    }
+    return PopsCore.setTimeout(callback, timeout);
   }
   /**
    * 配合 .setTimeout 使用
    */
   clearTimeout(timeId: number | undefined) {
-    try {
-      if (timeId != null) {
-        WorkerClearTimeout(timeId);
-      }
-    } catch {
-      // TODO
-    } finally {
-      clearTimeout(timeId);
-    }
+    return PopsCore.clearTimeout(timeId);
   }
   /**
    * 自动使用 Worker 执行 setInterval
    */
   setInterval(callback: (...args: any[]) => any, timeout: number = 0) {
-    try {
-      return WorkerSetInterval(callback, timeout);
-    } catch {
-      return setInterval(callback, timeout);
-    }
+    return PopsCore.setInterval(callback, timeout);
   }
   /**
    * 配合 .setInterval 使用
    */
   clearInterval(timeId: number | undefined) {
-    try {
-      if (timeId != null) {
-        WorkerClearInterval(timeId);
-      }
-    } catch {
-      // 忽略
-    } finally {
-      clearInterval(timeId);
-    }
+    return PopsCore.clearInterval(timeId);
   }
   /**
    * 覆盖对象中的数组新值