huibo-ui 0.3.0

package/dist/collection/components/Notification/notification.css

@@ -0,0 +1,160 @@
+:host {
+  display: block;
+}
+
+.hb-notification {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--hb-spacing-sm);
+  width: 320px;
+  max-width: calc(100vw - 32px);
+  padding: var(--hb-spacing-md) var(--hb-spacing-lg);
+  background-color: var(--hb-color-bg-elevated);
+  border-radius: var(--hb-border-radius-base);
+  box-shadow: var(--hb-box-shadow-lg);
+  border-left: 4px solid var(--hb-color-primary);
+  font-size: var(--hb-font-size-sm);
+  color: var(--hb-color-text);
+  pointer-events: auto;
+  opacity: 0;
+  transform: translateX(0);
+  transition: opacity 0.3s, transform 0.3s;
+}
+
+.hb-notification--visible {
+  opacity: 1;
+}
+
+.hb-notification--top-right,
+.hb-notification--bottom-right {
+  transform: translateX(24px);
+}
+.hb-notification--top-right.hb-notification--visible,
+.hb-notification--bottom-right.hb-notification--visible {
+  transform: translateX(0);
+}
+
+.hb-notification--top-left,
+.hb-notification--bottom-left {
+  transform: translateX(-24px);
+}
+.hb-notification--top-left.hb-notification--visible,
+.hb-notification--bottom-left.hb-notification--visible {
+  transform: translateX(0);
+}
+
+/* 类型边框色 */
+.hb-notification--success { border-left-color: var(--hb-color-success); }
+.hb-notification--warning { border-left-color: var(--hb-color-warning); }
+.hb-notification--error   { border-left-color: var(--hb-color-danger); }
+.hb-notification--info    { border-left-color: var(--hb-color-primary); }
+
+.hb-notification__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  margin-top: 2px;
+}
+
+/* 用纯 CSS 形态表示图标，避免依赖 hb-icon */
+.hb-notification__icon-sign {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  position: relative;
+}
+.hb-notification__icon-sign::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+.hb-notification__icon-sign--success {
+  background-color: var(--hb-color-success);
+}
+.hb-notification__icon-sign--success::after {
+  content: '✓';
+  color: #fff;
+  font-size: 12px;
+  line-height: 18px;
+  text-align: center;
+  inset: auto 0 0 0;
+}
+.hb-notification__icon-sign--warning {
+  background-color: var(--hb-color-warning);
+}
+.hb-notification__icon-sign--warning::after {
+  content: '!';
+  color: #fff;
+  font-size: 12px;
+  line-height: 18px;
+  text-align: center;
+  inset: auto 0 0 0;
+}
+.hb-notification__icon-sign--error {
+  background-color: var(--hb-color-danger);
+}
+.hb-notification__icon-sign--error::after {
+  content: '✕';
+  color: #fff;
+  font-size: 10px;
+  line-height: 18px;
+  text-align: center;
+  inset: auto 0 0 0;
+}
+.hb-notification__icon-sign--info {
+  background-color: var(--hb-color-primary);
+}
+.hb-notification__icon-sign--info::after {
+  content: 'i';
+  color: #fff;
+  font-size: 12px;
+  line-height: 18px;
+  text-align: center;
+  font-style: italic;
+  font-weight: bold;
+  inset: auto 0 0 0;
+}
+
+.hb-notification__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.hb-notification__title {
+  font-size: var(--hb-font-size-base);
+  font-weight: 600;
+  color: var(--hb-color-text-primary);
+  margin-bottom: var(--hb-spacing-xxs);
+  line-height: 1.4;
+}
+
+.hb-notification__message {
+  color: var(--hb-color-text-secondary);
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+.hb-notification__close {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-left: var(--hb-spacing-xs);
+  cursor: pointer;
+  font-size: 16px;
+  color: var(--hb-color-text-tertiary);
+  border: none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color var(--hb-transition-duration), color var(--hb-transition-duration);
+}
+.hb-notification__close:hover {
+  background-color: var(--hb-color-fill-tertiary);
+  color: var(--hb-color-text-secondary);
+}

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

@@ -0,0 +1,53 @@
+let notifyCounter = 0;
+/**
+ * 获取（或创建）固定通知容器，按位置分区
+ */
+function getContainer(position) {
+    const containerClass = `hb-notification-container hb-notification-container--${position}`;
+    let container = document.querySelector(`.${containerClass.replace(/\s+/g, '.')}`);
+    if (!container) {
+        container = document.createElement('div');
+        container.className = containerClass;
+        const isTop = position.startsWith('top');
+        const isRight = position.endsWith('right');
+        const cssText = [
+            'position:fixed',
+            isTop ? 'top:20px' : 'bottom:20px',
+            isRight ? 'right:20px' : 'left:20px',
+            'z-index:1100',
+            'display:flex',
+            'flex-direction:column',
+            'gap:12px',
+            'pointer-events:none',
+        ].join(';');
+        container.style.cssText = cssText;
+        document.body.appendChild(container);
+    }
+    return container;
+}
+/**
+ * 命令式 API：显示通知提醒
+ * @example
+ * import { notify } from 'huibo-ui/dist/components/Notification/notify.js';
+ * notify({ title: '成功', message: '操作完成', type: 'success' });
+ */
+export function notify(options) {
+    const position = options.position || 'top-right';
+    const container = getContainer(position);
+    const id = options.id || `hb-notification-${++notifyCounter}`;
+    const el = document.createElement('hb-notification');
+    el.id = id;
+    el.type = options.type || 'info';
+    el.title = options.title || '';
+    el.message = options.message || '';
+    el.duration = options.duration ?? 4500;
+    el.position = position;
+    el.showClose = options.showClose ?? true;
+    // 关闭后自动从容器移除
+    el.addEventListener('hbClose', () => {
+        setTimeout(() => el.remove(), 300);
+    });
+    container.appendChild(el);
+    return el;
+}
+//# sourceMappingURL=notify.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"notify.js","sourceRoot":"","sources":["../../../src/components/Notification/notify.ts"],"names":[],"mappings":"AAcA,IAAI,aAAa,GAAG,CAAC,CAAC;AAEtB;;GAEG;AACH,SAAS,YAAY,CAAC,QAA8B;IAClD,MAAM,cAAc,GAAG,wDAAwD,QAAQ,EAAE,CAAC;IAC1F,IAAI,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAiB,IAAI,cAAc,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;IAClG,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1C,SAAS,CAAC,SAAS,GAAG,cAAc,CAAC;QACrC,MAAM,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACzC,MAAM,OAAO,GAAG,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QAC3C,MAAM,OAAO,GAAG;YACd,gBAAgB;YAChB,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa;YAClC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW;YACpC,cAAc;YACd,cAAc;YACd,uBAAuB;YACvB,UAAU;YACV,qBAAqB;SACtB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACZ,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;QAClC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IACvC,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,MAAM,CAAC,OAAsB;IAC3C,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,IAAI,WAAW,CAAC;IACjD,MAAM,SAAS,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC;IAEzC,MAAM,EAAE,GAAG,OAAO,CAAC,EAAE,IAAI,mBAAmB,EAAE,aAAa,EAAE,CAAC;IAC9D,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAOlD,CAAC;IACF,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC;IACX,EAAE,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,IAAI,MAAM,CAAC;IACjC,EAAE,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC;IAC/B,EAAE,CAAC,OAAO,GAAG,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC;IACnC,EAAE,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,IAAI,IAAI,CAAC;IACvC,EAAE,CAAC,QAAQ,GAAG,QAAQ,CAAC;IACvB,EAAE,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,IAAI,IAAI,CAAC;IAEzC,aAAa;IACb,EAAE,CAAC,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE;QAClC,UAAU,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,MAAM,EAAE,EAAE,GAAG,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IAC1B,OAAO,EAAE,CAAC;AACZ,CAAC","sourcesContent":["import { NotificationPosition, NotificationType } from './Notification';\n\nexport interface NotifyOptions {\n  /** 唯一标识，不传时自动生成 */\n  id?: string;\n  type?: NotificationType;\n  title?: string;\n  message?: string;\n  /** 显示时间（毫秒），默认 4500，0 为不自动关闭 */\n  duration?: number;\n  position?: NotificationPosition;\n  showClose?: boolean;\n}\n\nlet notifyCounter = 0;\n\n/**\n * 获取（或创建）固定通知容器，按位置分区\n */\nfunction getContainer(position: NotificationPosition): HTMLElement {\n  const containerClass = `hb-notification-container hb-notification-container--${position}`;\n  let container = document.querySelector<HTMLDivElement>(`.${containerClass.replace(/\\s+/g, '.')}`);\n  if (!container) {\n    container = document.createElement('div');\n    container.className = containerClass;\n    const isTop = position.startsWith('top');\n    const isRight = position.endsWith('right');\n    const cssText = [\n      'position:fixed',\n      isTop ? 'top:20px' : 'bottom:20px',\n      isRight ? 'right:20px' : 'left:20px',\n      'z-index:1100',\n      'display:flex',\n      'flex-direction:column',\n      'gap:12px',\n      'pointer-events:none',\n    ].join(';');\n    container.style.cssText = cssText;\n    document.body.appendChild(container);\n  }\n  return container;\n}\n\n/**\n * 命令式 API：显示通知提醒\n * @example\n * import { notify } from 'huibo-ui/dist/components/Notification/notify.js';\n * notify({ title: '成功', message: '操作完成', type: 'success' });\n */\nexport function notify(options: NotifyOptions): HTMLElement {\n  const position = options.position || 'top-right';\n  const container = getContainer(position);\n\n  const id = options.id || `hb-notification-${++notifyCounter}`;\n  const el = document.createElement('hb-notification') as HTMLElement & {\n    type: NotificationType;\n    title: string;\n    message: string;\n    duration: number;\n    position: NotificationPosition;\n    showClose: boolean;\n  };\n  el.id = id;\n  el.type = options.type || 'info';\n  el.title = options.title || '';\n  el.message = options.message || '';\n  el.duration = options.duration ?? 4500;\n  el.position = position;\n  el.showClose = options.showClose ?? true;\n\n  // 关闭后自动从容器移除\n  el.addEventListener('hbClose', () => {\n    setTimeout(() => el.remove(), 300);\n  });\n\n  container.appendChild(el);\n  return el;\n}\n"]}

package/dist/collection/components/PageHeader/PageHeader.js

@@ -0,0 +1,139 @@
+import { h } from "@stencil/core";
+/**
+ * PageHeader 页头组件
+ * 用于页面的头部区域，通常包含返回箭头、标题、副标题与右侧操作区
+ */
+export class PageHeader {
+    /** 标题 */
+    title = '';
+    /** 副标题 */
+    subtitle = '';
+    /** 是否显示返回箭头 */
+    back = false;
+    /** 幽灵模式（透明背景） */
+    ghost = false;
+    /** 返回箭头点击事件 */
+    hbBack;
+    handleBack = (e) => {
+        e.stopPropagation();
+        this.hbBack.emit();
+    };
+    render() {
+        return (h("div", { key: '1b030e60e77df9e97b6d60f704e521c05ae7af51', class: { 'hb-page-header': true, 'hb-page-header--ghost': this.ghost } }, h("div", { key: '2ee91ddf333fe5e771c9cbb0a62b14b03a3b1663', class: "hb-page-header__main" }, this.back && (h("button", { key: '225309da83f36a22e5e75200344399bcb94a3391', type: "button", class: "hb-page-header__back", onClick: this.handleBack, "aria-label": "\u8FD4\u56DE" }, h("span", { key: '1f67010455c9c682df8cefbb2dd81b1a41a73457', class: "hb-page-header__back-arrow" }, "\u2190"))), h("div", { key: '50ec1439869c987330e4536fe6f12e62416b1527', class: "hb-page-header__titles" }, this.title && h("span", { key: 'cdfde7eb8f6b643ea01327c87cab94db474b0825', class: "hb-page-header__title" }, this.title), this.subtitle && h("span", { key: '21756140f35d3fb19cea52d6c5a9e759641c0118', class: "hb-page-header__subtitle" }, this.subtitle))), h("div", { key: '59b5e1c8a71f17e9bb647394048ffe9484a85a5a', class: "hb-page-header__extra" }, h("slot", { key: '2c0543b118ac038e47b0aad6b389b996bf4f163c' }))));
+    }
+    static get is() { return "hb-page-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["page-header.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["page-header.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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": "''"
+            },
+            "subtitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u526F\u6807\u9898"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "subtitle",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "back": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u663E\u793A\u8FD4\u56DE\u7BAD\u5934"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "back",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "ghost": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5E7D\u7075\u6A21\u5F0F\uFF08\u900F\u660E\u80CC\u666F\uFF09"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "ghost",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "hbBack",
+                "name": "hbBack",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u8FD4\u56DE\u7BAD\u5934\u70B9\u51FB\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=PageHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.js","sourceRoot":"","sources":["../../../src/components/PageHeader/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAExE;;;GAGG;AAEH,MAAM,OAAO,UAAU;IACrB,SAAS;IACD,KAAK,GAAW,EAAE,CAAC;IAE3B,UAAU;IACF,QAAQ,GAAW,EAAE,CAAC;IAE9B,eAAe;IACP,IAAI,GAAY,KAAK,CAAC;IAE9B,iBAAiB;IACT,KAAK,GAAY,KAAK,CAAC;IAE/B,eAAe;IACN,MAAM,CAAqB;IAE5B,UAAU,GAAG,CAAC,CAAa,EAAE,EAAE;QACrC,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAI,CAAC,KAAK,EAAE;YACzE,4DAAK,KAAK,EAAC,sBAAsB;gBAC9B,IAAI,CAAC,IAAI,IAAI,CACZ,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,sBAAsB,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,gBAAa,cAAI;oBAC1F,6DAAM,KAAK,EAAC,4BAA4B,aAAS,CAC1C,CACV;gBACD,4DAAK,KAAK,EAAC,wBAAwB;oBAChC,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,KAAK,CAAQ;oBACrE,IAAI,CAAC,QAAQ,IAAI,6DAAM,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,QAAQ,CAAQ,CAC3E,CACF;YACN,4DAAK,KAAK,EAAC,uBAAuB;gBAChC,8DAAQ,CACJ,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n/**\n * PageHeader 页头组件\n * 用于页面的头部区域，通常包含返回箭头、标题、副标题与右侧操作区\n */\n@Component({ tag: 'hb-page-header', styleUrl: 'page-header.css', shadow: true })\nexport class PageHeader {\n  /** 标题 */\n  @Prop() title: string = '';\n\n  /** 副标题 */\n  @Prop() subtitle: string = '';\n\n  /** 是否显示返回箭头 */\n  @Prop() back: boolean = false;\n\n  /** 幽灵模式（透明背景） */\n  @Prop() ghost: boolean = false;\n\n  /** 返回箭头点击事件 */\n  @Event() hbBack: EventEmitter<void>;\n\n  private handleBack = (e: MouseEvent) => {\n    e.stopPropagation();\n    this.hbBack.emit();\n  };\n\n  render() {\n    return (\n      <div class={{ 'hb-page-header': true, 'hb-page-header--ghost': this.ghost }}>\n        <div class=\"hb-page-header__main\">\n          {this.back && (\n            <button type=\"button\" class=\"hb-page-header__back\" onClick={this.handleBack} aria-label=\"返回\">\n              <span class=\"hb-page-header__back-arrow\">←</span>\n            </button>\n          )}\n          <div class=\"hb-page-header__titles\">\n            {this.title && <span class=\"hb-page-header__title\">{this.title}</span>}\n            {this.subtitle && <span class=\"hb-page-header__subtitle\">{this.subtitle}</span>}\n          </div>\n        </div>\n        <div class=\"hb-page-header__extra\">\n          <slot />\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/PageHeader/page-header.css

@@ -0,0 +1,39 @@
+:host { display: block; }
+.hb-page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--hb-spacing-md) var(--hb-spacing-lg);
+  background: var(--hb-color-bg-container);
+  border-bottom: 1px solid var(--hb-color-border-secondary);
+  border-radius: var(--hb-border-radius-sm);
+}
+.hb-page-header--ghost { background: transparent; border-bottom: none; }
+.hb-page-header__main { display: flex; align-items: center; gap: var(--hb-spacing-sm); min-width: 0; }
+.hb-page-header__back {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--hb-color-text);
+  font-size: var(--hb-font-size-lg);
+  line-height: 1;
+  cursor: pointer;
+  border-radius: var(--hb-border-radius-sm);
+  transition: background 0.2s;
+}
+.hb-page-header__back:hover { background: var(--hb-color-fill-secondary); }
+.hb-page-header__back-arrow { display: inline-block; }
+.hb-page-header__titles { display: flex; align-items: baseline; gap: var(--hb-spacing-sm); min-width: 0; }
+.hb-page-header__title {
+  font-size: var(--hb-font-size-xl);
+  font-weight: 600;
+  color: var(--hb-color-text-primary);
+  line-height: 1.4;
+}
+.hb-page-header__subtitle { font-size: var(--hb-font-size-sm); color: var(--hb-color-text-secondary); }
+.hb-page-header__extra { display: flex; align-items: center; gap: var(--hb-spacing-sm); flex-shrink: 0; }