@whitesev/pops 2.4.5 → 2.4.7

package/src/css/index.css

@@ -0,0 +1,253 @@
+@charset "utf-8";
+.pops * {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  -webkit-tap-highlight-color: transparent;
+  /* 代替::-webkit-scrollbar */
+  scrollbar-width: thin;
+}
+.pops {
+  --pops-bg-opacity: 1;
+  --pops-bd-opacity: 1;
+  --pops-font-size: 16px;
+  interpolate-size: allow-keywords;
+  --pops-color: #000000;
+  --pops-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
+  --pops-bd-color: rgb(235, 238, 245, var(--pops-bd-opacity));
+  --pops-box-shadow-color: rgba(0, 0, 0, 0.12);
+  --pops-title-color: #000000;
+  --pops-title-border-color: var(--pops-bd-color);
+  --pops-content-color: #000000;
+  --pops-bottom-btn-controls-border-color: var(--pops-bd-color);
+  --pops-components-is-disabled-text-color: #a8abb2;
+  --pops-components-is-disabled-bg-color: #f5f7fa;
+}
+@media (prefers-color-scheme: dark) {
+  .pops {
+    --pops-mask-bg-opacity: 0.8;
+    --pops-color: #ffffff;
+    --pops-bg-color: rgb(17, 17, 17, var(--pops-bg-opacity));
+    --pops-bd-color: rgb(55, 55, 55, var(--pops-bd-opacity));
+    --pops-box-shadow-color: rgba(81, 81, 81, 0.12);
+    --pops-title-color: #e8e8e8;
+    --pops-title-border-color: var(--pops-bd-color);
+    --pops-content-color: #e5e5e5;
+    --pops-components-is-disabled-text-color: #a8abb2;
+    --pops-components-is-disabled-bg-color: #262727;
+  }
+}
+.pops {
+  color: var(--pops-color);
+  background-color: var(--pops-bg-color);
+  border: 1px solid var(--pops-bd-color);
+  border-radius: 4px;
+  font-size: var(--pops-font-size);
+  line-height: normal;
+  box-shadow: 0 0 12px var(--pops-box-shadow-color);
+  box-sizing: border-box;
+  overflow: hidden;
+  transition: all 0.35s;
+  display: flex;
+  flex-direction: column;
+}
+.pops-anim {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.pops-anim[anim=""] {
+  top: unset;
+  right: unset;
+  bottom: unset;
+  left: unset;
+  width: unset;
+  height: unset;
+  transition: none;
+}
+/* 底部图标动画和样式 */
+.pops i.pops-bottom-icon[is-loading="true"] {
+  animation: rotating 2s linear infinite;
+}
+.pops i.pops-bottom-icon {
+  height: 1em;
+  width: 1em;
+  line-height: normal;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  fill: currentColor;
+  color: inherit;
+  font-size: inherit;
+}
+
+/* 遮罩层样式 */
+.pops-mask {
+  --pops-mask-bg-opacity: 0.4;
+  --pops-mask-bg-color: rgba(0, 0, 0, var(--pops-mask-bg-opacity));
+}
+.pops-mask {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  border-radius: 0;
+  background-color: var(--pops-mask-bg-color);
+  box-shadow: none;
+  transition: none;
+}
+
+.pops-header-controls button.pops-header-control[type][data-header] {
+  float: right;
+  margin: 0 0;
+  outline: 0;
+  border: 0;
+  border-color: rgb(136, 136, 136, var(--pops-bd-opacity));
+  background-color: transparent;
+  color: #888;
+  cursor: pointer;
+}
+.pops-header-controls button.pops-header-control[data-type="max"],
+.pops-header-controls button.pops-header-control[data-type="mise"],
+.pops-header-controls button.pops-header-control[data-type="min"] {
+  outline: 0 !important;
+  border: 0;
+  border-color: rgb(136, 136, 136, var(--pops-bd-opacity));
+  background-color: transparent;
+  color: rgb(136, 136, 136);
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+}
+button.pops-header-control i {
+  color: rgb(144, 147, 153);
+  font-size: inherit;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  fill: currentColor;
+}
+button.pops-header-control svg {
+  height: 1.25em;
+  width: 1.25em;
+}
+button.pops-header-control {
+  right: 15px;
+  padding: 0;
+  border: none;
+  outline: 0;
+  background: 0 0;
+  cursor: pointer;
+  position: unset;
+  line-height: normal;
+}
+button.pops-header-control i:hover {
+  color: rgb(64, 158, 255);
+}
+.pops-header-controls[data-margin] button.pops-header-control {
+  margin: 0 6px;
+  display: flex;
+  align-items: center;
+}
+.pops[type-value] .pops-header-controls {
+  display: flex;
+  gap: 6px;
+}
+
+/* 代码块 <code> */
+.pops code {
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-size: 0.85em;
+  color: #000;
+  background-color: #f0f0f0;
+  border-radius: 3px;
+  border: 0;
+  padding: 0.2em 0;
+  white-space: normal;
+  background: #f5f5f5;
+  text-wrap: wrap;
+  text-align: left;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.4;
+  -moz-tab-size: 8;
+  -o-tab-size: 8;
+  tab-size: 8;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+  direction: ltr;
+}
+
+.pops code::before,
+.pops code::after {
+  letter-spacing: -0.2em;
+  content: "\00a0";
+}
+
+/* 标题 */
+.pops .pops-title {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--pops-title-border-color);
+  width: 100%;
+  height: var(--container-title-height);
+}
+/* 标题-普通文本 */
+.pops .pops-title p[pops] {
+  color: var(--pops-title-color);
+  width: 100%;
+  overflow: hidden;
+  text-indent: 15px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+  line-height: normal;
+}
+
+/* 内容 */
+.pops .pops-content {
+  width: 100%;
+  /*height: calc(
+		100% - var(--container-title-height) - var(--container-bottom-btn-height)
+	);*/
+  flex: 1;
+  overflow: auto;
+  word-break: break-word;
+}
+/* 内容-普通文本 */
+.pops .pops-content p[pops] {
+  color: var(--pops-content-color);
+  padding: 5px 10px;
+  text-indent: 15px;
+}
+
+/* 底部-按钮组 */
+.pops .pops-botttom-btn-controls {
+  display: flex;
+  padding: 10px 10px 10px 10px;
+  width: 100%;
+  height: var(--container-bottom-btn-height);
+  max-height: var(--container-bottom-btn-height);
+  line-height: normal;
+  border-top: 1px solid var(--pops-bottom-btn-controls-border-color);
+  text-align: right;
+  align-items: center;
+}

package/src/css/ninePalaceGridPosition.css

@@ -0,0 +1,50 @@
+.pops[position="top_left"] {
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+.pops[position="top"] {
+  position: fixed;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.pops[position="top_right"] {
+  position: fixed;
+  top: 0;
+  right: 0;
+}
+.pops[position="center_left"] {
+  position: fixed;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+}
+.pops[position="center"] {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.pops[position="center_right"] {
+  position: fixed;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+}
+.pops[position="bottom_left"] {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+}
+.pops[position="bottom"] {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+.pops[position="bottom_right"] {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+}

package/src/css/scrollbar.css

@@ -0,0 +1,22 @@
+/* ::-webkit-scrollbar 是非标准的css */
+/* https://caniuse.com/?search=%20%3A%3A-webkit-scrollbar */
+.pops ::-webkit-scrollbar {
+  width: 6px;
+  height: 0;
+}
+
+/* 滚动条轨道 */
+.pops ::-webkit-scrollbar-track {
+  width: 0;
+}
+/* 滚动条滑块 */
+.pops ::-webkit-scrollbar-thumb {
+  min-height: 28px;
+  border-radius: 2em;
+  background: rgb(204, 204, 204, var(--pops-bg-opacity, 1));
+  background-clip: padding-box;
+}
+/* 滚动条滑块 */
+.pops ::-webkit-scrollbar-thumb:hover {
+  background: rgb(178, 178, 178, var(--pops-bg-opacity, 1));
+}

package/src/handler/PopsElementHandler.ts

@@ -0,0 +1,304 @@
+import type { PopsAlertDetails } from "../components/alert/types";
+import type { PopsConfirmDetails } from "../components/confirm/types";
+import type { PopsIframeDetails } from "../components/iframe/types";
+import type { PopsIconType } from "../types/icon";
+import type {
+  PopsSupportAnimDetails,
+  PopsSupportBottomBtnDetails,
+  PopsSupportContentDetails,
+  PopsSupportHeaderTitleDetails,
+  PopsSupportAnimDetailsType,
+  PopsSupportBottomBtnDetailsType,
+  PopsSupportContentDetailsType,
+  PopsSupportHeaderTitleDetailsType,
+} from "../types/main";
+import { PopsIcon } from "../PopsIcon";
+import { popsDOMUtils } from "../utils/PopsDOMUtils";
+
+export const PopsElementHandler = {
+  /**
+   * 获取遮罩层HTML
+   * @param guid
+   * @param zIndex z-index
+   * @param style
+   */
+  createMask(guid: string, zIndex: number = 101, style = ""): string {
+    zIndex = zIndex - 100;
+    if (style.startsWith(";")) {
+      style = style.replace(";", "");
+    }
+    return /*html*/ `<div class="pops-mask" data-guid="${guid}" style="z-index:${zIndex};${style}"></div>`;
+  },
+  /**
+   * 获取动画层HTML
+   * @param guid
+   * @param type
+   * @param config
+   * @param html
+   * @param bottomBtnHTML
+   * @param zIndex
+   */
+  createAnim(
+    guid: string,
+    type: PopsSupportAnimDetailsType,
+    config: PopsSupportAnimDetails[keyof PopsSupportAnimDetails],
+    html = "",
+    bottomBtnHTML = "",
+    zIndex: number
+  ) {
+    const __config = config as PopsAlertDetails;
+    let popsAnimStyle = "";
+    let popsStyle = "";
+    const popsPosition = __config.position || "";
+    if (config.zIndex != null) {
+      popsAnimStyle += `z-index: ${zIndex};`;
+      popsStyle += `z-index: ${zIndex};`;
+    }
+    if (__config.width != null) {
+      popsStyle += `width: ${__config.width};`;
+    }
+    if (__config.height != null) {
+      popsStyle += `height: ${__config.height};`;
+    }
+    const hasBottomBtn = bottomBtnHTML.trim() === "" ? false : true;
+    return /*html*/ `
+		<div class="pops-anim" anim="${__config.animation || ""}" style="${popsAnimStyle}" data-guid="${guid}">${
+      config.style != null ? `<style tyle="text/css">${config.style}</style>` : ""
+    }
+			<div class="pops ${
+        config.class || ""
+      }" data-bottom-btn="${hasBottomBtn}" type-value="${type}" style="${popsStyle}" position="${popsPosition}" data-guid="${guid}">${html}</div>
+		</div>`;
+  },
+  /**
+   * 获取顶部按钮层HTML
+   * @param type
+   * @param config
+   */
+  createHeader(
+    type: PopsSupportHeaderTitleDetailsType,
+    config: PopsSupportHeaderTitleDetails[keyof PopsSupportHeaderTitleDetails]
+  ): string {
+    if (!config.btn) {
+      return "";
+    }
+    const confirm_config = config as PopsConfirmDetails;
+    if (type !== "iframe" && !confirm_config.btn?.close?.enable) {
+      return "";
+    }
+    let resultHTML = "";
+    // let btnStyle = "";
+    let closeHTML = "";
+    const iframe_config = config as PopsIframeDetails;
+    if (type === "iframe" && iframe_config.topRightButton?.trim() !== "") {
+      /* iframe的 */
+      let topRightButtonHTML = "";
+      iframe_config.topRightButton.split("|").forEach((item: string) => {
+        // 最小化、最大化、窗口化、关闭按钮
+        item = item.toLowerCase();
+        topRightButtonHTML += /*html*/ `
+                <button class="pops-header-control" type="button" data-type="${item}">
+                    <i class="pops-icon">${PopsIcon.getIcon(item)}</i>
+                </button>`;
+      });
+      resultHTML = /*html*/ `
+            <div class="pops-header-controls" data-margin>${topRightButtonHTML}</div>`;
+    } else {
+      if (confirm_config.btn?.close?.enable) {
+        // 关闭按钮
+        closeHTML = /*html*/ `
+                <div class="pops-header-controls">
+                    <button class="pops-header-control" type="button" data-type="close" data-header>
+                    	<i class="pops-icon">${PopsIcon.getIcon("close")}</i>
+                    </button>
+                </div>`;
+      }
+      resultHTML = closeHTML;
+    }
+
+    return resultHTML;
+  },
+  /**
+   * 获取标题style
+   * @param type 弹窗类型
+   * @param config 弹窗配置
+   */
+  createHeaderStyle(
+    type: PopsSupportHeaderTitleDetailsType,
+    config: PopsSupportHeaderTitleDetails[keyof PopsSupportHeaderTitleDetails]
+  ) {
+    return {
+      headerStyle: config?.title?.html ? config?.title?.style || "" : "",
+      headerPStyle: config?.title?.html ? "" : config?.title?.style || "",
+    };
+  },
+  /**
+   * 获取底部按钮层HTML
+   * @param type
+   * @param config
+   */
+  createBottom(
+    type: PopsSupportBottomBtnDetailsType,
+    config: Omit<PopsSupportBottomBtnDetails[keyof PopsSupportBottomBtnDetails], "content">
+  ): string {
+    if (config.btn == null) {
+      // 未设置btn参数
+      return "";
+    }
+    const confirm_config = config as Required<PopsConfirmDetails>;
+    if (!(config.btn?.ok?.enable || confirm_config.btn?.cancel?.enable || confirm_config.btn?.other?.enable)) {
+      // 确定、取消、其它按钮都未启用直接返回
+      return "";
+    }
+    let btnStyle = "";
+    let resultHTML = "";
+    let okHTML = "";
+    let cancelHTML = "";
+    let ohterHTML = "";
+
+    if (config.btn.position) {
+      btnStyle += `justify-content: ${config.btn.position};`;
+    }
+
+    if (confirm_config.btn.reverse) {
+      btnStyle += "flex-direction: row-reverse;";
+    }
+    if (config.btn?.ok?.enable) {
+      /* 处理确定按钮的尺寸问题 */
+      let okButtonSizeClassName = "";
+      if (config.btn.ok.size === "large") {
+        okButtonSizeClassName = "pops-button-" + config.btn.ok.size;
+      } else if (config.btn.ok.size === "small") {
+        okButtonSizeClassName = "pops-button-" + config.btn.ok.size;
+      }
+      let okIconHTML = "";
+      const okIcon = confirm_config.btn.ok!.icon! as PopsIconType | string;
+      if (okIcon !== "") {
+        // 判断图标是否是svg库内的
+        let iconHTML = "";
+        if (PopsIcon.hasIcon(okIcon)) {
+          iconHTML = PopsIcon.getIcon(okIcon)!;
+        } else {
+          iconHTML = okIcon;
+        }
+        iconHTML = iconHTML || "";
+        okIconHTML = /*html*/ `<i class="pops-bottom-icon" is-loading="${config.btn.ok.iconIsLoading}">${iconHTML}</i>`;
+      }
+      okHTML = /*html*/ `
+            <button 
+				class="pops-${type}-btn-ok ${okButtonSizeClassName}"
+				type="button"
+				data-type="${confirm_config.btn.ok?.type}"
+				data-has-icon="${(confirm_config.btn.ok!.icon || "") !== ""}"
+				data-rightIcon="${confirm_config.btn.ok?.rightIcon}"
+            >${okIconHTML}<span>${config.btn.ok.text}</span>
+            </button>`;
+    }
+
+    if (confirm_config.btn?.cancel?.enable) {
+      /* 处理取消按钮的尺寸问题 */
+      let cancelButtonSizeClassName = "";
+
+      if (confirm_config.btn.cancel.size === "large") {
+        cancelButtonSizeClassName = "pops-button-" + confirm_config.btn.cancel.size;
+      } else if (confirm_config.btn.cancel.size === "small") {
+        cancelButtonSizeClassName = "pops-button-" + confirm_config.btn.cancel.size;
+      }
+      let cancelIconHTML = "";
+      const cancelIcon = confirm_config.btn.cancel!.icon as PopsIconType | string;
+      if (cancelIcon !== "") {
+        let iconHTML = "";
+        // 判断图标是否是svg库内的
+        if (PopsIcon.hasIcon(cancelIcon)) {
+          iconHTML = PopsIcon.getIcon(cancelIcon)!;
+        } else {
+          iconHTML = cancelIcon;
+        }
+        iconHTML = iconHTML || "";
+        cancelIconHTML = /*html*/ `<i class="pops-bottom-icon" is-loading="${confirm_config.btn.cancel.iconIsLoading}">${iconHTML}</i>`;
+      }
+      cancelHTML = /*html*/ `
+            <button
+				class="pops-${type}-btn-cancel ${cancelButtonSizeClassName}"
+				type="button"
+				data-type="${confirm_config.btn.cancel.type}"
+				data-has-icon="${(confirm_config.btn.cancel.icon || "") !== ""}"
+				data-rightIcon="${confirm_config.btn.cancel.rightIcon}"
+            >${cancelIconHTML}<span>${confirm_config.btn.cancel.text}</span>
+            </button>`;
+    }
+
+    if (confirm_config.btn?.other?.enable) {
+      /* 处理其它按钮的尺寸问题 */
+      let otherButtonSizeClassName = "";
+
+      if (confirm_config.btn.other.size === "large") {
+        otherButtonSizeClassName = "pops-button-" + confirm_config.btn.other.size;
+      } else if (confirm_config.btn.other.size === "small") {
+        otherButtonSizeClassName = "pops-button-" + confirm_config.btn.other.size;
+      }
+      let otherIconHTML = "";
+      const otherIcon = confirm_config.btn.other!.icon as PopsIconType | string;
+      if (otherIcon !== "") {
+        let iconHTML = "";
+        // 判断图标是否是svg库内的
+        if (PopsIcon.hasIcon(otherIcon)) {
+          iconHTML = PopsIcon.getIcon(otherIcon)!;
+        } else {
+          otherIcon;
+        }
+        iconHTML = iconHTML || "";
+        otherIconHTML = /*html*/ `<i class="pops-bottom-icon" is-loading="${confirm_config.btn.other.iconIsLoading}">${iconHTML}</i>`;
+      }
+      ohterHTML = /*html*/ `
+            <button
+				class="pops-${type}-btn-other ${otherButtonSizeClassName}"
+				type="button"
+				data-type="${confirm_config.btn.other.type}"
+				data-has-icon="${(confirm_config.btn.other.icon || "") !== ""}"
+				data-rightIcon="${confirm_config.btn.other.rightIcon}"
+            >${otherIconHTML}<span>${confirm_config.btn.other.text}</span>
+            </button>`;
+    }
+
+    if (confirm_config.btn.merge) {
+      let flexStyle = "display: flex;";
+      if (confirm_config.btn.mergeReverse) {
+        flexStyle += "flex-direction: row-reverse;";
+      } else {
+        flexStyle += "flex-direction: row;";
+      }
+      resultHTML = /*html*/ `
+            <div class="pops-botttom-btn-controls pops-${type}-btn" style="${btnStyle}">${ohterHTML}<div 
+                    class="pops-${type}-btn-merge"
+                    style="${flexStyle}">${okHTML}${cancelHTML}</div>
+            </div>
+            `;
+    } else {
+      resultHTML = /*html*/ `<div class="pops-botttom-btn-controls pops-${type}-btn" style="${btnStyle}">${okHTML}${cancelHTML}${ohterHTML}</div>`;
+    }
+    return resultHTML;
+  },
+  /**
+   * 获取内容style
+   * @param type 弹窗类型
+   * @param config 弹窗配置
+   */
+  createContentStyle(
+    type: PopsSupportContentDetailsType,
+    config: PopsSupportContentDetails[keyof PopsSupportContentDetails]
+  ) {
+    return {
+      contentStyle: (config?.content as any)?.html ? config?.content?.style || "" : "",
+
+      contentPStyle: (config?.content as any)?.html ? "" : config?.content?.style || "",
+    };
+  },
+  /**
+   * 将html转换成元素
+   * @param html
+   */
+  parseElement<T extends HTMLElement>(html: string): T {
+    return popsDOMUtils.parseTextToDOM(html);
+  },
+};