@whitesev/pops 4.0.0 → 4.0.1

package/dist/index.umd.js

@@ -4,7 +4,7 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.pops = factory());
 })(this, (function () { 'use strict';
 
-  const version = "4.0.0";
+  const version = "4.0.1";
 
   const GlobalConfig = {
       config: {},
@@ -32,18 +32,21 @@
               }
               else if (keyName === "zIndex") {
                   // 设置zIndex属性
-                  let zIndex = configValue == null ? "" : typeof configValue === "function" ? configValue() : configValue;
-                  if (typeof zIndex === "string") {
-                      const newIndex = (zIndex = Number(zIndex));
-                      if (!isNaN(newIndex)) {
-                          result.zIndex = newIndex;
+                  result.zIndex = () => {
+                      let zIndex = configValue == null ? "" : typeof configValue === "function" ? configValue() : configValue;
+                      if (typeof zIndex === "string") {
+                          const newIndex = (zIndex = Number(zIndex));
+                          if (!Number.isNaN(newIndex)) {
+                              return newIndex;
+                          }
                       }
-                  }
-                  else {
-                      if (!isNaN(zIndex)) {
-                          result.zIndex = zIndex;
+                      else {
+                          if (!Number.isNaN(zIndex)) {
+                              return zIndex;
+                          }
                       }
-                  }
+                      return 0;
+                  };
               }
               else if (keyName === "mask") {
                   const mask = GlobalConfig.config.mask == null ? {} : GlobalConfig.config.mask;
@@ -2885,7 +2888,7 @@
       addLightStyle($parent, style) {
           const darkCSS = /*css*/ `
       @media (prefers-color-scheme: light) {
-        ${style}
+        ${style ?? ""}
       }
     `;
           const $css = this.addStyle($parent, darkCSS);
@@ -2901,7 +2904,7 @@
       addDarkStyle($parent, style) {
           const darkCSS = /*css*/ `
       @media (prefers-color-scheme: dark) {
-        ${style}
+        ${style ?? ""}
       }
     `;
           const $css = this.addStyle($parent, darkCSS);
@@ -2913,7 +2916,7 @@
       },
   };
 
-  var indexCSS = "@charset \"utf-8\";\n.pops * {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  -webkit-tap-highlight-color: transparent;\n  /* 代替::-webkit-scrollbar */\n  scrollbar-width: thin;\n}\n.pops {\n  --pops-bg-opacity: 1;\n  --pops-bd-opacity: 1;\n  --pops-font-size: 16px;\n  interpolate-size: allow-keywords;\n  --pops-color: #000000;\n  --pops-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n  --pops-bd-color: rgb(235, 238, 245, var(--pops-bd-opacity));\n  --pops-box-shadow-color: rgba(0, 0, 0, 0.12);\n  --pops-title-color: #000000;\n  --pops-title-border-color: var(--pops-bd-color);\n  --pops-content-color: #000000;\n  --pops-bottom-btn-controls-border-color: var(--pops-bd-color);\n  --pops-components-is-disabled-text-color: #a8abb2;\n  --pops-components-is-disabled-bg-color: #f5f7fa;\n}\n@media (prefers-color-scheme: dark) {\n  .pops {\n    --pops-mask-bg-opacity: 0.8;\n    --pops-color: #ffffff;\n    --pops-dark-color: #262626;\n    --pops-bg-color: rgb(17, 17, 17, var(--pops-bg-opacity));\n    --pops-bd-color: rgb(55, 55, 55, var(--pops-bd-opacity));\n    --pops-box-shadow-color: rgba(81, 81, 81, 0.12);\n    --pops-title-color: #e8e8e8;\n    --pops-title-border-color: var(--pops-bd-color);\n    --pops-content-color: #e5e5e5;\n    --pops-components-is-disabled-text-color: #a8abb2;\n    --pops-components-is-disabled-bg-color: #262727;\n  }\n}\n.pops {\n  color: var(--pops-color);\n  background-color: var(--pops-bg-color);\n  border: 1px solid var(--pops-bd-color);\n  border-radius: 4px;\n  font-size: var(--pops-font-size);\n  line-height: normal;\n  box-shadow: 0 0 12px var(--pops-box-shadow-color);\n  box-sizing: border-box;\n  overflow: hidden;\n  transition: all 0.35s;\n  display: flex;\n  flex-direction: column;\n}\n.pops-anim {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n.pops-anim[anim=\"\"] {\n  top: unset;\n  right: unset;\n  bottom: unset;\n  left: unset;\n  width: unset;\n  height: unset;\n  transition: none;\n}\n/* 底部图标动画和样式 */\n.pops i.pops-bottom-icon[is-loading=\"true\"] {\n  animation: rotating 2s linear infinite;\n}\n.pops i.pops-bottom-icon {\n  height: 1em;\n  width: 1em;\n  line-height: normal;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  fill: currentColor;\n  color: inherit;\n  font-size: inherit;\n}\n\n/* 遮罩层样式 */\n.pops-mask {\n  --pops-mask-bg-opacity: 0.4;\n  --pops-mask-bg-color: rgba(0, 0, 0, var(--pops-mask-bg-opacity));\n}\n.pops-mask {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border: 0;\n  border-radius: 0;\n  background-color: var(--pops-mask-bg-color);\n  box-shadow: none;\n  transition: none;\n}\n\n.pops-header-controls button.pops-header-control[type][data-header] {\n  float: right;\n  margin: 0 0;\n  outline: 0;\n  border: 0;\n  border-color: rgb(136, 136, 136, var(--pops-bd-opacity));\n  background-color: transparent;\n  color: #888;\n  cursor: pointer;\n}\n.pops-header-controls button.pops-header-control[data-type=\"max\"],\n.pops-header-controls button.pops-header-control[data-type=\"mise\"],\n.pops-header-controls button.pops-header-control[data-type=\"min\"] {\n  outline: 0 !important;\n  border: 0;\n  border-color: rgb(136, 136, 136, var(--pops-bd-opacity));\n  background-color: transparent;\n  color: rgb(136, 136, 136);\n  cursor: pointer;\n  transition: all 0.3s ease-in-out;\n}\nbutton.pops-header-control i {\n  color: rgb(144, 147, 153);\n  font-size: inherit;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  fill: currentColor;\n}\nbutton.pops-header-control svg {\n  height: 1.25em;\n  width: 1.25em;\n}\nbutton.pops-header-control {\n  right: 15px;\n  padding: 0;\n  border: none;\n  outline: 0;\n  background: 0 0;\n  cursor: pointer;\n  position: unset;\n  line-height: normal;\n}\nbutton.pops-header-control i:hover {\n  color: rgb(64, 158, 255);\n}\n.pops-header-controls[data-margin] button.pops-header-control {\n  margin: 0 6px;\n  display: flex;\n  align-items: center;\n}\n.pops[type-value] .pops-header-controls {\n  display: flex;\n  gap: 6px;\n}\n\n/* 代码块 <code> */\n.pops code {\n  font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n  font-size: 0.85em;\n  color: #000;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n  border: 0;\n  padding: 0.2em 0;\n  white-space: normal;\n  background: #f5f5f5;\n  text-wrap: wrap;\n  text-align: left;\n  word-spacing: normal;\n  word-break: normal;\n  word-wrap: normal;\n  line-height: 1.4;\n  -moz-tab-size: 8;\n  -o-tab-size: 8;\n  tab-size: 8;\n  -webkit-hyphens: none;\n  -moz-hyphens: none;\n  -ms-hyphens: none;\n  hyphens: none;\n  direction: ltr;\n}\n\n.pops code::before,\n.pops code::after {\n  letter-spacing: -0.2em;\n  content: \"\\00a0\";\n}\n\n/* 标题 */\n.pops .pops-title {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 1px solid var(--pops-title-border-color);\n  width: 100%;\n  height: var(--container-title-height);\n}\n/* 标题-普通文本 */\n.pops .pops-title p[pops] {\n  color: var(--pops-title-color);\n  width: 100%;\n  overflow: hidden;\n  text-indent: 15px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-weight: 500;\n  line-height: normal;\n}\n\n/* 内容 */\n.pops .pops-content {\n  width: 100%;\n  /*height: calc(\n\t\t100% - var(--container-title-height) - var(--container-bottom-btn-height)\n\t);*/\n  flex: 1;\n  overflow: auto;\n  word-break: break-word;\n}\n/* 内容-普通文本 */\n.pops .pops-content p[pops] {\n  color: var(--pops-content-color);\n  padding: 5px 10px;\n  text-indent: 15px;\n}\n\n/* 底部-按钮组 */\n.pops .pops-botttom-btn-controls {\n  display: flex;\n  padding: 10px 10px 10px 10px;\n  width: 100%;\n  height: var(--container-bottom-btn-height);\n  max-height: var(--container-bottom-btn-height);\n  line-height: normal;\n  border-top: 1px solid var(--pops-bottom-btn-controls-border-color);\n  text-align: right;\n  align-items: center;\n}\n";
+  var indexCSS = "@charset \"utf-8\";\n.pops * {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  -webkit-tap-highlight-color: transparent;\n  /* 代替::-webkit-scrollbar */\n  scrollbar-width: thin;\n}\n.pops {\n  --pops-bg-opacity: 1;\n  --pops-bd-opacity: 1;\n  --pops-font-size: 16px;\n  interpolate-size: allow-keywords;\n  --pops-color: #000000;\n  --pops-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n  --pops-bd-color: rgb(235, 238, 245, var(--pops-bd-opacity));\n  --pops-box-shadow-color: rgba(0, 0, 0, 0.12);\n  --pops-title-color: #000000;\n  --pops-title-border-color: var(--pops-bd-color);\n  --pops-content-color: #000000;\n  --pops-bottom-btn-controls-border-color: var(--pops-bd-color);\n  --pops-components-is-disabled-text-color: #a8abb2;\n  --pops-components-is-disabled-bg-color: #f5f7fa;\n}\n@media (prefers-color-scheme: dark) {\n  .pops {\n    --pops-mask-bg-opacity: 0.8;\n    --pops-color: #ffffff;\n    --pops-dark-color: #262626;\n    --pops-bg-color: rgb(17, 17, 17, var(--pops-bg-opacity));\n    --pops-bd-color: rgb(55, 55, 55, var(--pops-bd-opacity));\n    --pops-box-shadow-color: rgba(81, 81, 81, 0.12);\n    --pops-title-color: #e8e8e8;\n    --pops-title-border-color: var(--pops-bd-color);\n    --pops-content-color: #e5e5e5;\n    --pops-components-is-disabled-text-color: #a8abb2;\n    --pops-components-is-disabled-bg-color: #262727;\n  }\n}\n.pops {\n  color: var(--pops-color);\n  background-color: var(--pops-bg-color);\n  border: 1px solid var(--pops-bd-color);\n  border-radius: 4px;\n  font-size: var(--pops-font-size);\n  line-height: normal;\n  box-shadow: 0 0 12px var(--pops-box-shadow-color);\n  box-sizing: border-box;\n  overflow: hidden;\n  transition: all 0.35s;\n  display: flex;\n  flex-direction: column;\n}\n.pops-anim {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n.pops-anim[anim=\"\"] {\n  top: unset;\n  right: unset;\n  bottom: unset;\n  left: unset;\n  width: unset;\n  height: unset;\n  transition: none;\n}\n/* 底部图标动画和样式 */\n.pops i.pops-bottom-icon[is-loading=\"true\"] {\n  animation: rotating 2s linear infinite;\n}\n.pops i.pops-bottom-icon {\n  height: 1em;\n  width: 1em;\n  line-height: normal;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  fill: currentColor;\n  color: inherit;\n  font-size: inherit;\n}\n\n/* 遮罩层样式 */\n.pops-mask {\n  --pops-mask-bg-opacity: 0.4;\n  --pops-mask-bg-color: rgba(0, 0, 0, var(--pops-mask-bg-opacity));\n}\n.pops-mask {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border: 0;\n  border-radius: 0;\n  background-color: var(--pops-mask-bg-color);\n  box-shadow: none;\n  transition: none;\n}\n\n.pops-header-controls button.pops-header-control[type][data-header] {\n  float: right;\n  margin: 0 0;\n  outline: 0;\n  border: 0;\n  border-color: rgb(136, 136, 136, var(--pops-bd-opacity));\n  background-color: transparent;\n  color: #888;\n  cursor: pointer;\n}\n.pops-header-controls button.pops-header-control[data-type=\"max\"],\n.pops-header-controls button.pops-header-control[data-type=\"mise\"],\n.pops-header-controls button.pops-header-control[data-type=\"min\"] {\n  outline: 0 !important;\n  border: 0;\n  border-color: rgb(136, 136, 136, var(--pops-bd-opacity));\n  background-color: transparent;\n  color: rgb(136, 136, 136);\n  cursor: pointer;\n  transition: all 0.3s ease-in-out;\n}\nbutton.pops-header-control i {\n  color: rgb(144, 147, 153);\n  font-size: inherit;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  fill: currentColor;\n}\nbutton.pops-header-control svg {\n  height: 1.25em;\n  width: 1.25em;\n}\nbutton.pops-header-control {\n  right: 15px;\n  padding: 0;\n  border: none;\n  outline: 0;\n  background: 0 0;\n  cursor: pointer;\n  position: unset;\n  line-height: normal;\n}\nbutton.pops-header-control i:hover {\n  color: rgb(64, 158, 255);\n}\n.pops-header-controls[data-margin] button.pops-header-control {\n  margin: 0 6px;\n  display: flex;\n  align-items: center;\n}\n.pops[type-value] .pops-header-controls {\n  display: flex;\n  gap: 6px;\n}\n\n/* 代码块 <code> */\n.pops code {\n  font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n  font-size: 0.85em;\n  color: #000;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n  border: 0;\n  padding: 0.2em 0;\n  white-space: normal;\n  background: #f5f5f5;\n  text-wrap: wrap;\n  text-align: left;\n  word-spacing: normal;\n  word-break: normal;\n  word-wrap: normal;\n  line-height: 1.4;\n  -moz-tab-size: 8;\n  -o-tab-size: 8;\n  tab-size: 8;\n  -webkit-hyphens: none;\n  -moz-hyphens: none;\n  -ms-hyphens: none;\n  hyphens: none;\n  direction: ltr;\n}\n\n.pops code::before,\n.pops code::after {\n  letter-spacing: -0.2em;\n  content: \"\\00a0\";\n}\n\n/* 标题 */\n.pops .pops-title {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 1px solid var(--pops-title-border-color);\n  width: 100%;\n  height: var(--container-title-height);\n}\n/* 标题-普通文本 */\n.pops .pops-title p[pops] {\n  color: var(--pops-title-color);\n  width: 100%;\n  height: 100%;\n  align-content: center;\n  overflow: hidden;\n  text-indent: 15px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-weight: 500;\n  line-height: normal;\n}\n\n/* 内容 */\n.pops .pops-content {\n  width: 100%;\n  /*height: calc(\n\t\t100% - var(--container-title-height) - var(--container-bottom-btn-height)\n\t);*/\n  flex: 1;\n  overflow: auto;\n  word-break: break-word;\n}\n/* 内容-普通文本 */\n.pops .pops-content p[pops] {\n  color: var(--pops-content-color);\n  padding: 5px 10px;\n  text-indent: 15px;\n}\n\n/* 底部-按钮组 */\n.pops .pops-botttom-btn-controls {\n  display: flex;\n  padding: 10px 10px 10px 10px;\n  width: 100%;\n  height: var(--container-bottom-btn-height);\n  max-height: var(--container-bottom-btn-height);\n  line-height: normal;\n  border-top: 1px solid var(--pops-bottom-btn-controls-border-color);\n  text-align: right;\n  align-items: center;\n}\n";
 
   var ninePalaceGridPositionCSS = ".pops[position=\"top_left\"] {\n  position: fixed;\n  top: 0;\n  left: 0;\n}\n.pops[position=\"top\"] {\n  position: fixed;\n  top: 0;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.pops[position=\"top_right\"] {\n  position: fixed;\n  top: 0;\n  right: 0;\n}\n.pops[position=\"center_left\"] {\n  position: fixed;\n  top: 50%;\n  left: 0;\n  transform: translateY(-50%);\n}\n.pops[position=\"center\"] {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.pops[position=\"center_right\"] {\n  position: fixed;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n}\n.pops[position=\"bottom_left\"] {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n}\n.pops[position=\"bottom\"] {\n  position: fixed;\n  bottom: 0;\n  left: 50%;\n  transform: translate(-50%, 0);\n}\n.pops[position=\"bottom_right\"] {\n  position: fixed;\n  right: 0;\n  bottom: 0;\n}\n";
 
@@ -4077,7 +4080,10 @@
                   ], "", true);
               }
           }
-          config = this.handleZIndex(config);
+          if (type !== "rightClickMenu") {
+              // rightClickMenu在配置处理时就处理了一次，这里不需要重复处理
+              config = this.handleZIndex(config);
+          }
           return config;
       },
       /**
@@ -4090,15 +4096,11 @@
           const originZIndex = config.zIndex;
           const handler = () => {
               let deviation = 100;
-              if (originZIndex.toString() !== handler.toString()) {
-                  // 避免叠加覆盖
-                  deviation += PopsHandler.getTargerOrFunctionValue(originZIndex) ?? 0;
-              }
+              deviation += PopsHandler.getTargerOrFunctionValue(originZIndex) ?? 0;
               let maxZIndex = deviation;
-              const pointZIndexInfoList = popsUtils.getMaxZIndexNodeInfoFromPoint(deviation);
-              const pointZIndexInfo = pointZIndexInfoList[0];
-              maxZIndex = Math.max(maxZIndex, pointZIndexInfo?.zIndex ?? deviation);
-              return maxZIndex;
+              const pointZIndex = popsUtils.getMaxZIndexNodeInfoFromPoint(deviation)[0]?.zIndex ?? 0;
+              maxZIndex = Math.max(maxZIndex, pointZIndex);
+              return maxZIndex === deviation ? maxZIndex : maxZIndex + deviation;
           };
           config.zIndex = handler;
           return config;
@@ -13525,42 +13527,19 @@
           let zIndex = 0;
           // 当前的最大z-index的元素，调试使用
           let maxZIndexNode = null;
-          /**
-           * 元素是否可见
-           * @param $el
-           * @param $css
-           */
-          function isVisibleNode($el, $css) {
-              let flag = true;
-              if (typeof $el.checkVisibility === "function") {
-                  flag = $el.checkVisibility();
-              }
-              else {
-                  flag =
-                      $css.position !== "static" && $css.display !== "none" && $css.visibility !== "hidden" && $css.opacity !== "0";
-              }
-              if (flag) {
-                  // css样式上可见
-                  // 再判断宽高
-                  const rect = $el.getBoundingClientRect();
-                  // 确保该元素的中心点在屏幕内
-                  flag = rect.width > 0 && rect.height > 0 && rect.x > 0 && rect.y > 0;
-              }
-              return flag;
-          }
           Object.keys(PopsInstData).forEach((instKeyName) => {
               const instData = PopsInstData[instKeyName];
               for (let index = 0; index < instData.length; index++) {
                   const inst = instData[index];
-                  const nodeStyle = window.getComputedStyle(inst.$anim);
                   // 不对position为static和display为none的元素进行获取它们的z-index
-                  if (isVisibleNode(inst.$anim, nodeStyle)) {
-                      const nodeZIndex = parseInt(nodeStyle.zIndex);
-                      if (!isNaN(nodeZIndex)) {
-                          if (nodeZIndex > zIndex) {
-                              zIndex = nodeZIndex;
-                              maxZIndexNode = inst.$anim;
-                          }
+                  const $elList = [inst.$anim, inst.$pops, inst.$mask].filter((it) => it instanceof HTMLElement);
+                  const nodeZIndexInfoList = popsUtils.getMaxZIndexNodeInfoFromPoint($elList);
+                  const maxNodeZIndexInfo = nodeZIndexInfoList[0];
+                  if (maxNodeZIndexInfo) {
+                      const nodeZIndex = maxNodeZIndexInfo.zIndex;
+                      if (nodeZIndex > zIndex) {
+                          zIndex = nodeZIndex;
+                          maxZIndexNode = maxNodeZIndexInfo.node || maxNodeZIndexInfo.positionNode;
                       }
                   }
               }