@whitesev/pops 2.4.6 → 2.4.7

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

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

package/src/components/confirm/config.ts

@@ -0,0 +1,90 @@
+import type { PopsConfirmDetails } from "./types";
+
+export const PopsConfirmConfig = (): DeepRequired<PopsConfirmDetails> => {
+  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(detail: any) {
+          detail.close();
+        },
+      },
+      cancel: {
+        enable: true,
+        size: void 0 as any,
+        icon: void 0 as any,
+        rightIcon: false,
+        iconIsLoading: false,
+        text: "关闭",
+        type: "default",
+        callback(detail: any) {
+          detail.close();
+        },
+      },
+      other: {
+        enable: false,
+        size: void 0 as any,
+        icon: void 0 as any,
+        rightIcon: false,
+        iconIsLoading: false,
+        text: "其它按钮",
+        type: "default",
+        callback(detail: any) {
+          detail.close();
+        },
+      },
+      close: {
+        enable: true,
+        callback(detail: any) {
+          detail.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<PopsConfirmDetails>;
+};

package/src/components/confirm/index.ts

@@ -0,0 +1,166 @@
+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 { PopsConfirmConfig } from "./config";
+import type { PopsConfirmDetails } from "./types";
+
+export const PopsConfirm = {
+  init(details: PopsConfirmDetails) {
+    const guid = popsUtils.getRandomGUID();
+    // 设置当前类型
+    const popsType: PopsType = "confirm";
+    let config = PopsConfirmConfig();
+    config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
+    config = popsUtils.assign(config, details);
+    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 {
+      popsElement: $pops,
+      titleElement: $title,
+      headerCloseBtnElement: $btnClose,
+      btnOkElement: $btnOk,
+      btnCancelElement: $btnCancel,
+      btnOtherElement: $btnOther,
+    } = 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.handleEventDetails(
+      guid,
+      $shadowContainer,
+      $shadowRoot,
+      popsType,
+
+      $anim,
+      $pops!,
+      $mask!,
+      config
+    );
+    PopsHandler.handleClickEvent("close", $btnClose!, eventDetails, config.btn.close!.callback!);
+    PopsHandler.handleClickEvent("ok", $btnOk!, eventDetails!, config.btn.ok!.callback!);
+    PopsHandler.handleClickEvent("cancel", $btnCancel!, eventDetails, config.btn.cancel!.callback!);
+    PopsHandler.handleClickEvent("other", $btnOther!, eventDetails, config.btn.other!.callback!);
+
+    /* 创建到页面中 */
+
+    popsDOMUtils.append($shadowRoot, elementList);
+    if (typeof config.beforeAppendToPageCallBack === "function") {
+      config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
+    }
+
+    popsDOMUtils.appendBody($shadowContainer);
+    if ($mask != null) {
+      $anim.after($mask);
+    }
+    PopsHandler.handlePush(popsType, {
+      guid: guid,
+
+      animElement: $anim,
+
+      popsElement: $pops!,
+
+      maskElement: $mask!,
+      $shadowContainer: $shadowContainer,
+      $shadowRoot: $shadowRoot,
+    });
+    /* 拖拽 */
+    if (config.drag) {
+      PopsInstanceUtils.drag($pops!, {
+        dragElement: $title!,
+        limit: config.dragLimit,
+        extraDistance: config.dragExtraDistance,
+        moveCallBack: config.dragMoveCallBack,
+        endCallBack: config.dragEndCallBack,
+      });
+    }
+    const result = PopsHandler.handleResultDetails(eventDetails);
+    return result;
+  },
+};

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

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

package/src/components/drawer/config.ts

@@ -0,0 +1,89 @@
+import type { PopsDrawerDetails } from "./types";
+
+export const PopsDrawerConfig = (): DeepRequired<PopsDrawerDetails> => {
+  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(detail: any) {
+          detail.close();
+        },
+      },
+      cancel: {
+        enable: true,
+        size: void 0 as any,
+        icon: void 0 as any,
+        rightIcon: false,
+        iconIsLoading: false,
+        text: "关闭",
+        type: "default",
+        callback(detail: any) {
+          detail.close();
+        },
+      },
+      other: {
+        enable: false,
+        size: void 0 as any,
+        icon: void 0 as any,
+        rightIcon: false,
+        iconIsLoading: false,
+        text: "其它按钮",
+        type: "default",
+        callback(detail: any) {
+          detail.close();
+        },
+      },
+      close: {
+        enable: true,
+        callback(detail: any) {
+          detail.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

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

package/src/components/drawer/index.ts

@@ -0,0 +1,237 @@
+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 { popsUtils } from "../../utils/PopsUtils";
+import { PopsDrawerConfig } from "./config";
+import type { PopsDrawerDetails } from "./types";
+
+export const PopsDrawer = {
+  init(details: PopsDrawerDetails) {
+    const guid = popsUtils.getRandomGUID();
+    // 设置当前类型
+    const popsType: PopsType = "drawer";
+    let config = PopsDrawerConfig();
+    config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
+    config = popsUtils.assign(config, details);
+    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 { popsElement, headerCloseBtnElement, btnCancelElement, btnOkElement, btnOtherElement } =
+      PopsHandler.handleQueryElement($anim, popsType);
+    const $pops = popsElement!;
+    const $headerCloseBtn = headerCloseBtnElement!;
+    const $btnCancel = btnCancelElement!;
+    const $btnOk = btnOkElement!;
+    const $btnOther = btnOtherElement!;
+    /**
+     * 遮罩层元素
+     */
+    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.handleEventDetails(
+      guid,
+      $shadowContainer,
+      $shadowRoot,
+      popsType,
+      $anim,
+      $pops,
+      $mask!,
+      config
+    );
+    /* 处理方向 */
+
+    $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 () {
+        eventDetails.close();
+      });
+    }
+    /* 待处理的点击事件列表 */
+    const needHandleClickEventList = [
+      {
+        type: "close",
+        ele: $headerCloseBtn,
+      },
+      {
+        type: "cancel",
+        ele: $btnCancel,
+      },
+      {
+        type: "ok",
+        ele: $btnOk,
+      },
+      {
+        type: "other",
+        ele: $btnOther,
+      },
+    ];
+    needHandleClickEventList.forEach((item) => {
+      PopsHandler.handleClickEvent(
+        item.type as "close" | "cancel" | "ok" | "other",
+        item.ele,
+        eventDetails,
+        (_eventDetails_) => {
+          if (typeof (config.btn as any)[item.type].callback === "function") {
+            (config.btn as any)[item.type].callback(_eventDetails_);
+          }
+        }
+      );
+    });
+
+    /* 先隐藏，然后根据config.openDelay来显示 */
+    elementList.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, elementList);
+    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,
+      animElement: $anim,
+      popsElement: $pops,
+      maskElement: $mask!,
+      $shadowContainer: $shadowContainer,
+      $shadowRoot: $shadowRoot,
+    });
+    const result = PopsHandler.handleResultDetails(eventDetails);
+    return result;
+  },
+};