@ezuikit/control-drawer 0.0.1-beta.4 → 0.0.1-beta.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +3 -3
- package/dist/index.esm.js +3 -3
- package/dist/index.umd.js +3 -3
- package/dist/style/style/index.scss +3 -3
- package/dist/style/style.css +1 -1
- package/dist/style/style.js +2 -2
- package/dist/types/index.d.ts +13 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*
|
|
2
|
-
* @ezuikit/control-drawer v0.0.1-beta.
|
|
3
|
-
* Copyright (c) 2026-10-
|
|
2
|
+
* @ezuikit/control-drawer v0.0.1-beta.6
|
|
3
|
+
* Copyright (c) 2026-10-04 18:26:00 Ezviz-OpenBiz
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/
|
|
6
|
-
"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._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.
|
|
6
|
+
"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;
|
package/dist/index.esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*
|
|
2
|
-
* @ezuikit/control-drawer v0.0.1-beta.
|
|
3
|
-
* Copyright (c) 2026-10-
|
|
2
|
+
* @ezuikit/control-drawer v0.0.1-beta.6
|
|
3
|
+
* Copyright (c) 2026-10-04 18:26:00 Ezviz-OpenBiz
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/
|
|
6
|
-
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._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.
|
|
6
|
+
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};
|
package/dist/index.umd.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*
|
|
2
|
-
* @ezuikit/control-drawer v0.0.1-beta.
|
|
3
|
-
* Copyright (c) 2026-10-
|
|
2
|
+
* @ezuikit/control-drawer v0.0.1-beta.6
|
|
3
|
+
* Copyright (c) 2026-10-04 18:26:00 Ezviz-OpenBiz
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/
|
|
6
|
-
!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._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.
|
|
6
|
+
!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});
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
// 外观通过 --edrawer-* 变量定制，缺省值见各 var() 的回退值。
|
|
6
6
|
// -----------------------------------------------------------------------------
|
|
7
7
|
$edrawer-prefix-cls: 'edrawer';
|
|
8
|
-
//
|
|
8
|
+
// 开合过渡时长（默认回退值）：可通过根节点上的 --edrawer-duration 按实例覆盖，需与 JS 默认 _DRAWER_DURATION_（300ms）保持一致
|
|
9
9
|
$edrawer-duration: 0.3s;
|
|
10
10
|
|
|
11
11
|
.#{$edrawer-prefix-cls} {
|
|
@@ -34,7 +34,7 @@ $edrawer-duration: 0.3s;
|
|
|
34
34
|
left: 0;
|
|
35
35
|
background-color: var(--edrawer-mask-bg, rgba(0, 0, 0, 0.3));
|
|
36
36
|
opacity: 0;
|
|
37
|
-
transition: opacity $edrawer-duration ease;
|
|
37
|
+
transition: opacity var(--edrawer-duration, #{$edrawer-duration}) ease;
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
// 面板
|
|
@@ -46,7 +46,7 @@ $edrawer-duration: 0.3s;
|
|
|
46
46
|
overflow: hidden;
|
|
47
47
|
background-color: var(--edrawer-bg, #fff);
|
|
48
48
|
color: var(--edrawer-color, rgba(0, 0, 0, 0.88));
|
|
49
|
-
transition: transform $edrawer-duration ease;
|
|
49
|
+
transition: transform var(--edrawer-duration, #{$edrawer-duration}) ease;
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
// 弹出方向：收起态面板位于容器外侧
|
package/dist/style/style.css
CHANGED
|
@@ -1 +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
|
|
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}}
|
package/dist/style/style.js
CHANGED
package/dist/types/index.d.ts
CHANGED
|
@@ -32,6 +32,8 @@ interface DrawerOptions {
|
|
|
32
32
|
showClose?: boolean;
|
|
33
33
|
/** 按下 Esc 是否关闭，默认 true */
|
|
34
34
|
closeOnEscape?: boolean;
|
|
35
|
+
/** 开合动画时长（ms），默认 300，需与样式变量 `--edrawer-duration` 保持一致 */
|
|
36
|
+
duration?: number;
|
|
35
37
|
/** 创建后是否立即打开，默认 false（仅构造时生效） */
|
|
36
38
|
open?: boolean;
|
|
37
39
|
/** 根节点层级，缺省使用样式变量 `--edrawer-z-index`（默认 100） */
|
|
@@ -45,6 +47,14 @@ interface DrawerOptions {
|
|
|
45
47
|
getContainer?: DrawerContainerGetter;
|
|
46
48
|
/** 打开/关闭回调 */
|
|
47
49
|
onOpenChange?: (open: boolean) => void;
|
|
50
|
+
/** 打开开始回调（打开动画开始前同步触发） */
|
|
51
|
+
onOpenStart?: () => void;
|
|
52
|
+
/** 打开结束回调（打开过渡结束后触发） */
|
|
53
|
+
onOpenEnd?: () => void;
|
|
54
|
+
/** 关闭开始回调（关闭动画开始前同步触发） */
|
|
55
|
+
onCloseStart?: () => void;
|
|
56
|
+
/** 关闭结束回调（关闭过渡结束、根节点隐藏后触发） */
|
|
57
|
+
onCloseEnd?: () => void;
|
|
48
58
|
}
|
|
49
59
|
|
|
50
60
|
/**
|
|
@@ -86,6 +96,8 @@ declare class Drawer {
|
|
|
86
96
|
private _destroyed;
|
|
87
97
|
/** 收起动画结束后隐藏根节点的定时器 */
|
|
88
98
|
private _hideTimer;
|
|
99
|
+
/** 打开动画结束后回调的定时器 */
|
|
100
|
+
private _openTimer;
|
|
89
101
|
/**
|
|
90
102
|
* @param container 默认挂载容器，支持 CSS 选择器、元素 ID 或 HTMLElement，缺省或找不到时为 document.body。
|
|
91
103
|
* 非 body 容器需为定位元素（position 非 static），抽屉相对它铺满定位。
|
|
@@ -135,7 +147,7 @@ declare class Drawer {
|
|
|
135
147
|
private _mount;
|
|
136
148
|
/** 移除 DOM 与元素级监听，并释放全部节点引用 */
|
|
137
149
|
private _teardownDom;
|
|
138
|
-
private
|
|
150
|
+
private _clearTimers;
|
|
139
151
|
/** 读取布局属性以强制浏览器回流 */
|
|
140
152
|
private _reflow;
|
|
141
153
|
private readonly _onCloseClick;
|