@whitesev/pops 2.5.0 → 2.5.2

package/dist/types/src/handler/PopsHandler.d.ts

@@ -54,107 +54,123 @@ export declare const PopsHandler: {
         /**
          * 主元素
          */
-        popsElement: HTMLDivElement;
+        $pops: HTMLDivElement;
         /**
          * 确认按钮
          */
-        btnOkElement: HTMLDivElement;
+        $btnOk: HTMLDivElement;
         /**
          * 取消按钮
          */
-        btnCancelElement: HTMLDivElement;
+        $btnCancel: HTMLDivElement;
         /**
          * 其它按钮
          */
-        btnOtherElement: HTMLDivElement;
+        $btnOther: HTMLDivElement;
         /**
          * 标题元素
          */
-        titleElement: HTMLDivElement;
+        $title: HTMLDivElement;
         /**
          * 输入框元素
          */
-        inputElement: HTMLInputElement | HTMLTextAreaElement;
+        $input: HTMLInputElement | HTMLTextAreaElement;
         /**
          * 顶部按钮控制层元素
          */
-        headerControlsElement: HTMLDivElement;
+        $headerControls: HTMLDivElement;
         /**
          * iframe元素
          */
-        iframeElement: HTMLIFrameElement;
+        $iframe: HTMLIFrameElement;
         /**
          * 加载中元素
          */
-        loadingElement: HTMLDivElement;
+        $loading: HTMLDivElement;
         /**
          * 内容元素
          */
-        contentElement: HTMLDivElement;
+        $content: HTMLDivElement;
         /**
          * panel的右侧容器元素
          */
-        panelSectionWrapper: HTMLDivElement;
+        $panelRightSectionWrapper: HTMLDivElement;
         /**
-         * 内容侧边栏容器元素
+         * panel侧边栏容器元素
          */
-        contentAsideElement: HTMLDivElement;
+        $panelLeftAside: HTMLDivElement;
         /**
-         * 内容主要区域容器元素
+         * panel主要区域容器元素
          */
-        contentSectionContainerElement: HTMLDivElement;
+        $panelContentSectionContainer: HTMLDivElement;
+        /**
+         * panel底部区域
+         */
+        $panelBottomWrapper: HTMLElement;
+        /**
+         * panel底部区域容器
+         */
+        $panelBottomContainer: HTMLElement;
+        /**
+         * panel底部区域左侧容器
+         */
+        $panelBottomLeftContainer: HTMLElement;
+        /**
+         * panel底部区域右侧容器
+         */
+        $panelBottomRightContainer: HTMLElement;
         /**
          * 内容加载中元素
          */
-        contentLoadingElement: HTMLDivElement;
+        $contentLoading: HTMLDivElement;
         /**
          * 顶部缩小按钮
          */
-        headerMinBtnElement: HTMLDivElement;
+        $headerBtnMin: HTMLDivElement;
         /**
          * 顶部放大按钮
          */
-        headerMaxBtnElement: HTMLDivElement;
+        $headerBtnMax: HTMLDivElement;
         /**
          * 顶部恢复原样按钮
          */
-        headerMiseBtnElement: HTMLDivElement;
+        $headerBtnMise: HTMLDivElement;
         /**
          * 顶部关闭按钮
          */
-        headerCloseBtnElement: HTMLDivElement;
+        $headerBtnClose: HTMLDivElement;
         /**
          * 文件夹列表元素
          */
-        folderListElement: HTMLDivElement;
+        $folderList: HTMLDivElement;
         /**
          * 文件夹列表顶部元素
          */
-        folderListHeaderElement: HTMLDivElement;
+        $folderHeaderNav: HTMLDivElement;
         /**
          * 文件夹列表行元素
          */
-        folderListHeaderRowElement: HTMLTableRowElement;
+        $folderHeaderRow: HTMLTableRowElement;
         /**
          * 文件夹列表tbody元素
          */
-        folderListBodyElement: HTMLTableElement;
+        $folderTbody: HTMLTableElement;
         /**
          * 文件夹列表primary元素
          */
-        folderFileListBreadcrumbPrimaryElement: HTMLDivElement;
+        $folderHeaderBreadcrumbPrimary: HTMLDivElement;
         /**
          * 文件夹排序按钮-文件名
          */
-        folderListSortFileNameElement: HTMLDivElement;
+        $folderSortFileName: HTMLDivElement;
         /**
          * 文件夹排序按钮-修改时间
          */
-        folderListSortLatestTimeElement: HTMLDivElement;
+        $folderSortLatestTime: HTMLDivElement;
         /**
          * 文件夹排序按钮-文件大小
          */
-        folderListSortFileSizeElement: HTMLDivElement;
+        $folderSortFileSize: HTMLDivElement;
     };
     /**
      * 获取事件配置

package/dist/types/src/types/global.d.ts

@@ -13,13 +13,15 @@ declare interface Window {
   trustedTypes: any;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
-declare type DeepRequired<T> = T extends Function
+declare type DeepRequired<T> = T extends any[]
   ? T
-  : T extends object
-    ? T extends Node
-      ? T
-      : {
-          [K in keyof T]-?: DeepRequired<T[K]>;
-        }
-    : T;
+  : // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+    T extends Function
+    ? T
+    : T extends object
+      ? T extends Node
+        ? T
+        : {
+            [K in keyof T]-?: DeepRequired<T[K]>;
+          }
+      : T;

package/dist/types/src/utils/PopsDOMUtils.d.ts

@@ -657,7 +657,7 @@ declare class PopsDOMUtils extends PopsDOMUtilsEvent {
      * DOMUtils.parseHTML("<a href='xxxx'></a><a href='xxxx'></a>",true, true)
      * > #document
      */
-    parseHTML<T1 extends boolean, T2 extends boolean>(html: string, useParser?: T1, isComplete?: T2): ParseHTMLReturnType<T1, T2>;
+    toElement<T1 extends boolean, T2 extends boolean>(html: string, useParser?: T1, isComplete?: T2): ParseHTMLReturnType<T1, T2>;
     /**
      * 函数在元素内部末尾添加子元素或HTML字符串
      * @param element 目标元素

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/pops",
-  "version": "2.5.0",
+  "version": "2.5.2",
   "description": "弹窗库",
   "type": "module",
   "homepage": "https://github.com/WhiteSevs/TamperMonkeyScript/tree/master/lib/pops#readme",

package/src/PopsAnimation.ts

@@ -1,6 +1,5 @@
 import { PopsCSS } from "./PopsCSS";
 import { popsDOMUtils } from "./utils/PopsDOMUtils";
-import { PopsSafeUtils } from "./utils/PopsSafeUtils";
 import { popsUtils } from "./utils/PopsUtils";
 
 export const PopsAnimation = {
@@ -13,13 +12,14 @@ export const PopsAnimation = {
     if (!this.$flag.isInit) {
       this.$flag.isInit = true;
       /* 处理获取当前所有的动画名 */
-      const animationStyle = document.createElement("style");
-      PopsSafeUtils.setSafeHTML(animationStyle, PopsCSS.anim);
-      popsDOMUtils.appendHead(animationStyle);
+      const $style = popsDOMUtils.createElement("style", {
+        innerHTML: PopsCSS.anim,
+      });
+      popsDOMUtils.appendHead($style);
       this.$data = null as any;
-      this.$data = popsDOMUtils.getKeyFrames(animationStyle.sheet!);
+      this.$data = popsDOMUtils.getKeyFrames($style.sheet!);
       popsUtils.setTimeout(() => {
-        animationStyle.remove();
+        $style.remove();
       }, 50);
     }
   },

package/src/components/alert/index.ts

@@ -82,10 +82,10 @@ export const PopsAlert = {
     const $anim = PopsElementHandler.parseElement<HTMLDivElement>(animHTML);
 
     const {
-      popsElement: $pops,
-      headerCloseBtnElement: $headerCloseBtn,
-      btnOkElement,
-      titleElement: $title,
+      $pops: $pops,
+      $headerBtnClose: $headerCloseBtn,
+      $btnOk: btnOkElement,
+      $title: $title,
     } = PopsHandler.handleQueryElement($anim, popsType);
 
     /** 遮罩层元素 */

package/src/components/confirm/index.ts

@@ -84,12 +84,12 @@ export const PopsConfirm = {
      */
     const $anim = PopsElementHandler.parseElement<HTMLDivElement>(animHTML);
     const {
-      popsElement: $pops,
-      titleElement: $title,
-      headerCloseBtnElement: $btnClose,
-      btnOkElement: $btnOk,
-      btnCancelElement: $btnCancel,
-      btnOtherElement: $btnOther,
+      $pops: $pops,
+      $title: $title,
+      $headerBtnClose: $btnClose,
+      $btnOk: $btnOk,
+      $btnCancel: $btnCancel,
+      $btnOther: $btnOther,
     } = PopsHandler.handleQueryElement($anim, popsType);
     /**
      * 遮罩层元素

package/src/components/drawer/index.ts

@@ -84,8 +84,13 @@ export const PopsDrawer = {
      * 弹窗的主元素，包括动画层
      */
     const $anim = PopsElementHandler.parseElement<HTMLDivElement>(animHTML);
-    const { popsElement, headerCloseBtnElement, btnCancelElement, btnOkElement, btnOtherElement } =
-      PopsHandler.handleQueryElement($anim, popsType);
+    const {
+      $pops: popsElement,
+      $headerBtnClose: headerCloseBtnElement,
+      $btnCancel: btnCancelElement,
+      $btnOk: btnOkElement,
+      $btnOther: btnOtherElement,
+    } = PopsHandler.handleQueryElement($anim, popsType);
     const $pops = popsElement!;
     const $headerCloseBtn = headerCloseBtnElement!;
     const $btnCancel = btnCancelElement!;

package/src/components/folder/index.ts

@@ -232,21 +232,21 @@ export const PopsFolder = {
      */
     const $anim = PopsElementHandler.parseElement<HTMLDivElement>(animHTML);
     const {
-      popsElement: $pops,
-      titleElement: $title,
-      contentElement: $content,
+      $pops: $pops,
+      $title: $title,
+      $content: $content,
       // folderListElement,
       // folderListHeaderElement,
       // folderListHeaderRowElement,
-      folderListBodyElement,
-      folderFileListBreadcrumbPrimaryElement,
-      headerCloseBtnElement: $btnCloseBtn,
-      btnOkElement,
-      btnCancelElement,
-      btnOtherElement,
-      folderListSortFileNameElement,
-      folderListSortLatestTimeElement,
-      folderListSortFileSizeElement,
+      $folderTbody: folderListBodyElement,
+      $folderHeaderBreadcrumbPrimary: folderFileListBreadcrumbPrimaryElement,
+      $headerBtnClose: $btnCloseBtn,
+      $btnOk: btnOkElement,
+      $btnCancel: btnCancelElement,
+      $btnOther: btnOtherElement,
+      $folderSortFileName: folderListSortFileNameElement,
+      $folderSortLatestTime: folderListSortLatestTimeElement,
+      $folderSortFileSize: folderListSortFileSizeElement,
     } = PopsHandler.handleQueryElement($anim, popsType);
 
     /**
@@ -681,14 +681,14 @@ export const PopsFolder = {
               }
               if (downloadInfo.mode === "a" || downloadInfo.mode === "aBlank") {
                 /* a标签下载 */
-                const downloadLinkElement = document.createElement("a");
+                const $anchor = popsDOMUtils.createElement("a");
 
                 if (downloadInfo.mode === "aBlank") {
-                  downloadLinkElement.setAttribute("target", "_blank");
+                  $anchor.setAttribute("target", "_blank");
                 }
 
-                downloadLinkElement.href = downloadInfo.url;
-                downloadLinkElement.click();
+                $anchor.href = downloadInfo.url;
+                $anchor.click();
               } else if (downloadInfo.mode === "open" || downloadInfo.mode === "openBlank") {
                 /* window.open下载 */
 
@@ -699,18 +699,18 @@ export const PopsFolder = {
                 }
               } else if (downloadInfo.mode === "iframe") {
                 /* iframe下载 */
-                const downloadIframeLinkElement = document.createElement("iframe");
+                const $downloadIframe = popsDOMUtils.createElement("iframe");
 
-                downloadIframeLinkElement.src = downloadInfo.url;
-                downloadIframeLinkElement.onload = function () {
+                $downloadIframe.src = downloadInfo.url;
+                $downloadIframe.onload = function () {
                   popsUtils.setTimeout(() => {
-                    downloadIframeLinkElement.remove();
+                    $downloadIframe.remove();
                   }, 1000);
                 };
-                $shadowRoot.appendChild(downloadIframeLinkElement);
+                $shadowRoot.appendChild($downloadIframe);
                 popsUtils.setTimeout(
                   () => {
-                    downloadIframeLinkElement.remove();
+                    $downloadIframe.remove();
                   },
                   3 * 60 * 1000
                 );

package/src/components/iframe/index.ts

@@ -92,21 +92,22 @@ export const PopsIframe = {
 
     const $anim = PopsElementHandler.parseElement<HTMLDivElement>(animHTML);
     const {
-      popsElement: $pops,
-      headerCloseBtnElement,
-      headerControlsElement,
-      titleElement: $title,
-      iframeElement: $iframe,
-      loadingElement,
-      contentLoadingElement: $contentLoading,
-      headerMinBtnElement,
-      headerMaxBtnElement,
-      headerMiseBtnElement,
+      $pops: $pops,
+      $headerBtnClose: headerCloseBtnElement,
+      $headerControls: headerControlsElement,
+      $title: $title,
+      $iframe: $iframe,
+      $loading: loadingElement,
+      $contentLoading: $contentLoading,
+      $headerBtnMin: headerMinBtnElement,
+      $headerBtnMax: headerMaxBtnElement,
+      $headerBtnMise: headerMiseBtnElement,
     } = PopsHandler.handleQueryElement($anim, popsType);
     let $iframeContainer = PopsCore.document.querySelector<HTMLDivElement>(".pops-iframe-container");
     if (!$iframeContainer) {
-      $iframeContainer = PopsCore.document.createElement("div");
-      $iframeContainer.className = "pops-iframe-container";
+      $iframeContainer = popsDOMUtils.createElement("div", {
+        className: "pops-iframe-container",
+      });
       $iframeContainer.style.cssText =
         "display: flex;position: fixed;bottom: 0px;flex-flow: wrap-reverse;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;";
       popsDOMUtils.appendBody($iframeContainer);

package/src/components/loading/index.ts

@@ -52,7 +52,7 @@ export const PopsLoading = {
 
     const $anim = PopsElementHandler.parseElement<HTMLDivElement>(animHTML);
 
-    const { popsElement: $pops } = PopsHandler.handleQueryElement($anim, PopsType);
+    const { $pops: $pops } = PopsHandler.handleQueryElement($anim, PopsType);
     /**
      * 遮罩层元素
      */

package/src/components/panel/config.ts

@@ -32,7 +32,11 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
                 className: "panel-switch",
                 text: "switch",
                 type: "switch",
-                // @ts-ignore
+                disabled: false,
+                description: "",
+                afterAddToUListCallBack() {
+                  // TODO
+                },
                 props: {},
                 attributes: [],
                 getValue() {
@@ -46,7 +50,16 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
                 className: "panel-slider",
                 text: "slider",
                 type: "slider",
-                // @ts-ignore
+                description: "",
+                afterAddToUListCallBack() {
+                  // TODO
+                },
+                disabled: false,
+                getToolTipContent(value) {
+                  return String(value);
+                },
+                isShowHoverTip: true,
+                step: 1,
                 props: {},
                 attributes: [],
                 getValue() {
@@ -62,8 +75,13 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
                 className: "panel-button",
                 text: "button",
                 type: "button",
-                // @ts-ignore
+                description: "",
+                disable: false,
+                buttonIsRightIcon: false,
                 props: {},
+                afterAddToUListCallBack() {
+                  // TODO
+                },
                 attributes: [],
                 buttonIcon: "view",
                 buttonIconIsLoading: true,
@@ -77,7 +95,6 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
                 className: "panel-button",
                 text: "button",
                 type: "button",
-                // @ts-ignore
                 props: {},
                 attributes: [],
                 buttonIcon: "eleme",
@@ -138,7 +155,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
             className: "panel-input",
             text: "input",
             type: "input",
-            // @ts-ignore
+            isNumber: false,
             props: {},
             attributes: [],
             getValue() {
@@ -480,6 +497,42 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
         },
       },
     ],
+    bottomContentConfig: [
+      {
+        text: "Github",
+        position: "left",
+        className: "user-home",
+        attributes: {
+          "data-url": "https://github.com/whitesevs",
+        },
+        props: {
+          "data-test": 1,
+        },
+        disableHoverCSS: false,
+        clickCallback() {
+          const userHomeUrl = (this.attributes as { [key: string]: any })["data-url"];
+          console.log("打开个人主页：" + userHomeUrl);
+          window.open(userHomeUrl, "_blank");
+        },
+        afterRender(config) {
+          console.log(config);
+        },
+      },
+      {
+        text: "0.0.1",
+        position: "right",
+        className: "script-version",
+        attributes: {},
+        props: {},
+        disableHoverCSS: true,
+        clickCallback() {
+          console.log("当前版本：" + this.text);
+        },
+        afterRender(config) {
+          console.log(config);
+        },
+      },
+    ],
     btn: {
       close: {
         enable: true,