@whitesev/pops 2.4.6 → 2.4.7

package/src/components/loading/config.ts

@@ -0,0 +1,29 @@
+import type { PopsLoadingDetails } from "./types";
+
+export const PopsLoadingConfig = (): DeepRequired<PopsLoadingDetails> => {
+  return {
+    parent: document.body,
+    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

@@ -0,0 +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;
+  }
+}

package/src/components/loading/index.ts

@@ -0,0 +1,99 @@
+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 { PopsLoadingConfig } from "./config";
+import type { PopsLoadingDetails } from "./types";
+
+export const PopsLoading = {
+  init(details: PopsLoadingDetails) {
+    let config = PopsLoadingConfig();
+    config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
+    config = popsUtils.assign(config, details);
+    const guid = popsUtils.getRandomGUID();
+    const PopsType = "loading";
+
+    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 { popsElement: $pops } = PopsHandler.handleQueryElement($anim, PopsType);
+    /**
+     * 遮罩层元素
+     */
+    let $mask: HTMLDivElement | null = null;
+    /**
+     * 已创建的元素列表
+     */
+    const elementList: HTMLElement[] = [$anim];
+
+    if (config.mask.enable) {
+      // 创建遮罩层
+      const _handleMask_ = PopsHandler.handleMask({
+        type: PopsType,
+        guid: guid,
+
+        config: config,
+        animElement: $anim,
+        maskHTML: maskHTML,
+      });
+      $mask = _handleMask_.maskElement;
+      elementList.push($mask);
+    }
+    const eventDetails = PopsHandler.handleLoadingEventDetails(guid, PopsType, $anim, $pops!, $mask!, config);
+    popsDOMUtils.append(config.parent, elementList);
+    if ($mask != null) {
+      $anim.after($mask);
+    }
+    PopsHandler.handlePush(PopsType, {
+      guid: guid,
+      animElement: $anim,
+      popsElement: $pops!,
+      maskElement: $mask!,
+    } as any);
+
+    if (config.isAbsolute) {
+      // 遮罩层必须是跟随主内容
+      // 即设置主内容position: relative，mask：position: absolute
+      popsDOMUtils.css($anim, "position", "absolute !important");
+      $mask && popsDOMUtils.css($mask, "position", "absolute !important");
+    }
+    const result = PopsHandler.handleResultDetails(eventDetails);
+    return result;
+  },
+};

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

@@ -0,0 +1,34 @@
+import type { PopsCommonConfig, PopsContentConfig } from "../../../types/components";
+
+/**
+ * pops.loading
+ */
+export interface PopsLoadingDetails
+  extends Omit<PopsCommonConfig, "width" | "height" | "position" | "beforeAppendToPageCallBack"> {
+  /**
+   * 父元素，默认为document.body
+   * @default document.body
+   */
+  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;
+}