huibo-ui 0.3.0

package/dist/collection/components/Radio/Radio.js

@@ -0,0 +1,338 @@
+import { h } from "@stencil/core";
+/**
+ * Radio 单选框组件
+ * 在一组备选项中进行单选
+ */
+export class Radio {
+    el;
+    /**
+     * 绑定值
+     */
+    modelValue;
+    /**
+     * 单选框的值
+     */
+    value;
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled = false;
+    /**
+     * 是否选中
+     * @default false
+     */
+    checked = false;
+    /**
+     * 原生 name 属性
+     */
+    name;
+    /**
+     * 原生 id 属性
+     */
+    radioId;
+    /**
+     * 文本标签
+     */
+    label;
+    /**
+     * 是否显示边框
+     * @default false
+     */
+    border = false;
+    /**
+     * 尺寸
+     */
+    size = 'default';
+    /**
+     * 值改变事件
+     */
+    hbChange;
+    isChecked = false;
+    handleValueChange() {
+        this.updateChecked();
+    }
+    componentDidLoad() {
+        this.updateChecked();
+    }
+    updateChecked() {
+        if (this.value !== undefined) {
+            // 在 radio group 中
+            this.isChecked = this.modelValue === this.value;
+        }
+        else {
+            // 单个 radio
+            this.isChecked = this.checked;
+        }
+    }
+    handleChange = (e) => {
+        const target = e.target;
+        if (this.disabled) {
+            e.preventDefault();
+            return;
+        }
+        if (this.value !== undefined) {
+            // 在 radio group 中
+            this.modelValue = this.value;
+            this.isChecked = true;
+            this.hbChange.emit(this.value);
+        }
+        else {
+            // 单个 radio
+            this.isChecked = target.checked;
+            if (target.checked && this.value !== undefined) {
+                this.hbChange.emit(this.value);
+            }
+            else {
+                this.hbChange.emit(target.checked);
+            }
+        }
+    };
+    render() {
+        const inputId = this.radioId || `hb-radio-${Math.random().toString(36).substr(2, 9)}`;
+        return (h("label", { key: '3f069ee164a78574c94d973e06f435d172170d8c', class: {
+                'hb-radio': true,
+                'hb-radio--checked': this.isChecked,
+                'hb-radio--disabled': this.disabled,
+                'hb-radio--border': this.border,
+                [`hb-radio--${this.size}`]: true,
+            } }, h("span", { key: 'e8e0c6976efa57516d14bba9385f2424400c749c', class: "hb-radio__input" }, h("input", { key: '6a5cf424f748330a8b9214a2ee75f154f599a9ca', type: "radio", id: inputId, name: this.name, checked: this.isChecked, disabled: this.disabled, value: this.value, onChange: this.handleChange, class: "hb-radio__original" }), h("span", { key: '7c2d37231c2b7f28001bfb95014ffc638c324633', class: "hb-radio__inner" })), (this.label || this.value !== undefined) && (h("span", { key: '05980e96a3068f1dfd44719f688eb68c715fde85', class: "hb-radio__label" }, h("slot", { key: '96dfbd6157a555033a3f749032a44272c3a8588b' }, this.label || this.value)))));
+    }
+    static get is() { return "hb-radio"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["radio.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["radio.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "modelValue": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u7ED1\u5B9A\u503C"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "model-value",
+                "reflect": false
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5355\u9009\u6846\u7684\u503C"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u7981\u7528"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u9009\u4E2D"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "checked",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u539F\u751F name \u5C5E\u6027"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false
+            },
+            "radioId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u539F\u751F id \u5C5E\u6027"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "radio-id",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6587\u672C\u6807\u7B7E"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "border": {
+                "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\u8FB9\u6846"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "border",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'large' | 'default' | 'small'",
+                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5C3A\u5BF8"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'default'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isChecked": {}
+        };
+    }
+    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 | number | boolean",
+                    "resolved": "boolean | number | string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "modelValue",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "checked",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
+}
+//# sourceMappingURL=Radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE/F;;;GAGG;AAMH,MAAM,OAAO,KAAK;IACL,EAAE,CAAc;IAE3B;;OAEG;IACsB,UAAU,CAAmB;IAEtD;;OAEG;IACK,KAAK,CAAmB;IAEhC;;;OAGG;IACK,QAAQ,GAAY,KAAK,CAAC;IAElC;;;OAGG;IACK,OAAO,GAAY,KAAK,CAAC;IAEjC;;OAEG;IACK,IAAI,CAAU;IAEtB;;OAEG;IACK,OAAO,CAAU;IAEzB;;OAEG;IACK,KAAK,CAAU;IAEvB;;;OAGG;IACK,MAAM,GAAY,KAAK,CAAC;IAEhC;;OAEG;IACK,IAAI,GAAkC,SAAS,CAAC;IAExD;;OAEG;IACM,QAAQ,CAA0C;IAElD,SAAS,GAAY,KAAK,CAAC;IAKpC,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEO,aAAa;QACnB,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YAC7B,kBAAkB;YAClB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,KAAK,CAAC;QAClD,CAAC;aAAM,CAAC;YACN,WAAW;YACX,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;QAChC,CAAC;IACH,CAAC;IAEO,YAAY,GAAG,CAAC,CAAQ,EAAE,EAAE;QAClC,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAE5C,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,OAAO;QACT,CAAC;QAED,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YAC7B,kBAAkB;YAClB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;YAC7B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC;aAAM,CAAC;YACN,WAAW;YACX,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;YAChC,IAAI,MAAM,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;gBAC/C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACjC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YACrC,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEF,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,YAAY,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;QAEtF,OAAO,CACL,8DACE,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI;gBAChB,mBAAmB,EAAE,IAAI,CAAC,SAAS;gBACnC,oBAAoB,EAAE,IAAI,CAAC,QAAQ;gBACnC,kBAAkB,EAAE,IAAI,CAAC,MAAM;gBAC/B,CAAC,aAAa,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;aACjC;YAED,6DAAM,KAAK,EAAC,iBAAiB;gBAC3B,8DACE,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,KAAK,EAAC,oBAAoB,GAC1B;gBACF,6DAAM,KAAK,EAAC,iBAAiB,GAAQ,CAChC;YACN,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,IAAI,CAC3C,6DAAM,KAAK,EAAC,iBAAiB;gBAC3B,+DAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAQ,CAClC,CACR,CACK,CACT,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\n\n/**\n * Radio 单选框组件\n * 在一组备选项中进行单选\n */\n@Component({\n  tag: 'hb-radio',\n  styleUrl: 'radio.css',\n  shadow: true,\n})\nexport class Radio {\n  @Element() el: HTMLElement;\n\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue?: string | number;\n\n  /**\n   * 单选框的值\n   */\n  @Prop() value?: string | number;\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 是否选中\n   * @default false\n   */\n  @Prop() checked: boolean = false;\n\n  /**\n   * 原生 name 属性\n   */\n  @Prop() name?: string;\n\n  /**\n   * 原生 id 属性\n   */\n  @Prop() radioId?: string;\n\n  /**\n   * 文本标签\n   */\n  @Prop() label?: string;\n\n  /**\n   * 是否显示边框\n   * @default false\n   */\n  @Prop() border: boolean = false;\n\n  /**\n   * 尺寸\n   */\n  @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<string | number | boolean>;\n\n  @State() isChecked: boolean = false;\n\n  @Watch('modelValue')\n  @Watch('checked')\n  @Watch('value')\n  handleValueChange() {\n    this.updateChecked();\n  }\n\n  componentDidLoad() {\n    this.updateChecked();\n  }\n\n  private updateChecked() {\n    if (this.value !== undefined) {\n      // 在 radio group 中\n      this.isChecked = this.modelValue === this.value;\n    } else {\n      // 单个 radio\n      this.isChecked = this.checked;\n    }\n  }\n\n  private handleChange = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    \n    if (this.disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    if (this.value !== undefined) {\n      // 在 radio group 中\n      this.modelValue = this.value;\n      this.isChecked = true;\n      this.hbChange.emit(this.value);\n    } else {\n      // 单个 radio\n      this.isChecked = target.checked;\n      if (target.checked && this.value !== undefined) {\n        this.hbChange.emit(this.value);\n      } else {\n        this.hbChange.emit(target.checked);\n      }\n    }\n  };\n\n  render() {\n    const inputId = this.radioId || `hb-radio-${Math.random().toString(36).substr(2, 9)}`;\n    \n    return (\n      <label\n        class={{\n          'hb-radio': true,\n          'hb-radio--checked': this.isChecked,\n          'hb-radio--disabled': this.disabled,\n          'hb-radio--border': this.border,\n          [`hb-radio--${this.size}`]: true,\n        }}\n      >\n        <span class=\"hb-radio__input\">\n          <input\n            type=\"radio\"\n            id={inputId}\n            name={this.name}\n            checked={this.isChecked}\n            disabled={this.disabled}\n            value={this.value}\n            onChange={this.handleChange}\n            class=\"hb-radio__original\"\n          />\n          <span class=\"hb-radio__inner\"></span>\n        </span>\n        {(this.label || this.value !== undefined) && (\n          <span class=\"hb-radio__label\">\n            <slot>{this.label || this.value}</slot>\n          </span>\n        )}\n      </label>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/Radio/radio.css

@@ -0,0 +1,158 @@
+:host {
+  display: inline-block;
+  --hb-radio-font-size: 14px;
+  --hb-radio-color: var(--hb-color-primary);
+  --hb-radio-border-color: var(--hb-border-color, #dcdfe6);
+  --hb-radio-text-color: var(--hb-color-text-regular, #606266);
+  --hb-radio-disabled-color: var(--hb-color-text-disabled, #c0c4cc);
+}
+
+.hb-radio {
+  color: var(--hb-radio-text-color);
+  font-weight: 500;
+  font-size: var(--hb-radio-font-size);
+  position: relative;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  user-select: none;
+  margin-right: 30px;
+}
+
+.hb-radio:last-child {
+  margin-right: 0;
+}
+
+.hb-radio__input {
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  display: inline-flex;
+  position: relative;
+  vertical-align: middle;
+}
+
+.hb-radio__original {
+  opacity: 0;
+  outline: none;
+  position: absolute;
+  margin: 0;
+  width: 0;
+  height: 0;
+  z-index: -1;
+}
+
+.hb-radio__inner {
+  border: 1px solid var(--hb-radio-border-color);
+  border-radius: 50%;
+  width: 14px;
+  height: 14px;
+  background-color: var(--hb-color-white, #ffffff);
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+  box-sizing: border-box;
+  transition: all 0.2s;
+}
+
+.hb-radio__inner::after {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: var(--hb-color-white, #ffffff);
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform 0.15s ease-in;
+}
+
+.hb-radio--checked .hb-radio__inner {
+  border-color: var(--hb-radio-color);
+  background: var(--hb-radio-color);
+}
+
+.hb-radio--checked .hb-radio__inner::after {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.hb-radio__label {
+  padding-left: 8px;
+  line-height: 1;
+  font-size: var(--hb-radio-font-size);
+}
+
+.hb-radio--disabled {
+  cursor: not-allowed;
+}
+
+.hb-radio--disabled .hb-radio__inner {
+  background-color: var(--hb-fill-color-light, #f5f7fa);
+  border-color: var(--hb-radio-border-color);
+  cursor: not-allowed;
+}
+
+.hb-radio--disabled .hb-radio__label {
+  color: var(--hb-radio-disabled-color);
+  cursor: not-allowed;
+}
+
+.hb-radio--border {
+  padding: 9px 15px 9px 9px;
+  border-radius: 4px;
+  border: 1px solid var(--hb-radio-border-color);
+  box-sizing: border-box;
+  white-space: nowrap;
+}
+
+.hb-radio--border.hb-radio--checked {
+  border-color: var(--hb-radio-color);
+}
+
+.hb-radio--border.hb-radio--disabled {
+  border-color: var(--hb-radio-border-color);
+  cursor: not-allowed;
+}
+
+.hb-radio--small {
+  font-size: 12px;
+}
+
+.hb-radio--small .hb-radio__inner {
+  width: 12px;
+  height: 12px;
+}
+
+.hb-radio--small .hb-radio__inner::after {
+  width: 3px;
+  height: 3px;
+}
+
+.hb-radio--small .hb-radio__label {
+  padding-left: 6px;
+}
+
+.hb-radio--large {
+  font-size: 16px;
+}
+
+.hb-radio--large .hb-radio__inner {
+  width: 16px;
+  height: 16px;
+}
+
+.hb-radio--large .hb-radio__inner::after {
+  width: 5px;
+  height: 5px;
+}
+
+.hb-radio--large .hb-radio__label {
+  padding-left: 10px;
+}
+
+.hb-radio:hover:not(.hb-radio--disabled) .hb-radio__inner {
+  border-color: var(--hb-radio-color);
+}
+