@whitesev/pops 3.2.1 → 3.3.0

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

@@ -1,96 +1,96 @@
-import type { PopsTitleConfig, PopsDragConfig, PopsGeneralConfig } from "../../../types/components";
-
-import type { PopsEventConfig } from "../../../types/event";
-
-/**
- * pops.iframe的按钮点击事件回调的配置参数
- */
-export type PopsIframeClickEventConfig = PopsEventConfig & {
-  /**
-   * iframe元素
-   */
-  $iframe: HTMLIFrameElement;
-};
-
-/**
- * pops.iframe
- */
-export interface PopsIframeConfig extends PopsTitleConfig, PopsDragConfig, PopsGeneralConfig {
-  /**
-   * 加载配置
-   */
-  loading: {
-    /**
-     * 是否启用加载中的loading
-     */
-    enable: boolean;
-    /**
-     * 是否启用loading图标
-     */
-    icon: boolean;
-    /**
-     * 文字
-     */
-    text: string;
-  };
-  /**
-   * 按钮配置
-   */
-  btn: {
-    /**
-     * 最小化
-     */
-    min: {
-      /**
-       * 点击的回调函数
-       */
-      callback: (eventConfig: PopsIframeClickEventConfig, event: MouseEvent | PointerEvent) => void;
-    };
-    /**
-     * 最大化
-     */
-    max: {
-      /**
-       * 点击的回调函数
-       */
-      callback: (eventConfig: PopsIframeClickEventConfig, event: MouseEvent | PointerEvent) => void;
-    };
-    /**
-     * 窗口化
-     */
-    mise: {
-      /**
-       * 点击的回调函数
-       */
-      callback: (eventConfig: PopsIframeClickEventConfig, event: MouseEvent | PointerEvent) => void;
-    };
-    /**
-     * 关闭
-     */
-    close: {
-      /**
-       * 点击的回调函数
-       */
-      callback: (eventConfig: PopsIframeClickEventConfig, event: MouseEvent | PointerEvent) => void;
-    };
-  };
-  /**
-   * 加载的地址，默认为window.location.href
-   * @default window.location.href
-   */
-  url?: string;
-  /**
-   * 右上角按钮顺序：最小化、最大化、窗口化、关闭
-   * @default "min|max|mise|close"
-   */
-  topRightButton: string;
-  /**
-   * 是否启用沙箱，默认false
-   * @default false
-   */
-  sandbox?: boolean;
-  /**
-   * 加载完毕的回调
-   */
-  loadEndCallBack?: (eventConfig: PopsIframeClickEventConfig) => void;
-}
+import type { PopsTitleConfig, PopsDragConfig, PopsGeneralConfig } from "../../../types/components";
+
+import type { PopsEventConfig } from "../../../types/event";
+
+/**
+ * pops.iframe的按钮点击事件回调的配置参数
+ */
+export type PopsIframeClickEventConfig = PopsEventConfig & {
+  /**
+   * iframe元素
+   */
+  $iframe: HTMLIFrameElement;
+};
+
+/**
+ * pops.iframe
+ */
+export interface PopsIframeConfig extends PopsTitleConfig, PopsDragConfig, PopsGeneralConfig {
+  /**
+   * 加载配置
+   */
+  loading: {
+    /**
+     * 是否启用加载中的loading
+     */
+    enable: boolean;
+    /**
+     * 是否启用loading图标
+     */
+    icon: boolean;
+    /**
+     * 文字
+     */
+    text: string;
+  };
+  /**
+   * 按钮配置
+   */
+  btn: {
+    /**
+     * 最小化
+     */
+    min: {
+      /**
+       * 点击的回调函数
+       */
+      callback: (eventConfig: PopsIframeClickEventConfig, event: MouseEvent | PointerEvent) => void;
+    };
+    /**
+     * 最大化
+     */
+    max: {
+      /**
+       * 点击的回调函数
+       */
+      callback: (eventConfig: PopsIframeClickEventConfig, event: MouseEvent | PointerEvent) => void;
+    };
+    /**
+     * 窗口化
+     */
+    mise: {
+      /**
+       * 点击的回调函数
+       */
+      callback: (eventConfig: PopsIframeClickEventConfig, event: MouseEvent | PointerEvent) => void;
+    };
+    /**
+     * 关闭
+     */
+    close: {
+      /**
+       * 点击的回调函数
+       */
+      callback: (eventConfig: PopsIframeClickEventConfig, event: MouseEvent | PointerEvent) => void;
+    };
+  };
+  /**
+   * 加载的地址，默认为window.location.href
+   * @default window.location.href
+   */
+  url?: string;
+  /**
+   * 右上角按钮顺序：最小化、最大化、窗口化、关闭
+   * @default "min|max|mise|close"
+   */
+  topRightButton: string;
+  /**
+   * 是否启用沙箱，默认false
+   * @default false
+   */
+  sandbox?: boolean;
+  /**
+   * 加载完毕的回调
+   */
+  loadEndCallBack?: (eventConfig: PopsIframeClickEventConfig) => void;
+}

package/src/components/loading/defaultConfig.ts

@@ -1,29 +1,29 @@
-import type { PopsLoadingConfig } from "./types";
-
-export const PopsLoadingDefaultConfig = (): DeepRequired<PopsLoadingConfig> => {
-  return {
-    $parent: document.body || document.documentElement,
-    content: {
-      text: "加载中...",
-      icon: "loading",
-      style: "",
-    },
-    useShadowRoot: true,
-    class: "",
-    only: false,
-    zIndex: 10000,
-    mask: {
-      enable: false,
-      clickEvent: {
-        toClose: false,
-        toHide: false,
-      },
-      clickCallBack: null,
-    },
-    animation: "pops-anim-fadein-zoom",
-    forbiddenScroll: false,
-    isAbsolute: false,
-    style: null,
-    addIndexCSS: true,
-  };
-};
+import type { PopsLoadingConfig } from "./types";
+
+export const PopsLoadingDefaultConfig = (): DeepRequired<PopsLoadingConfig> => {
+  return {
+    $parent: document.body || document.documentElement,
+    content: {
+      text: "加载中...",
+      icon: "loading",
+      style: "",
+    },
+    useShadowRoot: true,
+    class: "",
+    only: false,
+    zIndex: 10000,
+    mask: {
+      enable: false,
+      clickEvent: {
+        toClose: false,
+        toHide: false,
+      },
+      clickCallBack: null,
+    },
+    animation: "pops-anim-fadein-zoom",
+    forbiddenScroll: false,
+    isAbsolute: false,
+    style: null,
+    addIndexCSS: true,
+  };
+};

package/src/components/loading/index.css

@@ -1,66 +1,66 @@
-.pops[type-value="loading"] {
-  --loading-bd-color: rgba(0, 0, 0, 0.2);
-  --loading-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
-  --loading-box-shadow-color: rgb(0 0 0 / 50%);
-  --loading-icon-color: rgba(100, 149, 237, 0.1);
-  --loading-icon-bd-top-color: rgb(100, 149, 237, var(--pops-bd-opacity));
-}
-.pops[type-value="loading"] {
-  position: absolute;
-  top: 272.5px;
-  top: 50%;
-  left: 26px;
-  left: 50%;
-  display: flex;
-  overflow: hidden;
-  padding: 10px 15px;
-  max-width: 100%;
-  max-height: 100%;
-  min-width: 0;
-  min-height: 0;
-  border: 1px solid var(--loading-bd-color);
-  border-radius: 5px;
-  background-color: var(--loading-bg-color);
-  box-shadow: 0 0 5px var(--loading-box-shadow-color);
-  vertical-align: middle;
-  transition: all 0.35s;
-  transform: translate(-50%, -50%);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  align-content: center;
-}
-.pops[type-value="loading"]:before {
-  float: left;
-  display: inline-block;
-  width: 2em;
-  height: 2em;
-  border: 0.3em solid var(--loading-icon-color);
-  border-top: 0.3em solid var(--loading-icon-bd-top-color);
-  border-radius: 50%;
-  content: " ";
-  vertical-align: middle;
-  font-size: inherit;
-  animation: pops-anim-wait-rotate 1.2s linear infinite;
-}
-.pops[type-value="loading"] .pops-loading-content {
-  position: static;
-  top: 0;
-  bottom: 0;
-  float: left;
-  overflow: hidden;
-  width: auto;
-  font-size: inherit;
-  line-height: normal;
-  align-content: center;
-}
-
-@media (prefers-color-scheme: dark) {
-  .pops[type-value="loading"] {
-    --loading-bg-color: #222222;
-  }
-}
+.pops[type-value="loading"] {
+  --loading-bd-color: rgba(0, 0, 0, 0.2);
+  --loading-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
+  --loading-box-shadow-color: rgb(0 0 0 / 50%);
+  --loading-icon-color: rgba(100, 149, 237, 0.1);
+  --loading-icon-bd-top-color: rgb(100, 149, 237, var(--pops-bd-opacity));
+}
+.pops[type-value="loading"] {
+  position: absolute;
+  top: 272.5px;
+  top: 50%;
+  left: 26px;
+  left: 50%;
+  display: flex;
+  overflow: hidden;
+  padding: 10px 15px;
+  max-width: 100%;
+  max-height: 100%;
+  min-width: 0;
+  min-height: 0;
+  border: 1px solid var(--loading-bd-color);
+  border-radius: 5px;
+  background-color: var(--loading-bg-color);
+  box-shadow: 0 0 5px var(--loading-box-shadow-color);
+  vertical-align: middle;
+  transition: all 0.35s;
+  transform: translate(-50%, -50%);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  align-content: center;
+}
+.pops[type-value="loading"]:before {
+  float: left;
+  display: inline-block;
+  width: 2em;
+  height: 2em;
+  border: 0.3em solid var(--loading-icon-color);
+  border-top: 0.3em solid var(--loading-icon-bd-top-color);
+  border-radius: 50%;
+  content: " ";
+  vertical-align: middle;
+  font-size: inherit;
+  animation: pops-anim-wait-rotate 1.2s linear infinite;
+}
+.pops[type-value="loading"] .pops-loading-content {
+  position: static;
+  top: 0;
+  bottom: 0;
+  float: left;
+  overflow: hidden;
+  width: auto;
+  font-size: inherit;
+  line-height: normal;
+  align-content: center;
+}
+
+@media (prefers-color-scheme: dark) {
+  .pops[type-value="loading"] {
+    --loading-bg-color: #222222;
+  }
+}

package/src/components/loading/index.ts

@@ -1,101 +1,101 @@
-import { GlobalConfig } from "../../config/GlobalConfig";
-import { PopsElementHandler } from "../../handler/PopsElementHandler";
-import { PopsHandler } from "../../handler/PopsHandler";
-import { PopsCSS } from "../../PopsCSS";
-import { popsDOMUtils } from "../../utils/PopsDOMUtils";
-import { popsUtils } from "../../utils/PopsUtils";
-import { PopsLoadingDefaultConfig } from "./defaultConfig";
-import type { PopsLoadingConfig } from "./types";
-
-export const PopsLoading = {
-  init(__config__: PopsLoadingConfig) {
-    const guid = popsUtils.getRandomGUID();
-    // 设置当前类型
-    const PopsType = "loading";
-    let config = PopsLoadingDefaultConfig();
-    config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-    config = popsUtils.assign(config, __config__);
-
-    config = PopsHandler.handleOnly(PopsType, config);
-
-    // 先把z-index提取出来
-    const zIndex = PopsHandler.handleZIndex(config.zIndex);
-    const maskHTML = PopsElementHandler.createMask(guid, zIndex);
-
-    const { contentPStyle } = PopsElementHandler.createContentStyle("loading", config);
-    const animHTML = PopsElementHandler.createAnim(
-      guid,
-      PopsType,
-      config,
-      /*html*/ `
-            <div class="pops-content pops-${PopsType}-content">${
-              config.addIndexCSS
-                ? /*html*/ `
-                <style data-model-name="index">${PopsCSS.index}</style>
-                <style data-model-name="anim">${PopsCSS.anim}</style>
-                <style data-model-name="common">${PopsCSS.common}</style>
-                `
-                : ""
-            }
-                <style data-model-name="loadingCSS">
-                    ${PopsCSS.loadingCSS}
-                </style>
-            ${config.style != null ? `<style>${config.style}</style>` : ""}
-            	<p pops class="pops-${PopsType}-content-text" style="${contentPStyle}">${config.content.text}</p>
-            </div>`,
-      "",
-      zIndex
-    );
-
-    /**
-     * 弹窗的主元素，包括动画层
-     */
-
-    const $anim = PopsElementHandler.parseElement<HTMLDivElement>(animHTML);
-
-    const { $pops: $pops } = PopsHandler.handleQueryElement($anim, PopsType);
-    /**
-     * 遮罩层元素
-     */
-    let $mask: HTMLDivElement | undefined = void 0;
-    /**
-     * 已创建的元素列表
-     */
-    const $elList: HTMLElement[] = [$anim];
-
-    if (config.mask.enable) {
-      // 创建遮罩层
-      const handleMask = PopsHandler.handleMask({
-        type: PopsType,
-        guid: guid,
-
-        config: config,
-        animElement: $anim,
-        maskHTML: maskHTML,
-      });
-      $mask = handleMask.maskElement;
-      $elList.push($mask);
-    }
-    const evtConfig = PopsHandler.handleLoadingEventConfig(config, guid, PopsType, $anim, $pops, $mask);
-    popsDOMUtils.append(config.$parent, $elList);
-    if ($mask != null) {
-      $anim.after($mask);
-    }
-    // @ts-ignore
-    PopsHandler.handlePush(PopsType, {
-      guid: guid,
-      $anim: $anim,
-      $pops: $pops!,
-      $mask: $mask!,
-    });
-
-    if (config.isAbsolute) {
-      // 遮罩层必须是跟随主内容
-      // 即设置主内容position: relative，mask：position: absolute
-      popsDOMUtils.css($anim, "position", "absolute !important");
-      $mask && popsDOMUtils.css($mask, "position", "absolute !important");
-    }
-    const result = PopsHandler.handleResultConfig(evtConfig);
-    return result;
-  },
-};
+import { GlobalConfig } from "../../config/GlobalConfig";
+import { PopsElementHandler } from "../../handler/PopsElementHandler";
+import { PopsHandler } from "../../handler/PopsHandler";
+import { PopsCSS } from "../../PopsCSS";
+import { popsDOMUtils } from "../../utils/PopsDOMUtils";
+import { popsUtils } from "../../utils/PopsUtils";
+import { PopsLoadingDefaultConfig } from "./defaultConfig";
+import type { PopsLoadingConfig } from "./types";
+
+export const PopsLoading = {
+  init(__config__: PopsLoadingConfig) {
+    const guid = popsUtils.getRandomGUID();
+    // 设置当前类型
+    const PopsType = "loading";
+    let config = PopsLoadingDefaultConfig();
+    config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
+    config = popsUtils.assign(config, __config__);
+
+    config = PopsHandler.handleOnly(PopsType, config);
+
+    // 先把z-index提取出来
+    const zIndex = PopsHandler.handleZIndex(config.zIndex);
+    const maskHTML = PopsElementHandler.createMask(guid, zIndex);
+
+    const { contentPStyle } = PopsElementHandler.createContentStyle("loading", config);
+    const animHTML = PopsElementHandler.createAnim(
+      guid,
+      PopsType,
+      config,
+      /*html*/ `
+            <div class="pops-content pops-${PopsType}-content">${
+              config.addIndexCSS
+                ? /*html*/ `
+                <style data-model-name="index">${PopsCSS.index}</style>
+                <style data-model-name="anim">${PopsCSS.anim}</style>
+                <style data-model-name="common">${PopsCSS.common}</style>
+                `
+                : ""
+            }
+                <style data-model-name="loadingCSS">
+                    ${PopsCSS.loadingCSS}
+                </style>
+            ${config.style != null ? `<style>${config.style}</style>` : ""}
+            	<p pops class="pops-${PopsType}-content-text" style="${contentPStyle}">${config.content.text}</p>
+            </div>`,
+      "",
+      zIndex
+    );
+
+    /**
+     * 弹窗的主元素，包括动画层
+     */
+
+    const $anim = PopsElementHandler.parseElement<HTMLDivElement>(animHTML);
+
+    const { $pops: $pops } = PopsHandler.handleQueryElement($anim, PopsType);
+    /**
+     * 遮罩层元素
+     */
+    let $mask: HTMLDivElement | undefined = void 0;
+    /**
+     * 已创建的元素列表
+     */
+    const $elList: HTMLElement[] = [$anim];
+
+    if (config.mask.enable) {
+      // 创建遮罩层
+      const handleMask = PopsHandler.handleMask({
+        type: PopsType,
+        guid: guid,
+
+        config: config,
+        animElement: $anim,
+        maskHTML: maskHTML,
+      });
+      $mask = handleMask.maskElement;
+      $elList.push($mask);
+    }
+    const evtConfig = PopsHandler.handleLoadingEventConfig(config, guid, PopsType, $anim, $pops, $mask);
+    popsDOMUtils.append(config.$parent, $elList);
+    if ($mask != null) {
+      $anim.after($mask);
+    }
+    // @ts-ignore
+    PopsHandler.handlePush(PopsType, {
+      guid: guid,
+      $anim: $anim,
+      $pops: $pops!,
+      $mask: $mask!,
+    });
+
+    if (config.isAbsolute) {
+      // 遮罩层必须是跟随主内容
+      // 即设置主内容position: relative，mask：position: absolute
+      popsDOMUtils.css($anim, "position", "absolute !important");
+      $mask && popsDOMUtils.css($mask, "position", "absolute !important");
+    }
+    const result = PopsHandler.handleResultConfig(evtConfig);
+    return result;
+  },
+};

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

@@ -1,34 +1,36 @@
-import type { PopsGeneralConfig, PopsContentConfig } from "../../../types/components";
-
-/**
- * pops.loading
- */
-export interface PopsLoadingConfig
-  extends Omit<PopsGeneralConfig, "width" | "height" | "position" | "beforeAppendToPageCallBack"> {
-  /**
-   * 父元素，默认为document.body
-   * @default document.body || document.documentElement
-   */
-  $parent?: HTMLElement;
-  /**
-   * 内容配置
-   */
-  content: Omit<PopsContentConfig["content"], "html"> & {
-    /**
-     * 图标
-     */
-    icon?: string;
-  };
-  /**
-   * （可选）添加主CSS，默认为true，当页面中存在anim覆盖时，可能会有一些样式问题，取消添加该CSS即可解决
-   * @default true
-   */
-  addIndexCSS?: boolean;
-  /**
-   * 为pops-anim和pops-mask设置position: absolute（需要自行设置parent的position为relative）
-   *
-   * 它们默认的position为fixed
-   * @default false
-   */
-  isAbsolute?: boolean;
-}
+import type { PopsGeneralConfig, PopsContentConfig } from "../../../types/components";
+
+/**
+ * pops.loading
+ */
+export interface PopsLoadingConfig extends Omit<
+  PopsGeneralConfig,
+  "width" | "height" | "position" | "beforeAppendToPageCallBack"
+> {
+  /**
+   * 父元素，默认为document.body
+   * @default document.body || document.documentElement
+   */
+  $parent?: HTMLElement;
+  /**
+   * 内容配置
+   */
+  content: Omit<PopsContentConfig["content"], "html"> & {
+    /**
+     * 图标
+     */
+    icon?: string;
+  };
+  /**
+   * （可选）添加主CSS，默认为true，当页面中存在anim覆盖时，可能会有一些样式问题，取消添加该CSS即可解决
+   * @default true
+   */
+  addIndexCSS?: boolean;
+  /**
+   * 为pops-anim和pops-mask设置position: absolute（需要自行设置parent的position为relative）
+   *
+   * 它们默认的position为fixed
+   * @default false
+   */
+  isAbsolute?: boolean;
+}