@whitesev/pops 3.0.0 → 3.0.2

package/src/components/panel/index.css

@@ -278,13 +278,17 @@ section.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-container-
   .pops[type-value="panel"] section.pops-panel-container > ul > li div:nth-child(2) {
     max-width: 55%;
   }
+  .pops[type-value="panel"] .pops-panel-select .el-select__selected-item.el-select__placeholder {
+    max-width: -moz-available;
+    max-width: -webkit-fill-available;
+  }
   .pops[type-value="panel"] section.pops-panel-container > ul > li .pops-panel-input span.pops-panel-input__suffix {
     padding: 0 4px;
   }
   .pops[type-value="panel"] section.pops-panel-container .pops-panel-select select {
     min-width: 88px !important;
-    width: -webkit-fill-available;
     width: -moz-available;
+    width: -webkit-fill-available;
   }
   .pops[type-value="panel"] section.pops-panel-container .pops-panel-container-header-ul li {
     font-size: 16px;
@@ -652,6 +656,7 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
   --el-disabled-text-color: #a8abb2;
   --el-disabled-bg-color: #f5f7fa;
   --el-disabled-border-color: #e4e7ed;
+  --el-color-danger: #f56c6c;
 
   --pops-panel-components-input-text-color: #000000;
   --pops-panel-components-input-text-bg-color: transparent;
@@ -666,20 +671,28 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
 .pops-panel-input {
   display: flex;
   align-items: center;
+  flex-direction: column;
+  position: relative;
+  box-shadow: none;
+  width: 200px;
+  border: 0px;
+}
+.pops-panel-input_inner {
+  display: flex;
+  align-items: center;
+  width: 100%;
   border: 1px solid var(--pops-panel-components-input-bd-color);
   border-radius: 4px;
   background-color: var(--pops-panel-components-input-bg-color);
-  position: relative;
   box-shadow: none;
-  width: 200px;
 }
-.pops-panel-input:hover {
+.pops-panel-input_inner:hover {
   border: 1px solid var(--pops-panel-components-input-hover-bd-color);
 }
 .pops-panel-input:has(input:disabled):hover {
   --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);
 }
-.pops-panel-input:has(input:focus) {
+.pops-panel-input_inner:has(input:focus) {
   outline: 0;
   border: 1px solid var(--pops-panel-components-input-focus-bd-color);
   border-radius: 4px;
@@ -716,14 +729,33 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
   margin: 0px;
   padding: var(--pops-panel-components-input-text-default-padding);
 }
+.pops-panel-input input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  display: none;
+}
+/* 颜色选择器不需要那么宽 */
+.pops-panel-input:has(input[type="color"]) {
+  width: 50px;
+}
+.pops-panel-input input[type="color"] {
+  padding: 0px;
+}
+.pops-panel-input_inner:has(input[type="file"]) {
+  border: 0px;
+  background: transparent;
+}
+.pops-panel-input input[type="file"] {
+  padding: 0px;
+  line-height: 32px;
+}
 .pops-panel-input span.pops-panel-input__suffix {
   display: inline-flex;
   white-space: nowrap;
   flex-shrink: 0;
   flex-wrap: nowrap;
   height: 100%;
-  height: -webkit-fill-available;
   height: -moz-available;
+  height: -webkit-fill-available;
   text-align: center;
   color: var(--pops-panel-components-input-suffix-color);
   background: var(--pops-panel-components-input-suffix-bg-color);
@@ -797,6 +829,22 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
 .pops-panel-input input:disabled + .pops-panel-input__suffix {
   display: none;
 }
+/* 校验样式 */
+.pops-panel-input:has(.pops-panel-input-valid-error) {
+  --pops-panel-components-input-bd-color: var(--el-color-danger) !important;
+  --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);
+  --pops-panel-components-input-focus-bd-color: var(--pops-panel-components-input-bd-color);
+}
+.pops-panel-input .pops-panel-input-valid-error {
+  width: 100%;
+  color: var(--el-color-danger);
+  font-weight: 500;
+  font-size: 0.8em;
+  box-sizing: border-box;
+  vertical-align: middle;
+  display: inline-flex;
+  position: relative;
+}
 /* input的CSS */
 
 /* textarea的CSS */
@@ -849,6 +897,7 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
 
 /* select的CSS */
 .pops-panel-select {
+  --pops-panel-components-select-disabled-text-color: #a8abb2;
   --pops-panel-components-select-text-color: #000000;
   --pops-panel-components-select-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));
   --pops-panel-components-select-hover-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));
@@ -890,8 +939,64 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
 }
 /* select的CSS */
 
+/* select dialog 的CSS */
+.pops-panel-select[data-mode="dialog"] {
+}
+/* select dialog 的CSS */
+
+/* select horizontal 的CSS */
+.pops-panel-select[data-mode="horizontal"] {
+  --pops-panel-components-select-horizontal-selected-text-color: #626aef;
+  --pops-panel-components-select-horizontal-selected-bg-color: #eff0fd;
+}
+.pops-panel-select[data-mode="horizontal"] .el-select__wrapper {
+  padding: 0;
+  gap: 0;
+  border: 0;
+}
+.pops-panel-select[data-mode="horizontal"] .select-item {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid var(--el-border-color);
+  height: -moz-available;
+  height: -webkit-fill-available;
+  border-left: 0;
+}
+.pops-panel-select[data-mode="horizontal"] .select-item:hover {
+  color: var(--el-color-primary);
+}
+.pops-panel-select[data-mode="horizontal"] .select-item:first-child {
+  border-left: 1px solid var(--el-border-color);
+  border-top-left-radius: var(--el-border-radius-base);
+  border-bottom-left-radius: var(--el-border-radius-base);
+}
+.pops-panel-select[data-mode="horizontal"] .select-item:last-child {
+  border-top-right-radius: var(--el-border-radius-base);
+  border-bottom-right-radius: var(--el-border-radius-base);
+}
+.pops-panel-select[data-mode="horizontal"] .select-item.select__selected-item {
+  color: var(--pops-panel-components-select-horizontal-selected-text-color);
+  background-color: var(--pops-panel-components-select-horizontal-selected-bg-color);
+  border-color: var(--pops-panel-components-select-horizontal-selected-bg-color);
+}
+.pops-panel-select[data-mode="horizontal"] .select-item:has(+ .select__selected-item) {
+  border-right: 0;
+}
+.pops-panel-select[data-mode="horizontal"] .select-item[disabled] {
+  color: var(--pops-panel-components-select-disabled-text-color);
+  --pops-panel-components-select-horizontal-selected-text-color: var(
+    --pops-panel-components-select-disabled-text-color
+  );
+  cursor: not-allowed;
+  background: unset;
+}
+/* select horizontal 的CSS */
+
 /* select-multiple的CSS*/
-.pops-panel-select-multiple {
+.pops-panel-select-multiple,
+.pops-panel-select {
   --el-border-radius-base: 4px;
   --el-fill-color-blank: #ffffff;
   --el-transition-duration: 0.3s;
@@ -910,6 +1015,7 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
   --el-color-white: #ffffff;
   width: 200px;
 }
+.pops-panel-select .el-select__wrapper,
 .pops-panel-select-multiple .el-select__wrapper {
   display: flex;
   align-items: center;
@@ -929,9 +1035,11 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
   transform: translateZ(0);
   border: 1px solid var(--el-border-color);
 }
+.pops-panel-select .el-select__wrapper.is-focused,
 .pops-panel-select-multiple .el-select__wrapper.is-focused {
   --el-border-color: var(--el-color-primary);
 }
+.pops-panel-select .el-select__selection,
 .pops-panel-select-multiple .el-select__selection {
   position: relative;
   display: flex;
@@ -941,6 +1049,16 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
   min-width: 0;
   gap: 6px;
 }
+.pops-panel-select .el-select__selection[data-selected-text-align="left"] {
+  justify-content: left;
+}
+.pops-panel-select .el-select__selection[data-selected-text-align="center"] {
+  justify-content: center;
+}
+.pops-panel-select .el-select__selection[data-selected-text-align="right"] {
+  justify-content: right;
+}
+.pops-panel-select .el-select__selected-item,
 .pops-panel-select-multiple .el-select__selected-item {
   display: flex;
   flex-wrap: wrap;
@@ -949,15 +1067,24 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
   -ms-user-select: none;
   user-select: none;
 }
+.pops-panel-select .el-select__selected-item span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.pops-panel-select .el-select__selected-item.el-select__choose_tag .el-tag,
 .pops-panel-select-multiple .el-select__selected-item.el-select__choose_tag .el-tag {
   max-width: 200px;
 }
+.pops-panel-select .el-select__input-wrapper,
 .pops-panel-select-multiple .el-select__input-wrapper {
   max-width: 100%;
 }
+.pops-panel-select .el-select__selection.is-near,
 .pops-panel-select-multiple .el-select__selection.is-near {
   margin-left: -8px;
 }
+.pops-panel-select .el-select__placeholder,
 .pops-panel-select-multiple .el-select__placeholder {
   position: absolute;
   display: block;
@@ -969,6 +1096,7 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
   white-space: nowrap;
   color: var(--el-input-text-color, var(--el-text-color-regular));
 }
+.pops-panel-select .el-select__placeholder.is-transparent,
 .pops-panel-select-multiple .el-select__placeholder.is-transparent {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -976,6 +1104,8 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
   user-select: none;
   color: var(--el-text-color-placeholder);
 }
+.pops-panel-select .el-select__prefix,
+.pops-panel-select .el-select__suffix,
 .pops-panel-select-multiple .el-select__prefix,
 .pops-panel-select-multiple .el-select__suffix {
   display: flex;
@@ -984,6 +1114,7 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
   gap: 6px;
   color: var(--el-input-icon-color, var(--el-text-color-placeholder));
 }
+.pops-panel-select .el-icon,
 .pops-panel-select-multiple .el-icon {
   --color: inherit;
   height: 1em;
@@ -998,10 +1129,12 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
   color: var(--color);
   font-size: inherit;
 }
+.pops-panel-select .el-icon svg,
 .pops-panel-select-multiple .el-icon svg {
   height: 1em;
   width: 1em;
 }
+.pops-panel-select .el-select__caret,
 .pops-panel-select-multiple .el-select__caret {
   color: var(--el-select-input-color);
   font-size: var(--el-select-input-font-size);
@@ -1010,6 +1143,7 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
   cursor: pointer;
 }
 /* 把箭头旋转 */
+.pops-panel-select[data-show-option] .el-select__caret,
 .pops-panel-select-multiple[data-show-option] .el-select__caret {
   transform: rotate(180deg);
 }
@@ -1085,19 +1219,20 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.pops-panel-select-multiple-disable {
+/* 禁用样式 */
+.pops-panel-select-disable {
   --el-fill-color-blank: #f5f7fa;
   --color: #a8abb2;
   --el-border-color: #cbcbcb;
 }
-.pops-panel-select-multiple-disable .el-tag.el-tag--info {
+.pops-panel-select-disable .el-tag.el-tag--info {
   --el-tag-bg-color: #e7e7e7;
   --el-tag-text-color: var(--pops-components-is-disabled-text-color);
 }
-.pops-panel-select-multiple-disable .el-select__selection .el-tag,
-.pops-panel-select-multiple-disable .el-tag .el-tag__close:hover,
-.pops-panel-select-multiple-disable .el-select__wrapper,
-.pops-panel-select-multiple-disable .el-select__caret {
+.pops-panel-select-disable .el-select__selection .el-tag,
+.pops-panel-select-disable .el-tag .el-tag__close:hover,
+.pops-panel-select-disable .el-select__wrapper,
+.pops-panel-select-disable .el-select__caret {
   cursor: not-allowed;
 }
 /* select-multiple的CSS*/
@@ -1146,8 +1281,8 @@ section.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-d
 section.pops-panel-deepMenu-container .pops-panel-container-header-ul li.pops-panel-deepMenu-container-header {
   display: flex;
   align-items: center;
-  width: -webkit-fill-available;
   width: -moz-available;
+  width: -webkit-fill-available;
   padding: var(--pops-panel-forms-header-padding-top-bottom)
     calc(
       var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right) -

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

@@ -6,7 +6,7 @@ import type { PopsIconType } from "../../../types/icon";
  */
 export interface PopsPanelButtonConfig extends PopsPanelGeneralConfig<PopsPanelButtonConfig> {
   /**
-   * 类型
+   * 组件类型
    */
   type: "button";
   /**

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

@@ -6,7 +6,7 @@ import type { PopsPanelViewConfig } from ".";
  */
 export interface PopsPanelContainerConfig extends PopsPanelGeneralConfig<PopsPanelContainerConfig> {
   /**
-   * 类型
+   * 组件类型
    */
   type: "container";
   /**

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

@@ -6,7 +6,7 @@ import type { PopsPanelGeneralConfig } from "./components-common";
  */
 export interface PopsPanelDeepViewConfig extends PopsPanelGeneralConfig<PopsPanelDeepViewConfig> {
   /**
-   * 类型
+   * 组件类型
    */
   type: "deepMenu";
   /**

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

@@ -1,13 +1,47 @@
 import type { PopsPanelGeneralConfig } from "./components-common";
 
+/**
+ * pops.panel的input的字符串type类型
+ */
+export type PopsPanelInputStringType = "text" | "color" | "search" | "email" | "tel" | "url";
+/**
+ * pops.panel的input的日期type类型
+ */
+export type PopsPanelInputDateType = "date" | "datetime-local" | "time" | "month" | "week";
+/**
+ * pops.panel的input的数字ype类型
+ */
+export type PopsPanelInputNumberType = "number";
+/**
+ * pops.panel的input的密码type类型
+ */
+export type PopsPanelInputPasswordType = "password";
+/**
+ * pops.panel的input的文件type类型
+ */
+export type PopsPanelInputFileType = "file";
+/**
+ * pops.panel的input的type类型
+ */
+export type PopsPanelInputType =
+  | PopsPanelInputStringType
+  | PopsPanelInputDateType
+  | PopsPanelInputNumberType
+  | PopsPanelInputPasswordType
+  | PopsPanelInputFileType;
 /**
  * pops.panel的 input
  */
 export interface PopsPanelInputConfig extends PopsPanelGeneralConfig<PopsPanelInputConfig> {
   /**
-   * 类型
+   * 组件类型
    */
   type: "input";
+  /**
+   * （可选）输入框类型
+   * @default "text"
+   */
+  inputType?: PopsPanelInputType;
   /**
    * 显示在左边的文字
    */
@@ -24,32 +58,33 @@ export interface PopsPanelInputConfig extends PopsPanelGeneralConfig<PopsPanelIn
   disabled?: boolean | (() => boolean);
   /**
    * 获取该项的值的回调函数
+   *
+   * 组件初始化后会调用一次，用于初始话默认值
    */
-  getValue(): string;
+  getValue(): string | number | Date;
   /**
    * 输入框的值改变触发的回调函数
    * @param event 输入事件
    * @param value 输入框的值
-   * @param valueAsNumber 当isNumber为true时，有该值，它可能是NaN
+   * @param valueAsNumber 如果inputType为number或日期类型，存在该值，类型为number（可能为isNaN），否则为undefined
+   * @param valueAsDate 如果inputType为日期类型，存在该值，类型为Date（可能为null），否则为undefined
    */
-  callback(event: InputEvent, value: string, valueAsNumber?: number): void;
+  callback(
+    event: InputEvent,
+    value: string,
+    valueAsNumber?: number,
+    valueAsDate?: Date | null
+  ): void | {
+    valid: boolean;
+    message?: string;
+  };
   /**
    * （可选）输入框内的提示
    * @default ""
    */
   placeholder?: string;
   /**
-   * （可选）是否是密码框
-   * @default false
-   */
-  isPassword?: boolean;
-  /**
-   * （可选）是否是数字框
-   * @default false
-   */
-  isNumber?: boolean;
-  /**
-   * （可选）自己调用的处理回调函数
+   * （可选）初始化后调用的回调函数
    */
-  handlerCallBack?(liElement: HTMLLIElement, inputElement: HTMLInputElement): void;
+  handlerCallBack?($li: HTMLLIElement, $input: HTMLInputElement): void;
 }

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

@@ -6,11 +6,11 @@ import type { PopsPanelGeneralConfig } from "./components-common";
  */
 export interface PopsPanelOwnConfig extends PopsPanelGeneralConfig<PopsPanelOwnConfig> {
   /**
-   * 类型
+   * 组件类型
    */
   type: "own";
   /**
-   * 获取自定义<li>标签元素
+   * 生成<li>标签元素
    */
-  getLiElementCallBack: (liElement: HTMLLIElement) => HTMLLIElement;
+  createLIElement($li: HTMLLIElement): HTMLLIElement;
 }

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

@@ -1,13 +1,105 @@
 import type { PopsPanelGeneralConfig } from "./components-common";
 import type { PopsPanelContainerConfig } from "./components-container";
 import type { PopsPanelViewConfig } from ".";
+import type { PopsAlertConfig } from "../../alert/types";
+export type PopsPanelSelectMode = "native" | "dialog" | "horizontal";
 
+/**
+ * 分组配置
+ *
+ * 用在mode="dialog"里
+ */
+export type PopsPanelSelectDialogGroupOption<T> = {
+  /**
+   * 是否是分组
+   * @default false
+   *
+   * + true 这时候text的值是显示的分组名，value是可以忽略的
+   */
+  isGroup?: boolean;
+  /**
+   * 分组内部选择是否是单选
+   * @default false
+   */
+  isSingleSelect?: boolean;
+  /**
+   * 分组数据列表
+   *
+   * 该数据仅在mode === "dialog"下生效
+   * @default []
+   */
+  groupDataOptions?: IFunction<Omit<PopsPanelSelectDataOption<T>, keyof PopsPanelSelectDialogGroupOption<T>>[]>;
+};
+/**
+ * 选择项的配置数据
+ */
+export type PopsPanelSelectDataOption<T> = {
+  /**
+   * 真正的值
+   */
+  value: T;
+  /**
+   * 显示的文字
+   */
+  text:
+    | string
+    | ((
+        /** 当前的值 */
+        value: T,
+        /**当前选中的配置信息 */
+        selectedInfo?: PopsPanelSelectDataOption<T>
+      ) => string);
+  /**
+   * 显示的文字是否是html
+   * @default false
+   */
+  isHTML?: boolean;
+  /**
+   * （可选）是否禁用项
+   * 触发条件：
+   * + 点击select元素
+   * + select元素触发change事件
+   * @param value 当前的值
+   * @param selectedInfo 当前选中的配置信息
+   */
+  disable?(value: T, selectedInfo?: PopsPanelSelectDataOption<T>): boolean;
+  /**
+   * 子配置，跟随切换改变
+   *
+   * 选中项后，根据配置添加到页面中
+   */
+  views?: IFunction<(PopsPanelContainerConfig | PopsPanelViewConfig)[]>;
+  /**
+   * （可选）是否是自定义输入的内容
+   * @default false
+   */
+  addCustomInput?: boolean;
+  /**
+   * （可选）自定义输入内容存储的key
+   *
+   * 该属性内部未做处理，仅为传递作用
+   */
+  customInputStoreKey?: string;
+  /**
+   * （可选）校验自定义输入内容
+   * @default () => {valid: true}
+   */
+  onValid?(dataOption: PopsPanelSelectDataOption<T>): {
+    /**
+     *
+     * + true: 校验通过
+     * + false: 校验失败，阻止关闭弹窗
+     */
+    valid: boolean;
+    message?: string;
+  };
+};
 /**
  * pops.panel的 select
  */
-export interface PopsPanelSelectConfig<T = any> extends PopsPanelGeneralConfig<PopsPanelSelectConfig> {
+export interface PopsPanelSelectConfig<T = any> extends PopsPanelGeneralConfig<PopsPanelSelectConfig<T>> {
   /**
-   * 类型
+   * 组件类型
    */
   type: "select";
   /**
@@ -23,48 +115,55 @@ export interface PopsPanelSelectConfig<T = any> extends PopsPanelGeneralConfig<P
    * （可选）是否禁用
    * @default false
    */
-  disabled?: boolean | (() => boolean);
+  disabled?: IFunction<boolean>;
+  /**
+   * 提示文字
+   */
+  placeholder?: IFunction<string>;
+  /**
+   * 已选中文字的显示文字的对齐方式
+   *
+   * 也包括提示文字的对齐方式
+   * @default "left"
+   */
+  selectedTextAlign?: "left" | "center" | "right";
   /**
    * 获取该项的值的回调函数
    */
   getValue(): T;
   /**
    * 选择器的值改变触发的回调函数
-   * @param event 事件
-   * @param isSelectedValue 当前选中的值，也就是元素属性上的__value__
-   * @param isSelectedText 当前选中的文本
+   * @param isSelectedInfo 当前已选中的信息，可能为空
    */
-  callback?(event: PointerEvent | TouchEvent, isSelectedValue: T, isSelectedText: string): void;
+  callback?(isSelectedInfo?: PopsPanelSelectDataOption<T>): void;
   /**
    * 点击select元素触发该回调
    * @param event 点击事件
    * @param selectElement 当前的select元素
+   * @returns
+   * + false 阻止更新状态
    */
-  clickCallBack?(event: PointerEvent | MouseEvent, selectElement: HTMLSelectElement): void;
+  clickCallBack?(
+    event: PointerEvent | MouseEvent,
+    /** 当前已选中的信息 */
+    isSelectedInfo: PopsPanelSelectDataOption<T>
+  ): void | boolean;
   /**
-   * 选择器内的数据组
+   * 选择列表内的数据
    */
-  data: {
-    /**
-     * 真正的值
-     */
-    value: T;
-    /**
-     * 显示的文字
-     */
-    text: string;
-    /**
-     * （可选）是否禁用项
-     * 触发条件：
-     * + 点击select元素
-     * + select元素触发change事件
-     */
-    disable?(value: T): boolean;
-    /**
-     * 子配置，跟随切换改变
-     */
-    views?:
-      | (PopsPanelContainerConfig | PopsPanelViewConfig)[]
-      | (() => (PopsPanelContainerConfig | PopsPanelViewConfig)[]);
-  }[];
+  data: IFunction<PopsPanelSelectDataOption<T>[]>;
+  /**
+   * 显示模式
+   * @default "native"
+   */
+  mode?: PopsPanelSelectMode;
+  /**
+   * 宽度
+   * @default "200px"
+   */
+  width?: number | string;
+  /**
+   * 弹出的下拉列表弹窗的配置
+   */
+  selectConfirmDialogConfig?: Partial<PopsAlertConfig>;
 }