@whitesev/pops 3.2.1 → 3.3.0

package/src/components/panel/index.ts

@@ -1,221 +1,221 @@
-import { PopsElementHandler } from "../../handler/PopsElementHandler";
-import { PopsHandler } from "../../handler/PopsHandler";
-import { popsDOMUtils } from "../../utils/PopsDOMUtils";
-import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
-import { popsUtils } from "../../utils/PopsUtils";
-import type { PopsPanelConfig, PopsPanelEventType } from "./types";
-import { PopsPanelDefaultConfig } from "./defaultConfig";
-import { PanelHandlerComponents } from "./handlerComponents";
-import { GlobalConfig } from "../../config/GlobalConfig";
-import { PopsCSS } from "../../PopsCSS";
-import type { PopsType } from "../../types/main";
-
-export const PopsPanel = {
-  init(__config__: PopsPanelConfig) {
-    const guid = popsUtils.getRandomGUID();
-    // 设置当前类型
-    const popsType: PopsType = "panel";
-
-    let config: Required<PopsPanelConfig> = PopsPanelDefaultConfig();
-    config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-    config = popsUtils.assign(config, __config__);
-    config = PopsHandler.handleOnly(popsType, config);
-
-    const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
-    PopsHandler.handleInit($shadowRoot, [
-      {
-        name: "index",
-        css: PopsCSS.index,
-      },
-      {
-        name: "ninePalaceGridPosition",
-        css: PopsCSS.ninePalaceGridPosition,
-      },
-      {
-        name: "scrollbar",
-        css: PopsCSS.scrollbar,
-      },
-      {
-        name: "button",
-        css: PopsCSS.button,
-      },
-      {
-        name: "anim",
-        css: PopsCSS.anim,
-      },
-      {
-        name: "common",
-        css: PopsCSS.common,
-      },
-      {
-        name: "panelCSS",
-        css: PopsCSS.panelCSS,
-      },
-    ]);
-
-    // 先把z-index提取出来
-    const zIndex = PopsHandler.handleZIndex(config.zIndex);
-    const maskHTML = PopsElementHandler.createMask(guid, zIndex);
-
-    const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
-    const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
-
-    const animHTML = PopsElementHandler.createAnim(
-      guid,
-      popsType,
-      config,
-      /*html*/ `
-			<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${
-        config.title.html
-          ? config.title.text
-          : `<p pops class="pops-${popsType}-title-text" class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`
-      }${headerBtnHTML}</div>
-			<div class="pops-content pops-${popsType}-content">
-				<aside class="pops-${popsType}-aside pops-user-select-none">
-					<ul class="pops-${popsType}-aside-top-container"></ul>
-					<ul class="pops-${popsType}-aside-bottom-container"></ul>
-				</aside>
-				<div class="pops-${popsType}-section-wrapper">
-					<section class="pops-${popsType}-container">
-						<ul class="pops-${popsType}-container-header-ul"></ul>
-						<ul class="pops-${popsType}-container-main-ul"></ul>
-					</section>
-				</div>
-			</div>
-      <div class="pops-${popsType}-bottom-wrapper">
-        <section class="pops-${popsType}-bottom-container">
-          <ul class="pops-${popsType}-bottom-left-container"></ul>
-          <ul class="pops-${popsType}-bottom-right-container"></ul>
-        </section>
-      </div>
-      `,
-      "",
-      zIndex
-    );
-    /**
-     * 弹窗的主元素，包括动画层
-     */
-    const $anim = PopsElementHandler.parseElement<HTMLDivElement>(animHTML);
-    // 结构元素
-    const {
-      $pops,
-      $headerBtnClose,
-      $title,
-      $content,
-      $panelRightSectionWrapper,
-      $panelLeftAside,
-      $panelContentSectionContainer,
-      $panelBottomWrapper,
-      $panelBottomContainer,
-      $panelBottomLeftContainer,
-      $panelBottomRightContainer,
-    } = PopsHandler.handleQueryElement($anim, popsType);
-    if (config.isMobile || popsUtils.isPhone()) {
-      popsDOMUtils.addClassName($pops, config.mobileClassName);
-    }
-    /**
-     * 遮罩层元素
-     */
-    let $mask: HTMLDivElement | undefined = void 0;
-    /**
-     * 已创建的元素列表
-     */
-    const $elList: HTMLElement[] = [$anim];
-
-    // 遮罩层元素
-    if (config.mask.enable) {
-      const handleMask = PopsHandler.handleMask({
-        type: popsType,
-        guid: guid,
-        config: config,
-        animElement: $anim,
-        maskHTML: maskHTML,
-      });
-      $mask = handleMask.maskElement;
-      $elList.push($mask);
-    }
-
-    // 处理返回的配置
-    const evtConfig = PopsHandler.handleEventConfig(
-      config,
-      guid,
-      $shadowContainer,
-      $shadowRoot,
-      popsType,
-      $anim,
-      $pops,
-      $mask
-    );
-    const result = PopsHandler.handleResultConfig(evtConfig);
-    // 为顶部右边的关闭按钮添加点击事件
-    PopsHandler.handleClickEvent("close", $headerBtnClose, evtConfig, config.btn?.close?.callback);
-
-    // 创建到页面中
-    popsDOMUtils.append($shadowRoot, $elList);
-    if (typeof config.beforeAppendToPageCallBack === "function") {
-      config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
-    }
-    popsDOMUtils.appendBody($shadowContainer);
-    // 追加遮罩层元素
-    if ($mask != null) {
-      $anim.after($mask);
-    }
-    const panelHandlerComponents = PanelHandlerComponents();
-    /**
-     * 处理内部配置
-     */
-    panelHandlerComponents.init({
-      config: config,
-      $el: {
-        $pops,
-        $content,
-        $panelRightSectionWrapper,
-        $panelLeftAside,
-        $panelContentSectionContainer,
-        $panelBottomWrapper,
-        $panelBottomContainer,
-        $panelBottomLeftContainer,
-        $panelBottomRightContainer,
-      },
-    });
-
-    PopsHandler.handlePush(popsType, {
-      guid: guid,
-      $anim: $anim,
-      $pops: $pops,
-      $mask: $mask!,
-      $shadowContainer: $shadowContainer,
-      $shadowRoot: $shadowRoot,
-      config: config,
-      destory: result.close,
-    });
-    // 拖拽
-    if (config.drag) {
-      PopsInstanceUtils.drag($pops, {
-        dragElement: $title,
-        limit: config.dragLimit,
-        extraDistance: config.dragExtraDistance,
-        moveCallBack: config.dragMoveCallBack,
-        endCallBack: config.dragEndCallBack,
-      });
-    }
-
-    return {
-      ...result,
-      addEventListener: <K extends keyof PopsPanelEventType>(
-        event: K,
-        listener: (evt: CustomEvent<PopsPanelEventType[K]>) => void,
-        options?: boolean | EventListenerOptions
-      ) => {
-        $pops.addEventListener(event, listener as any, options);
-      },
-      removeEventListener: <K extends keyof PopsPanelEventType>(
-        event: K,
-        listener: (evt: CustomEvent<PopsPanelEventType[K]>) => void,
-        options?: boolean | EventListenerOptions
-      ) => {
-        $pops.removeEventListener(event, listener as any, options);
-      },
-    };
-  },
-};
+import { PopsElementHandler } from "../../handler/PopsElementHandler";
+import { PopsHandler } from "../../handler/PopsHandler";
+import { popsDOMUtils } from "../../utils/PopsDOMUtils";
+import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
+import { popsUtils } from "../../utils/PopsUtils";
+import type { PopsPanelConfig, PopsPanelEventType } from "./types";
+import { PopsPanelDefaultConfig } from "./defaultConfig";
+import { PanelHandlerComponents } from "./handlerComponents";
+import { GlobalConfig } from "../../config/GlobalConfig";
+import { PopsCSS } from "../../PopsCSS";
+import type { PopsType } from "../../types/main";
+
+export const PopsPanel = {
+  init(__config__: PopsPanelConfig) {
+    const guid = popsUtils.getRandomGUID();
+    // 设置当前类型
+    const popsType: PopsType = "panel";
+
+    let config: Required<PopsPanelConfig> = PopsPanelDefaultConfig();
+    config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
+    config = popsUtils.assign(config, __config__);
+    config = PopsHandler.handleOnly(popsType, config);
+
+    const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
+    PopsHandler.handleInit($shadowRoot, [
+      {
+        name: "index",
+        css: PopsCSS.index,
+      },
+      {
+        name: "ninePalaceGridPosition",
+        css: PopsCSS.ninePalaceGridPosition,
+      },
+      {
+        name: "scrollbar",
+        css: PopsCSS.scrollbar,
+      },
+      {
+        name: "button",
+        css: PopsCSS.button,
+      },
+      {
+        name: "anim",
+        css: PopsCSS.anim,
+      },
+      {
+        name: "common",
+        css: PopsCSS.common,
+      },
+      {
+        name: "panelCSS",
+        css: PopsCSS.panelCSS,
+      },
+    ]);
+
+    // 先把z-index提取出来
+    const zIndex = PopsHandler.handleZIndex(config.zIndex);
+    const maskHTML = PopsElementHandler.createMask(guid, zIndex);
+
+    const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
+    const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
+
+    const animHTML = PopsElementHandler.createAnim(
+      guid,
+      popsType,
+      config,
+      /*html*/ `
+			<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${
+        config.title.html
+          ? config.title.text
+          : `<p pops class="pops-${popsType}-title-text" class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`
+      }${headerBtnHTML}</div>
+			<div class="pops-content pops-${popsType}-content">
+				<aside class="pops-${popsType}-aside pops-user-select-none">
+					<ul class="pops-${popsType}-aside-top-container"></ul>
+					<ul class="pops-${popsType}-aside-bottom-container"></ul>
+				</aside>
+				<div class="pops-${popsType}-section-wrapper">
+					<section class="pops-${popsType}-container">
+						<ul class="pops-${popsType}-container-header-ul"></ul>
+						<ul class="pops-${popsType}-container-main-ul"></ul>
+					</section>
+				</div>
+			</div>
+      <div class="pops-${popsType}-bottom-wrapper">
+        <section class="pops-${popsType}-bottom-container">
+          <ul class="pops-${popsType}-bottom-left-container"></ul>
+          <ul class="pops-${popsType}-bottom-right-container"></ul>
+        </section>
+      </div>
+      `,
+      "",
+      zIndex
+    );
+    /**
+     * 弹窗的主元素，包括动画层
+     */
+    const $anim = PopsElementHandler.parseElement<HTMLDivElement>(animHTML);
+    // 结构元素
+    const {
+      $pops,
+      $headerBtnClose,
+      $title,
+      $content,
+      $panelRightSectionWrapper,
+      $panelLeftAside,
+      $panelContentSectionContainer,
+      $panelBottomWrapper,
+      $panelBottomContainer,
+      $panelBottomLeftContainer,
+      $panelBottomRightContainer,
+    } = PopsHandler.handleQueryElement($anim, popsType);
+    if (config.isMobile || popsUtils.isPhone()) {
+      popsDOMUtils.addClassName($pops, config.mobileClassName);
+    }
+    /**
+     * 遮罩层元素
+     */
+    let $mask: HTMLDivElement | undefined = void 0;
+    /**
+     * 已创建的元素列表
+     */
+    const $elList: HTMLElement[] = [$anim];
+
+    // 遮罩层元素
+    if (config.mask.enable) {
+      const handleMask = PopsHandler.handleMask({
+        type: popsType,
+        guid: guid,
+        config: config,
+        animElement: $anim,
+        maskHTML: maskHTML,
+      });
+      $mask = handleMask.maskElement;
+      $elList.push($mask);
+    }
+
+    // 处理返回的配置
+    const evtConfig = PopsHandler.handleEventConfig(
+      config,
+      guid,
+      $shadowContainer,
+      $shadowRoot,
+      popsType,
+      $anim,
+      $pops,
+      $mask
+    );
+    const result = PopsHandler.handleResultConfig(evtConfig);
+    // 为顶部右边的关闭按钮添加点击事件
+    PopsHandler.handleClickEvent("close", $headerBtnClose, evtConfig, config.btn?.close?.callback);
+
+    // 创建到页面中
+    popsDOMUtils.append($shadowRoot, $elList);
+    if (typeof config.beforeAppendToPageCallBack === "function") {
+      config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
+    }
+    popsDOMUtils.appendBody($shadowContainer);
+    // 追加遮罩层元素
+    if ($mask != null) {
+      $anim.after($mask);
+    }
+    const panelHandlerComponents = PanelHandlerComponents();
+    /**
+     * 处理内部配置
+     */
+    panelHandlerComponents.init({
+      config: config,
+      $el: {
+        $pops,
+        $content,
+        $panelRightSectionWrapper,
+        $panelLeftAside,
+        $panelContentSectionContainer,
+        $panelBottomWrapper,
+        $panelBottomContainer,
+        $panelBottomLeftContainer,
+        $panelBottomRightContainer,
+      },
+    });
+
+    PopsHandler.handlePush(popsType, {
+      guid: guid,
+      $anim: $anim,
+      $pops: $pops,
+      $mask: $mask!,
+      $shadowContainer: $shadowContainer,
+      $shadowRoot: $shadowRoot,
+      config: config,
+      destory: result.close,
+    });
+    // 拖拽
+    if (config.drag) {
+      PopsInstanceUtils.drag($pops, {
+        dragElement: $title,
+        limit: config.dragLimit,
+        extraDistance: config.dragExtraDistance,
+        moveCallBack: config.dragMoveCallBack,
+        endCallBack: config.dragEndCallBack,
+      });
+    }
+
+    return {
+      ...result,
+      addEventListener: <K extends keyof PopsPanelEventType>(
+        event: K,
+        listener: (evt: CustomEvent<PopsPanelEventType[K]>) => void,
+        options?: boolean | EventListenerOptions
+      ) => {
+        $pops.addEventListener(event, listener as any, options);
+      },
+      removeEventListener: <K extends keyof PopsPanelEventType>(
+        event: K,
+        listener: (evt: CustomEvent<PopsPanelEventType[K]>) => void,
+        options?: boolean | EventListenerOptions
+      ) => {
+        $pops.removeEventListener(event, listener as any, options);
+      },
+    };
+  },
+};

package/src/components/panel/types/components-button.ts

@@ -1,56 +1,56 @@
-import type { PopsPanelGeneralConfig } from "./components-common";
-import type { PopsButtonStyleType } from "../../../types/button";
-import type { PopsIconType } from "../../../types/icon";
-/**
- * pops.panel的 button
- */
-export interface PopsPanelButtonConfig extends PopsPanelGeneralConfig<PopsPanelButtonConfig> {
-  /**
-   * 组件类型
-   */
-  type: "button";
-  /**
-   * 显示在左边的文字
-   */
-  text: string;
-  /**
-   * （可选）左边的文字下面的描述
-   */
-  description?: string;
-  /**
-   * （可选）是否禁用
-   * @default false
-   */
-  disable?: boolean;
-  /**
-   * 按钮的类型
-   */
-  buttonType: PopsButtonStyleType;
-  /**
-   * 按钮的文字
-   */
-  buttonText: string | (() => string);
-  /**
-   * 按钮的图标，已配置的svg请看pops.config.iconSVG，或者自定义的图标svg代码，留空则是没有图标
-   * @default ""
-   */
-  buttonIcon?: PopsIconType;
-  /**
-   * 按钮的图标在右边
-   * + true 右边
-   * + false 左边
-   * @default false
-   */
-  buttonIsRightIcon?: boolean;
-  /**
-   * 按钮的图标旋转
-   * + true 旋转
-   * + false 不旋转
-   * @default false
-   */
-  buttonIconIsLoading?: boolean;
-  /**
-   * 点击button触发的事件
-   */
-  callback: (event: MouseEvent | PointerEvent) => void;
-}
+import type { PopsPanelGeneralConfig } from "./components-common";
+import type { PopsButtonStyleType } from "../../../types/button";
+import type { PopsIconType } from "../../../types/icon";
+/**
+ * pops.panel的 button
+ */
+export interface PopsPanelButtonConfig extends PopsPanelGeneralConfig<PopsPanelButtonConfig> {
+  /**
+   * 组件类型
+   */
+  type: "button";
+  /**
+   * 显示在左边的文字
+   */
+  text: string;
+  /**
+   * （可选）左边的文字下面的描述
+   */
+  description?: string;
+  /**
+   * （可选）是否禁用
+   * @default false
+   */
+  disable?: boolean;
+  /**
+   * 按钮的类型
+   */
+  buttonType: PopsButtonStyleType;
+  /**
+   * 按钮的文字
+   */
+  buttonText: string | (() => string);
+  /**
+   * 按钮的图标，已配置的svg请看pops.config.iconSVG，或者自定义的图标svg代码，留空则是没有图标
+   * @default ""
+   */
+  buttonIcon?: PopsIconType;
+  /**
+   * 按钮的图标在右边
+   * + true 右边
+   * + false 左边
+   * @default false
+   */
+  buttonIsRightIcon?: boolean;
+  /**
+   * 按钮的图标旋转
+   * + true 旋转
+   * + false 不旋转
+   * @default false
+   */
+  buttonIconIsLoading?: boolean;
+  /**
+   * 点击button触发的事件
+   */
+  callback: (event: MouseEvent | PointerEvent) => void;
+}