easy-component-ui 2.0.5 → 2.1.1

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

@@ -1 +1,43 @@
-function handleSuggestionBoardClose(e){e.classList.remove("is-open")}export function createSuggestionBoard(e,n){const t=this.shadowRoot.querySelector(".ea-input_suggestion-wrap"),a=document.createElement("ul");a.className="ea-input_suggestion-wrap",a.part="suggestion-wrap",n.forEach((e=>{const n=document.createElement("li");n.part="suggestion-item",n.innerText=e.value,n.addEventListener("click",(()=>{this.value=e.value,handleSuggestionBoardClose(a)})),a.appendChild(n)}));const o=document.createElement("ea-icon");return o.className="loading-icon",o.icon="icon-spin6 animate-spin",o.part="loading-icon",a.appendChild(o),window.addEventListener("click",(e=>{this.contains(e.target)||handleSuggestionBoardClose(a)})),t&&(t.remove(),a.classList.add("is-open")),e.appendChild(a),a}
+function handleSuggestionBoardClose(suggestionBoard) {
+    suggestionBoard.classList.remove('is-open');
+}
+
+export function createSuggestionBoard(container, val) {
+    const hasSuggestionBoard = this.shadowRoot.querySelector('.ea-input_suggestion-wrap');
+
+    const suggestionBoard = document.createElement('ul');
+    suggestionBoard.className = "ea-input_suggestion-wrap";
+    suggestionBoard.part = 'suggestion-wrap';
+
+    val.forEach(item => {
+        const li = document.createElement('li');
+        li.part = 'suggestion-item';
+        li.innerText = item.value;
+
+        li.addEventListener('click', () => {
+            this.value = item.value;
+            handleSuggestionBoardClose(suggestionBoard);
+        });
+
+        suggestionBoard.appendChild(li);
+    });
+
+    const loadingIcon = document.createElement('ea-icon');
+    loadingIcon.className = 'loading-icon';
+    loadingIcon.icon = 'icon-spin6 animate-spin';
+    loadingIcon.part = 'loading-icon';
+    suggestionBoard.appendChild(loadingIcon);
+
+    window.addEventListener('click', (e) => {
+        if (!this.contains(e.target)) handleSuggestionBoardClose(suggestionBoard);
+    });
+
+    if (hasSuggestionBoard) {
+        hasSuggestionBoard.remove();
+        suggestionBoard.classList.add('is-open');
+    }
+
+    container.appendChild(suggestionBoard);
+
+    return suggestionBoard;
+}

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

@@ -1 +1,18 @@
-export function createWordLimitElement(e){const t=document.createElement("span");return t.className="ea-input_word-limit",t.part="word-limit",t.innerText=`${e.value.length}/${this.maxLength}`,e.addEventListener("input",(e=>{t.innerText=`${e.target.value.length}/${this.maxLength}`})),t}
+/**
+ * 创建一个显示输入字数限制的span元素
+ * 
+ * @param {HTMLElement} input - 输入框元素，用于监听其输入变化并显示当前输入字数与最大字数限制
+ * @returns {HTMLElement} - 返回包含字数限制信息的span元素
+ */
+export function createWordLimitElement(input) {
+    const wordLimit = document.createElement('span');
+    wordLimit.className = 'ea-input_word-limit';
+    wordLimit.part = 'word-limit';
+    wordLimit.innerText = `${input.value.length}/${this.maxLength}`;
+
+    input.addEventListener('input', (e) => {
+        wordLimit.innerText = `${e.target.value.length}/${this.maxLength}`;
+    });
+
+    return wordLimit;
+}

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

@@ -1 +1,141 @@
-export const stylesheet="\n.ea-input_container {\n  display: flex;\n  align-items: stretch;\n  width: 100%;\n}\n.ea-input_container .ea-input_wrap {\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  width: 100%;\n}\n.ea-input_container .ea-input_wrap .ea-input_inner {\n  flex: 1;\n  box-sizing: border-box;\n  box-shadow: none;\n  border: 1px solid #dcdfe6;\n  outline: 0;\n  border-radius: 3px;\n  padding: 0.5rem;\n  width: 100%;\n  line-height: 0.8;\n  font-size: 0.8rem;\n  scrollbar-width: none;\n}\n.ea-input_container .ea-input_wrap .ea-input_inner:focus {\n  border-color: #409eff;\n}\n.ea-input_container .ea-input_wrap .ea-input_inner::placeholder {\n  color: #c0c4cc;\n}\n.ea-input_container .ea-input_wrap .ea-input_inner[aria-invalid=true] {\n  border-color: #f56c6c;\n}\n.ea-input_container .ea-input_wrap .ea-input_inner[disabled] {\n  background-color: #eeeeee;\n  color: #c0c4cc;\n}\n.ea-input_container .ea-input_wrap .fix-icon {\n  position: absolute;\n  top: 50%;\n  font-size: 0.8rem;\n  line-height: 0.8rem;\n}\n.ea-input_container .ea-input_wrap.prefix .ea-input_inner {\n  padding-left: 1.75rem;\n}\n.ea-input_container .ea-input_wrap.prefix .prefix-icon {\n  left: 1rem;\n  transform: translate(-50%, -50%);\n}\n.ea-input_container .ea-input_wrap.surfix .ea-input_inner {\n  padding-right: 1.75rem;\n}\n.ea-input_container .ea-input_wrap.surfix .surfix-icon {\n  right: 1rem;\n  transform: translate(50%, -50%);\n}\n.ea-input_container .ea-input_wrap .ea-input_prepend-slot,\n.ea-input_container .ea-input_wrap .ea-input_append-slot {\n  height: 100%;\n}\n.ea-input_container .ea-input_wrap .ea-input_suggestion-wrap {\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  padding-inline-start: 0;\n  unicode-bidi: unset;\n  position: absolute;\n  box-sizing: border-box;\n  z-index: 3;\n  top: calc(100% + 5px);\n  left: 0;\n  transform-origin: top center;\n  transform: scaleY(0);\n  padding: 0.5rem 0;\n  width: 100%;\n  max-height: 10rem;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  background-color: white;\n  box-shadow: 0 1px 8px 1px rgba(0, 0, 0, 0.2);\n}\n.ea-input_container .ea-input_wrap .ea-input_suggestion-wrap li {\n  padding: 0.5rem;\n  font-size: 0.9rem;\n  cursor: pointer;\n}\n.ea-input_container .ea-input_wrap .ea-input_suggestion-wrap li:hover {\n  background-color: #f5f7fa;\n}\n.ea-input_container .ea-input_wrap .ea-input_suggestion-wrap .loading-icon {\n  display: none;\n}\n.ea-input_container .ea-input_wrap .ea-input_suggestion-wrap.loading {\n  height: 5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ea-input_container .ea-input_wrap .ea-input_suggestion-wrap.loading li {\n  display: none;\n}\n.ea-input_container .ea-input_wrap .ea-input_suggestion-wrap.loading .loading-icon {\n  display: block;\n}\n.ea-input_container .ea-input_wrap .ea-input_suggestion-wrap.is-open {\n  transform: scaleY(1);\n}\n.ea-input_container .ea-input_wrap.word-limit {\n  border: 1px solid;\n  border-color: #dcdfe6;\n  border-radius: 3px;\n}\n.ea-input_container .ea-input_wrap.word-limit .ea-input_inner {\n  border: 0;\n}\n.ea-input_container .ea-input_wrap.word-limit .ea-input_word-limit {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-wrap: wrap;\n  padding-right: 0.5rem;\n  font-size: 0.75rem;\n  text-align: center;\n}\n.ea-input_container .ea-input_wrap.focus {\n  border-color: #409eff;\n}\n.ea-input_container .ea-input_wrap.with-transition {\n  transition: border 0.3s;\n}\n.ea-input_container .ea-input_wrap.with-transition .ea-input_inner {\n  transition: border 0.3s;\n}\n.ea-input_container .ea-input_wrap.with-transition  .ea-input_suggestion-wrap {\n  transition: transform 0.3s;\n}\n";
+export const stylesheet = `
+.ea-input_container {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+}
+.ea-input_container .ea-input_wrap {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+}
+.ea-input_container .ea-input_wrap .ea-input_inner {
+  flex: 1;
+  box-sizing: border-box;
+  box-shadow: none;
+  border: 1px solid #dcdfe6;
+  outline: 0;
+  border-radius: 3px;
+  padding: 0.5rem;
+  width: 100%;
+  line-height: 0.8;
+  font-size: 0.8rem;
+  scrollbar-width: none;
+}
+.ea-input_container .ea-input_wrap .ea-input_inner:focus {
+  border-color: #409eff;
+}
+.ea-input_container .ea-input_wrap .ea-input_inner::placeholder {
+  color: #c0c4cc;
+}
+.ea-input_container .ea-input_wrap .ea-input_inner[aria-invalid=true] {
+  border-color: #f56c6c;
+}
+.ea-input_container .ea-input_wrap .ea-input_inner[disabled] {
+  background-color: #eeeeee;
+  color: #c0c4cc;
+}
+.ea-input_container .ea-input_wrap .fix-icon {
+  position: absolute;
+  top: 50%;
+  font-size: 0.8rem;
+  line-height: 0.8rem;
+}
+.ea-input_container .ea-input_wrap.prefix .ea-input_inner {
+  padding-left: 1.75rem;
+}
+.ea-input_container .ea-input_wrap.prefix .prefix-icon {
+  left: 1rem;
+  transform: translate(-50%, -50%);
+}
+.ea-input_container .ea-input_wrap.surfix .ea-input_inner {
+  padding-right: 1.75rem;
+}
+.ea-input_container .ea-input_wrap.surfix .surfix-icon {
+  right: 1rem;
+  transform: translate(50%, -50%);
+}
+.ea-input_container .ea-input_wrap .ea-input_prepend-slot,
+.ea-input_container .ea-input_wrap .ea-input_append-slot {
+  height: 100%;
+}
+.ea-input_container .ea-input_wrap .ea-input_suggestion-wrap {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  padding-inline-start: 0;
+  unicode-bidi: unset;
+  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);
+}
+.ea-input_container .ea-input_wrap .ea-input_suggestion-wrap li {
+  padding: 0.5rem;
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+.ea-input_container .ea-input_wrap .ea-input_suggestion-wrap li:hover {
+  background-color: #f5f7fa;
+}
+.ea-input_container .ea-input_wrap .ea-input_suggestion-wrap .loading-icon {
+  display: none;
+}
+.ea-input_container .ea-input_wrap .ea-input_suggestion-wrap.loading {
+  height: 5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ea-input_container .ea-input_wrap .ea-input_suggestion-wrap.loading li {
+  display: none;
+}
+.ea-input_container .ea-input_wrap .ea-input_suggestion-wrap.loading .loading-icon {
+  display: block;
+}
+.ea-input_container .ea-input_wrap .ea-input_suggestion-wrap.is-open {
+  transform: scaleY(1);
+}
+.ea-input_container .ea-input_wrap.word-limit {
+  border: 1px solid;
+  border-color: #dcdfe6;
+  border-radius: 3px;
+}
+.ea-input_container .ea-input_wrap.word-limit .ea-input_inner {
+  border: 0;
+}
+.ea-input_container .ea-input_wrap.word-limit .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;
+}
+.ea-input_container .ea-input_wrap.focus {
+  border-color: #409eff;
+}
+.ea-input_container .ea-input_wrap.with-transition {
+  transition: border 0.3s;
+}
+.ea-input_container .ea-input_wrap.with-transition .ea-input_inner {
+  transition: border 0.3s;
+}
+.ea-input_container .ea-input_wrap.with-transition \ .ea-input_suggestion-wrap {
+  transition: transform 0.3s;
+}
+`;

package/components/ea-input/src/utils/dispatchEvent.js

@@ -1 +1,9 @@
-export function dispatchEvent(t,e){this.dispatchEvent(new CustomEvent(e,{detail:{value:t.target.value}}))}
+export function dispatchEvent(e, eventName) {
+    this.dispatchEvent(
+        new CustomEvent(eventName, {
+            detail: {
+                value: e.target.value
+            }
+        })
+    );
+}

package/components/ea-input/src/utils/handleSearchResult.js

@@ -1 +1,9 @@
-export function handleSearchResult(e,l){e.querySelectorAll("li").forEach((e=>{e.innerText.includes(l)?e.style.display="block":e.style.display="none"}))}
+export function handleSearchResult(suggestionBoard, value) {
+    suggestionBoard.querySelectorAll('li').forEach(item => {
+        if (item.innerText.includes(value)) {
+            item.style.display = 'block';
+        } else {
+            item.style.display = 'none';
+        }
+    })
+}

package/components/ea-input/src/utils/handleSuggestionBoardTrigger.js

@@ -1 +1,31 @@
-export function initTriggerAfterInputEvent(e,t){e.addEventListener("input",(e=>{const n=Array.from(t.querySelectorAll("li")).some(((t,n)=>t.innerText.includes(e.target.value)));t.classList.toggle("is-open",n&&""!==e.target.value)}))}export function initTriggerOnFocusEvent(e,t){t.addEventListener("focus",(t=>{e.classList.add("is-open")}))}
+/**
+ * 初始化在输入框内容变化后触发的事件处理函数
+ * 
+ * 此函数主要用于在用户向输入框输入内容时，根据输入内容来决定是否显示建议列表
+ * 它会检查建议列表中的项是否包含输入框中的内容，如果至少有一项满足条件且输入框内容非空，则显示建议列表
+ * 
+ * @param {HTMLElement} input - 输入框的DOM元素，用于绑定输入事件
+ * @param {HTMLElement} suggestionBoard - 建议列表的DOM元素，用于操作建议列表的显示与隐藏
+ */
+export function initTriggerAfterInputEvent(input, suggestionBoard) {
+    input.addEventListener('input', (e) => {
+        const hasRes = Array.from(suggestionBoard.querySelectorAll('li')).some((item, index) => {
+            return item.innerText.includes(e.target.value);
+        })
+
+        suggestionBoard.classList.toggle('is-open', hasRes && e.target.value !== '');
+    });
+}
+
+/**
+ * 初始化输入框聚焦事件的触发
+ * 当输入框获得焦点时，展示建议面板
+ * 
+ * @param {HTMLElement} suggestionBoard - 建议面板的HTML元素，用于展示输入框的建议或自动完成内容
+ * @param {HTMLElement} input - 输入框的HTML元素，用于监听聚焦事件
+ */
+export function initTriggerOnFocusEvent(suggestionBoard, input) {
+    input.addEventListener('focus', (e) => {
+        suggestionBoard.classList.add('is-open');
+    });
+}

package/components/ea-input-number/index.css

@@ -0,0 +1,120 @@
+.ea-input-number_wrap {
+  display: flex;
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  transition: border 0.2s;
+}
+.ea-input-number_wrap .ea-input-number_sign {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border: 1px solid #dcdfe6;
+  background-color: #f5f7fa;
+  height: 2rem;
+  width: 2rem;
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1;
+  user-select: none;
+}
+.ea-input-number_wrap .ea-input-number_sign:first-child {
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+  border-right: 0;
+}
+.ea-input-number_wrap .ea-input-number_sign:last-child {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  border-left: 0;
+}
+.ea-input-number_wrap .ea-input-number_sign:hover {
+  color: #409eff;
+}
+.ea-input-number_wrap .ea-input-number_sign.disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+  color: #c0c4cc;
+}
+.ea-input-number_wrap .ea-input-number_inner {
+  box-sizing: border-box;
+  box-shadow: none;
+  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;
+  width: 5rem;
+  height: 2rem;
+  border-radius: 0;
+  text-align: center;
+}
+.ea-input-number_wrap .ea-input-number_inner:focus {
+  border-color: #409eff;
+}
+.ea-input-number_wrap .ea-input-number_inner::placeholder {
+  color: #c0c4cc;
+}
+.ea-input-number_wrap .ea-input-number_inner.invalid {
+  border-color: #f56c6c;
+}
+.ea-input-number_wrap .ea-input-number_inner.disabled {
+  background-color: #eeeeee;
+  color: #c0c4cc;
+}
+.ea-input-number_wrap .ea-input-number_inner.ea-input_clear ::before {
+  content: "\e9c3";
+  display: block;
+}
+.ea-input-number_wrap .ea-input-number_inner:focus {
+  border-color: #dcdfe6;
+}
+.ea-input-number_wrap .ea-input-number_inner.disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+  color: #c0c4cc;
+  background-color: #f5f7fa;
+}
+.ea-input-number_wrap.focus {
+  border: 1px solid #409eff;
+}
+.ea-input-number_wrap.focus .ea-input-number_sign {
+  border-color: transparent;
+}
+.ea-input-number_wrap.disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.ea-input-number_wrap.disabled .ea-input-number_sign,
+.ea-input-number_wrap.disabled .ea-input-number_inner {
+  color: #c0c4cc;
+  border-color: #dcdfe6;
+}
+.ea-input-number_wrap.ea-input-number--medium .ea-input-number_sign {
+  height: 1.75rem;
+  width: 1.75rem;
+}
+.ea-input-number_wrap.ea-input-number--medium .ea-input-number_inner {
+  height: 1.75rem;
+  line-height: 1.75rem;
+}
+.ea-input-number_wrap.ea-input-number--small .ea-input-number_sign {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+.ea-input-number_wrap.ea-input-number--small .ea-input-number_inner {
+  height: 1.5rem;
+  line-height: 1.5rem;
+}
+.ea-input-number_wrap.ea-input-number--mini .ea-input-number_sign {
+  height: 1.25rem;
+  width: 1.25rem;
+}
+.ea-input-number_wrap.ea-input-number--mini .ea-input-number_inner {
+  height: 1.25rem;
+  line-height: 1.25rem;
+}