@whitesev/pops 2.6.0 → 3.0.0

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/{config.ts → defaultConfig.ts}

@@ -1,7 +1,7 @@
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
-import type { PopsPanelDetails } from "./types";
+import type { PopsPanelConfig } from "./types";
 
-export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
+export const PopsPanelDefaultConfig = (): DeepRequired<PopsPanelConfig> => {
   return {
     title: {
       text: "默认标题",
@@ -14,18 +14,18 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
         id: "whitesev-panel-config-1",
         title: "菜单配置1",
         headerTitle: "菜单配置1",
-        isDefault: false,
+        isDefault: true,
         attributes: {
           "data-test": "test",
           "data-test-2": "test2",
         },
-        forms: [
+        views: [
           {
             className: "forms-1",
             text: "区域设置",
-            type: "forms",
+            type: "container",
             attributes: {},
-            forms: [
+            views: [
               {
                 className: "panel-switch",
                 text: "switch",
@@ -141,12 +141,12 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
         id: "whitesev-panel-config-2",
         title: "菜单配置2",
         headerTitle: "菜单配置2",
-        isDefault: true,
+        isDefault: false,
         attributes: {
           "data-value": "value",
           "data-value-2": "value2",
         },
-        forms: [
+        views: [
           {
             className: "panel-input",
             text: "input",
@@ -167,7 +167,6 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
             className: "panel-input-password",
             text: "input-password",
             type: "input",
-            // @ts-ignore
             props: {},
             attributes: {},
             getValue() {
@@ -184,7 +183,6 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
             className: "panel-textarea",
             text: "textarea",
             type: "textarea",
-            // @ts-ignore
             props: {},
             attributes: {},
             getValue() {
@@ -196,12 +194,94 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
             },
             placeholder: "请输入内容",
           },
+          {
+            className: "panel-select-disabled",
+            text: "select-disabled",
+            type: "select",
+            disabled: true,
+            props: {},
+            attributes: {},
+            getValue() {
+              return 50;
+            },
+            callback(event, isSelectedValue, isSelectedText) {
+              console.log(`select当前选项：${isSelectedValue}，当前选项文本：${isSelectedText}`);
+            },
+            data: [
+              {
+                value: "all",
+                text: "所有",
+                disable() {
+                  return false;
+                },
+                views: [],
+              },
+              {
+                value: "text",
+                text: "文本",
+                disable() {
+                  return false;
+                },
+                views: [],
+              },
+              {
+                value: "html",
+                text: "超文本",
+                disable() {
+                  return false;
+                },
+                views: [],
+              },
+            ],
+          },
+          {
+            className: "panel-select-multiple-disabled",
+            type: "select-multiple",
+            text: "select-multiple-disabled",
+            disabled: true,
+            props: {},
+
+            attributes: {},
+            placeholder: "请至少选择一个选项",
+            getValue() {
+              return ["select-1", "select-2"];
+            },
+            callback(selectInfo) {
+              console.log(`select值改变，多选信息`, selectInfo);
+            },
+            clickCallBack(event, isSelectedInfo) {
+              console.log("点击", event, isSelectedInfo);
+            },
+            closeIconClickCallBack(event, data) {
+              console.log("点击关闭图标的事件", data);
+            },
+            data: [
+              {
+                value: "select-1",
+                text: "单选1",
+                isHTML: false,
+              },
+              {
+                value: "select-2",
+                text: "单选2",
+                isHTML: false,
+              },
+              {
+                value: "select-3",
+                text: "单选3",
+                isHTML: false,
+              },
+              {
+                value: "select-4",
+                text: "单选4",
+                isHTML: false,
+              },
+            ],
+          },
           {
             className: "panel-select",
             text: "select",
             type: "select",
-            disabled: true,
-            // @ts-ignore
             props: {},
             attributes: {},
             getValue() {
@@ -217,7 +297,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
                 disable() {
                   return false;
                 },
-                forms: [],
+                views: [],
               },
               {
                 value: "text",
@@ -225,7 +305,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
                 disable() {
                   return false;
                 },
-                forms: [],
+                views: [],
               },
               {
                 value: "html",
@@ -233,7 +313,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
                 disable() {
                   return false;
                 },
-                forms: [],
+                views: [],
               },
             ],
           },
@@ -241,8 +321,6 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
             className: "panel-select-multiple",
             type: "select-multiple",
             text: "select-multiple",
-            disabled: true,
-            // @ts-ignore
             props: {},
 
             attributes: {},
@@ -307,9 +385,9 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
             ],
           },
           {
-            type: "forms",
+            type: "container",
             text: "deep菜单",
-            forms: [
+            views: [
               {
                 type: "deepMenu",
                 className: "panel-deepMenu",
@@ -317,20 +395,20 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
                 description: "二级菜单",
                 rightText: "自定义配置",
                 arrowRightIcon: true,
-                afterAddToUListCallBack(formConfig, container) {
-                  console.log(formConfig, container);
+                afterAddToUListCallBack(viewConfig, container) {
+                  console.log(viewConfig, container);
                 },
-                clickCallBack(event, formConfig) {
-                  console.log("进入子配置", event, formConfig);
+                clickCallBack(event, viewConfig) {
+                  console.log("进入子配置", event, viewConfig);
                 },
-                forms: [
+                views: [
                   {
                     className: "forms-1",
                     text: "区域设置",
-                    type: "forms",
+                    type: "container",
                     attributes: {},
                     props: {},
-                    forms: [
+                    views: [
                       {
                         className: "panel-switch",
                         text: "switch",
@@ -420,24 +498,24 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
                 description: "二级菜单",
                 rightText: "自定义配置",
                 arrowRightIcon: true,
-                afterAddToUListCallBack(formConfig, container) {
-                  console.log(formConfig, container);
+                afterAddToUListCallBack(viewConfig, container) {
+                  console.log(viewConfig, container);
                 },
-                clickCallBack(event, formConfig) {
-                  console.log("进入子配置", event, formConfig);
+                clickCallBack(event, viewConfig) {
+                  console.log("进入子配置", event, viewConfig);
                 },
-                forms: [],
+                views: [],
               },
             ],
           },
           {
-            type: "forms",
+            type: "container",
             isFold: true,
             text: "折叠菜单",
-            afterAddToUListCallBack(formConfig, container) {
-              console.log(formConfig, container);
+            afterAddToUListCallBack(viewConfig, container) {
+              console.log(viewConfig, container);
             },
-            forms: [
+            views: [
               {
                 className: "panel-switch",
                 text: "switch",
@@ -469,7 +547,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
         },
         // @ts-ignore
         props: {},
-        forms: [],
+        views: [],
         clickFirstCallback: function () {
           return false;
         },
@@ -484,7 +562,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
         },
         // @ts-ignore
         props: {},
-        forms: [],
+        views: [],
         clickFirstCallback: function () {
           return false;
         },