easy-component-ui 0.0.1 → 1.0.3

package/components/Base.js

@@ -0,0 +1,90 @@
+// @ts-nocheck
+
+import setStyle from '../utils/setStyle.js';
+
+export default class Base extends HTMLElement {
+    constructor() {
+        super();
+
+        this.isProduction = false;
+        this.isProduction = true;
+    }
+
+    /**
+     * 设置属性值，并切换className
+     * @param {string} attr 属性名
+     * @param {boolean} flag 属性值
+     * @param {string} className class名
+     */
+    toggleAttribute(attr, flag, className) {
+        if (flag) {
+            this.setAttribute(attr, flag);
+
+            if (className) this.dom.classList.add(className);
+        } else {
+
+            if (this.hasAttribute(attr)) this.removeAttribute(attr);
+            if (className) this.dom.classList.remove(className);
+        }
+    }
+
+    /**
+     * 设置属性值
+     * @param {string} attr 属性名
+     * @param {boolean} flag 属性值
+     */
+    toggleAttr(attr, flag) {
+        if (flag) {
+            this.setAttribute(attr, flag);
+        } else {
+            this.removeAttribute(attr);
+        }
+    }
+
+    /**
+     * 获取属性值，并转换为布尔值
+     * @param {string} attrName 属性名
+     * @returns {boolean}
+     */
+    getAttrBoolean(attrName) {
+        const attr = this.getAttribute(attrName);
+        return attr === 'true' || attr === '';
+    }
+
+    /**
+     * 获取属性值，并转换为数字
+     * @param {string} attrName 属性名
+     * @returns {number}
+     */
+    getAttrNumber(attrName) {
+        const attr = this.getAttribute(attrName);
+
+        return attr ? Number(attr) : 0;
+    }
+
+    // 样式构建
+    build(shadowRoot, stylesheet) {
+        if (this.isProduction) {
+            const styleNode = document.createElement('style');
+            styleNode.innerHTML = stylesheet;
+            this.shadowRoot.appendChild(styleNode);
+        } else {
+            if (this.nodeName.toLowerCase() == 'ea-skeleton-item' && !this.isProduction) setStyle(shadowRoot, new URL("ea-skeleton" + '/index.css', import.meta.url).href);
+            else if (this.nodeName.toLowerCase() == 'ea-carousel-item' && !this.isProduction) setStyle(shadowRoot, new URL("ea-carousel" + '/index.css', import.meta.url).href);
+            else if (this.nodeName.toLowerCase() == 'ea-timeline-item' && !this.isProduction) setStyle(shadowRoot, new URL("ea-timeline" + '/index.css', import.meta.url).href);
+            else if (this.nodeName.toLowerCase() == 'ea-collapse-item' && !this.isProduction) setStyle(shadowRoot, new URL("ea-collapse" + '/index.css', import.meta.url).href);
+            else setStyle(shadowRoot, new URL(this.nodeName.toLowerCase() + '/index.css', import.meta.url).href);
+        }
+    }
+
+    /**
+     * 
+     * @param {string} url 链接
+     */
+    setIconFile(url) {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = url;
+        this.shadowRoot.appendChild(link);
+    }
+}

package/components/ea-alert/index.js

@@ -0,0 +1,298 @@
+// @ts-nocheck
+import Base from '../Base.js';
+import { createElement } from '../../utils/createElement.js';
+import "../ea-icon/index.js"
+
+const stylesheet = `
+.ea-alert_wrap {
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  border-radius: 4px;
+  padding: 8px 16px;
+  margin: 20px 0 0;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  opacity: 1;
+  transition: opacity 0.2s;
+}
+.ea-alert_wrap .ea-alert_content {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.ea-alert_wrap .ea-alert_content .ea-alert_title {
+  display: flex;
+  align-items: center;
+}
+.ea-alert_wrap .ea-alert_content .ea-alert_title i {
+  margin-right: 0.5rem;
+}
+.ea-alert_wrap .ea-alert_content .ea-alert_close-icon {
+  color: #c0c4cc;
+  cursor: pointer;
+}
+.ea-alert_wrap .ea-alert_content.ea-alert--center .ea-alert_title,
+.ea-alert_wrap .ea-alert_content.ea-alert--center .ea-alert_close-icon {
+  margin-left: auto;
+}
+.ea-alert_wrap .ea-alert_description {
+  width: 100%;
+  margin: 5px 0 0;
+  font-size: 12px;
+}
+.ea-alert_wrap.ea-alert--success {
+  background-color: #f0f9eb;
+  color: #67c23a;
+}
+.ea-alert_wrap.ea-alert--success.ea-alert--dark {
+  color: #fff;
+  background-color: #67c23a;
+}
+.ea-alert_wrap.ea-alert--success.ea-alert--dark .ea-alert_close-icon {
+  color: #fff;
+}
+.ea-alert_wrap.ea-alert--info {
+  background-color: #f4f4f5;
+  color: #909399;
+}
+.ea-alert_wrap.ea-alert--info.ea-alert--dark {
+  color: #fff;
+  background-color: #909399;
+}
+.ea-alert_wrap.ea-alert--info.ea-alert--dark .ea-alert_close-icon {
+  color: #fff;
+}
+.ea-alert_wrap.ea-alert--warning {
+  background-color: #fdf6ec;
+  color: #e6a23c;
+}
+.ea-alert_wrap.ea-alert--warning.ea-alert--dark {
+  color: #fff;
+  background-color: #e6a23c;
+}
+.ea-alert_wrap.ea-alert--warning.ea-alert--dark .ea-alert_close-icon {
+  color: #fff;
+}
+.ea-alert_wrap.ea-alert--error {
+  background-color: #fef0f0;
+  color: #f56c6c;
+}
+.ea-alert_wrap.ea-alert--error.ea-alert--dark {
+  color: #fff;
+  background-color: #f56c6c;
+}
+.ea-alert_wrap.ea-alert--error.ea-alert--dark .ea-alert_close-icon {
+  color: #fff;
+}
+`;
+
+export class EaAlert extends Base {
+  #wrap;
+
+  #alertContent;
+  #alertTitle;
+
+  constructor() {
+    super();
+
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+    const wrap = document.createElement('div');
+    wrap.className = 'ea-alert_wrap';
+
+    const alertTitle = createElement('span', 'ea-alert_title');
+    const alertContent = createElement('div', 'ea-alert_content', alertTitle);
+    wrap.appendChild(alertContent);
+
+    this.#wrap = wrap;
+    this.#alertContent = alertContent;
+    this.#alertTitle = alertTitle;
+
+    this.setIconFile(new URL('../ea-icon/index.css', import.meta.url).href);
+
+    this.build(shadowRoot, stylesheet);
+    this.shadowRoot.appendChild(wrap);
+  }
+
+  // ------- type 获取提示类型 -------
+  // #region
+  get type() {
+    return this.getAttribute('type') || "info";
+  }
+
+  set type(value) {
+    this.setAttribute('type', value);
+
+    this.#wrap.classList.add(`ea-alert--${value}`);
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- title 获取提示标题 -------
+  // #region
+  get title() {
+    return this.getAttribute('title') || "";
+  }
+
+  set title(value) {
+    this.setAttribute('title', value);
+
+    this.#alertTitle.innerText = value;
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- closable 是否可关闭 -------
+  // #region
+  get closable() {
+    const flag = this.getAttribute('closable');
+
+    if (flag === null || flag === "true" || flag === "") return true;
+
+    return false;
+  }
+
+  set closable(value) {
+    this.setAttribute('closable', value);
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- close-text 关闭按钮文字 -------
+  // #region
+  get closeText() {
+    return this.getAttribute('close-text') || "";
+  }
+
+  set closeText(value) {
+    this.setAttribute('close-text', value);
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- effect 亮色与暗色主题 -------
+  // #region
+  get effect() {
+    return this.getAttribute('effect') || "light";
+  }
+
+  set effect(value) {
+    this.setAttribute('effect', value);
+
+    if (value === "dark") {
+      this.#wrap.classList.add('ea-alert--dark');
+    } else {
+      this.#wrap.classList.remove('ea-alert--dark');
+    }
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- show-icon 是否显示图标 -------
+  // #region
+  get showIcon() {
+    return this.getAttrBoolean('show-icon') || false;
+  }
+
+  set showIcon(value) {
+    this.setAttribute('show-icon', value);
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- center 是否居中 -------
+  // #region
+  get center() {
+    return this.getAttrBoolean('center') || false;
+  }
+
+  set center(value) {
+    this.setAttribute('center', value);
+
+    this.#alertContent.classList.toggle('ea-alert--center', value);
+  }
+  // #endregion
+  // ------- end -------
+
+  // ------- description 提示描述 -------
+  // #region
+  get description() {
+    return this.getAttribute('description') || "";
+  }
+
+  set description(value) {
+    this.setAttribute('description', value);
+  }
+  // #endregion
+  // ------- end -------
+
+  initClosableElement(closable, closeText) {
+    const that = this;
+
+    const closeIcon = createElement('i', 'ea-alert_close-icon');
+    closable === true && closeText === "" ? closeIcon.classList.add('icon-cancel') : closeIcon.innerText = closeText;
+    this.#alertContent.appendChild(closeIcon);
+
+    closeIcon.addEventListener('click', function () {
+      that.#wrap.style.opacity = 0;
+
+      that.dispatchEvent(new CustomEvent('close', { detail: { target: that } }));
+    });
+
+    this.#wrap.addEventListener('transitionend', function () {
+      that.remove();
+    });
+  }
+
+  initShowIconElement(type) {
+    const iconClass = {
+      success: 'ok-circled',
+      info: 'info',
+      warning: 'attention-alt',
+      error: 'cancel-circled'
+    }
+
+    const icon = createElement('i', `icon-${iconClass[type]}`);
+    icon.classList.add(`ea-alert--${type}`);
+    this.#alertTitle.insertBefore(icon, this.#alertTitle.firstChild);
+  }
+
+  initDescriptionElement(description) {
+    const descriptionElement = createElement('p', 'ea-alert_description');
+    this.#wrap.style.flexDirection = 'column';
+
+    descriptionElement.innerText = description;
+    this.#wrap.appendChild(descriptionElement);
+  }
+
+  init() {
+
+    this.type = this.type;
+
+    this.title = this.title;
+
+    this.closable = this.closable;
+
+    this.closeText = this.closeText;
+
+    this.effect = this.effect;
+
+    this.center = this.center;
+
+    if (this.closable) this.initClosableElement(this.closable, this.closeText);
+
+    if (this.showIcon) this.initShowIconElement(this.type);
+
+    if (this.description) this.initDescriptionElement(this.description);
+  }
+
+  connectedCallback() {
+    this.init();
+  }
+}
+
+if (!customElements.get('ea-alert')) {
+  customElements.define('ea-alert', EaAlert);
+}

package/components/ea-avatar/index.js

@@ -0,0 +1,277 @@
+// @ts-nocheck
+import Base from '../Base.js';
+
+const stylesheet = `
+.ea-avatar_wrap .ea-avatar {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  color: #ffffff;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar-fill--fill img {
+  object-fit: fill;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar-fill--contain img {
+  object-fit: contain;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar-fill--cover img {
+  object-fit: cover;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar-fill--none img {
+  object-fit: none;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar-fill--scale-down img {
+  object-fit: scale-down;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar--normal {
+  width: 50px;
+  height: 50px;
+  line-height: 50px;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar--large {
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar--medium {
+  width: 36px;
+  height: 36px;
+  line-height: 36px;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar--small {
+  width: 28px;
+  height: 28px;
+  line-height: 28px;
+}
+.ea-avatar_wrap .ea-avatar .ea-avatar--text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar--circle {
+  border-radius: 50%;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar--square {
+  border-radius: 5px;
+}
+.ea-avatar_wrap .ea-avatar .ea-avatar--img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+`;
+
+const defaultAvatar = `
+    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+            <clipPath id="a">
+                <path d="M0 40h90v45H0z" />
+            </clipPath>
+        </defs>
+        <path fill="#c0c4cc" d="M0 0h100v100H0z" />
+        <circle cx="50" cy="35" r="20" fill="#fff" />
+        <circle cx="50" cy="97" r="40" fill="#fff" clip-path="url(#a)" />
+    </svg>
+`;
+
+const errorAvatar = `
+    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <path fill="#c0c4cc" d="M0 0h100v100H0z" />
+        <path fill="#fff" d="M15 20h70v60H15z" />
+        <circle r="8" cx="32" cy="35" fill="#c0c4cc" />
+        <path d="M60 42.5L39 75h42z" fill="#c0c4cc" />
+        <path d="M35 52.5L20 75h-4 32z" fill="#c0c4cc" />
+    </svg>
+`;
+
+const iconAvatar = (icon) => {
+    return `
+        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+            <path fill="#c0c4cc" d="M0 0h100v100H0z" />
+        </svg>
+        <i class="fa ea-avatar--text ${icon}"></i>
+    `;
+}
+
+const textAvatar = (text) => {
+    return `
+        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+            <path fill="#c0c4cc" d="M0 0h100v100H0z" />
+        </svg>
+        <span class="ea-avatar--text">${text}</span>
+    `;
+}
+
+export class EaAvatar extends Base {
+    #wrap;
+
+    #textSlot;
+
+    #avatar;
+    #img;
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        const wrap = document.createElement('div');
+        wrap.className = 'ea-avatar_wrap';
+
+        const avatar = document.createElement('span');
+        avatar.className = 'ea-avatar';
+        avatar.innerHTML = defaultAvatar;
+        wrap.appendChild(avatar);
+
+        const slot = document.createElement('slot');
+        avatar.appendChild(slot);
+
+        const img = document.createElement('img');
+        avatar.appendChild(img);
+
+        this.#wrap = wrap;
+        this.#textSlot = slot;
+        this.#avatar = avatar;
+        this.#img = img;
+
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = new URL('../ea-icon/index.css', import.meta.url).href;
+        shadowRoot.appendChild(link);
+
+        this.build(shadowRoot, stylesheet);
+        this.shadowRoot.appendChild(wrap);
+    }
+
+    // ------- size 图片大小 -------
+    // #region
+    get size() {
+        const sizeNumber = this.getAttrNumber('size');
+        const sizeString = this.getAttribute('size');
+
+        if (sizeNumber === 0 || !sizeNumber) {
+            return ['large', 'medium', 'small'].includes(sizeString) ? sizeString : 'normal';
+        }
+
+        return this.getAttrNumber('size');
+    }
+
+    set size(value) {
+        this.setAttribute('size', value);
+
+
+        if (typeof value === "number") {
+            this.#avatar.style.width = `${value}px`;
+            this.#avatar.style.height = `${value}px`;
+            this.#avatar.style.lineHeight = `${value}px`;
+        } else if (typeof value === "string") {
+            this.#avatar.classList.add(`ea-avatar--${value}`);
+        }
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- shape 图片形状 -------
+    // #region
+    get shape() {
+        const shape = this.getAttribute('shape');
+
+        return ['circle', 'square'].includes(shape) ? shape : 'circle';
+    }
+
+    set shape(value) {
+        this.setAttribute('shape', value);
+        this.#avatar.classList.add(`ea-avatar--${this.shape}`);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- src 图片链接 -------
+    // #region
+    get src() {
+        return this.getAttribute('src');
+    }
+
+    set src(value) {
+        if (!value) return;
+
+        const image = new Image();
+        image.src = value;
+
+        image.onload = () => {
+            this.setAttribute('src', value);
+            this.#avatar.innerHTML = `<img class="ea-avatar--img" src="${value}" alt="头像">`;
+        };
+
+        image.onerror = (e) => {
+            this.setAttribute('src', value);
+            this.#avatar.innerHTML = errorAvatar;
+
+            this.dispatchEvent(new CustomEvent('error', {
+                detail: {
+                    error: e,
+                },
+            }));
+        };
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- icon 图标 -------
+    // #region
+    get icon() {
+        return this.getAttribute('icon');
+    }
+
+    set icon(value) {
+        this.setAttribute('icon', value);
+
+        this.#avatar.innerHTML = iconAvatar(value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- fit 图片容器适应 -------
+    // #region
+    get fit() {
+        return this.getAttribute('fit') || 'cover';
+    }
+
+    set fit(value) {
+        this.setAttribute('fit', value);
+
+        this.#avatar.classList.add(`ea-avatar-fill--${value}`);
+    }
+    // #endregion
+    // ------- end -------
+
+    init() {
+        const that = this;
+
+        this.size = this.size;
+
+        this.shape = this.shape;
+
+        this.src = this.src;
+
+        if (this.src) {
+            this.fit = this.fit;
+        }
+
+        if (!this.src && this.icon) {
+            this.icon = this.icon;
+        }
+
+        if (this.innerHTML !== "" && !this.icon && !this.src) {
+            this.#avatar.innerHTML = textAvatar(this.innerHTML);
+        }
+    }
+
+    connectedCallback() {
+        this.init();
+    }
+}
+
+if (!customElements.get('ea-avatar')) {
+    customElements.define('ea-avatar', EaAvatar);
+}