easy-component-ui 2.0.5 → 2.1.0

package/components/ea-input/index.js

@@ -1 +1,398 @@
-import Base from"../Base.js";import"../ea-icon/index.js";import{stylesheet}from"./src/style/stylesheet.js";import{createClearableFixIcon,createFixIcon,createShowPasswordIcon}from"./src/components/createFixIcon.js";import{createWordLimitElement}from"./src/components/createWordLimitElement.js";import{createSuggestionBoard}from"./src/components/createSuggestionBoard.js";import{timeout,withTransitionTimeOut}from"../../utils/timeout.js";import{dispatchEvent}from"./src/utils/dispatchEvent.js";import{handleSearchResult}from"./src/utils/handleSearchResult.js";import{initTriggerAfterInputEvent,initTriggerOnFocusEvent}from"./src/utils/handleSuggestionBoardTrigger.js";export class EaInput extends Base{#t;#e;#i=[];#s;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <div class=\'ea-input_container\' part=\'container\'>\n                <div class="ea-input_wrap" part="input-wrap">\n                    <div class="ea-input_prepend-slot" part="prepend-wrap">\n                        <slot name="prepend"></slot>\n                    </div>\n                    <input class="ea-input_inner" type="text" part="input" autocomplete="off" />\n                    <div class="ea-input_append-slot" part="append-wrap">\n                        <slot name="append"></slot>\n                    </div>\n                </div>\n            </div>\n        ',this.#t=t.querySelector(".ea-input_wrap"),this.#e=t.querySelector(".ea-input_inner"),this.build(t,stylesheet)}get name(){return this.getAttribute("name")||""}set name(t){this.setAttribute("name",t)}get type(){return this.getAttribute("type")||"text"}set type(t){this.setAttribute("type",t)}get value(){return this.getAttribute("value")||""}set value(t){this.setAttribute("value",t),this.#e.value=t}get placeholder(){return this.getAttribute("placeholder")||""}set placeholder(t){this.setAttribute("placeholder",t),this.#e.placeholder=t}get disabled(){return this.getAttrBoolean("disabled")}set disabled(t){this.setAttribute("disabled",t),this.#e.disabled=t,this.#e.classList.toggle("disabled",t)}get clearable(){return this.getAttrBoolean("clearable")}set clearable(t){if(!t)return;this.setAttribute("clearable",t);createClearableFixIcon.call(this,this.#t,this.#e,"icon-cancel-circled2")}get showPassword(){return this.getAttrBoolean("show-password")}set showPassword(t){t&&(this.setAttribute("show-password",t),this.#e.type="password",createShowPasswordIcon(this.#t,this.#e,"icon-eye"))}get prefixIcon(){return this.getAttribute("prefix-icon")||""}set prefixIcon(t){t&&(this.setAttribute("prefix",t),createFixIcon(this.#t,t,"prefix"))}get surfixIcon(){return this.getAttribute("suffix-icon")||""}set surfixIcon(t){t&&(this.setAttribute("suffix",t),createFixIcon(this.#t,t,"surfix"))}get suggestion(){return this.#i}set suggestion(t){if(!(t&&t instanceof Array))return;this.#i=t;const e=createSuggestionBoard.call(this,this.#t,t);this.#e.addEventListener("input",(t=>{handleSearchResult(e,t.target.value)})),this.triggerAfterInput?initTriggerAfterInputEvent(this.#e,e):initTriggerOnFocusEvent(e,this.#e),handleSearchResult(e,this.#e.value),this.#t.appendChild(e),this.#s=e}get triggerOnFocus(){return this.getAttrBoolean("trigger-on-focus")}set triggerOnFocus(t){t&&this.setAttribute("trigger-on-focus",t)}get triggerAfterInput(){return this.getAttrBoolean("trigger-after-input")}set triggerAfterInput(t){t&&this.setAttribute("trigger-after-input",t)}get remote(){return this.getAttrBoolean("remote")}set remote(t){this.setAttribute("remote",t);const e=createSuggestionBoard.call(this,this.#t,this.#i);e.classList.toggle("loading",t),this.#e.addEventListener("focus",(()=>{e.classList.add("is-open")})),this.#s=e}get maxLength(){return this.getAttribute("max-length")}set maxLength(t){t&&"text"===this.#e.type&&(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&&"text"===this.#e.type&&(this.setAttribute("min-length",t),this.#e.minLength=t,this.#e.addEventListener("input",(e=>{this.#e.ariaInvalid=e.target.value.length<t})))}get showWordLimit(){return this.getAttrBoolean("show-word-limit")}set showWordLimit(t){if(!t||"text"!==this.#e.type)return;this.setAttribute("show-word-limit",t);const e=createWordLimitElement.call(this,this.#e);this.#t.classList.toggle("word-limit",t),this.#t.appendChild(e),this.#e.addEventListener("focus",(t=>{this.#t.classList.add("focus")})),this.#e.addEventListener("blur",(t=>{this.#t.classList.remove("focus")}))}get readonly(){return this.getAttrBoolean("readonly")}set readonly(t){t&&(this.setAttribute("readonly",t),this.#e.readOnly=t)}focus(){this.#e.focus()}blur(){this.#e.blur()}connectedCallback(){this.setAttribute("data-ea-component",!0),this.name=this.name,this.type=this.type,this.placeholder=this.placeholder,this.value=this.value,this.disabled=this.disabled,this.clearable=this.clearable,this.clearable||(this.showPassword=this.showPassword),this.prefixIcon=this.prefixIcon,this.clearable||this.showPassword||(this.surfixIcon=this.surfixIcon),this.triggerOnFocus=this.triggerOnFocus,this.triggerAfterInput=this.triggerAfterInput,this.remote&&(this.remote=this.remote),this.maxLength=this.maxLength,this.minLength=this.minLength,this.readonly=this.readonly,this.#e.addEventListener("input",(t=>{this.value=t.target.value,dispatchEvent.call(this,t,"change")})),this.#e.addEventListener("focus",(t=>{dispatchEvent.call(this,t,"focus")})),this.#e.addEventListener("blur",(t=>{dispatchEvent.call(this,t,"blur")})),withTransitionTimeOut(this.#t),timeout((()=>{this.dispatchEvent(new CustomEvent("ready",{bubbles:!0}))}),0)}}window.customElements.get("ea-input")||window.customElements.define("ea-input",EaInput);
+import Base from "../Base.js";
+import "../ea-icon/index.js"
+
+import { stylesheet } from "./src/style/stylesheet.js";
+
+import { createClearableFixIcon, createFixIcon, createShowPasswordIcon } from "./src/components/createFixIcon.js";
+import { createWordLimitElement } from "./src/components/createWordLimitElement.js";
+import { createSuggestionBoard } from "./src/components/createSuggestionBoard.js"
+
+import { timeout, withTransitionTimeOut } from "../../utils/timeout.js";
+import { dispatchEvent } from "./src/utils/dispatchEvent.js"
+import { handleSearchResult } from "./src/utils/handleSearchResult.js";
+import { initTriggerAfterInputEvent, initTriggerOnFocusEvent } from "./src/utils/handleSuggestionBoardTrigger.js";
+
+export class EaInput extends Base {
+    #wrap;
+    #input;
+
+    #suggestion = [];
+    #suggestionBoard;
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+            <div class='ea-input_container' part='container'>
+                <div class="ea-input_wrap" part="input-wrap">
+                    <div class="ea-input_prepend-slot" part="prepend-wrap">
+                        <slot name="prepend"></slot>
+                    </div>
+                    <input class="ea-input_inner" type="text" part="input" autocomplete="off" />
+                    <div class="ea-input_append-slot" part="append-wrap">
+                        <slot name="append"></slot>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        this.#wrap = shadowRoot.querySelector('.ea-input_wrap');
+        this.#input = shadowRoot.querySelector('.ea-input_inner');
+
+        this.build(shadowRoot, stylesheet);
+
+    }
+
+    // ------- name 元素原生name属性 -------
+    // #region
+    get name() {
+        return this.getAttribute("name") || '';
+    }
+
+    set name(val) {
+        this.setAttribute("name", val);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- type input原生属性  -------
+    // #region
+    get type() {
+        return this.getAttribute("type") || "text";
+    }
+
+    set type(val) {
+        this.setAttribute("type", val);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- value 输入框的值 -------
+    // #region
+    get value() {
+        return this.getAttribute("value") || '';
+    }
+
+    set value(val) {
+        this.setAttribute("value", val);
+        this.#input.value = val;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- placeholder 提示 -------
+    // #region
+    get placeholder() {
+        return this.getAttribute("placeholder") || '';
+    }
+
+    set placeholder(val) {
+        this.setAttribute("placeholder", val);
+        this.#input.placeholder = val;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- disabled 输入框禁用 -------
+    // #region
+    get disabled() {
+        return this.getAttrBoolean("disabled");
+    }
+
+    set disabled(val) {
+        this.setAttribute("disabled", val);
+        this.#input.disabled = val;
+        this.#input.classList.toggle("disabled", val);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- clearable 可清除 -------
+    // #region
+    get clearable() {
+        return this.getAttrBoolean("clearable");
+    }
+
+    set clearable(val) {
+        if (!val) return;
+
+        this.setAttribute("clearable", val);
+
+        const clearIcon = createClearableFixIcon.call(this, this.#wrap, this.#input, 'icon-cancel-circled2');
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- show-password 密码 -------
+    // #region
+    get showPassword() {
+        return this.getAttrBoolean("show-password");
+    }
+
+    set showPassword(val) {
+        if (!val) return;
+
+        this.setAttribute("show-password", val);
+        this.#input.type = "password";
+
+        createShowPasswordIcon(this.#wrap, this.#input, 'icon-eye');
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- prefix/surfix 指定图标显示位置 -------
+    // #region
+    get prefixIcon() {
+        return this.getAttribute("prefix-icon") || '';
+    }
+
+    set prefixIcon(val) {
+        if (!val) return;
+
+        this.setAttribute("prefix", val);
+
+        createFixIcon(this.#wrap, val, 'prefix');
+    }
+
+    get surfixIcon() {
+        return this.getAttribute("suffix-icon") || '';
+    }
+
+    set surfixIcon(val) {
+        if (!val) return;
+
+        this.setAttribute("suffix", val);
+
+        createFixIcon(this.#wrap, val, 'surfix');
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- suggestion 建议 -------
+    // #region
+
+    // 建议列表
+    get suggestion() {
+        return this.#suggestion;
+    }
+
+    set suggestion(val) {
+        if (!val || !(val instanceof Array)) return;
+
+        this.#suggestion = val;
+
+        const suggestionBoard = createSuggestionBoard.call(this, this.#wrap, val);
+
+        // 匹配输入建议
+        this.#input.addEventListener('input', (e) => {
+            handleSearchResult(suggestionBoard, e.target.value);
+        });
+
+        if (this.triggerAfterInput) {
+            initTriggerAfterInputEvent(this.#input, suggestionBoard);
+        } else {
+            initTriggerOnFocusEvent(suggestionBoard, this.#input);
+        }
+
+        handleSearchResult(suggestionBoard, this.#input.value);
+
+        this.#wrap.appendChild(suggestionBoard);
+        this.#suggestionBoard = suggestionBoard;
+    }
+
+    // 输入框激活时列出输入建议
+    get triggerOnFocus() {
+        return this.getAttrBoolean("trigger-on-focus");
+    }
+
+    set triggerOnFocus(val) {
+        if (!val) return;
+
+        this.setAttribute("trigger-on-focus", val);
+    }
+
+    // 输入框输入后匹配输入建议
+    get triggerAfterInput() {
+        return this.getAttrBoolean("trigger-after-input");
+    }
+    set triggerAfterInput(val) {
+        if (!val) return;
+
+        this.setAttribute("trigger-after-input", val);
+    }
+
+    // 数据为远程加载时, 显示加载中
+    get remote() {
+        return this.getAttrBoolean("remote");
+    }
+
+    set remote(val) {
+        this.setAttribute("remote", val);
+
+        const suggestionBoard = createSuggestionBoard.call(this, this.#wrap, this.#suggestion);
+        suggestionBoard.classList.toggle('loading', val);
+
+        this.#input.addEventListener('focus', () => {
+            suggestionBoard.classList.add('is-open');
+        });
+
+        this.#suggestionBoard = suggestionBoard;
+    }
+
+    // #endregion
+    // ------- end -------
+
+    // ------- max-length 最大长度 -------
+    // #region
+    get maxLength() {
+        return this.getAttribute("max-length");
+    }
+
+    set maxLength(val) {
+        if (!val || this.#input.type !== "text") return;
+
+        this.setAttribute("max-length", val);
+        this.#input.maxLength = val;
+
+        if (this.showWordLimit) this.showWordLimit = true;
+    }
+
+    // #endregion
+    // ------- end -------
+
+    // ------- min-length 最小长度 -------
+    // #region
+    get minLength() {
+        return this.getAttribute("min-length");
+    }
+
+    set minLength(val) {
+        if (!val || this.#input.type !== "text") return;
+
+        this.setAttribute("min-length", val);
+        this.#input.minLength = val;
+
+        this.#input.addEventListener('input', (e) => {
+            this.#input.ariaInvalid = e.target.value.length < val;
+        });
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- show-word-limit 显示字数限制 -------
+    // #region
+    get showWordLimit() {
+        return this.getAttrBoolean("show-word-limit");
+    }
+
+    set showWordLimit(val) {
+        if (!val || this.#input.type !== "text") return;
+
+        this.setAttribute("show-word-limit", val);
+
+        // 加入显示的dom
+        const wordLimit = createWordLimitElement.call(this, this.#input);
+        this.#wrap.classList.toggle('word-limit', val);
+        this.#wrap.appendChild(wordLimit);
+
+        this.#input.addEventListener('focus', (e) => {
+            this.#wrap.classList.add("focus");
+        });
+
+        this.#input.addEventListener('blur', (e) => {
+            this.#wrap.classList.remove("focus");
+        });
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- readonly 只读 -------
+    // #region
+    get readonly() {
+        return this.getAttrBoolean("readonly");
+    }
+
+    set readonly(val) {
+        if (!val) return;
+
+        this.setAttribute("readonly", val);
+        this.#input.readOnly = val;
+    }
+    // #endregion
+    // ------- end -------
+
+    focus() {
+        this.#input.focus();
+    }
+
+    blur() {
+        this.#input.blur();
+    }
+
+    connectedCallback() {
+        this.setAttribute("data-ea-component", true);
+
+        this.name = this.name;
+
+        // 按钮类型
+        this.type = this.type;
+
+        // 输入框提示
+        this.placeholder = this.placeholder;
+
+        // 输入框的值
+        this.value = this.value;
+
+        // 禁用
+        this.disabled = this.disabled;
+
+        // 可清除
+        this.clearable = this.clearable;
+
+        // 密码
+        if (!this.clearable) this.showPassword = this.showPassword;
+
+        // 输入框图标
+        this.prefixIcon = this.prefixIcon;
+        if (!this.clearable && !this.showPassword) this.surfixIcon = this.surfixIcon;
+
+        this.triggerOnFocus = this.triggerOnFocus;
+        this.triggerAfterInput = this.triggerAfterInput;
+
+        // 输入建议
+        if (this.remote) this.remote = this.remote;
+
+        // 输入长度限制
+        this.maxLength = this.maxLength;
+        this.minLength = this.minLength;
+
+        this.readonly = this.readonly;
+
+        // 输入时
+        this.#input.addEventListener("input", (e) => {
+            this.value = e.target.value;
+            dispatchEvent.call(this, e, "change");
+        });
+
+        // 聚焦时
+        this.#input.addEventListener("focus", (e) => {
+            dispatchEvent.call(this, e, "focus");
+        });
+
+        // 失焦时
+        this.#input.addEventListener("blur", (e) => {
+            dispatchEvent.call(this, e, "blur");
+        });
+
+        withTransitionTimeOut(this.#wrap);
+
+        timeout(() => {
+            this.dispatchEvent(new CustomEvent("ready", { bubbles: true }));
+        }, 0);
+    }
+}
+
+if (!window.customElements.get("ea-input")) {
+    window.customElements.define("ea-input", EaInput);
+}

package/components/ea-input/index.scss

@@ -0,0 +1,178 @@
+@import "../ea-ui-base-style.scss";
+
+.ea-input_container {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+
+  .ea-input_wrap {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+
+    .ea-input_inner {
+      flex: 1;
+      box-sizing: border-box;
+      box-shadow: none;
+
+      border: 1px solid $color-border;
+      outline: 0;
+      border-radius: 3px;
+
+      padding: 0.5rem;
+      width: 100%;
+
+      line-height: 0.8;
+      font-size: 0.8rem;
+      scrollbar-width: none;
+
+      &:focus {
+        border-color: $color-primary-border;
+      }
+
+      &::placeholder {
+        color: $color-disabled-text;
+      }
+
+      &[aria-invalid="true"] {
+        border-color: $color-danger-border;
+      }
+
+      &[disabled] {
+        background-color: $color-disabled-btn-bgc;
+        color: $color-disabled-text;
+      }
+    }
+
+    .fix-icon {
+      position: absolute;
+      top: 50%;
+
+      font-size: 0.8rem;
+      line-height: 0.8rem;
+    }
+
+    &.prefix {
+      .ea-input_inner {
+        padding-left: 1.75rem;
+      }
+
+      .prefix-icon {
+        left: 1rem;
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    &.surfix {
+      .ea-input_inner {
+        padding-right: 1.75rem;
+      }
+
+      .surfix-icon {
+        right: 1rem;
+        transform: translate(50%, -50%);
+      }
+    }
+
+    .ea-input_prepend-slot,
+    .ea-input_append-slot {
+      height: 100%;
+    }
+
+    .ea-input_suggestion-wrap {
+      @include clear-ul-default-style;
+
+      position: absolute;
+      box-sizing: border-box;
+
+      z-index: 3;
+
+      top: calc(100% + 5px);
+      left: 0;
+
+      transform-origin: top center;
+      transform: scaleY(0);
+
+      padding: 0.5rem 0;
+      width: 100%;
+      max-height: 10rem;
+
+      overflow-y: auto;
+      scrollbar-width: thin;
+
+      background-color: white;
+      box-shadow: 0 1px 8px 1px rgba(0, 0, 0, 0.2);
+
+      li {
+        padding: 0.5rem;
+        font-size: 0.9rem;
+        cursor: pointer;
+
+        &:hover {
+          background-color: #f5f7fa;
+        }
+      }
+
+      .loading-icon {
+        display: none;
+      }
+
+      &.loading {
+        height: 5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        li {
+          display: none;
+        }
+
+        .loading-icon {
+          display: block;
+        }
+      }
+
+      &.is-open {
+        transform: scaleY(1);
+      }
+    }
+
+    &.word-limit {
+      border: 1px solid;
+      border-color: $color-border;
+      border-radius: 3px;
+
+      .ea-input_inner {
+        border: 0;
+      }
+
+      .ea-input_word-limit {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+
+        padding-right: 0.5rem;
+
+        font-size: 0.75rem;
+        text-align: center;
+      }
+    }
+
+    &.focus {
+      border-color: $color-primary-border;
+    }
+
+    &.with-transition {
+      transition: border 0.3s;
+
+      .ea-input_inner {
+        transition: border 0.3s;
+      }
+      \ .ea-input_suggestion-wrap {
+        transition: transform 0.3s;
+      }
+    }
+  }
+}

package/components/ea-input/src/components/createFixIcon.js

@@ -1 +1,108 @@
-export function createFixIcon(e,n,a){const c=document.createElement("ea-icon");return c.className=`fix-icon ${a}-icon`,c.icon=n,c.part=`${a}-icon`,e.classList.add(a),e.appendChild(c),c}function handleIconDisplay(e,n){e.style.display=n?"block":"none"}function clearableEvent(e,n,a){n.addEventListener(e,(e=>{handleIconDisplay(a,e.target?.value)}))}export function createClearableFixIcon(e,n,a){const c=createFixIcon(e,a,"surfix");return c.addEventListener("click",(()=>{this.value="",n.focus()})),handleIconDisplay(c,n.value),clearableEvent("input",n,c),clearableEvent("focus",n,c),clearableEvent("blur",n,c),c}export function createShowPasswordIcon(e,n,a){const c=createFixIcon(e,a,"surfix");return c.addEventListener("click",(()=>{n.type="password"===n.type?"text":"password",c.icon="password"===n.type?"icon-eye":"icon-eye-off",n.focus()})),n.addEventListener("input",(()=>{handleIconDisplay(c,n.value)})),handleIconDisplay(c,n.value),c}
+/**
+ * 在指定容器中创建一个固定的图标元素
+ * 
+ * 此函数通过接受一个容器元素、图标名称和类型作为参数，动态创建一个自定义的<ea-icon>元素
+ * 它为新创建的图标设置类名和属性，以确保其样式和行为符合预期
+ * 
+ * @param {HTMLElement} container - 图标将被添加到的容器元素
+ * @param {string} icon - 图标名称，用于设置<ea-icon>的icon属性
+ * @param {string} type - 图标类型，用于确定类名和part属性值
+ * @returns {HTMLElement} 返回创建的<ea-icon>元素，以便进行进一步的操作或引用
+ */
+export function createFixIcon(container, icon, type) {
+    const fixIcon = document.createElement('ea-icon');
+    fixIcon.className = `fix-icon ${type}-icon`;
+    fixIcon.icon = icon;
+    fixIcon.part = `${type}-icon`;
+
+    container.classList.add(type);
+
+    container.appendChild(fixIcon);
+
+    return fixIcon;
+}
+/**
+ * 控制图标显示与隐藏
+ * 
+ * @param {HTMLElement} icon - 需要控制显示状态的图标元素
+ * @param {boolean} flag - 标志位，决定图标是否显示如果为true，则图标显示；如果为false，则图标隐藏
+ */
+function handleIconDisplay(icon, flag) {
+    if (flag) {
+        icon.style.display = 'block';
+    } else {
+        icon.style.display = 'none';
+    }
+}
+
+/**
+ * 绑定事件监听器或清除图标显示逻辑
+ * 
+ * @param {string} eventName - 需要监听的事件名称，用于决定是否显示密码清除图标
+ * @param {HTMLElement} input - 输入框元素，通常为密码输入框
+ * @param {HTMLElement} icon - 清除密码的图标元素
+ * 
+ * 此函数的作用是为输入框绑定一个事件监听器，当输入框的内容变化时，
+ * 根据输入框的内容决定是否显示清除图标。如果输入框有内容，则显示清除图标；
+ * 如果输入框为空，则隐藏清除图标。
+ */
+function clearableEvent(eventName, input, icon) {
+    input.addEventListener(eventName, (e) => {
+        handleIconDisplay(icon, e.target?.value);
+    });
+
+}
+
+/**
+ * 在指定容器中创建一个固定位置的图标，该图标在特定条件下可见并可响应点击事件
+ * 当输入框内容变化时，显示或隐藏该图标
+ * 当图标被点击时，清空输入框内容或执行其他预定义操作
+ * 
+ * @param {HTMLElement} container - 图标将被放置的容器元素
+ * @param {HTMLElement} input - 与图标关联的输入框元素
+ * @param {string} icon - 图标名称，用于确定图标的样式或资源
+ * @returns {HTMLElement} - 创建的图标元素
+ */
+export function createClearableFixIcon(container, input, icon) {
+    const clearIcon = createFixIcon(container, icon, 'surfix');
+    clearIcon.addEventListener('click', () => {
+        this.value = '';
+        input.focus();
+    })
+
+    handleIconDisplay(clearIcon, input.value);
+
+    clearableEvent('input', input, clearIcon);
+    clearableEvent('focus', input, clearIcon);
+    clearableEvent('blur', input, clearIcon);
+
+    return clearIcon;
+}
+
+/**
+ * 创建显示/隐藏密码图标
+ * 
+ * 此函数用于在密码输入框旁创建一个图标，该图标允许用户点击后切换密码的显示状态（显示或隐藏）
+ * 
+ * @param {HTMLElement} container - 输入框容器，用于确定图标的位置
+ * @param {HTMLElement} input - 密码输入框元素，其类型将被切换
+ * @param {string} icon - 图标名称，用于初始状态的图标显示
+ * @returns {HTMLElement} - 创建的显示/隐藏密码图标元素
+ */
+export function createShowPasswordIcon(container, input, icon) {
+    const showPasswordIcon = createFixIcon(container, icon, 'surfix');
+    showPasswordIcon.addEventListener('click', () => {
+        input.type = input.type === 'password' ? 'text' : 'password';
+        showPasswordIcon.icon = input.type === 'password' ? 'icon-eye' : 'icon-eye-off';
+
+        input.focus();
+    })
+
+    input.addEventListener('input', () => {
+        handleIconDisplay(showPasswordIcon, input.value);
+    })
+
+    handleIconDisplay(showPasswordIcon, input.value);
+
+    return showPasswordIcon;
+}