@whitesev/pops 3.2.1 → 3.3.0

package/src/components/confirm/index.ts

@@ -1,165 +1,165 @@
-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 { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
-import { popsUtils } from "../../utils/PopsUtils";
-import { PopsConfirmDefaultConfig } from "./defaultConfig";
-import type { PopsConfirmConfig } from "./types";
-
-export const PopsConfirm = {
-  init(__config__: PopsConfirmConfig) {
-    const guid = popsUtils.getRandomGUID();
-    // 设置当前类型
-    const popsType: PopsType = "confirm";
-
-    let config = PopsConfirmDefaultConfig();
-    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: "confirmCSS",
-        css: PopsCSS.confirmCSS,
-      },
-    ]);
-
-    // 先把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,
-      $title: $title,
-      $headerBtnClose: $btnClose,
-      $btnOk: $btnOk,
-      $btnCancel: $btnCancel,
-      $btnOther: $btnOther,
-    } = 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", $btnClose, evtConfig, config.btn.close.callback);
-    PopsHandler.handleClickEvent("ok", $btnOk, evtConfig, config.btn.ok.callback);
-    PopsHandler.handleClickEvent("cancel", $btnCancel, evtConfig, config.btn.cancel.callback);
-    PopsHandler.handleClickEvent("other", $btnOther, evtConfig, config.btn.other.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 { PopsCSS } from "../../PopsCSS";
+import type { PopsType } from "../../types/main";
+import { popsDOMUtils } from "../../utils/PopsDOMUtils";
+import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
+import { popsUtils } from "../../utils/PopsUtils";
+import { PopsConfirmDefaultConfig } from "./defaultConfig";
+import type { PopsConfirmConfig } from "./types";
+
+export const PopsConfirm = {
+  init(__config__: PopsConfirmConfig) {
+    const guid = popsUtils.getRandomGUID();
+    // 设置当前类型
+    const popsType: PopsType = "confirm";
+
+    let config = PopsConfirmDefaultConfig();
+    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: "confirmCSS",
+        css: PopsCSS.confirmCSS,
+      },
+    ]);
+
+    // 先把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,
+      $title: $title,
+      $headerBtnClose: $btnClose,
+      $btnOk: $btnOk,
+      $btnCancel: $btnCancel,
+      $btnOther: $btnOther,
+    } = 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", $btnClose, evtConfig, config.btn.close.callback);
+    PopsHandler.handleClickEvent("ok", $btnOk, evtConfig, config.btn.ok.callback);
+    PopsHandler.handleClickEvent("cancel", $btnCancel, evtConfig, config.btn.cancel.callback);
+    PopsHandler.handleClickEvent("other", $btnOther, evtConfig, config.btn.other.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/confirm/types/index.ts

@@ -1,17 +1,13 @@
-import type {
-  PopsTitleConfig,
-  PopsContentConfig,
-  PopsDragConfig,
-  PopsGeneralConfig,
-  PopsMoreButtonConfig,
-} from "../../../types/components";
-
-/**
- * pops.confirm
- */
-export interface PopsConfirmConfig
-  extends PopsTitleConfig,
-    PopsContentConfig,
-    PopsMoreButtonConfig,
-    PopsDragConfig,
-    PopsGeneralConfig {}
+import type {
+  PopsTitleConfig,
+  PopsContentConfig,
+  PopsDragConfig,
+  PopsGeneralConfig,
+  PopsMoreButtonConfig,
+} from "../../../types/components";
+
+/**
+ * pops.confirm
+ */
+export interface PopsConfirmConfig
+  extends PopsTitleConfig, PopsContentConfig, PopsMoreButtonConfig, PopsDragConfig, PopsGeneralConfig {}

package/src/components/drawer/defaultConfig.ts

@@ -1,89 +1,89 @@
-import type { PopsDrawerConfig } from "./types";
-
-export const PopsDrawerDefaultConfig = (): DeepRequired<PopsDrawerConfig> => {
-  return {
-    title: {
-      enable: true,
-      position: "center",
-      text: "默认标题",
-      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();
-        },
-      },
-    },
-    mask: {
-      enable: true,
-      clickEvent: {
-        toClose: true,
-        toHide: false,
-      },
-      clickCallBack: null,
-    },
-    useShadowRoot: true,
-    class: "",
-    zIndex: 10000,
-    only: false,
-    direction: "right",
-    size: "30%",
-    lockScroll: false,
-    closeOnPressEscape: true,
-    openDelay: 0,
-    closeDelay: 0,
-    borderRadius: 0,
-
-    style: null,
-    beforeAppendToPageCallBack() {},
-    forbiddenScroll: false,
-  };
-};
+import type { PopsDrawerConfig } from "./types";
+
+export const PopsDrawerDefaultConfig = (): DeepRequired<PopsDrawerConfig> => {
+  return {
+    title: {
+      enable: true,
+      position: "center",
+      text: "默认标题",
+      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();
+        },
+      },
+    },
+    mask: {
+      enable: true,
+      clickEvent: {
+        toClose: true,
+        toHide: false,
+      },
+      clickCallBack: null,
+    },
+    useShadowRoot: true,
+    class: "",
+    zIndex: 10000,
+    only: false,
+    direction: "right",
+    size: "30%",
+    lockScroll: false,
+    closeOnPressEscape: true,
+    openDelay: 0,
+    closeDelay: 0,
+    borderRadius: 0,
+
+    style: null,
+    beforeAppendToPageCallBack() {},
+    forbiddenScroll: false,
+  };
+};

package/src/components/drawer/index.css

@@ -1,37 +1,37 @@
-.pops[type-value="drawer"] {
-  position: fixed;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  box-shadow:
-    0px 16px 48px 16px rgba(0, 0, 0, 0.08),
-    0px 12px 32px rgba(0, 0, 0, 0.12),
-    0px 8px 16px -8px rgba(0, 0, 0, 0.16);
-  overflow: hidden;
-  transition: all 0.3s;
-}
-
-.pops[type-value="drawer"][direction="top"] {
-  width: 100%;
-  left: 0;
-  right: 0;
-  top: 0;
-}
-.pops[type-value="drawer"][direction="bottom"] {
-  width: 100%;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.pops[type-value="drawer"][direction="left"] {
-  height: 100%;
-  top: 0;
-  bottom: 0;
-  left: 0;
-}
-.pops[type-value="drawer"][direction="right"] {
-  height: 100%;
-  top: 0;
-  bottom: 0;
-  right: 0;
-}
+.pops[type-value="drawer"] {
+  position: fixed;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  box-shadow:
+    0px 16px 48px 16px rgba(0, 0, 0, 0.08),
+    0px 12px 32px rgba(0, 0, 0, 0.12),
+    0px 8px 16px -8px rgba(0, 0, 0, 0.16);
+  overflow: hidden;
+  transition: all 0.3s;
+}
+
+.pops[type-value="drawer"][direction="top"] {
+  width: 100%;
+  left: 0;
+  right: 0;
+  top: 0;
+}
+.pops[type-value="drawer"][direction="bottom"] {
+  width: 100%;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.pops[type-value="drawer"][direction="left"] {
+  height: 100%;
+  top: 0;
+  bottom: 0;
+  left: 0;
+}
+.pops[type-value="drawer"][direction="right"] {
+  height: 100%;
+  top: 0;
+  bottom: 0;
+  right: 0;
+}