@whitesev/pops 3.2.1 → 3.3.0

package/src/components/drawer/index.ts

@@ -1,245 +1,245 @@
-import { GlobalConfig } from "../../config/GlobalConfig";
-import { PopsElementHandler } from "../../handler/PopsElementHandler";
-import { PopsHandler } from "../../handler/PopsHandler";
-import { PopsCSS } from "../../PopsCSS";
-import type { PopsHandlerEventConfig } from "../../types/event";
-import type { PopsType } from "../../types/main";
-import { popsDOMUtils } from "../../utils/PopsDOMUtils";
-import { popsUtils } from "../../utils/PopsUtils";
-import { PopsDrawerDefaultConfig } from "./defaultConfig";
-import type { PopsDrawerConfig } from "./types";
-
-export const PopsDrawer = {
-  init(__config__: PopsDrawerConfig) {
-    const guid = popsUtils.getRandomGUID();
-    // 设置当前类型
-    const popsType: PopsType = "drawer";
-
-    let config = PopsDrawerDefaultConfig();
-    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: "drawerCSS",
-        css: PopsCSS.drawerCSS,
-      },
-    ]);
-
-    // 先把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*/ `
-            ${
-              config.title.enable
-                ? /*html*/ `<div class="pops-title pops-${popsType}-title" style="${headerStyle}">${
-                    config.title.html
-                      ? config.title.text
-                      : /*html*/ `<p pops class="pops-${popsType}-title-text" style="width: 100%;text-align: ${config.title.position};${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: popsElement,
-      $headerBtnClose: headerCloseBtnElement,
-      $btnCancel: btnCancelElement,
-      $btnOk: btnOkElement,
-      $btnOther: btnOtherElement,
-    } = PopsHandler.handleQueryElement($anim, popsType);
-    const $pops = popsElement!;
-    const $headerCloseBtn = headerCloseBtnElement!;
-    const $btnCancel = btnCancelElement!;
-    const $btnOk = btnOkElement!;
-    const $btnOther = btnOtherElement!;
-    /**
-     * 遮罩层元素
-     */
-    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);
-    // 处理方向
-
-    $pops.setAttribute("direction", config.direction);
-
-    // 处理border-radius
-    // 处理动画前的宽高
-    if (config.direction === "top") {
-      $pops.style.setProperty("height", "0");
-
-      $pops.style.setProperty("border-radius", `0px 0px ${config.borderRadius}px ${config.borderRadius}px`);
-    } else if (config.direction === "bottom") {
-      $pops.style.setProperty("height", "0");
-
-      $pops.style.setProperty("border-radius", `${config.borderRadius}px ${config.borderRadius}px 0px 0px`);
-    } else if (config.direction === "left") {
-      $pops.style.setProperty("width", "0");
-
-      $pops.style.setProperty("border-radius", `0px ${config.borderRadius}px 0px ${config.borderRadius}px`);
-    } else if (config.direction === "right") {
-      $pops.style.setProperty("width", "0");
-
-      $pops.style.setProperty("border-radius", `${config.borderRadius}px 0px ${config.borderRadius}px 0px`);
-    }
-
-    // 按下Esc键触发关闭
-    if (config.closeOnPressEscape) {
-      PopsHandler.handleKeyboardEvent("Escape", [], function () {
-        evtConfig.close();
-      });
-    }
-    // 待处理的点击事件列表
-    const needHandleClickEventList: {
-      type: PopsHandlerEventConfig["type"];
-      ele: HTMLElement;
-    }[] = [
-      {
-        type: "close",
-        ele: $headerCloseBtn,
-      },
-      {
-        type: "cancel",
-        ele: $btnCancel,
-      },
-      {
-        type: "ok",
-        ele: $btnOk,
-      },
-      {
-        type: "other",
-        ele: $btnOther,
-      },
-    ];
-    needHandleClickEventList.forEach((item) => {
-      PopsHandler.handleClickEvent(item.type, item.ele, evtConfig, (evtConfig, event) => {
-        const callback = config.btn[item.type].callback;
-        if (typeof callback === "function") {
-          callback(evtConfig, event);
-        }
-      });
-    });
-
-    // 先隐藏，然后根据config.openDelay来显示
-    $elList.forEach((element) => {
-      element.style.setProperty("display", "none");
-      if (["top"].includes(config.direction)) {
-        $pops.style.setProperty("height", config.size.toString());
-
-        $pops.style.setProperty("transform", "translateY(-100%)");
-      } else if (["bottom"].includes(config.direction)) {
-        $pops.style.setProperty("height", config.size.toString());
-
-        $pops.style.setProperty("transform", "translateY(100%)");
-      } else if (["left"].includes(config.direction)) {
-        $pops.style.setProperty("width", config.size.toString());
-
-        $pops.style.setProperty("transform", "translateX(-100%)");
-      } else if (["right"].includes(config.direction)) {
-        $pops.style.setProperty("width", config.size.toString());
-
-        $pops.style.setProperty("transform", "translateX(100%)");
-      }
-      element.style.setProperty("display", "");
-    });
-    // 创建到页面中
-
-    popsDOMUtils.append($shadowRoot, $elList);
-    if (typeof config.beforeAppendToPageCallBack === "function") {
-      config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
-    }
-
-    popsDOMUtils.appendBody($shadowContainer);
-    popsUtils.setTimeout(() => {
-      popsUtils.setTimeout(() => {
-        $pops.style.setProperty("transform", "");
-      }, config.openDelay);
-    }, 50);
-
-    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,
-    });
-    return result;
-  },
-};
+import { GlobalConfig } from "../../config/GlobalConfig";
+import { PopsElementHandler } from "../../handler/PopsElementHandler";
+import { PopsHandler } from "../../handler/PopsHandler";
+import { PopsCSS } from "../../PopsCSS";
+import type { PopsHandlerEventConfig } from "../../types/event";
+import type { PopsType } from "../../types/main";
+import { popsDOMUtils } from "../../utils/PopsDOMUtils";
+import { popsUtils } from "../../utils/PopsUtils";
+import { PopsDrawerDefaultConfig } from "./defaultConfig";
+import type { PopsDrawerConfig } from "./types";
+
+export const PopsDrawer = {
+  init(__config__: PopsDrawerConfig) {
+    const guid = popsUtils.getRandomGUID();
+    // 设置当前类型
+    const popsType: PopsType = "drawer";
+
+    let config = PopsDrawerDefaultConfig();
+    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: "drawerCSS",
+        css: PopsCSS.drawerCSS,
+      },
+    ]);
+
+    // 先把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*/ `
+            ${
+              config.title.enable
+                ? /*html*/ `<div class="pops-title pops-${popsType}-title" style="${headerStyle}">${
+                    config.title.html
+                      ? config.title.text
+                      : /*html*/ `<p pops class="pops-${popsType}-title-text" style="width: 100%;text-align: ${config.title.position};${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: popsElement,
+      $headerBtnClose: headerCloseBtnElement,
+      $btnCancel: btnCancelElement,
+      $btnOk: btnOkElement,
+      $btnOther: btnOtherElement,
+    } = PopsHandler.handleQueryElement($anim, popsType);
+    const $pops = popsElement!;
+    const $headerCloseBtn = headerCloseBtnElement!;
+    const $btnCancel = btnCancelElement!;
+    const $btnOk = btnOkElement!;
+    const $btnOther = btnOtherElement!;
+    /**
+     * 遮罩层元素
+     */
+    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);
+    // 处理方向
+
+    $pops.setAttribute("direction", config.direction);
+
+    // 处理border-radius
+    // 处理动画前的宽高
+    if (config.direction === "top") {
+      $pops.style.setProperty("height", "0");
+
+      $pops.style.setProperty("border-radius", `0px 0px ${config.borderRadius}px ${config.borderRadius}px`);
+    } else if (config.direction === "bottom") {
+      $pops.style.setProperty("height", "0");
+
+      $pops.style.setProperty("border-radius", `${config.borderRadius}px ${config.borderRadius}px 0px 0px`);
+    } else if (config.direction === "left") {
+      $pops.style.setProperty("width", "0");
+
+      $pops.style.setProperty("border-radius", `0px ${config.borderRadius}px 0px ${config.borderRadius}px`);
+    } else if (config.direction === "right") {
+      $pops.style.setProperty("width", "0");
+
+      $pops.style.setProperty("border-radius", `${config.borderRadius}px 0px ${config.borderRadius}px 0px`);
+    }
+
+    // 按下Esc键触发关闭
+    if (config.closeOnPressEscape) {
+      PopsHandler.handleKeyboardEvent("Escape", [], function () {
+        evtConfig.close();
+      });
+    }
+    // 待处理的点击事件列表
+    const needHandleClickEventList: {
+      type: PopsHandlerEventConfig["type"];
+      ele: HTMLElement;
+    }[] = [
+      {
+        type: "close",
+        ele: $headerCloseBtn,
+      },
+      {
+        type: "cancel",
+        ele: $btnCancel,
+      },
+      {
+        type: "ok",
+        ele: $btnOk,
+      },
+      {
+        type: "other",
+        ele: $btnOther,
+      },
+    ];
+    needHandleClickEventList.forEach((item) => {
+      PopsHandler.handleClickEvent(item.type, item.ele, evtConfig, (evtConfig, event) => {
+        const callback = config.btn[item.type].callback;
+        if (typeof callback === "function") {
+          callback(evtConfig, event);
+        }
+      });
+    });
+
+    // 先隐藏，然后根据config.openDelay来显示
+    $elList.forEach((element) => {
+      element.style.setProperty("display", "none");
+      if (["top"].includes(config.direction)) {
+        $pops.style.setProperty("height", config.size.toString());
+
+        $pops.style.setProperty("transform", "translateY(-100%)");
+      } else if (["bottom"].includes(config.direction)) {
+        $pops.style.setProperty("height", config.size.toString());
+
+        $pops.style.setProperty("transform", "translateY(100%)");
+      } else if (["left"].includes(config.direction)) {
+        $pops.style.setProperty("width", config.size.toString());
+
+        $pops.style.setProperty("transform", "translateX(-100%)");
+      } else if (["right"].includes(config.direction)) {
+        $pops.style.setProperty("width", config.size.toString());
+
+        $pops.style.setProperty("transform", "translateX(100%)");
+      }
+      element.style.setProperty("display", "");
+    });
+    // 创建到页面中
+
+    popsDOMUtils.append($shadowRoot, $elList);
+    if (typeof config.beforeAppendToPageCallBack === "function") {
+      config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
+    }
+
+    popsDOMUtils.appendBody($shadowContainer);
+    popsUtils.setTimeout(() => {
+      popsUtils.setTimeout(() => {
+        $pops.style.setProperty("transform", "");
+      }, config.openDelay);
+    }, 50);
+
+    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,
+    });
+    return result;
+  },
+};

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

@@ -1,61 +1,62 @@
-import type {
-  PopsTitleConfig,
-  PopsContentConfig,
-  // PopsDragConfig,
-  PopsGeneralConfig,
-  PopsMoreButtonConfig,
-} from "../../../types/components";
-
-/**
- * pops.drawer
- */
-export interface PopsDrawerConfig
-  extends PopsContentConfig,
-    PopsMoreButtonConfig,
-    Omit<PopsGeneralConfig, "width" | "height" | "position" | "animation"> {
-  /**
-   * 标题
-   */
-  title?: Partial<PopsTitleConfig["title"]> & {
-    /**
-     * 是否启用
-     * @default true
-     */
-    enable: boolean;
-  };
-  /**
-   * 打开的方向
-   * @default "right"
-   */
-  direction?: "top" | "bottom" | "left" | "right";
-  /**
-   * 窗体的大小; 当使用 number 类型时; 以像素为单位，默认为30%
-   * @default "30%"
-   */
-  size?: string | number;
-  /**
-   * 是否在 Drawer 出现时将 body 滚动锁定，默认为false
-   * @default false
-   */
-  lockScroll?: boolean;
-  /**
-   * 是否可以通过按下 ESC 关闭 Drawer，默认为true
-   * @default true'
-   */
-  closeOnPressEscape?: boolean;
-  /**
-   * 打开的延时时间，单位毫秒，默认为0
-   * @default 0
-   */
-  openDelay?: number;
-  /**
-   * 关闭的延时时间，单位毫秒，默认为0
-   * @default 0
-   */
-  closeDelay?: number;
-  /**
-   * border-radius，根据direction自动适应，默认为5
-   * @default 5
-   */
-  borderRadius?: number;
-}
+import type {
+  PopsTitleConfig,
+  PopsContentConfig,
+  // PopsDragConfig,
+  PopsGeneralConfig,
+  PopsMoreButtonConfig,
+} from "../../../types/components";
+
+/**
+ * pops.drawer
+ */
+export interface PopsDrawerConfig
+  extends
+    PopsContentConfig,
+    PopsMoreButtonConfig,
+    Omit<PopsGeneralConfig, "width" | "height" | "position" | "animation"> {
+  /**
+   * 标题
+   */
+  title?: Partial<PopsTitleConfig["title"]> & {
+    /**
+     * 是否启用
+     * @default true
+     */
+    enable: boolean;
+  };
+  /**
+   * 打开的方向
+   * @default "right"
+   */
+  direction?: "top" | "bottom" | "left" | "right";
+  /**
+   * 窗体的大小; 当使用 number 类型时; 以像素为单位，默认为30%
+   * @default "30%"
+   */
+  size?: string | number;
+  /**
+   * 是否在 Drawer 出现时将 body 滚动锁定，默认为false
+   * @default false
+   */
+  lockScroll?: boolean;
+  /**
+   * 是否可以通过按下 ESC 关闭 Drawer，默认为true
+   * @default true'
+   */
+  closeOnPressEscape?: boolean;
+  /**
+   * 打开的延时时间，单位毫秒，默认为0
+   * @default 0
+   */
+  openDelay?: number;
+  /**
+   * 关闭的延时时间，单位毫秒，默认为0
+   * @default 0
+   */
+  closeDelay?: number;
+  /**
+   * border-radius，根据direction自动适应，默认为5
+   * @default 5
+   */
+  borderRadius?: number;
+}