huibo-ui 0.3.0

package/dist/collection/components/Menu/menu.css

@@ -0,0 +1,143 @@
+:host {
+  display: block;
+}
+
+.hb-menu {
+  list-style: none;
+  margin: 0;
+  padding: 4px 0;
+  background-color: var(--hb-menu-bg, var(--hb-color-bg-container));
+  color: var(--hb-menu-color, var(--hb-color-text));
+  font-size: var(--hb-font-size-sm);
+  border-right: 1px solid var(--hb-color-border-secondary);
+  box-sizing: border-box;
+}
+
+/* ---- 水平模式 ---- */
+.hb-menu--horizontal {
+  display: flex;
+  border-right: none;
+  border-bottom: 1px solid var(--hb-color-border-secondary);
+}
+
+/* ---- 折叠 ---- */
+.hb-menu--collapsed {
+  width: 64px;
+}
+.hb-menu--collapsed .hb-menu-item__text,
+.hb-menu--collapsed .hb-sub-menu__label,
+.hb-menu--collapsed .hb-sub-menu__arrow {
+  display: none;
+}
+
+/* 折叠态 SubMenu：图标条布局（仅显示 icon），不再就地展开 */
+.hb-sub-menu--collapsed {
+  position: relative;
+}
+.hb-sub-menu--collapsed .hb-sub-menu__title {
+  justify-content: center;
+  padding: 0;
+}
+
+/* 折叠态浮层：绝对定位弹出在右侧 */
+.hb-sub-menu__children--popover {
+  position: absolute;
+  left: 100%;
+  top: 0;
+  margin-left: 4px;
+  min-width: 160px;
+  padding: 4px 0;
+  background-color: var(--hb-menu-bg, var(--hb-color-bg-container));
+  border: 1px solid var(--hb-color-border-secondary);
+  border-radius: var(--hb-radius-sm, 4px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+  z-index: 1000;
+  white-space: nowrap;
+}
+
+/* 折叠态浮层内的 MenuItem 取消就地展开时的缩进 */
+.hb-sub-menu__children--popover .hb-menu-item {
+  padding-left: var(--hb-spacing-md);
+}
+
+/* ---- MenuItem ---- */
+::slotted(hb-menu-item) {
+  display: block;
+}
+
+.hb-menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--hb-spacing-xs);
+  padding: 0 var(--hb-spacing-md);
+  height: var(--hb-size-default);
+  line-height: var(--hb-size-default);
+  cursor: pointer;
+  transition: all var(--hb-transition-duration) var(--hb-transition-function);
+  white-space: nowrap;
+  list-style: none;
+  box-sizing: border-box;
+}
+
+.hb-menu-item:hover:not(.hb-menu-item--disabled) {
+  background-color: var(--hb-menu-item-hover-bg, var(--hb-color-fill-tertiary));
+}
+
+.hb-menu-item--active {
+  color: var(--hb-menu-active-color, var(--hb-color-primary));
+  background-color: var(--hb-menu-item-active-bg, var(--hb-color-primary-bg));
+}
+
+.hb-menu-item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.hb-menu-item__icon {
+  display: inline-flex;
+  width: 16px;
+}
+
+/* ---- SubMenu ---- */
+.hb-sub-menu {
+  list-style: none;
+}
+
+.hb-sub-menu__title {
+  display: flex;
+  align-items: center;
+  gap: var(--hb-spacing-xs);
+  padding: 0 var(--hb-spacing-md);
+  height: var(--hb-size-default);
+  line-height: var(--hb-size-default);
+  cursor: pointer;
+  transition: all var(--hb-transition-duration);
+}
+
+.hb-sub-menu__title:hover {
+  background-color: var(--hb-menu-item-hover-bg, var(--hb-color-fill-tertiary));
+}
+
+.hb-sub-menu__label {
+  flex: 1;
+}
+
+.hb-sub-menu__arrow {
+  font-size: 10px;
+  transition: transform var(--hb-transition-duration);
+}
+
+.hb-sub-menu__arrow--open {
+  transform: rotate(90deg);
+}
+
+.hb-sub-menu__children {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  background-color: var(--hb-menu-bg, var(--hb-color-bg-container));
+}
+
+.hb-sub-menu__children .hb-menu-item {
+  padding-left: calc(var(--hb-spacing-md) + var(--hb-spacing-lg));
+}

package/dist/collection/components/Message/Message.js

@@ -0,0 +1,139 @@
+import { h } from "@stencil/core";
+const ICON_MAP = {
+    success: '✓',
+    warning: '⚠',
+    info: 'ℹ',
+    error: '✕',
+    loading: '⏳',
+};
+/**
+ * Message 消息提示组件
+ * 常用于主动操作后的反馈提示
+ */
+export class Message {
+    el;
+    /** 消息文字 */
+    message = '';
+    /** 消息类型 */
+    type = 'info';
+    /** 是否显示关闭按钮 */
+    closable = false;
+    /** 显示时间（毫秒），0 为不自动关闭 */
+    duration = 3000;
+    visible = true;
+    componentDidLoad() {
+        if (this.duration > 0) {
+            setTimeout(() => this.close(), this.duration);
+        }
+    }
+    close = () => {
+        this.visible = false;
+        setTimeout(() => this.el.remove(), 300);
+    };
+    render() {
+        return (h("div", { key: '51069b8f2a5079fcfd64bb24168907bbcfbfd869', class: {
+                'hb-message': true,
+                [`hb-message--${this.type}`]: true,
+                'hb-message--visible': this.visible,
+            }, role: "alert" }, h("span", { key: 'ad3123ae0c4eb9b8010c446bf0016d54af7b8a3a', class: "hb-message__icon" }, ICON_MAP[this.type]), h("span", { key: '557ea0f92544ab58079a498b8f90dc774746c0a2', class: "hb-message__text" }, this.message), this.closable && (h("span", { key: 'e90e3380ba2b9a473d5f839983b959584948fd2a', class: "hb-message__close", onClick: this.close }, "\u00D7"))));
+    }
+    static get is() { return "hb-message"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6D88\u606F\u6587\u5B57"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "message",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "MessageType",
+                    "resolved": "\"error\" | \"info\" | \"loading\" | \"success\" | \"warning\"",
+                    "references": {
+                        "MessageType": {
+                            "location": "local",
+                            "path": "/Users/vscoderwhy/Desktop/product/web-common/huibo-ui/src/components/Message/Message.tsx",
+                            "id": "src/components/Message/Message.tsx::MessageType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6D88\u606F\u7C7B\u578B"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'info'"
+            },
+            "closable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u663E\u793A\u5173\u95ED\u6309\u94AE"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "closable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "duration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u663E\u793A\u65F6\u95F4\uFF08\u6BEB\u79D2\uFF09\uFF0C0 \u4E3A\u4E0D\u81EA\u52A8\u5173\u95ED"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "duration",
+                "reflect": false,
+                "defaultValue": "3000"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "visible": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=Message.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../src/components/Message/Message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAInE,MAAM,QAAQ,GAAgC;IAC5C,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,GAAG;IACZ,IAAI,EAAE,GAAG;IACT,KAAK,EAAE,GAAG;IACV,OAAO,EAAE,GAAG;CACb,CAAC;AAEF;;;GAGG;AAKH,MAAM,OAAO,OAAO;IACP,EAAE,CAAc;IAE3B,WAAW;IACH,OAAO,GAAW,EAAE,CAAC;IAE7B,WAAW;IACH,IAAI,GAAgB,MAAM,CAAC;IAEnC,eAAe;IACP,QAAQ,GAAY,KAAK,CAAC;IAElC,wBAAwB;IAChB,QAAQ,GAAW,IAAI,CAAC;IAEvB,OAAO,GAAY,IAAI,CAAC;IAEjC,gBAAgB;QACd,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,EAAE,CAAC;YACtB,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAChD,CAAC;IACH,CAAC;IAEO,KAAK,GAAG,GAAG,EAAE;QACnB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,EAAE,GAAG,CAAC,CAAC;IAC1C,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI;gBAClB,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;gBAClC,qBAAqB,EAAE,IAAI,CAAC,OAAO;aACpC,EACD,IAAI,EAAC,OAAO;YAEZ,6DAAM,KAAK,EAAC,kBAAkB,IAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAQ;YAC3D,6DAAM,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,OAAO,CAAQ;YACnD,IAAI,CAAC,QAAQ,IAAI,CAChB,6DAAM,KAAK,EAAC,mBAAmB,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,aAAU,CAC9D,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Element } from '@stencil/core';\n\nexport type MessageType = 'success' | 'warning' | 'info' | 'error' | 'loading';\n\nconst ICON_MAP: Record<MessageType, string> = {\n  success: '✓',\n  warning: '⚠',\n  info: 'ℹ',\n  error: '✕',\n  loading: '⏳',\n};\n\n/**\n * Message 消息提示组件\n * 常用于主动操作后的反馈提示\n */\n@Component({\n  tag: 'hb-message',\n  shadow: true,\n})\nexport class Message {\n  @Element() el: HTMLElement;\n\n  /** 消息文字 */\n  @Prop() message: string = '';\n\n  /** 消息类型 */\n  @Prop() type: MessageType = 'info';\n\n  /** 是否显示关闭按钮 */\n  @Prop() closable: boolean = false;\n\n  /** 显示时间（毫秒），0 为不自动关闭 */\n  @Prop() duration: number = 3000;\n\n  @State() visible: boolean = true;\n\n  componentDidLoad() {\n    if (this.duration > 0) {\n      setTimeout(() => this.close(), this.duration);\n    }\n  }\n\n  private close = () => {\n    this.visible = false;\n    setTimeout(() => this.el.remove(), 300);\n  };\n\n  render() {\n    return (\n      <div\n        class={{\n          'hb-message': true,\n          [`hb-message--${this.type}`]: true,\n          'hb-message--visible': this.visible,\n        }}\n        role=\"alert\"\n      >\n        <span class=\"hb-message__icon\">{ICON_MAP[this.type]}</span>\n        <span class=\"hb-message__text\">{this.message}</span>\n        {this.closable && (\n          <span class=\"hb-message__close\" onClick={this.close}>×</span>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/Message/show-message.js

@@ -0,0 +1,24 @@
+/**
+ * 命令式 API：显示消息提示
+ * @example
+ * import { showMessage } from 'huibo-ui/dist/components/Message/show-message.js';
+ * showMessage({ message: '操作成功', type: 'success' });
+ */
+export function showMessage(options) {
+    let container = document.getElementById('hb-message-container');
+    if (!container) {
+        container = document.createElement('div');
+        container.id = 'hb-message-container';
+        container.style.cssText =
+            'position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:1100;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;';
+        document.body.appendChild(container);
+    }
+    const msg = document.createElement('hb-message');
+    msg.message = options.message;
+    msg.type = options.type || 'info';
+    msg.duration = options.duration ?? 3000;
+    msg.closable = options.closable ?? false;
+    container.appendChild(msg);
+    return msg;
+}
+//# sourceMappingURL=show-message.js.map

package/dist/collection/components/Message/show-message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"show-message.js","sourceRoot":"","sources":["../../../src/components/Message/show-message.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,OAK3B;IACC,IAAI,SAAS,GAAG,QAAQ,CAAC,cAAc,CAAC,sBAAsB,CAAC,CAAC;IAChE,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1C,SAAS,CAAC,EAAE,GAAG,sBAAsB,CAAC;QACtC,SAAS,CAAC,KAAK,CAAC,OAAO;YACrB,6JAA6J,CAAC;QAChK,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IACvC,CAAC;IAED,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAQ,CAAC;IACxD,GAAG,CAAC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;IAC9B,GAAG,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,IAAI,MAAM,CAAC;IAClC,GAAG,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,IAAI,IAAI,CAAC;IACxC,GAAG,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,IAAI,KAAK,CAAC;IAEzC,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IAC3B,OAAO,GAAG,CAAC;AACb,CAAC","sourcesContent":["import { MessageType } from './Message';\n\n/**\n * 命令式 API：显示消息提示\n * @example\n * import { showMessage } from 'huibo-ui/dist/components/Message/show-message.js';\n * showMessage({ message: '操作成功', type: 'success' });\n */\nexport function showMessage(options: {\n  message: string;\n  type?: MessageType;\n  duration?: number;\n  closable?: boolean;\n}) {\n  let container = document.getElementById('hb-message-container');\n  if (!container) {\n    container = document.createElement('div');\n    container.id = 'hb-message-container';\n    container.style.cssText =\n      'position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:1100;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;';\n    document.body.appendChild(container);\n  }\n\n  const msg = document.createElement('hb-message') as any;\n  msg.message = options.message;\n  msg.type = options.type || 'info';\n  msg.duration = options.duration ?? 3000;\n  msg.closable = options.closable ?? false;\n\n  container.appendChild(msg);\n  return msg;\n}\n"]}

package/dist/collection/components/Notification/Notification.js

@@ -0,0 +1,262 @@
+import { h } from "@stencil/core";
+/**
+ * Notification 通知提醒组件
+ * 悬浮出现在页面角落，用于系统中较复杂的反馈。
+ */
+export class Notification {
+    el;
+    /** 唯一标识 */
+    id = '';
+    /** 通知类型 */
+    type = 'info';
+    /** 标题 */
+    title = '';
+    /** 描述文字 */
+    message = '';
+    /** 显示时间（毫秒），0 为不自动关闭 */
+    duration = 4500;
+    /** 出现位置 */
+    position = 'top-right';
+    /** 是否显示关闭按钮 */
+    showClose = true;
+    /** 是否显示（受控） */
+    visible = true;
+    /** 关闭事件 */
+    hbClose;
+    timer = null;
+    componentDidLoad() {
+        if (this.visible && this.duration > 0) {
+            this.timer = setTimeout(() => this.close(), this.duration);
+        }
+    }
+    disconnectedCallback() {
+        if (this.timer) {
+            clearTimeout(this.timer);
+            this.timer = null;
+        }
+    }
+    close = () => {
+        if (this.timer) {
+            clearTimeout(this.timer);
+            this.timer = null;
+        }
+        this.visible = false;
+        this.hbClose.emit(this.id);
+    };
+    render() {
+        return (h("div", { key: '9848b6a924f89df2fa9996742f06986ad8c33da5', class: {
+                'hb-notification': true,
+                [`hb-notification--${this.type}`]: true,
+                [`hb-notification--${this.position}`]: true,
+                'hb-notification--visible': this.visible,
+            }, role: "alert" }, h("div", { key: 'a15adaf1401116e0dd462fa2a9abf56595052069', class: "hb-notification__icon", "aria-hidden": "true" }, h("span", { key: '7d56d7ce4760963f1bd7c214c5d19c9003e302ee', class: `hb-notification__icon-sign hb-notification__icon-sign--${this.type}` })), h("div", { key: '881c23e049f6870a4f2a4db347fdfaedc331708e', class: "hb-notification__content" }, this.title && h("div", { key: '034c55a3d5b0b4bbb27657db8f2f35bf917caf91', class: "hb-notification__title" }, this.title), this.message && h("div", { key: '0d49cebbf4e1db0baa953691c7519a2a8469563d', class: "hb-notification__message" }, this.message)), this.showClose && (h("button", { key: '180dc1d07aa4993a25ef97e92eb8ab4700e6c120', type: "button", class: "hb-notification__close", onClick: this.close, "aria-label": "\u5173\u95ED" }, "\u00D7"))));
+    }
+    static get is() { return "hb-notification"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["notification.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["notification.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u552F\u4E00\u6807\u8BC6"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "id",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "NotificationType",
+                    "resolved": "\"error\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {
+                        "NotificationType": {
+                            "location": "local",
+                            "path": "/Users/vscoderwhy/Desktop/product/web-common/huibo-ui/src/components/Notification/Notification.tsx",
+                            "id": "src/components/Notification/Notification.tsx::NotificationType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u901A\u77E5\u7C7B\u578B"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'info'"
+            },
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6807\u9898"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "title",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u63CF\u8FF0\u6587\u5B57"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "message",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "duration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u663E\u793A\u65F6\u95F4\uFF08\u6BEB\u79D2\uFF09\uFF0C0 \u4E3A\u4E0D\u81EA\u52A8\u5173\u95ED"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "duration",
+                "reflect": false,
+                "defaultValue": "4500"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "NotificationPosition",
+                    "resolved": "\"bottom-left\" | \"bottom-right\" | \"top-left\" | \"top-right\"",
+                    "references": {
+                        "NotificationPosition": {
+                            "location": "local",
+                            "path": "/Users/vscoderwhy/Desktop/product/web-common/huibo-ui/src/components/Notification/Notification.tsx",
+                            "id": "src/components/Notification/Notification.tsx::NotificationPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u51FA\u73B0\u4F4D\u7F6E"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "position",
+                "reflect": false,
+                "defaultValue": "'top-right'"
+            },
+            "showClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u663E\u793A\u5173\u95ED\u6309\u94AE"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-close",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "visible": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u663E\u793A\uFF08\u53D7\u63A7\uFF09"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "visible",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "hbClose",
+                "name": "hbClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5173\u95ED\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=Notification.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.js","sourceRoot":"","sources":["../../../src/components/Notification/Notification.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AAKjF;;;GAGG;AAMH,MAAM,OAAO,YAAY;IACZ,EAAE,CAAc;IAE3B,WAAW;IACH,EAAE,GAAW,EAAE,CAAC;IAExB,WAAW;IACH,IAAI,GAAqB,MAAM,CAAC;IAExC,SAAS;IACD,KAAK,GAAW,EAAE,CAAC;IAE3B,WAAW;IACH,OAAO,GAAW,EAAE,CAAC;IAE7B,wBAAwB;IAChB,QAAQ,GAAW,IAAI,CAAC;IAEhC,WAAW;IACH,QAAQ,GAAyB,WAAW,CAAC;IAErD,eAAe;IACP,SAAS,GAAY,IAAI,CAAC;IAElC,eAAe;IACU,OAAO,GAAY,IAAI,CAAC;IAEjD,WAAW;IACF,OAAO,CAAuB;IAE/B,KAAK,GAAyC,IAAI,CAAC;IAE3D,gBAAgB;QACd,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,EAAE,CAAC;YACtC,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC7D,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACzB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QACpB,CAAC;IACH,CAAC;IAEO,KAAK,GAAG,GAAG,EAAE;QACnB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACzB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QACpB,CAAC;QACD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE;gBACL,iBAAiB,EAAE,IAAI;gBACvB,CAAC,oBAAoB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;gBACvC,CAAC,oBAAoB,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI;gBAC3C,0BAA0B,EAAE,IAAI,CAAC,OAAO;aACzC,EACD,IAAI,EAAC,OAAO;YAEZ,4DAAK,KAAK,EAAC,uBAAuB,iBAAa,MAAM;gBACnD,6DAAM,KAAK,EAAE,0DAA0D,IAAI,CAAC,IAAI,EAAE,GAAI,CAClF;YACN,4DAAK,KAAK,EAAC,0BAA0B;gBAClC,IAAI,CAAC,KAAK,IAAI,4DAAK,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,KAAK,CAAO;gBACpE,IAAI,CAAC,OAAO,IAAI,4DAAK,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,OAAO,CAAO,CACvE;YACL,IAAI,CAAC,SAAS,IAAI,CACjB,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,wBAAwB,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,gBAAa,cAAI,aAEhF,CACV,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\n\nexport type NotificationType = 'success' | 'warning' | 'info' | 'error';\nexport type NotificationPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';\n\n/**\n * Notification 通知提醒组件\n * 悬浮出现在页面角落，用于系统中较复杂的反馈。\n */\n@Component({\n  tag: 'hb-notification',\n  styleUrl: 'notification.css',\n  shadow: true,\n})\nexport class Notification {\n  @Element() el: HTMLElement;\n\n  /** 唯一标识 */\n  @Prop() id: string = '';\n\n  /** 通知类型 */\n  @Prop() type: NotificationType = 'info';\n\n  /** 标题 */\n  @Prop() title: string = '';\n\n  /** 描述文字 */\n  @Prop() message: string = '';\n\n  /** 显示时间（毫秒），0 为不自动关闭 */\n  @Prop() duration: number = 4500;\n\n  /** 出现位置 */\n  @Prop() position: NotificationPosition = 'top-right';\n\n  /** 是否显示关闭按钮 */\n  @Prop() showClose: boolean = true;\n\n  /** 是否显示（受控） */\n  @Prop({ mutable: true }) visible: boolean = true;\n\n  /** 关闭事件 */\n  @Event() hbClose: EventEmitter<string>;\n\n  private timer: ReturnType<typeof setTimeout> | null = null;\n\n  componentDidLoad() {\n    if (this.visible && this.duration > 0) {\n      this.timer = setTimeout(() => this.close(), this.duration);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n    }\n  }\n\n  private close = () => {\n    if (this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n    }\n    this.visible = false;\n    this.hbClose.emit(this.id);\n  };\n\n  render() {\n    return (\n      <div\n        class={{\n          'hb-notification': true,\n          [`hb-notification--${this.type}`]: true,\n          [`hb-notification--${this.position}`]: true,\n          'hb-notification--visible': this.visible,\n        }}\n        role=\"alert\"\n      >\n        <div class=\"hb-notification__icon\" aria-hidden=\"true\">\n          <span class={`hb-notification__icon-sign hb-notification__icon-sign--${this.type}`} />\n        </div>\n        <div class=\"hb-notification__content\">\n          {this.title && <div class=\"hb-notification__title\">{this.title}</div>}\n          {this.message && <div class=\"hb-notification__message\">{this.message}</div>}\n        </div>\n        {this.showClose && (\n          <button type=\"button\" class=\"hb-notification__close\" onClick={this.close} aria-label=\"关闭\">\n            ×\n          </button>\n        )}\n      </div>\n    );\n  }\n}\n"]}