@whitesev/pops 2.6.1 → 3.0.1

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

@@ -1,11 +1,77 @@
-import type { PopsPanelCommonDetails } from "./components-common";
-import type { PopsPanelFormsDetails } from "./components-forms";
-import type { PopsPanelFormsTotalDetails } from ".";
+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 PopsPanelSelectDetails<T = any> extends PopsPanelCommonDetails<PopsPanelSelectDetails> {
+export interface PopsPanelSelectConfig<T = any> extends PopsPanelGeneralConfig<PopsPanelSelectConfig<T>> {
+  /**
+   * 组件类型
+   */
+  type: "select";
   /**
    * 显示在左边的文字
    */
@@ -15,56 +81,52 @@ export interface PopsPanelSelectDetails<T = any> extends PopsPanelCommonDetails<
    * @default ""
    */
   description?: string;
-  /**
-   * 类型
-   */
-  type: "select";
   /**
    * （可选）是否禁用
    * @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;
-    /**
-     * 子配置，跟随切换改变
-     */
-    forms?:
-      | (PopsPanelFormsDetails | PopsPanelFormsTotalDetails)[]
-      | (() => (PopsPanelFormsDetails | PopsPanelFormsTotalDetails)[]);
-  }[];
+  data: IFunction<PopsPanelSelectDataOption<T>[]>;
+  /**
+   * 是否使用弹窗代替
+   * @default false
+   */
+  useDialog?: boolean;
+  /**
+   * 弹出的下拉列表弹窗的配置
+   */
+  selectConfirmDialogConfig?: Partial<PopsAlertConfig>;
 }

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

@@ -1,5 +1,5 @@
-import type { PopsAlertDetails } from "../../alert/types";
-import type { PopsPanelCommonDetails } from "./components-common";
+import type { PopsAlertConfig } from "../../alert/types";
+import type { PopsPanelGeneralConfig } from "./components-common";
 
 export interface PopsPanelSelectMultipleDataOption<T> {
   /**
@@ -35,8 +35,12 @@ export interface PopsPanelSelectMultipleDataOption<T> {
 /**
  * pops.panel的 select
  */
-export interface PopsPanelSelectMultipleDetails<T = any>
-  extends PopsPanelCommonDetails<PopsPanelSelectMultipleDetails> {
+export interface PopsPanelSelectMultipleConfig<T = any>
+  extends PopsPanelGeneralConfig<PopsPanelSelectMultipleConfig<T>> {
+  /**
+   * 组件类型
+   */
+  type: "select-multiple";
   /**
    * 显示在左边的文字
    */
@@ -45,10 +49,6 @@ export interface PopsPanelSelectMultipleDetails<T = any>
    * （可选）左边的文字下面的描述
    */
   description?: string;
-  /**
-   * 类型
-   */
-  type: "select-multiple";
   /**
    * （可选）是否禁用
    */
@@ -61,30 +61,20 @@ export interface PopsPanelSelectMultipleDetails<T = any>
    * 获取该项的值的回调函数
    */
   getValue(): T[];
-  /**
-   * 弹出的下拉列表弹窗的配置
-   */
-  selectConfirmDialogDetails?: Partial<PopsAlertDetails>;
   /**
    * 选择器的值改变触发的回调函数
-   * @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的关闭图标触发该回调
@@ -104,7 +94,11 @@ export interface PopsPanelSelectMultipleDetails<T = any>
     }
   ) => void | boolean;
   /**
-   * 选择器内的数据组
+   * 选择列表内的数据
    */
   data: PopsPanelSelectMultipleDataOption<T>[];
+  /**
+   * 弹出的下拉列表弹窗的配置
+   */
+  selectConfirmDialogConfig?: Partial<PopsAlertConfig>;
 }

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

@@ -1,9 +1,13 @@
-import type { PopsPanelCommonDetails } from "./components-common";
+import type { PopsPanelGeneralConfig } from "./components-common";
 
 /**
  * pops.panel的 slider
  */
-export interface PopsPanelSliderDetails extends PopsPanelCommonDetails<PopsPanelSliderDetails> {
+export interface PopsPanelSliderConfig extends PopsPanelGeneralConfig<PopsPanelSliderConfig> {
+  /**
+   * 组件类型
+   */
+  type: "slider";
   /**
    * 显示在左边的文字
    */
@@ -13,11 +17,6 @@ export interface PopsPanelSliderDetails extends PopsPanelCommonDetails<PopsPanel
    * @default ""
    */
   description?: string;
-  /**
-   * 类型
-   * @default "slider"
-   */
-  type: "slider";
   /**
    * （可选）是否禁用
    * @default false
@@ -39,7 +38,7 @@ export interface PopsPanelSliderDetails extends PopsPanelCommonDetails<PopsPanel
   /**
    * 获取tooltip的提示内容，可自定义，默认为slider的值
    */
-  getToolTipContent?: (value: number) => string;
+  getToolTipContent?(value: number): string;
   /**
    * 滑块的最小值
    */

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

@@ -1,9 +1,13 @@
-import type { PopsPanelCommonDetails } from "./components-common";
+import type { PopsPanelGeneralConfig } from "./components-common";
 
 /**
  * pops.panel的 switch
  */
-export interface PopsPanelSwitchDetails extends PopsPanelCommonDetails<PopsPanelSwitchDetails> {
+export interface PopsPanelSwitchConfig extends PopsPanelGeneralConfig<PopsPanelSwitchConfig> {
+  /**
+   * 组件类型
+   */
+  type: "switch";
   /**
    * 显示在左边的文字
    */
@@ -13,10 +17,6 @@ export interface PopsPanelSwitchDetails extends PopsPanelCommonDetails<PopsPanel
    * @default ""
    */
   description?: string;
-  /**
-   * 类型
-   */
-  type: "switch";
   /**
    * （可选）是否禁用
    * @default false

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

@@ -1,9 +1,13 @@
-import type { PopsPanelCommonDetails } from "./components-common";
+import type { PopsPanelGeneralConfig } from "./components-common";
 
 /**
  * pops.panel的 textarea
  */
-export interface PopsPanelTextAreaDetails extends PopsPanelCommonDetails<PopsPanelTextAreaDetails> {
+export interface PopsPanelTextAreaConfig extends PopsPanelGeneralConfig<PopsPanelTextAreaConfig> {
+  /**
+   * 组件类型
+   */
+  type: "textarea";
   /**
    * 显示在左边的文字
    */
@@ -13,10 +17,6 @@ export interface PopsPanelTextAreaDetails extends PopsPanelCommonDetails<PopsPan
    * @default ""
    */
   description?: string;
-  /**
-   * 类型
-   */
-  type: "textarea";
   /**
    * （可选）是否禁用
    * @default false

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

@@ -1,29 +1,34 @@
-import type { PopsTitleConfig, PopsDragConfig, PopsCommonConfig } from "../../../types/components";
-import type { PopsPanelFormsDetails } from "./components-forms";
-import type { PopsPanelSwitchDetails } from "./components-switch";
-import type { PopsPanelSliderDetails } from "./components-slider";
-import type { PopsPanelInputDetails } from "./components-input";
-import type { PopsPanelTextAreaDetails } from "./components-textarea";
-import type { PopsPanelSelectDetails } from "./components-select";
-import type { PopsPanelButtonDetails } from "./components-button";
-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 =
-  | PopsPanelSwitchDetails
-  | PopsPanelSliderDetails
-  | PopsPanelInputDetails
-  | PopsPanelTextAreaDetails
-  | PopsPanelSelectDetails<any>
-  | PopsPanelSelectMultipleDetails<any>
-  | PopsPanelButtonDetails
-  | PopsPanelDeepMenuDetails
-  | PopsPanelOwnDetails;
+import type { PopsTitleConfig, PopsDragConfig, PopsGeneralConfig } from "../../../types/components";
+import type { PopsPanelContainerConfig } from "./components-container";
+import type { PopsPanelSwitchConfig } from "./components-switch";
+import type { PopsPanelSliderConfig } from "./components-slider";
+import type { PopsPanelInputConfig } from "./components-input";
+import type { PopsPanelTextAreaConfig } from "./components-textarea";
+import type { PopsPanelSelectConfig } from "./components-select";
+import type { PopsPanelButtonConfig } from "./components-button";
+import type { PopsPanelDeepViewConfig } from "./components-deepMenu";
+import type { PopsPanelOwnConfig } from "./components-own";
+import type { PopsHeaderCloseButtonConfig } from "../../../types/button";
+import type { PopsPanelSelectMultipleConfig } from "./components-selectMultiple";
+import type { PopsPanelGeneralConfig } from "./components-common";
 
+/**
+ * panel的各种类型的配置项（不包括type="container"类型的）
+ */
+export type PopsPanelViewConfig =
+  | PopsPanelSwitchConfig
+  | PopsPanelSliderConfig
+  | PopsPanelInputConfig
+  | PopsPanelTextAreaConfig
+  | PopsPanelSelectConfig<any>
+  | PopsPanelSelectMultipleConfig<any>
+  | PopsPanelButtonConfig
+  | PopsPanelDeepViewConfig
+  | PopsPanelOwnConfig;
+/**
+ * panel的views配置项
+ */
+export type PopsPanelMainViewConfig = PopsPanelViewConfig | PopsPanelContainerConfig;
 /**
  * panel的内部事件
  */
@@ -33,9 +38,9 @@ export type PopsPanelEventType = {
    */
   "pops:renderRightContainer": {
     /**
-     * 菜单配置
+     * 视图配置
      */
-    formConfig: PopsPanelContentConfig[] | PopsPanelDeepMenuDetails;
+    viewConfig: PopsPanelContentConfig[] | PopsPanelDeepViewConfig;
   };
 };
 
@@ -51,7 +56,7 @@ export interface PopsPanelContentConfig {
    * （可选）元素的className，值为空的话就不设置
    * @default ""
    */
-  className?: PopsPanelCommonDetails<any>["className"];
+  className?: PopsPanelGeneralConfig<any>["className"];
   /**
    * 显示的文本，可以是html格式
    */
@@ -84,16 +89,18 @@ export interface PopsPanelContentConfig {
   scrollToDefaultView?: boolean;
   /**
    * （可选）自定义元素属性.setAttribute、.getAttribute
+   * @default {}
    */
-  attributes?: PopsPanelCommonDetails<any>["attributes"];
+  attributes?: PopsPanelGeneralConfig<any>["attributes"];
   /**
    * （可选）自定义元素内部的属性值
+   * @default {}
    */
-  props?: PopsPanelCommonDetails<any>["props"];
+  props?: PopsPanelGeneralConfig<any>["props"];
   /**
-   * 子配置
+   * 视图配置
    */
-  forms: (PopsPanelFormsDetails | PopsPanelFormsTotalDetails)[];
+  views: PopsPanelMainViewConfig[];
   /**
    * 左侧容器的点击回调（点击后第一个触发该回调）
    * @returns
@@ -138,7 +145,7 @@ export interface PopsPanelBottomContentConfig {
    * （可选）元素的className，值为空的话就不设置
    * @default ""
    */
-  className?: PopsPanelCommonDetails<any>["className"];
+  className?: PopsPanelGeneralConfig<any>["className"];
   /**
    * （可选）配置所在位置
    *
@@ -158,12 +165,12 @@ export interface PopsPanelBottomContentConfig {
    * （可选）自定义元素属性.setAttribute、.getAttribute
    * @default {}
    */
-  attributes?: PopsPanelCommonDetails<any>["attributes"];
+  attributes?: PopsPanelGeneralConfig<any>["attributes"];
   /**
    * （可选）自定义元素内部的属性值
    * @default {}
    */
-  props?: PopsPanelCommonDetails<any>["props"];
+  props?: PopsPanelGeneralConfig<any>["props"];
   /**
    * 该项的点击回调
    */
@@ -196,7 +203,7 @@ export interface PopsPanelBottomContentConfig {
 /**
  * pops.panel
  */
-export interface PopsPanelDetails extends PopsTitleConfig, PopsDragConfig, PopsCommonConfig {
+export interface PopsPanelConfig extends PopsTitleConfig, PopsDragConfig, PopsGeneralConfig {
   /**
    * 内容配置
    */
@@ -212,14 +219,14 @@ export interface PopsPanelDetails extends PopsTitleConfig, PopsDragConfig, PopsC
     /**
      * 关闭按钮
      */
-    close?: PopsHeaderCloseButtonDetails;
+    close?: PopsHeaderCloseButtonConfig;
   };
   /**
    * 移动端适配的的className
    *
    * @default "pops-panel-is-mobile"
    */
-  mobileClassName?: PopsPanelCommonDetails<any>["className"];
+  mobileClassName?: PopsPanelGeneralConfig<any>["className"];
   /**
    * 是否强制是移动端，默认false
    * + true 强制为移动端

package/src/components/prompt/{config.ts → defaultConfig.ts}

@@ -1,6 +1,6 @@
-import type { PopsPromptDetails } from "./types/index";
+import type { PopsPromptConfig } from "./types/index";
 
-export const PopsPromptConfig = (): DeepRequired<PopsPromptDetails> => {
+export const PopsPromptDefaultConfig = (): DeepRequired<PopsPromptConfig> => {
   return {
     title: {
       text: "默认标题",
@@ -30,8 +30,8 @@ export const PopsPromptConfig = (): DeepRequired<PopsPromptDetails> => {
         iconIsLoading: false,
         text: "确定",
         type: "success",
-        callback(detail) {
-          detail.close();
+        callback(eventConfig) {
+          eventConfig.close();
         },
       },
       cancel: {
@@ -42,8 +42,8 @@ export const PopsPromptConfig = (): DeepRequired<PopsPromptDetails> => {
         iconIsLoading: false,
         text: "关闭",
         type: "default",
-        callback(detail) {
-          detail.close();
+        callback(eventConfig) {
+          eventConfig.close();
         },
       },
       other: {
@@ -54,14 +54,14 @@ export const PopsPromptConfig = (): DeepRequired<PopsPromptDetails> => {
         iconIsLoading: false,
         text: "其它按钮",
         type: "default",
-        callback(detail) {
-          detail.close();
+        callback(eventConfig) {
+          eventConfig.close();
         },
       },
       close: {
         enable: true,
-        callback(detail) {
-          detail.close();
+        callback(eventConfig) {
+          eventConfig.close();
         },
       },
     },

package/src/components/prompt/index.ts

@@ -6,18 +6,18 @@ import type { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
-import { PopsPromptConfig } from "./config";
-import type { PopsPromptDetails } from "./types/index";
+import { PopsPromptDefaultConfig } from "./defaultConfig";
+import type { PopsPromptConfig } from "./types/index";
 
 export const PopsPrompt = {
-  init(details: PopsPromptDetails) {
+  init(__config__: PopsPromptConfig) {
     const guid = popsUtils.getRandomGUID();
     // 设置当前类型
     const popsType: PopsType = "prompt";
 
-    let config = PopsPromptConfig();
+    let config = PopsPromptDefaultConfig();
     config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-    config = popsUtils.assign(config, details);
+    config = popsUtils.assign(config, __config__);
     config = PopsHandler.handleOnly(popsType, config);
 
     const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
@@ -133,7 +133,7 @@ export const PopsPrompt = {
       $pops,
       $mask
     );
-    /* 输入框赋值初始值 */
+    // 输入框赋值初始值
 
     $input.value = config.content.text;
     PopsHandler.handlePromptClickEvent(
@@ -170,7 +170,7 @@ export const PopsPrompt = {
 
       config.btn.other.callback
     );
-    /* 创建到页面中 */
+    // 创建到页面中
 
     popsDOMUtils.append($shadowRoot, $elList);
     if (typeof config.beforeAppendToPageCallBack === "function") {
@@ -183,15 +183,13 @@ export const PopsPrompt = {
     }
     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!,
@@ -201,11 +199,11 @@ export const PopsPrompt = {
         endCallBack: config.dragEndCallBack,
       });
     }
-    /* 设置自动获取焦点 */
+    // 设置自动获取焦点
     if (config.content.focus) {
       $input.focus();
     }
-    /* 设置自动选中所有文字 */
+    // 设置自动选中所有文字
     if (config.content.select) {
       $input.select();
     }

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

@@ -1,20 +1,20 @@
 import type {
   PopsTitleConfig,
   PopsDragConfig,
-  PopsCommonConfig,
+  PopsGeneralConfig,
   PopsMoreButtonConfig,
 } from "../../../types/components";
 
 /**
  * pops.prompt
  */
-export interface PopsPromptDetails
+export interface PopsPromptConfig
   extends PopsTitleConfig,
     PopsDragConfig,
     PopsMoreButtonConfig<{
       text: string;
     }>,
-    PopsCommonConfig {
+    PopsGeneralConfig {
   /**
    * 内容配置
    */
@@ -49,6 +49,7 @@ export interface PopsPromptDetails
     placeholder?: string;
     /**
      * （可选）文字的自定义CSS
+     * @default ""
      */
     style?: string;
   };