@whitesev/pops 4.0.0 → 4.0.2

package/dist/index.system.js

@@ -3,7 +3,7 @@ System.register('pops', [], (function (exports) {
   return {
     execute: (function () {
 
-      const version = "4.0.0";
+      const version = "4.0.2";
 
       const GlobalConfig = {
           config: {},
@@ -31,18 +31,21 @@ System.register('pops', [], (function (exports) {
                   }
                   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;
@@ -2884,7 +2887,7 @@ System.register('pops', [], (function (exports) {
           addLightStyle($parent, style) {
               const darkCSS = /*css*/ `
       @media (prefers-color-scheme: light) {
-        ${style}
+        ${style ?? ""}
       }
     `;
               const $css = this.addStyle($parent, darkCSS);
@@ -2900,7 +2903,7 @@ System.register('pops', [], (function (exports) {
           addDarkStyle($parent, style) {
               const darkCSS = /*css*/ `
       @media (prefers-color-scheme: dark) {
-        ${style}
+        ${style ?? ""}
       }
     `;
               const $css = this.addStyle($parent, darkCSS);
@@ -2912,7 +2915,7 @@ System.register('pops', [], (function (exports) {
           },
       };
 
-      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";
 
@@ -4076,7 +4079,10 @@ System.register('pops', [], (function (exports) {
                       ], "", true);
                   }
               }
-              config = this.handleZIndex(config);
+              if (type !== "rightClickMenu") {
+                  // rightClickMenu在配置处理时就处理了一次，这里不需要重复处理
+                  config = this.handleZIndex(config);
+              }
               return config;
           },
           /**
@@ -4089,15 +4095,11 @@ System.register('pops', [], (function (exports) {
               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;
@@ -13524,42 +13526,19 @@ System.register('pops', [], (function (exports) {
               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;
                           }
                       }
                   }
@@ -13640,6 +13619,8 @@ System.register('pops', [], (function (exports) {
               InstanceUtils: PopsInstanceUtils,
               /** pops处理float类型使用的工具类 */
               MathFloatUtils: PopsMathFloatUtils,
+              /** 实例处理函数 */
+              PopsInstHandler,
               /** pops.panel中用于处理各个类型的工具 */
               PanelHandlerComponents,
               /** pops.panel中的动画 */