@whitesev/pops 3.3.3 → 3.3.4

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

@@ -4,18 +4,7 @@ import type { PopsTitleConfig, PopsDragConfig, PopsGeneralConfig, PopsMoreButton
  */
 export type PopsFolderDownloadOption = {
     /**
-     * 是否点击后自动触发下载
-     *
-     * + `true`: 自动根据设置的`mode`值来选择下载方式
-     * + `false`: 不触发下载
-     */
-    autoDownload: boolean;
-    /**
-     * 触发下载后会根据提供的url链接进行下载
-     */
-    url: string;
-    /**
-     * 下载方式
+     * 下载方式，不传入就不下载（不做任何处理）
      *
      * + `a`: 使用`a标签`进行下载
      * + `aBlank`: 使用`a标签`进行下载（添加属性`target="_blank"`）
@@ -26,6 +15,10 @@ export type PopsFolderDownloadOption = {
      * @default "aBlank"
      */
     mode?: "a" | "aBlank" | "iframe" | "open" | "openBlank";
+    /**
+     * 触发下载后会根据提供的url链接进行下载
+     */
+    url: string;
 };
 /**
  * pops.folder的folder配置信息
@@ -85,14 +78,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/package.json

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

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,7 @@ import type {
  */
 export type PopsFolderDownloadOption = {
   /**
-   * 是否点击后自动触发下载
-   *
-   * + `true`: 自动根据设置的`mode`值来选择下载方式
-   * + `false`: 不触发下载
-   */
-  autoDownload: boolean;
-  /**
-   * 触发下载后会根据提供的url链接进行下载
-   */
-  url: string;
-  /**
-   * 下载方式
+   * 下载方式，不传入就不下载（不做任何处理）
    *
    * + `a`: 使用`a标签`进行下载
    * + `aBlank`: 使用`a标签`进行下载（添加属性`target="_blank"`）
@@ -32,6 +21,10 @@ export type PopsFolderDownloadOption = {
    * @default "aBlank"
    */
   mode?: "a" | "aBlank" | "iframe" | "open" | "openBlank";
+  /**
+   * 触发下载后会根据提供的url链接进行下载
+   */
+  url: string;
 };
 /**
  * pops.folder的folder配置信息
@@ -96,15 +89,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;
 }
 
 /**