@whitesev/pops 2.4.6 → 2.4.7

package/src/Pops.ts

@@ -0,0 +1,206 @@
+import { PopsAlert } from "./components/alert";
+import type { PopsAlertDetails } from "./components/alert/types";
+import { PopsConfirm } from "./components/confirm";
+import type { PopsConfirmDetails } from "./components/confirm/types";
+import { PopsDrawer } from "./components/drawer";
+import type { PopsDrawerDetails } from "./components/drawer/types";
+import { PopsFolder } from "./components/folder";
+import type { PopsFolderDetails } from "./components/folder/types";
+import { PopsIframe } from "./components/iframe";
+import type { PopsIframeDetails } from "./components/iframe/types";
+import { PopsLoading } from "./components/loading";
+import type { PopsLoadingDetails } from "./components/loading/types";
+import { PopsPanel } from "./components/panel";
+import { PanelHandlerComponents } from "./components/panel/handlerComponents";
+import type { PopsPanelDetails } from "./components/panel/types";
+import { PopsPrompt } from "./components/prompt";
+import type { PopsPromptDetails } from "./components/prompt/types/index";
+import { PopsRightClickMenu } from "./components/rightClickMenu";
+import type { PopsRightClickMenuDetails } from "./components/rightClickMenu/types";
+import { PopsSearchSuggestion } from "./components/searchSuggestion";
+import type { PopsSearchSuggestionDetails } from "./components/searchSuggestion/types/index";
+import { PopsTooltip } from "./components/tooltip";
+import type { PopsToolTipDetails } from "./components/tooltip/types/index";
+import { GlobalConfig } from "./config/GlobalConfig";
+import { PopsAnimation } from "./PopsAnimation";
+import { PopsCore } from "./PopsCore";
+import { PopsCSS } from "./PopsCSS";
+import { PopsIcon } from "./PopsIcon";
+import { PopsInstData } from "./PopsInst";
+import { popsDOMUtils } from "./utils/PopsDOMUtils";
+import { PopsInstanceUtils } from "./utils/PopsInstanceUtils";
+import { PopsMathFloatUtils } from "./utils/PopsMathUtils";
+import { popsUtils } from "./utils/PopsUtils";
+import { version } from "../package.json";
+
+class Pops {
+  /** 配置 */
+  config = {
+    /** 版本号 */
+    version: version,
+    cssText: PopsCSS,
+    /** icon图标的svg代码 */
+    iconSVG: PopsIcon.$data,
+    /** 当前已配置的动画@keyframes名字映射(初始化时生成) */
+    animation: PopsAnimation.$data,
+    /** 存储已创建的元素 */
+    instData: PopsInstData,
+    /** 禁止滚动 */
+    forbiddenScroll: {
+      event(event: Event) {
+        return popsDOMUtils.preventEvent(event);
+      },
+    },
+    /** pops使用的工具类 */
+    Utils: popsUtils,
+    /** pops使用的DOM工具类 */
+    DOMUtils: popsDOMUtils,
+    /** pops创建的实例使用的工具类 */
+    InstanceUtils: PopsInstanceUtils,
+    /** pops处理float类型使用的工具类 */
+    MathFloatUtils: PopsMathFloatUtils,
+    /** pops.panel中用于处理各个类型的工具 */
+    PanelHandlerComponents: PanelHandlerComponents,
+  };
+  init() {}
+  /**
+   * 释放原有的pops控制权
+   * @example
+   * let pops = window.pops.noConflict()
+   */
+  noConflict() {
+    if (typeof (PopsCore.globalThis as any).pops === "object") {
+      popsUtils.delete(PopsCore.globalThis, "pops");
+    }
+    if (typeof unsafeWindow === "object" && unsafeWindow != null && typeof (unsafeWindow as any).pops === "object") {
+      popsUtils.delete(unsafeWindow, "pops");
+    }
+    return new Pops();
+  }
+  /**
+   * 通过navigator.userAgent判断是否是手机访问
+   * @param userAgent
+   */
+  isPhone(userAgent?: string) {
+    return popsUtils.isPhone(userAgent);
+  }
+  /**
+   * 为所有弹窗设置全局属性
+   */
+  GlobalConfig = GlobalConfig;
+  /**
+   * 普通信息框
+   * @param details 配置
+   */
+  alert = (details: PopsAlertDetails) => {
+    const dialog = PopsAlert.init(details);
+    return dialog;
+  };
+
+  /**
+   * 询问框
+   * @param details 配置
+   */
+  confirm = (details: PopsConfirmDetails) => {
+    const dialog = PopsConfirm.init(details);
+    return dialog;
+  };
+
+  /**
+   * 输入框
+   * @param details 配置
+   */
+  prompt = (details: PopsPromptDetails) => {
+    const dialog = PopsPrompt.init(details);
+    return dialog;
+  };
+
+  /**
+   * 加载层
+   * @param details 配置
+   */
+  loading = (details: PopsLoadingDetails) => {
+    const popsLoading = PopsLoading.init(details);
+    return popsLoading;
+  };
+
+  /**
+   * iframe层
+   * @param details 配置
+   */
+  iframe = (details: PopsIframeDetails) => {
+    const dialog = PopsIframe.init(details);
+    return dialog;
+  };
+
+  /**
+   * 提示框
+   * @param details 配置
+   */
+  tooltip = (details: PopsToolTipDetails) => {
+    const popsTooltip = PopsTooltip.init(details);
+    return popsTooltip;
+  };
+
+  /**
+   * 抽屉
+   * @param details 配置
+   */
+  drawer = (details: PopsDrawerDetails) => {
+    const dialog = PopsDrawer.init(details);
+    return dialog;
+  };
+
+  /**
+   * 文件夹
+   * @param details 配置
+   */
+  folder = (details: PopsFolderDetails) => {
+    const dialog = PopsFolder.init(details);
+    return dialog;
+  };
+
+  /**
+   * 配置面板
+   * @param details 配置
+   */
+  panel = (details: PopsPanelDetails) => {
+    const dialog = PopsPanel.init(details);
+    return dialog;
+  };
+
+  /**
+   * 右键菜单
+   * @param details 配置
+   */
+  rightClickMenu = (details: PopsRightClickMenuDetails) => {
+    const popsRightClickMenu = PopsRightClickMenu.init(details);
+    return popsRightClickMenu;
+  };
+
+  /**
+   * 搜索建议
+   *
+   * 注意：调用后需要主动调用.init()和.setAllEvent()进行初始化
+   * @param details 配置
+   * @example
+   * let $input = document.querySelector("#input");
+   * let searchSuggestion = pops.searchSuggestion({
+   *     target: $input,
+   *     inputTarget: $input,
+   *     getItemHTML: function (item) {
+   *         return item.value;
+   *     }
+   * });
+   * searchSuggestion.init();
+   * searchSuggestion.setAllEvent();
+   */
+  searchSuggestion = <T = any>(details: PopsSearchSuggestionDetails<T>) => {
+    const popsSearchSuggestion = PopsSearchSuggestion.init<T>(details);
+    return popsSearchSuggestion;
+  };
+}
+
+const pops = new Pops();
+
+export { pops };

package/src/PopsAnimation.ts

@@ -0,0 +1,32 @@
+import { PopsCSS } from "./PopsCSS";
+import { popsDOMUtils } from "./utils/PopsDOMUtils";
+import { PopsSafeUtils } from "./utils/PopsSafeUtils";
+import { popsUtils } from "./utils/PopsUtils";
+
+export const PopsAnimation = {
+  $data: {} as { [key: string]: CSSKeyframesRule },
+  $flag: {
+    /** 是否初始化 */
+    isInit: false,
+  },
+  init() {
+    if (!this.$flag.isInit) {
+      this.$flag.isInit = true;
+      /* 处理获取当前所有的动画名 */
+      const animationStyle = document.createElement("style");
+      PopsSafeUtils.setSafeHTML(animationStyle, PopsCSS.anim);
+      popsDOMUtils.appendHead(animationStyle);
+      this.$data = null as any;
+      this.$data = popsDOMUtils.getKeyFrames(animationStyle.sheet!);
+      popsUtils.setTimeout(() => {
+        animationStyle.remove();
+      }, 50);
+    }
+  },
+  /**
+   * 判断是否存在某个动画名
+   */
+  hasAnim(name: string) {
+    return Object.prototype.hasOwnProperty.call(this.$data, name);
+  },
+};

package/src/PopsCSS.ts

@@ -0,0 +1,51 @@
+import indexCSS from "./css/index.css";
+import ninePalaceGridPositionCSS from "./css/ninePalaceGridPosition.css";
+import scrollbarCSS from "./css/scrollbar.css";
+import buttonCSS from "./css/button.css";
+import commonCSS from "./css/common.css";
+import animCSS from "./css/animation.css";
+import alertCSS from "./components/alert/index.css";
+import confirmCSS from "./components/confirm/index.css";
+import promptCSS from "./components/prompt/index.css";
+import loadingCSS from "./components/loading/index.css";
+import iframeCSS from "./components/iframe/index.css";
+import tooltipCSS from "./components/tooltip/index.css";
+import drawerCSS from "./components/drawer/index.css";
+import folderCSS from "./components/folder/index.css";
+import panelCSS from "./components/panel/index.css";
+import rightClickMenuCSS from "./components/rightClickMenu/index.css";
+
+export const PopsCSS = {
+  /** 主CSS */
+  index: indexCSS,
+  /** 九宫格位置CSS */
+  ninePalaceGridPosition: ninePalaceGridPositionCSS,
+  /** 滚动条CSS */
+  scrollbar: scrollbarCSS,
+  /** 按钮CSS */
+  button: buttonCSS,
+  /** 通用的CSS */
+  common: commonCSS,
+  /** 动画 */
+  anim: animCSS,
+  /** pops.alert */
+  alertCSS: alertCSS,
+  /** pops.cponfirm */
+  confirmCSS: confirmCSS,
+  /** pops.prompt */
+  promptCSS: promptCSS,
+  /** pops.loading */
+  loadingCSS: loadingCSS,
+  /** pops.iframe */
+  iframeCSS: iframeCSS,
+  /** pops.tooltip */
+  tooltipCSS: tooltipCSS,
+  /** pops.drawer */
+  drawerCSS: drawerCSS,
+  /** pops.folder */
+  folderCSS: folderCSS,
+  /** pops.folder */
+  panelCSS: panelCSS,
+  /** pops.rightClickMenu */
+  rightClickMenu: rightClickMenuCSS,
+};

package/src/PopsCore.ts

@@ -0,0 +1,64 @@
+interface PopsCoreOption {
+  document: Document;
+  window: Window;
+  globalThis: typeof globalThis;
+  self: typeof globalThis;
+  setTimeout: Window["setTimeout"];
+  setInterval: Window["setInterval"];
+  clearTimeout: Window["clearTimeout"];
+  clearInterval: Window["clearInterval"];
+}
+
+const PopsCoreDefaultEnv: PopsCoreOption = {
+  document: document,
+  window: window,
+  globalThis: globalThis,
+  self: self,
+  setTimeout: globalThis.setTimeout.bind(globalThis),
+  setInterval: globalThis.setInterval.bind(globalThis),
+  clearTimeout: globalThis.clearTimeout.bind(globalThis),
+  clearInterval: globalThis.clearInterval.bind(globalThis),
+};
+
+const PopsCoreEnv: PopsCoreOption = Object.assign({}, PopsCoreDefaultEnv);
+
+const PopsCore = {
+  init(option?: PopsCoreOption) {
+    if (!option) {
+      option = Object.assign({}, PopsCoreDefaultEnv);
+    }
+    Object.assign(PopsCoreEnv, option);
+  },
+  get document() {
+    return PopsCoreEnv.document;
+  },
+  get window() {
+    return PopsCoreEnv.window;
+  },
+  get globalThis() {
+    return PopsCoreEnv.globalThis;
+  },
+  get self() {
+    return PopsCoreEnv.self;
+  },
+  get setTimeout() {
+    return PopsCoreEnv.setTimeout;
+  },
+  get setInterval() {
+    return PopsCoreEnv.setInterval;
+  },
+  get clearTimeout() {
+    return PopsCoreEnv.clearTimeout;
+  },
+  get clearInterval() {
+    return PopsCoreEnv.clearInterval;
+  },
+};
+
+const OriginPrototype = {
+  Object: {
+    defineProperty: Object.defineProperty,
+  },
+};
+
+export { PopsCoreOption, PopsCore, OriginPrototype };

package/src/PopsIcon.ts

@@ -0,0 +1,95 @@
+import type { PopsIconType } from "./types/icon";
+import SVG_min from "./svg/min.svg";
+import SVG_mise from "./svg/mise.svg";
+import SVG_max from "./svg/max.svg";
+import SVG_close from "./svg/close.svg";
+import SVG_edit from "./svg/edit.svg";
+import SVG_share from "./svg/share.svg";
+import SVG_delete from "./svg/delete.svg";
+import SVG_search from "./svg/search.svg";
+import SVG_upload from "./svg/upload.svg";
+import SVG_loading from "./svg/loading.svg";
+import SVG_next from "./svg/next.svg";
+import SVG_prev from "./svg/prev.svg";
+import SVG_eleme from "./svg/eleme.svg";
+import SVG_elemePlus from "./svg/elemePlus.svg";
+import SVG_chromeFilled from "./svg/chromeFilled.svg";
+import SVG_cpu from "./svg/cpu.svg";
+import SVG_videoPlay from "./svg/videoPlay.svg";
+import SVG_videoPause from "./svg/videoPause.svg";
+import SVG_headset from "./svg/headset.svg";
+import SVG_monitor from "./svg/monitor.svg";
+import SVG_documentCopy from "./svg/documentCopy.svg";
+import SVG_picture from "./svg/picture.svg";
+import SVG_circleClose from "./svg/circleClose.svg";
+import SVG_view from "./svg/view.svg";
+import SVG_hide from "./svg/hide.svg";
+import SVG_keyboard from "./svg/keyboard.svg";
+import SVG_arrowRight from "./svg/arrowRight.svg";
+import SVG_arrowLeft from "./svg/arrowLeft.svg";
+
+const PopsIconData: {
+  [key in PopsIconType]: string;
+} = {
+  min: SVG_min,
+  mise: SVG_mise,
+  max: SVG_max,
+  close: SVG_close,
+  edit: SVG_edit,
+  share: SVG_share,
+  delete: SVG_delete,
+  search: SVG_search,
+  upload: SVG_upload,
+  loading: SVG_loading,
+  next: SVG_next,
+  prev: SVG_prev,
+  eleme: SVG_eleme,
+  elemePlus: SVG_elemePlus,
+  chromeFilled: SVG_chromeFilled,
+  cpu: SVG_cpu,
+  videoPlay: SVG_videoPlay,
+  videoPause: SVG_videoPause,
+  headset: SVG_headset,
+  monitor: SVG_monitor,
+  documentCopy: SVG_documentCopy,
+  picture: SVG_picture,
+  circleClose: SVG_circleClose,
+  view: SVG_view,
+  hide: SVG_hide,
+  keyboard: SVG_keyboard,
+  arrowRight: SVG_arrowRight,
+  arrowLeft: SVG_arrowLeft,
+};
+
+export const PopsIcon = {
+  $data: PopsIconData,
+  /**
+   * 判断是否存在某个icon
+   * @param iconName 图标名
+   */
+  hasIcon(iconName: string) {
+    return Object.keys(PopsIcon.$data).includes(iconName);
+  },
+  /**
+   * 获取icon
+   * @param iconName 图标名
+   */
+  getIcon(iconName: string): string | null {
+    return PopsIcon.$data[iconName as keyof typeof this.$data];
+  },
+  /**
+   * 删除图标
+   * @param iconName 图标名
+   */
+  deleteIcon(iconName: string) {
+    return Reflect.deleteProperty(PopsIcon.$data, iconName);
+  },
+  /**
+   * 设置图标
+   * @param iconName 图标名
+   * @param iconHTML 图标html
+   */
+  setIcon(iconName: string, iconHTML: string) {
+    Reflect.set(PopsIcon.$data, iconName, iconHTML);
+  },
+};

package/src/PopsInst.ts

@@ -0,0 +1,21 @@
+import type { PopsInstCommonConfig } from "./types/inst";
+import type { PopsInstStoreType } from "./types/main";
+
+/**
+ * 弹窗实例数据
+ */
+export const PopsInstData: {
+  [key in PopsInstStoreType]: PopsInstCommonConfig[];
+} = {
+  alert: [],
+  confirm: [],
+  drawer: [],
+  folder: [],
+  iframe: [],
+  loading: [],
+  panel: [],
+  prompt: [],
+  rightClickMenu: [],
+  // 没有 searchSuggestion
+  tooltip: [],
+};

package/src/components/alert/config.ts

@@ -0,0 +1,62 @@
+import type { PopsAlertDetails } from "./types";
+
+export const PopsAlertConfig = (): DeepRequired<PopsAlertDetails> => {
+  return {
+    title: {
+      text: "默认标题",
+      position: "left",
+      html: false,
+      style: "",
+    },
+    content: {
+      text: "默认内容",
+      html: false,
+      style: "",
+    },
+    btn: {
+      position: "flex-end",
+      ok: {
+        size: void 0 as any,
+        enable: true,
+        icon: void 0 as any,
+        rightIcon: false,
+        iconIsLoading: false,
+        text: "确定",
+        type: "primary",
+        callback: function (details: any) {
+          details.close();
+        },
+      },
+      close: {
+        enable: true,
+        callback: function (details: any) {
+          details.close();
+        },
+      },
+    },
+    useShadowRoot: true,
+    class: "",
+    only: false,
+    width: window.innerWidth < 550 ? "88vw" : "350px",
+    height: window.innerHeight < 450 ? "70vh" : "200px",
+    position: "center",
+    animation: "pops-anim-fadein-zoom",
+    zIndex: 10000,
+    mask: {
+      enable: false,
+      clickEvent: {
+        toClose: false,
+        toHide: false,
+      },
+      clickCallBack: null,
+    },
+    drag: false,
+    dragLimit: true,
+    dragExtraDistance: 3,
+    dragMoveCallBack() {},
+    dragEndCallBack() {},
+    forbiddenScroll: false,
+    style: null,
+    beforeAppendToPageCallBack() {},
+  } as DeepRequired<PopsAlertDetails>;
+};

package/src/components/alert/index.ts

@@ -0,0 +1,163 @@
+import { GlobalConfig } from "../../config/GlobalConfig";
+import { PopsElementHandler } from "../../handler/PopsElementHandler";
+import { PopsHandler } from "../../handler/PopsHandler";
+import { popsDOMUtils } from "../../utils/PopsDOMUtils";
+import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
+import { popsUtils } from "../../utils/PopsUtils";
+import { PopsAlertConfig } from "./config";
+import type { PopsType } from "../../types/main";
+import type { PopsAlertDetails } from "./types";
+import { PopsCSS } from "../../PopsCSS";
+
+export const PopsAlert = {
+  init(details: PopsAlertDetails) {
+    const guid = popsUtils.getRandomGUID();
+    // 设置当前类型
+    const popsType: PopsType = "alert";
+    let config = PopsAlertConfig();
+    config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
+    config = popsUtils.assign(config, details);
+    config = PopsHandler.handleOnly(popsType, config);
+
+    const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
+    PopsHandler.handleInit($shadowRoot, [
+      {
+        name: "index",
+        css: PopsCSS.index,
+      },
+      {
+        name: "ninePalaceGridPosition",
+        css: PopsCSS.ninePalaceGridPosition,
+      },
+      {
+        name: "scrollbar",
+        css: PopsCSS.scrollbar,
+      },
+      {
+        name: "button",
+        css: PopsCSS.button,
+      },
+      {
+        name: "anim",
+        css: PopsCSS.anim,
+      },
+      {
+        name: "common",
+        css: PopsCSS.common,
+      },
+      {
+        name: "alertCSS",
+        css: PopsCSS.alertCSS,
+      },
+    ]);
+
+    // 先把z-index提取出来
+    const zIndex = PopsHandler.handleZIndex(config.zIndex);
+    const maskHTML = PopsElementHandler.createMask(guid, zIndex);
+    const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
+    const bottomBtnHTML = PopsElementHandler.createBottom(popsType, config);
+    const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
+    const { contentStyle, contentPStyle } = PopsElementHandler.createContentStyle(popsType, config);
+    const animHTML = PopsElementHandler.createAnim(
+      guid,
+      popsType,
+      config,
+      /*html*/ `
+			<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${
+        config.title.html
+          ? config.title.text
+          : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`
+      }${headerBtnHTML}</div>
+			<div class="pops-content pops-${popsType}-content" style="${contentStyle}">${
+        config.content.html
+          ? config.content.text
+          : `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`
+      }</div>${bottomBtnHTML}`,
+      bottomBtnHTML,
+      zIndex
+    );
+    /**
+     * 弹窗的主元素，包括动画层
+     */
+    const $anim = PopsElementHandler.parseElement<HTMLDivElement>(animHTML);
+
+    const {
+      popsElement: $pops,
+      headerCloseBtnElement: $headerCloseBtn,
+      btnOkElement,
+      titleElement: $title,
+    } = PopsHandler.handleQueryElement($anim, popsType);
+
+    /** 遮罩层元素 */
+    let $mask: HTMLDivElement | null = null;
+    /** 已创建的元素列表 */
+    const elementList: HTMLElement[] = [$anim];
+
+    /* 遮罩层元素 */
+
+    if (config.mask.enable) {
+      const _handleMask_ = PopsHandler.handleMask({
+        type: popsType,
+        guid: guid,
+        config: config,
+        animElement: $anim,
+        maskHTML: maskHTML,
+      });
+      $mask = _handleMask_.maskElement;
+      elementList.push($mask);
+    }
+    /* 处理返回的配置 */
+    const eventDetails = PopsHandler.handleEventDetails(
+      guid,
+      $shadowContainer,
+      $shadowRoot,
+      popsType,
+      $anim,
+      $pops!,
+      $mask!,
+      config
+    );
+    /* 为顶部右边的关闭按钮添加点击事件 */
+    PopsHandler.handleClickEvent("close", $headerCloseBtn!, eventDetails, config.btn.close!.callback!);
+    /* 为底部ok按钮添加点击事件 */
+    PopsHandler.handleClickEvent("ok", btnOkElement!, eventDetails!, config.btn.ok!.callback!);
+
+    /* 创建到页面中 */
+
+    popsDOMUtils.append($shadowRoot, elementList);
+    if (typeof config.beforeAppendToPageCallBack === "function") {
+      config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
+    }
+
+    popsDOMUtils.appendBody($shadowContainer);
+    if ($mask != null) {
+      // 添加遮罩层
+      $anim.after($mask);
+    }
+    /* 保存 */
+    PopsHandler.handlePush(popsType, {
+      guid: guid,
+
+      animElement: $anim,
+
+      popsElement: $pops!,
+
+      maskElement: $mask!,
+      $shadowContainer: $shadowContainer,
+      $shadowRoot: $shadowRoot,
+    });
+    /* 拖拽 */
+    if (config.drag) {
+      PopsInstanceUtils.drag($pops!, {
+        dragElement: $title!,
+        limit: config.dragLimit,
+        extraDistance: config.dragExtraDistance!,
+        moveCallBack: config.dragMoveCallBack!,
+        endCallBack: config.dragEndCallBack!,
+      });
+    }
+
+    const result = PopsHandler.handleResultDetails(eventDetails);
+    return result;
+  },
+};