@whitesev/pops 2.4.7 → 2.5.1

package/dist/types/src/components/panel/types/index.d.ts

@@ -10,6 +10,7 @@ import type { PopsPanelDeepMenuDetails } from "./components-deepMenu";
 import type { PopsPanelOwnDetails } from "./components-own";
 import type { PopsHeaderCloseButtonDetails } from "../../../types/button";
 import type { PopsPanelSelectMultipleDetails } from "./components-selectMultiple";
+import type { PopsPanelCommonDetails } from "./components-common";
 /** panel的各种类型的配置项 */
 export type PopsPanelFormsTotalDetails = PopsPanelSwitchDetails | PopsPanelSliderDetails | PopsPanelInputDetails | PopsPanelTextAreaDetails | PopsPanelSelectDetails<any> | PopsPanelSelectMultipleDetails<any> | PopsPanelButtonDetails | PopsPanelDeepMenuDetails | PopsPanelOwnDetails;
 /**
@@ -40,11 +41,11 @@ export interface PopsPanelContentConfig {
      */
     className?: string | string[];
     /**
-     * 左侧的标题，可以是html格式
+     * 显示的文本，可以是html格式
      */
     title: string | (() => string);
     /**
-     * （可选）中间顶部的标题，如果为空，则使用title的值代替
+     * （可选）中间顶部的文本，如果为空，则使用title的值代替
      * @default title
      */
     headerTitle?: string | (() => string);
@@ -72,17 +73,11 @@ export interface PopsPanelContentConfig {
     /**
      * （可选）自定义元素属性.setAttribute、.getAttribute
      */
-    attributes?: {
-        [key: string]: any;
-    } | {
-        [key: string]: any;
-    }[];
+    attributes?: PopsPanelCommonDetails<any>["attributes"];
     /**
      * （可选）自定义元素内部的属性值
      */
-    props?: {
-        [K in keyof HTMLElement]?: HTMLElement[K];
-    };
+    props?: PopsPanelCommonDetails<any>["props"];
     /**
      * 子配置
      */
@@ -106,13 +101,81 @@ export interface PopsPanelContentConfig {
     /**
      * 配置
      */
-    data: {
+    config: {
         /** 容器配置 */
         asideConfig: PopsPanelContentConfig;
         /** 左侧容器的元素 */
         $asideLiElement: HTMLLIElement;
     }) => void;
 }
+/**
+ * pops.panel的bottomContent配置信息
+ */
+export interface PopsPanelBottomContentConfig {
+    /**
+     * （可选）元素的className，值为空的话就不设置
+     * @default ""
+     */
+    className?: string | string[];
+    /**
+     * （可选）配置所在位置
+     *
+     * @default "left"
+     */
+    position: "left" | "right";
+    /**
+     * 显示的文本，可以是html格式
+     */
+    text: string | (() => string);
+    /**
+     * （可选）是否禁用hover的CSS样式
+     * @default false
+     */
+    disableHoverCSS?: boolean | (() => boolean);
+    /**
+     * （可选）自定义元素属性.setAttribute、.getAttribute
+     * @default {}
+     */
+    attributes?: {
+        [key: string]: any;
+    } | {
+        [key: string]: any;
+    }[];
+    /**
+     * （可选）自定义元素内部的属性值
+     * @default {}
+     */
+    props?: {
+        [K in keyof HTMLElement]?: HTMLElement[K];
+    } | {
+        [key: string]: any;
+    };
+    /**
+     * 该项的点击回调
+     */
+    clickCallback?: (
+    /**
+     * 点击事件
+     */
+    event: MouseEvent | PointerEvent) => void;
+    /**
+     * 该项添加到panel后的回调
+     */
+    afterRender?: (
+    /**
+     * 配置
+     */
+    config: {
+        /** panel底部区域 */
+        $bottomWrapper: HTMLElement;
+        /** panel底部区域容器 */
+        $bottomContainer: HTMLElement;
+        /** panel底部区域左侧容器 */
+        $bottomLeftContainer: HTMLElement;
+        /** panel底部区域右侧容器 */
+        $bottomRightContainer: HTMLElement;
+    }) => void;
+}
 /**
  * pops.panel
  */
@@ -121,6 +184,10 @@ export interface PopsPanelDetails extends PopsTitleConfig, PopsDragConfig, PopsC
      * 内容配置
      */
     content: PopsPanelContentConfig[];
+    /**
+     * 底部内容配置
+     */
+    bottomContentConfig?: PopsPanelBottomContentConfig[];
     /**
      * 右上角的按钮配置
      */

package/dist/types/src/components/rightClickMenu/index.d.ts

@@ -1,9 +1,9 @@
-import type { PopsRightClickMenuDetails } from "./types";
+import type { PopsRightClickMenuDataDetails, PopsRightClickMenuDetails } from "./types";
 export declare const PopsRightClickMenu: {
     init(details: PopsRightClickMenuDetails): {
         guid: string;
         config: {
-            target: HTMLElement | Node | {
+            target: Node | HTMLElement | {
                 addEventListener: (type: string, callback: EventListenerOrEventListenerObject | null, options?: AddEventListenerOptions | boolean) => void;
                 dispatchEvent: (event: Event) => boolean;
                 removeEventListener: (type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean) => void;
@@ -20941,23 +20941,17 @@ export declare const PopsRightClickMenu: {
                 };
             };
             targetSelector: string | null;
-            data: {
-                icon: import("../../types/icon").PopsIconType | string;
-                iconIsLoading: boolean;
-                text: string | (() => string);
-                callback: (clickEvent: PointerEvent, contextMenuEvent: PointerEvent, liElement: HTMLLIElement, menuListenerRootNode: HTMLElement) => boolean | void | Promise<boolean | void>;
-                item: /*elided*/ any[] | null;
-            }[];
+            data: PopsRightClickMenuDataDetails[];
             chileMenuLeftOrRightDistance: number;
             childMenuTopOrBottomDistance: number;
             className: string;
             isAnimation: boolean;
             useScaleAnimation: boolean;
             preventDefault: boolean;
-            useShadowRoot: boolean;
-            only: boolean;
             zIndex: number | (() => number);
             style: string | null;
+            useShadowRoot: boolean;
+            only: boolean;
             beforeAppendToPageCallBack: ($shadowRoot: ShadowRoot | HTMLElement, $shadowContainer: HTMLDivElement) => void;
         };
         removeWindowCheckClickListener: () => void;

package/dist/types/src/components/searchSuggestion/index.d.ts

@@ -4,7 +4,7 @@ export declare const PopsSearchSuggestion: {
         /**
          * 当前的环境，可以是document，可以是shadowroot，默认是document
          */
-        selfDocument: Document | ShadowRoot | (Document | ShadowRoot)[];
+        selfDocument: ShadowRoot | Document | (ShadowRoot | Document)[];
         $el: {
             /** 根元素 */
             root: HTMLElement;

package/dist/types/src/components/tooltip/index.d.ts

@@ -219,14 +219,14 @@ export declare const PopsTooltip: {
             showArrow: boolean;
             arrowDistance: number;
             otherDistance: number;
-            useShadowRoot: boolean;
-            only: boolean;
             zIndex: number | (() => number);
             style: string | null;
+            useShadowRoot: boolean;
+            only: boolean;
             beforeAppendToPageCallBack: ($shadowRoot: ShadowRoot | HTMLElement, $shadowContainer: HTMLDivElement) => void;
         };
         $shadowContainer: HTMLDivElement;
-        $shadowRoot: HTMLDivElement | ShadowRoot;
+        $shadowRoot: ShadowRoot | HTMLDivElement;
         toolTip: ToolTip;
     };
 };

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.4.7",
+  "version": "2.5.1",
   "description": "弹窗库",
   "type": "module",
   "homepage": "https://github.com/WhiteSevs/TamperMonkeyScript/tree/master/lib/pops#readme",
@@ -48,6 +48,7 @@
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "12.1.4",
     "browserslist": "^4.26.2",
     "caniuse-lite": "^1.0.30001743",

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);
     /**
      * 遮罩层元素
      */