@ezuikit/control-drawer 0.0.1-beta.6 → 0.0.1-beta.7

package/README.md

@@ -1,6 +1,6 @@
 # @ezuikit/control-drawer 使用指南
 
-抽屉布局控件。只提供布局骨架：遮罩、从四个方向滑出的面板、标题栏与关闭按钮、开合动画和挂载策略；业务内容通过 `content` 注入。`@ezuikit/control-alarm-message` 基于它实现告警消息面板。
+抽屉布局控件。只提供布局骨架：遮罩、从四个方向滑出的面板、标题栏与关闭按钮、开合动画和挂载策略；业务内容通过 `content` 注入
 
 ## 安装
 
@@ -65,37 +65,47 @@ const drawer = new Drawer(playerEl, {
 
 ## 配置项
 
-| 参数            | 类型                                     | 默认      | 说明                                          |
-| --------------- | ---------------------------------------- | --------- | --------------------------------------------- |
-| `title`         | `string \| HTMLElement`                  | -         | 标题，字符串按 HTML 插入                      |
-| `content`       | `string \| HTMLElement`                  | -         | 内容，字符串按 HTML 插入                      |
-| `placement`     | `'left' \| 'right' \| 'top' \| 'bottom'` | `'right'` | 弹出方向，非法值回退 `right`                  |
-| `width`         | `number \| string`                       | `300`     | 面板宽度（左右方向生效），number 视为 px      |
-| `height`        | `number \| string`                       | `300`     | 面板高度（上下方向生效），number 视为 px      |
-| `showMask`      | `boolean`                                | `true`    | 遮罩；关闭后面板以外区域可操作底层内容        |
-| `maskClosable`  | `boolean`                                | `true`    | 点击遮罩关闭                                  |
-| `showHeader`    | `boolean`                                | `true`    | 头部（标题 + 关闭按钮）                       |
-| `showClose`     | `boolean`                                | `true`    | 关闭按钮，`showHeader` 为 `false` 时无效      |
-| `closeOnEscape` | `boolean`                                | `true`    | Esc 关闭                                      |
-| `open`          | `boolean`                                | `false`   | 创建后立即打开（仅构造时生效）                |
-| `zIndex`        | `number`                                 | -         | 根节点层级，缺省取 `--edrawer-z-index`（100） |
-| `className`     | `string`                                 | -         | 追加到根节点的类名，多个用空格分隔            |
-| `getContainer`  | `() => HTMLElement \| null \| undefined` | -         | 动态挂载点，见上文                            |
-| `onOpenChange`  | `(open: boolean) => void`                | -         | 打开/关闭回调，参数为当前状态                  |
+| 参数            | 类型                                     | 默认      | 说明                                               |
+| --------------- | ---------------------------------------- | --------- | -------------------------------------------------- |
+| `title`         | `string \| HTMLElement`                  | -         | 标题，字符串按 HTML 插入                           |
+| `content`       | `string \| HTMLElement`                  | -         | 内容，字符串按 HTML 插入                           |
+| `placement`     | `'left' \| 'right' \| 'top' \| 'bottom'` | `'right'` | 弹出方向，非法值回退 `right`                       |
+| `width`         | `number \| string`                       | `300`     | 面板宽度（左右方向生效），number 视为 px           |
+| `height`        | `number \| string`                       | `300`     | 面板高度（上下方向生效），number 视为 px           |
+| `showMask`      | `boolean`                                | `true`    | 遮罩；关闭后面板以外区域可操作底层内容             |
+| `maskClosable`  | `boolean`                                | `true`    | 点击遮罩关闭                                       |
+| `showHeader`    | `boolean`                                | `true`    | 头部（标题 + 关闭按钮）                            |
+| `showClose`     | `boolean`                                | `true`    | 关闭按钮，`showHeader` 为 `false` 时无效           |
+| `closeOnEscape` | `boolean`                                | `true`    | Esc 关闭                                           |
+| `duration`      | `number`                                 | `300`     | 开合动画时长（ms），需与 `--edrawer-duration` 同步 |
+| `open`          | `boolean`                                | `false`   | 创建后立即打开（仅构造时生效）                     |
+| `zIndex`        | `number`                                 | -         | 根节点层级，缺省取 `--edrawer-z-index`（100）      |
+| `className`     | `string`                                 | -         | 追加到根节点的类名，多个用空格分隔                 |
+| `getContainer`  | `() => HTMLElement \| null \| undefined` | -         | 动态挂载点，见上文                                 |
+| `onOpenChange`  | `(open: boolean) => void`                | -         | 打开/关闭回调，参数为当前状态                      |
+| `onOpenStart`   | `() => void`                             | -         | 打开开始（动画开始前同步触发）                     |
+| `onOpenEnd`     | `() => void`                             | -         | 打开结束（过渡结束后触发）                         |
+| `onCloseStart`  | `() => void`                             | -         | 关闭开始（动画开始前同步触发）                     |
+| `onCloseEnd`    | `() => void`                             | -         | 关闭结束（过渡结束、根节点隐藏后触发）             |
 
 ## 方法 / 属性
 
-| 成员                                      | 说明                                                 |
-| ----------------------------------------- | ---------------------------------------------------- |
+| 成员                                      | 说明                                                             |
+| ----------------------------------------- | ---------------------------------------------------------------- |
 | `open`                                    | 布尔属性（getter/setter），打开/关闭抽屉；重复设置相同状态为幂等 |
-| `setTitle(title)` / `setContent(content)` | 更新标题 / 内容，不重建 DOM                          |
-| `updateOptions(opts)`                     | 更新配置并重建 DOM，保持当前开合状态且不重播动画     |
-| `destroy()`                               | 销毁（幂等），移除 DOM、定时器与监听，不触发 `onOpenChange` |
-| `Drawer.VERSION`                          | 构建时由 Rollup 注入的版本号（静态属性）             |
+| `setTitle(title)` / `setContent(content)` | 更新标题 / 内容，不重建 DOM                                      |
+| `updateOptions(opts)`                     | 更新配置并重建 DOM，保持当前开合状态且不重播动画                 |
+| `destroy()`                               | 销毁（幂等），移除 DOM、定时器与监听，不触发 `onOpenChange`      |
+| `Drawer.VERSION`                          | 构建时由 Rollup 注入的版本号（静态属性）                         |
 
 ## 打开 / 关闭回调
 
-通过 `options.onOpenChange` 注册，打开与关闭时同步调用，参数为当前状态 `boolean`（`true` 打开 / `false` 关闭）；在动画开始时同步触发，关闭时不等收起动画结束。
+抽屉在开合过程中按生命周期派发回调，触发顺序如下：
+
+- 打开：`onOpenStart`（同步，动画开始前）→ `onOpenEnd`（过渡结束后）
+- 关闭：`onCloseStart`（同步，动画开始前）→ `onCloseEnd`（过渡结束、根节点隐藏后）
+
+另有 `onOpenChange(open)`：打开与关闭时同步调用，参数为当前状态 `boolean`。结束回调依赖与过渡时长（`duration`，默认 300ms）一致的定时器；`destroy()` 或反向切换会取消尚未触发的回调。
 
 ## 样式与类名
 
@@ -106,21 +116,23 @@ const drawer = new Drawer(playerEl, {
 
 外观通过 CSS 变量定制，可设在 `className` 对应的根节点上按实例覆盖：
 
-| 变量                            | 默认              | 说明               |
-| ------------------------------- | ----------------- | ------------------ |
-| `--edrawer-z-index`             | `100`             | 根节点层级         |
-| `--edrawer-bg`                  | `#fff`            | 面板背景           |
-| `--edrawer-color`               | `rgba(0,0,0,.88)` | 面板文字色         |
-| `--edrawer-mask-bg`             | `rgba(0,0,0,.3)`  | 遮罩色             |
-| `--edrawer-border-color`        | `rgba(0,0,0,.1)`  | 面板内侧边框       |
-| `--edrawer-max-width`           | `100%`            | 左右方向的最大宽度 |
-| `--edrawer-max-height`          | `100%`            | 上下方向的最大高度 |
-| `--edrawer-header-padding`      | `12px 16px`       | 头部内边距         |
-| `--edrawer-header-border-color` | `rgba(0,0,0,.08)` | 头部分隔线         |
-| `--edrawer-title-color`         | `#333`            | 标题色             |
-| `--edrawer-title-font-size`     | `14px`            | 标题字号           |
-| `--edrawer-close-color`         | `rgba(0,0,0,.4)`  | 关闭按钮色         |
-| `--edrawer-close-hover-color`   | `#333`            | 关闭按钮悬停色     |
+| 变量                            | 默认              | 说明                 |
+| ------------------------------- | ----------------- | -------------------- |
+| `--edrawer-z-index`             | `100`             | 根节点层级           |
+| `--edrawer-duration`            | `0.3s`            | 开合动画时长         |
+| `--edrawer-bg`                  | `#fff`            | 面板背景             |
+| `--edrawer-color`               | `rgba(0,0,0,.88)` | 面板文字色           |
+| `--edrawer-mask-bg`             | `rgba(0,0,0,.3)`  | 遮罩色               |
+| `--edrawer-border-color`        | `rgba(0,0,0,.1)`  | 面板内侧边框         |
+| `--edrawer-max-width`           | `100%`            | 左右方向的最大宽度   |
+| `--edrawer-max-height`          | `100%`            | 上下方向的最大高度   |
+| `--edrawer-header-height`       | `40px`            | 头部高度（含分隔线） |
+| `--edrawer-header-padding`      | `0 16px`          | 头部内边距           |
+| `--edrawer-header-border-color` | `rgba(0,0,0,.08)` | 头部分隔线           |
+| `--edrawer-title-color`         | `#333`            | 标题色               |
+| `--edrawer-title-font-size`     | `14px`            | 标题字号             |
+| `--edrawer-close-color`         | `rgba(0,0,0,.4)`  | 关闭按钮色           |
+| `--edrawer-close-hover-color`   | `#333`            | 关闭按钮悬停色       |
 
 ```css
 /* 例：告警消息面板在 PC 端最多占容器 80% 宽 */
@@ -135,7 +147,7 @@ const drawer = new Drawer(playerEl, {
 
 **字符串按 HTML 插入。** `title` / `content` / `setTitle` / `setContent` 传字符串时写入 `innerHTML`，只能传可信内容；不可信数据请自行转义或传 `HTMLElement`。
 
-**动画时长固定 300ms。** JS 常量 `_DRAWER_DURATION_` 与 SCSS 变量 `$edrawer-duration` 必须同步修改；只在宿主 CSS 里改 `transition` 时长不会改变 JS 的隐藏时机。系统开启"减少动效"时过渡被关闭。
+**动画时长可配。** 通过 `duration`（ms）配置开合时长，默认 300；组件会把该值写入根节点的 `--edrawer-duration`，使遮罩/面板的 CSS 过渡与 JS 定时器保持一致。只在宿主 CSS 里改 `transition` 时长不会改变 JS 的隐藏时机。面板为 CSS `transition: transform` 滑入滑出，遮罩为 `transition: opacity` 淡入淡出，不使用 `@keyframes`。组件内置样式不再响应 `prefers-reduced-motion`（Windows 关闭"显示动画"、远程桌面 / 虚拟机、省电模式下浏览器都会命中该偏好，会导致抽屉瞬间出现）；需要尊重该偏好的宿主可自行追加 `@media (prefers-reduced-motion: reduce) { .edrawer-mask, .edrawer-panel { transition: none; } }`。
 
 **`updateOptions` 会重建 DOM。** 以 `HTMLElement` 传入的内容会被移动到新节点，引用与其上的监听保留，但内部滚动位置会重置；只改文案时用 `setTitle` / `setContent`。
 

package/dist/index.cjs

@@ -1,6 +1,6 @@
 /*
-* @ezuikit/control-drawer v0.0.1-beta.6
-* Copyright (c) 2026-10-04 18:26:00 Ezviz-OpenBiz
+* @ezuikit/control-drawer v0.0.1-beta.7
+* Copyright (c) 2026-10-13 15:01:37 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 _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._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){"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),this.options.open&&(this.open=!0)}var _proto=Drawer.prototype;return _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),document.removeEventListener("keydown",this._onKeydown),this._open&&this.options.closeOnEscape&&document.addEventListener("keydown",this._onKeydown)}},_proto.destroy=function(){this._destroyed||(this._destroyed=!0,this._open=!1,this._clearTimers(),document.removeEventListener("keydown",this._onKeydown),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===document.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._toSize=function(value){return null==value||""===value?null:"number"==typeof value?value+"px":value},_proto._render=function(){var _this_options_duration,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");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);var duration=null!=(_this_options_duration=this.options.duration)?_this_options_duration:300;if(root.style.setProperty("--edrawer-duration",duration+"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 width="1em" height="1em" viewBox="0 0 14 14" fill="currentColor" focusable="false" aria-hidden="true">\n  <path d="M13.3 0.7c-0.4-0.4-1-0.4-1.4 0L7 5.6 2.1 0.7c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4L5.6 7 0.7 11.9c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.5 0.3 0.7 0.3s0.5-0.1 0.7-0.3L7 8.4l4.9 4.9c0.2 0.2 0.5 0.3 0.7 0.3s0.5-0.1 0.7-0.3c0.4-0.4 0.4-1 0-1.4L8.4 7l4.9-4.9C13.7 1.7 13.7 1.1 13.3 0.7z"/>\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._reflow=function(el){return el.offsetHeight},_create_class(Drawer,[{key:"open",get:function(){return this._open},set:function(open){var _this_options_duration,_this=this,root=this._$root;if(!this._destroyed&&this._open!==open&&root){this._open=open,this._clearTimers();var duration=null!=(_this_options_duration=this.options.duration)?_this_options_duration:300;open?(null==this.options.onOpenStart||this.options.onOpenStart.call(this.options),this._attach(this._resolveMountTarget()),root.classList.remove("edrawer-hidden"),this._reflow(root),root.classList.add("edrawer-open"),this.options.closeOnEscape&&document.addEventListener("keydown",this._onKeydown),this._openTimer=setTimeout(function(){_this._openTimer=null,null==_this.options.onOpenEnd||_this.options.onOpenEnd.call(_this.options)},duration)):(null==this.options.onCloseStart||this.options.onCloseStart.call(this.options),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),document.removeEventListener("keydown",this._onKeydown)),null==this.options.onOpenChange||this.options.onOpenChange.call(this.options,open)}}}]),Drawer}();Drawer.VERSION="0.0.1-beta.6",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,Drawer=function(){function Drawer(container,options){var _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._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){"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),this.options.open&&(this.open=!0)}var _proto=Drawer.prototype;return _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),document.removeEventListener("keydown",this._onKeydown),this._open&&this.options.closeOnEscape&&document.addEventListener("keydown",this._onKeydown)}},_proto.destroy=function(){this._destroyed||(this._destroyed=!0,this._open=!1,this._clearTimers(),document.removeEventListener("keydown",this._onKeydown),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===document.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._toSize=function(value){return null==value||""===value?null:"number"==typeof value?value+"px":value},_proto._render=function(){var _this_options_duration,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");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);var duration=null!=(_this_options_duration=this.options.duration)?_this_options_duration:300;if(root.style.setProperty("--edrawer-duration",duration+"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 width="1em" height="1em" viewBox="0 0 14 14" fill="currentColor" focusable="false" aria-hidden="true">\n  <path d="M13.3 0.7c-0.4-0.4-1-0.4-1.4 0L7 5.6 2.1 0.7c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4L5.6 7 0.7 11.9c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.5 0.3 0.7 0.3s0.5-0.1 0.7-0.3L7 8.4l4.9 4.9c0.2 0.2 0.5 0.3 0.7 0.3s0.5-0.1 0.7-0.3c0.4-0.4 0.4-1 0-1.4L8.4 7l4.9-4.9C13.7 1.7 13.7 1.1 13.3 0.7z"/>\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._reflow=function(el){return el.offsetHeight},_create_class(Drawer,[{key:"open",get:function(){return this._open},set:function(open){var _this_options_duration,_this=this,root=this._$root;if(!this._destroyed&&this._open!==open&&root){this._open=open,this._clearTimers();var duration=null!=(_this_options_duration=this.options.duration)?_this_options_duration:300;open?(null==this.options.onOpenStart||this.options.onOpenStart.call(this.options),this._attach(this._resolveMountTarget()),root.classList.remove("edrawer-hidden"),this._reflow(root),root.classList.add("edrawer-open"),this.options.closeOnEscape&&document.addEventListener("keydown",this._onKeydown),this._openTimer=setTimeout(function(){_this._openTimer=null,null==_this.options.onOpenEnd||_this.options.onOpenEnd.call(_this.options)},duration)):(null==this.options.onCloseStart||this.options.onCloseStart.call(this.options),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),document.removeEventListener("keydown",this._onKeydown)),null==this.options.onOpenChange||this.options.onOpenChange.call(this.options,open)}}}]),Drawer}();Drawer.VERSION="0.0.1-beta.7",module.exports=Drawer;

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 /*
-* @ezuikit/control-drawer v0.0.1-beta.6
-* Copyright (c) 2026-10-04 18:26:00 Ezviz-OpenBiz
+* @ezuikit/control-drawer v0.0.1-beta.7
+* Copyright (c) 2026-10-13 15:01:37 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 _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._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){"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),this.options.open&&(this.open=!0)}var _proto=Drawer.prototype;return _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),document.removeEventListener("keydown",this._onKeydown),this._open&&this.options.closeOnEscape&&document.addEventListener("keydown",this._onKeydown)}},_proto.destroy=function(){this._destroyed||(this._destroyed=!0,this._open=!1,this._clearTimers(),document.removeEventListener("keydown",this._onKeydown),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===document.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._toSize=function(value){return null==value||""===value?null:"number"==typeof value?value+"px":value},_proto._render=function(){var _this_options_duration,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");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);var duration=null!=(_this_options_duration=this.options.duration)?_this_options_duration:300;if(root.style.setProperty("--edrawer-duration",duration+"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 width="1em" height="1em" viewBox="0 0 14 14" fill="currentColor" focusable="false" aria-hidden="true">\n  <path d="M13.3 0.7c-0.4-0.4-1-0.4-1.4 0L7 5.6 2.1 0.7c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4L5.6 7 0.7 11.9c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.5 0.3 0.7 0.3s0.5-0.1 0.7-0.3L7 8.4l4.9 4.9c0.2 0.2 0.5 0.3 0.7 0.3s0.5-0.1 0.7-0.3c0.4-0.4 0.4-1 0-1.4L8.4 7l4.9-4.9C13.7 1.7 13.7 1.1 13.3 0.7z"/>\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._reflow=function(el){return el.offsetHeight},_create_class(Drawer,[{key:"open",get:function(){return this._open},set:function(open){var _this_options_duration,_this=this,root=this._$root;if(!this._destroyed&&this._open!==open&&root){this._open=open,this._clearTimers();var duration=null!=(_this_options_duration=this.options.duration)?_this_options_duration:300;open?(null==this.options.onOpenStart||this.options.onOpenStart.call(this.options),this._attach(this._resolveMountTarget()),root.classList.remove("edrawer-hidden"),this._reflow(root),root.classList.add("edrawer-open"),this.options.closeOnEscape&&document.addEventListener("keydown",this._onKeydown),this._openTimer=setTimeout(function(){_this._openTimer=null,null==_this.options.onOpenEnd||_this.options.onOpenEnd.call(_this.options)},duration)):(null==this.options.onCloseStart||this.options.onCloseStart.call(this.options),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),document.removeEventListener("keydown",this._onKeydown)),null==this.options.onOpenChange||this.options.onOpenChange.call(this.options,open)}}}]),Drawer}();Drawer.VERSION="0.0.1-beta.6";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,Drawer=function(){function Drawer(container,options){var _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._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){"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),this.options.open&&(this.open=!0)}var _proto=Drawer.prototype;return _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),document.removeEventListener("keydown",this._onKeydown),this._open&&this.options.closeOnEscape&&document.addEventListener("keydown",this._onKeydown)}},_proto.destroy=function(){this._destroyed||(this._destroyed=!0,this._open=!1,this._clearTimers(),document.removeEventListener("keydown",this._onKeydown),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===document.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._toSize=function(value){return null==value||""===value?null:"number"==typeof value?value+"px":value},_proto._render=function(){var _this_options_duration,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");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);var duration=null!=(_this_options_duration=this.options.duration)?_this_options_duration:300;if(root.style.setProperty("--edrawer-duration",duration+"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 width="1em" height="1em" viewBox="0 0 14 14" fill="currentColor" focusable="false" aria-hidden="true">\n  <path d="M13.3 0.7c-0.4-0.4-1-0.4-1.4 0L7 5.6 2.1 0.7c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4L5.6 7 0.7 11.9c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.5 0.3 0.7 0.3s0.5-0.1 0.7-0.3L7 8.4l4.9 4.9c0.2 0.2 0.5 0.3 0.7 0.3s0.5-0.1 0.7-0.3c0.4-0.4 0.4-1 0-1.4L8.4 7l4.9-4.9C13.7 1.7 13.7 1.1 13.3 0.7z"/>\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._reflow=function(el){return el.offsetHeight},_create_class(Drawer,[{key:"open",get:function(){return this._open},set:function(open){var _this_options_duration,_this=this,root=this._$root;if(!this._destroyed&&this._open!==open&&root){this._open=open,this._clearTimers();var duration=null!=(_this_options_duration=this.options.duration)?_this_options_duration:300;open?(null==this.options.onOpenStart||this.options.onOpenStart.call(this.options),this._attach(this._resolveMountTarget()),root.classList.remove("edrawer-hidden"),this._reflow(root),root.classList.add("edrawer-open"),this.options.closeOnEscape&&document.addEventListener("keydown",this._onKeydown),this._openTimer=setTimeout(function(){_this._openTimer=null,null==_this.options.onOpenEnd||_this.options.onOpenEnd.call(_this.options)},duration)):(null==this.options.onCloseStart||this.options.onCloseStart.call(this.options),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),document.removeEventListener("keydown",this._onKeydown)),null==this.options.onOpenChange||this.options.onOpenChange.call(this.options,open)}}}]),Drawer}();Drawer.VERSION="0.0.1-beta.7";export{Drawer as default};

package/dist/index.umd.js

@@ -1,6 +1,6 @@
 /*
-* @ezuikit/control-drawer v0.0.1-beta.6
-* Copyright (c) 2026-10-04 18:26:00 Ezviz-OpenBiz
+* @ezuikit/control-drawer v0.0.1-beta.7
+* Copyright (c) 2026-10-13 15:01:37 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 _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._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){"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),this.options.open&&(this.open=!0)}var _proto=Drawer.prototype;return _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),document.removeEventListener("keydown",this._onKeydown),this._open&&this.options.closeOnEscape&&document.addEventListener("keydown",this._onKeydown)}},_proto.destroy=function(){this._destroyed||(this._destroyed=!0,this._open=!1,this._clearTimers(),document.removeEventListener("keydown",this._onKeydown),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===document.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._toSize=function(value){return null==value||""===value?null:"number"==typeof value?value+"px":value},_proto._render=function(){var _this_options_duration,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");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);var duration=null!=(_this_options_duration=this.options.duration)?_this_options_duration:300;if(root.style.setProperty("--edrawer-duration",duration+"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 width="1em" height="1em" viewBox="0 0 14 14" fill="currentColor" focusable="false" aria-hidden="true">\n  <path d="M13.3 0.7c-0.4-0.4-1-0.4-1.4 0L7 5.6 2.1 0.7c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4L5.6 7 0.7 11.9c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.5 0.3 0.7 0.3s0.5-0.1 0.7-0.3L7 8.4l4.9 4.9c0.2 0.2 0.5 0.3 0.7 0.3s0.5-0.1 0.7-0.3c0.4-0.4 0.4-1 0-1.4L8.4 7l4.9-4.9C13.7 1.7 13.7 1.1 13.3 0.7z"/>\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._reflow=function(el){return el.offsetHeight},_create_class(Drawer,[{key:"open",get:function(){return this._open},set:function(open){var _this_options_duration,_this=this,root=this._$root;if(!this._destroyed&&this._open!==open&&root){this._open=open,this._clearTimers();var duration=null!=(_this_options_duration=this.options.duration)?_this_options_duration:300;open?(null==this.options.onOpenStart||this.options.onOpenStart.call(this.options),this._attach(this._resolveMountTarget()),root.classList.remove("edrawer-hidden"),this._reflow(root),root.classList.add("edrawer-open"),this.options.closeOnEscape&&document.addEventListener("keydown",this._onKeydown),this._openTimer=setTimeout(function(){_this._openTimer=null,null==_this.options.onOpenEnd||_this.options.onOpenEnd.call(_this.options)},duration)):(null==this.options.onCloseStart||this.options.onCloseStart.call(this.options),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),document.removeEventListener("keydown",this._onKeydown)),null==this.options.onOpenChange||this.options.onOpenChange.call(this.options,open)}}}]),Drawer}();return Drawer.VERSION="0.0.1-beta.6",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,Drawer=function(){function Drawer(container,options){var _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._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){"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),this.options.open&&(this.open=!0)}var _proto=Drawer.prototype;return _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),document.removeEventListener("keydown",this._onKeydown),this._open&&this.options.closeOnEscape&&document.addEventListener("keydown",this._onKeydown)}},_proto.destroy=function(){this._destroyed||(this._destroyed=!0,this._open=!1,this._clearTimers(),document.removeEventListener("keydown",this._onKeydown),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===document.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._toSize=function(value){return null==value||""===value?null:"number"==typeof value?value+"px":value},_proto._render=function(){var _this_options_duration,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");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);var duration=null!=(_this_options_duration=this.options.duration)?_this_options_duration:300;if(root.style.setProperty("--edrawer-duration",duration+"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 width="1em" height="1em" viewBox="0 0 14 14" fill="currentColor" focusable="false" aria-hidden="true">\n  <path d="M13.3 0.7c-0.4-0.4-1-0.4-1.4 0L7 5.6 2.1 0.7c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4L5.6 7 0.7 11.9c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.5 0.3 0.7 0.3s0.5-0.1 0.7-0.3L7 8.4l4.9 4.9c0.2 0.2 0.5 0.3 0.7 0.3s0.5-0.1 0.7-0.3c0.4-0.4 0.4-1 0-1.4L8.4 7l4.9-4.9C13.7 1.7 13.7 1.1 13.3 0.7z"/>\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._reflow=function(el){return el.offsetHeight},_create_class(Drawer,[{key:"open",get:function(){return this._open},set:function(open){var _this_options_duration,_this=this,root=this._$root;if(!this._destroyed&&this._open!==open&&root){this._open=open,this._clearTimers();var duration=null!=(_this_options_duration=this.options.duration)?_this_options_duration:300;open?(null==this.options.onOpenStart||this.options.onOpenStart.call(this.options),this._attach(this._resolveMountTarget()),root.classList.remove("edrawer-hidden"),this._reflow(root),root.classList.add("edrawer-open"),this.options.closeOnEscape&&document.addEventListener("keydown",this._onKeydown),this._openTimer=setTimeout(function(){_this._openTimer=null,null==_this.options.onOpenEnd||_this.options.onOpenEnd.call(_this.options)},duration)):(null==this.options.onCloseStart||this.options.onCloseStart.call(this.options),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),document.removeEventListener("keydown",this._onKeydown)),null==this.options.onOpenChange||this.options.onOpenChange.call(this.options,open)}}}]),Drawer}();return Drawer.VERSION="0.0.1-beta.7",Drawer});

package/dist/style/style/index.scss

@@ -99,14 +99,15 @@ $edrawer-duration: 0.3s;
     pointer-events: auto;
   }
 
-  // 头部
+  // 头部：固定高度（含底部 1px 分隔线），内容垂直居中，避免被头部内的子元素（如日期栏）撑高
   &-header {
     display: flex;
     flex: 0 0 auto;
     align-items: center;
     justify-content: space-between;
     box-sizing: border-box;
-    padding: var(--edrawer-header-padding, 8px 16px);
+    height: var(--edrawer-header-height, 40px);
+    padding: var(--edrawer-header-padding, 0 16px);
     border-bottom: 1px solid var(--edrawer-header-border-color, rgba(0, 0, 0, 0.08));
   }
 
@@ -115,7 +116,7 @@ $edrawer-duration: 0.3s;
     min-width: 0;
     overflow: hidden;
     color: var(--edrawer-title-color, #333);
-    font-size: var(--edrawer-title-font-size, 12px);
+    font-size: var(--edrawer-title-font-size, 14px);
     font-weight: 500;
     line-height: 1.5;
     white-space: nowrap;
@@ -164,11 +165,3 @@ $edrawer-duration: 0.3s;
     display: none !important;
   }
 }
-
-// 尊重「减少动效」偏好
-@media (prefers-reduced-motion: reduce) {
-  .#{$edrawer-prefix-cls}-mask,
-  .#{$edrawer-prefix-cls}-panel {
-    transition: none;
-  }
-}

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;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;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;justify-content:space-between;padding:var(--edrawer-header-padding,8px 16px)}.edrawer-title{color:var(--edrawer-title-color,#333);flex:1 1 auto;font-size:var(--edrawer-title-font-size,12px);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;color:var(--edrawer-close-color,rgba(0,0,0,.4));cursor:pointer;display:inline-flex;flex:0 0 auto;font-size:14px;justify-content:center;margin-left:12px;padding:4px;transition:color .2s}.edrawer-close:hover{background:transparent;color:var(--edrawer-close-hover-color,#333)}.edrawer-close svg{display:block;height:14px;width:14px}.edrawer-body{box-sizing:border-box;flex:1 1 auto;min-height:0;overflow:auto;position:relative}.edrawer-hidden{display:none!important}@media (prefers-reduced-motion:reduce){.edrawer-mask,.edrawer-panel{transition:none}}
+.edrawer{bottom:0;box-sizing:border-box;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;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;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;color:var(--edrawer-close-color,rgba(0,0,0,.4));cursor:pointer;display:inline-flex;flex:0 0 auto;font-size:14px;justify-content:center;margin-left:12px;padding:4px;transition:color .2s}.edrawer-close:hover{background:transparent;color:var(--edrawer-close-hover-color,#333)}.edrawer-close svg{display:block;height:14px;width:14px}.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-beta.6
-* Copyright (c) 2026-10-04 18:26:00 Ezviz-OpenBiz
+* @ezuikit/control-drawer v0.0.1-beta.7
+* Copyright (c) 2026-10-13 15:01:37 Ezviz-OpenBiz
 * Released under the MIT License.
 */
 require("./style.css");

package/package.json

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