@whitesev/pops 3.2.1 → 3.3.0

package/src/components/prompt/defaultConfig.ts

@@ -1,94 +1,94 @@
-import type { PopsPromptConfig } from "./types/index";
-
-export const PopsPromptDefaultConfig = (): DeepRequired<PopsPromptConfig> => {
-  return {
-    title: {
-      text: "默认标题",
-      position: "left",
-      html: false,
-      style: "",
-    },
-    content: {
-      text: "",
-      select: false,
-      password: false,
-      row: false,
-      focus: true,
-      placeholder: "默认提示",
-      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: "success",
-        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() {},
-  };
-};
+import type { PopsPromptConfig } from "./types/index";
+
+export const PopsPromptDefaultConfig = (): DeepRequired<PopsPromptConfig> => {
+  return {
+    title: {
+      text: "默认标题",
+      position: "left",
+      html: false,
+      style: "",
+    },
+    content: {
+      text: "",
+      select: false,
+      password: false,
+      row: false,
+      focus: true,
+      placeholder: "默认提示",
+      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: "success",
+        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() {},
+  };
+};

package/src/components/prompt/index.css

@@ -1,34 +1,34 @@
-.pops[type-value="prompt"] {
-  --input-color: #000000;
-  --input-bg-color: none;
-  --input-placeholder-color: #a1a4ac;
-}
-.pops[type-value="prompt"] input[pops],
-.pops[type-value="prompt"] textarea[pops] {
-  width: 100%;
-  height: 100%;
-  outline: 0;
-  border: 0;
-  color: var(--input-color);
-  background-color: var(--input-bg-color);
-}
-
-.pops[type-value="prompt"] input[pops] {
-  padding: 5px 10px;
-}
-.pops[type-value="prompt"] textarea[pops] {
-  padding: 5px 10px;
-  resize: none;
-}
-
-.pops[type-value="prompt"] input[pops]::placeholder,
-.pops[type-value="prompt"] textarea[pops]::placeholder {
-  color: var(--input-placeholder-color);
-}
-@media (prefers-color-scheme: dark) {
-  .pops[type-value="prompt"] {
-    --input-color: #ffffff;
-    --input-bg-color: #333333;
-    --input-placeholder-color: #8d9095;
-  }
-}
+.pops[type-value="prompt"] {
+  --input-color: #000000;
+  --input-bg-color: none;
+  --input-placeholder-color: #a1a4ac;
+}
+.pops[type-value="prompt"] input[pops],
+.pops[type-value="prompt"] textarea[pops] {
+  width: 100%;
+  height: 100%;
+  outline: 0;
+  border: 0;
+  color: var(--input-color);
+  background-color: var(--input-bg-color);
+}
+
+.pops[type-value="prompt"] input[pops] {
+  padding: 5px 10px;
+}
+.pops[type-value="prompt"] textarea[pops] {
+  padding: 5px 10px;
+  resize: none;
+}
+
+.pops[type-value="prompt"] input[pops]::placeholder,
+.pops[type-value="prompt"] textarea[pops]::placeholder {
+  color: var(--input-placeholder-color);
+}
+@media (prefers-color-scheme: dark) {
+  .pops[type-value="prompt"] {
+    --input-color: #ffffff;
+    --input-bg-color: #333333;
+    --input-placeholder-color: #8d9095;
+  }
+}

package/src/components/prompt/index.ts

@@ -1,215 +1,187 @@
-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 { PopsPromptDefaultConfig } from "./defaultConfig";
-import type { PopsPromptConfig } from "./types/index";
-
-export const PopsPrompt = {
-  init(__config__: PopsPromptConfig) {
-    const guid = popsUtils.getRandomGUID();
-    // 设置当前类型
-    const popsType: PopsType = "prompt";
-
-    let config = PopsPromptDefaultConfig();
-    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: "promptCSS",
-        css: PopsCSS.promptCSS,
-      },
-    ]);
-
-    // 先把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 { 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="${contentPStyle}">${
-              config.content.row
-                ? '<textarea name="pops-input-text" pops="" placeholder="' +
-                  config.content.placeholder +
-                  '"></textarea>'
-                : '<input name="pops-input-text" pops="" placeholder="' +
-                  config.content.placeholder +
-                  '" type="' +
-                  (config.content.password ? "password" : "text") +
-                  '">'
-            }</div>${bottomBtnHTML}`,
-      bottomBtnHTML,
-      zIndex
-    );
-    /**
-     * 弹窗的主元素，包括动画层
-     */
-
-    const $anim = PopsElementHandler.parseElement<HTMLDivElement>(animHTML);
-
-    const {
-      $pops: $pops,
-      $input: $input,
-      $headerBtnClose: $btnClose,
-      $btnOk: $btnOk,
-      $btnCancel: $btnCancel,
-      $btnOther: $btnOther,
-      $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);
-    // 输入框赋值初始值
-
-    $input.value = config.content.text;
-    PopsHandler.handlePromptClickEvent(
-      "close",
-      $input,
-      $btnClose,
-      evtConfig,
-
-      config.btn.close.callback
-    );
-
-    PopsHandler.handlePromptClickEvent(
-      "ok",
-      $input,
-      $btnOk,
-      evtConfig,
-
-      config.btn.ok.callback
-    );
-    PopsHandler.handlePromptClickEvent(
-      "cancel",
-      $input,
-      $btnCancel,
-      evtConfig,
-
-      config.btn.cancel.callback
-    );
-
-    PopsHandler.handlePromptClickEvent(
-      "other",
-      $input,
-      $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,
-      });
-    }
-    // 设置自动获取焦点
-    if (config.content.focus) {
-      $input.focus();
-    }
-    // 设置自动选中所有文字
-    if (config.content.select) {
-      $input.select();
-    }
-    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 { PopsPromptDefaultConfig } from "./defaultConfig";
+import type { PopsPromptConfig } from "./types/index";
+
+export const PopsPrompt = {
+  init(__config__: PopsPromptConfig) {
+    const guid = popsUtils.getRandomGUID();
+    // 设置当前类型
+    const popsType: PopsType = "prompt";
+
+    let config = PopsPromptDefaultConfig();
+    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: "promptCSS",
+        css: PopsCSS.promptCSS,
+      },
+    ]);
+
+    // 先把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 { 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="${contentPStyle}">${
+              config.content.row
+                ? '<textarea name="pops-input-text" pops="" placeholder="' +
+                  config.content.placeholder +
+                  '"></textarea>'
+                : '<input name="pops-input-text" pops="" placeholder="' +
+                  config.content.placeholder +
+                  '" type="' +
+                  (config.content.password ? "password" : "text") +
+                  '">'
+            }</div>${bottomBtnHTML}`,
+      bottomBtnHTML,
+      zIndex
+    );
+    /**
+     * 弹窗的主元素，包括动画层
+     */
+
+    const $anim = PopsElementHandler.parseElement<HTMLDivElement>(animHTML);
+
+    const {
+      $pops: $pops,
+      $input: $input,
+      $headerBtnClose: $btnClose,
+      $btnOk: $btnOk,
+      $btnCancel: $btnCancel,
+      $btnOther: $btnOther,
+      $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);
+    // 输入框赋值初始值
+
+    $input.value = config.content.text;
+    PopsHandler.handlePromptClickEvent("close", $input, $btnClose, evtConfig, config.btn.close.callback);
+
+    PopsHandler.handlePromptClickEvent("ok", $input, $btnOk, evtConfig, config.btn.ok.callback);
+    PopsHandler.handlePromptClickEvent("cancel", $input, $btnCancel, evtConfig, config.btn.cancel.callback);
+
+    PopsHandler.handlePromptClickEvent("other", $input, $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,
+      });
+    }
+    // 设置自动获取焦点
+    if (config.content.focus) {
+      $input.focus();
+    }
+    // 设置自动选中所有文字
+    if (config.content.select) {
+      $input.select();
+    }
+    return result;
+  },
+};