@whitesev/pops 3.3.3 → 3.3.5

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

@@ -37,16 +37,16 @@ declare class Pops {
         };
         /** icon图标的svg代码 */
         iconSVG: {
-            loading: string;
             min: string;
-            max: string;
-            search: string;
             mise: string;
+            max: string;
             close: string;
             edit: string;
             share: string;
             delete: string;
+            search: string;
             upload: string;
+            loading: string;
             next: string;
             prev: string;
             eleme: string;
@@ -72,14 +72,14 @@ declare class Pops {
         };
         /** 存储已创建的元素 */
         instData: {
-            iframe: import("./types/inst").PopsInstGeneralConfig[];
-            folder: import("./types/inst").PopsInstGeneralConfig[];
             loading: import("./types/inst").PopsInstGeneralConfig[];
             alert: import("./types/inst").PopsInstGeneralConfig[];
             confirm: import("./types/inst").PopsInstGeneralConfig[];
             prompt: import("./types/inst").PopsInstGeneralConfig[];
+            iframe: import("./types/inst").PopsInstGeneralConfig[];
             tooltip: import("./types/inst").PopsInstGeneralConfig[];
             drawer: import("./types/inst").PopsInstGeneralConfig[];
+            folder: import("./types/inst").PopsInstGeneralConfig[];
             panel: import("./types/inst").PopsInstGeneralConfig[];
             rightClickMenu: import("./types/inst").PopsInstGeneralConfig[];
         };
@@ -726,6 +726,7 @@ declare class Pops {
             forbiddenScroll?: boolean | undefined;
             lightStyle?: string | undefined;
             darkStyle?: string | undefined;
+            stopKeyDownEventPropagation?: boolean | undefined;
             beforeAppendToPageCallBack?: void;
             drag?: boolean | undefined;
             dragLimit?: boolean | undefined;
@@ -788,16 +789,16 @@ declare class Pops {
             showArrow: boolean;
             arrowDistance: number;
             otherDistance: number;
-            useShadowRoot: boolean;
-            only: boolean;
             zIndex: IFunction<number>;
             style: string | null;
+            useShadowRoot: boolean;
+            only: boolean;
             lightStyle: string | null;
             darkStyle: string | null;
             beforeAppendToPageCallBack: ($shadowRoot: ShadowRoot | HTMLElement, $shadowContainer: HTMLDivElement) => void;
         };
         $shadowContainer: HTMLDivElement;
-        $shadowRoot: HTMLDivElement | ShadowRoot;
+        $shadowRoot: ShadowRoot | HTMLElement;
         toolTip: import("./components/tooltip").ToolTip;
     };
     /**
@@ -817,9 +818,9 @@ declare class Pops {
     panel: (config: PopsPanelConfig) => {
         addEventListener: <K extends keyof import("./components/panel/types").PopsPanelEventType>(event: K, listener: (evt: CustomEvent<import("./components/panel/types").PopsPanelEventType[K]>) => void, options?: boolean | EventListenerOptions) => void;
         removeEventListener: <K extends keyof import("./components/panel/types").PopsPanelEventType>(event: K, listener: (evt: CustomEvent<import("./components/panel/types").PopsPanelEventType[K]>) => void, options?: boolean | EventListenerOptions) => void;
-        mode: import("./types/main").PopsType;
         close: () => Promise<void>;
         hide: () => Promise<void>;
+        mode: import("./types/main").PopsType;
         show: ($parent?: HTMLElement | Document | ShadowRoot) => Promise<void>;
         $shadowContainer: HTMLDivElement;
         $shadowRoot: ShadowRoot | HTMLElement;
@@ -907,7 +908,7 @@ declare class Pops {
      * searchSuggestion.setAllEvent();
      */
     searchSuggestion: <T = any>(config: PopsSearchSuggestionConfig<T>) => {
-        selfDocument: Document | ShadowRoot | (Document | ShadowRoot)[];
+        selfDocument: ShadowRoot | Document | (ShadowRoot | Document)[];
         $el: {
             root: HTMLElement;
             $dropdownWrapper: HTMLElement;

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

@@ -4,18 +4,11 @@ import type { PopsTitleConfig, PopsDragConfig, PopsGeneralConfig, PopsMoreButton
  */
 export type PopsFolderDownloadOption = {
     /**
-     * 是否点击后自动触发下载
      *
-     * + `true`: 自动根据设置的`mode`值来选择下载方式
-     * + `false`: 不触发下载
-     */
-    autoDownload: boolean;
-    /**
-     * 触发下载后会根据提供的url链接进行下载
-     */
-    url: string;
-    /**
-     * 下载方式
+     * 前置条件：url不为空
+     *
+     * 下载方式，不传入就不下载（不做任何处理）
+     *
      *
      * + `a`: 使用`a标签`进行下载
      * + `aBlank`: 使用`a标签`进行下载（添加属性`target="_blank"`）
@@ -26,6 +19,10 @@ export type PopsFolderDownloadOption = {
      * @default "aBlank"
      */
     mode?: "a" | "aBlank" | "iframe" | "open" | "openBlank";
+    /**
+     * 触发下载后会根据提供的url链接进行下载
+     */
+    url: string;
 };
 /**
  * pops.folder的folder配置信息
@@ -85,14 +82,22 @@ export interface PopsFolderDataConfig {
      * 层级
      */
     index: number;
+    /**
+     * 列表项的点击事件回调
+     *
+     * 如果是配置项，则自动根据配置项来创建下载事件，也可以自定义函数
+     *
+     * 如果是自定义函数的话，根据返回值来判断，如果为空则什么都不做
+     */
+    clickEvent?: ((
     /**
      * 点击事件
      */
-    clickEvent?: (event: MouseEvent | PointerEvent, 
+    event: MouseEvent | PointerEvent, 
     /**
      * 当前层级的文件|文件夹信息配置
      */
-    config: PopsFolderDataConfig) => IPromise<PopsFolderDownloadOption | PopsFolderDataConfig[] | null | undefined | void>;
+    config: PopsFolderDataConfig) => IPromise<PopsFolderDownloadOption | PopsFolderDataConfig[] | null | undefined | void>) | PopsFolderDownloadOption | PopsFolderDataConfig[] | null | undefined | void;
 }
 /**
  * pops.folder

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

@@ -213,7 +213,7 @@ export declare const PopsTooltip: {
             beforeAppendToPageCallBack: ($shadowRoot: ShadowRoot | HTMLElement, $shadowContainer: HTMLDivElement) => void;
         };
         $shadowContainer: HTMLDivElement;
-        $shadowRoot: HTMLDivElement | ShadowRoot;
+        $shadowRoot: HTMLElement | ShadowRoot;
         toolTip: ToolTip;
     };
 };

package/dist/types/src/config/GlobalConfig.d.ts

@@ -27,6 +27,7 @@ export declare const GlobalConfig: {
         forbiddenScroll?: boolean | undefined;
         lightStyle?: string | undefined;
         darkStyle?: string | undefined;
+        stopKeyDownEventPropagation?: boolean | undefined;
         beforeAppendToPageCallBack?: void;
         drag?: boolean | undefined;
         dragLimit?: boolean | undefined;

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

@@ -14,12 +14,9 @@ export declare const PopsHandler: {
     /**
      * 创建shadow
      */
-    handlerShadow(config: Pick<PopsGeneralConfig, "useShadowRoot">): {
+    handlerShadow(config: Pick<PopsGeneralConfig, "useShadowRoot" | "stopKeyDownEventPropagation">): {
         $shadowContainer: HTMLDivElement;
-        $shadowRoot: ShadowRoot;
-    } | {
-        $shadowContainer: HTMLDivElement;
-        $shadowRoot: HTMLDivElement;
+        $shadowRoot: HTMLElement | ShadowRoot;
     };
     /**
      * 处理初始化

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

@@ -214,6 +214,13 @@ export interface PopsGeneralConfig {
    * 传入的css都在dark内
    */
   darkStyle?: string | null;
+  /**
+   * （可选）是否阻止`keydown`事件传播
+   *
+   * 主要是阻止当`keydown`触发来源为输入框时，即在输入框内按下按键不会触发页面的快捷键
+   * @default true
+   */
+  stopKeyDownEventPropagation?: boolean;
   /**
    * 在元素添加到页面前的事件
    * @param $shadowRoot 根元素

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/pops",
-  "version": "3.3.3",
+  "version": "3.3.5",
   "description": "弹窗库，包含了alert、confirm、prompt、drawer、folder、loading、iframe、panel、tooltip、searchSuggestion、rightClickMenu组件",
   "keywords": [
     "ScriptCat",

package/src/components/alert/defaultConfig.ts

@@ -60,5 +60,6 @@ export const PopsAlertDefaultConfig = (): DeepRequired<PopsAlertConfig> => {
     lightStyle: null,
     darkStyle: null,
     beforeAppendToPageCallBack() {},
+    stopKeyDownEventPropagation: true,
   } as DeepRequired<PopsAlertConfig>;
 };

package/src/components/confirm/defaultConfig.ts

@@ -88,5 +88,6 @@ export const PopsConfirmDefaultConfig = (): DeepRequired<PopsConfirmConfig> => {
     lightStyle: null,
     darkStyle: null,
     beforeAppendToPageCallBack() {},
+    stopKeyDownEventPropagation: true,
   } as DeepRequired<PopsConfirmConfig>;
 };

package/src/components/drawer/defaultConfig.ts

@@ -87,5 +87,6 @@ export const PopsDrawerDefaultConfig = (): DeepRequired<PopsDrawerConfig> => {
     darkStyle: null,
     beforeAppendToPageCallBack() {},
     forbiddenScroll: false,
+    stopKeyDownEventPropagation: true,
   };
 };

package/src/components/folder/defaultConfig.ts

@@ -149,5 +149,6 @@ export const PopsFolderDefaultConfig = (): DeepRequired<PopsFolderConfig> => {
     lightStyle: null,
     darkStyle: null,
     beforeAppendToPageCallBack() {},
+    stopKeyDownEventPropagation: true,
   };
 };

package/src/components/folder/index.ts

@@ -10,7 +10,7 @@ import { popsUtils } from "../../utils/PopsUtils";
 import { PopsLoading } from "../loading";
 import { PopsFolderDefaultConfig } from "./defaultConfig";
 import { Folder_ICON } from "./folderIcon";
-import type { PopsFolderDataConfig, PopsFolderConfig, PopsFolderDownloadOption } from "./types";
+import type { PopsFolderConfig, PopsFolderDataConfig, PopsFolderDownloadOption } from "./types";
 
 export const PopsFolder = {
   init(__config__: PopsFolderConfig) {
@@ -517,10 +517,13 @@ export const PopsFolder = {
         );
         // 存储原来的值
         Reflect.set($fileName, "__value__", folderData);
-        Reflect.set($folder, "folderData", folderData);
+        Reflect.set($folder, "__value__", folderData);
         $folder.appendChild($fileName);
         return {
           folderElement: $folder,
+          /**
+           * 超链接标签的容器
+           */
           fileNameElement: $fileName,
         };
       }
@@ -619,8 +622,16 @@ export const PopsFolder = {
           },
           addIndexCSS: false,
         });
+        let childConfig: PopsFolderDataConfig[] | undefined;
         if (typeof dataConfig.clickEvent === "function") {
-          const childConfig = await dataConfig.clickEvent(clickEvent, dataConfig);
+          const result = await dataConfig.clickEvent(clickEvent, dataConfig);
+          if (Array.isArray(result)) {
+            childConfig = result;
+          }
+        } else if (Array.isArray(dataConfig.clickEvent)) {
+          childConfig = dataConfig.clickEvent;
+        }
+        if (childConfig) {
           // 添加顶部导航的箭头
           folderFileListBreadcrumbPrimaryElement.appendChild(this.createHeaderArrowIcon());
           // 添加顶部导航的链接文字
@@ -637,54 +648,63 @@ export const PopsFolder = {
         }
         loadingMask.close();
       }
+      /**
+       * 更新文件的显示的链接信息
+       *
+       * 这里主要用于鼠标中键或者右键触发，左键触发方式会根据mode进行处理
+       * @returns 更新的文件的下载链接
+       */
+      updateFileLink($row: HTMLElement, downloadInfo: PopsFolderDownloadOption) {
+        const downloadUrl = typeof downloadInfo?.url === "string" ? downloadInfo.url.trim() : "";
+        if (downloadUrl !== "" && downloadUrl !== "null" && downloadUrl !== "undefined") {
+          const $link = $row.querySelector("a")!;
+          $link.setAttribute("href", downloadUrl);
+          return downloadUrl;
+        }
+      }
       /**
        * 文件的点击事件 - 下载文件
-       * @param $target
+       * @param evt 点击事件
+       * @param $row 列表项
        * @param dataConfig
        */
-      async downloadFile(clickEvent: MouseEvent | PointerEvent, $row: HTMLElement, dataConfig: PopsFolderDataConfig) {
-        popsDOMUtils.preventEvent(clickEvent);
-
-        const $link = $row.querySelector("a")!;
+      async onFileClick(evt: MouseEvent | PointerEvent, $row: HTMLElement, dataConfig: PopsFolderDataConfig) {
+        let downloadInfo: PopsFolderDownloadOption | undefined;
         if (typeof dataConfig.clickEvent === "function") {
-          const downloadInfo = await dataConfig.clickEvent(clickEvent, dataConfig)!;
-          if (
-            downloadInfo != null &&
-            typeof downloadInfo === "object" &&
-            !Array.isArray(downloadInfo) &&
-            typeof downloadInfo.url === "string" &&
-            downloadInfo.url.trim() !== ""
-          ) {
-            $link.setAttribute("href", downloadInfo.url);
-            $link.setAttribute("target", "_blank");
-            if (downloadInfo.autoDownload) {
-              if (downloadInfo.mode == null || String(downloadInfo.mode) === "") {
-                // 未设置mode的话默认为aBlank
-                downloadInfo.mode = "aBlank";
-              }
+          const result = await dataConfig.clickEvent(evt, dataConfig);
+          if (typeof result === "object" && result != null && !Array.isArray(result)) {
+            downloadInfo = result;
+          }
+        } else if (
+          typeof dataConfig.clickEvent === "object" &&
+          dataConfig.clickEvent != null &&
+          !Array.isArray(dataConfig.clickEvent)
+        ) {
+          downloadInfo = dataConfig.clickEvent;
+        }
+        if (downloadInfo) {
+          const downloadUrl = this.updateFileLink($row, downloadInfo);
+          if (downloadUrl) {
+            if (typeof downloadInfo.mode === "string") {
               if (downloadInfo.mode === "a" || downloadInfo.mode === "aBlank") {
                 // a标签下载
                 const $anchor = popsDOMUtils.createElement("a");
-
                 if (downloadInfo.mode === "aBlank") {
                   $anchor.setAttribute("target", "_blank");
                 }
-
-                $anchor.href = downloadInfo.url;
+                $anchor.href = downloadUrl;
                 $anchor.click();
               } else if (downloadInfo.mode === "open" || downloadInfo.mode === "openBlank") {
                 // window.open下载
-
                 if (downloadInfo.mode === "openBlank") {
-                  globalThis.open(downloadInfo.url, "_blank");
+                  globalThis.open(downloadUrl, "_blank");
                 } else {
-                  globalThis.open(downloadInfo.url);
+                  globalThis.open(downloadUrl);
                 }
               } else if (downloadInfo.mode === "iframe") {
                 // iframe下载
                 const $downloadIframe = popsDOMUtils.createElement("iframe");
-
-                $downloadIframe.src = downloadInfo.url;
+                $downloadIframe.src = downloadUrl;
                 $downloadIframe.onload = function () {
                   popsUtils.setTimeout(() => {
                     $downloadIframe.remove();
@@ -860,9 +880,14 @@ export const PopsFolder = {
             // 文件 - 点击事件
             popsDOMUtils.on<MouseEvent | PointerEvent>(fileNameElement, "click", (event) => {
               // 下载文件
-              this.downloadFile(event, fileNameElement, item);
+              popsDOMUtils.preventEvent(event);
+              this.onFileClick(event, fileNameElement, item);
             });
-
+            // 如果clickEvent不是函数，那么现在就可以进行配置
+            if (typeof item.clickEvent === "object" && item.clickEvent !== null && !Array.isArray(item.clickEvent)) {
+              // {} 单文件配置
+              this.updateFileLink(fileNameElement, item.clickEvent);
+            }
             folderListBodyElement.appendChild(folderElement);
           }
         });

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

@@ -10,18 +10,11 @@ import type {
  */
 export type PopsFolderDownloadOption = {
   /**
-   * 是否点击后自动触发下载
    *
-   * + `true`: 自动根据设置的`mode`值来选择下载方式
-   * + `false`: 不触发下载
-   */
-  autoDownload: boolean;
-  /**
-   * 触发下载后会根据提供的url链接进行下载
-   */
-  url: string;
-  /**
-   * 下载方式
+   * 前置条件：url不为空
+   *
+   * 下载方式，不传入就不下载（不做任何处理）
+   *
    *
    * + `a`: 使用`a标签`进行下载
    * + `aBlank`: 使用`a标签`进行下载（添加属性`target="_blank"`）
@@ -32,6 +25,10 @@ export type PopsFolderDownloadOption = {
    * @default "aBlank"
    */
   mode?: "a" | "aBlank" | "iframe" | "open" | "openBlank";
+  /**
+   * 触发下载后会根据提供的url链接进行下载
+   */
+  url: string;
 };
 /**
  * pops.folder的folder配置信息
@@ -96,15 +93,28 @@ export interface PopsFolderDataConfig {
    */
   index: number;
   /**
-   * 点击事件
+   * 列表项的点击事件回调
+   *
+   * 如果是配置项，则自动根据配置项来创建下载事件，也可以自定义函数
+   *
+   * 如果是自定义函数的话，根据返回值来判断，如果为空则什么都不做
    */
-  clickEvent?: (
-    event: MouseEvent | PointerEvent,
-    /**
-     * 当前层级的文件|文件夹信息配置
-     */
-    config: PopsFolderDataConfig
-  ) => IPromise<PopsFolderDownloadOption | PopsFolderDataConfig[] | null | undefined | void>;
+  clickEvent?:
+    | ((
+        /**
+         * 点击事件
+         */
+        event: MouseEvent | PointerEvent,
+        /**
+         * 当前层级的文件|文件夹信息配置
+         */
+        config: PopsFolderDataConfig
+      ) => IPromise<PopsFolderDownloadOption | PopsFolderDataConfig[] | null | undefined | void>)
+    | PopsFolderDownloadOption
+    | PopsFolderDataConfig[]
+    | null
+    | undefined
+    | void;
 }
 
 /**

package/src/components/iframe/defaultConfig.ts

@@ -58,5 +58,6 @@ export const PopsIframeDefaultConfig = (): DeepRequired<PopsIframeConfig> => {
     lightStyle: null,
     darkStyle: null,
     beforeAppendToPageCallBack() {},
+    stopKeyDownEventPropagation: true,
   };
 };

package/src/components/loading/defaultConfig.ts

@@ -27,5 +27,6 @@ export const PopsLoadingDefaultConfig = (): DeepRequired<PopsLoadingConfig> => {
     lightStyle: null,
     darkStyle: null,
     addIndexCSS: true,
+    stopKeyDownEventPropagation: true,
   };
 };

package/src/components/panel/defaultConfig.ts

@@ -866,5 +866,6 @@ export const PopsPanelDefaultConfig = (): DeepRequired<PopsPanelConfig> => {
     lightStyle: null,
     darkStyle: null,
     beforeAppendToPageCallBack() {},
+    stopKeyDownEventPropagation: true,
   };
 };

package/src/components/prompt/defaultConfig.ts

@@ -92,5 +92,6 @@ export const PopsPromptDefaultConfig = (): DeepRequired<PopsPromptConfig> => {
     lightStyle: null,
     darkStyle: null,
     beforeAppendToPageCallBack() {},
+    stopKeyDownEventPropagation: true,
   };
 };

package/src/handler/PopsHandler.ts

@@ -21,22 +21,46 @@ export const PopsHandler = {
   /**
    * 创建shadow
    */
-  handlerShadow(config: Pick<PopsGeneralConfig, "useShadowRoot">) {
+  handlerShadow(config: Pick<PopsGeneralConfig, "useShadowRoot" | "stopKeyDownEventPropagation">) {
     const $shadowContainer = popsDOMUtils.createElement("div", {
       className: "pops-shadow-container",
     });
+    let $shadowRoot: ShadowRoot | HTMLElement;
     if (config.useShadowRoot) {
-      const $shadowRoot = $shadowContainer.attachShadow({ mode: "open" });
-      return {
-        $shadowContainer,
-        $shadowRoot,
-      };
+      $shadowRoot = $shadowContainer.attachShadow({ mode: "open" });
     } else {
-      return {
-        $shadowContainer,
-        $shadowRoot: $shadowContainer,
-      };
+      $shadowRoot = $shadowContainer;
     }
+    // 添加键盘监听
+    // rightClickMenu
+    // searchSuggestion
+    // tooltip
+    // 以上都不需要添加该事件监听
+    if (config.stopKeyDownEventPropagation) {
+      popsDOMUtils.on(
+        $shadowRoot,
+        "keydown",
+        [
+          'input[type="text"]',
+          'input[type="password"]',
+          'input[type="number"]',
+          'input[type="email"]',
+          'input[type="url"]',
+          'input[type="search"]',
+          "input:not([type])",
+          "textarea",
+        ],
+        (evt) => {
+          evt.stopImmediatePropagation();
+          evt.stopPropagation();
+        },
+        { capture: true }
+      );
+    }
+    return {
+      $shadowContainer,
+      $shadowRoot,
+    };
   },
   /**
    * 处理初始化

package/src/types/components.d.ts

@@ -214,6 +214,13 @@ export interface PopsGeneralConfig {
    * 传入的css都在dark内
    */
   darkStyle?: string | null;
+  /**
+   * （可选）是否阻止`keydown`事件传播
+   *
+   * 主要是阻止当`keydown`触发来源为输入框时，即在输入框内按下按键不会触发页面的快捷键
+   * @default true
+   */
+  stopKeyDownEventPropagation?: boolean;
   /**
    * 在元素添加到页面前的事件
    * @param $shadowRoot 根元素