@whitesev/pops 2.4.6 → 2.4.7

package/src/components/prompt/index.ts

@@ -0,0 +1,216 @@
+import { GlobalConfig } from "../../config/GlobalConfig";
+import { PopsElementHandler } from "../../handler/PopsElementHandler";
+import { PopsHandler } from "../../handler/PopsHandler";
+import { PopsCSS } from "../../PopsCSS";
+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";
+
+export const PopsPrompt = {
+  init(details: PopsPromptDetails) {
+    const guid = popsUtils.getRandomGUID();
+    // 设置当前类型
+    const popsType: PopsType = "prompt";
+
+    let config = PopsPromptConfig();
+    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: "promptCSS",
+        css: PopsCSS.promptCSS,
+      },
+    ]);
+
+    // 先把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 { 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="${contentPStyle}">${
+              config.content.row
+                ? '<textarea name="pops-input-text" pops="" placeholder="' +
+                  config.content.placeholder +
+                  '"></textarea>'
+                : '<input name="pops-input-text" pops="" placeholder="' +
+                  config.content.placeholder +
+                  '" type="' +
+                  (config.content.password ? "password" : "text") +
+                  '">'
+            }</div>${bottomBtnHTML}`,
+      bottomBtnHTML,
+      zIndex
+    );
+    /**
+     * 弹窗的主元素，包括动画层
+     */
+
+    const $anim = PopsElementHandler.parseElement<HTMLDivElement>(animHTML);
+
+    const {
+      popsElement: $pops,
+      inputElement: $input,
+      headerCloseBtnElement: $btnClose,
+      btnOkElement: $btnOk,
+      btnCancelElement: $btnCancel,
+      btnOtherElement: $btnOther,
+      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
+    );
+    /* 输入框赋值初始值 */
+
+    $input!.value = config.content.text;
+    PopsHandler.handlePromptClickEvent(
+      "close",
+      $input!,
+      $btnClose!,
+      eventDetails,
+
+      config.btn.close!.callback!
+    );
+
+    PopsHandler.handlePromptClickEvent(
+      "ok",
+      $input!,
+      $btnOk!,
+      eventDetails,
+
+      config.btn.ok!.callback!
+    );
+    PopsHandler.handlePromptClickEvent(
+      "cancel",
+      $input!,
+      $btnCancel!,
+      eventDetails,
+
+      config.btn.cancel!.callback!
+    );
+
+    PopsHandler.handlePromptClickEvent(
+      "other",
+      $input!,
+      $btnOther!,
+      eventDetails,
+
+      config.btn.other!.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,
+      });
+    }
+    /* 设置自动获取焦点 */
+    if (config.content.focus) {
+      $input.focus();
+    }
+    /* 设置自动选中所有文字 */
+    if (config.content.select) {
+      $input.select();
+    }
+    const result = PopsHandler.handleResultDetails(eventDetails);
+    return result;
+  },
+};

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

@@ -0,0 +1,55 @@
+import type {
+  PopsTitleConfig,
+  PopsDragConfig,
+  PopsCommonConfig,
+  PopsMoreButtonConfig,
+} from "../../../types/components";
+
+/**
+ * pops.prompt
+ */
+export interface PopsPromptDetails
+  extends PopsTitleConfig,
+    PopsDragConfig,
+    PopsMoreButtonConfig<{
+      text: string;
+    }>,
+    PopsCommonConfig {
+  /**
+   * 内容配置
+   */
+  content: {
+    /**
+     * 内容文字
+     */
+    text: string;
+    /**
+     * 是否是密码
+     */
+    password?: boolean;
+    /**
+     * 是否支持多行输入
+     * @default false
+     */
+    row?: boolean;
+    /**
+     * 是否自动获取焦点
+     * @default true
+     */
+    focus?: boolean;
+    /**
+     * 是否自动选择输入框的所有文字
+     * @default false
+     */
+    select?: boolean;
+    /**
+     * 输入框内的提示文字
+     * @default ""
+     */
+    placeholder?: string;
+    /**
+     * （可选）文字的自定义CSS
+     */
+    style?: string;
+  };
+}

package/src/components/rightClickMenu/config.ts

@@ -0,0 +1,98 @@
+import { PopsIcon } from "../../PopsIcon";
+import type { PopsRightClickMenuDetails } from "./types";
+
+export const rightClickMenuConfig = (): DeepRequired<PopsRightClickMenuDetails> => {
+  return {
+    target: document.documentElement,
+    targetSelector: null,
+    data: [
+      {
+        icon: PopsIcon.getIcon("search")!,
+        iconIsLoading: false,
+        text: "搜索",
+        item: [],
+        callback(clickEvent, contextMenuEvent, liElement) {
+          console.log("点击：" + this.text, [clickEvent, contextMenuEvent, liElement]);
+        },
+      },
+      {
+        icon: PopsIcon.getIcon("documentCopy")!,
+        iconIsLoading: false,
+        text: "复制",
+        item: [],
+        callback(clickEvent, contextMenuEvent, liElement) {
+          console.log("点击：" + this.text, [clickEvent, contextMenuEvent, liElement]);
+        },
+      },
+      {
+        icon: PopsIcon.getIcon("delete")!,
+        text: "删除",
+        iconIsLoading: false,
+        item: [],
+        callback(clickEvent, contextMenuEvent, liElement) {
+          console.log("点击：" + this.text, [clickEvent, contextMenuEvent, liElement]);
+        },
+      },
+      {
+        icon: PopsIcon.getIcon("loading")!,
+        iconIsLoading: true,
+        text: "加载",
+        item: [],
+        callback(clickEvent, contextMenuEvent, liElement) {
+          console.log("点击：" + this.text, [clickEvent, contextMenuEvent, liElement]);
+          return false;
+        },
+      },
+      {
+        icon: PopsIcon.getIcon("elemePlus")!,
+        iconIsLoading: true,
+        text: "饿了么",
+        callback(clickEvent, contextMenuEvent, liElement) {
+          console.log("点击：" + this.text, [clickEvent, contextMenuEvent, liElement]);
+          return false;
+        },
+        item: [
+          {
+            icon: "",
+            iconIsLoading: false,
+            text: "处理文件",
+            item: [],
+            callback(clickEvent, contextMenuEvent, liElement) {
+              console.log("点击：" + this.text, [clickEvent, contextMenuEvent, liElement]);
+            },
+          },
+          {
+            icon: "",
+            iconIsLoading: false,
+            text: "其它处理",
+            callback(clickEvent, contextMenuEvent, liElement) {
+              console.log("点击：" + this.text, [clickEvent, contextMenuEvent, liElement]);
+            },
+            item: [
+              {
+                icon: PopsIcon.getIcon("view")!,
+                iconIsLoading: false,
+                text: "查看",
+                item: [],
+                callback(clickEvent, contextMenuEvent, liElement) {
+                  console.log("点击：" + this.text, [clickEvent, contextMenuEvent, liElement]);
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+    chileMenuLeftOrRightDistance: 0,
+    childMenuTopOrBottomDistance: 0,
+    useShadowRoot: true,
+    className: "",
+    isAnimation: false,
+    useScaleAnimation: true,
+    only: false,
+    zIndex: 10000,
+    preventDefault: true,
+    style: null,
+    beforeAppendToPageCallBack() {},
+  };
+};

package/src/components/rightClickMenu/index.css

@@ -0,0 +1,112 @@
+.pops-rightClickMenu {
+  --pops-right-context-color: #000000;
+  --pops-right-context-bg-color: rgb(255, 255, 255, 0.733);
+  --pops-right-context-backdrop-filter: blur(10px);
+  --pops-right-context-z-index: 10000;
+  --pops-right-context-bd-radius: 6px;
+  --pops-right-context-menu-shadow-color: rgb(114, 114, 114, 0.251);
+  --pops-right-context-menu-row-bd-radius: 6px;
+  --pops-right-context-menu-row-visited-color: rgb(0, 0, 0, 0.067);
+  --pops-right-context-menu-row-hover-color: rgb(0, 0, 0, 0.067);
+}
+.pops-rightClickMenu * {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  -webkit-tap-highlight-color: transparent;
+  scrollbar-width: thin;
+}
+.pops-rightClickMenu {
+  position: fixed;
+  z-index: var(--pops-right-context-z-index);
+  text-align: center;
+  border-radius: var(--pops-right-context-bd-radius);
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--pops-right-context-color);
+  background: var(--pops-right-context-bg-color);
+  box-shadow: 0 0.25rem 0.5rem 0.125rem var(--pops-right-context-menu-shadow-color);
+  -webkit-backdrop-filter: var(--pops-right-context-backdrop-filter);
+  backdrop-filter: var(--pops-right-context-backdrop-filter);
+}
+/* scale动画 */
+.pops-rightClickMenu-anim-scale {
+  transition:
+    opacity 150ms cubic-bezier(0.2, 0, 0.2, 1),
+    transform 150ms cubic-bezier(0.2, 0, 0.2, 1);
+  transform: scale(0.85);
+}
+.pops-rightClickMenu-anim-scale-open {
+  transform: scale(1);
+}
+.pops-rightClickMenu-anim-scale-not-open {
+  opacity: 0;
+}
+/* 展开动画 */
+.pops-rightClickMenu-anim-grid {
+  display: grid;
+  transition: 0.3s;
+  grid-template-rows: 0fr;
+}
+.pops-rightClickMenu-anim-show {
+  grid-template-rows: 1fr;
+}
+.pops-rightClickMenu-is-visited {
+  background: var(--pops-right-context-menu-row-visited-color);
+}
+i.pops-rightClickMenu-icon {
+  height: 1em;
+  width: 1em;
+  line-height: normal;
+  align-content: center;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  fill: currentColor;
+  color: inherit;
+  font-size: inherit;
+  margin-right: 6px;
+}
+i.pops-rightClickMenu-icon[is-loading="true"] {
+  animation: rotating 2s linear infinite;
+}
+.pops-rightClickMenu li:hover {
+  background: var(--pops-right-context-menu-row-hover-color);
+  cursor: pointer;
+}
+.pops-rightClickMenu ul {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  overflow: hidden;
+}
+.pops-rightClickMenu ul li {
+  padding: 5px 10px;
+  margin: 5px 5px;
+  border-radius: var(--pops-right-context-menu-row-bd-radius);
+  display: flex;
+  width: -webkit-fill-available;
+  width: -moz-available;
+  text-align: left;
+  align-items: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  /*.pops-rightClickMenu {
+		--pops-right-context-menu-shadow-color: #3c3c3c;
+	}*/
+}
+@media (hover: hover) {
+  .pops-rightClickMenu ul li:active {
+    transform: scale(0.98);
+  }
+}