easy-component-ui 2.0.5 → 2.1.0

package/components/ea-tag/index.css

@@ -0,0 +1,90 @@
+.ea-tag_wrap {
+  display: inline-block;
+  height: 2rem;
+  line-height: 30px;
+  white-space: nowrap;
+  padding: 0 0.625rem;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+}
+.ea-tag_wrap ea-icon {
+  font-size: 1rem;
+  margin-left: 0.5rem;
+  cursor: pointer;
+}
+.ea-tag_wrap.ea-tag--default {
+  color: #409eff;
+  background-color: #ecf5ff;
+  border-color: #dcdfe6;
+}
+.ea-tag_wrap.ea-tag--default.ea-tag--dark {
+  color: #fff;
+  background-color: #409eff;
+  border-color: #409eff;
+}
+.ea-tag_wrap.ea-tag--default.ea-tag--plain {
+  color: #409eff;
+  background-color: #fff;
+  border-color: #dcdfe6;
+}
+.ea-tag_wrap.ea-tag--success {
+  color: #67c23a;
+  background-color: #f0f9eb;
+  border-color: #e1f3d8;
+}
+.ea-tag_wrap.ea-tag--success.ea-tag--dark {
+  color: #fff;
+  background-color: #67c23a;
+  border-color: #67c23a;
+}
+.ea-tag_wrap.ea-tag--success.ea-tag--plain {
+  color: #67c23a;
+  background-color: #fff;
+  border-color: #e1f3d8;
+}
+.ea-tag_wrap.ea-tag--info {
+  color: #909399;
+  background-color: #f4f4f5;
+  border-color: #e9e9eb;
+}
+.ea-tag_wrap.ea-tag--info.ea-tag--dark {
+  color: #fff;
+  background-color: #909399;
+  border-color: #909399;
+}
+.ea-tag_wrap.ea-tag--info.ea-tag--plain {
+  color: #909399;
+  background-color: #fff;
+  border-color: #e9e9eb;
+}
+.ea-tag_wrap.ea-tag--warning {
+  color: #e6a23c;
+  background-color: #fdf6ec;
+  border-color: #faecd8;
+}
+.ea-tag_wrap.ea-tag--warning.ea-tag--dark {
+  color: #fff;
+  background-color: #e6a23c;
+  border-color: #e6a23c;
+}
+.ea-tag_wrap.ea-tag--warning.ea-tag--plain {
+  color: #e6a23c;
+  background-color: #fff;
+  border-color: #faecd8;
+}
+.ea-tag_wrap.ea-tag--danger {
+  color: #f56c6c;
+  background-color: #fef0f0;
+  border-color: #fbc4c4;
+}
+.ea-tag_wrap.ea-tag--danger.ea-tag--dark {
+  color: #fff;
+  background-color: #f56c6c;
+  border-color: #f56c6c;
+}
+.ea-tag_wrap.ea-tag--danger.ea-tag--plain {
+  color: #f56c6c;
+  background-color: #fff;
+  border-color: #fbc4c4;
+}

package/components/ea-tag/index.js

@@ -1 +1,107 @@
-import Base from"../Base.js";import"../ea-icon/index.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaTag extends Base{#e;#t;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n      <div class="ea-tag_wrap" part="container">\n        <slot></slot>\n      </div>\n    ',this.#e=e.querySelector(".ea-tag_wrap"),this.build(e,stylesheet)}get type(){return this.getAttribute("type")||"default"}set type(e){this.setAttribute("type",e),this.#e.classList.add(`ea-tag--${e}`)}get closable(){return this.getAttrBoolean("closable")}set closable(e){this.toggleAttr("closable",e)}get effect(){return this.getAttribute("effect")||"light"}set effect(e){"light"!==e&&(this.setAttribute("effect",e),this.#e.classList.add(`ea-tag--${e}`))}#s(){if(!this.closable)return;const e=document.createElement("ea-icon");e.icon="icon-cancel-circled2",e.part="close-icon",e.addEventListener("mouseenter",(t=>{e.icon="icon-cancel-circled"})),e.addEventListener("mouseleave",(t=>{e.icon="icon-cancel-circled2"})),e.addEventListener("click",(e=>{this.dispatchEvent(new CustomEvent("close",{detail:{value:this.innerText},bubbles:!0}))})),this.#e.appendChild(e)}connectedCallback(){this.effect=this.effect,this.type=this.type,this.closable=this.closable,this.#s()}}customElements.get("ea-tag")||customElements.define("ea-tag",EaTag);
+// @ts-nocheck
+import Base from '../Base.js';
+
+import "../ea-icon/index.js"
+
+import { stylesheet } from './src/style/stylesheet.js';
+
+export class EaTag extends Base {
+  #wrap;
+  #closeSlot;
+  constructor() {
+    super();
+
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+    shadowRoot.innerHTML = `
+      <div class="ea-tag_wrap" part="container">
+        <slot></slot>
+      </div>
+    `;
+
+    this.#wrap = shadowRoot.querySelector('.ea-tag_wrap');
+
+    this.build(shadowRoot, stylesheet);
+  }
+
+  // ------- type tag类型样式 -------
+  // #region
+  get type() {
+    return this.getAttribute('type') || "default";
+  }
+
+  set type(value) {
+    this.setAttribute('type', value);
+    this.#wrap.classList.add(`ea-tag--${value}`);
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- closable 是否显示可关闭 -------
+  // #region
+  get closable() {
+    return this.getAttrBoolean('closable');
+  }
+
+  set closable(value) {
+    this.toggleAttr('closable', value);
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- effect 不同主题 -------
+  // #region
+  get effect() {
+    return this.getAttribute('effect') || "light";
+  }
+
+  set effect(value) {
+    if (value === "light") return;
+
+    this.setAttribute('effect', value);
+    this.#wrap.classList.add(`ea-tag--${value}`);
+  }
+  // #endregion
+  // ------- end -------
+  #initCloseEvent() {
+    if (!this.closable) return;
+
+    const closeIcon = document.createElement('ea-icon');
+    closeIcon.icon = 'icon-cancel-circled2';
+    closeIcon.part = 'close-icon';
+
+    closeIcon.addEventListener('mouseenter', (e) => {
+      closeIcon.icon = 'icon-cancel-circled';
+    });
+
+    closeIcon.addEventListener('mouseleave', (e) => {
+      closeIcon.icon = 'icon-cancel-circled2';
+    });
+
+    closeIcon.addEventListener('click', (e) => {
+      this.dispatchEvent(new CustomEvent('close', {
+        detail: {
+          value: this.innerText
+        },
+        bubbles: true,
+      }));
+    });
+
+    this.#wrap.appendChild(closeIcon);
+  }
+
+  connectedCallback() {
+    // 主题
+    this.effect = this.effect;
+
+    // tag类型
+    this.type = this.type;
+
+    // 显示可关闭
+    this.closable = this.closable;
+    this.#initCloseEvent();
+  }
+}
+
+if (!customElements.get('ea-tag')) {
+  customElements.define('ea-tag', EaTag);
+}

package/components/ea-tag/index.scss

@@ -0,0 +1,71 @@
+@import "../ea-ui-base-style.scss";
+
+@mixin ea-tag-theme($theme-name, $text-color, $bgc-color, $border-color) {
+  &.ea-tag--#{$theme-name} {
+    color: $text-color;
+    background-color: $bgc-color;
+    border-color: $border-color;
+
+    &.ea-tag--dark {
+      color: #fff;
+      background-color: $text-color;
+      border-color: $text-color;
+    }
+
+    &.ea-tag--plain {
+      color: $text-color;
+      background-color: #fff;
+      border-color: $border-color;
+    }
+  }
+}
+
+.ea-tag_wrap {
+  display: inline-block;
+
+  height: 2rem;
+  line-height: 30px;
+  white-space: nowrap;
+
+  padding: 0 0.625rem;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+
+  ea-icon {
+    font-size: 1rem;
+    margin-left: 0.5rem;
+    cursor: pointer;
+  }
+
+  @include ea-tag-theme(
+    "default",
+    $color-tag-default-text,
+    $color-tag-default-bgc,
+    $color-tag-default-border
+  );
+  @include ea-tag-theme(
+    "success",
+    $color-tag-success-text,
+    $color-tag-success-bgc,
+    $color-tag-success-border
+  );
+  @include ea-tag-theme(
+    "info",
+    $color-tag-info-text,
+    $color-tag-info-bgc,
+    $color-tag-info-border
+  );
+  @include ea-tag-theme(
+    "warning",
+    $color-tag-warning-text,
+    $color-tag-warning-bgc,
+    $color-tag-warning-border
+  );
+  @include ea-tag-theme(
+    "danger",
+    $color-tag-danger-text,
+    $color-tag-danger-bgc,
+    $color-tag-danger-border
+  );
+}

package/components/ea-tag/src/style/stylesheet.js

@@ -1 +1,92 @@
-export const stylesheet="\n.ea-tag_wrap {\n  display: inline-block;\n  height: 2rem;\n  line-height: 30px;\n  white-space: nowrap;\n  padding: 0 0.625rem;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n}\n.ea-tag_wrap ea-icon {\n  font-size: 1rem;\n  margin-left: 0.5rem;\n  cursor: pointer;\n}\n.ea-tag_wrap.ea-tag--default {\n  color: #409eff;\n  background-color: #ecf5ff;\n  border-color: #dcdfe6;\n}\n.ea-tag_wrap.ea-tag--default.ea-tag--dark {\n  color: #fff;\n  background-color: #409eff;\n  border-color: #409eff;\n}\n.ea-tag_wrap.ea-tag--default.ea-tag--plain {\n  color: #409eff;\n  background-color: #fff;\n  border-color: #dcdfe6;\n}\n.ea-tag_wrap.ea-tag--success {\n  color: #67c23a;\n  background-color: #f0f9eb;\n  border-color: #e1f3d8;\n}\n.ea-tag_wrap.ea-tag--success.ea-tag--dark {\n  color: #fff;\n  background-color: #67c23a;\n  border-color: #67c23a;\n}\n.ea-tag_wrap.ea-tag--success.ea-tag--plain {\n  color: #67c23a;\n  background-color: #fff;\n  border-color: #e1f3d8;\n}\n.ea-tag_wrap.ea-tag--info {\n  color: #909399;\n  background-color: #f4f4f5;\n  border-color: #e9e9eb;\n}\n.ea-tag_wrap.ea-tag--info.ea-tag--dark {\n  color: #fff;\n  background-color: #909399;\n  border-color: #909399;\n}\n.ea-tag_wrap.ea-tag--info.ea-tag--plain {\n  color: #909399;\n  background-color: #fff;\n  border-color: #e9e9eb;\n}\n.ea-tag_wrap.ea-tag--warning {\n  color: #e6a23c;\n  background-color: #fdf6ec;\n  border-color: #faecd8;\n}\n.ea-tag_wrap.ea-tag--warning.ea-tag--dark {\n  color: #fff;\n  background-color: #e6a23c;\n  border-color: #e6a23c;\n}\n.ea-tag_wrap.ea-tag--warning.ea-tag--plain {\n  color: #e6a23c;\n  background-color: #fff;\n  border-color: #faecd8;\n}\n.ea-tag_wrap.ea-tag--danger {\n  color: #f56c6c;\n  background-color: #fef0f0;\n  border-color: #fbc4c4;\n}\n.ea-tag_wrap.ea-tag--danger.ea-tag--dark {\n  color: #fff;\n  background-color: #f56c6c;\n  border-color: #f56c6c;\n}\n.ea-tag_wrap.ea-tag--danger.ea-tag--plain {\n  color: #f56c6c;\n  background-color: #fff;\n  border-color: #fbc4c4;\n}\n";
+export const stylesheet = `
+.ea-tag_wrap {
+  display: inline-block;
+  height: 2rem;
+  line-height: 30px;
+  white-space: nowrap;
+  padding: 0 0.625rem;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+}
+.ea-tag_wrap ea-icon {
+  font-size: 1rem;
+  margin-left: 0.5rem;
+  cursor: pointer;
+}
+.ea-tag_wrap.ea-tag--default {
+  color: #409eff;
+  background-color: #ecf5ff;
+  border-color: #dcdfe6;
+}
+.ea-tag_wrap.ea-tag--default.ea-tag--dark {
+  color: #fff;
+  background-color: #409eff;
+  border-color: #409eff;
+}
+.ea-tag_wrap.ea-tag--default.ea-tag--plain {
+  color: #409eff;
+  background-color: #fff;
+  border-color: #dcdfe6;
+}
+.ea-tag_wrap.ea-tag--success {
+  color: #67c23a;
+  background-color: #f0f9eb;
+  border-color: #e1f3d8;
+}
+.ea-tag_wrap.ea-tag--success.ea-tag--dark {
+  color: #fff;
+  background-color: #67c23a;
+  border-color: #67c23a;
+}
+.ea-tag_wrap.ea-tag--success.ea-tag--plain {
+  color: #67c23a;
+  background-color: #fff;
+  border-color: #e1f3d8;
+}
+.ea-tag_wrap.ea-tag--info {
+  color: #909399;
+  background-color: #f4f4f5;
+  border-color: #e9e9eb;
+}
+.ea-tag_wrap.ea-tag--info.ea-tag--dark {
+  color: #fff;
+  background-color: #909399;
+  border-color: #909399;
+}
+.ea-tag_wrap.ea-tag--info.ea-tag--plain {
+  color: #909399;
+  background-color: #fff;
+  border-color: #e9e9eb;
+}
+.ea-tag_wrap.ea-tag--warning {
+  color: #e6a23c;
+  background-color: #fdf6ec;
+  border-color: #faecd8;
+}
+.ea-tag_wrap.ea-tag--warning.ea-tag--dark {
+  color: #fff;
+  background-color: #e6a23c;
+  border-color: #e6a23c;
+}
+.ea-tag_wrap.ea-tag--warning.ea-tag--plain {
+  color: #e6a23c;
+  background-color: #fff;
+  border-color: #faecd8;
+}
+.ea-tag_wrap.ea-tag--danger {
+  color: #f56c6c;
+  background-color: #fef0f0;
+  border-color: #fbc4c4;
+}
+.ea-tag_wrap.ea-tag--danger.ea-tag--dark {
+  color: #fff;
+  background-color: #f56c6c;
+  border-color: #f56c6c;
+}
+.ea-tag_wrap.ea-tag--danger.ea-tag--plain {
+  color: #f56c6c;
+  background-color: #fff;
+  border-color: #fbc4c4;
+}
+`;

package/components/ea-textarea/index.css

@@ -0,0 +1,37 @@
+.ea-textarea_wrap {
+  position: relative;
+  width: 100%;
+}
+.ea-textarea_wrap .ea-textarea_inner {
+  box-sizing: border-box;
+  box-shadow: none;
+  resize: vertical;
+  min-height: 1.75rem;
+  border: 1px solid #dcdfe6;
+  outline: 0;
+  transition: border 0.2s;
+  border-radius: 3px;
+  padding: 0.5rem;
+  line-height: 0.8;
+  font-size: 0.8rem;
+  scrollbar-width: none;
+}
+.ea-textarea_wrap .ea-textarea_inner:focus {
+  border-color: #409eff;
+}
+.ea-textarea_wrap .ea-textarea_inner::placeholder {
+  color: #c0c4cc;
+}
+.ea-textarea_wrap .ea-textarea_inner:disabled {
+  background-color: #eeeeee;
+  color: #c0c4cc;
+}
+.ea-textarea_wrap .ea-textarea_inner:invalid {
+  border-color: #f56c6c;
+}
+.ea-textarea_wrap .ea-input_word-limit {
+  position: absolute;
+  font-size: 0.75rem;
+  bottom: 0.5rem;
+  right: 0.5rem;
+}

package/components/ea-textarea/index.js

@@ -1 +1,277 @@
-import Base from"../Base.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaTextarea extends Base{#t;#e;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <div class="ea-textarea_wrap" part="container">\n                <textarea class="ea-textarea_inner" part="textarea" placeholder="请输入内容"></textarea>\n            </div>\n        ',this.#t=t.querySelector(".ea-textarea_wrap"),this.#e=t.querySelector(".ea-textarea_inner"),this.build(t,stylesheet)}get name(){return this.getAttribute("name")||"ea-textarea"}set name(t){this.setAttribute("name",t)}get value(){return this.#e.value}set value(t){this.#e.value=t}get disabled(){return this.getAttrBoolean("disabled")}set disabled(t){this.toggleAttr("disabled",t),this.#e.disabled=t}get placeholder(){return this.getAttribute("placeholder")||""}set placeholder(t){t&&(this.setAttribute("placeholder",t),this.#e.placeholder=t)}get rows(){return this.getAttribute("rows")||2}set rows(t){this.setAttribute("rows",t),this.#e.rows=t}get autosize(){return this.getAttrBoolean("autosize")}set autosize(t){t&&(this.setAttribute("autosize",t),this.#e.addEventListener("input",(t=>{if(this.#e.style.height!==this.#e.scrollHeight+"px"&&(this.#e.style.height=this.#e.scrollHeight+"px",this.#e.style.minHeight=this.#e.scrollHeight+"px"),"textarea"===t.target.type){const e=this.#e.cols,i=t.target.value.length;let s=Math.ceil(i/e)<=Number(this.#e.rows)?Number(this.#e.rows):Math.ceil(i/e);i%e==1&&(this.minRows>s?this.#i(this.minRows):this.maxRows<s?this.#i(this.maxRows):this.#i(s))}})))}get minRows(){const t=this.getAttrNumber("min-rows");return 0!==t&&t>0?t:0}set minRows(t){t&&(this.setAttribute("min-rows",t),this.#i(Number(t)))}get maxRows(){const t=Number(this.getAttribute("max-rows"));return 0!==t&&t>0?t:0}set maxRows(t){t&&(this.setAttribute("max-rows",t),this.#i(Number(t)))}get maxLength(){return this.getAttribute("max-length")}set maxLength(t){t&&(this.setAttribute("max-length",t),this.#e.maxLength=t,this.showWordLimit&&(this.showWordLimit=!0))}get minLength(){return this.getAttribute("min-length")}set minLength(t){t&&(this.setAttribute("min-length",t),this.#e.minLength=t)}get showWordLimit(){return this.getAttrBoolean("show-word-limit")}set showWordLimit(t){if(!t)return;this.setAttribute("show-word-limit",t);const e=document.createElement("span");e.className="ea-input_word-limit",e.innerText=`${this.#e.value.length}/${this.maxLength}`,this.#e.addEventListener("input",(t=>{e.innerText=`${t.target.value.length}/${this.maxLength}`})),this.#t.appendChild(e),e.style.left=this.#e.getBoundingClientRect().width-e.getBoundingClientRect().width-5+"px"}#i(t){t=Number(t),this.#e.rows=t}#s(t,e){this.dispatchEvent(new CustomEvent(t,{detail:{value:e.target.value}}))}connectedCallback(){this.setAttribute("data-ea-component",!0),this.name=this.name,this.placeholder=this.placeholder,this.value=this.value,this.#e.value=this.getAttribute("value")||"",this.disabled=this.disabled,this.autosize=this.autosize,this.maxRows&&(this.maxRows=this.maxRows),this.minRows&&(this.minRows=this.minRows),this.rows=this.rows,this.maxLength=this.maxLength,this.minLength=this.minLength,this.#e.addEventListener("input",(t=>{this.#s("change",t)})),this.#e.addEventListener("focus",(t=>{this.#s("focus",t)})),this.#e.addEventListener("blur",(t=>{this.#s("blur",t)}))}}window.customElements.get("ea-textarea")||window.customElements.define("ea-textarea",EaTextarea);
+// @ts-nocheck
+import Base from "../Base.js";
+
+import { stylesheet } from "./src/style/stylesheet.js";
+
+export class EaTextarea extends Base {
+    #wrap;
+    #input;
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+            <div class="ea-textarea_wrap" part="container">
+                <textarea class="ea-textarea_inner" part="textarea" placeholder="请输入内容"></textarea>
+            </div>
+        `;
+
+        this.#wrap = shadowRoot.querySelector('.ea-textarea_wrap');
+        this.#input = shadowRoot.querySelector('.ea-textarea_inner');
+
+        this.build(shadowRoot, stylesheet);
+    }
+
+    // ------- name 属性 -------
+    // #region
+    get name() {
+        return this.getAttribute('name') || 'ea-textarea';
+    }
+
+    set name(value) {
+        this.setAttribute('name', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- value 输入框的值 -------
+    // #region
+    get value() {
+        return this.#input.value;
+    }
+
+    set value(val) {
+        this.#input.value = val;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- disabled 是否禁用 -------
+    // #region
+    get disabled() {
+        return this.getAttrBoolean('disabled');
+    }
+
+    set disabled(val) {
+        this.toggleAttr('disabled', val);
+        this.#input.disabled = val;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- placeholder 提示 -------
+    // #region
+    get placeholder() {
+        return this.getAttribute("placeholder") || '';
+    }
+
+    set placeholder(val) {
+        if (!val) return;
+
+        this.setAttribute("placeholder", val);
+        this.#input.placeholder = val;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- rows 默认行数 -------
+    // #region
+    get rows() {
+        return this.getAttribute("rows") || 2;
+    }
+
+    set rows(val) {
+        this.setAttribute("rows", val);
+        this.#input.rows = val;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- autosize 自动调整高度 -------
+    // #region
+    get autosize() {
+        return this.getAttrBoolean("autosize");
+    }
+
+    set autosize(val) {
+        if (!val) return;
+
+        this.setAttribute("autosize", val);
+
+        this.#input.addEventListener('input', (e) => {
+            if (this.#input.style.height !== this.#input.scrollHeight + 'px') {
+                this.#input.style.height = this.#input.scrollHeight + 'px';
+                this.#input.style.minHeight = this.#input.scrollHeight + 'px';
+            }
+
+            if (e.target.type === 'textarea') {
+                const cols = this.#input.cols;
+                const chars = e.target.value.length;
+
+                let rows = Math.ceil(chars / cols) <= Number(this.#input.rows) ? Number(this.#input.rows) : Math.ceil(chars / cols);
+                if (chars % cols == 1) {
+                    if (this.minRows > rows) this.#setTextareaHeight(this.minRows);
+                    else if (this.maxRows < rows) this.#setTextareaHeight(this.maxRows);
+                    else this.#setTextareaHeight(rows);
+                }
+            }
+        })
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- min-rows 最小行数 -------
+    // #region
+    get minRows() {
+        const val = this.getAttrNumber("min-rows");
+        return val !== 0 && val > 0 ? val : 0;
+    }
+
+    set minRows(val) {
+        if (!val) return;
+
+        this.setAttribute("min-rows", val);
+        this.#setTextareaHeight(Number(val));
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- max-rows 最大行数 -------
+    // #region
+    get maxRows() {
+        const val = Number(this.getAttribute("max-rows"));
+        return val !== 0 && val > 0 ? val : 0;
+    }
+
+    set maxRows(val) {
+        if (!val) return;
+
+        this.setAttribute("max-rows", val);
+        this.#setTextareaHeight(Number(val));
+    }
+
+    // #endregion
+    // ------- end -------
+
+    // ------- max-length/min-length 最大/最小字符长度 -------
+    // #region
+    // 获取最大限制值
+    get maxLength() {
+        return this.getAttribute("max-length");
+    }
+
+    set maxLength(val) {
+        if (!val) return;
+
+        this.setAttribute("max-length", val);
+        this.#input.maxLength = val;
+
+        if (this.showWordLimit) this.showWordLimit = true;
+    }
+
+    // 获取最小限制值
+    get minLength() {
+        return this.getAttribute("min-length");
+    }
+
+    set minLength(val) {
+        if (!val) return;
+
+        this.setAttribute("min-length", val);
+        this.#input.minLength = val;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- show-word-limit 显示 当前文字长度 和 限制值 -------
+    // #region
+    get showWordLimit() {
+        return this.getAttrBoolean("show-word-limit");
+    }
+
+    set showWordLimit(val) {
+        if (!val) return;
+
+        this.setAttribute("show-word-limit", val);
+
+        // 加入显示的dom
+        const wordLimit = document.createElement('span');
+        wordLimit.part = 'word-limit';
+        wordLimit.className = 'ea-input_word-limit';
+        wordLimit.innerText = `${this.#input.value.length}/${this.maxLength}`;
+
+        this.#input.addEventListener('input', (e) => {
+            wordLimit.innerText = `${e.target.value.length}/${this.maxLength}`;
+        });
+
+        this.#wrap.appendChild(wordLimit);
+        wordLimit.style.left = (this.#input.getBoundingClientRect().width - wordLimit.getBoundingClientRect().width - 5) + 'px';
+    }
+    // #endregion
+    // ------- end -------
+
+    #setTextareaHeight(rows) {
+        rows = Number(rows);
+        this.#input.rows = rows;
+    }
+
+    #handleDispatchEvent(eventName, e) {
+        this.dispatchEvent(
+            new CustomEvent(eventName, {
+                detail: {
+                    value: e.target.value
+                }
+            })
+        );
+    }
+
+    connectedCallback() {
+        this.setAttribute('data-ea-component', true);
+
+        this.name = this.name;
+
+        // 输入框提示
+        this.placeholder = this.placeholder;
+
+        // 输入框的值
+        this.value = this.value;
+        this.#input.value = this.getAttribute("value") || '';
+
+        // 禁用
+        this.disabled = this.disabled;
+
+        // 自动调整高度
+        this.autosize = this.autosize;
+
+        // 最大最小行数
+        if (this.maxRows) this.maxRows = this.maxRows;
+        if (this.minRows) this.minRows = this.minRows;
+
+        // 默认行数
+        this.rows = this.rows;
+
+        // 输入长度限制
+        this.maxLength = this.maxLength;
+        this.minLength = this.minLength;
+
+        // 输入时
+        this.#input.addEventListener("input", (e) => {
+            this.#handleDispatchEvent("change", e);
+        });
+
+        // 聚焦时
+        this.#input.addEventListener("focus", (e) => {
+            this.#handleDispatchEvent("focus", e);
+        });
+
+        // 失焦时
+        this.#input.addEventListener("blur", (e) => {
+            this.#handleDispatchEvent("blur", e);
+        });
+    }
+}
+
+if (!window.customElements.get("ea-textarea")) {
+    window.customElements.define("ea-textarea", EaTextarea);
+}