@whitesev/pops 2.4.5 → 2.4.7

package/src/components/panel/index.ts

@@ -0,0 +1,207 @@
+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 { PopsPanelDetails, PopsPanelEventType } from "./types";
+import { PopsPanelConfig } from "./config";
+import { PanelHandlerComponents } from "./handlerComponents";
+import { GlobalConfig } from "../../config/GlobalConfig";
+import { PopsCSS } from "../../PopsCSS";
+import type { PopsType } from "../../types/main";
+
+export const PopsPanel = {
+  init(details: PopsPanelDetails) {
+    const guid = popsUtils.getRandomGUID();
+    // 设置当前类型
+    const popsType: PopsType = "panel";
+
+    let config: Required<PopsPanelDetails> = PopsPanelConfig();
+    config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
+    config = popsUtils.assign(config, details);
+    if (details && Array.isArray(details.content)) {
+      config.content = details.content;
+    }
+    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">
+					<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>`,
+      "",
+      zIndex
+    );
+    /**
+     * 弹窗的主元素，包括动画层
+     */
+    const $anim = PopsElementHandler.parseElement<HTMLDivElement>(animHTML);
+    /* 结构元素 */
+    const {
+      popsElement: $pops,
+      headerCloseBtnElement: $headerCloseBtn,
+      titleElement: $title,
+      contentElement: $content,
+      panelSectionWrapper: $panelSectionWrapper,
+      contentAsideElement: $contentAside,
+      contentSectionContainerElement: $contentSectionContainer,
+    } = PopsHandler.handleQueryElement($anim, popsType);
+    if (config.isMobile || popsUtils.isPhone()) {
+      popsDOMUtils.addClassName($pops, config.mobileClassName);
+    }
+    /**
+     * 遮罩层元素
+     */
+    let $mask: HTMLDivElement | null = null;
+    /**
+     * 已创建的元素列表
+     */
+    const isCreatedElementList: HTMLElement[] = [$anim];
+
+    /* 遮罩层元素 */
+    if (config.mask.enable) {
+      const { maskElement } = PopsHandler.handleMask({
+        type: popsType,
+        guid: guid,
+        config: config,
+        animElement: $anim,
+        maskHTML: maskHTML,
+      });
+      $mask = maskElement;
+      isCreatedElementList.push($mask);
+    }
+
+    /* 处理返回的配置 */
+    const eventDetails = PopsHandler.handleEventDetails(
+      guid,
+      $shadowContainer,
+      $shadowRoot,
+      popsType,
+      $anim,
+      $pops,
+      $mask!,
+      config
+    );
+    /* 为顶部右边的关闭按钮添加点击事件 */
+    PopsHandler.handleClickEvent("close", $headerCloseBtn, eventDetails, config.btn.close!.callback!);
+
+    /* 创建到页面中 */
+    popsDOMUtils.append($shadowRoot, isCreatedElementList);
+    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: $pops,
+        $content: $content,
+        $sectionWrapper: $panelSectionWrapper,
+        $contentAside: $contentAside,
+        $contentSectionContainer: $contentSectionContainer,
+      },
+    });
+
+    PopsHandler.handlePush(popsType, {
+      guid: guid,
+      animElement: $anim,
+      popsElement: $pops,
+      maskElement: $mask!,
+      $shadowContainer: $shadowContainer,
+      $shadowRoot: $shadowRoot,
+    });
+    /* 拖拽 */
+    if (config.drag) {
+      PopsInstanceUtils.drag($pops, {
+        dragElement: $title,
+        limit: config.dragLimit,
+        extraDistance: config.dragExtraDistance,
+        moveCallBack: config.dragMoveCallBack,
+        endCallBack: config.dragEndCallBack,
+      });
+    }
+    const result = PopsHandler.handleResultDetails(eventDetails);
+
+    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

@@ -0,0 +1,68 @@
+import type { PopsPanelCommonDetails } from "./components-common";
+import type { PopsButtonStyleType } from "../../../types/button";
+import type { PopsIconType } from "../../../types/icon";
+/**
+ * pops.panel的 button
+ */
+export interface PopsPanelButtonDetails extends PopsPanelCommonDetails<PopsPanelButtonDetails> {
+  /**
+   * （可选）className属性
+   */
+  className?: string;
+  /**
+   * （可选）自定义元素属性
+   */
+  attributes?:
+    | {
+        [key: string]: any;
+      }
+    | {
+        [key: string]: any;
+      }[];
+  /**
+   * （可选）自定义属性
+   */
+  props?: {
+    [K in keyof HTMLElement]?: HTMLElement[K];
+  };
+  /**
+   * 显示在左边的文字
+   */
+  text: string;
+  /**
+   * （可选）左边的文字下面的描述
+   */
+  description?: string;
+  /**
+   * 类型
+   */
+  type: "button";
+  /**
+   * （可选）是否禁用
+   */
+  disable?: boolean;
+  /**
+   * 按钮的类型
+   */
+  buttonType: PopsButtonStyleType;
+  /**
+   * 按钮的文字
+   */
+  buttonText: string | (() => string);
+  /**
+   * 按钮的图标，已配置的svg请看pops.config.iconSVG，或者自定义的图标svg代码
+   */
+  buttonIcon?: PopsIconType;
+  /**
+   * 按钮的图标在右边
+   */
+  buttonIsRightIcon?: boolean;
+  /**
+   * 按钮的图标旋转
+   */
+  buttonIconIsLoading?: boolean;
+  /**
+   * 点击button触发的事件
+   */
+  callback: (event: MouseEvent | PointerEvent) => void;
+}

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

@@ -0,0 +1,50 @@
+import type { PopsPanelFormsDetails } from "./components-forms";
+import type { PopsPanelFormsTotalDetails } from ".";
+
+/**
+ * 右侧容器的配置
+ */
+export interface PopsPanelRightAsideContainerOptions {
+  /** 当前的<li>元素 */
+  target: HTMLLIElement | undefined;
+  /** 当前的<li>元素的父<ul>元素 */
+  ulElement: HTMLUListElement;
+  /** 当前的<li>元素所在的统一的<ul>元素 */
+  sectionContainerULElement?: HTMLUListElement;
+  /**  */
+  formContainerListElement?: HTMLLIElement;
+  /**  */
+  formHeaderDivElement?: HTMLElement | HTMLDivElement;
+}
+/**
+ * 通用配置
+ */
+export interface PopsPanelCommonDetails<T extends PopsPanelFormsTotalDetails | PopsPanelFormsDetails> {
+  /**
+     * 在添加到<ul>元素后触发该回调
+     * @param formConfig 配置
+     * @param container 右侧容器的元素
+     * @example
+     * // 例如在type为own时
+     * afterAddToUListCallBack(formConfig, container) {
+     * DOMUtils.on(
+        container.formHeaderDivElement.querySelector(
+        "a"
+        ),
+        "click",
+        void 0,
+        () => {
+        PopsPanel.deleteValue("xxxx");
+        container.ulElement.querySelector(
+            "textarea"
+        ).value = xxxxx.defaultValue;
+        Qmsg.success("已重置");
+        }
+    );
+     * }
+     * 
+     * // 例如在type为forms时
+     * container内只有container.ulElement这个属性
+     */
+  afterAddToUListCallBack?: (formConfig: T, container: PopsPanelRightAsideContainerOptions) => void;
+}

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

@@ -0,0 +1,84 @@
+import type { PopsPanelFormsTotalDetails } from ".";
+import type { PopsPanelFormsDetails } from "./components-forms";
+import type { PopsPanelCommonDetails } from "./components-common";
+/**
+ * pops.panel的 深层菜单
+ */
+export interface PopsPanelDeepMenuDetails extends PopsPanelCommonDetails<PopsPanelDeepMenuDetails> {
+  /**
+   * 类型
+   */
+  type: "deepMenu";
+  /**
+   * （可选）className属性
+   */
+  className?: string;
+  /**
+   * （可选）自定义元素属性
+   */
+  attributes?:
+    | {
+        [key: string]: any;
+      }
+    | {
+        [key: string]: any;
+      }[];
+  /**
+   * （可选）自定义属性
+   */
+  props?: {
+    [K in keyof HTMLElement]?: HTMLElement[K];
+  };
+  /**
+   * 显示在左边的文字
+   */
+  text: string;
+  /**
+   * （可选）左边的文字下面的描述
+   */
+  description?: string;
+  /**
+   * （可选）右侧的文字
+   */
+  rightText?: string;
+  /**
+   * （可选）右侧的箭头图标，默认启用
+   */
+  arrowRightIcon?: boolean;
+  /**
+   * 点击整行触发的事件，可为异步函数
+   * @param event click事件
+   * @returns
+   * + true 表示阻止进入深层菜单
+   * + false （默认）表示允许进入深层菜单
+   */
+  clickCallBack?: (
+    event: MouseEvent | PointerEvent,
+    formConfig: PopsPanelDeepMenuDetails
+  ) => boolean | void | Promise<boolean | void>;
+  /**
+   * 进入深层菜单后触发的回调
+   * @param formConfig
+   */
+  afterEnterDeepMenuCallBack?: (
+    formConfig: PopsPanelDeepMenuDetails,
+    container: {
+      /** 右侧的总容器 */
+      sectionContainer: HTMLElement;
+      /** 右侧的总容器的标题头容器 */
+      sectionContainerHeaderContainer: HTMLUListElement;
+      /** 右侧的总容器的标题头 */
+      sectionContainerHeader: HTMLLIElement;
+      /** 右侧的内容容器 */
+      sectionBodyContainer: HTMLUListElement;
+    }
+  ) => void;
+  /**
+   * 菜单配置
+   */
+  forms?: (PopsPanelFormsDetails | PopsPanelFormsTotalDetails)[];
+  /**
+   * （可选）头部的标题文字，没有的话默认是text
+   */
+  headerTitle?: string;
+}

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

@@ -0,0 +1,44 @@
+import type { PopsPanelCommonDetails } from "./components-common";
+import type { PopsPanelFormsTotalDetails } from ".";
+
+/**
+ * pops.panel的 forms
+ */
+export interface PopsPanelFormsDetails extends PopsPanelCommonDetails<PopsPanelFormsDetails> {
+  /**
+   * （可选）className属性
+   */
+  className?: string;
+  /**
+   * （可选）自定义元素属性
+   */
+  attributes?:
+    | {
+        [key: string]: any;
+      }
+    | {
+        [key: string]: any;
+      }[];
+  /**
+   * （可选）自定义属性
+   */
+  props?: {
+    [K in keyof HTMLElement]?: HTMLElement[K];
+  };
+  /**
+   * 显示在左边的文字
+   */
+  text: string;
+  /**
+   * 是否进行折叠
+   */
+  isFold?: boolean;
+  /**
+   * 类型
+   */
+  type: "forms";
+  /**
+   * 子配置
+   */
+  forms: PopsPanelFormsTotalDetails[];
+}

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

@@ -0,0 +1,78 @@
+import type { PopsPanelCommonDetails } from "./components-common";
+
+/**
+ * pops.panel的 input
+ */
+export interface PopsPanelInputDetails extends PopsPanelCommonDetails<PopsPanelInputDetails> {
+  /**
+   * （可选）className属性
+   * @default ""
+   */
+  className?: string;
+  /**
+   * （可选）自定义元素属性
+   * @default {}
+   */
+  attributes?:
+    | {
+        [key: string]: any;
+      }
+    | {
+        [key: string]: any;
+      }[];
+  /**
+   * （可选）自定义属性
+   * @default {}
+   */
+  props?: {
+    [K in keyof HTMLElement]?: HTMLElement[K];
+  };
+  /**
+   * 显示在左边的文字
+   */
+  text: string;
+  /**
+   * （可选）左边的文字下面的描述
+   * @default ""
+   */
+  description?: string;
+  /**
+   * 类型
+   */
+  type: "input";
+  /**
+   * （可选）是否禁用
+   * @default false
+   */
+  disabled?: boolean | (() => boolean);
+  /**
+   * 获取该项的值的回调函数
+   */
+  getValue(): string;
+  /**
+   * 输入框的值改变触发的回调函数
+   * @param event 输入事件
+   * @param value 输入框的值
+   * @param valueAsNumber 当isNumber为true时，有该值，它可能是NaN
+   */
+  callback(event: InputEvent, value: string, valueAsNumber?: number): void;
+  /**
+   * （可选）输入框内的提示
+   * @default ""
+   */
+  placeholder?: string;
+  /**
+   * （可选）是否是密码框
+   * @default false
+   */
+  isPassword?: boolean;
+  /**
+   * （可选）是否是数字框
+   * @default false
+   */
+  isNumber?: boolean;
+  /**
+   * （可选）自己调用的处理回调函数
+   */
+  handlerCallBack?(liElement: HTMLLIElement, inputElement: HTMLInputElement): void;
+}

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

@@ -0,0 +1,30 @@
+import type { PopsPanelCommonDetails } from "./components-common";
+
+/**
+ * pops.panel的 own
+ * 自定义的
+ */
+export interface PopsPanelOwnDetails extends PopsPanelCommonDetails<PopsPanelOwnDetails> {
+  /**
+   * （可选）className属性
+   */
+  className?: string;
+  /**
+   * （可选）自定义元素属性
+   */
+  attributes?: any;
+  /**
+   * （可选）自定义属性
+   */
+  props?: {
+    [K in keyof HTMLElement]?: HTMLElement[K];
+  };
+  /**
+   * 类型
+   */
+  type: "own";
+  /**
+   * 获取自定义<li>标签元素
+   */
+  getLiElementCallBack: (liElement: HTMLLIElement) => HTMLLIElement;
+}

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

@@ -0,0 +1,93 @@
+import type { PopsPanelCommonDetails } from "./components-common";
+import type { PopsPanelFormsDetails } from "./components-forms";
+import type { PopsPanelFormsTotalDetails } from ".";
+
+/**
+ * pops.panel的 select
+ */
+export interface PopsPanelSelectDetails<T = any> extends PopsPanelCommonDetails<PopsPanelSelectDetails> {
+  /**
+   * （可选）className属性
+   * @default ""
+   */
+  className?: string;
+  /**
+   * （可选）自定义元素属性
+   * @default {}
+   */
+  attributes?:
+    | {
+        [key: string]: any;
+      }
+    | {
+        [key: string]: any;
+      }[];
+  /**
+   * （可选）自定义属性
+   * @default {}
+   */
+  props?: {
+    [K in keyof HTMLElement]?: HTMLElement[K];
+  };
+  /**
+   * 显示在左边的文字
+   */
+  text: string;
+  /**
+   * （可选）左边的文字下面的描述
+   * @default ""
+   */
+  description?: string;
+  /**
+   * 类型
+   */
+  type: "select";
+  /**
+   * （可选）是否禁用
+   * @default false
+   */
+  disabled?: boolean | (() => boolean);
+  /**
+   * 获取该项的值的回调函数
+   */
+  getValue(): T;
+  /**
+   * 选择器的值改变触发的回调函数
+   * @param event 事件
+   * @param isSelectedValue 当前选中的值，也就是元素属性上的__value__
+   * @param isSelectedText 当前选中的文本
+   */
+  callback?(event: PointerEvent | TouchEvent, isSelectedValue: T, isSelectedText: string): void;
+  /**
+   * 点击select元素触发该回调
+   * @param event 点击事件
+   * @param selectElement 当前的select元素
+   */
+  clickCallBack?(event: PointerEvent | MouseEvent, selectElement: HTMLSelectElement): void;
+  /**
+   * 选择器内的数据组
+   */
+  data: {
+    /**
+     * 真正的值
+     */
+    value: T;
+    /**
+     * 显示的文字
+     */
+    text: string;
+    /**
+     * （可选）是否禁用项
+     * 触发条件：
+     * + 点击select元素
+     * + select元素触发change事件
+     */
+    disable?(value: T): boolean;
+    /**
+     * 子配置，跟随切换改变
+     */
+    forms?:
+      | (PopsPanelFormsDetails | PopsPanelFormsTotalDetails)[]
+      | (() => (PopsPanelFormsDetails | PopsPanelFormsTotalDetails)[]);
+  }[];
+}