huibo-ui 0.4.0 → 0.5.0

package/dist/collection/components/Dialog/Dialog.js

@@ -34,18 +34,28 @@ export class Dialog {
     zIndex = 0;
     panelRef;
     trap;
-    handleVisibleChange(newVal) {
+    /** 离场动画期间保留渲染（避免 display:none 打断 transition） */
+    leaving = false;
+    leaveTimer;
+    handleVisibleChange(newVal, oldVal) {
         if (newVal) {
+            // 打开：清掉可能残留的离场定时器，重置 leaving
+            if (this.leaveTimer) {
+                clearTimeout(this.leaveTimer);
+                this.leaveTimer = undefined;
+            }
+            this.leaving = false;
             this.zIndex = getNextZIndex();
             if (this.modal)
                 lockScroll();
             this.hbOpen.emit();
             document.addEventListener('keydown', this.handleKeyDown);
         }
-        else {
-            if (this.modal)
-                unlockScroll();
-            document.removeEventListener('keydown', this.handleKeyDown);
+        else if (oldVal) {
+            // 关闭（受控或内部触发统一走这里）：进入离场动画期，
+            // 动画结束（300ms）后才 emit closed + 真正卸载。
+            // 仅在「从打开→关闭」时执行，避免已关闭时重复 emit。
+            this.startLeave();
         }
     }
     disconnectedCallback() {
@@ -53,6 +63,8 @@ export class Dialog {
             unlockScroll();
         document.removeEventListener('keydown', this.handleKeyDown);
         this.trap?.disconnect();
+        if (this.leaveTimer)
+            clearTimeout(this.leaveTimer);
     }
     componentDidRender() {
         if (!this.panelRef)
@@ -74,24 +86,51 @@ export class Dialog {
     };
     close = () => {
         this.modelValue = false;
-        this.hbClose.emit();
-        setTimeout(() => this.hbClosed.emit(), 300);
+        this.startLeave();
     };
+    /**
+     * 进入离场动画期：解锁滚动、移除监听、保留 DOM 播放动画，
+     * 结束（300ms）后重置 leaving 并 emit hbClosed。
+     * 受控关闭（父组件直接设 modelValue=false 经 @Watch）与内部关闭（ESC/遮罩/关闭按钮）
+     * 统一走这里，保证两者行为一致（都有动画 + 都 emit hbClose/hbClosed）。
+     */
+    startLeave() {
+        if (this.modal)
+            unlockScroll();
+        document.removeEventListener('keydown', this.handleKeyDown);
+        this.hbClose.emit();
+        this.leaving = true;
+        if (this.leaveTimer)
+            clearTimeout(this.leaveTimer);
+        this.leaveTimer = setTimeout(() => {
+            this.leaving = false;
+            this.hbClosed.emit();
+        }, 300);
+    }
     handleOverlayClick = () => {
         if (this.closeOnClickModal)
             this.close();
     };
+    /** 是否应渲染弹层 DOM：打开中 或 离场动画期内 */
+    get shouldRender() {
+        return this.modelValue || this.leaving;
+    }
     render() {
-        if (this.destroyOnClose && !this.modelValue)
+        if (this.destroyOnClose && !this.shouldRender)
             return null;
-        return (h("div", { class: { 'hb-dialog-wrapper': true, 'hb-dialog-wrapper--hidden': !this.modelValue } }, this.modal && (h("div", { class: "hb-dialog__overlay", style: { zIndex: String(this.zIndex) }, onClick: this.handleOverlayClick })), h("div", { ref: (el) => (this.panelRef = el), class: {
+        return (h("div", { class: { 'hb-dialog-wrapper': true, 'hb-dialog-wrapper--hidden': !this.shouldRender } }, this.modal && (h("div", { class: {
+                'hb-dialog__overlay': true,
+                'hb-dialog__overlay--visible': this.modelValue,
+                'hb-dialog__overlay--leaving': this.leaving,
+            }, style: { zIndex: String(this.zIndex) }, onClick: this.handleOverlayClick })), h("div", { ref: el => (this.panelRef = el), class: {
                 'hb-dialog': true,
                 'hb-dialog--fullscreen': this.fullscreen,
                 'hb-dialog--visible': this.modelValue,
+                'hb-dialog--leaving': this.leaving,
             }, style: {
                 zIndex: String(this.zIndex + 1),
                 width: this.fullscreen ? '100%' : this.width,
-            }, role: "dialog", "aria-modal": "true" }, h("div", { class: "hb-dialog__header" }, h("span", { class: "hb-dialog__title" }, this.title), this.showClose && (h("button", { type: "button", class: "hb-dialog__close", "aria-label": "\u5173\u95ED", onClick: this.close }, "\u00D7"))), h("div", { class: "hb-dialog__body" }, h("slot", null)), h("div", { class: "hb-dialog__footer" }, h("slot", { name: "footer" })))));
+            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.modelValue ? 'false' : 'true' }, h("div", { class: "hb-dialog__header" }, h("span", { class: "hb-dialog__title" }, this.title), this.showClose && (h("button", { type: "button", class: "hb-dialog__close", "aria-label": "\u5173\u95ED", onClick: this.close }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M6 6l12 12M18 6L6 18" }))))), h("div", { class: "hb-dialog__body" }, h("slot", null)), h("div", { class: "hb-dialog__footer" }, h("slot", { name: "footer" })))));
     }
     static get is() { return "hb-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -289,6 +328,11 @@ export class Dialog {
             }
         };
     }
+    static get states() {
+        return {
+            "leaving": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "hbOpen",

package/dist/collection/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Watch, Element } from '@stencil/core';\nimport { lockScroll, unlockScroll, getNextZIndex } from '../../utils/popup-manager';\nimport { createFocusTrap, FocusTrap } from '../../utils/a11y';\n\n/**\n * Dialog 对话框组件\n * 在保留当前页面状态的情况下，告知用户并承载相关操作\n */\n@Component({\n  tag: 'hb-dialog',\n  styleUrl: 'dialog.css',\n  shadow: true,\n})\nexport class Dialog {\n  @Element() el: HTMLElement;\n\n  /** 是否显示 */\n  @Prop({ mutable: true }) modelValue: boolean = false;\n\n  /** 标题 */\n  @Prop() title: string = '';\n\n  /** 宽度 */\n  @Prop() width: string = '50%';\n\n  /** 是否全屏 */\n  @Prop() fullscreen: boolean = false;\n\n  /** 是否显示遮罩 */\n  @Prop() modal: boolean = true;\n\n  /** 是否点击遮罩关闭 */\n  @Prop() closeOnClickModal: boolean = true;\n\n  /** 是否按 ESC 关闭 */\n  @Prop() closeOnPressEscape: boolean = true;\n\n  /** 是否显示关闭按钮 */\n  @Prop() showClose: boolean = true;\n\n  /** 关闭时销毁 */\n  @Prop() destroyOnClose: boolean = false;\n\n  /** 打开事件 */\n  @Event() hbOpen: EventEmitter<void>;\n\n  /** 关闭事件 */\n  @Event() hbClose: EventEmitter<void>;\n\n  /** 已关闭动画结束事件 */\n  @Event() hbClosed: EventEmitter<void>;\n\n  private zIndex: number = 0;\n  private panelRef?: HTMLElement;\n  private trap?: FocusTrap;\n\n  @Watch('modelValue')\n  handleVisibleChange(newVal: boolean) {\n    if (newVal) {\n      this.zIndex = getNextZIndex();\n      if (this.modal) lockScroll();\n      this.hbOpen.emit();\n      document.addEventListener('keydown', this.handleKeyDown);\n    } else {\n      if (this.modal) unlockScroll();\n      document.removeEventListener('keydown', this.handleKeyDown);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.modelValue && this.modal) unlockScroll();\n    document.removeEventListener('keydown', this.handleKeyDown);\n    this.trap?.disconnect();\n  }\n\n  componentDidRender() {\n    if (!this.panelRef) return;\n    if (this.modelValue) {\n      if (!this.trap) {\n        this.trap = createFocusTrap({ container: this.panelRef });\n      }\n      this.trap.connect();\n    } else {\n      this.trap?.disconnect();\n    }\n  }\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.closeOnPressEscape && e.key === 'Escape') {\n      this.close();\n    }\n  };\n\n  private close = () => {\n    this.modelValue = false;\n    this.hbClose.emit();\n    setTimeout(() => this.hbClosed.emit(), 300);\n  };\n\n  private handleOverlayClick = () => {\n    if (this.closeOnClickModal) this.close();\n  };\n\n  render() {\n    if (this.destroyOnClose && !this.modelValue) return null;\n\n    return (\n      <div class={{ 'hb-dialog-wrapper': true, 'hb-dialog-wrapper--hidden': !this.modelValue }}>\n        {this.modal && (\n          <div\n            class=\"hb-dialog__overlay\"\n            style={{ zIndex: String(this.zIndex) }}\n            onClick={this.handleOverlayClick}\n          />\n        )}\n        <div\n          ref={(el) => (this.panelRef = el as HTMLElement)}\n          class={{\n            'hb-dialog': true,\n            'hb-dialog--fullscreen': this.fullscreen,\n            'hb-dialog--visible': this.modelValue,\n          }}\n          style={{\n            zIndex: String(this.zIndex + 1),\n            width: this.fullscreen ? '100%' : this.width,\n          }}\n          role=\"dialog\"\n          aria-modal=\"true\"\n        >\n          <div class=\"hb-dialog__header\">\n            <span class=\"hb-dialog__title\">{this.title}</span>\n            {this.showClose && (\n              <button type=\"button\" class=\"hb-dialog__close\" aria-label=\"关闭\" onClick={this.close}>×</button>\n            )}\n          </div>\n          <div class=\"hb-dialog__body\">\n            <slot />\n          </div>\n          <div class=\"hb-dialog__footer\">\n            <slot name=\"footer\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Watch, Element, State } from '@stencil/core';\nimport { lockScroll, unlockScroll, getNextZIndex } from '../../utils/popup-manager';\nimport { createFocusTrap, FocusTrap } from '../../utils/a11y';\n\n/**\n * Dialog 对话框组件\n * 在保留当前页面状态的情况下，告知用户并承载相关操作\n */\n@Component({\n  tag: 'hb-dialog',\n  styleUrl: 'dialog.css',\n  shadow: true,\n})\nexport class Dialog {\n  @Element() el: HTMLElement;\n\n  /** 是否显示 */\n  @Prop({ mutable: true }) modelValue: boolean = false;\n\n  /** 标题 */\n  @Prop() title: string = '';\n\n  /** 宽度 */\n  @Prop() width: string = '50%';\n\n  /** 是否全屏 */\n  @Prop() fullscreen: boolean = false;\n\n  /** 是否显示遮罩 */\n  @Prop() modal: boolean = true;\n\n  /** 是否点击遮罩关闭 */\n  @Prop() closeOnClickModal: boolean = true;\n\n  /** 是否按 ESC 关闭 */\n  @Prop() closeOnPressEscape: boolean = true;\n\n  /** 是否显示关闭按钮 */\n  @Prop() showClose: boolean = true;\n\n  /** 关闭时销毁 */\n  @Prop() destroyOnClose: boolean = false;\n\n  /** 打开事件 */\n  @Event() hbOpen: EventEmitter<void>;\n\n  /** 关闭事件 */\n  @Event() hbClose: EventEmitter<void>;\n\n  /** 已关闭动画结束事件 */\n  @Event() hbClosed: EventEmitter<void>;\n\n  private zIndex: number = 0;\n  private panelRef?: HTMLElement;\n  private trap?: FocusTrap;\n  /** 离场动画期间保留渲染（避免 display:none 打断 transition） */\n  @State() leaving: boolean = false;\n  private leaveTimer?: ReturnType<typeof setTimeout>;\n\n  @Watch('modelValue')\n  handleVisibleChange(newVal: boolean, oldVal: boolean) {\n    if (newVal) {\n      // 打开：清掉可能残留的离场定时器，重置 leaving\n      if (this.leaveTimer) {\n        clearTimeout(this.leaveTimer);\n        this.leaveTimer = undefined;\n      }\n      this.leaving = false;\n      this.zIndex = getNextZIndex();\n      if (this.modal) lockScroll();\n      this.hbOpen.emit();\n      document.addEventListener('keydown', this.handleKeyDown);\n    } else if (oldVal) {\n      // 关闭（受控或内部触发统一走这里）：进入离场动画期，\n      // 动画结束（300ms）后才 emit closed + 真正卸载。\n      // 仅在「从打开→关闭」时执行，避免已关闭时重复 emit。\n      this.startLeave();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.modelValue && this.modal) unlockScroll();\n    document.removeEventListener('keydown', this.handleKeyDown);\n    this.trap?.disconnect();\n    if (this.leaveTimer) clearTimeout(this.leaveTimer);\n  }\n\n  componentDidRender() {\n    if (!this.panelRef) return;\n    if (this.modelValue) {\n      if (!this.trap) {\n        this.trap = createFocusTrap({ container: this.panelRef });\n      }\n      this.trap.connect();\n    } else {\n      this.trap?.disconnect();\n    }\n  }\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.closeOnPressEscape && e.key === 'Escape') {\n      this.close();\n    }\n  };\n\n  private close = () => {\n    this.modelValue = false;\n    this.startLeave();\n  };\n\n  /**\n   * 进入离场动画期：解锁滚动、移除监听、保留 DOM 播放动画，\n   * 结束（300ms）后重置 leaving 并 emit hbClosed。\n   * 受控关闭（父组件直接设 modelValue=false 经 @Watch）与内部关闭（ESC/遮罩/关闭按钮）\n   * 统一走这里，保证两者行为一致（都有动画 + 都 emit hbClose/hbClosed）。\n   */\n  private startLeave() {\n    if (this.modal) unlockScroll();\n    document.removeEventListener('keydown', this.handleKeyDown);\n    this.hbClose.emit();\n    this.leaving = true;\n    if (this.leaveTimer) clearTimeout(this.leaveTimer);\n    this.leaveTimer = setTimeout(() => {\n      this.leaving = false;\n      this.hbClosed.emit();\n    }, 300);\n  }\n\n  private handleOverlayClick = () => {\n    if (this.closeOnClickModal) this.close();\n  };\n\n  /** 是否应渲染弹层 DOM：打开中 或 离场动画期内 */\n  private get shouldRender(): boolean {\n    return this.modelValue || this.leaving;\n  }\n\n  render() {\n    if (this.destroyOnClose && !this.shouldRender) return null;\n\n    return (\n      <div class={{ 'hb-dialog-wrapper': true, 'hb-dialog-wrapper--hidden': !this.shouldRender }}>\n        {this.modal && (\n          <div\n            class={{\n              'hb-dialog__overlay': true,\n              'hb-dialog__overlay--visible': this.modelValue,\n              'hb-dialog__overlay--leaving': this.leaving,\n            }}\n            style={{ zIndex: String(this.zIndex) }}\n            onClick={this.handleOverlayClick}\n          />\n        )}\n        <div\n          ref={el => (this.panelRef = el as HTMLElement)}\n          class={{\n            'hb-dialog': true,\n            'hb-dialog--fullscreen': this.fullscreen,\n            'hb-dialog--visible': this.modelValue,\n            'hb-dialog--leaving': this.leaving,\n          }}\n          style={{\n            zIndex: String(this.zIndex + 1),\n            width: this.fullscreen ? '100%' : this.width,\n          }}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={this.modelValue ? 'false' : 'true'}\n        >\n          <div class=\"hb-dialog__header\">\n            <span class=\"hb-dialog__title\">{this.title}</span>\n            {this.showClose && (\n              <button type=\"button\" class=\"hb-dialog__close\" aria-label=\"关闭\" onClick={this.close}>\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width={2} stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                  <path d=\"M6 6l12 12M18 6L6 18\" />\n                </svg>\n              </button>\n            )}\n          </div>\n          <div class=\"hb-dialog__body\">\n            <slot />\n          </div>\n          <div class=\"hb-dialog__footer\">\n            <slot name=\"footer\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/Dialog/dialog.css

@@ -22,30 +22,71 @@
   right: 0;
   bottom: 0;
   background-color: var(--hb-color-bg-mask);
-  transition: opacity 0.3s;
   pointer-events: auto;
+  /* 进场：opacity 0 → 1；离场由 --leaving class 反向播放 */
+  animation: hb-dialog-overlay-in 0.3s ease both;
+}
+
+.hb-dialog__overlay--leaving {
+  animation: hb-dialog-overlay-out 0.3s ease both;
+}
+
+@keyframes hb-dialog-overlay-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes hb-dialog-overlay-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
 }
 
 .hb-dialog {
   position: fixed;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%) scale(0.9);
   background-color: var(--hb-dialog-bg);
   border-radius: var(--hb-dialog-radius);
   box-shadow: var(--hb-dialog-shadow);
   pointer-events: auto;
-  opacity: 0;
-  transition: opacity 0.3s, transform 0.3s;
   display: flex;
   flex-direction: column;
   max-height: 90vh;
   overflow: hidden;
+  /* 进场：opacity + scale（对齐 antd Modal 的 fade+zoom） */
+  animation: hb-dialog-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 
-.hb-dialog--visible {
-  opacity: 1;
-  transform: translate(-50%, -50%) scale(1);
+.hb-dialog--leaving {
+  animation: hb-dialog-out 0.3s cubic-bezier(0.5, 0, 0.75, 0) both;
+}
+
+@keyframes hb-dialog-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+@keyframes hb-dialog-out {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.95);
+  }
 }
 
 .hb-dialog--fullscreen {
@@ -53,12 +94,12 @@
   height: 100vh;
   top: 0;
   left: 0;
-  transform: none;
   border-radius: 0;
   max-height: 100vh;
 }
-.hb-dialog--fullscreen.hb-dialog--visible {
-  transform: none;
+.hb-dialog--fullscreen,
+.hb-dialog--fullscreen.hb-dialog--leaving {
+  animation: none;
 }
 
 .hb-dialog__header {
@@ -83,11 +124,16 @@
   height: 28px;
   border: none;
   background: none;
-  font-size: 18px;
   color: var(--hb-color-text-secondary);
   cursor: pointer;
   border-radius: var(--hb-border-radius-sm);
   transition: all var(--hb-transition-duration);
+  padding: 0;
+}
+
+.hb-dialog__close svg {
+  width: 16px;
+  height: 16px;
 }
 
 .hb-dialog__close:hover {

package/dist/collection/components/Drawer/Drawer.js

@@ -15,10 +15,18 @@ export class Drawer {
     zIndex = 0;
     panelRef;
     trap;
+    /** 离场动画期内保留渲染 */
+    leaving = false;
+    leaveTimer;
     hbOpen;
     hbClose;
     handleVisible(val) {
         if (val) {
+            if (this.leaveTimer) {
+                clearTimeout(this.leaveTimer);
+                this.leaveTimer = undefined;
+            }
+            this.leaving = false;
             this.zIndex = getNextZIndex();
             this.zIndexState = this.zIndex;
             if (this.modal)
@@ -31,6 +39,13 @@ export class Drawer {
                 unlockScroll();
             this.hbClose.emit();
             document.removeEventListener('keydown', this.handleKeyDown);
+            // 进入离场动画期，结束后真正卸载
+            this.leaving = true;
+            if (this.leaveTimer)
+                clearTimeout(this.leaveTimer);
+            this.leaveTimer = setTimeout(() => {
+                this.leaving = false;
+            }, 300);
         }
     }
     componentDidRender() {
@@ -51,19 +66,34 @@ export class Drawer {
             unlockScroll();
         document.removeEventListener('keydown', this.handleKeyDown);
         this.trap?.disconnect();
+        if (this.leaveTimer)
+            clearTimeout(this.leaveTimer);
     }
     handleKeyDown = (e) => {
         if (this.closeOnPressEscape && e.key === 'Escape') {
             this.close();
         }
     };
-    close = () => { this.modelValue = false; };
+    close = () => {
+        this.modelValue = false;
+    };
+    get shouldRender() {
+        return this.modelValue || this.leaving;
+    }
     render() {
         const dir = this.direction;
         const isVertical = dir === 'ttb' || dir === 'btt';
         const sizeStyle = isVertical ? { height: this.size } : { width: this.size };
         const translateClass = `hb-drawer--${dir}`;
-        return (h("div", { key: 'e85f1040fdaacbf6e5d329f5561cdae25b2d4bc7', class: { 'hb-drawer-wrapper': true, 'hb-drawer-wrapper--visible': this.modelValue } }, this.modal && h("div", { key: '274cc165c21ea6490ca8f08be672b0605abc5d64', class: "hb-drawer__overlay", style: { zIndex: String(this.zIndexState) }, onClick: () => this.closeOnClickModal && this.close() }), h("div", { key: '8be6526f044035cfa31aebc66c5d459dbb2102af', ref: (el) => (this.panelRef = el), class: { 'hb-drawer': true, [translateClass]: true, 'hb-drawer--visible': this.modelValue }, style: { ...sizeStyle, zIndex: String(this.zIndexState + 1) }, role: "dialog", "aria-modal": "true", "aria-label": this.title || undefined }, h("div", { key: '826172fbe94e295fa146ef451455307fc97c7925', class: "hb-drawer__header" }, h("span", { key: 'a9fc420dea4707d6bd9ae38752c1ef08892ee44b', class: "hb-drawer__title" }, this.title), this.showClose && h("button", { key: 'b10452826b00e8fddc37a895af118c88b6c90ea4', type: "button", class: "hb-drawer__close", "aria-label": "\u5173\u95ED", onClick: this.close }, "\u00D7")), h("div", { key: 'f251c9c87ec21647c9bbc5363c6818b7fba4f7b5', class: "hb-drawer__body" }, h("slot", { key: '48e06fdeac538ec34aded9216c4a6ea98bd262ca' })))));
+        return (h("div", { key: '1b19a23690272c043ad80a8f4ad01470ef1f6627', class: { 'hb-drawer-wrapper': true, 'hb-drawer-wrapper--visible': this.shouldRender } }, this.modal && (h("div", { key: '6f1492a485eeb634e59a50300be5ad8af6ebfdcb', class: {
+                'hb-drawer__overlay': true,
+                'hb-drawer__overlay--leaving': this.leaving,
+            }, style: { zIndex: String(this.zIndexState) }, onClick: () => this.closeOnClickModal && this.close() })), h("div", { key: '4276468b6d5c2bc8628ccefeafc0de7acf372931', ref: el => (this.panelRef = el), class: {
+                'hb-drawer': true,
+                [translateClass]: true,
+                'hb-drawer--visible': this.modelValue,
+                'hb-drawer--leaving': this.leaving,
+            }, style: { ...sizeStyle, zIndex: String(this.zIndexState + 1) }, role: "dialog", "aria-modal": "true", "aria-label": this.title || undefined, "aria-hidden": this.modelValue ? 'false' : 'true' }, h("div", { key: '66c7aa0843425292845c3a3c5841abaca233efd4', class: "hb-drawer__header" }, h("span", { key: '07226dc7437adb12e0d08ccf2259c6e470d4eea3', class: "hb-drawer__title" }, this.title), this.showClose && (h("button", { key: '2658edb09e334c02fa0218b414c354b4cbb20220', type: "button", class: "hb-drawer__close", "aria-label": "\u5173\u95ED", onClick: this.close }, h("svg", { key: '8ad5e5558c02fdb0271fa93d6fa279dee949d9f0', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: 'ff3585922cdeb73e68dbf1755092ade914579506', d: "M6 6l12 12M18 6L6 18" }))))), h("div", { key: 'b64ddf86b2f5a0344b80e7fb729c19a2d6d6fe5c', class: "hb-drawer__body" }, h("slot", { key: '3e3904d5d149a765130eb5f59ac1d268d48c39f6' })))));
     }
     static get is() { return "hb-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -243,7 +273,8 @@ export class Drawer {
     }
     static get states() {
         return {
-            "zIndexState": {}
+            "zIndexState": {},
+            "leaving": {}
         };
     }
     static get events() {

package/dist/collection/components/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Watch, State } from '@stencil/core';\nimport { lockScroll, unlockScroll, getNextZIndex } from '../../utils/popup-manager';\nimport { createFocusTrap, FocusTrap } from '../../utils/a11y';\n\n@Component({ tag: 'hb-drawer', styleUrl: 'drawer.css', shadow: true })\nexport class Drawer {\n  @Prop({ mutable: true }) modelValue: boolean = false;\n  @Prop() title: string = '';\n  @Prop() size: string = '30%';\n  @Prop() direction: 'ltr' | 'rtl' | 'ttb' | 'btt' = 'rtl';\n  @Prop() closeOnClickModal: boolean = true;\n  @Prop() showClose: boolean = true;\n  @Prop() modal: boolean = true;\n  /** 是否按 ESC 关闭 */\n  @Prop() closeOnPressEscape: boolean = true;\n  @State() private zIndexState: number = 0;\n  private zIndex: number = 0;\n  private panelRef?: HTMLElement;\n  private trap?: FocusTrap;\n\n  @Event() hbOpen: EventEmitter<void>;\n  @Event() hbClose: EventEmitter<void>;\n\n  @Watch('modelValue')\n  handleVisible(val: boolean) {\n    if (val) {\n      this.zIndex = getNextZIndex();\n      this.zIndexState = this.zIndex;\n      if (this.modal) lockScroll();\n      this.hbOpen.emit();\n      document.addEventListener('keydown', this.handleKeyDown);\n    } else {\n      if (this.modal) unlockScroll();\n      this.hbClose.emit();\n      document.removeEventListener('keydown', this.handleKeyDown);\n    }\n  }\n\n  componentDidRender() {\n    if (!this.panelRef) return;\n    if (this.modelValue) {\n      if (!this.trap) {\n        this.trap = createFocusTrap({ container: this.panelRef });\n      }\n      this.trap.connect();\n    } else {\n      this.trap?.disconnect();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.modelValue && this.modal) unlockScroll();\n    document.removeEventListener('keydown', this.handleKeyDown);\n    this.trap?.disconnect();\n  }\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.closeOnPressEscape && e.key === 'Escape') {\n      this.close();\n    }\n  };\n\n  private close = () => { this.modelValue = false; };\n\n  render() {\n    const dir = this.direction;\n    const isVertical = dir === 'ttb' || dir === 'btt';\n    const sizeStyle = isVertical ? { height: this.size } : { width: this.size };\n    const translateClass = `hb-drawer--${dir}`;\n\n    return (\n      <div class={{ 'hb-drawer-wrapper': true, 'hb-drawer-wrapper--visible': this.modelValue }}>\n        {this.modal && <div class=\"hb-drawer__overlay\" style={{ zIndex: String(this.zIndexState) }} onClick={() => this.closeOnClickModal && this.close()} />}\n        <div\n          ref={(el) => (this.panelRef = el as HTMLElement)}\n          class={{ 'hb-drawer': true, [translateClass]: true, 'hb-drawer--visible': this.modelValue }}\n          style={{ ...sizeStyle, zIndex: String(this.zIndexState + 1) }}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label={this.title || undefined}\n        >\n          <div class=\"hb-drawer__header\">\n            <span class=\"hb-drawer__title\">{this.title}</span>\n            {this.showClose && <button type=\"button\" class=\"hb-drawer__close\" aria-label=\"关闭\" onClick={this.close}>×</button>}\n          </div>\n          <div class=\"hb-drawer__body\"><slot /></div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Watch, State } from '@stencil/core';\nimport { lockScroll, unlockScroll, getNextZIndex } from '../../utils/popup-manager';\nimport { createFocusTrap, FocusTrap } from '../../utils/a11y';\n\n@Component({ tag: 'hb-drawer', styleUrl: 'drawer.css', shadow: true })\nexport class Drawer {\n  @Prop({ mutable: true }) modelValue: boolean = false;\n  @Prop() title: string = '';\n  @Prop() size: string = '30%';\n  @Prop() direction: 'ltr' | 'rtl' | 'ttb' | 'btt' = 'rtl';\n  @Prop() closeOnClickModal: boolean = true;\n  @Prop() showClose: boolean = true;\n  @Prop() modal: boolean = true;\n  /** 是否按 ESC 关闭 */\n  @Prop() closeOnPressEscape: boolean = true;\n  @State() private zIndexState: number = 0;\n  private zIndex: number = 0;\n  private panelRef?: HTMLElement;\n  private trap?: FocusTrap;\n  /** 离场动画期内保留渲染 */\n  @State() private leaving: boolean = false;\n  private leaveTimer?: ReturnType<typeof setTimeout>;\n\n  @Event() hbOpen: EventEmitter<void>;\n  @Event() hbClose: EventEmitter<void>;\n\n  @Watch('modelValue')\n  handleVisible(val: boolean) {\n    if (val) {\n      if (this.leaveTimer) {\n        clearTimeout(this.leaveTimer);\n        this.leaveTimer = undefined;\n      }\n      this.leaving = false;\n      this.zIndex = getNextZIndex();\n      this.zIndexState = this.zIndex;\n      if (this.modal) lockScroll();\n      this.hbOpen.emit();\n      document.addEventListener('keydown', this.handleKeyDown);\n    } else {\n      if (this.modal) unlockScroll();\n      this.hbClose.emit();\n      document.removeEventListener('keydown', this.handleKeyDown);\n      // 进入离场动画期，结束后真正卸载\n      this.leaving = true;\n      if (this.leaveTimer) clearTimeout(this.leaveTimer);\n      this.leaveTimer = setTimeout(() => {\n        this.leaving = false;\n      }, 300);\n    }\n  }\n\n  componentDidRender() {\n    if (!this.panelRef) return;\n    if (this.modelValue) {\n      if (!this.trap) {\n        this.trap = createFocusTrap({ container: this.panelRef });\n      }\n      this.trap.connect();\n    } else {\n      this.trap?.disconnect();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.modelValue && this.modal) unlockScroll();\n    document.removeEventListener('keydown', this.handleKeyDown);\n    this.trap?.disconnect();\n    if (this.leaveTimer) clearTimeout(this.leaveTimer);\n  }\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.closeOnPressEscape && e.key === 'Escape') {\n      this.close();\n    }\n  };\n\n  private close = () => {\n    this.modelValue = false;\n  };\n\n  private get shouldRender(): boolean {\n    return this.modelValue || this.leaving;\n  }\n\n  render() {\n    const dir = this.direction;\n    const isVertical = dir === 'ttb' || dir === 'btt';\n    const sizeStyle = isVertical ? { height: this.size } : { width: this.size };\n    const translateClass = `hb-drawer--${dir}`;\n\n    return (\n      <div class={{ 'hb-drawer-wrapper': true, 'hb-drawer-wrapper--visible': this.shouldRender }}>\n        {this.modal && (\n          <div\n            class={{\n              'hb-drawer__overlay': true,\n              'hb-drawer__overlay--leaving': this.leaving,\n            }}\n            style={{ zIndex: String(this.zIndexState) }}\n            onClick={() => this.closeOnClickModal && this.close()}\n          />\n        )}\n        <div\n          ref={el => (this.panelRef = el as HTMLElement)}\n          class={{\n            'hb-drawer': true,\n            [translateClass]: true,\n            'hb-drawer--visible': this.modelValue,\n            'hb-drawer--leaving': this.leaving,\n          }}\n          style={{ ...sizeStyle, zIndex: String(this.zIndexState + 1) }}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label={this.title || undefined}\n          aria-hidden={this.modelValue ? 'false' : 'true'}\n        >\n          <div class=\"hb-drawer__header\">\n            <span class=\"hb-drawer__title\">{this.title}</span>\n            {this.showClose && (\n              <button type=\"button\" class=\"hb-drawer__close\" aria-label=\"关闭\" onClick={this.close}>\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width={2} stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                  <path d=\"M6 6l12 12M18 6L6 18\" />\n                </svg>\n              </button>\n            )}\n          </div>\n          <div class=\"hb-drawer__body\">\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/Drawer/drawer.css

@@ -1,18 +1,208 @@
-:host { display: contents; }
-.hb-drawer-wrapper { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 1000; }
-.hb-drawer__overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--hb-color-bg-mask); pointer-events: auto; transition: opacity 0.3s; }
+:host {
+  display: contents;
+}
+.hb-drawer-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 1000;
+}
+
+/* wrapper 默认不显示（modelValue=false 且离场结束时）；打开/离场期都可见 */
+.hb-drawer-wrapper:not(.hb-drawer-wrapper--visible) {
+  display: none;
+}
+
+.hb-drawer__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--hb-color-bg-mask);
+  pointer-events: auto;
+  animation: hb-drawer-overlay-in 0.3s ease both;
+}
+.hb-drawer__overlay--leaving {
+  animation: hb-drawer-overlay-out 0.3s ease both;
+}
+@keyframes hb-drawer-overlay-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes hb-drawer-overlay-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
 .hb-drawer {
-  position: fixed; background: var(--hb-color-bg-elevated); box-shadow: var(--hb-box-shadow-lg);
-  display: flex; flex-direction: column; pointer-events: auto; transition: transform 0.3s ease;
-}
-.hb-drawer--rtl { top: 0; right: 0; bottom: 0; transform: translateX(100%); }
-.hb-drawer--ltr { top: 0; left: 0; bottom: 0; transform: translateX(-100%); }
-.hb-drawer--ttb { left: 0; right: 0; top: 0; transform: translateY(-100%); }
-.hb-drawer--btt { left: 0; right: 0; bottom: 0; transform: translateY(100%); }
-.hb-drawer--visible.hb-drawer--rtl, .hb-drawer--visible.hb-drawer--ltr { transform: translateX(0); }
-.hb-drawer--visible.hb-drawer--ttb, .hb-drawer--visible.hb-drawer--btt { transform: translateY(0); }
-.hb-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: var(--hb-spacing-md) var(--hb-spacing-lg); border-bottom: 1px solid var(--hb-color-border-secondary); }
-.hb-drawer__title { font-size: var(--hb-font-size-lg); font-weight: 600; }
-.hb-drawer__close { border: none; background: none; font-size: 18px; cursor: pointer; color: var(--hb-color-text-secondary); width: 28px; height: 28px; border-radius: var(--hb-border-radius-sm); display: flex; align-items: center; justify-content: center; }
-.hb-drawer__close:hover { background: var(--hb-color-fill-tertiary); }
-.hb-drawer__body { flex: 1; padding: var(--hb-spacing-lg); overflow-y: auto; }
+  position: fixed;
+  background: var(--hb-color-bg-elevated);
+  box-shadow: var(--hb-box-shadow-lg);
+  display: flex;
+  flex-direction: column;
+  pointer-events: auto;
+}
+
+/* 四方向进场动画（从屏外滑入）。visible 时播放 in；leaving 时播放 out */
+.hb-drawer--rtl {
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+.hb-drawer--ltr {
+  top: 0;
+  left: 0;
+  bottom: 0;
+}
+.hb-drawer--ttb {
+  left: 0;
+  right: 0;
+  top: 0;
+}
+.hb-drawer--btt {
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.hb-drawer--visible.hb-drawer--rtl {
+  animation: hb-drawer-in-rtl 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+.hb-drawer--visible.hb-drawer--ltr {
+  animation: hb-drawer-in-ltr 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+.hb-drawer--visible.hb-drawer--ttb {
+  animation: hb-drawer-in-ttb 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+.hb-drawer--visible.hb-drawer--btt {
+  animation: hb-drawer-in-btt 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.hb-drawer--leaving.hb-drawer--rtl {
+  animation: hb-drawer-out-rtl 0.3s cubic-bezier(0.5, 0, 0.75, 0) both;
+}
+.hb-drawer--leaving.hb-drawer--ltr {
+  animation: hb-drawer-out-ltr 0.3s cubic-bezier(0.5, 0, 0.75, 0) both;
+}
+.hb-drawer--leaving.hb-drawer--ttb {
+  animation: hb-drawer-out-ttb 0.3s cubic-bezier(0.5, 0, 0.75, 0) both;
+}
+.hb-drawer--leaving.hb-drawer--btt {
+  animation: hb-drawer-out-btt 0.3s cubic-bezier(0.5, 0, 0.75, 0) both;
+}
+
+@keyframes hb-drawer-in-rtl {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes hb-drawer-out-rtl {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+@keyframes hb-drawer-in-ltr {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes hb-drawer-out-ltr {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+@keyframes hb-drawer-in-ttb {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes hb-drawer-out-ttb {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-100%);
+  }
+}
+@keyframes hb-drawer-in-btt {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes hb-drawer-out-btt {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+
+.hb-drawer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--hb-spacing-md) var(--hb-spacing-lg);
+  border-bottom: 1px solid var(--hb-color-border-secondary);
+}
+.hb-drawer__title {
+  font-size: var(--hb-font-size-lg);
+  font-weight: 600;
+}
+.hb-drawer__close {
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--hb-color-text-secondary);
+  width: 28px;
+  height: 28px;
+  border-radius: var(--hb-border-radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: all var(--hb-transition-duration);
+}
+.hb-drawer__close svg {
+  width: 16px;
+  height: 16px;
+}
+.hb-drawer__close:hover {
+  background: var(--hb-color-fill-tertiary);
+  color: var(--hb-color-text-primary);
+}
+.hb-drawer__body {
+  flex: 1;
+  padding: var(--hb-spacing-lg);
+  overflow-y: auto;
+}