@whitesev/pops 3.2.1 → 3.3.0

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

@@ -1,73 +1,73 @@
-import type { PopsPanelContainerConfig } from "./components-container";
-import type { PopsPanelViewConfig } from ".";
-
-/**
- * 右侧容器的配置
- */
-export interface PopsPanelRightAsideContainerConfig {
-  /** 当前的<li>元素 */
-  target: HTMLLIElement | undefined;
-  /** 当前的<li>元素的父<ul>元素 */
-  ulElement: HTMLUListElement;
-  /** 当前的<li>元素所在的统一的<ul>元素 */
-  sectionContainerULElement?: HTMLUListElement;
-  /**  */
-  formContainerListElement?: HTMLLIElement;
-  /**  */
-  formHeaderDivElement?: HTMLElement | HTMLDivElement;
-}
-/**
- * 通用配置
- */
-export interface PopsPanelGeneralConfig<T extends PopsPanelViewConfig | PopsPanelContainerConfig> {
-  /**
-   * （可选）元素的className，值为空的话就不设置
-   * @default ""
-   */
-  className?: string | string[] | (() => string | string[]);
-  /**
-   * （可选）自定义元素属性
-   * @default {}
-   */
-  attributes?: {
-    [key: string]: any;
-  };
-  /**
-   * （可选）自定义属性
-   * @default {}
-   */
-  props?:
-    | {
-        [K in keyof HTMLElement]?: HTMLElement[K];
-      }
-    | {
-        [key: string]: any;
-      };
-  /**
-     * 在添加到<ul>元素后触发该回调
-     * @param viewConfig 配置
-     * @param container 右侧容器的元素
-     * @example
-     * // 例如在type为own时
-     * afterAddToUListCallBack(viewConfig, container) {
-     * DOMUtils.on(
-        container.formHeaderDivElement.querySelector(
-        "a"
-        ),
-        "click",
-        void 0,
-        () => {
-        PopsPanel.deleteValue("xxxx");
-        container.ulElement.querySelector(
-            "textarea"
-        ).value = xxxxx.defaultValue;
-        Qmsg.success("已重置");
-        }
-    );
-     * }
-     * 
-     * // 例如在type为forms时
-     * container内只有container.ulElement这个属性
-     */
-  afterAddToUListCallBack?: (viewConfig: T, container: PopsPanelRightAsideContainerConfig) => void;
-}
+import type { PopsPanelContainerConfig } from "./components-container";
+import type { PopsPanelViewConfig } from ".";
+
+/**
+ * 右侧容器的配置
+ */
+export interface PopsPanelRightAsideContainerConfig {
+  /** 当前的<li>元素 */
+  target: HTMLLIElement | undefined;
+  /** 当前的<li>元素的父<ul>元素 */
+  ulElement: HTMLUListElement;
+  /** 当前的<li>元素所在的统一的<ul>元素 */
+  sectionContainerULElement?: HTMLUListElement;
+  /**  */
+  formContainerListElement?: HTMLLIElement;
+  /**  */
+  formHeaderDivElement?: HTMLElement | HTMLDivElement;
+}
+/**
+ * 通用配置
+ */
+export interface PopsPanelGeneralConfig<T extends PopsPanelViewConfig | PopsPanelContainerConfig> {
+  /**
+   * （可选）元素的className，值为空的话就不设置
+   * @default ""
+   */
+  className?: string | string[] | (() => string | string[]);
+  /**
+   * （可选）自定义元素属性
+   * @default {}
+   */
+  attributes?: {
+    [key: string]: any;
+  };
+  /**
+   * （可选）自定义属性
+   * @default {}
+   */
+  props?:
+    | {
+        [K in keyof HTMLElement]?: HTMLElement[K];
+      }
+    | {
+        [key: string]: any;
+      };
+  /**
+     * 在添加到<ul>元素后触发该回调
+     * @param viewConfig 配置
+     * @param container 右侧容器的元素
+     * @example
+     * // 例如在type为own时
+     * afterAddToUListCallBack(viewConfig, container) {
+     * DOMUtils.on(
+        container.formHeaderDivElement.querySelector(
+        "a"
+        ),
+        "click",
+        void 0,
+        () => {
+        PopsPanel.deleteValue("xxxx");
+        container.ulElement.querySelector(
+            "textarea"
+        ).value = xxxxx.defaultValue;
+        Qmsg.success("已重置");
+        }
+    );
+     * }
+     * 
+     * // 例如在type为forms时
+     * container内只有container.ulElement这个属性
+     */
+  afterAddToUListCallBack?: (viewConfig: T, container: PopsPanelRightAsideContainerConfig) => void;
+}

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

@@ -1,25 +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[];
-}
+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,64 +1,64 @@
-import type { PopsPanelViewConfig } from ".";
-import type { PopsPanelContainerConfig } from "./components-container";
-import type { PopsPanelGeneralConfig } from "./components-common";
-/**
- * pops.panel的 深层视图的配置
- */
-export interface PopsPanelDeepViewConfig extends PopsPanelGeneralConfig<PopsPanelDeepViewConfig> {
-  /**
-   * 组件类型
-   */
-  type: "deepMenu";
-  /**
-   * 显示在左边的文字
-   */
-  text: string;
-  /**
-   * （可选）左边的文字下面的描述
-   */
-  description?: string;
-  /**
-   * （可选）右侧的文字
-   */
-  rightText?: string;
-  /**
-   * （可选）右侧的箭头图标，默认启用
-   */
-  arrowRightIcon?: boolean;
-  /**
-   * 点击整行触发的事件，可为异步函数
-   * @param event click事件
-   * @returns
-   * + true 表示阻止进入深层菜单
-   * + false （默认）表示允许进入深层菜单
-   */
-  clickCallBack?: (
-    event: MouseEvent | PointerEvent,
-    viewConfig: PopsPanelDeepViewConfig
-  ) => boolean | void | Promise<boolean | void>;
-  /**
-   * 进入深层菜单后触发的回调
-   * @param viewConfig
-   */
-  afterEnterDeepMenuCallBack?: (
-    viewConfig: PopsPanelDeepViewConfig,
-    container: {
-      /** 右侧的总容器 */
-      $sectionContainer: HTMLElement;
-      /** 右侧的总容器的标题头容器 */
-      $sectionContainerHeaderContainer: HTMLUListElement;
-      /** 右侧的总容器的标题头 */
-      $sectionContainerHeader: HTMLLIElement;
-      /** 右侧的内容容器 */
-      $sectionBodyContainer: HTMLUListElement;
-    }
-  ) => void;
-  /**
-   * 菜单配置
-   */
-  views?: (PopsPanelContainerConfig | PopsPanelViewConfig)[];
-  /**
-   * （可选）头部的标题文字，没有的话默认是text
-   */
-  headerTitle?: string;
-}
+import type { PopsPanelViewConfig } from ".";
+import type { PopsPanelContainerConfig } from "./components-container";
+import type { PopsPanelGeneralConfig } from "./components-common";
+/**
+ * pops.panel的 深层视图的配置
+ */
+export interface PopsPanelDeepViewConfig extends PopsPanelGeneralConfig<PopsPanelDeepViewConfig> {
+  /**
+   * 组件类型
+   */
+  type: "deepMenu";
+  /**
+   * 显示在左边的文字
+   */
+  text: string;
+  /**
+   * （可选）左边的文字下面的描述
+   */
+  description?: string;
+  /**
+   * （可选）右侧的文字
+   */
+  rightText?: string;
+  /**
+   * （可选）右侧的箭头图标，默认启用
+   */
+  arrowRightIcon?: boolean;
+  /**
+   * 点击整行触发的事件，可为异步函数
+   * @param event click事件
+   * @returns
+   * + true 表示阻止进入深层菜单
+   * + false （默认）表示允许进入深层菜单
+   */
+  clickCallBack?: (
+    event: MouseEvent | PointerEvent,
+    viewConfig: PopsPanelDeepViewConfig
+  ) => boolean | void | Promise<boolean | void>;
+  /**
+   * 进入深层菜单后触发的回调
+   * @param viewConfig
+   */
+  afterEnterDeepMenuCallBack?: (
+    viewConfig: PopsPanelDeepViewConfig,
+    container: {
+      /** 右侧的总容器 */
+      $sectionContainer: HTMLElement;
+      /** 右侧的总容器的标题头容器 */
+      $sectionContainerHeaderContainer: HTMLUListElement;
+      /** 右侧的总容器的标题头 */
+      $sectionContainerHeader: HTMLLIElement;
+      /** 右侧的内容容器 */
+      $sectionBodyContainer: HTMLUListElement;
+    }
+  ) => void;
+  /**
+   * 菜单配置
+   */
+  views?: (PopsPanelContainerConfig | PopsPanelViewConfig)[];
+  /**
+   * （可选）头部的标题文字，没有的话默认是text
+   */
+  headerTitle?: string;
+}

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

@@ -1,90 +1,90 @@
-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;
-  /**
-   * 显示在左边的文字
-   */
-  text: string;
-  /**
-   * （可选）左边的文字下面的描述
-   * @default ""
-   */
-  description?: string;
-  /**
-   * （可选）是否禁用
-   * @default false
-   */
-  disabled?: boolean | (() => boolean);
-  /**
-   * 获取该项的值的回调函数
-   *
-   * 组件初始化后会调用一次，用于初始话默认值
-   */
-  getValue(): string | number | Date;
-  /**
-   * 输入框的值改变触发的回调函数
-   * @param event 输入事件
-   * @param value 输入框的值
-   * @param valueAsNumber 如果inputType为number或日期类型，存在该值，类型为number（可能为isNaN），否则为undefined
-   * @param valueAsDate 如果inputType为日期类型，存在该值，类型为Date（可能为null），否则为undefined
-   */
-  callback(
-    event: InputEvent,
-    value: string,
-    valueAsNumber?: number,
-    valueAsDate?: Date | null
-  ): void | {
-    valid: boolean;
-    message?: string;
-  };
-  /**
-   * （可选）输入框内的提示
-   * @default ""
-   */
-  placeholder?: string;
-  /**
-   * （可选）初始化后调用的回调函数
-   */
-  handlerCallBack?($li: HTMLLIElement, $input: HTMLInputElement): void;
-}
+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;
+  /**
+   * 显示在左边的文字
+   */
+  text: string;
+  /**
+   * （可选）左边的文字下面的描述
+   * @default ""
+   */
+  description?: string;
+  /**
+   * （可选）是否禁用
+   * @default false
+   */
+  disabled?: boolean | (() => boolean);
+  /**
+   * 获取该项的值的回调函数
+   *
+   * 组件初始化后会调用一次，用于初始话默认值
+   */
+  getValue(): string | number | Date;
+  /**
+   * 输入框的值改变触发的回调函数
+   * @param event 输入事件
+   * @param value 输入框的值
+   * @param valueAsNumber 如果inputType为number或日期类型，存在该值，类型为number（可能为isNaN），否则为undefined
+   * @param valueAsDate 如果inputType为日期类型，存在该值，类型为Date（可能为null），否则为undefined
+   */
+  callback(
+    event: InputEvent,
+    value: string,
+    valueAsNumber?: number,
+    valueAsDate?: Date | null
+  ): void | {
+    valid: boolean;
+    message?: string;
+  };
+  /**
+   * （可选）输入框内的提示
+   * @default ""
+   */
+  placeholder?: string;
+  /**
+   * （可选）初始化后调用的回调函数
+   */
+  handlerCallBack?($li: HTMLLIElement, $input: HTMLInputElement): void;
+}

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

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