misp-ui-library-test 0.0.1

package/src/utils/popper/popup-manager.js

@@ -0,0 +1,288 @@
+/**
+ * @fileoverview Vue2 UI Library - PopupManager 弹出层管理器
+ * @description 统一管理所有弹出层的 zIndex 层级、遮罩层显示/隐藏、实例注册等核心功能
+ * @author Alibaba Cloud
+ * @module utils/popper/popup-manager
+ */
+
+import Vue from 'vue';
+import { addClass, removeClass } from '../dom/index';
+
+/**
+ * 是否存在遮罩层标识
+ * @type {Boolean}
+ */
+let hasModal = false;
+
+/**
+ * zIndex 是否已初始化标识
+ * @type {Boolean}
+ */
+let hasInitZIndex = false;
+
+/**
+ * 当前 zIndex 值
+ * @type {Number}
+ */
+let zIndex;
+
+/**
+ * 获取或创建遮罩层 DOM 元素
+ * @description 单例模式创建遮罩层，绑定触摸移动和点击事件
+ * @returns {HTMLElement} 遮罩层 DOM 元素
+ */
+const getModal = function() {
+  if (Vue.prototype.$isServer) return;
+  let modalDom = PopupManager.modalDom;
+  if (modalDom) {
+    hasModal = true;
+  } else {
+    hasModal = false;
+    modalDom = document.createElement('div');
+    PopupManager.modalDom = modalDom;
+    modalDom.addEventListener('touchmove', function(event) {
+      event.preventDefault();
+      event.stopPropagation();
+    });
+    modalDom.addEventListener('click', function() {
+      PopupManager.doOnModalClick && PopupManager.doOnModalClick();
+    });
+  }
+  return modalDom;
+};
+
+/**
+ * 弹出层实例存储对象
+ * @type {Object}
+ */
+const instances = {};
+
+/**
+ * @namespace PopupManager
+ * @description 弹出层管理器对象，提供 zIndex 管理、遮罩层控制、实例注册等功能
+ */
+const PopupManager = {
+  /**
+   * 遮罩层是否启用淡入淡出动画
+   * @type {Boolean}
+   */
+  modalFade: true,
+  
+  /**
+   * 遮罩层堆栈，记录所有打开的遮罩层信息
+   * @type {Array}
+   */
+  modalStack: [],
+  
+  /**
+   * 获取弹出层实例
+   * @param {String} id - 弹出层唯一标识
+   * @returns {VueComponent|null} 弹出层实例
+   */
+  getInstance: function(id) {
+    return instances[id];
+  },
+  
+  /**
+   * 注册弹出层实例
+   * @param {String} id - 弹出层唯一标识
+   * @param {VueComponent} instance - 弹出层实例
+   * @returns {void}
+   */
+  register: function(id, instance) {
+    if (id && instance) {
+      instances[id] = instance;
+    }
+  },
+  
+  /**
+   * 注销弹出层实例
+   * @param {String} id - 弹出层唯一标识
+   * @returns {void}
+   */
+  deregister: function(id) {
+    if (id) {
+      instances[id] = null;
+      delete instances[id];
+    }
+  },
+  
+  /**
+   * 获取下一个 zIndex 值
+   * @description 每次调用自动递增 zIndex，确保新弹出层在最上层
+   * @returns {Number} 新的 zIndex 值
+   */
+  nextZIndex: function() {
+    return PopupManager.zIndex++;
+  },
+  
+  /**
+   * 遮罩层点击处理函数
+   * @description 当点击遮罩层时，检查是否关闭最顶层的弹出层
+   * @returns {void}
+   */
+  doOnModalClick: function() {
+    const topItem = PopupManager.modalStack[PopupManager.modalStack.length - 1];
+    if (!topItem) return;
+    const instance = PopupManager.getInstance(topItem.id);
+    if (instance && instance.closeOnClickModal) {
+      instance.close();
+    }
+  },
+  
+  /**
+   * 打开遮罩层
+   * @description 创建或复用遮罩层 DOM，设置样式和类名，加入堆栈
+   * @param {String} id - 弹出层唯一标识
+   * @param {Number} zIndex - 层级值
+   * @param {HTMLElement} dom - 弹出层 DOM 元素
+   * @param {String} modalClass - 遮罩层自定义类名
+   * @param {Boolean} modalFade - 是否启用淡入淡出动画
+   * @returns {void}
+   */
+  openModal: function(id, zIndex, dom, modalClass, modalFade) {
+    if (Vue.prototype.$isServer) return;
+    if (!id || zIndex === undefined) return;
+    this.modalFade = modalFade;
+    const modalStack = this.modalStack;
+    for (let i = 0, j = modalStack.length; i < j; i++) {
+      const item = modalStack[i];
+      if (item.id === id) {
+        return;
+      }
+    }
+    const modalDom = getModal();
+    addClass(modalDom, 'ui-modal');
+    if (this.modalFade && !hasModal) {
+      addClass(modalDom, 'ui-modal-enter');
+    }
+    if (modalClass) {
+      let classArr = modalClass.trim().split(/\s+/);
+      classArr.forEach(item => addClass(modalDom, item));
+    }
+    setTimeout(() => {
+      removeClass(modalDom, 'ui-modal-enter');
+    }, 200);
+    if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {
+      dom.parentNode.appendChild(modalDom);
+    } else {
+      document.body.appendChild(modalDom);
+    }
+    if (zIndex) {
+      modalDom.style.zIndex = zIndex;
+    }
+    modalDom.tabIndex = 0;
+    modalDom.style.display = '';
+    this.modalStack.push({ id: id, zIndex: zIndex, modalClass: modalClass });
+  },
+  
+  /**
+   * 关闭遮罩层
+   * @description 从堆栈中移除遮罩层，更新 zIndex，必要时移除 DOM
+   * @param {String} id - 弹出层唯一标识
+   * @returns {void}
+   */
+  closeModal: function(id) {
+    const modalStack = this.modalStack;
+    const modalDom = getModal();
+    if (modalStack.length > 0) {
+      const topItem = modalStack[modalStack.length - 1];
+      if (topItem.id === id) {
+        if (topItem.modalClass) {
+          let classArr = topItem.modalClass.trim().split(/\s+/);
+          classArr.forEach(item => removeClass(modalDom, item));
+        }
+        modalStack.pop();
+        if (modalStack.length > 0) {
+          modalDom.style.zIndex = modalStack[modalStack.length - 1].zIndex;
+        }
+      } else {
+        for (let i = modalStack.length - 1; i >= 0; i--) {
+          if (modalStack[i].id === id) {
+            modalStack.splice(i, 1);
+            break;
+          }
+        }
+      }
+    }
+    if (modalStack.length === 0) {
+      if (this.modalFade) {
+        addClass(modalDom, 'ui-modal-leave');
+      }
+      setTimeout(() => {
+        if (modalStack.length === 0) {
+          if (modalDom.parentNode) modalDom.parentNode.removeChild(modalDom);
+          modalDom.style.display = 'none';
+          PopupManager.modalDom = undefined;
+        }
+        removeClass(modalDom, 'ui-modal-leave');
+      }, 200);
+    }
+  }
+};
+
+/**
+ * zIndex 属性描述符
+ * @description 支持懒加载初始化，可从 Vue 原型链的 $ELEMENT 配置中读取默认值
+ * @type {Object}
+ */
+Object.defineProperty(PopupManager, 'zIndex', {
+  configurable: true,
+  /**
+   * zIndex 获取器
+   * @returns {Number} 当前 zIndex 值
+   */
+  get() {
+    if (!hasInitZIndex) {
+      zIndex = zIndex || (Vue.prototype.$ELEMENT || {}).zIndex || 2000;
+      hasInitZIndex = true;
+    }
+    return zIndex;
+  },
+  /**
+   * zIndex 设置器
+   * @param {Number} value - 新的 zIndex 值
+   */
+  set(value) {
+    zIndex = value;
+  }
+});
+
+/**
+ * 获取最顶层的弹出层实例
+ * @description 从 modalStack 中获取最顶层的弹出层实例
+ * @returns {VueComponent|null} 最顶层的弹出层实例
+ */
+const getTopPopup = function() {
+  if (Vue.prototype.$isServer) return;
+  if (PopupManager.modalStack.length > 0) {
+    const topPopup = PopupManager.modalStack[PopupManager.modalStack.length - 1];
+    if (!topPopup) return;
+    const instance = PopupManager.getInstance(topPopup.id);
+    return instance;
+  }
+};
+
+/**
+ * 全局键盘事件监听
+ * @description 监听 ESC 键（keyCode 27），关闭最顶层支持 ESC 关闭的弹出层
+ * @listens window#keydown
+ */
+if (!Vue.prototype.$isServer) {
+  window.addEventListener('keydown', function(event) {
+    if (event.keyCode === 27) {
+      const topPopup = getTopPopup();
+      if (topPopup && topPopup.closeOnPressEscape) {
+        topPopup.handleClose
+          ? topPopup.handleClose()
+          : (topPopup.handleAction ? topPopup.handleAction('cancel') : topPopup.close());
+      }
+    }
+  });
+}
+
+/**
+ * @exports PopupManager
+ * @default
+ */
+export default PopupManager;

package/src/utils/popper/popup.js

@@ -0,0 +1,344 @@
+/**
+ * @fileoverview Vue2 UI Library - Popup 弹出层管理模块
+ * @description 提供弹出层的显示/隐藏控制、遮罩层管理、滚动条锁定、zIndex 管理等功能
+ */
+
+import Vue from 'vue'
+import { merge } from '../lodash'
+import PopupManager from './popup-manager'
+import getScrollBarWidth from '../dom/scrollbar-width'
+import { getStyle, addClass, removeClass, hasClass } from '../dom/index'
+
+/**
+ * 弹出层 ID 生成种子
+ * @type {Number}
+ */
+let idSeed = 1
+
+/**
+ * 滚动条宽度缓存
+ * @type {Number}
+ */
+let scrollBarWidth
+
+export default {
+  /**
+   * @namespace Props
+   * @description 组件属性配置
+   */
+  props: {
+    /**
+     * 弹出层是否可见
+     * @type {Boolean}
+     * @default false
+     */
+    visible: { type: Boolean, default: false },
+    
+    /**
+     * 打开延迟时间（毫秒）
+     * @type {Number}
+     */
+    openDelay: {},
+    
+    /**
+     * 关闭延迟时间（毫秒）
+     * @type {Number}
+     */
+    closeDelay: {},
+    
+    /**
+     * 弹出层的 zIndex 层级
+     * @type {Number}
+     */
+    zIndex: {},
+    
+    /**
+     * 是否显示遮罩层
+     * @type {Boolean}
+     * @default false
+     */
+    modal: { type: Boolean, default: false },
+    
+    /**
+     * 遮罩层是否添加淡入淡出动画
+     * @type {Boolean}
+     * @default true
+     */
+    modalFade: { type: Boolean, default: true },
+    
+    /**
+     * 遮罩层的自定义类名
+     * @type {String}
+     */
+    modalClass: {},
+    
+    /**
+     * 遮罩层是否追加到 body 元素下
+     * @type {Boolean}
+     * @default false
+     */
+    modalAppendToBody: { type: Boolean, default: false },
+    
+    /**
+     * 是否锁定页面滚动
+     * @type {Boolean}
+     * @default true
+     */
+    lockScroll: { type: Boolean, default: true },
+    
+    /**
+     * 是否按 ESC 键关闭弹出层
+     * @type {Boolean}
+     * @default false
+     */
+    closeOnPressEscape: { type: Boolean, default: false },
+    
+    /**
+     * 是否点击遮罩层关闭弹出层
+     * @type {Boolean}
+     * @default false
+     */
+    closeOnClickModal: { type: Boolean, default: false },
+  },
+  
+  /**
+   * 组件挂载前钩子
+   * @description 生成唯一弹出层 ID 并注册到 PopupManager
+   * @returns {void}
+   */
+  beforeMount() {
+    this._popupId = 'popup-' + idSeed++
+    PopupManager.register(this._popupId, this)
+  },
+  
+  /**
+   * 组件销毁前钩子
+   * @description 注销弹出层、关闭遮罩层、恢复页面样式
+   * @returns {void}
+   */
+  beforeDestroy() {
+    PopupManager.deregister(this._popupId)
+    PopupManager.closeModal(this._popupId)
+    this.restoreBodyStyle()
+  },
+  
+  /**
+   * @namespace Data
+   * @description 组件响应式数据
+   */
+  data() {
+    return {
+      /**
+       * 弹出层是否已打开
+       * @type {Boolean}
+       */
+      opened: false,
+      
+      /**
+       * 保存 body 原有的 paddingRight 样式
+       * @type {String|null}
+       */
+      bodyPaddingRight: null,
+      
+      /**
+       * 计算后的 body paddingRight 值
+       * @type {Number}
+       */
+      computedBodyPaddingRight: 0,
+      
+      /**
+       * body 是否原本没有 hidden 类
+       * @type {Boolean}
+       */
+      withoutHiddenClass: true,
+      
+      /**
+       * 组件是否已渲染
+       * @type {Boolean}
+       */
+      rendered: false,
+    }
+  },
+  
+  /**
+   * @namespace Watch
+   * @description 侦听器配置
+   */
+  watch: {
+    /**
+     * 监听 visible 属性变化，控制弹出层的打开/关闭
+     * @param {Boolean} val - 新的可见状态
+     */
+    visible(val) {
+      if (val) {
+        if (this._opening) return
+        if (!this.rendered) {
+          this.rendered = true
+          Vue.nextTick(this.open)
+        } else {
+          this.open()
+        }
+      } else {
+        this.close()
+      }
+    },
+  },
+  
+  /**
+   * @namespace Methods
+   * @description 组件方法集合
+   */
+  methods: {
+    /**
+     * 打开弹出层
+     * @description 支持延迟打开，处理打开定时器
+     * @param {Object} [options] - 可选的配置覆盖选项
+     * @returns {void}
+     */
+    open(options) {
+      if (!this.rendered) {
+        this.rendered = true
+      }
+
+      const props = merge({}, this.$props || this, options)
+      if (this._closeTimer) {
+        clearTimeout(this._closeTimer)
+        this._closeTimer = null
+      }
+      clearTimeout(this._openTimer)
+      const openDelay = Number(props.openDelay)
+      if (openDelay > 0) {
+        this._openTimer = setTimeout(() => {
+          this._openTimer = null
+          this.doOpen(props)
+        }, openDelay)
+      } else {
+        this.doOpen(props)
+      }
+    },
+    
+    /**
+     * 执行打开展出层逻辑
+     * @description 处理遮罩层、滚动条锁定、zIndex 设置等核心逻辑
+     * @param {Object} props - 合并后的属性配置
+     * @returns {void}
+     */
+    doOpen(props) {
+      if (this.$isServer) return
+      if (this.willOpen && !this.willOpen()) return
+      if (this.opened) return
+
+      this._opening = true
+      const dom = this.$el
+      const modal = props.modal
+      const zIndex = props.zIndex
+      if (zIndex) {
+        PopupManager.zIndex = zIndex
+      }
+
+      if (modal) {
+        if (this._closing) {
+          PopupManager.closeModal(this._popupId)
+          this._closing = false
+        }
+        PopupManager.openModal(this._popupId, PopupManager.nextZIndex(), this.modalAppendToBody ? undefined : dom, props.modalClass, props.modalFade)
+        if (props.lockScroll) {
+          this.withoutHiddenClass = !hasClass(document.body, 'ui-popup-parent--hidden')
+          if (this.withoutHiddenClass) {
+            this.bodyPaddingRight = document.body.style.paddingRight
+            this.computedBodyPaddingRight = parseInt(getStyle(document.body, 'paddingRight'), 10)
+          }
+          scrollBarWidth = getScrollBarWidth()
+          let bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight
+          let bodyOverflowY = getStyle(document.body, 'overflowY')
+          if (scrollBarWidth > 0 && (bodyHasOverflow || bodyOverflowY === 'scroll') && this.withoutHiddenClass) {
+            document.body.style.paddingRight = this.computedBodyPaddingRight + scrollBarWidth + 'px'
+          }
+          addClass(document.body, 'ui-popup-parent--hidden')
+        }
+      }
+      if (getComputedStyle(dom).position === 'static') {
+        dom.style.position = 'absolute'
+      }
+
+      dom.style.zIndex = PopupManager.nextZIndex()
+      this.opened = true
+      this.onOpen && this.onOpen()
+      this.doAfterOpen()
+    },
+    
+    /**
+     * 打开后的回调处理
+     * @description 重置打开状态标识
+     * @returns {void}
+     */
+    doAfterOpen() {
+      this._opening = false
+    },
+    
+    /**
+     * 关闭弹出层
+     * @description 支持延迟关闭，处理关闭定时器
+     * @returns {void}
+     */
+    close() {
+      if (this.willClose && !this.willClose()) return
+      if (this._openTimer !== null) {
+        clearTimeout(this._openTimer)
+        this._openTimer = null
+      }
+      clearTimeout(this._closeTimer)
+      const closeDelay = Number(this.closeDelay)
+      if (closeDelay > 0) {
+        this._closeTimer = setTimeout(() => {
+          this._closeTimer = null
+          this.doClose()
+        }, closeDelay)
+      } else {
+        this.doClose()
+      }
+    },
+    
+    /**
+     * 执行关闭弹出层逻辑
+     * @description 触发关闭回调、恢复页面样式、关闭遮罩层
+     * @returns {void}
+     */
+    doClose() {
+      this._closing = true
+      this.onClose && this.onClose()
+      this.lockScroll && setTimeout(this.restoreBodyStyle, 200)
+      this.opened = false
+      this.doAfterClose()
+    },
+    
+    /**
+     * 关闭后的回调处理
+     * @description 关闭遮罩层、重置关闭状态标识
+     * @returns {void}
+     */
+    doAfterClose() {
+      PopupManager.closeModal(this._popupId)
+      this._closing = false
+    },
+    
+    /**
+     * 恢复页面 body 样式
+     * @description 移除滚动条锁定相关的样式和类名
+     * @returns {void}
+     */
+    restoreBodyStyle() {
+      if (this.modal && this.withoutHiddenClass) {
+        document.body.style.paddingRight = this.bodyPaddingRight
+        removeClass(document.body, 'ui-popup-parent--hidden')
+      }
+      this.withoutHiddenClass = true
+    },
+  },
+}
+
+/**
+ * @exports PopupManager
+ * @description 弹出层管理器，用于统一管理所有弹出层的 zIndex 和遮罩层
+ */
+export { PopupManager }