@liuzengwei/element-ui 2.15.5-xn.51 → 2.15.5-xn.53

package/lib/drawer.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 137);
+/******/ 	return __webpack_require__(__webpack_require__.s = 92);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -189,7 +189,35 @@ function normalizeComponent (
 
 /***/ }),
 
-/***/ 137:
+/***/ 14:
+/***/ (function(module, exports) {
+
+module.exports = require("@liuzengwei/element-ui/lib/utils/popup");
+
+/***/ }),
+
+/***/ 2:
+/***/ (function(module, exports) {
+
+module.exports = require("@liuzengwei/element-ui/lib/utils/dom");
+
+/***/ }),
+
+/***/ 4:
+/***/ (function(module, exports) {
+
+module.exports = require("@liuzengwei/element-ui/lib/mixins/emitter");
+
+/***/ }),
+
+/***/ 6:
+/***/ (function(module, exports) {
+
+module.exports = require("vue");
+
+/***/ }),
+
+/***/ 92:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -218,7 +246,10 @@ var render = function() {
               expression: "visible"
             }
           ],
-          staticClass: "el-drawer__wrapper",
+          class: _vm.referenceMode
+            ? "el-drawer__wrapper-reference"
+            : "el-drawer__wrapper",
+          style: _vm.wrapperStyle,
           attrs: { tabindex: "-1" }
         },
         [
@@ -226,7 +257,10 @@ var render = function() {
             "div",
             {
               staticClass: "el-drawer__container",
-              class: _vm.visible && "el-drawer__open",
+              class: [
+                _vm.visible && "el-drawer__open",
+                _vm.referenceMode && "el-drawer__reference-mode"
+              ],
               attrs: { role: "document", tabindex: "-1" },
               on: {
                 click: function($event) {
@@ -243,10 +277,12 @@ var render = function() {
                 {
                   ref: "drawer",
                   staticClass: "el-drawer",
-                  class: [_vm.direction, _vm.customClass],
-                  style: _vm.isHorizontal
-                    ? "width: " + _vm.drawerSize
-                    : "height: " + _vm.drawerSize,
+                  class: [
+                    _vm.effectiveDirection,
+                    _vm.customClass,
+                    _vm.referenceMode && "is-reference"
+                  ],
+                  style: _vm.drawerStyle,
                   attrs: {
                     "aria-modal": "true",
                     "aria-labelledby": "el-drawer__title",
@@ -322,11 +358,218 @@ render._withStripped = true
 var popup_ = __webpack_require__(14);
 var popup_default = /*#__PURE__*/__webpack_require__.n(popup_);
 
+// EXTERNAL MODULE: external "vue"
+var external_vue_ = __webpack_require__(6);
+var external_vue_default = /*#__PURE__*/__webpack_require__.n(external_vue_);
+
+// EXTERNAL MODULE: external "@liuzengwei/element-ui/lib/utils/dom"
+var dom_ = __webpack_require__(2);
+
+// CONCATENATED MODULE: ./src/utils/popup/popup-manager.js
+
+
+
+var hasModal = false;
+var hasInitZIndex = false;
+var popup_manager_zIndex = void 0;
+
+var popup_manager_getModal = function getModal() {
+  if (external_vue_default.a.prototype.$isServer) return;
+  var 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;
+};
+
+var instances = {};
+
+var PopupManager = {
+  modalFade: true,
+
+  getInstance: function getInstance(id) {
+    return instances[id];
+  },
+
+  register: function register(id, instance) {
+    if (id && instance) {
+      instances[id] = instance;
+    }
+  },
+
+  deregister: function deregister(id) {
+    if (id) {
+      instances[id] = null;
+      delete instances[id];
+    }
+  },
+
+  nextZIndex: function nextZIndex() {
+    return PopupManager.zIndex++;
+  },
+
+  modalStack: [],
+
+  doOnModalClick: function doOnModalClick() {
+    var topItem = PopupManager.modalStack[PopupManager.modalStack.length - 1];
+    if (!topItem) return;
+
+    var instance = PopupManager.getInstance(topItem.id);
+    if (instance && instance.closeOnClickModal) {
+      instance.close();
+    }
+  },
+
+  openModal: function openModal(id, zIndex, dom, modalClass, modalFade) {
+    if (external_vue_default.a.prototype.$isServer) return;
+    if (!id || zIndex === undefined) return;
+    this.modalFade = modalFade;
+
+    var modalStack = this.modalStack;
+
+    for (var i = 0, j = modalStack.length; i < j; i++) {
+      var item = modalStack[i];
+      if (item.id === id) {
+        return;
+      }
+    }
+
+    var modalDom = popup_manager_getModal();
+
+    Object(dom_["addClass"])(modalDom, 'v-modal');
+    if (this.modalFade && !hasModal) {
+      Object(dom_["addClass"])(modalDom, 'v-modal-enter');
+    }
+    if (modalClass) {
+      var classArr = modalClass.trim().split(/\s+/);
+      classArr.forEach(function (item) {
+        return Object(dom_["addClass"])(modalDom, item);
+      });
+    }
+    setTimeout(function () {
+      Object(dom_["removeClass"])(modalDom, 'v-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 });
+  },
+
+  closeModal: function closeModal(id) {
+    var modalStack = this.modalStack;
+    var modalDom = popup_manager_getModal();
+
+    if (modalStack.length > 0) {
+      var topItem = modalStack[modalStack.length - 1];
+      if (topItem.id === id) {
+        if (topItem.modalClass) {
+          var classArr = topItem.modalClass.trim().split(/\s+/);
+          classArr.forEach(function (item) {
+            return Object(dom_["removeClass"])(modalDom, item);
+          });
+        }
+
+        modalStack.pop();
+        if (modalStack.length > 0) {
+          modalDom.style.zIndex = modalStack[modalStack.length - 1].zIndex;
+        }
+      } else {
+        for (var i = modalStack.length - 1; i >= 0; i--) {
+          if (modalStack[i].id === id) {
+            modalStack.splice(i, 1);
+            break;
+          }
+        }
+      }
+    }
+
+    if (modalStack.length === 0) {
+      if (this.modalFade) {
+        Object(dom_["addClass"])(modalDom, 'v-modal-leave');
+      }
+      setTimeout(function () {
+        if (modalStack.length === 0) {
+          if (modalDom.parentNode) modalDom.parentNode.removeChild(modalDom);
+          modalDom.style.display = 'none';
+          PopupManager.modalDom = undefined;
+        }
+        Object(dom_["removeClass"])(modalDom, 'v-modal-leave');
+      }, 200);
+    }
+  }
+};
+
+Object.defineProperty(PopupManager, 'zIndex', {
+  configurable: true,
+  get: function get() {
+    if (!hasInitZIndex) {
+      popup_manager_zIndex = popup_manager_zIndex || (external_vue_default.a.prototype.$ELEMENT || {}).zIndex || 2000;
+      hasInitZIndex = true;
+    }
+    return popup_manager_zIndex;
+  },
+  set: function set(value) {
+    popup_manager_zIndex = value;
+  }
+});
+
+var popup_manager_getTopPopup = function getTopPopup() {
+  if (external_vue_default.a.prototype.$isServer) return;
+  if (PopupManager.modalStack.length > 0) {
+    var topPopup = PopupManager.modalStack[PopupManager.modalStack.length - 1];
+    if (!topPopup) return;
+    var instance = PopupManager.getInstance(topPopup.id);
+
+    return instance;
+  }
+};
+
+if (!external_vue_default.a.prototype.$isServer) {
+  // handle `esc` key when the popup is shown
+  window.addEventListener('keydown', function (event) {
+    if (event.keyCode === 27) {
+      var topPopup = popup_manager_getTopPopup();
+
+      if (topPopup && topPopup.closeOnPressEscape) {
+        topPopup.handleClose ? topPopup.handleClose() : topPopup.handleAction ? topPopup.handleAction('cancel') : topPopup.close();
+      }
+    }
+  });
+}
+
+/* harmony default export */ var popup_manager = (PopupManager);
 // EXTERNAL MODULE: external "@liuzengwei/element-ui/lib/mixins/emitter"
 var emitter_ = __webpack_require__(4);
 var emitter_default = /*#__PURE__*/__webpack_require__.n(emitter_);
 
 // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/drawer/src/main.vue?vue&type=script&lang=js&
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+//
 //
 //
 //
@@ -379,6 +622,8 @@ var emitter_default = /*#__PURE__*/__webpack_require__.n(emitter_);
 
 
 
+
+
 /* harmony default export */ var mainvue_type_script_lang_js_ = ({
   name: 'ElDrawer',
   mixins: [popup_default.a, emitter_default.a],
@@ -439,6 +684,21 @@ var emitter_default = /*#__PURE__*/__webpack_require__.n(emitter_);
     withHeader: {
       type: Boolean,
       default: true
+    },
+    reference: {
+      type: [String, Object, typeof window !== 'undefined' ? window.HTMLElement : Object],
+      default: null
+    },
+    placement: {
+      type: String,
+      default: 'right',
+      validator: function validator(val) {
+        return ['top', 'bottom', 'left', 'right'].indexOf(val) !== -1;
+      }
+    },
+    offset: {
+      type: Number,
+      default: 0
     }
   },
   computed: {
@@ -447,12 +707,51 @@ var emitter_default = /*#__PURE__*/__webpack_require__.n(emitter_);
     },
     drawerSize: function drawerSize() {
       return typeof this.size === 'number' ? this.size + 'px' : this.size;
+    },
+    referenceMode: function referenceMode() {
+      return !!this.reference;
+    },
+    effectiveDirection: function effectiveDirection() {
+      // 在 reference 模式下，根据 placement 映射到对应的 direction
+      if (this.referenceMode) {
+        var placementToDirection = {
+          'top': 'btt',
+          'bottom': 'ttb',
+          'left': 'ltr',
+          'right': 'rtl'
+        };
+        return placementToDirection[this.placement] || 'rtl';
+      }
+      return this.direction;
+    },
+    wrapperStyle: function wrapperStyle() {
+      // 在 reference 模式下，将 z-index 设置在 wrapper 上，与全局模式保持一致
+      if (this.referenceMode && this.drawerZIndex) {
+        return { zIndex: this.drawerZIndex };
+      }
+      return null;
+    },
+    drawerStyle: function drawerStyle() {
+      if (this.referenceMode) {
+        var style = _extends({}, this.position);
+        if (this.placement === 'left' || this.placement === 'right') {
+          style.width = this.drawerSize;
+        } else {
+          style.height = this.drawerSize;
+        }
+        return style;
+      } else {
+        return this.isHorizontal ? 'width: ' + this.drawerSize : 'height: ' + this.drawerSize;
+      }
     }
   },
   data: function data() {
     return {
       closed: false,
-      prevActiveElement: null
+      prevActiveElement: null,
+      position: {},
+      drawerZIndex: null,
+      modalZIndex: null
     };
   },
 
@@ -463,7 +762,34 @@ var emitter_default = /*#__PURE__*/__webpack_require__.n(emitter_);
       if (val) {
         this.closed = false;
         this.$emit('open');
-        if (this.appendToBody) {
+        if (this.referenceMode) {
+          // z-index 已经通过 drawerStyle computed 属性设置
+          var referenceEl = this.getReferenceElement();
+          if (referenceEl) {
+            referenceEl.appendChild(this.$el);
+          }
+          // 在 drawer 挂载后创建 modal
+          this.$nextTick(function () {
+            // drawer 的 z-index 已经在 appendChild 前设置
+
+            // 创建/显示 modal（使用预分配的较低值）
+            if (_this.modal) {
+              _this.createReferenceModal({
+                modalClass: _this.modalClass,
+                modalFade: _this.modalFade
+              });
+            }
+
+            // 更新位置
+            _this.updatePosition();
+
+            // 清理可能被 PopupManager 创建的全局 modal
+            // 延迟执行，确保全局 modal 已经被创建后再移除
+            setTimeout(function () {
+              _this.removeGlobalModal();
+            }, 300);
+          });
+        } else if (this.appendToBody) {
           document.body.appendChild(this.$el);
         }
         this.prevActiveElement = document.activeElement;
@@ -474,6 +800,10 @@ var emitter_default = /*#__PURE__*/__webpack_require__.n(emitter_);
             this.rendered = false;
           }
         }
+        // 关闭 reference 模式的 modal
+        if (this.referenceMode) {
+          this.closeReferenceModal();
+        }
         this.$nextTick(function () {
           if (_this.prevActiveElement) {
             _this.prevActiveElement.focus();
@@ -483,6 +813,122 @@ var emitter_default = /*#__PURE__*/__webpack_require__.n(emitter_);
     }
   },
   methods: {
+    doOpen: function doOpen(props) {
+      // 在 reference 模式下，需要让遮罩层挂载到参考元素而不是 body
+      if (this.referenceMode) {
+        // 手动实现 doOpen 的逻辑，但将 modal 挂载到 reference 元素
+        if (this.$isServer) return;
+        if (this.willOpen && !this.willOpen()) return;
+        if (this.opened) return;
+
+        this._opening = true;
+
+        var dom = this.$el;
+        var zIndex = props.zIndex;
+
+        if (zIndex) {
+          popup_manager.zIndex = zIndex;
+        }
+
+        // modal 的创建已经移到 watch visible 中，在 drawer 挂载后执行
+        // 这里预先分配 z-index，确保 modal 和 drawer 的层级关系正确
+        // 每次打开都重新分配，避免复用时的 z-index 错乱
+        this.modalZIndex = popup_manager.nextZIndex();
+        this.drawerZIndex = popup_manager.nextZIndex();
+
+        if (Object(dom_["getStyle"])(dom, 'position') === 'static') {
+          dom.style.position = 'absolute';
+        }
+
+        // z-index 的设置已经移到 watch visible 中，在 modal 创建后设置
+        this.opened = true;
+
+        this.onOpen && this.onOpen();
+
+        this.doAfterOpen();
+      } else {
+        // 非 reference 模式，使用原始的 doOpen
+        this.$options.mixins[0].methods.doOpen.call(this, props);
+      }
+    },
+    createReferenceModal: function createReferenceModal(props) {
+      var _this2 = this;
+
+      // 创建并挂载 modal 到 reference 元素
+      var referenceEl = this.getReferenceElement();
+      if (!referenceEl) return;
+
+      // 创建或复用 modal DOM
+      var modalDom = this._referenceModalDom;
+      if (!modalDom) {
+        modalDom = document.createElement('div');
+        modalDom.className = 'v-modal';
+        modalDom.tabIndex = 0;
+
+        // 使用预先分配的 modal z-index，确保 drawer 已经有更高的 z-index
+        var modalZIndex = this.modalZIndex || popup_manager.nextZIndex();
+        modalDom.style.zIndex = modalZIndex;
+
+        // 关键：在 reference 模式下使用 absolute 定位，而不是 fixed
+        modalDom.style.position = 'absolute';
+        modalDom.style.left = '0';
+        modalDom.style.top = '0';
+        modalDom.style.width = '100%';
+        modalDom.style.height = '100%';
+
+        if (props.modalClass) {
+          var classArr = props.modalClass.trim().split(/\s+/);
+          classArr.forEach(function (cls) {
+            return modalDom.classList.add(cls);
+          });
+        }
+
+        // 添加淡入动画
+        if (props.modalFade) {
+          modalDom.classList.add('v-modal-enter');
+          setTimeout(function () {
+            modalDom.classList.remove('v-modal-enter');
+          }, 200);
+        }
+
+        // 直接挂载到 reference 元素内部
+        referenceEl.appendChild(modalDom);
+
+        // 点击 modal 时的处理
+        modalDom.addEventListener('click', function () {
+          if (_this2.closeOnClickModal) {
+            _this2.closeDrawer();
+          }
+        });
+
+        // 保存引用以便后续清理
+        this._referenceModalDom = modalDom;
+      } else {
+        // 复用 modal 时，使用预分配的 z-index
+        modalDom.style.display = '';
+        modalDom.style.zIndex = this.modalZIndex || popup_manager.nextZIndex();
+      }
+    },
+    closeReferenceModal: function closeReferenceModal() {
+      // 关闭 reference 模式的 modal
+      if (this._referenceModalDom) {
+        this._referenceModalDom.style.display = 'none';
+      }
+    },
+    removeGlobalModal: function removeGlobalModal() {
+      // 移除 PopupManager 可能创建的全局 modal（在 body 下的）
+      // 只在 reference 模式下调用此方法
+      if (this.referenceMode) {
+        // 查找并移除 body 下与此 drawer 关联的 modal
+        var globalModals = document.body.querySelectorAll('.v-modal');
+        globalModals.forEach(function (modal) {
+          // 移除 body 下的所有 modal（它们不应该存在）
+          if (modal.parentNode === document.body) {
+            document.body.removeChild(modal);
+          }
+        });
+      }
+    },
     afterEnter: function afterEnter() {
       this.$emit('opened');
     },
@@ -516,22 +962,138 @@ var emitter_default = /*#__PURE__*/__webpack_require__.n(emitter_);
       // pressing `ESC` will call this method, and also close the drawer.
       // This method also calls `beforeClose` if there was one.
       this.closeDrawer();
+    },
+    getReferenceElement: function getReferenceElement() {
+      if (typeof this.reference === 'string') {
+        return document.querySelector(this.reference);
+      } else if (this.reference && this.reference.$el) {
+        return this.reference.$el;
+      } else {
+        return this.reference;
+      }
+    },
+    updatePosition: function updatePosition() {
+      if (!this.referenceMode) return;
+
+      var referenceEl = this.getReferenceElement();
+      if (!referenceEl) {
+        console.warn('[ElDrawer] Reference element not found');
+        return;
+      }
+
+      // 确保参考元素有 position 样式
+      var computedStyle = window.getComputedStyle(referenceEl);
+      if (computedStyle.position === 'static') {
+        referenceEl.style.position = 'relative';
+      }
+
+      var placement = this.placement,
+          offset = this.offset;
+
+      var position = {};
+
+      switch (placement) {
+        case 'top':
+          position.left = '0';
+          position.bottom = offset + 'px';
+          position.top = 'auto';
+          position.right = '0';
+          break;
+        case 'bottom':
+          position.left = '0';
+          position.top = offset + 'px';
+          position.bottom = 'auto';
+          position.right = '0';
+          break;
+        case 'left':
+          position.top = '0';
+          position.right = 'auto';
+          position.left = offset + 'px';
+          position.bottom = '0';
+          break;
+        case 'right':
+          position.top = '0';
+          position.left = 'auto';
+          position.right = offset + 'px';
+          position.bottom = '0';
+          break;
+      }
+
+      this.position = position;
+    },
+    handleScroll: function handleScroll() {
+      if (this.referenceMode && this.visible) {
+        this.updatePosition();
+      }
+    },
+    handleResize: function handleResize() {
+      if (this.referenceMode && this.visible) {
+        this.updatePosition();
+      }
+    }
+  },
+  beforeMount: function beforeMount() {
+    // 在 reference 模式下，我们不使用 PopupManager 的 modal
+    // 设置一个内部标志来阻止 PopupManager 创建 modal
+    if (this.referenceMode) {
+      // 保存原始的 modal 属性
+      this._originalModal = this.modal;
+      // 临时将 modal 设为 false，这样 Popup mixin 的逻辑不会调用 PopupManager.openModal
+      // 注意：这个技巧可能不work，因为 modal 是 prop
     }
   },
   mounted: function mounted() {
     if (this.visible) {
       this.rendered = true;
       this.open();
-      if (this.appendToBody) {
+      if (this.referenceMode) {
+        var referenceEl = this.getReferenceElement();
+        if (referenceEl) {
+          referenceEl.appendChild(this.$el);
+        }
+      } else if (this.appendToBody) {
         document.body.appendChild(this.$el);
       }
     }
+    if (this.referenceMode) {
+      window.addEventListener('scroll', this.handleScroll, true);
+      window.addEventListener('resize', this.handleResize);
+    }
+  },
+  beforeDestroy: function beforeDestroy() {
+    // 在 reference 模式下，不使用 PopupManager 管理 modal
+    // 所以需要阻止 Popup mixin 的 beforeDestroy 调用 PopupManager.closeModal
+    if (!this.referenceMode) {
+      // 非 reference 模式，调用 mixin 的 beforeDestroy
+      if (this.$options.mixins && this.$options.mixins[0].beforeDestroy) {
+        this.$options.mixins[0].beforeDestroy.call(this);
+      }
+    } else {
+      // reference 模式，只执行必要的清理
+      if (this._popupId) {
+        popup_manager.deregister(this._popupId);
+        // 不调用 PopupManager.closeModal，因为我们用的是自定义 modal
+      }
+      this.restoreBodyStyle();
+    }
   },
   destroyed: function destroyed() {
     // if appendToBody is true, remove DOM node after destroy
     if (this.appendToBody && this.$el && this.$el.parentNode) {
       this.$el.parentNode.removeChild(this.$el);
     }
+    if (this.referenceMode && this.$el && this.$el.parentNode) {
+      this.$el.parentNode.removeChild(this.$el);
+    }
+    // 清理 reference modal
+    if (this.referenceMode && this._referenceModalDom && this._referenceModalDom.parentNode) {
+      this._referenceModalDom.parentNode.removeChild(this._referenceModalDom);
+      this._referenceModalDom = null;
+    }
+    if (this.referenceMode) {
+      window.removeEventListener('scroll', this.handleScroll, true);
+      window.removeEventListener('resize', this.handleResize);
+    }
   }
 });
 // CONCATENATED MODULE: ./packages/drawer/src/main.vue?vue&type=script&lang=js&
@@ -572,20 +1134,6 @@ main.install = function (Vue) {
 
 /* harmony default export */ var drawer = __webpack_exports__["default"] = (main);
 
-/***/ }),
-
-/***/ 14:
-/***/ (function(module, exports) {
-
-module.exports = require("@liuzengwei/element-ui/lib/utils/popup");
-
-/***/ }),
-
-/***/ 4:
-/***/ (function(module, exports) {
-
-module.exports = require("@liuzengwei/element-ui/lib/mixins/emitter");
-
 /***/ })
 
 /******/ });