@ezuikit/control-drawer 0.0.1 → 0.0.2-beta.1

package/README.md

@@ -172,6 +172,7 @@ open = false  →  onCloseStart → onOpenChange(false) → （duration 后）on
 
 - 结构：`edrawer`（根）> `edrawer-mask` + `edrawer-panel` > `edrawer-header`（`edrawer-title`、`edrawer-close`）+ `edrawer-body`
 - 状态：`edrawer-left` / `-right` / `-top` / `-bottom`、`edrawer-open`、`edrawer-hidden`、`edrawer-fixed`（挂在 body 上）
+- 页面：`edrawer-body-noscroll`（加在 `body` 上：挂在 body 上的抽屉打开期间存在，`overflow: hidden` + `touch-action: none`，禁止页面滚动）
 
 外观通过 CSS 变量定制，可设在 `className` 对应的根节点上按实例覆盖：
 
@@ -196,7 +197,7 @@ open = false  →  onCloseStart → onOpenChange(false) → （duration 后）on
 
 ```css
 /* 例：告警消息面板在 PC 端最多占容器 80% 宽 */
-.ezuikit-alarm-message-drawer {
+.ealarm-message-drawer {
   --edrawer-max-width: 80%;
 }
 ```
@@ -217,8 +218,29 @@ open = false  →  onCloseStart → onOpenChange(false) → （duration 后）on
 
 **挂载到 `body` 判定为 `fixed`** 时，同样以挂载点自身所属文档的 `body` 为准，iframe 内挂到其 `body` 时也相对该 iframe 视口定位。
 
+**挂载在 `body` 上时锁定页面滚动。** 抽屉挂载在 `body` 上（任意方向，常见于移动端底部弹层）时，打开时给该文档的 `body` 加 `edrawer-body-noscroll`，开始收起（`open = false`）或打开态 `destroy()` 时移除；挂载在普通容器内时不加。同一文档中多个挂在 body 上的抽屉同时打开时按数量计数，最后一个关闭后才移除；iframe 内的抽屉只锁定该 iframe 的 `body`。抽屉内容区（`.edrawer-body`）自身仍可滚动。宿主不要自己增删这个类名，否则会与抽屉的计数冲突。`getContainer` 每次打开时按当次挂载点判断是否锁定。
+
 **`getContainer` 的调用时机。** 仅在 `open = true` 时调用（构造与 `updateOptions` 都不调用）；已打开状态下 `updateOptions` 沿用当前挂载点。返回空值回退到构造函数传入的 `container`；返回的元素与当前父节点相同时不移动 DOM。
 
 **事件冒泡。** 根节点拦截 `dblclick` 冒泡，避免在播放器容器内双击触发全屏切换；`click` 不拦截，点击遮罩关闭后事件仍会冒泡到宿主。关闭按钮的点击会阻止冒泡。
 
+**关闭按钮不受宿主 `button` 全局样式影响。** 关闭按钮（`.edrawer-close`）先 `all: unset` 清掉宿主页面对 `<button>` 的全局样式（`padding`、`margin`、`font`、`box-shadow`、`min-*`、`transform` 等），再重新声明自身样式，并补回键盘焦点环（`:focus-visible`）。类名写了两遍使选择器特异性为 `(0,2,0)`，足以压过 `button`、`[type='button']`、`.xxx button` 这类常见规则；宿主若用 id 选择器或 `!important` 命中按钮，仍会覆盖这里，需要宿主自行避免。
+
+**层级（`z-index`）。** 抽屉根节点默认 `z-index: 100`（`--edrawer-z-index` / `zIndex` 选项可改），低于常见 UI 库的浮层。挂载到 `document.body`（`position: fixed`）时，如果宿主页面有固定导航栏或自己的弹层，抽屉可能被盖住，请把层级调到高于它们。参考值：
+
+| 宿主库       | 常见层级                                                                               |
+| ------------ | -------------------------------------------------------------------------------------- |
+| Bootstrap 5  | 固定导航栏 1030、侧边栏 1045、遮罩 1050、模态框 1055、气泡 1070、提示 1080、Toast 1090 |
+| Ant Design 4 | 抽屉 / 模态框 1000、气泡 1030、下拉 1050、提示 1070                                    |
+| Element UI 2 | 弹层由 PopupManager 从 2000 起递增                                                     |
+
+```css
+/* 例：让抽屉盖过宿主的固定导航栏与模态框 */
+.my-drawer {
+  --edrawer-z-index: 2000;
+}
+```
+
+挂载在播放器容器内（非 `body`）时，抽屉的层级只在该容器的层叠上下文内比较，通常不需要调整。
+
 **无障碍。** 面板带 `role="dialog"`，有头部时通过 `aria-labelledby` 关联标题；关闭按钮为 `<button type="button">`，带 `aria-label="close"`，内联 SVG 图标 `aria-hidden="true"`。未做焦点管理与焦点陷阱。

package/dist/index.cjs

@@ -1,6 +1,6 @@
 /*
-* @ezuikit/control-drawer v0.0.1
-* Copyright (c) 2026-11-09 13:32:10 Ezviz-OpenBiz
+* @ezuikit/control-drawer v0.0.2-beta.1
+* Copyright (c) 2026-11-15 20:14:33 Ezviz-OpenBiz
 * Released under the MIT License.
 */
-"use strict";var __DRAWER_PLACEMENTS__=["left","right","top","bottom"],__$DRAWER_DEFAULT_OPTIONS$__={placement:"right",width:300,height:300,showMask:!0,maskClosable:!0,showHeader:!0,showClose:!0,closeOnEscape:!0,open:!1};function _create_class(Constructor,protoProps,staticProps){return protoProps&&function(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}(Constructor.prototype,protoProps),Constructor}var _uid=0,Drawer=function(){function Drawer(container,options){var left,right,_this=this;this._$root=null,this._$mask=null,this._$title=null,this._$close=null,this._$body=null,this._open=!1,this._destroyed=!1,this._hideTimer=null,this._openTimer=null,this._keydownDoc=null,this._onCloseClick=function(e){e.stopPropagation(),_this.open=!1},this._onMaskClick=function(){_this.options.maskClosable&&(_this.open=!1)},this._onRootDblClick=function(e){e.stopPropagation()},this._onKeydown=function(e){e.isComposing||229===e.keyCode||e.defaultPrevented||"Escape"!==e.key&&"Esc"!==e.key||(_this.open=!1)},this.options=Object.assign({},__$DRAWER_DEFAULT_OPTIONS$__,null!=options?options:{}),this._container=this._resolveContainer(container),this._titleId="edrawer-title-"+ ++_uid,this._render(),this.options.getContainer||this._attach(this._container),left=this,((null!=(right=Drawer)&&"undefined"!=typeof Symbol&&right[Symbol.hasInstance]?right[Symbol.hasInstance](left):left instanceof right)?this.constructor:void 0)===Drawer&&this.applyInitialOpen()}var _proto=Drawer.prototype;return _proto.applyInitialOpen=function(){this.options.open&&(this.open=!0)},_proto.setTitle=function(title){this._destroyed||(this.options.title=title,this._$title&&this._mount(this._$title,title))},_proto.setContent=function(content){this._destroyed||(this.options.content=content,this._$body&&this._mount(this._$body,content))},_proto.updateOptions=function(options){var _ref,_this__$root;if(!this._destroyed){this.options=Object.assign(this.options,options);var parent=null!=(_ref=null==(_this__$root=this._$root)?void 0:_this__$root.parentElement)?_ref:null;this._clearTimers(),this._teardownDom(),this._render(),parent&&this._attach(parent),this._unbindEscape(),this._open&&this.options.closeOnEscape&&this._bindEscape()}},_proto.destroy=function(){this._destroyed||(this._destroyed=!0,this._open=!1,this._clearTimers(),this._unbindEscape(),this._teardownDom())},_proto._resolveContainer=function(container){return"string"==typeof container?document.getElementById(container)||this._query(container)||document.body:container||document.body},_proto._query=function(selector){try{return document.querySelector(selector)}catch(unused){return null}},_proto._resolveMountTarget=function(){return(null==this.options.getContainer?void 0:this.options.getContainer.call(this.options))||this._container},_proto._attach=function(target){var root=this._$root;if(root){root.parentNode!==target&&target.appendChild(root);target===target.ownerDocument.body?root.classList.add("edrawer-fixed"):root.classList.remove("edrawer-fixed")}},_proto._getPlacement=function(){var placement=this.options.placement;return placement&&__DRAWER_PLACEMENTS__.includes(placement)?placement:"right"},_proto._getDuration=function(){var duration=this.options.duration;return"number"==typeof duration&&Number.isFinite(duration)&&duration>=0?duration:300},_proto._toSize=function(value){return null==value||""===value?null:"number"==typeof value?value+"px":value},_proto._render=function(){var placement=this._getPlacement(),_this_options=this.options,showMask=_this_options.showMask,showHeader=_this_options.showHeader,showClose=_this_options.showClose,className=_this_options.className,zIndex=_this_options.zIndex,title=_this_options.title,content=_this_options.content,root=document.createElement("div");if(root.className="edrawer edrawer-"+placement+" "+"edrawer-"+(this._open?"open":"hidden"),className&&className.split(/\s+/).forEach(function(cls){cls&&root.classList.add(cls)}),"number"==typeof zIndex&&(root.style.zIndex=""+zIndex),root.style.setProperty("--edrawer-duration",this._getDuration()+"ms"),root.addEventListener("dblclick",this._onRootDblClick),showMask){var mask=document.createElement("div");mask.className="edrawer-mask",mask.addEventListener("click",this._onMaskClick),root.appendChild(mask),this._$mask=mask}var panel=document.createElement("div");panel.className="edrawer-panel",panel.setAttribute("role","dialog");var horizontal="left"===placement||"right"===placement,size=this._toSize(horizontal?this.options.width:this.options.height);if(size&&(horizontal?panel.style.width=size:panel.style.height=size),showHeader){var header=document.createElement("div");header.className="edrawer-header";var titleEl=document.createElement("div");if(titleEl.className="edrawer-title",titleEl.id=this._titleId,void 0!==title&&this._mount(titleEl,title),header.appendChild(titleEl),panel.setAttribute("aria-labelledby",this._titleId),this._$title=titleEl,showClose){var close=document.createElement("button");close.type="button",close.className="edrawer-close",close.setAttribute("aria-label","close"),close.innerHTML='<svg viewBox="0 0 24 24" fill="none" width="1em" height="1em" stroke="currentColor" focusable="false" aria-hidden="true">\n  <path d="M0 0L15.9998 0" stroke-linecap="round" stroke-width="1.5" transform="matrix(0.707099,0.707114,-0.707114,0.707099,6.34277,6.34326)" />\n  <path d="M0 0L15.9998 0" stroke-linecap="round" stroke-width="1.5" transform="matrix(0.707099,-0.707114,0.707114,0.707099,6.34277,17.6567)" />\n</svg>',close.addEventListener("click",this._onCloseClick),header.appendChild(close),this._$close=close}panel.appendChild(header)}var body=document.createElement("div");body.className="edrawer-body",void 0!==content&&this._mount(body,content),panel.appendChild(body),root.appendChild(panel),this._$root=root,this._$body=body},_proto._mount=function(target,content){"string"!=typeof content?(target.innerHTML="",content&&target.appendChild(content)):target.innerHTML=content},_proto._teardownDom=function(){var _this__$close,_this__$mask,_this__$root_parentNode;(null==(_this__$close=this._$close)||_this__$close.removeEventListener("click",this._onCloseClick),null==(_this__$mask=this._$mask)||_this__$mask.removeEventListener("click",this._onMaskClick),this._$root)&&(this._$root.removeEventListener("dblclick",this._onRootDblClick),null==(_this__$root_parentNode=this._$root.parentNode)||_this__$root_parentNode.removeChild(this._$root));this._$root=null,this._$mask=null,this._$title=null,this._$close=null,this._$body=null},_proto._clearTimers=function(){null!==this._hideTimer&&(clearTimeout(this._hideTimer),this._hideTimer=null),null!==this._openTimer&&(clearTimeout(this._openTimer),this._openTimer=null)},_proto._bindEscape=function(){var _ref,_this__$root;this._unbindEscape();var doc=null!=(_ref=null==(_this__$root=this._$root)?void 0:_this__$root.ownerDocument)?_ref:document;doc.addEventListener("keydown",this._onKeydown),this._keydownDoc=doc},_proto._unbindEscape=function(){var _this__keydownDoc;null==(_this__keydownDoc=this._keydownDoc)||_this__keydownDoc.removeEventListener("keydown",this._onKeydown),this._keydownDoc=null},_proto._reflow=function(el){return el.offsetHeight},_create_class(Drawer,[{key:"open",get:function(){return this._open},set:function(open){var _this=this;if(!this._destroyed&&this._open!==open&&this._$root){var target=open?this._resolveMountTarget():null;this._open=open,this._clearTimers();var duration=this._getDuration();open?null==this.options.onOpenStart||this.options.onOpenStart.call(this.options):null==this.options.onCloseStart||this.options.onCloseStart.call(this.options);var root=this._$root;!this._destroyed&&this._open===open&&root&&(open?(this._attach(target),root.classList.remove("edrawer-hidden"),this._reflow(root),root.classList.add("edrawer-open"),this.options.closeOnEscape&&this._bindEscape(),this._openTimer=setTimeout(function(){_this._openTimer=null,null==_this.options.onOpenEnd||_this.options.onOpenEnd.call(_this.options)},duration)):(root.classList.remove("edrawer-open"),this._hideTimer=setTimeout(function(){var _this__$root;_this._hideTimer=null,null==(_this__$root=_this._$root)||_this__$root.classList.add("edrawer-hidden"),null==_this.options.onCloseEnd||_this.options.onCloseEnd.call(_this.options)},duration),this._unbindEscape()),null==this.options.onOpenChange||this.options.onOpenChange.call(this.options,open))}}}]),Drawer}();Drawer.VERSION="0.0.1",module.exports=Drawer;
+"use strict";var __DRAWER_PLACEMENTS__=["left","right","top","bottom"],__$DRAWER_DEFAULT_OPTIONS$__={placement:"right",width:300,height:300,showMask:!0,maskClosable:!0,showHeader:!0,showClose:!0,closeOnEscape:!0,open:!1};function _create_class(Constructor,protoProps,staticProps){return protoProps&&function(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}(Constructor.prototype,protoProps),Constructor}var _uid=0,_bodyScrollLocks=new WeakMap,Drawer=function(){function Drawer(container,options){var left,right,_this=this;this._$root=null,this._$mask=null,this._$title=null,this._$close=null,this._$body=null,this._open=!1,this._destroyed=!1,this._hideTimer=null,this._openTimer=null,this._keydownDoc=null,this._scrollLockDoc=null,this._onCloseClick=function(e){e.stopPropagation(),_this.open=!1},this._onMaskClick=function(){_this.options.maskClosable&&(_this.open=!1)},this._onRootDblClick=function(e){e.stopPropagation()},this._onKeydown=function(e){e.isComposing||229===e.keyCode||e.defaultPrevented||"Escape"!==e.key&&"Esc"!==e.key||(_this.open=!1)},this.options=Object.assign({},__$DRAWER_DEFAULT_OPTIONS$__,null!=options?options:{}),this._container=this._resolveContainer(container),this._titleId="edrawer-title-"+ ++_uid,this._render(),this.options.getContainer||this._attach(this._container),left=this,((null!=(right=Drawer)&&"undefined"!=typeof Symbol&&right[Symbol.hasInstance]?right[Symbol.hasInstance](left):left instanceof right)?this.constructor:void 0)===Drawer&&this.applyInitialOpen()}var _proto=Drawer.prototype;return _proto.applyInitialOpen=function(){this.options.open&&(this.open=!0)},_proto.setTitle=function(title){this._destroyed||(this.options.title=title,this._$title&&this._mount(this._$title,title))},_proto.setContent=function(content){this._destroyed||(this.options.content=content,this._$body&&this._mount(this._$body,content))},_proto.updateOptions=function(options){var _ref,_this__$root;if(!this._destroyed){this.options=Object.assign(this.options,options);var parent=null!=(_ref=null==(_this__$root=this._$root)?void 0:_this__$root.parentElement)?_ref:null;this._clearTimers(),this._teardownDom(),this._render(),parent&&this._attach(parent),this._unbindEscape(),this._open&&this.options.closeOnEscape&&this._bindEscape()}},_proto.destroy=function(){this._destroyed||(this._destroyed=!0,this._open=!1,this._clearTimers(),this._unbindEscape(),this._unlockBodyScroll(),this._teardownDom())},_proto._resolveContainer=function(container){return"string"==typeof container?document.getElementById(container)||this._query(container)||document.body:container||document.body},_proto._query=function(selector){try{return document.querySelector(selector)}catch(unused){return null}},_proto._resolveMountTarget=function(){return(null==this.options.getContainer?void 0:this.options.getContainer.call(this.options))||this._container},_proto._attach=function(target){var root=this._$root;if(root){root.parentNode!==target&&target.appendChild(root);target===target.ownerDocument.body?root.classList.add("edrawer-fixed"):root.classList.remove("edrawer-fixed")}},_proto._getPlacement=function(){var placement=this.options.placement;return placement&&__DRAWER_PLACEMENTS__.includes(placement)?placement:"right"},_proto._getDuration=function(){var duration=this.options.duration;return"number"==typeof duration&&Number.isFinite(duration)&&duration>=0?duration:300},_proto._toSize=function(value){return null==value||""===value?null:"number"==typeof value?value+"px":value},_proto._render=function(){var placement=this._getPlacement(),_this_options=this.options,showMask=_this_options.showMask,showHeader=_this_options.showHeader,showClose=_this_options.showClose,className=_this_options.className,zIndex=_this_options.zIndex,title=_this_options.title,content=_this_options.content,root=document.createElement("div");if(root.className="edrawer edrawer-"+placement+" "+"edrawer-"+(this._open?"open":"hidden"),className&&className.split(/\s+/).forEach(function(cls){cls&&root.classList.add(cls)}),"number"==typeof zIndex&&(root.style.zIndex=""+zIndex),root.style.setProperty("--edrawer-duration",this._getDuration()+"ms"),root.addEventListener("dblclick",this._onRootDblClick),showMask){var mask=document.createElement("div");mask.className="edrawer-mask",mask.addEventListener("click",this._onMaskClick),root.appendChild(mask),this._$mask=mask}var panel=document.createElement("div");panel.className="edrawer-panel",panel.setAttribute("role","dialog");var horizontal="left"===placement||"right"===placement,size=this._toSize(horizontal?this.options.width:this.options.height);if(size&&(horizontal?panel.style.width=size:panel.style.height=size),showHeader){var header=document.createElement("div");header.className="edrawer-header";var titleEl=document.createElement("div");if(titleEl.className="edrawer-title",titleEl.id=this._titleId,void 0!==title&&this._mount(titleEl,title),header.appendChild(titleEl),panel.setAttribute("aria-labelledby",this._titleId),this._$title=titleEl,showClose){var close=document.createElement("button");close.type="button",close.className="edrawer-close",close.setAttribute("aria-label","close"),close.innerHTML='<svg viewBox="0 0 24 24" fill="none" width="1em" height="1em" stroke="currentColor" focusable="false" aria-hidden="true">\n  <path d="M0 0L15.9998 0" stroke-linecap="round" stroke-width="1.5" transform="matrix(0.707099,0.707114,-0.707114,0.707099,6.34277,6.34326)" />\n  <path d="M0 0L15.9998 0" stroke-linecap="round" stroke-width="1.5" transform="matrix(0.707099,-0.707114,0.707114,0.707099,6.34277,17.6567)" />\n</svg>',close.addEventListener("click",this._onCloseClick),header.appendChild(close),this._$close=close}panel.appendChild(header)}var body=document.createElement("div");body.className="edrawer-body",void 0!==content&&this._mount(body,content),panel.appendChild(body),root.appendChild(panel),this._$root=root,this._$body=body},_proto._mount=function(target,content){"string"!=typeof content?(target.innerHTML="",content&&target.appendChild(content)):target.innerHTML=content},_proto._teardownDom=function(){var _this__$close,_this__$mask,_this__$root_parentNode;(null==(_this__$close=this._$close)||_this__$close.removeEventListener("click",this._onCloseClick),null==(_this__$mask=this._$mask)||_this__$mask.removeEventListener("click",this._onMaskClick),this._$root)&&(this._$root.removeEventListener("dblclick",this._onRootDblClick),null==(_this__$root_parentNode=this._$root.parentNode)||_this__$root_parentNode.removeChild(this._$root));this._$root=null,this._$mask=null,this._$title=null,this._$close=null,this._$body=null},_proto._clearTimers=function(){null!==this._hideTimer&&(clearTimeout(this._hideTimer),this._hideTimer=null),null!==this._openTimer&&(clearTimeout(this._openTimer),this._openTimer=null)},_proto._bindEscape=function(){var _ref,_this__$root;this._unbindEscape();var doc=null!=(_ref=null==(_this__$root=this._$root)?void 0:_this__$root.ownerDocument)?_ref:document;doc.addEventListener("keydown",this._onKeydown),this._keydownDoc=doc},_proto._unbindEscape=function(){var _this__keydownDoc;null==(_this__keydownDoc=this._keydownDoc)||_this__keydownDoc.removeEventListener("keydown",this._onKeydown),this._keydownDoc=null},_proto._lockBodyScroll=function(doc){var _bodyScrollLocks_get;if(this._scrollLockDoc!==doc){this._unlockBodyScroll();var count=(null!=(_bodyScrollLocks_get=_bodyScrollLocks.get(doc))?_bodyScrollLocks_get:0)+1;_bodyScrollLocks.set(doc,count),doc.body.classList.add("edrawer-body-noscroll"),this._scrollLockDoc=doc}},_proto._unlockBodyScroll=function(){var _bodyScrollLocks_get,doc=this._scrollLockDoc;if(doc){this._scrollLockDoc=null;var _doc_body,count=Math.max((null!=(_bodyScrollLocks_get=_bodyScrollLocks.get(doc))?_bodyScrollLocks_get:1)-1,0);if(0===count)_bodyScrollLocks.delete(doc),null==(_doc_body=doc.body)||_doc_body.classList.remove("edrawer-body-noscroll");else _bodyScrollLocks.set(doc,count)}},_proto._reflow=function(el){return el.offsetHeight},_create_class(Drawer,[{key:"open",get:function(){return this._open},set:function(open){var _this=this;if(!this._destroyed&&this._open!==open&&this._$root){var target=open?this._resolveMountTarget():null;this._open=open,this._clearTimers();var duration=this._getDuration();open?null==this.options.onOpenStart||this.options.onOpenStart.call(this.options):null==this.options.onCloseStart||this.options.onCloseStart.call(this.options);var root=this._$root;!this._destroyed&&this._open===open&&root&&(open?(this._attach(target),target===target.ownerDocument.body&&this._lockBodyScroll(target.ownerDocument),root.classList.remove("edrawer-hidden"),this._reflow(root),root.classList.add("edrawer-open"),this.options.closeOnEscape&&this._bindEscape(),this._openTimer=setTimeout(function(){_this._openTimer=null,null==_this.options.onOpenEnd||_this.options.onOpenEnd.call(_this.options)},duration)):(root.classList.remove("edrawer-open"),this._unlockBodyScroll(),this._hideTimer=setTimeout(function(){var _this__$root;_this._hideTimer=null,null==(_this__$root=_this._$root)||_this__$root.classList.add("edrawer-hidden"),null==_this.options.onCloseEnd||_this.options.onCloseEnd.call(_this.options)},duration),this._unbindEscape()),null==this.options.onOpenChange||this.options.onOpenChange.call(this.options,open))}}}]),Drawer}();Drawer.VERSION="0.0.2-beta.1",module.exports=Drawer;

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 /*
-* @ezuikit/control-drawer v0.0.1
-* Copyright (c) 2026-11-09 13:32:10 Ezviz-OpenBiz
+* @ezuikit/control-drawer v0.0.2-beta.1
+* Copyright (c) 2026-11-15 20:14:33 Ezviz-OpenBiz
 * Released under the MIT License.
 */
-var __DRAWER_PLACEMENTS__=["left","right","top","bottom"],__$DRAWER_DEFAULT_OPTIONS$__={placement:"right",width:300,height:300,showMask:!0,maskClosable:!0,showHeader:!0,showClose:!0,closeOnEscape:!0,open:!1};function _create_class(Constructor,protoProps,staticProps){return protoProps&&function(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}(Constructor.prototype,protoProps),Constructor}var _uid=0,Drawer=function(){function Drawer(container,options){var left,right,_this=this;this._$root=null,this._$mask=null,this._$title=null,this._$close=null,this._$body=null,this._open=!1,this._destroyed=!1,this._hideTimer=null,this._openTimer=null,this._keydownDoc=null,this._onCloseClick=function(e){e.stopPropagation(),_this.open=!1},this._onMaskClick=function(){_this.options.maskClosable&&(_this.open=!1)},this._onRootDblClick=function(e){e.stopPropagation()},this._onKeydown=function(e){e.isComposing||229===e.keyCode||e.defaultPrevented||"Escape"!==e.key&&"Esc"!==e.key||(_this.open=!1)},this.options=Object.assign({},__$DRAWER_DEFAULT_OPTIONS$__,null!=options?options:{}),this._container=this._resolveContainer(container),this._titleId="edrawer-title-"+ ++_uid,this._render(),this.options.getContainer||this._attach(this._container),left=this,((null!=(right=Drawer)&&"undefined"!=typeof Symbol&&right[Symbol.hasInstance]?right[Symbol.hasInstance](left):left instanceof right)?this.constructor:void 0)===Drawer&&this.applyInitialOpen()}var _proto=Drawer.prototype;return _proto.applyInitialOpen=function(){this.options.open&&(this.open=!0)},_proto.setTitle=function(title){this._destroyed||(this.options.title=title,this._$title&&this._mount(this._$title,title))},_proto.setContent=function(content){this._destroyed||(this.options.content=content,this._$body&&this._mount(this._$body,content))},_proto.updateOptions=function(options){var _ref,_this__$root;if(!this._destroyed){this.options=Object.assign(this.options,options);var parent=null!=(_ref=null==(_this__$root=this._$root)?void 0:_this__$root.parentElement)?_ref:null;this._clearTimers(),this._teardownDom(),this._render(),parent&&this._attach(parent),this._unbindEscape(),this._open&&this.options.closeOnEscape&&this._bindEscape()}},_proto.destroy=function(){this._destroyed||(this._destroyed=!0,this._open=!1,this._clearTimers(),this._unbindEscape(),this._teardownDom())},_proto._resolveContainer=function(container){return"string"==typeof container?document.getElementById(container)||this._query(container)||document.body:container||document.body},_proto._query=function(selector){try{return document.querySelector(selector)}catch(unused){return null}},_proto._resolveMountTarget=function(){return(null==this.options.getContainer?void 0:this.options.getContainer.call(this.options))||this._container},_proto._attach=function(target){var root=this._$root;if(root){root.parentNode!==target&&target.appendChild(root);target===target.ownerDocument.body?root.classList.add("edrawer-fixed"):root.classList.remove("edrawer-fixed")}},_proto._getPlacement=function(){var placement=this.options.placement;return placement&&__DRAWER_PLACEMENTS__.includes(placement)?placement:"right"},_proto._getDuration=function(){var duration=this.options.duration;return"number"==typeof duration&&Number.isFinite(duration)&&duration>=0?duration:300},_proto._toSize=function(value){return null==value||""===value?null:"number"==typeof value?value+"px":value},_proto._render=function(){var placement=this._getPlacement(),_this_options=this.options,showMask=_this_options.showMask,showHeader=_this_options.showHeader,showClose=_this_options.showClose,className=_this_options.className,zIndex=_this_options.zIndex,title=_this_options.title,content=_this_options.content,root=document.createElement("div");if(root.className="edrawer edrawer-"+placement+" "+"edrawer-"+(this._open?"open":"hidden"),className&&className.split(/\s+/).forEach(function(cls){cls&&root.classList.add(cls)}),"number"==typeof zIndex&&(root.style.zIndex=""+zIndex),root.style.setProperty("--edrawer-duration",this._getDuration()+"ms"),root.addEventListener("dblclick",this._onRootDblClick),showMask){var mask=document.createElement("div");mask.className="edrawer-mask",mask.addEventListener("click",this._onMaskClick),root.appendChild(mask),this._$mask=mask}var panel=document.createElement("div");panel.className="edrawer-panel",panel.setAttribute("role","dialog");var horizontal="left"===placement||"right"===placement,size=this._toSize(horizontal?this.options.width:this.options.height);if(size&&(horizontal?panel.style.width=size:panel.style.height=size),showHeader){var header=document.createElement("div");header.className="edrawer-header";var titleEl=document.createElement("div");if(titleEl.className="edrawer-title",titleEl.id=this._titleId,void 0!==title&&this._mount(titleEl,title),header.appendChild(titleEl),panel.setAttribute("aria-labelledby",this._titleId),this._$title=titleEl,showClose){var close=document.createElement("button");close.type="button",close.className="edrawer-close",close.setAttribute("aria-label","close"),close.innerHTML='<svg viewBox="0 0 24 24" fill="none" width="1em" height="1em" stroke="currentColor" focusable="false" aria-hidden="true">\n  <path d="M0 0L15.9998 0" stroke-linecap="round" stroke-width="1.5" transform="matrix(0.707099,0.707114,-0.707114,0.707099,6.34277,6.34326)" />\n  <path d="M0 0L15.9998 0" stroke-linecap="round" stroke-width="1.5" transform="matrix(0.707099,-0.707114,0.707114,0.707099,6.34277,17.6567)" />\n</svg>',close.addEventListener("click",this._onCloseClick),header.appendChild(close),this._$close=close}panel.appendChild(header)}var body=document.createElement("div");body.className="edrawer-body",void 0!==content&&this._mount(body,content),panel.appendChild(body),root.appendChild(panel),this._$root=root,this._$body=body},_proto._mount=function(target,content){"string"!=typeof content?(target.innerHTML="",content&&target.appendChild(content)):target.innerHTML=content},_proto._teardownDom=function(){var _this__$close,_this__$mask,_this__$root_parentNode;(null==(_this__$close=this._$close)||_this__$close.removeEventListener("click",this._onCloseClick),null==(_this__$mask=this._$mask)||_this__$mask.removeEventListener("click",this._onMaskClick),this._$root)&&(this._$root.removeEventListener("dblclick",this._onRootDblClick),null==(_this__$root_parentNode=this._$root.parentNode)||_this__$root_parentNode.removeChild(this._$root));this._$root=null,this._$mask=null,this._$title=null,this._$close=null,this._$body=null},_proto._clearTimers=function(){null!==this._hideTimer&&(clearTimeout(this._hideTimer),this._hideTimer=null),null!==this._openTimer&&(clearTimeout(this._openTimer),this._openTimer=null)},_proto._bindEscape=function(){var _ref,_this__$root;this._unbindEscape();var doc=null!=(_ref=null==(_this__$root=this._$root)?void 0:_this__$root.ownerDocument)?_ref:document;doc.addEventListener("keydown",this._onKeydown),this._keydownDoc=doc},_proto._unbindEscape=function(){var _this__keydownDoc;null==(_this__keydownDoc=this._keydownDoc)||_this__keydownDoc.removeEventListener("keydown",this._onKeydown),this._keydownDoc=null},_proto._reflow=function(el){return el.offsetHeight},_create_class(Drawer,[{key:"open",get:function(){return this._open},set:function(open){var _this=this;if(!this._destroyed&&this._open!==open&&this._$root){var target=open?this._resolveMountTarget():null;this._open=open,this._clearTimers();var duration=this._getDuration();open?null==this.options.onOpenStart||this.options.onOpenStart.call(this.options):null==this.options.onCloseStart||this.options.onCloseStart.call(this.options);var root=this._$root;!this._destroyed&&this._open===open&&root&&(open?(this._attach(target),root.classList.remove("edrawer-hidden"),this._reflow(root),root.classList.add("edrawer-open"),this.options.closeOnEscape&&this._bindEscape(),this._openTimer=setTimeout(function(){_this._openTimer=null,null==_this.options.onOpenEnd||_this.options.onOpenEnd.call(_this.options)},duration)):(root.classList.remove("edrawer-open"),this._hideTimer=setTimeout(function(){var _this__$root;_this._hideTimer=null,null==(_this__$root=_this._$root)||_this__$root.classList.add("edrawer-hidden"),null==_this.options.onCloseEnd||_this.options.onCloseEnd.call(_this.options)},duration),this._unbindEscape()),null==this.options.onOpenChange||this.options.onOpenChange.call(this.options,open))}}}]),Drawer}();Drawer.VERSION="0.0.1";export{Drawer as default};
+var __DRAWER_PLACEMENTS__=["left","right","top","bottom"],__$DRAWER_DEFAULT_OPTIONS$__={placement:"right",width:300,height:300,showMask:!0,maskClosable:!0,showHeader:!0,showClose:!0,closeOnEscape:!0,open:!1};function _create_class(Constructor,protoProps,staticProps){return protoProps&&function(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}(Constructor.prototype,protoProps),Constructor}var _uid=0,_bodyScrollLocks=new WeakMap,Drawer=function(){function Drawer(container,options){var left,right,_this=this;this._$root=null,this._$mask=null,this._$title=null,this._$close=null,this._$body=null,this._open=!1,this._destroyed=!1,this._hideTimer=null,this._openTimer=null,this._keydownDoc=null,this._scrollLockDoc=null,this._onCloseClick=function(e){e.stopPropagation(),_this.open=!1},this._onMaskClick=function(){_this.options.maskClosable&&(_this.open=!1)},this._onRootDblClick=function(e){e.stopPropagation()},this._onKeydown=function(e){e.isComposing||229===e.keyCode||e.defaultPrevented||"Escape"!==e.key&&"Esc"!==e.key||(_this.open=!1)},this.options=Object.assign({},__$DRAWER_DEFAULT_OPTIONS$__,null!=options?options:{}),this._container=this._resolveContainer(container),this._titleId="edrawer-title-"+ ++_uid,this._render(),this.options.getContainer||this._attach(this._container),left=this,((null!=(right=Drawer)&&"undefined"!=typeof Symbol&&right[Symbol.hasInstance]?right[Symbol.hasInstance](left):left instanceof right)?this.constructor:void 0)===Drawer&&this.applyInitialOpen()}var _proto=Drawer.prototype;return _proto.applyInitialOpen=function(){this.options.open&&(this.open=!0)},_proto.setTitle=function(title){this._destroyed||(this.options.title=title,this._$title&&this._mount(this._$title,title))},_proto.setContent=function(content){this._destroyed||(this.options.content=content,this._$body&&this._mount(this._$body,content))},_proto.updateOptions=function(options){var _ref,_this__$root;if(!this._destroyed){this.options=Object.assign(this.options,options);var parent=null!=(_ref=null==(_this__$root=this._$root)?void 0:_this__$root.parentElement)?_ref:null;this._clearTimers(),this._teardownDom(),this._render(),parent&&this._attach(parent),this._unbindEscape(),this._open&&this.options.closeOnEscape&&this._bindEscape()}},_proto.destroy=function(){this._destroyed||(this._destroyed=!0,this._open=!1,this._clearTimers(),this._unbindEscape(),this._unlockBodyScroll(),this._teardownDom())},_proto._resolveContainer=function(container){return"string"==typeof container?document.getElementById(container)||this._query(container)||document.body:container||document.body},_proto._query=function(selector){try{return document.querySelector(selector)}catch(unused){return null}},_proto._resolveMountTarget=function(){return(null==this.options.getContainer?void 0:this.options.getContainer.call(this.options))||this._container},_proto._attach=function(target){var root=this._$root;if(root){root.parentNode!==target&&target.appendChild(root);target===target.ownerDocument.body?root.classList.add("edrawer-fixed"):root.classList.remove("edrawer-fixed")}},_proto._getPlacement=function(){var placement=this.options.placement;return placement&&__DRAWER_PLACEMENTS__.includes(placement)?placement:"right"},_proto._getDuration=function(){var duration=this.options.duration;return"number"==typeof duration&&Number.isFinite(duration)&&duration>=0?duration:300},_proto._toSize=function(value){return null==value||""===value?null:"number"==typeof value?value+"px":value},_proto._render=function(){var placement=this._getPlacement(),_this_options=this.options,showMask=_this_options.showMask,showHeader=_this_options.showHeader,showClose=_this_options.showClose,className=_this_options.className,zIndex=_this_options.zIndex,title=_this_options.title,content=_this_options.content,root=document.createElement("div");if(root.className="edrawer edrawer-"+placement+" "+"edrawer-"+(this._open?"open":"hidden"),className&&className.split(/\s+/).forEach(function(cls){cls&&root.classList.add(cls)}),"number"==typeof zIndex&&(root.style.zIndex=""+zIndex),root.style.setProperty("--edrawer-duration",this._getDuration()+"ms"),root.addEventListener("dblclick",this._onRootDblClick),showMask){var mask=document.createElement("div");mask.className="edrawer-mask",mask.addEventListener("click",this._onMaskClick),root.appendChild(mask),this._$mask=mask}var panel=document.createElement("div");panel.className="edrawer-panel",panel.setAttribute("role","dialog");var horizontal="left"===placement||"right"===placement,size=this._toSize(horizontal?this.options.width:this.options.height);if(size&&(horizontal?panel.style.width=size:panel.style.height=size),showHeader){var header=document.createElement("div");header.className="edrawer-header";var titleEl=document.createElement("div");if(titleEl.className="edrawer-title",titleEl.id=this._titleId,void 0!==title&&this._mount(titleEl,title),header.appendChild(titleEl),panel.setAttribute("aria-labelledby",this._titleId),this._$title=titleEl,showClose){var close=document.createElement("button");close.type="button",close.className="edrawer-close",close.setAttribute("aria-label","close"),close.innerHTML='<svg viewBox="0 0 24 24" fill="none" width="1em" height="1em" stroke="currentColor" focusable="false" aria-hidden="true">\n  <path d="M0 0L15.9998 0" stroke-linecap="round" stroke-width="1.5" transform="matrix(0.707099,0.707114,-0.707114,0.707099,6.34277,6.34326)" />\n  <path d="M0 0L15.9998 0" stroke-linecap="round" stroke-width="1.5" transform="matrix(0.707099,-0.707114,0.707114,0.707099,6.34277,17.6567)" />\n</svg>',close.addEventListener("click",this._onCloseClick),header.appendChild(close),this._$close=close}panel.appendChild(header)}var body=document.createElement("div");body.className="edrawer-body",void 0!==content&&this._mount(body,content),panel.appendChild(body),root.appendChild(panel),this._$root=root,this._$body=body},_proto._mount=function(target,content){"string"!=typeof content?(target.innerHTML="",content&&target.appendChild(content)):target.innerHTML=content},_proto._teardownDom=function(){var _this__$close,_this__$mask,_this__$root_parentNode;(null==(_this__$close=this._$close)||_this__$close.removeEventListener("click",this._onCloseClick),null==(_this__$mask=this._$mask)||_this__$mask.removeEventListener("click",this._onMaskClick),this._$root)&&(this._$root.removeEventListener("dblclick",this._onRootDblClick),null==(_this__$root_parentNode=this._$root.parentNode)||_this__$root_parentNode.removeChild(this._$root));this._$root=null,this._$mask=null,this._$title=null,this._$close=null,this._$body=null},_proto._clearTimers=function(){null!==this._hideTimer&&(clearTimeout(this._hideTimer),this._hideTimer=null),null!==this._openTimer&&(clearTimeout(this._openTimer),this._openTimer=null)},_proto._bindEscape=function(){var _ref,_this__$root;this._unbindEscape();var doc=null!=(_ref=null==(_this__$root=this._$root)?void 0:_this__$root.ownerDocument)?_ref:document;doc.addEventListener("keydown",this._onKeydown),this._keydownDoc=doc},_proto._unbindEscape=function(){var _this__keydownDoc;null==(_this__keydownDoc=this._keydownDoc)||_this__keydownDoc.removeEventListener("keydown",this._onKeydown),this._keydownDoc=null},_proto._lockBodyScroll=function(doc){var _bodyScrollLocks_get;if(this._scrollLockDoc!==doc){this._unlockBodyScroll();var count=(null!=(_bodyScrollLocks_get=_bodyScrollLocks.get(doc))?_bodyScrollLocks_get:0)+1;_bodyScrollLocks.set(doc,count),doc.body.classList.add("edrawer-body-noscroll"),this._scrollLockDoc=doc}},_proto._unlockBodyScroll=function(){var _bodyScrollLocks_get,doc=this._scrollLockDoc;if(doc){this._scrollLockDoc=null;var _doc_body,count=Math.max((null!=(_bodyScrollLocks_get=_bodyScrollLocks.get(doc))?_bodyScrollLocks_get:1)-1,0);if(0===count)_bodyScrollLocks.delete(doc),null==(_doc_body=doc.body)||_doc_body.classList.remove("edrawer-body-noscroll");else _bodyScrollLocks.set(doc,count)}},_proto._reflow=function(el){return el.offsetHeight},_create_class(Drawer,[{key:"open",get:function(){return this._open},set:function(open){var _this=this;if(!this._destroyed&&this._open!==open&&this._$root){var target=open?this._resolveMountTarget():null;this._open=open,this._clearTimers();var duration=this._getDuration();open?null==this.options.onOpenStart||this.options.onOpenStart.call(this.options):null==this.options.onCloseStart||this.options.onCloseStart.call(this.options);var root=this._$root;!this._destroyed&&this._open===open&&root&&(open?(this._attach(target),target===target.ownerDocument.body&&this._lockBodyScroll(target.ownerDocument),root.classList.remove("edrawer-hidden"),this._reflow(root),root.classList.add("edrawer-open"),this.options.closeOnEscape&&this._bindEscape(),this._openTimer=setTimeout(function(){_this._openTimer=null,null==_this.options.onOpenEnd||_this.options.onOpenEnd.call(_this.options)},duration)):(root.classList.remove("edrawer-open"),this._unlockBodyScroll(),this._hideTimer=setTimeout(function(){var _this__$root;_this._hideTimer=null,null==(_this__$root=_this._$root)||_this__$root.classList.add("edrawer-hidden"),null==_this.options.onCloseEnd||_this.options.onCloseEnd.call(_this.options)},duration),this._unbindEscape()),null==this.options.onOpenChange||this.options.onOpenChange.call(this.options,open))}}}]),Drawer}();Drawer.VERSION="0.0.2-beta.1";export{Drawer as default};

package/dist/index.umd.js

@@ -1,6 +1,6 @@
 /*
-* @ezuikit/control-drawer v0.0.1
-* Copyright (c) 2026-11-09 13:32:10 Ezviz-OpenBiz
+* @ezuikit/control-drawer v0.0.2-beta.1
+* Copyright (c) 2026-11-15 20:14:33 Ezviz-OpenBiz
 * Released under the MIT License.
 */
-!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?module.exports=factory():"function"==typeof define&&define.amd?define(factory):(global="undefined"!=typeof globalThis?globalThis:global||self).Drawer=factory()}(this,function(){"use strict";var __DRAWER_PLACEMENTS__=["left","right","top","bottom"],__$DRAWER_DEFAULT_OPTIONS$__={placement:"right",width:300,height:300,showMask:!0,maskClosable:!0,showHeader:!0,showClose:!0,closeOnEscape:!0,open:!1};function _create_class(Constructor,protoProps,staticProps){return protoProps&&function(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}(Constructor.prototype,protoProps),Constructor}var _uid=0,Drawer=function(){function Drawer(container,options){var left,right,_this=this;this._$root=null,this._$mask=null,this._$title=null,this._$close=null,this._$body=null,this._open=!1,this._destroyed=!1,this._hideTimer=null,this._openTimer=null,this._keydownDoc=null,this._onCloseClick=function(e){e.stopPropagation(),_this.open=!1},this._onMaskClick=function(){_this.options.maskClosable&&(_this.open=!1)},this._onRootDblClick=function(e){e.stopPropagation()},this._onKeydown=function(e){e.isComposing||229===e.keyCode||e.defaultPrevented||"Escape"!==e.key&&"Esc"!==e.key||(_this.open=!1)},this.options=Object.assign({},__$DRAWER_DEFAULT_OPTIONS$__,null!=options?options:{}),this._container=this._resolveContainer(container),this._titleId="edrawer-title-"+ ++_uid,this._render(),this.options.getContainer||this._attach(this._container),left=this,((null!=(right=Drawer)&&"undefined"!=typeof Symbol&&right[Symbol.hasInstance]?right[Symbol.hasInstance](left):left instanceof right)?this.constructor:void 0)===Drawer&&this.applyInitialOpen()}var _proto=Drawer.prototype;return _proto.applyInitialOpen=function(){this.options.open&&(this.open=!0)},_proto.setTitle=function(title){this._destroyed||(this.options.title=title,this._$title&&this._mount(this._$title,title))},_proto.setContent=function(content){this._destroyed||(this.options.content=content,this._$body&&this._mount(this._$body,content))},_proto.updateOptions=function(options){var _ref,_this__$root;if(!this._destroyed){this.options=Object.assign(this.options,options);var parent=null!=(_ref=null==(_this__$root=this._$root)?void 0:_this__$root.parentElement)?_ref:null;this._clearTimers(),this._teardownDom(),this._render(),parent&&this._attach(parent),this._unbindEscape(),this._open&&this.options.closeOnEscape&&this._bindEscape()}},_proto.destroy=function(){this._destroyed||(this._destroyed=!0,this._open=!1,this._clearTimers(),this._unbindEscape(),this._teardownDom())},_proto._resolveContainer=function(container){return"string"==typeof container?document.getElementById(container)||this._query(container)||document.body:container||document.body},_proto._query=function(selector){try{return document.querySelector(selector)}catch(unused){return null}},_proto._resolveMountTarget=function(){return(null==this.options.getContainer?void 0:this.options.getContainer.call(this.options))||this._container},_proto._attach=function(target){var root=this._$root;if(root){root.parentNode!==target&&target.appendChild(root);target===target.ownerDocument.body?root.classList.add("edrawer-fixed"):root.classList.remove("edrawer-fixed")}},_proto._getPlacement=function(){var placement=this.options.placement;return placement&&__DRAWER_PLACEMENTS__.includes(placement)?placement:"right"},_proto._getDuration=function(){var duration=this.options.duration;return"number"==typeof duration&&Number.isFinite(duration)&&duration>=0?duration:300},_proto._toSize=function(value){return null==value||""===value?null:"number"==typeof value?value+"px":value},_proto._render=function(){var placement=this._getPlacement(),_this_options=this.options,showMask=_this_options.showMask,showHeader=_this_options.showHeader,showClose=_this_options.showClose,className=_this_options.className,zIndex=_this_options.zIndex,title=_this_options.title,content=_this_options.content,root=document.createElement("div");if(root.className="edrawer edrawer-"+placement+" "+"edrawer-"+(this._open?"open":"hidden"),className&&className.split(/\s+/).forEach(function(cls){cls&&root.classList.add(cls)}),"number"==typeof zIndex&&(root.style.zIndex=""+zIndex),root.style.setProperty("--edrawer-duration",this._getDuration()+"ms"),root.addEventListener("dblclick",this._onRootDblClick),showMask){var mask=document.createElement("div");mask.className="edrawer-mask",mask.addEventListener("click",this._onMaskClick),root.appendChild(mask),this._$mask=mask}var panel=document.createElement("div");panel.className="edrawer-panel",panel.setAttribute("role","dialog");var horizontal="left"===placement||"right"===placement,size=this._toSize(horizontal?this.options.width:this.options.height);if(size&&(horizontal?panel.style.width=size:panel.style.height=size),showHeader){var header=document.createElement("div");header.className="edrawer-header";var titleEl=document.createElement("div");if(titleEl.className="edrawer-title",titleEl.id=this._titleId,void 0!==title&&this._mount(titleEl,title),header.appendChild(titleEl),panel.setAttribute("aria-labelledby",this._titleId),this._$title=titleEl,showClose){var close=document.createElement("button");close.type="button",close.className="edrawer-close",close.setAttribute("aria-label","close"),close.innerHTML='<svg viewBox="0 0 24 24" fill="none" width="1em" height="1em" stroke="currentColor" focusable="false" aria-hidden="true">\n  <path d="M0 0L15.9998 0" stroke-linecap="round" stroke-width="1.5" transform="matrix(0.707099,0.707114,-0.707114,0.707099,6.34277,6.34326)" />\n  <path d="M0 0L15.9998 0" stroke-linecap="round" stroke-width="1.5" transform="matrix(0.707099,-0.707114,0.707114,0.707099,6.34277,17.6567)" />\n</svg>',close.addEventListener("click",this._onCloseClick),header.appendChild(close),this._$close=close}panel.appendChild(header)}var body=document.createElement("div");body.className="edrawer-body",void 0!==content&&this._mount(body,content),panel.appendChild(body),root.appendChild(panel),this._$root=root,this._$body=body},_proto._mount=function(target,content){"string"!=typeof content?(target.innerHTML="",content&&target.appendChild(content)):target.innerHTML=content},_proto._teardownDom=function(){var _this__$close,_this__$mask,_this__$root_parentNode;(null==(_this__$close=this._$close)||_this__$close.removeEventListener("click",this._onCloseClick),null==(_this__$mask=this._$mask)||_this__$mask.removeEventListener("click",this._onMaskClick),this._$root)&&(this._$root.removeEventListener("dblclick",this._onRootDblClick),null==(_this__$root_parentNode=this._$root.parentNode)||_this__$root_parentNode.removeChild(this._$root));this._$root=null,this._$mask=null,this._$title=null,this._$close=null,this._$body=null},_proto._clearTimers=function(){null!==this._hideTimer&&(clearTimeout(this._hideTimer),this._hideTimer=null),null!==this._openTimer&&(clearTimeout(this._openTimer),this._openTimer=null)},_proto._bindEscape=function(){var _ref,_this__$root;this._unbindEscape();var doc=null!=(_ref=null==(_this__$root=this._$root)?void 0:_this__$root.ownerDocument)?_ref:document;doc.addEventListener("keydown",this._onKeydown),this._keydownDoc=doc},_proto._unbindEscape=function(){var _this__keydownDoc;null==(_this__keydownDoc=this._keydownDoc)||_this__keydownDoc.removeEventListener("keydown",this._onKeydown),this._keydownDoc=null},_proto._reflow=function(el){return el.offsetHeight},_create_class(Drawer,[{key:"open",get:function(){return this._open},set:function(open){var _this=this;if(!this._destroyed&&this._open!==open&&this._$root){var target=open?this._resolveMountTarget():null;this._open=open,this._clearTimers();var duration=this._getDuration();open?null==this.options.onOpenStart||this.options.onOpenStart.call(this.options):null==this.options.onCloseStart||this.options.onCloseStart.call(this.options);var root=this._$root;!this._destroyed&&this._open===open&&root&&(open?(this._attach(target),root.classList.remove("edrawer-hidden"),this._reflow(root),root.classList.add("edrawer-open"),this.options.closeOnEscape&&this._bindEscape(),this._openTimer=setTimeout(function(){_this._openTimer=null,null==_this.options.onOpenEnd||_this.options.onOpenEnd.call(_this.options)},duration)):(root.classList.remove("edrawer-open"),this._hideTimer=setTimeout(function(){var _this__$root;_this._hideTimer=null,null==(_this__$root=_this._$root)||_this__$root.classList.add("edrawer-hidden"),null==_this.options.onCloseEnd||_this.options.onCloseEnd.call(_this.options)},duration),this._unbindEscape()),null==this.options.onOpenChange||this.options.onOpenChange.call(this.options,open))}}}]),Drawer}();return Drawer.VERSION="0.0.1",Drawer});
+!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?module.exports=factory():"function"==typeof define&&define.amd?define(factory):(global="undefined"!=typeof globalThis?globalThis:global||self).Drawer=factory()}(this,function(){"use strict";var __DRAWER_PLACEMENTS__=["left","right","top","bottom"],__$DRAWER_DEFAULT_OPTIONS$__={placement:"right",width:300,height:300,showMask:!0,maskClosable:!0,showHeader:!0,showClose:!0,closeOnEscape:!0,open:!1};function _create_class(Constructor,protoProps,staticProps){return protoProps&&function(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}(Constructor.prototype,protoProps),Constructor}var _uid=0,_bodyScrollLocks=new WeakMap,Drawer=function(){function Drawer(container,options){var left,right,_this=this;this._$root=null,this._$mask=null,this._$title=null,this._$close=null,this._$body=null,this._open=!1,this._destroyed=!1,this._hideTimer=null,this._openTimer=null,this._keydownDoc=null,this._scrollLockDoc=null,this._onCloseClick=function(e){e.stopPropagation(),_this.open=!1},this._onMaskClick=function(){_this.options.maskClosable&&(_this.open=!1)},this._onRootDblClick=function(e){e.stopPropagation()},this._onKeydown=function(e){e.isComposing||229===e.keyCode||e.defaultPrevented||"Escape"!==e.key&&"Esc"!==e.key||(_this.open=!1)},this.options=Object.assign({},__$DRAWER_DEFAULT_OPTIONS$__,null!=options?options:{}),this._container=this._resolveContainer(container),this._titleId="edrawer-title-"+ ++_uid,this._render(),this.options.getContainer||this._attach(this._container),left=this,((null!=(right=Drawer)&&"undefined"!=typeof Symbol&&right[Symbol.hasInstance]?right[Symbol.hasInstance](left):left instanceof right)?this.constructor:void 0)===Drawer&&this.applyInitialOpen()}var _proto=Drawer.prototype;return _proto.applyInitialOpen=function(){this.options.open&&(this.open=!0)},_proto.setTitle=function(title){this._destroyed||(this.options.title=title,this._$title&&this._mount(this._$title,title))},_proto.setContent=function(content){this._destroyed||(this.options.content=content,this._$body&&this._mount(this._$body,content))},_proto.updateOptions=function(options){var _ref,_this__$root;if(!this._destroyed){this.options=Object.assign(this.options,options);var parent=null!=(_ref=null==(_this__$root=this._$root)?void 0:_this__$root.parentElement)?_ref:null;this._clearTimers(),this._teardownDom(),this._render(),parent&&this._attach(parent),this._unbindEscape(),this._open&&this.options.closeOnEscape&&this._bindEscape()}},_proto.destroy=function(){this._destroyed||(this._destroyed=!0,this._open=!1,this._clearTimers(),this._unbindEscape(),this._unlockBodyScroll(),this._teardownDom())},_proto._resolveContainer=function(container){return"string"==typeof container?document.getElementById(container)||this._query(container)||document.body:container||document.body},_proto._query=function(selector){try{return document.querySelector(selector)}catch(unused){return null}},_proto._resolveMountTarget=function(){return(null==this.options.getContainer?void 0:this.options.getContainer.call(this.options))||this._container},_proto._attach=function(target){var root=this._$root;if(root){root.parentNode!==target&&target.appendChild(root);target===target.ownerDocument.body?root.classList.add("edrawer-fixed"):root.classList.remove("edrawer-fixed")}},_proto._getPlacement=function(){var placement=this.options.placement;return placement&&__DRAWER_PLACEMENTS__.includes(placement)?placement:"right"},_proto._getDuration=function(){var duration=this.options.duration;return"number"==typeof duration&&Number.isFinite(duration)&&duration>=0?duration:300},_proto._toSize=function(value){return null==value||""===value?null:"number"==typeof value?value+"px":value},_proto._render=function(){var placement=this._getPlacement(),_this_options=this.options,showMask=_this_options.showMask,showHeader=_this_options.showHeader,showClose=_this_options.showClose,className=_this_options.className,zIndex=_this_options.zIndex,title=_this_options.title,content=_this_options.content,root=document.createElement("div");if(root.className="edrawer edrawer-"+placement+" "+"edrawer-"+(this._open?"open":"hidden"),className&&className.split(/\s+/).forEach(function(cls){cls&&root.classList.add(cls)}),"number"==typeof zIndex&&(root.style.zIndex=""+zIndex),root.style.setProperty("--edrawer-duration",this._getDuration()+"ms"),root.addEventListener("dblclick",this._onRootDblClick),showMask){var mask=document.createElement("div");mask.className="edrawer-mask",mask.addEventListener("click",this._onMaskClick),root.appendChild(mask),this._$mask=mask}var panel=document.createElement("div");panel.className="edrawer-panel",panel.setAttribute("role","dialog");var horizontal="left"===placement||"right"===placement,size=this._toSize(horizontal?this.options.width:this.options.height);if(size&&(horizontal?panel.style.width=size:panel.style.height=size),showHeader){var header=document.createElement("div");header.className="edrawer-header";var titleEl=document.createElement("div");if(titleEl.className="edrawer-title",titleEl.id=this._titleId,void 0!==title&&this._mount(titleEl,title),header.appendChild(titleEl),panel.setAttribute("aria-labelledby",this._titleId),this._$title=titleEl,showClose){var close=document.createElement("button");close.type="button",close.className="edrawer-close",close.setAttribute("aria-label","close"),close.innerHTML='<svg viewBox="0 0 24 24" fill="none" width="1em" height="1em" stroke="currentColor" focusable="false" aria-hidden="true">\n  <path d="M0 0L15.9998 0" stroke-linecap="round" stroke-width="1.5" transform="matrix(0.707099,0.707114,-0.707114,0.707099,6.34277,6.34326)" />\n  <path d="M0 0L15.9998 0" stroke-linecap="round" stroke-width="1.5" transform="matrix(0.707099,-0.707114,0.707114,0.707099,6.34277,17.6567)" />\n</svg>',close.addEventListener("click",this._onCloseClick),header.appendChild(close),this._$close=close}panel.appendChild(header)}var body=document.createElement("div");body.className="edrawer-body",void 0!==content&&this._mount(body,content),panel.appendChild(body),root.appendChild(panel),this._$root=root,this._$body=body},_proto._mount=function(target,content){"string"!=typeof content?(target.innerHTML="",content&&target.appendChild(content)):target.innerHTML=content},_proto._teardownDom=function(){var _this__$close,_this__$mask,_this__$root_parentNode;(null==(_this__$close=this._$close)||_this__$close.removeEventListener("click",this._onCloseClick),null==(_this__$mask=this._$mask)||_this__$mask.removeEventListener("click",this._onMaskClick),this._$root)&&(this._$root.removeEventListener("dblclick",this._onRootDblClick),null==(_this__$root_parentNode=this._$root.parentNode)||_this__$root_parentNode.removeChild(this._$root));this._$root=null,this._$mask=null,this._$title=null,this._$close=null,this._$body=null},_proto._clearTimers=function(){null!==this._hideTimer&&(clearTimeout(this._hideTimer),this._hideTimer=null),null!==this._openTimer&&(clearTimeout(this._openTimer),this._openTimer=null)},_proto._bindEscape=function(){var _ref,_this__$root;this._unbindEscape();var doc=null!=(_ref=null==(_this__$root=this._$root)?void 0:_this__$root.ownerDocument)?_ref:document;doc.addEventListener("keydown",this._onKeydown),this._keydownDoc=doc},_proto._unbindEscape=function(){var _this__keydownDoc;null==(_this__keydownDoc=this._keydownDoc)||_this__keydownDoc.removeEventListener("keydown",this._onKeydown),this._keydownDoc=null},_proto._lockBodyScroll=function(doc){var _bodyScrollLocks_get;if(this._scrollLockDoc!==doc){this._unlockBodyScroll();var count=(null!=(_bodyScrollLocks_get=_bodyScrollLocks.get(doc))?_bodyScrollLocks_get:0)+1;_bodyScrollLocks.set(doc,count),doc.body.classList.add("edrawer-body-noscroll"),this._scrollLockDoc=doc}},_proto._unlockBodyScroll=function(){var _bodyScrollLocks_get,doc=this._scrollLockDoc;if(doc){this._scrollLockDoc=null;var _doc_body,count=Math.max((null!=(_bodyScrollLocks_get=_bodyScrollLocks.get(doc))?_bodyScrollLocks_get:1)-1,0);if(0===count)_bodyScrollLocks.delete(doc),null==(_doc_body=doc.body)||_doc_body.classList.remove("edrawer-body-noscroll");else _bodyScrollLocks.set(doc,count)}},_proto._reflow=function(el){return el.offsetHeight},_create_class(Drawer,[{key:"open",get:function(){return this._open},set:function(open){var _this=this;if(!this._destroyed&&this._open!==open&&this._$root){var target=open?this._resolveMountTarget():null;this._open=open,this._clearTimers();var duration=this._getDuration();open?null==this.options.onOpenStart||this.options.onOpenStart.call(this.options):null==this.options.onCloseStart||this.options.onCloseStart.call(this.options);var root=this._$root;!this._destroyed&&this._open===open&&root&&(open?(this._attach(target),target===target.ownerDocument.body&&this._lockBodyScroll(target.ownerDocument),root.classList.remove("edrawer-hidden"),this._reflow(root),root.classList.add("edrawer-open"),this.options.closeOnEscape&&this._bindEscape(),this._openTimer=setTimeout(function(){_this._openTimer=null,null==_this.options.onOpenEnd||_this.options.onOpenEnd.call(_this.options)},duration)):(root.classList.remove("edrawer-open"),this._unlockBodyScroll(),this._hideTimer=setTimeout(function(){var _this__$root;_this._hideTimer=null,null==(_this__$root=_this._$root)||_this__$root.classList.add("edrawer-hidden"),null==_this.options.onCloseEnd||_this.options.onCloseEnd.call(_this.options)},duration),this._unbindEscape()),null==this.options.onOpenChange||this.options.onOpenChange.call(this.options,open))}}}]),Drawer}();return Drawer.VERSION="0.0.2-beta.1",Drawer});

package/dist/style/style/index.scss

@@ -8,13 +8,18 @@ $edrawer-prefix-cls: 'edrawer';
 // 开合过渡时长（默认回退值）：可通过根节点上的 --edrawer-duration 按实例覆盖，需与 JS 默认 __DRAWER_DURATION__（300ms）保持一致
 $edrawer-duration: 0.3s;
 
+.#{$edrawer-prefix-cls}-body-noscroll {
+  touch-action: none;
+  overflow: hidden;
+}
+
 .#{$edrawer-prefix-cls} {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: var(--edrawer-z-index, 100);
+  z-index: var(--edrawer-z-index, 9999);
   overflow: hidden;
   box-sizing: border-box;
   // 根节点不拦截指针事件：不展示遮罩时，面板以外的区域仍可操作底层内容
@@ -24,6 +29,12 @@ $edrawer-duration: 0.3s;
   // 挂载到 document.body 时相对视口定位
   &-fixed {
     position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
   }
 
   // 遮罩
@@ -125,8 +136,12 @@ $edrawer-duration: 0.3s;
     text-overflow: ellipsis;
   }
 
-  // 关闭按钮
-  &-close {
+  // 关闭按钮：先 `all: unset` 一次性清掉宿主页面对 <button> 的全局样式（padding、margin、font、box-shadow、min-*、transform 等），
+  // 再重新声明本控件需要的样式；类名写两遍把特异性提到 (0,2,0)，高于 `button` / `[type='button']` / `.xxx button` 这类常见宿主规则。
+  // 宿主若用 id 选择器或 !important 命中按钮，仍会压过这里，需要宿主自行避免。
+  &-close#{&}-close {
+    all: unset;
+    box-sizing: border-box;
     flex: 0 0 auto;
     display: inline-flex;
     align-items: center;
@@ -134,13 +149,9 @@ $edrawer-duration: 0.3s;
     width: 28px;
     height: 28px;
     margin-left: 12px;
-    padding: 0;
-    border: none;
-    background: transparent;
     border-radius: 4px;
     color: var(--edrawer-close-color, rgba(0, 0, 0, 0.45));
     cursor: pointer;
-    box-sizing: border-box;
     transition:
       color 0.2s,
       background-color 0.2s;
@@ -150,6 +161,12 @@ $edrawer-duration: 0.3s;
       background-color: var(--edrawer-close-hover-bg, rgba(0, 0, 0, 0.06));
     }
 
+    // `all: unset` 同时去掉了浏览器默认的焦点环，键盘操作时补回
+    &:focus-visible {
+      outline: 2px solid var(--edrawer-close-hover-color, rgba(0, 0, 0, 0.88));
+      outline-offset: -2px;
+    }
+
     & svg {
       width: 16px;
       height: 16px;

package/dist/style/style.css

@@ -1 +1 @@
-.edrawer{bottom:0;box-sizing:border-box;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;text-align:left;top:0;z-index:var(--edrawer-z-index,100)}.edrawer-fixed{position:fixed}.edrawer-mask{background-color:var(--edrawer-mask-bg,rgba(0,0,0,.3));bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity var(--edrawer-duration,.3s) ease}.edrawer-panel{background-color:var(--edrawer-bg,#fff);box-sizing:border-box;color:var(--edrawer-color,rgba(0,0,0,.88));display:flex;flex-direction:column;overflow:hidden;position:absolute;text-align:left;transition:transform var(--edrawer-duration,.3s) ease}.edrawer-left .edrawer-panel,.edrawer-right .edrawer-panel{bottom:0;max-width:var(--edrawer-max-width,100%);top:0}.edrawer-bottom .edrawer-panel,.edrawer-top .edrawer-panel{left:0;max-height:var(--edrawer-max-height,100%);right:0}.edrawer-right .edrawer-panel{border-left:1px solid var(--edrawer-border-color,rgba(0,0,0,.1));right:0;transform:translateX(100%)}.edrawer-left .edrawer-panel{border-right:1px solid var(--edrawer-border-color,rgba(0,0,0,.1));left:0;transform:translateX(-100%)}.edrawer-top .edrawer-panel{border-bottom:1px solid var(--edrawer-border-color,rgba(0,0,0,.1));top:0;transform:translateY(-100%)}.edrawer-bottom .edrawer-panel{border-top:1px solid var(--edrawer-border-color,rgba(0,0,0,.1));bottom:0;transform:translateY(100%)}.edrawer.edrawer-open .edrawer-mask{opacity:1;pointer-events:auto}.edrawer.edrawer-open .edrawer-panel{pointer-events:auto;transform:translate(0)}.edrawer-header{align-items:center;border-bottom:1px solid var(--edrawer-header-border-color,rgba(0,0,0,.08));box-sizing:border-box;display:flex;flex:0 0 auto;height:var(--edrawer-header-height,40px);justify-content:space-between;padding:var(--edrawer-header-padding,0 16px)}.edrawer-title{color:var(--edrawer-title-color,#333);flex:1 1 auto;font-size:var(--edrawer-title-font-size,14px);font-weight:500;line-height:1.5;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.edrawer-close{align-items:center;background:transparent;border:none;border-radius:4px;box-sizing:border-box;color:var(--edrawer-close-color,rgba(0,0,0,.45));cursor:pointer;display:inline-flex;flex:0 0 auto;height:28px;justify-content:center;margin-left:12px;padding:0;transition:color .2s,background-color .2s;width:28px}.edrawer-close:hover{background-color:var(--edrawer-close-hover-bg,rgba(0,0,0,.06));color:var(--edrawer-close-hover-color,rgba(0,0,0,.88))}.edrawer-close svg{display:block;height:16px;width:16px}.edrawer-body{box-sizing:border-box;flex:1 1 auto;min-height:0;overflow:auto;position:relative}.edrawer-hidden{display:none!important}
+.edrawer-body-noscroll{overflow:hidden;touch-action:none}.edrawer{box-sizing:border-box;overflow:hidden;pointer-events:none;position:absolute;text-align:left;z-index:var(--edrawer-z-index,9999)}.edrawer,.edrawer-fixed{bottom:0;left:0;right:0;top:0}.edrawer-fixed{height:100vh;position:fixed;width:100vw}.edrawer-mask{background-color:var(--edrawer-mask-bg,rgba(0,0,0,.3));bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity var(--edrawer-duration,.3s) ease}.edrawer-panel{background-color:var(--edrawer-bg,#fff);box-sizing:border-box;color:var(--edrawer-color,rgba(0,0,0,.88));display:flex;flex-direction:column;overflow:hidden;position:absolute;text-align:left;transition:transform var(--edrawer-duration,.3s) ease}.edrawer-left .edrawer-panel,.edrawer-right .edrawer-panel{bottom:0;max-width:var(--edrawer-max-width,100%);top:0}.edrawer-bottom .edrawer-panel,.edrawer-top .edrawer-panel{left:0;max-height:var(--edrawer-max-height,100%);right:0}.edrawer-right .edrawer-panel{border-left:1px solid var(--edrawer-border-color,rgba(0,0,0,.1));right:0;transform:translateX(100%)}.edrawer-left .edrawer-panel{border-right:1px solid var(--edrawer-border-color,rgba(0,0,0,.1));left:0;transform:translateX(-100%)}.edrawer-top .edrawer-panel{border-bottom:1px solid var(--edrawer-border-color,rgba(0,0,0,.1));top:0;transform:translateY(-100%)}.edrawer-bottom .edrawer-panel{border-top:1px solid var(--edrawer-border-color,rgba(0,0,0,.1));bottom:0;transform:translateY(100%)}.edrawer.edrawer-open .edrawer-mask{opacity:1;pointer-events:auto}.edrawer.edrawer-open .edrawer-panel{pointer-events:auto;transform:translate(0)}.edrawer-header{align-items:center;border-bottom:1px solid var(--edrawer-header-border-color,rgba(0,0,0,.08));box-sizing:border-box;display:flex;flex:0 0 auto;height:var(--edrawer-header-height,40px);justify-content:space-between;padding:var(--edrawer-header-padding,0 16px)}.edrawer-title{color:var(--edrawer-title-color,#333);flex:1 1 auto;font-size:var(--edrawer-title-font-size,14px);font-weight:500;line-height:1.5;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.edrawer-close.edrawer-close{all:unset;align-items:center;border-radius:4px;box-sizing:border-box;color:var(--edrawer-close-color,rgba(0,0,0,.45));cursor:pointer;display:inline-flex;flex:0 0 auto;height:28px;justify-content:center;margin-left:12px;transition:color .2s,background-color .2s;width:28px}.edrawer-close.edrawer-close:hover{background-color:var(--edrawer-close-hover-bg,rgba(0,0,0,.06));color:var(--edrawer-close-hover-color,rgba(0,0,0,.88))}.edrawer-close.edrawer-close:focus-visible{outline:2px solid var(--edrawer-close-hover-color,rgba(0,0,0,.88));outline-offset:-2px}.edrawer-close.edrawer-close svg{display:block;height:16px;width:16px}.edrawer-body{box-sizing:border-box;flex:1 1 auto;min-height:0;overflow:auto;position:relative}.edrawer-hidden{display:none!important}

package/dist/style/style.js

@@ -1,6 +1,6 @@
 /*
-* @ezuikit/control-drawer v0.0.1
-* Copyright (c) 2026-11-09 13:32:10 Ezviz-OpenBiz
+* @ezuikit/control-drawer v0.0.2-beta.1
+* Copyright (c) 2026-11-15 20:14:33 Ezviz-OpenBiz
 * Released under the MIT License.
 */
 require("./style.css");

package/dist/types/index.d.ts

@@ -34,7 +34,7 @@ interface DrawerOptions {
     duration?: number;
     /** 创建后是否立即打开，默认 false（仅构造时生效） */
     open?: boolean;
-    /** 根节点层级，缺省使用样式变量 `--edrawer-z-index`（默认 100） */
+    /** 根节点层级，缺省使用样式变量 `--edrawer-z-index`（默认 9999） */
     zIndex?: number;
     /** 追加到根节点的自定义类名，多个用空格分隔 */
     className?: string;
@@ -61,7 +61,8 @@ interface DrawerOptions {
  * 只负责抽屉的布局骨架，业务内容通过 `content` / {@link Drawer.setContent} 注入：
  * 1. 遮罩 + 从左 / 右 / 上 / 下滑出的面板，带开合过渡动画；
  * 2. 头部（标题 + 关闭按钮），支持点击遮罩、Esc 关闭；
- * 3. 默认相对挂载容器定位（容器需为定位元素），挂载到 document.body 时相对视口定位；
+ * 3. 默认相对挂载容器定位（容器需为定位元素），挂载到 document.body 时相对视口定位，打开期间给 body 加
+ *    `edrawer-body-noscroll` 类名禁止页面滚动；
  * 4. 支持通过 `getContainer` 在每次打开时动态解析挂载点（如移动端扩展区）。
  *
  * @example
@@ -101,6 +102,8 @@ declare class Drawer {
     private _openTimer;
     /** 当前注册了 Esc 监听的 document（容器可能在 iframe 等其它文档内，需与注册时一致才能正确移除） */
     private _keydownDoc;
+    /** 当前锁定了 body 滚动的 document（挂载在 body 上且处于打开态时非空） */
+    private _scrollLockDoc;
     /**
      * @param container 默认挂载容器，支持 CSS 选择器、元素 ID 或 HTMLElement，缺省或找不到时为 document.body。
      * 非 body 容器需为定位元素（position 非 static），抽屉相对它铺满定位。
@@ -241,6 +244,13 @@ declare class Drawer {
     private _bindEscape;
     /** 从注册时的文档上移除 Esc 监听（幂等） */
     private _unbindEscape;
+    /**
+     * 禁止页面滚动：给 body 加 `edrawer-body-noscroll`（按文档计数，幂等）
+     * @param doc 挂载点所属文档（容器可能在 iframe 等其它文档内）
+     */
+    private _lockBodyScroll;
+    /** 恢复页面滚动：本实例持有的锁释放后，该文档中没有其它打开的 body 抽屉时移除类名（幂等） */
+    private _unlockBodyScroll;
     /** 读取布局属性以强制浏览器回流 */
     private _reflow;
     private readonly _onCloseClick;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ezuikit/control-drawer",
-  "version": "0.0.1",
+  "version": "0.0.2-beta.1",
   "description": "drawer layout control for ezviz",
   "title": "drawer",
   "main": "dist/index.cjs",