@whitesev/pops 2.6.1 → 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,17 +1074,24 @@ 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);
-  transition: var(--el-transition-duration);
+  transition: transform var(--el-transition-duration);
   transform: rotate(0);
   cursor: pointer;
 }
+/* 把箭头旋转 */
+.pops-panel-select[data-show-option] .el-select__caret,
+.pops-panel-select-multiple[data-show-option] .el-select__caret {
+  transform: rotate(180deg);
+}
 .pops-panel-select-multiple .el-tag {
   --el-tag-font-size: 12px;
   --el-tag-border-radius: 4px;
@@ -1081,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/index.ts

@@ -3,35 +3,22 @@ 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 type { PopsPanelConfig, PopsPanelEventType } from "./types";
+import { PopsPanelDefaultConfig } from "./defaultConfig";
 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) {
+  init(__config__: PopsPanelConfig) {
     const guid = popsUtils.getRandomGUID();
     // 设置当前类型
     const popsType: PopsType = "panel";
 
-    let config: Required<PopsPanelDetails> = PopsPanelConfig();
+    let config: Required<PopsPanelConfig> = PopsPanelDefaultConfig();
     config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-    config = popsUtils.assign(config, details);
-    if (details) {
-      if (Array.isArray(details.content)) {
-        // 存在内容配置
-        config.content = details.content;
-      }
-      if (Array.isArray(details.bottomContentConfig)) {
-        // 存在底部配置
-        config.bottomContentConfig = details.bottomContentConfig;
-      } else {
-        // 不存在底部配置 清空默认的
-        config.bottomContentConfig = [];
-      }
-    }
+    config = popsUtils.assign(config, __config__);
     config = PopsHandler.handleOnly(popsType, config);
 
     const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
@@ -109,7 +96,7 @@ export const PopsPanel = {
      * 弹窗的主元素，包括动画层
      */
     const $anim = PopsElementHandler.parseElement<HTMLDivElement>(animHTML);
-    /* 结构元素 */
+    // 结构元素
     const {
       $pops,
       $headerBtnClose,
@@ -135,7 +122,7 @@ export const PopsPanel = {
      */
     const $elList: HTMLElement[] = [$anim];
 
-    /* 遮罩层元素 */
+    // 遮罩层元素
     if (config.mask.enable) {
       const handleMask = PopsHandler.handleMask({
         type: popsType,
@@ -148,7 +135,7 @@ export const PopsPanel = {
       $elList.push($mask);
     }
 
-    /* 处理返回的配置 */
+    // 处理返回的配置
     const evtConfig = PopsHandler.handleEventConfig(
       config,
       guid,
@@ -159,16 +146,16 @@ export const PopsPanel = {
       $pops,
       $mask
     );
-    /* 为顶部右边的关闭按钮添加点击事件 */
+    // 为顶部右边的关闭按钮添加点击事件
     PopsHandler.handleClickEvent("close", $headerBtnClose, evtConfig, config.btn?.close?.callback);
 
-    /* 创建到页面中 */
+    // 创建到页面中
     popsDOMUtils.append($shadowRoot, $elList);
     if (typeof config.beforeAppendToPageCallBack === "function") {
       config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
     }
     popsDOMUtils.appendBody($shadowContainer);
-    /* 追加遮罩层元素 */
+    // 追加遮罩层元素
     if ($mask != null) {
       $anim.after($mask);
     }
@@ -193,13 +180,13 @@ export const PopsPanel = {
 
     PopsHandler.handlePush(popsType, {
       guid: guid,
-      animElement: $anim,
-      popsElement: $pops,
-      maskElement: $mask!,
+      $anim: $anim,
+      $pops: $pops,
+      $mask: $mask!,
       $shadowContainer: $shadowContainer,
       $shadowRoot: $shadowRoot,
     });
-    /* 拖拽 */
+    // 拖拽
     if (config.drag) {
       PopsInstanceUtils.drag($pops, {
         dragElement: $title,

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

@@ -1,10 +1,14 @@
-import type { PopsPanelCommonDetails } from "./components-common";
+import type { PopsPanelGeneralConfig } from "./components-common";
 import type { PopsButtonStyleType } from "../../../types/button";
 import type { PopsIconType } from "../../../types/icon";
 /**
  * pops.panel的 button
  */
-export interface PopsPanelButtonDetails extends PopsPanelCommonDetails<PopsPanelButtonDetails> {
+export interface PopsPanelButtonConfig extends PopsPanelGeneralConfig<PopsPanelButtonConfig> {
+  /**
+   * 组件类型
+   */
+  type: "button";
   /**
    * 显示在左边的文字
    */
@@ -13,12 +17,9 @@ export interface PopsPanelButtonDetails extends PopsPanelCommonDetails<PopsPanel
    * （可选）左边的文字下面的描述
    */
   description?: string;
-  /**
-   * 类型
-   */
-  type: "button";
   /**
    * （可选）是否禁用
+   * @default false
    */
   disable?: boolean;
   /**

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

@@ -1,10 +1,10 @@
-import type { PopsPanelFormsDetails } from "./components-forms";
-import type { PopsPanelFormsTotalDetails } from ".";
+import type { PopsPanelContainerConfig } from "./components-container";
+import type { PopsPanelViewConfig } from ".";
 
 /**
  * 右侧容器的配置
  */
-export interface PopsPanelRightAsideContainerOptions {
+export interface PopsPanelRightAsideContainerConfig {
   /** 当前的<li>元素 */
   target: HTMLLIElement | undefined;
   /** 当前的<li>元素的父<ul>元素 */
@@ -19,7 +19,7 @@ export interface PopsPanelRightAsideContainerOptions {
 /**
  * 通用配置
  */
-export interface PopsPanelCommonDetails<T extends PopsPanelFormsTotalDetails | PopsPanelFormsDetails> {
+export interface PopsPanelGeneralConfig<T extends PopsPanelViewConfig | PopsPanelContainerConfig> {
   /**
    * （可选）元素的className，值为空的话就不设置
    * @default ""
@@ -45,11 +45,11 @@ export interface PopsPanelCommonDetails<T extends PopsPanelFormsTotalDetails | P
       };
   /**
      * 在添加到<ul>元素后触发该回调
-     * @param formConfig 配置
+     * @param viewConfig 配置
      * @param container 右侧容器的元素
      * @example
      * // 例如在type为own时
-     * afterAddToUListCallBack(formConfig, container) {
+     * afterAddToUListCallBack(viewConfig, container) {
      * DOMUtils.on(
         container.formHeaderDivElement.querySelector(
         "a"
@@ -69,5 +69,5 @@ export interface PopsPanelCommonDetails<T extends PopsPanelFormsTotalDetails | P
      * // 例如在type为forms时
      * container内只有container.ulElement这个属性
      */
-  afterAddToUListCallBack?: (formConfig: T, container: PopsPanelRightAsideContainerOptions) => void;
+  afterAddToUListCallBack?: (viewConfig: T, container: PopsPanelRightAsideContainerConfig) => void;
 }

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

@@ -0,0 +1,25 @@
+import type { PopsPanelGeneralConfig } from "./components-common";
+import type { PopsPanelViewConfig } from ".";
+
+/**
+ * pops.panel的 container
+ */
+export interface PopsPanelContainerConfig extends PopsPanelGeneralConfig<PopsPanelContainerConfig> {
+  /**
+   * 组件类型
+   */
+  type: "container";
+  /**
+   * 显示在左边的文字
+   */
+  text: string;
+  /**
+   * 是否进行折叠
+   * @default false
+   */
+  isFold?: boolean;
+  /**
+   * 子配置
+   */
+  views: PopsPanelViewConfig[];
+}

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

@@ -1,12 +1,12 @@
-import type { PopsPanelFormsTotalDetails } from ".";
-import type { PopsPanelFormsDetails } from "./components-forms";
-import type { PopsPanelCommonDetails } from "./components-common";
+import type { PopsPanelViewConfig } from ".";
+import type { PopsPanelContainerConfig } from "./components-container";
+import type { PopsPanelGeneralConfig } from "./components-common";
 /**
- * pops.panel的 深层菜单
+ * pops.panel的 深层视图的配置
  */
-export interface PopsPanelDeepMenuDetails extends PopsPanelCommonDetails<PopsPanelDeepMenuDetails> {
+export interface PopsPanelDeepViewConfig extends PopsPanelGeneralConfig<PopsPanelDeepViewConfig> {
   /**
-   * 类型
+   * 组件类型
    */
   type: "deepMenu";
   /**
@@ -34,29 +34,29 @@ export interface PopsPanelDeepMenuDetails extends PopsPanelCommonDetails<PopsPan
    */
   clickCallBack?: (
     event: MouseEvent | PointerEvent,
-    formConfig: PopsPanelDeepMenuDetails
+    viewConfig: PopsPanelDeepViewConfig
   ) => boolean | void | Promise<boolean | void>;
   /**
    * 进入深层菜单后触发的回调
-   * @param formConfig
+   * @param viewConfig
    */
   afterEnterDeepMenuCallBack?: (
-    formConfig: PopsPanelDeepMenuDetails,
+    viewConfig: PopsPanelDeepViewConfig,
     container: {
       /** 右侧的总容器 */
-      sectionContainer: HTMLElement;
+      $sectionContainer: HTMLElement;
       /** 右侧的总容器的标题头容器 */
-      sectionContainerHeaderContainer: HTMLUListElement;
+      $sectionContainerHeaderContainer: HTMLUListElement;
       /** 右侧的总容器的标题头 */
-      sectionContainerHeader: HTMLLIElement;
+      $sectionContainerHeader: HTMLLIElement;
       /** 右侧的内容容器 */
-      sectionBodyContainer: HTMLUListElement;
+      $sectionBodyContainer: HTMLUListElement;
     }
   ) => void;
   /**
    * 菜单配置
    */
-  forms?: (PopsPanelFormsDetails | PopsPanelFormsTotalDetails)[];
+  views?: (PopsPanelContainerConfig | PopsPanelViewConfig)[];
   /**
    * （可选）头部的标题文字，没有的话默认是text
    */

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

@@ -1,9 +1,47 @@
-import type { PopsPanelCommonDetails } from "./components-common";
+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 PopsPanelInputDetails extends PopsPanelCommonDetails<PopsPanelInputDetails> {
+export interface PopsPanelInputConfig extends PopsPanelGeneralConfig<PopsPanelInputConfig> {
+  /**
+   * 组件类型
+   */
+  type: "input";
+  /**
+   * （可选）输入框类型
+   * @default "text"
+   */
+  inputType?: PopsPanelInputType;
   /**
    * 显示在左边的文字
    */
@@ -13,10 +51,6 @@ export interface PopsPanelInputDetails extends PopsPanelCommonDetails<PopsPanelI
    * @default ""
    */
   description?: string;
-  /**
-   * 类型
-   */
-  type: "input";
   /**
    * （可选）是否禁用
    * @default false
@@ -24,32 +58,33 @@ export interface PopsPanelInputDetails extends PopsPanelCommonDetails<PopsPanelI
   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

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