@whitesev/pops 3.2.1 → 3.3.0

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

@@ -1,110 +1,143 @@
-import type {
-  PopsTitleConfig,
-  PopsDragConfig,
-  PopsGeneralConfig,
-  PopsMoreButtonConfig,
-} from "../../../types/components";
-
-/**
- * pops.folder的下载配置选项
- */
-export type PopsFolderDownloadOption = {
-  /**
-   * 是否点击触发下载
-   *
-   * + true：根据设置的`mode`值来选择下载方式
-   * + false：不触发下载
-   */
-  autoDownload: boolean;
-  /**
-   * 触发下载后会根据提供的url链接进行下载
-   */
-  url: string;
-  /**
-   * 下载方式
-   *
-   * + a：使用a标签进行下载
-   * + aBlank：使用a标签进行下载（添加属性`target="_blank"`）
-   * + iframe：使用iframe进行下载
-   * + open：使用window.open进行下载
-   * + openBlank：使用window.open进行下载（添加参数`_blank`）
-   *
-   * @default "aBlank"
-   */
-  mode?: "a" | "aBlank" | "iframe" | "open" | "openBlank";
-};
-/**
- * pops.folder的folder配置信息
- */
-export interface PopsFolderDataConfig {
-  /**
-   * 文件/文件夹名
-   */
-  fileName: string;
-  /**
-   * 文件大小，如果是文件夹的话，为0
-   */
-  fileSize: number | string;
-  /**
-   * 文件类型，如果是文件夹，填入空字符串
-   */
-  fileType: string;
-  /**
-   * 创建时间
-   */
-  createTime: number;
-  /**
-   * 修改时间(最新时间)
-   */
-  latestTime: number;
-  /**
-   * 是否是文件夹
-   */
-  isFolder: boolean;
-  /**
-   * 层级
-   */
-  index: number;
-  /**
-   * 点击事件
-   */
-  clickEvent?: (
-    event: MouseEvent | PointerEvent,
-    config: PopsFolderDataConfig
-  ) => IPromise<PopsFolderDownloadOption | PopsFolderDataConfig[] | null | undefined | void>;
-}
-
-/**
- * pops.folder
- */
-export interface PopsFolderConfig extends PopsTitleConfig, PopsDragConfig, PopsMoreButtonConfig, PopsGeneralConfig {
-  /**
-   * 排序
-   */
-  sort: {
-    /**
-     * 比较的名字，默认为fileName
-     */
-    name: "fileName" | "fileSize" | "latestTime";
-    /**
-     * 是否降序，默认false（升序）
-     * @default false
-     */
-    isDesc: boolean;
-    /**
-     * 触发排序的回调
-     * @returns
-     * + true 中止内部的排序
-     */
-    callback?: (
-      targert: HTMLElement,
-      event: PointerEvent | MouseEvent,
-      sortName: "fileName" | "fileSize" | "latestTime",
-      sortDesc: boolean
-    ) => boolean | undefined | void;
-  };
-  /**
-   * 文件夹信息
-   */
-  folder: PopsFolderDataConfig[];
-}
+import type {
+  PopsTitleConfig,
+  PopsDragConfig,
+  PopsGeneralConfig,
+  PopsMoreButtonConfig,
+} from "../../../types/components";
+
+/**
+ * pops.folder的下载配置选项
+ */
+export type PopsFolderDownloadOption = {
+  /**
+   * 是否点击后自动触发下载
+   *
+   * + `true`: 自动根据设置的`mode`值来选择下载方式
+   * + `false`: 不触发下载
+   */
+  autoDownload: boolean;
+  /**
+   * 触发下载后会根据提供的url链接进行下载
+   */
+  url: string;
+  /**
+   * 下载方式
+   *
+   * + `a`: 使用`a标签`进行下载
+   * + `aBlank`: 使用`a标签`进行下载（添加属性`target="_blank"`）
+   * + `iframe`: 使用`iframe`进行下载
+   * + `open`: 使用`window.open`进行下载
+   * + `openBlank`: 使用`window.open`进行下载（添加参数`_blank`）
+   *
+   * @default "aBlank"
+   */
+  mode?: "a" | "aBlank" | "iframe" | "open" | "openBlank";
+};
+/**
+ * pops.folder的folder配置信息
+ */
+export interface PopsFolderDataConfig {
+  /**
+   * 文件/文件夹名
+   */
+  fileName: string;
+  /**
+   * 文件大小，如果是文件夹的话，请设置为`0`
+   */
+  fileSize: number | string;
+  /**
+   * 文件类型，如果是文件夹，填入`""`即可
+   *
+   * 填入后会根据文件类型，自动设置图标
+   */
+  fileType: string;
+  /**
+   * 文件图标
+   * @default undefined
+   */
+  fileIcon?: string;
+  /**
+   * 创建时间
+   */
+  createTime:
+    | number
+    | (() => {
+        /**
+         * 该值用于排序
+         */
+        timeStamp: number;
+        /**
+         * 用于显示的文本
+         */
+        showText: string;
+      });
+  /**
+   * 修改时间(最新时间)
+   */
+  latestTime:
+    | number
+    | (() => {
+        /**
+         * 该值用于排序
+         */
+        timeStamp: number;
+        /**
+         * 用于显示的文本
+         */
+        showText: string;
+      });
+  /**
+   * 是否是文件夹
+   * @default false
+   */
+  isFolder: boolean;
+  /**
+   * 层级
+   */
+  index: number;
+  /**
+   * 点击事件
+   */
+  clickEvent?: (
+    event: MouseEvent | PointerEvent,
+    /**
+     * 当前层级的文件|文件夹信息配置
+     */
+    config: PopsFolderDataConfig
+  ) => IPromise<PopsFolderDownloadOption | PopsFolderDataConfig[] | null | undefined | void>;
+}
+
+/**
+ * pops.folder
+ */
+export interface PopsFolderConfig extends PopsTitleConfig, PopsDragConfig, PopsMoreButtonConfig, PopsGeneralConfig {
+  /**
+   * 排序
+   */
+  sort: {
+    /**
+     * 比较的名字，默认为fileName
+     */
+    name: "fileName" | "fileSize" | "latestTime";
+    /**
+     * 是否降序，默认false（升序）
+     * @default false
+     */
+    isDesc: boolean;
+    /**
+     * 触发排序的回调
+     * @returns
+     * + true 中止内部的排序
+     */
+    callback?: (
+      targert: HTMLElement,
+      event: PointerEvent | MouseEvent,
+      sortName: "fileName" | "fileSize" | "latestTime",
+      sortDesc: boolean
+    ) => boolean | undefined | void;
+  };
+  /**
+   * 文件夹信息
+   */
+  folder: PopsFolderDataConfig[];
+}

package/src/components/iframe/defaultConfig.ts

@@ -1,60 +1,60 @@
-import type { PopsIframeConfig } from "./types";
-
-export const PopsIframeDefaultConfig = (): DeepRequired<PopsIframeConfig> => {
-  return {
-    title: {
-      position: "center",
-      text: "",
-      html: false,
-      style: "",
-    },
-    loading: {
-      enable: true,
-      icon: true,
-      text: "",
-    },
-    useShadowRoot: true,
-    class: "",
-    url: window.location.href,
-    only: false,
-    zIndex: 10000,
-    mask: {
-      enable: false,
-      clickEvent: {
-        toClose: false,
-        toHide: false,
-      },
-      clickCallBack: null,
-    },
-    animation: "pops-anim-fadein-zoom",
-    position: "center",
-    drag: true,
-    dragLimit: true,
-    dragExtraDistance: 3,
-    dragMoveCallBack() {},
-    dragEndCallBack() {},
-    width: window.innerWidth < 550 ? "88vw" : "350px",
-    height: window.innerHeight < 450 ? "70vh" : "200px",
-    topRightButton: "min|max|mise|close",
-    sandbox: false,
-    forbiddenScroll: false,
-    loadEndCallBack() {},
-    btn: {
-      min: {
-        callback() {},
-      },
-      max: {
-        callback() {},
-      },
-      mise: {
-        callback() {},
-      },
-      close: {
-        callback() {},
-      },
-    },
-
-    style: null,
-    beforeAppendToPageCallBack() {},
-  };
-};
+import type { PopsIframeConfig } from "./types";
+
+export const PopsIframeDefaultConfig = (): DeepRequired<PopsIframeConfig> => {
+  return {
+    title: {
+      position: "center",
+      text: "",
+      html: false,
+      style: "",
+    },
+    loading: {
+      enable: true,
+      icon: true,
+      text: "",
+    },
+    useShadowRoot: true,
+    class: "",
+    url: window.location.href,
+    only: false,
+    zIndex: 10000,
+    mask: {
+      enable: false,
+      clickEvent: {
+        toClose: false,
+        toHide: false,
+      },
+      clickCallBack: null,
+    },
+    animation: "pops-anim-fadein-zoom",
+    position: "center",
+    drag: true,
+    dragLimit: true,
+    dragExtraDistance: 3,
+    dragMoveCallBack() {},
+    dragEndCallBack() {},
+    width: window.innerWidth < 550 ? "88vw" : "350px",
+    height: window.innerHeight < 450 ? "70vh" : "200px",
+    topRightButton: "min|max|mise|close",
+    sandbox: false,
+    forbiddenScroll: false,
+    loadEndCallBack() {},
+    btn: {
+      min: {
+        callback() {},
+      },
+      max: {
+        callback() {},
+      },
+      mise: {
+        callback() {},
+      },
+      close: {
+        callback() {},
+      },
+    },
+
+    style: null,
+    beforeAppendToPageCallBack() {},
+  };
+};

package/src/components/iframe/index.css

@@ -1,76 +1,76 @@
-.pops[type-value="iframe"] {
-  --container-title-height: 55px;
-  transition:
-    width 0.35s ease,
-    height 0.35s ease;
-}
-.pops[type-value="iframe"] .pops-content {
-  overflow: hidden;
-}
-.pops-loading {
-  position: absolute;
-  top: 40px;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 5;
-  background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
-}
-.pops-loading:before {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  z-index: 3;
-  display: block;
-  margin: -20px 0 0 -20px;
-  padding: 20px;
-  border: 4px solid rgb(221, 221, 221, var(--pops-bd-opacity));
-  border-radius: 50%;
-  content: "";
-  border-top-color: transparent;
-  animation: pops-anim-wait-rotate 1.2s linear infinite;
-}
-.pops[type-value="iframe"].pops[type-module="min"] {
-  bottom: 0;
-  max-width: 200px;
-  max-height: 53px;
-  position: unset;
-}
-.pops[type-value="iframe"].pops[type-module="min"] .pops-header-control[data-type="min"] {
-  display: none;
-}
-.pops[type-value="iframe"].pops-iframe-unset-top {
-  top: unset !important;
-}
-.pops[type-value="iframe"].pops-iframe-unset-left {
-  left: unset !important;
-}
-.pops[type-value="iframe"].pops-iframe-unset-transform {
-  transform: none !important;
-}
-.pops[type-value="iframe"].pops-iframe-unset-transition {
-  transition: none !important;
-}
-.pops[type-value="iframe"].pops[type-module="max"] {
-  width: 100% !important;
-  height: 100% !important;
-}
-.pops[type-value="iframe"] iframe[pops] {
-  width: 100%;
-  height: 100%;
-  border: 0;
-}
-.pops-iframe-content-global-loading {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 999999;
-  width: 0;
-  height: 4px;
-  background: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));
-  animation: iframeLoadingChange 2s forwards;
-}
-
-.pops-anim:has(.pops[type-value="iframe"].pops[type-module="min"]) {
-  position: unset;
-}
+.pops[type-value="iframe"] {
+  --container-title-height: 55px;
+  transition:
+    width 0.35s ease,
+    height 0.35s ease;
+}
+.pops[type-value="iframe"] .pops-content {
+  overflow: hidden;
+}
+.pops-loading {
+  position: absolute;
+  top: 40px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 5;
+  background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
+}
+.pops-loading:before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 3;
+  display: block;
+  margin: -20px 0 0 -20px;
+  padding: 20px;
+  border: 4px solid rgb(221, 221, 221, var(--pops-bd-opacity));
+  border-radius: 50%;
+  content: "";
+  border-top-color: transparent;
+  animation: pops-anim-wait-rotate 1.2s linear infinite;
+}
+.pops[type-value="iframe"].pops[type-module="min"] {
+  bottom: 0;
+  max-width: 200px;
+  max-height: 53px;
+  position: unset;
+}
+.pops[type-value="iframe"].pops[type-module="min"] .pops-header-control[data-type="min"] {
+  display: none;
+}
+.pops[type-value="iframe"].pops-iframe-unset-top {
+  top: unset !important;
+}
+.pops[type-value="iframe"].pops-iframe-unset-left {
+  left: unset !important;
+}
+.pops[type-value="iframe"].pops-iframe-unset-transform {
+  transform: none !important;
+}
+.pops[type-value="iframe"].pops-iframe-unset-transition {
+  transition: none !important;
+}
+.pops[type-value="iframe"].pops[type-module="max"] {
+  width: 100% !important;
+  height: 100% !important;
+}
+.pops[type-value="iframe"] iframe[pops] {
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+.pops-iframe-content-global-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 999999;
+  width: 0;
+  height: 4px;
+  background: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));
+  animation: iframeLoadingChange 2s forwards;
+}
+
+.pops-anim:has(.pops[type-value="iframe"].pops[type-module="min"]) {
+  position: unset;
+}