@whitesev/pops 2.5.0 → 2.5.2

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,77 @@ 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;
+  };
+  /**
+   * （可选）自定义元素内部的属性值
+   * @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 +209,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 = {