@whitesev/pops 2.4.7 → 2.5.1

package/src/components/panel/index.ts

@@ -74,7 +74,7 @@ export const PopsPanel = {
           : `<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">
+				<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>
@@ -84,7 +84,14 @@ export const PopsPanel = {
 						<ul class="pops-${popsType}-container-main-ul"></ul>
 					</section>
 				</div>
-			</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
     );
@@ -94,13 +101,17 @@ export const PopsPanel = {
     const $anim = PopsElementHandler.parseElement<HTMLDivElement>(animHTML);
     /* 结构元素 */
     const {
-      popsElement: $pops,
-      headerCloseBtnElement: $headerCloseBtn,
-      titleElement: $title,
-      contentElement: $content,
-      panelSectionWrapper: $panelSectionWrapper,
-      contentAsideElement: $contentAside,
-      contentSectionContainerElement: $contentSectionContainer,
+      $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);
@@ -139,7 +150,7 @@ export const PopsPanel = {
       config
     );
     /* 为顶部右边的关闭按钮添加点击事件 */
-    PopsHandler.handleClickEvent("close", $headerCloseBtn, eventDetails, config.btn.close!.callback!);
+    PopsHandler.handleClickEvent("close", $headerBtnClose, eventDetails, config.btn.close!.callback!);
 
     /* 创建到页面中 */
     popsDOMUtils.append($shadowRoot, isCreatedElementList);
@@ -158,11 +169,15 @@ export const PopsPanel = {
     panelHandlerComponents.init({
       config: config,
       $el: {
-        $pops: $pops,
-        $content: $content,
-        $sectionWrapper: $panelSectionWrapper,
-        $contentAside: $contentAside,
-        $contentSectionContainer: $contentSectionContainer,
+        $pops,
+        $content,
+        $panelRightSectionWrapper,
+        $panelLeftAside,
+        $panelContentSectionContainer,
+        $panelBottomWrapper,
+        $panelBottomContainer,
+        $panelBottomLeftContainer,
+        $panelBottomRightContainer,
       },
     });
 

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

@@ -5,26 +5,6 @@ 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];
-  };
   /**
    * 显示在左边的文字
    */
@@ -50,15 +30,22 @@ export interface PopsPanelButtonDetails extends PopsPanelCommonDetails<PopsPanel
    */
   buttonText: string | (() => string);
   /**
-   * 按钮的图标，已配置的svg请看pops.config.iconSVG，或者自定义的图标svg代码
+   * 按钮的图标，已配置的svg请看pops.config.iconSVG，或者自定义的图标svg代码，留空则是没有图标
+   * @default ""
    */
   buttonIcon?: PopsIconType;
   /**
    * 按钮的图标在右边
+   * + true 右边
+   * + false 左边
+   * @default false
    */
   buttonIsRightIcon?: boolean;
   /**
    * 按钮的图标旋转
+   * + true 旋转
+   * + false 不旋转
+   * @default false
    */
   buttonIconIsLoading?: boolean;
   /**

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

@@ -20,6 +20,33 @@ export interface PopsPanelRightAsideContainerOptions {
  * 通用配置
  */
 export interface PopsPanelCommonDetails<T extends PopsPanelFormsTotalDetails | PopsPanelFormsDetails> {
+  /**
+   * （可选）className属性
+   * @default ""
+   */
+  className?: string;
+  /**
+   * （可选）自定义元素属性
+   * @default {}
+   */
+  attributes?:
+    | {
+        [key: string]: any;
+      }
+    | {
+        [key: string]: any;
+      }[];
+  /**
+   * （可选）自定义属性
+   * @default {}
+   */
+  props?:
+    | {
+        [K in keyof HTMLElement]?: HTMLElement[K];
+      }
+    | {
+        [key: string]: any;
+      };
   /**
      * 在添加到<ul>元素后触发该回调
      * @param formConfig 配置

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

@@ -9,26 +9,6 @@ export interface PopsPanelDeepMenuDetails extends PopsPanelCommonDetails<PopsPan
    * 类型
    */
   type: "deepMenu";
-  /**
-   * （可选）className属性
-   */
-  className?: string;
-  /**
-   * （可选）自定义元素属性
-   */
-  attributes?:
-    | {
-        [key: string]: any;
-      }
-    | {
-        [key: string]: any;
-      }[];
-  /**
-   * （可选）自定义属性
-   */
-  props?: {
-    [K in keyof HTMLElement]?: HTMLElement[K];
-  };
   /**
    * 显示在左边的文字
    */

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

@@ -5,26 +5,6 @@ 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];
-  };
   /**
    * 显示在左边的文字
    */

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

@@ -4,29 +4,6 @@ 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];
-  };
   /**
    * 显示在左边的文字
    */

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

@@ -5,20 +5,6 @@ import type { PopsPanelCommonDetails } from "./components-common";
  * 自定义的
  */
 export interface PopsPanelOwnDetails extends PopsPanelCommonDetails<PopsPanelOwnDetails> {
-  /**
-   * （可选）className属性
-   */
-  className?: string;
-  /**
-   * （可选）自定义元素属性
-   */
-  attributes?: any;
-  /**
-   * （可选）自定义属性
-   */
-  props?: {
-    [K in keyof HTMLElement]?: HTMLElement[K];
-  };
   /**
    * 类型
    */

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

@@ -6,29 +6,6 @@ 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];
-  };
   /**
    * 显示在左边的文字
    */

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

@@ -37,26 +37,6 @@ export interface PopsPanelSelectMultipleDataOption<T> {
  */
 export interface PopsPanelSelectMultipleDetails<T = any>
   extends PopsPanelCommonDetails<PopsPanelSelectMultipleDetails> {
-  /**
-   * （可选）className属性
-   */
-  className?: string;
-  /**
-   * （可选）自定义元素属性
-   */
-  attributes?:
-    | {
-        [key: string]: any;
-      }
-    | {
-        [key: string]: any;
-      }[];
-  /**
-   * （可选）自定义属性
-   */
-  props?: {
-    [K in keyof HTMLElement]?: HTMLElement[K];
-  };
   /**
    * 显示在左边的文字
    */

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

@@ -4,27 +4,6 @@ import type { PopsPanelCommonDetails } from "./components-common";
  * pops.panel的 slider
  */
 export interface PopsPanelSliderDetails extends PopsPanelCommonDetails<PopsPanelSliderDetails> {
-  /**
-   * className属性
-   * @default ""
-   */
-  className?: string;
-  /**
-   * 自定义元素属性
-   */
-  attributes?:
-    | {
-        [key: string]: any;
-      }
-    | {
-        [key: string]: any;
-      }[];
-  /**
-   * 自定义属性
-   */
-  props?: {
-    [K in keyof HTMLElement]?: HTMLElement[K];
-  };
   /**
    * 显示在左边的文字
    */

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

@@ -4,29 +4,6 @@ import type { PopsPanelCommonDetails } from "./components-common";
  * pops.panel的 switch
  */
 export interface PopsPanelSwitchDetails extends PopsPanelCommonDetails<PopsPanelSwitchDetails> {
-  /**
-   * （可选）className属性
-   * @default ""
-   */
-  className?: string;
-  /**
-   * （可选）自定义元素属性
-   * @default {}
-   */
-  attributes?:
-    | {
-        [key: string]: any;
-      }
-    | {
-        [key: string]: any;
-      }[];
-  /**
-   * （可选）自定义属性
-   * @default {}
-   */
-  props?: {
-    [K in keyof HTMLElement]?: HTMLElement[K];
-  };
   /**
    * 显示在左边的文字
    */

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

@@ -4,29 +4,6 @@ import type { PopsPanelCommonDetails } from "./components-common";
  * pops.panel的 textarea
  */
 export interface PopsPanelTextAreaDetails extends PopsPanelCommonDetails<PopsPanelTextAreaDetails> {
-  /**
-   * （可选）className属性
-   * @default ""
-   */
-  className?: string;
-  /**
-   * （可选）自定义元素属性
-   * @default {}
-   */
-  attributes?:
-    | {
-        [key: string]: any;
-      }
-    | {
-        [key: string]: any;
-      }[];
-  /**
-   * （可选）自定义属性
-   * @default {}
-   */
-  props?: {
-    [K in keyof HTMLElement]?: HTMLElement[K];
-  };
   /**
    * 显示在左边的文字
    */

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

@@ -10,6 +10,7 @@ import type { PopsPanelDeepMenuDetails } from "./components-deepMenu";
 import type { PopsPanelOwnDetails } from "./components-own";
 import type { PopsHeaderCloseButtonDetails } from "../../../types/button";
 import type { PopsPanelSelectMultipleDetails } from "./components-selectMultiple";
+import type { PopsPanelCommonDetails } from "./components-common";
 
 /** panel的各种类型的配置项 */
 export type PopsPanelFormsTotalDetails =
@@ -52,11 +53,11 @@ export interface PopsPanelContentConfig {
    */
   className?: string | string[];
   /**
-   * 左侧的标题，可以是html格式
+   * 显示的文本，可以是html格式
    */
   title: string | (() => string);
   /**
-   * （可选）中间顶部的标题，如果为空，则使用title的值代替
+   * （可选）中间顶部的文本，如果为空，则使用title的值代替
    * @default title
    */
   headerTitle?: string | (() => string);
@@ -84,19 +85,11 @@ export interface PopsPanelContentConfig {
   /**
    * （可选）自定义元素属性.setAttribute、.getAttribute
    */
-  attributes?:
-    | {
-        [key: string]: any;
-      }
-    | {
-        [key: string]: any;
-      }[];
+  attributes?: PopsPanelCommonDetails<any>["attributes"];
   /**
    * （可选）自定义元素内部的属性值
    */
-  props?: {
-    [K in keyof HTMLElement]?: HTMLElement[K];
-  };
+  props?: PopsPanelCommonDetails<any>["props"];
   /**
    * 子配置
    */
@@ -128,7 +121,7 @@ export interface PopsPanelContentConfig {
     /**
      * 配置
      */
-    data: {
+    config: {
       /** 容器配置 */
       asideConfig: PopsPanelContentConfig;
       /** 左侧容器的元素 */
@@ -137,6 +130,81 @@ export interface PopsPanelContentConfig {
   ) => void;
 }
 
+/**
+ * pops.panel的bottomContent配置信息
+ */
+export interface PopsPanelBottomContentConfig {
+  /**
+   * （可选）元素的className，值为空的话就不设置
+   * @default ""
+   */
+  className?: string | string[];
+  /**
+   * （可选）配置所在位置
+   *
+   * @default "left"
+   */
+  position: "left" | "right";
+  /**
+   * 显示的文本，可以是html格式
+   */
+  text: string | (() => string);
+  /**
+   * （可选）是否禁用hover的CSS样式
+   * @default false
+   */
+  disableHoverCSS?: boolean | (() => boolean);
+  /**
+   * （可选）自定义元素属性.setAttribute、.getAttribute
+   * @default {}
+   */
+  attributes?:
+    | {
+        [key: string]: any;
+      }
+    | {
+        [key: string]: any;
+      }[];
+  /**
+   * （可选）自定义元素内部的属性值
+   * @default {}
+   */
+  props?:
+    | {
+        [K in keyof HTMLElement]?: HTMLElement[K];
+      }
+    | {
+        [key: string]: any;
+      };
+  /**
+   * 该项的点击回调
+   */
+  clickCallback?: (
+    /**
+     * 点击事件
+     */
+    event: MouseEvent | PointerEvent
+  ) => void;
+  /**
+   * 该项添加到panel后的回调
+   */
+  afterRender?: (
+    /**
+     * 配置
+     */
+    config: {
+      /** panel底部区域 */
+      $bottomWrapper: HTMLElement;
+      /** panel底部区域容器 */
+      $bottomContainer: HTMLElement;
+      /** panel底部区域左侧容器 */
+      $bottomLeftContainer: HTMLElement;
+      /** panel底部区域右侧容器 */
+      $bottomRightContainer: HTMLElement;
+    }
+  ) => void;
+}
+
 /**
  * pops.panel
  */
@@ -145,6 +213,10 @@ export interface PopsPanelDetails extends PopsTitleConfig, PopsDragConfig, PopsC
    * 内容配置
    */
   content: PopsPanelContentConfig[];
+  /**
+   * 底部内容配置
+   */
+  bottomContentConfig?: PopsPanelBottomContentConfig[];
   /**
    * 右上角的按钮配置
    */

package/src/components/prompt/index.ts

@@ -93,13 +93,13 @@ export const PopsPrompt = {
     const $anim = PopsElementHandler.parseElement<HTMLDivElement>(animHTML);
 
     const {
-      popsElement: $pops,
-      inputElement: $input,
-      headerCloseBtnElement: $btnClose,
-      btnOkElement: $btnOk,
-      btnCancelElement: $btnCancel,
-      btnOtherElement: $btnOther,
-      titleElement: $title,
+      $pops: $pops,
+      $input: $input,
+      $headerBtnClose: $btnClose,
+      $btnOk: $btnOk,
+      $btnCancel: $btnCancel,
+      $btnOther: $btnOther,
+      $title: $title,
     } = PopsHandler.handleQueryElement($anim, popsType);
     /**
      * 遮罩层元素

package/src/components/searchSuggestion/index.ts

@@ -46,17 +46,11 @@ export const PopsSearchSuggestion = {
     ]);
 
     if (config.style != null) {
-      const cssNode = document.createElement("style");
-      popsDOMUtils.createElement(
-        "style",
-        {
-          innerHTML: config.style,
-        },
-        {
-          type: "text/css",
-        }
-      );
-      $shadowRoot.appendChild(cssNode);
+      const $css = popsDOMUtils.createElement("style", {
+        type: "text/css",
+        innerHTML: config.style,
+      });
+      $shadowRoot.appendChild($css);
     }
 
     const SearchSuggestion = {