easy-component-ui 2.1.0 → 3.0.0

package/components/ea-input/index.scss

@@ -1,178 +0,0 @@
-@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,108 +0,0 @@
-/**
- * 在指定容器中创建一个固定的图标元素
- * 
- * 此函数通过接受一个容器元素、图标名称和类型作为参数，动态创建一个自定义的<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;
-}

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

@@ -1,43 +0,0 @@
-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,18 +0,0 @@
-/**
- * 创建一个显示输入字数限制的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,141 +0,0 @@
-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,9 +0,0 @@
-export function dispatchEvent(e, eventName) {
-    this.dispatchEvent(
-        new CustomEvent(eventName, {
-            detail: {
-                value: e.target.value
-            }
-        })
-    );
-}

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

@@ -1,9 +0,0 @@
-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,31 +0,0 @@
-/**
- * 初始化在输入框内容变化后触发的事件处理函数
- * 
- * 此函数主要用于在用户向输入框输入内容时，根据输入内容来决定是否显示建议列表
- * 它会检查建议列表中的项是否包含输入框中的内容，如果至少有一项满足条件且输入框内容非空，则显示建议列表
- * 
- * @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

@@ -1,120 +0,0 @@
-.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;
-}