@whitesev/pops 2.4.6 → 2.5.0

package/src/types/components.d.ts

@@ -0,0 +1,210 @@
+import type { PopsAnimation } from "./animation";
+import type { PopsPosition, PopsTextAlign, PopsJustifyContent } from "./position";
+import type { PopsButtonDetails, PopsButtonDetailsAnyType, PopsHeaderCloseButtonDetails } from "./button";
+import type { PopsMaskDetails } from "./mask";
+
+/**
+ * 标题配置
+ */
+export interface PopsTitleConfig {
+  title: {
+    /**
+     * 标题文字
+     */
+    text?: string;
+    /**
+     * 标题文字的位置
+     * @default "left"
+     */
+    position?: PopsTextAlign;
+    /**
+     * 标题文字是否是html
+     * @default false
+     */
+    html?: boolean;
+    /**
+     * 自定义CSS
+     */
+    style?: string;
+  };
+}
+
+/**
+ * 内容配置
+ */
+export interface PopsContentConfig {
+  content: {
+    /**
+     * 内容文字
+     */
+    text?: string;
+    /**
+     * 内容文字是否是html
+     * @default false
+     */
+    html?: boolean;
+    /**
+     * 自定义CSS
+     */
+    style?: string;
+  };
+}
+/**
+ * 按钮配置
+ */
+export interface PopsButtonConfig {
+  btn?: {
+    /**
+     * 按钮的位置
+     * @default "flex-end"
+     */
+    position?: PopsJustifyContent;
+    /**
+     * 右上角的关闭按钮
+     */
+    close?: PopsHeaderCloseButtonDetails;
+  };
+}
+/**
+ * 按钮的其它配置
+ */
+export interface PopsMoreButtonConfig<T = object> {
+  btn?: PopsButtonConfig["btn"] & {
+    /**
+     * 是否合并按钮
+     * @default false
+     */
+    merge?: boolean;
+    /**
+     * 是否对合并的按钮逆反
+     * @default false
+     */
+    mergeReverse?: boolean;
+    /**
+     * 是否逆反
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * 确定按钮
+     */
+    ok?: Partial<PopsButtonDetails<T> | PopsButtonDetailsAnyType<T>>;
+    /**
+     * 取消按钮
+     */
+    cancel?: Partial<PopsButtonDetails<T> | PopsButtonDetailsAnyType<T>>;
+    /**
+     * 其他按钮
+     */
+    other?: Partial<PopsButtonDetails<T> | PopsButtonDetailsAnyType<T>>;
+  };
+}
+/**
+ * 拖拽(标题栏)的配置
+ */
+export interface PopsDragConfig {
+  /**
+   *  是否可以按钮标题栏进行拖拽，默认false
+   * @default false
+   */
+  drag?: boolean;
+  /**
+   * 是否限制拖拽在浏览器窗口内移动，默认true
+   * @default true
+   */
+  dragLimit?: boolean;
+  /**
+   * 当启用dragLimit时，该参数为弹窗在窗口中的距离边际的距离，默认为3(px)
+   * @default 3
+   */
+  dragExtraDistance?: number;
+  /**
+   * （可选）拖动中的回调
+   * @param moveElement 当前拖动的元素
+   * @param left 当前left值
+   * @param top 当前的top值
+   */
+  dragMoveCallBack?: (moveElement: HTMLElement, left: number, top: number) => void;
+  /**
+   * （可选）拖动结束的回调
+   * @param moveElement 当前拖动的元素
+   * @param left 当前left值
+   * @param top 当前的top值
+   */
+  dragEndCallBack?: (moveElement: HTMLElement, left: number, top: number) => void;
+}
+/**
+ * 通用配置
+ */
+export interface PopsCommonConfig {
+  /**
+   * 是否使用shadowRoot
+   *
+   * @default true
+   */
+  useShadowRoot?: boolean;
+  /**
+   * 自定义的className
+   *
+   * @default ""
+   */
+  class?: string;
+  /**
+   * 是否是唯一的
+   *
+   * @default false
+   */
+  only?: boolean;
+  /**
+   *  宽度
+   *
+   * @default "350px"
+   */
+  width: string;
+  /**
+   *  高度
+   *
+   * @default "200px"
+   */
+  height: string;
+  /**
+   * 位置
+   *
+   * @default "center"
+   */
+  position?: PopsPosition;
+  /**
+   * 动画
+   *
+   * @default "pops-anim-fadein-zoom"
+   */
+  animation?: PopsAnimation;
+  /**
+   * z-index显示层级
+   *
+   * @default 10000
+   */
+  zIndex?: number | (() => number);
+  /**
+   * 遮罩层
+   */
+  mask?: PopsMaskDetails;
+  /**
+   * 是否禁用页面滚动
+   *
+   * 暂时不会生效
+   *
+   * @default false
+   */
+  forbiddenScroll?: boolean;
+  /**
+   * （可选）自定义style
+   */
+  style?: string | null;
+  /**
+   * 在元素添加到页面前的事件
+   * @param $shadowRoot 根元素
+   * @param $shadowContainer 容器
+   */
+  beforeAppendToPageCallBack?: ($shadowRoot: ShadowRoot | HTMLElement, $shadowContainer: HTMLDivElement) => void;
+}

package/src/types/event.d.ts

@@ -0,0 +1,63 @@
+import type { PopsIframeDetails } from "../components/iframe/types";
+import type { PopsType } from "./main";
+
+/**
+ * 事件配置
+ */
+export interface PopsIframeEventDetails {
+  /**
+   * 唯一id
+   */
+  guid: string;
+  /**
+   * 当前弹窗类型
+   */
+  mode: PopsType;
+  /**
+   * 动画层
+   */
+  animElement: HTMLElement;
+  /**
+   * 主元素
+   */
+  popsElement: HTMLElement;
+  /**
+   * 遮罩层
+   */
+  maskElement: HTMLElement;
+  /**
+   * 当前配置
+   */
+  config: PopsIframeDetails;
+}
+/**
+ * 事件配置
+ */
+export interface PopsEventDetails {
+  /** 最外层包裹的元素 */
+  $shadowContainer: HTMLDivElement;
+  /** ShadowRoot */
+  $shadowRoot: ShadowRoot | HTMLElement;
+  /** -> 动画层 */
+  element: HTMLDivElement;
+  /** 动画层 */
+  animElement: HTMLDivElement;
+  /** 主元素 */
+  popsElement: HTMLDivElement;
+  /** 遮罩层 */
+  maskElement?: HTMLDivElement;
+  /** 当前弹窗类型 */
+  mode: PopsType;
+  guid: string;
+  close: () => Promise<void>;
+  hide: () => Promise<void>;
+  show: () => Promise<void>;
+}
+
+/**
+ * 处理过的事件配置
+ */
+export interface PopsHandlerEventDetails extends PopsEventDetails {
+  /** 当前按钮类型 */
+  type: "cancel" | "close" | "ok" | "other";
+}

package/src/types/global.d.ts

@@ -0,0 +1,25 @@
+declare module "*.css" {
+  const content: string;
+  export default content;
+}
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}
+
+declare let unsafeWindow: Window & typeof globalThis;
+
+declare interface Window {
+  trustedTypes: any;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+declare type DeepRequired<T> = T extends Function
+  ? T
+  : T extends object
+    ? T extends Node
+      ? T
+      : {
+          [K in keyof T]-?: DeepRequired<T[K]>;
+        }
+    : T;

package/src/types/icon.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 按钮svg图标
+ */
+export type PopsIconType =
+  | "min"
+  | "mise"
+  | "max"
+  | "close"
+  | "edit"
+  | "share"
+  | "delete"
+  | "search"
+  | "upload"
+  | "loading"
+  | "next"
+  | "prev"
+  | "eleme"
+  | "elemePlus"
+  | "chromeFilled"
+  | "cpu"
+  | "videoPlay"
+  | "videoPause"
+  | "headset"
+  | "monitor"
+  | "documentCopy"
+  | "picture"
+  | "circleClose"
+  | "view"
+  | "hide"
+  | "keyboard"
+  | "arrowRight"
+  | "arrowLeft";

package/src/types/inst.d.ts

@@ -0,0 +1,24 @@
+/**
+ * config实例配置
+ */
+export interface PopsInstConfig {
+  /** 固定id */
+  guid: string;
+  /** 动画元素 */
+  animElement: HTMLDivElement;
+  /** 主元素 */
+  popsElement: HTMLDivElement;
+  /** 遮罩层元素 */
+  maskElement?: HTMLDivElement;
+}
+/**
+ * config实例通用配置
+ */
+export interface PopsInstCommonConfig extends PopsInstConfig {
+  /** shadow容器 */
+  $shadowContainer: HTMLDivElement;
+  /** shadow容器的shandowRoot */
+  $shadowRoot: ShadowRoot | HTMLElement;
+  /** 移除实例前的回调函数 */
+  beforeRemoveCallBack?: (instCommonConfig: PopsInstCommonConfig) => void;
+}

package/src/types/main.d.ts

@@ -0,0 +1,111 @@
+import type { PopsAlertDetails } from "../components/alert/types";
+import type { PopsConfirmDetails } from "../components/confirm/types";
+import type { PopsDrawerDetails } from "../components/drawer/types";
+import type { PopsFolderDetails } from "../components/folder/types";
+import type { PopsIframeDetails } from "../components/iframe/types";
+import type { PopsLoadingDetails } from "../components/loading/types";
+import type { PopsPanelButtonDetails } from "../components/panel/types/components-button";
+import type { PopsPanelDeepMenuDetails } from "../components/panel/types/components-deepMenu";
+import type { PopsPanelDetails } from "../components/panel/types";
+import type { PopsPanelInputDetails } from "../components/panel/types/components-input";
+import type { PopsPanelOwnDetails } from "../components/panel/types/components-own";
+import type { PopsPanelSelectDetails } from "../components/panel/types/components-select";
+import type { PopsPanelSliderDetails } from "../components/panel/types/components-slider";
+import type { PopsPanelSwitchDetails } from "../components/panel/types/components-switch";
+import type { PopsPanelTextAreaDetails } from "../components/panel/types/components-textarea";
+import type { PopsPromptDetails } from "../components/prompt/types/index";
+import type { PopsRightClickMenuDetails } from "../components/rightClickMenu/types";
+import type { PopsToolTipDetails } from "../components/tooltip/types/index";
+import type { PopsSearchSuggestionDetails } from "../components/searchSuggestion/types";
+
+export interface PopsUtilsOwnObject<V> {
+  [key: string]: V | PopsUtilsOwnObject<V>;
+}
+
+/** pops所有的类型配置 11个*/
+export interface PopsDetails {
+  alert: PopsAlertDetails;
+  confirm: PopsConfirmDetails;
+  prompt: PopsPromptDetails;
+  loading: PopsLoadingDetails;
+  iframe: PopsIframeDetails;
+  tooltip: PopsToolTipDetails;
+  drawer: PopsDrawerDetails;
+  folder: PopsFolderDetails;
+  panel: PopsPanelDetails;
+  rightClickMenu: PopsRightClickMenuDetails;
+  searchSuggestion: PopsSearchSuggestionDetails;
+}
+
+/** pops的类型 */
+export type PopsType = keyof PopsDetails;
+
+/** pops中支持only的配置 */
+export type PopsSupportOnlyDetails = Omit<PopsDetails, "searchSuggestion">;
+
+/** 存储实例的类型 */
+export type PopsInstStoreType = keyof Omit<PopsDetails, "searchSuggestion">;
+
+/** pops弹窗支持动画元素的配置 8个 */
+export type PopsSupportAnimDetails = Omit<PopsDetails, "tooltip" | "rightClickMenu" | "searchSuggestion">;
+
+/** pops弹窗支持动画元素的类型 */
+export type PopsSupportAnimDetailsType = keyof PopsSupportAnimDetails;
+
+/** pops弹窗支持标题栏的配置 */
+export type PopsSupportHeaderTitleDetails = Pick<
+  PopsDetails,
+  "alert" | "confirm" | "prompt" | "iframe" | "drawer" | "folder" | "panel"
+>;
+
+/** pops弹窗支持标题栏的类型 */
+export type PopsSupportHeaderTitleDetailsType = keyof PopsSupportHeaderTitleDetails;
+
+/** pops支持底部按钮的配置 */
+export type PopsSupportBottomBtnDetails = Pick<PopsDetails, "alert" | "confirm" | "prompt" | "drawer">;
+
+/** pops支持底部按钮的类型 */
+export type PopsSupportBottomBtnDetailsType = keyof PopsSupportHeaderTitleDetails;
+
+/** pops支持中间内容的配置 */
+export type PopsSupportContentDetails = Pick<PopsDetails, "alert" | "confirm" | "prompt" | "drawer" | "loading">;
+
+/** pops支持中间内容的类型 */
+export type PopsSupportContentDetailsType = keyof PopsSupportContentDetails;
+
+/** panel的各种类型的配置项 */
+export type PopsPanelFormsTotalDetails =
+  | PopsPanelSwitchDetails
+  | PopsPanelSliderDetails
+  | PopsPanelInputDetails
+  | PopsPanelTextAreaDetails
+  | PopsPanelSelectDetails<any>
+  | PopsPanelButtonDetails
+  | PopsPanelDeepMenuDetails
+  | PopsPanelOwnDetails;
+
+/**
+ * pops.xxx的调用返回值
+ */
+export interface PopsCallResult {
+  /** 唯一标识id */
+  guid: string;
+  /** 影子元素 */
+  $shadowContainer: HTMLDivElement;
+  /** 影子元素的根节点 */
+  $shadowRoot: ShadowRoot | HTMLElement;
+  /** 元素 */
+  element: HTMLDivElement;
+  /** 动画层元素 */
+  animElement: HTMLDivElement;
+  /** pops元素 */
+  popsElement: HTMLDivElement;
+  /** 遮罩层元素 */
+  maskElement?: HTMLDivElement;
+  /** 关闭弹窗 */
+  close(): void;
+  /** 隐藏弹窗 */
+  hide(): void;
+  /** 显示弹窗 */
+  show(): void;
+}

package/src/types/mask.d.ts

@@ -0,0 +1,49 @@
+import type { PopsAlertDetails } from "../components/alert/types";
+import type { PopsDrawerDetails } from "../components/drawer/types";
+import type { PopsFolderDetails } from "../components/folder/types";
+import type { PopsIframeDetails } from "../components/iframe/types";
+import type { PopsLoadingDetails } from "../components/loading/types";
+import type { PopsPanelDetails } from "../components/panel/types";
+import type { PopsPromptDetails } from "../components/prompt/types/index";
+
+/**
+ * 遮罩层配置
+ */
+export interface PopsMaskDetails {
+  /**
+   * 是否启用遮罩层，默认false
+   * @default false
+   */
+  enable?: boolean;
+  clickEvent?: {
+    /**
+     * 点击遮罩层是否触发关闭事件
+     * @default false
+     */
+    toClose?: boolean;
+    /**
+     * 点击遮罩层是否触发隐藏事件
+     * @default false
+     */
+    toHide?: boolean;
+  };
+  /**
+   * 遮罩层自定义的点击事件
+   * @param originalRun 当toClose为true，它是关闭弹窗，当toHide为true，它是隐藏弹窗
+   * @param config 配置信息
+   */
+  clickCallBack?:
+    | ((
+        originalRun: () => void | Promise<void>,
+        config:
+          | PopsAlertDetails
+          | PopsDrawerDetails
+          | PopsIframeDetails
+          | PopsPromptDetails
+          | PopsFolderDetails
+          | PopsLoadingDetails
+          | PopsPanelDetails
+      ) => void)
+    | undefined
+    | null;
+}

package/src/types/position.d.ts

@@ -0,0 +1,60 @@
+/**
+ * 弹窗位置
+ */
+export type PopsPosition =
+  | "top_left"
+  | "top"
+  | "top_right"
+  | "center_left"
+  | "center"
+  | "center_right"
+  | "bottom_left"
+  | "bottom"
+  | "bottom_right";
+
+/**
+ * 按钮位置
+ */
+export type PopsJustifyContent =
+  | "center"
+  | "end"
+  | "flex-end"
+  | "flex-start"
+  | "left"
+  | "normal"
+  | "right"
+  | "space-around"
+  | "space-between"
+  | "space-evenly"
+  | "start"
+  | "stretch"
+  | "inherit"
+  | "initial"
+  | "revert"
+  | "revert-layer"
+  | "unset";
+
+/**
+ * text-align
+ */
+export type PopsTextAlign =
+  | "center"
+  | "end"
+  | "justify"
+  | "left"
+  | "right"
+  | "start"
+  | "-webkit-auto"
+  | "-moz-center-or-inherit"
+  | "-webkit-center"
+  | "-moz-center"
+  | "-webkit-left"
+  | "-moz-left"
+  | "-webkit-match-parent"
+  | "-webkit-right"
+  | "-moz-right"
+  | "inherit"
+  | "initial"
+  | "revert"
+  | "revert-layer"
+  | "unset";