@whitesev/pops 3.0.0 → 3.0.1

package/src/components/panel/index.css

@@ -652,6 +652,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 +667,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,6 +725,25 @@ 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;
@@ -797,6 +825,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 */
@@ -890,8 +934,14 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
 }
 /* select的CSS */
 
+/* select useDialog的CSS */
+.pops-panel-select {
+}
+/* select useDialog的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 +960,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 +980,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 +994,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 +1012,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 +1041,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 +1049,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 +1059,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 +1074,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 +1088,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,6 +1164,7 @@ section.pops-panel-container .pops-panel-slider input[type="range"]::-moz-range-
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+/* 禁用样式 */
 .pops-panel-select-multiple-disable {
   --el-fill-color-blank: #f5f7fa;
   --color: #a8abb2;

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,75 @@
 import type { PopsPanelGeneralConfig } from "./components-common";
 import type { PopsPanelContainerConfig } from "./components-container";
 import type { PopsPanelViewConfig } from ".";
+import type { PopsAlertConfig } from "../../alert/types";
 
+export interface 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 +85,48 @@ 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元素
    */
-  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 false
+   */
+  useDialog?: boolean;
+  /**
+   * 弹出的下拉列表弹窗的配置
+   */
+  selectConfirmDialogConfig?: Partial<PopsAlertConfig>;
 }

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

@@ -35,9 +35,10 @@ export interface PopsPanelSelectMultipleDataOption<T> {
 /**
  * pops.panel的 select
  */
-export interface PopsPanelSelectMultipleConfig<T = any> extends PopsPanelGeneralConfig<PopsPanelSelectMultipleConfig> {
+export interface PopsPanelSelectMultipleConfig<T = any>
+  extends PopsPanelGeneralConfig<PopsPanelSelectMultipleConfig<T>> {
   /**
-   * 类型
+   * 组件类型
    */
   type: "select-multiple";
   /**
@@ -60,30 +61,20 @@ export interface PopsPanelSelectMultipleConfig<T = any> extends PopsPanelGeneral
    * 获取该项的值的回调函数
    */
   getValue(): T[];
-  /**
-   * 弹出的下拉列表弹窗的配置
-   */
-  selectConfirmDialogConfig?: Partial<PopsAlertConfig>;
   /**
    * 选择器的值改变触发的回调函数
-   * @param event 事件
-   * @param isSelectedValue 当前选中的值，也就是元素属性上的__value__
-   * @param isSelectedText 当前选中的文本
+   * @param isSelectedInfo 当前已选中的信息
    */
-  callback?(
-    /** 当前已选中的信息 */
-    isSelectedInfo: PopsPanelSelectMultipleDataOption<any>[]
-  ): void;
+  callback?(isSelectedInfo: PopsPanelSelectMultipleDataOption<T>[]): void;
   /**
    * 点击某个项的元素触发该回调
    * @param event 点击事件
-   * @param selectElement 当前的选中的元素
    * @returns 如果返回boolean为false，则不会触发默认的点击事件
    */
   clickCallBack?(
     event: PointerEvent | MouseEvent,
     /** 当前已选中的信息 */
-    isSelectedInfo: PopsPanelSelectMultipleDataOption<any>[]
+    isSelectedInfo: PopsPanelSelectMultipleDataOption<T>[]
   ): void | boolean;
   /**
    * 点击标签tag的关闭图标触发该回调
@@ -103,7 +94,11 @@ export interface PopsPanelSelectMultipleConfig<T = any> extends PopsPanelGeneral
     }
   ) => void | boolean;
   /**
-   * 选择器内的数据组
+   * 选择列表内的数据
    */
   data: PopsPanelSelectMultipleDataOption<T>[];
+  /**
+   * 弹出的下拉列表弹窗的配置
+   */
+  selectConfirmDialogConfig?: Partial<PopsAlertConfig>;
 }

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

@@ -5,8 +5,7 @@ import type { PopsPanelGeneralConfig } from "./components-common";
  */
 export interface PopsPanelSliderConfig extends PopsPanelGeneralConfig<PopsPanelSliderConfig> {
   /**
-   * 类型
-   * @default "slider"
+   * 组件类型
    */
   type: "slider";
   /**
@@ -39,7 +38,7 @@ export interface PopsPanelSliderConfig extends PopsPanelGeneralConfig<PopsPanelS
   /**
    * 获取tooltip的提示内容，可自定义，默认为slider的值
    */
-  getToolTipContent?: (value: number) => string;
+  getToolTipContent?(value: number): string;
   /**
    * 滑块的最小值
    */

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

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

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

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