easy-component-ui 2.1.0 → 3.0.0

package/components/ea-infinite-scroll/index.js

@@ -1,119 +0,0 @@
-import Base from '../Base.js';
-import "../ea-icon/index.js"
-import "../ea-infinite-scroll-item/index.js"
-
-export class EaInfiniteScroll extends Base {
-    #loadingSlot;
-
-    #noMoreSlot;
-
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        shadowRoot.innerHTML = `
-            <div class='ea-infinite_wrap' part='container'>
-                <slot></slot>
-            </div>
-            <div class='ea-infinite_loading-wrap' part='loading-wrap'>
-                <slot name='loading' style="display: none;"></slot>
-            </div>
-            <div class='ea-infinite_noMore-wrap' part='noMore-wrap'>
-                <slot name='noMore' style="display: none;"></slot>
-            </div>
-        `;
-
-        this.#loadingSlot = shadowRoot.querySelector('slot[name="loading"]');
-        this.#noMoreSlot = shadowRoot.querySelector('slot[name="noMore"]');
-    }
-
-    // ------- delay 节流时延, 单位为ms -------
-    // #region
-    get delay() {
-        return this.getAttrNumber('delay') || 200;
-    }
-
-    set delay(value) {
-        this.setAttribute('delay', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- loading 是否在加载时显示加载状态 -------
-    // #region
-    get loading() {
-        return this.getAttrBoolean('loading');
-    }
-
-    set loading(value) {
-        if (value === undefined) return;
-
-        this.setAttribute('loading', value);
-    }
-    // #endregion
-    // ------- end -------
-
-    // ------- disabled 是否禁用 -------
-    // #region
-    get disabled() {
-        return this.getAttrBoolean('disabled') || false;
-    }
-
-    set disabled(value) {
-        this.setAttribute('disabled', value);
-
-        if (value) this.#noMoreSlot.style.display = 'block';
-    }
-    // #endregion
-    // ------- end -------
-
-    #getLastChild() {
-        const items = this.querySelectorAll('ea-infinite-item');
-        return items[items.length - 1];
-    }
-
-    #initBottomReachedObserver() {
-        if (this.disabled) return;
-
-        let item = this.#getLastChild();
-        let timer = null;
-
-        const observer = new IntersectionObserver((entries) => {
-            const { isIntersecting } = entries[0];
-            if (this.disabled) {
-                observer.disconnect();
-                return;
-            }
-
-            if (!isIntersecting || timer) return;
-
-            if (this.loading) this.#loadingSlot.style.display = 'block';
-
-            observer.unobserve(item);
-
-            timer = setTimeout(() => {
-                this.dispatchEvent(new CustomEvent('bottomReached'));
-
-                clearTimeout(timer);
-                timer = null;
-
-                item = this.#getLastChild();
-                observer.observe(item);
-                this.#loadingSlot.style.display = 'none';
-
-            }, this.delay || 200);
-        }, { root: this.parentNode, rootMargin: '10px', threshold: 0.1 });
-
-        // 初始观察
-        observer.observe(item);
-    }
-    connectedCallback() {
-        this.delay = this.delay;
-
-        this.#initBottomReachedObserver();
-    }
-}
-
-if (!customElements.get('ea-infinite')) {
-    customElements.define('ea-infinite', EaInfiniteScroll);
-}

package/components/ea-infinite-scroll-item/index.js

@@ -1,18 +0,0 @@
-import Base from '../Base.js';
-
-export class EaInfiniteScrollItem extends Base {
-    constructor() {
-        super();
-
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        shadowRoot.innerHTML = `
-            <div class='ea-infinite-item_wrap' part='container'>
-                <slot></slot>
-            </div>
-        `;
-    }
-}
-
-if (!customElements.get('ea-infinite-item')) {
-    customElements.define('ea-infinite-item', EaInfiniteScrollItem);
-}

package/components/ea-input/index.css

@@ -1,139 +0,0 @@
-.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/index.js

@@ -1,398 +0,0 @@
-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);
-}