easy-component-ui 0.0.2 → 1.0.3

package/components/ea-backtop/index.js

@@ -0,0 +1,232 @@
+// @ts-nocheck
+import Base from '../Base.js';
+import { createElement, createSlotElement } from '../../utils/createElement.js';
+import "../ea-icon/index.js"
+
+const stylesheet = `
+.ea-backtop_wrap {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  right: 40px;
+  bottom: 40px;
+  cursor: pointer;
+  background-color: #fff;
+  border-radius: 50%;
+  color: #409eff;
+  font-size: 14px;
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
+  opacity: 1;
+  z-index: 5;
+  transition: opacity 0.3s ease-in-out;
+}
+`;
+
+export class EaBacktop extends Base {
+    #wrap;
+
+    #iconSlot;
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        const wrap = document.createElement('div');
+        wrap.className = 'ea-backtop_wrap';
+        wrap.style.display = 'none';
+
+        const slot = createSlotElement('');
+        wrap.appendChild(slot);
+        this.#iconSlot = slot;
+
+        this.#wrap = wrap;
+        this.setIconFile(new URL('../ea-icon/index.css', import.meta.url).href);
+
+        this.build(shadowRoot, stylesheet);
+        this.shadowRoot.appendChild(wrap);
+    }
+
+    // ------- target 触发滚动的对象 -------
+    // #region
+    get target() {
+        return this.getAttribute('target');
+    }
+
+    set target(value) {
+        this.setAttribute('target', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- right 滚动按钮距离右边的距离 -------
+    // #region
+    get right() {
+        return this.getAttribute('right') || 40;
+    }
+
+    set right(value) {
+        this.setAttribute('right', value);
+
+        this.#wrap.style.right = value + 'px';
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- bottom 滚动按钮距离下边的距离 -------
+    // #region
+    get bottom() {
+        return this.getAttribute('bottom') || 40;
+    }
+
+    set bottom(value) {
+        this.setAttribute('bottom', value);
+
+        this.#wrap.style.bottom = value + 'px';
+    }
+    // #endregion
+    // ------- end ------- 
+
+    // ------- icon 图标类名 -------
+    // #region
+    get icon() {
+        return this.getAttribute('icon') || "icon-angle-up";
+    }
+
+    set icon(value) {
+        this.setAttribute('icon', value);
+
+        const icon = createElement('ea-icon');
+        icon.icon = value;
+        this.#iconSlot.innerHTML = "";
+        this.#iconSlot.appendChild(icon);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- visibility-height 滚动按钮显示和隐藏的触发条件 -------
+    // #region
+    get visibilityHeight() {
+        return this.getAttribute('visibility-height') || 200;
+    }
+
+    set visibilityHeight(value) {
+        this.setAttribute('visibility-height', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    /**
+     * 根据滚动位置控制返回顶部按钮的显示和隐藏。
+     * 
+     * 当页面滚动超过200像素时，显示返回顶部按钮，并在过渡结束后设置按钮为完全可见。
+     * 当页面滚动不超过200像素时，隐藏返回顶部按钮，并在过渡结束后将按钮的显示属性设置为none。
+     * 
+     * @param {*} scrollDom - 用于检测滚动位置的DOM元素。
+     * @param {number} scrollFlag - 页面滚动到指定距离时触发。
+     */
+    #handleBackTopBtnShow(scrollDom, scrollFlag) {
+        const that = this;
+
+        // 当滚动距离超过200像素时，显示返回顶部按钮
+        if (scrollDom.scrollTop > scrollFlag) {
+            this.#wrap.style.display = 'flex';
+            this.#wrap.ontransitionend = null;
+
+            // 延迟10毫秒后设置按钮的透明度为1，使其完全可见
+            setTimeout(() => {
+                this.#wrap.style.opacity = 1;
+            }, 10);
+        } else {
+            // 当滚动距离不超过200像素时，隐藏返回顶部按钮
+            this.#wrap.style.opacity = 0;
+
+            // 在过渡结束时，将按钮的显示属性设置为none
+            this.#wrap.ontransitionend = function () {
+                that.#wrap.style.display = 'none';
+            };
+        }
+    }
+
+    /**
+     * 根据目标名称获取滚动事件相关DOM元素。
+     * 
+     * 此函数用于确定应该监听哪个DOM元素的滚动事件。它可以是特定的DOM元素，或者是整个文档。
+     * 通过判断目标名称是否为空或未定义，来决定是获取整个文档还是指定的DOM元素。
+     * 
+     * @param {string} targetName - 目标元素的选择器字符串。如果为空或未定义，则监听整个文档。
+     * @returns {Object} 返回一个对象，包含两个属性：dom和scrollDom，它们都指向同一个被选中的DOM元素，或者如果未指定目标名称，则指向document对象。
+     */
+    #handleScrollEvent(targetName) {
+        // 保存当前上下文的引用
+        const that = this;
+
+        // 初始化dom和scrollDom变量为null
+        let dom = null;
+        let scrollDom = null;
+
+        // 判断目标名称是否为空或未定义
+        if (targetName === "null" || targetName === '' || targetName === null || targetName === undefined || targetName === 'undefined') {
+            // 如果是，设置dom和scrollDom为document对象
+            dom = document;
+            scrollDom = document.documentElement;
+        } else {
+            // 如果不是，通过目标名称查询DOM元素，并设置dom和scrollDom
+            dom = document.querySelector(targetName);
+            scrollDom = document.querySelector(targetName);
+        }
+
+        // 返回包含dom和scrollDom的对象
+        return { dom, scrollDom };
+    }
+
+    #initScrollBtn() {
+        const that = this;
+        const { dom, scrollDom } = this.#handleScrollEvent(this.target);
+
+        this.#handleBackTopBtnShow(scrollDom, this.visibilityHeight);
+
+        dom.addEventListener('scroll', function () {
+            that.#handleBackTopBtnShow(scrollDom, that.visibilityHeight);
+        });
+
+        this.#wrap.addEventListener('click', function () {
+            let step = 10;
+
+            let timer = setInterval(() => {
+                step += 5;
+                scrollDom.scrollTop -= step;
+
+                if (scrollDom.scrollTop <= 0) {
+                    scrollDom.scrollTop = 0;
+                    clearInterval(timer);
+                    timer = null;
+                }
+            }, 12);
+
+            this.dispatchEvent(new CustomEvent('backtop', {}));
+        });
+    }
+
+    init() {
+        const that = this;
+
+        this.target = this.target;
+        this.right = this.right;
+        this.bottom = this.bottom;
+        this.visibilityHeight = this.visibilityHeight;
+        this.icon = this.icon;
+
+        this.#initScrollBtn();
+    }
+
+    connectedCallback() {
+        this.init();
+    }
+}
+
+if (!customElements.get('ea-backtop')) {
+    customElements.define('ea-backtop', EaBacktop);
+}

package/components/ea-badge/index.js

@@ -0,0 +1,160 @@
+// @ts-nocheck
+import Base from '../Base.js';
+
+const stylesheet = `
+.ea-badge_wrap {
+  position: relative;
+  vertical-align: middle;
+  display: inline-block;
+}
+.ea-badge_wrap .ea-badge_content {
+  display: inline-block;
+  padding: 0 0.375rem;
+  border-radius: 0.625rem;
+  border: 1px solid #fff;
+  height: 1.125rem;
+  line-height: 1.125rem;
+  position: absolute;
+  right: 0.625rem;
+  top: 0;
+  transform: translate(100%, -50%);
+  color: #fff;
+  font-size: 0.75rem;
+  text-align: center;
+  white-space: nowrap;
+  background-color: #f56c6c;
+}
+.ea-badge_wrap .ea-badge_content.primary {
+  background-color: #409eff;
+}
+.ea-badge_wrap .ea-badge_content.success {
+  background-color: #67c23a;
+}
+.ea-badge_wrap .ea-badge_content.warning {
+  background-color: #e6a23c;
+}
+.ea-badge_wrap .ea-badge_content.info {
+  background-color: #909399;
+}
+.ea-badge_wrap .ea-badge_content.dot {
+  right: 0.3125rem;
+  padding: 0;
+  border-radius: 50%;
+  width: 0.5rem;
+  height: 0.5rem;
+}
+`;
+
+export class EaBadge extends Base {
+  #wrap;
+  #badgeWrap;
+
+  constructor() {
+    super();
+
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+    const wrap = document.createElement('div');
+    wrap.className = 'ea-badge_wrap';
+
+    const slot = document.createElement('slot');
+    wrap.appendChild(slot);
+
+    const badgeWrap = document.createElement('sup');
+    badgeWrap.className = 'ea-badge_content';
+    wrap.appendChild(badgeWrap);
+
+    this.#wrap = wrap;
+    this.#badgeWrap = badgeWrap;
+
+    this.build(shadowRoot, stylesheet);
+    this.shadowRoot.appendChild(wrap);
+  }
+
+  // ------- value 徽章内的值 -------
+  // #region
+  get value() {
+    return this.getAttribute('value') || '';
+  }
+
+  set value(value) {
+    this.setAttribute('value', value);
+
+    this.#badgeWrap.innerHTML = value;
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- type 样式类型 -------
+  // #region
+  get type() {
+    return this.getAttribute('type') || 'normal';
+  }
+
+  set type(value) {
+    this.setAttribute('type', value);
+
+    this.#badgeWrap.classList.add(value);
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- max 最大值 -------
+  // #region
+  get max() {
+    return this.getAttrNumber('max') || Infinity;
+  }
+
+  set max(value) {
+    if (value === Infinity) return;
+
+    value = parseInt(value);
+
+    this.setAttribute('max', value);
+
+    if (this.value > value) {
+      this.value = value + '+';
+    }
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- is-dot 是否为点状徽章 -------
+  // #region
+  get isDot() {
+    return this.getAttrBoolean('is-dot') || false;
+  }
+
+  set isDot(value) {
+    this.toggleAttr('is-dot', value);
+
+    this.#badgeWrap.innerText = value ? '' : this.value;
+    this.#badgeWrap.classList.toggle('dot', value);
+  }
+  // #endregion
+  // ------- end -------
+
+  init() {
+    const that = this;
+
+    this.value = this.value;
+
+    this.type = this.type;
+
+    this.max = this.max;
+
+    this.isDot = this.isDot;
+
+    try {
+      const button = this.querySelector('ea-button');
+      if (button) button.style.setProperty('--margin-right', '0');
+    } catch (error) { }
+  }
+
+  connectedCallback() {
+    this.init();
+  }
+}
+
+if (!customElements.get('ea-badge')) {
+  customElements.define('ea-badge', EaBadge);
+}