@whitesev/pops 2.6.1 → 3.0.1

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

@@ -1,10 +1,38 @@
 import type {
   PopsTitleConfig,
   PopsDragConfig,
-  PopsCommonConfig,
+  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配置信息
  */
@@ -43,28 +71,13 @@ export interface PopsFolderDataConfig {
   clickEvent?: (
     event: MouseEvent | PointerEvent,
     config: PopsFolderDataConfig
-  ) =>
-    | Promise<
-        | {
-            autoDownload: boolean;
-            url: string;
-            mode: "a" | "aBlank" | "iframe" | "open" | "openBlank";
-          }
-        | null
-        | undefined
-        | void
-        | PopsFolderDataConfig[]
-      >
-    | null
-    | undefined
-    | void
-    | PopsFolderDataConfig[];
+  ) => IPromise<PopsFolderDownloadOption | PopsFolderDataConfig[] | null | undefined | void>;
 }
 
 /**
  * pops.folder
  */
-export interface PopsFolderDetails extends PopsTitleConfig, PopsDragConfig, PopsMoreButtonConfig, PopsCommonConfig {
+export interface PopsFolderConfig extends PopsTitleConfig, PopsDragConfig, PopsMoreButtonConfig, PopsGeneralConfig {
   /**
    * 排序
    */

package/src/components/iframe/{config.ts → defaultConfig.ts}

@@ -1,6 +1,6 @@
-import type { PopsIframeDetails } from "./types";
+import type { PopsIframeConfig } from "./types";
 
-export const PopsIframeConfig = (): DeepRequired<PopsIframeDetails> => {
+export const PopsIframeDefaultConfig = (): DeepRequired<PopsIframeConfig> => {
   return {
     title: {
       position: "center",

package/src/components/iframe/index.ts

@@ -4,25 +4,24 @@ import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";
 import { PopsInstData } from "../../PopsInst";
-import type { PopsEventConfig } from "../../types/event";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
-import { PopsIframeConfig } from "./config";
-import type { PopsIframeDetails } from "./types";
+import { PopsIframeDefaultConfig } from "./defaultConfig";
+import type { PopsIframeClickEventConfig, PopsIframeConfig } from "./types";
 import type { PopsType } from "../../types/main";
 
 export const PopsIframe = {
-  init(details: PopsIframeDetails) {
+  init(__config__: PopsIframeConfig) {
     const guid = popsUtils.getRandomGUID();
     // 设置当前类型
     const popsType: PopsType = "iframe";
 
-    let config = PopsIframeConfig();
+    let config = PopsIframeDefaultConfig();
     config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-    config = popsUtils.assign(config, details);
+    config = popsUtils.assign(config, __config__);
     if (config.url == null) {
-      throw new Error("config.url不能为空");
+      throw new TypeError("config.url must not be null.");
     }
     config = PopsHandler.handleOnly(popsType, config);
 
@@ -61,7 +60,7 @@ export const PopsIframe = {
     const maskHTML = PopsElementHandler.createMask(guid, zIndex, maskExtraStyle);
 
     const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
-    const iframeLoadingHTML = '<div class="pops-loading"></div>';
+    const iframeLoadingHTML = /*html*/ '<div class="pops-loading"></div>';
     const titleText = config.title!.text!.trim() !== "" ? config.title.text : config.url;
     const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
     const animHTML = PopsElementHandler.createAnim(
@@ -143,35 +142,33 @@ export const PopsIframe = {
       $anim,
       $pops,
       $mask
-    ) as any as PopsEventConfig & {
-      iframeElement: HTMLIFrameElement;
-    };
-
-    evtConfig["iframeElement"] = $iframe!;
+    ) as PopsIframeClickEventConfig;
+    // 赋值额外的$iframe参数
+    evtConfig.$iframe = $iframe!;
 
     popsDOMUtils.on($anim, popsDOMUtils.getAnimationEndNameList(), function () {
-      /* 动画加载完毕 */
+      // 动画加载完毕
       $anim.style.width = "0%";
       $anim.style.height = "0%";
     });
 
     popsDOMUtils.on($iframe, "load", () => {
-      /* iframe加载中... */
+      // iframe加载中...
       loadingElement?.remove();
       $contentLoading!.style.animation = "iframeLoadingChange_85 0.3s forwards";
       popsDOMUtils.on($contentLoading, popsDOMUtils.getAnimationEndNameList(), () => {
-        /* 动画加载完毕就移除 */
+        // 动画加载完毕就移除
         $contentLoading!.remove();
       });
 
       if (config.title!.text!.trim() === "" && $iframe!.contentDocument) {
-        /* 同域名下的才可以获取网页标题 */
+        // 同域名下的才可以获取网页标题
         $title!.querySelector<HTMLElement>("p")!.innerText = $iframe!.contentDocument.title;
       }
 
       config.loadEndCallBack(evtConfig);
     });
-    /* 创建到页面中 */
+    // 创建到页面中
 
     popsDOMUtils.append($shadowRoot, $elList);
     if (typeof config.beforeAppendToPageCallBack === "function") {
@@ -182,7 +179,7 @@ export const PopsIframe = {
     if ($mask != null) {
       $anim.after($mask);
     }
-    /* 拖拽 */
+    // 拖拽
     if (config.drag) {
       PopsInstanceUtils.drag($pops!, {
         dragElement: $title!,
@@ -193,7 +190,7 @@ export const PopsIframe = {
       });
     }
     const TYPE_MODULE = "type-module";
-    /* 最小化按钮点击事件 */
+    // 最小化按钮点击事件
     let origin_left = "";
     let origin_top = "";
     let origin_is_max = false;
@@ -224,7 +221,7 @@ export const PopsIframe = {
         capture: true,
       }
     );
-    /* 最大化按钮点击事件 */
+    // 最大化按钮点击事件
     popsDOMUtils.on<MouseEvent | PointerEvent>(
       headerMaxBtnElement,
       "click",
@@ -258,9 +255,9 @@ export const PopsIframe = {
         capture: true,
       }
     );
-    /* 先隐藏窗口化按钮 */
+    // 先隐藏窗口化按钮
     headerMiseBtnElement?.style?.setProperty("display", "none");
-    /* 复位按钮点击事件 */
+    // 复位按钮点击事件
     popsDOMUtils.on<MouseEvent | PointerEvent>(
       headerMiseBtnElement,
       "click",
@@ -300,7 +297,7 @@ export const PopsIframe = {
         capture: true,
       }
     );
-    /* 关闭按钮点击事件 */
+    // 关闭按钮点击事件
     popsDOMUtils.on<MouseEvent | PointerEvent>(
       headerCloseBtnElement,
       "click",
@@ -319,11 +316,9 @@ export const PopsIframe = {
 
     PopsHandler.handlePush(popsType, {
       guid: guid,
-      animElement: $anim,
-
-      popsElement: $pops!,
-
-      maskElement: $mask!,
+      $anim: $anim,
+      $pops: $pops!,
+      $mask: $mask!,
       $shadowContainer: $shadowContainer,
       $shadowRoot: $shadowRoot,
     });

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

@@ -1,41 +1,21 @@
-import type { PopsTitleConfig, PopsDragConfig, PopsCommonConfig } from "../../../types/components";
+import type { PopsTitleConfig, PopsDragConfig, PopsGeneralConfig } from "../../../types/components";
 
 import type { PopsEventConfig } from "../../../types/event";
 
 /**
- * pops.iframe的按钮的点击回调参数event
+ * pops.iframe的按钮点击事件回调的配置参数
  */
-export interface PopsBtnIframeCallBackEvent {
-  /**
-   * 动画元素（包裹着弹窗元素）
-   */
-  animElement: HTMLElement;
-  /**
-   * 弹窗元素
-   */
-  popsElement: HTMLElement;
-  /**
-   * 遮罩层元素，如果未设置，那么不存在
-   */
-  maskElement?: HTMLElement;
+export type PopsIframeClickEventConfig = PopsEventConfig & {
   /**
    * iframe元素
    */
-  iframePopsElement: HTMLIFrameElement;
-  /**
-   * 使用的方法名
-   */
-  function: "iframe";
-  /**
-   * 唯一id
-   */
-  guid: string;
-}
+  $iframe: HTMLIFrameElement;
+};
 
 /**
  * pops.iframe
  */
-export interface PopsIframeDetails extends PopsTitleConfig, PopsDragConfig, PopsCommonConfig {
+export interface PopsIframeConfig extends PopsTitleConfig, PopsDragConfig, PopsGeneralConfig {
   /**
    * 加载配置
    */
@@ -64,12 +44,7 @@ export interface PopsIframeDetails extends PopsTitleConfig, PopsDragConfig, Pops
       /**
        * 点击的回调函数
        */
-      callback: (
-        eventConfig: PopsEventConfig & {
-          iframeElement: HTMLIFrameElement;
-        },
-        event: MouseEvent | PointerEvent
-      ) => void;
+      callback: (eventConfig: PopsIframeClickEventConfig, event: MouseEvent | PointerEvent) => void;
     };
     /**
      * 最大化
@@ -78,12 +53,7 @@ export interface PopsIframeDetails extends PopsTitleConfig, PopsDragConfig, Pops
       /**
        * 点击的回调函数
        */
-      callback: (
-        eventConfig: PopsEventConfig & {
-          iframeElement: HTMLIFrameElement;
-        },
-        event: MouseEvent | PointerEvent
-      ) => void;
+      callback: (eventConfig: PopsIframeClickEventConfig, event: MouseEvent | PointerEvent) => void;
     };
     /**
      * 窗口化
@@ -92,12 +62,7 @@ export interface PopsIframeDetails extends PopsTitleConfig, PopsDragConfig, Pops
       /**
        * 点击的回调函数
        */
-      callback: (
-        eventConfig: PopsEventConfig & {
-          iframeElement: HTMLIFrameElement;
-        },
-        event: MouseEvent | PointerEvent
-      ) => void;
+      callback: (eventConfig: PopsIframeClickEventConfig, event: MouseEvent | PointerEvent) => void;
     };
     /**
      * 关闭
@@ -106,12 +71,7 @@ export interface PopsIframeDetails extends PopsTitleConfig, PopsDragConfig, Pops
       /**
        * 点击的回调函数
        */
-      callback: (
-        eventConfig: PopsEventConfig & {
-          iframeElement: HTMLIFrameElement;
-        },
-        event: MouseEvent | PointerEvent
-      ) => void;
+      callback: (eventConfig: PopsIframeClickEventConfig, event: MouseEvent | PointerEvent) => void;
     };
   };
   /**
@@ -121,8 +81,9 @@ export interface PopsIframeDetails extends PopsTitleConfig, PopsDragConfig, Pops
   url?: string;
   /**
    * 右上角按钮顺序：最小化、最大化、窗口化、关闭
+   * @default "min|max|mise|close"
    */
-  topRightButton: "min|max|mise|close";
+  topRightButton: string;
   /**
    * 是否启用沙箱，默认false
    * @default false
@@ -131,9 +92,5 @@ export interface PopsIframeDetails extends PopsTitleConfig, PopsDragConfig, Pops
   /**
    * 加载完毕的回调
    */
-  loadEndCallBack?: (
-    details: PopsEventConfig & {
-      iframeElement: HTMLIFrameElement;
-    }
-  ) => void;
+  loadEndCallBack?: (eventConfig: PopsIframeClickEventConfig) => void;
 }

package/src/components/loading/{config.ts → defaultConfig.ts}

@@ -1,8 +1,8 @@
-import type { PopsLoadingDetails } from "./types";
+import type { PopsLoadingConfig } from "./types";
 
-export const PopsLoadingConfig = (): DeepRequired<PopsLoadingDetails> => {
+export const PopsLoadingDefaultConfig = (): DeepRequired<PopsLoadingConfig> => {
   return {
-    parent: document.body,
+    $parent: document.body || document.documentElement,
     content: {
       text: "加载中...",
       icon: "loading",

package/src/components/loading/index.ts

@@ -4,16 +4,17 @@ import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { popsUtils } from "../../utils/PopsUtils";
-import { PopsLoadingConfig } from "./config";
-import type { PopsLoadingDetails } from "./types";
+import { PopsLoadingDefaultConfig } from "./defaultConfig";
+import type { PopsLoadingConfig } from "./types";
 
 export const PopsLoading = {
-  init(details: PopsLoadingDetails) {
-    let config = PopsLoadingConfig();
-    config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-    config = popsUtils.assign(config, details);
+  init(__config__: PopsLoadingConfig) {
     const guid = popsUtils.getRandomGUID();
+    // 设置当前类型
     const PopsType = "loading";
+    let config = PopsLoadingDefaultConfig();
+    config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
+    config = popsUtils.assign(config, __config__);
 
     config = PopsHandler.handleOnly(PopsType, config);
 
@@ -76,16 +77,17 @@ export const PopsLoading = {
       $elList.push($mask);
     }
     const evtConfig = PopsHandler.handleLoadingEventConfig(config, guid, PopsType, $anim, $pops, $mask);
-    popsDOMUtils.append(config.parent, $elList);
+    popsDOMUtils.append(config.$parent, $elList);
     if ($mask != null) {
       $anim.after($mask);
     }
+    // @ts-ignore
     PopsHandler.handlePush(PopsType, {
       guid: guid,
-      animElement: $anim,
-      popsElement: $pops!,
-      maskElement: $mask!,
-    } as any);
+      $anim: $anim,
+      $pops: $pops!,
+      $mask: $mask!,
+    });
 
     if (config.isAbsolute) {
       // 遮罩层必须是跟随主内容

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

@@ -1,15 +1,15 @@
-import type { PopsCommonConfig, PopsContentConfig } from "../../../types/components";
+import type { PopsGeneralConfig, PopsContentConfig } from "../../../types/components";
 
 /**
  * pops.loading
  */
-export interface PopsLoadingDetails
-  extends Omit<PopsCommonConfig, "width" | "height" | "position" | "beforeAppendToPageCallBack"> {
+export interface PopsLoadingConfig
+  extends Omit<PopsGeneralConfig, "width" | "height" | "position" | "beforeAppendToPageCallBack"> {
   /**
    * 父元素，默认为document.body
-   * @default document.body
+   * @default document.body || document.documentElement
    */
-  parent?: HTMLElement;
+  $parent?: HTMLElement;
   /**
    * 内容配置
    */

package/src/components/panel/css/components-select.css

@@ -0,0 +1,84 @@
+.pops {
+  max-height: 300px;
+}
+.select-container {
+  --el-font-size-base: 14px;
+  --el-text-color-regular: #606266;
+  --el-color-primary: #409eff;
+  --el-fill-color-light: #f5f7fa;
+  --el-disable-color: #a8abb2;
+}
+.select-item {
+  cursor: pointer;
+  font-size: var(--el-font-size-base);
+  padding: 0 20px 0 20px;
+  position: relative;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--el-text-color-regular);
+  min-height: 34px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  box-sizing: border-box;
+}
+.select-item[aria-disabled],
+.select-item[disabled] {
+  cursor: not-allowed;
+  color: var(--el-disable-color);
+  background: unset;
+}
+.select-item:hover {
+  background-color: var(--el-fill-color-light);
+}
+.select-item.select-item-is-selected:has(.pops-panel-input input) {
+  background-color: #e7e7e7;
+}
+.select-item.select-item-is-selected {
+  color: var(--el-color-primary);
+  font-weight: 700;
+}
+.select-item.select-item-is-selected:not(:has(.pops-panel-input))::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  border-top: none;
+  border-right: none;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: var(--el-color-primary);
+  mask: url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E")
+    no-repeat;
+  mask-size: 100% 100%;
+  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E")
+    no-repeat;
+  -webkit-mask-size: 100% 100%;
+  transform: translateY(-50%);
+  width: 12px;
+  height: 12px;
+}
+
+.select-item .pops-panel-input {
+  width: 100%;
+  margin: 5px 0px;
+}
+.select-item .pops-panel-input:has(.pops-panel-input-valid-error) {
+  margin-bottom: 0px;
+}
+
+.select-item .select-item-text {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+@media (prefers-color-scheme: dark) {
+  .select-container {
+    --el-text-color-regular: #f2f2f2;
+    --el-disable-color: #8d9095;
+    --el-fill-color-light: #262727;
+  }
+}