huibo-ui 0.3.0

package/dist/collection/components/ColorPickerPanel/ColorPickerPanel.js

@@ -0,0 +1,195 @@
+import { h } from "@stencil/core";
+/**
+ * ColorPickerPanel 颜色选择器面板组件
+ * 颜色选择器面板，用于嵌入到其他组件中
+ */
+export class ColorPickerPanel {
+    /**
+     * 绑定值
+     */
+    modelValue;
+    /**
+     * 颜色格式
+     */
+    colorFormat = 'hex';
+    /**
+     * 是否显示透明度
+     * @default false
+     */
+    showAlpha = false;
+    /**
+     * 预定义颜色
+     */
+    predefine;
+    currentColor = '#409EFF';
+    /**
+     * 值改变事件
+     */
+    hbChange;
+    componentDidLoad() {
+        if (this.modelValue) {
+            this.currentColor = this.modelValue;
+        }
+    }
+    handleValueChange() {
+        if (this.modelValue) {
+            this.currentColor = this.modelValue;
+        }
+    }
+    handleColorSelect = (color) => {
+        this.currentColor = color;
+        this.modelValue = color;
+        this.hbChange.emit(color);
+    };
+    handleInputChange = (e) => {
+        const target = e.target;
+        this.handleColorSelect(target.value);
+    };
+    hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16)
+        } : null;
+    }
+    render() {
+        const rgb = this.hexToRgb(this.currentColor);
+        const predefinedColors = this.predefine || [
+            '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1',
+            '#1e90ff', '#c71585', '#000000', '#ffffff', '#808080',
+        ];
+        return (h("div", { key: '7f5215f6908b85c016b9fc68423d63736adc64ac', class: "hb-color-picker-panel" }, h("div", { key: '6e918eb9cfd1932f6b01bd1b4e34eab37f12d486', class: "hb-color-picker-panel__saturation" }, h("div", { key: '72b61931cb7d87060868328de1675998ebd59ec1', class: "hb-color-picker-panel__saturation-white" }), h("div", { key: 'a4e3f1c4ab9217793e710cf940ec15539eaa2f9d', class: "hb-color-picker-panel__saturation-black" }), h("div", { key: '68f53e538a84d86c6093a56a1cbc566e08a2e43e', class: "hb-color-picker-panel__saturation-pointer", style: {
+                left: rgb ? `${(rgb.r / 255) * 100}%` : '50%',
+                top: rgb ? `${(1 - rgb.g / 255) * 100}%` : '50%',
+            } })), h("div", { key: '990b800e049ea8c5fd421a011486df34754584df', class: "hb-color-picker-panel__controls" }, h("div", { key: 'f2ae82fe0034874c623c259efdaeb4f4101c9b4b', class: "hb-color-picker-panel__hue" }, h("div", { key: '85a4d5b390e52856addafe49f9a467ab9554d895', class: "hb-color-picker-panel__hue-bar" })), this.showAlpha && (h("div", { key: 'c4d984971839bed5d5af92d9a15942f30f44073e', class: "hb-color-picker-panel__alpha" }, h("div", { key: 'b61fd80f873c2c62561f4d814a397e5a8eed2cb6', class: "hb-color-picker-panel__alpha-bar", style: { backgroundColor: this.currentColor } })))), h("div", { key: '64b5d37078471a314c26ef3e3e64c54887310cc1', class: "hb-color-picker-panel__input" }, h("input", { key: '2769607efa327d7b3c9c5e3fda4842a553c30cd2', type: "text", class: "hb-color-picker-panel__input-hex", value: this.currentColor, onInput: this.handleInputChange }), rgb && (h("div", { key: '4d3bf72b243b12f5f39d9c3f9800877a6d1eae9c', class: "hb-color-picker-panel__input-rgb" }, h("input", { key: 'd71850226823825cdc9eacc3cf8ff8a9b4d2c001', type: "number", min: "0", max: "255", value: rgb.r }), h("input", { key: 'ac86df2ab2e50574ddfb4938a85154e58969170e', type: "number", min: "0", max: "255", value: rgb.g }), h("input", { key: '457450f4ccdfe741dc28077a7160c504608cc23c', type: "number", min: "0", max: "255", value: rgb.b })))), this.predefine && this.predefine.length > 0 && (h("div", { key: 'b6ed00f9d32b953c4985a2336ee7901b61c64931', class: "hb-color-picker-panel__predefine" }, predefinedColors.map((color) => (h("div", { class: {
+                'hb-color-picker-panel__predefine-color': true,
+                'hb-color-picker-panel__predefine-color--selected': color === this.currentColor,
+            }, style: { backgroundColor: color }, onClick: () => this.handleColorSelect(color) })))))));
+    }
+    static get is() { return "hb-color-picker-panel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["color-picker-panel.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["color-picker-panel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "modelValue": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u7ED1\u5B9A\u503C"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "model-value",
+                "reflect": false
+            },
+            "colorFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'hsl' | 'hsv' | 'hex' | 'rgb'",
+                    "resolved": "\"hex\" | \"hsl\" | \"hsv\" | \"rgb\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u989C\u8272\u683C\u5F0F"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "color-format",
+                "reflect": false,
+                "defaultValue": "'hex'"
+            },
+            "showAlpha": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u663E\u793A\u900F\u660E\u5EA6"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-alpha",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "predefine": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u9884\u5B9A\u4E49\u989C\u8272"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentColor": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "hbChange",
+                "name": "hbChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u503C\u6539\u53D8\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "modelValue",
+                "methodName": "handleValueChange"
+            }];
+    }
+}
+//# sourceMappingURL=ColorPickerPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerPanel.js","sourceRoot":"","sources":["../../../src/components/ColorPickerPanel/ColorPickerPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n/**\n * ColorPickerPanel 颜色选择器面板组件\n * 颜色选择器面板，用于嵌入到其他组件中\n */\n@Component({\n  tag: 'hb-color-picker-panel',\n  styleUrl: 'color-picker-panel.css',\n  shadow: true,\n})\nexport class ColorPickerPanel {\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue?: string;\n\n  /**\n   * 颜色格式\n   */\n  @Prop() colorFormat: 'hsl' | 'hsv' | 'hex' | 'rgb' = 'hex';\n\n  /**\n   * 是否显示透明度\n   * @default false\n   */\n  @Prop() showAlpha: boolean = false;\n\n  /**\n   * 预定义颜色\n   */\n  @Prop() predefine?: string[];\n\n  @State() currentColor: string = '#409EFF';\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<string>;\n\n  componentDidLoad() {\n    if (this.modelValue) {\n      this.currentColor = this.modelValue;\n    }\n  }\n\n  @Watch('modelValue')\n  handleValueChange() {\n    if (this.modelValue) {\n      this.currentColor = this.modelValue;\n    }\n  }\n\n  private handleColorSelect = (color: string) => {\n    this.currentColor = color;\n    this.modelValue = color;\n    this.hbChange.emit(color);\n  };\n\n  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    this.handleColorSelect(target.value);\n  };\n\n  private hexToRgb(hex: string): { r: number; g: number; b: number } | null {\n    const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n    return result ? {\n      r: parseInt(result[1], 16),\n      g: parseInt(result[2], 16),\n      b: parseInt(result[3], 16)\n    } : null;\n  }\n\n  render() {\n    const rgb = this.hexToRgb(this.currentColor);\n    const predefinedColors = this.predefine || [\n      '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1',\n      '#1e90ff', '#c71585', '#000000', '#ffffff', '#808080',\n    ];\n\n    return (\n      <div class=\"hb-color-picker-panel\">\n        <div class=\"hb-color-picker-panel__saturation\">\n          <div class=\"hb-color-picker-panel__saturation-white\"></div>\n          <div class=\"hb-color-picker-panel__saturation-black\"></div>\n          <div\n            class=\"hb-color-picker-panel__saturation-pointer\"\n            style={{\n              left: rgb ? `${(rgb.r / 255) * 100}%` : '50%',\n              top: rgb ? `${(1 - rgb.g / 255) * 100}%` : '50%',\n            }}\n          ></div>\n        </div>\n        <div class=\"hb-color-picker-panel__controls\">\n          <div class=\"hb-color-picker-panel__hue\">\n            <div class=\"hb-color-picker-panel__hue-bar\"></div>\n          </div>\n          {this.showAlpha && (\n            <div class=\"hb-color-picker-panel__alpha\">\n              <div class=\"hb-color-picker-panel__alpha-bar\" style={{ backgroundColor: this.currentColor }}></div>\n            </div>\n          )}\n        </div>\n        <div class=\"hb-color-picker-panel__input\">\n          <input\n            type=\"text\"\n            class=\"hb-color-picker-panel__input-hex\"\n            value={this.currentColor}\n            onInput={this.handleInputChange}\n          />\n          {rgb && (\n            <div class=\"hb-color-picker-panel__input-rgb\">\n              <input type=\"number\" min=\"0\" max=\"255\" value={rgb.r} />\n              <input type=\"number\" min=\"0\" max=\"255\" value={rgb.g} />\n              <input type=\"number\" min=\"0\" max=\"255\" value={rgb.b} />\n            </div>\n          )}\n        </div>\n        {this.predefine && this.predefine.length > 0 && (\n          <div class=\"hb-color-picker-panel__predefine\">\n            {predefinedColors.map((color) => (\n              <div\n                class={{\n                  'hb-color-picker-panel__predefine-color': true,\n                  'hb-color-picker-panel__predefine-color--selected': color === this.currentColor,\n                }}\n                style={{ backgroundColor: color }}\n                onClick={() => this.handleColorSelect(color)}\n              ></div>\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/ColorPickerPanel/color-picker-panel.css

@@ -0,0 +1,127 @@
+:host {
+  display: block;
+}
+
+.hb-color-picker-panel {
+  padding: 12px;
+  background-color: var(--hb-color-white, #ffffff);
+  border-radius: 4px;
+}
+
+.hb-color-picker-panel__saturation {
+  position: relative;
+  width: 100%;
+  height: 180px;
+  border-radius: 4px;
+  overflow: hidden;
+  cursor: crosshair;
+}
+
+.hb-color-picker-panel__saturation-white {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+}
+
+.hb-color-picker-panel__saturation-black {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
+}
+
+.hb-color-picker-panel__saturation-pointer {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--hb-color-white, #ffffff);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+}
+
+.hb-color-picker-panel__controls {
+  margin-top: 12px;
+}
+
+.hb-color-picker-panel__hue,
+.hb-color-picker-panel__alpha {
+  position: relative;
+  height: 12px;
+  border-radius: 2px;
+  margin-bottom: 8px;
+  cursor: pointer;
+}
+
+.hb-color-picker-panel__hue-bar {
+  height: 100%;
+  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+  border-radius: 2px;
+}
+
+.hb-color-picker-panel__alpha-bar {
+  height: 100%;
+  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
+  background-size: 8px 8px;
+  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
+  border-radius: 2px;
+}
+
+.hb-color-picker-panel__input {
+  margin-top: 12px;
+}
+
+.hb-color-picker-panel__input-hex {
+  width: 100%;
+  padding: 6px 8px;
+  border: 1px solid var(--hb-border-color, #dcdfe6);
+  border-radius: 4px;
+  font-size: 13px;
+  margin-bottom: 8px;
+}
+
+.hb-color-picker-panel__input-rgb {
+  display: flex;
+  gap: 8px;
+}
+
+.hb-color-picker-panel__input-rgb input {
+  flex: 1;
+  padding: 6px 8px;
+  border: 1px solid var(--hb-border-color, #dcdfe6);
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.hb-color-picker-panel__predefine {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid var(--hb-border-color-lighter, #e4e7ed);
+}
+
+.hb-color-picker-panel__predefine-color {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  cursor: pointer;
+  border: 2px solid transparent;
+  transition: transform 0.2s;
+}
+
+.hb-color-picker-panel__predefine-color:hover {
+  transform: scale(1.1);
+}
+
+.hb-color-picker-panel__predefine-color--selected {
+  border-color: var(--hb-color-primary);
+  transform: scale(1.1);
+}
+

package/dist/collection/components/ConfigProvider/ConfigProvider.js

@@ -0,0 +1,103 @@
+import { h } from "@stencil/core";
+/**
+ * ConfigProvider 全局配置组件
+ * 在组件树的最外层设置全局配置
+ */
+export class ConfigProvider {
+    el;
+    /** 主题：light / dark / 自定义 */
+    theme = 'light';
+    /** 全局默认尺寸 */
+    size = 'default';
+    /** 语言 */
+    locale = 'zh-CN';
+    render() {
+        return h("slot", { key: '2f5645093f96615556fea763173dc339b8dfb515' });
+    }
+    componentDidLoad() {
+        this.applyConfig();
+    }
+    componentDidUpdate() {
+        this.applyConfig();
+    }
+    applyConfig() {
+        // 主题：light / dark（自定义主题由消费者通过 CSS 变量设置）
+        if (this.theme === 'dark') {
+            this.el.setAttribute('data-theme', 'dark');
+        }
+        else if (this.theme === 'light') {
+            this.el.removeAttribute('data-theme');
+        }
+        // 全局尺寸：写入 data-size，子组件或全局 CSS 可通过 [data-size] 消费
+        this.el.setAttribute('data-size', this.size);
+        // 语言：写入 data-locale（i18n 文案接入为后续工作，当前先透出配置）
+        this.el.setAttribute('data-locale', this.locale);
+    }
+    static get is() { return "hb-config-provider"; }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark' | string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u4E3B\u9898\uFF1Alight / dark / \u81EA\u5B9A\u4E49"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'light'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'default' | 'large'",
+                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5168\u5C40\u9ED8\u8BA4\u5C3A\u5BF8"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u8BED\u8A00"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "locale",
+                "reflect": false,
+                "defaultValue": "'zh-CN'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=ConfigProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigProvider.js","sourceRoot":"","sources":["../../../src/components/ConfigProvider/ConfigProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE5D;;;GAGG;AAKH,MAAM,OAAO,cAAc;IACd,EAAE,CAAc;IAE3B,4BAA4B;IACpB,KAAK,GAA8B,OAAO,CAAC;IAEnD,aAAa;IACL,IAAI,GAAkC,SAAS,CAAC;IAExD,SAAS;IACD,MAAM,GAAW,OAAO,CAAC;IAEjC,MAAM;QACJ,OAAO,8DAAQ,CAAC;IAClB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAEO,WAAW;QACjB,wCAAwC;QACxC,IAAI,IAAI,CAAC,KAAK,KAAK,MAAM,EAAE,CAAC;YAC1B,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;QAC7C,CAAC;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,EAAE,CAAC;YAClC,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;QACxC,CAAC;QAED,kDAAkD;QAClD,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QAE7C,4CAA4C;QAC5C,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IACnD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element } from '@stencil/core';\n\n/**\n * ConfigProvider 全局配置组件\n * 在组件树的最外层设置全局配置\n */\n@Component({\n  tag: 'hb-config-provider',\n  shadow: false,\n})\nexport class ConfigProvider {\n  @Element() el: HTMLElement;\n\n  /** 主题：light / dark / 自定义 */\n  @Prop() theme: 'light' | 'dark' | string = 'light';\n\n  /** 全局默认尺寸 */\n  @Prop() size: 'small' | 'default' | 'large' = 'default';\n\n  /** 语言 */\n  @Prop() locale: string = 'zh-CN';\n\n  render() {\n    return <slot />;\n  }\n\n  componentDidLoad() {\n    this.applyConfig();\n  }\n\n  componentDidUpdate() {\n    this.applyConfig();\n  }\n\n  private applyConfig() {\n    // 主题：light / dark（自定义主题由消费者通过 CSS 变量设置）\n    if (this.theme === 'dark') {\n      this.el.setAttribute('data-theme', 'dark');\n    } else if (this.theme === 'light') {\n      this.el.removeAttribute('data-theme');\n    }\n\n    // 全局尺寸：写入 data-size，子组件或全局 CSS 可通过 [data-size] 消费\n    this.el.setAttribute('data-size', this.size);\n\n    // 语言：写入 data-locale（i18n 文案接入为后续工作，当前先透出配置）\n    this.el.setAttribute('data-locale', this.locale);\n  }\n}\n"]}

package/dist/collection/components/Container/Aside.js

@@ -0,0 +1,54 @@
+import { h } from "@stencil/core";
+/**
+ * Container Aside 组件
+ * 侧边栏容器
+ */
+export class Aside {
+    /**
+     * 宽度
+     */
+    width;
+    render() {
+        const style = {};
+        if (this.width) {
+            style.width = this.width;
+        }
+        return (h("aside", { key: 'f3a737773569b17eaeba7a061c087048d2f0b0d7', class: "hb-aside", style: style }, h("slot", { key: 'fde6d1fa95d2bb5c42202413b5c5716c85b26a7b' })));
+    }
+    static get is() { return "hb-aside"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["aside.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["aside.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5BBD\u5EA6"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "width",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=Aside.js.map

package/dist/collection/components/Container/Aside.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Aside.js","sourceRoot":"","sources":["../../../src/components/Container/Aside.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;GAGG;AAMH,MAAM,OAAO,KAAK;IAChB;;OAEG;IACK,KAAK,CAAU;IAEvB,MAAM;QACJ,MAAM,KAAK,GAAQ,EAAE,CAAC;QACtB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QAC3B,CAAC;QAED,OAAO,CACL,8DAAO,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,KAAK;YAClC,8DAAa,CACP,CACT,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Container Aside 组件\n * 侧边栏容器\n */\n@Component({\n  tag: 'hb-aside',\n  styleUrl: 'aside.css',\n  shadow: true,\n})\nexport class Aside {\n  /**\n   * 宽度\n   */\n  @Prop() width?: string;\n\n  render() {\n    const style: any = {};\n    if (this.width) {\n      style.width = this.width;\n    }\n\n    return (\n      <aside class=\"hb-aside\" style={style}>\n        <slot></slot>\n      </aside>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/Container/Container.js

@@ -0,0 +1,58 @@
+import { h } from "@stencil/core";
+/**
+ * Container 布局容器组件
+ * 用于布局的容器组件，方便快速搭建页面的基本结构
+ */
+export class Container {
+    /**
+     * 布局方向，vertical 时子元素为纵向排列
+     * @default false
+     */
+    direction = 'horizontal';
+    render() {
+        return (h("section", { key: '8d2029a2363134efb2feb8df16510a5ababe2764', class: {
+                'hb-container': true,
+                'hb-container--vertical': this.direction === 'vertical',
+            } }, h("slot", { key: 'fb2dea608d501e5db4a03657796571fdb30c9128' })));
+    }
+    static get is() { return "hb-container"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["container.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["container.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u5E03\u5C40\u65B9\u5411\uFF0Cvertical \u65F6\u5B50\u5143\u7D20\u4E3A\u7EB5\u5411\u6392\u5217"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "direction",
+                "reflect": false,
+                "defaultValue": "'horizontal'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=Container.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Container.js","sourceRoot":"","sources":["../../../src/components/Container/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;GAGG;AAMH,MAAM,OAAO,SAAS;IACpB;;;OAGG;IACK,SAAS,GAA8B,YAAY,CAAC;IAE5D,MAAM;QACJ,OAAO,CACL,gEACE,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,wBAAwB,EAAE,IAAI,CAAC,SAAS,KAAK,UAAU;aACxD;YAED,8DAAa,CACL,CACX,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Container 布局容器组件\n * 用于布局的容器组件，方便快速搭建页面的基本结构\n */\n@Component({\n  tag: 'hb-container',\n  styleUrl: 'container.css',\n  shadow: true,\n})\nexport class Container {\n  /**\n   * 布局方向，vertical 时子元素为纵向排列\n   * @default false\n   */\n  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  render() {\n    return (\n      <section\n        class={{\n          'hb-container': true,\n          'hb-container--vertical': this.direction === 'vertical',\n        }}\n      >\n        <slot></slot>\n      </section>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/Container/Footer.js

@@ -0,0 +1,54 @@
+import { h } from "@stencil/core";
+/**
+ * Container Footer 组件
+ * 底部容器
+ */
+export class Footer {
+    /**
+     * 高度
+     */
+    height;
+    render() {
+        const style = {};
+        if (this.height) {
+            style.height = this.height;
+        }
+        return (h("footer", { key: 'a6a73df27a1e1a7891a436a0f57c337e27cb9328', class: "hb-footer", style: style }, h("slot", { key: '02927f1f9433b928f2552ef19e2e3fbd7cf69d44' })));
+    }
+    static get is() { return "hb-footer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["footer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["footer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u9AD8\u5EA6"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "height",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=Footer.js.map

package/dist/collection/components/Container/Footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.js","sourceRoot":"","sources":["../../../src/components/Container/Footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;GAGG;AAMH,MAAM,OAAO,MAAM;IACjB;;OAEG;IACK,MAAM,CAAU;IAExB,MAAM;QACJ,MAAM,KAAK,GAAQ,EAAE,CAAC;QACtB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC7B,CAAC;QAED,OAAO,CACL,+DAAQ,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,KAAK;YACpC,8DAAa,CACN,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Container Footer 组件\n * 底部容器\n */\n@Component({\n  tag: 'hb-footer',\n  styleUrl: 'footer.css',\n  shadow: true,\n})\nexport class Footer {\n  /**\n   * 高度\n   */\n  @Prop() height?: string;\n\n  render() {\n    const style: any = {};\n    if (this.height) {\n      style.height = this.height;\n    }\n\n    return (\n      <footer class=\"hb-footer\" style={style}>\n        <slot></slot>\n      </footer>\n    );\n  }\n}\n\n"]}