huibo-ui 0.4.0 → 0.6.0

package/dist/collection/components/Steps/Step.js

@@ -5,7 +5,7 @@ export class Step {
     icon;
     status = 'wait';
     render() {
-        return h("div", { key: '63f299b0fda78da0625d0d33af185af098512986', class: "hb-step" }, h("slot", { key: '7d8193df46de7452dee4df28246552fd9bae9cee' }));
+        return h("div", { key: 'aef0fdedd0607289d0268e8d72aab5f44fc20e68', class: "hb-step" }, h("slot", { key: '1db9e594e00431c6b5d44c5b9b0e535e464fb359' }));
     }
     static get is() { return "hb-step"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/Steps/Steps.js

@@ -8,7 +8,7 @@ export class Steps {
     steps = [];
     componentDidLoad() {
         const items = this.el.querySelectorAll('hb-step');
-        this.steps = Array.from(items).map((item) => {
+        this.steps = Array.from(items).map(item => {
             const node = item;
             // 仅用 getAttribute：hb-step 的 @Prop() status 默认值为 'wait'，
             // 若读 (node as any).status 会拿到默认值，从而错误地覆盖 active 推导。
@@ -47,7 +47,7 @@ export class Steps {
         return String(index + 1);
     }
     render() {
-        return (h("ol", { key: 'f69b42d787de6ee114ed9ebef2e8d1a8fae60363', class: { 'hb-steps': true, [`hb-steps--${this.direction}`]: true, 'hb-steps--align-center': this.alignCenter }, role: "list" }, this.steps.map((step, i) => {
+        return (h("ol", { key: '0d8629001821503f45dfd45399f9e2fad40beae8', class: { 'hb-steps': true, [`hb-steps--${this.direction}`]: true, 'hb-steps--align-center': this.alignCenter }, role: "list" }, this.steps.map((step, i) => {
             const status = this.getStatus(i);
             return (h("li", { class: { 'hb-steps__item': true, [`hb-steps__item--${status}`]: true }, role: "listitem", "aria-current": status === 'process' ? 'step' : undefined, "aria-disabled": step.status === 'wait' && i > this.active ? 'true' : undefined }, h("div", { class: "hb-steps__head" }, h("span", { class: "hb-steps__icon", "aria-hidden": "true" }, this.renderIcon(i)), i < this.steps.length - 1 && h("div", { class: "hb-steps__line" })), h("div", { class: "hb-steps__main" }, h("div", { class: "hb-steps__title" }, step.title), step.description && h("div", { class: "hb-steps__description" }, step.description))));
         })));

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

@@ -1 +1 @@
-{"version":3,"file":"Steps.js","sourceRoot":"","sources":["../../../src/components/Steps/Steps.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element } from '@stencil/core';\n\nexport type StepStatus = 'wait' | 'process' | 'finish' | 'error';\n\ninterface StepMeta {\n  title: string;\n  description?: string;\n  /** 自定义图标名/标记（'hb-icon' name 或文本）。undefined 表示用默认序号/状态图标 */\n  icon?: string;\n  /** 子项显式状态覆盖（不指定则按 active 自动推导） */\n  status?: StepStatus;\n}\n\n@Component({ tag: 'hb-steps', styleUrl: 'steps.css', shadow: true })\nexport class Steps {\n  @Element() el: HTMLElement;\n  @Prop() active: number = 0;\n  @Prop() processStatus: StepStatus = 'process';\n  @Prop() alignCenter: boolean = false;\n  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  @State() steps: StepMeta[] = [];\n\n  componentDidLoad() {\n    const items = this.el.querySelectorAll('hb-step');\n    this.steps = Array.from(items).map((item) => {\n      const node = item as HTMLElement;\n      // 仅用 getAttribute：hb-step 的 @Prop() status 默认值为 'wait'，\n      // 若读 (node as any).status 会拿到默认值，从而错误地覆盖 active 推导。\n      // 用户显式在 HTML 上写 status=\"xxx\" 时 getAttribute 才有值。\n      return {\n        title: node.getAttribute('title') || '',\n        description: node.getAttribute('description') || undefined,\n        icon: node.getAttribute('icon') || undefined,\n        status: (node.getAttribute('status') || undefined) as StepStatus | undefined,\n      };\n    });\n  }\n\n  private getStatus(index: number): StepStatus {\n    const meta = this.steps[index];\n    // 子项显式 status 优先（仅当用户在 HTML 上写了 status 属性）\n    if (meta && meta.status) return meta.status;\n    if (index < this.active) return 'finish';\n    if (index === this.active) return this.processStatus;\n    return 'wait';\n  }\n\n  /** 渲染图标：子项自定义 icon 优先；否则按状态（finish=✓、error=✕、其余=序号） */\n  private renderIcon(index: number): any {\n    const meta = this.steps[index];\n    if (meta && meta.icon) {\n      // 自定义图标名：若与 hb-icon 内置图标同名则渲染 hb-icon，否则按文本渲染\n      return <hb-icon name={meta.icon} size={16} aria-hidden=\"true\" />;\n    }\n    const status = this.getStatus(index);\n    if (status === 'finish') return '✓';\n    if (status === 'error') return '✕';\n    return String(index + 1);\n  }\n\n  render() {\n    return (\n      <ol\n        class={{ 'hb-steps': true, [`hb-steps--${this.direction}`]: true, 'hb-steps--align-center': this.alignCenter }}\n        role=\"list\"\n      >\n        {this.steps.map((step, i) => {\n          const status = this.getStatus(i);\n          return (\n            <li\n              class={{ 'hb-steps__item': true, [`hb-steps__item--${status}`]: true }}\n              role=\"listitem\"\n              aria-current={status === 'process' ? 'step' : undefined}\n              aria-disabled={step.status === 'wait' && i > this.active ? 'true' : undefined}\n            >\n              <div class=\"hb-steps__head\">\n                <span class=\"hb-steps__icon\" aria-hidden=\"true\">{this.renderIcon(i)}</span>\n                {i < this.steps.length - 1 && <div class=\"hb-steps__line\"></div>}\n              </div>\n              <div class=\"hb-steps__main\">\n                <div class=\"hb-steps__title\">{step.title}</div>\n                {step.description && <div class=\"hb-steps__description\">{step.description}</div>}\n              </div>\n            </li>\n          );\n        })}\n      </ol>\n    );\n  }\n}\n"]}
+{"version":3,"file":"Steps.js","sourceRoot":"","sources":["../../../src/components/Steps/Steps.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element } from '@stencil/core';\n\nexport type StepStatus = 'wait' | 'process' | 'finish' | 'error';\n\ninterface StepMeta {\n  title: string;\n  description?: string;\n  /** 自定义图标名/标记（'hb-icon' name 或文本）。undefined 表示用默认序号/状态图标 */\n  icon?: string;\n  /** 子项显式状态覆盖（不指定则按 active 自动推导） */\n  status?: StepStatus;\n}\n\n@Component({ tag: 'hb-steps', styleUrl: 'steps.css', shadow: true })\nexport class Steps {\n  @Element() el: HTMLElement;\n  @Prop() active: number = 0;\n  @Prop() processStatus: StepStatus = 'process';\n  @Prop() alignCenter: boolean = false;\n  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  @State() steps: StepMeta[] = [];\n\n  componentDidLoad() {\n    const items = this.el.querySelectorAll('hb-step');\n    this.steps = Array.from(items).map(item => {\n      const node = item as HTMLElement;\n      // 仅用 getAttribute：hb-step 的 @Prop() status 默认值为 'wait'，\n      // 若读 (node as any).status 会拿到默认值，从而错误地覆盖 active 推导。\n      // 用户显式在 HTML 上写 status=\"xxx\" 时 getAttribute 才有值。\n      return {\n        title: node.getAttribute('title') || '',\n        description: node.getAttribute('description') || undefined,\n        icon: node.getAttribute('icon') || undefined,\n        status: (node.getAttribute('status') || undefined) as StepStatus | undefined,\n      };\n    });\n  }\n\n  private getStatus(index: number): StepStatus {\n    const meta = this.steps[index];\n    // 子项显式 status 优先（仅当用户在 HTML 上写了 status 属性）\n    if (meta && meta.status) return meta.status;\n    if (index < this.active) return 'finish';\n    if (index === this.active) return this.processStatus;\n    return 'wait';\n  }\n\n  /** 渲染图标：子项自定义 icon 优先；否则按状态（finish=✓、error=✕、其余=序号） */\n  private renderIcon(index: number): any {\n    const meta = this.steps[index];\n    if (meta && meta.icon) {\n      // 自定义图标名：若与 hb-icon 内置图标同名则渲染 hb-icon，否则按文本渲染\n      return <hb-icon name={meta.icon} size={16} aria-hidden=\"true\" />;\n    }\n    const status = this.getStatus(index);\n    if (status === 'finish') return '✓';\n    if (status === 'error') return '✕';\n    return String(index + 1);\n  }\n\n  render() {\n    return (\n      <ol class={{ 'hb-steps': true, [`hb-steps--${this.direction}`]: true, 'hb-steps--align-center': this.alignCenter }} role=\"list\">\n        {this.steps.map((step, i) => {\n          const status = this.getStatus(i);\n          return (\n            <li\n              class={{ 'hb-steps__item': true, [`hb-steps__item--${status}`]: true }}\n              role=\"listitem\"\n              aria-current={status === 'process' ? 'step' : undefined}\n              aria-disabled={step.status === 'wait' && i > this.active ? 'true' : undefined}\n            >\n              <div class=\"hb-steps__head\">\n                <span class=\"hb-steps__icon\" aria-hidden=\"true\">\n                  {this.renderIcon(i)}\n                </span>\n                {i < this.steps.length - 1 && <div class=\"hb-steps__line\"></div>}\n              </div>\n              <div class=\"hb-steps__main\">\n                <div class=\"hb-steps__title\">{step.title}</div>\n                {step.description && <div class=\"hb-steps__description\">{step.description}</div>}\n              </div>\n            </li>\n          );\n        })}\n      </ol>\n    );\n  }\n}\n"]}

package/dist/collection/components/Switch/Switch.js

@@ -68,7 +68,7 @@ export class Switch {
         // 宽度：inlinePrompt 与 text 模式都加宽；inlinePrompt 文字塞进圆点两侧，仍需更宽一些
         const hasText = !!(this.activeText || this.inactiveText);
         const width = this.width || (hasText ? (this.inlinePrompt ? 50 : 60) : 40);
-        return (h("label", { key: '8dd6419c9a3bf07eb817f7dcc5527a9205fbe3ce', class: {
+        return (h("label", { key: 'ff287325a739ef43860e353f54d9dda065c4e23d', class: {
                 'hb-switch': true,
                 'hb-switch--checked': isChecked,
                 'hb-switch--disabled': this.disabled,
@@ -77,9 +77,9 @@ export class Switch {
                 '--hb-switch-width': `${width}px`,
                 '--hb-switch-active-color': this.activeColor || 'var(--hb-color-primary)',
                 '--hb-switch-inactive-color': this.inactiveColor || 'var(--hb-color-text-placeholder, #c0c4cc)',
-            } }, h("input", { key: '1b9ad2ba8333d68eb277b4c3e69def909bc1afa4', type: "checkbox", class: "hb-switch__original", role: "switch", "aria-checked": isChecked ? 'true' : 'false', checked: isChecked, disabled: this.disabled, onChange: this.handleChange, "aria-label": this.activeText || this.inactiveText || undefined }), h("span", { key: '0e5f62e436fe4269fc5297304d387226048cd1da', class: "hb-switch__core" }, hasText && !this.inlinePrompt && (h("span", { key: 'a47d95af71418779db46c9ca3149db1632fce64a', class: "hb-switch__inner" }, isChecked ? this.activeText : this.inactiveText)), hasText && this.inlinePrompt && (
+            } }, h("input", { key: '47260aca8d13feffef8eeb2977af92de11325f2e', type: "checkbox", class: "hb-switch__original", role: "switch", "aria-checked": isChecked ? 'true' : 'false', checked: isChecked, disabled: this.disabled, onChange: this.handleChange, "aria-label": this.activeText || this.inactiveText || undefined }), h("span", { key: 'dd8e172783702332caf0000af65ec12e926fbba7', class: "hb-switch__core" }, hasText && !this.inlinePrompt && h("span", { key: 'b45b42e740bfe66b676be965d5811c6b35bc7f8c', class: "hb-switch__inner" }, isChecked ? this.activeText : this.inactiveText), hasText && this.inlinePrompt && (
         // 内联提示：开/关文字塞进圆点两侧，随切换显隐
-        h("span", { key: 'f1988e24665253db80209065c5269ffd5ccc7679', class: "hb-switch__inner hb-switch__inner--inline" }, h("span", { key: 'ad6cc1be25962c01ec4cc4ce67a623d52a0aa79f', class: "hb-switch__inner-text hb-switch__inner-text--active" }, this.activeText), h("span", { key: '2c7e5f3087e46079fa23d55b2f42d98b773cc5b9', class: "hb-switch__inner-text hb-switch__inner-text--inactive" }, this.inactiveText))))));
+        h("span", { key: 'b29c9c819dd6aa51999a16bd73a3d2bb971001df', class: "hb-switch__inner hb-switch__inner--inline" }, h("span", { key: '8107777ef14e720cbb000fb73f3db39ed10ed1cc', class: "hb-switch__inner-text hb-switch__inner-text--active" }, this.activeText), h("span", { key: 'ce8a279e0ddc7a6a0e0efc0a9b27f6b5ef677fc9', class: "hb-switch__inner-text hb-switch__inner-text--inactive" }, this.inactiveText))))));
     }
     static get is() { return "hb-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Switch 开关组件\n * 表示两种相互对立的状态间的切换，多用于触发「开/关」\n */\n@Component({\n  tag: 'hb-switch',\n  styleUrl: 'switch.css',\n  shadow: true,\n})\nexport class Switch {\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue: boolean = false;\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 是否显示文字描述\n   * @default false\n   */\n  @Prop() activeText?: string;\n\n  /**\n   * 关闭时的文字描述\n   */\n  @Prop() inactiveText?: string;\n\n  /**\n   * 打开时的背景色\n   */\n  @Prop() activeColor?: string;\n\n  /**\n   * 关闭时的背景色\n   */\n  @Prop() inactiveColor?: string;\n\n  /**\n   * 打开时的值\n   * @default true\n   */\n  @Prop() activeValue: boolean | string | number = true;\n\n  /**\n   * 关闭时的值\n   * @default false\n   */\n  @Prop() inactiveValue: boolean | string | number = false;\n\n  /**\n   * 宽度\n   */\n  @Prop() width?: number;\n\n  /**\n   * 是否内联提示\n   * @default false\n   */\n  @Prop() inlinePrompt: boolean = false;\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<boolean | string | number>;\n\n  private handleChange = (e: Event) => {\n    if (this.disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    const checked = (e.target as HTMLInputElement).checked;\n    const value = checked ? this.activeValue : this.inactiveValue;\n    \n    this.modelValue = checked;\n    this.hbChange.emit(value);\n  };\n\n  render() {\n    const isChecked = this.modelValue === this.activeValue;\n    // 宽度：inlinePrompt 与 text 模式都加宽；inlinePrompt 文字塞进圆点两侧，仍需更宽一些\n    const hasText = !!(this.activeText || this.inactiveText);\n    const width = this.width || (hasText ? (this.inlinePrompt ? 50 : 60) : 40);\n\n    return (\n      <label\n        class={{\n          'hb-switch': true,\n          'hb-switch--checked': isChecked,\n          'hb-switch--disabled': this.disabled,\n          'hb-switch--inline-prompt': this.inlinePrompt && hasText,\n        }}\n        style={{\n          '--hb-switch-width': `${width}px`,\n          '--hb-switch-active-color': this.activeColor || 'var(--hb-color-primary)',\n          '--hb-switch-inactive-color': this.inactiveColor || 'var(--hb-color-text-placeholder, #c0c4cc)',\n        }}\n      >\n        <input\n          type=\"checkbox\"\n          class=\"hb-switch__original\"\n          role=\"switch\"\n          aria-checked={isChecked ? 'true' : 'false'}\n          checked={isChecked}\n          disabled={this.disabled}\n          onChange={this.handleChange}\n          aria-label={this.activeText || this.inactiveText || undefined}\n        />\n        <span class=\"hb-switch__core\">\n          {hasText && !this.inlinePrompt && (\n            <span class=\"hb-switch__inner\">\n              {isChecked ? this.activeText : this.inactiveText}\n            </span>\n          )}\n          {hasText && this.inlinePrompt && (\n            // 内联提示：开/关文字塞进圆点两侧，随切换显隐\n            <span class=\"hb-switch__inner hb-switch__inner--inline\">\n              <span class=\"hb-switch__inner-text hb-switch__inner-text--active\">{this.activeText}</span>\n              <span class=\"hb-switch__inner-text hb-switch__inner-text--inactive\">{this.inactiveText}</span>\n            </span>\n          )}\n        </span>\n      </label>\n    );\n  }\n}\n\n"]}
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Switch 开关组件\n * 表示两种相互对立的状态间的切换，多用于触发「开/关」\n */\n@Component({\n  tag: 'hb-switch',\n  styleUrl: 'switch.css',\n  shadow: true,\n})\nexport class Switch {\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue: boolean = false;\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 是否显示文字描述\n   * @default false\n   */\n  @Prop() activeText?: string;\n\n  /**\n   * 关闭时的文字描述\n   */\n  @Prop() inactiveText?: string;\n\n  /**\n   * 打开时的背景色\n   */\n  @Prop() activeColor?: string;\n\n  /**\n   * 关闭时的背景色\n   */\n  @Prop() inactiveColor?: string;\n\n  /**\n   * 打开时的值\n   * @default true\n   */\n  @Prop() activeValue: boolean | string | number = true;\n\n  /**\n   * 关闭时的值\n   * @default false\n   */\n  @Prop() inactiveValue: boolean | string | number = false;\n\n  /**\n   * 宽度\n   */\n  @Prop() width?: number;\n\n  /**\n   * 是否内联提示\n   * @default false\n   */\n  @Prop() inlinePrompt: boolean = false;\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<boolean | string | number>;\n\n  private handleChange = (e: Event) => {\n    if (this.disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    const checked = (e.target as HTMLInputElement).checked;\n    const value = checked ? this.activeValue : this.inactiveValue;\n\n    this.modelValue = checked;\n    this.hbChange.emit(value);\n  };\n\n  render() {\n    const isChecked = this.modelValue === this.activeValue;\n    // 宽度：inlinePrompt 与 text 模式都加宽；inlinePrompt 文字塞进圆点两侧，仍需更宽一些\n    const hasText = !!(this.activeText || this.inactiveText);\n    const width = this.width || (hasText ? (this.inlinePrompt ? 50 : 60) : 40);\n\n    return (\n      <label\n        class={{\n          'hb-switch': true,\n          'hb-switch--checked': isChecked,\n          'hb-switch--disabled': this.disabled,\n          'hb-switch--inline-prompt': this.inlinePrompt && hasText,\n        }}\n        style={{\n          '--hb-switch-width': `${width}px`,\n          '--hb-switch-active-color': this.activeColor || 'var(--hb-color-primary)',\n          '--hb-switch-inactive-color': this.inactiveColor || 'var(--hb-color-text-placeholder, #c0c4cc)',\n        }}\n      >\n        <input\n          type=\"checkbox\"\n          class=\"hb-switch__original\"\n          role=\"switch\"\n          aria-checked={isChecked ? 'true' : 'false'}\n          checked={isChecked}\n          disabled={this.disabled}\n          onChange={this.handleChange}\n          aria-label={this.activeText || this.inactiveText || undefined}\n        />\n        <span class=\"hb-switch__core\">\n          {hasText && !this.inlinePrompt && <span class=\"hb-switch__inner\">{isChecked ? this.activeText : this.inactiveText}</span>}\n          {hasText && this.inlinePrompt && (\n            // 内联提示：开/关文字塞进圆点两侧，随切换显隐\n            <span class=\"hb-switch__inner hb-switch__inner--inline\">\n              <span class=\"hb-switch__inner-text hb-switch__inner-text--active\">{this.activeText}</span>\n              <span class=\"hb-switch__inner-text hb-switch__inner-text--inactive\">{this.inactiveText}</span>\n            </span>\n          )}\n        </span>\n      </label>\n    );\n  }\n}\n"]}

package/dist/collection/components/Switch/switch.css

@@ -36,7 +36,9 @@
   box-sizing: border-box;
   background: var(--hb-switch-inactive-color);
   cursor: pointer;
-  transition: border-color 0.3s, background-color 0.3s;
+  transition:
+    border-color 0.3s,
+    background-color 0.3s;
   vertical-align: middle;
 }
 
@@ -83,7 +85,6 @@
   cursor: not-allowed;
 }
 
-
 /* ---- inlinePrompt：文字塞进圆点两侧 ---- */
 .hb-switch--inline-prompt .hb-switch__inner--inline {
   left: 0;