@whitesev/pops 3.2.0 → 3.2.2

package/src/components/alert/index.ts

@@ -1,163 +1,163 @@
-import { GlobalConfig } from "../../config/GlobalConfig";
-import { PopsElementHandler } from "../../handler/PopsElementHandler";
-import { PopsHandler } from "../../handler/PopsHandler";
-import { popsDOMUtils } from "../../utils/PopsDOMUtils";
-import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
-import { popsUtils } from "../../utils/PopsUtils";
-import { PopsAlertDefaultConfig } from "./defaultConfig";
-import type { PopsType } from "../../types/main";
-import type { PopsAlertConfig } from "./types";
-import { PopsCSS } from "../../PopsCSS";
-
-export const PopsAlert = {
-  init(__config__: PopsAlertConfig) {
-    const guid = popsUtils.getRandomGUID();
-    // 设置当前类型
-    const popsType: PopsType = "alert";
-
-    let config = PopsAlertDefaultConfig();
-    config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-    config = popsUtils.assign(config, __config__);
-    config = PopsHandler.handleOnly(popsType, config);
-
-    const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
-    PopsHandler.handleInit($shadowRoot, [
-      {
-        name: "index",
-        css: PopsCSS.index,
-      },
-      {
-        name: "ninePalaceGridPosition",
-        css: PopsCSS.ninePalaceGridPosition,
-      },
-      {
-        name: "scrollbar",
-        css: PopsCSS.scrollbar,
-      },
-      {
-        name: "button",
-        css: PopsCSS.button,
-      },
-      {
-        name: "anim",
-        css: PopsCSS.anim,
-      },
-      {
-        name: "common",
-        css: PopsCSS.common,
-      },
-      {
-        name: "alertCSS",
-        css: PopsCSS.alertCSS,
-      },
-    ]);
-
-    // 先把z-index提取出来
-    const zIndex = PopsHandler.handleZIndex(config.zIndex);
-    const maskHTML = PopsElementHandler.createMask(guid, zIndex);
-    const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
-    const bottomBtnHTML = PopsElementHandler.createBottom(popsType, config);
-    const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
-    const { contentStyle, contentPStyle } = PopsElementHandler.createContentStyle(popsType, config);
-    const animHTML = PopsElementHandler.createAnim(
-      guid,
-      popsType,
-      config,
-      /*html*/ `
-			<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${
-        config.title.html
-          ? config.title.text
-          : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`
-      }${headerBtnHTML}</div>
-			<div class="pops-content pops-${popsType}-content" style="${contentStyle}">${
-        config.content.html
-          ? config.content.text
-          : `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`
-      }</div>${bottomBtnHTML}`,
-      bottomBtnHTML,
-      zIndex
-    );
-    /**
-     * 弹窗的主元素，包括动画层
-     */
-    const $anim = PopsElementHandler.parseElement<HTMLDivElement>(animHTML);
-
-    const {
-      $pops: $pops,
-      $headerBtnClose: $headerCloseBtn,
-      $btnOk: btnOkElement,
-      $title: $title,
-    } = 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.handleEventConfig(
-      config,
-      guid,
-      $shadowContainer,
-      $shadowRoot,
-      popsType,
-      $anim,
-      $pops,
-      $mask
-    );
-    const result = PopsHandler.handleResultConfig(evtConfig);
-    // 为顶部右边的关闭按钮添加点击事件
-    PopsHandler.handleClickEvent("close", $headerCloseBtn, evtConfig, config.btn.close?.callback);
-    // 为底部ok按钮添加点击事件
-    PopsHandler.handleClickEvent("ok", btnOkElement, evtConfig, config.btn.ok?.callback);
-
-    // 创建到页面中
-
-    popsDOMUtils.append($shadowRoot, $elList);
-    if (typeof config.beforeAppendToPageCallBack === "function") {
-      config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
-    }
-
-    popsDOMUtils.appendBody($shadowContainer);
-    if ($mask != null) {
-      // 添加遮罩层
-      $anim.after($mask);
-    }
-    // 保存
-    PopsHandler.handlePush(popsType, {
-      guid: guid,
-      $anim: $anim,
-      $pops: $pops!,
-      $mask: $mask!,
-      $shadowContainer: $shadowContainer,
-      $shadowRoot: $shadowRoot,
-      config: config,
-      destory: result.close,
-    });
-    // 拖拽
-    if (config.drag) {
-      PopsInstanceUtils.drag($pops!, {
-        dragElement: $title!,
-        limit: config.dragLimit,
-        extraDistance: config.dragExtraDistance!,
-        moveCallBack: config.dragMoveCallBack!,
-        endCallBack: config.dragEndCallBack!,
-      });
-    }
-
-    return result;
-  },
-};
+import { GlobalConfig } from "../../config/GlobalConfig";
+import { PopsElementHandler } from "../../handler/PopsElementHandler";
+import { PopsHandler } from "../../handler/PopsHandler";
+import { popsDOMUtils } from "../../utils/PopsDOMUtils";
+import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
+import { popsUtils } from "../../utils/PopsUtils";
+import { PopsAlertDefaultConfig } from "./defaultConfig";
+import type { PopsType } from "../../types/main";
+import type { PopsAlertConfig } from "./types";
+import { PopsCSS } from "../../PopsCSS";
+
+export const PopsAlert = {
+  init(__config__: PopsAlertConfig) {
+    const guid = popsUtils.getRandomGUID();
+    // 设置当前类型
+    const popsType: PopsType = "alert";
+
+    let config = PopsAlertDefaultConfig();
+    config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
+    config = popsUtils.assign(config, __config__);
+    config = PopsHandler.handleOnly(popsType, config);
+
+    const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
+    PopsHandler.handleInit($shadowRoot, [
+      {
+        name: "index",
+        css: PopsCSS.index,
+      },
+      {
+        name: "ninePalaceGridPosition",
+        css: PopsCSS.ninePalaceGridPosition,
+      },
+      {
+        name: "scrollbar",
+        css: PopsCSS.scrollbar,
+      },
+      {
+        name: "button",
+        css: PopsCSS.button,
+      },
+      {
+        name: "anim",
+        css: PopsCSS.anim,
+      },
+      {
+        name: "common",
+        css: PopsCSS.common,
+      },
+      {
+        name: "alertCSS",
+        css: PopsCSS.alertCSS,
+      },
+    ]);
+
+    // 先把z-index提取出来
+    const zIndex = PopsHandler.handleZIndex(config.zIndex);
+    const maskHTML = PopsElementHandler.createMask(guid, zIndex);
+    const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
+    const bottomBtnHTML = PopsElementHandler.createBottom(popsType, config);
+    const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
+    const { contentStyle, contentPStyle } = PopsElementHandler.createContentStyle(popsType, config);
+    const animHTML = PopsElementHandler.createAnim(
+      guid,
+      popsType,
+      config,
+      /*html*/ `
+			<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${
+        config.title.html
+          ? config.title.text
+          : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`
+      }${headerBtnHTML}</div>
+			<div class="pops-content pops-${popsType}-content" style="${contentStyle}">${
+        config.content.html
+          ? config.content.text
+          : `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`
+      }</div>${bottomBtnHTML}`,
+      bottomBtnHTML,
+      zIndex
+    );
+    /**
+     * 弹窗的主元素，包括动画层
+     */
+    const $anim = PopsElementHandler.parseElement<HTMLDivElement>(animHTML);
+
+    const {
+      $pops: $pops,
+      $headerBtnClose: $headerCloseBtn,
+      $btnOk: btnOkElement,
+      $title: $title,
+    } = 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.handleEventConfig(
+      config,
+      guid,
+      $shadowContainer,
+      $shadowRoot,
+      popsType,
+      $anim,
+      $pops,
+      $mask
+    );
+    const result = PopsHandler.handleResultConfig(evtConfig);
+    // 为顶部右边的关闭按钮添加点击事件
+    PopsHandler.handleClickEvent("close", $headerCloseBtn, evtConfig, config.btn.close?.callback);
+    // 为底部ok按钮添加点击事件
+    PopsHandler.handleClickEvent("ok", btnOkElement, evtConfig, config.btn.ok?.callback);
+
+    // 创建到页面中
+
+    popsDOMUtils.append($shadowRoot, $elList);
+    if (typeof config.beforeAppendToPageCallBack === "function") {
+      config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
+    }
+
+    popsDOMUtils.appendBody($shadowContainer);
+    if ($mask != null) {
+      // 添加遮罩层
+      $anim.after($mask);
+    }
+    // 保存
+    PopsHandler.handlePush(popsType, {
+      guid: guid,
+      $anim: $anim,
+      $pops: $pops!,
+      $mask: $mask!,
+      $shadowContainer: $shadowContainer,
+      $shadowRoot: $shadowRoot,
+      config: config,
+      destory: result.close,
+    });
+    // 拖拽
+    if (config.drag) {
+      PopsInstanceUtils.drag($pops!, {
+        dragElement: $title!,
+        limit: config.dragLimit,
+        extraDistance: config.dragExtraDistance!,
+        moveCallBack: config.dragMoveCallBack!,
+        endCallBack: config.dragEndCallBack!,
+      });
+    }
+
+    return result;
+  },
+};

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

@@ -1,23 +1,23 @@
-import type {
-  PopsTitleConfig,
-  PopsContentConfig,
-  PopsDragConfig,
-  PopsGeneralConfig,
-  PopsButtonConfig,
-} from "../../../types/components";
-import type { PopsGlobalButtonConfig, PopsButtonConfigAnyType } from "../../../types/button";
-
-/**
- * pops.alert
- */
-export interface PopsAlertConfig extends PopsTitleConfig, PopsContentConfig, PopsDragConfig, PopsGeneralConfig {
-  /**
-   * 按钮配置
-   */
-  btn?: Partial<PopsButtonConfig["btn"]> & {
-    /**
-     * 确定按钮
-     */
-    ok?: Partial<PopsGlobalButtonConfig | PopsButtonConfigAnyType>;
-  };
-}
+import type {
+  PopsTitleConfig,
+  PopsContentConfig,
+  PopsDragConfig,
+  PopsGeneralConfig,
+  PopsButtonConfig,
+} from "../../../types/components";
+import type { PopsGlobalButtonConfig, PopsButtonConfigAnyType } from "../../../types/button";
+
+/**
+ * pops.alert
+ */
+export interface PopsAlertConfig extends PopsTitleConfig, PopsContentConfig, PopsDragConfig, PopsGeneralConfig {
+  /**
+   * 按钮配置
+   */
+  btn?: Partial<PopsButtonConfig["btn"]> & {
+    /**
+     * 确定按钮
+     */
+    ok?: Partial<PopsGlobalButtonConfig | PopsButtonConfigAnyType>;
+  };
+}

package/src/components/confirm/defaultConfig.ts

@@ -1,90 +1,90 @@
-import type { PopsConfirmConfig } from "./types";
-
-export const PopsConfirmDefaultConfig = (): DeepRequired<PopsConfirmConfig> => {
-  return {
-    title: {
-      text: "默认标题",
-      position: "left",
-      html: false,
-      style: "",
-    },
-    content: {
-      text: "默认内容",
-      html: false,
-      style: "",
-    },
-    btn: {
-      merge: false,
-      mergeReverse: false,
-      reverse: false,
-      position: "flex-end",
-      ok: {
-        enable: true,
-        size: void 0 as any,
-        icon: void 0 as any,
-        rightIcon: false,
-        iconIsLoading: false,
-        text: "确定",
-        type: "primary",
-        callback(eventConfig) {
-          eventConfig.close();
-        },
-      },
-      cancel: {
-        enable: true,
-        size: void 0 as any,
-        icon: void 0 as any,
-        rightIcon: false,
-        iconIsLoading: false,
-        text: "关闭",
-        type: "default",
-        callback(eventConfig) {
-          eventConfig.close();
-        },
-      },
-      other: {
-        enable: false,
-        size: void 0 as any,
-        icon: void 0 as any,
-        rightIcon: false,
-        iconIsLoading: false,
-        text: "其它按钮",
-        type: "default",
-        callback(eventConfig) {
-          eventConfig.close();
-        },
-      },
-      close: {
-        enable: true,
-        callback(eventConfig) {
-          eventConfig.close();
-        },
-      },
-    },
-    useShadowRoot: true,
-    class: "",
-    only: false,
-    width: window.innerWidth < 550 ? "88vw" : "350px",
-    height: window.innerHeight < 450 ? "70vh" : "200px",
-    position: "center",
-    animation: "pops-anim-fadein-zoom",
-    zIndex: 10000,
-    mask: {
-      enable: false,
-      clickEvent: {
-        toClose: false,
-        toHide: false,
-      },
-      clickCallBack: null,
-    },
-    drag: false,
-    dragLimit: true,
-    dragExtraDistance: 3,
-    dragMoveCallBack() {},
-    dragEndCallBack() {},
-    forbiddenScroll: false,
-
-    style: null,
-    beforeAppendToPageCallBack() {},
-  } as DeepRequired<PopsConfirmConfig>;
-};
+import type { PopsConfirmConfig } from "./types";
+
+export const PopsConfirmDefaultConfig = (): DeepRequired<PopsConfirmConfig> => {
+  return {
+    title: {
+      text: "默认标题",
+      position: "left",
+      html: false,
+      style: "",
+    },
+    content: {
+      text: "默认内容",
+      html: false,
+      style: "",
+    },
+    btn: {
+      merge: false,
+      mergeReverse: false,
+      reverse: false,
+      position: "flex-end",
+      ok: {
+        enable: true,
+        size: void 0 as any,
+        icon: void 0 as any,
+        rightIcon: false,
+        iconIsLoading: false,
+        text: "确定",
+        type: "primary",
+        callback(eventConfig) {
+          eventConfig.close();
+        },
+      },
+      cancel: {
+        enable: true,
+        size: void 0 as any,
+        icon: void 0 as any,
+        rightIcon: false,
+        iconIsLoading: false,
+        text: "关闭",
+        type: "default",
+        callback(eventConfig) {
+          eventConfig.close();
+        },
+      },
+      other: {
+        enable: false,
+        size: void 0 as any,
+        icon: void 0 as any,
+        rightIcon: false,
+        iconIsLoading: false,
+        text: "其它按钮",
+        type: "default",
+        callback(eventConfig) {
+          eventConfig.close();
+        },
+      },
+      close: {
+        enable: true,
+        callback(eventConfig) {
+          eventConfig.close();
+        },
+      },
+    },
+    useShadowRoot: true,
+    class: "",
+    only: false,
+    width: window.innerWidth < 550 ? "88vw" : "350px",
+    height: window.innerHeight < 450 ? "70vh" : "200px",
+    position: "center",
+    animation: "pops-anim-fadein-zoom",
+    zIndex: 10000,
+    mask: {
+      enable: false,
+      clickEvent: {
+        toClose: false,
+        toHide: false,
+      },
+      clickCallBack: null,
+    },
+    drag: false,
+    dragLimit: true,
+    dragExtraDistance: 3,
+    dragMoveCallBack() {},
+    dragEndCallBack() {},
+    forbiddenScroll: false,
+
+    style: null,
+    beforeAppendToPageCallBack() {},
+  } as DeepRequired<PopsConfirmConfig>;
+};